update

packages/qjkankan-editor/.env.testprod

@@ -7,5 +7,5 @@ VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
 VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
 VUE_APP_ORIGIN=
 VUE_APP_URL_FILL=/qjkankan
-VUE_APP_DEBBUG_FLAG=0621-01
-VUE_APP_DEBBUG_NOTIFY=0
+VUE_APP_DEBBUG_FLAG=0626-02
+VUE_APP_DEBBUG_NOTIFY=1

packages/qjkankan-editor/src/assets/style/style.pc.editor.less

@@ -793,7 +793,7 @@ textarea:-ms-input-placeholder {
   .ui-message-content {
     font-size: 14px;
     margin-top: 20px;
-    margin-bottom: 30px;
+    // margin-bottom: 30px;
     word-break: break-all;
   }
 }

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

@@ -1,23 +1,31 @@
 <template>
   <div class="table-select">
-    <span class="title">{{$i18n.t(`gather.select_material`)}}</span>
-    <div class="close-btn"><i class="iconfont icon-close" @click="$emit('cancle')"></i></div>
+    <span class="title">{{ $i18n.t(`gather.select_material`) }}</span>
+    <div class="close-btn">
+      <i class="iconfont icon-close" @click="$emit('cancle')"></i>
+    </div>
 
     <div class="material-tab">
-      <a class="material-tab-item" @click.prevent="currentMaterialType = 'pano'">
-        <span class="text" :class="{ active: currentMaterialType === 'pano' }">{{$i18n.t(`gather.panorama`)}}</span>
+      <a
+        class="material-tab-item"
+        @click.prevent="currentMaterialType = 'pano'"
+      >
+        <span
+          class="text"
+          :class="{ active: currentMaterialType === 'pano' }"
+          >{{ $i18n.t(`gather.panorama`) }}</span
+        >
         <div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
       </a>
       <a class="material-tab-item" @click.prevent="currentMaterialType = '3D'">
-        <span class="text" :class="{ active: currentMaterialType === '3D' }">{{$i18n.t(`gather.scene`)}}</span>
+        <span class="text" :class="{ active: currentMaterialType === '3D' }">{{
+          $i18n.t(`gather.scene`)
+        }}</span>
         <div v-if="currentMaterialType === '3D'" class="bottom-line"></div>
       </a>
     </div>
-    
-    <div
-      class="filter"
-      :class="{active: isSearchKeyInputActive}"
-    >
+
+    <div class="filter" :class="{ active: isSearchKeyInputActive }">
       <input
         type="text"
         :placeholder="$i18n.t(`gather.keywords`)"
@@ -25,19 +33,28 @@
         @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 icon-toast_red clear-icon"></i>
+      <i v-if="!searchKey" class="iconfont icon-editor_search search-icon" />
+      <i
+        v-if="searchKey"
+        @click="searchKey = ''"
+        class="iconfont icon-toast_red clear-icon"
+      ></i>
     </div>
 
     <div class="table table-pano" v-show="currentMaterialType === 'pano'">
-      <div
-        v-show="panoList.length !== 0"
-        class="table-body"
-      >
+      <div v-show="panoList.length !== 0" class="table-body">
+       测试数据-- {{
+          panoList.map((i) => {
+            let t = {};
+            t["id"] = i.id;
+            t["sceneTitle"] = i.sceneTitle;
+            return t;
+          })
+        }}
         <div
           class="table-body-row"
-          v-for="(item,i) in panoList"
-          :key="i"
+          v-for="(item) in panoList"
+          :key="`${item.id}`"
           @click="onClickRow"
         >
           <span class="table-data">
@@ -45,17 +62,19 @@
               class="checkbox"
               :isLightTheme="false"
               :isMultiSelection="false"
-              :isCheckedInitial="select.some(i => i.id === item.id)"
-              @change="v => selectItem(item, v)"
+              :isCheckedInitial="select.some((i) => i.id === item.id)"
+              @change="(v) => selectItem(item, v)"
             />
           </span>
           <span class="table-data">
             <div class="list-img">
-              <img :src="item.icon + $imgsuffix" alt="">
+              <img :src="item.icon + $imgsuffix" alt="" />
             </div>
           </span>
           <span class="table-data">
-            <span class="name ellipsis" v-title="item.sceneTitle">{{item.sceneTitle}}</span>
+            <span class="name ellipsis" v-title="item.sceneTitle">{{
+              item.sceneTitle
+            }}</span>
           </span>
         </div>
         <!-- <div class="no-more-data">
@@ -65,25 +84,28 @@
       <!-- 无数据时的提示 -->
       <div v-show="!(panoList.length !== 0)" class="no-data">
         <div v-if="latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_search_dark.png')" alt="">
