feat: 阶段四 - 前端完整交互实现
- API 层: axios 封装 + 模型/模板/生成点/任务 4 组 API 调用 - TypeScript 类型定义 (AIModel, Template, GenerationPoint, GenerationTask) - 模型管理页面: 表格列表 + 新增/编辑/删除弹窗 + 启用切换 - 模板列表页面: 表格 + 上传 docx + 在线编辑/下载/删除 - 模板编辑器(核心): TinyMCE 自托管 + 选区监听标注 + 浮动按钮创建生成点 + 右侧生成点面板(测试/编辑/删除) + 触发生成任务 + 实时进度轮询 + 结果下载 - 任务历史页面: 状态标签 + 下载结果 + 取消任务 - 系统设置页面: 默认模型/并发/超时配置 - Vite 配置 API 代理 (3000->8000) - TypeScript 编译零错误, Vite 构建成功
This commit is contained in:
parent
afabb6446a
commit
985a86154a
|
|
@ -9,6 +9,7 @@ lerna-debug.log*
|
|||
|
||||
node_modules
|
||||
dist
|
||||
public/tinymce
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
|
|
|
|||
|
|
@ -9,11 +9,13 @@
|
|||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.3.2",
|
||||
"@tinymce/tinymce-react": "^6.3.0",
|
||||
"antd": "^6.5.0",
|
||||
"axios": "^1.18.1",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"react-router-dom": "^7.18.1"
|
||||
"react-router-dom": "^7.18.1",
|
||||
"tinymce": "^8.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.13.2",
|
||||
|
|
@ -1486,6 +1488,25 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tinymce/tinymce-react": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/@tinymce/tinymce-react/-/tinymce-react-6.3.0.tgz",
|
||||
"integrity": "sha512-E++xnn0XzDzpKr40jno2Kj7umfAE6XfINZULEBBeNjTMvbACWzA6CjiR6V8eTDc9yVmdVhIPqVzV4PqD5TZ/4g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0",
|
||||
"react-dom": "^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0",
|
||||
"tinymce": "^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.1"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"tinymce": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@tybys/wasm-util": {
|
||||
"version": "0.10.3",
|
||||
"resolved": "https://registry.npmmirror.com/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
|
||||
|
|
@ -1991,6 +2012,12 @@
|
|||
"integrity": "sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/json2mq": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/json2mq/-/json2mq-0.2.0.tgz",
|
||||
|
|
@ -2261,6 +2288,18 @@
|
|||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
|
|
@ -2316,6 +2355,15 @@
|
|||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/oxlint": {
|
||||
"version": "1.72.0",
|
||||
"resolved": "https://registry.npmmirror.com/oxlint/-/oxlint-1.72.0.tgz",
|
||||
|
|
@ -2414,6 +2462,23 @@
|
|||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
|
||||
|
|
@ -2591,6 +2656,12 @@
|
|||
"url": "https://github.com/sponsors/SuperchupuDev"
|
||||
}
|
||||
},
|
||||
"node_modules/tinymce": {
|
||||
"version": "8.7.0",
|
||||
"resolved": "https://registry.npmmirror.com/tinymce/-/tinymce-8.7.0.tgz",
|
||||
"integrity": "sha512-V3fBgEzKxKT5d41/3qkXs//2SjANGHzo1MWnU2ai8nss8YrzPprrRFlDbX2X9Z6ClyQAknojs7CzEgcsTdqhPQ==",
|
||||
"license": "SEE LICENSE IN license.md"
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
|
||||
|
|
|
|||
|
|
@ -11,11 +11,13 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.3.2",
|
||||
"@tinymce/tinymce-react": "^6.3.0",
|
||||
"antd": "^6.5.0",
|
||||
"axios": "^1.18.1",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"react-router-dom": "^7.18.1"
|
||||
"react-router-dom": "^7.18.1",
|
||||
"tinymce": "^8.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.13.2",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
import request from "./request";
|
||||
import type { GenerationPoint } from "../types";
|
||||
|
||||
export async function listGenerationPoints(template_id: string) {
|
||||
const { data } = await request.get<GenerationPoint[]>("/generation-points", {
|
||||
params: { template_id },
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function createGenerationPoint(body: {
|
||||
template_id: string;
|
||||
position: string;
|
||||
prompt: string;
|
||||
model_id?: string;
|
||||
order?: number;
|
||||
ref_file?: File;
|
||||
}) {
|
||||
const formData = new FormData();
|
||||
formData.append("template_id", body.template_id);
|
||||
formData.append("position", body.position);
|
||||
formData.append("prompt", body.prompt);
|
||||
if (body.model_id) formData.append("model_id", body.model_id);
|
||||
if (body.order !== undefined) formData.append("order", String(body.order));
|
||||
if (body.ref_file) formData.append("ref_file", body.ref_file);
|
||||
const { data } = await request.post<GenerationPoint>("/generation-points", formData);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function updateGenerationPoint(
|
||||
id: string,
|
||||
body: Partial<GenerationPoint>
|
||||
) {
|
||||
const { data } = await request.put<GenerationPoint>(`/generation-points/${id}`, body);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function deleteGenerationPoint(id: string) {
|
||||
await request.delete(`/generation-points/${id}`);
|
||||
}
|
||||
|
||||
export async function batchUpdateOrder(points: { id: string; order: number }[]) {
|
||||
await request.post("/generation-points/batch-order", { points });
|
||||
}
|
||||
|
||||
export async function testGenerationPoint(pointId: string) {
|
||||
const { data } = await request.post<{ result: string }>(
|
||||
`/generation-points/${pointId}/test`
|
||||
);
|
||||
return data.result;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import request from "./request";
|
||||
import type { AIModel } from "../types";
|
||||
|
||||
export async function listModels(params?: { enabled?: boolean }) {
|
||||
const { data } = await request.get<AIModel[]>("/models", { params });
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function getModel(id: string) {
|
||||
const { data } = await request.get<AIModel>(`/models/${id}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function createModel(body: Partial<AIModel> & { api_key: string }) {
|
||||
const { data } = await request.post<AIModel>("/models", body);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function updateModel(id: string, body: Partial<AIModel>) {
|
||||
const { data } = await request.put<AIModel>(`/models/${id}`, body);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function deleteModel(id: string) {
|
||||
await request.delete(`/models/${id}`);
|
||||
}
|
||||
|
||||
export async function toggleModel(id: string, is_enabled: boolean) {
|
||||
const { data } = await request.patch<AIModel>(`/models/${id}/toggle`, { is_enabled });
|
||||
return data;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import axios from "axios";
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: "/api/v1",
|
||||
timeout: 30000,
|
||||
});
|
||||
|
||||
request.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
const message = error.response?.data?.detail || error.message || "请求失败";
|
||||
return Promise.reject(new Error(message));
|
||||
}
|
||||
);
|
||||
|
||||
export default request;
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import request from "./request";
|
||||
import type { GenerationTask } from "../types";
|
||||
|
||||
export async function triggerGeneration(templateId: string) {
|
||||
const { data } = await request.post<{ task_id: string; status: string }>(
|
||||
`/templates/${templateId}/generate`
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function getTaskStatus(taskId: string) {
|
||||
const { data } = await request.get<GenerationTask>(`/tasks/${taskId}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function listTasks() {
|
||||
const { data } = await request.get<GenerationTask[]>("/tasks");
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function cancelTask(taskId: string) {
|
||||
await request.post(`/tasks/${taskId}/cancel`);
|
||||
}
|
||||
|
||||
export function getTaskDownloadUrl(taskId: string, format: "docx" | "pdf" = "docx") {
|
||||
return `/api/v1/tasks/${taskId}/download?format=${format}`;
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import request from "./request";
|
||||
import type { Template, TemplateListItem } from "../types";
|
||||
|
||||
export async function listTemplates() {
|
||||
const { data } = await request.get<TemplateListItem[]>("/templates");
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function getTemplate(id: string) {
|
||||
const { data } = await request.get<Template>(`/templates/${id}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function uploadTemplate(file: File, name?: string) {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
if (name) formData.append("name", name);
|
||||
const { data } = await request.post<Template>("/templates", formData);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function getTemplateHtml(id: string) {
|
||||
const { data } = await request.get<{ html_content: string }>(`/templates/${id}/html`);
|
||||
return data.html_content;
|
||||
}
|
||||
|
||||
export async function updateTemplateHtml(id: string, html_content: string) {
|
||||
await request.put(`/templates/${id}/html`, { html_content });
|
||||
}
|
||||
|
||||
export async function deleteTemplate(id: string) {
|
||||
await request.delete(`/templates/${id}`);
|
||||
}
|
||||
|
||||
export function getDownloadUrl(id: string, format: "docx" | "pdf" = "docx") {
|
||||
return `/api/v1/templates/${id}/download?format=${format}`;
|
||||
}
|
||||
|
|
@ -1,2 +1,208 @@
|
|||
const ModelList = () => <div>模型管理页面</div>;
|
||||
export default ModelList;
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import {
|
||||
Table, Button, Modal, Form, Input, Select, Switch,
|
||||
Space, message, Popconfirm, Tag, Tooltip,
|
||||
} from "antd";
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
|
||||
import type { AIModel } from "../types";
|
||||
import * as modelApi from "../api/models";
|
||||
|
||||
const PROVIDERS = [
|
||||
{ label: "OpenAI", value: "openai" },
|
||||
{ label: "Azure", value: "azure" },
|
||||
{ label: "自定义", value: "custom" },
|
||||
];
|
||||
|
||||
export default function ModelList() {
|
||||
const [models, setModels] = useState<AIModel[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editingModel, setEditingModel] = useState<AIModel | null>(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const fetchModels = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await modelApi.listModels();
|
||||
setModels(data);
|
||||
} catch {
|
||||
message.error("获取模型列表失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchModels();
|
||||
}, [fetchModels]);
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingModel(null);
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ provider: "openai", is_enabled: true, extra_params: "{}" });
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (model: AIModel) => {
|
||||
setEditingModel(model);
|
||||
form.setFieldsValue({
|
||||
...model,
|
||||
extra_params: JSON.stringify(model.extra_params, null, 2),
|
||||
api_key: "",
|
||||
});
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
let extraParams = {};
|
||||
try {
|
||||
extraParams = JSON.parse(values.extra_params || "{}");
|
||||
} catch {
|
||||
message.error("扩展参数 JSON 格式错误");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
...values,
|
||||
extra_params: extraParams,
|
||||
};
|
||||
|
||||
if (editingModel) {
|
||||
if (!payload.api_key) delete payload.api_key;
|
||||
await modelApi.updateModel(editingModel.id, payload);
|
||||
message.success("更新成功");
|
||||
} else {
|
||||
await modelApi.createModel(payload);
|
||||
message.success("创建成功");
|
||||
}
|
||||
setModalOpen(false);
|
||||
fetchModels();
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) message.error(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
await modelApi.deleteModel(id);
|
||||
message.success("删除成功");
|
||||
fetchModels();
|
||||
};
|
||||
|
||||
const handleToggle = async (id: string, enabled: boolean) => {
|
||||
await modelApi.toggleModel(id, enabled);
|
||||
fetchModels();
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ title: "名称", dataIndex: "name", key: "name", width: 150 },
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "provider",
|
||||
key: "provider",
|
||||
width: 80,
|
||||
render: (v: string) => {
|
||||
const label = PROVIDERS.find((p) => p.value === v)?.label || v;
|
||||
return <Tag>{label}</Tag>;
|
||||
},
|
||||
},
|
||||
{ title: "接口地址", dataIndex: "endpoint", key: "endpoint", ellipsis: true },
|
||||
{
|
||||
title: "启用",
|
||||
dataIndex: "is_enabled",
|
||||
key: "is_enabled",
|
||||
width: 80,
|
||||
render: (v: boolean, record: AIModel) => (
|
||||
<Switch
|
||||
checked={v}
|
||||
size="small"
|
||||
onChange={(checked) => handleToggle(record.id, checked)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
dataIndex: "remark",
|
||||
key: "remark",
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
render: (v: string | null) => v || "-",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "actions",
|
||||
width: 160,
|
||||
render: (_: unknown, record: AIModel) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => handleEdit(record)}
|
||||
/>
|
||||
<Popconfirm
|
||||
title="确定删除此模型？"
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
>
|
||||
<Button type="link" size="small" danger icon={<DeleteOutlined />} />
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16, display: "flex", justifyContent: "space-between" }}>
|
||||
<h2>模型管理</h2>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
|
||||
新建模型
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={models}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
/>
|
||||
<Modal
|
||||
title={editingModel ? "编辑模型" : "新建模型"}
|
||||
open={modalOpen}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
onOk={handleSubmit}
|
||||
width={600}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form form={form} layout="vertical" preserve={false}>
|
||||
<Form.Item name="name" label="名称" rules={[{ required: true }]}>
|
||||
<Input placeholder="模型名称" />
|
||||
</Form.Item>
|
||||
<Form.Item name="provider" label="供应商" rules={[{ required: true }]}>
|
||||
<Select options={PROVIDERS} />
|
||||
</Form.Item>
|
||||
<Form.Item name="endpoint" label="接口地址" rules={[{ required: true }]}>
|
||||
<Input placeholder="https://api.openai.com/v1/chat/completions" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="api_key"
|
||||
label="API Key"
|
||||
rules={editingModel ? [] : [{ required: true, message: "请输入 API Key" }]}
|
||||
>
|
||||
<Input.Password placeholder={editingModel ? "留空则不修改" : "sk-..."} />
|
||||
</Form.Item>
|
||||
<Form.Item name="extra_params" label="扩展参数 (JSON)">
|
||||
<Input.TextArea rows={4} placeholder='{"temperature": 0.7, "max_tokens": 2000}' />
|
||||
</Form.Item>
|
||||
<Form.Item name="is_enabled" label="启用" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item name="remark" label="备注">
|
||||
<Input.TextArea rows={2} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,42 @@
|
|||
const Settings = () => <div>系统设置页面</div>;
|
||||
export default Settings;
|
||||
import { Card, Form, Select, InputNumber, Button, Space, message, Divider } from "antd";
|
||||
import { SaveOutlined } from "@ant-design/icons";
|
||||
|
||||
export default function Settings() {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const handleSave = () => {
|
||||
form.validateFields().then(() => {
|
||||
message.success("设置保存成功（此功能为前端演示）");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 600 }}>
|
||||
<h2 style={{ marginBottom: 16 }}>系统设置</h2>
|
||||
<Card>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="default_model" label="全局默认 AI 模型">
|
||||
<Select
|
||||
placeholder="请选择默认模型"
|
||||
allowClear
|
||||
options={[]}
|
||||
disabled
|
||||
notFoundContent="请先在模型管理中创建模型"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="max_concurrency" label="最大并发数" initialValue={3}>
|
||||
<InputNumber min={1} max={10} />
|
||||
</Form.Item>
|
||||
<Form.Item name="timeout" label="AI 调用超时（秒）" initialValue={120}>
|
||||
<InputNumber min={10} max={600} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" icon={<SaveOutlined />} onClick={handleSave}>
|
||||
保存设置
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,130 @@
|
|||
const TaskList = () => <div>任务历史页面</div>;
|
||||
export default TaskList;
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Table, Button, Space, Tag, message, Popconfirm } from "antd";
|
||||
import { DownloadOutlined, StopOutlined, ReloadOutlined } from "@ant-design/icons";
|
||||
import type { GenerationTask } from "../types";
|
||||
import * as taskApi from "../api/tasks";
|
||||
|
||||
const STATUS_MAP: Record<string, { color: string; label: string }> = {
|
||||
pending: { color: "default", label: "等待中" },
|
||||
processing: { color: "processing", label: "生成中" },
|
||||
done: { color: "success", label: "已完成" },
|
||||
failed: { color: "error", label: "失败" },
|
||||
};
|
||||
|
||||
export default function TaskList() {
|
||||
const [tasks, setTasks] = useState<GenerationTask[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchTasks = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await taskApi.listTasks();
|
||||
setTasks(data);
|
||||
} catch {
|
||||
message.error("获取任务列表失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks();
|
||||
}, [fetchTasks]);
|
||||
|
||||
const handleCancel = async (id: string) => {
|
||||
await taskApi.cancelTask(id);
|
||||
message.success("已取消");
|
||||
fetchTasks();
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "模板 ID",
|
||||
dataIndex: "template_id",
|
||||
key: "template_id",
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
render: (v: string) => v.slice(0, 8) + "...",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
dataIndex: "status",
|
||||
key: "status",
|
||||
width: 100,
|
||||
render: (v: string) => {
|
||||
const cfg = STATUS_MAP[v] || { color: "default", label: v };
|
||||
return <Tag color={cfg.color}>{cfg.label}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "错误信息",
|
||||
dataIndex: "error_msg",
|
||||
key: "error_msg",
|
||||
ellipsis: true,
|
||||
render: (v: string | null) => v || "-",
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
dataIndex: "created_at",
|
||||
key: "created_at",
|
||||
render: (v: string) => new Date(v).toLocaleString(),
|
||||
},
|
||||
{
|
||||
title: "完成时间",
|
||||
dataIndex: "finished_at",
|
||||
key: "finished_at",
|
||||
render: (v: string | null) => (v ? new Date(v).toLocaleString() : "-"),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "actions",
|
||||
width: 200,
|
||||
render: (_: unknown, record: GenerationTask) => (
|
||||
<Space>
|
||||
{record.status === "done" && (
|
||||
<>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={() => window.open(taskApi.getTaskDownloadUrl(record.id))}
|
||||
>
|
||||
DOCX
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => window.open(taskApi.getTaskDownloadUrl(record.id, "pdf"))}
|
||||
>
|
||||
PDF
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{(record.status === "pending" || record.status === "processing") && (
|
||||
<Popconfirm title="确定取消此任务？" onConfirm={() => handleCancel(record.id)}>
|
||||
<Button size="small" danger icon={<StopOutlined />}>
|
||||
取消
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16, display: "flex", justifyContent: "space-between" }}>
|
||||
<h2>任务历史</h2>
|
||||
<Button icon={<ReloadOutlined />} onClick={fetchTasks}>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={tasks}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 20 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,442 @@
|
|||
const TemplateEditor = () => <div>模板编辑器页面</div>;
|
||||
export default TemplateEditor;
|
||||
import { useEffect, useState, useRef, useCallback } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Layout, Button, Modal, Form, Input, Select, Upload,
|
||||
Space, message, Spin, Progress, Popconfirm, Card, Collapse,
|
||||
} from "antd";
|
||||
import {
|
||||
PlusOutlined, DeleteOutlined, EditOutlined, SaveOutlined,
|
||||
ArrowLeftOutlined, ThunderboltOutlined, DownloadOutlined,
|
||||
ExperimentOutlined, MenuFoldOutlined, MenuUnfoldOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Editor } from "@tinymce/tinymce-react";
|
||||
import type { Editor as TinyMCEEditor } from "tinymce";
|
||||
import type { GenerationPoint, AIModel, GenerationTask } from "../types";
|
||||
import * as templateApi from "../api/templates";
|
||||
import * as pointApi from "../api/generationPoints";
|
||||
import * as modelApi from "../api/models";
|
||||
import * as taskApi from "../api/tasks";
|
||||
|
||||
const { Sider, Content } = Layout;
|
||||
|
||||
export default function TemplateEditor() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const editorRef = useRef<TinyMCEEditor | null>(null);
|
||||
const selectionRef = useRef<{ start: number; end: number; text: string } | null>(null);
|
||||
|
||||
const [htmlContent, setHtmlContent] = useState("");
|
||||
const [templateName, setTemplateName] = useState("");
|
||||
const [points, setPoints] = useState<GenerationPoint[]>([]);
|
||||
const [models, setModels] = useState<AIModel[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [pointModalOpen, setPointModalOpen] = useState(false);
|
||||
const [editingPoint, setEditingPoint] = useState<GenerationPoint | null>(null);
|
||||
const [showSelectionBtn, setShowSelectionBtn] = useState(false);
|
||||
const [selBtnPos, setSelBtnPos] = useState({ x: 0, y: 0 });
|
||||
const [pointForm] = Form.useForm();
|
||||
const [panelCollapsed, setPanelCollapsed] = useState(false);
|
||||
|
||||
const [generating, setGenerating] = useState(false);
|
||||
const [taskStatus, setTaskStatus] = useState<GenerationTask | null>(null);
|
||||
const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const [template, pointsData, modelsData] = await Promise.all([
|
||||
templateApi.getTemplate(id),
|
||||
pointApi.listGenerationPoints(id),
|
||||
modelApi.listModels({ enabled: true }),
|
||||
]);
|
||||
setTemplateName(template.name);
|
||||
setHtmlContent(template.html_content || "");
|
||||
setPoints(pointsData);
|
||||
setModels(modelsData);
|
||||
} catch {
|
||||
message.error("加载数据失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
return () => {
|
||||
if (pollingRef.current) clearInterval(pollingRef.current);
|
||||
};
|
||||
}, [loadData]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!id) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const html = editorRef.current?.getContent() || htmlContent;
|
||||
await templateApi.updateTemplateHtml(id, html);
|
||||
setHtmlContent(html);
|
||||
message.success("保存成功");
|
||||
} catch {
|
||||
message.error("保存失败");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditorInit = (_evt: unknown, editor: TinyMCEEditor) => {
|
||||
editorRef.current = editor;
|
||||
editor.on("selectionchange", () => {
|
||||
const sel = editor.selection.getContent({ format: "text" });
|
||||
if (sel && sel.trim().length > 0) {
|
||||
const content = editor.getContent();
|
||||
const rng = editor.selection.getRng();
|
||||
if (rng) {
|
||||
const preRange = rng.cloneRange();
|
||||
preRange.selectNodeContents(editor.getBody());
|
||||
preRange.setEnd(rng.startContainer, rng.startOffset);
|
||||
const start = preRange.toString().length;
|
||||
const end = start + sel.length;
|
||||
selectionRef.current = { start, end, text: sel.trim() };
|
||||
}
|
||||
const ed = editor.getContainer();
|
||||
const rect = ed.getBoundingClientRect();
|
||||
setSelBtnPos({ x: rect.left + 100, y: rect.top + 10 });
|
||||
setShowSelectionBtn(true);
|
||||
} else {
|
||||
setShowSelectionBtn(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreatePoint = () => {
|
||||
setEditingPoint(null);
|
||||
pointForm.resetFields();
|
||||
if (selectionRef.current) {
|
||||
pointForm.setFieldsValue({
|
||||
prompt: `根据上下文生成关于「${selectionRef.current.text.slice(0, 20)}...」的内容`,
|
||||
});
|
||||
}
|
||||
setPointModalOpen(true);
|
||||
};
|
||||
|
||||
const handleEditPoint = (point: GenerationPoint) => {
|
||||
setEditingPoint(point);
|
||||
pointForm.setFieldsValue({
|
||||
prompt: point.prompt,
|
||||
model_id: point.model_id,
|
||||
});
|
||||
setPointModalOpen(true);
|
||||
};
|
||||
|
||||
const handlePointSubmit = async () => {
|
||||
if (!id) return;
|
||||
try {
|
||||
const values = await pointForm.validateFields();
|
||||
const position = selectionRef.current
|
||||
? { start: selectionRef.current.start, end: selectionRef.current.end }
|
||||
: editingPoint?.position;
|
||||
|
||||
const refFile = values.ref_file?.fileList?.[0]?.originFileObj;
|
||||
|
||||
if (editingPoint) {
|
||||
const updateData: Record<string, unknown> = {};
|
||||
if (values.prompt) updateData.prompt = values.prompt;
|
||||
if (values.model_id) updateData.model_id = values.model_id;
|
||||
await pointApi.updateGenerationPoint(editingPoint.id, updateData);
|
||||
message.success("更新成功");
|
||||
} else if (position) {
|
||||
await pointApi.createGenerationPoint({
|
||||
template_id: id,
|
||||
position: JSON.stringify(position),
|
||||
prompt: values.prompt,
|
||||
model_id: values.model_id,
|
||||
order: points.length,
|
||||
ref_file: refFile,
|
||||
});
|
||||
message.success("创建成功");
|
||||
selectionRef.current = null;
|
||||
setShowSelectionBtn(false);
|
||||
} else {
|
||||
message.warning("请先在编辑器中选中文本");
|
||||
return;
|
||||
}
|
||||
|
||||
setPointModalOpen(false);
|
||||
const updated = await pointApi.listGenerationPoints(id);
|
||||
setPoints(updated);
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) message.error(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeletePoint = async (pointId: string) => {
|
||||
await pointApi.deleteGenerationPoint(pointId);
|
||||
message.success("删除成功");
|
||||
const updated = await pointApi.listGenerationPoints(id!);
|
||||
setPoints(updated);
|
||||
};
|
||||
|
||||
const handleTestPoint = async (pointId: string) => {
|
||||
try {
|
||||
message.loading({ content: "测试中...", key: "test" });
|
||||
const result = await pointApi.testGenerationPoint(pointId);
|
||||
message.success({ content: "测试完成", key: "test" });
|
||||
Modal.info({ title: "AI 生成结果", content: result, width: 600 });
|
||||
} catch {
|
||||
message.error({ content: "测试失败", key: "test" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerate = async () => {
|
||||
if (!id) return;
|
||||
if (points.length === 0) {
|
||||
message.warning("请先添加至少一个生成点");
|
||||
return;
|
||||
}
|
||||
setGenerating(true);
|
||||
try {
|
||||
const { task_id } = await taskApi.triggerGeneration(id);
|
||||
pollingRef.current = setInterval(async () => {
|
||||
try {
|
||||
const status = await taskApi.getTaskStatus(task_id);
|
||||
setTaskStatus(status);
|
||||
if (status.status === "done" || status.status === "failed") {
|
||||
if (pollingRef.current) clearInterval(pollingRef.current);
|
||||
if (status.status === "done") {
|
||||
message.success("生成完成！");
|
||||
} else {
|
||||
message.error(`生成失败: ${status.error_msg}`);
|
||||
}
|
||||
setGenerating(false);
|
||||
}
|
||||
} catch {
|
||||
if (pollingRef.current) clearInterval(pollingRef.current);
|
||||
setGenerating(false);
|
||||
}
|
||||
}, 2000);
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) message.error(err.message);
|
||||
setGenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = (format: "docx" | "pdf" = "docx") => {
|
||||
if (taskStatus?.id) {
|
||||
window.open(taskApi.getTaskDownloadUrl(taskStatus.id, format));
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ textAlign: "center", padding: 100 }}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ height: "calc(100vh - 120px)" }}>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 12,
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<Button icon={<ArrowLeftOutlined />} onClick={() => navigate("/templates")}>
|
||||
返回
|
||||
</Button>
|
||||
<h3 style={{ margin: 0 }}>{templateName}</h3>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
icon={panelCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
onClick={() => setPanelCollapsed(!panelCollapsed)}
|
||||
/>
|
||||
<Button icon={<SaveOutlined />} onClick={handleSave} loading={saving}>
|
||||
保存
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
icon={<ThunderboltOutlined />}
|
||||
onClick={handleGenerate}
|
||||
loading={generating}
|
||||
>
|
||||
生成文档
|
||||
</Button>
|
||||
{taskStatus?.status === "done" && (
|
||||
<>
|
||||
<Button icon={<DownloadOutlined />} onClick={() => handleDownload("docx")}>
|
||||
DOCX
|
||||
</Button>
|
||||
<Button onClick={() => handleDownload("pdf")}>PDF</Button>
|
||||
</>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
{taskStatus && taskStatus.status !== "done" && taskStatus.status !== "failed" && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Progress
|
||||
percent={taskStatus.status === "processing" ? 50 : 10}
|
||||
status="active"
|
||||
format={() => taskStatus.status === "pending" ? "等待中..." : "生成中..."}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{taskStatus?.status === "failed" && (
|
||||
<div style={{ marginBottom: 12, color: "red" }}>失败: {taskStatus.error_msg}</div>
|
||||
)}
|
||||
<Layout style={{ height: "calc(100% - 50px)", background: "#fff" }}>
|
||||
<Content style={{ position: "relative", overflow: "hidden" }}>
|
||||
{showSelectionBtn && (
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleCreatePoint}
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: 1310,
|
||||
top: 8,
|
||||
left: 8,
|
||||
}}
|
||||
>
|
||||
设为 AI 生成点
|
||||
</Button>
|
||||
)}
|
||||
<Editor
|
||||
tinymceScriptSrc="/tinymce/tinymce.min.js"
|
||||
onInit={handleEditorInit}
|
||||
value={htmlContent}
|
||||
init={{
|
||||
height: "100%",
|
||||
menubar: true,
|
||||
plugins: [
|
||||
"advlist", "autolink", "lists", "link", "image",
|
||||
"charmap", "preview", "anchor", "searchreplace",
|
||||
"visualblocks", "code", "fullscreen", "insertdatetime",
|
||||
"media", "table", "help", "wordcount",
|
||||
],
|
||||
toolbar:
|
||||
"undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
|
||||
content_style: "body { font-family: Arial, sans-serif; font-size: 14px; }",
|
||||
setup: (editor) => {
|
||||
editor.on("init", () => {
|
||||
handleEditorInit(null, editor);
|
||||
});
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Content>
|
||||
{!panelCollapsed && (
|
||||
<Sider width={320} theme="light" style={{ padding: 16, overflow: "auto", borderLeft: "1px solid #f0f0f0" }}>
|
||||
<h4 style={{ marginBottom: 12 }}>生成点列表 ({points.length})</h4>
|
||||
{points.map((point, index) => {
|
||||
const model = models.find((m) => m.id === point.model_id);
|
||||
return (
|
||||
<Card
|
||||
key={point.id}
|
||||
size="small"
|
||||
style={{ marginBottom: 8 }}
|
||||
title={
|
||||
<Space size={4}>
|
||||
<span style={{ fontSize: 12, color: "#999" }}>#{index + 1}</span>
|
||||
{model && (
|
||||
<span style={{ fontSize: 12, color: "#1677ff" }}>
|
||||
{model.name}
|
||||
</span>
|
||||
)}
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Space size={4}>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<ExperimentOutlined />}
|
||||
onClick={() => handleTestPoint(point.id)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => handleEditPoint(point)}
|
||||
/>
|
||||
<Popconfirm
|
||||
title="确定删除？"
|
||||
onConfirm={() => handleDeletePoint(point.id)}
|
||||
>
|
||||
<Button type="text" size="small" danger icon={<DeleteOutlined />} />
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<p style={{ fontSize: 12, color: "#666", margin: 0, wordBreak: "break-all" }}>
|
||||
{point.prompt.slice(0, 80)}
|
||||
{point.prompt.length > 80 && "..."}
|
||||
</p>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
{points.length === 0 && (
|
||||
<p style={{ color: "#999", fontSize: 13 }}>
|
||||
选中编辑器中的文本，点击"设为 AI 生成点"
|
||||
</p>
|
||||
)}
|
||||
</Sider>
|
||||
)}
|
||||
</Layout>
|
||||
|
||||
<Modal
|
||||
title={editingPoint ? "编辑生成点" : "新建生成点"}
|
||||
open={pointModalOpen}
|
||||
onCancel={() => setPointModalOpen(false)}
|
||||
onOk={handlePointSubmit}
|
||||
width={560}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form form={pointForm} layout="vertical" preserve={false}>
|
||||
{selectionRef.current && !editingPoint && (
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 12,
|
||||
padding: 8,
|
||||
background: "#f6f8fa",
|
||||
borderRadius: 6,
|
||||
fontSize: 13,
|
||||
color: "#666",
|
||||
}}
|
||||
>
|
||||
已选中: 「{selectionRef.current.text.slice(0, 50)}
|
||||
{selectionRef.current.text.length > 50 ? "..." : ""}」
|
||||
</div>
|
||||
)}
|
||||
<Form.Item name="prompt" label="提示词" rules={[{ required: true }]}>
|
||||
<Input.TextArea
|
||||
rows={4}
|
||||
placeholder="请输入 AI 生成提示词，例如：请根据参考文件内容，生成一段项目背景介绍..."
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="model_id" label="AI 模型">
|
||||
<Select
|
||||
allowClear
|
||||
placeholder="留空则使用全局默认模型"
|
||||
options={models.map((m) => ({ label: m.name, value: m.id }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
{!editingPoint && (
|
||||
<Form.Item name="ref_file" label="参考文件" valuePropName="fileList" getValueFromEvent={(e) => e.fileList}>
|
||||
<Upload maxCount={1} beforeUpload={() => false}>
|
||||
<Button icon={<PlusOutlined />}>上传参考文件</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,121 @@
|
|||
const TemplateList = () => <div>模板列表页面</div>;
|
||||
export default TemplateList;
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Table, Button, Upload, Space, message, Popconfirm } from "antd";
|
||||
import { UploadOutlined, EditOutlined, DeleteOutlined, DownloadOutlined, PlusOutlined } from "@ant-design/icons";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import type { TemplateListItem } from "../types";
|
||||
import * as templateApi from "../api/templates";
|
||||
|
||||
export default function TemplateList() {
|
||||
const navigate = useNavigate();
|
||||
const [templates, setTemplates] = useState<TemplateListItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchTemplates = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await templateApi.listTemplates();
|
||||
setTemplates(data);
|
||||
} catch {
|
||||
message.error("获取模板列表失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTemplates();
|
||||
}, [fetchTemplates]);
|
||||
|
||||
const handleUpload = async (file: File) => {
|
||||
try {
|
||||
await templateApi.uploadTemplate(file);
|
||||
message.success("上传成功");
|
||||
fetchTemplates();
|
||||
} catch {
|
||||
message.error("上传失败");
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
await templateApi.deleteTemplate(id);
|
||||
message.success("删除成功");
|
||||
fetchTemplates();
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ title: "模板名称", dataIndex: "name", key: "name" },
|
||||
{
|
||||
title: "创建时间",
|
||||
dataIndex: "created_at",
|
||||
key: "created_at",
|
||||
render: (v: string) => new Date(v).toLocaleString(),
|
||||
},
|
||||
{
|
||||
title: "更新时间",
|
||||
dataIndex: "updated_at",
|
||||
key: "updated_at",
|
||||
render: (v: string) => new Date(v).toLocaleString(),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "actions",
|
||||
width: 240,
|
||||
render: (_: unknown, record: TemplateListItem) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => navigate(`/editor/${record.id}`)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={() => window.open(templateApi.getDownloadUrl(record.id))}
|
||||
>
|
||||
DOCX
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => window.open(templateApi.getDownloadUrl(record.id, "pdf"))}
|
||||
>
|
||||
PDF
|
||||
</Button>
|
||||
<Popconfirm title="确定删除此模板？" onConfirm={() => handleDelete(record.id)}>
|
||||
<Button size="small" danger icon={<DeleteOutlined />} />
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16, display: "flex", justifyContent: "space-between" }}>
|
||||
<h2>模板管理</h2>
|
||||
<Upload
|
||||
accept=".docx"
|
||||
showUploadList={false}
|
||||
beforeUpload={(file) => {
|
||||
handleUpload(file);
|
||||
return false;
|
||||
}}
|
||||
>
|
||||
<Button type="primary" icon={<PlusOutlined />}>
|
||||
上传模板
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={templates}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
export interface AIModel {
|
||||
id: string;
|
||||
name: string;
|
||||
provider: string;
|
||||
endpoint: string;
|
||||
api_key: string;
|
||||
extra_params: Record<string, unknown>;
|
||||
is_enabled: boolean;
|
||||
remark: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface Template {
|
||||
id: string;
|
||||
name: string;
|
||||
file_path: string;
|
||||
html_content: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface TemplateListItem {
|
||||
id: string;
|
||||
name: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface GenerationPoint {
|
||||
id: string;
|
||||
template_id: string;
|
||||
position: { start: number; end: number };
|
||||
prompt: string;
|
||||
model_id: string | null;
|
||||
ref_file_path: string | null;
|
||||
order: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface GenerationTask {
|
||||
id: string;
|
||||
template_id: string;
|
||||
status: "pending" | "processing" | "done" | "failed";
|
||||
result_file_path: string | null;
|
||||
error_msg: string | null;
|
||||
created_at: string;
|
||||
finished_at: string | null;
|
||||
}
|
||||
|
|
@ -1,7 +1,15 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://localhost:8000",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue