npm - @deppon/deppon-skills - Versions diffs - 2.4.18 → 2.4.21 - Mend

@deppon/deppon-skills 2.4.18 → 2.4.21

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 (30) hide show

package/dist/deppon-prd-generator/examples/form-edit/prototype.html ADDED Viewed

@@ -0,0 +1,280 @@
+<!--
+  技能示例 examples/form-edit/ — 对齐 backend-form-edit-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;
+                align-items: center;
+                border-radius: 0.375rem;
+                border: 1px solid rgba(217, 119, 6, 0.85);
+                background: rgba(254, 243, 199, 0.95);
+                padding: 0.15rem 0.5rem;
+                font-size: 0.625rem;
+                font-weight: 700;
+                color: rgb(69 26 3);
+                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 0.45rem;
+            }
+        </style>
+    </head>
+    <body class="min-h-screen bg-slate-100">
+        <div id="prdLoadBanner" class="hidden border-b border-amber-300 bg-amber-100 px-4 py-2 text-center text-xs"></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-400 bg-white px-3 py-2 text-xs shadow"
+        >
+            标注说明
+        </button>
+        <header class="border-b bg-white px-4 py-4">
+            <div class="mx-auto flex max-w-2xl items-start gap-2">
+                <h1 class="text-lg font-semibold text-slate-900">通知模板配置</h1>
+                <button type="button" class="anno-trigger mt-0.5" data-anno-key="s1">PRD §1</button>
+                <button type="button" class="anno-trigger mt-0.5" data-anno-key="s2">PRD §2</button>
+            </div>
+        </header>
+        <main class="mx-auto max-w-2xl px-4 py-6">
+            <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+                <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
+                    <h2 class="text-sm font-semibold text-slate-900">表单</h2>
+                    <div class="flex flex-wrap gap-1">
+                        <button type="button" class="anno-trigger" data-anno-key="s31">§3.1</button>
+                        <button type="button" class="anno-trigger" data-anno-key="s32">§3.2</button>
+                        <button type="button" class="anno-trigger" data-anno-key="s33">§3.3</button>
+                        <button type="button" class="anno-trigger" data-anno-key="s34">§3.4</button>
+                        <button type="button" class="anno-trigger" data-anno-key="s4">§4</button>
+                    </div>
+                </div>
+                <div class="space-y-4">
+                    <label class="block text-xs font-medium text-slate-600"
+                        >模板名称 <span class="text-red-500">*</span>
+                        <input id="fName" type="text" class="mt-1 w-full rounded-md border px-3 py-2 text-sm" placeholder="2～64 字"
+                    /></label>
+                    <fieldset>
+                        <legend class="text-xs font-medium text-slate-600">推送渠道 <span class="text-red-500">*</span></legend>
+                        <label class="mr-4 text-sm"><input type="checkbox" name="ch" value="站内信" checked /> 站内信</label>
+                        <label class="mr-4 text-sm"><input type="checkbox" name="ch" value="邮件" /> 邮件</label>
+                        <label class="text-sm"><input type="checkbox" name="ch" value="短信" /> 短信</label>
+                    </fieldset>
+                    <label class="block text-xs font-medium text-slate-600"
+                        >标题前缀
+                        <input id="fPrefix" type="text" class="mt-1 w-full rounded-md border px-3 py-2 text-sm"
+                    /></label>
+                    <label class="block text-xs font-medium text-slate-600"
+                        >接收范围 <span class="text-red-500">*</span>
+                        <select id="fScope" class="mt-1 w-full rounded-md border px-3 py-2 text-sm">
+                            <option value="全部用户">全部用户</option>
+                            <option value="按部门">按部门</option>
+                        </select>
+                    </label>
+                    <div id="deptWrap" class="hidden">
+                        <label class="block text-xs font-medium text-slate-600"
+                            >部门 <span class="text-red-500">*</span>
+                            <select id="fDept" class="mt-1 w-full rounded-md border px-3 py-2 text-sm">
+                                <option value="">请选择</option>
+                                <option>研发中心</option>
+                                <option>运营中心</option>
+                            </select>
+                        </label>
+                    </div>
+                </div>
+                <div class="mt-6 flex justify-end gap-2 border-t border-slate-100 pt-4">
+                    <button type="button" id="btnCancel" class="rounded-lg border border-slate-300 px-4 py-2 text-sm">取消</button>
+                    <button type="button" id="btnSave" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow">
+                        保存
+                    </button>
+                </div>
+            </div>
+        </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 pr-2 text-sm font-semibold"></h3>
+                    <button type="button" id="btnAnnoClose" class="text-slate-600">✕</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 text-slate-500">（无匹配）</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 LEGEND =
+                    '<ul class="list-disc pl-4 text-sm"><li>标注正文来自 <strong>prd.md</strong> 切片。</li></ul>';
+                var EX = {
+                    s1: { start: /^## 1\./m, end: /^## 2\./m, title: 'prd.md §1' },
+                    s2: { start: /^## 2\./m, end: /^## 3\./m, title: 'prd.md §2' },
+                    s31: { start: /^### 3\.1/m, end: /^### 3\.2/m, title: 'prd.md §3.1' },
+                    s32: { start: /^### 3\.2/m, end: /^### 3\.3/m, title: 'prd.md §3.2' },
+                    s33: { start: /^### 3\.3/m, end: /^### 3\.4/m, title: 'prd.md §3.3' },
+                    s34: { start: /^### 3\.4/m, end: /^## 4\./m, title: 'prd.md §3.4' },
+                    s4: { start: /^## 4\./m, end: /^## 9\./m, title: 'prd.md §4' },
+                };
+                var FB = {
+                    s1: { title: '§1', html: '<p class="text-xs">兜底</p>' },
+                    s2: { title: '§2', html: '<p class="text-xs">兜底</p>' },
+                    s31: { title: '§3.1', html: '<p class="text-xs">兜底</p>' },
+                    s32: { title: '§3.2', html: '<p class="text-xs">兜底</p>' },
+                    s33: { title: '§3.3', html: '<p class="text-xs">兜底</p>' },
+                    s34: { title: '§3.4', html: '<p class="text-xs">兜底</p>' },
+                    s4: { title: '§4', 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 + LEGEND + (s9 ? '<div class="mt-2">' + mdToHtml(s9) + '</div>' : '');
+                        $('modalAnno').classList.remove('hidden');
+                        $('modalAnno').classList.add('flex');
+                        $('annoDlgBody').scrollTop = 0;
+                        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);
+                    $('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 syncDept() {
+                    var on = $('fScope').value === '按部门';
+                    $('deptWrap').classList.toggle('hidden', !on);
+                }
+                $('fScope').addEventListener('change', syncDept);
+                syncDept();
+                $('btnSave').addEventListener('click', function () {
+                    var n = $('fName').value.trim();
+                    if (n.length < 2) {
+                        toast('模板名称至少 2 字');
+                        return;
+                    }
+                    var ch = document.querySelectorAll('input[name="ch"]:checked').length;
+                    if (!ch) {
+                        toast('请至少选一个渠道');
+                        return;
+                    }
+                    if ($('fScope').value === '按部门' && !$('fDept').value) {
+                        toast('请选择部门');
+                        return;
+                    }
+                    toast('保存成功（模拟）');
+                });
+                $('btnCancel').addEventListener('click', function () {
+                    toast('取消（模拟）：可接二次确认');
+                });
+                function toast(m) {
+                    var el = $('toast');
+                    el.textContent = m;
+                    el.classList.remove('hidden');
+                    clearTimeout(el._t);
+                    el._t = setTimeout(function () {
+                        el.classList.add('hidden');
+                    }, 2200);
+                }
+            }
+            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/examples/form-preview/prd.md ADDED Viewed

@@ -0,0 +1,106 @@
+# 工单详情（只读）PRD（产品需求文档）
+> **文档说明**：本文件位于技能目录 `examples/form-preview/`，对应 **`backend-form-preview-prd-template.md`**（只读详情 + 操作按钮区）。实际产出写入 `src/prototypes/<page-name>/prd.md`。
+> **交互原型**：[打开 prototype.html](./prototype.html)；标注 **`fetch` 同目录 `prd.md`**；须 **HTTP** 打开。
+---
+## 1. 引言
+### 1.1 背景
+供客服与处理人查看工单快照：状态、优先级、描述与处理记录只读展示；可跳转编辑或返回列表（权限控制）。
+### 1.2 功能清单
+| 模块     | 功能点   | 功能描述           |
+| -------- | -------- | ------------------ |
+| 工单详情 | 信息展示 | 字段只读展示     |
+| 工单详情 | 编辑跳转 | 有编辑权限时展示 |
+| 工单详情 | 返回     | 返回上一页或列表 |
+---
+## 2. 页面菜单与权限规划
+### 2.1 页面菜单
+**菜单路径**：服务台 / 工单管理 / 工单详情
+### 2.2 权限规划
+| 权限点 | 操作范围       | 数据范围 |
+| ------ | -------------- | -------- |
+| 查看   | 详情只读、返回 | 按单号   |
+| 编辑   | 跳转编辑页     | 按单号   |
+---
+## 3. 工单详情需求说明
+### 3.1 信息展示区域
+| 字段名称 | 展示格式   | 说明       |
+| -------- | ---------- | ---------- |
+| 工单号   | 等宽文本   | 主键展示   |
+| 状态     | 状态标签色 | 待处理/处理中/已关闭 |
+| 优先级   | 文本       | P1～P3     |
+| 创建时间 | YYYY-MM-DD HH:mm | —    |
+| 问题描述 | 多行文本   | 保留换行   |
+### 3.2 字段详细说明
+#### 3.2.1 状态
+- **字段说明**：驱动 SLA 展示与按钮显隐。
+- **展示格式**：彩色标签。
+- **空值展示**：—
+- **特殊规则**：已关闭隐藏「编辑」。
+### 3.3 操作按钮
+| 按钮名称 | 按钮位置 | 点击逻辑     | 权限要求 |
+| -------- | -------- | ------------ | -------- |
+| 编辑     | 右上     | 跳转编辑路由 | 编辑     |
+| 返回     | 右上     | history.back | 无       |
+#### 3.3.1 编辑按钮
+主按钮样式（主题蓝）；无权限时隐藏或禁用。
+#### 3.3.3 返回按钮
+次要样式（白底描边）。
+---
+## 4. 交互设计
+### 4.1 全局交互
+进入页 Loading；无数据 Empty；响应式布局。
+### 4.2 页面交互
+按 `id` 拉取详情；权限控制按钮；可选复制工单号。
+---
+## 9. 原型与 PRD 对应关系
+| PRD 章节 | prototype.html 演示点 |
+| -------- | ---------------------- |
+| §1       | 页头「PRD §1」         |
+| §3.1     | 详情区「PRD §3.1」     |
+| §3.3     | 操作栏「PRD §3.3」     |
+| §4       | 按钮点击 Toast 模拟    |
+| 走查说明 | 左下角「标注说明」     |
+---
+## 10. 修订记录
+| 版本 | 日期       | 说明 |
+| ---- | ---------- | ---- |
+| v0.1 | 2026-05-14 | 初版：对齐 backend-form-preview 模板示例 |

package/dist/deppon-prd-generator/examples/form-preview/prototype.html ADDED Viewed

@@ -0,0 +1,240 @@
+<!--
+  技能示例 examples/form-preview/ — 对齐 backend-form-preview-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(217, 119, 6, 0.85);
+                background: rgba(254, 243, 199, 0.95);
+                padding: 0.15rem 0.5rem;
+                font-size: 0.625rem;
+                font-weight: 700;
+                color: rgb(69 26 3);
+                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-slate-100">
+        <div id="prdLoadBanner" class="hidden border-b border-amber-300 bg-amber-100 px-4 py-2 text-center text-xs"></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-400 bg-white px-3 py-2 text-xs shadow">
+            标注说明
+        </button>
+        <header class="border-b bg-white">
+            <div class="mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-2 px-4 py-3">
+                <div class="flex items-center gap-2">
+                    <h1 class="text-lg font-semibold">工单详情</h1>
+                    <button type="button" class="anno-trigger" data-anno-key="s1">PRD §1</button>
+                </div>
+                <div class="flex flex-wrap items-center gap-2">
+                    <button type="button" class="anno-trigger" data-anno-key="s33">PRD §3.3</button>
+                    <button type="button" id="btnBack" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm">
+                        返回
+                    </button>
+                    <button type="button" id="btnEdit" class="rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white">
+                        编辑
+                    </button>
+                </div>
+            </div>
+        </header>
+        <main class="mx-auto max-w-3xl px-4 py-6">
+            <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+                <div class="mb-4 flex items-center justify-between">
+                    <h2 class="text-sm font-semibold text-slate-900">只读信息</h2>
+                    <div class="flex gap-1">
+                        <button type="button" class="anno-trigger" data-anno-key="s31">§3.1</button>
+                        <button type="button" class="anno-trigger" data-anno-key="s32">§3.2</button>
+                        <button type="button" class="anno-trigger" data-anno-key="s4">§4</button>
+                    </div>
+                </div>
+                <dl class="space-y-3 text-sm">
+                    <div class="flex justify-between gap-4 border-b border-slate-50 py-2">
+                        <dt class="text-slate-500">工单号</dt>
+                        <dd class="font-mono text-slate-900">WO-2026-0001</dd>
+                    </div>
+                    <div class="flex justify-between gap-4 border-b border-slate-50 py-2">
+                        <dt class="text-slate-500">状态</dt>
+                        <dd><span class="rounded bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-900">处理中</span></dd>
+                    </div>
+                    <div class="flex justify-between gap-4 border-b border-slate-50 py-2">
+                        <dt class="text-slate-500">优先级</dt>
+                        <dd>P2</dd>
+                    </div>
+                    <div class="flex justify-between gap-4 border-b border-slate-50 py-2">
+                        <dt class="text-slate-500">创建时间</dt>
+                        <dd class="font-mono text-xs">2026-05-10 11:20</dd>
+                    </div>
+                    <div class="py-2">
+                        <dt class="text-slate-500">问题描述</dt>
+                        <dd class="mt-1 whitespace-pre-wrap text-slate-800">登录页偶发 502，复现步骤见附件日志。</dd>
+                    </div>
+                </dl>
+            </div>
+        </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 text-slate-500">（无）</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">标注联动 <strong>prd.md</strong>。</p>';
+                var EX = {
+                    s1: { start: /^## 1\./m, end: /^## 2\./m, title: 'prd.md §1' },
+                    s31: { start: /^### 3\.1/m, end: /^### 3\.2/m, title: 'prd.md §3.1' },
+                    s32: { start: /^### 3\.2/m, end: /^### 3\.3/m, title: 'prd.md §3.2' },
+                    s33: { start: /^### 3\.3/m, end: /^## 4\./m, title: 'prd.md §3.3' },
+                    s4: { start: /^## 4\./m, end: /^## 9\./m, title: 'prd.md §4' },
+                };
+                var FB = {
+                    s1: { html: '<p class="text-xs">兜底</p>' },
+                    s31: { html: '<p class="text-xs">兜底</p>' },
+                    s32: { html: '<p class="text-xs">兜底</p>' },
+                    s33: { html: '<p class="text-xs">兜底</p>' },
+                    s4: { 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);
+                }
+                $('btnBack').addEventListener('click', function () {
+                    toast('返回（模拟）');
+                });
+                $('btnEdit').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/{user-management → examples/list-crud}/prd.md RENAMED Viewed

@@ -1,8 +1,8 @@
 # 用户管理 PRD（产品需求文档）
-> **文档说明**：通用后台**用户管理**（列表 + 详情 + 新增/编辑 + 删除）标准需求；与同级 `prototype.html` 对齐走查。落地以实际接口与权限码为准。
+> **文档说明**：本文件位于技能目录 `examples/list-crud/`，是 **后台列表 + 详情 + 新增/编辑 + 删除** 的**参考示例**（业务场景：用户管理），供生成同类 PRD 时对照章节结构、表格字段与「原型与 PRD 对应关系」写法。**不是**业务项目的默认交付路径；实际产出仍写入 `src/prototypes/<page-name>/prd.md`。落地以实际接口与权限码为准。
-> **高保真原型**：同目录 `prototype.html`（Tailwind Play CDN + 原生 JS），可演示 §3 筛选与列表、§4 详情弹层、§5 新增/编辑弹层、删除确认与 Toast 模拟；数据为静态 mock。
+> **交互原型**：[打开 prototype.html](./prototype.html)（Tailwind Play CDN + `marked` + 原生 JS）。**需求标注**：运行时 `fetch` 同目录本 `prd.md`，按章节切片 Markdown 渲染进标注弹框（改 PRD 后刷新即可联动）；须用**本地 HTTP**打开目录（`file://` 无法加载 prd.md 时仅显示兜底摘要）。可演示 §3～§6 主路径与 Toast；业务数据为静态 mock。
 ---
@@ -120,6 +120,8 @@
 加载态、空态、防重复提交、列表与弹层焦点与 `aria-modal` 与组件库规范对齐。
+- **主色按钮**：查询、新增用户、保存等主操作使用**主题蓝**实心按钮；重置、取消、关闭等为次要（白底描边）；删除、确定离开等为危险（红色系）。高保真原型与 `deppon-prd-generator` 技能「技术约定」第 8 条一致。
 ---
 ## 9. 原型与 PRD 对应关系
@@ -133,8 +135,8 @@
 | §4         | 详情弹层内「PRD §4」+ 只读字段   |
 | §5         | 表单弹层内「PRD §5」+ 新增/编辑与校验 |
 | §6         | 删除弹层内「PRD §6」+ 二次确认   |
-| §8         | Toast 模拟成功/失败（无真实接口） |
-| 走查说明   | 左下角「标注说明」：琥珀色弹框为需求标注（非业务功能），见 deppon-prd-generator 技能约定 |
+| §8         | 主色按钮主题蓝与次要/危险区分；Toast 模拟成功/失败（无真实接口） |
+| 走查说明   | 左下角「标注说明」：操作说明 + **prd.md §9 原文**；各「PRD §」从 **prd.md 对应章节切片**渲染；弹内长表格/长文可纵向与横向滚动；未加载 prd.md 时见页面顶栏黄条与弹内兜底 |
 ---
@@ -144,3 +146,6 @@
 | ---- | ---------- | ---------------------------- |
 | v0.1 | 2026-05-13 | 用户列表 CRUD 初稿（他目录） |
 | v1.2 | 2026-05-13 | 原型：新增用户移至列表标题行；总条数移至分页栏「每页」旁 |
+| v1.3 | 2026-05-14 | 迁入 `examples/list-crud/`，明确为技能内参考示例 |
+| v1.4 | 2026-05-14 | 交互：主操作按钮统一主题蓝；与技能技术约定第 8 条对齐 |
+| v1.5 | 2026-05-14 | 原型：标注正文 `fetch` 联动 prd.md 切片 + Markdown 渲染；弹层内可滚动；file:// 兜底说明 |