From 4c0d15b255d6953626125f82ba149a36f4d36cb0 Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Tue, 14 Jan 2025 03:00:07 +0800
Subject: [PATCH] change recent activity style

---
 components/card/GitCard.vue | 85 +++++++++++++++++++++++--------------
 pages/index.vue             | 28 ++++--------
 plugins/fontawsome.ts       |  3 +-
 3 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/components/card/GitCard.vue b/components/card/GitCard.vue
index 9248d12..ce2e5ac 100644
--- a/components/card/GitCard.vue
+++ b/components/card/GitCard.vue
@@ -2,15 +2,19 @@
 import { computed } from 'vue'
 
 const props = defineProps<{
-    commit: IActivity<IContent>
+    commit: IStrictActivity
   }>(),
 
+  commit_ref_name = computed(() => props.commit.ref_name.substring(props.commit.ref_name.lastIndexOf('/') + 1)),
+
   icon = computed(() => {
     switch (props.commit.op_type) {
       case 'merge_pull_request':
         return ['fas', 'code-merge']
       case 'create_repo':
-        return ['fab', 'git-alt']
+        return ['fas', 'book-medical']
+      case 'delete_branch':
+      case 'delete_tag':
       case 'commit_repo':
       default:
         return ['fas', 'code-commit']
@@ -46,47 +50,62 @@ const props = defineProps<{
 
     return `${years} 年前`
   },
-
-  handleClick = () => {
-    window.open(props.commit.repo.html_url, '_self')
-  }
+  calcHeight = (n: number) => `${n * 2.5}rem`
 </script>
 
 <template>
-  <div
-    class="group container relative flex h-36 w-full overflow-hidden rounded-2xl transition-all
-              hover:cursor-pointer hover:shadow-md"
-    @click="handleClick"
-  >
-    <!-- 提交图标 -->
-    <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:opacity-0
-                before:blur before:transition-all group-hover:before:opacity-100"
-    >
+  <div class="relative bg-transparent p-4 transition-all duration-500 group lg:hover:scale-105 lg:hover:rounded-xl lg:hover:shadow">
+    <!-- 标题部分 -->
+    <div class="relative flex items-center gap-4 text-lg">
       <font-awesome-icon
+        class="h-8 w-10"
         :icon="icon"
-        class="transition-all group-hover:scale-110"
       />
+      <p v-if="commit.op_type === 'commit_repo' && commit.content">
+        推送到了仓库 {{ commit.repo.owner.login }}/{{ commit.repo.name }} 的 <span>{{ commit_ref_name }}</span> 分支
+      </p>
+      <p v-else-if="commit.op_type === 'commit_repo' && commit.content === null">
+        于 {{ commit.repo.owner.login }}/{{ commit.repo.name }} 创建了分支 {{ commit_ref_name }}
+      </p>
+      <p v-else-if="commit.op_type === 'create_repo'">
+        创建了仓库 {{ commit.repo.owner.login }}/{{ commit.repo.name }}
+      </p>
+      <span class="absolute top-0 right-0 hidden lg:block">{{ time }}</span>
     </div>
-    <!-- 内容 -->
-    <div class="flex-1 overflow-hidden bg-white p-4">
-      <div class="mr-12 truncate text-2xl font-bold">
-        仓库：{{ commit.repo.name }}
-      </div>
-      <span class="text-xl line-clamp-2">{{ commit.content.HeadCommit.Message }}</span>
-      <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 right-0 bottom-0 m-4 rounded bg-gray-300 px-2">
+    <!-- 提交内容 -->
+    <div
+      v-if="commit.content"
+      class="ml-14 overflow-hidden transition-all duration-500 lg:invisible lg:opacity-0
+             lg:h-0 lg:group-hover:h-[999px] lg:group-hover:visible lg:group-hover:opacity-100"
+      :style="{ maxHeight: calcHeight(commit.content.Commits.length) }"
+    >
+      <div
+        v-for="content in commit.content.Commits"
+        :key="content.Sha1"
+        class="my-2 flex items-center gap-2"
+      >
         <font-awesome-icon
-          :icon="['far', 'clock']"
-          class="mr-1 text-sm"
+          class="h-4 w-5"
+          :icon="icon"
         />
-        {{ time }}
-      </span>
+        <!-- SHA1 -->
+        <nuxt-link
+          :to="`https://cantyonion.site/git/${commit.repo.owner.login}/${commit.repo.name}/commit/${content.Sha1}`"
+          class="rounded bg-gray-200 px-2 transition-all hover:bg-gray-400"
+          style="font-family: 'LXGW WenKai Mono', monospace"
+        >{{ content.Sha1.substring(0, 10) }}</nuxt-link>
+        <!-- 提交信息 -->
+        <span class="truncate text-nowrap">{{ content.Message }}</span>
+      </div>
+      <!-- 比较链接 -->
+      <nuxt-link
+        v-if="commit.content.Commits.length > 1"
+        :to="`https://cantyonion.site/git/${commit.content.CompareURL}`"
+        class="text-blue-500 hover:text-blue-700"
+        style="font-family: 'LXGW WenKai Mono', monospace"
+      >比较 {{ commit.content.Commits.length }} 提交 &gt;&gt;</nuxt-link>
     </div>
+    <div class="absolute top-0 right-0 bottom-0 left-0 -z-10 transition-all duration-500 lg:group-hover:rounded-xl lg:group-hover:bg-white/10 lg:group-hover:backdrop-blur-2xl" />
   </div>
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
index 952a71d..74fffd3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -22,7 +22,6 @@ const { $mitt } = useNuxtApp(),
     git: undefined,
   }),
 
-  config = useRuntimeConfig(),
   getBlogRecentPost = get<IBlogResponse<IPostsData>, unknown>('/blog/index.php/api/posts', {
     params: {
       showDigest: 'excerpt',
@@ -30,11 +29,9 @@ const { $mitt } = useNuxtApp(),
     },
   }),
   getActivity = get<IActivity[], unknown>('/git/api/v1/users/cantyonion/activities/feeds', {
-    headers: {
-      Authorization: ` ${config.public.gitApiKey}`,
-    },
     params: {
-      limit: 10,
+      'limit': 10,
+      'only-performed-by': true,
     },
   }),
 
@@ -49,25 +46,16 @@ const { $mitt } = useNuxtApp(),
     }
     return recentPosts.value
   }),
