Run complete workspace UI assertions in an isolated context of the integration browser

Reviewed-on: #27

.gitea/workflows/creative-workspace.yml

@@ -0,0 +1,34 @@
+name: creative workspace review checks
+on:
+  pull_request:
+    branches: [main]
+    paths:
+      - 'apps/studio/**'
+      - 'apps/waterfall-wiki/**'
+      - '.gitea/workflows/**'
+      - 'scripts/*studio*'
+concurrency:
+  group: creative-workspace-${{ gitea.event.pull_request.number }}
+  cancel-in-progress: true
+jobs:
+  verify:
+    runs-on: ces-control
+    timeout-minutes: 60
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Check patch formatting
+        run: git diff --check HEAD^ HEAD
+      - name: Verify Studio types, tests, build and smoke
+        run: docker build -f apps/studio/Dockerfile -t "creative-studio-review:${{ gitea.sha }}" .
+      - name: Build Wiki integration and runtime images
+        run: |
+          docker build --target integration -t "creative-wiki-tests:${{ gitea.sha }}" .
+          docker build --target runtime -t "creative-wiki-review:${{ gitea.sha }}" .
+      - name: Verify isolated PostgreSQL, S3 and browser integration
+        env:
+          WATERFALL_WIKI_IMAGE: creative-wiki-review:${{ gitea.sha }}
+          WATERFALL_WIKI_TEST_IMAGE: creative-wiki-tests:${{ gitea.sha }}
+          GITEA_RUN_ID: ${{ gitea.run_id }}
+        run: bash scripts/integration.sh

.gitea/workflows/studio.yml

@@ -1,51 +0,0 @@
-name: studio CI and deployment
-on:
-  push:
-    branches: [main]
-    paths:
-      - 'apps/studio/**'
-      - 'scripts/deploy-studio.sh'
-      - 'scripts/verify-studio-production.sh'
-      - 'scripts/verify-studio-library.mjs'
-      - 'scripts/verify-studio-visual.cjs'
-      - '.gitea/workflows/studio.yml'
-      - 'scripts/*studio*'
-      - 'content/studio-examples/**'
-      - 'content/studio-tools/layouts-api.md'
-      - 'pnpm-workspace.yaml'
-
-jobs:
-  verify-and-deploy:
-    if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
-    runs-on: ces-control
-    timeout-minutes: 45
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Check shared content and documentation contracts
-        run: |
-          node scripts/check-studio-contracts.mjs
-          node --check scripts/export-studio-series.cjs
-          node --check scripts/save-studio-series.mjs
-          bash -n scripts/publish-studio-guide.sh scripts/deliver-studio-series.sh
-      - name: Build and verify studio
-        run: docker build -f apps/studio/Dockerfile -t "prompt-studio:${{ gitea.sha }}" .
-      - name: Release studio
-        if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
-        run: bash scripts/deploy-studio.sh "${{ gitea.sha }}"
-      - name: Verify the deployed Studio API and native pages
-        if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
-        run: bash scripts/verify-studio-production.sh
-      - name: Save server acceptance evidence
-        id: acceptance_evidence
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: studio-production-acceptance
-          path: artifacts/studio-acceptance/
-          if-no-files-found: ignore
-          retention-days: 7
-      - name: Remove temporary acceptance output after upload
-        if: always() && steps.acceptance_evidence.outcome == 'success'
-        run: rm -rf artifacts/studio-acceptance

.gitea/workflows/waterfall-wiki.yml

@@ -1,9 +1,13 @@
-name: waterfall-wiki CI and deployment
+name: creative workspace CI and deployment
 on:
   push:
     branches: [main]
     paths:
       - 'apps/waterfall-wiki/**'
+      - 'apps/studio/**'
+      - 'scripts/*studio*'
+      - 'content/studio-examples/**'
+      - 'content/studio-tools/layouts-api.md'
       - '.gitea/workflows/waterfall-wiki.yml'
       - 'Dockerfile'
       - 'compose.yml'
@@ -18,11 +22,19 @@ jobs:
   verify-and-deploy:
     if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
     runs-on: ces-control
-    timeout-minutes: 45
+    timeout-minutes: 60
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - name: Check shared content and documentation contracts
+        run: |
+          node scripts/check-studio-contracts.mjs
+          node --check scripts/export-studio-series.cjs
+          node --check scripts/save-studio-series.mjs
+          bash -n scripts/publish-studio-guide.sh scripts/deliver-studio-series.sh
+      - name: Build and verify Studio
+        run: docker build -f apps/studio/Dockerfile -t "prompt-studio:${{ gitea.sha }}" .
       - name: Build, verify, deploy and retain wiki images
         env:
           RELEASE_SHA: ${{ gitea.sha }}
@@ -32,3 +44,19 @@ jobs:
           else
             sudo -n python3 scripts/wiki-image-lifecycle.py ci --sha "$RELEASE_SHA"
           fi
+      - name: Release Studio after Wiki routes are deployed
+        run: bash scripts/deploy-studio.sh "${{ gitea.sha }}"
+      - name: Verify the deployed creative workspace
+        run: bash scripts/verify-studio-production.sh
+      - name: Save server acceptance evidence
+        id: acceptance_evidence
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: studio-production-acceptance
+          path: artifacts/studio-acceptance/
+          if-no-files-found: ignore
+          retention-days: 7
+      - name: Remove temporary acceptance output after upload
+        if: always() && steps.acceptance_evidence.outcome == 'success'
+        run: rm -rf artifacts/studio-acceptance

README.md

@@ -81,14 +81,14 @@ bash -n scripts/deploy.sh scripts/integration.sh scripts/deploy-studio.sh
 
 ## 部署与持久化
 
-Gitea 工作流按应用路径触发：`waterfall-wiki.yml`、`studio.yml` 和 `python.yml`。waterfall-wiki 完成类型检查、单元测试、生产构建、冒烟和真实 PostgreSQL/S3 集成测试后部署；Studio 独立构建和部署。文档与作者数据本身不触发应用部署。
+Web 应用由 `waterfall-wiki.yml` 统一发布，两个应用的路径都能触发它：先检查并构建 Studio，再完成 Wiki 的类型检查、单元测试、生产构建、冒烟及隔离 PostgreSQL/S3 集成测试并部署 Wiki，随后部署 Studio，最后在指定服务器验收。顺序在同一个 ces-control 作业内保证，避免独立作业互相等待。PR 检查也运行隔离集成测试，但不部署。Python 检查仍由 `python.yml` 承担；文档与作者数据本身不触发应用部署。
 
 | 服务 | 入口/端口 |
 | --- | --- |
 | `waterfall-wiki` | 公网 `18131`，也是 Studio 的统一入口 |
 | PostgreSQL | `127.0.0.1:18132` |
 | 对象存储 | `127.0.0.1:18133` |
-| Studio | `127.0.0.1:18134`；公网通过 `/studio` 代理 |
+| Studio | `127.0.0.1:18134`；编辑器公网入口为 `/graphic`、`/infinite_canvas`，资源和 API 保留 `/studio` 代理 |
 | Python | 无网络端口，按需运行 |
 
 生产 Compose 项目仍为 `prompt`，部署根目录仍为 `/opt/prompt`。既有 `prompt_postgres_data`、`prompt_objects`、`prompt_auth_data` 卷与数据库身份保留；应用更名不会重新创建一套空存储。Compose 应用服务改为 `waterfall-wiki` 和 `waterfall-wiki-worker`，镜像参数为 `WATERFALL_WIKI_IMAGE` / `WATERFALL_WIKI_TEST_IMAGE`。

apps/studio/scripts/graphic-smoke.cjs

@@ -2,7 +2,13 @@ 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.goto((process.env.STUDIO_TEST_ORIGIN||'http://8.211.154.134:18131')+'/graphic');
+ await page.getByRole('button',{name:'切换图层面板',exact:true}).click();
+ assert.equal(await page.getByRole('button',{name:'图层',exact:true}).isVisible(),false);
+ await page.getByRole('button',{name:'切换图层面板',exact:true}).click();
+ await page.getByRole('button',{name:'切换属性面板',exact:true}).click();
+ assert.equal(await page.getByRole('button',{name:'备份设计 JSON',exact:true}).isVisible(),false);
+ await page.getByRole('button',{name:'切换属性面板',exact:true}).click();
  await page.getByRole('button',{name:'添加文字',exact:true}).click();
  await page.getByRole('textbox',{name:'文字内容',exact:true}).fill('设计从这里开始');
  await page.getByRole('button',{name:'添加矩形',exact:true}).click();

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

