@deppon/deppon-skills 2.4.18 → 2.4.20

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

@@ -36,12 +36,12 @@ description: >-
 | 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 + 可选 HTML+Tailwind 可交互原型 + 实现蓝图（映射到上表） | `deppon-prd-generator`              | `prd.md` / `prototype.html`；落地时依赖上表包     |
+-   产品 PRD（`prd.md` 须默认中文；有原型时文首须链到 `prototype.html`）+ 可选 HTML+Tailwind 可交互原型 + 实现蓝图（映射到上表） | `deppon-prd-generator`              | 各类型示例见该 skill 下 `examples/*/`（`examples/README.md`）；落地时依赖上表包 |
 
 ## 选用专项 Skill（与上表一致，便于 @ 引用）
 
 -   私有 registry 与包文档：`deppon-npm-private-registry`
--   产品 PRD + 蓝图：`deppon-prd-generator`
+-   产品 PRD + 蓝图（**默认中文**；同目录有 `prototype.html` 时 **prd 文首须含相对链接**；细则见该 skill）：`deppon-prd-generator`（示例目录见该 skill 内 `examples/README.md`）
 -   表单单页：`deppon-pro-form`
 -   表单分组/多表单：`deppon-pro-form-group`
 -   高级客户类表单：`deppon-pro-form-advanced-customer`
@@ -65,6 +65,6 @@ description: >-
 ## Agent 工作方式
 
 0. 外仓或未确认依赖时：先 **`deppon-npm-private-registry`**，再生成代码。
-1. 需求对标：用本表选 **专项 skill**；需要长文档时用 **`deppon-prd-generator`**。
+1. 需求对标：用本表选 **专项 skill**；需要长文档时用 **`deppon-prd-generator`**（按 `examples/README.md` 选 `examples/<类型>/` 对照 PRD/原型结构）。
 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

@@ -2,7 +2,7 @@
 name: deppon-prd-generator
 description: >-
     基于页面实现、spec.md文档和功能范围，匹配指定模板类型生成面向研发测试的结构化PRD；并可选用 HTML + Tailwind CSS
-    产出高保真、可点击交互的静态原型（单页优先），原型须含 PRD 标注弹框与文档章节对齐，与 PRD 一致性核对。
+    产出高保真、可点击交互的静态原型（单页优先），原型须含 PRD 标注弹框与文档章节对齐，与 PRD 一致性核对。PRD 与原型内用户可见文案须按「语言与文案」默认简体中文；同目录有原型时 `prd.md` 文首须含指向 `prototype.html` 的 Markdown 相对链接（见「PRD 与原型互链」）。用户另有语言或文件命名要求时从其约定。生成前按页面类型对照本技能 `examples/<类型>/` 参考示例（见 SKILL 内置参考示例表）。
     在用户 @deppon-prd-generator、@prd、生成 PRD、HTML 原型、Tailwind 原型 时应用。
 ---
 
@@ -12,6 +12,23 @@ description: >-
 
 基于页面实现代码、spec.md 规格文档及用户指定的功能范围，智能识别页面类型并匹配对应模板，生成面向研发和测试人员的结构化产品需求文档（PRD）。在用户需要「可演示、可点」的需求载体时，**同目录**补充 **HTML + Tailwind CSS** 的高保真交互原型（免构建优先），便于评审与对标实现。
 
+## 语言与文案（默认）
+
+- **PRD（`prd.md`）**：章节标题、正文、表格内业务说明等默认使用**简体中文**；代码路径、类名、接口字段、包名、枚举值等可与实现对齐保留英文。
+- **高保真原型（`prototype.html` 及同目录子页）**：`<title>`、侧栏/顶栏/按钮/菜单/表头/空态/Toast/mock 等**用户可见文案**默认使用**简体中文**；`aria-label` 等无障碍属性可中英混排，以可读为准。
+- **例外**：用户明确要求英文/双语、或对标海外版/英文站时，从其约定。
+
+## 本技能对执行者的硬性要求（语言）
+
+- 按本技能产出或改写 **`prd.md`、`prototype.html`**（及壳层 `pages/*.html` 等）时，**必须**遵守上文「语言与文案」：业务侧可见表述用**简体中文**；不得在无用户要求时用英文写菜单、按钮、表头、空态、Toast 等（接口名、枚举、包名、代码路径可保留英文）。
+- 用户明确要求外文/双语时，从其约定。
+
+## PRD 与原型互链
+
+- 当同目录**已存在**或本次**一并交付**可交互原型入口文件（默认可为 **`prototype.html`**；用户约定其他主文件名时从其命名）时，`prd.md` **文首须在标题后第一段或「文档说明」引用块内**，加入 **Markdown 相对链接**指向该文件，例如：`- **交互原型**：[打开 prototype.html](./prototype.html)`，以便在 Git 平台、IDE Markdown 预览中**点击跳转**（路径相对于 `prd.md` 所在目录，Monorepo 内同理）。
+- **仅交付 PRD、不产出也不保留原型**时：不写指向不存在文件的链接；可写一句「本期无高保真原型」。
+- 执行 **Step 4b** 新增或重命名原型文件后，须**回写** `prd.md` 使链接与文件名一致。
+
 ## When to Use
 
 -   用户明确要求生成 PRD 文档时
