fix(site): add smb design-config support

Author: shenjunjian

examples/sites/package.json

@@ -25,6 +25,7 @@
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-design-aurora": "workspace:~",
     "@opentiny/vue-design-saas": "workspace:~",
+    "@opentiny/vue-design-smb": "workspace:~",
     "@opentiny/vue-directive": "workspace:~",
     "@opentiny/vue-hooks": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",

examples/sites/src/tools/useTheme.js

@@ -1,6 +1,7 @@
 import { watch, computed } from 'vue'
 import { hooks } from '@opentiny/vue-common'
 import designSaasConfig from '@opentiny/vue-design-saas'
+import designSMBConfig from '@opentiny/vue-design-smb'
 import { router } from '@/router'
 import { appData } from './appData'
 import { THEME_ROUTE_MAP, CURRENT_THEME_KEY, DEFAULT_THEME, AURORA_THEME, SMB_THEME, INFINITY_THEME } from '../const'
@@ -71,7 +72,11 @@ const designConfig = computed(() => {
   if (import.meta.env.VITE_TINY_THEME === 'saas') {
     return designSaasConfig
   }
-  return designConfigMap[currentThemeKey.value]
+  if (router.currentRoute.value.params.theme === 'smb-theme') {
+    return designSMBConfig
+  }
+
+  return {}
 })
 
 const changeTheme = (themeKey) => {

packages/vue-common/src/index.ts

@@ -174,7 +174,9 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon
   const render = typeof props.tiny_renderless === 'function' ? props.tiny_renderless : renderless
 
   // 获取组件级配置和全局配置（inject需要带有默认值，否则控制台会报警告）
-  const globalDesignConfig: DesignConfig = customDesignConfig.designConfig || hooks.inject(design.configKey, {})
+  let globalDesignConfig: DesignConfig = customDesignConfig.designConfig || hooks.inject(design.configKey, {})
+  // globalDesignConfig 可能是响应式对象，比如 computed
+  globalDesignConfig = globalDesignConfig.value || globalDesignConfig
   const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
 
   const utils = {

packages/vue/src/config-provider/src/index.vue

@@ -58,8 +58,8 @@ export default defineComponent({
       })
   },
   setup(props, { slots }) {
-    const { direction } = hooks.toRefs(props)
-    provideDesignConfig(props.design)
+    const { direction, design } = hooks.toRefs(props)
+    provideDesignConfig(design)
     const isRTL = hooks.computed(() => direction.value === 'rtl')
     const cssVar = hooks.computed(() => {
       return {