feat(ossManage): 进行商家 素材管理 功能改造与界面优化

seller/scripts/copy-manager-migrations.js

@@ -93,11 +93,32 @@ function adaptForSeller(content, sellerRel, sellerOriginal) {
   c = c.replace(/userInfoManager/g, "userInfoSeller");
   c = c.replace(/JSON\.parse\(Cookies\.get\("userInfoManager"\)\)/g, 'JSON.parse(Cookies.get("userInfoSeller"))');
 
-  // ossManage seller variant - hide role tabs, use STORE only
+  // 从平台同步 ossManage 时，转换为商家版：去掉多角色 Tab、改用 sellerUrl 与 STORE 身份
-  if (sellerRel.includes("shop/ossManage.vue")) {
+  if (sellerRel.includes("oss-manage/ossManage") || sellerRel.includes("shop/ossManage")) {
-    c = c.replace(/<el-tab-pane label="管理员" name="MANAGER" \/>[\s\S]*?<el-tab-pane label="客服" name="CUSTOMER" \/>/,
+    c = c.replace(
-      '<el-tab-pane label="商家" name="STORE" />');
+      /<el-card v-if="!isComponent" class="tabs-card">[\s\S]*?<\/el-card>\s*/,
-    c = c.replace(/activeRoleTab: "MANAGER"/, 'activeRoleTab: "STORE"');
+      ""
+    );
+    c = c.replace(/managerApiUrl/g, "sellerUrl");
+    c = c.replace(/\/manager\/common\/upload\/file/g, "/store/common/upload/file");
+    c = c.replace(/activeRoleTab: "MANAGER"/g, 'activeRoleTab: "STORE"');
+    c = c.replace(/userEnums: "MANAGER"/g, 'userEnums: "STORE"');
+    c = c.replace(
+      /return this\.activeRoleTab === "MANAGER";/g,
+      'return this.activeRoleTab === "STORE";'
+    );
+    c = c.replace(
+      /this\.activeRoleTab = "MANAGER";\s*\n\s*this\.searchForm\.userEnums = "MANAGER";/g,
+      'this.activeRoleTab = "STORE";\n          this.searchForm.userEnums = "STORE";'
+    );
+    c = c.replace(
+      /ElMessage\.warning\("仅管理员模块支持上传图片"\)/g,
+      'ElMessage.warning("当前模块不支持上传")'
+    );
+    c = c.replace(
+      /import \{managerApiUrl\} from "@\/libs\/axios";/,
+      'import {sellerUrl} from "@/libs/axios";'
+    );
   }
 
   return c;

seller/src/libs/routerJson.js

@@ -499,6 +499,21 @@ export const result = [{
             children: null
 
           },
+          {
+            name: "ossManage",
+            level: 2,
+            type: 0,
+            title: "素材管理",
+            path: "ossManage",
+            component: "sys/oss-manage/ossManage",
+            /**
+             * 运行时菜单来自 li_store_menu，此处仅为静态参考。
+             * 平台后台「店铺菜单」配置：
+             *   frontRoute = sys/oss-manage/ossManage
+             *   permission = /store/common/file*,/store/common/fileDirectory*,/store/common/upload*
+             */
+            children: null
+          },
           // {
           //   name: "shopAddress",
           //   level: 2,

seller/src/views/goods/goods-seller/goodsOperationSec.vue

@@ -508,6 +508,7 @@
         :isComponent="true"
         :initialize="picModelFlag"
         :max-select="selectedFormBtnName === 'goodsGalleryFiles' ? 1 : 0"
+        :hide-select-footer="true"
         @callback="callbackSelected"
         @selected="(list) => { selectedImage = list }"
       />
@@ -530,8 +531,7 @@ import tinymec from "@/views/lili-components/editor/index.vue";
 import { uploadFile } from "@/libs/axios";
 import { regular } from "@/utils";
 import DPlayer from 'dplayer';
-// import ossManage from "@/views/sys/oss-manage/ossManage";
+import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
 
 
 export default {

seller/src/views/lili-components/editor/upload-image.vue

@@ -67,6 +67,7 @@
         ref="ossManage"
         :is-component="true"
         :initialize="showOssManager"
+        :hide-select-footer="true"
         @selected="handleOssSelected"
       />
       <template #footer>
@@ -87,7 +88,7 @@
 import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
 import vuedraggable from "vuedraggable";
 import { uploadFile } from "@/libs/axios";
-import OssManage from "@/views/shop/ossManage";
+import OssManage from "@/views/sys/oss-manage/ossManage";
 
 export default {
   name: "upload-image",

seller/src/views/my-components/lili/upload-pic-input.vue

@@ -57,6 +57,7 @@
         :is-component="true"
         :initialize="picModalFlag"
         :max-select="1"
+        :hide-select-footer="true"
         @callback="callbackSelected"
         @selected="handleOssSelected"
       />
@@ -71,7 +72,7 @@
 <script>
 import { View } from "@element-plus/icons-vue";
 import { uploadFile } from "@/libs/axios";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 
 export default {
   name: "uploadPicInput",

seller/src/views/my-components/lili/upload-pic-thumb.vue

@@ -69,6 +69,7 @@
         ref="ossManage"
         :is-component="true"
         :initialize="picModelFlag"
+        :hide-select-footer="true"
         @callback="callbackSelected"
         @selected="(list) => { selectedImage = list }"
       />
@@ -84,7 +85,7 @@
 import { Camera, Delete, View } from "@element-plus/icons-vue";
 import { uploadFile } from "@/libs/axios";
 import vuedraggable from "vuedraggable";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 
 export default {
   name: "uploadPicThumb",

seller/src/views/shop/hotzone/components/Zone.vue

@@ -94,7 +94,7 @@
 import changeSize from "../directives/changeSize";
 import dragItem from "../directives/dragItem";
 // import ossManage from "@/views/sys/oss-manage/ossManage";
-import ossManage from "@/views/shop/ossManages";
+import ossManage from "@/views/sys/oss-manage/ossManage";
 
 export default {
   name: "Zone",

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

@@ -1,3 +1,54 @@
+// 弹窗选择器模式：固定内容区高度，避免空分组时布局塌陷
+.oss-manage-picker {
+  .category-tabs-card {
+    margin-bottom: 0;
+
+    :deep(.el-card__body) {
+      padding-bottom: 0;
+    }
+  }
+
+  > .el-row > .el-card {
+    border: none;
+    box-shadow: none;
+
+    :deep(.el-card__body) {
+      padding: 0 0 8px;
+    }
+  }
+
+  .oss-manage-box {
+    min-height: 520px;
+    align-items: stretch;
+
+    > .el-col {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .file-list,
+    .pic-list {
+      flex: 1;
+      min-height: 520px;
+    }
+
+    .pic-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .img-box {
+      flex: 1;
+      min-height: 400px;
+    }
+
+    .page-box {
+      flex-shrink: 0;
+      margin-top: auto;
+    }
+  }
+}
+
 .search {
   .oss-operation {
     margin-bottom: 2vh;
@@ -16,131 +67,12 @@
   display: none;
 }
 
-.oss-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-}
-
-.oss-card {
-  margin: 10px 20px 10px 0;
-  width: 290px;
-
-  :hover {
-    .content .other .name {
-      color: #1890ff;
-      transition: color .3s;
-    }
-  }
-
-  cursor: pointer;
-
-  .el-card__body {
-    padding: 0;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-
-    :hover {
-      .play {
-        transition: opacity .3s;
-        opacity: 1 !important;
-      }
-    }
-
-    .img {
-      height: 135px;
-      object-fit: cover;
-    }
-
-    .video {
-      height: 135px;
-      position: relative;
-
-      .cover {
-        height: 100%;
-        width: 100%;
-        object-fit: fill;
-      }
-
-      .play {
-        position: absolute;
-        top: 43px;
-        left: 117px;
-        height: 50px;
-        width: 50px;
-        opacity: 0.8;
-      }
-    }
-
-    .other {
-      padding: 16px;
-      height: 135px;
-
-      .name {
-        font-size: 16px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        color: rgba(0, 0, 0, .85);
-        font-weight: 500;
-        margin-bottom: 4px;
-      }
-
-      .key {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        height: 45px;
-        word-break: break-all;
-        color: rgba(0, 0, 0, .45);
-      }
-
-      .info {
-        font-size: 12px;
-        color: rgba(0, 0, 0, .45);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        height: 36px;
-        word-break: break-all;
-      }
-    }
-
-    .actions {
-      display: flex;
-      align-items: center;
-      height: 50px;
-      background: #f7f9fa;
-      border-top: 1px solid #e8e8e8;
-
-      i:hover {
-        color: #1890ff;
-      }
-
-      .btn {
-        display: flex;
-        justify-content: center;
-        width: 33.33%;
-        border-right: 1px solid #e8e8e8;
-      }
-
-      .btn-no {
-        display: flex;
-        justify-content: center;
-        width: 33.33%;
-      }
-    }
-  }
-}
-
-
 .oss-manage-box {
   .file-list {
     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 +104,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;
@@ -193,17 +135,21 @@
           width: 100%;
           height: 26px;
           background-color: #ffffff;
-          text-align: center;
-          line-height: 30px;
           color: #666666;
           position: absolute;
           left: 0;
           bottom: 0;
           display: flex;
           flex-wrap: nowrap;
+          align-items: center;
+          justify-content: center;
+          box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
           > div {
-            width: 100%;
             flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
           }
         }
       }
@@ -240,7 +186,7 @@
     flex-direction: row-reverse;
   }
 
-  .demo-tree-render .el-tree-node__content {
+  .demo-tree-render .el-tree-node__label {
     width: 94%;
   }
 }