refactor(web): React 最佳实践优化 — memo/callback + 目录边界 + 路由增强
- useLogger: useMemo + JSON.stringify 替代 useState 派生 - useIsDark: effectiveTheme 替代 token 色值比较 - useCurrentProject: layouts/ 提升到 shared/hooks/ - ConsoleShell: locale useMemo 缓存 - ConsoleOutlet: 添加 Suspense 边界 - routes: 添加 layout 级 errorElement - Table 组件: operationColumn useMemo + useCallback - ChatPanel: footer 合并为 useCallback, props 传入模型数据 - ChatPage: textModels/conversations useMemo 缓存
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import type { TableColumnsType } from "antd";
|
||||
|
||||
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
|
||||
import { App as AntApp, Button, Popconfirm, Space, Table, Tag } from "antd";
|
||||
import { useCallback, useMemo } from "react";
|
||||
|
||||
import type { Model, ModelListResponse, ProviderOption } from "../../../../shared/api";
|
||||
|
||||
@@ -31,7 +32,7 @@ function getProviderName(providerId: string, providers: ProviderOption[]): strin
|
||||
return providers.find((p) => p.id === providerId)?.name ?? providerId;
|
||||
}
|
||||
|
||||
const COLUMNS: ColumnsType<Model> = [
|
||||
const COLUMNS: TableColumnsType<Model> = [
|
||||
{ dataIndex: "name", ellipsis: true, title: "名称", width: 180 },
|
||||
{
|
||||
dataIndex: "providerId",
|
||||
@@ -65,49 +66,61 @@ export function ModelTable({
|
||||
}: 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 handleDelete = useCallback(
|
||||
async (id: string) => {
|
||||
try {
|
||||
await onDelete(id);
|
||||
message.success("模型已删除");
|
||||
} catch (err: unknown) {
|
||||
message.error((err as Error).message);
|
||||
}
|
||||
},
|
||||
[onDelete, message],
|
||||
);
|
||||
|
||||
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">
|
||||
删除
|
||||
const columnsWithProvider = useMemo<TableColumnsType<Model>>(
|
||||
() =>
|
||||
COLUMNS.map((col) =>
|
||||
"dataIndex" in col && col.dataIndex === "providerId"
|
||||
? {
|
||||
...col,
|
||||
render: (_value: unknown, record: Model) => getProviderName(record.providerId, providers),
|
||||
}
|
||||
: col,
|
||||
),
|
||||
[providers],
|
||||
);
|
||||
|
||||
const operationColumn = useMemo<TableColumnsType<Model>[number]>(
|
||||
() => ({
|
||||
dataIndex: "op",
|
||||
render: (_value: unknown, record: Model) => (
|
||||
<Space size="small">
|
||||
<Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
|
||||
编辑
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
title: "操作",
|
||||
width: 180,
|
||||
};
|
||||
<Popconfirm
|
||||
description="此操作不可恢复。"
|
||||
onConfirm={() => void handleDelete(record.id)}
|
||||
title="确认删除此模型？"
|
||||
>
|
||||
<Button danger icon={<DeleteOutlined />} size="small" type="link">
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
title: "操作",
|
||||
width: 180,
|
||||
}),
|
||||
[onEdit, handleDelete],
|
||||
);
|
||||
|
||||
const columns = useMemo(() => [...columnsWithProvider, operationColumn], [columnsWithProvider, operationColumn]);
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={[...columnsWithProvider, operationColumn]}
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import type { TableColumnsType } from "antd";
|
||||
|
||||
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
|
||||
import { App as AntApp, Button, Popconfirm, Space, Table } from "antd";
|
||||
import { useCallback, useMemo } from "react";
|
||||
|
||||
import type { Provider, ProviderListResponse } from "../../../../shared/api";
|
||||
|
||||
@@ -21,7 +22,7 @@ const TYPE_LABELS: Record<Provider["type"], string> = {
|
||||
"openai-compatible": "OpenAI 兼容",
|
||||
};
|
||||
|
||||
const COLUMNS: ColumnsType<Provider> = [
|
||||
const COLUMNS: TableColumnsType<Provider> = [
|
||||
{ dataIndex: "name", ellipsis: true, title: "名称", width: 180 },
|
||||
{
|
||||
dataIndex: "type",
|
||||
@@ -35,40 +36,48 @@ const COLUMNS: ColumnsType<Provider> = [
|
||||
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 handleDelete = useCallback(
|
||||
async (id: string) => {
|
||||
try {
|
||||
await onDelete(id);
|
||||
message.success("供应商已删除");
|
||||
} catch (err: unknown) {
|
||||
message.error((err as Error).message);
|
||||
}
|
||||
},
|
||||
[onDelete, 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">
|
||||
删除
|
||||
const operationColumn = useMemo<TableColumnsType<Provider>[number]>(
|
||||
() => ({
|
||||
dataIndex: "op",
|
||||
render: (_value: unknown, record: Provider) => (
|
||||
<Space size="small">
|
||||
<Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
|
||||
编辑
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
title: "操作",
|
||||
width: 180,
|
||||
};
|
||||
<Popconfirm
|
||||
description="该供应商下存在模型时无法删除，请先删除或迁移相关模型。"
|
||||
onConfirm={() => void handleDelete(record.id)}
|
||||
title="确认删除此供应商？"
|
||||
>
|
||||
<Button danger icon={<DeleteOutlined />} size="small" type="link">
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
title: "操作",
|
||||
width: 180,
|
||||
}),
|
||||
[onEdit, handleDelete],
|
||||
);
|
||||
|
||||
const columns = useMemo(() => [...COLUMNS, operationColumn], [operationColumn]);
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={[...COLUMNS, operationColumn]}
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
|
||||
Reference in New Issue
Block a user