77 lines
2.1 KiB
Vue
77 lines
2.1 KiB
Vue
<template>
|
||
<div v-loading="loading" class="g-commit-list">
|
||
<template v-for="(item, index) in commitList" :key="index">
|
||
<Card simple class="g-commit-list-card overflow-hidden">
|
||
<div class="g-commit-list-card-head flex items-center text-light px-20 gap-20">
|
||
<Icon name="gt-commit" />{{ item.time }}
|
||
</div>
|
||
<CommitItem v-for="option in item.actions" :key="option.id" v-bind="option" :branch="props.branch" />
|
||
</Card>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import dayjs from 'dayjs';
|
||
import type { Commit } from '@/components/CommitItem/type';
|
||
|
||
import CommitItem from '@/components/CommitItem/index.vue';
|
||
|
||
interface IProps {
|
||
list: Array<Commit>;
|
||
loadMore?: boolean;
|
||
loadMoreText?: string;
|
||
branch?: string;
|
||
loading?:boolean;
|
||
}
|
||
const props = withDefaults(defineProps<IProps>(), {
|
||
loadMoreText: ''
|
||
});
|
||
|
||
// @TODO
|
||
// 1. 前端将传入的commit数组，自动按照日期进行整合。如果后端能按日期提供数据，则需要调整代码逻辑
|
||
// 2. 此处暂未按照日期进行排序
|
||
const commitList = computed(() => {
|
||
const timeMap = props.list.reduce((res: { [key: string]: any }, cur: Commit) => {
|
||
const time = dayjs(cur.createTime || cur.created_at).format('YYYY-MM-DD');
|
||
res[time] = res[time] || { time, actions: [] };
|
||
const {
|
||
id,
|
||
title,
|
||
message,
|
||
id: repoId,
|
||
authored_name: namespace,
|
||
verification_status: statusText,
|
||
committed_date: createTime,
|
||
committer_avatar_url: userAvatar,
|
||
author_name: username
|
||
} = cur;
|
||
const curItem = { ...cur, id, title, message, repoId, namespace, statusText, createTime, userAvatar, username };
|
||
curItem.repoId = res[time]?.repoId;
|
||
res[time].actions.push(curItem);
|
||
return res;
|
||
}, {});
|
||
|
||
return Object.entries(timeMap).map(([, value]) => value);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.g-commit-list {
|
||
margin-bottom: 12px;
|
||
:deep(.devui-icon__container) {
|
||
vertical-align: middle;
|
||
}
|
||
&-card {
|
||
margin-top: 12px;
|
||
&:first-of-type {
|
||
margin-top: 0;
|
||
}
|
||
&-head {
|
||
height: 36px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|