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="flex min-h-[calc(100vh-var(--chrome,4rem))] flex-col lg:grid lg:h-[calc(100vh-var(--chrome,4rem))] 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">
|
||
<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="bg-bg px-6 py-6 lg:overflow-auto">
|
||
<FingerprintView fingerprint={learn.fingerprint} />
|
||
</section>
|
||
</div>
|
||
</AppShell>
|
||
);
|
||
}
|