refactor: ♻️ 代码重构优化

src/layout/components/Settings/index.vue

@@ -1,8 +1,97 @@
+<template>
+  <div class="settings-container">
+    <h3 class="text-base font-bold">项目配置</h3>
+    <el-divider>主题设置</el-divider>
+
+    <div class="flex-center">
+      <el-switch
+        v-model="isDark"
+        :active-icon="IconEpMoon"
+        :inactive-icon="IconEpSunny"
+        @change="handleThemeChange"
+      />
+    </div>
+
+    <el-divider>界面设置</el-divider>
+    <div class="py-[8px] flex justify-between">
+      <el-text>开启 Tags-View</el-text>
+      <el-switch v-model="settingsStore.tagsView" />
+    </div>
+
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">固定 Header</span>
+      <el-switch v-model="settingsStore.fixedHeader" />
+    </div>
+
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">侧边栏 Logo</span>
+      <el-switch v-model="settingsStore.sidebarLogo" />
+    </div>
+
+    <el-divider>主题颜色</el-divider>
+
+    <ul class="w-full space-x-2 flex justify-center py-2">
+      <li
+        v-for="(color, index) in themeColors"
+        :key="index"
+        class="inline-block w-[30px] h-[30px] cursor-pointer theme-wrap"
+        :style="{ background: color }"
+        @click="changeThemeColor(color)"
+      >
+        <i-ep-check v-show="color === currentThemeColor" />
+      </li>
+    </ul>
+
+    <el-divider>导航设置</el-divider>
+
+    <ul class="layout">
+      <el-tooltip content="左侧模式" placement="bottom">
+        <li
+          :class="
+            'layout-item layout-left ' +
+            (settingsStore.layout === 'left' ? 'is-active' : '')
+          "
+          @click="changeLayout('left')"
+        >
+          <div></div>
+          <div></div>
+        </li>
+      </el-tooltip>
+      <el-tooltip content="顶部模式" placement="bottom">
+        <li
+          :class="
+            'layout-item layout-top ' +
+            (settingsStore.layout === 'top' ? 'is-active' : '')
+          "
+          @click="changeLayout('top')"
+        >
+          <div></div>
+          <div></div>
+        </li>
+      </el-tooltip>
+      <el-tooltip content="混合模式" placement="bottom">
+        <li
+          :class="
+            'layout-item layout-mix ' +
+            (settingsStore.layout === 'mix' ? 'is-active' : '')
+          "
+          @click="changeLayout('mix')"
+        >
+          <div></div>
+          <div></div>
+        </li>
+      </el-tooltip>
+    </ul>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { useSettingsStore } from "@/store/modules/settings";
 import { usePermissionStore } from "@/store/modules/permission";
 import { useAppStore } from "@/store/modules/app";
 import { useRoute } from "vue-router";
+import IconEpSunny from "~icons/ep/sunny";
+import IconEpMoon from "~icons/ep/moon";
 
 const route = useRoute();
 