@@ -99,9 +116,44 @@ description: >-
 -   操作反馈
 -   展示规范
 
+### 6. 管理台壳层与多页导航类 (app-shell-navigation-prd-template.md)
+
+**适用场景**：
+
+-   **文档中心型**多子页项目：侧栏 + 顶栏 + 主区承载多份静态子页原型
+-   首页 **24 栅格** 分栏、固定 **180px / 56px** 侧栏与 **56px** 顶栏
+-   **一级 / 二级 / 三级飞层** 导航与 **iframe**（或 hash 路由）在子页间跳转
+
+**重点内容**：
+
+-   全局尺寸与间距、主区栅格比例
+-   侧栏展开/收起与多级菜单交互
+-   顶栏与页签（若有）与子页同步规则
+-   `prototype.html` + `pages/*.html` 目录约定与打开方式（HTTP）
+
+## 内置参考示例（`examples/`）
+
+技能目录内维护**已完成的对照示例**（非用户仓库交付物），索引见 `examples/README.md`。生成 PRD 时除套用 `template/*.md` 外，**按类型先读示例再落笔**，对齐章节结构、表格粒度与（若有）原型标注习惯。
+
+| 模板 / 类型 | 参考示例目录 |
+| ----------- | ------------ |
+| `data-prd-template.md`（数据看板：筛选 + 指标卡 + 图表 + 列表 + 指标总览） | `examples/data-dashboard/` |
+| `backend-list-prd-template.md` 且为 **纯列表**（筛选 + 分页表，无典型弹层 CRUD） | `examples/backend-list/` |
+| `backend-list-prd-template.md` 且含 **列表 + 筛选 + 分页 + 详情 + 新增/编辑 + 删除** 等完整 CRUD | `examples/list-crud/` |
+| `backend-form-edit-prd-template.md`（整页表单编辑） | `examples/form-edit/` |
+| `backend-form-preview-prd-template.md`（只读详情/预览） | `examples/form-preview/` |
+| `user-frontend-prd-template.md`（C 端 / 活动页） | `examples/user-frontend/` |
+| `app-shell-navigation-prd-template.md`（壳层 + 多页 hub） | `examples/app-shell-navigation/` |
+
+**执行要求**：
+
+1. **Step 4 之前**：若上表已映射当前页面类型，须阅读对应 `examples/<子目录>/prd.md`，对齐该模板习惯的章节与表格（含文首**交互原型**相对链接写法）；用户要求交付 `prototype.html` 时，还须对照同目录 `prototype.html`（标注 `fetch` 切片、`min-h-0` 滚动、主题蓝主按钮、§9 原型映射等，见技术约定第 7～9 条）。
+2. **Step 4b**：用户指令已含原型相关关键词时，优先对照**与类型一致**的 `examples/<子目录>/prototype.html`，再编写目标页。
+3. **路径**：`examples/` 仅供本技能内走查与模仿；**禁止**当作业务项目默认保存路径；用户仓库产出仍为 `src/prototypes/<page-name>/prd.md`（及同目录 `prototype.html`）。
+
 ## HTML + Tailwind CSS 高保真可交互原型
 
