visual-spec 0.1.2 → 0.1.3

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

@@ -39,6 +39,9 @@
    - 必须体现角色差异：每个核心角色至少有 1 个“独有图表”或“同图表不同口径/筛选”的差异化呈现
    - 图表必须有筛选条件（Form + 查询按钮或控件联动），至少包含：时间范围（RangePicker 必须）+ 状态/类型（Select）其一
    - 图表数据必须来自 mock 聚合，且随筛选变化而变化（不要求复杂，但要可演示）
+   - 图表选择（必须）：
+     - 必须根据 functions/models/stakeholders 识别并输出“图表清单”，每个图表必须明确：业务含义、指标口径、维度（按日/按状态/按角色/按组织等）、默认筛选、可 drill-down 的跳转路径
+     - 不允许只放通用示例图表；每个图表必须能在业务上解释“为什么需要”
 3. 我的待办（必须）：
    - Table 展示待办任务列表（任务名/单号/发起人/当前节点/到期时间/状态/操作）
    - 行内操作：进入详情、快速通过/驳回（如适用）、开始/结束（如适用）

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

@@ -0,0 +1,31 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”定义统一的页面布局与导航组织规则，确保所有页面风格一致、入口清晰、可评审。
+
+Web 全局布局（必须）：
+1. 所有 Web 业务页面必须使用三段式布局：顶部 Header + 左侧 Menu + 内容区；禁止出现“无 Header 的业务页面”。
+2. Header（必须按布局落位）：
+   - 左侧：Logo（点击回到 `/`）
+   - 右侧：Avatar（用户头像/姓名缩略）作为唯一的账号/角色切换入口
+     - 点击 Avatar 打开下拉菜单（Dropdown）：至少包含“切换账号”“切换角色”“个人中心”“我的工作台”“退出”
+     - “切换账号”：弹出抽屉（Drawer），展示可选账号列表（mock），切换后更新 session 的 `user_id/user_name/role_id/role_name/org_id/org_name`
+     - “切换角色”：弹出抽屉（Drawer）或在 Dropdown 内二级菜单，展示当前账号可切换角色（mock），切换后无需刷新页面立即生效
+   - 可选：全局搜索与常用入口可放在 Header 中部区域，但不得破坏“左 Logo、右 Avatar”的基本结构
+3. 左侧 Menu（必须）：
+   - 必须按“分类→模块→页面”分组（至少 3 组），并在组内按模块聚合页面入口；不允许所有 Menu.Item 平铺、散放
+   - 组内入口规则：优先以“列表页/工作台”作为模块入口；详情/操作页不得作为独立菜单项
+   - 若使用 Ant Design Vue：必须使用 SubMenu/ItemGroup（或等价能力）实现可折叠分组
+   - `/tools/*`、`/profile` 等工具/个人中心入口不得出现在左侧菜单（入口必须来自 Header 下拉或工具箱页面约定）
+4. 主内容区：router-view 渲染页面。
+
+适配手机/窄屏（必须）：
+1. 左侧 Menu 在窄屏时默认收起（或变为抽屉式侧边栏），Header 保留。
+2. 提供“手机模拟器预览”模式：在桌面端以手机框（固定宽度 + 圆角 + 阴影）展示移动端页面内容。
+
+移动端布局（必须）：
+1. 移动端页面必须独立路由前缀：`/m/*`，并使用移动端布局（顶部简化 Header + 内容区 +（按需）底部吸底操作栏/TabBar），不复用后台三段式布局。
+2. Web 端左侧菜单不展示移动端专属页面入口；Web 端对应动作按钮必须置灰并提示“请在手机端操作”，并提供一个“打开手机端页面”的入口（可复制链接或跳转）。
+
+场景验证入口（必须禁止）：
+1. 生成 `scenario.html`（或同等场景验证页）时，不允许在原型中任何位置提供入口：
+   - 不允许出现在左侧 Menu、Header 下拉、工具箱、工作台卡片、落地页入口、任何业务页面的按钮/链接中。
+2. 生成 `entries.html`（全功能入口页）时，同样不允许在原型中任何位置提供入口：
+   - 不允许出现在左侧 Menu、Header 下拉、工具箱、工作台卡片、落地页入口、任何业务页面的按钮/链接中。

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

@@ -8,6 +8,10 @@
 1. Web（运营/配置类）：
    - 优惠券/促销列表：`/promotions`
    - 优惠券/促销详情：`/promotions/:id`（至少保证 `/promotions/1` 可访问）
