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/backend-list/prd.md ADDED Viewed

@@ -0,0 +1,91 @@
+# 公告台账 PRD（产品需求文档）
+> **文档说明**：本文件位于技能目录 `examples/backend-list/`，对应 **`backend-list-prd-template.md`** 的**纯列表 + 筛选 + 分页**（无详情/表单弹层 CRUD），供与 `list-crud`（含完整 CRUD）对照。实际产出仍写入 `src/prototypes/<page-name>/prd.md`。
+> **交互原型**：[打开 prototype.html](./prototype.html)（Tailwind + `marked` + `fetch` 同目录 `prd.md`）；须 **HTTP** 打开目录。
+---
+## 1. 引言
+### 1.1 背景
+为运营与合规人员提供系统公告的检索与浏览能力：按标题、类型、时间范围筛选，分页查看，支持导出当前筛选结果（可选）。
+### 1.2 功能清单
+| 模块     | 功能点   | 功能描述                         |
+| -------- | -------- | -------------------------------- |
+| 公告台账 | 条件查询 | 标题、类型、发布时间范围；查询/重置 |
+| 公告台账 | 列表展示 | 分页表格；发布时间降序默认       |
+| 公告台账 | 导出     | 导出 CSV（可选，受导出权限控制） |
+---
+## 2. 页面菜单与权限规划
+### 2.1 页面菜单
+**菜单路径**：内容管理 / 公告台账
+### 2.2 权限规划
+| 权限点 | 操作范围                     | 数据范围 |
+| ------ | ---------------------------- | -------- |
+| 查看   | 列表、筛选、分页             | 全量     |
+| 导出   | 导出当前筛选结果             | 全量     |
+---
+## 3. 公告台账需求说明
+### 3.1 筛选查询区
+变更筛选后点击「查询」生效；「重置」恢复默认并回到第 1 页。
+| 筛选字段 | 类型     | 输入限制        | 匹配规则 |
+| :------- | :------- | :-------------- | :------- |
+| 标题     | 文本     | 1～128，trim    | 模糊     |
+| 公告类型 | 下拉     | 全部 / 系统 / 活动 | 精准     |
+| 发布时间 | 日期范围 | 起止合法        | 范围     |
+- **查询** / **重置**：同上。
+- **导出**（可选）：需「导出」权限；导出字段与列表列一致。
+### 3.2 数据列表
+| 列表字段 | 字段说明   | 排序 |
+| :------- | :--------- | :--- |
+| 标题     | 公告标题   | 否   |
+| 类型     | 系统/活动  | 是   |
+| 发布时间 | 发布时间   | 是   |
+| 发布人   | 操作账号   | 否   |
+- **分页**：默认 10 条；可切换 10 / 20 / 50。
+- **行操作**：本示例页**无**编辑/删除行操作；跳转详情若做则为另页路由（不在本模板最小范围）。
+---
+## 4. 交互设计
+加载态、空态、导出中的防重复点击；筛选与列表区域与 `aria` 规范对齐。主操作「查询」「导出」使用主题蓝实心按钮；「重置」为次要样式。
+---
+## 9. 原型与 PRD 对应关系
+| PRD 章节 | prototype.html 演示点 |
+| -------- | ---------------------- |
+| §1       | 页头「PRD §1」         |
+| §3.1     | 筛选区「PRD §3.1」+ 查询/重置 |
+| §3.2     | 表格区「PRD §3.1」旁列表标题「PRD §3.2」+ 分页 |
+| §4       | 导出按钮与 Toast 模拟（对应 §3.1 导出条款） |
+| 走查说明 | 左下角「标注说明」+ prd.md §9 原文联动 |
+---
+## 10. 修订记录
+| 版本 | 日期       | 说明 |
+| ---- | ---------- | ---- |
+| v0.1 | 2026-05-14 | 初版：对齐 backend-list 模板示例 |

