feat: 新增视频组件及配置功能

- 在 config.js 中添加视频类型配置，支持视频上传和样式设置。
- 创建 video-config.vue 组件，提供视频内容和样式的配置选项。
- 更新 decorate.vue 以支持视频类型的渲染和配置。

manager/src/views/page-decoration/wap/config.js

@@ -660,5 +660,45 @@ export const modelData = [
     options: {
       list: []
     }
+  },
+  {
+    type: "video",
+    name: "视频",
+    img: "md-image",
+    notAdd: true,
+    notImg: true,
+    notLink: true,
+    notTitle: true,
+    options: {
+      list: [
+        {
+          videoUrl: "",
+          poster: "",
+          autoplay: false,
+          aspectRatio: "16:9",
+          style: {
+            bgType: "color",
+            bgColorStart: "#F5F5F5",
+            bgColorEnd: "#F5F5F5",
+            bgGradientDir: "horizontal",
+            bgRadius: 0,
+            bottomBgColor: "#F5F5F5",
+            bgImage: "",
+            margin: 0,
+            padding: 0,
+            borderShow: false,
+            borderStyle: "solid",
+            borderWidth: 1,
+            borderColor: "#e5e5e5",
+            shadowShow: false,
+            shadowColor: "rgba(0,0,0,0.1)",
+            shadowX: 0,
+            shadowY: 0,
+            shadowBlur: 10,
+            shadowSpread: 0,
+          },
+        },
+      ],
+    }
   }
 ];

manager/src/views/page-decoration/wap/decorate.scss

@@ -51,15 +51,15 @@
   width: 100%;
   display: flex;
   flex-wrap: wrap;
