docs: ✏️ 增加 ConfigProvider 组件设定全局共享示例 (#758)

Author: skiyee

docs/component/config-provider.md

@@ -122,6 +122,127 @@ const themeVars: ConfigProviderThemeVars = {
 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。
 :::
 
+## 全局共享
+
+> 需要配合虚拟根组件([uni-ku-root](https://github.com/uni-ku/root)) 来做全局共享
+
+### 安装
+
+::: code-group
+```bash [npm]
+npm i -D @uni-ku/root
+```
+
+```bash [yarn]
+yarn add -D @uni-ku/root
+```
+
+```bash [pnpm]
+pnpm add -D @uni-ku/root
+```
+:::
+
+### 引入
+
+- CLI项目: 直接编辑 根目录下的 vite.config.(js|ts)
+- HBuilderX项目: 需要在根目录下 创建 vite.config.(js|ts)
+
+```ts
+// vite.config.(js|ts)
+
+import { defineConfig } from 'vite'
+import UniKuRoot from '@uni-ku/root'
+import Uni from '@dcloudio/vite-plugin-uni'
+
+export default defineConfig({
+  plugins: [
+    // ...plugins
+    UniKuRoot(),
+    Uni()
+  ]
+})
+```
+
+:::tip
+若存在改变 pages.json 的插件，需要将 UniKuRoot 放置其后
+:::
+
+### 使用
+
+1. 创建根组件并处理全局配置组件
+
+- CLI项目: 在 **src** 目录下创建下 App.ku.vue
+- HBuilderX项目: 在 **根** 目录下创建 App.ku.vue
+
+:::tip
+在 App.ku.vue 中标签 `<KuRootView />` 代表指定视图存放位置
+:::
+
+```vue
+<!-- src/App.ku.vue | App.ku.vue -->
+
+<script setup lang="ts">
+import { useTheme } from './composables/useTheme'
+
+const { theme, themeVars } = useTheme({
+  buttonPrimaryBgColor: '#07c160',
+  buttonPrimaryColor: '#07c160'
+})
+</script>
+
+<template>
+  <div>Hello AppKuVue</div>
+  <!-- 假设已注册 WdConfigProvider 组件 -->
+  <WdConfigProvider :theme="theme" :theme-vars="themeVars">
+    <KuRootView />
+  </WdConfigProvider>
+</template>
+```
+
+2. 编写控制主题组合式函数
+
+```ts
+// src/composables/useTheme.ts
+
+import type { ConfigProviderThemeVars } from 'wot-design-uni'
+import { ref } from 'vue'
+
+const theme = ref<'light' | 'dark'>(false)
+const themeVars = ref<ConfigProviderThemeVars>()
+
+export function useTheme(vars?: ConfigProviderThemeVars) {
+  vars && (themeVars.value = vars)
+
+  function toggleTheme(mode?: 'light' | 'dark') {
+    theme.value = mode || (theme.value === 'light' ? 'dark' : 'light')
+  }
+
+  return {
+    theme,
+    themeVars,
+    toggleTheme,
+  }
+}
+```
+
+3. 在任意视图文件中使用切换主题模式
+
+```vue
+<!-- src/pages/*.vue -->
+
+<script setup lang="ts">
+import { useTheme } from '@/composables/useTheme'
+
+const { theme, toggleTheme } = useTheme()
+</script>
+
+<template>
+  <button @click="toggleTheme">
+    切换主题，当前模式：{{ theme }}
+  </button>
+</template>
+```
+
 ## Attributes
 
 | 参数       | 说明                                             | 类型   | 可选值         | 默认值 | 最低版本 |