61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
import { AppShell } from "@/components/AppShell";
|
||
import { PageHeader } from "@/components/ui/PageHeader";
|
||
import { SectionHeader } from "@/components/ui/SectionHeader";
|
||
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="flex min-h-[calc(100vh-var(--chrome,4rem))] flex-col">
|
||
<div className="px-6 pt-6">
|
||
<PageHeader
|
||
title="文风指纹"
|
||
description="上传你的代表作样本，让 AI 学出十六维文风指纹，作为后续写作与第四审的对照标尺。"
|
||
/>
|
||
</div>
|
||
<div className="flex flex-1 flex-col lg:grid lg:min-h-0 lg:grid-cols-[28rem_1fr]">
|
||
<section className="flex flex-col border-line bg-panel px-6 py-6 lg:overflow-auto lg:border-r">
|
||
<SectionHeader title="学习文风" className="mb-3" />
|
||
<StyleUpload
|
||
busy={learn.busy}
|
||
pollStatus={
|
||
learn.pollStatus === "idle" ? "idle" : learn.pollStatus
|
||
}
|
||
progress={learn.progress}
|
||
hasFingerprint={learn.fingerprint !== null}
|
||
onLearn={onLearn}
|
||
/>
|
||
</section>
|
||
|
||
<section className="bg-bg px-6 py-6 lg:overflow-auto">
|
||
<FingerprintView fingerprint={learn.fingerprint} />
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</AppShell>
|
||
);
|
||
}
|