fix: 修复一些问题

Author: ddd702

src/layout/components/LayoutHistory.vue

@@ -13,13 +13,20 @@
         :disable-transitions="true"
         effect="dark"
         round
+        :title="getTitle(tag)"
         :type="
           routeStore.currentRoute?.fullPath === tag.route.fullPath ? '' : 'info'
         "
       >
-        <RouterLink :to="{ path: tag.route.fullPath }">{{
+        <div
+          @click="Utils.toPath(tag.route.fullPath)"
+          class="ck-nav-history-href t-pointer"
+        >
+          {{ getTitle(tag) }}
+        </div>
+        <!-- <RouterLink :to="{ path: tag.route.fullPath }">{{
           getTitle(tag)
-        }}</RouterLink>
+        }}</RouterLink> -->
       </el-tag>
       <!-- </div> -->
     </el-scrollbar>
@@ -47,8 +54,9 @@
 
 <script lang="ts">
 import { defineComponent, inject, ref } from 'vue';
-import { RouterLink } from 'vue-router';
+// import { RouterLink } from 'vue-router';
 import { ElScrollbar } from 'element-plus';
+import Utils from '@/utils';
 import { routeStoreInject, layoutStoreInject, LangEnum } from '@/contants';
 export default defineComponent({
   setup() {
@@ -58,22 +66,29 @@ export default defineComponent({
       // scrollbarRef: ref<InstanceType<typeof ElScrollbar>>(),
       routeStore,
       layoutStore,
+      Utils,
     };
   },
   components: {
-    RouterLink,
+    // RouterLink,
   },
   mounted() {
     this.setScrollLeft();
-    this.routeStore.$subscribe(() => {
+    this.routeStore.$subscribe(async () => {
+      await Utils.sleep(0.2);
       this.setScrollLeft();
     });
   },
   methods: {
     setScrollLeft() {
-      const $targetNav: any = document.querySelector(
+      let $targetNav: any = document.querySelector(
         `#CkNav-${this.routeStore.nowCacheIndex}`
       );
+      if (!$targetNav) {
+        $targetNav = document.querySelector(
+          `#CkNav-${this.routeStore.cacheCount - 2}`
+        );
+      }
       (
         this.$refs['scrollbarRef'] as InstanceType<typeof ElScrollbar>
       )?.setScrollLeft($targetNav?.offsetLeft);
@@ -91,16 +106,16 @@ export default defineComponent({
       }
       const cacheCount = this.routeStore.cacheCount;
       if (
-        this.routeStore.cache[index].route.path ===
-        this.routeStore.currentRoute?.path
+        this.routeStore.cache[index].route.fullPath ===
+        this.routeStore.currentRoute?.fullPath
       ) {
         if (this.routeStore.cache.length >= 1) {
           const nextIndex = index == 0 ? index + 1 : index - 1;
           if (nextIndex >= cacheCount) {
             this.$router.replace({ path: '/' });
           } else {
-            const path = this.routeStore.cache[nextIndex].route.path;
-            this.$router.replace({ path });
+            const path = this.routeStore.cache[nextIndex].route.fullPath;
+            this.$router.replace(path);
           }
         }
       }
@@ -134,6 +149,10 @@ export default defineComponent({
     color: #fff;
   }
 }
+.ck-nav-history-href {
+  max-width: 170px;
+  @include ellipsis();
+}
 .ck-nav-menu {
   @include flexCenter();
   &-text {

src/plugins/axios.ts

@@ -88,22 +88,21 @@ service.interceptors.response.use(
         case 200:
           // [ 示例 ] code === 0 代表没有错误
           return dataAxios;
-          break;
         default:
           // 不是正确的 code
           // 如果config或者data里面有silent字段，不弹出信息
           if (!response.config.silent) {
+            console.info('axios info', response.config);
             if (response.config.params && response.config.params.silent) {
               break;
             }
             if (response.config.data && response.config.data.silent) {
               break;
             }
             errorCreat({ msg: `${errMsg}`, otherinfo });
-          } else {
-            throw new Error(errMsg);
           }
-          break;
+          return Promise.reject({ message: errMsg });
+        // throw new Error(errMsg);
       }
     }
   },

src/stores/layout.ts

@@ -75,6 +75,11 @@ export const useLayoutStore = defineStore({
     }
     const defaultLang = Utils.storage.get(StorageEnum.lang) || 'zh-cn';
     i18n.global.locale = defaultLang;
+    const isMiniScreen =
+      (document as any).querySelector('html')?.offsetWidth <= 500;
+    if (isMiniScreen) {
+      (document as any).querySelector('html').classList.add('is-phone');
+    }
     return {
       langList: [
         {
@@ -91,7 +96,7 @@ export const useLayoutStore = defineStore({
       leftMenuOpen,
       asideMenuActive: '0',
       dark,
-      isMiniScreen: (document as any).querySelector('html')?.offsetWidth <= 500,
+      isMiniScreen,
       asideMenu: [],
       pathLog: [],
       themes: Themes,
@@ -155,12 +160,12 @@ export const useLayoutStore = defineStore({
         return;
       }
       // 根据路径更新active的index
-      const { path } = route;
+      const { fullPath } = route;
       let outIndex = '';
       let tempArr: any = [];
       const findIndex = (item: any) => {
         tempArr.push(item);
-        if (item.path === path) {
+        if (item.path === fullPath) {
           this.pathLog = tempArr;
           outIndex = item.hash;
           return;

src/stores/route.ts

@@ -60,11 +60,21 @@ export const useRouteStore = defineStore({
     },
     nowCacheIndex(state): number {
       return state.cache.findIndex(
-        (n) => n.route.path === state?.currentRoute?.path
+        (n) => n.route.fullPath === state?.currentRoute?.fullPath
       );
     },
   },
   actions: {
+    updateCache(metaObj = {}): void {
+      const { cache } = this;
+      cache[this.nowCacheIndex].route.meta = Object.assign(
+        {},
+        cache[this.nowCacheIndex].route.meta,
+        metaObj
+      );
+      this.cache = cache;
+      Utils.storage.set(StorageEnum.routeCache, this.cache);
+    },
     clearCache(): void {
       this.cache = [];
     },
@@ -95,7 +105,9 @@ export const useRouteStore = defineStore({
         return;
       }
       //查一次原数组是否有此路径，有的话不做操作
-      const delIndex = this.cache.findIndex((n) => n.route.path === path);
+      const delIndex = this.cache.findIndex(
+        (n) => n.route.fullPath === fullPath
+      );
       // delIndex >= 0 && this.cache.splice(delIndex, 1);
       if (delIndex >= 0) {
         return;

src/styles/base.scss

@@ -48,7 +48,6 @@ html {
 *::after {
   box-sizing: border-box;
   margin: 0;
-  font-weight: normal;
 }
 
 .ck-scrollbar{

src/styles/mixins.scss

@@ -45,3 +45,30 @@
     left: -10px;
   }
 }
+/*
+* @name:  文本隐藏 (text-indent: -9999px;有性能问题)
+* @param: $support-for-ie {boolean}  是否支持IE6
+*/
+
+@mixin text-hide($support-for-ie:true) {
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  @if $support-for-ie {
+      *text-indent: -9999px;
+      *text-align: left;
+  }
+}
+@mixin ellipsis() {
+overflow: hidden;
+white-space: nowrap;
+word-break: keep-all;
+text-overflow: ellipsis;
+}
+@mixin clamp($n:2){
+  word-break: break-all;
+  display: -webkit-box;   
+  -webkit-box-orient: vertical;  
+  -webkit-line-clamp: $n;   
+  overflow: hidden;  
+}

src/utils/index.ts

@@ -31,6 +31,14 @@ export default {
       return true;
     }
   },
+  clone: function (obj: any) {
+    //返回一个克隆的对象
+    const newObj: any = {};
+    for (const prop in obj) {
+      newObj[prop] = obj[prop];
+    }
+    return newObj;
+  },
   isDarkMode(): boolean {
     return (
       window.matchMedia &&
@@ -60,4 +68,130 @@ export default {
   goLogin() {
     window.CkRouter.push({ path: '/login' });
   },
+  dateFormat(
+    timestamp: any = new Date().getTime(),
+    format = 'yyyy-MM-dd hh:mm:ss'
+  ): string {
+    if (timestamp == 0) {
+      return '/';
+    }
+    if (String(timestamp).length < 12) {
+      timestamp = timestamp * 1000;
+    }
+    const date = new Date(parseInt(timestamp, 10)),
+      o: any = {
+        'M+': date.getMonth() + 1,
+        'd+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds(),
+        'q+': Math.floor((date.getMonth() + 3) / 3),
+        S: date.getMilliseconds(),
+      };
+
+    if (/(y+)/.test(format)) {
+      format = format.replace(
+        RegExp.$1,
+        (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+      );
+    }
+
+    for (const k in o) {
+      if (new RegExp('(' + k + ')').test(format)) {
+        format = format.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1
+            ? o[k]
+            : ('00' + o[k]).substr(('' + o[k]).length)
+        );
+      }
+    }
+    return format;
+  },
+  /**
+   * 封装七牛云图片的操作(默认会压缩质量到80以及使用webp格式)
+   *
+   * 更多params参数请参考七牛云官方文档
+   * https://developer.qiniu.com/dora/api/1270/the-advanced-treatment-of-images-imagemogr2#imagemogr2-thumbnail-spec
+   */
+  getQnImg(url = '', params: Array<string> = [''], keepParams = true): string {
+    //七牛云
+    if (!url) return '';
+    let result = ['?imageMogr2', 'interlace', '1'];
+    // 处理原始阿里云参数
+    if (keepParams) {
+      const origin = (url.match(/imageView2([\/\w,]+)/) || [])[1];
+      if (origin) {
+        result = result.concat(origin.substr(1).split('/'));
+      }
+    }
+    // 处理调用者的参数
+    result = result.concat(params);
+    // 处理缺省的参数
+    const temp = result.join('/');
+    // 是否gif图片
+    const isGif = /\.gif/.test(url);
+    if (!/quality\//i.test(temp) && !isGif) {
+      //没有设置质量, 那么默认给80, 但gif图片不设置, 不然就不动了
+      result.push('quality');
+      result.push('80');
+    }
+    // if(!/format/i.test(temp) && !isGif && isSupportWebp){
+    //     //如果没有设置格式,同时支持webp格式, 那么用webp
+    //     result.push('format')
+    //     result.push('webp')
+    // }
+    return (
+      url.replace(/\?.*/, '') + (result.length > 1 ? result.join('/') : '')
+    );
+  },
+  getFilePrefix(filename = ''): string | undefined {
+    return filename.split('.').pop();
+  },
+  getJScript(url: string, cb: any): void {
+    console.warn('getJScript');
+    // return
+    cb = typeof cb === 'function' ? cb : void 0;
+    const head = document.getElementsByTagName('head')[0];
+    const script = document.createElement('script') as any;
+    script.type = 'text/javascript';
+    script.onload = script.onreadystatechange = function () {
+      if (
+        !this.readyState ||
+        this.readyState === 'loaded' ||
+        this.readyState === 'complete'
+      ) {
+        cb();
+        script.onload = script.onreadystatechange = null;
+      }
+    };
+    script.src = url;
+    head.appendChild(script);
+  },
+  onRange(num: number, min: number, max: number): boolean {
+    if (num < min || num > max) {
+      return false;
+    }
+    return true;
+  },
+  byteConvert(bytes: number, j = 0): string {
+    if (bytes < 1000 && !j) return bytes + 'B';
+    const k = 1024; // 1024
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    let i = 0;
+    if (j) {
+      i = j;
+      return parseFloat((bytes / Math.pow(k, i)).toPrecision()).toFixed(2);
+    } else {
+      i = Math.floor(Math.log(bytes) / Math.log(k));
+    }
+    return (
+      parseFloat((bytes / Math.pow(k, i)).toPrecision()).toFixed(2) +
+      ' ' +
+      sizes[i]
+    );
+  },
+  toPath(path: string): void {
+    window.CkRouter.push(path);
+  },
 };