feat: 反馈支持上传视频

Author: Kaviilee

src/assets/css/dashboard/feedback_single.less

@@ -195,15 +195,39 @@
     }
     .m-attachment {
         .u-detail {
-            .flex;
-            flex-wrap: wrap;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        .u-attachment-summary {
+            color: #909399;
+            .fz(12px, 1.6);
+        }
+        .u-media-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 12px;
         }
-        .u-img {
-            .mr(10px);
-            .mb(10px);
+        .u-media-card {
+            overflow: hidden;
+            border: 1px solid #ebeef5;
+            border-radius: 8px;
+            background: #fff;
         }
-        .el-image {
-            .size(100px);
+        .u-media-meta {
+            padding: 8px 10px;
+            .fz(12px, 1.4);
+            color: #606266;
+            border-top: 1px solid #f2f6fc;
+            background: #fafafa;
+        }
+        .el-image,
+        .u-media-video {
+            display: block;
+            width: 100%;
+            height: 180px;
+            background: #000;
+            object-fit: cover;
         }
     }
 
@@ -284,6 +308,17 @@
         flex-wrap: wrap;
         padding-left: 10px;
     }
+    .m-single-content {
+        .m-attachment {
+            .u-media-grid {
+                grid-template-columns: 1fr;
+            }
+            .el-image,
+            .u-media-video {
+                height: 220px;
+            }
+        }
+    }
 }
 
 .m-reply .c-comment .el-main {

src/components/dashboard/feedback/add.vue

@@ -25,6 +25,7 @@
         </div>
         <div class="m-feedback-actions">
             <div class="m-feedback-attachment">
+                <div class="u-attachment-tip">支持图片和视频，单个文件最大 30MB，最多上传 {{ max }} 个附件</div>
                 <el-upload
                     ref="upload"
                     class="u-upload avatar-uploader"
@@ -36,20 +37,36 @@
                     :on-change="change"
                     :on-exceed="exceed"
                     :limit="max"
-                    title="上传图片"
+                    title="上传图片或视频"
                     with-credentials
-                    accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp"
+                    accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp, video/mp4, video/quicktime, video/webm, video/ogg, video/x-m4v"
                     multiple
                 >
+                    <template #file="{ file }">
+                        <div class="u-upload-item" @click.stop="handlePictureCardPreview(file)">
+                            <img v-if="!isVideoFile(file)" class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                            <div v-else class="u-upload-video">
+                                <video class="u-upload-video__player" :src="file.url" muted preload="metadata"></video>
+                                <i class="el-icon-video-play u-upload-video__icon"></i>
+                            </div>
+                        </div>
+                    </template>
                     <i class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
-                <el-dialog v-model="dialogVisible">
-                    <img width="100%" :src="dialogImageUrl" alt="" />
+                <el-dialog v-model="dialogVisible" class="m-media-preview">
+                    <video
+                        v-if="dialogFileType === 'video'"
+                        class="u-preview-video"
+                        :src="dialogImageUrl"
+                        controls
+                        :autoplay="false"
+                    ></video>
+                    <img v-else width="100%" :src="dialogImageUrl" alt="" />
                 </el-dialog>
             </div>
             <div class="m-feedback-visible">
                 <span class="u-label">是否公开：</span>
-                <el-checkbox class="u-checkbox" :true-value="1" :fasle-value="0" v-model="form.public"></el-checkbox>
+                <el-checkbox class="u-checkbox" :true-value="1" :false-value="0" v-model="form.public"></el-checkbox>
                 <!-- <el-tooltip v-show="!canSubmit" content="必须先填写类型，子类和内容">
                     <i class="el-icon-question"></i>
                 </el-tooltip> -->
@@ -104,6 +121,7 @@ export default {
             uploadedMap: {},
             loading: false,
             dialogImageUrl: "",
+            dialogFileType: "image",
             dialogVisible: false,
         };
     },
