feat: 完成前端重构，采用 Ant Design 5 和完整测试体系
- 采用 Ant Design 5 作为 UI 组件库，替换自定义组件 - 集成 React Router v7 提供路由导航 - 使用 TanStack Query v5 管理数据获取和缓存 - 建立 Vitest + React Testing Library 测试体系 - 添加 Playwright E2E 测试覆盖 - 使用 MSW mock API 响应 - 配置 TypeScript strict 模式 - 采用 SCSS Modules 组织样式 - 更新 OpenSpec 规格以反映前端架构变更 - 归档 frontend-refactor 变更记录
This commit is contained in:
94
frontend/src/pages/Providers/ModelForm.tsx
Normal file
94
frontend/src/pages/Providers/ModelForm.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Modal, Form, Input, Select, Switch } from 'antd';
|
||||
import type { Provider, Model } from '@/types';
|
||||
|
||||
interface ModelFormValues {
|
||||
id: string;
|
||||
providerId: string;
|
||||
modelName: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
interface ModelFormProps {
|
||||
open: boolean;
|
||||
model?: Model;
|
||||
providerId: string;
|
||||
providers: Provider[];
|
||||
onSave: (values: ModelFormValues) => void;
|
||||
onCancel: () => void;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
export function ModelForm({
|
||||
open,
|
||||
model,
|
||||
providerId,
|
||||
providers,
|
||||
onSave,
|
||||
onCancel,
|
||||
loading,
|
||||
}: ModelFormProps) {
|
||||
const [form] = Form.useForm<ModelFormValues>();
|
||||
const isEdit = !!model;
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
if (model) {
|
||||
form.setFieldsValue({
|
||||
id: model.id,
|
||||
providerId: model.providerId,
|
||||
modelName: model.modelName,
|
||||
enabled: model.enabled,
|
||||
});
|
||||
} else {
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ providerId });
|
||||
}
|
||||
}
|
||||
}, [open, model, providerId, form]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={isEdit ? '编辑模型' : '添加模型'}
|
||||
open={open}
|
||||
onOk={() => form.submit()}
|
||||
onCancel={onCancel}
|
||||
confirmLoading={loading}
|
||||
okText="保存"
|
||||
cancelText="取消"
|
||||
destroyOnClose
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={onSave} initialValues={{ enabled: true }}>
|
||||
<Form.Item label="ID" name="id" rules={[{ required: true, message: '请输入模型 ID' }]}>
|
||||
<Input disabled={isEdit} placeholder="例如: gpt-4o" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="供应商"
|
||||
name="providerId"
|
||||
rules={[{ required: true, message: '请选择供应商' }]}
|
||||
>
|
||||
<Select>
|
||||
{providers.map((p) => (
|
||||
<Select.Option key={p.id} value={p.id}>
|
||||
{p.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="模型名称"
|
||||
name="modelName"
|
||||
rules={[{ required: true, message: '请输入模型名称' }]}
|
||||
>
|
||||
<Input placeholder="例如: gpt-4o" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="启用" name="enabled" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
76
frontend/src/pages/Providers/ModelTable.tsx
Normal file
76
frontend/src/pages/Providers/ModelTable.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { Button, Table, Tag, Popconfirm, Space } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { Model } from '@/types';
|
||||
import { useModels, useDeleteModel } from '@/hooks/useModels';
|
||||
|
||||
interface ModelTableProps {
|
||||
providerId: string;
|
||||
onAdd?: () => void;
|
||||
onEdit?: (model: Model) => void;
|
||||
}
|
||||
|
||||
export function ModelTable({ providerId, onAdd, onEdit }: ModelTableProps) {
|
||||
const { data: models = [], isLoading } = useModels(providerId);
|
||||
const deleteModel = useDeleteModel();
|
||||
|
||||
const columns: ColumnsType<Model> = [
|
||||
{
|
||||
title: '模型名称',
|
||||
dataIndex: 'modelName',
|
||||
key: 'modelName',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabled',
|
||||
key: 'enabled',
|
||||
render: (enabled: boolean) =>
|
||||
enabled ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>,
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
{onEdit && (
|
||||
<Button type="link" size="small" onClick={() => onEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
)}
|
||||
<Popconfirm
|
||||
title="确定要删除这个模型吗？"
|
||||
onConfirm={() => deleteModel.mutate(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="link" danger size="small">
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ padding: '8px 16px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
|
||||
<span style={{ fontWeight: 500 }}>关联模型 ({models.length})</span>
|
||||
{onAdd && (
|
||||
<Button type="link" size="small" onClick={onAdd}>
|
||||
添加模型
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Table<Model>
|
||||
columns={columns}
|
||||
dataSource={models}
|
||||
rowKey="id"
|
||||
loading={isLoading}
|
||||
pagination={false}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
92
frontend/src/pages/Providers/ProviderForm.tsx
Normal file
92
frontend/src/pages/Providers/ProviderForm.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Modal, Form, Input, Switch } from 'antd';
|
||||
import type { Provider } from '@/types';
|
||||
|
||||
interface ProviderFormValues {
|
||||
id: string;
|
||||
name: string;
|
||||
apiKey: string;
|
||||
baseUrl: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
interface ProviderFormProps {
|
||||
open: boolean;
|
||||
provider?: Provider;
|
||||
onSave: (values: ProviderFormValues) => void;
|
||||
onCancel: () => void;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
export function ProviderForm({
|
||||
open,
|
||||
provider,
|
||||
onSave,
|
||||
onCancel,
|
||||
loading,
|
||||
}: ProviderFormProps) {
|
||||
const [form] = Form.useForm<ProviderFormValues>();
|
||||
const isEdit = !!provider;
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
if (provider) {
|
||||
form.setFieldsValue({
|
||||
id: provider.id,
|
||||
name: provider.name,
|
||||
apiKey: '',
|
||||
baseUrl: provider.baseUrl,
|
||||
enabled: provider.enabled,
|
||||
});
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
}
|
||||
}, [open, provider, form]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={isEdit ? '编辑供应商' : '添加供应商'}
|
||||
open={open}
|
||||
onOk={() => form.submit()}
|
||||
onCancel={onCancel}
|
||||
confirmLoading={loading}
|
||||
okText="保存"
|
||||
cancelText="取消"
|
||||
destroyOnClose
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={onSave} initialValues={{ enabled: true }}>
|
||||
<Form.Item label="ID" name="id" rules={[{ required: true, message: '请输入供应商 ID' }]}>
|
||||
<Input disabled={isEdit} placeholder="例如: openai" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="名称" name="name" rules={[{ required: true, message: '请输入名称' }]}>
|
||||
<Input placeholder="例如: OpenAI" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={isEdit ? 'API Key（留空则不修改）' : 'API Key'}
|
||||
name="apiKey"
|
||||
rules={isEdit ? [] : [{ required: true, message: '请输入 API Key' }]}
|
||||
>
|
||||
<Input.Password placeholder="sk-..." />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Base URL"
|
||||
name="baseUrl"
|
||||
rules={[
|
||||
{ required: true, message: '请输入 Base URL' },
|
||||
{ type: 'url', message: '请输入有效的 URL' },
|
||||
]}
|
||||
>
|
||||
<Input placeholder="例如: https://api.openai.com/v1" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="启用" name="enabled" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
106
frontend/src/pages/Providers/ProviderTable.tsx
Normal file
106
frontend/src/pages/Providers/ProviderTable.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { Button, Table, Tag, Popconfirm, Space } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { Provider, Model } from '@/types';
|
||||
import { ModelTable } from './ModelTable';
|
||||
|
||||
interface ProviderTableProps {
|
||||
providers: Provider[];
|
||||
loading: boolean;
|
||||
onAdd: () => void;
|
||||
onEdit: (provider: Provider) => void;
|
||||
onDelete: (id: string) => void;
|
||||
onAddModel: (providerId: string) => void;
|
||||
onEditModel: (model: Model) => void;
|
||||
}
|
||||
|
||||
function maskApiKey(key: string | null | undefined): string {
|
||||
if (!key) return '****';
|
||||
if (key.length <= 4) return '****';
|
||||
return `****${key.slice(-4)}`;
|
||||
}
|
||||
|
||||
export function ProviderTable({
|
||||
providers,
|
||||
loading,
|
||||
onAdd,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onAddModel,
|
||||
onEditModel,
|
||||
}: ProviderTableProps) {
|
||||
const columns: ColumnsType<Provider> = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Base URL',
|
||||
dataIndex: 'baseUrl',
|
||||
key: 'baseUrl',
|
||||
},
|
||||
{
|
||||
title: 'API Key',
|
||||
dataIndex: 'apiKey',
|
||||
key: 'apiKey',
|
||||
render: (key: string | null | undefined) => maskApiKey(key),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabled',
|
||||
key: 'enabled',
|
||||
render: (enabled: boolean) =>
|
||||
enabled ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>,
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 160,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确定要删除这个供应商吗？关联的模型也会被删除。"
|
||||
onConfirm={() => onDelete(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="link" danger size="small">
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
|
||||
<h2 style={{ margin: 0 }}>供应商列表</h2>
|
||||
<Button type="primary" onClick={onAdd}>
|
||||
添加供应商
|
||||
</Button>
|
||||
</div>
|
||||
<Table<Provider>
|
||||
columns={columns}
|
||||
dataSource={providers}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
expandable={{
|
||||
expandedRowRender: (record) => (
|
||||
<ModelTable
|
||||
providerId={record.id}
|
||||
onAdd={() => onAddModel(record.id)}
|
||||
onEdit={onEditModel}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
pagination={false}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
101
frontend/src/pages/Providers/index.tsx
Normal file
101
frontend/src/pages/Providers/index.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { useState } from 'react';
|
||||
import type { Provider, Model, UpdateProviderInput, UpdateModelInput } from '@/types';
|
||||
import { useProviders, useCreateProvider, useUpdateProvider, useDeleteProvider } from '@/hooks/useProviders';
|
||||
import { useCreateModel, useUpdateModel } from '@/hooks/useModels';
|
||||
import { ProviderTable } from './ProviderTable';
|
||||
import { ProviderForm } from './ProviderForm';
|
||||
import { ModelForm } from './ModelForm';
|
||||
|
||||
export function ProvidersPage() {
|
||||
const { data: providers = [], isLoading } = useProviders();
|
||||
const createProvider = useCreateProvider();
|
||||
const updateProvider = useUpdateProvider();
|
||||
const deleteProvider = useDeleteProvider();
|
||||
const createModel = useCreateModel();
|
||||
const updateModel = useUpdateModel();
|
||||
|
||||
const [providerFormOpen, setProviderFormOpen] = useState(false);
|
||||
const [editingProvider, setEditingProvider] = useState<Provider | undefined>();
|
||||
const [modelFormOpen, setModelFormOpen] = useState(false);
|
||||
const [editingModel, setEditingModel] = useState<Model | undefined>();
|
||||
const [modelFormProviderId, setModelFormProviderId] = useState('');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>供应商管理</h1>
|
||||
|
||||
<ProviderTable
|
||||
providers={providers}
|
||||
loading={isLoading}
|
||||
onAdd={() => {
|
||||
setEditingProvider(undefined);
|
||||
setProviderFormOpen(true);
|
||||
}}
|
||||
onEdit={(provider) => {
|
||||
setEditingProvider(provider);
|
||||
setProviderFormOpen(true);
|
||||
}}
|
||||
onDelete={(id) => deleteProvider.mutate(id)}
|
||||
onAddModel={(providerId) => {
|
||||
setEditingModel(undefined);
|
||||
setModelFormProviderId(providerId);
|
||||
setModelFormOpen(true);
|
||||
}}
|
||||
onEditModel={(model) => {
|
||||
setEditingModel(model);
|
||||
setModelFormProviderId(model.providerId);
|
||||
setModelFormOpen(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ProviderForm
|
||||
open={providerFormOpen}
|
||||
provider={editingProvider}
|
||||
loading={createProvider.isPending || updateProvider.isPending}
|
||||
onSave={(values) => {
|
||||
if (editingProvider) {
|
||||
const input: Partial<UpdateProviderInput> = {};
|
||||
if (values.name !== editingProvider.name) input.name = values.name;
|
||||
if (values.apiKey) input.apiKey = values.apiKey;
|
||||
if (values.baseUrl !== editingProvider.baseUrl) input.baseUrl = values.baseUrl;
|
||||
if (values.enabled !== editingProvider.enabled) input.enabled = values.enabled;
|
||||
updateProvider.mutate(
|
||||
{ id: editingProvider.id, input },
|
||||
{ onSuccess: () => setProviderFormOpen(false) },
|
||||
);
|
||||
} else {
|
||||
createProvider.mutate(values, {
|
||||
onSuccess: () => setProviderFormOpen(false),
|
||||
});
|
||||
}
|
||||
}}
|
||||
onCancel={() => setProviderFormOpen(false)}
|
||||
/>
|
||||
|
||||
<ModelForm
|
||||
open={modelFormOpen}
|
||||
model={editingModel}
|
||||
providerId={modelFormProviderId}
|
||||
providers={providers}
|
||||
loading={createModel.isPending || updateModel.isPending}
|
||||
onSave={(values) => {
|
||||
if (editingModel) {
|
||||
const input: Partial<UpdateModelInput> = {};
|
||||
if (values.providerId !== editingModel.providerId) input.providerId = values.providerId;
|
||||
if (values.modelName !== editingModel.modelName) input.modelName = values.modelName;
|
||||
if (values.enabled !== editingModel.enabled) input.enabled = values.enabled;
|
||||
updateModel.mutate(
|
||||
{ id: editingModel.id, input },
|
||||
{ onSuccess: () => setModelFormOpen(false) },
|
||||
);
|
||||
} else {
|
||||
createModel.mutate(values, {
|
||||
onSuccess: () => setModelFormOpen(false),
|
||||
});
|
||||
}
|
||||
}}
|
||||
onCancel={() => setModelFormOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user