Publish reference layouts as API-authored text and image notes
wiki CI and deployment / verify-and-deploy (push) Successful in 16m28s
wiki CI and deployment / verify-and-deploy (push) Successful in 16m28s
This commit is contained in:
@@ -19,3 +19,6 @@ coverage
|
||||
|
||||
**/__pycache__
|
||||
**/.venv
|
||||
|
||||
# Local authoring assets are uploaded via APIs, never application build inputs.
|
||||
/content
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
BEGIN;
|
||||
-- API-authored notes may retain a legacy 24-character public ID without code registration.
|
||||
ALTER TABLE posts ADD COLUMN public_id text UNIQUE CHECK(public_id ~ '^[0-9a-f]{24}$');
|
||||
INSERT INTO schema_migrations(version) VALUES('006_post_public_ids');
|
||||
COMMIT;
|
||||
@@ -10,7 +10,7 @@
|
||||
"build": "next build && esbuild src/worker.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/worker.cjs && esbuild scripts/bootstrap.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/bootstrap.cjs && esbuild scripts/publish-learning-series.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/publish-learning-series.cjs && node scripts/prepare-standalone.mjs",
|
||||
"start": "next start",
|
||||
"typecheck": "next typegen && tsc --noEmit",
|
||||
"test": "tsx --test tests/api-documentation.test.ts tests/health.test.ts tests/model.test.ts tests/learning-series.test.ts tests/skill-docs.test.ts tests/wiki.test.ts tests/explore.test.ts tests/preview.test.ts tests/note-markdown.test.tsx tests/layout-reference.test.tsx",
|
||||
"test": "tsx --test tests/api-documentation.test.ts tests/health.test.ts tests/model.test.ts tests/learning-series.test.ts tests/skill-docs.test.ts tests/wiki.test.ts tests/explore.test.ts tests/preview.test.ts tests/note-markdown.test.tsx tests/api-publication.test.ts",
|
||||
"test:smoke": "node scripts/smoke.mjs",
|
||||
"storage:prepare": "tsx scripts/bootstrap.ts",
|
||||
"content:publish-learning": "tsx scripts/publish-learning-series.ts",
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import React from 'react';
|
||||
import type {CSSProperties} from 'react';
|
||||
import layouts from './manifest.json';
|
||||
export const layoutIds = ['ref-01','ref-02','ref-03','ref-04','ref-05','ref-06','ref-07','ref-08','ref-09','ref-10','ref-11','ref-12','ref-13','ref-14','ref-15','ref-16','ref-17','ref-18','ref-19','ref-20','ref-21','ref-22','ref-23','ref-24','ref-25','ref-26','ref-27'] as const;
|
||||
export type LayoutId=typeof layoutIds[number];
|
||||
export type Replacements={text?:Record<string,string>;images?:Record<string,string>};
|
||||
export function getLayout(id:string){return layouts.find(layout=>layout.id===id)}
|
||||
export function validateReplacements(id:string,replacements:Replacements){
|
||||
const layout=getLayout(id);if(!layout)throw Error(`Unknown layout ID: ${id}`);
|
||||
for(const[kind,values]of [['text',replacements.text],['image',replacements.images]] as const)for(const key of Object.keys(values||{})){
|
||||
if(!layout.elements.some(e=>key===id+'/'+e.id&&e.kind===kind))throw Error(`Component does not belong to ${id} or has the wrong kind: ${key}`);
|
||||
}return layout;
|
||||
}
|
||||
function textStyle(text:string,box:number[],width:number,direction:string):CSSProperties{
|
||||
const vertical=direction==='vertical'||direction==='rotated',lines=text.split('\n'),units=Math.max(...lines.map(line=>Array.from(line).reduce((n,c)=>n+(/[\u3400-\u9fff]/.test(c)?1:.56),0)),1);
|
||||
const size=vertical?Math.min(box[2],box[3]/Math.max(text.length,1)):Math.min(box[3]/(lines.length*1.1),box[2]/units);
|
||||
return {fontSize:`${size/width*100}cqw`,lineHeight:1.1,whiteSpace:'pre-wrap',writingMode:vertical?'vertical-rl':undefined,textOrientation:direction==='rotated'?'sideways':undefined,transform:direction==='angled'?'rotate(-12deg)':undefined,transformOrigin:'left center',color:'#222',fontFamily:'"Songti SC", "Noto Serif CJK SC", serif'};
|
||||
}
|
||||
/** Untouched mode reconstructs typed source layers; replacement mode keeps the exact preset geometry. */
|
||||
export default function ReferenceLayout({id,text={},images={},assetBase=''}:{id:LayoutId;text?:Record<string,string>;images?:Record<string,string>;assetBase?:string}){
|
||||
const layout=validateReplacements(id,{text,images}),src=(url:string)=>assetBase+url;
|
||||
return <figure data-layout-id={id} aria-label={`${id} ${layout.name}`} style={{margin:0,width:'min(100%, 672px)',containerType:'inline-size'}}>
|
||||
<div style={{position:'relative',width:'100%',aspectRatio:`${layout.width}/${layout.height}`,isolation:'isolate',background:'#f4f3ee'}}>
|
||||
<img src={src(layout.background)} alt="" width={layout.width} height={layout.height} style={{position:'absolute',inset:0,width:'100%',height:'100%'}}/>
|
||||
{layout.elements.map(e=>{
|
||||
const[x,y,w,h]=e.box,key=id+'/'+e.id,position:CSSProperties={position:'absolute',left:x/layout.width*100+'%',top:y/layout.height*100+'%',width:w/layout.width*100+'%',height:h/layout.height*100+'%',zIndex:e.kind==='text'?3:e.kind==='decoration'?2:1};
|
||||
if(e.kind==='text'&&Object.hasOwn(text,key)){
|
||||
if(e.direction==='curved')throw Error(`Curved text requires the source-specific SVG path: ${key}`);
|
||||
return <React.Fragment key={key}>
|
||||
{'underlay' in e&&<img src={src(String(e.underlay))} alt="" style={position}/>}
|
||||
<span data-component={key} data-kind="text" style={{...position,...textStyle(text[key],e.box,layout.width,e.direction)}}>{text[key]}</span>
|
||||
</React.Fragment>;
|
||||
}
|
||||
if(e.kind==='image'&&Object.hasOwn(images,key))return <img key={key} data-component={key} data-kind="image" src={images[key]} alt={e.role} style={{...position,objectFit:'cover',maskImage:'mask' in e?`url("${src(String(e.mask))}")`:undefined,maskSize:'100% 100%'}}/>;
|
||||
return <img key={key} data-component={key} data-kind={e.kind} src={src(e.asset)} alt={e.kind==='text'?e.text||`${e.role}：原字形保真，内容未辨识`:''} width={w} height={h} style={position}/>;
|
||||
})}
|
||||
</div>
|
||||
</figure>;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,466 +0,0 @@
|
||||
{
|
||||
"version": 2,
|
||||
"sourceSha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"numbering": "row-major; exclude left title banner",
|
||||
"layouts": [
|
||||
{
|
||||
"id": "ref-01",
|
||||
"name": "双矩形错位与左下说明",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
135,
|
||||
46,
|
||||
113,
|
||||
171
|
||||
],
|
||||
"row": 1,
|
||||
"column": 2
|
||||
},
|
||||
"manifest": "/layout-reference/ref-01/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-02",
|
||||
"name": "四格图片列与双列竖题",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
256,
|
||||
46,
|
||||
112,
|
||||
171
|
||||
],
|
||||
"row": 1,
|
||||
"column": 3
|
||||
},
|
||||
"manifest": "/layout-reference/ref-02/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-03",
|
||||
"name": "左上标题与右下错位图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
376,
|
||||
46,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 1,
|
||||
"column": 4
|
||||
},
|
||||
"manifest": "/layout-reference/ref-03/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-04",
|
||||
"name": "满版灰底椭圆与右侧白字",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
497,
|
||||
45,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 1,
|
||||
"column": 5
|
||||
},
|
||||
"manifest": "/layout-reference/ref-04/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-05",
|
||||
"name": "五圆出血与右侧竖排大字",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
617,
|
||||
45,
|
||||
112,
|
||||
172
|
||||
],
|
||||
"row": 1,
|
||||
"column": 6
|
||||
},
|
||||
"manifest": "/layout-reference/ref-05/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-06",
|
||||
"name": "满高左图与右侧窄栏",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
134,
|
||||
228,
|
||||
114,
|
||||
172
|
||||
],
|
||||
"row": 2,
|
||||
"column": 2
|
||||
},
|
||||
"manifest": "/layout-reference/ref-06/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-07",
|
||||
"name": "同心圆图位与底部年份",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
256,
|
||||
228,
|
||||
112,
|
||||
172
|
||||
],
|
||||
"row": 2,
|
||||
"column": 3
|
||||
},
|
||||
"manifest": "/layout-reference/ref-07/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-08",
|
||||
"name": "双层满宽图与字距横栏",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
376,
|
||||
227,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 2,
|
||||
"column": 4
|
||||
},
|
||||
"manifest": "/layout-reference/ref-08/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-09",
|
||||
"name": "左侧分字标题与右侧长图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
497,
|
||||
227,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 2,
|
||||
"column": 5
|
||||
},
|
||||
"manifest": "/layout-reference/ref-09/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-10",
|
||||
"name": "半页深底与裁切英文 blue",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
616,
|
||||
227,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 2,
|
||||
"column": 6
|
||||
},
|
||||
"manifest": "/layout-reference/ref-10/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-11",
|
||||
"name": "左上双行标题与右下主图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
135,
|
||||
410,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 3,
|
||||
"column": 2
|
||||
},
|
||||
"manifest": "/layout-reference/ref-11/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-12",
|
||||
"name": "三图模块与左侧分散字框",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
256,
|
||||
409,
|
||||
112,
|
||||
173
|
||||
],
|
||||
"row": 3,
|
||||
"column": 3
|
||||
},
|
||||
"manifest": "/layout-reference/ref-12/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-13",
|
||||
"name": "横题与右侧出血扁椭圆",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
376,
|
||||
410,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 3,
|
||||
"column": 4
|
||||
},
|
||||
"manifest": "/layout-reference/ref-13/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-14",
|
||||
"name": "大矩形与小方图及居中横题",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
497,
|
||||
409,
|
||||
113,
|
||||
174
|
||||
],
|
||||
"row": 3,
|
||||
"column": 5
|
||||
},
|
||||
"manifest": "/layout-reference/ref-14/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-15",
|
||||
"name": "英文双行刊头与四分之一圆图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
617,
|
||||
409,
|
||||
112,
|
||||
173
|
||||
],
|
||||
"row": 3,
|
||||
"column": 6
|
||||
},
|
||||
"manifest": "/layout-reference/ref-15/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-16",
|
||||
"name": "上下灰阶色带与底部白区",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
15,
|
||||
592,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 4,
|
||||
"column": 1
|
||||
},
|
||||
"manifest": "/layout-reference/ref-16/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-17",
|
||||
"name": "英文刊头与圆形叠标及窄栏",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
135,
|
||||
591,
|
||||
113,
|
||||
174
|
||||
],
|
||||
"row": 4,
|
||||
"column": 2
|
||||
},
|
||||
"manifest": "/layout-reference/ref-17/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-18",
|
||||
"name": "上大图与下方英文双行",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
256,
|
||||
591,
|
||||
113,
|
||||
174
|
||||
],
|
||||
"row": 4,
|
||||
"column": 3
|
||||
},
|
||||
"manifest": "/layout-reference/ref-18/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-19",
|
||||
"name": "四角大字与中央双圆竖题",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
376,
|
||||
593,
|
||||
113,
|
||||
171
|
||||
],
|
||||
"row": 4,
|
||||
"column": 4
|
||||
},
|
||||
"manifest": "/layout-reference/ref-19/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-20",
|
||||
"name": "右上大弧面与左下圆形标题",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
496,
|
||||
592,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 4,
|
||||
"column": 5
|
||||
},
|
||||
"manifest": "/layout-reference/ref-20/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-21",
|
||||
"name": "右侧旋转英文与节点方图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
616,
|
||||
592,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 4,
|
||||
"column": 6
|
||||
},
|
||||
"manifest": "/layout-reference/ref-21/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-22",
|
||||
"name": "三段斜切背景与右侧白字",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
15,
|
||||
774,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 5,
|
||||
"column": 1
|
||||
},
|
||||
"manifest": "/layout-reference/ref-22/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-23",
|
||||
"name": "上方方图与中部大写英文",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
134,
|
||||
775,
|
||||
114,
|
||||
172
|
||||
],
|
||||
"row": 5,
|
||||
"column": 2
|
||||
},
|
||||
"manifest": "/layout-reference/ref-23/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-24",
|
||||
"name": "斜排中文与倾斜装饰线框",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
256,
|
||||
775,
|
||||
113,
|
||||
172
|
||||
],
|
||||
"row": 5,
|
||||
"column": 3
|
||||
},
|
||||
"manifest": "/layout-reference/ref-24/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-25",
|
||||
"name": "左侧竖题与右下方形主图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
376,
|
||||
774,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 5,
|
||||
"column": 4
|
||||
},
|
||||
"manifest": "/layout-reference/ref-25/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-26",
|
||||
"name": "三行英文与曲线指引小图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
496,
|
||||
774,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 5,
|
||||
"column": 5
|
||||
},
|
||||
"manifest": "/layout-reference/ref-26/manifest.json"
|
||||
},
|
||||
{
|
||||
"id": "ref-27",
|
||||
"name": "对角双区与斜向文字带",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
618,
|
||||
774,
|
||||
112,
|
||||
172
|
||||
],
|
||||
"row": 5,
|
||||
"column": 6
|
||||
},
|
||||
"manifest": "/layout-reference/ref-27/manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-01 · 双矩形错位与左下说明</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/171;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-01 / 双矩形错位与左下说明</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-01/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-01/T01" data-kind="text" src="/layout-reference/ref-01/T01.png" alt="BULUBLUE" style="left:7.079646017699115%;top:11.695906432748536%;width:31.858407079646017%;height:8.771929824561402%">
|
||||
<img data-component="ref-01/T02" data-kind="text" src="/layout-reference/ref-01/T02.png" alt="左下说明（未辨识原字形）" style="left:6.1946902654867255%;top:70.76023391812866%;width:38.93805309734513%;height:19.883040935672515%">
|
||||
<img data-component="ref-01/I01" data-kind="image" src="/layout-reference/ref-01/I01.png" alt="" style="left:21.238938053097346%;top:8.187134502923977%;width:68.14159292035397%;height:41.52046783625731%">
|
||||
<img data-component="ref-01/I02" data-kind="image" src="/layout-reference/ref-01/I02.png" alt="" style="left:37.16814159292036%;top:52.046783625730995%;width:52.21238938053098%;height:40.93567251461988%">
|
||||
<img data-component="ref-01/D01" data-kind="decoration" src="/layout-reference/ref-01/D01.png" alt="" style="left:36.283185840707965%;top:2.3391812865497075%;width:25.663716814159294%;height:1.7543859649122806%">
|
||||
<img data-component="ref-01/D02" data-kind="decoration" src="/layout-reference/ref-01/D02.png" alt="" style="left:25.663716814159294%;top:92.39766081871345%;width:51.32743362831859%;height:4.678362573099415%">
|
||||
<img class="overlay" src="/layout-reference/ref-01/annotated.png" alt="构件标注"></div><p class="muted">原图第 1 行、第 2 列；113×171 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 品牌字标</td><td>BULUBLUE</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 左下说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 上方主图</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 下方副图</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 顶部短线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 底部横线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-01/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-01/source.png">原裁片</a> · <a href="/layout-reference/ref-01/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-01","name":"双矩形错位与左下说明","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[135,46,113,171],"row":1,"column":2},"width":113,"height":171,"reference":"/layout-reference/ref-01/source.png","annotated":"/layout-reference/ref-01/annotated.png","background":"/layout-reference/ref-01/background.png","elements":[{"id":"T01","kind":"text","role":"品牌字标","box":[8,20,36,15],"text":"BULUBLUE","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-01/T01.png","pixels":274,"underlay":"/layout-reference/ref-01/T01-underlay.png"},{"id":"T02","kind":"text","role":"左下说明","box":[7,121,44,34],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-01/T02.png","pixels":468,"underlay":"/layout-reference/ref-01/T02-underlay.png"},{"id":"I01","kind":"image","role":"上方主图","box":[24,14,77,71],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-01/I01.png","pixels":5259,"mask":"/layout-reference/ref-01/I01-mask.png"},{"id":"I02","kind":"image","role":"下方副图","box":[42,89,59,70],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-01/I02.png","pixels":4097,"mask":"/layout-reference/ref-01/I02-mask.png"},{"id":"D01","kind":"decoration","role":"顶部短线","box":[41,4,29,3],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-01/D01.png","pixels":55},{"id":"D02","kind":"decoration","role":"底部横线","box":[29,158,58,8],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-01/D02.png","pixels":167}],"ocr":[{"box":[0.07374631491782553,0.12865497059314956,0.31268436578171094,0.06237816764132553],"confidence":0.5,"text":"BULUBLUE"}],"verification":{"pixelIdentical":true,"pixels":19323,"unreadableText":1}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,140 +0,0 @@
|
||||
{
|
||||
"id": "ref-01",
|
||||
"name": "双矩形错位与左下说明",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
135,
|
||||
46,
|
||||
113,
|
||||
171
|
||||
],
|
||||
"row": 1,
|
||||
"column": 2
|
||||
},
|
||||
"width": 113,
|
||||
"height": 171,
|
||||
"reference": "/layout-reference/ref-01/source.png",
|
||||
"annotated": "/layout-reference/ref-01/annotated.png",
|
||||
"background": "/layout-reference/ref-01/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "品牌字标",
|
||||
"box": [
|
||||
8,
|
||||
20,
|
||||
36,
|
||||
15
|
||||
],
|
||||
"text": "BULUBLUE",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-01/T01.png",
|
||||
"pixels": 274,
|
||||
"underlay": "/layout-reference/ref-01/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "左下说明",
|
||||
"box": [
|
||||
7,
|
||||
121,
|
||||
44,
|
||||
34
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-01/T02.png",
|
||||
"pixels": 468,
|
||||
"underlay": "/layout-reference/ref-01/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "上方主图",
|
||||
"box": [
|
||||
24,
|
||||
14,
|
||||
77,
|
||||
71
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-01/I01.png",
|
||||
"pixels": 5259,
|
||||
"mask": "/layout-reference/ref-01/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "下方副图",
|
||||
"box": [
|
||||
42,
|
||||
89,
|
||||
59,
|
||||
70
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-01/I02.png",
|
||||
"pixels": 4097,
|
||||
"mask": "/layout-reference/ref-01/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "顶部短线",
|
||||
"box": [
|
||||
41,
|
||||
4,
|
||||
29,
|
||||
3
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-01/D01.png",
|
||||
"pixels": 55
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "底部横线",
|
||||
"box": [
|
||||
29,
|
||||
158,
|
||||
58,
|
||||
8
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-01/D02.png",
|
||||
"pixels": 167
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.07374631491782553,
|
||||
0.12865497059314956,
|
||||
0.31268436578171094,
|
||||
0.06237816764132553
|
||||
],
|
||||
"confidence": 0.5,
|
||||
"text": "BULUBLUE"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19323,
|
||||
"unreadableText": 1
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-02 · 四格图片列与双列竖题</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:112/171;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-02 / 四格图片列与双列竖题</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-02/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-02/T01" data-kind="text" src="/layout-reference/ref-02/T01.png" alt="蓝羽毛版式设计系列" style="left:81.25%;top:0%;width:17.857142857142858%;height:73.68421052631578%">
|
||||
<img data-component="ref-02/T02" data-kind="text" src="/layout-reference/ref-02/T02.png" alt="版式灵感收藏" style="left:62.5%;top:0%;width:16.964285714285715%;height:49.122807017543856%">
|
||||
<img data-component="ref-02/T03" data-kind="text" src="/layout-reference/ref-02/T03.png" alt="图片一图注（未辨识原字形）" style="left:0%;top:19.883040935672515%;width:17.857142857142858%;height:2.3391812865497075%">
|
||||
<img data-component="ref-02/T04" data-kind="text" src="/layout-reference/ref-02/T04.png" alt="图片二图注（未辨识原字形）" style="left:0%;top:41.52046783625731%;width:25.892857142857146%;height:2.3391812865497075%">
|
||||
<img data-component="ref-02/T05" data-kind="text" src="/layout-reference/ref-02/T05.png" alt="图片三图注（未辨识原字形）" style="left:1.7857142857142856%;top:77.19298245614034%;width:33.035714285714285%;height:1.7543859649122806%">
|
||||
<img data-component="ref-02/T06" data-kind="text" src="/layout-reference/ref-02/T06.png" alt="右下说明（未辨识原字形）" style="left:44.642857142857146%;top:47.368421052631575%;width:28.57142857142857%;height:33.33333333333333%">
|
||||
<img data-component="ref-02/T07" data-kind="text" src="/layout-reference/ref-02/T07.png" alt="右下品牌与说明（未辨识原字形）" style="left:45.535714285714285%;top:83.62573099415205%;width:45.535714285714285%;height:8.187134502923977%">
|
||||
<img data-component="ref-02/I01" data-kind="image" src="/layout-reference/ref-02/I01.png" alt="" style="left:3.571428571428571%;top:1.7543859649122806%;width:35.714285714285715%;height:17.543859649122805%">
|
||||
<img data-component="ref-02/I02" data-kind="image" src="/layout-reference/ref-02/I02.png" alt="" style="left:1.7857142857142856%;top:22.22222222222222%;width:39.285714285714285%;height:19.298245614035086%">
|
||||
<img data-component="ref-02/I03" data-kind="image" src="/layout-reference/ref-02/I03.png" alt="" style="left:1.7857142857142856%;top:43.27485380116959%;width:39.285714285714285%;height:32.748538011695906%">
|
||||
<img data-component="ref-02/I04" data-kind="image" src="/layout-reference/ref-02/I04.png" alt="" style="left:1.7857142857142856%;top:78.94736842105263%;width:39.285714285714285%;height:16.95906432748538%">
|
||||
<img data-component="ref-02/D01" data-kind="decoration" src="/layout-reference/ref-02/D01.png" alt="" style="left:58.03571428571429%;top:1.1695906432748537%;width:1.7857142857142856%;height:42.10526315789473%">
|
||||
<img data-component="ref-02/D02" data-kind="decoration" src="/layout-reference/ref-02/D02.png" alt="" style="left:44.642857142857146%;top:92.39766081871345%;width:50.89285714285714%;height:7.017543859649122%">
|
||||
<img class="overlay" src="/layout-reference/ref-02/annotated.png" alt="构件标注"></div><p class="muted">原图第 1 行、第 3 列；112×171 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 右侧主标题</td><td>蓝羽毛版式设计系列</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 中间副标题</td><td>版式灵感收藏</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 图片一图注</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 图片二图注</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 图片三图注</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T06"><td>T06</td><td>文字 / 右下说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T07"><td>T07</td><td>文字 / 右下品牌与说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 图片一</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 图片二</td><td>—</td></tr><tr tabindex="0" data-key="I03"><td>I03</td><td>图片占位/色块 / 图片三</td><td>—</td></tr><tr tabindex="0" data-key="I04"><td>I04</td><td>图片占位/色块 / 图片四</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 分栏细线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 右下横线组</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-02/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-02/source.png">原裁片</a> · <a href="/layout-reference/ref-02/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-02","name":"四格图片列与双列竖题","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[256,46,112,171],"row":1,"column":3},"width":112,"height":171,"reference":"/layout-reference/ref-02/source.png","annotated":"/layout-reference/ref-02/annotated.png","background":"/layout-reference/ref-02/background.png","elements":[{"id":"T01","kind":"text","role":"右侧主标题","box":[91,0,20,126],"text":"蓝羽毛版式设计系列","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-02/T01.png","pixels":1348,"underlay":"/layout-reference/ref-02/T01-underlay.png"},{"id":"T02","kind":"text","role":"中间副标题","box":[70,0,19,84],"text":"版式灵感收藏","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-02/T02.png","pixels":776,"underlay":"/layout-reference/ref-02/T02-underlay.png"},{"id":"T03","kind":"text","role":"图片一图注","box":[0,34,20,4],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-02/T03.png","pixels":28,"underlay":"/layout-reference/ref-02/T03-underlay.png"},{"id":"T04","kind":"text","role":"图片二图注","box":[0,71,29,4],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-02/T04.png","pixels":74,"underlay":"/layout-reference/ref-02/T04-underlay.png"},{"id":"T05","kind":"text","role":"图片三图注","box":[2,132,37,3],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-02/T05.png","pixels":39,"underlay":"/layout-reference/ref-02/T05-underlay.png"},{"id":"T06","kind":"text","role":"右下说明","box":[50,81,32,57],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-02/T06.png","pixels":348,"underlay":"/layout-reference/ref-02/T06-underlay.png"},{"id":"T07","kind":"text","role":"右下品牌与说明","box":[51,143,51,14],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-02/T07.png","pixels":483,"underlay":"/layout-reference/ref-02/T07-underlay.png"},{"id":"I01","kind":"image","role":"图片一","box":[4,3,40,30],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/I01.png","pixels":1198,"mask":"/layout-reference/ref-02/I01-mask.png"},{"id":"I02","kind":"image","role":"图片二","box":[2,38,44,33],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/I02.png","pixels":1443,"mask":"/layout-reference/ref-02/I02-mask.png"},{"id":"I03","kind":"image","role":"图片三","box":[2,74,44,56],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/I03.png","pixels":2421,"mask":"/layout-reference/ref-02/I03-mask.png"},{"id":"I04","kind":"image","role":"图片四","box":[2,135,44,29],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/I04.png","pixels":1276,"mask":"/layout-reference/ref-02/I04-mask.png"},{"id":"D01","kind":"decoration","role":"分栏细线","box":[65,2,2,72],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/D01.png","pixels":143},{"id":"D02","kind":"decoration","role":"右下横线组","box":[50,158,57,12],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/D02.png","pixels":407}],"ocr":[],"verification":{"pixelIdentical":true,"pixels":19152,"unreadableText":5}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,248 +0,0 @@
|
||||
{
|
||||
"id": "ref-02",
|
||||
"name": "四格图片列与双列竖题",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
256,
|
||||
46,
|
||||
112,
|
||||
171
|
||||
],
|
||||
"row": 1,
|
||||
"column": 3
|
||||
},
|
||||
"width": 112,
|
||||
"height": 171,
|
||||
"reference": "/layout-reference/ref-02/source.png",
|
||||
"annotated": "/layout-reference/ref-02/annotated.png",
|
||||
"background": "/layout-reference/ref-02/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "右侧主标题",
|
||||
"box": [
|
||||
91,
|
||||
0,
|
||||
20,
|
||||
126
|
||||
],
|
||||
"text": "蓝羽毛版式设计系列",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-02/T01.png",
|
||||
"pixels": 1348,
|
||||
"underlay": "/layout-reference/ref-02/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "中间副标题",
|
||||
"box": [
|
||||
70,
|
||||
0,
|
||||
19,
|
||||
84
|
||||
],
|
||||
"text": "版式灵感收藏",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-02/T02.png",
|
||||
"pixels": 776,
|
||||
"underlay": "/layout-reference/ref-02/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "图片一图注",
|
||||
"box": [
|
||||
0,
|
||||
34,
|
||||
20,
|
||||
4
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-02/T03.png",
|
||||
"pixels": 28,
|
||||
"underlay": "/layout-reference/ref-02/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "图片二图注",
|
||||
"box": [
|
||||
0,
|
||||
71,
|
||||
29,
|
||||
4
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-02/T04.png",
|
||||
"pixels": 74,
|
||||
"underlay": "/layout-reference/ref-02/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "图片三图注",
|
||||
"box": [
|
||||
2,
|
||||
132,
|
||||
37,
|
||||
3
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-02/T05.png",
|
||||
"pixels": 39,
|
||||
"underlay": "/layout-reference/ref-02/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T06",
|
||||
"kind": "text",
|
||||
"role": "右下说明",
|
||||
"box": [
|
||||
50,
|
||||
81,
|
||||
32,
|
||||
57
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-02/T06.png",
|
||||
"pixels": 348,
|
||||
"underlay": "/layout-reference/ref-02/T06-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T07",
|
||||
"kind": "text",
|
||||
"role": "右下品牌与说明",
|
||||
"box": [
|
||||
51,
|
||||
143,
|
||||
51,
|
||||
14
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-02/T07.png",
|
||||
"pixels": 483,
|
||||
"underlay": "/layout-reference/ref-02/T07-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "图片一",
|
||||
"box": [
|
||||
4,
|
||||
3,
|
||||
40,
|
||||
30
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-02/I01.png",
|
||||
"pixels": 1198,
|
||||
"mask": "/layout-reference/ref-02/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "图片二",
|
||||
"box": [
|
||||
2,
|
||||
38,
|
||||
44,
|
||||
33
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-02/I02.png",
|
||||
"pixels": 1443,
|
||||
"mask": "/layout-reference/ref-02/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I03",
|
||||
"kind": "image",
|
||||
"role": "图片三",
|
||||
"box": [
|
||||
2,
|
||||
74,
|
||||
44,
|
||||
56
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-02/I03.png",
|
||||
"pixels": 2421,
|
||||
"mask": "/layout-reference/ref-02/I03-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I04",
|
||||
"kind": "image",
|
||||
"role": "图片四",
|
||||
"box": [
|
||||
2,
|
||||
135,
|
||||
44,
|
||||
29
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-02/I04.png",
|
||||
"pixels": 1276,
|
||||
"mask": "/layout-reference/ref-02/I04-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "分栏细线",
|
||||
"box": [
|
||||
65,
|
||||
2,
|
||||
2,
|
||||
72
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-02/D01.png",
|
||||
"pixels": 143
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "右下横线组",
|
||||
"box": [
|
||||
50,
|
||||
158,
|
||||
57,
|
||||
12
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-02/D02.png",
|
||||
"pixels": 407
|
||||
}
|
||||
],
|
||||
"ocr": [],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19152,
|
||||
"unreadableText": 5
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-03 · 左上标题与右下错位图</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:114/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-03 / 左上标题与右下错位图</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-03/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-03/T01" data-kind="text" src="/layout-reference/ref-03/T01.png" alt="蓝羽毛" style="left:0%;top:0%;width:39.473684210526315%;height:11.560693641618498%">
|
||||
<img data-component="ref-03/T02" data-kind="text" src="/layout-reference/ref-03/T02.png" alt="右上说明（未辨识原字形）" style="left:70.17543859649122%;top:12.716763005780345%;width:25.438596491228072%;height:13.294797687861271%">
|
||||
<img data-component="ref-03/T03" data-kind="text" src="/layout-reference/ref-03/T03.png" alt="01" style="left:87.71929824561403%;top:27.74566473988439%;width:7.017543859649122%;height:4.046242774566474%">
|
||||
<img data-component="ref-03/T04" data-kind="text" src="/layout-reference/ref-03/T04.png" alt="左下信息两列（未辨识原字形）" style="left:3.508771929824561%;top:68.20809248554913%;width:32.45614035087719%;height:19.07514450867052%">
|
||||
<img data-component="ref-03/I01" data-kind="image" src="/layout-reference/ref-03/I01.png" alt="" style="left:3.508771929824561%;top:12.716763005780345%;width:65.78947368421053%;height:47.398843930635834%">
|
||||
<img data-component="ref-03/I02" data-kind="image" src="/layout-reference/ref-03/I02.png" alt="" style="left:39.473684210526315%;top:61.849710982658955%;width:55.26315789473685%;height:27.74566473988439%">
|
||||
<img data-component="ref-03/D01" data-kind="decoration" src="/layout-reference/ref-03/D01.png" alt="" style="left:70.17543859649122%;top:28.32369942196532%;width:15.789473684210526%;height:3.4682080924855487%">
|
||||
<img data-component="ref-03/D02" data-kind="decoration" src="/layout-reference/ref-03/D02.png" alt="" style="left:21.052631578947366%;top:94.79768786127167%;width:11.403508771929824%;height:2.312138728323699%">
|
||||
<img data-component="ref-03/D03" data-kind="decoration" src="/layout-reference/ref-03/D03.png" alt="" style="left:69.2982456140351%;top:94.21965317919076%;width:14.035087719298245%;height:2.8901734104046244%">
|
||||
<img class="overlay" src="/layout-reference/ref-03/annotated.png" alt="构件标注"></div><p class="muted">原图第 1 行、第 4 列；114×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 主标题</td><td>蓝羽毛</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 右上说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 编号</td><td>01</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 左下信息两列</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 左上主图</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 右下副图</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 斜引线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 底部左短线</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 底部右短线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-03/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-03/source.png">原裁片</a> · <a href="/layout-reference/ref-03/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-03","name":"左上标题与右下错位图","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[376,46,114,173],"row":1,"column":4},"width":114,"height":173,"reference":"/layout-reference/ref-03/source.png","annotated":"/layout-reference/ref-03/annotated.png","background":"/layout-reference/ref-03/background.png","elements":[{"id":"T01","kind":"text","role":"主标题","box":[0,0,45,20],"text":"蓝羽毛","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-03/T01.png","pixels":372,"underlay":"/layout-reference/ref-03/T01-underlay.png"},{"id":"T02","kind":"text","role":"右上说明","box":[80,22,29,23],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-03/T02.png","pixels":359,"underlay":"/layout-reference/ref-03/T02-underlay.png"},{"id":"T03","kind":"text","role":"编号","box":[100,48,8,7],"text":"01","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-03/T03.png","pixels":39,"underlay":"/layout-reference/ref-03/T03-underlay.png"},{"id":"T04","kind":"text","role":"左下信息两列","box":[4,118,37,33],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-03/T04.png","pixels":353,"underlay":"/layout-reference/ref-03/T04-underlay.png"},{"id":"I01","kind":"image","role":"左上主图","box":[4,22,75,82],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-03/I01.png","pixels":6006,"mask":"/layout-reference/ref-03/I01-mask.png"},{"id":"I02","kind":"image","role":"右下副图","box":[45,107,63,48],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-03/I02.png","pixels":3004,"mask":"/layout-reference/ref-03/I02-mask.png"},{"id":"D01","kind":"decoration","role":"斜引线","box":[80,49,18,6],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-03/D01.png","pixels":38},{"id":"D02","kind":"decoration","role":"底部左短线","box":[24,164,13,4],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-03/D02.png","pixels":52},{"id":"D03","kind":"decoration","role":"底部右短线","box":[79,163,16,5],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-03/D03.png","pixels":65}],"ocr":[{"box":[0.0221329192553819,0.02865017716183693,0.3329271461531433,0.08913510199456776],"confidence":0.5,"text":"蓝羽毛"}],"verification":{"pixelIdentical":true,"pixels":19722,"unreadableText":2}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,190 +0,0 @@
|
||||
{
|
||||
"id": "ref-03",
|
||||
"name": "左上标题与右下错位图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
376,
|
||||
46,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 1,
|
||||
"column": 4
|
||||
},
|
||||
"width": 114,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-03/source.png",
|
||||
"annotated": "/layout-reference/ref-03/annotated.png",
|
||||
"background": "/layout-reference/ref-03/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "主标题",
|
||||
"box": [
|
||||
0,
|
||||
0,
|
||||
45,
|
||||
20
|
||||
],
|
||||
"text": "蓝羽毛",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-03/T01.png",
|
||||
"pixels": 372,
|
||||
"underlay": "/layout-reference/ref-03/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "右上说明",
|
||||
"box": [
|
||||
80,
|
||||
22,
|
||||
29,
|
||||
23
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-03/T02.png",
|
||||
"pixels": 359,
|
||||
"underlay": "/layout-reference/ref-03/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "编号",
|
||||
"box": [
|
||||
100,
|
||||
48,
|
||||
8,
|
||||
7
|
||||
],
|
||||
"text": "01",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-03/T03.png",
|
||||
"pixels": 39,
|
||||
"underlay": "/layout-reference/ref-03/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "左下信息两列",
|
||||
"box": [
|
||||
4,
|
||||
118,
|
||||
37,
|
||||
33
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-03/T04.png",
|
||||
"pixels": 353,
|
||||
"underlay": "/layout-reference/ref-03/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "左上主图",
|
||||
"box": [
|
||||
4,
|
||||
22,
|
||||
75,
|
||||
82
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-03/I01.png",
|
||||
"pixels": 6006,
|
||||
"mask": "/layout-reference/ref-03/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "右下副图",
|
||||
"box": [
|
||||
45,
|
||||
107,
|
||||
63,
|
||||
48
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-03/I02.png",
|
||||
"pixels": 3004,
|
||||
"mask": "/layout-reference/ref-03/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "斜引线",
|
||||
"box": [
|
||||
80,
|
||||
49,
|
||||
18,
|
||||
6
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-03/D01.png",
|
||||
"pixels": 38
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "底部左短线",
|
||||
"box": [
|
||||
24,
|
||||
164,
|
||||
13,
|
||||
4
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-03/D02.png",
|
||||
"pixels": 52
|
||||
},
|
||||
{
|
||||
"id": "D03",
|
||||
"kind": "decoration",
|
||||
"role": "底部右短线",
|
||||
"box": [
|
||||
79,
|
||||
163,
|
||||
16,
|
||||
5
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-03/D03.png",
|
||||
"pixels": 65
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.0221329192553819,
|
||||
0.02865017716183693,
|
||||
0.3329271461531433,
|
||||
0.08913510199456776
|
||||
],
|
||||
"confidence": 0.5,
|
||||
"text": "蓝羽毛"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19722,
|
||||
"unreadableText": 2
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-04 · 满版灰底椭圆与右侧白字</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-04 / 满版灰底椭圆与右侧白字</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-04/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-04/T01" data-kind="text" src="/layout-reference/ref-04/T01.png" alt="蓝羽毛" style="left:70.79646017699115%;top:2.312138728323699%;width:19.469026548672566%;height:31.213872832369944%">
|
||||
<img data-component="ref-04/T02" data-kind="text" src="/layout-reference/ref-04/T02.png" alt="版式" style="left:69.91150442477876%;top:60.115606936416185%;width:24.778761061946902%;height:26.011560693641616%">
|
||||
<img data-component="ref-04/T03" data-kind="text" src="/layout-reference/ref-04/T03.png" alt="椭圆左沿弧形微字（未辨识原字形）" style="left:10.619469026548673%;top:12.138728323699421%;width:20.353982300884958%;height:63.005780346820806%">
|
||||
<img data-component="ref-04/T04" data-kind="text" src="/layout-reference/ref-04/T04.png" alt="右侧辅助小字（未辨识原字形）" style="left:73.45132743362832%;top:47.398843930635834%;width:17.699115044247787%;height:4.046242774566474%">
|
||||
<img data-component="ref-04/I01" data-kind="image" src="/layout-reference/ref-04/I01.png" alt="" style="left:9.734513274336283%;top:9.248554913294797%;width:81.41592920353983%;height:82.65895953757226%">
|
||||
<img data-component="ref-04/D01" data-kind="decoration" src="/layout-reference/ref-04/D01.png" alt="" style="left:2.6548672566371683%;top:4.624277456647398%;width:10.619469026548673%;height:7.514450867052023%">
|
||||
<img data-component="ref-04/D02" data-kind="decoration" src="/layout-reference/ref-04/D02.png" alt="" style="left:2.6548672566371683%;top:76.30057803468208%;width:25.663716814159294%;height:13.294797687861271%">
|
||||
<img data-component="ref-04/D03" data-kind="decoration" src="/layout-reference/ref-04/D03.png" alt="" style="left:3.5398230088495577%;top:96.53179190751445%;width:42.47787610619469%;height:0.5780346820809248%">
|
||||
<img class="overlay" src="/layout-reference/ref-04/annotated.png" alt="构件标注"></div><p class="muted">原图第 1 行、第 5 列；113×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 右侧竖向标题</td><td>蓝羽毛</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 右下竖向标题</td><td>版式</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 椭圆左沿弧形微字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 右侧辅助小字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 中央倾斜椭圆图位</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 左上方块与短线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 左下阶梯线组</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 底部细线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-04/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-04/source.png">原裁片</a> · <a href="/layout-reference/ref-04/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-04","name":"满版灰底椭圆与右侧白字","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[497,45,113,173],"row":1,"column":5},"width":113,"height":173,"reference":"/layout-reference/ref-04/source.png","annotated":"/layout-reference/ref-04/annotated.png","background":"/layout-reference/ref-04/background.png","elements":[{"id":"T01","kind":"text","role":"右侧竖向标题","box":[80,4,22,54],"text":"蓝羽毛","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-04/T01.png","pixels":674,"underlay":"/layout-reference/ref-04/T01-underlay.png"},{"id":"T02","kind":"text","role":"右下竖向标题","box":[79,104,28,45],"text":"版式","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-04/T02.png","pixels":831,"underlay":"/layout-reference/ref-04/T02-underlay.png"},{"id":"T03","kind":"text","role":"椭圆左沿弧形微字","box":[12,21,23,109],"text":null,"direction":"curved","reading":"unreadable","asset":"/layout-reference/ref-04/T03.png","pixels":487,"underlay":"/layout-reference/ref-04/T03-underlay.png"},{"id":"T04","kind":"text","role":"右侧辅助小字","box":[83,82,20,7],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-04/T04.png","pixels":39,"underlay":"/layout-reference/ref-04/T04-underlay.png"},{"id":"I01","kind":"image","role":"中央倾斜椭圆图位","box":[11,16,92,143],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-04/I01.png","pixels":9110,"mask":"/layout-reference/ref-04/I01-mask.png"},{"id":"D01","kind":"decoration","role":"左上方块与短线","box":[3,8,12,13],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-04/D01.png","pixels":105},{"id":"D02","kind":"decoration","role":"左下阶梯线组","box":[3,132,29,23],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-04/D02.png","pixels":258},{"id":"D03","kind":"decoration","role":"底部细线","box":[4,167,48,1],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-04/D03.png","pixels":48}],"ocr":[],"verification":{"pixelIdentical":true,"pixels":19549,"unreadableText":2}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,162 +0,0 @@
|
||||
{
|
||||
"id": "ref-04",
|
||||
"name": "满版灰底椭圆与右侧白字",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
497,
|
||||
45,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 1,
|
||||
"column": 5
|
||||
},
|
||||
"width": 113,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-04/source.png",
|
||||
"annotated": "/layout-reference/ref-04/annotated.png",
|
||||
"background": "/layout-reference/ref-04/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "右侧竖向标题",
|
||||
"box": [
|
||||
80,
|
||||
4,
|
||||
22,
|
||||
54
|
||||
],
|
||||
"text": "蓝羽毛",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-04/T01.png",
|
||||
"pixels": 674,
|
||||
"underlay": "/layout-reference/ref-04/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "右下竖向标题",
|
||||
"box": [
|
||||
79,
|
||||
104,
|
||||
28,
|
||||
45
|
||||
],
|
||||
"text": "版式",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-04/T02.png",
|
||||
"pixels": 831,
|
||||
"underlay": "/layout-reference/ref-04/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "椭圆左沿弧形微字",
|
||||
"box": [
|
||||
12,
|
||||
21,
|
||||
23,
|
||||
109
|
||||
],
|
||||
"text": null,
|
||||
"direction": "curved",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-04/T03.png",
|
||||
"pixels": 487,
|
||||
"underlay": "/layout-reference/ref-04/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "右侧辅助小字",
|
||||
"box": [
|
||||
83,
|
||||
82,
|
||||
20,
|
||||
7
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-04/T04.png",
|
||||
"pixels": 39,
|
||||
"underlay": "/layout-reference/ref-04/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "中央倾斜椭圆图位",
|
||||
"box": [
|
||||
11,
|
||||
16,
|
||||
92,
|
||||
143
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-04/I01.png",
|
||||
"pixels": 9110,
|
||||
"mask": "/layout-reference/ref-04/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "左上方块与短线",
|
||||
"box": [
|
||||
3,
|
||||
8,
|
||||
12,
|
||||
13
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-04/D01.png",
|
||||
"pixels": 105
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "左下阶梯线组",
|
||||
"box": [
|
||||
3,
|
||||
132,
|
||||
29,
|
||||
23
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-04/D02.png",
|
||||
"pixels": 258
|
||||
},
|
||||
{
|
||||
"id": "D03",
|
||||
"kind": "decoration",
|
||||
"role": "底部细线",
|
||||
"box": [
|
||||
4,
|
||||
167,
|
||||
48,
|
||||
1
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-04/D03.png",
|
||||
"pixels": 48
|
||||
}
|
||||
],
|
||||
"ocr": [],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19549,
|
||||
"unreadableText": 2
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-05 · 五圆出血与右侧竖排大字</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:112/172;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-05 / 五圆出血与右侧竖排大字</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-05/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-05/T01" data-kind="text" src="/layout-reference/ref-05/T01.png" alt="蓝羽毛" style="left:64.28571428571429%;top:41.27906976744186%;width:25%;height:57.55813953488372%">
|
||||
<img data-component="ref-05/T02" data-kind="text" src="/layout-reference/ref-05/T02.png" alt="版式设计 设计灵感" style="left:89.28571428571429%;top:41.86046511627907%;width:9.821428571428571%;height:52.32558139534884%">
|
||||
<img data-component="ref-05/I01" data-kind="image" src="/layout-reference/ref-05/I01.png" alt="" style="left:0.8928571428571428%;top:2.9069767441860463%;width:39.285714285714285%;height:33.13953488372093%">
|
||||
<img data-component="ref-05/I02" data-kind="image" src="/layout-reference/ref-05/I02.png" alt="" style="left:50%;top:0.5813953488372093%;width:48.214285714285715%;height:25.581395348837212%">
|
||||
<img data-component="ref-05/I03" data-kind="image" src="/layout-reference/ref-05/I03.png" alt="" style="left:41.07142857142857%;top:25.581395348837212%;width:37.5%;height:24.418604651162788%">
|
||||
<img data-component="ref-05/I04" data-kind="image" src="/layout-reference/ref-05/I04.png" alt="" style="left:2.6785714285714284%;top:42.44186046511628%;width:33.92857142857143%;height:21.511627906976745%">
|
||||
<img data-component="ref-05/I05" data-kind="image" src="/layout-reference/ref-05/I05.png" alt="" style="left:0.8928571428571428%;top:69.18604651162791%;width:58.92857142857143%;height:29.069767441860467%">
|
||||
<img data-component="ref-05/D01" data-kind="decoration" src="/layout-reference/ref-05/D01.png" alt="" style="left:41.964285714285715%;top:61.627906976744185%;width:21.428571428571427%;height:25%">
|
||||
<img class="overlay" src="/layout-reference/ref-05/annotated.png" alt="构件标注"></div><p class="muted">原图第 1 行、第 6 列；112×172 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 右侧大标题</td><td>蓝羽毛</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 右侧细标题</td><td>版式设计 设计灵感</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 左上出血圆</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 右上出血圆</td><td>—</td></tr><tr tabindex="0" data-key="I03"><td>I03</td><td>图片占位/色块 / 中部圆</td><td>—</td></tr><tr tabindex="0" data-key="I04"><td>I04</td><td>图片占位/色块 / 左中小圆</td><td>—</td></tr><tr tabindex="0" data-key="I05"><td>I05</td><td>图片占位/色块 / 左下出血圆</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 中下竖线组</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-05/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-05/source.png">原裁片</a> · <a href="/layout-reference/ref-05/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-05","name":"五圆出血与右侧竖排大字","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[617,45,112,172],"row":1,"column":6},"width":112,"height":172,"reference":"/layout-reference/ref-05/source.png","annotated":"/layout-reference/ref-05/annotated.png","background":"/layout-reference/ref-05/background.png","elements":[{"id":"T01","kind":"text","role":"右侧大标题","box":[72,71,28,99],"text":"蓝羽毛","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-05/T01.png","pixels":1148,"underlay":"/layout-reference/ref-05/T01-underlay.png"},{"id":"T02","kind":"text","role":"右侧细标题","box":[100,72,11,90],"text":"版式设计 设计灵感","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-05/T02.png","pixels":487,"underlay":"/layout-reference/ref-05/T02-underlay.png"},{"id":"I01","kind":"image","role":"左上出血圆","box":[1,5,44,57],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-05/I01.png","pixels":2144,"mask":"/layout-reference/ref-05/I01-mask.png"},{"id":"I02","kind":"image","role":"右上出血圆","box":[56,1,54,44],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-05/I02.png","pixels":2070,"mask":"/layout-reference/ref-05/I02-mask.png"},{"id":"I03","kind":"image","role":"中部圆","box":[46,44,42,42],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-05/I03.png","pixels":1302,"mask":"/layout-reference/ref-05/I03-mask.png"},{"id":"I04","kind":"image","role":"左中小圆","box":[3,73,38,37],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-05/I04.png","pixels":1107,"mask":"/layout-reference/ref-05/I04-mask.png"},{"id":"I05","kind":"image","role":"左下出血圆","box":[1,119,66,50],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-05/I05.png","pixels":2892,"mask":"/layout-reference/ref-05/I05-mask.png"},{"id":"D01","kind":"decoration","role":"中下竖线组","box":[47,106,24,43],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-05/D01.png","pixels":286}],"ocr":[],"verification":{"pixelIdentical":true,"pixels":19264,"unreadableText":0}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,164 +0,0 @@
|
||||
{
|
||||
"id": "ref-05",
|
||||
"name": "五圆出血与右侧竖排大字",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
617,
|
||||
45,
|
||||
112,
|
||||
172
|
||||
],
|
||||
"row": 1,
|
||||
"column": 6
|
||||
},
|
||||
"width": 112,
|
||||
"height": 172,
|
||||
"reference": "/layout-reference/ref-05/source.png",
|
||||
"annotated": "/layout-reference/ref-05/annotated.png",
|
||||
"background": "/layout-reference/ref-05/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "右侧大标题",
|
||||
"box": [
|
||||
72,
|
||||
71,
|
||||
28,
|
||||
99
|
||||
],
|
||||
"text": "蓝羽毛",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-05/T01.png",
|
||||
"pixels": 1148,
|
||||
"underlay": "/layout-reference/ref-05/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "右侧细标题",
|
||||
"box": [
|
||||
100,
|
||||
72,
|
||||
11,
|
||||
90
|
||||
],
|
||||
"text": "版式设计 设计灵感",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-05/T02.png",
|
||||
"pixels": 487,
|
||||
"underlay": "/layout-reference/ref-05/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "左上出血圆",
|
||||
"box": [
|
||||
1,
|
||||
5,
|
||||
44,
|
||||
57
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-05/I01.png",
|
||||
"pixels": 2144,
|
||||
"mask": "/layout-reference/ref-05/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "右上出血圆",
|
||||
"box": [
|
||||
56,
|
||||
1,
|
||||
54,
|
||||
44
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-05/I02.png",
|
||||
"pixels": 2070,
|
||||
"mask": "/layout-reference/ref-05/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I03",
|
||||
"kind": "image",
|
||||
"role": "中部圆",
|
||||
"box": [
|
||||
46,
|
||||
44,
|
||||
42,
|
||||
42
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-05/I03.png",
|
||||
"pixels": 1302,
|
||||
"mask": "/layout-reference/ref-05/I03-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I04",
|
||||
"kind": "image",
|
||||
"role": "左中小圆",
|
||||
"box": [
|
||||
3,
|
||||
73,
|
||||
38,
|
||||
37
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-05/I04.png",
|
||||
"pixels": 1107,
|
||||
"mask": "/layout-reference/ref-05/I04-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I05",
|
||||
"kind": "image",
|
||||
"role": "左下出血圆",
|
||||
"box": [
|
||||
1,
|
||||
119,
|
||||
66,
|
||||
50
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-05/I05.png",
|
||||
"pixels": 2892,
|
||||
"mask": "/layout-reference/ref-05/I05-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "中下竖线组",
|
||||
"box": [
|
||||
47,
|
||||
106,
|
||||
24,
|
||||
43
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-05/D01.png",
|
||||
"pixels": 286
|
||||
}
|
||||
],
|
||||
"ocr": [],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19264,
|
||||
"unreadableText": 0
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-06 · 满高左图与右侧窄栏</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:114/172;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-06 / 满高左图与右侧窄栏</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-06/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-06/T01" data-kind="text" src="/layout-reference/ref-06/T01.png" alt="蓝羽毛の版式" style="left:85.96491228070175%;top:16.27906976744186%;width:7.894736842105263%;height:34.30232558139535%">
|
||||
<img data-component="ref-06/T02" data-kind="text" src="/layout-reference/ref-06/T02.png" alt="审美提升 设计灵感" style="left:71.05263157894737%;top:28.488372093023255%;width:12.280701754385964%;height:28.488372093023255%">
|
||||
<img data-component="ref-06/T03" data-kind="text" src="/layout-reference/ref-06/T03.png" alt="底部英文标识（未辨识原字形）" style="left:68.42105263157895%;top:94.18604651162791%;width:28.07017543859649%;height:5.232558139534884%">
|
||||
<img data-component="ref-06/I01" data-kind="image" src="/layout-reference/ref-06/I01.png" alt="" style="left:3.508771929824561%;top:1.744186046511628%;width:60.526315789473685%;height:94.76744186046511%">
|
||||
<img data-component="ref-06/D01" data-kind="decoration" src="/layout-reference/ref-06/D01.png" alt="" style="left:78.0701754385965%;top:2.3255813953488373%;width:2.631578947368421%;height:15.11627906976744%">
|
||||
<img data-component="ref-06/D02" data-kind="decoration" src="/layout-reference/ref-06/D02.png" alt="" style="left:70.17543859649122%;top:59.30232558139535%;width:13.157894736842104%;height:33.72093023255814%">
|
||||
<img data-component="ref-06/D03" data-kind="decoration" src="/layout-reference/ref-06/D03.png" alt="" style="left:71.05263157894737%;top:54.06976744186046%;width:10.526315789473683%;height:5.232558139534884%">
|
||||
<img class="overlay" src="/layout-reference/ref-06/annotated.png" alt="构件标注"></div><p class="muted">原图第 2 行、第 2 列；114×172 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 右侧竖向主标题</td><td>蓝羽毛の版式</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 右侧竖向说明</td><td>审美提升 设计灵感</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 底部英文标识</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 左侧满高图片</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 右上短竖线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 右下细长线组</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 右侧斜引线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-06/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-06/source.png">原裁片</a> · <a href="/layout-reference/ref-06/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-06","name":"满高左图与右侧窄栏","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[134,228,114,172],"row":2,"column":2},"width":114,"height":172,"reference":"/layout-reference/ref-06/source.png","annotated":"/layout-reference/ref-06/annotated.png","background":"/layout-reference/ref-06/background.png","elements":[{"id":"T01","kind":"text","role":"右侧竖向主标题","box":[98,28,9,59],"text":"蓝羽毛の版式","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-06/T01.png","pixels":376,"underlay":"/layout-reference/ref-06/T01-underlay.png"},{"id":"T02","kind":"text","role":"右侧竖向说明","box":[81,49,14,49],"text":"审美提升 设计灵感","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-06/T02.png","pixels":368,"underlay":"/layout-reference/ref-06/T02-underlay.png"},{"id":"T03","kind":"text","role":"底部英文标识","box":[78,162,32,9],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-06/T03.png","pixels":204,"underlay":"/layout-reference/ref-06/T03-underlay.png"},{"id":"I01","kind":"image","role":"左侧满高图片","box":[4,3,69,163],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-06/I01.png","pixels":11240,"mask":"/layout-reference/ref-06/I01-mask.png"},{"id":"D01","kind":"decoration","role":"右上短竖线","box":[89,4,3,26],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-06/D01.png","pixels":53},{"id":"D02","kind":"decoration","role":"右下细长线组","box":[80,102,15,58],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-06/D02.png","pixels":584},{"id":"D03","kind":"decoration","role":"右侧斜引线","box":[81,93,12,9],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-06/D03.png","pixels":45}],"ocr":[],"verification":{"pixelIdentical":true,"pixels":19608,"unreadableText":1}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,145 +0,0 @@
|
||||
{
|
||||
"id": "ref-06",
|
||||
"name": "满高左图与右侧窄栏",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
134,
|
||||
228,
|
||||
114,
|
||||
172
|
||||
],
|
||||
"row": 2,
|
||||
"column": 2
|
||||
},
|
||||
"width": 114,
|
||||
"height": 172,
|
||||
"reference": "/layout-reference/ref-06/source.png",
|
||||
"annotated": "/layout-reference/ref-06/annotated.png",
|
||||
"background": "/layout-reference/ref-06/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "右侧竖向主标题",
|
||||
"box": [
|
||||
98,
|
||||
28,
|
||||
9,
|
||||
59
|
||||
],
|
||||
"text": "蓝羽毛の版式",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-06/T01.png",
|
||||
"pixels": 376,
|
||||
"underlay": "/layout-reference/ref-06/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "右侧竖向说明",
|
||||
"box": [
|
||||
81,
|
||||
49,
|
||||
14,
|
||||
49
|
||||
],
|
||||
"text": "审美提升 设计灵感",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-06/T02.png",
|
||||
"pixels": 368,
|
||||
"underlay": "/layout-reference/ref-06/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "底部英文标识",
|
||||
"box": [
|
||||
78,
|
||||
162,
|
||||
32,
|
||||
9
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-06/T03.png",
|
||||
"pixels": 204,
|
||||
"underlay": "/layout-reference/ref-06/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "左侧满高图片",
|
||||
"box": [
|
||||
4,
|
||||
3,
|
||||
69,
|
||||
163
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-06/I01.png",
|
||||
"pixels": 11240,
|
||||
"mask": "/layout-reference/ref-06/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "右上短竖线",
|
||||
"box": [
|
||||
89,
|
||||
4,
|
||||
3,
|
||||
26
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-06/D01.png",
|
||||
"pixels": 53
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "右下细长线组",
|
||||
"box": [
|
||||
80,
|
||||
102,
|
||||
15,
|
||||
58
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-06/D02.png",
|
||||
"pixels": 584
|
||||
},
|
||||
{
|
||||
"id": "D03",
|
||||
"kind": "decoration",
|
||||
"role": "右侧斜引线",
|
||||
"box": [
|
||||
81,
|
||||
93,
|
||||
12,
|
||||
9
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-06/D03.png",
|
||||
"pixels": 45
|
||||
}
|
||||
],
|
||||
"ocr": [],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19608,
|
||||
"unreadableText": 1
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-07 · 同心圆图位与底部年份</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:112/172;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-07 / 同心圆图位与底部年份</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-07/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-07/T01" data-kind="text" src="/layout-reference/ref-07/T01.png" alt="下沿环形文字（未辨识原字形）" style="left:15.178571428571427%;top:43.604651162790695%;width:80.35714285714286%;height:19.767441860465116%">
|
||||
<img data-component="ref-07/T02" data-kind="text" src="/layout-reference/ref-07/T02.png" alt="2025" style="left:1.7857142857142856%;top:75%;width:24.107142857142858%;height:6.976744186046512%">
|
||||
<img data-component="ref-07/T03" data-kind="text" src="/layout-reference/ref-07/T03.png" alt="年份下副标题（未辨识原字形）" style="left:2.6785714285714284%;top:81.3953488372093%;width:51.78571428571429%;height:2.9069767441860463%">
|
||||
<img data-component="ref-07/T04" data-kind="text" src="/layout-reference/ref-07/T04.png" alt="底部说明（未辨识原字形）" style="left:0.8928571428571428%;top:84.88372093023256%;width:97.32142857142857%;height:9.30232558139535%">
|
||||
<img data-component="ref-07/T05" data-kind="text" src="/layout-reference/ref-07/T05.png" alt="右下品牌（未辨识原字形）" style="left:51.78571428571429%;top:93.6046511627907%;width:46.42857142857143%;height:5.232558139534884%">
|
||||
<img data-component="ref-07/I01" data-kind="image" src="/layout-reference/ref-07/I01.png" alt="" style="left:16.071428571428573%;top:5.232558139534884%;width:82.14285714285714%;height:54.65116279069767%">
|
||||
<img data-component="ref-07/D01" data-kind="decoration" src="/layout-reference/ref-07/D01.png" alt="" style="left:0%;top:0%;width:100%;height:80.23255813953489%">
|
||||
<img class="overlay" src="/layout-reference/ref-07/annotated.png" alt="构件标注"></div><p class="muted">原图第 2 行、第 3 列；112×172 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 下沿环形文字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 年份</td><td>2025</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 年份下副标题</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 底部说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 右下品牌</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 中央圆形主图</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 同心环线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-07/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-07/source.png">原裁片</a> · <a href="/layout-reference/ref-07/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-07","name":"同心圆图位与底部年份","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[256,228,112,172],"row":2,"column":3},"width":112,"height":172,"reference":"/layout-reference/ref-07/source.png","annotated":"/layout-reference/ref-07/annotated.png","background":"/layout-reference/ref-07/background.png","elements":[{"id":"T01","kind":"text","role":"下沿环形文字","box":[17,75,90,34],"text":null,"direction":"curved","reading":"unreadable","asset":"/layout-reference/ref-07/T01.png","pixels":160,"underlay":"/layout-reference/ref-07/T01-underlay.png"},{"id":"T02","kind":"text","role":"年份","box":[2,129,27,12],"text":"2025","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-07/T02.png","pixels":226,"underlay":"/layout-reference/ref-07/T02-underlay.png"},{"id":"T03","kind":"text","role":"年份下副标题","box":[3,140,58,5],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-07/T03.png","pixels":168,"underlay":"/layout-reference/ref-07/T03-underlay.png"},{"id":"T04","kind":"text","role":"底部说明","box":[1,146,109,16],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-07/T04.png","pixels":1217,"underlay":"/layout-reference/ref-07/T04-underlay.png"},{"id":"T05","kind":"text","role":"右下品牌","box":[58,161,52,9],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-07/T05.png","pixels":245,"underlay":"/layout-reference/ref-07/T05-underlay.png"},{"id":"I01","kind":"image","role":"中央圆形主图","box":[18,9,92,94],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-07/I01.png","pixels":6852,"mask":"/layout-reference/ref-07/I01-mask.png"},{"id":"D01","kind":"decoration","role":"同心环线","box":[0,0,112,138],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-07/D01.png","pixels":5238}],"ocr":[{"box":[0.026785715591931197,0.7558139533053403,0.23511904761904764,0.0678294573643411],"confidence":1,"text":"2025"},{"box":[0.5292150606737416,0.9085944883228659,0.43264130183628624,0.05102807791658148],"confidence":0.30000001192092896,"text":"能車贤好雞 蓋羽毛"}],"verification":{"pixelIdentical":true,"pixels":19264,"unreadableText":4}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,168 +0,0 @@
|
||||
{
|
||||
"id": "ref-07",
|
||||
"name": "同心圆图位与底部年份",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
256,
|
||||
228,
|
||||
112,
|
||||
172
|
||||
],
|
||||
"row": 2,
|
||||
"column": 3
|
||||
},
|
||||
"width": 112,
|
||||
"height": 172,
|
||||
"reference": "/layout-reference/ref-07/source.png",
|
||||
"annotated": "/layout-reference/ref-07/annotated.png",
|
||||
"background": "/layout-reference/ref-07/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "下沿环形文字",
|
||||
"box": [
|
||||
17,
|
||||
75,
|
||||
90,
|
||||
34
|
||||
],
|
||||
"text": null,
|
||||
"direction": "curved",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-07/T01.png",
|
||||
"pixels": 160,
|
||||
"underlay": "/layout-reference/ref-07/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "年份",
|
||||
"box": [
|
||||
2,
|
||||
129,
|
||||
27,
|
||||
12
|
||||
],
|
||||
"text": "2025",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-07/T02.png",
|
||||
"pixels": 226,
|
||||
"underlay": "/layout-reference/ref-07/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "年份下副标题",
|
||||
"box": [
|
||||
3,
|
||||
140,
|
||||
58,
|
||||
5
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-07/T03.png",
|
||||
"pixels": 168,
|
||||
"underlay": "/layout-reference/ref-07/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "底部说明",
|
||||
"box": [
|
||||
1,
|
||||
146,
|
||||
109,
|
||||
16
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-07/T04.png",
|
||||
"pixels": 1217,
|
||||
"underlay": "/layout-reference/ref-07/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "右下品牌",
|
||||
"box": [
|
||||
58,
|
||||
161,
|
||||
52,
|
||||
9
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-07/T05.png",
|
||||
"pixels": 245,
|
||||
"underlay": "/layout-reference/ref-07/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "中央圆形主图",
|
||||
"box": [
|
||||
18,
|
||||
9,
|
||||
92,
|
||||
94
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-07/I01.png",
|
||||
"pixels": 6852,
|
||||
"mask": "/layout-reference/ref-07/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "同心环线",
|
||||
"box": [
|
||||
0,
|
||||
0,
|
||||
112,
|
||||
138
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-07/D01.png",
|
||||
"pixels": 5238
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.026785715591931197,
|
||||
0.7558139533053403,
|
||||
0.23511904761904764,
|
||||
0.0678294573643411
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "2025"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.5292150606737416,
|
||||
0.9085944883228659,
|
||||
0.43264130183628624,
|
||||
0.05102807791658148
|
||||
],
|
||||
"confidence": 0.30000001192092896,
|
||||
"text": "能車贤好雞 蓋羽毛"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19264,
|
||||
"unreadableText": 4
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-08 · 双层满宽图与字距横栏</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-08 / 双层满宽图与字距横栏</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-08/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-08/T01" data-kind="text" src="/layout-reference/ref-08/T01.png" alt="BULUBLUE" style="left:0%;top:0%;width:98.23008849557522%;height:8.092485549132949%">
|
||||
<img data-component="ref-08/T02" data-kind="text" src="/layout-reference/ref-08/T02.png" alt="蓝羽毛设计" style="left:0%;top:8.092485549132949%;width:98.23008849557522%;height:9.248554913294797%">
|
||||
<img data-component="ref-08/T03" data-kind="text" src="/layout-reference/ref-08/T03.png" alt="DESIGNFOR2026" style="left:2.6548672566371683%;top:39.30635838150289%;width:94.69026548672566%;height:4.624277456647398%">
|
||||
<img data-component="ref-08/I01" data-kind="image" src="/layout-reference/ref-08/I01.png" alt="" style="left:3.5398230088495577%;top:17.91907514450867%;width:90.2654867256637%;height:20.809248554913296%">
|
||||
<img data-component="ref-08/I02" data-kind="image" src="/layout-reference/ref-08/I02.png" alt="" style="left:3.5398230088495577%;top:43.93063583815029%;width:90.2654867256637%;height:50.86705202312138%">
|
||||
<img class="overlay" src="/layout-reference/ref-08/annotated.png" alt="构件标注"></div><p class="muted">原图第 2 行、第 4 列；113×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 顶部英文刊头</td><td>BULUBLUE</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 顶部中文刊头</td><td>蓝羽毛设计</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 中央字距标签</td><td>DESIGNFOR2026</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 中部横向图片</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 下部大图</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-08/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-08/source.png">原裁片</a> · <a href="/layout-reference/ref-08/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-08","name":"双层满宽图与字距横栏","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[376,227,113,173],"row":2,"column":4},"width":113,"height":173,"reference":"/layout-reference/ref-08/source.png","annotated":"/layout-reference/ref-08/annotated.png","background":"/layout-reference/ref-08/background.png","elements":[{"id":"T01","kind":"text","role":"顶部英文刊头","box":[0,0,111,14],"text":"BULUBLUE","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-08/T01.png","pixels":782,"underlay":"/layout-reference/ref-08/T01-underlay.png"},{"id":"T02","kind":"text","role":"顶部中文刊头","box":[0,14,111,16],"text":"蓝羽毛设计","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-08/T02.png","pixels":732,"underlay":"/layout-reference/ref-08/T02-underlay.png"},{"id":"T03","kind":"text","role":"中央字距标签","box":[3,68,107,8],"text":"DESIGNFOR2026","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-08/T03.png","pixels":360,"underlay":"/layout-reference/ref-08/T03-underlay.png"},{"id":"I01","kind":"image","role":"中部横向图片","box":[4,31,102,36],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-08/I01.png","pixels":3671,"mask":"/layout-reference/ref-08/I01-mask.png"},{"id":"I02","kind":"image","role":"下部大图","box":[4,76,102,88],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-08/I02.png","pixels":8975,"mask":"/layout-reference/ref-08/I02-mask.png"}],"ocr":[{"box":[0.04129793275112562,0.01926782282729944,0.8938053097345132,0.06165703275529866],"confidence":0.5,"text":"BULUBLUE"},{"box":[0.04129793395280237,0.07899807351316634,0.9115044247787611,0.08863198458574184],"confidence":0.5,"text":"蓝羽毛设计"}],"verification":{"pixelIdentical":true,"pixels":19549,"unreadableText":0}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,135 +0,0 @@
|
||||
{
|
||||
"id": "ref-08",
|
||||
"name": "双层满宽图与字距横栏",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
376,
|
||||
227,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 2,
|
||||
"column": 4
|
||||
},
|
||||
"width": 113,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-08/source.png",
|
||||
"annotated": "/layout-reference/ref-08/annotated.png",
|
||||
"background": "/layout-reference/ref-08/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "顶部英文刊头",
|
||||
"box": [
|
||||
0,
|
||||
0,
|
||||
111,
|
||||
14
|
||||
],
|
||||
"text": "BULUBLUE",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-08/T01.png",
|
||||
"pixels": 782,
|
||||
"underlay": "/layout-reference/ref-08/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "顶部中文刊头",
|
||||
"box": [
|
||||
0,
|
||||
14,
|
||||
111,
|
||||
16
|
||||
],
|
||||
"text": "蓝羽毛设计",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-08/T02.png",
|
||||
"pixels": 732,
|
||||
"underlay": "/layout-reference/ref-08/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "中央字距标签",
|
||||
"box": [
|
||||
3,
|
||||
68,
|
||||
107,
|
||||
8
|
||||
],
|
||||
"text": "DESIGNFOR2026",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-08/T03.png",
|
||||
"pixels": 360,
|
||||
"underlay": "/layout-reference/ref-08/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "中部横向图片",
|
||||
"box": [
|
||||
4,
|
||||
31,
|
||||
102,
|
||||
36
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-08/I01.png",
|
||||
"pixels": 3671,
|
||||
"mask": "/layout-reference/ref-08/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "下部大图",
|
||||
"box": [
|
||||
4,
|
||||
76,
|
||||
102,
|
||||
88
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-08/I02.png",
|
||||
"pixels": 8975,
|
||||
"mask": "/layout-reference/ref-08/I02-mask.png"
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.04129793275112562,
|
||||
0.01926782282729944,
|
||||
0.8938053097345132,
|
||||
0.06165703275529866
|
||||
],
|
||||
"confidence": 0.5,
|
||||
"text": "BULUBLUE"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.04129793395280237,
|
||||
0.07899807351316634,
|
||||
0.9115044247787611,
|
||||
0.08863198458574184
|
||||
],
|
||||
"confidence": 0.5,
|
||||
"text": "蓝羽毛设计"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19549,
|
||||
"unreadableText": 0
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-09 · 左侧分字标题与右侧长图</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-09 / 左侧分字标题与右侧长图</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-09/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-09/T01" data-kind="text" src="/layout-reference/ref-09/T01.png" alt="版" style="left:6.1946902654867255%;top:9.248554913294797%;width:16.8141592920354%;height:10.982658959537572%">
|
||||
<img data-component="ref-09/T02" data-kind="text" src="/layout-reference/ref-09/T02.png" alt="左侧小字组（未辨识原字形）" style="left:7.079646017699115%;top:21.38728323699422%;width:21.238938053097346%;height:13.872832369942195%">
|
||||
<img data-component="ref-09/T03" data-kind="text" src="/layout-reference/ref-09/T03.png" alt="式" style="left:7.079646017699115%;top:37.57225433526011%;width:15.04424778761062%;height:8.670520231213873%">
|
||||
<img data-component="ref-09/T04" data-kind="text" src="/layout-reference/ref-09/T04.png" alt="底部左侧竖字（未辨识原字形）" style="left:1.7699115044247788%;top:82.08092485549133%;width:13.274336283185843%;height:16.76300578034682%">
|
||||
<img data-component="ref-09/T05" data-kind="text" src="/layout-reference/ref-09/T05.png" alt="底部日期标识（未辨识原字形）" style="left:35.39823008849557%;top:78.61271676300578%;width:53.09734513274337%;height:4.624277456647398%">
|
||||
<img data-component="ref-09/I01" data-kind="image" src="/layout-reference/ref-09/I01.png" alt="" style="left:33.6283185840708%;top:8.092485549132949%;width:57.52212389380531%;height:63.005780346820806%">
|
||||
<img data-component="ref-09/D01" data-kind="decoration" src="/layout-reference/ref-09/D01.png" alt="" style="left:35.39823008849557%;top:83.23699421965318%;width:48.67256637168141%;height:4.046242774566474%">
|
||||
<img data-component="ref-09/D02" data-kind="decoration" src="/layout-reference/ref-09/D02.png" alt="" style="left:36.283185840707965%;top:90.7514450867052%;width:53.98230088495575%;height:3.4682080924855487%">
|
||||
<img class="overlay" src="/layout-reference/ref-09/annotated.png" alt="构件标注"></div><p class="muted">原图第 2 行、第 5 列；113×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 左上大字</td><td>版</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 左侧小字组</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 左中大字</td><td>式</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 底部左侧竖字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 底部日期标识</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 右侧竖长图片</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 底部上横线组</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 底部双线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-09/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-09/source.png">原裁片</a> · <a href="/layout-reference/ref-09/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-09","name":"左侧分字标题与右侧长图","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[497,227,113,173],"row":2,"column":5},"width":113,"height":173,"reference":"/layout-reference/ref-09/source.png","annotated":"/layout-reference/ref-09/annotated.png","background":"/layout-reference/ref-09/background.png","elements":[{"id":"T01","kind":"text","role":"左上大字","box":[7,16,19,19],"text":"版","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-09/T01.png","pixels":195,"underlay":"/layout-reference/ref-09/T01-underlay.png"},{"id":"T02","kind":"text","role":"左侧小字组","box":[8,37,24,24],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-09/T02.png","pixels":162,"underlay":"/layout-reference/ref-09/T02-underlay.png"},{"id":"T03","kind":"text","role":"左中大字","box":[8,65,17,15],"text":"式","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-09/T03.png","pixels":93,"underlay":"/layout-reference/ref-09/T03-underlay.png"},{"id":"T04","kind":"text","role":"底部左侧竖字","box":[2,142,15,29],"text":null,"direction":"vertical","reading":"unreadable","asset":"/layout-reference/ref-09/T04.png","pixels":150,"underlay":"/layout-reference/ref-09/T04-underlay.png"},{"id":"T05","kind":"text","role":"底部日期标识","box":[40,136,60,8],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-09/T05.png","pixels":186,"underlay":"/layout-reference/ref-09/T05-underlay.png"},{"id":"I01","kind":"image","role":"右侧竖长图片","box":[38,14,65,109],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-09/I01.png","pixels":6978,"mask":"/layout-reference/ref-09/I01-mask.png"},{"id":"D01","kind":"decoration","role":"底部上横线组","box":[40,144,55,7],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-09/D01.png","pixels":318},{"id":"D02","kind":"decoration","role":"底部双线","box":[41,157,61,6],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-09/D02.png","pixels":305}],"ocr":[],"verification":{"pixelIdentical":true,"pixels":19549,"unreadableText":3}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,163 +0,0 @@
|
||||
{
|
||||
"id": "ref-09",
|
||||
"name": "左侧分字标题与右侧长图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
497,
|
||||
227,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 2,
|
||||
"column": 5
|
||||
},
|
||||
"width": 113,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-09/source.png",
|
||||
"annotated": "/layout-reference/ref-09/annotated.png",
|
||||
"background": "/layout-reference/ref-09/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "左上大字",
|
||||
"box": [
|
||||
7,
|
||||
16,
|
||||
19,
|
||||
19
|
||||
],
|
||||
"text": "版",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-09/T01.png",
|
||||
"pixels": 195,
|
||||
"underlay": "/layout-reference/ref-09/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "左侧小字组",
|
||||
"box": [
|
||||
8,
|
||||
37,
|
||||
24,
|
||||
24
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-09/T02.png",
|
||||
"pixels": 162,
|
||||
"underlay": "/layout-reference/ref-09/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "左中大字",
|
||||
"box": [
|
||||
8,
|
||||
65,
|
||||
17,
|
||||
15
|
||||
],
|
||||
"text": "式",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-09/T03.png",
|
||||
"pixels": 93,
|
||||
"underlay": "/layout-reference/ref-09/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "底部左侧竖字",
|
||||
"box": [
|
||||
2,
|
||||
142,
|
||||
15,
|
||||
29
|
||||
],
|
||||
"text": null,
|
||||
"direction": "vertical",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-09/T04.png",
|
||||
"pixels": 150,
|
||||
"underlay": "/layout-reference/ref-09/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "底部日期标识",
|
||||
"box": [
|
||||
40,
|
||||
136,
|
||||
60,
|
||||
8
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-09/T05.png",
|
||||
"pixels": 186,
|
||||
"underlay": "/layout-reference/ref-09/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "右侧竖长图片",
|
||||
"box": [
|
||||
38,
|
||||
14,
|
||||
65,
|
||||
109
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-09/I01.png",
|
||||
"pixels": 6978,
|
||||
"mask": "/layout-reference/ref-09/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "底部上横线组",
|
||||
"box": [
|
||||
40,
|
||||
144,
|
||||
55,
|
||||
7
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-09/D01.png",
|
||||
"pixels": 318
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "底部双线",
|
||||
"box": [
|
||||
41,
|
||||
157,
|
||||
61,
|
||||
6
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-09/D02.png",
|
||||
"pixels": 305
|
||||
}
|
||||
],
|
||||
"ocr": [],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19549,
|
||||
"unreadableText": 3
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-10 · 半页深底与裁切英文 blue</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-10 / 半页深底与裁切英文 blue</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-10/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-10/T01" data-kind="text" src="/layout-reference/ref-10/T01.png" alt="blue" style="left:0%;top:28.32369942196532%;width:75.22123893805309%;height:18.497109826589593%">
|
||||
<img data-component="ref-10/T02" data-kind="text" src="/layout-reference/ref-10/T02.png" alt="英文上方小标签（未辨识原字形）" style="left:8.849557522123893%;top:26.589595375722542%;width:64.60176991150442%;height:1.7341040462427744%">
|
||||
<img data-component="ref-10/T03" data-kind="text" src="/layout-reference/ref-10/T03.png" alt="深底居中说明（未辨识原字形）" style="left:22.123893805309734%;top:83.23699421965318%;width:53.98230088495575%;height:8.092485549132949%">
|
||||
<img data-component="ref-10/I01" data-kind="image" src="/layout-reference/ref-10/I01.png" alt="" style="left:0.8849557522123894%;top:46.82080924855491%;width:97.34513274336283%;height:52.601156069364166%">
|
||||
<img data-component="ref-10/D01" data-kind="decoration" src="/layout-reference/ref-10/D01.png" alt="" style="left:0%;top:2.312138728323699%;width:8.849557522123893%;height:2.8901734104046244%">
|
||||
<img data-component="ref-10/D02" data-kind="decoration" src="/layout-reference/ref-10/D02.png" alt="" style="left:91.1504424778761%;top:2.312138728323699%;width:8.849557522123893%;height:2.8901734104046244%">
|
||||
<img class="overlay" src="/layout-reference/ref-10/annotated.png" alt="构件标注"></div><p class="muted">原图第 2 行、第 6 列；113×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 裁切英文标题</td><td>blue</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 英文上方小标签</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 深底居中说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 下半页深色图片区</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 左上角标</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 右上角标</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-10/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-10/source.png">原裁片</a> · <a href="/layout-reference/ref-10/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-10","name":"半页深底与裁切英文 blue","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[616,227,113,173],"row":2,"column":6},"width":113,"height":173,"reference":"/layout-reference/ref-10/source.png","annotated":"/layout-reference/ref-10/annotated.png","background":"/layout-reference/ref-10/background.png","elements":[{"id":"T01","kind":"text","role":"裁切英文标题","box":[0,49,85,32],"text":"blue","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-10/T01.png","pixels":1504,"underlay":"/layout-reference/ref-10/T01-underlay.png"},{"id":"T02","kind":"text","role":"英文上方小标签","box":[10,46,73,3],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-10/T02.png","pixels":105,"underlay":"/layout-reference/ref-10/T02-underlay.png"},{"id":"T03","kind":"text","role":"深底居中说明","box":[25,144,61,14],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-10/T03.png","pixels":398,"underlay":"/layout-reference/ref-10/T03-underlay.png"},{"id":"I01","kind":"image","role":"下半页深色图片区","box":[1,81,110,91],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-10/I01.png","pixels":9284,"mask":"/layout-reference/ref-10/I01-mask.png"},{"id":"D01","kind":"decoration","role":"左上角标","box":[0,4,10,5],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-10/D01.png","pixels":21},{"id":"D02","kind":"decoration","role":"右上角标","box":[103,4,10,5],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-10/D02.png","pixels":23}],"ocr":[{"box":[1.2867459860650037e-9,0.32755298650587994,0.7463126843657818,0.1502890173410405],"confidence":0.30000001192092896,"text":"DUE"}],"verification":{"pixelIdentical":true,"pixels":19549,"unreadableText":2}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,140 +0,0 @@
|
||||
{
|
||||
"id": "ref-10",
|
||||
"name": "半页深底与裁切英文 blue",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
616,
|
||||
227,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 2,
|
||||
"column": 6
|
||||
},
|
||||
"width": 113,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-10/source.png",
|
||||
"annotated": "/layout-reference/ref-10/annotated.png",
|
||||
"background": "/layout-reference/ref-10/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "裁切英文标题",
|
||||
"box": [
|
||||
0,
|
||||
49,
|
||||
85,
|
||||
32
|
||||
],
|
||||
"text": "blue",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-10/T01.png",
|
||||
"pixels": 1504,
|
||||
"underlay": "/layout-reference/ref-10/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "英文上方小标签",
|
||||
"box": [
|
||||
10,
|
||||
46,
|
||||
73,
|
||||
3
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-10/T02.png",
|
||||
"pixels": 105,
|
||||
"underlay": "/layout-reference/ref-10/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "深底居中说明",
|
||||
"box": [
|
||||
25,
|
||||
144,
|
||||
61,
|
||||
14
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-10/T03.png",
|
||||
"pixels": 398,
|
||||
"underlay": "/layout-reference/ref-10/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "下半页深色图片区",
|
||||
"box": [
|
||||
1,
|
||||
81,
|
||||
110,
|
||||
91
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-10/I01.png",
|
||||
"pixels": 9284,
|
||||
"mask": "/layout-reference/ref-10/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "左上角标",
|
||||
"box": [
|
||||
0,
|
||||
4,
|
||||
10,
|
||||
5
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-10/D01.png",
|
||||
"pixels": 21
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "右上角标",
|
||||
"box": [
|
||||
103,
|
||||
4,
|
||||
10,
|
||||
5
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-10/D02.png",
|
||||
"pixels": 23
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
1.2867459860650037e-9,
|
||||
0.32755298650587994,
|
||||
0.7463126843657818,
|
||||
0.1502890173410405
|
||||
],
|
||||
"confidence": 0.30000001192092896,
|
||||
"text": "DUE"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19549,
|
||||
"unreadableText": 2
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-11 · 左上双行标题与右下主图</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:114/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-11 / 左上双行标题与右下主图</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-11/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-11/T01" data-kind="text" src="/layout-reference/ref-11/T01.png" alt="蓝羽毛" style="left:0%;top:2.312138728323699%;width:47.368421052631575%;height:12.716763005780345%">
|
||||
<img data-component="ref-11/T02" data-kind="text" src="/layout-reference/ref-11/T02.png" alt="版式灵感" style="left:0%;top:15.606936416184972%;width:63.1578947368421%;height:13.294797687861271%">
|
||||
<img data-component="ref-11/T03" data-kind="text" src="/layout-reference/ref-11/T03.png" alt="右上小标签（未辨识原字形）" style="left:73.68421052631578%;top:1.1560693641618496%;width:4.385964912280701%;height:3.4682080924855487%">
|
||||
<img data-component="ref-11/T04" data-kind="text" src="/layout-reference/ref-11/T04.png" alt="右上信息组（未辨识原字形）" style="left:71.05263157894737%;top:11.560693641618498%;width:20.175438596491226%;height:9.826589595375722%">
|
||||
<img data-component="ref-11/T05" data-kind="text" src="/layout-reference/ref-11/T05.png" alt="右中短标识（未辨识原字形）" style="left:71.9298245614035%;top:31.79190751445087%;width:20.175438596491226%;height:4.046242774566474%">
|
||||
<img data-component="ref-11/T06" data-kind="text" src="/layout-reference/ref-11/T06.png" alt="左下脚注（未辨识原字形）" style="left:0%;top:91.32947976878613%;width:28.07017543859649%;height:5.202312138728324%">
|
||||
<img data-component="ref-11/I01" data-kind="image" src="/layout-reference/ref-11/I01.png" alt="" style="left:41.228070175438596%;top:39.30635838150289%;width:52.63157894736842%;height:54.33526011560693%">
|
||||
<img data-component="ref-11/D01" data-kind="decoration" src="/layout-reference/ref-11/D01.png" alt="" style="left:13.157894736842104%;top:52.601156069364166%;width:20.175438596491226%;height:10.982658959537572%">
|
||||
<img class="overlay" src="/layout-reference/ref-11/annotated.png" alt="构件标注"></div><p class="muted">原图第 3 行、第 2 列；114×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 第一行标题</td><td>蓝羽毛</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 第二行标题</td><td>版式灵感</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 右上小标签</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 右上信息组</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 右中短标识</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T06"><td>T06</td><td>文字 / 左下脚注</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 右下主图</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 左中横线组</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-11/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-11/source.png">原裁片</a> · <a href="/layout-reference/ref-11/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-11","name":"左上双行标题与右下主图","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[135,410,114,173],"row":3,"column":2},"width":114,"height":173,"reference":"/layout-reference/ref-11/source.png","annotated":"/layout-reference/ref-11/annotated.png","background":"/layout-reference/ref-11/background.png","elements":[{"id":"T01","kind":"text","role":"第一行标题","box":[0,4,54,22],"text":"蓝羽毛","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-11/T01.png","pixels":643,"underlay":"/layout-reference/ref-11/T01-underlay.png"},{"id":"T02","kind":"text","role":"第二行标题","box":[0,27,72,23],"text":"版式灵感","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-11/T02.png","pixels":884,"underlay":"/layout-reference/ref-11/T02-underlay.png"},{"id":"T03","kind":"text","role":"右上小标签","box":[84,2,5,6],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-11/T03.png","pixels":23,"underlay":"/layout-reference/ref-11/T03-underlay.png"},{"id":"T04","kind":"text","role":"右上信息组","box":[81,20,23,17],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-11/T04.png","pixels":145,"underlay":"/layout-reference/ref-11/T04-underlay.png"},{"id":"T05","kind":"text","role":"右中短标识","box":[82,55,23,7],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-11/T05.png","pixels":38,"underlay":"/layout-reference/ref-11/T05-underlay.png"},{"id":"T06","kind":"text","role":"左下脚注","box":[0,158,32,9],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-11/T06.png","pixels":112,"underlay":"/layout-reference/ref-11/T06-underlay.png"},{"id":"I01","kind":"image","role":"右下主图","box":[47,68,60,94],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-11/I01.png","pixels":5640,"mask":"/layout-reference/ref-11/I01-mask.png"},{"id":"D01","kind":"decoration","role":"左中横线组","box":[15,91,23,19],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-11/D01.png","pixels":373}],"ocr":[{"box":[0.0029239778265106767,0.04431599267822739,0.4766081871345029,0.11560693641618491],"confidence":1,"text":"蓝羽毛"},{"box":[0.026110667628392013,0.17872041532632799,0.6085973817702622,0.11654760842148737],"confidence":1,"text":"版式灵感"}],"verification":{"pixelIdentical":true,"pixels":19722,"unreadableText":4}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,185 +0,0 @@
|
||||
{
|
||||
"id": "ref-11",
|
||||
"name": "左上双行标题与右下主图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
135,
|
||||
410,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 3,
|
||||
"column": 2
|
||||
},
|
||||
"width": 114,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-11/source.png",
|
||||
"annotated": "/layout-reference/ref-11/annotated.png",
|
||||
"background": "/layout-reference/ref-11/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "第一行标题",
|
||||
"box": [
|
||||
0,
|
||||
4,
|
||||
54,
|
||||
22
|
||||
],
|
||||
"text": "蓝羽毛",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-11/T01.png",
|
||||
"pixels": 643,
|
||||
"underlay": "/layout-reference/ref-11/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "第二行标题",
|
||||
"box": [
|
||||
0,
|
||||
27,
|
||||
72,
|
||||
23
|
||||
],
|
||||
"text": "版式灵感",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-11/T02.png",
|
||||
"pixels": 884,
|
||||
"underlay": "/layout-reference/ref-11/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "右上小标签",
|
||||
"box": [
|
||||
84,
|
||||
2,
|
||||
5,
|
||||
6
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-11/T03.png",
|
||||
"pixels": 23,
|
||||
"underlay": "/layout-reference/ref-11/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "右上信息组",
|
||||
"box": [
|
||||
81,
|
||||
20,
|
||||
23,
|
||||
17
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-11/T04.png",
|
||||
"pixels": 145,
|
||||
"underlay": "/layout-reference/ref-11/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "右中短标识",
|
||||
"box": [
|
||||
82,
|
||||
55,
|
||||
23,
|
||||
7
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-11/T05.png",
|
||||
"pixels": 38,
|
||||
"underlay": "/layout-reference/ref-11/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T06",
|
||||
"kind": "text",
|
||||
"role": "左下脚注",
|
||||
"box": [
|
||||
0,
|
||||
158,
|
||||
32,
|
||||
9
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-11/T06.png",
|
||||
"pixels": 112,
|
||||
"underlay": "/layout-reference/ref-11/T06-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "右下主图",
|
||||
"box": [
|
||||
47,
|
||||
68,
|
||||
60,
|
||||
94
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-11/I01.png",
|
||||
"pixels": 5640,
|
||||
"mask": "/layout-reference/ref-11/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "左中横线组",
|
||||
"box": [
|
||||
15,
|
||||
91,
|
||||
23,
|
||||
19
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-11/D01.png",
|
||||
"pixels": 373
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.0029239778265106767,
|
||||
0.04431599267822739,
|
||||
0.4766081871345029,
|
||||
0.11560693641618491
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "蓝羽毛"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.026110667628392013,
|
||||
0.17872041532632799,
|
||||
0.6085973817702622,
|
||||
0.11654760842148737
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "版式灵感"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19722,
|
||||
"unreadableText": 4
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-12 · 三图模块与左侧分散字框</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:112/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-12 / 三图模块与左侧分散字框</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-12/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-12/D01" data-kind="decoration" src="/layout-reference/ref-12/D01.png" alt="" style="left:0%;top:84.39306358381504%;width:27.67857142857143%;height:1.1560693641618496%">
|
||||
<img data-component="ref-12/T01" data-kind="text" src="/layout-reference/ref-12/T01.png" alt="版" style="left:0%;top:0%;width:28.57142857142857%;height:22.54335260115607%">
|
||||
<img data-component="ref-12/T02" data-kind="text" src="/layout-reference/ref-12/T02.png" alt="蓝羽毛の设计" style="left:5.357142857142857%;top:30.63583815028902%;width:11.607142857142858%;height:38.15028901734104%">
|
||||
<img data-component="ref-12/T03" data-kind="text" src="/layout-reference/ref-12/T03.png" alt="式" style="left:0%;top:79.76878612716763%;width:28.57142857142857%;height:19.07514450867052%">
|
||||
<img data-component="ref-12/T04" data-kind="text" src="/layout-reference/ref-12/T04.png" alt="分格图注（未辨识原字形）" style="left:21.428571428571427%;top:76.30057803468208%;width:77.67857142857143%;height:2.8901734104046244%">
|
||||
<img data-component="ref-12/T05" data-kind="text" src="/layout-reference/ref-12/T05.png" alt="底部说明（未辨识原字形）" style="left:31.25%;top:90.7514450867052%;width:67.85714285714286%;height:7.514450867052023%">
|
||||
<img data-component="ref-12/I01" data-kind="image" src="/layout-reference/ref-12/I01.png" alt="" style="left:21.428571428571427%;top:10.404624277456648%;width:75.89285714285714%;height:42.77456647398844%">
|
||||
<img data-component="ref-12/I02" data-kind="image" src="/layout-reference/ref-12/I02.png" alt="" style="left:21.428571428571427%;top:54.33526011560693%;width:47.32142857142857%;height:21.38728323699422%">
|
||||
<img data-component="ref-12/I03" data-kind="image" src="/layout-reference/ref-12/I03.png" alt="" style="left:70.53571428571429%;top:54.33526011560693%;width:26.785714285714285%;height:21.38728323699422%">
|
||||
<img data-component="ref-12/D02" data-kind="decoration" src="/layout-reference/ref-12/D02.png" alt="" style="left:41.07142857142857%;top:3.4682080924855487%;width:48.214285714285715%;height:2.8901734104046244%">
|
||||
<img data-component="ref-12/D03" data-kind="decoration" src="/layout-reference/ref-12/D03.png" alt="" style="left:31.25%;top:81.5028901734104%;width:58.03571428571429%;height:8.670520231213873%">
|
||||
<img class="overlay" src="/layout-reference/ref-12/annotated.png" alt="构件标注"></div><p class="muted">原图第 3 行、第 3 列；112×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 左下水平分隔</td><td>—</td></tr><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 左上大字</td><td>版</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 左侧竖向副题</td><td>蓝羽毛の设计</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 左下大字</td><td>式</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 分格图注</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 底部说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 右上主图</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 下方左图片</td><td>—</td></tr><tr tabindex="0" data-key="I03"><td>I03</td><td>图片占位/色块 / 下方右图片</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 顶部短横线组</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 底部中横线组</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-12/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-12/source.png">原裁片</a> · <a href="/layout-reference/ref-12/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-12","name":"三图模块与左侧分散字框","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[256,409,112,173],"row":3,"column":3},"width":112,"height":173,"reference":"/layout-reference/ref-12/source.png","annotated":"/layout-reference/ref-12/annotated.png","background":"/layout-reference/ref-12/background.png","elements":[{"id":"D01","kind":"decoration","role":"左下水平分隔","box":[0,146,31,2],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-12/D01.png","pixels":61},{"id":"T01","kind":"text","role":"左上大字","box":[0,0,32,39],"text":"版","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-12/T01.png","pixels":580,"underlay":"/layout-reference/ref-12/T01-underlay.png"},{"id":"T02","kind":"text","role":"左侧竖向副题","box":[6,53,13,66],"text":"蓝羽毛の设计","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-12/T02.png","pixels":487,"underlay":"/layout-reference/ref-12/T02-underlay.png"},{"id":"T03","kind":"text","role":"左下大字","box":[0,138,32,33],"text":"式","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-12/T03.png","pixels":359,"underlay":"/layout-reference/ref-12/T03-underlay.png"},{"id":"T04","kind":"text","role":"分格图注","box":[24,132,87,5],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-12/T04.png","pixels":172,"underlay":"/layout-reference/ref-12/T04-underlay.png"},{"id":"T05","kind":"text","role":"底部说明","box":[35,157,76,13],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-12/T05.png","pixels":632,"underlay":"/layout-reference/ref-12/T05-underlay.png"},{"id":"I01","kind":"image","role":"右上主图","box":[24,18,85,74],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-12/I01.png","pixels":6212,"mask":"/layout-reference/ref-12/I01-mask.png"},{"id":"I02","kind":"image","role":"下方左图片","box":[24,94,53,37],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-12/I02.png","pixels":1961,"mask":"/layout-reference/ref-12/I02-mask.png"},{"id":"I03","kind":"image","role":"下方右图片","box":[79,94,30,37],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-12/I03.png","pixels":1110,"mask":"/layout-reference/ref-12/I03-mask.png"},{"id":"D02","kind":"decoration","role":"顶部短横线组","box":[46,6,54,5],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-12/D02.png","pixels":266},{"id":"D03","kind":"decoration","role":"底部中横线组","box":[35,141,65,15],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-12/D03.png","pixels":697}],"ocr":[{"box":[0.014880952149470902,-3.67515795574036e-10,0.2678571428571429,0.19845857418111745],"confidence":1,"text":"版"}],"verification":{"pixelIdentical":true,"pixels":19376,"unreadableText":2}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,224 +0,0 @@
|
||||
{
|
||||
"id": "ref-12",
|
||||
"name": "三图模块与左侧分散字框",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
256,
|
||||
409,
|
||||
112,
|
||||
173
|
||||
],
|
||||
"row": 3,
|
||||
"column": 3
|
||||
},
|
||||
"width": 112,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-12/source.png",
|
||||
"annotated": "/layout-reference/ref-12/annotated.png",
|
||||
"background": "/layout-reference/ref-12/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "左下水平分隔",
|
||||
"box": [
|
||||
0,
|
||||
146,
|
||||
31,
|
||||
2
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-12/D01.png",
|
||||
"pixels": 61
|
||||
},
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "左上大字",
|
||||
"box": [
|
||||
0,
|
||||
0,
|
||||
32,
|
||||
39
|
||||
],
|
||||
"text": "版",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-12/T01.png",
|
||||
"pixels": 580,
|
||||
"underlay": "/layout-reference/ref-12/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "左侧竖向副题",
|
||||
"box": [
|
||||
6,
|
||||
53,
|
||||
13,
|
||||
66
|
||||
],
|
||||
"text": "蓝羽毛の设计",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-12/T02.png",
|
||||
"pixels": 487,
|
||||
"underlay": "/layout-reference/ref-12/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "左下大字",
|
||||
"box": [
|
||||
0,
|
||||
138,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"text": "式",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-12/T03.png",
|
||||
"pixels": 359,
|
||||
"underlay": "/layout-reference/ref-12/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "分格图注",
|
||||
"box": [
|
||||
24,
|
||||
132,
|
||||
87,
|
||||
5
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-12/T04.png",
|
||||
"pixels": 172,
|
||||
"underlay": "/layout-reference/ref-12/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "底部说明",
|
||||
"box": [
|
||||
35,
|
||||
157,
|
||||
76,
|
||||
13
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-12/T05.png",
|
||||
"pixels": 632,
|
||||
"underlay": "/layout-reference/ref-12/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "右上主图",
|
||||
"box": [
|
||||
24,
|
||||
18,
|
||||
85,
|
||||
74
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-12/I01.png",
|
||||
"pixels": 6212,
|
||||
"mask": "/layout-reference/ref-12/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "下方左图片",
|
||||
"box": [
|
||||
24,
|
||||
94,
|
||||
53,
|
||||
37
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-12/I02.png",
|
||||
"pixels": 1961,
|
||||
"mask": "/layout-reference/ref-12/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I03",
|
||||
"kind": "image",
|
||||
"role": "下方右图片",
|
||||
"box": [
|
||||
79,
|
||||
94,
|
||||
30,
|
||||
37
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-12/I03.png",
|
||||
"pixels": 1110,
|
||||
"mask": "/layout-reference/ref-12/I03-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "顶部短横线组",
|
||||
"box": [
|
||||
46,
|
||||
6,
|
||||
54,
|
||||
5
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-12/D02.png",
|
||||
"pixels": 266
|
||||
},
|
||||
{
|
||||
"id": "D03",
|
||||
"kind": "decoration",
|
||||
"role": "底部中横线组",
|
||||
"box": [
|
||||
35,
|
||||
141,
|
||||
65,
|
||||
15
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-12/D03.png",
|
||||
"pixels": 697
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.014880952149470902,
|
||||
-3.67515795574036e-10,
|
||||
0.2678571428571429,
|
||||
0.19845857418111745
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "版"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19376,
|
||||
"unreadableText": 2
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-13 · 横题与右侧出血扁椭圆</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:114/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-13 / 横题与右侧出血扁椭圆</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-13/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-13/T01" data-kind="text" src="/layout-reference/ref-13/T01.png" alt="版式" style="left:7.017543859649122%;top:6.9364161849710975%;width:30.701754385964914%;height:9.248554913294797%">
|
||||
<img data-component="ref-13/T02" data-kind="text" src="/layout-reference/ref-13/T02.png" alt="灵感" style="left:61.40350877192983%;top:6.9364161849710975%;width:29.82456140350877%;height:9.248554913294797%">
|
||||
<img data-component="ref-13/T03" data-kind="text" src="/layout-reference/ref-13/T03.png" alt="标题中央微字（未辨识原字形）" style="left:42.10526315789473%;top:8.092485549132949%;width:14.035087719298245%;height:5.202312138728324%">
|
||||
<img data-component="ref-13/T04" data-kind="text" src="/layout-reference/ref-13/T04.png" alt="左下分行说明（未辨识原字形）" style="left:7.017543859649122%;top:57.80346820809249%;width:25.438596491228072%;height:27.74566473988439%">
|
||||
<img data-component="ref-13/T05" data-kind="text" src="/layout-reference/ref-13/T05.png" alt="底部信息（未辨识原字形）" style="left:3.508771929824561%;top:93.64161849710982%;width:90.35087719298247%;height:5.202312138728324%">
|
||||
<img data-component="ref-13/I01" data-kind="image" src="/layout-reference/ref-13/I01.png" alt="" style="left:7.017543859649122%;top:17.91907514450867%;width:90.35087719298247%;height:68.78612716763006%">
|
||||
<img class="overlay" src="/layout-reference/ref-13/annotated.png" alt="构件标注"></div><p class="muted">原图第 3 行、第 4 列；114×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 顶部左标题</td><td>版式</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 顶部右标题</td><td>灵感</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 标题中央微字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 左下分行说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 底部信息</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 右侧扁椭圆主图</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-13/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-13/source.png">原裁片</a> · <a href="/layout-reference/ref-13/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-13","name":"横题与右侧出血扁椭圆","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[376,410,114,173],"row":3,"column":4},"width":114,"height":173,"reference":"/layout-reference/ref-13/source.png","annotated":"/layout-reference/ref-13/annotated.png","background":"/layout-reference/ref-13/background.png","elements":[{"id":"T01","kind":"text","role":"顶部左标题","box":[8,12,35,16],"text":"版式","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-13/T01.png","pixels":316,"underlay":"/layout-reference/ref-13/T01-underlay.png"},{"id":"T02","kind":"text","role":"顶部右标题","box":[70,12,34,16],"text":"灵感","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-13/T02.png","pixels":343,"underlay":"/layout-reference/ref-13/T02-underlay.png"},{"id":"T03","kind":"text","role":"标题中央微字","box":[48,14,16,9],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-13/T03.png","pixels":62,"underlay":"/layout-reference/ref-13/T03-underlay.png"},{"id":"T04","kind":"text","role":"左下分行说明","box":[8,100,29,48],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-13/T04.png","pixels":646,"underlay":"/layout-reference/ref-13/T04-underlay.png"},{"id":"T05","kind":"text","role":"底部信息","box":[4,162,103,9],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-13/T05.png","pixels":248,"underlay":"/layout-reference/ref-13/T05-underlay.png"},{"id":"I01","kind":"image","role":"右侧扁椭圆主图","box":[8,31,103,119],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-13/I01.png","pixels":8615,"mask":"/layout-reference/ref-13/I01-mask.png"}],"ocr":[{"box":[0.07309941752558477,0.06743737990125243,0.8421052631578948,0.10404624277456653],"confidence":0.30000001192092896,"text":"版式=灵感"}],"verification":{"pixelIdentical":true,"pixels":19722,"unreadableText":3}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,142 +0,0 @@
|
||||
{
|
||||
"id": "ref-13",
|
||||
"name": "横题与右侧出血扁椭圆",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
376,
|
||||
410,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 3,
|
||||
"column": 4
|
||||
},
|
||||
"width": 114,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-13/source.png",
|
||||
"annotated": "/layout-reference/ref-13/annotated.png",
|
||||
"background": "/layout-reference/ref-13/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "顶部左标题",
|
||||
"box": [
|
||||
8,
|
||||
12,
|
||||
35,
|
||||
16
|
||||
],
|
||||
"text": "版式",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-13/T01.png",
|
||||
"pixels": 316,
|
||||
"underlay": "/layout-reference/ref-13/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "顶部右标题",
|
||||
"box": [
|
||||
70,
|
||||
12,
|
||||
34,
|
||||
16
|
||||
],
|
||||
"text": "灵感",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-13/T02.png",
|
||||
"pixels": 343,
|
||||
"underlay": "/layout-reference/ref-13/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "标题中央微字",
|
||||
"box": [
|
||||
48,
|
||||
14,
|
||||
16,
|
||||
9
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-13/T03.png",
|
||||
"pixels": 62,
|
||||
"underlay": "/layout-reference/ref-13/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "左下分行说明",
|
||||
"box": [
|
||||
8,
|
||||
100,
|
||||
29,
|
||||
48
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-13/T04.png",
|
||||
"pixels": 646,
|
||||
"underlay": "/layout-reference/ref-13/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "底部信息",
|
||||
"box": [
|
||||
4,
|
||||
162,
|
||||
103,
|
||||
9
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-13/T05.png",
|
||||
"pixels": 248,
|
||||
"underlay": "/layout-reference/ref-13/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "右侧扁椭圆主图",
|
||||
"box": [
|
||||
8,
|
||||
31,
|
||||
103,
|
||||
119
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-13/I01.png",
|
||||
"pixels": 8615,
|
||||
"mask": "/layout-reference/ref-13/I01-mask.png"
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.07309941752558477,
|
||||
0.06743737990125243,
|
||||
0.8421052631578948,
|
||||
0.10404624277456653
|
||||
],
|
||||
"confidence": 0.30000001192092896,
|
||||
"text": "版式=灵感"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19722,
|
||||
"unreadableText": 3
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-14 · 大矩形与小方图及居中横题</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/174;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-14 / 大矩形与小方图及居中横题</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-14/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-14/T01" data-kind="text" src="/layout-reference/ref-14/T01.png" alt="蓝羽毛 版式灵感设计分享" style="left:7.964601769911504%;top:44.252873563218394%;width:80.53097345132744%;height:6.321839080459771%">
|
||||
<img data-component="ref-14/T02" data-kind="text" src="/layout-reference/ref-14/T02.png" alt="中部辅助标签（未辨识原字形）" style="left:9.734513274336283%;top:53.44827586206896%;width:35.39823008849557%;height:3.4482758620689653%">
|
||||
<img data-component="ref-14/T03" data-kind="text" src="/layout-reference/ref-14/T03.png" alt="底部两处标识（未辨识原字形）" style="left:7.964601769911504%;top:84.48275862068965%;width:70.79646017699115%;height:4.022988505747127%">
|
||||
<img data-component="ref-14/I01" data-kind="image" src="/layout-reference/ref-14/I01.png" alt="" style="left:7.964601769911504%;top:6.321839080459771%;width:60.17699115044248%;height:37.93103448275862%">
|
||||
<img data-component="ref-14/I02" data-kind="image" src="/layout-reference/ref-14/I02.png" alt="" style="left:50.442477876106196%;top:54.02298850574713%;width:38.93805309734513%;height:21.839080459770116%">
|
||||
<img data-component="ref-14/D01" data-kind="decoration" src="/layout-reference/ref-14/D01.png" alt="" style="left:71.68141592920354%;top:6.321839080459771%;width:18.58407079646018%;height:6.896551724137931%">
|
||||
<img class="overlay" src="/layout-reference/ref-14/annotated.png" alt="构件标注"></div><p class="muted">原图第 3 行、第 5 列；113×174 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 中部横向主标题</td><td>蓝羽毛 版式灵感设计分享</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 中部辅助标签</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 底部两处标识</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 左上主图</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 右下小图</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 右上细线阶梯</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-14/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-14/source.png">原裁片</a> · <a href="/layout-reference/ref-14/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-14","name":"大矩形与小方图及居中横题","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[497,409,113,174],"row":3,"column":5},"width":113,"height":174,"reference":"/layout-reference/ref-14/source.png","annotated":"/layout-reference/ref-14/annotated.png","background":"/layout-reference/ref-14/background.png","elements":[{"id":"T01","kind":"text","role":"中部横向主标题","box":[9,77,91,11],"text":"蓝羽毛 版式灵感设计分享","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-14/T01.png","pixels":495,"underlay":"/layout-reference/ref-14/T01-underlay.png"},{"id":"T02","kind":"text","role":"中部辅助标签","box":[11,93,40,6],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-14/T02.png","pixels":147,"underlay":"/layout-reference/ref-14/T02-underlay.png"},{"id":"T03","kind":"text","role":"底部两处标识","box":[9,147,80,7],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-14/T03.png","pixels":178,"underlay":"/layout-reference/ref-14/T03-underlay.png"},{"id":"I01","kind":"image","role":"左上主图","box":[9,11,68,66],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-14/I01.png","pixels":4421,"mask":"/layout-reference/ref-14/I01-mask.png"},{"id":"I02","kind":"image","role":"右下小图","box":[57,94,44,38],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-14/I02.png","pixels":1672,"mask":"/layout-reference/ref-14/I02-mask.png"},{"id":"D01","kind":"decoration","role":"右上细线阶梯","box":[81,11,21,12],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-14/D01.png","pixels":217}],"ocr":[{"box":[0.07374630927974439,0.45785440622605367,0.817109144542773,0.04980842911877392],"confidence":0.30000001192092896,"text":"置羽毛 版式煲感设计分享"}],"verification":{"pixelIdentical":true,"pixels":19662,"unreadableText":2}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,141 +0,0 @@
|
||||
{
|
||||
"id": "ref-14",
|
||||
"name": "大矩形与小方图及居中横题",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
497,
|
||||
409,
|
||||
113,
|
||||
174
|
||||
],
|
||||
"row": 3,
|
||||
"column": 5
|
||||
},
|
||||
"width": 113,
|
||||
"height": 174,
|
||||
"reference": "/layout-reference/ref-14/source.png",
|
||||
"annotated": "/layout-reference/ref-14/annotated.png",
|
||||
"background": "/layout-reference/ref-14/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "中部横向主标题",
|
||||
"box": [
|
||||
9,
|
||||
77,
|
||||
91,
|
||||
11
|
||||
],
|
||||
"text": "蓝羽毛 版式灵感设计分享",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-14/T01.png",
|
||||
"pixels": 495,
|
||||
"underlay": "/layout-reference/ref-14/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "中部辅助标签",
|
||||
"box": [
|
||||
11,
|
||||
93,
|
||||
40,
|
||||
6
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-14/T02.png",
|
||||
"pixels": 147,
|
||||
"underlay": "/layout-reference/ref-14/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "底部两处标识",
|
||||
"box": [
|
||||
9,
|
||||
147,
|
||||
80,
|
||||
7
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-14/T03.png",
|
||||
"pixels": 178,
|
||||
"underlay": "/layout-reference/ref-14/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "左上主图",
|
||||
"box": [
|
||||
9,
|
||||
11,
|
||||
68,
|
||||
66
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-14/I01.png",
|
||||
"pixels": 4421,
|
||||
"mask": "/layout-reference/ref-14/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "右下小图",
|
||||
"box": [
|
||||
57,
|
||||
94,
|
||||
44,
|
||||
38
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-14/I02.png",
|
||||
"pixels": 1672,
|
||||
"mask": "/layout-reference/ref-14/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "右上细线阶梯",
|
||||
"box": [
|
||||
81,
|
||||
11,
|
||||
21,
|
||||
12
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-14/D01.png",
|
||||
"pixels": 217
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.07374630927974439,
|
||||
0.45785440622605367,
|
||||
0.817109144542773,
|
||||
0.04980842911877392
|
||||
],
|
||||
"confidence": 0.30000001192092896,
|
||||
"text": "置羽毛 版式煲感设计分享"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19662,
|
||||
"unreadableText": 2
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-15 · 英文双行刊头与四分之一圆图</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:112/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-15 / 英文双行刊头与四分之一圆图</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-15/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-15/T01" data-kind="text" src="/layout-reference/ref-15/T01.png" alt="bulublue" style="left:5.357142857142857%;top:2.8901734104046244%;width:66.96428571428571%;height:10.982658959537572%">
|
||||
<img data-component="ref-15/T02" data-kind="text" src="/layout-reference/ref-15/T02.png" alt="design" style="left:5.357142857142857%;top:14.450867052023122%;width:53.57142857142857%;height:10.404624277456648%">
|
||||
<img data-component="ref-15/T03" data-kind="text" src="/layout-reference/ref-15/T03.png" alt="右上说明（未辨识原字形）" style="left:73.21428571428571%;top:2.312138728323699%;width:23.214285714285715%;height:10.982658959537572%">
|
||||
<img data-component="ref-15/T04" data-kind="text" src="/layout-reference/ref-15/T04.png" alt="BULUBLUE DESIGN" style="left:0.8928571428571428%;top:94.79768786127167%;width:97.32142857142857%;height:4.624277456647398%">
|
||||
<img data-component="ref-15/I01" data-kind="image" src="/layout-reference/ref-15/I01.png" alt="" style="left:2.6785714285714284%;top:15.028901734104046%;width:92.85714285714286%;height:47.398843930635834%">
|
||||
<img data-component="ref-15/I02" data-kind="image" src="/layout-reference/ref-15/I02.png" alt="" style="left:2.6785714285714284%;top:62.42774566473989%;width:58.03571428571429%;height:30.057803468208093%">
|
||||
<img data-component="ref-15/I03" data-kind="image" src="/layout-reference/ref-15/I03.png" alt="" style="left:62.5%;top:62.42774566473989%;width:32.142857142857146%;height:29.47976878612717%">
|
||||
<img class="overlay" src="/layout-reference/ref-15/annotated.png" alt="构件标注"></div><p class="muted">原图第 3 行、第 6 列；112×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 英文第一行</td><td>bulublue</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 英文第二行</td><td>design</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 右上说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 底部品牌与角标</td><td>BULUBLUE DESIGN</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 上部弧面主图</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 下方左图片</td><td>—</td></tr><tr tabindex="0" data-key="I03"><td>I03</td><td>图片占位/色块 / 下方右图片</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-15/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-15/source.png">原裁片</a> · <a href="/layout-reference/ref-15/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-15","name":"英文双行刊头与四分之一圆图","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[617,409,112,173],"row":3,"column":6},"width":112,"height":173,"reference":"/layout-reference/ref-15/source.png","annotated":"/layout-reference/ref-15/annotated.png","background":"/layout-reference/ref-15/background.png","elements":[{"id":"T01","kind":"text","role":"英文第一行","box":[6,5,75,19],"text":"bulublue","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-15/T01.png","pixels":477,"underlay":"/layout-reference/ref-15/T01-underlay.png"},{"id":"T02","kind":"text","role":"英文第二行","box":[6,25,60,18],"text":"design","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-15/T02.png","pixels":524,"underlay":"/layout-reference/ref-15/T02-underlay.png"},{"id":"T03","kind":"text","role":"右上说明","box":[82,4,26,19],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-15/T03.png","pixels":164,"underlay":"/layout-reference/ref-15/T03-underlay.png"},{"id":"T04","kind":"text","role":"底部品牌与角标","box":[1,164,109,8],"text":"BULUBLUE DESIGN","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-15/T04.png","pixels":354,"underlay":"/layout-reference/ref-15/T04-underlay.png"},{"id":"I01","kind":"image","role":"上部弧面主图","box":[3,26,104,82],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-15/I01.png","pixels":7070,"mask":"/layout-reference/ref-15/I01-mask.png"},{"id":"I02","kind":"image","role":"下方左图片","box":[3,108,65,52],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-15/I02.png","pixels":3337,"mask":"/layout-reference/ref-15/I02-mask.png"},{"id":"I03","kind":"image","role":"下方右图片","box":[70,108,36,51],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-15/I03.png","pixels":1836,"mask":"/layout-reference/ref-15/I03-mask.png"}],"ocr":[{"box":[0.04371143600401779,0.05444647915103584,0.6863866533551897,0.08956561520379858],"confidence":1,"text":"bulublue"},{"box":[0.04360773550246531,0.1459897803830712,0.5169511976696195,0.10108402377148817],"confidence":1,"text":"design"}],"verification":{"pixelIdentical":true,"pixels":19376,"unreadableText":1}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,169 +0,0 @@
|
||||
{
|
||||
"id": "ref-15",
|
||||
"name": "英文双行刊头与四分之一圆图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
617,
|
||||
409,
|
||||
112,
|
||||
173
|
||||
],
|
||||
"row": 3,
|
||||
"column": 6
|
||||
},
|
||||
"width": 112,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-15/source.png",
|
||||
"annotated": "/layout-reference/ref-15/annotated.png",
|
||||
"background": "/layout-reference/ref-15/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "英文第一行",
|
||||
"box": [
|
||||
6,
|
||||
5,
|
||||
75,
|
||||
19
|
||||
],
|
||||
"text": "bulublue",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-15/T01.png",
|
||||
"pixels": 477,
|
||||
"underlay": "/layout-reference/ref-15/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "英文第二行",
|
||||
"box": [
|
||||
6,
|
||||
25,
|
||||
60,
|
||||
18
|
||||
],
|
||||
"text": "design",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-15/T02.png",
|
||||
"pixels": 524,
|
||||
"underlay": "/layout-reference/ref-15/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "右上说明",
|
||||
"box": [
|
||||
82,
|
||||
4,
|
||||
26,
|
||||
19
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-15/T03.png",
|
||||
"pixels": 164,
|
||||
"underlay": "/layout-reference/ref-15/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "底部品牌与角标",
|
||||
"box": [
|
||||
1,
|
||||
164,
|
||||
109,
|
||||
8
|
||||
],
|
||||
"text": "BULUBLUE DESIGN",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-15/T04.png",
|
||||
"pixels": 354,
|
||||
"underlay": "/layout-reference/ref-15/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "上部弧面主图",
|
||||
"box": [
|
||||
3,
|
||||
26,
|
||||
104,
|
||||
82
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-15/I01.png",
|
||||
"pixels": 7070,
|
||||
"mask": "/layout-reference/ref-15/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "下方左图片",
|
||||
"box": [
|
||||
3,
|
||||
108,
|
||||
65,
|
||||
52
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-15/I02.png",
|
||||
"pixels": 3337,
|
||||
"mask": "/layout-reference/ref-15/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I03",
|
||||
"kind": "image",
|
||||
"role": "下方右图片",
|
||||
"box": [
|
||||
70,
|
||||
108,
|
||||
36,
|
||||
51
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-15/I03.png",
|
||||
"pixels": 1836,
|
||||
"mask": "/layout-reference/ref-15/I03-mask.png"
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.04371143600401779,
|
||||
0.05444647915103584,
|
||||
0.6863866533551897,
|
||||
0.08956561520379858
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "bulublue"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.04360773550246531,
|
||||
0.1459897803830712,
|
||||
0.5169511976696195,
|
||||
0.10108402377148817
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "design"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19376,
|
||||
"unreadableText": 1
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-16 · 上下灰阶色带与底部白区</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-16 / 上下灰阶色带与底部白区</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-16/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-16/T01" data-kind="text" src="/layout-reference/ref-16/T01.png" alt="高级版式" style="left:73.45132743362832%;top:8.092485549132949%;width:5.3097345132743365%;height:14.450867052023122%">
|
||||
<img data-component="ref-16/T02" data-kind="text" src="/layout-reference/ref-16/T02.png" alt="蓝羽毛版式" style="left:7.964601769911504%;top:68.78612716763006%;width:28.31858407079646%;height:1.7341040462427744%">
|
||||
<img data-component="ref-16/T03" data-kind="text" src="/layout-reference/ref-16/T03.png" alt="底部右说明（未辨识原字形）" style="left:45.13274336283185%;top:75.14450867052022%;width:39.823008849557525%;height:13.294797687861271%">
|
||||
<img data-component="ref-16/T04" data-kind="text" src="/layout-reference/ref-16/T04.png" alt="底部右脚注（未辨识原字形）" style="left:45.13274336283185%;top:89.59537572254335%;width:43.36283185840708%;height:2.8901734104046244%">
|
||||
<img data-component="ref-16/I01" data-kind="image" src="/layout-reference/ref-16/I01.png" alt="" style="left:0.8849557522123894%;top:0.5780346820809248%;width:96.46017699115043%;height:30.63583815028902%">
|
||||
<img data-component="ref-16/I02" data-kind="image" src="/layout-reference/ref-16/I02.png" alt="" style="left:0.8849557522123894%;top:31.213872832369944%;width:96.46017699115043%;height:30.63583815028902%">
|
||||
<img class="overlay" src="/layout-reference/ref-16/annotated.png" alt="构件标注"></div><p class="muted">原图第 4 行、第 1 列；113×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 右上竖字</td><td>高级版式</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 底部左标题</td><td>蓝羽毛版式</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 底部右说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 底部右脚注</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 上部浅色图片区</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 中部深色图片区</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-16/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-16/source.png">原裁片</a> · <a href="/layout-reference/ref-16/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-16","name":"上下灰阶色带与底部白区","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[15,592,113,173],"row":4,"column":1},"width":113,"height":173,"reference":"/layout-reference/ref-16/source.png","annotated":"/layout-reference/ref-16/annotated.png","background":"/layout-reference/ref-16/background.png","elements":[{"id":"T01","kind":"text","role":"右上竖字","box":[83,14,6,25],"text":"高级版式","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-16/T01.png","pixels":123,"underlay":"/layout-reference/ref-16/T01-underlay.png"},{"id":"T02","kind":"text","role":"底部左标题","box":[9,119,32,3],"text":"蓝羽毛版式","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-16/T02.png","pixels":71,"underlay":"/layout-reference/ref-16/T02-underlay.png"},{"id":"T03","kind":"text","role":"底部右说明","box":[51,130,45,23],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-16/T03.png","pixels":527,"underlay":"/layout-reference/ref-16/T03-underlay.png"},{"id":"T04","kind":"text","role":"底部右脚注","box":[51,155,49,5],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-16/T04.png","pixels":144,"underlay":"/layout-reference/ref-16/T04-underlay.png"},{"id":"I01","kind":"image","role":"上部浅色图片区","box":[1,1,109,53],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-16/I01.png","pixels":5654,"mask":"/layout-reference/ref-16/I01-mask.png"},{"id":"I02","kind":"image","role":"中部深色图片区","box":[1,54,109,53],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-16/I02.png","pixels":5777,"mask":"/layout-reference/ref-16/I02-mask.png"}],"ocr":[{"box":[0.08545858282579882,0.6702334819989704,0.2804102714786136,0.03718236140433073],"confidence":0.30000001192092896,"text":"經引毛飯式"}],"verification":{"pixelIdentical":true,"pixels":19549,"unreadableText":2}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,142 +0,0 @@
|
||||
{
|
||||
"id": "ref-16",
|
||||
"name": "上下灰阶色带与底部白区",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
15,
|
||||
592,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 4,
|
||||
"column": 1
|
||||
},
|
||||
"width": 113,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-16/source.png",
|
||||
"annotated": "/layout-reference/ref-16/annotated.png",
|
||||
"background": "/layout-reference/ref-16/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "右上竖字",
|
||||
"box": [
|
||||
83,
|
||||
14,
|
||||
6,
|
||||
25
|
||||
],
|
||||
"text": "高级版式",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-16/T01.png",
|
||||
"pixels": 123,
|
||||
"underlay": "/layout-reference/ref-16/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "底部左标题",
|
||||
"box": [
|
||||
9,
|
||||
119,
|
||||
32,
|
||||
3
|
||||
],
|
||||
"text": "蓝羽毛版式",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-16/T02.png",
|
||||
"pixels": 71,
|
||||
"underlay": "/layout-reference/ref-16/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "底部右说明",
|
||||
"box": [
|
||||
51,
|
||||
130,
|
||||
45,
|
||||
23
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-16/T03.png",
|
||||
"pixels": 527,
|
||||
"underlay": "/layout-reference/ref-16/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "底部右脚注",
|
||||
"box": [
|
||||
51,
|
||||
155,
|
||||
49,
|
||||
5
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-16/T04.png",
|
||||
"pixels": 144,
|
||||
"underlay": "/layout-reference/ref-16/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "上部浅色图片区",
|
||||
"box": [
|
||||
1,
|
||||
1,
|
||||
109,
|
||||
53
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-16/I01.png",
|
||||
"pixels": 5654,
|
||||
"mask": "/layout-reference/ref-16/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "中部深色图片区",
|
||||
"box": [
|
||||
1,
|
||||
54,
|
||||
109,
|
||||
53
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-16/I02.png",
|
||||
"pixels": 5777,
|
||||
"mask": "/layout-reference/ref-16/I02-mask.png"
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.08545858282579882,
|
||||
0.6702334819989704,
|
||||
0.2804102714786136,
|
||||
0.03718236140433073
|
||||
],
|
||||
"confidence": 0.30000001192092896,
|
||||
"text": "經引毛飯式"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19549,
|
||||
"unreadableText": 2
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-17 · 英文刊头与圆形叠标及窄栏</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/174;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-17 / 英文刊头与圆形叠标及窄栏</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-17/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-17/D01" data-kind="decoration" src="/layout-reference/ref-17/D01.png" alt="" style="left:72.56637168141593%;top:69.54022988505747%;width:25.663716814159294%;height:1.1494252873563218%">
|
||||
<img data-component="ref-17/T01" data-kind="text" src="/layout-reference/ref-17/T01.png" alt="Bulublue" style="left:5.3097345132743365%;top:5.747126436781609%;width:55.75221238938053%;height:5.747126436781609%">
|
||||
<img data-component="ref-17/T02" data-kind="text" src="/layout-reference/ref-17/T02.png" alt="Design" style="left:4.424778761061947%;top:11.494252873563218%;width:49.557522123893804%;height:9.195402298850574%">
|
||||
<img data-component="ref-17/T03" data-kind="text" src="/layout-reference/ref-17/T03.png" alt="高级感版式." style="left:45.13274336283185%;top:28.735632183908045%;width:53.09734513274337%;height:9.195402298850574%">
|
||||
<img data-component="ref-17/T04" data-kind="text" src="/layout-reference/ref-17/T04.png" alt="右侧窄栏正文（未辨识原字形）" style="left:72.56637168141593%;top:38.50574712643678%;width:25.663716814159294%;height:31.03448275862069%">
|
||||
<img data-component="ref-17/I01" data-kind="image" src="/layout-reference/ref-17/I01.png" alt="" style="left:4.424778761061947%;top:39.08045977011494%;width:64.60176991150442%;height:58.04597701149425%">
|
||||
<img data-component="ref-17/I02" data-kind="image" src="/layout-reference/ref-17/I02.png" alt="" style="left:4.424778761061947%;top:30.45977011494253%;width:19.469026548672566%;height:12.643678160919542%">
|
||||
<img data-component="ref-17/D02" data-kind="decoration" src="/layout-reference/ref-17/D02.png" alt="" style="left:53.98230088495575%;top:15.517241379310345%;width:44.24778761061947%;height:4.022988505747127%">
|
||||
<img data-component="ref-17/D03" data-kind="decoration" src="/layout-reference/ref-17/D03.png" alt="" style="left:51.32743362831859%;top:95.97701149425288%;width:47.78761061946903%;height:3.4482758620689653%">
|
||||
<img class="overlay" src="/layout-reference/ref-17/annotated.png" alt="构件标注"></div><p class="muted">原图第 4 行、第 2 列；113×174 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 右栏底线</td><td>—</td></tr><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 左上英文第一行</td><td>Bulublue</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 左上英文第二行</td><td>Design</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 中部中文横题</td><td>高级感版式.</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 右侧窄栏正文</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 左下主图</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 左中叠加圆形</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 刊头右侧双线</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 底部横向贴条</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-17/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-17/source.png">原裁片</a> · <a href="/layout-reference/ref-17/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-17","name":"英文刊头与圆形叠标及窄栏","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[135,591,113,174],"row":4,"column":2},"width":113,"height":174,"reference":"/layout-reference/ref-17/source.png","annotated":"/layout-reference/ref-17/annotated.png","background":"/layout-reference/ref-17/background.png","elements":[{"id":"D01","kind":"decoration","role":"右栏底线","box":[82,121,29,2],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-17/D01.png","pixels":30},{"id":"T01","kind":"text","role":"左上英文第一行","box":[6,10,63,10],"text":"Bulublue","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-17/T01.png","pixels":277,"underlay":"/layout-reference/ref-17/T01-underlay.png"},{"id":"T02","kind":"text","role":"左上英文第二行","box":[5,20,56,16],"text":"Design","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-17/T02.png","pixels":423,"underlay":"/layout-reference/ref-17/T02-underlay.png"},{"id":"T03","kind":"text","role":"中部中文横题","box":[51,50,60,16],"text":"高级感版式.","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-17/T03.png","pixels":459,"underlay":"/layout-reference/ref-17/T03-underlay.png"},{"id":"T04","kind":"text","role":"右侧窄栏正文","box":[82,67,29,54],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-17/T04.png","pixels":329,"underlay":"/layout-reference/ref-17/T04-underlay.png"},{"id":"I01","kind":"image","role":"左下主图","box":[5,68,73,101],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-17/I01.png","pixels":7161,"mask":"/layout-reference/ref-17/I01-mask.png"},{"id":"I02","kind":"image","role":"左中叠加圆形","box":[5,53,22,22],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-17/I02.png","pixels":372,"mask":"/layout-reference/ref-17/I02-mask.png"},{"id":"D02","kind":"decoration","role":"刊头右侧双线","box":[61,27,50,7],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-17/D02.png","pixels":253},{"id":"D03","kind":"decoration","role":"底部横向贴条","box":[58,167,54,6],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-17/D03.png","pixels":324}],"ocr":[{"box":[0.05014749428466078,0.0651340998323755,0.5663716814159292,0.06896551724137923],"confidence":1,"text":"Bulublue"},{"box":[0.04661209192494646,0.1362427019870669,0.4878967645245668,0.07617359965240367],"confidence":0.30000001192092896,"text":"Design"},{"box":[0.447888041843808,0.30109252421060173,0.5496516494976031,0.07597587117746873],"confidence":0.5,"text":"高级感版式，"}],"verification":{"pixelIdentical":true,"pixels":19662,"unreadableText":1}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,210 +0,0 @@
|
||||
{
|
||||
"id": "ref-17",
|
||||
"name": "英文刊头与圆形叠标及窄栏",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
135,
|
||||
591,
|
||||
113,
|
||||
174
|
||||
],
|
||||
"row": 4,
|
||||
"column": 2
|
||||
},
|
||||
"width": 113,
|
||||
"height": 174,
|
||||
"reference": "/layout-reference/ref-17/source.png",
|
||||
"annotated": "/layout-reference/ref-17/annotated.png",
|
||||
"background": "/layout-reference/ref-17/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "右栏底线",
|
||||
"box": [
|
||||
82,
|
||||
121,
|
||||
29,
|
||||
2
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-17/D01.png",
|
||||
"pixels": 30
|
||||
},
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "左上英文第一行",
|
||||
"box": [
|
||||
6,
|
||||
10,
|
||||
63,
|
||||
10
|
||||
],
|
||||
"text": "Bulublue",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-17/T01.png",
|
||||
"pixels": 277,
|
||||
"underlay": "/layout-reference/ref-17/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "左上英文第二行",
|
||||
"box": [
|
||||
5,
|
||||
20,
|
||||
56,
|
||||
16
|
||||
],
|
||||
"text": "Design",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-17/T02.png",
|
||||
"pixels": 423,
|
||||
"underlay": "/layout-reference/ref-17/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "中部中文横题",
|
||||
"box": [
|
||||
51,
|
||||
50,
|
||||
60,
|
||||
16
|
||||
],
|
||||
"text": "高级感版式.",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-17/T03.png",
|
||||
"pixels": 459,
|
||||
"underlay": "/layout-reference/ref-17/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "右侧窄栏正文",
|
||||
"box": [
|
||||
82,
|
||||
67,
|
||||
29,
|
||||
54
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-17/T04.png",
|
||||
"pixels": 329,
|
||||
"underlay": "/layout-reference/ref-17/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "左下主图",
|
||||
"box": [
|
||||
5,
|
||||
68,
|
||||
73,
|
||||
101
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-17/I01.png",
|
||||
"pixels": 7161,
|
||||
"mask": "/layout-reference/ref-17/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "左中叠加圆形",
|
||||
"box": [
|
||||
5,
|
||||
53,
|
||||
22,
|
||||
22
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-17/I02.png",
|
||||
"pixels": 372,
|
||||
"mask": "/layout-reference/ref-17/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "刊头右侧双线",
|
||||
"box": [
|
||||
61,
|
||||
27,
|
||||
50,
|
||||
7
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-17/D02.png",
|
||||
"pixels": 253
|
||||
},
|
||||
{
|
||||
"id": "D03",
|
||||
"kind": "decoration",
|
||||
"role": "底部横向贴条",
|
||||
"box": [
|
||||
58,
|
||||
167,
|
||||
54,
|
||||
6
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-17/D03.png",
|
||||
"pixels": 324
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.05014749428466078,
|
||||
0.0651340998323755,
|
||||
0.5663716814159292,
|
||||
0.06896551724137923
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "Bulublue"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.04661209192494646,
|
||||
0.1362427019870669,
|
||||
0.4878967645245668,
|
||||
0.07617359965240367
|
||||
],
|
||||
"confidence": 0.30000001192092896,
|
||||
"text": "Design"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.447888041843808,
|
||||
0.30109252421060173,
|
||||
0.5496516494976031,
|
||||
0.07597587117746873
|
||||
],
|
||||
"confidence": 0.5,
|
||||
"text": "高级感版式，"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19662,
|
||||
"unreadableText": 1
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-18 · 上大图与下方英文双行</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/174;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-18 / 上大图与下方英文双行</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-18/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-18/T01" data-kind="text" src="/layout-reference/ref-18/T01.png" alt="左上微标识（未辨识原字形）" style="left:0%;top:2.2988505747126435%;width:7.079646017699115%;height:3.4482758620689653%">
|
||||
<img data-component="ref-18/T02" data-kind="text" src="/layout-reference/ref-18/T02.png" alt="Bulublue" style="left:4.424778761061947%;top:62.06896551724138%;width:66.3716814159292%;height:9.770114942528735%">
|
||||
<img data-component="ref-18/T03" data-kind="text" src="/layout-reference/ref-18/T03.png" alt="Design" style="left:4.424778761061947%;top:71.83908045977012%;width:65.48672566371681%;height:9.770114942528735%">
|
||||
<img data-component="ref-18/T04" data-kind="text" src="/layout-reference/ref-18/T04.png" alt="底部短信息组（未辨识原字形）" style="left:1.7699115044247788%;top:89.08045977011494%;width:90.2654867256637%;height:9.195402298850574%">
|
||||
<img data-component="ref-18/I01" data-kind="image" src="/layout-reference/ref-18/I01.png" alt="" style="left:16.8141592920354%;top:3.4482758620689653%;width:77.87610619469027%;height:52.29885057471264%">
|
||||
<img data-component="ref-18/D01" data-kind="decoration" src="/layout-reference/ref-18/D01.png" alt="" style="left:0%;top:37.35632183908046%;width:4.424778761061947%;height:16.666666666666664%">
|
||||
<img data-component="ref-18/D02" data-kind="decoration" src="/layout-reference/ref-18/D02.png" alt="" style="left:67.2566371681416%;top:73.5632183908046%;width:30.08849557522124%;height:10.919540229885058%">
|
||||
<img class="overlay" src="/layout-reference/ref-18/annotated.png" alt="构件标注"></div><p class="muted">原图第 4 行、第 3 列；113×174 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 左上微标识</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 下方英文第一行</td><td>Bulublue</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 下方英文第二行</td><td>Design</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 底部短信息组</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 上方主图</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 左侧竖向刻度</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 右下椭圆线组</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-18/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-18/source.png">原裁片</a> · <a href="/layout-reference/ref-18/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-18","name":"上大图与下方英文双行","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[256,591,113,174],"row":4,"column":3},"width":113,"height":174,"reference":"/layout-reference/ref-18/source.png","annotated":"/layout-reference/ref-18/annotated.png","background":"/layout-reference/ref-18/background.png","elements":[{"id":"T01","kind":"text","role":"左上微标识","box":[0,4,8,6],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-18/T01.png","pixels":34,"underlay":"/layout-reference/ref-18/T01-underlay.png"},{"id":"T02","kind":"text","role":"下方英文第一行","box":[5,108,75,17],"text":"Bulublue","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-18/T02.png","pixels":471,"underlay":"/layout-reference/ref-18/T02-underlay.png"},{"id":"T03","kind":"text","role":"下方英文第二行","box":[5,125,74,17],"text":"Design","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-18/T03.png","pixels":435,"underlay":"/layout-reference/ref-18/T03-underlay.png"},{"id":"T04","kind":"text","role":"底部短信息组","box":[2,155,102,16],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-18/T04.png","pixels":418,"underlay":"/layout-reference/ref-18/T04-underlay.png"},{"id":"I01","kind":"image","role":"上方主图","box":[19,6,88,91],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-18/I01.png","pixels":7995,"mask":"/layout-reference/ref-18/I01-mask.png"},{"id":"D01","kind":"decoration","role":"左侧竖向刻度","box":[0,65,5,29],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-18/D01.png","pixels":112},{"id":"D02","kind":"decoration","role":"右下椭圆线组","box":[76,128,34,19],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-18/D02.png","pixels":441}],"ocr":[{"box":[0.03818345576318917,0.6239403036164336,0.6846950384719533,0.08353701770534006],"confidence":0.5,"text":"Bulublue"},{"box":[0.03602924893711706,0.6949484790717884,0.7361454921486105,0.14112464495545596],"confidence":0.30000001192092896,"text":"Design m"}],"verification":{"pixelIdentical":true,"pixels":19662,"unreadableText":2}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,167 +0,0 @@
|
||||
{
|
||||
"id": "ref-18",
|
||||
"name": "上大图与下方英文双行",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
256,
|
||||
591,
|
||||
113,
|
||||
174
|
||||
],
|
||||
"row": 4,
|
||||
"column": 3
|
||||
},
|
||||
"width": 113,
|
||||
"height": 174,
|
||||
"reference": "/layout-reference/ref-18/source.png",
|
||||
"annotated": "/layout-reference/ref-18/annotated.png",
|
||||
"background": "/layout-reference/ref-18/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "左上微标识",
|
||||
"box": [
|
||||
0,
|
||||
4,
|
||||
8,
|
||||
6
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-18/T01.png",
|
||||
"pixels": 34,
|
||||
"underlay": "/layout-reference/ref-18/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "下方英文第一行",
|
||||
"box": [
|
||||
5,
|
||||
108,
|
||||
75,
|
||||
17
|
||||
],
|
||||
"text": "Bulublue",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-18/T02.png",
|
||||
"pixels": 471,
|
||||
"underlay": "/layout-reference/ref-18/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "下方英文第二行",
|
||||
"box": [
|
||||
5,
|
||||
125,
|
||||
74,
|
||||
17
|
||||
],
|
||||
"text": "Design",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-18/T03.png",
|
||||
"pixels": 435,
|
||||
"underlay": "/layout-reference/ref-18/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "底部短信息组",
|
||||
"box": [
|
||||
2,
|
||||
155,
|
||||
102,
|
||||
16
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-18/T04.png",
|
||||
"pixels": 418,
|
||||
"underlay": "/layout-reference/ref-18/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "上方主图",
|
||||
"box": [
|
||||
19,
|
||||
6,
|
||||
88,
|
||||
91
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-18/I01.png",
|
||||
"pixels": 7995,
|
||||
"mask": "/layout-reference/ref-18/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "左侧竖向刻度",
|
||||
"box": [
|
||||
0,
|
||||
65,
|
||||
5,
|
||||
29
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-18/D01.png",
|
||||
"pixels": 112
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "右下椭圆线组",
|
||||
"box": [
|
||||
76,
|
||||
128,
|
||||
34,
|
||||
19
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-18/D02.png",
|
||||
"pixels": 441
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.03818345576318917,
|
||||
0.6239403036164336,
|
||||
0.6846950384719533,
|
||||
0.08353701770534006
|
||||
],
|
||||
"confidence": 0.5,
|
||||
"text": "Bulublue"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.03602924893711706,
|
||||
0.6949484790717884,
|
||||
0.7361454921486105,
|
||||
0.14112464495545596
|
||||
],
|
||||
"confidence": 0.30000001192092896,
|
||||
"text": "Design m"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19662,
|
||||
"unreadableText": 2
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-19 · 四角大字与中央双圆竖题</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/171;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-19 / 四角大字与中央双圆竖题</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-19/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-19/T01" data-kind="text" src="/layout-reference/ref-19/T01.png" alt="高" style="left:0.8849557522123894%;top:0.5847953216374269%;width:27.43362831858407%;height:21.052631578947366%">
|
||||
<img data-component="ref-19/T02" data-kind="text" src="/layout-reference/ref-19/T02.png" alt="级" style="left:69.02654867256636%;top:0%;width:29.20353982300885%;height:21.637426900584796%">
|
||||
<img data-component="ref-19/T03" data-kind="text" src="/layout-reference/ref-19/T03.png" alt="排" style="left:0.8849557522123894%;top:77.19298245614034%;width:30.973451327433626%;height:22.807017543859647%">
|
||||
<img data-component="ref-19/T04" data-kind="text" src="/layout-reference/ref-19/T04.png" alt="版" style="left:68.14159292035397%;top:77.77777777777779%;width:30.973451327433626%;height:22.22222222222222%">
|
||||
<img data-component="ref-19/T05" data-kind="text" src="/layout-reference/ref-19/T05.png" alt="蓝羽毛の版式灵感" style="left:43.36283185840708%;top:21.637426900584796%;width:15.04424778761062%;height:50.877192982456144%">
|
||||
<img data-component="ref-19/T06" data-kind="text" src="/layout-reference/ref-19/T06.png" alt="右侧竖向微字（未辨识原字形）" style="left:91.1504424778761%;top:29.239766081871345%;width:7.964601769911504%;height:33.33333333333333%">
|
||||
<img data-component="ref-19/I01" data-kind="image" src="/layout-reference/ref-19/I01.png" alt="" style="left:0.8849557522123894%;top:0.5847953216374269%;width:96.46017699115043%;height:33.91812865497076%">
|
||||
<img data-component="ref-19/I02" data-kind="image" src="/layout-reference/ref-19/I02.png" alt="" style="left:23.893805309734514%;top:25.730994152046783%;width:51.32743362831859%;height:33.33333333333333%">
|
||||
<img data-component="ref-19/I03" data-kind="image" src="/layout-reference/ref-19/I03.png" alt="" style="left:39.823008849557525%;top:78.94736842105263%;width:19.469026548672566%;height:9.941520467836257%">
|
||||
<img data-component="ref-19/D01" data-kind="decoration" src="/layout-reference/ref-19/D01.png" alt="" style="left:0%;top:61.40350877192983%;width:41.5929203539823%;height:16.95906432748538%">
|
||||
<img data-component="ref-19/D02" data-kind="decoration" src="/layout-reference/ref-19/D02.png" alt="" style="left:60.17699115044248%;top:65.49707602339181%;width:34.51327433628318%;height:12.865497076023392%">
|
||||
<img data-component="ref-19/D03" data-kind="decoration" src="/layout-reference/ref-19/D03.png" alt="" style="left:38.05309734513274%;top:91.81286549707602%;width:23.008849557522122%;height:1.7543859649122806%">
|
||||
<img class="overlay" src="/layout-reference/ref-19/annotated.png" alt="构件标注"></div><p class="muted">原图第 4 行、第 4 列；113×171 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 左上大字</td><td>高</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 右上大字</td><td>级</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 左下大字</td><td>排</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 右下大字</td><td>版</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 中央竖排标题</td><td>蓝羽毛の版式灵感</td></tr><tr tabindex="0" data-key="T06"><td>T06</td><td>文字 / 右侧竖向微字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 顶部出血椭圆</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 中央圆形图位</td><td>—</td></tr><tr tabindex="0" data-key="I03"><td>I03</td><td>图片占位/色块 / 底部小椭圆</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 中部左线组</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 中部右线组</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 底部短线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-19/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-19/source.png">原裁片</a> · <a href="/layout-reference/ref-19/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-19","name":"四角大字与中央双圆竖题","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[376,593,113,171],"row":4,"column":4},"width":113,"height":171,"reference":"/layout-reference/ref-19/source.png","annotated":"/layout-reference/ref-19/annotated.png","background":"/layout-reference/ref-19/background.png","elements":[{"id":"T01","kind":"text","role":"左上大字","box":[1,1,31,36],"text":"高","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-19/T01.png","pixels":401,"underlay":"/layout-reference/ref-19/T01-underlay.png"},{"id":"T02","kind":"text","role":"右上大字","box":[78,0,33,37],"text":"级","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-19/T02.png","pixels":455,"underlay":"/layout-reference/ref-19/T02-underlay.png"},{"id":"T03","kind":"text","role":"左下大字","box":[1,132,35,39],"text":"排","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-19/T03.png","pixels":511,"underlay":"/layout-reference/ref-19/T03-underlay.png"},{"id":"T04","kind":"text","role":"右下大字","box":[77,133,35,38],"text":"版","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-19/T04.png","pixels":590,"underlay":"/layout-reference/ref-19/T04-underlay.png"},{"id":"T05","kind":"text","role":"中央竖排标题","box":[49,37,17,87],"text":"蓝羽毛の版式灵感","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-19/T05.png","pixels":482,"underlay":"/layout-reference/ref-19/T05-underlay.png"},{"id":"T06","kind":"text","role":"右侧竖向微字","box":[103,50,9,57],"text":null,"direction":"vertical","reading":"unreadable","asset":"/layout-reference/ref-19/T06.png","pixels":303,"underlay":"/layout-reference/ref-19/T06-underlay.png"},{"id":"I01","kind":"image","role":"顶部出血椭圆","box":[1,1,109,58],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/I01.png","pixels":4172,"mask":"/layout-reference/ref-19/I01-mask.png"},{"id":"I02","kind":"image","role":"中央圆形图位","box":[27,44,58,57],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/I02.png","pixels":2238,"mask":"/layout-reference/ref-19/I02-mask.png"},{"id":"I03","kind":"image","role":"底部小椭圆","box":[45,135,22,17],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/I03.png","pixels":283,"mask":"/layout-reference/ref-19/I03-mask.png"},{"id":"D01","kind":"decoration","role":"中部左线组","box":[0,105,47,29],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/D01.png","pixels":818},{"id":"D02","kind":"decoration","role":"中部右线组","box":[68,112,39,22],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/D02.png","pixels":435},{"id":"D03","kind":"decoration","role":"底部短线","box":[43,157,26,3],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/D03.png","pixels":76}],"ocr":[{"box":[0.04129793498384601,0.015594541432284448,0.22713864306784656,0.2007797270955165],"confidence":1,"text":"高"},{"box":[0.03244837751659291,0.7076023384685672,0.23893805309734517,0.22807017543859653],"confidence":1,"text":"排"},{"box":[0.6961651915855457,-5.311890927117702e-10,0.23303834808259583,0.21247563352826515],"confidence":1,"text":"级"},{"box":[0.7050147490689528,0.7173489271929825,0.2271386430678467,0.21832358674463936],"confidence":1,"text":"版"}],"verification":{"pixelIdentical":true,"pixels":19323,"unreadableText":1}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,271 +0,0 @@
|
||||
{
|
||||
"id": "ref-19",
|
||||
"name": "四角大字与中央双圆竖题",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
376,
|
||||
593,
|
||||
113,
|
||||
171
|
||||
],
|
||||
"row": 4,
|
||||
"column": 4
|
||||
},
|
||||
"width": 113,
|
||||
"height": 171,
|
||||
"reference": "/layout-reference/ref-19/source.png",
|
||||
"annotated": "/layout-reference/ref-19/annotated.png",
|
||||
"background": "/layout-reference/ref-19/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "左上大字",
|
||||
"box": [
|
||||
1,
|
||||
1,
|
||||
31,
|
||||
36
|
||||
],
|
||||
"text": "高",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-19/T01.png",
|
||||
"pixels": 401,
|
||||
"underlay": "/layout-reference/ref-19/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "右上大字",
|
||||
"box": [
|
||||
78,
|
||||
0,
|
||||
33,
|
||||
37
|
||||
],
|
||||
"text": "级",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-19/T02.png",
|
||||
"pixels": 455,
|
||||
"underlay": "/layout-reference/ref-19/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "左下大字",
|
||||
"box": [
|
||||
1,
|
||||
132,
|
||||
35,
|
||||
39
|
||||
],
|
||||
"text": "排",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-19/T03.png",
|
||||
"pixels": 511,
|
||||
"underlay": "/layout-reference/ref-19/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "右下大字",
|
||||
"box": [
|
||||
77,
|
||||
133,
|
||||
35,
|
||||
38
|
||||
],
|
||||
"text": "版",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-19/T04.png",
|
||||
"pixels": 590,
|
||||
"underlay": "/layout-reference/ref-19/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "中央竖排标题",
|
||||
"box": [
|
||||
49,
|
||||
37,
|
||||
17,
|
||||
87
|
||||
],
|
||||
"text": "蓝羽毛の版式灵感",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-19/T05.png",
|
||||
"pixels": 482,
|
||||
"underlay": "/layout-reference/ref-19/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T06",
|
||||
"kind": "text",
|
||||
"role": "右侧竖向微字",
|
||||
"box": [
|
||||
103,
|
||||
50,
|
||||
9,
|
||||
57
|
||||
],
|
||||
"text": null,
|
||||
"direction": "vertical",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-19/T06.png",
|
||||
"pixels": 303,
|
||||
"underlay": "/layout-reference/ref-19/T06-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "顶部出血椭圆",
|
||||
"box": [
|
||||
1,
|
||||
1,
|
||||
109,
|
||||
58
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-19/I01.png",
|
||||
"pixels": 4172,
|
||||
"mask": "/layout-reference/ref-19/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "中央圆形图位",
|
||||
"box": [
|
||||
27,
|
||||
44,
|
||||
58,
|
||||
57
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-19/I02.png",
|
||||
"pixels": 2238,
|
||||
"mask": "/layout-reference/ref-19/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I03",
|
||||
"kind": "image",
|
||||
"role": "底部小椭圆",
|
||||
"box": [
|
||||
45,
|
||||
135,
|
||||
22,
|
||||
17
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-19/I03.png",
|
||||
"pixels": 283,
|
||||
"mask": "/layout-reference/ref-19/I03-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "中部左线组",
|
||||
"box": [
|
||||
0,
|
||||
105,
|
||||
47,
|
||||
29
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-19/D01.png",
|
||||
"pixels": 818
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "中部右线组",
|
||||
"box": [
|
||||
68,
|
||||
112,
|
||||
39,
|
||||
22
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-19/D02.png",
|
||||
"pixels": 435
|
||||
},
|
||||
{
|
||||
"id": "D03",
|
||||
"kind": "decoration",
|
||||
"role": "底部短线",
|
||||
"box": [
|
||||
43,
|
||||
157,
|
||||
26,
|
||||
3
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-19/D03.png",
|
||||
"pixels": 76
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.04129793498384601,
|
||||
0.015594541432284448,
|
||||
0.22713864306784656,
|
||||
0.2007797270955165
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "高"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.03244837751659291,
|
||||
0.7076023384685672,
|
||||
0.23893805309734517,
|
||||
0.22807017543859653
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "排"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.6961651915855457,
|
||||
-5.311890927117702e-10,
|
||||
0.23303834808259583,
|
||||
0.21247563352826515
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "级"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.7050147490689528,
|
||||
0.7173489271929825,
|
||||
0.2271386430678467,
|
||||
0.21832358674463936
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "版"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19323,
|
||||
"unreadableText": 1
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-20 · 右上大弧面与左下圆形标题</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:114/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-20 / 右上大弧面与左下圆形标题</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-20/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-20/T01" data-kind="text" src="/layout-reference/ref-20/T01.png" alt="高级" style="left:19.298245614035086%;top:58.95953757225434%;width:31.57894736842105%;height:8.670520231213873%">
|
||||
<img data-component="ref-20/T02" data-kind="text" src="/layout-reference/ref-20/T02.png" alt="版式" style="left:18.421052631578945%;top:71.09826589595376%;width:34.21052631578947%;height:10.404624277456648%">
|
||||
<img data-component="ref-20/T03" data-kind="text" src="/layout-reference/ref-20/T03.png" alt="右下短注（未辨识原字形）" style="left:63.1578947368421%;top:91.32947976878613%;width:28.07017543859649%;height:4.046242774566474%">
|
||||
<img data-component="ref-20/I01" data-kind="image" src="/layout-reference/ref-20/I01.png" alt="" style="left:16.666666666666664%;top:0.5780346820809248%;width:82.45614035087719%;height:71.67630057803468%">
|
||||
<img data-component="ref-20/I02" data-kind="image" src="/layout-reference/ref-20/I02.png" alt="" style="left:7.017543859649122%;top:52.02312138728323%;width:53.50877192982456%;height:34.104046242774565%">
|
||||
<img data-component="ref-20/D01" data-kind="decoration" src="/layout-reference/ref-20/D01.png" alt="" style="left:7.017543859649122%;top:10.404624277456648%;width:3.508771929824561%;height:30.63583815028902%">
|
||||
<img data-component="ref-20/D02" data-kind="decoration" src="/layout-reference/ref-20/D02.png" alt="" style="left:25.438596491228072%;top:87.28323699421965%;width:2.631578947368421%;height:12.716763005780345%">
|
||||
<img class="overlay" src="/layout-reference/ref-20/annotated.png" alt="构件标注"></div><p class="muted">原图第 4 行、第 5 列；114×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 圆中第一行</td><td>高级</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 圆中第二行</td><td>版式</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 右下短注</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 右上出血椭圆</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 左下叠加圆</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 左上竖线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 左下竖线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-20/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-20/source.png">原裁片</a> · <a href="/layout-reference/ref-20/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-20","name":"右上大弧面与左下圆形标题","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[496,592,114,173],"row":4,"column":5},"width":114,"height":173,"reference":"/layout-reference/ref-20/source.png","annotated":"/layout-reference/ref-20/annotated.png","background":"/layout-reference/ref-20/background.png","elements":[{"id":"T01","kind":"text","role":"圆中第一行","box":[22,102,36,15],"text":"高级","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-20/T01.png","pixels":229,"underlay":"/layout-reference/ref-20/T01-underlay.png"},{"id":"T02","kind":"text","role":"圆中第二行","box":[21,123,39,18],"text":"版式","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-20/T02.png","pixels":219,"underlay":"/layout-reference/ref-20/T02-underlay.png"},{"id":"T03","kind":"text","role":"右下短注","box":[72,158,32,7],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-20/T03.png","pixels":92,"underlay":"/layout-reference/ref-20/T03-underlay.png"},{"id":"I01","kind":"image","role":"右上出血椭圆","box":[19,1,94,124],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-20/I01.png","pixels":9205,"mask":"/layout-reference/ref-20/I01-mask.png"},{"id":"I02","kind":"image","role":"左下叠加圆","box":[8,90,61,59],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-20/I02.png","pixels":2269,"mask":"/layout-reference/ref-20/I02-mask.png"},{"id":"D01","kind":"decoration","role":"左上竖线","box":[8,18,4,53],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-20/D01.png","pixels":211},{"id":"D02","kind":"decoration","role":"左下竖线","box":[29,151,3,22],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-20/D02.png","pixels":48}],"ocr":[{"box":[0.19446010141722203,0.583293929900469,0.3181837650767544,0.09925391724573618],"confidence":0.30000001192092896,"text":"高级"}],"verification":{"pixelIdentical":true,"pixels":19722,"unreadableText":1}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,157 +0,0 @@
|
||||
{
|
||||
"id": "ref-20",
|
||||
"name": "右上大弧面与左下圆形标题",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
496,
|
||||
592,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 4,
|
||||
"column": 5
|
||||
},
|
||||
"width": 114,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-20/source.png",
|
||||
"annotated": "/layout-reference/ref-20/annotated.png",
|
||||
"background": "/layout-reference/ref-20/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "圆中第一行",
|
||||
"box": [
|
||||
22,
|
||||
102,
|
||||
36,
|
||||
15
|
||||
],
|
||||
"text": "高级",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-20/T01.png",
|
||||
"pixels": 229,
|
||||
"underlay": "/layout-reference/ref-20/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "圆中第二行",
|
||||
"box": [
|
||||
21,
|
||||
123,
|
||||
39,
|
||||
18
|
||||
],
|
||||
"text": "版式",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-20/T02.png",
|
||||
"pixels": 219,
|
||||
"underlay": "/layout-reference/ref-20/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "右下短注",
|
||||
"box": [
|
||||
72,
|
||||
158,
|
||||
32,
|
||||
7
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-20/T03.png",
|
||||
"pixels": 92,
|
||||
"underlay": "/layout-reference/ref-20/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "右上出血椭圆",
|
||||
"box": [
|
||||
19,
|
||||
1,
|
||||
94,
|
||||
124
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-20/I01.png",
|
||||
"pixels": 9205,
|
||||
"mask": "/layout-reference/ref-20/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "左下叠加圆",
|
||||
"box": [
|
||||
8,
|
||||
90,
|
||||
61,
|
||||
59
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-20/I02.png",
|
||||
"pixels": 2269,
|
||||
"mask": "/layout-reference/ref-20/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "左上竖线",
|
||||
"box": [
|
||||
8,
|
||||
18,
|
||||
4,
|
||||
53
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-20/D01.png",
|
||||
"pixels": 211
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "左下竖线",
|
||||
"box": [
|
||||
29,
|
||||
151,
|
||||
3,
|
||||
22
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-20/D02.png",
|
||||
"pixels": 48
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.19446010141722203,
|
||||
0.583293929900469,
|
||||
0.3181837650767544,
|
||||
0.09925391724573618
|
||||
],
|
||||
"confidence": 0.30000001192092896,
|
||||
"text": "高级"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19722,
|
||||
"unreadableText": 1
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-21 · 右侧旋转英文与节点方图</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:114/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-21 / 右侧旋转英文与节点方图</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-21/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-21/T01" data-kind="text" src="/layout-reference/ref-21/T01.png" alt="Bulublue" style="left:76.31578947368422%;top:1.1560693641618496%;width:21.929824561403507%;height:63.005780346820806%">
|
||||
<img data-component="ref-21/T02" data-kind="text" src="/layout-reference/ref-21/T02.png" alt="25" style="left:0.8771929824561403%;top:62.42774566473989%;width:12.280701754385964%;height:6.358381502890173%">
|
||||
<img data-component="ref-21/T03" data-kind="text" src="/layout-reference/ref-21/T03.png" alt="03" style="left:85.08771929824562%;top:65.3179190751445%;width:9.649122807017543%;height:4.624277456647398%">
|
||||
<img data-component="ref-21/T04" data-kind="text" src="/layout-reference/ref-21/T04.png" alt="2025" style="left:74.56140350877193%;top:71.67630057803468%;width:20.175438596491226%;height:5.202312138728324%">
|
||||
<img data-component="ref-21/T05" data-kind="text" src="/layout-reference/ref-21/T05.png" alt="中下说明（未辨识原字形）" style="left:2.631578947368421%;top:73.98843930635837%;width:58.77192982456141%;height:4.046242774566474%">
|
||||
<img data-component="ref-21/T06" data-kind="text" src="/layout-reference/ref-21/T06.png" alt="底部两块微字（未辨识原字形）" style="left:4.385964912280701%;top:84.97109826589595%;width:65.78947368421053%;height:8.670520231213873%">
|
||||
<img data-component="ref-21/I01" data-kind="image" src="/layout-reference/ref-21/I01.png" alt="" style="left:2.631578947368421%;top:2.312138728323699%;width:66.66666666666666%;height:57.80346820809249%">
|
||||
<img data-component="ref-21/I02" data-kind="image" src="/layout-reference/ref-21/I02.png" alt="" style="left:0.8771929824561403%;top:78.03468208092485%;width:96.49122807017544%;height:20.23121387283237%">
|
||||
<img data-component="ref-21/D01" data-kind="decoration" src="/layout-reference/ref-21/D01.png" alt="" style="left:24.561403508771928%;top:6.9364161849710975%;width:7.894736842105263%;height:5.202312138728324%">
|
||||
<img data-component="ref-21/D02" data-kind="decoration" src="/layout-reference/ref-21/D02.png" alt="" style="left:65.78947368421053%;top:16.76300578034682%;width:9.649122807017543%;height:8.092485549132949%">
|
||||
<img data-component="ref-21/D03" data-kind="decoration" src="/layout-reference/ref-21/D03.png" alt="" style="left:40.35087719298245%;top:57.22543352601156%;width:9.649122807017543%;height:6.9364161849710975%">
|
||||
<img data-component="ref-21/D04" data-kind="decoration" src="/layout-reference/ref-21/D04.png" alt="" style="left:85.08771929824562%;top:58.38150289017341%;width:9.649122807017543%;height:5.202312138728324%">
|
||||
<img data-component="ref-21/D05" data-kind="decoration" src="/layout-reference/ref-21/D05.png" alt="" style="left:14.912280701754385%;top:64.73988439306359%;width:67.54385964912281%;height:3.4682080924855487%">
|
||||
<img class="overlay" src="/layout-reference/ref-21/annotated.png" alt="构件标注"></div><p class="muted">原图第 4 行、第 6 列；114×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 右侧旋转英文</td><td>Bulublue</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 左日期</td><td>25</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 右日期</td><td>03</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 右年份</td><td>2025</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 中下说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T06"><td>T06</td><td>文字 / 底部两块微字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 左上主图</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 底部灰色信息区</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 上方圆节点</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 右上圆节点</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 下方圆节点</td><td>—</td></tr><tr tabindex="0" data-key="D04"><td>D04</td><td>装饰 / 右下圆节点</td><td>—</td></tr><tr tabindex="0" data-key="D05"><td>D05</td><td>装饰 / 日期间椭圆线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-21/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-21/source.png">原裁片</a> · <a href="/layout-reference/ref-21/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-21","name":"右侧旋转英文与节点方图","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[616,592,114,173],"row":4,"column":6},"width":114,"height":173,"reference":"/layout-reference/ref-21/source.png","annotated":"/layout-reference/ref-21/annotated.png","background":"/layout-reference/ref-21/background.png","elements":[{"id":"T01","kind":"text","role":"右侧旋转英文","box":[87,2,25,109],"text":"Bulublue","direction":"rotated","reading":"verified","asset":"/layout-reference/ref-21/T01.png","pixels":1020,"underlay":"/layout-reference/ref-21/T01-underlay.png"},{"id":"T02","kind":"text","role":"左日期","box":[1,108,14,11],"text":"25","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-21/T02.png","pixels":46,"underlay":"/layout-reference/ref-21/T02-underlay.png"},{"id":"T03","kind":"text","role":"右日期","box":[97,113,11,8],"text":"03","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-21/T03.png","pixels":59,"underlay":"/layout-reference/ref-21/T03-underlay.png"},{"id":"T04","kind":"text","role":"右年份","box":[85,124,23,9],"text":"2025","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-21/T04.png","pixels":116,"underlay":"/layout-reference/ref-21/T04-underlay.png"},{"id":"T05","kind":"text","role":"中下说明","box":[3,128,67,7],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-21/T05.png","pixels":287,"underlay":"/layout-reference/ref-21/T05-underlay.png"},{"id":"T06","kind":"text","role":"底部两块微字","box":[5,147,75,15],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-21/T06.png","pixels":603,"underlay":"/layout-reference/ref-21/T06-underlay.png"},{"id":"I01","kind":"image","role":"左上主图","box":[3,4,76,100],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/I01.png","pixels":7379,"mask":"/layout-reference/ref-21/I01-mask.png"},{"id":"I02","kind":"image","role":"底部灰色信息区","box":[1,135,110,35],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/I02.png","pixels":3138,"mask":"/layout-reference/ref-21/I02-mask.png"},{"id":"D01","kind":"decoration","role":"上方圆节点","box":[28,12,9,9],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/D01.png","pixels":64},{"id":"D02","kind":"decoration","role":"右上圆节点","box":[75,29,11,14],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/D02.png","pixels":87},{"id":"D03","kind":"decoration","role":"下方圆节点","box":[46,99,11,12],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/D03.png","pixels":80},{"id":"D04","kind":"decoration","role":"右下圆节点","box":[97,101,11,9],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/D04.png","pixels":6},{"id":"D05","kind":"decoration","role":"日期间椭圆线","box":[17,112,77,6],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/D05.png","pixels":200}],"ocr":[{"box":[0.03216374201388889,0.6512524085500964,0.10818713450292397,0.046242774566473965],"confidence":1,"text":"25"},{"box":[0.7009572502841679,0.02139049098390966,0.2679496675904034,0.6943671018861391],"confidence":0.30000001192092896,"text":"Bulublue："},{"box":[0.7424248804406856,0.7201085946235993,0.2110566702502512,0.049185508478124196],"confidence":1,"text":"2025"}],"verification":{"pixelIdentical":true,"pixels":19722,"unreadableText":2}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,276 +0,0 @@
|
||||
{
|
||||
"id": "ref-21",
|
||||
"name": "右侧旋转英文与节点方图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
616,
|
||||
592,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 4,
|
||||
"column": 6
|
||||
},
|
||||
"width": 114,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-21/source.png",
|
||||
"annotated": "/layout-reference/ref-21/annotated.png",
|
||||
"background": "/layout-reference/ref-21/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "右侧旋转英文",
|
||||
"box": [
|
||||
87,
|
||||
2,
|
||||
25,
|
||||
109
|
||||
],
|
||||
"text": "Bulublue",
|
||||
"direction": "rotated",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-21/T01.png",
|
||||
"pixels": 1020,
|
||||
"underlay": "/layout-reference/ref-21/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "左日期",
|
||||
"box": [
|
||||
1,
|
||||
108,
|
||||
14,
|
||||
11
|
||||
],
|
||||
"text": "25",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-21/T02.png",
|
||||
"pixels": 46,
|
||||
"underlay": "/layout-reference/ref-21/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "右日期",
|
||||
"box": [
|
||||
97,
|
||||
113,
|
||||
11,
|
||||
8
|
||||
],
|
||||
"text": "03",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-21/T03.png",
|
||||
"pixels": 59,
|
||||
"underlay": "/layout-reference/ref-21/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "右年份",
|
||||
"box": [
|
||||
85,
|
||||
124,
|
||||
23,
|
||||
9
|
||||
],
|
||||
"text": "2025",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-21/T04.png",
|
||||
"pixels": 116,
|
||||
"underlay": "/layout-reference/ref-21/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "中下说明",
|
||||
"box": [
|
||||
3,
|
||||
128,
|
||||
67,
|
||||
7
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-21/T05.png",
|
||||
"pixels": 287,
|
||||
"underlay": "/layout-reference/ref-21/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T06",
|
||||
"kind": "text",
|
||||
"role": "底部两块微字",
|
||||
"box": [
|
||||
5,
|
||||
147,
|
||||
75,
|
||||
15
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-21/T06.png",
|
||||
"pixels": 603,
|
||||
"underlay": "/layout-reference/ref-21/T06-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "左上主图",
|
||||
"box": [
|
||||
3,
|
||||
4,
|
||||
76,
|
||||
100
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-21/I01.png",
|
||||
"pixels": 7379,
|
||||
"mask": "/layout-reference/ref-21/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "底部灰色信息区",
|
||||
"box": [
|
||||
1,
|
||||
135,
|
||||
110,
|
||||
35
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-21/I02.png",
|
||||
"pixels": 3138,
|
||||
"mask": "/layout-reference/ref-21/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "上方圆节点",
|
||||
"box": [
|
||||
28,
|
||||
12,
|
||||
9,
|
||||
9
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-21/D01.png",
|
||||
"pixels": 64
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "右上圆节点",
|
||||
"box": [
|
||||
75,
|
||||
29,
|
||||
11,
|
||||
14
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-21/D02.png",
|
||||
"pixels": 87
|
||||
},
|
||||
{
|
||||
"id": "D03",
|
||||
"kind": "decoration",
|
||||
"role": "下方圆节点",
|
||||
"box": [
|
||||
46,
|
||||
99,
|
||||
11,
|
||||
12
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-21/D03.png",
|
||||
"pixels": 80
|
||||
},
|
||||
{
|
||||
"id": "D04",
|
||||
"kind": "decoration",
|
||||
"role": "右下圆节点",
|
||||
"box": [
|
||||
97,
|
||||
101,
|
||||
11,
|
||||
9
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-21/D04.png",
|
||||
"pixels": 6
|
||||
},
|
||||
{
|
||||
"id": "D05",
|
||||
"kind": "decoration",
|
||||
"role": "日期间椭圆线",
|
||||
"box": [
|
||||
17,
|
||||
112,
|
||||
77,
|
||||
6
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-21/D05.png",
|
||||
"pixels": 200
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.03216374201388889,
|
||||
0.6512524085500964,
|
||||
0.10818713450292397,
|
||||
0.046242774566473965
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "25"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.7009572502841679,
|
||||
0.02139049098390966,
|
||||
0.2679496675904034,
|
||||
0.6943671018861391
|
||||
],
|
||||
"confidence": 0.30000001192092896,
|
||||
"text": "Bulublue："
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.7424248804406856,
|
||||
0.7201085946235993,
|
||||
0.2110566702502512,
|
||||
0.049185508478124196
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "2025"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19722,
|
||||
"unreadableText": 2
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-22 · 三段斜切背景与右侧白字</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-22 / 三段斜切背景与右侧白字</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-22/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-22/T01" data-kind="text" src="/layout-reference/ref-22/T01.png" alt="蓝羽毛版式" style="left:72.56637168141593%;top:0%;width:25.663716814159294%;height:84.39306358381504%">
|
||||
<img data-component="ref-22/T02" data-kind="text" src="/layout-reference/ref-22/T02.png" alt="左上说明（未辨识原字形）" style="left:3.5398230088495577%;top:21.38728323699422%;width:30.973451327433626%;height:6.358381502890173%">
|
||||
<img data-component="ref-22/T03" data-kind="text" src="/layout-reference/ref-22/T03.png" alt="左中说明（未辨识原字形）" style="left:1.7699115044247788%;top:42.77456647398844%;width:30.973451327433626%;height:13.872832369942195%">
|
||||
<img data-component="ref-22/T04" data-kind="text" src="/layout-reference/ref-22/T04.png" alt="左下说明（未辨识原字形）" style="left:2.6548672566371683%;top:62.42774566473989%;width:34.51327433628318%;height:11.560693641618498%">
|
||||
<img data-component="ref-22/T05" data-kind="text" src="/layout-reference/ref-22/T05.png" alt="右下日期（未辨识原字形）" style="left:65.48672566371681%;top:83.23699421965318%;width:30.08849557522124%;height:6.9364161849710975%">
|
||||
<img data-component="ref-22/T06" data-kind="text" src="/layout-reference/ref-22/T06.png" alt="底部说明（未辨识原字形）" style="left:2.6548672566371683%;top:89.59537572254335%;width:54.86725663716814%;height:8.092485549132949%">
|
||||
<img data-component="ref-22/I01" data-kind="image" src="/layout-reference/ref-22/I01.png" alt="" style="left:0.8849557522123894%;top:0.5780346820809248%;width:71.68141592920354%;height:38.15028901734104%">
|
||||
<img data-component="ref-22/I02" data-kind="image" src="/layout-reference/ref-22/I02.png" alt="" style="left:0.8849557522123894%;top:19.07514450867052%;width:98.23008849557522%;height:67.63005780346822%">
|
||||
<img data-component="ref-22/I03" data-kind="image" src="/layout-reference/ref-22/I03.png" alt="" style="left:0.8849557522123894%;top:60.115606936416185%;width:96.46017699115043%;height:38.15028901734104%">
|
||||
<img class="overlay" src="/layout-reference/ref-22/annotated.png" alt="构件标注"></div><p class="muted">原图第 5 行、第 1 列；113×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 右侧竖排主标题</td><td>蓝羽毛版式</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 左上说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 左中说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 左下说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 右下日期</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T06"><td>T06</td><td>文字 / 底部说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 顶部浅色斜切图</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 中部深色斜带图</td><td>—</td></tr><tr tabindex="0" data-key="I03"><td>I03</td><td>图片占位/色块 / 底部灰色斜切图</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-22/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-22/source.png">原裁片</a> · <a href="/layout-reference/ref-22/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-22","name":"三段斜切背景与右侧白字","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[15,774,113,173],"row":5,"column":1},"width":113,"height":173,"reference":"/layout-reference/ref-22/source.png","annotated":"/layout-reference/ref-22/annotated.png","background":"/layout-reference/ref-22/background.png","elements":[{"id":"T01","kind":"text","role":"右侧竖排主标题","box":[82,0,29,146],"text":"蓝羽毛版式","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-22/T01.png","pixels":3039,"underlay":"/layout-reference/ref-22/T01-underlay.png"},{"id":"T02","kind":"text","role":"左上说明","box":[4,37,35,11],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-22/T02.png","pixels":160,"underlay":"/layout-reference/ref-22/T02-underlay.png"},{"id":"T03","kind":"text","role":"左中说明","box":[2,74,35,24],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-22/T03.png","pixels":417,"underlay":"/layout-reference/ref-22/T03-underlay.png"},{"id":"T04","kind":"text","role":"左下说明","box":[3,108,39,20],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-22/T04.png","pixels":430,"underlay":"/layout-reference/ref-22/T04-underlay.png"},{"id":"T05","kind":"text","role":"右下日期","box":[74,144,34,12],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-22/T05.png","pixels":209,"underlay":"/layout-reference/ref-22/T05-underlay.png"},{"id":"T06","kind":"text","role":"底部说明","box":[3,155,62,14],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-22/T06.png","pixels":373,"underlay":"/layout-reference/ref-22/T06-underlay.png"},{"id":"I01","kind":"image","role":"顶部浅色斜切图","box":[1,1,81,66],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-22/I01.png","pixels":4545,"mask":"/layout-reference/ref-22/I01-mask.png"},{"id":"I02","kind":"image","role":"中部深色斜带图","box":[1,33,111,117],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-22/I02.png","pixels":5013,"mask":"/layout-reference/ref-22/I02-mask.png"},{"id":"I03","kind":"image","role":"底部灰色斜切图","box":[1,104,109,66],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-22/I03.png","pixels":4403,"mask":"/layout-reference/ref-22/I03-mask.png"}],"ocr":[],"verification":{"pixelIdentical":true,"pixels":19549,"unreadableText":5}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,182 +0,0 @@
|
||||
{
|
||||
"id": "ref-22",
|
||||
"name": "三段斜切背景与右侧白字",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
15,
|
||||
774,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 5,
|
||||
"column": 1
|
||||
},
|
||||
"width": 113,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-22/source.png",
|
||||
"annotated": "/layout-reference/ref-22/annotated.png",
|
||||
"background": "/layout-reference/ref-22/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "右侧竖排主标题",
|
||||
"box": [
|
||||
82,
|
||||
0,
|
||||
29,
|
||||
146
|
||||
],
|
||||
"text": "蓝羽毛版式",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-22/T01.png",
|
||||
"pixels": 3039,
|
||||
"underlay": "/layout-reference/ref-22/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "左上说明",
|
||||
"box": [
|
||||
4,
|
||||
37,
|
||||
35,
|
||||
11
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-22/T02.png",
|
||||
"pixels": 160,
|
||||
"underlay": "/layout-reference/ref-22/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "左中说明",
|
||||
"box": [
|
||||
2,
|
||||
74,
|
||||
35,
|
||||
24
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-22/T03.png",
|
||||
"pixels": 417,
|
||||
"underlay": "/layout-reference/ref-22/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "左下说明",
|
||||
"box": [
|
||||
3,
|
||||
108,
|
||||
39,
|
||||
20
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-22/T04.png",
|
||||
"pixels": 430,
|
||||
"underlay": "/layout-reference/ref-22/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "右下日期",
|
||||
"box": [
|
||||
74,
|
||||
144,
|
||||
34,
|
||||
12
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-22/T05.png",
|
||||
"pixels": 209,
|
||||
"underlay": "/layout-reference/ref-22/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T06",
|
||||
"kind": "text",
|
||||
"role": "底部说明",
|
||||
"box": [
|
||||
3,
|
||||
155,
|
||||
62,
|
||||
14
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-22/T06.png",
|
||||
"pixels": 373,
|
||||
"underlay": "/layout-reference/ref-22/T06-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "顶部浅色斜切图",
|
||||
"box": [
|
||||
1,
|
||||
1,
|
||||
81,
|
||||
66
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-22/I01.png",
|
||||
"pixels": 4545,
|
||||
"mask": "/layout-reference/ref-22/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "中部深色斜带图",
|
||||
"box": [
|
||||
1,
|
||||
33,
|
||||
111,
|
||||
117
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-22/I02.png",
|
||||
"pixels": 5013,
|
||||
"mask": "/layout-reference/ref-22/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I03",
|
||||
"kind": "image",
|
||||
"role": "底部灰色斜切图",
|
||||
"box": [
|
||||
1,
|
||||
104,
|
||||
109,
|
||||
66
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-22/I03.png",
|
||||
"pixels": 4403,
|
||||
"mask": "/layout-reference/ref-22/I03-mask.png"
|
||||
}
|
||||
],
|
||||
"ocr": [],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19549,
|
||||
"unreadableText": 5
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-23 · 上方方图与中部大写英文</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:114/172;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-23 / 上方方图与中部大写英文</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-23/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-23/T01" data-kind="text" src="/layout-reference/ref-23/T01.png" alt="右上标识（未辨识原字形）" style="left:69.2982456140351%;top:0%;width:22.807017543859647%;height:4.651162790697675%">
|
||||
<img data-component="ref-23/T02" data-kind="text" src="/layout-reference/ref-23/T02.png" alt="主图下方左右标签（未辨识原字形）" style="left:0.8771929824561403%;top:41.86046511627907%;width:68.42105263157895%;height:4.069767441860465%">
|
||||
<img data-component="ref-23/T03" data-kind="text" src="/layout-reference/ref-23/T03.png" alt="BULUBLUE" style="left:0%;top:45.348837209302324%;width:99.12280701754386%;height:14.534883720930234%">
|
||||
<img data-component="ref-23/T04" data-kind="text" src="/layout-reference/ref-23/T04.png" alt="英文下方四组微字（未辨识原字形）" style="left:0%;top:60.46511627906976%;width:95.6140350877193%;height:12.209302325581394%">
|
||||
<img data-component="ref-23/T05" data-kind="text" src="/layout-reference/ref-23/T05.png" alt="底部三处标签（未辨识原字形）" style="left:0%;top:95.93023255813954%;width:92.10526315789474%;height:3.488372093023256%">
|
||||
<img data-component="ref-23/I01" data-kind="image" src="/layout-reference/ref-23/I01.png" alt="" style="left:4.385964912280701%;top:2.3255813953488373%;width:64.91228070175438%;height:39.53488372093023%">
|
||||
<img class="overlay" src="/layout-reference/ref-23/annotated.png" alt="构件标注"></div><p class="muted">原图第 5 行、第 2 列；114×172 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 右上标识</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 主图下方左右标签</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 中部大英文</td><td>BULUBLUE</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 英文下方四组微字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 底部三处标签</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 左上方图</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-23/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-23/source.png">原裁片</a> · <a href="/layout-reference/ref-23/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-23","name":"上方方图与中部大写英文","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[134,775,114,172],"row":5,"column":2},"width":114,"height":172,"reference":"/layout-reference/ref-23/source.png","annotated":"/layout-reference/ref-23/annotated.png","background":"/layout-reference/ref-23/background.png","elements":[{"id":"T01","kind":"text","role":"右上标识","box":[79,0,26,8],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-23/T01.png","pixels":85,"underlay":"/layout-reference/ref-23/T01-underlay.png"},{"id":"T02","kind":"text","role":"主图下方左右标签","box":[1,72,78,7],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-23/T02.png","pixels":129,"underlay":"/layout-reference/ref-23/T02-underlay.png"},{"id":"T03","kind":"text","role":"中部大英文","box":[0,78,113,25],"text":"BULUBLUE","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-23/T03.png","pixels":1533,"underlay":"/layout-reference/ref-23/T03-underlay.png"},{"id":"T04","kind":"text","role":"英文下方四组微字","box":[0,104,109,21],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-23/T04.png","pixels":729,"underlay":"/layout-reference/ref-23/T04-underlay.png"},{"id":"T05","kind":"text","role":"底部三处标签","box":[0,165,105,6],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-23/T05.png","pixels":285,"underlay":"/layout-reference/ref-23/T05-underlay.png"},{"id":"I01","kind":"image","role":"左上方图","box":[5,4,74,68],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-23/I01.png","pixels":5032,"mask":"/layout-reference/ref-23/I01-mask.png"}],"ocr":[{"box":[0.01702461145837529,0.45011763555939854,0.9542548642521016,0.15596627819445708],"confidence":1,"text":"BULUBLUE"}],"verification":{"pixelIdentical":true,"pixels":19608,"unreadableText":4}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,142 +0,0 @@
|
||||
{
|
||||
"id": "ref-23",
|
||||
"name": "上方方图与中部大写英文",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
134,
|
||||
775,
|
||||
114,
|
||||
172
|
||||
],
|
||||
"row": 5,
|
||||
"column": 2
|
||||
},
|
||||
"width": 114,
|
||||
"height": 172,
|
||||
"reference": "/layout-reference/ref-23/source.png",
|
||||
"annotated": "/layout-reference/ref-23/annotated.png",
|
||||
"background": "/layout-reference/ref-23/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "右上标识",
|
||||
"box": [
|
||||
79,
|
||||
0,
|
||||
26,
|
||||
8
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-23/T01.png",
|
||||
"pixels": 85,
|
||||
"underlay": "/layout-reference/ref-23/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "主图下方左右标签",
|
||||
"box": [
|
||||
1,
|
||||
72,
|
||||
78,
|
||||
7
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-23/T02.png",
|
||||
"pixels": 129,
|
||||
"underlay": "/layout-reference/ref-23/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "中部大英文",
|
||||
"box": [
|
||||
0,
|
||||
78,
|
||||
113,
|
||||
25
|
||||
],
|
||||
"text": "BULUBLUE",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-23/T03.png",
|
||||
"pixels": 1533,
|
||||
"underlay": "/layout-reference/ref-23/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "英文下方四组微字",
|
||||
"box": [
|
||||
0,
|
||||
104,
|
||||
109,
|
||||
21
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-23/T04.png",
|
||||
"pixels": 729,
|
||||
"underlay": "/layout-reference/ref-23/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "底部三处标签",
|
||||
"box": [
|
||||
0,
|
||||
165,
|
||||
105,
|
||||
6
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-23/T05.png",
|
||||
"pixels": 285,
|
||||
"underlay": "/layout-reference/ref-23/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "左上方图",
|
||||
"box": [
|
||||
5,
|
||||
4,
|
||||
74,
|
||||
68
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-23/I01.png",
|
||||
"pixels": 5032,
|
||||
"mask": "/layout-reference/ref-23/I01-mask.png"
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.01702461145837529,
|
||||
0.45011763555939854,
|
||||
0.9542548642521016,
|
||||
0.15596627819445708
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "BULUBLUE"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19608,
|
||||
"unreadableText": 4
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-24 · 斜排中文与倾斜装饰线框</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/172;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-24 / 斜排中文与倾斜装饰线框</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-24/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-24/T01" data-kind="text" src="/layout-reference/ref-24/T01.png" alt="蓝羽毛版式" style="left:2.6548672566371683%;top:0%;width:69.91150442477876%;height:18.023255813953487%">
|
||||
<img data-component="ref-24/T02" data-kind="text" src="/layout-reference/ref-24/T02.png" alt="标题下方斜微字（未辨识原字形）" style="left:30.08849557522124%;top:15.69767441860465%;width:23.008849557522122%;height:5.813953488372093%">
|
||||
<img data-component="ref-24/I01" data-kind="image" src="/layout-reference/ref-24/I01.png" alt="" style="left:18.58407079646018%;top:20.930232558139537%;width:60.17699115044248%;height:58.139534883720934%">
|
||||
<img data-component="ref-24/D01" data-kind="decoration" src="/layout-reference/ref-24/D01.png" alt="" style="left:1.7699115044247788%;top:29.651162790697676%;width:12.389380530973451%;height:34.883720930232556%">
|
||||
<img data-component="ref-24/D02" data-kind="decoration" src="/layout-reference/ref-24/D02.png" alt="" style="left:83.1858407079646%;top:8.720930232558139%;width:13.274336283185843%;height:69.18604651162791%">
|
||||
<img data-component="ref-24/D03" data-kind="decoration" src="/layout-reference/ref-24/D03.png" alt="" style="left:11.504424778761061%;top:79.06976744186046%;width:50.442477876106196%;height:13.953488372093023%">
|
||||
<img data-component="ref-24/D04" data-kind="decoration" src="/layout-reference/ref-24/D04.png" alt="" style="left:56.63716814159292%;top:86.62790697674419%;width:37.16814159292036%;height:13.372093023255813%">
|
||||
<img data-component="ref-24/D05" data-kind="decoration" src="/layout-reference/ref-24/D05.png" alt="" style="left:0.8849557522123894%;top:97.67441860465115%;width:30.08849557522124%;height:1.744186046511628%">
|
||||
<img class="overlay" src="/layout-reference/ref-24/annotated.png" alt="构件标注"></div><p class="muted">原图第 5 行、第 3 列；113×172 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 上方斜排标题</td><td>蓝羽毛版式</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 标题下方斜微字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 中央竖向主图</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 左侧斜长线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 右侧斜长线</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 左下斜向线组</td><td>—</td></tr><tr tabindex="0" data-key="D04"><td>D04</td><td>装饰 / 右下斜贴条组</td><td>—</td></tr><tr tabindex="0" data-key="D05"><td>D05</td><td>装饰 / 底边线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-24/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-24/source.png">原裁片</a> · <a href="/layout-reference/ref-24/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-24","name":"斜排中文与倾斜装饰线框","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[256,775,113,172],"row":5,"column":3},"width":113,"height":172,"reference":"/layout-reference/ref-24/source.png","annotated":"/layout-reference/ref-24/annotated.png","background":"/layout-reference/ref-24/background.png","elements":[{"id":"T01","kind":"text","role":"上方斜排标题","box":[3,0,79,31],"text":"蓝羽毛版式","direction":"angled","reading":"verified","asset":"/layout-reference/ref-24/T01.png","pixels":725,"underlay":"/layout-reference/ref-24/T01-underlay.png"},{"id":"T02","kind":"text","role":"标题下方斜微字","box":[34,27,26,10],"text":null,"direction":"angled","reading":"unreadable","asset":"/layout-reference/ref-24/T02.png","pixels":91,"underlay":"/layout-reference/ref-24/T02-underlay.png"},{"id":"I01","kind":"image","role":"中央竖向主图","box":[21,36,68,100],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-24/I01.png","pixels":6799,"mask":"/layout-reference/ref-24/I01-mask.png"},{"id":"D01","kind":"decoration","role":"左侧斜长线","box":[2,51,14,60],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-24/D01.png","pixels":190},{"id":"D02","kind":"decoration","role":"右侧斜长线","box":[94,15,15,119],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-24/D02.png","pixels":624},{"id":"D03","kind":"decoration","role":"左下斜向线组","box":[13,136,57,24],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-24/D03.png","pixels":750},{"id":"D04","kind":"decoration","role":"右下斜贴条组","box":[64,149,42,23],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-24/D04.png","pixels":438},{"id":"D05","kind":"decoration","role":"底边线","box":[1,168,34,3],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-24/D05.png","pixels":68}],"ocr":[{"box":[0.02748666679407777,0.00811422680517071,0.6144820131735113,0.19655708194703103],"confidence":1,"text":"蓝羽毛版式"}],"verification":{"pixelIdentical":true,"pixels":19436,"unreadableText":1}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,171 +0,0 @@
|
||||
{
|
||||
"id": "ref-24",
|
||||
"name": "斜排中文与倾斜装饰线框",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
256,
|
||||
775,
|
||||
113,
|
||||
172
|
||||
],
|
||||
"row": 5,
|
||||
"column": 3
|
||||
},
|
||||
"width": 113,
|
||||
"height": 172,
|
||||
"reference": "/layout-reference/ref-24/source.png",
|
||||
"annotated": "/layout-reference/ref-24/annotated.png",
|
||||
"background": "/layout-reference/ref-24/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "上方斜排标题",
|
||||
"box": [
|
||||
3,
|
||||
0,
|
||||
79,
|
||||
31
|
||||
],
|
||||
"text": "蓝羽毛版式",
|
||||
"direction": "angled",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-24/T01.png",
|
||||
"pixels": 725,
|
||||
"underlay": "/layout-reference/ref-24/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "标题下方斜微字",
|
||||
"box": [
|
||||
34,
|
||||
27,
|
||||
26,
|
||||
10
|
||||
],
|
||||
"text": null,
|
||||
"direction": "angled",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-24/T02.png",
|
||||
"pixels": 91,
|
||||
"underlay": "/layout-reference/ref-24/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "中央竖向主图",
|
||||
"box": [
|
||||
21,
|
||||
36,
|
||||
68,
|
||||
100
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-24/I01.png",
|
||||
"pixels": 6799,
|
||||
"mask": "/layout-reference/ref-24/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "左侧斜长线",
|
||||
"box": [
|
||||
2,
|
||||
51,
|
||||
14,
|
||||
60
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-24/D01.png",
|
||||
"pixels": 190
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "右侧斜长线",
|
||||
"box": [
|
||||
94,
|
||||
15,
|
||||
15,
|
||||
119
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-24/D02.png",
|
||||
"pixels": 624
|
||||
},
|
||||
{
|
||||
"id": "D03",
|
||||
"kind": "decoration",
|
||||
"role": "左下斜向线组",
|
||||
"box": [
|
||||
13,
|
||||
136,
|
||||
57,
|
||||
24
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-24/D03.png",
|
||||
"pixels": 750
|
||||
},
|
||||
{
|
||||
"id": "D04",
|
||||
"kind": "decoration",
|
||||
"role": "右下斜贴条组",
|
||||
"box": [
|
||||
64,
|
||||
149,
|
||||
42,
|
||||
23
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-24/D04.png",
|
||||
"pixels": 438
|
||||
},
|
||||
{
|
||||
"id": "D05",
|
||||
"kind": "decoration",
|
||||
"role": "底边线",
|
||||
"box": [
|
||||
1,
|
||||
168,
|
||||
34,
|
||||
3
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-24/D05.png",
|
||||
"pixels": 68
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.02748666679407777,
|
||||
0.00811422680517071,
|
||||
0.6144820131735113,
|
||||
0.19655708194703103
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "蓝羽毛版式"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19436,
|
||||
"unreadableText": 1
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-25 · 左侧竖题与右下方形主图</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-25 / 左侧竖题与右下方形主图</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-25/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-25/T01" data-kind="text" src="/layout-reference/ref-25/T01.png" alt="高级·版式" style="left:7.079646017699115%;top:22.54335260115607%;width:7.079646017699115%;height:26.589595375722542%">
|
||||
<img data-component="ref-25/T02" data-kind="text" src="/layout-reference/ref-25/T02.png" alt="左侧辅助竖字（未辨识原字形）" style="left:17.699115044247787%;top:23.699421965317917%;width:4.424778761061947%;height:12.138728323699421%">
|
||||
<img data-component="ref-25/T03" data-kind="text" src="/layout-reference/ref-25/T03.png" alt="右中说明（未辨识原字形）" style="left:78.76106194690266%;top:24.277456647398843%;width:19.469026548672566%;height:29.47976878612717%">
|
||||
<img data-component="ref-25/T04" data-kind="text" src="/layout-reference/ref-25/T04.png" alt="左下边缘说明（未辨识原字形）" style="left:13.274336283185843%;top:76.30057803468208%;width:0.8849557522123894%;height:6.358381502890173%">
|
||||
<img data-component="ref-25/I01" data-kind="image" src="/layout-reference/ref-25/I01.png" alt="" style="left:12.389380530973451%;top:58.95953757225434%;width:83.1858407079646%;height:37.57225433526011%">
|
||||
<img data-component="ref-25/D01" data-kind="decoration" src="/layout-reference/ref-25/D01.png" alt="" style="left:3.5398230088495577%;top:0.5780346820809248%;width:34.51327433628318%;height:9.826589595375722%">
|
||||
<img class="overlay" src="/layout-reference/ref-25/annotated.png" alt="构件标注"></div><p class="muted">原图第 5 行、第 4 列；113×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 左侧竖题</td><td>高级·版式</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 左侧辅助竖字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 右中说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 左下边缘说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 右下主图</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 左上阶梯横线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-25/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-25/source.png">原裁片</a> · <a href="/layout-reference/ref-25/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-25","name":"左侧竖题与右下方形主图","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[376,774,113,173],"row":5,"column":4},"width":113,"height":173,"reference":"/layout-reference/ref-25/source.png","annotated":"/layout-reference/ref-25/annotated.png","background":"/layout-reference/ref-25/background.png","elements":[{"id":"T01","kind":"text","role":"左侧竖题","box":[8,39,8,46],"text":"高级·版式","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-25/T01.png","pixels":233,"underlay":"/layout-reference/ref-25/T01-underlay.png"},{"id":"T02","kind":"text","role":"左侧辅助竖字","box":[20,41,5,21],"text":null,"direction":"vertical","reading":"unreadable","asset":"/layout-reference/ref-25/T02.png","pixels":51,"underlay":"/layout-reference/ref-25/T02-underlay.png"},{"id":"T03","kind":"text","role":"右中说明","box":[89,42,22,51],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-25/T03.png","pixels":397,"underlay":"/layout-reference/ref-25/T03-underlay.png"},{"id":"T04","kind":"text","role":"左下边缘说明","box":[15,132,1,11],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-25/T04.png","pixels":3,"underlay":"/layout-reference/ref-25/T04-underlay.png"},{"id":"I01","kind":"image","role":"右下主图","box":[14,102,94,65],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-25/I01.png","pixels":6010,"mask":"/layout-reference/ref-25/I01-mask.png"},{"id":"D01","kind":"decoration","role":"左上阶梯横线","box":[4,1,39,17],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-25/D01.png","pixels":481}],"ocr":[{"box":[0.06489673813555782,0.23121387201950871,0.08259590677807113,0.2601156069364161],"confidence":0.30000001192092896,"text":"高設•版式"}],"verification":{"pixelIdentical":true,"pixels":19549,"unreadableText":3}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,141 +0,0 @@
|
||||
{
|
||||
"id": "ref-25",
|
||||
"name": "左侧竖题与右下方形主图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
376,
|
||||
774,
|
||||
113,
|
||||
173
|
||||
],
|
||||
"row": 5,
|
||||
"column": 4
|
||||
},
|
||||
"width": 113,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-25/source.png",
|
||||
"annotated": "/layout-reference/ref-25/annotated.png",
|
||||
"background": "/layout-reference/ref-25/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "左侧竖题",
|
||||
"box": [
|
||||
8,
|
||||
39,
|
||||
8,
|
||||
46
|
||||
],
|
||||
"text": "高级·版式",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-25/T01.png",
|
||||
"pixels": 233,
|
||||
"underlay": "/layout-reference/ref-25/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "左侧辅助竖字",
|
||||
"box": [
|
||||
20,
|
||||
41,
|
||||
5,
|
||||
21
|
||||
],
|
||||
"text": null,
|
||||
"direction": "vertical",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-25/T02.png",
|
||||
"pixels": 51,
|
||||
"underlay": "/layout-reference/ref-25/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "右中说明",
|
||||
"box": [
|
||||
89,
|
||||
42,
|
||||
22,
|
||||
51
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-25/T03.png",
|
||||
"pixels": 397,
|
||||
"underlay": "/layout-reference/ref-25/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "左下边缘说明",
|
||||
"box": [
|
||||
15,
|
||||
132,
|
||||
1,
|
||||
11
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-25/T04.png",
|
||||
"pixels": 3,
|
||||
"underlay": "/layout-reference/ref-25/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "右下主图",
|
||||
"box": [
|
||||
14,
|
||||
102,
|
||||
94,
|
||||
65
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-25/I01.png",
|
||||
"pixels": 6010,
|
||||
"mask": "/layout-reference/ref-25/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "左上阶梯横线",
|
||||
"box": [
|
||||
4,
|
||||
1,
|
||||
39,
|
||||
17
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-25/D01.png",
|
||||
"pixels": 481
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.06489673813555782,
|
||||
0.23121387201950871,
|
||||
0.08259590677807113,
|
||||
0.2601156069364161
|
||||
],
|
||||
"confidence": 0.30000001192092896,
|
||||
"text": "高設•版式"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19549,
|
||||
"unreadableText": 3
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-26 · 三行英文与曲线指引小图</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:114/173;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-26 / 三行英文与曲线指引小图</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-26/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-26/D01" data-kind="decoration" src="/layout-reference/ref-26/D01.png" alt="" style="left:0%;top:23.699421965317917%;width:41.228070175438596%;height:0.5780346820809248%">
|
||||
<img data-component="ref-26/D02" data-kind="decoration" src="/layout-reference/ref-26/D02.png" alt="" style="left:0%;top:33.52601156069364%;width:58.77192982456141%;height:1.1560693641618496%">
|
||||
<img data-component="ref-26/T01" data-kind="text" src="/layout-reference/ref-26/T01.png" alt="Format 58" style="left:0%;top:0%;width:71.05263157894737%;height:10.404624277456648%">
|
||||
<img data-component="ref-26/T02" data-kind="text" src="/layout-reference/ref-26/T02.png" alt="Bulubl" style="left:0%;top:13.294797687861271%;width:42.98245614035088%;height:10.404624277456648%">
|
||||
<img data-component="ref-26/T03" data-kind="text" src="/layout-reference/ref-26/T03.png" alt="Bulublue" style="left:0%;top:23.699421965317917%;width:59.64912280701754%;height:10.982658959537572%">
|
||||
<img data-component="ref-26/T04" data-kind="text" src="/layout-reference/ref-26/T04.png" alt="高级版式" style="left:85.96491228070175%;top:39.30635838150289%;width:10.526315789473683%;height:26.589595375722542%">
|
||||
<img data-component="ref-26/T05" data-kind="text" src="/layout-reference/ref-26/T05.png" alt="左下说明（未辨识原字形）" style="left:3.508771929824561%;top:80.92485549132948%;width:38.59649122807017%;height:16.76300578034682%">
|
||||
<img data-component="ref-26/I01" data-kind="image" src="/layout-reference/ref-26/I01.png" alt="" style="left:57.89473684210527%;top:68.20809248554913%;width:37.719298245614034%;height:28.901734104046245%">
|
||||
<img data-component="ref-26/D03" data-kind="decoration" src="/layout-reference/ref-26/D03.png" alt="" style="left:0%;top:34.68208092485549%;width:98.24561403508771%;height:1.7341040462427744%">
|
||||
<img data-component="ref-26/D04" data-kind="decoration" src="/layout-reference/ref-26/D04.png" alt="" style="left:5.263157894736842%;top:27.74566473988439%;width:74.56140350877193%;height:50.28901734104046%">
|
||||
<img data-component="ref-26/D05" data-kind="decoration" src="/layout-reference/ref-26/D05.png" alt="" style="left:79.82456140350878%;top:34.104046242774565%;width:16.666666666666664%;height:0.5780346820809248%">
|
||||
<img class="overlay" src="/layout-reference/ref-26/annotated.png" alt="构件标注"></div><p class="muted">原图第 5 行、第 5 列；114×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 第二行下划线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 第三行下划线</td><td>—</td></tr><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 第一行英文</td><td>Format 58</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 第二行英文</td><td>Bulubl</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 第三行英文</td><td>Bulublue</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 右侧竖排标题</td><td>高级版式</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 左下说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 右下方形图片</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 中间分隔线</td><td>—</td></tr><tr tabindex="0" data-key="D04"><td>D04</td><td>装饰 / 中央自由曲线</td><td>—</td></tr><tr tabindex="0" data-key="D05"><td>D05</td><td>装饰 / 自动识别细线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-26/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-26/source.png">原裁片</a> · <a href="/layout-reference/ref-26/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-26","name":"三行英文与曲线指引小图","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[496,774,114,173],"row":5,"column":5},"width":114,"height":173,"reference":"/layout-reference/ref-26/source.png","annotated":"/layout-reference/ref-26/annotated.png","background":"/layout-reference/ref-26/background.png","elements":[{"id":"D01","kind":"decoration","role":"第二行下划线","box":[0,41,47,1],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-26/D01.png","pixels":7},{"id":"D02","kind":"decoration","role":"第三行下划线","box":[0,58,67,2],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-26/D02.png","pixels":134},{"id":"T01","kind":"text","role":"第一行英文","box":[0,0,81,18],"text":"Format 58","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-26/T01.png","pixels":657,"underlay":"/layout-reference/ref-26/T01-underlay.png"},{"id":"T02","kind":"text","role":"第二行英文","box":[0,23,49,18],"text":"Bulubl","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-26/T02.png","pixels":433,"underlay":"/layout-reference/ref-26/T02-underlay.png"},{"id":"T03","kind":"text","role":"第三行英文","box":[0,41,68,19],"text":"Bulublue","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-26/T03.png","pixels":574,"underlay":"/layout-reference/ref-26/T03-underlay.png"},{"id":"T04","kind":"text","role":"右侧竖排标题","box":[98,68,12,46],"text":"高级版式","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-26/T04.png","pixels":374,"underlay":"/layout-reference/ref-26/T04-underlay.png"},{"id":"T05","kind":"text","role":"左下说明","box":[4,140,44,29],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-26/T05.png","pixels":888,"underlay":"/layout-reference/ref-26/T05-underlay.png"},{"id":"I01","kind":"image","role":"右下方形图片","box":[66,118,43,50],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-26/I01.png","pixels":2150,"mask":"/layout-reference/ref-26/I01-mask.png"},{"id":"D03","kind":"decoration","role":"中间分隔线","box":[0,60,112,3],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-26/D03.png","pixels":230},{"id":"D04","kind":"decoration","role":"中央自由曲线","box":[6,48,85,87],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-26/D04.png","pixels":534},{"id":"D05","kind":"decoration","role":"自动识别细线","box":[91,59,19,1],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-26/D05.png","pixels":19}],"ocr":[{"box":[0.011695904385964868,0.017341040546724473,0.6549707602339181,0.07707129094412335],"confidence":0.5,"text":"Format 58"},{"box":[0.01461988470535311,0.14065510587668595,0.4327485380116959,0.08285163776493254],"confidence":0.5,"text":"Bulubl"},{"box":[0.017385159403405345,0.23650755152999758,0.5821887456882767,0.08382497357495267],"confidence":1,"text":"Bulublue"}],"verification":{"pixelIdentical":true,"pixels":19722,"unreadableText":1}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,242 +0,0 @@
|
||||
{
|
||||
"id": "ref-26",
|
||||
"name": "三行英文与曲线指引小图",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
496,
|
||||
774,
|
||||
114,
|
||||
173
|
||||
],
|
||||
"row": 5,
|
||||
"column": 5
|
||||
},
|
||||
"width": 114,
|
||||
"height": 173,
|
||||
"reference": "/layout-reference/ref-26/source.png",
|
||||
"annotated": "/layout-reference/ref-26/annotated.png",
|
||||
"background": "/layout-reference/ref-26/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "第二行下划线",
|
||||
"box": [
|
||||
0,
|
||||
41,
|
||||
47,
|
||||
1
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-26/D01.png",
|
||||
"pixels": 7
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "第三行下划线",
|
||||
"box": [
|
||||
0,
|
||||
58,
|
||||
67,
|
||||
2
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-26/D02.png",
|
||||
"pixels": 134
|
||||
},
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "第一行英文",
|
||||
"box": [
|
||||
0,
|
||||
0,
|
||||
81,
|
||||
18
|
||||
],
|
||||
"text": "Format 58",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-26/T01.png",
|
||||
"pixels": 657,
|
||||
"underlay": "/layout-reference/ref-26/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "第二行英文",
|
||||
"box": [
|
||||
0,
|
||||
23,
|
||||
49,
|
||||
18
|
||||
],
|
||||
"text": "Bulubl",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-26/T02.png",
|
||||
"pixels": 433,
|
||||
"underlay": "/layout-reference/ref-26/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "第三行英文",
|
||||
"box": [
|
||||
0,
|
||||
41,
|
||||
68,
|
||||
19
|
||||
],
|
||||
"text": "Bulublue",
|
||||
"direction": "horizontal",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-26/T03.png",
|
||||
"pixels": 574,
|
||||
"underlay": "/layout-reference/ref-26/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T04",
|
||||
"kind": "text",
|
||||
"role": "右侧竖排标题",
|
||||
"box": [
|
||||
98,
|
||||
68,
|
||||
12,
|
||||
46
|
||||
],
|
||||
"text": "高级版式",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-26/T04.png",
|
||||
"pixels": 374,
|
||||
"underlay": "/layout-reference/ref-26/T04-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T05",
|
||||
"kind": "text",
|
||||
"role": "左下说明",
|
||||
"box": [
|
||||
4,
|
||||
140,
|
||||
44,
|
||||
29
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-26/T05.png",
|
||||
"pixels": 888,
|
||||
"underlay": "/layout-reference/ref-26/T05-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "右下方形图片",
|
||||
"box": [
|
||||
66,
|
||||
118,
|
||||
43,
|
||||
50
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-26/I01.png",
|
||||
"pixels": 2150,
|
||||
"mask": "/layout-reference/ref-26/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D03",
|
||||
"kind": "decoration",
|
||||
"role": "中间分隔线",
|
||||
"box": [
|
||||
0,
|
||||
60,
|
||||
112,
|
||||
3
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-26/D03.png",
|
||||
"pixels": 230
|
||||
},
|
||||
{
|
||||
"id": "D04",
|
||||
"kind": "decoration",
|
||||
"role": "中央自由曲线",
|
||||
"box": [
|
||||
6,
|
||||
48,
|
||||
85,
|
||||
87
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-26/D04.png",
|
||||
"pixels": 534
|
||||
},
|
||||
{
|
||||
"id": "D05",
|
||||
"kind": "decoration",
|
||||
"role": "自动识别细线",
|
||||
"box": [
|
||||
91,
|
||||
59,
|
||||
19,
|
||||
1
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-26/D05.png",
|
||||
"pixels": 19
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
0.011695904385964868,
|
||||
0.017341040546724473,
|
||||
0.6549707602339181,
|
||||
0.07707129094412335
|
||||
],
|
||||
"confidence": 0.5,
|
||||
"text": "Format 58"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.01461988470535311,
|
||||
0.14065510587668595,
|
||||
0.4327485380116959,
|
||||
0.08285163776493254
|
||||
],
|
||||
"confidence": 0.5,
|
||||
"text": "Bulubl"
|
||||
},
|
||||
{
|
||||
"box": [
|
||||
0.017385159403405345,
|
||||
0.23650755152999758,
|
||||
0.5821887456882767,
|
||||
0.08382497357495267
|
||||
],
|
||||
"confidence": 1,
|
||||
"text": "Bulublue"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19722,
|
||||
"unreadableText": 1
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-27 · 对角双区与斜向文字带</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:112/172;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-27 / 对角双区与斜向文字带</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-27/background.png" alt="原图纸底与画框">
|
||||
<img data-component="ref-27/T01" data-kind="text" src="/layout-reference/ref-27/T01.png" alt="高级の版式" style="left:5.357142857142857%;top:4.069767441860465%;width:10.714285714285714%;height:50%">
|
||||
<img data-component="ref-27/T02" data-kind="text" src="/layout-reference/ref-27/T02.png" alt="蓝羽毛·版式" style="left:2.6785714285714284%;top:44.76744186046512%;width:97.32142857142857%;height:21.511627906976745%">
|
||||
<img data-component="ref-27/T03" data-kind="text" src="/layout-reference/ref-27/T03.png" alt="底部说明（未辨识原字形）" style="left:0%;top:91.27906976744185%;width:100%;height:8.720930232558139%">
|
||||
<img data-component="ref-27/I01" data-kind="image" src="/layout-reference/ref-27/I01.png" alt="" style="left:0.8928571428571428%;top:0.5813953488372093%;width:96.42857142857143%;height:51.74418604651163%">
|
||||
<img data-component="ref-27/I02" data-kind="image" src="/layout-reference/ref-27/I02.png" alt="" style="left:0.8928571428571428%;top:52.90697674418605%;width:96.42857142857143%;height:39.53488372093023%">
|
||||
<img data-component="ref-27/D01" data-kind="decoration" src="/layout-reference/ref-27/D01.png" alt="" style="left:54.46428571428571%;top:0%;width:42.857142857142854%;height:11.627906976744185%">
|
||||
<img data-component="ref-27/D02" data-kind="decoration" src="/layout-reference/ref-27/D02.png" alt="" style="left:0%;top:41.86046511627907%;width:100%;height:23.25581395348837%">
|
||||
<img data-component="ref-27/D03" data-kind="decoration" src="/layout-reference/ref-27/D03.png" alt="" style="left:0%;top:84.30232558139535%;width:37.5%;height:8.720930232558139%">
|
||||
<img class="overlay" src="/layout-reference/ref-27/annotated.png" alt="构件标注"></div><p class="muted">原图第 5 行、第 6 列；112×172 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 左侧白色竖题</td><td>高级の版式</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 中部斜向文字</td><td>蓝羽毛·版式</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 底部说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 上方三角出血图</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 下方斜切图</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 顶部右阶梯横线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 中部斜向浅带</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 左下阶梯横线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-27/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-27/source.png">原裁片</a> · <a href="/layout-reference/ref-27/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest={"id":"ref-27","name":"对角双区与斜向文字带","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[618,774,112,172],"row":5,"column":6},"width":112,"height":172,"reference":"/layout-reference/ref-27/source.png","annotated":"/layout-reference/ref-27/annotated.png","background":"/layout-reference/ref-27/background.png","elements":[{"id":"T01","kind":"text","role":"左侧白色竖题","box":[6,7,12,86],"text":"高级の版式","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-27/T01.png","pixels":396,"underlay":"/layout-reference/ref-27/T01-underlay.png"},{"id":"T02","kind":"text","role":"中部斜向文字","box":[3,77,109,37],"text":"蓝羽毛·版式","direction":"angled","reading":"verified","asset":"/layout-reference/ref-27/T02.png","pixels":273,"underlay":"/layout-reference/ref-27/T02-underlay.png"},{"id":"T03","kind":"text","role":"底部说明","box":[0,157,112,15],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-27/T03.png","pixels":865,"underlay":"/layout-reference/ref-27/T03-underlay.png"},{"id":"I01","kind":"image","role":"上方三角出血图","box":[1,1,108,89],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-27/I01.png","pixels":6738,"mask":"/layout-reference/ref-27/I01-mask.png"},{"id":"I02","kind":"image","role":"下方斜切图","box":[1,91,108,68],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-27/I02.png","pixels":4949,"mask":"/layout-reference/ref-27/I02-mask.png"},{"id":"D01","kind":"decoration","role":"顶部右阶梯横线","box":[61,0,48,20],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-27/D01.png","pixels":581},{"id":"D02","kind":"decoration","role":"中部斜向浅带","box":[0,72,112,40],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-27/D02.png","pixels":2000},{"id":"D03","kind":"decoration","role":"左下阶梯横线","box":[0,145,42,15],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-27/D03.png","pixels":391}],"ocr":[{"box":[-0.021385720300243924,0.4385955087605439,0.8388941628592355,0.20254762043324548],"confidence":0.5,"text":"蓝羽毛-版式"}],"verification":{"pixelIdentical":true,"pixels":19264,"unreadableText":1}};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>
|
||||
@@ -1,173 +0,0 @@
|
||||
{
|
||||
"id": "ref-27",
|
||||
"name": "对角双区与斜向文字带",
|
||||
"source": {
|
||||
"url": "/layout-reference/source.png",
|
||||
"sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
|
||||
"box": [
|
||||
618,
|
||||
774,
|
||||
112,
|
||||
172
|
||||
],
|
||||
"row": 5,
|
||||
"column": 6
|
||||
},
|
||||
"width": 112,
|
||||
"height": 172,
|
||||
"reference": "/layout-reference/ref-27/source.png",
|
||||
"annotated": "/layout-reference/ref-27/annotated.png",
|
||||
"background": "/layout-reference/ref-27/background.png",
|
||||
"elements": [
|
||||
{
|
||||
"id": "T01",
|
||||
"kind": "text",
|
||||
"role": "左侧白色竖题",
|
||||
"box": [
|
||||
6,
|
||||
7,
|
||||
12,
|
||||
86
|
||||
],
|
||||
"text": "高级の版式",
|
||||
"direction": "vertical",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-27/T01.png",
|
||||
"pixels": 396,
|
||||
"underlay": "/layout-reference/ref-27/T01-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T02",
|
||||
"kind": "text",
|
||||
"role": "中部斜向文字",
|
||||
"box": [
|
||||
3,
|
||||
77,
|
||||
109,
|
||||
37
|
||||
],
|
||||
"text": "蓝羽毛·版式",
|
||||
"direction": "angled",
|
||||
"reading": "verified",
|
||||
"asset": "/layout-reference/ref-27/T02.png",
|
||||
"pixels": 273,
|
||||
"underlay": "/layout-reference/ref-27/T02-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "T03",
|
||||
"kind": "text",
|
||||
"role": "底部说明",
|
||||
"box": [
|
||||
0,
|
||||
157,
|
||||
112,
|
||||
15
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "unreadable",
|
||||
"asset": "/layout-reference/ref-27/T03.png",
|
||||
"pixels": 865,
|
||||
"underlay": "/layout-reference/ref-27/T03-underlay.png"
|
||||
},
|
||||
{
|
||||
"id": "I01",
|
||||
"kind": "image",
|
||||
"role": "上方三角出血图",
|
||||
"box": [
|
||||
1,
|
||||
1,
|
||||
108,
|
||||
89
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-27/I01.png",
|
||||
"pixels": 6738,
|
||||
"mask": "/layout-reference/ref-27/I01-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "I02",
|
||||
"kind": "image",
|
||||
"role": "下方斜切图",
|
||||
"box": [
|
||||
1,
|
||||
91,
|
||||
108,
|
||||
68
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-27/I02.png",
|
||||
"pixels": 4949,
|
||||
"mask": "/layout-reference/ref-27/I02-mask.png"
|
||||
},
|
||||
{
|
||||
"id": "D01",
|
||||
"kind": "decoration",
|
||||
"role": "顶部右阶梯横线",
|
||||
"box": [
|
||||
61,
|
||||
0,
|
||||
48,
|
||||
20
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-27/D01.png",
|
||||
"pixels": 581
|
||||
},
|
||||
{
|
||||
"id": "D02",
|
||||
"kind": "decoration",
|
||||
"role": "中部斜向浅带",
|
||||
"box": [
|
||||
0,
|
||||
72,
|
||||
112,
|
||||
40
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-27/D02.png",
|
||||
"pixels": 2000
|
||||
},
|
||||
{
|
||||
"id": "D03",
|
||||
"kind": "decoration",
|
||||
"role": "左下阶梯横线",
|
||||
"box": [
|
||||
0,
|
||||
145,
|
||||
42,
|
||||
15
|
||||
],
|
||||
"text": null,
|
||||
"direction": "horizontal",
|
||||
"reading": "not-text",
|
||||
"asset": "/layout-reference/ref-27/D03.png",
|
||||
"pixels": 391
|
||||
}
|
||||
],
|
||||
"ocr": [
|
||||
{
|
||||
"box": [
|
||||
-0.021385720300243924,
|
||||
0.4385955087605439,
|
||||
0.8388941628592355,
|
||||
0.20254762043324548
|
||||
],
|
||||
"confidence": 0.5,
|
||||
"text": "蓝羽毛-版式"
|
||||
}
|
||||
],
|
||||
"verification": {
|
||||
"pixelIdentical": true,
|
||||
"pixels": 19264,
|
||||
"unreadableText": 1
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import {readFile,writeFile,mkdir} from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import layouts from '../src/content/layouts/reference/manifest.json';
|
||||
const root=path.resolve(import.meta.dirname,'..'),target=path.join(root,'public/layout-reference');
|
||||
const esc=(s:string)=>s.replaceAll('&','&').replaceAll('<','<').replaceAll('"','"');
|
||||
async function main(){
|
||||
await writeFile(path.join(target,'manifest.json'),JSON.stringify(layouts,null,2)+'\n');
|
||||
const runtime=await readFile(path.join(root,'src/content/layouts/reference/ReferenceLayout.tsx'),'utf8');await writeFile(path.join(target,'ReferenceLayout.tsx'),runtime);
|
||||
for(const l of layouts){
|
||||
const layers=l.elements.map(e=>{const[x,y,w,h]=e.box;return `<img data-component="${l.id}/${e.id}" data-kind="${e.kind}" src="${e.asset}" alt="${esc(e.kind==='text'?e.text||e.role+'（未辨识原字形）':'')}" style="left:${x/l.width*100}%;top:${y/l.height*100}%;width:${w/l.width*100}%;height:${h/l.height*100}%">`}).join('\n');
|
||||
const html=`<!doctype html>\n<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${l.id} · ${l.name}</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:${l.width}/${l.height};background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>${l.id} / ${l.name}</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="${l.background}" alt="原图纸底与画框">\n${layers}\n<img class="overlay" src="${l.annotated}" alt="构件标注"></div><p class="muted">原图第 ${l.source.row} 行、第 ${l.source.column} 列；${l.width}×${l.height} 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody>${l.elements.map(e=>`<tr tabindex="0" data-key="${e.id}"><td>${e.id}</td><td>${e.kind==='text'?'文字':e.kind==='image'?'图片占位/色块':'装饰'} / ${esc(e.role)}</td><td>${esc(e.kind==='text'?e.text??'待核对，保留原字形':'—')}</td></tr>`).join('')}</tbody></table><p><a href="/layout-reference/${l.id}/manifest.json">构件 JSON</a> · <a href="${l.reference}">原裁片</a> · <a href="${l.annotated}">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||||
const manifest=${JSON.stringify(l).replaceAll('<','\\u003c')};
|
||||
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
||||
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
||||
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
||||
</script></body></html>\n`;
|
||||
await writeFile(path.join(target,l.id,'index.html'),html);
|
||||
}
|
||||
await writeFile(path.join(target,'index.html'),`<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>27 张原图版面索引</title><style>body{font:16px/1.6 system-ui;background:#eee;padding:24px}nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px}a{color:#222;text-decoration:none;background:#fff;padding:12px}img{width:100%;aspect-ratio:113/173;object-fit:contain}small{display:block}</style><h1>27 张原图版面 · 一一对应</h1><p>按原图从上到下、每行从左到右编号，排除左侧说明栏。点击每张可分开检查文字、图片占位/色块与装饰。</p><p><a href="/layout-reference/numbered-source.png">查看编号原图</a> · <a href="/layout-reference/index.json">机器索引</a></p><nav>${layouts.map(l=>`<a href="/layout-reference/${l.id}/index.html"><img src="${l.reference}" alt="${l.id} 原裁片"><b>${l.id}</b><small>${esc(l.name)}</small><small>原图 ${l.source.row} 行 ${l.source.column} 列</small></a>`).join('')}</nav></html>\n`);
|
||||
console.log('Built 27 layer inspectors and the source ID index.');
|
||||
}
|
||||
main().catch(e=>{console.error(e);process.exitCode=1});
|
||||
@@ -1,19 +0,0 @@
|
||||
import {readFile,writeFile,mkdir,cp,rm} from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import {spawnSync} from 'node:child_process';
|
||||
import {tmpdir} from 'node:os';
|
||||
import {guidanceMarkdown} from '../src/content/skills/guidance';
|
||||
import {layouts,nextExample} from '../src/content/layouts/documents';
|
||||
async function main(){
|
||||
const root=path.resolve(import.meta.dirname,'..'),stage=path.join(tmpdir(),'prompt-layout-reference-toolkit');await rm(stage,{recursive:true,force:true});await mkdir(stage,{recursive:true});
|
||||
const put=async(name:string,text:string)=>{const file=path.join(stage,name);await mkdir(path.dirname(file),{recursive:true});await writeFile(file,text+'\n')};
|
||||
await cp(path.join(root,'public/layout-reference'),path.join(stage,'public/layout-reference'),{recursive:true,filter:source=>!source.endsWith('.zip')});
|
||||
for(const file of ['ReferenceLayout.tsx','manifest.json'])await put('components/reference-layouts/'+file,await readFile(path.join(root,'src/content/layouts/reference',file),'utf8'));
|
||||
for(const l of layouts){await put('documents/'+l.id+'.md',guidanceMarkdown('premium-layout/'+l.id)!);await put('app/designs/'+l.id+'/page.tsx',nextExample(l.id))}
|
||||
await put('documents/router.md',guidanceMarkdown('premium-layout/router')!);
|
||||
await put('app/layout.tsx',`import type {ReactNode} from 'react';\nexport default function RootLayout({children}:{children:ReactNode}){return <html lang="zh-CN"><body>{children}</body></html>}`);
|
||||
await put('README.md',`# 27 张原图一一对应排版\n\n先读 documents/router.md，再选定 ref-01 至 ref-27 中的固定 ID。\n\n原始参考拼图是 736×980，每张约 112×173；素材保留原像素，不能恢复缺失的小字。默认 ReferenceLayout 逐层重组原图；文字仍是分类明确的原字形资产，不是已恢复成精确字体的矢量文字。text 属性可按完整构件键替换为 DOM 文本，未辨识细字不要猜写。\n\nHTML 检查器位于 public/layout-reference/index.html，需要通过静态服务器提供 public 目录。React 项目将 components 和 public 素材合入现有项目；Next.js 项目同时可使用 app/designs 下各个固定路由页。已有根布局应合并，不覆盖；@/ 指向源码根。\n\n包中没有 package.json，供合入现有 React / Next.js 项目。保留 manifest.json 与所有素材的相对路径。调用 ref-01 时只允许 ref-01/Txx 和 ref-01/Ixx；组件会验证类型与归属。弧形文字替换须专门建立该版面的 SVG 文字路径，通用组件会拒绝直接改成横排。\n\n原作者与素材许可未提供；本包用于用户提供参考图的识别、设计分析与原图对照，不声明模板所有权。\n`);
|
||||
const result=spawnSync('python3',['-c',`import pathlib,zipfile,sys\nroot=pathlib.Path(sys.argv[1]);out=pathlib.Path(sys.argv[2])\nwith zipfile.ZipFile(out,'w',zipfile.ZIP_DEFLATED) as z:\n for p in sorted(root.rglob('*')):\n if p.is_file():z.write(p,p.relative_to(root))`,stage,path.join(root,'public/layout-reference/layout-reference-toolkit.zip')],{stdio:'inherit'});
|
||||
if(result.status!==0)throw Error('ZIP packaging failed');console.log('Packaged 27 layouts, 28 documents, React, Next.js and classified source assets.');
|
||||
}
|
||||
main().catch(e=>{console.error(e);process.exitCode=1});
|
||||
@@ -1,52 +0,0 @@
|
||||
import layouts from './reference/manifest.json';
|
||||
import type {Block} from '../skills/catalog';
|
||||
import type {GuidanceDocument,GuidanceResource} from '../skills/guidance';
|
||||
import {guidanceUrl} from '../page-links';
|
||||
export {layouts};
|
||||
const p=(text:string):Block=>({type:'paragraph',text});
|
||||
const h=(text:string):Block=>({type:'heading',text});
|
||||
const code=(text:string):Block=>({type:'code',text});
|
||||
const links=(...refs:string[]):Block=>({type:'links',refs});
|
||||
const doc=(id:string,title:string):GuidanceResource=>({id,kind:'document',title,documentPath:'premium-layout/'+id,href:guidanceUrl('premium-layout/'+id)+'?agent_mode=True',human:guidanceUrl('premium-layout/'+id)});
|
||||
const file=(id:string,title:string,href:string):GuidanceResource=>({id,kind:'document',title,href});
|
||||
const image=(id:string,title:string,href:string):GuidanceResource=>({id,kind:'image',title,href});
|
||||
const typeName=(kind:string)=>kind==='text'?'文字':kind==='image'?'图片占位 / 色块':'装饰';
|
||||
const sourceNote='原始拼图仅 736×980，每张约 112×173 像素。小字无法可靠辨认；其内容标为待核对，并保存独立原字形图层。放大不会恢复缺失信息。灰绿色区域为原设计中的图片占位 / 色块，参考图没有可辨认的真实照片。';
|
||||
export const legacyLayoutIds=['5971fc3d2563aa8005df5c13','9ad47529a7eaeee1fef771ca','7f158059ba3a2b80dd750cc3','370d1881f229af63f1946df9','31a978620a0d388f84772c95','c34cf81137654ad38850c9bd','dbe94ccaa708bd120549ae86','768587e537d6f1ee77a51961','0962c2bf1c558e0e32425f59','347b732caa4af4afa43b65a4','3edf144a443c1fdf23827fb3','97227671a9dc95c4948e591b'];
|
||||
export function reactExample(id:string){return `// components/Example.tsx\nimport ReferenceLayout from './reference-layouts/ReferenceLayout';\nexport default function Example() {\n return <ReferenceLayout id="${id}" />;\n}\n// 原样模式使用该 ID 的独立图层，保留原字形与原构图。\n// 组件、manifest.json 和 public/layout-reference 素材必须一起复制。`}
|
||||
export function nextExample(id:string){return `// app/designs/${id}/page.tsx\nimport type { Metadata } from 'next';\nimport ReferenceLayout from '@/components/reference-layouts/ReferenceLayout';\nexport const metadata: Metadata = {title:'${id} · 原图对应排版'};\nexport default function Page() {\n return <main><ReferenceLayout id="${id}" /></main>;\n}\n// 沿用项目根布局。@/ 指向源码根，组件可直接作为 Server Component。`}
|
||||
export function htmlExample(id:string){return `<!doctype html>\n<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${id}</title>\n<style>body{margin:0}.canvas{margin:0;position:relative;width:min(100%,672px);background:#f4f3ee}.canvas img{position:absolute;display:block}</style></head>\n<body><figure id="canvas" class="canvas" aria-label="${id} 原图构件重组"></figure>\n<script type="module">\nconst id='${id}';\nconst response=await fetch('/layout-reference/'+id+'/manifest.json');\nif(!response.ok)throw Error('构件清单未加载');\nconst m=await response.json();\nif(m.id!==id)throw Error('版面 ID 不一致');\nconst canvas=document.getElementById('canvas');\ncanvas.style.aspectRatio=m.width+'/'+m.height;\nconst bg=document.createElement('img');bg.src=m.background;bg.alt='';bg.style.cssText='inset:0;width:100%;height:100%';canvas.append(bg);\nfor(const e of m.elements){\n const [x,y,w,h]=e.box;const img=document.createElement('img');\n img.src=e.asset;img.dataset.component=id+'/'+e.id;img.dataset.kind=e.kind;\n img.alt=e.kind==='text'?(e.text||e.role+'：未辨识原字形'):'';\n Object.assign(img.style,{left:x/m.width*100+'%',top:y/m.height*100+'%',width:w/m.width*100+'%',height:h/m.height*100+'%',zIndex:e.kind==='text'?'3':e.kind==='decoration'?'2':'1'});\n canvas.append(img);\n}\n</script><!-- 同站点服务 /layout-reference 素材；不要以 file:// 打开。 --></body></html>`}
|
||||
const router:GuidanceDocument={
|
||||
path:'premium-layout/router',title:'高级感排版 · 27 张原图 Router',collection:'高级感排版',
|
||||
resources:[image('source-map','27 张原图编号对应图','/layout-reference/numbered-source.png'),file('inspector','27 张构件检查器','/layout-reference/index.html'),file('index-json','27 张机器索引','/layout-reference/index.json'),file('runtime','React / TSX 完整组件源文件','/layout-reference/ReferenceLayout.tsx'),file('manifest','React 组件配套 manifest.json','/layout-reference/manifest.json'),file('bundle','27 张完整源码与素材 ZIP','/layout-reference/layout-reference-toolkit.zip'),...layouts.map(l=>doc(l.id,l.id+' · '+l.name))],
|
||||
blocks:[p('本系列严格对应用户参考图中的 27 张独立设计，每张保留自己的原图裁片、文字、图片占位 / 色块、装饰和坐标。左侧“高级感排版 / 模板合集”说明栏不计入。编号从上到下、每行从左到右：前 3 行各 5 张，后 2 行各 6 张，共 27 张设计 post，另有本篇 Router。'),
|
||||
h('先查原图编号，再调用固定 ID'),links('inspector','index-json','bundle'),p('指定 ref-01 至 ref-27 中的一个 ID。禁止把旧的“同心圆”“巨字”等类型名当成任意近似模板；每个 ID 只对应一个 source.box、一份 manifest 和本设计的构件。无法确定编号时先返回候选原图裁片，由使用者选择，再生成。'),
|
||||
p('| ID | 原图位置（含左侧说明栏所在列） | 对应设计 |\n| --- | --- | --- |\n'+layouts.map(l=>`| ${l.id} | 第 ${l.source.row} 行、第 ${l.source.column} 列 | ${l.name} |`).join('\n')),
|
||||
links(...layouts.map(l=>l.id)),
|
||||
h('识别算法与人工复核'),p('1. 从拼图外沿采样灰底，按 RGB 最大通道差 >19 建立前景二值掩膜。2. 四邻域连通域提取外框，按宽 86–124px、高 146–189px 过滤，检测出 27 张卡片。3. 按 y 坐标聚成 5 行，行内按 x 排序，保存绝对裁片坐标。4. 使用本机 macOS Vision 提取 OCR 候选与置信度，再逐张复核文字区、色块与装饰 ROI。5. 根据各图位的局部颜色种子建立图形掩膜，文字前景独立分离；残余字形按基线、间距、字高与已有文字块合并。6. 对所有独立图层重组并执行像素比较。'),
|
||||
p('OCR 置信度不是事实保证；本清单对可读标题进行了人工核对。ref-01 的品牌字标整体为 T01，不能把末尾字符再标为 T03。编号在一张图内按文字 T、图片占位 I、装饰 D 分组；对外调用使用完整键 ref-01/T01，防止跨版面混用。'),
|
||||
h('三类构件及背景'),p('T / text：标题、正文、品牌字、日期、图注与字距标签。文字不属于图片区；已核对内容记录在 text 字段，无法辨认的内容为 null。I / image：原设计的图片占位或灰绿色色块。它们可由实际照片替换，原始形状和位置由 mask 保持；本参考没有真实照片。D / decoration：线框、圆环、圆节点、引线、分隔线与贴条。纸底与原拼图画框单独保存在 background。'),
|
||||
h('必须区分：保真重组与可编辑替换'),p('默认模式按分类好的原图构件重组，保留原字形和像素；它不是高分辨率矢量重绘，也不意味着 OCR 全部识别正确。替换模式按同一 ID 和原坐标渲染新文字或新图片；字体与内容变化会产生视觉差异。替换过的版本不得称为与原图逐像素一致。曲线文字保留原字形，若要替换须沿该版面的专用 SVG 路径排字，通用组件会拒绝普通文本替换，以免把弧形改成直排。'),p(sourceNote),
|
||||
h('严格调用协议'),code(JSON.stringify({layoutId:'ref-01',mode:'reference',sourceBox:layouts[0].source.box,components:{'ref-01/T01':{kind:'text',role:'品牌字标'},'ref-01/T02':{kind:'text',role:'左下说明'},'ref-01/I01':{kind:'image',role:'上方主图'},'ref-01/I02':{kind:'image',role:'下方副图'}}},null,2)),
|
||||
h('React / TSX 与 Next.js 文件准备'),links('runtime','manifest','bundle'),p('将 ZIP 中 components/reference-layouts 放进项目组件目录，将 public/layout-reference 放到项目 public 下。React 项目直接导入组件使用；Next.js App Router 可将组件保留为 Server Component。已有根布局继续沿用，设置中文 lang，按项目路径调整 @/ 别名。只有图层开关、拖拽或编辑器等交互外壳需要 use client；图片和字形保真层使用原生 img 避免优化改变原像素或透明遮罩。'),
|
||||
code(reactExample('ref-01')),code(nextExample('ref-01')),
|
||||
h('替换必须按构件类型和完整键执行'),code(`import ReferenceLayout from './reference-layouts/ReferenceLayout';\nexport default function Customized() {\n return <ReferenceLayout id="ref-01"\n text={{'ref-01/T01':'MY BRAND'}}\n images={{'ref-01/I01':'/photos/main.jpg','ref-01/I02':'/photos/detail.jpg'}}\n />;\n}\n// ref-02/T01 不能传给 ref-01；I01 不能作为文字键。运行时会拒绝。\n// 保留某个构件原样：不要传对应键。未知细字不能猜写。`),
|
||||
h('字体、图片与高级工具'),p('参考图中的字形已保存在独立文字资产；尚不能从低清拼图可靠确定具体字体。编辑时使用用户提供且已授权的中文 / 拉丁字体，先检查横排、竖排、旋转和倾斜方向，再调整字距与行距。SVG 适用于弧形文字和可编辑轮廓，Figma 可按每张 manifest 的源坐标建立画板与图层；不要重新套用另一张版面的圆形、网格或色块位置。图片替换采用 cover，并保留本设计的 mask；需要完整主体时先检查裁切。'),
|
||||
h('验收与停止条件'),p('逐张核对原裁片、编号和 source.box；检查文字、图片占位和装饰三类掩膜。默认模式必须逐像素重组一致；该检查只证明资产重组保真，不证明语义标注或 OCR 一定正确，仍须核对标注图。特别检查同一单词是否被拆成两个 T、数字是否被旋转标题吞并、底线是否被并入文字。调用时不能跨设计借构件。更换内容后再次检查溢出、换行、透明边缘与图片裁切。网页正文另外提供可读的 DOM 文本，不把 112×173 的海报小字当作移动端正文。'),
|
||||
],
|
||||
};
|
||||
export const layoutDocuments:GuidanceDocument[]=[router,...layouts.map((l):GuidanceDocument=>{
|
||||
const title=l.id+' · '+l.name;
|
||||
const texts=l.elements.filter(e=>e.kind==='text'),images=l.elements.filter(e=>e.kind==='image'),decor=l.elements.filter(e=>e.kind==='decoration');
|
||||
return {path:'premium-layout/'+l.id,title,collection:'高级感排版',resources:[image('reference',l.id+' · 原图裁片',l.reference),image('annotated',l.id+' · 文字/图片/装饰标注',l.annotated),image('text-map',l.id+' · 仅文字掩膜（蓝色）',`/layout-reference/${l.id}/text-map.png`),image('image-map',l.id+' · 仅图片占位/色块（橙色）',`/layout-reference/${l.id}/image-map.png`),image('decor-map',l.id+' · 仅装饰掩膜（绿色）',`/layout-reference/${l.id}/decoration-map.png`),doc('router','27 张原图 Router'),file('inspect','打开本设计构件检查器',`/layout-reference/${l.id}/index.html`),file('json','本设计完整构件 JSON',`/layout-reference/${l.id}/manifest.json`),file('runtime','React 完整组件','/layout-reference/ReferenceLayout.tsx'),file('bundle','完整源码与素材 ZIP','/layout-reference/layout-reference-toolkit.zip')],blocks:[
|
||||
p(`${l.id} 只对应原图第 ${l.source.row} 行、可见第 ${l.source.column} 列的“${l.name}”。原裁片坐标 [x,y,w,h] = [${l.source.box.join(', ')}]；本篇逐项列出文字 ${texts.length} 组、图片占位/色块 ${images.length} 组、装饰 ${decor.length} 组，不替换成近似构图。`),links('inspect','json'),
|
||||
h('原图与分类图怎么看'),p('本 post 的第 1 张是直接裁出的原版面，第 2 张标出构件框，第 3 张只显示蓝色文字掩膜，第 4 张只显示橙色图片区掩膜，第 5 张只显示绿色装饰。T 与 I 可在坐标上叠放，例如标题压住图位；它们仍是不同类型，不能合并成图片。检查器可独立关闭各类构件并点击表格定位。'),
|
||||
h('构件逐项对应表'),p('| 完整构件键 | 类型 | 用途 | 本裁片坐标 x,y,w,h | 内容 / 状态 |\n| --- | --- | --- | --- | --- |\n'+l.elements.map(e=>`| ${l.id}/${e.id} | ${typeName(e.kind)} | ${e.role} | ${e.box.join(', ')} | ${e.kind==='text'?(e.text??'待核对，保留原字形'):'非文字'} |`).join('\n')),
|
||||
h('布局与制作步骤'),p(`1. 以 ${l.width}×${l.height} 的源坐标建立画板；输出可等比放大，比例必须保持 ${l.width}:${l.height}。2. 建立本设计的 ${images.map(e=>e.id+' '+e.role).join('、')}，使用对应 mask，保持它们各自位置。3. 单独放置 ${texts.map(e=>e.id+' '+e.role).join('、')}，按表内方向与坐标定位。4. 还原 ${decor.map(e=>e.id+' '+e.role).join('、')||'原设计已有的细节'}，不得借用别的设计。5. 与原裁片叠加比较，再检查文字是否被图层遮挡。`),
|
||||
h('文字和图层的具体规则'),p(texts.map(e=>`${e.id}：${e.direction==='vertical'?'竖排':e.direction==='rotated'?'整体旋转排字':e.direction==='angled'?'倾斜排字':e.direction==='curved'?'沿曲线排字':'横排'}；${e.text?'已核对可读内容“'+e.text+'”':'内容无法可靠辨认，保留原字形，不编造正文'}。`).join('\n')),p(sourceNote),
|
||||
h('HTML / CSS：固定本设计 ID'),code(htmlExample(l.id)),
|
||||
h('React / TSX：固定本设计组件'),code(reactExample(l.id)),links('runtime','bundle'),
|
||||
h('Next.js App Router：固定本设计路由'),code(nextExample(l.id)),
|
||||
h('本设计的验收标准'),p(`layoutId 必须等于 ${l.id}，source.box 必须为 [${l.source.box.join(', ')}]；所有构件资产必须来自 /layout-reference/${l.id}/。核对本篇 ${texts.length} 组 T、${images.length} 组 I、${decor.length} 组 D 的归属和坐标。默认原字形模式的图层拼回与原裁片一致；文字替换模式则按布局与可读性验收，不再声称像素一致。原字标、日期和细字不能因为识别残余而重复编号。`),links('router'),
|
||||
]};
|
||||
})];
|
||||
@@ -1,39 +0,0 @@
|
||||
import React from 'react';
|
||||
import type {CSSProperties} from 'react';
|
||||
import layouts from './manifest.json';
|
||||
export const layoutIds = ['ref-01','ref-02','ref-03','ref-04','ref-05','ref-06','ref-07','ref-08','ref-09','ref-10','ref-11','ref-12','ref-13','ref-14','ref-15','ref-16','ref-17','ref-18','ref-19','ref-20','ref-21','ref-22','ref-23','ref-24','ref-25','ref-26','ref-27'] as const;
|
||||
export type LayoutId=typeof layoutIds[number];
|
||||
export type Replacements={text?:Record<string,string>;images?:Record<string,string>};
|
||||
export function getLayout(id:string){return layouts.find(layout=>layout.id===id)}
|
||||
export function validateReplacements(id:string,replacements:Replacements){
|
||||
const layout=getLayout(id);if(!layout)throw Error(`Unknown layout ID: ${id}`);
|
||||
for(const[kind,values]of [['text',replacements.text],['image',replacements.images]] as const)for(const key of Object.keys(values||{})){
|
||||
if(!layout.elements.some(e=>key===id+'/'+e.id&&e.kind===kind))throw Error(`Component does not belong to ${id} or has the wrong kind: ${key}`);
|
||||
}return layout;
|
||||
}
|
||||
function textStyle(text:string,box:number[],width:number,direction:string):CSSProperties{
|
||||
const vertical=direction==='vertical'||direction==='rotated',lines=text.split('\n'),units=Math.max(...lines.map(line=>Array.from(line).reduce((n,c)=>n+(/[\u3400-\u9fff]/.test(c)?1:.56),0)),1);
|
||||
const size=vertical?Math.min(box[2],box[3]/Math.max(text.length,1)):Math.min(box[3]/(lines.length*1.1),box[2]/units);
|
||||
return {fontSize:`${size/width*100}cqw`,lineHeight:1.1,whiteSpace:'pre-wrap',writingMode:vertical?'vertical-rl':undefined,textOrientation:direction==='rotated'?'sideways':undefined,transform:direction==='angled'?'rotate(-12deg)':undefined,transformOrigin:'left center',color:'#222',fontFamily:'"Songti SC", "Noto Serif CJK SC", serif'};
|
||||
}
|
||||
/** Untouched mode reconstructs typed source layers; replacement mode keeps the exact preset geometry. */
|
||||
export default function ReferenceLayout({id,text={},images={},assetBase=''}:{id:LayoutId;text?:Record<string,string>;images?:Record<string,string>;assetBase?:string}){
|
||||
const layout=validateReplacements(id,{text,images}),src=(url:string)=>assetBase+url;
|
||||
return <figure data-layout-id={id} aria-label={`${id} ${layout.name}`} style={{margin:0,width:'min(100%, 672px)',containerType:'inline-size'}}>
|
||||
<div style={{position:'relative',width:'100%',aspectRatio:`${layout.width}/${layout.height}`,isolation:'isolate',background:'#f4f3ee'}}>
|
||||
<img src={src(layout.background)} alt="" width={layout.width} height={layout.height} style={{position:'absolute',inset:0,width:'100%',height:'100%'}}/>
|
||||
{layout.elements.map(e=>{
|
||||
const[x,y,w,h]=e.box,key=id+'/'+e.id,position:CSSProperties={position:'absolute',left:x/layout.width*100+'%',top:y/layout.height*100+'%',width:w/layout.width*100+'%',height:h/layout.height*100+'%',zIndex:e.kind==='text'?3:e.kind==='decoration'?2:1};
|
||||
if(e.kind==='text'&&Object.hasOwn(text,key)){
|
||||
if(e.direction==='curved')throw Error(`Curved text requires the source-specific SVG path: ${key}`);
|
||||
return <React.Fragment key={key}>
|
||||
{'underlay' in e&&<img src={src(String(e.underlay))} alt="" style={position}/>}
|
||||
<span data-component={key} data-kind="text" style={{...position,...textStyle(text[key],e.box,layout.width,e.direction)}}>{text[key]}</span>
|
||||
</React.Fragment>;
|
||||
}
|
||||
if(e.kind==='image'&&Object.hasOwn(images,key))return <img key={key} data-component={key} data-kind="image" src={images[key]} alt={e.role} style={{...position,objectFit:'cover',maskImage:'mask' in e?`url("${src(String(e.mask))}")`:undefined,maskSize:'100% 100%'}}/>;
|
||||
return <img key={key} data-component={key} data-kind={e.kind} src={src(e.asset)} alt={e.kind==='text'?e.text||`${e.role}：原字形保真，内容未辨识`:''} width={w} height={h} style={position}/>;
|
||||
})}
|
||||
</div>
|
||||
</figure>;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -12,45 +12,5 @@
|
||||
"wiki:Main:welcome": "54d12ae51429f66fa7991ef5",
|
||||
"wiki:Help:namespaces": "1a33340838520492b2e095c0",
|
||||
"wiki:Template:idea": "40e0e456e2f5943610fef538",
|
||||
"wiki:Draft:inbox": "a599a5734d13ec81fed1ffd1",
|
||||
"guidance:premium-layout/router": "8eb8c76500580f7a4b56ba3c",
|
||||
"guidance:premium-layout/offset-panels": "5971fc3d2563aa8005df5c13",
|
||||
"guidance:premium-layout/vertical-rail": "9ad47529a7eaeee1fef771ca",
|
||||
"guidance:premium-layout/monumental-type": "7f158059ba3a2b80dd750cc3",
|
||||
"guidance:premium-layout/orbital-rings": "370d1881f229af63f1946df9",
|
||||
"guidance:premium-layout/organic-ellipse": "31a978620a0d388f84772c95",
|
||||
"guidance:premium-layout/modular-grid": "c34cf81137654ad38850c9bd",
|
||||
"guidance:premium-layout/editorial-serif": "dbe94ccaa708bd120549ae86",
|
||||
"guidance:premium-layout/horizontal-band": "768587e537d6f1ee77a51961",
|
||||
"guidance:premium-layout/diagonal-cards": "0962c2bf1c558e0e32425f59",
|
||||
"guidance:premium-layout/annotation-lines": "347b732caa4af4afa43b65a4",
|
||||
"guidance:premium-layout/split-contrast": "3edf144a443c1fdf23827fb3",
|
||||
"guidance:premium-layout/type-frame": "97227671a9dc95c4948e591b",
|
||||
"guidance:premium-layout/ref-01": "eb937b42be92a9f6feee684f",
|
||||
"guidance:premium-layout/ref-02": "1179d1b1a5f21a99fa0cf542",
|
||||
"guidance:premium-layout/ref-03": "f3079f1dbb242180e04b602b",
|
||||
"guidance:premium-layout/ref-04": "b7a5981ea582ed94384af2ae",
|
||||
"guidance:premium-layout/ref-05": "a01a0ab78461632b8cb148f9",
|
||||
"guidance:premium-layout/ref-06": "c524f9c3858052ebcc5ab8ef",
|
||||
"guidance:premium-layout/ref-07": "7d4cefdfada28bbe9e570af3",
|
||||
"guidance:premium-layout/ref-08": "e53f7620a90d3f8076c44326",
|
||||
"guidance:premium-layout/ref-09": "18aff77f5f032eda1a2cd04b",
|
||||
"guidance:premium-layout/ref-10": "d5906c34d3efb6fdbcb40da8",
|
||||
"guidance:premium-layout/ref-11": "d1718fd03494af0c8c95e4c4",
|
||||
"guidance:premium-layout/ref-12": "f78131152506cbf7dec7506a",
|
||||
"guidance:premium-layout/ref-13": "d3c5eae33973291530d1118e",
|
||||
"guidance:premium-layout/ref-14": "b042317268286cff3e52d145",
|
||||
"guidance:premium-layout/ref-15": "acbebf9c77fb2432be877bf0",
|
||||
"guidance:premium-layout/ref-16": "d3b2ec816983aadb5b4690be",
|
||||
"guidance:premium-layout/ref-17": "7b1b2fc5b9690213bbbe07ac",
|
||||
"guidance:premium-layout/ref-18": "5b376e57c70ce8a49cf4e491",
|
||||
"guidance:premium-layout/ref-19": "246c33f9fff157ab9a4c1df7",
|
||||
"guidance:premium-layout/ref-20": "b5db869088ed8296d8329f83",
|
||||
"guidance:premium-layout/ref-21": "fd6b7caabcf3077f9bdc32c7",
|
||||
"guidance:premium-layout/ref-22": "8561d1fd6f23335373eab1ba",
|
||||
"guidance:premium-layout/ref-23": "30f3978167ba3da8770ec5de",
|
||||
"guidance:premium-layout/ref-24": "6c72e53a6e2f497852f98f04",
|
||||
"guidance:premium-layout/ref-25": "51c0712b17a8372a5fa151df",
|
||||
"guidance:premium-layout/ref-26": "f356b77194288909ee4352b4",
|
||||
"guidance:premium-layout/ref-27": "b30a9778355b7132633f51b3"
|
||||
"wiki:Draft:inbox": "a599a5734d13ec81fed1ffd1"
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import {guidanceUrl} from '../page-links';
|
||||
import {layoutDocuments} from '../layouts/documents';
|
||||
import {getSkill,skillCatalog,type Block,type Resource} from './catalog';
|
||||
|
||||
export type GuidanceResource=Resource&{documentPath?:string};
|
||||
@@ -44,7 +43,6 @@ guidanceDocuments.push({
|
||||
{type:'links',refs:['doc:street-people/checks','doc:shadow-puppet/delivery']},
|
||||
],
|
||||
});
|
||||
guidanceDocuments.unshift(...layoutDocuments);
|
||||
const registry=new Map(guidanceDocuments.map(doc=>[doc.path,doc]));
|
||||
export function getGuidance(path:string){return registry.get(path);}
|
||||
export function guidanceBacklinks(path:string){return guidanceDocuments.filter(doc=>doc.path!==path&&doc.blocks.some(b=>b.type==='links'&&b.refs!.some(id=>doc.resources.find(r=>r.id===id)?.documentPath===path)));}
|
||||
|
||||
@@ -6,7 +6,7 @@ export const apiDocuments:Record<string,readonly string[]>={
|
||||
"统一内容流",
|
||||
"GET",
|
||||
"查询参数：q（可选，最多 200 字符）；category（可选，标签名称或命名空间）；cursor（可选，上一页 nextCursor）。",
|
||||
"JSON：entries 数组与 nextCursor；没有更多结果时 nextCursor 为 null。静态内容仅出现在第一页。",
|
||||
"JSON：entries 数组与 nextCursor；没有更多结果时 nextCursor 为 null。静态内容仅出现在第一页；已由相同 publicId 的数据库笔记接管时不重复展示。",
|
||||
"GET /api/explore-feed?q=排版",
|
||||
"503：素材库暂时无法连接。"
|
||||
],
|
||||
@@ -21,18 +21,18 @@ export const apiDocuments:Record<string,readonly string[]>={
|
||||
"/api/notes/{id}": [
|
||||
"读取与编辑笔记",
|
||||
"GET, PUT",
|
||||
"路径参数：id，笔记稳定 ID。PUT 使用 application/json，所有字段必填：title（1–200 字符）、description（最多 1000 字符）、markdown（最多 100000 字符）、tags（最多 50 个标签 UUID）、revision（GET 返回的 entry.revision，64 位十六进制）。",
|
||||
"GET 返回 {entry,tags}；PUT 返回更新后的 {entry}。先 GET 获取 revision，再 PUT；冲突后重新读取。",
|
||||
"路径参数：id，笔记稳定 ID（publicId 或存储 UUID）。PUT 使用 application/json，以下字段必填：title（1–200 字符）、description（最多 1000 字符）、markdown（最多 100000 字符）、tags（最多 50 个标签 UUID）、revision（GET 返回的 entry.revision，64 位十六进制）。可选 assets（最多 100 项 {id:媒体 UUID,role:content|caption}，替换媒体关联，原二进制不删除）；coverAssetId（图片 UUID 或 null，必须为本笔记 content 图片；null 清除显式封面）。静态代码页须先通过创建接口保存为数据库笔记，才可更新媒体。",
|
||||
"GET 返回 {entry,tags}，entry.assets 为媒体关联、entry.coverAssetId 为显式封面；PUT 返回更新后的 {entry}。先 GET 获取 revision，再 PUT；冲突后重新读取。",
|
||||
"GET /api/notes/{id}\nPUT /api/notes/{id}\n{\"title\":\"标题\",\"description\":\"简介\",\"markdown\":\"正文\",\"tags\":[],\"revision\":\"<GET 返回的 entry.revision>\"}",
|
||||
"400：输入错误；404：笔记不存在；409：版本冲突。"
|
||||
],
|
||||
"/api/posts": [
|
||||
"创建笔记或素材包",
|
||||
"POST",
|
||||
"application/json：kind（必填，image / video / audio / article / motion）、title（必填，1–200 字符）；slug（可选，最多 120 字符，以小写字母或数字开头，仅含小写字母、数字、连字符）；description（可选，最多 1000 字符）；text（可选，最多 100000 字符）；tags（可选，最多 50 个 UUID）；coverAssetId（可选，图片 UUID）；assets（可选，最多 100 项，{id: UUID,role: content | caption}，role 默认 content）。媒体类型必须引用至少一个对应类型的 content 素材。",
|
||||
"201 JSON：{id,slug}。引用已有素材；不会在此接口上传二进制文件。",
|
||||
"application/json：kind（必填，image / video / audio / article / motion）、title（必填，1–200 字符）；publicId（可选，唯一的 24 位小写十六进制稳定 ID，用于保留原页面地址）；slug（可选，最多 120 字符，以小写字母或数字开头，仅含小写字母、数字、连字符）；description（可选，最多 1000 字符）；text（可选，最多 100000 字符）；tags（可选，最多 50 个 UUID）；coverAssetId（可选，图片 UUID）；assets（可选，最多 100 项，{id: UUID,role: content | caption}，role 默认 content）。媒体类型必须引用至少一个对应类型的 content 素材。",
|
||||
"201 JSON：{id,slug,url,publicId?}，url 为 /explore/<publicId 或 id>。id 仍为存储 UUID。引用已有素材；不会在此接口上传二进制文件。",
|
||||
"POST /api/posts\n{\"kind\":\"article\",\"title\":\"新笔记\",\"text\":\"正文\",\"tags\":[]}",
|
||||
"400：输入或素材引用不合法；409：slug 已存在。"
|
||||
"400：输入或素材引用不合法；409：slug 或 publicId 已存在。"
|
||||
],
|
||||
"/api/tags": [
|
||||
"标签列表与创建",
|
||||
@@ -43,10 +43,10 @@ export const apiDocuments:Record<string,readonly string[]>={
|
||||
"400：输入错误；409：slug 冲突。"
|
||||
],
|
||||
"/api/upload": [
|
||||
"上传媒体并创建素材包",
|
||||
"上传媒体，可独立保存素材",
|
||||
"POST",
|
||||
"multipart/form-data：kind（必填，image / video / audio）；title（必填，1–200 字符）；slug（可选，小写字母或数字组成的非空段，以连字符分隔，最多 120 字符）；description（可选，最多 100000 字符）；tags（可选，UUID 数组的 JSON 字符串，最多 50 项）；文件字段名任意，至少一个文件。最多 16 个文件，单个不超过 250 MB，总计不超过 1 GB。图片支持 JPG、PNG、WebP、GIF、AVIF；音频必须为独立声音文件。",
|
||||
"201 JSON：{id,slug,url,assets}，assets 为素材 UUID 数组。视频会自动进入后台加工队列。",
|
||||
"multipart/form-data：kind（必填，image / video / audio）；title（普通上传必填，1–200 字符；assetOnly=true 时可省略）；assetOnly（可选，字符串 true / false，默认 false；true 时只存媒体，不创建 post）；slug（可选，小写字母或数字组成的非空段，以连字符分隔，最多 120 字符）；description（可选，最多 100000 字符）；tags（可选，UUID 数组的 JSON 字符串，最多 50 项）；文件字段名任意，至少一个文件。最多 16 个文件，单个不超过 250 MB，总计不超过 1 GB。图片支持 JPG、PNG、WebP、GIF、AVIF；音频必须为独立声音文件。",
|
||||
"201 JSON：普通上传为 {id,slug,url,assets}；assetOnly=true 为 {assets,files:[{id,filename,sha256}]}，不创建 post。assets 为素材 UUID 数组，之后可交给 /api/posts 组合；视频素材会自动进入后台加工队列。",
|
||||
"POST /api/upload\nContent-Type: multipart/form-data\nkind=image\ntitle=示例图片\ntags=[]\nfile=<图片文件>",
|
||||
"400：输入或媒体不合法；409：slug 冲突；413：上传超过限制。"
|
||||
],
|
||||
|
||||
@@ -8,6 +8,7 @@ export function apiError(res: NextApiResponse,error: unknown) {
|
||||
if(error instanceof ZodError) return res.status(400).json({error:"请检查输入内容",issues:error.issues});
|
||||
const message=error instanceof Error?error.message:"";
|
||||
const clientMessages:Record<string,string>={
|
||||
'Media changes require a stored note':'媒体与封面需先通过创建接口保存为数据库笔记',
|
||||
'Character PNG must have transparency':'请上传带真实透明背景的 PNG，透明区域 alpha 为 0，人物内部 alpha 至少为 250',
|
||||
'Referenced asset does not exist':'引用的素材不存在',
|
||||
'A media post needs matching content':'素材包需要包含对应类型的素材',
|
||||
|
||||
@@ -3,22 +3,24 @@ import {noteDescriptions} from '@/content/note-descriptions';
|
||||
import {guidanceDocuments,guidanceMarkdown} from '@/content/skills/guidance';
|
||||
import {wikiPages,wikiMarkdown} from '@/content/wiki';
|
||||
import {skillCatalog} from '@/content/skills/catalog';
|
||||
import {publicPostId} from './model';
|
||||
import {pageId,exploreUrl,guidanceUrl} from '@/content/page-links';
|
||||
import {getPostById,feed} from './library';
|
||||
import {getPostById,feed,publishedPublicIds} from './library';
|
||||
import {applyStaticEdit,staticEdits,withRevision} from './note-edits';
|
||||
export type ExploreMedia={kind:'image'|'video'|'audio';url:string;title:string;poster?:string};
|
||||
export type ExploreEntry={id:string;title:string;description:string;imageCount:number;namespace:string;categories:string[];markdown:string;media:ExploreMedia[];color:string;postSlug?:string;editableMarkdown?:string;revision?:string};
|
||||
export type ExploreEntry={id:string;title:string;description:string;imageCount:number;namespace:string;categories:string[];markdown:string;media:ExploreMedia[];color:string;postSlug?:string;editableMarkdown?:string;revision?:string;assets?:{id:string;kind:string;role:string}[];coverAssetId?:string|null};
|
||||
export const staticEntries:ExploreEntry[]=[...guidanceDocuments.map(doc=>{const card=skillCatalog.find(c=>doc.path===c.id);return {id:pageId('guidance:'+doc.path),title:doc.title,description:noteDescriptions[doc.path]||doc.blocks.find(b=>b.type==='paragraph')?.text||doc.title,imageCount:new Set([...(card?[card.image]:[]),...doc.resources.filter(r=>r.kind==='image').map(r=>r.href)]).size,namespace:'Main',categories:[doc.collection],markdown:guidanceMarkdown(doc.path)!,media:Array.from(new Map([...(card?[{kind:'image' as const,url:card.image,title:card.alt}]:[]),...doc.resources.filter(r=>r.kind==='image').map(r=>({kind:'image' as const,url:r.href,title:r.title}))].map(m=>[m.url,m])).values()),color:'#eee5dc'};}),...wikiPages.map(page=>({id:pageId('wiki:'+page.namespace+':'+page.slug),title:page.title,description:page.summary,imageCount:0,namespace:page.namespace,categories:page.categories,markdown:wikiMarkdown(page),media:[],color:page.color}))];
|
||||
// Canonicalize document references, including absolute links; pictures remain explicit links.
|
||||
export function canonicalMarkdown(text:string){return text.replace(/\]\((?:http:\/\/8\.211\.154\.134:18131)?\/skills\/([^ )]+)\)/g,(whole,path:string)=>{const clean=path.replace(/\/index\.md$/,'').replace(/\.md$/,'');return pageId('guidance:'+clean)?']('+guidanceUrl(clean)+'?agent_mode=True)':whole;});}
|
||||
export async function getEntry(id:string,client?:PoolClient):Promise<ExploreEntry|null>{
|
||||
const page=staticEntries.find(e=>e.id===id);if(page){const edits=await staticEdits(client);return withRevision(applyStaticEdit({...page,markdown:canonicalMarkdown(page.markdown)},edits.find(e=>e.page_id===id)));}
|
||||
if(!/^[0-9a-f-]{36}$/.test(id))return null;
|
||||
const post=await getPostById(id,client);if(!post)return null;
|
||||
const media:ExploreMedia[]=post.assets.filter(a=>a.kind!=='text'&&a.role==='content').map(a=>({kind:a.kind as ExploreMedia['kind'],url:'/api/media/'+a.id,title:a.filename||post.title,...(a.kind==='video'&&a.variants.includes('poster')?{poster:'/api/media/'+post.assets.find(p=>p.source_asset_id===a.id&&p.derivation==='poster')?.id}:{})}));
|
||||
const validId=/^(?:[0-9a-f]{24}|[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/.test(id);
|
||||
const post=validId&&(process.env.DATABASE_URL||client||id.length===36)?await getPostById(id,client):null;
|
||||
if(!post){const page=staticEntries.find(e=>e.id===id);if(!page)return null;const edits=await staticEdits(client);return withRevision(applyStaticEdit({...page,markdown:canonicalMarkdown(page.markdown)},edits.find(e=>e.page_id===id)));}
|
||||
const orderedAssets=[...post.assets].sort((a,b)=>Number(b.id===post.cover_asset_id)-Number(a.id===post.cover_asset_id));
|
||||
const media:ExploreMedia[]=orderedAssets.filter(a=>a.kind!=='text'&&a.role==='content').map(a=>({kind:a.kind as ExploreMedia['kind'],url:'/api/media/'+a.id,title:a.filename||post.title,...(a.kind==='video'&&a.variants.includes('poster')?{poster:'/api/media/'+post.assets.find(p=>p.source_asset_id===a.id&&p.derivation==='poster')?.id}:{})}));
|
||||
const editableMarkdown=post.assets.filter(a=>a.kind==='text').map(a=>a.body||'').join('\n\n');
|
||||
const body=editableMarkdown+'\n\n'+post.assets.filter(a=>a.derivation).map(a=>'['+({poster:'视频封面',audio_track:'独立音轨',silent_video:'静音视频'}[a.derivation||'']||a.derivation)+'](/api/media/'+a.id+')').join(' · ');
|
||||
return withRevision({id:post.id,title:post.title,editableMarkdown,description:post.description||body.slice(0,180)||post.title,imageCount:media.filter(m=>m.kind==='image').length,namespace:['image','video','audio'].includes(post.kind)?'File':'Main',categories:post.tags.map(t=>t.name),markdown:'# '+post.title+'\n\n'+body,media,color:'#eee5dc',postSlug:post.slug});
|
||||
return withRevision({id:publicPostId(post),assets:post.assets.filter(a=>a.kind!=='text').map(a=>({id:a.id,kind:a.kind,role:a.role})),coverAssetId:post.cover_asset_id,title:post.title,editableMarkdown,description:post.description||body.slice(0,180)||post.title,imageCount:media.filter(m=>m.kind==='image').length,namespace:['image','video','audio'].includes(post.kind)?'File':'Main',categories:post.tags.map(t=>t.name),markdown:'# '+post.title+'\n\n'+body,media,color:'#eee5dc',postSlug:post.slug});
|
||||
}
|
||||
export async function exploreFeed(q='',category='',cursor?:string){const [data,edits]=await Promise.all([feed({q,cursor}),staticEdits()]);const pages=staticEntries.map(e=>applyStaticEdit(e,edits.find(edit=>edit.page_id===e.id)));return {entries:[...(cursor?[]:pages.filter(e=>(!q||(e.title+e.description).includes(q)))),...data.posts.map(post=>{const cover=post.cover_asset_id||post.assets.find(a=>a.kind==='image'&&a.role==='content')?.id;const video=post.assets.find(a=>a.kind==='video');return {id:post.id,title:post.title,description:post.description||post.assets.find(a=>a.kind==='text')?.body?.slice(0,180)||post.title,imageCount:post.assets.filter(a=>a.kind==='image'&&a.role==='content').length,namespace:['image','video','audio'].includes(post.kind)?'File':'Main',categories:post.tags.map(t=>t.name),markdown:'',media:cover?[{kind:'image' as const,url:'/api/media/'+cover,title:post.title}]:video?.variants.includes('poster')?[{kind:'image' as const,url:'/api/media/'+post.assets.find(a=>a.source_asset_id===video.id&&a.derivation==='poster')?.id,title:post.title}]:[],color:'#eee5dc'};})].filter(e=>!category||e.categories.includes(category)||e.namespace===category),nextCursor:data.nextCursor};}
|
||||
export async function exploreFeed(q='',category='',cursor?:string){const [data,edits,published]=await Promise.all([feed({q,cursor}),staticEdits(),publishedPublicIds()]);const pages=staticEntries.filter(e=>!published.includes(e.id)).map(e=>applyStaticEdit(e,edits.find(edit=>edit.page_id===e.id)));return {entries:[...(cursor?[]:pages.filter(e=>(!q||(e.title+e.description).includes(q)))),...data.posts.map(post=>{const cover=post.cover_asset_id||post.assets.find(a=>a.kind==='image'&&a.role==='content')?.id;const video=post.assets.find(a=>a.kind==='video');return {id:publicPostId(post),title:post.title,description:post.description||post.assets.find(a=>a.kind==='text')?.body?.slice(0,180)||post.title,imageCount:post.assets.filter(a=>a.kind==='image'&&a.role==='content').length,namespace:['image','video','audio'].includes(post.kind)?'File':'Main',categories:post.tags.map(t=>t.name),markdown:'',media:cover?[{kind:'image' as const,url:'/api/media/'+cover,title:post.title}]:video?.variants.includes('poster')?[{kind:'image' as const,url:'/api/media/'+post.assets.find(a=>a.source_asset_id===video.id&&a.derivation==='poster')?.id,title:post.title}]:[],color:'#eee5dc'};})].filter(e=>!category||e.categories.includes(category)||e.namespace===category),nextCursor:data.nextCursor};}
|
||||
export function entryText(entry:ExploreEntry){return `${entry.markdown}\n\nDescription: ${entry.description}\nNamespace: ${entry.namespace}\nCategories: ${entry.categories.join(', ')}\n\n`+entry.media.map(m=>`- ${m.kind}: [${m.title}](${m.url})`).join('\n')+'\n\n[网页]('+exploreUrl(entry.id)+')\n';}
|
||||
|
||||
@@ -14,7 +14,7 @@ export async function getPost(slug: string): Promise<Post | null> {
|
||||
return serialize(result.rows,await tags())[0] || null;
|
||||
}
|
||||
export async function getPostById(id:string,client?:PoolClient):Promise<Post|null>{
|
||||
const result=await (client||db()).query(`${expand} WHERE p.id=$1`,[id]);
|
||||
const result=await (client||db()).query(`${expand} WHERE ${/^[0-9a-f]{24}$/.test(id)?'p.public_id':'p.id'}=$1`,[id]);
|
||||
return serialize(result.rows,await tags(client))[0]||null;
|
||||
}
|
||||
export async function feed(options: {kind?: PostKind; path?: string; cursor?: string; q?: string} = {}): Promise<FeedData> {
|
||||
@@ -31,3 +31,5 @@ export async function feed(options: {kind?: PostKind; path?: string; cursor?: st
|
||||
const contributions=(await db().query(`SELECT to_char(occurred_at AT TIME ZONE 'Asia/Shanghai','YYYY-MM-DD') AS day,sum(amount)::integer AS total FROM contribution_events WHERE occurred_at>=now()-interval '366 days' GROUP BY day ORDER BY day`)).rows;
|
||||
return {posts,tags:allTags,contributions,nextCursor:hasMore&&last?encodeCursor(last.created_at,last.id):null};
|
||||
}
|
||||
|
||||
export async function publishedPublicIds():Promise<string[]>{return (await db().query("SELECT public_id FROM posts WHERE public_id IS NOT NULL")).rows.map(p=>p.public_id);}
|
||||
|
||||
@@ -8,7 +8,7 @@ export const sections = [
|
||||
export type PostKind = typeof sections[number]["kind"];
|
||||
export type Asset = { id: string; kind: "image" | "video" | "audio" | "text"; filename: string | null; body: string | null; width: number | null; height: number | null; duration: number | null; has_audio: boolean | null; processing_status: string; variants: string[]; role: string; source_asset_id: string | null; derivation: string | null };
|
||||
export type Tag = { id: string; name: string; slug: string; path: string };
|
||||
export type Post = { description: string; id: string; slug: string; kind: PostKind; title: string; created_at: string; updated_at: string; cover_asset_id: string | null; assets: Asset[]; tags: Tag[] };
|
||||
export type Post = { description: string; id: string; public_id?: string | null; slug: string; kind: PostKind; title: string; created_at: string; updated_at: string; cover_asset_id: string | null; assets: Asset[]; tags: Tag[] };
|
||||
export type FeedData = { posts: Post[]; tags: Tag[]; contributions: { day: string; total: number }[]; nextCursor: string | null; unavailable?: boolean };
|
||||
export function validSection(path: string) { return sections.find(s => s.path === path); }
|
||||
export const mediaUrl = (id: string, variant?: string) => `/api/media/${id}${variant ? `?variant=${variant}` : ""}`;
|
||||
@@ -20,3 +20,5 @@ export function decodeCursor(value?: string) {
|
||||
} catch { /* invalid pagination cursor */ }
|
||||
throw new Error("Invalid cursor");
|
||||
}
|
||||
|
||||
export const publicPostId=(post:Pick<Post,'id'|'public_id'>)=>post.public_id||post.id;
|
||||
|
||||
@@ -3,36 +3,54 @@ import {createHash,randomUUID} from 'node:crypto';
|
||||
import {z} from 'zod';
|
||||
import {db,transaction} from './db';
|
||||
import type {ExploreEntry} from './explore';
|
||||
import {linkDerivedAssets} from './asset-links';
|
||||
import {postInput} from './write';
|
||||
export function withoutTitle(markdown:string){return markdown.replace(/^# [^\n]*(?:\n|$)\n?/,'');}
|
||||
export function withRevision(entry:ExploreEntry):ExploreEntry{
|
||||
const editableMarkdown=entry.editableMarkdown??withoutTitle(entry.markdown);
|
||||
const revision=createHash('sha256').update(JSON.stringify([entry.title,entry.description,editableMarkdown,[...entry.categories].sort()])).digest('hex');
|
||||
const revision=createHash('sha256').update(JSON.stringify([entry.title,entry.description,editableMarkdown,[...entry.categories].sort(),entry.coverAssetId??null,entry.assets?.map(a=>[a.id,a.role])??[]])).digest('hex');
|
||||
return {...entry,editableMarkdown,revision};
|
||||
}
|
||||
export async function staticEdits(client?:PoolClient){if(!process.env.DATABASE_URL)return [];return (await (client||db()).query(`SELECT e.*,COALESCE((SELECT jsonb_agg(t.name ORDER BY t.name) FROM note_edit_tags et JOIN tags t ON t.id=et.tag_id WHERE et.page_id=e.page_id),'[]') AS categories FROM note_edits e`)).rows;}
|
||||
export function applyStaticEdit(entry:ExploreEntry,edit?:{title:string;description:string;markdown:string;categories:string[]}):ExploreEntry{
|
||||
return edit?{...entry,title:edit.title,description:edit.description,editableMarkdown:edit.markdown,markdown:'# '+edit.title+'\n\n'+edit.markdown,categories:edit.categories}:entry;
|
||||
}
|
||||
export const noteEditInput=z.object({title:z.string().trim().min(1).max(200),description:z.string().trim().max(1000),markdown:z.string().max(100000),tags:z.array(z.uuid()).max(50),revision:z.string().regex(/^[0-9a-f]{64}$/)});
|
||||
export const noteEditInput=z.object({title:z.string().trim().min(1).max(200),description:z.string().trim().max(1000),markdown:z.string().max(100000),tags:z.array(z.uuid()).max(50),revision:z.string().regex(/^[0-9a-f]{64}$/),assets:postInput.shape.assets.unwrap().optional(),coverAssetId:z.uuid().nullable().optional()});
|
||||
export class NoteEditConflict extends Error{}
|
||||
export async function saveNote(id:string,input:z.infer<typeof noteEditInput>,read:(client:PoolClient)=>Promise<ExploreEntry|null>){
|
||||
await transaction(async client=>{
|
||||
await client.query('SELECT pg_advisory_xact_lock(hashtextextended($1,0))',['note-edit:'+id]);
|
||||
const isPost=/^[0-9a-f-]{36}$/.test(id);
|
||||
if(isPost)await client.query('SELECT id FROM posts WHERE id=$1 FOR UPDATE',[id]);
|
||||
const stored=(await client.query(`SELECT id,kind,cover_asset_id FROM posts WHERE ${/^[0-9a-f]{24}$/.test(id)?'public_id':'id'}=$1 FOR UPDATE`,[id])).rows[0];
|
||||
const isPost=Boolean(stored),postId=stored?.id;
|
||||
const current=await read(client);if(!current)throw Error('Note not found');
|
||||
if(current.revision!==input.revision)throw new NoteEditConflict('这篇笔记已被修改，请重新打开编辑后再保存。');
|
||||
const tagIds=[...new Set(input.tags)];
|
||||
if((await client.query('SELECT id FROM tags WHERE id=ANY($1::uuid[])',[tagIds])).rowCount!==tagIds.length)throw Error('Tag not found');
|
||||
if(isPost){
|
||||
await client.query('UPDATE posts SET title=$2,description=$3,updated_at=now(),edited_at=now() WHERE id=$1',[id,input.title,input.description]);
|
||||
if(input.assets!==undefined){
|
||||
const ids=[...new Set(input.assets.map(a=>a.id))];
|
||||
const assets=ids.length?(await client.query('SELECT id,kind FROM assets WHERE id=ANY($1::uuid[])',[ids])).rows:[];
|
||||
if(assets.length!==ids.length||assets.some(a=>a.kind==='text'))throw Error('Referenced asset does not exist');
|
||||
if(['image','video','audio'].includes(stored.kind)&&!input.assets.some(a=>a.role==='content'&&assets.some(r=>r.id===a.id&&r.kind===stored.kind)))throw Error('A media post needs matching content');
|
||||
await client.query("DELETE FROM post_assets pa USING assets a WHERE pa.post_id=$1 AND pa.asset_id=a.id AND a.kind<>'text'",[postId]);
|
||||
let position=Number((await client.query('SELECT COALESCE(max(position),-1)+1 AS n FROM post_assets WHERE post_id=$1',[postId])).rows[0].n);
|
||||
for(const a of input.assets)await client.query('INSERT INTO post_assets(post_id,asset_id,position,role) VALUES($1,$2,$3,$4)',[postId,a.id,position++,a.role]);
|
||||
}
|
||||
if(input.assets!==undefined&&input.coverAssetId===undefined&&stored.cover_asset_id&&!input.assets.some(a=>a.id===stored.cover_asset_id&&a.role==='content'))await client.query("UPDATE posts SET cover_asset_id=(SELECT a.id FROM post_assets pa JOIN assets a ON a.id=pa.asset_id WHERE pa.post_id=$1 AND pa.role='content' AND a.kind='image' ORDER BY pa.position LIMIT 1) WHERE id=$1",[postId]);
|
||||
if(input.coverAssetId!==undefined){
|
||||
if(input.coverAssetId!==null&&!(await client.query("SELECT 1 FROM assets a JOIN post_assets pa ON pa.asset_id=a.id WHERE pa.post_id=$1 AND a.id=$2 AND a.kind='image' AND pa.role='content'",[postId,input.coverAssetId])).rowCount)throw Error('Cover must reference an image');
|
||||
await client.query('UPDATE posts SET cover_asset_id=$2 WHERE id=$1',[postId,input.coverAssetId]);
|
||||
}
|
||||
await client.query('UPDATE posts SET title=$2,description=$3,updated_at=now(),edited_at=now() WHERE id=$1',[postId,input.title,input.description]);
|
||||
// Replace this note's text link, never modify a text asset shared by other notes.
|
||||
await client.query("DELETE FROM post_assets pa USING assets a WHERE pa.post_id=$1 AND pa.asset_id=a.id AND a.kind='text'",[id]);
|
||||
await client.query("DELETE FROM post_assets pa USING assets a WHERE pa.post_id=$1 AND pa.asset_id=a.id AND a.kind='text'",[postId]);
|
||||
const assetId=randomUUID();await client.query("INSERT INTO assets(id,kind,body) VALUES($1,'text',$2)",[assetId,input.markdown]);
|
||||
await client.query("INSERT INTO post_assets(post_id,asset_id,position,role) SELECT $1,$2,COALESCE(max(position)+1,0),'caption' FROM post_assets WHERE post_id=$1",[id,assetId]);
|
||||
await client.query('DELETE FROM post_tags WHERE post_id=$1',[id]);
|
||||
for(const tagId of tagIds)await client.query('INSERT INTO post_tags(post_id,tag_id) VALUES($1,$2)',[id,tagId]);
|
||||
await client.query("INSERT INTO post_assets(post_id,asset_id,position,role) SELECT $1,$2,COALESCE(max(position)+1,0),'caption' FROM post_assets WHERE post_id=$1",[postId,assetId]);
|
||||
await client.query('DELETE FROM post_tags WHERE post_id=$1',[postId]);
|
||||
for(const tagId of tagIds)await client.query('INSERT INTO post_tags(post_id,tag_id) VALUES($1,$2)',[postId,tagId]);
|
||||
if(input.assets!==undefined)await linkDerivedAssets(client,postId);
|
||||
}else{
|
||||
if(input.assets!==undefined||input.coverAssetId!==undefined)throw Error('Media changes require a stored note');
|
||||
await client.query(`INSERT INTO note_edits(page_id,title,description,markdown) VALUES($1,$2,$3,$4) ON CONFLICT(page_id) DO UPDATE SET title=excluded.title,description=excluded.description,markdown=excluded.markdown,updated_at=now()`,[id,input.title,input.description,input.markdown]);
|
||||
await client.query('DELETE FROM note_edit_tags WHERE page_id=$1',[id]);
|
||||
for(const tagId of tagIds)await client.query('INSERT INTO note_edit_tags(page_id,tag_id) VALUES($1,$2)',[id,tagId]);
|
||||
|
||||
@@ -3,6 +3,7 @@ import { z } from "zod";
|
||||
import { transaction } from "./db";
|
||||
import {linkDerivedAssets} from "./asset-links";
|
||||
export const postInput=z.object({
|
||||
publicId:z.string().regex(/^[0-9a-f]{24}$/).optional(),
|
||||
slug:z.string().regex(/^[a-z0-9][a-z0-9-]{0,119}$/).optional(),
|
||||
kind:z.enum(["image","video","audio","article","motion"]),title:z.string().trim().min(1).max(200),
|
||||
assets:z.array(z.object({id:z.uuid(),role:z.enum(["content","caption"]).default("content")})).max(100).default([]),
|
||||
@@ -18,11 +19,11 @@ export async function createPost(input:z.infer<typeof postInput>) {
|
||||
if(assets.length!==ids.length) throw new Error("Referenced asset does not exist");
|
||||
if(["image","video","audio"].includes(input.kind)&&!input.assets.some(link=>link.role==='content'&&assets.some(a=>a.id===link.id&&a.kind===input.kind))) throw new Error("A media post needs matching content");
|
||||
if(input.coverAssetId && !(await client.query("SELECT 1 FROM assets WHERE id=$1 AND kind='image'",[input.coverAssetId])).rowCount) throw new Error("Cover must reference an image");
|
||||
await client.query('INSERT INTO posts(id,slug,kind,title,cover_asset_id,description) VALUES($1,$2,$3,$4,$5,$6)',[id,slug,input.kind,input.title,input.coverAssetId||null,input.description||input.text?.slice(0,200)||input.title]);
|
||||
await client.query('INSERT INTO posts(id,slug,kind,title,cover_asset_id,description,public_id) VALUES($1,$2,$3,$4,$5,$6,$7)',[id,slug,input.kind,input.title,input.coverAssetId||null,input.description||input.text?.slice(0,200)||input.title,input.publicId||null]);
|
||||
for(const [position,a] of input.assets.entries()) await client.query('INSERT INTO post_assets(post_id,asset_id,position,role) VALUES($1,$2,$3,$4)',[id,a.id,position,a.role]);
|
||||
if(input.text){const textId=randomUUID();await client.query("INSERT INTO assets(id,kind,body) VALUES($1,'text',$2)",[textId,input.text]);await client.query("INSERT INTO post_assets(post_id,asset_id,position,role) VALUES($1,$2,$3,'caption')",[id,textId,input.assets.length]);}
|
||||
for(const tag of new Set(input.tags)) await client.query('INSERT INTO post_tags(post_id,tag_id) VALUES($1,$2)',[id,tag]);
|
||||
await linkDerivedAssets(client,id);
|
||||
return {id,slug};
|
||||
return {id,slug,...(input.publicId?{publicId:input.publicId}:{}),url:'/explore/'+(input.publicId||id)};
|
||||
});
|
||||
}
|
||||
|
||||
@@ -21,8 +21,9 @@ export async function upload(req:NextApiRequest,res:NextApiResponse,policy:Uploa
|
||||
const form=formidable({maxFileSize:250*1024*1024,maxTotalFileSize:1024*1024*1024,maxFiles:16,allowEmptyFiles:false});
|
||||
form.on('fileBegin',(_name,file)=>temporary.push(file.filepath));
|
||||
const [fields,files]=await form.parse(req);
|
||||
const assetOnly=z.enum(['true','false']).default('false').parse(fields.assetOnly?.[0])==='true';
|
||||
const kind=z.enum(['image','video','audio']).parse(policy.validateImage?'image':fields.kind?.[0]);
|
||||
const title=z.string().trim().min(1).max(200).parse(fields.title?.[0]||policy.defaultTitle);
|
||||
const title=z.string().trim().min(1).max(200).parse(fields.title?.[0]||policy.defaultTitle||(assetOnly?'上传素材':undefined));
|
||||
const slug=z.string().regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/).max(120).optional().parse(fields.slug?.[0]);
|
||||
const description=z.string().trim().max(100000).parse(fields.description?.[0]||'');
|
||||
const tagIds=z.array(z.uuid()).max(50).parse(JSON.parse(fields.tags?.[0]||'[]'));
|
||||
@@ -46,19 +47,21 @@ export async function upload(req:NextApiRequest,res:NextApiResponse,policy:Uploa
|
||||
const id=randomUUID(),key=`originals/${id}`;await putFile(key,file.filepath,mime);uploaded.push(key);
|
||||
records.push({id,key,mime,width,height,duration,hasAudio,size:file.size,hash:hash.digest('hex'),filename:file.originalFilename||'未命名素材'});
|
||||
}
|
||||
const postId=randomUUID();
|
||||
const postId=assetOnly?null:randomUUID();
|
||||
await transaction(async client=>{
|
||||
await client.query('INSERT INTO posts(id,slug,kind,title,description) VALUES($1,$2,$3,$4,$5)',[postId,slug||postId,kind,title,description.slice(0,1000)||title]);
|
||||
if(postId)await client.query('INSERT INTO posts(id,slug,kind,title,description) VALUES($1,$2,$3,$4,$5)',[postId,slug||postId,kind,title,description.slice(0,1000)||title]);
|
||||
for(const [position,a] of records.entries()){
|
||||
await client.query('INSERT INTO assets(id,kind,filename,storage_key,mime_type,byte_size,sha256,width,height,duration,has_audio,processing_status) VALUES($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12)',[a.id,kind,a.filename,a.key,a.mime,a.size,a.hash,a.width,a.height,a.duration,a.hasAudio,kind==='video'?'pending':'ready']);
|
||||
await client.query('INSERT INTO post_assets(post_id,asset_id,position) VALUES($1,$2,$3)',[postId,a.id,position]);
|
||||
if(postId)await client.query('INSERT INTO post_assets(post_id,asset_id,position) VALUES($1,$2,$3)',[postId,a.id,position]);
|
||||
for(const tag of new Set(tagIds))await client.query('INSERT INTO asset_tags(asset_id,tag_id) VALUES($1,$2)',[a.id,tag]);
|
||||
if(kind==='video')await client.query('INSERT INTO media_jobs(id,asset_id) VALUES($1,$2)',[randomUUID(),a.id]);
|
||||
}
|
||||
if(description){const id=randomUUID();await client.query("INSERT INTO assets(id,kind,body) VALUES($1,'text',$2)",[id,description]);await client.query("INSERT INTO post_assets(post_id,asset_id,position,role) VALUES($1,$2,$3,'caption')",[postId,id,records.length]);}
|
||||
for(const tag of new Set(tagIds))await client.query('INSERT INTO post_tags(post_id,tag_id) VALUES($1,$2)',[postId,tag]);
|
||||
if(postId&&description){const id=randomUUID();await client.query("INSERT INTO assets(id,kind,body) VALUES($1,'text',$2)",[id,description]);await client.query("INSERT INTO post_assets(post_id,asset_id,position,role) VALUES($1,$2,$3,'caption')",[postId,id,records.length]);}
|
||||
if(postId)for(const tag of new Set(tagIds))await client.query('INSERT INTO post_tags(post_id,tag_id) VALUES($1,$2)',[postId,tag]);
|
||||
});
|
||||
uploaded.length=0;return res.status(201).json({id:postId,slug:slug||postId,url:`/p/${slug||postId}`,assets:records.map(a=>a.id)});
|
||||
uploaded.length=0;
|
||||
if(assetOnly)return res.status(201).json({assets:records.map(a=>a.id),files:records.map(a=>({id:a.id,filename:a.filename,sha256:a.hash}))});
|
||||
return res.status(201).json({id:postId,slug:slug||postId,url:`/p/${slug||postId}`,assets:records.map(a=>a.id)});
|
||||
}catch(e){if(e instanceof Error && (/maxFileSize|maxTotalFileSize|maxFiles/.test(e.message)))return res.status(413).json({error:'最多 16 个文件，单个不超过 250 MB，总计不超过 1 GB'});return apiError(res,e);}
|
||||
finally{await Promise.allSettled(temporary.map(p=>rm(p,{force:true})));await Promise.allSettled(uploaded.map(removeObject));}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type {NextApiRequest,NextApiResponse} from 'next';
|
||||
import {publishedPublicIds} from '@/lib/library';
|
||||
import {staticEntries} from '@/lib/explore';
|
||||
import {applyStaticEdit,staticEdits} from '@/lib/note-edits';
|
||||
import {exploreUrl} from '@/content/page-links';
|
||||
export default async function handler(_:NextApiRequest,res:NextApiResponse){const edits=await staticEdits();const entries=staticEntries.map(e=>applyStaticEdit(e,edits.find(edit=>edit.page_id===e.id)));res.setHeader('Content-Type','text/plain; charset=utf-8');res.send('# PROMPT\n\n'+entries.map(e=>`- [${e.title}](${exploreUrl(e.id)}?agent_mode=True)`).join('\n')+'\n\n素材分页索引：/api/explore-feed（使用 nextCursor 翻页）。所有内容均使用 /explore/{id}?agent_mode=True 读取纯文本。\n');}
|
||||
export default async function handler(_:NextApiRequest,res:NextApiResponse){const [edits,published]=await Promise.all([staticEdits(),process.env.DATABASE_URL?publishedPublicIds():Promise.resolve([])]);const entries=staticEntries.filter(e=>!published.includes(e.id)).map(e=>applyStaticEdit(e,edits.find(edit=>edit.page_id===e.id)));res.setHeader('Content-Type','text/plain; charset=utf-8');res.send('# PROMPT\n\n'+entries.map(e=>`- [${e.title}](${exploreUrl(e.id)}?agent_mode=True)`).join('\n')+'\n\n素材分页索引：/api/explore-feed（使用 nextCursor 翻页）。所有内容均使用 /explore/{id}?agent_mode=True 读取纯文本。\n');}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import type {GetServerSideProps} from 'next';
|
||||
import {legacyLayoutIds} from '@/content/layouts/documents';
|
||||
import {guidanceUrl} from '@/content/page-links';
|
||||
import {ExploreDetail} from '@/components/ExploreDetail';
|
||||
import {getEntry,entryText,exploreFeed} from '@/lib/explore';
|
||||
export default ExploreDetail;
|
||||
export const getServerSideProps:GetServerSideProps=async({params,query,res,req})=>{if(legacyLayoutIds.includes(String(params?.id)))return {redirect:{destination:guidanceUrl('premium-layout/router'),permanent:false}};try{const entry=await getEntry(String(params?.id||''));if(!entry)return {notFound:true};if(String(query.agent_mode||'').toLowerCase()==='true'){res.setHeader('Content-Type','text/plain; charset=utf-8');res.setHeader('Cache-Control','no-cache');res.end(req.method==='HEAD'?undefined:entryText(entry));return {props:{}};}return {props:{entry,background:(await exploreFeed()).entries}};}catch{res.statusCode=503;res.setHeader('Retry-After','10');res.end('内容暂时无法读取，请稍后重试');return {props:{}};}};
|
||||
export const getServerSideProps:GetServerSideProps=async({params,query,res,req})=>{try{const entry=await getEntry(String(params?.id||''));if(!entry)return {notFound:true};if(String(query.agent_mode||'').toLowerCase()==='true'){res.setHeader('Content-Type','text/plain; charset=utf-8');res.setHeader('Cache-Control','no-cache');res.end(req.method==='HEAD'?undefined:entryText(entry));return {props:{}};}return {props:{entry,background:(await exploreFeed()).entries}};}catch{res.statusCode=503;res.setHeader('Retry-After','10');res.end('内容暂时无法读取，请稍后重试');return {props:{}};}};
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type {GetServerSideProps} from 'next';
|
||||
import {publicPostId} from '@/lib/model';
|
||||
import {getPost} from '@/lib/library';
|
||||
export default function LegacyPost(){return null;}
|
||||
export const getServerSideProps:GetServerSideProps=async({params,query})=>{const post=await getPost(String(params?.slug||''));return post?{redirect:{destination:'/explore/'+post.id+(String(query.agent_mode||'').toLowerCase()==='true'?'?agent_mode=True':''),permanent:true}}:{notFound:true};};
|
||||
export const getServerSideProps:GetServerSideProps=async({params,query})=>{const post=await getPost(String(params?.slug||''));return post?{redirect:{destination:'/explore/'+publicPostId(post)+(String(query.agent_mode||'').toLowerCase()==='true'?'?agent_mode=True':''),permanent:true}}:{notFound:true};};
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import {test} from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import {randomUUID} from 'node:crypto';
|
||||
import {postInput} from '../src/lib/write';
|
||||
import {noteEditInput,withRevision} from '../src/lib/note-edits';
|
||||
import {publicPostId} from '../src/lib/model';
|
||||
import {entryText,type ExploreEntry} from '../src/lib/explore';
|
||||
test('generic API accepts stable public IDs while retaining UUID storage and rejecting invalid IDs',()=>{
|
||||
const publicId='0123456789abcdef01234567',stored=randomUUID();
|
||||
assert.equal(postInput.parse({kind:'article',title:'文本与图像',publicId}).publicId,publicId);
|
||||
for(const id of ['bad','ABCDEF0123456789abcdef01','1'.repeat(25)])assert.equal(postInput.safeParse({kind:'article',title:'x',publicId:id}).success,false);
|
||||
assert.equal(publicPostId({id:stored,public_id:publicId}),publicId);assert.equal(publicPostId({id:stored}),stored);
|
||||
});
|
||||
test('media/cover edits are optional and change optimistic revisions independently of the text',()=>{
|
||||
const a=randomUUID(),b=randomUUID();
|
||||
const entry:ExploreEntry={id:'0123456789abcdef01234567',title:'笔记',description:'说明',markdown:'# 笔记\n\n正文',namespace:'Main',categories:[],imageCount:1,media:[],color:'#fff',assets:[{id:a,kind:'image',role:'content'}],coverAssetId:a};
|
||||
const before=withRevision(entry).revision;
|
||||
assert.notEqual(withRevision({...entry,coverAssetId:b}).revision,before);
|
||||
assert.notEqual(withRevision({...entry,assets:[{id:b,kind:'image',role:'content'}]}).revision,before);
|
||||
const input={title:'笔记',description:'说明',markdown:'正文',tags:[],revision:before};
|
||||
assert.equal(noteEditInput.parse(input).assets,undefined);
|
||||
assert.equal(noteEditInput.parse({...input,assets:[{id:a}],coverAssetId:null}).assets?.[0].role,'content');
|
||||
});
|
||||
test('AI text preserves JSON, code and media links as ordinary modalities',()=>{
|
||||
const id=randomUUID(),markdown='# 文本说明\n\n```json\n{"type":"text","box":[1,2,3,4]}\n```\n\n```tsx\nexport default function Example(){return <div/>}\n```';
|
||||
const entry:ExploreEntry={id,title:'文本说明',description:'可访问',markdown,namespace:'Main',categories:[],imageCount:1,media:[{kind:'image',url:'/api/media/'+randomUUID(),title:'标注图'}],color:'#fff'};
|
||||
const text=entryText(entry);assert.ok(text.includes(markdown));assert.ok(text.includes(entry.media[0].url));assert.ok(text.includes('/explore/'+id));
|
||||
});
|
||||
@@ -15,16 +15,3 @@ test('independent notes expose their own description, tags and complete image co
|
||||
const workflow=(await getEntry(pageId('guidance:shadow-puppet/workflow')))!;
|
||||
assert.notEqual(workflow.description,note.description);assert.notEqual(workflow.id,note.id);
|
||||
});
|
||||
|
||||
test('agent text preserves tutorial HTML and TSX code without returning an HTML page',async()=>{
|
||||
const entry=(await getEntry(pageId('guidance:premium-layout/ref-01')))!;
|
||||
let body='';const headers:Record<string,string>={};
|
||||
const response={setHeader:(k:string,v:string)=>headers[k]=v,end:(value:string)=>{body=value}};
|
||||
await getServerSideProps({params:{id:entry.id},query:{agent_mode:'True'},res:response,req:{method:'GET'}} as never);
|
||||
assert.match(headers['Content-Type'],/text\/plain/);
|
||||
assert.ok(body.startsWith('# '+entry.title));
|
||||
assert.match(body,/```\n<!doctype html>\n<html lang="zh-CN">/);
|
||||
assert.ok(body.includes('export default function Example'));
|
||||
assert.ok(body.includes('app/designs/ref-01/page.tsx'));
|
||||
assert.equal(body,entryText(entry));
|
||||
});
|
||||
|
||||
@@ -100,6 +100,31 @@ test('real PostgreSQL + S3 notes, flat tags, resource sharing and video processi
|
||||
assert.equal((await request('/api/notes/'+note.id)).entry.title,payload.title,'Static edits outlive content publication');
|
||||
assert.equal((await fetch(base+'/api/notes/missing')).status,404);
|
||||
assert.equal((await fetch(base+'/api/notes/'+note.id,{method:'DELETE'})).status,405);
|
||||
// API-only publication: upload independent assets, retain a stable public ID, then update cover.
|
||||
const postCountBefore=(await db().query('SELECT count(*)::integer AS n FROM posts')).rows[0].n;
|
||||
const assetsForm=new FormData();assetsForm.set('kind','image');assetsForm.set('assetOnly','true');
|
||||
assetsForm.append('files',new Blob([new Uint8Array(a)],{type:'image/png'}),'standalone-a.png');
|
||||
const secondImage=await sharp({create:{width:160,height:220,channels:3,background:'#d7c7b5'}}).png().toBuffer();
|
||||
assetsForm.append('files',new Blob([new Uint8Array(secondImage)],{type:'image/png'}),'standalone-b.png');
|
||||
const uploadedOnly=await fetch(base+'/api/upload',{method:'POST',body:assetsForm});assert.equal(uploadedOnly.status,201,await uploadedOnly.clone().text());
|
||||
const independent=await uploadedOnly.json();assert.equal(independent.assets.length,2);assert.equal(independent.files[0].filename,'standalone-a.png');
|
||||
assert.equal((await db().query('SELECT count(*)::integer AS n FROM posts')).rows[0].n,postCountBefore,'assetOnly never creates a post');
|
||||
const publicId=note.id;
|
||||
const apiBody='## 纯文本资料\n\n```json\n{"type":"text","box":[1,2,3,4]}\n```\n\n```tsx\nexport default function Demo(){return <div/>}\n```';
|
||||
const publishedNote=await request('/api/posts',{kind:'article',title:'API 发布资料',slug:'api-public-'+randomUUID(),publicId,text:apiBody,assets:independent.assets.map((id:string)=>({id})),coverAssetId:independent.assets[0],tags:[child.id]});
|
||||
assert.equal(publishedNote.publicId,publicId);assert.ok(!(await fetch(base+'/api/wiki-index').then(r=>r.text())).includes('['+payload.title+']'),'Migrated code entries are not listed under stale titles');assert.equal(publishedNote.url,'/explore/'+publicId);
|
||||
const publicEntry=(await request('/api/notes/'+publicId)).entry;assert.equal(publicEntry.id,publicId);assert.equal(publicEntry.postSlug,publishedNote.slug);assert.equal(publicEntry.coverAssetId,independent.assets[0]);
|
||||
assert.equal((await request('/api/explore-feed')).entries.filter((e:{id:string})=>e.id===publicId).length,1,'API note replaces rather than duplicates its static predecessor');
|
||||
const publicText=await fetch(base+'/explore/'+publicId+'?agent_mode=True').then(r=>r.text());assert.ok(publicText.includes(apiBody));assert.ok(publicText.includes(independent.assets[0]));
|
||||
const coverPayload={title:publicEntry.title,description:publicEntry.description,markdown:publicEntry.editableMarkdown,tags:[child.id],revision:publicEntry.revision,coverAssetId:independent.assets[1]};
|
||||
const coverSaved=await edit(publicId,coverPayload);assert.equal(coverSaved.status,200,await coverSaved.clone().text());
|
||||
const afterCover=(await request('/api/notes/'+publicId)).entry;assert.equal(afterCover.coverAssetId,independent.assets[1]);assert.equal(afterCover.media[0].url,'/api/media/'+independent.assets[1]);assert.notEqual(afterCover.revision,publicEntry.revision);
|
||||
assert.equal((await edit(publicId,coverPayload)).status,409,'Stale cover edits cannot overwrite current media');
|
||||
const replaceMedia=await edit(publicId,{...coverPayload,revision:afterCover.revision,assets:[{id:independent.assets[1],role:'content'},{id:independent.assets[0],role:'caption'}]});assert.equal(replaceMedia.status,200,await replaceMedia.clone().text());
|
||||
const finalPublic=(await request('/api/notes/'+publicId)).entry;assert.equal(finalPublic.imageCount,1);assert.equal(finalPublic.assets.length,2);assert.equal(finalPublic.editableMarkdown,apiBody);
|
||||
const duplicatePublic=await fetch(base+'/api/posts',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({kind:'article',title:'不覆盖已有 ID',publicId,text:'x'})});assert.equal(duplicatePublic.status,409);
|
||||
assert.equal((await fetch(base+'/p/'+publishedNote.slug,{redirect:'manual'})).headers.get('location'),'/explore/'+publicId);
|
||||
for(const removed of ['/layout-reference/index.html','/layout-reference/ref-01/index.html','/layout-reference/index.json'])assert.equal((await fetch(base+removed)).status,404,removed);
|
||||
for(const doc of ['SKILL','style','upload','checks']){const r=await fetch(base+`/skills/street-people/${doc}.md`);assert.equal(r.status,200);assert.ok(r.headers.get('content-type')?.includes('text/markdown'));const text=await r.text();assert.ok(text.startsWith('# '));assert.ok(!text.includes('<html'));}
|
||||
for(const doc of ['SKILL','workflow','visual-grammar','prompt','delivery']){
|
||||
const path=`/skills/shadow-puppet/${doc}.md`;const response=await fetch(base+path);assert.equal(response.status,200,path);assert.ok(response.headers.get('content-type')?.includes('text/markdown'));assert.ok((await response.text()).startsWith('# '));
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
import React from 'react';
|
||||
import {test} from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import {readFile} from 'node:fs/promises';
|
||||
import {createHash} from 'node:crypto';
|
||||
import path from 'node:path';
|
||||
import sharp from 'sharp';
|
||||
import {renderToStaticMarkup} from 'react-dom/server';
|
||||
import {transformSync} from 'esbuild';
|
||||
import manifest from '../src/content/layouts/reference/manifest.json';
|
||||
import ReferenceLayout,{layoutIds,validateReplacements} from '../src/content/layouts/reference/ReferenceLayout';
|
||||
import {textMergeTarget} from '../src/content/layouts/reference/group-text';
|
||||
import {layoutDocuments,htmlExample,reactExample,nextExample,legacyLayoutIds} from '../src/content/layouts/documents';
|
||||
import {getServerSideProps} from '../src/pages/explore/[id]';
|
||||
const publicRoot=path.resolve(import.meta.dirname,'../public');
|
||||
const asset=(url:string)=>path.join(publicRoot,url);
|
||||
test('27 source layouts have stable row-major IDs, 5/5/5/6/6 positions and scoped components',async()=>{
|
||||
assert.deepEqual(manifest.map(l=>l.id),[...layoutIds]);assert.equal(layoutDocuments.length,28);
|
||||
assert.deepEqual([1,2,3,4,5].map(row=>manifest.filter(l=>l.source.row===row).length),[5,5,5,6,6]);
|
||||
const hash=createHash('sha256').update(await readFile(asset('/layout-reference/source.png'))).digest('hex');
|
||||
for(const l of manifest){assert.equal(l.source.sha256,hash);assert.equal(new Set(l.elements.map(e=>e.id)).size,l.elements.length);for(const e of l.elements){assert.ok(e.asset.startsWith('/layout-reference/'+l.id+'/'));assert.ok(e.pixels>0);assert.equal(e.id[0],{text:'T',image:'I',decoration:'D'}[e.kind]);if(e.reading==='unreadable')assert.equal(e.text,null)}}
|
||||
});
|
||||
test('all 27 extracted layer composites equal their original source crops at every RGB pixel',async()=>{
|
||||
for(const l of manifest){
|
||||
const result=await sharp(asset(l.background)).composite(l.elements.map(e=>({input:asset(e.asset),left:e.box[0],top:e.box[1]}))).removeAlpha().raw().toBuffer();
|
||||
const reference=await sharp(asset(l.reference)).removeAlpha().raw().toBuffer();assert.ok(result.equals(reference),l.id+' physical layer composite must match');
|
||||
}
|
||||
});
|
||||
test('a residual end glyph stays in T01 instead of creating a second word; other columns stay independent',()=>{
|
||||
assert.equal(textMergeTarget([38,24,6,6],[{box:[2,20,38,15],direction:'horizontal'}]),0);
|
||||
assert.equal(textMergeTarget([90,24,6,6],[{box:[2,20,38,15],direction:'horizontal'}]),-1);
|
||||
const first=manifest[0];assert.deepEqual(first.elements.filter(e=>e.kind==='text').map(e=>e.id),['T01','T02']);
|
||||
assert.ok(first.elements.find(e=>e.id==='T01')!.box[0]+first.elements.find(e=>e.id==='T01')!.box[2]>=44);
|
||||
const date=manifest.find(l=>l.id==='ref-21')!.elements.find(e=>e.id==='T03')!;assert.equal(date.text,'03');assert.equal(date.kind,'text');
|
||||
const grayWord=manifest.find(l=>l.id==='ref-23')!.elements.find(e=>e.text==='BULUBLUE')!;assert.equal(grayWord.kind,'text');
|
||||
});
|
||||
test('component replacement rejects foreign IDs and wrong kinds; default React renders exact source assets',()=>{
|
||||
assert.throws(()=>validateReplacements('ref-01',{text:{'ref-02/T01':'wrong'}}));
|
||||
assert.throws(()=>validateReplacements('ref-01',{text:{'ref-01/I01':'wrong'}}));
|
||||
assert.throws(()=>validateReplacements('missing',{}));
|
||||
for(const id of layoutIds){const html=renderToStaticMarkup(<ReferenceLayout id={id}/>);assert.ok(html.includes('data-layout-id="'+id+'"'));assert.equal((html.match(/data-component=/g)||[]).length,manifest.find(l=>l.id===id)!.elements.length)}
|
||||
const edited=renderToStaticMarkup(<ReferenceLayout id="ref-01" text={{'ref-01/T01':'我的品牌'}} images={{'ref-01/I01':'/my-photo.jpg'}}/>);assert.ok(edited.includes('我的品牌'));assert.ok(edited.includes('mask-image'));assert.ok(edited.includes('T01-underlay.png'));
|
||||
});
|
||||
test('HTML, React and Next.js examples bind each source ID and retired approximate posts redirect to Router',async()=>{
|
||||
for(const l of manifest){assert.ok(htmlExample(l.id).includes("const id='"+l.id+"'"));transformSync(reactExample(l.id),{loader:'tsx'});transformSync(nextExample(l.id),{loader:'tsx'});const html=await readFile(asset('/layout-reference/'+l.id+'/index.html'),'utf8');assert.ok(html.includes('data-toggle="text"'));assert.ok(html.includes('data-toggle="image"'));assert.ok(html.includes('manifest='+JSON.stringify(l).replaceAll('<','\\u003c')))}
|
||||
for(const id of legacyLayoutIds){const response=await getServerSideProps({params:{id},query:{},res:{},req:{}} as never);assert.ok('redirect' in response)}
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
# 原图排版的本地创作数据
|
||||
|
||||
本目录是发布客户端的输入，不在 Wiki 应用的 public、pages 或内容注册表中，不提供网页或静态子 URL。
|
||||
|
||||
- `assets/`：原图、裁片、分类标注、构件 PNG、遮罩及新 Router 封面。
|
||||
- `manifest.json`：27 张的源坐标、类型、文字与图形位置，使用 `asset:` 本地逻辑引用。
|
||||
- `post-ids.json`：保留的 28 个普通 post 稳定 ID。
|
||||
- `annotations.json` / `ocr-evidence.json` / `group-text.ts`：识别、人工复核与同词合并的源资料。
|
||||
- `renderer.tsx`：作为 Markdown 代码示例上传的创作端组件，不由 Wiki 编译或运行。
|
||||
|
||||
本地重建封面：`node scripts/layout-reference-cover.mjs`。
|
||||
|
||||
发布预检：`node scripts/publish-layout-reference.mjs --dry-run`。
|
||||
|
||||
实际发布设置 `WIKI_BASE` 为指定 Wiki、`WIKI_PUBLISH_STATE` 为独立的本地检查点路径后运行发布脚本。客户端只调用 `/api/upload`、`/api/posts`、`/api/notes/{id}`、`/api/tags`。先单独上传 PNG，再将媒体 UUID、构件 JSON、源码文本组合为普通 post。所有图片链接都会转换为 `/api/media/{id}`；不上传 HTML 页面、JSON 文件端点或 ZIP 页面。
|
||||
|
||||
检查点记录站点、素材摘要到 UUID 的映射及已发布 post，支持中断后继续。更新已存在的同 slug post 使用 revision、媒体关联与封面字段；遇到占用 ID 则停止，避免覆盖其他内容。请为不同站点使用不同检查点。
|
||||
|
||||
对外是 27 张设计 post + 1 篇 Router。Wiki 不需要为这些内容增加路由、组件或代码注册；客户端生成的正文可通过 `?agent_mode=True` 读取。原图低清，未知微字保留独立字形，不猜写。
|
||||
|
Before Width: | Height: | Size: 468 KiB After Width: | Height: | Size: 468 KiB |
|
Before Width: | Height: | Size: 182 B After Width: | Height: | Size: 182 B |
|
Before Width: | Height: | Size: 282 B After Width: | Height: | Size: 282 B |
|
Before Width: | Height: | Size: 322 B After Width: | Height: | Size: 322 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 234 B After Width: | Height: | Size: 234 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 759 B After Width: | Height: | Size: 759 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 917 B After Width: | Height: | Size: 917 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user