From 19a57d94ee73011915a6312b28babcf781a594ee Mon Sep 17 00:00:00 2001
From: Cano1997 <1978141412@qq.com>
Date: Tue, 14 Oct 2025 11:52:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E7=BB=84=E4=BB=B6=E8=AF=86=E5=88=AB=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=8F=92=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  4 ++
 .../custom-theme/custom-theme.controller.ts   | 37 +++++++++++++++++++
 src/common/custom-theme/custom-theme.tsx      | 28 ++++++--------
 3 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 815b2494..7534851d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- 自定义主题组件识别颜色主题插件，支持插件主题切换
+
 ## [0.7.41-alpha.31] - 2025-10-11
 
 ### Added
diff --git a/src/common/custom-theme/custom-theme.controller.ts b/src/common/custom-theme/custom-theme.controller.ts
index de9acd18..b289092a 100644
--- a/src/common/custom-theme/custom-theme.controller.ts
+++ b/src/common/custom-theme/custom-theme.controller.ts
@@ -1,5 +1,6 @@
 import { clone } from 'ramda';
 import { reactive } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
 import { predefineThemeVars } from './custom-theme-model';
 
 /**
@@ -100,6 +101,42 @@ export class CustomThemeController {
     this.model.forEach((item: IData) => {
       this.initModelMapping(item);
     });
+    const pluginTheme = ibiz.util.theme.pluginTheme;
+    pluginTheme.forEach(item => {
+      const ns = useNamespace('custom-theme');
+      const color = this.getRootCssVar(
+        ns.cssVarName('color-primary'),
+        item.themeTag!,
+      );
+      this.predefineType.push({
+        codeName: item.themeTag,
+        label: item.themeTag,
+        color,
+        isCustom: true,
+      });
+    });
+  }
+
+  /**
+   * @description 获取根节点样式变量
+   * @protected
+   * @param {string} name
+   * @param {string} themeTag
+   * @returns {*}  {(string | number)}
+   * @memberof CustomThemeController
+   */
+  protected getRootCssVar(name: string, themeTag: string): string | number {
+    const root = document.documentElement;
+    if (root.classList.contains(themeTag)) {
+      return this.getCssVar(name);
+    }
+    const className = root.className;
+    // 先改变根节点样式名获取变量后再还原
+    root.className = themeTag;
+    const color = this.getCssVar(name);
+    // 还原
+    root.className = className;
+    return color;
   }
 
   /**
diff --git a/src/common/custom-theme/custom-theme.tsx b/src/common/custom-theme/custom-theme.tsx
index adcd889b..15327ab1 100644
--- a/src/common/custom-theme/custom-theme.tsx
+++ b/src/common/custom-theme/custom-theme.tsx
@@ -255,6 +255,13 @@ export const CustomTheme = defineComponent({
       vue.$forceUpdate();
     };
 
+    const getVarLabel = (item: IData) => {
+      if (item.labelLang) {
+        return ibiz.i18n.t(`control.common.customTheme.${item.labelLang}`);
+      }
+      return item.label;
+    };
+
     // 预置颜色
     const predefineColors = ref([
       'rgb(241, 4, 4)',
@@ -332,9 +339,7 @@ export const CustomTheme = defineComponent({
       }
       return (
         <div class={ns.b('item')}>
-          <div class={ns.be('item', 'caption')}>
-            {ibiz.i18n.t(`control.common.customTheme.${item.labelLang}`)}
-          </div>
+          <div class={ns.be('item', 'caption')}>{getVarLabel(item)}</div>
           <div class={ns.be('item', 'content')}>
             {item.vars.map((data: IData) => {
               let content = renderColorPicker(data);
@@ -351,9 +356,7 @@ export const CustomTheme = defineComponent({
                       ),
                     )}
                   >
-                    {ibiz.i18n.t(
-                      `control.common.customTheme.${data.labelLang}`,
-                    )}
+                    {getVarLabel(data)}
                   </span>
                   {content}
                 </div>
@@ -431,11 +434,7 @@ export const CustomTheme = defineComponent({
                 return (
                   <el-button
                     color={item.color}
-                    title={showTitle(
-                      ibiz.i18n.t(
-                        `control.common.customTheme.${item.labelLang}`,
-                      ),
-                    )}
+                    title={showTitle(getVarLabel(item))}
                     onClick={() => {
                       handleThemeChange(item.codeName);
                     }}
@@ -476,12 +475,7 @@ export const CustomTheme = defineComponent({
             <el-tabs v-model={activeTab.value}>
               {c.model.map((item: IData, index: number) => {
                 return (
-                  <el-tab-pane
-                    name={index}
-                    label={ibiz.i18n.t(
-                      `control.common.customTheme.${item.labelLang}`,
-                    )}
-                  >
+                  <el-tab-pane name={index} label={getVarLabel(item)}>
                     {renderItem(item)}
                   </el-tab-pane>
                 );
-- 
Gitee