@deppon/deppon-prd-mcp 0.1.0

package/dist/http/server.js

@@ -0,0 +1,115 @@
+import express from 'express';
+import fs from 'node:fs';
+import path from 'node:path';
+import { getHttpHost, getHttpPort, getPrototypesRoot, getWebRoot } from '../config.js';
+import { generatePrdMarkdown } from '../core/prd-generator.js';
+import { generatePrototypeHtml } from '../core/prototype-generator.js';
+import { applyOverrides, listProjects, loadProject, readProjectFiles, saveProject, } from '../core/project-store.js';
+import { createDefaultProject, PAGE_TYPE_LABELS, PrdProjectSchema } from '../core/types.js';
+let started = false;
+export async function startHttpServer() {
+    if (started)
+        return;
+    started = true;
+    const app = express();
+    app.use(express.json({ limit: '2mb' }));
+    app.use('/projects', express.static(getPrototypesRoot()));
+    app.use(express.static(getWebRoot()));
+    app.get('/api/meta', (_req, res) => {
+        res.json({
+            name: 'deppon-prd-mcp',
+            version: '0.1.0',
+            pageTypes: PAGE_TYPE_LABELS,
+            prototypesRoot: getPrototypesRoot(),
+        });
+    });
+    app.get('/api/projects', (_req, res) => {
+        res.json({ projects: listProjects() });
+    });
+    app.get('/api/projects/:slug', (req, res) => {
+        const files = readProjectFiles(req.params.slug);
+        if (!files)
+            return res.status(404).json({ error: '项目不存在' });
+        res.json(files);
+    });
+    app.post('/api/projects/preview-prd', (req, res) => {
+        try {
+            const project = PrdProjectSchema.parse(req.body);
+            res.json({ markdown: generatePrdMarkdown(project) });
+        }
+        catch (e) {
+            res.status(400).json({ error: e instanceof Error ? e.message : String(e) });
+        }
+    });
+    app.post('/api/projects/preview-prototype', (req, res) => {
+        try {
+            const project = PrdProjectSchema.parse(req.body);
+            res.json({ html: generatePrototypeHtml(project) });
+        }
+        catch (e) {
+            res.status(400).json({ error: e instanceof Error ? e.message : String(e) });
+        }
+    });
+    app.post('/api/projects', (req, res) => {
+        try {
+            const partial = req.body || {};
+            const project = partial.slug
+                ? PrdProjectSchema.parse(partial)
+                : createDefaultProject({ pageName: String(partial.pageName || '新页面'), ...partial });
+            const saved = saveProject(project);
+            res.json({ ok: true, ...saved, studioUrl: `/?slug=${saved.slug}` });
+        }
+        catch (e) {
+            res.status(400).json({ error: e instanceof Error ? e.message : String(e) });
+        }
+    });
+    app.put('/api/projects/:slug', (req, res) => {
+        try {
+            const existing = loadProject(req.params.slug);
+            if (!existing)
+                return res.status(404).json({ error: '项目不存在' });
+            const merged = PrdProjectSchema.parse({ ...existing, ...req.body, slug: req.params.slug });
+            const saved = saveProject(merged);
+            res.json({ ok: true, ...saved });
+        }
+        catch (e) {
+            res.status(400).json({ error: e instanceof Error ? e.message : String(e) });
+        }
+    });
+    app.post('/api/projects/:slug/overrides', (req, res) => {
+        try {
+            const updated = applyOverrides(req.params.slug, req.body || {});
+            if (!updated)
+                return res.status(404).json({ error: '项目不存在' });
+            res.json({ ok: true, project: updated });
+        }
+        catch (e) {
+            res.status(400).json({ error: e instanceof Error ? e.message : String(e) });
+        }
+    });
+    app.get('/api/projects/:slug/prototype', (req, res) => {
+        const files = readProjectFiles(req.params.slug);
+        if (!files)
+            return res.status(404).send('Not found');
+        res.type('html').send(files.prototype);
+    });
+    app.get('/api/projects/:slug/prd.md', (req, res) => {
+        const dir = path.join(getPrototypesRoot(), req.params.slug, 'prd.md');
+        if (!fs.existsSync(dir))
+            return res.status(404).send('Not found');
+        res.type('text/markdown').send(fs.readFileSync(dir, 'utf8'));
+    });
+    app.get('*', (_req, res) => {
+        const index = path.join(getWebRoot(), 'index.html');
+        res.sendFile(index);
+    });
+    await new Promise(resolve => {
+        app.listen(getHttpPort(), getHttpHost(), () => {
+            console.error(`[deppon-prd-mcp] Web UI: http://${getHttpHost()}:${getHttpPort()}`);
+            resolve();
+        });
+    });
+}
+export async function startWebOnly() {
+    await startHttpServer();
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { startMcpServer } from './mcp/server.js';
+export { startWebOnly } from './http/server.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { startMcpServer } from './mcp/server.js';
+export { startWebOnly } from './http/server.js';

package/dist/mcp/server.d.ts

@@ -0,0 +1,4 @@
+import { applyOverrides, saveProject } from '../core/project-store.js';
+import { PrdProjectSchema } from '../core/types.js';
+export declare function startMcpServer(): Promise<void>;
+export { applyOverrides, PrdProjectSchema, saveProject };

package/dist/mcp/server.js

@@ -0,0 +1,194 @@
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { CallToolRequestSchema, ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types.js';
+import { getHttpBaseUrl } from '../config.js';
+import { generatePrdMarkdown } from '../core/prd-generator.js';
+import { generatePrototypeHtml } from '../core/prototype-generator.js';
+import { applyOverrides, listProjects, loadProject, readProjectFiles, saveProject, } from '../core/project-store.js';
+import { createDefaultProject, PAGE_TYPE_LABELS, PageTypeSchema, PrdProjectSchema, } from '../core/types.js';
+import { startHttpServer } from '../http/server.js';
+export async function startMcpServer() {
+    await startHttpServer();
+    const server = new Server({ name: 'deppon-prd-mcp', version: '0.1.0' }, { capabilities: { tools: {} } });
+    server.setRequestHandler(ListToolsRequestSchema, async () => ({
+        tools: [
+            {
+                name: 'generate_prd',
+                description: '根据结构化要素生成标准化 prd.md，并写入 src/prototypes/<slug>/。基于 deppon-prd-generator skill 模板，默认 DP-IT 标题。',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        pageName: { type: 'string', description: '页面/模块名称，如「产品折扣列表」' },
+                        background: { type: 'string', description: '§1.1 背景描述' },
+                        pageType: {
+                            type: 'string',
+                            enum: Object.keys(PAGE_TYPE_LABELS),
+                            description: '页面类型，默认 list-crud',
+                        },
+                        slug: { type: 'string', description: '目录 slug，默认由 pageName 推导' },
+                        batchDate: { type: 'string', description: 'DP-IT 批次日 YYYYMMDD' },
+                        menuPath: { type: 'string' },
+                        filters: { type: 'array', items: { type: 'object' } },
+                        columns: { type: 'array', items: { type: 'object' } },
+                        features: { type: 'array', items: { type: 'object' } },
+                        permissions: { type: 'array', items: { type: 'object' } },
+                        toolbarButtons: { type: 'array', items: { type: 'string' } },
+                        rowActions: { type: 'array', items: { type: 'string' } },
+                        enableCrud: { type: 'boolean' },
+                    },
+                    required: ['pageName'],
+                },
+            },
+            {
+                name: 'generate_prototype',
+                description: '根据已有项目 slug 或 PRD 配置生成/更新 prototype.html（Tailwind 高保真原型，含 PRD 标注弹框）。',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        slug: { type: 'string', description: '项目 slug' },
+                        regenerateFromConfig: {
+                            type: 'boolean',
+                            description: 'true 时从 project.config.json 重新生成',
+                            default: true,
+                        },
+                    },
+                    required: ['slug'],
+                },
+            },
+            {
+                name: 'list_prd_projects',
+                description: '列出 workspace 下 src/prototypes/ 中由 MCP 管理的项目',
+                inputSchema: { type: 'object', properties: {} },
+            },
+            {
+                name: 'get_prd_project',
+                description: '读取项目的 config、prd.md、prototype.html',
+                inputSchema: {
+                    type: 'object',
+                    properties: { slug: { type: 'string' } },
+                    required: ['slug'],
+                },
+            },
+            {
+                name: 'open_prd_studio',
+                description: '返回 Web 控制台 URL，可在浏览器填写 PRD 要素并在线调整原型',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        slug: { type: 'string', description: '可选，打开指定项目' },
+                    },
+                },
+            },
+        ],
+    }));
+    server.setRequestHandler(CallToolRequestSchema, async (request) => {
+        try {
+            const { name, arguments: args } = request.params;
+            const input = (args || {});
+            if (name === 'generate_prd') {
+                const pageName = String(input.pageName || '');
+                if (!pageName)
+                    throw new Error('pageName 必填');
+                const project = createDefaultProject({
+                    pageName,
+                    background: input.background ? String(input.background) : undefined,
+                    pageType: input.pageType ? PageTypeSchema.parse(input.pageType) : undefined,
+                    slug: input.slug ? String(input.slug) : undefined,
+                    batchDate: input.batchDate ? String(input.batchDate) : undefined,
+                    menuPath: input.menuPath ? String(input.menuPath) : undefined,
+                    filters: input.filters,
+                    columns: input.columns,
+                    features: input.features,
+                    permissions: input.permissions,
+                    toolbarButtons: input.toolbarButtons,
+                    rowActions: input.rowActions,
+                    enableCrud: typeof input.enableCrud === 'boolean' ? input.enableCrud : undefined,
+                });
+                const saved = saveProject(project);
+                const preview = generatePrdMarkdown(project).slice(0, 800);
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                ok: true,
+                                slug: saved.slug,
+                                prdPath: saved.prdPath,
+                                studioUrl: `${getHttpBaseUrl()}/?slug=${saved.slug}`,
+                                previewMd: `${preview}${preview.length >= 800 ? '\n\n...(truncated)' : ''}`,
+                            }, null, 2),
+                        },
+                    ],
+                };
+            }
+            if (name === 'generate_prototype') {
+                const slug = String(input.slug || '');
+                const project = loadProject(slug);
+                if (!project)
+                    throw new Error(`项目不存在: ${slug}`);
+                if (input.regenerateFromConfig !== false) {
+                    const saved = saveProject(project);
+                    return {
+                        content: [
+                            {
+                                type: 'text',
+                                text: JSON.stringify({
+                                    ok: true,
+                                    slug,
+                                    prototypePath: saved.prototypePath,
+                                    previewUrl: `${getHttpBaseUrl()}/api/projects/${slug}/prototype?edit=1`,
+                                    fileUrl: `${getHttpBaseUrl()}/projects/${slug}/prototype.html?edit=1`,
+                                }, null, 2),
+                            },
+                        ],
+                    };
+                }
+                const html = generatePrototypeHtml(project);
+                return { content: [{ type: 'text', text: html.slice(0, 2000) + '...(truncated)' }] };
+            }
+            if (name === 'list_prd_projects') {
+                return {
+                    content: [{ type: 'text', text: JSON.stringify({ projects: listProjects() }, null, 2) }],
+                };
+            }
+            if (name === 'get_prd_project') {
+                const slug = String(input.slug || '');
+                const files = readProjectFiles(slug);
+                if (!files)
+                    throw new Error(`项目不存在: ${slug}`);
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                config: files.config,
+                                prdPreview: files.prd.slice(0, 1200),
+                                prototypeSize: files.prototype.length,
+                            }, null, 2),
+                        },
+                    ],
+                };
+            }
+            if (name === 'open_prd_studio') {
+                const slug = input.slug ? String(input.slug) : '';
+                const url = slug ? `${getHttpBaseUrl()}/?slug=${encodeURIComponent(slug)}` : getHttpBaseUrl();
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: JSON.stringify({ studioUrl: url, hint: '在浏览器打开此 URL 填写 PRD 要素并在线调整原型' }, null, 2),
+                        },
+                    ],
+                };
+            }
+            throw new Error(`Unknown tool: ${name}`);
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            return { content: [{ type: 'text', text: JSON.stringify({ ok: false, error: message }) }], isError: true };
+        }
+    });
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+}
+export { applyOverrides, PrdProjectSchema, saveProject };