@@ -119,7 +137,38 @@ export default {
         },
     },
     methods: {
+        isVideoFile(file) {
+            const type = file?.raw?.type || file?.type || "";
+            if (type.startsWith("video/")) return true;
+            return this.isVideoUrl(file?.url || file?.response?.data?.[0] || "");
+        },
+        isVideoUrl(url) {
+            return /\.(mp4|mov|m4v|webm|ogg)(\?.*)?$/i.test(url || "");
+        },
+        validateFile(file) {
+            const raw = file?.raw || file;
+            const type = raw?.type || "";
+            const size = raw?.size || 0;
+            const isImage = type.startsWith("image/");
+            const isVideo = type.startsWith("video/");
+
+            if (!isImage && !isVideo) {
+                this.$message.warning("仅支持上传图片或视频文件");
+                return false;
+            }
+
+            if (size > 30 * 1024 * 1024) {
+                this.$message.warning("单个附件大小不能超过 30MB");
+                return false;
+            }
+
+            return true;
+        },
         change(file) {
+            if (!this.validateFile(file)) {
+                this.$refs.upload?.handleRemove(file);
+                return;
+            }
             if (file.status === "success" || this.uploadedMap[file.uid]) return;
             const fdata = new FormData();
             fdata.append("file", file.raw);
@@ -147,6 +196,7 @@ export default {
                     this.uploadedMap[file.uid] = imageUrl;
                     this.imgs = [...this.imgs, imageUrl];
                     file.url = imageUrl;
+                    file.name = file.name || imageUrl.split("/").pop();
                     file.status = "success";
                 })
                 .catch((err) => {
@@ -159,15 +209,16 @@ export default {
                     }
                 });
         },
-        // 图片上限
+        // 附件上限
         exceed: function () {
-            this.$message.warning(`上传的图片个数最多为${this.max}个`);
+            this.$message.warning(`上传的附件个数最多为${this.max}个`);
         },
         handlePictureCardPreview: function (file) {
             this.dialogImageUrl = file.url;
+            this.dialogFileType = this.isVideoFile(file) ? "video" : "image";
             this.dialogVisible = true;
         },
