From a65a6d96b1a6128ccf1dd3495e48b849ba0f2f73 Mon Sep 17 00:00:00 2001
From: cqh963852 <cqh963852@hotmail.com>
Date: Thu, 8 Oct 2026 12:08:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B8=83=E5=B1=80=E4=B8=89=E4=BF=AE?=
 =?UTF-8?q?=E2=80=94=E2=80=94navbar=20=E4=B8=8B=E6=96=B9=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=2032px=20=E9=97=B4=E8=B7=9D=EF=BC=88=E7=AB=A0=E8=8A=82?=
 =?UTF-8?q?=E9=A1=B5=E6=A8=AA=E5=B9=85=E9=9B=B6=E9=97=B4=E8=B7=9D=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=EF=BC=89=EF=BC=9B=E9=80=89=E4=B8=AD=E9=A1=B9=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=EF=BC=9D=E7=AB=A0=E8=8A=82=E8=89=B2=EF=BC=88=E4=B8=8E?=
 =?UTF-8?q?=E7=AB=A0=E5=A4=B4=E6=A8=AA=E5=B9=85=E7=BB=9F=E4=B8=80=EF=BC=8C?=
 =?UTF-8?q?=E4=B9=A6=E6=9E=B6=E9=80=89=E4=B8=AD=20ink=EF=BC=89=EF=BC=9B?=
 =?UTF-8?q?=E5=AD=97=E4=BD=93=E7=B3=BB=E7=BB=9F=EF=BC=8816px=20=E5=9F=BA?=
 =?UTF-8?q?=E5=87=86=3D=E6=AD=A3=E6=96=87=20/=20t1-t3=20=E4=B8=89=E7=BA=A7?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=20/=20=E5=B0=8F=E5=AD=97=E4=B8=A4=E6=80=81?=
 =?UTF-8?q?=20mute=C2=B7strong=20/=20=E5=A4=A7=E5=AD=97=E4=B8=A4=E6=80=81?=
 =?UTF-8?q?=20t1=C2=B7=E5=B9=BD=E7=81=B5=20display=20=E7=AB=A0=E5=8F=B7?=
 =?UTF-8?q?=EF=BC=89=E5=85=A8=E7=AB=99=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/tutorial/src/components/ChapterPage.tsx | 27 ++++++-----
 apps/tutorial/src/lib/ui.tsx                 | 51 +++++++++++---------
 apps/tutorial/src/pages/index/App.tsx        |  1 +
 apps/tutorial/src/styles/tokens.css          | 37 ++++++++++++++
 4 files changed, 82 insertions(+), 34 deletions(-)

diff --git a/apps/tutorial/src/components/ChapterPage.tsx b/apps/tutorial/src/components/ChapterPage.tsx
index 61760de..69308fe 100644
--- a/apps/tutorial/src/components/ChapterPage.tsx
+++ b/apps/tutorial/src/components/ChapterPage.tsx
@@ -23,15 +23,18 @@ export function ChapterPage({ id }: { id: ChapterId }) {
     <Page active={id}>
       {/* 章头：与书架相框共享 view-transition-name —— 点卡片进来时相框飞进来变成章头 */}
       <div
-        className="flex items-center gap-4 rounded-2xl border-2 border-ink p-5 shadow-hard"
+        className="relative flex items-center gap-4 overflow-hidden rounded-2xl border-2 border-ink p-5 shadow-hard"
         style={{ background: ch.color, viewTransitionName: `ch-${id}` } as CSSProperties}
       >
+        <span className="t-display pointer-events-none absolute -right-2 -top-3 select-none" aria-hidden>
+          0{id}
+        </span>
         <span className="text-[44px] leading-none">{ch.emoji}</span>
         <div className="flex-1">
-          <h1 className="m-0 text-[24px] font-extrabold text-ink">
+          <h1 className="m-0 text-t1 font-extrabold text-ink">
             第 {id} 章 · {ch.title}
           </h1>
-          <div className="mt-1.5 flex flex-wrap gap-x-6 gap-y-1 text-[12px] font-semibold text-ink">
+          <div className="mt-2 flex flex-wrap gap-x-6 gap-y-1 t-small-strong">
             <span>▲ 目标：{ch.target.goal}</span>
             <span>○ 预期：{ch.target.expectation}</span>
             <span className="flex items-center gap-1.5">
@@ -52,18 +55,20 @@ export function ChapterPage({ id }: { id: ChapterId }) {
                     {i + 1}
                   </span>
                   {s.kind === 'value' ? (
-                    <Mark className="text-[13.5px]">{s.title}</Mark>
+                    <Mark className="text-t3">{s.title}</Mark>
                   ) : (
-                    <span className="flex items-center gap-1.5 text-[13.5px] font-bold text-ink">
+                    <span className="flex items-center gap-1.5 text-t3 font-bold text-ink">
                       <Wave size={30} />
                       {s.title}
                       <span className="rounded-full bg-clash3b/15 px-2 py-0.5 text-[10.5px]">代理区 · 交给 agent</span>
                     </span>
                   )}
                 </div>
-                <p className="m-0 mt-2 text-[12.5px] leading-relaxed text-body">{s.what}</p>
-                <p className="m-0 mt-1.5 text-[12px] text-ink">
-                  <b>验收</b>：{s.accept}
+                <p className="m-0 mt-2.5 text-content text-body">{s.what}</p>
+                <p className="m-0 mt-2 text-content text-body">
+                  <b className="t-small-strong">验收</b>
+                  <span className="mx-1.5 text-mute">·</span>
+                  {s.accept}
                 </p>
               </li>
             ))}
