refactor(projects): 路由声明重构，添加composables，BaseLayout进行中，文件夹规范

src/layouts/BasicLayout/components/GlobalContent/index.vue

@@ -1,6 +1,14 @@
 <template>
   <div
-    class="flex-1 flex-col-stretch p-16px bg-[#F6F9F8] dark:bg-black"
+    class="
+      flex-1 flex-col-stretch
+      p-16px
+      bg-[#f6f9f8]
+      dark:bg-deep-dark
+      transition-backgorund-color
+      duration-300
+      ease-in-out
+    "
     :class="{ 'overflow-hidden': routeProps.fullPage }"
   >
     <router-view v-slot="{ Component, route }">
@@ -17,7 +25,7 @@
 import { useThemeStore } from '@/store';
 import { useReloadInject } from '@/context';
 import { cacheRoutes } from '@/router';
-import { useRouteProps } from '@/hooks';
+import { useRouteProps } from '@/composables';
 
 const theme = useThemeStore();
 const { reload } = useReloadInject();

src/layouts/BasicLayout/components/GlobalHeader/components/GlobalBreadcrumb.vue

@@ -32,15 +32,15 @@ import type { RouteLocationMatched } from 'vue-router';
 import { NBreadcrumb, NBreadcrumbItem, NDropdown } from 'naive-ui';
 import type { DropdownOption } from 'naive-ui';
 import { Icon } from '@iconify/vue';
-import { EnumRoutePath } from '@/enum';
+import { routePath } from '@/router';
 import { useThemeStore } from '@/store';
-import type { RoutePathKey } from '@/interface';
+import type { RouteKey } from '@/interface';
 
 type Breadcrumb = DropdownOption & {
   key: string;
   label: string;
   disabled: boolean;
-  routeName: RoutePathKey;
+  routeName: RouteKey;
   hasChildren: boolean;
   iconName?: string;
   children?: Breadcrumb[];
@@ -62,11 +62,11 @@ function recursionBreadcrumb(routeMatched: RouteLocationMatched[]) {
   const list: Breadcrumb[] = [];
   routeMatched.forEach(item => {
     if (!item.meta?.isNotMenu) {
-      const routeName = item.name as RoutePathKey;
+      const routeName = item.name as RouteKey;
       const breadcrumItem: Breadcrumb = {
         key: routeName,
         label: (item.meta?.title as string) || '',
-        disabled: item.path === EnumRoutePath.root,
+        disabled: item.path === routePath('root'),
         routeName,
         hasChildren: false
       };
@@ -84,7 +84,7 @@ function recursionBreadcrumb(routeMatched: RouteLocationMatched[]) {
 }
 
 function dropdownSelect(optionKey: string) {
-  const key = optionKey as RoutePathKey;
+  const key = optionKey as RouteKey;
   router.push({ name: key });
 }
 </script>

src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue

@@ -10,13 +10,13 @@
 <script lang="ts" setup>
 import { NDropdown, useDialog } from 'naive-ui';
 import { HoverContainer } from '@/components';
-import { useRouterChange } from '@/hooks';
+import { useRouterPush } from '@/composables';
 import { iconifyRender, resetAuthStorage } from '@/utils';
 import avatar from '@/assets/svg/avatar/avatar01.svg';
 
 type DropdownKey = 'user-center' | 'logout';
 
-const { toLogin } = useRouterChange();
+const { toLogin } = useRouterPush();
 const dialog = useDialog();
 
 const options = [

src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue

@@ -35,7 +35,7 @@ import { useRouter, useRoute } from 'vue-router';
 import { NScrollbar, NMenu } from 'naive-ui';
 import type { MenuOption } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
-import { useAppTitle } from '@/hooks';
+import { useAppTitle } from '@/composables';
 import { menus } from '@/router';
 import type { GlobalMenuOption } from '@/interface';
 

src/layouts/BasicLayout/components/GlobalTab/index.vue

@@ -1,8 +1,19 @@
 <template>
   <div v-if="fixedHeaderAndTab && theme.navStyle.mode !== 'horizontal-mix'" class="multi-tab-height w-full"></div>
   <div
-    class="multi-tab flex-center justify-between w-full pl-10px"
-    :class="[theme.darkMode ? 'bg-[#18181c]' : 'bg-white', { 'multi-tab-top absolute': fixedHeaderAndTab }]"
+    class="
+      multi-tab
+      flex-center
+      justify-between
+      w-full
+      pl-10px
+      bg-light
+      dark:bg-dark
+      transition-backgorund-color
+      duration-300
+      ease-in-out
+    "
+    :class="{ 'multi-tab-top absolute': fixedHeaderAndTab }"
     :style="{ zIndex }"
     :align="'center'"
     justify="space-between"

src/layouts/BasicLayout/components/common/GlobalLogo.vue

@@ -9,7 +9,7 @@
 import { computed } from 'vue';
 import { SystemLogo } from '@/components';
 import { useAppStore, useThemeStore } from '@/store';
-import { useAppTitle } from '@/hooks';
+import { useAppTitle } from '@/composables';
 
 const app = useAppStore();
 const theme = useThemeStore();

src/layouts/BasicLayout/index.vue

@@ -4,7 +4,7 @@
     <global-header v-if="isHorizontalMix" :z-index="14" />
     <div class="flex-1-hidden flex h-full">
       <global-sider v-if="isHorizontalMix" :z-index="13" />
-      <n-scrollbar ref="scrollbar" class="h-full" :content-class="routeProps.fullPage ? 'h-full' : ''">
+      <n-scrollbar class="h-full" :content-class="routeProps.fullPage ? 'h-full' : ''">
         <div
           class="inline-flex-col-stretch w-full"
           :class="[{ 'content-padding': isHorizontalMix }, routeProps.fullPage ? 'h-full' : 'min-h-100vh']"
@@ -21,16 +21,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { computed } from 'vue';
 import { NLayout, NScrollbar } from 'naive-ui';
 import { useThemeStore } from '@/store';
-import { useRouteProps, useScrollBehavior } from '@/hooks';
+import { useRouteProps } from '@/composables';
 import { GlobalSider, GlobalHeader, GlobalTab, GlobalContent, GlobalFooter, SettingDrawer } from './components';
 
-const route = useRoute();
 const theme = useThemeStore();
-const { scrollbar, resetScrollBehavior } = useScrollBehavior();
 const routeProps = useRouteProps();
 
 const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
@@ -42,13 +39,6 @@ const headerAndMultiTabHeight = computed(() => {
   } = theme;
   return `${hHeight + mHeight}px`;
 });
-
-watch(
-  () => route.name,
-  () => {
-    resetScrollBehavior();
-  }
-);
 </script>
 <style scoped>
 :deep(.n-scrollbar-rail) {