-在 PRD 之外或用户明确要求时，输出**单文件或可合并的少量 HTML**，用 **Tailwind CSS** 还原布局与视觉层级，用 **原生 JavaScript**（无框架依赖）实现 PRD 中需要演示的交互，做到「能点开、能切换状态」，而非纯截图式静态页；**高保真交付须带 PRD 标注弹框**（见下文技术约定第 7 条）。
+在 PRD 之外或用户明确要求时，输出**单文件或可合并的少量 HTML**，用 **Tailwind CSS** 还原布局与视觉层级，用 **原生 JavaScript**（无框架依赖）实现 PRD 中需要演示的交互，做到「能点开、能切换状态」，而非纯截图式静态页；**高保真交付须带 PRD 标注弹框**（见下文技术约定第 7～9 条）。
 
 ### 技术约定
 
@@ -110,17 +162,20 @@ description: >-
 3. **交互**：用少量内联或同文件 `<script>` 实现 Tab、折叠、弹层/抽屉开关、下拉、步骤条、表单校验态、禁用态、空态/加载骨架等；**数据用静态 mock**，接口行为用文字或 toast 模拟即可。
 4. **保真**：对齐 `screenshot.png` 或现有页面：间距、字号、分区、主色/中性色尽量接近；复杂图表可用占位块 + 标注「图表区」而非强行手绘 SVG。
 5. **无障碍（简要）**：可聚焦控件有可见焦点样式；弹层打开时焦点管理、必要处加 `aria-expanded` / `aria-modal` / `role`。
-6. **与 PRD 对齐**：文件顶部 HTML 注释或页面页脚小块文字注明：对应 `prd.md` 的章节/功能范围，避免原型与文档漂移。
+6. **与 PRD 对齐**：文件顶部 HTML 注释或页面页脚小块文字注明：对应 `prd.md` 的章节/功能范围，避免原型与文档漂移。**双向导航**：同目录存在 `prototype.html`（或约定的原型主文件）时，`prd.md` 文首须有指向该文件的 Markdown 相对链接（见上文「PRD 与原型互链」）。
 7. **PRD 标注弹框（高保真原型必含，与业务弹窗区分）**：
     - **目的**：评审/走查时一眼对齐需求，避免原型仅「长得像」却难追溯 PRD。
-    - **形态**：在**主要功能区块**（如筛选区、列表区、工具栏、关键业务弹窗内等）旁放置触发器（推荐文案「PRD §x.x」「标注」或 `?` 图标按钮，`type="button"`）；点击打开**独立标注弹框**——标题区须明显区别于业务弹窗（推荐小标签「需求标注」+ 琥珀/紫色调或左侧色条），正文为**结构化说明**（非长文粘贴全文 PRD）。
-    - **内容至少包含**：① 对应 `prd.md` 的**章节号与标题**；② **2～5 条**需求要点、验收注意或字段规则摘要；③ 可选：「待后端确认 / 与现网差异」一句。
+    - **形态**：在**主要功能区块**（如筛选区、列表区、工具栏、关键业务弹窗内等）旁放置触发器（推荐文案「PRD §x.x」「标注」或 `?` 图标按钮，`type="button"`）；点击打开**独立标注弹框**——标题区须明显区别于业务弹窗（推荐小标签「需求标注」+ 琥珀/紫色调或左侧色条）。正文可为**要点摘要**（2～5 条），**或**（推荐）按第 9 条从同目录 `prd.md` **切片渲染**对应章节全文（含表格），长文须在弹层内可滚动。
+    - **内容至少包含**：① 对应 `prd.md` 的**章节号与标题**（体现在弹层标题或首段）；② **摘要模式**：2～5 条要点、验收注意或字段规则；**或切片模式（第 9 条）**：正文为切片内 PRD 原文（表格/列表以渲染结果为准）；③ 可选：「待后端确认 / 与现网差异」一句。
     - **交互与无障碍**：`role="dialog"`、`aria-modal="true"`、`aria-labelledby`；支持 **ESC**、遮罩点击、明确关闭按钮；**z-index** 须高于同页业务弹层（避免被详情/表单盖住），或与业务层分层约定一致。
     - **禁止**：不要用标注弹框承载真实表单提交；不要与业务弹窗共用同一 DOM id。
