refactor(DataManagement): 重构数据管理详情页面组件

- 移除 Overview 组件中的文件列表多选配置功能
- 添加 DatasetFileRow 类型定义并更新相关类型注解
- 修改 Overview 组件属性接口,增加 onUpload 回调函数
- 更新表格渲染函数中的类型注解,统一使用 DatasetFileRow 类型
- 简化按钮点击事件处理函数的参数传递
- 在 DatasetDetail 页面中移除顶部工具栏的上传按钮
- 将上传功能集成到 Overview 组件的文件操作区域
- 通过回调函数实现
This commit is contained in:
2026-01-26 10:31:09 +08:00
parent a8c5de0aa6
commit d26040a6e0
2 changed files with 80 additions and 77 deletions

View File

@@ -3,7 +3,6 @@ import { Breadcrumb, App, Tabs, Table, Tag } from "antd";
import {
ReloadOutlined,
DownloadOutlined,
UploadOutlined,
EditOutlined,
DeleteOutlined,
PlusOutlined,
@@ -226,12 +225,6 @@ export default function DatasetDetail() {
},
},
{
key: "upload",
label: "导入数据",
icon: <UploadOutlined />,
onClick: () => setShowUploadDialog(true),
},
{
key: "export",
label: "导出",
@@ -353,7 +346,12 @@ export default function DatasetDetail() {
<Tabs activeKey={activeTab} items={tabList} onChange={setActiveTab} />
<div className="h-full overflow-auto">
{activeTab === "overview" && (
<Overview dataset={dataset} filesOperation={filesOperation} fetchDataset={fetchDataset}/>
<Overview
dataset={dataset}
filesOperation={filesOperation}
fetchDataset={fetchDataset}
onUpload={() => setShowUploadDialog(true)}
/>
)}
{activeTab === "children" && (
<div className="pt-4">

View File

@@ -1,16 +1,27 @@
import { App, Button, Descriptions, DescriptionsProps, Modal, Table, Input } from "antd";
import { formatBytes, formatDateTime } from "@/utils/unit";
import { Download, Trash2, Folder, File } from "lucide-react";
import { datasetTypeMap } from "../../dataset.const";
import { datasetTypeMap } from "../../dataset.const";
import type { DatasetFile } from "@/pages/DataManagement/dataset.model";
type DatasetFileRow = DatasetFile & {
fileSize?: number;
fileCount?: number;
uploadTime?: string;
};
export default function Overview({ dataset, filesOperation, fetchDataset }) {
export default function Overview({
dataset,
filesOperation,
fetchDataset,
onUpload,
}) {
const { modal, message } = App.useApp();
const {
fileList,
pagination,
selectedFiles,
setSelectedFiles,
previewVisible,
fileList,
pagination,
selectedFiles,
previewVisible,
previewFileName,
previewContent,
setPreviewVisible,
@@ -23,18 +34,7 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
handleDeleteDirectory,
} = filesOperation;
// 文件列表多选配置
const rowSelection = {
onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
setSelectedFiles(selectedRowKeys as number[]);
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
"selectedRows: ",
selectedRows
);
},
};
// 基本信息
// 基本信息
const items: DescriptionsProps["items"] = [
{
key: "id",
@@ -96,7 +96,7 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
dataIndex: "fileName",
key: "fileName",
fixed: "left",
render: (text: string, record: any) => {
render: (text: string, record: DatasetFileRow) => {
const isDirectory = record.id.startsWith('directory-');
const iconSize = 16;
@@ -115,25 +115,25 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
return (
<Button
type="link"
onClick={(e) => {
const currentPath = filesOperation.pagination.prefix || '';
// 文件夹路径必须以斜杠结尾
const newPath = `${currentPath}${record.fileName}/`;
filesOperation.fetchFiles(newPath, 1, filesOperation.pagination.pageSize);
}}
>
onClick={() => {
const currentPath = filesOperation.pagination.prefix || '';
// 文件夹路径必须以斜杠结尾
const newPath = `${currentPath}${record.fileName}/`;
filesOperation.fetchFiles(newPath, 1, filesOperation.pagination.pageSize);
}}
>
{content}
</Button>
);
}
return (
<Button
type="link"
onClick={(e) => {}}
>
{content}
</Button>
<Button
type="link"
onClick={() => {}}
>
{content}
</Button>
);
},
},
@@ -142,7 +142,7 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
dataIndex: "fileSize",
key: "fileSize",
width: 150,
render: (text: number, record: any) => {
render: (text: number, record: DatasetFileRow) => {
const isDirectory = record.id.startsWith('directory-');
if (isDirectory) {
return formatBytes(record.fileSize || 0);
@@ -155,7 +155,7 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
dataIndex: "fileCount",
key: "fileCount",
width: 120,
render: (text: number, record: any) => {
render: (text: number, record: DatasetFileRow) => {
const isDirectory = record.id.startsWith('directory-');
if (!isDirectory) {
return "-";
@@ -175,7 +175,7 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
key: "action",
width: 180,
fixed: "right",
render: (_, record) => {
render: (_, record: DatasetFileRow) => {
const isDirectory = record.id.startsWith('directory-');
if (isDirectory) {
@@ -252,39 +252,44 @@ export default function Overview({ dataset, filesOperation, fetchDataset }) {
/>
{/* 文件列表 */}
<div className="flex items-center justify-between mt-8 mb-2">
<h2 className="text-base font-semibold"></h2>
<Button
type="primary"
size="small"
onClick={() => {
let dirName = "";
modal.confirm({
title: "新建文件夹",
content: (
<Input
autoFocus
placeholder="请输入文件夹名称"
onChange={(e) => {
dirName = e.target.value?.trim();
}}
/>
),
okText: "确定",
cancelText: "取消",
onOk: async () => {
if (!dirName) {
message.warning("请输入文件夹名称");
return Promise.reject();
}
await handleCreateDirectory(dirName);
},
});
}}
>
</Button>
</div>
<div className="flex items-center justify-between mt-8 mb-2">
<h2 className="text-base font-semibold"></h2>
<div className="flex items-center gap-2">
<Button size="small" onClick={() => onUpload?.()}>
</Button>
<Button
type="primary"
size="small"
onClick={() => {
let dirName = "";
modal.confirm({
title: "新建文件夹",
content: (
<Input
autoFocus
placeholder="请输入文件夹名称"
onChange={(e) => {
dirName = e.target.value?.trim();
}}
/>
),
okText: "确定",
cancelText: "取消",
onOk: async () => {
if (!dirName) {
message.warning("请输入文件夹名称");
return Promise.reject();
}
await handleCreateDirectory(dirName);
},
});
}}
>
</Button>
</div>
</div>
{selectedFiles.length > 0 && (
<div className="flex items-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200">
<span className="text-sm text-blue-700 font-medium">