feat: 添加点赞动画效果和优化点赞图标

- 新增点赞动画效果，使用CSS动画实现点赞时的缩放效果
- 替换点赞图标为红色版本，并在点赞时显示动画
- 在评论列表和详情页统一使用新的点赞图标
- 添加Like组件用于显示点赞动画
- 优化代码结构，调整部分样式和布局

components/commentList.vue

@@ -29,7 +29,7 @@
                                 <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
                             </div>
                         </div>
-                        <div class="numberwords" style="margin: 0;" v-if="editInput">{{ editInput.length }}/1000</div>
+                        <div class="numberwords" style="margin: 0" v-if="editInput">{{ editInput.length }}/1000</div>
                     </div>
                 </div>
                 <div class="btn-list flexacenter">
@@ -109,7 +109,7 @@
                         <img class="comment-icon" @click="openAnswerCommentsChild(index)" src="/img/comment-icon-gray.svg" />
                         <div class="flexacenter like-box" @click="operateAnswerCommentsLike(item.token, index)">
                             <img class="like-icon" v-if="item['islike'] == 0" src="/img/like-icon-gray.png" />
-                            <img class="like-icon" v-else src="/img/like-icon-colours.png" />
+                            <img class="like-icon" v-else src="/img/like-red-pitch.png" />
                             <div class="like-quantity">{{ item["likenum"] || "" }}</div>
                         </div>
                     </div>
@@ -184,7 +184,7 @@
                                 <img class="comment-icon" @click="openAnswerCommentsChild(index, i)" src="/img/comment-icon-gray.svg" />
                                 <div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite.token, index, i)">
                                     <img class="like-icon" v-if="ite['islike'] == 0" src="/img/like-icon-gray.png" />
-                                    <img class="like-icon" v-else src="/img/like-icon-colours.png" />
+                                    <img class="like-icon" v-else src="/img/like-red-pitch.png" />
                                     <div class="like-quantity">{{ ite["likenum"] || "" }}</div>
                                 </div>
                             </div>
@@ -248,6 +248,8 @@
             </template>
         </el-dialog>
     </div>
+
+    <Like v-if="isLikeGif"></Like>
 </template>
 <script setup>
 const props = defineProps({
@@ -369,7 +371,6 @@ let picture = ref({});
 
 let inputTextarea = ref("");
 
-
 // 监听 detailsToken 的变化
 watch(
     detailsToken,
@@ -646,8 +647,11 @@ const submitAnswerComments = (index, i) => {
         });
 };
 
+let isLikeGif = ref(false);
+let isLikeTimer = null;
+
 // 回答-评论 点赞
-const operateAnswerCommentsLike = (token, index, i) => {    
+const operateAnswerCommentsLike = (token, index, i) => {
     if (realname.value == 0 && user.value.uin > 0) {
         openAttest();
         return;
@@ -663,16 +667,26 @@ const operateAnswerCommentsLike = (token, index, i) => {
     }).then((res) => {
         if (res.code != 200) return;
         let data = res.data;
+        const status = data["status"] || 0;
 
         if (i != undefined) {
-            commentList.value[index].child[i]["islike"] = data["status"];
+            commentList.value[index].child[i]["islike"] = status;
             commentList.value[index].child[i]["likenum"] = data["likenum"];
         } else {
-            commentList.value[index]["islike"] = data["status"];
+            commentList.value[index]["islike"] = status;
             commentList.value[index]["likenum"] = data["likenum"];
         }
 
         handleMsg("success", res["message"] || "操作成功");
+
+        if (status) {
+            isLikeGif.value = false;
+            clearTimeout(isLikeTimer);
+            nextTick(() => {
+                isLikeGif.value = true;
+                isLikeTimer = setTimeout(() => (isLikeGif.value = false), 2000);
+            });
+        }
     });
 };
 
@@ -683,7 +697,7 @@ const openAnswerCommentsChild = (index, i) => {
         openAttest();
         return;
     }
-    
+
     if (isNeedLogin.value) {
         goLogin();
         return;