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

@@ -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>
)