feat(查询组件): 过滤组件优化 #11696

core/core-frontend/src/custom-component/v-query/Component.vue

@@ -18,7 +18,8 @@ import {
   onBeforeMount,
   CSSProperties,
   shallowRef,
-  provide
+  provide,
+  nextTick
 } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -57,6 +58,7 @@ const props = defineProps({
 })
 const { element, view, scale } = toRefs(props)
 const { t } = useI18n()
+const vQueryRef = ref()
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent, canvasViewInfo, mobileInPc, firstLoadMap } = storeToRefs(dvMainStore)
 const canEdit = ref(false)
@@ -64,6 +66,7 @@ const queryConfig = ref()
 const defaultStyle = {
   border: '',
   placeholder: '请选择',
+  placeholderSize: 14,
   placeholderShow: true,
   background: '',
   text: '',
@@ -166,6 +169,7 @@ const setCustomStyle = val => {
     labelColorBtn,
     btnColor,
     placeholder,
+    placeholderSize,
     placeholderShow,
     labelShow
   } = val
@@ -174,6 +178,14 @@ const setCustomStyle = val => {
   customStyle.btnList = [...btnList]
   customStyle.layout = layout
   customStyle.placeholderShow = placeholderShow ?? true
+  customStyle.placeholderSize = placeholderSize ?? 14
+  nextTick(() => {
+    vQueryRef.value.style.setProperty('--ed-font-size-base', `${customStyle.placeholderSize}px`)
+    vQueryRef.value.style.setProperty(
+      '--ed-component-size',
+      `${customStyle.placeholderSize + 18}px`
+    )
+  })
   customStyle.placeholder = placeholder ?? '请选择'
   customStyle.titleShow = titleShow
   customStyle.titleColor = titleColor
@@ -577,7 +589,7 @@ const autoStyle = computed(() => {
 </script>
 
 <template>
-  <div class="v-query-container" :style="autoStyle" @keydown.stop @keyup.stop>
+  <div class="v-query-container" ref="vQueryRef" :style="autoStyle" @keydown.stop @keyup.stop>
     <p v-if="customStyle.titleShow" class="title" :style="titleStyle">
       {{ customStyle.title }}
     </p>
@@ -697,6 +709,7 @@ const autoStyle = computed(() => {
   height: 100%;
   overflow: auto;
   position: relative;
+  --ed-font-size-base: 14px;
 
   .no-list-label {
     width: 100%;

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -484,6 +484,7 @@ export const dvMainStore = defineStore('dataVisualization', {
               nameboxSpacing: 8,
               placeholder: '请选择',
               placeholderShow: true,
+              placeholderSize: 14,
               queryConditionSpacing: 16,
               labelColorBtn: '#ffffff',
               btnColor: '#3370ff'

core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue

@@ -74,7 +74,8 @@ if (!chart.value.customStyle.component.hasOwnProperty('placeholderShow')) {
   chart.value.customStyle.component = {
     ...chart.value.customStyle.component,
     placeholderShow: true,
-    placeholder: '请选择'
+    placeholder: '请选择',
+    placeholderSize: 14
   }
 }
 </script>
@@ -192,19 +193,30 @@ if (!chart.value.customStyle.component.hasOwnProperty('placeholderShow')) {
               />
             </el-form-item>
             <el-form-item
-              label="提示词颜色"
+              label="文本"
               class="form-item"
               style="padding-left: 20px"
               :class="'form-item-' + themes"
             >
+              <div style="display: flex; align-items: center; width: 100%">
                 <el-color-picker
                   :effect="themes"
-                :trigger-width="108"
+                  :trigger-width="56"
                   is-custom
                   v-model="chart.customStyle.component.text"
                   :disabled="!chart.customStyle.component.placeholderShow"
                   :predefine="predefineColors"
                 />
+                <el-input-number
+                  v-model="chart.customStyle.component.placeholderSize"
+                  :min="10"
+                  :max="20"
+                  style="margin-left: 8px"
+                  step-strictly
+                  :effect="themes"
+                  controls-position="right"
+                />
+              </div>
             </el-form-item>
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox