✨ 更新部分CSS 添加TS7.0依赖 有待配置

pages/index/archive/components/TimeLine.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { DataAnomaly } from '~/types/PostMetaData';
+import { DataAnomaly, sortMetaData } from '~/types/PostMetaData';
 import type { PostMetaData } from '~/types/PostMetaData';
 
-const articles = defineModel<PostMetaData[]>('articles', {
+const articles = defineModel<PostMetaData[]>('metadata', {
   default: () => [],
 });
 
@@ -10,28 +10,23 @@ const props = withDefaults(defineProps<{
   currentChoice?: 'time' | 'category';
 }>(),
 {
-  currentChoice: 'time',
+  currentChoice: 'time' as ('time' | 'category'),
 });
 
 watch(() => props.currentChoice, (newChoice) => {
   if (newChoice === 'time') {
-    articles.value.sort((a, b) => new Date(b.published_at || '2000-01-01').getTime() - new Date(a.published_at || '2000-01-01').getTime());
+    sortMetaData(articles.value, 'published_at');
   } else {
-    articles.value.sort((a, b) => {
-      if (a.category === b.category) {
-        return new Date(b.published_at || '2000-01-01').getTime() - new Date(a.published_at || '2000-01-01').getTime();
-      }
-      return a.category.localeCompare(b.category);
-    });
+    sortMetaData(articles.value, 'category');
   }
-});
+}, { immediate: true });
 
 function toArticlePage(article: PostMetaData) {
   navigateTo(`/article/${encodeURIComponent(article.id)}`);
 }
 
 function getYear(article: PostMetaData) {
-  return new Date(article.published_at).getFullYear();
+  return new Date(article?.published_at || 0).getFullYear();
 }
 
 function dateFormatToTime(date: Date | DataAnomaly) {
@@ -62,16 +57,16 @@ function dateFormatToDate(date: Date | DataAnomaly) {
     <div
         v-for="(article,index) of articles" :key="article.id"
         class="border-l-2 border-l-old-neutral-400 dark:border-l-old-neutral-500 pl-4">
-      <Transition
-          enter-active-class="transition-opacity duration-500 ease-in-out"
-          enter-from-class="opacity-0"
-          enter-to-class="opacity-100"
-          leave-active-class="transition-opacity duration-500 ease-in-out"
-          leave-from-class="opacity-100"
-          leave-to-class="opacity-0"
-      >
+<!--      <Transition-->
+<!--          enter-active-class="transition-opacity duration-500 ease-in-out"-->
+<!--          enter-from-class="opacity-0"-->
+<!--          enter-to-class="opacity-100"-->
+<!--          leave-active-class="transition-opacity duration-500 ease-in-out"-->
+<!--          leave-from-class="opacity-100"-->
+<!--          leave-to-class="opacity-0"-->
+<!--      >-->
         <div
-            v-if="currentChoice==='time' && index == 0 || getYear(article) != getYear(articles[index-1])"
+            v-if="currentChoice==='time' && (index == 0 || getYear(article) != getYear(articles[index-1]))"
             class="year-marker relative text-indigo-300 text-2xl pt-3 pb-3">
           {{ getYear(article) }}
         </div>
@@ -80,7 +75,7 @@ function dateFormatToDate(date: Date | DataAnomaly) {
             class="year-marker relative text-indigo-300 text-2xl pt-3 pb-3">
           {{ article.category }}
         </div>
-      </Transition>
+<!--      </Transition>-->
       <div class="flex items-center" @click="toArticlePage(article)">
         <div :title="dateFormatToTime(article.published_at)" class="text-sm w-12">
           {{ dateFormatToDate(article.published_at) }}

pages/index/archive/index.vue

@@ -1,16 +1,22 @@
 <script setup lang="ts">
-import { toMetaDataType } from '~/types/PostMetaData';
+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 { data: articles } = useAsyncData(async () => (await queryCollection('content').order('published_at', 'DESC').all()).map((article) => toMetaDataType(article)));
+const { data: srcPostsMetaData } = useAsyncData(async () => sortMetaData((await queryCollection('content').all()).map((x) => toMetaDataType(x)), 'published_at', true));
+const postsMetaData = ref<PostMetaData[]>([]);
 
-const currentChoice = ref('时间');
+const currentChoice = ref<'time' | 'category'>('time');
 
-// onMounted(() => {
-//   setTimeout(() => {
-//     console.log(articles.value);
-//   }, 2000);
-// });
+watch(srcPostsMetaData, () => {
+  postsMetaData.value = srcPostsMetaData.value?.filter((x) => !x.draft) || [];
+});
+
+const choiceItems = ref<RadioGroupItem>([
+  { label: '时间', value: 'time' },
+  { label: '类别', value: 'category' },
+]);
 
 </script>
 <template>
@@ -19,16 +25,16 @@ const currentChoice = ref('时间');
       <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-all 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">
-            test123456
+            这里还没想好放什么
           </div>
         </div>
       </div>
       <div
           class="transition-all 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="['时间', '类别']" size="sm"
+            v-model="currentChoice" orientation="horizontal" variant="table" :items="choiceItems as any[]" size="sm"
             class="mb-5"/>
-        <TimeLine v-if="articles" v-model:articles="articles!" :current-choice="currentChoice=== '时间'? 'time' : 'category'"/>
+        <TimeLine v-if="postsMetaData" v-model:metadata="postsMetaData" :current-choice="currentChoice"/>
       </div>
     </div>
   </div>