You've already forked DataMate
refactor(DataManagement): 重构数据管理详情页面组件
- 移除 Overview 组件中的文件列表多选配置功能 - 添加 DatasetFileRow 类型定义并更新相关类型注解 - 修改 Overview 组件属性接口,增加 onUpload 回调函数 - 更新表格渲染函数中的类型注解,统一使用 DatasetFileRow 类型 - 简化按钮点击事件处理函数的参数传递 - 在 DatasetDetail 页面中移除顶部工具栏的上传按钮 - 将上传功能集成到 Overview 组件的文件操作区域 - 通过回调函数实现
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user