feat: 更新点赞功能样式和交互效果

- 替换点赞图标为红色版本
- 添加点赞动画效果
- 优化点赞交互体验
- 更新开发环境配置
- 修复缓存处理逻辑

components/DetailsArea.vue

@@ -16,25 +16,25 @@
             <div class="floor-left flexacenter">
                 <div class="item flexacenter" style="cursor: auto">
                     <img class="icon" src="@/assets/img/eye-icon-black.svg" />
-                    {{ info["views"] }}
+                    <div>{{ info["views"] }}</div>
                 </div>
                 <!-- <div class="item flexacenter" style="cursor: auto;">
                     <img class="icon" src="@/assets/img/riposte-icon.png" />
                     {{ ripostecount["total"] }}
                 </div> -->
                 <div class="item flexacenter" @click="handleLike">
-                    <img class="icon" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
+                    <img class="icon pitch" v-if="islike == 1" src="@/assets/img/like-red-pitch.png" />
                     <img class="icon" v-else src="@/assets/img/like-icon.png" />
-                    {{ info["likes"] || "" }}
+                    <div>{{ info["likes"] || "" }}</div>
                 </div>
                 <div class="item flexacenter" style="cursor: auto">
                     <img class="icon" src="@/assets/img/discuss-icon.png" />
-                    {{ commentComments }}
+                    <div>{{ commentComments }}</div>
                 </div>
                 <div class="item flexacenter" @click="handleCollect()">
                     <img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
                     <img class="icon" v-else src="@/assets/img/collect-icon.png" />
-                    {{ info["favs"] || "收藏" }}
+                    <div>{{ info["favs"] || "收藏" }}</div>
                 </div>
                 <ClientOnly>
                     <el-popover placement="bottom" width="628px" trigger="click" popper-style="padding: 0;border-radius: 10px;" v-model:visible="transmitBoxState">
@@ -84,6 +84,7 @@
             </div>
         </div>
     </div>
+    <Like v-if="isLikeGif"></Like>
 </template>
 
 <script setup>
@@ -174,6 +175,8 @@ const isBrowser = computed(() => {
     return process.client; // 使用 process.client 判断是否在浏览器环境下
 });
 
+let isLikeGif = ref(false);
+
 // 点赞
 const handleLike = () => {
     if (realname.value == 0 && userInfoWin.value.uin > 0) {
@@ -198,10 +201,17 @@ const handleLike = () => {
         }
 
         let data = res.data;
+        const status = data["status"];
+
         info.value["likes"] = data["count"];
-        islike.value = data["status"];
+        islike.value = status;
 
         ElMessage.success(res.message);
+
+        if (status) {
+            isLikeGif.value = true;
+            setTimeout(() => (isLikeGif.value = false), 2000);
+        }
     });
 };
 
@@ -298,6 +308,19 @@ const jointriposte = inject("jointriposte");
                     width: 16px;
                     margin-right: 5px;
                     // animation: anima 1s forwards;
+                    animation: liftAndReset 0.3s forwards;
+                }
+
+                @keyframes liftAndReset {
+                    0% {
+                        transform: scale(1);
+                    }
+                    50% {
+                        transform: scale(1.2);
+                    }
+                    100% {
+                        transform: scale(1);
+                    }
                 }
 
                 // :nth-of-type(1) {

components/DetailsComments.vue

@@ -123,7 +123,7 @@
                                 <!-- <img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" /> -->
                                 <img class="comment-icon" title="回复" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
                                 <div class="flexacenter like-box" @click="commentLike(index)">
-                                    <img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
+                                    <img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-red-pitch.png" />
                                     <img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
                                     <div class="like-quantity">{{ item["likenum"] || 0 }}</div>
                                 </div>
@@ -209,7 +209,7 @@
                                             </div>
                                             <img class="comment-icon" title="回复" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
                                             <div class="flexacenter like-box" @click="commentLike(index, i)">
-                                                <img class="like-icon" v-if="ite['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
+                                                <img class="like-icon" v-if="ite['islike'] == 1" src="@/assets/img/like-red-pitch.png" />
                                                 <img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
                                                 <div class="like-quantity">{{ ite["likenum"] || 0 }}</div>
                                             </div>
@@ -304,6 +304,8 @@
             </div>
         </template>
     </el-dialog>
+
+    <Like v-if="isLikeGif"></Like>
 </template>
 
 <script setup>
@@ -380,6 +382,9 @@ const getCommentList = () => {
         .finally(() => (commentLoading = false));
 };
 
+// 点赞
+let isLikeGif = ref(false);
+
 // 评论点赞
 const commentLike = (index, i) => {
     if (realname.value == 0 && userInfoWin.value.uin > 0) {
@@ -402,15 +407,25 @@ const commentLike = (index, i) => {
         if (res.code != 200) return;
         let data = res.data;
 
+        const status = data["status"];
+
         if (i != null) {
-            targetCommentList[index]["child"][i].islike = data["status"];
+            targetCommentList[index]["child"][i].islike = status;
             targetCommentList[index]["child"][i].likenum = data["likenum"];
         } else {
-            targetCommentList[index].islike = data["status"];
+            targetCommentList[index].islike = status;
             targetCommentList[index].likenum = data["likenum"];
         }
 
         ElMessage.success(res.message);
+
+        if (status) {
+            isLikeGif.value = false;
+            nextTick(() => {
+                isLikeGif.value = true;
+                setTimeout(() => (isLikeGif.value = false), 2000);
+            });
+        }
     });
 };