fix: optimize app setting

2025-04-05 12:44:27 +08:00 · 2024-03-27 16:05:01 +08:00 · 2024-03-27 16:05:01 +08:00 · 1b42ffecb6
commit 1b42ffecb6
parent 2882409ce2
10 changed files with 55 additions and 170 deletions
--- 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()
 </script>

 <template>
--- a/src/layouts/components/common/HeaderButton.vue
+++ b/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>

--- 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)"
    >
      <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>
--- 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() {
                  <n-color-picker
                    v-model:value="appStore.primaryColor"
                    class="w-7em" :swatches="palette" :show-alpha="false"
-                    @complete="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"
+                    @update:value="appStore.setPrimaryColor"
                  />
                </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>

--- 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 }}
+      <span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ userInfo?.nickname }}</span>
    </HeaderButton>
  </n-dropdown>
 </template>
--- 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

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