fix: optimize app setting

src/layouts/BasicLayout/index.vue

@@ -19,6 +19,9 @@ import { useAppStore, useRouteStore } from '@/store'
 
 const routeStore = useRouteStore()
 const appStore = useAppStore()
+
+// 初始载入，初始化body的css变量
+appStore.setPrimaryColor()
 </script>
 
 <template>

src/layouts/components/common/HeaderButton.vue

@@ -5,12 +5,13 @@
     tag="div"
     class="el h-full px-3 cursor-pointer"
   >
-    <n-space
+    <n-flex
       align="center"
+      :wrap="false"
       class="h-full"
     >
       <slot />
-    </n-space>
+    </n-flex>
   </n-el>
 </template>
 

src/layouts/components/header/Breadcrumb.vue

@@ -22,7 +22,7 @@ const appStore = useAppStore()
       @click="router.push(item.path)"
     >
       <e-icon v-if="appStore.showBreadcrumbIcon" :icon="item.meta.icon" />
-      {{ item.meta.title }}
+      <span class="whitespace-nowrap">{{ item.meta.title }}</span>
     </n-el>
   </TransitionGroup>
 </template>

src/layouts/components/header/Setting.vue

@@ -60,10 +60,10 @@ const palette = [
 
 function resetSetting() {
   window.$dialog.warning({
-    title: '警告',
+    title: '重置所有设置',
-    content: '你确定？',
+    content: '你确定重置所有设置？',
     positiveText: '确定',
-    negativeText: '不确定',
+    negativeText: '取消',
     onPositiveClick: () => {
       appStore.resetAlltheme()
       window.$message.success('重置成功')
@@ -99,35 +99,7 @@ function resetSetting() {
                   <n-color-picker
                     v-model:value="appStore.primaryColor"
                     class="w-7em" :swatches="palette" :show-alpha="false"
-                    @complete="appStore.setPrimaryColor"
+                    @update:value="appStore.setPrimaryColor"
-                  />
-                </n-space>
-                <n-space align="center" justify="space-between">
-                  提示色
-                  <n-color-picker
-                    v-model:value="appStore.infoColor"
-                    class="w-7em" :swatches="palette" :show-alpha="false" @complete="appStore.setInfoColor"
-                  />
-                </n-space>
-                <n-space align="center" justify="space-between">
-                  成功色
-                  <n-color-picker
-                    v-model:value="appStore.successColor"
-                    class="w-7em" :swatches="palette" :show-alpha="false" @complete="appStore.setSuccessColor"
-                  />
-                </n-space>
-                <n-space align="center" justify="space-between">
-                  警告色
-                  <n-color-picker
-                    v-model:value="appStore.warningColor"
-                    class="w-7em" :swatches="palette" :show-alpha="false" @complete="appStore.setWarningColor"
-                  />
-                </n-space>
-                <n-space align="center" justify="space-between">
-                  错误色
-                  <n-color-picker
-                    v-model:value="appStore.errorColor"
-                    class="w-7em" :swatches="palette" :show-alpha="false" @complete="appStore.setErrorColor"
                   />
                 </n-space>
                 <n-space align="center" justify="space-between">
@@ -136,37 +108,41 @@ function resetSetting() {
                 </n-space>
                 <n-space justify="space-between">
                   侧边栏反转色
-                  <n-switch :value="appStore.invertedSider" @update:value="appStore.toggleInvertedSider()" />
+                  <n-switch v-model:value="appStore.invertedSider" />
                 </n-space>
                 <n-space justify="space-between">
                   头部反转色
-                  <n-switch :value="appStore.invertedHeader" @update:value="appStore.toggleInvertedHeader()" />
+                  <n-switch v-model:value="appStore.invertedHeader" />
                 </n-space>
 
                 <n-divider>界面显示</n-divider>
                 <n-space justify="space-between">
                   LOGO显示
-                  <n-switch :value="appStore.showLogo" @update:value="appStore.toggleShowLogo()" />
+                  <n-switch v-model:value="appStore.showLogo" />
+                </n-space>
+                <n-space justify="space-between">
+                  顶部进度
+                  <n-switch v-model:value="appStore.showProgress" />
                 </n-space>
                 <n-space justify="space-between">
                   多页签
-                  <n-switch :value="appStore.showTabs" @update:value="appStore.toggleShowTabs()" />
+                  <n-switch v-model:value="appStore.showTabs" />
                 </n-space>
                 <n-space justify="space-between">
                   面包屑
-                  <n-switch :value="appStore.showBreadcrumb" @update:value="appStore.toggleShowBreadcrumb()" />
+                  <n-switch v-model:value="appStore.showBreadcrumb" />
                 </n-space>
                 <n-space justify="space-between">
                   面包屑图标
-                  <n-switch :value="appStore.showBreadcrumbIcon" @update:value="appStore.toggleShowBreadcrumbIcon()" />
+                  <n-switch v-model:value="appStore.showBreadcrumbIcon" />
                 </n-space>
                 <n-space justify="space-between">
                   固定头部和多页签
-                  <n-switch :value="appStore.fixedHeader" @update:value="appStore.toggleFixedHeader()" />
+                  <n-switch v-model:value="appStore.fixedHeader" />
                 </n-space>
                 <n-space justify="space-between">
                   水印
-                  <n-switch :value="appStore.showWatermark" @update:value="appStore.toggleShowWatermark()" />
+                  <n-switch v-model:value="appStore.showWatermark" />
                 </n-space>
               </n-space>
 

src/layouts/components/header/UserCenter.vue

@@ -71,7 +71,7 @@ function handleSelect(key: string | number) {
         size="large"
         :src="userInfo?.avatar"
       />
-      {{ userInfo?.nickname }}
+      <span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ userInfo?.nickname }}</span>
     </HeaderButton>
   </n-dropdown>
 </template>

src/layouts/components/sider/Logo.vue

@@ -9,16 +9,16 @@ const name = import.meta.env.VITE_APP_NAME
 
 <template>
   <div
-    class="h-60px text-2xl flex-center overflow-hidden cursor-pointer"
+    class="h-60px text-xl flex-center cursor-pointer"
     @click="router.push('/')"
   >
     <SvgIcon
       name="logo"
-      :size="28"
+      :size="32"
     />
     <span
       v-show="!appStore.collapsed"
-      class="mx-3"
+      class="mx-3 text-ellipsis overflow-hidden whitespace-nowrap"
     >{{ name }}</span>
   </div>
 </template>

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()
   })
 }

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',
+      primaryColor: initPrimaryColor,
-      infoColor: '#2080f0',
-      successColor: '#18a058',
-      warningColor: '#f0a020',
-      errorColor: '#d03050',
       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, {
+      set(this.theme, 'common.primaryColor', color)
-        primaryColor: color,
+      set(this.theme, 'common.primaryColorHover', brightenColor)
-        primaryColorHover: brightenColor,
+      set(this.theme, 'common.primaryColorPressed', darkenColor)
-        primaryColorPressed: darkenColor,
+      set(this.theme, 'common.primaryColorSuppl', brightenColor)
-        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,
-      })
     },
     /* 切换侧边栏收缩 */
     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,

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,
-      })
     },
   },
 })

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-top-color: var(--primary-color);
-  border-left-color: #29d;
+  border-left-color: var(--primary-color);
   border-radius: 50%;
 
   -webkit-animation: nprogress-spinner 400ms linear infinite;