feat(generator-frontend): 新增生成器管理前端模块

- 新增控制台内「我的生成器」视图，包含卡片墙、详情侧面板和上传模态框
- 新增独立生成器市场页面（/generators），支持平台筛选和安装交互
- 解锁控制台侧边栏生成器导航项，并更新顶部Header上下文操作
- 首页导航栏新增产品下拉菜单，提供生成器市场入口
- 使用gene-blue作为生成器模块视觉主色，与种子库进行区分

Author: Geniusay

openspec/changes/generator-frontend/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-03-17

openspec/changes/generator-frontend/design.md

@@ -0,0 +1,90 @@
+## Context
+
+内容森林前端已完成种子库模块（控制台 + 种子卡片墙 + 编辑 Modal），建立了完整的设计系统（`void` 深色系 + `bio-green` 主色 + DM Mono/Instrument Serif 字体组合）。生成器模块后端 API 已基本完备，前端需要在现有控制台框架内接入「我的生成器」视图，并新增独立的生成器市场页。
+
+**当前状态**：
+- 已有：Nuxt 3 + Tailwind、控制台框架（`console/index.vue` + `ConsoleSidebar` + `ConsoleHeader`）、设计系统规范、`ToastNotification`、`ConfirmDialog` 公共组件
+- 缺少：生成器相关视图和组件、生成器市场独立页、首页导航下拉菜单
+
+**关键约束**：生成器本身是 Skill 文件包，不可在 Web 端执行。Web 端职责仅限于元数据管理（浏览、上传注册、安装、卸载）。
+
+## Goals / Non-Goals
+
+**Goals:**
+- 在控制台内接入「我的生成器」视图（卡片墙 + 详情侧面板 + 上传 Modal）
+- 新增 `/generators` 独立市场页（Hero + 平台筛选 + 卡片墙 + 安装交互）
+- 解锁控制台侧边栏生成器导航项，新增 Header 上下文操作
+- 首页 HeroNav 新增产品下拉菜单，包含生成器市场入口
+- 严格复用现有设计系统规范，生成器模块用 `gene-blue` 作视觉区分
+
+**Non-Goals:**
+- Web 端生成器执行界面（MVP 阶段由 AI IDE Agent 负责）
+- Skill 文件在线编辑器
+- 生成器评分、付费功能
+- 果实池展示
+- 用户登录态（MVP 固定 `local_admin`）
+
+## Decisions
+
+### 决策 1：生成器模块用 `gene-blue` 作 accent，不用 `bio-green`
+
+**决策**：生成器卡片左侧 accent bar、Tab 激活下划线、安装按钮边框均使用 `gene-blue (#0ea5e9)`，而非 `bio-green`。
+
+**理由**：设计系统中 `gene-blue` 定义为辅助色，生成器是种子库的「下游工具层」，用辅助色建立层级感。全局 CTA（Toast、确认按钮）仍用 `bio-green` 保持一致性。
+
+**备选**：全部统一用 `bio-green`。**否决**：两个模块视觉无区分，用户无法快速感知「我在哪个模块」。
+
+### 决策 2：详情面板用右侧滑出（非 Modal）
+
+**决策**：点击「查看详情」后，右侧滑出宽度 `w-96` 的详情面板，主内容区同步压缩；不使用全屏遮罩 Modal。
+
+**理由**：生成器详情是辅助信息，不需要打断用户的卡片浏览状态。侧面板允许用户同时看到卡片列表和详情，体验更流畅。这与种子编辑 Modal（需要全屏专注填写内容）的场景不同。
+
+**备选**：全屏 Modal。**否决**：生成器详情只有元数据展示，无需打断主流程。
+
+### 决策 3：「我的生成器」和「生成器市场」分属控制台和首页，不合并为一个路由
+
+**决策**：「我的生成器」作为控制台内的视图（`activeView === 'generators'`）；「生成器市场」作为独立页面 `/generators`，复用首页 HeroNav。
+
+**理由**：两者受众和心智模型不同——控制台是「管理我已有的工具」，市场是「发现新工具」。拆分路由使二者都可直接链接访问，市场页也无需登录即可浏览。
+
+**备选**：合并为控制台内的 Tab 切换。**否决**：市场页需要对外可访问（无需登录），强制放入控制台内会增加访问门槛。
+
+### 决策 4：市场页使用 Mock 数据作为开发阶段占位，保留空状态
+
+**决策**：MVP 阶段在 `composables/useGeneratorMarket.ts` 中内置 mock 数据数组（3-4 条示例生成器），供开发和演示使用。同时保留空状态 UI，方便后续切换为真实 API 时验证。
+
+**理由**：后端市场数据依赖预置种子数据，前端开发不应被后端数据阻塞。
+
+### 决策 5：composables 层封装 API 调用，组件不直接 fetch
+
+**决策**：新增 `composables/useMyGenerators.ts` 和 `composables/useGeneratorMarket.ts`，封装所有 API 调用、loading/error 状态、数据转换逻辑。组件只消费 composable 暴露的响应式状态和方法。
+
+**理由**：与现有 `composables/useSeedRepository.ts` 保持一致的代码组织规范，便于测试和复用。
+
+### 决策 6：首页 HeroNav 下拉菜单用纯 CSS hover 实现，不引入新依赖
+
+**决策**：产品下拉菜单使用 Vue `v-show` + `@mouseenter`/`@mouseleave` 控制显隐，动效用 Tailwind `transition` 类，不引入 Headless UI 或 Floating UI 等库。
+
+**理由**：菜单项少（当前只有「生成器市场」一项），过度工程化不合适。保持依赖树简洁。
+
+## Risks / Trade-offs
+
+- **[风险] 详情侧面板与卡片墙压缩动效在小屏幕下体验差** → 在 `md` 以下屏幕将侧面板改为底部抽屉（`translate-y` 动效），或降级为全屏 Modal
+- **[风险] 上传 zip 文件前端无法校验是否包含 SKILL.md** → 前端仅做文件类型和大小校验（`.zip`，最大 10MB），SKILL.md 存在性由后端返回 400 时前端展示错误信息
+- **[Trade-off] Mock 数据** → 市场页视觉效果依赖 mock 数据质量，需要准备 3-4 条代表性示例（不同平台、不同状态），后续接入真实 API 时删除 mock
+- **[风险] 安装成功后 Skill 路径 Toast 信息过长** → 路径截断显示，提供「复制路径」小按钮
+
+## Migration Plan
+
+纯前端新增模块，无数据迁移。部署顺序：
+1. 新增 composables（`useMyGenerators`、`useGeneratorMarket`）
+2. 新增 generator 组件目录
+3. 改动 `ConsoleSidebar.vue`、`ConsoleHeader.vue`、`console/index.vue`
+4. 新增 `pages/generators/index.vue`
+5. 改动 `HeroNav.vue`
+
+## Open Questions
+
+- `ConsoleHeader.vue` 当前的「+ 上传生成器」按钮事件如何跨组件传递到 `GeneratorView` 内的 Modal？建议用 `console/index.vue` 统一管理 Modal 状态，通过 props/emit 下传，与现有 `SeedEditor` 的模式保持一致。
+- 「在 AI IDE 中打开 Skill 文件」的交互：MVP 阶段只显示路径文字 + 「复制路径」按钮，不做实际 IDE 跳转。

