fix(产品需求): 修复产品需求在测试后存在的问题。

src/views/product/requirement/modules/module-tree-node.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, inject, ref, type Ref } from 'vue';
 
 defineOptions({ name: 'ModuleTreeNode' });
 
@@ -32,15 +32,15 @@ const emit = defineEmits([
   'updateNewChildModuleName'
 ]);
 
+const collapsedModuleIds = inject<Ref<Set<string>>>('collapsedModuleIds', ref(new Set()));
+const toggleCollapse = inject<(id: string) => void>('toggleCollapse', () => {});
+
 const isRootModule = computed(() => props.module.id === props.rootModuleId);
-
 const isSelected = computed(() => props.selectedModuleId === props.module.id);
-
 const isEditing = computed(() => props.editingNodeId === props.module.id);
-
 const isAddingChild = computed(() => props.addingChildParentId === props.module.id);
-
 const hasChildren = computed(() => props.module.children && props.module.children.length > 0);
+const isCollapsed = computed(() => hasChildren.value && props.module.id ? collapsedModuleIds.value.has(props.module.id) : false);
 
 const hasRequirements = computed(() => {
   const moduleId = props.module.id;
@@ -91,6 +91,12 @@ function handleAddChildConfirm() {
 function handleAddChildCancel() {
   emit('addChildCancel');
 }
+
+function handleToggle() {
+  if (props.module.id) {
+    toggleCollapse(props.module.id);
+  }
+}
 </script>
 
 <template>
@@ -105,6 +111,9 @@ function handleAddChildCancel() {
       :style="indentStyle"
       @click="handleClick"
     >
+      <div class="module-tree-item__toggle" :class="{ 'is-expanded': hasChildren && !isCollapsed }" @click.stop="handleToggle">
+        <icon-ic-round-chevron-right v-if="hasChildren" class="text-14px" />
+      </div>
       <div class="module-tree-item__icon">
         <icon-mdi-folder-open v-if="isRootModule" class="text-16px" />
         <icon-mdi-folder-outline v-else class="text-16px" />
@@ -124,7 +133,7 @@ function handleAddChildCancel() {
         />
       </div>
 
-      <div v-if="!isRootModule && !isEditing" class="module-tree-item__actions">
+      <div v-if="!isEditing" class="module-tree-item__actions" @click.stop>
         <ElDropdown trigger="click">
           <ElButton text size="small" class="module-tree-item__more-btn">
             <icon-mdi-dots-horizontal class="text-14px" />
@@ -140,14 +149,18 @@ function handleAddChildCancel() {
                   <span>新增子模块</span>
                 </div>
               </ElDropdownItem>
-              <ElDropdownItem v-auth="{ code: 'project:product:update', source: 'object' }" @click="handleStartEdit">
+              <ElDropdownItem
+                v-if="!isRootModule"
+                v-auth="{ code: 'project:product:update', source: 'object' }"
+                @click="handleStartEdit"
+              >
                 <div class="flex items-center gap-6px">
                   <icon-mdi-pencil-outline class="text-14px" />
                   <span>编辑</span>
                 </div>
               </ElDropdownItem>
               <ElDropdownItem
-                v-if="canDeleteModule"
+                v-if="!isRootModule && canDeleteModule"
                 v-auth="{ code: 'project:product:delete', source: 'object' }"
                 divided
                 @click="handleDelete"
@@ -163,7 +176,7 @@ function handleAddChildCancel() {
       </div>
     </div>
 
-    <template v-if="hasChildren">
+    <template v-if="hasChildren && !isCollapsed">
       <ModuleTreeNode
         v-for="child in module.children"
         :key="child.id"
@@ -270,6 +283,23 @@ function handleAddChildCancel() {
   color: rgb(100 116 139 / 80%);
 }
 
+.module-tree-item__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: transform 0.2s ease;
+  color: rgb(148 163 184);
+}
+
+.module-tree-item__toggle.is-expanded svg {
+  transform: rotate(90deg);
+}
+
 .module-tree-item__content {
   flex: 1;
   min-width: 0;