From 13369d44b48aafe279b38a88477560dba12e1abe Mon Sep 17 00:00:00 2001
From: jieliu52 <jieliu52@kxdigit.com>
Date: Wed, 26 Mar 2025 10:21:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(config-provider):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=90=88=E5=B9=B6=E4=B8=BB=E9=A2=98=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../config-provider/merge-composition-api.vue | 204 +++++++++++++++++
 .../pc/app/config-provider/merge.spec.ts      |  25 ++
 .../demos/pc/app/config-provider/merge.vue    | 215 ++++++++++++++++++
 .../config-provider/webdoc/config-provider.js |  13 ++
 packages/utils/src/index.ts                   |  14 +-
 packages/utils/src/object/index.ts            |  40 ++++
 packages/vue/src/config-provider/package.json |  15 +-
 .../vue/src/config-provider/src/index.vue     |  21 +-
 8 files changed, 537 insertions(+), 10 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/config-provider/merge-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/config-provider/merge.spec.ts
 create mode 100644 examples/sites/demos/pc/app/config-provider/merge.vue

diff --git a/examples/sites/demos/pc/app/config-provider/merge-composition-api.vue b/examples/sites/demos/pc/app/config-provider/merge-composition-api.vue
new file mode 100644
index 0000000000..8ddff649f4
--- /dev/null
+++ b/examples/sites/demos/pc/app/config-provider/merge-composition-api.vue
@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <h2>父主题配置</h2>
+
+    <tiny-config-provider :design="parentDesign">
+      <h2>子主题配置</h2>
+      <tiny-config-provider :design="childDesign1">
+        <div class="demo-form">
+          <tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
+          <tiny-form ref="ruleFormRef" :model="formData">
+            <tiny-form-item label="年龄" prop="age" required>
+              <tiny-numeric v-model="formData.age"></tiny-numeric>
+            </tiny-form-item>
+            <tiny-form-item label="姓名" prop="name" required>
+              <tiny-input v-model="formData.name"></tiny-input>
+            </tiny-form-item>
+            <tiny-form-item>
+              <tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
+            </tiny-form-item>
+          </tiny-form>
+        </div>
+      </tiny-config-provider>
+      <h2>子主题配置</h2>
+      <tiny-config-provider :design="childDesign2">
+        <div class="demo-form">
+          <tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
+          <tiny-form ref="ruleFormRef" :model="formData">
+            <tiny-form-item label="年龄" prop="age" required>
+              <tiny-numeric v-model="formData.age"></tiny-numeric>
+            </tiny-form-item>
+            <tiny-form-item label="姓名" prop="name" required>
+              <tiny-input v-model="formData.name"></tiny-input>
+            </tiny-form-item>
+            <tiny-form-item>
+              <tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
+            </tiny-form-item>
+          </tiny-form>
+        </div>
+      </tiny-config-provider>
+    </tiny-config-provider>
+
+    <h2>主题配置</h2>
+    <tiny-config-provider :design="noParentDesign">
+      <div class="demo-form">
+        <tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
+        <tiny-form ref="ruleFormRef" :model="formData">
+          <tiny-form-item label="年龄" prop="age" required>
+            <tiny-numeric v-model="formData.age"></tiny-numeric>
+          </tiny-form-item>
+          <tiny-form-item label="姓名" prop="name" required>
+            <tiny-input v-model="formData.name"></tiny-input>
+          </tiny-form-item>
+          <tiny-form-item>
+            <tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
+          </tiny-form-item>
+        </tiny-form>
+      </div>
+    </tiny-config-provider>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {
+  TinyConfigProvider,
+  TinyAlert,
+  TinyModal,
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyNumeric,
+  TinyButton
+} from '@opentiny/vue'
+import { iconWarningTriangle } from '@opentiny/vue-icon'
+
+const ruleFormRef = ref()
+
+const parentDesign = ref({
+  name: 'x-design-p', // 设计规范名称
+  version: '1.0.0', // 设计规范版本号
+  components: {
+    Button: {
+      props: {
+        round: true
+      }
+    }
+  }
+})
+const childDesign1 = ref({
+  name: 'x-design-1', // 设计规范名称
+  version: '1.0.0', // 设计规范版本号
+  components: {
+    Button: {
+      props: {
+        resetTime: 0
+      }
+    }
+  }
+})
+const childDesign2 = ref({
+  name: 'x-design-2', // 设计规范名称
+  version: '1.0.0', // 设计规范版本号
+  components: {
+    Button: {
+      props: {
+        round: true
+      }
+    },
+    Alert: {
+      icons: {
+        warning: iconWarningTriangle()
+      },
+      /**
+       *
+       * @param {*} props 组件属性集合
+       * @param {*} hooks vue2-->@composition-api,vue3-->vue
+       * @param {*} param2 context
+       * @param {*} api Alert 组件 renderless 层方法属性和方法集合
+       */
+      renderless: (props, hooks, { emit }, api) => {
+        const state = api.state
+        return {
+          handleClose() {
+            state.show = false
+            TinyModal.message('触发自定方法')
+            emit('close')
+          }
+        }
+      }
+    }
+  }
+})
+const noParentDesign = {
+  name: 'x-design-n', // 设计规范名称
+  version: '1.0.0', // 设计规范版本号
+  components: {
+    Button: {
+      props: {
+        round: true
+      }
+    },
+    Form: {
+      props: {
+        hideRequiredAsterisk: true
+      }
+    }
+  }
+}
+
+const design = {
+  name: 'x-design', // 设计规范名称
+  version: '1.0.0', // 设计规范版本号
+  components: {
+    Form: {
+      props: {
+        hideRequiredAsterisk: true
+      }
+    },
+    Button: {
+      props: {
+        resetTime: 0,
+        round: true
+      }
+    },
+    Alert: {
+      icons: {
+        warning: iconWarningTriangle()
+      },
+      /**
+       *
+       * @param {*} props 组件属性集合
+       * @param {*} hooks vue2-->@composition-api,vue3-->vue
+       * @param {*} param2 context
+       * @param {*} api Alert 组件 renderless 层方法属性和方法集合
+       */
+      renderless: (props, hooks, { emit }, api) => {
+        const state = api.state
+        return {
+          handleClose() {
+            state.show = false
+            TinyModal.message('触发自定方法')
+            emit('close')
+          }
+        }
+      }
+    }
+  }
+}
+
+const handleSubmitPromise = () => {
+  ruleFormRef.value.validate().catch(() => {})
+}
+
+const formData = ref({
+  name: '',
+  age: ''
+})
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/config-provider/merge.spec.ts b/examples/sites/demos/pc/app/config-provider/merge.spec.ts
new file mode 100644
index 0000000000..b6dcafb91a
--- /dev/null
+++ b/examples/sites/demos/pc/app/config-provider/merge.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('测试自定义事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('config-provider#merge')
+
+  // 验证自定义方法
+  const demo = page.locator('#merge')
+  await demo.locator('.tiny-config-provider .tiny-alert > .tiny-alert__close').click()
+  await page.waitForTimeout(500)
+  await expect(page.locator('.tiny-modal > .tiny-modal__box').nth(1)).toHaveText('触发自定方法')
+
+  // 验证必填星号
+  await expect(demo.locator('.tiny-form')).toBeVisible()
+  const beforeElement = await page.evaluate(() => {
+    const labelBefore = document.querySelector('.tiny-form .tiny-form-item__label')
+    const { display, content } = window.getComputedStyle(labelBefore, '::before')
+    return { display, content }
+  })
+  expect(beforeElement.content).toBe('none')
+
+  // 验证按钮点击禁用时间
+  await demo.locator('.tiny-button').click()
+  await expect(demo.locator('.tiny-button')).not.toBeDisabled({ timeout: 300 })
+})
diff --git a/examples/sites/demos/pc/app/config-provider/merge.vue b/examples/sites/demos/pc/app/config-provider/merge.vue
new file mode 100644
index 0000000000..5dd0d0916d
--- /dev/null
+++ b/examples/sites/demos/pc/app/config-provider/merge.vue
@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <h2>父主题配置</h2>
+
+    <tiny-config-provider :design="parentDesign">
+      <h2>子主题配置</h2>
+      <tiny-config-provider :design="childDesign1">
+        <div class="demo-form">
+          <tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
+          <tiny-form ref="ruleFormRef" :model="formData">
+            <tiny-form-item label="年龄" prop="age" required>
+              <tiny-numeric v-model="formData.age"></tiny-numeric>
+            </tiny-form-item>
+            <tiny-form-item label="姓名" prop="name" required>
+              <tiny-input v-model="formData.name"></tiny-input>
+            </tiny-form-item>
+            <tiny-form-item>
+              <tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
+            </tiny-form-item>
+          </tiny-form>
+        </div>
+      </tiny-config-provider>
+      <h2>子主题配置</h2>
+      <tiny-config-provider :design="childDesign2">
+        <div class="demo-form">
+          <tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
+          <tiny-form ref="ruleFormRef" :model="formData">
+            <tiny-form-item label="年龄" prop="age" required>
+              <tiny-numeric v-model="formData.age"></tiny-numeric>
+            </tiny-form-item>
+            <tiny-form-item label="姓名" prop="name" required>
+              <tiny-input v-model="formData.name"></tiny-input>
+            </tiny-form-item>
+            <tiny-form-item>
+              <tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
+            </tiny-form-item>
+          </tiny-form>
+        </div>
+      </tiny-config-provider>
+    </tiny-config-provider>
+
+    <h2>主题配置</h2>
+    <tiny-config-provider :design="noParentDesign">
+      <div class="demo-form">
+        <tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
+        <tiny-form ref="ruleFormRef" :model="formData">
+          <tiny-form-item label="年龄" prop="age" required>
+            <tiny-numeric v-model="formData.age"></tiny-numeric>
+          </tiny-form-item>
+          <tiny-form-item label="姓名" prop="name" required>
+            <tiny-input v-model="formData.name"></tiny-input>
+          </tiny-form-item>
+          <tiny-form-item>
+            <tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
+          </tiny-form-item>
+        </tiny-form>
+      </div>
+    </tiny-config-provider>
+  </div>
+</template>
+
+<script>
+import {
+  TinyConfigProvider,
+  TinyAlert,
+  TinyModal,
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyNumeric,
+  TinyButton
+} from '@opentiny/vue'
+import { iconWarningTriangle } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyConfigProvider,
+    TinyAlert,
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyNumeric,
+    TinyButton
+  },
+  data() {
+    return {
+      parentDesign: {
+        name: 'x-design-p', // 设计规范名称
+        version: '1.0.0', // 设计规范版本号
+        components: {
+          Button: {
+            props: {
+              round: true
+            }
+          }
+        }
+      },
+      childDesign1: {
+        name: 'x-design-1', // 设计规范名称
+        version: '1.0.0', // 设计规范版本号
+        components: {
+          Button: {
+            props: {
+              resetTime: 0
+            }
+          }
+        }
+      },
+      childDesign2: {
+        name: 'x-design-2', // 设计规范名称
+        version: '1.0.0', // 设计规范版本号
+        components: {
+          Button: {
+            props: {
+              round: true
+            }
+          },
+          Alert: {
+            icons: {
+              warning: iconWarningTriangle()
+            },
+            /**
+             *
+             * @param {*} props 组件属性集合
+             * @param {*} hooks vue2-->@composition-api,vue3-->vue
+             * @param {*} param2 context
+             * @param {*} api Alert 组件 renderless 层方法属性和方法集合
+             */
+            renderless: (props, hooks, { emit }, api) => {
+              const state = api.state
+              return {
+                handleClose() {
+                  state.show = false
+                  TinyModal.message('触发自定方法')
+                  emit('close')
+                }
+              }
+            }
+          }
+        }
+      },
+      noParentDesign: {
+        name: 'x-design-n', // 设计规范名称
+        version: '1.0.0', // 设计规范版本号
+        components: {
+          Button: {
+            props: {
+              round: true
+            }
+          },
+          Form: {
+            props: {
+              hideRequiredAsterisk: true
+            }
+          }
+        }
+      },
+      design: {
+        name: 'x-design', // 设计规范名称
+        version: '1.0.0', // 设计规范版本号
+        components: {
+          Form: {
+            props: {
+              hideRequiredAsterisk: true
+            }
+          },
+          Button: {
+            props: {
+              resetTime: 0,
+              round: true
+            }
+          },
+          Alert: {
+            icons: {
+              warning: iconWarningTriangle()
+            },
+            /**
+             *
+             * @param {*} props 组件属性集合
+             * @param {*} hooks vue2-->@composition-api,vue3-->vue
+             * @param {*} param2 context
+             * @param {*} api Alert 组件 renderless 层方法属性和方法集合
+             */
+            renderless: (props, hooks, { emit }, api) => {
+              const state = api.state
+              return {
+                handleClose() {
+                  state.show = false
+                  TinyModal.message('触发自定方法')
+                  emit('close')
+                }
+              }
+            }
+          }
+        }
+      },
+      formData: {
+        name: '',
+        age: ''
+      }
+    }
+  },
+  methods: {
+    handleSubmitPromise() {
+      this.$refs.ruleFormRef.validate().catch(() => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js
index b463ed71e0..dd93e30f01 100644
--- a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js
+++ b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js
@@ -18,6 +18,19 @@ export default {
       },
       codeFiles: ['base.vue']
     },
+    {
+      demoId: 'merge',
+      name: {
+        'zh-CN': '嵌套使用',
+        'en-US': 'Merge'
+      },
+      desc: {
+        'zh-CN': '支持嵌套使用',
+        'en-US':
+          'Icons and logic for different design specifications can be customized through the <code>design</code> attribute configuration.'
+      },
+      codeFiles: ['merge.vue']
+    },
     {
       demoId: 'text-direct',
       name: {
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index c6fb921347..f017d50931 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -110,7 +110,19 @@ export {
 } from './string'
 
 export { roundFixed, Decimal, toFixed as toFixedDecimal, formatNumber, recoverNumber } from './decimal'
-export { each, getObj, setObj, copyField, copyArray, isEqual, isEachEqual, extend, toJsonStr, merge } from './object'
+export {
+  each,
+  getObj,
+  setObj,
+  copyField,
+  copyArray,
+  isEqual,
+  isEachEqual,
+  extend,
+  toJsonStr,
+  merge,
+  deepMerge
+} from './object'
 
 export {
   supportBigInt,
diff --git a/packages/utils/src/object/index.ts b/packages/utils/src/object/index.ts
index 7dbfabf25c..ea9607dcb5 100644
--- a/packages/utils/src/object/index.ts
+++ b/packages/utils/src/object/index.ts
@@ -434,3 +434,43 @@ export const merge = function (target: object, ...rest: object[]) {
 
   return target
 }
+
+/**
+ * 深度合并普通对象：递归合并所有普通对象的属性，嵌套对象也会被合并。
+ * 覆盖非对象值：数组、日期、函数等非普通对象值会被直接覆盖。
+ * 不修改原对象：所有合并操作都在新对象上进行，原对象保持不变。
+ * 处理null和undefined源：忽略null和undefined类型的源对象。
+ */
+export function deepMerge(...sources) {
+  function merge(target, source) {
+    if (!isObject(source)) {
+      return
+    }
+    Object.keys(source).forEach((key) => {
+      const sourceValue = source[key]
+      const targetValue = target[key]
+
+      if (isObject(sourceValue)) {
+        if (isObject(targetValue)) {
+          // 递归合并对象
+          merge(targetValue, sourceValue)
+        } else {
+          // 目标属性不是对象，创建新对象并递归合并
+          target[key] = {}
+          merge(target[key], sourceValue)
+        }
+      } else {
+        // 直接赋值非对象或数组等类型的值
+        target[key] = sourceValue
+      }
+    })
+  }
+
+  const target = {}
+  for (const source of sources) {
+    if (source !== null && source !== undefined) {
+      merge(target, source)
+    }
+  }
+  return target
+}
diff --git a/packages/vue/src/config-provider/package.json b/packages/vue/src/config-provider/package.json
index 1032b24292..3dd47c4966 100644
--- a/packages/vue/src/config-provider/package.json
+++ b/packages/vue/src/config-provider/package.json
@@ -1,21 +1,22 @@
 {
   "name": "@opentiny/vue-config-provider",
+  "type": "module",
   "version": "3.22.0",
+  "license": "MIT",
+  "sideEffects": false,
   "main": "lib/index.js",
   "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "catalog:"
-  },
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
+    "@opentiny/utils": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
-  "license": "MIT"
+  "devDependencies": {
+    "@opentiny-internal/vue-test-utils": "workspace:*",
+    "vitest": "catalog:"
+  }
 }
diff --git a/packages/vue/src/config-provider/src/index.vue b/packages/vue/src/config-provider/src/index.vue
index 5747f84118..cdda7b2c5d 100644
--- a/packages/vue/src/config-provider/src/index.vue
+++ b/packages/vue/src/config-provider/src/index.vue
@@ -1,8 +1,17 @@
 <script lang="ts">
-import { provideDesignConfig, hooks, props as _props, isVue2, $prefix, defineComponent } from '@opentiny/vue-common'
+import {
+  provideDesignConfig,
+  hooks,
+  props as _props,
+  isVue2,
+  $prefix,
+  defineComponent,
+  design as designSymbol
+} from '@opentiny/vue-common'
 import type { PropType } from '@opentiny/vue-common'
 import type { Tag, TextDirection, breakPoint } from './props'
 import { configProviderContextKey } from '../index'
+import { deepMerge } from '@opentiny/utils'
 import '@opentiny/vue-theme/config-provider/index.less'
 
 export default defineComponent({
@@ -59,7 +68,15 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const { direction, design } = hooks.toRefs(props)
-    provideDesignConfig(design)
+
+    const parentDesign = hooks.inject(designSymbol.configKey, {})
+
+    const currentDesign = hooks.computed(() => {
+      const parentValue = parentDesign?.value || parentDesign || {}
+      return deepMerge(parentValue, design.value)
+    })
+
+    provideDesignConfig(currentDesign)
     const isRTL = hooks.computed(() => direction.value === 'rtl')
     const cssVar = hooks.computed(() => {
       return {