diff --git a/components.d.ts b/components.d.ts index 4e4e03ac..01abe218 100644 --- a/components.d.ts +++ b/components.d.ts @@ -13,9 +13,17 @@ declare module 'vue' { IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default'] IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default'] IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default'] + IconCustomActivity: typeof import('~icons/custom/activity')['default'] IconCustomAvatar: typeof import('~icons/custom/avatar')['default'] + IconCustomBanner: typeof import('~icons/custom/banner')['default'] + IconCustomCast: typeof import('~icons/custom/cast')['default'] + IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default'] IconCustomLogo: typeof import('~icons/custom/logo')['default'] IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default'] + IconCustomNetworkError: typeof import('~icons/custom/network-error')['default'] + IconCustomNoPermission: typeof import('~icons/custom/no-permission')['default'] + IconCustomNotFound: typeof import('~icons/custom/not-found')['default'] + IconCustomServiceError: typeof import('~icons/custom/service-error')['default'] IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default'] IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default'] IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default'] @@ -47,6 +55,8 @@ declare module 'vue' { NColorPicker: typeof import('naive-ui')['NColorPicker'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] NDataTable: typeof import('naive-ui')['NDataTable'] + NDescriptions: typeof import('naive-ui')['NDescriptions'] + NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem'] NDialogProvider: typeof import('naive-ui')['NDialogProvider'] NDivider: typeof import('naive-ui')['NDivider'] NDrawer: typeof import('naive-ui')['NDrawer'] @@ -59,18 +69,26 @@ declare module 'vue' { NGrid: typeof import('naive-ui')['NGrid'] NGridItem: typeof import('naive-ui')['NGridItem'] NInput: typeof import('naive-ui')['NInput'] + NInputGroup: typeof import('naive-ui')['NInputGroup'] NInputNumber: typeof import('naive-ui')['NInputNumber'] + NList: typeof import('naive-ui')['NList'] + NListItem: typeof import('naive-ui')['NListItem'] NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider'] NMenu: typeof import('naive-ui')['NMenu'] NMessageProvider: typeof import('naive-ui')['NMessageProvider'] NModal: typeof import('naive-ui')['NModal'] NNotificationProvider: typeof import('naive-ui')['NNotificationProvider'] + NPopover: typeof import('naive-ui')['NPopover'] NScrollbar: typeof import('naive-ui')['NScrollbar'] NSelect: typeof import('naive-ui')['NSelect'] NSpace: typeof import('naive-ui')['NSpace'] + NSpin: typeof import('naive-ui')['NSpin'] + NStatistic: typeof import('naive-ui')['NStatistic'] NSwitch: typeof import('naive-ui')['NSwitch'] NTabPane: typeof import('naive-ui')['NTabPane'] NTabs: typeof import('naive-ui')['NTabs'] + NTag: typeof import('naive-ui')['NTag'] + NThing: typeof import('naive-ui')['NThing'] NTimeline: typeof import('naive-ui')['NTimeline'] NTimelineItem: typeof import('naive-ui')['NTimelineItem'] NTooltip: typeof import('naive-ui')['NTooltip'] diff --git a/src/store/modules/theme/helpers.ts b/src/store/modules/theme/helpers.ts index f0549d79..a8249f2a 100644 --- a/src/store/modules/theme/helpers.ts +++ b/src/store/modules/theme/helpers.ts @@ -1,5 +1,5 @@ import type { GlobalThemeOverrides } from 'naive-ui'; -import { cloneDeep, kebabCase } from 'lodash-es'; +import { cloneDeep } from 'lodash-es'; import { themeSetting } from '@/settings'; import { getThemeColor, getColorPalette, addColorAlpha } from '@/utils'; @@ -72,20 +72,6 @@ export function getNaiveThemeOverrides(colors: Record): Globa }; } -type ThemeVars = Exclude; -type ThemeVarsKeys = keyof ThemeVars; - -/** 添加css vars至html */ -export function addThemeCssVarsToHtml(themeVars: ThemeVars) { - const keys = Object.keys(themeVars) as ThemeVarsKeys[]; - const style: string[] = []; - keys.forEach(key => { - style.push(`--${kebabCase(key)}: ${themeVars[key]}`); - }); - const styleStr = style.join(';'); - document.documentElement.style.cssText += styleStr; -} - /** windicss 暗黑模式 */ export function handleWindicssDarkMode() { const DARK_CLASS = 'dark'; diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts index 1b3cca9b..118f1328 100644 --- a/src/store/modules/theme/index.ts +++ b/src/store/modules/theme/index.ts @@ -1,6 +1,6 @@ import { defineStore } from 'pinia'; import { darkTheme } from 'naive-ui'; -import { getThemeSettings, getNaiveThemeOverrides, addThemeCssVarsToHtml } from './helpers'; +import { getThemeSettings, getNaiveThemeOverrides } from './helpers'; type ThemeState = Theme.Setting; @@ -10,9 +10,6 @@ export const useThemeStore = defineStore('theme-store', { /** naiveUI的主题配置 */ naiveThemeOverrides(state) { const overrides = getNaiveThemeOverrides({ primary: state.themeColor, ...state.otherColor }); - if (overrides.common) { - addThemeCssVarsToHtml(overrides.common); - } return overrides; }, /** naive-ui暗黑主题 */ diff --git a/src/store/subscribe/theme.ts b/src/store/subscribe/theme.ts index fa1044b2..c0ac0b18 100644 --- a/src/store/subscribe/theme.ts +++ b/src/store/subscribe/theme.ts @@ -1,6 +1,8 @@ import { watch, onUnmounted } from 'vue'; import { useOsTheme } from 'naive-ui'; +import type { GlobalThemeOverrides } from 'naive-ui'; import { useElementSize } from '@vueuse/core'; +import { kebabCase } from 'lodash-es'; import { setThemeColor } from '@/utils'; import { useThemeStore } from '../modules'; @@ -11,6 +13,7 @@ export default function subscribeThemeStore() { const { width } = useElementSize(document.documentElement); const { addDarkClass, removeDarkClass } = handleWindicssDarkMode(); + // 监听主题颜色 const stopThemeColor = watch( () => theme.themeColor, newValue => { @@ -19,6 +22,17 @@ export default function subscribeThemeStore() { { immediate: true } ); + // 监听naiveUI themeOverrides + const stopThemeOverrides = watch( + () => theme.naiveThemeOverrides, + newValue => { + if (newValue.common) { + addThemeCssVarsToHtml(newValue.common); + } + }, + { immediate: true } + ); + // 监听暗黑模式 const stopDarkMode = watch( () => theme.darkMode, @@ -55,6 +69,7 @@ export default function subscribeThemeStore() { onUnmounted(() => { stopThemeColor(); + stopThemeOverrides(); stopDarkMode(); stopOsTheme(); stopWidth(); @@ -75,3 +90,17 @@ function handleWindicssDarkMode() { removeDarkClass }; } + +type ThemeVars = Exclude; +type ThemeVarsKeys = keyof ThemeVars; + +/** 添加css vars至html */ +function addThemeCssVarsToHtml(themeVars: ThemeVars) { + const keys = Object.keys(themeVars) as ThemeVarsKeys[]; + const style: string[] = []; + keys.forEach(key => { + style.push(`--${kebabCase(key)}: ${themeVars[key]}`); + }); + const styleStr = style.join(';'); + document.documentElement.style.cssText += styleStr; +}