Merge pull request #9742 from dataease/pr@dev-v2@feat_senior-color

feat(数据大屏): 数据大屏支持画布高级配色

core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue

@@ -2,9 +2,15 @@
   <div style="width: 100%; padding-bottom: 8px">
     <el-form label-position="top" style="width: 100%">
       <div style="width: 100%; padding: 16px 8px 0">
-        <el-col :span="12">
+        <el-col :span="24">
-          <el-form-item class="form-item" label="联动、钻取、调整的图标颜色">
+          <el-form-item
+            :effect="themes"
+            class="form-item"
+            :class="'form-item-' + themes"
+            label="联动、钻取、跳转的图标颜色"
+          >
             <el-color-picker
+              :effect="themes"
               v-model="seniorStyleSetting.linkageIconColor"
               :trigger-width="197"
               is-custom
@@ -13,10 +19,16 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="24">
-          <el-form-item class="form-item" label="钻取层级展示颜色">
+          <el-form-item
+            :effect="themes"
+            class="form-item"
+            :class="'form-item-' + themes"
+            label="钻取层级展示颜色"
+          >
             <el-color-picker
               v-model="seniorStyleSetting.drillLayerColor"
+              :effect="themes"
               :trigger-width="197"
               is-custom
               :predefine="state.predefineColors"
@@ -44,6 +56,12 @@ const seniorStyleSetting = computed<any>(() => {
   return dvMainStore.canvasStyleData.component.seniorStyleSetting
 })
 
+const props = defineProps({
+  themes: {
+    type: String,
+    default: 'light'
+  }
+})
 const state = reactive({
   fontSize: [],
   isSetting: false,
@@ -58,11 +76,6 @@ const themeChange = () => {
   snapshotStore.recordSnapshotCache('seniorStyleSettingSimpleSelector-themeChange')
 }
 
-const handleHorizontalChange = (type, horizontal = 'titleLayout') => {
-  seniorStyleSetting.value[horizontal] = type
-  themeChange(horizontal)
-}
-
 onMounted(() => {
   eventBus.on('onThemeColorChange', initForm)
 })
@@ -103,4 +116,12 @@ onMounted(() => {
     line-height: 20px;
   }
 }
+.form-item-dark {
+  :deep(.ed-form-item__label) {
+    color: #6a6a6a;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+}
 </style>

core/core-frontend/src/components/data-visualization/CanvasAttr.vue

@@ -10,6 +10,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import ComponentColorSelector from '@/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue'
 import OverallSetting from '@/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue'
 import CanvasBackground from '@/components/visualization/component-background/CanvasBackground.vue'
+import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore)
@@ -102,6 +103,14 @@ onMounted(() => {
       <el-collapse-item effect="dark" title="刷新配置" name="overallSetting">
         <overall-setting themes="dark" />
       </el-collapse-item>
+      <el-collapse-item
+        effect="dark"
+        title="高级样式设置"
+        name="seniorStyleSetting"
+        class="no-padding no-border-bottom"
+      >
+        <senior-style-setting themes="dark"></senior-style-setting>
+      </el-collapse-item>
     </el-collapse>
   </div>
 </template>