@deppon/deppon-skills 2.4.21 → 2.4.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/deppon-prd-generator/SKILL.md +239 -66
- package/dist/deppon-prd-generator/examples/backend-list/prd.md +11 -5
- package/dist/deppon-prd-generator/examples/backend-list/prototype.html +16 -7
- package/dist/deppon-prd-generator/examples/list-crud/prd.md +59 -59
- package/dist/deppon-prd-generator/examples/list-crud/prototype.html +15 -6
- package/dist/deppon-prd-generator/quick-reference.md +13 -13
- package/dist/deppon-prd-generator/template/app-shell-navigation-prd-template.md +2 -2
- package/dist/deppon-prd-generator/template/backend-list-prd-template.md +12 -2
- package/dist/deppon-prd-generator/workflow.md +50 -52
- package/dist/deppon-pro-dialog/SKILL.md +1 -0
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: deppon-prd-generator
|
|
3
3
|
description: >-
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
基于用户功能范围与（可选）页面实现、对话说明等材料，匹配指定模板类型生成面向研发测试的结构化 PRD（`prd.md`）；并可选用 HTML + Tailwind CSS
|
|
5
|
+
产出高保真、可点击交互的静态原型（`prototype.html`，单页优先）。**后台业务页**默认可无壳层单文件；用户要求**工作台壳层 / 侧栏顶栏 / iframe 多页**时，须按 `app-shell-navigation-prd-template.md` 与 `examples/app-shell-navigation/` 建**壳层根目录**（**`src/prototypes/<项目 slug>/`**，须为**项目/产品**英文名 short slug，**禁止**用单一菜单页名作项目根以免与 `pages/<同名>/` 叠套；根级 `prd.md` + `prototype.html`），并在 **`pages/<子页目录>/`** 内为**每个 iframe 子页**各建 **`prd.md` + 入口 HTML**（见「壳层与子页目录约定」）；**用户在对话中 `@` 或点名既有项目的 `pages/` 时**，新子页须**归入该 `<项目 slug>`**，不得另起并排项目根（见「归入既有 pages 项目」）。**样式须严格对齐该示例的 Tailwind 类与层级，不得自创另一套视觉方言**。**不假设**仓库存在固定命名的 `spec.md`。原型须含 PRD 标注弹框；`prd.md` 互链见「PRD 与原型互链」及壳层子页扩展条。**业务子页**与**无壳层单页** `prd.md` 文首 **H1** 默认**必须**按「**DP-IT 对外交付命名**」；**壳层根** `prd.md` 除外（除非用户要求根也用 DP-IT）。用户另提 JoySpace / 对外附件时须核对批次日与导出文件名。生成前对照 `examples/<类型>/`。
|
|
6
6
|
在用户 @deppon-prd-generator、@prd、生成 PRD、HTML 原型、Tailwind 原型 时应用。
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -10,31 +10,106 @@ description: >-
|
|
|
10
10
|
|
|
11
11
|
## Overview
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
基于用户在对话中给出的功能范围，以及（若有）页面实现代码、截图、零散说明文档等**可选**材料，智能识别页面类型并匹配对应模板，生成面向研发和测试人员的结构化产品需求文档（**`prd.md`**）。在用户需要「可演示、可点」的需求载体时，**同目录**补充 **HTML + Tailwind CSS** 的高保真交互原型（**`prototype.html`**，免构建优先），便于评审与对标实现。**后台单页**原型默认不含侧栏顶栏；需整站管理台导航时见下文「单页原型与壳层主页导航」与「壳层与子页目录约定」（**壳层根 + `pages/<子>/` 各含 `prd.md` + `index.html`**）；其中**壳层仓库根目录**须命名为 **`src/prototypes/<项目 slug>/`**（**项目/产品**英文名，与子页 `pages/<功能名>/` 区分，详见「项目目录命名」）。**业务子页**与**无壳层单页** `prd.md` 文首 **H1** 默认**必须**遵守「**DP-IT 对外交付命名**」（壳层根 `prd.md` 的标题策略见该节例外）。**不要求**仓库内存在 `spec.md` 或固定命名的实现文件；若同目录已有 `prd.md` / `prototype.html`，优先阅读后再做增补或改版。
|
|
14
14
|
|
|
15
15
|
## 语言与文案（默认）
|
|
16
16
|
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
17
|
+
- **PRD（`prd.md`）**：章节标题、正文、表格内业务说明等默认使用**简体中文**；代码路径、类名、接口字段、包名、枚举值等可与实现对齐保留英文。
|
|
18
|
+
- **高保真原型（`prototype.html` 及同目录子页）**：`<title>`、侧栏/顶栏/按钮/菜单/表头/空态/Toast/mock 等**用户可见文案**默认使用**简体中文**；`aria-label` 等无障碍属性可中英混排，以可读为准。
|
|
19
|
+
- **例外**：用户明确要求英文/双语、或对标海外版/英文站时，从其约定。
|
|
20
20
|
|
|
21
21
|
## 本技能对执行者的硬性要求（语言）
|
|
22
22
|
|
|
23
|
-
-
|
|
24
|
-
-
|
|
23
|
+
- 按本技能产出或改写 **`prd.md`、`prototype.html`**（及壳层 `pages/*.html` 等）时，**必须**遵守上文「语言与文案」：业务侧可见表述用**简体中文**；不得在无用户要求时用英文写菜单、按钮、表头、空态、Toast 等（接口名、枚举、包名、代码路径可保留英文）。
|
|
24
|
+
- 用户明确要求外文/双语时，从其约定。
|
|
25
|
+
|
|
26
|
+
## 本技能对执行者的硬性要求（文首 H1 / DP-IT）
|
|
27
|
+
|
|
28
|
+
- 凡由本技能**新生成或全文改写**的 **`prd.md`**，若该文档主体为**单个子页 / 单一业务模块**需求（路径含 **`pages/<子页目录>/prd.md`** 或**无壳层** **`src/prototypes/<page-name>/prd.md`**），文首**第一个 `#`** **必须**为「**DP-IT 对外交付命名**」规定的完整一行：
|
|
29
|
+
`DP-IT-YYYYMMDD-<主题简名>-用户需求说明书(PRD)`
|
|
30
|
+
**禁止**使用「… PRD（产品需求文档）」「XX 需求文档」等泛化标题作为首个 `#`。
|
|
31
|
+
- **`YYYYMMDD`**：用户未提供时，**最小必要**询问本批次定点日；若同项目同批次已有子页 PRD，**与之共用同一** **`YYYYMMDD`**（仅 `<主题简名>` 随子页变）。
|
|
32
|
+
- **壳层根** **`src/prototypes/<项目 slug>/prd.md`**：**不强制** DP-IT H1，可保持产品/项目级中文标题（见「DP-IT 对外交付命名 · 壳层根 `prd.md`」）；除非用户**明确要求**根文档也按 DP-IT。
|
|
33
|
+
- **唯一豁免**：用户在对话中**明确书面声明**该份 `prd.md` **豁免 DP-IT**（如纯内部草稿、不外发）；须在文首引用块或「文档说明」中交代豁免原因。
|
|
25
34
|
|
|
26
35
|
## PRD 与原型互链
|
|
27
36
|
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
37
|
+
- 当同目录**已存在**或本次**一并交付**可交互原型入口文件（默认可为 **`prototype.html`**；子页推荐 **`index.html`** 与壳层 `prototype.html` 区分）时，`prd.md` **文首须在标题后第一段或「文档说明」引用块内**，加入 **Markdown 相对链接**指向该入口文件，例如：`- **交互原型**：[打开 prototype.html](./prototype.html)` 或子页 `- **交互原型**：[打开 index.html](./index.html)`。
|
|
38
|
+
- **壳层 + 多子页**：根 `prd.md` 除上述链接外，须列出各子目录 **PRD** 与 **原型** 的相对链接（见「壳层与子页目录约定」）。
|
|
39
|
+
- **仅交付 PRD、不产出也不保留原型**时：不写指向不存在文件的链接；可写一句「本期无高保真原型」。
|
|
40
|
+
- 执行 **Step 4b** 新增或重命名原型文件后，须**回写**对应层级 `prd.md` 使链接与文件名一致。
|
|
41
|
+
|
|
42
|
+
## DP-IT 对外交付命名（JoySpace / 附件 / 文首 H1）
|
|
43
|
+
|
|
44
|
+
### 默认强制范围（与本技能产出的关系）
|
|
45
|
+
|
|
46
|
+
- **业务子页** `pages/<子页>/prd.md` 与**无壳层单页** `src/prototypes/<page-name>/prd.md`：凡由本技能产出或全文改写，文首 H1 **一律**按本节格式落实，与用户在对话中是否口头提到「DP-IT」「JoySpace」**无关**（除非适用「**本技能对执行者的硬性要求（文首 H1 / DP-IT）**」中的**豁免**条款）。
|
|
47
|
+
- **壳层根** `prd.md`：标题策略见下段「壳层根 `prd.md`」，**不**因本默认而自动改为 DP-IT。
|
|
48
|
+
- 用户提到 **JoySpace / 对外附件 / 待排期目录** 等时，除 H1 外还须按本节核对**对外导出文件名**、修订记录中的归档路径说明。
|
|
49
|
+
|
|
50
|
+
### 补充触发（须逐字对齐样例或知识库用语）
|
|
51
|
+
|
|
52
|
+
满足**任一**时，除落实 H1 外，须在对话或「修订记录」中写清批次与归档口径；用户给出**固定 H1 样例**（如 `DP-IT-20260520-产品折扣列表-用户需求说明书(PRD)`）时，**分段规则从其逐字**，不得擅自改成「新增事后折…」等**旧式混写**前缀（除非用户声明兼容历史命名）：
|
|
53
|
+
|
|
54
|
+
- 用户显式提到：**DP-IT**、**JoySpace**、**对外附件名**、**用户需求说明书(PRD)**、**待排期 / 已梳理待排期**、与知识库**批次文件夹**对齐等。
|
|
55
|
+
|
|
56
|
+
**壳层根 `prd.md`**：若用户**未**要求根文档也用 DP-IT，可继续使用**产品/项目级**中文标题（如「产品定价中心 · 管理台壳层 PRD」）；须在子页索引中能通过**链接文字或括号内全名**区分各子页对外标题。**无壳层单页**文首 H1 为完整 DP-IT 串，仓库路径仍可为 `src/prototypes/<page-name>/prd.md`（见「输出路径」）。
|
|
57
|
+
|
|
58
|
+
### 格式（须逐字一致的结构）
|
|
59
|
+
|
|
60
|
+
`DP-IT-YYYYMMDD-<主题简名>-用户需求说明书(PRD)`
|
|
61
|
+
|
|
62
|
+
- **`DP-IT`**：固定前缀（德邦 IT 需求类标识），**全大写**，后接英文连字符 **`-`**（**半角**）。
|
|
63
|
+
- **`YYYYMMDD`**：需求**批次 / 定点日期**（8 位数字，**公历**）；与知识库目录「**`N月D号` 小需求**」对齐时，取该日的 `YYYYMMDD`（例：2026 年 5 月 20 日定点 → **`20260520`**）。**禁止**用 `2026-05-20`、`2026052` 等变体替代本段。
|
|
64
|
+
- **`<主题简名>`**：**简体中文**，2 ～ 20 字为宜，与菜单/模块名一致、**可独立区分需求**；**推荐**与 `pages/<子页目录>/` **语义对齐**（例：`product-discount-list` → **`产品折扣列表`**，`workbench-home` → **`工作台首页`**）。**禁止**用 **`prd`**、**「列表」单字**、与批次内另一子页无法区分的泛称作为主题。
|
|
65
|
+
- **`-用户需求说明书(PRD)`**：固定后缀；**整段字面**须一致，其中 **`(PRD)`** 为大写英文括号。
|
|
66
|
+
|
|
67
|
+
**字符与分隔符（自检）**：全名中业务可中文，但 **段与段之间只用 `-` 连接**；**禁止**在 `DP-IT` 与日期之间、日期与主题之间插入空格或下划线；**禁止**省略 `-用户需求说明书(PRD)` 任一段。
|
|
68
|
+
|
|
69
|
+
### 仓库内 `prd.md` 与对外文件名
|
|
70
|
+
|
|
71
|
+
- **文首一级标题（`#`）**：须为上述**完整一行字符串**（与对外/知识库展示标题一致），且为文档**第一个** `#` 标题，例如：
|
|
72
|
+
`# DP-IT-20260520-产品折扣列表-用户需求说明书(PRD)`
|
|
73
|
+
- **仓库相对路径**：**不改变**既有约定——子页仍为 **`pages/<子页>/prd.md`**，壳层根仍为 **`src/prototypes/<项目 slug>/prd.md`**；互链、`fetch('./prd.md')`、侧栏索引路径**不变**。
|
|
74
|
+
- **第二行起**：紧接「交互原型」「父级壳层」等引用块或说明，**不必**把 DP-IT 全名重复进 `>` 块首行（除非用户要求文首双标题）。
|
|
75
|
+
- **上传 JoySpace / 邮件附件 / 归档导出**：对外文件名建议与 H1 **完全一致**并加扩展名 **`.md`**，例如：
|
|
76
|
+
`DP-IT-20260520-产品折扣列表-用户需求说明书(PRD).md`
|
|
77
|
+
**禁止**对外展示名仅为 `prd.md` 或仅含主题无 `DP-IT` 段（除非用户书面声明例外）。
|
|
78
|
+
|
|
79
|
+
### 与知识库目录的对应（说明性，非仓库路径）
|
|
80
|
+
|
|
81
|
+
团队若在 JoySpace / CMC 等使用**层级文件夹**（与业务约定对齐即可），常见形态为：
|
|
82
|
+
|
|
83
|
+
`… / 已梳理待排期需求 / {YYYY}年 / {M}月 / {M}月{D}号小需求 / （本批次附件）`
|
|
84
|
+
|
|
85
|
+
技能**不在用户仓库内**创建上述云端目录；但若用户同时要求「对齐待排期目录」，须在对话或 PRD **修订记录**中写清建议归档路径与 **H1 中 `YYYYMMDD` 与该「号」一致**。仓库内**不**为对齐 JoySpace 而新建与 `src/prototypes/` 平行的 `{YYYY}年` 文件夹。
|
|
86
|
+
|
|
87
|
+
### 壳层 `prd.md` 子页索引写法（推荐）
|
|
88
|
+
|
|
89
|
+
- **链接目标**：仍指向 **`./pages/<子页>/prd.md`**。
|
|
90
|
+
- **链接文字**：可保持简短（如「产品折扣列表 · PRD」），**推荐**在首次列出时于句末或表格中加注 **「对外标题：`DP-IT-…`」**，便于评审与上传同学复制。
|
|
91
|
+
|
|
92
|
+
### 多子页、多批次与改版
|
|
93
|
+
|
|
94
|
+
- **同一批次、多子页**：**`YYYYMMDD` 相同**，仅 **`<主题简名>`** 随子页变（同一小需求包内多份说明书）。
|
|
95
|
+
- **同一子页、新批次**：仅更新 **`YYYYMMDD`**（及文档内「修订记录」说明批次）；主题简名不变。
|
|
96
|
+
- **同批次内修订**（错别字、表格、验收说明）：**不改** `YYYYMMDD`，除非用户明确「改挂到新批次日」。
|
|
97
|
+
|
|
98
|
+
### 执行清单（Step 4 / Step 5 勾选）
|
|
99
|
+
|
|
100
|
+
- [ ] 每个**业务子页 / 无壳层单页**（及未声明豁免的同类 `prd.md`）**第一个 `#`** 已为完整 `DP-IT-…-(PRD)` 串；
|
|
101
|
+
- [ ] 日期 8 位、主题中文可区分、分隔符全为 `-`、无多余空格；
|
|
102
|
+
- [ ] 壳层根标题策略与用户要求一致（根 DP-IT 或产品级二选一且已写清）；
|
|
103
|
+
- [ ] 用户声明豁免 DP-IT 的文档，文首已注明原因；
|
|
104
|
+
- [ ] 对外导出若需上传，文件名与 H1 一致（`.md`）。
|
|
31
105
|
|
|
32
106
|
## When to Use
|
|
33
107
|
|
|
34
108
|
- 用户明确要求生成 PRD 文档时
|
|
35
109
|
- 用户需要将已实现的页面转化为 PRD 文档时
|
|
36
|
-
-
|
|
110
|
+
- 用户需要基于已有 **`prd.md`** 改版、增补章节或与 **`prototype.html`** 对齐时
|
|
37
111
|
- 用户要求 **HTML / Tailwind CSS / 高保真原型 / 可交互原型 / 静态 demo** 与 PRD 一并或单独交付时
|
|
112
|
+
- 用户要求 **JoySpace / 对外附件名 / DP-IT / 用户需求说明书(PRD)** 等与文首或归档命名强相关表述时（须在「**DP-IT 对外交付命名**」基础上核对导出文件名与修订记录）
|
|
38
113
|
|
|
39
114
|
## Template Types
|
|
40
115
|
|
|
@@ -129,74 +204,150 @@ description: >-
|
|
|
129
204
|
- 全局尺寸与间距、主区栅格比例
|
|
130
205
|
- 侧栏展开/收起与多级菜单交互
|
|
131
206
|
- 顶栏与页签（若有）与子页同步规则
|
|
132
|
-
- `prototype.html` + `pages
|
|
207
|
+
- `prototype.html` + `pages/<子页目录>/` 目录约定与打开方式（HTTP）；**子页独立 `prd.md`**（见「壳层与子页目录约定」）
|
|
133
208
|
|
|
134
209
|
## 内置参考示例（`examples/`）
|
|
135
210
|
|
|
136
211
|
技能目录内维护**已完成的对照示例**（非用户仓库交付物），索引见 `examples/README.md`。生成 PRD 时除套用 `template/*.md` 外，**按类型先读示例再落笔**，对齐章节结构、表格粒度与（若有）原型标注习惯。
|
|
137
212
|
|
|
138
|
-
| 模板 / 类型
|
|
139
|
-
|
|
|
140
|
-
| `data-prd-template.md`（数据看板：筛选 + 指标卡 + 图表 + 列表 + 指标总览）
|
|
141
|
-
| `backend-list-prd-template.md` 且为 **纯列表**（筛选 + 分页表，无典型弹层 CRUD）
|
|
142
|
-
| `backend-list-prd-template.md` 且含 **列表 + 筛选 + 分页 + 详情 + 新增/编辑 + 删除** 等完整 CRUD | `examples/list-crud/`
|
|
143
|
-
| `backend-form-edit-prd-template.md`（整页表单编辑）
|
|
144
|
-
| `backend-form-preview-prd-template.md`（只读详情/预览）
|
|
145
|
-
| `user-frontend-prd-template.md`（C 端 / 活动页）
|
|
146
|
-
| `app-shell-navigation-prd-template.md`（壳层 + 多页 hub）
|
|
213
|
+
| 模板 / 类型 | 参考示例目录 |
|
|
214
|
+
| ------------------------------------------------------------------------------------------------ | -------------------------------- |
|
|
215
|
+
| `data-prd-template.md`（数据看板：筛选 + 指标卡 + 图表 + 列表 + 指标总览） | `examples/data-dashboard/` |
|
|
216
|
+
| `backend-list-prd-template.md` 且为 **纯列表**（筛选 + 分页表，无典型弹层 CRUD） | `examples/backend-list/` |
|
|
217
|
+
| `backend-list-prd-template.md` 且含 **列表 + 筛选 + 分页 + 详情 + 新增/编辑 + 删除** 等完整 CRUD | `examples/list-crud/` |
|
|
218
|
+
| `backend-form-edit-prd-template.md`（整页表单编辑） | `examples/form-edit/` |
|
|
219
|
+
| `backend-form-preview-prd-template.md`（只读详情/预览） | `examples/form-preview/` |
|
|
220
|
+
| `user-frontend-prd-template.md`（C 端 / 活动页） | `examples/user-frontend/` |
|
|
221
|
+
| `app-shell-navigation-prd-template.md`（壳层 + 多页 hub） | `examples/app-shell-navigation/` |
|
|
222
|
+
|
|
223
|
+
**后台「XX 列表 / XX 管理」默认识别（执行者须遵守）**：用户未写明「只读」「仅查询」「无编辑/删除」「纯台账」「无弹层 CRUD」时，**默认按含完整 CRUD** 生成 PRD 与可交互原型：章节与演示路径须对照 **`examples/list-crud/`**（筛选 + 列表 + **查看详情** + **新增/编辑表单弹层** + **删除确认** + 行内状态等）。**仅**在用户或 PRD **明确收窄**为无新建/编辑/删除、仅筛选分页导出时，才改用 **`examples/backend-list/`** 粒度。
|
|
224
|
+
|
|
225
|
+
### 单页原型与壳层主页导航（默认策略，执行者须遵守）
|
|
226
|
+
|
|
227
|
+
- **为何常见「只有业务页、没有侧栏顶栏」**：当类型为 **后台列表 / 表单 / 详情** 等**单一业务页**、且用户仅泛称「原型 / HTML / Tailwind / 高保真」时，技能默认对齐 **`examples/list-crud/`、`examples/form-edit/`** 等——交付 **单文件 `prototype.html`**，**刻意不包含**管理台侧栏 + 顶栏壳层，以便评审聚焦筛选、表格、弹层与字段规则，并减少维护成本。
|
|
228
|
+
- **何时必须带上「主页导航 / 管理台壳层」**：若用户**明确**要以下任一类交付物，或 Step 2 将本次识别为 **壳层与多页导航类**（`app-shell-navigation-prd-template.md`），则 Step 4b **不得**只给孤立业务单页，须按壳层范式产出：
|
|
229
|
+
- 显式表述：**侧栏、顶栏、首页 / 工作台、面包屑、多页 / 页签切换、整站后台、管理台外壳、ProLayout、像现网管理台一样、iframe 文档中心、壳层 PRD** 等；
|
|
230
|
+
- 用户 @ 或点名 **`app-shell-navigation-prd-template.md`**、`examples/app-shell-navigation/`。
|
|
231
|
+
- **壳层范式**（与 `app-shell-navigation-prd-template.md`、`examples/app-shell-navigation/` **一致**）：
|
|
232
|
+
- **入口**：项目根目录 **`prototype.html`** = **侧栏 + 顶栏 + 页签（若有）+ iframe 主区**；**HTML 结构、Tailwind 类名、字体（DM Sans）、`tailwind.config.extend`（如 `boxShadow.shell`）、侧栏尺寸与毛玻璃卡片等须以示例 `prototype.html` 为权威参照，禁止「差不多」式自创壳层 UI。**
|
|
233
|
+
- **壳层 PRD**：根目录 **`prd.md`** 只写或与壳层模板对齐：**全局布局、菜单树、子页索引、iframe URL 约定**；文首**交互原型**链接指向 **`./prototype.html`**；并列出各子页业务 PRD 的相对链接（见下「目录约定」）。
|
|
234
|
+
- **业务子页**：**不得**再把长业务页平铺为根下单文件；须在 **`pages/<子页 kebab-case 目录名>/`** 内交付 **`prd.md`（该子页业务需求）** + **入口 HTML**（推荐 **`index.html`**，避免与根目录 `prototype.html` 混淆；若用户约定 `prototype.html` 亦可，但同项目内须统一）。壳层 iframe 的 `src` 指向 **`pages/<子页>/index.html`**（或约定文件名）。子页内 **PRD 标注** 的 `fetch` 目标为**同子目录** `./prd.md`（路径相对子页 HTML 所在目录）。
|
|
235
|
+
- **样式（子页）**：列表/表单等子页在 iframe 内展示时，**卡片、表头、主色、阴影**须对齐 **`pages/demo-home.html` / `pages/demo-list.html`** 的 **Tailwind 类组合**（壳层 token）；若该子页为**含 CRUD 的业务列表**，须在上述视觉基线上按 **`examples/list-crud/prototype.html`** 补全详情/表单/删除等交互区块。**视觉 token**不得随意更换色板或圆角体系（除非用户书面要求偏离模板）。
|
|
236
|
+
- **混合任务（最常见）**：用户要「某菜单下的列表页」且**也要**壳层——**字段与交互**须按 **`examples/list-crud/`**（默认含 CRUD）或用户明确收窄后的 **`examples/backend-list/`** 与 PRD 对齐；**文件形态**必须为 **根壳 + `pages/<业务目录>/`（含子页 `prd.md` + `index.html`）**，菜单树、`iframe src` 与 PRD §子页索引一致。
|
|
237
|
+
- **子页视觉与能力**：`examples/app-shell-navigation/pages/demo-list.html` 仅为**极简占位**；若 iframe 子页为**业务列表且含 CRUD**，子页 `index.html` 的**交互与区块**不得以 demo-list 为上限，须以 **`examples/list-crud/prototype.html`** 为业务骨架（表头工具栏、详情/表单/删除弹层等），**仅**借用 app-shell 系 **Tailwind 卡片/主色 token**。
|
|
238
|
+
- **改版补救**：若曾交付为根下平铺 `pages/foo.html`，改版时**迁入** `pages/foo/index.html` 并补子页 `prd.md`，根 `prd.md` 改为壳层索引并回写链接。
|
|
147
239
|
|
|
148
240
|
**执行要求**：
|
|
149
241
|
|
|
150
|
-
1. **Step 4 之前**：若上表已映射当前页面类型，须阅读对应 `examples/<子目录>/prd.md
|
|
151
|
-
2. **Step 4b**：用户指令已含原型相关关键词时，优先对照**与类型一致**的 `examples/<子目录>/prototype.html
|
|
152
|
-
3. **路径**：`examples/`
|
|
242
|
+
1. **Step 4 之前**：若上表已映射当前页面类型，须阅读对应 `examples/<子目录>/prd.md`；交付原型时对照同类型 `prototype.html`（标注、`fetch` 切片、弹层滚动等见技术约定第 8 ～ 10 条）。**独立 list-crud 单页**可对照主题蓝主按钮（技术约定第 9 条独立单页分支）。**若判定需要壳层**，**须额外**阅读 `examples/app-shell-navigation/` 下 `prd.md`、`prototype.html`、`pages/demo-*.html` 与 `layout-spec.md`，且**主色与按钮以 app-shell 示例为准**（第 9 条 app-shell 分支）。**壳层内业务列表子页**若含 CRUD，还须阅读 **`examples/list-crud/prototype.html`** 作为业务交互母版（勿仅照 `demo-list.html` 的极简表）。
|
|
243
|
+
2. **Step 4b**：用户指令已含原型相关关键词时，优先对照**与类型一致**的 `examples/<子目录>/prototype.html`。**若判定需要壳层**：以 `examples/app-shell-navigation/prototype.html` 为骨架生成根 `prototype.html`，子页放入 **`pages/<子页>/index.html`**（见「壳层与子页目录约定」），不得省略壳层或改为根下单文件冒充。
|
|
244
|
+
3. **路径**：`examples/` 仅供走查；用户仓库产出见下文「输出路径」与「壳层与子页目录约定」。
|
|
245
|
+
|
|
246
|
+
### 壳层与子页目录约定（新建时必须遵守）
|
|
247
|
+
|
|
248
|
+
当交付 **工作台壳层 + 一个或多个 iframe 子页**（含用户表述：带壳层、工作台、侧栏、多页等）时，**默认**在 `src/prototypes/<项目 slug>/` 下采用下列层级。
|
|
249
|
+
|
|
250
|
+
**项目目录命名（执行者须遵守）**：
|
|
251
|
+
|
|
252
|
+
- **`<项目 slug>`** 表示**产品或项目**（英文 **kebab-case**），须与 PRD 中的**产品名 / 项目代号**或可推断的 bounded context 一致（如 **产品定价中心** → `product-pricing-console`、**合同中心** → `contract-center`）。仓库路径即 **`src/prototypes/<项目 slug>/`**。
|
|
253
|
+
- **禁止**用**单一菜单页名、单屏业务名**作为壳层原型**根目录名**（反例：`product-discount-list`、`user-list`、`order-detail` 仅描述一个菜单或一页时），以免与 **`pages/<同一词>/`** 子目录**同名叠套**（`…/product-discount-list/pages/product-discount-list/` 难辨层级），且不利于同项目下**多子页**扩展。
|
|
254
|
+
- **`pages/<子页目录>/`** 使用**菜单或功能**短名（可与路由/菜单文案对应），**允许且常见**与 `<项目 slug>` **不同**（例：根 `product-pricing-console` + 子 `pages/product-discount-list/`、`pages/workbench-home/`）。
|
|
255
|
+
|
|
256
|
+
```text
|
|
257
|
+
src/prototypes/<项目 slug>/ # 例：product-pricing-console（项目，非单页菜单名）
|
|
258
|
+
├── prd.md # 壳层 PRD：布局、菜单、子页清单、与子页 prd 的互链
|
|
259
|
+
├── prototype.html # 壳层入口（严格参考 examples/app-shell-navigation/prototype.html）
|
|
260
|
+
└── pages/
|
|
261
|
+
├── <子页-a>/ # 例：workbench-home
|
|
262
|
+
│ ├── prd.md
|
|
263
|
+
│ └── index.html
|
|
264
|
+
└── <子页-b>/ # 例：product-discount-list（功能子页，可与项目 slug 不同）
|
|
265
|
+
├── prd.md
|
|
266
|
+
├── index.html
|
|
267
|
+
└── （可选）*.js # 仅当单文件过长时拆出，与 index.html 同目录；标注仍 fetch 同目录 prd.md
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
- **壳层 `prd.md` 文首**：含 `[打开 prototype.html](./prototype.html)`；另起列表项给出各子页 **`[子页 A PRD](./pages/<a>/prd.md)`**、**`[子页 A 原型](./pages/<a>/index.html)`**；HTTP 打开说明中的路径须写 **`src/prototypes/<项目 slug>/`**，与子页 `prd.md` 内「打开本目录」说明一致。
|
|
271
|
+
- **子页 `prd.md` 文首**：含指向本子页入口 HTML 的相对链接（如 `[打开 index.html](./index.html)`）。
|
|
272
|
+
- **子页 `prd.md` H1（DP-IT）**：子页文首 **`#`** **必须**为「**DP-IT 对外交付命名**」规定的**完整 DP-IT 一行标题**（见「**本技能对执行者的硬性要求（文首 H1 / DP-IT）**」与豁免条款），不得用「XX 功能 PRD（产品需求文档）」等泛化 H1；仓库路径仍为 `pages/<子页>/prd.md`。
|
|
273
|
+
- **禁止**：将壳层与子页业务混在同一篇根 `prd.md` 却不为子页单独建 `prd.md`（除非用户明确要求单文件 PRD，须在文档中声明例外）；将子页 HTML 全部平铺为 `pages/*.html` 而无子目录（**新建交付默认不允许**，旧存量可渐进迁移）。
|
|
274
|
+
|
|
275
|
+
### 归入既有 `pages/` 项目（`@pages` / 用户点名路径）
|
|
276
|
+
|
|
277
|
+
当用户在对话中 **`@`** 仓库内**既有壳层**下的 **`pages/`** 目录（或写出路径 **`src/prototypes/<既有项目 slug>/pages/`**），并要求将新页面**放进该 `pages/`**、**不要另起项目文件夹**或等价表述时：
|
|
278
|
+
|
|
279
|
+
- **必须**在**同一** **`src/prototypes/<项目 slug>/`** 根下，于 **`pages/<新子页 kebab-case>/`** 增量交付 **`prd.md` + `index.html`**（入口文件名与项目内约定一致，默认可为 **`index.html`**）；**禁止**为此再建并列的 **`src/prototypes/<另一 slug>/`** 根目录承接该子页（除非用户**显式**要求新建另一产品线 / Bounded Context 的壳层项目）。
|
|
280
|
+
- **必须同步**：该项目的根 **`prd.md`**（文首子页索引、§ 菜单树 / 目录约定 / 修订记录）与根 **`prototype.html`**（侧栏、`iframe` / 页签、`data-src` / `target`、收起态快捷入口、与路径相关的标注兜底文案）。子页 **`prd.md` 文首**建议增加指向壳层的相对链接（如 **`[打开 prototype.html](../../prototype.html)`**），便于从子页回到走查入口。
|
|
281
|
+
- **子页在 iframe 内**：须遵守「技术约定」第 8 条关于**子页「标注说明」浮动按钮**与壳层左下角入口**不叠压**的约定（推荐 **`fixed bottom-* right-*`** 或省略子页全局浮动入口）。
|
|
282
|
+
|
|
283
|
+
若用户**显式**要求「仅单页、无壳层」且路径落在某 `pages/<子>/` 下，仍须为子目录交付 **`prd.md`**；是否更新根壳层以该次用户说明为准（**最小必要**澄清冲突需求）。
|
|
153
284
|
|
|
154
285
|
## HTML + Tailwind CSS 高保真可交互原型
|
|
155
286
|
|
|
156
|
-
在 PRD 之外或用户明确要求时，输出**单文件或可合并的少量 HTML**，用 **Tailwind CSS** 还原布局与视觉层级，用 **原生 JavaScript**（无框架依赖）实现 PRD 中需要演示的交互，做到「能点开、能切换状态」，而非纯截图式静态页；**高保真交付须带 PRD 标注弹框**（见下文技术约定第
|
|
287
|
+
在 PRD 之外或用户明确要求时，输出**单文件或可合并的少量 HTML**，用 **Tailwind CSS** 还原布局与视觉层级，用 **原生 JavaScript**（无框架依赖）实现 PRD 中需要演示的交互，做到「能点开、能切换状态」，而非纯截图式静态页；**高保真交付须带 PRD 标注弹框**（见下文技术约定第 8 ～ 10 条）。
|
|
157
288
|
|
|
158
289
|
### 技术约定
|
|
159
290
|
|
|
160
291
|
1. **样式**：使用 [Tailwind CSS](https://tailwindcss.com/)（用户口语中的「tailcss」按 Tailwind CSS 理解）。优先 **Play CDN**（页面内 `<script src="https://cdn.tailwindcss.com"></script>`），单 HTML 用浏览器直接打开即可预览，无需本地构建。若用户仓库已集成 Tailwind 构建链，可改为引用构建产物，但须在交付说明中写清如何启动/打开。
|
|
161
292
|
2. **结构**：语义化 HTML5（`main`、`nav`、`section`、`button` 等）；关键交互控件使用 `type="button"`，避免误提交。
|
|
162
|
-
3. **交互**：用少量内联或同文件 `<script>` 实现 Tab、折叠、弹层/抽屉开关、下拉、步骤条、表单校验态、禁用态、空态/加载骨架等；**数据用静态 mock**，接口行为用文字或 toast
|
|
163
|
-
4.
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
293
|
+
3. **交互**：用少量内联或同文件 `<script>` 实现 Tab、折叠、弹层/抽屉开关、下拉、步骤条、表单校验态、禁用态、空态/加载骨架等；**数据用静态 mock**，接口行为用文字或 toast 模拟即可。**表单校验（含新增/编辑弹层）**：对齐 **`examples/list-crud/prototype.html`**——每可校验字段下 **` <p id="err*" class="mt-1 hidden text-xs text-red-600" role="alert"></p>`**；提交前 **`clearFormErrors()`**（或作为 `validateForm()` 首行），失败时 **`showErr('errX', '文案')`** 移除 `hidden`；**禁止**仅用全局 Toast 代替字段旁错误文案（成功/全局提示仍可用 Toast）。打开表单时应 **`clearFormErrors()`**；可选为控件加 **`aria-describedby`** 指向对应 `err*`。
|
|
294
|
+
4. **日期与时间控件（表单 / 筛选，默认）**：
|
|
295
|
+
- **仅日期、起止区间**（如生效起止、活动日期、筛选「生效日期」）：高保真原型默认使用 **两个** `<input type="date">`（开始、结束），标签写清「开始 / 结束」或「生效起止」一行内并排；**禁止**默认用单行 `<input type="text">` 让用户手敲 `YYYY-MM-DD ~ YYYY-MM-DD`（除非 PRD **明确**要求兼容历史粘贴/导入，且仍须在 PRD 写清格式与容错）。
|
|
296
|
+
- **Mock 与列表展示**：行数据可为 `YYYY-MM-DD ~ YYYY-MM-DD` 或「—」；**双空**表示不限，保存为「—」；校验：**只填一端**须报错；**双填**须 **开始 ≤ 结束**；字段级错误共用一处 `err*` 时，**`input` 与 `change`** 均须清除该 `err*`（`type="date"` 常以 `change` 为主）。
|
|
297
|
+
- **需含时刻**：用 `<input type="datetime-local">`，或拆为 `date` + `time`；PRD 须写清与接口对齐的时区/精度（如 ISO 8601、秒级）。
|
|
298
|
+
- **筛选区「日期范围」**：与表单区一致，默认双 `date` + 闭区间语义；PRD 表格「类型」列写 **日期范围（双控件）** 而非泛称「文本」。
|
|
299
|
+
5. **保真**：
|
|
300
|
+
- **一般页**：若有截图或现网页面，对齐间距与色板；无参考时以 PRD 与通用后台规范为主。
|
|
301
|
+
- **app-shell 壳层及壳内子页**：**必须以** `examples/app-shell-navigation/` 下对应 HTML 的 **Tailwind 类、字体链接、`tailwind.config` 片段、圆角/阴影/渐变** 为实施基准，**逐块对照后再写**；允许改文案与菜单项、`href`/`iframe src`，**不允许**在未获用户授权时整体替换为另一套配色（如把 indigo 系全局改成纯蓝灰另一方言）。复杂图表仍可用占位块 + 标注「图表区」。
|
|
302
|
+
- **后台列表 / list-crud 类列表（含壳层 iframe 内的列表子页）**：**新建、导出、批量导入、刷新**等针对列表或查询结果集的主操作，须放在**列表卡片表头工具栏**（列表标题与 `<table>` 之间的同一行：**左侧**标题、**右侧**按钮组），与 `examples/list-crud/prototype.html` 列表卡 §3.2 及 `examples/backend-list/prototype.html` 一致；**禁止**放在页面 H1 标题旁；**默认禁止**放在筛选区底部（筛选区仅 **查询 / 重置**，见 `backend-list-prd-template.md` §3.1 / §3.2）。**表头右侧 `flex … gap-2` 内按钮顺序（与示例 `prototype.html` 列表 section 一致）**：须为 **「针对 §3.2.1 工具栏 / 新建的 PRD 标注（如 `PRD §2·§3.1`、`PRD §3.2·工具栏`，`data-anno-key` 与 prd 章节对应）→ 第一个业务主按钮（新建 / 新增）→ 次要业务按钮（导出等）」**；**禁止**把上述「工具栏类」`anno-trigger` 放在左侧标题旁，导致与「新建」物理分离、违背走查习惯。
|
|
303
|
+
6. **无障碍（简要）**：可聚焦控件有可见焦点样式；弹层打开时焦点管理、必要处加 `aria-expanded` / `aria-modal` / `role`。
|
|
304
|
+
7. **与 PRD 对齐**：文件顶部 HTML 注释注明对应 **`prd.md` 路径**（根壳层或 `pages/<子页>/prd.md`）。**双向导航**：根 `prd.md` 链 `./prototype.html` 与各子页 `prd`/入口 HTML；子页 `prd.md` 链本子页 `./index.html`。壳层场景下「同目录 `prd.md`」对根指根 PRD，对子页指**该子目录内** `prd.md`。
|
|
305
|
+
8. **PRD 标注弹框（高保真原型必含，与业务弹窗区分）**：
|
|
167
306
|
- **目的**：评审/走查时一眼对齐需求，避免原型仅「长得像」却难追溯 PRD。
|
|
168
|
-
-
|
|
169
|
-
|
|
307
|
+
- **`anno-trigger` 排版（须对齐 `examples/list-crud/prototype.html`）**：
|
|
308
|
+
- **筛选区标题行（§3.1）**：**「筛选条件」`h2` 与 `PRD §3.1` 紧挨**（标注在标题文字**右侧**，小间距即可）。**默认** **`flex flex-wrap items-center gap-2`**，`h2` 与 **`anno-trigger` 均 `w-fit shrink-0`**，仅用 **`gap-2`（或 `gap-1.5`）** 控制间距，**二者宽度随内容**。**禁止** **`grid` 首列 `minmax(0,1fr)` / `1fr`** 或整行 **`justify-between`** 把标题与 **`PRD §3.1`** 甩到卡片左右两端导致「离得过远」；`examples/list-crud/prototype.html` 筛选行若仍为 `justify-between`，新建交付以**本条「紧挨默认」**为准，走查页可按需对齐示例但不得再引入 `1fr` 标题格。若 PRD 明确要求「标题左、标注贴卡片右缘」，可用**左侧** **`inline-flex items-center gap-2`** 包住 `h2`+`PRD §3.1` 紧挨组，**另起**右侧占位/操作，**仍禁止**用 `1fr` 拉宽标题与标注之间的空白。**禁止**将 `PRD §3.1` 放在页 H1/页眉区代替筛选卡标题行；**禁止**与筛选底栏「查询 / 重置」混在同一行替代本标题行。
|
|
309
|
+
- **筛选区底部**：查询、重置等主操作为一行时，使用 **`mt-4 flex flex-wrap gap-2`**，自**左**起排列；**禁止**整行 **`justify-end`** 把查询/重置顶到最右。
|
|
310
|
+
- **列表卡片表头**（`justify-between` 一行）：**左侧**为「**`h2` 列表标题** + **与本表数据列 / §3.2 正文直接对应的** `PRD §3.2`（或等价章节键）」；**右侧**为同一 **`flex flex-wrap items-center gap-2`** 容器，**从左到右**须为：**「§3.2.1 工具栏 / 新建导出」类 `anno-trigger`（与 `examples/list-crud/prototype.html` 中 `PRD §2·§3.1` 同级语义）→ 新建（主色实心）→ 导出等次要按钮」**——即 **凡解释「新建 / 导出放表头」的标注，必须紧挨在「新建」左侧**，不得放在左侧标题组；**禁止**右侧仅业务按钮而无工具栏类标注（若 PRD 确有 §3.2.1，原型须可点对应标注）。
|
|
311
|
+
- **表格操作列**：与示例 `renderTable` 中操作列一致：`<td class="… text-right text-xs">` 内 **`<div class="inline-flex flex-wrap items-center justify-end gap-1">`**；凡与「查看 / 编辑 / 删除」同行的 **`anno-trigger`，一律排在「查看」之前**（示例顺序：**`PRD §2.2` → 查看 → 编辑 → 删除**）；多 § 走查时保持同一相对顺序；**禁止**仅在表格下方单独一行堆放 §4 ～§7 等替代操作列内的走查位。
|
|
312
|
+
- **业务弹层标题行**：**`flex flex-wrap items-start justify-between gap-2`**，**`h3` 在左**，**单个** `anno-trigger`（`shrink-0`）在该行**右侧**与标题相对；底栏仅排业务按钮。
|
|
313
|
+
- **形态**：在**主要功能区块**（如筛选区、列表区、工具栏、关键业务弹窗内等）旁放置触发器（推荐文案「PRD §x.x」「标注」或 `?` 图标按钮，`type="button"`）；点击打开**独立标注弹框**——标题区须明显区别于业务弹窗（推荐小标签「需求标注」+ 琥珀/紫色调或左侧色条）。正文可为**要点摘要**（2 ～ 5 条），**或**（推荐）按第 10 条从同目录 `prd.md` **切片渲染**对应章节全文（含表格），长文须在弹层内可滚动。
|
|
314
|
+
- **内容至少包含**：① 对应 `prd.md` 的**章节号与标题**（体现在弹层标题或首段）；② **摘要模式**：2 ～ 5 条要点、验收注意或字段规则；**或切片模式（第 10 条）**：正文为切片内 PRD 原文（表格/列表以渲染结果为准）；③ 可选：「待后端确认 / 与现网差异」一句。
|
|
170
315
|
- **交互与无障碍**：`role="dialog"`、`aria-modal="true"`、`aria-labelledby`；支持 **ESC**、遮罩点击、明确关闭按钮；**z-index** 须高于同页业务弹层（避免被详情/表单盖住），或与业务层分层约定一致。
|
|
171
316
|
- **禁止**：不要用标注弹框承载真实表单提交；不要与业务弹窗共用同一 DOM id。
|
|
172
|
-
|
|
173
|
-
|
|
317
|
+
- **壳层 + iframe 子页（防「标注说明」重叠）**：根壳常在主区左侧附近固定「标注说明」（切片**根** `prd.md`）。iframe 内子页若再用 **`fixed bottom-* left-*`** 放置同款按钮，会与壳层入口在视口上**叠在一起**。约定：**子页**浮动「标注说明」须 **`fixed bottom-* right-*`（右下角）** 并注明 `title` 为「本子页 prd.md」；或**省略**子页浮动按钮，仅保留各区块 **`PRD §x`**，由壳层独占左下全局入口。**页头触发器排版**：子页 H1 与 **§1 / 引言** 类 `anno-trigger` 及短说明，建议 **`flex flex-wrap justify-between`，触发器与说明 `items-end text-right`**，避免说明挤在标题正下方与壳层主区抢高。
|
|
318
|
+
- **壳层 iframe 子页横向铺满（同项目多列表对齐）**：同一 **`src/prototypes/<项目 slug>/`** 下若已有列表子页采用 **`body` 级横向 `padding`（如 `p-6`）且内容区无 `max-w-*` 居中窄容器**，则**新建或改版**的其它列表子页须与之对齐：**禁止**单独对页眉、`main` 或内容外包一层 **`mx-auto max-w-6xl` / `max-w-7xl`** 导致 iframe 内两侧大块留白而同项目参考页（如 **`pages/product-discount-list/index.html`**）已全宽展示；改版时对照参考子页的 **`body` class、`header` 与列表 `section` 是否套窄宽**。
|
|
319
|
+
9. **主按钮与主题色（原型）**：
|
|
320
|
+
- **独立单页**（`list-crud` / `form-edit` 等**非** app-shell 场景）：常规主操作为**主题蓝**实心（`bg-blue-600 hover:bg-blue-700 text-white`）；次要白底灰边；危险红色系。
|
|
321
|
+
- **app-shell 壳层及 `examples/app-shell-navigation` 系子页**：主按钮、页签高亮、列表内链等**以示例 HTML 中实际使用的类名为准**（当前示例为 **indigo / violet** 与 slate 中性色组合）；**须与示例一致**，不得另起一套主色以「适配个人习惯」。
|
|
322
|
+
10. **标注正文与 `prd.md` 联动（推荐）**：需求标注弹框内条文/表格应与 PRD **单一数据源**一致时，用 `fetch`（或构建期内联）加载**同目录 `prd.md`** 原文，按 `data-anno-key`（或等价映射）用正则定位到对应 `##` / `###` 章节并切片，经 **Markdown 渲染**（CDN 如 `marked`，开启 GFM 以支持表格）写入弹层；**长内容滚动**：标注卡片外层设 `max-h-[…vh]`，正文区设 `min-h-0 flex-1 overflow-y-auto overflow-x-auto`，避免长表格撑破视口；`file://` 打开时浏览器通常无法 `fetch` 本地文件，须在交付说明中要求通过**本地静态服务**打开同目录，并提供**未加载到 PRD 时的 HTML 兜底摘要**。`prd.md` 为可信内容；若接入用户不可信 Markdown，须做 XSS 净化。对照实现见 `examples/list-crud/prototype.html`。
|
|
174
323
|
|
|
175
324
|
### 输出路径
|
|
176
325
|
|
|
177
|
-
- 与
|
|
178
|
-
- **壳层 +
|
|
179
|
-
-
|
|
326
|
+
- **仅业务单页（无壳层）**：`src/prototypes/<page-name>/prd.md` 与 `src/prototypes/<page-name>/prototype.html`（或用户约定文件名）。
|
|
327
|
+
- **壳层 + 多子页（文档中心 / 工作台，新建默认）**：**`src/prototypes/<项目 slug>/`**（`<项目 slug>` 须遵守「壳层与子页目录约定 · **项目目录命名**」）根目录放**壳层** `prd.md` + `prototype.html`；**每个 iframe 子页**为 `src/prototypes/<项目 slug>/pages/<子页目录>/prd.md` + `index.html`（及可选同目录脚本）。可选：根目录或壳层旁增加 `layout-spec.md`（栅格速查），与 `examples/app-shell-navigation/layout-spec.md` 对齐。
|
|
328
|
+
- **旧式平铺** `pages/*.html`：仅允许在**存量改版**或未明确要求「子目录」时保留；用户一旦要求按本技能「壳层与子页目录约定」交付，**新建目录并迁移**，根 `prd.md` 更新索引与链接。
|
|
329
|
+
- 多屏非 iframe 拆分时，可根目录 `prototype-list.html` 等，须在注释与 `prd.md` 中说明导航关系。
|
|
180
330
|
|
|
181
331
|
## Workflow
|
|
182
332
|
|
|
183
|
-
### Step 1:
|
|
333
|
+
### Step 1: 输入与现状分析
|
|
184
334
|
|
|
185
|
-
1.
|
|
186
|
-
2.
|
|
187
|
-
3.
|
|
188
|
-
4.
|
|
335
|
+
1. 确认产出目录、页面类型线索与用户声明的功能范围。**若用户 `@` 或写出既有 `src/prototypes/<项目 slug>/pages/`**：新交付物**归入该 `<项目 slug>`**，并计划更新根 `prd.md` 与 `prototype.html`（见「归入既有 `pages/` 项目」）。
|
|
336
|
+
2. **若同目录已有交付物**：读取 **`prd.md`**；若存在 **`prototype.html`** 则一并读取（用于迭代、对齐标注与互链）。
|
|
337
|
+
3. **若用户提供了页面实现**：读取其给出的路径（如 `*.vue`、`*.tsx` 等），**不假设**固定为 `index.tsx`。
|
|
338
|
+
4. **可选材料（有则读）**：产品/技术说明类 Markdown、截图、接口文档等；**不假设**存在固定文件名的 `spec.md`、`content.md` 或 `screenshot.png`。
|
|
189
339
|
|
|
190
340
|
### Step 2: 类型识别
|
|
191
341
|
|
|
192
342
|
基于页面内容自动识别类型：
|
|
193
343
|
|
|
194
344
|
- 包含大量图表、指标卡片、数据看板 → 数据看板类（先读 `examples/data-dashboard/`）
|
|
195
|
-
- 包含列表、筛选、分页 →
|
|
345
|
+
- 包含列表、筛选、分页 → **后台列表类**：**默认**视为需典型 **CRUD（详情 + 新增/编辑 + 删除，常以弹层演示）**，先读 **`examples/list-crud/`**；**仅当**用户或 PRD 明确「只读 / 仅查询 / 无编辑删除 / 纯台账 / 无弹层 CRUD」时，才降为 **`examples/backend-list/`**（纯筛选 + 表 + 分页 + 导出等）。
|
|
196
346
|
- 包含表单输入、提交 → 后台表单编辑类（先读 `examples/form-edit/`）
|
|
197
347
|
- 只有展示、无输入 → 后台表单预览类（先读 `examples/form-preview/`）
|
|
198
348
|
- C 端用户界面 → 用户前台类（先读 `examples/user-frontend/`）
|
|
199
349
|
- 管理台壳层、侧栏多级菜单、首页栅格、多子页原型 hub（iframe / `pages/`）→ 壳层与多页导航类（先读 `examples/app-shell-navigation/`）
|
|
350
|
+
- 若任务主体是**单一列表/表单页**，但用户**同时**要求侧栏顶栏、整站管理台、ProLayout、多页导航等 → **业务内容**仍按列表/表单类读示例；**原型形态**按「单页原型与壳层主页导航」升级为 **壳层 + `pages/`**（先读 `examples/app-shell-navigation/`）
|
|
200
351
|
|
|
201
352
|
### Step 3: 需求确认（按需，避免无效追问）
|
|
202
353
|
|
|
@@ -204,70 +355,92 @@ description: >-
|
|
|
204
355
|
|
|
205
356
|
**原型（prototype.html）边界（默认遵守，禁止违背）**：
|
|
206
357
|
|
|
207
|
-
-
|
|
208
|
-
-
|
|
358
|
+
- 用户仅说「生成 PRD / 写 PRD / PRD 文档」等：**只交付 `prd.md`**，**不**生成 `prototype.html`，也**禁止**在回复末尾追问「要不要带原型 / HTML / Tailwind」。
|
|
359
|
+
- 用户话里已出现 **原型、HTML、Tailwind、高保真、可交互 demo、prototype** 等且与 PRD 一并提出：**直接执行 Step 4 + Step 4b**，无需再确认是否要做原型。
|
|
360
|
+
- 用户话里已出现 **侧栏、顶栏、壳层、主页、工作台、管理台布局、ProLayout、整站后台、iframe 文档中心、多页导航** 等与壳层强相关表述：Step 4 须写**根壳层 `prd.md`**（按 `app-shell-navigation-prd-template.md`）+ **各子页目录内 `prd.md`**；Step 4b **必须**交付根 `prototype.html` + **`pages/<子页>/index.html`**（见「壳层与子页目录约定」），**禁止**仅用单业务页冒充，**禁止**新建时把子页全堆成 `pages/*.html` 而无子目录（除非用户明确声明采用平铺旧式）。
|
|
361
|
+
- 用户话里已出现 **DP-IT、JoySpace、对外附件名、用户需求说明书(PRD)、待排期 / 已梳理待排期** 等：Step 4 须在适用 `prd.md` **额外**核对「**DP-IT 对外交付命名**」中的**对外文件名**与修订记录；**不**因此自动要求 Step 4b（仍以是否出现原型关键词为准）。**注意**：业务子页 / 无壳层单页 H1 的 DP-IT 格式见「**默认强制范围**」，**不依赖**用户是否说出上述关键词。
|
|
209
362
|
|
|
210
363
|
### Step 4: PRD 生成
|
|
211
364
|
|
|
212
365
|
1. 若本节「内置参考示例」表中已映射当前页面类型，**先阅读**对应 `examples/<子目录>/prd.md`（及将交付原型时的 `prototype.html`），再应用模板。
|
|
213
366
|
2. 应用对应模板
|
|
214
|
-
3.
|
|
367
|
+
3. 从用户范围说明、（若有）实现代码与（若有）同目录既有 **`prd.md` / `prototype.html`** 中提取与归纳信息
|
|
215
368
|
4. 填充模板内容
|
|
216
369
|
5. **若同目录已有或可交付 `prototype.html`（或约定的原型主文件名）**：在 `prd.md` 文首加入指向该文件的 Markdown 相对链接（见「PRD 与原型互链」）；仅无原型时不写死链接
|
|
217
|
-
6.
|
|
370
|
+
6. **文首 H1（DP-IT）**：写入**业务子页**或**无壳层单页** `prd.md` 时，**必须**落实「**DP-IT 对外交付命名**」完整 **H1**、**`YYYYMMDD`** 与 **`<主题简名>`**（含豁免与壳层根例外，见「**本技能对执行者的硬性要求（文首 H1 / DP-IT）**」与「**默认强制范围**」）；根壳层 `prd.md` 标题策略按「**壳层根 `prd.md`**」执行
|
|
371
|
+
7. 保存 PRD：**无壳层**时为 `src/prototypes/<page-name>/prd.md`；**有壳层**时根目录 `prd.md` 为壳层文档，**各子页业务 PRD** 写入 `src/prototypes/<项目 slug>/pages/<子页目录>/prd.md`（见「壳层与子页目录约定」）
|
|
218
372
|
|
|
219
373
|
### Step 4b: 高保真原型生成（可选）
|
|
220
374
|
|
|
221
375
|
在用户**已明确要求**原型（见 Step 3 关键词）时执行；未出现上述要求则跳过本步。
|
|
222
376
|
|
|
223
|
-
1. 以 PRD
|
|
224
|
-
2.
|
|
225
|
-
3.
|
|
226
|
-
4.
|
|
227
|
-
5. **回写 `prd.md
|
|
377
|
+
1. 以 PRD 与视觉参考为清单划分区块；**若需壳层**，先定 `<项目 slug>` 与每个 **`pages/<子页目录>/`** 的菜单名、`iframe src`、子页独立 `prd.md` 章节边界。**无壳层、仅单文件 `prototype.html` 的 list-crud 类列表**：**筛选卡标题行**须 **`h2` 与 `PRD §3.1` 紧挨**（`flex` + `gap-2` + `w-fit`，见技术约定第 8 条）；表头右侧 **`工具栏类 anno-trigger` → `新建` → `导出`**、操作列 **`anno-trigger` → 查看** 等仍须落实技术约定第 5 条末段与第 8 条。
|
|
378
|
+
2. **壳层 `prototype.html`**：以 `examples/app-shell-navigation/prototype.html` 为骨架**拷贝式改写**（保留类名体系），替换菜单文案与 `iframe` 的 `src` 为 `./pages/<子页>/index.html`。**子页 `index.html`**：**视觉**对齐 `pages/demo-list.html` 等壳内示例（布局/阴影/圆角/字体）；**含 CRUD 的列表子页**须以 **`examples/list-crud/prototype.html`** 为业务交互母版嵌入筛选、表、工具栏、详情/表单/删除弹层等。**必须包含** PRD 标注弹框（技术约定第 8 ～ 10 条）；壳层 `fetch('prd.md')` 对根 PRD，子页 `fetch('prd.md')` **仅针对同目录子页 PRD**。**筛选卡**标题行须 **`h2`「筛选条件」与 `PRD §3.1` 紧挨**（技术约定第 8 条「筛选区标题行」，**禁止** `1fr` / 整行 `justify-between` 拉距过远）；**列表卡片表头**须落实技术约定第 5 条末段与第 8 条「列表卡片表头」：右侧 **`工具栏类 anno-trigger` → `新建` → `导出`**，左侧仅标题 + §3.2 类列表标注。
|
|
379
|
+
3. 保证路径可点通：**侧栏 / 页签 → iframe 加载子目录 index**；子页内主业务流程可点。
|
|
380
|
+
4. 文件落盘路径符合「壳层与子页目录约定」。
|
|
381
|
+
5. **回写 PRD 互链**：根 `prd.md` 链 `prototype.html` 与各 `pages/.../prd.md`、`index.html`；每个子页 `prd.md` 链本子页 `index.html`。
|
|
228
382
|
|
|
229
383
|
### Step 5: 一致性核对
|
|
230
384
|
|
|
231
385
|
核对以下维度：
|
|
232
386
|
|
|
233
|
-
- ✅（若已读 `examples/`
|
|
234
|
-
- ✅
|
|
235
|
-
- ✅
|
|
387
|
+
- ✅（若已读 `examples/` 对照）章节与信息粒度不低于参考示例中与该页同类的模块（允许因范围缩小而删减，但**不得**无故缺省筛选/列表/权限等同类块）；**默认识别为后台列表时**，不得缺省 **CRUD 主路径**（详情、新增/编辑、删除）的可演示原型与 PRD 章节，除非用户或 PRD 已明确收窄为 `backend-list` 粒度
|
|
388
|
+
- ✅ 功能点与（若有）页面实现及用户确认范围一致
|
|
389
|
+
- ✅ 技术约定与用户在对话或（若有）规格/接口说明中确认的内容一致；**不**与既有 **`prd.md`** 中已写死的事实矛盾（改版时须在文档中说明变更点）
|
|
236
390
|
- ✅ 范围与用户要求一致
|
|
237
391
|
- ✅ 无遗漏核心内容
|
|
238
|
-
- ✅（若含原型）**原型页面信息与 `prd.md`
|
|
392
|
+
- ✅（若含原型）**原型页面信息与 `prd.md` 一致**；已承诺的交互在原型中可演示；文案/字段不与 PRD 及用户给定枚举/口径冲突；**标注弹框**与 `prd.md` 章节一一对应、无误导性描述；**`anno-trigger` 排版**（**筛选卡标题行：`h2` 与 `PRD §3.1` 紧挨、`gap-2`、`w-fit`，禁止 `1fr`/整行 `justify-between` 过远**、筛选底栏、**列表表头右侧「工具栏 § → 新建 → 导出」**、**操作列「标注 → 查看」**、弹层标题）与 **`examples/list-crud/prototype.html`** 及技术约定第 5 条末段、第 8 条一致；若标注按第 10 条 `fetch` 切片渲染，则触发器映射的正则应与 `prd.md` 实际标题一致，且交付说明含 HTTP 打开与兜底约定
|
|
239
393
|
- ✅ **语言**：未约定外文时，PRD 与原型用户可见文案为简体中文，与「语言与文案」「本技能对执行者的硬性要求」一致
|
|
394
|
+
- ✅ **文首 H1（DP-IT）**：每个**业务子页 / 无壳层单页** `prd.md`（及未声明豁免者）文首 **第一个 `#`** 为完整 `DP-IT-YYYYMMDD-<主题简名>-用户需求说明书(PRD)`；**`YYYYMMDD` 为 8 位数字**、段间仅 **`-`**、无首尾空格；**壳层根** `prd.md` 是否 DP-IT 与该节「壳层根」一致；豁免文档文首已注明原因；子页索引与对外 `.md` 文件名建议与该节「执行清单」一致
|
|
240
395
|
- ✅（若目录存在 `prototype.html` 等原型入口）`prd.md` 文首含有效的 Markdown **相对链接**指向该文件，与「PRD 与原型互链」一致；或已明确声明本期无原型
|
|
396
|
+
- ✅ 若用户或 PRD 要求**管理台壳层 / 主页导航**：存在根 `prototype.html`、根壳层 `prd.md`、**`pages/<子页>/prd.md` + `index.html`**（默认目录结构），且根 PRD 含菜单树与 iframe 路径索引；**不得**仅交付无导航的单业务页；**不得**在新建场景下省略子页独立 `prd.md`；**壳层项目根目录**须为 **`src/prototypes/<项目 slug>/`**（与「壳层与子页目录约定」中**项目目录命名**一致），**禁止**用单一菜单页名作为项目根且与子页目录同名叠套
|
|
397
|
+
- ✅ 若用户指明**归入既有** **`pages/`**：已更新该 **`src/prototypes/<项目 slug>/`** 下根 **`prd.md`** 与子页索引、根 **`prototype.html`**（菜单 / 页签 / `iframe` 路径兜底），且无多余并列项目根目录，与「归入既有 `pages/` 项目」一致
|
|
241
398
|
|
|
242
399
|
如有不一致，返回 Step 4（及 4b）重新生成。
|
|
243
400
|
|
|
244
401
|
## Rules
|
|
245
402
|
|
|
246
|
-
1.
|
|
247
|
-
2.
|
|
403
|
+
1. **路径规范**：无壳层时 PRD 为 `src/prototypes/<page-name>/prd.md`。**有壳层时**：根为 **`src/prototypes/<项目 slug>/prd.md`**（`<项目 slug>` 须遵守「壳层与子页目录约定 · **项目目录命名**」），每子页为 **`src/prototypes/<项目 slug>/pages/<子页目录>/prd.md`**（见「壳层与子页目录约定」）
|
|
404
|
+
2. **命名规范**：仓库内文件 **`prd.md`** 小写不变；壳层默认可交互入口为 **`prototype.html`**；iframe 子页默认可交互入口为 **`pages/<子页目录>/index.html`**（与根 `prototype.html` 区分）；用户约定其他主文件名时从其约定并在 `prd.md` 写清链接。**业务子页 / 无壳层单页**文首 **H1** **必须**按「**DP-IT 对外交付命名**」全文（豁免与壳层根例外见该节），**不因**仓库仍叫 `prd.md` 而省略 DP-IT 段。
|
|
248
405
|
3. **术语与语言**：使用研发/测试通用术语；须遵守「语言与文案」及「本技能对执行者的硬性要求（语言）」，**默认简体中文**撰写 PRD 与原型可见文案
|
|
249
406
|
4. **范围约束**：用户指定范围时，不超出范围
|
|
250
407
|
5. **必须核对**：生成后必须进行一致性核对
|
|
251
|
-
6. **原型约束**：优先单文件 + Tailwind CDN
|
|
408
|
+
6. **原型约束**：优先单文件 + Tailwind CDN；**壳层**根 `prototype.html`、**子页** `pages/<子>/index.html` 须含 **PRD 标注弹框**（技术约定第 8 条）；独立单页主按钮遵循第 9 条蓝/灰/红；app-shell 系遵循第 9 条 indigo 分支；**推荐** `fetch` 与**同目录** `prd.md` 切片联动；**list-crud 类列表原型**须符合技术约定第 5 条末段（表头右侧按钮顺序）与第 8 条（`anno-trigger` 与表头 / 操作列相对位置）
|
|
252
409
|
7. **禁止无效追问**：仅请求 PRD 时不得主动询问是否补充原型；需要原型须由用户在指令中写明（见 Step 3）
|
|
253
|
-
8. **PRD
|
|
410
|
+
8. **PRD↔ 原型互链**：同目录存在交互原型入口（默认 `prototype.html`）时，`prd.md` 文首须含可点击的 `[描述](./prototype.html)` 相对链接；多入口时在文首分项列出并注明用途；无原型时不写无效链接（见「PRD 与原型互链」）
|
|
411
|
+
9. **壳层默认不隐含**：单一业务页默认**不含**侧栏顶栏；用户明确要求壳层时，**必须**按 `app-shell-navigation-prd-template.md` 与 `examples/app-shell-navigation/` 交付，见「单页原型与壳层主页导航」与「壳层与子页目录约定」
|
|
412
|
+
10. **壳层新建目录强制**：工作台壳层 + 子页场景下，**项目根**须为 **`src/prototypes/<项目 slug>/`**（命名见「壳层与子页目录约定 · 项目目录命名」），**禁止**用单一菜单页名作根且与 `pages/<同名>/` 叠套；**必须**采用 `pages/<子页目录>/{prd.md,index.html}`；壳层 `prototype.html` / 根 `prd.md` **以示例为模板**；子页样式 **严格参考** `pages/demo-home.html`、**壳层系** `demo-list` 的 **Tailwind 卡片/主色**；**业务列表含 CRUD 时**交互骨架须对齐 **`examples/list-crud/prototype.html`**，**禁止**仅以极简 demo 表交付却声称完整列表页。
|
|
413
|
+
11. **后台列表默认 CRUD**：见上文「内置参考示例」表下说明及 **Step 2**「列表、筛选、分页」分支；未明确只读/纯查询时，PRD 与原型须覆盖 **查看详情、新建/编辑（弹层或路由）、删除（确认）** 等主路径，并与 `examples/list-crud/` 粒度一致。
|
|
414
|
+
12. **DP-IT 对外命名**：对**业务子页 / 无壳层单页** `prd.md` 须**默认**完整执行「**DP-IT 对外交付命名**」（默认强制、格式、仓库与对外文件名、多批次、执行清单、豁免）；**禁止**擅自改用历史混写前缀或省略 `-用户需求说明书(PRD)`；子页 **`pages/<子>/prd.md` 路径不因 DP-IT 而改名**。
|
|
415
|
+
13. **归入既有 `pages/`**：用户 **`@pages`**（或等价路径 **`src/prototypes/<项目 slug>/pages/`**）并要求新页置于该目录时，**禁止**另行新建并排 **`src/prototypes/<新项目 slug>/`**；须增量更新该项目的根 **`prd.md`**、根 **`prototype.html`** 与该 **`pages/<子>/`** 交付物（见上文「归入既有 `pages/` 项目」）。
|
|
254
416
|
|
|
255
417
|
## Example Usage
|
|
256
418
|
|
|
257
419
|
```
|
|
258
420
|
用户：帮我生成 data-search 页面的PRD
|
|
259
421
|
→ 执行：
|
|
260
|
-
1.
|
|
422
|
+
1. 读取用户给出的范围与（若有）实现路径；若 `src/prototypes/data-search/` 下已有 prd.md / prototype.html 则先读再改
|
|
261
423
|
2. 识别为数据看板类
|
|
262
424
|
3. 应用 data-prd-template.md
|
|
263
|
-
4.
|
|
264
|
-
5.
|
|
425
|
+
4. 生成或更新 src/prototypes/data-search/prd.md（**无壳层单页**：文首 **`#`** 须为 `DP-IT-YYYYMMDD-<主题简名>-用户需求说明书(PRD)`，日期与主题按用户批次与页面语义）
|
|
426
|
+
5. 核对一致性（含 DP-IT H1，见 Step 5）
|
|
265
427
|
```
|
|
266
428
|
|
|
267
429
|
```
|
|
268
430
|
用户：生成合同详情页的 PRD，并给一个 HTML+Tailwind 可点的原型
|
|
269
431
|
→ 执行：
|
|
270
|
-
1.
|
|
432
|
+
1. 同上生成或更新 prd.md（文首 **`#`** 须为完整 DP-IT 行，见「DP-IT 对外交付命名」）
|
|
271
433
|
2. Step 4b：生成 src/prototypes/contract-detail/prototype.html（Tailwind CDN + 分区布局 + Tab/弹层等 mock 交互 + PRD 标注弹框）
|
|
272
|
-
3. 核对 PRD
|
|
434
|
+
3. 核对 PRD、原型、（若有）实现与用户范围 一致
|
|
435
|
+
```
|
|
436
|
+
|
|
437
|
+
```
|
|
438
|
+
用户：产品折扣列表 PRD + 原型，要带工作台壳层，子页按 DP-IT 对外命名（批次 20260520）
|
|
439
|
+
→ 执行：
|
|
440
|
+
1. 建 src/prototypes/<项目 slug>/（例 **product-pricing-console**，须为**项目/产品**名，勿用单一菜单页名如 ~~product-discount-list~~ 作根目录）
|
|
441
|
+
2. 根 prd.md：app-shell-navigation 模板（布局、菜单树、§子页索引）；文首链 ./prototype.html，并链 ./pages/workbench-home/prd.md、./pages/product-discount-list/prd.md 及对应 index.html；子页索引可加注各子页 **对外 H1**（见「DP-IT 对外交付命名 · 壳层子页索引写法」）
|
|
442
|
+
3. 根 prototype.html：以 examples/app-shell-navigation/prototype.html 为骨架，iframe src 指向 ./pages/workbench-home/index.html、./pages/product-discount-list/index.html
|
|
443
|
+
4. pages/workbench-home/{prd.md,index.html}：以 demo-home 为样式母版；**prd.md 文首 `#`** 为 `DP-IT-20260520-工作台首页-用户需求说明书(PRD)`（日期、主题按用户批次与子页语义）
|
|
444
|
+
5. pages/product-discount-list/{prd.md,index.html}：业务 PRD + **list-crud 级**列表原型；**prd.md 文首 `#`** 为 `DP-IT-20260520-产品折扣列表-用户需求说明书(PRD)`；表头右侧 **`PRD §3.2·工具栏`（或等价）→「新建」→「导出」**，操作列 **§ 标注在「查看」左侧**；**视觉**对齐 app-shell 子页 indigo 卡片，**交互骨架**对齐 `examples/list-crud/prototype.html`
|
|
445
|
+
6. 核对：项目根命名、目录层级、互链、HTTP 打开路径写 `src/prototypes/<项目 slug>/`、标注 fetch 路径（根 prd vs 子页 prd）、视觉类名与示例一致；**DP-IT** 与「Step 5」勾选一致
|
|
273
446
|
```
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
| -------- | -------- | -------------------------------- |
|
|
19
19
|
| 公告台账 | 条件查询 | 标题、类型、发布时间范围；查询/重置 |
|
|
20
20
|
| 公告台账 | 列表展示 | 分页表格；发布时间降序默认 |
|
|
21
|
+
| 公告台账 | 列表工具栏 | 「导出 CSV」置于列表卡片表头行右侧（与 `list-crud` 列表卡工具栏一致） |
|
|
21
22
|
| 公告台账 | 导出 | 导出 CSV（可选，受导出权限控制） |
|
|
22
23
|
|
|
23
24
|
---
|
|
@@ -49,8 +50,7 @@
|
|
|
49
50
|
| 公告类型 | 下拉 | 全部 / 系统 / 活动 | 精准 |
|
|
50
51
|
| 发布时间 | 日期范围 | 起止合法 | 范围 |
|
|
51
52
|
|
|
52
|
-
- **查询** /
|
|
53
|
-
- **导出**（可选）：需「导出」权限；导出字段与列表列一致。
|
|
53
|
+
- **查询** / **重置**：同上。筛选区底部不放「导出」。
|
|
54
54
|
|
|
55
55
|
### 3.2 数据列表
|
|
56
56
|
|
|
@@ -64,11 +64,15 @@
|
|
|
64
64
|
- **分页**：默认 10 条；可切换 10 / 20 / 50。
|
|
65
65
|
- **行操作**：本示例页**无**编辑/删除行操作；跳转详情若做则为另页路由（不在本模板最小范围）。
|
|
66
66
|
|
|
67
|
+
### 3.2.1 列表工具栏（表头操作区）
|
|
68
|
+
|
|
69
|
+
与 `examples/list-crud/prototype.html`「用户列表」卡片一致：列表标题行**右侧**放置「导出 CSV」等针对列表结果集的操作按钮；**不**放在页面顶栏、**不**放在筛选卡片底部。
|
|
70
|
+
|
|
67
71
|
---
|
|
68
72
|
|
|
69
73
|
## 4. 交互设计
|
|
70
74
|
|
|
71
|
-
加载态、空态、导出中的防重复点击；筛选与列表区域与 `aria`
|
|
75
|
+
加载态、空态、导出中的防重复点击；筛选与列表区域与 `aria` 规范对齐。**查询**为主色实心；**重置**为次要样式；**导出 CSV** 位于列表工具栏（见 §3.2.1），与 **查询** 同主色体系以突出结果集动作（示例原型如此，可按设计系统改为次按钮）。
|
|
72
76
|
|
|
73
77
|
---
|
|
74
78
|
|
|
@@ -78,8 +82,9 @@
|
|
|
78
82
|
| -------- | ---------------------- |
|
|
79
83
|
| §1 | 页头「PRD §1」 |
|
|
80
84
|
| §3.1 | 筛选区「PRD §3.1」+ 查询/重置 |
|
|
81
|
-
| §3.2 | 表格区「PRD §3.
|
|
82
|
-
| §
|
|
85
|
+
| §3.2 | 表格区「PRD §3.2」+ 分页 |
|
|
86
|
+
| §3.2.1 | 列表表头右侧「导出 CSV」+「PRD §3.2·工具栏」 |
|
|
87
|
+
| §4 | 「PRD §4」标注与导出 Toast |
|
|
83
88
|
| 走查说明 | 左下角「标注说明」+ prd.md §9 原文联动 |
|
|
84
89
|
|
|
85
90
|
---
|
|
@@ -89,3 +94,4 @@
|
|
|
89
94
|
| 版本 | 日期 | 说明 |
|
|
90
95
|
| ---- | ---------- | ---- |
|
|
91
96
|
| v0.1 | 2026-05-14 | 初版：对齐 backend-list 模板示例 |
|
|
97
|
+
| v0.2 | 2026-05-15 | 导出按钮迁至列表表头工具栏；补充 §3.2.1 |
|
|
@@ -105,18 +105,25 @@
|
|
|
105
105
|
<button type="button" id="btnReset" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm">
|
|
106
106
|
重置
|
|
107
107
|
</button>
|
|
108
|
-
<button type="button" id="btnExport" class="anno-trigger ml-auto" data-anno-key="s4">PRD §4</button>
|
|
109
|
-
<button type="button" id="btnDoExport" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white">
|
|
110
|
-
导出 CSV
|
|
111
|
-
</button>
|
|
112
108
|
</div>
|
|
113
109
|
</section>
|
|
114
110
|
|
|
115
111
|
<section class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
|
|
116
|
-
<div class="flex items-center justify-between border-b border-slate-100 px-4 py-3">
|
|
112
|
+
<div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 px-4 py-3">
|
|
117
113
|
<div class="flex items-center gap-2">
|
|
118
114
|
<h2 class="text-sm font-semibold">公告列表</h2>
|
|
119
115
|
<button type="button" class="anno-trigger" data-anno-key="s32">PRD §3.2</button>
|
|
116
|
+
<button type="button" class="anno-trigger" data-anno-key="s321">PRD §3.2·工具栏</button>
|
|
117
|
+
</div>
|
|
118
|
+
<div class="flex flex-wrap items-center gap-2">
|
|
119
|
+
<button type="button" class="anno-trigger" data-anno-key="s4">PRD §4</button>
|
|
120
|
+
<button
|
|
121
|
+
type="button"
|
|
122
|
+
id="btnDoExport"
|
|
123
|
+
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow hover:bg-blue-700"
|
|
124
|
+
>
|
|
125
|
+
导出 CSV
|
|
126
|
+
</button>
|
|
120
127
|
</div>
|
|
121
128
|
</div>
|
|
122
129
|
<div class="overflow-x-auto">
|
|
@@ -219,14 +226,16 @@
|
|
|
219
226
|
'<ul class="list-disc space-y-2 pl-4 text-sm"><li>正文来自同目录 <strong>prd.md</strong> 切片。</li><li>长内容可在弹框内滚动。</li></ul>';
|
|
220
227
|
var ANNO_EXTRACT = {
|
|
221
228
|
s1: { start: /^## 1\./m, end: /^## 2\./m, title: 'prd.md §1' },
|
|
222
|
-
s31: { start: /^### 3\.1/m, end: /^### 3\.2/m, title: 'prd.md §3.1' },
|
|
223
|
-
s32: { start: /^### 3\.2
|
|
229
|
+
s31: { start: /^### 3\.1/m, end: /^### 3\.2 /m, title: 'prd.md §3.1' },
|
|
230
|
+
s32: { start: /^### 3\.2 数据列表/m, end: /^### 3\.2\.1/m, title: 'prd.md §3.2' },
|
|
231
|
+
s321: { start: /^### 3\.2\.1/m, end: /^## 4\./m, title: 'prd.md §3.2.1 列表工具栏' },
|
|
224
232
|
s4: { start: /^## 4\./m, end: /^## 9\./m, title: 'prd.md §4' },
|
|
225
233
|
};
|
|
226
234
|
var FB = {
|
|
227
235
|
s1: { title: '§1 兜底', html: '<p class="text-xs">加载 prd.md 后显示原文。</p>' },
|
|
228
236
|
s31: { title: '§3.1 兜底', html: '<p class="text-xs">筛选字段见 PRD。</p>' },
|
|
229
237
|
s32: { title: '§3.2 兜底', html: '<p class="text-xs">列表列见 PRD。</p>' },
|
|
238
|
+
s321: { title: '§3.2.1 兜底', html: '<p class="text-xs">新建/导出等放在列表表头工具栏。</p>' },
|
|
230
239
|
s4: { title: '§4 兜底', html: '<p class="text-xs">交互与按钮样式见 PRD。</p>' },
|
|
231
240
|
};
|
|
232
241
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> **文档说明**：本文件位于技能目录 `examples/list-crud/`，是 **后台列表 + 详情 + 新增/编辑 + 删除** 的**参考示例**（业务场景：用户管理），供生成同类 PRD 时对照章节结构、表格字段与「原型与 PRD 对应关系」写法。**不是**业务项目的默认交付路径；实际产出仍写入 `src/prototypes/<page-name>/prd.md`。落地以实际接口与权限码为准。
|
|
4
4
|
|
|
5
|
-
> **交互原型**：[打开 prototype.html](./prototype.html)（Tailwind Play CDN + `marked` + 原生 JS）。**需求标注**：运行时 `fetch` 同目录本 `prd.md`，按章节切片 Markdown 渲染进标注弹框（改 PRD 后刷新即可联动）；须用**本地 HTTP**打开目录（`file://` 无法加载 prd.md 时仅显示兜底摘要）。可演示 §3～§6 主路径与 Toast；业务数据为静态 mock。
|
|
5
|
+
> **交互原型**：[打开 prototype.html](./prototype.html)（Tailwind Play CDN + `marked` + 原生 JS）。**需求标注**：运行时 `fetch` 同目录本 `prd.md`，按章节切片 Markdown 渲染进标注弹框（改 PRD 后刷新即可联动）；须用**本地 HTTP**打开目录（`file://` 无法加载 prd.md 时仅显示兜底摘要）。可演示 §3 ～§6 主路径与 Toast；业务数据为静态 mock。
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
|
|
17
17
|
> 不包含：顶栏、侧栏菜单的样式与通用导航需求。
|
|
18
18
|
|
|
19
|
-
| 模块 | 功能点 | 功能描述
|
|
20
|
-
| -------- | -------- |
|
|
19
|
+
| 模块 | 功能点 | 功能描述 |
|
|
20
|
+
| -------- | -------- | ------------------------------------------------------ |
|
|
21
21
|
| 用户管理 | 条件查询 | 用户名、姓名、手机号、状态等；查询 / 重置 |
|
|
22
22
|
| 用户管理 | 列表展示 | 分页表格；约定列可排序 |
|
|
23
23
|
| 用户管理 | 查看详情 | 行内「查看」只读弹层 |
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
|
|
37
37
|
### 2.2 权限规划
|
|
38
38
|
|
|
39
|
-
| 权限点 | 操作范围
|
|
40
|
-
| ------ |
|
|
41
|
-
| 查看 | 列表、筛选、详情、分页、导出（若做）
|
|
42
|
-
| 编辑 | 新增、编辑、启用/禁用、删除、批量删除
|
|
39
|
+
| 权限点 | 操作范围 | 数据范围 |
|
|
40
|
+
| ------ | ------------------------------------- | -------- |
|
|
41
|
+
| 查看 | 列表、筛选、详情、分页、导出（若做） | 全量 |
|
|
42
|
+
| 编辑 | 新增、编辑、启用/禁用、删除、批量删除 | 全量 |
|
|
43
43
|
|
|
44
44
|
---
|
|
45
45
|
|
|
@@ -49,30 +49,30 @@
|
|
|
49
49
|
|
|
50
50
|
变更筛选后点击「查询」生效；「重置」恢复默认并刷新第 1 页。
|
|
51
51
|
|
|
52
|
-
| 筛选字段 | 类型
|
|
53
|
-
| :------- |
|
|
54
|
-
| 用户名 | 文本
|
|
55
|
-
| 姓名 | 文本
|
|
56
|
-
| 手机号 | 文本
|
|
57
|
-
| 用户状态 | 下拉
|
|
52
|
+
| 筛选字段 | 类型 | 输入限制 | 匹配规则 |
|
|
53
|
+
| :------- | :--- | :----------------- | :------- |
|
|
54
|
+
| 用户名 | 文本 | 1 ～ 64，trim | 模糊 |
|
|
55
|
+
| 姓名 | 文本 | 1 ～ 64 | 模糊 |
|
|
56
|
+
| 手机号 | 文本 | 数字，建议 11 位 | 精准 |
|
|
57
|
+
| 用户状态 | 下拉 | 全部 / 启用 / 禁用 | 精准 |
|
|
58
58
|
|
|
59
|
-
-
|
|
60
|
-
-
|
|
59
|
+
- **查询** / **重置**：见上文。
|
|
60
|
+
- **新增用户**：需「编辑」权限；打开新增表单（弹层或路由）。
|
|
61
61
|
|
|
62
62
|
### 3.2 数据列表
|
|
63
63
|
|
|
64
|
-
| 列表字段
|
|
65
|
-
|
|
|
66
|
-
| 用户名
|
|
67
|
-
| 姓名
|
|
68
|
-
| 手机号
|
|
69
|
-
| 部门
|
|
70
|
-
| 用户状态
|
|
71
|
-
| 创建时间
|
|
64
|
+
| 列表字段 | 字段说明 | 排序 |
|
|
65
|
+
| :------- | :----------------- | :--- |
|
|
66
|
+
| 用户名 | 登录账号，唯一 | 是 |
|
|
67
|
+
| 姓名 | 展示名 | 否 |
|
|
68
|
+
| 手机号 | 可脱敏 | 否 |
|
|
69
|
+
| 部门 | 主部门 | 否 |
|
|
70
|
+
| 用户状态 | 启用 / 禁用 | 是 |
|
|
71
|
+
| 创建时间 | `YYYY-MM-DD HH:mm` | 是 |
|
|
72
72
|
|
|
73
|
-
-
|
|
74
|
-
-
|
|
75
|
-
-
|
|
73
|
+
- **分页**：默认 10 条；可切换 10 / 20 / 50；底栏展示总数。
|
|
74
|
+
- **行操作**：查看、编辑、删除（受权限）。
|
|
75
|
+
- **批量删除**（可选）：多选 + 确认 + 接口。
|
|
76
76
|
|
|
77
77
|
---
|
|
78
78
|
|
|
@@ -84,15 +84,15 @@
|
|
|
84
84
|
|
|
85
85
|
## 5. 新增 / 编辑表单
|
|
86
86
|
|
|
87
|
-
| 字段 | 类型
|
|
88
|
-
| -------- |
|
|
89
|
-
| 用户名 | 文本
|
|
90
|
-
| 姓名 | 文本
|
|
91
|
-
| 手机号 | 文本
|
|
92
|
-
| 邮箱 | 文本
|
|
93
|
-
| 部门 | 选择
|
|
94
|
-
| 角色 | 多选
|
|
95
|
-
| 用户状态 | 单选
|
|
87
|
+
| 字段 | 类型 | 必填 | 校验要点 |
|
|
88
|
+
| -------- | ---- | ---- | ------------------------- |
|
|
89
|
+
| 用户名 | 文本 | 是 | 4 ～ 64；编辑态只读 |
|
|
90
|
+
| 姓名 | 文本 | 是 | 1 ～ 64 |
|
|
91
|
+
| 手机号 | 文本 | 是 | `^1[3-9]\d{9}$` |
|
|
92
|
+
| 邮箱 | 文本 | 否 | 邮箱格式 |
|
|
93
|
+
| 部门 | 选择 | 是 | 至少一项 |
|
|
94
|
+
| 角色 | 多选 | 是 | 至少一项 |
|
|
95
|
+
| 用户状态 | 单选 | 是 | 启用 / 禁用；新增默认启用 |
|
|
96
96
|
|
|
97
97
|
**保存**：前端校验 → 提交接口 → 成功关闭并刷新列表。**取消**：有改动时二次确认。
|
|
98
98
|
|
|
@@ -106,13 +106,13 @@
|
|
|
106
106
|
|
|
107
107
|
## 7. 接口（逻辑分组）
|
|
108
108
|
|
|
109
|
-
| 能力 | 说明
|
|
110
|
-
| -------- |
|
|
109
|
+
| 能力 | 说明 |
|
|
110
|
+
| -------- | ------------------ |
|
|
111
111
|
| 分页查询 | 筛选 + 分页 + 排序 |
|
|
112
|
-
| 详情 | userId
|
|
113
|
-
| 创建 | POST body
|
|
114
|
-
| 更新 | userId + 字段
|
|
115
|
-
| 删除 | DELETE / 批量
|
|
112
|
+
| 详情 | userId |
|
|
113
|
+
| 创建 | POST body |
|
|
114
|
+
| 更新 | userId + 字段 |
|
|
115
|
+
| 删除 | DELETE / 批量 |
|
|
116
116
|
|
|
117
117
|
---
|
|
118
118
|
|
|
@@ -120,32 +120,32 @@
|
|
|
120
120
|
|
|
121
121
|
加载态、空态、防重复提交、列表与弹层焦点与 `aria-modal` 与组件库规范对齐。
|
|
122
122
|
|
|
123
|
-
-
|
|
123
|
+
- **主色按钮**：查询、新增用户、保存等主操作使用**主题蓝**实心按钮；重置、取消、关闭等为次要（白底描边）；删除、确定离开等为危险（红色系）。高保真原型与 `deppon-prd-generator` 技能「技术约定」第 8 条一致。
|
|
124
124
|
|
|
125
125
|
---
|
|
126
126
|
|
|
127
127
|
## 9. 原型与 PRD 对应关系
|
|
128
128
|
|
|
129
|
-
| PRD 章节
|
|
130
|
-
|
|
|
131
|
-
| §1
|
|
132
|
-
| §2 / §3.1
|
|
133
|
-
| §3.1
|
|
134
|
-
| §3.2
|
|
135
|
-
| §4
|
|
136
|
-
| §5
|
|
137
|
-
| §6
|
|
138
|
-
| §8
|
|
139
|
-
| 走查说明
|
|
129
|
+
| PRD 章节 | prototype.html 演示点 |
|
|
130
|
+
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
131
|
+
| §1 | 页头「PRD §1」标注入口 |
|
|
132
|
+
| §2 / §3.1 | 列表标题行右侧「PRD §2·§3.1」+「新增用户」 |
|
|
133
|
+
| §3.1 | 筛选区旁「PRD §3.1」+ 查询、重置 |
|
|
134
|
+
| §3.2 | 列表标题行左侧「PRD §3.2」+ 表格、行操作（每行「查看」左侧「PRD §2.2」→ 同 §2.2 权限切片）；底栏「共 n 条」+ 每页条数 + 分页 |
|
|
135
|
+
| §4 | 详情弹层内「PRD §4」+ 只读字段 |
|
|
136
|
+
| §5 | 表单弹层内「PRD §5」+ 新增/编辑与校验 |
|
|
137
|
+
| §6 | 删除弹层内「PRD §6」+ 二次确认 |
|
|
138
|
+
| §8 | 主色按钮主题蓝与次要/危险区分；Toast 模拟成功/失败（无真实接口） |
|
|
139
|
+
| 走查说明 | 左下角「标注说明」：操作说明 + **prd.md §9 原文**；各「PRD §」从 **prd.md 对应章节切片**渲染；弹内长表格/长文可纵向与横向滚动；未加载 prd.md 时见页面顶栏黄条与弹内兜底 |
|
|
140
140
|
|
|
141
141
|
---
|
|
142
142
|
|
|
143
143
|
## 10. 修订记录
|
|
144
144
|
|
|
145
|
-
| 版本 | 日期 | 说明
|
|
146
|
-
| ---- | ---------- |
|
|
147
|
-
| v0.1 | 2026-05-13 | 用户列表 CRUD 初稿（他目录）
|
|
148
|
-
| v1.2 | 2026-05-13 | 原型：新增用户移至列表标题行；总条数移至分页栏「每页」旁
|
|
149
|
-
| v1.3 | 2026-05-14 | 迁入 `examples/list-crud/`，明确为技能内参考示例
|
|
150
|
-
| v1.4 | 2026-05-14 | 交互：主操作按钮统一主题蓝；与技能技术约定第 8 条对齐
|
|
145
|
+
| 版本 | 日期 | 说明 |
|
|
146
|
+
| ---- | ---------- | --------------------------------------------------------------------------------------- |
|
|
147
|
+
| v0.1 | 2026-05-13 | 用户列表 CRUD 初稿（他目录） |
|
|
148
|
+
| v1.2 | 2026-05-13 | 原型：新增用户移至列表标题行；总条数移至分页栏「每页」旁 |
|
|
149
|
+
| v1.3 | 2026-05-14 | 迁入 `examples/list-crud/`，明确为技能内参考示例 |
|
|
150
|
+
| v1.4 | 2026-05-14 | 交互：主操作按钮统一主题蓝；与技能技术约定第 8 条对齐 |
|
|
151
151
|
| v1.5 | 2026-05-14 | 原型：标注正文 `fetch` 联动 prd.md 切片 + Markdown 渲染；弹层内可滚动；file:// 兜底说明 |
|
|
@@ -582,9 +582,7 @@
|
|
|
582
582
|
class="flex max-h-[88vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border-2 border-amber-400 bg-white shadow-2xl ring-4 ring-amber-300/30"
|
|
583
583
|
role="document"
|
|
584
584
|
>
|
|
585
|
-
<div
|
|
586
|
-
class="flex shrink-0 items-center justify-between border-b border-amber-200 bg-amber-50 px-4 py-2"
|
|
587
|
-
>
|
|
585
|
+
<div class="flex shrink-0 items-center justify-between border-b border-amber-200 bg-amber-50 px-4 py-2">
|
|
588
586
|
<div class="min-w-0 pr-2">
|
|
589
587
|
<p class="text-[10px] font-bold uppercase tracking-wider text-amber-900">
|
|
590
588
|
需求标注 · 非业务弹窗
|
|
@@ -743,6 +741,11 @@
|
|
|
743
741
|
},
|
|
744
742
|
s31: { start: /^### 3\.1/m, end: /^### 3\.2/m, title: 'prd.md §3.1 筛选查询区（原文）' },
|
|
745
743
|
s32: { start: /^### 3\.2/m, end: /^## 4\./m, title: 'prd.md §3.2 数据列表（原文）' },
|
|
744
|
+
row_perm: {
|
|
745
|
+
start: /^### 2\.2/m,
|
|
746
|
+
end: /^### 3\.1/m,
|
|
747
|
+
title: 'prd.md §2.2 权限规划（原文）',
|
|
748
|
+
},
|
|
746
749
|
s4: { start: /^## 4\./m, end: /^## 5\./m, title: 'prd.md §4 用户详情（原文）' },
|
|
747
750
|
s5: { start: /^## 5\./m, end: /^## 6\./m, title: 'prd.md §5 新增/编辑表单（原文）' },
|
|
748
751
|
s6: { start: /^## 6\./m, end: /^## 7\./m, title: 'prd.md §6 删除与审计（原文）' },
|
|
@@ -765,6 +768,10 @@
|
|
|
765
768
|
title: 'prd.md §3.2（兜底）',
|
|
766
769
|
html: '<ul class="list-disc space-y-2 pl-4"><li>列字段、分页以 PRD 表格为准。</li><li>行操作：查看 / 编辑 / 删除。</li></ul>',
|
|
767
770
|
},
|
|
771
|
+
row_perm: {
|
|
772
|
+
title: 'prd.md §2.2（兜底）',
|
|
773
|
+
html: '<ul class="list-disc space-y-2 pl-4"><li><strong>查看</strong>权限：列表、筛选、详情、分页等；行内<strong>查看</strong>按钮归属此类。</li><li><strong>编辑</strong>权限：新增、编辑、删除等；行内<strong>编辑</strong>与<strong>删除</strong>需具备编辑类权限（PRD §2.2）。</li><li>无权限时对应按钮隐藏或禁用（实现约定）。</li></ul>',
|
|
774
|
+
},
|
|
768
775
|
s4: {
|
|
769
776
|
title: 'prd.md §4（兜底）',
|
|
770
777
|
html: '<ul class="list-disc space-y-2 pl-4"><li>只读详情弹层；字段见 PRD §4。</li></ul>',
|
|
@@ -969,16 +976,18 @@
|
|
|
969
976
|
escapeHtml(u.createdAt) +
|
|
970
977
|
'</td>' +
|
|
971
978
|
'<td class="whitespace-nowrap px-4 py-3 text-right text-xs">' +
|
|
979
|
+
'<div class="inline-flex flex-wrap items-center justify-end gap-1">' +
|
|
980
|
+
'<button type="button" class="anno-trigger" data-anno-key="row_perm" aria-label="查看 PRD 标注：权限规划（§2.2）">PRD §2.2</button>' +
|
|
972
981
|
'<button type="button" data-a="view" data-id="' +
|
|
973
982
|
u.id +
|
|
974
|
-
'" class="
|
|
983
|
+
'" class="text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded px-1">查看</button>' +
|
|
975
984
|
'<button type="button" data-a="edit" data-id="' +
|
|
976
985
|
u.id +
|
|
977
|
-
'" class="
|
|
986
|
+
'" class="text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded px-1">编辑</button>' +
|
|
978
987
|
'<button type="button" data-a="del" data-id="' +
|
|
979
988
|
u.id +
|
|
980
989
|
'" class="text-red-600 hover:underline focus:outline-none focus:ring-2 focus:ring-red-500 rounded px-1">删除</button>' +
|
|
981
|
-
'</td>';
|
|
990
|
+
'</div></td>';
|
|
982
991
|
tb.appendChild(tr);
|
|
983
992
|
});
|
|
984
993
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
**语言**：`prd.md` 与 `prototype.html` 中用户可见文案须按本技能默认**简体中文**（另有约定时从其指令）；详见 `SKILL.md`「语言与文案」与「本技能对执行者的硬性要求」。
|
|
4
4
|
|
|
5
|
-
**PRD
|
|
5
|
+
**PRD↔ 原型**：同目录有 `prototype.html` 时，`prd.md` 文首须有 `[描述](./prototype.html)` 相对链接；见 `SKILL.md`「PRD 与原型互链」。
|
|
6
6
|
|
|
7
7
|
## 🚀 快速开始
|
|
8
8
|
|
|
@@ -23,14 +23,14 @@
|
|
|
23
23
|
|
|
24
24
|
## 📋 页面类型速查表
|
|
25
25
|
|
|
26
|
-
| 图标 | 类型 | 适用场景
|
|
27
|
-
| ---- | -------------- |
|
|
28
|
-
| 📊 | 数据看板类 | 统计看板、报表分析、指标监控
|
|
29
|
-
| 📋 | 后台列表类 | 数据列表、查询列表、台账管理
|
|
30
|
-
| ✏️ | 后台表单编辑类 | 新增/编辑表单、配置管理、数据录入
|
|
31
|
-
| 👁️ | 后台表单预览类 | 详情查看、预览页面、只读页面
|
|
32
|
-
| 🎨 | 用户前台类 | C 端页面、营销活动、产品展示
|
|
33
|
-
| 🧭 | 壳层与多页导航 | 文档中心壳层、侧栏顶栏、多子页互跳
|
|
26
|
+
| 图标 | 类型 | 适用场景 | 模板 |
|
|
27
|
+
| ---- | -------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------- |
|
|
28
|
+
| 📊 | 数据看板类 | 统计看板、报表分析、指标监控 | data-prd-template.md；先读 `examples/data-dashboard/` |
|
|
29
|
+
| 📋 | 后台列表类 | 数据列表、查询列表、台账管理 | backend-list-prd-template.md；纯列表 `examples/backend-list/`；含 CRUD `examples/list-crud/` |
|
|
30
|
+
| ✏️ | 后台表单编辑类 | 新增/编辑表单、配置管理、数据录入 | backend-form-edit-prd-template.md；先读 `examples/form-edit/` |
|
|
31
|
+
| 👁️ | 后台表单预览类 | 详情查看、预览页面、只读页面 | backend-form-preview-prd-template.md；先读 `examples/form-preview/` |
|
|
32
|
+
| 🎨 | 用户前台类 | C 端页面、营销活动、产品展示 | user-frontend-prd-template.md；先读 `examples/user-frontend/` |
|
|
33
|
+
| 🧭 | 壳层与多页导航 | 文档中心壳层、侧栏顶栏、多子页互跳 | app-shell-navigation-prd-template.md；先读 `examples/app-shell-navigation/`（含 `layout-spec.md`） |
|
|
34
34
|
|
|
35
35
|
---
|
|
36
36
|
|
|
@@ -89,8 +89,8 @@ skills/deppon-prd-generator/
|
|
|
89
89
|
- [ ] 已按页面类型对照阅读 `examples/<子目录>/prd.md`（见 `examples/README.md` / `SKILL.md` 映射表；将交付原型时含同目录 `prototype.html`）
|
|
90
90
|
- [ ] 文件保存在正确位置：`src/prototypes/<page-name>/prd.md`
|
|
91
91
|
- [ ] 文件名正确：`prd.md`（小写）
|
|
92
|
-
- [ ]
|
|
93
|
-
- [ ]
|
|
92
|
+
- [ ] 内容与（若有）页面实现及用户确认范围一致
|
|
93
|
+
- [ ] 与既有 **`prd.md`** 及用户给定口径一致；不依赖默认存在的 `spec.md`
|
|
94
94
|
- [ ] 没有遗漏核心功能
|
|
95
95
|
- [ ] 使用了研发/测试通用术语
|
|
96
96
|
- [ ] 结构清晰、层次分明
|
|
@@ -153,9 +153,9 @@ A: 可以，直接告诉需要修改的内容即可。如果修改了页面实
|
|
|
153
153
|
|
|
154
154
|
A: 选择主要功能类型，其他功能在对应模块详细描述
|
|
155
155
|
|
|
156
|
-
### Q: spec.md
|
|
156
|
+
### Q: 没有 `spec.md` 怎么办？
|
|
157
157
|
|
|
158
|
-
A:
|
|
158
|
+
A: **按默认流程即可**。权威交付物是 **`prd.md`**（及用户要求时的 **`prototype.html`**）；其它规格文件有则读、无则不假设。
|
|
159
159
|
|
|
160
160
|
---
|
|
161
161
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# [壳层 / 项目名称] 管理台壳层与导航 PRD（产品需求文档）
|
|
2
2
|
|
|
3
|
-
> **生成时对照**：生成前阅读本技能目录 `examples/app-shell-navigation/prd.md`、`layout-spec.md`（首页栅格/间距速查）与（若交付原型）`examples/app-shell-navigation/prototype.html`，对齐**栅格尺寸、侧栏层级、多页目录约定、iframe/路由跳转**写法。`prd.md` 与原型可见文案默认**简体中文**（见本技能 `SKILL.md`「语言与文案」）。用户仓库产出：`src/prototypes/<项目目录名>/prd.md
|
|
3
|
+
> **生成时对照**：生成前阅读本技能目录 `examples/app-shell-navigation/prd.md`、`layout-spec.md`（首页栅格/间距速查）与（若交付原型）`examples/app-shell-navigation/prototype.html`，对齐**栅格尺寸、侧栏层级、多页目录约定、iframe/路由跳转**写法。`prd.md` 与原型可见文案默认**简体中文**（见本技能 `SKILL.md`「语言与文案」）。用户仓库产出：`src/prototypes/<项目目录名>/prd.md`（壳层）+ `prototype.html`；**每个 iframe 子页**为 `src/prototypes/<项目目录名>/pages/<子页目录>/prd.md` + `index.html`（与 `SKILL.md`「壳层与子页目录约定」一致；**禁止**新建时仅平铺 `pages/*.html` 而无子目录，除非用户声明例外）。
|
|
4
4
|
|
|
5
|
-
> **交互原型链接（有 `prototype.html` 时必填）**：文首加入 `- **交互原型**：[打开 prototype.html](./prototype.html)
|
|
5
|
+
> **交互原型链接（有 `prototype.html` 时必填）**：文首加入 `- **交互原型**：[打开 prototype.html](./prototype.html)`（壳层主入口）；并列出各子页 `[打开 index.html](./pages/<子页>/index.html)` 等链接。仅无原型时删除。见 `SKILL.md`「PRD 与原型互链」。
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
# [页面名称] PRD (产品需求文档)
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> **生成时对照**：**技能人才默认**：后台「XX列表/管理」未声明「只读 / 仅查询 / 无编辑删除」时，应按 **`examples/list-crud/`** 撰写含 **CRUD** 的 PRD 与原型；**本 `backend-list-prd-template` 专长于已确认无弹层 CRUD 的纯列表**（筛选 + 分页 + 导出等），应用时须在文首**明确声明**「本期无新建/编辑/删除弹层」。若含典型 **列表 + 筛选 + CRUD**，须读 `examples/list-crud/prd.md` 并对齐 `prototype.html`。若仅为**筛选 + 列表 + 分页**（无弹层 CRUD），读 `examples/backend-list/prd.md` 与 **`examples/backend-list/prototype.html`**（含**列表表头工具栏**按钮位置）。
|
|
4
4
|
|
|
5
5
|
> **交互原型链接（有 `prototype.html` 时必填）**：在文首「文档说明」或标题下第一段加入 Markdown 相对链接，例如 `- **交互原型**：[打开 prototype.html](./prototype.html)`（文件名随实际交付调整）；仅无原型时删除本行链接。见本技能 `SKILL.md`「PRD 与原型互链」。
|
|
6
6
|
|
|
7
|
+
> **列表页主操作按钮位置（新建 / 导出 / 导入 / 刷新等，强制对齐 list-crud）**：与 `examples/list-crud/prototype.html` 列表卡 **§3.2** 一致——放在**列表卡片表头行**（「XX列表」标题与表格之间的工具栏行）**右侧**（`flex` + `justify-between`：左标题、右按钮组）；**禁止**放在页面顶栏大标题旁；**默认禁止**放在筛选卡片底部（筛选区底部仅 **查询 / 重置**，除非 PRD 单独声明特例）。PRD 须在 **§3.2** 或 **§3.2.1 列表工具栏** 中写明各按钮及权限。
|
|
8
|
+
|
|
7
9
|
## 1. 引言
|
|
8
10
|
|
|
9
11
|
### 1.1 背景
|
|
@@ -60,12 +62,20 @@
|
|
|
60
62
|
|
|
61
63
|
- **重置**：恢复所有筛选条件为默认值。
|
|
62
64
|
|
|
65
|
+
> **不要**在本区底部排列「新建」「导出」等列表级主操作（见下节 **列表工具栏**）。
|
|
66
|
+
|
|
63
67
|
### 3.2 数据列表
|
|
64
68
|
|
|
65
69
|
> 按页面里列表形式的子模块循环撰写
|
|
66
70
|
|
|
67
71
|
以列表形式，按需展示详细的数据表格。
|
|
68
72
|
|
|
73
|
+
- **列表工具栏（表头操作区）**（与 `examples/list-crud/prototype.html` 列表卡标题行一致）：
|
|
74
|
+
|
|
75
|
+
- **位置**：列表卡片顶部与 `<table>` 之间的一行；**左侧**为列表标题（如「XX 列表」）；**右侧**为 `新建`、`导出 CSV`、`批量导入` 等按钮组（主次按钮样式与 list-crud 示例一致：主操作为实心主题色，导出等可为次要描边）。
|
|
76
|
+
|
|
77
|
+
- **禁止**：与页面 H1 标题并排放在页眉；默认不与「查询 / 重置」混排在筛选卡片内。
|
|
78
|
+
|
|
69
79
|
- **列表字段**：
|
|
70
80
|
|
|
71
81
|
| 列表字段 | 字段说明 | 排序 |
|
|
@@ -92,7 +102,7 @@
|
|
|
92
102
|
> 简述数据列表的操作说明，包括导出/排序/行操作说明
|
|
93
103
|
|
|
94
104
|
- **排序**：点击表头排序图标，支持升序/降序切换
|
|
95
|
-
-
|
|
105
|
+
- **导出**：在**列表工具栏**点击「导出」，导出当前筛选条件下的数据（CSV 等格式）；与查询结果集一致
|
|
96
106
|
|
|
97
107
|
## 4. 交互设计
|
|
98
108
|
|
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
```
|
|
6
6
|
用户请求生成PRD（及可选 HTML+Tailwind 原型）
|
|
7
7
|
↓
|
|
8
|
-
Step 1:
|
|
9
|
-
├─
|
|
10
|
-
├─
|
|
11
|
-
├─
|
|
12
|
-
└─
|
|
8
|
+
Step 1: 输入与现状分析
|
|
9
|
+
├─ 读取同目录 prd.md（若已存在）
|
|
10
|
+
├─ 读取同目录 prototype.html（若存在）
|
|
11
|
+
├─ （可选）读取用户给出的页面实现路径（*.vue / *.tsx 等，无固定文件名）
|
|
12
|
+
└─ （可选）截图、零散说明、团队规格文档等——有则读，不假设 spec.md
|
|
13
13
|
↓
|
|
14
14
|
Step 2: 类型识别
|
|
15
15
|
├─ 数据看板类？ ──是──→ data-prd-template.md（先读 examples/data-dashboard/）
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
↓
|
|
42
42
|
Step 5: 一致性核对
|
|
43
43
|
├─ (若已读 examples/) 核对章节与信息粒度不低于同类参考
|
|
44
|
-
├─
|
|
45
|
-
├─ 核对技术约定与spec.md
|
|
44
|
+
├─ 核对功能点与（若有）页面实现及用户确认范围
|
|
45
|
+
├─ 核对技术约定与 PRD 自身及用户给定口径（不假设独立 spec.md）
|
|
46
46
|
├─ 核对范围与用户要求
|
|
47
47
|
├─ 核对是否遗漏核心内容
|
|
48
|
-
└─ (若有原型)
|
|
48
|
+
└─ (若有原型) 核对 prototype 与 prd.md；prd.md 文首含 prototype 相对链接
|
|
49
49
|
↓
|
|
50
50
|
一致性检查通过？
|
|
51
51
|
├─ 是 → 完成！交付 PRD（若用户要求原型则含 prototype.html）
|
|
@@ -54,25 +54,25 @@
|
|
|
54
54
|
|
|
55
55
|
## 详细步骤说明
|
|
56
56
|
|
|
57
|
-
### Step 1:
|
|
57
|
+
### Step 1: 输入与现状分析
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
**目标**：弄清用户范围与目录内已有交付物，再决定是新建还是迭代。
|
|
60
60
|
|
|
61
61
|
**操作清单**：
|
|
62
62
|
|
|
63
|
-
- [ ]
|
|
64
|
-
- [ ]
|
|
65
|
-
- [ ]
|
|
66
|
-
- [ ]
|
|
67
|
-
- [ ]
|
|
68
|
-
- [ ]
|
|
63
|
+
- [ ] 确认产出目录（如 `src/prototypes/<page-name>/`）与用户声明的功能范围
|
|
64
|
+
- [ ] 若同目录已有 **`prd.md`**：先读取，避免覆盖未约定的章节
|
|
65
|
+
- [ ] 若同目录已有 **`prototype.html`**：读取以便改版、对齐标注或与 PRD 互链
|
|
66
|
+
- [ ] **若用户提供了页面实现**：读取其路径（如 `*.vue`、`*.tsx` 等）；**不假设**固定为 `index.tsx`
|
|
67
|
+
- [ ] **可选输入（有则读）**：截图、接口说明、产品备注等任意 Markdown；**不假设**存在 `spec.md`、`content.md` 或 `screenshot.png`
|
|
68
|
+
- [ ] 归纳主要功能模块与关键技术点（仅基于实际读到的材料，不臆造）
|
|
69
69
|
|
|
70
|
-
|
|
70
|
+
**关键关注点**（有实现代码或原型时重点看；纯口述需求时以范围与模板为主）：
|
|
71
71
|
|
|
72
|
-
-
|
|
73
|
-
-
|
|
74
|
-
-
|
|
75
|
-
-
|
|
72
|
+
- 已有或规划中的主要模块与路由/入口
|
|
73
|
+
- 关键交互与状态（筛选、分页、弹层、表单校验等）
|
|
74
|
+
- 依赖的组件库或请求封装（从代码可见部分读取）
|
|
75
|
+
- 核心数据结构或列表字段（从代码或用户描述归纳）
|
|
76
76
|
|
|
77
77
|
---
|
|
78
78
|
|
|
@@ -82,14 +82,14 @@
|
|
|
82
82
|
|
|
83
83
|
**识别规则**：
|
|
84
84
|
|
|
85
|
-
| 判断条件
|
|
86
|
-
|
|
|
87
|
-
| 包含大量图表、指标卡片、数据看板
|
|
88
|
-
| 包含数据列表、筛选器、分页、批量操作
|
|
89
|
-
| 包含表单输入、提交按钮、字段校验
|
|
90
|
-
| 只有数据展示、无输入操作
|
|
91
|
-
| C 端用户界面、营销活动、产品展示
|
|
92
|
-
| 侧栏+顶栏+多子页跳转、PRD hub、iframe 承载 pages | 壳层与多页导航类 | app-shell-navigation-prd-template.md；先读 `examples/app-shell-navigation/`（含 `layout-spec.md`）
|
|
85
|
+
| 判断条件 | 页面类型 | 模板文件 |
|
|
86
|
+
| ------------------------------------------------ | ---------------- | ----------------------------------------------------------------------------------------------------------------- |
|
|
87
|
+
| 包含大量图表、指标卡片、数据看板 | 数据看板类 | data-prd-template.md；先读 `examples/data-dashboard/` |
|
|
88
|
+
| 包含数据列表、筛选器、分页、批量操作 | 后台列表类 | backend-list-prd-template.md；**纯列表**先读 `examples/backend-list/`；**含弹层 CRUD** 先读 `examples/list-crud/` |
|
|
89
|
+
| 包含表单输入、提交按钮、字段校验 | 后台表单编辑类 | backend-form-edit-prd-template.md；先读 `examples/form-edit/` |
|
|
90
|
+
| 只有数据展示、无输入操作 | 后台表单预览类 | backend-form-preview-prd-template.md；先读 `examples/form-preview/` |
|
|
91
|
+
| C 端用户界面、营销活动、产品展示 | 用户前台类 | user-frontend-prd-template.md；先读 `examples/user-frontend/` |
|
|
92
|
+
| 侧栏+顶栏+多子页跳转、PRD hub、iframe 承载 pages | 壳层与多页导航类 | app-shell-navigation-prd-template.md；先读 `examples/app-shell-navigation/`（含 `layout-spec.md`） |
|
|
93
93
|
|
|
94
94
|
**如果无法自动识别**：
|
|
95
95
|
|
|
@@ -130,10 +130,9 @@
|
|
|
130
130
|
- 按 `SKILL.md`「内置参考示例」表阅读对应 `examples/<子目录>/prd.md`（及将交付原型时的 `prototype.html`）
|
|
131
131
|
- 理解模板的结构和要求
|
|
132
132
|
2. **信息提取**
|
|
133
|
-
-
|
|
134
|
-
-
|
|
135
|
-
-
|
|
136
|
-
- 从 `screenshot.png` 提取布局信息
|
|
133
|
+
- 从用户对话与（若有）实现代码中归纳功能点、交互与数据结构
|
|
134
|
+
- 从（若已存在）同目录 **`prd.md` / `prototype.html`** 中继承已有结论，改版时显式标注变更
|
|
135
|
+
- 从（若有）团队另附的规格、接口或截图中摘录口径与文案；**无则**以 PRD 将写入的约定为准，并在文档中写清假设
|
|
137
136
|
3. **填充模板**
|
|
138
137
|
- 替换模板中的占位符
|
|
139
138
|
- 按照模板结构组织内容
|
|
@@ -146,7 +145,7 @@
|
|
|
146
145
|
|
|
147
146
|
**关键原则**：
|
|
148
147
|
|
|
149
|
-
-
|
|
148
|
+
- 内容须基于**已读到的**材料与用户确认范围；无实现代码时以用户描述 + 模板/examples 补全结构，避免虚构接口细节
|
|
150
149
|
- 使用研发/测试通用术语；**须遵守 `SKILL.md`「语言与文案」与「本技能对执行者的硬性要求」**，PRD 与原型可见文案默认简体中文
|
|
151
150
|
- 避免冗余表述
|
|
152
151
|
- 结构清晰、层次分明
|
|
@@ -185,19 +184,18 @@
|
|
|
185
184
|
|
|
186
185
|
**核对维度**：
|
|
187
186
|
|
|
188
|
-
#### 维度 1:
|
|
187
|
+
#### 维度 1: 功能点与（若有）实现及用户范围一致
|
|
189
188
|
|
|
190
|
-
- [ ] PRD
|
|
191
|
-
- [ ]
|
|
192
|
-
- [ ]
|
|
193
|
-
- [ ] 展示规则描述与实现一致
|
|
189
|
+
- [ ] PRD 中描述的功能点在用户确认范围内；若有实现代码，与代码可见行为一致
|
|
190
|
+
- [ ] 未凭空添加用户未确认的核心能力
|
|
191
|
+
- [ ] 交互与展示规则与（若有）实现或原型一致
|
|
194
192
|
|
|
195
|
-
#### 维度 2:
|
|
193
|
+
#### 维度 2: 技术约定自洽且可追溯
|
|
196
194
|
|
|
197
|
-
- [ ]
|
|
198
|
-
- [ ]
|
|
199
|
-
- [ ]
|
|
200
|
-
- [ ]
|
|
195
|
+
- [ ] 数据口径、字段格式、接口规则等在 PRD 内前后一致
|
|
196
|
+
- [ ] 若引用了用户/团队另附的规格或接口说明，摘录准确、无矛盾
|
|
197
|
+
- [ ] 改版时与旧版 `prd.md` 已锁定事实无静默冲突；有冲突须在文档中说明「变更说明」
|
|
198
|
+
- [ ] 未依赖不存在的 `spec.md` 作为外部权威（默认以本 PRD + 用户输入为准）
|
|
201
199
|
|
|
202
200
|
#### 维度 3: 范围与用户要求一致
|
|
203
201
|
|
|
@@ -222,7 +220,7 @@
|
|
|
222
220
|
- [ ] **`prd.md` 文首**含指向本目录原型入口（默认 `./prototype.html`）的 **Markdown 相对链接**，可点击打开（见 `SKILL.md`「PRD 与原型互链」）
|
|
223
221
|
- [ ] 原型展示的模块、字段、主流程与 `prd.md` 无矛盾
|
|
224
222
|
- [ ] 承诺可点的交互在原型中可用；未承诺的不宜过度「假实现」以免误导
|
|
225
|
-
- [ ]
|
|
223
|
+
- [ ] 与用户在对话或附件中确认的文案、枚举、状态一致；与 **`prd.md`** 前文一致
|
|
226
224
|
- [ ] **标注弹框**内容与 `prd.md` 章节对应正确，且与业务弹窗在视觉上可区分
|
|
227
225
|
|
|
228
226
|
**核对结果处理**：
|
|
@@ -238,13 +236,13 @@
|
|
|
238
236
|
|
|
239
237
|
A: 选择最主要的功能类型作为主模板，其他类型的功能可以在对应模块中详细描述。
|
|
240
238
|
|
|
241
|
-
### Q: spec.md
|
|
239
|
+
### Q: 仓库里没有 `spec.md` 怎么办？
|
|
242
240
|
|
|
243
|
-
A:
|
|
241
|
+
A: **正常情况**。本技能默认以 **`prd.md`**（及可选 **`prototype.html`**）为交付与权威载体；若有其它规格文件，以用户给出的路径为准读取，不要求也不假设存在 `spec.md`。
|
|
244
242
|
|
|
245
|
-
### Q:
|
|
243
|
+
### Q: 没有现成页面代码、也没有截图等产物怎么办？
|
|
246
244
|
|
|
247
|
-
A:
|
|
245
|
+
A: 以**用户口述范围** + 对应类型 **`examples/`** 为骨架生成首版 **`prd.md`**；技术细节处标注「待研发确认」或「假设」。若后续补充实现或截图，再迭代 PRD/原型。不要求先「新建 spec.md」才能开工。
|
|
248
246
|
|
|
249
247
|
### Q: 用户要求修改已生成的 PRD 怎么办？
|
|
250
248
|
|
|
@@ -252,7 +250,7 @@ A: 了解用户的具体修改需求，重新执行 Step 4 和 Step 5。
|
|
|
252
250
|
|
|
253
251
|
### Q: 原型与 PRD 应该以哪个为准？
|
|
254
252
|
|
|
255
|
-
A:
|
|
253
|
+
A: **`prd.md` 为需求正文权威**；**`prototype.html`** 用于走查与对齐视觉/动线。若二者不一致，以 **`prd.md`** 为准并回改原型；若用户另行指定附件规格，以用户指定为准并回写 PRD。
|
|
256
254
|
|
|
257
255
|
### Q: 页面非常复杂，一个模板不够用怎么办？
|
|
258
256
|
|
|
@@ -262,8 +260,8 @@ A: 可以将页面拆分为多个模块，每个模块使用合适的子模板
|
|
|
262
260
|
|
|
263
261
|
## 最佳实践
|
|
264
262
|
|
|
265
|
-
1.
|
|
266
|
-
2.
|
|
263
|
+
1. **先读再写**：若同目录已有 **`prd.md` / `prototype.html`**，先读完再生成或改版
|
|
264
|
+
2. **保持客观**：只描述用户确认或材料中可见的功能，不添加主观臆测
|
|
267
265
|
3. **注重细节**：字段定义、校验规则等细节要准确
|
|
268
266
|
4. **核对再交付**：一定要经过一致性核对后再交付
|
|
269
267
|
5. **持续改进**：根据用户反馈不断优化生成质量
|
|
@@ -24,6 +24,7 @@ import { ElButton, ... } from '@deppon/deppon-ui';
|
|
|
24
24
|
## 基础用法
|
|
25
25
|
|
|
26
26
|
- `v-model` 绑定 `ref` 布尔值；`title`、`width`；可选 `draggable`。
|
|
27
|
+
- 可选 **`resizable`**：拖动四边或四角边框缩放弹窗（含上、左、左上角等）；可配 `resize-min-width`、`resize-min-height`、`resize-max-width`、`resize-max-height`（单位 px 或 %）。
|
|
27
28
|
- 底部按钮放在 `<template #footer>`。
|
|
28
29
|
|
|
29
30
|
## 表单弹窗（常见模式）
|