openspec/changes/generator-frontend/proposal.md

@@ -0,0 +1,32 @@
+## Why
+
+生成器模块后端 API 已基本完备，但用户目前无法在 Web 端管理自己的生成器，也无法浏览和安装生成器市场中的 Skill 包。前端页面的缺失使整个生成器模块的使用闭环无法建立。
+
+## What Changes
+
+- 新增控制台「我的生成器」视图：展示用户已安装/自建的生成器列表，支持查看详情、卸载
+- 新增上传生成器 Modal：填写元数据 + 上传 Skill zip 包，调用 `POST /api/generators/upload`
+- 新增生成器详情侧面板：展示 outputCapabilities、Skill 路径等信息
+- 新增首页独立生成器市场页（`/generators`）：浏览市场生成器，支持平台筛选、安装/卸载
+- 改动控制台侧边栏：解锁「生成器」导航项（当前 disabled）
+- 改动首页导航栏：新增下拉菜单，包含「生成器市场」入口
+
+## Capabilities
+
+### New Capabilities
+
+- `my-generators-view`: 控制台内「我的生成器」视图，包含卡片墙、详情侧面板、上传 Modal
+- `generator-market-page`: 首页路由下的生成器市场独立页面（`/generators`），包含平台筛选、卡片墙、安装交互
+
+### Modified Capabilities
+
+- `console-layout`: 控制台侧边栏解锁 generators 导航项，console/index.vue 注册新视图
+- `landing-page`: 首页 HeroNav 导航栏新增下拉菜单，包含「生成器市场」链接
+
+## Impact
+
+- **前端新增**：`components/generator/GeneratorView.vue`、`GeneratorCardWall.vue`、`GeneratorCard.vue`、`GeneratorDetailPanel.vue`、`GeneratorUploadModal.vue`、`MarketView.vue`、`MarketCard.vue`、`PlatformFilterTabs.vue`
+- **前端新增页面**：`pages/generators/index.vue`
+- **前端改动**：`components/console/ConsoleSidebar.vue`（解锁 generators 项）、`console/index.vue`（注册视图）、`components/HeroNav.vue`（新增下拉菜单）
+- **接口依赖**：`GET /api/generators/mine`、`GET /api/generators/market`、`POST /api/generators/upload`、`POST /api/generators/:id/install`、`DELETE /api/generators/:id/uninstall`
+- **不影响**：种子库、营养库、果实模块、MCP Tools

