From 1b42ffecb6d1956e58151b552f2a14e54ef26b88 Mon Sep 17 00:00:00 2001 From: chansee97 Date: Wed, 27 Mar 2024 16:05:01 +0800 Subject: [PATCH] fix: optimize app setting --- src/layouts/BasicLayout/index.vue | 3 + .../components/common/HeaderButton.vue | 5 +- src/layouts/components/header/Breadcrumb.vue | 2 +- src/layouts/components/header/Setting.vue | 56 +++----- src/layouts/components/header/UserCenter.vue | 2 +- src/layouts/components/sider/Logo.vue | 6 +- src/router/guard.ts | 13 +- src/store/app/index.ts | 123 +++--------------- src/store/auth.ts | 7 - src/styles/nprogress.css | 8 +- 10 files changed, 55 insertions(+), 170 deletions(-) diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue index fc46383..2cf6b33 100644 --- a/src/layouts/BasicLayout/index.vue +++ b/src/layouts/BasicLayout/index.vue @@ -19,6 +19,9 @@ import { useAppStore, useRouteStore } from '@/store' const routeStore = useRouteStore() const appStore = useAppStore() + +// 初始载入，初始化body的css变量 +appStore.setPrimaryColor() diff --git a/src/layouts/components/header/Breadcrumb.vue b/src/layouts/components/header/Breadcrumb.vue index cd5264e..9259981 100644 --- a/src/layouts/components/header/Breadcrumb.vue +++ b/src/layouts/components/header/Breadcrumb.vue @@ -22,7 +22,7 @@ const appStore = useAppStore() @click="router.push(item.path)" > - {{ item.meta.title }} + {{ item.meta.title }} diff --git a/src/layouts/components/header/Setting.vue b/src/layouts/components/header/Setting.vue index f8f312a..b1a7213 100644 --- a/src/layouts/components/header/Setting.vue +++ b/src/layouts/components/header/Setting.vue @@ -60,10 +60,10 @@ const palette = [ function resetSetting() { window.$dialog.warning({ - title: '警告', - content: '你确定？', + title: '重置所有设置', + content: '你确定重置所有设置？', positiveText: '确定', - negativeText: '不确定', + negativeText: '取消', onPositiveClick: () => { appStore.resetAlltheme() window.$message.success('重置成功') @@ -99,35 +99,7 @@ function resetSetting() { - - - 提示色 - - - - 成功色 - - - - 警告色 - - - - 错误色 - @@ -136,37 +108,41 @@ function resetSetting() { 侧边栏反转色 - + 头部反转色 - + 界面显示 LOGO显示 - + + + + 顶部进度 + 多页签 - + 面包屑 - + 面包屑图标 - + 固定头部和多页签 - + 水印 - + diff --git a/src/layouts/components/header/UserCenter.vue b/src/layouts/components/header/UserCenter.vue index d1f9ceb..d0d978a 100644 --- a/src/layouts/components/header/UserCenter.vue +++ b/src/layouts/components/header/UserCenter.vue @@ -71,7 +71,7 @@ function handleSelect(key: string | number) { size="large" :src="userInfo?.avatar" /> - {{ userInfo?.nickname }} + {{ userInfo?.nickname }} diff --git a/src/layouts/components/sider/Logo.vue b/src/layouts/components/sider/Logo.vue index fec12d3..342de95 100644 --- a/src/layouts/components/sider/Logo.vue +++ b/src/layouts/components/sider/Logo.vue @@ -9,16 +9,16 @@ const name = import.meta.env.VITE_APP_NAME diff --git a/src/router/guard.ts b/src/router/guard.ts index bc293a9..3023755 100644 --- a/src/router/guard.ts +++ b/src/router/guard.ts @@ -1,10 +1,14 @@ import type { Router } from 'vue-router' -import { useRouteStore, useTabStore } from '@/store' +import { useAppStore, useRouteStore, useTabStore } from '@/store' import { local } from '@/utils' const title = import.meta.env.VITE_APP_NAME export function setupRouterGuard(router: Router) { + const appStore = useAppStore() + const routeStore = useRouteStore() + const tabStore = useTabStore() + router.beforeEach(async (to, from, next) => { // 判断是否是外链，如果是直接打开网页并拦截跳转 if (to.meta.herf) { @@ -12,10 +16,9 @@ export function setupRouterGuard(router: Router) { return false } // 开始 NProgress - window.$NProgress?.start() + appStore.showProgress && window.$NProgress?.start() // 判断有无TOKEN,登录鉴权 - const routeStore = useRouteStore() const isLogin = Boolean(local.get('token')) if (!isLogin) { if (to.name === 'login') @@ -53,8 +56,6 @@ export function setupRouterGuard(router: Router) { next() }) router.beforeResolve((to) => { - const routeStore = useRouteStore() - const tabStore = useTabStore() // 设置菜单高亮 routeStore.setActiveMenu(to.meta.activeMenu ?? to.fullPath) // 添加tabs @@ -67,6 +68,6 @@ export function setupRouterGuard(router: Router) { // 修改网页标题 document.title = `${to.meta.title} - ${title}` // 结束 NProgress - window.$NProgress?.done() + appStore.showProgress && window.$NProgress?.done() }) } diff --git a/src/store/app/index.ts b/src/store/app/index.ts index 26428db..5af9842 100644 --- a/src/store/app/index.ts +++ b/src/store/app/index.ts @@ -1,15 +1,13 @@ import type { GlobalThemeOverrides } from 'naive-ui' import chroma from 'chroma-js' +import { set } from 'radash' +import { useCssVar } from '@vueuse/core' import themeConfig from './theme.json' type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out' interface AppStatus { theme: GlobalThemeOverrides primaryColor: string - infoColor: string - successColor: string - warningColor: string - errorColor: string collapsed: boolean fullScreen: boolean darkMode: boolean @@ -18,6 +16,7 @@ interface AppStatus { loadFlag: boolean showLogo: boolean showTabs: boolean + showProgress: boolean showBreadcrumb: boolean showBreadcrumbIcon: boolean fixedHeader: boolean @@ -27,10 +26,13 @@ interface AppStatus { transitionAnimation: TransitionAnimation } -const docEle = document.documentElement +const docEle = ref(document.documentElement) const { isFullscreen, toggle } = useFullscreen(docEle) +const initPrimaryColor = themeConfig.common.primaryColor +const primaryColor = useCssVar('--primary-color', docEle, { initialValue: initPrimaryColor }) + const isDark = useDark({ storageKey: 'admin-dark-mode', }) @@ -39,11 +41,7 @@ export const useAppStore = defineStore('app-store', { state: (): AppStatus => { return { theme: themeConfig, - primaryColor: '#18a058', - infoColor: '#2080f0', - successColor: '#18a058', - warningColor: '#f0a020', - errorColor: '#d03050', + primaryColor: initPrimaryColor, collapsed: false, fullScreen: false, darkMode: isDark.value, @@ -52,6 +50,7 @@ export const useAppStore = defineStore('app-store', { loadFlag: true, showLogo: true, showTabs: true, + showProgress: true, showBreadcrumb: true, showBreadcrumbIcon: true, fixedHeader: false, @@ -66,10 +65,6 @@ export const useAppStore = defineStore('app-store', { resetAlltheme() { this.theme = themeConfig this.primaryColor = '#18a058' - this.infoColor = '#2080f0' - this.successColor = '#18a058' - this.warningColor = '#f0a020' - this.errorColor = '#d03050' this.collapsed = false this.fullScreen = false this.darkMode = isDark.value @@ -88,69 +83,17 @@ export const useAppStore = defineStore('app-store', { // 重置所有配色 this.setPrimaryColor(this.primaryColor) - this.setInfoColor(this.infoColor) - this.setSuccessColor(this.successColor) - this.setWarningColor(this.warningColor) - this.setErrorColor(this.errorColor) }, - /* 设置主题色 */ - setPrimaryColor(color: string) { + setPrimaryColor(rowColor?: string) { + const color = rowColor || this.primaryColor + primaryColor.value = color const brightenColor = chroma(color).brighten(1).hex() const darkenColor = chroma(color).darken(1).hex() - Object.assign(this.theme.common, { - primaryColor: color, - primaryColorHover: brightenColor, - primaryColorPressed: darkenColor, - primaryColorSuppl: brightenColor, - }) - }, - - /* 设置信息色 */ - setInfoColor(color: string) { - const brightenColor = chroma(color).brighten(1).hex() - const darkenColor = chroma(color).darken(1).hex() - Object.assign(this.theme.common, { - infoColor: color, - infoColorHover: brightenColor, - infoColorPressed: darkenColor, - infoColorSuppl: brightenColor, - }) - }, - - /* 设置成功色 */ - setSuccessColor(color: string) { - const brightenColor = chroma(color).brighten(1).hex() - const darkenColor = chroma(color).darken(1).hex() - Object.assign(this.theme.common, { - successColor: color, - successColorHover: brightenColor, - successColorPressed: darkenColor, - successColorSuppl: brightenColor, - }) - }, - - /* 设置警告色 */ - setWarningColor(color: string) { - const brightenColor = chroma(color).brighten(1).hex() - const darkenColor = chroma(color).darken(1).hex() - Object.assign(this.theme.common, { - warningColor: color, - warningColorHover: brightenColor, - warningColorPressed: darkenColor, - warningColorSuppl: brightenColor, - }) - }, - /* 设置错误色 */ - setErrorColor(color: string) { - const brightenColor = chroma(color).brighten(1).hex() - const darkenColor = chroma(color).darken(1).hex() - Object.assign(this.theme.common, { - errorColor: color, - errorColorHover: brightenColor, - errorColorPressed: darkenColor, - errorColorSuppl: brightenColor, - }) + set(this.theme, 'common.primaryColor', color) + set(this.theme, 'common.primaryColorHover', brightenColor) + set(this.theme, 'common.primaryColorPressed', darkenColor) + set(this.theme, 'common.primaryColorSuppl', brightenColor) }, /* 切换侧边栏收缩 */ toggleCollapse() { @@ -158,8 +101,8 @@ export const useAppStore = defineStore('app-store', { }, /* 切换全屏 */ async toggleFullScreen() { - this.fullScreen = isFullscreen.value await toggle() + this.fullScreen = isFullscreen.value }, /* 切换主题 亮/深色 */ toggleDarkMode(event: MouseEvent, mode?: boolean) { @@ -237,38 +180,6 @@ export const useAppStore = defineStore('app-store', { docEle.classList.toggle('gray-mode') this.grayMode = docEle.classList.contains('gray-mode') }, - /* 切换显示logo */ - toggleShowLogo() { - this.showLogo = !this.showLogo - }, - /* 切换显示多页签 */ - toggleShowTabs() { - this.showTabs = !this.showTabs - }, - /* 切换显示多页签 */ - toggleShowBreadcrumb() { - this.showBreadcrumb = !this.showBreadcrumb - }, - /* 切换显示多页签 */ - toggleShowBreadcrumbIcon() { - this.showBreadcrumbIcon = !this.showBreadcrumbIcon - }, - /* 切换固定头部和标签页 */ - toggleFixedHeader() { - this.fixedHeader = !this.fixedHeader - }, - /* 切换固定底部 */ - toggleInvertedSider() { - this.invertedSider = !this.invertedSider - }, - /* 切换固定底部 */ - toggleInvertedHeader() { - this.invertedHeader = !this.invertedHeader - }, - /* 切换固定底部 */ - toggleShowWatermark() { - this.showWatermark = !this.showWatermark - }, }, persist: { enabled: true, diff --git a/src/store/auth.ts b/src/store/auth.ts index 7dbdc6e..1c39f7a 100644 --- a/src/store/auth.ts +++ b/src/store/auth.ts @@ -80,13 +80,6 @@ export const useAuthStore = defineStore('auth-store', { router.push({ path: query.redirect || '/', }) - - // 触发用户提示 - window.$notification?.success({ - title: '登录成功!', - content: `欢迎回来😊，${this.userInfo?.nickname}!`, - duration: 3000, - }) }, }, }) diff --git a/src/styles/nprogress.css b/src/styles/nprogress.css index 8b9c457..c3ad48c 100644 --- a/src/styles/nprogress.css +++ b/src/styles/nprogress.css @@ -4,7 +4,7 @@ } #nprogress .bar { - background: #29d; + background: var(--primary-color); position: fixed; z-index: 1031; @@ -22,7 +22,7 @@ right: 0px; width: 100px; height: 100%; - box-shadow: 0 0 10px #29d, 0 0 5px #29d; + box-shadow: 0 0 10px var(--primary-color), 0 0 5px var(--primary-color); opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); @@ -45,8 +45,8 @@ box-sizing: border-box; border: solid 2px transparent; - border-top-color: #29d; - border-left-color: #29d; + border-top-color: var(--primary-color); + border-left-color: var(--primary-color); border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite;