fix: unable to expand the replies list of the comment (#4305)

#### What type of PR is this?

/area console
/kind bug
/milestone 2.8.x

#### What this PR does / why we need it:

修复评论有新回复时，无法展开回复列表的问题。

#### Which issue(s) this PR fixes:

Fixes #4252

#### Special notes for your reviewer:

需要测试：

1. 选中任意一个评论，尝试进行回复。
2. 点击回复按钮打开回复列表，观察是否能够正常打开。

#### Does this PR introduce a user-facing change?

```release-note
修复 Console 的评论有新回复时，无法展开回复列表的问题。
```

console/src/modules/contents/comments/CommentList.vue

@@ -371,7 +371,6 @@ const handleApproveInBatch = async () => {
             <CommentListItem
               :comment="comment"
               :is-selected="checkSelection(comment)"
-              @reload="refetch()"
             >
               <template #checkbox>
                 <input

console/src/modules/contents/comments/components/CommentListItem.vue

@@ -29,7 +29,7 @@ import ReplyListItem from "./ReplyListItem.vue";
 import { apiClient } from "@/utils/api-client";
 import cloneDeep from "lodash.clonedeep";
 import { usePermission } from "@/utils/permission";
-import { useQuery } from "@tanstack/vue-query";
+import { useQuery, useQueryClient } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 import { usePluginModuleStore, type PluginModule } from "@/stores/plugin";
 import type {
@@ -39,6 +39,7 @@ import type {
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();
+const queryClient = useQueryClient();
 
 const props = withDefaults(
   defineProps<{
@@ -51,10 +52,6 @@ const props = withDefaults(
   }
 );
 
-const emit = defineEmits<{
-  (event: "reload"): void;
-}>();
-
 const selectedReply = ref<ListedReply>();
 const hoveredReply = ref<ListedReply>();
 const showReplies = ref(false);
@@ -79,7 +76,7 @@ const handleDelete = async () => {
       } catch (error) {
         console.error("Failed to delete comment", error);
       } finally {
-        emit("reload");
+        queryClient.invalidateQueries({ queryKey: ["comments"] });
       }
     },
   });
@@ -136,7 +133,7 @@ const handleApprove = async () => {
   } catch (error) {
     console.error("Failed to approve comment", error);
   } finally {
-    emit("reload");
+    queryClient.invalidateQueries({ queryKey: ["comments"] });
   }
 };
 
@@ -180,7 +177,7 @@ const handleToggleShowReplies = async () => {
       });
     }
   } else {
-    emit("reload");
+    queryClient.invalidateQueries({ queryKey: ["comments"] });
   }
 };
 
@@ -195,7 +192,12 @@ const onTriggerReply = (reply: ListedReply) => {
 
 const onReplyCreationModalClose = () => {
   selectedReply.value = undefined;
-  refetch();
+
+  queryClient.invalidateQueries({ queryKey: ["comments"] });
+
+  if (showReplies.value) {
+    refetch();
+  }
 };
 
 // Subject ref processing
@@ -354,7 +356,7 @@ const subjectRefResult = computed(() => {
                 }}
               </span>
               <VStatusDot
-                v-if="comment?.comment?.status?.unreadReplyCount || 0 > 0"
+                v-show="(comment?.comment?.status?.unreadReplyCount || 0) > 0"
                 v-tooltip="$t('core.comment.list.fields.has_new_replies')"
                 state="success"
                 animate
@@ -456,7 +458,6 @@ const subjectRefResult = computed(() => {
               :class="{ 'hover:bg-white': showReplies }"
               :reply="reply"
               :replies="replies"
-              @reload="refetch()"
               @reply="onTriggerReply"
             ></ReplyListItem>
           </div>

console/src/modules/contents/comments/components/ReplyListItem.vue

@@ -16,8 +16,10 @@ import { apiClient } from "@/utils/api-client";
 import { computed, inject, type Ref } from "vue";
 import cloneDeep from "lodash.clonedeep";
 import { useI18n } from "vue-i18n";
+import { useQueryClient } from "@tanstack/vue-query";
 
 const { t } = useI18n();
+const queryClient = useQueryClient();
 
 const props = withDefaults(
   defineProps<{
@@ -31,7 +33,6 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-  (event: "reload"): void;
   (event: "reply", reply: ListedReply): void;
 }>();
 
@@ -64,7 +65,7 @@ const handleDelete = async () => {
       } catch (error) {
         console.error("Failed to delete comment reply", error);
       } finally {
-        emit("reload");
+        queryClient.invalidateQueries({ queryKey: ["comment-replies"] });
       }
     },
   });
@@ -85,7 +86,7 @@ const handleApprove = async () => {
   } catch (error) {
     console.error("Failed to approve comment reply", error);
   } finally {
-    emit("reload");
+    queryClient.invalidateQueries({ queryKey: ["comment-replies"] });
   }
 };