WebIndex/pages/article/[cid].vue

<script setup lang="ts">
const route = useRoute()
const cid = route.params.cid as string
const content = ref<IBlogResponse<IPostFull>>()

const getPost = get<IBlogResponse<IPostFull>, any>('/blog/index.php/api/post', {
  params: {
    cid: cid,
    md: false
  }
})

const title = computed(() => content.value?.data.title || 'Can not see me... can not see me...')
const text = computed(() => content.value?.data.text || '## Ops!')
const date = computed(() => new Date((content.value?.data.date.timeStamp || 0) * 1000)
    .toISOString()
    .split('T')[0]
)
const category = computed(() => content.value?.data.category || 'default')
const url = computed(() => content.value?.data.url || '/error/404')

content.value = await getPost()
</script>

<template>
  <section class="container m-4 mx-auto rounded-xl bg-white p-8 shadow-md lg:max-w-screen-lg">
    <div class="mb-4 border-b-2 border-dashed border-gray-200 pb-4">
      <h1 class="text-center text-3xl font-bold">{{ title }}</h1>
      <div class="flex w-full items-center justify-center gap-4 text-gray-600">
        <!-- 日期 -->
        <div class="flex items-center gap-2">
          <font-awesome-icon :icon="['far', 'clock']" />
          <time>{{ date }}</time>
        </div>
        <!-- 分类 -->
        <div class="flex items-center gap-2">
          <font-awesome-icon :icon="['far', 'folder']" />
          <span>{{ category }}</span>
        </div>
        <div class="flex items-center gap-2">
          <font-awesome-icon :icon="['fas', 'link']" />
          <a :href="url">原文链接</a>
        </div>
      </div>
    </div>
    <markdown-section :content="text"/>
  </section>
</template>

<style scoped>

</style>