feat(ConfigProvider): 支持嵌套主题配置

components/_theme/useTheme.ts

@@ -1,42 +1,54 @@
 import { type Ref, ref, watch } from 'vue';
-import { createSharedComposable } from '@vueuse/core';
 
+import { tryOnMounted } from '@vueuse/core';
 import { useConfig } from '../config-provider';
 import { applyTheme } from './applyTheme';
 import { baseTheme } from './base';
 import type { TThemeVars } from './base';
 
 function _useTheme() {
-    // TODO: theme 和当前组件 config provider 的 getContainer 关联，目前只有第一个调用 useTheme 的组件生效
     const config = useConfig();
     const themeVars: Ref<TThemeVars> = ref(baseTheme());
 
+    const handleApplyTheme = () => {
+        const getContainer = config.getContainer?.value;
+        const theme = config.theme?.value;
+        const themeOverrides = config.themeOverrides?.value;
+
+        if (!getContainer) {
+            return;
+        }
+
+        const { themeVars: currentThemeVars } = applyTheme(
+            getContainer(),
+            theme,
+            themeOverrides,
+        );
+        themeVars.value = currentThemeVars;
+    };
+
     watch(
         [
             () => config.getContainer?.value,
             () => config.theme?.value,
             () => config.themeOverrides?.value,
         ],
-        ([getContainer, theme, themeOverrides]) => {
-            if (!getContainer) {
-                return;
-            }
-            const { themeVars: currentThemeVars } = applyTheme(
-                getContainer(),
-                theme,
-                themeOverrides,
-            );
-            themeVars.value = currentThemeVars;
+        () => {
+            handleApplyTheme();
         },
         {
-            immediate: true,
+            immediate: false,
         },
     );
 
+    tryOnMounted(() => {
+        handleApplyTheme();
+    });
+
     return {
         config,
         themeVars,
     };
 }
 
-export const useTheme = createSharedComposable(_useTheme);
+export const useTheme = _useTheme;

docs/.vitepress/components/configProvider/customTheme.vue

@@ -0,0 +1,46 @@
+<template>
+    <FConfigProvider>
+        <FSpace>
+            <FButton type="info"> Info </FButton>
+            <FButton type="success"> Success</FButton>
+            <FButton type="warning"> Warning </FButton>
+            <FButton type="danger"> Danger </FButton>
+        </FSpace>
+
+        <FDivider />
+
+        <div :ref="(el) => containerSub = el">
+            <FConfigProvider :getContainer="getContainerSub" :themeOverrides="themeOverrides">
+                <FSpace>
+                    <FButton type="info"> Info </FButton>
+                    <FButton type="success"> Success</FButton>
+                    <FButton type="warning"> Warning </FButton>
+                    <FButton type="danger"> Danger </FButton>
+                </FSpace>
+            </FConfigProvider>
+        </div>
+    </FConfigProvider>
+</template>
+
+<script setup>
+import { FDivider } from '@fesjs/fes-design';
+import { ref } from 'vue';
+
+const containerSub = ref(null);
+
+const getContainerSub = () => {
+    return containerSub.value;
+};
+
+const themeOverrides = ref({
+    common: {
+        fontColorBase: '#606266',
+        primaryColor: '#679a4d',
+        successColor: '#67c23a',
+        dangerColor: '#d32323',
+        warningColor: '#cf9847',
+    },
+});
+</script>
+
+<style scoped></style>

docs/.vitepress/components/configProvider/index.md

@@ -1,7 +1,7 @@
-# Config Provider 全局配置
+# ConfigProvider 全局配置
 
 为组件提供统一的全局化配置。
-Config Provider 使用了 [Vue 的 provide/inject 特性](https://v3.vuejs.org/guide/composition-api-provide-inject.html#using-provide)。
+`ConfigProvider` 使用了 [Vue 的 provide/inject 特性](https://v3.vuejs.org/guide/composition-api-provide-inject.html#using-provide)。
 
 ## 组件注册
 
@@ -29,13 +29,21 @@ const getContainer = () => {
 
 ### 切换语言
 
---CHANGELOCALE
+:::demo
+changeLocale.vue
+:::
 
 ### 自定义语言
 
---CUSTOMLOCALE
+:::demo
+customLocale.vue
+:::
 
---CODE
+### 自定义主题
+
+:::demo
+customTheme.vue
+:::
 
 ## Props