From 8779530806e6e16faf618baeba757aae2a5d79d7 Mon Sep 17 00:00:00 2001
From: Yaojia Wang <yaojia.wang@billo.life>
Date: Sat, 20 Jun 2026 18:19:46 +0200
Subject: [PATCH] =?UTF-8?q?feat(ux):=20T4-a=20=E5=85=A8=E5=B1=80=20AI=20?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=9D=A1=20=E2=80=94=20=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=A1=B6=E9=83=A8=E5=B8=B8=E9=A9=BB=E5=86=99=E6=9C=AC?=
 =?UTF-8?q?=E7=AB=A0/=E5=AE=A1=E7=A8=BF/=E5=A4=A7=E7=BA=B2/=E8=AE=BE?=
 =?UTF-8?q?=E5=AE=9A=E5=BA=93/=E5=B7=A5=E5=85=B7=E7=AE=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新 lib/nav/ai-tools.ts (aiToolItems) + components/AiToolbar.tsx 服务端组件；AppShell 顶栏下渲染（仅项目页），用 --chrome CSS 变量统一 chrome 高度，6 个固定高度页改用 calc(100vh-var(--chrome,4rem)) 适配。TDD: ai-tools 测。前端门禁绿: lint/tsc/vitest/build。
---
 apps/web/components/AiToolbar.tsx             | 48 +++++++++++++++++++
 apps/web/components/AppShell.tsx              | 13 ++++-
 apps/web/components/codex/CodexPage.tsx       |  2 +-
 .../components/foreshadow/ForeshadowBoard.tsx |  2 +-
 apps/web/components/outline/OutlineEditor.tsx |  2 +-
 apps/web/components/review/ReviewReport.tsx   |  2 +-
 apps/web/components/style/StylePage.tsx       |  2 +-
 apps/web/components/workbench/Workbench.tsx   |  2 +-
 apps/web/lib/nav/ai-tools.test.ts             | 28 +++++++++++
 apps/web/lib/nav/ai-tools.ts                  | 29 +++++++++++
 10 files changed, 122 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/components/AiToolbar.tsx
 create mode 100644 apps/web/lib/nav/ai-tools.test.ts
 create mode 100644 apps/web/lib/nav/ai-tools.ts