+2. Mobile（用户端领取/券包，命中“发放/领取/领券/券包/我的优惠券”等则必须）：
+   - 领券中心：`/m/coupons`（展示可领取/可用券；支持按有效期/适用范围筛选）
+   - 我的优惠券：`/m/coupons/wallet`（已领取列表；展示状态：可用/已用/已过期）
+   - 领券/使用闭环：在券卡片上提供“领取/去使用”按钮（mock 生效），并能跳转回购物车/订单等使用场景
 2. 必须与交易链路联动：
    - 购物车与支付页必须提供“选择优惠券/查看优惠明细”入口，并确保选择后金额实时变化（写回 mock）。
 
@@ -48,6 +52,10 @@
 1. mock 数据至少包含：
    - `mock.promotions`：优惠规则列表
    - `mock.couponWallet`：当前用户可领取/已领取/可用券列表（可简化）
+2. 若存在发放/领取场景，必须区分：
+   - 可领取池（例如 `mock.couponPool` 或等价字段）：用于 `/m/coupons` 展示
+   - 我的券包（`mock.couponWallet`）：用于 `/m/coupons/wallet` 展示
+   - 领取动作必须把券从“可领取池”写入“我的券包”，并在购物车/支付选择器中立即可见
 2. 字段至少包含：
    - id、title、type、value、thresholdAmount、stackable、validFrom、validTo、eligibleSegments、status
    - 商品范围：`productScope`（all/category/productIds）+（可选）`productCategories`/`productIds`

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

@@ -14,28 +14,33 @@
    - 多选题（Checkbox）
    - 判断题（是/否）
    - 可选加分项：填空/简答（Textarea，占位即可但必须可输入并保存）
-2. 页面结构（Web）：
-   - 左侧/顶部：题目导航（题号 + 已答/未答状态；支持点击跳转）
+2. 选项呈现（必须）：
+   - 选择题选项必须竖向排列（每个选项独占一行），禁止横向平铺导致阅读困难
+   - 选择题选项必须带字母编号：A/B/C/D…（显示为 `A.` `B.` `C.` `D.`），并与选项文本一起作为可点击区域
+   - Web 与 Mobile 必须一致
+3. 页面结构（Web）：
+   - 顶部信息区（必须）：试卷标题 + 总题目数 + 总分 + 限时/倒计时（mock）+ 当前进度（如 3/20）
+   - 左侧/顶部：题目导航（必须展示全部题目序号列表 + 状态：已答/未答/标记；支持点击跳转）
    - 主体：题干 + 选项/输入区
    - 底部：上一题/下一题、标记（收藏/疑问）按钮、交卷按钮
-3. 页面结构（Mobile）：
+4. 页面结构（Mobile）：
    - 顶部栏：返回 + 标题“测评”
    - 主体：题干 + 选项/输入区
-   - 顶部或底部：题号进度（如“3/20”）+ “题号面板”入口（BottomSheet）
+   - 顶部或底部：题号进度（如“3/20”）+ 总题目数 + 倒计时（mock）+ “题号面板”入口（BottomSheet）
    - 底部吸底操作栏：上一题/下一题 + 交卷（Primary）
-4. 关键交互（必须可演示）：
+5. 关键交互（必须可演示）：
    - 作答后自动保存到 mock（切换题目后答案保留）
    - 支持“标记题目”（用于回看），在题号导航中有明显标识
    - 交卷前弹出确认（Modal/Drawer）
    - 支持“未答题提示”：交卷时若存在未答题，需提示未答数量，并可跳转到第一道未答题
-5. 状态与反馈（必须）：
+6. 状态与反馈（必须）：
    - 加载态（Skeleton/Spin）
    - 交卷提交中 Loading，防重复提交
    - 错误态 + 重试（可与 config 失败注入联动或本页开关）
 
 结果页（必须）：
 1. 总览区：
-   - 得分/正确率/用时（mock）
+   - 得分/正确率/用时/总题目数（mock）
    - 完成状态（如“已完成/未完成”）
 2. 题目复盘：
    - 列表展示每题对错（Tag 颜色统一：对=绿，错=红，未答=灰）
@@ -56,3 +61,17 @@
 入口要求（必须）：
 1. Web：必须能从左侧菜单或 Landing 快捷入口进入（按原型整体导航约定选择其一，需稳定可访问）。
 2. Mobile：移动端 Landing 金刚区必须提供“做题/测评”入口，跳转到 `/m/quiz`。