@@ -1,4 +1,91 @@
-// Run against an already started Studio. BASE_URL is the origin, including port.
+// 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');
-(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.goto((process.env.BASE_URL||'http://localhost:3018')+'/studio/infinite_canvas');await page.getByRole('heading',{name:'无限画布 / Infinite canvas'}).waitFor();assert.equal(await page.locator('article').count(),3);await page.getByRole('button',{name:'添加笔记',exact:true}).click();assert.equal(await page.locator('article').count(),4);await page.getByLabel('节点名称').fill('Smoke note');await page.getByLabel('笔记内容').fill('A saved idea');await page.reload();await page.getByText('Smoke note',{exact:true}).first().waitFor();assert.equal(await page.locator('article').count(),4);await page.getByText('Smoke note',{exact:true}).first().click();await page.getByRole('button',{name:'删除节点',exact:true}).click();assert.equal(await page.locator('article').count(),3);await page.getByRole('button',{name:'撤销',exact:true}).click();assert.equal(await page.locator('article').count(),4);await page.getByRole('button',{name:'适应画布'}).click();const card=page.locator('article').last();const before=await card.getAttribute('style');const box=await card.locator('div').first().boundingBox();await page.mouse.move(box.x+70,box.y+20);await page.mouse.down();await page.mouse.move(box.x+120,box.y+45,{steps:5});await page.mouse.up();assert.notEqual(await card.getAttribute('style'),before);const download=page.waitForEvent('download');await page.getByRole('button',{name:'导出项目'}).click();assert.equal((await download).suggestedFilename(),'studio-canvas.json');if(process.env.SCREENSHOT_DIR)await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-desktop.png'});await page.setViewportSize({width:390,height:844});assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth));if(process.env.SCREENSHOT_DIR)await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-mobile.png',fullPage:true});assert.deepEqual(errors,[]);console.log('Canvas browser smoke passed: create, edit, restore, delete, undo, fit, export, mobile.')}finally{await browser.close()}})().catch(e=>{console.error(e);process.exitCode=1});
+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+'/infinite_canvas');
+  assert.equal(new URL(page.url()).pathname,'/infinite_canvas','Login required; authenticate without weakening protection');
+  await page.getByRole('heading',{name:'无限画布 / Infinite canvas'}).waitFor();
+  await page.getByRole('button',{name:'从示例开始 ↗',exact:true}).click();
+  // 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(':scope > div').nth(1),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);
+   }
+  }
+  // Double-click content enters editing without moving or creating nodes.
+  const nodeCount=(await snapshot()).cards.length;
+  const before=(await snapshot()).cards.find(c=>c.id==='brief');
+  await node('brief').locator('textarea').dblclick({force:true});
+  assert.equal(await node('brief').locator('textarea').getAttribute('readonly'),null);
+  await node('brief').locator('textarea').fill('双击后直接编辑');
+  assert.equal((await snapshot()).cards.length,nodeCount);
+  assert.equal((await snapshot()).cards.find(c=>c.id==='brief').x,before.x);
+  assert.equal((await snapshot()).cards.find(c=>c.id==='brief').y,before.y);
+  await page.keyboard.press('Escape');
+  const chooser=page.waitForEvent('filechooser');
+  await node('reference').getByRole('button',{name:/替换.*图片/}).dblclick();
+  const imagePicker=await chooser;
+  await imagePicker.setFiles({name:'replacement.png',mimeType:'image/png',buffer:Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jC1sAAAAASUVORK5CYII=','base64')});
+  await page.waitForFunction(()=>JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')).cards.find(c=>c.id==='reference').image?.startsWith('data:image/png;base64,'));
+  assert.equal((await snapshot()).cards.length,nodeCount);
+  await page.keyboard.press('Escape');
+  assert.equal(await node('brief').locator('textarea').getAttribute('readonly'),'');await node('brief').getByRole('button',{name:/^编辑 /}).click();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);
+  await drag(node('brief').locator('textarea'),20,10);const inEdit=(await snapshot()).cards.find(c=>c.id==='brief');assert.equal(inEdit.x,edited.x);assert.equal(inEdit.y,edited.y);await node('brief').getByRole('button',{name:/^完成编辑 /}).click();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

@@ -6,13 +6,13 @@ const standardId='00000000-0000-4000-8000-000000000003';
 const seriesId='00000000-0000-4000-8000-000000000004';
 const doc=JSON.parse(readFileSync(new URL('../fixtures/autumn-journal.json',import.meta.url))).document;
 const assetId='00000000-0000-4000-8000-000000000005';doc.sources=[{assetId,author:'CI fixture',license:'test only',url:'generated',prompt:'test image',tool:'fixture'}];for(const p of doc.pages)p.parameters.images.I01.assetId=assetId;
-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'}}}))});
+let reads=0,mediaReads=0;
+const wiki=createHttpServer((req,res)=>{assert.equal(req.headers.cookie,'session=smoke-test');if(/^\/api\/media\/[0-9a-f-]{36}$/.test(req.url)){mediaReads++;res.setHeader('Content-Type','image/png');return res.end(Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+j3ioAAAAASUVORK5CYII=','base64'))}reads++;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,[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');
+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',{headers:{cookie:'session=smoke-test'}}).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',cookie:'session=smoke-test'},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');assert.ok(mediaReads>0,'SVG exports load isolated media fixtures');
 const headers={cookie:'session=smoke-test'};
 for(const id of [designId,standardId]){
 const saved=await fetch(base+'/studio/template-layout?id='+id,{headers});assert.equal(saved.status,200);const savedHtml=await saved.text();assert.ok(savedHtml.includes('确定的页面文字'));assert.ok(savedHtml.includes('新增元素已恢复'));assert.ok(savedHtml.includes('data-element="user-smoke"'));assert.ok(savedHtml.includes('rotate(25deg)'));assert.ok(savedHtml.includes('opacity:0.7'));assert.ok(savedHtml.includes('data-design-id="'+id+'"'));assert.ok(savedHtml.includes('#123456'));assert.ok(!savedHtml.includes('data-element="D01"'));assert.ok(!savedHtml.includes('data:image'));assert.ok(!/page-tools|workbench-top|contenteditable|编辑页面/.test(savedHtml));

apps/studio/src/lib/layout-images.ts

@@ -4,7 +4,7 @@ import type {Parameters} from './layout-parameters';
 export async function embedLayoutImages(req:NextApiRequest,params:Parameters){
  const ids=[...new Set(Object.values(params.images).flatMap(v=>v.assetId?[v.assetId]:[]))],sources:Record<string,string>={};let total=0;
  const headers:Record<string,string>={};if(req.headers.authorization)headers.authorization=req.headers.authorization;if(req.headers.cookie)headers.cookie=req.headers.cookie;
- for(const id of ids){const url='http://waterfall-wiki:3000/api/preview?'+new URLSearchParams({source:'/api/media/'+id,width:'960'}),r=await fetch(url,{headers,signal:AbortSignal.timeout(15000),redirect:'error'});if(!r.ok||r.headers.get('content-type')?.split(';')[0]!=='image/webp')throw Error('图片预览不可访问，请检查图片 ID 与登录状态');const chunks:Buffer[]=[];const reader=r.body!.getReader();try{while(true){const {done,value}=await reader.read();if(done)break;total+=value.length;if(total>16*1024*1024)throw Error('图片预览总计超限');chunks.push(Buffer.from(value))}}finally{await reader.cancel()}sources[id]='data:image/webp;base64,'+Buffer.concat(chunks).toString('base64');}
+ for(const id of ids){const url=(process.env.STUDIO_WIKI_ORIGIN||'http://waterfall-wiki:3000')+'/api/preview?'+new URLSearchParams({source:'/api/media/'+id,width:'960'}),r=await fetch(url,{headers,signal:AbortSignal.timeout(15000),redirect:'error'});if(!r.ok||r.headers.get('content-type')?.split(';')[0]!=='image/webp')throw Error('图片预览不可访问，请检查图片 ID 与登录状态');const chunks:Buffer[]=[];const reader=r.body!.getReader();try{while(true){const {done,value}=await reader.read();if(done)break;total+=value.length;if(total>16*1024*1024)throw Error('图片预览总计超限');chunks.push(Buffer.from(value))}}finally{await reader.cancel()}sources[id]='data:image/webp;base64,'+Buffer.concat(chunks).toString('base64');}
  return sources;
 }
 
@@ -14,7 +14,7 @@ export async function embedSvgMedia(req:NextApiRequest,svg:string){
  const headers:Record<string,string>={};if(req.headers.authorization)headers.authorization=req.headers.authorization;if(req.headers.cookie)headers.cookie=req.headers.cookie;
  let total=0;
  for(const path of paths){
-  const response=await fetch('http://waterfall-wiki:3000'+path,{headers,redirect:'error',signal:AbortSignal.timeout(15000)});
+  const response=await fetch((process.env.STUDIO_WIKI_ORIGIN||'http://waterfall-wiki:3000')+path,{headers,redirect:'error',signal:AbortSignal.timeout(15000)});
   const mime=response.headers.get('content-type')?.split(';')[0];
   if(!response.ok||!mime||!['image/png','image/jpeg','image/webp'].includes(mime))throw Error('模板图片不可访问');
   const chunks:Uint8Array[]=[];const reader=response.body!.getReader();

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

@@ -1,6 +1,6 @@
 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 {MousePointer2,Type,Square,Circle,Plus,Minus,Undo2,Redo2,Download,Layers,ImagePlus,Trash2,Copy,Eye,EyeOff,Lock,Unlock,Scan,ChevronRight,ArrowUpRight,PenTool,X,Hand,Link2,BookOpen,PanelLeft,PanelRight} 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';
@@ -8,6 +8,7 @@ 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 [tool,setTool]=useState('select'),[offset,setOffset]=useState({x:0,y:0}),[showLayers,setShowLayers]=useState(true),[showProps,setShowProps]=useState(true);
  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);
@@ -24,17 +25,19 @@ export default function Graphic(){
  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)))}
+ function fit(){setOffset({x:0,y:0});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);}
+ 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(!e.ctrlKey&&!e.metaKey&&e.key.toLowerCase()==='v')setTool('select');else if(!e.ctrlKey&&!e.metaKey&&e.key.toLowerCase()==='h')setTool('hand');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){if(tool==='hand'){panBoard(e);return}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 resize(e:PointerEvent<HTMLElement>){e.stopPropagation();if(!item||item.locked)return;e.preventDefault();const start=doc,x=e.clientX,y=e.clientY,target=e.currentTarget;target.setPointerCapture(e.pointerId);let next=start;const move=(p:globalThis.PointerEvent)=>{next={...start,items:start.items.map(i=>i.id===item.id?{...i,w:Math.max(1,Math.min(4000,item.w+(p.clientX-x)/zoom)),h:Math.max(1,Math.min(4000,item.h+(p.clientY-y)/zoom))}:i)};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 panBoard(e:PointerEvent<HTMLElement>){if(tool!=='hand')return;e.preventDefault();const x=e.clientX,y=e.clientY,start=offset,target=e.currentTarget;target.setPointerCapture(e.pointerId);const move=(p:globalThis.PointerEvent)=>setOffset({x:start.x+p.clientX-x,y:start.y+p.clientY-y});const end=()=>{target.removeEventListener('pointermove',move);target.removeEventListener('pointerup',end);target.removeEventListener('pointercancel',end)};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>
+ return <div className={styles.app} data-layers={showLayers} data-properties={showProps}><Head><title>{doc.name + " · Studio Graphic"}</title><meta name="description" content="在 Studio 中自由编排文字、图形与图片。"/></Head>
+ <header className={styles.top}><a href="/workspace" className={styles.brand}><span>✳</span> studio<span className={styles.badge}>GRAPHIC</span></a><button aria-label="切换图层面板" aria-pressed={showLayers} onClick={()=>setShowLayers(v=>!v)}><PanelLeft size={17}/></button><button aria-label="切换属性面板" aria-pressed={showProps} onClick={()=>setShowProps(v=>!v)}><PanelRight size={17}/></button><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}>{['图层','素材','Agent'].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==='Agent'?<div className={styles.agentPanel}><Link2 size={24}/><h3>与你的 Agent 一起设计</h3><p>将接入文档交给 coding agent，使用已有的模板与创作 API。</p><a href="/studio/api" target="_blank" rel="noreferrer">查看接入文档 ↗</a><a href="/documents" target="_blank" rel="noreferrer"><BookOpen size={15}/>知识与教程 ↗</a><small>在 Agent 中打开文档，查看可用的创作接口与使用方式。</small></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="/infinite_canvas">Infinite Canvas <ArrowUpRight size={14}/></a><small>⌘ Z 撤销 · 方向键微调 · Delete 删除</small></div></aside>
+ <main ref={viewport} className={styles.viewport} onPointerDown={e=>{setSelected('');panBoard(e)}}><div className={styles.canvasLabel}>画板 01 <span>800 × 1000</span></div><div className={styles.boardWrap} style={{width:800*zoom,height:1000*zoom,transform:`translate(${offset.x}px,${offset.y}px)`}}><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} onPointerDown={resize}/><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="选择工具" aria-pressed={tool==='select'} onClick={()=>{setTool('select');setSelected('')}}><MousePointer2 size={20}/></button><button title="抓手工具" aria-label="抓手工具" aria-pressed={tool==='hand'} onClick={()=>setTool('hand')}><Hand size={19}/></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=''}}/>

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

@@ -1,34 +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} from 'lucide-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};
+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 example: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 initial:Doc={version:1,cards:[],links:[]};
 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.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)));}
