Explorar o código

✨ feat(policy-news): 增强政策资讯图片上传功能

- 添加FileSelector组件支持从文件库选择图片
- 实现图片上传、选择和管理功能
- 增加"从文件库选择"和"清空图片"按钮
- 优化图片上传区域UI布局,使用垂直空间排列元素
- 添加文件选择器模态框,支持图片选择和上传
yourname hai 7 meses
pai
achega
a4af9aa674
Modificáronse 1 ficheiros con 67 adicións e 22 borrados
  1. 67 22
      src/client/admin/pages/PolicyNewsPage.tsx

+ 67 - 22
src/client/admin/pages/PolicyNewsPage.tsx

@@ -35,6 +35,7 @@ import type { InferResponseType, InferRequestType } from 'hono/client';
 import { uploadFile } from '@/client/utils/minio';
 import ReactQuill from 'react-quill-new';
 import 'react-quill-new/dist/quill.snow.css';
+import FileSelector from '@/client/admin/components/FileSelector';
 
 const { Search } = Input;
 const { Option } = Select;
@@ -68,6 +69,8 @@ const PolicyNewsPage: React.FC = () => {
     category: '',
     isFeatured: undefined,
   });
+  const [fileSelectorVisible, setFileSelectorVisible] = useState(false);
+  const [currentImageField, setCurrentImageField] = useState<string>('images');
 
   const [form] = Form.useForm();
 
@@ -249,6 +252,19 @@ const PolicyNewsPage: React.FC = () => {
     }
   };
 
+  // 处理文件选择
+  const handleFileSelect = (file: any) => {
+    const currentImages = form.getFieldValue('images') || [];
+    const newImages = [...currentImages, file.fullUrl];
+    form.setFieldsValue({ images: newImages });
+    setFileSelectorVisible(false);
+  };
+
+  // 打开文件选择器
+  const openFileSelector = () => {
+    setFileSelectorVisible(true);
+  };
+
   // 打开编辑模态框
   const handleEdit = (record: PolicyNewsItem) => {
     setEditingRecord(record);
@@ -651,30 +667,48 @@ const PolicyNewsPage: React.FC = () => {
             valuePropName="fileList"
             getValueFromEvent={normFile}
           >
-            <Upload
-              name="file"
-              multiple
-              maxCount={5}
-              accept="image/*"
-              customRequest={async ({ file, onSuccess, onError }) => {
-                try {
-                  const url = await handleImageUpload(file as File);
-                  if (url) {
-                    onSuccess?.(url);
-                  } else {
-                    onError?.(new Error('上传失败'));
-                  }
-                } catch (error) {
-                  onError?.(error as Error);
-                }
-              }}
-              listType="picture-card"
-            >
+            <Space direction="vertical" style={{ width: '100%' }}>
               <div>
-                <PlusOutlined />
-                <div style={{ marginTop: 8 }}>上传</div>
+                <Button
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={openFileSelector}
+                  style={{ marginRight: 8 }}
+                >
+                  从文件库选择
+                </Button>
+                <Button
+                  type="dashed"
+                  onClick={() => form.setFieldsValue({ images: [] })}
+                >
+                  清空图片
+                </Button>
               </div>
-            </Upload>
+              <Upload
+                name="file"
+                multiple
+                maxCount={5}
+                accept="image/*"
+                customRequest={async ({ file, onSuccess, onError }) => {
+                  try {
+                    const url = await handleImageUpload(file as File);
+                    if (url) {
+                      onSuccess?.(url);
+                    } else {
+                      onError?.(new Error('上传失败'));
+                    }
+                  } catch (error) {
+                    onError?.(error as Error);
+                  }
+                }}
+                listType="picture-card"
+              >
+                <div>
+                  <PlusOutlined />
+                  <div style={{ marginTop: 8 }}>直接上传</div>
+                </div>
+              </Upload>
+            </Space>
           </Form.Item>
 
           <Form.Item label="资讯内容">
@@ -697,6 +731,17 @@ const PolicyNewsPage: React.FC = () => {
             </Space>
           </Form.Item>
         </Form>
+
+        {/* 文件选择器模态框 */}
+        <FileSelector
+          visible={fileSelectorVisible}
+          onCancel={() => setFileSelectorVisible(false)}
+          onSelect={handleFileSelect}
+          accept="image/*"
+          maxSize={5}
+          uploadPath="/policy-news"
+          uploadButtonText="上传新图片"
+        />
       </Modal>
     </div>
   );