素材选择弹窗 一顿改

packages/qjkankan-editor/src/components/crumbs/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="crumbs">
+  <div
+    class="crumbs"
+    :class="{
+      dark: isDarkTheme
+    }"
+  >
     <ul>
       <li v-if="list[0]">
         <span class="name" :title="rootName || list[0].name" @click="onClickPath(0)">{{rootName || list[0].name}}</span>
@@ -17,10 +22,20 @@
 
 <script>
 export default {
-  props:[
-    'list',
-    'rootName',
-  ],
+  props: {
+    isDarkTheme: {
+      type: Boolean,
+      default: false,
+    },
+    list: {
+      type: Array,
+      required: true,
+    },
+    rootName: {
+      type: String,
+      required: true,
+    },
+  },
   methods: {
     onClickPath(idx) {
       if (idx !== this.list.length - 1) {
@@ -67,4 +82,15 @@ export default {
     }
   }
 }
+
+.crumbs.dark {
+  >ul{
+    >li{
+      color: rgba(255, 255, 255, 0.6);
+      &:last-of-type{
+        color: #fff;
+      }
+    }
+  }
+}
 </style>

packages/qjkankan-editor/src/components/materialListInMaterialSelector.vue

@@ -1,8 +1,14 @@
 <template>
-  <div class="material-list">
+  <div
+    class="material-list"
+    :class="{
+      dark: isDarkTheme,
+    }"
+  >
     <crumbs
       class="crumbs"
       v-if="!latestUsedSearchKey"
+      :isDarkTheme="isDarkTheme"
       :list="folderPath"
       :rootName="$i18n.t(`gather.${materialTypeAlias}`)"
       @click-path="onClickPath"
@@ -10,12 +16,26 @@
     <div v-if="latestUsedSearchKey" class="crumbs">{{$i18n.t(`gather.${materialTypeAlias}`)}}</div>
 
     <div class="table">
-      <div class="table-head-row">
-        <span class="table-head">1</span>
-        <span class="table-head" v-for="(item, i) in tableHeaders" :key="i">
+      <!-- <div class="table-head-row">
+        <span
+          class="table-head"
+          :style="{
+            width: '50px',
+          }"
+        >
+          1
+        </span>
+        <span
+          class="table-head"
+          v-for="(item, idx) in tableHeaders"
+          :key="idx"
+          :style="{
+            width: columnWidthList[idx],
+          }"
+        >
           {{ item.name && $i18n.t(`zh_key.${item.name}`) }}
         </span>
-      </div>
+      </div> -->
       <div
         v-show="listLocalLength !== 0 || hasMoreData"
         class="table-body"
@@ -31,21 +51,31 @@
           >
             <!-- 如果已经上传成功 -->
             <template v-if="item.status === 'SUCCESS'">
-              <span class="table-data">
+              <span
+                class="table-data"
+                :style="{
+                  width: '50px',
+                }"
+              >
                 <RadioOrCheckbox
                   class="checkbox"
-                  :isLightTheme="true"
+                  :isLightTheme="!isDarkTheme"
                   :isMultiSelection="isMultiSelection"
                   :isCheckedInitial="select.some(i => i.id === item.successInfo.id)"
                   @change="v => selectItem(item.successInfo, v)"
                 />
               </span>
-              <span class="table-data" v-for="(tableItemStructure, idx) in tableHeaders" :key="idx">
-                <div v-if="tableItemStructure.type == 'image'" class="list-img">
-                  <img
-                    :src="item.successInfo[tableItemStructure.key] + (Number(item.fileSize) > 512 ? $imgsuffix : ``)"
-                    alt=""
-                  />
+              <span
+                class="table-data"
+                :style="{
+                  width: columnWidthList[idx],
+                }"
+                v-for="(tableItemStructure, idx) in tableHeaders"
+                :key="idx"
+              >
+                <div v-if="tableItemStructure.type" class="list-img">
+                  <slot name="materialUploadSuccessIcon" :uploadInfo="item" :tableItemStructure="tableItemStructure">
+                  </slot>
                 </div>
                 <span
                   v-else
@@ -58,15 +88,24 @@
             </template>
             <!-- 如果还在上传或切图处理中 -->
             <template v-else-if="item.status === 'LOADING'">
-              <span class="table-data">
-                <div class="checkbox">
-                  <span class="for-outer-circle"></span>
-                  <span class="for-inner-circle disabled"></span>
-                </div>
+              <span
+                class="table-data"
+                :style="{
+                  width: '50px',
+                }"
+              >
               </span>
-              <span class="table-data" v-for="(tableItemStructure, idx) in tableHeaders" :key="idx">
-                <div v-if="tableItemStructure.type == 'image'" class="list-img">
-                  <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
+              <span
+                class="table-data"
+                :style="{
+                  width: columnWidthList[idx],
+                }"
+                v-for="(tableItemStructure, idx) in tableHeaders"
+                :key="idx"
+              >
+                <div v-if="tableItemStructure.type" class="list-img">
+                  <slot name="materialUploadingIcon">
+                  </slot>
                 </div>
                 <span
                   v-if="tableItemStructure.key === 'name'"
@@ -84,15 +123,17 @@
             </template>
             <!-- 如果上传失败了 -->
             <template v-else-if="item.status === 'FAIL'">
-              <span class="table-data">
-                <div class="checkbox">
-                  <span class="for-outer-circle"></span>
-                  <span class="for-inner-circle disabled"></span>
-                </div>
+              <span
+                class="table-data"
+                :style="{
+                  width: '50px',
+                }"
+              >
               </span>
               <span class="table-data" v-for="(tableItemStructure, idx) in tableHeaders" :key="idx">
-                <div v-if="tableItemStructure.type == 'image'" class="list-img">
-                  <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
+                <div v-if="tableItemStructure.type" class="list-img">
+                  <slot name="materialUploadFailIcon">
+                  </slot>
                 </div>
                 <span
                   v-if="tableItemStructure.key === 'name'"
@@ -120,11 +161,16 @@
             }
           }"
         >
-          <span class="table-data">
+          <span
+            class="table-data"
+            :style="{
+              width: '50px',
+            }"
+          >
             <RadioOrCheckbox
-              v-if="item.type !== 'dir'"
               class="checkbox"
-              :isLightTheme="true"
+              :isLightTheme="!isDarkTheme"
+              :isDisabled="item.type === 'dir'"
               :isMultiSelection="isMultiSelection"
               :isCheckedInitial="select.some(i => i.id === item.id)"
               @change="v => selectItem(item, v)"
@@ -133,23 +179,28 @@
           <span
             class="table-data"
             v-for="(tableItemStructure, idx) in tableHeaders"
+            :style="{
+              width: columnWidthList[idx],
+            }"
             :key="idx"
           >
             <div
-              v-if="tableItemStructure.type == 'image'"
+              v-if="tableItemStructure.type"
               class="list-img"
             >
               <img
-                :class="{
-                  folderIcon: item.type === 'dir',
-                }"
-                :src="(item.type === 'dir') ? require('@/assets/images/icons/folder-blue.png') : (item[tableItemStructure.key] + (Number(item.fileSize) > 512 ? $imgsuffix : ``))"
+                v-if="item.type === 'dir'"
+                class="folderIcon"
+                src="@/assets/images/icons/folder-blue.png"
                 alt=""
               />
+              <slot v-else name="materialIcon" :materialInfo="item" :tableItemStructure="tableItemStructure">
+              </slot>
             </div>
             <span
               class="ellipsis"
-              v-else v-title="tableItemStructure.key === 'name' ? item[tableItemStructure.key] : ''"
+              v-else
+              v-title="tableItemStructure.key === 'name' ? item[tableItemStructure.key] : ''"
             >
               {{ item[tableItemStructure.key] }}
             </span>
