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/data-dashboard/prototype.html ADDED Viewed

@@ -0,0 +1,281 @@
+<!--
+  技能示例 examples/data-dashboard/ — 对齐 data-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.12rem 0.45rem;
+                font-size: 0.6rem;
+                font-weight: 700;
+                color: rgb(69 26 3);
+                cursor: pointer;
+            }
+            #annoDlgBody .prd-md table {
+                width: 100%;
+                border-collapse: collapse;
+                font-size: 0.72rem;
+            }
+            #annoDlgBody .prd-md th,
+            #annoDlgBody .prd-md td {
+                border: 1px solid rgb(226 232 240);
+                padding: 0.3rem;
+            }
+        </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-3">
+            <div class="mx-auto flex max-w-6xl flex-wrap items-center gap-2">
+                <h1 class="text-lg font-semibold">渠道运营看板</h1>
+                <button type="button" class="anno-trigger" data-anno-key="s1">§1</button>
+                <button type="button" class="anno-trigger" data-anno-key="s2">§2</button>
+            </div>
+        </header>
+        <main class="mx-auto max-w-6xl space-y-6 px-4 py-6">
+            <section class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                <div class="mb-3 flex items-center justify-between">
+                    <span class="text-sm font-semibold">筛选</span>
+                    <button type="button" class="anno-trigger" data-anno-key="s31">§3.1</button>
+                </div>
+                <div class="flex flex-wrap gap-3">
+                    <input type="date" class="rounded border px-2 py-1 text-sm" />
+                    <select class="rounded border px-2 py-1 text-sm">
+                        <option>全部渠道类型</option>
+                        <option>付费</option>
+                        <option>自然</option>
+                    </select>
+                    <button type="button" class="rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-medium text-white">查询</button>
+                </div>
+            </section>
+            <section>
+                <div class="mb-2 flex items-center justify-between">
+                    <h2 class="text-sm font-semibold text-slate-800">核心指标</h2>
+                    <button type="button" class="anno-trigger" data-anno-key="s32">§3.2</button>
+                </div>
+                <div class="grid gap-3 sm:grid-cols-3">
+                    <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                        <p class="text-xs text-slate-500">渠道 UV</p>
+                        <p class="mt-1 text-2xl font-semibold text-slate-900">128,400</p>
+                    </div>
+                    <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                        <p class="text-xs text-slate-500">转化率</p>
+                        <p class="mt-1 text-2xl font-semibold text-emerald-600">3.2%</p>
+                    </div>
+                    <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                        <p class="text-xs text-slate-500">消耗金额</p>
+                        <p class="mt-1 text-2xl font-semibold text-slate-900">¥ 42,100</p>
+                    </div>
+                </div>
+            </section>
+            <section class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                <div class="mb-2 flex items-center justify-between">
+                    <h2 class="text-sm font-semibold">趋势（占位）</h2>
+                    <button type="button" class="anno-trigger" data-anno-key="s33">§3.3</button>
+                </div>
+                <div class="flex h-40 items-end justify-around gap-1 rounded-lg bg-slate-50 p-4">
+                    <div class="w-6 rounded-t bg-blue-400" style="height: 40%"></div>
+                    <div class="w-6 rounded-t bg-blue-500" style="height: 55%"></div>
+                    <div class="w-6 rounded-t bg-blue-600" style="height: 70%"></div>
+                    <div class="w-6 rounded-t bg-blue-500" style="height: 50%"></div>
+                    <div class="w-6 rounded-t bg-blue-400" style="height: 45%"></div>
+                    <div class="w-6 rounded-t bg-blue-600" style="height: 85%"></div>
+                    <div class="w-6 rounded-t bg-blue-500" style="height: 60%"></div>
+                </div>
+            </section>
+            <section class="rounded-xl border border-slate-200 bg-white shadow-sm">
+                <div class="flex items-center justify-between border-b px-4 py-2">
+                    <h2 class="text-sm font-semibold">渠道明细</h2>
+                    <button type="button" class="anno-trigger" data-anno-key="s34">§3.4</button>
+                </div>
+                <table class="w-full text-left text-sm">
+                    <thead class="bg-slate-50 text-xs text-slate-600">
+                        <tr>
+                            <th class="px-4 py-2">渠道</th>
+                            <th class="px-4 py-2">UV</th>
+                            <th class="px-4 py-2">订单</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="border-t">
+                            <td class="px-4 py-2">搜索</td>
+                            <td class="px-4 py-2">52,000</td>
+                            <td class="px-4 py-2">1,203</td>
+                        </tr>
+                        <tr class="border-t">
+                            <td class="px-4 py-2">信息流</td>
+                            <td class="px-4 py-2">41,200</td>
+                            <td class="px-4 py-2">980</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+            <section class="rounded-xl border border-amber-200 bg-amber-50/50 p-4">
+                <div class="flex items-center justify-between">
+                    <h2 class="text-sm font-semibold text-amber-950">指标总览（数据研发清单）</h2>
+                    <button type="button" class="anno-trigger" data-anno-key="s4m">§4</button>
+                </div>
+                <p class="mt-1 text-xs text-amber-900">见 PRD §4 全量表；原型仅示意。</p>
+            </section>
+            <section class="rounded-lg border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600">
+                <button type="button" class="anno-trigger" data-anno-key="s5">PRD §5 交互</button>
+                — 全局加载、空态、响应式。
+            </section>
+        </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">标注与 <strong>prd.md</strong> 联动。</p>';
+                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' },
+                    s4m: { start: /^## 4\./m, end: /^## 5\./m, title: 'prd.md §4 指标总览' },
+                    s5: { start: /^## 5\./m, end: /^## 9\./m, title: 'prd.md §5' },
+                };
+                var FB = {
+                    s1: { html: '<p class="text-xs">兜底</p>' },
+                    s2: { 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>' },
+                    s34: { html: '<p class="text-xs">兜底</p>' },
+                    s4m: { html: '<p class="text-xs">兜底</p>' },
+                    s5: { 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();
+                });
+            }
+            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-edit/prd.md ADDED Viewed

@@ -0,0 +1,108 @@
+# 通知模板配置 PRD（产品需求文档）
+> **文档说明**：本文件位于技能目录 `examples/form-edit/`，对应 **`backend-form-edit-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 表单字段说明
+| 字段名称   | 字段类型 | 必填 | 默认值 | 校验规则        | 说明           |
+| ---------- | -------- | ---- | ------ | --------------- | -------------- |
+| 模板名称   | 文本     | 是   | 无     | 2～64           | 唯一展示名     |
+| 推送渠道   | 多选     | 是   | 站内信 | 至少选一项      | 站内信/邮件/短信 |
+| 标题前缀   | 文本     | 否   | 无     | 0～32           | 可选           |
+| 接收范围   | 下拉     | 是   | 全部用户 | 枚举            | 全部/按部门    |
+### 3.2 字段详细说明
+#### 3.2.1 接收范围
+- **字段说明**：控制模板默认推送对象范围。
+- **输入限制**：枚举；与组织数据联动时以后端为准。
+- **校验规则**：必选。
+- **错误提示**：请选择接收范围。
+### 3.3 字段联动逻辑
+| 触发字段 | 触发条件   | 影响字段 | 影响效果     |
+| -------- | ---------- | -------- | ------------ |
+| 接收范围 | 选择按部门 | 部门选择 | 显示且必填   |
+| 接收范围 | 选择全部用户 | 部门选择 | 隐藏并清空 |
+### 3.4 操作按钮
+#### 3.4.1 保存/提交
+- **按钮位置**：表单底部右侧。
+- **点击逻辑**：前端校验 → 提交 → 成功 Toast → 可选留在本页。
+#### 3.4.2 取消
+- **按钮位置**：保存旁。
+- **点击逻辑**：有改动时确认离开；无改动直接返回列表（原型用 Toast 模拟）。
+---
+## 4. 交互设计
+### 4.1 全局交互
+加载、空态、响应式与组件库规范对齐。
+### 4.2 表单交互
+失焦校验、必填星号、Tab 顺序；主按钮主题蓝。
+---
+## 9. 原型与 PRD 对应关系
+| PRD 章节 | prototype.html 演示点 |
+| -------- | ---------------------- |
+| §1       | 页头「PRD §1」         |
+| §3.1～§3.4 | 表单卡片分区标注 + 保存/取消 |
+| §4       | 校验与 Toast 行为      |
+| 走查说明 | 左下角「标注说明」     |
+---
+## 10. 修订记录
+| 版本 | 日期       | 说明 |
+| ---- | ---------- | ---- |
+| v0.1 | 2026-05-14 | 初版：对齐 backend-form-edit 模板示例 |