fix:调试展开收起功能

src/modules/Comment/index.vue

@@ -145,17 +145,32 @@
                 </div>
 
                 <!-- 展开更多和收起 -->
-                <div v-if="item.children.length > 1" class="sub-list-controls">
+                <div v-if="item.childrenCount > 0" class="sub-list-controls">
                   <div class="expand-line"></div>
-                  <el-button link @click="handleExpand(item)">
+
-                    <template v-if="!item.showAllReplies">
+                  <el-button
+                    v-if="item.children.length < item.childrenCount"
+                    link
+                    @click="loadReplies(item)"
+                  >
+                    <template v-if="item.children.length === 0">
                       展开 {{ item.childrenCount }} 条回复
-                      <el-icon><ArrowDown /></el-icon>
                     </template>
                     <template v-else>
-                      收起
+                      更多
-                      <el-icon><ArrowUp /></el-icon>
+                      {{ item.childrenCount - item.children.length }} 条回复
                     </template>
+                    <el-icon v-if="!loading"><ArrowDown /></el-icon>
+                    <el-icon v-else class="is-loading"><Loading /></el-icon>
+                  </el-button>
+
+                  <el-button
+                    v-if="item.children.length > 0"
+                    link
+                    @click="collapseReplies(item)"
+                  >
+                    收起
+                    <el-icon><ArrowUp /></el-icon>
                   </el-button>
                 </div>
               </div>
@@ -247,7 +262,7 @@ const commentData = ref([
       name: "李星倩",
       avatar: "",
     },
-    childrenCount: 3,
+    childrenCount: 10,
     children: [
       {
         id: 101,
@@ -295,7 +310,6 @@ const commentData = ref([
 
 // 回复
 const openReply = (target, group) => {
-
   // 1. 设置回复的目标关系
   activeReply.groupId = group.id; // 根评论ID
   activeReply.parentId = target.id; // 直接父级ID
@@ -311,7 +325,7 @@ const openReply = (target, group) => {
 
   // 3. 聚焦到输入框
   nextTick(() => {
-    const textarea = document.querySelector('.fixed-publisher textarea');
+    const textarea = document.querySelector(".fixed-publisher textarea");
     textarea?.focus();
     // 飞书细节：光标移到最后
     textarea.selectionStart = textarea.value.length;
@@ -348,7 +362,7 @@ const cancelReply = () => {
   activeReply.parentId = null;
   activeReply.targetName = "";
   activeReply.groupId = null;
-  mainInput.value = '';
+  mainInput.value = "";
 };
 
 // @圈人的操作
@@ -368,7 +382,7 @@ const onUserMentioned = (user) => {
  * @param {string} type - 'main' (主评论) 或 'reply' (回复)
  */
 const handleSendComment = async () => {
-  const type = activeReply.parentId ? 'reply' : 'main';
+  const type = activeReply.parentId ? "reply" : "main";
   const isReply = type === "reply";
   let rawText = mainInput.value;
 
@@ -455,13 +469,16 @@ const updateUIAfterSend = (type, params) => {
   }
 };
 
-// TODO:展开更多-收起
+// TODO:展开
-const handleExpand = async (item) => {
+const loadingReply = ref(false);
+const loadReplies = async (item) => {
+  if(!loadingReply.value) return;
+  loadingReply.value = true;
   try {
     // 后端获取最终的数据信息
     // const res = await xxxxxx()
     const res = [];
-    const combined = [...(item.localReplies || []), ...res];
+    const combined = [...(item.localReplies || []), ...res, ...item.children];
     item.children = combined.filter(
       (v, i, a) => a.findIndex((t) => t.id === v.id) === i
     );
@@ -469,9 +486,17 @@ const handleExpand = async (item) => {
     item.showAllReplies = true;
   } catch (error) {
     console.log("error", error);
+  } finally {
+    loading.value = false;
   }
 };
 
+// 收起
+const collapseReplies = (item) => {
+  item.showAllReplies = false;
+  // nextTick(() => scrollIntoView(item.id));
+};
+
 /**
  * @param {string} text - 原始文本
  * @param {Array} atUsers - 这条评论真正圈到的人员列表