feat(CMS)!: 将项目后端由Strapi迁移至Directus
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m49s
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m49s
- 将项目后端由Strapi迁移至Directus - 加强类型标注 - 调整部分路由名称 - 分离原始后端数据与视图对象数据 Issue: resolve #42
This commit is contained in:
@ -15,7 +15,7 @@
|
||||
</el-breadcrumb>
|
||||
|
||||
<div class="content">
|
||||
<markdown-renderer :content="content || ''" />
|
||||
<markdown-renderer :content="content.content || ''" />
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">更多信息</el-divider>
|
||||
@ -38,17 +38,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { findOne } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
const { data, pending, error } = await useCompanyProfile();
|
||||
|
||||
const { data, pending, error } = useAsyncData('company-profile', () =>
|
||||
findOne<StrapiCompanyProfile>('company-profile', undefined, {
|
||||
locale: strapiLocale,
|
||||
})
|
||||
);
|
||||
|
||||
const content = computed(() => data.value?.data.content);
|
||||
const content = computed(() => toCompanyProfileView(data.value));
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
|
||||
@ -12,14 +12,11 @@
|
||||
<div class="carousel-item">
|
||||
<el-image
|
||||
class="carousel-image"
|
||||
:src="useStrapiMedia(item.url || '')"
|
||||
:alt="item.alternativeText || `Carousel Image ${index + 1}`"
|
||||
:src="getImageUrl(item)"
|
||||
:alt="`Carousel Image ${index + 1}`"
|
||||
fit="contain"
|
||||
lazy
|
||||
/>
|
||||
<p v-if="item.caption" class="carousel-image-caption">
|
||||
{{ item.caption }}
|
||||
</p>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
@ -42,24 +39,24 @@
|
||||
:autoplay="false"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="n in Math.floor(recommend_productions.length / 3) + 1"
|
||||
v-for="n in Math.floor(recommend_products.length / 3) + 1"
|
||||
:key="n"
|
||||
class="recommend-list"
|
||||
>
|
||||
<div class="recommend-card-group">
|
||||
<el-card
|
||||
v-for="(item, index) in recommend_productions.slice(
|
||||
v-for="(item, index) in recommend_products.slice(
|
||||
(n - 1) * 3,
|
||||
n * 3
|
||||
)"
|
||||
:key="index"
|
||||
class="recommend-card"
|
||||
@click="handleProductionCardClick(item.documentId || '')"
|
||||
@click="handleProductCardClick(item.id.toString() || '')"
|
||||
>
|
||||
<template #header>
|
||||
<el-image
|
||||
:src="useStrapiMedia(item.cover?.url || '')"
|
||||
:alt="item.cover?.alternativeText || item.title"
|
||||
:src="getImageUrl(item.cover)"
|
||||
:alt="item.name"
|
||||
fit="cover"
|
||||
lazy
|
||||
/>
|
||||
@ -67,7 +64,7 @@
|
||||
<div class="recommend-card-body">
|
||||
<!-- Title -->
|
||||
<div class="text-center">
|
||||
<span class="recommend-card-title">{{ item.title }}</span>
|
||||
<span class="recommend-card-title">{{ item.name }}</span>
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<div class="recommend-card-description text-left opacity-25">
|
||||
@ -107,12 +104,12 @@
|
||||
)"
|
||||
:key="index"
|
||||
class="recommend-card"
|
||||
@click="handleSolutionCardClick(item.documentId || '')"
|
||||
@click="handleSolutionCardClick(item.id.toString() || '')"
|
||||
>
|
||||
<template #header>
|
||||
<el-image
|
||||
:src="useStrapiMedia(item.cover?.url || '')"
|
||||
:alt="item.cover?.alternativeText || item.title"
|
||||
:src="getImageUrl(item.cover)"
|
||||
:alt="item.title"
|
||||
fit="cover"
|
||||
lazy
|
||||
/>
|
||||
@ -140,55 +137,39 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { findOne } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
const { getImageUrl } = useDirectusImage();
|
||||
|
||||
const { data, pending, error } = useAsyncData('homepage', () =>
|
||||
findOne<StrapiHomepage>('homepage', undefined, {
|
||||
populate: {
|
||||
carousel: {
|
||||
populate: '*',
|
||||
},
|
||||
recommend_productions: {
|
||||
populate: {
|
||||
cover: {
|
||||
populate: '*',
|
||||
},
|
||||
},
|
||||
},
|
||||
recommend_solutions: {
|
||||
populate: {
|
||||
cover: {
|
||||
populate: '*',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
})
|
||||
);
|
||||
const { data, pending, error } = await useHomepage();
|
||||
|
||||
const carousel = computed(() => data.value?.data.carousel || []);
|
||||
const recommend_productions = computed(
|
||||
() => data.value?.data.recommend_productions || []
|
||||
const homepageData = computed(() => {
|
||||
return toHomepageView(data.value);
|
||||
});
|
||||
|
||||
const carousel = computed(() => homepageData.value?.carousel);
|
||||
|
||||
const recommend_products = computed(
|
||||
() => homepageData.value?.recommendProducts
|
||||
);
|
||||
const recommend_solutions = computed(
|
||||
() => data.value?.data.recommend_solutions || []
|
||||
() => homepageData.value?.recommendSolutions
|
||||
);
|
||||
|
||||
watch(pending, () => {
|
||||
console.log(data.value);
|
||||
});
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
|
||||
const handleProductionCardClick = (documentId: string) => {
|
||||
const handleProductCardClick = (documentId: string) => {
|
||||
// 使用路由导航到产品详情页
|
||||
if (documentId) {
|
||||
const localePath = useLocalePath();
|
||||
const router = useRouter();
|
||||
router.push(localePath(`/productions/${documentId}`));
|
||||
router.push(localePath(`/products/${documentId}`));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="!pending">
|
||||
<div v-if="production">
|
||||
<div v-if="product">
|
||||
<!-- 面包屑导航 -->
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
@ -10,44 +10,44 @@
|
||||
}}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/productions')">{{
|
||||
$t('navigation.productions')
|
||||
<NuxtLink :to="$localePath('/products')">{{
|
||||
$t('navigation.products')
|
||||
}}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opactiy-50">{{
|
||||
production.title
|
||||
product.name
|
||||
}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<!-- 产品详情内容 -->
|
||||
<div class="production-header">
|
||||
<div class="production-image">
|
||||
<div class="product-header">
|
||||
<div class="product-image">
|
||||
<el-image
|
||||
v-if="production.production_images.length <= 1"
|
||||
:src="useStrapiMedia(production?.cover?.url || '')"
|
||||
:alt="production.title"
|
||||
v-if="product.images.length <= 1"
|
||||
:src="getImageUrl(product.images[0].image)"
|
||||
:alt="product.name"
|
||||
fit="contain"
|
||||
/>
|
||||
<el-carousel
|
||||
v-else
|
||||
class="production-carousel"
|
||||
class="product-carousel"
|
||||
height="500px"
|
||||
:autoplay="false"
|
||||
:loop="false"
|
||||
arrow="always"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in production.production_images || []"
|
||||
v-for="(item, index) in product.images || []"
|
||||
:key="index"
|
||||
>
|
||||
<div class="production-carousel-item">
|
||||
<div class="product-carousel-item">
|
||||
<el-image
|
||||
:src="useStrapiMedia(item.url || '')"
|
||||
:alt="item.alternativeText || production.title"
|
||||
:src="getImageUrl(item.image || '')"
|
||||
:alt="product.name"
|
||||
fit="contain"
|
||||
lazy
|
||||
/>
|
||||
<p v-if="item.caption" class="production-image-caption">
|
||||
<p v-if="item.caption" class="product-image-caption">
|
||||
{{ item.caption }}
|
||||
</p>
|
||||
</div>
|
||||
@ -55,34 +55,26 @@
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
||||
<div class="production-info">
|
||||
<h1>{{ production.title }}</h1>
|
||||
<p class="summary">{{ production.summary }}</p>
|
||||
<div class="product-info">
|
||||
<h1>{{ product.name }}</h1>
|
||||
<p class="summary">{{ product.summary }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品详细描述 -->
|
||||
<div class="production-content">
|
||||
<el-tabs v-model="activeName" class="production-tabs" stretch>
|
||||
<div class="product-content">
|
||||
<el-tabs v-model="activeName" class="product-tabs" stretch>
|
||||
<el-tab-pane label="产品详情" name="details">
|
||||
<markdown-renderer
|
||||
:content="production.production_details || ''"
|
||||
/>
|
||||
<markdown-renderer :content="product.description || ''" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="技术规格" name="specs">
|
||||
<spec-table :data="production.production_specs" />
|
||||
<spec-table :data="product.specs" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="常见问题" name="faq">
|
||||
<question-list :questions="production.questions" />
|
||||
<question-list :questions="product.faqs" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="相关文档" name="documents">
|
||||
<document-list
|
||||
:documents="
|
||||
production.production_documents.map(
|
||||
(item) => item.document
|
||||
) || []
|
||||
"
|
||||
/>
|
||||
<document-list :documents="product.documents" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@ -95,8 +87,8 @@
|
||||
:sub-title="$t('product-not-found-desc')"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="$router.push('/productions')">
|
||||
{{ $t('back-to-productions') }}
|
||||
<el-button type="primary" @click="$router.push('/products')">
|
||||
{{ $t('back-to-products') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
@ -115,39 +107,22 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
const route = useRoute();
|
||||
const { findOne } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
// 获取路由参数（slug 或 id）
|
||||
const documentId = computed(() => route.params.slug as string);
|
||||
const { getImageUrl } = useDirectusImage();
|
||||
|
||||
const { data, pending, error } = useAsyncData(
|
||||
() => `production-${documentId.value}`,
|
||||
() =>
|
||||
findOne<Production>('productions', documentId.value, {
|
||||
populate: {
|
||||
production_specs: {
|
||||
populate: '*',
|
||||
},
|
||||
production_images: {
|
||||
populate: '*',
|
||||
},
|
||||
cover: {
|
||||
populate: '*',
|
||||
},
|
||||
questions: {
|
||||
populate: '*',
|
||||
},
|
||||
production_documents: {
|
||||
populate: 'document',
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
})
|
||||
);
|
||||
// 获取路由参数
|
||||
const id = computed(() => route.params.slug as string);
|
||||
|
||||
const production = computed(() => data.value?.data ?? null);
|
||||
const { data, pending, error } = await useProduct(id.value);
|
||||
|
||||
console.log('Raw Data: ', data.value);
|
||||
|
||||
const rawProduct = computed(() => data.value ?? null);
|
||||
const product = computed(() => {
|
||||
return toProductView(rawProduct.value);
|
||||
});
|
||||
|
||||
console.log('View Data: ', product.value);
|
||||
|
||||
const activeName = ref('details'); // 默认选中概览标签
|
||||
|
||||
@ -159,11 +134,11 @@
|
||||
|
||||
// SEO
|
||||
useHead({
|
||||
title: computed(() => production.value?.title || 'Product Detail'),
|
||||
title: computed(() => product.value?.name || 'Product Detail'),
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: computed(() => production.value?.summary || ''),
|
||||
content: computed(() => product.value?.summary || ''),
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -180,20 +155,20 @@
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.production-header {
|
||||
.product-header {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.production-image .el-image {
|
||||
.product-image .el-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.production-image-caption {
|
||||
.product-image-caption {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
/* left: 10%; */
|
||||
@ -205,7 +180,7 @@
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.production-carousel :deep(.el-carousel__button) {
|
||||
.product-carousel :deep(.el-carousel__button) {
|
||||
/* 指示器按钮样式 */
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@ -214,7 +189,7 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.production-info h1 {
|
||||
.product-info h1 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2rem;
|
||||
@ -227,16 +202,16 @@
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.production-tabs ::v-deep(.el-tabs__nav) {
|
||||
.product-tabs ::v-deep(.el-tabs__nav) {
|
||||
min-width: 30%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.production-tabs ::v-deep(.el-tabs__content) {
|
||||
.product-tabs ::v-deep(.el-tabs__content) {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.production-content h2 {
|
||||
.product-content h2 {
|
||||
color: var(--el-text-color-primary);
|
||||
margin: 0;
|
||||
}
|
||||
@ -257,12 +232,12 @@
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.production-header {
|
||||
.product-header {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.production-info h1 {
|
||||
.product-info h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('our-productions') }}</h1>
|
||||
<h1 class="page-title">{{ $t('our-products') }}</h1>
|
||||
<el-breadcrumb class="breadcrumb">
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/')">{{
|
||||
@ -9,29 +9,29 @@
|
||||
}}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/productions')">{{
|
||||
$t('navigation.productions')
|
||||
<NuxtLink :to="$localePath('/products')">{{
|
||||
$t('navigation.products')
|
||||
}}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div v-if="!pending" class="page-content">
|
||||
<div class="productions-container">
|
||||
<el-collapse v-model="activeNames" class="production-collapse">
|
||||
<div class="products-container">
|
||||
<el-collapse v-model="activeNames" class="product-collapse">
|
||||
<el-collapse-item
|
||||
v-for="(group, type) in groupedProductions"
|
||||
v-for="(group, type) in groupedProducts"
|
||||
:key="type"
|
||||
:title="type || '未分类'"
|
||||
:name="type || 'no-category'"
|
||||
>
|
||||
<div class="group-list">
|
||||
<production-card
|
||||
v-for="production in group"
|
||||
:key="production.documentId || production.id"
|
||||
:slug="production.documentId"
|
||||
:image-url="useStrapiMedia(production?.cover?.url || '')"
|
||||
:name="production.title"
|
||||
:description="production.summary || ''"
|
||||
<product-card
|
||||
v-for="product in group"
|
||||
:key="product.id"
|
||||
:slug="product.id.toString()"
|
||||
:image-url="getImageUrl(product.cover.toString())"
|
||||
:name="product.name"
|
||||
:description="product.summary || ''"
|
||||
/>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
@ -45,63 +45,43 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { find } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
const { getImageUrl } = useDirectusImage();
|
||||
|
||||
const { data, pending, error } = useAsyncData(
|
||||
'productions',
|
||||
() =>
|
||||
find<Production>('productions', {
|
||||
populate: {
|
||||
cover: {
|
||||
populate: '*',
|
||||
},
|
||||
production_type: {
|
||||
populate: '*',
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
show_in_production_list: {
|
||||
$eq: true,
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
}),
|
||||
{
|
||||
lazy: true,
|
||||
}
|
||||
);
|
||||
const { data, pending, error } = useProductList();
|
||||
|
||||
const activeNames = ref<string[]>([]);
|
||||
|
||||
const productions = computed(() => data.value?.data ?? []);
|
||||
const productsRaw = computed(() => data.value ?? []);
|
||||
const products = computed(() =>
|
||||
productsRaw.value.map((item) => toProductListView(item))
|
||||
);
|
||||
|
||||
// 按类型分组
|
||||
// 兼容 production_type 既可能为对象也可能为字符串
|
||||
const groupedProductions = computed(() => {
|
||||
const groups: Record<string, Production[]> = {};
|
||||
for (const prod of productions.value) {
|
||||
// 兼容 product_type 既可能为对象也可能为字符串
|
||||
const groupedProducts = computed(() => {
|
||||
const groups: Record<string, ProductListView[]> = {};
|
||||
for (const prod of products.value) {
|
||||
let typeKey = '';
|
||||
if (typeof prod.production_type === 'string') {
|
||||
typeKey = prod.production_type;
|
||||
if (typeof prod.product_type === 'string') {
|
||||
typeKey = prod.product_type;
|
||||
} else if (
|
||||
prod.production_type &&
|
||||
typeof prod.production_type === 'object' &&
|
||||
'type' in prod.production_type
|
||||
prod.product_type &&
|
||||
typeof prod.product_type === 'object' &&
|
||||
'name' in prod.product_type
|
||||
) {
|
||||
typeKey = prod.production_type.type || '';
|
||||
typeKey = prod.product_type || '';
|
||||
}
|
||||
if (!groups[typeKey]) groups[typeKey] = [];
|
||||
groups[typeKey]?.push(prod);
|
||||
}
|
||||
console.log(groups);
|
||||
return groups;
|
||||
});
|
||||
|
||||
watch(groupedProductions, () => {
|
||||
if (groupedProductions.value) {
|
||||
watch(groupedProducts, () => {
|
||||
if (groupedProducts.value) {
|
||||
activeNames.value = [
|
||||
...Object.keys(groupedProductions.value),
|
||||
...Object.keys(groupedProducts.value),
|
||||
'no-category',
|
||||
];
|
||||
}
|
||||
@ -113,10 +93,16 @@
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (groupedProductions.value) {
|
||||
watch(pending, (value) => {
|
||||
if (!value) {
|
||||
console.log('AsyncData: ', data.value);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (groupedProducts.value) {
|
||||
activeNames.value = [
|
||||
...Object.keys(groupedProductions.value),
|
||||
...Object.keys(groupedProducts.value),
|
||||
'no-category',
|
||||
];
|
||||
}
|
||||
@ -145,13 +131,13 @@
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.productions-container {
|
||||
.products-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.production-group {
|
||||
.product-group {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@ -30,17 +30,17 @@
|
||||
<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})`"
|
||||
name="production"
|
||||
:label="`产品(${resultCount['product'] || 0})`"
|
||||
name="product"
|
||||
>
|
||||
<search-results
|
||||
v-model:current-page="currentPage"
|
||||
:hit-items="hits"
|
||||
category="production"
|
||||
:search-items="searchItems"
|
||||
category="product"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<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;
|
||||
}
|
||||
@ -197,12 +205,16 @@
|
||||
router.replace(localePath({ path: '/search' }));
|
||||
};
|
||||
|
||||
watch(activeTab, () => {
|
||||
currentPage.value = 1; // 重置页码
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
<div class="solution-meta">
|
||||
<span class="solution-date">
|
||||
CreatedAt:
|
||||
{{ new Date(solution.createdAt).toLocaleDateString() }}
|
||||
{{ new Date(solution.createAt).toLocaleDateString() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,7 +42,7 @@
|
||||
:sub-title="$t('solution-not-found-desc')"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="$router.push('/productions')">
|
||||
<el-button type="primary" @click="$router.push('/solutions')">
|
||||
{{ $t('back-to-solutions') }}
|
||||
</el-button>
|
||||
</template>
|
||||
@ -57,23 +57,17 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
const route = useRoute();
|
||||
const { findOne } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
// 获取路由参数(documentId)
|
||||
const documentId = computed(() => route.params.slug as string);
|
||||
const id = computed(() => route.params.slug as string);
|
||||
|
||||
const { data, pending, error } = useAsyncData(
|
||||
() => `solution-${documentId.value}`,
|
||||
() =>
|
||||
findOne<Solution>('solutions', documentId.value, {
|
||||
populate: '*',
|
||||
locale: strapiLocale,
|
||||
})
|
||||
);
|
||||
const { data, pending, error } = await useSolution(id.value);
|
||||
|
||||
const solution = computed(() => data.value?.data ?? null);
|
||||
console.log('RawData: ', data.value);
|
||||
const process = toSolutionView(data.value);
|
||||
console.log('Processed Solution: ', process);
|
||||
|
||||
const solution = computed(() => toSolutionView(data.value));
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
|
||||
@ -21,11 +21,11 @@
|
||||
<div class="solution-list">
|
||||
<solution-card
|
||||
v-for="solution in solutions"
|
||||
:key="solution.documentId"
|
||||
:key="solution.id"
|
||||
:title="solution.title"
|
||||
:summary="solution.summary || ''"
|
||||
:cover-url="useStrapiMedia(solution?.cover?.url || '')"
|
||||
:document-id="solution.documentId"
|
||||
:cover-url="getImageUrl(solution.cover || '')"
|
||||
:document-id="solution.id.toString()"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
@ -38,9 +38,9 @@
|
||||
<div class="solution-list">
|
||||
<solution-card
|
||||
v-for="solution in group"
|
||||
:key="solution.documentId"
|
||||
:document-id="solution.documentId"
|
||||
:cover-url="useStrapiMedia(solution?.cover?.url || '')"
|
||||
:key="solution.id"
|
||||
:document-id="solution.id.toString()"
|
||||
:cover-url="getImageUrl(solution.cover || '')"
|
||||
:title="solution.title"
|
||||
:summary="solution.summary || ''"
|
||||
/>
|
||||
@ -55,31 +55,22 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { find } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
const { getImageUrl } = useDirectusImage();
|
||||
|
||||
const { data, pending, error } = useAsyncData('solutions', () =>
|
||||
find<Solution>('solutions', {
|
||||
populate: {
|
||||
cover: {
|
||||
populate: '*',
|
||||
},
|
||||
solution_type: {
|
||||
populate: '*',
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
})
|
||||
const { data, pending, error } = await useSolutionList();
|
||||
|
||||
const solutionsRaw = computed(() => data.value ?? []);
|
||||
const solutions = computed(() =>
|
||||
solutionsRaw.value.map((item) => toSolutionListView(item))
|
||||
);
|
||||
|
||||
const activeName = ref<string>('all');
|
||||
|
||||
const solutions = computed(() => data.value?.data ?? []);
|
||||
console.log('Processed Data', solutions.value);
|
||||
|
||||
// 按类型分组
|
||||
const groupedSolutions = computed(() => {
|
||||
const gourps: Record<string, Solution[]> = {};
|
||||
const gourps: Record<string, SolutionListView[]> = {};
|
||||
for (const sol of solutions.value) {
|
||||
let typeKey = '';
|
||||
if (typeof sol.solution_type === 'string') {
|
||||
@ -89,7 +80,7 @@
|
||||
typeof sol.solution_type === 'object' &&
|
||||
'type' in sol.solution_type
|
||||
) {
|
||||
typeKey = sol.solution_type.type || '';
|
||||
typeKey = sol.solution_type || '';
|
||||
}
|
||||
if (!gourps[typeKey]) gourps[typeKey] = [];
|
||||
gourps[typeKey]?.push(sol);
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
</div>
|
||||
|
||||
<div v-if="!pending" class="page-content">
|
||||
<markdown-renderer :content="content || ''" />
|
||||
<markdown-renderer :content="content.content || ''" />
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
<el-skeleton :rows="5" animated />
|
||||
@ -32,18 +32,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { findOne } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
const { data, pending, error } = await useContactInfo();
|
||||
|
||||
const { data, pending, error } = useAsyncData('contact-info', () =>
|
||||
findOne<StrapiContactInfo>('contact-info', undefined, {
|
||||
populate: '*',
|
||||
locale: strapiLocale,
|
||||
})
|
||||
);
|
||||
|
||||
const content = computed(() => data.value?.data.content ?? '');
|
||||
const content = computed(() => toContactInfoView(data.value));
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
|
||||
@ -35,25 +35,25 @@
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="type in productionTypeOptions"
|
||||
:key="type.documentId"
|
||||
:label="type.type"
|
||||
:value="type.documentId"
|
||||
v-for="type in productTypeOptions"
|
||||
:key="type.id"
|
||||
:label="type.name"
|
||||
:value="type.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span class="select-label">产品系列</span>
|
||||
<el-select
|
||||
v-model="selectedProduction"
|
||||
v-model="selectedProduct"
|
||||
placeholder="选择系列产品"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="production in productionOptions"
|
||||
:key="production.documentId"
|
||||
:label="production.title"
|
||||
:value="production.documentId"
|
||||
v-for="product in productOptions"
|
||||
:key="product.id"
|
||||
:label="product.name"
|
||||
:value="product.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
@ -78,37 +78,24 @@
|
||||
<script setup lang="ts">
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
|
||||
const { find } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
const { data, pending, error } = await useDocumentList();
|
||||
|
||||
const { data, pending, error } = useAsyncData('documents', () =>
|
||||
find<ProductionDocument>('production-documents', {
|
||||
populate: ['document', 'related_productions.production_type'],
|
||||
locale: strapiLocale,
|
||||
})
|
||||
const documents = computed(
|
||||
() => data?.value.map((item) => toDocumentListView(item)) ?? []
|
||||
);
|
||||
|
||||
// const documents = computed(
|
||||
// () =>
|
||||
// data.value?.data.map((item) => ({
|
||||
// ...item.document,
|
||||
// })) || []
|
||||
// );
|
||||
const documents = computed(() => data.value?.data ?? []);
|
||||
|
||||
const keyword = ref('');
|
||||
|
||||
const selectedType = ref<string | null>(null);
|
||||
const selectedProduction = ref<string | null>(null);
|
||||
const selectedType = ref<number | null>(null);
|
||||
const selectedProduct = ref<number | null>(null);
|
||||
|
||||
const productionTypeOptions = computed(() => {
|
||||
const types: ProductionType[] = [];
|
||||
documents.value.forEach((document: ProductionDocument) => {
|
||||
document.related_productions?.forEach((production: Production) => {
|
||||
const productionType = production?.production_type;
|
||||
if (!types.some((p) => p.documentId === productionType.documentId)) {
|
||||
types.push(productionType);
|
||||
const productTypeOptions = computed(() => {
|
||||
const types: DocumentListProductType[] = [];
|
||||
documents.value.forEach((doc: DocumentListView) => {
|
||||
doc.products?.forEach((product: DocumentListProduct) => {
|
||||
const productType = product.type;
|
||||
if (!types.some((item) => item.id === productType.id)) {
|
||||
types.push(productType);
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -116,51 +103,48 @@
|
||||
return types;
|
||||
});
|
||||
|
||||
const productionOptions = computed(() => {
|
||||
const productOptions = computed(() => {
|
||||
if (!selectedType.value) return [];
|
||||
const productions: Production[] = [];
|
||||
documents.value.forEach((document: ProductionDocument) => {
|
||||
document.related_productions.forEach((production: Production) => {
|
||||
const products: DocumentListProduct[] = [];
|
||||
|
||||
documents.value.forEach((doc: DocumentListView) => {
|
||||
doc.products?.forEach((product: DocumentListProduct) => {
|
||||
if (
|
||||
production.production_type?.documentId === selectedType.value &&
|
||||
!productions.some((p) => p.documentId === production.documentId)
|
||||
product.type.id === selectedType.value &&
|
||||
!products.some((item) => item.id === product.id)
|
||||
) {
|
||||
productions.push(production);
|
||||
products.push(product);
|
||||
}
|
||||
});
|
||||
});
|
||||
return productions;
|
||||
|
||||
return products;
|
||||
});
|
||||
|
||||
const filteredDocuments = computed(() =>
|
||||
documents.value
|
||||
.filter((document: ProductionDocument) => {
|
||||
const matchProduction = selectedProduction.value
|
||||
? document.related_productions?.some(
|
||||
(production: Production) =>
|
||||
production.documentId === selectedProduction.value
|
||||
documents.value.filter((doc: DocumentListView) => {
|
||||
const matchProduct = selectedProduct.value
|
||||
? doc.products?.some(
|
||||
(product: DocumentListProduct) =>
|
||||
product.id === selectedProduct.value
|
||||
)
|
||||
: selectedType.value
|
||||
? doc.products?.some(
|
||||
(product: DocumentListProduct) =>
|
||||
product.type?.id === selectedType.value
|
||||
)
|
||||
: selectedType.value
|
||||
? document.related_productions?.some(
|
||||
(production: Production) =>
|
||||
production.production_type?.documentId === selectedType.value
|
||||
)
|
||||
: true;
|
||||
|
||||
const matchKeyword = keyword.value
|
||||
? document.document.caption &&
|
||||
document.document.caption.includes(keyword.value)
|
||||
: true;
|
||||
|
||||
return matchProduction && matchKeyword;
|
||||
})
|
||||
.map((item) => ({
|
||||
...item.document,
|
||||
}))
|
||||
const matchKeyword = keyword.value
|
||||
? doc.title && doc.title.includes(keyword.value)
|
||||
: true;
|
||||
|
||||
return matchProduct && matchKeyword;
|
||||
})
|
||||
);
|
||||
|
||||
watch(selectedType, () => {
|
||||
selectedProduction.value = null;
|
||||
selectedProduct.value = null;
|
||||
});
|
||||
|
||||
watch(documents, (value) => {
|
||||
|
||||
@ -36,25 +36,25 @@
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="type in productionTypeOptions"
|
||||
:key="type.documentId"
|
||||
:label="type.type"
|
||||
:value="type.documentId"
|
||||
v-for="type in productTypeOptions"
|
||||
:key="type.id"
|
||||
:label="type.name"
|
||||
:value="type.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span class="select-label">产品系列</span>
|
||||
<el-select
|
||||
v-model="selectedProduction"
|
||||
v-model="selectedProduct"
|
||||
placeholder="选择系列产品"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="production in productionOptions"
|
||||
:key="production.documentId"
|
||||
:label="production.title"
|
||||
:value="production.documentId"
|
||||
v-for="product in productOptions"
|
||||
:key="product.id"
|
||||
:label="product.name"
|
||||
:value="product.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
@ -78,68 +78,58 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
const { find } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const { data, pending, error } = useAsyncData('questions', () =>
|
||||
find<Question>('questions', {
|
||||
populate: {
|
||||
related_productions: {
|
||||
populate: ['production_type'],
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
})
|
||||
const { data, pending, error } = await useQuestionList();
|
||||
|
||||
const questions = computed(
|
||||
() => data.value.map((item) => toQuestionListView(item)) ?? null
|
||||
);
|
||||
|
||||
const questions = computed(() => data.value?.data ?? null);
|
||||
|
||||
const keyword = ref('');
|
||||
|
||||
const selectedType = ref<string | null>(null);
|
||||
const selectedProduction = ref<string | null>(null);
|
||||
const selectedType = ref<number | null>(null);
|
||||
const selectedProduct = ref<number | null>(null);
|
||||
|
||||
const productionTypeOptions = computed(() => {
|
||||
const types: ProductionType[] = [];
|
||||
questions.value.forEach((q: Question) => {
|
||||
q.related_productions?.forEach((production: Production) => {
|
||||
const productionType = production?.production_type;
|
||||
if (!types.some((p) => p.documentId === productionType.documentId)) {
|
||||
types.push(productionType);
|
||||
const productTypeOptions = computed(() => {
|
||||
const types: QuestionListProductType[] = [];
|
||||
questions.value.forEach((q: QuestionListView) => {
|
||||
q.products.forEach((product: QuestionListProduct) => {
|
||||
const productType = product.type;
|
||||
if (!types.some((p) => p.id === productType.id)) {
|
||||
types.push(productType);
|
||||
}
|
||||
});
|
||||
});
|
||||
return types;
|
||||
});
|
||||
|
||||
const productionOptions = computed(() => {
|
||||
const productOptions = computed(() => {
|
||||
if (!selectedType.value) return [];
|
||||
const productions: Production[] = [];
|
||||
questions.value.forEach((question: Question) => {
|
||||
question.related_productions.forEach((production: Production) => {
|
||||
const products: QuestionListProduct[] = [];
|
||||
questions.value.forEach((q: QuestionListView) => {
|
||||
q.products.forEach((product: QuestionListProduct) => {
|
||||
if (
|
||||
production.production_type?.documentId === selectedType.value &&
|
||||
!productions.some((p) => p.documentId === production.documentId)
|
||||
product.type.id === selectedType.value &&
|
||||
!products.some((p) => p.id === product.id)
|
||||
) {
|
||||
productions.push(production);
|
||||
products.push(product);
|
||||
}
|
||||
});
|
||||
});
|
||||
return productions;
|
||||
return products;
|
||||
});
|
||||
|
||||
const filteredQuestions = computed(() => {
|
||||
return questions.value.filter((question: Question) => {
|
||||
const matchProduction = selectedProduction.value
|
||||
? question.related_productions?.some(
|
||||
(production: Production) =>
|
||||
production.documentId === selectedProduction.value
|
||||
return questions.value.filter((question: QuestionListView) => {
|
||||
const matchProduct = selectedProduct.value
|
||||
? question.products?.some(
|
||||
(product: QuestionListProduct) =>
|
||||
product.id === selectedProduct.value
|
||||
)
|
||||
: selectedType.value
|
||||
? question.related_productions?.some(
|
||||
(production: Production) =>
|
||||
production.production_type?.documentId === selectedType.value
|
||||
? question.products?.some(
|
||||
(product: QuestionListProduct) =>
|
||||
product.type.id === selectedType.value
|
||||
)
|
||||
: true;
|
||||
|
||||
@ -148,12 +138,12 @@
|
||||
(question.content && question.content.includes(keyword.value))
|
||||
: true;
|
||||
|
||||
return matchProduction && matchKeyword;
|
||||
return matchProduct && matchKeyword;
|
||||
});
|
||||
});
|
||||
|
||||
watch(selectedType, () => {
|
||||
selectedProduction.value = null;
|
||||
selectedProduct.value = null;
|
||||
});
|
||||
|
||||
watch(data, (newVal) => {
|
||||
|
||||
Reference in New Issue
Block a user