Merge pull request #111 from wangdaoo/feat/wangdaoo

fix: 优化部分无用代码及升级ui版本 🚀
2026-02-04 13:42:27 +08:00 · 2022-03-12 18:29:21 +08:00
parent 6558e1597c 12e62d1179
commit b49d9e8bd2
15 changed files with 964 additions and 962 deletions
--- 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",
--- 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';
--- 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');
  }

--- 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();

--- 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];
+export type UseModalReturnType = [RegisterFn, ModalMethods];
--- 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]);
-     }
-    }
-
-    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;
+          isArray(props.record[cbs])
+            ? props.record[cbs]?.push(handle)
+            : (props.record[cbs] = [handle]);
+        }
      }
-     };
-    }

-    return {
-     isEdit,
-     handleEdit,
-     currentValueRef,
-     handleSubmit,
-     handleChange,
-     handleCancel,
-     elRef,
-     getComponent,
-     getRule,
-     onClickOutside,
-     ruleMessage,
-     getRuleVisible,
-     getComponentProps,
-     handleOptionsChange,
-     getWrapperClass,
-     getRowEditable,
-     getValues,
-     handleEnter,
-     // getSize,
-    };
-   },
+      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,
+      };
+    },
  });
 </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;
+  .editable-cell {
+    &-content {
+      position: relative;
+      overflow-wrap: break-word;
+      word-break: break-word;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;

-  &-comp{
-    flex: 1;
+      &-comp {
+        flex: 1;
+      }
+
+      .edit-icon {
+        font-size: 14px;
+        //position: absolute;
+        //top: 4px;
+        //right: 0;
+        display: none;
+        width: 20px;
+        cursor: pointer;
+      }
+
+      &:hover {
+        .edit-icon {
+          display: inline-block;
+        }
+      }
+    }
+
+    &-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
  }
-
-  .edit-icon {
-   font-size: 14px;
-   //position: absolute;
-   //top: 4px;
-   //right: 0;
-   display: none;
-   width: 20px;
-   cursor: pointer;
-  }
-
-  &:hover {
-   .edit-icon {
-    display: inline-block;
-   }
-  }
- }
-
- &-action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
- }
-}
 </style>
--- 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;
        }
--- 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';
+  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',
+  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>('');
+    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 { getNavMode } = useProjectSetting();

-    const navMode = getNavMode;
+      const navMode = getNavMode;

-    // 获取当前打开的子菜单
-    const matched = currentRoute.matched;
+      // 获取当前打开的子菜单
+      const matched = currentRoute.matched;

-    const getOpenKeys = matched && matched.length ? matched.map((item) => item.name) : [];
+      const getOpenKeys = matched && matched.length ? matched.map((item) => item.name) : [];

-    const state = reactive({
-      openKeys: getOpenKeys,
-    });
+      const state = reactive({
+        openKeys: getOpenKeys,
+      });

-    const inverted = computed(() => {
-      return ['dark', 'header-dark'].includes(settingStore.navTheme);
-    });
+      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);
-    });
+      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(
+        () => 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 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 clickMenuItem(key: string) {
+        if (/http(s)?:/.test(key)) {
+          window.open(key);
+        } else {
+          router.push({ name: key });
        }
+        emit('clickMenuItem' as any, key);
      }
-      return subRouteChildren.includes(key);
-    }

-    onMounted(() => {
-      updateMenu();
-    });
+      //展开菜单
+      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;
+      }

-    return {
-      ...toRefs(state),
-      inverted,
-      menus,
-      selectedKeys,
-      headerMenuSelectKey,
-      getSelectedKeys,
-      clickMenuItem,
-      menuExpanded,
-    };
-  },
-});
+      //查找是否存在子路由
+      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);
+      }
+
+      onMounted(() => {
+        updateMenu();
+      });
+
+      return {
+        ...toRefs(state),
+        inverted,
+        menus,
+        selectedKeys,
+        headerMenuSelectKey,
+        getSelectedKeys,
+        clickMenuItem,
+        menuExpanded,
+      };
+    },
+  });
 </script>
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
--- 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';
+  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 { getDarkTheme } = useDesignSetting();
+  const {
+    // getShowFooter,
+    getNavMode,
+    getNavTheme,
+    getHeaderSetting,
+    getMenuSetting,
+    getMultiTabsSetting,
+  } = useProjectSetting();

