102 lines
3.7 KiB
TypeScript
102 lines
3.7 KiB
TypeScript
import { SearchOutlined } from '@antdv-next/icons';
|
|
import { computed, defineComponent, ref, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
import ArticleList from '@/components/blog/ArticleList';
|
|
import BlogLayout from '@/components/blog/BlogLayout';
|
|
import PageInfoCard from '@/components/blog/PageInfoCard';
|
|
import { BlogButton, BlogCheckbox, BlogForm, BlogInput } from '@/components/blog/antdvComponents';
|
|
import { useBlogArticles } from '@/hooks/useBlogArticles';
|
|
|
|
export default defineComponent({
|
|
name: 'BlogSearchPage',
|
|
setup() {
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const keyword = ref(String(route.query.q ?? ''));
|
|
const filters = ref(['post', 'page']);
|
|
const { searchArticles } = useBlogArticles();
|
|
const resultArticles = computed(() => searchArticles(keyword.value));
|
|
|
|
watch(
|
|
() => route.query.q,
|
|
(value) => {
|
|
keyword.value = String(value ?? '');
|
|
},
|
|
);
|
|
|
|
const submitSearch = () => {
|
|
router.push({
|
|
name: 'BlogSearch',
|
|
query: { q: keyword.value.trim() },
|
|
});
|
|
};
|
|
|
|
return () => (
|
|
<BlogLayout
|
|
mainClass="kt-blog__main--article-list kt-blog__main--search-result"
|
|
pageTitle={keyword.value ? `${keyword.value} 的搜索结果` : '搜索'}
|
|
pageDescription="搜索文章标题、摘要、分类、标签与正文内容。"
|
|
pageMeta={`${resultArticles.value.length} 个结果`}
|
|
v-slots={{
|
|
pageInfo: () => (
|
|
<PageInfoCard
|
|
title={keyword.value ? keyword.value : '搜索'}
|
|
description={keyword.value ? '的搜索结果' : '搜索文章标题、摘要、分类、标签与正文内容。'}
|
|
meta={`${resultArticles.value.length} 个结果`}
|
|
>
|
|
<div class="kt-blog__search-filters">
|
|
<div class="kt-blog__search-filter-group">
|
|
{[
|
|
{ label: '文章', value: 'post' },
|
|
{ label: '页面', value: 'page' },
|
|
{ label: '说说', value: 'shuoshuo' },
|
|
].map((item) => (
|
|
<BlogCheckbox
|
|
key={item.value}
|
|
checked={filters.value.includes(item.value)}
|
|
onChange={(event: { target: { checked: boolean } }) => {
|
|
const nextValues = filters.value.filter((value) => value !== item.value);
|
|
if (event.target.checked) {
|
|
nextValues.push(item.value);
|
|
}
|
|
filters.value = nextValues;
|
|
}}
|
|
>
|
|
{item.label}
|
|
</BlogCheckbox>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<BlogForm
|
|
class="kt-blog__page-search-form"
|
|
onFinish={submitSearch}
|
|
>
|
|
<div class="kt-blog__input-group">
|
|
<div class="kt-blog__input-addon-wrap">
|
|
<span class="kt-blog__input-addon">
|
|
<SearchOutlined />
|
|
</span>
|
|
</div>
|
|
<BlogInput
|
|
name="s"
|
|
class="kt-blog__input"
|
|
placeholder="搜索什么..."
|
|
autocomplete="off"
|
|
v-model:value={keyword.value}
|
|
/>
|
|
</div>
|
|
<BlogButton class="kt-blog__button kt-blog__button--primary" htmlType="submit">
|
|
搜索
|
|
</BlogButton>
|
|
</BlogForm>
|
|
</PageInfoCard>
|
|
),
|
|
}}
|
|
>
|
|
<ArticleList articles={resultArticles.value} />
|
|
</BlogLayout>
|
|
);
|
|
},
|
|
});
|