fix: 全站字号对齐字体系统——组件 8.5~14px 硬编码清零(票券 16/12、指派块 16 且加宽 320 防溢出、章卡标题 t3、相框标签 12);规格页注记<11px 清零;场景指派块 860→820 防出界;design-lab 基线重生成 28/28

This commit is contained in:
cqh963852 committed 2026-10-08 15:18:19 +08:00
1 parent 4f4a8df74a
commit cf611dd9be
14 files changed
+44 -44

No files matched your search

Binary file not shown.

Before

Width:  |  Height:  |  Size: 182 KiB

After

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 155 KiB

After

Width:  |  Height:  |  Size: 177 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 135 KiB

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 KiB

After

Width:  |  Height:  |  Size: 207 KiB

+5 -5
View File
@@ -18,8 +18,8 @@ function Chip({ c, n, h }: { c: string; n: string; h: string }) {
return (
<div>
<div className="h-12 rounded-[10px] border-2 border-ink" style={{ background: c }} />
<div className="mt-1 whitespace-nowrap text-[10.5px] font-bold">{n}</div>
<div className="whitespace-nowrap font-mono text-[9px] text-[#6b6b6b]">{h}</div>
<div className="mt-1 whitespace-nowrap text-small font-bold">{n}</div>
<div className="whitespace-nowrap font-mono t-small-mute">{h}</div>
</div>
)
}
@@ -59,7 +59,7 @@ function DoDont({ bad, children, text }: { bad?: boolean; children: React.ReactN
{bad ? '✗' : '✓'}
</span>
{children}
<p className="m-0 flex-1 text-[11.5px] leading-snug text-body">{text}</p>
<p className="m-0 flex-1 text-small leading-snug text-body">{text}</p>
</div>
)
}
@@ -76,7 +76,7 @@ export function App() {
<div className="h-11 w-[88px]" style={{ background: p.b }} />
</div>
<div className="mt-1.5 text-[11px] font-bold">{p.name}</div>
<div className="text-[10px] text-[#555]">{p.use}</div>
<div className="text-small text-[#555]">{p.use}</div>
</div>
))}
</div>
@@ -95,7 +95,7 @@ export function App() {
<span className="flex h-[18px] w-[18px] shrink-0 translate-y-[2px] items-center justify-center rounded-full border-2 border-ink bg-ink text-[10px] font-extrabold text-paper">{i + 1}</span>
<b className="text-[13px]">{r.name}</b>
</div>
<p className="m-0 mt-1.5 mb-2 max-w-[760px] text-[11.5px] leading-relaxed text-body">{r.why}</p>
<p className="m-0 mt-1.5 mb-2 max-w-[760px] text-content leading-relaxed text-body">{r.why}</p>
<div className="grid grid-cols-2 gap-3">
<DoDont bad text={r.badCap}>{r.badDemo}</DoDont>
<DoDont text={r.goodCap}>{r.goodDemo}</DoDont>
+1 -1
View File
@@ -60,7 +60,7 @@ export function App() {
>
<MemphisCard chapter={CHAPTERS[5]} compact />
</div>
<div className="absolute left-[860px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
<div className="absolute left-[820px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
<div className="absolute left-[60px] top-[440px] flex gap-4">
<Ticket chapter={CHAPTERS[2]} done />
<Ticket chapter={CHAPTERS[5]} done={false} />
+6 -6
View File
@@ -37,14 +37,14 @@ export function App() {
<div key={s.n} className="text-center">
<div className="mx-auto flex h-[46px] w-[46px] items-center justify-center rounded-xl border-2 border-ink bg-white">{s.el}</div>
<div className="mt-1.5 text-[11px] font-bold">{s.n}</div>
<div className="text-[9.5px] leading-tight text-[#6b6b6b]">{s.m}</div>
<div className="mt-0.5 text-[9px] text-[#8a8a8a]">{s.s}</div>
<div className="t-small-mute leading-tight">{s.m}</div>
<div className="mt-0.5 t-small-mute">{s.s}</div>
</div>
))}
</div>
</Section>
<Section label="词汇表 · 父子层级" note="与 ai-era-tutorial 词汇表对齐">
<table className="w-full border-collapse text-[11.5px] text-body">
<table className="w-full border-collapse text-small text-body">
<thead>
<tr className="border-b-2 border-[#d5d5d3] text-left text-ink">
<th className="w-24 py-1 pr-2">父词</th>
@@ -77,7 +77,7 @@ export function App() {
</>}
</svg>
<div className="mt-1 text-[13px] font-extrabold">{l.n}</div>
<div className="text-[11px] text-[#555]">{l.m}</div>
<div className="text-small text-[#555]">{l.m}</div>
</div>
))}
<div className="rounded-xl border-2 border-ink bg-white p-3">
@@ -85,7 +85,7 @@ export function App() {
<path d="M12 22 q10 -22 20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0" stroke="var(--color-clash3b)" strokeWidth="3" fill="none" strokeLinecap="round" />
</svg>
<div className="mt-1 text-[13px] font-extrabold">波浪带 = 代理交接</div>
<div className="text-[11px] text-[#555]">agent 边界 · 区域标记,不连线</div>
<div className="text-small text-[#555]">agent 边界 · 区域标记,不连线</div>
</div>
</div>
</Section>
@@ -93,7 +93,7 @@ export function App() {
<div className="flex flex-wrap items-start gap-6">
<Ticket chapter={CHAPTERS[1]} done />
<Ticket chapter={CHAPTERS[5]} done={false} />
<p className="m-0 max-w-[280px] flex-1 text-[11.5px] leading-relaxed text-body">
<p className="m-0 max-w-[280px] flex-1 text-content leading-relaxed text-body">
<b>完成=沿撕线打双孔</b>(半圆缺口);未开始撕线为实线、无孔。头部色块无独立描边,由票体 overflow-hidden 裁出单一描边圆角。票号=章程序号。
</p>
</div>
@@ -18,8 +18,8 @@ function Chip({ c, n, h }: { c: string; n: string; h: string }) {
return (
<div>
<div className="h-12 rounded-[10px] border-2 border-ink" style={{ background: c }} />
<div className="mt-1 whitespace-nowrap text-[10.5px] font-bold">{n}</div>
<div className="whitespace-nowrap font-mono text-[9px] text-[#6b6b6b]">{h}</div>
<div className="mt-1 whitespace-nowrap text-small font-bold">{n}</div>
<div className="whitespace-nowrap font-mono t-small-mute">{h}</div>
</div>
)
}
@@ -59,7 +59,7 @@ function DoDont({ bad, children, text }: { bad?: boolean; children: React.ReactN
{bad ? '✗' : '✓'}
</span>
{children}
<p className="m-0 flex-1 text-[11.5px] leading-snug text-body">{text}</p>
<p className="m-0 flex-1 text-small leading-snug text-body">{text}</p>
</div>
)
}
@@ -76,7 +76,7 @@ export function App() {
<div className="h-11 w-[88px]" style={{ background: p.b }} />
</div>
<div className="mt-1.5 text-[11px] font-bold">{p.name}</div>
<div className="text-[10px] text-[#555]">{p.use}</div>
<div className="text-small text-[#555]">{p.use}</div>
</div>
))}
</div>
@@ -95,7 +95,7 @@ export function App() {
<span className="flex h-[18px] w-[18px] shrink-0 translate-y-[2px] items-center justify-center rounded-full border-2 border-ink bg-ink text-[10px] font-extrabold text-paper">{i + 1}</span>
<b className="text-[13px]">{r.name}</b>
</div>
<p className="m-0 mt-1.5 mb-2 max-w-[760px] text-[11.5px] leading-relaxed text-body">{r.why}</p>
<p className="m-0 mt-1.5 mb-2 max-w-[760px] text-content leading-relaxed text-body">{r.why}</p>
<div className="grid grid-cols-2 gap-3">
<DoDont bad text={r.badCap}>{r.badDemo}</DoDont>
<DoDont text={r.goodCap}>{r.goodDemo}</DoDont>
@@ -31,7 +31,7 @@ export function App() {
<div className="absolute left-[40px] top-[110px] w-[250px]"><MemphisCard chapter={CHAPTERS[1]} entry={1} /></div>
<div className="absolute left-[380px] top-[44px] w-[250px] -rotate-1"><MemphisCard chapter={CHAPTERS[2]} entry={2} /></div>
<div className="absolute left-[700px] top-[44px] w-[140px]"><MemphisCard chapter={CHAPTERS[5]} compact /></div>
<div className="absolute left-[860px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
<div className="absolute left-[820px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
<div className="absolute left-[60px] top-[440px] flex gap-4">
<Ticket chapter={CHAPTERS[2]} done />
<Ticket chapter={CHAPTERS[5]} done={false} />
@@ -37,14 +37,14 @@ export function App() {
<div key={s.n} className="text-center">
<div className="mx-auto flex h-[46px] w-[46px] items-center justify-center rounded-xl border-2 border-ink bg-white">{s.el}</div>
<div className="mt-1.5 text-[11px] font-bold">{s.n}</div>
<div className="text-[9.5px] leading-tight text-[#6b6b6b]">{s.m}</div>
<div className="mt-0.5 text-[9px] text-[#8a8a8a]">{s.s}</div>
<div className="t-small-mute leading-tight">{s.m}</div>
<div className="mt-0.5 t-small-mute">{s.s}</div>
</div>
))}
</div>
</Section>
<Section label="词汇表 · 父子层级" note="与 ai-era-tutorial 词汇表对齐">
<table className="w-full border-collapse text-[11.5px] text-body">
<table className="w-full border-collapse text-small text-body">
<thead>
<tr className="border-b-2 border-[#d5d5d3] text-left text-ink">
<th className="w-24 py-1 pr-2">父词</th>
@@ -77,7 +77,7 @@ export function App() {
</>}
</svg>
<div className="mt-1 text-[13px] font-extrabold">{l.n}</div>
<div className="text-[11px] text-[#555]">{l.m}</div>
<div className="text-small text-[#555]">{l.m}</div>
</div>
))}
<div className="rounded-xl border-2 border-ink bg-white p-3">
@@ -85,7 +85,7 @@ export function App() {
<path d="M12 22 q10 -22 20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0" stroke="var(--color-clash3b)" strokeWidth="3" fill="none" strokeLinecap="round" />
</svg>
<div className="mt-1 text-[13px] font-extrabold">波浪带 = 代理交接</div>
<div className="text-[11px] text-[#555]">agent 边界 · 区域标记,不连线</div>
<div className="text-small text-[#555]">agent 边界 · 区域标记,不连线</div>
</div>
</div>
</Section>
@@ -93,7 +93,7 @@ export function App() {
<div className="flex flex-wrap items-start gap-6">
<Ticket chapter={CHAPTERS[1]} done />
<Ticket chapter={CHAPTERS[5]} done={false} />
<p className="m-0 max-w-[280px] flex-1 text-[11.5px] leading-relaxed text-body">
<p className="m-0 max-w-[280px] flex-1 text-content leading-relaxed text-body">
<b>完成=沿撕线打双孔</b>(半圆缺口);未开始撕线为实线、无孔。头部色块无独立描边,由票体 overflow-hidden 裁出单一描边圆角。票号=章程序号。
</p>
</div>
@@ -23,22 +23,22 @@ export function EntryGuide({
>
{p.icon}
</span>
<b className="text-[13px]">{p.name}</b>
<b className="text-t3">{p.name}</b>
</div>
<div className="mt-2 flex flex-wrap items-center gap-1.5">
{p.path.map((id, i) => (
<span key={id} className="flex items-center gap-1.5">
{i > 0 && <span className="text-[10px] text-mute">→</span>}
{i > 0 && <span className="text-small text-mute">→</span>}
{linkChapter ? (
<a
href={`/ch${id}.html`}
className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-[10.5px] no-underline ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-small no-underline ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
>
{id === p.entry && ['①', '②', '③'][profiles.indexOf(p)]} {chapters[id].title}
</a>
) : (
<span
className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-[10.5px] ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-small ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
>
{id === p.entry && ['①', '②', '③'][profiles.indexOf(p)]} {chapters[id].title}
</span>
@@ -46,7 +46,7 @@ export function EntryGuide({
</span>
))}
</div>
<p className="m-0 mt-2 text-[10px] leading-relaxed text-mute">{p.note}</p>
<p className="m-0 mt-2 t-small-mute leading-relaxed">{p.note}</p>
</div>
))}
</div>
@@ -110,22 +110,22 @@ export function MemphisCard({
chapter.gifUrl ? (
<img src={chapter.gifUrl} alt={chapter.target.expectation} className="h-full w-full object-cover" />
) : (
<span className="px-3 text-center text-[11px] font-bold leading-snug text-paper">
<span className="px-3 text-center text-small font-bold leading-snug text-paper">
▶ {chapter.target.expectation}
</span>
)
) : flip ? (
<span className="px-3 text-center text-[11px] leading-snug text-ink/80 mix-blend-multiply">
<span className="px-3 text-center text-small leading-snug text-ink/80 mix-blend-multiply">
{chapter.target.goal}
</span>
) : zoneText ? (
/* 静置态(用法示例):过程文字骑在相框里,价值区短语带荧光标记 */
<span className="px-3 text-center text-[11.5px] font-semibold leading-snug text-ink">{zoneText}</span>
<span className="px-3 text-center text-small font-semibold leading-snug text-ink">{zoneText}</span>
) : (
/* 静置态:章节 emoji 是相框的视觉主体(对齐设计稿解剖卡) */
<span style={{ fontSize: compact ? '28px' : '40px' }}>{chapter.emoji}</span>
)}
<span className="absolute left-1.5 top-1 text-[9px] font-bold tracking-wide text-paper">
<span className="absolute left-1.5 top-1 text-small font-bold tracking-wide text-paper">
预期结果{showGif ? ' · GIF' : ''}
</span>
<Ring size={16} className="absolute bottom-1.5 right-1.5" />
@@ -133,7 +133,7 @@ export function MemphisCard({
{/* 卡头:▲ 目标 + 标题 + ● 积木点列 */}
<div className="mt-2 flex items-center gap-2">
<Tri size={14} />
<b className="flex-1 text-[14px] text-[#2b1d10] [text-shadow:0_1px_1px_rgba(255,255,255,0.9)]">
<b className="flex-1 text-t3 text-[#2b1d10] [text-shadow:0_1px_1px_rgba(255,255,255,0.9)]">
{chapter.title}
</b>
{!compact && <BrickDots bricks={chapter.target.bricks} />}
@@ -12,13 +12,13 @@ export function Ticket({ chapter, done }: { chapter: Chapter; done: boolean }) {
{/* 头部媒体块:章节色纯填充,无独立边框(由票体裁切) */}
<div className="flex w-14 shrink-0 items-center justify-center text-[22px]" style={{ background: chapter.color }}>{chapter.emoji}</div>
<div className="flex-1 py-2 pl-2.5 pr-2">
<b className="text-[12.5px]">{chapter.title}</b>
<div className="mt-0.5 font-mono text-[8.5px] text-mute">
<b className="text-content font-bold">{chapter.title}</b>
<div className="mt-0.5 font-mono t-small-mute">
No. {String(chapter.id).padStart(3, '0')} · {done ? '已完成(打孔)' : '未开始(无孔)'}
</div>
</div>
<div
className={`flex w-[42px] items-center justify-center font-mono text-[9.5px] text-mute ${done ? 'border-l-[1.5px] border-dashed border-ink' : 'border-l-[1.5px] border-solid border-ink'}`}
className={`flex w-[42px] items-center justify-center font-mono text-small text-mute ${done ? 'border-l-[1.5px] border-dashed border-ink' : 'border-l-[1.5px] border-solid border-ink'}`}
>
№{String(chapter.id).padStart(2, '0')}
</div>
@@ -49,15 +49,15 @@ export function AssignBlock({
miss: { how: string; looks: string }
}) {
return (
<div data-comp="assign" className="w-[260px] rounded-xl border-2 border-ink bg-paper p-3 shadow-hard">
<div data-comp="assign" className="w-[320px] rounded-xl border-2 border-ink bg-paper p-4 shadow-hard">
<div className="flex items-center gap-2">
<svg width="16" height="16" viewBox="0 0 18 18" aria-hidden>
<path d="M9 1 v16 M1 9 h16" stroke="var(--color-clash2b)" strokeWidth="3.5" strokeLinecap="round" />
<path d="M9 1 v16 M1 9 h16" stroke="var(--color-ink)" strokeWidth="1.2" />
</svg>
<b className="text-[13px]">{title}</b>
<b className="text-t3">{title}</b>
</div>
<div className="mt-1.5 space-y-0.5 text-[11px] leading-relaxed text-body">
<div className="mt-2 space-y-1 text-content leading-relaxed text-body">
<div>
<b>位置</b>:{pos}
</div>
@@ -74,8 +74,8 @@ export function AssignBlock({
<path d="M 12 32 L 8 27 L 16 22 L 8 17 L 16 12 L 12 7 L 14 2" fill="none" stroke="var(--color-clash1a)" strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" />
</svg>
<div>
<b className="text-[11.5px]">脱靶 · {miss.how}</b>
<p className="m-0 mt-0.5 text-[10.5px] leading-relaxed text-body">{miss.looks}</p>
<b className="t-small-strong">脱靶 · {miss.how}</b>
<p className="m-0 mt-0.5 text-small leading-relaxed text-body">{miss.looks}</p>
</div>
</div>
</div>
@@ -74,8 +74,8 @@ export function MissMark({ how, looks }: { how: string; looks: string }) {
<div className="flex items-start gap-3">
<Tremble size={22} className="mt-0.5 shrink-0" />
<div>
<b className="text-[13px]">脱靶 · {how}</b>
<p className="m-0 mt-0.5 text-[12px] leading-relaxed text-body">{looks}</p>
<b className="text-content font-bold">脱靶 · {how}</b>
<p className="m-0 mt-0.5 text-small leading-relaxed text-body">{looks}</p>
</div>
</div>
)