Add light and dark canvas themes with floating dock and contextual actions

Reviewed-on: #22

.gitea/workflows/wiki-image-retention-checks.yml

@@ -1,13 +1,5 @@
 name: Wiki image retention checks
 on:
-  pull_request:
-    paths:
-      - 'scripts/wiki-image-lifecycle.py'
-      - 'scripts/deploy.sh'
-      - 'tests/test_wiki_image_lifecycle.py'
-      - '.gitea/workflows/wiki-image-retention-checks.yml'
-      - '.gitea/workflows/waterfall-wiki.yml'
-      - 'Dockerfile'
   push:
     branches: [main]
     paths:
@@ -16,6 +8,7 @@ on:
       - '.gitea/workflows/wiki-image-retention-checks.yml'
 jobs:
   retention-policy:
+    if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
     runs-on: ces-control
     timeout-minutes: 5
     steps:

apps/studio/scripts/graphic-smoke.cjs

@@ -0,0 +1,18 @@
+const {chromium}=require('playwright-core');
+const assert=require('node:assert/strict');
+(async()=>{const browser=await chromium.launch({channel:'chrome',headless:true});try{const page=await browser.newPage({viewport:{width:1440,height:1000}});const errors=[];page.on('pageerror',e=>errors.push(e.message));
+ await page.route('**/api/account/session',r=>r.fulfill({json:{user:null}}));
+ await page.goto((process.env.STUDIO_TEST_ORIGIN||'http://127.0.0.1:3011')+'/studio/graphic');
+ await page.getByRole('button',{name:'添加文字',exact:true}).click();
+ await page.getByRole('textbox',{name:'文字内容',exact:true}).fill('设计从这里开始');
+ await page.getByRole('button',{name:'添加矩形',exact:true}).click();
+ await page.getByRole('button',{name:'撤销',exact:true}).click();
+ await page.getByRole('button',{name:'重做',exact:true}).click();
+ await page.reload();await page.getByRole('button',{name:'文字',exact:true}).first().waitFor();
+ assert.ok(await page.evaluate(()=>localStorage.getItem('studio.graphic.v1').includes('设计从这里开始')));
+ const file=page.waitForEvent('download');await page.getByRole('button',{name:'导出 SVG',exact:true}).click();assert.ok((await file).suggestedFilename().endsWith('.svg'));
+ await page.getByRole('button',{name:'邮箱登录',exact:true}).click();await page.getByRole('dialog').waitFor();await page.keyboard.press('Escape');await page.getByRole('dialog').waitFor({state:'hidden'});
+ await page.screenshot({path:process.env.STUDIO_QA_SCREENSHOT||'graphic-qa.png',fullPage:true});
+ await page.setViewportSize({width:390,height:844});assert.equal(await page.evaluate(()=>document.documentElement.scrollWidth>innerWidth),false);
+ assert.deepEqual(errors,[]);console.log('Graphic editing, history, restore, SVG download, account dialog and mobile overflow checks passed.');
+ }finally{await browser.close()}})().catch(e=>{console.error(e);process.exitCode=1});

apps/studio/scripts/infinite-canvas-smoke.cjs

@@ -0,0 +1,74 @@
+// Supply authorized browser state for the server. Local acceptance was explicitly authorized for this revision.
+const {chromium}=require('playwright-core');
+const assert=require('node:assert/strict');
+const fs=require('node:fs/promises');
+(async()=>{
+ const base=process.env.BASE_URL;
+ assert.ok(['http://8.211.154.134:18131','http://127.0.0.1:3024'].includes(base),'Use the designated server or the explicitly authorized local preview');
+ const browser=await chromium.launch(process.env.CHROMIUM_PATH?{executablePath:process.env.CHROMIUM_PATH,headless:true}:{channel:'chrome',headless:true});
+ try{
+  const context=await browser.newContext({viewport:{width:1600,height:1100},storageState:process.env.STORAGE_STATE||undefined});
+  const page=await context.newPage(),errors=[];page.on('pageerror',e=>errors.push(e.message));
+  await page.goto(base+'/studio/infinite_canvas');
+  assert.equal(new URL(page.url()).pathname,'/studio/infinite_canvas','Login required; authenticate without weakening protection');
+  await page.getByRole('heading',{name:'无限画布 / Infinite canvas'}).waitFor();
+  // A fresh context is used so this test cannot overwrite a human browser draft.
+  const snapshot=()=>page.evaluate(()=>JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')));
+  const node=id=>page.locator(`[data-node-id="${id}"]`);
+  const close=(a,b)=>assert.ok(Math.abs(a-b)<2,`${a} ≈ ${b}`);
+  async function drag(handle,dx,dy){const box=await handle.boundingBox();assert.ok(box);await page.mouse.move(box.x+box.width/2,box.y+box.height/2);await page.mouse.down();await page.mouse.move(box.x+box.width/2+dx,box.y+box.height/2+dy,{steps:12});await page.mouse.up()}
+  for(const scale of [0,1]){
+   await page.getByRole('button',{name:'适应画布',exact:true}).click();
+   if(scale)await page.getByRole('button',{name:'放大',exact:true}).click();
+   const z=await page.locator('[class*=world]').evaluate(el=>new DOMMatrix(getComputedStyle(el).transform).a);
+   for(const id of ['brief','reference']){
+    const before=(await snapshot()).cards.find(c=>c.id===id);
+    await drag(node(id).locator('[title="拖动手柄 · 移动工具"]'),45,25);
+    const after=(await snapshot()).cards.find(c=>c.id===id);close(after.x-before.x,45/z);close(after.y-before.y,25/z);
+   }
+  }
+  const before=(await snapshot()).cards.find(c=>c.id==='brief');
+  await node('brief').locator('textarea').fill('真实工具内编辑 · 输入不能移动节点');
+  const edited=(await snapshot()).cards.find(c=>c.id==='brief');assert.equal(edited.x,before.x);assert.equal(edited.y,before.y);
+  const resize=node('brief').getByRole('button',{name:/调整/});await drag(resize,60,40);
+  assert.ok((await snapshot()).cards.find(c=>c.id==='brief').width>320);
+  await page.getByRole('button',{name:'撤销',exact:true}).click();assert.equal((await snapshot()).cards.find(c=>c.id==='brief').width,undefined);
+  await page.getByRole('button',{name:'重做',exact:true}).click();assert.ok((await snapshot()).cards.find(c=>c.id==='brief').width>320);
+  // Each SVG endpoint must agree with the actual transformed node edge, after resize and pan.
+  async function wires(){const mismatch=await page.evaluate(()=>{
+   return [...document.querySelectorAll('svg path')].filter(p=>p.getAttribute('d')?.startsWith('M ')).slice(0,1).some(p=>{const d=p.getAttribute('d').match(/-?\d+(?:\.\d+)?/g).map(Number),world=p.closest('div').getBoundingClientRect();const matrix=p.getScreenCTM();const pt=new DOMPoint(d[0],d[1]).matrixTransform(matrix);const card=document.querySelector('[data-node-id="brief"]').getBoundingClientRect();return Math.abs(pt.x-card.right)>3||Math.abs(pt.y-(card.top+card.height/2))>3});
+  });assert.equal(mismatch,false)}
+  // The first link starts at brief; check it specifically.
+  await wires();
+  await page.getByRole('button',{name:'移动画布',exact:true}).click();
+  const viewport=page.locator('[class*="viewport"]');const box=await viewport.boundingBox();await page.mouse.move(box.x+20,box.y+20);await page.mouse.down();await page.mouse.move(box.x+100,box.y+80,{steps:8});await page.mouse.up();
+  await wires();
+  const saved=await snapshot(),view=await page.evaluate(()=>localStorage.getItem('studio.infinite-canvas.v1.view'));
+  await page.reload();await page.getByRole('heading',{name:'无限画布 / Infinite canvas'}).waitFor();assert.deepEqual(await snapshot(),saved);assert.equal(await page.evaluate(()=>localStorage.getItem('studio.infinite-canvas.v1.view')),view);
+  // Zoom must preserve the world coordinate beneath the pointer.
+  const vp=await viewport.boundingBox();assert.equal(vp.x,0);assert.equal(vp.y,0);assert.equal(vp.width,1600);assert.equal(vp.height,1100);
+  const anchor={x:vp.x+vp.width*.65,y:vp.y+vp.height*.25};
+  const worldAt=()=>page.locator('[class*=world]').evaluate((el,p)=>{const m=new DOMMatrix(getComputedStyle(el).transform);return {x:(p.x-m.e)/m.a,y:(p.y-m.f)/m.d}},anchor);
+  const point=await worldAt();await page.mouse.move(anchor.x,anchor.y);await page.keyboard.down('Control');await page.mouse.wheel(0,-80);await page.keyboard.up('Control');
+  await page.waitForFunction(old=>JSON.parse(localStorage.getItem('studio.infinite-canvas.v1.view')).zoom!==JSON.parse(old).zoom,view);
+  const pointAfter=await worldAt();close(point.x,pointAfter.x);close(point.y,pointAfter.y);
+  await page.getByRole('button',{name:'选择工具',exact:true}).click();
+  await page.getByRole('button',{name:'添加笔记',exact:true}).click();
+  assert.equal((await snapshot()).cards.length,saved.cards.length+1);
+  await page.getByRole('button',{name:/操作$/}).last().click();
+  await page.getByRole('button',{name:'复制节点',exact:true}).click();assert.equal((await snapshot()).cards.length,saved.cards.length+2);
+  await page.getByRole('button',{name:'删除节点',exact:true}).click();assert.equal((await snapshot()).cards.length,saved.cards.length+1);
+  await page.getByRole('button',{name:'撤销',exact:true}).click();assert.equal((await snapshot()).cards.length,saved.cards.length+2);
+  await page.getByRole('button',{name:'重做',exact:true}).click();assert.equal((await snapshot()).cards.length,saved.cards.length+1);
+  if(await page.getByRole('button',{name:'关闭画布操作',exact:true}).isVisible())await page.getByRole('button',{name:'关闭画布操作',exact:true}).click();
+  // Return to the saved three-node document through undo.
+  await page.getByRole('button',{name:'撤销',exact:true}).click();await page.getByRole('button',{name:'撤销',exact:true}).click();await page.getByRole('button',{name:'撤销',exact:true}).click();
+  await page.getByRole('button',{name:'适应画布',exact:true}).click();await page.reload();await page.getByRole('heading',{name:'无限画布 / Infinite canvas'}).waitFor();
+  const dock=await page.getByRole('navigation',{name:'画布工具'}).boundingBox();assert.ok(dock.y>950);assert.ok(dock.x>500);
+  await page.getByRole('button',{name:'切换明暗主题'}).click();assert.equal(await page.locator('main').getAttribute('data-theme'),'light');await page.reload();await page.waitForFunction(()=>document.querySelector('main').dataset.theme==='light');
+  if(process.env.SCREENSHOT_DIR)await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-light.png'});
+  await page.getByRole('button',{name:'切换明暗主题'}).click();
+  if(process.env.SCREENSHOT_DIR){await fs.mkdir(process.env.SCREENSHOT_DIR,{recursive:true});await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-rebuild.png'});await page.setViewportSize({width:390,height:844});assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth));const mobile=await viewport.boundingBox();assert.equal(mobile.width,390);assert.equal(mobile.height,844);await page.getByRole('button',{name:'适应画布',exact:true}).click();await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-mobile.png'});}
+  assert.deepEqual(errors,[]);console.log('Passed: two-node drag at two scales, inline input, resize, undo/redo, wires, pan, reload, pointer zoom, CRUD and full-screen desktop/mobile');
+ }finally{await browser.close()}
+})().catch(e=>{console.error(e);process.exitCode=1});

apps/studio/scripts/smoke.mjs

@@ -9,8 +9,8 @@ const assetId='00000000-0000-4000-8000-000000000005';doc.sources=[{assetId,autho
 let reads=0;
 const wiki=createHttpServer((req,res)=>{reads++;assert.equal(req.headers.cookie,'session=smoke-test');res.setHeader('Content-Type','application/json');if(req.url.endsWith(seriesId))return res.end(JSON.stringify({design:{id:seriesId,name:'完整三页作品',layoutId:'standard-01',revision:1,url:'/studio/template-layout?id='+seriesId,parameters:doc.pages[0].parameters,document:doc}}));const standard=req.url.endsWith(standardId);if(!standard&&!req.url.endsWith(designId)){res.writeHead(404);return res.end('{}')}res.end(JSON.stringify({design:{id:standard?standardId:designId,name:'已保存的实际页面',layoutId:standard?'standard-01':'ref-01',revision:3,url:'/studio/designs/'+designId,parameters:{added:[{id:'user-smoke',kind:'text',role:'Added text',box:[10,10,20,10],direction:'horizontal',text:'新增元素已恢复',reading:'custom'}],layers:{T01:{x:12,rotation:25,opacity:.7},'user-smoke':{z:12}},texts:{T01:{value:'确定的页面文字',color:'#123456'}},images:{I01:{color:'#abcdef'}},decorations:{D01:{hidden:true}},paper:'#eeeeee'}}}))});
 wiki.listen(0,'127.0.0.1');await once(wiki,'listening');
-const socket=createServer();socket.listen(0,'127.0.0.1');await once(socket,'listening');const port=socket.address().port;await new Promise(r=>socket.close(r));const child=spawn(process.execPath,['.next/standalone/server.js'],{env:{...process.env,PORT:String(port),HOSTNAME:'127.0.0.1',STUDIO_WIKI_ORIGIN:'http://127.0.0.1:'+wiki.address().port},stdio:'inherit'}),base='http://127.0.0.1:'+port;
-try{let ready=false;for(let i=0;i<60;i++){try{if((await fetch(base+'/studio/api/health')).ok){ready=true;break}}catch{}await setTimeout(250)}assert.ok(ready);const library=await fetch(base+'/studio').then(r=>r.text());assert.ok(library.includes('standard-01'));assert.ok(library.includes('ref-27'));const catalog=await fetch(base+'/studio/api/layouts').then(r=>r.json());assert.equal(catalog.layouts.length,28);
+const socket=createServer();socket.listen(0,'127.0.0.1');await once(socket,'listening');const port=socket.address().port;await new Promise(r=>socket.close(r));const child=spawn(process.execPath,[process.env.STUDIO_STANDALONE_SERVER || '.next/standalone/server.js'],{env:{...process.env,PORT:String(port),HOSTNAME:'127.0.0.1',STUDIO_WIKI_ORIGIN:'http://127.0.0.1:'+wiki.address().port},stdio:'inherit'}),base='http://127.0.0.1:'+port;
+try{let ready=false;for(let i=0;i<60;i++){try{if((await fetch(base+'/studio/api/health')).ok){ready=true;break}}catch{}await setTimeout(250)}assert.ok(ready);const entry=await fetch(base+'/studio',{redirect:'manual'});assert.equal(entry.status,307);assert.equal(entry.headers.get('location'),'/studio/graphic');const library=await fetch(base+'/studio/graphic').then(r=>r.text());assert.ok(library.includes('GRAPHIC'));assert.ok(!library.includes('ref-27')); const catalog=await fetch(base+'/studio/api/layouts').then(r=>r.json());assert.equal(catalog.layouts.length,28);
 for(const l of catalog.layouts){const page=await fetch(base+l.url);assert.equal(page.status,200,l.id);const html=await page.text();assert.ok(html.includes(l.name));assert.ok(html.includes('data-layout-id="'+l.id+'"'));assert.ok(!/<svg|<img|data:image|trial-controls|page-tools|workbench-top|contenteditable|编辑页面/.test(html),'Default page must use native elements, not source imagery');const schema=await fetch(base+l.api).then(r=>r.json());assert.equal(schema.id,l.id);for(const s of schema.elements)assert.ok(html.includes('data-element="'+s.id+'"'));if(l.family==='standard'){assert.equal((await fetch(base+l.api+'?format=svg')).status,400);continue;}const original=await fetch(base+l.api+'?format=svg').then(r=>r.text());assert.ok(original.includes('data-layout-id="'+l.id+'"'));const text=schema.elements.find(e=>e.kind==='text');const result=await fetch(base+l.api,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({texts:{[text.id]:{value:'API render <test>'}}})});assert.equal(result.status,200);assert.ok((await result.text()).includes('&lt;'));}
 assert.equal(reads,0,'Default pages never load a saved design');
 const headers={cookie:'session=smoke-test'};

apps/studio/src/lib/graphic-document.ts

@@ -0,0 +1,19 @@
+export type GraphicItem = {
+ id:string;kind:'text'|'rect'|'ellipse'|'image';name:string;text:string;
+ x:number;y:number;w:number;h:number;fill:string;size:number;hidden:boolean;locked:boolean;src?:string;
+};
+export type GraphicDocument = {name:string;background:string;items:GraphicItem[]};
+const color=(value:unknown)=>typeof value==='string'&&/^#[a-f0-9]{6}$/i.test(value);
+/** Accept only bounded editable documents; never execute or load external assets. */
+export function parseGraphicDocument(raw:string):GraphicDocument {
+ if(raw.length>5*1024*1024)throw Error('设计文件不得超过 5MB');
+ const d=JSON.parse(raw);
+ if(!d||typeof d.name!=='string'||d.name.length>100||!color(d.background)||!Array.isArray(d.items)||d.items.length>500)throw Error('设计文件格式不正确');
+ const ids=new Set<string>();
+ for(const i of d.items){
+  if(!i||typeof i.id!=='string'||i.id.length>100||ids.has(i.id)||!['text','rect','ellipse','image'].includes(i.kind)||typeof i.name!=='string'||i.name.length>200||typeof i.text!=='string'||i.text.length>4000||!color(i.fill)||typeof i.hidden!=='boolean'||typeof i.locked!=='boolean'||![i.x,i.y,i.w,i.h,i.size].every(Number.isFinite)||Math.abs(i.x)>4000||Math.abs(i.y)>4000||i.w<1||i.h<1||i.w>4000||i.h>4000||i.size<8||i.size>240)throw Error('设计图层格式不正确');
+  if(i.kind==='image'&&(typeof i.src!=='string'||!/^data:image\/(png|jpeg|webp);base64,[A-Za-z0-9+/=]+$/.test(i.src)))throw Error('图片必须为嵌入式 PNG、JPEG 或 WebP');
+  ids.add(i.id);
+ }
+ return {name:d.name,background:d.background,items:d.items.map((i:GraphicItem)=>({id:i.id,kind:i.kind,name:i.name,text:i.text,x:i.x,y:i.y,w:i.w,h:i.h,fill:i.fill,size:i.size,hidden:i.hidden,locked:i.locked,...(i.kind==='image'?{src:i.src}:{})}))};
+}

apps/studio/src/pages/graphic/index.tsx

@@ -0,0 +1,43 @@
+import Head from 'next/head';
+import {useEffect,useRef,useState,type PointerEvent} from 'react';
+import {MousePointer2,Type,Square,Circle,Plus,Minus,Undo2,Redo2,Download,Layers,ImagePlus,Trash2,Copy,Eye,EyeOff,Lock,Unlock,Scan,ChevronRight,ArrowUpRight,PenTool,X} from 'lucide-react';
+import {newElementId} from '../../lib/native-layout';
+import styles from '../../styles/graphic.module.css';
+import {parseGraphicDocument,type GraphicItem as Item,type GraphicDocument as Doc} from '../../lib/graphic-document';
+const blank:Doc={name:'未命名设计',background:'#ffffff',items:[]};
+const storage='studio.graphic.v1';
+export default function Graphic(){
+ const [doc,setDoc]=useState<Doc>(blank),[selected,setSelected]=useState(''),[past,setPast]=useState<Doc[]>([]),[future,setFuture]=useState<Doc[]>([]),[zoom,setZoom]=useState(.65),[status,setStatus]=useState('本机草稿'),[tab,setTab]=useState('图层'),[user,setUser]=useState<{email:string}|null>(null),[auth,setAuth]=useState(false),[mode,setMode]=useState('login'),[message,setMessage]=useState(''),[busy,setBusy]=useState(false);
+ const dialog=useRef<HTMLDivElement>(null);
+ useEffect(()=>{if(!auth)return;const old=document.activeElement as HTMLElement;const box=dialog.current;box?.querySelector<HTMLElement>('button,input')?.focus();function key(e:KeyboardEvent){if(e.key==='Escape'){setAuth(false);return}if(e.key!=='Tab'||!box)return;const nodes=Array.from(box.querySelectorAll<HTMLElement>('button:not(:disabled),input,a[href]'));const first=nodes[0],last=nodes[nodes.length-1];if(e.shiftKey&&document.activeElement===first){e.preventDefault();last?.focus()}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first?.focus()}}document.addEventListener('keydown',key);return()=>{document.removeEventListener('keydown',key);old?.focus()}},[auth]);
+ const restore=useRef<HTMLInputElement>(null);
+ const board=useRef<HTMLDivElement>(null),upload=useRef<HTMLInputElement>(null),viewport=useRef<HTMLDivElement>(null),ready=useRef(false),dirty=useRef(false);
+ const item=doc.items.find(i=>i.id===selected);
+ useEffect(()=>{try{const raw=localStorage.getItem(storage);if(raw){setDoc(parseGraphicDocument(raw));}}catch{setStatus('无法读取草稿，请导出备份')}ready.current=true;void refresh();},[]);
+ useEffect(()=>{if(!ready.current)return;try{localStorage.setItem(storage,JSON.stringify(doc));setStatus('已保存到此浏览器');dirty.current=false;}catch{setStatus('本机空间不足，请导出备份');dirty.current=true;}},[doc]);
+ useEffect(()=>{const warn=(e:BeforeUnloadEvent)=>{if(dirty.current){e.preventDefault();e.returnValue=''}};window.addEventListener('beforeunload',warn);return()=>window.removeEventListener('beforeunload',warn)},[]);
+ async function refresh(){try{const r=await fetch('/api/account/session');if(r.ok)setUser((await r.json()).user);}catch{/* Guest editing remains available. */}}
+ function change(next:Doc){setPast(p=>[...p.slice(-49),doc]);setFuture([]);setDoc(next);dirty.current=true;}
+ function patch(p:Partial<Item>){if(item&&!item.locked)change({...doc,items:doc.items.map(i=>i.id===selected?{...i,...p}:i)})}
+ function add(kind:Item['kind'],src?:string){if(doc.items.length>=500){setStatus('单页最多 500 个图层');return;}const id=newElementId();const next:Item={id,kind,name:kind==='text'?'文字':kind==='image'?'图片':kind==='rect'?'矩形':'椭圆',text:'让灵感，有形。',x:90+doc.items.length*12%260,y:100+doc.items.length*12%400,w:kind==='text'?480:260,h:kind==='text'?90:220,fill:kind==='text'?'#282832':'#b8b3ff',size:52,hidden:false,locked:false,src};change({...doc,items:[...doc.items,next]});setSelected(id);setTab('图层');}
+ function undo(){if(!past.length)return;setFuture(f=>[doc,...f]);setDoc(past[past.length-1]);setPast(p=>p.slice(0,-1));}
+ function redo(){if(!future.length)return;setPast(p=>[...p,doc]);setDoc(future[0]);setFuture(f=>f.slice(1));}
+ function remove(){if(item&&!item.locked){change({...doc,items:doc.items.filter(i=>i.id!==selected)});setSelected('')}}
+ function duplicate(){if(item&&doc.items.length<500){const id=newElementId();change({...doc,items:[...doc.items,{...item,id,x:item.x+24,y:item.y+24,name:item.name+' 副本',locked:false}]});setSelected(id)}}
+ function fit(){if(viewport.current)setZoom(Math.max(.15,Math.min(1,(viewport.current.clientWidth-100)/800,(viewport.current.clientHeight-100)/1000)))}
+ useEffect(()=>{fit();},[]);
+ useEffect(()=>{function key(e:KeyboardEvent){if((e.target as HTMLElement).closest('input,textarea,select,button'))return;if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='z'){e.preventDefault();e.shiftKey?redo():undo()}else if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='d'){e.preventDefault();duplicate()}else if(e.key==='Delete'||e.key==='Backspace'){e.preventDefault();remove()}else if(e.key==='Escape')setSelected('');else if(item&&!item.locked&&e.key.startsWith('Arrow')){e.preventDefault();const step=e.shiftKey?10:1;patch({x:item.x+(e.key==='ArrowRight'?step:e.key==='ArrowLeft'?-step:0),y:item.y+(e.key==='ArrowDown'?step:e.key==='ArrowUp'?-step:0)})}}window.addEventListener('keydown',key);return()=>window.removeEventListener('keydown',key)});
+ function drag(e:PointerEvent<HTMLDivElement>,i:Item){e.stopPropagation();setSelected(i.id);if(i.locked||e.button!==0)return;e.preventDefault();e.currentTarget.setPointerCapture(e.pointerId);const x=e.clientX,y=e.clientY,start=doc;let next=start;const target=e.currentTarget;const move=(p:globalThis.PointerEvent)=>{next={...start,items:start.items.map(n=>n.id===i.id?{...n,x:Math.max(-4000,Math.min(4000,i.x+(p.clientX-x)/zoom)),y:Math.max(-4000,Math.min(4000,i.y+(p.clientY-y)/zoom))}:n)};setDoc(next)};const end=()=>{target.removeEventListener('pointermove',move);target.removeEventListener('pointerup',end);target.removeEventListener('pointercancel',end);if(next!==start){setPast(p=>[...p.slice(-49),start]);setFuture([])}};target.addEventListener('pointermove',move);target.addEventListener('pointerup',end);target.addEventListener('pointercancel',end);}
+ function download(content:string,type:string,extension:string){const url=URL.createObjectURL(new Blob([content],{type}));const a=document.createElement('a');a.href=url;a.download=doc.name+'.'+extension;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000)}
+ function exportSVG(){const esc=(s:string)=>s.replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&apos;'}[c]!));const svg=doc.items.filter(i=>!i.hidden).map(i=>i.kind==='text'?`<text x="${i.x}" y="${i.y+i.size}" font-family="sans-serif" font-size="${i.size}" fill="${esc(i.fill)}">${i.text.split('\n').map((line,n)=>`<tspan x="${i.x}" dy="${n?i.size*1.3:0}">${esc(line)}</tspan>`).join('')}</text>`:i.kind==='image'?`<image x="${i.x}" y="${i.y}" width="${i.w}" height="${i.h}" href="${esc(i.src||'')}" preserveAspectRatio="xMidYMid slice"/>`:i.kind==='ellipse'?`<ellipse cx="${i.x+i.w/2}" cy="${i.y+i.h/2}" rx="${i.w/2}" ry="${i.h/2}" fill="${esc(i.fill)}"/>`:`<rect x="${i.x}" y="${i.y}" width="${i.w}" height="${i.h}" fill="${esc(i.fill)}"/>`).join('');download(`<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1000" viewBox="0 0 800 1000"><rect width="800" height="1000" fill="${esc(doc.background)}"/>${svg}</svg>`,'image/svg+xml','svg');}
+ async function account(e:React.FormEvent<HTMLFormElement>){e.preventDefault();setBusy(true);setMessage('');const data=new FormData(e.currentTarget);try{const r=await fetch('/api/account/'+mode,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:data.get('email'),password:data.get('password')})});const d=await r.json();setMessage(d.error||d.message||'登录成功');if(r.ok){await refresh();if(mode==='login')setAuth(false);}}catch{setMessage('账户服务暂时无法连接')}finally{setBusy(false)}}
+ return <div className={styles.app}><Head><title>{doc.name + " · Studio Graphic"}</title><meta name="description" content="在 Studio 中自由编排文字、图形与图片。"/></Head>
+ <header className={styles.top}><a href="/studio/" className={styles.brand}><span>✳</span> studio<span className={styles.badge}>GRAPHIC</span></a><ChevronRight size={14}/><input aria-label="设计名称" value={doc.name} maxLength={100} onChange={e=>change({...doc,name:e.target.value})}/><span className={styles.saved} role="status">{status}</span><button title="撤销" aria-label="撤销" disabled={!past.length} onClick={undo}><Undo2 size={17}/></button><button title="重做" aria-label="重做" disabled={!future.length} onClick={redo}><Redo2 size={17}/></button><button onClick={()=>setAuth(true)} className={styles.account}>{user?user.email:'邮箱登录'}</button><button className={styles.primary} onClick={exportSVG}><Download size={15}/>导出 SVG</button></header>
+ <div className={styles.body}><aside className={styles.left}><div className={styles.tabs}>{['图层','素材'].map(t=><button key={t} aria-pressed={tab===t} onClick={()=>setTab(t)}>{t}</button>)}</div><div className={styles.pageTitle}><span>页面 01</span><span>800 × 1000</span></div>{tab==='图层'?<><div className={styles.layers}>{[...doc.items].reverse().map(i=><div className={styles.layer} data-selected={i.id===selected} key={i.id}><button onClick={()=>setSelected(i.id)}>{i.kind==='text'?<Type size={14}/>:<Square size={14}/>}<span>{i.name}</span></button><button aria-label={i.hidden?'显示图层':'隐藏图层'} onClick={()=>change({...doc,items:doc.items.map(n=>n.id===i.id?{...n,hidden:!n.hidden}:n)})}>{i.hidden?<EyeOff size={13}/>:<Eye size={13}/>}</button><button aria-label={i.locked?'解锁图层':'锁定图层'} onClick={()=>change({...doc,items:doc.items.map(n=>n.id===i.id?{...n,locked:!n.locked}:n)})}>{i.locked?<Lock size={13}/>:<Unlock size={13}/>}</button></div>)}{!doc.items.length&&<div className={styles.emptyLayers}><Layers size={23}/><p>好设计，从第一笔开始</p><small>从下方工具栏添加文字与图形</small></div>}</div><button className={styles.addLayer} onClick={()=>add('text')}><Plus size={15}/>添加图层</button></>:<div className={styles.assets}><h3>基础元素</h3><button onClick={()=>add('rect')}><Square/>矩形</button><button onClick={()=>add('ellipse')}><Circle/>椭圆</button><button onClick={()=>add('text')}><Type/>文字</button><button onClick={()=>upload.current?.click()}><ImagePlus/>上传图片</button><p>你的画布，由你定义。支持 PNG、JPEG、WebP。</p></div>}<div className={styles.leftFooter}><a href="/studio/infinite_canvas">Infinite Canvas <ArrowUpRight size={14}/></a><small>⌘ Z 撤销 · 方向键微调 · Delete 删除</small></div></aside>
+ <main ref={viewport} className={styles.viewport} onPointerDown={()=>setSelected('')}><div className={styles.canvasLabel}>画板 01 <span>800 × 1000</span></div><div className={styles.boardWrap} style={{width:800*zoom,height:1000*zoom}}><div ref={board} className={styles.board} style={{background:doc.background,transform:`scale(${zoom})`}}>{doc.items.filter(i=>!i.hidden).map(i=><div key={i.id} tabIndex={0} role="button" aria-label={i.name} aria-pressed={selected===i.id} onFocus={()=>setSelected(i.id)} onPointerDown={e=>drag(e,i)} className={styles.element} data-selected={selected===i.id} style={{left:i.x,top:i.y,width:i.w,height:i.h,borderRadius:i.kind==='ellipse'?'50%':0,background:i.kind==='rect'||i.kind==='ellipse'?i.fill:undefined,color:i.fill,fontSize:i.size,whiteSpace:'pre-wrap'}}>{i.kind==='text'?i.text:i.kind==='image'?<img src={i.src} alt={i.name} draggable={false}/>:null}{selected===i.id&&<><i className={styles.corner}/><span className={styles.measure}>{Math.round(i.w)} × {Math.round(i.h)}</span></>}</div>)}{!doc.items.length&&<div className={styles.blankHint}><PenTool size={34} strokeWidth={1}/><h1>留白，是创作的起点。</h1><p>添加文字、图形，或放入你的第一张图片。</p><button onPointerDown={e=>e.stopPropagation()} onClick={()=>add('text')}>开始设计 <ArrowUpRight size={16}/></button></div>}</div></div><div className={styles.tools} onPointerDown={e=>e.stopPropagation()}><button title="选择" aria-label="选择工具" onClick={()=>setSelected('')}><MousePointer2 size={20}/></button><button title="文字" aria-label="添加文字" onClick={()=>add('text')}><Type size={20}/></button><button title="矩形" aria-label="添加矩形" onClick={()=>add('rect')}><Square size={19}/></button><button title="椭圆" aria-label="添加椭圆" onClick={()=>add('ellipse')}><Circle size={19}/></button><button title="图片" aria-label="上传图片" onClick={()=>upload.current?.click()}><ImagePlus size={19}/></button><span/><button aria-label="缩小" onClick={()=>setZoom(z=>Math.max(.15,z-.1))}><Minus size={16}/></button><output>{Math.round(zoom*100)}%</output><button aria-label="放大" onClick={()=>setZoom(z=>Math.min(2,z+.1))}><Plus size={16}/></button><button aria-label="适应画布" onClick={fit}><Scan size={18}/></button></div></main>
+ <aside className={styles.right}><div className={styles.inspectorTitle}>设计属性<span>Design</span></div>{item?<div className={styles.props}><label>图层名称<input maxLength={200} value={item.name} disabled={item.locked} onChange={e=>patch({name:e.target.value})}/></label><h3>布局</h3><div className={styles.fields}>{(['x','y','w','h'] as const).map(k=><label key={k}>{({x:'X',y:'Y',w:'宽',h:'高'})[k]}<input type="number" value={Math.round(item[k])} disabled={item.locked} onChange={e=>{const value=Number(e.target.value);if(Number.isFinite(value))patch({[k]:k==='w'||k==='h'?Math.max(1,Math.min(4000,value)):Math.max(-4000,Math.min(4000,value))})}}/></label>)}</div>{item.kind==='text'&&<><h3>文字</h3><textarea aria-label="文字内容" value={item.text} maxLength={4000} disabled={item.locked} onChange={e=>patch({text:e.target.value})}/><label>字号<input type="number" min={8} max={240} value={item.size} disabled={item.locked} onChange={e=>patch({size:Math.max(8,Math.min(240,Number(e.target.value)||8))})}/></label></>}<h3>填色</h3><label className={styles.color}><input type="color" value={item.fill} disabled={item.locked} onChange={e=>patch({fill:e.target.value})}/>{item.fill.toUpperCase()}</label><div className={styles.actions}><button onClick={duplicate}><Copy size={15}/>复制</button><button disabled={item.locked} onClick={remove}><Trash2 size={15}/>删除</button></div><button disabled={item.locked} onClick={()=>{const n=doc.items.findIndex(i=>i.id===item.id);if(n>0){const items=[...doc.items];[items[n-1],items[n]]=[items[n],items[n-1]];change({...doc,items})}}}>下移一层</button></div>:<div className={styles.props}><h3>画板</h3><p>自由画布 · 竖版</p><div className={styles.dimensions}>W <b>800</b> H <b>1000</b></div><h3>背景颜色</h3><label className={styles.color}><input type="color" value={doc.background} onChange={e=>change({...doc,background:e.target.value})}/>{doc.background.toUpperCase()}</label><div className={styles.note}><MousePointer2 size={20}/><p>选中一个图层，<br/>调整属于它的每个细节。</p></div></div>}<div className={styles.rightFooter}><button onClick={()=>download(JSON.stringify(doc,null,2),'application/json','json')}><Download size={15}/>备份设计 JSON</button><button onClick={()=>restore.current?.click()}>导入设计 JSON</button><p>草稿仅保存在此浏览器。<br/>邮箱登录共用全站账户。</p></div></aside></div>
+ <input ref={restore} hidden type="file" accept="application/json,.json" onChange={async e=>{const f=e.target.files?.[0];e.target.value='';if(!f)return;try{if(f.size>5*1024*1024)throw Error('文件不得超过 5MB');const restored=parseGraphicDocument(await f.text());change(restored);setSelected('');}catch(error){setStatus(error instanceof Error?error.message:'导入失败')}}}/>
+ <input ref={upload} hidden type="file" accept="image/png,image/jpeg,image/webp" onChange={e=>{const f=e.target.files?.[0];if(!f)return;if(f.size>3*1024*1024||!['image/png','image/jpeg','image/webp'].includes(f.type)){setStatus('请使用 3MB 以内的 PNG / JPEG / WebP');return}const reader=new FileReader();reader.onload=()=>add('image',String(reader.result));reader.readAsDataURL(f);e.target.value=''}}/>
+ {auth&&<div className={styles.overlay}><div ref={dialog} className={styles.modal} role="dialog" aria-modal="true" aria-label="邮箱账户"><button className={styles.close} aria-label="关闭" onClick={()=>setAuth(false)}><X size={20}/></button><span className={styles.modalIcon}>✳</span><h2>{user?'你的 Studio 账户':'把灵感带进 Studio'}</h2>{user?<><p>{user.email}</p><button onClick={async()=>{try{const r=await fetch('/api/account/logout',{method:'POST',headers:{'Content-Type':'application/json'},body:'{}'});if(!r.ok)throw Error();setUser(null);setAuth(false)}catch{setMessage('退出失败，请重试')}}}>退出登录</button></>:<><p>使用知识站的同一个邮箱账户</p><div className={styles.tabs}>{[['login','登录'],['register','注册'],['resend','重发邮件']].map(([v,t])=><button key={v} aria-pressed={mode===v} onClick={()=>setMode(v)}>{t}</button>)}</div><form onSubmit={account}><label>邮箱<input autoFocus required type="email" name="email" autoComplete="email" maxLength={254}/></label><label>密码<input required type="password" name="password" minLength={12} maxLength={256} autoComplete={mode==='register'?'new-password':'current-password'}/></label><small>密码至少 12 字符；新账户需通过邮件验证。</small><button className={styles.primary} disabled={busy}>{busy?'处理中…':mode==='login'?'登录 Studio':mode==='register'?'创建账户':'重发验证邮件'}</button></form></>}<p role="status">{message}</p></div></div>}
+ </div>
+}

