修改细节

src/api/git.ts

@@ -10,7 +10,7 @@ export async function getActivity(): Promise<IActivity[]> {
       Authorization: ` ${TOKEN}`,
     },
     params: {
-      limit: 4
+      limit: 10
     }
   })
 }

src/components/card/GitCard.vue

@@ -45,25 +45,33 @@ const timeDifference = (dateString: string): string => {
   }
 }
 
+const handleClick = () => {
+  window.open(props.commit.repo.html_url, '_self')
+}
+
 </script>
 
 <template>
-  <div class="container relative flex h-36 w-full overflow-hidden rounded-2xl hover:shadow-md transition-all">
+  <div
+      class="container relative flex h-36 w-full overflow-hidden rounded-2xl transition-all hover:cursor-pointer hover:shadow-md"
+      @click="handleClick"
+  >
     <!-- 提交图标 -->
-    <div class="flex h-36 w-36 items-center justify-center bg-pink-300 text-5xl text-white">
+    <div
+        class="before:absolute relative before:top-0 before:right-0 before:bottom-0 flex h-36 before:w-2 w-36 items-center justify-center bg-pink-300 before:bg-pink-300 text-5xl text-white before:blur">
       <font-awesome-icon :icon="icon"/>
     </div>
     <!-- 内容 -->
-    <div class="flex-1 bg-white p-4 overflow-hidden">
+    <div class="flex-1 overflow-hidden bg-white p-4">
-      <div class="text-2xl font-bold mr-12 truncate">
+      <div class="mr-12 truncate text-2xl font-bold">
         仓库：{{ commit.repo.name }}
       </div>
       <span class="text-xl">{{ commit.content.HeadCommit.Message }}</span>
-      <span class="absolute top-0 right-0 m-4 bg-gray-300 px-2 rounded hidden sm:block">
+      <span class="absolute top-0 right-0 m-4 hidden rounded bg-gray-300 px-2 sm:block">
         {{ commit.content.HeadCommit.Sha1.slice(0, 10) }}
       </span>
 
-      <span class="absolute bottom-0 right-0 m-4 bg-gray-300 px-2 rounded">
+      <span class="absolute right-0 bottom-0 m-4 rounded bg-gray-300 px-2">
         <font-awesome-icon :icon="['far', 'clock']" class="mr-1 text-sm"/>
         {{ time }}
       </span>

src/views/home/HomeView.vue

@@ -30,10 +30,16 @@ const postsData = computed(() => {
 })
 const activitiesData = computed((): IActivity<IContent>[] => {
   if (!recentActivities.value) return [];
-  return recentActivities.value.map(obj => ({
+  return recentActivities.value.map(item => {
-    ...obj,
+    try {
-    content: JSON.parse(obj.content)
+      return {
-  }))
+        ...item,
+        content: JSON.parse(item.content)
+      }
+    } catch (e) {
+      return null
+    }
+  }).filter(item => item !== null)
 })