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

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

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,7 +12,7 @@ export interface ModalMethods {
 /**
  * 支持修改，DialogOptions 參數
  */
-export interface ModalProps extends DialogOptions { }
+export type ModalProps = DialogOptions;
 
 export type RegisterFn = (ModalInstance: ModalMethods) => void;
 

src/components/Table/src/components/editable/EditableCell.vue

@@ -337,7 +337,7 @@
           isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn());
         };
         /* eslint-disable */
-     props.record.onSubmitEdit = async() => {
+        props.record.onSubmitEdit = async () => {
           if (isArray(props.record?.submitCbs)) {
             const validFns = (props.record?.validCbs || []).map((fn) => fn());
 
@@ -380,7 +380,7 @@
 </script>
 
 <style lang="less">
-.editable-cell {
+  .editable-cell {
     &-content {
       position: relative;
       overflow-wrap: break-word;
@@ -389,7 +389,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
 
-  &-comp{
+      &-comp {
         flex: 1;
       }
 
@@ -415,5 +415,5 @@
       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,14 +15,14 @@
 </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({
+  export default defineComponent({
     name: 'Menu',
     components: {},
     props: {
@@ -125,7 +125,7 @@ export default defineComponent({
         } else {
           router.push({ name: key });
         }
-      emit("clickMenuItem" as any, key)
+        emit('clickMenuItem' as any, key);
       }
 
       //展开菜单
@@ -163,5 +163,5 @@ export default defineComponent({
         menuExpanded,
       };
     },
-});
+  });
 </script>

src/layout/components/TagsView/index.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script lang="ts">
-import {
+  import {
     defineComponent,
     reactive,
     computed,
@@ -91,18 +91,18 @@ import {
     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 {
+  } 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,
@@ -110,14 +110,14 @@ import {
     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';
+  } 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({
+  export default defineComponent({
     name: 'TabsView',
     components: {
       DownOutlined,
@@ -196,7 +196,7 @@ export default defineComponent({
         if (getIsMobile.value) {
           return {
             left: '0px',
-          width: '100%'
+            width: '100%',
           };
         }
         return {
@@ -527,11 +527,11 @@ export default defineComponent({
         getBaseColor,
       };
     },
-});
+  });
 </script>
 
 <style lang="less" scoped>
-.tabs-view {
+  .tabs-view {
     width: 100%;
     padding: 6px 0;
     display: flex;
@@ -656,24 +656,24 @@ export default defineComponent({
         justify-content: center;
       }
     }
-}
+  }
 
-.tabs-view-default-background {
+  .tabs-view-default-background {
     background: #f5f7f9;
-}
+  }
 
-.tabs-view-dark-background {
+  .tabs-view-dark-background {
     background: #101014;
-}
+  }
 
-.tabs-view-fix {
+  .tabs-view-fix {
     position: fixed;
     z-index: 5;
     padding: 6px 19px 6px 10px;
     left: 200px;
-}
+  }
 
-.tabs-view-fixed-header {
+  .tabs-view-fixed-header {
     top: 0;
-}
+  }
 </style>

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,47 +69,47 @@
 </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,
+  const { getDarkTheme } = useDesignSetting();
+  const {
+    // getShowFooter,
     getNavMode,
     getNavTheme,
     getHeaderSetting,
     getMenuSetting,
     getMultiTabsSetting,
-} = useProjectSetting();
+  } = 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>({
+  const isMobile = computed<boolean>({
     get: () => settingStore.getIsMobile,
-  set: (val) => settingStore.setIsMobile(val)
-});
+    set: (val) => settingStore.setIsMobile(val),
+  });
 
-const fixedHeader = computed(() => {
+  const fixedHeader = computed(() => {
     const { fixed } = unref(getHeaderSetting);
     return fixed ? 'absolute' : 'static';
-});
+  });
 
-const isMixMenuNoneSub = computed(() => {
+  const isMixMenuNoneSub = computed(() => {
     const mixMenu = settingStore.menuSetting.mixMenu;
     const currentRoute = useRoute();
     if (unref(navMode) != 'horizontal-mix') return true;
@@ -115,83 +117,84 @@ const isMixMenuNoneSub = computed(() => {
       return false;
     }
     return true;
-});
+  });
 
-const fixedMenu = computed(() => {
+  const fixedMenu = computed(() => {
     const { fixed } = unref(getHeaderSetting);
     return fixed ? 'absolute' : 'static';
-});
+  });
 
-const isMultiTabs = computed(() => {
+  const isMultiTabs = computed(() => {
     return unref(getMultiTabsSetting).show;
-});
+  });
 
-const fixedMulti = computed(() => {
+  const fixedMulti = computed(() => {
     return unref(getMultiTabsSetting).fixed;
-});
+  });
 
-const inverted = computed(() => {
+  const inverted = computed(() => {
     return ['dark', 'header-dark'].includes(unref(getNavTheme));
-});
+  });
 
-const getHeaderInverted = computed(() => {
+  const getHeaderInverted = computed(() => {
     const navTheme = unref(getNavTheme);
     return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
-});
+  });
 
-const leftMenuWidth = computed(() => {
+  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(() => {
+  const getMenuLocation = computed(() => {
     return 'left';
-});
+  });
 
-// 控制显示或隐藏移动端侧边栏
-const showSideDrawder = computed({
+  // 控制显示或隐藏移动端侧边栏
+  const showSideDrawder = computed({
     get: () => isMobile.value && collapsed.value,
-  set: (val) => (collapsed.value = val)
-});
+    set: (val) => (collapsed.value = val),
+  });
 
-//判断是否触发移动端模式
-const checkMobileMode = () => {
+  //判断是否触发移动端模式
+  const checkMobileMode = () => {
     if (document.body.clientWidth <= mobileWidth) {
       isMobile.value = true;
     } else {
       isMobile.value = false;
     }
     collapsed.value = false;
-}
+  };
 
-const watchWidth = () => {
+  const watchWidth = () => {
     const Width = document.body.clientWidth;
     if (Width <= 950) {
       collapsed.value = true;
     } else collapsed.value = false;
 
     checkMobileMode();
-};
+  };
 
-onMounted(() => {
+  onMounted(() => {
     checkMobileMode();
     window.addEventListener('resize', watchWidth);
     //挂载在 window 方便与在js中使用
     window['$loading'] = useLoadingBar();
     window['$loading'].finish();
-});
+  });
 </script>
 
 <style lang="less">
-.layout-side-drawer {
+  .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%);
@@ -199,10 +202,10 @@ onMounted(() => {
       z-index: 13;
       transition: all 0.2s ease-in-out;
     }
-}
+  }
 </style>
 <style lang="less" scoped>
-.layout {
+  .layout {
     display: flex;
     flex-direction: row;
     flex: auto;
@@ -248,27 +251,27 @@ onMounted(() => {
     .n-layout-footer {
       background: none;
     }
-}
+  }
 
-.layout-content-main {
+  .layout-content-main {
     margin: 0 10px 10px;
     position: relative;
     padding-top: 64px;
-}
+  }
 
-.layout-content-main-fix {
+  .layout-content-main-fix {
     padding-top: 64px;
-}
+  }
 
-.fluid-header {
-  padding-top: 0px;
-}
-
-.main-view-fix {
-  padding-top: 44px;
-}
-
-.noMultiTabs {
+  .fluid-header {
     padding-top: 0;
-}
+  }
+
+  .main-view-fix {
+    padding-top: 44px;
+  }
+
+  .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);
   }
 

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"