openspec/changes/generator-frontend/specs/console-layout/spec.md

@@ -0,0 +1,66 @@
+## MODIFIED Requirements
+
+### Requirement: 侧边栏导航
+控制台 SHALL 提供可折叠的左侧边栏导航（展开宽度 `w-56`，折叠宽度 `w-14`）。侧边栏 SHALL 包含：顶部品牌 Logo 区、中部导航菜单、底部用户信息区和折叠按钮。
+
+侧边栏背景 SHALL 为 `bg-void-2/80 backdrop-blur border-r border-bio-green/10`。侧边栏顶部 SHALL 有 `bio-green` 向下渐变光晕增加深度感。
+
+导航菜单项 SHALL 包含 Iconify 图标 + 文字标签。激活态 SHALL 显示左侧 `2px bio-green` accent bar 和 `bg-bio-green/5` 背景。Coming soon 项 SHALL 透明度 40%，`cursor-not-allowed`。
+
+导航菜单项 SHALL 包含以下条目（按顺序）：
+- 种子库（`ph:plant`，已激活可用）
+- **生成器（`ph:cpu`，现在激活可用，移除 disabled 状态）**
+- 果实管理（`ph:leaf`，disabled）
+- 内容工坊（`ph:tree-structure`，disabled）
+- 数据看板（`ph:chart-line-up`，disabled）
+- 设置（`ph:gear`，disabled）
+
+#### Scenario: 侧边栏渲染
+- **WHEN** 控制台页面加载完成
+- **THEN** 左侧边栏可见，默认展开，显示品牌 Logo 和导航菜单
+- **AND** 「种子库」菜单项默认显示激活态
+- **AND** 「生成器」菜单项可点击（无 disabled 样式）
+
+#### Scenario: 折叠侧边栏
+- **WHEN** 用户点击底部折叠按钮
+- **THEN** 侧边栏宽度从 `w-56` 过渡到 `w-14`，文字标签隐藏，仅显示图标
+- **AND** 动效时长 `duration-300`
+
+#### Scenario: 展开侧边栏
+- **WHEN** 侧边栏处于折叠态，用户点击折叠按钮
+- **THEN** 侧边栏宽度从 `w-14` 过渡到 `w-56`，文字标签重新显示
+
+#### Scenario: 切换至生成器视图
+- **WHEN** 用户点击侧边栏「生成器」菜单项
+- **THEN** 主内容区切换至生成器视图（`activeView = 'generators'`）
+- **AND** 「生成器」菜单项显示激活态（accent bar + 背景色）
+- **AND** Header 面包屑更新为「// Console / 我的生成器」
+
+#### Scenario: 点击占位菜单项
+- **WHEN** 用户点击标注 disabled 的菜单项
+- **THEN** 该菜单项不响应点击（`opacity-40 cursor-not-allowed`）
+
+---
+
+### Requirement: 控制台顶部 Header
+控制台主内容区顶部 SHALL 提供 Header 栏（高度 `h-14`，`sticky top-0`）。Header 左侧 SHALL 显示面包屑路径。Header 右侧 SHALL 根据当前视图动态显示上下文操作按钮。
+
+面包屑和操作按钮规则（新增生成器视图）：
+- 种子库视图：`// Console / 种子库`，右侧显示「+ 新建种子」
+- **生成器视图：`// Console / 我的生成器`，右侧显示「+ 上传生成器」**
+
+Header 背景 SHALL 为 `bg-void/60 backdrop-blur border-b border-bio-green/10`。
+
+#### Scenario: 种子库 Header
+- **WHEN** 当前视图为种子库
+- **THEN** Header 右侧显示「+ 新建种子」按钮
+- **AND** 面包屑显示「// Console / 种子库」
+
+#### Scenario: 生成器视图 Header
+- **WHEN** 当前视图为生成器
+- **THEN** Header 右侧显示「+ 上传生成器」按钮
+- **AND** 面包屑显示「// Console / 我的生成器」
+
+#### Scenario: 点击上传生成器
+- **WHEN** 用户点击 Header 中的「+ 上传生成器」按钮
+- **THEN** 上传生成器 Modal 打开