diff --git a/apps/web/components/AiToolbar.tsx b/apps/web/components/AiToolbar.tsx
new file mode 100644
index 0000000..7d86e82
--- /dev/null
+++ b/apps/web/components/AiToolbar.tsx
@@ -0,0 +1,48 @@
+import Link from "next/link";
+
+import { aiToolItems } from "@/lib/nav/ai-tools";
+import type { ActiveNav } from "@/lib/nav/items";
+
+interface AiToolbarProps {
+  projectId: string;
+  activeNav?: ActiveNav;
+}
+
+// T4-a · 项目内页常驻 AI 工具条（顶栏下，UX §3/§5）。
+// 纯链接服务端组件：写本章=朱砂主动作，其余次级；激活项朱砂高亮。窄屏横向滚动。
+export function AiToolbar({ projectId, activeNav }: AiToolbarProps) {
+  return (
+    <nav
+      aria-label="AI 工具条"
+      className="flex h-12 items-center gap-2 overflow-x-auto whitespace-nowrap border-b border-line bg-panel px-4 sm:px-6"
+    >
+      {aiToolItems(projectId).map((item) => {
+        const isActive = item.key === activeNav;
+        const className = toolClassName(item.primary === true, isActive);
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            aria-current={isActive ? "page" : undefined}
+            className={className}
+          >
+            <span aria-hidden="true">{item.glyph}</span>
+            <span>{item.label}</span>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
+
+function toolClassName(isPrimary: boolean, isActive: boolean): string {
+  const base =
+    "flex items-center gap-1.5 rounded border px-3 py-1.5 text-sm transition-colors";
+  if (isActive) {
+    return `${base} border-cinnabar text-cinnabar`;
+  }
+  if (isPrimary) {
+    return `${base} border-cinnabar bg-cinnabar text-panel hover:border-cinnabar`;
+  }
+  return `${base} border-line text-ink-soft hover:border-cinnabar hover:text-cinnabar`;
+}
diff --git a/apps/web/components/AppShell.tsx b/apps/web/components/AppShell.tsx
index 634e137..372e7a5 100644
--- a/apps/web/components/AppShell.tsx
+++ b/apps/web/components/AppShell.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import type { ReactNode } from "react";
 
 import type { ActiveNav } from "@/lib/nav/items";
+import { AiToolbar } from "./AiToolbar";
 import { LeftNav } from "./LeftNav";
 import { NavDrawer } from "./NavDrawer";
 
@@ -25,7 +26,10 @@ export function AppShell({
   activeNav,
 }: AppShellProps) {
   return (
-    <div className="min-h-screen">
+    <div
+      className="min-h-screen"
+      style={{ ["--chrome" as string]: projectId ? "7rem" : "4rem" }}
+    >
       <header className="flex h-16 items-center gap-4 border-b border-line bg-panel px-4 sm:px-6">
         <NavDrawer projectId={projectId} activeNav={activeNav} />
         <Link
@@ -50,9 +54,14 @@ export function AppShell({
           </Link>
         </nav>
       </header>
+      {projectId ? (
+        <AiToolbar projectId={projectId} activeNav={activeNav} />
+      ) : null}
       <div className="flex">
         <LeftNav projectId={projectId} activeNav={activeNav} />
-        <main className="min-h-[calc(100vh-4rem)] flex-1 bg-bg">{children}</main>
+        <main className="min-h-[calc(100vh-var(--chrome,4rem))] flex-1 bg-bg">
+          {children}
+        </main>
       </div>
     </div>
   );
diff --git a/apps/web/components/codex/CodexPage.tsx b/apps/web/components/codex/CodexPage.tsx
index 803cb8c..ba12ffc 100644
--- a/apps/web/components/codex/CodexPage.tsx
+++ b/apps/web/components/codex/CodexPage.tsx
@@ -59,7 +59,7 @@ export function CodexPage({
       projectId={project.id}
       activeNav="codex"
     >
-      <div className="flex h-[calc(100vh-4rem)] flex-col p-4">
+      <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-4">
         <div className="mb-4 flex items-center gap-2" role="tablist">
           {TABS.map((t) => (
             <button
diff --git a/apps/web/components/foreshadow/ForeshadowBoard.tsx b/apps/web/components/foreshadow/ForeshadowBoard.tsx
index a6444ae..4232aa2 100644
--- a/apps/web/components/foreshadow/ForeshadowBoard.tsx
+++ b/apps/web/components/foreshadow/ForeshadowBoard.tsx
@@ -46,7 +46,7 @@ export function ForeshadowBoard({
       projectId={project.id}
       activeNav="foreshadow"
     >
-      <div className="flex h-[calc(100vh-4rem)] flex-col p-4">
+      <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-4">
         <div className="mb-4 flex items-start justify-between gap-4">
           <h1 className="font-serif text-lg text-ink">伏笔看板</h1>
           <RegisterForm
diff --git a/apps/web/components/outline/OutlineEditor.tsx b/apps/web/components/outline/OutlineEditor.tsx
index 104e957..c9242da 100644
--- a/apps/web/components/outline/OutlineEditor.tsx
+++ b/apps/web/components/outline/OutlineEditor.tsx
@@ -31,7 +31,7 @@ export function OutlineEditor({
       projectId={project.id}
       activeNav="outline"
     >
-      <div className="flex h-[calc(100vh-4rem)] flex-col p-6">
+      <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-6">
         <div className="mb-4 flex items-center gap-3">
           <h1 className="font-serif text-lg text-ink">大纲</h1>
           <label htmlFor="vol" className="ml-auto text-xs text-ink-soft">
diff --git a/apps/web/components/review/ReviewReport.tsx b/apps/web/components/review/ReviewReport.tsx
index daeef16..6e6fdf8 100644
--- a/apps/web/components/review/ReviewReport.tsx
+++ b/apps/web/components/review/ReviewReport.tsx
@@ -215,7 +215,7 @@ export function ReviewReport({
       projectId={project.id}
       activeNav="review"
     >
-      <div className="grid h-[calc(100vh-4rem)] grid-cols-1 lg:grid-cols-[1fr_24rem]">
+      <div className="grid h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 lg:grid-cols-[1fr_24rem]">
         {/* 左：终稿正文 + 就地标注 */}
         <section className="flex min-w-0 flex-col bg-bg">
           <div className="flex items-center gap-3 border-b border-line bg-panel px-6 py-3">
diff --git a/apps/web/components/style/StylePage.tsx b/apps/web/components/style/StylePage.tsx
index e9c4089..c08c368 100644
--- a/apps/web/components/style/StylePage.tsx
+++ b/apps/web/components/style/StylePage.tsx
@@ -27,7 +27,7 @@ export function StylePage({ project, initialFingerprint }: StylePageProps) {
       projectId={project.id}
       activeNav="style"
     >
-      <div className="grid h-[calc(100vh-4rem)] grid-cols-1 lg:grid-cols-[28rem_1fr]">
+      <div className="grid h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 lg:grid-cols-[28rem_1fr]">
         <section className="flex flex-col overflow-auto border-r border-line bg-panel px-6 py-6">
           <h1 className="mb-3 font-serif text-lg text-ink">学习文风</h1>
           <StyleUpload
diff --git a/apps/web/components/workbench/Workbench.tsx b/apps/web/components/workbench/Workbench.tsx
index 4384f4c..4760d18 100644
--- a/apps/web/components/workbench/Workbench.tsx
+++ b/apps/web/components/workbench/Workbench.tsx
@@ -70,7 +70,7 @@ export function Workbench({ project, initialText = "" }: WorkbenchProps) {
       projectId={project.id}
       activeNav="write"
     >
-      <div className="grid h-[calc(100vh-4rem)] grid-cols-1 lg:grid-cols-[12rem_1fr_18rem]">
+      <div className="grid h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 lg:grid-cols-[12rem_1fr_18rem]">
         <ChapterList currentChapterNo={chapterNo} />
 
         <section className="flex min-w-0 flex-col bg-bg">
diff --git a/apps/web/lib/nav/ai-tools.test.ts b/apps/web/lib/nav/ai-tools.test.ts
new file mode 100644
index 0000000..282eeaa
--- /dev/null
+++ b/apps/web/lib/nav/ai-tools.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+import { aiToolItems } from "./ai-tools";
+
+describe("aiToolItems", () => {
+  it("returns 5 items", () => {
+    expect(aiToolItems("p1")).toHaveLength(5);
+  });
+
+  it("leads with 写本章 (primary, key write)", () => {
+    const [first] = aiToolItems("p1");
+    expect(first.label).toBe("写本章");
+    expect(first.primary).toBe(true);
+    expect(first.key).toBe("write");
+  });
+
+  it("scopes every href under the project path", () => {
+    for (const item of aiToolItems("abc")) {
+      expect(item.href.startsWith("/projects/abc/")).toBe(true);
+    }
+  });
+
+  it("maps 审稿 to the review page and key", () => {
+    const review = aiToolItems("p1").find((item) => item.label === "审稿");
+    expect(review?.href).toBe("/projects/p1/review");
+    expect(review?.key).toBe("review");
+  });
+});
diff --git a/apps/web/lib/nav/ai-tools.ts b/apps/web/lib/nav/ai-tools.ts
new file mode 100644
index 0000000..eadf5b7
--- /dev/null
+++ b/apps/web/lib/nav/ai-tools.ts
@@ -0,0 +1,29 @@
+// T4-a · 顶部 AI 工具条数据（纯逻辑，UX §3/§5）。
+// 把高频 AI 动作（写本章/审稿/大纲/设定库/工具箱）做成常驻一排，根治「命令面板太隐蔽」。
+// 只露已实现能力；新生成器（创作工具箱 B 组）落地后并入工具箱入口。
+// 组件只渲染；条目与激活键集中在此，复用 ActiveNav 高亮规则。
+
+import type { ActiveNav } from "./items";
+
+export interface AiToolItem {
+  href: string;
+  label: string;
+  // 行首字形（纸感，非语义；aria-hidden 渲染）。
+  glyph: string;
+  // 高亮键（与 AppShell activeNav 比对）。
+  key: ActiveNav;
+  // 主动作（写本章）朱砂强调，其余次级。
+  primary?: boolean;
+}
+
+// 项目内页 AI 工具条条目（按已实现能力露出）。
+export function aiToolItems(projectId: string): AiToolItem[] {
+  const base = `/projects/${projectId}`;
+  return [
+    { href: `${base}/write`, label: "写本章", glyph: "✍", key: "write", primary: true },
+    { href: `${base}/review`, label: "审稿", glyph: "✦", key: "review" },
+    { href: `${base}/outline`, label: "大纲", glyph: "❡", key: "outline" },
+    { href: `${base}/codex`, label: "设定库", glyph: "❖", key: "codex" },
+    { href: `${base}/skills`, label: "工具箱", glyph: "✧", key: "skills" },
+  ];
+}