@deppon/deppon-prd-mcp 0.1.1 → 2.5.10

package/templates/examples/user-frontend/prd.md

@@ -14,18 +14,18 @@ C 端活动页：向新用户展示权益与参与规则，引导完成注册/
 
 ### 1.2 用户角色
 
-| 用户角色 | 描述       | 使用场景   |
-| -------- | ---------- | ---------- |
-| 游客     | 未登录访客 | 浏览活动规则 |
+| 用户角色 | 描述       | 使用场景       |
+| -------- | ---------- | -------------- |
+| 游客     | 未登录访客 | 浏览活动规则   |
 | 新用户   | 首次注册   | 领券、参与活动 |
 
 ### 1.3 功能清单
 
-| 模块   | 功能点   | 功能描述           |
-| ------ | -------- | ------------------ |
+| 模块   | 功能点   | 功能描述             |
+| ------ | -------- | -------------------- |
 | 活动页 | 首屏展示 | 主标题、权益、主 CTA |
-| 活动页 | 规则说明 | 折叠/锚点查看细则  |
-| 活动页 | 立即参与 | 跳转注册或唤起登录 |
+| 活动页 | 规则说明 | 折叠/锚点查看细则    |
+| 活动页 | 立即参与 | 跳转注册或唤起登录   |
 
 ---
 
@@ -41,11 +41,11 @@ C 端活动页：向新用户展示权益与参与规则，引导完成注册/
 
 1. **触发条件**：用户进入 H5/PC 落地页。
 2. **操作步骤**：
-   - 步骤1：浏览首屏权益。
-   - 步骤2：点击「立即参与」。
+    - 步骤 1：浏览首屏权益。
+    - 步骤 2：点击「立即参与」。
 3. **操作反馈**：
-   - 成功：已登录跳转任务页；未登录跳转注册（原型 Toast 模拟）。
-   - 失败：网络错误时轻提示。
+    - 成功：已登录跳转任务页；未登录跳转注册（原型 Toast 模拟）。
+    - 失败：网络错误时轻提示。
 
 ### 2.2 规则与 FAQ
 
@@ -70,17 +70,17 @@ C 端活动页：向新用户展示权益与参与规则，引导完成注册/
 ## 9. 原型与 PRD 对应关系
 
 | PRD 章节 | prototype.html 演示点 |
-| -------- | ---------------------- |
-| §1       | 页内「PRD §1」         |
-| §2.1     | 首屏区「PRD §2.1」     |
-| §2.2     | 规则折叠「PRD §2.2」   |
-| §3       | 全局反馈说明入口       |
-| 走查说明 | 左下角「标注说明」     |
+| -------- | --------------------- |
+| §1       | 页内「PRD §1」        |
+| §2.1     | 首屏区「PRD §2.1」    |
+| §2.2     | 规则折叠「PRD §2.2」  |
+| §3       | 全局反馈说明入口      |
+| 走查说明 | 左下角「标注说明」    |
 
 ---
 
 ## 10. 修订记录
 
-| 版本 | 日期       | 说明 |
-| ---- | ---------- | ---- |
+| 版本 | 日期       | 说明                              |
+| ---- | ---------- | --------------------------------- |
 | v0.1 | 2026-05-14 | 初版：对齐 user-frontend 模板示例 |

package/web/app.js

