feat(components): 支持动态配置主题色

src/components/AntdConfig.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed, provide, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStyleTag } from '@vueuse/core';
 import { theme } from 'ant-design-vue';
@@ -8,19 +8,26 @@ import zhCN from 'ant-design-vue/es/locale/zh_CN';
 
 import { generateThemeCSSVar } from '@/utils';
 import { LanguageType } from '@/constants';
+import { SET_COLOR_PRIMARY } from '@/constants/inject-key';
 
 import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
 
 import 'dayjs/locale/zh-cn';
 
+const colorPrimary = ref('#32BAC0');
+
 const themeConfig = computed<ThemeConfig>(() => {
   return {
     token: {
-      colorPrimary: '#32BAC0',
+      colorPrimary: colorPrimary.value,
     },
   };
 });
 
+const setColorPrimary = (color: string) => {
+  colorPrimary.value = color;
+};
+
 const { locale: language } = useI18n();
 
 const locale = computed(() => {
@@ -33,6 +40,8 @@ const { token } = theme.useToken();
 watch(token, () => {
   css.value = generateThemeCSSVar(token.value, 'antd');
 });
+
+provide(SET_COLOR_PRIMARY, setColorPrimary);
 </script>
 
 <template>

src/constants/inject-key.ts

@@ -1,5 +1,7 @@
 import type { InjectionKey } from 'vue';
 
+export const SET_COLOR_PRIMARY: InjectionKey<(color: string) => void> = Symbol('setColorPrimary');
+
 export const IS_USED_IN_MODAL_GUIDANCE: InjectionKey<boolean> = Symbol('isUsedInModalGuidance');
 
 export const CLOSE_MODAL_GUIDANCE: InjectionKey<() => void> = Symbol('closeModalGuidance');