diff --git a/src/factory/feedback/FeedbackModal.jsx b/src/factory/feedback/FeedbackModal.jsx index 5456ca99..2cc7e3a3 100644 --- a/src/factory/feedback/FeedbackModal.jsx +++ b/src/factory/feedback/FeedbackModal.jsx @@ -1,7 +1,7 @@ import React, { useState, useCallback } from 'react'; import './FeedbackModal.scss'; import { createMemo } from '../../forums/api'; -import { message, Upload } from 'antd'; +import { message, Upload, Icon } from 'antd'; import { httpUrl } from '../../forums/fetch'; // 导入图片资源 @@ -20,9 +20,9 @@ function FeedbackModal({ visible, onClose, onSuccess }) { title: '', description: '', }); - const [fileList, setFileList] = useState([]); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); + const [fileList, setFileList] = useState([]); // 处理输入变化 const handleInputChange = useCallback((field, value) => { @@ -40,21 +40,18 @@ function FeedbackModal({ visible, onClose, onSuccess }) { }, [errors]); // 文件上传前校验 - const beforeUpload = useCallback((file) => { + const beforeUpload = (file) => { const isLt100M = file.size / 1024 / 1024 < 100; if (!isLt100M) { message.error('文件大小必须小于100MB!'); } return isLt100M; - }, []); + }; - // 文件列表变化处理 - const handleFileChange = useCallback((info) => { - if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') { - const newFileList = info.fileList || []; - setFileList(newFileList); - } - }, []); + // 文件列表变化 + const handleFileChange = ({ fileList: newFileList }) => { + setFileList(newFileList); + }; // 验证表单 const validateForm = useCallback(() => { @@ -75,17 +72,16 @@ function FeedbackModal({ visible, onClose, onSuccess }) { setIsSubmitting(true); try { - // 获取附件ID数组 - const attachmentIdArray = fileList.map(item => { - // 优先使用 response.id（新上传的文件），其次是 item.id（已存在的文件） - return item.response && item.response.id ? item.response.id : item.id; - }).filter(id => id); // 过滤掉undefined/null + // 构建附件ID数组，参考forums/edit的实现 + const attachmentIdArray = fileList.map(item => + item.response && item.response.id ? item.response.id : item.id ? item.id : item + ); // 构建接口参数，主题板块默认填11 const params = { forum_id: 11, children_forum_id: '0', - attachments: attachmentIdArray.length > 0 ? attachmentIdArray : undefined, + attachments: attachmentIdArray, memo: { subject: formData.title, content: formData.description, @@ -111,13 +107,13 @@ function FeedbackModal({ visible, onClose, onSuccess }) { } finally { setIsSubmitting(false); } - }, [formData, fileList, validateForm, onClose, onSuccess]); + }, [formData, validateForm, fileList, onClose, onSuccess]); // 处理取消 const handleCancel = useCallback(() => { setFormData({ title: '', description: '' }); - setFileList([]); setErrors({}); + setFileList([]); onClose?.(); }, [onClose]); @@ -190,28 +186,23 @@ function FeedbackModal({ visible, onClose, onSuccess }) { {errors.description && {errors.description}} - {/* 附件上传 */} + {/* 附件上传 - 参考forums/edit配置 */}
附件
-

- - - - +

-

点击或拖拽文件到此区域上传

-

文件大小不超过 100MB

+

点击或拖拽文件到此区域上传，文件大小不超过 100MB
diff --git a/src/factory/feedback/FeedbackModal.scss b/src/factory/feedback/FeedbackModal.scss index a9a42be0..e9c6e8d5 100644 --- a/src/factory/feedback/FeedbackModal.scss +++ b/src/factory/feedback/FeedbackModal.scss @@ -239,66 +239,9 @@ $transition-duration: 0.3s; // 上传区域 .feedback-form-upload { - width: 100%; -} - -// Ant Design Upload.Dragger 样式覆盖 -.feedback-upload-dragger { - .ant-upload { - padding: 20px !important; - background: #fafafa !important; - border: 1px dashed $border-color !important; - border-radius: 8px !important; - transition: all $transition-duration ease; - - &:hover { - border-color: $primary-color !important; - background: rgba($primary-color, 0.02) !important; - } - - &.ant-upload-drag-hover { - border-color: $primary-color !important; - background: rgba($primary-color, 0.05) !important; - } - } - - .ant-upload-drag-icon { - margin-bottom: 12px; - - svg { - display: block; - margin: 0 auto; - } - } - - .feedback-upload-text { - font-family: 'Alibaba PuHuiTi', 'PingFang SC', sans-serif; - font-size: 14px; - color: $text-primary; - line-height: 1.5; - margin-bottom: 4px; - } - - .feedback-upload-hint { - font-family: 'Alibaba PuHuiTi', 'PingFang SC', sans-serif; - font-size: 12px; - color: $text-muted; - line-height: 1.4; - } - - // 文件列表样式 - .ant-upload-list { - margin-top: 12px; - - .ant-upload-list-item { - font-family: 'Alibaba PuHuiTi', 'PingFang SC', sans-serif; - font-size: 13px; - - &:hover { - background-color: rgba($primary-color, 0.02); - } - } - } + display: flex; + align-items: center; + gap: 12px; } // 隐藏文件输入 @@ -306,7 +249,7 @@ $transition-duration: 0.3s; display: none; } -// 上传按钮（旧版，保留兼容性） +// 上传按钮 .feedback-form-upload-btn { display: inline-flex; align-items: center; @@ -336,7 +279,7 @@ $transition-duration: 0.3s; } } -// 文件名（旧版，保留兼容性） +// 文件名 .feedback-form-file-name { font-family: 'Alibaba PuHuiTi', 'PingFang SC', sans-serif; font-size: 13px; @@ -347,6 +290,54 @@ $transition-duration: 0.3s; white-space: nowrap; } +// Upload.Dragger 样式 - 参考forums/edit配置 +.feedback-upload-dragger { + width: 100%; + + .ant-upload { + &.ant-upload-drag { + background: #fafafa; + border: 1px dashed $border-color; + border-radius: $border-radius-input; + padding: 16px; + + &:hover { + border-color: $primary-color; + } + + .ant-upload-drag-icon { + margin-bottom: 8px; + + .anticon { + font-size: 32px; + color: $primary-color; + } + } + + p { + font-family: 'Alibaba PuHuiTi', 'PingFang SC', sans-serif; + font-size: 13px; + color: $text-muted; + margin: 0; + } + } + } + + // 文件列表样式 + .ant-upload-list { + margin-top: 8px; + + .ant-upload-list-item { + font-family: 'Alibaba PuHuiTi', 'PingFang SC', sans-serif; + font-size: 13px; + + &:hover { + background-color: rgba($primary-color, 0.02); + } + } + } +} + // 弹窗底部 .feedback-modal-footer { position: relative;