visual-spec 0.1.0 → 0.1.2

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

@@ -2,9 +2,19 @@
 
 输入信息包含：
 - 角色与任务（/specs/background/roles.md）
+- 干系人期望（/specs/background/stakeholders.md）
 - 功能清单（/specs/functions/*）
 - 数据模型（/specs/models/*.md）
 
+干系人/角色期望分析（必须）：
+1. 必须先通读 `stakeholders.md` 与 `roles.md`，抽取每类干系人/角色的关注点与成功口径（例如：效率、风险、收入、体验、合规、成本、时效等）。
+2. 必须将“关注点 → 可视化指标/图表/待办”的映射落到一个可读的配置中（mock 即可，例如 `dashboardInsightsByRole`），每个角色至少包含：
+   - 关注点列表（中文）
+   - KPI/统计卡片清单（指标名 + 口径 + 数据来源）
+   - ECharts 图表清单（图表标题 + 图形类型 + 口径 + 交互/筛选）
+   - 待办清单（与我相关口径必须基于 session；每条待办给出进入路径/动作）
+3. Dashboard 渲染必须使用该映射配置驱动，确保“同一位置不同角色看到的内容/图表/待办不同”，而不是仅换文案。
+
 路由与入口（必须）：
 1. Dashboard 路由为 `/`，作为登录后默认首页（无需真实登录）。
 2. Web 端左侧菜单不允许出现“Dashboard”独立一级菜单项；由 Logo/首页入口或默认路由进入即可。
@@ -23,11 +33,18 @@
    - 全局搜索（输入关键字过滤我的单据/任务）
 2. 核心概览：
    - 4~8 个统计卡片（Card + Statistic），例如：我的待办、我发起的、待审批、执行中、今日新增、异常/紧急
+3. 图表分析区（必须，ECharts）：
+   - 必须集成 ECharts，并在 Dashboard 页面可见渲染
+   - 至少提供 4 个图表组件（可以按 Tab/分区展示），且至少覆盖 3 种图形：折线、柱状、饼/环形、堆叠柱/雷达其一
+   - 必须体现角色差异：每个核心角色至少有 1 个“独有图表”或“同图表不同口径/筛选”的差异化呈现
+   - 图表必须有筛选条件（Form + 查询按钮或控件联动），至少包含：时间范围（RangePicker 必须）+ 状态/类型（Select）其一
+   - 图表数据必须来自 mock 聚合，且随筛选变化而变化（不要求复杂，但要可演示）
 3. 我的待办（必须）：
    - Table 展示待办任务列表（任务名/单号/发起人/当前节点/到期时间/状态/操作）
    - 行内操作：进入详情、快速通过/驳回（如适用）、开始/结束（如适用）
 4. 快捷入口：
    - 按模块生成入口按钮（新建申请、进入审批、进入执行、查看报表等），并按当前角色隐藏/置灰不适用入口
+   - “新建申请”必须打开 Drawer 完成创建，禁止跳转到页内表单或独立新建页面承载表单
 5. 最近活动：
    - 时间线（Timeline）展示最近 10 条操作/状态变更（由 mock 的操作日志生成）
 

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

@@ -31,6 +31,6 @@
    - Banner 点击可跳转到对应演示入口（例如：工作台/日历/商品列表等）
 3. 必须提供金刚区：
    - 8~12 个快捷入口，使用宫格布局（4~5 列）
-   - 入口按 functions 与 roles 裁剪：工作台、申请、新建、审批、执行、日历、商品、报表、大屏、工具页、列表演示（/m/list）等
+   - 入口按 functions 与 roles 裁剪：工作台（/m/dashboard）、申请、新建、审批、执行、日历（/m/calendar）、商品（/m/products）、购物车（/m/cart）、订单（/m/orders）、信息流（/m/feed）、瀑布流（/m/waterfall）、文章（/m/articles）、视频（/m/video）、音乐（/m/music）、二维码（/m/qr-code）、签名（/m/signature）、报表、大屏、工具页、列表演示（/m/list）等
    - 不可用入口置灰并提示原因（基于 session/角色）
 4. 同一路由 `/landing` 下做自适应即可，不要求单独的 `/m/landing`。

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

@@ -0,0 +1,30 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端协议阅读页面与确认能力，并确保支付/签名等关键动作能复用该确认结果。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 本页面路由为 `/m/agreement`（必须稳定可访问）。
+
+页面结构（必须）：
+1. 顶部栏：返回 + 标题“协议与授权”。
+2. 协议信息：
+   - 协议名称、版本号、生效日期（日期需本地化）
+   - 关键条款摘要（3~6 条，便于快速理解）
+3. 协议正文：
+   - 必须优先使用业务方提供的协议原文（可脱敏）；若暂未提供，需在页面明显位置提示“缺少协议原文，需补充后替换”
+   - 可滚动阅读的正文区域（允许用 mock 占位，但必须可替换为原文）
+   - 支持“搜索关键字”（最小可用即可）
+4. 阅读与确认（必须）：
+   - “我已阅读并同意”Checkbox
+   - 只有当用户滚动到接近底部后才允许勾选或允许点击确认（两种方式择一，但必须可演示）
+   - “确认”按钮：确认后写入 mock（例如 `mock.userAgreements[agreementId] = { agreedAt, version }`），并反馈提示
+
+交互与状态（必须可演示）：
+1. 未确认时，支付/签名等关键页面必须阻断并引导到本页（至少覆盖 2 个入口：`/m/payment` 与 `/m/signature`）。
+2. 已确认后，再次进入本页展示“已同意”状态与同意时间。
+
+数据要求（必须）：
+1. 协议列表可只做 1 份协议（但结构需支持多份扩展）。
+2. 同意记录必须与当前 session 用户绑定（从 session mock 获取 userId）。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区必须提供“协议”入口，跳转到 `/m/agreement`。

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

@@ -0,0 +1,34 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端日历页面，用于演示“选日期 → 看日程 → 新建/编辑（抽屉）”的交互闭环。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 本页面路由为 `/m/calendar`（必须稳定可访问）。
+
+页面结构（必须）：
+1. 顶部栏：返回 + 标题“日历”。
+2. 日历视图：
+   - 月视图（Month）为主，支持点击日期
+   - 显示当天高亮；有日程的日期展示标记（dot/badge 均可）
+3. 日程列表（Agenda）：
+   - 随选中日期变化，展示该日的日程卡片列表
+   - 卡片至少包含：标题、时间段、状态（中文展示）、备注（可选）
+4. 新建入口（必须）：
+   - “新建日程”按钮（浮动按钮或顶部按钮）
+   - 点击后用 Drawer 打开表单（禁止页内直接编辑）
+
+表单与校验（必须）：
+1. 字段至少包含：标题（必填）、日期（必填，必须用日期控件）、时间段（可选）、类型/状态（可选枚举）、备注（可选）。
+2. 保存后写回 mock 数据，并在日历与列表同步可见。
+
+交互与状态（必须可演示）：
+1. 点击日程卡片进入详情（可用 Drawer/详情路由二选一）。
+2. 支持编辑/删除（编辑必须用 Drawer）。
+3. 加载/空/错误状态：Skeleton、空态引导、错误重试。
+
+数据要求（必须）：
+1. 日程数据来自 mock（例如 `mock.calendar.events`），字段至少包含：id、title、date、startTime、endTime、status、type。
+2. 日期与时间展示必须本地化。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区必须提供“日历”入口，跳转到 `/m/calendar`。
+

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

@@ -0,0 +1,51 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端购物车页面与交互，确保可演示“加购 → 调整 → 结算 → 去支付”的主链路。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 本页面路由为 `/m/cart`（必须稳定可访问）。
+
+页面结构（必须）：
+1. 顶部栏：返回 + 标题“购物车”。
+2. 购物车列表（支持多商家可选做）：
+   - 列表项至少包含：商品图、标题、规格/属性、单价、数量 Stepper、库存/失效提示、勾选框、删除入口
+   - 支持“全选/反选”
+   - 支持“编辑模式”（按钮放在顶部栏右侧）：
+     - 编辑模式下：展示批量删除/移入收藏（mock）等操作；结算栏切换为“删除/移入收藏”操作
+   - 支持“滑动操作”（可选但建议）：左滑出现删除/收藏快捷按钮
+3. 促销与优惠（必须可演示，需覆盖多样性）：
+   - 必须支持优惠券选择（Coupon Picker），并在 mock 中包含至少 4 类优惠：
+     - 满减
+     - 固定比例折扣
+     - 指定商品/服务折扣
+     - 免运费
+   - 每张优惠券必须具备有效期（start/end 或 expiredAt），过期不可用且要提示原因
+   - 低值券：至少 1 张面额较低的券（例如 2~5 元），用于验证最小折扣链路
+   - 叠加规则：至少包含“可叠加/不可叠加”两类券，并在 UI 上明确提示；当用户选择了不可叠加券时，必须阻止再选其他券并给出原因
+   - 客群限制：至少 1 张券要求特定客群可用（例如新用户/会员等级），不满足则置灰并提示
+   - 价格展示必须拆分并可追溯：商品小计、优惠（可展开看到每张券/每类优惠的抵扣）、运费（可为 0 或被免运费券抵扣）、应付合计
+   - 优惠券选择 UI（必须）：
+     - 入口使用“优惠/券”行（List.Item 风格）+ 当前选中摘要（如“已选 1 张券 / 省¥20.00”）
+     - 点击后用 BottomSheet/Drawer 打开优惠券列表：支持筛选“可用/不可用”，不可用券置灰并显示原因（过期/不满足客群/不可叠加等）
+4. 底部吸底结算栏（必须）：
+   - 展示已选商品数量（例如“已选 3 件”）
+   - 合计金额（格式化：千分位 + 两位小数，右对齐）
+   - “去结算”按钮：跳转到 `/m/payment`
+   - 结算按钮禁用规则（必须）：
+     - 未选中任何有效商品时禁用并提示原因
+     - 存在失效/缺货且被选中时必须阻止结算并提示
+
+交互与状态（必须可演示）：
+1. 数量变更：加减/输入数量后，合计实时变化，并写回 mock 数据。
+2. 删除：删除后提示成功；支持撤销（可选）。
+3. 失效/缺货处理：失效项需置灰并提示原因，且不能结算。
+4. 加载/空/错误状态：
+   - 初次加载占位（Skeleton/Loading）
+   - 空态：引导去逛逛（跳转 `/m/products`）
+   - 错误态：提示 + 重试按钮（可与 config 失败注入联动或本页开关）
+
+数据要求（必须）：
+1. 购物车数据来自 mock（例如 `mock.cart.items`），字段至少包含：id、productId、title、spec、price、qty、selected、status（normal/out_of_stock/invalid）、cover。
+2. 与商品页联动：在商品详情页“加入购物车”后，购物车应可见新增项（最小可用联动即可）。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区必须提供“购物车”入口，跳转到 `/m/cart`。

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

@@ -0,0 +1,65 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端“综合查询（复杂筛选 + 结果详情联动）”页面，用于演示类似酒店查询、机票查询、商品查询等“顶部复杂查询，底部详情信息”的典型场景。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 本页面路由为 `/m/search`（必须稳定可访问）。
+
+页面结构（必须）：
+1. 顶部栏：
+   - 返回 + 标题“综合查询”
+   - 右侧放“重置”按钮（仅重置查询条件，不清空最近结果）
+2. 顶部复杂查询区（必须）：
+   - 使用 Card/分组区块呈现，默认展开
+   - 至少包含以下字段（按需裁剪但总数不少于 6 个控件）：
+     - 目的地/关键词（Search/Select，支持输入与历史记录 mock）
+     - 日期范围（必须使用日期控件 RangePicker，禁止文本输入）
+     - 人数/乘客/房间数（Stepper 或 Popover 选择器，mock 即可）
+     - 价格区间（Slider）
+     - 排序（如价格/时间/热度，Segmented/Select）
+     - 筛选标签（如“可取消/含早餐/直飞/高评分/包邮”等，多选 Tag）
+   - “更多筛选”入口：点击后用 Drawer/BottomSheet 打开高级筛选（不得在页面中直接堆满字段）
+   - “立即查询”按钮（Primary）：触发查询并刷新结果（mock）
+3. 结果区（必须）：
+   - 展示结果条数与当前筛选摘要（例如“共 128 条 · 4月10-12 · 2人”）
+   - 结果列表：至少 10 条卡片（可分页/加载更多 mock）
+   - 每条卡片至少包含：封面图、标题、关键信息（如评分/航班时间/规格）、价格、标签（2~4 个）
+   - 点击卡片：选中该条并联动展示“详情区”（见下）
+4. 底部详情区（必须，符合“底部是详细信息”）：
+   - 采用 BottomSheet/吸底面板形式（默认隐藏；选中结果后展开，支持收起）
+   - 详情区至少包含：
+     - 标题 + 关键指标（如评分/销量/准点率等，占位可）
+     - 价格与费用说明（含“明细/税费/服务费”等占位）
+     - 规则/政策（至少 2 条，如“可取消/退改规则/配送说明/入住时间”等）
+     - 用户须知/温馨提示（可折叠 Collapse）
+   - 底部吸底操作栏（在详情区内）：至少 2 个动作（例如“查看详情/立即预订/加入购物车/分享”），动作必须可点击并写回 mock（如收藏/已加入）
+
+交互与状态（必须可演示）：
+1. 查询行为：
+   - 点击“立即查询”显示 Loading（mock 延迟即可），成功后展示结果列表
+   - 支持“重置”与“清空历史记录”（历史记录可在 Drawer 中提供）
+2. 高级筛选：
+   - 高级筛选必须使用 Drawer/BottomSheet
+   - Drawer 内至少包含 4 个控件（如品牌/星级/出发时间段/舱位/配送方式/库存等），并支持“应用/重置”
+3. 结果-详情联动：
+   - 列表选中态明显（边框/背景高亮）
+   - 选中结果后，底部详情区展示对应信息；切换选中项应实时刷新详情
+4. 空/错误状态：
+   - 初次进入：展示空态“请先设置查询条件并查询”
+   - 查询无结果：展示空态 + “调整筛选/重置筛选”按钮
+   - 查询失败：展示错误提示 + 重试按钮
+
+数据要求（必须）：
+1. 数据来自 mock（例如 `mock.search`），至少包含：
+   - `query`：当前查询条件（destination/keyword/dateRange/people/priceRange/sort/tags/advancedFilters）
+   - `history`：最近查询历史（用于顶部关键词/目的地的快速选择）
+   - `results`：查询结果列表（按需用酒店/机票/商品任一类型，但字段必须能覆盖卡片与详情展示）
+   - `selectedId`：当前选中结果 id
+2. 字段建议（可按类型裁剪）：
+   - 通用：id、title、subtitle、cover、price、priceUnit、tags、rating、stockStatus
+   - 酒店：distance、breakfastIncluded、refundable、checkInTime、checkOutTime
+   - 机票：departTime、arriveTime、duration、stops、airline、cabin、refundPolicy
+   - 商品：spec、shippingFee、freeShipping、brand、returnPolicy
+3. 日期/时间/金额展示必须本地化与格式化（千分位 + 两位小数）。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区必须提供“综合查询”入口，跳转到 `/m/search`。

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

@@ -0,0 +1,34 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端工作台（Dashboard）页面，确保与 Web Dashboard 的核心数据一致，并适配移动端信息密度与操作习惯。
+
+路由与入口（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 本页面路由为 `/m/dashboard`（必须稳定可访问）。
+3. 移动端 Landing 的金刚区必须提供“工作台”入口，跳转到 `/m/dashboard`。
+
+页面结构（必须）：
+1. 顶部栏：标题“工作台” + 角色切换（Select/ActionSheet 二选一）。
+2. 概览卡片区：
+   - 4~6 个 KPI 卡片（如：我的待办、待审批、执行中、异常、今日新增）
+   - 点击卡片进入对应列表视图（可跳转到已有页面或本页 Tab）
+3. 图表区（建议，至少 1 个）：
+   - 轻量图表（折线/柱状/环形任一），用于趋势/占比演示
+   - 数据来自 mock 聚合，并随时间筛选变化（最小可用即可）
+4. 待办区（必须）：
+   - 列表展示我的待办（至少 6 条）：标题、单号、状态（中文）、到期时间（本地化）
+   - 行内操作：进入详情；若适用可提供“快速通过/驳回/开始/结束”按钮（可占位但需可点击并写回 mock）
+5. 最近活动（建议）：
+   - 时间线展示最近 8~10 条操作日志（来自统一 mock）
+
+角色差异（必须）：
+1. 移动端 Dashboard 必须按角色渲染差异内容（至少覆盖 2 个核心角色）：
+   - KPI 的名称/口径或可见性不同
+   - 待办默认筛选不同
+2. 必须复用/对齐 Web Dashboard 的角色映射配置（若已存在），避免两套口径不一致。
+
+交互与状态（必须可演示）：
+1. 加载/空/错误状态：Skeleton、空态引导、错误重试。
+2. 关键动作必须有成功/失败反馈，并防止重复提交（loading）。
+
+数据要求（必须）：
+1. 数据来自同一套 mock 数据源（申请/审批/执行/操作日志等），保证在其他页面操作后回到移动端工作台可看到数字与列表变化（刷新或返回可见）。
+

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

@@ -0,0 +1,31 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端信息呈现/信息流页面，覆盖常见内容展示与操作交互（阅读/收藏/分享/评论占位）。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 本页面路由为 `/m/feed`（必须稳定可访问）。
+
+页面结构（必须）：
+1. 顶部栏：
+   - 标题“信息流”
+   - 搜索入口（可跳转 `/m/list` 或在本页过滤，mock 即可）
+2. 内容分区：
+   - 至少 3 个 Tab（示例：推荐/关注/通知）
+3. 信息卡片（至少 2 种样式）：
+   - 图文卡片（封面 + 标题 + 摘要 + 标签 + 时间）
+   - 纯文本/公告卡片（强调信息密度）
+4. 卡片动作区（必须）：
+   - 收藏/点赞/分享（占位即可但必须可点击并写回 mock）
+   - “查看详情”入口：跳转到文章阅读页（建议 `/m/article/1`，若不存在则本命令同时补齐最小文章详情路由）
+
+交互与状态（必须可演示）：
+1. 下拉刷新与加载更多（二选一可，但建议都做）。
+2. 加载/空/错误状态：Skeleton、空态引导、错误重试。
+3. 通知/消息类卡片支持“标为已读”（写回 mock，已读样式变化）。
+
+数据要求（必须）：
+1. 数据来自 mock（例如 `mock.feed.items`），字段至少包含：id、type、title、summary、tags、time、cover、status（read/unread）、actions（liked/favored）。
+2. 切换 Tab 复用同一数据源但支持按 type/status 过滤。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区必须提供“信息流”入口，跳转到 `/m/feed`。
+

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

@@ -0,0 +1,56 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端结算与支付流程页面，确保可演示“确认订单 → 选择支付方式 → 支付结果”的闭环。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 结算/支付页路由为 `/m/payment`（必须稳定可访问）。
+3. 支付页必须以“订单入口”进入：
+   - 必须从 `/m/orders` 或 `/m/orders/:id` 的“去支付”按钮跳转进入（携带 `orderId`）。
+4. 支付结果页（必须）：
+   - 支付结果路由为 `/m/payment/result`（必须稳定可访问），通过 query 参数体现结果状态（例如 `?status=success|fail&orderId=...`）。
+
+页面结构（必须）：
+1. 顶部栏：返回 + 标题“确认支付”。
+2. 订单摘要：
+   - 商品列表（可只展示 1~3 个缩略项）+ 合计件数
+   - 金额明细：商品小计、优惠、运费、应付合计（金额格式化：千分位 + 两位小数，右对齐）
+   - 优惠明细必须可展开查看（至少包含：使用的优惠券/优惠类型、是否可叠加、有效期、抵扣金额）
+3. 配送与联系人（占位即可但要可编辑）：
+   - 收货地址选择（mock 列表 + 选择态）
+   - 联系方式展示需脱敏（例如手机号中间 4 位隐藏）
+4. 支付方式选择（必须）：
+   - 至少 3 种：余额/银行卡/第三方（示例即可）
+   - 选择后写回 mock
+5. 优惠与券（必须可演示，需覆盖多样性）：
+   - 必须提供“选择优惠券/输入优惠码”入口（二选一不可，必须至少支持选择优惠券）
+   - 必须覆盖至少 4 类优惠：满减、固定比例折扣、指定商品/服务折扣、免运费
+   - 每张券必须有有效期（start/end 或 expiredAt），过期不可用并提示
+   - 低值券：至少 1 张面额较低的券用于验证链路
+   - 叠加规则：至少包含“可叠加/不可叠加”两类券，并在 UI 上明确提示与限制
+   - 客群限制：至少 1 张券要求特定客群可用（例如新用户/会员等级），不满足则置灰并提示
+   - 选择优惠后必须实时重算应付金额，并写回 mock（含抵扣明细）
+6. 协议确认（必须）：
+   - 展示“我已阅读并同意相关协议”Checkbox
+   - 点击“查看协议”跳转到 `/m/agreement`
+   - 未勾选时，“立即支付”按钮不可用并提示原因
+7. 底部吸底操作栏（必须）：
+   - “立即支付”按钮：触发支付请求（mock）并进入结果状态
+
+交互与状态（必须可演示）：
+1. 支付结果：
+   - 支付完成后必须跳转到 `/m/payment/result` 展示结果（禁止只在原页面 toast 了事）
+   - 成功态 UI（必须）：
+     - 成功图标/状态标题（如“支付成功”）+ 核心金额（应付合计）
+     - 订单信息摘要（订单号/支付方式/支付时间）
+     - 动作区：至少包含“查看订单详情（/m/orders/:id）”“返回首页（/m）”，可加“再次购买/分享”占位
+   - 失败态 UI（必须）：
+     - 失败图标/状态标题（如“支付失败”）+ 失败原因（mock）
+     - 动作区：至少包含“重试支付（回到 /m/payment）”“查看订单”，可加“联系客服”占位
+2. 加载/错误：提交支付时需显示 Loading；失败需提示并可重试。
+3. 幂等与防抖：重复点击“立即支付”不得重复发起请求。
+
+数据要求（必须）：
+1. 支付页默认从购物车 mock 派生订单（例如 `mock.orderDraft`），至少包含：orderId、items、amount、discount、discountDetails、shipping、payable、address、payMethod、agreed。
+2. 若无购物车数据：提供一键生成示例订单按钮（用于演示）。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区不允许直接提供“支付”入口；支付类必须以“订单列表”作为入口（跳转到 `/m/orders`）。

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

@@ -0,0 +1,38 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端商品列表与商品详情页面，并与购物车/支付/评论区形成可演示串联。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 商品列表路由为 `/m/products`。
+3. 商品详情路由为 `/m/product/:id`（至少保证 `/m/product/1` 可访问）。
+
+商品列表页（必须）：
+1. 顶部栏：标题“商品” + 搜索框（关键字过滤，mock 即可）。
+2. 分类/筛选（最小可用即可）：至少 1 个分类筛选 + 1 个排序（如价格/销量/上新）。
+3. 展示方式：支持 list 与 card 两种（可用 Segmented/Tabs 切换）。
+4. 列表项点击进入详情页。
+
+商品详情页（必须）：
+1. 顶部区域：
+   - 轮播图（mock 图片或渐变块）
+   - 商品标题、价格（格式化：千分位 + 两位小数）、标签（如“新品/热卖”）
+2. 规格/属性选择：
+   - 点击“选择规格”弹出 Drawer/Modal（最小可用即可）
+   - 选择后写回 mock（例如 `selectedSkuId`）
+3. 核心信息区：
+   - 图文详情（折叠/展开可选）
+   - 参数列表（至少 6 行，来自 mock）
+4. 底部吸底操作栏（必须）：
+   - “加入购物车”：写入 `mock.cart.items`
+   - “立即购买”：生成订单草稿并跳转 `/m/payment`
+   - 若不可购买（缺货/下架）：按钮置灰并提示原因
+5. 评论入口（必须）：
+   - 展示评论摘要（数量/好评率占位）
+   - 点击跳转到 `/m/product/:id/reviews`（若评论页不存在则本次补齐最小评论页路由）
+
+数据要求（必须）：
+1. 商品数据来自 mock（例如 `mock.products`），字段至少包含：id、title、price、cover、status（on_sale/off_sale/out_of_stock）、tags、attrs。
+2. 列表与详情必须基于同一份商品数据源。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区必须提供“商品”入口，跳转到 `/m/products`。
+

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

@@ -0,0 +1,33 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端二维码展示页面，用于演示“出示二维码（付款码/核销码/验真码）→ 过期刷新”的交互。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 本页面路由为 `/m/qr-code`（必须稳定可访问）。
+
+页面结构（必须）：
+1. 顶部栏：返回 + 标题“二维码”。
+2. 场景选择（最小可用即可）：
+   - 至少 3 种：付款码/核销码/签到码（示例即可）
+3. 二维码展示（必须可见）：
+   - 大尺寸二维码占位（可用简单渲染或图片占位，但必须清晰可见）
+   - 码值（可复制）
+4. 有效期与刷新（必须）：
+   - 倒计时（例如 60s）
+   - 到期后二维码置灰并提示“已过期”，提供“刷新”按钮重新生成
+5. 辅助信息：
+   - 当前用户与角色（来自 session mock）
+   - 最近 3 次生成记录（mock）
+
+交互与状态（必须可演示）：
+1. 切换场景会生成不同码值并写回 mock。
+2. 刷新会生成新码值并重置倒计时。
+3. 错误态：生成失败时提示并可重试（可与失败注入联动或本页开关）。
+
+数据要求（必须）：
+1. 数据来自 mock（例如 `mock.qr.current`、`mock.qr.history`），字段至少包含：scene、value、expiredAt、createdAt。
+2. 时间展示必须本地化。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区必须提供“二维码”入口，跳转到 `/m/qr-code`。
+2. 支付页应提供“出示付款码”入口跳转到 `/m/qr-code?scene=pay`（若存在支付页）。
+

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

@@ -0,0 +1,31 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端手写签名页面，用于演示“阅读协议 → 手写签名 → 保存签名结果”的交互闭环。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 本页面路由为 `/m/signature`（必须稳定可访问）。
+
+页面结构（必须）：
+1. 顶部栏：返回 + 标题“手写签名”。
+2. 协议提示区（必须）：
+   - 显示当前需要签署的协议名称/版本（mock）
+   - 若用户未在 `/m/agreement` 完成确认：必须阻断签名并引导先去确认协议
+3. 签名画布区（必须）：
+   - 必须提供真实可用的“签名控件”，用于手写绘制（必须基于 canvas；不允许用静态占位图冒充）
+   - 必须支持至少：按下/移动绘制、抬起结束；触摸与鼠标事件都要覆盖（移动端优先）
+   - 必须能导出签名结果为图片数据（例如 `canvas.toDataURL()`），用于保存与预览
+   - 提供操作按钮：清空、撤销（可选）、重做（可选）
+4. 预览与提交区（必须）：
+   - 预览缩略图（保存后展示）
+   - “保存签名”按钮：保存后写入 mock，并提示成功
+
+交互与状态（必须可演示）：
+1. 未签名时点击保存必须提示错误。
+2. 保存后可再次进入页面看到上次签名记录（与当前 session 用户绑定）。
+3. 错误态：保存失败提示并可重试（可与失败注入联动或本页开关）。
+
+数据要求（必须）：
+1. 数据写入 mock（例如 `mock.signatures[userId] = { imageDataUrl, signedAt, agreementVersion }`）。
+2. 时间展示必须本地化。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区必须提供“签名”入口，跳转到 `/m/signature`。

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

@@ -0,0 +1,40 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端“视频学课”页面，用于演示“课程列表 → 进入课程 → 播放视频 → 章节切换 → 学习进度”的闭环。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 课程列表：`/m/courses`（必须稳定可访问）。
+3. 课程学习页：`/m/course/:id`（必须稳定可访问，至少保证 `/m/course/1` 可访问）。
+
+课程列表（必须）：
+1. 顶部栏：返回（如为根页面可隐藏）+ 标题“课程” + 搜索框（可选）。
+2. 列表项（Card/List 任一）至少包含：封面、课程标题、讲师/机构（mock）、总课时、学习进度（如“已学 3/12”）、标签（如“入门/进阶/实战”）。
+3. 点击进入课程学习页 `/m/course/:id`。
+
+课程学习页（必须）：
+1. 顶部栏：返回 + 标题（可用课程名截断）。
+2. 视频播放器区（占位即可但必须可交互）：
+   - 展示封面 + 播放/暂停按钮（mock）
+   - 展示当前章节标题与时长
+3. 课程信息区（至少 2 块，建议 Tabs）：
+   - 课程简介：简介文本、讲师信息、适合人群、学习目标（mock）
+   - 章节列表：按章节分组（Collapse），每个小节展示：标题、时长、是否已学标记
+   - 可选：评论/问答（列表 + 发表评论用 Drawer）
+4. 学习进度与动作（必须）：
+   - 在页内明显位置展示总体进度（Progress）
+   - “标记已学/继续学习”按钮：点击后写回 mock，章节与总体进度同步变化
+   - 切换章节：点击章节列表项，切换当前播放章节（mock）并更新播放器区信息
+5. 状态与反馈（必须可演示）：
+   - 加载态 Skeleton
+   - 空态（如课程无章节）：引导返回课程列表
+   - 错误态：提示 + 重试按钮
+
+数据要求（必须）：
+1. 数据来自 mock（例如 `mock.courses`），至少包含：
+   - `courses`：课程列表（id、title、cover、teacher、totalLessons、learnedLessons、tags）
+   - `courseDetail`：课程详情（id、title、intro、teacher、goals、audience）
+   - `chapters`：章节结构（chapterId、chapterTitle、lessons[]：lessonId、title、duration、learned）
+   - `playerState`：当前播放（courseId、lessonId、playing、currentTime、duration）
+2. 所有时间/时长展示必须本地化（例如 `mm:ss` 或 `HH:mm:ss`）。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区必须提供“课程/学课”入口，跳转到 `/m/courses`。

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

@@ -0,0 +1,30 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端瀑布流（Masonry）展示页面，用于演示图片/商品/内容的高密度信息呈现与滚动加载。
+
+路由（必须）：
+1. 移动端路由前缀必须为 `/m/*`。
+2. 本页面路由为 `/m/waterfall`（必须稳定可访问）。
+
+页面结构（必须）：
+1. 顶部栏：返回 + 标题“瀑布流”。
+2. 顶部筛选条（最小可用即可）：
+   - 至少 1 个分类筛选（如“推荐/商品/文章”）
+   - 至少 1 个排序（如“最新/最热”）
+3. 瀑布流主体：
+   - 2 列或 3 列自适应布局（必须是瀑布流效果，不是等高 Grid）
+   - 卡片至少包含：封面（不同高度）、标题、标签、时间/价格（二选一）
+4. 卡片点击：
+   - 若是商品卡：跳转 `/m/product/:id`
+   - 若是内容卡：跳转 `/m/article/:id`（不存在则补齐最小文章详情路由）
+
+交互与状态（必须可演示）：
+1. 滚动加载更多（必须）：触底加载下一页（mock 分页）。
+2. 下拉刷新（可选但建议）：刷新后更新时间提示。
+3. 加载/空/错误状态：Skeleton、空态引导、错误重试。
+
+数据要求（必须）：
+1. 数据来自 mock（例如 `mock.waterfall.items`），字段至少包含：id、type（product/article/image）、title、cover、height、time/price。
+2. 需要提供不同高度的 cover（通过 mock height 或不同纵横比实现）。
+
+与 Landing 串联（必须）：
+1. 移动端 Landing 的金刚区必须提供“瀑布流”入口，跳转到 `/m/waterfall`。
+

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

@@ -0,0 +1,30 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐音乐播放类页面（Web + Mobile），用于演示播放列表、播放器、进度控制与最近播放等交互。
+
+路由（必须）：
+1. Web：`/music`（必须稳定可访问）。
+2. Mobile（前缀必须为 `/m/*`）：`/m/music`（必须稳定可访问）。
+
+页面结构（必须）：
+1. 曲目列表：
+   - 至少 10 首：标题、歌手、时长、封面（可选）、标签（可选）
+   - 支持搜索/筛选（最小可用即可）
+2. 播放器（必须）：
+   - 播放/暂停、上一首/下一首
+   - 进度条（可拖动，mock 即可）
+   - 音量/静音（Web 可选，Mobile 可简化）
+3. 播放队列与最近播放（至少其一必须）：
+   - 当前队列展示
+   - 最近播放列表（写回 mock）
+
+交互与状态（必须可演示）：
+1. 点击曲目开始播放并写回当前播放状态（例如 `mock.music.playerState`）。
+2. 切换路由后返回，播放状态仍可恢复（最小可用即可）。
+3. 加载/空/错误状态：Skeleton、空态引导、错误重试。
+
+数据要求（必须）：
+1. 数据来自 mock（例如 `mock.tracks`），字段至少包含：id、title、artist、duration、url（可占位）、cover。
+2. Web 与 Mobile 复用同一数据源与播放状态。
+
+入口要求（必须）：
+1. Mobile：移动端 Landing 金刚区必须提供“音乐”入口，跳转到 `/m/music`。
+

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

@@ -0,0 +1,45 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐订单列表/订单详情（Web + Mobile），并确保支付类操作以“订单列表 → 订单详情/操作”为入口，而不是把“支付/退款”等动作做成菜单入口。
+
+触发条件（满足任一则必须生成）：
+1. 功能清单出现：订单/支付/结算/退款/交易/收款/付款/对账。
+2. 数据模型出现：order_id/payment_id/transaction_id/amount/pay_status 等同义字段。
+
+路由与入口（必须）：
+1. Web：
+   - 订单列表：`/orders`
+   - 订单详情：`/orders/:id`（至少保证 `/orders/1` 可访问）
+2. Mobile（前缀必须为 `/m/*`）：
+   - 订单列表：`/m/orders`
+   - 订单详情：`/m/orders/:id`（至少保证 `/m/orders/1` 可访问）
+3. 支付入口规则（必须）：
+   - 任何“支付/重新支付/取消订单/退款申请”等动作必须出现在订单列表的 Action 或订单详情页的操作区
+   - 不允许把“支付/退款”作为左侧菜单项或移动端金刚区的直接入口
+   - 若需要演示支付页：只能从订单详情的“去支付”按钮进入（Mobile 跳转 `/m/payment?orderId=...`）
+
+订单列表页（必须）：
+1. 查询条件（必须至少包含其二）：
+   - 时间范围（RangePicker）
+   - 订单状态（待支付/已支付/已取消/已退款等，中文展示）
+   - 订单号/用户（Input）
+2. 列表字段至少包含：订单号、创建时间（本地化）、用户（脱敏）、金额、优惠、应付、支付状态（Tag）、订单状态（Tag）。
+3. Action：
+   - 查看详情（必选）
+   - 去支付（仅待支付可用）
+   - 取消订单（待支付可用，Popconfirm）
+   - 退款（仅已支付可用，Drawer 表单占位）
+
+订单详情页（必须）：
+1. 基础信息（Descriptions）：订单号、用户、状态、创建时间、支付时间（如有）、支付方式（如有）。
+2. 商品明细（Table/列表）：商品、单价、数量、小计。
+3. 金额区（必须可追溯）：
+   - 商品小计、优惠明细（可展开）、运费、应付合计
+4. 操作区（按状态控制）：
+   - 去支付（待支付）
+   - 申请退款（已支付）
+   - 查看支付记录（mock）
+
+数据要求（必须）：
+1. 数据来自 mock（例如 `mock.orders`、`mock.payments`），字段至少包含：
+   - orderId、items、amount、discount、discountDetails、shipping、payable、status、payStatus、createdAt、paidAt、user
+2. 与支付页联动：从订单详情进入 `/m/payment?orderId=...` 后，支付成功需回写订单 payStatus/paidAt，并在返回订单详情与列表时可见变化。
+