{layout.elements.map(s=>
{s.kind==='text'?
{defaultText(layout,s)}
:s.kind==='image'?
)}
}
+import {nativeLayout} from '../lib/native-layout';
+import {NativePreview as Preview} from '../components/NativePreview';
export default function StudioEntry(){return
Studio · 可视化排版 API 库 PROMPT / STUDIO 使用文档与工具箱 API 契约 用参数，编排画面。 给 coding agent 文字、图片与创作意图。选择标准图文或固定构图，通过 HTTP 保存渲染描述，得到一个可持续更新的原生页面。
一页，一件事。 沿用 Studio 标题、正文与页脚的图文结构，增加可配置图片位。文字、颜色、图片和几何坐标共用一套参数，也可添加原生元素。
layoutId: standard-01打开原生页面
}
diff --git a/apps/studio/src/styles/globals.css b/apps/studio/src/styles/globals.css
index 35afaab..943c137 100644
--- a/apps/studio/src/styles/globals.css
+++ b/apps/studio/src/styles/globals.css
@@ -81,3 +81,8 @@
.ref-21 .direction-rotated,.ref-24 .direction-angled,.ref-26 .native-text[data-element=T01] .native-copy,.ref-26 .native-text[data-element=T02] .native-copy,.ref-26 .native-text[data-element=T03] .native-copy{font-family:Georgia,"Songti SC",serif;font-weight:400;letter-spacing:-.055em}
.studio-library{max-width:1440px;margin:auto;padding:48px 5vw 80px}.library-nav{display:flex;justify-content:space-between;font-size:13px}.studio-library h1{font-size:clamp(32px,5vw,64px);letter-spacing:-.05em;margin:64px 0 16px}.library-intro{max-width:640px;line-height:1.8;color:#69716e}.library-heading{margin:64px 0 24px;display:flex;align-items:baseline;gap:18px}.library-heading h2{margin:0;font-size:24px}.library-heading a{font-size:13px;text-decoration:underline}.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}.library-item{min-width:0}.library-item .native-layout{width:100%;pointer-events:none}.library-item h3{font-size:13px;font-weight:500;margin:14px 0 5px}.library-item p{font-size:11px;color:#7b837e;margin:0}.library-item>a:focus-visible{outline:2px solid #48786a;outline-offset:5px}.library-standard{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:40px;align-items:center}.library-standard p{max-width:480px;line-height:1.9;color:#69716e}.library-standard code{font-size:13px}.library-standard a{text-decoration:underline}.library-item:hover .native-layout{filter:brightness(1.025)}
@media(max-width:950px){.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}.library-standard{grid-template-columns:1fr}.library-standard .native-layout{max-width:280px}.studio-library{padding:28px 20px 60px}.library-nav{gap:12px}}
+
+/* Keep the cross-axis line box inside narrow vertical title slots. */
+.native-copy.direction-vertical,.native-copy.direction-rotated{line-height:1}
+
+.ref-19 .native-text:is([data-element=T01],[data-element=T02],[data-element=T03],[data-element=T04]) .native-copy{font-weight:700;letter-spacing:-.06em}
diff --git a/scripts/verify-studio-library.mjs b/scripts/verify-studio-library.mjs
new file mode 100644
index 0000000..99579b5
--- /dev/null
+++ b/scripts/verify-studio-library.mjs
@@ -0,0 +1,52 @@
+import assert from 'node:assert/strict';
+import {writeFile} from 'node:fs/promises';
+const base='http://8.211.154.134:18131';
+async function api(path,body,method=body?'POST':'GET',status=200){const r=await fetch(base+path,{method,...(body?{headers:{'Content-Type':'application/json'},body:JSON.stringify(body)}:{})});assert.equal(r.status,status,path);return r.json()}
+if(process.argv.includes('--finalize')){
+ const {results}=JSON.parse(await (await import('node:fs/promises')).readFile('/tmp/studio-library/verification.json','utf8'));
+ const canonical='8eb8c76500580f7a4b56ba3c',legacy='9ebd8f78d54b4b9db741b4e8';
+ let documentFailure;let category;
+ try{
+ const entry=(await api('/api/notes/'+canonical)).entry;
+ for(const needle of ['standard-01','DELETE','revision','cropX','兼容工具原说明'])assert.ok(entry.editableMarkdown.includes(needle),needle);
+ for(const id of [canonical,legacy])assert.equal((await fetch(base+'/explore/'+id)).status,200);
+ const old=(await api('/api/notes/'+legacy)).entry;assert.ok(old.archived&&old.editableMarkdown.includes(canonical));
+ category=await api('/api/explore-feed?category='+encodeURIComponent('文档入口'));
+ assert.equal(category.total,3);assert.equal(category.nextCursor,null);
+ assert.deepEqual(category.entries.map(e=>e.id).sort(),['3c98946754c33309d73d5284','4ce3283fd98bb03a8fb39a19',canonical].sort());
+ }catch(error){documentFailure=error}
+ for(const item of results){const d=(await api('/api/studio/designs/'+item.id)).design;assert.ok(d.name.startsWith('API 验收'));assert.equal(d.postId,item.postId);if(!d.archived)await api('/api/studio/designs/'+d.id,{revision:d.revision},'DELETE');assert.equal((await api('/api/studio/designs/'+d.id)).design.archived,true)}
+ 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{
+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;
+const preview=await fetch(base+'/api/preview?'+new URLSearchParams({source:'/api/media/'+asset,width:'960'}));assert.equal(preview.status,200);assert.equal(preview.headers.get('content-type'),'image/webp');const bytes=(await preview.arrayBuffer()).byteLength;assert.ok(bytes<=220000);
+const results=[];
+for(const layoutId of ['standard-01','ref-17']){
+ const schema=await api('/studio/api/layouts/'+layoutId);assert.ok(schema.elements.some(s=>s.id==='T01'));
+ 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;
+ 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/'));
+ 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);
+ d=(await api('/api/studio/designs/'+id,{revision:2},'DELETE')).design;assert.equal(d.archived,true);
+ assert.equal((await fetch(base+d.url)).status,404);assert.equal((await api('/api/notes/'+postId)).entry.archived,true);
+ assert.deepEqual((await api('/api/studio/designs/'+id)).design.parameters,d.parameters);
+ assert.ok((await api('/api/studio/designs?archived=true&layoutId='+layoutId)).designs.some(v=>v.id===id));
+ d=(await api('/api/studio/designs/'+id,{revision:3,archived:false},'POST')).design;assert.equal(d.revision,4);assert.equal(d.archived,false);assert.equal((await fetch(base+d.url)).status,200);
+ Object.assign(results[results.length-1],{url:d.url,revision:d.revision});
+ // Restore tested URL for visual inspection, then archive only these clearly named test records later.
+}
+for(const l of catalog.layouts){const r=await fetch(base+l.url);assert.equal(r.status,200,l.id);const html=await r.text();assert.ok(html.includes('data-layout-id="'+l.id+'"'));assert.ok(!/
r)}));
+
+}
diff --git a/scripts/verify-studio-production.sh b/scripts/verify-studio-production.sh
new file mode 100644
index 0000000..d878027
--- /dev/null
+++ b/scripts/verify-studio-production.sh
@@ -0,0 +1,39 @@
+#!/usr/bin/env bash
+# Run on ces-control after deployment; never starts a preview web server.
+set -Eeuo pipefail
+REPO_ROOT=$(git rev-parse --show-toplevel)
+RESULT_DIR="$REPO_ROOT/artifacts/studio-acceptance"
+MODE=${1:-verify}
+[[ "$MODE" == verify || "$MODE" == --diagnose ]] || exit 2
+WIKI_IMAGE=$(docker inspect --format '{{.Config.Image}}' prompt-waterfall-wiki-1)
+[[ "$WIKI_IMAGE" =~ ^waterfall-wiki:[0-9a-f]{40}$ ]] || { echo 'Unexpected Wiki image'; exit 1; }
+TEST_IMAGE="waterfall-wiki-tests:${WIKI_IMAGE#waterfall-wiki:}"
+docker image inspect "$TEST_IMAGE" >/dev/null
+mkdir -p "$RESULT_DIR"
+chown 1000:1000 "$RESULT_DIR"
+run_api(){
+ local result_root=$1 script=$2; shift 2
+ docker run --rm --volumes-from prompt-waterfall-wiki-1:ro \
+ --mount "type=bind,src=$REPO_ROOT,dst=/delivery,readonly" \
+ --mount "type=bind,src=$result_root,dst=/tmp/studio-library" \
+ -e AUTH_CONFIG_FILE=/auth/config.json -e AUTH_CHECK_BASE_URL=http://8.211.154.134:18131 \
+ --entrypoint node "$TEST_IMAGE" dist/auth-cli.cjs run "/delivery/scripts/$script" "$@"
+}
+# Result files are uploaded by the workflow and removed after successful upload.
+printf '{"temporaryOutputManagedByCI":true}\n' > "$RESULT_DIR/cleanup.json"
+# Always archive only the UUIDs created by this run, including when visual checks fail.
+finish(){
+ local status=$?
+ trap - EXIT
+ if [[ -f "$RESULT_DIR/verification.json" ]]; then
+ if ! run_api "$RESULT_DIR" verify-studio-library.mjs --finalize; then status=1; fi
+ fi
+ exit "$status"
+}
+trap finish EXIT
+run_api "$RESULT_DIR" verify-studio-library.mjs
+docker run --rm --volumes-from prompt-waterfall-wiki-1:ro \
+ --mount "type=bind,src=$REPO_ROOT,dst=/delivery,readonly" \
+ --mount "type=bind,src=$RESULT_DIR,dst=/tmp/studio-library" \
+ -e AUTH_CONFIG_FILE=/auth/config.json -e NODE_PATH=/app/node_modules \
+ --entrypoint node "$TEST_IMAGE" /delivery/scripts/verify-studio-visual.cjs "$MODE"
diff --git a/scripts/verify-studio-visual.cjs b/scripts/verify-studio-visual.cjs
new file mode 100644
index 0000000..810681b
--- /dev/null
+++ b/scripts/verify-studio-visual.cjs
@@ -0,0 +1,36 @@
+const {readFile,mkdir,writeFile}=require('node:fs/promises');
+const {createHmac,randomBytes}=require('node:crypto');
+const {chromium}=require('playwright-core');
+const assert=require('node:assert/strict');
+(async()=>{
+ const base='http://8.211.154.134:18131',origin=new URL(base).origin,dir='/tmp/studio-library/visual';await mkdir(dir,{recursive:true});
+ const config=JSON.parse(await readFile(process.env.AUTH_CONFIG_FILE,'utf8'));
+ const now=Math.floor(Date.now()/1000),part=o=>Buffer.from(JSON.stringify(o)).toString('base64url');
+ const content=part({alg:'HS256',typ:'JWT'})+'.'+part({iss:'prompt',aud:'prompt-web',sub:'shared',iat:now,exp:now+1200,jti:randomBytes(16).toString('hex')});
+ const token=content+'.'+createHmac('sha256',Buffer.from(config.jwtKey,'hex')).update(content).digest('base64url');
+ const browser=await chromium.launch({executablePath:'/usr/bin/chromium',headless:true,args:['--no-sandbox','--disable-dev-shm-usage']});
+ const context=await browser.newContext({viewport:{width:1100,height:1000},deviceScaleFactor:1});
+ await context.route('**/*',async route=>{const u=new URL(route.request().url());if(u.origin===origin)return route.continue({headers:{...route.request().headers(),Authorization:'Bearer '+token}});if(['data:','blob:'].includes(u.protocol))return route.continue();return route.abort()});
+ const page=await context.newPage(),errors=[],images=[];
+ page.on('pageerror',error=>errors.push({url:page.url(),message:error.message}));
+ page.on('response',async response=>{if(response.request().resourceType()==='image'){const url=new URL(response.url());images.push({path:url.pathname+url.search,status:response.status(),type:response.headers()['content-type'],bytes:(await response.body().catch(()=>Buffer.alloc(0))).length})}});
+ const metrics=process.argv.includes('--after-layouts')?JSON.parse(await readFile(dir+'/metrics.json','utf8')).metrics:[];
+ for(let i=1;i<=27&&!process.argv.includes('--after-layouts');i++){
+ const id='ref-'+String(i).padStart(2,'0');await page.goto(base+'/studio/layouts/'+id,{waitUntil:'networkidle'});await page.locator('article.native-layout').screenshot({path:dir+'/'+id+'.png',style:'.page-tools{visibility:hidden}'});
+ const m=await page.locator('article.native-layout').evaluate(el=>({id:el.dataset.layoutId,elements:el.querySelectorAll('[data-element]').length,width:el.clientWidth,height:el.clientHeight,overflow:[...el.querySelectorAll('.native-copy')].filter(e=>e.scrollHeight>e.clientHeight+2||e.scrollWidth>e.clientWidth+2).map(e=>e.closest('[data-element]').dataset.element)}));metrics.push(m);await writeFile(dir+'/metrics.json',JSON.stringify({metrics,images,errors},null,2));
+ }
+ if(!process.argv.includes('--after-layouts')&&!process.argv.includes('--diagnose'))assert.deepEqual(metrics.filter(m=>m.overflow.length),[],'Default copy must fit every native slot');
+ await page.goto(base+'/studio',{waitUntil:'networkidle'});assert.equal(await page.locator('.library-item').count(),27);await page.screenshot({path:dir+'/catalog-desktop.png',fullPage:true});
+ 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&¤t.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'});
+ }
+ for(const slug of ['learning-skills-template','layout-selection']){await page.goto(base+'/studio/ideas/'+slug,{waitUntil:'networkidle'});await page.screenshot({path:dir+'/tool-'+slug+'.png',fullPage:true})}
+ await page.setViewportSize({width:390,height:844});await page.goto(base+'/studio',{waitUntil:'networkidle'});assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth));await page.screenshot({path:dir+'/catalog-mobile.png',fullPage:true});
+ await page.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));
+ assert.equal(images.filter(r=>new URL(r.path,base).pathname.startsWith('/api/media/')).length,0,'Display must never fetch originals');if(!process.argv.includes('--diagnose'))assert.equal(errors.length,0,JSON.stringify(errors));for(const image of images){if(new URL(image.path,base).pathname==='/brand-mark.svg'){assert.equal(image.status,200);assert.match(image.type,/image\/svg\+xml/);continue;}assert.equal(new URL(image.path,base).pathname,'/api/preview');assert.equal(image.status,200);assert.equal(image.type,'image/webp');assert.ok(image.bytes>0&&image.bytes<=220000)}
+ await writeFile(dir+'/metrics.json',JSON.stringify({metrics,images,errors},null,2));await browser.close();
+ console.log(JSON.stringify({diagnostic:process.argv.includes('--diagnose'),pages:27,errors:errors.length,displayImages:images.length,originalImageRequests:0,overflow:metrics.filter(m=>m.overflow.length)}));
+})().catch(e=>{console.error(e.message);process.exit(1)});