fix: 相关命名修正
- production -> product
This commit is contained in:
19
app/app.vue
19
app/app.vue
@ -11,26 +11,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ElConfigProvider } from 'element-plus';
|
||||
|
||||
const { login } = useStrapiAuth();
|
||||
|
||||
const { getElementPlusLocale } = useLocalizations();
|
||||
|
||||
const elementPlusLocale = getElementPlusLocale();
|
||||
|
||||
onMounted(() => {
|
||||
// 检查用户是否已登录
|
||||
const user = useStrapiUser();
|
||||
if (!user.value) {
|
||||
// 如果未登录，重定向到登录页面
|
||||
login({ identifier: 'remilia', password: 'huanshuo51' })
|
||||
.then(() => {
|
||||
console.log('Login successful');
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Login failed:', error);
|
||||
});
|
||||
} else {
|
||||
console.log('User is already logged in:', user.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
<NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink :to="$localePath('/productions')">{{
|
||||
$t('navigation.productions')
|
||||
<NuxtLink :to="$localePath('/products')">{{
|
||||
$t('navigation.products')
|
||||
}}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
:persistent="false"
|
||||
router
|
||||
>
|
||||
<el-menu-item index="productions" :route="$localePath('/productions')">
|
||||
<span class="title">{{ $t('navigation.productions') }}</span>
|
||||
<el-menu-item index="products" :route="$localePath('/products')">
|
||||
<span class="title">{{ $t('navigation.products') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="solutions" :route="$localePath('/solutions')">
|
||||
<span class="title">{{ $t('navigation.solutions') }}</span>
|
||||
@ -81,8 +81,8 @@
|
||||
|
||||
const refreshMenu = () => {
|
||||
const path = router.currentRoute.value.path;
|
||||
if (path.startsWith('/productions')) {
|
||||
activeName.value = 'productions';
|
||||
if (path.startsWith('/products')) {
|
||||
activeName.value = 'products';
|
||||
} else if (path.startsWith('/solutions')) {
|
||||
activeName.value = 'solutions';
|
||||
} else if (path.startsWith('/support')) {
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<el-card class="production-card" @click="handleClick">
|
||||
<el-card class="product-card" @click="handleClick">
|
||||
<template #header>
|
||||
<!-- Image -->
|
||||
<el-image class="production-image" :src="imageUrl" fit="contain" />
|
||||
<el-image class="product-image" :src="imageUrl" fit="contain" />
|
||||
</template>
|
||||
|
||||
<div class="card-body">
|
||||
<!-- Name -->
|
||||
<div class="text-center">
|
||||
<span class="production-name">{{ name }}</span>
|
||||
<span class="product-name">{{ name }}</span>
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<div class="card-description text-left opacity-25">{{ description }}</div>
|
||||
@ -32,25 +32,25 @@
|
||||
// 优先使用 slug，如果没有则使用 id
|
||||
const routeParam = props.slug || props.id;
|
||||
if (routeParam) {
|
||||
navigateTo(localePath(`/productions/${routeParam}`));
|
||||
navigateTo(localePath(`/products/${routeParam}`));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.production-card {
|
||||
.product-card {
|
||||
width: 30%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.production-card:hover {
|
||||
.product-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.production-name {
|
||||
.product-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -60,7 +60,7 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.production-card .el-image {
|
||||
.product-card .el-image {
|
||||
height: 150px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -73,13 +73,13 @@
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.production-card {
|
||||
.product-card {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.production-card {
|
||||
.product-card {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@ -84,7 +84,7 @@
|
||||
});
|
||||
|
||||
const indexLabels = computed<Record<string, string>>(() => ({
|
||||
production: t('search.sections.production'),
|
||||
product: t('search.sections.product'),
|
||||
solution: t('search.sections.solution'),
|
||||
support: t('search.sections.support'),
|
||||
default: t('search.sections.default'),
|
||||
@ -116,7 +116,7 @@
|
||||
const slug = String(slugCandidate);
|
||||
|
||||
if (item.type === 'product') {
|
||||
return localePath({ path: `/productions/${slug}` });
|
||||
return localePath({ path: `/products/${slug}` });
|
||||
}
|
||||
|
||||
if (item.type === 'solution') {
|
||||
|
||||
@ -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.name
|
||||
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.images.length <= 1"
|
||||
:src="getImageUrl(production.images[0].image)"
|
||||
:alt="production.name"
|
||||
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.images || []"
|
||||
v-for="(item, index) in product.images || []"
|
||||
:key="index"
|
||||
>
|
||||
<div class="production-carousel-item">
|
||||
<div class="product-carousel-item">
|
||||
<el-image
|
||||
:src="getImageUrl(item.image || '')"
|
||||
:alt="production.name"
|
||||
: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,26 +55,26 @@
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
||||
<div class="production-info">
|
||||
<h1>{{ production.name }}</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.description || ''" />
|
||||
<markdown-renderer :content="product.description || ''" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="技术规格" name="specs">
|
||||
<spec-table :data="production.specs" />
|
||||
<spec-table :data="product.specs" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="常见问题" name="faq">
|
||||
<question-list :questions="production.faqs" />
|
||||
<question-list :questions="product.faqs" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="相关文档" name="documents">
|
||||
<document-list :documents="production.documents" />
|
||||
<document-list :documents="product.documents" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@ -87,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>
|
||||
@ -117,12 +117,12 @@
|
||||
|
||||
console.log('Raw Data: ', data.value);
|
||||
|
||||
const rawProduction = computed(() => data.value ?? null);
|
||||
const production = computed(() => {
|
||||
return toProductView(rawProduction.value);
|
||||
const rawProduct = computed(() => data.value ?? null);
|
||||
const product = computed(() => {
|
||||
return toProductView(rawProduct.value);
|
||||
});
|
||||
|
||||
console.log('View Data: ', production.value);
|
||||
console.log('View Data: ', product.value);
|
||||
|
||||
const activeName = ref('details'); // 默认选中概览标签
|
||||
|
||||
@ -134,11 +134,11 @@
|
||||
|
||||
// SEO
|
||||
useHead({
|
||||
title: computed(() => production.value?.name || 'Product Detail'),
|
||||
title: computed(() => product.value?.name || 'Product Detail'),
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: computed(() => production.value?.summary || ''),
|
||||
content: computed(() => product.value?.summary || ''),
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -155,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%; */
|
||||
@ -180,7 +180,7 @@
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.production-carousel :deep(.el-carousel__button) {
|
||||
.product-carousel :deep(.el-carousel__button) {
|
||||
/* 指示器按钮样式 */
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@ -189,7 +189,7 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.production-info h1 {
|
||||
.product-info h1 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2rem;
|
||||
@ -202,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;
|
||||
}
|
||||
@ -232,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.id"
|
||||
:slug="production.id.toString()"
|
||||
:image-url="getImageUrl(production.cover.toString())"
|
||||
:name="production.name"
|
||||
: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>
|
||||
@ -51,16 +51,16 @@
|
||||
|
||||
const activeNames = ref<string[]>([]);
|
||||
|
||||
const productionsRaw = computed(() => data.value ?? []);
|
||||
const productions = computed(() =>
|
||||
productionsRaw.value.map((item) => toProductListView(item))
|
||||
const productsRaw = computed(() => data.value ?? []);
|
||||
const products = computed(() =>
|
||||
productsRaw.value.map((item) => toProductListView(item))
|
||||
);
|
||||
|
||||
// 按类型分组
|
||||
// 兼容 production_type 既可能为对象也可能为字符串
|
||||
const groupedProductions = computed(() => {
|
||||
// 兼容 product_type 既可能为对象也可能为字符串
|
||||
const groupedProducts = computed(() => {
|
||||
const groups: Record<string, ProductListView[]> = {};
|
||||
for (const prod of productions.value) {
|
||||
for (const prod of products.value) {
|
||||
let typeKey = '';
|
||||
if (typeof prod.product_type === 'string') {
|
||||
typeKey = prod.product_type;
|
||||
@ -78,10 +78,10 @@
|
||||
return groups;
|
||||
});
|
||||
|
||||
watch(groupedProductions, () => {
|
||||
if (groupedProductions.value) {
|
||||
watch(groupedProducts, () => {
|
||||
if (groupedProducts.value) {
|
||||
activeNames.value = [
|
||||
...Object.keys(groupedProductions.value),
|
||||
...Object.keys(groupedProducts.value),
|
||||
'no-category',
|
||||
];
|
||||
}
|
||||
@ -100,9 +100,9 @@
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (groupedProductions.value) {
|
||||
if (groupedProducts.value) {
|
||||
activeNames.value = [
|
||||
...Object.keys(groupedProductions.value),
|
||||
...Object.keys(groupedProducts.value),
|
||||
'no-category',
|
||||
];
|
||||
}
|
||||
@ -131,13 +131,13 @@
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.productions-container {
|
||||
.products-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.production-group {
|
||||
.product-group {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@ -35,12 +35,12 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="`产品(${resultCount['product'] || 0})`"
|
||||
name="production"
|
||||
name="product"
|
||||
>
|
||||
<search-results
|
||||
v-model:current-page="currentPage"
|
||||
:search-items="searchItems"
|
||||
category="production"
|
||||
category="product"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
|
||||
const filteredDocuments = computed(() =>
|
||||
documents.value.filter((doc: DocumentListView) => {
|
||||
const matchProduction = selectedProduct.value
|
||||
const matchProduct = selectedProduct.value
|
||||
? doc.products?.some(
|
||||
(product: DocumentListProduct) =>
|
||||
product.id === selectedProduct.value
|
||||
@ -124,7 +124,7 @@
|
||||
? doc.title && doc.title.includes(keyword.value)
|
||||
: true;
|
||||
|
||||
return matchProduction && matchKeyword;
|
||||
return matchProduct && matchKeyword;
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
@ -34,18 +34,14 @@
|
||||
:value="type.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="selectedProduct"
|
||||
placeholder="选择系列产品"
|
||||
clearable
|
||||
>
|
||||
<el-sel v-model="selectedProduct" placeholder="选择系列产品" clearable>
|
||||
<el-option
|
||||
v-for="production in productOptions"
|
||||
:key="production.id"
|
||||
:label="production.name"
|
||||
:value="production.id"
|
||||
v-for="product in productOptions"
|
||||
:key="product.id"
|
||||
:label="product.name"
|
||||
:value="product.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-sel>
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="输入关键词..."
|
||||
@ -105,7 +101,7 @@
|
||||
|
||||
const filteredQuestions = computed(() => {
|
||||
return questions.value.filter((question: QuestionListView) => {
|
||||
const matchProduction = selectedProduct.value
|
||||
const matchProduct = selectedProduct.value
|
||||
? question.products?.some(
|
||||
(product: QuestionListProduct) =>
|
||||
product.id === selectedProduct.value
|
||||
@ -122,7 +118,7 @@
|
||||
(question.content && question.content.includes(keyword.value))
|
||||
: true;
|
||||
|
||||
return matchProduction && matchKeyword;
|
||||
return matchProduct && matchKeyword;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user