@deppon/deppon-prd-mcp 0.1.1 → 2.5.10

package/dist/core/prototype-generator.js

@@ -1,44 +1,99 @@
 import { defaultMockRows } from './types.js';
+import { applyLayout, getDesignModeScript, getDesignModeStyles } from './prototype-layout.js';
 function escapeHtml(text) {
-    return text
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
 function filterInputHtml(filter, index) {
     const id = `f${index}`;
-    if (filter.type.includes('下拉') || filter.type.includes('select')) {
-        const opts = (filter.limit.match(/[^/、，,\s]+/g) || ['全部', '启用', '停用'])
-            .map(v => v.trim())
-            .filter(Boolean);
-        const options = opts
-            .map((o, i) => `<option value="${i === 0 ? '' : escapeHtml(o)}">${escapeHtml(o)}</option>`)
-            .join('');
-        return `<label class="block text-xs font-medium text-slate-600">${escapeHtml(filter.name)}
+    const inner = filter.type.includes('下拉') || filter.type.includes('select')
+        ? (() => {
+            const opts = (filter.limit.match(/[^/、，,\s]+/g) || ['全部', '启用', '停用'])
+                .map(v => v.trim())
+                .filter(Boolean);
+            const options = opts
+                .map((o, i) => `<option value="${i === 0 ? '' : escapeHtml(o)}">${escapeHtml(o)}</option>`)
+                .join('');
+            return `<label class="block text-xs font-medium text-slate-600">${escapeHtml(filter.name)}
                         <select id="${id}" data-filter="${escapeHtml(filter.name)}" class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">${options}</select>
                     </label>`;
-    }
-    return `<label class="block text-xs font-medium text-slate-600">${escapeHtml(filter.name)}
+        })()
+        : `<label class="block text-xs font-medium text-slate-600">${escapeHtml(filter.name)}
                         <input type="text" id="${id}" data-filter="${escapeHtml(filter.name)}" class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="${escapeHtml(filter.matchRule)}" autocomplete="off" />
                     </label>`;
+    return `<div class="relative pt-5" data-drag-item data-filter-index="${index}">${inner}<button type="button" class="design-del" title="移除">×</button></div>`;
 }
