refactor(projects): 抽离格式化相关依赖配置

src/layouts/BasicLayout/index.vue

@@ -38,13 +38,13 @@ import { useAppStore, useThemeStore } from '@/store';
 import { useBasicLayout } from '@/composables';
 import { useBoolean } from '@/hooks';
 import {
-  SettingDrawer,
-  GlobalHeader,
-  GlobalTab,
-  GlobalSider,
+  GlobalBackTop,
   GlobalContent,
   GlobalFooter,
-  GlobalBackTop
+  GlobalHeader,
+  GlobalSider,
+  GlobalTab,
+  SettingDrawer
 } from '../common';
 
 defineOptions({ name: 'BasicLayout' });

src/layouts/common/GlobalContent/index.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { useAppStore, useThemeStore, useRouteStore } from '@/store';
+import { useAppStore, useRouteStore, useThemeStore } from '@/store';
 
 defineOptions({ name: 'GlobalContent' });
 

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

@@ -30,7 +30,7 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { routePath } from '@/router';
-import { useThemeStore, useRouteStore } from '@/store';
+import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { getBreadcrumbByRouteKey } from '@/utils';
 

src/layouts/common/GlobalHeader/components/SystemMessage.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useThemeStore } from '@/store';
 import { useBoolean } from '@/hooks';
 import MessageList from './MessageList.vue';

src/layouts/common/GlobalHeader/index.vue

@@ -24,15 +24,15 @@ import { useBasicLayout } from '@/composables';
 import GlobalLogo from '../GlobalLogo/index.vue';
 import GlobalSearch from '../GlobalSearch/index.vue';
 import {
-  MenuCollapse,
+  FullScreen,
+  GithubSite,
   GlobalBreadcrumb,
   HeaderMenu,
-  GithubSite,
-  FullScreen,
-  ThemeMode,
-  UserAvatar,
+  MenuCollapse,
+  SettingButton,
   SystemMessage,
-  SettingButton
+  ThemeMode,
+  UserAvatar
 } from './components';
 
 defineOptions({ name: 'GlobalHeader' });

src/layouts/common/GlobalSearch/components/SearchModal.vue

@@ -24,9 +24,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, computed, watch, nextTick } from 'vue';
+import { computed, nextTick, ref, shallowRef, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import { useDebounceFn, onKeyStroke } from '@vueuse/core';
+import { onKeyStroke, useDebounceFn } from '@vueuse/core';
 import { useRouteStore } from '@/store';
 import SearchResult from './SearchResult.vue';
 import SearchFooter from './SearchFooter.vue';

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

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
 import { useAppStore, useThemeStore } from '@/store';

src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue

@@ -23,11 +23,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { useAppStore, useThemeStore, useRouteStore } from '@/store';
+import { useAppStore, useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { useBoolean } from '@/hooks';
 import { GlobalLogo } from '@/layouts/common';
-import { MixMenuDetail, MixMenuDrawer, MixMenuCollapse } from './components';
+import { MixMenuCollapse, MixMenuDetail, MixMenuDrawer } from './components';
 
 defineOptions({ name: 'VerticalMixSider' });
 

src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue

@@ -5,7 +5,7 @@
       :collapsed="app.siderCollapse"
       :collapsed-width="theme.sider.collapsedWidth"
       :collapsed-icon-size="22"
-      :options="routeStore.menus"
+      :options="menus"
       :expanded-keys="expandedKeys"
       :indent="18"
       :inverted="theme.sider.inverted"
@@ -19,7 +19,7 @@
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
-import { useAppStore, useThemeStore, useRouteStore } from '@/store';
+import { useAppStore, useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { getActiveKeyPathsOfMenus } from '@/utils';
 
@@ -31,6 +31,8 @@ const theme = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPush } = useRouterPush();
 
+const menus = computed(() => routeStore.menus as GlobalMenuOption[]);
+
 const activeKey = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string);
 const expandedKeys = ref<string[]>([]);
 
@@ -46,7 +48,7 @@ function handleUpdateExpandedKeys(keys: string[]) {
 watch(
   () => route.name,
   () => {
-    expandedKeys.value = getActiveKeyPathsOfMenus(activeKey.value, routeStore.menus);
+    expandedKeys.value = getActiveKeyPathsOfMenus(activeKey.value, menus.value);
   },
   { immediate: true }
 );

src/layouts/common/GlobalSider/index.vue

@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useThemeStore } from '@/store';
-import { VerticalSider, VerticalMixSider } from './components';
+import { VerticalMixSider, VerticalSider } from './components';
 
 defineOptions({ name: 'GlobalSider' });
 

src/layouts/common/GlobalTab/components/TabDetail/index.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, nextTick, watch } from 'vue';
-import { ChromeTab, ButtonTab } from '@soybeanjs/vue-admin-tab';
+import { computed, nextTick, reactive, ref, watch } from 'vue';
+import { ButtonTab, ChromeTab } from '@soybeanjs/vue-admin-tab';
 import { Icon } from '@iconify/vue';
-import { useThemeStore, useTabStore } from '@/store';
+import { useTabStore, useThemeStore } from '@/store';
 import { ContextMenu } from './components';
 
 defineOptions({ name: 'TabDetail' });

src/layouts/common/GlobalTab/index.vue

@@ -13,9 +13,9 @@
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useElementBounding } from '@vueuse/core';
-import { useThemeStore, useTabStore } from '@/store';
+import { useTabStore, useThemeStore } from '@/store';
 import { useDeviceInfo } from '@/composables';
-import { TabDetail, ReloadButton } from './components';
+import { ReloadButton, TabDetail } from './components';
 
 defineOptions({ name: 'GlobalTab' });
 

src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import Clipboard from 'clipboard';
 import { useThemeStore } from '@/store';
 

src/layouts/common/SettingDrawer/index.vue

@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { useAppStore } from '@/store';
-import { DrawerButton, DarkMode, LayoutMode, ThemeColorSelect, PageFunc, PageView, ThemeConfig } from './components';
+import { DarkMode, DrawerButton, LayoutMode, PageFunc, PageView, ThemeColorSelect, ThemeConfig } from './components';
 
 defineOptions({ name: 'SettingDrawer' });