package/dist/deppon-prd-generator/examples/backend-list/prototype.html ADDED Viewed

@@ -0,0 +1,369 @@
+<!--
+  技能示例 examples/backend-list/ — 对齐 backend-list-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;
+                justify-content: 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;
+                letter-spacing: 0.04em;
+                color: rgb(69 26 3);
+                cursor: pointer;
+            }
+            .anno-trigger:hover {
+                background: rgb(253 230 138);
+            }
+            #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.5rem;
+            }
+            #annoDlgBody .prd-md th {
+                background: rgb(248 250 252);
+                font-weight: 600;
+            }
+        </style>
+    </head>
+    <body class="min-h-screen bg-slate-100 text-slate-800">
+        <div
+            id="prdLoadBanner"
+            class="hidden border-b border-amber-300 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 max-w-sm rounded-lg bg-slate-900 px-4 py-3 text-sm text-white shadow-lg"
+        ></div>
+        <button
+            type="button"
+            id="btnAnnoLegend"
+            class="fixed bottom-5 left-5 z-[65] flex items-center gap-2 rounded-full border border-amber-400 bg-white px-3 py-2 text-xs font-medium text-amber-950 shadow-lg"
+        >
+            <span class="flex h-6 w-6 items-center justify-center rounded-full bg-amber-500 text-xs font-bold text-white"
+                >?</span
+            >
+            标注说明
+        </button>
+        <header class="border-b border-slate-200 bg-white">
+            <div class="mx-auto flex max-w-5xl items-start gap-2 px-4 py-4">
+                <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>
+            </div>
+        </header>
+        <main class="mx-auto max-w-5xl px-4 py-6">
+            <section class="mb-6 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                <div class="mb-3 flex items-center justify-between">
+                    <h2 class="text-sm font-semibold text-slate-900">筛选</h2>
+                    <button type="button" class="anno-trigger" data-anno-key="s31">PRD §3.1</button>
+                </div>
+                <div class="grid gap-3 sm:grid-cols-3">
+                    <label class="text-xs font-medium text-slate-600"
+                        >标题
+                        <input id="fTitle" type="text" class="mt-1 w-full rounded-md border border-slate-300 px-2 py-2 text-sm" />
+                    </label>
+                    <label class="text-xs font-medium text-slate-600"
+                        >类型
+                        <select id="fType" class="mt-1 w-full rounded-md border border-slate-300 px-2 py-2 text-sm">
+                            <option value="">全部</option>
+                            <option>系统</option>
+                            <option>活动</option>
+                        </select>
+                    </label>
+                    <label class="text-xs font-medium text-slate-600"
+                        >发布日期
+                        <input id="fDate" type="date" class="mt-1 w-full rounded-md border border-slate-300 px-2 py-2 text-sm" />
+                    </label>
+                </div>
+                <div class="mt-3 flex flex-wrap gap-2">
+                    <button
+                        type="button"
+                        id="btnQuery"
+                        class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow hover:bg-blue-700"
+                    >
+                        查询
+                    </button>
+                    <button type="button" id="btnReset" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm">
+                        重置
+                    </button>
+                    <button type="button" id="btnExport" class="anno-trigger ml-auto" data-anno-key="s4">PRD §4</button>
+                    <button type="button" id="btnDoExport" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white">
+                        导出 CSV
+                    </button>
+                </div>
+            </section>
+            <section class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+                <div class="flex items-center justify-between border-b border-slate-100 px-4 py-3">
+                    <div class="flex items-center gap-2">
+                        <h2 class="text-sm font-semibold">公告列表</h2>
+                        <button type="button" class="anno-trigger" data-anno-key="s32">PRD §3.2</button>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="min-w-full text-left text-sm">
+                        <thead class="bg-slate-50 text-xs uppercase text-slate-600">
+                            <tr>
+                                <th class="px-4 py-2">标题</th>
+                                <th class="px-4 py-2">类型</th>
+                                <th class="px-4 py-2">发布时间</th>
+                                <th class="px-4 py-2">发布人</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tbody"></tbody>
+                    </table>
+                </div>
+                <div class="flex items-center justify-between border-t border-slate-100 px-4 py-2 text-xs text-slate-600">
+                    <span id="pageInfo"></span>
+                    <div class="flex gap-2">
+                        <button type="button" id="btnPrev" class="rounded border border-slate-300 px-2 py-1">上一页</button>
+                        <button type="button" id="btnNext" class="rounded border border-slate-300 px-2 py-1">下一页</button>
+                    </div>
+                </div>
+            </section>
+        </main>
+        <div
+            id="modalAnno"
+            class="fixed inset-0 z-[70] hidden items-center justify-center bg-slate-900/55 p-4"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="annoDlgTitle"
+        >
+            <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 items-center justify-between border-b border-amber-200 bg-amber-50 px-4 py-2">
+                    <div class="min-w-0 pr-2">
+                        <p class="text-[10px] font-bold uppercase text-amber-900">需求标注</p>
+                        <h3 id="annoDlgTitle" class="truncate text-sm font-semibold"></h3>
+                    </div>
+                    <button type="button" id="btnAnnoClose" class="shrink-0 rounded p-1 text-slate-600 hover:bg-amber-200/60">
+                        ✕
+                    </button>
+                </div>
+                <div
+                    id="annoDlgBody"
+                    class="min-h-0 flex-1 overflow-y-auto overflow-x-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) {
+                var DATA = [
+                    { title: '系统维护通知', type: '系统', at: '2026-05-01 10:00', by: 'admin' },
+                    { title: '五一活动上线', type: '活动', at: '2026-04-28 09:00', by: 'ops01' },
+                    { title: '隐私政策更新', type: '系统', at: '2026-04-20 14:30', by: 'legal' },
+                ];
+                var f = { title: '', type: '', date: '' };
+                var page = 1;
+                var pageSize = 10;
+                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 b = $('prdLoadBanner');
+                if (b && (!prdMd || prdLoadError)) {
+                    b.textContent =
+                        '未加载 prd.md：请在本目录启动静态服务后打开（勿 file://）。';
+                    b.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_INTRO =
+                    '<ul class="list-disc space-y-2 pl-4 text-sm"><li>正文来自同目录 <strong>prd.md</strong> 切片。</li><li>长内容可在弹框内滚动。</li></ul>';
+                var ANNO_EXTRACT = {
+                    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: /^## 4\./m, title: 'prd.md §3.2' },
+                    s4: { start: /^## 4\./m, end: /^## 9\./m, title: 'prd.md §4' },
+                };
+                var FB = {
+                    s1: { title: '§1 兜底', html: '<p class="text-xs">加载 prd.md 后显示原文。</p>' },
+                    s31: { title: '§3.1 兜底', html: '<p class="text-xs">筛选字段见 PRD。</p>' },
+                    s32: { title: '§3.2 兜底', html: '<p class="text-xs">列表列见 PRD。</p>' },
+                    s4: { title: '§4 兜底', html: '<p class="text-xs">交互与按钮样式见 PRD。</p>' },
+                };
+                function openAnno(key) {
+                    var warn =
+                        !prdMd || prdLoadError
+                            ? '<div class="mb-2 rounded border border-amber-200 bg-amber-50 p-2 text-xs">prd.md 未联动</div>'
+                            : '';
+                    if (key === 'legend') {
+                        $('annoDlgTitle').textContent = '标注说明 · §9';
+                        var s9 = prdMd ? sliceBetween(prdMd, /^## 9\./m, /^## 10\./m) : '';
+                        $('annoDlgBody').innerHTML =
+                            warn + LEGEND_INTRO + (s9 ? '<div class="mt-3 border-t pt-2">' + mdToHtml(s9) + '</div>' : '');
+                        showAnno();
+                        return;
+                    }
+                    var spec = ANNO_EXTRACT[key];
+                    if (!spec) return;
+                    var slice = prdMd ? sliceBetween(prdMd, spec.start, spec.end) : '';
+                    if (slice) {
+                        $('annoDlgTitle').textContent = spec.title;
+                        $('annoDlgBody').innerHTML = warn + mdToHtml(slice);
+                    } else if (FB[key]) {
+                        $('annoDlgTitle').textContent = FB[key].title;
+                        $('annoDlgBody').innerHTML = warn + FB[key].html;
+                    } else return;
+                    showAnno();
+                }
+                function showAnno() {
+                    $('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 filtered() {
+                    return DATA.filter(function (r) {
+                        if (f.title && r.title.indexOf(f.title) === -1) return false;
+                        if (f.type && r.type !== f.type) return false;
+                        if (f.date && r.at.slice(0, 10) !== f.date) return false;
+                        return true;
+                    });
+                }
+                function render() {
+                    var rows = filtered();
+                    $('pageInfo').textContent = '共 ' + rows.length + ' 条（示例分页略）';
+                    var tb = $('tbody');
+                    tb.innerHTML = '';
+                    rows.forEach(function (r) {
+                        var tr = document.createElement('tr');
+                        tr.className = 'border-t border-slate-100';
+                        tr.innerHTML =
+                            '<td class="px-4 py-2">' +
+                            escapeHtml(r.title) +
+                            '</td><td class="px-4 py-2">' +
+                            escapeHtml(r.type) +
+                            '</td><td class="px-4 py-2 font-mono text-xs">' +
+                            escapeHtml(r.at) +
+                            '</td><td class="px-4 py-2">' +
+                            escapeHtml(r.by) +
+                            '</td>';
+                        tb.appendChild(tr);
+                    });
+                }
+                $('btnQuery').addEventListener('click', function () {
+                    f.title = $('fTitle').value.trim();
+                    f.type = $('fType').value;
+                    f.date = $('fDate').value;
+                    render();
+                    toast('已查询（mock）');
+                });
+                $('btnReset').addEventListener('click', function () {
+                    $('fTitle').value = '';
+                    $('fType').value = '';
+                    $('fDate').value = '';
+                    f = { title: '', type: '', date: '' };
+                    render();
+                });
+                $('btnDoExport').addEventListener('click', function () {
+                    toast('导出（模拟）：当前 ' + filtered().length + ' 条');
+                });
+                $('btnPrev').addEventListener('click', function () {
+                    toast('分页示例：上一页');
+                });
+                $('btnNext').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');
+                    }, 2000);
+                }
+                render();
+            }
+            fetch('prd.md', { cache: 'no-store' })
+                .then(function (r) {
+                    if (!r.ok) throw new Error(String(r.status));
+                    return r.text();
+                })
+                .then(function (t) {
+                    runPrototype(t, null);
+                })
+                .catch(function () {
+                    runPrototype('', new Error('x'));
+                });
+        </script>
+    </body>
+</html>