@@ -76,9 +81,9 @@ export function ChapterPage({ id }: { id: ChapterId }) {
               <div key={b.name} className="rounded-xl border-2 border-ink bg-paper p-3.5 shadow-hard">
                 <div className="flex items-center gap-2">
                   <Tri size={13} />
-                  <b className="text-[13px]">{b.name}</b>
+                  <b className="text-t3">{b.name}</b>
                 </div>
-                <p className="m-0 mt-1.5 text-[11.5px] leading-relaxed text-body">
+                <p className="m-0 mt-2 text-small leading-relaxed text-body">
                   <b>是什么</b>：{b.what}
                   <br />
                   <b>为何在这</b>：{b.why}
@@ -94,7 +99,7 @@ export function ChapterPage({ id }: { id: ChapterId }) {
           <Section label="认知基础" note="脚下的地（env/库/运行环境）——第一次用到就地露出">
             <div className="flex items-start gap-3 rounded-xl border-2 border-dashed border-ink/40 bg-clash3b/15 p-4">
               <Ring size={18} className="mt-0.5 shrink-0" />
-              <p className="m-0 text-[12.5px] leading-relaxed text-body">{c.base}</p>
+              <p className="m-0 text-content text-body">{c.base}</p>
             </div>
           </Section>
         )}
diff --git a/apps/tutorial/src/lib/ui.tsx b/apps/tutorial/src/lib/ui.tsx
index f3595ed..a6a5b22 100644
--- a/apps/tutorial/src/lib/ui.tsx
+++ b/apps/tutorial/src/lib/ui.tsx
@@ -1,4 +1,5 @@
-/** 教程站页面骨架：站头导航跨页常驻（view-transition-name 共享元素，页间不闪烁） */
+/** 教程站页面骨架：站头导航跨页常驻（view-transition-name 共享元素，页间不闪烁）。
+ * 选中项背景色＝该章色（与章头 title 横幅统一）；书架选中为 ink。 */
 import type { ReactNode } from 'react'
 import type { ChapterId } from './types'
 import { CHAPTERS } from './chapters'
