diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/constant/PageDesignConstant.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/constant/PageDesignConstant.java index b3de6ac1..44eb522b 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/constant/PageDesignConstant.java +++ b/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"; + /** * 跑马灯 */ diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ThemeSelectChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ThemeSelectChart.java new file mode 100644 index 00000000..45bf8fff --- /dev/null +++ b/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; + + } + +} diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ThemeSwitcherChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ThemeSwitcherChart.java index ddb4e20e..bb69b831 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ThemeSwitcherChart.java +++ b/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; + } } diff --git a/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue b/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue index f4e2c8a3..f48cda9c 100644 --- a/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue +++ b/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue @@ -3,9 +3,9 @@ class="bs-design-wrap theme-switcher-wrap" :class="`bs-theme-switcher-${customTheme}`" > -
- 切换主题 -
+ + + 明亮 暗黑 @@ -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); } } diff --git a/data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue b/data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue index 504b0c86..57594d8b 100644 --- a/data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue +++ b/data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue @@ -13,35 +13,42 @@ :rules="rules" class="bs-el-form" > - 标题 -
+ 位置 +
+ +
+ 基础 +
- + + + -
- 位置 -
-