idealjs/stack
1
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/design-lab/e2e/visual.spec.ts-snapshots/colors-chromium-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 182 KiB

After

Width:  |  Height:  |  Size: 226 KiB

apps/design-lab/e2e/visual.spec.ts-snapshots/components-chromium-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 155 KiB

After

Width:  |  Height:  |  Size: 177 KiB

apps/design-lab/e2e/visual.spec.ts-snapshots/shelf-chromium-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 135 KiB

After

Width:  |  Height:  |  Size: 159 KiB

apps/design-lab/e2e/visual.spec.ts-snapshots/symbols-chromium-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 187 KiB

After

Width:  |  Height:  |  Size: 207 KiB

apps/design-lab/src/pages/colors/App.tsx
+5 -5
View File
@@ -18,8 +18,8 @@ function Chip({ c, n, h }: { c: string; n: string; h: string }) {
return ( return (
<div> <div>
<div className="h-12 rounded-[10px] border-2 border-ink" style={{ background: c }} /> <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="mt-1 whitespace-nowrap text-small font-bold">{n}</div>
<div className="whitespace-nowrap font-mono text-[9px] text-[#6b6b6b]">{h}</div> <div className="whitespace-nowrap font-mono t-small-mute">{h}</div>
</div> </div>
) )
} }
@@ -59,7 +59,7 @@ function DoDont({ bad, children, text }: { bad?: boolean; children: React.ReactN
{bad ? '✗' : '✓'} {bad ? '✗' : '✓'}
</span> </span>
{children} {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> </div>
) )
} }
@@ -76,7 +76,7 @@ export function App() {
<div className="h-11 w-[88px]" style={{ background: p.b }} /> <div className="h-11 w-[88px]" style={{ background: p.b }} />
</div> </div>
<div className="mt-1.5 text-[11px] font-bold">{p.name}</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>
))} ))}
</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> <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> <b className="text-[13px]">{r.name}</b>
</div> </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"> <div className="grid grid-cols-2 gap-3">
<DoDont bad text={r.badCap}>{r.badDemo}</DoDont> <DoDont bad text={r.badCap}>{r.badDemo}</DoDont>
<DoDont text={r.goodCap}>{r.goodDemo}</DoDont> <DoDont text={r.goodCap}>{r.goodDemo}</DoDont>
apps/design-lab/src/pages/shelf/App.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export function App() {
> >
<MemphisCard chapter={CHAPTERS[5]} compact /> <MemphisCard chapter={CHAPTERS[5]} compact />
</div> </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"> <div className="absolute left-[60px] top-[440px] flex gap-4">
<Ticket chapter={CHAPTERS[2]} done /> <Ticket chapter={CHAPTERS[2]} done />
<Ticket chapter={CHAPTERS[5]} done={false} /> <Ticket chapter={CHAPTERS[5]} done={false} />
apps/design-lab/src/pages/symbols/App.tsx
+6 -6
View File
@@ -37,14 +37,14 @@ export function App() {
<div key={s.n} className="text-center"> <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="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="mt-1.5 text-[11px] font-bold">{s.n}</div>
<div className="text-[9.5px] leading-tight text-[#6b6b6b]">{s.m}</div> <div className="t-small-mute leading-tight">{s.m}</div>
<div className="mt-0.5 text-[9px] text-[#8a8a8a]">{s.s}</div> <div className="mt-0.5 t-small-mute">{s.s}</div>
</div> </div>
))} ))}
</div> </div>
</Section> </Section>
<Section label="词汇表 · 父子层级" note="与 ai-era-tutorial 词汇表对齐"> <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> <thead>
<tr className="border-b-2 border-[#d5d5d3] text-left text-ink"> <tr className="border-b-2 border-[#d5d5d3] text-left text-ink">
<th className="w-24 py-1 pr-2">父词</th> <th className="w-24 py-1 pr-2">父词</th>
@@ -77,7 +77,7 @@ export function App() {
</>} </>}
</svg> </svg>
<div className="mt-1 text-[13px] font-extrabold">{l.n}</div> <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>
))} ))}
<div className="rounded-xl border-2 border-ink bg-white p-3"> <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" /> <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> </svg>
<div className="mt-1 text-[13px] font-extrabold">波浪带 ＝ 代理交接</div> <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>
</div> </div>
</Section> </Section>
@@ -93,7 +93,7 @@ export function App() {
<div className="flex flex-wrap items-start gap-6"> <div className="flex flex-wrap items-start gap-6">
<Ticket chapter={CHAPTERS[1]} done /> <Ticket chapter={CHAPTERS[1]} done />
<Ticket chapter={CHAPTERS[5]} done={false} /> <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 裁出单一描边圆角。票号＝章程序号。 <b>完成＝沿撕线打双孔</b>（半圆缺口）；未开始撕线为实线、无孔。头部色块无独立描边，由票体 overflow-hidden 裁出单一描边圆角。票号＝章程序号。
</p> </p>
</div> </div>
apps/tutorial/src/pages/design-colors/App.tsx
+5 -5
View File
@@ -18,8 +18,8 @@ function Chip({ c, n, h }: { c: string; n: string; h: string }) {
return ( return (
<div> <div>
<div className="h-12 rounded-[10px] border-2 border-ink" style={{ background: c }} /> <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="mt-1 whitespace-nowrap text-small font-bold">{n}</div>
<div className="whitespace-nowrap font-mono text-[9px] text-[#6b6b6b]">{h}</div> <div className="whitespace-nowrap font-mono t-small-mute">{h}</div>
</div> </div>
) )
} }
@@ -59,7 +59,7 @@ function DoDont({ bad, children, text }: { bad?: boolean; children: React.ReactN
{bad ? '✗' : '✓'} {bad ? '✗' : '✓'}
</span> </span>
{children} {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> </div>
) )
} }
@@ -76,7 +76,7 @@ export function App() {
<div className="h-11 w-[88px]" style={{ background: p.b }} /> <div className="h-11 w-[88px]" style={{ background: p.b }} />
</div> </div>
<div className="mt-1.5 text-[11px] font-bold">{p.name}</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>
))} ))}
</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> <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> <b className="text-[13px]">{r.name}</b>
</div> </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"> <div className="grid grid-cols-2 gap-3">
<DoDont bad text={r.badCap}>{r.badDemo}</DoDont> <DoDont bad text={r.badCap}>{r.badDemo}</DoDont>
<DoDont text={r.goodCap}>{r.goodDemo}</DoDont> <DoDont text={r.goodCap}>{r.goodDemo}</DoDont>
apps/tutorial/src/pages/design-examples/App.tsx
+1 -1
View File
@@ -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-[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-[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-[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"> <div className="absolute left-[60px] top-[440px] flex gap-4">
<Ticket chapter={CHAPTERS[2]} done /> <Ticket chapter={CHAPTERS[2]} done />
<Ticket chapter={CHAPTERS[5]} done={false} /> <Ticket chapter={CHAPTERS[5]} done={false} />
apps/tutorial/src/pages/design-symbols/App.tsx
+6 -6
View File
@@ -37,14 +37,14 @@ export function App() {
<div key={s.n} className="text-center"> <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="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="mt-1.5 text-[11px] font-bold">{s.n}</div>
<div className="text-[9.5px] leading-tight text-[#6b6b6b]">{s.m}</div> <div className="t-small-mute leading-tight">{s.m}</div>
<div className="mt-0.5 text-[9px] text-[#8a8a8a]">{s.s}</div> <div className="mt-0.5 t-small-mute">{s.s}</div>
</div> </div>
))} ))}
</div> </div>
</Section> </Section>
<Section label="词汇表 · 父子层级" note="与 ai-era-tutorial 词汇表对齐"> <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> <thead>
<tr className="border-b-2 border-[#d5d5d3] text-left text-ink"> <tr className="border-b-2 border-[#d5d5d3] text-left text-ink">
<th className="w-24 py-1 pr-2">父词</th> <th className="w-24 py-1 pr-2">父词</th>
@@ -77,7 +77,7 @@ export function App() {
</>} </>}
</svg> </svg>
<div className="mt-1 text-[13px] font-extrabold">{l.n}</div> <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>
))} ))}
<div className="rounded-xl border-2 border-ink bg-white p-3"> <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" /> <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> </svg>
<div className="mt-1 text-[13px] font-extrabold">波浪带 ＝ 代理交接</div> <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>
</div> </div>
</Section> </Section>
@@ -93,7 +93,7 @@ export function App() {
<div className="flex flex-wrap items-start gap-6"> <div className="flex flex-wrap items-start gap-6">
<Ticket chapter={CHAPTERS[1]} done /> <Ticket chapter={CHAPTERS[1]} done />
<Ticket chapter={CHAPTERS[5]} done={false} /> <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 裁出单一描边圆角。票号＝章程序号。 <b>完成＝沿撕线打双孔</b>（半圆缺口）；未开始撕线为实线、无孔。头部色块无独立描边，由票体 overflow-hidden 裁出单一描边圆角。票号＝章程序号。
</p> </p>
</div> </div>
packages/design-system/src/components/EntryGuide.tsx
+5 -5
View File
@@ -23,22 +23,22 @@ export function EntryGuide({
> >
{p.icon} {p.icon}
</span> </span>
<b className="text-[13px]">{p.name}</b> <b className="text-t3">{p.name}</b>
</div> </div>
<div className="mt-2 flex flex-wrap items-center gap-1.5"> <div className="mt-2 flex flex-wrap items-center gap-1.5">
{p.path.map((id, i) => ( {p.path.map((id, i) => (
<span key={id} className="flex items-center gap-1.5"> <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 ? ( {linkChapter ? (
<a <a
href={`/ch${id}.html`} 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} {id === p.entry && ['①', '②', '③'][profiles.indexOf(p)]} {chapters[id].title}
</a> </a>
) : ( ) : (
<span <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} {id === p.entry && ['①', '②', '③'][profiles.indexOf(p)]} {chapters[id].title}
</span> </span>
@@ -46,7 +46,7 @@ export function EntryGuide({
</span> </span>
))} ))}
</div> </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>
))} ))}
</div> </div>
packages/design-system/src/components/MemphisCard.tsx
+5 -5
View File
@@ -110,22 +110,22 @@ export function MemphisCard({
chapter.gifUrl ? ( chapter.gifUrl ? (
<img src={chapter.gifUrl} alt={chapter.target.expectation} className="h-full w-full object-cover" /> <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} ▶ {chapter.target.expectation}
</span> </span>
) )
) : flip ? ( ) : 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} {chapter.target.goal}
</span> </span>
) : zoneText ? ( ) : 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 是相框的视觉主体（对齐设计稿解剖卡） */ /* 静置态：章节 emoji 是相框的视觉主体（对齐设计稿解剖卡） */
<span style={{ fontSize: compact ? '28px' : '40px' }}>{chapter.emoji}</span> <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' : ''} 预期结果{showGif ? ' · GIF' : ''}
</span> </span>
<Ring size={16} className="absolute bottom-1.5 right-1.5" /> <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"> <div className="mt-2 flex items-center gap-2">
<Tri size={14} /> <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} {chapter.title}
</b> </b>
{!compact && <BrickDots bricks={chapter.target.bricks} />} {!compact && <BrickDots bricks={chapter.target.bricks} />}
packages/design-system/src/components/Ticket.tsx
+8 -8
View File
@@ -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 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"> <div className="flex-1 py-2 pl-2.5 pr-2">
<b className="text-[12.5px]">{chapter.title}</b> <b className="text-content font-bold">{chapter.title}</b>
<div className="mt-0.5 font-mono text-[8.5px] text-mute"> <div className="mt-0.5 font-mono t-small-mute">
No. {String(chapter.id).padStart(3, '0')} · {done ? '已完成（打孔）' : '未开始（无孔）'} No. {String(chapter.id).padStart(3, '0')} · {done ? '已完成（打孔）' : '未开始（无孔）'}
</div> </div>
</div> </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')} №{String(chapter.id).padStart(2, '0')}
</div> </div>
@@ -49,15 +49,15 @@ export function AssignBlock({
miss: { how: string; looks: string } miss: { how: string; looks: string }
}) { }) {
return ( 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"> <div className="flex items-center gap-2">
<svg width="16" height="16" viewBox="0 0 18 18" aria-hidden> <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-clash2b)" strokeWidth="3.5" strokeLinecap="round" />
<path d="M9 1 v16 M1 9 h16" stroke="var(--color-ink)" strokeWidth="1.2" /> <path d="M9 1 v16 M1 9 h16" stroke="var(--color-ink)" strokeWidth="1.2" />
</svg> </svg>
<b className="text-[13px]">{title}</b> <b className="text-t3">{title}</b>
</div> </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> <div>
<b>位置</b>：{pos} <b>位置</b>：{pos}
</div> </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" /> <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> </svg>
<div> <div>
<b className="text-[11.5px]">脱靶 · {miss.how}</b> <b className="t-small-strong">脱靶 · {miss.how}</b>
<p className="m-0 mt-0.5 text-[10.5px] leading-relaxed text-body">{miss.looks}</p> <p className="m-0 mt-0.5 text-small leading-relaxed text-body">{miss.looks}</p>
</div> </div>
</div> </div>
</div> </div>
packages/design-system/src/components/shapes.tsx
+2 -2
View File
@@ -74,8 +74,8 @@ export function MissMark({ how, looks }: { how: string; looks: string }) {
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Tremble size={22} className="mt-0.5 shrink-0" /> <Tremble size={22} className="mt-0.5 shrink-0" />
<div> <div>
<b className="text-[13px]">脱靶 · {how}</b> <b className="text-content font-bold">脱靶 · {how}</b>
<p className="m-0 mt-0.5 text-[12px] leading-relaxed text-body">{looks}</p> <p className="m-0 mt-0.5 text-small leading-relaxed text-body">{looks}</p>
</div> </div>
</div> </div>
) )