Przeglądaj źródła

✨ feat(files): 实现文件上传功能优化

- 引入BucketUploader组件替代原生Upload组件
- 实现文件上传成功后自动填充路径到表单
- 添加上传错误处理和提示
- 修改文件ID类型从string为number以匹配后端接口要求
- 优化文件路径表单项提示信息和验证规则
- 移除旧的handleUpload上传处理函数
- 更新文件上传区域提示文本,增加文件大小限制说明
yourname 8 miesięcy temu
rodzic
commit
a3fc02a0c7
1 zmienionych plików z 17 dodań i 23 usunięć
  1. 17 23
      src/client/admin/pages/Files.tsx

+ 17 - 23
src/client/admin/pages/Files.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Button, Space, Input, Modal, Form, Upload, Select, DatePicker } from 'antd';
+import { Table, Button, Space, Input, Modal, Form, Select, DatePicker } from 'antd';
+import BucketUploader from '@/client/admin/components/BucketUploader';
 import { App } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UploadOutlined } from '@ant-design/icons';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
@@ -102,7 +103,7 @@ const Files: React.FC = () => {
   
   // 更新文件记录
   const updateFile = useMutation({
-    mutationFn: ({ id, data }: { id: string; data: UpdateFileRequest }) => 
+    mutationFn: ({ id, data }: { id: number; data: UpdateFileRequest }) =>
       fileClient[':id'].$put({ param: { id }, json: data }),
     onSuccess: () => {
       message.success('文件记录更新成功');
@@ -116,7 +117,7 @@ const Files: React.FC = () => {
   
   // 删除文件记录
   const deleteFile = useMutation({
-    mutationFn: (id: string) => fileClient[':id'].$delete({ param: { id } }),
+    mutationFn: (id: number) => fileClient[':id'].$delete({ param: { id } }),
     onSuccess: () => {
       message.success('文件记录删除成功');
       queryClient.invalidateQueries({ queryKey: ['files'] });
@@ -150,13 +151,6 @@ const Files: React.FC = () => {
     }
   };
   
-  // 处理文件上传
-  const handleUpload = async (file: any) => {
-    // 这里实现文件上传逻辑
-    message.success('文件上传成功');
-    return { status: 'done', response: { data: { path: `/uploads/${file.name}` } } };
-  };
-  
   // 表格列定义
   const columns = [
     {
@@ -310,25 +304,25 @@ const Files: React.FC = () => {
           <Form.Item
             name="path"
             label="文件路径"
-            rules={[{ required: true, message: '请输入文件路径' }]}
+            rules={[{ required: true, message: '请上传文件获取路径' }]}
+            hidden
           >
-            <Input placeholder="请输入文件路径" />
+            <Input placeholder="文件路径将在上传后自动填充" />
           </Form.Item>
           
           <Form.Item
-            name="upload"
             label="文件上传"
-            valuePropName="fileList"
-            extra="请上传文件"
+            extra="支持单文件上传,单个文件大小不超过500MB"
           >
-            <Upload
-              name="file"
-              customRequest={handleUpload}
-              showUploadList={{ showRemoveIcon: true }}
-              maxCount={1}
-            >
-              <Button icon={<UploadOutlined />}>点击上传</Button>
-            </Upload>
+            <BucketUploader
+              uploadPath="/files"
+              onUploadSuccess={(fileKey, fileUrl) => {
+                form.setFieldsValue({ path: fileUrl });
+              }}
+              onUploadError={(error) => {
+                message.error(`上传失败: ${error.message}`);
+              }}
+            />
           </Form.Item>
           
           <div className="grid grid-cols-2 gap-4">