🐛 修复潜在的ssg问题

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

components/ArticleDescriptionCards.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import type { PostMetaData } from '~/types/PostMetaData';
+
+const props = withDefaults(defineProps<{
+  postsMetaData?: PostMetaData[];
+}>(), {
+  postsMetaData: () => [],
+});
+const emits = defineEmits<{
+  (event: 'filterRuleChange', rule: (data: PostMetaData) => boolean): void;
+}>();
+const articleCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'article').length || 0);
+const announcementCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'announcement').length || 0);
+const ramblingCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'rambling').length || 0);
+const countGroup = [
+  { name: '文章', count: articleCount, type: 'article' },
+  { name: '絮语', count: ramblingCount, type: 'rambling' },
+  { name: '公告', count: announcementCount, type: 'announcement' },
+];
+const categoryEnableStatus: Ref<boolean[]> = ref(Array(countGroup.length).fill(true));
+
+const categories = computed(() => {
+  const categoryMap = new Map<string, number>();
+  props.postsMetaData?.forEach((post) => {
+    if (post.category) {
+      categoryMap.set(post.category, (categoryMap.get(post.category) || 0) + 1);
+    }
+  });
+  let categoryArray = Array.from(categoryMap.entries());
+  categoryArray = categoryArray.sort((a, b) => b[1] - a[1]);
+  return categoryArray;
+});
+
+const tags = computed(() => {
+  const tagMap = new Map<string, number>();
+  props.postsMetaData?.forEach((post) => {
+    post.tags?.forEach((tag) => {
+      tagMap.set(tag, (tagMap.get(tag) || 0) + 1);
+    });
+  });
+  let tagArray = Array.from(tagMap.entries());
+  tagArray = tagArray.sort((a, b) => b[1] - a[1]);
+  return tagArray;
+});
+
+function updateCategoryEnableStatus(index: number) {
+  if (categoryEnableStatus.value.reduce((last, cur) => last && cur, true)) {
+    for (let i = 0; i < categoryEnableStatus.value.length; i++) {
+      if (i !== index) {
+        categoryEnableStatus.value[i] = false;
+      }
+    }
+  } else if (!categoryEnableStatus.value.reduce((last, cur, localIndex) => last || (localIndex === index ? false : cur), false)) {
+    for (let i = 0; i < categoryEnableStatus.value.length; i++) {
+      categoryEnableStatus.value[i] = true;
+    }
+  } else
+    categoryEnableStatus.value[index] = !categoryEnableStatus.value[index];
+  updateRule();
+}
+
+function updateRule() {
+  emits('filterRuleChange', (post) => {
+    for (let i = 0; i < categoryEnableStatus.value.length; i++) {
+      if (categoryEnableStatus.value[i] && post.type === countGroup[i]!.type) {
+        console.log('filter', post.title, 'true');
+        return true;
+      }
+    }
+    console.log('filter', post.title, 'false');
+    return false;
+  });
+}
+</script>
+
+<template>
+  <div>
+    <div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5">
+      <div class="text-2xl ml-1 flex items-center">
+        <Icon class="mr-2" name="material-symbols:category"/>
+        类型
+      </div>
+      <hr class="border-0 h-[1px] bg-old-neutral-600 mt-3 mb-1"/>
+      <div class="flex mt-4">
+        <div
+            v-for="(data, index) of countGroup"
+            :key="data.name"
+            class="flex items-center flex-col flex-1 text-xl cursor-pointer hover:text-sky-400 dark:hover:text-[#cccaff] transition-colors duration-300"
+            :class="{'text-old-neutral-400': !categoryEnableStatus[index]}"
+            @click="updateCategoryEnableStatus(index)"
+        >
+          <div>{{ data.name }}</div>
+          <div>{{ data.count }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5 mt-4">
+      <div class="text-2xl ml-1 flex items-center">
+        <Icon class="mr-2" name="material-symbols:book"/>
+        分类
+      </div>
+      <hr class="border-0 h-[1px] bg-old-neutral-600 mt-3 mb-1"/>
+      <div
+          v-for="([name,count],index) of categories" :key="index"
+          class="flex justify-between pl-4 pr-4 hover:text-sky-400 dark:hover:text-[#cccaff] transition-colors duration-300">
+        <div class="flex items-center">
+          <Icon
+              name="material-symbols:book-outline"
+              size="17"
+              class="mt-0.5 mr-1"
+          />
+          <div>{{ name }}</div>
+        </div>
+        <div>{{ count }}</div>
+      </div>
+    </div>
+    <div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5 mt-4">
+      <div class="text-2xl ml-1 flex items-center">
+        <Icon class="mr-2" name="material-symbols:bookmarks"/>
+        标签
+      </div>
+      <hr class="border-0 h-[1px] bg-old-neutral-600 mt-3 mb-1"/>
+      <div class="flex flex-wrap">
+        <div
+            v-for="([name,count],index) of tags" :key="index"
+            class="flex items-center justify-between text-[15px] pl-2 pr-2 m-1 rounded-2xl shadow-[0_0_0_1px_#888] hover:text-sky-400 dark:hover:text-[#cccaff] hover:shadow-[0_0_0_1px_#00bcff] dark:hover:shadow-[0_0_0_1px_#cccaff] transition-colors transition-shadow duration-300">
+          <Icon
+              name="clarity:hashtag-solid"
+              size="17"
+              class="mr-1 "
+          />
+          <div class="mr-1">{{ name }}</div>
+          <div class="">{{ count }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/PersonalCard.vue

@@ -1,72 +1,15 @@
 <script setup lang="ts">
-import type { PostMetaData } from '~/types/PostMetaData';
 
-const props = withDefaults(defineProps<{
-  postsMetaData?: PostMetaData[];
-}>(), {
-  postsMetaData: () => [],
-});
-const emits = defineEmits<{
-  (event: 'filterRuleChange', rule: string): void;
-}>();
-const articleCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'article').length || 0);
-const announcementCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'announcement').length || 0);
-const ramblingCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'rambling').length || 0);
-const countGroup = [
-  { name: '文章', count: articleCount, type: 'article' },
-  { name: '絮语', count: ramblingCount, type: 'rambling' },
-  { name: '公告', count: announcementCount, type: 'announcement' },
-];
-const categories = computed(() => {
-  const categoryMap = new Map<string, number>();
-  props.postsMetaData?.forEach((post) => {
-    if (post.category) {
-      categoryMap.set(post.category, (categoryMap.get(post.category) || 0) + 1);
-    }
-  });
-  return categoryMap;
-});
-let showType = '';
-
-function ruleChange(name: string) {
-  if (showType === name || name === '') {
-    showType = '';
-  } else {
-    showType = name;
-  }
-  emits('filterRuleChange', showType);
-}
 </script>
 
 <template>
