visual-spec 0.1.0 → 0.1.2

package/{.trae/skills/starter-skill → skills/visual-spec-skill}/prompts/vspec_refine/refine.md

@@ -45,7 +45,7 @@
    - 必须更新 `/specs/details/` 下受影响模块的文档（优先更新既有文件，避免无意义新文件）：
      - 若变更涉及角色/权限：更新 `rbac/` 与 `data_permission/`
      - 若变更涉及页面交互/字段/流程：更新 `interaction/`、`page_load/`、`validation_matrix/`、`post_submit_*` 等相关文档
-     - 若变更涉及状态/操作可用性：更新 `state_machine/overall.*`（如存在）与 `decision_matrix/`、`validation_matrix/`
+    - 若变更涉及状态/操作可用性：更新 `state_machine/<module_slug>.*`（如存在）与 `decision_matrix/`、`validation_matrix/`
      - 若变更涉及外部依赖：更新 `dependencies.md` 对应模块的调用时机与失败兜底，并在细节规格中体现
    - 必须更新 `/specs/prototypes/`：
      - 页面/路由/菜单/按钮/表单字段必须与最新的细节规格一致

package/{.trae/skills/starter-skill → skills/visual-spec-skill}/prompts/vspec_refine/refine_q.md

@@ -1,8 +1,12 @@
 你是一名资深需求分析师。你的任务是：基于“待确认问题”的回答内容，将新增澄清与决策合并进需求归档文件，并更新“当前生效需求（Canonical）”。本命令用于从 questions 的答案反向修订 original。
 
+终止条件（必须）：
+1. 若 `/specs/background/questions.md` 不存在：立即结束，不做任何写入；仅输出一句“未找到 questions.md，/vspec:refine-q 结束”。
+2. 若 `/specs/background/questions.md` 中不存在“待回答的问题”（判断口径：存在 `状态` 为“未回答/待确认/需修改/待补充/待澄清”之一，或 `回答` 为空/仅空白）：立即结束，不做任何写入；仅输出一句“无待回答问题，/vspec:refine-q 结束”。
+
 输入信息包含：
 - 现有需求归档与分析：`/specs/background/original.md`
-- 问答表：`/specs/background/questions.md`（包含“回答/状态/回答者/回答时间”等列）
+- 问答列表：`/specs/background/questions.md`（包含“回答/状态/回答者/回答时间”等字段）
 - 如需核对上下游影响，可参考：`/specs/background/*.md`、`/specs/flows/*.puml`、`/specs/functions/*`
 
 采纳规则（必须）：
@@ -36,4 +40,13 @@
 ## 当前生效需求（Canonical）
 
 ## 仍待确认的问题
-- 汇总 questions 表里仍未回答/需修改的关键问题（只列重要的 5-15 条）
+- 汇总 questions 列表里仍未回答/需修改的关键问题（只列重要的 5-15 条）
+
+格式增强（必须）：
+1. 在本次追加到 `original.md` 的“采纳的问答条目”表格中：
+   - 对“回答”单元格内容使用 markdown 可渲染的背景色标记（例如用 `<mark>...</mark>` 包裹），以便一眼区分“已采纳的回答”。
+2. 同时更新 `/specs/background/questions.md`（不要新增字段，不要改动编号与字段名/顺序）：
+   - 对所有被本次采纳的条目（满足采纳规则的条目），必须将其状态规范化为“已回答”并标记背景色：
+     - `- 回答：<mark>...</mark>`
+     - `- 状态：<mark>已回答</mark>`
+   - 其他条目保持原样（例如“未回答/已跳过/需修改”）。

package/{.trae/skills/starter-skill → skills/visual-spec-skill}/prompts/vspec_verify/model.md

@@ -1,21 +1,27 @@
 你是一名资深数据架构师。你的任务是：基于已有需求分析产物，产出一组可评审的数据模型文档，并写入 `/specs/models/*.md`。
 
 前置规则（必须）：
+0. 在开始建模前，必须检查 `/specs/details/` 是否存在且非空：
+   - 若不存在或为空：立即停止，不生成任何模型文件；仅输出一句“前置条件不满足：请先执行 /vspec:detail 生成 /specs/details/，再执行 /vspec:verify”。
 1. 在开始建模前，先检查是否存在 `/specs/background/questions.md`。
-2. 若存在，则解析其中的问答表，找出“状态”为“未回答”（或“回答”为空）的所有问题。
+2. 若存在，则解析其中的问答列表（markdown 列表格式），找出“状态”为“未回答”（或“回答”为空）的所有问题。
 3. 对所有未回答的问题，必须先向用户逐条提问并等待用户回复后再继续建模：
    - 允许用户对任意问题回复“跳过”（或留空），表示本次不回答。
    - 进入建模前必须确保每个问题都有“已回答”或“已跳过”的结论，不能留下“未回答”。
 4. 收到用户回复后，必须更新 `/specs/background/questions.md`：
    - 填写“回答/回答者/回答时间/状态”
    - 状态仅允许填写：已回答、已跳过