+8. **主按钮与主题色（原型）**：筛选区「查询」、工具栏「新增」、表单「保存」、主路径「确定」等**常规主操作**统一为**主题蓝**实心按钮（Tailwind CDN 示例：`bg-blue-600 hover:bg-blue-700 text-white`，`focus:ring-blue-500`）；**次要操作**（如「重置」「取消」「关闭」）为白底灰边；**危险操作**（删除、放弃保存等）用红色系，不与主色混用。与 Element Plus `type="primary"` 等组件库主色语义一致时可对齐现网 token。
+9. **标注正文与 `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`。
 
 ### 输出路径
 
 -   与 PRD 同目录：`src/prototypes/<page-name>/prototype.html`（默认文件名，避免与业务入口 `index.html` 混淆）。
+-   **壳层 + 多子页（文档中心型）**：同目录可含 `pages/*.html`（子页原型）、可选 `layout-spec.md`（栅格/间距速查）；入口仍为 `prototype.html`。
 -   若页面拆成多屏且单文件过长，可拆为 `prototype-list.html`、`prototype-detail.html` 等，并在各文件注释中写明导航关系。
 
 ## Workflow
@@ -136,11 +191,12 @@ description: >-
 
 基于页面内容自动识别类型：
 
--   包含大量图表、指标 → 数据看板类
--   包含列表、筛选、分页 → 后台列表类
--   包含表单输入、提交 → 后台表单编辑类
--   只有展示、无输入 → 后台表单预览类
--   C 端用户界面 → 用户前台类
+-   包含大量图表、指标卡片、数据看板 → 数据看板类（先读 `examples/data-dashboard/`）
+-   包含列表、筛选、分页 → 后台列表类：若同时含详情 / 新增编辑 / 删除等典型 CRUD → `examples/list-crud/`；若为纯列表无弹层 CRUD → `examples/backend-list/`
+-   包含表单输入、提交 → 后台表单编辑类（先读 `examples/form-edit/`）
+-   只有展示、无输入 → 后台表单预览类（先读 `examples/form-preview/`）
+-   C 端用户界面 → 用户前台类（先读 `examples/user-frontend/`）
+-   管理台壳层、侧栏多级菜单、首页栅格、多子页原型 hub（iframe / `pages/`）→ 壳层与多页导航类（先读 `examples/app-shell-navigation/`）
 
 ### Step 3: 需求确认（按需，避免无效追问）
 
@@ -153,29 +209,35 @@ description: >-
 
 ### Step 4: PRD 生成
 
-1. 应用对应模板
-2. 从页面实现和 spec.md 中提取信息
-3. 填充模板内容
-4. 保存到 `<project-dir>/src/prototypes/<page-name>/prd.md`
+1. 若本节「内置参考示例」表中已映射当前页面类型，**先阅读**对应 `examples/<子目录>/prd.md`（及将交付原型时的 `prototype.html`），再应用模板。
+2. 应用对应模板
+3. 从页面实现和 spec.md 中提取信息
+4. 填充模板内容
+5. **若同目录已有或可交付 `prototype.html`（或约定的原型主文件名）**：在 `prd.md` 文首加入指向该文件的 Markdown 相对链接（见「PRD 与原型互链」）；仅无原型时不写死链接
+6. 保存到 `<project-dir>/src/prototypes/<page-name>/prd.md`
 
 ### Step 4b: 高保真原型生成（可选）
 
 在用户**已明确要求**原型（见 Step 3 关键词）时执行；未出现上述要求则跳过本步。
 
 1. 以 PRD 与视觉参考（截图/实现）为清单，划分布局区块与交互点。
-2. 编写 `prototype.html`：Tailwind CDN + 结构 + 样式类 + 演示用 JS；**必须包含 PRD 标注弹框**（见上文「技术约定」第 7 条：分区触发器、独立弹层、章节对照与 z-index）。
+2. 编写 `prototype.html`：Tailwind CDN + 结构 + 样式类 + 演示用 JS；**必须包含 PRD 标注弹框**（见上文「技术约定」第 7 条：分区触发器、独立弹层、章节对照与 z-index）；**推荐**标注正文按第 9 条与 `prd.md` 联动（`fetch` + Markdown 切片）并保证弹内**可滚动**；无 `fetch` 条件时须写清打开方式与兜底
 3. 保证主要路径可点通（例如列表 → 详情弹层 → 返回）。
 4. 保存到 `src/prototypes/<page-name>/prototype.html`（或多文件时同目录）。
+5. **回写 `prd.md`**：文首含指向本原型入口的 `[…](./prototype.html)`（或实际文件名）相对链接，与「PRD 与原型互链」一致。
 
 ### Step 5: 一致性核对
 
 核对以下维度：
 