+
+考试发布与进场（命中则必须）：
+1. 若需求语义包含“考试计划/考试通知/发布/报名/准考证/考试时间范围/考场/进入考场”等：
+   - 必须体现“考试通知 → 进入考场 → 开始考试”的入口链路（可在 `/quiz` 内用步骤态实现，不强制新增路由）
+   - 必须按时间窗口控制“进入考场/开始考试”按钮可用性：未到开始时间置灰并提示；超过结束时间禁止进入并提示
+2. 若存在“发布需审批/计划需审批”语义：必须体现状态流转（草稿→待审批→已发布）与审批入口：
+   - 审批入口必须来自列表 Action 的“审批”按钮，点击后用 Drawer 填写字段提交
+   - 审批字段至少包含：审批结果（通过/驳回）、审批意见（必填）、生效时间范围（开始/结束，若业务适用）
+
+学员端成绩/证书/补考（命中则必须）：
+1. 若需求语义包含“成绩/证书/补考/不及格重考/缴费补考”等：
+   - 必须提供“我的考试/我的成绩”入口（可放在 `/profile` 内的 Tab 或列表），可查看历史成绩与状态（通过/不及格/待补考）
+   - 通过后必须展示证书入口，并在证书详情中提供“证书模板预览”（PDF 或截图图片）；模板文件必须来自输入材料（例如 `/docs/templates/` 或 `/docs/assets/`），禁止纯前端假画模板
+   - 不及格时必须提供“补考/再次参加”入口；若业务要求补考缴费，则补考前必须走订单/支付占位流程

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

@@ -0,0 +1,67 @@
+你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐调查问卷（Survey）相关页面（Web 管理端 + Mobile 填写端），用于演示“配置问卷 → 发布/投放 → 用户填写提交 → 回收与统计”的闭环。
+
+路由（必须稳定可访问）：
+1. Web（管理端）：
+   - 问卷列表：`/surveys`
+   - 问卷详情/编辑：`/surveys/:id`（至少保证 `/surveys/1` 可访问）
+   - 回收数据/答卷列表：`/surveys/:id/responses`（至少保证 `/surveys/1/responses` 可访问）
+2. Mobile（前缀必须为 `/m/*`）：
+   - 问卷列表：`/m/surveys`
+   - 填写问卷：`/m/surveys/:id`（至少保证 `/m/surveys/1` 可访问）
+   - 提交结果/回执：`/m/surveys/:id/result`（至少保证 `/m/surveys/1/result` 可访问）
+
+页面闭环（必须）：
+1. Web 管理端（必须）：
+   - `/surveys`：
+     - 查询条件区（至少 2 个条件：状态/创建人/时间范围其二）
+     - Table 列表（状态 Tag：草稿/待审批/已发布/已下线/已结束；操作：查看/编辑/发布/下线/复制链接/查看回收数据/删除）
+     - 新建：列表工具栏按钮打开 Drawer 完成创建（禁止独立新建路由）
+   - `/surveys/:id`：
+     - 基本信息：标题、说明、开始/结束时间窗口、是否匿名、是否允许重复提交、是否允许保存草稿
+     - 题目配置（必须完备）：
+       - 支持题型至少 6 种：单选/多选/判断/填空/文本长答/评分（1-5 星或 1-10 分）
+       - 可选增强：矩阵题（行列）、上传题（mock 占位即可但必须产生附件记录）
+       - 每题必须支持：是否必填、题目说明（可选）、选项管理（增删改、顺序调整）
+       - 题目顺序必须可拖拽调整（mock 即可但必须有可见交互）
+     - 发布与投放：
+       - 发布前必须进行校验：至少 1 题；必填题合法；时间窗口合法
+       - 发布后必须展示“投放链接/二维码”（二维码可 mock）并提供复制按钮
+   - `/surveys/:id/responses`：
+     - 答卷列表（查询条件区：提交时间范围/是否完成/渠道其二；Table：提交人/提交时间/用时/状态）
+     - 统计概览（至少 3 个图表/统计卡片）：回收量、完成率、题目分布（单选/多选/评分用图表；文本题用关键词/最近回答列表）
+     - 导出（占位即可但必须基于当前查询条件）
+2. Mobile 填写端（必须）：
+   - `/m/surveys`：
+     - 展示“可填写/已提交/已结束”分组或 Tab
+     - 卡片含标题、时间窗口、状态 Tag；点击进入填写
+   - `/m/surveys/:id`：
+     - 顶部必须显示：问卷标题 + 进度（如 3/20）+（可选）倒计时（当存在结束时间窗口时）
+     - 必须提供“题目序号列表与状态”（BottomSheet/Drawer）：已答/未答/标记
+     - 题目渲染必须适配手机：选项竖向排列；选择题选项带 A/B/C/D 编号
+     - 交互：
+       - 答题自动保存草稿（写回 mock）
+       - 提交前必须确认（Drawer/Modal），并提示未答数量；允许跳转到第一道未答题
+   - `/m/surveys/:id/result`：
+     - 提交成功回执（提交时间/用时/提交编号 mock）
+     - 若业务允许查看结果：展示“我的答卷摘要”（评分题汇总、选择题分布占位）；否则仅提示“已提交”
+
+审批与生效（命中则必须）：
+1. 若 functions 或 details 中出现“问卷发布/配置变更需审批后生效/发布”语义：
+   - Web 必须体现状态：草稿 → 待审批 → 已发布
+   - 必须提供审批入口（列表 Action 的“审批”按钮 → Drawer 填字段提交），字段至少包含：
+     - 审批结果（通过/驳回）
+     - 审批意见（必填）
+     - 生效时间范围（开始/结束，若业务适用）
+
+RBAC 与数据权限（必须）：
+1. Web 问卷管理仅对“运营/管理员”角色可见；普通用户角色不可见（或置灰并提示无权限）。
+2. Mobile 问卷填写仅对“填写者/学员/用户”角色可见。
+3. 回收数据页必须按 data_permission 过滤（至少体现：仅可看自己创建的问卷 or 所属组织范围）。
+
+数据要求（必须）：
+1. 数据来自 mock（例如 `mock.surveys`），至少包含：
+   - `surveys`：问卷列表（id、title、status、startAt、endAt、createdBy、createdAt）
+   - `surveyDetail`：问卷详情（questions 数组）
+   - `responses`：答卷列表（id、surveyId、userId、submittedAt、timeUsedSeconds、answers）
+2. Web 与 Mobile 必须复用同一份问卷/答卷数据源（同一 surveyId 联动）。
+3. 文案必须中文化（mock 中文即可）。

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