-   - 不要改动表头与其他列名/顺序，不要改动“编号”
+   - 不要改动字段名与字段顺序，不要改动“编号”
+   - 对“已回答”的条目：必须用 markdown 可渲染的背景色标记回答与状态（例如用 `<mark>...</mark>` 包裹）：
+     - 回答：`- 回答：<mark>...</mark>`
+     - 状态：`- 状态：<mark>已回答</mark>`
 5. 如果存在未回答的问题，你本次输出只能包含“待确认问题列表 + 回复格式要求”，并等待用户回复；不要开始建模输出。
 
 输入信息包含：
 - 术语表（/specs/background/terms.md）
 - 角色与任务（/specs/background/roles.md）
 - 功能清单（/specs/functions/*）
+- 需求细节（/specs/details/，必须参考其中的 RBAC/数据权限/状态机/校验/通知/MQ/导入导出/定时任务等约束）
 - 场景与细节（/specs/background/scenarios.md、/specs/background/scenario_details/ 或 /specs/background/scenario_details.md（旧版））
 - 外部依赖（/specs/background/dependencies.md）
 
@@ -27,6 +33,9 @@
    - 人员类：`planned_executor_id`、`actual_executor_id`（如存在“指派人/执行人”区分也应拆分）
    - 数量/金额类：`planned_qty`、`actual_qty`；`planned_amount`、`actual_amount`
    - 若存在“计划 vs 实际”的状态、地点、资源等，也采用 `planned_*` / `actual_*` 拆分
+   - 对“成组字段”（同一业务概念拆分为多个字段）必须逐字段建模并体现必填/约束：
+     - 例如优惠：优惠方式、优惠原始金额、优惠额度、有效时间（起止）应作为独立字段，并在字段表中标注为“非空=是”
+     - 约束口径：同组字段必须同时有值；不允许出现只填写一部分字段的记录
 3. 对每个实体给出：
    - 实体定义（1-2 句话）
    - 主键与唯一约束

package/{.trae/skills/starter-skill → skills/visual-spec-skill}/prompts/vspec_verify/prototype.md

@@ -1,24 +1,33 @@
 你是一名资深前端原型工程师。你的任务是：基于功能清单、数据模型、角色列表，生成一套可运行的页面原型，并写入 `/specs/prototypes/`。原型工程必须严格按 `scheme.yaml` 选择技术栈；禁止随意切换 UI 框架/构建工具。
 
+前置条件（必须）：
+1. 在生成任何模型/原型之前，必须检查 `/specs/details/` 是否存在且非空：
+   - 若不存在或为空：立即停止，不生成任何原型文件；仅输出一句“前置条件不满足：请先执行 /vspec:detail 生成 /specs/details/，再执行 /vspec:verify”。
+
 输入信息包含：
 - 角色与任务（/specs/background/roles.md）
 - 功能清单（/specs/functions/*，尤其是 core.md）
 - 数据模型（/specs/models/*.md）
+- 需求细节（/specs/details/，必须以其为准约束页面字段、校验、状态流转、按钮可用性、权限与数据范围）
 - 场景与流程（/specs/background/scenarios.md、/specs/flows/*.puml）
 
 技术栈选择（scheme.yaml，必须）：
 1. 允许用户通过 `scheme.yaml` 指定本次“原型工程”的技术栈类型：
    - 优先读取：`/scheme.yaml`
    - 若不存在，再读取：`/specs/scheme.yaml`
-2. 如果两个路径都不存在：必须先创建默认文件 `/scheme.yaml`（不要覆盖已存在文件），并写入“默认值 + 可选技术栈清单（详细）”，然后继续用默认值生成工程。
+2. 如果两个路径都不存在：必须先创建默认文件 `/scheme.yaml`（不要覆盖已存在文件），并写入“固定标准模板（默认值 + catalog）”，然后继续用默认值生成工程。
 3. 生成工程时必须严格按 `scheme.yaml` 的 `selected.prototype_frontend_stack` 执行；若用户填写了未知/不支持的 id：必须停止并输出错误，要求用户修正 `scheme.yaml` 后重试；禁止私自回退到其他栈。
+4. `selected` 中与前端工程结构相关的字段（如 `prototype_frontend_framework`、`prototype_frontend_ui_library`）用于约束生成目录结构与依赖组合：
+   - 若这些字段存在，则必须与 `selected.prototype_frontend_stack` 在 `catalog.prototype_frontend_stacks` 中的定义一致，否则必须停止并要求用户修正 `scheme.yaml`
 
-默认 `/scheme.yaml` 内容模板（必须按此生成，可直接复制；用户可自行修改 selected 值后重跑 /vspec:verify）：
+默认 `/scheme.yaml` 内容模板（必须按此生成，可直接复制；禁止调整字段顺序/缩进/键名；禁止增删字段；用户可自行修改 selected 值后重跑 /vspec:verify）：
 ```yaml
 schema_version: 1
 
 selected:
   prototype_frontend_stack: vue3_vite_ts_antdv
+  prototype_frontend_framework: vue
+  prototype_frontend_ui_library: ant-design-vue
   prototype_backend_stack: java17_springboot3
   prototype_database: mysql8
   package_manager: npm
@@ -166,14 +175,6 @@ catalog:
       notes: lightweight
 
   prototype_backend_stacks:
-    - id: none
-      name: No backend (frontend mock only)
-      language: none
-      framework: none
-      auth: none
-      orm: none
-      notes: default_for_prototype
-
     - id: node18_nestjs10_ts
       name: Node.js 18 + NestJS 10 + TypeScript
       language: typescript
@@ -290,7 +291,7 @@ catalog:
 5. 若本需求属于“申请资源/预约/排班/派车/占用时间段”类型系统，必须生成“日历视图”页面，用于按时间查看资源占用与申请单分布，并作为关键入口（新建/查看详情/切换资源与时间范围）
 
 身份切换与差异展示（必须）：
-1. 必须在 Header 提供“当前身份/角色切换”（Select），并可在不刷新页面的情况下生效。
+1. 必须在 Header 右侧 Avatar 下拉中提供“切换账号/切换角色”入口，并可在不刷新页面的情况下生效。
 2. 切换身份后必须体现差异（至少 3 类）：
    - 导航差异：左侧菜单按角色隐藏/置灰不适用模块入口（与 roles.md 的任务对齐）
    - 行为差异：页面动作按钮按角色与状态显示/禁用（例如审批人可见通过/驳回；申请人可见提交/撤销）
@@ -299,6 +300,18 @@ catalog:
    - 在申请详情/审批详情/执行详情等关键页面提供“模拟切换角色”快捷入口（例如按钮或下拉），用于快速走通流程演示
 4. 所有因权限不可用的入口/按钮必须给出可解释的提示（Tooltip 或 Disabled reason），而不是直接消失造成困惑。
 
+权限与操作控制（必须）：
+1. 权限来源：
+   - 必须以 `/specs/background/roles.md` 的“角色→任务/能力”作为唯一口径来限制页面入口与操作按钮的可见性
+2. 不可见（无权限）：
+   - 当当前角色不具备某入口/操作的权限时：必须禁止显示（不要渲染该入口/按钮）
+3. 不可操作（有权限但条件不满足）：
+   - 当当前角色具备权限，但因状态/阶段/数据条件不满足导致不能执行该操作时：必须显示该操作控件但置为不可用，并给出明确原因提示
+   - 原因提示要求：至少提供 Tooltip（或同等可见提示）；并在用户尝试触发时给出 message/notification 级别的提示（内容必须为中文）
+4. 约束口径：
+   - 权限控制优先于状态控制：先判定“是否可见”，再判定“是否可操作”
+   - 所有关键动作（提交/撤回/审批通过/驳回/开始/结束/变更/取消/终止/紧急叫停等）必须同时具备“可见性规则 + 可操作规则 + 原因提示”
+
 Session 用户信息复用（必须）：
 1. 原型必须内置一个“当前用户会话（session）”对象（由 mock 提供），至少包含：`user_id`、`user_name`、`role_id/role_name`、`org_id/org_name`、`phone/email`（如需求涉及）、`city`（如需求涉及）。
 2. 凡是能从 session 获得的用户信息，不允许要求用户在表单里再次手动填写：
@@ -307,6 +320,12 @@ Session 用户信息复用（必须）：
    - 自动填充 + 只读展示（Disabled/Input 或 Descriptions），用于“需要用户确认但不应编辑”的信息
    - 自动填充 + 隐藏字段（不在 UI 展示），用于“纯系统字段/审计字段”
 4. 列表默认过滤“与我相关”时，必须基于 session 的 `user_id/role` 做过滤口径，而不是额外的筛选输入。
+5. 字段识别口径（必须）：
+   - 当字段名/说明命中以下语义时，必须视为“当前用户信息”，禁止在 apply/create/变更等抽屉表单中作为可编辑输入出现，必须从 session 自动带入：
+     - 人员：申请人/创建人/提交人/发起人/录入人/填报人/经办人/当前审批人/当前处理人/当前执行人/当前操作人
+     - 组织：所属组织/部门/分公司/项目组（若可由 session.org 推导）
+     - 联系方式：手机号/邮箱（若可由 session 推导）
+   - 写入 mock 的口径：提交/审批/执行等动作落库（mock 写入）时，同步写入对应的 `*_by/*_by_id/*_by_name/*_org_id/*_org_name`（或等价字段），确保详情页能回显且无需二次录入
 
 页面组织规则（必须）：
 1. 必须按功能清单（`/specs/functions/*`）生成“模块 → 页面”的结构，不要把所有内容堆在 `index.html` 或单一页面里
@@ -314,6 +333,11 @@ Session 用户信息复用（必须）：
 3. 将“模块”映射为菜单分组与目录结构：
    - `src/pages/<module_slug>/...`：按模块分目录放置页面
    - `src/router/modules/<module_slug>.ts`：按模块拆分路由配置
+   - 左侧菜单必须按“分类→模块→页面”分组组织，不允许把所有页面平铺成同一级菜单：
+     - 分类用于承载一类模块（例如：主流程类/交易订单类/营销增长类/内容媒体类/报表分析类/系统管理类）
+     - 每个分类下再放对应模块入口（模块入口通常指该模块的列表页/工作台入口路由）
+     - 分类与模块的映射必须可解释：优先根据 `/specs/functions/*` 的“模块”字段语义与关键词聚类（例如申请/审批/执行归入“主流程类”；订单/支付归入“交易订单类”）
+     - 任何 `端=Web` 页面路由必须挂在某个分类与模块之下（除非明确要求不进入左侧菜单，例如 `/tools/*`、`/profile`）
 4. 每个“功能点（功能/子功能）”至少对应 1 个可访问页面或子页面（List/Detail/Form/Drawer 等），并通过路由访问
 5. 首页（`/`）只作为工作台与导航入口（菜单 + router-view），不承载具体业务功能实现
 
@@ -330,8 +354,19 @@ Session 用户信息复用（必须）：
 
 整体布局（必须）：
 1. 原型必须包含“顶部 Header + 左侧 Menu + 主内容区”的三段式布局：
-   - Header：Logo/系统名、角色切换、全局搜索、常用入口（例如新建/待办）、用户菜单（设置/退出占位）
-   - 左侧 Menu：按模块分组的导航菜单，支持折叠（collapsible），适配窄屏
+   - Header（必须按布局落位）：
+     - 左侧：Logo（点击回到 `/`）
+     - 右侧：Avatar（用户头像/姓名缩略）作为唯一的账号/角色切换入口（不得再放一个单独的“角色切换 Select”占位）
+       - 点击 Avatar 打开下拉菜单（Dropdown）：至少包含“切换账号”“切换角色”“个人中心”“退出”（名称可裁剪但必须覆盖账号与角色切换）
+       - “切换账号”：弹出 Modal/Drawer，展示可选账号列表（mock），切换后更新 session 的 `user_id/user_name/role_id/role_name/org_id/org_name`
+       - “切换角色”：弹出 Modal/Drawer 或在 Dropdown 内二级菜单，展示当前账号可切换角色（mock），切换后无需刷新页面立即生效
+       - 切换后必须立即体现差异：左侧菜单分组可见性、页面按钮可见/禁用、列表默认过滤“与我相关”
+     - 可选：全局搜索与常用入口可放在 Header 中部区域，但不得破坏“左 Logo、右 Avatar”的基本结构
+   - 左侧 Menu：必须按“分类分组”组织导航菜单（至少 3 组），并在组内按模块聚合页面入口：
+     - 组内入口规则：优先以“列表页/工作台”作为模块入口，详情/操作页不得作为独立菜单项
+     - 组标题必须使用业务可读的中文分类名（例如“主流程”“交易与订单”“内容与媒体”“报表与分析”“系统管理”）
+     - 若使用 Ant Design Vue：必须使用 SubMenu/ItemGroup（或等价能力）实现可折叠分组；不允许所有 Menu.Item 平铺
+     - `/tools/*`、`/profile` 等工具/个人中心入口不得出现在左侧菜单（仍遵循工具箱与用户菜单入口约束）
    - 主内容区：router-view 渲染页面
 2. 适配手机/窄屏（必须）：
    - 左侧 Menu 在窄屏时默认收起（或变为抽屉式侧边栏），Header 保留
@@ -392,13 +427,56 @@ Session 用户信息复用（必须）：
      - 未审批阶段的按钮文案优先使用“撤回/取消、修改”
      - 已审批阶段的按钮文案优先使用“终止/作废、变更申请”
 
+审批/执行的菜单与操作入口（必须）：
+1. 左侧菜单的审批与执行只允许以“列表页”作为入口：
+   - 审批：`/approve`（审批列表）
+   - 执行：`/execute`（执行列表）
+2. “通过/驳回/开始/结束/紧急叫停”等动作必须出现在列表行 Action 或详情页操作区；禁止作为左侧菜单项入口。
+
+CRUD 页面生成偏好（必须）：
+1. 所有 CRUD（配置/主数据/字典类）功能必须以“列表页”作为唯一入口页面：
+   - 列表页包含查询区（可折叠）+ Table + 工具栏（新建/导出占位/刷新等）
+2. 导出（必须）：
+   - 禁止“无条件直接导出”；导出必须基于当前查询条件（至少包含时间范围/状态/组织等与业务相关的条件）
+   - 必须在导出前明确展示导出条件（可用确认弹窗/抽屉），并把条件写入导出记录（mock）
+   - 若需求/材料提供了导出模板（例如 `/docs/templates/*`、`/docs/current/*` 或需求中声明的模板字段顺序）：导出必须严格按模板导出（必须）：
+     - 必须优先读取模板文件并对齐列：列名、列顺序、字段口径、格式（日期/金额/枚举展示）必须与模板一致
+     - 不允许自定义字段顺序/自造列名/随意增删列；如确需增列，必须通过模板版本升级并在 UI 明确提示版本差异（mock 即可）
+     - 若工程中存在模板文件但未被使用：必须在导出确认抽屉中给出可见错误提示，并阻止导出（避免“看似导出成功但格式不对”）
+2. 新建：
+   - 只能通过列表页工具栏“新建”按钮打开 Drawer 表单完成创建
+   - 禁止单独生成“新建路由/新建页面”
+3. 编辑 / 删除 / 详情：
+   - 一律通过列表 Table 的 Action 列触发
+   - 编辑：打开 Drawer 表单
+   - 删除：Popconfirm 二次确认 + 中文提示 + 写入操作日志（mock）
+   - 详情：允许“详情 Drawer”或“详情页路由”二选一，但入口必须来自列表 Action；禁止把详情做成独立菜单入口
+
 页面与路由建议（可按需求裁剪）：
 - `/landing`：落地页/欢迎页（必须）
 - `/`：首页/工作台（按角色展示待办与入口）
 - `/apply`：申请管理（申请列表 + 新建申请 + 变更/取消入口）
 - `/approve`：审批列表 + 审批详情（通过/驳回）
 - `/execute`：执行列表 + 执行详情（开始/结束/紧急叫停）
+- `/orders`：订单列表（支付/交易类命中时必须；支付动作必须从订单进入）
+- `/orders/:id`：订单详情（含去支付/退款等操作区）
 - `/m/list`：移动端通用列表演示页（必须，提供 list/grid/card 多方案）
+- `/m/feed`：移动端信息流/信息呈现页（内容/商品/通知等演示）
+- `/m/products`：移动端商品列表（商品域命中时必须）
+- `/m/product/:id`：移动端商品详情（与商品列表联动）
+- `/m/cart`：移动端购物车（商品域命中时建议生成）
+- `/m/orders`：移动端订单列表（支付类命中时必须；支付入口必须从订单进入）
+- `/m/orders/:id`：移动端订单详情（含去支付）
+- `/m/payment`：移动端结算/支付页（必须从订单详情进入）
+- `/m/waterfall`：移动端瀑布流（商品/内容域命中时建议生成）
+- `/m/calendar`：移动端日历（资源/排期/预约等场景命中时建议生成）
+- `/m/agreement`：移动端协议阅读/确认页（支付/签署等关键动作前）
+- `/m/qr-code`：移动端二维码展示页（付款码/核销码/签到码等）
+- `/m/signature`：移动端手写签名页（签署/确认等场景命中时建议生成）
+- `/m/articles`：移动端文章列表（内容域命中时建议生成）
+- `/m/article/:id`：移动端文章阅读页（与文章列表联动）
+- `/m/video`：移动端视频展示页（培训/教程/演示等场景命中时建议生成）
+- `/m/music`：移动端音乐播放页（音乐/播客/语音等场景命中时建议生成）
 - `/apply?view=change`：变更记录（可作为申请管理内的视图切换/Tab，不单独做左侧菜单）
 - `/apply?view=cancel`：取消/作废记录（可作为申请管理内的视图切换/Tab，不单独做左侧菜单）
 - `/calendar`：资源日历/排班视图（资源申请类系统必须；否则可不生成）
@@ -429,15 +507,61 @@ Session 用户信息复用（必须）：
 - `/tools/notify-center`：通知中心（企业微信/钉钉等通道配置 + 模板预览 + 发送记录；不要放到左侧菜单）
 
 实现约束：
-- 使用 Vue 3 + Vite + TypeScript（如无法生成 TypeScript，可退回 JavaScript，但需保持一致）
-- UI 组件使用 Ant Design Vue（表格、表单、抽屉、步骤条、标签、按钮）
+- 必须严格按 `scheme.yaml` 的 `selected.prototype_frontend_stack` 与其 `catalog.prototype_frontend_stacks` 定义生成工程；禁止只生成单个 HTML 文件。
+- 生成任何代码前，必须先读取 `scheme.yaml` 并解析 `selected.prototype_frontend_framework`：
+  - 若为 `vue`：必须生成 Vue 工程（工程结构与依赖按 `catalog.prototype_frontend_stacks` 对应条目执行），禁止只生成 `index.html`。
+  - 若为 `react`：必须生成 React 工程（同上）。
+- 若 `selected.prototype_frontend_stack` 为未知/不支持 id：必须停止并输出错误，要求用户修正 `scheme.yaml` 后重跑；禁止静默回退为 html-only。
+- 框架与路由必须随栈切换：
+  - Vue 栈：必须使用 `vue-router@4` 生成路由；路由 path 必须逐条匹配 functions 的 `入口=/...`（Web）与 `/m/...`（Mobile）。
+  - React 栈：必须使用 `react-router@6` 生成路由；路由 path 必须逐条匹配 functions 的 `入口=/...`（Web）与 `/m/...`（Mobile）。
+  - 其他栈同理：router、state、http_client 等依赖与目录结构以 `catalog` 为准。
+- UI 组件库必须随栈切换（例如 Ant Design Vue / Ant Design / NG-ZORRO 等），禁止混用。
 - 数据层使用本地 mock（例如 `src/mock/*.ts`），并根据 `/specs/models/*.md` 的字段生成示例数据
 - 关键页面必须包含：列表（Table）、详情（Descriptions/Drawer）、关键动作按钮（提交/审批/开始/结束/变更/取消）
 
 UI 规范（必须，用于约束原型风格，避免随意发挥）：
 1. 规范优先级：
-   - 若存在 `/docs/current/ui_spec.md` 或 `/docs/current/ui_style.md`：必须优先遵守其中的 UI 风格约束
-   - 否则使用本节默认规范
+   - 必须优先读取并遵守项目根目录 `/prototype_ui_convention.md`（与 `/scheme.yaml` 同级）
+   - 若 `/prototype_ui_convention.md` 不存在：必须先创建该文件（不要覆盖已存在文件）并写入默认模板，然后再继续生成原型
+   - 若存在 `/docs/current/ui_spec.md` 或 `/docs/current/ui_style.md`：必须把其中“更具体/更严格”的约束合并进 `/prototype_ui_convention.md`（作为最终口径），但必须保持文件标准结构不变：只允许写入到文件末尾的“补充约束（项目特定）”小节，不得改动上方模板结构与标题
+2. `/prototype_ui_convention.md` 默认模板（必须生成，允许用户后续手动修改后重跑 /vspec:verify 生效）：
+
+```md
+# 原型 UI 规范
+
+## 目标
+- 统一视觉语言与交互口径，确保 Web 与 Mobile 演示一致、可评审、可复用
+
+## 全局布局
+- Web：左侧导航（可折叠）+ 顶部 Header + 内容区（三段式）
+- Mobile：顶部栏 + 内容区 +（按需）底部吸底操作栏
+
+## 色彩与层级
+- 主色：保持 Ant Design 默认主色系
+- 强调色/危险色：仅用于关键动作与风险提示，避免滥用
+- 状态色（示例口径，可按模块裁剪但必须一致）：待处理=蓝、成功=绿、失败/驳回=红、取消/终止=灰
+
+## 字体与间距
+- 标题/正文/辅助文字使用清晰层级，避免同屏字号过多
+- Web 默认内容 padding 16~24，区块间距 16；Mobile 默认 padding 12~16，区块间距 12
+
+## 组件规范
+- 表单：一律用 Drawer 承载；必填用校验规则，不靠 placeholder
+- 日期：一律用日期控件（DatePicker/RangePicker），禁止文本输入日期
+- 金额：右对齐；千分位；两位小数
+- 敏感信息：默认脱敏，按权限可触发展示全量
+
+## 交互反馈
+- 所有关键动作必须有成功/失败反馈；提交中禁重复提交并显示 loading
+- 无权限：隐藏不可见项；不可操作项置灰并提示原因
+
+## 本地化
+- 日期/时间与状态/枚举显示必须中文化；禁止直接展示英文 code
+
+## 补充约束（项目特定）
+- 仅用于追加来自 `/docs/current/ui_spec.md` 或 `/docs/current/ui_style.md` 的更严格约束；不得改动上述模板结构与标题
+```
 2. 全局布局：
    - 桌面端统一使用：左侧导航（可折叠）+ 顶部 Header + 内容区
    - 内容区统一：白底 Card/区块分组，默认 padding 16~24，区块间距 16
@@ -452,23 +576,80 @@ UI 规范（必须，用于约束原型风格，避免随意发挥）：
 5. 表单规范：
    - 所有表单一律使用 Drawer 承载（已在交互样式统一中约束），Label 统一左对齐，Label 宽度统一（例如 96/120）
    - 必填项使用规则校验 + 明确错误提示；禁止仅靠占位文字表达规则
+   - 对“成组字段”（同一业务概念拆分为多个字段）必须逐字段必填并做联动校验，不允许只填一部分：
+     - 例如优惠：优惠方式、优惠原始金额、优惠额度、有效时间（起止）必须全部填写
+     - 校验口径：任一字段有值则要求同组其他字段非空；同组字段缺失必须给出明确错误提示
    - 复杂表单按“基础信息/明细/补充信息”分段，段落用 Divider 或 Card 分组
 6. 组件与视觉一致性：
-   - 状态统一用 Tag：颜色映射必须在同一模块内一致（例如 pending=blue, approved=green, rejected=red, canceled=default）
+   - 状态统一用 Tag：颜色映射必须在同一模块内一致（例如待审批=blue, 已通过=green, 已驳回=red, 已取消=default）
    - 空状态/加载态/错误态必须可见：Empty + Skeleton/Spin + Alert（至少命中 2 类页面）
    - 图标仅用于增强识别（按钮左侧/统计卡），禁止堆砌装饰性图标
 7. 文案与反馈：
    - 所有关键动作必须有反馈：成功 message，失败 notification/alert（包含可执行兜底：重试/查看原因/去配置页）
    - 表单提交中必须禁用重复提交，并显示 loading
-8. 响应式与移动端：
+8. 本地化与中文展示（必须）：
+   - 日期/时间类展示一律本地化（localized），默认按 `zh-CN` 展示；不得直接输出 ISO 字符串或未格式化时间戳
+   - 原型工程必须设置 UI 组件库与日期库的中文 locale（例如 Ant Design Vue `zh_CN` + dayjs `zh-cn`），并通过统一的格式化方法输出
+   - 列表、详情、日志、时间轴等所有出现日期时间的地方必须使用统一格式（如 `YYYY-MM-DD HH:mm`，仅日期则 `YYYY-MM-DD`）
+   - 状态/类型/枚举字段在 UI 上一律优先显示汉语（Tag/Select/Radio/列表列/详情字段/筛选条件），不得直接展示 `pending/approved/rejected` 等英文 code；允许内部存 code，但必须通过映射转换为中文文案
+9. 敏感信息脱敏展示（必须）：
+   - 凡是涉及手机号/邮箱/身份证号/银行卡号等敏感信息，UI 展示一律优先采用脱敏格式；仅在用户明确触发“查看完整信息”（按钮/开关）且权限允许时才可展示全量
+   - 手机号默认脱敏示例：`138****5678`；邮箱默认脱敏示例：`a***@domain.com`
+   - 列表页默认展示脱敏值；详情页也默认脱敏，并在字段旁给出“已脱敏”提示（Tag/Tooltip 均可）
+   - 脱敏规则必须统一封装为公共方法（例如 `maskPhone`/`maskEmail`），禁止在各页面手写多套规则
+10. 响应式与移动端：
    - 移动端页面遵循各自规则文件（landing/mobile_list 等），但视觉语言（字号/间距/按钮层级）需与桌面端保持一致
 
+优惠/券/促销（必须，命中则生成并覆盖多样性）：
+1. 若需求出现“优惠/促销/优惠券/折扣/满减/免邮/券码/叠加/客群”等：必须按 `prompts/vspec_verify/prototype_promotion.md` 生成对应页面与联动能力。
+2. 金额/优惠口径必须可追溯：购物车/支付必须提供“优惠明细”展开，包含每条优惠的类型、是否可叠加、有效期、客群限制与抵扣金额。
+3. 有效期强制：任何优惠（券/活动）都必须具备有效期字段，并在 UI 中体现“未开始/进行中/已结束”状态与不可用原因。
+4. 叠加规则强制：至少覆盖“可叠加/不可叠加”两类，并在选择时真实限制（不可只写文案）。
+
 Landing（落地页）生成要求（必须）：
 1. Landing 规则必须按 `prompts/vspec_verify/prototype_landing.md` 执行。
 
 移动端通用 List 页面生成要求（必须）：
 1. 移动端列表页规则必须按 `prompts/vspec_verify/prototype_mobile_list.md` 执行。
 
+移动端增强页面生成要求（按需裁剪，命中条件则必须）：
+1. 购物车/支付/协议/商品/瀑布流/信息流/日历等移动端页面：若命中对应域或用户明确需要，必须按以下规则文件生成并确保 Landing 金刚区可进入：
+   - 工作台：`prompts/vspec_verify/prototype_mobile_dashboard.md`（`/m/dashboard`）
+   - 综合查询（酒店/机票/商品等复杂筛选 + 详情联动）：`prompts/vspec_verify/prototype_mobile_comprehensive_search.md`（`/m/search`）
+   - 购物车：`prompts/vspec_verify/prototype_mobile_cart.md`（`/m/cart`）
+   - 订单：`prompts/vspec_verify/prototype_order.md`（`/m/orders`、`/m/orders/:id`）
+   - 结算/支付：`prompts/vspec_verify/prototype_mobile_payment.md`（`/m/payment`）
+   - 协议阅读：`prompts/vspec_verify/prototype_mobile_agreement.md`（`/m/agreement`）
+   - 商品：`prompts/vspec_verify/prototype_mobile_product.md`（`/m/products`、`/m/product/:id`）
+   - 瀑布流：`prompts/vspec_verify/prototype_mobile_waterfall.md`（`/m/waterfall`）
+   - 信息流：`prompts/vspec_verify/prototype_mobile_feed.md`（`/m/feed`）
+   - 视频学课：`prompts/vspec_verify/prototype_mobile_video_course.md`（`/m/courses`、`/m/course/:id`）
+   - 日历：`prompts/vspec_verify/prototype_mobile_calendar.md`（`/m/calendar`）
+2. 二维码展示与手写签名（命中则必须）：
+   - 二维码展示：`prompts/vspec_verify/prototype_mobile_qr.md`（`/m/qr-code`）
+   - 手写签名：`prompts/vspec_verify/prototype_mobile_signature.md`（`/m/signature`）
+3. 文章/评论/媒体类页面（命中则必须）：
+   - 文章阅读（Web + Mobile）：`prompts/vspec_verify/prototype_article.md`
+   - 商品评论（Web + Mobile）：`prompts/vspec_verify/prototype_product_reviews.md`
+   - 视频展示（Web + Mobile）：`prompts/vspec_verify/prototype_video.md`
+   - 音乐播放（Web + Mobile）：`prompts/vspec_verify/prototype_music.md`
+   - 视频学课（Mobile）：`prompts/vspec_verify/prototype_mobile_video_course.md`（`/m/courses`、`/m/course/:id`）
+4. 做题/测评（命中则必须）：
+   - `prompts/vspec_verify/prototype_quiz.md`（Web：`/quiz`、`/quiz/result`；Mobile：`/m/quiz`、`/m/quiz/result`）
+5. 内容发布（命中则必须）：
+   - `prompts/vspec_verify/prototype_richtext_publish.md`（Web：`/content`、`/content/publish`；Mobile 可选）
+6. 超级表单/表单搭建（命中则必须）：
+   - `prompts/vspec_verify/prototype_super_form_builder.md`（Web：`/tools/form-builder`、`/tools/form-preview`；Mobile 可选）
+7. 优惠/券/促销（命中则必须）：
+   - `prompts/vspec_verify/prototype_promotion.md`
+
+订单与支付（必须，命中则生成且以订单列表为入口）：
+1. 若需求出现“订单/支付/退款/交易/结算/收款/付款”等：必须按 `prompts/vspec_verify/prototype_order.md` 生成订单列表与详情（Web + Mobile）。
+2. 支付/退款等动作只能在订单列表 Action 或订单详情操作区出现；禁止把“支付/退款”作为左侧菜单入口或移动端金刚区直达入口。
+
+驾驶舱/大屏生成要求（用户明确需要则必须）：
+1. 必须按 `prompts/vspec_verify/prototype_big_screen.md` 执行，并保证 `/big-screen` 稳定可访问。
+
 Toolbox（工具箱）生成要求（建议；若存在多个工具页则必须）：
 1. Toolbox 规则必须按 `prompts/vspec_verify/prototype_toolbox.md` 执行。
 
@@ -597,7 +778,11 @@ Steps（步骤条）使用要求（必须）：
 1. 不允许把多个语义字段合并为一个“大文本框”偷懒（例如把“起点/终点/途经/备注”合成一个输入框）。
 2. 若字段可拆分，则必须明确拆分并用合适控件表达：
    - 时间段：必须拆成 `start_time` + `end_time`（RangePicker 或 2 个 DatePicker/TimePicker）
+   - 日期/时间输入：凡是日期/时间字段一律使用日期时间类控件（DatePicker/RangePicker/TimePicker），禁止用 Input 文本框手工输入
    - 金额/数量：必须使用数字输入（InputNumber），并区分币种/单位（如存在）
+   - 金额格式化（必须）：
+     - 列表/详情/日志等展示金额：右对齐、两位小数、千位分隔符（例如 `1,234.00`）
+     - 表单输入金额：使用 InputNumber 的 formatter/parser（或等价实现），保持两位小数与千位分隔符一致
    - 枚举/状态：必须使用 Select/Radio/Tag，并与模型/状态机对齐
    - 地点：若包含省市区/详细地址，必须拆分（Cascader + Input）
 3. 对“复合字段”的判定口径：字段名或说明中出现“起止/范围/地址/联系人/额度/资源+数量/城市+地点”等组合语义时，一律拆分。
@@ -606,7 +791,11 @@ Steps（步骤条）使用要求（必须）：
 1. 所有“新建/编辑/变更/补充材料/填写原因”等表单承载方式一律使用抽屉（Drawer），禁止使用弹窗（Modal）承载表单。
 2. Modal 仅允许用于“非表单”的确认与提示（如二次确认删除/取消/紧急叫停、提示失败原因），且内容必须足够短小。
 3. 若已有页面建议写了 Modal 新建：必须改为 Drawer，并确保路由与列表刷新逻辑不变。
-4. 审批相关操作禁止在表格内联编辑任何字段：
+4. 禁止“页内新建/页内编辑”（必须）：
+   - 不论是 CRUD、Steps 向导、流程（flow）链路页面，凡是“创建/新建/新增”一律通过“按钮 → 打开 Drawer → 填写表单 → 提交”完成
+   - 禁止在页面内容区直接嵌入/展开完整表单来承载新建（例如在列表上方直接展开表单、在详情页内直接出现可编辑表单区等）
+   - 禁止“表格内联新建/行内新增”（必须）：不允许通过 Editable Table 在列表中直接新增一行并编辑保存；新建必须始终在 Drawer 表单内完成（Table 行内仅允许用于明细录入，且必须发生在 Drawer 内）
+5. 审批相关操作禁止在表格内联编辑任何字段：
    - 表格行内只能出现“进入详情/打开审批抽屉”的按钮
    - 所有审批字段（意见/结果/资源分配/额度/执行人/生效时间等）必须在抽屉中完整填写
 
@@ -644,6 +833,7 @@ Steps（步骤条）使用要求（必须）：
    - 每行字段必须结构化拆分并使用合适控件（输入框/选择器/日期时间/数字等），禁止用单个大文本框/JSON 粘贴代替
 2. 动态表单必须提供最小可用校验与反馈：
    - 至少校验 1~2 个必填字段
+   - 若出现“成组字段”，必须对同组字段做完整必填校验与联动校验
    - 删除行/清空行需二次确认或给出可撤销提示（按需）
 3. 动态表单的数据必须写入 mock，并能在详情页回显。
 
@@ -706,6 +896,33 @@ Steps（步骤条）使用要求（必须）：
    - 饼图/环形图（占比）
    - 堆叠柱状图或雷达图（结构/能力维度）
 3. 必须提供筛选条件（Form + 查询按钮），至少包含：时间范围、组织/城市、状态（按本需求字段裁剪）
+4. 导出（必须）：
+   - 必须基于筛选条件导出，时间范围为必填查询条件；未选择时间范围时禁止导出并提示原因
+   - 若需求/材料提供了导出模板：导出格式必须严格按模板，不允许自定义
+
+会员余额管理页面生成要求（按需裁剪，命中条件则必须）：
+1. 判定口径（满足任一视为命中）：
+   - 功能清单出现：会员/会员号/余额/充值/消费/调账/交易/账单 等关键词
+   - 数据模型出现：`member_id/member_no/phone/name` 且存在 `balance_*` 或 `balance_account/transaction` 等实体或字段
+2. 必须生成：
+   - `/members/balance` 列表页：
+     - 查询条件（Form，默认折叠）：会员号、手机号、姓名（均使用 Input），状态（如适用，Select）
+     - 列展示：会员号、姓名、手机号、各类余额汇总（至少现金/赠送/冻结/积分等按模型裁剪）、最近交易时间
+     - Action 列：详情
+   - 详情视图（详情页或详情 Drawer）：
+     - 基础信息（Descriptions）：会员号、姓名、手机号、状态、最近更新时间
+     - 余额概览（Card/Descriptions）：按余额类型分组展示当前余额（现金/赠送/冻结/积分等，按模型裁剪）
+     - 交易历史（Table）：
+       - 列：交易时间、交易类型（充值/消费/冻结/解冻/调账 等）、余额类型、变动方向（收入/支出）、变动金额、变动后余额、来源/单号、备注
+       - 筛选：时间范围（RangePicker 必须）、交易类型（Select）、余额类型（Select）、变动方向（Select）
+3. 表单与控件要求：
+   - 所有日期/时间筛选必须使用日期时间控件（DatePicker/RangePicker），并本地化显示（zh-CN）
+   - 状态与枚举值在 UI 上一律显示中文文案（内部可存英文 code，经映射输出中文）
+4. 权限与可见性：
+   - 列表与详情入口按角色权限控制可见性；无权限不渲染，有权限但条件不满足需置灰并给出中文原因提示
+5. 串联与数据来源：
+   - 列表与详情使用同一 mock 数据源；从列表进入详情后应能看到同一会员的数据视图
+   - 交易历史按时间倒序，支持分页；筛选变更后立即刷新结果
 4. 图表数据来源：
    - 由 mock 数据聚合生成，且能随筛选条件变化而变化（不要求复杂，但要可演示）
 
@@ -723,18 +940,23 @@ Steps（步骤条）使用要求（必须）：
 输出与写入要求：
 1. 输出目录：`/specs/prototypes/`
 2. 如果目录不存在，请先创建
-3. 生成一个可启动的工程结构（至少包含）：
-   - `package.json`
-   - `vite.config.*`
-   - `index.html`
-   - `src/main.*`
-   - `src/assets/*`
-   - `src/components/*`
-   - `src/router/*`
-   - `src/pages/*`
-   - `src/mock/*`
-4. 在 `README` 不需要写说明；保持输出以代码为主
-5. 原型不需要覆盖所有功能，优先覆盖主链路与关键分支（变更/取消/驳回/紧急叫停）
+3. 生成一个可启动的工程结构（必须按 `scheme.yaml` 对应栈生成）：
+   - 必须根据 `selected.prototype_frontend_stack` 找到对应 `catalog.prototype_frontend_stacks` 条目，按其 `framework` 与 `build_tool` 生成等价的可启动工程骨架。
+   - 若 `build_tool=vite`（Vue/React 常见）：至少包含：
+     - `package.json`
+     - `vite.config.*`
+     - `index.html`
+     - `src/main.*`
+     - `src/assets/*`
+     - `src/components/*`
+     - `src/router/*`
+     - `src/pages/*`
+     - `src/mock/*`
+4. 严格性（必须）：
+   - 不允许只生成 `index.html` 或少量静态文件冒充“可运行原型工程”
+   - 必须生成可安装依赖并启动的工程（以 `scheme.yaml.selected.package_manager` 的脚本习惯为准）
+5. 在 `README` 不需要写说明；保持输出以代码为主
+6. 原型不需要覆盖所有功能，优先覆盖主链路与关键分支（变更/取消/驳回/紧急叫停）
 
 Mock 数据充足性（必须）：
 1. 每个核心列表页（申请/审批/执行/变更/取消）默认至少生成 20 条数据，覆盖不同状态、不同角色归属、不同时间范围。

package/skills/visual-spec-skill/prompts/vspec_verify/prototype_article.md

@@ -0,0 +1,34 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐文章阅读类页面（Web + Mobile），用于演示内容消费、阅读偏好与收藏分享等交互。
+
+路由（必须）：
+1. Web：
+   - 文章列表：`/articles`
+   - 文章详情：`/articles/:id`（至少保证 `/articles/1` 可访问）
+2. Mobile（前缀必须为 `/m/*`）：
+   - 文章列表：`/m/articles`
+   - 文章详情：`/m/article/:id`（至少保证 `/m/article/1` 可访问）
+
+文章列表（必须）：
+1. 搜索 + 标签筛选（最小可用即可）。
+2. 列表项至少包含：标题、摘要、作者、发布时间（本地化）、标签、阅读量（mock）。
+3. 点击进入文章详情。
+
+文章详情（必须）：
+1. 标题区：标题、作者、发布时间、标签。
+2. 正文区：支持长文滚动阅读（mock 文本即可）。
+3. 阅读辅助（至少 2 项）：
+   - 字号调节（小/中/大）
+   - 夜间模式开关（仅影响页面样式，mock 即可）
+   - 阅读进度提示（顶部进度条或底部百分比）
+4. 动作区（必须）：
+   - 收藏/点赞/分享（可占位，但必须可点击并写回 mock）
+   - “评论”入口：跳转到评论页或在页内抽屉展示（评论输入必须用 Drawer）
+
+数据要求（必须）：
+1. 数据来自 mock（例如 `mock.articles`），字段至少包含：id、title、summary、content、author、time、tags、stats（views/likes/favs）。
+2. Web 与 Mobile 复用同一数据源。
+
+入口要求（必须）：
+1. Web：可从左侧菜单或 Landing 快捷入口进入（按原型整体导航约定选择其一，需稳定可访问）。
+2. Mobile：移动端 Landing 金刚区必须提供“文章”入口，跳转到 `/m/articles`。
+

package/skills/visual-spec-skill/prompts/vspec_verify/prototype_big_screen.md

@@ -0,0 +1,37 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐 Web 端驾驶舱（大屏）原型，用于演示运营/指挥/监控场景下的全屏数据可视化与告警联动。
+
+路由与入口（必须）：
+1. Web 路由为 `/big-screen`（必须稳定可访问）。
+2. 必须提供明确入口进入大屏：
+   - 可从 Dashboard 快捷入口进入，或从 Header 的“更多/工具”进入（二选一即可）
+
+布局与视觉（必须）：
+1. 全屏布局：默认适配 1920x1080，并可在不同分辨率下等比缩放或响应式重排（最小可用即可）。
+2. 视觉基调：深色主题（暗背景 + 高对比文字），避免和普通后台页面一样的白底卡片风格。
+3. 信息密度：大字号、强层级；关键指标必须远距离可读。
+
+页面结构（必须）：
+1. 顶部栏（Header）：
+   - 系统/场景标题（例如“运营驾驶舱”）
+   - 当前时间（实时刷新，秒级或分钟级）
+   - 全局筛选（最小可用即可）：时间范围（快捷：今日/7天/30天）+ 组织/区域（Select，占位）
+2. 核心指标区（必须）：
+   - 6~10 个 KPI 大卡：指标名、当前值、环比/同比箭头（mock）
+3. 可视化区（必须，ECharts）：
+   - 至少 6 个图表组件，且覆盖 4 种图形：折线、柱状、环形/饼、地图/雷达/漏斗/仪表其一
+   - 图表必须支持联动：点击某图表的维度（如区域/状态）会影响至少 1 个其他图表或右侧列表
+4. 告警与事件区（必须）：
+   - 告警列表（Table/列表均可）：级别、标题、发生时间（本地化）、状态（未处理/处理中/已处理）
+   - 行内操作：查看详情（Drawer/Modal）+ 标记已处理（写回 mock）
+5. 轮播/自动刷新（建议，至少其一必须）：
+   - 自动刷新数据（例如每 30s 从 mock 重新聚合一次并动画过渡）
+   - 或区域轮播（例如每 10s 切换一个“区域/组织”视角）
+
+数据与口径（必须）：
+1. 所有指标与图表数据来自 mock 聚合（例如 `mock.analytics.bigScreen`），并能随顶部筛选变化而变化（最小可用即可）。
+2. 指标口径必须可查看：每个 KPI 卡提供 tooltip/弹层说明口径与数据来源占位（中文）。
+
+交互与状态（必须可演示）：
+1. 加载/空/错误状态：Skeleton/Spin、空态引导、错误重试。
+2. 关键动作（告警处理、筛选应用）必须有成功/失败反馈，并防止重复提交（loading）。
+

package/{.trae/skills/starter-skill → skills/visual-spec-skill}/prompts/vspec_verify/prototype_calendar.md

@@ -22,7 +22,7 @@
    - 使用 Ant Design Vue 的 Calendar（或等价组件）渲染事件块（申请单/占用），按状态着色
 3. 交互：
    - 点击事件打开详情抽屉
-   - 在空白日期点击可进入“新建申请”（预填日期/时间段）
+   - 在空白日期点击必须打开“新建申请 Drawer”（预填日期/时间段），禁止在日历页内容区页内直接展开表单
 
 数据与串联（必须）：
 1. 日历事件来自 mock 的申请单数据（与列表页同一数据源），变更状态后日历与列表同步刷新。