refactor: remove unused files, bug fixes and name changes

src/layout/components/Header/index.vue

@@ -75,7 +75,7 @@
       <div
         class="layout-header-trigger layout-header-trigger-min"
         v-for="item in iconList"
-        :key="item.icon.name"
+        :key="item.icon"
       >
         <n-tooltip placement="bottom">
           <template #trigger>
@@ -134,7 +134,7 @@
   import { NDialogProvider, useDialog, useMessage } from 'naive-ui';
   import { TABS_ROUTES } from '@/store/mutation-types';
   import { useUserStore } from '@/store/modules/user';
-  import { useLockscreenStore } from '@/store/modules/lockscreen';
+  import { useScreenLockStore } from '@/store/modules/screenLock';
   import ProjectSetting from './ProjectSetting.vue';
   import { AsideMenu } from '@/layout/components/Menu';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
@@ -153,37 +153,37 @@
     },
     setup(props) {
       const userStore = useUserStore();
-      const useLockscreen = useLockscreenStore();
+      const useLockscreen = useScreenLockStore();
       const message = useMessage();
       const dialog = useDialog();
-      const { getNavMode, getNavTheme, getHeaderSetting, getMenuSetting, getCrumbsSetting } =
-        useProjectSetting();
+      const { navMode, navTheme, headerSetting, menuSetting, crumbsSetting } = useProjectSetting();
 
-      const { username } = userStore?.info || {};
+      const { name } = userStore?.info || {};
 
       const drawerSetting = ref();
 
       const state = reactive({
-        username: username || '',
+        username: name ?? '',
         fullscreenIcon: 'FullscreenOutlined',
-        navMode: getNavMode,
-        navTheme: getNavTheme,
-        headerSetting: getHeaderSetting,
-        crumbsSetting: getCrumbsSetting,
+        navMode,
+        navTheme,
+        headerSetting,
+        crumbsSetting,
       });
 
       const getInverted = computed(() => {
-        const navTheme = unref(getNavTheme);
-        return ['light', 'header-dark'].includes(navTheme) ? props.inverted : !props.inverted;
+        return ['light', 'header-dark'].includes(unref(navTheme))
+          ? props.inverted
+          : !props.inverted;
       });
 
       const mixMenu = computed(() => {
-        return unref(getMenuSetting).mixMenu;
+        return unref(menuSetting).mixMenu;
       });
 
       const getChangeStyle = computed(() => {
         const { collapsed } = props;
-        const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
+        const { minMenuWidth, menuWidth } = unref(menuSetting);
         return {
           left: collapsed ? `${minMenuWidth}px` : `${menuWidth}px`,
           width: `calc(100% - ${collapsed ? `${minMenuWidth}px` : `${menuWidth}px`})`,

src/layout/components/Main/index.vue

@@ -30,13 +30,13 @@
       },
     },
     setup() {
-      const { getIsPageAnimate, getPageAnimateType } = useProjectSetting();
+      const { isPageAnimate, pageAnimateType } = useProjectSetting();
       const asyncRouteStore = useAsyncRouteStore();
       // 需要缓存的路由组件
       const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents);
 
       const getTransitionName = computed(() => {
-        return unref(getIsPageAnimate) ? unref(getPageAnimateType) : '';
+        return unref(isPageAnimate) ? unref(pageAnimateType) : '';
       });
 
       return {

src/layout/components/Menu/index.vue

@@ -23,7 +23,7 @@
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 
   export default defineComponent({
-    name: 'Menu',
+    name: 'AppMenu',
     components: {},
     props: {
       mode: {
@@ -52,9 +52,7 @@
       const selectedKeys = ref<string>(currentRoute.name as string);
       const headerMenuSelectKey = ref<string>('');
 
-      const { getNavMode } = useProjectSetting();
-
-      const navMode = getNavMode;
+      const { navMode } = useProjectSetting();
 
       // 获取当前打开的子菜单
       const matched = currentRoute.matched;

src/layout/components/TagsView/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tabs-view box-border"
+    class="box-border tabs-view"
     :class="{
       'tabs-view-fix': multiTabsSetting.fixed,
       'tabs-view-fixed-header': isMultiHeaderFixed,
@@ -82,7 +82,6 @@
     computed,
     ref,
     toRefs,
-    unref,
     provide,
     watch,
     onMounted,
@@ -130,7 +129,7 @@
     },
     setup(props) {
       const { getDarkTheme, getAppTheme } = useDesignSetting();
-      const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting, getIsMobile } =
+      const { navMode, headerSetting, menuSetting, multiTabsSetting, isMobile } =
         useProjectSetting();
       const settingStore = useProjectSettingStore();
 
@@ -161,7 +160,7 @@
         dropdownY: 0,
         showDropdown: false,
         isMultiHeaderFixed: false,
-        multiTabsSetting: getMultiTabsSetting,
+        multiTabsSetting: multiTabsSetting,
       });
 
       // 获取简易的路由对象
@@ -173,25 +172,23 @@
       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);
+        if (navMode.value != 'horizontal-mix') return true;
+        return !(navMode.value === '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);
+        const { minMenuWidth, menuWidth }: any = menuSetting.value;
+        const { fixed }: any = multiTabsSetting.value;
         let lenNum =
-          navMode === 'horizontal' || !isMixMenuNoneSub.value
+          navMode.value === 'horizontal' || !isMixMenuNoneSub.value
             ? '0px'
             : collapsed
             ? `${minMenuWidth}px`
             : `${menuWidth}px`;
 
-        if (getIsMobile.value) {
+        if (isMobile.value) {
           return {
             left: '0px',
             width: '100%',
@@ -205,7 +202,7 @@
 
       //tags 右侧下拉菜单
       const TabsMenuOptions = computed(() => {
-        const isDisabled = unref(tabsList).length <= 1;
+        const isDisabled = tabsList.value.length <= 1;
         return [
           {
             label: '刷新当前',
@@ -215,7 +212,7 @@
           {
             label: `关闭当前`,
             key: '2',
-            disabled: unref(isCurrent) || isDisabled,
+            disabled: isCurrent.value || isDisabled,
             icon: renderIcon(CloseOutlined),
           },
           {
@@ -263,8 +260,8 @@
           window.pageYOffset ||
           document.body.scrollTop; // 滚动条偏移量
         state.isMultiHeaderFixed = !!(
-          !getHeaderSetting.value.fixed &&
-          getMultiTabsSetting.value.fixed &&
+          !headerSetting.value.fixed &&
+          multiTabsSetting.value.fixed &&
           scrollTop >= 64
         );
       }
@@ -297,7 +294,7 @@
         (to) => {
           if (whiteList.includes(route.name as string)) return;
           state.activeKey = to;
-          tabsViewStore.addTabs(getSimpleRoute(route));
+          tabsViewStore.addTab(getSimpleRoute(route));
           updateNavScroll(true);
         },
         { immediate: true }
@@ -328,7 +325,7 @@
       const reloadPage = () => {
         delKeepAliveCompName();
         router.push({
-          path: '/redirect' + unref(route).fullPath,
+          path: '/redirect' + route.fullPath,
         });
       };
 

src/layout/index.vue

@@ -21,7 +21,7 @@
     </n-layout-sider>
 
     <n-drawer
-      v-model:show="showSideDrawder"
+      v-model:show="showSideDrawer"
       :width="menuWidth"
       :placement="'left'"
       class="layout-side-drawer"
@@ -82,21 +82,19 @@
 
   const { getDarkTheme } = useDesignSetting();
   const {
-    // getShowFooter,
-    getNavMode,
-    getNavTheme,
-    getHeaderSetting,
-    getMenuSetting,
-    getMultiTabsSetting,
+    // showFooter,
+    navMode,
+    navTheme,
+    headerSetting,
+    menuSetting,
+    multiTabsSetting,
   } = useProjectSetting();
 
   const settingStore = useProjectSettingStore();
 
-  const navMode = getNavMode;
-
   const collapsed = ref<boolean>(false);
 
-  const { mobileWidth, menuWidth } = unref(getMenuSetting);
+  const { mobileWidth, menuWidth } = unref(menuSetting);
 
   const isMobile = computed<boolean>({
     get: () => settingStore.getIsMobile,
@@ -104,12 +102,12 @@
   });
 
   const fixedHeader = computed(() => {
-    const { fixed } = unref(getHeaderSetting);
+    const { fixed } = unref(headerSetting);
     return fixed ? 'absolute' : 'static';
   });
 
   const isMixMenuNoneSub = computed(() => {
-    const mixMenu = settingStore.menuSetting.mixMenu;
+    const mixMenu = unref(menuSetting).mixMenu;
     const currentRoute = useRoute();
     if (unref(navMode) != 'horizontal-mix') return true;
     if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
@@ -119,45 +117,37 @@
   });
 
   const fixedMenu = computed(() => {
-    const { fixed } = unref(getHeaderSetting);
+    const { fixed } = unref(headerSetting);
     return fixed ? 'absolute' : 'static';
   });
 
   const isMultiTabs = computed(() => {
-    return unref(getMultiTabsSetting).show;
+    return unref(multiTabsSetting).show;
   });
 
   const fixedMulti = computed(() => {
-    return unref(getMultiTabsSetting).fixed;
+    return unref(multiTabsSetting).fixed;
   });
 
   const inverted = computed(() => {
-    return ['dark', 'header-dark'].includes(unref(getNavTheme));
+    return ['dark', 'header-dark'].includes(unref(navTheme));
   });
 
   const getHeaderInverted = computed(() => {
-    const navTheme = unref(getNavTheme);
-    return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
+    return ['light', 'header-dark'].includes(unref(navTheme)) ? unref(inverted) : !unref(inverted);
   });
 
   const leftMenuWidth = computed(() => {
-    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+    const { minMenuWidth, menuWidth } = unref(menuSetting);
     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({
+  const showSideDrawer = computed({
     get: () => isMobile.value && collapsed.value,
     set: (val) => (collapsed.value = val),
   });