8779530806
新 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。
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
"use client";
|
||
|
||
import { AppShell } from "@/components/AppShell";
|
||
import type { ProjectResponse } from "@/lib/api/types";
|
||
import { useStyleLearn } from "@/lib/style/useStyleLearn";
|
||
import type { Fingerprint, StyleLearnMode } from "@/lib/style/style";
|
||
import { FingerprintView } from "./FingerprintView";
|
||
import { StyleUpload } from "./StyleUpload";
|
||
|
||
interface StylePageProps {
|
||
project: ProjectResponse;
|
||
initialFingerprint: Fingerprint | null;
|
||
}
|
||
|
||
// 文风页（UX §6.9）：左侧上传样本学文风，右侧展示 16 维指纹 + 证据。
|
||
export function StylePage({ project, initialFingerprint }: StylePageProps) {
|
||
const learn = useStyleLearn(initialFingerprint);
|
||
|
||
const onLearn = (samples: string[], mode: StyleLearnMode): void => {
|
||
void learn.learn(project.id, samples, mode);
|
||
};
|
||
|
||
return (
|
||
<AppShell
|
||
title={`〈${project.title}〉`}
|
||
subtitle="文风指纹"
|
||
projectId={project.id}
|
||
activeNav="style"
|
||
>
|
||
<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
|
||
busy={learn.busy}
|
||
pollStatus={learn.pollStatus === "idle" ? "idle" : learn.pollStatus}
|
||
progress={learn.progress}
|
||
hasFingerprint={learn.fingerprint !== null}
|
||
onLearn={onLearn}
|
||
/>
|
||
</section>
|
||
|
||
<section className="overflow-auto bg-bg px-6 py-6">
|
||
<FingerprintView fingerprint={learn.fingerprint} />
|
||
</section>
|
||
</div>
|
||
</AppShell>
|
||
);
|
||
}
|