@deppon/deppon-skills 2.4.15 → 2.4.18

package/dist/deppon-npm-skills/SKILL.md

@@ -30,17 +30,18 @@ description: >-
 | 单元格可编辑表                        | `deppon-pro-table-cell-editable`    | 同上                                              |
 | 行编辑 `row-edit`                     | `deppon-pro-table-row-edit`         | 同上                                              |
 | 非 fixed、自定义表头区、滚动容器      | `deppon-pro-table-nofixed-scroll`   | 同上                                              |
-| 独立查询 Form + Table + 底部编辑 Form | `deppon-pro-page-crud`              | 同上                                              |
+| 独立查询 Form + Table + 底部/弹窗实体 Form | `deppon-pro-page-query-table-form` | 同上（非表格内单元格编辑）                        |
+| 新建 / 详情 / 工作流 **同页三态**（`query.sourceType`、多套底栏、子表 row-edit 切换） | `deppon-pro-page-insert-detail-workflow` | 同上                                              |
 | ProDialog、表单弹窗、自定义 body      | `deppon-pro-dialog`                 | 同上                                              |
 | ElCard / Button / Message 基础用法    | `deppon-ui-examples-primitives`     | `@deppon/deppon-ui`                               |
 | depponPush、viewTab、路由参数         | `deppon-router-push-viewtab`        | `@deppon/deppon-router`，常配合 `vue-router`      |
 | 请求封装与错误结构                    | `deppon-request-package-demo`       | `@deppon/deppon-request`                          |
-| 产品 PRD + 原型实现蓝图（映射到上表） | `deppon-npm-prd`                    | 文档输出；落地时依赖上表包                        |
+| 产品 PRD + 可选 HTML+Tailwind 可交互原型 + 实现蓝图（映射到上表） | `deppon-prd-generator`              | `prd.md` / `prototype.html`；落地时依赖上表包     |
 
 ## 选用专项 Skill（与上表一致，便于 @ 引用）
 
 -   私有 registry 与包文档：`deppon-npm-private-registry`
--   产品 PRD + 蓝图：`deppon-npm-prd`
+-   产品 PRD + 蓝图：`deppon-prd-generator`
 -   表单单页：`deppon-pro-form`
 -   表单分组/多表单：`deppon-pro-form-group`
 -   高级客户类表单：`deppon-pro-form-advanced-customer`
@@ -52,7 +53,8 @@ description: >-
 -   单元格可编辑：`deppon-pro-table-cell-editable`
 -   行编辑：`deppon-pro-table-row-edit`
 -   非 fixed + 自定义头：`deppon-pro-table-nofixed-scroll`
--   查询条+表+编辑：`deppon-pro-page-crud`
+-   查询条+表+底部/弹窗实体表单：`deppon-pro-page-query-table-form`（旧名 `deppon-pro-page-crud`）
+-   新建+详情+工作流同页三态：`deppon-pro-page-insert-detail-workflow`
 -   弹窗：`deppon-pro-dialog`
 -   单字段：`deppon-pro-field`
 -   布局壳：`deppon-pro-layout-page`
@@ -63,6 +65,6 @@ description: >-
 ## Agent 工作方式
 
 0. 外仓或未确认依赖时：先 **`deppon-npm-private-registry`**，再生成代码。
-1. 需求对标：用本表选 **专项 skill**；需要长文档时用 **`deppon-npm-prd`**。
+1. 需求对标：用本表选 **专项 skill**；需要长文档时用 **`deppon-prd-generator`**。
 2. 实现时：**以消费者项目内 `node_modules/@deppon/*` 的 README 与 `*.d.ts` 为准**；不要默认读取 `deppon-npm` 的 `site/src/views/examples`，除非用户当前工作区就是该 monorepo 并明确要求对齐 demo。
 3. `import` 路径与 peer 依赖版本遵守各包 README。

package/dist/deppon-prd-generator/SKILL.md

