From 913c66cb4a70c40ef632e865d25598ab730dafcd 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 7d09d314b1..d56fd107bb 100644 --- a/core/core-frontend/src/custom-component/v-query/Component.vue +++ b/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); } diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts index 4179b17362..4dabfa5018 100644 --- a/core/core-frontend/src/locales/en.ts +++ b/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', diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts index 6110b9136f..1a48f4381b 100644 --- a/core/core-frontend/src/locales/tw.ts +++ b/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: '上側', diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index a96eb2fdd4..805f028338 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/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: '上侧', 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 84f68c2a1c..6bfd12af5a 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 8a36970a2a..2998bc3375 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" /> + + +