-export function generatePrototypeHtml(project) {
+function renderBlocks(project) {
     const listTitle = `${project.pageName.replace(/列表|管理/g, '').trim() || project.pageName}列表`;
-    const mockRows = project.mockRows.length ? project.mockRows : defaultMockRows(project.columns);
-    const configJson = JSON.stringify({ ...project, mockRows }).replace(/</g, '\\u003c');
     const filterHtml = project.filters.map((f, i) => filterInputHtml(f, i)).join('\n                    ');
-    const columnHeaders = project.columns.map(c => `<th class="px-4 py-3">${escapeHtml(c.name)}</th>`).join('\n                                ');
+    const columnHeaders = project.columns
+        .map((c, i) => `<th class="relative px-4 py-3 pt-6" data-drag-item data-column-index="${i}">${escapeHtml(c.name)}<button type="button" class="design-del" title="移除">×</button></th>`)
+        .join('\n                                ');
     const toolbarHtml = project.toolbarButtons
         .map((btn, i) => {
-        const primary = i === 0 ? 'bg-blue-600 text-white shadow hover:bg-blue-700' : 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50';
+        const primary = i === 0
+            ? 'bg-blue-600 text-white shadow hover:bg-blue-700'
+            : 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50';
         const id = i === 0 && project.enableCrud ? ' id="btnAdd"' : '';
-        return `<button type="button"${id} class="rounded-lg ${primary} px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" data-toolbar="${escapeHtml(btn)}">${escapeHtml(btn)}</button>`;
+        return `<div class="relative inline-block pt-5" data-drag-item data-toolbar-index="${i}"><button type="button"${id} class="rounded-lg ${primary} px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" data-toolbar="${escapeHtml(btn)}">${escapeHtml(btn)}</button><button type="button" class="design-del" title="移除">×</button></div>`;
     })
         .join('\n                        ');
-    const rowActionsHtml = project.rowActions
-        .map(a => `<button type="button" class="row-action text-blue-600 hover:underline" data-action="${escapeHtml(a)}">${escapeHtml(a)}</button>`)
-        .join('\n                                        ');
+    const filterBlock = `<section data-block="filter" class="mb-6 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+            <div class="block-drag-handle design-only">⠿ 拖拽区块</div>
+            <div class="mb-3 flex flex-wrap items-center gap-2">
+                <span class="drag-handle static! relative! mr-1 hidden design-only">⠿</span>
+                <h2 class="text-sm font-semibold text-slate-900" data-editable="filterTitle">筛选条件</h2>
+                <button type="button" class="anno-trigger" data-anno-key="s31">PRD §3.1</button>
+                <button type="button" class="design-del ml-auto design-only" data-block-del="filter" title="隐藏区块">隐藏</button>
+            </div>
+            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4" id="filterGrid">${filterHtml}</div>
+            <div class="mt-4 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 font-medium text-slate-700 hover:bg-slate-50">重置</button>
+            </div>
+        </section>`;
+    const tableBlock = `<section data-block="table" class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+            <div class="block-drag-handle design-only m-3 mb-0">⠿ 拖拽区块</div>
+            <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 px-4 py-3">
+                <div class="flex items-center gap-2">
+                    <h2 class="text-sm font-semibold text-slate-900" data-editable="listTitle">${escapeHtml(listTitle)}</h2>
+                    <button type="button" class="anno-trigger" data-anno-key="s32">PRD §3.2</button>
+                </div>
+                <div class="flex flex-wrap items-center gap-2" id="toolbar">${toolbarHtml}</div>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-slate-200 text-left text-sm">
+                    <thead class="bg-slate-50 text-xs font-medium uppercase tracking-wide text-slate-600"><tr id="columnHeadRow">${columnHeaders}<th class="px-4 py-3 text-right">操作</th></tr></thead>
+                    <tbody id="tbody" class="divide-y divide-slate-100 bg-white"></tbody>
+                </table>
+            </div>
+            <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 px-4 py-3 text-xs text-slate-600">
+                <span id="totalHint"></span>
+                <div class="flex items-center gap-2">
+                    <button type="button" id="btnPrev" class="rounded border border-slate-300 px-3 py-1.5 text-xs font-medium hover:bg-slate-50">上一页</button>
+                    <span id="pageInfo"></span>
+                    <button type="button" id="btnNext" class="rounded border border-slate-300 px-3 py-1.5 text-xs font-medium hover:bg-slate-50">下一页</button>
+                </div>
+            </div>
+        </section>`;
+    return { filterBlock, tableBlock };
+}
+function composeMainBlocks(project) {
+    const { filterBlock, tableBlock } = renderBlocks(project);
+    const hidden = new Set(project.layout?.hiddenBlocks || []);
+    const order = project.layout?.blockOrder?.length ? project.layout.blockOrder : ['filter', 'table'];
+    const map = { filter: filterBlock, table: tableBlock };
+    return order
+        .filter(id => map[id] && !hidden.has(id))
+        .map(id => map[id])
+        .join('\n        ');
+}
+export function generatePrototypeHtml(rawProject) {
+    const project = applyLayout(rawProject);
+    const mockRows = project.mockRows.length ? project.mockRows : defaultMockRows(project.columns);
+    const configJson = JSON.stringify({ ...project, mockRows }).replace(/</g, '\\u003c');
+    const mainHtml = composeMainBlocks(project);
+    const designStyles = getDesignModeStyles();
+    const designScript = getDesignModeScript();
     return `<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
@@ -50,73 +105,37 @@ export function generatePrototypeHtml(project) {
     <style>
         .anno-trigger{display:inline-flex;align-items:center;justify-content:center;border-radius:.375rem;border:1px solid rgba(217,119,6,.85);background:rgba(254,243,199,.95);padding:.15rem .5rem;font-size:.625rem;font-weight:700;letter-spacing:.04em;color:rgb(69 26 3);cursor:pointer;white-space:nowrap}
         .anno-trigger:hover{background:rgb(253 230 138)}
-        #editToolbar{position:fixed;top:0;left:0;right:0;z-index:80;display:none;align-items:center;gap:.75rem;border-bottom:1px solid rgb(251 191 36);background:rgb(255 251 235);padding:.5rem 1rem;font-size:.75rem;color:rgb(69 26 3)}
-        body.edit-mode #editToolbar{display:flex}
-        body.edit-mode [data-editable]{outline:1px dashed rgba(59,130,246,.45);outline-offset:2px;cursor:text;border-radius:.25rem}
-        body.edit-mode [data-editable]:focus{outline:2px solid rgb(59 130 246);background:rgba(239,246,255,.6)}
+        .design-del,.design-only{display:none}
+        ${designStyles}
         #annoDlgBody .prd-md table{width:100%;border-collapse:collapse;font-size:.75rem}
         #annoDlgBody .prd-md th,#annoDlgBody .prd-md td{border:1px solid rgb(226 232 240);padding:.35rem .5rem}
         #annoDlgBody .prd-md th{background:rgb(248 250 252);font-weight:600;text-align:left}
     </style>
 </head>
 <body class="min-h-screen bg-slate-100 text-slate-800 antialiased">
-    <div id="editToolbar" role="toolbar" aria-label="在线编辑">
-        <strong>在线编辑模式</strong>
-        <span>点击页面中带虚线框的文字可直接修改；改完后点「保存到项目」</span>
-        <button type="button" id="btnSaveEdit" class="rounded bg-blue-600 px-3 py-1.5 text-white hover:bg-blue-700">保存到项目</button>
-        <button type="button" id="btnExitEdit" class="rounded border border-slate-300 bg-white px-3 py-1.5 hover:bg-slate-50">退出编辑</button>
+    <div id="designToolbar" role="toolbar" aria-label="设计模式">
+        <strong>🎨 设计模式</strong>
+        <span>拖拽 ⠿ 调整区块/筛选项/列/按钮顺序；点击文字可改文案；× 可移除</span>
+        <button type="button" id="btnSaveDesign" class="rounded bg-indigo-600 px-3 py-1.5 text-white hover:bg-indigo-700">保存布局</button>
+        <button type="button" id="btnExitDesign" class="rounded border border-indigo-300 bg-white px-3 py-1.5 hover:bg-indigo-50">退出设计</button>
     </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>
+    <div id="toast" class="fixed top-14 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 hover:bg-amber-50">? 标注说明</button>
 
-    <header class="border-b border-slate-200 bg-white">
+    <header class="border-b border-slate-200 bg-white" data-block="header">
         <div class="mx-auto flex max-w-6xl items-center px-4 py-4">
             <div class="flex items-start gap-2">
                 <div>
                     <h1 class="text-lg font-semibold text-slate-900" data-editable="pageName">${escapeHtml(project.pageName)}</h1>
-                    <p class="mt-0.5 text-xs text-slate-500">原型 · 与 prd.md 对齐 · deppon-prd-mcp</p>
+                    <p class="mt-0.5 text-xs text-slate-500">原型 · deppon-prd-mcp · 加 <code>?design=1</code> 进入设计模式</p>
                 </div>
                 <button type="button" class="anno-trigger mt-0.5" data-anno-key="s1">PRD §1</button>
             </div>
         </div>
     </header>
 
-    <main class="mx-auto max-w-6xl 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 flex-wrap items-center gap-2">
-                <h2 class="text-sm font-semibold text-slate-900" data-editable="filterTitle">筛选条件</h2>
-                <button type="button" class="anno-trigger" data-anno-key="s31">PRD §3.1</button>
-            </div>
-            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4" id="filterGrid">${filterHtml}</div>
-            <div class="mt-4 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 font-medium text-slate-700 hover:bg-slate-50">重置</button>
-            </div>
-        </section>
-
-        <section class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
-            <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 px-4 py-3">
-                <div class="flex items-center gap-2">
-                    <h2 class="text-sm font-semibold text-slate-900" data-editable="listTitle">${escapeHtml(listTitle)}</h2>
-                    <button type="button" class="anno-trigger" data-anno-key="s32">PRD §3.2</button>
-                </div>
-                <div class="flex flex-wrap items-center gap-2" id="toolbar">${toolbarHtml}</div>
-            </div>
-            <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-slate-200 text-left text-sm">
-                    <thead class="bg-slate-50 text-xs font-medium uppercase tracking-wide text-slate-600"><tr>${columnHeaders}<th class="px-4 py-3 text-right">操作</th></tr></thead>
-                    <tbody id="tbody" class="divide-y divide-slate-100 bg-white"></tbody>
-                </table>
-            </div>
-            <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 px-4 py-3 text-xs text-slate-600">
-                <span id="totalHint"></span>
-                <div class="flex items-center gap-2">
-                    <button type="button" id="btnPrev" class="rounded border border-slate-300 px-3 py-1.5 text-xs font-medium hover:bg-slate-50">上一页</button>
-                    <span id="pageInfo"></span>
-                    <button type="button" id="btnNext" class="rounded border border-slate-300 px-3 py-1.5 text-xs font-medium hover:bg-slate-50">下一页</button>
-                </div>
-            </div>
-        </section>
+    <main class="mx-auto max-w-6xl px-4 py-6" id="mainBlocks">
+        ${mainHtml}
     </main>
 
     <div id="modalDetail" class="fixed inset-0 z-40 hidden items-center justify-center bg-black/40 p-4" role="dialog" aria-modal="true">
@@ -237,25 +256,9 @@ export function generatePrototypeHtml(project) {
         function slicePrd(key){ if(!prdCache) return '<p>无法加载 prd.md，请用 HTTP 打开。</p>'; const marker=ANNO_KEYS[key]; if(!marker) return '<p>无对应章节</p>'; const i=prdCache.indexOf(marker); if(i<0) return '<p>未找到 '+marker+'</p>'; const rest=prdCache.slice(i); const next=rest.search(/\\n## /); const chunk=next>0?rest.slice(0,next):rest; return marked.parse(chunk); }
         $$('.anno-trigger').forEach(btn=>{ btn.onclick=async()=>{ if(!prdCache) await loadPrd(); $('#annoTitle').textContent='PRD 标注 · '+btn.textContent.trim(); $('.prd-md',$('#annoDlgBody')).innerHTML=slicePrd(btn.dataset.annoKey); showModal($('#modalAnno')); }; });
         $('#btnCloseAnno').onclick=()=>hideModal($('#modalAnno'));
-        $('#btnAnnoLegend').onclick=async()=>{ if(!prdCache) await loadPrd(); $('#annoTitle').textContent='需求标注说明'; $('.prd-md',$('#annoDlgBody')).innerHTML='<p>点击页面上的 <strong>PRD §x</strong> 按钮可查看对应 prd.md 章节。改 PRD 后刷新页面即可联动。</p>'; showModal($('#modalAnno')); };
+        $('#btnAnnoLegend').onclick=async()=>{ if(!prdCache) await loadPrd(); $('#annoTitle').textContent='需求标注说明'; $('.prd-md',$('#annoDlgBody')).innerHTML='<p>设计模式：<code>?design=1</code> 可拖拽调整布局并保存。</p>'; showModal($('#modalAnno')); };
         [$('#modalDetail'),$('#modalForm'),$('#modalDelete'),$('#modalAnno')].forEach(m=>{ m.onclick=e=>{ if(e.target===m) hideModal(m); }; });
 
-        const params=new URLSearchParams(location.search);
-        const editMode=params.get('edit')==='1';
-        if(editMode){
-            document.body.classList.add('edit-mode');
-            $$('[data-editable]').forEach(el=>{ el.contentEditable='true'; el.spellcheck=false; });
-            $('#btnSaveEdit').onclick=()=>{
-                const payload={ slug:CFG.slug, overrides:{
-                    pageName: $('[data-editable=pageName]').textContent.trim(),
-                    listTitle: $('[data-editable=listTitle]').textContent.trim(),
-                    filterTitle: $('[data-editable=filterTitle]').textContent.trim(),
-                }};
-                window.parent.postMessage({ type:'deppon-prd-save-overrides', payload }, '*');
-                toast('已发送保存请求');
-            };
-            $('#btnExitEdit').onclick=()=>{ location.search=''; };
-        }
         window.addEventListener('message',e=>{
             if(e.data&&e.data.type==='deppon-prd-apply-config'){
                 Object.assign(CFG,e.data.config||{});
@@ -267,6 +270,7 @@ export function generatePrototypeHtml(project) {
         renderTable();
     })();
     <\/script>
+    <script>${designScript}<\/script>
 </body>
 </html>`;
 }

package/dist/core/prototype-layout.d.ts

@@ -0,0 +1,13 @@
+import type { PrdProject } from './types.js';
+/** 原型可视化布局（拖拽排序结果，写入 project.config.json） */
+export interface PrototypeLayout {
+    blockOrder?: string[];
+    filterOrder?: number[];
+    columnOrder?: number[];
+    toolbarOrder?: number[];
+    hiddenBlocks?: string[];
+}
+export declare function reorderByIndex<T>(items: T[], order: number[] | undefined): T[];
+export declare function applyLayout(project: PrdProject): PrdProject;
+export declare function getDesignModeStyles(): string;
+export declare function getDesignModeScript(): string;

package/dist/core/prototype-layout.js

@@ -0,0 +1,219 @@
+export function reorderByIndex(items, order) {
+    if (!order?.length || order.length !== items.length)
+        return items;
+    if (new Set(order).size !== items.length)
+        return items;
+    return order.map(i => items[i]).filter((x) => x !== undefined);
+}
+export function applyLayout(project) {
+    const layout = project.layout;
+    if (!layout)
+        return project;
+    const next = { ...project };
+    if (layout.filterOrder?.length === project.filters.length) {
+        next.filters = reorderByIndex(project.filters, layout.filterOrder);
+    }
+    if (layout.columnOrder?.length === project.columns.length) {
+        next.columns = reorderByIndex(project.columns, layout.columnOrder);
+        // mock 行按新列顺序重排键（若键名匹配）
+        next.mockRows = project.mockRows.map(row => {
+            const ordered = {};
+            for (const col of next.columns) {
+                if (row[col.name] !== undefined)
+                    ordered[col.name] = row[col.name];
+            }
+            return Object.keys(ordered).length ? ordered : row;
+        });
+    }
+    if (layout.toolbarOrder?.length === project.toolbarButtons.length) {
+        next.toolbarButtons = reorderByIndex(project.toolbarButtons, layout.toolbarOrder);
+    }
+    return next;
+}
+export function getDesignModeStyles() {
+    return `
+        body.design-mode { padding-top: 3rem; }
+        body.design-mode #designToolbar { display: flex; }
+        #designToolbar {
+            position: fixed; top: 0; left: 0; right: 0; z-index: 90;
+            display: none; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
+            border-bottom: 2px solid rgb(99 102 241);
+            background: linear-gradient(180deg, rgb(238 242 255), rgb(224 231 255));
+            padding: .45rem 1rem; font-size: .75rem; color: rgb(30 27 75);
+            box-shadow: 0 4px 12px rgba(79,70,229,.15);
+        }
+        body.design-mode [data-drag-item] {
+            position: relative; cursor: grab;
+            outline: 2px dashed rgba(99,102,241,.35); outline-offset: 2px;
+            border-radius: .375rem; transition: box-shadow .15s;
+        }
+        body.design-mode [data-drag-item]:hover {
+            outline-color: rgb(99 102 241);
+            box-shadow: 0 0 0 3px rgba(99,102,241,.12);
+        }
+        body.design-mode .sortable-ghost { opacity: .45; background: rgb(224 231 255); }
+        body.design-mode .sortable-drag { cursor: grabbing; }
+        body.design-mode .drag-handle {
+            position: absolute; top: .25rem; left: .25rem; z-index: 2;
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 1.25rem; height: 1.25rem; border-radius: .25rem;
+            background: rgb(99 102 241); color: white; font-size: .625rem;
+            cursor: grab; user-select: none; line-height: 1;
+        }
+        body.design-mode section[data-block] { padding-top: 1.75rem; }
+        body.design-mode .block-drag-handle {
+            display: flex; align-items: center; gap: .35rem;
+            margin: -.25rem 0 .5rem; padding: .2rem .5rem; width: fit-content;
+            border-radius: .375rem; background: rgb(99 102 241); color: white;
+            font-size: .625rem; font-weight: 600; cursor: grab; user-select: none;
+        }
+        body.design-mode .design-del,
+        body.design-mode .design-only { display: inline-flex; }
+        body.design-mode [data-editable] { cursor: text; }
+        body.design-mode .design-del {
+            position: absolute; top: .25rem; right: .25rem; z-index: 2;
+            border-radius: .25rem; background: rgb(254 226 226); color: rgb(185 28 28);
+            padding: 0 .35rem; font-size: .625rem; cursor: pointer; border: none;
+        }
+    `;
+}
+export function getDesignModeScript() {
+    return `
+(function initDesignMode(){
+    const params = new URLSearchParams(location.search);
+    if (params.get('design') !== '1' && params.get('edit') !== 'design') return;
+
+    const CFG = JSON.parse(document.getElementById('deppon-config').textContent);
+    const $ = (s,r=document)=>r.querySelector(s);
+    const $$ = (s,r=document)=>[...r.querySelectorAll(s)];
+
+    function toast(msg){
+        const t=$('#toast'); if(!t) return;
+        t.textContent=msg; t.classList.remove('hidden');
+        setTimeout(()=>t.classList.add('hidden'),2400);
+    }
+
+    function loadSortable(cb){
+        if(window.Sortable) return cb();
+        const s=document.createElement('script');
+        s.src='https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js';
+        s.onload=cb;
+        document.head.appendChild(s);
+    }
+
+    function addHandles(root){
+        $$( '[data-drag-item]', root).forEach(el=>{
+            if(el.querySelector('.drag-handle')) return;
+            const h=document.createElement('span');
+            h.className='drag-handle'; h.title='拖拽排序'; h.textContent='⠿';
+            h.onmousedown=e=>e.stopPropagation();
+            el.prepend(h);
+        });
+    }
+
+    function collectLayout(){
+        const blockOrder = $$('#mainBlocks > [data-block]').map(el=>el.dataset.block);
+        const filterOrder = $$('#filterGrid > [data-drag-item]').map((_,i)=>{
+            const idx = Number(_.dataset.filterIndex);
+            return Number.isFinite(idx)?idx:i;
+        });
+        // 按当前 DOM 顺序收集 filter 的实际索引映射
+        const filterDomOrder = $$('#filterGrid > [data-drag-item]').map(el=>Number(el.dataset.filterIndex));
+        const columnOrder = $$('#columnHeadRow > [data-drag-item]').map(el=>Number(el.dataset.columnIndex));
+        const toolbarOrder = $$('#toolbar > [data-drag-item]').map(el=>Number(el.dataset.toolbarIndex));
+
+        const overrides = {
+            pageName: ($('[data-editable=pageName]')||{}).textContent?.trim(),
+            filterTitle: ($('[data-editable=filterTitle]')||{}).textContent?.trim(),
+            listTitle: ($('[data-editable=listTitle]')||{}).textContent?.trim(),
+        };
+
+        return {
+            slug: CFG.slug,
+            layout: {
+                blockOrder,
+                filterOrder: filterDomOrder,
+                columnOrder,
+                toolbarOrder,
+                hiddenBlocks: $$('#mainBlocks > [data-block].design-hidden').map(el=>el.dataset.block),
+            },
+            overrides,
+            filters: filterDomOrder.map(i=>CFG.filters[i]).filter(Boolean),
+            columns: columnOrder.map(i=>CFG.columns[i]).filter(Boolean),
+            toolbarButtons: toolbarOrder.map(i=>CFG.toolbarButtons[i]).filter(Boolean),
+        };
+    }
+
+    function enableEditable(){
+        $$('[data-editable]').forEach(el=>{ el.contentEditable='true'; el.spellcheck=false; });
+    }
+
+    function initSortables(){
+        addHandles(document.body);
+        const opts = { handle: '.drag-handle', animation: 180, ghostClass: 'sortable-ghost', dragClass: 'sortable-drag' };
+
+        const main = $('#mainBlocks');
+        if(main) Sortable.create(main, { ...opts, draggable: '[data-block]', handle: '.block-drag-handle' });
+
+        const fg = $('#filterGrid');
+        if(fg) Sortable.create(fg, { ...opts, draggable: '[data-drag-item]' });
+
+        const tb = $('#toolbar');
+        if(tb) Sortable.create(tb, { ...opts, draggable: '[data-drag-item]' });
+
+        const chr = $('#columnHeadRow');
+        if(chr) Sortable.create(chr, { ...opts, draggable: '[data-drag-item]' });
+    }
+
+    function bindDelete(){
+        document.body.addEventListener('click', e=>{
+            const btn = e.target.closest('.design-del');
+            if(!btn) return;
+            e.preventDefault(); e.stopPropagation();
+            const item = btn.closest('[data-drag-item],[data-block]');
+            if(!item) return;
+            if(item.dataset.block){
+                item.classList.toggle('design-hidden');
+                item.style.display = item.classList.contains('design-hidden') ? 'none' : '';
+                toast(item.classList.contains('design-hidden') ? '已隐藏区块（保存后生效）' : '已显示区块');
+            } else {
+                item.remove();
+                toast('已移除（保存后生效）');
+            }
+        });
+    }
+
+    loadSortable(()=>{
+        document.body.classList.add('design-mode');
+        enableEditable();
+        initSortables();
+        bindDelete();
+
+        const bar = $('#designToolbar');
+        if(bar){
+            $('#btnSaveDesign')?.addEventListener('click', ()=>{
+                const payload = collectLayout();
+                if(window.parent !== window){
+                    window.parent.postMessage({ type: 'deppon-prd-save-design', payload }, '*');
+                } else {
+                    fetch('/api/projects/'+encodeURIComponent(CFG.slug)+'/design', {
+                        method:'POST',
+                        headers:{'Content-Type':'application/json'},
+                        body: JSON.stringify(payload),
+                    }).then(r=>r.json()).then(d=>{
+                        if(d.error) throw new Error(d.error);
+                        toast('布局已保存');
+                        setTimeout(()=>location.reload(), 600);
+                    }).catch(err=>toast(err.message));
+                }
+                toast('正在保存…');
+            });
+            $('#btnExitDesign')?.addEventListener('click', ()=>{
+                const u=new URL(location.href); u.searchParams.delete('design'); u.searchParams.delete('edit');
+                location.href=u.toString();
+            });
+        }
+    });
+})();
+`;
+}

package/dist/core/tldraw-wireframe.d.ts

@@ -0,0 +1,11 @@
+import type { CanvasHandoff } from './canvas-handoff.js';
+import type { PrdProject } from './types.js';
+type TldrawRecord = Record<string, unknown>;
+export declare function buildTldrawWireframeDocument(project: PrdProject, widgets: CanvasHandoff['widgets']): {
+    document: TldrawRecord;
+    pageId: string;
+    records: TldrawRecord[];
+};
+export declare function buildTldrawFile(project: PrdProject, widgets: CanvasHandoff['widgets']): Record<string, unknown>;
+export declare function buildTldrawPrompt(project: PrdProject, handoff: CanvasHandoff, tldrRelativePath: string): string;
+export {};