WebIndex/pages/index.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>