fix-add-loading-in-likes (#1256)

* Draft MR

* fix-add-loading-in-likes

---------

Co-authored-by: jiuling <[email protected]>

Author: ice201508

frontend/src/components/__tests__/shared/RepoHeader.spec.js

@@ -12,10 +12,16 @@ vi.mock('@/packs/clipboard', () => ({
 vi.mock('@/packs/useFetchApi', () => ({
   default: vi.fn((url) => ({
     put: () => ({
-      json: () => Promise.resolve({ error: { value: null } })
+      json: () => Promise.resolve({ 
+        error: { value: null }, 
+        response: { value: { status: 200 } } 
+      })
     }),
     delete: () => ({
-      json: () => Promise.resolve({ error: { value: null } })
+      json: () => Promise.resolve({ 
+        error: { value: null }, 
+        response: { value: { status: 200 } } 
+      })
     })
   }))
 }))
@@ -25,7 +31,15 @@ const mockRepoDetailStore = {
   likes: 10,
   userLikes: false,
   updateLikes: vi.fn(),
-  updateUserLikes: vi.fn()
+  updateUserLikes: vi.fn(),
+  // 添加其他可能需要的属性
+  hfPath: null,
+  msPath: null,
+  csgPath: null,
+  path: null,
+  githubPath: null,
+  githubStarNum: 0,
+  failedReason: ''
 }
 
 vi.mock('@/stores/RepoDetailStore', () => ({

frontend/src/components/shared/RepoHeader.vue

@@ -25,12 +25,11 @@
         {{ $t('all.private') }}
       </div>
       <div
-        class="flex cursor-pointer gap-1 border border-gray-300 bg-white px-2 pr-1 py-[3px] text-center text-xs text-gray-700 font-normal rounded-sm hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
-        :class="
-          repoDetailStore.userLikes === true
-            ? 'text-gray-400 border-gray-200'
-            : ''
-        "
+        class="flex gap-1 border border-gray-300 bg-white px-2 pr-1 py-[3px] text-center text-xs text-gray-700 font-normal rounded-sm hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
+        :class="[
+          repoDetailStore.userLikes === true ? 'text-gray-400 border-gray-200' : '',
+          isLikeLoading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+        ]"
         @click="clickLike">
         {{
           repoDetailStore.userLikes === false
@@ -136,12 +135,11 @@
         {{ $t('all.private') }}
       </div>
       <div
-        class="flex cursor-pointer gap-1 border border-gray-300 bg-white px-2 pr-1 py-[3px] text-center text-xs text-gray-700 font-normal rounded-sm hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
-        :class="
-          repoDetailStore.userLikes === true
-            ? 'text-gray-400 border-gray-200'
-            : ''
-        "
+        class="flex gap-1 border border-gray-300 bg-white px-2 pr-1 py-[3px] text-center text-xs text-gray-700 font-normal rounded-sm hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
+        :class="[
+          repoDetailStore.userLikes === true ? 'text-gray-400 border-gray-200' : '',
+          isLikeLoading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+        ]"
         @click="clickLike">
         {{
           repoDetailStore.userLikes === false
@@ -294,6 +292,8 @@
 
   const emit = defineEmits(['toggleSpaceLogsDrawer'])
 
+  const isLikeLoading = ref(false)
+
   const props = defineProps({
     avatar: String,
     name: String,
@@ -358,34 +358,62 @@
     }
   })
 
-  const clickLike = () => {
-    repoDetailStore.userLikes === true ? removeLike() : addLike()
+  const clickLike = async () => {
+    // 如果正在加载中，直接返回，防止重复点击
+    if (isLikeLoading.value) {
+      return
+    }
+    
+    isLikeLoading.value = true
+    
+    try {
+      if (repoDetailStore.userLikes === true) {
+        await removeLike()
+      } else {
+        await addLike()
+      }
+    } finally {
+      // 确保无论成功还是失败都要重置加载状态
+      isLikeLoading.value = false
+    }
   }
 
   const addLike = async () => {
-    const { error } = await useFetchApi(likeUrl.value).put().json()
-    if (error.value) {
-      ElMessage({
-        type: 'warning',
-        message: error.value.msg
-      })
-    } else {
-      repoDetailStore.updateLikes(repoDetailStore.likes + 1)
-      repoDetailStore.updateUserLikes(true)
+    const { error, response } = await useFetchApi(likeUrl.value).put().json()
+    
+    // 检查是否有错误或者响应状态码不是2xx
+    if (error.value || (response.value && response.value?.status >= 400)) {
+      // 如果是401状态码，不需要显示错误消息，因为会自动弹出登录对话框
+      if (response.value && response.value?.status !== 401) {
+        ElMessage({
+          type: 'warning',
+          message: error.value?.msg || '请求失败'
+        })
+      }
+      return
     }
+    
+    repoDetailStore.updateLikes(repoDetailStore.likes + 1)
+    repoDetailStore.updateUserLikes(true)
   }
 
   const removeLike = async () => {
-    const { error } = await useFetchApi(likeUrl.value).delete().json()
-    if (error.value) {
-      ElMessage({
-        type: 'warning',
-        message: error.value.msg
-      })
-    } else {
-      repoDetailStore.updateLikes(repoDetailStore.likes - 1)
-      repoDetailStore.updateUserLikes(false)
+    const { error, response } = await useFetchApi(likeUrl.value).delete().json()
+    
+    // 检查是否有错误或者响应状态码不是2xx
+    if (error.value || (response.value && response.value?.status >= 400)) {
+      // 如果是401状态码，不需要显示错误消息，因为会自动弹出登录对话框
+      if (response.value && response.value?.status !== 401) {
+        ElMessage({
+          type: 'warning',
+          message: error.value?.msg || '请求失败'
+        })
+      }
+      return
     }
+    
+    repoDetailStore.updateLikes(repoDetailStore.likes - 1)
+    repoDetailStore.updateUserLikes(false)
   }
 
   const repoUrl = computed(() => {