npm - @deppon/deppon-skills - Versions diffs - 2.4.16 → 2.4.20 - Mend

@deppon/deppon-skills 2.4.16 → 2.4.20

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.

Files changed (35) hide show

package/dist/deppon-prd-generator/examples/user-frontend/prd.md ADDED Viewed

@@ -0,0 +1,86 @@
+# 春季拉新活动页 PRD（产品需求文档）
+> **文档说明**：本文件位于技能目录 `examples/user-frontend/`，对应 **`user-frontend-prd-template.md`**（用户角色 + 功能模块 + 交互流程）。实际产出写入 `src/prototypes/<page-name>/prd.md`。
+> **交互原型**：[打开 prototype.html](./prototype.html)；标注 **`fetch` 同目录 `prd.md`**；须 **HTTP** 打开。
+---
+## 1. 引言
+### 1.1 背景
+C 端活动页：向新用户展示权益与参与规则，引导完成注册/领券；需兼容移动端首屏与分享落地。
+### 1.2 用户角色
+| 用户角色 | 描述       | 使用场景   |
+| -------- | ---------- | ---------- |
+| 游客     | 未登录访客 | 浏览活动规则 |
+| 新用户   | 首次注册   | 领券、参与活动 |
+### 1.3 功能清单
+| 模块   | 功能点   | 功能描述           |
+| ------ | -------- | ------------------ |
+| 活动页 | 首屏展示 | 主标题、权益、主 CTA |
+| 活动页 | 规则说明 | 折叠/锚点查看细则  |
+| 活动页 | 立即参与 | 跳转注册或唤起登录 |
+---
+## 2. 春季活动落地页需求说明
+### 2.1 首屏与权益说明
+#### 2.1.1 功能描述
+首屏包含主视觉、活动标题、核心权益三点、主按钮「立即参与」；向下滚动可见规则摘要。
+#### 2.1.2 交互流程
+1. **触发条件**：用户进入 H5/PC 落地页。
+2. **操作步骤**：
+   - 步骤1：浏览首屏权益。
+   - 步骤2：点击「立即参与」。
+3. **操作反馈**：
+   - 成功：已登录跳转任务页；未登录跳转注册（原型 Toast 模拟）。
+   - 失败：网络错误时轻提示。
+### 2.2 规则与 FAQ
+#### 2.2.1 功能描述
+折叠面板展示活动时间、参与资格、奖品发放说明。
+#### 2.2.2 交互流程
+1. **触发条件**：点击「活动规则」标题。
+2. **操作步骤**：展开/收起面板。
+3. **操作反馈**：`aria-expanded` 同步。
+---
+## 3. 交互与反馈
+主 CTA 使用品牌主色；次要链接下划线；Toast 与 Loading 遵循设计规范；分享缩略图与标题由运营配置（非本页范围）。
+---
+## 9. 原型与 PRD 对应关系
+| PRD 章节 | prototype.html 演示点 |
+| -------- | ---------------------- |
+| §1       | 页内「PRD §1」         |
+| §2.1     | 首屏区「PRD §2.1」     |
+| §2.2     | 规则折叠「PRD §2.2」   |
+| §3       | 全局反馈说明入口       |
+| 走查说明 | 左下角「标注说明」     |
+---
+## 10. 修订记录
+| 版本 | 日期       | 说明 |
+| ---- | ---------- | ---- |
+| v0.1 | 2026-05-14 | 初版：对齐 user-frontend 模板示例 |

package/dist/deppon-prd-generator/examples/user-frontend/prototype.html ADDED Viewed

