@quiteer/naive-extra 0.0.1

package/src/context/color.ts

@@ -0,0 +1,53 @@
+import type { ComputedRef } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { generateColorScale } from '@quiteer/color'
+import { provideNaiveTheme } from '@quiteer/unocss/provide'
+import { computed, watchEffect } from 'vue'
+
+/**
+ * 品牌色管理模块
+ *
+ * 负责生成品牌色阶并同步 CSS 变量到 :root
+ *
+ * @param mergedConfig - 合并后的响应式配置
+ * @returns 包含 common 变量中颜色部分的计算结果
+ */
+export function useColorModule(mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>) {
+  /**
+   * 计算 Naive UI common 变量中的颜色部分
+   */
+  const colorVars = computed(() => {
+    const { palette } = mergedConfig.value
+    const vars: any = {}
+
+    const brandKeys = ['primary', 'info', 'success', 'warning', 'error'] as const
+    brandKeys.forEach((key) => {
+      const baseColor = palette[key]
+      if (baseColor) {
+        const scale = generateColorScale(baseColor)
+        vars[`${key}Color`] = scale.DEFAULT
+        vars[`${key}ColorHover`] = scale.hover
+        vars[`${key}ColorPressed`] = scale.pressed
+        vars[`${key}ColorSuppl`] = scale.suppl
+        vars[`${key}ColorActive`] = scale.active
+      }
+    })
+
+    return vars
+  })
+
+  // 同步 CSS 变量到 :root
+  watchEffect((onCleanup) => {
+    const cleanup = provideNaiveTheme({
+      theme: colorVars.value as any
+    })
+    onCleanup(() => {
+      if (cleanup)
+        cleanup()
+    })
+  })
+
+  return {
+    colorVars
+  }
+}

package/src/context/common.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { computed } from 'vue'
+
+/**
+ * 基础变量管理模块
+ *
+ * 负责处理圆角、基础配置等 Naive UI common 变量
+ *
+ * @param mergedConfig - 合并后的响应式配置
+ * @returns 包含 common 变量中非颜色部分的计算结果
+ */
+export function useCommonModule(mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>) {
+  const commonVars = computed(() => {
+    const { borderRadius, common } = mergedConfig.value
+
+    return {
+      ...common,
+      borderRadius: `${borderRadius}px`,
+      borderRadiusSmall: `${Math.max(0, borderRadius - 2)}px`
+    }
+  })
+
+  return {
+    commonVars
+  }
+}

package/src/context/index.ts

