85 lines
2.6 KiB
Vue
85 lines
2.6 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import {computed} from "vue";
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
commit: IActivity<IContent>
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const 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']
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const time = computed(() => timeDifference(props.commit.created))
|
|||
|
|
|
|||
|
|
const timeDifference = (dateString: string): string => {
|
|||
|
|
const targetDate = new Date(dateString);
|
|||
|
|
const currentDate = new Date();
|
|||
|
|
|
|||
|
|
const diffInMillis = currentDate.getTime() - targetDate.getTime();
|
|||
|
|
|
|||
|
|
const minutes = Math.floor(diffInMillis / (1000 * 60));
|
|||
|
|
const hours = Math.floor(diffInMillis / (1000 * 60 * 60));
|
|||
|
|
const days = Math.floor(diffInMillis / (1000 * 60 * 60 * 24));
|
|||
|
|
const months = Math.floor(diffInMillis / (1000 * 60 * 60 * 24 * 30));
|
|||
|
|
const 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} 个月前`;
|
|||
|
|
} else {
|
|||
|
|
return `${years} 年前`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const 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>
|