Merge branch 'master' of github.com:gcpaas/DataRoom

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/constant/PageDesignConstant.java

@@ -137,6 +137,11 @@ public interface PageDesignConstant {
              */
             String THEME_SWITCHER = "themeSwitcher";
 
+            /**
+             * 主题选择器
+             */
+            String THEME_SELECT = "themeSelect";
+
             /**
              * 跑马灯
              */

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ThemeSelectChart.java

@@ -0,0 +1,41 @@
+package com.gccloud.dataroom.core.module.chart.components;
+
+import com.gccloud.dataroom.core.constant.PageDesignConstant;
+import com.gccloud.dataroom.core.module.chart.bean.Chart;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+
+/**
+ * 主题选择器
+ * @author hongyang
+ * @version 1.0
+ * @date 2023/8/24 17:03
+ */
+@Data
+public class ThemeSelectChart extends Chart{
+
+
+    @ApiModelProperty(notes = "类型")
+    private String type = PageDesignConstant.BigScreen.Type.THEME_SELECT;
+
+    @ApiModelProperty(notes = "个性化")
+    private Customize customize = new Customize();
+
+    @Data
+    public static class Customize {
+
+        @ApiModelProperty(notes = "标题")
+        private String title;
+
+        @ApiModelProperty(notes = "字体大小")
+        private Integer fontSize = 20;
+
+        @ApiModelProperty(notes = "字体权重")
+        private Integer fontWeight = 700;
+
+        @ApiModelProperty(notes = "字体颜色")
+        private String color;
+
+    }
+
+}

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ThemeSwitcherChart.java

@@ -35,6 +35,12 @@ public class ThemeSwitcherChart extends Chart{
         @ApiModelProperty(notes = "字体颜色")
         private String color;
 
+        @ApiModelProperty(notes = "单选框字体激活状态")
+        private String activeColor;
+
+        @ApiModelProperty(notes = "单选框字体非激活状态")
+        private String inactiveColor;
+
     }
 
 }

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

@@ -3,9 +3,9 @@
     class="bs-design-wrap theme-switcher-wrap"
     :class="`bs-theme-switcher-${customTheme}`"
   >
-    <div class="label-box">
-      切换主题
-    </div>
+    <!--    <div class="label-box">-->
+    <!--      切换主题-->
+    <!--    </div>-->
     <el-radio-group
       v-model="pageInfo.pageConfig.customTheme"
       size="medium "
@@ -13,14 +13,15 @@
       @change="handleChange"
     >
       <el-radio
-        border
         label="light"
+        style="color: red!important;"
+        :style="{color:config.customize.inactiveColor}"
       >
         明亮
       </el-radio>
       <el-radio
-        border
         label="dark"
+        :style="{color:config.customize.inactiveColor}"
       >
         暗黑
       </el-radio>
@@ -31,11 +32,12 @@
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
 import { themeToSetting } from 'data-room-ui/js/utils/themeFormatting'
 import { mapMutations, mapState } from 'vuex'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 
 export default {
   name: 'ThemeSwitcher',
   components: {},
-  mixins: [paramsMixins],
+  mixins: [paramsMixins, refreshComponentMixin],
   props: {
     // 卡片的属性
     config: {
@@ -56,16 +58,20 @@ export default {
     }
   },
   watch: {
+    'config.customize.activeColor': {
+      handler (val) {
+        document.documentElement.style.setProperty('--radio-label-color', val)
+      },
+      immediate: true
+    }
   },
   mounted () {
+    document.documentElement.style.setProperty('--radio-label-color', this.config.customize.activeColor)
   },
   methods: {
     ...mapMutations({
       changePageInfo: 'bigScreen/changePageInfo'
     }),
-    // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
-    changeStyle (config) {
-    },
     // 点击切换主题
     handleChange (val) {
       const pageInfo = this.pageInfo
@@ -97,6 +103,7 @@ export default {
     width: 100%;;
     display: flex;
     align-items: center;
+    justify-content: center;
     flex-wrap: nowrap;
     color: #fff;
     .label-box{
@@ -104,13 +111,21 @@ export default {
       margin-right: 10px;
       font-size: 14px;
     }
-    .el-radio.is-checked {
-      color: #00a0e9; /* 修改激活状态下的字体颜色 */
+    //.el-radio.is-checked {
+    //  color: red; /* 修改激活状态下的字体颜色 */
+    //}
+    //
+    ///* 修改未激活状态下的字体颜色 */
+    //.el-radio:not(.is-checked) {
+    //  color: #fff; /* 修改未激活状态下的字体颜色 */
+    //}
+    /deep/ .el-radio__input.is-checked+.el-radio__label {
+      /* 使用 CSS 变量来设置字体颜色 */
+      color: var(--radio-label-color);
     }
-
-    /* 修改未激活状态下的字体颜色 */
-    .el-radio:not(.is-checked) {
-      color: #fff; /* 修改未激活状态下的字体颜色 */
+    /deep/ .el-radio__input.is-checked .el-radio__inner{
+      background: var(--radio-label-color);
+      border-color: var(--radio-label-color);
     }
   }
 </style>

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

@@ -13,35 +13,42 @@
       :rules="rules"
       class="bs-el-form"
     >
-      <SettingTitle>标题</SettingTitle>
-      <div class="bs-setting-wrap">
+      <SettingTitle>位置</SettingTitle>
+      <div class="lc-field-body">
+        <PosWhSetting :config="config" />
+      </div>
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
         <el-form-item
-          label="标题"
+          label="激活颜色"
           label-width="100px"
-          prop="title"
         >
-          <el-input
-            v-model="config.customize.title"
-            placeholder="请输入标题"
-            clearable
+          <el-color-picker
+            v-model="config.customize.activeColor"
+            popper-class="bs-el-color-picker"
+            class="bs-el-color-picker"
+          />
+        </el-form-item>
+        <el-form-item
+          label="非激活颜色"
+          label-width="100px"
+        >
+          <el-color-picker
+            v-model="config.customize.inactiveColor"
+            popper-class="bs-el-color-picker"
+            class="bs-el-color-picker"
           />
         </el-form-item>
-      </div>
-      <SettingTitle>位置</SettingTitle>
-      <div class="lc-field-body">
-        <PosWhSetting :config="config" />
       </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-room-ui/packages/BasicComponents/ThemeSwitcher/settingConfig.js

@@ -21,10 +21,8 @@ const customConfig = {
     version: '2023071001'
   },
   customize: {
-    title: '主题切换',
-    fontSize: 20,
-    fontWeight: 700,
-    color: 'left,#ffffff,#ffffff'
+    activeColor: '#007aff', // 单选框字体激活状态
+    inactiveColor: '#bcc9d4'// 单选框字体非激活状态
   }
 
 }