package/package.json

@@ -0,0 +1,55 @@
+{
+    "name": "@deppon/deppon-prd-mcp",
+    "version": "0.1.0",
+    "description": "私有化 PRD 生成 + 交互原型 MCP 服务（基于 deppon-prd-generator skill）",
+    "license": "MIT",
+    "type": "module",
+    "keywords": [
+        "mcp",
+        "model-context-protocol",
+        "prd",
+        "prototype",
+        "deppon",
+        "cursor"
+    ],
+    "bin": {
+        "deppon-prd-mcp": "./dist/cli.js"
+    },
+    "main": "./dist/index.js",
+    "files": [
+        "dist",
+        "templates",
+        "web",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "npm run sync:templates && tsc",
+        "sync:templates": "node scripts/sync-templates.cjs",
+        "dev": "npm run build && node dist/cli.js",
+        "dev:web": "npm run build && node dist/cli.js --web-only",
+        "prepack": "npm run build",
+        "publish:auto": "npm publish"
+    },
+    "dependencies": {
+        "@modelcontextprotocol/sdk": "^1.12.1",
+        "express": "^4.21.2",
+        "zod": "^3.24.2"
+    },
+    "devDependencies": {
+        "@types/express": "^4.17.21",
+        "@types/node": "^20.17.16",
+        "typescript": "^5.7.3"
+    },
+    "engines": {
+        "node": ">=18"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://codehub.devcloud.cn-east-3.huaweicloud.com/e473681fd1cc4b2cb85967e5f7a3ff36/deppon-npm.git",
+        "directory": "packages/deppon-prd-mcp"
+    }
+}