@@ -0,0 +1,210 @@
+---
+name: deppon-prd-generator
+description: >-
+    基于页面实现、spec.md文档和功能范围，匹配指定模板类型生成面向研发测试的结构化PRD；并可选用 HTML + Tailwind CSS
+    产出高保真、可点击交互的静态原型（单页优先），原型须含 PRD 标注弹框与文档章节对齐，与 PRD 一致性核对。
+    在用户 @deppon-prd-generator、@prd、生成 PRD、HTML 原型、Tailwind 原型 时应用。
+---
+
+# deppon-prd-generator（PRD + 可选高保真原型）
+
+## Overview
+
+基于页面实现代码、spec.md 规格文档及用户指定的功能范围，智能识别页面类型并匹配对应模板，生成面向研发和测试人员的结构化产品需求文档（PRD）。在用户需要「可演示、可点」的需求载体时，**同目录**补充 **HTML + Tailwind CSS** 的高保真交互原型（免构建优先），便于评审与对标实现。
+
+## When to Use
+
+-   用户明确要求生成 PRD 文档时
+-   用户需要将已实现的页面转化为 PRD 文档时
+-   用户需要根据 spec.md 生成正式 PRD 时
+-   用户要求 **HTML / Tailwind CSS / 高保真原型 / 可交互原型 / 静态 demo** 与 PRD 一并或单独交付时
+
+## Template Types
+
+### 1. 数据看板类 (data-prd-template.md)
+
+**适用场景**：
+
+-   数据统计看板
+-   报表分析页面
+-   指标监控页面
+
+**重点内容**：
+
+-   指标定义和数据口径
+-   数据来源说明
+-   筛选条件
+-   图表说明
+-   交互规则
+
+### 2. 后台列表类 (backend-list-prd-template.md)
+
+**适用场景**：
+
+-   数据列表管理页面
+-   查询列表页面
+-   台账管理页面
+
+**重点内容**：
+
+-   筛选条件
+-   列表字段定义
+-   排序规则
+-   分页规则
+-   批量操作
+-   行操作
+
+### 3. 后台表单编辑类 (backend-form-edit-prd-template.md)
+
+**适用场景**：
+
+-   新增/编辑表单页面
+-   配置管理页面
+-   数据录入页面
+
+**重点内容**：
+
+-   字段定义
+-   字段校验规则（必填、长度、格式）
+-   默认值
+-   字段联动逻辑
+-   提交规则
+
+### 4. 后台表单预览类 (backend-form-preview-prd-template.md)
+
+**适用场景**：
+
+-   详情查看页面
+-   预览页面
+-   只读页面
+
+**重点内容**：
+
+-   字段展示规则
+-   数据展示格式
+-   操作按钮
+
+### 5. 用户前台类 (user-frontend-prd-template.md)
+
+**适用场景**：
+
+-   C 端用户页面
+-   营销活动页面
+-   产品展示页面
+
+**重点内容**：
+
+-   用户交互场景
+-   功能触发条件
+-   操作反馈
+-   展示规范
+
+## HTML + Tailwind CSS 高保真可交互原型
+
+在 PRD 之外或用户明确要求时，输出**单文件或可合并的少量 HTML**，用 **Tailwind CSS** 还原布局与视觉层级，用 **原生 JavaScript**（无框架依赖）实现 PRD 中需要演示的交互，做到「能点开、能切换状态」，而非纯截图式静态页；**高保真交付须带 PRD 标注弹框**（见下文技术约定第 7 条）。
+
+### 技术约定
+
+1. **样式**：使用 [Tailwind CSS](https://tailwindcss.com/)（用户口语中的「tailcss」按 Tailwind CSS 理解）。优先 **Play CDN**（页面内 `<script src="https://cdn.tailwindcss.com"></script>`），单 HTML 用浏览器直接打开即可预览，无需本地构建。若用户仓库已集成 Tailwind 构建链，可改为引用构建产物，但须在交付说明中写清如何启动/打开。
+2. **结构**：语义化 HTML5（`main`、`nav`、`section`、`button` 等）；关键交互控件使用 `type="button"`，避免误提交。
+3. **交互**：用少量内联或同文件 `<script>` 实现 Tab、折叠、弹层/抽屉开关、下拉、步骤条、表单校验态、禁用态、空态/加载骨架等；**数据用静态 mock**，接口行为用文字或 toast 模拟即可。
+4. **保真**：对齐 `screenshot.png` 或现有页面：间距、字号、分区、主色/中性色尽量接近；复杂图表可用占位块 + 标注「图表区」而非强行手绘 SVG。
+5. **无障碍（简要）**：可聚焦控件有可见焦点样式；弹层打开时焦点管理、必要处加 `aria-expanded` / `aria-modal` / `role`。
+6. **与 PRD 对齐**：文件顶部 HTML 注释或页面页脚小块文字注明：对应 `prd.md` 的章节/功能范围，避免原型与文档漂移。
+7. **PRD 标注弹框（高保真原型必含，与业务弹窗区分）**：
+    - **目的**：评审/走查时一眼对齐需求，避免原型仅「长得像」却难追溯 PRD。
+    - **形态**：在**主要功能区块**（如筛选区、列表区、工具栏、关键业务弹窗内等）旁放置触发器（推荐文案「PRD §x.x」「标注」或 `?` 图标按钮，`type="button"`）；点击打开**独立标注弹框**——标题区须明显区别于业务弹窗（推荐小标签「需求标注」+ 琥珀/紫色调或左侧色条），正文为**结构化说明**（非长文粘贴全文 PRD）。
+    - **内容至少包含**：① 对应 `prd.md` 的**章节号与标题**；② **2～5 条**需求要点、验收注意或字段规则摘要；③ 可选：「待后端确认 / 与现网差异」一句。
+    - **交互与无障碍**：`role="dialog"`、`aria-modal="true"`、`aria-labelledby`；支持 **ESC**、遮罩点击、明确关闭按钮；**z-index** 须高于同页业务弹层（避免被详情/表单盖住），或与业务层分层约定一致。
+    - **禁止**：不要用标注弹框承载真实表单提交；不要与业务弹窗共用同一 DOM id。
+
+### 输出路径
+
+-   与 PRD 同目录：`src/prototypes/<page-name>/prototype.html`（默认文件名，避免与业务入口 `index.html` 混淆）。
+-   若页面拆成多屏且单文件过长，可拆为 `prototype-list.html`、`prototype-detail.html` 等，并在各文件注释中写明导航关系。
+
+## Workflow
+
+### Step 1: 页面分析
+
+1. 读取目标页面的 `index.tsx`（或主要实现文件）
+2. 读取 `spec.md` 规格文档（如果存在）
+3. 读取 `content.md` 或其他相关文档
+4. 查看 `screenshot.png` 了解页面视觉
+
+### Step 2: 类型识别
+
+基于页面内容自动识别类型：
+
+-   包含大量图表、指标 → 数据看板类
+-   包含列表、筛选、分页 → 后台列表类
+-   包含表单输入、提交 → 后台表单编辑类
+-   只有展示、无输入 → 后台表单预览类
+-   C 端用户界面 → 用户前台类
+
+### Step 3: 需求确认（按需，避免无效追问）
+
+仅在**无法自动识别页面类型**、**功能范围严重不明**或**用户指令自相矛盾**时，做**最小必要**的一两句确认。
+
+**原型（prototype.html）边界（默认遵守，禁止违背）**：
+
+- 用户仅说「生成 PRD / 写 PRD / PRD 文档」等：**只交付 `prd.md`**，**不**生成 `prototype.html`，也**禁止**在回复末尾追问「要不要带原型 / HTML / Tailwind」。
+- 用户话里已出现 **原型、HTML、Tailwind、高保真、可交互 demo、prototype** 等且与 PRD 一并提出：**直接执行 Step 4 + Step 4b**，无需再确认是否要做原型。
+
+### Step 4: PRD 生成
+
+1. 应用对应模板
+2. 从页面实现和 spec.md 中提取信息
+3. 填充模板内容
+4. 保存到 `<project-dir>/src/prototypes/<page-name>/prd.md`
+
+### Step 4b: 高保真原型生成（可选）
+
+在用户**已明确要求**原型（见 Step 3 关键词）时执行；未出现上述要求则跳过本步。
+
+1. 以 PRD 与视觉参考（截图/实现）为清单，划分布局区块与交互点。
+2. 编写 `prototype.html`：Tailwind CDN + 结构 + 样式类 + 演示用 JS；**必须包含 PRD 标注弹框**（见上文「技术约定」第 7 条：分区触发器、独立弹层、章节对照与 z-index）。
+3. 保证主要路径可点通（例如列表 → 详情弹层 → 返回）。
+4. 保存到 `src/prototypes/<page-name>/prototype.html`（或多文件时同目录）。
+
+### Step 5: 一致性核对
+
+核对以下维度：
+
+-   ✅ 功能点与页面实现一致
+-   ✅ 技术约定与 spec.md 一致
+-   ✅ 范围与用户要求一致
+-   ✅ 无遗漏核心内容
+-   ✅（若含原型）**原型页面信息与 `prd.md` 一致**；已承诺的交互在原型中可演示；文案/字段与 spec 不冲突；**标注弹框**与 `prd.md` 章节一一对应、无误导性描述
+
+如有不一致，返回 Step 4（及 4b）重新生成。
+
+## Rules
+
+1. **路径规范**：PRD 必须保存到 `src/prototypes/<page-name>/prd.md`
+2. **命名规范**：文件名必须为 `prd.md`（小写）；默认可交互原型文件名为 `prototype.html`
+3. **术语规范**：使用研发/测试通用术语
+4. **范围约束**：用户指定范围时，不超出范围
+5. **必须核对**：生成后必须进行一致性核对
+6. **原型约束**：优先单文件 + Tailwind CDN，避免引入未声明的 npm 依赖；交互逻辑保持可读、可删改，不写死真实密钥或内网地址；**高保真 `prototype.html` 必须包含 PRD 标注弹框**（分区触发 + 独立弹层 + 章节对照，见上文「技术约定」第 7 条）
+7. **禁止无效追问**：仅请求 PRD 时不得主动询问是否补充原型；需要原型须由用户在指令中写明（见 Step 3）
+
+## Example Usage
+
+```
+用户：帮我生成 data-search 页面的PRD
+→ 执行：
+  1. 分析 index.tsx 和 spec.md
+  2. 识别为数据看板类
+  3. 应用 data-prd-template.md
+  4. 生成 src/prototypes/data-search/prd.md
+  5. 核对一致性
+```
+
+```
+用户：生成合同详情页的 PRD，并给一个 HTML+Tailwind 可点的原型
+→ 执行：
+  1. 同上演示 PRD 流程至 prd.md
+  2. Step 4b：生成 src/prototypes/contract-detail/prototype.html（Tailwind CDN + 分区布局 + Tab/弹层等 mock 交互 + PRD 标注弹框）
+  3. 核对 PRD、原型、spec/实现 一致
+```

package/dist/deppon-prd-generator/quick-reference.md

@@ -0,0 +1,153 @@
+# deppon-prd-generator 快速参考指南
+
+## 🚀 快速开始
+
+### 一句话命令
+
+```
+帮我生成 [页面路径] 的PRD
+```
+
+### 示例
+
+```
+帮我生成 data-search 页面的PRD
+帮我生成 src/prototypes/xyop-ciku-list 的PRD
+```
+
+---
+
+## 📋 页面类型速查表
+
+| 图标 | 类型           | 适用场景                          | 模板                                 |
+| ---- | -------------- | --------------------------------- | ------------------------------------ |
+| 📊   | 数据看板类     | 统计看板、报表分析、指标监控      | data-prd-template.md                 |
+| 📋   | 后台列表类     | 数据列表、查询列表、台账管理      | backend-list-prd-template.md         |
+| ✏️   | 后台表单编辑类 | 新增/编辑表单、配置管理、数据录入 | backend-form-edit-prd-template.md    |
+| 👁️   | 后台表单预览类 | 详情查看、预览页面、只读页面      | backend-form-preview-prd-template.md |
+| 🎨   | 用户前台类     | C 端页面、营销活动、产品展示      | user-frontend-prd-template.md        |
+
+---
+
+## 🎯 指定页面类型
+
+如果需要强制使用某种类型，可以这样说：
+
+```
+帮我生成 [页面路径] 的PRD，使用数据看板类模板
+帮我生成 [页面路径] 的PRD，使用后台列表类模板
+```
+
+---
+
+## 🔍 指定功能范围
+
+如果只需要生成部分功能的 PRD：
+
+```
+帮我生成 [页面路径] 的PRD，只包含筛选和列表部分
+帮我生成 [页面路径] 的PRD，重点关注表单编辑功能
+```
+
+---
+
+## 📁 文件结构
+
+```
+skills/deppon-prd-generator/
+├── SKILL.md                    # 主技能文档
+├── workflow.md                 # 详细工作流程
+├── quick-reference.md          # 本文件 - 快速参考
+└── template/
+    ├── data-prd-template.md              # 数据看板模板
+    ├── backend-list-prd-template.md      # 后台列表模板
+    ├── backend-form-edit-prd-template.md # 表单编辑模板
+    ├── backend-form-preview-prd-template.md # 表单预览模板
+    └── user-frontend-prd-template.md     # 用户前台模板
+```
+
+---
+
+## ✅ 输出检查清单
+
+生成 PRD 后，请确认：
+
+-   [ ] 文件保存在正确位置：`src/prototypes/<page-name>/prd.md`
+-   [ ] 文件名正确：`prd.md`（小写）
+-   [ ] 内容与页面实现一致
+-   [ ] 内容与 spec.md 一致（如果有）
+-   [ ] 没有遗漏核心功能
+-   [ ] 使用了研发/测试通用术语
+-   [ ] 结构清晰、层次分明
+
+若同时生成高保真可交互原型：
+
+-   [ ] `src/prototypes/<page-name>/prototype.html` 可用浏览器直接打开（默认 Tailwind Play CDN）
+-   [ ] 主要交互可演示；与 `prd.md` 描述一致
+-   [ ] **含 PRD 标注弹框**：分区触发、弹层内章节号与要点、与业务弹窗区分、可 ESC/遮罩关闭
+
+---
+
+## 💡 常用提示词
+
+### 基础使用
+
+```
+帮我生成 data-search 页面的PRD
+```
+
+### 指定类型
+
+```
+帮我生成 data-search 页面的PRD，使用数据看板类模板
+```
+
+### 指定范围
+
+```
+帮我生成 data-search 页面的PRD，重点关注找供应商看板
+```
+
+### 详细要求
+
+```
+帮我生成 data-search 页面的PRD，需要详细描述数据口径和指标定义
+```
+
+### PRD + HTML + Tailwind 可交互原型
+
+```
+帮我生成 xxx 页面的PRD，并输出同目录 prototype.html：Tailwind CDN、高保真布局、Tab 和弹层可点；主区块须带 PRD 标注弹框（琥珀顶栏、章节对照、Esc 关闭）
+```
+
+---
+
+## 🆘 常见问题
+
+### Q: 生成的 PRD 保存在哪里？
+
+A: 保存在 `src/prototypes/<page-name>/prd.md`。若生成可交互原型，默认同目录 `prototype.html`。
+
+### Q: 可以修改已生成的 PRD 吗？
+
+A: 可以，直接告诉需要修改的内容即可。如果修改了页面实现，建议重新生成 PRD。
+
+### Q: 页面同时有列表和表单怎么办？
+
+A: 选择主要功能类型，其他功能在对应模块详细描述
+
+### Q: spec.md 不存在怎么办？
+
+A: 只基于页面实现生成 PRD，不依赖 spec.md
+
+---
+
+## 📞 获取帮助
+
+如果遇到问题，可以这样问：
+
+```
+这个页面应该用哪种模板？
+帮我看看这个页面属于什么类型？
+生成PRD时需要注意什么？
+```

package/dist/deppon-prd-generator/template/backend-form-edit-prd-template.md

@@ -0,0 +1,112 @@
+# [页面名称] PRD (产品需求文档)
+
+## 1. 引言
+
+### 1.1 背景
+
+> 简要说明该元素/页面的核心定位、解决的问题、用户价值（控制在50字左右）。
+
+```
+[需求背景内容]
+```
+
+### 1.2 功能清单
+
+> 以表格形式梳理出所有模块、功能点及功能描述。
+>
+> 功能清单不包含：页面顶栏、左侧菜单栏的样式、交互需求内容！
+
+| 模块             | 功能点         | 功能描述       |
+| ---------------- | -------------- | -------------- |
+| `[功能模块标题]` | `[功能点标题]` | `[功能点描述]` |
+
+## 2. 页面菜单与权限规划
+
+### 2.1 页面菜单
+
+> 参考菜单栏，描述页面菜单路径。仅描述菜单路径即可！不要做其他内容说明。
+
+**菜单路径**：[一级菜单名称] / [二级菜单名称]
+
+### 2.2 权限规划
+
+> 表格呈现权限点规划，仅定义权限点、可执行操作范围、数据范围（如：个人数据/全量数据），不定义具体角色；
+>
+> **权限点规划的基本原则：**查看类操作归集在【查看】一个权限点；编辑类操作归集在【编辑】一个权限点；导出类操作归集在【导出】一个权限点。
+
+| 权限点         | 操作范围           | 数据范围      |
+| -------------- | ------------------ | ------------- |
+| `[权限点名称]` | `[支持的操作名称]` | `[个人/全量]` |
+
+## 3. [模块名称]需求说明
+
+### 3.1 表单字段说明
+
+> 按表单字段逐一描述，包含字段名称、类型、必填性、校验规则、默认值、说明等
+
+| 字段名称 | 字段类型 | 必填 | 默认值 | 校验规则 | 说明 |
+|---------|---------|------|--------|---------|------|
+| `[字段名]` | `[文本/下拉/日期/数字等]` | 是/否 | `[默认值]` | `[校验规则，如：长度1-50，手机号格式等]` | `[字段说明]` |
+
+### 3.2 字段详细说明
+
+> 对每个字段进行更详细的说明，特别是有特殊逻辑的字段
+
+#### 3.2.1 [字段名称]
+
+- **字段说明**：[详细说明]
+- **输入限制**：[具体限制]
+- **校验规则**：
+  - 规则1：[描述]
+  - 规则2：[描述]
+- **错误提示**：[校验失败时的提示信息]
+
+### 3.3 字段联动逻辑
+
+> 描述字段之间的联动关系，如：选择A后，B字段显示/隐藏、变为必填等
+
+| 触发字段 | 触发条件 | 影响字段 | 影响效果 |
+|---------|---------|---------|---------|
+| `[字段A]` | `[选择某个值]` | `[字段B]` | `[显示/隐藏/必填/可选等]` |
+
+### 3.4 操作按钮
+
+#### 3.4.1 保存/提交
+
+- **按钮位置**：表单底部
+- **点击逻辑**：
+  1. 前端校验所有必填字段和格式校验
+  2. 校验失败：显示错误提示，光标定位到第一个错误字段
+  3. 校验通过：调用后端接口提交数据
+  4. 提交成功：显示成功提示，跳转至列表页
+  5. 提交失败：显示失败提示，保留表单数据
+
+#### 3.4.2 取消
+
+- **按钮位置**：保存按钮旁边
+- **点击逻辑**：
+  1. 若表单有修改，弹出二次确认："您有未保存的修改，确定要离开吗？"
+  2. 确认：跳转至列表页
+  3. 取消：停留在当前页面
+
+#### 3.4.3 重置
+
+- **按钮位置**：表单底部（可选）
+- **点击逻辑**：
+  1. 弹出二次确认："确定要重置表单吗？"
+  2. 确认：恢复所有字段为默认值
+  3. 取消：不做操作
+
+## 4. 交互设计
+
+### 4.1 全局交互
+
+- **加载状态**：数据请求过程中需展示 Loading 状态。
+- **空状态**：无数据时需展示统一的 Empty 状态图。
+- **响应式**：页面需适配不同分辨率屏幕，保证内容不遮挡、不错位。
+
+### 4.2 表单交互
+
+- **实时校验**：字段失焦时进行校验，即时显示错误提示
+- **必填标识**：必填字段前显示红色星号（*）
+- **Tab键导航**：支持Tab键在字段间顺序切换

package/dist/deppon-prd-generator/template/backend-form-preview-prd-template.md

@@ -0,0 +1,108 @@
+# [页面名称] PRD (产品需求文档)
+
+## 1. 引言
+
+### 1.1 背景
+
+> 简要说明该元素/页面的核心定位、解决的问题、用户价值（控制在50字左右）。
+
+```
+[需求背景内容]
+```
+
+### 1.2 功能清单
+
+> 以表格形式梳理出所有模块、功能点及功能描述。
+>
+> 功能清单不包含：页面顶栏、左侧菜单栏的样式、交互需求内容！
+
+| 模块             | 功能点         | 功能描述       |
+| ---------------- | -------------- | -------------- |
+| `[功能模块标题]` | `[功能点标题]` | `[功能点描述]` |
+
+## 2. 页面菜单与权限规划
+
+### 2.1 页面菜单
+
+> 参考菜单栏，描述页面菜单路径。仅描述菜单路径即可！不要做其他内容说明。
+
+**菜单路径**：[一级菜单名称] / [二级菜单名称]
+
+### 2.2 权限规划
+
+> 表格呈现权限点规划，仅定义权限点、可执行操作范围、数据范围（如：个人数据/全量数据），不定义具体角色；
+>
+> **权限点规划的基本原则：**查看类操作归集在【查看】一个权限点；编辑类操作归集在【编辑】一个权限点；导出类操作归集在【导出】一个权限点。
+
+| 权限点         | 操作范围           | 数据范围      |
+| -------------- | ------------------ | ------------- |
+| `[权限点名称]` | `[支持的操作名称]` | `[个人/全量]` |
+
+## 3. [模块名称]需求说明
+
+### 3.1 信息展示区域
+
+> 描述页面展示的所有信息字段
+
+| 字段名称 | 展示格式 | 说明 |
+|---------|---------|------|
+| `[字段名]` | `[文本/日期/金额/状态标签等]` | `[字段说明]` |
+
+### 3.2 字段详细说明
+
+> 对重要字段进行详细说明
+
+#### 3.2.1 [字段名称]
+
+- **字段说明**：[详细说明]
+- **展示格式**：[具体格式，如：YYYY-MM-DD、¥#,##0.00等]
+- **空值展示**：[空值时显示的内容，如：-、暂无等]
+- **特殊规则**：[特殊展示规则，如：状态颜色、超长省略等]
+
+### 3.3 操作按钮
+
+> 描述页面上的操作按钮
+
+| 按钮名称 | 按钮位置 | 点击逻辑 | 权限要求 |
+|---------|---------|---------|---------|
+| `[编辑]` | `[页面右上角/底部等]` | `[跳转至编辑页面]` | `[需要编辑权限]` |
+| `[删除]` | `[页面右上角/底部等]` | `[弹出二次确认，确认后删除]` | `[需要删除权限]` |
+| `[返回]` | `[页面左上角/底部等]` | `[返回上一页/列表页]` | `[无权限要求]` |
+
+#### 3.3.1 编辑按钮
+
+- **按钮样式**：主按钮样式
+- **点击逻辑**：
+  1. 校验编辑权限
+  2. 有权限：跳转至编辑页面，携带当前记录ID
+  3. 无权限：显示无权限提示
+
+#### 3.3.2 删除按钮
+
+- **按钮样式**：危险按钮样式
+- **点击逻辑**：
+  1. 校验删除权限
+  2. 弹出二次确认："确定要删除该记录吗？删除后不可恢复。"
+  3. 确认：调用删除接口
+  4. 删除成功：显示成功提示，跳转至列表页
+  5. 删除失败：显示失败提示
+
+#### 3.3.3 返回按钮
+
+- **按钮样式**：次要按钮样式
+- **点击逻辑**：
+  1. 跳转至上一页或列表页
+
+## 4. 交互设计
+
+### 4.1 全局交互
+
+- **加载状态**：数据请求过程中需展示 Loading 状态。
+- **空状态**：无数据时需展示统一的 Empty 状态图。
+- **响应式**：页面需适配不同分辨率屏幕，保证内容不遮挡、不错位。
+
+### 4.2 页面交互
+
+- **数据加载**：进入页面时，根据ID加载详情数据
+- **权限控制**：根据用户权限控制操作按钮的显示/隐藏
+- **复制功能**：（可选）支持一键复制某些字段内容