1390 lines
39 KiB
TypeScript
1390 lines
39 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import {
|
||
Layout, Menu, Button, Table, Space,
|
||
Form, Input, Select, message, Modal,
|
||
Card, Spin, Row, Col, Breadcrumb, Avatar,
|
||
Dropdown, ConfigProvider, theme, Typography,
|
||
Switch, Badge, Image, Upload, Divider, Descriptions,
|
||
Popconfirm, Tag, Statistic, DatePicker, Radio, Progress, Tabs, List, Alert, Collapse, Empty, Drawer
|
||
} from 'antd';
|
||
import {
|
||
UploadOutlined,
|
||
FileImageOutlined,
|
||
FileExcelOutlined,
|
||
FileWordOutlined,
|
||
FilePdfOutlined,
|
||
FileOutlined,
|
||
} from '@ant-design/icons';
|
||
import {
|
||
useQuery,
|
||
} from '@tanstack/react-query';
|
||
import dayjs from 'dayjs';
|
||
import weekday from 'dayjs/plugin/weekday';
|
||
import localeData from 'dayjs/plugin/localeData';
|
||
import { uploadMinIOWithPolicy,uploadOSSWithPolicy } from '@d8d-appcontainer/api';
|
||
import type { MinioUploadPolicy, OSSUploadPolicy } from '@d8d-appcontainer/types';
|
||
import 'dayjs/locale/zh-cn';
|
||
import type {
|
||
FileLibrary, FileCategory, KnowInfo
|
||
} from '../share/types.ts';
|
||
|
||
import {
|
||
AuditStatus,AuditStatusNameMap,
|
||
OssType,
|
||
} from '../share/types.ts';
|
||
|
||
import { getEnumOptions } from './utils.ts';
|
||
|
||
import {
|
||
FileAPI,
|
||
UserAPI,
|
||
} from './api.ts';
|
||
|
||
|
||
// 配置 dayjs 插件
|
||
dayjs.extend(weekday);
|
||
dayjs.extend(localeData);
|
||
|
||
// 设置 dayjs 语言
|
||
dayjs.locale('zh-cn');
|
||
|
||
const { Title } = Typography;
|
||
|
||
|
||
// 仪表盘页面
|
||
export const DashboardPage = () => {
|
||
return (
|
||
<div>
|
||
<Title level={2}>仪表盘</Title>
|
||
<Row gutter={16}>
|
||
<Col span={8}>
|
||
<Card>
|
||
<Statistic
|
||
title="活跃用户"
|
||
value={112893}
|
||
loading={false}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Card>
|
||
<Statistic
|
||
title="系统消息"
|
||
value={93}
|
||
loading={false}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Card>
|
||
<Statistic
|
||
title="在线用户"
|
||
value={1128}
|
||
loading={false}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 用户管理页面
|
||
export const UsersPage = () => {
|
||
const [searchParams, setSearchParams] = useState({
|
||
page: 1,
|
||
limit: 10,
|
||
search: ''
|
||
});
|
||
const [modalVisible, setModalVisible] = useState(false);
|
||
const [modalTitle, setModalTitle] = useState('');
|
||
const [editingUser, setEditingUser] = useState<any>(null);
|
||
const [form] = Form.useForm();
|
||
|
||
const { data: usersData, isLoading, refetch } = useQuery({
|
||
queryKey: ['users', searchParams],
|
||
queryFn: async () => {
|
||
return await UserAPI.getUsers(searchParams);
|
||
}
|
||
});
|
||
|
||
const users = usersData?.data || [];
|
||
const pagination = {
|
||
current: searchParams.page,
|
||
pageSize: searchParams.limit,
|
||
total: usersData?.pagination?.total || 0
|
||
};
|
||
|
||
// 处理搜索
|
||
const handleSearch = (values: any) => {
|
||
setSearchParams(prev => ({
|
||
...prev,
|
||
search: values.search || '',
|
||
page: 1
|
||
}));
|
||
};
|
||
|
||
// 处理分页变化
|
||
const handleTableChange = (newPagination: any) => {
|
||
setSearchParams(prev => ({
|
||
...prev,
|
||
page: newPagination.current,
|
||
limit: newPagination.pageSize
|
||
}));
|
||
};
|
||
|
||
// 打开创建用户模态框
|
||
const showCreateModal = () => {
|
||
setModalTitle('创建用户');
|
||
setEditingUser(null);
|
||
form.resetFields();
|
||
setModalVisible(true);
|
||
};
|
||
|
||
// 打开编辑用户模态框
|
||
const showEditModal = (user: any) => {
|
||
setModalTitle('编辑用户');
|
||
setEditingUser(user);
|
||
form.setFieldsValue(user);
|
||
setModalVisible(true);
|
||
};
|
||
|
||
// 处理模态框确认
|
||
const handleModalOk = async () => {
|
||
try {
|
||
const values = await form.validateFields();
|
||
|
||
if (editingUser) {
|
||
// 编辑用户
|
||
await UserAPI.updateUser(editingUser.id, values);
|
||
message.success('用户更新成功');
|
||
} else {
|
||
// 创建用户
|
||
await UserAPI.createUser(values);
|
||
message.success('用户创建成功');
|
||
}
|
||
|
||
setModalVisible(false);
|
||
form.resetFields();
|
||
refetch(); // 刷新用户列表
|
||
} catch (error) {
|
||
console.error('表单提交失败:', error);
|
||
message.error('操作失败，请重试');
|
||
}
|
||
};
|
||
|
||
// 处理删除用户
|
||
const handleDelete = async (id: number) => {
|
||
try {
|
||
await UserAPI.deleteUser(id);
|
||
message.success('用户删除成功');
|
||
refetch(); // 刷新用户列表
|
||
} catch (error) {
|
||
console.error('删除用户失败:', error);
|
||
message.error('删除失败，请重试');
|
||
}
|
||
};
|
||
|
||
const columns = [
|
||
{
|
||
title: '用户名',
|
||
dataIndex: 'username',
|
||
key: 'username',
|
||
},
|
||
{
|
||
title: '昵称',
|
||
dataIndex: 'nickname',
|
||
key: 'nickname',
|
||
},
|
||
{
|
||
title: '邮箱',
|
||
dataIndex: 'email',
|
||
key: 'email',
|
||
},
|
||
{
|
||
title: '角色',
|
||
dataIndex: 'role',
|
||
key: 'role',
|
||
render: (role: string) => (
|
||
<Tag color={role === 'admin' ? 'red' : 'blue'}>
|
||
{role === 'admin' ? '管理员' : '普通用户'}
|
||
</Tag>
|
||
),
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'created_at',
|
||
key: 'created_at',
|
||
render: (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
render: (_: any, record: any) => (
|
||
<Space size="middle">
|
||
<Button type="link" onClick={() => showEditModal(record)}>
|
||
编辑
|
||
</Button>
|
||
<Popconfirm
|
||
title="确定要删除此用户吗？"
|
||
onConfirm={() => handleDelete(record.id)}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Button type="link" danger>
|
||
删除
|
||
</Button>
|
||
</Popconfirm>
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<Title level={2}>用户管理</Title>
|
||
<Card>
|
||
<Form layout="inline" onFinish={handleSearch} style={{ marginBottom: 16 }}>
|
||
<Form.Item name="search" label="搜索">
|
||
<Input placeholder="用户名/昵称/邮箱" allowClear />
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<Space>
|
||
<Button type="primary" htmlType="submit">
|
||
搜索
|
||
</Button>
|
||
<Button type="primary" onClick={showCreateModal}>
|
||
创建用户
|
||
</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
|
||
<Table
|
||
columns={columns}
|
||
dataSource={users}
|
||
loading={isLoading}
|
||
rowKey="id"
|
||
pagination={{
|
||
...pagination,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
showTotal: (total) => `共 ${total} 条记录`
|
||
}}
|
||
onChange={handleTableChange}
|
||
/>
|
||
</Card>
|
||
|
||
{/* 创建/编辑用户模态框 */}
|
||
<Modal
|
||
title={modalTitle}
|
||
open={modalVisible}
|
||
onOk={handleModalOk}
|
||
onCancel={() => {
|
||
setModalVisible(false);
|
||
form.resetFields();
|
||
}}
|
||
width={600}
|
||
>
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
>
|
||
<Form.Item
|
||
name="username"
|
||
label="用户名"
|
||
rules={[
|
||
{ required: true, message: '请输入用户名' },
|
||
{ min: 3, message: '用户名至少3个字符' }
|
||
]}
|
||
>
|
||
<Input placeholder="请输入用户名" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="nickname"
|
||
label="昵称"
|
||
rules={[{ required: true, message: '请输入昵称' }]}
|
||
>
|
||
<Input placeholder="请输入昵称" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="email"
|
||
label="邮箱"
|
||
rules={[
|
||
{ required: true, message: '请输入邮箱' },
|
||
{ type: 'email', message: '请输入有效的邮箱地址' }
|
||
]}
|
||
>
|
||
<Input placeholder="请输入邮箱" />
|
||
</Form.Item>
|
||
|
||
{!editingUser && (
|
||
<Form.Item
|
||
name="password"
|
||
label="密码"
|
||
rules={[
|
||
{ required: true, message: '请输入密码' },
|
||
{ min: 6, message: '密码至少6个字符' }
|
||
]}
|
||
>
|
||
<Input.Password placeholder="请输入密码" />
|
||
</Form.Item>
|
||
)}
|
||
|
||
<Form.Item
|
||
name="role"
|
||
label="角色"
|
||
rules={[{ required: true, message: '请选择角色' }]}
|
||
>
|
||
<Select placeholder="请选择角色">
|
||
<Select.Option value="user">普通用户</Select.Option>
|
||
<Select.Option value="admin">管理员</Select.Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 知识库管理页面组件
|
||
export const KnowInfoPage = () => {
|
||
const [modalVisible, setModalVisible] = useState(false);
|
||
const [formMode, setFormMode] = useState<'create' | 'edit'>('create');
|
||
const [editingId, setEditingId] = useState<number | null>(null);
|
||
const [form] = Form.useForm();
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [searchParams, setSearchParams] = useState({
|
||
title: '',
|
||
category: '',
|
||
page: 1,
|
||
limit: 10,
|
||
});
|
||
|
||
// 使用React Query获取知识库文章列表
|
||
const { data: articlesData, isLoading: isListLoading, refetch } = useQuery({
|
||
queryKey: ['articles', searchParams],
|
||
queryFn: async () => {
|
||
const { title, category, page, limit } = searchParams;
|
||
const params = new URLSearchParams();
|
||
|
||
if (title) params.append('title', title);
|
||
if (category) params.append('category', category);
|
||
params.append('page', String(page));
|
||
params.append('limit', String(limit));
|
||
|
||
const response = await fetch(`/api/know-info?${params.toString()}`, {
|
||
headers: {
|
||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||
},
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('获取知识库文章列表失败');
|
||
}
|
||
|
||
return await response.json();
|
||
}
|
||
});
|
||
|
||
const articles = articlesData?.data || [];
|
||
const pagination = articlesData?.pagination || { current: 1, pageSize: 10, total: 0 };
|
||
|
||
// 获取单个知识库文章
|
||
const fetchArticle = async (id: number) => {
|
||
try {
|
||
const response = await fetch(`/api/know-info/${id}`, {
|
||
headers: {
|
||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||
},
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('获取知识库文章详情失败');
|
||
}
|
||
|
||
return await response.json();
|
||
} catch (error) {
|
||
message.error('获取知识库文章详情失败');
|
||
return null;
|
||
}
|
||
};
|
||
|
||
// 处理表单提交
|
||
const handleSubmit = async (values: Partial<KnowInfo>) => {
|
||
setIsLoading(true);
|
||
|
||
try {
|
||
const url = formMode === 'create'
|
||
? '/api/know-info'
|
||
: `/api/know-info/${editingId}`;
|
||
|
||
const method = formMode === 'create' ? 'POST' : 'PUT';
|
||
|
||
const response = await fetch(url, {
|
||
method,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||
},
|
||
body: JSON.stringify(values),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(formMode === 'create' ? '创建知识库文章失败' : '更新知识库文章失败');
|
||
}
|
||
|
||
message.success(formMode === 'create' ? '创建知识库文章成功' : '更新知识库文章成功');
|
||
setModalVisible(false);
|
||
form.resetFields();
|
||
refetch();
|
||
} catch (error) {
|
||
message.error((error as Error).message);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
// 处理编辑
|
||
const handleEdit = async (id: number) => {
|
||
const article = await fetchArticle(id);
|
||
|
||
if (article) {
|
||
setFormMode('edit');
|
||
setEditingId(id);
|
||
form.setFieldsValue(article);
|
||
setModalVisible(true);
|
||
}
|
||
};
|
||
|
||
// 处理删除
|
||
const handleDelete = async (id: number) => {
|
||
try {
|
||
const response = await fetch(`/api/know-info/${id}`, {
|
||
method: 'DELETE',
|
||
headers: {
|
||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||
},
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('删除知识库文章失败');
|
||
}
|
||
|
||
message.success('删除知识库文章成功');
|
||
refetch();
|
||
} catch (error) {
|
||
message.error((error as Error).message);
|
||
}
|
||
};
|
||
|
||
// 处理搜索
|
||
const handleSearch = (values: any) => {
|
||
setSearchParams(prev => ({
|
||
...prev,
|
||
title: values.title || '',
|
||
category: values.category || '',
|
||
page: 1,
|
||
}));
|
||
};
|
||
|
||
// 处理分页
|
||
const handlePageChange = (page: number, pageSize?: number) => {
|
||
setSearchParams(prev => ({
|
||
...prev,
|
||
page,
|
||
limit: pageSize || prev.limit,
|
||
}));
|
||
};
|
||
|
||
// 处理添加
|
||
const handleAdd = () => {
|
||
setFormMode('create');
|
||
setEditingId(null);
|
||
form.resetFields();
|
||
setModalVisible(true);
|
||
};
|
||
|
||
// 审核状态映射
|
||
const auditStatusOptions = getEnumOptions(AuditStatus, AuditStatusNameMap);
|
||
|
||
// 表格列定义
|
||
const columns = [
|
||
{
|
||
title: 'ID',
|
||
dataIndex: 'id',
|
||
key: 'id',
|
||
width: 80,
|
||
},
|
||
{
|
||
title: '标题',
|
||
dataIndex: 'title',
|
||
key: 'title',
|
||
},
|
||
{
|
||
title: '分类',
|
||
dataIndex: 'category',
|
||
key: 'category',
|
||
},
|
||
{
|
||
title: '标签',
|
||
dataIndex: 'tags',
|
||
key: 'tags',
|
||
render: (tags: string) => tags ? tags.split(',').map(tag => (
|
||
<Tag key={tag}>{tag}</Tag>
|
||
)) : null,
|
||
},
|
||
{
|
||
title: '作者',
|
||
dataIndex: 'author',
|
||
key: 'author',
|
||
},
|
||
{
|
||
title: '审核状态',
|
||
dataIndex: 'audit_status',
|
||
key: 'audit_status',
|
||
render: (status: AuditStatus) => {
|
||
let color = '';
|
||
let text = '';
|
||
|
||
switch(status) {
|
||
case AuditStatus.PENDING:
|
||
color = 'orange';
|
||
text = '待审核';
|
||
break;
|
||
case AuditStatus.APPROVED:
|
||
color = 'green';
|
||
text = '已通过';
|
||
break;
|
||
case AuditStatus.REJECTED:
|
||
color = 'red';
|
||
text = '已拒绝';
|
||
break;
|
||
default:
|
||
color = 'default';
|
||
text = '未知';
|
||
}
|
||
|
||
return <Tag color={color}>{text}</Tag>;
|
||
},
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'created_at',
|
||
key: 'created_at',
|
||
render: (date: string) => new Date(date).toLocaleString(),
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
render: (_: any, record: KnowInfo) => (
|
||
<Space size="middle">
|
||
<Button type="link" onClick={() => handleEdit(record.id)}>编辑</Button>
|
||
<Popconfirm
|
||
title="确定要删除这篇文章吗？"
|
||
onConfirm={() => handleDelete(record.id)}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Button type="link" danger>删除</Button>
|
||
</Popconfirm>
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<Card title="知识库管理" className="mb-4">
|
||
<Form
|
||
layout="inline"
|
||
onFinish={handleSearch}
|
||
style={{ marginBottom: '16px' }}
|
||
>
|
||
<Form.Item name="title" label="标题">
|
||
<Input placeholder="请输入文章标题" />
|
||
</Form.Item>
|
||
|
||
<Form.Item name="category" label="分类">
|
||
<Input placeholder="请输入文章分类" />
|
||
</Form.Item>
|
||
|
||
<Form.Item>
|
||
<Space>
|
||
<Button type="primary" htmlType="submit">
|
||
搜索
|
||
</Button>
|
||
<Button onClick={() => {
|
||
setSearchParams({
|
||
title: '',
|
||
category: '',
|
||
page: 1,
|
||
limit: 10,
|
||
});
|
||
}}>
|
||
重置
|
||
</Button>
|
||
<Button type="primary" onClick={handleAdd}>
|
||
添加文章
|
||
</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
|
||
<Table
|
||
columns={columns}
|
||
dataSource={articles}
|
||
rowKey="id"
|
||
loading={isListLoading}
|
||
pagination={{
|
||
current: pagination.current,
|
||
pageSize: pagination.pageSize,
|
||
total: pagination.total,
|
||
onChange: handlePageChange,
|
||
showSizeChanger: true,
|
||
}}
|
||
/>
|
||
</Card>
|
||
|
||
<Modal
|
||
title={formMode === 'create' ? '添加知识库文章' : '编辑知识库文章'}
|
||
open={modalVisible}
|
||
onOk={() => form.submit()}
|
||
onCancel={() => setModalVisible(false)}
|
||
width={800}
|
||
>
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
onFinish={handleSubmit}
|
||
initialValues={{
|
||
audit_status: AuditStatus.PENDING,
|
||
}}
|
||
>
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="title"
|
||
label="文章标题"
|
||
rules={[{ required: true, message: '请输入文章标题' }]}
|
||
>
|
||
<Input placeholder="请输入文章标题" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="category"
|
||
label="文章分类"
|
||
>
|
||
<Input placeholder="请输入文章分类" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Form.Item
|
||
name="tags"
|
||
label="文章标签"
|
||
help="多个标签请用英文逗号分隔，如: 服务器,网络,故障"
|
||
>
|
||
<Input placeholder="请输入文章标签，多个标签请用英文逗号分隔" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="content"
|
||
label="文章内容"
|
||
rules={[{ required: true, message: '请输入文章内容' }]}
|
||
>
|
||
<Input.TextArea rows={15} placeholder="请输入文章内容，支持Markdown格式" />
|
||
</Form.Item>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="author"
|
||
label="文章作者"
|
||
>
|
||
<Input placeholder="请输入文章作者" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="cover_url"
|
||
label="封面图片URL"
|
||
>
|
||
<Input placeholder="请输入封面图片URL" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Form.Item
|
||
name="audit_status"
|
||
label="审核状态"
|
||
>
|
||
<Select options={auditStatusOptions} />
|
||
</Form.Item>
|
||
|
||
<Form.Item>
|
||
<Space>
|
||
<Button type="primary" htmlType="submit" loading={isLoading}>
|
||
{formMode === 'create' ? '创建' : '保存'}
|
||
</Button>
|
||
<Button onClick={() => setModalVisible(false)}>取消</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 文件库管理页面
|
||
export const FileLibraryPage = () => {
|
||
const [loading, setLoading] = useState(false);
|
||
const [fileList, setFileList] = useState<FileLibrary[]>([]);
|
||
const [categories, setCategories] = useState<FileCategory[]>([]);
|
||
const [pagination, setPagination] = useState({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 0
|
||
});
|
||
const [searchParams, setSearchParams] = useState({
|
||
fileType: '',
|
||
keyword: ''
|
||
});
|
||
const [uploadModalVisible, setUploadModalVisible] = useState(false);
|
||
const [fileDetailModalVisible, setFileDetailModalVisible] = useState(false);
|
||
const [currentFile, setCurrentFile] = useState<FileLibrary | null>(null);
|
||
const [uploadLoading, setUploadLoading] = useState(false);
|
||
const [form] = Form.useForm();
|
||
const [categoryForm] = Form.useForm();
|
||
const [categoryModalVisible, setCategoryModalVisible] = useState(false);
|
||
const [currentCategory, setCurrentCategory] = useState<FileCategory | null>(null);
|
||
|
||
// 获取文件图标
|
||
const getFileIcon = (fileType: string) => {
|
||
if (fileType.includes('image')) {
|
||
return <FileImageOutlined style={{ fontSize: '24px', color: '#1890ff' }} />;
|
||
} else if (fileType.includes('pdf')) {
|
||
return <FilePdfOutlined style={{ fontSize: '24px', color: '#ff4d4f' }} />;
|
||
} else if (fileType.includes('excel') || fileType.includes('sheet')) {
|
||
return <FileExcelOutlined style={{ fontSize: '24px', color: '#52c41a' }} />;
|
||
} else if (fileType.includes('word') || fileType.includes('document')) {
|
||
return <FileWordOutlined style={{ fontSize: '24px', color: '#2f54eb' }} />;
|
||
} else {
|
||
return <FileOutlined style={{ fontSize: '24px', color: '#faad14' }} />;
|
||
}
|
||
};
|
||
|
||
// 加载文件列表
|
||
const fetchFileList = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const response = await FileAPI.getFileList({
|
||
page: pagination.current,
|
||
pageSize: pagination.pageSize,
|
||
...searchParams
|
||
});
|
||
|
||
if (response && response.data) {
|
||
setFileList(response.data.list);
|
||
setPagination({
|
||
...pagination,
|
||
total: response.data.pagination.total
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('获取文件列表失败:', error);
|
||
message.error('获取文件列表失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 加载文件分类
|
||
const fetchCategories = async () => {
|
||
try {
|
||
const response = await FileAPI.getCategories();
|
||
if (response && response.data) {
|
||
setCategories(response.data);
|
||
}
|
||
} catch (error) {
|
||
console.error('获取文件分类失败:', error);
|
||
message.error('获取文件分类失败');
|
||
}
|
||
};
|
||
|
||
// 组件挂载时加载数据
|
||
useEffect(() => {
|
||
fetchFileList();
|
||
fetchCategories();
|
||
}, [pagination.current, pagination.pageSize, searchParams]);
|
||
|
||
// 上传文件
|
||
const handleUpload = async (file: File) => {
|
||
try {
|
||
setUploadLoading(true);
|
||
|
||
// 1. 获取上传策略
|
||
const policyResponse = await FileAPI.getUploadPolicy(file.name);
|
||
if (!policyResponse || !policyResponse.data) {
|
||
throw new Error('获取上传策略失败');
|
||
}
|
||
|
||
const policy = policyResponse.data;
|
||
|
||
// 2. 上传文件至 MinIO
|
||
const uploadProgress = {
|
||
progress: 0,
|
||
completed: false,
|
||
error: null as Error | null
|
||
};
|
||
|
||
const callbacks = {
|
||
onProgress: (event: { progress: number }) => {
|
||
uploadProgress.progress = event.progress;
|
||
},
|
||
onComplete: () => {
|
||
uploadProgress.completed = true;
|
||
},
|
||
onError: (err: Error) => {
|
||
uploadProgress.error = err;
|
||
}
|
||
};
|
||
|
||
const uploadUrl = window.CONFIG?.OSS_TYPE === OssType.MINIO ? await uploadMinIOWithPolicy(
|
||
policy as MinioUploadPolicy,
|
||
file,
|
||
file.name,
|
||
callbacks
|
||
) : await uploadOSSWithPolicy(
|
||
policy as OSSUploadPolicy,
|
||
file,
|
||
file.name,
|
||
callbacks
|
||
);
|
||
|
||
if (!uploadUrl || uploadProgress.error) {
|
||
throw uploadProgress.error || new Error('上传文件失败');
|
||
}
|
||
|
||
// 3. 保存文件信息到文件库
|
||
const fileValues = form.getFieldsValue();
|
||
const fileData = {
|
||
file_name: file.name,
|
||
file_path: uploadUrl,
|
||
file_type: file.type,
|
||
file_size: file.size,
|
||
category_id: fileValues.category_id ? Number(fileValues.category_id) : undefined,
|
||
tags: fileValues.tags,
|
||
description: fileValues.description
|
||
};
|
||
|
||
const saveResponse = await FileAPI.saveFileInfo(fileData);
|
||
|
||
if (saveResponse && saveResponse.data) {
|
||
message.success('文件上传成功');
|
||
setUploadModalVisible(false);
|
||
form.resetFields();
|
||
fetchFileList();
|
||
}
|
||
} catch (error) {
|
||
console.error('上传文件失败:', error);
|
||
message.error('上传文件失败: ' + (error instanceof Error ? error.message : '未知错误'));
|
||
} finally {
|
||
setUploadLoading(false);
|
||
}
|
||
};
|
||
|
||
// 处理文件上传
|
||
const uploadProps = {
|
||
name: 'file',
|
||
multiple: false,
|
||
showUploadList: false,
|
||
beforeUpload: (file: File) => {
|
||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||
if (!isLt10M) {
|
||
message.error('文件大小不能超过10MB！');
|
||
return false;
|
||
}
|
||
handleUpload(file);
|
||
return false;
|
||
}
|
||
};
|
||
|
||
// 查看文件详情
|
||
const viewFileDetail = async (id: number) => {
|
||
try {
|
||
const response = await FileAPI.getFileInfo(id);
|
||
if (response && response.data) {
|
||
setCurrentFile(response.data);
|
||
setFileDetailModalVisible(true);
|
||
}
|
||
} catch (error) {
|
||
console.error('获取文件详情失败:', error);
|
||
message.error('获取文件详情失败');
|
||
}
|
||
};
|
||
|
||
// 下载文件
|
||
const downloadFile = async (file: FileLibrary) => {
|
||
try {
|
||
// 更新下载计数
|
||
await FileAPI.updateDownloadCount(file.id);
|
||
|
||
// 创建一个暂时的a标签用于下载
|
||
const link = document.createElement('a');
|
||
link.href = file.file_path;
|
||
link.target = '_blank';
|
||
link.download = file.file_name;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
|
||
message.success('下载已开始');
|
||
} catch (error) {
|
||
console.error('下载文件失败:', error);
|
||
message.error('下载文件失败');
|
||
}
|
||
};
|
||
|
||
// 删除文件
|
||
const handleDeleteFile = async (id: number) => {
|
||
try {
|
||
await FileAPI.deleteFile(id);
|
||
message.success('文件删除成功');
|
||
fetchFileList();
|
||
} catch (error) {
|
||
console.error('删除文件失败:', error);
|
||
message.error('删除文件失败');
|
||
}
|
||
};
|
||
|
||
// 处理搜索
|
||
const handleSearch = (values: any) => {
|
||
setSearchParams(values);
|
||
setPagination({
|
||
...pagination,
|
||
current: 1
|
||
});
|
||
};
|
||
|
||
// 处理表格分页变化
|
||
const handleTableChange = (newPagination: any) => {
|
||
setPagination({
|
||
...pagination,
|
||
current: newPagination.current,
|
||
pageSize: newPagination.pageSize
|
||
});
|
||
};
|
||
|
||
// 添加或更新分类
|
||
const handleCategorySave = async () => {
|
||
try {
|
||
const values = await categoryForm.validateFields();
|
||
|
||
if (currentCategory) {
|
||
// 更新分类
|
||
await FileAPI.updateCategory(currentCategory.id, values);
|
||
message.success('分类更新成功');
|
||
} else {
|
||
// 创建分类
|
||
await FileAPI.createCategory(values);
|
||
message.success('分类创建成功');
|
||
}
|
||
|
||
setCategoryModalVisible(false);
|
||
categoryForm.resetFields();
|
||
setCurrentCategory(null);
|
||
fetchCategories();
|
||
} catch (error) {
|
||
console.error('保存分类失败:', error);
|
||
message.error('保存分类失败');
|
||
}
|
||
};
|
||
|
||
// 编辑分类
|
||
const handleEditCategory = (category: FileCategory) => {
|
||
setCurrentCategory(category);
|
||
categoryForm.setFieldsValue(category);
|
||
setCategoryModalVisible(true);
|
||
};
|
||
|
||
// 删除分类
|
||
const handleDeleteCategory = async (id: number) => {
|
||
try {
|
||
await FileAPI.deleteCategory(id);
|
||
message.success('分类删除成功');
|
||
fetchCategories();
|
||
} catch (error) {
|
||
console.error('删除分类失败:', error);
|
||
message.error('删除分类失败');
|
||
}
|
||
};
|
||
|
||
// 文件表格列配置
|
||
const columns = [
|
||
{
|
||
title: '文件名',
|
||
key: 'file_name',
|
||
render: (text: string, record: FileLibrary) => (
|
||
<Space>
|
||
{getFileIcon(record.file_type)}
|
||
<a onClick={() => viewFileDetail(record.id)}>
|
||
{record.original_filename || record.file_name}
|
||
</a>
|
||
</Space>
|
||
)
|
||
},
|
||
{
|
||
title: '文件类型',
|
||
dataIndex: 'file_type',
|
||
key: 'file_type',
|
||
width: 120,
|
||
render: (text: string) => text.split('/').pop()
|
||
},
|
||
{
|
||
title: '大小',
|
||
dataIndex: 'file_size',
|
||
key: 'file_size',
|
||
width: 100,
|
||
render: (size: number) => {
|
||
if (size < 1024) {
|
||
return `${size} B`;
|
||
} else if (size < 1024 * 1024) {
|
||
return `${(size / 1024).toFixed(2)} KB`;
|
||
} else {
|
||
return `${(size / 1024 / 1024).toFixed(2)} MB`;
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: '分类',
|
||
dataIndex: 'category_id',
|
||
key: 'category_id',
|
||
width: 120
|
||
},
|
||
{
|
||
title: '上传者',
|
||
dataIndex: 'uploader_name',
|
||
key: 'uploader_name',
|
||
width: 120
|
||
},
|
||
{
|
||
title: '下载次数',
|
||
dataIndex: 'download_count',
|
||
key: 'download_count',
|
||
width: 120
|
||
},
|
||
{
|
||
title: '上传时间',
|
||
dataIndex: 'created_at',
|
||
key: 'created_at',
|
||
width: 180,
|
||
render: (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm:ss')
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 180,
|
||
render: (_: any, record: FileLibrary) => (
|
||
<Space size="middle">
|
||
<Button type="link" onClick={() => downloadFile(record)}>
|
||
下载
|
||
</Button>
|
||
<Popconfirm
|
||
title="确定要删除这个文件吗？"
|
||
onConfirm={() => handleDeleteFile(record.id)}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Button type="link" danger>删除</Button>
|
||
</Popconfirm>
|
||
</Space>
|
||
)
|
||
}
|
||
];
|
||
|
||
// 分类表格列配置
|
||
const categoryColumns = [
|
||
{
|
||
title: '分类名称',
|
||
dataIndex: 'name',
|
||
key: 'name'
|
||
},
|
||
{
|
||
title: '分类编码',
|
||
dataIndex: 'code',
|
||
key: 'code'
|
||
},
|
||
{
|
||
title: '描述',
|
||
dataIndex: 'description',
|
||
key: 'description'
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
render: (_: any, record: FileCategory) => (
|
||
<Space size="middle">
|
||
<Button type="link" onClick={() => handleEditCategory(record)}>
|
||
编辑
|
||
</Button>
|
||
<Popconfirm
|
||
title="确定要删除这个分类吗？"
|
||
onConfirm={() => handleDeleteCategory(record.id)}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Button type="link" danger>删除</Button>
|
||
</Popconfirm>
|
||
</Space>
|
||
)
|
||
}
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<Title level={2}>文件库管理</Title>
|
||
|
||
<Card>
|
||
<Tabs defaultActiveKey="files">
|
||
<Tabs.TabPane tab="文件管理" key="files">
|
||
{/* 搜索表单 */}
|
||
<Form layout="inline" onFinish={handleSearch} style={{ marginBottom: 16 }}>
|
||
<Form.Item name="keyword" label="关键词">
|
||
<Input placeholder="文件名/描述/标签" allowClear />
|
||
</Form.Item>
|
||
<Form.Item name="category_id" label="分类">
|
||
<Select placeholder="选择分类" allowClear style={{ width: 160 }}>
|
||
{categories.map(category => (
|
||
<Select.Option key={category.id} value={category.id}>
|
||
{category.name}
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item name="fileType" label="文件类型">
|
||
<Select placeholder="选择文件类型" allowClear style={{ width: 160 }}>
|
||
<Select.Option value="image">图片</Select.Option>
|
||
<Select.Option value="document">文档</Select.Option>
|
||
<Select.Option value="application">应用</Select.Option>
|
||
<Select.Option value="audio">音频</Select.Option>
|
||
<Select.Option value="video">视频</Select.Option>
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<Button type="primary" htmlType="submit">
|
||
搜索
|
||
</Button>
|
||
</Form.Item>
|
||
<Button
|
||
type="primary"
|
||
onClick={() => setUploadModalVisible(true)}
|
||
icon={<UploadOutlined />}
|
||
style={{ marginLeft: 16 }}
|
||
>
|
||
上传文件
|
||
</Button>
|
||
</Form>
|
||
|
||
{/* 文件列表 */}
|
||
<Table
|
||
columns={columns}
|
||
dataSource={fileList}
|
||
rowKey="id"
|
||
loading={loading}
|
||
pagination={{
|
||
current: pagination.current,
|
||
pageSize: pagination.pageSize,
|
||
total: pagination.total,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
showTotal: (total) => `共 ${total} 条记录`
|
||
}}
|
||
onChange={handleTableChange}
|
||
/>
|
||
</Tabs.TabPane>
|
||
|
||
<Tabs.TabPane tab="分类管理" key="categories">
|
||
<div style={{ marginBottom: 16 }}>
|
||
<Button
|
||
type="primary"
|
||
onClick={() => {
|
||
setCurrentCategory(null);
|
||
categoryForm.resetFields();
|
||
setCategoryModalVisible(true);
|
||
}}
|
||
>
|
||
添加分类
|
||
</Button>
|
||
</div>
|
||
|
||
<Table
|
||
columns={categoryColumns}
|
||
dataSource={categories}
|
||
rowKey="id"
|
||
pagination={{ pageSize: 10 }}
|
||
/>
|
||
</Tabs.TabPane>
|
||
</Tabs>
|
||
</Card>
|
||
|
||
{/* 上传文件弹窗 */}
|
||
<Modal
|
||
title="上传文件"
|
||
open={uploadModalVisible}
|
||
onCancel={() => setUploadModalVisible(false)}
|
||
footer={null}
|
||
>
|
||
<Form form={form} layout="vertical">
|
||
<Form.Item
|
||
name="file"
|
||
label="文件"
|
||
rules={[{ required: true, message: '请选择要上传的文件' }]}
|
||
>
|
||
<Upload {...uploadProps}>
|
||
<Button icon={<UploadOutlined />} loading={uploadLoading}>
|
||
选择文件
|
||
</Button>
|
||
<div style={{ marginTop: 8 }}>
|
||
支持任意类型文件，单个文件不超过10MB
|
||
</div>
|
||
</Upload>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="category_id"
|
||
label="分类"
|
||
>
|
||
<Select placeholder="选择分类" allowClear>
|
||
{categories.map(category => (
|
||
<Select.Option key={category.id} value={category.id}>
|
||
{category.name}
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="tags"
|
||
label="标签"
|
||
>
|
||
<Input placeholder="多个标签用逗号分隔" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="description"
|
||
label="描述"
|
||
>
|
||
<Input.TextArea rows={4} placeholder="文件描述..." />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
{/* 文件详情弹窗 */}
|
||
<Modal
|
||
title="文件详情"
|
||
open={fileDetailModalVisible}
|
||
onCancel={() => setFileDetailModalVisible(false)}
|
||
footer={[
|
||
<Button key="close" onClick={() => setFileDetailModalVisible(false)}>
|
||
关闭
|
||
</Button>,
|
||
<Button
|
||
key="download"
|
||
type="primary"
|
||
onClick={() => currentFile && downloadFile(currentFile)}
|
||
>
|
||
下载
|
||
</Button>
|
||
]}
|
||
width={700}
|
||
>
|
||
{currentFile && (
|
||
<Descriptions bordered column={2}>
|
||
<Descriptions.Item label="系统文件名" span={2}>
|
||
{currentFile.file_name}
|
||
</Descriptions.Item>
|
||
{currentFile.original_filename && (
|
||
<Descriptions.Item label="原始文件名" span={2}>
|
||
{currentFile.original_filename}
|
||
</Descriptions.Item>
|
||
)}
|
||
<Descriptions.Item label="文件类型">
|
||
{currentFile.file_type}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="文件大小">
|
||
{currentFile.file_size < 1024 * 1024
|
||
? `${(currentFile.file_size / 1024).toFixed(2)} KB`
|
||
: `${(currentFile.file_size / 1024 / 1024).toFixed(2)} MB`}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="上传者">
|
||
{currentFile.uploader_name}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="上传时间">
|
||
{dayjs(currentFile.created_at).format('YYYY-MM-DD HH:mm:ss')}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="分类">
|
||
{currentFile.category_id}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="下载次数">
|
||
{currentFile.download_count}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="标签" span={2}>
|
||
{currentFile.tags?.split(',').map(tag => (
|
||
<Tag key={tag}>{tag}</Tag>
|
||
))}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="描述" span={2}>
|
||
{currentFile.description}
|
||
</Descriptions.Item>
|
||
{currentFile.file_type.startsWith('image/') && (
|
||
<Descriptions.Item label="预览" span={2}>
|
||
<Image src={currentFile.file_path} style={{ maxWidth: '100%' }} />
|
||
</Descriptions.Item>
|
||
)}
|
||
</Descriptions>
|
||
)}
|
||
</Modal>
|
||
|
||
{/* 分类管理弹窗 */}
|
||
<Modal
|
||
title={currentCategory ? "编辑分类" : "添加分类"}
|
||
open={categoryModalVisible}
|
||
onOk={handleCategorySave}
|
||
onCancel={() => {
|
||
setCategoryModalVisible(false);
|
||
categoryForm.resetFields();
|
||
setCurrentCategory(null);
|
||
}}
|
||
>
|
||
<Form form={categoryForm} layout="vertical">
|
||
<Form.Item
|
||
name="name"
|
||
label="分类名称"
|
||
rules={[{ required: true, message: '请输入分类名称' }]}
|
||
>
|
||
<Input placeholder="请输入分类名称" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="code"
|
||
label="分类编码"
|
||
rules={[{ required: true, message: '请输入分类编码' }]}
|
||
>
|
||
<Input placeholder="请输入分类编码" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="description"
|
||
label="分类描述"
|
||
>
|
||
<Input.TextArea rows={4} placeholder="分类描述..." />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}; |