✨ 升级到Nuxt4

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

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>