package/templates/examples/README.md

@@ -0,0 +1,17 @@
+# deppon-prd-generator 内置参考示例
+
+本目录存放**已完成的对照示例**（非业务仓库的 `src/prototypes/` 交付物），供生成 PRD / 可选 `prototype.html` 时对齐**章节结构、表格粒度、标注与 `prd.md` 联动（`fetch` + `marked`）**。各子目录内 `prd.md` 文首含指向**同目录** `prototype.html` 的 Markdown 相对链接（与 `SKILL.md`「PRD 与原型互链」一致）；正文与原型 UI 默认**简体中文**。
+
+| 子目录 | 对应模板文件 | 页面类型 / 场景 |
+| ------ | ------------ | ---------------- |
+| `list-crud/` | `template/backend-list-prd-template.md` | 后台列表 **+ 完整 CRUD**（筛选/分页/详情/表单/删除） |
+| `backend-list/` | `template/backend-list-prd-template.md` | 后台 **纯列表**（筛选 + 表 + 分页，无弹层 CRUD） |
+| `form-edit/` | `template/backend-form-edit-prd-template.md` | 后台 **整页表单编辑**（字段/联动/保存取消） |
+| `form-preview/` | `template/backend-form-preview-prd-template.md` | 后台 **只读详情 / 预览** |
+| `data-dashboard/` | `template/data-prd-template.md` | **数据看板**（筛选 + 卡 + 图 + 表 + 指标总览） |
+| `user-frontend/` | `template/user-frontend-prd-template.md` | **用户前台 / C 端**活动页 |
+| `app-shell-navigation/` | `template/app-shell-navigation-prd-template.md` | **管理台壳层 + 多页文档中心**（侧栏/顶栏/栅格 + `pages/` 互跳） |
+
+**打开原型**：各 `prototype.html` 须通过**本地 HTTP**访问同目录，以便 `fetch('prd.md')`；勿依赖 `file://`。**`app-shell-navigation/`** 还须从该子目录打开，保证 iframe 内 `pages/*.html` 相对路径可用。
+
+各 `template/*.md` 文首已增加「生成时对照」与 **交互原型链接** 要求（见 `SKILL.md`「PRD 与原型互链」）。

