From 79d8fbad564de362f2a332e67da1e458ea566650 Mon Sep 17 00:00:00 2001
From: sendevia <me@sendevia.top>
Date: Sun, 28 Sep 2025 18:27:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=85=A8=E9=83=A8?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0/=E6=90=9C=E7=B4=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vitepress/theme/layouts/AllPosts.vue    | 32 ++++++----
 .vitepress/theme/layouts/SearchPosts.vue | 80 +++++++++++++++++++-----
 2 files changed, 86 insertions(+), 26 deletions(-)

diff --git a/.vitepress/theme/layouts/AllPosts.vue b/.vitepress/theme/layouts/AllPosts.vue
index c22c144..da86052 100644
--- a/.vitepress/theme/layouts/AllPosts.vue
+++ b/.vitepress/theme/layouts/AllPosts.vue
@@ -1,16 +1,24 @@
-<template>
-  <div class="all-posts-page">
-    <h1>所有文章</h1>
-    <ul>
-      <li v-for="post in posts" :key="post.url">
-        <a :href="post.url">{{ post.title }}</a>
-        <span v-if="post.date"> - {{ post.date }}</span>
-      </li>
-    </ul>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useAllPosts } from "../composables/useAllPosts";
 const posts = useAllPosts();
 </script>
+
+<template>
+  <div class="page-all-posts">
+    <h1>所有文章</h1>
+    <div class="posts-card" v-for="post in posts" :key="post.url">
+      <a :href="post.url">{{ post.title }}</a>
+      <span v-if="post.date"> - {{ post.date }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use "../styles/mixin";
+
+.page-all-posts {
+  .posts-card a {
+    @include mixin.typescale-style("headline-small");
+  }
+}
+</style>
diff --git a/.vitepress/theme/layouts/SearchPosts.vue b/.vitepress/theme/layouts/SearchPosts.vue
index d668076..4d36a12 100644
--- a/.vitepress/theme/layouts/SearchPosts.vue
+++ b/.vitepress/theme/layouts/SearchPosts.vue
@@ -1,17 +1,3 @@
-<template>
-  <div class="search-posts-page">
-    <h1>搜索文章</h1>
-    <input v-model="query" placeholder="输入关键词..." class="search-input" />
-    <div v-if="filteredPosts.length">
-      <div v-for="post in filteredPosts" :key="post.url">
-        <a :href="post.url">{{ post.title }}</a>
-        <span v-if="post.date"> - {{ post.date }}</span>
-      </div>
-    </div>
-    <p v-else>没有找到相关文章。</p>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useAllPosts } from "../composables/useAllPosts";
@@ -25,3 +11,69 @@ const filteredPosts = computed(() => {
   return posts.value.filter((post) => post.title.toLowerCase().includes(q) || (post.content && post.content.toLowerCase().includes(q)));
 });
 </script>
+
+<template>
+  <div class="page-search">
+    <input v-model="query" placeholder="搜索文章..." class="search-input" />
+    <div class="search-result" v-if="filteredPosts.length">
+      <div v-for="post in filteredPosts" :key="post.url">
+        <a :href="post.url">{{ post.title }}</a>
+        <span v-if="post.date"> - {{ post.date }}</span>
+      </div>
+    </div>
+    <p v-else>没有找到相关文章。</p>
+  </div>
+</template>
+
+<style lang="scss">
+@use "../styles/mixin";
+
+.page-search {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  padding: 24px;
+
+  width: 100%;
+
+  .search-input {
+    @include mixin.typescale-style("title-medium");
+
+    padding: 8px 12px;
+
+    height: 48px;
+
+    color: var(--md-sys-color-on-surface-bright);
+
+    border-radius: var(--md-sys-shape-corner-extra-large);
+    border: none;
+    outline: none;
+
+    background-color: var(--md-sys-color-surface-container-high);
+  }
+
+  .search-result {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    a {
+      @include mixin.typescale-style("body-large");
+
+      color: var(--md-sys-color-primary);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    span {
+      @include mixin.typescale-style("body-medium");
+
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  }
+}
+</style>