+  gap: 14px;
 
   >.drawer-item {
     cursor: pointer;
     border: 1px solid #ededed;
     background: #f9f0ff;
-    width: 170px;
+    width: calc(50% - 7px);
-    margin-right: 14px;
+    box-sizing: border-box;
     color: #9254de;
-    margin-bottom: 14px;
     border-radius: 0.8em;
     height: 60px;
     display: flex;

manager/src/views/page-decoration/wap/decorate.vue

@@ -107,7 +107,7 @@
         v-for="(item, index) in res.options.list"
         :key="index"
       >
-        <div class="decorate-item-title">
+        <div class="decorate-item-title" v-if="res.type != 'video'">
           <div>卡片</div>
           <el-icon
             v-if="res.close || res.type == 'promotionDetail'"
@@ -373,6 +373,13 @@
             </div>
           </div>
 
+          <!-- 视频楼层配置 -->
+          <video-config
+            v-if="res.type == 'video'"
+            :item="item"
+            @select-file="(field) => handleClickFile(item, index, field)"
+          />
+
           <!-- 填写链接 -->
 
           <div class="decorate-view" v-if="res.onlyImg">
@@ -531,12 +538,14 @@ import { modelData } from "./config";
 import hotzone from "@/components/hotzone";
 import ways from "@/components/lili-dialog/wap.js";
 import categoryTemplate from "@/components/lili-dialog/template/category";
+import VideoConfig from "./video-config";
 export default {
   components: {
     ossManage,
     hotzone,
     categoryTemplate,
     CircleClose,
+    VideoConfig,
   },
   data() {
     return {
@@ -556,6 +565,7 @@ export default {
       enableSelectCategory: false, //商品是否绑定分类
       pendingCategory: null, // 选择分类弹窗草稿
       goodsSelectedIndex: 0, //绑定商品分类的索引
+      pictureField: "img", //图片选择器回写的字段
     };
   },
   watch: {
@@ -800,16 +810,30 @@ export default {
     callbackSelected(val) {
       this.picModelFlag = false;
       if (!val?.url) return;
-      this.selectedGoods.img = val.url;
+      if (this.pictureField === "bgImage") {
+        if (!this.selectedGoods.style) {
+          this.selectedGoods.style = {};
+        }
+        this.selectedGoods.style.bgImage = val.url;
+        return;
+      }
+      this.selectedGoods[this.pictureField] = val.url;
     },
     // 点击选择图片
-    handleClickFile(item, index) {
+    handleClickFile(item, index, field = "img") {
+      this.pictureField = field;
       this.selectedGoods = item;
       this.picModelFlag = true;
       this.$nextTick(() => {
-        if (this.$refs.ossManage) {
+        const oss = this.$refs.ossManage;
-          this.$refs.ossManage.selectImage = true;
+        if (!oss) return;
+        oss.selectImage = true;
+        if (field === "videoUrl") {
+          oss.fileType = "video";
+        } else {
+          oss.fileType = "pic";
         }
+        oss.changeFileType();
       });
     },
     removeNotice(index) {

manager/src/views/page-decoration/wap/template/index.js

@@ -19,6 +19,7 @@ import tpl_group from "./tpl_group";
 import tpl_ad_list from "./tpl_view_list";
 import tpl_activity_list from './tpl_view_list';
 // import tpl_hot_area from './tpl_hot_area';
+import tpl_video from "./tpl_video";
 import tpl_goods from "./tpl_goods";
 import tpl_notice from "./tpl_notice";
 import tpl_promotions from "./tpl_promotions";
@@ -45,6 +46,7 @@ export default {
   spike: tpl_spike,
   group: tpl_group,
   // hotArea: tpl_hot_area,
+  video: tpl_video,
   tpl_ad_list,
   promotions: tpl_promotions,
   tpl_activity_list,

manager/src/views/page-decoration/wap/template/tpl_hot_area.vue

@@ -2,7 +2,7 @@
   <div class="layout">
     <div class="hot-area">
       <!-- <img :src="res.list[0].img" alt="" /> -->
-      <hotzone @change="changeHotzone" :zonesInit="res.zoneInfo" :image="res.list[0].img"></hotzone>
+      <hotzone @change="changeHotzone" :zonesInit="res.list[0].zoneInfo" :image="res.list[0].img"></hotzone>
     </div>
   </div>
 </template>
@@ -16,10 +16,7 @@ export default {
   props: ["res"],
   methods: {
     changeHotzone(info) {
-      console.log(info);
+      this.res.list[0].zoneInfo = info;
-      console.log(this.res);
-      this.res.zoneInfo = info;
-      // this.$emit("change", res);
     },
   },
 };

manager/src/views/page-decoration/wap/template/tpl_join_group.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="layout">
-    <div class="join-list">
-      <div class="join-title">
-        <div>{{ res.list[0].title }}</div>
-
-        <div>更多</div>
-      </div>
-      <div class="join-box">
-        <div class="join-item" v-for="item in 4" :key="item">
-          <div class="item-img-box">
-            <img
-              class="item-img"
-              src="https://picsum.photos/id/268/200/200"
-              alt
-            />
-            <div class="item-position-tips">2人团</div>
-          </div>
-          <div class="item-price">
-            <span>￥120.00</span>
-          </div>
-          <div class="item-line-through">
-            <span>￥120.00</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: ["res"]
-};
-</script>
-<style lang="scss" scoped>
-@import "./tpl.scss";
-.join-box {
-  display: flex;
-}
-.item-price {
-  > span {
-    font-size: 15px;
-    font-weight: 500;
-    color: #e1212b;
-  }
-}
-.join-item {
-  flex: 1;
-}
-.item-img {
-  width: 75px;
-  height: 75px;
-  margin: 0 auto;
-  display: block;
-}
-.item-img-box {
-  position: relative;
-}
-.item-line-through {
-  > span {
-    font-size: 10px;
-    font-weight: 400;
-    text-decoration: line-through;
-    color: #999;
-  }
-}
-.item-position-tips {
-  position: absolute;
-  right: 0;
-  color: #fff;
-  font-size: 12px;
-  bottom: 0;
-}
-.join-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: #fff;
-  height: 50px;
-  > div:nth-of-type(1) {
-    font-size: 16px;
-    font-weight: bold;
-  }
-  > div:nth-of-type(2) {
-    font-size: 12px;
-    color: #999;
-  }
-}
-</style>

manager/src/views/page-decoration/wap/template/tpl_video.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="layout" :style="wrapperStyle">
+    <div class="video-shell" :style="boxStyle">
+      <div
+        class="video-ratio"
+        :style="{ paddingBottom: aspectPadding + '%' }"
+      >
+        <div class="video-ratio-inner">
+          <video
+            v-if="item.videoUrl"
+            class="video-media"
+            :src="item.videoUrl"
+            :poster="item.poster"
+            muted
+          />
+          <template v-else>
+            <img
+              v-if="item.poster"
+              class="video-media"
+              :src="item.poster"
+              alt=""
+            />
+            <div v-else class="video-placeholder">视频楼层</div>
+          </template>
+          <div class="play-icon">▶</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  ensureVideoItem,
+  getVideoWrapperStyle,
+  getVideoBoxStyle,
+  getAspectPadding,
+} from "../video-style";
+
+export default {
+  props: ["res"],
+  computed: {
+    item() {
+      const data = this.res.list[0] || {};
+      ensureVideoItem(data);
+      return data;
+    },
+    wrapperStyle() {
+      return getVideoWrapperStyle(this.item);
+    },
+    boxStyle() {
+      return getVideoBoxStyle(this.item);
+    },
+    aspectPadding() {
+      return getAspectPadding(this.item.aspectRatio);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.layout {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+}
+
+.video-shell {
+  width: 100%;
+}
+
+.video-ratio {
+  width: 100%;
+  height: 0;
+  position: relative;
+}
+
+.video-ratio-inner {
+  position: absolute;
+  inset: 0;
+}
+
+.video-media {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  background: #000;
+}
+
+.video-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 14px;
+  background: #f5f5f5;
+}
+
+.play-icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  border-radius: 50%;
+  font-size: 18px;
+  pointer-events: none;
+}
+</style>

manager/src/views/page-decoration/wap/video-config.vue

@@ -0,0 +1,392 @@
+<template>
+  <div class="video-config">
+    <el-tabs v-model="activeTab" class="video-config-tabs">
+      <el-tab-pane label="内容设置" name="content">
+        <div class="video-config-section-title">内容设置</div>
+
+        <div class="video-config-row">
+          <div class="video-config-label">上传视频</div>
+          <div
+            class="video-upload-box"
+            @click="$emit('select-file', 'videoUrl')"
+          >
+            <video
+              v-if="item.videoUrl"
+              class="video-upload-preview"
+              :src="item.videoUrl"
+              muted
+            />
+            <el-icon v-else class="video-upload-plus" :size="28">
+              <Plus />
+            </el-icon>
+          </div>
+        </div>
+
+        <div class="video-config-row">
+          <div class="video-config-label">视频封面</div>
+          <div
+            class="video-upload-box"
+            @click="$emit('select-file', 'poster')"
+          >
+            <img
+              v-if="item.poster"
+              class="video-upload-preview"
+              :src="item.poster"
+              alt=""
+            />
+            <el-icon v-else class="video-upload-plus" :size="28">
+              <Plus />
+            </el-icon>
+          </div>
+        </div>
+
+        <div class="video-config-row">
+          <div class="video-config-label">视频比例</div>
+          <el-radio-group v-model="item.aspectRatio" class="video-ratio-group">
+            <el-radio value="16:9">16:9</el-radio>
+            <el-radio value="4:3">4:3</el-radio>
+            <el-radio value="1:1">1:1</el-radio>
+          </el-radio-group>
+        </div>
+
+        <div class="video-config-row">
+          <div class="video-config-label">自动播放</div>
+          <el-switch v-model="item.autoplay" />
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="样式设置" name="style">
+        <div class="video-config-section-title">通用样式</div>
+
+        <div class="video-config-block">
+          <div class="video-config-block-title">背景设置</div>
+          <div class="video-config-row">
+            <el-radio-group v-model="item.style.bgType">
+              <el-radio value="color">颜色</el-radio>
+              <el-radio value="image">图片</el-radio>
+            </el-radio-group>
+          </div>
+
+          <template v-if="item.style.bgType === 'color'">
+            <div class="video-config-row">
+              <div class="video-config-label">背景颜色</div>
+              <div class="video-color-pair">
+                <el-color-picker v-model="item.style.bgColorStart" />
+                <el-color-picker v-model="item.style.bgColorEnd" />
+                <el-button link type="primary" @click="resetBgColors">重置</el-button>
+              </div>
+            </div>
+            <div class="video-config-row">
+              <div class="video-config-label">渐变方向</div>
+              <el-radio-group v-model="item.style.bgGradientDir">
+                <el-radio value="horizontal">横向</el-radio>
+                <el-radio value="vertical">纵向</el-radio>
+                <el-radio value="skewLeft">左斜</el-radio>
+                <el-radio value="skewRight">右斜</el-radio>
+              </el-radio-group>
+            </div>
+          </template>
+
+          <template v-else>
+            <div class="video-config-row">
+              <div class="video-config-label">背景图片</div>
+              <div
+                class="video-upload-box video-upload-box--small"
+                @click="$emit('select-file', 'bgImage')"
+              >
+                <img
+                  v-if="item.style.bgImage"
+                  class="video-upload-preview"
+                  :src="item.style.bgImage"
+                  alt=""
+                />
+                <el-icon v-else class="video-upload-plus" :size="24">
+                  <Plus />
+                </el-icon>
+              </div>
+            </div>
+          </template>
+
+          <div class="video-config-row">
+            <div class="video-config-label">背景圆角</div>
+            <el-slider
+              v-model="item.style.bgRadius"
+              :min="0"
+              :max="40"
+              show-input
+              :show-input-controls="false"
+            />
+          </div>
+
+          <div class="video-config-row">
+            <div class="video-config-label">底部背景</div>
+            <div class="video-color-pair">
+              <el-color-picker v-model="item.style.bottomBgColor" />
+              <el-button link type="primary" @click="item.style.bottomBgColor = '#F5F5F5'">
+                重置
+              </el-button>
+            </div>
+          </div>
+        </div>
+
+        <div class="video-config-block">
+          <div class="video-config-row">
+            <div class="video-config-label">外边距</div>
+            <el-slider
+              v-model="item.style.margin"
+              :min="0"
+              :max="40"
+              show-input
+              :show-input-controls="false"
+            />
+          </div>
+          <div class="video-config-row">
+            <div class="video-config-label">内边距</div>
+            <el-slider
+              v-model="item.style.padding"
+              :min="0"
+              :max="40"
+              show-input
+              :show-input-controls="false"
+            />
+          </div>
+        </div>
+
+        <div class="video-config-block">
+          <div class="video-config-block-title">边框设置</div>
+          <div class="video-config-row">
+            <el-radio-group v-model="item.style.borderShow">
+              <el-radio :value="false">隐藏</el-radio>
+              <el-radio :value="true">显示</el-radio>
+            </el-radio-group>
+          </div>
+          <template v-if="item.style.borderShow">
+            <div class="video-config-row">
+              <div class="video-config-label">边框样式</div>
+              <el-radio-group v-model="item.style.borderStyle">
+                <el-radio value="solid">实线</el-radio>
+                <el-radio value="dashed">虚线</el-radio>
+                <el-radio value="dotted">点状</el-radio>
+              </el-radio-group>
+            </div>
+            <div class="video-config-row">
+              <div class="video-config-label">边框粗细</div>
+              <el-slider
+                v-model="item.style.borderWidth"
+                :min="1"
+                :max="10"
+                show-input
+                :show-input-controls="false"
+              />
+            </div>
+            <div class="video-config-row">
+              <div class="video-config-label">边框颜色</div>
+              <div class="video-color-pair">
+                <el-color-picker v-model="item.style.borderColor" />
+                <el-button link type="primary" @click="item.style.borderColor = '#e5e5e5'">
+                  重置
+                </el-button>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <div class="video-config-block">
+          <div class="video-config-block-title">阴影设置</div>
+          <div class="video-config-row">
+            <el-radio-group v-model="item.style.shadowShow">
+              <el-radio :value="false">隐藏</el-radio>
+              <el-radio :value="true">显示</el-radio>
+            </el-radio-group>
+          </div>
+          <template v-if="item.style.shadowShow">
+            <div class="video-config-row">
+              <div class="video-config-label">阴影颜色</div>
+              <div class="video-color-pair">
+                <el-color-picker v-model="item.style.shadowColor" show-alpha />
+                <el-button
+                  link
+                  type="primary"
+                  @click="item.style.shadowColor = 'rgba(0,0,0,0.1)'"
+                >
+                  重置
+                </el-button>
+              </div>
+            </div>
+            <div class="video-config-row">
+              <div class="video-config-label">X轴偏移</div>
+              <el-slider
+                v-model="item.style.shadowX"
+                :min="-20"
+                :max="20"
+                show-input
+                :show-input-controls="false"
+              />
+            </div>
+            <div class="video-config-row">
+              <div class="video-config-label">Y轴偏移</div>
+              <el-slider
+                v-model="item.style.shadowY"
+                :min="-20"
+                :max="20"
+                show-input
+                :show-input-controls="false"
+              />
+            </div>
+            <div class="video-config-row">
+              <div class="video-config-label">模糊半径</div>
+              <el-slider
+                v-model="item.style.shadowBlur"
+                :min="0"
+                :max="40"
+                show-input
+                :show-input-controls="false"
+              />
+            </div>
+            <div class="video-config-row">
+              <div class="video-config-label">扩展半径</div>
+              <el-slider
+                v-model="item.style.shadowSpread"
+                :min="0"
+                :max="40"
+                show-input
+                :show-input-controls="false"
+              />
+            </div>
+          </template>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { Plus } from "@element-plus/icons-vue";
+import { ensureVideoItem } from "./video-style";
+
+export default {
+  name: "VideoConfig",
+  components: { Plus },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["select-file"],
+  data() {
+    return {
+      activeTab: "content",
+    };
+  },
+  created() {
+    ensureVideoItem(this.item);
+  },
+  watch: {
+    item: {
+      handler(val) {
+        if (val) ensureVideoItem(val);
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    resetBgColors() {
+      this.item.style.bgColorStart = "#F5F5F5";
+      this.item.style.bgColorEnd = "#F5F5F5";
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.video-config-tabs {
+  :deep(.el-tabs__header) {
+    margin-bottom: 16px;
+  }
+}
+
+.video-config-section-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.video-config-block {
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.video-config-block-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.video-config-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  gap: 12px;
+}
+
+.video-config-label {
+  width: 72px;
+  flex-shrink: 0;
+  line-height: 32px;
+  color: #606266;
+  font-size: 13px;
+}
+
+.video-upload-box {
+  width: 88px;
+  height: 88px;
+  border: 1px dashed #dcdfe6;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  overflow: hidden;
+  background: #fafafa;
+
+  &:hover {
+    border-color: #409eff;
+  }
+}
+
+.video-upload-box--small {
+  width: 72px;
+  height: 72px;
+}
+
+.video-upload-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.video-upload-plus {
+  color: #c0c4cc;
+}
+
+.video-ratio-group {
+  flex: 1;
+  padding-top: 6px;
+}
+
+.video-color-pair {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+:deep(.el-slider) {
+  flex: 1;
+  min-width: 0;
+}
+</style>

manager/src/views/page-decoration/wap/video-style.js

@@ -0,0 +1,102 @@
+export const DEFAULT_VIDEO_STYLE = {
+  bgType: "color",
+  bgColorStart: "#F5F5F5",
+  bgColorEnd: "#F5F5F5",
+  bgGradientDir: "horizontal",
+  bgRadius: 0,
+  bottomBgColor: "#F5F5F5",
+  bgImage: "",
+  margin: 0,
+  padding: 0,
+  borderShow: false,
+  borderStyle: "solid",
+  borderWidth: 1,
+  borderColor: "#e5e5e5",
+  shadowShow: false,
+  shadowColor: "rgba(0,0,0,0.1)",
+  shadowX: 0,
+  shadowY: 0,
+  shadowBlur: 10,
+  shadowSpread: 0,
+};
+
+export const ASPECT_RATIO_MAP = {
+  "16:9": 56.25,
+  "4:3": 75,
+  "1:1": 100,
+};
+
+export function ensureVideoItem(item) {
+  if (!item.aspectRatio) item.aspectRatio = "16:9";
+  if (!item.style) {
+    item.style = { ...DEFAULT_VIDEO_STYLE };
+    return;
+  }
+  Object.keys(DEFAULT_VIDEO_STYLE).forEach((key) => {
+    if (item.style[key] === undefined) {
+      item.style[key] = DEFAULT_VIDEO_STYLE[key];
+    }
+  });
+}
+
+export function getVideoGradient(style) {
+  const start = style.bgColorStart || "#F5F5F5";
+  const end = style.bgColorEnd || start;
+  const colors = `${start}, ${end}`;
+  const dirMap = {
+    horizontal: `linear-gradient(to right, ${colors})`,
+    vertical: `linear-gradient(to bottom, ${colors})`,
+    skewLeft: `linear-gradient(135deg, ${colors})`,
+    skewRight: `linear-gradient(45deg, ${colors})`,
+  };
+  return dirMap[style.bgGradientDir] || dirMap.horizontal;
+}
+
+export function getVideoWrapperStyle(item) {
+  ensureVideoItem(item);
+  const style = item.style;
+  const wrapper = {
+    margin: `${style.margin || 0}px`,
+    padding: `${style.padding || 0}px`,
+    background: style.bottomBgColor || "#F5F5F5",
+    boxSizing: "border-box",
+  };
+  return wrapper;
+}
+
+export function getVideoBoxStyle(item) {
+  ensureVideoItem(item);
+  const style = item.style;
+  const box = {
+    borderRadius: `${style.bgRadius || 0}px`,
+    overflow: "hidden",
+    position: "relative",
+    width: "100%",
+  };
+
+  if (style.bgType === "image" && style.bgImage) {
+    box.backgroundImage = `url(${style.bgImage})`;
+    box.backgroundSize = "cover";
+    box.backgroundPosition = "center";
+  } else {
+    box.background = getVideoGradient(style);
+  }
+
+  if (style.borderShow) {
+    box.border = `${style.borderWidth || 1}px ${style.borderStyle || "solid"} ${
+      style.borderColor || "#e5e5e5"
+    }`;
+  }
+
+  if (style.shadowShow) {
+    box.boxShadow = `${style.shadowX || 0}px ${style.shadowY || 0}px ${
+      style.shadowBlur || 10
+    }px ${style.shadowSpread || 0}px ${style.shadowColor || "rgba(0,0,0,0.1)"}`;
+  }
+
+  return box;
+}
+
+export function getAspectPadding(ratio) {
+  return ASPECT_RATIO_MAP[ratio] || ASPECT_RATIO_MAP["16:9"];
+}

manager/src/views/sys/oss-manage/ossManage.scss

@@ -140,7 +140,7 @@
     height: 100%;
     box-sizing: border-box;
     border-right: 1px solid #e5e6eb;
-    padding: 16px 0 24px;
+    padding: 20px 12px 28px;
   }
   .pic-list {
     height: 100%;
@@ -172,11 +172,21 @@
         overflow: hidden;
         box-sizing: border-box;
         position: relative;
-        img {
+        img,
+        .card-media {
           width: 100%;
           height: 100%;
           object-fit: cover;
         }
+        .card-file {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #f5f7fa;
+          color: #909399;
+        }
         .card-checkbox {
           position: absolute;
           top: 8px;

manager/src/views/sys/oss-manage/ossManage.vue

@@ -2,9 +2,9 @@
 @import "./ossManage.scss";
 
 .group-row {
-  padding-top: 10px;
+  padding-top: 16px;
+  margin-top: 8px;
   border-top: 1px solid #ededed;
-  margin-top: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,28 +54,60 @@
   margin-bottom: 16px;
 }
 
+.oss-group-tree {
+  padding: 4px 8px 0;
+
+  :deep(.el-tree-node__expand-icon) {
+    display: none;
+  }
+
+  :deep(.el-tree-node) {
+    margin-bottom: 6px;
+  }
+
+  :deep(.el-tree-node__content) {
+    padding: 0 10px !important;
+    height: 42px;
+    border-radius: 6px;
+    font-size: 15px;
+    line-height: 42px;
+  }
+
+  :deep(.el-tree-node__content:hover) {
+    background: #f5f7fa;
+  }
+
+  :deep(.el-tree-node.is-current > .el-tree-node__content) {
+    background: #ecf5ff;
+    color: #409eff;
+    font-weight: 500;
+  }
+}
+
 .oss-tree-node {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding-right: 8px;
+  padding-right: 4px;
+  font-size: 15px;
 }
 
 .oss-tree-more {
   cursor: pointer;
   color: #909399;
   padding: 0 4px;
+  font-size: 16px;
 }
 
-.oss-manage-date-popper {
+.category-tabs-card {
-  z-index: 4000 !important;
+  margin-bottom: 0;
 }
 
 </style>
 <template>
   <div class="search">
-    <el-card class="tabs-card">
+    <el-card v-if="!isComponent" class="tabs-card">
       <el-tabs v-model="activeRoleTab" @tab-change="handleRoleTabChange">
         <el-tab-pane label="管理员" name="MANAGER" />
         <el-tab-pane label="商家" name="STORE" />
@@ -83,48 +115,28 @@
         <el-tab-pane label="客服" name="CUSTOMER" />
       </el-tabs>
     </el-card>
+    <el-card class="tabs-card category-tabs-card">
+      <el-tabs v-model="activeCategoryTab" @tab-change="handleCategoryTabChange">
+        <el-tab-pane label="图片" name="IMAGE" />
+        <el-tab-pane label="视频" name="VIDEO" />
+        <el-tab-pane label="文件" name="FILE" />
+      </el-tabs>
+    </el-card>
     <el-row>
       <el-card>
         <div>
-          <div class="operation">
-            <el-row @keyup.enter="handleSearch">
-              <el-form
-                ref="searchForm"
-                label-width="85px"
-                :model="searchForm"
-                class="search-form"
-                inline
-              >
-                <el-form-item label="上传时间">
-                  <el-date-picker
-                    v-model="selectDate"
-                    clearable
-                    teleported
-                    popper-class="oss-manage-date-popper"
-                    value-format="YYYY-MM-DD"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期"
-                    style="width: 240px"
-                    type="daterange"
-                    @change="selectDateRange"
-                  />
-                </el-form-item>
-                <el-form-item>
-                  <el-button class="search-btn" type="primary" @click="handleSearch">搜索</el-button>
-                </el-form-item>
-              </el-form>
-            </el-row>
-          </div>
           <el-row class="oss-manage-box">
             <el-col v-if="canShowGroups" :span="isComponent ? 5 : 4">
               <div class="file-list">
                 <div class="article-category mr_10">
                   <el-tree
+                    :key="treeRenderKey"
                     :data="treeData"
                     node-key="value"
                     :props="{ label: 'title', children: 'children' }"
+                    :indent="0"
                     highlight-current
-                    class="demo-tree-render"
+                    class="demo-tree-render oss-group-tree"
                     @node-click="handleTreeNodeClick"
                   >
                     <template #default="{ data }">
@@ -195,7 +207,16 @@
                             class="card-checkbox"
                             @click.stop
                           />
-                          <img :src="item.url" alt="" />
+                          <img v-if="isImageFile(item)" :src="item.url" alt="" />
+                          <video
+                            v-else-if="isVideoFile(item)"
+                            class="card-media"
+                            :src="item.url"
+                            muted
+                          />
+                          <div v-else class="card-file">
+                            <el-icon :size="28"><Document /></el-icon>
+                          </div>
                           <div v-if="item.isShowPreview" class="preview">
                             <div @click.prevent="download(item)">
                               <el-tooltip content="下载" placement="top">
@@ -207,7 +228,11 @@
                                 <el-icon :size="18"><Delete /></el-icon>
                               </el-tooltip>
                             </div>
-                            <div @click.prevent="showPic(item)">
+                            <div
+                              @click.prevent="
+                                isVideoFile(item) ? showVideo(item) : showPic(item)
+                              "
+                            >
                               <el-tooltip content="预览" placement="top">
                                 <el-icon :size="22"><View /></el-icon>
                               </el-tooltip>
@@ -459,15 +484,6 @@
         :model="groupFormValidate"
         :rules="groupRuleValidate"
       >
-        <el-form-item label="所在分组" prop="id">
-          <el-cascader
-            v-model="defaultValue"
-            :options="treeData"
-            :props="{ value: 'value', label: 'label', children: 'children', checkStrictly: true }"
-            style="width: 100%"
-            @change="treeDataChange"
-          />
-        </el-form-item>
         <el-form-item label="分组名称" prop="directoryName">
           <el-input v-model="groupFormValidate.directoryName" />
         </el-form-item>
@@ -481,7 +497,7 @@
 </template>
 
 <script>
-import { Delete, Download, View } from "@element-plus/icons-vue";
+import { Delete, Download, View, Document } from "@element-plus/icons-vue";
 import {
   addFileDirectory,
   deleteFile,
@@ -499,7 +515,7 @@ const config = require("@/config/index");
 let dp;
 export default {
   name: "oss-manage",
-  components: { Delete, Download, View },
+  components: { Delete, Download, View, Document },
   props: {
     isComponent: {
       default: false,
@@ -524,11 +540,11 @@ export default {
       config, // api地址
       fileDirectoryId: "",
       groupFormValidate: {
-        id: [],
+        id: "",
         level: 0,
+        parentId: "0",
         directoryName: "",
       },
-      defaultValue: [], // 默认分组id
       groupRuleValidate: {
         directoryName: [
           {
@@ -537,20 +553,12 @@ export default {
             trigger: "blur",
           },
         ],
-        id: [
-          {
-            required: true,
-            message: "请选择分组",
-            trigger: "blur",
-            type: "array",
-          },
-        ],
       },
       enableGroup: false, // 是否展示分组
       selectImage: false, //是否是选择
       accessToken: {}, // 上传token鉴权
       loading: false, // 表单加载状态
-      fileType: "all", // 文件类型
+      fileType: "pic", // 兼容外部调用：pic / video
       showType: "list", // 展示类型
       modalVisible: false, // 添加或编辑显示
       uploadVisible: false, // 上传展示
@@ -560,20 +568,19 @@ export default {
       videoTitle: "", // 视频title
       modalTitle: "", // 添加或编辑标题
       activeRoleTab: "MANAGER",
+      activeCategoryTab: "IMAGE",
       searchForm: {
         // 搜索框对应data对象
         name: "",
         fileKey: "",
         fileType: "",
+        fileCategory: "IMAGE",
         userEnums: "MANAGER",
         pageNumber: 1, // 当前页数
         pageSize: 20, // 页面大小
         sort: "createTime", // 默认排序字段
         order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
       },
-      selectDate: null, // 选择日期绑定modal
       oldKey: "", // 请求参数
       form: {
         // 表单
@@ -603,7 +610,7 @@ export default {
           width: 300,
           align: "center",
           render: (h, params) => {
-            if (params.row.fileType.includes("image") > 0) {
+            if (this.isImageFile(params.row)) {
               return h("img", {
                 attrs: {
                   src: params.row.url || "",
@@ -622,7 +629,7 @@ export default {
                   },
                 },
               });
-            } else if (params.row.fileType.includes("video") > 0) {
+            } else if (this.isVideoFile(params.row)) {
               // 如果视频文件大小超过5MB不予加载video
               if (params.row.fileSize < 1024 * 1024 * 5) {
                 return h(
@@ -804,7 +811,7 @@ export default {
           // width: 150,
           align: "center",
           render: (h, params) => {
-            if (params.row.fileType.includes("image") > 0) {
+            if (this.isImageFile(params.row)) {
               return h("img", {
                 attrs: {
                   src: params.row.url || "",
@@ -823,7 +830,7 @@ export default {
                   },
                 },
               });
-            } else if (params.row.fileType.includes("video") > 0) {
+            } else if (this.isVideoFile(params.row)) {
               // 如果视频文件大小超过5MB不予加载video
               if (params.row.fileSize < 1024 * 1024 * 5) {
                 return h(
@@ -933,6 +940,7 @@ export default {
       //树结构
       treeData: [],
       treeDataDefault: [],
+      treeRenderKey: 0,
       selectedGroupData: "",
       insertOrUpdate: "insert",
       groupLoading: false,
@@ -977,7 +985,15 @@ export default {
   },
   watch: {
     selectImage(val) {
-      if (val && !this.data.length) this.init();
+      if (val) {
+        if (this.isComponent) {
+          this.activeRoleTab = "MANAGER";
+          this.searchForm.userEnums = "MANAGER";
+          this.init();
+        } else if (!this.data.length) {
+          this.init();
+        }
+      }
     },
     choose(val) {
       if (val) this.selectImage = val
@@ -991,11 +1007,10 @@ export default {
     initialize(val) {
       if (val && this.isComponent) {
         this.selectedOss = [];
-      }
+        this.activeRoleTab = "MANAGER";
-    },
+        this.searchForm.userEnums = "MANAGER";
-    defaultValue(val) {
+        delete this.searchForm.fileDirectoryId;
-      if (val) {
+        this.selectedGroupData = "";
-        this.groupFormValidate.parentId = val;
       }
     },
   },
@@ -1054,13 +1069,24 @@ export default {
       this.searchForm.userEnums = name;
       delete this.searchForm.fileDirectoryId;
       this.selectedGroupData = "";
-      this.defaultValue = [];
+      this.groupFormValidate.id = "";
-      this.groupFormValidate.id = [];
       this.groupFormValidate.level = 0;
       this.selectedOss = [];
       this.updateTreeDataByRole();
       this.getDataList();
     },
+    handleCategoryTabChange(name) {
+      this.activeCategoryTab = name;
+      this.searchForm.fileCategory = name;
+      this.searchForm.fileType = "";
+      this.searchForm.pageNumber = 1;
+      if (this.showType === "list") {
+        this.searchForm.pageSize = 20;
+      } else {
+        this.searchForm.pageSize = 12;
+      }
+      this.getDataList();
+    },
     updateTreeDataByRole() {
       const currentTree = this.filterTreeByRole(this.treeDataDefault, this.activeRoleTab);
       this.treeData = [
@@ -1070,24 +1096,22 @@ export default {
           value: "0",
           type: this.activeRoleTab,
           level: 0,
-          children: currentTree,
+          children: [],
           id: "0",
           categoryId: 0,
         },
+        ...currentTree,
       ];
+      this.treeRenderKey += 1;
     },
     filterTreeByRole(tree = [], role) {
       if (!tree || !tree.length) return [];
-      return tree.reduce((arr, item) => {
+      return tree
-        const children = this.filterTreeByRole(item.children || [], role);
+        .filter((item) => item.type === role)
-        if (item.type === role || children.length) {
+        .map((item) => ({
-          arr.push({
+          ...item,
-            ...item,
+          children: [],
-            children,
+        }));
-          });
-        }
-        return arr;
-      }, []);
     },
     // 复选框值改变时触发
     selectOssChange(e) {
@@ -1190,11 +1214,10 @@ export default {
     handleContextMenuEdit(root, node, data) {
       this.insertOrUpdate = "update";
       this.enableGroup = true;
-      this.groupFormValidate.directoryName = data.label;
+      this.groupFormValidate.id = data.value;
-      this.groupFormValidate.id = [data.value];
+      this.groupFormValidate.directoryName = data.title || data.label;
-      this.groupFormValidate.level = data.level;
+      this.groupFormValidate.level = 0;
-      this.groupFormValidate.parentId = data.parentId;
+      this.groupFormValidate.parentId = "0";
-      this.defaultValue = [data.parentId];
     },
     // 删除分组
     async handleContextMenuDelete(val) {
@@ -1211,40 +1234,20 @@ export default {
         },
       });
     },
-    treeDataChange(value) {
-      if (value && value.length) {
-        this.groupFormValidate.id = value;
-        if (value[value.length - 1] == "0") {
-          this.groupFormValidate.level = 0;
-        } else {
-          const node = this.findTreeNodeByValue(this.treeData, value[value.length - 1]);
-          this.groupFormValidate.level = node ? Number(node.level) + 1 : 0;
-        }
-      }
-    },
-    findTreeNodeByValue(nodes, value) {
-      if (!nodes || !nodes.length) return null;
-      for (const node of nodes) {
-        if (String(node.value) === String(value)) return node;
-        const found = this.findTreeNodeByValue(node.children, value);
-        if (found) return found;
-      }
-      return null;
-    },
-    // 保存/修改分组
     async submitAddGroup() {
       this.$refs["formValidate"].validate(async (valid) => {
         if (valid) {
-          let res
+          let res;
-          const params = {...this.groupFormValidate};
+          const params = {
-          params.directoryType = (this.selectedGroupData && this.selectedGroupData.type) || this.activeRoleTab;
+            directoryName: this.groupFormValidate.directoryName,
+            level: 0,
+            parentId: "0",
+            directoryType: this.activeRoleTab,
+          };
           if (this.insertOrUpdate === "insert") {
-            params.parentId = params.id[params.id.length - 1];
-            delete params.id;
             res = await addFileDirectory(params);
           } else {
-            params.id = params.id[params.id.length - 1];
+            params.id = this.groupFormValidate.id;
-            params.parentId = params.parentId[params.parentId.length - 1];
             res = await updateFileDirectory(params);
           }
 
@@ -1259,16 +1262,15 @@ export default {
         }
       });
     },
-    // 添加/修改分组
     handleClickAddGroup() {
       this.insertOrUpdate = "insert";
-      if (this.selectedGroupData) {
+      this.groupFormValidate = {
-        this.groupFormValidate.id = [this.selectedGroupData.value];
+        id: "",
-      } else {
+        level: 0,
-        this.groupFormValidate.id = ["0"];
+        parentId: "0",
-      }
+        directoryName: "",
+      };
       this.enableGroup = true;
-      this.groupFormValidate.directoryName = "";
     },
     copyFileUrl(row) {
       const textArea = document.createElement("textarea");
@@ -1296,26 +1298,31 @@ export default {
         }
       });
     },
-    // 文件目录分类格式化方法
+    // 文件目录分类格式化：仅展示一级分组
     getTree(tree = []) {
-      let arr = [];
+      const flat = [];
-      if (!!tree && tree.length !== 0) {
+      const walk = (nodes) => {
-        tree.forEach((item) => {
+        if (!nodes || !nodes.length) return;
-          let obj = {};
+        nodes.forEach((item) => {
-          obj.title = item.directoryName;
+          flat.push({
-          obj.value = item.id; // 拥有者id
+            title: item.directoryName,
-          obj.type = item.directoryType; // 用户类型
+            value: item.id,
-          obj.label = item.directoryName;
+            type: item.directoryType,
-          obj.level = item.level;
+            label: item.directoryName,
-          obj.expand = false;
+            level: 0,
-          obj.selected = false;
+            expand: false,
-          obj.contextmenu = false;
+            selected: false,
-          obj.parentId = item.parentId;
+            contextmenu: false,
-          obj.children = this.getTree(item.children); // 递归调用
+            parentId: "0",
-          arr.push(obj);
+            children: [],
+          });
+          if (item.children && item.children.length) {
+            walk(item.children);
+          }
         });
-      }
+      };
-      return arr;
+      walk(tree);
+      return flat;
     },
 
     // 选择分类回调
@@ -1327,9 +1334,6 @@ export default {
         this.searchForm.fileDirectoryId = value;
         if (value === "0" || value === 0) {
           delete this.searchForm.fileDirectoryId;
-          this.groupFormValidate.level = 0;
-        } else {
-          this.groupFormValidate.level = Number(level) + 1;
         }
         this.searchForm.userEnums = type || this.activeRoleTab;
         this.getDataList();
@@ -1360,6 +1364,7 @@ export default {
         accessToken: this.getStore("accessToken"),
       };
       this.searchForm.userEnums = this.activeRoleTab;
+      this.searchForm.fileCategory = this.activeCategoryTab;
       this.getDataList();
       this.getAllList();
     },
@@ -1410,16 +1415,7 @@ export default {
       }
       this.getDataList();
     },
-    // 起止时间从新赋值
+    // 起止时间筛选已移除
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
-    },
     // 改变查看方式
     changeShowType() {
       this.searchForm.pageNumber = 1;
@@ -1438,35 +1434,41 @@ export default {
         this.pageSizeOpts = [12, 24, 48];
       }
       this.loading = true;
-      getFileListData(this.searchForm).then((res) => {
+      getFileListData(this.searchForm)
-        this.loading = false;
+        .then((res) => {
-
+          if (res && res.success && res.result) {
-        this.data = res.result.records;
+            this.data = res.result.records || [];
-        this.total = res.result.total;
+            this.total = res.result.total || 0;
-      });
+          } else {
+            this.data = [];
+            this.total = 0;
+          }
+        })
+        .catch(() => {
+          this.data = [];
+          this.total = 0;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-    // 搜索
+    // 兼容外部按场景切换分类（如装修选图/选视频）
-    handleSearch() {
-      this.searchForm.title = this.searchForm.name;
-      this.searchForm.pageNumber = 1;
-      if (this.showType == "list") {
-        this.searchForm.pageSize = 20;
-      } else {
-        this.searchForm.pageSize = 12;
-      }
-      this.getDataList();
-    },
-    // 文件类型筛选
     changeFileType() {
-      let name = this.fileType;
+      const categoryMap = {
-      if (name == "all") {
+        pic: "IMAGE",
-        this.searchForm.fileType = "";
+        video: "VIDEO",
-      } else if (name == "pic") {
+        file: "FILE",
-        this.searchForm.fileType = "image";
+        all: "IMAGE",
-      } else if (name == "video") {
+      };
-        this.searchForm.fileType = "video";
+      const category = categoryMap[this.fileType] || "IMAGE";
-      }
+      this.activeCategoryTab = category;
-      this.handleSearch();
+      this.handleCategoryTabChange(category);
+    },
+    isImageFile(row) {
+      return row?.fileCategory === "IMAGE" || (row?.fileType && row.fileType.includes("image"));
+    },
+    isVideoFile(row) {
+      return row?.fileCategory === "VIDEO" || (row?.fileType && row.fileType.includes("video"));
     },
     // 上传文件超过大小限制
     handleMaxSize() {

seller/public/config.js

@@ -3,10 +3,10 @@ var BASE = {
    * @description api请求基础路径
    */
   API_DEV: {
-    common: "https://common-api.pickmall.cn",
+    common: "http://127.0.0.1:8890",
-    buyer: "https://buyer-api.pickmall.cn",
+    buyer: "http://127.0.0.1:8888",
-    seller: "https://store-api.pickmall.cn",
+    seller: "http://127.0.0.1:8889",
-    manager: "https://admin-api.pickmall.cn",
+    manager: "http://127.0.0.1:8887",
   },
   API_PROD: {
     common: "https://common-api.pickmall.cn",

seller/src/views/shop/ossManages.vue

@@ -536,6 +536,7 @@ export default {
         name: "",
         fileKey: "",
         fileType: "",
+        fileCategory: "",
         userEnums: "STORE",
         pageNumber: 1, // 当前页数
         pageSize: 20, // 页面大小
@@ -574,7 +575,7 @@ export default {
           width: 300,
           align: "center",
           render: (h, params) => {
-            if (params.row.fileType.includes("image") > 0) {
+            if (this.isImageFile(params.row)) {
               return h("img", {
                 attrs: {
                   src: params.row.url || "",
@@ -593,7 +594,7 @@ export default {
                   },
                 },
               });
-            } else if (params.row.fileType.includes("video") > 0) {
+            } else if (this.isVideoFile(params.row)) {
               // 如果视频文件大小超过5MB不予加载video
               if (params.row.fileSize < 1024 * 1024 * 5) {
                 return h(
@@ -775,7 +776,7 @@ export default {
           // width: 150,
           align: "center",
           render: (h, params) => {
-            if (params.row.fileType.includes("image") > 0) {
+            if (this.isImageFile(params.row)) {
               return h("img", {
                 attrs: {
                   src: params.row.url || "",
@@ -794,7 +795,7 @@ export default {
                   },
                 },
               });
-            } else if (params.row.fileType.includes("video") > 0) {
+            } else if (this.isVideoFile(params.row)) {
               // 如果视频文件大小超过5MB不予加载video
               if (params.row.fileSize < 1024 * 1024 * 5) {
                 return h(
@@ -1391,16 +1392,22 @@ export default {
     },
     // 文件类型筛选
     changeFileType() {
-      let name = this.fileType;
+      const name = this.fileType;
-      if (name == "all") {
+      this.searchForm.fileType = "";
-        this.searchForm.fileType = "";
+      this.searchForm.fileCategory = "";
-      } else if (name == "pic") {
+      if (name === "pic") {
-        this.searchForm.fileType = "image";
+        this.searchForm.fileCategory = "IMAGE";
-      } else if (name == "video") {
+      } else if (name === "video") {
-        this.searchForm.fileType = "video";
+        this.searchForm.fileCategory = "VIDEO";
       }
       this.handleSearch();
     },
+    isImageFile(row) {
+      return row?.fileCategory === "IMAGE" || (row?.fileType && row.fileType.includes("image"));
+    },
+    isVideoFile(row) {
+      return row?.fileCategory === "VIDEO" || (row?.fileType && row.fileType.includes("video"));
+    },
     // 上传文件超过大小限制
     handleMaxSize() {
       this.$Message.warning("所选文件大小过大，不得超过 20MB");

seller/src/views/shop/wap/decorate.scss

@@ -45,14 +45,14 @@
     width: 100%;
     display: flex;
     flex-wrap: wrap;
+    gap: 14px;
     > .drawer-item {
       cursor: pointer;
       border: 1px solid #ededed;
       background: #f9f0ff;
-      width: 170px;
+      width: calc(50% - 7px);
-      margin-right: 14px;
+      box-sizing: border-box;
       color: #9254de;
-      margin-bottom: 14px;
       border-radius: 0.8em;
       height: 60px;
       display: flex;

seller/src/views/sys/oss-manage/ossManage.vue

@@ -559,6 +559,7 @@ export default {
         name: "",
         fileKey: "",
         fileType: "",
+        fileCategory: "",
         userEnums: "MANAGER",
         pageNumber: 1, // 当前页数
         pageSize: 20, // 页面大小
@@ -597,7 +598,7 @@ export default {
           width: 300,
           align: "center",
           render: (h, params) => {
-            if (params.row.fileType.includes("image") > 0) {
+            if (this.isImageFile(params.row)) {
               return h("img", {
                 attrs: {
                   src: params.row.url || "",
@@ -616,7 +617,7 @@ export default {
                   },
                 },
               });
-            } else if (params.row.fileType.includes("video") > 0) {
+            } else if (this.isVideoFile(params.row)) {
               // 如果视频文件大小超过5MB不予加载video
               if (params.row.fileSize < 1024 * 1024 * 5) {
                 return h(
@@ -798,7 +799,7 @@ export default {
           // width: 150,
           align: "center",
           render: (h, params) => {
-            if (params.row.fileType.includes("image") > 0) {
+            if (this.isImageFile(params.row)) {
               return h("img", {
                 attrs: {
                   src: params.row.url || "",
@@ -817,7 +818,7 @@ export default {
                   },
                 },
               });
-            } else if (params.row.fileType.includes("video") > 0) {
+            } else if (this.isVideoFile(params.row)) {
               // 如果视频文件大小超过5MB不予加载video
               if (params.row.fileSize < 1024 * 1024 * 5) {
                 return h(
@@ -1452,16 +1453,22 @@ export default {
     },
     // 文件类型筛选
     changeFileType() {
-      let name = this.fileType;
+      const name = this.fileType;
-      if (name == "all") {
+      this.searchForm.fileType = "";
-        this.searchForm.fileType = "";
+      this.searchForm.fileCategory = "";
-      } else if (name == "pic") {
+      if (name === "pic") {
-        this.searchForm.fileType = "image";
+        this.searchForm.fileCategory = "IMAGE";
-      } else if (name == "video") {
+      } else if (name === "video") {
-        this.searchForm.fileType = "video";
+        this.searchForm.fileCategory = "VIDEO";
       }
       this.handleSearch();
     },
+    isImageFile(row) {
+      return row?.fileCategory === "IMAGE" || (row?.fileType && row.fileType.includes("image"));
+    },
+    isVideoFile(row) {
+      return row?.fileCategory === "VIDEO" || (row?.fileType && row.fileType.includes("video"));
+    },
     // 上传文件超过大小限制
     handleMaxSize() {
       this.$Message.warning("所选文件大小过大，不得超过 20MB");