+-   ✅（若已读 `examples/` 对照）章节与信息粒度不低于参考示例中与该页同类的模块（允许因范围缩小而删减，但**不得**无故缺省筛选/列表/权限等同类块）
 -   ✅ 功能点与页面实现一致
 -   ✅ 技术约定与 spec.md 一致
 -   ✅ 范围与用户要求一致
 -   ✅ 无遗漏核心内容
--   ✅（若含原型）**原型页面信息与 `prd.md` 一致**；已承诺的交互在原型中可演示；文案/字段与 spec 不冲突；**标注弹框**与 `prd.md` 章节一一对应、无误导性描述
+-   ✅（若含原型）**原型页面信息与 `prd.md` 一致**；已承诺的交互在原型中可演示；文案/字段与 spec 不冲突；**标注弹框**与 `prd.md` 章节一一对应、无误导性描述；若标注按第 9 条 `fetch` 切片渲染，则触发器映射的正则应与 `prd.md` 实际标题一致，且交付说明含 HTTP 打开与兜底约定
+-   ✅ **语言**：未约定外文时，PRD 与原型用户可见文案为简体中文，与「语言与文案」「本技能对执行者的硬性要求」一致
+-   ✅（若目录存在 `prototype.html` 等原型入口）`prd.md` 文首含有效的 Markdown **相对链接**指向该文件，与「PRD 与原型互链」一致；或已明确声明本期无原型
 
 如有不一致，返回 Step 4（及 4b）重新生成。
 
@@ -183,11 +245,12 @@ description: >-
 
 1. **路径规范**：PRD 必须保存到 `src/prototypes/<page-name>/prd.md`
 2. **命名规范**：文件名必须为 `prd.md`（小写）；默认可交互原型文件名为 `prototype.html`
-3. **术语规范**：使用研发/测试通用术语
+3. **术语与语言**：使用研发/测试通用术语；须遵守「语言与文案」及「本技能对执行者的硬性要求（语言）」，**默认简体中文**撰写 PRD 与原型可见文案
 4. **范围约束**：用户指定范围时，不超出范围
 5. **必须核对**：生成后必须进行一致性核对
-6. **原型约束**：优先单文件 + Tailwind CDN，避免引入未声明的 npm 依赖；交互逻辑保持可读、可删改，不写死真实密钥或内网地址；**高保真 `prototype.html` 必须包含 PRD 标注弹框**（分区触发 + 独立弹层 + 章节对照，见上文「技术约定」第 7 条）
+6. **原型约束**：优先单文件 + Tailwind CDN，避免引入未声明的 npm 依赖；交互逻辑保持可读、可删改，不写死真实密钥或内网地址；**高保真 `prototype.html` 必须包含 PRD 标注弹框**（分区触发 + 独立弹层 + 章节对照，见上文「技术约定」第 7 条）；常规主操作按钮须符合第 8 条主题蓝与次要/危险区分；**推荐**按第 9 条将标注正文与 `prd.md` 联动并支持长内容滚动
 7. **禁止无效追问**：仅请求 PRD 时不得主动询问是否补充原型；需要原型须由用户在指令中写明（见 Step 3）
+8. **PRD↔原型互链**：同目录存在交互原型入口（默认 `prototype.html`）时，`prd.md` 文首须含可点击的 `[描述](./prototype.html)` 相对链接；多入口时在文首分项列出并注明用途；无原型时不写无效链接（见「PRD 与原型互链」）
 
 ## Example Usage
 

package/dist/deppon-prd-generator/examples/README.md

