WebIndex/components/card/GitCard.vue

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps<{
    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 ['fas', 'book-medical']
      case 'delete_branch':
      case 'delete_tag':
      case 'commit_repo':
      default:
        return ['fas', 'code-commit']
    }
  }),

  time = computed(() => timeDifference(props.commit.created)),

  timeDifference = (dateString: string): string => {
    const targetDate = new Date(dateString),
      currentDate = new Date(),

      diffInMillis = currentDate.getTime() - targetDate.getTime(),

      minutes = Math.floor(diffInMillis / (1000 * 60)),
      hours = Math.floor(diffInMillis / (1000 * 60 * 60)),
      days = Math.floor(diffInMillis / (1000 * 60 * 60 * 24)),
      months = Math.floor(diffInMillis / (1000 * 60 * 60 * 24 * 30)),
      years = Math.floor(diffInMillis / (1000 * 60 * 60 * 24 * 365))

    if (minutes < 60) {
      return `${minutes} 分钟前`
    }
    else if (hours < 24) {
      return `${hours} 小时前`
    }
    else if (days < 30) {
      return `${days} 天前`
    }
    else if (months < 12) {
      return `${months} 个月前`
    }

    return `${years} 年前`
  },
  calcHeight = (n: number) => `${n * 2.5}rem`
</script>

<template>
  <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"
      />
      <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
      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
          class="h-4 w-5"
          :icon="icon"
        />
        <!-- 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>

<style scoped>

</style>