Просмотр исходного кода

✨ feat(files): 优化文件上传表单体验

- 移除手动输入的文件ID、名称、类型、大小和上传用户ID字段
- 实现上传成功后自动填充文件名称、类型和大小
- 设置上传时间默认为当前时间
- 简化表单布局,减少手动输入项
yourname 8 месяцев назад
Родитель
Сommit
e3b501fceb
1 измененных файлов с 15 добавлено и 50 удалено
  1. 15 50
      src/client/admin/pages/Files.tsx

+ 15 - 50
src/client/admin/pages/Files.tsx

@@ -267,39 +267,8 @@ const Files: React.FC = () => {
         width={600}
       >
         <Form form={form} layout="vertical">
-          {!editingKey && (
-            <Form.Item
-              name="id"
-              label="文件ID"
-              rules={[{ required: true, message: '请输入文件ID' }]}
-            >
-              <Input placeholder="请输入文件ID" />
-            </Form.Item>
-          )}
           
-          <Form.Item
-            name="name"
-            label="文件名称"
-            rules={[{ required: true, message: '请输入文件名称' }]}
-          >
-            <Input placeholder="请输入文件名称" />
-          </Form.Item>
           
-          <div className="grid grid-cols-2 gap-4">
-            <Form.Item
-              name="type"
-              label="文件类型"
-            >
-              <Input placeholder="请输入文件类型" />
-            </Form.Item>
-            
-            <Form.Item
-              name="size"
-              label="文件大小(字节)"
-            >
-              <Input type="number" placeholder="请输入文件大小" />
-            </Form.Item>
-          </div>
           
           <Form.Item
             name="path"
@@ -316,8 +285,14 @@ const Files: React.FC = () => {
           >
             <BucketUploader
               uploadPath="/files"
-              onUploadSuccess={(fileKey, fileUrl) => {
-                form.setFieldsValue({ path: fileUrl });
+              onUploadSuccess={(fileKey, fileUrl, file) => {
+                // 从文件对象中提取信息并自动填充表单
+                form.setFieldsValue({
+                  path: fileUrl,
+                  name: file.name,
+                  type: file.type || file.name.split('.').pop() || '',
+                  size: file.size
+                });
               }}
               onUploadError={(error) => {
                 message.error(`上传失败: ${error.message}`);
@@ -325,23 +300,13 @@ const Files: React.FC = () => {
             />
           </Form.Item>
           
-          <div className="grid grid-cols-2 gap-4">
-            <Form.Item
-              name="uploadUserId"
-              label="上传用户ID"
-              rules={[{ required: true, message: '请输入上传用户ID' }]}
-            >
-              <Input placeholder="请输入上传用户ID" />
-            </Form.Item>
-            
-            <Form.Item
-              name="uploadTime"
-              label="上传时间"
-              rules={[{ required: true, message: '请选择上传时间' }]}
-            >
-              <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
-            </Form.Item>
-          </div>
+          <Form.Item
+            name="uploadTime"
+            label="上传时间"
+            initialValue={dayjs()}
+          >
+            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
+          </Form.Item>
           
           <Form.Item
             name="description"