From 1d4cc9208805e21b5686e89e1077da63f6105c70 Mon Sep 17 00:00:00 2001
From: cqh963852 <cqh963852@hotmail.com>
Date: Thu, 8 Oct 2026 13:39:20 +0800
Subject: [PATCH] =?UTF-8?q?style:=20navbar=20=E5=88=86=E4=B8=A4=E8=A1=8C?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E7=AC=AC=E4=B8=80=E8=A1=8C=E6=95=99=E7=A8=8B?=
 =?UTF-8?q?=EF=BC=88=E4=B9=A6=E6=9E=B6+=E5=85=AD=E7=AB=A0=EF=BC=89?=
 =?UTF-8?q?=EF=BC=8C=E7=AC=AC=E4=BA=8C=E8=A1=8C=E8=AE=BE=E8=AE=A1=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E5=9B=9B=E5=86=8C=EF=BC=88=E8=99=9A=E7=BA=BF=E5=88=86?=
 =?UTF-8?q?=E9=9A=94+=E7=BB=84=E6=A0=87=E7=AD=BE=EF=BC=89=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=8D=E5=86=8D=E5=90=8C=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/tutorial/src/lib/ui.tsx | 74 +++++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 34 deletions(-)

diff --git a/apps/tutorial/src/lib/ui.tsx b/apps/tutorial/src/lib/ui.tsx
index 035a2fb..9e22572 100644
--- a/apps/tutorial/src/lib/ui.tsx
+++ b/apps/tutorial/src/lib/ui.tsx
@@ -40,42 +40,48 @@ export function Page({
   return (
     <main className="mx-auto max-w-[1200px] px-6 py-8 text-content text-body">
       <header
-        className="mb-8 flex flex-wrap items-center gap-1.5 rounded-2xl border-2 border-ink bg-paper p-2.5 shadow-hard"
+        className="mb-8 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) => {
-          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>
-          )
-        })}
-        <span className="mx-1 h-4 w-[2px] rounded bg-ink/20" aria-hidden />
-        {DESIGN.map((n) => {
-          const on = n.key === active
-          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 ? 'bg-ink text-paper' : 'text-body hover:bg-black/5'
-              }`}
-            >
-              设计·{n.label}
-            </a>
-          )
-        })}
+        {/* 第一行：教程（书架 + 六章） */}
+        <div className="flex flex-wrap items-center gap-1.5">
+          <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) => {
+            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>
+            )
+          })}
+        </div>
+        {/* 第二行：设计系统四册 */}
+        <div className="mt-2 flex flex-wrap items-center gap-1.5 border-t border-dashed border-ink/20 pt-2">
+          <span className="t-small-mute mr-1">设计系统</span>
+          {DESIGN.map((n) => {
+            const on = n.key === active
+            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 ? 'bg-ink text-paper' : 'text-body hover:bg-black/5'
+                }`}
+              >
+                {n.label}
+              </a>
+            )
+          })}
+        </div>
       </header>
       {(title || desc) && (
         <div className="mb-7">