@deppon/deppon-skills 2.4.16 → 2.4.20

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

@@ -0,0 +1,164 @@
+# 管理台壳层与首页栅格导航 PRD（参考示例）
+
+> **文档说明**：本文件位于技能目录 `examples/app-shell-navigation/`，对应 **`app-shell-navigation-prd-template.md`**，描述**侧栏 + 顶栏 + 主区栅格 + 多页静态跳转**（iframe 方案）。供搭建「PRD 文档中心（多子页导航）」时对照。实际产出写入 `src/prototypes/<项目目录名>/prd.md`。
+
+> **交互原型**：[打开 prototype.html](./prototype.html)（同目录另含 `pages/*.html`；须 **HTTP** 打开所在目录，以便加载子页与 `fetch('prd.md')`）。
+>
+> **布局速查**：同目录 `layout-spec.md`（栅格 24、180/56 侧栏、56 顶栏、16/24px 间距）可与本 PRD §3、§4 对照维护。
+
+---
+
+## 1. 引言
+
+### 1.1 背景
+
+为 PRD 评审与走查提供统一的管理台壳层：固定侧栏与顶栏，主工作区通过 iframe 加载各业务子页原型，支持在「首页栅格」「列表示例」「表单示例」间点击切换，无需启动业务前端工程。
+
+### 1.2 功能清单
+
+| 模块     | 功能点   | 功能描述 |
+| -------- | -------- | -------- |
+| 壳层原型 | 全局布局 | 侧栏 180px / 收起 56px、顶栏 56px、主区与周边 16px 间距、底边距 24px |
+| 壳层原型 | 侧栏导航 | 一级展开二级；悬停二级「应用市场」类项展示三级飞层；收起仅图标 |
+| 壳层原型 | 顶栏页签 | 顶栏右侧占位；可选页签条与 iframe 地址同步（本示例为简化静态页签） |
+| 壳层原型 | 子页承载 | `pages/demo-home.html` / `demo-list.html` / `demo-form.html` 在主页 iframe 内打开 |
+| 壳层原型 | PRD 标注 | 壳层区块琥珀色标注弹框，切片本 `prd.md`（与技能技术约定一致） |
+
+---
+
+## 2. 页面菜单与权限规划
+
+### 2.1 入口与菜单树
+
+**入口**：静态 `prototype.html`（壳层主入口）。
+
+**菜单树（示例）**：
+
+- 工作台 → `pages/demo-home.html`
+- 产品管理（一级）
+  - 折扣与价格（二级）
+    - 产品折扣列表（三级）→ `pages/demo-list.html`
+    - 新建折扣（演示）（三级）→ `pages/demo-form.html`
+
+### 2.2 权限规划
+
+| 权限点 | 操作范围 | 数据范围 |
+| ------ | -------- | -------- |
+| 查看   | 浏览壳层、打开示例子页 | 示例无鉴权 |
+| 编辑   | 真实项目中对子页编辑入口的显示控制 | 以 UUMS / RBAC 为准 |
+
+---
+
+## 3. 全局布局与栅格
+
+### 3.1 尺寸与间距
+
+| 区域 | 规格 | 说明 |
+| ---- | ---- | ---- |
+| 侧栏宽度（展开） | 180px | 与视觉稿「首页栅格」侧栏一致 |
+| 侧栏宽度（收起） | 56px | 仅图标；悬停 Tooltip 菜单名 |
+| 顶栏高度 | 56px | 固定 |
+| 主区与侧栏间距 | 16px | `gap` 实现 |
+| 顶栏与主区间距 | 16px | 顶栏底到主区顶 |
+| 主区内模块间距 | 16px | 卡片间距 |
+| 页面底边距 | 24px | 主区 `padding-bottom` |
+| 栅格体系 | 24 栅格 | 主区内逻辑栅格，用于首页分栏比例 |
+
+### 3.2 主工作区栅格
+
+- **顶通栏**：占满主区宽；放 KPI 卡片区（演示）。
+- **下区左列**：约 **16/24** 栅格（2/3）；列表或主内容。
+- **下区右列**：约 **8/24** 栅格（1/3）；快捷说明或辅信息。
+
+---
+
+## 4. 侧栏导航
+
+### 4.1 一级菜单
+
+| 项 | 说明 |
+| -- | ---- |
+| 行高 | 52px（与侧栏导航规范图一致） |
+| 水平留白 | 左 18px、图标与文案 8px、右 18px（示意，原型用 Tailwind 近似） |
+| 展开指示 | 右侧 chevron；展开后背景浅蓝、图标主色 |
+| 选中态 | 浅蓝底 + 主色图标 |
+
+### 4.2 二级菜单
+
+- 点击一级展开二级；本示例**不强制手风琴**（可同时展开多组，可按产品改为互斥）。
+
+### 4.3 三级菜单（飞层）
+
+- **触发**：鼠标悬停带三级的二级项，右侧浮出白卡片列表；点击三级项在 iframe 打开对应 `pages/*.html`。
+- **关闭**：鼠标移出飞层区域后收起；`Esc` 关闭飞层（与焦点管理以最终实现为准）。
+
+### 4.4 收起导航
+
+- 侧栏右缘中部 **◀/▶** 切换；收起宽度 56px。
+- 当前一级在收起态下以 **蓝色描边图标底** 表示 active（示意）。
+
+---
+
+## 5. 顶栏与页签区
+
+| 元素 | 行为与内容 |
+| ---- | ---------- |
+| 产品名 | 左侧品牌区展示「PRD 文档中心 / 交互原型」（简体中文） |
+| 页签 | 本示例为静态标签：工作台 / 列表 / 表单；点击同步切换 iframe `src` |
+| 右侧区 | 搜索框、通知、用户头像为占位，无真实逻辑 |
+
+---
+
+## 6. 多页跳转与 PRD 项目目录约定
+
+**本示例目录**：
+
+```text
+examples/app-shell-navigation/
+  prd.md
+  prototype.html          # 壳层入口
+  pages/
+    demo-home.html
+    demo-list.html
+    demo-form.html
+```
+
+**跳转**：侧栏与顶栏链接使用 `href="pages/xxx.html"` + `target="prdMainFrame"`，与主区 `<iframe name="prdMainFrame">` 配合。
+
+**复制到业务仓库时**：将整树复制到 `src/prototypes/<项目目录名>/`，子页路径保持不变即可相对引用。
+
+---
+
+## 7. 权限与菜单可见性
+
+示例不鉴权；落地时按角色隐藏菜单项或禁用点击，并在无权限访问子页时重定向或提示。
+
+---
+
+## 8. 无障碍与响应式
+
+- 侧栏折叠：`aria-expanded` 绑定在折叠按钮。
+- 飞层：原型使用 `role="navigation"` 与 `aria-hidden` 切换；生产应对齐组件库焦点策略。
+- **本期**：桌面优先；小屏策略可后续补充「抽屉侧栏」。
+
+---
+
+## 9. 原型与 PRD 对应关系
+
+| PRD 章节 | prototype.html 演示点 |
+| -------- | ---------------------- |
+| §3 | 侧栏宽、顶栏高、主区 `pb-6` 与间距 |
+| §4.1–4.2 | 一级展开、二级列表 |
+| §4.3 | 「折扣与价格」下悬停二级出现三级飞层 |
+| §4.4 | 折叠按钮切换 180px / 56px |
+| §5 | 顶栏 + 页签条切换 iframe |
+| §6 | 各链接打开 `pages/` 下不同 HTML |
+| 走查说明 | 左下角「标注说明」→ 切片本文件 §9 |
+
+---
+
+## 10. 修订记录
+
+| 版本 | 日期 | 说明 |
+| ---- | ---- | ---- |
+| v0.1 | 2026-05-14 | 初版：栅格壳层 + iframe 多页 + 标注 |