-        // 移除图片
+        // 移除附件
         remove: function (file) {
             const imageUrl = this.uploadedMap[file?.uid] || file?.response?.data?.[0] || file?.url;
             this.imgs = this.imgs.filter((img) => img !== imageUrl);
@@ -185,15 +236,23 @@ export default {
                 .then((res) => {
                     this.$message.success("提交成功");
                     this.$refs.upload.clearFiles();
-                    this.form = this.$options.data().form;
-                    this.imgs = [];
-                    this.uploadedMap = {};
+                    this.resetForm();
                 })
                 .finally(() => {
                     this.loading = false;
                 });
         },
+        resetForm() {
+            this.form = this.$options.data().form;
+            this.imgs = [];
+            this.uploadedMap = {};
+        },
         addFile(file) {
+            if (!this.validateFile(file)) return false;
+            if ((this.$refs.upload?.uploadFiles?.length || 0) >= this.max) {
+                this.exceed();
+                return false;
+            }
             this.$refs.upload.handleStart(file);
             return false;
         },
@@ -233,16 +292,52 @@ export default {
         .mt(20px);
         // .mb(10px);
         .u-upload {
+            .el-upload-list {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+            }
             .el-upload--picture-card,
             .el-upload-list__item {
-                height: 40px;
-                width: 40px;
-                line-height: 40px;
+                height: 72px;
+                width: 72px;
+                line-height: 72px;
             }
             .el-icon-plus {
                 .fz(16px);
             }
         }
+        .u-attachment-tip {
+            color: #909399;
+            .fz(12px, 1.6);
+            .mb(8px);
+        }
+        .u-upload-item {
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+            overflow: hidden;
+        }
+        .u-upload-video {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background: #111;
+            &__player {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+            &__icon {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                color: #fff;
+                .fz(20px);
+                transform: translate(-50%, -50%);
+                text-shadow: 0 2px 8px rgb(0 0 0 / 35%);
+            }
+        }
     }
     .m-public {
         .mb(10px);
@@ -275,14 +370,31 @@ export default {
     padding-left: 40px;
     padding-right: 40px;
 }
+.m-media-preview {
+    .u-preview-video {
+        width: 100%;
+        max-height: 70vh;
+        background: #000;
+    }
+}
 
 @media screen and (max-width: @phone) {
     .m-add-feedback {
-    .type-box {
-        .el-form-item {
-            margin-bottom: 10px;
+        .type-box {
+            .el-form-item {
+                margin-bottom: 10px;
+            }
+        }
+        .m-feedback-actions {
+            .u-upload {
+                .el-upload--picture-card,
+                .el-upload-list__item {
+                    height: 64px;
+                    width: 64px;
+                    line-height: 64px;
+                }
+            }
         }
     }
 }
-}
 </style>

src/components/dashboard/feedback/single.vue

@@ -126,14 +126,31 @@
                     </div>
                 </div>
                 <div class="m-attachment m-textarea">
-                    <el-divider content-position="left"
-                        ><i class="el-icon-picture-outline-round"></i> 附件截图</el-divider
-                    >
-                    <div class="u-detail">
-                        <div class="u-img" v-for="(img, index) in data.images" :key="index">
-                            <el-image :src="img" lazy :preview-src-list="data.images"></el-image>
+                    <el-divider content-position="left"><i class="el-icon-picture-outline-round"></i> 附件内容</el-divider>
+                    <div v-if="attachments.length" class="u-detail">
+                        <div class="u-attachment-summary">
+                            共 {{ attachments.length }} 个附件
+                            <span v-if="imageAttachments.length || videoAttachments.length">
+                                <span v-if="imageAttachments.length">，图片 {{ imageAttachments.length }} 张</span>
+                                <span v-if="videoAttachments.length">，视频 {{ videoAttachments.length }} 个</span>
+                            </span>
+                        </div>
+                        <div class="u-media-grid">
+                            <div class="u-media-card is-image" v-for="(img, index) in imageAttachments" :key="`img-${index}`">
+                                <el-image :src="img" fit="cover" lazy :preview-src-list="imageAttachments"></el-image>
+                                <div class="u-media-meta">图片 {{ index + 1 }}</div>
+                            </div>
+                            <div
+                                class="u-media-card is-video"
+                                v-for="(video, index) in videoAttachments"
+                                :key="`video-${index}`"
+                            >
+                                <video class="u-media-video" :src="video" controls preload="metadata" :autoplay="false"></video>
+                                <div class="u-media-meta">视频 {{ index + 1 }}</div>
+                            </div>
                         </div>
                     </div>
+                    <el-empty v-else description="暂无附件"></el-empty>
                 </div>
                 <div class="m-feedback-thx">
                     <el-divider content-position="left"
@@ -364,6 +381,15 @@ export default {
         client() {
             return __clients[this.data.client];
         },
+        attachments() {
+            return Array.isArray(this.data?.images) ? this.data.images.filter(Boolean) : [];
+        },
+        imageAttachments() {
+            return this.attachments.filter((item) => !this.isVideoUrl(item));
+        },
+        videoAttachments() {
+            return this.attachments.filter((item) => this.isVideoUrl(item));
+        },
     },
     watch: {
         id: {
@@ -466,6 +492,7 @@ export default {
                 this.loading = true;
                 let res = await getFeedback(this.id);
                 this.data = res.data.data;
+                this.data.images = Array.isArray(this.data.images) ? this.data.images : [];
                 this.data.content = this.data.content.replace(/\n/g, "<br>");
                 this.done = true;
             } catch (e) {
@@ -509,6 +536,9 @@ export default {
         sanitizedHTML(html) {
             return DOMPurify.sanitize(html);
         },
+        isVideoUrl(url) {
+            return /\.(mp4|mov|m4v|webm|ogg)(\?.*)?$/i.test(url || "");
+        },
 
         // 打赏相关
         onThx() {