From 42ad126d9e6d90df6ef13ba6f4aa8d697bef2c49 Mon Sep 17 00:00:00 2001
From: "liu.shiyi" <liu.shiyi@ustcinfo.com>
Date: Mon, 28 Aug 2023 17:23:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=B8=9A=E5=8A=A1=E7=BB=84=E5=8A=A0?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=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

---
 .../packages/RemoteComponents/index.vue       | 21 +++++++++++++++++++
 data-room-ui/packages/js/store/actions.js     | 11 +++++-----
 .../packages/js/utils/themeFormatting.js      |  2 +-
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/data-room-ui/packages/RemoteComponents/index.vue b/data-room-ui/packages/RemoteComponents/index.vue
index 2f222c96..093c14b9 100644
--- a/data-room-ui/packages/RemoteComponents/index.vue
+++ b/data-room-ui/packages/RemoteComponents/index.vue
@@ -19,6 +19,8 @@ import remoteVueLoader from 'remote-vue-loader'
 import { mapMutations, mapState } from 'vuex'
 import innerRemoteComponents, { getRemoteComponents } from 'data-room-ui/RemoteComponents/remoteComponentsList'
 import { getBizComponentInfo } from 'data-room-ui/js/api/bigScreenApi'
+import {settingToTheme} from "data-room-ui/js/utils/themeFormatting";
+import _ from "lodash";
 export default {
   name: 'LcdpRemoteComponent',
   mixins: [linkageMixins, commonMixins],
@@ -43,6 +45,16 @@ export default {
       remoteComponent: null
     }
   },
+  watch: {
+    // 监听主题变化手动触发组件配置更新
+    'config.option.theme': {
+      handler (val) {
+        if (val) {
+          this.changeStyle(this.config)
+        }
+      }
+    }
+  },
   created () {
     this.getRemoteComponent()
   },
@@ -126,6 +138,9 @@ export default {
         ...option
       }
       this.config.setting = setting
+      // 获取到setting后将其转化为theme
+      this.config.theme = settingToTheme(this.config, this.customTheme)
+
       return {
         option,
         setting
@@ -183,6 +198,8 @@ export default {
     // 组件的样式改变，返回改变后的config
     changeStyle (config) {
       config = { ...this.config, ...config }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
       config = this.transformSettingToOption(config, 'custom')
       // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，
       const option = config.option
@@ -199,6 +216,10 @@ export default {
         this.chart.update(config.option)
       }
       this.changeChartConfig(config)
+      if (config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
+      // this.changeChartConfig(config)
       // 在this.$refs['remoteComponent' + config.code]这个实例里判断是否存在customStyle方法，如果存在则执行
       const componentInstance = this.$refs['remoteComponent' + config.code]
       if (componentInstance && componentInstance.$options.methods && componentInstance.$options.methods.customStyle) {
diff --git a/data-room-ui/packages/js/store/actions.js b/data-room-ui/packages/js/store/actions.js
index 58b4f906..e40bfa36 100644
--- a/data-room-ui/packages/js/store/actions.js
+++ b/data-room-ui/packages/js/store/actions.js
@@ -71,7 +71,6 @@ export function handleResData (data) {
   let originalConfig = {}
   pageInfo.chartList.forEach((chart) => {
     if (!['customComponent', 'remoteComponent'].includes(chart.type)) {
-      // TODO:一般组件也需要添加主题的兼容处理
       originalConfig = { option: { ...setModules[chart.type] }, ...dataModules[chart.type] }
       // 如果没有版本号，或者版本号修改了则需要进行旧数据兼容
       if ((!chart.version) || chart.version !== originalConfig.version) {
@@ -93,11 +92,11 @@ export function handleResData (data) {
           chart = compatibility(chart, originalConfig)
         }
       }
-      // 初始化时应该判断，是否存在theme配置，没有的话添加默认的两套主题，这是为了兼容旧组件
-      if (!chart.theme) {
-        chart.theme = settingToTheme(chart, 'dark')
-        chart.theme = settingToTheme(chart, 'light')
-      }
+    }
+    // 初始化时应该判断，是否存在theme配置，没有的话添加默认的两套主题，这是为了兼容旧组件
+    if (!chart.theme) {
+      chart.theme = settingToTheme(chart, 'dark')
+      chart.theme = settingToTheme(chart, 'light')
     }
     chart.key = chart.code
   })
diff --git a/data-room-ui/packages/js/utils/themeFormatting.js b/data-room-ui/packages/js/utils/themeFormatting.js
index af22728d..07697691 100644
--- a/data-room-ui/packages/js/utils/themeFormatting.js
+++ b/data-room-ui/packages/js/utils/themeFormatting.js
@@ -45,7 +45,7 @@ export function settingToTheme (config, type) {
     }
     return theme
   } else {
-    return {}
+    return config?.theme || {dark:{}, light:{}}
   }
 }
 // 将保存的theme主题设置（颜色）存放到chartList