✨ 完善筛选功能新增一言完成关于页面 🐛 解决归档页的ssg问题

2025-10-06 03:44:54 +08:00
parent 1cefa4c661
commit 6c963257cf
9 changed files with 207 additions and 39 deletions
@@ -0,0 +1,45 @@
+<script setup lang="tsx">
+const techStack = ['Vue', 'Nuxt', 'TypeScript', 'Python', 'Java', 'C#', 'Rust'];
+const techStackPercent = [86, 80, 92, 75, 60, 90, 50];
+const techStackIconNames = ['mdi:vuejs', 'lineicons:nuxt', 'mdi:language-typescript', 'mdi:language-python', 'mdi:language-java', 'mdi:language-csharp', 'mdi:language-rust'];
+const techStackThemeColors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#FFB347', '#98D8C8', '#F7DC6F', '#BB8FCE'];
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
+});
+</script>
+
+<template>
+  <div>
+    <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3 transition-colors duration-300">
+      <div class="text-2xl pb-2">关于作者</div>
+      lichx，目前就读于武汉理工大学，技术涉猎广泛但不精，仍在持续学习中 <br/>
+    </div>
+    <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3 transition-colors duration-300">
+      <div class="text-2xl pb-2">技术栈（相对熟练度）</div>
+      <TechStackCard
+          v-if="mounted" async-key="about page" :tech-stack="techStack"
+          :tech-stack-percent="techStackPercent" :tech-stack-icon-names="techStackIconNames"
+          :tech-stack-theme-colors="techStackThemeColors"/>
+    </div>
+    <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3 transition-colors duration-300">
+      <div class="text-2xl pb-2">在其他渠道关注 / 联系我</div>
+      <a href="https://github.com/li-chx" title="github，不常用">
+        <icon name="mdi:github" class="inline-block w-10 h-10 mr-4"/>
+      </a>
+      <a href="https://git.lichx.top/li_chx" title="gitea，主要代码托管平台">
+        <icon name="pajamas:gitea" class="inline-block w-10 h-10 mr-4"/>
+      </a>
+      <a href="https://leetcode.cn/u/gallant-paynekan/" title="leetcode，刷点水题骗骗自己">
+        <icon name="tabler:brand-leetcode" class="inline-block w-10 h-10 mr-4"/>
+      </a>
+      <a href="mailto:751176501@qq.com" title="能不能看见全看运气">
+        <icon name="material-symbols:mail-rounded" class="inline-block w-10 h-10"/>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,8 @@
+<template>
+  <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 transition-colors duration-300">
+    <div class="text-2xl pb-2">关于本站</div>
+    本站，随机存取，起这个名字纯粹是因为作者想不出来了。最后基于我对该网站的需求，决定叫随机存取<br/>
+    这个网站最重要的还是记录我认为有趣的 学习 / 调试 过程，便于我随时取用，所以写的时候完全就是梦到哪写到哪<br/>
+    但是，如果本人闲暇之余写的文章能帮到你，当是莫大的荣幸<br/>
+  </div>
+</template>
@@ -1,11 +1,18 @@
 <script setup lang="ts">

+import AuthorDescription from '~/pages/index/about/compoents/AuthorDescription.vue';
+import SiteDescription from '~/pages/index/about/compoents/SiteDescription.vue';
 </script>

 <template>
-
+<div>
+  <div class="mt-6 mb-6 w-full">
+    <SiteDescription />
+    <AuthorDescription />
+  </div>
+</div>
 </template>

 <style scoped>

-</style>
+</style>
@@ -4,15 +4,23 @@ import type { PostMetaData } from '~/types/PostMetaData';
 import TimeLine from '~/pages/index/archive/components/TimeLine.vue';
 import type { RadioGroupItem } from '@nuxt/ui';

-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[]>([]);

-const currentChoice = ref<'time' | 'category'>('time');
+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?.filter((x) => !x.draft) || [];
+  postsMetaData.value = srcPostsMetaData.value || [];
 });

+const currentChoice = ref<'time' | 'category'>('time');
+
 const choiceItems = ref<RadioGroupItem>([
  { label: '时间', value: 'time' },
  { label: '类别', value: 'category' },
@@ -21,7 +29,7 @@ const choiceItems = ref<RadioGroupItem>([
 </script>
 <template>
  <div>
-    <div class="table w-full mt-6">
+    <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-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">
@@ -5,7 +5,6 @@ import ArticleHeader from '~/pages/index/article/[articleID]/components/ArticleH

 const articleId = useRoute().params.articleID as string;
 const { data: article } = useAsyncData(async () => await queryCollection('content').where('id', '=', articleId).first());
-
 const editorId = 'article-previewer';
 </script>

@@ -10,6 +10,7 @@ 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;
 }

@@ -34,7 +35,6 @@ function filterRuleChange(rule: (data: PostMetaData) => boolean) {
      <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">
-<!--            <PersonalCard/>-->
            <ArticleDescriptionCards
                v-if="postsMetaData"
                class="mb-5" :posts-meta-data="srcPostsMetaData!"
@@ -46,15 +46,32 @@ function filterRuleChange(rule: (data: PostMetaData) => boolean) {
        <!--        <ArticleCard class="mb-6 w-full transition-shadow duration-300 shadow-lg hover:shadow-old-neutral-600"/>-->
        <div
            v-for="post in postsMetaData" :key="post.id"
-            class="mb-6 w-full transition-shadow duration-300 shadow-lg hover:shadow-old-neutral-600 hover:cursor-pointer">
+            class="w-full transition-shadow duration-300 shadow-lg hover:shadow-old-neutral-600 hover:cursor-pointer">
          <ArticleCard
              v-if="!post.draft && post.type === 'article'"
-              class="w-full"
+              class="mb-6 w-full"
              :meta-data="post"
              @click="toArticlePage(post)"/>
          <SimpleCard
              v-else-if="!post.draft && (post.type === 'rambling' || post.type === 'announcement')"
+              class="mb-6 w-full"
              :meta-data="post"/>
+          <div v-else-if="post.draft">
+          </div>
+          <div v-else>
+            {{post}}
+          </div>
+        </div>
+        <div v-if="postsMetaData.length === 0" class="w-full">
+          <div
+              class="w-full light:bg-old-neutral-200 dark:bg-old-neutral-800 transition-all duration-300 shadow-lg hover:shadow-old-neutral-600 hover:cursor-pointer">
+              <div class="pt-5 text-center text-2xl">
+                没有找到符合条件的文章
+              </div>
+              <div class="pt-3 pb-3 text-center text-sm text-old-neutral-500">
+                tips：类型、分类、标签间的关系为且，一类筛选下各个选项间的关系为或
+              </div>
+          </div>
        </div>
      </div>
    </div>