openspec/changes/generator-frontend/specs/generator-market-page/spec.md

@@ -0,0 +1,78 @@
+## ADDED Requirements
+
+### Requirement: 生成器市场页面
+系统 SHALL 在 `/generators` 路由下提供独立的生成器市场页面。页面 SHALL 禁用 SSR（`definePageMeta({ ssr: false })`）。页面 SHALL 复用首页 `HeroNav` 导航栏和 `SiteFooter`。任何用户（无需登录）均可访问，安装操作使用固定 MVP userId `local_admin`。
+
+#### Scenario: 访问生成器市场
+- **WHEN** 用户访问 `/generators`
+- **THEN** 页面展示完整市场视图，包含 Hero 区、筛选 Tab、生成器卡片墙
+- **AND** 系统自动请求 `GET /api/generators/market`（携带 `X-User-Id: local_admin`）
+
+#### Scenario: 市场加载中
+- **WHEN** `GET /api/generators/market` 请求进行中
+- **THEN** 卡片区显示 6 个骨架占位卡片（`animate-pulse`）
+
+#### Scenario: 空状态
+- **WHEN** 市场没有任何生成器
+- **THEN** 显示空状态：`// EMPTY` 前缀（`text-mutation`）、「市场里还没有生成器」标题（`font-serif`）、「上传第一个生成器」CTA 按钮（跳转控制台）
+
+---
+
+### Requirement: 市场 Hero 区
+市场页顶部 SHALL 显示 Hero 区，包含：`// Generator Market` 技术前缀、「生成器市场」大标题、副文案「把爆款生产方法论，装进一个文件」、右侧实时统计（生成器总数 · 总安装次数）。
+
+#### Scenario: 统计数据展示
+- **WHEN** 市场页加载完成
+- **THEN** Hero 区右侧显示「N 个生成器 · M 次安装」统计
+- **AND** 数字使用 `text-gene-blue font-mono` 样式
+
+---
+
+### Requirement: 平台筛选 Tabs
+市场页 SHALL 提供平台筛选 Tabs：「全部」「小红书」「抖音」「推特」「知乎」「其他」。切换 Tab 时 SHALL 重新请求 API 并传入 `platform` 参数（「全部」不传）。每个 Tab SHALL 显示对应数量 badge。
+
+#### Scenario: 切换平台筛选
+- **WHEN** 用户点击「小红书」Tab
+- **THEN** 系统请求 `GET /api/generators/market?platform=xiaohongshu`
+- **AND** 卡片墙更新，「小红书」Tab 显示激活样式（底部 `2px gene-blue` underline）
+
+#### Scenario: 筛选无结果
+- **WHEN** 当前平台筛选下没有生成器
+- **THEN** 显示空状态「该平台暂无生成器」
+
+---
+
+### Requirement: 市场生成器卡片
+每张市场卡片 SHALL 展示：左侧 `3px gene-blue` accent bar、平台标签（右上角）、官方徽章（官方生成器显示）、生成器名称（`font-serif`）、描述（截断至 2 行）、作者、安装次数（`↓ N 次安装`）、价格（MVP 均显示「免费」）、安装/已安装按钮。
+
+#### Scenario: 展示未安装生成器
+- **WHEN** 生成器的 `isInstalled` 为 `false`
+- **THEN** 卡片底部显示「安装」按钮（`gene-blue` 边框色）
+
+#### Scenario: 展示已安装生成器
+- **WHEN** 生成器的 `isInstalled` 为 `true`
+- **THEN** 卡片底部显示「已安装 ✓」状态（`text-bio-green`，不可点击）
+
+---
+
+### Requirement: 安装生成器交互
+用户点击「安装」按钮后，系统 SHALL 调用 `POST /api/generators/:id/install`，安装期间按钮 SHALL 显示 loading 态。安装成功后 SHALL 给出路径提示 Toast，方便用户在 AI IDE 中定位 Skill 文件。
+
+#### Scenario: 安装进行中
+- **WHEN** 用户点击「安装」按钮
+- **THEN** 按钮变为 loading 态（「安装中...」），禁止重复点击
+
+#### Scenario: 安装成功
+- **WHEN** `POST /api/generators/:id/install` 返回成功
+- **THEN** 按钮变为「已安装 ✓」（`text-bio-green`）
+- **AND** Toast 显示「安装成功！Skill 路径：{skillPath}」
+- **AND** 安装计数 +1（前端乐观更新）
+
+#### Scenario: 安装失败
+- **WHEN** API 返回错误
+- **THEN** 按钮恢复「安装」状态
+- **AND** Toast 显示「安装失败，请重试」
+
+#### Scenario: 重复安装
+- **WHEN** API 返回 409（已安装）
+- **THEN** 按钮更新为「已安装 ✓」状态（数据同步修正）