@@ -22,39 +23,43 @@ export function Page({
   /** 章节页标题在章头横幅里，可省 */
   title?: string
   desc?: string
-  /** 站头高亮的章节；书架页不传 */
-  active?: ChapterId
+  /** 站头高亮：章节 id 或书架 'index' */
+  active?: ChapterId | 'index'
   children: ReactNode
 }) {
   return (
-    <main className="mx-auto max-w-[1200px] px-6 py-8">
+    <main className="mx-auto max-w-[1200px] px-6 py-8 text-content text-body">
       <header
-        className="flex flex-wrap items-center gap-1.5 rounded-2xl border-2 border-ink bg-paper p-2.5 shadow-hard"
+        className="mb-8 flex flex-wrap items-center gap-1.5 rounded-2xl border-2 border-ink bg-paper p-2.5 shadow-hard"
         style={{ viewTransitionName: 'site-header' }}
       >
         <a href="/index.html" className="mr-2 rounded-lg bg-ink px-2.5 py-1 font-mono text-[13px] font-bold text-paper no-underline">
           stack·教程
         </a>
-        {NAV.map((n) => (
-          <a
-            key={n.href}
-            href={n.href}
-            className={`rounded-lg px-2.5 py-1 text-[12.5px] font-bold no-underline transition-colors ${
-              n.id === active ? 'bg-clash2a text-ink' : 'text-body hover:bg-black/5'
-            }`}
-          >
-            {n.label}
-          </a>
-        ))}
+        {NAV.map((n) => {
+          const on = n.id ? n.id === active : active === 'index'
+          return (
+            <a
+              key={n.href}
+              href={n.href}
+              className={`rounded-lg px-2.5 py-1 text-[12.5px] font-bold no-underline transition-colors ${
+                on ? (n.id ? 'text-ink' : 'bg-ink text-paper') : 'text-body hover:bg-black/5'
+              }`}
+              style={on && n.id ? { background: CHAPTERS[n.id].color } : undefined}
+            >
+              {n.label}
+            </a>
+          )
+        })}
       </header>
       {(title || desc) && (
-        <div className="mb-7 mt-7">
-          {title && <h1 className="m-0 text-[28px] font-extrabold text-ink">{title}</h1>}
-          {desc && <p className="m-0 mt-1 text-[14.5px] text-[#6b6b6b]">{desc}</p>}
+        <div className="mb-7">
+          {title && <h1 className="m-0 text-t1 font-extrabold text-ink">{title}</h1>}
+          {desc && <p className="m-0 mt-2 max-w-[72ch] text-content text-mute">{desc}</p>}
         </div>
       )}
       {children}
-      <footer className="mt-12 border-t-2 border-dashed border-ink/15 pt-3 text-[12px] text-[#8a8a8a]">
+      <footer className="mt-12 border-t-2 border-dashed border-ink/15 pt-3 t-small-mute">
         stack·教程 · 孟菲斯 × 拟物卡 · 靶子先行，步骤＝目标＋验收
       </footer>
     </main>
@@ -64,9 +69,9 @@ export function Page({
 export function Section({ label, note, children }: { label: string; note?: string; children: ReactNode }) {
   return (
     <section className="mb-8">
-      <h2 className="mb-2 text-[13.5px] font-bold text-ink">
-        {label}
-        {note && <i className="ml-2 text-[11.5px] font-normal not-italic text-[#6b6b6b]">{note}</i>}
+      <h2 className="mb-2.5 flex flex-wrap items-baseline gap-2">
+        <span className="t-small-strong">{label}</span>
+        {note && <i className="t-small-mute not-italic">{note}</i>}
       </h2>
       {children}
     </section>
diff --git a/apps/tutorial/src/pages/index/App.tsx b/apps/tutorial/src/pages/index/App.tsx
index 99c30d5..283584b 100644
--- a/apps/tutorial/src/pages/index/App.tsx
+++ b/apps/tutorial/src/pages/index/App.tsx
@@ -26,6 +26,7 @@ const GRID: { id: ChapterId; entry?: 1 | 2 | 3 }[] = [
 export function App() {
   return (
     <Page
+      active="index"
       title="全栈工程师教程 · 书架"
       desc="靶子先行：每章先给目标、预期结果、积木清单，步骤只写「产出什么＋核对什么」；过程有没有学习价值，每步先分类。"
     >
diff --git a/apps/tutorial/src/styles/tokens.css b/apps/tutorial/src/styles/tokens.css
index a506c9f..a4f88ae 100644
--- a/apps/tutorial/src/styles/tokens.css
+++ b/apps/tutorial/src/styles/tokens.css
@@ -82,3 +82,40 @@
     animation-duration: 0.01ms;
   }
 }
+
+/* ===== 字体系统 =====
+ * 基准＝浏览器默认 16px＝正文字号（content，不另设基准）。
+ * 向上：t3 → t2 → t1 三级标题；再向上是大字。
+ * 小字两态：t-small-mute 边缘可忽略（弱化灰）/ t-small-strong 缩小但加强（加粗收字距）。
+ * 大字两态：t1 大而强（页面主标题）/ t-display 大而弱（幽灵背景字，可被忽略）。 */
+@theme {
+  --text-content: 1rem;
+  --text-content--line-height: 1.75;
+  --text-t3: 1.125rem;
+  --text-t3--line-height: 1.5;
+  --text-t2: 1.375rem;
+  --text-t2--line-height: 1.45;
+  --text-t1: 1.75rem;
+  --text-t1--line-height: 1.3;
+  --text-small: 0.75rem;
+  --text-small--line-height: 1.65;
+}
+
+.t-small-mute {
+  font-size: var(--text-small);
+  line-height: var(--text-small--line-height);
+  color: var(--color-mute);
+}
+.t-small-strong {
+  font-size: var(--text-small);
+  line-height: 1.5;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--color-ink);
+}
+.t-display {
+  font-size: 4rem;
+  line-height: 1;
+  font-weight: 800;
+  color: color-mix(in srgb, var(--color-ink) 10%, transparent);
+}