-  <div class="transition-colors duration-500">
+<div>
+  <div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5">
+    Author: Lichx
     <div>
-      <div v-if="showType === ''" class="flex">
-        <div
-            v-for="data of countGroup"
-            :key="data.name"
-            class="flex items-center flex-col flex-1 text-xl cursor-pointer hover:text-sky-300 dark:hover:text-[#cccaff] transition-colors duration-300"
-            @click="ruleChange(data.type)"
-        >
-          <div>{{ data.name }}</div>
-          <div>{{ data.count }}</div>
-        </div>
-      </div>
-      <div v-else class="flex items-center hover:text-sky-300 dark:hover:text-[#cccaff] transition-colors duration-300" @click="ruleChange('')">
-        <div class="flex-1 text-2xl flex items-center justify-center">
-          <div>{{ countGroup.filter((x) => x.type === showType)[0].name }}</div>
-        </div>
-        <div class="flex-1 text-2xl flex items-center justify-center">
-          <div class="pr-8">{{ countGroup.filter((x) => x.type === showType)[0].count }}</div>
-        </div>
-<!--        <Icon-->
-<!--            name="mingcute:back-line" class="flex-1 text-5xl cursor-pointer dark:hover:text-[#cccaff] hover:text-sky-300 transition-colors duration-300"-->
-<!--            @click="ruleChange('')"/>-->
-      </div>
+    Contact me:
+    <a href="mailto:li_chx@qq.com" />
     </div>
   </div>
