167 lines
3.9 KiB
Vue
167 lines
3.9 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, onMounted, ref } from 'vue'
|
|
|
|
type errObj = {
|
|
blog?: object
|
|
git?: object
|
|
}
|
|
|
|
const { $mitt } = useNuxtApp(),
|
|
recentPosts = ref<IPost[] | null>(null),
|
|
recentActivities = ref<IActivity[] | null>(null),
|
|
isLoading = ref({
|
|
blog: true,
|
|
git: true,
|
|
}),
|
|
isError = ref({
|
|
blog: false,
|
|
git: false,
|
|
}),
|
|
errMsg = ref<errObj>({
|
|
blog: undefined,
|
|
git: undefined,
|
|
}),
|
|
|
|
config = useRuntimeConfig(),
|
|
getBlogRecentPost = get<IBlogResponse<IPostsData>, any>('/blog/index.php/api/posts', {
|
|
params: {
|
|
showDigest: 'excerpt',
|
|
limit: 100,
|
|
},
|
|
}),
|
|
getActivity = get<IActivity[], any>('/git/api/v1/users/cantyonion/activities/feeds', {
|
|
headers: {
|
|
Authorization: ` ${config.public.gitApiKey}`,
|
|
},
|
|
params: {
|
|
limit: 10,
|
|
},
|
|
}),
|
|
|
|
hasPosts = computed(() => (recentPosts.value ?? []).length > 0),
|
|
hasActivities = computed(() => (recentActivities.value ?? []).length > 0),
|
|
postsData = computed(() => {
|
|
if (!recentPosts.value) { return [] }
|
|
if (recentPosts.value.length > 4) { return recentPosts.value.slice(0, 4) }
|
|
return recentPosts.value
|
|
}),
|
|
activitiesData = computed((): IActivity<IContent>[] => {
|
|
if (!Array.isArray(recentActivities.value)) { return [] }
|
|
return recentActivities.value.map((item) => {
|
|
try {
|
|
if (item.op_type === 'commit_repo') {
|
|
return {
|
|
...item,
|
|
content: JSON.parse(item.content),
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
catch (e) {
|
|
return null
|
|
}
|
|
}).filter(item => item !== null)
|
|
}),
|
|
|
|
reloadPosts = async () => {
|
|
try {
|
|
isLoading.value.blog = true
|
|
isError.value.blog = false
|
|
const postData = await getBlogRecentPost()
|
|
if (postData !== null) { recentPosts.value = postData.data.dataSet }
|
|
}
|
|
catch (e) {
|
|
isError.value.blog = true
|
|
errMsg.value.blog = e as object
|
|
}
|
|
finally {
|
|
isLoading.value.blog = false
|
|
}
|
|
},
|
|
|
|
reloadActivities = async () => {
|
|
try {
|
|
isLoading.value.git = true
|
|
isError.value.git = false
|
|
recentActivities.value = await getActivity()
|
|
}
|
|
catch (e) {
|
|
isError.value.git = true
|
|
errMsg.value.git = e as object
|
|
}
|
|
finally {
|
|
isLoading.value.git = false
|
|
}
|
|
}
|
|
|
|
await Promise.allSettled([reloadPosts(), reloadActivities()])
|
|
|
|
onMounted(() => {
|
|
$mitt.emit('startLoading', false)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 个人介绍 -->
|
|
<card-full-screen-intro-card />
|
|
|
|
<div class="container mx-auto xl:max-w-screen-xl">
|
|
<!-- 博客部分 -->
|
|
<section class="w-full px-4 sm:px-0">
|
|
<!-- 标题部分 -->
|
|
<card-title
|
|
:icon="['fas', 'blog']"
|
|
title="最近文章"
|
|
/>
|
|
|
|
<card-section-card
|
|
:empty="!hasPosts"
|
|
:error="isError.blog"
|
|
:loading="isLoading.blog"
|
|
:err-msg="errMsg.blog"
|
|
@reload="reloadPosts"
|
|
>
|
|
<template #default>
|
|
<div class="grid w-full grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
<card-article-card
|
|
v-for="item in postsData"
|
|
:key="item.cid"
|
|
:post="item"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</card-section-card>
|
|
</section>
|
|
|
|
<!-- Git部分 -->
|
|
<section class="my-4 w-full px-4 sm:px-0">
|
|
<card-title
|
|
:icon="['fas', 'code']"
|
|
title="最近活动"
|
|
/>
|
|
|
|
<card-section-card
|
|
:empty="!hasActivities"
|
|
:error="isError.git"
|
|
:loading="isLoading.git"
|
|
:err-msg="errMsg.git"
|
|
@reload="reloadActivities"
|
|
>
|
|
<template #default>
|
|
<div class="grid w-full grid-cols-1 gap-4 lg:grid-cols-2">
|
|
<card-git-card
|
|
v-for="item in activitiesData"
|
|
:key="item.id"
|
|
:commit="item"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</card-section-card>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|