@@ -0,0 +1,141 @@
+import type { ConfigProviderProps, GlobalThemeOverrides } from 'naive-ui'
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { defu } from 'defu'
+import { computed, provide, ref } from 'vue'
+
+import { DEFAULT_THEME_CONFIG } from '../const'
+import { useColorModule } from './color'
+import { useCommonModule } from './common'
+import { useLayoutModule } from './layout'
+import { useLoadingBarModule } from './loading-bar'
+import { useLocaleModule } from './locale'
+import { useMenuModule } from './menu'
+import { useMessageModule } from './message'
+import { useNotificationModule } from './notification'
+import { useTableModule } from './table'
+// 导入子模块
+import { useThemeModule } from './theme'
+
+export * from '../const'
+
+/**
+ * NaiveExtra 上下文接口
+ */
+export interface NaiveExtraContext {
+  /** 响应式的主题配置 */
+  config: Ref<NaiveExtraThemeConfig>
+  /** 合并了默认值的最终配置 */
+  mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>
+  /** ConfigProvider 所需的所有 Props */
+  providerProps: ComputedRef<ConfigProviderProps>
+  loadingBarProviderProps: ComputedRef<any>
+  messageProviderProps: ComputedRef<any>
+  notificationProviderProps: ComputedRef<any>
+  /** 是否为暗黑模式 */
+  isDark: ComputedRef<boolean>
+  /** 更新配置的方法 */
+  updateConfig: (newConfig: Partial<NaiveExtraThemeConfig>) => void
+  /** 主题控制方法 */
+  setThemeMode: (mode: 'light' | 'dark' | 'system') => void
+  toggleTheme: () => void
+  /** 语言控制方法 */
+  setLocaleMode: (mode: 'zh' | 'en') => void
+  toggleLocale: () => void
+  /** 样式快捷操作 */
+  setPrimaryColor: (color: string) => void
+  setBorderRadius: (radius: number) => void
+}
+
+/**
+ * Context 注入标识
+ */
+export const NAIVE_EXTRA_CONTEXT_KEY: InjectionKey<NaiveExtraContext> = Symbol('NAIVE_EXTRA_CONTEXT')
+
+/**
+ * 创建并提供主题配置上下文
+ *
+ * 通过聚合多个子模块逻辑，实现一站式的主题与配置管理。
+ */
+export function createProviderContext(initialConfig: NaiveExtraThemeConfig = {}): NaiveExtraContext {
+  const config = ref<NaiveExtraThemeConfig>(JSON.parse(JSON.stringify(initialConfig)))
+
+  /**
+   * 基础合并配置逻辑 (使用 defu 进行深度合并)
+   */
+  const mergedConfig = computed(() => {
+    return defu(config.value, DEFAULT_THEME_CONFIG) as Required<NaiveExtraThemeConfig>
+  })
+
+  // 初始化子模块
+  const { isDark, theme } = useThemeModule(mergedConfig)
+  const { locale, dateLocale } = useLocaleModule(mergedConfig)
+  const { colorVars } = useColorModule(mergedConfig)
+  const { commonVars } = useCommonModule(mergedConfig)
+  const { tableOverrides } = useTableModule(mergedConfig)
+  const { menuOverrides } = useMenuModule(mergedConfig)
+  const { layoutOverrides } = useLayoutModule(mergedConfig)
+  const { loadingBarProviderProps } = useLoadingBarModule(mergedConfig)
+  const { messageProviderProps } = useMessageModule(mergedConfig)
+  const { notificationProviderProps } = useNotificationModule(mergedConfig)
+
+  /**
+   * 聚合所有覆盖样式
+   */
+  const themeOverrides = computed<GlobalThemeOverrides>(() => ({
+    common: {
+      ...commonVars.value,
+      ...colorVars.value
+    },
+    DataTable: tableOverrides.value,
+    Layout: layoutOverrides.value,
+    Menu: menuOverrides.value,
+    ...mergedConfig.value.overrides
+  }))
+
+  /**
+   * 组装最终给 ConfigProvider 的 Props
+   */
+  const providerProps = computed<ConfigProviderProps>(() => ({
+    theme: theme.value,
+    locale: locale.value,
+    dateLocale: dateLocale.value,
+    themeOverrides: themeOverrides.value
+  }))
+
+  // 操作方法
+  const updateConfig = (newConfig: Partial<NaiveExtraThemeConfig>) => {
+    // 显式触发更新，确保响应式追踪
+    config.value = defu(JSON.parse(JSON.stringify(newConfig)), config.value)
+  }
+
+  const setThemeMode = (mode: 'light' | 'dark' | 'system') => updateConfig({ themeMode: mode })
+  const toggleTheme = () => setThemeMode(isDark.value ? 'light' : 'dark')
+  const setLocaleMode = (mode: 'zh' | 'en') => updateConfig({ localeMode: mode })
+  const toggleLocale = () => setLocaleMode(mergedConfig.value.localeMode === 'zh' ? 'en' : 'zh')
+  const setPrimaryColor = (color: string) => {
+    updateConfig({ palette: { primary: color } })
+  }
+  const setBorderRadius = (radius: number) => updateConfig({ borderRadius: radius })
+
+  const context: NaiveExtraContext = {
+    config,
+    mergedConfig,
+    providerProps,
+    loadingBarProviderProps,
+    messageProviderProps,
+    notificationProviderProps,
+    isDark,
+    updateConfig,
+    setThemeMode,
+    toggleTheme,
+    setLocaleMode,
+    toggleLocale,
+    setPrimaryColor,
+    setBorderRadius
+  }
+
+  provide(NAIVE_EXTRA_CONTEXT_KEY, context)
+
+  return context
+}