package/dist/deppon-prd-generator/examples/data-dashboard/prd.md ADDED Viewed

@@ -0,0 +1,127 @@
+# 渠道运营看板 PRD（产品需求文档）
+> **文档说明**：本文件位于技能目录 `examples/data-dashboard/`，对应 **`data-prd-template.md`**（筛选 + 指标卡 + 图表 + 列表 + 指标总览）。实际产出写入 `src/prototypes/<page-name>/prd.md`。
+> **交互原型**：[打开 prototype.html](./prototype.html)；标注 **`fetch` 同目录 `prd.md`**；须 **HTTP** 打开。
+---
+## 1. 引言
+### 1.1 背景
+为运营负责人提供渠道投放与转化的日级监控：核心 KPI 卡片、趋势简图与渠道明细表，支撑周会与异常排查。
+### 1.2 功能清单
+| 模块   | 功能点   | 功能描述           |
+| ------ | -------- | ------------------ |
+| 运营看板 | 筛选   | 日期、渠道类型     |
+| 运营看板 | 指标卡 | UV、转化率、消耗   |
+| 运营看板 | 趋势图 | 近 7 日转化趋势（示意） |
+| 运营看板 | 明细表 | 分渠道指标表       |
+| 运营看板 | 指标总览 | 全量指标清单表   |
+---
+## 2. 页面菜单与权限规划
+### 2.1 页面菜单
+**菜单路径**：数据中心 / 渠道运营看板
+### 2.2 权限规划
+| 权限点 | 操作范围   | 数据范围 |
+| ------ | ---------- | -------- |
+| 查看   | 看板全部模块 | 全量     |
+| 导出   | 导出明细（可选） | 全量 |
+---
+## 3. 渠道运营看板需求说明
+### 3.1 筛选查询区
+支持多维度组合筛选，变更后点击「查询」生效。
+| 筛选字段 | 类型     | 输入限制   | 匹配规则 |
+| :------- | :------- | :--------- | :------- |
+| 统计日期 | 单日选择 | 默认昨日   | 精准     |
+| 渠道类型 | 下拉     | 全部/付费/自然 | 精准 |
+- **查询** / **重置**：刷新卡片、图表与列表。
+### 3.2 核心指标卡说明
+- **指标列表**
+| 指标名称 | 业务价值     | 指标定义           |
+| :------- | :----------- | :----------------- |
+| 渠道 UV  | 流量规模     | 统计日独立访客去重 |
+| 转化率   | 投放效率     | 订单数 / UV        |
+| 消耗金额 | 成本控制     | 投放账户汇总消耗   |
+- **交互说明**：卡片数字与筛选联动；hover 显示环比（可选）。
+### 3.3 转化趋势说明
+- **图表描述**：以折线图展示近 7 日转化率（原型为占位块 + 图例）。
+- **图表指标列表**
+| 指标名称 | 业务价值 | 指标定义     |
+| :------- | :------- | :----------- |
+| 日转化率 | 趋势监控 | 当日订单/UV  |
+- **交互说明**：随筛选日期范围变化（本示例固定 7 日 mock）。
+### 3.4 渠道明细列表
+- **列表字段**
+| 列表字段 | 字段说明   |
+| :------- | :--------- |
+| 渠道名称 | 投放渠道名 |
+| UV       | 独立访客   |
+| 订单数   | 成交笔数   |
+- **交互说明**：支持按 UV 排序；导出见权限。
+---
+## 4. 指标总览
+| 指标名称 | 筛选维度   | 数据来源 | 指标定义        |
+| -------- | ---------- | -------- | --------------- |
+| 渠道 UV  | 日期、渠道类型 | 埋点+业务库 | 见 §3.2 |
+| 转化率   | 日期、渠道类型 | 计算指标 | 订单/UV |
+| 消耗金额 | 日期       | 财务接口 | 账户日汇总 |
+---
+## 5. 交互设计
+### 5.1 全局交互
+加载骨架、空态、响应式；图表区懒加载（可选）。
+---
+## 9. 原型与 PRD 对应关系
+| PRD 章节 | prototype.html 演示点 |
+| -------- | ---------------------- |
+| §1       | 页头「PRD §1」         |
+| §3.1     | 筛选区「PRD §3.1」     |
+| §3.2～§3.4 | 卡片区、趋势占位、表格 |
+| §4       | 「PRD §4」指标总览说明 |
+| §5       | 全局交互说明入口       |
+| 走查说明 | 左下角「标注说明」     |
+---
+## 10. 修订记录
+| 版本 | 日期       | 说明 |
+| ---- | ---------- | ---- |
+| v0.1 | 2026-05-14 | 初版：对齐 data 模板示例 |