From 0fb9b9d135721f52f2c69e790db685547277b96f Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Tue, 29 Apr 2025 15:32:31 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E5=A4=9A=E9=80=89=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-component/v-query/Component.vue    |  3 ++-
 .../src/custom-component/v-query/Select.vue   | 20 ++++++++++++++++
 .../src/custom-component/v-query/Tree.vue     | 23 +++++++++++++++++++
 3 files changed, 45 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 c54a16df64..c8d177259a 100644
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@@ -914,7 +914,8 @@ const autoStyle = computed(() => {
   position: relative;
   --ed-font-size-base: v-bind(boxWidth);
 
-  :deep(.ed-select-v2 .ed-select-v2__selection .ed-tag) {
+  :deep(.ed-select-v2 .ed-select-v2__selection .ed-tag),
+  :deep(.select-trigger .ed-select__tags .ed-tag) {
     background-color: v-bind(tagColor);
   }
 
diff --git a/core/core-frontend/src/custom-component/v-query/Select.vue b/core/core-frontend/src/custom-component/v-query/Select.vue
index a7c3209014..e06a9bf021 100644
--- a/core/core-frontend/src/custom-component/v-query/Select.vue
+++ b/core/core-frontend/src/custom-component/v-query/Select.vue
@@ -638,6 +638,14 @@ onMounted(() => {
     Boolean(document.querySelector('.datav-preview'))
 })
 
+const tagWidth = computed(() => {
+  return Math.min(getCustomWidth() / 3, 40) + 'px'
+})
+
+const tagTextWidth = computed(() => {
+  return Math.min(getCustomWidth() / 3, 50) - 25 + 'px'
+})
+
 defineExpose({
   displayTypeChange,
   mult,
@@ -730,3 +738,15 @@ defineExpose({
   }
 }
 </style>
+
+<style lang="less" scoped>
+:deep(.ed-select-v2__selection) {
+  .ed-tag {
+    max-width: v-bind(tagWidth);
+  }
+
+  .ed-select__tags-text {
+    max-width: v-bind(tagTextWidth) !important;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/custom-component/v-query/Tree.vue b/core/core-frontend/src/custom-component/v-query/Tree.vue
index be20b4562b..88522672bb 100644
--- a/core/core-frontend/src/custom-component/v-query/Tree.vue
+++ b/core/core-frontend/src/custom-component/v-query/Tree.vue
@@ -135,6 +135,18 @@ const init = () => {
   getTreeOption()
 }
 
+const tagWidth = computed(() => {
+  return Math.min(getCustomWidth() / 3, 50) + 'px'
+})
+
+const tagsWidth = computed(() => {
+  return getCustomWidth() - 40 + 'px'
+})
+
+const tagTextWidth = computed(() => {
+  return Math.min(getCustomWidth() / 3, 50) - 25 + 'px'
+})
+
 const showOrHide = ref(true)
 const queryConditionWidth = inject('com-width', Function, true)
 const isConfirmSearch = inject('is-confirm-search', Function, true)
@@ -314,4 +326,15 @@ const selectStyle = computed(() => {
 :deep(.ed-select-tags-wrapper) {
   display: inline-flex !important;
 }
+
+:deep(.ed-select__tags) {
+  max-width: v-bind(tagsWidth) !important;
+  .ed-tag {
+    max-width: v-bind(tagWidth);
+  }
+
+  .ed-select__tags-text {
+    max-width: v-bind(tagTextWidth) !important;
+  }
+}
 </style>