fix(theme-generator): some styles missing from exported tcloud CSS

packages/theme-generator/src/common/themes/core.js

@@ -3,7 +3,7 @@ import { Color } from 'tvision-color';
 
 import GENERATOR_VARIABLES from '!raw-loader!./built-in/css/vars.css';
 
-import { appendStyleSheet, clearLocalItem, downloadFile, extractRootContent, setUpModeObserver } from '../utils';
+import { appendStyleSheet, clearLocalItem, downloadFile, parseRootCss, setUpModeObserver } from '../utils';
 
 import {
   MOBILE_RECOMMEND_THEMES,
@@ -94,9 +94,9 @@ export function exportCustomStyleSheet(device) {
   const darkStyleSheet = document.getElementById(CUSTOM_DARK_ID);
   const extraStyleSheet = document.getElementById(CUSTOM_EXTRA_ID);
 
-  const cssString = extractRootContent(styleSheet?.textContent);
-  const darkCssString = extractRootContent(darkStyleSheet?.textContent);
-  const extraCssString = extractRootContent(extraStyleSheet?.textContent);
+  const { rootContent: cssString } = parseRootCss(styleSheet?.textContent);
+  const { rootContent: darkCssString } = parseRootCss(darkStyleSheet?.textContent);
+  const { rootContent: extraCssString, restContent: extraRestCssString } = parseRootCss(extraStyleSheet?.textContent);
 
   let finalCssString;
   if (isUniApp(device)) {
@@ -123,6 +123,7 @@ export function exportCustomStyleSheet(device) {
       page, .page {
         ${extraCssString}
       }
+      ${extraRestCssString}
     `;
   } else if (isMiniProgram(device)) {
     finalCssString = `
@@ -139,6 +140,7 @@ export function exportCustomStyleSheet(device) {
       page, .page {
         ${extraCssString}
       }
+      ${extraRestCssString}
     `;
   } else {
     finalCssString = `
@@ -151,6 +153,7 @@ export function exportCustomStyleSheet(device) {
       :root {
         ${extraCssString}
       }
+      ${extraRestCssString}
     `;
   }
 

packages/theme-generator/src/common/themes/iframe.js

@@ -1,4 +1,4 @@
-import { extractRootContent, getThemeMode, setUpModeObserver } from '../utils';
+import { getThemeMode, parseRootCss, setUpModeObserver } from '../utils';
 import { CUSTOM_DARK_ID, CUSTOM_THEME_ID, isMiniProgram, isMobile, isUniApp } from './core';
 
 /* ----- 同步亮暗模式 -----  */
@@ -23,7 +23,7 @@ function handleMiniProgramModeChange(iframe, mode, uniapp = false) {
     const style = document.createElement('style');
     style.id = currentModeId;
 
-    const cssString = extractRootContent(themeStyle.innerText);
+    const { rootContent: cssString } = parseRootCss(themeStyle.innerText);
     const selector = uniapp ? 'uni-page-body' : 'body';
     style.textContent = `${selector} {\n${cssString}\n}`;
 
@@ -56,7 +56,8 @@ function handleMobileTokenChange(iframe, styleElement) {
 
 function handleMiniProgramTokenChange(iframe, styleElement, uniapp = false) {
   const selector = uniapp ? 'uni-page-body' : 'body';
-  const updatedCss = `${selector} {\n${extractRootContent(styleElement.innerText)}\n}`;
+  const { rootContent } = parseRootCss(styleElement.innerText);
+  const updatedCss = `${selector} {\n${rootContent}\n}`;
 
   const updatedId = styleElement.id;
   const iframeStyleElement = iframe.contentDocument.getElementById(updatedId);

packages/theme-generator/src/common/themes/store.js

@@ -11,6 +11,10 @@ export const themeStore = Vue.observable({
   updateDevice(device) {
     this.device = device;
     this.theme = getInitialTheme(device);
+    // 若用户未自定义过主题色，brandColor 跟随当前主题
+    if (!getOptionFromLocal('color')) {
+      this.brandColor = this.theme.value;
+    }
   },
   updateTheme(theme) {
     this.theme = theme;

packages/theme-generator/src/common/utils/index.js

@@ -83,12 +83,21 @@ export function downloadFile(blob, fileName) {
 }
 
 /**
- * 从 CSS 文本中提取 `:root` 中的内容
+ * 解析 CSS 文本，拆分出 `:root` 中的变量内容与其余的选择器规则
  */
-export function extractRootContent(cssText) {
-  // 匹配 {} 内的内容
-  const match = cssText.match(/{([^}]*)}/);
-  return match ? match[1].trim() : '';
+export function parseRootCss(cssText) {
+  if (!cssText) return { rootContent: '', restContent: '' };
+
+  const rootBlockMatch = cssText.match(/:root\s*\{([^}]*)\}/);
+
+  if (!rootBlockMatch) {
+    return { rootContent: '', restContent: cssText.trim() };
+  }
+
+  const rootContent = rootBlockMatch[1].trim();
+  const restContent = cssText.replace(rootBlockMatch[0], '').trim();
+
+  return { rootContent, restContent };
 }
 
 /**