@@ -159,13 +210,13 @@
       <!-- 无数据时的提示 -->
       <div v-show="!(listLocalLength !== 0 || hasMoreData)" class="no-data">
         <div v-if="latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
+          <img :src="require(`@/assets/images/default/empty_search_${isDarkTheme ? 'dark' : 'bright'}.png`)" alt="">
           <span>{{ $i18n.t("gather.no_serch_result") }}</span>
         </div>
         <div v-if="!latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
+          <img :src="require(`@/assets/images/default/empty_${isDarkTheme ? 'dark' : 'bright'}.png`)" alt="">
           <span>{{ $i18n.t("gather.no_material_result") }}</span>
-          <a v-if="materialType === '3D'" href="/#/">
+          <a v-if="!canUpload" href="/#/">
             <button class="ui-button">{{ $i18n.t("gather.how_to_shoot") }}</button>
           </a>
         </div>
@@ -198,11 +249,10 @@ import {
   getMaterialList,
   getSceneList,
   uploadMaterial,
-  checkMStatus,
   checkUserSize,
 } from "@/api";
 
-import { getImgWH, changeByteUnit } from "@/utils/file";
+import { changeByteUnit } from "@/utils/file";
 import { debounce, capitalize } from "@/utils/other.js"
 
 import config from "@/config";
@@ -211,7 +261,6 @@ import FileInput from "@/components/shared/uploads/UploadMultiple.vue";
 import RadioOrCheckbox from "@/components/shared/RadioOrCheckbox.vue";
 
 import folderMixin from "./materialSelectorFolderMixin.js";
