Preserve the Studio agent documentation response handler

Reviewed-on: #3

.gitea/workflows/studio.yml

@@ -34,9 +34,6 @@ jobs:
       - name: Release studio
         if: gitea.ref == 'refs/heads/main' && (gitea.event_name == 'push' || gitea.event_name == 'workflow_dispatch')
         run: bash scripts/deploy-studio.sh "${{ gitea.sha }}"
-      - name: Capture deployed baseline diagnostics (does not validate PR code)
-        if: gitea.event_name == 'pull_request'
-        run: bash scripts/verify-studio-production.sh --diagnose
       - name: Verify the deployed Studio API and native pages
         if: gitea.ref == 'refs/heads/main' && (gitea.event_name == 'push' || gitea.event_name == 'workflow_dispatch')
         run: bash scripts/verify-studio-production.sh

apps/studio/scripts/smoke.mjs

@@ -1,17 +1,22 @@
 /** CI-only isolated runtime checks, never a local preview workflow. */
 import {spawn} from 'node:child_process';import {once} from 'node:events';import {createServer} from 'node:net';import {createServer as createHttpServer} from 'node:http';import assert from 'node:assert/strict';import {setTimeout} from 'node:timers/promises';
 const designId='00000000-0000-4000-8000-000000000001',missingId='00000000-0000-4000-8000-000000000002';
+const standardId='00000000-0000-4000-8000-000000000003';
 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(designId)){res.writeHead(404);return res.end('{}')}res.end(JSON.stringify({design:{id:designId,name:'已保存的实际页面',layoutId:'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'}}}))});
+const wiki=createHttpServer((req,res)=>{reads++;assert.equal(req.headers.cookie,'session=smoke-test');res.setHeader('Content-Type','application/json');const standard=req.url.endsWith(standardId);if(!standard&&!req.url.endsWith(designId)){res.writeHead(404);return res.end('{}')}res.end(JSON.stringify({design:{id:standard?standardId:designId,name:'已保存的实际页面',layoutId:standard?'standard-01':'ref-01',revision:3,url:'/studio/designs/'+designId,parameters:{added:[{id:'user-smoke',kind:'text',role:'Added text',box:[10,10,20,10],direction:'horizontal',text:'新增元素已恢复',reading:'custom'}],layers:{T01:{x:12,rotation:25,opacity:.7},'user-smoke':{z:12}},texts:{T01:{value:'确定的页面文字',color:'#123456'}},images:{I01:{color:'#abcdef'}},decorations:{D01:{hidden:true}},paper:'#eeeeee'}}}))});
 wiki.listen(0,'127.0.0.1');await once(wiki,'listening');
 const socket=createServer();socket.listen(0,'127.0.0.1');await once(socket,'listening');const port=socket.address().port;await new Promise(r=>socket.close(r));const child=spawn(process.execPath,['.next/standalone/server.js'],{env:{...process.env,PORT:String(port),HOSTNAME:'127.0.0.1',STUDIO_WIKI_ORIGIN:'http://127.0.0.1:'+wiki.address().port},stdio:'inherit'}),base='http://127.0.0.1:'+port;
 try{let ready=false;for(let i=0;i<60;i++){try{if((await fetch(base+'/studio/api/health')).ok){ready=true;break}}catch{}await setTimeout(250)}assert.ok(ready);const library=await fetch(base+'/studio').then(r=>r.text());assert.ok(library.includes('standard-01'));assert.ok(library.includes('ref-27'));const catalog=await fetch(base+'/studio/api/layouts').then(r=>r.json());assert.equal(catalog.layouts.length,28);
-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/.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;'));}
+for(const l of catalog.layouts){const page=await fetch(base+l.url);assert.equal(page.status,200,l.id);const html=await page.text();assert.ok(html.includes(l.name));assert.ok(html.includes('data-layout-id="'+l.id+'"'));assert.ok(!/<svg|<img|data:image|trial-controls|page-tools|workbench-top|contenteditable|编辑页面/.test(html),'Default page must use native elements, not source imagery');const schema=await fetch(base+l.api).then(r=>r.json());assert.equal(schema.id,l.id);for(const s of schema.elements)assert.ok(html.includes('data-element="'+s.id+'"'));if(l.family==='standard'){assert.equal((await fetch(base+l.api+'?format=svg')).status,400);continue;}const original=await fetch(base+l.api+'?format=svg').then(r=>r.text());assert.ok(original.includes('data-layout-id="'+l.id+'"'));const text=schema.elements.find(e=>e.kind==='text');const result=await fetch(base+l.api,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({texts:{[text.id]:{value:'API render <test>'}}})});assert.equal(result.status,200);assert.ok((await result.text()).includes('&lt;'));}
 assert.equal(reads,0,'Default pages never load a saved design');
 const headers={cookie:'session=smoke-test'};
