@deppon/deppon-prd-mcp 0.1.0

package/web/app.js

@@ -0,0 +1,342 @@
+const $ = (s, r = document) => r.querySelector(s);
+const $$ = (s, r = document) => [...r.querySelectorAll(s)];
+
+const state = {
+    pageTypes: {},
+    project: null,
+    editMode: false,
+};
+
+function toast(msg) {
+    const el = $('#toast');
+    el.textContent = msg;
+    el.classList.remove('hidden');
+    setTimeout(() => el.classList.add('hidden'), 2600);
+}
+
+async function api(path, options = {}) {
+    const res = await fetch(path, {
+        headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
+        ...options,
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(data.error || res.statusText);
+    return data;
+}
+
+function todayBatch() {
+    const d = new Date();
+    return `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, '0')}${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function slugify(text) {
+    return text
+        .trim()
+        .toLowerCase()
+        .replace(/[\s_]+/g, '-')
+        .replace(/[^a-z0-9\u4e00-\u9fff-]/g, '')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '') || `page-${Date.now()}`;
+}
+
+function renderFilterRow(item = { name: '', type: '文本', limit: '', matchRule: '模糊' }, index) {
+    const div = document.createElement('div');
+    div.className = 'row-card';
+    div.dataset.index = String(index);
+    div.innerHTML = `
+        <input data-k="name" placeholder="字段名" value="${esc(item.name)}" />
+        <input data-k="type" placeholder="类型" value="${esc(item.type)}" />
+        <input data-k="limit" placeholder="输入限制" value="${esc(item.limit)}" />
+        <input data-k="matchRule" placeholder="匹配规则" value="${esc(item.matchRule)}" />
+        <button type="button" data-remove>删除</button>`;
+    div.querySelector('[data-remove]').onclick = () => div.remove();
+    return div;
+}
+
+function renderColumnRow(item = { name: '', description: '', sortable: false }, index) {
+    const div = document.createElement('div');
+    div.className = 'row-card';
+    div.dataset.index = String(index);
+    div.innerHTML = `
+        <input data-k="name" placeholder="列名" value="${esc(item.name)}" />
+        <input data-k="description" placeholder="说明" value="${esc(item.description)}" />
+        <label class="inline-flex items-center gap-1"><input data-k="sortable" type="checkbox" ${item.sortable ? 'checked' : ''} /> 可排序</label>
+        <span></span>
+        <button type="button" data-remove>删除</button>`;
+    div.querySelector('[data-remove]').onclick = () => div.remove();
+    return div;
+}
+
+function esc(s) {
+    return String(s || '')
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;');
+}
+
+function readList(container, kind) {
+    return $$(`.row-card`, container).map(row => {
+        if (kind === 'filters') {
+            return {
+                name: row.querySelector('[data-k=name]').value.trim(),
+                type: row.querySelector('[data-k=type]').value.trim() || '文本',
+                limit: row.querySelector('[data-k=limit]').value.trim(),
+                matchRule: row.querySelector('[data-k=matchRule]').value.trim() || '模糊',
+            };
+        }
+        return {
+            name: row.querySelector('[data-k=name]').value.trim(),
+            description: row.querySelector('[data-k=description]').value.trim(),
+            sortable: row.querySelector('[data-k=sortable]').checked,
+        };
+    }).filter(x => x.name);
+}
+
+function collectForm() {
+    const pageName = $('#pageName').value.trim();
+    if (!pageName) throw new Error('请填写页面名称');
+    const slug = ($('#slug').value.trim() || slugify(pageName));
+    return {
+        slug,
+        pageName,
+        pageType: $('#pageType').value,
+        batchDate: $('#batchDate').value.trim() || todayBatch(),
+        useDpItTitle: $('#useDpItTitle').checked,
+        enableCrud: $('#enableCrud').checked,
+        background: $('#background').value.trim(),
+        menuPath: $('#menuPath').value.trim(),
+        filters: readList($('#filtersList'), 'filters'),
+        columns: readList($('#columnsList'), 'columns'),
+        createButtonLabel: $('#createButtonLabel').value.trim() || undefined,
+        toolbarButtons: ($('#toolbarButtons').value || '新建, 导出 CSV').split(/[,，]/).map(s => s.trim()).filter(Boolean),
+        rowActions: ($('#rowActions').value || '查看, 编辑, 删除').split(/[,，]/).map(s => s.trim()).filter(Boolean),
+        features: [],
+        permissions: [],
+        mockRows: state.project?.mockRows || [],
+    };
+}
+
+function fillForm(project) {
+    $('#pageName').value = project.pageName || '';
+    $('#slug').value = project.slug || '';
+    $('#pageType').value = project.pageType || 'list-crud';
+    $('#batchDate').value = project.batchDate || todayBatch();
+    $('#useDpItTitle').checked = project.useDpItTitle !== false;
+    $('#enableCrud').checked = project.enableCrud !== false;
+    $('#background').value = project.background || '';
+    $('#menuPath').value = project.menuPath || '';
+    $('#createButtonLabel').value = project.createButtonLabel || '';
+    $('#toolbarButtons').value = (project.toolbarButtons || []).join(', ');
+    $('#rowActions').value = (project.rowActions || []).join(', ');
+
+    $('#filtersList').innerHTML = '';
+    (project.filters || []).forEach((f, i) => $('#filtersList').appendChild(renderFilterRow(f, i)));
+    if (!(project.filters || []).length) $('#filtersList').appendChild(renderFilterRow({}, 0));
+
+    $('#columnsList').innerHTML = '';
+    (project.columns || []).forEach((c, i) => $('#columnsList').appendChild(renderColumnRow(c, i)));
+    if (!(project.columns || []).length) $('#columnsList').appendChild(renderColumnRow({}, 0));
+
+    updateLinks(project.slug);
+}
+
+function updateLinks(slug) {
+    if (!slug) return;
+    $('#linkPrdFile').href = `/projects/${slug}/prd.md`;
+    $('#linkProtoFile').href = `/projects/${slug}/prototype.html`;
+}
+
+function switchTab(name) {
+    $$('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === name));
+    $$('.panel').forEach(p => p.classList.toggle('hidden', p.id !== `panel-${name}`));
+}
+
+function loadProtoFrame(slug, edit = false) {
+    if (!slug) return;
+    const q = edit ? '?edit=1&' : '?';
+    $('#protoFrame').src = `/projects/${slug}/prototype.html${q}t=${Date.now()}`;
+}
+
+async function loadProjects() {
+    const { projects } = await api('/api/projects');
+    const sel = $('#projectSelect');
+    sel.innerHTML = '<option value="">— 选择项目 —</option>';
+    projects.forEach(p => {
+        const opt = document.createElement('option');
+        opt.value = p.slug;
+        opt.textContent = `${p.pageName} (${p.slug})`;
+        sel.appendChild(opt);
+    });
+}
+
+async function loadProject(slug) {
+    if (!slug) return;
+    const data = await api(`/api/projects/${slug}`);
+    state.project = data.config;
+    fillForm(data.config);
+    $('#prdEditor').value = data.prd;
+    loadProtoFrame(slug, state.editMode);
+    const url = new URL(location.href);
+    url.searchParams.set('slug', slug);
+    history.replaceState({}, '', url);
+}
+
+async function saveProject(body) {
+    const payload = body || collectForm();
+    const method = state.project?.slug === payload.slug && payload.slug ? 'PUT' : 'POST';
+    const url = method === 'PUT' ? `/api/projects/${payload.slug}` : '/api/projects';
+    const res = await api(url, { method, body: JSON.stringify(payload) });
+    state.project = payload;
+    await loadProjects();
+    $('#projectSelect').value = res.slug;
+    updateLinks(res.slug);
+    return res;
+}
+
+async function init() {
+    const meta = await api('/api/meta');
+    state.pageTypes = meta.pageTypes;
+    $('#pageType').innerHTML = Object.entries(meta.pageTypes)
+        .map(([k, v]) => `<option value="${k}">${v}</option>`)
+        .join('');
+
+    await loadProjects();
+
+    const params = new URLSearchParams(location.search);
+    const slug = params.get('slug');
+    if (slug) {
+        $('#projectSelect').value = slug;
+        await loadProject(slug);
+    } else {
+        fillForm({
+            pageName: '',
+            pageType: 'list-crud',
+            batchDate: todayBatch(),
+            filters: [{ name: '名称', type: '文本', limit: '1～64', matchRule: '模糊' }],
+            columns: [
+                { name: '名称', description: '业务名称', sortable: false },
+                { name: '状态', description: '启用/停用', sortable: true },
+            ],
+        });
+    }
+
+    $$('.tab').forEach(btn => btn.onclick = () => switchTab(btn.dataset.tab));
+
+    $('#pageName').addEventListener('blur', () => {
+        if (!$('#slug').value.trim() && $('#pageName').value.trim()) {
+            $('#slug').value = slugify($('#pageName').value);
+        }
+    });
+
+    $$('[data-add]').forEach(btn => {
+        btn.onclick = () => {
+            const list = btn.dataset.add === 'filters' ? $('#filtersList') : $('#columnsList');
+            const row = btn.dataset.add === 'filters' ? renderFilterRow({}, list.children.length) : renderColumnRow({}, list.children.length);
+            list.appendChild(row);
+        };
+    });
+
+    $('#projectSelect').onchange = () => {
+        const v = $('#projectSelect').value;
+        if (v) loadProject(v);
+    };
+
+    $('#btnNew').onclick = () => {
+        state.project = null;
+        fillForm({ pageName: '', pageType: 'list-crud', batchDate: todayBatch(), filters: [{}], columns: [{}] });
+        $('#prdEditor').value = '';
+        switchTab('form');
+    };
+
+    $('#btnPreviewPrd').onclick = async () => {
+        try {
+            const body = collectForm();
+            const { markdown } = await api('/api/projects/preview-prd', { method: 'POST', body: JSON.stringify(body) });
+            $('#prdEditor').value = markdown;
+            switchTab('prd');
+        } catch (e) {
+            toast(e.message);
+        }
+    };
+
+    $('#btnGenerate').onclick = async () => {
+        try {
+            const res = await saveProject();
+            const files = await api(`/api/projects/${res.slug}`);
+            $('#prdEditor').value = files.prd;
+            loadProtoFrame(res.slug, false);
+            toast(`已生成：${res.slug}`);
+            switchTab('proto');
+        } catch (e) {
+            toast(e.message);
+        }
+    };
+
+    $('#btnRefreshPrd').onclick = $('#btnPreviewPrd').onclick;
+
+    $('#btnSavePrd').onclick = async () => {
+        try {
+            if (!state.project?.slug) throw new Error('请先生成项目');
+            const slug = state.project.slug;
+            await fetch(`/api/projects/${slug}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ ...collectForm(), prdOverride: $('#prdEditor').value }),
+            });
+            toast('配置已保存（prd 文本请在磁盘上直接编辑 prototype 联动需重新生成）');
+        } catch (e) {
+            toast(e.message);
+        }
+    };
+
+    $('#btnRefreshProto').onclick = async () => {
+        try {
+            const res = await saveProject();
+            loadProtoFrame(res.slug, state.editMode);
+            toast('原型已重新生成');
+        } catch (e) {
+            toast(e.message);
+        }
+    };
+
+    $('#btnApplyPreview').onclick = async () => {
+        try {
+            const body = collectForm();
+            const { html } = await api('/api/projects/preview-prototype', { method: 'POST', body: JSON.stringify(body) });
+            const blob = new Blob([html], { type: 'text/html' });
+            $('#protoFrame').src = URL.createObjectURL(blob);
+            toast('已应用预览（未保存到磁盘）');
+        } catch (e) {
+            toast(e.message);
+        }
+    };
+
+    $('#btnSaveProject').onclick = async () => {
+        try {
+            const res = await saveProject();
+            toast(`项目已保存：${res.slug}`);
+        } catch (e) {
+            toast(e.message);
+        }
+    };
+
+    $('#btnToggleEdit').onclick = () => {
+        state.editMode = !state.editMode;
+        $('#btnToggleEdit').textContent = state.editMode ? '关闭 iframe 在线编辑' : '开启 iframe 在线编辑';
+        if (state.project?.slug) loadProtoFrame(state.project.slug, state.editMode);
+    };
+
+    window.addEventListener('message', async e => {
+        if (!e.data || e.data.type !== 'deppon-prd-save-overrides') return;
+        try {
+            const { slug, overrides } = e.data.payload;
+            await api(`/api/projects/${slug}/overrides`, { method: 'POST', body: JSON.stringify(overrides) });
+            toast('iframe 编辑已保存');
+            await loadProject(slug);
+        } catch (err) {
+            toast(err.message);
+        }
+    });
+}
+
+init().catch(err => toast(err.message));