+</div>
 </template>
-
-<style scoped>
-
-</style>

components/ReadonlyMdEditor.vue

@@ -9,16 +9,28 @@ const props = withDefaults(defineProps<{
 }>(), {
   markdown: () => '## Hello World!',
 });
-console.log(props.markdown);
 const eraseHeaderMarkdown = computed(() => props.markdown.replace(/^---[\s\S]*?---\n?/, ''));
 
 const { colorMode } = storeToRefs(useColorModeStore());
 
+const mounted = ref(false);
+
+onMounted(() => {
+  mounted.value = true;
+});
+
 </script>
 
 <template>
   <div class="pt-0 bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500">
-    <MdPreview :editor-id="editorId" :theme="colorMode" :model-value="eraseHeaderMarkdown" class="transition-all duration-500 max-w-full"/>
+    <MdPreview
+        v-if="mounted"
+        :key="editorId + '-' + colorMode"
+    :editor-id="editorId"
+    :theme="colorMode"
+    :model-value="eraseHeaderMarkdown"
+    class="transition-all duration-500 max-w-full"
+    />
   </div>
 </template>
 

components/TechStackCard.vue

@@ -54,7 +54,7 @@ const renderChart = () => {
   const techStackPercent = props.techStackPercent as number[];
   if (!chartRef.value) return;
   const sum = techStackPercent.reduce((acc, val) => acc + val, 0);
-  const fullArr: [string, number, string, string, string][] = techStack.map((name, index) => [name, techStackPercent[index] / sum, techStackLightIconSVG.value[index] || '', techStackDarkIconSVG.value[index] || '', props.techStackThemeColors[index]] as [string, number, string, string, string]).sort((a, b) => b[1] - a[1]);
+  const fullArr: [string, number, string, string, string][] = techStack.map((name, index) => [name, techStackPercent[index]! / sum, techStackLightIconSVG.value[index] || '', techStackDarkIconSVG.value[index] || '', props.techStackThemeColors[index]] as [string, number, string, string, string]).sort((a, b) => b[1] - a[1]);
   const dataArr: [string, number][] = fullArr.map((x) => [x[0], x[1]]);
   const barHeight = 20;
   const gap = 10;
@@ -64,6 +64,7 @@ const renderChart = () => {
     chart: {
       type: 'bar',
       backgroundColor: 'transparent',
+      reflow: false,
     },
     credits: {
       enabled: false,
@@ -83,8 +84,8 @@ const renderChart = () => {
       labels: {
         useHTML: true,
         formatter: function () {
-          return `<div style="width: 25px; height: 25px;" title="${fullArr[this.pos][0]}">
-                    ${colorMode.value === 'light' ? fullArr[this.pos][2] : fullArr[this.pos][3]}
+          return `<div style="width: 25px; height: 25px;" title="${fullArr[this.pos]![0]}">
+                    ${colorMode.value === 'light' ? fullArr[this.pos]![2] : fullArr[this.pos]![3]}
                   </div>`;
         },
       },
@@ -114,7 +115,7 @@ const renderChart = () => {
     ],
     tooltip: {
       formatter: function () {
-        return `${fullArr[this.x][0]} ${toPercent(this.y)}`;
+        return `${fullArr[this.x]![0]} ${toPercent(this.y)}`;
       },
     },
     plotOptions: {
@@ -127,7 +128,8 @@ const renderChart = () => {
         dataLabels: {
           enabled: true,
           style: {
-            color: '#fff',
+            color: colorMode.value === 'light' ? '#4e4d55' : '#fff',
+            textOutline: 'none',
           },
           formatter: function () {
             return toPercent(this.y); // 自定义条形图值的显示格式
@@ -178,11 +180,15 @@ const scrollbarOptions = {
   },
 };
 
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
+});
 </script>
 
 <template>
   <div class="h-full">
-    <div v-if="noDataAvailable" class="flex items-center justify-center h-full p-8">
+    <div v-if="!mounted||noDataAvailable" class="flex items-center justify-center h-full p-8">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 112.01">
         <g id="_图层_1" data-name="图层 1">
           <polyline

layouts/UserLayout.vue

@@ -4,6 +4,9 @@ import useColorModeStore from '~/stores/colorModeStore';
 import { useWindowScroll } from '@vueuse/core';
 
 const { colorMode } = storeToRefs(useColorModeStore());
+watch(colorMode, () => {
+  console.log('colorMode changed:', colorMode.value);
+});
 const isHome = computed(() => useRoute().path === '/');
 const items = ref<NavigationMenuItem[]>([
   {
@@ -41,7 +44,6 @@ onMounted(() => {
 });
 const scrollY = useWindowScroll().y;
 const isScrollDown = ref(false);
-// gsap.registerPlugin(ScrollTrigger);
 
 watch(scrollY, (newY) => {
   if (newY > 0 && !collapsed.value) {
@@ -59,6 +61,11 @@ useRouter().beforeEach(() => {
 useRouter().afterEach(() => {
   isLoading.value = false;
 });
+
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
+});
 </script>
 
 <template>
@@ -73,43 +80,45 @@ useRouter().afterEach(() => {
         }"
           @mouseleave="collapsed = true">
         <!-- header -->
-        <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="colorMode === 'light'"
-              class="flex h-full w-full absolute bg-[url('/79d52228c770808810a310115567e6790380823a.png')] bg-cover bg-top ">
-            <slot name="header"/>
-          </div>
-          <div
-              v-else
-              class="flex h-full w-full absolute bg-[url('/anime-8788959.jpg')] bg-cover bg-center">
-            <slot name="header"/>
-          </div>
-        </Transition>
-        <!-- header picture -->
-        <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="isScrollDown">
+        <div v-if="mounted">
+          <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="colorMode === 'light'"
-                class="opacity-80 max-h-[48px] flex w-full h-full fixed bg-[url('/79d52228c770808810a310115567e6790380823a.png')] bg-cover bg-top"/>
+                class="flex h-full w-full absolute bg-[url('/79d52228c770808810a310115567e6790380823a.png')] bg-cover bg-top ">
+              <slot name="header"/>
+            </div>
             <div
                 v-else
-                class="opacity-20 max-h-[48px] flex w-full h-full fixed bg-[url('/anime-8788959.jpg')] bg-cover bg-center"/>
-          </div>
-        </Transition>
+                class="flex h-full w-full absolute bg-[url('/anime-8788959.jpg')] bg-cover bg-center">
+              <slot name="header"/>
+            </div>
+          </Transition>
+          <!-- header picture -->
+          <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="isScrollDown">
+              <div
+                  v-if="colorMode === 'light'"
+                  class="opacity-80 max-h-[48px] flex w-full h-full fixed bg-[url('/79d52228c770808810a310115567e6790380823a.png')] bg-cover bg-top"/>
+              <div
+                  v-else
+                  class="opacity-20 max-h-[48px] flex w-full h-full fixed bg-[url('/anime-8788959.jpg')] bg-cover bg-center"/>
+            </div>
+          </Transition>
+        </div>
         <!-- navbar -->
         <div
             class="fixed z-10 w-full transition-all duration-500 dark:bg-gray-800/60 bg-old-neutral-50/40 backdrop-blur-sm dark:backdrop-blur-md">
@@ -119,7 +128,8 @@ useRouter().afterEach(() => {
             </div>
             <div
                 class="transition-all duration-500 flex 2xl:w-[1240px] xl:w-[1020px] lg:w-[964px] md:w-[708px] sm:w-[580px] w-10/12">
-              <UNavigationMenu :items="items" :class="colorMode" class="w-full"/>
+                <UNavigationMenu v-if="mounted" :items="items" :class="colorMode" class="w-full"/>
+              <div v-else class="w-full h-12 animate-pulse"></div>
             </div>
             <div class="flex-1 overflow-hidden">
               <slot name="navbarRight" :is-scroll-down="isScrollDown"/>

nuxt.config.ts

@@ -2,7 +2,6 @@
 import tailwindcss from '@tailwindcss/vite';
 
 export default defineNuxtConfig({
-  ssr: false,
   compatibilityDate: '2025-05-15',
   devtools: { enabled: false },
   vite: {
@@ -19,6 +18,7 @@ export default defineNuxtConfig({
   css: ['~/assets/css/main.css'],
   ui: {
     colorMode: false,
+    fonts: false,
   },
   app: {
     head: {
@@ -32,8 +32,8 @@ export default defineNuxtConfig({
       script: [{ src: '/darkVerify.js' }],
     },
   },
-  sourcemap: {
-    server: true,
-    client: true,
-  },
+  // sourcemap: {
+  //   server: true,
+  //   client: true,
+  // },
 });

package.json

@@ -10,39 +10,42 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@nuxt/content": "^3.6.3",
-    "@nuxt/eslint": "1.5.2",
-    "@nuxt/icon": "^1.15.0",
-    "@nuxt/ui": "3.2.0",
-    "@pinia/nuxt": "^0.11.1",
+    "@nuxt/content": "^3.7.1",
+    "@nuxt/eslint": "1.9.0",
+    "@nuxt/icon": "^2.0.0",
+    "@nuxt/ui": "4.0.0",
+    "@pinia/nuxt": "^0.11.2",
     "@tailwindcss/vite": "^4.1.11",
-    "@typescript/native-preview": "7.0.0-dev.20250830.1",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vueuse/core": "^13.6.0",
-    "better-sqlite3": "^12.2.0",
-    "eslint": "^9.0.0",
+    "@vueuse/core": "^13.9.0",
+    "better-sqlite3": "^12.4.1",
+    "eslint": "^9.36.0",
     "gsap": "^3.13.0",
-    "highcharts": "^12.3.0",
-    "md-editor-v3": "^5.8.4",
-    "nuxt": "^3.17.6",
+    "highcharts": "^12.4.0",
+    "md-editor-v3": "^6.0.1",
+    "nuxt": "^4.1.2",
     "overlayscrollbars-vue": "^0.5.9",
+    "pinia": "^3.0.3",
     "tailwind-scrollbar": "^4.0.2",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.6.3",
-    "vue": "^3.5.17",
+    "vue": "^3.5.21",
     "vue-router": "^4.5.1",
     "word-count": "^0.3.1"
   },
-  "packageManager": "pnpm@10.15.0",
+  "packageManager": "pnpm@10.18.0",
   "devDependencies": {
-    "@stylistic/eslint-plugin": "^5.1.0",
+    "@iconify-json/clarity": "^1.2.4",
+    "@iconify-json/lucide": "^1.2.68",
+    "@iconify-json/material-symbols": "^1.2.40",
+    "@stylistic/eslint-plugin": "^5.4.0",
     "@stylistic/eslint-plugin-jsx": "^4.4.1",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "eslint-plugin-vue": "^10.3.0",
-    "globals": "^16.3.0",
-    "less": "^4.4.0",
-    "overlayscrollbars": "^2.11.5",
-    "typescript-eslint": "^8.35.1",
+    "eslint-plugin-vue": "^10.5.0",
+    "globals": "^16.4.0",
+    "less": "^4.4.1",
+    "overlayscrollbars": "^2.12.0",
+    "typescript-eslint": "^8.44.1",
     "vue-eslint-parser": "^10.2.0"
   }
 }

pages/index/about/index.vue

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

pages/index/archive/components/TimeLine.vue

@@ -57,30 +57,21 @@ 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"-->
-<!--      >-->
-        <div
-            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>
-        <div
-            v-else-if="currentChoice==='category' && (index == 0 || article.category != articles[index-1].category)"
-            class="year-marker relative text-indigo-300 text-2xl pt-3 pb-3">
-          {{ article.category }}
-        </div>
-<!--      </Transition>-->
+      <div
+          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>
+      <div
+          v-else-if="currentChoice==='category' && (index == 0 || article.category != articles[index-1].category)"
+          class="year-marker relative text-indigo-300 text-2xl pt-3 pb-3">
+        {{ article.category }}
+      </div>
       <div class="flex items-center" @click="toArticlePage(article)">
-        <div :title="dateFormatToTime(article.published_at)" class="text-sm w-12">
+        <div :title="dateFormatToTime(article.published_at)" class="text-sm min-w-12">
           {{ dateFormatToDate(article.published_at) }}
         </div>
-        <div :title="dateFormatToTime(article.published_at)" class="text-md pl-5">
+        <div :title="dateFormatToTime(article.published_at)" class="text-md ml-10">
           {{ article.title }}
         </div>
       </div>

pages/index/components/ArticleCard.vue

@@ -2,7 +2,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;
@@ -44,6 +44,11 @@ function getCostTime(length: number | DataAnomaly | undefined) {
     return `${minutes}分钟`;
   }
 }
+
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
+});
 </script>
 
 <template>
@@ -90,28 +95,20 @@ function getCostTime(length: number | DataAnomaly | undefined) {
 
     </div>
     <div class="flex mt-2 justify-between h-28">
-        <div class="overflow-y-auto">
-          {{ metaData?.description }}
-        </div>
-      <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"
-      >
-        <TechStackCard
-            v-if="breakpointsHelper.greater('lg').value"
-            :async-key="'stack:' + metaData?.id"
-            :tech-stack="metaData?.tech_stack"
-            :tech-stack-icon-names="metaData?.tech_stack_icon_names"
-            :tech-stack-theme-colors="metaData?.tech_stack_theme_colors"
-            :tech-stack-percent="metaData?.tech_stack_percent"
-            class="min-w-64"
-        />
-      </Transition>
-
+      <overlay-scrollbars-component>
+        {{ metaData?.description }}
+      </overlay-scrollbars-component>
+      <div v-if="mounted" class="">
+          <TechStackCard
+              :async-key="'stack:' + metaData?.id"
+              :tech-stack="metaData?.tech_stack"
+              :tech-stack-icon-names="metaData?.tech_stack_icon_names"
+              :tech-stack-theme-colors="metaData?.tech_stack_theme_colors"
+              :tech-stack-percent="metaData?.tech_stack_percent"
+              class="lg:w-64 w-0 transition-all duration-500"
+          />
+      </div>
+      <div v-else class="min-w-64"/>
     </div>
     <hr/>
     <div class="flex mt-2">
@@ -137,7 +134,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>

public/darkVerify.js

@@ -1,8 +1,6 @@
 // darkVerify.js
 if (
-    localStorage.getItem('system-theme-mode') === "dark" ||
-    (!localStorage.getItem('system-theme-mode') &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    window.matchMedia("(prefers-color-scheme: dark)").matches
 ) {
     document.querySelector('html').classList.add('dark');
     document.querySelector('html').classList.remove('light');

stores/colorModeStore.ts

@@ -1,13 +1,16 @@
-const getInitialMode = () => {
+function getInitialMode(): 'light' | 'dark' {
   if (typeof window !== 'undefined') {
     // 优先用 html 的 class
     if (document.documentElement.classList.contains('dark')) return 'dark';
     if (document.documentElement.classList.contains('light')) return 'light';
     // 其次用 localStorage
-    return localStorage.getItem('system-theme-mode') || 'light';
+    const val = localStorage.getItem('system-theme-mode');
+    if (val === 'dark') return 'dark';
+    if (val === 'light') return 'light';
+    return 'light'; // 默认
   }
   return 'light'; // SSR 默认
-};
+}
 
 const useColorModeStore = defineStore('colorMode', {
   state: () => ({

tailwind.config.js

@@ -7,12 +7,6 @@ export default {
   mode: 'jit',
   darkMode: 'class',
   theme: {
-    extend: {
-      colors: {},
-      letterSpacing: {
-        doublewidest: '.2em',
-      },
-    },
     screens: breakpoints,
   },
   plugins: [