diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue index c3cdabcc1c..7ecf075044 100644 --- a/core/core-frontend/src/custom-component/v-query/Component.vue +++ b/core/core-frontend/src/custom-component/v-query/Component.vue @@ -91,6 +91,7 @@ const defaultStyle = { queryConditionWidth: 227, nameboxSpacing: 8, queryConditionSpacing: 16, + queryConditionHeight: 32, btnColor: '#3370ff', labelColorBtn: '#ffffff' } @@ -233,6 +234,7 @@ const setCustomStyle = val => { queryConditionWidth, nameboxSpacing, queryConditionSpacing, + queryConditionHeight, labelColorBtn, btnColor, placeholderSize, @@ -266,6 +268,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' @@ -686,6 +689,10 @@ const boxWidth = computed(() => { return `${customStyle.placeholderSize}px` }) +const boxHeight = computed(() => { + return `${customStyle.queryConditionHeight || 32}px` +}) + const queryData = () => { let requiredName = '' let numName = '' @@ -943,6 +950,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); @@ -965,7 +983,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); } diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts index 7265ae9491..d8af667b11 100644 --- a/core/core-frontend/src/locales/en.ts +++ b/core/core-frontend/src/locales/en.ts @@ -2975,6 +2975,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', diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts index a8a35dbdc7..9396019072 100644 --- a/core/core-frontend/src/locales/tw.ts +++ b/core/core-frontend/src/locales/tw.ts @@ -2891,6 +2891,7 @@ export default { '如果展示查詢按鈕，需要點擊該按鈕後才能觸發圖表查詢；如果不展示查詢按鈕，選擇完查詢條件後立即觸發圖表查詢', custom_query_bg_color: '自定義查詢條件背景', query_condition_space: '查詢條件間距', + query_condition_height: '查詢條件高度', query_condition_name: '查詢條件名稱', condition_left: '左側', condition_top: '上側', diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index d05c3a26ae..db191bbbd3 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -2898,6 +2898,7 @@ export default { '如果展示查询按钮，需要点击该按钮后才能触发图表查询；如果不展示查询按钮，选择完查询条件后立即触发图表查询', custom_query_bg_color: '自定义查询条件背景', query_condition_space: '查询条件间距', + query_condition_height: '查询条件高度', query_condition_name: '查询条件名称', condition_left: '左侧', condition_top: '上侧', diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts index e5f7530e0e..f5c7cfc0f5 100644 --- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts +++ b/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' } diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue index e8addadde2..0242b134bc 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue +++ b/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" /> + + +