@@ -0,0 +1,17 @@
+# deppon-prd-generator 内置参考示例
+
+本目录存放**已完成的对照示例**（非业务仓库的 `src/prototypes/` 交付物），供生成 PRD / 可选 `prototype.html` 时对齐**章节结构、表格粒度、标注与 `prd.md` 联动（`fetch` + `marked`）**。各子目录内 `prd.md` 文首含指向**同目录** `prototype.html` 的 Markdown 相对链接（与 `SKILL.md`「PRD 与原型互链」一致）；正文与原型 UI 默认**简体中文**。
+
+| 子目录 | 对应模板文件 | 页面类型 / 场景 |
+| ------ | ------------ | ---------------- |
+| `list-crud/` | `template/backend-list-prd-template.md` | 后台列表 **+ 完整 CRUD**（筛选/分页/详情/表单/删除） |
+| `backend-list/` | `template/backend-list-prd-template.md` | 后台 **纯列表**（筛选 + 表 + 分页，无弹层 CRUD） |
+| `form-edit/` | `template/backend-form-edit-prd-template.md` | 后台 **整页表单编辑**（字段/联动/保存取消） |
+| `form-preview/` | `template/backend-form-preview-prd-template.md` | 后台 **只读详情 / 预览** |
+| `data-dashboard/` | `template/data-prd-template.md` | **数据看板**（筛选 + 卡 + 图 + 表 + 指标总览） |
+| `user-frontend/` | `template/user-frontend-prd-template.md` | **用户前台 / C 端**活动页 |
+| `app-shell-navigation/` | `template/app-shell-navigation-prd-template.md` | **管理台壳层 + 多页文档中心**（侧栏/顶栏/栅格 + `pages/` 互跳） |
+
+**打开原型**：各 `prototype.html` 须通过**本地 HTTP**访问同目录，以便 `fetch('prd.md')`；勿依赖 `file://`。**`app-shell-navigation/`** 还须从该子目录打开，保证 iframe 内 `pages/*.html` 相对路径可用。
+
+各 `template/*.md` 文首已增加「生成时对照」与 **交互原型链接** 要求（见 `SKILL.md`「PRD 与原型互链」）。

package/dist/deppon-prd-generator/examples/app-shell-navigation/layout-spec.md

@@ -0,0 +1,54 @@
+# 首页栅格与导航布局速查（设计对齐用）
+
+> 本文件为 **`examples/app-shell-navigation/`** 配套速查，可与 `prd.md` §3、§4 一并维护。复制到业务 PRD 项目时可改名为 `layout-spec.md` 放在 hub 根目录。
+
+## 1. 整体结构（左右 + 顶）
+
+| 区域 | 位置 | 说明 |
+| ---- | ---- | ---- |
+| 侧栏 | 左侧固定 | 主导航；展开宽 **180px**，收起 **56px** |
+| 顶栏 | 主区上方 | 高 **56px**；Logo/标题左，工具右 |
+| 主工作区 | 顶栏下方、侧栏右侧 | 内嵌 **iframe** 或路由 `router-view` |
+
+## 2. 间距（与视觉稿一致时可照抄）
+
+| 名称 | 数值 | 用途 |
+| ---- | ---- | ---- |
+| 侧栏—主区 | **16px** | 水平间隙 |
+| 顶栏—内容 | **16px** | 顶栏底到主区顶 |
+| 主区内块间距 | **16px** | 卡片/区块之间 |
+| 页面底边距 | **24px** | 主区 `padding-bottom` |
+
+## 3. 24 栅格（主区内逻辑分栏）
+
+| 区块 | 建议占位 | 说明 |
+| ---- | -------- | ---- |
+| 顶通栏 | **24 / 24** | 全宽 KPI / 筛选横条 |
+| 下区左 | **16 / 24**（约 2/3） | 列表、大图表 |
+| 下区右 | **8 / 24**（约 1/3） | 辅信息、快捷入口 |
+
+## 4. 侧栏导航层级（交互摘要）
+
+| 层级 | 行高参考 | 交互 |
+| ---- | -------- | ---- |
+| 一级 | **52px** | 图标 + 文案 + chevron；点击展开二级 |
+| 二级 | 略缩进 | 无图标或弱图标 |
+| 三级 | 飞层卡片 | 悬停二级项右侧浮出；点击进子页 |
+| 收起 | 宽 56px | 仅图标 + Tooltip |
+
+## 5. 多页文档中心文件约定
+
+```text
+<hub>/
+  prd.md                 # 壳层 PRD（或含本速查链接）
+  layout-spec.md         # 可选：本速查副本
+  prototype.html         # 壳层入口
+  pages/
+    *.html               # 各业务子页原型
+```
+
+子页在壳层内打开：`<a href="pages/xxx.html" target="[iframe name]">` 或路由等价实现。
+
+---
+
+**修订**：2026-05-14 初版（与 `app-shell-navigation-prd-template.md` 配套）。

package/dist/deppon-prd-generator/examples/app-shell-navigation/pages/demo-form.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>表单示例</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,500;0,9..40,600;0,9..40,700&display=swap" rel="stylesheet" />
+        <script>
+            tailwind.config = {
+                theme: { extend: { fontFamily: { sans: ['"DM Sans"', 'system-ui', 'PingFang SC', 'sans-serif'] } } },
+            };
+        </script>
+    </head>
+    <body class="min-h-full bg-gradient-to-b from-slate-50 to-white p-6 text-slate-800 antialiased">
+        <div class="mb-6">
+            <p class="text-[11px] font-semibold uppercase tracking-wider text-indigo-600/90">Form</p>
+            <h1 class="mt-1 text-xl font-bold tracking-tight text-slate-900">新建折扣</h1>
+            <p class="mt-1 text-sm text-slate-500">演示子页 · 整页表单可对接 backend-form-edit 模板。</p>
+        </div>
+        <form
+            class="max-w-lg space-y-5 rounded-2xl border border-slate-200/80 bg-white p-6 shadow-[0_8px_30px_-8px_rgb(15_23_42/0.08)]"
+            onsubmit="event.preventDefault();"
+        >
+            <label class="block">
+                <span class="text-xs font-semibold text-slate-700">折扣名称</span>
+                <input
+                    type="text"
+                    class="mt-1.5 w-full rounded-xl border border-slate-200 bg-slate-50/50 px-4 py-2.5 text-sm transition focus:border-indigo-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+                    placeholder="请输入"
+                />
+            </label>
+            <label class="block">
+                <span class="text-xs font-semibold text-slate-700">折扣值</span>
+                <input
+                    type="number"
+                    class="mt-1.5 w-full rounded-xl border border-slate-200 bg-slate-50/50 px-4 py-2.5 text-sm transition focus:border-indigo-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+                    placeholder="0"
+                />
+            </label>
+            <div class="flex justify-end gap-3 border-t border-slate-100 pt-5">
+                <button
+                    type="button"
+                    class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+                >
+                    取消
+                </button>
+                <button
+                    type="submit"
+                    class="rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-indigo-500/25 transition hover:from-indigo-500 hover:to-violet-500"
+                >
+                    保存
+                </button>
+            </div>
+        </form>
+    </body>
+</html>

