462 lines
13 KiB
TypeScript
462 lines
13 KiB
TypeScript
import { MetaFunction, json, type LoaderFunctionArgs } from "@remix-run/node";
|
|
import { useSearchParams, useNavigate, useLoaderData } from "@remix-run/react";
|
|
import { useState } from "react";
|
|
import indexStyles from "~/styles/pages/prompts_index.css?url";
|
|
import { Card } from "~/components/ui/Card";
|
|
import { Button } from "~/components/ui/Button";
|
|
import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
|
|
import { Table } from "~/components/ui/Table";
|
|
import { Pagination } from "~/components/ui/Pagination";
|
|
import { getPromptTemplates, deletePromptTemplate, type PromptTemplateUI } from "~/api/prompts/prompts";
|
|
|
|
// 定义提示词模板类型
|
|
export interface PromptTemplate {
|
|
id: string;
|
|
template_name: string;
|
|
template_type: 'Common' | 'Extraction' | 'Evaluation' | 'Summary';
|
|
description: string;
|
|
version: string;
|
|
status: 'active' | 'inactive' | 'system';
|
|
created_by: string;
|
|
template_content: string;
|
|
variables: string; // JSON字符串
|
|
}
|
|
|
|
// 样式链接
|
|
export function links() {
|
|
return [{ rel: "stylesheet", href: indexStyles }];
|
|
}
|
|
|
|
// 页面元数据
|
|
export const meta: MetaFunction = () => {
|
|
return [
|
|
{ title: "提示词模板管理 - 中国烟草AI合同及卷宗审核系统" },
|
|
{ name: "description", content: "管理提示词模板，包括创建、编辑和删除提示词模板" },
|
|
];
|
|
};
|
|
|
|
// 定义加载器返回数据类型
|
|
interface LoaderData {
|
|
templates: PromptTemplateUI[];
|
|
total: number;
|
|
pageSize: number;
|
|
currentPage: number;
|
|
error?: string;
|
|
}
|
|
|
|
// 数据加载器
|
|
export async function loader({ request }: LoaderFunctionArgs) {
|
|
try {
|
|
const url = new URL(request.url);
|
|
const name = url.searchParams.get('name') || undefined;
|
|
const type = url.searchParams.get('type') || undefined;
|
|
const status = url.searchParams.get('status') || undefined;
|
|
const page = parseInt(url.searchParams.get('page') || '1', 10);
|
|
const pageSize = parseInt(url.searchParams.get('pageSize') || '10', 10);
|
|
|
|
// console.log('加载提示词模板参数:', { name, type, status, page, pageSize });
|
|
|
|
// 从 API 获取数据
|
|
const result = await getPromptTemplates({
|
|
name,
|
|
type,
|
|
status,
|
|
page,
|
|
pageSize
|
|
});
|
|
|
|
if (result.error) {
|
|
console.error('获取提示词模板失败:', result.error);
|
|
return Response.json(
|
|
{
|
|
templates: [],
|
|
total: 0,
|
|
pageSize,
|
|
currentPage: page,
|
|
error: result.error
|
|
},
|
|
{ status: result.status || 500 }
|
|
);
|
|
}
|
|
|
|
// console.log(`成功加载${result.data?.templates.length || 0}条提示词模板数据`);
|
|
|
|
return Response.json({
|
|
templates: result.data?.templates || [],
|
|
total: result.data?.total || 0,
|
|
pageSize,
|
|
currentPage: page
|
|
});
|
|
} catch (error) {
|
|
console.error("加载提示词模板失败:", error);
|
|
return Response.json(
|
|
{
|
|
templates: [],
|
|
total: 0,
|
|
pageSize: 10,
|
|
currentPage: 1,
|
|
error: "加载提示词模板失败"
|
|
},
|
|
{ status: 500 }
|
|
);
|
|
}
|
|
}
|
|
|
|
// 页面组件
|
|
export default function PromptsIndex() {
|
|
const navigate = useNavigate();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const { templates, total, currentPage, pageSize, error } = useLoaderData<typeof loader>();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
// 处理搜索名称
|
|
const handleNameSearch = (value: string) => {
|
|
const newParams = new URLSearchParams(searchParams);
|
|
if (value) {
|
|
newParams.set('name', value);
|
|
} else {
|
|
newParams.delete('name');
|
|
}
|
|
newParams.set('page', '1');
|
|
setSearchParams(newParams);
|
|
};
|
|
|
|
// 处理类型筛选变更
|
|
const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const { value } = e.target;
|
|
const newParams = new URLSearchParams(searchParams);
|
|
if (value) {
|
|
newParams.set('type', value);
|
|
} else {
|
|
newParams.delete('type');
|
|
}
|
|
newParams.set('page', '1');
|
|
setSearchParams(newParams);
|
|
};
|
|
|
|
// 处理状态筛选变更
|
|
const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const { value } = e.target;
|
|
const newParams = new URLSearchParams(searchParams);
|
|
if (value) {
|
|
newParams.set('status', value);
|
|
} else {
|
|
newParams.delete('status');
|
|
}
|
|
newParams.set('page', '1');
|
|
setSearchParams(newParams);
|
|
};
|
|
|
|
// 处理重置筛选
|
|
const handleReset = () => {
|
|
setSearchParams(new URLSearchParams());
|
|
};
|
|
|
|
// 处理搜索按钮点击
|
|
// const handleSearch = () => {
|
|
// // 搜索已经由 URL 参数变化触发，这里不需要额外操作
|
|
// console.log('搜索参数:', Object.fromEntries(searchParams.entries()));
|
|
// };
|
|
|
|
// 查看模板详情
|
|
const handleViewTemplate = (id: string) => {
|
|
navigate(`/prompts/new?id=${id}&mode=view`);
|
|
};
|
|
|
|
// 复制模板
|
|
const handleCloneTemplate = (id: string) => {
|
|
if (confirm('确定要复制该模板创建新模板吗？')) {
|
|
navigate(`/prompts/new?id=${id}&mode=clone`);
|
|
}
|
|
};
|
|
|
|
// 编辑模板
|
|
const handleEditTemplate = (id: string) => {
|
|
navigate(`/prompts/new?id=${id}&mode=edit`);
|
|
};
|
|
|
|
// 删除模板
|
|
const handleDeleteTemplate = async (id: string) => {
|
|
if (confirm('确定要删除该模板吗？删除后无法恢复。')) {
|
|
setIsLoading(true);
|
|
try {
|
|
const result = await deletePromptTemplate(id);
|
|
if (result.error) {
|
|
alert(`删除失败: ${result.error}`);
|
|
} else {
|
|
alert('删除成功！');
|
|
// 刷新页面
|
|
window.location.reload();
|
|
}
|
|
} catch (error) {
|
|
alert(`删除失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
// 处理分页
|
|
const handlePageChange = (page: number) => {
|
|
const newParams = new URLSearchParams(searchParams);
|
|
newParams.set('page', page.toString());
|
|
setSearchParams(newParams);
|
|
};
|
|
|
|
// 处理每页条数变更
|
|
const handlePageSizeChange = (size: number) => {
|
|
const newParams = new URLSearchParams(searchParams);
|
|
newParams.set('pageSize', size.toString());
|
|
newParams.set('page', '1'); // 更改每页条数时，重置到第一页
|
|
setSearchParams(newParams);
|
|
};
|
|
|
|
// 定义表格列配置
|
|
const columns = [
|
|
{
|
|
title: "模板名称",
|
|
key: "template_name",
|
|
width: "300px",
|
|
render: (_: unknown, record: PromptTemplateUI) => (
|
|
<div className="flex items-center">
|
|
<i className="ri-file-list-line text-primary mr-2"></i>
|
|
<span className="truncate">{record.template_name}</span>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
title: "类型",
|
|
key: "template_type",
|
|
width: "120px",
|
|
render: (_: unknown, record: PromptTemplateUI) => {
|
|
let typeText = '';
|
|
let typeClass = '';
|
|
|
|
switch (record.template_type) {
|
|
case 'LLM_Extraction':
|
|
typeText = '抽取';
|
|
typeClass = 'type-extraction';
|
|
break;
|
|
case 'VLM_Extraction':
|
|
typeText = '抽取';
|
|
typeClass = 'type-extraction';
|
|
break;
|
|
case 'Evaluation':
|
|
typeText = '评估';
|
|
typeClass = 'type-evaluation';
|
|
break;
|
|
case 'Summary':
|
|
typeText = '摘要';
|
|
typeClass = 'type-summary';
|
|
break;
|
|
case 'Common':
|
|
typeText = '通用';
|
|
typeClass = 'type-common';
|
|
break;
|
|
}
|
|
|
|
return <span className={`type-badge ${typeClass}`}>{typeText}</span>;
|
|
}
|
|
},
|
|
{
|
|
title: "描述",
|
|
key: "description",
|
|
render: (_: unknown, record: PromptTemplateUI) => (
|
|
<div className="text-secondary text-sm max-w-xs text-wrap" title={record.description}>
|
|
{record.description}
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
title: "版本",
|
|
key: "version",
|
|
width: "80px",
|
|
render: (_: unknown, record: PromptTemplateUI) => record.version
|
|
},
|
|
{
|
|
title: "状态",
|
|
key: "status",
|
|
width: "100px",
|
|
render: (_: unknown, record: PromptTemplateUI) => {
|
|
let statusText = '';
|
|
let statusClass = '';
|
|
|
|
switch (record.status) {
|
|
case 'active':
|
|
statusText = '启用';
|
|
statusClass = 'status-active';
|
|
break;
|
|
case 'inactive':
|
|
statusText = '停用';
|
|
statusClass = 'status-inactive';
|
|
break;
|
|
case 'system':
|
|
statusText = '系统预设';
|
|
statusClass = 'status-system';
|
|
break;
|
|
}
|
|
|
|
return <span className={`status-badge ${statusClass}`}>{statusText}</span>;
|
|
}
|
|
},
|
|
{
|
|
title: "创建者",
|
|
key: "created_by",
|
|
width: "100px",
|
|
render: (_: unknown, record: PromptTemplateUI) => (
|
|
<span className="text-secondary">用户 {record.created_by}</span>
|
|
)
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "operation",
|
|
width: "150px",
|
|
render: (_: unknown, record: PromptTemplateUI) => (
|
|
<div>
|
|
{record.status === 'system' ? (
|
|
<>
|
|
<button
|
|
className="operation-btn text-primary"
|
|
onClick={() => handleViewTemplate(record.id)}
|
|
>
|
|
<i className="ri-eye-line"></i> 查看
|
|
</button>
|
|
<button
|
|
className="operation-btn text-primary"
|
|
onClick={() => handleCloneTemplate(record.id)}
|
|
>
|
|
<i className="ri-file-copy-line"></i> 复制
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<button
|
|
className="operation-btn text-primary"
|
|
onClick={() => handleEditTemplate(record.id)}
|
|
>
|
|
<i className="ri-edit-line"></i> 编辑
|
|
</button>
|
|
<button
|
|
className="operation-btn text-error"
|
|
onClick={() => handleDeleteTemplate(record.id)}
|
|
disabled={isLoading}
|
|
>
|
|
<i className="ri-delete-bin-line"></i> 删除
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="prompt-page">
|
|
{/* 页面头部 */}
|
|
<div className="page-header">
|
|
<h2 className="page-title">提示词模板管理</h2>
|
|
<div>
|
|
<Button
|
|
type="primary"
|
|
icon="ri-add-line"
|
|
onClick={() => navigate("/prompts/new")}
|
|
>
|
|
新增提示词模板
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 搜索栏 - 使用FilterPanel */}
|
|
<FilterPanel
|
|
className="mb-4"
|
|
actions={
|
|
<>
|
|
<Button
|
|
type="default"
|
|
icon="ri-refresh-line"
|
|
onClick={handleReset}
|
|
className="mr-2"
|
|
>
|
|
重置
|
|
</Button>
|
|
{/* <Button
|
|
type="primary"
|
|
icon="ri-search-line"
|
|
onClick={handleSearch}
|
|
>
|
|
搜索
|
|
</Button> */}
|
|
</>
|
|
}
|
|
noActionDivider={true}
|
|
>
|
|
<SearchFilter
|
|
label="模板名称"
|
|
placeholder="请输入模板名称"
|
|
value={searchParams.get('name') || ''}
|
|
onSearch={handleNameSearch}
|
|
className="flex-1 min-w-[200px]"
|
|
instantSearch={true}
|
|
/>
|
|
|
|
<FilterSelect
|
|
label="模板类型"
|
|
name="type"
|
|
value={searchParams.get('type') || ''}
|
|
options={[
|
|
{ value: "LLM_Extraction", label: "LLM抽取(LLM_Extraction)" },
|
|
{ value: "VLM_Extraction", label: "VLM抽取(VLM_Extraction)" },
|
|
{ value: "Evaluation", label: "评估(Evaluation)" },
|
|
{ value: "Summary", label: "摘要(Summary)" },
|
|
{ value: "Common", label: "通用(Common)" }
|
|
]}
|
|
onChange={handleTypeChange}
|
|
className="flex-1 min-w-[200px]"
|
|
/>
|
|
|
|
<FilterSelect
|
|
label="状态"
|
|
name="status"
|
|
value={searchParams.get('status') || ''}
|
|
options={[
|
|
{ value: "active", label: "启用" },
|
|
{ value: "inactive", label: "停用" },
|
|
{ value: "system", label: "系统预设" }
|
|
]}
|
|
onChange={handleStatusChange}
|
|
className="flex-1 min-w-[200px]"
|
|
/>
|
|
</FilterPanel>
|
|
|
|
{/* 错误信息 */}
|
|
{error && (
|
|
<div className="error-alert mb-4 p-4 bg-red-50 text-red-700 rounded-md">
|
|
<i className="ri-error-warning-line mr-2"></i> {error}
|
|
</div>
|
|
)}
|
|
|
|
{/* 数据表格 */}
|
|
<Card bodyClassName="px-4 py-4">
|
|
<Table
|
|
columns={columns}
|
|
dataSource={templates}
|
|
rowKey="id"
|
|
emptyText="暂无提示词模板数据"
|
|
loading={isLoading}
|
|
/>
|
|
|
|
{/* 分页 */}
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
total={total}
|
|
pageSize={pageSize}
|
|
onChange={handlePageChange}
|
|
onPageSizeChange={handlePageSizeChange}
|
|
showTotal={true}
|
|
showPageSizeChanger={true}
|
|
pageSizeOptions={[10, 20, 30, 50]}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|