apps/studio/src/pages/index.tsx

@@ -1,6 +1,3 @@
-import Head from 'next/head';
-import fixed from '../content/templates/layouts.json';
-import standard from '../content/standard-layout.json';
-import {nativeLayout} from '../lib/native-layout';
-import {NativePreview as Preview} from '../components/NativePreview';
-export default function StudioEntry(){return <main className="studio-library"><Head><title>Studio · 可视化排版 API 库</title></Head><nav className="library-nav"><a href="/">PROMPT / STUDIO</a><a href="/explore/8eb8c76500580f7a4b56ba3c">使用文档与工具箱</a><a href="/api/studio/designs?agent_mode=True">API 契约</a></nav><h1>用参数，编排画面。</h1><p className="library-intro">给 coding agent 文字、图片与创作意图。选择标准图文或固定构图，通过 HTTP 保存渲染描述，得到一个可持续更新的原生页面。</p><div className="library-heading"><h2>标准排版</h2><a href="/studio/api/layouts/standard-01">参数</a></div><div className="library-standard"><a href="/studio/layouts/standard-01"><Preview layout={standard}/></a><div><h2>一页，一件事。</h2><p>沿用 Studio 标题、正文与页脚的图文结构，增加可配置图片位。文字、颜色、图片和几何坐标共用一套参数，也可添加原生元素。</p><code>layoutId: standard-01</code><p><a href="/studio/layouts/standard-01">打开原生页面</a></p></div></div><div className="library-heading"><h2>固定排版 · 27 套</h2><a href="/explore/8eb8c76500580f7a4b56ba3c">使用文档</a></div><div className="library-grid">{fixed.map(l=><article className="library-item" key={l.id}><a href={'/studio/layouts/'+l.id}><Preview layout={nativeLayout(l)}/><h3>{l.name}</h3><p>{l.id.toUpperCase()}</p></a></article>)}</div></main>}
+import type {GetServerSideProps} from 'next';
+export default function StudioEntry(){return null}
+export const getServerSideProps:GetServerSideProps=async()=>({redirect:{destination:'/graphic',permanent:false}});

apps/studio/src/pages/infinite_canvas/index.tsx

@@ -0,0 +1,42 @@
+import Head from 'next/head';
+import {useEffect,useRef,useState} from 'react';
+import {ArrowLeft,Plus,MousePointer2,Hand,ImagePlus,Type,Workflow,Undo2,Redo2,Minus,Maximize,Download,Upload,Trash2,Link2,Sparkles,ChevronRight,Sun,Moon} from 'lucide-react';
+import s from '../../styles/infinite-canvas.module.css';
+type Card={id:string;kind:'text'|'image'|'prompt';title:string;text:string;x:number;y:number;image?:string;width?:number;height?:number};
+type Doc={version:1;cards:Card[];links:[string,string][]};
+const initial:Doc={version:1,cards:[{id:'brief',kind:'text',title:'01 / 创意简报',text:'把日常，拍成一场电影。\n\n一段关于城市清晨的视觉散文。低饱和色彩、自然光与细腻颗粒，让每一帧都有呼吸感。',x:70,y:140},{id:'reference',kind:'image',title:'02 / 视觉参考',text:'晨光 · 建筑 · 胶片质感\n上传你的参考图片',x:460,y:80},{id:'shot',kind:'prompt',title:'03 / 镜头构思',text:'清晨，阳光穿过窗边的植物，落在安静的房间里。缓慢推进镜头，35mm 胶片，温暖柔和的光线。',x:850,y:160}],links:[['brief','reference'],['reference','shot']]};
+const key='studio.infinite-canvas.v1';
+function valid(v:unknown):v is Doc{const d=v as Doc;return !!d&&d.version===1&&Array.isArray(d.cards)&&d.cards.length<=80&&d.cards.every(c=>c&&typeof c.id==='string'&&c.id.length<100&&['text','image','prompt'].includes(c.kind)&&typeof c.title==='string'&&c.title.length<=200&&typeof c.text==='string'&&c.text.length<=10000&&Number.isFinite(c.x)&&Number.isFinite(c.y)&&Math.abs(c.x)<100000&&Math.abs(c.y)<100000&& (c.width===undefined||(Number.isFinite(c.width)&&c.width>=260&&c.width<=1200))&&(c.height===undefined||(Number.isFinite(c.height)&&c.height>=300&&c.height<=1200))&&(!c.image||(/^data:image\/(png|jpeg|webp);base64,/.test(c.image)&&c.image.length<3000000)))&&new Set(d.cards.map(c=>c.id)).size===d.cards.length&&Array.isArray(d.links)&&d.links.length<=200&&d.links.every(l=>Array.isArray(l)&&l.length===2&&l[0]!==l[1]&&l.every(id=>d.cards.some(c=>c.id===id)));}
+export default function InfiniteCanvas(){
+ const [doc,setDoc]=useState<Doc>(initial),[selected,select]=useState('shot'),[zoom,setZoom]=useState(.8),[pan,setPan]=useState({x:0,y:0}),[tool,setTool]=useState('select'),[past,setPast]=useState<Doc[]>([]),[future,setFuture]=useState<Doc[]>([]),[status,setStatus]=useState('示例项目 · 尚未保存'),[ready,setReady]=useState(false),[email,setEmail]=useState(''),[link,setLink]=useState(''),[menu,setMenu]=useState<{x:number;y:number}|null>(null),[theme,setTheme]=useState<'light'|'dark'>('dark');
+ const file=useRef<HTMLInputElement>(null),json=useRef<HTMLInputElement>(null),viewport=useRef<HTMLDivElement>(null),drag=useRef<{id:string;x:number;y:number;ox:number;oy:number;before:Doc;resize?:boolean}|null>(null);
+ const active=doc.cards.find(c=>c.id===selected);
+ useEffect(()=>{try{const raw=localStorage.getItem(key);if(raw){const d=JSON.parse(raw);if(valid(d)){setDoc(d);setStatus('已恢复本机草稿')}}}catch{setStatus('草稿读取失败，可导入 JSON 恢复')}try{const v=JSON.parse(localStorage.getItem(key+'.view')||'null');if(v&&Number.isFinite(v.zoom)&&v.zoom>=.2&&v.zoom<=2&&Number.isFinite(v.x)&&Number.isFinite(v.y)){setZoom(v.zoom);setPan({x:v.x,y:v.y})}}catch{}try{const t=localStorage.getItem(key+'.theme');setTheme(t==='light'?'light':'dark')}catch{}setReady(true);fetch('/api/account/session').then(r=>r.ok?r.json():null).then(d=>setEmail(d?.user?.email||'')).catch(()=>{});},[]);
+ useEffect(()=>{if(!ready)return;try{localStorage.setItem(key,JSON.stringify(doc));setStatus('已保存到此浏览器')}catch{setStatus('本机空间不足，请导出项目备份')}},[doc,ready]);
+ useEffect(()=>{if(ready)try{localStorage.setItem(key+'.view',JSON.stringify({...pan,zoom}))}catch{}},[pan,zoom,ready]);
+ useEffect(()=>{const el=viewport.current;if(!el)return;const block=(e:WheelEvent)=>{if(!(e.target as HTMLElement).closest('textarea,input,select'))e.preventDefault()};el.addEventListener('wheel',block,{passive:false});return()=>el.removeEventListener('wheel',block)},[]);
+ useEffect(()=>{const keys=(e:KeyboardEvent)=>{if(e.key==='Escape'){setMenu(null);return}if((e.target as HTMLElement).closest('input,textarea,select,[contenteditable]'))return;if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='z'){e.preventDefault();if(e.shiftKey)redo();else undo()}if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='d'){e.preventDefault();duplicate()}};window.addEventListener('keydown',keys);return()=>window.removeEventListener('keydown',keys)});
+ useEffect(()=>{if(ready)try{localStorage.setItem(key+'.theme',theme)}catch{}},[theme,ready]);
+ function scaleAt(next:number,cx?:number,cy?:number){const el=viewport.current;if(!el)return;const r=el.getBoundingClientRect(),x=cx===undefined?r.width/2:cx-r.left,y=cy===undefined?r.height/2:cy-r.top;const z=Math.max(.2,Math.min(2,next));setPan({x:x-(x-pan.x)*z/zoom,y:y-(y-pan.y)*z/zoom});setZoom(z)}
+ function duplicate(){if(!active||doc.cards.length>=80)return;const id=Array.from(crypto.getRandomValues(new Uint8Array(16)),b=>b.toString(16).padStart(2,'0')).join('');commit({...doc,cards:[...doc.cards,{...active,id,title:active.title.slice(0,197)+' 副本',x:active.x+40,y:active.y+40}]});select(id)}
+ function commit(next:Doc){setPast(p=>[...p.slice(-29),doc]);setFuture([]);setDoc(next)}
+ function add(kind:Card['kind'],image?:string){if(doc.cards.length>=80){setStatus('最多 80 个节点');return}const id=Array.from(crypto.getRandomValues(new Uint8Array(16)),b=>b.toString(16).padStart(2,'0')).join('');const rect=viewport.current?.getBoundingClientRect();commit({...doc,cards:[...doc.cards,{id,kind,title:kind==='text'?'灵感笔记':kind==='image'?'参考素材':'生成提示词',text:'',x:((menu?.x??(rect?.width||700)/2)-pan.x)/zoom-160,y:((menu?.y??(rect?.height||600)/2)-pan.y)/zoom-100,image}]});select(id)}
+ function change(field:'title'|'text',value:string,id=selected){setDoc(d=>({...d,cards:d.cards.map(c=>c.id===id?{...c,[field]:value}:c)}))}
+ function beginEdit(){setPast(p=>[...p.slice(-29),doc]);setFuture([])}
+ function undo(){if(!past.length)return;setFuture(f=>[doc,...f]);setDoc(past[past.length-1]);setPast(p=>p.slice(0,-1))}
+ function redo(){if(!future.length)return;setPast(p=>[...p,doc]);setDoc(future[0]);setFuture(f=>f.slice(1))}
+ function fit(){const el=viewport.current;if(!el||!doc.cards.length)return;const minX=Math.min(...doc.cards.map(c=>c.x)),minY=Math.min(...doc.cards.map(c=>c.y));const w=Math.max(...doc.cards.map(c=>c.x+(c.width||320)))-minX,h=Math.max(...doc.cards.map(c=>c.y+(c.height||350)))-minY;const z=Math.max(.2,Math.min(1,(el.clientWidth-80)/w,(el.clientHeight-100)/h));setZoom(z);setPan({x:(el.clientWidth-w*z)/2-minX*z,y:(el.clientHeight-h*z)/2-minY*z})}
+ function exportDoc(){const url=URL.createObjectURL(new Blob([JSON.stringify(doc,null,2)],{type:'application/json'}));const a=document.createElement('a');a.href=url;a.download='studio-canvas.json';a.click();setTimeout(()=>URL.revokeObjectURL(url),1000)}
+ return <main className={s.app} data-theme={theme}><Head><title>无限画布 · Studio</title><meta name="description" content="在无限画布上组织灵感、参考素材与镜头提示词"/></Head>
+ <header className={s.header}><a href="/studio" className={s.back} aria-label="返回 Studio"><ArrowLeft size={18}/></a><a href="/studio" className={s.brand}>STUDIO<span>✳</span></a><i/><span className={s.crumb}>工作空间 <ChevronRight size={13}/></span><strong>未命名的灵感宇宙</strong><span className={s.badge}>本机草稿</span><div className={s.spacer}/><button aria-label="切换明暗主题" title={theme==='dark'?'切换浅色模式':'切换深色模式'} onClick={()=>setTheme(t=>t==='dark'?'light':'dark')}>{theme==='dark'?<Sun size={17}/>:<Moon size={17}/>}</button><a href="/account">{email||'登录账户'}</a><button className={s.export} onClick={exportDoc}><Download size={15}/>导出项目</button></header>
+ <div className={s.workspace}><nav className={s.rail} aria-label="画布工具"><button title="选择工具" aria-label="选择工具" aria-pressed={tool==='select'} onClick={()=>setTool('select')}><MousePointer2/></button><button title="移动画布" aria-label="移动画布" aria-pressed={tool==='hand'} onClick={()=>setTool('hand')}><Hand/></button><hr/><button title="添加笔记" aria-label="添加笔记" onClick={()=>add('text')}><Type/></button><button title="上传图片" aria-label="上传图片" onClick={()=>file.current?.click()}><ImagePlus/></button><button title="添加提示词" aria-label="添加提示词" onClick={()=>add('prompt')}><Sparkles/></button><button title="导入项目" aria-label="导入项目" onClick={()=>json.current?.click()}><Upload/></button><div className={s.spacer}/><span>∞</span></nav>
+ <section className={s.canvasArea}><div className={s.canvasTitle}><span className={s.eyebrow}>YOUR IDEAS, CONNECTED</span><h1>无限画布<span> / Infinite canvas</span></h1><p>从一个灵感，连接所有可能。</p></div>
+ <div className={s.viewport} style={{backgroundPosition:`${pan.x}px ${pan.y}px`,backgroundSize:`${24*zoom*Math.max(1,2**Math.ceil(Math.log2(1/zoom)))}px ${24*zoom*Math.max(1,2**Math.ceil(Math.log2(1/zoom)))}px`}} ref={viewport} onContextMenu={e=>{e.preventDefault();const id=(e.target as HTMLElement).closest('[data-node-id]')?.getAttribute('data-node-id');select(id||'');setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-330)})}} onWheel={e=>{const target=e.target as HTMLElement;if(drag.current)return;if(target.closest('textarea,input,select'))return;if(e.ctrlKey||e.metaKey){scaleAt(zoom*Math.exp(-e.deltaY*.002),e.clientX,e.clientY)}else setPan(p=>({x:p.x-e.deltaX,y:p.y-e.deltaY}))}} onPointerDown={e=>{setMenu(null);if(e.target===e.currentTarget||(tool==='hand'&&!(e.target as HTMLElement).closest('input,textarea,button,select'))||e.button===1){e.currentTarget.setPointerCapture(e.pointerId);drag.current={id:'pan',x:e.clientX,y:e.clientY,ox:pan.x,oy:pan.y,before:doc}}}} onPointerMove={e=>{const d=drag.current;if(!d)return;if(d.id==='pan')setPan({x:d.ox+e.clientX-d.x,y:d.oy+e.clientY-d.y});else setDoc({...d.before,cards:d.before.cards.map(c=>c.id===d.id?(d.resize?{...c,width:Math.max(260,Math.min(1200,d.ox+(e.clientX-d.x)/zoom)),height:Math.max(300,Math.min(1200,d.oy+(e.clientY-d.y)/zoom))}:{...c,x:d.ox+(e.clientX-d.x)/zoom,y:d.oy+(e.clientY-d.y)/zoom}):c)})}} onPointerUp={e=>{const d=drag.current;if(d?.id==='pan'&&tool==='select'&&Math.hypot(e.clientX-d.x,e.clientY-d.y)<4){select('');setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-230)})}if(d&&d.id!=='pan'&&doc!==d.before){setPast(p=>[...p.slice(-29),d.before]);setFuture([])}drag.current=null}} onPointerCancel={()=>{if(drag.current?.id!=='pan'&&drag.current)setDoc(drag.current.before);drag.current=null}}>
+ <div className={s.world} style={{transform:`translate(${pan.x}px,${pan.y}px) scale(${zoom})`}}><svg className={s.wires} aria-hidden="true">{doc.links.map(([a,b])=>{const from=doc.cards.find(c=>c.id===a),to=doc.cards.find(c=>c.id===b);if(!from||!to)return null;return <path key={a+b} d={`M ${from.x+(from.width||320)} ${from.y+(from.height||350)/2} C ${from.x+(from.width||320)+70} ${from.y+(from.height||350)/2},${to.x-45} ${to.y+(to.height||350)/2},${to.x} ${to.y+(to.height||350)/2}`}/>})}</svg>
+ {doc.cards.map(c=><article key={c.id} className={`${s.card} ${selected===c.id?s.selected:''}`} data-node-id={c.id} style={{left:c.x,top:c.y,width:c.width||320,height:c.height||350}} onClick={()=>select(c.id)}><div className={s.cardHead} title="拖动手柄 · 移动工具" aria-label={`移动 ${c.title}`} onPointerDown={e=>{if(tool==='hand'||e.button!==0)return;e.stopPropagation();viewport.current?.setPointerCapture(e.pointerId);select(c.id);drag.current={id:c.id,x:e.clientX,y:e.clientY,ox:c.x,oy:c.y,before:doc}}}><span>{c.kind==='text'?<Type size={15}/>:c.kind==='image'?<ImagePlus size={15}/>:<Sparkles size={15}/>} {c.title}</span><span>⠿</span></div>{c.kind==='image'?<div className={s.image} onClick={()=>{if(tool==='hand')return;select(c.id);file.current?.click()}}>{c.image?<img src={c.image} alt={c.title}/>:<><div className={s.landscape}><span>REF.</span><b>光的形状</b><small>LIGHT / SPACE / EMOTION</small></div><span className={s.sample}>示例占位 · 点击上传参考图</span></>}</div>:<div className={s.cardBody}><span className={s.nodeType}>{c.kind==='prompt'?'PROMPT / 提示词':'NOTE / 灵感笔记'}</span><input aria-label={`${c.title} 名称`} value={c.title} maxLength={200} onFocus={beginEdit} onChange={e=>change('title',e.target.value,c.id)}/><textarea aria-label={`${c.title} 内容`} value={c.text} maxLength={10000} placeholder="在工具内直接编辑…" onFocus={beginEdit} onChange={e=>change('text',e.target.value,c.id)}/></div>}{c.kind==='prompt'&&<div className={s.disconnected}>○ 模型服务未接入 · 仅编辑提示词</div>}<footer>{c.kind==='image'?'视觉素材':c.kind==='prompt'?'镜头设计':'创作起点'}<button aria-label={`${c.title} 操作`} onClick={e=>{e.stopPropagation();select(c.id);setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-330)})}}>•••</button></footer><span className={s.inputPort}/><span className={s.outputPort}/><button className={s.resize} aria-label={`调整 ${c.title} 尺寸`} onPointerDown={e=>{e.stopPropagation();viewport.current?.setPointerCapture(e.pointerId);select(c.id);drag.current={id:c.id,x:e.clientX,y:e.clientY,ox:c.width||320,oy:c.height||350,before:doc,resize:true}}}>↘</button></article>)}
+ </div></div><div className={s.canvasBottom}><span role="status">● {status}</span><div className={s.controls}><button aria-label="撤销" disabled={!past.length} onClick={undo}><Undo2 size={16}/></button><button aria-label="重做" disabled={!future.length} onClick={redo}><Redo2 size={16}/></button><i/><button aria-label="缩小" onClick={()=>scaleAt(zoom-.1)}><Minus size={16}/></button><span>{Math.round(zoom*100)}%</span><button aria-label="放大" onClick={()=>scaleAt(zoom+.1)}><Plus size={16}/></button><button aria-label="适应画布" onClick={fit}><Maximize size={16}/></button></div></div></section>
+ {menu&&<div className={s.contextMenu} role="dialog" aria-label="画布操作" style={{left:Math.max(8,menu.x),top:Math.max(8,menu.y)}}><div className={s.menuTitle}>{active?active.title:'添加到画布'}<button aria-label="关闭画布操作" onClick={()=>setMenu(null)}>×</button></div>{active?<><button onClick={duplicate}>复制节点</button><button onClick={()=>{commit({...doc,cards:doc.cards.filter(c=>c.id!==selected),links:doc.links.filter(l=>!l.includes(selected))});select('');setMenu(null)}}>删除节点</button><label>连接到<select value={link} onChange={e=>setLink(e.target.value)}><option value="">选择目标节点</option>{doc.cards.filter(c=>c.id!==selected).map(c=><option key={c.id} value={c.id}>{c.title}</option>)}</select></label><button disabled={!link} onClick={()=>{if(!doc.links.some(l=>l[0]===selected&&l[1]===link))commit({...doc,links:[...doc.links,[selected,link]]});setLink('')}}>连接节点</button>{doc.links.filter(l=>l.includes(selected)).map(([a,b])=><button key={a+b} onClick={()=>commit({...doc,links:doc.links.filter(l=>l[0]!==a||l[1]!==b)})}>断开：{doc.cards.find(c=>c.id===(a===selected?b:a))?.title}</button>)}</>:<><button onClick={()=>{add('text');setMenu(null)}}>添加笔记</button><button onClick={()=>{add('image');setMenu(null)}}>添加图片</button><button onClick={()=>{add('prompt');setMenu(null)}}>添加提示词</button></>}</div>}</div>
+ <input hidden ref={file} type="file" accept="image/png,image/jpeg,image/webp" onChange={async e=>{const f=e.target.files?.[0];e.target.value='';if(!f)return;if(!['image/png','image/jpeg','image/webp'].includes(f.type)||f.size>2000000){setStatus('请选择 2MB 以内的 PNG、JPEG 或 WebP');return}const reader=new FileReader();reader.onload=()=>{const image=String(reader.result);if(active?.kind==='image')commit({...doc,cards:doc.cards.map(c=>c.id===selected?{...c,image}:c)});else add('image',image)};reader.readAsDataURL(f)}}/>
+ <input hidden ref={json} type="file" accept="application/json,.json" onChange={async e=>{const f=e.target.files?.[0];e.target.value='';if(!f)return;try{if(f.size>15000000)throw Error();const d=JSON.parse(await f.text());if(!valid(d))throw Error();commit(d);select(d.cards[0]?.id||'');setPan({x:0,y:0});setStatus('项目已导入')}catch{setStatus('无法导入：项目格式错误或文件过大')}}}/>
+ </main>;
+}

apps/studio/tests/graphic-document.test.mjs

@@ -0,0 +1,8 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {parseGraphicDocument} from '../src/lib/graphic-document.ts';
+const item={id:'one',kind:'text',name:'标题',text:'<script>文本</script>',x:20,y:20,w:300,h:100,fill:'#123456',size:32,hidden:false,locked:false};
+const doc={name:'作品',background:'#ffffff',items:[item]};
+test('graphic backup restores editable text and ignores unrelated properties',()=>{assert.deepEqual(parseGraphicDocument(JSON.stringify({...doc,extra:'ignored'})),doc)});
+test('graphic backup rejects corrupted layers, duplicate IDs and unbounded geometry',()=>{for(const items of [[{...item,text:null}],[item,item],[{...item,x:Infinity}],[{...item,w:-1}],[{...item,fill:'url(https://example.com)'}]])assert.throws(()=>parseGraphicDocument(JSON.stringify({...doc,items})));});
+test('graphic backup disallows active SVG and remote image loads',()=>{for(const src of ['https://example.com/image.png','javascript:alert(1)','data:image/svg+xml;base64,PHN2Zz4='])assert.throws(()=>parseGraphicDocument(JSON.stringify({...doc,items:[{...item,kind:'image',src}]})));});

apps/waterfall-wiki/src/components/DocumentDirectory.tsx

