d3dc620a71
- uv(workspace) + pnpm monorepo；docker-compose(pg+api+web) - SQLAlchemy 16 MVP 表 + Alembic 初版迁移(无漂移，users stub) - FastAPI 骨架：统一错误信封(带 request_id) + structlog + /jobs/:id + OpenAPI - Next.js 骨架：纸感主题 token + OpenAPI→TS 客户端代码生成(gen:api) - CI(ruff/mypy/pytest + pg service + alembic 漂移校验) - 四份设计规格(PRODUCT/UX/ARCHITECTURE/DEV_PLAN) + CLAUDE.md
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import Link from "next/link";
|
||
import type { ReactNode } from "react";
|
||
|
||
import { LeftNav } from "./LeftNav";
|
||
|
||
interface AppShellProps {
|
||
children: ReactNode;
|
||
// 顶栏右侧的上下文信息（如作品名 / 进度）。
|
||
title?: string;
|
||
subtitle?: string;
|
||
}
|
||
|
||
// 全局外壳：顶栏(64px) + 左导航 + 主区（UX §5.1）。
|
||
export function AppShell({ children, title, subtitle }: AppShellProps) {
|
||
return (
|
||
<div className="min-h-screen">
|
||
<header className="flex h-16 items-center gap-4 border-b border-line bg-panel px-6">
|
||
<Link
|
||
href="/"
|
||
className="font-serif text-xl text-cinnabar"
|
||
aria-label="返回作品库"
|
||
>
|
||
墨痕
|
||
</Link>
|
||
{title ? (
|
||
<span className="font-serif text-lg text-ink">{title}</span>
|
||
) : null}
|
||
{subtitle ? (
|
||
<span className="font-mono text-xs text-ink-soft">{subtitle}</span>
|
||
) : null}
|
||
<nav className="ml-auto flex items-center gap-4 text-sm">
|
||
<Link
|
||
href="/settings/providers"
|
||
className="text-ink-soft hover:text-cinnabar"
|
||
>
|
||
设置
|
||
</Link>
|
||
</nav>
|
||
</header>
|
||
<div className="flex">
|
||
<LeftNav />
|
||
<main className="min-h-[calc(100vh-4rem)] flex-1 bg-bg">{children}</main>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|