feat:初步实现主题切换组件及切换功能

data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="bs-design-wrap theme-switcher-wrap"
+    :class="`bs-theme-switcher-${customTheme}`"
+  >
+    <div class="label-box">
+      切换主题
+    </div>
+    <el-radio-group
+      v-model="pageInfo.pageConfig.customTheme"
+      size="medium "
+      class="theme-radio"
+      @change="handleChange"
+    >
+      <el-radio
+        border
+        label="light"
+      >
+        明亮
+      </el-radio>
+      <el-radio
+        border
+        label="dark"
+      >
+        暗黑
+      </el-radio>
+    </el-radio-group>
+  </div>
+</template>
+<script>
+import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
+import { themeToSetting } from 'data-room-ui/js/utils/themeFormatting'
+import { mapMutations, mapState } from 'vuex'
+
+export default {
+  name: 'ThemeSwitcher',
+  components: {},
+  mixins: [paramsMixins],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    ...mapState({
+      pageInfo: (state) => state.bigScreen.pageInfo
+    })
+  },
+  data () {
+    return {
+    }
+  },
+  watch: {
+  },
+  mounted () {
+  },
+  methods: {
+    ...mapMutations({
+      changePageInfo: 'bigScreen/changePageInfo'
+    }),
+    // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
+    changeStyle (config) {
+    },
+    handleChange (val) {
+      const pageInfo = this.pageInfo
+      pageInfo.chartList = themeToSetting(pageInfo.chartList, val, this)
+      this.changePageInfo(pageInfo)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .bs-design-wrap{
+    width: 100%;;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    color: #fff;
+    .label-box{
+      padding: 10px;
+      margin-right: 10px;
+      font-size: 14px;
+    }
+    .el-radio.is-checked {
+      color: #00a0e9; /* 修改激活状态下的字体颜色 */
+    }
+
+    /* 修改未激活状态下的字体颜色 */
+    .el-radio:not(.is-checked) {
+      color: #fff; /* 修改未激活状态下的字体颜色 */
+    }
+  }
+</style>

data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue

@@ -0,0 +1,111 @@
+<!--
+ * @description: 标题属性设置面板
+ * @Date: 2022-08-17 16:53:28
+ * @Author: shiyi
+-->
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      label-width="100px"
+      label-position="left"
+      :model="config"
+      :rules="rules"
+      class="bs-el-form"
+    >
+      <SettingTitle>标题</SettingTitle>
+      <div class="bs-setting-wrap">
+        <el-form-item
+          label="标题"
+          label-width="100px"
+          prop="title"
+        >
+          <el-input
+            v-model="config.customize.title"
+            placeholder="请输入标题"
+            clearable
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>位置</SettingTitle>
+      <div class="lc-field-body">
+        <PosWhSetting :config="config" />
+      </div>
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          label="标题字体大小"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.customize.fontSize"
+            placeholder="请输入标题字体大小"
+            clearable
+          >
+            <template slot="append">
+              px
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="标题字体权重"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.fontWeight"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体权重"
+          />
+        </el-form-item>
+        <TextGradient v-model="config.customize.color" />
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import TextGradient from 'data-room-ui/BigScreenDesign/RightSetting/TextGradient/index'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+export default {
+  name: 'ThemeSwitcherSetting',
+  components: {
+    TextGradient,
+    PosWhSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      rules: {
+        title: [
+          { required: true, message: '请输入标题', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "../../assets/style/settingWrap.scss";
+  .bs-setting-wrap{
+    padding-top: 16px;
+  }
+  .lc-field-body {
+    padding: 12px 16px;
+  }
+</style>

data-room-ui/packages/BasicComponents/ThemeSwitcher/settingConfig.js

@@ -0,0 +1,33 @@
+/*
+ * @Descripttion:
+ * @Author: liu.shiyi
+ * @Date: 2022-10-13 11:18:03
+ * @LastEditTime: 2022-10-13 13:55:11
+ */
+import { commonConfig } from 'data-room-ui/js/config'
+
+export const settingConfig = {
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'themeSwitcher',
+  root: {
+    version: '2023071001'
+  },
+  customize: {
+    title: '主题切换',
+    fontSize: 20,
+    fontWeight: 700,
+    color: 'left,#ffffff,#ffffff'
+  }
+
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

data-room-ui/packages/BigScreenDesign/RightSetting/ComponentBinding/index.vue

@@ -116,7 +116,7 @@ export default {
           })
         }
       })
-      layouts = layouts?.filter(item => item.code !== code && !['Tabs', 'titles', 'currentTime', 'timeCountDown', 'iframeChart', 'linkChart', 'carousel'].includes(item.type))
+      layouts = layouts?.filter(item => item.code !== code && !['Tabs', 'titles', 'currentTime', 'timeCountDown', 'iframeChart', 'linkChart', 'carousel', 'themeSwitcher'].includes(item.type))
       layouts = [...layouts, ...tabComponents]?.map(item => ({
         name: item.code,
         comment: item.title

data-room-ui/packages/PlotRender/index.vue

@@ -63,6 +63,16 @@ export default {
   created () {
     this.plotList = [...this.plotList, ...getCustomPlots()]
   },
+  watch: {
+    // 监听主题变化手动触发组件配置更新
+    'config.option.theme': {
+      handler (val) {
+        if (val) {
+          this.changeStyle(this.config)
+        }
+      }
+    }
+  },
   mounted () {
   },
   beforeDestroy () {

data-room-ui/packages/js/config/basicComponentsConfig.js

@@ -27,7 +27,8 @@ const typeList = [
   'screenScrollBoard',
   'video',
   'input',
-  'button'
+  'button',
+  'themeSwitcher'
 ]
 let basicConfigList = []
 basicConfigList = typeList.map((type) => {

data-room-ui/packages/js/utils/getComponentConfig.js

@@ -215,6 +215,18 @@ export default function getComponentConfig (type) {
         y: 0,
         type
       }
+    case 'themeSwitcher':
+      return {
+        name: '主题切换',
+        title: '主题切换',
+        icon: iconNames[14],
+        className: 'com.gccloud.dataroom.core.module.chart.components.ThemeSwitcherChart',
+        w: 500,
+        h: 100,
+        x: 0,
+        y: 0,
+        type
+      }
     default:
       return {}
   }

data-room-ui/packages/js/utils/themeFormatting.js

@@ -37,9 +37,6 @@ export function themeToSetting (chartList, type, _this) {
           }
         }
       }
-      if (_this && _this.$refs.Render?.$refs['RenderCard' + chart.code][0] && _this.$refs.Render.$refs['RenderCard' + chart.code][0].$refs[chart.code].changeStyle) {
-        _this.$refs.Render.$refs['RenderCard' + chart.code][0].$refs[chart.code].changeStyle(_.cloneDeep(chart))
-      }
     })
   }
   return chartList