fix(sites): change design config when change theme (#393)

* fix(sites): change design config when change theme

* fix(sites): fix dev:site script

examples/sites/index.html

@@ -21,7 +21,7 @@
 
     <script
       id="tinyui-design-common"
-      src="https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tinyui-design-common/1.0.5.20230714174408/tinyui-design-common.min.js"
+      src="https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/tinyui-design-common.min.js"
     ></script>
     <script type="module" src="./src/main.js"></script>
   </body>

examples/sites/src/App.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="hp100 of-hidden">
-    <router-view />
+    <tiny-config-provider :design="designConfig">
+      <router-view />
+    </tiny-config-provider>
   </div>
 </template>
 
 <script lang="jsx">
 import { defineComponent, reactive, computed, onMounted, toRefs } from 'vue'
+import { ConfigProvider } from '@opentiny/vue'
 import { appData } from './tools'
+import useTheme from './tools/useTheme'
 
 export default defineComponent({
   name: 'AppVue',
   props: [],
+  components: {
+    TinyConfigProvider: ConfigProvider
+  },
   setup() {
     onMounted(() => {
       // 加载header
@@ -25,8 +32,10 @@ export default defineComponent({
       })
       common.renderHeader()
     })
+    const { designConfig } = useTheme()
     return {
-      appData
+      appData,
+      designConfig
     }
   }
 })

examples/sites/src/tools/useTheme.js

@@ -1,8 +1,10 @@
-import { watch } from 'vue'
+import { watch, computed } from 'vue'
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
 import { tinyAuroraTheme, tinySmbTheme, tinyInfinityTheme } from '@opentiny/vue-theme/theme'
 import { hooks } from '@opentiny/vue-common'
 import { Notify } from '@opentiny/vue'
+import designSmbConfig from '@opentiny/vue-design-smb';
+import designAuroraConfig from '@opentiny/vue-design-aurora';
 import { appData } from './appData'
 
 const CURRENT_THEME_KEY = 'tiny-current-theme'
@@ -16,6 +18,12 @@ const themeData = [
   { value: 'tiny-smb-theme', label: isEn ? 'SMB Theme' : 'SMB 主题' }
 ]
 
+const designConfigMap = {
+  'tiny-default-theme': {},
+  'tiny-infinity-theme': {},
+  'tiny-aurora-theme': designAuroraConfig,
+  'tiny-smb-theme': designSmbConfig
+}
 let isShowTip = false
 function showTip() {
   Notify({
@@ -33,6 +41,9 @@ export default function useTheme() {
   const theme = new TinyThemeTool()
   const lastThemeKey = localStorage.getItem(CURRENT_THEME_KEY)
   const currThemeLabel = hooks.ref(lastThemeKey || 'tiny-default-theme')
+  const designConfig = computed(() => {
+    return designConfigMap[currThemeLabel.value]
+  })
 
   const THEME_MAP = {
     'tiny-aurora-theme': tinyAuroraTheme,
@@ -67,6 +78,7 @@ export default function useTheme() {
   return {
     getThemeData,
     changeTheme,
-    currThemeLabel
+    currThemeLabel,
+    designConfig
   }
 }

examples/sites/src/views/components/components.vue

@@ -324,6 +324,7 @@ export default defineComponent({
     text-align: left;
     font-size: 14px;
     line-height: 1.5;
+    word-break: break-word;
   }
   td {
     font-size: 14px;

package.json

@@ -43,8 +43,8 @@
     "dev2.7": "pnpm build:entry && pnpm build:component-cssvar && pnpm -C examples/vue2.7 dev",
     "dev2.7:saas": "pnpm build:entry && pnpm build:component-cssvar && pnpm -C examples/vue2.7 dev:saas",
     "// ---------- 启动官网文档 ----------": "",
-    "dev:site": "pnpm -C examples/sites start",
-    "dev:open-site": "pnpm -C examples/sites start:open",
+    "dev:site": "pnpm build:entry && pnpm build:component-cssvar && pnpm -C examples/sites start",
+    "dev:open-site": "pnpm build:entry && pnpm build:component-cssvar && pnpm -C examples/sites start:open",
     "build:entry": "pnpm -C internals/cli build:entry",
     "create:ui": "pnpm -C internals/cli create:ui",
     "// ---------- 创建saas图标ts文件----------": "",