package/web/index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Deppon PRD Studio</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <link rel="stylesheet" href="./styles.css" />
+    </head>
+    <body class="min-h-screen bg-slate-50 text-slate-800">
+        <header class="border-b border-slate-200 bg-white shadow-sm">
+            <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3">
+                <div>
+                    <h1 class="text-lg font-bold text-slate-900">Deppon PRD Studio</h1>
+                    <p class="text-xs text-slate-500">基于 deppon-prd-generator · 私有化 MCP</p>
+                </div>
+                <div class="flex items-center gap-2">
+                    <select id="projectSelect" class="rounded border border-slate-300 px-2 py-1.5 text-sm"></select>
+                    <button id="btnNew" type="button" class="rounded border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50">新建</button>
+                </div>
+            </div>
+            <nav class="mx-auto flex max-w-7xl gap-1 px-4 pb-2">
+                <button type="button" class="tab active" data-tab="form">① PRD 要素</button>
+                <button type="button" class="tab" data-tab="prd">② PRD 文档</button>
+                <button type="button" class="tab" data-tab="proto">③ 原型编辑</button>
+            </nav>
+        </header>
+
+        <main class="mx-auto max-w-7xl px-4 py-4">
+            <!-- Step 1: Form -->
+            <section id="panel-form" class="panel">
+                <div class="grid gap-4 lg:grid-cols-2">
+                    <div class="space-y-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                        <h2 class="text-sm font-semibold">基础信息</h2>
+                        <label class="field"><span>页面名称 *</span><input id="pageName" type="text" placeholder="产品折扣列表" /></label>
+                        <label class="field"><span>Slug（目录名，建议英文 kebab-case）</span><input id="slug" type="text" placeholder="visitor-appointment-list" /></label>
+                        <label class="field"><span>页面类型</span>
+                            <select id="pageType"></select>
+                        </label>
+                        <label class="field"><span>批次日 YYYYMMDD</span><input id="batchDate" type="text" maxlength="8" placeholder="20260601" /></label>
+                        <label class="field"><span>菜单路径</span><input id="menuPath" type="text" placeholder="产品管理 / 折扣与价格 / 产品折扣列表" /></label>
+                        <label class="field"><span>背景描述 §1.1</span><textarea id="background" rows="3"></textarea></label>
+                        <label class="inline-flex items-center gap-2 text-sm"><input id="useDpItTitle" type="checkbox" checked /> 使用 DP-IT 标准标题</label>
+                        <label class="inline-flex items-center gap-2 text-sm"><input id="enableCrud" type="checkbox" checked /> 含 CRUD（查看/新建/编辑/删除）</label>
+                    </div>
+                    <div class="space-y-4">
+                        <div 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">筛选字段 §3.1</h2>
+                                <button type="button" class="btn-sm" data-add="filters">+ 添加</button>
+                            </div>
+                            <div id="filtersList" class="space-y-2"></div>
+                        </div>
+                        <div 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">列表字段 §3.2</h2>
+                                <button type="button" class="btn-sm" data-add="columns">+ 添加</button>
+                            </div>
+                            <div id="columnsList" class="space-y-2"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-4 flex flex-wrap gap-2">
+                    <button id="btnGenerate" type="button" class="btn-primary">生成 PRD + 原型</button>
+                    <button id="btnPreviewPrd" type="button" class="btn-secondary">仅预览 PRD</button>
+                </div>
+            </section>
+
+            <!-- Step 2: PRD preview -->
+            <section id="panel-prd" class="panel hidden">
+                <div class="mb-3 flex flex-wrap gap-2">
+                    <button id="btnRefreshPrd" type="button" class="btn-secondary">从表单刷新</button>
+                    <button id="btnSavePrd" type="button" class="btn-primary">保存 PRD 到项目</button>
+                    <a id="linkPrdFile" href="#" target="_blank" class="btn-secondary">打开 prd.md</a>
+                </div>
+                <textarea id="prdEditor" class="min-h-[70vh] w-full rounded-xl border border-slate-200 p-4 font-mono text-sm shadow-sm" spellcheck="false"></textarea>
+            </section>
+
+            <!-- Step 3: Prototype -->
+            <section id="panel-proto" class="panel hidden">
+                <div class="mb-3 flex flex-wrap items-center gap-2">
+                    <button id="btnRefreshProto" type="button" class="btn-secondary">从表单重新生成原型</button>
+                    <button id="btnToggleEdit" type="button" class="btn-primary">开启 iframe 在线编辑</button>
+                    <button id="btnSaveProject" type="button" class="btn-primary">保存整个项目</button>
+                    <a id="linkProtoFile" href="#" target="_blank" class="btn-secondary">新窗口打开原型</a>
+                </div>
+                <div class="grid gap-4 lg:grid-cols-5">
+                    <aside class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm lg:col-span-2">
+                        <h2 class="mb-3 text-sm font-semibold">动态调整</h2>
+                        <p class="mb-3 text-xs text-slate-500">修改后点「应用预览」实时刷新右侧原型；保存后写入磁盘。</p>
+                        <label class="field"><span>新建按钮文案</span><input id="createButtonLabel" type="text" /></label>
+                        <label class="field"><span>工具栏按钮（逗号分隔）</span><input id="toolbarButtons" type="text" placeholder="新建, 导出 CSV" /></label>
+                        <label class="field"><span>行操作（逗号分隔）</span><input id="rowActions" type="text" placeholder="查看, 编辑, 删除" /></label>
+                        <button id="btnApplyPreview" type="button" class="btn-primary mt-2 w-full">应用预览</button>
+                    </aside>
+                    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm lg:col-span-3">
+                        <iframe id="protoFrame" title="原型预览" class="h-[75vh] w-full border-0 bg-slate-100"></iframe>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <div id="toast" class="toast hidden"></div>
+        <script src="./app.js" type="module"></script>
+    </body>
+</html>