-const settingStore = useProjectSettingStore();
+  const settingStore = useProjectSettingStore();

-const navMode = getNavMode;
+  const navMode = getNavMode;

-const collapsed = ref<boolean>(false);
+  const collapsed = ref<boolean>(false);

-const { mobileWidth, menuWidth } = unref(getMenuSetting);
+  const { mobileWidth, menuWidth } = unref(getMenuSetting);

-const isMobile = computed<boolean>({
-  get: () => settingStore.getIsMobile,
-  set: (val) => settingStore.setIsMobile(val)
-});
+  const isMobile = computed<boolean>({
+    get: () => settingStore.getIsMobile,
+    set: (val) => settingStore.setIsMobile(val),
+  });

-const fixedHeader = computed(() => {
-  const { fixed } = unref(getHeaderSetting);
-  return fixed ? 'absolute' : 'static';
-});
+  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 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 fixedMenu = computed(() => {
+    const { fixed } = unref(getHeaderSetting);
+    return fixed ? 'absolute' : 'static';
+  });

-const isMultiTabs = computed(() => {
-  return unref(getMultiTabsSetting).show;
-});
+  const isMultiTabs = computed(() => {
+    return unref(getMultiTabsSetting).show;
+  });

-const fixedMulti = computed(() => {
-  return unref(getMultiTabsSetting).fixed;
-});
+  const fixedMulti = computed(() => {
+    return unref(getMultiTabsSetting).fixed;
+  });

-const inverted = computed(() => {
-  return ['dark', 'header-dark'].includes(unref(getNavTheme));
-});
+  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 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 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 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 watchWidth = () => {
+    const Width = document.body.clientWidth;
+    if (Width <= 950) {
+      collapsed.value = true;
+    } else collapsed.value = false;

-// 控制显示或隐藏移动端侧边栏
-const showSideDrawder = computed({
-  get: () => isMobile.value && collapsed.value,
-  set: (val) => (collapsed.value = val)
-});
+    checkMobileMode();
+  };

-//判断是否触发移动端模式
-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();
-});
+  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;
-
-  &-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 {
+  .layout {
+    display: flex;
+    flex-direction: row;
    flex: auto;
-    min-height: 100vh;
+
+    &-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;
+    }
  }

-  .n-layout-header.n-layout-header--absolute-positioned {
-    z-index: 11;
+  .layout-content-main {
+    margin: 0 10px 10px;
+    position: relative;
+    padding-top: 64px;
  }

-  .n-layout-footer {
-    background: none;
+  .layout-content-main-fix {
+    padding-top: 64px;
  }
-}

-.layout-content-main {
-  margin: 0 10px 10px;
-  position: relative;
-  padding-top: 64px;
-}
+  .fluid-header {
+    padding-top: 0;
+  }

-.layout-content-main-fix {
-  padding-top: 64px;
-}
+  .main-view-fix {
+    padding-top: 44px;
+  }

-.fluid-header {
-  padding-top: 0px;
-}
-
-.main-view-fix {
-  padding-top: 44px;
-}
-
-.noMultiTabs {
-  padding-top: 0;
-}
+  .noMultiTabs {
+    padding-top: 0;
+  }
 </style>
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -36,7 +36,7 @@ const setting = {
    //分割菜单
    mixMenu: false,
    //触发移动端侧边栏的宽度
-    mobileWidth: 800
+    mobileWidth: 800,
  },
  //面包屑
  crumbsSetting: {
--- 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;
 }

--- 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>
--- 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);
  }

--- 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"