From 20d471e8d5fe68f33dbf9bb6b4c5b21538e60d6a Mon Sep 17 00:00:00 2001 From: xiangshu233 Date: Sat, 22 Oct 2022 21:56:37 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9B=A0=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=88=87=E6=8D=A2=E5=8A=A8=E7=94=BB=20feat:?= =?UTF-8?q?=20=F0=9F=9B=A0=20=E6=96=B0=E5=A2=9E=E7=A6=81=E7=94=A8=E5=90=AF?= =?UTF-8?q?=E7=94=A8=E5=8A=A8=E7=94=BB=20feat:=20=F0=9F=9B=A0=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=20useDesignSetting=20hooks=20perf:=20=F0=9F=94=AE=20?= =?UTF-8?q?=E4=BC=98=E5=8C=96=20getThemeVars=20func?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 2 +- build/vite/plugin/index.ts | 2 +- src/App.vue | 20 +++++----- src/hooks/setting/useDesignSetting.ts | 24 ++++++++++++ src/settings/animateSetting.ts | 12 +++--- src/settings/designSetting.ts | 10 ++++- src/store/modules/designSetting.ts | 23 ++++++----- src/views/dashboard/index.vue | 7 ++-- src/views/my/ThemeSetting.vue | 56 +++++++++++++++++++++++++-- vite.config.ts | 1 + 10 files changed, 121 insertions(+), 36 deletions(-) create mode 100644 src/hooks/setting/useDesignSetting.ts diff --git a/.env.development b/.env.development index bea2d34..e272c19 100644 --- a/.env.development +++ b/.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 接口地址 # 如果没有跨域问题，直接在这里配置即可 diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index d4e567d..a91243a 100644 --- a/build/vite/plugin/index.ts +++ b/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()], diff --git a/src/App.vue b/src/App.vue index 205c8e4..9310576 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,7 @@ diff --git a/src/hooks/setting/useDesignSetting.ts b/src/hooks/setting/useDesignSetting.ts new file mode 100644 index 0000000..d53959a --- /dev/null +++ b/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, + }; +} diff --git a/src/settings/animateSetting.ts b/src/settings/animateSetting.ts index 05dc0be..6ca6701 100644 --- a/src/settings/animateSetting.ts +++ b/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: '缩放消退' }, ]; diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index 352083f..600a513 100644 --- a/src/settings/designSetting.ts +++ b/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; diff --git a/src/store/modules/designSetting.ts b/src/store/modules/designSetting.ts index 2f853d8..5bd7d87 100644 --- a/src/store/modules/designSetting.ts +++ b/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: { diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index f50af2f..3d7c9e4 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,12 +1,11 @@