package/web/styles.css

@@ -0,0 +1,100 @@
+.tab {
+    border-radius: 0.5rem;
+    padding: 0.4rem 0.85rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: rgb(71 85 105);
+}
+.tab:hover {
+    background: rgb(241 245 249);
+}
+.tab.active {
+    background: rgb(37 99 235);
+    color: white;
+}
+.panel.hidden {
+    display: none;
+}
+.field {
+    display: block;
+    font-size: 0.75rem;
+}
+.field > span {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-weight: 600;
+    color: rgb(71 85 105);
+}
+.field input,
+.field select,
+.field textarea {
+    width: 100%;
+    border-radius: 0.375rem;
+    border: 1px solid rgb(203 213 225);
+    padding: 0.45rem 0.65rem;
+    font-size: 0.8125rem;
+}
+.field textarea {
+    resize: vertical;
+}
+.btn-primary {
+    border-radius: 0.5rem;
+    background: rgb(37 99 235);
+    padding: 0.45rem 0.9rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: white;
+}
+.btn-primary:hover {
+    background: rgb(29 78 216);
+}
+.btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 0.5rem;
+    border: 1px solid rgb(203 213 225);
+    background: white;
+    padding: 0.45rem 0.9rem;
+    font-size: 0.8125rem;
+    color: rgb(51 65 85);
+}
+.btn-secondary:hover {
+    background: rgb(248 250 252);
+}
+.btn-sm {
+    border-radius: 0.375rem;
+    border: 1px dashed rgb(148 163 184);
+    padding: 0.15rem 0.5rem;
+    font-size: 0.6875rem;
+    color: rgb(71 85 105);
+}
+.row-card {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.35rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgb(226 232 240);
+    padding: 0.5rem;
+    font-size: 0.75rem;
+}
+.row-card button {
+    grid-column: 1 / -1;
+    justify-self: end;
+    color: rgb(220 38 38);
+    font-size: 0.6875rem;
+}
+.toast {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 100;
+    border-radius: 0.5rem;
+    background: rgb(15 23 42);
+    padding: 0.65rem 1rem;
+    font-size: 0.8125rem;
+    color: white;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+.toast.hidden {
+    display: none;
+}