refactor(项目管理): 环境管理-添加http里模块下拉-清空下拉值后子级状态恢复默认

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,

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 {

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);
 
-  /**
+  // 设置子节点的 containChildModule 和 disabled 属性值
-   * 设置子节点的属性值
+  function updateChildNodesState(node: MsTreeNodeData, state: boolean) {
-   * @param trees 属性数组
-   * @param targetKey 需要匹配的属性值
-   */
-  function updateChildNodesState(node: MsTreeNodeData, targetKey: keyof MsTreeNodeData, state: boolean) {
     if (node.children) {
       node.children.forEach((child: MsTreeNodeData) => {
-        child[targetKey] = state;
+        child.containChildModule = state;
-        updateChildNodesState(child, targetKey, state);
+        child.disabled = state;
+        updateChildNodesState(child, state);
       });
     }
   }
@@ -159,14 +156,12 @@
       if (checkedNodes.checked) {
         // 父级勾选，且父级“包含新增子模块”勾选，那么下面所有子级：禁用和勾选“包含新增子模块”
         if (realNode.containChildModule) {
-          updateChildNodesState(realNode, 'containChildModule', true);
+          updateChildNodesState(realNode, true);
-          updateChildNodesState(realNode, 'disabled', true);
         }
       } else {
         // 父级取消勾选，父级和所有子级“包含新增子模块”取消勾选，所有子级取消禁用
         realNode.containChildModule = false;
-        updateChildNodesState(realNode, 'containChildModule', false);
+        updateChildNodesState(realNode, false);
-        updateChildNodesState(realNode, 'disabled', 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();
   }

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
+        <a-checkbox v-model="containChildModule" @change="handleContainChildModule">
-          v-model="containChildModule"
-          @change="
-            (containChildModule: boolean | (string | number | boolean)[]) =>
-              emit('handleContainChildModule', containChildModule as boolean)
-          "
-        >
           {{ 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) => {