-          <span>{{$i18n.t(`gather.no_search_result`)}}</span>
+          <img
+            :src="require('@/assets/images/default/empty_search_dark.png')"
+            alt=""
+          />
+          <span>{{ $i18n.t(`gather.no_search_result`) }}</span>
         </div>
         <div v-if="!latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_dark.png')" alt="">
-          <span>{{$i18n.t(`gather.no_material_result`)}}</span>
+          <img
+            :src="require('@/assets/images/default/empty_dark.png')"
+            alt=""
+          />
+          <span>{{ $i18n.t(`gather.no_material_result`) }}</span>
         </div>
       </div>
     </div>
 
     <div class="table table-3D" v-show="currentMaterialType === '3D'">
-      <div
-        v-show="scene3DList.length !== 0"
-        class="table-body"
-      >
+      <div v-show="scene3DList.length !== 0" class="table-body">
         <div
           class="table-body-row"
-          v-for="(item,i) in scene3DList"
-          :key="i"
+          v-for="(item) in scene3DList"
+          :key="`${item.id}`"
           @click="onClickRow"
         >
           <span class="table-data">
@@ -91,17 +113,19 @@
               class="checkbox"
               :isLightTheme="false"
               :isMultiSelection="false"
-              :isCheckedInitial="select.some(i => i.id === item.id)"
-              @change="v => selectItem(item, v)"
+              :isCheckedInitial="select.some((i) => i.id === item.id)"
+              @change="(v) => selectItem(item, v)"
             />
           </span>
           <span class="table-data">
             <div class="list-img">
-              <img :src="item.icon + $imgsuffix" alt="">
+              <img :src="item.icon + $imgsuffix" alt="" />
             </div>
           </span>
           <span class="table-data">
-            <span class="name ellipsis" v-title="item.sceneTitle">{{item.sceneTitle}}</span>
+            <span class="name ellipsis" v-title="item.sceneTitle">{{
+              item.sceneTitle
+            }}</span>
           </span>
         </div>
         <!-- <div class="no-more-data">
@@ -111,21 +135,33 @@
       <!-- 无数据时的提示 -->
       <div v-show="!(scene3DList.length !== 0)" class="no-data">
         <div v-if="latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_search_dark.png')" alt="">
-          <span>{{$i18n.t(`gather.no_search_result`)}}</span>
+          <img
+            :src="require('@/assets/images/default/empty_search_dark.png')"
+            alt=""
+          />
+          <span>{{ $i18n.t(`gather.no_search_result`) }}</span>
         </div>
         <div v-if="!latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_dark.png')" alt="">
-          <span>{{$i18n.t(`gather.no_material_result`)}}</span>
+          <img
+            :src="require('@/assets/images/default/empty_dark.png')"
+            alt=""
+          />
+          <span>{{ $i18n.t(`gather.no_material_result`) }}</span>
         </div>
       </div>
     </div>
 
     <div class="btns">
       <div>
-        <button class="ui-button deepcancel" @click="$emit('cancle')">{{$i18n.t(`gather.cancel`)}}</button>
-        <button class="ui-button submit" :class="{disable: !select.length}" @click="onClickComfirm">
-          {{$i18n.t(`gather.comfirm`)}}
+        <button class="ui-button deepcancel" @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>
@@ -134,98 +170,111 @@
 
 <script>
 import { mapGetters } from "vuex";