package/dist/deppon-prd-generator/examples/app-shell-navigation/pages/demo-home.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>工作台（演示）</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,500;0,9..40,600;0,9..40,700&display=swap"
+            rel="stylesheet"
+        />
+        <script>
+            tailwind.config = {
+                theme: {
+                    extend: {
+                        fontFamily: { sans: ['"DM Sans"', 'system-ui', 'PingFang SC', 'sans-serif'] },
+                    },
+                },
+            };
+        </script>
+    </head>
+    <body class="min-h-full bg-gradient-to-b from-slate-50 to-white p-6 text-slate-800 antialiased">
+        <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
+            <div>
+                <p class="text-[11px] font-semibold uppercase tracking-wider text-indigo-600/90">Overview</p>
+                <h1 class="mt-1 text-xl font-bold tracking-tight text-slate-900">工作台</h1>
+                <p class="mt-1 max-w-xl text-sm text-slate-500">栅格顶区 + 下区双列占位，与壳层 PRD §3.2 对齐。</p>
+            </div>
+            <div class="rounded-full border border-slate-200/80 bg-white px-3 py-1 text-xs font-medium text-slate-500 shadow-sm">
+                子页 · iframe
+            </div>
+        </div>
+
+        <div class="grid gap-4 lg:grid-cols-3">
+            <div
+                class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_8px_30px_-8px_rgb(15_23_42/0.08)] lg:col-span-3"
+            >
+                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-4">
+                    <h2 class="text-sm font-semibold text-slate-800">关键指标</h2>
+                    <span class="text-xs text-slate-400">今日</span>
+                </div>
+                <div class="mt-4 grid gap-3 sm:grid-cols-3">
+                    <div
+                        class="rounded-xl border border-blue-100/80 bg-gradient-to-br from-blue-50 to-indigo-50/50 p-4 transition hover:border-blue-200/90"
+                    >
+                        <p class="text-xs font-medium text-slate-600">今日单量</p>
+                        <p class="mt-2 text-3xl font-bold tabular-nums tracking-tight text-blue-700">—</p>
+                    </div>
+                    <div
+                        class="rounded-xl border border-emerald-100/80 bg-gradient-to-br from-emerald-50 to-teal-50/40 p-4 transition hover:border-emerald-200/90"
+                    >
+                        <p class="text-xs font-medium text-slate-600">完成率</p>
+                        <p class="mt-2 text-3xl font-bold tabular-nums tracking-tight text-emerald-700">—</p>
+                    </div>
+                    <div
+                        class="rounded-xl border border-amber-100/80 bg-gradient-to-br from-amber-50 to-orange-50/30 p-4 transition hover:border-amber-200/90"
+                    >
+                        <p class="text-xs font-medium text-slate-600">异常</p>
+                        <p class="mt-2 text-3xl font-bold tabular-nums tracking-tight text-amber-800">—</p>
+                    </div>
+                </div>
+            </div>
+
+            <div
+                class="min-h-[220px] rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_8px_30px_-8px_rgb(15_23_42/0.06)] lg:col-span-2"
+            >
+                <h2 class="text-sm font-semibold text-slate-800">主列 · 16/24</h2>
+                <p class="mt-2 text-sm leading-relaxed text-slate-500">图表、列表或嵌入完整业务原型 HTML。</p>
+                <div class="mt-4 h-28 rounded-xl border border-dashed border-slate-200 bg-slate-50/80"></div>
+            </div>
+
+            <div
+                class="min-h-[220px] rounded-2xl border border-slate-200/80 bg-gradient-to-b from-white to-slate-50/50 p-5 shadow-[0_8px_30px_-8px_rgb(15_23_42/0.06)]"
+            >
+                <h2 class="text-sm font-semibold text-slate-800">辅列 · 8/24</h2>
+                <p class="mt-2 text-sm leading-relaxed text-slate-500">快捷入口、说明与外链。</p>
+                <ul class="mt-4 space-y-2 text-sm text-indigo-600">
+                    <li class="flex items-center gap-2">
+                        <span class="h-1 w-1 rounded-full bg-indigo-400"></span>
+                        <span class="cursor-default hover:underline">文档中心</span>
+                    </li>
+                    <li class="flex items-center gap-2">
+                        <span class="h-1 w-1 rounded-full bg-indigo-400"></span>
+                        <span class="cursor-default hover:underline">发布说明</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </body>
+</html>

package/dist/deppon-prd-generator/examples/app-shell-navigation/pages/demo-list.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>列表示例</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,500;0,9..40,600;0,9..40,700&display=swap" rel="stylesheet" />
+        <script>
+            tailwind.config = {
+                theme: { extend: { fontFamily: { sans: ['"DM Sans"', 'system-ui', 'PingFang SC', 'sans-serif'] } } },
+            };
+        </script>
+    </head>
+    <body class="min-h-full bg-gradient-to-b from-slate-50 to-white p-6 text-slate-800 antialiased">
+        <div class="mb-6">
+            <p class="text-[11px] font-semibold uppercase tracking-wider text-indigo-600/90">Product</p>
+            <h1 class="mt-1 text-xl font-bold tracking-tight text-slate-900">产品折扣列表</h1>
+            <p class="mt-1 text-sm text-slate-500">演示子页 · 可替换为完整 CRUD 原型。</p>
+        </div>
+        <div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-[0_8px_30px_-8px_rgb(15_23_42/0.08)]">
+            <div class="border-b border-slate-100 bg-slate-50/50 px-4 py-3">
+                <span class="text-xs font-semibold text-slate-600">数据表格</span>
+            </div>
+            <table class="min-w-full text-left text-sm">
+                <thead class="border-b border-slate-100 bg-white text-xs font-semibold uppercase tracking-wide text-slate-500">
+                    <tr>
+                        <th class="px-4 py-3">折扣名称</th>
+                        <th class="px-4 py-3">状态</th>
+                        <th class="px-4 py-3 text-right">操作</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-100">
+                    <tr class="transition hover:bg-slate-50/80">
+                        <td class="px-4 py-3.5 font-medium text-slate-800">示例 9 折</td>
+                        <td class="px-4 py-3.5"><span class="rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">启用</span></td>
+                        <td class="px-4 py-3.5 text-right text-xs font-medium">
+                            <span class="text-indigo-600 hover:text-indigo-800">编辑</span>
+                            <span class="mx-2 text-slate-300">|</span>
+                            <span class="text-rose-600 hover:text-rose-800">删除</span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </body>
+</html>