WebIndex/components/card/GitCard.vue

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

const props = defineProps<{
    commit: IActivity<IContent>
  }>(),

  icon = computed(() => {
    switch (props.commit.op_type) {
      case 'merge_pull_request':
        return ['fas', 'code-merge']
      case 'create_repo':
        return ['fab', 'git-alt']
      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} 年前`
  },

  handleClick = () => {
    window.open(props.commit.repo.html_url, '_self')
  }
</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"
    >
      <font-awesome-icon
        :icon="icon"
        class="transition-all group-hover:scale-110"
      />
    </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">
        <font-awesome-icon
          :icon="['far', 'clock']"
          class="mr-1 text-sm"
        />
        {{ time }}
      </span>
    </div>
  </div>
</template>

<style scoped>

</style>