package/src/context/layout.ts

@@ -0,0 +1,34 @@
+import type { GlobalThemeOverrides } from 'naive-ui'
+import type { ComputedRef } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { computed } from 'vue'
+import { compact, formatPx } from '../share'
+
+/**
+ * 布局相关组件样式覆盖模块
+ *
+ * 涵盖 Layout, Tabs, Scrollbar 等
+ *
+ * @param mergedConfig - 合并后的响应式配置
+ * @returns 包含各组件主题覆盖对象的集合
+ */
+export function useLayoutModule(mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>) {
+  const layoutOverrides = computed<GlobalThemeOverrides['Layout']>(() => {
+    const { layout } = mergedConfig.value
+    return compact({
+      headerHeight: formatPx(layout.headerHeight),
+      footerHeight: formatPx(layout.footerHeight),
+      siderWidth: formatPx(layout.siderWidth),
+      siderCollapsedWidth: formatPx(layout.siderCollapsedWidth),
+      color: layout.color,
+      colorEmbedded: layout.colorEmbedded,
+      headerColor: layout.headerColor,
+      footerColor: layout.footerColor,
+      siderColor: layout.siderColor
+    })
+  })
+
+  return {
+    layoutOverrides
+  }
+}

package/src/context/loading-bar.ts

@@ -0,0 +1,26 @@
+import type { LoadingBarProviderProps } from 'naive-ui'
+import type { ComputedRef } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { computed } from 'vue'
+import { compact } from '../share'
+
+/**
+ * 加载条 (LoadingBar) 配置模块
+ *
+ * 负责管理 NLoadingBarProvider 的全局属性和样式
+ *
+ * @param mergedConfig - 合并后的完整主题配置
+ * @returns 包含 loadingBarProviderProps 的计算引用
+ */
+export function useLoadingBarModule(mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>) {
+  const loadingBarProviderProps = computed<LoadingBarProviderProps>(() => {
+    const { loadingBar } = mergedConfig.value
+    return compact({
+      loadingBarStyle: loadingBar.loadingBarStyle
+    })
+  })
+
+  return {
+    loadingBarProviderProps
+  }
+}

package/src/context/locale.ts

@@ -0,0 +1,22 @@
+import type { ComputedRef } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { dateEnUS, dateZhCN, enUS, zhCN } from 'naive-ui'
+import { computed } from 'vue'
+
+/**
+ * 国际化管理模块
+ *
+ * 负责语言包及日期语言包的切换逻辑
+ *
+ * @param mergedConfig - 合并后的响应式配置
+ * @returns 包含语言包、日期语言包计算结果的对象
+ */
+export function useLocaleModule(mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>) {
+  const locale = computed(() => (mergedConfig.value.localeMode === 'zh' ? zhCN : enUS))
+  const dateLocale = computed(() => (mergedConfig.value.localeMode === 'zh' ? dateZhCN : dateEnUS))
+
+  return {
+    locale,
+    dateLocale
+  }
+}

package/src/context/menu.ts

@@ -0,0 +1,26 @@
+import type { GlobalThemeOverrides } from 'naive-ui'
+import type { ComputedRef } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { computed } from 'vue'
+import { compact, formatPx } from '../share'
+
+/**
+ * 菜单组件样式覆盖模块
+ *
+ * @param mergedConfig - 合并后的响应式配置
+ * @returns 包含菜单组件主题覆盖对象的集合
+ */
+export function useMenuModule(mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>) {
+  const menuOverrides = computed<GlobalThemeOverrides['Menu']>(() => {
+    const { menu } = mergedConfig.value
+    return compact({
+      itemHeight: formatPx(menu.itemHeight),
+      collapsedWidth: formatPx(menu.collapsedWidth),
+      itemIconSize: formatPx(menu.iconSize)
+    })
+  })
+
+  return {
+    menuOverrides
+  }
+}

package/src/context/message.ts

