115 lines
4.0 KiB
Vue
115 lines
4.0 KiB
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.Len }} 提交 >></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>
|