From 613fb5541bbe85899c4752d5e1749fb2f2bf361e Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Sun, 17 Nov 2024 17:52:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86):?=
 =?UTF-8?q?=20=E7=8E=AF=E5=A2=83=E7=AE=A1=E7=90=86-=E6=B7=BB=E5=8A=A0http?=
 =?UTF-8?q?=E9=87=8C=E6=A8=A1=E5=9D=97=E4=B8=8B=E6=8B=89-=E6=B8=85?=
 =?UTF-8?q?=E7=A9=BA=E4=B8=8B=E6=8B=89=E5=80=BC=E5=90=8E=E5=AD=90=E7=BA=A7?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=81=A2=E5=A4=8D=E9=BB=98=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/style/arco-reset.less     |  4 +++
 .../src/components/business/ms-tree/index.vue |  1 +
 .../components/pure/ms-tree-select/index.vue  | 30 +++++++++++--------
 .../pure/ms-tree-select/moreMenuDropdown.vue  | 14 ++++-----
 4 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index 1f3a0f4056..1f68aac3bf 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@@ -314,6 +314,10 @@
     color: var(--color-text-brand);
   }
 }
+.arco-select-view-multiple.arco-select-view-size-medium {
+  overflow: hidden; // 防止多选输入过多，撑开
+  height: 32px;
+}
 .arco-input-tag-disabled,
 .arco-select-view-disabled,
 .arco-textarea-disabled,
diff --git a/frontend/src/components/business/ms-tree/index.vue b/frontend/src/components/business/ms-tree/index.vue
index b96a2b893e..54bfdf8a0f 100644
--- a/frontend/src/components/business/ms-tree/index.vue
+++ b/frontend/src/components/business/ms-tree/index.vue
@@ -554,6 +554,7 @@
           }
         }
         .arco-tree-node-title-block {
+          overflow: hidden; // 防止 ms-tree-node-extra 里换行
           width: 60%;
         }
         .ms-tree-node-extra {
diff --git a/frontend/src/components/pure/ms-tree-select/index.vue b/frontend/src/components/pure/ms-tree-select/index.vue
index d71fccc3ed..8807023a38 100644
--- a/frontend/src/components/pure/ms-tree-select/index.vue
+++ b/frontend/src/components/pure/ms-tree-select/index.vue
@@ -107,7 +107,7 @@
 
   import { useI18n } from '@/hooks/useI18n';
   import useSelect from '@/hooks/useSelect';
-  import { findNodeByKey } from '@/utils';
+  import { findNodeByKey, mapTree } from '@/utils';
 
   import type { TreeFieldNames, TreeNodeData } from '@arco-design/web-vue';
 
@@ -138,16 +138,13 @@
   const { selectedModulesMaps, checkedKeys, halfCheckedKeys, selectParent, checkNode, clearSelector } =
     useTreeSelection(selectedModuleProps.value);
 
-  /**
-   * 设置子节点的属性值
-   * @param trees 属性数组
-   * @param targetKey 需要匹配的属性值
-   */
-  function updateChildNodesState(node: MsTreeNodeData, targetKey: keyof MsTreeNodeData, state: boolean) {
+  // 设置子节点的 containChildModule 和 disabled 属性值
+  function updateChildNodesState(node: MsTreeNodeData, state: boolean) {
     if (node.children) {
       node.children.forEach((child: MsTreeNodeData) => {
-        child[targetKey] = state;
-        updateChildNodesState(child, targetKey, state);
+        child.containChildModule = state;
+        child.disabled = state;
+        updateChildNodesState(child, state);
       });
     }
   }
@@ -159,14 +156,12 @@
       if (checkedNodes.checked) {
         // 父级勾选，且父级“包含新增子模块”勾选，那么下面所有子级：禁用和勾选“包含新增子模块”
         if (realNode.containChildModule) {
-          updateChildNodesState(realNode, 'containChildModule', true);
-          updateChildNodesState(realNode, 'disabled', true);
+          updateChildNodesState(realNode, true);
         }
       } else {
         // 父级取消勾选，父级和所有子级“包含新增子模块”取消勾选，所有子级取消禁用
         realNode.containChildModule = false;
-        updateChildNodesState(realNode, 'containChildModule', false);
-        updateChildNodesState(realNode, 'disabled', false);
+        updateChildNodesState(realNode, false);
       }
     }
     checkNode(_checkedKeys, checkedNodes);
@@ -312,6 +307,15 @@
     }
   }
   function handleClear() {
+    if (props.showContainChildModule) {
+      treeData.value = mapTree<TreeNodeData>(treeData.value, (node) => {
+        return {
+          ...node,
+          containChildModule: false,
+          disabled: false,
+        };
+      });
+    }
     tempInputValue.value = '';
     clearSelector();
   }
diff --git a/frontend/src/components/pure/ms-tree-select/moreMenuDropdown.vue b/frontend/src/components/pure/ms-tree-select/moreMenuDropdown.vue
index 4ac794507e..466bc71625 100644
--- a/frontend/src/components/pure/ms-tree-select/moreMenuDropdown.vue
+++ b/frontend/src/components/pure/ms-tree-select/moreMenuDropdown.vue
@@ -3,7 +3,7 @@
     v-model:popup-visible="visible"
     class="contain-child-dropdown"
     position="br"
-    trigger="click"
+    :trigger="['click', 'hover']"
     :hide-on-select="false"
   >
     <div :class="['ms-more-action-trigger-content', visible ? 'ms-more-action-trigger-content--focus' : '']">
@@ -13,13 +13,7 @@
     </div>
     <template #content>
       <a-doption>
-        <a-checkbox
-          v-model="containChildModule"
-          @change="
-            (containChildModule: boolean | (string | number | boolean)[]) =>
-              emit('handleContainChildModule', containChildModule as boolean)
-          "
-        >
+        <a-checkbox v-model="containChildModule" @change="handleContainChildModule">
           {{ t('project.environmental.http.containChildModule') }}
         </a-checkbox>
         <a-tooltip :content="t('project.environmental.http.containChildModuleTip')" position="br">
@@ -49,6 +43,10 @@
   const visible = ref(false);
   const containChildModule = defineModel<boolean>('containChildModule', { required: false, default: false });
 
+  function handleContainChildModule(val: boolean | (string | number | boolean)[]) {
+    emit('handleContainChildModule', val as boolean);
+  }
+
   watch(
     () => visible.value,
     (val) => {