From 1034c0ee9ecab5a86d95a0d7ba3b5d47cb875973 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Tue, 26 Nov 2024 10:58:44 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=BB=84=E4=BB=B6MsTreeSelect-?=
 =?UTF-8?q?=E6=9C=AA=E9=80=89=E6=8B=A9=E6=97=B6hover=E4=B8=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=B0=94=E6=B3=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1049495 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001049495
---
 .../components/pure/ms-tree-select/index.vue  | 182 +++++++++---------
 1 file changed, 92 insertions(+), 90 deletions(-)

diff --git a/frontend/src/components/pure/ms-tree-select/index.vue b/frontend/src/components/pure/ms-tree-select/index.vue
index 676295dc3e..d4fe6a10bc 100644
--- a/frontend/src/components/pure/ms-tree-select/index.vue
+++ b/frontend/src/components/pure/ms-tree-select/index.vue
@@ -1,100 +1,102 @@
 <template>
-  <a-tooltip
-    :content="getTreeSelectTooltip()"
-    :disabled="!(checkedKeys ?? []).length"
-    position="top"
-    content-class="tree-select-content"
-    :mouse-enter-delay="300"
-  >
-    <a-trigger
-      v-model:popup-visible="viewSelectOptionVisible"
-      :trigger="['click']"
-      :click-to-close="false"
-      :popup-translate="[0, 4]"
-      content-class="arco-trigger-menu tree-select-trigger-content"
-      :content-style="{ width: `${triggerWidth}px` }"
+  <div class="w-full">
+    <a-tooltip
+      :content="getTreeSelectTooltip()"
+      :disabled="!(checkedKeys ?? []).length"
+      position="top"
+      content-class="tree-select-content"
+      :mouse-enter-delay="300"
     >
-      <a-tree-select
-        ref="treeSelectRef"
-        v-model:model-value="checkedKeys"
-        v-model:input-value="inputValue"
-        :data="treeData"
-        :max-tag-count="maxTagCount"
-        :multiple="props.multiple"
-        allow-search
-        disable-filter
-        allow-clear
-        :tree-props="{
-          virtualListProps: virtualListProps,
-        }"
-        :field-names="props.fieldNames"
-        :placeholder="t('common.pleaseSelect')"
-        :trigger-props="{ contentClass: 'view-select-trigger' }"
-        @popup-visible-change="handlePopupVisibleChange"
-        @input-value-change="handleInputValueChange"
-        @change="handleChange"
-        @keyup="handleKeyup"
-        @clear="handleClear"
+      <a-trigger
+        v-model:popup-visible="viewSelectOptionVisible"
+        :trigger="['click']"
+        :click-to-close="false"
+        :popup-translate="[0, 4]"
+        content-class="arco-trigger-menu tree-select-trigger-content"
+        :content-style="{ width: `${triggerWidth}px` }"
       >
-        <template #label="{ data: slotData }">
-          <div class="one-line-text">{{ slotData.label }}</div>
-        </template>
-      </a-tree-select>
-      <template #content>
-        <MsTree
-          v-model:checked-keys="checkedKeys"
-          v-model:halfCheckedKeys="halfCheckedKeys"
-          v-model:focus-node-key="focusNodeKey"
+        <a-tree-select
+          ref="treeSelectRef"
+          v-model:model-value="checkedKeys"
+          v-model:input-value="inputValue"
           :data="treeData"
-          :selectable="false"
-          :keyword="inputValue"
-          :empty-text="t('common.noData')"
-          :virtual-list-props="virtualListProps"
-          :field-names="props.fieldNames as MsTreeFieldNames"
-          :node-disabled-tip="t('project.environmental.http.nodeDisabledTip')"
-          default-expand-all
-          block-node
-          title-tooltip-position="tr"
+          :max-tag-count="maxTagCount"
           :multiple="props.multiple"
-          :checkable="props.treeCheckable"
-          :check-strictly="props.treeCheckStrictly"
-          v-bind="$attrs"
-          @check="handleCheck"
+          allow-search
+          disable-filter
+          allow-clear
+          :tree-props="{
+            virtualListProps: virtualListProps,
+          }"
+          :field-names="props.fieldNames"
+          :placeholder="t('common.pleaseSelect')"
+          :trigger-props="{ contentClass: 'view-select-trigger' }"
+          @popup-visible-change="handlePopupVisibleChange"
+          @input-value-change="handleInputValueChange"
+          @change="handleChange"
+          @keyup="handleKeyup"
+          @clear="handleClear"
         >
-          <template #title="nodeData">
-            <div
-              class="one-line-text w-full cursor-pointer text-[var(--color-text-1)]"
-              @click="handleCheck(checkedKeys, { checked: !checkedKeys.includes(nodeData.id), node: nodeData })"
-            >
-              {{ nodeData.name }}
-            </div>
+          <template #label="{ data: slotData }">
+            <div class="one-line-text">{{ slotData.label }}</div>
           </template>
-          <template #extra="nodeData">
-            <MsButton
-              v-if="nodeData.children && nodeData.children.length && !nodeData.disabled"
-              class="!mr-[8px]"
-              @click="handleSelectCurrent(nodeData)"
-            >
-              {{
-                checkedKeys.includes(nodeData.id)
-                  ? t('ms.case.associate.cancelCurrent')
-                  : t('ms.case.associate.selectCurrent')
-              }}
-            </MsButton>
-            <MoreMenuDropdown
-              v-if="props.showContainChildModule && !nodeData.disabled && nodeData.id !== 'root'"
-              v-model:contain-child-module="nodeData.containChildModule"
-              @handle-contain-child-module="
-                (containChildModule) => handleContainChildModule(nodeData, containChildModule)
-              "
-              @close="resetFocusNodeKey"
-              @open="setFocusKey(nodeData)"
-            />
-          </template>
-        </MsTree>
-      </template>
-    </a-trigger>
-  </a-tooltip>
+        </a-tree-select>
+        <template #content>
+          <MsTree
+            v-model:checked-keys="checkedKeys"
+            v-model:halfCheckedKeys="halfCheckedKeys"
+            v-model:focus-node-key="focusNodeKey"
+            :data="treeData"
+            :selectable="false"
+            :keyword="inputValue"
+            :empty-text="t('common.noData')"
+            :virtual-list-props="virtualListProps"
+            :field-names="props.fieldNames as MsTreeFieldNames"
+            :node-disabled-tip="t('project.environmental.http.nodeDisabledTip')"
+            default-expand-all
+            block-node
+            title-tooltip-position="tr"
+            :multiple="props.multiple"
+            :checkable="props.treeCheckable"
+            :check-strictly="props.treeCheckStrictly"
+            v-bind="$attrs"
+            @check="handleCheck"
+          >
+            <template #title="nodeData">
+              <div
+                class="one-line-text w-full cursor-pointer text-[var(--color-text-1)]"
+                @click="handleCheck(checkedKeys, { checked: !checkedKeys.includes(nodeData.id), node: nodeData })"
+              >
+                {{ nodeData.name }}
+              </div>
+            </template>
+            <template #extra="nodeData">
+              <MsButton
+                v-if="nodeData.children && nodeData.children.length && !nodeData.disabled"
+                class="!mr-[8px]"
+                @click="handleSelectCurrent(nodeData)"
+              >
+                {{
+                  checkedKeys.includes(nodeData.id)
+                    ? t('ms.case.associate.cancelCurrent')
+                    : t('ms.case.associate.selectCurrent')
+                }}
+              </MsButton>
+              <MoreMenuDropdown
+                v-if="props.showContainChildModule && !nodeData.disabled && nodeData.id !== 'root'"
+                v-model:contain-child-module="nodeData.containChildModule"
+                @handle-contain-child-module="
+                  (containChildModule) => handleContainChildModule(nodeData, containChildModule)
+                "
+                @close="resetFocusNodeKey"
+                @open="setFocusKey(nodeData)"
+              />
+            </template>
+          </MsTree>
+        </template>
+      </a-trigger>
+    </a-tooltip>
+  </div>
 </template>
 
 <script lang="ts" setup>