feat(查询组件): 查询框可以调整高度 #16027

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

@@ -92,6 +92,7 @@ const defaultStyle = {
   queryConditionWidth: 227,
   nameboxSpacing: 8,
   queryConditionSpacing: 16,
+  queryConditionHeight: 32,
   btnColor: '#3370ff',
   labelColorBtn: '#ffffff'
 }
@@ -237,6 +238,7 @@ const setCustomStyle = val => {
     queryConditionWidth,
     nameboxSpacing,
     queryConditionSpacing,
+    queryConditionHeight,
     labelColorBtn,
     btnColor,
     placeholderSize,
@@ -270,6 +272,7 @@ const setCustomStyle = val => {
   customStyle.queryConditionWidth = queryConditionWidth ?? 227
   customStyle.nameboxSpacing = nameboxSpacing ?? 8
   customStyle.queryConditionSpacing = queryConditionSpacing ?? 16
+  customStyle.queryConditionHeight = queryConditionHeight ?? 32
   customStyle.labelColorBtn = labelColorBtn || '#ffffff'
   customStyle.labelShow = labelShow ?? true
   customStyle.btnColor = btnColor || '#3370ff'
@@ -690,6 +693,10 @@ const boxWidth = computed(() => {
   return `${customStyle.placeholderSize}px`
 })
 
+const boxHeight = computed(() => {
+  return `${customStyle.queryConditionHeight || 32}px`
+})
+
 const queryData = () => {
   let requiredName = ''
   let numName = ''
@@ -949,6 +956,17 @@ const autoStyle = computed(() => {
     background-color: v-bind(tagColor);
   }
 
+  :deep(.ed-input),
+  :deep(.ed-date-editor) {
+    --ed-input-height: v-bind(boxHeight);
+  }
+
+  :deep(.ed-select__wrapper),
+  :deep(.text-search-select .ed-input__wrapper),
+  :deep(.text-search-select .ed-select__wrapper) {
+    height: v-bind(boxHeight);
+  }
+
   .ed-button--primary {
     --ed-button-bg-color: v-bind(btnHoverStyle.rawColor);
     --ed-button-border-color: v-bind(btnHoverStyle.rawColor);
@@ -971,7 +989,8 @@ const autoStyle = computed(() => {
     --ed-tag-font-size: v-bind(boxWidth);
   }
 
-  :deep(.ed-select-v2) {
+  :deep(.ed-select-v2),
+  :deep(.ed-select__wrapper) {
     font-size: v-bind(boxWidth);
   }
 

core/core-frontend/src/locales/en.ts

@@ -2977,6 +2977,7 @@ export default {
       'If the query button is displayed, the chart query will be triggered only after clicking the button. If not displayed, the query is triggered immediately after selecting the query conditions.',
     custom_query_bg_color: 'Custom Query Background Color',
     query_condition_space: 'Query Condition Spacing',
+    query_condition_height: 'Query condition height',
     query_condition_name: 'Query Condition Name',
     condition_left: 'Left Side',
     condition_top: 'Top Side',

core/core-frontend/src/locales/tw.ts

@@ -2893,6 +2893,7 @@ export default {
       '如果展示查詢按鈕，需要點擊該按鈕後才能觸發圖表查詢；如果不展示查詢按鈕，選擇完查詢條件後立即觸發圖表查詢',
     custom_query_bg_color: '自定義查詢條件背景',
     query_condition_space: '查詢條件間距',
+    query_condition_height: '查詢條件高度',
     query_condition_name: '查詢條件名稱',
     condition_left: '左側',
     condition_top: '上側',

core/core-frontend/src/locales/zh-CN.ts

@@ -2900,6 +2900,7 @@ export default {
       '如果展示查询按钮，需要点击该按钮后才能触发图表查询；如果不展示查询按钮，选择完查询条件后立即触发图表查询',
     custom_query_bg_color: '自定义查询条件背景',
     query_condition_space: '查询条件间距',
+    query_condition_height: '查询条件高度',
     query_condition_name: '查询条件名称',
     condition_left: '左侧',
     condition_top: '上侧',

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

@@ -525,6 +525,7 @@ export const dvMainStore = defineStore('dataVisualization', {
               placeholderShow: true,
               placeholderSize: 14,
               queryConditionSpacing: 16,
+              queryConditionHeight: 32,
               labelColorBtn: '#ffffff',
               btnColor: '#3370ff'
             }

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

@@ -236,6 +236,12 @@ const checkItalic = type => {
   chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'italic'
 }
 const initParams = () => {
+  if (!chart.value.customStyle.component.hasOwnProperty('queryConditionHeight')) {
+    chart.value.customStyle.component = {
+      ...chart.value.customStyle.component,
+      queryConditionHeight: 32
+    }
+  }
   if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
     chart.value.customStyle.component = {
       ...chart.value.customStyle.component,
@@ -413,6 +419,19 @@ const onTitleChange = () => {
                 controls-position="right"
               />
             </el-form-item>
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              :label="t('visualization.query_condition_space')"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                v-model="chart.customStyle.component.queryConditionHeight"
+                :min="0"
+                :effect="themes"
+                controls-position="right"
+              />
+            </el-form-item>
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
                 :effect="themes"