style: navbar 分两行——第一行教程（书架+六章），第二行设计系统四册（虚线分隔+组标签），不再同行

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·教程
+        <div className="flex flex-wrap items-center gap-1.5">
-        </a>
+          <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">
-        {NAV.map((n) => {
+            stack·教程
-          const on = n.id ? n.id === active : active === 'index'
+          </a>
-          return (
+          {NAV.map((n) => {
-            <a
+            const on = n.id ? n.id === active : active === 'index'
-              key={n.href}
+            return (
-              href={n.href}
+              <a
-              className={`rounded-lg px-2.5 py-1 text-[12.5px] font-bold no-underline transition-colors ${
+                key={n.href}
-                on ? (n.id ? 'text-ink' : 'bg-ink text-paper') : 'text-body hover:bg-black/5'
+                href={n.href}
-              }`}
+                className={`rounded-lg px-2.5 py-1 text-[12.5px] font-bold no-underline transition-colors ${
-              style={on && n.id ? { background: CHAPTERS[n.id].color } : undefined}
+                  on ? (n.id ? 'text-ink' : 'bg-ink text-paper') : 'text-body hover:bg-black/5'
-            >
+                }`}
-              {n.label}
+                style={on && n.id ? { background: CHAPTERS[n.id].color } : undefined}
-            </a>
+              >
-          )
+                {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
+        </div>
-          return (
+        {/* 第二行：设计系统四册 */}
-            <a
+        <div className="mt-2 flex flex-wrap items-center gap-1.5 border-t border-dashed border-ink/20 pt-2">
-              key={n.href}
+          <span className="t-small-mute mr-1">设计系统</span>
-              href={n.href}
+          {DESIGN.map((n) => {
-              className={`rounded-lg px-2.5 py-1 text-[12.5px] font-bold no-underline transition-colors ${
+            const on = n.key === active
-                on ? 'bg-ink text-paper' : 'text-body hover:bg-black/5'
+            return (
-              }`}
+              <a
-            >
+                key={n.href}
-              设计·{n.label}
+                href={n.href}
-            </a>
+                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">