-import { debounce } from "@/utils/other.js"
+import { debounce } from "@/utils/other.js";
 import RadioOrCheckbox from "@/components/shared/RadioOrCheckbox.vue";
 
 export default {
-  props:{
+  props: {
     primaryKey: {
-      default: 'id'
+      default: "id",
     },
     isMultiSelection: {
       type: Boolean,
       default: false,
-    }
+    },
   },
-  components:{
+  components: {
     RadioOrCheckbox,
   },
-  computed:{
-    ...mapGetters([
-      'info',
-    ]),
+  computed: {
+    ...mapGetters(["info"]),
     panoList() {
-      return this.info.scenes.filter((item) => {
-        return item.type === 'pano'
-      }).filter((item) => {
-        if (this.searchKey) {
-          return item.sceneTitle.includes(this.searchKey)
-        } else {
-          return item
-        }
-      })
+      return this.info.scenes
+        .filter((item) => {
+          return item.type === "pano";
+        })
+        .filter((item) => {
+          if (this.searchKey) {
+            return item.sceneTitle.includes(this.searchKey);
+          } else {
+            return item;
+          }
+        });
     },
     scene3DList() {
-      return this.info.scenes.filter((item) => {
-        return item.type === '4dkk'
-      }).filter((item) => {
-        if (this.searchKey) {
-          return item.sceneTitle.includes(this.searchKey)
-        } else {
-          return item
+      return this.info.scenes
+        .filter((item) => {
+          return item.type === "4dkk";
+        })
+        .filter((item) => {
+          if (this.searchKey) {
+            return item.sceneTitle.includes(this.searchKey);
+          } else {
+            return item;
+          }
+        });
+    },
+  },
+  watch: {
+    searchKey: {
+      handler(val, old) {
+        if (val && old !== val) {
+          console.log("need update");
+          // this.$forceUpdate();
         }
-      })
-    }
+      },
+    },
   },
-  data () {
+  data() {
     return {
       select: [],
       isSearchKeyInputActive: false,
-      searchKey:'', // 搜索关键词
-      latestUsedSearchKey: '',
-      currentMaterialType: 'pano',
-    }
+      searchKey: "", // 搜索关键词
+      latestUsedSearchKey: "",
+      currentMaterialType: "pano",
+    };
   },
 
   methods: {
     selectItem(item, v) {
-      item.materialType = this.currentMaterialType  // 三维场景数据没有type字段来表明自己是三维场景。所以统一加一个字段。
+      item.materialType = this.currentMaterialType; // 三维场景数据没有type字段来表明自己是三维场景。所以统一加一个字段。
       if (this.isMultiSelection) {
         if (v) {
-          this.select.push(item)
+          this.select.push(item);
         } else {
           const toDeleteIdx = this.select.findIndex((eachSelect) => {
-            return eachSelect.id === item.id
-          })
+            return eachSelect.id === item.id;
+          });
           if (toDeleteIdx >= 0) {
-            this.select.splice(toDeleteIdx, 1)
+            this.select.splice(toDeleteIdx, 1);
           }
         }
       } else {
         if (v) {
-          this.select = [item]
+          this.select = [item];
         } else {
-          this.select = []
+          this.select = [];
         }
       }
     },
     onClickRow(e) {
-      const checkboxNodeList = e.currentTarget.getElementsByClassName('selection-click-target')
+      const checkboxNodeList = e.currentTarget.getElementsByClassName(
+        "selection-click-target"
+      );
       if (checkboxNodeList && checkboxNodeList[0]) {
-        checkboxNodeList[0].click()
+        checkboxNodeList[0].click();
       }
     },
-    onClickComfirm: debounce(function() {
-      this.$emit('submit', this.select)
+    onClickComfirm: debounce(function () {
+      this.$emit("submit", this.select);
     }, 250),
   },
-  mounted() {
-  }
-}
+  mounted() {},
+};
 </script>
 
 <style lang="less" scoped>
-.ellipsis{
+.ellipsis {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -241,7 +290,7 @@ export default {
   transform: translateX(-50%) translateY(-50%);
   width: 600px;
   height: 730px;
-  background: #1A1B1D;
+  background: #1a1b1d;
   border-radius: 4px;
   border: 1px solid #404040;
   padding: 26px;
@@ -285,7 +334,7 @@ export default {
       bottom: -4px;
       width: 16px;
       height: 2px;
-      background: #0076F6;
+      background: #0076f6;
       border-radius: 1px;
     }
   }
@@ -341,11 +390,14 @@ export default {
 .table {
   margin-top: 20px;
   // border: @table-border-size solid #404040;
-  background: #1A1B1D;
+  background: #1a1b1d;
   width: 100%;
   height: @table-height;
   > .table-body {
-    height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
+    height: calc(
+      @table-height - @table-head-row-height - @table-border-size -
+        @table-border-size
+    );
     overflow: auto;
     display: inline-block;
     width: 100%;
@@ -358,8 +410,8 @@ export default {
         background: #252526;
       }
       > .table-data {
-        font-size:14px;
-        line-height:50px;
+        font-size: 14px;
+        line-height: 50px;
         height: 100%;
         color: #fff;
         > .list-img {
@@ -399,7 +451,10 @@ export default {
     }
   }
   > .no-data {
-    height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
+    height: calc(
+      @table-height - @table-head-row-height - @table-border-size -
+        @table-border-size
+    );
     width: 100%;
     position: relative;
     > div {
@@ -484,14 +539,14 @@ export default {
     top: 50%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
-    background: #0076F6;
+    background: #0076f6;
     pointer-events: none;
     opacity: 0;
   }
 }
 
 .checkbox > input:checked ~ .for-outer-circle {
-  border: 1px solid #0076F6;
+  border: 1px solid #0076f6;
 }
 
 .checkbox > input:checked ~ .for-inner-circle {
@@ -512,4 +567,4 @@ export default {
     }
   }
 }
-</style>
+</style>

packages/qjkankan-editor/src/components/shared/message/Alert.vue

@@ -1,99 +1,121 @@
 <template>
-    <popup ref="Message" :show="show">
-        <div class="ui-message ui-message-confirm" :style="{width:$lang=='zh'?'400px':'auto'}" :class="[isMaterial?'message-material':'dark']">
-            <div class="ui-message-header" :class="{'header-material':isMaterial}">
-                <span>{{title}}</span>
-                <span @click="onNo" v-if="showCloseIcon">
-                    <i class="iconfont icon-close"></i>
-                </span>
-            </div>
-            <div class="ui-message-main" :class="{'main-material':isMaterial}">
-                <!-- <div class="ui-message-icon" :class="[icon?icon:null]"></div> -->
-                <div class="ui-message-title">{{tips}}</div>
-                <div class="ui-message-content" v-html="content"></div>
-            </div>
-            <div class="ui-message-footer" :class="{'footer-material':isMaterial}" v-if="okLink">
-                <a
-                    :href="noLink"
-                    target="_blank"
-                    class="ui-button link cancel"
-                    @click="onNo"
-                >{{noText}}</a>
-                <a
-                    :href="okLink"
-                    target="_blank"
-                    class="ui-button link submit"
-                    @click="onOk"
-                >{{okText}}</a>
-            </div>
-            <div v-else class="ui-message-footer"  :class="{'footer-material':isMaterial}">
-                <!-- <button class="ui-button cancel" :class="{deepcancel:!isMaterial}" @click="onNo">{{noText}}</button> -->
-                <button class="ui-button submit" @click="onOk">{{okText}}</button>
-                <button v-if="ok2" class="ui-button submit" @click="onOk2">{{ok2Text}}</button>
-            </div>
-        </div>
-    </popup>
+  <popup ref="Message" :show="show">
+    <div
+      class="ui-message ui-message-confirm"
+      :style="{ width: $lang == 'zh' ? '400px' : 'auto' }"
+      :class="[isMaterial ? 'message-material' : 'dark']"
+    >
+      <div class="ui-message-header" :class="{ 'header-material': isMaterial }">
+        <span>{{ title }}</span>
+        <span @click="onNo" v-if="showCloseIcon">
+          <i class="iconfont icon-close"></i>
+        </span>
+      </div>
+      <div class="ui-message-main" :class="{ 'main-material': isMaterial }">
+        <!-- <div class="ui-message-icon" :class="[icon?icon:null]"></div> -->
+        <div class="ui-message-title">{{ tips }}</div>
+        <div class="ui-message-content" v-html="content"></div>
+      </div>
+      <div
+        class="ui-message-footer"
+        :class="{ 'footer-material': isMaterial }"
+        v-if="okLink"
+      >
+        <a
+          :href="noLink"
+          target="_blank"
+          class="ui-button link cancel"
+          @click="onNo"
+          >{{ noText }}</a
+        >
+        <a
+          :href="okLink"
+          target="_blank"
+          class="ui-button link submit"
+          @click="onOk"
+          >{{ okText }}</a
+        >
+      </div>
+      <div
+        v-else
+        class="ui-message-footer"
+        :class="{ 'footer-material': isMaterial }"
+      >
+        <!-- <button class="ui-button cancel" :class="{deepcancel:!isMaterial}" @click="onNo">{{noText}}</button> -->
+        <button class="ui-button submit" @click="onOk">{{ okText }}</button>
+        <button v-if="ok2" class="ui-button submit" @click="onOk2">
+          {{ ok2Text }}
+        </button>
+      </div>
+    </div>
+  </popup>
 </template>
 <script>
-import {i18n} from "@/lang"
+import { i18n } from "@/lang";
 import Popup from "../popup";
 export default {
-    name: "ui-confirm",
-    components: {
-        Popup
+  name: "ui-confirm",
+  components: {
+    Popup,
+  },
+  data() {
+    return {
+      isMaterial:
+        window.location.pathname.indexOf("material.html") > -1 ||
+        window.location.pathname.indexOf("showMobile.html") > -1 ||
+        window.location.pathname.indexOf("show.html") > -1,
+      show: false,
+      showCloseIcon: true,
+      duration: 0,
+      title: i18n.t("tips.title"),
+      tips: "",
+      icon: null,
+      content: "",
+      okText: i18n.t("common.set"),
+      ok2Text: i18n.t("common.set"),
+      noText: i18n.t("common.giveup"),
+      okLink: null,
+      noLink: null,
+      ok: null,
+      ok2: null,
+      no: null,
+    };
+  },
+  methods: {
+    onOk() {
+      if (this.ok && this.ok(this) === false) {
+        return;
+      }
+      this.onClose();
     },
-    data() {
-        return {
-            isMaterial: window.location.pathname.indexOf('material.html')>-1 || window.location.pathname.indexOf('showMobile.html')>-1 || window.location.pathname.indexOf('show.html')>-1,
-            show: false,
-            showCloseIcon: true,
-            duration: 0,
-            title: i18n.t("tips.title"),
-            tips: "",
-            icon: null,
-            content: "",
-            okText: i18n.t("common.set"),
-            ok2Text: i18n.t("common.set"),
-            noText: i18n.t("common.giveup"),
-            okLink: null,
-            noLink: null,
-            ok: null,
-            ok2: null,
-            no: null
-        };
+    onOk2() {
+      if (this.ok2 && this.ok2(this) === false) {
+        return;
+      }
+      this.onClose();
     },
-    methods: {
-        onOk() {
-            if (this.ok && this.ok(this) === false) {
-                return;
-            }
-            this.onClose();
-        },
-        onOk2() {
-          if (this.ok2 && this.ok2(this) === false) {
-              return;
-          }
-          this.onClose();
-        },
-        onNo() {
-            this.no && this.no();
-            this.onClose();
-        },
-        onClose() {
-            setTimeout(() => {
-                this.show = false;
-                document.body.removeChild(this.$el);
-                this.$destroy();
-            }, this.duration);
-        }
-    }
+    onNo() {
+      this.no && this.no();
+      this.onClose();
+    },
+    onClose() {
+      setTimeout(() => {
+        this.show = false;
+        document.body.removeChild(this.$el);
+        this.$destroy();
+      }, this.duration);
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .ui-message {
-    width: 400px;
-    min-width: 400px;
-    height: 230px;
+  width: 400px;
+  min-width: 400px;
+
+  &:lang(en) {
+    height: 260px;
+}
 }
-</style>
+</style>

packages/qjkankan-editor/src/lang/_en.json

@@ -752,6 +752,10 @@
     "updateTime": "Modified"
   },
   "baseSetting": {
+    "电话": "Tel",
+    "链接": "Link",
+    "弹出层打开": "Pop-up Notification",
+    "新窗口打开": "New Tab",
     "opa1": "Start with asteroid",
     "opa2": "Start with asteroid cruise",
     "opa3": "Start with asteroid zoom",
@@ -765,7 +769,19 @@
     "logo": "Custom Logo",
     "customCover": "Custom Mask",
     "customButton": "Custom Button",
-    "openCover": "Opening Cover"
+    "openCover": "Opening Cover",
+    "素材": "Material",
+    "名称": "Title",
+    "大小": "Size",
+    "分辨率": "Resolution",
+    "创建时间": "Created",
+    "修改时间": "Modified",
+    "封面": "Cover",
+    "场景标题": "Scene Title",
+    "拍摄时间": "Shooting Time",
+    "一级分组": "1st Grouping",
+    "二级分组": "2nd Grouping",
+    "默认二级分组": "Default as 2nd grouping"
   },
   "customButton": {
     "phone": "Tel",
@@ -827,7 +843,7 @@
       "personalized_tag": "Custom labels"
     },
     "add_icon": "Add Icon",
-    "add_custom_icon_rule": "300*300 pixels, jpg format is recommended",
+    "add_custom_icon_rule": "300*300 pixels, jpg/png/gif format is recommended",
     "add_serial_frame_rule": "Maximum width: 300 pixels, unlimited height",
     "frame_total_number": "Total Frames",
     "frame_duration": "Total Play Time",
@@ -843,6 +859,7 @@
     "text_num_per_line": "每行显示",
     "words": "字",
     "hotspot_title": "Title",
+    "show_hotspot_title":"Show Title",
     "title_show_mode": "Display Methods",
     "show_on_hover": "Hovering",
     "always_show": "Show",
@@ -943,7 +960,7 @@
     "FAILURE_3103": "Server someData.json file does not exist",
     "FAILURE_3200": "Failed to request for third-party API",
     "FAILURE_3201": "Failed to request the interface",
-    "FAILURE_3104": "The folder with the same name has already existed, please move the material directly",
+    "FAILURE_3104": "The folder with the same name has already existed, <br/> please move the material directly",
     "FAILURE_error": "Network exception, please try again later",
     "tips": "Tips",
     "relogin": "Invalid login status; please log in again",

packages/qjkankan-editor/src/lang/_zh.json

@@ -843,6 +843,7 @@
     "text_num_per_line": "每行显示",
     "words": "字",
     "hotspot_title": "热点标题",
+    "show_hotspot_title":"是否显示标题",
     "title_show_mode": "显示方式",
     "show_on_hover": "鼠标悬浮",
     "always_show": "一直显示",

packages/qjkankan-editor/src/views/hotspot/EditPanel.vue

@@ -53,7 +53,7 @@
 
           <div class="hotspot-show-wrapper">
             <div class="remark">
-              {{ $i18n.t("hotspot.title_show_mode") }}
+              {{ $i18n.t("hotspot.show_hotspot_title") }}
             </div>
             <Switcher
               :value="tempHotpotLabelShow"
@@ -734,7 +734,7 @@ export default {
       > .title-input-wrapper {
         position: relative;
         border: 1px solid rgba(151, 151, 151, 0.2);
-        padding: 0 ;
+        padding: 0;
         background: #1a1b1d;
         border-radius: 2px;
         min-height: 36px;
@@ -743,6 +743,7 @@ export default {
         &:focus-within {
           border-color: #0076f6;
         }
+
         > input {
           border: none;
           background: transparent;
@@ -825,6 +826,7 @@ export default {
     background-color: transparent;
     color: white;
     border: none;
+    padding-right: 60px;
   }
 }
 </style>

packages/qjkankan-editor/src/views/material/folderMixinFactory.js

@@ -1,7 +1,10 @@
 import CreateFolder from "./popup/CreateFolder";
 import RenameFolder from "./popup/RenameFolder";
 import MoveFolder from "./popup/MoveFolder";
-import { nodeIdList2nodeInfoListByNodeTree, preOrderTraversalSearch } from "@/utils/other.js";
+import {
+  nodeIdList2nodeInfoListByNodeTree,
+  preOrderTraversalSearch,
+} from "@/utils/other.js";
 import {
   getFolderTree,
   createFolder as createFolderApi,
@@ -9,7 +12,7 @@ import {
   moveToFolder,
   delFolder,
 } from "@/api";
-import { i18n } from "@/lang"
+import { i18n } from "@/lang";
 
 export default function (materialType) {
   return {
@@ -31,71 +34,76 @@ export default function (materialType) {
             id: 1,
           },
         ],
-      }
+      };
     },
     computed: {
       currentFolderId() {
-        return this.folderPath[this.folderPath.length - 1].id
+        return this.folderPath[this.folderPath.length - 1].id;
       },
       folderListInPath() {
         if (this.list) {
           return this.list.filter((item) => {
-            return item.type === 'dir'
-          })
+            return item.type === "dir";
+          });
         } else {
-          return []
+          return [];
         }
-      }
-    },
-    mounted() {
+      },
     },
+    mounted() {},
     watch: {
       folderPath: {
         handler: function () {
-          this.refreshListDebounced()
+          this.refreshListDebounced();
         },
         deep: true,
       },
     },
     methods: {
       validateNewFolderName(name) {
-        const isUnique = (this.folderListInPath.findIndex((item) => {
-          return item.name === name
-        }) === -1)
+        const isUnique =
+          this.folderListInPath.findIndex((item) => {
+            return item.name === name;
+          }) === -1;
         if (isUnique) {
           return {
             isValid: true,
-            tip: '',
-          }
+            tip: "",
+          };
         } else {
           return {
             isValid: false,
-            tip: this.$i18n.t('gather.folder_name_already_used')
-          }
+            tip: this.$i18n.t("gather.folder_name_already_used"),
+          };
         }
       },
       onSubmitNewFolder(v) {
-        this.isShowNewFolder = false
+        this.isShowNewFolder = false;
         createFolderApi(
           {
-            ancestors: this.folderPath.map((item) => {
-              return item.id
-            }).join(','),
+            ancestors: this.folderPath
+              .map((item) => {
+                return item.id;
+              })
+              .join(","),
             name: v,
             parentId: this.currentFolderId,
             type: materialType,
           },
           () => {
-            this.$msg.success(this.$i18n.t('gather.success'))
-            this.refreshListDebounced()
+            this.$msg.success(this.$i18n.t("gather.success"));
+            this.refreshListDebounced();
           },
-          () => {
-            this.$msg.error(this.$i18n.t('tips.network_error'))
+          (error) => {
+            if (error && error.code !== 3104) {
+              debugger
+              this.$msg.error(this.$i18n.t("tips.network_error"));
+            }
           }
-        )
+        );
       },
       onSubmitRenameFolder(newName) {
-        this.isShowRenameFolder = false
+        this.isShowRenameFolder = false;
         renameFolderApi(
           {
             id: this.popupItem.id,
@@ -104,67 +112,70 @@ export default function (materialType) {
             type: materialType,
           },
           () => {
-            this.$msg.success(this.$i18n.t('gather.edit_success'))
+            this.$msg.success(this.$i18n.t("gather.edit_success"));
             const index = this.list.findIndex((eachItem) => {
-              return eachItem.id === this.popupItem.id
-            })
+              return eachItem.id === this.popupItem.id;
+            });
             if (index >= 0) {
-              this.list[index].name = newName
+              this.list[index].name = newName;
             } else {
-              console.error('在素材列表里没找到要重命名的那一项！');
+              console.error("在素材列表里没找到要重命名的那一项！");
             }
             this.popupItem = null;
           },
-          () => {
-            this.$msg.error(this.$i18n.t('tips.network_error'))
+          (error) => {
+            if (error && error.code !== 3104) {
+              this.$msg.error(this.$i18n.t("tips.network_error"));
+            }
             this.popupItem = null;
           }
-        )
+        );
       },
       validateRenameFolderName(oldName, newName) {
         if (oldName === newName) {
           return {
             isValid: true,
-            tip: '',
-          }
+            tip: "",
+          };
         }
-        const isUnique = (this.folderListInPath.findIndex((item) => {
-          return item.name === newName
-        }) === -1)
+        const isUnique =
+          this.folderListInPath.findIndex((item) => {
+            return item.name === newName;
+          }) === -1;
         if (isUnique) {
           return {
             isValid: true,
-            tip: '',
-          }
+            tip: "",
+          };
         } else {
           return {
             isValid: false,
-            tip: this.$i18n.t('gather.folder_name_already_used')
-          }
+            tip: this.$i18n.t("gather.folder_name_already_used"),
+          };
         }
       },
       onClickMoveFolder() {
         getFolderTree({
           type: materialType,
         }).then((res) => {
-          this.folderTree = res.data
-          console.log('onClickMoveFolder->>', res.data, this.folderTree);
+          this.folderTree = res.data;
+          console.log("onClickMoveFolder->>", res.data, this.folderTree);
           if (this.folderTree.children.length === 0) {
             this.$confirm({
-              title: this.$i18n.t('gather.move_folder_to'),
-              content: this.$i18n.t('gather.no_folder_need_create'),
-            })
+              title: this.$i18n.t("gather.move_folder_to"),
+              content: this.$i18n.t("gather.no_folder_need_create"),
+            });
           } else {
-            this.isShowMoveFolder = true
+            this.isShowMoveFolder = true;
           }
-        })
+        });
       },
       filterAncestors(ancestors) {
         if (ancestors && ancestors.length > 0) {
-          const array = ancestors.split(',').map(item => item);
-          return array.join(',')
+          const array = ancestors.split(",").map((item) => item);
+          return array.join(",");
         } else {
-          return ''
+          return "";
         }
       },
       async onSubmitMoveFolder(targetFolderId) {
@@ -172,19 +183,25 @@ export default function (materialType) {
         //   return item.id
         // }).join(',')
         const target = this.findFolderTreeById(this.folderTree, targetFolderId);
-        let targetAncestors = target && target.ancestors && target.ancestors.length > 0 ? this.filterAncestors(target.ancestors) + ',' + target.id : '1'
-        console.log('filter-targetAncestors', targetAncestors);
-        const res = await moveToFolder(this.selectedList, targetFolderId, targetAncestors);
+        let targetAncestors =
+          target && target.ancestors && target.ancestors.length > 0
+            ? this.filterAncestors(target.ancestors) + "," + target.id
+            : "1";
+        console.log("filter-targetAncestors", targetAncestors);
+        const res = await moveToFolder(
+          this.selectedList,
+          targetFolderId,
+          targetAncestors
+        );
         // console.log('res', res.code === 0);
         if (res) {
-          this.$msg.success(this.$i18n.t('gather.success'))
+          this.$msg.success(this.$i18n.t("gather.success"));
           this.$nextTick(() => {
             this.isShowMoveFolder = false;
-            this.selectedList = []
-            this.refreshListDebounced()
+            this.selectedList = [];
+            this.refreshListDebounced();
           });
         }
-
       },
 
       findFolderTreeById(folderTree, id) {
@@ -204,9 +221,9 @@ export default function (materialType) {
       delFolder(id, onSuccess) {
         if (this.uploadListForUI.length > 0) {
           this.$confirm({
-            title: i18n.t('tips.title'),
-            content: i18n.t('gather.can_not_delete_folder_when_uploading'),
-          })
+            title: i18n.t("tips.title"),
+            content: i18n.t("gather.can_not_delete_folder_when_uploading"),
+          });
         } else {
           this.$confirm({
             title: i18n.t("gather.delete_folder"),
@@ -215,71 +232,85 @@ export default function (materialType) {
             ok: () => {
               delFolder(id).then(() => {
                 this.$msg.success(i18n.t("gather.delete_success"));
-                this.isRequestingMoreData = true
-                const lastestUsedSearchKey = this.searchKey
-                onSuccess(lastestUsedSearchKey)
+                this.isRequestingMoreData = true;
+                const lastestUsedSearchKey = this.searchKey;
+                onSuccess(lastestUsedSearchKey);
               });
             },
-          })
+          });
         }
       },
       onClickPath(idx) {
-        this.searchKey = ''
-        this.folderPath = this.folderPath.slice(0, idx + 1)
-        this.selectedList = []
+        this.searchKey = "";
+        this.folderPath = this.folderPath.slice(0, idx + 1);
+        this.selectedList = [];
       },
 
       onClickFolder(folder) {
         getFolderTree({
           type: materialType,
         }).then((res) => {
-          this.folderTree = res.data
-          const targetPathIdList = folder.ancestors.split(',').map((item) => {
-            return Number(item)
-          }).filter(i => i)
-          console.log('targetPathIdList', targetPathIdList);
-          targetPathIdList.push(folder.id)
-          this.folderPath = nodeIdList2nodeInfoListByNodeTree(targetPathIdList, this.folderTree)
-          this.searchKey = ''
-          this.selectedList = []
-        })
+          this.folderTree = res.data;
+          const targetPathIdList = folder.ancestors
+            .split(",")
+            .map((item) => {
+              return Number(item);
+            })
+            .filter((i) => i);
+          console.log("targetPathIdList", targetPathIdList);
+          targetPathIdList.push(folder.id);
+          this.folderPath = nodeIdList2nodeInfoListByNodeTree(
+            targetPathIdList,
+            this.folderTree
+          );
+          this.searchKey = "";
+          this.selectedList = [];
+        });
       },
       onClickParentFolder(clickedItem) {
         getFolderTree({
           type: materialType,
         }).then((res) => {
+          this.folderTree = res.data;
 
-          this.folderTree = res.data
+          console.log("clickedItem", clickedItem);
 
-          console.log('clickedItem', clickedItem);
-
-          if (clickedItem.type === 'dir') {
-            const targetPathIdList = clickedItem.ancestors.split(',').map((item) => {
-              return Number(item)
-            })
+          if (clickedItem.type === "dir") {
+            const targetPathIdList = clickedItem.ancestors
+              .split(",")
+              .map((item) => {
+                return Number(item);
+              });
 
-            this.folderPath = nodeIdList2nodeInfoListByNodeTree(targetPathIdList, this.folderTree)
+            this.folderPath = nodeIdList2nodeInfoListByNodeTree(
+              targetPathIdList,
+              this.folderTree
+            );
           } else {
-            let targetNodePath = []
-            preOrderTraversalSearch(this.folderTree, (node) => {
-              if (node.id === clickedItem.dirId) {
-                return true
-              } else {
-                return false
-              }
-            }, targetNodePath)
+            let targetNodePath = [];
+            preOrderTraversalSearch(
+              this.folderTree,
+              (node) => {
+                if (node.id === clickedItem.dirId) {
+                  return true;
+                } else {
+                  return false;
+                }
+              },
+              targetNodePath
+            );
 
             this.folderPath = targetNodePath.map((item) => {
               return {
                 id: item.id,
-                name: item.name
-              }
-            })
+                name: item.name,
+              };
+            });
           }
-          this.searchKey = ''
-          this.selectedList = []
-        })
-      }
-    }
-  }
+          this.searchKey = "";
+          this.selectedList = [];
+        });
+      },
+    },
+  };
 }

packages/qjkankan-view/src/components/assembly/Checkbrowser.vue

@@ -7,7 +7,7 @@
       <div class="browser-list">
           <div class="browser-item" v-for="i in list" :key="i">
               <div class="browser-pic" :class="i"></div>
-              <span class="borwser-name">{{ i }}</span>
+              <span class="browser-name">{{ i }}</span>
           </div>
       </div>
   </div>
@@ -87,7 +87,7 @@ onMounted(() => {})
                   background-image: url('~@/assets/images/browser/browser_Chrome.png');
               }
           }
-          .borwser-name {
+          .browser-name {
               display: block;
               width: 100%;
               font-size: 16px;
@@ -156,7 +156,7 @@ onMounted(() => {})
                   background-image: url('~@/assets/images/browser/browser_Chrome.png');
               }
           }
-          .borwser-name {
+          .browser-name {
               display: block;
               width: 100%;
               text-align: center;