@@ -4,7 +4,7 @@ const $$ = (s, r = document) => [...r.querySelectorAll(s)];
 const state = {
     pageTypes: {},
     project: null,
-    editMode: false,
+    designMode: false,
 };
 
 function toast(msg) {
@@ -30,13 +30,15 @@ function todayBatch() {
 }
 
 function slugify(text) {
-    return text
-        .trim()
-        .toLowerCase()
-        .replace(/[\s_]+/g, '-')
-        .replace(/[^a-z0-9\u4e00-\u9fff-]/g, '')
-        .replace(/-+/g, '-')
-        .replace(/^-|-$/g, '') || `page-${Date.now()}`;
+    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) {
@@ -60,7 +62,9 @@ function renderColumnRow(item = { name: '', description: '', sortable: false },
     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>
+        <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();
@@ -75,27 +79,29 @@ function esc(s) {
 }
 
 function readList(container, kind) {
-    return $$(`.row-card`, container).map(row => {
-        if (kind === 'filters') {
+    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(),
-                type: row.querySelector('[data-k=type]').value.trim() || '文本',
-                limit: row.querySelector('[data-k=limit]').value.trim(),
-                matchRule: row.querySelector('[data-k=matchRule]').value.trim() || '模糊',
+                description: row.querySelector('[data-k=description]').value.trim(),
+                sortable: row.querySelector('[data-k=sortable]').checked,
             };
-        }
-        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);
+        })
+        .filter(x => x.name);
 }
 
 function collectForm() {
     const pageName = $('#pageName').value.trim();
     if (!pageName) throw new Error('请填写页面名称');
-    const slug = ($('#slug').value.trim() || slugify(pageName));
+    const slug = $('#slug').value.trim() || slugify(pageName);
     return {
         slug,
         pageName,
@@ -108,8 +114,14 @@ function collectForm() {
         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),
+        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 || [],
@@ -151,10 +163,10 @@ function switchTab(name) {
     $$('.panel').forEach(p => p.classList.toggle('hidden', p.id !== `panel-${name}`));
 }
 
-function loadProtoFrame(slug, edit = false) {
+function loadProtoFrame(slug, design = false) {
     if (!slug) return;
-    const q = edit ? '?edit=1&' : '?';
-    $('#protoFrame').src = `/projects/${slug}/prototype.html${q}t=${Date.now()}`;
+    const q = design ? `?design=1&t=${Date.now()}` : `?t=${Date.now()}`;
+    $('#protoFrame').src = `/projects/${slug}/prototype.html${q}`;
 }
 
 async function loadProjects() {
@@ -175,7 +187,7 @@ async function loadProject(slug) {
     state.project = data.config;
     fillForm(data.config);
     $('#prdEditor').value = data.prd;
-    loadProtoFrame(slug, state.editMode);
+    loadProtoFrame(slug, state.designMode);
     const url = new URL(location.href);
     url.searchParams.set('slug', slug);
     history.replaceState({}, '', url);
@@ -220,7 +232,7 @@ async function init() {
         });
     }
 
-    $$('.tab').forEach(btn => btn.onclick = () => switchTab(btn.dataset.tab));
+    $$('.tab').forEach(btn => (btn.onclick = () => switchTab(btn.dataset.tab)));
 
     $('#pageName').addEventListener('blur', () => {
         if (!$('#slug').value.trim() && $('#pageName').value.trim()) {
@@ -231,7 +243,10 @@ async function init() {
     $$('[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);
+            const row =
+                btn.dataset.add === 'filters'
+                    ? renderFilterRow({}, list.children.length)
+                    : renderColumnRow({}, list.children.length);
             list.appendChild(row);
         };
     });
@@ -264,7 +279,7 @@ async function init() {
             const res = await saveProject();
             const files = await api(`/api/projects/${res.slug}`);
             $('#prdEditor').value = files.prd;
-            loadProtoFrame(res.slug, false);
+            loadProtoFrame(res.slug, state.designMode);
             toast(`已生成：${res.slug}`);
             switchTab('proto');
         } catch (e) {
@@ -292,7 +307,7 @@ async function init() {
     $('#btnRefreshProto').onclick = async () => {
         try {
             const res = await saveProject();
-            loadProtoFrame(res.slug, state.editMode);
+            loadProtoFrame(res.slug, state.designMode);
             toast('原型已重新生成');
         } catch (e) {
             toast(e.message);
@@ -302,7 +317,10 @@ async function init() {
     $('#btnApplyPreview').onclick = async () => {
         try {
             const body = collectForm();
-            const { html } = await api('/api/projects/preview-prototype', { method: 'POST', body: JSON.stringify(body) });
+            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('已应用预览（未保存到磁盘）');
@@ -320,21 +338,38 @@ async function init() {
         }
     };
 
-    $('#btnToggleEdit').onclick = () => {
-        state.editMode = !state.editMode;
-        $('#btnToggleEdit').textContent = state.editMode ? '关闭 iframe 在线编辑' : '开启 iframe 在线编辑';
-        if (state.project?.slug) loadProtoFrame(state.project.slug, state.editMode);
+    $('#btnDesignMode').onclick = () => {
+        state.designMode = !state.designMode;
+        $('#btnDesignMode').textContent = state.designMode ? '退出设计模式' : '🎨 设计模式（拖拽）';
+        if (state.project?.slug) loadProtoFrame(state.project.slug, state.designMode);
     };
 
     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);
+        if (!e.data) return;
+        if (e.data.type === 'deppon-prd-save-design') {
+            try {
+                const payload = e.data.payload;
+                await api(`/api/projects/${payload.slug}/design`, {
+                    method: 'POST',
+                    body: JSON.stringify(payload),
+                });
+                toast('布局已保存，PRD 已同步');
+                await loadProject(payload.slug);
+                if (state.designMode) loadProtoFrame(payload.slug, true);
+            } catch (err) {
+                toast(err.message);
+            }
+            return;
+        }
+        if (e.data.type === 'deppon-prd-save-overrides') {
+            try {
+                const { slug, overrides } = e.data.payload;
+                await api(`/api/projects/${slug}/overrides`, { method: 'POST', body: JSON.stringify(overrides) });
+                toast('已保存');
+                await loadProject(slug);
+            } catch (err) {
+                toast(err.message);
+            }
         }
     });
 }

package/web/index.html

@@ -80,14 +80,14 @@
             <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="btnDesignMode" type="button" class="btn-primary">🎨 设计模式（拖拽）</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>
+                        <p class="mb-3 text-xs text-slate-500">「设计模式」可拖拽区块、筛选项、列表列、工具栏按钮；保存后写入 project.config.json 并同步 PRD。</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>