feat:业务组加添加主题切换

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) {

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
   })

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