104 lines
2.6 KiB
TypeScript
104 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import type { FormEvent } from "react";
|
|
|
|
import type { PublishPlatform } from "../lib/domain/types";
|
|
|
|
export interface ArticleInputPayload {
|
|
title: string;
|
|
body: string;
|
|
image_lines: string;
|
|
platform: PublishPlatform;
|
|
user_instructions: string;
|
|
}
|
|
|
|
interface ArticleInputFormProps {
|
|
value: ArticleInputPayload;
|
|
isSubmitting: boolean;
|
|
onChange: (value: ArticleInputPayload) => void;
|
|
onSubmit: () => void;
|
|
}
|
|
|
|
const platforms: { value: PublishPlatform; label: string }[] = [
|
|
{ value: "official_site", label: "官网文章" },
|
|
{ value: "media_article", label: "媒体稿" },
|
|
{ value: "comparison_review", label: "对比评测" },
|
|
{ value: "recommendation_list", label: "推荐榜单" },
|
|
];
|
|
|
|
export function ArticleInputForm({
|
|
value,
|
|
isSubmitting,
|
|
onChange,
|
|
onSubmit,
|
|
}: ArticleInputFormProps) {
|
|
function update<K extends keyof ArticleInputPayload>(
|
|
key: K,
|
|
nextValue: ArticleInputPayload[K],
|
|
) {
|
|
onChange({ ...value, [key]: nextValue });
|
|
}
|
|
|
|
function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
onSubmit();
|
|
}
|
|
|
|
return (
|
|
<form className="panel stack" onSubmit={handleSubmit}>
|
|
<div className="panel-heading">
|
|
<span>文章输入</span>
|
|
<button disabled={isSubmitting} type="submit">
|
|
{isSubmitting ? "分析中..." : "分析文章"}
|
|
</button>
|
|
</div>
|
|
<label>
|
|
<span>标题</span>
|
|
<input
|
|
required
|
|
value={value.title}
|
|
onChange={(event) => update("title", event.target.value)}
|
|
/>
|
|
</label>
|
|
<label>
|
|
<span>正文</span>
|
|
<textarea
|
|
required
|
|
className="body-input"
|
|
value={value.body}
|
|
onChange={(event) => update("body", event.target.value)}
|
|
/>
|
|
</label>
|
|
<label>
|
|
<span>图片描述或图片链接</span>
|
|
<textarea
|
|
value={value.image_lines}
|
|
onChange={(event) => update("image_lines", event.target.value)}
|
|
/>
|
|
</label>
|
|
<label>
|
|
<span>目标平台</span>
|
|
<select
|
|
value={value.platform}
|
|
onChange={(event) =>
|
|
update("platform", event.target.value as PublishPlatform)
|
|
}
|
|
>
|
|
{platforms.map((platform) => (
|
|
<option key={platform.value} value={platform.value}>
|
|
{platform.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>用户要求</span>
|
|
<textarea
|
|
value={value.user_instructions}
|
|
onChange={(event) => update("user_instructions", event.target.value)}
|
|
/>
|
|
</label>
|
|
</form>
|
|
);
|
|
}
|