feat: 将搜索页面由Strapi迁移至Direcuts
- 路由页面相关源码修改 - 类型标注与组合式API - 相关工具函数
This commit is contained in:
@ -30,16 +30,16 @@
|
||||
<el-tab-pane :label="`全部(${resultCount['all']})`" name="all">
|
||||
<search-results
|
||||
v-model:current-page="currentPage"
|
||||
:hit-items="hits"
|
||||
:search-items="searchItems"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="`产品(${resultCount['production'] || 0})`"
|
||||
:label="`产品(${resultCount['product'] || 0})`"
|
||||
name="production"
|
||||
>
|
||||
<search-results
|
||||
v-model:current-page="currentPage"
|
||||
:hit-items="hits"
|
||||
:search-items="searchItems"
|
||||
category="production"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
@ -49,7 +49,7 @@
|
||||
>
|
||||
<search-results
|
||||
v-model:current-page="currentPage"
|
||||
:hit-items="hits"
|
||||
:search-items="searchItems"
|
||||
category="solution"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
@ -59,7 +59,7 @@
|
||||
>
|
||||
<search-results
|
||||
v-model:current-page="currentPage"
|
||||
:hit-items="hits"
|
||||
:search-items="searchItems"
|
||||
category="question"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
@ -69,7 +69,7 @@
|
||||
>
|
||||
<search-results
|
||||
v-model:current-page="currentPage"
|
||||
:hit-items="hits"
|
||||
:search-items="searchItems"
|
||||
category="document"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
@ -92,8 +92,8 @@
|
||||
|
||||
// i18n相关
|
||||
const { t } = useI18n();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
const { getDirectusLocale } = useLocalizations();
|
||||
const directusLocale = getDirectusLocale();
|
||||
|
||||
// 路由相关
|
||||
const route = useRoute();
|
||||
@ -110,40 +110,48 @@
|
||||
pending: loading,
|
||||
error,
|
||||
} = await useAsyncData(
|
||||
() => `search-${route.query.query ?? ''}`,
|
||||
() => `search-${directusLocale}-${route.query.query ?? ''}`,
|
||||
async () => {
|
||||
const q = String(route.query.query ?? '').trim();
|
||||
if (!q) return [];
|
||||
return await search(q, { limit: 12 });
|
||||
return await search(q, { limit: 12 }, directusLocale);
|
||||
}
|
||||
);
|
||||
|
||||
// 本地化+空Section过滤
|
||||
// 空Section过滤
|
||||
const filteredSections = computed(() =>
|
||||
sections.value
|
||||
.map((section) => ({
|
||||
...section,
|
||||
hits: section.hits.filter(
|
||||
(hit) =>
|
||||
!hit.locale ||
|
||||
String(hit.locale).toLowerCase() === strapiLocale.toLowerCase()
|
||||
),
|
||||
}))
|
||||
.filter((section) => section.hits.length > 0)
|
||||
sections.value.filter((section) => section.hits.length > 0)
|
||||
);
|
||||
|
||||
const typeMap = {
|
||||
products: 'products',
|
||||
solutions: 'solutions',
|
||||
questions: 'questions',
|
||||
product_documents: 'product_documents',
|
||||
} as const;
|
||||
// 展平hits
|
||||
const hits = computed(() =>
|
||||
filteredSections.value.flatMap((item) =>
|
||||
item.hits.map((content) => ({ content, type: item.indexUid }))
|
||||
)
|
||||
filteredSections.value.flatMap((section) => {
|
||||
const type = typeMap[section.rawIndex as keyof typeof typeMap];
|
||||
if (!type) return [];
|
||||
return section.hits.map((hit) => ({ type, content: hit }));
|
||||
})
|
||||
);
|
||||
|
||||
const searchItems = computed(() =>
|
||||
hits.value.map((hit) => {
|
||||
return toSearchItemView(hit.content, hit.type);
|
||||
})
|
||||
);
|
||||
|
||||
console.log(searchItems.value);
|
||||
|
||||
// 分类控制
|
||||
const activeTab = ref('all');
|
||||
const resultCount = computed(() => {
|
||||
const map: Record<string, number> = { all: hits.value.length };
|
||||
for (const hit of hits.value) {
|
||||
map[hit.type] = (map[hit.type] ?? 0) + 1;
|
||||
const map: Record<string, number> = { all: searchItems.value.length };
|
||||
for (const item of searchItems.value) {
|
||||
map[item.type] = (map[item.type] ?? 0) + 1;
|
||||
}
|
||||
return map;
|
||||
});
|
||||
@ -177,7 +185,7 @@
|
||||
}
|
||||
|
||||
try {
|
||||
const results = await search(trimmed, { limit: 12 });
|
||||
const results = await search(trimmed, { limit: 12 }, directusLocale);
|
||||
if (requestId === activeRequestId.value) {
|
||||
sections.value = results;
|
||||
}
|
||||
@ -199,10 +207,10 @@
|
||||
|
||||
watch(
|
||||
() => route.query.query,
|
||||
(newQuery) => {
|
||||
async (newQuery) => {
|
||||
if (typeof newQuery === 'string' && newQuery.trim()) {
|
||||
keyword.value = newQuery;
|
||||
performSearch(newQuery);
|
||||
await performSearch(newQuery);
|
||||
} else {
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user