openspec/changes/generator-frontend/specs/landing-page/spec.md

@@ -0,0 +1,30 @@
+## MODIFIED Requirements
+
+### Requirement: 首页导航栏
+首页导航栏（HeroNav）SHALL 提供主站入口导航。导航栏 SHALL 包含品牌 Logo 区（左侧）和导航链接区（右侧）。
+
+导航链接区 SHALL 包含：
+- **「产品」下拉菜单**（新增）：悬停或点击展开，包含以下条目：
+  - 生成器市场 → `/generators`
+  - （预留更多产品入口）
+- 「进入控制台」→ `/console`（保留现有）
+
+下拉菜单 SHALL 使用 `bg-void-2 border border-bio-green/10` 背景，`font-mono text-xs tracking-widest uppercase` 菜单项文字样式。下拉菜单 SHALL 在鼠标离开时自动关闭，动效为 `opacity-0 → opacity-100 translate-y-1 → translate-y-0`。
+
+#### Scenario: 导航栏渲染
+- **WHEN** 首页或任何使用 HeroNav 的页面加载
+- **THEN** 导航栏右侧显示「产品」下拉触发器和「进入控制台」按钮
+
+#### Scenario: 展开产品下拉菜单
+- **WHEN** 用户悬停或点击「产品」触发器
+- **THEN** 下拉菜单以 `opacity-0 → opacity-100` + `translate-y-1 → translate-y-0` 动效展开
+- **AND** 显示「生成器市场」菜单项
+
+#### Scenario: 跳转生成器市场
+- **WHEN** 用户点击下拉菜单中的「生成器市场」
+- **THEN** 页面跳转至 `/generators`
+- **AND** 下拉菜单关闭
+
+#### Scenario: 关闭下拉菜单
+- **WHEN** 用户鼠标移出下拉菜单区域
+- **THEN** 下拉菜单以反向动效关闭