@@ -60,6 +60,14 @@
    - 当前用户 session 展示（user_id/user_name/role/org 等）
    - 偏好设置占位（语言/主题/通知偏好）
    - “退出/切换身份”入口（不要求真实鉴权，但要影响 session mock）
+2. 若系统涉及“成绩/证书/成就/勋章/排行/学习记录/考试记录”等用户资产：必须在 `/profile` 内提供对应 Tab/列表入口，并具备查询条件区：
+   - 成绩：成绩列表（时间范围/考试类型/状态等至少 2 个条件）→ 成绩详情/复盘入口
+   - 证书：证书列表（时间范围/证书类型/状态等至少 2 个条件）→ 证书详情/下载占位
+   - 成就：成就/徽章列表（类型/时间范围等至少 2 个条件）→ 详情抽屉
+3. 证书/成绩单模板（命中则必须）：
+   - 若出现证书/成绩单相关页面或功能：必须在证书详情或成绩详情中提供“模板预览”（PDF 预览或图片预览）
+   - 模板文件必须来自输入材料（例如 `/docs/templates/` 或 `/docs/assets/`）；禁止用纯前端随便画一张假模板
+   - 若未提供模板文件：必须在页面中给出可见阻断提示（中文完整句子），并明确需要补充的文件类型（PDF/PNG/JPG）与建议存放目录
 
 协议确认（Agreement）生成要求（必须）：
 1. `/agreement/confirm` 页面至少包含：

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

@@ -1,4 +1,4 @@
-你是一名资深前端原型工程师。你的任务是：生成一个“场景确认”用的网页，用于业务方逐条确认场景列表；必须单独生成一个 `scenario.html`，用于访问与串联其他页面。
+你是一名资深前端原型工程师。你的任务是：生成一个“场景确认”用的网页，用于业务方逐条确认场景列表；必须单独生成一个 `scenario.html`，用于访问与串联其他页面（包含移动端页面入口时也应能从此页进入）。
 
 输入信息包含：
 - 场景列表（/specs/background/scenarios.md）
@@ -41,6 +41,8 @@
 3. 缩略图实现方式（必须）：
    - 使用 `Card + 空白占位缩略图`（来自 `src/assets` 的通用占位图），并在卡片标题展示页面名称与路由路径
    - 每张卡片必须提供“打开页面”按钮：点击后跳转到该路由的正常页面（全屏内容，带完整 Header + Menu），禁止跳到嵌入式/iframe 页面
+4. 移动端入口（命中则必须）：
+   - 若存在移动端页面（`/m/*`），必须在场景详情区为相关节点提供“打开移动端页面”入口（跳转到对应 `/m/*` 路由），方便评审直接访问移动端页面。
 
 输出与写入要求：
 1. 将页面代码与工程改动写入到 `/specs/prototypes/` 目录下的原型工程中