package/templates/examples/app-shell-navigation/layout-spec.md

@@ -0,0 +1,54 @@
+# 首页栅格与导航布局速查（设计对齐用）
+
+> 本文件为 **`examples/app-shell-navigation/`** 配套速查，可与 `prd.md` §3、§4 一并维护。复制到业务 PRD 项目时可改名为 `layout-spec.md` 放在 hub 根目录。
+
+## 1. 整体结构（左右 + 顶）
+
+| 区域 | 位置 | 说明 |
+| ---- | ---- | ---- |
+| 侧栏 | 左侧固定 | 主导航；展开宽 **180px**，收起 **56px** |
+| 顶栏 | 主区上方 | 高 **56px**；Logo/标题左，工具右 |
+| 主工作区 | 顶栏下方、侧栏右侧 | 内嵌 **iframe** 或路由 `router-view` |
+
+## 2. 间距（与视觉稿一致时可照抄）
+
+| 名称 | 数值 | 用途 |
+| ---- | ---- | ---- |
+| 侧栏—主区 | **16px** | 水平间隙 |
+| 顶栏—内容 | **16px** | 顶栏底到主区顶 |
+| 主区内块间距 | **16px** | 卡片/区块之间 |
+| 页面底边距 | **24px** | 主区 `padding-bottom` |
+
+## 3. 24 栅格（主区内逻辑分栏）
+
+| 区块 | 建议占位 | 说明 |
+| ---- | -------- | ---- |
+| 顶通栏 | **24 / 24** | 全宽 KPI / 筛选横条 |
+| 下区左 | **16 / 24**（约 2/3） | 列表、大图表 |
+| 下区右 | **8 / 24**（约 1/3） | 辅信息、快捷入口 |
+
+## 4. 侧栏导航层级（交互摘要）
+
+| 层级 | 行高参考 | 交互 |
+| ---- | -------- | ---- |
+| 一级 | **52px** | 图标 + 文案 + chevron；点击展开二级 |
+| 二级 | 略缩进 | 无图标或弱图标 |
+| 三级 | 飞层卡片 | 悬停二级项右侧浮出；点击进子页 |
+| 收起 | 宽 56px | 仅图标 + Tooltip |
+
+## 5. 多页文档中心文件约定
+
+```text
+<hub>/
+  prd.md                 # 壳层 PRD（或含本速查链接）
+  layout-spec.md         # 可选：本速查副本
+  prototype.html         # 壳层入口
+  pages/
+    *.html               # 各业务子页原型
+```
+
+子页在壳层内打开：`<a href="pages/xxx.html" target="[iframe name]">` 或路由等价实现。
+
+---
+
+**修订**：2026-05-14 初版（与 `app-shell-navigation-prd-template.md` 配套）。