-import { mapState } from 'vuex';
 
 export default {
   components: {
@@ -222,6 +271,10 @@ export default {
     folderMixin,
   ],
   props: {
+    isDarkTheme: {
+      type: Boolean,
+      default: true,
+    },
     currentMaterialType: {
       type: String,
       required: true,
@@ -230,18 +283,28 @@ export default {
       type: String,
       required: true,
     },
+    materialItemCustomProcess: {
+      type: Function,
+      default: (item) => {
+        return
+      }
+    },
     workId: {
       type: String,
       default: '',
     },
-
     tableHeaderKeyList: {
       type: Array,
       default: () => {
         return ['icon', 'name', 'fileSize']
       }
     },
-    
+    columnWidthList: {
+      type: Array,
+      default: () => {
+        return ['calc(146px - 50px)', 'calc(380px - 146px)', 'calc(100% - 380px)']
+      },
+    },
     isMultiSelection: {
       type: Boolean,
       default: false,
@@ -255,10 +318,27 @@ export default {
       type: String,
       default: '',
     },
-
+    canUpload: {
+      type: Boolean,
+      defaut: false,
+    },
     fileInputBtnTip: {
       type: String,
     },
+    fileInputCustomCheck: {
+      type: Function,
+      default: async () => {
+        return true
+      }
+    },
+    fileUploadLongPollingCb: {
+      type: Function || null,
+      default: null
+    },
+    fileUploadLongPollingStatusText: {
+      type: String,
+      defaut: ''
+    },
     fileInputFailString: {
       type: String,
     },
@@ -323,9 +403,6 @@ export default {
         return this.tableHeaderKeyList.includes(item.key)
       })
     },
-    canUpload() {
-      return this.materialType !== '3D'
-    },
     uploadStatusList() {
       if (this.canUpload) {
         return this.$store.state[`uploadStatusList${capitalize(this.materialType)}`]
@@ -373,7 +450,7 @@ export default {
           clearInterval(this.longPollingIntervalId)
           this.longPollingIntervalId = null
           this.longPollingIntervalId = setInterval(() => {
-            this._checkMStatus();
+            this.fileUploadLongPollingCb(this.uploadStatusList);
           }, 3000);
         }
       },
@@ -414,6 +491,7 @@ export default {
           },
           (data) => {
             const newData = data.data.data.list.map((i) => {
+              this.materialItemCustomProcess(i)
               return i;
             });
             this.list = this.list.concat(newData)
@@ -444,8 +522,7 @@ export default {
               } else {
                 i.fileSize = ''
               }
-              i.createTime = i.createTime.substring(0, i.createTime.length - 3)
-              i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
+              this.materialItemCustomProcess(i)
               return i;
             });
             this.list = this.list.concat(newData)
@@ -478,7 +555,7 @@ export default {
     onFileInputChange(e) {
       e.files.forEach(async (eachFile, i) => {
         if (
-          eachFile.type.indexOf("jpeg") <= -1
+          this.fileInputAcceptType.indexOf(eachFile.type) <= -1
         ) {
           console.log('格式不对！');
           setTimeout(() => {
@@ -499,28 +576,9 @@ export default {
           }, i * 100);
           return;
         }
-        let WHRate = null
-        try {
-          const { width, height } = await getImgWH(eachFile)
-          WHRate = width / height
-        } catch (e) {
-          console.error('获取图像宽高失败：', e)
-          setTimeout(() => {
-            this.$msg({
-              message: `“${eachFile.name}”${this.fileInputFailString}`,
-              type: "warning",
-            });
-          }, i * 100);
-          return
-        }
-        if (WHRate !== 2) {
-          console.log('宽高比不对！');
-          setTimeout(() => {
-            this.$msg({
-              message: `“${eachFile.name}”${this.fileInputFailString}`,
-              type: "warning",
-            });
-          }, i * 100);
+
+        const customCheckRes = await this.fileInputCustomCheck(eachFile, i)
+        if (!customCheckRes) {
           return
         }
 
@@ -532,7 +590,7 @@ export default {
           statusText: this.$i18n.t(`gather.uploading_material`),
           uid: `u_${this.$randomWord(true, 8, 8)}`,
           abortHandler: null,
-          backendId: '',
+          backendId: '', // 只用于全景图上传
           parentFolderId: this.currentFolderId,
         };
 
@@ -548,10 +606,20 @@ export default {
               console.error('上传接口响应异常：', response);
               return
             }
-            console.log('全景图上传成功');
-            itemInUploadList.statusText = this.$i18n.t(`gather.cutting`)
-            itemInUploadList.ifKnowProgress = false
-            itemInUploadList.backendId = response.data.id
+            console.log('上传成功');
+            if (this.fileUploadLongPollingCb) {
+              itemInUploadList.statusText = this.fileUploadLongPollingStatusText
+              itemInUploadList.ifKnowProgress = false
+              itemInUploadList.backendId = response.data.id
+            } else {
+              itemInUploadList.status = 'SUCCESS'
+              if (response.data.fileSize) {
+                response.data.fileSize = changeByteUnit(Number(response.fileSize));
+              } else {
+                response.data.fileSize = ''
+              }
+              itemInUploadList.successInfo = response.data
+            }
           },
           (err) => {
             if (err.statusText === 'abort') { // 用户取消了上传任务。
@@ -561,7 +629,7 @@ export default {
               })
               this.uploadStatusList.splice(index, 1)
             } else {
-              console.log('全景图上传失败！');
+              console.log('上传失败！');
               itemInUploadList.status = 'FAIL'
               itemInUploadList.statusText = this.$i18n.t(`gather.material_upload_fail`)
             }
@@ -575,43 +643,6 @@ export default {
         this.uploadStatusList.unshift(itemInUploadList);
       })
     },
-    _checkMStatus() {
-      let needPollingTaskList = this.uploadStatusList.filter((item) => item.status === 'LOADING' && item.ifKnowProgress === false);
-      if (needPollingTaskList.length > 0) {
-        checkMStatus(
-          {
-            ids: needPollingTaskList.map((item) => item.backendId),
-            islongpolling: true,
-          },
-          (res) => {
-            // 1切图中，2失败，3成功
-            res.data.forEach(eachRes => {
-              if (eachRes.status === 2) {
-                const index = this.uploadStatusList.findIndex(eachTask => eachTask.backendId === eachRes.id)
-                if (index >= 0) {
-                  const targetItem = this.uploadStatusList[index]
-                  targetItem.status = 'FAIL'
-                  targetItem.statusText = this.$i18n.t(`gather.material_cutting_fail`)
-                  targetItem.ifKnowProgress = true
-                }
-              } else if (eachRes.status === 3) {
-                const index = this.uploadStatusList.findIndex(eachTask => eachTask.backendId === eachRes.id)
-                if (index >= 0) {
-                  const targetItem = this.uploadStatusList[index]
-                  targetItem.status = 'SUCCESS'
-                  if (eachRes.fileSize) {
-                    eachRes.fileSize = changeByteUnit(Number(eachRes.fileSize));
-                  } else {
-                    eachRes.fileSize = ''
-                  }
-                  targetItem.successInfo = eachRes
-                }
-              }
-            });
-          }
-        );
-      }
-    },
     onClickRow(e) {
       const checkboxNodeList = e.currentTarget.getElementsByClassName('selection-click-target')
       if (checkboxNodeList && checkboxNodeList[0]) {
@@ -653,48 +684,40 @@ export default {
     display: inline-block;
   }
 
-  .table-select {
-    position: absolute;
-    z-index: 3;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 600px;
-    height: 730px;
-    border-radius: 4px;
-    border: 1px solid #EBEDF0;
-    padding: 26px;
-    background: #fff;
-  }
-
   .crumbs {
     margin-top: 10px;
   }
 
+  // @table-height: 420px;
+  // @table-head-row-height: 40px;
+  // @table-border-size: 1px;
   @table-height: 420px;
-  @table-head-row-height: 40px;
-  @table-border-size: 1px;
+  @table-head-row-height: 0px;
+  @table-border-size: 0px;
+
 
   .table {
     margin-top: 10px;
-    border: @table-border-size solid #EBEDF0;
-    background: #ffffff;
+    // border: @table-border-size solid #EBEDF0;
     width: 100%;
     height: @table-height;
 
-    >.table-head-row {
-      width: 100%;
-      height: @table-head-row-height;
-      background: #F5F7FA;
-      color: #646566;
-
-      .table-head {
-        font-size: 16px;
-        line-height: @table-head-row-height;
-        height: 100%;
-        display: inline-block;
-      }
-    }
+    // >.table-head-row {
+    //   width: 100%;
+    //   height: @table-head-row-height;
+    //   background: #F5F7FA;
+    //   color: #646566;
+
+    //   .table-head {
+    //     font-size: 16px;
+    //     line-height: @table-head-row-height;
+    //     height: 100%;
+    //     display: inline-block;
+    //     &:nth-of-type(1) {
+    //       color: transparent;
+    //     }
+    //   }
+    // }
 
     >.table-body {
       height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
@@ -704,11 +727,14 @@ export default {
 
       .table-body-row {
         height: 50px;
-        border-bottom: 1px solid #EBEDF0;
+        // border-bottom: 1px solid #EBEDF0;
         display: flex;
         align-items: center;
+        border-radius: 4px;
         cursor: pointer;
-
+        &:hover {
+          background: #F7F8FA;
+        }
         >.table-data {
           font-size: 14px;
           line-height: 50px;
@@ -758,7 +784,7 @@ export default {
           margin-top: 20px;
           display: block;
           font-size: 14px;
-          color: rgba(255, 255, 255, 0.6);
+          color: #646566;
         }
 
         >a {
@@ -770,27 +796,6 @@ export default {
     }
   }
 
-  .table .table-head,
-  .table .table-data {
-    &:nth-of-type(1) {
-      width: 50px;
-      color: transparent;
-    }
-
-    &:nth-of-type(2) {
-      width: calc(146px - 50px);
-    }
-
-    &:nth-of-type(3) {
-      width: calc(380px - 146px);
-      padding-right: 30px;
-    }
-
-    &:nth-of-type(4) {
-      width: calc(100% - 380px);
-    }
-  }
-
   .checkbox {
     width: 100%;
     height: 100%;
@@ -816,4 +821,69 @@ export default {
     }
   }
 }
+
+.material-list.dark {
+  .ellipsis {
+  }
+  .crumbs {
+  }
+  
+  .table {
+    // border: @table-border-size solid #EBEDF0;
+    // >.table-head-row {
+    //   background: #F5F7FA;
+    //   color: #646566;
+    //   .table-head {
+    //     &:nth-of-type(1) {
+    //       color: transparent;
+    //     }
+    //   }
+    // }
+
+    >.table-body {
+      .table-body-row {
+        // border-bottom: 1px solid #EBEDF0;
+        &:hover {
+          background: #252526;
+        }
+        >.table-data {
+          color: #fff;
+          >.list-img {
+            >img,
+            .audio-player {
+              &.folderIcon {
+              }
+            }
+          }
+        }
+      }
+    }
+
+    >.no-data {
+      >div {
+        >img {
+        }
+        >span {
+          color: rgba(255, 255, 255, 0.6);
+        }
+        >a {
+          >button {
+          }
+        }
+      }
+    }
+  }
+
+  .checkbox {
+  }
+
+  .btns {
+    .upload-btn {
+      >span {
+      }
+      i.tool-tip-for-editor {
+      }
+    }
+  }
+}
 </style>

packages/qjkankan-editor/src/components/materialSelector.vue

@@ -0,0 +1,664 @@
+<template>
+  <div
+    class="table-select"
+    :class="isDarkTheme ? '' : 'bright'"
+  >
+    <span class="title">{{ title }}</span>
+    <div class="close-btn"><i class="iconfont icon-pop-ups_shut-down" @click="$emit('cancle')"></i></div>
+
+    <div class="material-tab">
+      <a
+        v-if="selectableType.includes('image')"
+        class="material-tab-item"
+        @click.prevent="currentMaterialType = 'image'"
+      >
+        <span :class="{ active: currentMaterialType === 'image' }" class="text">
+          {{ $i18n.t(`gather.image`) }}
+        </span>
+        <div v-if="currentMaterialType === 'image'" class="bottom-line"></div>
+      </a>
+      <a
+        v-if="selectableType.includes('pano')"
+        class="material-tab-item"
+        @click.prevent="currentMaterialType = 'pano'"
+      >
+        <span :class="{ active: currentMaterialType === 'pano' }" class="text">
+          {{ $i18n.t(`gather.panorama`) }}
+        </span>
+        <div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
+      </a>
+      <a
+        v-if="selectableType.includes('audio')"
+        class="material-tab-item"
+        @click.prevent="currentMaterialType = 'audio'"
+      >
+        <span :class="{ active: currentMaterialType === 'audio' }" class="text">
+          {{ $i18n.t(`gather.audio`) }}
+        </span>
+        <div v-if="currentMaterialType === 'audio'" class="bottom-line"></div>
+      </a>
+      <a
+        v-if="selectableType.includes('video')"
+        class="material-tab-item"
+        @click.prevent="currentMaterialType = 'video'"
+      >
+        <span :class="{ active: currentMaterialType === 'video' }" class="text">
+          {{ $i18n.t(`gather.video`) }}
+        </span>
+        <div v-if="currentMaterialType === 'video'" class="bottom-line"></div>
+      </a>
+      <a
+        v-if="selectableType.includes('3D')"
+        class="material-tab-item"
+        @click.prevent="currentMaterialType = '3D'"
+      >
+        <span :class="{ active: currentMaterialType === '3D' }" class="text">
+          {{ $i18n.t(`gather.scene`) }}
+        </span>
+        <div v-if="currentMaterialType === '3D'" class="bottom-line"></div>
+      </a>
+    </div>
+    
+    <div
+      class="filter"
+      :class="{active: isSearchKeyInputActive}"
+    >
+      <input
+        type="text"
+        :placeholder="$i18n.t('gather.keywords')"
+        v-model="searchKey"
+        @focus="isSearchKeyInputActive = true"
+        @blur="isSearchKeyInputActive = false"
+      />
+      <i v-if="!searchKey" class="iconfont icon-editor_search search-icon" />
+      <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red clear-icon"></i>
+    </div>
+
+    <MaterialList
+      v-if="selectableType.includes('pano')"
+      v-show="currentMaterialType === 'pano'"
+
+      :isDarkTheme="isDarkTheme"
+      
+      :currentMaterialType="currentMaterialType"
+      :materialType="'pano'"
+      
+      :tableHeaderKeyList="['icon', 'name', 'fileSize']"
+
+      :isMultiSelection="isMultiSelection"
+      :select="select"
+
+      :searchKey="searchKey"
+
+      :canUpload="true"
+      :fileInputCustomCheck="checkPanoFileInput"
+      :fileUploadLongPollingCb="panoUploadLongPolling"
+      :fileUploadLongPollingStatusText="$i18n.t(`gather.cutting`)"
+      :fileInputBtnTip="$i18n.t(`gather.pano_size`)"
+      :fileInputFailString="$i18n.t(`gather.pano_fail`)"
+      :fileInputLimitFailStr="$i18n.t(`gather.pano_limit`)"
+      :fileInputAcceptType="'image/jpeg'"
+      :fileInputMediaType="'image'"
+      :fileInputLimit="120"
+    >
+      <template
+        v-slot:materialUploadSuccessIcon="slotProps"
+      >
+        <img
+          :src="slotProps.uploadInfo.successInfo[slotProps.tableItemStructure.key] + (Number(slotProps.uploadInfo.fileSize) > 512 ? $imgsuffix : ``)"
+          alt=""
+        />
+      </template>
+      <template
+        v-slot:materialUploadingIcon
+      >
+        <img
+          src="@/assets/images/icons/upload-file-type-icon-image@2x.png"
+          style="object-fit: contain;"
+          alt=""
+        >
+      </template>
+      <template
+        v-slot:materialUploadFailIcon
+      >
+        <img
+          src="@/assets/images/icons/upload-file-type-icon-image@2x.png"
+          style="object-fit: contain;"
+        |  alt=""
+        >
+      </template>
+      <template
+        v-slot:materialIcon="slotProps"
+      >
+        <img
+          :src="slotProps.materialInfo[slotProps.tableItemStructure.key] + (Number(slotProps.materialInfo.fileSize) > 512 ? $imgsuffix : ``)"
+          alt=""
+        />
+      </template>
+    </MaterialList>
+
+    <MaterialList
+      v-if="selectableType.includes('image')"
+      v-show="currentMaterialType === 'image'"
+
+      :isDarkTheme="isDarkTheme"
+
+      :currentMaterialType="currentMaterialType"
+      :materialType="'image'"
+      
+      :tableHeaderKeyList="['icon', 'name', 'fileSize', 'dpi']"
+      :columnWidthList="['calc(146px - 50px)', 'calc(316px - 146px)', 'calc(380px - 316px)', 'calc(100% - 380px)']"
+      
+      :isMultiSelection="isMultiSelection"
+      :select="select"
+
+      :searchKey="searchKey"
+
+      :canUpload="true"
+      :fileInputBtnTip="$i18n.t(`gather.img_size`)"
+      :fileInputFailString="$i18n.t(`gather.img_fail`)"
+      :fileInputLimitFailStr="$i18n.t(`gather.img_limit`)"
+      :fileInputAcceptType="'image/png,image/jpeg'"
+      :fileInputMediaType="'image'"
+      :fileInputLimit="10"
+    >
+      <template
+        v-slot:materialUploadSuccessIcon="slotProps"
+      >
+        <img
+          :src="slotProps.uploadInfo.successInfo[slotProps.tableItemStructure.key] + (Number(slotProps.uploadInfo.fileSize) > 512 ? $imgsuffix : ``)"
+          alt=""
+        />
+      </template>
+      <template
+        v-slot:materialUploadingIcon
+      >
+        <img
+          src="@/assets/images/icons/upload-file-type-icon-image@2x.png"
+          style="object-fit: contain;"
+          alt=""
+        >
+      </template>
+      <template
+        v-slot:materialUploadFailIcon
+      >
+        <img
+          src="@/assets/images/icons/upload-file-type-icon-image@2x.png"
+          style="object-fit: contain;"
+          alt=""
+        >
+      </template>
+      <template
+        v-slot:materialIcon="slotProps"
+      >
+        <img
+          :src="slotProps.materialInfo[slotProps.tableItemStructure.key] + (Number(slotProps.materialInfo.fileSize) > 512 ? $imgsuffix : ``)"
+          alt=""
+        />
+      </template>
+    </MaterialList>
+
+    <MaterialList
+      v-if="selectableType.includes('audio')"
+      v-show="currentMaterialType === 'audio'"
+
+      :isDarkTheme="isDarkTheme"
+
+      :currentMaterialType="currentMaterialType"
+      :materialType="'audio'"
+      
+      :tableHeaderKeyList="['ossPath', 'name', 'fileSize']"
+      
+      :isMultiSelection="isMultiSelection"
+      :select="select"
+
+      :searchKey="searchKey"
+
+      :canUpload="true"
+      :fileInputBtnTip="$i18n.t(`gather.audio_size`)"
+      :fileInputFailString="$i18n.t(`gather.audio_fail`)"
+      :fileInputLimitFailStr="$i18n.t(`gather.audio_limit`)"
+      :fileInputAcceptType="'audio/mp3'"
+      :fileInputMediaType="'audio'"
+      :fileInputLimit="20"
+    >
+      <template
+        v-slot:materialUploadSuccessIcon="slotProps"
+      >
+        <AudioIconCanPlay
+          class="audio-player"
+          :vKey="slotProps.uploadInfo.successInfo.id"
+          :idleft="`_${$randomWord(true, 8, 8)}`"
+          :idright="`_${$randomWord(true, 8, 8)}`"
+          :myAudioUrl="slotProps.uploadInfo.successInfo.ossPath"
+        />
+      </template>
+      <template
+        v-slot:materialUploadingIcon
+      >
+        <img
+          :src="require('@/assets/images/icons/upload-file-type-icon-audio@2x.png')"
+          style="object-fit: contain;"
+          alt=""
+        >
+      </template>
+      <template
+        v-slot:materialUploadFailIcon
+      >
+        <img
+          :src="require('@/assets/images/icons/upload-file-type-icon-audio@2x.png')"
+          style="object-fit: contain;"
+          alt=""
+        >
+      </template>
+      <template
+        v-slot:materialIcon="slotProps"
+      >
+        <AudioIconCanPlay
+          class="audio-player"
+          :vKey="slotProps.materialInfo.id"
+          :idleft="`_${$randomWord(true, 8, 8)}`"
+          :idright="`_${$randomWord(true, 8, 8)}`"
+          :myAudioUrl="slotProps.materialInfo.ossPath"
+        />
+      </template>
+    </MaterialList>
+
+    <MaterialList
+      v-if="selectableType.includes('video')"
+      v-show="currentMaterialType === 'video'"
+
+      :isDarkTheme="isDarkTheme"
+
+      :currentMaterialType="currentMaterialType"
+      :materialType="'video'"
+      :materialItemCustomProcess="(item) => {item.icon = process.env.VUE_APP_ORIGIN == 'aws' ? item.icon : (item.ossPath + '?x-oss-process=video/snapshot,t_0,f_jpg,w_89,h_50,m_fast,ar_auto');}"
+
+      :tableHeaderKeyList="['icon', 'name', 'fileSize']"
+      
+      :isMultiSelection="isMultiSelection"
+      :select="select"
+
+      :searchKey="searchKey"
+
+      :canUpload="true"
+      :fileInputBtnTip="$i18n.t(`gather.video_size`)"
+      :fileInputFailString="$i18n.t(`gather.video_fail`)"
+      :fileInputLimitFailStr="$i18n.t(`gather.video_limit`)"
+      :fileInputAcceptType="'video/mp4'"
+      :fileInputMediaType="'video'"
+      :fileInputLimit="200"
+    >
+      <template
+        v-slot:materialUploadSuccessIcon="slotProps"
+      >
+        <img
+          :src="slotProps.uploadInfo.successInfo[slotProps.tableItemStructure.key] + (Number(slotProps.uploadInfo.fileSize) > 512 ? $imgsuffix : ``)"
+          alt=""
+        />
+      </template>
+      <template
+        v-slot:materialUploadingIcon
+      >
+        <img
+          src="@/assets/images/icons/upload-file-type-icon-video@2x.png"
+          style="object-fit: contain;"
+          alt=""
+        >
+      </template>
+      <template
+        v-slot:materialUploadFailIcon
+      >
+        <img
+          src="@/assets/images/icons/upload-file-type-icon-video@2x.png"
+          style="object-fit: contain;"
+          alt=""
+        >
+      </template>
+      <template
+        v-slot:materialIcon="slotProps"
+      >
+        <img
+          :src="slotProps.materialInfo[slotProps.tableItemStructure.key] + (Number(slotProps.materialInfo.fileSize) > 512 ? $imgsuffix : ``)"
+          alt=""
+        />
+      </template>
+    </MaterialList>
+
+    <MaterialList
+      v-if="selectableType.includes('3D')"
+      v-show="currentMaterialType === '3D'"
+
+      :isDarkTheme="isDarkTheme"
+
+      :currentMaterialType="currentMaterialType"
+      :materialType="'3D'"
+      :workId="workId"
+
+      :tableHeaderKeyList="['thumb', 'sceneName', 'createTime']"
+
+      :isMultiSelection="isMultiSelection"
+      :select="select"
+
+      :searchKey="searchKey"
+    >
+      <template
+        v-slot:materialIcon="slotProps"
+      >
+        <img
+          :src="slotProps.materialInfo[slotProps.tableItemStructure.key] + (Number(slotProps.materialInfo.fileSize) > 512 ? $imgsuffix : ``)"
+          alt=""
+        />
+      </template>
+    </MaterialList>
+
+    <div class="btns">
+      <button
+        class="ui-button"
+        :class="isDarkTheme ? 'deepcancel' : 'cancel'"
+        @click="$emit('cancle')"
+      >{{ $i18n.t("gather.cancel") }}</button>
+      <button class="ui-button submit" :class="{ disable: !select.length }" @click="onClickComfirm">
+        {{ $i18n.t("gather.comfirm"), }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, } from "vuex";
+import MaterialList from "./materialListInMaterialSelector.vue";
+import AudioIconCanPlay from "@/components/audio/indexForEditor.vue";
+import { getImgWH, changeByteUnit } from "@/utils/file";
+import { debounce } from "@/utils/other.js"
+import {
+  checkMStatus,
+} from "@/api";
+
+export default {
+  components: {
+    MaterialList,
+    AudioIconCanPlay,
+  },
+  props: {
+    isDarkTheme: {
+      type: Boolean,
+      default: true,
+    },
+    title: {
+      default: '',
+      type: String
+    },
+    selectableType: {
+      type: Array,
+      default: function() {
+        return [
+          'image',
+          'pano',
+          'audio',
+          'video',
+          '3D',
+        ]
+      },
+    },
+    initialMaterialType: {
+      type: String,
+      default: 'image',
+    },
+    isMultiSelection: {
+      type: Boolean,
+      default: false,
+    },
+    workId: {
+      type: String,
+      default: '',
+    },
+  },
+  data () {
+    return {
+      select: [],
+      isSearchKeyInputActive: false,
+      searchKey: '', // 搜索关键词
+      latestUsedSearchKey: '',
+
+      currentMaterialType: this.initialMaterialType,
+    }
+  },
+  watch: {
+  },
+  methods: {
+    ...mapMutations([
+      'clearUploadStatusLists',
+    ]),
+    async checkPanoFileInput(eachFile, i) {
+      debugger
+      let WHRate = null
+      try {
+        const { width, height } = await getImgWH(eachFile)
+        WHRate = width / height
+      } catch (e) {
+        console.error('获取图像宽高失败：', e)
+        setTimeout(() => {
+          this.$msg({
+            message: `“${eachFile.name}”${this.$i18n.t(`gather.pano_fail`)}`,
+            type: "warning",
+          });
+        }, i * 100);
+        return false
+      }
+      if (WHRate !== 2) {
+        console.log('宽高比不对！');
+        setTimeout(() => {
+          this.$msg({
+            message: `“${eachFile.name}”${this.$i18n.t(`gather.pano_fail`)}`,
+            type: "warning",
+          });
+        }, i * 100);
+        return false
+      } else {
+        console.log(WHRate);
+        return true
+      }
+    },
+    panoUploadLongPolling(uploadStatusList) {
+      let needPollingTaskList = uploadStatusList.filter((item) => item.status === 'LOADING' && item.ifKnowProgress === false);
+      if (needPollingTaskList.length > 0) {
+        checkMStatus(
+          {
+            ids: needPollingTaskList.map((item) => item.backendId),
+            islongpolling: true,
+          },
+          (res) => {
+            // 1切图中，2失败，3成功
+            res.data.forEach(eachRes => {
+              if (eachRes.status === 2) {
+                const index = uploadStatusList.findIndex(eachTask => eachTask.backendId === eachRes.id)
+                if (index >= 0) {
+                  const targetItem = uploadStatusList[index]
+                  targetItem.status = 'FAIL'
+                  targetItem.statusText = this.$i18n.t(`gather.material_cutting_fail`)
+                  targetItem.ifKnowProgress = true
+                }
+              } else if (eachRes.status === 3) {
+                const index = uploadStatusList.findIndex(eachTask => eachTask.backendId === eachRes.id)
+                if (index >= 0) {
+                  const targetItem = uploadStatusList[index]
+                  targetItem.status = 'SUCCESS'
+                  if (eachRes.fileSize) {
+                    eachRes.fileSize = changeByteUnit(Number(eachRes.fileSize));
+                  } else {
+                    eachRes.fileSize = ''
+                  }
+                  targetItem.successInfo = eachRes
+                }
+              }
+            });
+          }
+        );
+      }
+    },
+    onClickComfirm: debounce(function () {
+      this.$emit('submit', this.select)
+    }, 250),
+  },
+  mounted() {
+    this.clearUploadStatusLists()
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.table-select {
+  position: absolute;
+  z-index: 3;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 600px;
+  height: 730px;
+  background: #1A1B1D;
+  border-radius: 4px;
+  border: 1px solid #404040;
+  padding: 26px;
+
+  .title {
+    font-size: 18px;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .close-btn {
+    display: inline-block;
+    position: absolute;
+    top: 26px;
+    right: 20px;
+    font-size: 12px;
+    color: #969799;
+    cursor: pointer;
+    padding: 6px;
+  }
+  .material-tab {
+    margin-top: 35px;
+
+      > .material-tab-item {
+      display: inline-block;
+      margin-right: 20px;
+      position: relative;
+      cursor: pointer;
+
+      > .text {
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(255, 255, 255, 0.6);
+        &.active {
+          color: #fff;
+        }
+      }
+
+      > .bottom-line {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -4px;
+        width: 16px;
+        height: 2px;
+        background: #0076F6;
+        border-radius: 1px;
+      }
+    }
+  }
+
+  .filter {
+    margin-top: 28px;
+    width: 100%;
+    height: 36px;
+    background: #252526;
+    border-radius: 2px;
+    border: 1px solid #404040;
+    position: relative;
+    &.active {
+      border: 1px solid @color;
+    }
+    > input {
+      box-sizing: border-box;
+      width: calc(100% - 42px);
+      height: 100%;
+      border: none;
+      padding-left: 16px;
+      background: transparent;
+      color: #fff;
+      outline: none;
+    }
+
+    > .search-icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 18px;
+      color: #404040;
+      font-size: 20px;
+    }
+    > .clear-icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 18px;
+      color: #404040;
+      font-size: 20px;
+      cursor: pointer;
+    }
+  }
+
+  .btns {
+    position: absolute;
+    right: 26px;
+    bottom: 26px;
+    button:first-child {
+      margin-right: 16px;
+    }
+  }
+}
+
+.table-select.bright {
+  border: 1px solid #EBEDF0;
+  background: #fff;
+  .title {
+    color: #323233;
+  }
+
+  .close-btn {
+  }
+  .material-tab {
+
+      > .material-tab-item {
+      > .text {
+        color: #969799;
+        &.active {
+          color: #323233;
+        }
+      }
+
+      > .bottom-line {
+      }
+    }
+  }
+
+  .filter {
+    background: #F7F8FA;
+    border: 1px solid #EBEDF0;
+
+    > input {
+      color: #323233;
+    }
+
+    > .search-icon {
+      color: #C8C9CC;
+    }
+    > .clear-icon {
+      color: #C8C9CC;
+    }
+  }
+
+  .btns {
+  }
+}
+</style>

packages/qjkankan-editor/src/components/materialSelectorFolderMixin.js

@@ -26,7 +26,6 @@ export default {
     onClickPath(idx) {
       this.searchKey = ''
       this.folderPath = this.folderPath.slice(0, idx + 1)
-      // this.selectedList = []
     },
     onClickFolder(folder) {
       getFolderTree({
@@ -39,7 +38,6 @@ export default {
         targetPathIdList.push(folder.id)
         this.folderPath = nodeIdList2nodeInfoListByNodeTree(targetPathIdList, this.folderTree)
         this.searchKey = ''
-        // this.selectedList = []
       })
     },
   },

packages/qjkankan-editor/src/components/materialSelectorForManageCenter.vue

@@ -1,286 +0,0 @@
-<template>
-  <div class="table-select">
-    <span class="title">{{ title }}</span>
-    <div class="close-btn"><i class="iconfont icon-pop-ups_shut-down" @click="$emit('cancle')"></i></div>
-
-    <div class="material-tab">
-      <a
-        v-if="selectableType.includes('image')"
-        class="material-tab-item"
-        @click.prevent="currentMaterialType = 'image'"
-      >
-        <span :class="{ active: currentMaterialType === 'image' }" class="text">
-          {{ $i18n.t(`gather.image`) }}
-        </span>
-        <div v-if="currentMaterialType === 'image'" class="bottom-line"></div>
-      </a>
-      <a
-        v-if="selectableType.includes('pano')"
-        class="material-tab-item"
-        @click.prevent="currentMaterialType = 'pano'"
-      >
-        <span :class="{ active: currentMaterialType === 'pano' }" class="text">
-          {{ $i18n.t(`gather.panorama`) }}
-        </span>
-        <div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
-      </a>
-      <a
-        v-if="selectableType.includes('audio')"
-        class="material-tab-item"
-        @click.prevent="currentMaterialType = 'audio'"
-      >
-        <span :class="{ active: currentMaterialType === 'audio' }" class="text">
-          {{ $i18n.t(`gather.audio`) }}
-        </span>
-        <div v-if="currentMaterialType === 'audio'" class="bottom-line"></div>
-      </a>
-      <a
-        v-if="selectableType.includes('video')"
-        class="material-tab-item"
-        @click.prevent="currentMaterialType = 'video'"
-      >
-        <span :class="{ active: currentMaterialType === 'video' }" class="text">
-          {{ $i18n.t(`gather.video`) }}
-        </span>
-        <div v-if="currentMaterialType === 'video'" class="bottom-line"></div>
-      </a>
-      <a
-        v-if="selectableType.includes('3D')"
-        class="material-tab-item"
-        @click.prevent="currentMaterialType = '3D'"
-      >
-        <span :class="{ active: currentMaterialType === '3D' }" class="text">
-          {{ $i18n.t(`gather.scene`) }}
-        </span>
-        <div v-if="currentMaterialType === '3D'" class="bottom-line"></div>
-      </a>
-    </div>
-
-    <div class="filter">
-      <input type="text" :placeholder="$i18n.t('gather.keywords')" v-model="searchKey" />
-      <i v-if="!searchKey" class="iconfont icon-editor_search search-icon" />
-      <i v-if="searchKey" @click="searchKey = ''" class="iconfont icontoast_red clear-icon"></i>
-    </div>
-
-    <MaterialList
-      v-if="selectableType.includes('pano')"
-      v-show="currentMaterialType === 'pano'"
-
-      :currentMaterialType="currentMaterialType"
-      :materialType="'pano'"
-      
-      :tableHeaderKeyList="['icon', 'name', 'fileSize']"
-      
-      :isMultiSelection="isMultiSelection"
-      :select="select"
-
-      :searchKey="searchKey"
-
-      :canUpload="true"
-      :fileInputBtnTip="$i18n.t(`gather.pano_size`)"
-      :fileInputFailString="$i18n.t(`gather.pano_fail`)"
-      :fileInputLimitFailStr="$i18n.t(`gather.pano_limit`)"
-      :fileInputAcceptType="'image/jpeg'"
-      :fileInputMediaType="'image'"
-      :fileInputLimit="120"
-    />
-
-    <MaterialList
-      v-if="selectableType.includes('3D')"
-      v-show="currentMaterialType === '3D'"
-
-      :currentMaterialType="currentMaterialType"
-      :materialType="'3D'"
-      :workId="workId"
-
-      :tableHeaderKeyList="['thumb', 'sceneName', 'createTime']"
-
-      :isMultiSelection="isMultiSelection"
-      :select="select"
-
-      :searchKey="searchKey"
-    />
-
-    <div class="btns">
-      <button class="ui-button cancel" @click="$emit('cancle')">{{ $i18n.t("gather.cancel") }}</button>
-      <button class="ui-button submit" :class="{ disable: !select.length }" @click="onClickComfirm">
-        {{ $i18n.t("gather.comfirm"), }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapMutations, } from "vuex";
-import MaterialList from "./materialListInMaterialSelector.vue";
-
-import { debounce } from "@/utils/other.js"
-
-export default {
-  components: {
-    MaterialList,
-  },
-  props: {
-    title: {
-      default: '',
-      type: String
-    },
-    selectableType: {
-      type: Array,
-      default: function () {
-        return [
-          'pano',
-          '3D',
-        ]
-      },
-    },
-    initialMaterialType: {
-      type: String,
-      default: 'image',
-    },
-    isMultiSelection: {
-      type: Boolean,
-      default: false,
-    },
-    workId: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      select: [],
-      searchKey: '', // 搜索关键词
-      latestUsedSearchKey: '',
-
-      currentMaterialType: this.initialMaterialType,
-    }
-  },
-  computed: {
-  },
-  watch: {
-  },
-  methods: {
-    ...mapMutations([
-      'clearUploadStatusLists',
-    ]),
-    onClickComfirm: debounce(function () {
-      this.$emit('submit', this.select)
-    }, 250),
-  },
-  mounted() {
-    this.clearUploadStatusLists()
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.table-select {
-  position: absolute;
-  z-index: 3;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  width: 600px;
-  height: 730px;
-  border-radius: 4px;
-  border: 1px solid #EBEDF0;
-  padding: 26px;
-  background: #fff;
-  .title {
-    font-size: 18px;
-    color: #323233;
-  }
-
-  .close-btn {
-    display: inline-block;
-    position: absolute;
-    top: 26px;
-    right: 20px;
-    font-size: 12px;
-    color: #969799;
-    cursor: pointer;
-    padding: 6px;
-  }
-  .material-tab {
-    margin-top: 35px;
-
-    >.material-tab-item {
-      display: inline-block;
-      margin-right: 20px;
-      position: relative;
-      cursor: pointer;
-
-      >.text {
-        font-size: 14px;
-        font-family: MicrosoftYaHei;
-        color: #969799;
-
-        &.active {
-          color: #323233;
-        }
-      }
-
-      >.bottom-line {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: -4px;
-        width: 16px;
-        height: 2px;
-        background: #0076F6;
-        border-radius: 1px;
-      }
-    }
-  }
-
-  .filter {
-    margin-top: 28px;
-    width: 100%;
-    height: 36px;
-    background: #F7F8FA;
-    border-radius: 2px;
-    border: 1px solid #EBEDF0;
-    position: relative;
-
-    >input {
-      box-sizing: border-box;
-      width: calc(100% - 42px);
-      height: 100%;
-      border: none;
-      padding-left: 16px;
-      background: transparent;
-      color: #323233;
-      outline: none;
-    }
-
-    >.search-icon {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 18px;
-      color: #C8C9CC;
-      font-size: 20px;
-    }
-
-    >.clear-icon {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 18px;
-      color: #C8C9CC;
-      font-size: 20px;
-      cursor: pointer;
-    }
-  }
-
-  .btns {
-    position: absolute;
-    right: 26px;
-    bottom: 26px;
-    .cancel {
-      margin-right: 16px;
-    }
-  }
-}
-</style>

packages/qjkankan-editor/src/components/materialSelectorFromWorkForEditor.vue

@@ -54,11 +54,11 @@
       <!-- 无数据时的提示 -->
       <div v-show="!(panoList.length !== 0)" class="no-data">
         <div v-if="latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
+          <img :src="require('@/assets/images/default/empty_search_dark.png')" alt="">
           <span>{{$i18n.t(`gather.no_serch_result`)}}</span>
         </div>
         <div v-if="!latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
+          <img :src="require('@/assets/images/default/empty_dark.png')" alt="">
           <span>{{$i18n.t(`gather.no_material_result`)}}</span>
         </div>
       </div>
@@ -98,11 +98,11 @@
       <!-- 无数据时的提示 -->
       <div v-show="!(scene3DList.length !== 0)" class="no-data">
         <div v-if="latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
+          <img :src="require('@/assets/images/default/empty_search_dark.png')" alt="">
           <span>{{$i18n.t(`gather.no_serch_result`)}}</span>
         </div>
         <div v-if="!latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
+          <img :src="require('@/assets/images/default/empty_dark.png')" alt="">
           <span>{{$i18n.t(`gather.no_material_result`)}}</span>
         </div>
       </div>

packages/qjkankan-editor/src/components/sceneGroupInEditor.vue

@@ -173,7 +173,7 @@
 
 <script>
 import SceneInGroup from "@/components/sceneInGroupInEditor.vue";
-import MaterialSelector from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 import InsertPositionTip from "@/components/insertPositionTipInEditor.vue";
 import { mapGetters, mapMutations } from "vuex";
 

packages/qjkankan-editor/src/components/shared/RadioOrCheckbox.vue

@@ -31,6 +31,10 @@
 <script>
 export default {
   props: {
+    isLightTheme: {
+      type: Boolean,
+      default: false,
+    },
     isMultiSelection: {
       type: Boolean,
       default: false,
@@ -43,10 +47,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    isLightTheme: {
-      type: Boolean,
-      default: false,
-    }
   },
   data() {
     return {
@@ -62,6 +62,9 @@ export default {
   },
   methods: {
     onClick() {
+      if (this.isDisabled) {
+        return
+      }
       this.isChecked = !this.isChecked
       this.$emit('change', this.isChecked)
     }
@@ -125,10 +128,6 @@ export default {
     height: 16px;
     cursor: pointer;
     position: relative;
-    &.disabled {
-      background: rgba(255, 255, 255, 0.0800);
-      cursor: not-allowed;
-    }
     > .unchecked {
       position: absolute;
       width: 100%;
@@ -136,6 +135,10 @@ export default {
       border-radius: 2px;
       border: 1px solid #404040;
     }
+    > .unchecked.disabled {
+      background: rgba(255, 255, 255, 0.0800);
+      cursor: not-allowed;
+    }
     > .checked {
       position: absolute;
       width: 16px;
@@ -144,14 +147,30 @@ export default {
   }
 }
 
-.light-theme {
-  > .checkbox-wrapper {
-    &.disabled {
-      background: rgba(255, 255, 255, 0.0800);
-      cursor: not-allowed;
+.radio-or-checkbox-wrap.light-theme {
+  > .radio-wrapper {
+    > .for-outer-circle {
+      border: 1px solid #D5D8DE;
+    }
+    > .for-inner-circle {
+      &.disabled {
+        background: #D5D8DE;
+      }
+    }
+    &.is-checked {
+      > .for-outer-circle {
+        border: 1px solid #0076F6;
+      }
+      > .for-inner-circle {
+      }
     }
+  }
+  > .checkbox-wrapper {
     > .unchecked {
-      border: 1px solid #EBEDF0;
+      border: 1px solid #D5D8DE;
+    }
+    > .unchecked.disabled {
+      background: #D5D8DE;
     }
     > .checked {
     }

packages/qjkankan-editor/src/mixins/index.js

@@ -18,8 +18,6 @@ MARERIAL.forEach((item) => {
   MAPTABLEHEADER[item] = require(`@/views/material/${item}/${item}`).data;
 });
 
-console.log('$MAPTABLEHEADER: ', MAPTABLEHEADER);
-
 const MARERIALSTR = {
   image: "图片",
   pano: "全景图",

packages/qjkankan-editor/src/views/base/Toolbar.vue

@@ -66,7 +66,7 @@
     </div>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowSettingCoverWindow">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :selectableType="['image', 'pano', '3D']"
         :title="$i18n.t(`gather.select_material`)"
         @cancle="isShowSettingCoverWindow = false"
@@ -78,7 +78,7 @@
 
 <script>
 import { mapGetters } from "vuex";
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 import OpeningTipSettings from '@/views/base/openingTipSettings.vue'
 import OpeningAnimationSettings from '@/views/base/openingAnimationSettings.vue'
 import PasswordSettings from "@/views/base/passwordSettings.vue";
@@ -93,7 +93,7 @@ import CoverBase from "@/views/base/coverBase.vue";
 export default {
   components: {
     Editor,
-    MaterialSelectorForEditor,
+    MaterialSelector,
     OpeningTipSettings,
     OpeningAnimationSettings,
     PasswordSettings,

packages/qjkankan-editor/src/views/base/backgroundMusicSettings.vue

@@ -19,7 +19,7 @@
     </template>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :title="select_material"
         @cancle="isShowSelectionWindow = false"
         @submit="handleSubmitFromMaterialSelector"
@@ -32,13 +32,13 @@
 
 <script>
 import { mapGetters } from "vuex";
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 import Audio from "@/components/audio/audioButton.vue";
 import {i18n} from "@/lang"
 
 export default {
   components: {
-    MaterialSelectorForEditor,
+    MaterialSelector,
     Audio,
   },
   data() {

packages/qjkankan-editor/src/views/base/coverBase copy.vue

@@ -444,7 +444,7 @@ pc端视频位置 videoPcLoc
       <br />
     </div>
     <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :title="$i18n.t(`gather.select_material`)"
         :isMultiSelection="false"
         @cancle="isShowSelectionWindow = false"
@@ -462,7 +462,7 @@ import { Select, Option, ColorPicker } from "element-ui";
 import { i18n } from "@/lang";
 import { mapGetters } from "vuex";
 import SelectedImage from "@/components/selectedImageInEditor.vue";
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 export default {
   name: "coverBase",
   components: {
@@ -470,7 +470,7 @@ export default {
     Option,
     ColorPicker,
     Switcher,
-    MaterialSelectorForEditor,
+    MaterialSelector,
     SelectedImage,
   },
   data() {

packages/qjkankan-editor/src/views/base/coverBase.vue

@@ -456,7 +456,7 @@ pc端视频位置 videoPcLoc
       <br />
     </div>
     <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :title="$i18n.t(`gather.select_material`)"
         :isMultiSelection="false"
         @cancle="isShowSelectionWindow = false"
@@ -474,7 +474,7 @@ import { Select, Option, ColorPicker } from "element-ui";
 import { i18n } from "@/lang";
 import { mapGetters } from "vuex";
 import SelectedImage from "@/components/selectedImageInEditor.vue";
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 export default {
   name: "coverBase",
   components: {
@@ -482,7 +482,7 @@ export default {
     Option,
     ColorPicker,
     Switcher,
-    MaterialSelectorForEditor,
+    MaterialSelector,
     SelectedImage,
   },
   data() {

packages/qjkankan-editor/src/views/base/customLogoSettings.vue

@@ -30,7 +30,7 @@
     </div>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :title="$i18n.t(`gather.select_material`)"
         @cancle="isShowSelectionWindow = false"
         @submit="handleSubmitFromMaterialSelector"
@@ -43,14 +43,14 @@
 <script>
 import { mapGetters } from "vuex";
 import Switcher from "@/components/shared/Switcher";
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 import { getUserInfo } from "@/api";
 import SelectedImage from "@/components/selectedImageInEditor.vue";
 
 export default {
   components: {
     Switcher,
-    MaterialSelectorForEditor,
+    MaterialSelector,
     SelectedImage,
   },
   data() {

packages/qjkankan-editor/src/views/base/customMaskSettings.vue

@@ -60,7 +60,7 @@
     </div>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :title="$i18n.t(`gather.select_material`)"
         @cancle="isShowSelectionWindow = false"
         @submit="handleSubmitFromMaterialSelector"
@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 import Switcher from "@/components/shared/Switcher";
 import { mapGetters } from "vuex";
 import SelectedImage from "@/components/selectedImageInEditor.vue";
@@ -79,7 +79,7 @@ import { getUserInfo } from "@/api";
 
 export default {
   components: {
-    MaterialSelectorForEditor,
+    MaterialSelector,
     SelectedImage,
     Switcher
   },

packages/qjkankan-editor/src/views/base/openingTipSettings.vue

@@ -43,7 +43,7 @@
     </div>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :title="$i18n.t(`gather.select_material`)"
         :isMultiSelection="false"
         @cancle="isShowSelectionWindow = false"
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 import { mapGetters } from "vuex";
 import Switcher from "@/components/shared/Switcher";
 import RangeItem from "@/components/rangeItem/index.vue";
@@ -63,7 +63,7 @@ import SelectedImage from "@/components/selectedImageInEditor.vue";
 
 export default {
   components: {
-    MaterialSelectorForEditor,
+    MaterialSelector,
     Switcher,
     RangeItem,
     SelectedImage,

packages/qjkankan-editor/src/views/explanation/explanationSettings.vue

@@ -43,7 +43,7 @@
     </div>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :title="$i18n.t('gather.select_material')"
         @cancle="isShowSelectionWindow = false"
         @submit="handleSubmitFromMaterialSelector"
@@ -57,13 +57,13 @@
 <script>
 import { mapGetters } from "vuex";
 import Switcher from "@/components/shared/Switcher";
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 import Audio from "@/components/audio/audioButton.vue";
 
 export default {
   components: {
     Switcher,
-    MaterialSelectorForEditor,
+    MaterialSelector,
     Audio,
   },
   computed: {

packages/qjkankan-editor/src/views/hotspot/hotspotType/audio.vue

@@ -18,7 +18,7 @@
     </template>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowSelect">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :title="$i18n.t('hotspot.select_audio')"
         @cancle="isShowSelect = false"
         @submit="handleSelect"
@@ -31,14 +31,14 @@
 </template>
 
 <script>
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 import Audio from "@/components/audio/audioButton.vue";
 
 
 export default {
   props:['audio'],
   components: {
-    MaterialSelectorForEditor,
+    MaterialSelector,
     Audio,
   },
   data() {

packages/qjkankan-editor/src/views/hotspot/hotspotType/image.vue

@@ -24,7 +24,7 @@
     </div>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowSelect">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :title="$i18n.t('hotspot.select_image')"
         @cancle="isShowSelect = false"
         @submit="handleSelect"
@@ -37,11 +37,11 @@
 </template>
 
 <script>
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 
 export default {
   components:{
-    MaterialSelectorForEditor,
+    MaterialSelector,
   },
   props:['image'],
   data(){

packages/qjkankan-editor/src/views/hotspot/hotspotType/video.vue

@@ -23,7 +23,7 @@
     </div>
 
     <div class="dialog" style="z-index: 2000" v-if="isShowSelect">
-      <MaterialSelectorForEditor
+      <MaterialSelector
         :title="$i18n.t('hotspot.change_video')"
         @cancle="isShowSelect = false"
         @submit="handleSelect"
@@ -35,11 +35,11 @@
 </template>
 
 <script>
-import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue"
+import MaterialSelector from "@/components/materialSelector.vue"
 
 export default {
   components: {
-    MaterialSelectorForEditor,
+    MaterialSelector,
   },
   props: ['video'],
   data() {

packages/qjkankan-editor/src/views/material/works/index.vue

@@ -81,9 +81,15 @@
     <preview v-if="showItem" :name="showItem.name" :show="showPreview"
       :ifr="`./show.html?id=${showItem.id}&lang=${$lang}`" :dark="false" @close="showPreview = false" />
     <div class="dialog" style="z-index: 10" v-if="isShowMaterialSelector">
-      <MaterialSelector :title="select_material" @cancle="isShowMaterialSelector = false"
-        @submit="handleSubmitFromMaterialSelector" :selectableType="['pano', '3D']" :isMultiSelection="true"
-        :workId="newWorkId" initialMaterialType="pano" />
+      <MaterialSelector
+        :isDarkTheme="false"
+        :title="select_material"
+        :selectableType="['pano', '3D']"
+        :isMultiSelection="true"
+        :workId="newWorkId" initialMaterialType="pano"
+        @cancle="isShowMaterialSelector = false"
+        @submit="handleSubmitFromMaterialSelector"
+      />
     </div>
   </div>
 </template>
@@ -94,7 +100,7 @@ import preview from "@/components/preview";
 import workCardSkeleton from "@/components/workCardSkeleton.vue";
 import config from "@/config";
 import { debounce } from "@/utils/other.js"
-import MaterialSelector from "@/components/materialSelectorForManageCenter.vue";
+import MaterialSelector from "@/components/materialSelector.vue";
 import { mapGetters } from "vuex";
 import { i18n } from "@/lang"
 import { $waiting } from "@/components/shared/loading";