From 12e62d117999080754d293e0dbcd97f768098ab4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B1=B1=E4=BA=BA=E8=87=AA=E6=9C=89=E5=A6=99=E8=AE=A1?=
 <wangdaoo@yeah.net>
Date: Sat, 12 Mar 2022 18:22:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=97=A0=E7=94=A8=E4=BB=A3=E7=A0=81=E5=8F=8A=E5=8D=87=E7=BA=A7?=
 =?UTF-8?q?ui=E7=89=88=E6=9C=AC=20:rocket:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |    2 +-
 src/App.vue                                   |    2 +-
 src/components/Modal/src/basicModal.vue       |    2 +-
 src/components/Modal/src/hooks/useModal.ts    |    1 -
 src/components/Modal/src/type/index.ts        |    4 +-
 .../src/components/editable/EditableCell.vue  |  178 +--
 .../components/Header/ProjectSetting.vue      |    1 +
 src/layout/components/Menu/index.vue          |  284 ++---
 src/layout/components/TagsView/index.vue      | 1068 ++++++++---------
 src/layout/index.vue                          |  373 +++---
 src/settings/projectSetting.ts                |    2 +-
 src/styles/common.less                        |   21 +-
 src/views/iframe/index.vue                    |    1 -
 src/views/system/menu/menu.vue                |    2 +-
 yarn.lock                                     |   35 +-
 15 files changed, 989 insertions(+), 987 deletions(-)

diff --git a/package.json b/package.json
index 15c1b0c1..ae415fb0 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "lodash-es": "^4.17.21",
     "mitt": "^2.1.0",
     "mockjs": "^1.1.0",
-    "naive-ui": "^2.25.2",
+    "naive-ui": "^2.26.4",
     "pinia": "^2.0.11",
     "qs": "^6.10.3",
     "vfonts": "^0.1.0",
diff --git a/src/App.vue b/src/App.vue
index 34ec08ea..db690d2e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
   import { computed, onMounted, onUnmounted } from 'vue';
-  import { zhCN, dateZhCN, createTheme, inputDark, datePickerDark, darkTheme } from 'naive-ui';
+  import { zhCN, dateZhCN, darkTheme } from 'naive-ui';
   import { LockScreen } from '@/components/Lockscreen';
   import { AppProvider } from '@/components/Application';
   import { useLockscreenStore } from '@/store/modules/lockscreen';
diff --git a/src/components/Modal/src/basicModal.vue b/src/components/Modal/src/basicModal.vue
index 8d9db79a..7c581cfc 100644
--- a/src/components/Modal/src/basicModal.vue
+++ b/src/components/Modal/src/basicModal.vue
@@ -93,7 +93,7 @@
 
   function handleSubmit() {
     subLoading.value = true;
-    console.log(subLoading.value)
+    console.log(subLoading.value);
     emit('on-ok');
   }
 
diff --git a/src/components/Modal/src/hooks/useModal.ts b/src/components/Modal/src/hooks/useModal.ts
index 931853dc..0c1c7767 100644
--- a/src/components/Modal/src/hooks/useModal.ts
+++ b/src/components/Modal/src/hooks/useModal.ts
@@ -4,7 +4,6 @@ import { ModalMethods, UseModalReturnType } from '../type';
 import { getDynamicProps } from '@/utils';
 import { tryOnUnmounted } from '@vueuse/core';
 export function useModal(props): UseModalReturnType {
-
   const modalRef = ref<Nullable<ModalMethods>>(null);
   const currentInstance = getCurrentInstance();
 
diff --git a/src/components/Modal/src/type/index.ts b/src/components/Modal/src/type/index.ts
index 2544ddcd..804e7417 100644
--- a/src/components/Modal/src/type/index.ts
+++ b/src/components/Modal/src/type/index.ts
@@ -12,8 +12,8 @@ export interface ModalMethods {
 /**
  * 支持修改，DialogOptions 參數
  */
-export interface ModalProps extends DialogOptions { }
+export type ModalProps = DialogOptions;
 
 export type RegisterFn = (ModalInstance: ModalMethods) => void;
 
-export type UseModalReturnType = [RegisterFn, ModalMethods];
\ No newline at end of file
+export type UseModalReturnType = [RegisterFn, ModalMethods];
diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
index 674b406f..ea1b894d 100644
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -317,103 +317,103 @@
       function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) {
         if (props.record) {
           /* eslint-disable  */
-      isArray(props.record[cbs])
-         ? props.record[cbs]?.push(handle)
-         : (props.record[cbs] = [handle]);
-     }
-    }
+          isArray(props.record[cbs])
+            ? props.record[cbs]?.push(handle)
+            : (props.record[cbs] = [handle]);
+        }
+      }
 
-    if (props.record) {
-     initCbs('submitCbs', handleSubmit);
-     initCbs('validCbs', handleSubmiRule);
-     initCbs('cancelCbs', handleCancel);
-
-     if (props.column.key) {
-      if (!props.record.editValueRefs) props.record.editValueRefs = {};
-      props.record.editValueRefs[props.column.key] = currentValueRef;
-     }
-     /* eslint-disable  */
-     props.record.onCancelEdit = () => {
-      isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn());
-     };
-     /* eslint-disable */
-     props.record.onSubmitEdit = async() => {
-      if (isArray(props.record?.submitCbs)) {
-       const validFns = (props.record?.validCbs || []).map((fn) => fn());
-
-       const res = await Promise.all(validFns);
-
-       const pass = res.every((item) => !!item);
-
-       if (!pass) return;
-       const submitFns = props.record?.submitCbs || [];
-       submitFns.forEach((fn) => fn(false, false));
-       table.emit?.('edit-row-end');
-       return true;
+      if (props.record) {
+        initCbs('submitCbs', handleSubmit);
+        initCbs('validCbs', handleSubmiRule);
+        initCbs('cancelCbs', handleCancel);
+
+        if (props.column.key) {
+          if (!props.record.editValueRefs) props.record.editValueRefs = {};
+          props.record.editValueRefs[props.column.key] = currentValueRef;
+        }
+        /* eslint-disable  */
+        props.record.onCancelEdit = () => {
+          isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn());
+        };
+        /* eslint-disable */
+        props.record.onSubmitEdit = async () => {
+          if (isArray(props.record?.submitCbs)) {
+            const validFns = (props.record?.validCbs || []).map((fn) => fn());
+
+            const res = await Promise.all(validFns);
+
+            const pass = res.every((item) => !!item);
+
+            if (!pass) return;
+            const submitFns = props.record?.submitCbs || [];
+            submitFns.forEach((fn) => fn(false, false));
+            table.emit?.('edit-row-end');
+            return true;
+          }
+        };
       }
-     };
-    }
 
-    return {
-     isEdit,
-     handleEdit,
-     currentValueRef,
-     handleSubmit,
-     handleChange,
-     handleCancel,
-     elRef,
-     getComponent,
-     getRule,
-     onClickOutside,
-     ruleMessage,
-     getRuleVisible,
-     getComponentProps,
-     handleOptionsChange,
-     getWrapperClass,
-     getRowEditable,
-     getValues,
-     handleEnter,
-     // getSize,
-    };
-   },
+      return {
+        isEdit,
+        handleEdit,
+        currentValueRef,
+        handleSubmit,
+        handleChange,
+        handleCancel,
+        elRef,
+        getComponent,
+        getRule,
+        onClickOutside,
+        ruleMessage,
+        getRuleVisible,
+        getComponentProps,
+        handleOptionsChange,
+        getWrapperClass,
+        getRowEditable,
+        getValues,
+        handleEnter,
+        // getSize,
+      };
+    },
   });
 </script>
 
 <style lang="less">