@@ -0,0 +1,223 @@
+<!--
+  技能示例 examples/user-frontend/ — 对齐 user-frontend-prd-template
+  fetch prd.md；须 HTTP。
+-->
+<!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>
+        <style>
+            .anno-trigger {
+                display: inline-flex;
+                border-radius: 0.375rem;
+                border: 1px solid rgba(253, 224, 71, 0.9);
+                background: rgba(254, 249, 195, 0.95);
+                padding: 0.15rem 0.5rem;
+                font-size: 0.65rem;
+                font-weight: 700;
+                color: rgb(66 32 6);
+                cursor: pointer;
+            }
+            #annoDlgBody .prd-md table {
+                width: 100%;
+                border-collapse: collapse;
+                font-size: 0.75rem;
+            }
+            #annoDlgBody .prd-md th,
+            #annoDlgBody .prd-md td {
+                border: 1px solid rgb(226 232 240);
+                padding: 0.35rem;
+            }
+        </style>
+    </head>
+    <body class="min-h-screen bg-gradient-to-b from-rose-50 to-white text-slate-900">
+        <div id="prdLoadBanner" class="hidden border-b border-amber-400 bg-amber-100 px-4 py-2 text-center text-xs text-amber-950"></div>
+        <div id="toast" class="fixed top-4 right-4 z-[60] hidden rounded-lg bg-slate-900 px-4 py-2 text-sm text-white"></div>
+        <button type="button" id="btnAnnoLegend" class="fixed bottom-5 left-5 z-[65] rounded-full border border-amber-500 bg-white/90 px-3 py-2 text-xs shadow">
+            标注说明
+        </button>
+        <header class="border-b border-rose-100/80 bg-white/70 backdrop-blur">
+            <div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
+                <span class="text-sm font-medium text-rose-900">春季拉新</span>
+                <button type="button" class="anno-trigger" data-anno-key="s1">PRD §1</button>
+            </div>
+        </header>
+        <main class="mx-auto max-w-3xl px-4 py-10">
+            <section class="relative rounded-2xl border border-rose-100 bg-white/90 p-8 shadow-lg">
+                <button type="button" class="anno-trigger absolute right-4 top-4" data-anno-key="s21">§2.1</button>
+                <p class="text-xs font-semibold uppercase tracking-widest text-rose-600">限时活动</p>
+                <h1 class="mt-2 text-3xl font-bold text-slate-900">邀请好友 · 双倍权益</h1>
+                <p class="mt-3 text-sm leading-relaxed text-slate-600">
+                    完成注册并实名，即得优惠券包；分享链接再得积分（原型数据为示意）。
+                </p>
+                <button
+                    type="button"
+                    id="btnCta"
+                    class="mt-6 w-full rounded-xl bg-blue-600 py-3 text-center text-sm font-semibold text-white shadow-md hover:bg-blue-700 sm:w-auto sm:px-10"
+                >
+                    立即参与
+                </button>
+            </section>
+            <section class="mt-8 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+                <button type="button" class="anno-trigger float-right ml-2" data-anno-key="s22">§2.2</button>
+                <h2 class="text-base font-semibold text-slate-900">活动规则</h2>
+                <details class="mt-3 text-sm text-slate-600" open>
+                    <summary class="cursor-pointer font-medium text-slate-800">时间与资格</summary>
+                    <ul class="mt-2 list-disc space-y-1 pl-5">
+                        <li>活动时间：以运营后台配置为准。</li>
+                        <li>新用户定义：近 90 天无注册记录的手机号。</li>
+                    </ul>
+                </details>
+            </section>
+            <p class="mt-8 text-center">
+                <button type="button" class="anno-trigger" data-anno-key="s3">PRD §3 交互与反馈</button>
+            </p>
+        </main>
+        <div id="modalAnno" class="fixed inset-0 z-[70] hidden items-center justify-center bg-slate-900/55 p-4" role="dialog">
+            <div 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">
+                <div class="flex shrink-0 justify-between border-b border-amber-200 bg-amber-50 px-4 py-2">
+                    <h3 id="annoDlgTitle" class="truncate text-sm font-semibold"></h3>
+                    <button type="button" id="btnAnnoClose">✕</button>
+                </div>
+                <div id="annoDlgBody" class="min-h-0 flex-1 overflow-auto p-4 text-sm" tabindex="-1"></div>
+            </div>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
+        <script>
+            function runPrototype(prdMd, prdLoadError) {
+                function $(id) {
+                    return document.getElementById(id);
+                }
+                function escapeHtml(s) {
+                    return String(s)
+                        .replace(/&/g, '&amp;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;')
+                        .replace(/"/g, '&quot;');
+                }
+                if (typeof marked !== 'undefined' && marked.use) marked.use({ gfm: true, breaks: true });
+                var ban = $('prdLoadBanner');
+                if (ban && (!prdMd || prdLoadError)) {
+                    ban.textContent = '未加载 prd.md：请用 HTTP 打开本目录。';
+                    ban.classList.remove('hidden');
+                }
+                function sliceBetween(md, startRe, endRe) {
+                    if (!md) return '';
+                    var m = md.match(startRe);
+                    if (!m || m.index === undefined) return '';
+                    var i0 = m.index;
+                    if (!endRe) return md.slice(i0).trim();
+                    var tail = md.slice(i0 + m[0].length);
+                    var j = tail.search(endRe);
+                    if (j === -1) return md.slice(i0).trim();
+                    return md.slice(i0, i0 + m[0].length + j).trim();
+                }
+                function mdToHtml(src) {
+                    if (!src) return '<p class="text-xs">（无）</p>';
+                    if (typeof marked !== 'undefined' && marked.parse)
+                        return '<div class="prd-md">' + marked.parse(src) + '</div>';
+                    return '<pre class="text-xs">' + escapeHtml(src) + '</pre>';
+                }
+                var LEG = '<p class="text-sm">C 端页标注与 <strong>prd.md</strong> 联动。</p>';
+                var EX = {
+                    s1: { start: /^## 1\./m, end: /^## 2\./m, title: 'prd.md §1' },
+                    s21: { start: /^### 2\.1/m, end: /^### 2\.2/m, title: 'prd.md §2.1' },
+                    s22: { start: /^### 2\.2/m, end: /^## 3\./m, title: 'prd.md §2.2' },
+                    s3: { start: /^## 3\./m, end: /^## 9\./m, title: 'prd.md §3' },
+                };
+                var FB = {
+                    s1: { html: '<p class="text-xs">兜底</p>' },
+                    s21: { html: '<p class="text-xs">兜底</p>' },
+                    s22: { html: '<p class="text-xs">兜底</p>' },
+                    s3: { html: '<p class="text-xs">兜底</p>' },
+                };
+                function openAnno(key) {
+                    var w =
+                        !prdMd || prdLoadError
+                            ? '<div class="mb-2 rounded bg-amber-50 p-2 text-xs">prd 未联动</div>'
+                            : '';
+                    if (key === 'legend') {
+                        $('annoDlgTitle').textContent = '说明 · §9';
+                        var s9 = prdMd ? sliceBetween(prdMd, /^## 9\./m, /^## 10\./m) : '';
+                        $('annoDlgBody').innerHTML = w + LEG + (s9 ? '<div class="mt-2">' + mdToHtml(s9) + '</div>' : '');
+                        show();
+                        return;
+                    }
+                    var sp = EX[key];
+                    if (!sp) return;
+                    var sl = prdMd ? sliceBetween(prdMd, sp.start, sp.end) : '';
+                    $('annoDlgTitle').textContent = sp.title;
+                    $('annoDlgBody').innerHTML = w + (sl ? mdToHtml(sl) : FB[key].html);
+                    show();
+                }
+                function show() {
+                    $('modalAnno').classList.remove('hidden');
+                    $('modalAnno').classList.add('flex');
+                    $('annoDlgBody').scrollTop = 0;
+                }
+                function closeAnno() {
+                    $('modalAnno').classList.add('hidden');
+                    $('modalAnno').classList.remove('flex');
+                }
+                document.addEventListener(
+                    'click',
+                    function (e) {
+                        var t = e.target.closest('[data-anno-key]');
+                        if (!t) return;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        openAnno(t.getAttribute('data-anno-key'));
+                    },
+                    true,
+                );
+                $('btnAnnoClose').addEventListener('click', closeAnno);
+                $('modalAnno').addEventListener('click', function (e) {
+                    if (e.target === $('modalAnno')) closeAnno();
+                });
+                $('btnAnnoLegend').addEventListener('click', function () {
+                    openAnno('legend');
+                });
+                document.addEventListener('keydown', function (e) {
+                    if (e.key === 'Escape' && !$('modalAnno').classList.contains('hidden')) closeAnno();
+                });
+                function toast(m) {
+                    var el = $('toast');
+                    el.textContent = m;
+                    el.classList.remove('hidden');
+                    clearTimeout(el._t);
+                    el._t = setTimeout(function () {
+                        el.classList.add('hidden');
+                    }, 2000);
+                }
+                $('btnCta').addEventListener('click', function () {
+                    toast('跳转注册 / 登录（模拟）');
+                });
+            }
+            fetch('prd.md', { cache: 'no-store' })
+                .then(function (r) {
+                    if (!r.ok) throw new Error();
+                    return r.text();
+                })
+                .then(function (t) {
+                    runPrototype(t, null);
+                })
+                .catch(function () {
+                    runPrototype('', new Error());
+                });
+        </script>
+    </body>
+</html>

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

@@ -0,0 +1,170 @@
+# deppon-prd-generator 快速参考指南
+**语言**：`prd.md` 与 `prototype.html` 中用户可见文案须按本技能默认**简体中文**（另有约定时从其指令）；详见 `SKILL.md`「语言与文案」与「本技能对执行者的硬性要求」。
+**PRD↔原型**：同目录有 `prototype.html` 时，`prd.md` 文首须有 `[描述](./prototype.html)` 相对链接；见 `SKILL.md`「PRD 与原型互链」。
+## 🚀 快速开始
+### 一句话命令
+```
+帮我生成 [页面路径] 的PRD
+```
+### 示例
+```
+帮我生成 data-search 页面的PRD
+帮我生成 src/prototypes/xyop-ciku-list 的PRD
+```
+---
+## 📋 页面类型速查表
+| 图标 | 类型           | 适用场景                          | 模板                                 |
+| ---- | -------------- | --------------------------------- | ------------------------------------ |
+| 📊   | 数据看板类     | 统计看板、报表分析、指标监控      | data-prd-template.md；先读 `examples/data-dashboard/` |
+| 📋   | 后台列表类     | 数据列表、查询列表、台账管理      | backend-list-prd-template.md；纯列表 `examples/backend-list/`；含 CRUD `examples/list-crud/` |
+| ✏️   | 后台表单编辑类 | 新增/编辑表单、配置管理、数据录入 | backend-form-edit-prd-template.md；先读 `examples/form-edit/` |
+| 👁️   | 后台表单预览类 | 详情查看、预览页面、只读页面      | backend-form-preview-prd-template.md；先读 `examples/form-preview/` |
+| 🎨   | 用户前台类     | C 端页面、营销活动、产品展示      | user-frontend-prd-template.md；先读 `examples/user-frontend/` |
+| 🧭   | 壳层与多页导航 | 文档中心壳层、侧栏顶栏、多子页互跳     | app-shell-navigation-prd-template.md；先读 `examples/app-shell-navigation/`（含 `layout-spec.md`） |
+---
+## 🎯 指定页面类型
+如果需要强制使用某种类型，可以这样说：
+```
+帮我生成 [页面路径] 的PRD，使用数据看板类模板
+帮我生成 [页面路径] 的PRD，使用后台列表类模板
+```
+---
+## 🔍 指定功能范围
+如果只需要生成部分功能的 PRD：
+```
+帮我生成 [页面路径] 的PRD，只包含筛选和列表部分
+帮我生成 [页面路径] 的PRD，重点关注表单编辑功能
+```
+---
+## 📁 文件结构
+```
+skills/deppon-prd-generator/
+├── SKILL.md                    # 主技能文档
+├── workflow.md                 # 详细工作流程
+├── quick-reference.md          # 本文件 - 快速参考
+├── examples/                   # 内置参考示例（见 examples/README.md）
+│   ├── data-dashboard/
+│   ├── backend-list/
+│   ├── list-crud/
+│   ├── form-edit/
+│   ├── form-preview/
+│   ├── user-frontend/
+│   └── app-shell-navigation/
+└── 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     # 用户前台模板
+    └── app-shell-navigation-prd-template.md # 壳层与多页导航模板
+```
+---
+## ✅ 输出检查清单
+生成 PRD 后，请确认：
+-   [ ] 已按页面类型对照阅读 `examples/<子目录>/prd.md`（见 `examples/README.md` / `SKILL.md` 映射表；将交付原型时含同目录 `prototype.html`）
+-   [ ] 文件保存在正确位置：`src/prototypes/<page-name>/prd.md`
+-   [ ] 文件名正确：`prd.md`（小写）
+-   [ ] 内容与页面实现一致
+-   [ ] 内容与 spec.md 一致（如果有）
+-   [ ] 没有遗漏核心功能
+-   [ ] 使用了研发/测试通用术语
+-   [ ] 结构清晰、层次分明
+若同时生成高保真可交互原型：
+-   [ ] `src/prototypes/<page-name>/prototype.html` 可用浏览器直接打开（默认 Tailwind Play CDN）
+-   [ ] 主要交互可演示；与 `prd.md` 描述一致
+-   [ ] **含 PRD 标注弹框**：分区触发、弹层内章节号与要点、与业务弹窗区分、可 ESC/遮罩关闭
+-   [ ] 常规主操作按钮为主题蓝实心（见 `SKILL.md` 技术约定第 8 条），与次要/危险按钮区分
+-   [ ] （推荐）标注正文与 `prd.md` 联动、长内容可滚动、`file://` 有兜底（第 9 条）
+---
+## 💡 常用提示词
+### 基础使用
+```
+帮我生成 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/app-shell-navigation-prd-template.md ADDED Viewed

@@ -0,0 +1,180 @@
+# [壳层 / 项目名称] 管理台壳层与导航 PRD（产品需求文档）
+> **生成时对照**：生成前阅读本技能目录 `examples/app-shell-navigation/prd.md`、`layout-spec.md`（首页栅格/间距速查）与（若交付原型）`examples/app-shell-navigation/prototype.html`，对齐**栅格尺寸、侧栏层级、多页目录约定、iframe/路由跳转**写法。`prd.md` 与原型可见文案默认**简体中文**（见本技能 `SKILL.md`「语言与文案」）。用户仓库产出：`src/prototypes/<项目目录名>/prd.md`；子页面建议 `src/prototypes/<项目目录名>/pages/*.html` 与壳层 `prototype.html` 同级或子目录。
+> **交互原型链接（有 `prototype.html` 时必填）**：文首加入 `- **交互原型**：[打开 prototype.html](./prototype.html)`（壳层主入口）；仅无原型时删除。见 `SKILL.md`「PRD 与原型互链」。
+---
+## 1. 引言
+### 1.1 背景
+```
+[说明：本壳层解决「多业务子页在同一管理台内统一导航、顶栏、页签」的问题；PRD 评审可在壳层原型中点击菜单/页签切换不同静态子页。控制在约 80 字内。]
+```
+### 1.2 功能清单
+> 壳层 PRD **需要**描述顶栏、侧栏、页签、主区占位与跨页跳转规则；与子页 PRD（列表/表单等）区分边界：子页字段与接口以各子目录 `prd.md` 为准。
+| 模块       | 功能点     | 功能描述 |
+| ---------- | ---------- | -------- |
+| `[壳层名]` | 全局布局   | 侧栏 + 顶栏 + 主工作区；栅格与间距见 §3 |
+| `[壳层名]` | 侧栏导航   | 一级 / 二级 / 三级（含飞层）与收起态，见 §4 |
+| `[壳层名]` | 顶栏与页签 | Logo、面包屑或页签、用户区等，见 §5 |
+| `[壳层名]` | 子页承载   | iframe 或前端路由；子页 URL 与目录约定见 §6 |
+| `[壳层名]` | 权限控制   | 菜单/路由可见性，见 §7 |
+---
+## 2. 页面菜单与权限规划
+### 2.1 入口与菜单树
+**入口**：`[URL 或功能码入口说明]`
+**菜单树（与侧栏一致）**：
+```
+[一级]
+  ├─ [二级] → 子页：[文件名或路由 path]
+  └─ ...
+```
+### 2.2 权限规划
+| 权限点 | 操作范围 | 数据范围 |
+| ------ | -------- | -------- |
+| 查看   | 进入壳层、可见菜单与可打开子页（只读场景） | `[个人/租户/全量]` |
+| 编辑   | 含配置类子页的新增/编辑（若壳层内嵌配置入口） | `[同上]` |
+---
+## 3. 全局布局与栅格
+### 3.1 尺寸与间距
+> 与视觉规范对齐；下列为**推荐默认值**（可按设计令牌替换）。
+| 区域 | 规格 | 说明 |
+| ---- | ---- | ---- |
+| 侧栏宽度（展开） | `[如 180px]` | 固定宽，内容区横向滚动不出现双滚动条为宜 |
+| 侧栏宽度（收起） | `[如 56px]` | 仅展示图标；Tooltip 展示全称 |
+| 顶栏高度 | `[如 56px]` | 固定高 |
+| 主区与侧栏间距 | `[如 16px]` | 侧栏右缘到主区 |
+| 顶栏与主区间距 | `[如 16px]` | 顶栏底缘到主区顶 |
+| 主区内模块间距 | `[如 16px]` | 卡片/区块之间 |
+| 页面底边距 | `[如 24px]` | 避免内容贴底 |
+| 栅格体系 | `[如 24 栅格]` | 主区内区块按列占位；大屏断点 `[列举]` |
+### 3.2 主工作区栅格
+> 描述首页或默认 landing 在主区内的分栏（如顶通栏 + 下区 2:1 双列）。
+- **顶通栏**：`[占满主区宽 / 占 N 栅格]`；用途：`[摘要/筛选/横幅]`。
+- **下区左列**：约 `[2/3]` 宽或 `[16/24 栅格]`；用途：`[列表/图表]`。
+- **下区右列**：约 `[1/3]` 宽或 `[8/24 栅格]`；用途：`[快捷入口/说明]`。
+---
+## 4. 侧栏导航
+### 4.1 一级菜单
+| 项 | 说明 |
+| -- | ---- |
+| 行高 | `[如 52px]` |
+| 左内边距 / 图标与文案间距 / 右内边距 | `[如 18px / 8px / 18px]` |
+| 展开指示 | 右侧 chevron；展开后旋转或向上 |
+| 选中态 | `[背景色 + 文字色 + 左侧条等]` |
+### 4.2 二级菜单
+- 点击一级展开/收起二级；**手风琴**是否互斥：`[是/否]`。
+- 二级项无图标或统一弱图标：`[说明]`。
+### 4.3 三级菜单（飞层）
+- **触发**：悬停二级项展开右侧浮层；**或**点击展开（二选一，写明）。
+- 浮层：白底、阴影、与侧栏对齐的左边距；**键盘**：`Esc` 关闭飞层。
+- 当前页在三级中**高亮**规则：`[与路由 path 匹配]`。
+### 4.4 收起导航
+- 切换按钮位置：`[侧栏右缘中部/顶栏左侧等]`。
+- 收起后：仅图标；当前一级 `active` 样式：`[描边/底色]`。
+- **Tooltip**：鼠标悬停图标展示菜单全称。
+---
+## 5. 顶栏与页签区
+| 元素 | 行为与内容 |
+| ---- | ---------- |
+| Logo / 产品名 | `[点击回首页或外链]` |
+| 页签（若启用） | 与打开的子页同步；可关闭；**右键菜单**（可选）：关闭其他/全部 |
+| 搜索 / 消息 / 用户 | `[占位说明，链到各子 PRD 若需要]` |
+---
+## 6. 多页跳转与文档中心目录约定
+> 目标：评审时在**不启动业务工程**的情况下，通过壳层在多个静态子页间跳转。
+**推荐目录（与 `deppon-prd-generator` 技能一致）**：
+```text
+src/prototypes/<项目目录名>/
+  prd.md                 # 本壳层 PRD
+  prototype.html         # 壳层入口（含侧栏/顶栏/主 iframe 或路由容器）
+  pages/
+    <feature-a>.html     # 子页原型 A
+    <feature-b>.html     # 子页原型 B
+    ...
+```
+**跳转实现（二选一或组合）**：
+| 方案 | 适用 | 说明 |
+| ---- | ---- | ---- |
+| A. iframe + `target` | 纯静态、零构建 | 侧栏 `<a href="pages/xxx.html" target="[iframe name]">`；子页独立 HTML，各自可带 PRD 标注 |
+| B. 前端路由（hash） | 单页壳 + 多 section | `location.hash` 切换主区内模板；子区块可拆文件后构建期合并 |
+| C. 多文件整页跳转 | 最简单 | `<a href="pages/xxx.html">` 整页替换；壳层重复则需每页引用同一壳或接受无壳 |
+**打开方式**：若子页或壳层使用 `fetch('prd.md')`，须 **HTTP 打开** 对应目录（勿依赖 `file://`）。
+---
+## 7. 权限与菜单可见性
+- 无权限的一级/二级：**隐藏**或**置灰并禁用**（写明策略）。
+- 深链：用户打开无权限路由时的跳转：`[403 页 / 首页 / 提示条]`。
+---
+## 8. 无障碍与响应式
+- 侧栏折叠按钮：`aria-expanded`；导航容器：`nav` + 当前项 `aria-current="page"`（若适用）。
+- 飞层：`role="menu"` 或 `dialog`（按实现选型）与焦点陷阱（若 modal）。
+- 小屏：`[侧栏改为抽屉 / 底栏等]`（若本期不做，写「本期仅桌面」）。
+---
+## 9. 原型与 PRD 对应关系
+| PRD 章节 | 原型演示点 |
+| -------- | ---------- |
+| §3 | 侧栏/顶栏/主区间距与主区栅格占位 |
+| §4 | 一级展开、三级飞层、收起态 |
+| §5 | 顶栏与页签（若有） |
+| §6 | 点击菜单/页签切换 `pages/` 下子页 |
+| §8 | 焦点与 Esc 行为（与实现一致部分） |
+---
+## 10. 修订记录
+| 版本 | 日期 | 说明 |
+| ---- | ---- | ---- |
+| v0.1 | `[YYYY-MM-DD]` | 初稿 |