-  activitiesData = computed((): IActivity<IContent>[] => {
+  activitiesData = computed((): IStrictActivity[] => {
     if (!Array.isArray(recentActivities.value)) {
       return []
     }
     return recentActivities.value.map((item) => {
-      try {
-        if (item.op_type === 'commit_repo') {
-          return {
-            ...item,
-            content: JSON.parse(item.content),
-          }
-        }
-        return null
+      return {
+        ...item,
+        content: typeof item.content === 'string' && item.content ? JSON.parse(item.content) : null,
       }
-      catch (e) {
-        console.error(e)
-        return null
-      }
-    }).filter(item => item !== null)
+    })
   }),
 
   reloadPosts = async () => {
@@ -158,7 +146,7 @@ onMounted(() => {
           @reload="reloadActivities"
         >
           <template #default>
-            <div class="grid w-full grid-cols-1 gap-4 lg:grid-cols-2">
+            <div class="w-full rounded-xl bg-white divide-y divide-dashed">
               <card-git-card
                 v-for="item in activitiesData"
                 :key="item.id"
diff --git a/plugins/fontawsome.ts b/plugins/fontawsome.ts
index 2f8f210..4841a47 100644
--- a/plugins/fontawsome.ts
+++ b/plugins/fontawsome.ts
@@ -15,6 +15,7 @@ import {
   faLink,
   faPen,
   faXmark,
+  faBookMedical,
 } from '@fortawesome/free-solid-svg-icons'
 import { faClock, faFolder } from '@fortawesome/free-regular-svg-icons'
 import { faGithubAlt, faQq, faSteamSymbol, faWeibo } from '@fortawesome/free-brands-svg-icons'
@@ -26,7 +27,7 @@ config.autoAddCss = false
 export default defineNuxtPlugin((nuxtApp) => {
   library.add(
     faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight,
-    faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars, faChevronDown, faFolder, faLink,
+    faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars, faChevronDown, faFolder, faLink, faBookMedical,
   )
 
   nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)