@aspire-ui/element-component-pro 1.0.13 → 1.0.14

package/src/useComponentSetting.ts

@@ -3,33 +3,88 @@ import { reactive } from 'vue'
 /** 组件默认配置存储：组件名 -> 默认 props/配置 */
 const componentSettings = reactive<Record<string, Record<string, unknown>>>({})
 
+/**
+ * 深度合并两个对象
+ * - source 的值会覆盖 target 的值
+ * - 对于嵌套对象，会递归合并
+ * - 数组直接替换，不合并
+ */
+function deepMerge(target: Record<string, unknown>, source?: Record<string, unknown>): Record<string, unknown> {
+  if (!source) return target
+
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const targetValue = target[key]
+      const sourceValue = source[key]
+
+      if (isPlainObject(sourceValue)) {
+        if (!isPlainObject(targetValue)) {
+          target[key] = { ...(sourceValue as Record<string, unknown>) }
+        } else {
+          target[key] = deepMerge(
+            targetValue as Record<string, unknown>,
+            sourceValue as Record<string, unknown>
+          )
+        }
+      } else {
+        target[key] = sourceValue
+      }
+    }
+  }
+
+  return target
+}
+
+/** 判断是否为普通对象（非数组、非 null） */
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (!value || typeof value !== 'object') return false
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}
+
 export interface UseComponentSettingReturn {
   /** 获取组件默认配置；不传参时返回全部组件的配置 */
-  getSetting: (componentName?: string) => Record<string, unknown>
-  /** 设置组件默认配置（与已有配置浅合并） */
+  getSetting: <T extends Record<string, unknown> = Record<string, unknown>>(componentName?: string) => T
+  /** 设置组件默认配置（与已有配置深度合并） */
   setSetting: (componentName: string, config: Record<string, unknown>) => void
+  /** 合并组件配置：全局配置与组件 props 合并，返回合并后的结果 */
+  mergeSettings: <T extends Record<string, unknown> = Record<string, unknown>>(componentName: string, props: Record<string, unknown>) => T
 }
 
 /**
  * 组件默认配置：供所有组件统一获取/设置默认配置
- * - getSetting：获取组件默认配置，用于初始化或合并 props
- * - setSetting：设置组件默认配置，可在应用入口或按需调用
+ * - getSetting：获取组件默认配置
+ * - setSetting：设置组件默认配置（深度合并），可在应用入口或按需调用
+ * - mergeSettings：合并全局配置与组件 props，props 优先级更高
+ *
+ * 合并优先级：组件默认值 < 全局配置 < 组件 props
  */
 export function useComponentSetting(): UseComponentSettingReturn {
-  const getSetting = (componentName?: string): Record<string, unknown> => {
+  const getSetting = <T extends Record<string, unknown> = Record<string, unknown>>(componentName?: string): T => {
     if (componentName === undefined) {
-      return { ...componentSettings }
+      return JSON.parse(JSON.stringify(componentSettings)) as T
     }
-    return { ...(componentSettings[componentName] ?? {}) }
+    return JSON.parse(JSON.stringify(componentSettings[componentName] ?? {})) as T
   }
 
   const setSetting = (componentName: string, config: Record<string, unknown>): void => {
     const current = componentSettings[componentName]
-    componentSettings[componentName] = current ? { ...current, ...config } : { ...config }
+    if (current) {
+      componentSettings[componentName] = deepMerge({ ...current }, config)
+    } else {
+      componentSettings[componentName] = { ...config }
+    }
+  }
+
+  /** 合并全局配置与组件 props，props 优先级更高 */
+  const mergeSettings = <T extends Record<string, unknown> = Record<string, unknown>>(componentName: string, props: Record<string, unknown>): T => {
+    const globalSetting = componentSettings[componentName] ?? {}
+    return deepMerge({ ...globalSetting }, props) as T
   }
 
   return {
     getSetting,
     setSetting,
+    mergeSettings,
   }
 }