package/templates/examples/app-shell-navigation/pages/demo-form.html

@@ -0,0 +1,57 @@
+<!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>
+        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,500;0,9..40,600;0,9..40,700&display=swap" rel="stylesheet" />
+        <script>
+            tailwind.config = {
+                theme: { extend: { fontFamily: { sans: ['"DM Sans"', 'system-ui', 'PingFang SC', 'sans-serif'] } } },
+            };
+        </script>
+    </head>
+    <body class="min-h-full bg-gradient-to-b from-slate-50 to-white p-6 text-slate-800 antialiased">
+        <div class="mb-6">
+            <p class="text-[11px] font-semibold uppercase tracking-wider text-indigo-600/90">Form</p>
+            <h1 class="mt-1 text-xl font-bold tracking-tight text-slate-900">新建折扣</h1>
+            <p class="mt-1 text-sm text-slate-500">演示子页 · 整页表单可对接 backend-form-edit 模板。</p>
+        </div>
+        <form
+            class="max-w-lg space-y-5 rounded-2xl border border-slate-200/80 bg-white p-6 shadow-[0_8px_30px_-8px_rgb(15_23_42/0.08)]"
+            onsubmit="event.preventDefault();"
+        >
+            <label class="block">
+                <span class="text-xs font-semibold text-slate-700">折扣名称</span>
+                <input
+                    type="text"
+                    class="mt-1.5 w-full rounded-xl border border-slate-200 bg-slate-50/50 px-4 py-2.5 text-sm transition focus:border-indigo-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+                    placeholder="请输入"
+                />
+            </label>
+            <label class="block">
+                <span class="text-xs font-semibold text-slate-700">折扣值</span>
+                <input
+                    type="number"
+                    class="mt-1.5 w-full rounded-xl border border-slate-200 bg-slate-50/50 px-4 py-2.5 text-sm transition focus:border-indigo-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+                    placeholder="0"
+                />
+            </label>
+            <div class="flex justify-end gap-3 border-t border-slate-100 pt-5">
+                <button
+                    type="button"
+                    class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+                >
+                    取消
+                </button>
+                <button
+                    type="submit"
+                    class="rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-indigo-500/25 transition hover:from-indigo-500 hover:to-violet-500"
+                >
+                    保存
+                </button>
+            </div>
+        </form>
+    </body>
+</html>

