96 lines
2.7 KiB
Vue
96 lines
2.7 KiB
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>
|