feat: 🛠 新增页面切换动画

feat: 🛠 新增禁用启用动画
feat: 🛠 新增 useDesignSetting hooks
perf: 🔮 优化 getThemeVars func

.env.development

@@ -12,7 +12,7 @@ VITE_DROP_CONSOLE = true
 
 # 跨域代理，可以配置多个，请注意不要换行
 # VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
-# VITE_PROXY=[["/api","https://naive-ui-admin"]]
+# VITE_PROXY=[["/api","http://localhost:8001"]]
 
 # API 接口地址
 # 如果没有跨域问题，直接在这里配置即可

build/vite/plugin/index.ts

@@ -31,7 +31,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock:
     vue(),
     // support name https://github.com/vbenjs/vite-plugin-vue-setup-extend
     vueSetupExtend(),
-    // 按需引入NaiveUi且自动创建组件声明
+    // 按需引入VantUi且自动创建组件声明
     Components({
       dts: true,
       resolvers: [VantResolver()],

src/App.vue

@@ -1,7 +1,7 @@
 <template>
-  <vanConfigProvider :theme="getDarkMode" :theme-vars="getThemeVars">
+  <vanConfigProvider :theme="getDarkMode" :theme-vars="getThemeVars()">
     <routerView v-slot="{ Component }">
-      <transition name="fade-slide" mode="out-in" appear>
+      <transition :name="getTransitionName" mode="out-in" appear>
         <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
           <component :is="Component" />
         </keep-alive>
@@ -11,21 +11,19 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
-  import { useDesignSettingStore } from '@/store/modules/designSetting';
+  import { computed, unref } from 'vue';
   import { darken, lighten } from '@/utils/index';
   import { useRouteStore } from '@/store/modules/route';
+  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
 
   const routeStore = useRouteStore();
-  const designStore = useDesignSettingStore();
+  const { getDarkMode, getAppTheme, getIsPageAnimate, getPageAnimateType } = useDesignSetting();
 
   // 需要缓存的路由组件
   const keepAliveComponents = computed(() => routeStore.keepAliveComponents);
 
-  const getDarkMode = computed(() => designStore.getDarkMode);
-
-  const getThemeVars = computed(() => {
-    const appTheme = designStore.appTheme;
+  const getThemeVars = () => {
+    const appTheme = unref(getAppTheme);
     const darkenStr = darken(appTheme, 25);
     const lightenStr = lighten(appTheme, 10);
 
@@ -66,6 +64,10 @@
       tabbarItemActiveColor: appTheme,
       treeSelectItemActiveColor: appTheme,
     };
+  };
+
+  const getTransitionName = computed(() => {
+    return unref(getIsPageAnimate) ? unref(getPageAnimateType) : undefined;
   });
 </script>
 

src/hooks/setting/useDesignSetting.ts

@@ -0,0 +1,24 @@
+import { computed } from 'vue';
+import { useDesignSettingStore } from '@/store/modules/designSetting';
+
+export function useDesignSetting() {
+  const designStore = useDesignSettingStore();
+
+  const getDarkMode = computed(() => designStore.darkMode);
+
+  const getAppTheme = computed(() => designStore.appTheme);
+
+  const getAppThemeList = computed(() => designStore.appThemeList);
+
+  const getIsPageAnimate = computed(() => designStore.isPageAnimate);
+
+  const getPageAnimateType = computed(() => designStore.pageAnimateType);
+
+  return {
+    getDarkMode,
+    getAppTheme,
+    getAppThemeList,
+    getIsPageAnimate,
+    getPageAnimateType,
+  };
+}

src/settings/animateSetting.ts

@@ -1,8 +1,8 @@
 export const animates = [
-  { value: 'zoom-fade', label: '渐变' },
-  { value: 'zoom-out', label: '闪现' },
-  { value: 'fade-slide', label: '滑动' },
-  { value: 'fade', label: '消退' },
-  { value: 'fade-bottom', label: '底部消退' },
-  { value: 'fade-scale', label: '缩放消退' },
+  { value: 'zoom-fade', text: '渐变' },
+  { value: 'zoom-out', text: '闪现' },
+  { value: 'fade-slide', text: '滑动' },
+  { value: 'fade', text: '消退' },
+  { value: 'fade-bottom', text: '底部消退' },
+  { value: 'fade-scale', text: '缩放消退' },
 ];

src/settings/designSetting.ts

@@ -1,12 +1,16 @@
 // app theme preset color
 
-interface DesignSettingState {
+export interface DesignSettingState {
   // 系统主题
   darkMode: 'light' | 'dark';
   // 系统风格
   appTheme: string;
   // 系统内置风格
   appThemeList: string[];
+  // 是否开启路由动画
+  isPageAnimate: boolean;
+  // 路由动画类型
+  pageAnimateType: string;
 }
 
 export const appThemeList: string[] = [
@@ -38,6 +42,10 @@ const setting: DesignSettingState = {
   appTheme: '#5d9dfe',
   //系统内置主题色列表
   appThemeList,
+  //是否开启路由动画
+  isPageAnimate: true,
+  //路由动画类型
+  pageAnimateType: 'zoom-fade',
 };
 
 export default setting;

src/store/modules/designSetting.ts

@@ -1,17 +1,9 @@
 import { defineStore } from 'pinia';
 import { store } from '@/store';
 import designSetting from '@/settings/designSetting';
+import type { DesignSettingState } from '@/settings/designSetting';
 
-const { darkMode, appTheme, appThemeList } = designSetting;
-
-interface DesignSettingState {
-  // 系统主题
-  darkMode: 'light' | 'dark';
-  // 系统风格
-  appTheme: string;
-  // 系统内置风格
-  appThemeList: string[];
-}
+const { darkMode, appTheme, appThemeList, isPageAnimate, pageAnimateType } = designSetting;
 
 export const useDesignSettingStore = defineStore({
   id: 'app-design-setting',
@@ -19,6 +11,8 @@ export const useDesignSettingStore = defineStore({
     darkMode,
     appTheme,
     appThemeList,
+    isPageAnimate,
+    pageAnimateType,
   }),
   getters: {
     getDarkMode(): 'light' | 'dark' {
@@ -30,11 +24,20 @@ export const useDesignSettingStore = defineStore({
     getAppThemeList(): string[] {
       return this.appThemeList;
     },
+    getIsPageAnimate(): boolean {
+      return this.isPageAnimate;
+    },
+    getPageAnimateType(): string {
+      return this.pageAnimateType;
+    },
   },
   actions: {
     setDarkMode(mode: 'light' | 'dark'): void {
       this.darkMode = mode;
     },
+    setPageAnimateType(type: string): void {
+      this.pageAnimateType = type;
+    },
   },
   // 持久化
   persist: {

src/views/dashboard/index.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="flex flex-col justify-center items-center h-screen p-60px">
     <div class="wel-box flex flex-col items-center justify-between w-full">
-      <SvgIcon class="logo enter-y" :size="130" name="logo" />
-      <div
-        class="text-darkBlue dark:text-garyWhite text-2xl font-black mt-12 mb-4 text-center enter-y"
+      <SvgIcon class="logo" :size="130" name="logo" />
+      <div class="text-darkBlue dark:text-garyWhite text-2xl font-black mt-12 mb-4 text-center"
         >欢迎来到 {{ title }}</div
       >
-      <div class="w-full mt-4 mb-6 enter-y">
+      <div class="w-full mt-4 mb-6">
         <van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
           <van-swipe-item
             class="text-gray-700 dark:text-gray-400 leading-relaxed text-center"

src/views/my/ThemeSetting.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <NavBar />
-    <van-divider>主题</van-divider>
+    <van-divider>主题模式</van-divider>
     <van-cell center title="暗黑模式">
       <template #right-icon>
         <van-switch v-model="getDarkMode" />
@@ -29,18 +29,46 @@
         </span>
       </div>
     </div>
+
+    <van-divider>页面切换动画</van-divider>
+    <van-cell center title="开启动画">
+      <template #right-icon>
+        <van-switch v-model="designStore.isPageAnimate" />
+      </template>
+    </van-cell>
+
+    <van-field
+      label="动画类型"
+      readonly
+      :disabled="!designStore.isPageAnimate"
+      is-link
+      label-class="font-bold"
+      input-align="right"
+      :center="true"
+      :border="false"
+      v-model="animateState.text"
+      @click="openAnimatePick"
+    />
+    <van-popup v-model:show="animateState.showPicker" position="bottom" round>
+      <van-picker
+        v-model="animateState.value"
+        :columns="animateOptions"
+        @confirm="handleSaveAnimateType"
+        @cancel="animateState.showPicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
+  import { computed, reactive } from 'vue';
   import { Icon } from '@vicons/utils';
+  import { updateDarkSign } from '@/theme';
   import { CheckOutlined } from '@vicons/antd';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
+  import { animates as animateOptions } from '@/settings/animateSetting';
   import NavBar from './components/NavBar.vue';
 
-  import { updateDarkSign } from '@/theme';
-
   const designStore = useDesignSettingStore();
 
   const getDarkMode = computed({
@@ -55,6 +83,26 @@
   function togTheme(color: string) {
     designStore.appTheme = color;
   }
+
+  const findCurrentAnimateType = animateOptions.find(
+    (item) => item.value === designStore.pageAnimateType
+  );
+
+  const animateState = reactive({
+    text: findCurrentAnimateType?.text,
+    value: [designStore.pageAnimateType],
+    showPicker: false,
+  });
+
+  const openAnimatePick = () => {
+    if (designStore.isPageAnimate) animateState.showPicker = true;
+  };
+
+  const handleSaveAnimateType = ({ selectedOptions }) => {
+    animateState.text = selectedOptions[0].text;
+    designStore.setPageAnimateType(selectedOptions[0].value);
+    animateState.showPicker = false;
+  };
 </script>
 
 <style scoped lang="less"></style>

vite.config.ts

@@ -21,6 +21,7 @@ const __APP_INFO__ = {
   lastBuildTime: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
 };
 
+/** @type {import('vite').UserConfig} */
 export default ({ command, mode }: ConfigEnv): UserConfig => {
   // process.cwd() 方法返回 Node.js 进程的当前工作目录
   // mode 返回应用的环境模式 development（开发环境） 或者 production（生产环境）