54 lines
1.9 KiB
Vue
54 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { sortMetaData, toMetaDataType } from '~/types/PostMetaData';
|
|
import type { PostMetaData } from '~/types/PostMetaData';
|
|
import TimeLine from '~/pages/index/archive/components/TimeLine.vue';
|
|
import type { RadioGroupItem } from '@nuxt/ui';
|
|
|
|
const srcPostsMetaData = ref<PostMetaData[]>([]);
|
|
const postsMetaData = ref<PostMetaData[]>([]);
|
|
|
|
async function loadPostsMetaData() {
|
|
srcPostsMetaData.value = sortMetaData((await queryCollection('content').all()).map((x) => toMetaDataType(x)), 'published_at', true) || [];
|
|
srcPostsMetaData.value = srcPostsMetaData.value.filter((x) => !x.draft);
|
|
postsMetaData.value = srcPostsMetaData.value;
|
|
}
|
|
|
|
await loadPostsMetaData();
|
|
|
|
watch(srcPostsMetaData, () => {
|
|
postsMetaData.value = srcPostsMetaData.value || [];
|
|
});
|
|
|
|
const currentChoice = ref<'time' | 'category'>('time');
|
|
|
|
const choiceItems = ref<RadioGroupItem>([
|
|
{ label: '时间', value: 'time' },
|
|
{ label: '类别', value: 'category' },
|
|
]);
|
|
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="table w-full mt-6 mb-6">
|
|
<div class="sticky top-16 float-left bg-old-neutral-200 dark:bg-old-neutral-800 max-h-[calc(100vh-4rem)]">
|
|
<div class="relative duration-500 transition-[width] xl:w-80 w-0 mr-2/3 overflow-hidden">
|
|
<div class="w-80 top-0 left-0 text-gray-800 dark:text-white p-5">
|
|
这里还没想好放什么
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="transition-[width] duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
|
|
<URadioGroup
|
|
v-model="currentChoice" orientation="horizontal" variant="table" :items="choiceItems as any[]" size="sm"
|
|
class="mb-5"/>
|
|
<TimeLine v-if="postsMetaData" v-model:metadata="postsMetaData" :current-choice="currentChoice"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|