fix: 优化部分无用代码及升级ui版本 🚀

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';

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

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

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];

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>

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

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>

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>

src/settings/projectSetting.ts

@@ -36,7 +36,7 @@ const setting = {
     //分割菜单
     mixMenu: false,
     //触发移动端侧边栏的宽度
-    mobileWidth: 800
+    mobileWidth: 800,
   },
   //面包屑
   crumbsSetting: {

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

src/views/iframe/index.vue

@@ -43,7 +43,6 @@
     loading.value = true;
     init();
   });
-
 </script>
 
 <style lang="less" scoped>

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