package/templates/examples/app-shell-navigation/pages/demo-home.html

@@ -0,0 +1,92 @@
+<!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>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,500;0,9..40,600;0,9..40,700&display=swap"
+            rel="stylesheet"
+        />
+        <script>
+            tailwind.config = {
+                theme: {
+                    extend: {
+                        fontFamily: { sans: ['"DM Sans"', 'system-ui', 'PingFang SC', 'sans-serif'] },
+                    },
+                },
+            };
+        </script>
+    </head>
+    <body class="min-h-full bg-gradient-to-b from-slate-50 to-white p-6 text-slate-800 antialiased">
+        <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
+            <div>
+                <p class="text-[11px] font-semibold uppercase tracking-wider text-indigo-600/90">Overview</p>
+                <h1 class="mt-1 text-xl font-bold tracking-tight text-slate-900">工作台</h1>
+                <p class="mt-1 max-w-xl text-sm text-slate-500">栅格顶区 + 下区双列占位，与壳层 PRD §3.2 对齐。</p>
+            </div>
+            <div class="rounded-full border border-slate-200/80 bg-white px-3 py-1 text-xs font-medium text-slate-500 shadow-sm">
+                子页 · iframe
+            </div>
+        </div>
+
+        <div class="grid gap-4 lg:grid-cols-3">
+            <div
+                class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_8px_30px_-8px_rgb(15_23_42/0.08)] lg:col-span-3"
+            >
+                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-4">
+                    <h2 class="text-sm font-semibold text-slate-800">关键指标</h2>
+                    <span class="text-xs text-slate-400">今日</span>
+                </div>
+                <div class="mt-4 grid gap-3 sm:grid-cols-3">
+                    <div
+                        class="rounded-xl border border-blue-100/80 bg-gradient-to-br from-blue-50 to-indigo-50/50 p-4 transition hover:border-blue-200/90"
+                    >
+                        <p class="text-xs font-medium text-slate-600">今日单量</p>
+                        <p class="mt-2 text-3xl font-bold tabular-nums tracking-tight text-blue-700">—</p>
+                    </div>
+                    <div
+                        class="rounded-xl border border-emerald-100/80 bg-gradient-to-br from-emerald-50 to-teal-50/40 p-4 transition hover:border-emerald-200/90"
+                    >
+                        <p class="text-xs font-medium text-slate-600">完成率</p>
+                        <p class="mt-2 text-3xl font-bold tabular-nums tracking-tight text-emerald-700">—</p>
+                    </div>
+                    <div
+                        class="rounded-xl border border-amber-100/80 bg-gradient-to-br from-amber-50 to-orange-50/30 p-4 transition hover:border-amber-200/90"
+                    >
+                        <p class="text-xs font-medium text-slate-600">异常</p>
+                        <p class="mt-2 text-3xl font-bold tabular-nums tracking-tight text-amber-800">—</p>
+                    </div>
+                </div>
+            </div>
+
+            <div
+                class="min-h-[220px] rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_8px_30px_-8px_rgb(15_23_42/0.06)] lg:col-span-2"
+            >
+                <h2 class="text-sm font-semibold text-slate-800">主列 · 16/24</h2>
+                <p class="mt-2 text-sm leading-relaxed text-slate-500">图表、列表或嵌入完整业务原型 HTML。</p>
+                <div class="mt-4 h-28 rounded-xl border border-dashed border-slate-200 bg-slate-50/80"></div>
+            </div>
+
+            <div
+                class="min-h-[220px] rounded-2xl border border-slate-200/80 bg-gradient-to-b from-white to-slate-50/50 p-5 shadow-[0_8px_30px_-8px_rgb(15_23_42/0.06)]"
+            >
+                <h2 class="text-sm font-semibold text-slate-800">辅列 · 8/24</h2>
+                <p class="mt-2 text-sm leading-relaxed text-slate-500">快捷入口、说明与外链。</p>
+                <ul class="mt-4 space-y-2 text-sm text-indigo-600">
+                    <li class="flex items-center gap-2">
+                        <span class="h-1 w-1 rounded-full bg-indigo-400"></span>
+                        <span class="cursor-default hover:underline">文档中心</span>
+                    </li>
+                    <li class="flex items-center gap-2">
+                        <span class="h-1 w-1 rounded-full bg-indigo-400"></span>
+                        <span class="cursor-default hover:underline">发布说明</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </body>
+</html>

