✨ 升级到Nuxt4

✨ 完成分类 标签的HTML搭建
🐛 修复ssg相关配置 之前错误的使用了SPA
🐛 修复部分ssg兼容问题

pages/index/about/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

pages/index/components/ArticleCard.vue

@@ -3,6 +3,7 @@
 import { DataAnomaly, defaultMetaData } from '~/types/PostMetaData';
 import type { PostMetaData } from '~/types/PostMetaData';
 import breakpointsHelper from '~/utils/BreakpointsHelper';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
 
 withDefaults(defineProps<{
   metaData?: PostMetaData;
@@ -90,9 +91,9 @@ function getCostTime(length: number | DataAnomaly | undefined) {
 
     </div>
     <div class="flex mt-2 justify-between h-28">
-        <div class="overflow-y-auto">
-          {{ metaData?.description }}
-        </div>
+      <overlay-scrollbars-component>
+        {{ metaData?.description }}
+      </overlay-scrollbars-component>
       <Transition
           enter-active-class="transition-opacity duration-500 ease-in-out"
           enter-from-class="opacity-0"
@@ -111,7 +112,6 @@ function getCostTime(length: number | DataAnomaly | undefined) {
             class="min-w-64"
         />
       </Transition>
-
     </div>
     <hr/>
     <div class="flex mt-2">
@@ -137,7 +137,6 @@ function getCostTime(length: number | DataAnomaly | undefined) {
             </div>
           </template>
         </HoverContent>
-
       </div>
     </div>
     <div v-if="Array.isArray(metaData?.tags)" class="flex items-top">

pages/index/components/SimpleCard.vue

@@ -12,12 +12,15 @@ const props = withDefaults(defineProps<{
 });
 const { data: rawbody } = useAsyncData('simpleCard:' + props.metaData.id, async () => (await queryCollection('content').where('id', '=', props.metaData.id).first())?.rawbody);
 const collapsed = ref(true);
-const typeChinese = new Map<string, string>([
+const typeChinese = new Map<string | undefined, string>([
   ['rambling', '絮语'],
   ['announcement', '公告'],
 ]);
 
-function dateFormat(date: Date | DataAnomaly) {
+function dateFormat(date: Date | DataAnomaly | undefined) {
+  if (!date) {
+    return 'date undefined';
+  }
   if (date === DataAnomaly.DataNotFound || date === DataAnomaly.Invalid) {
     return date;
   }
@@ -102,7 +105,7 @@ onUnmounted(() => {
       class="p-5 light:bg-old-neutral-200 dark:bg-old-neutral-800 min-h-64 transition-all duration-500"
       @click="reverseCollapsed">
     <div class="text-4xl">
-      {{ (typeChinese.get(metaData.type) || 'unknown Type') + '：' }}{{ props.metaData.title }}
+      {{ (typeChinese.get(metaData?.type) || 'unknown Type') + '：' }}{{ props.metaData.title }}
     </div>
     <div class="flex items-center mt-2 max-w-[400px] overflow-hidden">
 
@@ -134,7 +137,7 @@ onUnmounted(() => {
         </div>
       </div>
 
-      <div v-if="metaData.isPinned" class="flex items-center ml-2">
+      <div v-if="metaData?.isPinned" class="flex items-center ml-2">
         <Icon name="codicon:pinned"/>
         <div class="ml-1 text-nowrap">
           置顶
@@ -168,7 +171,7 @@ onUnmounted(() => {
         <HoverContent>
           <template #content>
             <div class="ml-1">
-              {{ dateFormat(props.metaData.updated_at[props.metaData.updated_at.length - 1]) }}
+              {{ dateFormat(props.metaData?.updated_at[props.metaData.updated_at.length - 1]) }}
             </div>
           </template>
           <template #hoverContent>

pages/index/friends/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

pages/index/index.vue

@@ -5,35 +5,39 @@ import type { PostMetaData } from '~/types/PostMetaData';
 import SimpleCard from '~/pages/index/components/SimpleCard.vue';
 import ArticleCard from '~/pages/index/components/ArticleCard.vue';
 
-const { data: srcPostsMetaData } = useAsyncData(async () => sortMetaData((await queryCollection('content').all()).map((x) => toMetaDataType(x)), 'published_at', true));
+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) || [];
+  postsMetaData.value = srcPostsMetaData.value;
+}
+
+await loadPostsMetaData();
+
 function toArticlePage(article: PostMetaData) {
   navigateTo(`/article/${encodeURIComponent(article.id)}`);
 }
+
 watch(srcPostsMetaData, () => {
   postsMetaData.value = srcPostsMetaData.value || [];
 });
 
-//
-// async function loadMetaData() {
-//
-// }
-function filterRuleChange(rule: string) {
-  if (rule === '')
-    postsMetaData.value = srcPostsMetaData.value || [];
-  else
-    postsMetaData.value = (srcPostsMetaData.value || []).filter((post) => post.type === rule);
+function filterRuleChange(rule: (data: PostMetaData) => boolean) {
+  postsMetaData.value = (srcPostsMetaData.value || []).filter(rule);
 }
 </script>
 
 <template>
   <div>
     <div class="table w-full mt-6 table-fixed">
-      <div class="sticky top-16 float-left bg-old-neutral-200 dark:bg-old-neutral-800 max-h-[calc(100vh-4rem)]">
+      <div class="sticky top-16 float-left max-h-[calc(100vh-4rem)]">
         <div class="relative duration-500 transition-all xl:w-80 w-0 overflow-hidden">
-          <div class="w-80 top-0 left-0 text-gray-800 dark:text-white p-5">
-            <PersonalCard
-                v-if="postsMetaData" :posts-meta-data="postsMetaData!"
+          <div class="w-80 top-0 left-0 text-gray-800 dark:text-white">
+<!--            <PersonalCard/>-->
+            <ArticleDescriptionCards
+                v-if="postsMetaData"
+                class="mb-5" :posts-meta-data="srcPostsMetaData!"
                 @filter-rule-change="filterRuleChange"/>
           </div>
         </div>