refactor: ♻️ 代码重构优化

2024-01-18 11:52:59 +08:00
parent 5a68c85821
commit 3ba751accb
6 changed files with 231 additions and 105 deletions
--- a/src/layout/components/Settings/index.vue
+++ b/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;
--- a/src/layout/components/Sidebar/LeftMenu.vue
+++ b/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"
--- a/src/layout/main.vue
+++ b/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,
-.isTop {
-  .fixed-header {
-    top: 50px;
-  }
+body[layout="mix"] .fixed-header {
+  top: 50px;
 }
 </style>
--- a/src/typings/auto-imports.d.ts
+++ b/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"]
    >;
--- a/src/views/login/index.vue
+++ b/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";
--- a/vite.config.ts
+++ b/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: "src/typings/auto-imports.d.ts",
+        // dts: false,
+        dts: "src/typings/auto-imports.d.ts",
      }),

      Components({