-const saved=await fetch(base+'/studio/layouts/ref-01?id='+designId,{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="'+designId+'"'));assert.ok(savedHtml.includes('#123456'));assert.ok(!savedHtml.includes('data-element="D01"'));assert.ok(!savedHtml.includes('data:image'));
+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));
+}
+for(const path of ['/studio/template-layout','/studio/template-layout?id=invalid','/studio/template-layout?id='+missingId,'/studio/template-layout?id='+designId+'&id='+standardId])assert.equal((await fetch(base+path,{headers})).status,404);
 assert.equal((await fetch(base+'/studio/layouts/ref-02?id='+designId,{headers})).status,404);
 assert.equal((await fetch(base+'/studio/layouts/ref-01?id='+missingId,{headers})).status,404);
 const beforeInvalid=reads;assert.equal((await fetch(base+'/studio/layouts/ref-01?id=invalid',{headers})).status,404);assert.equal(reads,beforeInvalid);
-const legacy=await fetch(base+'/studio/designs/'+designId,{headers,redirect:'manual'});assert.equal(legacy.status,307);assert.equal(legacy.headers.get('location'),'/studio/layouts/ref-01?id='+designId);
+const legacy=await fetch(base+'/studio/designs/'+designId,{headers,redirect:'manual'});assert.equal(legacy.status,307);assert.equal(legacy.headers.get('location'),'/studio/template-layout?id='+designId);
+const old=await fetch(base+'/studio/layouts/ref-01?id='+designId,{headers,redirect:'manual'});assert.equal(old.status,307);assert.equal(old.headers.get('location'),'/studio/template-layout?id='+designId);
 assert.equal((await fetch(base+'/studio/layouts/ref-28')).status,404);assert.equal((await fetch(base+'/studio/api/layouts/ref-01',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({texts:{I01:{value:'bad'}}})})).status,400);console.log('All 27 native pages, server-loaded saved IDs, legacy redirects and render APIs passed');}finally{child.kill('SIGTERM');await once(child,'exit');await new Promise(r=>wiki.close(r))}

apps/studio/src/components/NativeResult.tsx

@@ -0,0 +1,28 @@
+import Head from 'next/head';
+import type {CSSProperties} from 'react';
+import type {AddedSlot,Layout,Parameters} from '../lib/layout-parameters';
+import {CurvedCopy} from './NativeCurvedCopy';
+import {decorationKind,defaultText,emptyParameters,imageShape,paperColor,slotPosition,textColor,textSize,type Design} from '../lib/native-layout';
+
+/** A saved result contains artwork only: no editing state, controls or event handlers. */
+export function NativeResult({layout,design}:{layout:Layout;design:Design|null}){
+ const params:Parameters=design?.parameters||emptyParameters();
+ const elements=[...layout.elements,...(params.added||[])];
+ return <main className="native-layout-page">
+  <Head><title>{design?.name||layout.name} · Prompt</title><meta name="description" content={layout.name+' · 排版结果'}/></Head>
+  <article className={'native-layout '+layout.id} aria-label={design?.name||layout.name} data-layout-id={layout.id} data-design-id={design?.id} style={{aspectRatio:`${layout.width}/${layout.height}`,backgroundColor:params.paper||paperColor(layout.id)}}>
+   {['image','decoration','text'].flatMap(kind=>elements.filter(s=>s.kind===kind).map(s=>{
+    const t=params.texts[s.id],im=params.images[s.id],d=params.decorations[s.id],ls=params.layers?.[s.id]||{};
+    if(ls.hidden||(kind==='decoration'&&d?.hidden))return null;
+    const text=t?.value??defaultText(layout,s);
+    const position:CSSProperties={...slotPosition(layout,{...s,box:[ls.x??s.box[0],ls.y??s.box[1],ls.width??s.box[2],ls.height??s.box[3]]}),transform:`rotate(${ls.rotation||0}deg)`,opacity:ls.opacity??1,borderRadius:ls.radius===undefined?undefined:`${ls.radius/layout.width*100}cqw`,zIndex:ls.z??(kind==='text'?3:kind==='image'?1:2)};
+    const textStyle:CSSProperties={fontSize:`${(t?.fontSize??textSize(layout,s,text)*(t?.scale||1))/layout.width*100}cqw`,color:t?.color||textColor(layout.id,s),fontFamily:t?.fontFamily==='serif'?'Georgia,serif':t?.fontFamily==='mono'?'monospace':t?.fontFamily==='sans'?'Arial,sans-serif':undefined,fontWeight:t?.fontWeight,lineHeight:t?.lineHeight,letterSpacing:t?.letterSpacing===undefined?undefined:`${t.letterSpacing/layout.width*100}cqw`,textAlign:t?.align==='middle'?'center':t?.align==='end'?'right':'left'};
+    return <div key={s.id} className={'native-element native-'+kind} data-element={s.id} aria-label={s.role} style={position}>
+     {kind==='text'?(s.direction==='curved'?<CurvedCopy layout={layout} slot={s} value={text} spacing={t?.letterSpacing} style={textStyle}/>:<div className={'native-copy direction-'+s.direction} style={textStyle}>{text}</div>):kind==='image'?<div className="native-image-fill" style={{...imageShape(layout,s),...(im?.color?{backgroundColor:im.color}:{}),...(ls.radius!==undefined?{borderRadius:`${ls.radius/layout.width*100}cqw`}:{})}}>
+      {im?.assetId&&<img src={'/api/preview?'+new URLSearchParams({source:'/api/media/'+im.assetId,width:'960'})} srcSet={[240,480,960,1280].map(width=>'/api/preview?'+new URLSearchParams({source:'/api/media/'+im.assetId!,width:String(width)})+' '+width+'w').join(',')} sizes={`(max-width: 860px) ${Math.min(100,(ls.width??s.box[2])/layout.width*100)}vw, ${Math.min(860,(ls.width??s.box[2])/layout.width*860)}px`} alt={s.role} style={{objectFit:im.fit||'cover',objectPosition:`${im.cropX??50}% ${im.cropY??50}%`,transform:`scale(${im.zoom??1})`}}/>}
+     </div>:<div className={'native-decoration decoration-'+((s as AddedSlot).shape?'solid':decorationKind(s))} style={{borderRadius:ls.radius!==undefined?`${ls.radius/layout.width*100}cqw`:(s as AddedSlot).shape==='ellipse'?'50%':undefined,color:d?.color||'#83908a',backgroundColor:(s as AddedSlot).shape?d?.color||'#83908a':decorationKind(s)==='band'?d?.color||'#dce1d8':undefined}}>{decorationKind(s)==='lines'&&Array.from({length:s.box[3]>4?3:1},(_,i)=><i key={i}/>)}{decorationKind(s)==='vertical-lines'&&<><i/><i/><i/></>}</div>}
+    </div>;
+   }))}
+  </article>
+ </main>;
+}

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

