fix: toggle collapse the comments

Chilfish · Mar 8, 2024 · be98c76 · be98c76
1 parent 109dd44
commit be98c76
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 37 deletions.
diff --git a/packages/ui/src/post/Action.vue b/packages/ui/src/post/Action.vue
@@ -4,6 +4,10 @@ import type { Post } from '@types'
 defineProps<{
   post: Post
 }>()
+
+defineEmits<{
+  toggleComment: []
+}>()
 </script>
 
 <template>
@@ -13,15 +17,14 @@ defineProps<{
       <span>{{ post.reposts_count }}</span>
     </span>
 
-    <a
-      :href="`${post.detail_url}#comment`"
-      target="_blank"
-      title="打开原微博评论"
+    <span
+      title="展开微博评论"
       class="text-gray"
+      @click="() => $emit('toggleComment')"
     >
       <span class="i-tabler-message icon" />
       <span>{{ post.comments_count }}</span>
-    </a>
+    </span>
 
     <span>
       <span class="i-tabler-heart icon" />

diff --git a/packages/ui/src/post/Comments.vue b/packages/ui/src/post/Comments.vue
@@ -7,38 +7,36 @@ defineProps<{
 </script>
 
 <template>
-  <div class="comments flex flex-col pl-2">
-    <article
-      v-for="comment in comments"
-      :key="comment.id"
-      class="flex flex-col gap-2 rounded-2 bg-white p-3 pl-10 dark:bg-dark"
-    >
-      <div class="flex">
-        <post-profile
-          :user="comment.user"
-          class="ml-[-2.5rem] mr-4!"
-        />
+  <div
+    v-for="comment in comments"
+    :key="comment.id"
+    class="comments flex flex-col gap-2 rounded-2 bg-white p-3 pl-10 dark:bg-dark"
+  >
+    <div class="flex">
+      <post-profile
+        :user="comment.user"
+        class="ml-[-2.5rem] mr-4!"
+      />
 
-        <div class="flex items-center gap-3 text-3 text-gray">
-          <post-meta
-            :meta="comment"
-            class="justify-start!"
-          />
-          <span class="hidden sm:inline-block">
-            评论 {{ comment.comments_count }} |
-            点赞 {{ comment.like_count }}
-          </span>
-        </div>
+      <div class="flex items-center gap-3 text-3 text-gray">
+        <post-meta
+          :meta="comment"
+          class="justify-start!"
+        />
+        <span class="hidden sm:inline-block">
+          评论 {{ comment.comments_count }} |
+          点赞 {{ comment.like_count }}
+        </span>
       </div>
+    </div>
 
-      <post-text :text="comment.text" />
+    <post-text :text="comment.text" />
 
-      <main-image
-        v-if="comment.img && !comment.img.includes('sinaurl')"
-        :src="comment.img"
-        class="max-h-10rem"
-      />
-    </article>
+    <main-image
+      v-if="comment.img && !comment.img.includes('sinaurl')"
+      :src="comment.img"
+      class="h-10rem"
+    />
   </div>
 </template>
 

diff --git a/packages/ui/src/post/Item.vue b/packages/ui/src/post/Item.vue
@@ -4,11 +4,23 @@ import type { Post } from '@types'
 defineProps<{
   post: Post
 }>()
+
+const openComment = ref(false)
+const articleRef = ref<HTMLElement | null>(null)
+
+watchEffect(() => {
+  if (!articleRef.value)
+    return
+  const comments = articleRef.value.querySelector<HTMLDivElement>('.n-collapse-item__content-wrapper')
+
+  comments?.style.setProperty('display', openComment.value ? 'block' : 'none')
+})
 </script>
 
 <template>
   <article
     :id="post.mblogid"
+    ref="articleRef"
     class="post"
   >
     <div class="flex justify-between">
@@ -37,12 +49,20 @@ defineProps<{
     <post-action
       class="justify-start!"
       :post="post"
+      @toggle-comment="openComment = !openComment"
     />
 
-    <post-comments
-      v-if="post.comments_count > 0"
-      :comments="post.comments"
-    />
+    <n-collapse
+      :default-expanded-names="['comments']"
+      display-directive="show"
+    >
+      <template #arrow>
+        <span />
+      </template>
+      <n-collapse-item name="comments">
+        <post-comments :comments="post.comments" />
+      </n-collapse-item>
+    </n-collapse>
   </article>
 </template>