From 42e4fcc465199b16b6712c6bcd94726230f0f989 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Wed, 1 May 2024 13:29:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/CommentList.vue    | 230 ++++++++++++-------------
 site/src/components/CommentSubList.vue |   1 -
 site/src/components/LoadMoreAsync.vue  |   6 +-
 site/src/pages/user/favorites.vue      |   6 +-
 4 files changed, 118 insertions(+), 125 deletions(-)

diff --git a/site/src/components/CommentList.vue b/site/src/components/CommentList.vue
index b161b5143..a10096428 100644
--- a/site/src/components/CommentList.vue
+++ b/site/src/components/CommentList.vue
@@ -96,127 +96,125 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    entityType: {
-      type: String,
-      default: "",
-      required: true,
-    },
-    entityId: {
-      type: Number,
-      default: 0,
-      required: true,
-    },
+<script setup>
+const props = defineProps({
+  entityType: {
+    type: String,
+    default: "",
+    required: true,
   },
-  data() {
-    return {
-      showReplyCommentId: 0,
-      reply: {
-        commentId: 0,
-        value: {
-          content: "",
-          imageList: [],
-        },
-      },
-    };
+  entityId: {
+    type: Number,
+    default: 0,
+    required: true,
   },
-  computed: {
-    user() {
-      const userStore = useUserStore();
-      return userStore.user;
-    },
-    isLogin() {
-      const userStore = useUserStore();
-      return userStore.user != null;
-    },
+});
+const reply = reactive({
+  commentId: 0,
+  value: {
+    content: "",
+    imageList: [],
   },
-  methods: {
-    append(data) {
-      this.$refs.commentsLoadMore.unshiftResults(data);
-    },
-    async like(comment) {
-      try {
-        if (comment.liked) {
-          await useHttpPostForm("/api/like/unlike", {
-            body: {
-              entityType: "comment",
-              entityId: comment.id,
-            },
-          });
-          comment.liked = false;
-          comment.likeCount = comment.likeCount > 0 ? comment.likeCount - 1 : 0;
-          useMsgSuccess("已取消点赞");
-        } else {
-          await useHttpPostForm("/api/like/like", {
-            body: {
-              entityType: "comment",
-              entityId: comment.id,
-            },
-          });
-          comment.liked = true;
-          comment.likeCount = comment.likeCount + 1;
-          useMsgSuccess("点赞成功");
-        }
-      } catch (e) {
-        useCatchError(e);
-      }
-    },
-    switchShowReply(comment) {
-      if (!this.user) {
-        useMsgSignIn();
-        return;
-      }
+});
 
-      if (this.reply.commentId === comment.id) {
-        this.hideReply(comment);
-      } else {
-        this.reply.commentId = comment.id;
-        setTimeout(() => {
-          this.$refs[`editor${comment.id}`][0].focus();
-        }, 0);
-      }
-    },
-    hideReply(comment) {
-      this.reply.commentId = 0;
-      this.reply.value.content = "";
-      this.reply.value.imageList = [];
-    },
-    async submitReply(parent) {
-      try {
-        const ret = await useHttpPostForm("/api/comment/create", {
-          body: {
-            entityType: "comment",
-            entityId: parent.id,
-            content: this.reply.value.content,
-            imageList:
-              this.reply.value.imageList && this.reply.value.imageList.length
-                ? JSON.stringify(this.reply.value.imageList)
-                : "",
-          },
-        });
-        this.hideReply();
-        this.appendReply(parent, ret);
-        useMsgSuccess("发布成功");
-      } catch (e) {
-        useCatchError(e);
-      }
-    },
-    onReply(parent, comment) {
-      this.appendReply(parent, comment);
-    },
-    appendReply(parent, comment) {
-      if (parent.replies && parent.replies.results) {
-        parent.replies.results.push(comment);
-      } else {
-        parent.replies = {
-          results: [comment],
-        };
-      }
-    },
-  },
+const userStore = useUserStore();
+const commentsLoadMore = ref(null);
+
+const append = (data) => {
+  if (commentsLoadMore.value) {
+    commentsLoadMore.value.unshiftResults(data);
+  }
+};
+
+const like = async (comment) => {
+  try {
+    if (comment.liked) {
+      await useHttpPostForm("/api/like/unlike", {
+        body: {
+          entityType: "comment",
+          entityId: comment.id,
+        },
+      });
+      comment.liked = false;
+      comment.likeCount = comment.likeCount > 0 ? comment.likeCount - 1 : 0;
+      useMsgSuccess("已取消点赞");
+    } else {
+      await useHttpPostForm("/api/like/like", {
+        body: {
+          entityType: "comment",
+          entityId: comment.id,
+        },
+      });
+      comment.liked = true;
+      comment.likeCount = comment.likeCount + 1;
+      useMsgSuccess("点赞成功");
+    }
+  } catch (e) {
+    useCatchError(e);
+  }
 };
+
+const switchShowReply = (comment) => {
+  if (!userStore.user) {
+    useMsgSignIn();
+    return;
+  }
+
+  if (reply.commentId === comment.id) {
+    hideReply(comment);
+  } else {
+    reply.commentId = comment.id;
+    // // TODO
+    // setTimeout(() => {
+    //   this.$refs[`editor${comment.id}`][0].focus();
+    // }, 0);
+  }
+};
+
+const hideReply = (comment) => {
+  reply.commentId = 0;
+  reply.value.content = "";
+  reply.value.imageList = [];
+};
+
+const submitReply = async (parent) => {
+  try {
+    const ret = await useHttpPostForm("/api/comment/create", {
+      body: {
+        entityType: "comment",
+        entityId: parent.id,
+        content: reply.value.content,
+        imageList:
+          reply.value.imageList && reply.value.imageList.length
+            ? JSON.stringify(reply.value.imageList)
+            : "",
+      },
+    });
+    hideReply();
+    appendReply(parent, ret);
+    useMsgSuccess("发布成功");
+  } catch (e) {
+    useCatchError(e);
+  }
+};
+
+const onReply = (parent, comment) => {
+  appendReply(parent, comment);
+};
+
+const appendReply = (parent, comment) => {
+  if (parent.replies && parent.replies.results) {
+    parent.replies.results.push(comment);
+  } else {
+    parent.replies = {
+      results: [comment],
+    };
+  }
+};
+
+defineExpose({
+  append,
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/site/src/components/CommentSubList.vue b/site/src/components/CommentSubList.vue
index 0970e6878..ee3e8daec 100644
--- a/site/src/components/CommentSubList.vue
+++ b/site/src/components/CommentSubList.vue
@@ -13,7 +13,6 @@ export default {
   data() {
     return {
       replies: this.data,
-      showReplyCommentId: 0,
       reply: {
         quoteId: 0,
         value: {
diff --git a/site/src/components/LoadMoreAsync.vue b/site/src/components/LoadMoreAsync.vue
index 0021ca88d..adb23c20f 100644
--- a/site/src/components/LoadMoreAsync.vue
+++ b/site/src/components/LoadMoreAsync.vue
@@ -97,14 +97,14 @@ function renderData(data) {
   }
 }
 
-function unshiftResults(item) {
+const unshiftResults = (item) => {
   if (item && pageData && pageData.results) {
     pageData.results.unshift(item);
   }
-}
+};
 
 defineExpose({
-  refresh,
+  // refresh,
   unshiftResults,
 });
 </script>
diff --git a/site/src/pages/user/favorites.vue b/site/src/pages/user/favorites.vue
index 7f664682f..4ee16d3bf 100644
--- a/site/src/pages/user/favorites.vue
+++ b/site/src/pages/user/favorites.vue
@@ -8,11 +8,7 @@
     </div>
 
     <div class="widget-content">
-      <load-more-async
-        ref="commentsLoadMore"
-        v-slot="{ results }"
-        url="/api/user/favorites"
-      >
+      <load-more-async v-slot="{ results }" url="/api/user/favorites">
         <ul v-if="results && results.length" class="favorite-list">
           <li
             v-for="item in results"