fix: fix the error when starting the saas official website

packages/theme-saas/src/old-theme-index.js

@@ -0,0 +1,6 @@
+export default {
+  id: 'tiny-old-theme',
+  name: 'OldTheme',
+  cnName: '旧的主题',
+  css: ``
+}

packages/theme-saas/src/theme-tool.js

@@ -1,132 +1,40 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
+import tinyOldTheme from './old-theme-index.js'
 
-import definedComponents from './theme.config'
+export { tinyOldTheme }
 
 /**
- *  TinyVue主题切换类 负责CSS变量主题的装卸，主题元数据转换成主题数据
- *  使用示例：new TinyThemeTool(theme,'styleSheetId')
- *  @param {Object} theme 主题配置数据，结构如下：
- *  {
- *    id: 'tiny-infinity-theme',
- *    name: 'Infinity',
- *    cnName: '无限',
- *    data: {'ti-base-color': 'white'}
- *  }
- *  @param {String} styleSheetId style标签的id
+ * 动态切换文档或影子根节点的样式类
  */
-
 export default class TinyThemeTool {
-  // 当前主题
-  currentTheme
-
-  // 当前style标签元素
-  contentElement
-
-  // 当前style标签的id
-  styleSheetId
-
-  // 默认主题
-
-  defaultTheme = {
-    id: 'tiny-default-theme',
-    name: 'Default',
-    cnName: '默认',
-    data: {}
-  }
-
-  constructor(theme, styleSheetId = 'tinyThemeVariables') {
-    let currentTheme = theme
-    if (!theme) {
-      currentTheme = this.defaultTheme
+  constructor(theme) {
+    this.loaded = {} // 缓存已加载的样式
+    if (theme) {
+      this.changeTheme(theme)
     }
-    this.styleSheetId = styleSheetId
-    this.changeTheme(currentTheme)
   }
 
-  changeTheme(theme) {
-    let currentTheme = theme
-    if (typeof window === 'undefined' || typeof document === 'undefined') {
-      throw new TypeError('当前主题工具只支持浏览器环境')
-    }
-    if (!theme) {
-      currentTheme = this.defaultTheme
-    }
-    this.currentTheme = currentTheme
-    if (!this.contentElement) {
-      const styleElement = document.getElementById(this.styleSheetId)
-      if (styleElement) {
-        this.contentElement = styleElement
-      } else {
-        this.contentElement = document.createElement('style')
-        this.contentElement.id = this.styleSheetId
-        document.head.appendChild(this.contentElement)
-      }
+  changeTheme(theme, target = document) {
+    let loadedSheet = this.loaded[target]
+    if (!loadedSheet) {
+      loadedSheet = new CSSStyleSheet()
+      target.adoptedStyleSheets = [...target.adoptedStyleSheets, loadedSheet]
+      this.loaded[target] = loadedSheet
     }
-    this.contentElement.textContent = this.formatCSSVariables(currentTheme.data)
 
-    this.contentElement.setAttribute('tiny-theme', this.currentTheme.id)
-  }
+    if (theme && (theme.data || theme.css)) {
+      let cssContent = ''
+      if (theme.data && typeof theme.data === 'object') {
+        cssContent = Object.keys(theme.data)
+          .map((key) => `--${key}: ${theme.data[key]}; `)
+          .join('')
 
-  // 通过 `组件css变量`，来推导出组件名： 从 ti-checkbox-button-bg-color， 推导出 checkbox-button
-  findClassName(name) {
-    const compNameList = name.split('-')
-    if (compNameList.length < 2) {
-      return false
-    }
-    const compLength = definedComponents.length
-    let compName = ''
-    for (let i = 0; i < compLength; i++) {
-      // 先试试是不是双段式的组件名： 比如dialog-box 这种
-      if (definedComponents[i] === `${compNameList[1]}-${compNameList[2]}`) {
-        compName = `tiny-${definedComponents[i]}`
-        break
+        cssContent = `:root{${cssContent}}`
       }
-    }
-    // 不是双段的组件，则取第一位为组件名
-    if (!compName) {
-      compName = `tiny-${compNameList[1]}`
-    }
-
-    // 提高权重，促使主题变换成功
-    compName = `${compName}[class*=tiny]`
-    return compName
-  }
-
-  formatCSSVariables(themeData) {
-    const componentsMap = {}
-    let rootCssVar = 'html:root {'
-    let componentsCssVar = ''
-
-    Object.keys(themeData).forEach((item) => {
-      const isBaseCssVar = item.startsWith('ti-base') || item.startsWith('ti-common')
-      if (isBaseCssVar) {
-        rootCssVar += `--${item}:${themeData[item]};`
-      } else {
-        const classkey = this.findClassName(item)
-        if (classkey) {
-          if (componentsMap[classkey]) {
-            componentsMap[classkey].push(`--${item}:${themeData[item]};`)
-          } else {
-            componentsMap[classkey] = [`--${item}:${themeData[item]};`]
-          }
-        }
+      if (theme.css && typeof theme.css === 'string') {
+        cssContent += theme.css
       }
-    })
 
-    Object.keys(componentsMap).forEach((item) => {
-      componentsCssVar += `.${item}{${componentsMap[item].join('')}}`
-    })
-
-    return `${rootCssVar}}${componentsCssVar}`
+      loadedSheet.replaceSync(cssContent)
+    }
   }
 }