@@ -76,6 +165,19 @@ function changeThemeColor(color: string) {
 const currentThemeColor = computed(() => {
   return settingsStore.themeColor;
 });
+
+/**
+ * 切换主题
+ */
+const isDark = ref<boolean>(settingsStore.theme === "dark");
+const handleThemeChange = (isDark: any) => {
+  useToggle(isDark);
+  settingsStore.changeSetting({
+    key: "theme",
+    value: isDark ? "dark" : "light",
+  });
+};
+
 onMounted(() => {
   window.document.body.setAttribute("layout", settingsStore.layout);
   const theme = settingsStore.theme;
@@ -90,83 +192,6 @@ onMounted(() => {
 });
 </script>
 
-<template>
-  <div class="settings-container">
-    <h3 class="text-base font-bold">项目配置</h3>
-
-    <el-divider>界面设置</el-divider>
-    <div class="py-[8px] flex justify-between">
-      <span class="text-xs">开启 Tags-View</span>
-      <el-switch v-model="settingsStore.tagsView" />
-    </div>
-
-    <div class="py-[8px] flex justify-between">
-      <span class="text-xs">固定 Header</span>
-      <el-switch v-model="settingsStore.fixedHeader" />
-    </div>
-
-    <div class="py-[8px] flex justify-between">
-      <span class="text-xs">侧边栏 Logo</span>
-      <el-switch v-model="settingsStore.sidebarLogo" />
-    </div>
-
-    <el-divider>主题颜色</el-divider>
-
-    <ul class="w-full space-x-2 flex justify-center py-2">
-      <li
-        v-for="(color, index) in themeColors"
-        :key="index"
-        class="inline-block w-[30px] h-[30px] cursor-pointer theme-wrap"
-        :style="{ background: color }"
-        @click="changeThemeColor(color)"
-      >
-        <i-ep-check v-show="color === currentThemeColor" />
-      </li>
-    </ul>
-
-    <el-divider>导航设置</el-divider>
-
-    <ul class="layout">
-      <el-tooltip content="左侧模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-left ' +
-            (settingsStore.layout === 'left' ? 'is-active' : '')
-          "
-          @click="changeLayout('left')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-      <el-tooltip content="顶部模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-top ' +
-            (settingsStore.layout === 'top' ? 'is-active' : '')
-          "
-          @click="changeLayout('top')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-      <el-tooltip content="混合模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-mix ' +
-            (settingsStore.layout === 'mix' ? 'is-active' : '')
-          "
-          @click="changeLayout('mix')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-    </ul>
-  </div>
-</template>
-
 <style lang="scss" scoped>
 .settings-container {
   padding: 16px;

src/layout/components/Sidebar/LeftMenu.vue

@@ -46,7 +46,7 @@ function resolvePath(routePath: string) {
 </script>
 <template>
   <el-menu
-    :default-active="layout === 'top' ? '-' : currRoute.path"
+    :default-active="currRoute.path"
     :collapse="!appStore.sidebar.opened"
     :background-color="variables.menuBg"
     :text-color="variables.menuText"

src/layout/main.vue

@@ -1,3 +1,18 @@
+<template>
+  <div :class="{ hasTagsView: showTagsView }" class="main-container">
+    <div :class="{ 'fixed-header': fixedHeader, device: device }">
+      <navbar v-if="layout === 'left'" />
+      <tags-view v-if="showTagsView" />
+    </div>
+    <!--主页面-->
+    <app-main />
+    <!-- 设置面板 -->
+    <RightPanel v-if="showSettings">
+      <settings />
+    </RightPanel>
+  </div>
+</template>
+
 <script lang="ts" setup>
 import { computed, watchEffect } from "vue";
 import { useWindowSize } from "@vueuse/core";
@@ -42,20 +57,6 @@ watchEffect(() => {
   }
 });
 </script>
-<template>
-  <div :class="{ hasTagsView: showTagsView }" class="main-container">
-    <div :class="{ 'fixed-header': fixedHeader, device: device }">
-      <navbar v-if="layout === 'left'" />
-      <tags-view v-if="showTagsView" />
-    </div>
-    <!--主页面-->
-    <app-main />
-    <!-- 设置面板 -->
-    <RightPanel v-if="showSettings">
-      <settings />
-    </RightPanel>
-  </div>
-</template>
 
 <style lang="scss" scoped>
 .fixed-header {
@@ -75,14 +76,12 @@ watchEffect(() => {
   width: 100%;
 }
 
-.isTop .fixed-header {
+body[layout="top"] .fixed-header {
+  top: 50px;
   width: 100% !important;
 }
 
-.isMix,
+body[layout="mix"] .fixed-header {
-.isTop {
+  top: 50px;
-  .fixed-header {
-    top: 50px;
-  }
 }
 </style>

src/typings/auto-imports.d.ts

@@ -7,9 +7,9 @@ declare global {
   const EffectScope: typeof import("vue")["EffectScope"];
   const ElForm: typeof import("element-plus/es")["ElForm"];
   const ElMessage: typeof import("element-plus/es")["ElMessage"];
-  const ElNotification: typeof import("element-plus/es")["ElNotification"];
   const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"];
   const ElTree: typeof import("element-plus/es")["ElTree"];
+  const acceptHMRUpdate: typeof import("pinia")["acceptHMRUpdate"];
   const asyncComputed: typeof import("@vueuse/core")["asyncComputed"];
   const autoResetRef: typeof import("@vueuse/core")["autoResetRef"];
   const computed: typeof import("vue")["computed"];
@@ -23,6 +23,7 @@ declare global {
   const createEventHook: typeof import("@vueuse/core")["createEventHook"];
   const createGlobalState: typeof import("@vueuse/core")["createGlobalState"];
   const createInjectionState: typeof import("@vueuse/core")["createInjectionState"];
+  const createPinia: typeof import("pinia")["createPinia"];
   const createReactiveFn: typeof import("@vueuse/core")["createReactiveFn"];
   const createReusableTemplate: typeof import("@vueuse/core")["createReusableTemplate"];
   const createSharedComposable: typeof import("@vueuse/core")["createSharedComposable"];
@@ -33,24 +34,34 @@ declare global {
   const debouncedWatch: typeof import("@vueuse/core")["debouncedWatch"];
   const defineAsyncComponent: typeof import("vue")["defineAsyncComponent"];
   const defineComponent: typeof import("vue")["defineComponent"];
+  const defineStore: typeof import("pinia")["defineStore"];
   const eagerComputed: typeof import("@vueuse/core")["eagerComputed"];
   const effectScope: typeof import("vue")["effectScope"];
   const extendRef: typeof import("@vueuse/core")["extendRef"];
+  const getActivePinia: typeof import("pinia")["getActivePinia"];
   const getCurrentInstance: typeof import("vue")["getCurrentInstance"];
   const getCurrentScope: typeof import("vue")["getCurrentScope"];
   const h: typeof import("vue")["h"];
   const ignorableWatch: typeof import("@vueuse/core")["ignorableWatch"];
   const inject: typeof import("vue")["inject"];
+  const injectLocal: typeof import("@vueuse/core")["injectLocal"];
   const isDefined: typeof import("@vueuse/core")["isDefined"];
   const isProxy: typeof import("vue")["isProxy"];
   const isReactive: typeof import("vue")["isReactive"];
   const isReadonly: typeof import("vue")["isReadonly"];
   const isRef: typeof import("vue")["isRef"];
   const makeDestructurable: typeof import("@vueuse/core")["makeDestructurable"];
+  const mapActions: typeof import("pinia")["mapActions"];
+  const mapGetters: typeof import("pinia")["mapGetters"];
+  const mapState: typeof import("pinia")["mapState"];
+  const mapStores: typeof import("pinia")["mapStores"];
+  const mapWritableState: typeof import("pinia")["mapWritableState"];
   const markRaw: typeof import("vue")["markRaw"];
   const nextTick: typeof import("vue")["nextTick"];
   const onActivated: typeof import("vue")["onActivated"];
   const onBeforeMount: typeof import("vue")["onBeforeMount"];
+  const onBeforeRouteLeave: typeof import("vue-router")["onBeforeRouteLeave"];
+  const onBeforeRouteUpdate: typeof import("vue-router")["onBeforeRouteUpdate"];
   const onBeforeUnmount: typeof import("vue")["onBeforeUnmount"];
   const onBeforeUpdate: typeof import("vue")["onBeforeUpdate"];
   const onClickOutside: typeof import("@vueuse/core")["onClickOutside"];
@@ -68,6 +79,7 @@ declare global {
   const onUpdated: typeof import("vue")["onUpdated"];
   const pausableWatch: typeof import("@vueuse/core")["pausableWatch"];
   const provide: typeof import("vue")["provide"];
+  const provideLocal: typeof import("@vueuse/core")["provideLocal"];
   const reactify: typeof import("@vueuse/core")["reactify"];
   const reactifyObject: typeof import("@vueuse/core")["reactifyObject"];
   const reactive: typeof import("vue")["reactive"];
@@ -84,9 +96,12 @@ declare global {
   const resolveComponent: typeof import("vue")["resolveComponent"];
   const resolveRef: typeof import("@vueuse/core")["resolveRef"];
   const resolveUnref: typeof import("@vueuse/core")["resolveUnref"];
+  const setActivePinia: typeof import("pinia")["setActivePinia"];
+  const setMapStoreSuffix: typeof import("pinia")["setMapStoreSuffix"];
   const shallowReactive: typeof import("vue")["shallowReactive"];
   const shallowReadonly: typeof import("vue")["shallowReadonly"];
   const shallowRef: typeof import("vue")["shallowRef"];
+  const storeToRefs: typeof import("pinia")["storeToRefs"];
   const syncRef: typeof import("@vueuse/core")["syncRef"];
   const syncRefs: typeof import("@vueuse/core")["syncRefs"];
   const templateRef: typeof import("@vueuse/core")["templateRef"];
@@ -131,6 +146,7 @@ declare global {
   const useBrowserLocation: typeof import("@vueuse/core")["useBrowserLocation"];
   const useCached: typeof import("@vueuse/core")["useCached"];
   const useClipboard: typeof import("@vueuse/core")["useClipboard"];
+  const useClipboardItems: typeof import("@vueuse/core")["useClipboardItems"];
   const useCloned: typeof import("@vueuse/core")["useCloned"];
   const useColorMode: typeof import("@vueuse/core")["useColorMode"];
   const useConfirmDialog: typeof import("@vueuse/core")["useConfirmDialog"];
@@ -180,6 +196,7 @@ declare global {
   const useIntervalFn: typeof import("@vueuse/core")["useIntervalFn"];
   const useKeyModifier: typeof import("@vueuse/core")["useKeyModifier"];
   const useLastChanged: typeof import("@vueuse/core")["useLastChanged"];
+  const useLink: typeof import("vue-router")["useLink"];
   const useLocalStorage: typeof import("@vueuse/core")["useLocalStorage"];
   const useMagicKeys: typeof import("@vueuse/core")["useMagicKeys"];
   const useManualRefHistory: typeof import("@vueuse/core")["useManualRefHistory"];
@@ -215,6 +232,8 @@ declare global {
   const useRafFn: typeof import("@vueuse/core")["useRafFn"];
   const useRefHistory: typeof import("@vueuse/core")["useRefHistory"];
   const useResizeObserver: typeof import("@vueuse/core")["useResizeObserver"];
+  const useRoute: typeof import("vue-router")["useRoute"];
+  const useRouter: typeof import("vue-router")["useRouter"];
   const useScreenOrientation: typeof import("@vueuse/core")["useScreenOrientation"];
   const useScreenSafeArea: typeof import("@vueuse/core")["useScreenSafeArea"];
   const useScriptTag: typeof import("@vueuse/core")["useScriptTag"];
@@ -287,11 +306,16 @@ declare global {
     Component,
     ComponentPublicInstance,
     ComputedRef,
+    ExtractDefaultPropTypes,
+    ExtractPropTypes,
+    ExtractPublicPropTypes,
     InjectionKey,
     PropType,
     Ref,
     VNode,
+    WritableComputedRef,
   } from "vue";
+  import("vue");
 }
 // for vue template auto import
 import { UnwrapRef } from "vue";
@@ -306,6 +330,9 @@ declare module "vue" {
       typeof import("element-plus/es")["ElMessageBox"]
     >;
     readonly ElTree: UnwrapRef<typeof import("element-plus/es")["ElTree"]>;
+    readonly acceptHMRUpdate: UnwrapRef<
+      typeof import("pinia")["acceptHMRUpdate"]
+    >;
     readonly asyncComputed: UnwrapRef<
       typeof import("@vueuse/core")["asyncComputed"]
     >;
@@ -341,6 +368,7 @@ declare module "vue" {
     readonly createInjectionState: UnwrapRef<
       typeof import("@vueuse/core")["createInjectionState"]
     >;
+    readonly createPinia: UnwrapRef<typeof import("pinia")["createPinia"]>;
     readonly createReactiveFn: UnwrapRef<
       typeof import("@vueuse/core")["createReactiveFn"]
     >;
@@ -369,11 +397,15 @@ declare module "vue" {
     readonly defineComponent: UnwrapRef<
       typeof import("vue")["defineComponent"]
     >;
+    readonly defineStore: UnwrapRef<typeof import("pinia")["defineStore"]>;
     readonly eagerComputed: UnwrapRef<
       typeof import("@vueuse/core")["eagerComputed"]
     >;
     readonly effectScope: UnwrapRef<typeof import("vue")["effectScope"]>;
     readonly extendRef: UnwrapRef<typeof import("@vueuse/core")["extendRef"]>;
+    readonly getActivePinia: UnwrapRef<
+      typeof import("pinia")["getActivePinia"]
+    >;
     readonly getCurrentInstance: UnwrapRef<
       typeof import("vue")["getCurrentInstance"]
     >;
@@ -385,6 +417,9 @@ declare module "vue" {
       typeof import("@vueuse/core")["ignorableWatch"]
     >;
     readonly inject: UnwrapRef<typeof import("vue")["inject"]>;
+    readonly injectLocal: UnwrapRef<
+      typeof import("@vueuse/core")["injectLocal"]
+    >;
     readonly isDefined: UnwrapRef<typeof import("@vueuse/core")["isDefined"]>;
     readonly isProxy: UnwrapRef<typeof import("vue")["isProxy"]>;
     readonly isReactive: UnwrapRef<typeof import("vue")["isReactive"]>;
@@ -393,10 +428,23 @@ declare module "vue" {
     readonly makeDestructurable: UnwrapRef<
       typeof import("@vueuse/core")["makeDestructurable"]
     >;
+    readonly mapActions: UnwrapRef<typeof import("pinia")["mapActions"]>;
+    readonly mapGetters: UnwrapRef<typeof import("pinia")["mapGetters"]>;
+    readonly mapState: UnwrapRef<typeof import("pinia")["mapState"]>;
+    readonly mapStores: UnwrapRef<typeof import("pinia")["mapStores"]>;
+    readonly mapWritableState: UnwrapRef<
+      typeof import("pinia")["mapWritableState"]
+    >;
     readonly markRaw: UnwrapRef<typeof import("vue")["markRaw"]>;
     readonly nextTick: UnwrapRef<typeof import("vue")["nextTick"]>;
     readonly onActivated: UnwrapRef<typeof import("vue")["onActivated"]>;
     readonly onBeforeMount: UnwrapRef<typeof import("vue")["onBeforeMount"]>;
+    readonly onBeforeRouteLeave: UnwrapRef<
+      typeof import("vue-router")["onBeforeRouteLeave"]
+    >;
+    readonly onBeforeRouteUpdate: UnwrapRef<
+      typeof import("vue-router")["onBeforeRouteUpdate"]
+    >;
     readonly onBeforeUnmount: UnwrapRef<
       typeof import("vue")["onBeforeUnmount"]
     >;
@@ -434,6 +482,9 @@ declare module "vue" {
       typeof import("@vueuse/core")["pausableWatch"]
     >;
     readonly provide: UnwrapRef<typeof import("vue")["provide"]>;
+    readonly provideLocal: UnwrapRef<
+      typeof import("@vueuse/core")["provideLocal"]
+    >;
     readonly reactify: UnwrapRef<typeof import("@vueuse/core")["reactify"]>;
     readonly reactifyObject: UnwrapRef<
       typeof import("@vueuse/core")["reactifyObject"]
@@ -470,6 +521,12 @@ declare module "vue" {
     readonly resolveUnref: UnwrapRef<
       typeof import("@vueuse/core")["resolveUnref"]
     >;
+    readonly setActivePinia: UnwrapRef<
+      typeof import("pinia")["setActivePinia"]
+    >;
+    readonly setMapStoreSuffix: UnwrapRef<
+      typeof import("pinia")["setMapStoreSuffix"]
+    >;
     readonly shallowReactive: UnwrapRef<
       typeof import("vue")["shallowReactive"]
     >;
@@ -477,6 +534,7 @@ declare module "vue" {
       typeof import("vue")["shallowReadonly"]
     >;
     readonly shallowRef: UnwrapRef<typeof import("vue")["shallowRef"]>;
+    readonly storeToRefs: UnwrapRef<typeof import("pinia")["storeToRefs"]>;
     readonly syncRef: UnwrapRef<typeof import("@vueuse/core")["syncRef"]>;
     readonly syncRefs: UnwrapRef<typeof import("@vueuse/core")["syncRefs"]>;
     readonly templateRef: UnwrapRef<
@@ -579,6 +637,9 @@ declare module "vue" {
     readonly useClipboard: UnwrapRef<
       typeof import("@vueuse/core")["useClipboard"]
     >;
+    readonly useClipboardItems: UnwrapRef<
+      typeof import("@vueuse/core")["useClipboardItems"]
+    >;
     readonly useCloned: UnwrapRef<typeof import("@vueuse/core")["useCloned"]>;
     readonly useColorMode: UnwrapRef<
       typeof import("@vueuse/core")["useColorMode"]
@@ -700,6 +761,7 @@ declare module "vue" {
     readonly useLastChanged: UnwrapRef<
       typeof import("@vueuse/core")["useLastChanged"]
     >;
+    readonly useLink: UnwrapRef<typeof import("vue-router")["useLink"]>;
     readonly useLocalStorage: UnwrapRef<
       typeof import("@vueuse/core")["useLocalStorage"]
     >;
@@ -787,6 +849,8 @@ declare module "vue" {
     readonly useResizeObserver: UnwrapRef<
       typeof import("@vueuse/core")["useResizeObserver"]
     >;
+    readonly useRoute: UnwrapRef<typeof import("vue-router")["useRoute"]>;
+    readonly useRouter: UnwrapRef<typeof import("vue-router")["useRouter"]>;
     readonly useScreenOrientation: UnwrapRef<
       typeof import("@vueuse/core")["useScreenOrientation"]
     >;
@@ -952,6 +1016,9 @@ declare module "@vue/runtime-core" {
       typeof import("element-plus/es")["ElMessageBox"]
     >;
     readonly ElTree: UnwrapRef<typeof import("element-plus/es")["ElTree"]>;
+    readonly acceptHMRUpdate: UnwrapRef<
+      typeof import("pinia")["acceptHMRUpdate"]
+    >;
     readonly asyncComputed: UnwrapRef<
       typeof import("@vueuse/core")["asyncComputed"]
     >;
@@ -987,6 +1054,7 @@ declare module "@vue/runtime-core" {
     readonly createInjectionState: UnwrapRef<
       typeof import("@vueuse/core")["createInjectionState"]
     >;
+    readonly createPinia: UnwrapRef<typeof import("pinia")["createPinia"]>;
     readonly createReactiveFn: UnwrapRef<
       typeof import("@vueuse/core")["createReactiveFn"]
     >;
@@ -1015,11 +1083,15 @@ declare module "@vue/runtime-core" {
     readonly defineComponent: UnwrapRef<
       typeof import("vue")["defineComponent"]
     >;
+    readonly defineStore: UnwrapRef<typeof import("pinia")["defineStore"]>;
     readonly eagerComputed: UnwrapRef<
       typeof import("@vueuse/core")["eagerComputed"]
     >;
     readonly effectScope: UnwrapRef<typeof import("vue")["effectScope"]>;
     readonly extendRef: UnwrapRef<typeof import("@vueuse/core")["extendRef"]>;
+    readonly getActivePinia: UnwrapRef<
+      typeof import("pinia")["getActivePinia"]
+    >;
     readonly getCurrentInstance: UnwrapRef<
       typeof import("vue")["getCurrentInstance"]
     >;
@@ -1031,6 +1103,9 @@ declare module "@vue/runtime-core" {
       typeof import("@vueuse/core")["ignorableWatch"]
     >;
     readonly inject: UnwrapRef<typeof import("vue")["inject"]>;
+    readonly injectLocal: UnwrapRef<
+      typeof import("@vueuse/core")["injectLocal"]
+    >;
     readonly isDefined: UnwrapRef<typeof import("@vueuse/core")["isDefined"]>;
     readonly isProxy: UnwrapRef<typeof import("vue")["isProxy"]>;
     readonly isReactive: UnwrapRef<typeof import("vue")["isReactive"]>;
@@ -1039,10 +1114,23 @@ declare module "@vue/runtime-core" {
     readonly makeDestructurable: UnwrapRef<
       typeof import("@vueuse/core")["makeDestructurable"]
     >;
+    readonly mapActions: UnwrapRef<typeof import("pinia")["mapActions"]>;
+    readonly mapGetters: UnwrapRef<typeof import("pinia")["mapGetters"]>;
+    readonly mapState: UnwrapRef<typeof import("pinia")["mapState"]>;
+    readonly mapStores: UnwrapRef<typeof import("pinia")["mapStores"]>;
+    readonly mapWritableState: UnwrapRef<
+      typeof import("pinia")["mapWritableState"]
+    >;
     readonly markRaw: UnwrapRef<typeof import("vue")["markRaw"]>;
     readonly nextTick: UnwrapRef<typeof import("vue")["nextTick"]>;
     readonly onActivated: UnwrapRef<typeof import("vue")["onActivated"]>;
     readonly onBeforeMount: UnwrapRef<typeof import("vue")["onBeforeMount"]>;
+    readonly onBeforeRouteLeave: UnwrapRef<
+      typeof import("vue-router")["onBeforeRouteLeave"]
+    >;
+    readonly onBeforeRouteUpdate: UnwrapRef<
+      typeof import("vue-router")["onBeforeRouteUpdate"]
+    >;
     readonly onBeforeUnmount: UnwrapRef<
       typeof import("vue")["onBeforeUnmount"]
     >;
@@ -1080,6 +1168,9 @@ declare module "@vue/runtime-core" {
       typeof import("@vueuse/core")["pausableWatch"]
     >;
     readonly provide: UnwrapRef<typeof import("vue")["provide"]>;
+    readonly provideLocal: UnwrapRef<
+      typeof import("@vueuse/core")["provideLocal"]
+    >;
     readonly reactify: UnwrapRef<typeof import("@vueuse/core")["reactify"]>;
     readonly reactifyObject: UnwrapRef<
       typeof import("@vueuse/core")["reactifyObject"]
@@ -1116,6 +1207,12 @@ declare module "@vue/runtime-core" {
     readonly resolveUnref: UnwrapRef<
       typeof import("@vueuse/core")["resolveUnref"]
     >;
+    readonly setActivePinia: UnwrapRef<
+      typeof import("pinia")["setActivePinia"]
+    >;
+    readonly setMapStoreSuffix: UnwrapRef<
+      typeof import("pinia")["setMapStoreSuffix"]
+    >;
     readonly shallowReactive: UnwrapRef<
       typeof import("vue")["shallowReactive"]
     >;
@@ -1123,6 +1220,7 @@ declare module "@vue/runtime-core" {
       typeof import("vue")["shallowReadonly"]
     >;
     readonly shallowRef: UnwrapRef<typeof import("vue")["shallowRef"]>;
+    readonly storeToRefs: UnwrapRef<typeof import("pinia")["storeToRefs"]>;
     readonly syncRef: UnwrapRef<typeof import("@vueuse/core")["syncRef"]>;
     readonly syncRefs: UnwrapRef<typeof import("@vueuse/core")["syncRefs"]>;
     readonly templateRef: UnwrapRef<
@@ -1225,6 +1323,9 @@ declare module "@vue/runtime-core" {
     readonly useClipboard: UnwrapRef<
       typeof import("@vueuse/core")["useClipboard"]
     >;
+    readonly useClipboardItems: UnwrapRef<
+      typeof import("@vueuse/core")["useClipboardItems"]
+    >;
     readonly useCloned: UnwrapRef<typeof import("@vueuse/core")["useCloned"]>;
     readonly useColorMode: UnwrapRef<
       typeof import("@vueuse/core")["useColorMode"]
@@ -1346,6 +1447,7 @@ declare module "@vue/runtime-core" {
     readonly useLastChanged: UnwrapRef<
       typeof import("@vueuse/core")["useLastChanged"]
     >;
+    readonly useLink: UnwrapRef<typeof import("vue-router")["useLink"]>;
     readonly useLocalStorage: UnwrapRef<
       typeof import("@vueuse/core")["useLocalStorage"]
     >;
@@ -1433,6 +1535,8 @@ declare module "@vue/runtime-core" {
     readonly useResizeObserver: UnwrapRef<
       typeof import("@vueuse/core")["useResizeObserver"]
     >;
+    readonly useRoute: UnwrapRef<typeof import("vue-router")["useRoute"]>;
+    readonly useRouter: UnwrapRef<typeof import("vue-router")["useRouter"]>;
     readonly useScreenOrientation: UnwrapRef<
       typeof import("@vueuse/core")["useScreenOrientation"]
     >;

src/views/login/index.vue

@@ -132,8 +132,6 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import router from "@/router";
-import LangSelect from "@/components/LangSelect/index.vue";
-import SvgIcon from "@/components/SvgIcon/index.vue";
 import IconEpSunny from "~icons/ep/sunny";
 import IconEpMoon from "~icons/ep/moon";
 import { useSettingsStore } from "@/store/modules/settings";

vite.config.ts

@@ -54,7 +54,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           // 线上接口地址
           target: "http://vapi.youlai.tech",
           // 开发接口地址
-          // target: http://localhost:8989
+          //target: "http://localhost:8989",
           rewrite: (path) =>
             path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),
         },
@@ -71,7 +71,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       // 自动导入参考： https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts
       AutoImport({
         // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
-        imports: ["vue", "@vueuse/core"],
+        imports: ["vue", "@vueuse/core", "pinia", "vue-router"],
         // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
         resolvers: [ElementPlusResolver(), IconsResolver({})],
         eslintrc: {
@@ -81,8 +81,8 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         },
         vueTemplate: true,
         // 配置文件生成位置(false:关闭自动生成)
-        dts: false,
+        // dts: false,
-        // dts: "src/typings/auto-imports.d.ts",
+        dts: "src/typings/auto-imports.d.ts",
       }),
 
       Components({