@@ -0,0 +1,495 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type FormEvent,
+} from "react";
+import {
+  ArrowRight,
+  ArrowUpRight,
+  Bot,
+  ChevronRight,
+  FileText,
+  Plus,
+  Search,
+  X,
+} from "lucide-react";
+import GuidanceShell, { useGuidanceAccount } from "@/components/GuidanceShell";
+import {
+  EmptyState,
+  KindBadge,
+  KindIcon,
+  Notice,
+  PageHeading,
+  kindNames,
+  Tabs,
+} from "@/components/GuidanceUI";
+import { guides, type Guidance } from "@/content/guides/catalog";
+import s from "@/styles/guidance.module.css";
+
+type Summary = {
+  id: string;
+  revision: number;
+  title: string;
+  summary: string;
+  kind: Guidance["kind"];
+  author?: string;
+  tags?: string[];
+  source: "community" | "example";
+};
+type Source = "all" | "published" | "examples";
+const kinds = ["all", "guide", "context", "evidence"] as const;
+const examples: Summary[] = guides.map((g) => ({ ...g, source: "example" }));
+export default function DocumentDirectory({
+  communityOnly = false,
+}: {
+  communityOnly?: boolean;
+}) {
+  const router = useRouter();
+  const mine = communityOnly && router.query.scope === "mine";
+  return (
+    <GuidanceShell
+      title={mine ? "我的文档" : communityOnly ? "社区文档" : "探索文档"}
+    >
+      <DirectoryContent communityOnly={communityOnly} mine={mine} />
+    </GuidanceShell>
+  );
+}
+function DirectoryContent({
+  communityOnly,
+  mine,
+}: {
+  communityOnly: boolean;
+  mine: boolean;
+}) {
+  const router = useRouter(),
+    account = useGuidanceAccount();
+  const [published, setPublished] = useState<Summary[]>([]),
+    [loading, setLoading] = useState(true),
+    [error, setError] = useState("");
+  const [q, setQ] = useState(""),
+    [kind, setKind] = useState("all"),
+    [source, setSource] = useState<Source>(communityOnly ? "published" : "all"),
+    [sort, setSort] = useState("default");
+  const controller = useRef<AbortController | null>(null);
+  const refresh = useCallback(async () => {
+    controller.current?.abort();
+    const abort = new AbortController();
+    controller.current = abort;
+    setLoading(true);
+    setError("");
+    try {
+      const r = await fetch(
+        "/api/documents" +
+          (mine && account.user ? "?author=" + account.user.id : ""),
+        { signal: abort.signal },
+      );
+      const b = await r.json();
+      if (!r.ok) throw Error(b.error || "目录暂时不可用");
+      if (!Array.isArray(b.documents)) throw Error("目录返回异常，请稍后重试");
+      setPublished(
+        b.documents.map((d: Omit<Summary, "source">) => ({
+          ...d,
+          source: "community",
+        })),
+      );
+    } catch (e) {
+      if (!abort.signal.aborted)
+        setError(e instanceof Error ? e.message : "目录暂时不可用");
+    } finally {
+      if (!abort.signal.aborted) setLoading(false);
+    }
+  }, [mine, account.user?.id]);
+  useEffect(() => {
+    void refresh();
+    return () => controller.current?.abort();
+  }, [refresh]);
+  useEffect(() => {
+    if (!router.isReady) return;
+    setQ(typeof router.query.q === "string" ? router.query.q : "");
+    setKind(
+      typeof router.query.kind === "string" &&
+        kinds.some((k) => k === router.query.kind)
+        ? router.query.kind
+        : "all",
+    );
+    setSource(
+      communityOnly
+        ? "published"
+        : router.query.source === "published" ||
+            router.query.source === "examples"
+          ? router.query.source
+          : "all",
+    );
+    setSort(router.query.sort === "title" ? "title" : "default");
+  }, [
+    router.isReady,
+    router.query.q,
+    router.query.kind,
+    router.query.source,
+    router.query.sort,
+    communityOnly,
+  ]);
+  function remember(
+    next: { q?: string; kind?: string; source?: Source; sort?: string } = {},
+  ) {
+    const values = { q, kind, source, sort, ...next },
+      query: Record<string, string> = {};
+    if (values.q) query.q = values.q;
+    if (values.kind !== "all") query.kind = values.kind;
+    if (!communityOnly && values.source !== "all") query.source = values.source;
+    if (values.sort !== "default") query.sort = values.sort;
+    if (mine) query.scope = "mine";
+    void router.push(
+      { pathname: communityOnly ? "/documents" : "/", query },
+      undefined,
+      { shallow: true, scroll: false },
+    );
+  }
+  function search(e: FormEvent) {
+    e.preventDefault();
+    remember();
+  }
+  function clear() {
+    setQ("");
+    setKind("all");
+    setSource(communityOnly ? "published" : "all");
+    setSort("default");
+    remember({
+      q: "",
+      kind: "all",
+      source: communityOnly ? "published" : "all",
+      sort: "default",
+    });
+  }
+  const all: Summary[] = communityOnly
+    ? published
+    : [...published, ...examples];
+  const term = q.trim().toLocaleLowerCase();
+  const found = all.filter(
+    (d) =>
+      (!mine || d.author === account.user?.id) &&
+      (source === "all" ||
+        (source === "published" && d.source === "community") ||
+        (source === "examples" && d.source === "example")) &&
+      `${d.title} ${d.summary} ${d.id} ${d.tags?.join(" ") || ""}`
+        .toLocaleLowerCase()
+        .includes(term),
+  );
+  const documents = found.filter((d) => kind === "all" || d.kind === kind);
+  if (sort === "title")
+    documents.sort((a, b) => a.title.localeCompare(b.title, "zh-CN"));
+  const waiting = loading || (mine && account.loading),
+    filtered =
+      !!q ||
+      kind !== "all" ||
+      (!communityOnly && source !== "all") ||
+      sort !== "default";
+  const heading = mine ? "我的文档" : communityOnly ? "社区文档" : "探索文档";
+  return (
+    <>
+      <PageHeading
+        title={heading}
+        description={
+          mine
+            ? "在这里管理你发布的文档，修改会创建新的固定版本。"
+            : communityOnly
+              ? "来自真实作者的独立文档。找到有用的知识，从一篇开始阅读。"
+              : "为当前任务找到有用的指导，按需连接下一篇知识。"
+        }
+        eyebrow={
+          mine
+            ? "YOUR KNOWLEDGE"
+            : communityOnly
+              ? "COMMUNITY LIBRARY"
+              : "DISCOVER KNOWLEDGE"
+        }
+      >
+        <Link
+          className={s.secondaryButton}
+          href="/agent/index.md"
+          target="_blank"
+        >
+          <Bot size={15} />
+          Agent 入口
+          <ArrowUpRight size={13} />
+        </Link>
+      </PageHeading>
+      {!communityOnly && (
+        <>
+          <section className={s.introCard}>
+            <span className={s.introIcon}>
+              <Bot size={23} />
+            </span>
+            <div>
+              <h2>好用的知识，从不必整套加载。</h2>
+              <p>
+                每篇文档都有适用条件和固定版本。需要更多时，再沿着有用的链接继续阅读。
+              </p>
+            </div>
+            <div className={s.introDiagram} aria-hidden="true">
+              <span>
+                <FileText size={13} />
+                一篇文档
+              </span>
+              <ArrowRight size={15} />
+              <span>
+                <FileText size={13} />
+                下一页
+              </span>
+            </div>
+            <Link className={s.textLink} href="/protocol">
+              了解工作原理
+              <ArrowUpRight size={13} />
+            </Link>
+          </section>
+          <div className={s.topics}>
+            <span>试试这些任务</span>
+            {["代码审查", "规划", "验证"].map((t) => (
+              <button
+                type="button"
+                key={t}
+                onClick={() => {
+                  setQ(t);
+                  remember({ q: t });
+                }}
+              >
+                {t}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+      {mine && !account.loading && !account.user ? (
+        <section className={s.panel}>
+          {account.error && (
+            <div className={s.panelBody}>
+              <Notice tone="error">
+                {account.error}{" "}
+                <button type="button" onClick={() => void account.refresh()}>
+                  重新检查
+                </button>
+              </Notice>
+            </div>
+          )}
+          <EmptyState
+            title="登录后，管理你的知识"
+            description="使用已验证的邮箱账户发布文档、更新版本，并随时回到这里继续编辑。"
+          >
+            <Link
+              className={s.primaryButton}
+              href="/account?next=%2Fdocuments%3Fscope%3Dmine"
+            >
+              登录 / 创建账户
+              <ArrowRight size={15} />
+            </Link>
+          </EmptyState>
+        </section>
+      ) : (
+        <>
+          <section className={s.panel} aria-label="文档目录">
+            <Tabs
+              tabs={kinds.map((k) => ({
+                id: k,
+                label: k === "all" ? "全部文档" : kindNames[k],
+                count: found.filter((d) => k === "all" || d.kind === k).length,
+              }))}
+              value={kind}
+              onChange={(value) => {
+                setKind(value);
+                remember({ kind: value });
+              }}
+            />
+            <div className={s.catalogToolbar}>
+              <form className={s.catalogSearch} role="search" onSubmit={search}>
+                <Search size={16} />
+                <input
+                  aria-label="搜索文档"
+                  placeholder="搜索标题、摘要或文档 ID…"
+                  value={q}
+                  onChange={(e) => setQ(e.target.value)}
+                />
+                {q && (
+                  <button
+                    type="button"
+                    aria-label="清空关键词"
+                    onClick={() => {
+                      setQ("");
+                      remember({ q: "" });
+                    }}
+                  >
+                    <X size={14} />
+                  </button>
+                )}
+                <button type="submit" aria-label="提交搜索">
+                  <ArrowRight size={15} />
+                </button>
+              </form>
+              <div className={s.catalogTools}>
+                {!communityOnly && (
+                  <select
+                    aria-label="文档来源"
+                    value={source}
+                    onChange={(e) => {
+                      const value = e.target.value as Source;
+                      setSource(value);
+                      remember({ source: value });
+                    }}
+                  >
+                    <option value="all">全部来源</option>
+                    <option value="published">社区发布</option>
+                    <option value="examples">协议样例</option>
+                  </select>
+                )}
+                <select
+                  aria-label="文档排序"
+                  value={sort}
+                  onChange={(e) => {
+                    setSort(e.target.value);
+                    remember({ sort: e.target.value });
+                  }}
+                >
+                  <option value="default">默认顺序</option>
+                  <option value="title">按标题排序</option>
+                </select>
+              </div>
+            </div>
+            <div className={s.catalogStatus}>
+              <p role="status">
+                {waiting
+                  ? "正在加载文档…"
+                  : error
+                    ? `当前显示 ${documents.length} 篇，社区目录加载失败`
+                    : `找到 ${documents.length} 篇文档`}
+              </p>
+              {filtered ? (
+                <button type="button" aria-label="清除所有筛选" onClick={clear}>
+                  清除所有筛选
+                </button>
+              ) : (
+                <span>最多展示最近 100 篇社区文档</span>
+              )}
+            </div>
+            {error && (
+              <div className={s.panelBody}>
+                <Notice tone="error">
+                  {error}{" "}
+                  <button
+                    type="button"
+                    className={s.textLink}
+                    onClick={() => void refresh()}
+                  >
+                    重新加载
+                  </button>
+                </Notice>
+              </div>
+            )}
+            <div className={s.tableHeader} aria-hidden="true">
+              <span>文档</span>
+              <span>类型</span>
+              <span>版本</span>
+              <span className={s.tableSource}>来源</span>
+              <span />
+            </div>
+            {waiting && (!documents.length || communityOnly) ? (
+              <div aria-label="正在加载文档" aria-busy="true">
+                {[0, 1, 2].map((i) => (
+                  <div className={s.skeletonRow} key={i}>
+                    <div className={s.skeletonBox} />
+                    <div className={s.skeletonLines}>
+                      <div className={s.skeletonLine} />
+                      <div className={s.skeletonLine} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              documents.map((d) => (
+                <Link
+                  href={`${d.source === "example" ? "/guide/" : "/documents/"}${d.id}?revision=${d.revision}`}
+                  key={d.id}
+                  className={s.documentRow}
+                >
+                  <div className={s.documentPrimary}>
+                    <span className={s.documentIcon}>
+                      <KindIcon kind={d.kind} />
+                    </span>
+                    <div className={s.documentDetails}>
+                      <h2 className={s.documentTitle}>{d.title}</h2>
+                      <p className={s.documentSummary}>{d.summary}</p>
+                      <p className={s.documentId} title={d.id}>
+                        {d.id}
+                      </p>
+                      <div className={s.documentMobileMeta}>
+                        <KindBadge kind={d.kind} />
+                        <span>v{d.revision}</span>
+                        <span>
+                          {d.source === "example" ? "协议样例" : "社区发布"}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <span className={s.documentKind}>
+                    <KindBadge kind={d.kind} />
+                  </span>
+                  <span className={s.documentVersion}>v{d.revision}</span>
+                  <span className={s.documentSource}>
+                    {d.source === "example" ? "协议样例" : "社区发布"}
+                  </span>
+                  <ChevronRight size={16} className={s.documentArrow} />
+                </Link>
+              ))
+            )}
+            {!waiting && !documents.length && !error && (
+              <EmptyState
+                title={
+                  filtered
+                    ? "没有匹配文档"
+                    : mine
+                      ? "你的第一篇文档，从这里开始"
+                      : "这里还没有社区文档"
+                }
+                description={
+                  filtered
+                    ? "试试其他关键词或清除筛选，发现更多适合当前任务的知识。"
+                    : mine
+                      ? "把你反复使用的方法写下来，让 Agent 在需要时找到它。"
+                      : "你可以先阅读协议样例，也可以发布第一篇独立文档。"
+                }
+              >
+                {filtered ? (
+                  <button
+                    type="button"
+                    className={s.secondaryButton}
+                    onClick={clear}
+                  >
+                    重置筛选
+                  </button>
+                ) : (
+                  <Link className={s.primaryButton} href="/write">
+                    <Plus size={15} />
+                    发布一篇文档
+                  </Link>
+                )}
+              </EmptyState>
+            )}
+          </section>
+          <div className={s.catalogFootnote}>
+            <span>
+              {mine
+                ? "只有你可以更新自己的文档，已发布的历史版本保持不变。"
+                : "社区文档与协议样例分别标识，采用前请确认适用条件与版本。"}
+            </span>
+            <Link href="/protocol">
+              了解读取规范
+              <ArrowUpRight size={12} />
+            </Link>
+          </div>
+        </>
+      )}
+    </>
+  );
+}

apps/waterfall-wiki/src/components/GuidanceReader.tsx

@@ -0,0 +1,462 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useRef, useState } from "react";
+import {
+  ArrowLeft,
+  ArrowUpRight,
+  BookOpen,
+  Braces,
+  CalendarDays,
+  CheckSquare,
+  ChevronRight,
+  FileText,
+  GitBranch,
+  Globe2,
+  ListChecks,
+  Link2,
+  Pencil,
+  Target,
+  Trash2,
+} from "lucide-react";
+import GuidanceShell from "@/components/GuidanceShell";
+import {
+  CopyButton,
+  KindBadge,
+  Notice,
+  Tabs,
+  kindNames,
+} from "@/components/GuidanceUI";
+import { guidanceXml, type Guidance } from "@/content/guides/catalog";
+import s from "@/styles/guidance.module.css";
+
+export type ReadingVersion = { revision: number; createdAt?: string };
+export type ReadingLink = Guidance["links"][number] & { resolved: boolean };
+export type ReaderProps = {
+  document: Guidance;
+  source: "example" | "community";
+  links: ReadingLink[];
+  versions: ReadingVersion[];
+  backlinks?: {
+    id: string;
+    revision?: number;
+    title: string;
+    source?: "example" | "community";
+  }[];
+  canEdit?: boolean;
+  withdrawn?: boolean;
+};
+const relationNames = {
+  guide: "可选指导",
+  context: "背景参考",
+  evidence: "事实依据",
+};
+function dateLabel(value?: string) {
+  return value
+    ? new Intl.DateTimeFormat("zh-CN", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        timeZone: "UTC",
+      }).format(new Date(value))
+    : "协议样例";
+}
+export default function GuidanceReader({
+  document: doc,
+  source,
+  links,
+  versions,
+  backlinks = [],
+  canEdit = false,
+  withdrawn = false,
+}: ReaderProps) {
+  const router = useRouter(),
+    dialog = useRef<HTMLDialogElement>(null);
+  const [tab, setTab] = useState("overview"),
+    [busy, setBusy] = useState(false),
+    [error, setError] = useState(""),
+    [isWithdrawn, setWithdrawn] = useState(withdrawn);
+  useEffect(() => {
+    setWithdrawn(withdrawn);
+    setError("");
+    setTab("overview");
+  }, [doc.id, withdrawn]);
+  const api = `/api/${source === "example" ? "guides" : "documents"}/${doc.id}?revision=${doc.revision}&format=xml`;
+  const current = versions.find((v) => v.revision === doc.revision),
+    xml = guidanceXml(doc);
+  const route = source === "example" ? "/guide/" : "/documents/";
+  const sectionLinks = [
+    ["applies", "适用条件"],
+    ["content", "指导正文"],
+    ...(doc.steps.length ? [["steps", "建议步骤"]] : []),
+    ...(doc.checks.length ? [["checks", "完成检查"]] : []),
+    ["related", "条件链接"],
+  ];
+  async function withdraw() {
+    setBusy(true);
+    setError("");
+    try {
+      const response = await fetch("/api/documents/" + doc.id, {
+        method: "DELETE",
+      });
+      const body = await response.json();
+      if (!response.ok) throw Error(body.error || "撤下失败，请稍后重试");
+      setWithdrawn(true);
+      dialog.current?.close();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "撤下失败，请稍后重试");
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <GuidanceShell title="文档详情">
+      <header className={s.readingHeader}>
+        <Link
+          className={s.backLink}
+          href={source === "example" ? "/" : "/documents"}
+        >
+          <ArrowLeft size={13} />
+          {source === "example" ? "返回探索文档" : "返回社区文档"}
+        </Link>
+        <div className={s.documentBadges}>
+          <KindBadge kind={doc.kind} />
+          <span className={s.neutralBadge}>
+            {source === "example" ? "协议样例" : "社区发布"}
+          </span>
+          <span className={s.neutralBadge}>v{doc.revision}</span>
+          {isWithdrawn && (
+            <span className={s.neutralBadge}>已撤下 · 历史版本</span>
+          )}
+        </div>
+        <h1>{doc.title}</h1>
+        <p className={s.readingSummary}>{doc.summary}</p>
+        <div className={s.readingMeta}>
+          <span>
+            <Globe2 size={13} />
+            公开文档
+          </span>
+          <span>
+            <GitBranch size={13} />
+            固定版本 {doc.revision}
+          </span>
+          {current?.createdAt && (
+            <span>
+              <CalendarDays size={13} />
+              {dateLabel(current.createdAt)}
+            </span>
+          )}
+        </div>
+        <div className={s.readingActions}>
+          <CopyButton
+            label="复制 Agent 读取地址"
+            value={() => window.location.origin + api}
+          />
+          <a
+            href={api}
+            className={s.secondaryButton}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Braces size={15} />
+            读取规范 XML
+            <ArrowUpRight size={13} />
+          </a>
+          {canEdit && !isWithdrawn && (
+            <Link className={s.secondaryButton} href={"/write?id=" + doc.id}>
+              <Pencil size={14} />
+              编辑最新版本
+            </Link>
+          )}
+        </div>
+      </header>
+      {isWithdrawn && (
+        <Notice tone="warning">
+          这篇文档已从公开目录撤下。你正在阅读固定历史版本，已有引用仍可继续使用。
+        </Notice>
+      )}
+      <div className={s.readingLayout}>
+        <section className={s.panel}>
+          <Tabs
+            tabs={[
+              { id: "overview", label: "文档概览" },
+              { id: "xml", label: "XML 源文档" },
+              { id: "versions", label: "版本记录", count: versions.length },
+            ]}
+            value={tab}
+            onChange={setTab}
+          />
+          {tab === "overview" ? (
+            <article className={s.readingArticle}>
+              <section
+                id="applies"
+                className={`${s.proseSection} ${s.appliesCard}`}
+              >
+                <h2>
+                  <Target size={16} />
+                  何时使用这篇文档
+                </h2>
+                <p>{doc.applies}</p>
+              </section>
+              <section id="content" className={s.proseSection}>
+                <h2>
+                  <FileText size={16} />
+                  指导正文
+                </h2>
+                <div className={s.proseBody}>{doc.body}</div>
+              </section>
+              {!!doc.steps.length && (
+                <section id="steps" className={s.proseSection}>
+                  <h2>
+                    <ListChecks size={17} />
+                    建议步骤
+                  </h2>
+                  <ol className={s.stepList}>
+                    {doc.steps.map((step, index) => (
+                      <li key={index}>{step}</li>
+                    ))}
+                  </ol>
+                </section>
+              )}
+              {!!doc.checks.length && (
+                <section id="checks" className={s.proseSection}>
+                  <h2>
+                    <CheckSquare size={16} />
+                    完成检查
+                  </h2>
+                  <ul className={s.checkList}>
+                    {doc.checks.map((check, index) => (
+                      <li key={index}>{check}</li>
+                    ))}
+                  </ul>
+                </section>
+              )}
+              <section id="related" className={s.proseSection}>
+                <h2>
+                  <Link2 size={16} />
+                  按需继续阅读
+                  <span className={s.neutralBadge}>{links.length}</span>
+                </h2>
+                <p className={s.formDescription}>
+                  只在条件适用、且当前任务需要时，打开下一篇文档。
+                </p>
+                {links.map((link, index) => {
+                  const content = (
+                    <>
+                      <div>
+                        <strong>{link.label}</strong>
+                        <p>当{link.when}</p>
+                        <small>
+                          <span>{relationNames[link.relation]}</span>
+                          <span>·</span>
+                          <span>v{link.revision}</span>
+                          {!link.resolved && (
+                            <span>· 固定版本缺失，请跳过</span>
+                          )}
+                        </small>
+                      </div>
+                      {link.resolved && <ArrowUpRight size={15} />}
+                    </>
+                  );
+                  return link.resolved ? (
+                    <Link
+                      className={s.relationCard}
+                      key={index}
+                      href={
+                        (link.target.startsWith("user-")
+                          ? "/documents/"
+                          : "/guide/") +
+                        link.target +
+                        "?revision=" +
+                        link.revision
+                      }
+                    >
+                      {content}
+                    </Link>
+                  ) : (
+                    <div
+                      className={`${s.relationCard} ${s.unresolved}`}
+                      key={index}
+                    >
+                      {content}
+                    </div>
+                  );
+                })}
+                {!links.length && (
+                  <p className={s.proseBody}>
+                    这篇文档可以独立使用，没有需要继续读取的关联文档。
+                  </p>
+                )}
+              </section>
+            </article>
+          ) : tab === "xml" ? (
+            <>
+              <div className={s.xmlToolbar}>
+                <span>{doc.id}.xml</span>
+                <CopyButton value={xml} label="复制 XML" />
+              </div>
+              <pre className={s.codeBlock}>{xml}</pre>
+            </>
+          ) : (
+            <div className={s.versionsList}>
+              {versions.map((version) => (
+                <div className={s.versionRow} key={version.revision}>
+                  <div>
+                    <div className={s.buttonRow}>
+                      <strong>版本 {version.revision}</strong>
+                      {version.revision === doc.revision && (
+                        <span className={s.neutralBadge}>当前阅读</span>
+                      )}
+                    </div>
+                    <p>{dateLabel(version.createdAt)} · 固定版本</p>
+                  </div>
+                  <Link
+                    className={s.textLink}
+                    href={route + doc.id + "?revision=" + version.revision}
+                  >
+                    读取
+                    <ChevronRight size={13} />
+                  </Link>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+        <aside className={s.readingSidebar}>
+          <section className={s.sideCard}>
+            <h3>文档信息</h3>
+            <dl className={s.metadataList}>
+              <div>
+                <dt>类型</dt>
+                <dd>{kindNames[doc.kind]}</dd>
+              </div>
+              <div>
+                <dt>来源</dt>
+                <dd>
+                  {source === "example"
+                    ? "织页协议样例"
+                    : canEdit
+                      ? "你的文档"
+                      : "社区作者"}
+                </dd>
+              </div>
+              <div>
+                <dt>当前版本</dt>
+                <dd>
+                  <select
+                    aria-label="选择阅读版本"
+                    value={doc.revision}
+                    onChange={(e) =>
+                      void router.push(
+                        route + doc.id + "?revision=" + e.target.value,
+                      )
+                    }
+                  >
+                    {versions.map((v) => (
+                      <option key={v.revision} value={v.revision}>
+                        v{v.revision}
+                      </option>
+                    ))}
+                  </select>
+                </dd>
+              </div>
+              <div>
+                <dt>可见范围</dt>
+                <dd>{isWithdrawn ? "仅固定历史版本" : "公开读取"}</dd>
+              </div>
+            </dl>
+            <code className={s.machineAddress}>{doc.id}</code>
+            {canEdit && !isWithdrawn && (
+              <div className={s.authorActions}>
+                <Link
+                  className={s.secondaryButton}
+                  href={"/write?id=" + doc.id}
+                >
+                  <Pencil size={13} />
+                  编辑文档
+                </Link>
+                <button
+                  type="button"
+                  className={s.quietButton}
+                  onClick={() => dialog.current?.showModal()}
+                >
+                  <Trash2 size={13} />
+                  撤下文档
+                </button>
+              </div>
+            )}
+          </section>
+          <section className={`${s.sideCard} ${s.tocCard}`}>
+            <h3>本篇目录</h3>
+            <nav className={s.toc} aria-label="本篇目录">
+              {sectionLinks.map(([id, label]) => (
+                <a key={id} href={"#" + id} onClick={() => setTab("overview")}>
+                  {label}
+                </a>
+              ))}
+            </nav>
+          </section>
+          <section className={s.sideCard}>
+            <h3>
+              <BookOpen size={15} /> 采用这一篇
+            </h3>
+            <p>
+              把固定版本的读取地址交给 Agent。关联文档是候选帮助，无需一起加载。
+            </p>
+            <code className={s.machineAddress}>{api}</code>
+            <CopyButton
+              label="复制读取地址"
+              value={() => window.location.origin + api}
+            />
+          </section>
+          {!!backlinks.length && (
+            <section className={s.sideCard}>
+              <h3>被这些文档引用</h3>
+              <div className={s.sideLinks}>
+                {backlinks.map((b) => (
+                  <Link
+                    key={b.id}
+                    href={
+                      (b.source === "community" ? "/documents/" : "/guide/") +
+                      b.id +
+                      (b.revision ? "?revision=" + b.revision : "")
+                    }
+                  >
+                    {b.title}
+                    <ArrowUpRight size={11} />
+                  </Link>
+                ))}
+              </div>
+            </section>
+          )}
+        </aside>
+      </div>
+      <dialog ref={dialog} className={s.modal} aria-labelledby="withdraw-title">
+        <div className={s.modalBody}>
+          <h2 id="withdraw-title">撤下这篇文档？</h2>
+          <p>
+            它将不再出现在目录中。已发布的固定历史版本会保留，已有引用仍然可以访问。
+          </p>
+          {error && <Notice tone="error">{error}</Notice>}
+        </div>
+        <div className={s.modalActions}>
+          <button
+            type="button"
+            disabled={busy}
+            className={s.secondaryButton}
+            onClick={() => dialog.current?.close()}
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            disabled={busy}
+            className={s.dangerButton}
+            onClick={() => void withdraw()}
+          >
+            {busy ? "正在撤下…" : "确认撤下"}
+          </button>
+        </div>
+      </dialog>
+    </GuidanceShell>
+  );
+}

apps/waterfall-wiki/src/components/GuidanceShell.tsx

@@ -1,4 +1,265 @@
-import Link from 'next/link';
-import type {ReactNode} from 'react';
-import s from '@/styles/guidance.module.css';
-export default function GuidanceShell({children}:{children:ReactNode}){return <div className={s.site}><header className={s.header}><Link className={s.brand} href="/">↗ 织页 <small>实验版</small></Link><nav><Link href="/">探索文档</Link><Link href="/documents">用户文档</Link><Link href="/write">发布文档</Link><Link href="/protocol">协议草案</Link></nav><Link className={s.account} href="/account">登录 / 注册 ↗</Link></header>{children}<footer className={s.footer}><span>织页 · Linked Guidance · 名称与协议仍在探索中</span><Link href="/protocol">让每一页都能成为起点 ↗</Link></footer></div>}
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  ArrowUpRight,
+  BookOpen,
+  Bot,
+  ChevronRight,
+  Compass,
+  Files,
+  Globe2,
+  LogIn,
+  Menu,
+  Plus,
+  SquarePen,
+  UserRound,
+  Waypoints,
+  X,
+} from "lucide-react";
+import s from "@/styles/guidance.module.css";
+
+export type AccountUser = { id: string; email: string; verified_at: string };
+type AccountState = {
+  user: AccountUser | null;
+  loading: boolean;
+  error: string;
+  refresh: () => Promise<void>;
+};
+const AccountContext = createContext<AccountState>({
+  user: null,
+  loading: true,
+  error: "",
+  refresh: async () => {},
+});
+export const useGuidanceAccount = () => useContext(AccountContext);
+
+export default function GuidanceShell({
+  children,
+  title = "探索文档",
+}: {
+  children: ReactNode;
+  title?: string;
+}) {
+  const router = useRouter();
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [user, setUser] = useState<AccountUser | null>(null),
+    [loading, setLoading] = useState(true),
+    [error, setError] = useState("");
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const r = await fetch("/api/account/session");
+      const b = await r.json();
+      if (!r.ok) throw Error(b.error || "账户暂时不可用");
+      setUser(b.user || null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "账户暂时不可用");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  useEffect(() => {
+    dialog.current?.close();
+  }, [router.pathname, router.query.scope]);
+  const mine = router.query.scope === "mine";
+  const nav = [
+    {
+      href: "/",
+      label: "探索文档",
+      Icon: Compass,
+      active: router.pathname === "/" || router.pathname.startsWith("/guide/"),
+    },
+    {
+      href: "/documents",
+      label: "社区文档",
+      Icon: Files,
+      active: router.pathname.startsWith("/documents") && !mine,
+    },
+    {
+      href: "/documents?scope=mine",
+      label: "我的文档",
+      Icon: BookOpen,
+      active: router.pathname === "/documents" && mine,
+    },
+    {
+      href: "/write",
+      label: "发布文档",
+      Icon: SquarePen,
+      active: router.pathname === "/write",
+    },
+  ];
+  function navigation(mobile = false) {
+    return (
+      <>
+        <Link
+          className={s.brand}
+          href="/"
+          onClick={() => dialog.current?.close()}
+        >
+          <span className={s.brandMark}>
+            <Waypoints size={22} strokeWidth={2.2} />
+          </span>
+          <span>
+            织页<small>KNOWLEDGE FOR AGENTS</small>
+          </span>
+        </Link>
+        <div className={s.workspaceLabel}>
+          <Globe2 size={16} />
+          <span>公共知识空间</span>
+          <span className={s.workspaceTag}>Public</span>
+        </div>
+        <p className={s.navLabel}>工作空间</p>
+        <nav
+          aria-label={mobile ? "移动端主导航" : "主导航"}
+          className={s.navigation}
+        >
+          {nav.map(({ href, label, Icon, active }) => (
+            <Link
+              href={href}
+              key={href}
+              aria-current={active ? "page" : undefined}
+              className={active ? s.navActive : ""}
+              onClick={() => dialog.current?.close()}
+            >
+              <Icon size={18} />
+              <span>{label}</span>
+            </Link>
+          ))}
+        </nav>
+        <p className={s.navLabel}>资源</p>
+        <nav
+          aria-label={mobile ? "移动端资源" : "资源导航"}
+          className={s.navigation}
+        >
+          <Link
+            href="/protocol"
+            aria-current={router.pathname === "/protocol" ? "page" : undefined}
+            className={router.pathname === "/protocol" ? s.navActive : ""}
+            onClick={() => dialog.current?.close()}
+          >
+            <BookOpen size={18} />
+            <span>文档协议</span>
+          </Link>
+          <a href="/agent/index.md" target="_blank" rel="noreferrer">
+            <Bot size={18} />
+            <span>Agent 读取入口</span>
+            <ArrowUpRight size={14} className={s.navExternal} />
+          </a>
+        </nav>
+        <div className={s.sidebarBottom}>
+          <div className={s.sidebarHelp}>
+            <span className={s.smallLabel}>从一篇文档开始</span>
+            <p>选择适用的指导，需要更多背景时，再沿链接继续阅读。</p>
+            <Link href="/protocol">
+              了解使用方法 <ArrowUpRight size={13} />
+            </Link>
+          </div>
+          <Link href="/account" className={s.userArea}>
+            <span className={s.avatar}>
+              {user ? (
+                user.email.slice(0, 1).toUpperCase()
+              ) : (
+                <UserRound size={18} />
+              )}
+            </span>
+            <span className={s.userInfo}>
+              <strong>
+                {user ? user.email : loading ? "正在检查账户…" : "登录你的账户"}
+              </strong>
+              <small>
+                {user ? "管理与发布你的文档" : "邮箱登录 · 开始发布"}
+              </small>
+            </span>
+            <ChevronRight size={15} />
+          </Link>
+        </div>
+      </>
+    );
+  }
+  return (
+    <AccountContext.Provider value={{ user, loading, error, refresh }}>
+      <div className={s.site}>
+        <Head>
+          <title>{`${title} · 织页`}</title>
+          <meta
+            name="description"
+            content="为 Agent 编写、发现和连接可独立使用的指导文档。"
+          />
+        </Head>
+        <a className={s.skipLink} href="#workspace-content">
+          跳到正文
+        </a>
+        <aside className={s.sidebar}>{navigation()}</aside>
+        <dialog ref={dialog} className={s.mobileDialog} aria-label="工作区导航">
+          <button
+            type="button"
+            className={s.mobileClose}
+            aria-label="关闭导航"
+            onClick={() => dialog.current?.close()}
+          >
+            <X size={20} />
+          </button>
+          {navigation(true)}
+        </dialog>
+        <div className={s.workspace}>
+          <header className={s.topbar}>
+            <div className={s.breadcrumb}>
+              <button
+                type="button"
+                className={s.mobileMenu}
+                aria-label="打开导航"
+                onClick={() => dialog.current?.showModal()}
+              >
+                <Menu size={20} />
+              </button>
+              <span className={s.breadcrumbSpace}>工作空间</span>
+              <ChevronRight size={14} />
+              <strong>{title}</strong>
+            </div>
+            <div className={s.topbarActions}>
+              <Link className={s.topbarProtocol} href="/protocol">
+                <span className={s.statusDot} />
+                Linked Guidance 0.1
+              </Link>
+              {router.pathname !== "/write" && (
+                <Link className={s.primaryButton} href="/write">
+                  <Plus size={16} />
+                  创建文档
+                </Link>
+              )}
+              {!user && !loading && (
+                <Link className={s.topbarLogin} href="/account">
+                  <LogIn size={16} />
+                  <span>登录</span>
+                </Link>
+              )}
+            </div>
+          </header>
+          <main className={s.content} id="workspace-content">
+            {children}
+          </main>
+          <footer className={s.workspaceFooter}>
+            <span>织页 · 让知识按需连接</span>
+            <Link href="/protocol">
+              文档协议 <ArrowUpRight size={12} />
+            </Link>
+          </footer>
+        </div>
+      </div>
+    </AccountContext.Provider>
+  );
+}

apps/waterfall-wiki/src/components/GuidanceUI.tsx

@@ -0,0 +1,190 @@
+import { useId, useRef, useState, type ReactNode } from "react";
+import {
+  BookOpen,
+  Check,
+  CheckCircle2,
+  Copy,
+  FileCheck2,
+  FileText,
+  Info,
+  TriangleAlert,
+} from "lucide-react";
+import type { Guidance } from "@/content/guides/catalog";
+import s from "@/styles/guidance.module.css";
+export const kindNames: Record<Guidance["kind"], string> = {
+  guide: "操作指导",
+  context: "背景知识",
+  evidence: "事实依据",
+};
+export function KindIcon({
+  kind,
+  size = 18,
+}: {
+  kind: Guidance["kind"];
+  size?: number;
+}) {
+  const Icon =
+    kind === "guide" ? FileText : kind === "context" ? BookOpen : FileCheck2;
+  return <Icon size={size} aria-hidden="true" />;
+}
+export function KindBadge({ kind }: { kind: Guidance["kind"] }) {
+  return (
+    <span className={`${s.kindBadge} ${s[kind]}`}>
+      <KindIcon kind={kind} size={13} />
+      {kindNames[kind]}
+    </span>
+  );
+}
+export function CopyButton({
+  value,
+  label = "复制地址",
+  className = "",
+}: {
+  value: string | (() => string);
+  label?: string;
+  className?: string;
+}) {
+  const [state, setState] = useState<"idle" | "copied" | "error">("idle");
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(
+        typeof value === "function" ? value() : value,
+      );
+      setState("copied");
+    } catch {
+      setState("error");
+    }
+  }
+  return (
+    <span className={s.copyControl}>
+      <button
+        type="button"
+        className={className || s.secondaryButton}
+        onClick={() => void copy()}
+      >
+        {state === "copied" ? <Check size={15} /> : <Copy size={15} />}
+        <span>{state === "copied" ? "已复制" : label}</span>
+      </button>
+      <span className={s.srOnly} role="status">
+        {state === "error"
+          ? "无法自动复制，请选择下方地址手动复制。"
+          : state === "copied"
+            ? "已复制到剪贴板。"
+            : ""}
+      </span>
+      {state === "error" && (
+        <small className={s.copyError}>请手动复制下方地址</small>
+      )}
+    </span>
+  );
+}
+export function Notice({
+  children,
+  tone = "info",
+}: {
+  children: ReactNode;
+  tone?: "info" | "success" | "error" | "warning";
+}) {
+  const Icon =
+    tone === "error" || tone === "warning"
+      ? TriangleAlert
+      : tone === "success"
+        ? CheckCircle2
+        : Info;
+  return (
+    <div
+      className={`${s.notice} ${s["notice" + tone]}`}
+      role={tone === "error" ? "alert" : "status"}
+    >
+      <Icon size={18} />
+      <div>{children}</div>
+    </div>
+  );
+}
+export function PageHeading({
+  title,
+  description,
+  eyebrow,
+  children,
+}: {
+  title: string;
+  description?: string;
+  eyebrow?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <header className={s.pageHeading}>
+      <div>
+        {eyebrow && <span className={s.eyebrow}>{eyebrow}</span>}
+        <h1>{title}</h1>
+        {description && <p>{description}</p>}
+      </div>
+      {children && <div className={s.headingActions}>{children}</div>}
+    </header>
+  );
+}
+export function EmptyState({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description: string;
+  children?: ReactNode;
+}) {
+  return (
+    <div className={s.emptyState}>
+      <span className={s.emptyIcon}>
+        <BookOpen size={24} />
+      </span>
+      <h3>{title}</h3>
+      <p>{description}</p>
+      {children}
+    </div>
+  );
+}
+export function Tabs({
+  tabs,
+  value,
+  onChange,
+}: {
+  tabs: { id: string; label: string; count?: number }[];
+  value: string;
+  onChange: (id: string) => void;
+}) {
+  const group = useId(),
+    refs = useRef<(HTMLButtonElement | null)[]>([]);
+  return (
+    <div role="tablist" aria-label="内容视图" className={s.tabs}>
+      {tabs.map((tab, index) => (
+        <button
+          key={tab.id}
+          ref={(el) => {
+            refs.current[index] = el;
+          }}
+          id={`${group}-${tab.id}`}
+          role="tab"
+          type="button"
+          aria-selected={value === tab.id}
+          tabIndex={value === tab.id ? 0 : -1}
+          onClick={() => onChange(tab.id)}
+          onKeyDown={(e) => {
+            let next = index;
+            if (e.key === "ArrowRight") next = (index + 1) % tabs.length;
+            else if (e.key === "ArrowLeft")
+              next = (index - 1 + tabs.length) % tabs.length;
+            else if (e.key === "Home") next = 0;
+            else if (e.key === "End") next = tabs.length - 1;
+            else return;
+            e.preventDefault();
+            onChange(tabs[next].id);
+            refs.current[next]?.focus();
+          }}
+        >
+          {tab.label}
+          {tab.count !== undefined && <span>{tab.count}</span>}
+        </button>
+      ))}
+    </div>
+  );
+}

apps/waterfall-wiki/src/lib/guidance-store.ts

@@ -1,15 +1,55 @@
-import { db,transaction } from './db';
-import { documentInput } from './guidance-input';
-import { findGuide,type Guidance } from '../content/guides/catalog';
-export async function resolveDocument(id:string,revision?:number):Promise<Guidance|null>{
- if(!id.startsWith('user-'))return findGuide(id,revision)||null;
- const r=await db().query(`SELECT r.content FROM guidance_documents d JOIN guidance_revisions r ON r.document_id=d.id AND r.revision=COALESCE($2,d.latest) WHERE d.id=$1 AND ($2::integer IS NOT NULL OR d.deleted_at IS NULL)`,[id,revision??null]);return r.rows[0]?.content||null;
+import { db, transaction } from "./db";
+import { documentInput } from "./guidance-input";
+import { findGuide, type Guidance } from "../content/guides/catalog";
+export async function resolveDocument(
+  id: string,
+  revision?: number,
+): Promise<Guidance | null> {
+  if (!id.startsWith("user-")) return findGuide(id, revision) || null;
+  const r = await db().query(
+    `SELECT r.content FROM guidance_documents d JOIN guidance_revisions r ON r.document_id=d.id AND r.revision=COALESCE($2,d.latest) WHERE d.id=$1 AND ($2::integer IS NOT NULL OR d.deleted_at IS NULL)`,
+    [id, revision ?? null],
+  );
+  return r.rows[0]?.content || null;
+}
+export async function publishDocument(owner: string, value: unknown) {
+  const content = documentInput.parse(value);
+  if (!content.id.startsWith("user-" + owner + "-")) throw Error("INVALID_ID");
+  return transaction(async (c) => {
+    await c.query(
+      "INSERT INTO guidance_documents(id,owner_id) VALUES($1,$2) ON CONFLICT DO NOTHING",
+      [content.id, owner],
+    );
+    const d = (
+      await c.query("SELECT * FROM guidance_documents WHERE id=$1 FOR UPDATE", [
+        content.id,
+      ])
+    ).rows[0];
+    if (d.owner_id !== owner) throw Error("FORBIDDEN");
+    if (d.deleted_at || content.revision !== d.latest + 1)
+      throw Error("CONFLICT");
+    await c.query(
+      "INSERT INTO guidance_revisions(document_id,revision,content) VALUES($1,$2,$3)",
+      [content.id, content.revision, content],
+    );
+    await c.query("UPDATE guidance_documents SET latest=$2 WHERE id=$1", [
+      content.id,
+      content.revision,
+    ]);
+    return content;
+  });
+}
+export async function withdrawDocument(owner: string, id: string) {
+  const r = await db().query(
+    "UPDATE guidance_documents SET deleted_at=COALESCE(deleted_at,now()) WHERE id=$1 AND owner_id=$2 RETURNING id",
+    [id, owner],
+  );
+  return !!r.rowCount;
+}
+export async function discoverDocuments(author?: string) {
+  const r = await db().query(
+    `SELECT d.id,d.latest AS revision,r.content->>'title' AS title,r.content->>'summary' AS summary,r.content->>'kind' AS kind,d.owner_id AS author FROM guidance_documents d JOIN guidance_revisions r ON r.document_id=d.id AND r.revision=d.latest WHERE d.deleted_at IS NULL AND ($1::uuid IS NULL OR d.owner_id=$1::uuid) ORDER BY r.created_at DESC LIMIT 100`,
+    [author ?? null],
+  );
+  return r.rows;
 }
-export async function publishDocument(owner:string,value:unknown){const content=documentInput.parse(value);if(!content.id.startsWith('user-'+owner+'-'))throw Error('INVALID_ID');return transaction(async c=>{
- await c.query('INSERT INTO guidance_documents(id,owner_id) VALUES($1,$2) ON CONFLICT DO NOTHING',[content.id,owner]);
- const d=(await c.query('SELECT * FROM guidance_documents WHERE id=$1 FOR UPDATE',[content.id])).rows[0];
- if(d.owner_id!==owner)throw Error('FORBIDDEN');if(d.deleted_at||content.revision!==d.latest+1)throw Error('CONFLICT');
- await c.query('INSERT INTO guidance_revisions(document_id,revision,content) VALUES($1,$2,$3)',[content.id,content.revision,content]);await c.query('UPDATE guidance_documents SET latest=$2 WHERE id=$1',[content.id,content.revision]);return content;
- });}
-export async function withdrawDocument(owner:string,id:string){const r=await db().query('UPDATE guidance_documents SET deleted_at=COALESCE(deleted_at,now()) WHERE id=$1 AND owner_id=$2 RETURNING id',[id,owner]);return !!r.rowCount;}
-export async function discoverDocuments(){const r=await db().query(`SELECT d.id,d.latest AS revision,r.content->>'title' AS title,r.content->>'summary' AS summary,r.content->>'kind' AS kind,d.owner_id AS author FROM guidance_documents d JOIN guidance_revisions r ON r.document_id=d.id AND r.revision=d.latest WHERE d.deleted_at IS NULL ORDER BY r.created_at DESC LIMIT 100`);return r.rows;}

apps/waterfall-wiki/src/pages/account.tsx

@@ -1,24 +1,360 @@
-'use client';
-import { useEffect, useState, type FormEvent } from 'react';
-export default function AccountPage() {
- const [mode,setMode]=useState('login');const [user,setUser]=useState<{email:string}|null>(null);
- const [message,setMessage]=useState('');const [busy,setBusy]=useState(false);const [token,setToken]=useState('');
- async function refresh(){try{const r=await fetch('/api/account/session');const data=await r.json();if(r.ok)setUser(data.user);else setMessage(data.error);}catch{setMessage('暂时无法连接账户服务');}}
- useEffect(()=>{void refresh();const u=new URL(window.location.href);setToken(u.searchParams.get('verify')||'');if(u.searchParams.has('verify'))window.history.replaceState({},'', '/account');},[]);
- async function action(name:string,body:object={}) {setBusy(true);setMessage('');try{const r=await fetch('/api/account/'+name,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});const d=await r.json();setMessage(d.error||d.message||'操作成功');if(r.ok){if(name==='verify')setToken('');await refresh();}}catch{setMessage('网络异常，请稍后重试');}finally{setBusy(false);}}
- function submit(e:FormEvent<HTMLFormElement>){e.preventDefault();const f=new FormData(e.currentTarget);void action(mode,{email:f.get('email'),password:f.get('password')});}
- const button={padding:'12px 20px',border:'1px solid #394b43',borderRadius:12,cursor:'pointer',background:'#173d30',color:'white'};
- return <main style={{maxWidth:540,margin:'8vh auto',padding:28,fontFamily:'system-ui',color:'#18382b'}}>
- <a href="/">← 返回知识站</a><h1 style={{fontSize:36,marginTop:32}}>你的知识站账户</h1>
- <p>用邮箱保存你的身份。邮箱账户与管理员动态码权限独立。</p>
- {token&&<section style={{padding:20,background:'#f1f5ef',borderRadius:16}}><h2>确认邮箱验证</h2><p>点击后完成验证，再使用邮箱和密码登录。</p><button disabled={busy} style={button} onClick={()=>void action('verify',{token})}>确认验证邮箱</button></section>}
- {user?<section><h2>已登录</h2><p>{user.email}</p><p>邮箱已验证</p><button style={button} disabled={busy} onClick={()=>void action('logout')}>退出登录</button></section>:<>
- <nav style={{display:'flex',gap:10,margin:'24px 0'}}>{[['login','登录'],['register','注册'],['resend','重发验证邮件']].map(([v,label])=><button key={v} disabled={busy} aria-pressed={mode===v} style={{...button,background:mode===v?'#173d30':'#65776c'}} onClick={()=>{setMode(v);setMessage('');}}>{label}</button>)}</nav>
- <form onSubmit={submit} style={{display:'grid',gap:16}}>
- <label>邮箱<input style={{display:'block',width:'100%',padding:12,border:'1px solid #b4bfb7',borderRadius:8}} required type="email" name="email" maxLength={254} autoComplete="email" /></label>
- <label>密码<input style={{display:'block',width:'100%',padding:12,border:'1px solid #b4bfb7',borderRadius:8}} required type="password" name="password" minLength={12} maxLength={256} autoComplete={mode==='register'?'new-password':'current-password'} /></label>
- <small>密码至少 12 个字符。注册后需先验证邮箱；验证链接有效期 30 分钟。</small>
- <button style={button} disabled={busy} type="submit">{busy?'处理中…':mode==='login'?'登录':mode==='register'?'创建账户':'重发验证邮件'}</button></form></>}
- <p role="status" style={{lineHeight:1.7,marginTop:24}}>{message}</p>
- </main>;
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState, type FormEvent } from "react";
+import {
+  ArrowRight,
+  BookOpen,
+  CheckCircle2,
+  Eye,
+  EyeOff,
+  GitBranch,
+  Link2,
+  LogOut,
+  MailCheck,
+  Waypoints,
+} from "lucide-react";
+import GuidanceShell, { useGuidanceAccount } from "@/components/GuidanceShell";
+import { Notice } from "@/components/GuidanceUI";
+import s from "@/styles/guidance.module.css";
+type Mode = "login" | "register" | "resend";
+function localNext(value: string | string[] | undefined) {
+  if (
+    typeof value !== "string" ||
+    !value.startsWith("/") ||
+    value.startsWith("//") ||
+    /[\\\u0000-\u001f]/.test(value)
+  )
+    return "/write";
+  try {
+    const url = new URL(value, "https://local.invalid");
+    return url.origin === "https://local.invalid"
+      ? url.pathname + url.search + url.hash
+      : "/write";
+  } catch {
+    return "/write";
+  }
+}
+export default function AccountPage() {
+  return (
+    <GuidanceShell title="邮箱账户">
+      <AccountContent />
+    </GuidanceShell>
+  );
+}
+function AccountContent() {
+  const account = useGuidanceAccount(),
+    router = useRouter();
+  const [mode, setMode] = useState<Mode>("login"),
+    [email, setEmail] = useState(""),
+    [password, setPassword] = useState(""),
+    [showPassword, setShowPassword] = useState(false);
+  const [busy, setBusy] = useState(false),
+    [token, setToken] = useState(""),
+    [feedback, setFeedback] = useState<{
+      tone: "success" | "error";
+      text: string;
+    } | null>(null);
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    const value = url.searchParams.get("verify");
+    if (value) {
+      setToken(value);
+      url.searchParams.delete("verify");
+      window.history.replaceState({}, "", url.pathname + url.search + url.hash);
+    }
+  }, []);
+  async function action(name: Mode | "verify" | "logout", body: object = {}) {
+    if (busy) return;
+    setBusy(true);
+    setFeedback(null);
+    try {
+      const response = await fetch("/api/account/" + name, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      const data = await response.json();
+      if (!response.ok) throw Error(data.error || "暂时无法完成操作，请重试");
+      if (name === "verify") {
+        setToken("");
+        setMode("login");
+        setFeedback({ tone: "success", text: "邮箱已验证，现在可以登录。" });
+      } else if (name === "login") {
+        setPassword("");
+        setFeedback({ tone: "success", text: "登录成功，欢迎回到织页。" });
+      } else if (name === "logout") {
+        setPassword("");
+        setFeedback({ tone: "success", text: "已退出登录。" });
+      } else
+        setFeedback({
+          tone: "success",
+          text:
+            data.message ||
+            "如果信息符合条件，验证邮件已发送。请检查收件箱和垃圾邮件。",
+        });
+      await account.refresh();
+    } catch (e) {
+      setFeedback({
+        tone: "error",
+        text: e instanceof Error ? e.message : "网络异常，请稍后重试",
+      });
+    } finally {
+      setBusy(false);
+    }
+  }
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    void action(mode, { email, password });
+  }
+  function switchMode(value: Mode) {
+    setMode(value);
+    setFeedback(null);
+  }
+  return (
+    <div className={s.accountLayout}>
+      <section className={s.accountIntro}>
+        <span className={s.accountSymbol}>
+          <Waypoints size={28} />
+        </span>
+        <span className={s.eyebrow}>YOUR KNOWLEDGE, CONNECTED</span>
+        <h1>
+          让有用的知识，
+          <br />
+          成为下一次行动的起点。
+        </h1>
+        <p>
+          用邮箱建立你的知识空间。把工作方法写成独立文档，让 Agent
+          在需要的时候找到它。
+        </p>
+        <div className={s.accountFeatures}>
+          <div>
+            <BookOpen size={18} />
+            <div>
+              <strong>每篇文档，都能独立使用</strong>
+              <p>从当前任务出发，无需加载整个集合。</p>
+            </div>
+          </div>
+          <div>
+            <GitBranch size={18} />
+            <div>
+              <strong>每次更新，都有固定版本</strong>
+              <p>历史引用保持可读，修改始终有迹可循。</p>
+            </div>
+          </div>
+          <div>
+            <Link2 size={18} />
+            <div>
+              <strong>知识之间，按条件连接</strong>
+              <p>需要更多背景时，再沿有用的链接继续阅读。</p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section className={s.authCard} aria-label="邮箱账户">
+        <h2>
+          {account.user
+            ? "你的账户"
+            : mode === "register"
+              ? "创建你的账户"
+              : mode === "resend"
+                ? "重发验证邮件"
+                : "欢迎回来"}
+        </h2>
+        <p className={s.authDescription}>
+          {account.user
+            ? "已准备好发布和管理你的独立文档。"
+            : mode === "register"
+              ? "验证邮箱后，就可以发布第一篇文档。"
+              : mode === "resend"
+                ? "输入注册时的邮箱和密码，重新获取验证链接。"
+                : "使用邮箱与密码登录，继续你的知识工作。"}
+        </p>
+        {token && (
+          <section className={s.verificationCard}>
+            <h3>
+              <MailCheck size={17} />
+              确认验证邮箱
+            </h3>
+            <p>验证链接有效期为 30 分钟。确认后，再使用邮箱与密码登录。</p>
+            <button
+              type="button"
+              className={s.primaryButton}
+              disabled={busy}
+              onClick={() => void action("verify", { token })}
+            >
+              {busy ? "正在验证…" : "确认验证邮箱"}
+            </button>
+          </section>
+        )}
+        {feedback && <Notice tone={feedback.tone}>{feedback.text}</Notice>}
+        {account.error && (
+          <Notice tone="error">
+            {account.error}{" "}
+            <button
+              type="button"
+              className={s.textLink}
+              onClick={() => void account.refresh()}
+            >
+              重新连接
+            </button>
+          </Notice>
+        )}
+        {account.loading ? (
+          <div className={s.accountLoading} aria-busy="true">
+            正在检查账户状态…
+          </div>
+        ) : account.user ? (
+          <>
+            <div className={s.loggedUser}>
+              <span className={s.avatar}>
+                {account.user.email.slice(0, 1).toUpperCase()}
+              </span>
+              <div>
+                <strong>{account.user.email}</strong>
+                <span className={s.verifiedBadge}>
+                  <CheckCircle2 size={13} />
+                  邮箱已验证
+                </span>
+              </div>
+            </div>
+            <div className={s.accountInfo}>
+              <p>
+                <strong>你的内容，由你管理。</strong>
+                <br />
+                你可以发布文档、创建新版本，以及撤下自己的内容。公开文档的固定历史版本会继续保留。
+              </p>
+            </div>
+            <Link
+              className={s.primaryButton}
+              href={localNext(router.query.next)}
+            >
+              继续使用织页
+              <ArrowRight size={15} />
+            </Link>
+            <div className={s.authSecondary}>
+              <button
+                type="button"
+                disabled={busy}
+                onClick={() => void action("logout")}
+              >
+                <LogOut size={12} /> 退出登录
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            {mode !== "resend" && (
+              <nav className={s.authTabs} aria-label="账户操作">
+                <button
+                  type="button"
+                  aria-pressed={mode === "login"}
+                  disabled={busy}
+                  onClick={() => switchMode("login")}
+                >
+                  登录
+                </button>
+                <button
+                  type="button"
+                  aria-pressed={mode === "register"}
+                  disabled={busy}
+                  onClick={() => switchMode("register")}
+                >
+                  创建账户
+                </button>
+              </nav>
+            )}
+            <form onSubmit={submit}>
+              <fieldset className={s.formFieldset} disabled={busy}>
+                <div className={s.formField}>
+                  <label htmlFor="account-email">邮箱地址</label>
+                  <input
+                    id="account-email"
+                    className={s.input}
+                    type="email"
+                    name="email"
+                    autoComplete="email"
+                    placeholder="you@example.com"
+                    required
+                    maxLength={254}
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                  />
+                </div>
+                <div className={s.formField}>
+                  <label htmlFor="account-password">密码</label>
+                  <div className={s.passwordField}>
+                    <input
+                      id="account-password"
+                      className={s.input}
+                      type={showPassword ? "text" : "password"}
+                      name="password"
+                      autoComplete={
+                        mode === "register"
+                          ? "new-password"
+                          : "current-password"
+                      }
+                      placeholder={
+                        mode === "register"
+                          ? "设置至少 12 个字符的密码"
+                          : "输入你的密码"
+                      }
+                      minLength={12}
+                      maxLength={256}
+                      required
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                    />
+                    <button
+                      type="button"
+                      aria-label={showPassword ? "隐藏密码" : "显示密码"}
+                      onClick={() => setShowPassword((value) => !value)}
+                    >
+                      {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                    </button>
+                  </div>
+                  {mode === "register" && (
+                    <small className={s.fieldHint}>
+                      建议使用包含字母、数字的长密码。
+                    </small>
+                  )}
+                </div>
+                <button className={s.primaryButton} type="submit">
+                  {busy
+                    ? "正在处理…"
+                    : mode === "login"
+                      ? "登录"
+                      : mode === "register"
+                        ? "创建账户"
+                        : "发送验证邮件"}
+                  {!busy && <ArrowRight size={15} />}
+                </button>
+              </fieldset>
+            </form>
+            <div className={s.authSecondary}>
+              {mode === "resend" ? (
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => switchMode("login")}
+                >
+                  返回登录
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => switchMode("resend")}
+                >
+                  没有收到验证邮件？重新发送
+                </button>
+              )}
+            </div>
+            <p className={s.authFootnote}>
+              注册后需要先验证邮箱。公开文档始终可以直接阅读。
+            </p>
+          </>
+        )}
+      </section>
+    </div>
+  );
 }

apps/waterfall-wiki/src/pages/api/documents/[[...path]].ts

@@ -1,27 +1,126 @@
-import { ZodError } from 'zod';
-import type { NextApiRequest,NextApiResponse } from 'next';
-import { currentAccount } from '@/lib/account';
-import { trustedOrigin } from '@/lib/account-crypto';
-import { documentInput,parseDocumentXml } from '@/lib/guidance-input';
-import { discoverDocuments,publishDocument,resolveDocument,withdrawDocument } from '@/lib/guidance-store';
-import { guidanceXml } from '@/content/guides/catalog';
-export default async function handler(req:NextApiRequest,res:NextApiResponse){
- res.setHeader('Cache-Control','no-store');const path=req.query.path||[];if(!Array.isArray(path)||path.length>1)return res.status(404).end();const id=path[0];
- try{
- if(req.method==='GET'){
- if(!id)return res.json({documents:await discoverDocuments()});
- const revision=req.query.revision;if(revision!==undefined&&(typeof revision!=='string'||! /^[1-9][0-9]{0,9}$/.test(revision)||Number(revision)>2147483647))return res.status(400).json({error:'版本无效'});
- const doc=await resolveDocument(id,revision===undefined?undefined:Number(revision));if(!doc)return res.status(404).json({error:'文档或精确版本不存在'});
- if(req.query.format==='xml'){res.setHeader('Content-Type','application/xml; charset=utf-8');return res.send(guidanceXml(doc));}return res.json({document:doc});}
- if(!['POST','DELETE'].includes(req.method||'')){res.setHeader('Allow','GET, POST, DELETE');return res.status(405).end();}
- const request=new Request(new URL(req.url||'/',process.env.ACCOUNT_PUBLIC_ORIGIN||'http://'+req.headers.host),{headers:new Headers(Object.entries(req.headers).filter(([,v])=>typeof v==='string') as [string,string][])});
- if(!trustedOrigin(request))return res.status(403).json({error:'请求来源不受信任'});
- const user=await currentAccount(request);if(!user)return res.status(401).json({error:'请先登录已验证邮箱账户'});
- if(req.method==='DELETE')return id&&await withdrawDocument(user.id,id)?res.json({ok:true}):res.status(404).json({error:'无权删除或不存在'});
- const input=typeof req.body==='string'?parseDocumentXml(req.body):documentInput.parse(req.body);
- if(id==='preview'){const links=await Promise.all(input.links.map(async l=>({...l,resolved:!!await resolveDocument(l.target,l.revision)})));return res.json({document:input,xml:guidanceXml(input),links});}
- if(id&&id!==input.id)return res.status(400).json({error:'文档 ID 不匹配'});
- return res.status(201).json({document:await publishDocument(user.id,input)});
- }catch(e){if(e instanceof ZodError)return res.status(400).json({error:'输入不符合协议，请检查以下字段',fields:e.issues.slice(0,12).map(i=>i.path.join('.')||'文档')});const message=e instanceof Error?e.message:'';if(message==='INVALID_ID')return res.status(400).json({error:'文档 ID 必须以 user-你的账户ID- 开头，请使用编辑器生成的前缀'});if(message==='FORBIDDEN')return res.status(403).json({error:'仅作者可编辑'});if(message==='CONFLICT'||(e as {code?:string}).code==='23505')return res.status(409).json({error:'版本冲突：请加载最新版本，已发布版本不可修改'});if(e instanceof Error&&(e.name==='ZodError'||/XML|实体|元素|属性|协议|链接/.test(message)))return res.status(400).json({error:'输入不符合协议'});return res.status(503).json({error:'文档服务暂不可用'});}
+import { ZodError } from "zod";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { currentAccount } from "@/lib/account";
+import { trustedOrigin } from "@/lib/account-crypto";
+import { documentInput, parseDocumentXml } from "@/lib/guidance-input";
+import {
+  discoverDocuments,
+  publishDocument,
+  resolveDocument,
+  withdrawDocument,
+} from "@/lib/guidance-store";
+import { guidanceXml } from "@/content/guides/catalog";
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  res.setHeader("Cache-Control", "no-store");
+  const path = req.query.path || [];
+  if (!Array.isArray(path) || path.length > 1) return res.status(404).end();
+  const id = path[0];
+  try {
+    if (req.method === "GET") {
+      if (!id) {
+        const author = req.query.author;
+        if (
+          author !== undefined &&
+          (typeof author !== "string" ||
+            !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(
+              author,
+            ))
+        )
+          return res.status(400).json({ error: "作者 ID 无效" });
+        return res.json({ documents: await discoverDocuments(author) });
+      }
+      const revision = req.query.revision;
+      if (
+        revision !== undefined &&
+        (typeof revision !== "string" ||
+          !/^[1-9][0-9]{0,9}$/.test(revision) ||
+          Number(revision) > 2147483647)
+      )
+        return res.status(400).json({ error: "版本无效" });
+      const doc = await resolveDocument(
+        id,
+        revision === undefined ? undefined : Number(revision),
+      );
+      if (!doc) return res.status(404).json({ error: "文档或精确版本不存在" });
+      if (req.query.format === "xml") {
+        res.setHeader("Content-Type", "application/xml; charset=utf-8");
+        return res.send(guidanceXml(doc));
+      }
+      return res.json({ document: doc });
+    }
+    if (!["POST", "DELETE"].includes(req.method || "")) {
+      res.setHeader("Allow", "GET, POST, DELETE");
+      return res.status(405).end();
+    }
+    const request = new Request(
+      new URL(
+        req.url || "/",
+        process.env.ACCOUNT_PUBLIC_ORIGIN || "http://" + req.headers.host,
+      ),
+      {
+        headers: new Headers(
+          Object.entries(req.headers).filter(
+            ([, v]) => typeof v === "string",
+          ) as [string, string][],
+        ),
+      },
+    );
+    if (!trustedOrigin(request))
+      return res.status(403).json({ error: "请求来源不受信任" });
+    const user = await currentAccount(request);
+    if (!user) return res.status(401).json({ error: "请先登录已验证邮箱账户" });
+    if (req.method === "DELETE")
+      return id && (await withdrawDocument(user.id, id))
+        ? res.json({ ok: true })
+        : res.status(404).json({ error: "无权删除或不存在" });
+    const input =
+      typeof req.body === "string"
+        ? parseDocumentXml(req.body)
+        : documentInput.parse(req.body);
+    if (id === "preview") {
+      const links = await Promise.all(
+        input.links.map(async (l) => ({
+          ...l,
+          resolved: !!(await resolveDocument(l.target, l.revision)),
+        })),
+      );
+      return res.json({ document: input, xml: guidanceXml(input), links });
+    }
+    if (id && id !== input.id)
+      return res.status(400).json({ error: "文档 ID 不匹配" });
+    return res
+      .status(201)
+      .json({ document: await publishDocument(user.id, input) });
+  } catch (e) {
+    if (e instanceof ZodError)
+      return res
+        .status(400)
+        .json({
+          error: "输入不符合协议，请检查以下字段",
+          fields: e.issues.slice(0, 12).map((i) => i.path.join(".") || "文档"),
+        });
+    const message = e instanceof Error ? e.message : "";
+    if (message === "INVALID_ID")
+      return res
+        .status(400)
+        .json({
+          error: "文档 ID 必须以 user-你的账户ID- 开头，请使用编辑器生成的前缀",
+        });
+    if (message === "FORBIDDEN")
+      return res.status(403).json({ error: "仅作者可编辑" });
+    if (message === "CONFLICT" || (e as { code?: string }).code === "23505")
+      return res
+        .status(409)
+        .json({ error: "版本冲突：请加载最新版本，已发布版本不可修改" });
+    if (
+      e instanceof Error &&
+      (e.name === "ZodError" || /XML|实体|元素|属性|协议|链接/.test(message))
+    )
+      return res.status(400).json({ error: "输入不符合协议" });
+    return res.status(503).json({ error: "文档服务暂不可用" });
+  }
 }
-export const config={api:{bodyParser:{sizeLimit:'128kb'}}};
+export const config = { api: { bodyParser: { sizeLimit: "128kb" } } };

apps/waterfall-wiki/src/pages/documents/[id].tsx

@@ -1,6 +1,61 @@
-import type { GetServerSideProps } from 'next';
-import type { Guidance } from '@/content/guides/catalog';
-import styles from '@/styles/documents.module.css';
-type Props={canEdit:boolean;versions:number[];doc:Guidance;links:(Guidance['links'][number]&{resolved:boolean})[]};
-export default function Read({doc,links,canEdit,versions}:Props){return <main className={styles.page}><nav><a href="/documents">用户文档</a> · <a href={canEdit?'/write?id='+doc.id:'/write'}>{canEdit?'编辑我的文档':'发布文档'}</a></nav><h1>{doc.title}</h1><p>{doc.kind} · {doc.id} · 固定版本 {doc.revision}</p><p>版本：{versions.map(v=><a key={v} href={'/documents/'+doc.id+'?revision='+v}> v{v} </a>)}</p><p>{doc.summary}</p><h2>适用条件</h2><p>{doc.applies}</p><p className={styles.body}>{doc.body}</p><ol>{doc.steps.map((s,i)=><li key={i}>{s}</li>)}</ol><h2>条件链接</h2>{links.map((l,i)=><article key={i}><p>条件：{l.when} · {l.relation}</p>{l.resolved?<a href={(l.target.startsWith('user-')?'/documents/':'/guide/')+l.target+'?revision='+l.revision}>{l.label} · v{l.revision}</a>:<p>{l.label}：精确版本缺失，请跳过</p>}</article>)}<h2>检查项</h2><ul>{doc.checks.map((s,i)=><li key={i}>{s}</li>)}</ul><a href={'/api/documents/'+doc.id+'?revision='+doc.revision+'&format=xml'}>读取规范 XML</a>{canEdit&&<p><button onClick={async()=>{if(!confirm('撤下后仍保留固定历史版本，确定撤下？'))return;const r=await fetch('/api/documents/'+doc.id,{method:'DELETE'});alert(r.ok?'已撤下，历史版本仍可访问':(await r.json()).error);}}>作者撤下文档</button></p>}</main>;}
-export const getServerSideProps:GetServerSideProps<Props>=async({params,query,res,req})=>{res.setHeader('Cache-Control','no-store');const revision=query.revision;if(revision!==undefined&&(typeof revision!=='string'||! /^[1-9][0-9]{0,9}$/.test(revision)||Number(revision)>2147483647))return {notFound:true};const {resolveDocument}=await import('@/lib/guidance-store');const doc=await resolveDocument(String(params?.id),revision===undefined?undefined:Number(revision));if(!doc)return {notFound:true};const links=await Promise.all(doc.links.map(async l=>({...l,resolved:!!await resolveDocument(l.target,l.revision)})));const {db}=await import('@/lib/db');const {currentAccount}=await import('@/lib/account');const user=await currentAccount(new Request('http://internal',{headers:{cookie:req.headers.cookie||''}}));const owner=await db().query('SELECT owner_id FROM guidance_documents WHERE id=$1',[doc.id]);const rows=await db().query('SELECT revision FROM guidance_revisions WHERE document_id=$1 ORDER BY revision DESC',[doc.id]);return {props:{doc,links,canEdit:!!user&&owner.rows[0]?.owner_id===user.id,versions:rows.rows.map(r=>r.revision)}};};
+import type { GetServerSideProps } from "next";
+import GuidanceReader, { type ReaderProps } from "@/components/GuidanceReader";
+export default function Read(props: ReaderProps) {
+  return <GuidanceReader {...props} />;
+}
+export const getServerSideProps: GetServerSideProps<ReaderProps> = async ({
+  params,
+  query,
+  res,
+  req,
+}) => {
+  res.setHeader("Cache-Control", "no-store");
+  const revision = query.revision;
+  if (
+    revision !== undefined &&
+    (typeof revision !== "string" ||
+      !/^[1-9][0-9]{0,9}$/.test(revision) ||
+      Number(revision) > 2147483647)
+  )
+    return { notFound: true };
+  const { resolveDocument } = await import("@/lib/guidance-store");
+  const document = await resolveDocument(
+    String(params?.id),
+    revision === undefined ? undefined : Number(revision),
+  );
+  if (!document) return { notFound: true };
+  const links = await Promise.all(
+    document.links.map(async (link) => ({
+      ...link,
+      resolved: !!(await resolveDocument(link.target, link.revision)),
+    })),
+  );
+  const { db } = await import("@/lib/db");
+  const { currentAccount } = await import("@/lib/account");
+  const user = await currentAccount(
+    new Request("http://internal", {
+      headers: { cookie: req.headers.cookie || "" },
+    }),
+  );
+  const owner = await db().query(
+    "SELECT owner_id,deleted_at FROM guidance_documents WHERE id=$1",
+    [document.id],
+  );
+  const rows = await db().query(
+    "SELECT revision,created_at FROM guidance_revisions WHERE document_id=$1 ORDER BY revision DESC",
+    [document.id],
+  );
+  return {
+    props: {
+      document,
+      source: "community",
+      links,
+      canEdit: !!user && owner.rows[0]?.owner_id === user.id,
+      withdrawn: !!owner.rows[0]?.deleted_at,
+      versions: rows.rows.map((r) => ({
+        revision: r.revision,
+        createdAt: new Date(r.created_at).toISOString(),
+      })),
+    },
+  };
+};

apps/waterfall-wiki/src/pages/documents/index.tsx

@@ -1,3 +1,4 @@
-import { useEffect,useState } from 'react';
-import styles from '@/styles/documents.module.css';
-export default function Documents(){const [docs,setDocs]=useState<{id:string;revision:number;title:string;summary:string;kind:string}[]>([]),[error,setError]=useState('');useEffect(()=>{fetch('/api/documents').then(async r=>{const b=await r.json();if(!r.ok)throw Error(b.error);setDocs(b.documents);}).catch(e=>setError(e.message));},[]);return <main className={styles.page}><nav><a href="/">首页</a> · <a href="/write">发布文档</a></nav><h1>用户发布的文档</h1><p>{error}</p>{docs.map(d=><article key={d.id}><h2><a href={'/documents/'+d.id+'?revision='+d.revision}>{d.title}</a></h2><p>{d.kind} · v{d.revision}</p><p>{d.summary}</p></article>)}</main>;}
+import DocumentDirectory from "@/components/DocumentDirectory";
+export default function Documents() {
+  return <DocumentDirectory communityOnly />;
+}

apps/waterfall-wiki/src/pages/guide/[id].tsx

@@ -1,9 +1,44 @@
-import type {GetServerSideProps} from 'next';
-import Head from 'next/head';
-import Link from 'next/link';
-import {useState} from 'react';
-import GuidanceShell from '@/components/GuidanceShell';
-import {findGuide,guides,guidanceXml,type Guidance} from '@/content/guides/catalog';
-import s from '@/styles/guidance.module.css';
-export default function Guide({guide:g,backlinks}:{guide:Guidance;backlinks:{id:string;title:string}[]}){const[xml,setXml]=useState(false);return <GuidanceShell><Head><title>{g.title} · 织页</title></Head><main className={s.detail}><p className={s.meta}><Link href="/">文档</Link> / protocol-examples / {g.id}</p><span className={s.eyebrow}>{g.kind.toUpperCase()} · REVISION {g.revision}</span><h1>{g.title}</h1><p>{g.summary}</p><div className={s.tabs}><button aria-pressed={!xml} onClick={()=>setXml(false)}>阅读</button><button aria-pressed={xml} onClick={()=>setXml(true)}>XML 源文档</button><a href={`/api/guides/${g.id}?revision=${g.revision}&format=xml`}>单篇机器接口 ↗</a></div><div className={s.detailGrid}><article className={s.prose}>{xml?<pre>{guidanceXml(g)}</pre>:<><h2>何时使用</h2><p>{g.applies}</p><h2>指导正文</h2><p>{g.body}</p><h2>建议步骤</h2><ol>{g.steps.map(t=><li key={t}>{t}</li>)}</ol><h2>完成检查</h2><ul>{g.checks.map(t=><li key={t}>{t}</li>)}</ul><h2>继续探索</h2>{g.links.map(l=><Link className={s.related} key={l.target} href={`/guide/${l.target}?revision=${l.revision}`}><strong>{l.label} ↗</strong><span>当{l.when} · {l.relation} · r{l.revision}</span></Link>)}{!g.links.length&&<p>这篇文档可独立使用，没有建议继续读取的链接。</p>}</>}</article><aside className={s.note}><h3>采用这篇文档</h3><p>把单篇机器接口交给 Agent。仅当链接条件适用时，再读取关联文档。</p><p>读取链接不授予执行权限。背景和依据不作为操作指令。</p><h3>被这些文档引用</h3>{backlinks.map(b=><p key={b.id}><Link href={`/guide/${b.id}`}>{b.title} ↗</Link></p>)}{!backlinks.length&&<p>暂时没有反向链接。</p>}</aside></div></main></GuidanceShell>}
-export const getServerSideProps:GetServerSideProps=async({params,query})=>{const r=query.revision;if(r!==undefined&&(typeof r!=='string'||!/^\d+$/.test(r)))return{notFound:true};const guide=findGuide(String(params?.id),r===undefined?undefined:Number(r));return guide?{props:{guide,backlinks:guides.filter(g=>g.links.some(l=>l.target===guide.id&&l.revision===guide.revision)).map(({id,title})=>({id,title}))}}:{notFound:true};};
+import type { GetServerSideProps } from "next";
+import GuidanceReader, { type ReaderProps } from "@/components/GuidanceReader";
+import { findGuide, guides } from "@/content/guides/catalog";
+export default function Guide(props: ReaderProps) {
+  return <GuidanceReader {...props} />;
+}
+export const getServerSideProps: GetServerSideProps<ReaderProps> = async ({
+  params,
+  query,
+}) => {
+  const r = query.revision;
+  if (r !== undefined && (typeof r !== "string" || !/^\d+$/.test(r)))
+    return { notFound: true };
+  const document = findGuide(
+    String(params?.id),
+    r === undefined ? undefined : Number(r),
+  );
+  if (!document) return { notFound: true };
+  return {
+    props: {
+      document,
+      source: "example",
+      versions: [{ revision: document.revision }],
+      links: document.links.map((link) => ({
+        ...link,
+        resolved: !!findGuide(link.target, link.revision),
+      })),
+      backlinks: guides
+        .filter((g) =>
+          g.links.some(
+            (link) =>
+              link.target === document.id &&
+              link.revision === document.revision,
+          ),
+        )
+        .map(({ id, title, revision }) => ({
+          id,
+          title,
+          revision,
+          source: "example",
+        })),
+    },
+  };
+};

apps/waterfall-wiki/src/pages/index.tsx

@@ -1,75 +1,4 @@
-import Head from 'next/head';
-import Link from 'next/link';
-import {useRouter} from 'next/router';
-import {useEffect,useState,type FormEvent} from 'react';
-import GuidanceShell from '@/components/GuidanceShell';
-import {guides} from '@/content/guides/catalog';
-import s from '@/styles/guidance.module.css';
-
-type PublishedDocument={id:string;revision:number;title:string;summary:string;kind:string};
-const categories=[['all','全部文档'],['guide','操作指导'],['context','背景知识'],['evidence','事实依据']];
-export default function Home(){
- const router=useRouter();
- const [published,setPublished]=useState<PublishedDocument[]>([]);
- const [loadError,setLoadError]=useState('');
- const [loading,setLoading]=useState(true);
- const [q,setQ]=useState('');
- const [kind,setKind]=useState('all');
- useEffect(()=>{
-  let active=true;
-  fetch('/api/documents').then(async r=>{
-   const b=await r.json();if(!r.ok)throw Error(b.error);
-   if(active)setPublished(b.documents);
-  }).catch(e=>{if(active)setLoadError(e.message);}).finally(()=>{if(active)setLoading(false);});
-  return()=>{active=false;};
- },[]);
- useEffect(()=>{
-  if(!router.isReady)return;
-  setQ(typeof router.query.q==='string'?router.query.q:'');
-  setKind(typeof router.query.kind==='string'&&categories.some(([key])=>key===router.query.kind)?router.query.kind:'all');
- },[router.isReady,router.query.q,router.query.kind]);
- function rememberFilters(query:string,category:string){
-  const next:{q?:string;kind?:string}={};
-  if(query)next.q=query;if(category!=='all')next.kind=category;
-  void router.push({pathname:'/',query:next},undefined,{shallow:true,scroll:false});
- }
- function search(e:FormEvent){e.preventDefault();rememberFilters(q,kind);}
- function chooseKind(value:string){setKind(value);rememberFilters(q,value);}
- function clearFilters(){setQ('');setKind('all');rememberFilters('','all');}
- const matches=(g:{title:string;summary:string;kind:string;tags?:string[]})=>(kind==='all'||g.kind===kind)&&`${g.title} ${g.summary} ${g.tags?.join(' ')||''}`.toLowerCase().includes(q.trim().toLowerCase());
- const items=guides.filter(matches),userItems=published.filter(matches);
- const total=items.length+userItems.length;
- return <GuidanceShell>
-  <Head><title>织页 · 为 Agent 找到下一页</title></Head>
-  <section className={s.hero}>
-   <span className={s.eyebrow}>A WEB OF USEFUL KNOWLEDGE</span>
-   <h1>一个起点，<br/>连接下一种可能。</h1>
-   <p>每一篇文档，都能独立帮助你的 Agent。<br/>从当前问题出发，沿着有用的链接继续探索。</p>
-   <form className={s.search} role="search" onSubmit={search}>
-    <span aria-hidden="true">⌕</span><input aria-label="搜索文档" placeholder="搜索文档、任务或一种想法…" value={q} onChange={e=>setQ(e.target.value)}/><button type="submit">搜索</button>
-   </form>
-   <div className={s.topics}>{['代码审查','规划','验证'].map(t=><button key={t} onClick={()=>{setQ(t);rememberFilters(t,kind);}}>{t} ↗</button>)}</div>
-  </section>
-  <main className={s.layout}>
-   <aside className={s.sidebar}>
-    <h2>文档目录</h2>
-    {categories.map(([key,label])=><button key={key} aria-pressed={kind===key} onClick={()=>chooseKind(key)}>{label}<span>{[...guides,...published].filter(g=>key==='all'||g.kind===key).length}</span></button>)}
-    <p>一个文档就是一个入口。<br/>集合是组织方式，<br/>无需整套安装。</p>
-   </aside>
-   <section aria-label="文档搜索结果">
-    <div className={s.sectionTitle}><p role="status">{loading?'正在加载用户文档…':loadError?`协议样例 ${items.length} 篇；用户文档加载失败`:`找到 ${total} 篇文档`}</p>{(q||kind!=='all')&&<button type="button" onClick={clearFilters}>清除所有筛选</button>}</div>
-    {loadError&&<p role="alert">用户文档暂未加载：{loadError}。下方仍可阅读协议样例。</p>}
-    {!loading&&!loadError&&total===0&&<p>没有匹配文档，请尝试其他关键词或清除筛选。</p>}
-    <div className={s.sectionTitle}><h2>用户发布 <small>{userItems.length} 篇</small></h2><Link href="/write">发布一篇文档 ↗</Link></div>
-    <div className={s.list}>{userItems.map(g=><article className={s.row} key={g.id}><div className={s.icon}>↗</div><div><div className={s.meta}>{g.id} · {g.kind} · v{g.revision}</div><h3><Link href={`/documents/${g.id}?revision=${g.revision}`}>{g.title}</Link></h3><p>{g.summary}</p></div></article>)}</div>
-    {!loading&&!loadError&&!published.length&&<p>还没有用户文档。你可以发布第一篇，或先阅读下方样例。</p>}
-    <div className={s.sectionTitle}><h2>从这里开始 <small>{items.length} 篇</small></h2><span>协议样例 · v0.1</span></div>
-    <div className={s.list}>{items.map(g=><article className={s.row} key={g.id}><div className={s.icon}>{g.kind==='guide'?'↗':'≋'}</div><div><div className={s.meta}>织页 / protocol-examples · r{g.revision}</div><h3><Link href={`/guide/${g.id}`}>{g.title}</Link></h3><p>{g.summary}</p><div className={s.tags}>{g.tags.map(t=><span key={t}>{t}</span>)}<span>↗ {g.links.length} 个关联</span></div></div></article>)}</div>
-   </section>
-   <aside className={s.right}>
-    <div className={s.manifest}><span className={s.eyebrow}>DOCUMENTS, CONNECTED.</span><h2>知识不必<br/>打包带走。</h2><p>读一页，解决眼前的问题。<br/>需要更多时，再打开下一页。</p><Link href="/protocol">了解文档协议 ↗</Link></div>
-    <div className={s.note}><h3>为两种 Agent 而写</h3><p>Coding agent 的工作方法，Personal agent 的日常指导，都可以从一篇文档开始。</p><h3>这是一个早期原型</h3><p>已验证邮箱用户可以发布独立文档，更新会创建不可变版本。下方协议样例与真实用户文档分别展示。</p></div>
-   </aside>
-  </main>
- </GuidanceShell>;
+import DocumentDirectory from "@/components/DocumentDirectory";
+export default function Home() {
+  return <DocumentDirectory />;
 }

apps/waterfall-wiki/src/pages/protocol.tsx

@@ -1,5 +1,202 @@
-import Head from 'next/head';
-import GuidanceShell from '@/components/GuidanceShell';
-import {guides,guidanceXml} from '@/content/guides/catalog';
-import s from '@/styles/guidance.module.css';
-export default function Protocol(){return <GuidanceShell><Head><title>Linked Guidance 0.1 · 织页</title></Head><main className={s.detail}><span className={s.eyebrow}>AN OPEN EXPERIMENT · 0.1</span><h1>让每一页，都能成为起点。</h1><p>Linked Guidance 协议草案 · 名称待定</p><article className={s.prose}><h2>从文档出发，按需连接</h2><p>每篇文档都有独立正文、适用条件和固定版本。集合只是整理方式，不要求整套安装。Agent 先阅读一篇，再判断链接是否有助于当前任务。</p><h2>从哪里开始</h2><p><a href="/agent/index.md">Agent 阅读入口 ↗</a> · <a href="/documents">真实用户文档 ↗</a> · <a href="/write">发布文档 ↗</a></p><h2>一个最小示例</h2><pre>{guidanceXml(guides[0])}</pre><h2>三种关系</h2><p>guide：可供采用的指导；context：背景知识；evidence：事实依据。背景和依据不会自动成为指令。</p><h2>读取约定</h2><ol><li>判断入口文档是否适合当前任务。</li><li>只跟随满足 when 条件且有帮助的链接。</li><li>按文档与版本去重；默认最多 8 篇、深度 3 层。</li><li>固定版本缺失不退回最新版；预算耗尽时报告不完整。</li></ol><h2>权限不沿链接传播</h2><p>文档不会改变用户授权或运行环境约束。0.1 仅引用本站文档 id，不自动请求任意外部 URL，不执行 XML 实体或脚本。</p><h2>协议状态</h2><p>这是待验证原型，并非现有 Agent 原生标准。当前提供单篇 XML 接口、已验证邮箱作者发布与固定版本历史。跨站发现与原生 Agent 适配仍待实现。</p><p>研究起点：<a href="https://gist.github.com/karpathy/442a6bf555914893e9891c11519de94f">Karpathy 的 LLM Wiki 原始提案 ↗</a>。XML 语法是本项目提出的设计。</p></article></main></GuidanceShell>}
+import Link from "next/link";
+import {
+  ArrowUpRight,
+  BookOpen,
+  Bot,
+  Braces,
+  GitBranch,
+  Link2,
+  ShieldCheck,
+  Target,
+} from "lucide-react";
+import GuidanceShell from "@/components/GuidanceShell";
+import { CopyButton, KindBadge, PageHeading } from "@/components/GuidanceUI";
+import { guides, guidanceXml } from "@/content/guides/catalog";
+import s from "@/styles/guidance.module.css";
+const sections = [
+  ["idea", "独立文档"],
+  ["start", "开始读取"],
+  ["syntax", "文档语法"],
+  ["relations", "三种关系"],
+  ["reading", "读取约定"],
+  ["permissions", "权限边界"],
+  ["status", "协议状态"],
+];
+export default function Protocol() {
+  const xml = guidanceXml(guides[0]);
+  return (
+    <GuidanceShell title="文档协议">
+      <PageHeading
+        title="从一篇文档，连接下一种可能。"
+        description="Linked Guidance 0.1 · 为独立指导文档设计的实验协议"
+        eyebrow="DOCUMENTATION"
+      >
+        <a
+          href="/agent/index.md"
+          target="_blank"
+          rel="noreferrer"
+          className={s.secondaryButton}
+        >
+          <Bot size={15} />
+          Agent 读取入口
+          <ArrowUpRight size={13} />
+        </a>
+      </PageHeading>
+      <div className={s.protocolLayout}>
+        <article className={`${s.panel} ${s.protocolArticle}`}>
+          <section id="idea" className={s.proseSection}>
+            <h2>
+              <BookOpen size={17} />
+              文档是起点，集合只是组织方式
+            </h2>
+            <p>
+              每篇文档都有完整正文、适用条件和固定版本。Coding agent 与 personal
+              agent
+              都可以从一篇文档开始；需要更多帮助时，再判断关联链接是否适合当前任务。无需把一整组文档一起安装或加载。
+            </p>
+          </section>
+          <section id="start" className={s.proseSection}>
+            <h2>
+              <Target size={17} />
+              从哪里开始
+            </h2>
+            <p>
+              先通过目录发现摘要，再读取一篇文档的固定版本。人的阅读界面与 Agent
+              的 XML 接口引用同一份内容。
+            </p>
+            <div className={s.buttonRow} style={{ marginTop: 16 }}>
+              <Link className={s.secondaryButton} href="/">
+                探索文档
+                <ArrowUpRight size={13} />
+              </Link>
+              <Link className={s.secondaryButton} href="/documents">
+                社区文档
+                <ArrowUpRight size={13} />
+              </Link>
+              <Link className={s.secondaryButton} href="/write">
+                发布文档
+                <ArrowUpRight size={13} />
+              </Link>
+            </div>
+            <code className={s.machineAddress}>/agent/index.md</code>
+            <CopyButton
+              label="复制 Agent 入口"
+              value={() => window.location.origin + "/agent/index.md"}
+            />
+          </section>
+          <section id="syntax" className={s.proseSection}>
+            <h2>
+              <Braces size={17} />
+              一份可独立读取的文档
+            </h2>
+            <p>
+              XML 描述文档本身，以及何时可能需要其他文档。固定 revision
+              保留精确引用；未知版本与缺失目标需要明确处理。
+            </p>
+            <pre className={s.codeBlock}>{xml}</pre>
+            <CopyButton label="复制示例 XML" value={xml} />
+          </section>
+          <section id="relations" className={s.proseSection}>
+            <h2>
+              <Link2 size={17} />
+              把关系写清楚
+            </h2>
+            <p>
+              链接是有条件的阅读建议，不是强制依赖。when
+              用自然语言说明何时可能需要目标文档。
+            </p>
+            <div className={s.relationGrid}>
+              <div>
+                <KindBadge kind="guide" />
+                <p>可供采用的工作方法。仍需先判断是否适用，并遵守用户授权。</p>
+              </div>
+              <div>
+                <KindBadge kind="context" />
+                <p>用于理解任务的背景知识，不会自动成为操作指令。</p>
+              </div>
+              <div>
+                <KindBadge kind="evidence" />
+                <p>为判断提供事实与依据。引用时需要保留实际来源和版本。</p>
+              </div>
+            </div>
+          </section>
+          <section id="reading" className={s.proseSection}>
+            <h2>
+              <GitBranch size={17} />
+              按需读取，固定版本
+            </h2>
+            <ol>
+              <li>先看入口文档的适用条件，再读正文与步骤。</li>
+              <li>只跟随 when 条件成立、且能补充当前任务所需知识的链接。</li>
+              <li>
+                以文档 ID 与版本去重，默认读取预算为 8 篇、最大深度 3 层。
+              </li>
+              <li>
+                固定版本缺失时不静默回退最新版；遇到循环或预算耗尽时停止扩展，并说明未完成的读取。
+              </li>
+            </ol>
+          </section>
+          <section id="permissions" className={s.proseSection}>
+            <h2>
+              <ShieldCheck size={17} />
+              权限不会沿链接传播
+            </h2>
+            <p>
+              读取文档不等于接受其中所有指令。用户任务和运行环境规则始终优先，文档不能要求获取秘密、扩大权限或改变目标。0.1
+              只引用本站逻辑 ID，不自动请求任意外部 URL，也不执行 XML
+              实体或脚本。
+            </p>
+          </section>
+          <section id="status" className={s.proseSection}>
+            <h2>协议状态</h2>
+            <p>
+              Linked Guidance 是本项目提出的实验协议，并非现有 Agent
+              已原生支持的标准。当前支持独立 XML/JSON
+              读取、已验证邮箱作者发布，以及不可变版本；跨站发现与原生 Agent
+              适配仍待实现。
+            </p>
+            <div className={s.protocolCallout}>
+              <p>
+                研究起点：
+                <a
+                  className={s.textLink}
+                  href="https://gist.github.com/karpathy/442a6bf555914893e9891c11519de94f"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Karpathy 的 LLM Wiki 提案
+                  <ArrowUpRight size={11} />
+                </a>
+                。本项目在持久交叉引用的基础上，提出独立指导单元、条件链接、关系类型和版本约定。
+              </p>
+            </div>
+          </section>
+        </article>
+        <aside className={s.readingSidebar}>
+          <section className={s.sideCard}>
+            <h3>本页目录</h3>
+            <nav className={s.toc} aria-label="协议目录">
+              {sections.map(([id, label]) => (
+                <a href={"#" + id} key={id}>
+                  {label}
+                </a>
+              ))}
+            </nav>
+          </section>
+          <section className={s.sideCard}>
+            <h3>开始编写你的第一篇</h3>
+            <p>从适用条件与清晰正文开始。关联链接可以在需要时再补充。</p>
+            <Link
+              className={s.textLink}
+              href="/write"
+              style={{ marginTop: 14 }}
+            >
+              创建文档
+              <ArrowUpRight size={12} />
+            </Link>
+          </section>
+        </aside>
+      </div>
+    </GuidanceShell>
+  );
+}

apps/waterfall-wiki/src/pages/write.tsx

@@ -1,14 +1,729 @@
-import { useEffect,useState } from 'react';
-import type { Guidance } from '@/content/guides/catalog';
-import styles from '@/styles/documents.module.css';
-const blank:Guidance={id:'user-',revision:1,kind:'guide',title:'',summary:'',applies:'',body:'',steps:[],checks:[],links:[],tags:[]};
-export default function Write(){
- const [busy,setBusy]=useState(false),[published,setPublished]=useState<{id:string;revision:number}|null>(null);
- const [doc,setDoc]=useState(blank),[xml,setXml]=useState(''),[mode,setMode]=useState(false),[message,setMessage]=useState(''),[preview,setPreview]=useState<{document:Guidance;xml:string;links:{label:string;when:string;resolved:boolean}[]}|null>(null);
- useEffect(()=>{setPreview(null);},[doc,xml,mode]);
- useEffect(()=>{fetch('/api/account/session').then(r=>r.json()).then(b=>{if(b.user){const id=new URLSearchParams(window.location.search).get('id');if(id)fetch('/api/documents/'+encodeURIComponent(id)).then(responseBody).then(b=>setDoc({...b.document,revision:b.document.revision+1})).catch(e=>setMessage(e.message));else setDoc(d=>({...d,id:'user-'+b.user.id+'-'}));}else setMessage('请先登录并验证邮箱，再发布文档。');}).catch(()=>setMessage('账户服务暂不可用，请稍后重试。'));},[]);
- async function responseBody(r:Response){const b=await r.json().catch(()=>({error:'服务返回异常，请稍后重试'}));if(!r.ok)throw Error((b.error||'请求失败')+(b.fields?.length?'：'+b.fields.join('、'):''));return b;}
- async function load(){setBusy(true);setPreview(null);try{const b=await responseBody(await fetch('/api/documents/'+encodeURIComponent(doc.id)));setDoc({...b.document,revision:b.document.revision+1});setMessage('已加载，保存将创建新版本');}catch(e){setMessage(e instanceof Error?e.message:'加载失败');}finally{setBusy(false);}}
- async function submit(action:string){setBusy(true);setMessage('处理中…');setPreview(null);setPublished(null);try{const b=await responseBody(await fetch('/api/documents'+(action==='preview'?'/preview':''),{method:'POST',headers:{'Content-Type':mode?'application/xml':'application/json'},body:mode?xml:JSON.stringify(doc)}));if(action==='preview'){setPreview(b);setMessage('预览成功，尚未发布');}else{setDoc({...b.document,revision:b.document.revision+1});setPublished({id:b.document.id,revision:b.document.revision});if(mode)setXml(xml.replace(/revision="[1-9][0-9]*"/,`revision="${b.document.revision+1}"`));setMessage('已发布版本 '+b.document.revision);}}catch(e){setMessage(e instanceof Error?e.message:'请求失败，请稍后重试');}finally{setBusy(false);}}
- return <main className={styles.page}><nav><a href="/">首页</a> · <a href="/documents">用户文档</a> · <a href="/account">邮箱账户</a></nav><h1>发布独立文档</h1><p>需要已验证邮箱。每次发布创建不可变版本；只有原作者可以更新或撤下。</p><fieldset disabled={busy}><label><input type="checkbox" checked={mode} onChange={e=>{setMode(e.target.checked);setPreview(null);}}/> 使用协议 XML（zh-CN）</label>{mode?<label>XML 输入<textarea rows={22} value={xml} onChange={e=>{setXml(e.target.value);setPreview(null);}}/></label>:<><label>文档 ID（保留账户前缀，在末尾填写短名）<input value={doc.id} onChange={e=>setDoc({...doc,id:e.target.value})}/></label><button disabled={busy} onClick={load}>加载最新版本以编辑</button><label>待发布版本<input type="number" min={1} value={doc.revision} onChange={e=>setDoc({...doc,revision:Number(e.target.value)})}/></label><label>种类<select value={doc.kind} onChange={e=>setDoc({...doc,kind:e.target.value as Guidance['kind']})}><option>guide</option><option>context</option><option>evidence</option></select></label>{(['title','summary','applies','body'] as const).map(k=><label key={k}>{{title:'标题',summary:'摘要',applies:'适用条件',body:'正文'}[k]}<textarea value={doc[k]} onChange={e=>{setDoc({...doc,[k]:e.target.value});setPreview(null);}}/></label>)}{(['steps','checks'] as const).map(k=><label key={k}>{k==='steps'?'步骤':'检查项'}（每行一项）<textarea value={doc[k].join('\n')} onChange={e=>setDoc({...doc,[k]:e.target.value.split('\n').filter(Boolean)})}/></label>)}<h2>条件链接</h2>{doc.links.map((l,i)=><fieldset key={i}>{(['target','revision','relation','when','label'] as const).map(k=><label key={k}>{k}<input value={l[k]} onChange={e=>setDoc({...doc,links:doc.links.map((v,j)=>j===i?{...v,[k]:k==='revision'?Number(e.target.value):e.target.value}:v)})}/></label>)}<button onClick={()=>setDoc({...doc,links:doc.links.filter((_,j)=>j!==i)})}>移除链接</button></fieldset>)}<button onClick={()=>setDoc({...doc,links:[...doc.links,{target:'',revision:1,relation:'context',when:'',label:''}]})}>添加精确版本链接</button></>}<p><button disabled={busy} onClick={()=>submit('preview')}>校验并预览</button> <button disabled={busy} onClick={()=>submit('publish')}>发布新版本</button></p></fieldset><p role="status">{message}</p>{published&&<p><a href={'/documents/'+published.id+'?revision='+published.revision}>打开已发布文档 v{published.revision} ↗</a></p>}{preview&&<article><h2>{preview.document.title}</h2><p>{preview.document.summary}</p><p>适用：{preview.document.applies}</p><p className={styles.body}>{preview.document.body}</p>{preview.document.steps.map((s,i)=><p key={i}>{i+1}. {s}</p>)}{preview.links.map((l,i)=><p key={i}>{l.label} · 条件：{l.when} · {l.resolved?'精确版本可用':'目标缺失，读取时需跳过'}</p>)}<pre>{preview.xml}</pre></article>}</main>;
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useRef, useState } from "react";
+import {
+  ArrowUpRight,
+  Braces,
+  CheckCircle2,
+  FileText,
+  Globe2,
+  Link2,
+  ListChecks,
+  Plus,
+  ShieldCheck,
+  Trash2,
+} from "lucide-react";
+import GuidanceShell, { useGuidanceAccount } from "@/components/GuidanceShell";
+import {
+  EmptyState,
+  KindBadge,
+  Notice,
+  PageHeading,
+  kindNames,
+} from "@/components/GuidanceUI";
+import { guidanceXml, type Guidance } from "@/content/guides/catalog";
+import s from "@/styles/guidance.module.css";
+const blank: Guidance = {
+  id: "",
+  revision: 1,
+  kind: "guide",
+  title: "",
+  summary: "",
+  applies: "",
+  body: "",
+  steps: [],
+  checks: [],
+  links: [],
+  tags: [],
+};
+type Preview = {
+  document: Guidance;
+  xml: string;
+  links: { label: string; when: string; resolved: boolean }[];
+};
+function fieldName(path: string) {
+  const labels: Record<string, string> = {
+    id: "文档短名",
+    revision: "版本",
+    kind: "文档类型",
+    title: "标题",
+    summary: "一句话摘要",
+    applies: "适用条件",
+    body: "正文",
+    steps: "建议步骤",
+    checks: "完成检查",
+    tags: "标签",
+    target: "目标文档 ID",
+    relation: "关系类型",
+    when: "读取条件",
+    label: "链接标题",
+  };
+  const [group, index, field] = path.split(".");
+  if (group === "links")
+    return (
+      "关联文档" +
+      (index === undefined ? "" : " " + (Number(index) + 1)) +
+      (field ? " · " + (labels[field] || "内容") : "")
+    );
+  return (
+    (labels[group] || "文档内容") +
+    (index !== undefined ? " " + (Number(index) + 1) : "")
+  );
+}
+async function responseBody(response: Response) {
+  const body = await response
+    .json()
+    .catch(() => ({ error: "服务返回异常，请稍后重试" }));
+  if (!response.ok)
+    throw Error(
+      (body.error || "请求失败") +
+        (body.fields?.length
+          ? "：" + body.fields.map(fieldName).join("、")
+          : ""),
+    );
+  return body;
+}
+export default function Write() {
+  return (
+    <GuidanceShell title="发布文档">
+      <Editor />
+    </GuidanceShell>
+  );
+}
+function Editor() {
+  const account = useGuidanceAccount(),
+    router = useRouter(),
+    dialog = useRef<HTMLDialogElement>(null);
+  const [doc, setDoc] = useState<Guidance>(blank),
+    [xml, setXml] = useState(""),
+    [mode, setMode] = useState<"form" | "xml">("form"),
+    [busy, setBusy] = useState(false),
+    [loading, setLoading] = useState(false),
+    [error, setError] = useState(""),
+    [preview, setPreview] = useState<Preview | null>(null),
+    [published, setPublished] = useState<{
+      id: string;
+      revision: number;
+    } | null>(null),
+    [dirty, setDirty] = useState(true);
+  const prefix = account.user ? "user-" + account.user.id + "-" : "",
+    editId = typeof router.query.id === "string" ? router.query.id : "";
+  useEffect(() => {
+    if (!router.isReady || !account.user) return;
+    let active = true;
+    setError("");
+    setPublished(null);
+    setPreview(null);
+    setMode("form");
+    setDirty(true);
+    if (!editId) {
+      setDoc({
+        ...blank,
+        id:
+          "user-" +
+          account.user.id +
+          "-document-" +
+          Math.random().toString(16).slice(2, 8),
+      });
+      setLoading(false);
+      return;
+    }
+    if (!editId.startsWith("user-" + account.user.id + "-")) {
+      setError("只能编辑你自己发布的文档。");
+      setDoc(blank);
+      return;
+    }
+    setLoading(true);
+    fetch("/api/documents/" + encodeURIComponent(editId))
+      .then(responseBody)
+      .then((body) => {
+        if (active)
+          setDoc({ ...body.document, revision: body.document.revision + 1 });
+      })
+      .catch((e) => {
+        if (active) {
+          setError(e.message);
+          setDoc(blank);
+        }
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [account.user?.id, editId, router.isReady]);
+  function change<K extends keyof Guidance>(key: K, value: Guidance[K]) {
+    setDoc((current) => ({ ...current, [key]: value }));
+    setPreview(null);
+    setDirty(true);
+    setPublished(null);
+  }
+  async function request(action: "preview" | "publish" | "convert") {
+    setBusy(true);
+    setError("");
+    setPreview(null);
+    try {
+      const body = await responseBody(
+        await fetch(
+          "/api/documents" + (action === "publish" ? "" : "/preview"),
+          {
+            method: "POST",
+            headers: {
+              "Content-Type":
+                mode === "xml" ? "application/xml" : "application/json",
+            },
+            body: mode === "xml" ? xml : JSON.stringify(normalized()),
+          },
+        ),
+      );
+      if (action === "convert") {
+        setDoc(body.document);
+        setMode("form");
+      } else if (action === "preview") {
+        setPreview(body);
+        dialog.current?.showModal();
+      } else {
+        setDoc({ ...body.document, revision: body.document.revision + 1 });
+        setXml(
+          guidanceXml({
+            ...body.document,
+            revision: body.document.revision + 1,
+          }),
+        );
+        setPublished({
+          id: body.document.id,
+          revision: body.document.revision,
+        });
+        setDirty(false);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "请求失败，请稍后重试");
+    } finally {
+      setBusy(false);
+    }
+  }
+  function normalized() {
+    return {
+      ...doc,
+      steps: doc.steps.filter((step) => step.trim()),
+      checks: doc.checks.filter((check) => check.trim()),
+      tags: doc.tags.filter((tag) => tag.trim()),
+    };
+  }
+  function selectXml() {
+    setXml(guidanceXml(normalized()));
+    setMode("xml");
+    setPreview(null);
+  }
+  const authorized = account.user?.verified_at;
+  return (
+    <>
+      <PageHeading
+        title="发布独立文档"
+        description="一篇文档，一项清晰的指导。按需关联，让 Agent 自由选择。"
+        eyebrow={editId ? "UPDATE DOCUMENT" : "NEW DOCUMENT"}
+      />
+      {account.loading ? (
+        <div className={s.accountLoading}>正在读取账户…</div>
+      ) : !authorized ? (
+        <section className={`${s.panel} ${s.publishGate}`}>
+          <EmptyState
+            title={account.user ? "验证邮箱后继续" : "登录后开始编写"}
+            description={
+              account.error ||
+              "公开阅读无需登录。发布和维护文档，需要一个已验证的邮箱账户。"
+            }
+          >
+            <Link className={s.primaryButton} href="/account?next=%2Fwrite">
+              <ShieldCheck size={15} />
+              {account.user ? "前往验证邮箱" : "登录 / 创建账户"}
+            </Link>
+          </EmptyState>
+        </section>
+      ) : (
+        <>
+          {error && <Notice tone="error">{error}</Notice>}
+          {published && (
+            <Notice tone="success">
+              版本 v{published.revision} 已公开发布。
+              <div className={s.successActions}>
+                <Link
+                  href={
+                    "/documents/" +
+                    published.id +
+                    "?revision=" +
+                    published.revision
+                  }
+                >
+                  查看已发布版本
+                  <ArrowUpRight size={12} />
+                </Link>
+                <Link href="/documents?scope=mine">查看我的文档</Link>
+              </div>
+            </Notice>
+          )}
+          {loading ? (
+            <div className={s.accountLoading}>正在加载最新版本…</div>
+          ) : (
+            doc.id && (
+              <fieldset className={s.formFieldset} disabled={busy}>
+                <div className={s.editorTabs} aria-label="编辑方式">
+                  <button
+                    type="button"
+                    aria-pressed={mode === "form"}
+                    onClick={() => {
+                      if (mode === "xml") void request("convert");
+                    }}
+                  >
+                    可视化编辑
+                  </button>
+                  <button
+                    type="button"
+                    aria-pressed={mode === "xml"}
+                    onClick={() => {
+                      if (mode === "form") selectXml();
+                    }}
+                  >
+                    协议 XML
+                  </button>
+                </div>
+                <div className={s.formGrid}>
+                  <div className={s.formSections}>
+                    {mode === "xml" ? (
+                      <section className={`${s.panel} ${s.formPanel}`}>
+                        <h2 className={s.formSectionTitle}>
+                          <Braces size={17} />
+                          协议源文档
+                        </h2>
+                        <p className={s.formDescription}>
+                          可直接粘贴完整
+                          XML。切回可视化编辑时，会先校验并解析当前内容；校验失败时保留输入。
+                        </p>
+                        <label className={s.formField}>
+                          <span className={s.fieldLabel}>XML 输入</span>
+                          <textarea
+                            className={`${s.textarea} ${s.xmlInput}`}
+                            spellCheck={false}
+                            value={xml}
+                            onChange={(e) => {
+                              setXml(e.target.value);
+                              setDirty(true);
+                              setPreview(null);
+                              setPublished(null);
+                            }}
+                          />
+                        </label>
+                      </section>
+                    ) : (
+                      <>
+                        <section className={`${s.panel} ${s.formPanel}`}>
+                          <h2 className={s.formSectionTitle}>
+                            <FileText size={17} />
+                            基本信息
+                          </h2>
+                          <p className={s.formDescription}>
+                            帮助读者和 Agent 判断，这篇文档是否适合当前任务。
+                          </p>
+                          <div className={s.fieldColumns}>
+                            <label className={s.formField}>
+                              <span className={s.fieldLabel}>文档短名</span>
+                              <input
+                                className={s.input}
+                                aria-label="文档短名"
+                                maxLength={37}
+                                pattern="[a-z0-9-]+"
+                                value={doc.id.slice(prefix.length)}
+                                disabled={!!editId || doc.revision > 1}
+                                onChange={(e) =>
+                                  change("id", prefix + e.target.value)
+                                }
+                              />
+                              <small className={s.fieldHint}>
+                                小写字母、数字和连字符。发布后不可修改。
+                              </small>
+                            </label>
+                            <label className={s.formField}>
+                              <span className={s.fieldLabel}>文档类型</span>
+                              <select
+                                className={s.select}
+                                value={doc.kind}
+                                onChange={(e) =>
+                                  change(
+                                    "kind",
+                                    e.target.value as Guidance["kind"],
+                                  )
+                                }
+                              >
+                                {Object.entries(kindNames).map(
+                                  ([id, label]) => (
+                                    <option value={id} key={id}>
+                                      {label}
+                                    </option>
+                                  ),
+                                )}
+                              </select>
+                            </label>
+                          </div>
+                          {(["title", "summary", "applies"] as const).map(
+                            (key) => (
+                              <label className={s.formField} key={key}>
+                                <span className={s.fieldLabel}>
+                                  {
+                                    {
+                                      title: "标题",
+                                      summary: "一句话摘要",
+                                      applies: "适用条件",
+                                    }[key]
+                                  }
+                                  <span className={s.required}>*</span>
+                                </span>
+                                {key === "title" ? (
+                                  <input
+                                    className={s.input}
+                                    value={doc[key]}
+                                    placeholder="例如：审查一次代码改动"
+                                    onChange={(e) =>
+                                      change(key, e.target.value)
+                                    }
+                                  />
+                                ) : (
+                                  <textarea
+                                    className={s.textarea}
+                                    rows={2}
+                                    value={doc[key]}
+                                    placeholder={
+                                      key === "summary"
+                                        ? "这篇文档可以帮助完成什么？"
+                                        : "什么情况下应该阅读？哪些情况不适用？"
+                                    }
+                                    onChange={(e) =>
+                                      change(key, e.target.value)
+                                    }
+                                  />
+                                )}
+                              </label>
+                            ),
+                          )}
+                          <label className={s.formField}>
+                            <span className={s.fieldLabel}>标签</span>
+                            <input
+                              className={s.input}
+                              value={doc.tags.join(", ")}
+                              placeholder="代码审查, 开发协作"
+                              onChange={(e) =>
+                                change(
+                                  "tags",
+                                  e.target.value
+                                    .split(/[,，]/)
+                                    .map((tag) => tag.trim()),
+                                )
+                              }
+                            />
+                            <small className={s.fieldHint}>
+                              使用逗号分隔。
+                            </small>
+                          </label>
+                        </section>
+                        <section className={`${s.panel} ${s.formPanel}`}>
+                          <h2 className={s.formSectionTitle}>
+                            <ListChecks size={17} />
+                            指导内容
+                          </h2>
+                          <p className={s.formDescription}>
+                            正文应当完整、可独立理解。步骤和检查项可以留空。
+                          </p>
+                          <label className={s.formField}>
+                            <span className={s.fieldLabel}>
+                              正文<span className={s.required}>*</span>
+                            </span>
+                            <textarea
+                              className={`${s.textarea} ${s.bodyInput}`}
+                              value={doc.body}
+                              placeholder="写下清晰、具体的指导…"
+                              onChange={(e) => change("body", e.target.value)}
+                            />
+                          </label>
+                          {(["steps", "checks"] as const).map((key) => (
+                            <label className={s.formField} key={key}>
+                              <span className={s.fieldLabel}>
+                                {key === "steps" ? "建议步骤" : "完成检查"}
+                              </span>
+                              <textarea
+                                className={s.textarea}
+                                aria-label={
+                                  key === "steps" ? "建议步骤" : "完成检查"
+                                }
+                                rows={3}
+                                value={doc[key].join("\n")}
+                                onChange={(e) =>
+                                  change(key, e.target.value.split("\n"))
+                                }
+                              />
+                              <small className={s.fieldHint}>
+                                每行一项，空行会在提交时忽略。
+                              </small>
+                            </label>
+                          ))}
+                        </section>
+                        <section className={`${s.panel} ${s.formPanel}`}>
+                          <h2 className={s.formSectionTitle}>
+                            <Link2 size={17} />
+                            条件链接
+                            <span className={s.neutralBadge}>
+                              {doc.links.length}
+                            </span>
+                          </h2>
+                          <p className={s.formDescription}>
+                            仅当条件适用时，才建议读取关联文档。请指定固定版本；无需链接也可以独立发布。
+                          </p>
+                          {!doc.links.length && (
+                            <div className={s.linkEmpty}>
+                              还没有关联文档。你可以先完成正文，再为需要的场景补充链接。
+                            </div>
+                          )}
+                          {doc.links.map((link, index) => (
+                            <div className={s.linkEditor} key={index}>
+                              <div className={s.linkEditorHeader}>
+                                关联文档 {index + 1}
+                                <button
+                                  type="button"
+                                  className={s.quietButton}
+                                  aria-label={"移除关联文档 " + (index + 1)}
+                                  onClick={() =>
+                                    change(
+                                      "links",
+                                      doc.links.filter((_, i) => i !== index),
+                                    )
+                                  }
+                                >
+                                  <Trash2 size={13} />
+                                  移除
+                                </button>
+                              </div>
+                              <div className={s.fieldColumns}>
+                                {(
+                                  [
+                                    "target",
+                                    "revision",
+                                    "relation",
+                                    "label",
+                                    "when",
+                                  ] as const
+                                ).map((key) => (
+                                  <label className={s.formField} key={key}>
+                                    <span className={s.fieldLabel}>
+                                      {
+                                        {
+                                          target: "目标文档 ID",
+                                          revision: "固定版本",
+                                          relation: "关系类型",
+                                          label: "链接标题",
+                                          when: "什么情况下读取",
+                                        }[key]
+                                      }
+                                    </span>
+                                    {key === "relation" ? (
+                                      <select
+                                        className={s.select}
+                                        value={link.relation}
+                                        onChange={(e) =>
+                                          change(
+                                            "links",
+                                            doc.links.map((item, i) =>
+                                              i === index
+                                                ? {
+                                                    ...item,
+                                                    relation: e.target
+                                                      .value as Guidance["kind"],
+                                                  }
+                                                : item,
+                                            ),
+                                          )
+                                        }
+                                      >
+                                        {Object.entries(kindNames).map(
+                                          ([id, label]) => (
+                                            <option value={id} key={id}>
+                                              {label}
+                                            </option>
+                                          ),
+                                        )}
+                                      </select>
+                                    ) : (
+                                      <input
+                                        className={s.input}
+                                        type={
+                                          key === "revision" ? "number" : "text"
+                                        }
+                                        min={key === "revision" ? 1 : undefined}
+                                        value={link[key]}
+                                        onChange={(e) =>
+                                          change(
+                                            "links",
+                                            doc.links.map((item, i) =>
+                                              i === index
+                                                ? {
+                                                    ...item,
+                                                    [key]:
+                                                      key === "revision"
+                                                        ? Number(e.target.value)
+                                                        : e.target.value,
+                                                  }
+                                                : item,
+                                            ),
+                                          )
+                                        }
+                                      />
+                                    )}
+                                  </label>
+                                ))}
+                              </div>
+                            </div>
+                          ))}
+                          <button
+                            type="button"
+                            className={s.secondaryButton}
+                            onClick={() =>
+                              change("links", [
+                                ...doc.links,
+                                {
+                                  target: "",
+                                  revision: 1,
+                                  relation: "context",
+                                  when: "",
+                                  label: "",
+                                },
+                              ])
+                            }
+                          >
+                            <Plus size={14} />
+                            添加条件链接
+                          </button>
+                        </section>
+                      </>
+                    )}
+                  </div>
+                  <aside className={s.publishSidebar}>
+                    <section className={s.sideCard}>
+                      <h3>
+                        <Globe2 size={15} />
+                        发布设置
+                      </h3>
+                      <div className={s.publishMeta}>
+                        公开文档 · 待发布版本 v{doc.revision}
+                      </div>
+                      <KindBadge kind={doc.kind} />
+                      <ul className={s.publishChecklist}>
+                        <li className={s.completed}>
+                          <CheckCircle2 size={14} />
+                          邮箱已验证
+                        </li>
+                        <li>
+                          <CheckCircle2 size={14} />
+                          发布后任何人均可读取
+                        </li>
+                        <li>
+                          <CheckCircle2 size={14} />
+                          每次发布创建不可变版本
+                        </li>
+                      </ul>
+                      <p>内容暂存在当前页面，请在离开前发布或自行保存 XML。</p>
+                      <div className={s.publishButtons}>
+                        <button
+                          type="button"
+                          className={s.secondaryButton}
+                          onClick={() => void request("preview")}
+                        >
+                          校验并预览
+                        </button>
+                        <button
+                          type="button"
+                          className={s.primaryButton}
+                          disabled={!dirty}
+                          onClick={() => void request("publish")}
+                        >
+                          {busy
+                            ? "正在处理…"
+                            : doc.revision === 1
+                              ? "发布文档"
+                              : "发布新版本"}
+                        </button>
+                      </div>
+                    </section>
+                    <section className={s.sideCard}>
+                      <h3>独立使用，按需连接</h3>
+                      <p>
+                        关系类型和适用条件帮助 Agent
+                        选择下一篇文档。链接不会继承账户权限，也不要求整组加载。
+                      </p>
+                      <Link className={s.textLink} href="/protocol">
+                        阅读协议说明
+                        <ArrowUpRight size={12} />
+                      </Link>
+                    </section>
+                  </aside>
+                </div>
+              </fieldset>
+            )
+          )}
+        </>
+      )}
+      <dialog
+        className={`${s.modal} ${s.largeModal}`}
+        ref={dialog}
+        aria-labelledby="preview-title"
+      >
+        <div className={s.modalBody}>
+          <h2 id="preview-title">发布预览</h2>
+          <p>校验已通过，内容尚未发布。请确认正文和关联条件。</p>
+        </div>
+        {preview && (
+          <div className={s.previewBody}>
+            <KindBadge kind={preview.document.kind} />
+            <h2 className={s.previewTitle}>{preview.document.title}</h2>
+            <p className={s.formDescription}>{preview.document.summary}</p>
+            <div className={s.appliesCard}>
+              <p>{preview.document.applies}</p>
+            </div>
+            <div className={s.proseBody}>{preview.document.body}</div>
+            {preview.document.steps.length > 0 && (
+              <ol className={s.stepList}>
+                {preview.document.steps.map((step, i) => (
+                  <li key={i}>{step}</li>
+                ))}
+              </ol>
+            )}
+            {preview.document.checks.length > 0 && (
+              <ul className={s.checkList}>
+                {preview.document.checks.map((check, i) => (
+                  <li key={i}>{check}</li>
+                ))}
+              </ul>
+            )}
+            {preview.links.map((link, i) => (
+              <div className={s.relationCard} key={i}>
+                <div>
+                  <strong>{link.label}</strong>
+                  <p>当{link.when}</p>
+                  <small>
+                    {link.resolved ? "固定版本可用" : "目标缺失，读取时需跳过"}
+                  </small>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className={s.modalActions}>
+          <button
+            type="button"
+            className={s.secondaryButton}
+            onClick={() => dialog.current?.close()}
+          >
+            返回编辑
+          </button>
+        </div>
+      </dialog>
+    </>
+  );
 }

apps/waterfall-wiki/tests/guidance-integration.ts

@@ -27,6 +27,7 @@ export async function verifyGuidancePublishing(base:string){
  const created=await request('','POST',guidanceXml(httpDoc),{'Content-Type':'application/xml'});assert.equal(created.status,201,await created.clone().text());
  assert.equal((await request('','POST',httpDoc)).status,409);
  assert.equal((await request('','POST',{...httpDoc,id:'user-'+other+'-http'})).status,400);
+ const own=await fetch(base+'/api/documents?author='+owner).then(r=>r.json());assert.ok(own.documents.some((d:{id:string})=>d.id===httpDoc.id));assert.ok(own.documents.every((d:{author:string})=>d.author===owner));assert.equal((await fetch(base+'/api/documents?author=invalid')).status,400);
  const xml=await fetch(base+'/api/documents/'+httpDoc.id+'?revision=1&format=xml');assert.equal(xml.status,200);assert.match(await xml.text(),/<tag>往返标签<\/tag>/);
  const page=await fetch(base+'/documents/'+httpDoc.id+'?revision=1');assert.equal(page.status,200);assert.ok((await page.text()).includes('实际数据库文档'));
  // The homepage and discovery list hydrate from the real API, so verify them in Chromium on the CI runner.
@@ -35,7 +36,7 @@ export async function verifyGuidancePublishing(base:string){
   const page=await browser.newPage();
   const link=`a[href="/documents/${httpDoc.id}?revision=1"]`;
   await page.goto(base+'/',{waitUntil:'domcontentloaded'});
-  await page.locator(link).waitFor({state:'visible'});assert.equal(await page.locator(link).textContent(),httpDoc.title);
+  await page.locator(link).waitFor({state:'visible'});assert.equal(await page.locator(link).getByRole('heading').textContent(),httpDoc.title);
   // Published matches must not inherit the examples' empty state; submitted filters survive reload.
   const search=page.getByRole('textbox',{name:'搜索文档'});
   await search.fill(httpDoc.title);await search.press('Enter');
@@ -45,14 +46,14 @@ export async function verifyGuidancePublishing(base:string){
   await page.reload({waitUntil:'domcontentloaded'});
   await page.getByRole('status').filter({hasText:'找到 2 篇文档'}).waitFor();
   assert.equal(await search.inputValue(),httpDoc.title);
-  await page.getByRole('button',{name:'事实依据'}).click();
+  await page.getByRole('tab',{name:/事实依据/}).click();
   await page.waitForURL(url=>url.searchParams.get('kind')==='evidence');
-  await page.getByText('没有匹配文档，请尝试其他关键词或清除筛选。',{exact:true}).waitFor();
+  await page.getByRole('heading',{name:'没有匹配文档',exact:true}).waitFor();
   await page.getByRole('button',{name:'清除所有筛选'}).click();
   await page.waitForURL(url=>url.search==='');
   await page.locator(link).waitFor({state:'visible'});
   assert.equal(await search.inputValue(),'');
-  await page.locator('header a[href="/documents"]').click();await page.locator(link).waitFor({state:'visible'});
+  await page.getByRole('navigation',{name:'主导航',exact:true}).getByRole('link',{name:'社区文档',exact:true}).click();await page.locator(link).waitFor({state:'visible'});
   await page.locator(link).click();await page.locator('h1').waitFor();assert.equal(await page.locator('h1').textContent(),httpDoc.title);
   await page.goto(base+'/write',{waitUntil:'domcontentloaded'});assert.equal(await page.locator('h1').textContent(),'发布独立文档');
  }finally{await browser.close();}

apps/waterfall-wiki/tests/guidance-workspace.test.ts

@@ -0,0 +1,326 @@
+/** UI contract checks use isolated API fixtures; real storage/auth remain covered by guidance-integration.ts. */
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { mkdir } from "node:fs/promises";
+import { chromium } from "playwright-core";
+import { documentInput, parseDocumentXml } from "../src/lib/guidance-input";
+import { guidanceXml, type Guidance } from "../src/content/guides/catalog";
+const base = process.env.WORKSPACE_TEST_URL;
+const owner = "11111111-1111-4111-8111-111111111111";
+const authored: Guidance = {
+  id: "user-" + owner + "-review",
+  revision: 1,
+  kind: "guide",
+  title: "准备一次清晰的代码审查",
+  summary: "用明确的问题和证据，完成一次有用的代码审查。",
+  applies: "提交合并请求前",
+  body: "先理解改动目标，再核对实现与验证。",
+  steps: [],
+  checks: [],
+  links: [],
+  tags: [],
+};
+test(
+  "workspace filters, reading tabs, account states and editor work on desktop and mobile",
+  { skip: !base },
+  async () => {
+    const browser = await chromium.launch({
+      executablePath:
+        process.env.CHROMIUM_PATH ||
+        "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+      headless: true,
+      args: ["--no-sandbox"],
+    });
+    const context = await browser.newContext({
+      viewport: { width: 1440, height: 1000 },
+    });
+    let signedIn = false,
+      previewError = false,
+      requestedAuthor: string | null = null,
+      published: Guidance | null = null;
+    const errors: string[] = [];
+    try {
+      await context.route("**/api/account/session", (route) =>
+        route.fulfill({
+          json: {
+            user: signedIn
+              ? {
+                  id: owner,
+                  email: "editor@example.com",
+                  verified_at: "2026-10-29T00:00:00Z",
+                }
+              : null,
+          },
+        }),
+      );
+      await context.route(
+        (url) => url.pathname === "/api/documents",
+        async (route) => {
+          if (route.request().method() === "GET") {
+            requestedAuthor = new URL(route.request().url()).searchParams.get(
+              "author",
+            );
+            return route.fulfill({
+              json: { documents: [{ ...authored, author: owner }] },
+            });
+          }
+          published = documentInput.parse(route.request().postDataJSON());
+          return route.fulfill({ status: 201, json: { document: published } });
+        },
+      );
+      await context.route("**/api/documents/preview", (route) => {
+        if (previewError)
+          return route.fulfill({
+            status: 400,
+            json: { error: "输入不符合协议", fields: ["applies"] },
+          });
+        let document: Guidance;
+        try {
+          document =
+            route.request().headers()["content-type"] === "application/xml"
+              ? parseDocumentXml(route.request().postData() || "")
+              : documentInput.parse(route.request().postDataJSON());
+        } catch {
+          return route.fulfill({
+            status: 400,
+            json: { error: "输入不符合协议" },
+          });
+        }
+        return route.fulfill({
+          json: {
+            document,
+            xml: guidanceXml(document),
+            links: document.links.map((link) => ({ ...link, resolved: true })),
+          },
+        });
+      });
+      await context.route("**/api/documents/" + authored.id, (route) =>
+        route.fulfill({ json: { document: authored } }),
+      );
+      const page = await context.newPage();
+      page.setDefaultTimeout(10000);
+      page.on("pageerror", (error) => errors.push(error.message));
+      await page.goto(base!, { waitUntil: "networkidle" });
+      await page
+        .getByRole("heading", { name: authored.title, exact: true })
+        .waitFor();
+      assert.equal(await page.title(), "探索文档 · 织页");
+      const search = page.getByRole("textbox", { name: "搜索文档" });
+      await search.fill("不存在的文档");
+      await search.press("Enter");
+      await page
+        .getByRole("heading", { name: "没有匹配文档", exact: true })
+        .waitFor();
+      await page.reload({ waitUntil: "networkidle" });
+      assert.equal(await search.inputValue(), "不存在的文档");
+      await page
+        .getByRole("button", { name: "清除所有筛选", exact: true })
+        .click();
+      await page
+        .getByRole("heading", { name: authored.title, exact: true })
+        .waitFor();
+      await page.getByRole("tab", { name: /事实依据/ }).focus();
+      await page.keyboard.press("Home");
+      await page.getByRole("tab", { name: /全部文档/ }).waitFor();
+      if (process.env.WORKSPACE_SCREENSHOT_DIR) {
+        await mkdir(process.env.WORKSPACE_SCREENSHOT_DIR, { recursive: true });
+        await page.screenshot({
+          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/directory.png",
+          fullPage: true,
+        });
+      }
+      await page.goto(base + "/guide/review-changes?revision=1", {
+        waitUntil: "networkidle",
+      });
+      await page.getByRole("tab", { name: "XML 源文档" }).click();
+      assert.match(await page.locator("pre").innerText(), /linked-guidance/);
+      await page.getByRole("tab", { name: /版本记录/ }).click();
+      await page.getByText("当前阅读", { exact: true }).waitFor();
+      await page.getByRole("tab", { name: "文档概览" }).click();
+      if (process.env.WORKSPACE_SCREENSHOT_DIR)
+        await page.screenshot({
+          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/reader.png",
+          fullPage: true,
+        });
+      await page.goto(base + "/account", { waitUntil: "networkidle" });
+      await page.getByRole("button", { name: "创建账户", exact: true }).click();
+      await page.getByRole("heading", { name: "创建你的账户" }).waitFor();
+      await page
+        .getByLabel("密码", { exact: true })
+        .fill("a-long-example-password");
+      await page.getByRole("button", { name: "显示密码" }).click();
+      assert.equal(
+        await page.getByLabel("密码", { exact: true }).getAttribute("type"),
+        "text",
+      );
+      await page.getByRole("button", { name: "隐藏密码" }).click();
+      await page.getByLabel("密码", { exact: true }).fill("");
+      if (process.env.WORKSPACE_SCREENSHOT_DIR)
+        await page.screenshot({
+          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/account.png",
+          fullPage: true,
+        });
+      await page.goto(base + "/write", { waitUntil: "networkidle" });
+      await page.getByRole("heading", { name: "登录后开始编写" }).waitFor();
+      signedIn = true;
+      await page.reload({ waitUntil: "networkidle" });
+      await page.getByLabel("文档短名", { exact: true }).fill("workspace-test");
+      await page.getByLabel("标题", { exact: false }).fill("界面回归验证文档");
+      await page
+        .getByLabel("一句话摘要", { exact: false })
+        .fill("可独立使用的指导");
+      await page
+        .getByLabel("适用条件", { exact: false })
+        .fill("检查界面流程时");
+      await page
+        .getByLabel("正文", { exact: false })
+        .fill("先判断适用条件，再阅读正文。");
+      await page
+        .getByLabel("建议步骤", { exact: true })
+        .fill("第一步\n\n第二步");
+      previewError = true;
+      await page
+        .getByRole("button", { name: "校验并预览", exact: true })
+        .click();
+      await page.getByRole("alert").filter({ hasText: "适用条件" }).waitFor();
+      previewError = false;
+      await page
+        .getByRole("button", { name: "校验并预览", exact: true })
+        .click();
+      await page.getByRole("dialog").waitFor({ state: "visible" });
+      await page.getByRole("button", { name: "返回编辑" }).click();
+      assert.equal(
+        await page.getByLabel("正文", { exact: false }).inputValue(),
+        "先判断适用条件，再阅读正文。",
+      );
+      await page.getByRole("button", { name: "添加条件链接" }).click();
+      await page.getByRole("button", { name: "移除关联文档 1" }).click();
+      if (process.env.WORKSPACE_SCREENSHOT_DIR) {
+        await page.evaluate(() => window.scrollTo(0, 0));
+        await page.screenshot({
+          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/editor.png",
+          fullPage: true,
+        });
+      }
+      await page.getByRole("button", { name: "发布文档", exact: true }).click();
+      await page
+        .getByRole("status")
+        .filter({ hasText: "已公开发布" })
+        .waitFor();
+      assert.ok(published);
+      assert.deepEqual((published as Guidance).steps, ["第一步", "第二步"]);
+      assert.equal(
+        (published as Guidance).id,
+        "user-" + owner + "-workspace-test",
+      );
+      await page.goto(base + "/documents?scope=mine", {
+        waitUntil: "networkidle",
+      });
+      assert.equal(requestedAuthor, owner);
+      await page
+        .getByRole("heading", { name: authored.title, exact: true })
+        .waitFor();
+      await page.goto(base + "/write?id=" + authored.id, {
+        waitUntil: "networkidle",
+      });
+      assert.equal(
+        await page.getByLabel("文档短名", { exact: true }).isDisabled(),
+        true,
+      );
+      assert.equal(
+        await page.getByLabel("标题", { exact: false }).inputValue(),
+        authored.title,
+      );
+      await page.getByRole("button", { name: "协议 XML", exact: true }).click();
+      const xmlInput = page.getByLabel("XML 输入");
+      assert.match(await xmlInput.inputValue(), /revision="2"/);
+      await xmlInput.fill(
+        (await xmlInput.inputValue()).replace(
+          authored.title,
+          "通过 XML 更新的文档",
+        ),
+      );
+      await page
+        .getByRole("button", { name: "可视化编辑", exact: true })
+        .click();
+      assert.equal(
+        await page.getByLabel("标题", { exact: false }).inputValue(),
+        "通过 XML 更新的文档",
+      );
+      await page.setViewportSize({ width: 390, height: 844 });
+      await page.goto(base!, { waitUntil: "networkidle" });
+      assert.equal(
+        await page.evaluate(
+          () => document.documentElement.scrollWidth <= window.innerWidth,
+        ),
+        true,
+      );
+      await page.getByRole("button", { name: "打开导航" }).click();
+      await page
+        .getByRole("dialog", { name: "工作区导航" })
+        .waitFor({ state: "visible" });
+      await page.keyboard.press("Escape");
+      assert.equal(
+        await page.getByRole("dialog", { name: "工作区导航" }).isVisible(),
+        false,
+      );
+      if (process.env.WORKSPACE_SCREENSHOT_DIR)
+        await page.screenshot({
+          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-directory.png",
+          fullPage: true,
+        });
+      await page.goto(base + "/guide/review-changes?revision=1", {
+        waitUntil: "networkidle",
+      });
+      assert.equal(
+        await page.evaluate(
+          () => document.documentElement.scrollWidth <= window.innerWidth,
+        ),
+        true,
+      );
+      if (process.env.WORKSPACE_SCREENSHOT_DIR)
+        await page.screenshot({
+          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-reader.png",
+          fullPage: true,
+        });
+      await page.goto(base + "/account", { waitUntil: "networkidle" });
+      assert.equal(
+        await page.evaluate(
+          () => document.documentElement.scrollWidth <= window.innerWidth,
+        ),
+        true,
+      );
+      await page.goto(base + "/write", { waitUntil: "networkidle" });
+      await page.getByLabel("文档短名", { exact: true }).waitFor();
+      await page.getByRole("button", { name: "协议 XML", exact: true }).click();
+      await page.getByLabel("XML 输入").waitFor();
+      assert.equal(
+        await page.evaluate(
+          () => document.documentElement.scrollWidth <= window.innerWidth,
+        ),
+        true,
+      );
+      if (process.env.WORKSPACE_SCREENSHOT_DIR)
+        await page.screenshot({
+          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-editor.png",
+          fullPage: true,
+        });
+      await page.goto(base + "/protocol", { waitUntil: "networkidle" });
+      assert.equal(
+        await page.evaluate(
+          () => document.documentElement.scrollWidth <= window.innerWidth,
+        ),
+        true,
+      );
+      if (process.env.WORKSPACE_SCREENSHOT_DIR)
+        await page.screenshot({
+          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-protocol.png",
+          fullPage: true,
+        });
+      assert.deepEqual(errors, []);
+    } finally {
+      await context.close();
+      await browser.close();
+    }
+  },
+);

apps/waterfall-wiki/tests/integration.test.ts

@@ -31,6 +31,8 @@ test('real PostgreSQL + S3 notes, flat tags, resource sharing and video processi
   for(const route of ['/','/images','/videos','/audio','/articles','/motion','/library/import','/tools/doodle','/tools/skills','/tools/skills/street-people','/tools/skills/shadow-puppet'])assert.equal((await fetch(base+route)).status,200,route);
   await verifyEmailAccounts();
   await verifyGuidancePublishing(base);
+  const workspaceUI=spawn(process.execPath,['--import','tsx','--test','tests/guidance-workspace.test.ts'],{env:{...process.env,WORKSPACE_TEST_URL:base},timeout:90000,stdio:'inherit'});
+  const [workspaceExit]=await once(workspaceUI,'exit');assert.equal(workspaceExit,0,'SaaS workspace UI regression checks');
   await verifyFlatNoteMigration();
   const root=await request('/api/tags',{name:'线条',slug:'lines'});const child=await request('/api/tags',{name:'白色',slug:'white'});
   const sameTag=await request('/api/tags',{name:'#线条'});assert.equal(sameTag.id,root.id,'Hashtag creation reuses the globally unique tag');
@@ -214,8 +216,8 @@ test('real PostgreSQL + S3 notes, flat tags, resource sharing and video processi
   }
   const machineIndex=await fetch(base+'/api/guides');assert.equal(machineIndex.status,200);assert.equal((await machineIndex.json()).protocol,'linked-guidance/0.1');
   const home=await fetch(base+'/').then(r=>r.text());
-  for(const href of ['/documents','/write','/protocol','/guide/review-changes'])assert.ok(home.includes('href=\"'+href+'\"'),`Guidance homepage links to ${href}`);
-  assert.ok(home.includes('用户发布'));assert.ok(home.includes('协议样例'));
+  for(const href of ['/documents','/write','/protocol','/guide/review-changes?revision=1'])assert.ok(home.includes('href=\"'+href+'\"'),`Guidance homepage links to ${href}`);
+  assert.ok(home.includes('社区发布'));assert.ok(home.includes('协议样例'));
   // Legacy media and skill functionality stays covered by its own routes above and below.
 
   const spec=await request('/api/skills/street-people');assert.equal(spec.generation.executor,'coding-agent');

docs/linked-guidance/acceptance.md

@@ -1,33 +1,38 @@
-# 交付验收清单
+# 交付验收记录
 
-这是要求与证据的对照表，不能用提交、PR 或测试意图代替实际验收。所有 PR 由用户手动合并。构建只使用 ces-control，网页只在指定服务器验收。
+所有 PR 由用户手动合并，只有 main 更新触发 ces-control CI/CD。用户后续明确允许在当前项目目录内本地开发和测试；本次 SaaS 重构使用独立工作区，结束后清理自建临时依赖、预览和构建产物。
 
-| 用户要求 | 应验证的行为 | 当前证据 / 待办 |
-| --- | --- | --- |
-| 研究 LLM Wiki | 能指出原始提案与本项目新增设计的边界 | protocol.md 引用 Karpathy 原始 gist；XML、条件链接和版本规则为本项目提案 |
-| SkillHub 逐页截图与设计分析 | 首页、目录、详情各标签、作者、登录、发布入口具备截图和观察记录 | 主 chat 已截取首页首屏与下半屏、目录、概述、文件、版本、评论、评测、登录、作者及发布限制；另补插件、SkillPay、大赛、使用指南、专家包列表/详情与企业专区首屏；截图目前在 chat 中，窄屏参考待补 |
-| 可独立使用的文档 | 单篇内容具有适用条件、正文和步骤，不要求安装包 | catalog.ts 与 /guide 原型；真实文档实现已随 PR #9 合入，待 CI 与运行时验证 |
-| 按链接寻找帮助 | 条件、关系、精确版本可读，缺失目标明确，背景不升级权限 | 协议及静态阅读页；真实文档预览与链接解析待 PR #9 验证 |
-| 新语法 | XML 可序列化、校验、往返，拒绝未知协议与非法实体 | 原型 XML 输出已合入；严格输入与往返测试已随 PR #9 合入，远程执行待确认 |
-| 基于现有 wiki 改造 | 沿用 Pages Router 与现有部署数据 | main 已包含新首页原型，实际服务仍在旧版本，等待 CI 部署 |
-| 保留旧小红书 UI | 旧首页和组件仍可在代码库找到，新入口不再使用 | src/legacy/WaterfallHome.tsx 以及原 ExploreFeed/Shell 保留；部署后需检查新首页 |
-| 邮箱与密码登录并验证邮箱 | 注册发信、验证一次消费、未验证不能登录、会话可注销 | #6/#8 已由用户合并；SMTP 配置、TLS 登录及诊断邮件实际投递已验证；实际注册、验证和登录待部署 |
-| 正常用户与管理员隔离 | 普通邮箱 cookie 无法授权旧管理写 API | auth.test.ts 与 account-integration.ts；最终 main CI 结果仍待确认 |
-| 真实发布与版本 | 已验证作者能发布和更新，其他人不能覆盖，旧版本不变 | PR #9 的 PostgreSQL 所有权/并发/撤下保留测试，待远程执行与网页验证 |
-| 独立开发与人工合并 | 每个方向独立分支和可评审 PR | #6/#7/#8/#9/#11/#12/#13/#14/#15/#16 已由用户合并；#10 待最终证据完善；所有 merge 由用户完成 |
+## 已部署功能的实际证据
 
-## SMTP 验收边界
+2026-10-29，main run 508 / job 556 成功：类型检查、51 项单元测试、生产构建、smoke、真实 PostgreSQL/S3/Chromium 集成、认证检查与生产部署全部通过。验收入口为 http://8.211.154.134:18131/ ，健康检查返回应用版本 `9a603cf87e9b726a566ae68f4f479030e0d02629`。随后 #18 仅修改工作流与说明，没有应用代码变更。
 
-配置已写入服务器 root 所有、0600 权限的 /etc/prompt.env。密码不在仓库、PR 或 CI 日志中。SMTP_SSL 证书验证、连接与认证已通过。2026-10-29 10:23 UTC 发送诊断邮件 LG-SMTP-20261029-01，SMTP 接受；随后通过 Gmail 定向检索确认该编号邮件位于指定测试收件箱的 INBOX、UNREAD、CATEGORY_PERSONAL，非垃圾邮件。诊断邮件不含验证链接；这不证明注册流程已经完成。生产服务尚未因配置而手动重启，等待正常 CI/CD 部署。
+| 用户要求                | 已有证据                                                                                                                                                        |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 研究 LLM Wiki 与新语法  | protocol.md 引用 Karpathy 原始 gist；独立 XML、条件链接、关系、预算与版本规则是本项目提出的实验协议，不声称 Agent 已原生支持                                    |
+| SkillHub 截图与设计分析 | chat 中已截取首页、目录、详情概述/文件/版本/评论/评测、登录、作者、发布限制；补充插件、SkillPay、大赛、使用指南、专家包与企业专区首屏。受限发布编辑器未完整验收 |
+| 单篇可独立采用          | 公开入口 GET/HEAD、Agent 索引、样例与持久文档读取均已验证；不要求安装整个集合                                                                                   |
+| 条件链接与固定版本      | 实际预览解析 source-trust 固定版本；缺失版本返回 404；XML 条件和标签往返已验证                                                                                  |
+| 邮箱、密码、邮箱验证    | 指定真实收件箱收到注册邮件并确认位于 INBOX；未验证登录 401，验证一次 200、重复消费 400，验证后登录 200                                                          |
+| 普通账户权限隔离        | 普通邮箱会话调用旧管理员写 API 返回 401；匿名预览 401，跨来源写入 403                                                                                           |
+| 真实发布与版本          | 实际发布 v1/v2，旧版本正文保持不变，旧版本号重复发布返回 409；目录返回最新版本                                                                                  |
+| 撤下与退出              | 验收文档已撤下，最新入口 404、固定历史版本 200、公开目录不再列出；注销后会话为空                                                                                |
+| 保留旧界面              | src/legacy/WaterfallHome.tsx 与旧 Shell/ExploreFeed 保留，新入口不再使用旧首页；旧内容路由仍在集成测试覆盖范围内                                                |
+| 独立分支、人工合并      | #6–#18 由用户合并；当前 SaaS 重构使用 codex/wiki-saas，交付 PR 等待用户手动合并                                                                                 |
 
-## 当前未完成工作
+## 邮件与敏感信息
 
-补齐窄屏参考及验收截图；完成当前 main 的远程 CI（仅 main 更新触发，PR/手动不触发）；其余 PR 由用户手动合并；等待正常部署；在服务器上测试邮箱注册验证与文档发布、编辑、精确版本及关联阅读；记录桌面与窄屏效果。只有运行时证据齐全后才认定完整交付。
+SMTP 运行时配置位于服务器 root 所有、0600 权限的 /etc/prompt.env。密码、注册验证令牌与测试账户密码不进入仓库、PR、截图或报告。早期 SMTP 诊断邮件只证明投递；上述后续真实注册验证才证明完整账户流程。验收文档已撤下；固定历史版本按产品约定保留。
 
-## Agent 发现入口
+## 本次 SaaS 视觉重构
 
-PR #12 将 llms.txt 与 /agent/index.md、/index.md 导向独立指导文档，索引同时包含持久化用户文档与示例，并只公开 GET/HEAD。测试覆盖发现入口、预算与固定版本链接；已由用户合并；远程 CI 和部署验收尚未完成。
+详细设计参考与页面规范见 ../wiki-saas/DESIGN.md。重构范围为公共外壳、目录、社区/我的文档、阅读、账户、编辑与协议页。
 
-## 最近的 main CI 证据
+本地独立预览中的 UI 回归使用明确的 API 测试夹具，覆盖 URL 筛选恢复、清除、键盘标签导航、阅读/XML/版本、账户模式与密码可见性、发布登录门槛、表单错误保留输入、校验预览、发布输入规范化、现有文档编辑、XML 往返、移动端导航关闭及无横向溢出。该测试不代替上述真实数据库、SMTP 和权限验证；已接入 main 集成测试流程。
 
-run 504（main 1925d15）类型检查、50 项单元测试与生产构建通过，随后 smoke 因缺管理员配置返回 503 而失败；不代表完整 CI 通过。PR #16 仅给绑定回环地址的 smoke 子进程设置显式测试模式，已由用户合并。main 254ac62 的后续检查仍待完成；未在本机编译，未手动触发构建。
+类型检查、51 项单元测试、生产构建与 standalone smoke 已通过。生产构建保留 preview.ts 动态文件跟踪的既有警告。
+
+实际检查了 1440px 桌面目录/阅读/账户/编辑器，以及 390px 手机目录/阅读/XML 编辑器/协议截图。原生桌面浏览器当时因 Mac 锁定不可操作，截图由项目隔离的无头 Chromium 回归测试生成，未将其表述为线上部署验收。
+
+## 剩余交付边界
+
+SaaS 改版尚未合并和部署。PR 就绪后等待用户手动合并，届时由正常 main CI/CD 运行真实存储集成与部署，再在指定服务器复核新页面。不得把旧版本的成功 CI 或本地夹具截图称为新版线上验证。

docs/plans/canvas-rebuild.md

@@ -0,0 +1,27 @@
+# Infinite canvas rebuild
+
+The previous workspace displays node bodies but keeps editing in a fixed inspector. Header dragging exists in source, but the user's observed failure has not yet been reproduced in a browser. Do not claim otherwise.
+
+References: https://docs.comfy.org/interface/overview (node canvas, parameters, canvas navigation); https://www.runninghub.cn/runninghub-api-doc-en/ (workflow API requires a real connected service). Image searches covered ComfyUI and RunningHub workspace layouts.
+
+Implementation plan:
+1. Keep document coordinates independent from viewport translation and scale. Scale around the pointer, or viewport center for toolbar buttons.
+2. Put usable text/prompt editors and image actions inside movable nodes. Header is an explicit drag handle; bottom corner resizes. Inputs never initiate gestures.
+3. Store width/height and viewport alongside the existing v1 document; preserve old drafts and JSON imports. Links follow actual node dimensions.
+4. Add duplicate and gesture-level undo/redo, with keyboard shortcuts excluded from form fields.
+5. Browser acceptance must move two nodes before and after zoom, edit without moving, resize, check connections, undo/redo, pan, and reload persistence. Existing smoke test is insufficient.
+
+Constraints: repository AGENTS requires server-only visual acceptance. Production redirects unauthenticated requests to /login. CI deploys only main; this branch must not merge or deploy without explicit authorization. Therefore a ready implementation alone is not completed visual acceptance.
+
+Current checks: TypeScript noEmit (without next typegen/build) passed. Existing 13 unit tests passed; these do not validate canvas gestures. Browser script syntax and git diff checks passed. Browser acceptance and build have NOT run for this revision. Server unauthenticated HEAD returns 307 to /login?next=%2Fstudio%2Finfinite_canvas; in-app browser creation timed out. Waiting for user choice of permitted isolated acceptance environment before marking ready.
+
+
+## Final layout and acceptance
+User explicitly authorized temporary local runtime acceptance in this chat, overriding the server-only rule for this revision. A subsequent request requires the whole screen to be the dotted canvas. All reserved header/sidebar layout has been removed; compact floating chrome remains, and properties open on demand. Grid spacing adapts at low zoom to keep dots legible.
+
+Browser acceptance ran in Chrome at 1600x1100 and 390x844. Passed: actual world-space movement of two nodes at two scales; editing without movement; resizing; gesture undo/redo; SVG connection start aligned to node geometry after resizing and panning; refresh document and viewport restoration; pointer-anchored Ctrl+wheel zoom; create/duplicate/delete/undo/redo; viewport equals window bounds and no horizontal mobile overflow. Production webpack compilation passed. Isolated-worktree dependency symlinks caused standalone tracing warnings (28 files outside tracing root), so deployment package completeness is not claimed. Local account-session request returns 404 because the shared account service runs in the full site; production authentication was not changed or validated here. Model generation remains explicitly unavailable.
+
+Evidence screenshots are retained as intentional review deliverables under docs/evidence/canvas-rebuild/, not temporary output. Local server, dependency links and generated build/cache output are removed after acceptance. PR targets main for manual user merge; no deployment performed.
+
+## Theme and unobstructed canvas follow-up
+Added persistent light/dark themes covering the grid, cards, input fields, floating chrome and connection lines. Removed the left tool strip and the inspector. The tool strip is now a centered bottom dock; zoom/history floats at top right. Clicking empty canvas opens add actions; node ellipsis or right-click opens copy/delete/connect actions near the pointer. Escape or clicking elsewhere dismisses the menu. Node editors remain inline. Browser checks cover dock placement, theme persistence and contextual CRUD in addition to the existing gesture suite. TypeScript, 13 canvas-branch tests and webpack compilation passed; 19 S3-branch tests passed separately. User explicitly authorized merging PR #23 and #24 in this follow-up. Shared account-service and standalone tracing limitations remain as noted above.

docs/plans/infinite-canvas.md

@@ -0,0 +1,23 @@
+# Infinite canvas plan
+
+Scope: only /studio/infinite_canvas, its CSS module, browser interaction checks. Based on main f490543 in isolated worktree. No homepage, graphic, shared authentication or deployment changes.
+
+## Research before implementation
+- Baseline server screenshot captured 2026-10-29: existing server requires dynamic-code authentication before route access. Do not bypass it.
+- Internet image search: AI infinite canvas ComfyUI RunningHub interface; reviewed workflow canvas and media card arrangements. No unlicensed product screenshots copied into product.
+- https://jimeng.jianying.com — prompt-driven creation, image references, canvas.
+- https://klingai.com — attempted primary source; robots denied access. No unsupported detailed claims.
+- https://hailuoai.video — reference input and media-first exploration.
+- https://www.liblib.art and https://www.liblib.tv — Liblib/LibTV reference targets; client-rendered content limits source inspection.
+- https://docs.comfy.org/interface/overview — explicit node workflow and workspace regions.
+- https://www.runninghub.cn — canvas-oriented creation and reusable workflows.
+- https://github.com/bergside/awesome-design-skills — reference catalogue; apply deliberate typography, spacing, accessible controls and consistent hierarchy, without installing external skills.
+
+## Design and behavior
+Dark graphite creation desk with warm lime accent. Narrow left tool rail, large dotted canvas, editable right inspector and floating zoom controls. Start with a clearly labelled sample storyboard: brief → reference → shot plan. Native drag and zoom, selection, editable text/prompt cards, image upload, visible links, add/delete, undo/redo, fit view. Persist bounded browser-local drafts and export/import portable JSON. Images remain local. No simulated generation; generation cards explicitly say model service is not connected. Account link uses existing /account and GET /api/account/session contract.
+
+## Validation
+Local TypeScript and existing tests; local build explicitly authorized for this task. Browser checks for desktop/mobile, creation, drag, undo, reload, JSON export and disconnected AI notice. Clean owned screenshots, build directories and temporary dependency links before delivery. Push branch and open PR against main; no merge or deployment.
+
+## Results
+TypeScript passed; existing 10 tests passed. Project-local Next CLI webpack build passed. Default Turbopack cannot resolve dependencies outside isolated worktree; webpack standalone tracing warns about the temporary dependency symlinks, so deployment artifact completeness is not claimed. Browser smoke passed on desktop and mobile. No deployment performed.

docs/studio-graphic/plan.md

@@ -0,0 +1,31 @@
+# Studio Graphic 实施计划
+
+## 研究与范围
+- 改造前证据：ProjectMedia/studio-editor-workspace-qa.png（2026-10-27）；本次在线截图因内置浏览器超时未成功，不当作最新截图。
+- https://github.com/bergside/awesome-design-skills ：参考 token、组件规范、可访问性与质量检查组织方法；其 Stitch 风格不等同于 Google Stitch 产品界面。
+- https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch ：官方界面图参考。
+- https://moda.app/blog/google-stitch-review ：图片搜索找到的多画板与设计系统截图，仅作视觉参考。
+- Figma 的三栏编辑器布局：图层、画布、属性。采用白色工具栏、冷灰点阵底、蓝紫选中态、集中式底部工具条。
+
+## 五个交付阶段
+1. 阅读现有代码、引用 chat，独立分支，协调 infinite_canvas。
+2. 收集参考与截图、明确设计与复用边界，记录计划。
+3. /studio/graphic 实现可编辑画板、图层、历史、保存、导出与同站邮箱账户。
+4. 本地类型、行为、构建和视觉检查；记录真实结果及限制。
+5. 检查完整差异，提交、推送、创建 PR；清理临时产物，等待人工合并。
+
+## 清理边界
+Studio 首页不再展示旧 27 套项目。保留旧路由与数据库，避免破坏现有链接与用户作品；不删除其他 chat 文件。新工作台默认空白，预设只能由用户显式插入。浏览器草稿明确标识本机保存，邮箱账户使用已有 /api/account/* 服务，避免另建身份系统。未配置模型时不提供虚假 AI 生成。
+
+## 分工
+Infinite Canvas 独立 chat 01a18775-33e3-7770-ba63-64b4a6a00c89，仅负责 /studio/infinite_canvas 与专属文件。两分支完成后再评估集成，不自动合并 main。
+
+## 验证记录
+- 用户已确认只清理入口、保留历史数据。
+- 13 项单元测试和 TypeScript 通过。webpack 生产构建通过；默认 Turbopack 被本地 CSS 工作进程端口权限阻止。
+- 自动浏览器检查通过：新增文字/矩形、文字修改、撤销/重做、刷新恢复、SVG 下载、账户弹窗、390px 无横向溢出。截图布局已检查，交付前清理截图。
+- 账户 session 使用访客 fixture；真实邮件注册登录未在本次验证。独立 Studio 本地进程没有账户后端，部署后复用同域 /api/account 服务。
+- 单画板与本机草稿，无云端设计同步、协作或 AI 生成。完整属性编辑以桌面为主。
+- Infinite Canvas 独立 PR #19 已由外部操作合入 main；本分支交付前同步该主线，检查共存。
+
+- standalone 兼容检查通过：27 套历史页面、保存作品读取、旧重定向与渲染 API；测试脚本支持本地 monorepo standalone 路径。

docs/wiki-image-retention.md

@@ -54,6 +54,8 @@ the original build/deployment status or rolling back healthy services. Reference
 images and Docker refusal are reported and retained. Failed CI does not record a
 successful release and does not immediately remove that job's test image.
 
-PR checks run Python policy tests and shell syntax checks on ces-control without
-building or touching Docker. The existing full build/integration/deployment runs
-only after the user merges to main. No local builds are needed.
+After the user merges to main, policy checks run Python tests and shell syntax
+checks on ces-control without building or touching Docker. The full application
+build/integration/deployment also runs only on main updates, subject to its path
+filters. PR events and manual dispatch do not trigger either workflow. No local
+builds are needed.

docs/wiki-saas/DESIGN.md

@@ -0,0 +1,46 @@
+# 织页 SaaS 界面重构
+
+用户明确要求以正式 SaaS 产品为标准，重做当前视觉；保留独立指导文档、条件链接、固定版本与邮箱账户的功能。本次本地开发测试获用户在“重构 Studio 设计与无限画布”chat 的直接授权，最终清理自建临时产物，不删除用户原有文件。所有 main 合并仍由用户完成。
+
+## 设计参考与取舍
+
+- https://github.com/bergside/awesome-design-skills ：阅读 professional、shadcn、clean 与 minimal 的说明，采用语义令牌、明确状态、统一间距和键盘可达性。professional 当前示例的商店品牌与黄色不适合知识工作台，不直接复制其品牌色。
+- https://ui.shadcn.com/docs/components/sidebar ：参考侧栏的导航分组、账户区与移动端抽屉结构，使用现有 React/CSS Modules 实现，不引入新的组件库依赖。
+- https://linear.app/features ：参考工作型产品的信息层级和克制的工具界面，而非复制营销首页。
+- 原 SkillHub、Hugging Face、GitHub 研究继续用于文档发现、单篇读取、来源与版本的组织。集合不会变成强制加载单位。
+
+## 视觉基础
+
+背景 #F8F9FC，面板 #FFFFFF，正文 #182230，次级文字 #667085，分隔线 #EAECF0，主色 #4F46E5。错误/成功颜色只表达真实反馈。间距 4/8/12/16/24/32，常规正文 14px，阅读正文 15–16px，页面标题 28px。按钮圆角 8px，面板圆角 12px；不使用装饰性渐变、低对比文字、虚假图表或无行为控件。
+
+## 页面与实现
+
+1. 应用外壳：左侧工作区、文档导航、资源和真实账户状态；顶部面包屑与创建入口；移动端可关闭、可键盘操作的导航。
+2. 目录：首页与社区/我的文档复用搜索、类型/来源筛选、排序、URL 恢复、按作者查询的我的文档（在数据库限制最近 100 篇前筛选作者）、加载/错误/空状态与文档行；数量来自实际内容。
+3. 阅读页：摘要、适用条件、正文、步骤、检查项、条件链接、固定版本和 XML；读取地址可复制，作者操作具有明确反馈。
+4. 发布页：按内容分组的表单，易读的条件链接编辑，结构化/XML 模式、真实校验预览与版本发布状态；普通用户不用手动拼接账户 UUID。
+5. 账户页：统一表单、注册/登录/重发验证、验证码链接状态、已验证会话和退出反馈；不展示不存在的重置密码、OAuth 或计费入口。
+6. 协议页：与产品一致的文档阅读布局，保留协议的实验状态与权限边界。
+
+## 验证
+
+在独立工作区本地运行类型、相关单测与构建，真实数据行为沿用现有隔离集成检查。通过可用的浏览器入口查看桌面与窄屏页面，检查导航、搜索/重置、表单、长 ID/链接、键盘焦点和错误反馈。最终提交完整改版 PR，等待用户手动合并后才触发 ces-control 部署；不以开发预览代替正式部署。
+
+## 本次检查结果
+
+- Node 24：类型检查、51 项单元测试、生产构建与 standalone smoke 通过。构建保留 preview.ts 动态文件跟踪的既有警告。
+- 项目 UI 回归使用隔离 API 夹具，覆盖作者筛选、筛选 URL 恢复、空状态、键盘标签、阅读/XML/版本、账户模式、密码显示、发布门槛、错误保留输入、预览、规范化发布和结构化/XML 往返。
+- 已检查 1440px 桌面与 390px 手机截图；新版真实 PostgreSQL/S3 集成尚待用户手动合并后的 main CI。此前已部署应用的真实邮件、账户、版本与权限证据见 ../linked-guidance/acceptance.md，不能替代新改版的部署验收。
+- 可在运行独立预览后执行：`WORKSPACE_TEST_URL=http://127.0.0.1:3217 CHROMIUM_PATH=<chromium可执行文件> node --import tsx --test tests/guidance-workspace.test.ts`。设置 WORKSPACE_SCREENSHOT_DIR 可生成截图。该用例也随原有集成测试在 CI 隔离栈运行，未添加 PR 或手动 CI 触发器。
+- 目录仅展示最近 100 篇社区文档；我的文档先在数据库筛选作者，再应用此上限。搜索与类型筛选作用于当前已加载目录，不声称全站无限搜索。
+
+## 可审阅截图
+
+以下为最终生产模式预览截图。社区条目、作者邮箱和编辑器内容均为明确的回归测试夹具，不是生产用户数据；它们只证明 UI 状态，不证明真实邮件投递或持久化发布。
+
+- [桌面目录](screenshots/directory.png)
+- [桌面阅读](screenshots/reader.png)
+- [账户注册](screenshots/account.png)
+- [结构化编辑器](screenshots/editor.png)
+- [手机目录](screenshots/mobile-directory.png)
+- [手机阅读](screenshots/mobile-reader.png)

scripts/verify-studio-visual.cjs

@@ -23,7 +23,19 @@ const assert=require('node:assert/strict');
   });metrics.push(m);await writeFile(dir+'/metrics.json',JSON.stringify({metrics,images,errors},null,2));
  }
  if(!process.argv.includes('--after-layouts')&&!process.argv.includes('--diagnose'))assert.deepEqual(metrics.filter(m=>m.overflow.length),[],'Default copy must fit every native slot');
- await page.goto(base+'/studio',{waitUntil:'networkidle'});assert.equal(await page.locator('.library-item').count(),27);await page.screenshot({path:dir+'/catalog-desktop.png',fullPage:true});
+ await page.goto(base+'/studio',{waitUntil:'networkidle'});
+ assert.equal(new URL(page.url()).pathname,'/studio/graphic');
+ await page.getByRole('button',{name:'添加文字',exact:true}).waitFor({state:'visible'});
+ assert.equal(await page.locator('.library-item').count(),0,'Old catalog is retired from the entry page');
+ await page.getByRole('button',{name:'添加文字',exact:true}).click();
+ await page.getByRole('textbox',{name:'文字内容',exact:true}).fill('Studio 线上验收');
+ await page.reload({waitUntil:'networkidle'});
+ assert.ok(await page.evaluate(()=>JSON.parse(localStorage.getItem('studio.graphic.v1')).items.some(i=>i.text==='Studio 线上验收')));
+ await page.screenshot({path:dir+'/graphic-desktop.png',fullPage:true});
+ await page.goto(base+'/studio/infinite_canvas',{waitUntil:'networkidle'});
+ assert.equal(new URL(page.url()).pathname,'/studio/infinite_canvas');
+ await page.getByRole('button',{name:'添加笔记',exact:true}).waitFor({state:'visible'});
+ await page.screenshot({path:dir+'/infinite-canvas-desktop.png',fullPage:true});
  const verify=JSON.parse(await readFile('/tmp/studio-library/verification.json','utf8'));
  for(const d of verify.results){await page.goto(base+d.url,{waitUntil:'networkidle'});assert.equal(await page.locator('img').count(),1);const current=await page.locator('img').evaluate(img=>({src:img.currentSrc,complete:img.complete,width:img.naturalWidth}));assert.ok(current.complete&&current.width>0);assert.equal(new URL(current.src).pathname,'/api/preview');await page.locator('article.native-layout').screenshot({path:dir+'/'+d.layoutId+'-saved.png',style:'.page-tools{visibility:hidden}'});
   assert.equal(new URL(page.url()).pathname,'/studio/template-layout');
@@ -35,7 +47,7 @@ const assert=require('node:assert/strict');
   const direct=await plain.newPage();await direct.goto(base+d.url,{waitUntil:'networkidle'});assert.equal(await direct.locator('article[data-design-id="'+d.id+'"]').count(),1);assert.ok((await direct.locator('article').innerText()).includes('API 验收'));await plain.close();
  }
  for(const slug of ['learning-skills-template','layout-selection']){await page.goto(base+'/studio/ideas/'+slug,{waitUntil:'networkidle'});await page.screenshot({path:dir+'/tool-'+slug+'.png',fullPage:true})}
- await page.setViewportSize({width:390,height:844});await page.goto(base+'/studio',{waitUntil:'networkidle'});assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth));await page.screenshot({path:dir+'/catalog-mobile.png',fullPage:true});
+ await page.setViewportSize({width:390,height:844});await page.goto(base+'/studio',{waitUntil:'networkidle'});assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth));await page.screenshot({path:dir+'/graphic-mobile.png',fullPage:true});
  await page.goto(base+verify.results[0].url,{waitUntil:'networkidle'});await page.screenshot({path:dir+'/standard-mobile.png',fullPage:true});
  await page.goto(base+'/categories?category='+encodeURIComponent('文档入口'),{waitUntil:'domcontentloaded',timeout:60000});await page.getByRole('navigation',{name:'系统标签分类',exact:true}).waitFor({state:'visible'});assert.equal(await page.locator('.discovery-card').count(),3);await page.waitForFunction(()=>Array.from(document.querySelectorAll('.discovery-card img')).every(img=>img.complete&&img.naturalWidth>0),null,{timeout:60000});await page.screenshot({path:dir+'/document-entries.png',fullPage:true});
  await writeFile(dir+'/metrics.json',JSON.stringify({metrics,images,errors},null,2));