+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('');
- 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}|null>(null);
+ 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'),[editing,setEditing]=useState('');
+ 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 恢复')}setReady(true);fetch('/api/account/session').then(r=>r.ok?r.json():null).then(d=>setEmail(d?.user?.email||'')).catch(()=>{});},[]);
+ 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);setEditing('');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:((rect?.width||700)/2-pan.x)/zoom-160,y:(160-pan.y)/zoom,image}]});select(id)}
- function change(field:'title'|'text',value:string){commit({...doc,cards:doc.cards.map(c=>c.id===selected?{...c,[field]:value}:c)})}
+ 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+320))-minX,h=Math.max(...doc.cards.map(c=>c.y+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 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}><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}/><a href="/account">{email||'登录账户'}</a><button className={s.export} onClick={exportDoc}><Download size={15}/>导出项目</button></header>
+ return <main className={s.app} data-theme={theme}><Head><title>无限画布 · Studio</title><meta name="description" content="在无限画布上组织灵感、参考素材与镜头提示词"/></Head>
+ <header className={s.header}><a href="/workspace" className={s.back} aria-label="返回 Studio"><ArrowLeft size={18}/></a><a href="/workspace" 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} ref={viewport} onWheel={e=>{if(e.ctrlKey||e.metaKey){setZoom(z=>Math.max(.2,Math.min(2,z-e.deltaY*.002)))}else setPan(p=>({x:p.x-e.deltaX,y:p.y-e.deltaY}))}} onPointerDown={e=>{if(e.target===e.currentTarget||tool==='hand'){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?{...c,x:d.ox+(e.clientX-d.x)/zoom,y:d.oy+(e.clientY-d.y)/zoom}:c)})}} onPointerUp={()=>{const d=drag.current;if(d&&d.id!=='pan'){setPast(p=>[...p.slice(-29),d.before]);setFuture([])}drag.current=null}} onPointerCancel={()=>{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+320} ${from.y+150} C ${from.x+365} ${from.y+150},${to.x-45} ${to.y+150},${to.x} ${to.y+150}`}/>})}</svg>
- {doc.cards.map(c=><article key={c.id} className={`${s.card} ${selected===c.id?s.selected:''}`} style={{left:c.x,top:c.y}} onClick={()=>select(c.id)}><div className={s.cardHead} onPointerDown={e=>{if(tool==='hand')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={()=>{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><p>{c.text||'选择节点，在右侧写下你的想法。'}</p></div>}{c.kind==='prompt'&&<div className={s.disconnected}>○ 模型服务未接入 · 仅编辑提示词</div>}<footer>{c.kind==='image'?'视觉素材':c.kind==='prompt'?'镜头设计':'创作起点'}<span className={s.port}/></footer></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={()=>setZoom(z=>Math.max(.2,z-.1))}><Minus size={16}/></button><span>{Math.round(zoom*100)}%</span><button aria-label="放大" onClick={()=>setZoom(z=>Math.min(2,z+.1))}><Plus size={16}/></button><button aria-label="适应画布" onClick={fit}><Maximize size={16}/></button></div></div></section>
- <aside className={s.inspector}><div className={s.panelHeading}><Workflow size={17}/><strong>节点属性</strong><span>{doc.cards.length} 个节点</span></div>{active?<><span className={s.eyebrow}>INSPECTOR</span><h2>{active.kind==='prompt'?'把想法描述清楚':active.kind==='image'?'让参考彼此连接':'记录灵感的起点'}</h2><label>节点名称<input maxLength={200} value={active.title} onChange={e=>change('title',e.target.value)}/></label><label>{active.kind==='prompt'?'画面描述':'笔记内容'}<textarea maxLength={10000} value={active.text} onChange={e=>change('text',e.target.value)} placeholder="写下你的创作想法…"/></label>{active.kind==='image'&&<button className={s.wide} onClick={()=>file.current?.click()}><ImagePlus size={16}/>选择参考图片</button>}{active.kind==='prompt'&&<div className={s.notice}><Sparkles size={18}/><strong>为下一次创作做好准备</strong><p>提示词可保存在项目中。当前没有连接模型服务，暂不支持 AI 图片或视频生成。</p></div>}<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 className={s.wide} disabled={!link} onClick={()=>{if(!doc.links.some(l=>l[0]===selected&&l[1]===link))commit({...doc,links:[...doc.links,[selected,link]]});setLink('')}}><Link2 size={16}/>连接节点</button>{doc.links.filter(l=>l.includes(selected)).map(([a,b])=><button className={s.connection} 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} <span>断开 ×</span></button>)}<button className={s.delete} onClick={()=>{commit({...doc,cards:doc.cards.filter(c=>c.id!==selected),links:doc.links.filter(l=>!l.includes(selected))});select('')}}><Trash2 size={15}/>删除节点</button></>:<><h2>给灵感留一点空间</h2><p>选择画布中的节点来编辑，或从左侧添加新内容。</p><button className={s.wide} onClick={()=>add('text')}><Plus size={16}/>添加笔记</button></>}<div className={s.help}>拖动节点标题移动节点<br/>滚轮平移 · Ctrl / ⌘ + 滚轮缩放<br/>草稿仅存于当前浏览器，请及时导出。</div></aside></div>
+ <section className={s.canvasArea}>{!doc.cards.length&&<div className={s.startPanel}><span>YOUR NEXT IDEA STARTS HERE</span><h2>给想法，一个无限的空间。</h2><p>双击画布添加节点，或选择一个起点。</p><div><button onClick={()=>add('text')}><Type size={19}/>灵感笔记</button><button onClick={()=>file.current?.click()}><ImagePlus size={19}/>参考图片</button><button onClick={()=>add('prompt')}><Sparkles size={19}/>创作提示词</button></div><button onClick={()=>{commit(example);select('');setPan({x:0,y:0});setZoom(.7)}}>从示例开始 ↗</button><a href="/studio/api" target="_blank" rel="noreferrer">连接你的 coding agent · 接入文档 ↗</a></div>}<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} onDoubleClick={e=>{if(e.target===e.currentTarget){setMenu(null);add('text')}}} 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)setEditing('');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 {if(!d.resize&&Math.hypot(e.clientX-d.x,e.clientY-d.y)<4)return;e.currentTarget.setPointerCapture(e.pointerId);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:''} ${editing===c.id?s.editing:s.preview}`} data-node-id={c.id} style={{left:c.x,top:c.y,width:c.width||320,height:c.height||350}} onPointerDown={e=>{if(editing===c.id||tool==='hand'||e.button!==0||(e.target as HTMLElement).closest('button'))return;e.stopPropagation();setMenu(null);select(c.id);setEditing('');drag.current={id:c.id,x:e.clientX,y:e.clientY,ox:c.x,oy:c.y,before:doc}}} 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} role="button" tabIndex={0} aria-label={`替换 ${c.title} 图片`} onDoubleClick={e=>{e.stopPropagation();select(c.id);setEditing(c.id);setTool('select');setMenu(null);file.current?.click()}} onKeyDown={e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();select(c.id);setEditing(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} onDoubleClick={e=>{e.stopPropagation();if(editing===c.id)return;select(c.id);setEditing(c.id);setTool('select');setMenu(null);const body=e.currentTarget;const name=body.querySelector('input');const field=name&&e.clientY<=name.getBoundingClientRect().bottom?name:body.querySelector('textarea');requestAnimationFrame(()=>field?.focus())}}><span className={s.nodeType}>{c.kind==='prompt'?'PROMPT / 提示词':'NOTE / 灵感笔记'}</span><input readOnly={editing!==c.id} tabIndex={editing===c.id?0:-1} aria-label={`${c.title} 名称`} value={c.title} maxLength={200} onFocus={beginEdit} onChange={e=>change('title',e.target.value,c.id)}/><textarea readOnly={editing!==c.id} tabIndex={editing===c.id?0:-1} 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}>提示词已备好，交给你的 Agent 继续创作。</div>}<footer>{c.kind==='image'?'视觉素材':c.kind==='prompt'?'镜头设计':'创作起点'}<button aria-label={`${editing===c.id?'完成编辑':'编辑'} ${c.title}`} onClick={e=>{e.stopPropagation();select(c.id);setEditing(editing===c.id?'':c.id)}}>{editing===c.id?'完成':'编辑'}</button><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/layout-images.test.mjs

@@ -19,3 +19,9 @@ test('SVG export rejects unavailable or non-image objects',async()=>{
 test('SVG exports without managed images do not access storage',async()=>{
  assert.equal(await embedSvgMedia({headers:{}},'<svg><text>Title</text></svg>'),'<svg><text>Title</text></svg>');
 });
+
+test('SVG export uses the configured isolated Wiki origin',async()=>{
+ const original=globalThis.fetch,previous=process.env.STUDIO_WIKI_ORIGIN;
+ try{process.env.STUDIO_WIKI_ORIGIN='http://127.0.0.1:19000';globalThis.fetch=async url=>{assert.equal(url,'http://127.0.0.1:19000/api/media/'+id);return new Response('fixture',{headers:{'content-type':'image/png'}})};assert.ok((await embedSvgMedia({headers:{}},`<image href="/api/media/${id}"/>`)).includes('data:image/png;base64,'));}
+ finally{globalThis.fetch=original;if(previous===undefined)delete process.env.STUDIO_WIKI_ORIGIN;else process.env.STUDIO_WIKI_ORIGIN=previous;}
+});

apps/waterfall-wiki/next.config.ts

@@ -3,8 +3,15 @@ import managedMedia from "./src/content/managed-media.json";
 
 const nextConfig: NextConfig = {
   serverExternalPackages: ["playwright-core"],
+  async redirects(){return [
+    {source:'/studio/graphic',destination:'/graphic',permanent:true},
+    {source:'/studio/infinite_canvas',destination:'/infinite_canvas',permanent:true},
+    {source:'/studio',destination:'/workspace',permanent:false},
+  ]},
   async rewrites(){return [
     ...Object.entries(managedMedia).filter(([path])=>path.startsWith("apps/waterfall-wiki/public/")).map(([path,asset])=>({source:"/"+path.slice("apps/waterfall-wiki/public/".length),destination:"/api/media/"+asset.id})),
+    {source:'/graphic',destination:'http://prompt-studio:3000/studio/graphic'},
+    {source:'/infinite_canvas',destination:'http://prompt-studio:3000/studio/infinite_canvas'},
     {source:"/studio/:path*",destination:"http://prompt-studio:3000/studio/:path*"},
     {source:"/index.md",destination:"/api/agent-index"},
     {source:"/skills/index.md",destination:"/api/guidance/skills"},

apps/waterfall-wiki/scripts/auth-cli.ts

@@ -47,13 +47,15 @@ async function main() {
  if (command === 'verify' || command === 'exercise') {
   const request = (path:string,init:RequestInit={}) => fetch(base+path,{...init,redirect:'manual'});
   const buildId = readFileSync('.next/BUILD_ID','utf8').trim();
-  assert.equal((await request('/')).status,200,'Public knowledge homepage');
+  for(const path of ['/','/workspace','/documents','/account'])assert.equal((await request(path)).status,200,'Public shell '+path);
+  const studio=await request('/studio');assert.equal(studio.status,307);assert.equal(studio.headers.get('location'),'/workspace');
+  for(const [from,to] of [['/studio/graphic','/graphic'],['/studio/infinite_canvas','/infinite_canvas']]){const r=await request(from);assert.equal(r.status,308);assert.equal(r.headers.get('location'),to)}
   assert.equal((await request('/account')).status,200,'Public account page');
   const homeData = await request(`/_next/data/${buildId}/index.json`);
   assert.ok([200,404].includes(homeData.status),'Public homepage data is readable or absent for static pages');
   assert.ok(!isLoginRedirect(homeData.headers.get('location') || homeData.headers.get('x-nextjs-redirect'),base));
   assert.equal((await request('/api/posts',{method:'POST',headers:{Cookie:'wiki_account='+ 'a'.repeat(64)},body:'{}'})).status,401,'Account cookies never grant admin rights');
-  for (const path of ['/library/import','/skills/shadow-puppet/egret-example.png','/studio',`/_next/data/${buildId}/library/import.json`]) {
+  for (const path of ['/library/import','/skills/shadow-puppet/egret-example.png','/studio/layouts/ref-01',`/_next/data/${buildId}/library/import.json`]) {
    const response = await request(path); assert.equal(response.status,307,path); const destination = response.headers.get('location') || response.headers.get('x-nextjs-redirect'); assert.ok(isLoginRedirect(destination,base),path+' must redirect to login: '+destination);
   }
   for (const path of ['/api/feed','/api/upload','/studio/api/export/test','/api/media/missing']) assert.equal((await request(path)).status,401,path);

apps/waterfall-wiki/scripts/smoke.mjs

@@ -48,7 +48,13 @@ try {
   assert.equal(agent.status,200);assert.match(agent.headers.get('content-type'),/text\/plain/);const agentText=await agent.text();assert.match(agentText,/^# /);assert.doesNotMatch(agentText,/^\s*(?:<!doctype html|<html)/i);
   const preview=await fetch(`http://127.0.0.1:${port}/api/preview?source=${encodeURIComponent('/__smoke-preview.png')}&width=480`);
   assert.equal(preview.status,200);assert.match(preview.headers.get('content-type'),/image\/webp/);assert.ok((await preview.arrayBuffer()).byteLength<=100000);
-  console.log("Production smoke test passed");
+  const home=await fetch(`http://127.0.0.1:${port}/`).then(r=>r.text());
+  for(const href of ['/graphic','/infinite_canvas','/account?next=/workspace'])assert.ok(home.includes(`href="${href}"`),href);
+  for(const [legacy,canonical] of [['/studio/graphic','/graphic'],['/studio/infinite_canvas','/infinite_canvas']]){
+    const redirect=await fetch(`http://127.0.0.1:${port}${legacy}`,{redirect:'manual'});
+    assert.equal(redirect.status,308);assert.equal(redirect.headers.get('location'),canonical);
+  }
+  console.log("Production smoke test passed, including landing entry points and canonical redirects");
 } finally {
   await unlink(previewFixture);
   if (child.exitCode === null && child.signalCode === null) {

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

@@ -24,14 +24,14 @@ function localNext(value: string | string[] | undefined) {
     value.startsWith("//") ||
     /[\\\u0000-\u001f]/.test(value)
   )
-    return "/write";
+    return "/workspace";
   try {
     const url = new URL(value, "https://local.invalid");
     return url.origin === "https://local.invalid"
       ? url.pathname + url.search + url.hash
-      : "/write";
+      : "/workspace";
   } catch {
-    return "/write";
+    return "/workspace";
   }
 }
 export default function AccountPage() {
@@ -93,6 +93,7 @@ function AccountContent() {
             "如果信息符合条件，验证邮件已发送。请检查收件箱和垃圾邮件。",
         });
       await account.refresh();
+      if (name === "login") await router.push(localNext(router.query.next));
     } catch (e) {
       setFeedback({
         tone: "error",

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

@@ -1,4 +1,10 @@
-import DocumentDirectory from "@/components/DocumentDirectory";
-export default function Home() {
-  return <DocumentDirectory />;
-}
+import Head from 'next/head';
+import {ArrowUpRight, MousePointer2, Plus, Type, Image, Sparkles, Workflow, Layers, ArrowRight} from 'lucide-react';
+import s from '@/styles/landing.module.css';
+export default function Home(){return <main className={s.page}>
+<Head><title>织页 Studio · 让灵感，有形。</title><meta name="description" content="连接你的 coding agent，在图形编辑器与无限画布中，把想法组织成作品。"/></Head>
+<nav className={s.nav}><a className={s.logo} href="/">✳ <b>织页</b><span>STUDIO</span></a><div><a href="#tools">创作工具</a><a href="/documents">知识与教程</a><a href="#workflow">工作方式</a></div><a href="/account?next=/workspace">登录</a><a className={s.dark} href="/account?next=/workspace">进入工作台 <ArrowUpRight size={15}/></a></nav>
+<section className={s.hero}><p className={s.eyebrow}>A SPACE FOR HUMAN IDEAS & AGENTS</p><h1>想法不该停在对话里。<br/><span>让灵感，有形。</span></h1><p className={s.intro}>从一闪而过的念头，到值得分享的作品。<br/>连接你的 coding agent，在一张画布上，把创作继续下去。</p><div className={s.actions}><a className={s.dark} href="/account?next=/workspace">开始创作 <ArrowRight size={17}/></a><a href="#tools">探索你的创作空间 ↓</a></div><div className={s.product}><div className={s.productBar}><b>✳ STUDIO</b><span>日常的另一种可能 / 创意探索</span><span>本机草稿</span></div><div className={s.demo}><aside>工作空间<hr/>图层与素材<p>◈ 创意简报</p><p>▧ 视觉探索</p><p>✳ 镜头构思</p><small>把线索连接起来</small></aside><div className={s.demoWorld}><svg viewBox="0 0 800 330" preserveAspectRatio="none"><path d="M190 170 C300 170 260 120 360 120 S520 240 620 240"/></svg><article className={s.note}><small>01 / THE IDEA</small><h3>把日常，<br/>拍成一场电影。</h3><p>自然光、细腻颗粒，<br/>让每一帧都有呼吸感。</p></article><article className={s.art}><small>02 / VISUAL STUDY</small><div className={s.orbit}/><h3>光的形状</h3><span>LIGHT / SPACE / EMOTION</span></article><article className={s.prompt}><Sparkles size={17}/><small>03 / PROMPT</small><h3>留住清晨的光。</h3><p>窗边的植物，安静的房间。<br/>35mm 胶片，缓慢推进。</p></article><div className={s.dock}><MousePointer2/><Plus/><Type/><Image/><Sparkles/></div></div></div></div><p className={s.caption}>一个创作场景示意。你的想法、素材与工具，在这里相遇。</p></section>
+<section className={s.tools} id="tools"><p className={s.eyebrow}>TWO TOOLS. ONE CREATIVE FLOW.</p><h2>给不同的想法，<br/>恰好的空间。</h2><div className={s.toolGrid}><a href="/graphic"><Layers/><span>01 / GRAPHIC</span><h3>把灵感排成作品。</h3><p>文字、图形与图片自由编排。精确调整图层和位置，把设计导出为 SVG。</p><div className={s.poster}><span>MAKE<br/>ROOM<br/><i>for ideas.</i></span><b>✳</b></div><strong>打开图形编辑器 <ArrowUpRight size={17}/></strong></a><a href="/infinite_canvas"><Workflow/><span>02 / INFINITE CANVAS</span><h3>让思路，自由生长。</h3><p>把笔记、参考图与提示词连成线索。在无限画布上平移、缩放，整理下一次创作。</p><div className={s.miniCanvas}><b>一个念头</b><i>⟶</i><b>一张参考</b><i>⟶</i><b>新的可能</b></div><strong>打开无限画布 <ArrowUpRight size={17}/></strong></a></div></section>
+<section className={s.workflow} id="workflow"><div><p className={s.eyebrow}>YOUR AGENT. YOUR WORKFLOW.</p><h2>用熟悉的 Agent，<br/>继续你的创作。</h2><p>通过项目已有的 API 与文档，让 coding agent 理解模板和创作内容。画布负责呈现，你来决定下一步。</p><a href="/studio/api">查看 Agent 接入文档 <ArrowUpRight size={16}/></a></div><ol><li><b>01</b><div><h3>找到起点</h3><p>从空白设计、素材或一段灵感出发。</p></div></li><li><b>02</b><div><h3>连接工作方式</h3><p>将接入文档交给你的 coding agent。</p></div></li><li><b>03</b><div><h3>亲手打磨，保存作品</h3><p>在编辑器中调整细节，导出并保留备份。</p></div></li></ol></section>
+<section className={s.end}><span>✳</span><h2>下一件作品，<br/>从这里开始。</h2><a className={s.dark} href="/account?next=/workspace">进入你的工作台 <ArrowRight size={17}/></a></section><footer className={s.footer}><a className={s.logo} href="/">✳ 织页 STUDIO</a><span>给想法留白，给创作空间。</span><a href="/documents">知识与教程 ↗</a></footer></main>}

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

@@ -0,0 +1,5 @@
+import Head from 'next/head';
+import {useEffect,useState} from 'react';
+import {ArrowUpRight, Layers, Workflow, BookOpen, Link2} from 'lucide-react';
+import s from '@/styles/workspace.module.css';
+export default function Workspace(){const [email,setEmail]=useState(''),[state,setState]=useState('loading');useEffect(()=>{fetch('/api/account/session').then(async r=>{if(!r.ok)throw Error();const d=await r.json();if(!d.user){window.location.replace('/account?next=/workspace');return}setEmail(d.user.email);setState('ready')}).catch(()=>setState('error'))},[]);return <main className={s.app}><Head><title>工作台 · 织页 Studio</title></Head><aside><a className={s.brand} href="/">✳ 织页 <small>STUDIO</small></a><span>你的工作空间</span><a aria-current="page" href="/workspace">◈ 创作概览</a><a href="/graphic"><Layers size={16}/>图形设计</a><a href="/infinite_canvas"><Workflow size={16}/>无限画布</a><a href="/documents"><BookOpen size={16}/>知识与教程</a><a href="/studio/api"><Link2 size={16}/>Agent 接入文档</a><a className={s.account} href="/account">{email||'账户设置'} ↗</a></aside><section>{state==='loading'?<p role="status">正在打开你的工作台…</p>:state==='error'?<p role="alert">暂时无法读取账户。<a href="/account?next=/workspace">重新登录</a></p>:<><header><span>WORKSPACE / OVERVIEW</span><a href="/account">账户设置 ↗</a></header><p className={s.kicker}>MAKE SOMETHING THAT MATTERS.</p><h1>今天，让哪个想法成形？</h1><p className={s.sub}>选一个空间，开始你的下一次创作。</p><div className={s.grid}><a href="/graphic"><Layers/><small>GRAPHIC</small><h2>图形设计</h2><p>在文字、图形与图像之间，找到你的表达。</p><div className={s.poster}>Ideas,<br/><i>in shape.</i><b>✳</b></div><strong>打开编辑器 <ArrowUpRight size={18}/></strong></a><a href="/infinite_canvas"><Workflow/><small>INFINITE CANVAS</small><h2>无限画布</h2><p>收集灵感、连接参考，让思路自由生长。</p><div className={s.canvas}><span>灵感</span>⟶<span>参考</span>⟶<span>作品</span></div><strong>打开画布 <ArrowUpRight size={18}/></strong></a></div><div className={s.agent}><Link2/><div><h3>带上你的 coding agent</h3><p>从接入文档开始，使用已有的创作 API。连接由你的 Agent 发起。</p></div><a href="/studio/api">查看文档 ↗</a></div><p className={s.hint}>编辑器草稿保存在当前浏览器。更换设备前，请先导出项目备份。</p></>}</section></main>}

apps/waterfall-wiki/src/proxy.ts

@@ -4,7 +4,7 @@ export function proxy(request: NextRequest) {
  const path = request.nextUrl.pathname;
  const responseHeaders = {'Cache-Control':'private, no-store', 'Referrer-Policy':'same-origin'};
  // Public knowledge pages are read-only. Account handlers enforce their own origin and session checks.
- const publicRead = ['GET','HEAD'].includes(request.method) && (path === '/' || path === '/protocol' || ['/llms.txt','/index.md','/agent','/agent/index.md','/api/agent-index','/api/guides'].includes(path) || path.startsWith('/guide/') || path.startsWith('/api/guides/'));
+ const publicRead = ['GET','HEAD'].includes(request.method) && (path === '/' || ['/workspace','/graphic','/infinite_canvas','/studio','/studio/graphic','/studio/infinite_canvas','/studio/api'].includes(path) || path.startsWith('/studio/_next/') || path === '/protocol' || ['/llms.txt','/index.md','/agent','/agent/index.md','/api/agent-index','/api/guides'].includes(path) || path.startsWith('/guide/') || path.startsWith('/api/guides/'));
  if (path === '/write' || path === '/documents' || path.startsWith('/documents/') || path === '/api/documents' || path.startsWith('/api/documents/') || publicRead || path === '/account' || path.startsWith('/api/account/')) return NextResponse.next({headers:{...responseHeaders,'Referrer-Policy':'no-referrer'}});
  if (path === '/brand-mark.svg' || path === '/login' || path === '/api/auth/login' || path === '/api/auth/logout' || path === '/api/health' || path === '/api/ready' || path.startsWith('/_next/static/')) return NextResponse.next({headers:responseHeaders});
  let config;

apps/waterfall-wiki/src/styles/workspace.module.css

@@ -0,0 +1 @@
+.app{display:flex;min-height:100dvh;background:#fafaf8;color:#30352c;font-family:Arial,'PingFang SC',sans-serif}.app *{box-sizing:border-box}.app a{color:inherit;text-decoration:none}.app>aside{width:230px;flex-shrink:0;border-right:1px solid #e0e3da;background:#f3f4ef;padding:30px 20px;display:flex;flex-direction:column;gap:9px}.brand{font-size:22px;font-weight:600;margin-bottom:45px}.brand small{font-size:9px;letter-spacing:1px;color:#87917c}.app aside>span{font-size:10px;color:#99a08f;margin-bottom:10px;padding-left:10px}.app aside>a:not(.brand){display:flex;align-items:center;gap:12px;font-size:12px;padding:12px;border-radius:7px}.app aside>a[aria-current]{background:#e5eadb}.app aside>.account{margin-top:auto;overflow-wrap:anywhere}.app>section{padding:35px 55px;max-width:1250px;width:100%;margin:auto;min-height:100dvh}.app header{display:flex;justify-content:space-between;color:#8d9582;font-size:10px;letter-spacing:1px}.kicker{font-size:10px;letter-spacing:2px;color:#8a9876;margin-top:65px}.app h1{font-size:34px;font-weight:500;letter-spacing:-1px;margin:18px 0}.sub{font-size:13px;color:#929887}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.grid>a{background:white;border:1px solid #dfe3d6;border-radius:12px;padding:26px;transition:transform .2s}.grid>a:hover{transform:translateY(-3px)}.grid small{font-size:9px;letter-spacing:1.5px;margin-left:12px;color:#909b82}.grid>a>svg{vertical-align:middle;width:20px;color:#7b8c65}.grid h2{font-size:23px;font-weight:500;margin:24px 0 12px}.grid p{font-size:12px;color:#929a87;line-height:1.8}.poster,.canvas{height:190px;margin:25px 0;background:#ecf0e3;position:relative;overflow:hidden;border-radius:5px}.poster{padding:25px;font-size:40px;line-height:1;font-weight:600;letter-spacing:-2px}.poster i{font-family:Georgia,serif;font-weight:400}.poster b{position:absolute;right:0;top:12px;font-size:155px;color:#a7b88b}.canvas{display:flex;align-items:center;justify-content:center;gap:12px;background:radial-gradient(#c5cfb8 1px,transparent 1px) 0 0/18px 18px,#f3f5ef;color:#91a276}.canvas span{background:white;border:1px solid #d5ddc9;padding:20px 13px;font-size:12px;border-radius:6px;color:#59684a}.grid strong{display:flex;justify-content:space-between;font-size:12px;font-weight:400}.agent{display:flex;align-items:center;gap:18px;border:1px solid #dde3d1;border-radius:10px;padding:23px;margin-top:28px}.agent>svg{color:#83956c}.agent h3{font-size:14px;margin:0 0 8px}.agent p{font-size:11px;color:#8a947d;margin:0;line-height:1.8}.agent a{margin-left:auto;font-size:12px;white-space:nowrap}.hint{font-size:10px;color:#a1a793;margin-top:25px}.app a:focus-visible{outline:2px solid #718358;outline-offset:4px}@media(max-width:850px){.app>aside{width:180px}.app>section{padding:30px 25px}.grid{gap:15px}.grid>a{padding:20px}.app h1{font-size:28px}.canvas{gap:5px}.canvas span{padding:15px 8px}}@media(max-width:600px){.app{display:block}.app>aside{width:100%;flex-direction:row;flex-wrap:wrap;padding:18px;gap:5px;border-right:0;border-bottom:1px solid #ddd}.brand{margin:0;width:100%}.app aside>span,.app aside>.account{display:none}.app aside>a:not(.brand){padding:8px;font-size:10px}.grid{grid-template-columns:1fr}.kicker{margin-top:35px}.agent{flex-wrap:wrap}.agent a{margin-left:0}}

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

@@ -30,13 +30,18 @@ test('cookies are HTTP-only and secure by default; redirects stay local',()=>{
  for(const path of ['https://evil.test','//evil.test','/\\evil.test','/login?next=/','/\nLocation: bad']) assert.equal(safeReturn(path),'/');
  assert.equal(safeReturn('/explore/123?q=test'),'/explore/123?q=test');
 });
-test('proxy protects APIs, data routes, static content and Studio; fails closed',()=>{
+test('proxy exposes creative entry pages while protecting APIs, data and Studio documents; fails closed',()=>{
  const temp=mkdtempSync(join(tmpdir(),'prompt-auth-')); const old=process.env.AUTH_CONFIG_FILE;
  try{
   const config=newAuthConfig(); process.env.AUTH_CONFIG_FILE=join(temp,'config.json'); writeFileSync(process.env.AUTH_CONFIG_FILE,JSON.stringify(config));
-  for(const path of ['/library/import','/skills/example.png','/_next/data/build/library/import.json','/studio']) assert.equal(proxy(new NextRequest('http://wiki.test'+path)).status,307,path);
-  for(const path of ['/api/upload','/studio/api/export','/api/feed']) assert.equal(proxy(new NextRequest('http://wiki.test'+path)).status,401,path);
+  for(const path of ['/library/import','/skills/example.png','/_next/data/build/library/import.json','/studio/layouts/ref-01']) assert.equal(proxy(new NextRequest('http://wiki.test'+path)).status,307,path);
+  for(const path of ['/api/upload','/studio/api/export','/studio/api/layouts','/api/feed']) assert.equal(proxy(new NextRequest('http://wiki.test'+path)).status,401,path);
   for(const path of ['/','/_next/data/build/index.json','/llms.txt','/index.md','/agent','/agent/index.md','/api/agent-index','/api/guides','/write','/documents','/api/documents','/api/documents/preview','/guide/welcome','/protocol','/api/guides/welcome','/account','/api/account/session','/login','/brand-mark.svg','/_next/static/chunk.js','/api/health','/api/ready']) assert.equal(proxy(new NextRequest('http://wiki.test'+path)).status,200,path);
+  const creativeEntries=['/workspace','/graphic','/infinite_canvas','/studio','/studio/graphic','/studio/infinite_canvas','/studio/api','/studio/_next/static/chunk.js'];
+  for(const path of creativeEntries){
+   for(const method of ['GET','HEAD'])assert.equal(proxy(new NextRequest('http://wiki.test'+path,{method})).status,200,`${method} ${path}`);
+   assert.equal(proxy(new NextRequest('http://wiki.test'+path,{method:'POST'})).status,401,`POST ${path} must not bypass authentication`);
+  }
   const headers={cookie:'prompt_session='+signSession(config),host:'wiki.test'};
   assert.equal(proxy(new NextRequest('http://wiki.test/api/feed',{headers})).status,200);
   assert.equal(proxy(new NextRequest('http://wiki.test/api/posts',{method:'POST',headers:{...headers,origin:'http://evil.test'}})).status,403);

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

@@ -1,4 +1,5 @@
 import assert from 'node:assert/strict';
+import {verifyGuidanceWorkspaceUI} from './guidance-workspace-ui';
 import {chromium} from 'playwright-core';
 import {randomUUID} from 'node:crypto';
 import {newToken,tokenDigest,ACCOUNT_COOKIE} from '../src/lib/account-crypto';
@@ -30,12 +31,22 @@ export async function verifyGuidancePublishing(base:string){
  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.
+ const directory=await fetch(base+'/api/documents');assert.equal(directory.status,200);assert.ok((await directory.json()).documents.some((d:{id:string})=>d.id===httpDoc.id),'Published document must appear in the public API');
+ // The document discovery list hydrates from the real API; the homepage is the product landing page.
  const browser=await chromium.launch({executablePath:process.env.CHROMIUM_PATH||'/usr/bin/chromium',headless:true,args:['--no-sandbox','--disable-dev-shm-usage']});
  try{
   const page=await browser.newPage();
+  const navigationDiagnostics:string[]=[],inflight=new Set<string>();
+  const record=(value:string)=>{navigationDiagnostics.push(value.slice(0,1800));if(navigationDiagnostics.length>24)navigationDiagnostics.shift();};
+  page.on('pageerror',error=>record('pageerror: '+error.message));
+  page.on('console',message=>{if(message.type()==='error')record('console: '+message.text());});
+  page.on('request',request=>inflight.add(request.url()));
+  page.on('requestfinished',request=>inflight.delete(request.url()));
+  page.on('requestfailed',request=>{inflight.delete(request.url());record('requestfailed: '+new URL(request.url()).pathname+' '+request.failure()?.errorText)});
+  page.on('response',response=>{const path=new URL(response.url()).pathname;if(path.startsWith('/api/')||path.includes('/_next/data/'))void response.text().then(body=>record(`data ${response.status()} ${path}: ${body.slice(0,1400)}`)).catch(()=>{});else if(response.status()>=400||response.request().resourceType()==='script')record(`resource ${response.status()} ${path}`);});
+  try{
   const link=`a[href="/documents/${httpDoc.id}?revision=1"]`;
-  await page.goto(base+'/',{waitUntil:'domcontentloaded'});
+  const navigation=await page.goto(base+'/documents',{waitUntil:'domcontentloaded'});record('directory HTTP '+navigation?.status());
   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:'搜索文档'});
@@ -54,8 +65,15 @@ export async function verifyGuidancePublishing(base:string){
   await page.locator(link).waitFor({state:'visible'});
   assert.equal(await search.inputValue(),'');
   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.locator(link).click();
+  await page.waitForURL(url=>url.pathname==='/documents/'+httpDoc.id&&url.searchParams.get('revision')==='1');
+  await page.getByRole('heading',{name:httpDoc.title,exact:true,level:1}).waitFor();
+  assert.equal(await page.locator('h1').textContent(),httpDoc.title);
   await page.goto(base+'/write',{waitUntil:'domcontentloaded'});assert.equal(await page.locator('h1').textContent(),'发布独立文档');
+  }catch(error){console.error('Document navigation diagnostics',JSON.stringify({url:page.url(),headings:await page.locator('h1').allTextContents(),body:(await page.locator('body').innerText()).slice(0,2200),inflight:[...inflight].map(url=>new URL(url).pathname),events:navigationDiagnostics}));throw error;}
+  await page.close();
+  await verifyGuidanceWorkspaceUI(base,browser);
+  console.log('Workspace desktop/mobile, filters, reading, account and publishing assertions passed in a fresh browser context');
  }finally{await browser.close();}
  assert.equal((await request('/'+httpDoc.id,'DELETE',undefined,{cookie:''})).status,401);
  assert.equal((await request('/'+httpDoc.id,'DELETE')).status,200);

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

@@ -0,0 +1,325 @@
+/** UI fixtures run in a fresh context; real storage and authentication have separate coverage. */
+import assert from "node:assert/strict";
+import { mkdir } from "node:fs/promises";
+import type { Browser } from "playwright-core";
+import { documentInput, parseDocumentXml } from "../src/lib/guidance-input";
+import { guidanceXml, type Guidance } from "../src/content/guides/catalog";
+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: [],
+};
+export async function verifyGuidanceWorkspaceUI(base: string, browser: Browser) {
+  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));
+    page.on("crash", () => errors.push("Browser renderer crashed"));
+    const pending = new Set<string>(), network: string[] = [];
+    page.on("request", request => pending.add(request.url()));
+    page.on("requestfinished", request => pending.delete(request.url()));
+    page.on("requestfailed", request => {pending.delete(request.url());network.push(new URL(request.url()).pathname+": "+request.failure()?.errorText);});
+    async function navigate(url: string, reload = false) {
+      const session = page.waitForResponse(response => new URL(response.url()).pathname === "/api/account/session" && response.status() === 200);
+      try {
+        const [navigation] = await Promise.all([reload ? page.reload({waitUntil:"domcontentloaded"}) : page.goto(url,{waitUntil:"domcontentloaded"}),session]);
+        assert.ok(navigation?.ok(), "Navigation returns a successful document");
+        await page.getByText(signedIn ? "editor@example.com" : "登录你的账户",{exact:true}).first().waitFor({state:"attached"});
+      } catch (error) {
+        const probeStarted=Date.now();
+        const server=await fetch(url,{signal:AbortSignal.timeout(3000)}).then(async response=>{await response.body?.cancel();return {status:response.status,elapsedMs:Date.now()-probeStarted}}).catch(error=>({error:error instanceof Error?error.name:"unknown",elapsedMs:Date.now()-probeStarted}));
+        console.error("Workspace UI navigation diagnostics",JSON.stringify({url:page.url(),browserConnected:browser.isConnected(),server,pending:[...pending].map(value=>new URL(value).pathname),network:network.slice(-20),errors,body:(await page.locator("body").innerText().catch(()=>"unavailable")).slice(0,1600)}));
+        throw error;
+      }
+    }
+
+    await navigate(base + "/documents");
+    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 navigate(page.url(), true);
+    await page.getByRole("heading",{name:"没有匹配文档",exact:true}).waitFor();
+    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 navigate(base + "/guide/review-changes?revision=1");
+    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 navigate(base + "/account");
+    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 navigate(base + "/write");
+    await page.getByRole("heading", { name: "登录后开始编写" }).waitFor();
+    signedIn = true;
+    await navigate(page.url(), true);
+    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 navigate(base + "/documents?scope=mine");
+    await page
+      .getByRole("heading", { name: authored.title, exact: true })
+      .waitFor();
+    assert.equal(requestedAuthor, owner);
+    await navigate(base + "/write?id=" + authored.id);
+    await page.waitForFunction(title=>Array.from(document.querySelectorAll<HTMLInputElement>("input")).some(input=>input.value===title),authored.title);
+    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 navigate(base + "/documents");
+    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 navigate(base + "/guide/review-changes?revision=1");
+    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 navigate(base + "/account");
+    assert.equal(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= window.innerWidth,
+      ),
+      true,
+    );
+    await navigate(base + "/write");
+    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 navigate(base + "/protocol");
+    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();
+  }
+}

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

@@ -1,326 +1,13 @@
-/** 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";
+import { verifyGuidanceWorkspaceUI } from "./guidance-workspace-ui";
 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();
-    }
-  },
-);
+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", "--disable-dev-shm-usage"],
+  });
+  try { await verifyGuidanceWorkspaceUI(base!, browser); }
+  finally { await browser.close(); }
+});

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

@@ -33,8 +33,6 @@ 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');
@@ -230,8 +228,11 @@ 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?revision=1'])assert.ok(home.includes('href=\"'+href+'\"'),`Guidance homepage links to ${href}`);
-  assert.ok(home.includes('社区发布'));assert.ok(home.includes('协议样例'));
+  for(const href of ['/documents','/graphic','/infinite_canvas','/account?next=/workspace'])assert.ok(home.includes('href="'+href+'"'),`Landing page links to ${href}`);
+  assert.ok(home.includes('让灵感，有形。'));
+  for(const [oldPath,newPath] of [['/studio/graphic','/graphic'],['/studio/infinite_canvas','/infinite_canvas']]){
+   const response=await fetch(base+oldPath,{redirect:'manual'});assert.equal(response.status,308);assert.equal(response.headers.get('location'),newPath);
+  }
   // 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/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.

scripts/deploy-studio.sh

@@ -8,7 +8,7 @@ flock -w 300 9
 latest=$(git -c safe.directory="$PWD" ls-remote origin refs/heads/main | cut -f1)
 if [ "$latest" != "$sha" ]; then
   git -c safe.directory="$PWD" fetch origin main
-  git -c safe.directory="$PWD" diff --quiet "$sha" origin/main -- apps/studio scripts/deploy-studio.sh .gitea/workflows/studio.yml pnpm-workspace.yaml || exit 0
+  git -c safe.directory="$PWD" diff --quiet "$sha" origin/main -- apps/studio scripts/deploy-studio.sh .gitea/workflows/waterfall-wiki.yml pnpm-workspace.yaml || exit 0
 fi
 mkdir -p /opt/prompt-studio
 previous=$(cat /opt/prompt-studio/image 2>/dev/null || true)

scripts/verify-studio-production.sh

@@ -1,6 +1,12 @@
 #!/usr/bin/env bash
 # Run on ces-control after deployment; never starts a preview web server.
 set -Eeuo pipefail
+# The shared release job deploys Wiki before Studio; a missing route is an error,
+# not a reason to occupy this runner while another queued job tries to deploy it.
+if ! curl -fsS http://8.211.154.134:18131/ | grep -q '想法不该停在对话里'; then
+ echo 'The shared release has not deployed the Wiki landing and canonical routes'
+ exit 1
+fi
 REPO_ROOT=$(git rev-parse --show-toplevel)
 RESULT_DIR="$REPO_ROOT/artifacts/studio-acceptance"
 MODE=${1:-verify}

scripts/verify-studio-visual.cjs

@@ -23,8 +23,9 @@ 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(new URL(page.url()).pathname,'/studio/graphic');
+ await page.goto(base+'/',{waitUntil:'networkidle'});await page.getByRole('heading',{name:/想法不该停在对话里/}).waitFor();await page.screenshot({path:dir+'/landing-desktop.png',fullPage:true});
+ await page.goto(base+'/graphic',{waitUntil:'networkidle'});
+ assert.equal(new URL(page.url()).pathname,'/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();
@@ -32,8 +33,8 @@ const assert=require('node:assert/strict');
  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.goto(base+'/infinite_canvas',{waitUntil:'networkidle'});
+ assert.equal(new URL(page.url()).pathname,'/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'));
@@ -47,7 +48,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+'/graphic-mobile.png',fullPage:true});
+ await page.setViewportSize({width:390,height:844});await page.goto(base+'/graphic',{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));