refactor(web): 前端目录重构 — consoles/pages → layouts/features + shared
- consoles/admin/ → layouts/admin-layout/ - consoles/workbench/ → layouts/workbench-layout/ + features/chat/ - pages/ → features/ (dashboard, models, projects, not-found) - components/ → shared/components/ - hooks/ → shared/hooks/ - utils/ → shared/utils/ - 更新所有 import 路径 (src/web/ + tests/web/) - 更新开发文档 (README.md, frontend.md, architecture.md)
This commit is contained in:
236
src/web/features/models/components/ModelFormModal.tsx
Normal file
236
src/web/features/models/components/ModelFormModal.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
import { App as AntApp, Button, Checkbox, Col, Form, Input, InputNumber, Modal, Row, Select, Space } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import type {
|
||||
CreateModelRequest,
|
||||
Model,
|
||||
ModelCapability,
|
||||
ModelTestResponse,
|
||||
ProviderOption,
|
||||
TestModelRequest,
|
||||
UpdateModelRequest,
|
||||
} from "../../../../shared/api";
|
||||
|
||||
interface FormValues {
|
||||
capabilities: ModelCapability[];
|
||||
contextLength: null | number;
|
||||
maxOutputTokens: null | number;
|
||||
modelId: string;
|
||||
name: string;
|
||||
providerId: string;
|
||||
}
|
||||
|
||||
interface ModelFormModalProps {
|
||||
editingModel: Model | null;
|
||||
onCancel: () => void;
|
||||
onCreate: (data: CreateModelRequest) => Promise<unknown>;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onUpdate: (args: { data: UpdateModelRequest; id: string }) => Promise<unknown>;
|
||||
open: boolean;
|
||||
providers: ProviderOption[];
|
||||
providersError: Error | null;
|
||||
providersLoading: boolean;
|
||||
submitting: boolean;
|
||||
testModelConnection?: (data: TestModelRequest) => Promise<ModelTestResponse>;
|
||||
}
|
||||
|
||||
const DEFAULT_CAPABILITIES: ModelCapability[] = ["text", "reasoning"];
|
||||
|
||||
const CAPABILITY_OPTIONS: Array<{ label: string; value: ModelCapability }> = [
|
||||
{ label: "文本", value: "text" },
|
||||
{ label: "推理", value: "reasoning" },
|
||||
{ label: "图片生成", value: "image-generation" },
|
||||
{ label: "视频生成", value: "video-generation" },
|
||||
{ label: "音频生成", value: "audio-generation" },
|
||||
{ label: "图片识别", value: "image-recognition" },
|
||||
{ label: "视频识别", value: "video-recognition" },
|
||||
{ label: "音频识别", value: "audio-recognition" },
|
||||
];
|
||||
|
||||
export function ModelFormModal({
|
||||
editingModel,
|
||||
onCancel,
|
||||
onCreate,
|
||||
onOpenChange,
|
||||
onUpdate,
|
||||
open,
|
||||
providers,
|
||||
providersError,
|
||||
providersLoading,
|
||||
submitting,
|
||||
testModelConnection,
|
||||
}: ModelFormModalProps) {
|
||||
const { message } = AntApp.useApp();
|
||||
const [form] = Form.useForm<FormValues>();
|
||||
const [testing, setTesting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
if (editingModel) {
|
||||
form.setFieldsValue({
|
||||
capabilities: editingModel.capabilities,
|
||||
contextLength: editingModel.contextLength,
|
||||
maxOutputTokens: editingModel.maxOutputTokens,
|
||||
modelId: editingModel.modelId,
|
||||
name: editingModel.name,
|
||||
providerId: editingModel.providerId,
|
||||
});
|
||||
} else {
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ capabilities: DEFAULT_CAPABILITIES });
|
||||
}
|
||||
}, [editingModel, form, open]);
|
||||
|
||||
const handleFinish = async (values: FormValues) => {
|
||||
try {
|
||||
if (editingModel) {
|
||||
const reqData: UpdateModelRequest = {};
|
||||
if (values.name !== editingModel.name) reqData.name = values.name;
|
||||
if (values.modelId !== editingModel.modelId) reqData.modelId = values.modelId;
|
||||
if (values.providerId !== editingModel.providerId) reqData.providerId = values.providerId;
|
||||
const capsChanged =
|
||||
values.capabilities.length !== editingModel.capabilities.length ||
|
||||
values.capabilities.some((c, i) => c !== editingModel.capabilities[i]);
|
||||
if (capsChanged) reqData.capabilities = values.capabilities;
|
||||
if (values.contextLength !== editingModel.contextLength) reqData.contextLength = values.contextLength;
|
||||
if (values.maxOutputTokens !== editingModel.maxOutputTokens) reqData.maxOutputTokens = values.maxOutputTokens;
|
||||
await onUpdate({ data: reqData, id: editingModel.id });
|
||||
message.success("模型已更新");
|
||||
} else {
|
||||
const reqData: CreateModelRequest = {
|
||||
capabilities: values.capabilities,
|
||||
contextLength: values.contextLength ?? undefined,
|
||||
maxOutputTokens: values.maxOutputTokens ?? undefined,
|
||||
modelId: values.modelId,
|
||||
name: values.name,
|
||||
providerId: values.providerId,
|
||||
};
|
||||
await onCreate(reqData);
|
||||
message.success("模型已创建");
|
||||
}
|
||||
onOpenChange(false);
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
message.error(err.message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTest = async () => {
|
||||
if (!testModelConnection) return;
|
||||
const providerId: unknown = form.getFieldValue("providerId");
|
||||
const modelId: unknown = form.getFieldValue("modelId");
|
||||
if (typeof providerId !== "string" || !providerId) {
|
||||
message.warning("请先选择供应商");
|
||||
return;
|
||||
}
|
||||
if (typeof modelId !== "string" || !modelId) {
|
||||
message.warning("请先输入模型 ID");
|
||||
return;
|
||||
}
|
||||
setTesting(true);
|
||||
try {
|
||||
const result = await testModelConnection({ modelId, providerId });
|
||||
if (result.ok) {
|
||||
message.success(result.message);
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
message.error((err as Error).message);
|
||||
} finally {
|
||||
setTesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const providerOptions = providers.map((p) => ({ label: p.name, value: p.id }));
|
||||
|
||||
return (
|
||||
<Modal
|
||||
confirmLoading={submitting}
|
||||
destroyOnHidden
|
||||
okText="确定"
|
||||
onCancel={onCancel}
|
||||
onOk={() => void form.submit()}
|
||||
open={open}
|
||||
title={editingModel ? "编辑模型" : "新建模型"}
|
||||
width={600}
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={(values) => void handleFinish(values)}>
|
||||
<Form.Item
|
||||
label="模型名称"
|
||||
name="name"
|
||||
rules={[{ message: "请输入模型名称", required: true, whitespace: true }]}
|
||||
>
|
||||
<Input placeholder="请输入模型名称" />
|
||||
</Form.Item>
|
||||
<Form.Item label="所属供应商" name="providerId" rules={[{ message: "请选择供应商", required: true }]}>
|
||||
<Select
|
||||
loading={providersLoading}
|
||||
notFoundContent={getProviderNotFoundContent(providersLoading, providersError)}
|
||||
optionFilterProp="label"
|
||||
options={providerOptions}
|
||||
placeholder="请选择供应商"
|
||||
showSearch
|
||||
status={providersError ? "error" : undefined}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="模型 ID"
|
||||
name="modelId"
|
||||
rules={[{ message: "请输入模型 ID", required: true, whitespace: true }]}
|
||||
>
|
||||
<Input placeholder="gpt-4o, claude-3-opus-20240229, deepseek-chat 等" />
|
||||
</Form.Item>
|
||||
<Form.Item label="能力标签" name="capabilities" rules={[{ message: "请至少选择一个能力标签", required: true }]}>
|
||||
<Checkbox.Group>
|
||||
<Row gutter={[8, 8]}>
|
||||
{CAPABILITY_OPTIONS.map((opt) => (
|
||||
<Col key={opt.value} md={8} sm={12} xs={24}>
|
||||
<Checkbox value={opt.value}>{opt.label}</Checkbox>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
<Row gutter={16}>
|
||||
<Col sm={12} xs={24}>
|
||||
<Form.Item label="上下文长度" name="contextLength" rules={[positiveIntegerRule("上下文长度")]}>
|
||||
<InputNumber min={1} placeholder="可选" precision={0} styles={{ root: { width: "100%" } }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col sm={12} xs={24}>
|
||||
<Form.Item label="最大输出 Token" name="maxOutputTokens" rules={[positiveIntegerRule("最大输出 Token")]}>
|
||||
<InputNumber min={1} placeholder="可选" precision={0} styles={{ root: { width: "100%" } }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
{testModelConnection && (
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button loading={testing} onClick={() => void handleTest()}>
|
||||
测试连接
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function getProviderNotFoundContent(loading: boolean, error: Error | null): string {
|
||||
if (loading) return "正在加载供应商";
|
||||
if (error) return `供应商加载失败：${error.message}`;
|
||||
return "暂无供应商，请先新建供应商";
|
||||
}
|
||||
|
||||
function positiveIntegerRule(label: string) {
|
||||
return {
|
||||
validator(_: unknown, value: null | number | undefined) {
|
||||
if (value === undefined || value === null) return Promise.resolve();
|
||||
if (Number.isInteger(value) && value > 0) return Promise.resolve();
|
||||
return Promise.reject(new Error(`${label}必须为正整数`));
|
||||
},
|
||||
};
|
||||
}
|
||||
124
src/web/features/models/components/ModelTable.tsx
Normal file
124
src/web/features/models/components/ModelTable.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
|
||||
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
|
||||
import { App as AntApp, Button, Popconfirm, Space, Table, Tag } from "antd";
|
||||
|
||||
import type { Model, ModelListResponse, ProviderOption } from "../../../../shared/api";
|
||||
|
||||
interface ModelTableProps {
|
||||
data: ModelListResponse | undefined;
|
||||
loading: boolean;
|
||||
onDelete: (id: string) => Promise<unknown>;
|
||||
onEdit: (model: Model) => void;
|
||||
onPageChange: (page: number, pageSize: number) => void;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
providers: ProviderOption[];
|
||||
}
|
||||
|
||||
const CAPABILITY_LABELS: Record<string, string> = {
|
||||
"audio-generation": "音频生成",
|
||||
"audio-recognition": "音频识别",
|
||||
"image-generation": "图片生成",
|
||||
"image-recognition": "图片识别",
|
||||
reasoning: "推理",
|
||||
text: "文本",
|
||||
"video-generation": "视频生成",
|
||||
"video-recognition": "视频识别",
|
||||
};
|
||||
|
||||
function getProviderName(providerId: string, providers: ProviderOption[]): string {
|
||||
return providers.find((p) => p.id === providerId)?.name ?? providerId;
|
||||
}
|
||||
|
||||
const COLUMNS: ColumnsType<Model> = [
|
||||
{ dataIndex: "name", ellipsis: true, title: "名称", width: 180 },
|
||||
{
|
||||
dataIndex: "providerId",
|
||||
ellipsis: true,
|
||||
title: "供应商",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
dataIndex: "capabilities",
|
||||
render: (value: string[]) =>
|
||||
value.length > 0 ? (
|
||||
<Space size={[4, 4]} wrap>
|
||||
{value.map((c) => (
|
||||
<Tag key={c}>{CAPABILITY_LABELS[c] ?? c}</Tag>
|
||||
))}
|
||||
</Space>
|
||||
) : null,
|
||||
title: "能力",
|
||||
},
|
||||
];
|
||||
|
||||
export function ModelTable({
|
||||
data,
|
||||
loading,
|
||||
onDelete,
|
||||
onEdit,
|
||||
onPageChange,
|
||||
page,
|
||||
pageSize,
|
||||
providers,
|
||||
}: ModelTableProps) {
|
||||
const { message } = AntApp.useApp();
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
try {
|
||||
await onDelete(id);
|
||||
message.success("模型已删除");
|
||||
} catch (err: unknown) {
|
||||
message.error((err as Error).message);
|
||||
}
|
||||
};
|
||||
|
||||
const columnsWithProvider: ColumnsType<Model> = COLUMNS.map((col) =>
|
||||
"dataIndex" in col && col.dataIndex === "providerId"
|
||||
? {
|
||||
...col,
|
||||
render: (_value: unknown, record: Model) => getProviderName(record.providerId, providers),
|
||||
}
|
||||
: col,
|
||||
);
|
||||
|
||||
const operationColumn: ColumnsType<Model>[number] = {
|
||||
dataIndex: "op",
|
||||
render: (_value: unknown, record: Model) => (
|
||||
<Space size="small">
|
||||
<Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
description="此操作不可恢复。"
|
||||
onConfirm={() => void handleDelete(record.id)}
|
||||
title="确认删除此模型？"
|
||||
>
|
||||
<Button danger icon={<DeleteOutlined />} size="small" type="link">
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
title: "操作",
|
||||
width: 180,
|
||||
};
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={[...columnsWithProvider, operationColumn]}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
current: page,
|
||||
hideOnSinglePage: false,
|
||||
onChange: onPageChange,
|
||||
pageSize,
|
||||
showSizeChanger: true,
|
||||
total: data?.total ?? 0,
|
||||
}}
|
||||
rowKey="id"
|
||||
/>
|
||||
);
|
||||
}
|
||||
53
src/web/features/models/components/ModelsToolbar.tsx
Normal file
53
src/web/features/models/components/ModelsToolbar.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
import { Button, Flex, Input, Space, Tabs } from "antd";
|
||||
import { useState } from "react";
|
||||
|
||||
interface ModelsToolbarProps {
|
||||
activeTab: string;
|
||||
keyword: string;
|
||||
onSearch: (value: string) => void;
|
||||
onSearchClear: () => void;
|
||||
onTabChange: (key: string) => void;
|
||||
openCreateDialog: () => void;
|
||||
}
|
||||
|
||||
const TAB_ITEMS = [
|
||||
{ key: "models", label: "模型" },
|
||||
{ key: "providers", label: "供应商" },
|
||||
];
|
||||
|
||||
export function ModelsToolbar({
|
||||
activeTab,
|
||||
keyword,
|
||||
onSearch,
|
||||
onSearchClear,
|
||||
onTabChange,
|
||||
openCreateDialog,
|
||||
}: ModelsToolbarProps) {
|
||||
const [draftKeyword, setDraftKeyword] = useState(keyword);
|
||||
const placeholder = activeTab === "providers" ? "搜索供应商名称" : "搜索模型名称或 ID";
|
||||
const createLabel = activeTab === "providers" ? "新建供应商" : "新建模型";
|
||||
|
||||
return (
|
||||
<Flex align="center" gap="large" justify="space-between" wrap="wrap">
|
||||
<Tabs activeKey={activeTab} items={TAB_ITEMS} onChange={onTabChange} />
|
||||
<Space size="small">
|
||||
<Input.Search
|
||||
allowClear
|
||||
enterButton="搜索"
|
||||
onChange={(event) => setDraftKeyword(event.target.value)}
|
||||
onClear={() => {
|
||||
setDraftKeyword("");
|
||||
onSearchClear();
|
||||
}}
|
||||
onSearch={(value) => onSearch(value)}
|
||||
placeholder={placeholder}
|
||||
value={draftKeyword}
|
||||
/>
|
||||
<Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
|
||||
{createLabel}
|
||||
</Button>
|
||||
</Space>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
162
src/web/features/models/components/ProviderFormModal.tsx
Normal file
162
src/web/features/models/components/ProviderFormModal.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import { App as AntApp, Button, Form, Input, Modal, Select, Space } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import type {
|
||||
CreateProviderRequest,
|
||||
Provider,
|
||||
ProviderTestResponse,
|
||||
ProviderType,
|
||||
UpdateProviderRequest,
|
||||
} from "../../../../shared/api";
|
||||
|
||||
interface FormValues {
|
||||
apiKey: string;
|
||||
baseUrl: string;
|
||||
name: string;
|
||||
type: ProviderType;
|
||||
}
|
||||
|
||||
interface ProviderFormModalProps {
|
||||
editingProvider: null | Provider;
|
||||
onCancel: () => void;
|
||||
onCreate: (data: CreateProviderRequest) => Promise<unknown>;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onTest: (data: CreateProviderRequest) => Promise<ProviderTestResponse>;
|
||||
onUpdate: (args: { data: UpdateProviderRequest; id: string }) => Promise<unknown>;
|
||||
open: boolean;
|
||||
submitting: boolean;
|
||||
}
|
||||
|
||||
const TYPE_OPTIONS = [
|
||||
{ label: "OpenAI 兼容", value: "openai-compatible" },
|
||||
{ label: "OpenAI", value: "openai" },
|
||||
{ label: "Anthropic", value: "anthropic" },
|
||||
];
|
||||
|
||||
export function ProviderFormModal({
|
||||
editingProvider,
|
||||
onCancel,
|
||||
onCreate,
|
||||
onOpenChange,
|
||||
onTest,
|
||||
onUpdate,
|
||||
open,
|
||||
submitting,
|
||||
}: ProviderFormModalProps) {
|
||||
const { message } = AntApp.useApp();
|
||||
const [form] = Form.useForm<FormValues>();
|
||||
const [testing, setTesting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
if (editingProvider) {
|
||||
form.setFieldsValue({
|
||||
apiKey: editingProvider.apiKey,
|
||||
baseUrl: editingProvider.baseUrl,
|
||||
name: editingProvider.name,
|
||||
type: editingProvider.type,
|
||||
});
|
||||
} else {
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ type: "openai-compatible" });
|
||||
}
|
||||
}, [editingProvider, form, open]);
|
||||
|
||||
const handleFinish = async (values: FormValues) => {
|
||||
try {
|
||||
if (editingProvider) {
|
||||
const reqData: UpdateProviderRequest = {};
|
||||
if (values.name !== editingProvider.name) reqData.name = values.name;
|
||||
if (values.baseUrl !== editingProvider.baseUrl) reqData.baseUrl = values.baseUrl;
|
||||
if (values.apiKey !== editingProvider.apiKey) reqData.apiKey = values.apiKey;
|
||||
if (values.type !== editingProvider.type) reqData.type = values.type;
|
||||
await onUpdate({ data: reqData, id: editingProvider.id });
|
||||
message.success("供应商已更新");
|
||||
} else {
|
||||
const reqData: CreateProviderRequest = {
|
||||
apiKey: values.apiKey,
|
||||
baseUrl: values.baseUrl,
|
||||
name: values.name,
|
||||
type: values.type,
|
||||
};
|
||||
await onCreate(reqData);
|
||||
message.success("供应商已创建");
|
||||
}
|
||||
onOpenChange(false);
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
message.error(err.message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTest = async () => {
|
||||
try {
|
||||
const values = await form.validateFields(["name", "type", "baseUrl", "apiKey"]);
|
||||
setTesting(true);
|
||||
const result = await onTest({
|
||||
apiKey: values.apiKey,
|
||||
baseUrl: values.baseUrl,
|
||||
name: values.name,
|
||||
type: values.type,
|
||||
});
|
||||
if (result.ok) {
|
||||
message.success(result.message);
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
message.error(err.message);
|
||||
}
|
||||
} finally {
|
||||
setTesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
confirmLoading={submitting}
|
||||
destroyOnHidden
|
||||
okText="确定"
|
||||
onCancel={onCancel}
|
||||
onOk={() => void form.submit()}
|
||||
open={open}
|
||||
title={editingProvider ? "编辑供应商" : "新建供应商"}
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={(values) => void handleFinish(values)}>
|
||||
<Form.Item
|
||||
label="供应商名称"
|
||||
name="name"
|
||||
rules={[{ message: "请输入供应商名称", required: true, whitespace: true }]}
|
||||
>
|
||||
<Input placeholder="请输入供应商名称" />
|
||||
</Form.Item>
|
||||
<Form.Item label="供应商类型" name="type" rules={[{ message: "请选择供应商类型", required: true }]}>
|
||||
<Select options={TYPE_OPTIONS} placeholder="请选择供应商类型" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Base URL"
|
||||
name="baseUrl"
|
||||
rules={[{ message: "请输入 Base URL", required: true, whitespace: true }]}
|
||||
>
|
||||
<Input placeholder="https://api.openai.com/v1" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="API Key"
|
||||
name="apiKey"
|
||||
rules={[{ message: "请输入 API Key", required: true, whitespace: true }]}
|
||||
>
|
||||
<Input.Password placeholder="请输入 API Key" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button loading={testing} onClick={() => void handleTest()}>
|
||||
测试连接
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
85
src/web/features/models/components/ProviderTable.tsx
Normal file
85
src/web/features/models/components/ProviderTable.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
|
||||
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
|
||||
import { App as AntApp, Button, Popconfirm, Space, Table } from "antd";
|
||||
|
||||
import type { Provider, ProviderListResponse } from "../../../../shared/api";
|
||||
|
||||
interface ProviderTableProps {
|
||||
data: ProviderListResponse | undefined;
|
||||
loading: boolean;
|
||||
onDelete: (id: string) => Promise<unknown>;
|
||||
onEdit: (provider: Provider) => void;
|
||||
onPageChange: (page: number, pageSize: number) => void;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
const TYPE_LABELS: Record<Provider["type"], string> = {
|
||||
anthropic: "Anthropic",
|
||||
openai: "OpenAI",
|
||||
"openai-compatible": "OpenAI 兼容",
|
||||
};
|
||||
|
||||
const COLUMNS: ColumnsType<Provider> = [
|
||||
{ dataIndex: "name", ellipsis: true, title: "名称", width: 180 },
|
||||
{
|
||||
dataIndex: "type",
|
||||
render: (value: Provider["type"]) => TYPE_LABELS[value] ?? value,
|
||||
title: "类型",
|
||||
width: 140,
|
||||
},
|
||||
{ dataIndex: "baseUrl", ellipsis: true, title: "Base URL" },
|
||||
];
|
||||
|
||||
export function ProviderTable({ data, loading, onDelete, onEdit, onPageChange, page, pageSize }: ProviderTableProps) {
|
||||
const { message } = AntApp.useApp();
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
try {
|
||||
await onDelete(id);
|
||||
message.success("供应商已删除");
|
||||
} catch (err: unknown) {
|
||||
message.error((err as Error).message);
|
||||
}
|
||||
};
|
||||
|
||||
const operationColumn: ColumnsType<Provider>[number] = {
|
||||
dataIndex: "op",
|
||||
render: (_value: unknown, record: Provider) => (
|
||||
<Space size="small">
|
||||
<Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
description="该供应商下存在模型时无法删除，请先删除或迁移相关模型。"
|
||||
onConfirm={() => void handleDelete(record.id)}
|
||||
title="确认删除此供应商？"
|
||||
>
|
||||
<Button danger icon={<DeleteOutlined />} size="small" type="link">
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
title: "操作",
|
||||
width: 180,
|
||||
};
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={[...COLUMNS, operationColumn]}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
current: page,
|
||||
hideOnSinglePage: false,
|
||||
onChange: onPageChange,
|
||||
pageSize,
|
||||
showSizeChanger: true,
|
||||
total: data?.total ?? 0,
|
||||
}}
|
||||
rowKey="id"
|
||||
/>
|
||||
);
|
||||
}
|
||||
190
src/web/features/models/index.tsx
Normal file
190
src/web/features/models/index.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import { Space } from "antd";
|
||||
import { useState } from "react";
|
||||
|
||||
import type { Model, Provider, TestModelRequest } from "../../../shared/api";
|
||||
|
||||
import {
|
||||
useCreateModel,
|
||||
useDeleteModel,
|
||||
useModelList,
|
||||
useTestModelConnection,
|
||||
useUpdateModel,
|
||||
} from "../../shared/hooks/use-models";
|
||||
import {
|
||||
useCreateProvider,
|
||||
useDeleteProvider,
|
||||
useProviderList,
|
||||
useProviderOptions,
|
||||
useTestProviderConfig,
|
||||
useUpdateProvider,
|
||||
} from "../../shared/hooks/use-providers";
|
||||
import { ModelFormModal } from "./components/ModelFormModal";
|
||||
import { ModelsToolbar } from "./components/ModelsToolbar";
|
||||
import { ModelTable } from "./components/ModelTable";
|
||||
import { ProviderFormModal } from "./components/ProviderFormModal";
|
||||
import { ProviderTable } from "./components/ProviderTable";
|
||||
|
||||
export function ModelsPage() {
|
||||
const [activeTab, setActiveTab] = useState<string>("models");
|
||||
|
||||
const [providerPage, setProviderPage] = useState(1);
|
||||
const [providerPageSize, setProviderPageSize] = useState(20);
|
||||
const [providerKeyword, setProviderKeyword] = useState("");
|
||||
const [providerDialogOpen, setProviderDialogOpen] = useState(false);
|
||||
const [editingProvider, setEditingProvider] = useState<null | Provider>(null);
|
||||
|
||||
const [modelPage, setModelPage] = useState(1);
|
||||
const [modelPageSize, setModelPageSize] = useState(20);
|
||||
const [modelKeyword, setModelKeyword] = useState("");
|
||||
const [modelDialogOpen, setModelDialogOpen] = useState(false);
|
||||
const [editingModel, setEditingModel] = useState<Model | null>(null);
|
||||
|
||||
const { data: providerData, isLoading: providerLoading } = useProviderList({
|
||||
keyword: providerKeyword || undefined,
|
||||
page: providerPage,
|
||||
pageSize: providerPageSize,
|
||||
});
|
||||
|
||||
const {
|
||||
data: providerOptionsData,
|
||||
error: providerOptionsError,
|
||||
isError: providerOptionsIsError,
|
||||
isLoading: providerOptionsLoading,
|
||||
} = useProviderOptions();
|
||||
|
||||
const { data: modelData, isLoading: modelLoading } = useModelList({
|
||||
keyword: modelKeyword || undefined,
|
||||
page: modelPage,
|
||||
pageSize: modelPageSize,
|
||||
});
|
||||
|
||||
const createProviderMutation = useCreateProvider();
|
||||
const updateProviderMutation = useUpdateProvider();
|
||||
const deleteProviderMutation = useDeleteProvider();
|
||||
const testProviderConfigMutation = useTestProviderConfig();
|
||||
|
||||
const createModelMutation = useCreateModel();
|
||||
const updateModelMutation = useUpdateModel();
|
||||
const deleteModelMutation = useDeleteModel();
|
||||
const testModelMutation = useTestModelConnection();
|
||||
|
||||
const isProviderSubmitting = createProviderMutation.isPending || updateProviderMutation.isPending;
|
||||
const isProviderActionPending = deleteProviderMutation.isPending;
|
||||
|
||||
const isModelSubmitting = createModelMutation.isPending || updateModelMutation.isPending;
|
||||
const isModelActionPending = deleteModelMutation.isPending;
|
||||
const modelProviders = providerOptionsData?.items ?? [];
|
||||
|
||||
const currentKeyword = activeTab === "providers" ? providerKeyword : modelKeyword;
|
||||
|
||||
const handleSearch =
|
||||
activeTab === "providers"
|
||||
? (value: string) => {
|
||||
setProviderKeyword(value);
|
||||
setProviderPage(1);
|
||||
}
|
||||
: (value: string) => {
|
||||
setModelKeyword(value);
|
||||
setModelPage(1);
|
||||
};
|
||||
|
||||
const handleSearchClear =
|
||||
activeTab === "providers"
|
||||
? () => {
|
||||
setProviderKeyword("");
|
||||
setProviderPage(1);
|
||||
}
|
||||
: () => {
|
||||
setModelKeyword("");
|
||||
setModelPage(1);
|
||||
};
|
||||
|
||||
const handleOpenCreate =
|
||||
activeTab === "providers"
|
||||
? () => {
|
||||
setEditingProvider(null);
|
||||
setProviderDialogOpen(true);
|
||||
}
|
||||
: () => {
|
||||
setEditingModel(null);
|
||||
setModelDialogOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Space className="app-page-flex" orientation="vertical" size="large">
|
||||
<ModelsToolbar
|
||||
activeTab={activeTab}
|
||||
key={activeTab}
|
||||
keyword={currentKeyword}
|
||||
onSearch={handleSearch}
|
||||
onSearchClear={handleSearchClear}
|
||||
onTabChange={(key) => setActiveTab(key)}
|
||||
openCreateDialog={handleOpenCreate}
|
||||
/>
|
||||
|
||||
{activeTab === "providers" && (
|
||||
<>
|
||||
<ProviderTable
|
||||
data={providerData}
|
||||
loading={providerLoading || isProviderActionPending}
|
||||
onDelete={(id) => deleteProviderMutation.mutateAsync(id)}
|
||||
onEdit={(provider) => {
|
||||
setEditingProvider(provider);
|
||||
setProviderDialogOpen(true);
|
||||
}}
|
||||
onPageChange={(p, ps) => {
|
||||
setProviderPage(p);
|
||||
setProviderPageSize(ps);
|
||||
}}
|
||||
page={providerPage}
|
||||
pageSize={providerPageSize}
|
||||
/>
|
||||
<ProviderFormModal
|
||||
editingProvider={editingProvider}
|
||||
onCancel={() => setProviderDialogOpen(false)}
|
||||
onCreate={(data) => createProviderMutation.mutateAsync(data)}
|
||||
onOpenChange={setProviderDialogOpen}
|
||||
onTest={(data) => testProviderConfigMutation.mutateAsync(data)}
|
||||
onUpdate={(args) => updateProviderMutation.mutateAsync(args)}
|
||||
open={providerDialogOpen}
|
||||
submitting={isProviderSubmitting}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === "models" && (
|
||||
<>
|
||||
<ModelTable
|
||||
data={modelData}
|
||||
loading={modelLoading || providerOptionsLoading || isModelActionPending}
|
||||
onDelete={(id) => deleteModelMutation.mutateAsync(id)}
|
||||
onEdit={(model) => {
|
||||
setEditingModel(model);
|
||||
setModelDialogOpen(true);
|
||||
}}
|
||||
onPageChange={(p, ps) => {
|
||||
setModelPage(p);
|
||||
setModelPageSize(ps);
|
||||
}}
|
||||
page={modelPage}
|
||||
pageSize={modelPageSize}
|
||||
providers={modelProviders}
|
||||
/>
|
||||
<ModelFormModal
|
||||
editingModel={editingModel}
|
||||
onCancel={() => setModelDialogOpen(false)}
|
||||
onCreate={(data) => createModelMutation.mutateAsync(data)}
|
||||
onOpenChange={setModelDialogOpen}
|
||||
onUpdate={(args) => updateModelMutation.mutateAsync(args)}
|
||||
open={modelDialogOpen}
|
||||
providers={modelProviders}
|
||||
providersError={providerOptionsIsError ? providerOptionsError : null}
|
||||
providersLoading={providerOptionsLoading}
|
||||
submitting={isModelSubmitting}
|
||||
testModelConnection={(data: TestModelRequest) => testModelMutation.mutateAsync(data)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user