fix(缺陷管理): 修复缺陷管理评论组件展开折叠bug

frontend/src/components/business/ms-comment/comment-item.vue

@@ -15,11 +15,15 @@
         <div class="flex gap-[8px]">
           <div v-if="props.mode === 'parent'" class="comment-btn" @click="expendChange">
             <MsIconfont type="icon-icon_comment_outlined" />
-            <span>{{ !expendComment ? t('ms.comment.expendComment') : t('ms.comment.collapseComment') }}</span>
+            <span>
+              {{
+                props.expandKeys.has(props.element.id) ? t('ms.comment.collapseComment') : t('ms.comment.expendComment')
+              }}
+            </span>
             <span class="text-[var(--color-text-4)]">({{ element.childComments?.length }})</span>
           </div>
           <div
-            v-if="hasAnyPermission(props.permissions)"
+            v-if="hasAnyPermission(props.permissions || [])"
             class="comment-btn hover:bg-[var(--color-bg-3)]"
             :class="{ 'bg-[var(--color-text-n8)]': status === 'reply' }"
             @click="replyClick"
@@ -55,15 +59,16 @@
   const props = defineProps<{
     element: CommentItem; // 评论的具体内容
     mode: 'parent' | 'child'; // 父级评论还是子级评论
-    permissions: string[]; // 权限列表
+    permissions?: string[]; // 权限列表
     onReply?: () => void; // 回复
     onEdit?: () => void; // 编辑
     onDelete?: () => void; // 删除
+    expandKeys: Set<string | number>;
   }>();
 
   // 是否拥有编辑｜删除权限
   const hasAuth = computed(() => {
-    return props.element.createUser === userStore.id && hasAnyPermission(props.permissions);
+    return props.element.createUser === userStore.id && hasAnyPermission(props.permissions || []);
   });
 
   const status = defineModel<'normal' | 'edit' | 'reply' | 'delete'>('status', { default: 'normal' });
@@ -72,17 +77,15 @@
     (event: 'reply'): void;
     (event: 'edit'): void;
     (event: 'delete'): void;
-    (event: 'expend', value: boolean): void;
+    (event: 'expend'): void;
   }>();
 
-  const expendComment = ref(false);
-
   const expendChange = () => {
     if (!props.element.childComments?.length) {
       return;
     }
-    expendComment.value = !expendComment.value;
-    emit('expend', expendComment.value);
+
+    emit('expend');
   };
   const replyClick = () => {
     emit('reply');

frontend/src/components/business/ms-comment/comment.tsx

@@ -47,7 +47,6 @@ export default defineComponent({
       commentStatus: 'normal',
       replyId: '', // 回复人
     });
-    const expendedIds = ref<string[]>([]); // 展开的评论id
     // 被@的用户id
     const noticeUserIds = ref<string[]>([]);
     const uploadFileIds = ref<string[]>([]);
@@ -102,13 +101,12 @@ export default defineComponent({
       emit('delete', item.id);
     };
 
+    const expendedIds = ref<Set<string | number>>(new Set<string>([]));
     const handleExpend = (val: boolean, id: string) => {
-      if (val) {
-        // 展开
-        expendedIds.value = [...expendedIds.value, id];
+      if (expendedIds.value.has(id)) {
+        expendedIds.value.delete(id);
       } else {
-        // 收起
-        expendedIds.value = expendedIds.value.filter((item) => item !== id);
+        expendedIds.value.add(id);
       }
     };
 
@@ -169,6 +167,7 @@ export default defineComponent({
             onUpdate:status={(v: string) => {
               currentItem.commentStatus = v;
             }}
+            expandKeys={expendedIds.value}
             element={item}
           />
           {item.id === currentItem.id && renderInput(item)}
@@ -192,8 +191,9 @@ export default defineComponent({
               currentItem.commentStatus = v;
             }}
             element={item}
+            expandKeys={expendedIds.value}
           />
-          {expendedIds.value.includes(item.id) && (
+          {expendedIds.value.has(item.id) && (
             <div class="ms-comment-child-container">{renderChildrenList(item.childComments)}</div>
           )}
           {item.id === currentItem.id && renderInput(item)}