fix: fix change theme error when open playground (#2681)

Author: zzcr

examples/sites/playground/App.vue

@@ -11,7 +11,7 @@ import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
-const VERSION = 'tiny-vue-version-3.19'
+const VERSION = 'tiny-vue-version-3.20'
 const NOTIFY_KEY = 'tiny-vue-playground-notify'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
@@ -83,7 +83,7 @@ const createImportMap = (version) => {
     '@opentiny/vue-renderless/': `${cdnHost}/@opentiny/vue-renderless${versionDelimiter}${version}/${fileDelimiter}`,
     'sortablejs': `${cdnHost}/sortablejs${versionDelimiter}1.15.0/${fileDelimiter}modular/sortable.esm.js`
   }
-  if (['aurora', 'saas'].includes(tinyTheme)) {
+  if (['aurora', 'saas', 'smb'].includes(tinyTheme)) {
     imports[`@opentiny/vue-design-${tinyTheme}`] =
       `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
   }
@@ -143,7 +143,7 @@ const state = reactive({
 
 const designThemeMap = {
   aurora: 'tinyAuroraTheme',
-  infinity: 'tinyInfinityTheme'
+  old: 'tinyOldTheme'
 }
 
 function setTinyDesign() {
@@ -154,16 +154,16 @@ function setTinyDesign() {
     useCode += 'app.provide("TinyMode", "mobile-first");\n'
   }
 
-  if (['aurora', 'saas'].includes(tinyTheme)) {
+  if (['aurora', 'saas', 'smb'].includes(tinyTheme)) {
     importCode += `import designConfig from '@opentiny/vue-design-${tinyTheme}';
       import { design } from '@opentiny/vue-common';\n`
     useCode += 'app.provide(design.configKey, designConfig);\n'
   }
 
-  if (['aurora', 'infinity'].includes(tinyTheme)) {
+  if (['aurora', 'old'].includes(tinyTheme)) {
     const designTheme = designThemeMap[tinyTheme]
     importCode += `import TinyThemeTool from '@opentiny/vue-theme/theme-tool';
-      import { ${designTheme} } from '@opentiny/vue-theme/theme';\n`
+      import ${designTheme} from '@opentiny/vue-theme/${tinyTheme}-theme-index.js';\n`
     useCode += `const theme = new TinyThemeTool(${designTheme});\n`
   }
 

examples/sites/src/const.ts

@@ -1,3 +1,5 @@
+import { tinyOldTheme, tinyAuroraTheme } from '@opentiny/vue-theme/theme-tool'
+
 // localStorage中保存语言的key
 export const LANG_KEY = '_lang'
 // localStorage中保存语言的value
@@ -12,17 +14,17 @@ export const LANG_PATH_MAP = {
 export const CURRENT_THEME_KEY = 'tiny-current-theme'
 
 // 主题
-export const DEFAULT_THEME = 'tiny-default-theme'
-export const AURORA_THEME = 'tiny-aurora-theme'
-export const SMB_THEME = 'tiny-smb-theme'
-export const INFINITY_THEME = 'tiny-infinity-theme'
+export const DEFAULT_THEME = 'os-theme'
+export const AURORA_THEME = 'aurora-theme'
+export const SMB_THEME = 'smb-theme'
+export const OLD_THEME = 'old-theme'
 
-// 主题对应路由参数映射表
-export const THEME_ROUTE_MAP = {
-  [DEFAULT_THEME]: 'os-theme',
-  [AURORA_THEME]: 'aurora-theme',
-  [SMB_THEME]: 'smb-theme',
-  [INFINITY_THEME]: 'infinity-theme'
+// 主题工具导出主题变量和主题的映射关系
+export const themeToolValuesMap = {
+  [DEFAULT_THEME]: '',
+  [AURORA_THEME]: tinyAuroraTheme,
+  [SMB_THEME]: '',
+  [OLD_THEME]: tinyOldTheme
 }
 
 /**

examples/sites/src/router.js

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Layout from '@/views/layout/layout.vue'
-import { LANG_PATH_MAP, ZH_CN_LANG, THEME_ROUTE_MAP, DEFAULT_THEME } from './const'
+import { LANG_PATH_MAP, ZH_CN_LANG, DEFAULT_THEME } from './const'
 
 const Components = () => import('@/views/components/components.vue')
 const Docs = () => import('@/views/docs/docs.vue')
@@ -35,8 +35,7 @@ let routes = [
     path: '/:pathMatch(.*)*',
     redirect: () => {
       const langPath = LANG_PATH_MAP[ZH_CN_LANG]
-      const theme = THEME_ROUTE_MAP[DEFAULT_THEME]
-      return { path: `${context}${langPath}/${theme}/overview` }
+      return { path: `${context}${langPath}/${DEFAULT_THEME}/overview` }
     }
   }
 ]

examples/sites/src/tools/useTheme.js

@@ -4,62 +4,44 @@ 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'
+import { CURRENT_THEME_KEY, DEFAULT_THEME, AURORA_THEME, OLD_THEME, themeToolValuesMap } from '../const'
 import glaciers from '@/assets/images/glaciers.png'
 import glaciersIcon from '@/assets/images/glaciers-icon.png'
 
-import infinitely from '@/assets/images/Infinitely.png'
-import infinitelyIcon from '@/assets/images/Infinitely-icon.png'
-
 import oceanic from '@/assets/images/oceanic.png'
 import oceanicIcon from '@/assets/images/oceanic-icon.png'
 
 import starrySky from '@/assets/images/starry-sky.png'
 import starrySkyIcon from '@/assets/images/starry-sky-icon.png'
-import TinyThemeTool, { tinyOldTheme, tinyAuroraTheme } from '@opentiny/vue-theme/theme-tool'
+import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
 
 const isEn = appData.lang === 'enUS'
 
 const themeData = [
   {
     value: [DEFAULT_THEME],
-    label: isEn ? 'Default Theme' : '冰川主题',
-    tips: isEn ? 'Accurate, Efficient, Distinct' : '精准、高效、清晰',
-    icon: glaciersIcon,
-    bgImage: glaciers
-  },
-  {
-    value: [SMB_THEME],
     label: isEn ? 'Star Theme' : '星空主题',
     tips: isEn ? 'Leading, Innovative, Reliable' : '领先、创新、信赖',
     icon: starrySkyIcon,
     bgImage: starrySky
   },
+  {
+    value: [OLD_THEME],
+    label: isEn ? 'Default Theme' : '冰川主题',
+    tips: isEn ? 'Accurate, Efficient, Distinct' : '精准、高效、清晰',
+    icon: glaciersIcon,
+    bgImage: glaciers
+  },
   {
     value: [AURORA_THEME],
     label: isEn ? 'Ocean Theme' : '海洋主题',
     tips: isEn ? 'Simple, Agile, Delightful' : '简约、敏捷、愉悦',
     icon: oceanicIcon,
     bgImage: oceanic
-  },
-  {
-    value: [INFINITY_THEME],
-    label: isEn ? 'Infinity Theme' : '无限主题',
-    tips: isEn ? 'Creative, Scientific, Efficient' : '创造、科学、高效',
-    icon: infinitelyIcon,
-    bgImage: infinitely
   }
 ]
 
-const designConfigMap = {
-  [DEFAULT_THEME]: {},
-  [INFINITY_THEME]: {},
-  [AURORA_THEME]: {},
-  [SMB_THEME]: {}
-}
-
-const defaultThemeKey = DEFAULT_THEME
-const currentThemeKey = hooks.ref(defaultThemeKey)
+const currentThemeKey = hooks.ref(DEFAULT_THEME)
 
 watch(
   () => currentThemeKey.value,
@@ -82,7 +64,7 @@ const designConfig = computed(() => {
 const changeTheme = (themeKey) => {
   router.push({
     params: {
-      theme: THEME_ROUTE_MAP[themeKey]
+      theme: themeKey
     },
     hash: router?.currentRoute.value.hash
   })
@@ -101,14 +83,10 @@ const watchRoute = () => {
   watch(
     () => router.currentRoute.value.params.theme,
     (val) => {
-      if (!loadedTheme && val === 'old-theme') {
-        const themeTool = new TinyThemeTool()
-        themeTool.changeTheme(tinyOldTheme)
-        loadedTheme = true
-      }
-      if (!loadedTheme && val === 'aurora-theme') {
+      if (!loadedTheme && themeToolValuesMap[val]) {
+        currentThemeKey.value = val
         const themeTool = new TinyThemeTool()
-        themeTool.changeTheme(tinyAuroraTheme)
+        themeTool.changeTheme(themeToolValuesMap[val])
         loadedTheme = true
       }
     }
@@ -122,6 +100,6 @@ export default function useTheme() {
     changeTheme,
     currentThemeKey,
     designConfig,
-    defaultTheme: THEME_ROUTE_MAP[defaultThemeKey]
+    defaultTheme: DEFAULT_THEME
   }
 }

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

@@ -190,7 +190,7 @@ export default defineComponent({
       },
       openPlayground(demo, open = true) {
         const cmpId = router.currentRoute.value.params.cmpId
-        const tinyTheme = templateModeState.isSaas ? 'saas' : currentThemeKey.value.split('-')[1]
+        const tinyTheme = templateModeState.isSaas ? 'saas' : currentThemeKey.value.split('-')[0]
         const openModeQuery = open ? '' : '&openMode=preview'
         // TODO: 目前mf只有Options写法，后续再放开compositon
         const url = `${import.meta.env.VITE_PLAYGROUND_URL}?cmpId=${cmpId}&fileName=${demo.codeFiles[0]}&apiMode=${