@@ -0,0 +1,30 @@
+import type { MessageProviderProps } from 'naive-ui'
+import type { ComputedRef } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { computed } from 'vue'
+import { compact } from '../share'
+
+/**
+ * 消息 (Message) 配置模块
+ *
+ * 负责管理 NMessageProvider 的全局展示逻辑
+ *
+ * @param mergedConfig - 合并后的完整主题配置
+ * @returns 包含 messageProviderProps 的计算引用
+ */
+export function useMessageModule(mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>) {
+  const messageProviderProps = computed<MessageProviderProps>(() => {
+    const { message } = mergedConfig.value
+    return compact({
+      duration: message.duration,
+      max: message.max,
+      placement: message.placement,
+      closable: message.closable,
+      keepAliveOnHover: true
+    })
+  })
+
+  return {
+    messageProviderProps
+  }
+}

package/src/context/notification.ts

@@ -0,0 +1,29 @@
+import type { NotificationProviderProps } from 'naive-ui'
+import type { ComputedRef } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { computed } from 'vue'
+import { compact } from '../share'
+
+/**
+ * 通知 (Notification) 配置模块
+ *
+ * 负责管理 NNotificationProvider 的全局展示逻辑
+ *
+ * @param mergedConfig - 合并后的完整主题配置
+ * @returns 包含 notificationProviderProps 的计算引用
+ */
+export function useNotificationModule(mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>) {
+  const notificationProviderProps = computed<NotificationProviderProps>(() => {
+    const { notification } = mergedConfig.value
+    return compact({
+      duration: notification.duration,
+      max: notification.max,
+      placement: notification.placement,
+      keepAliveOnHover: true
+    })
+  })
+
+  return {
+    notificationProviderProps
+  }
+}

package/src/context/table.ts

@@ -0,0 +1,32 @@
+import type { GlobalThemeOverrides } from 'naive-ui'
+import type { ComputedRef } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { computed } from 'vue'
+import { compact } from '../share'
+
+/**
+ * 表格组件样式覆盖模块
+ *
+ * @param mergedConfig - 合并后的响应式配置
+ * @returns DataTable 的主题覆盖对象
+ */
+export function useTableModule(mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>) {
+  const tableOverrides = computed<GlobalThemeOverrides['DataTable']>(() => {
+    const { table } = mergedConfig.value
+
+    return compact({
+      tdPaddingHorizontal: table.tdPaddingHorizontal,
+      tdPaddingVertical: table.tdPaddingVertical,
+      thPaddingHorizontal: table.thPaddingHorizontal,
+      thPaddingVertical: table.thPaddingVertical,
+      tableColor: table.tableColor,
+      thColor: table.tableHeaderColor,
+      tdColorStriped: table.tableColorStriped,
+      tdColorHover: table.tableColorHover
+    })
+  })
+
+  return {
+    tableOverrides
+  }
+}

package/src/context/theme.ts

@@ -0,0 +1,35 @@
+import type { ComputedRef } from 'vue'
+import type { NaiveExtraThemeConfig } from '../const'
+import { darkTheme, useOsTheme } from 'naive-ui'
+import { computed } from 'vue'
+
+/**
+ * 主题管理模块
+ *
+ * 负责应用明暗模式的响应式计算，支持跟随系统主题 (OS Theme)。
+ *
+ * @param mergedConfig - 合并后的完整主题配置
+ * @returns 包含当前是否为暗黑模式 (isDark) 及 Naive UI 主题对象 (theme) 的计算引用
+ *
+ * @example
+ * ```ts
+ * const { isDark, theme } = useThemeModule(mergedConfig)
+ * ```
+ */
+export function useThemeModule(mergedConfig: ComputedRef<Required<NaiveExtraThemeConfig>>) {
+  const osTheme = useOsTheme()
+
+  const isDark = computed(() => {
+    const mode = mergedConfig.value.themeMode
+    if (mode === 'system')
+      return osTheme.value === 'dark'
+    return mode === 'dark'
+  })
+
+  const theme = computed(() => (isDark.value ? darkTheme : null))
+
+  return {
+    isDark,
+    theme
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './useForm'
+export * from './useLayout'
+export * from './useProviderContext'
+export * from './useTable'
+export * from './useThemeOverrides'
+export * from './useUpload'