sendevia/website
1
0
Fork 0
mirror of https://github.com/sendevia/website.git synced 2026-03-05 23:32:45 +08:00
Code Activity

feat: 优化全部文章/搜索布局

Browse Source
This commit is contained in:
sendevia
2025-09-28 18:27:18 +08:00
parent 88e3e93d0d
commit 79d8fbad56
2 changed files with 86 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
.vitepress/theme/layouts/AllPosts.vue
View File

@@ -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>

80
.vitepress/theme/layouts/SearchPosts.vue
View File

@@ -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>