feat:修改主题组件属性配置

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>
@@ -56,8 +57,15 @@ 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({
@@ -97,6 +105,7 @@ export default {
     width: 100%;;
     display: flex;
     align-items: center;
+    justify-content: center;
     flex-wrap: nowrap;
     color: #fff;
     .label-box{
@@ -104,13 +113,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: 'red', // 单选框字体激活状态
+    inactiveColor: '#bcc9d4'// 单选框字体非激活状态
   }
 
 }