package/templates/examples/app-shell-navigation/pages/demo-list.html

@@ -0,0 +1,47 @@
+<!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>
+        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,500;0,9..40,600;0,9..40,700&display=swap" rel="stylesheet" />
+        <script>
+            tailwind.config = {
+                theme: { extend: { fontFamily: { sans: ['"DM Sans"', 'system-ui', 'PingFang SC', 'sans-serif'] } } },
+            };
+        </script>
+    </head>
+    <body class="min-h-full bg-gradient-to-b from-slate-50 to-white p-6 text-slate-800 antialiased">
+        <div class="mb-6">
+            <p class="text-[11px] font-semibold uppercase tracking-wider text-indigo-600/90">Product</p>
+            <h1 class="mt-1 text-xl font-bold tracking-tight text-slate-900">产品折扣列表</h1>
+            <p class="mt-1 text-sm text-slate-500">演示子页 · 可替换为完整 CRUD 原型。</p>
+        </div>
+        <div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-[0_8px_30px_-8px_rgb(15_23_42/0.08)]">
+            <div class="border-b border-slate-100 bg-slate-50/50 px-4 py-3">
+                <span class="text-xs font-semibold text-slate-600">数据表格</span>
+            </div>
+            <table class="min-w-full text-left text-sm">
+                <thead class="border-b border-slate-100 bg-white text-xs font-semibold uppercase tracking-wide text-slate-500">
+                    <tr>
+                        <th class="px-4 py-3">折扣名称</th>
+                        <th class="px-4 py-3">状态</th>
+                        <th class="px-4 py-3 text-right">操作</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-100">
+                    <tr class="transition hover:bg-slate-50/80">
+                        <td class="px-4 py-3.5 font-medium text-slate-800">示例 9 折</td>
+                        <td class="px-4 py-3.5"><span class="rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">启用</span></td>
+                        <td class="px-4 py-3.5 text-right text-xs font-medium">
+                            <span class="text-indigo-600 hover:text-indigo-800">编辑</span>
+                            <span class="mx-2 text-slate-300">|</span>
+                            <span class="text-rose-600 hover:text-rose-800">删除</span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </body>
+</html>