feat(ux): T4-a 全局 AI 工具条 — 项目页顶部常驻写本章/审稿/大纲/设定库/工具箱

新 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。
This commit is contained in:
Yaojia Wang
2026-06-20 18:19:46 +02:00
parent 6e5d0e88f6
commit 8779530806
10 changed files with 122 additions and 8 deletions

View File

@@ -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>
);