-.editable-cell {
- &-content {
-  position: relative;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  &-comp{
-    flex: 1;
-  }
+  .editable-cell {
+    &-content {
+      position: relative;
+      overflow-wrap: break-word;
+      word-break: break-word;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      &-comp {
+        flex: 1;
+      }
 
-  .edit-icon {
-   font-size: 14px;
-   //position: absolute;
-   //top: 4px;
-   //right: 0;
-   display: none;
-   width: 20px;
-   cursor: pointer;
-  }
+      .edit-icon {
+        font-size: 14px;
+        //position: absolute;
+        //top: 4px;
+        //right: 0;
+        display: none;
+        width: 20px;
+        cursor: pointer;
+      }
 
-  &:hover {
-   .edit-icon {
-    display: inline-block;
-   }
+      &:hover {
+        .edit-icon {
+          display: inline-block;
+        }
+      }
+    }
+
+    &-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
- }
-
- &-action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
- }
-}
 </style>
diff --git a/src/layout/components/Header/ProjectSetting.vue b/src/layout/components/Header/ProjectSetting.vue
index 22835f43..e6aaf7a8 100644
--- a/src/layout/components/Header/ProjectSetting.vue
+++ b/src/layout/components/Header/ProjectSetting.vue
@@ -359,6 +359,7 @@
         margin: 0 5px 5px 0;
         text-align: center;
         line-height: 14px;
+
         .n-icon {
           color: #fff;
         }
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 3036c195..f2ac080f 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -15,153 +15,153 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, reactive, computed, watch, toRefs, unref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
-import { generatorMenu, generatorMenuMix } from '@/utils';
-import { useProjectSettingStore } from '@/store/modules/projectSetting';
-import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
-
-export default defineComponent({
-  name: 'Menu',
-  components: {},
-  props: {
-    mode: {
-      // 菜单模式
-      type: String,
-      default: 'vertical',
+  import { defineComponent, ref, onMounted, reactive, computed, watch, toRefs, unref } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+  import { generatorMenu, generatorMenuMix } from '@/utils';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+
+  export default defineComponent({
+    name: 'Menu',
+    components: {},
+    props: {
+      mode: {
+        // 菜单模式
+        type: String,
+        default: 'vertical',
+      },
+      collapsed: {
+        // 侧边栏菜单是否收起
+        type: Boolean,
+      },
+      //位置
+      location: {
+        type: String,
+        default: 'left',
+      },
     },
-    collapsed: {
-      // 侧边栏菜单是否收起
-      type: Boolean,
-    },
-    //位置
-    location: {
-      type: String,
-      default: 'left',
-    },
-  },
-  emits: ['update:collapsed'],
-  setup(props, { emit }) {
-    // 当前路由
-    const currentRoute = useRoute();
-    const router = useRouter();
-    const asyncRouteStore = useAsyncRouteStore();
-    const settingStore = useProjectSettingStore();
-    const menus = ref<any[]>([]);
-    const selectedKeys = ref<string>(currentRoute.name as string);
-    const headerMenuSelectKey = ref<string>('');
-
-    const { getNavMode } = useProjectSetting();
-
-    const navMode = getNavMode;
-
-    // 获取当前打开的子菜单
-    const matched = currentRoute.matched;
-
-    const getOpenKeys = matched && matched.length ? matched.map((item) => item.name) : [];
-
-    const state = reactive({
-      openKeys: getOpenKeys,
-    });
-
-    const inverted = computed(() => {
-      return ['dark', 'header-dark'].includes(settingStore.navTheme);
-    });
-
-    const getSelectedKeys = computed(() => {
-      let location = props.location;
-      return location === 'left' || (location === 'header' && unref(navMode) === 'horizontal')
-        ? unref(selectedKeys)
-        : unref(headerMenuSelectKey);
-    });
-
-    // 监听分割菜单
-    watch(
-      () => settingStore.menuSetting.mixMenu,
-      () => {
-        updateMenu();
-        if (props.collapsed) {
-          emit('update:collapsed', !props.collapsed);
+    emits: ['update:collapsed'],
+    setup(props, { emit }) {
+      // 当前路由
+      const currentRoute = useRoute();
+      const router = useRouter();
+      const asyncRouteStore = useAsyncRouteStore();
+      const settingStore = useProjectSettingStore();
+      const menus = ref<any[]>([]);
+      const selectedKeys = ref<string>(currentRoute.name as string);
+      const headerMenuSelectKey = ref<string>('');
+
+      const { getNavMode } = useProjectSetting();
+
+      const navMode = getNavMode;
+
+      // 获取当前打开的子菜单
+      const matched = currentRoute.matched;
+
+      const getOpenKeys = matched && matched.length ? matched.map((item) => item.name) : [];
+
+      const state = reactive({
+        openKeys: getOpenKeys,
+      });
+
+      const inverted = computed(() => {
+        return ['dark', 'header-dark'].includes(settingStore.navTheme);
+      });
+
+      const getSelectedKeys = computed(() => {
+        let location = props.location;
+        return location === 'left' || (location === 'header' && unref(navMode) === 'horizontal')
+          ? unref(selectedKeys)
+          : unref(headerMenuSelectKey);
+      });
+
+      // 监听分割菜单
+      watch(
+        () => settingStore.menuSetting.mixMenu,
+        () => {
+          updateMenu();
+          if (props.collapsed) {
+            emit('update:collapsed', !props.collapsed);
+          }
+        }
+      );
+
+      // 监听菜单收缩状态
+      // watch(
+      //   () => props.collapsed,
+      //   (newVal) => {
+      //   }
+      // );
+
+      // 跟随页面路由变化，切换菜单选中状态
+      watch(
+        () => currentRoute.fullPath,
+        () => {
+          updateMenu();
+          const matched = currentRoute.matched;
+          state.openKeys = matched.map((item) => item.name);
+          const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
+          selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
+        }
+      );
+
+      function updateMenu() {
+        if (!settingStore.menuSetting.mixMenu) {
+          menus.value = generatorMenu(asyncRouteStore.getMenus);
+        } else {
+          //混合菜单
+          const firstRouteName: string = (currentRoute.matched[0].name as string) || '';
+          menus.value = generatorMenuMix(asyncRouteStore.getMenus, firstRouteName, props.location);
+          const activeMenu: string = currentRoute?.matched[0].meta?.activeMenu as string;
+          headerMenuSelectKey.value = (activeMenu ? activeMenu : firstRouteName) || '';
         }
       }
-    );
-
-    // 监听菜单收缩状态
-    // watch(
-    //   () => props.collapsed,
-    //   (newVal) => {
-    //   }
-    // );
-
-    // 跟随页面路由变化，切换菜单选中状态
-    watch(
-      () => currentRoute.fullPath,
-      () => {
-        updateMenu();
-        const matched = currentRoute.matched;
-        state.openKeys = matched.map((item) => item.name);
-        const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
-        selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
-      }
-    );
-
-    function updateMenu() {
-      if (!settingStore.menuSetting.mixMenu) {
-        menus.value = generatorMenu(asyncRouteStore.getMenus);
-      } else {
-        //混合菜单
-        const firstRouteName: string = (currentRoute.matched[0].name as string) || '';
-        menus.value = generatorMenuMix(asyncRouteStore.getMenus, firstRouteName, props.location);
-        const activeMenu: string = currentRoute?.matched[0].meta?.activeMenu as string;
-        headerMenuSelectKey.value = (activeMenu ? activeMenu : firstRouteName) || '';
+
+      // 点击菜单
+      function clickMenuItem(key: string) {
+        if (/http(s)?:/.test(key)) {
+          window.open(key);
+        } else {
+          router.push({ name: key });
+        }
+        emit('clickMenuItem' as any, key);
       }
-    }
-
-    // 点击菜单
-    function clickMenuItem(key: string) {
-      if (/http(s)?:/.test(key)) {
-        window.open(key);
-      } else {
-        router.push({ name: key });
+
+      //展开菜单
+      function menuExpanded(openKeys: string[]) {
+        if (!openKeys) return;
+        const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
+        const isExistChildren = findChildrenLen(latestOpenKey as string);
+        state.openKeys = isExistChildren ? (latestOpenKey ? [latestOpenKey] : []) : openKeys;
       }
-      emit("clickMenuItem" as any, key)
-    }
-
-    //展开菜单
-    function menuExpanded(openKeys: string[]) {
-      if (!openKeys) return;
-      const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
-      const isExistChildren = findChildrenLen(latestOpenKey as string);
-      state.openKeys = isExistChildren ? (latestOpenKey ? [latestOpenKey] : []) : openKeys;
-    }
-
-    //查找是否存在子路由
-    function findChildrenLen(key: string) {
-      if (!key) return false;
-      const subRouteChildren: string[] = [];
-      for (const { children, key } of unref(menus)) {
-        if (children && children.length) {
-          subRouteChildren.push(key as string);
+
+      //查找是否存在子路由
+      function findChildrenLen(key: string) {
+        if (!key) return false;
+        const subRouteChildren: string[] = [];
+        for (const { children, key } of unref(menus)) {
+          if (children && children.length) {
+            subRouteChildren.push(key as string);
+          }
         }
+        return subRouteChildren.includes(key);
       }
-      return subRouteChildren.includes(key);
-    }
-
-    onMounted(() => {
-      updateMenu();
-    });
-
-    return {
-      ...toRefs(state),
-      inverted,
-      menus,
-      selectedKeys,
-      headerMenuSelectKey,
-      getSelectedKeys,
-      clickMenuItem,
-      menuExpanded,
-    };
-  },
-});
+
+      onMounted(() => {
+        updateMenu();
+      });
+
+      return {
+        ...toRefs(state),
+        inverted,
+        menus,
+        selectedKeys,
+        headerMenuSelectKey,
+        getSelectedKeys,
+        clickMenuItem,
+        menuExpanded,
+      };
+    },
+  });
 </script>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 8fd85135..28dbf8ac 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -80,600 +80,600 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  reactive,
-  computed,
-  ref,
-  toRefs,
-  unref,
-  provide,
-  watch,
-  onMounted,
-  nextTick,
-} from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { storage } from '@/utils/Storage';
-import { TABS_ROUTES } from '@/store/mutation-types';
-import { useTabsViewStore } from '@/store/modules/tabsView';
-import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
-import { RouteItem } from '@/store/modules/tabsView';
-import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
-import { useMessage } from 'naive-ui';
-import Draggable from 'vuedraggable';
-import { PageEnum } from '@/enums/pageEnum';
-import {
-  DownOutlined,
-  ReloadOutlined,
-  CloseOutlined,
-  ColumnWidthOutlined,
-  MinusOutlined,
-  LeftOutlined,
-  RightOutlined,
-} from '@vicons/antd';
-import { renderIcon } from '@/utils';
-import elementResizeDetectorMaker from 'element-resize-detector';
-import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
-import { useProjectSettingStore } from '@/store/modules/projectSetting';
-import { useThemeVars } from 'naive-ui';
-
-export default defineComponent({
-  name: 'TabsView',
-  components: {
+  import {
+    defineComponent,
+    reactive,
+    computed,
+    ref,
+    toRefs,
+    unref,
+    provide,
+    watch,
+    onMounted,
+    nextTick,
+  } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { storage } from '@/utils/Storage';
+  import { TABS_ROUTES } from '@/store/mutation-types';
+  import { useTabsViewStore } from '@/store/modules/tabsView';
+  import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+  import { RouteItem } from '@/store/modules/tabsView';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+  import { useMessage } from 'naive-ui';
+  import Draggable from 'vuedraggable';
+  import { PageEnum } from '@/enums/pageEnum';
+  import {
     DownOutlined,
+    ReloadOutlined,
     CloseOutlined,
+    ColumnWidthOutlined,
+    MinusOutlined,
     LeftOutlined,
     RightOutlined,
-    Draggable,
-  },
-  props: {
-    collapsed: {
-      type: Boolean,
+  } from '@vicons/antd';
+  import { renderIcon } from '@/utils';
+  import elementResizeDetectorMaker from 'element-resize-detector';
+  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useThemeVars } from 'naive-ui';
+
+  export default defineComponent({
+    name: 'TabsView',
+    components: {
+      DownOutlined,
+      CloseOutlined,
+      LeftOutlined,
+      RightOutlined,
+      Draggable,
     },
-  },
-  setup(props) {
-    const { getDarkTheme, getAppTheme } = useDesignSetting();
-    const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting, getIsMobile } =
-      useProjectSetting();
-    const settingStore = useProjectSettingStore();
-
-    const message = useMessage();
-    const route = useRoute();
-    const router = useRouter();
-    const tabsViewStore = useTabsViewStore();
-    const asyncRouteStore = useAsyncRouteStore();
-    const navScroll: any = ref(null);
-    const navWrap: any = ref(null);
-    const isCurrent = ref(false);
-
-    const themeVars = useThemeVars();
-
-    const getCardColor = computed(() => {
-      return themeVars.value.cardColor;
-    });
-
-    const getBaseColor = computed(() => {
-      return themeVars.value.textColor1;
-    });
-
-    const state = reactive({
-      activeKey: route.fullPath,
-      scrollable: false,
-      dropdownX: 0,
-      dropdownY: 0,
-      showDropdown: false,
-      isMultiHeaderFixed: false,
-      multiTabsSetting: getMultiTabsSetting,
-    });
-
-    // 获取简易的路由对象
-    const getSimpleRoute = (route): RouteItem => {
-      const { fullPath, hash, meta, name, params, path, query } = route;
-      return { fullPath, hash, meta, name, params, path, query };
-    };
-
-    const isMixMenuNoneSub = computed(() => {
-      const mixMenu = settingStore.menuSetting.mixMenu;
-      const currentRoute = useRoute();
-      const navMode = unref(getNavMode);
-      if (unref(navMode) != 'horizontal-mix') return true;
-      return !(unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot);
-    });
-
-    //动态组装样式 菜单缩进
-    const getChangeStyle = computed(() => {
-      const { collapsed } = props;
-      const navMode = unref(getNavMode);
-      const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
-      const { fixed }: any = unref(getMultiTabsSetting);
-      let lenNum =
-        navMode === 'horizontal' || !isMixMenuNoneSub.value
-          ? '0px'
-          : collapsed
+    props: {
+      collapsed: {
+        type: Boolean,
+      },
+    },
+    setup(props) {
+      const { getDarkTheme, getAppTheme } = useDesignSetting();
+      const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting, getIsMobile } =
+        useProjectSetting();
+      const settingStore = useProjectSettingStore();
+
+      const message = useMessage();
+      const route = useRoute();
+      const router = useRouter();
+      const tabsViewStore = useTabsViewStore();
+      const asyncRouteStore = useAsyncRouteStore();
+      const navScroll: any = ref(null);
+      const navWrap: any = ref(null);
+      const isCurrent = ref(false);
+
+      const themeVars = useThemeVars();
+
+      const getCardColor = computed(() => {
+        return themeVars.value.cardColor;
+      });
+
+      const getBaseColor = computed(() => {
+        return themeVars.value.textColor1;
+      });
+
+      const state = reactive({
+        activeKey: route.fullPath,
+        scrollable: false,
+        dropdownX: 0,
+        dropdownY: 0,
+        showDropdown: false,
+        isMultiHeaderFixed: false,
+        multiTabsSetting: getMultiTabsSetting,
+      });
+
+      // 获取简易的路由对象
+      const getSimpleRoute = (route): RouteItem => {
+        const { fullPath, hash, meta, name, params, path, query } = route;
+        return { fullPath, hash, meta, name, params, path, query };
+      };
+
+      const isMixMenuNoneSub = computed(() => {
+        const mixMenu = settingStore.menuSetting.mixMenu;
+        const currentRoute = useRoute();
+        const navMode = unref(getNavMode);
+        if (unref(navMode) != 'horizontal-mix') return true;
+        return !(unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot);
+      });
+
+      //动态组装样式 菜单缩进
+      const getChangeStyle = computed(() => {
+        const { collapsed } = props;
+        const navMode = unref(getNavMode);
+        const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
+        const { fixed }: any = unref(getMultiTabsSetting);
+        let lenNum =
+          navMode === 'horizontal' || !isMixMenuNoneSub.value
+            ? '0px'
+            : collapsed
             ? `${minMenuWidth}px`
             : `${menuWidth}px`;
 
-      if (getIsMobile.value) {
+        if (getIsMobile.value) {
+          return {
+            left: '0px',
+            width: '100%',
+          };
+        }
         return {
-          left: '0px',
-          width: '100%'
+          left: lenNum,
+          width: `calc(100% - ${!fixed ? '0px' : lenNum})`,
         };
-      }
-      return {
-        left: lenNum,
-        width: `calc(100% - ${!fixed ? '0px' : lenNum})`,
-      };
-    });
-
-    //tags 右侧下拉菜单
-    const TabsMenuOptions = computed(() => {
-      const isDisabled = unref(tabsList).length <= 1;
-      return [
-        {
-          label: '刷新当前',
-          key: '1',
-          icon: renderIcon(ReloadOutlined),
-        },
-        {
-          label: `关闭当前`,
-          key: '2',
-          disabled: unref(isCurrent) || isDisabled,
-          icon: renderIcon(CloseOutlined),
-        },
-        {
-          label: '关闭其他',
-          key: '3',
-          disabled: isDisabled,
-          icon: renderIcon(ColumnWidthOutlined),
-        },
-        {
-          label: '关闭全部',
-          key: '4',
-          disabled: isDisabled,
-          icon: renderIcon(MinusOutlined),
-        },
-      ];
-    });
-
-    let cacheRoutes: RouteItem[] = [];
-    const simpleRoute = getSimpleRoute(route);
-    try {
-      const routesStr = storage.get(TABS_ROUTES) as string | null | undefined;
-      cacheRoutes = routesStr ? JSON.parse(routesStr) : [simpleRoute];
-    } catch (e) {
-      cacheRoutes = [simpleRoute];
-    }
+      });
 
-    // 将最新的路由信息同步到 localStorage 中
-    const routes = router.getRoutes();
-    cacheRoutes.forEach((cacheRoute) => {
-      const route = routes.find((route) => route.path === cacheRoute.path);
-      if (route) {
-        cacheRoute.meta = route.meta || cacheRoute.meta;
-        cacheRoute.name = (route.name || cacheRoute.name) as string;
+      //tags 右侧下拉菜单
+      const TabsMenuOptions = computed(() => {
+        const isDisabled = unref(tabsList).length <= 1;
+        return [
+          {
+            label: '刷新当前',
+            key: '1',
+            icon: renderIcon(ReloadOutlined),
+          },
+          {
+            label: `关闭当前`,
+            key: '2',
+            disabled: unref(isCurrent) || isDisabled,
+            icon: renderIcon(CloseOutlined),
+          },
+          {
+            label: '关闭其他',
+            key: '3',
+            disabled: isDisabled,
+            icon: renderIcon(ColumnWidthOutlined),
+          },
+          {
+            label: '关闭全部',
+            key: '4',
+            disabled: isDisabled,
+            icon: renderIcon(MinusOutlined),
+          },
+        ];
+      });
+
+      let cacheRoutes: RouteItem[] = [];
+      const simpleRoute = getSimpleRoute(route);
+      try {
+        const routesStr = storage.get(TABS_ROUTES) as string | null | undefined;
+        cacheRoutes = routesStr ? JSON.parse(routesStr) : [simpleRoute];
+      } catch (e) {
+        cacheRoutes = [simpleRoute];
       }
-    });
-
-    // 初始化标签页
-    tabsViewStore.initTabs(cacheRoutes);
-
-    //监听滚动条
-    function onScroll(e) {
-      let scrollTop =
-        e.target.scrollTop ||
-        document.documentElement.scrollTop ||
-        window.pageYOffset ||
-        document.body.scrollTop; // 滚动条偏移量
-      state.isMultiHeaderFixed = !!(
-        !getHeaderSetting.value.fixed &&
-        getMultiTabsSetting.value.fixed &&
-        scrollTop >= 64
-      );
-    }
 
-    window.addEventListener('scroll', onScroll, true);
-
-    // 移除缓存组件名称
-    const delKeepAliveCompName = () => {
-      if (route.meta.keepAlive) {
-        const name = router.currentRoute.value.matched.find((item) => item.name == route.name)
-          ?.components?.default.name;
-        if (name) {
-          asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter(
-            (item) => item != name
-          );
+      // 将最新的路由信息同步到 localStorage 中
+      const routes = router.getRoutes();
+      cacheRoutes.forEach((cacheRoute) => {
+        const route = routes.find((route) => route.path === cacheRoute.path);
+        if (route) {
+          cacheRoute.meta = route.meta || cacheRoute.meta;
+          cacheRoute.name = (route.name || cacheRoute.name) as string;
         }
-      }
-    };
-
-    // 标签页列表
-    const tabsList: any = computed(() => tabsViewStore.tabsList);
-    const whiteList: string[] = [
-      PageEnum.BASE_LOGIN_NAME,
-      PageEnum.REDIRECT_NAME,
-      PageEnum.ERROR_PAGE_NAME,
-    ];
-
-    watch(
-      () => route.fullPath,
-      (to) => {
-        if (whiteList.includes(route.name as string)) return;
-        state.activeKey = to;
-        tabsViewStore.addTabs(getSimpleRoute(route));
-        updateNavScroll(true);
-      },
-      { immediate: true }
-    );
-
-    // 在页面关闭或刷新之前，保存数据
-    window.addEventListener('beforeunload', () => {
-      storage.set(TABS_ROUTES, JSON.stringify(tabsList.value));
-    });
-
-    // 关闭当前页面
-    const removeTab = (route) => {
-      if (tabsList.value.length === 1) {
-        return message.warning('这已经是最后一页，不能再关闭了！');
-      }
-      delKeepAliveCompName();
-      tabsViewStore.closeCurrentTab(route);
-      // 如果关闭的是当前页
-      if (state.activeKey === route.fullPath) {
-        const currentRoute = tabsList.value[Math.max(0, tabsList.value.length - 1)];
-        state.activeKey = currentRoute.fullPath;
-        router.push(currentRoute);
-      }
-      updateNavScroll();
-    };
-
-    // 刷新页面
-    const reloadPage = () => {
-      delKeepAliveCompName();
-      router.push({
-        path: '/redirect' + unref(route).fullPath,
       });
-    };
-
-    // 注入刷新页面方法
-    provide('reloadPage', reloadPage);
-
-    // 关闭左侧
-    const closeLeft = (route) => {
-      tabsViewStore.closeLeftTabs(route);
-      state.activeKey = route.fullPath;
-      router.replace(route.fullPath);
-      updateNavScroll();
-    };
-
-    // 关闭右侧
-    const closeRight = (route) => {
-      tabsViewStore.closeRightTabs(route);
-      state.activeKey = route.fullPath;
-      router.replace(route.fullPath);
-      updateNavScroll();
-    };
-
-    // 关闭其他
-    const closeOther = (route) => {
-      tabsViewStore.closeOtherTabs(route);
-      state.activeKey = route.fullPath;
-      router.replace(route.fullPath);
-      updateNavScroll();
-    };
-
-    // 关闭全部
-    const closeAll = () => {
-      localStorage.removeItem('routes');
-      tabsViewStore.closeAllTabs();
-      router.replace(PageEnum.BASE_HOME);
-      updateNavScroll();
-    };
-
-    //tab 操作
-    const closeHandleSelect = (key) => {
-      switch (key) {
-        //刷新
-        case '1':
-          reloadPage();
-          break;
-        //关闭
-        case '2':
-          removeTab(route);
-          break;
-        //关闭其他
-        case '3':
-          closeOther(route);
-          break;
-        //关闭所有
-        case '4':
-          closeAll();
-          break;
+
+      // 初始化标签页
+      tabsViewStore.initTabs(cacheRoutes);
+
+      //监听滚动条
+      function onScroll(e) {
+        let scrollTop =
+          e.target.scrollTop ||
+          document.documentElement.scrollTop ||
+          window.pageYOffset ||
+          document.body.scrollTop; // 滚动条偏移量
+        state.isMultiHeaderFixed = !!(
+          !getHeaderSetting.value.fixed &&
+          getMultiTabsSetting.value.fixed &&
+          scrollTop >= 64
+        );
       }
-      updateNavScroll();
-      state.showDropdown = false;
-    };
-
-    /**
-     * @param value 要滚动到的位置
-     * @param amplitude 每次滚动的长度
-     */
-    function scrollTo(value: number, amplitude: number) {
-      const currentScroll = navScroll.value.scrollLeft;
-      const scrollWidth =
-        (amplitude > 0 && currentScroll + amplitude >= value) ||
-          (amplitude < 0 && currentScroll + amplitude <= value)
-          ? value
-          : currentScroll + amplitude;
-      navScroll.value && navScroll.value.scrollTo(scrollWidth, 0);
-      if (scrollWidth === value) return;
-      return window.requestAnimationFrame(() => scrollTo(value, amplitude));
-    }
 
-    function scrollPrev() {
-      const containerWidth = navScroll.value.offsetWidth;
-      const currentScroll = navScroll.value.scrollLeft;
+      window.addEventListener('scroll', onScroll, true);
+
+      // 移除缓存组件名称
+      const delKeepAliveCompName = () => {
+        if (route.meta.keepAlive) {
+          const name = router.currentRoute.value.matched.find((item) => item.name == route.name)
+            ?.components?.default.name;
+          if (name) {
+            asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter(
+              (item) => item != name
+            );
+          }
+        }
+      };
 
-      if (!currentScroll) return;
-      const scrollLeft = currentScroll > containerWidth ? currentScroll - containerWidth : 0;
-      scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
-    }
+      // 标签页列表
+      const tabsList: any = computed(() => tabsViewStore.tabsList);
+      const whiteList: string[] = [
+        PageEnum.BASE_LOGIN_NAME,
+        PageEnum.REDIRECT_NAME,
+        PageEnum.ERROR_PAGE_NAME,
+      ];
 
-    function scrollNext() {
-      const containerWidth = navScroll.value.offsetWidth;
-      const navWidth = navScroll.value.scrollWidth;
-      const currentScroll = navScroll.value.scrollLeft;
-
-      if (navWidth - currentScroll <= containerWidth) return;
-      const scrollLeft =
-        navWidth - currentScroll > containerWidth * 2
-          ? currentScroll + containerWidth
-          : navWidth - containerWidth;
-      scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
-    }
+      watch(
+        () => route.fullPath,
+        (to) => {
+          if (whiteList.includes(route.name as string)) return;
+          state.activeKey = to;
+          tabsViewStore.addTabs(getSimpleRoute(route));
+          updateNavScroll(true);
+        },
+        { immediate: true }
+      );
 
-    /**
-     * @param autoScroll 是否开启自动滚动功能
-     */
-    async function updateNavScroll(autoScroll?: boolean) {
-      await nextTick();
-      if (!navScroll.value) return;
-      const containerWidth = navScroll.value.offsetWidth;
-      const navWidth = navScroll.value.scrollWidth;
-
-      if (containerWidth < navWidth) {
-        state.scrollable = true;
-        if (autoScroll) {
-          let tagList = navScroll.value.querySelectorAll('.tabs-card-scroll-item') || [];
-          [...tagList].forEach((tag: HTMLElement) => {
-            // fix SyntaxError
-            if (tag.id === `tag${state.activeKey.split('/').join('\/')}`) {
-              tag.scrollIntoView && tag.scrollIntoView();
-            }
-          });
+      // 在页面关闭或刷新之前，保存数据
+      window.addEventListener('beforeunload', () => {
+        storage.set(TABS_ROUTES, JSON.stringify(tabsList.value));
+      });
+
+      // 关闭当前页面
+      const removeTab = (route) => {
+        if (tabsList.value.length === 1) {
+          return message.warning('这已经是最后一页，不能再关闭了！');
         }
-      } else {
-        state.scrollable = false;
-      }
-    }
+        delKeepAliveCompName();
+        tabsViewStore.closeCurrentTab(route);
+        // 如果关闭的是当前页
+        if (state.activeKey === route.fullPath) {
+          const currentRoute = tabsList.value[Math.max(0, tabsList.value.length - 1)];
+          state.activeKey = currentRoute.fullPath;
+          router.push(currentRoute);
+        }
+        updateNavScroll();
+      };
 
-    function handleResize() {
-      updateNavScroll(true);
-    }
+      // 刷新页面
+      const reloadPage = () => {
+        delKeepAliveCompName();
+        router.push({
+          path: '/redirect' + unref(route).fullPath,
+        });
+      };
 
-    function handleContextMenu(e, item) {
-      e.preventDefault();
-      isCurrent.value = PageEnum.BASE_HOME_REDIRECT === item.path;
-      state.showDropdown = false;
-      nextTick().then(() => {
-        state.showDropdown = true;
-        state.dropdownX = e.clientX;
-        state.dropdownY = e.clientY;
-      });
-    }
+      // 注入刷新页面方法
+      provide('reloadPage', reloadPage);
 
-    function onClickOutside() {
-      state.showDropdown = false;
-    }
+      // 关闭左侧
+      const closeLeft = (route) => {
+        tabsViewStore.closeLeftTabs(route);
+        state.activeKey = route.fullPath;
+        router.replace(route.fullPath);
+        updateNavScroll();
+      };
 
-    //tags 跳转页面
-    function goPage(e) {
-      const { fullPath } = e;
-      if (fullPath === route.fullPath) return;
-      state.activeKey = fullPath;
-      router.push({ path: fullPath });
-    }
+      // 关闭右侧
+      const closeRight = (route) => {
+        tabsViewStore.closeRightTabs(route);
+        state.activeKey = route.fullPath;
+        router.replace(route.fullPath);
+        updateNavScroll();
+      };
 
-    //删除tab
-    function closeTabItem(e) {
-      const { fullPath } = e;
-      const routeInfo = tabsList.value.find((item) => item.fullPath == fullPath);
-      removeTab(routeInfo);
-    }
+      // 关闭其他
+      const closeOther = (route) => {
+        tabsViewStore.closeOtherTabs(route);
+        state.activeKey = route.fullPath;
+        router.replace(route.fullPath);
+        updateNavScroll();
+      };
 
-    onMounted(() => {
-      onElementResize();
-    });
+      // 关闭全部
+      const closeAll = () => {
+        localStorage.removeItem('routes');
+        tabsViewStore.closeAllTabs();
+        router.replace(PageEnum.BASE_HOME);
+        updateNavScroll();
+      };
 
-    function onElementResize() {
-      let observer;
-      observer = elementResizeDetectorMaker();
-      observer.listenTo(navWrap.value, handleResize);
-    }
+      //tab 操作
+      const closeHandleSelect = (key) => {
+        switch (key) {
+          //刷新
+          case '1':
+            reloadPage();
+            break;
+          //关闭
+          case '2':
+            removeTab(route);
+            break;
+          //关闭其他
+          case '3':
+            closeOther(route);
+            break;
+          //关闭所有
+          case '4':
+            closeAll();
+            break;
+        }
+        updateNavScroll();
+        state.showDropdown = false;
+      };
 
-    return {
-      ...toRefs(state),
-      navWrap,
-      navScroll,
-      route,
-      tabsList,
-      baseHome: PageEnum.BASE_HOME_REDIRECT,
-      goPage,
-      closeTabItem,
-      closeLeft,
-      closeRight,
-      closeOther,
-      closeAll,
-      reloadPage,
-      getChangeStyle,
-      TabsMenuOptions,
-      closeHandleSelect,
-      scrollNext,
-      scrollPrev,
-      handleContextMenu,
-      onClickOutside,
-      getDarkTheme,
-      getAppTheme,
-      getCardColor,
-      getBaseColor,
-    };
-  },
-});
-</script>
+      /**
+       * @param value 要滚动到的位置
+       * @param amplitude 每次滚动的长度
+       */
+      function scrollTo(value: number, amplitude: number) {
+        const currentScroll = navScroll.value.scrollLeft;
+        const scrollWidth =
+          (amplitude > 0 && currentScroll + amplitude >= value) ||
+          (amplitude < 0 && currentScroll + amplitude <= value)
+            ? value
+            : currentScroll + amplitude;
+        navScroll.value && navScroll.value.scrollTo(scrollWidth, 0);
+        if (scrollWidth === value) return;
+        return window.requestAnimationFrame(() => scrollTo(value, amplitude));
+      }
 
-<style lang="less" scoped>
-.tabs-view {
-  width: 100%;
-  padding: 6px 0;
-  display: flex;
-  transition: all 0.2s ease-in-out;
-
-  &-main {
-    height: 32px;
-    display: flex;
-    max-width: 100%;
-    min-width: 100%;
-
-    .tabs-card {
-      -webkit-box-flex: 1;
-      flex-grow: 1;
-      flex-shrink: 1;
-      overflow: hidden;
-      position: relative;
-
-      .tabs-card-prev,
-      .tabs-card-next {
-        width: 32px;
-        text-align: center;
-        position: absolute;
-        line-height: 32px;
-        cursor: pointer;
-
-        .n-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 32px;
-          width: 32px;
+      function scrollPrev() {
+        const containerWidth = navScroll.value.offsetWidth;
+        const currentScroll = navScroll.value.scrollLeft;
+
+        if (!currentScroll) return;
+        const scrollLeft = currentScroll > containerWidth ? currentScroll - containerWidth : 0;
+        scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
+      }
+
+      function scrollNext() {
+        const containerWidth = navScroll.value.offsetWidth;
+        const navWidth = navScroll.value.scrollWidth;
+        const currentScroll = navScroll.value.scrollLeft;
+
+        if (navWidth - currentScroll <= containerWidth) return;
+        const scrollLeft =
+          navWidth - currentScroll > containerWidth * 2
+            ? currentScroll + containerWidth
+            : navWidth - containerWidth;
+        scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
+      }
+
+      /**
+       * @param autoScroll 是否开启自动滚动功能
+       */
+      async function updateNavScroll(autoScroll?: boolean) {
+        await nextTick();
+        if (!navScroll.value) return;
+        const containerWidth = navScroll.value.offsetWidth;
+        const navWidth = navScroll.value.scrollWidth;
+
+        if (containerWidth < navWidth) {
+          state.scrollable = true;
+          if (autoScroll) {
+            let tagList = navScroll.value.querySelectorAll('.tabs-card-scroll-item') || [];
+            [...tagList].forEach((tag: HTMLElement) => {
+              // fix SyntaxError
+              if (tag.id === `tag${state.activeKey.split('/').join('\/')}`) {
+                tag.scrollIntoView && tag.scrollIntoView();
+              }
+            });
+          }
+        } else {
+          state.scrollable = false;
         }
       }
 
-      .tabs-card-prev {
-        left: 0;
+      function handleResize() {
+        updateNavScroll(true);
+      }
+
+      function handleContextMenu(e, item) {
+        e.preventDefault();
+        isCurrent.value = PageEnum.BASE_HOME_REDIRECT === item.path;
+        state.showDropdown = false;
+        nextTick().then(() => {
+          state.showDropdown = true;
+          state.dropdownX = e.clientX;
+          state.dropdownY = e.clientY;
+        });
+      }
+
+      function onClickOutside() {
+        state.showDropdown = false;
       }
 
-      .tabs-card-next {
-        right: 0;
+      //tags 跳转页面
+      function goPage(e) {
+        const { fullPath } = e;
+        if (fullPath === route.fullPath) return;
+        state.activeKey = fullPath;
+        router.push({ path: fullPath });
       }
 
-      .tabs-card-next-hide,
-      .tabs-card-prev-hide {
-        display: none;
+      //删除tab
+      function closeTabItem(e) {
+        const { fullPath } = e;
+        const routeInfo = tabsList.value.find((item) => item.fullPath == fullPath);
+        removeTab(routeInfo);
       }
 
-      &-scroll {
-        white-space: nowrap;
+      onMounted(() => {
+        onElementResize();
+      });
+
+      function onElementResize() {
+        let observer;
+        observer = elementResizeDetectorMaker();
+        observer.listenTo(navWrap.value, handleResize);
+      }
+
+      return {
+        ...toRefs(state),
+        navWrap,
+        navScroll,
+        route,
+        tabsList,
+        baseHome: PageEnum.BASE_HOME_REDIRECT,
+        goPage,
+        closeTabItem,
+        closeLeft,
+        closeRight,
+        closeOther,
+        closeAll,
+        reloadPage,
+        getChangeStyle,
+        TabsMenuOptions,
+        closeHandleSelect,
+        scrollNext,
+        scrollPrev,
+        handleContextMenu,
+        onClickOutside,
+        getDarkTheme,
+        getAppTheme,
+        getCardColor,
+        getBaseColor,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .tabs-view {
+    width: 100%;
+    padding: 6px 0;
+    display: flex;
+    transition: all 0.2s ease-in-out;
+
+    &-main {
+      height: 32px;
+      display: flex;
+      max-width: 100%;
+      min-width: 100%;
+
+      .tabs-card {
+        -webkit-box-flex: 1;
+        flex-grow: 1;
+        flex-shrink: 1;
         overflow: hidden;
+        position: relative;
 
-        &-item {
-          background: v-bind(getCardColor);
-          color: v-bind(getBaseColor);
-          height: 32px;
-          padding: 6px 16px 4px;
-          border-radius: 3px;
-          margin-right: 6px;
+        .tabs-card-prev,
+        .tabs-card-next {
+          width: 32px;
+          text-align: center;
+          position: absolute;
+          line-height: 32px;
           cursor: pointer;
-          display: inline-block;
-          position: relative;
-          flex: 0 0 auto;
 
-          span {
-            float: left;
-            vertical-align: middle;
+          .n-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 32px;
+            width: 32px;
           }
+        }
 
-          &:hover {
-            color: #515a6e;
-          }
+        .tabs-card-prev {
+          left: 0;
+        }
 
-          .n-icon {
-            height: 22px;
-            width: 21px;
-            margin-right: -6px;
+        .tabs-card-next {
+          right: 0;
+        }
+
+        .tabs-card-next-hide,
+        .tabs-card-prev-hide {
+          display: none;
+        }
+
+        &-scroll {
+          white-space: nowrap;
+          overflow: hidden;
+
+          &-item {
+            background: v-bind(getCardColor);
+            color: v-bind(getBaseColor);
+            height: 32px;
+            padding: 6px 16px 4px;
+            border-radius: 3px;
+            margin-right: 6px;
+            cursor: pointer;
+            display: inline-block;
             position: relative;
-            vertical-align: middle;
-            text-align: center;
-            color: #808695;
+            flex: 0 0 auto;
+
+            span {
+              float: left;
+              vertical-align: middle;
+            }
 
             &:hover {
-              color: #515a6e !important;
+              color: #515a6e;
             }
 
-            svg {
-              height: 21px;
-              display: inline-block;
+            .n-icon {
+              height: 22px;
+              width: 21px;
+              margin-right: -6px;
+              position: relative;
+              vertical-align: middle;
+              text-align: center;
+              color: #808695;
+
+              &:hover {
+                color: #515a6e !important;
+              }
+
+              svg {
+                height: 21px;
+                display: inline-block;
+              }
             }
           }
-        }
 
-        .active-item {
-          color: v-bind(getAppTheme);
+          .active-item {
+            color: v-bind(getAppTheme);
+          }
         }
       }
+
+      .tabs-card-scrollable {
+        padding: 0 32px;
+        overflow: hidden;
+      }
     }
 
-    .tabs-card-scrollable {
-      padding: 0 32px;
-      overflow: hidden;
+    .tabs-close {
+      min-width: 32px;
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      background: var(--color);
+      border-radius: 2px;
+      cursor: pointer;
+      //margin-right: 10px;
+
+      &-btn {
+        color: var(--color);
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 
-  .tabs-close {
-    min-width: 32px;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    background: var(--color);
-    border-radius: 2px;
-    cursor: pointer;
-    //margin-right: 10px;
-
-    &-btn {
-      color: var(--color);
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+  .tabs-view-default-background {
+    background: #f5f7f9;
+  }
+
+  .tabs-view-dark-background {
+    background: #101014;
+  }
+
+  .tabs-view-fix {
+    position: fixed;
+    z-index: 5;
+    padding: 6px 19px 6px 10px;
+    left: 200px;
+  }
+
+  .tabs-view-fixed-header {
+    top: 0;
   }
-}
-
-.tabs-view-default-background {
-  background: #f5f7f9;
-}
-
-.tabs-view-dark-background {
-  background: #101014;
-}
-
-.tabs-view-fix {
-  position: fixed;
-  z-index: 5;
-  padding: 6px 19px 6px 10px;
-  left: 200px;
-}
-
-.tabs-view-fixed-header {
-  top: 0;
-}
 </style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 665c1fcd..5f96d5cb 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,7 +1,9 @@
 <template>
   <n-layout class="layout" :position="fixedMenu" has-sider>
     <n-layout-sider
-      v-if="!isMobile && isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')"
+      v-if="
+        !isMobile && isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')
+      "
       show-trigger="bar"
       @collapse="collapsed = true"
       :position="fixedMenu"
@@ -67,208 +69,209 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, unref, computed, onMounted } from 'vue';
-import { Logo } from './components/Logo';
-import { TabsView } from './components/TagsView';
-import { MainView } from './components/Main';
-import { AsideMenu } from './components/Menu';
-import { PageHeader } from './components/Header';
-import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
-import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
-import { useLoadingBar } from 'naive-ui';
-import { useRoute } from 'vue-router';
-import { useProjectSettingStore } from '@/store/modules/projectSetting';
-
-const { getDarkTheme } = useDesignSetting();
-const {
-  getShowFooter,
-  getNavMode,
-  getNavTheme,
-  getHeaderSetting,
-  getMenuSetting,
-  getMultiTabsSetting,
-} = useProjectSetting();
-
-const settingStore = useProjectSettingStore();
-
-const navMode = getNavMode;
-
-const collapsed = ref<boolean>(false);
-
-const { mobileWidth, menuWidth } = unref(getMenuSetting);
-
-const isMobile = computed<boolean>({
-  get: () => settingStore.getIsMobile,
-  set: (val) => settingStore.setIsMobile(val)
-});
-
-const fixedHeader = computed(() => {
-  const { fixed } = unref(getHeaderSetting);
-  return fixed ? 'absolute' : 'static';
-});
-
-const isMixMenuNoneSub = computed(() => {
-  const mixMenu = settingStore.menuSetting.mixMenu;
-  const currentRoute = useRoute();
-  if (unref(navMode) != 'horizontal-mix') return true;
-  if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
-    return false;
-  }
-  return true;
-});
-
-const fixedMenu = computed(() => {
-  const { fixed } = unref(getHeaderSetting);
-  return fixed ? 'absolute' : 'static';
-});
-
-const isMultiTabs = computed(() => {
-  return unref(getMultiTabsSetting).show;
-});
-
-const fixedMulti = computed(() => {
-  return unref(getMultiTabsSetting).fixed;
-});
-
-const inverted = computed(() => {
-  return ['dark', 'header-dark'].includes(unref(getNavTheme));
-});
-
-const getHeaderInverted = computed(() => {
-  const navTheme = unref(getNavTheme);
-  return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
-});
-
-const leftMenuWidth = computed(() => {
-  const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-  return collapsed.value ? minMenuWidth : menuWidth;
-});
-
-const getChangeStyle = computed(() => {
-  const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-  return {
-    'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
+  import { ref, unref, computed, onMounted } from 'vue';
+  import { Logo } from './components/Logo';
+  import { TabsView } from './components/TagsView';
+  import { MainView } from './components/Main';
+  import { AsideMenu } from './components/Menu';
+  import { PageHeader } from './components/Header';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+  import { useLoadingBar } from 'naive-ui';
+  import { useRoute } from 'vue-router';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+
+  const { getDarkTheme } = useDesignSetting();
+  const {
+    // getShowFooter,
+    getNavMode,
+    getNavTheme,
+    getHeaderSetting,
+    getMenuSetting,
+    getMultiTabsSetting,
+  } = useProjectSetting();
+
+  const settingStore = useProjectSettingStore();
+
+  const navMode = getNavMode;
+
+  const collapsed = ref<boolean>(false);
+
+  const { mobileWidth, menuWidth } = unref(getMenuSetting);
+
+  const isMobile = computed<boolean>({
+    get: () => settingStore.getIsMobile,
+    set: (val) => settingStore.setIsMobile(val),
+  });
+
+  const fixedHeader = computed(() => {
+    const { fixed } = unref(getHeaderSetting);
+    return fixed ? 'absolute' : 'static';
+  });
+
+  const isMixMenuNoneSub = computed(() => {
+    const mixMenu = settingStore.menuSetting.mixMenu;
+    const currentRoute = useRoute();
+    if (unref(navMode) != 'horizontal-mix') return true;
+    if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
+      return false;
+    }
+    return true;
+  });
+
+  const fixedMenu = computed(() => {
+    const { fixed } = unref(getHeaderSetting);
+    return fixed ? 'absolute' : 'static';
+  });
+
+  const isMultiTabs = computed(() => {
+    return unref(getMultiTabsSetting).show;
+  });
+
+  const fixedMulti = computed(() => {
+    return unref(getMultiTabsSetting).fixed;
+  });
+
+  const inverted = computed(() => {
+    return ['dark', 'header-dark'].includes(unref(getNavTheme));
+  });
+
+  const getHeaderInverted = computed(() => {
+    const navTheme = unref(getNavTheme);
+    return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
+  });
+
+  const leftMenuWidth = computed(() => {
+    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+    return collapsed.value ? minMenuWidth : menuWidth;
+  });
+
+  // const getChangeStyle = computed(() => {
+  //   const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+  //   return {
+  //     'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
+  //   };
+  // });
+
+  const getMenuLocation = computed(() => {
+    return 'left';
+  });
+
+  // 控制显示或隐藏移动端侧边栏
+  const showSideDrawder = computed({
+    get: () => isMobile.value && collapsed.value,
+    set: (val) => (collapsed.value = val),
+  });
+
+  //判断是否触发移动端模式
+  const checkMobileMode = () => {
+    if (document.body.clientWidth <= mobileWidth) {
+      isMobile.value = true;
+    } else {
+      isMobile.value = false;
+    }
+    collapsed.value = false;
   };
-});
-
-const getMenuLocation = computed(() => {
-  return 'left';
-});
-
-// 控制显示或隐藏移动端侧边栏
-const showSideDrawder = computed({
-  get: () => isMobile.value && collapsed.value,
-  set: (val) => (collapsed.value = val)
-});
-
-//判断是否触发移动端模式
-const checkMobileMode = () => {
-  if (document.body.clientWidth <= mobileWidth) {
-    isMobile.value = true;
-  } else {
-    isMobile.value = false;
-  }
-  collapsed.value = false;
-}
-
-const watchWidth = () => {
-  const Width = document.body.clientWidth;
-  if (Width <= 950) {
-    collapsed.value = true;
-  } else collapsed.value = false;
-
-  checkMobileMode();
-};
-
-onMounted(() => {
-  checkMobileMode();
-  window.addEventListener('resize', watchWidth);
-  //挂载在 window 方便与在js中使用
-  window['$loading'] = useLoadingBar();
-  window['$loading'].finish();
-});
+
+  const watchWidth = () => {
+    const Width = document.body.clientWidth;
+    if (Width <= 950) {
+      collapsed.value = true;
+    } else collapsed.value = false;
+
+    checkMobileMode();
+  };
+
+  onMounted(() => {
+    checkMobileMode();
+    window.addEventListener('resize', watchWidth);
+    //挂载在 window 方便与在js中使用
+    window['$loading'] = useLoadingBar();
+    window['$loading'].finish();
+  });
 </script>
 
 <style lang="less">
-.layout-side-drawer {
-  background-color: rgb(0, 20, 40);
-  .layout-sider {
-    min-height: 100vh;
-    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-    position: relative;
-    z-index: 13;
-    transition: all 0.2s ease-in-out;
+  .layout-side-drawer {
+    background-color: rgb(0, 20, 40);
+
+    .layout-sider {
+      min-height: 100vh;
+      box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+      position: relative;
+      z-index: 13;
+      transition: all 0.2s ease-in-out;
+    }
   }
-}
 </style>
 <style lang="less" scoped>
-.layout {
-  display: flex;
-  flex-direction: row;
-  flex: auto;
+  .layout {
+    display: flex;
+    flex-direction: row;
+    flex: auto;
 
-  &-default-background {
-    background: #f5f7f9;
+    &-default-background {
+      background: #f5f7f9;
+    }
+
+    .layout-sider {
+      min-height: 100vh;
+      box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+      position: relative;
+      z-index: 13;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .layout-sider-fix {
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+
+    .ant-layout {
+      overflow: hidden;
+    }
+
+    .layout-right-fix {
+      overflow-x: hidden;
+      padding-left: 200px;
+      min-height: 100vh;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .layout-content {
+      flex: auto;
+      min-height: 100vh;
+    }
+
+    .n-layout-header.n-layout-header--absolute-positioned {
+      z-index: 11;
+    }
+
+    .n-layout-footer {
+      background: none;
+    }
   }
 
-  .layout-sider {
-    min-height: 100vh;
-    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+  .layout-content-main {
+    margin: 0 10px 10px;
     position: relative;
-    z-index: 13;
-    transition: all 0.2s ease-in-out;
-  }
-
-  .layout-sider-fix {
-    position: fixed;
-    top: 0;
-    left: 0;
+    padding-top: 64px;
   }
 
-  .ant-layout {
-    overflow: hidden;
+  .layout-content-main-fix {
+    padding-top: 64px;
   }
 
-  .layout-right-fix {
-    overflow-x: hidden;
-    padding-left: 200px;
-    min-height: 100vh;
-    transition: all 0.2s ease-in-out;
+  .fluid-header {
+    padding-top: 0;
   }
 
-  .layout-content {
-    flex: auto;
-    min-height: 100vh;
+  .main-view-fix {
+    padding-top: 44px;
   }
 
-  .n-layout-header.n-layout-header--absolute-positioned {
-    z-index: 11;
+  .noMultiTabs {
+    padding-top: 0;
   }
-
-  .n-layout-footer {
-    background: none;
-  }
-}
-
-.layout-content-main {
-  margin: 0 10px 10px;
-  position: relative;
-  padding-top: 64px;
-}
-
-.layout-content-main-fix {
-  padding-top: 64px;
-}
-
-.fluid-header {
-  padding-top: 0px;
-}
-
-.main-view-fix {
-  padding-top: 44px;
-}
-
-.noMultiTabs {
-  padding-top: 0;
-}
 </style>
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index 8612fa4f..d8209dee 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -36,7 +36,7 @@ const setting = {
     //分割菜单
     mixMenu: false,
     //触发移动端侧边栏的宽度
-    mobileWidth: 800
+    mobileWidth: 800,
   },
   //面包屑
   crumbsSetting: {
diff --git a/src/styles/common.less b/src/styles/common.less
index 235d0b6f..94bb26b0 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -1,9 +1,12 @@
-#app, body, html {
+#app,
+body,
+html {
   height: 100%;
 }
 
 body {
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
+    '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
   line-height: 1.5;
   color: #515a6e;
   font-size: 14px;
@@ -15,7 +18,7 @@ body {
 //重置样式
 .anticon {
   svg {
-    vertical-align: initial
+    vertical-align: initial;
   }
 }
 
@@ -25,10 +28,11 @@ a {
   text-decoration: none;
   outline: none;
   cursor: pointer;
-  transition: color .2s ease;
+  transition: color 0.2s ease;
 }
 
-a:active, a:hover {
+a:active,
+a:hover {
   outline-width: 0;
 }
 
@@ -40,7 +44,8 @@ a:active {
   color: #2b85e4;
 }
 
-a:active, a:hover {
+a:active,
+a:hover {
   outline: 0;
   text-decoration: none;
 }
@@ -91,7 +96,7 @@ a:active, a:hover {
 
 //antd 卡片样式定制
 body .n-card {
-  transition: all .2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
 body .n-icon {
@@ -110,7 +115,7 @@ body .proCard {
   }
 }
 
-body .n-modal{
+body .n-modal {
   border-radius: 6px;
 }
 
diff --git a/src/views/iframe/index.vue b/src/views/iframe/index.vue
index 8366ac18..5ee212eb 100644
--- a/src/views/iframe/index.vue
+++ b/src/views/iframe/index.vue
@@ -43,7 +43,6 @@
     loading.value = true;
     init();
   });
-
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/system/menu/menu.vue b/src/views/system/menu/menu.vue
index e0e5ee40..ebcab6d3 100644
--- a/src/views/system/menu/menu.vue
+++ b/src/views/system/menu/menu.vue
@@ -213,7 +213,7 @@
   }
 
   function handleReset() {
-    const treeItem = getTreeItem(unref(treeData), treeItemKey[0]);
+    const treeItem = getTreeItem(unref(treeData), treeItemKey.value[0]);
     Object.assign(formParams, treeItem);
   }
 
diff --git a/yarn.lock b/yarn.lock
index 3e1a1e45..83470bec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2430,15 +2430,10 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns-tz@^1.1.6:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.2.2.tgz#89432b54ce3fa7d050a2039e997e5b6a96df35dd"
-  integrity sha512-vWtn44eEqnLbkACb7T5G5gPgKR4nY8NkNMOCyoY49NsRGHrcDmY2aysCyzDeA+u+vcDBn/w6nQqEDyouRs4m8w==
-
-date-fns@^2.27.0:
-  version "2.27.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.27.0.tgz#e1ff3c3ddbbab8a2eaadbb6106be2929a5a2d92b"
-  integrity sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q==
+date-fns-tz@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.0.tgz#6c83d4bdf20d54060cf176d96a3ca45043b36a84"
+  integrity sha512-r6ye6PmGEvkF467/41qzU71oGwv9kHTnV3vtSZdyV6VThwPID47ZH7FtR7zQWrhgOUWkYySm2ems2w6ZfNUqoA==
 
 date-fns@^2.28.0:
   version "2.28.0"
@@ -5169,10 +5164,10 @@ mute-stream@0.0.7:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
-naive-ui@^2.25.2:
-  version "2.25.2"
-  resolved "https://registry.yarnpkg.com/naive-ui/-/naive-ui-2.25.2.tgz#e2f7bc5e11882a7c14a5c67dd175838e58749ec8"
-  integrity sha512-Jv/hMVHECh1Q7lPtIkGIa+eQVwFpQs6qEAn3r+eaEGmSuTAFJOrIKRL4ob10O5jQ1BxjLyWb+kzSxuwoi/VHWg==
+naive-ui@^2.26.4:
+  version "2.26.4"
+  resolved "https://registry.yarnpkg.com/naive-ui/-/naive-ui-2.26.4.tgz#96b91fd36919fd36d20641668c8636a02e144d65"
+  integrity sha512-yJQl6y58pxQWKi8YAofiFk0+4WVN+dNYoyKiMfaVdvVQTh9VxjBrcs4z5NUT+d98xUXOtmMzpIlrW/4P1xty+w==
   dependencies:
     "@css-render/plugin-bem" "^0.15.8"
     "@css-render/vue3-ssr" "^0.15.8"
@@ -5180,8 +5175,8 @@ naive-ui@^2.25.2:
     "@types/lodash-es" "^4.17.4"
     async-validator "^4.0.1"
     css-render "^0.15.8"
-    date-fns "^2.27.0"
-    date-fns-tz "^1.1.6"
+    date-fns "^2.28.0"
+    date-fns-tz "^1.3.0"
     evtd "^0.2.3"
     highlight.js "^11.0.1"
     lodash "^4.17.21"
@@ -5191,7 +5186,7 @@ naive-ui@^2.25.2:
     vdirs "^0.1.7"
     vfonts "^0.0.3"
     vooks "^0.2.12"
-    vueuc "^0.4.25"
+    vueuc "^0.4.27"
 
 nanoid@^3.1.30:
   version "3.1.30"
@@ -7157,10 +7152,10 @@ vuedraggable@^4.1.0:
   dependencies:
     sortablejs "1.14.0"
 
-vueuc@^0.4.25:
-  version "0.4.25"
-  resolved "https://registry.yarnpkg.com/vueuc/-/vueuc-0.4.25.tgz#fe7b216855c2f11f6ae4b9d81b6ad9fb5ebe5664"
-  integrity sha512-SkQCtJ0N+O24gCgDwc+TYNAptgoOb/+lCTlZ7s9I+eTLo7DiLvfHp0mWI04cGkP1elhH26xdkCN+TCQ0vwaL5g==
+vueuc@^0.4.27:
+  version "0.4.27"
+  resolved "https://registry.yarnpkg.com/vueuc/-/vueuc-0.4.27.tgz#ac9fba71e33bed7e51ee59962e260371293119d6"
+  integrity sha512-wkIM6F1VT9cuzC2YOIzktPcTJ3eI8FoQ39KazAKwcdPv3GcXZGO1vBZc3TspBwap0AIn9eF8dxvQAW80yxhbHg==
   dependencies:
     "@css-render/vue3-ssr" "^0.15.7"
     css-render "^0.15.7"