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> |