From 73c3fb0af01a8ee89f3288a5133768213f89feca Mon Sep 17 00:00:00 2001 From: dataeaseShu Date: Mon, 16 Jun 2025 14:08:43 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6):=20?= =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E6=A1=86=E5=8F=AF=E4=BB=A5=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E9=AB=98=E5=BA=A6=20#16027?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../custom-component/v-query/Component.vue | 21 ++++++++++++++++++- core/core-frontend/src/locales/en.ts | 1 + core/core-frontend/src/locales/tw.ts | 1 + core/core-frontend/src/locales/zh-CN.ts | 1 + .../modules/data-visualization/dvMain.ts | 1 + .../editor/editor-style/VQueryChartStyle.vue | 19 +++++++++++++++++ 6 files changed, 43 insertions(+), 1 deletion(-) 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" /> + + +