@@ -5,7 +5,7 @@ export type Design={id:string;name:string;layoutId:string;parameters:Parameters;
 // getRandomValues is available on the deployment's HTTP origin; randomUUID is not.
 export const newElementId=()=> 'user-'+Array.from(globalThis.crypto.getRandomValues(new Uint32Array(4)),n=>n.toString(16).padStart(8,'0')).join('');
 export const emptyParameters=():Parameters=>({texts:{},images:{},decorations:{}});
-export const designUrl=(layoutId:string,id:string)=>`/studio/layouts/${layoutId}?id=${id}`;
+export const designUrl=(_layoutId:string,id:string)=>`/studio/template-layout?id=${id}`;
 export function nativeLayout(layout:Layout):Layout {
  return {id:layout.id,name:layout.name,width:layout.width,height:layout.height,elements:layout.elements.map(({id,kind,role,box,direction,text,reading})=>({id,kind,role,box,direction,text,reading}))};
 }

apps/studio/src/pages/api/layouts/[id].ts

@@ -15,7 +15,7 @@ const workspaceSchema={
 };
 export default async function handler(req:NextApiRequest,res:NextApiResponse){
  res.setHeader('Cache-Control','no-store');
- if(String(req.query.agent_mode).toLowerCase()==='true'&&['GET','HEAD'].includes(req.method||'')){res.setHeader('Content-Type','text/plain; charset=utf-8');if(req.method==='HEAD')return res.status(200).end();return res.send(`# 扩展编辑参数\n${JSON.stringify(workspaceSchema,null,2)}\n\n# 排版参数与渲染 API\n\nGET /studio/api/layouts/{id} 返回模板尺寸、T/I/D 构件 ID、坐标、原始文字可辨识状态与默认参数。id 为 standard-01（标准图文）或 ref-01 .. ref-27（固定构图）。standard-01 仅返回原生模板参数，不提供兼容 SVG。\n页面 /studio/layouts/{id} 直接提供原生 HTML/CSS 默认排版，不加载原图。带 ?id={designId} 在服务端加载已保存页面；ID 与排版不匹配或不存在返回404。右键或编辑页面可调整元素。\nGET 同地址 ?format=svg 是兼容的原图图层导出，与原生页面使用的 HTML/CSS 不同。POST JSON 参数返回 SVG，不自动保存。?format=json 返回规范化参数。\n参数整体形状：{texts:{T01:{value:"标题",color:"#26362f",scale:1,align:"start"}},images:{I01:{color:"#788880",assetId:"已上传图片UUID",fit:"cover"}},decorations:{D01:{color:"#53645b",hidden:false}},paper:"#f4f2eb"}。全部可省略；构件 ID 必须属于当前模板。文字 value 可为空（移除），最多500字/8行；scale 0.25–2，align start/middle/end；fit cover/contain。图片先通过 /api/upload assetOnly=true 上传。\n未替换构件保留原始低分辨率图层；替换文字为 SVG 文字，未辨识小字不会编造。图位使用原始形状蒙版。paper 修改原底色层，不覆盖原图已有设计色块。\n文字、图像、装饰分组一一对应源图，不接受任意 URL、SVG 或未知构件。最大请求64KB。\n保存：POST /api/studio/designs {layoutId,name,parameters}，返回 design.id/url/revision。再次打开 /studio/layouts/{layoutId}?id={id}（原生页面）；/studio/designs/{id} 自动跳转；PATCH /api/studio/designs/{id} {name,parameters,revision} 更新。\n错误400参数不合法，404模板不存在，405方法不支持。\n目录：/studio/api/layouts?agent_mode=True\n`)}
+ if(String(req.query.agent_mode).toLowerCase()==='true'&&['GET','HEAD'].includes(req.method||'')){res.setHeader('Content-Type','text/plain; charset=utf-8');if(req.method==='HEAD')return res.status(200).end();return res.send(`# 扩展编辑参数\n${JSON.stringify(workspaceSchema,null,2)}\n\n# 排版参数与渲染 API\n\nGET /studio/api/layouts/{id} 返回模板尺寸、T/I/D 构件 ID、坐标、原始文字可辨识状态与默认参数。id 为 standard-01（标准图文）或 ref-01 .. ref-27（固定构图）。standard-01 仅返回原生模板参数，不提供兼容 SVG。\n页面 /studio/layouts/{id} 直接提供原生 HTML/CSS 默认排版，不加载原图。保存结果直接打开 /studio/template-layout?id={designId}，服务端根据 ID 读取模板、图片和文字，无需选版或编辑器；缺失或不存在的 ID 返回404。\nGET 同地址 ?format=svg 是兼容的原图图层导出，与原生页面使用的 HTML/CSS 不同。POST JSON 参数返回 SVG，不自动保存。?format=json 返回规范化参数。\n参数整体形状：{texts:{T01:{value:"标题",color:"#26362f",scale:1,align:"start"}},images:{I01:{color:"#788880",assetId:"已上传图片UUID",fit:"cover"}},decorations:{D01:{color:"#53645b",hidden:false}},paper:"#f4f2eb"}。全部可省略；构件 ID 必须属于当前模板。文字 value 可为空（移除），最多500字/8行；scale 0.25–2，align start/middle/end；fit cover/contain。图片先通过 /api/upload assetOnly=true 上传。\n未替换构件保留原始低分辨率图层；替换文字为 SVG 文字，未辨识小字不会编造。图位使用原始形状蒙版。paper 修改原底色层，不覆盖原图已有设计色块。\n文字、图像、装饰分组一一对应源图，不接受任意 URL、SVG 或未知构件。最大请求64KB。\n保存：POST /api/studio/designs {layoutId,name,parameters}，返回 design.id/url/revision。再次打开返回的 /studio/template-layout?id={id}（纯结果页面）；/studio/designs/{id} 自动跳转；PATCH /api/studio/designs/{id} {name,parameters,revision} 更新。\n错误400参数不合法，404模板不存在，405方法不支持。\n目录：/studio/api/layouts?agent_mode=True\n`)}
  if(req.query.id==='standard-01'){
   if(!['GET','HEAD','POST'].includes(req.method||'')){res.setHeader('Allow','GET, HEAD, POST');return res.status(405).end()}
   try{const p=parameters(standardLayout,req.method==='POST'?req.body:{});

apps/studio/src/pages/layouts/[layoutId].tsx

@@ -1,19 +1,20 @@
 import type {GetServerSideProps} from 'next';
-import {LayoutWorkbench,type LayoutPageProps} from '../../components/LayoutWorkbench';
+import {NativeResult} from '../../components/NativeResult';
+import type {Layout} from '../../lib/layout-parameters';
 import fixedLayouts from '../../content/templates/layouts.json';
 import standardLayout from '../../content/standard-layout.json';
 const layouts=[...fixedLayouts,standardLayout];
-import {nativeLayout} from '../../lib/native-layout';
+import {nativeLayout,designUrl} from '../../lib/native-layout';
 import {readDesign} from '../../lib/design-server';
-export default function LayoutPage(props:LayoutPageProps){return <LayoutWorkbench key={props.design?.id||props.layout.id} {...props}/>}
-export const getServerSideProps:GetServerSideProps<LayoutPageProps>=async({params,query,req,res})=>{
+export default function LayoutPage({layout}:{layout:Layout}){return <NativeResult layout={layout} design={null}/>}
+export const getServerSideProps:GetServerSideProps<{layout:Layout}>=async({params,query,req,res})=>{
  res.setHeader('Cache-Control','private, no-store');
  const layout=layouts.find(l=>l.id===params?.layoutId);
  if(!layout)return {notFound:true};
  if(query.id!==undefined){
   const design=await readDesign(query.id,req);
   if(!design||design.layoutId!==layout.id)return {notFound:true};
-  return {props:{layout:nativeLayout(layout),design}};
+  return {redirect:{destination:designUrl(design.layoutId,design.id).slice('/studio'.length),permanent:false}};
  }
- return {props:{layout:nativeLayout(layout),design:null}};
+ return {props:{layout:nativeLayout(layout)}};
 };

apps/studio/src/pages/template-layout.tsx

@@ -0,0 +1,18 @@
+import type {GetServerSideProps} from 'next';
+import {NativeResult} from '../components/NativeResult';
+import fixedLayouts from '../content/templates/layouts.json';
+import standardLayout from '../content/standard-layout.json';
+import {readDesign} from '../lib/design-server';
+import {nativeLayout,type Design} from '../lib/native-layout';
+import type {Layout} from '../lib/layout-parameters';
+
+type Props={layout:Layout;design:Design};
+export default function TemplateLayout(props:Props){return <NativeResult {...props}/>}
+export const getServerSideProps:GetServerSideProps<Props>=async({query,req,res})=>{
+ res.setHeader('Cache-Control','private, no-store');
+ const design=await readDesign(query.id,req);
+ if(!design)return {notFound:true};
+ const layout=[standardLayout,...fixedLayouts].find(l=>l.id===design.layoutId);
+ if(!layout)return {notFound:true};
+ return {props:{layout:nativeLayout(layout),design}};
+};

apps/studio/tests/native-layout.test.mjs

@@ -12,7 +12,8 @@ test('geometric templates retain their distinct silhouettes without bitmap masks
  assert.equal(imageShape(layouts[4],layouts[4].elements.find(s=>s.id==='I03')).borderRadius,'50%');
  assert.ok(imageShape(layouts[21],layouts[21].elements.find(s=>s.id==='I02')).clipPath.startsWith('polygon('));
  assert.notEqual(imageShape(layouts[21],layouts[21].elements.find(s=>s.id==='I02')).clipPath,imageShape(layouts[26],layouts[26].elements.find(s=>s.id==='I02')).clipPath);
- assert.equal(designUrl('ref-01','abc'),'/studio/layouts/ref-01?id=abc');
+ assert.equal(designUrl('ref-01','abc'),'/studio/template-layout?id=abc');
+ assert.equal(designUrl('standard-01','abc'),'/studio/template-layout?id=abc');
 });
 
 test('element IDs work on HTTP origins without secure-context randomUUID',()=>{const saved=Object.getOwnPropertyDescriptor(globalThis,'crypto');let calls=0;Object.defineProperty(globalThis,'crypto',{configurable:true,value:{getRandomValues(array){for(let i=0;i<array.length;i++)array[i]=++calls;return array}}});try{const first=newElementId(),second=newElementId();assert.match(first,/^user-[a-f0-9]{32}$/);assert.notEqual(first,second)}finally{Object.defineProperty(globalThis,'crypto',saved)}});

apps/waterfall-wiki/src/lib/studio-design-posts.ts

@@ -3,8 +3,8 @@ import type {PoolClient} from 'pg';
 import type {Parameters} from './layout-parameters';
 
 export type DesignRow={id:string;layout_id:string;name:string;parameters:Parameters;revision:number;post_id:string|null;archived?:boolean;created_at:Date;updated_at:Date};
-export const studioPageUrl=(design:Pick<DesignRow,'id'|'layout_id'>)=>`/studio/layouts/${design.layout_id}?id=${design.id}`;
-function postDescription(design:DesignRow){return `已保存的 ${design.layout_id} 排版页面，可直接打开并继续编辑。`}
+export const studioPageUrl=(design:Pick<DesignRow,'id'|'layout_id'>)=>`/studio/template-layout?id=${design.id}`;
+function postDescription(design:DesignRow){return `已保存的 ${design.layout_id} 排版结果，打开链接即显示图片与文字。`}
 /** Caller holds the design row lock. All writes share the design's transaction. */
 export async function ensureDesignPost(client:PoolClient,design:DesignRow):Promise<DesignRow>{
  if(design.post_id){
@@ -14,7 +14,7 @@ export async function ensureDesignPost(client:PoolClient,design:DesignRow):Promi
  }
  const postId=randomUUID(),textId=randomUUID(),imageIds=[...new Set(Object.values(design.parameters.images||{}).flatMap(image=>image.assetId?[image.assetId]:[]))];
  const images=imageIds.length?(await client.query("SELECT id FROM assets WHERE id=ANY($1::uuid[]) AND kind='image'",[imageIds])).rows.map(row=>row.id as string):[];
- const body=`[打开页面并继续编辑](${studioPageUrl(design)})\n\n排版：${design.layout_id}\n\n页面 ID：\`${design.id}\`\n\n此笔记关联独立保存的页面；页面内容以链接中的保存记录为准。`;
+ const body=`[打开排版结果](${studioPageUrl(design)})\n\n排版：${design.layout_id}\n\n页面 ID：\`${design.id}\`\n\n此笔记关联 API 保存的模板、图片与文字；直接打开链接即可看到结果，无需选择排版或进入编辑器。`;
  await client.query("INSERT INTO posts(id,slug,kind,title,description,cover_asset_id) VALUES($1,$2,'article',$3,$4,$5)",[postId,'studio-design-'+design.id,design.name,postDescription(design),images[0]||null]);
  await client.query("INSERT INTO assets(id,kind,body) VALUES($1,'text',$2)",[textId,body]);
  await client.query("INSERT INTO post_assets(post_id,asset_id,position,role) VALUES($1,$2,0,'caption')",[postId,textId]);

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

@@ -59,7 +59,7 @@ test('real PostgreSQL + S3 notes, flat tags, resource sharing and video processi
   for(const removed of ['/library/assets','/library/tags'])assert.equal((await fetch(base+removed)).status,404);
   assert.equal((await db().query("SELECT 1 FROM schema_migrations WHERE version='009_studio_designs'")).rowCount,1,'Studio migration must be recorded for repeat deployments');
   // Studio owns no second database: designs use this same isolated PostgreSQL.
-  for(let i=1;i<=27;i++){const layoutId='ref-'+String(i).padStart(2,'0'),saved=await request('/api/studio/designs',{layoutId,name:'布局 '+i,parameters:{}});assert.equal(saved.design.layoutId,layoutId);assert.equal(saved.design.revision,1);assert.ok(saved.design.postId);assert.equal(saved.design.postUrl,'/explore/'+saved.design.postId);assert.equal(saved.design.url,'/studio/layouts/'+layoutId+'?id='+saved.design.id);const wiki=await request('/api/notes/'+saved.design.postId);assert.ok(wiki.entry.editableMarkdown.includes(saved.design.url));const read=await request('/api/studio/designs/'+saved.design.id);assert.deepEqual(read.design.parameters,{texts:{},images:{},decorations:{}});}
+  for(let i=1;i<=27;i++){const layoutId='ref-'+String(i).padStart(2,'0'),saved=await request('/api/studio/designs',{layoutId,name:'布局 '+i,parameters:{}});assert.equal(saved.design.layoutId,layoutId);assert.equal(saved.design.revision,1);assert.ok(saved.design.postId);assert.equal(saved.design.postUrl,'/explore/'+saved.design.postId);assert.equal(saved.design.url,'/studio/template-layout?id='+saved.design.id);const wiki=await request('/api/notes/'+saved.design.postId);assert.ok(wiki.entry.editableMarkdown.includes(saved.design.url));const read=await request('/api/studio/designs/'+saved.design.id);assert.deepEqual(read.design.parameters,{texts:{},images:{},decorations:{}});}
   const design=await request('/api/studio/designs',{layoutId:'ref-01',name:'可修改效果',parameters:{texts:{T01:{value:'新的标题'}},images:{I01:{assetId:first.assets[0],fit:'contain'}}}});
   const designEdit={name:'更新效果',parameters:{texts:{T01:{value:'修改后'}}},revision:design.design.revision};
   const patches=await Promise.all([1,2].map(()=>fetch(base+'/api/studio/designs/'+design.design.id,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify(designEdit)})));assert.deepEqual(patches.map(r=>r.status).sort(),[200,409]);

content/studio-tools/layouts-api.md

@@ -2,16 +2,25 @@
 
 把本篇与图片生成文档一起交给 coding agent。agent 自行选择图片、配色、字体、构图与参数，通过 HTTP 保存渲染描述，得到可持续更新的原生 HTML/CSS 页面。数据库只保存模板关联、文字、素材引用和渲染参数，不保存截图或任意 HTML。
 
-[打开可视化 API 库](/studio) · [读取实时 API 契约](/api/studio/designs?agent_mode=True) · [照片入皮影](/explore/3c98946754c33309d73d5284) · [街头小人](/explore/4ce3283fd98bb03a8fb39a19)
+[可选：查看模板示例](/studio) · [读取实时 API 契约](/api/studio/designs?agent_mode=True) · [照片入皮影](/explore/3c98946754c33309d73d5284) · [街头小人](/explore/4ce3283fd98bb03a8fb39a19)
+
+## agent 的交付流程
+
+1. 按下文读取模板 API，选择 layoutId，并获取该模板实际的 T/I/D 元素 ID。
+2. 上传图片取得 assetId，把图片、文字和参数提交给创建 API。
+3. 从创建响应读取 `design.id` 与 `design.url`，把完整结果链接交给用户，例如 `http://8.211.154.134:18131/studio/template-layout?id=实际返回的UUID`。
+4. 用户直接打开该链接看结果；修改内容继续调用 PATCH，同一 ID 与结果链接保持不变。
+
+不要编造 ID，也不要把模板预览链接当作最终结果。API 保存成功并返回真实 UUID 才算完成。以下文档足以通过 HTTP 完成流程，无需使用编辑器。
 
 ## 两类排版，同一内容模型
 
 - **标准排版**：`standard-01`，120×160 单位。沿用原 Studio 图文页的标题、正文、栏目结构，增加主题图片与分隔线。T01 主标题、T02 正文、T03 栏目、I01 图片、D01 分隔线。所有内容和位置可设置，也能增加原生元素。
 - **固定排版**：`ref-01` 至 `ref-27`，保留各自画板、出血、圆形、斜切、竖题和字体构图。先读取模板，按实际 T/I/D ID 填入内容。不能假定各模板拥有相同元素。
 
-两类都使用 `/api/studio/designs` 的真实 CRUD。创建额外指定 layoutId；更新从 URL 确定 ID，模板关联不能修改。更换模板应创建新记录，避免把旧元素 ID 错套到新模板。用户可按需进入现有编辑工作区，工具箱功能保持可用。
+两类都使用 `/api/studio/designs` 的真实 CRUD。创建额外指定 layoutId；更新从 URL 确定 ID，模板关联不能修改。更换模板应创建新记录，避免把旧元素 ID 错套到新模板。调用方无需打开 `/studio` 或操作编辑器。模板由 agent 经 API 选择，图片和文字由 API 保存，用户只打开结果链接。现有独立工具箱功能保持可用。
 
-## 1. 发现能力并选择模板
+## 1. 由 agent 通过 API 发现模板
 
 以下 curl 使用指定服务器。`PROMPT_TOKEN` 由用户通过现有登录方式提供，只保存在进程环境，不放 URL 或日志。也可使用已登录浏览器的同源 Cookie；浏览器写请求需要同源 Origin。未登录 API 返回 401。
 
@@ -82,7 +91,9 @@ curl -fsS -H "Authorization: Bearer $PROMPT_TOKEN" "$BASE/api/studio/designs?lay
 
 读取返回 `{design}`，没有副作用。列表默认只列未归档记录；`archived=true` 只列归档记录；limit 为1–50，默认20；`nextCursor` 作为下一页 before。layoutId 可省略。
 
-直接打开返回的 url：`/studio/layouts/standard-01?id={UUID}` 或 `/studio/layouts/ref-17?id={UUID}`，默认看到原生页面，点击“编辑页面”才进入工作区。`/studio/designs/{UUID}` 是兼容跳转。ID 与模板不匹配返回404。归档设计仍能经 API 读取以恢复，渲染页返回404。
+直接打开创建响应中的 `design.url`：`/studio/template-layout?id={UUID}`。这个 UUID 对应数据库里 API 保存的模板、图片与文字，服务端按记录渲染最终 HTML/CSS。链接中无需携带 layoutId，无需打开 `/studio` 选择模板，也没有编辑按钮、双击编辑或右键编辑。`standard-01` 与 `ref-17` 是模板 ID，不是保存记录的 UUID。
+
+`/studio/designs/{UUID}` 与旧 `/studio/layouts/{layoutId}?id={UUID}` 兼容跳转到同一个结果页。缺失、非法、不存在或已归档的 ID 返回404，不会显示空模板或编辑器；旧链接模板与记录不匹配也返回404。归档设计仍能经 API 读取以恢复。
 
 ## 5. 更新：PATCH /api/studio/designs/{id}
 

scripts/publish-studio-library.mjs

@@ -14,9 +14,17 @@ const {entry:current,tags}=await api('/api/notes/'+canonical),{entry:old}=await
 // Snapshot only non-secret editorial state. Retain the first backup across repeat publication.
 for(const [id,entry] of [[canonical,current],[legacy,old]]){try{await readFile(dir+'/'+id+'-before.json')}catch{await writeFile(dir+'/'+id+'-before.json',JSON.stringify(entry),{mode:0o600})}}
 const catalogue=await api('/studio/api/layouts');
-let markdown=(await readFile(dir+'/layouts-api.md','utf8')).replace('{{LAYOUTS}}',catalogue.layouts.filter(l=>l.family==='fixed').map(l=>`- [${l.id} · ${l.name}](${l.url}) · [参数](${l.api})`).join('\n'));
-const legacyOriginal=JSON.parse(await readFile(dir+'/'+legacy+'-before.json','utf8')).editableMarkdown;
-markdown+='\n\n## 兼容工具原说明与代码示例\n\n以下保留原工具的说明与 HTML/React/Next.js 调用示例；它们是无状态兼容接口，持久化页面请使用上文 CRUD。\n\n'+legacyOriginal;
+let markdown=(await readFile(new URL('../content/studio-tools/layouts-api.md',import.meta.url),'utf8')).replace('{{LAYOUTS}}',catalogue.layouts.filter(l=>l.family==='fixed').map(l=>`- [${l.id} · ${l.name}](${l.url}) · [参数](${l.api})`).join('\n'));
+const appendixMarker='## 兼容工具原说明与代码示例';
+const historicalNotice='> 以下保留历史工具示例，不代表当前 API 保存与打开流程。历史文字中关于首页、编辑器和旧结果地址的描述已过时：当前由 API 创建 ID，直接打开 `/studio/template-layout?id={UUID}`，无需选版或编辑器。当前契约以上文为准。';
+if(current.editableMarkdown.includes(appendixMarker)){
+ const appendix=current.editableMarkdown.slice(current.editableMarkdown.indexOf(appendixMarker));
+ markdown+='\n\n'+(appendix.includes(historicalNotice)?appendix:appendix.replace(appendixMarker,appendixMarker+'\n\n'+historicalNotice));
+}else{
+ if(old.archived)throw Error('Original toolbox appendix is missing; refusing to replace it with the archived redirect');
+ const legacyOriginal=JSON.parse(await readFile(dir+'/'+legacy+'-before.json','utf8')).editableMarkdown;
+ markdown+='\n\n'+appendixMarker+'\n\n'+historicalNotice+'\n\n以下保留原工具的说明与 HTML/React/Next.js 调用示例；它们是无状态兼容接口，持久化页面请使用上文 CRUD。\n\n'+legacyOriginal;
+}
 const tagIds=entry=>[...new Set([...(entry.systemTags||[]).map(t=>t.id),...entry.categories.map(name=>tags.find(t=>t.name===name)?.id).filter(Boolean)])];
 const body=(entry,text,title=entry.title)=>({title,description:entry.description,markdown:text,tags:tagIds(entry),assets:entry.assets,coverAssetId:entry.coverAssetId,revision:entry.revision});
 await api('/api/notes/'+canonical,{...body(current,markdown,'Studio 排版 API · 标准图文与27套固定构图'),description:'coding agent 经 HTTP 选择标准图文或27套固定构图，上传压缩展示素材，创建、读取、更新、归档与恢复稳定 ID 原生页面；含兼容工具箱。'},'PUT');

scripts/verify-studio-library.mjs

@@ -19,6 +19,7 @@ if(process.argv.includes('--finalize')){
  const final={canonical:base+'/explore/'+canonical,documentEntries:category?.total??null,legacyCompatible:!documentFailure,testRecordsArchived:results.length};
  await writeFile('/tmp/studio-library/final-verification.json',JSON.stringify(final,null,2));console.log(JSON.stringify(final));if(documentFailure)throw documentFailure;
 }else{
+for(const path of ['/studio/template-layout','/studio/template-layout?id=invalid'])assert.equal((await fetch(base+path)).status,404);
 const catalog=await api('/studio/api/layouts');assert.equal(catalog.layouts.length,28);
 const note=(await api('/api/notes/8eb8c76500580f7a4b56ba3c')).entry;
 const asset=note.coverAssetId||note.assets.find(a=>a.kind==='image').id;
@@ -29,10 +30,11 @@ for(const layoutId of ['standard-01','ref-17']){
  const p={texts:{T01:{value:'API 验收 · 原生页面',fontFamily:'serif',fontWeight:600}},images:{I01:{assetId:asset,fit:'cover',cropX:35,cropY:65,zoom:1.2}},added:[{id:'user-api-check',kind:'text',role:'扩展正文',box:[10,120,60,9],direction:'horizontal',text:'通过 HTTP 保存并恢复',reading:'custom'}],layers:{'user-api-check':{z:20,rotation:2}}};
  let d=(await api('/api/studio/designs',{schemaVersion:1,layoutId,name:'API 验收 '+layoutId,parameters:p},'POST',201)).design;
  const id=d.id,postId=d.postId;
+ assert.equal(d.url,'/studio/template-layout?id='+id);assert.equal(d.renderUrl,d.url);
  results.push({layoutId,id,url:d.url,revision:d.revision,postId,parameters:p});
  await writeFile('/tmp/studio-library/verification.json',JSON.stringify({results,preview:{asset,bytes,type:'image/webp'},pages:0},null,2));
  assert.deepEqual((await api('/api/studio/designs/'+id)).design.parameters,d.parameters);
- const html=await fetch(base+d.url).then(r=>r.text());assert.ok(html.includes('API 验收'));assert.ok(html.includes('user-api-check'));assert.ok(html.includes('/api/preview?'));assert.ok(!html.includes('src="/api/media/'));
+ const html=await fetch(base+d.url).then(r=>r.text());assert.ok(html.includes('API 验收'));assert.ok(html.includes('user-api-check'));assert.ok(html.includes('/api/preview?'));assert.ok(!html.includes('src="/api/media/'));assert.ok(!/page-tools|workbench-top|contenteditable|编辑页面/.test(html));
  d=(await api('/api/studio/designs/'+id,{name:'API 验收修订 '+layoutId,parameters:p,revision:d.revision},'PATCH')).design;
  assert.equal(d.postId,postId);assert.equal(d.revision,2);
  await api('/api/studio/designs/'+id,{name:'过期写入',parameters:{},revision:1},'PATCH',409);

scripts/verify-studio-visual.cjs

@@ -26,7 +26,13 @@ const assert=require('node:assert/strict');
  await page.goto(base+'/studio',{waitUntil:'networkidle'});assert.equal(await page.locator('.library-item').count(),27);await page.screenshot({path:dir+'/catalog-desktop.png',fullPage:true});
  const verify=JSON.parse(await readFile('/tmp/studio-library/verification.json','utf8'));
  for(const d of verify.results){await page.goto(base+d.url,{waitUntil:'networkidle'});assert.equal(await page.locator('img').count(),1);const current=await page.locator('img').evaluate(img=>({src:img.currentSrc,complete:img.complete,width:img.naturalWidth}));assert.ok(current.complete&&current.width>0);assert.equal(new URL(current.src).pathname,'/api/preview');await page.locator('article.native-layout').screenshot({path:dir+'/'+d.layoutId+'-saved.png',style:'.page-tools{visibility:hidden}'});
-  await page.getByRole('button',{name:'编辑页面',exact:true}).click();assert.equal(await page.locator('.workbench-top').count(),1);await page.screenshot({path:dir+'/'+d.layoutId+'-editor.png'});
+  assert.equal(new URL(page.url()).pathname,'/studio/template-layout');
+  assert.equal(await page.locator('button,input,textarea,select,[contenteditable],.page-tools,.workbench-top').count(),0);
+  await page.locator('.native-copy').first().dblclick();await page.locator('.native-copy').first().dispatchEvent('contextmenu');
+  assert.equal(await page.locator('button,input,textarea,select,[contenteditable],.workbench-top').count(),0);
+  const plain=await browser.newContext({viewport:{width:1100,height:1000},javaScriptEnabled:false});
+  await plain.route('**/*',async route=>{const u=new URL(route.request().url());if(u.origin===origin)return route.continue({headers:{...route.request().headers(),Authorization:'Bearer '+token}});return route.abort()});
+  const direct=await plain.newPage();await direct.goto(base+d.url,{waitUntil:'networkidle'});assert.equal(await direct.locator('article[data-design-id="'+d.id+'"]').count(),1);assert.ok((await direct.locator('article').innerText()).includes('API 验收'));await plain.close();
  }
  for(const slug of ['learning-skills-template','layout-selection']){await page.goto(base+'/studio/ideas/'+slug,{waitUntil:'networkidle'});await page.screenshot({path:dir+'/tool-'+slug+'.png',fullPage:true})}
  await page.setViewportSize({width:390,height:844});await page.goto(base+'/studio',{waitUntil:'networkidle'});assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth));await page.screenshot({path:dir+'/catalog-mobile.png',fullPage:true});