@deppon/deppon-skills 2.4.23 → 2.5.3
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.
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
name: deppon-prd-generator
|
|
3
3
|
description: >-
|
|
4
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
|
|
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,7 +10,7 @@ description: >-
|
|
|
10
10
|
|
|
11
11
|
## Overview
|
|
12
12
|
|
|
13
|
-
基于用户在对话中给出的功能范围,以及(若有)页面实现代码、截图、零散说明文档等**可选**材料,智能识别页面类型并匹配对应模板,生成面向研发和测试人员的结构化产品需求文档(**`prd.md`**)。在用户需要「可演示、可点」的需求载体时,**同目录**补充 **HTML + Tailwind CSS** 的高保真交互原型(**`prototype.html`**,免构建优先),便于评审与对标实现。**后台单页**原型默认不含侧栏顶栏;需整站管理台导航时见下文「单页原型与壳层主页导航」与「壳层与子页目录约定」(**壳层根 + `pages/<子>/` 各含 `prd.md` + `index.html`**);其中**壳层仓库根目录**须命名为 **`src/prototypes/<项目 slug>/`**(**项目/产品**英文名,与子页 `pages/<功能名>/`
|
|
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
|
|
|
@@ -23,6 +23,15 @@ description: >-
|
|
|
23
23
|
- 按本技能产出或改写 **`prd.md`、`prototype.html`**(及壳层 `pages/*.html` 等)时,**必须**遵守上文「语言与文案」:业务侧可见表述用**简体中文**;不得在无用户要求时用英文写菜单、按钮、表头、空态、Toast 等(接口名、枚举、包名、代码路径可保留英文)。
|
|
24
24
|
- 用户明确要求外文/双语时,从其约定。
|
|
25
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**(如纯内部草稿、不外发);须在文首引用块或「文档说明」中交代豁免原因。
|
|
34
|
+
|
|
26
35
|
## PRD 与原型互链
|
|
27
36
|
|
|
28
37
|
- 当同目录**已存在**或本次**一并交付**可交互原型入口文件(默认可为 **`prototype.html`**;子页推荐 **`index.html`** 与壳层 `prototype.html` 区分)时,`prd.md` **文首须在标题后第一段或「文档说明」引用块内**,加入 **Markdown 相对链接**指向该入口文件,例如:`- **交互原型**:[打开 prototype.html](./prototype.html)` 或子页 `- **交互原型**:[打开 index.html](./index.html)`。
|
|
@@ -32,14 +41,19 @@ description: >-
|
|
|
32
41
|
|
|
33
42
|
## DP-IT 对外交付命名(JoySpace / 附件 / 文首 H1)
|
|
34
43
|
|
|
35
|
-
###
|
|
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
|
+
### 补充触发(须逐字对齐样例或知识库用语)
|
|
36
51
|
|
|
37
|
-
|
|
52
|
+
满足**任一**时,除落实 H1 外,须在对话或「修订记录」中写清批次与归档口径;用户给出**固定 H1 样例**(如 `DP-IT-20260520-产品折扣列表-用户需求说明书(PRD)`)时,**分段规则从其逐字**,不得擅自改成「新增事后折…」等**旧式混写**前缀(除非用户声明兼容历史命名):
|
|
38
53
|
|
|
39
|
-
- 用户显式提到:**DP-IT**、**JoySpace**、**对外附件名**、**用户需求说明书(PRD)**、**待排期 /
|
|
40
|
-
- 用户给出**固定 H1 样例**(如 `DP-IT-20260520-产品折扣列表-用户需求说明书(PRD)`)——**从其逐字**对齐分段规则,不得擅自改成「新增事后折…」等**旧式混写**前缀(除非用户声明兼容历史命名)。
|
|
54
|
+
- 用户显式提到:**DP-IT**、**JoySpace**、**对外附件名**、**用户需求说明书(PRD)**、**待排期 / 已梳理待排期**、与知识库**批次文件夹**对齐等。
|
|
41
55
|
|
|
42
|
-
**壳层根 `prd.md`**:若用户**未**要求根文档也用 DP-IT,可继续使用**产品/项目级**中文标题(如「产品定价中心 · 管理台壳层 PRD
|
|
56
|
+
**壳层根 `prd.md`**:若用户**未**要求根文档也用 DP-IT,可继续使用**产品/项目级**中文标题(如「产品定价中心 · 管理台壳层 PRD」);须在子页索引中能通过**链接文字或括号内全名**区分各子页对外标题。**无壳层单页**文首 H1 为完整 DP-IT 串,仓库路径仍可为 `src/prototypes/<page-name>/prd.md`(见「输出路径」)。
|
|
43
57
|
|
|
44
58
|
### 格式(须逐字一致的结构)
|
|
45
59
|
|
|
@@ -47,7 +61,7 @@ description: >-
|
|
|
47
61
|
|
|
48
62
|
- **`DP-IT`**:固定前缀(德邦 IT 需求类标识),**全大写**,后接英文连字符 **`-`**(**半角**)。
|
|
49
63
|
- **`YYYYMMDD`**:需求**批次 / 定点日期**(8 位数字,**公历**);与知识库目录「**`N月D号` 小需求**」对齐时,取该日的 `YYYYMMDD`(例:2026 年 5 月 20 日定点 → **`20260520`**)。**禁止**用 `2026-05-20`、`2026052` 等变体替代本段。
|
|
50
|
-
- **`<主题简名>`**:**简体中文**,2~20 字为宜,与菜单/模块名一致、**可独立区分需求**;**推荐**与 `pages/<子页目录>/` **语义对齐**(例:`product-discount-list` → **`产品折扣列表`**,`workbench-home` → **`工作台首页`**)。**禁止**用 **`prd`**、**「列表」单字**、与批次内另一子页无法区分的泛称作为主题。
|
|
64
|
+
- **`<主题简名>`**:**简体中文**,2 ~ 20 字为宜,与菜单/模块名一致、**可独立区分需求**;**推荐**与 `pages/<子页目录>/` **语义对齐**(例:`product-discount-list` → **`产品折扣列表`**,`workbench-home` → **`工作台首页`**)。**禁止**用 **`prd`**、**「列表」单字**、与批次内另一子页无法区分的泛称作为主题。
|
|
51
65
|
- **`-用户需求说明书(PRD)`**:固定后缀;**整段字面**须一致,其中 **`(PRD)`** 为大写英文括号。
|
|
52
66
|
|
|
53
67
|
**字符与分隔符(自检)**:全名中业务可中文,但 **段与段之间只用 `-` 连接**;**禁止**在 `DP-IT` 与日期之间、日期与主题之间插入空格或下划线;**禁止**省略 `-用户需求说明书(PRD)` 任一段。
|
|
@@ -83,9 +97,10 @@ description: >-
|
|
|
83
97
|
|
|
84
98
|
### 执行清单(Step 4 / Step 5 勾选)
|
|
85
99
|
|
|
86
|
-
- [ ]
|
|
100
|
+
- [ ] 每个**业务子页 / 无壳层单页**(及未声明豁免的同类 `prd.md`)**第一个 `#`** 已为完整 `DP-IT-…-(PRD)` 串;
|
|
87
101
|
- [ ] 日期 8 位、主题中文可区分、分隔符全为 `-`、无多余空格;
|
|
88
102
|
- [ ] 壳层根标题策略与用户要求一致(根 DP-IT 或产品级二选一且已写清);
|
|
103
|
+
- [ ] 用户声明豁免 DP-IT 的文档,文首已注明原因;
|
|
89
104
|
- [ ] 对外导出若需上传,文件名与 H1 一致(`.md`)。
|
|
90
105
|
|
|
91
106
|
## When to Use
|
|
@@ -94,7 +109,7 @@ description: >-
|
|
|
94
109
|
- 用户需要将已实现的页面转化为 PRD 文档时
|
|
95
110
|
- 用户需要基于已有 **`prd.md`** 改版、增补章节或与 **`prototype.html`** 对齐时
|
|
96
111
|
- 用户要求 **HTML / Tailwind CSS / 高保真原型 / 可交互原型 / 静态 demo** 与 PRD 一并或单独交付时
|
|
97
|
-
- 用户要求 **JoySpace / 对外附件名 / DP-IT / 用户需求说明书(PRD)**
|
|
112
|
+
- 用户要求 **JoySpace / 对外附件名 / DP-IT / 用户需求说明书(PRD)** 等与文首或归档命名强相关表述时(须在「**DP-IT 对外交付命名**」基础上核对导出文件名与修订记录)
|
|
98
113
|
|
|
99
114
|
## Template Types
|
|
100
115
|
|
|
@@ -205,7 +220,7 @@ description: >-
|
|
|
205
220
|
| `user-frontend-prd-template.md`(C 端 / 活动页) | `examples/user-frontend/` |
|
|
206
221
|
| `app-shell-navigation-prd-template.md`(壳层 + 多页 hub) | `examples/app-shell-navigation/` |
|
|
207
222
|
|
|
208
|
-
**后台「XX列表 / XX管理」默认识别(执行者须遵守)**:用户未写明「只读」「仅查询」「无编辑/删除」「纯台账」「无弹层 CRUD」时,**默认按含完整 CRUD** 生成 PRD 与可交互原型:章节与演示路径须对照 **`examples/list-crud/`**(筛选 + 列表 + **查看详情** + **新增/编辑表单弹层** + **删除确认** + 行内状态等)。**仅**在用户或 PRD **明确收窄**为无新建/编辑/删除、仅筛选分页导出时,才改用 **`examples/backend-list/`** 粒度。
|
|
223
|
+
**后台「XX 列表 / XX 管理」默认识别(执行者须遵守)**:用户未写明「只读」「仅查询」「无编辑/删除」「纯台账」「无弹层 CRUD」时,**默认按含完整 CRUD** 生成 PRD 与可交互原型:章节与演示路径须对照 **`examples/list-crud/`**(筛选 + 列表 + **查看详情** + **新增/编辑表单弹层** + **删除确认** + 行内状态等)。**仅**在用户或 PRD **明确收窄**为无新建/编辑/删除、仅筛选分页导出时,才改用 **`examples/backend-list/`** 粒度。
|
|
209
224
|
|
|
210
225
|
### 单页原型与壳层主页导航(默认策略,执行者须遵守)
|
|
211
226
|
|
|
@@ -254,9 +269,19 @@ src/prototypes/<项目 slug>/ # 例:product-pricing-console(项目
|
|
|
254
269
|
|
|
255
270
|
- **壳层 `prd.md` 文首**:含 `[打开 prototype.html](./prototype.html)`;另起列表项给出各子页 **`[子页 A PRD](./pages/<a>/prd.md)`**、**`[子页 A 原型](./pages/<a>/index.html)`**;HTTP 打开说明中的路径须写 **`src/prototypes/<项目 slug>/`**,与子页 `prd.md` 内「打开本目录」说明一致。
|
|
256
271
|
- **子页 `prd.md` 文首**:含指向本子页入口 HTML 的相对链接(如 `[打开 index.html](./index.html)`)。
|
|
257
|
-
- **子页 `prd.md` H1(DP-IT
|
|
272
|
+
- **子页 `prd.md` H1(DP-IT)**:子页文首 **`#`** **必须**为「**DP-IT 对外交付命名**」规定的**完整 DP-IT 一行标题**(见「**本技能对执行者的硬性要求(文首 H1 / DP-IT)**」与豁免条款),不得用「XX 功能 PRD(产品需求文档)」等泛化 H1;仓库路径仍为 `pages/<子页>/prd.md`。
|
|
258
273
|
- **禁止**:将壳层与子页业务混在同一篇根 `prd.md` 却不为子页单独建 `prd.md`(除非用户明确要求单文件 PRD,须在文档中声明例外);将子页 HTML 全部平铺为 `pages/*.html` 而无子目录(**新建交付默认不允许**,旧存量可渐进迁移)。
|
|
259
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`**;是否更新根壳层以该次用户说明为准(**最小必要**澄清冲突需求)。
|
|
284
|
+
|
|
260
285
|
## HTML + Tailwind CSS 高保真可交互原型
|
|
261
286
|
|
|
262
287
|
在 PRD 之外或用户明确要求时,输出**单文件或可合并的少量 HTML**,用 **Tailwind CSS** 还原布局与视觉层级,用 **原生 JavaScript**(无框架依赖)实现 PRD 中需要演示的交互,做到「能点开、能切换状态」,而非纯截图式静态页;**高保真交付须带 PRD 标注弹框**(见下文技术约定第 8 ~ 10 条)。
|
|
@@ -267,14 +292,14 @@ src/prototypes/<项目 slug>/ # 例:product-pricing-console(项目
|
|
|
267
292
|
2. **结构**:语义化 HTML5(`main`、`nav`、`section`、`button` 等);关键交互控件使用 `type="button"`,避免误提交。
|
|
268
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*`。
|
|
269
294
|
4. **日期与时间控件(表单 / 筛选,默认)**:
|
|
270
|
-
-
|
|
271
|
-
-
|
|
272
|
-
-
|
|
273
|
-
-
|
|
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 表格「类型」列写 **日期范围(双控件)** 而非泛称「文本」。
|
|
274
299
|
5. **保真**:
|
|
275
|
-
-
|
|
276
|
-
-
|
|
277
|
-
-
|
|
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` 放在左侧标题旁,导致与「新建」物理分离、违背走查习惯。
|
|
278
303
|
6. **无障碍(简要)**:可聚焦控件有可见焦点样式;弹层打开时焦点管理、必要处加 `aria-expanded` / `aria-modal` / `role`。
|
|
279
304
|
7. **与 PRD 对齐**:文件顶部 HTML 注释注明对应 **`prd.md` 路径**(根壳层或 `pages/<子页>/prd.md`)。**双向导航**:根 `prd.md` 链 `./prototype.html` 与各子页 `prd`/入口 HTML;子页 `prd.md` 链本子页 `./index.html`。壳层场景下「同目录 `prd.md`」对根指根 PRD,对子页指**该子目录内** `prd.md`。
|
|
280
305
|
8. **PRD 标注弹框(高保真原型必含,与业务弹窗区分)**:
|
|
@@ -283,16 +308,17 @@ src/prototypes/<项目 slug>/ # 例:product-pricing-console(项目
|
|
|
283
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/页眉区代替筛选卡标题行;**禁止**与筛选底栏「查询 / 重置」混在同一行替代本标题行。
|
|
284
309
|
- **筛选区底部**:查询、重置等主操作为一行时,使用 **`mt-4 flex flex-wrap gap-2`**,自**左**起排列;**禁止**整行 **`justify-end`** 把查询/重置顶到最右。
|
|
285
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,原型须可点对应标注)。
|
|
286
|
-
- **表格操作列**:与示例 `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 等替代操作列内的走查位。
|
|
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 等替代操作列内的走查位。
|
|
287
312
|
- **业务弹层标题行**:**`flex flex-wrap items-start justify-between gap-2`**,**`h3` 在左**,**单个** `anno-trigger`(`shrink-0`)在该行**右侧**与标题相对;底栏仅排业务按钮。
|
|
288
313
|
- **形态**:在**主要功能区块**(如筛选区、列表区、工具栏、关键业务弹窗内等)旁放置触发器(推荐文案「PRD §x.x」「标注」或 `?` 图标按钮,`type="button"`);点击打开**独立标注弹框**——标题区须明显区别于业务弹窗(推荐小标签「需求标注」+ 琥珀/紫色调或左侧色条)。正文可为**要点摘要**(2 ~ 5 条),**或**(推荐)按第 10 条从同目录 `prd.md` **切片渲染**对应章节全文(含表格),长文须在弹层内可滚动。
|
|
289
314
|
- **内容至少包含**:① 对应 `prd.md` 的**章节号与标题**(体现在弹层标题或首段);② **摘要模式**:2 ~ 5 条要点、验收注意或字段规则;**或切片模式(第 10 条)**:正文为切片内 PRD 原文(表格/列表以渲染结果为准);③ 可选:「待后端确认 / 与现网差异」一句。
|
|
290
315
|
- **交互与无障碍**:`role="dialog"`、`aria-modal="true"`、`aria-labelledby`;支持 **ESC**、遮罩点击、明确关闭按钮;**z-index** 须高于同页业务弹层(避免被详情/表单盖住),或与业务层分层约定一致。
|
|
291
316
|
- **禁止**:不要用标注弹框承载真实表单提交;不要与业务弹窗共用同一 DOM id。
|
|
292
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` 是否套窄宽**。
|
|
293
319
|
9. **主按钮与主题色(原型)**:
|
|
294
|
-
-
|
|
295
|
-
-
|
|
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 中性色组合);**须与示例一致**,不得另起一套主色以「适配个人习惯」。
|
|
296
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`。
|
|
297
323
|
|
|
298
324
|
### 输出路径
|
|
@@ -306,7 +332,7 @@ src/prototypes/<项目 slug>/ # 例:product-pricing-console(项目
|
|
|
306
332
|
|
|
307
333
|
### Step 1: 输入与现状分析
|
|
308
334
|
|
|
309
|
-
1.
|
|
335
|
+
1. 确认产出目录、页面类型线索与用户声明的功能范围。**若用户 `@` 或写出既有 `src/prototypes/<项目 slug>/pages/`**:新交付物**归入该 `<项目 slug>`**,并计划更新根 `prd.md` 与 `prototype.html`(见「归入既有 `pages/` 项目」)。
|
|
310
336
|
2. **若同目录已有交付物**:读取 **`prd.md`**;若存在 **`prototype.html`** 则一并读取(用于迭代、对齐标注与互链)。
|
|
311
337
|
3. **若用户提供了页面实现**:读取其给出的路径(如 `*.vue`、`*.tsx` 等),**不假设**固定为 `index.tsx`。
|
|
312
338
|
4. **可选材料(有则读)**:产品/技术说明类 Markdown、截图、接口文档等;**不假设**存在固定文件名的 `spec.md`、`content.md` 或 `screenshot.png`。
|
|
@@ -332,7 +358,7 @@ src/prototypes/<项目 slug>/ # 例:product-pricing-console(项目
|
|
|
332
358
|
- 用户仅说「生成 PRD / 写 PRD / PRD 文档」等:**只交付 `prd.md`**,**不**生成 `prototype.html`,也**禁止**在回复末尾追问「要不要带原型 / HTML / Tailwind」。
|
|
333
359
|
- 用户话里已出现 **原型、HTML、Tailwind、高保真、可交互 demo、prototype** 等且与 PRD 一并提出:**直接执行 Step 4 + Step 4b**,无需再确认是否要做原型。
|
|
334
360
|
- 用户话里已出现 **侧栏、顶栏、壳层、主页、工作台、管理台布局、ProLayout、整站后台、iframe 文档中心、多页导航** 等与壳层强相关表述:Step 4 须写**根壳层 `prd.md`**(按 `app-shell-navigation-prd-template.md`)+ **各子页目录内 `prd.md`**;Step 4b **必须**交付根 `prototype.html` + **`pages/<子页>/index.html`**(见「壳层与子页目录约定」),**禁止**仅用单业务页冒充,**禁止**新建时把子页全堆成 `pages/*.html` 而无子目录(除非用户明确声明采用平铺旧式)。
|
|
335
|
-
- 用户话里已出现 **DP-IT、JoySpace、对外附件名、用户需求说明书(PRD)、待排期 / 已梳理待排期** 等:Step 4 须在适用 `prd.md`
|
|
361
|
+
- 用户话里已出现 **DP-IT、JoySpace、对外附件名、用户需求说明书(PRD)、待排期 / 已梳理待排期** 等:Step 4 须在适用 `prd.md` **额外**核对「**DP-IT 对外交付命名**」中的**对外文件名**与修订记录;**不**因此自动要求 Step 4b(仍以是否出现原型关键词为准)。**注意**:业务子页 / 无壳层单页 H1 的 DP-IT 格式见「**默认强制范围**」,**不依赖**用户是否说出上述关键词。
|
|
336
362
|
|
|
337
363
|
### Step 4: PRD 生成
|
|
338
364
|
|
|
@@ -341,7 +367,7 @@ src/prototypes/<项目 slug>/ # 例:product-pricing-console(项目
|
|
|
341
367
|
3. 从用户范围说明、(若有)实现代码与(若有)同目录既有 **`prd.md` / `prototype.html`** 中提取与归纳信息
|
|
342
368
|
4. 填充模板内容
|
|
343
369
|
5. **若同目录已有或可交付 `prototype.html`(或约定的原型主文件名)**:在 `prd.md` 文首加入指向该文件的 Markdown 相对链接(见「PRD 与原型互链」);仅无原型时不写死链接
|
|
344
|
-
6.
|
|
370
|
+
6. **文首 H1(DP-IT)**:写入**业务子页**或**无壳层单页** `prd.md` 时,**必须**落实「**DP-IT 对外交付命名**」完整 **H1**、**`YYYYMMDD`** 与 **`<主题简名>`**(含豁免与壳层根例外,见「**本技能对执行者的硬性要求(文首 H1 / DP-IT)**」与「**默认强制范围**」);根壳层 `prd.md` 标题策略按「**壳层根 `prd.md`**」执行
|
|
345
371
|
7. 保存 PRD:**无壳层**时为 `src/prototypes/<page-name>/prd.md`;**有壳层**时根目录 `prd.md` 为壳层文档,**各子页业务 PRD** 写入 `src/prototypes/<项目 slug>/pages/<子页目录>/prd.md`(见「壳层与子页目录约定」)
|
|
346
372
|
|
|
347
373
|
### Step 4b: 高保真原型生成(可选)
|
|
@@ -365,17 +391,17 @@ src/prototypes/<项目 slug>/ # 例:product-pricing-console(项目
|
|
|
365
391
|
- ✅ 无遗漏核心内容
|
|
366
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 打开与兜底约定
|
|
367
393
|
- ✅ **语言**:未约定外文时,PRD 与原型用户可见文案为简体中文,与「语言与文案」「本技能对执行者的硬性要求」一致
|
|
368
|
-
-
|
|
394
|
+
- ✅ **文首 H1(DP-IT)**:每个**业务子页 / 无壳层单页** `prd.md`(及未声明豁免者)文首 **第一个 `#`** 为完整 `DP-IT-YYYYMMDD-<主题简名>-用户需求说明书(PRD)`;**`YYYYMMDD` 为 8 位数字**、段间仅 **`-`**、无首尾空格;**壳层根** `prd.md` 是否 DP-IT 与该节「壳层根」一致;豁免文档文首已注明原因;子页索引与对外 `.md` 文件名建议与该节「执行清单」一致
|
|
369
395
|
- ✅(若目录存在 `prototype.html` 等原型入口)`prd.md` 文首含有效的 Markdown **相对链接**指向该文件,与「PRD 与原型互链」一致;或已明确声明本期无原型
|
|
370
396
|
- ✅ 若用户或 PRD 要求**管理台壳层 / 主页导航**:存在根 `prototype.html`、根壳层 `prd.md`、**`pages/<子页>/prd.md` + `index.html`**(默认目录结构),且根 PRD 含菜单树与 iframe 路径索引;**不得**仅交付无导航的单业务页;**不得**在新建场景下省略子页独立 `prd.md`;**壳层项目根目录**须为 **`src/prototypes/<项目 slug>/`**(与「壳层与子页目录约定」中**项目目录命名**一致),**禁止**用单一菜单页名作为项目根且与子页目录同名叠套
|
|
371
|
-
-
|
|
397
|
+
- ✅ 若用户指明**归入既有** **`pages/`**:已更新该 **`src/prototypes/<项目 slug>/`** 下根 **`prd.md`** 与子页索引、根 **`prototype.html`**(菜单 / 页签 / `iframe` 路径兜底),且无多余并列项目根目录,与「归入既有 `pages/` 项目」一致
|
|
372
398
|
|
|
373
399
|
如有不一致,返回 Step 4(及 4b)重新生成。
|
|
374
400
|
|
|
375
401
|
## Rules
|
|
376
402
|
|
|
377
403
|
1. **路径规范**:无壳层时 PRD 为 `src/prototypes/<page-name>/prd.md`。**有壳层时**:根为 **`src/prototypes/<项目 slug>/prd.md`**(`<项目 slug>` 须遵守「壳层与子页目录约定 · **项目目录命名**」),每子页为 **`src/prototypes/<项目 slug>/pages/<子页目录>/prd.md`**(见「壳层与子页目录约定」)
|
|
378
|
-
2. **命名规范**:仓库内文件 **`prd.md`** 小写不变;壳层默认可交互入口为 **`prototype.html`**;iframe 子页默认可交互入口为 **`pages/<子页目录>/index.html`**(与根 `prototype.html` 区分);用户约定其他主文件名时从其约定并在 `prd.md`
|
|
404
|
+
2. **命名规范**:仓库内文件 **`prd.md`** 小写不变;壳层默认可交互入口为 **`prototype.html`**;iframe 子页默认可交互入口为 **`pages/<子页目录>/index.html`**(与根 `prototype.html` 区分);用户约定其他主文件名时从其约定并在 `prd.md` 写清链接。**业务子页 / 无壳层单页**文首 **H1** **必须**按「**DP-IT 对外交付命名**」全文(豁免与壳层根例外见该节),**不因**仓库仍叫 `prd.md` 而省略 DP-IT 段。
|
|
379
405
|
3. **术语与语言**:使用研发/测试通用术语;须遵守「语言与文案」及「本技能对执行者的硬性要求(语言)」,**默认简体中文**撰写 PRD 与原型可见文案
|
|
380
406
|
4. **范围约束**:用户指定范围时,不超出范围
|
|
381
407
|
5. **必须核对**:生成后必须进行一致性核对
|
|
@@ -385,7 +411,8 @@ src/prototypes/<项目 slug>/ # 例:product-pricing-console(项目
|
|
|
385
411
|
9. **壳层默认不隐含**:单一业务页默认**不含**侧栏顶栏;用户明确要求壳层时,**必须**按 `app-shell-navigation-prd-template.md` 与 `examples/app-shell-navigation/` 交付,见「单页原型与壳层主页导航」与「壳层与子页目录约定」
|
|
386
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 表交付却声称完整列表页。
|
|
387
413
|
11. **后台列表默认 CRUD**:见上文「内置参考示例」表下说明及 **Step 2**「列表、筛选、分页」分支;未明确只读/纯查询时,PRD 与原型须覆盖 **查看详情、新建/编辑(弹层或路由)、删除(确认)** 等主路径,并与 `examples/list-crud/` 粒度一致。
|
|
388
|
-
12. **DP-IT
|
|
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/` 项目」)。
|
|
389
416
|
|
|
390
417
|
## Example Usage
|
|
391
418
|
|
|
@@ -395,14 +422,14 @@ src/prototypes/<项目 slug>/ # 例:product-pricing-console(项目
|
|
|
395
422
|
1. 读取用户给出的范围与(若有)实现路径;若 `src/prototypes/data-search/` 下已有 prd.md / prototype.html 则先读再改
|
|
396
423
|
2. 识别为数据看板类
|
|
397
424
|
3. 应用 data-prd-template.md
|
|
398
|
-
4. 生成或更新 src/prototypes/data-search/prd.md
|
|
399
|
-
5.
|
|
425
|
+
4. 生成或更新 src/prototypes/data-search/prd.md(**无壳层单页**:文首 **`#`** 须为 `DP-IT-YYYYMMDD-<主题简名>-用户需求说明书(PRD)`,日期与主题按用户批次与页面语义)
|
|
426
|
+
5. 核对一致性(含 DP-IT H1,见 Step 5)
|
|
400
427
|
```
|
|
401
428
|
|
|
402
429
|
```
|
|
403
430
|
用户:生成合同详情页的 PRD,并给一个 HTML+Tailwind 可点的原型
|
|
404
431
|
→ 执行:
|
|
405
|
-
1. 同上生成或更新 prd.md
|
|
432
|
+
1. 同上生成或更新 prd.md(文首 **`#`** 须为完整 DP-IT 行,见「DP-IT 对外交付命名」)
|
|
406
433
|
2. Step 4b:生成 src/prototypes/contract-detail/prototype.html(Tailwind CDN + 分区布局 + Tab/弹层等 mock 交互 + PRD 标注弹框)
|
|
407
434
|
3. 核对 PRD、原型、(若有)实现与用户范围 一致
|
|
408
435
|
```
|
|
@@ -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
|
## 表单弹窗(常见模式)
|