feat: 页面描述 & 停产产品标示 #97

Manually merged
remilia merged 3 commits from feat/discontinued into master 2025-12-10 14:09:37 +08:00
10 changed files with 96 additions and 26 deletions

View File

@ -38,6 +38,10 @@
<div class="product-info"> <div class="product-info">
<h1>{{ product.name }}</h1> <h1>{{ product.name }}</h1>
<p class="summary">{{ product.summary }}</p> <p class="summary">{{ product.summary }}</p>
<p v-if="product.status === 'discontinued'" class="discontinued-warning">
<el-icon><ElIconWarning /></el-icon>
{{ $t('product-discontinued-warning') }}
</p>
</div> </div>
</div> </div>
</template> </template>
@ -105,6 +109,10 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.discontinued-warning {
color: var(--el-color-error);
}
@media (max-width: 768px) { @media (max-width: 768px) {
.product-header { .product-header {
grid-template-columns: 1fr; grid-template-columns: 1fr;

View File

@ -1,7 +1,13 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1 class="page-title">{{ $t('our-products') }}</h1> <div>
<h1 class="page-title">{{ $t('our-products') }}</h1>
<p class="page-subtitle">
{{ $t('products-desc') }}{{ $t('find-discontinued-products') }}
</p>
</div>
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" /> <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div> </div>
<div v-if="!pending" class="page-content"> <div v-if="!pending" class="page-content">
@ -102,13 +108,18 @@
.page-header { .page-header {
display: flex; display: flex;
margin-bottom: 1rem;
} }
.page-title { .page-title {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
color: var(--el-color-primary); color: var(--el-color-primary);
margin-bottom: 1rem; }
.page-subtitle {
font-size: 0.8rem;
color: var(--el-text-color-secondary);
} }
.breadcrumb { .breadcrumb {

View File

@ -1,7 +1,11 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1 class="page-title">{{ $t('learn-our-solutions') }}</h1> <div>
<h1 class="page-title">{{ $t('learn-our-solutions') }}</h1>
<p class="page-subtitle">{{ $t('solutions-desc') }}</p>
</div>
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" /> <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</div> </div>
<div v-if="!pending" class="solutions-container"> <div v-if="!pending" class="solutions-container">
@ -94,15 +98,20 @@
.page-header { .page-header {
display: flex; display: flex;
margin-bottom: 1rem;
} }
.page-title { .page-title {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
margin-bottom: 1rem;
color: var(--el-color-primary); color: var(--el-color-primary);
} }
.page-subtitle {
font-size: 0.8rem;
color: var(--el-text-color-secondary);
}
.breadcrumb { .breadcrumb {
margin-left: auto; margin-left: auto;
} }

View File

@ -23,8 +23,8 @@
"company-name": "Jinshen Machinary Manufacturing Co., Ltd.", "company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
"company-description": "We specialize in manufacturing a range of paper tube and can equipment, integrating design, manufacturing, sales, and service.", "company-description": "We specialize in manufacturing a range of paper tube and can equipment, integrating design, manufacturing, sales, and service.",
"learn-more": "Learn More", "learn-more": "Learn More",
"products-desc": "We provide high-quality product solutions to meet various business needs.", "products-desc": "We provide the latest products an instant service support to meet various business needs of our customers.",
"solutions-desc": "Providing customized technology solutions for enterprises to accelerate digital transformation.", "solutions-desc": "We offer diversified technical solutions for enterprises, supporting various fields such as industry and packaging.",
"support-desc": "24/7 professional technical support to ensure stable operation of your business.", "support-desc": "24/7 professional technical support to ensure stable operation of your business.",
"quick-links": "Quick Links", "quick-links": "Quick Links",
"utilities": "Utilities", "utilities": "Utilities",
@ -63,7 +63,9 @@
"back-to-home": "Back to Home", "back-to-home": "Back to Home",
"no-content-available": "No detailed information available", "no-content-available": "No detailed information available",
"loading": "Loading...", "loading": "Loading...",
"our-products": "Our Products", "our-products": "Our Latest Products",
"find-discontinued-products": "To find discontinued products, please use the search function.",
"product-discontinued-warning": "Product is discontinued and may no longer receive immediate support or updates",
"learn-our-solutions": "Learn Our Solutions", "learn-our-solutions": "Learn Our Solutions",
"all": "All", "all": "All",
"support-page-desc": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd is committed to providing high-quality products and services to our customers. For products such as paper tube machines, slitting machines, and paper straw equipment, we offer comprehensive after-sales support to ensure our customers can use our products with confidence.", "support-page-desc": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd is committed to providing high-quality products and services to our customers. For products such as paper tube machines, slitting machines, and paper straw equipment, we offer comprehensive after-sales support to ensure our customers can use our products with confidence.",

View File

@ -23,8 +23,8 @@
"company-name": "Jinshen Machinary Manufacturing Co., Ltd.", "company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
"company-description": "Especializado en la producción de una serie de equipos de tubos y latas de papel, integrando diseño, fabricación, ventas y servicio.", "company-description": "Especializado en la producción de una serie de equipos de tubos y latas de papel, integrando diseño, fabricación, ventas y servicio.",
"learn-more": "Saber más", "learn-more": "Saber más",
"products-desc": "Ofrecemos soluciones de productos de alta calidad que satisfacen diversas necesidades empresariales.", "products-desc": "Ofrecemos los últimos productos y un servicio de asistencia instantáneo para satisfacer las diversas necesidades comerciales de nuestros clientes.",
"solutions-desc": "Providing customized technology solutions for enterprises to accelerate digital transformation.", "solutions-desc": "Ofrecemos soluciones técnicas diversificadas para empresas, prestando apoyo en diversos campos, como la industria y el embalaje.",
"support-desc": "Soporte técnico profesional 24/7, asegurando la estabilidad de su negocio.", "support-desc": "Soporte técnico profesional 24/7, asegurando la estabilidad de su negocio.",
"quick-links": "Enlaces rápidos", "quick-links": "Enlaces rápidos",
"utilities": "Herramientas útiles", "utilities": "Herramientas útiles",
@ -63,7 +63,9 @@
"back-to-home": "Volver al inicio", "back-to-home": "Volver al inicio",
"no-content-available": "No hay información disponible", "no-content-available": "No hay información disponible",
"loading": "Cargando...", "loading": "Cargando...",
"our-products": "Nuestros productos", "our-products": "Nuestros últimos productos",
"find-discontinued-products": "Para encontrar productos descatalogados, utilice la función de búsqueda.",
"product-discontinued-warning": "Este producto ha sido descontinuado y puede que ya no reciba soporte o actualizaciones inmediatas.",
"learn-our-solutions": "Aprenda sobre nuestras soluciones", "learn-our-solutions": "Aprenda sobre nuestras soluciones",
"all": "Todo", "all": "Todo",
"support-page-desc": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd se dedica a proporcionar productos y servicios de alta calidad a los clientes. Para máquinas de tubos de papel, máquinas de corte y pajitas de papel, ofrecemos un servicio postventa integral para garantizar que los clientes puedan usar nuestros productos con confianza.", "support-page-desc": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd se dedica a proporcionar productos y servicios de alta calidad a los clientes. Para máquinas de tubos de papel, máquinas de corte y pajitas de papel, ofrecemos un servicio postventa integral para garantizar que los clientes puedan usar nuestros productos con confianza.",

View File

@ -23,8 +23,8 @@
"company-name": "Jinshen Machinary Manufacturing Co., Ltd.", "company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
"company-description": "Профессионально производим оборудование для бумажных трубок и канистр, услуги по проектированию, производству, продаже и сервисному обслуживанию.", "company-description": "Профессионально производим оборудование для бумажных трубок и канистр, услуги по проектированию, производству, продаже и сервисному обслуживанию.",
"learn-more": "Узнать больше", "learn-more": "Узнать больше",
"products-desc": "Мы предоставляем высококачественные решения для различных бизнес-потребностей.", "products-desc": "Мы предоставляем новейшие продукты и мгновенную сервисную поддержку для удовлетворения различных бизнес-потребностей наших клиентов.",
"solutions-desc": "Предлагаем индивидуальные технологические решения для содействия цифровой трансформации.", "solutions-desc": "Мы предлагаем разнообразные технические решения для предприятий, поддерживая различные области, такие как промышленность и упаковка.",
"support-desc": "Профессиональная техническая поддержка 24/7, обеспечивающая стабильную работу вашего бизнеса.", "support-desc": "Профессиональная техническая поддержка 24/7, обеспечивающая стабильную работу вашего бизнеса.",
"quick-links": "Быстрые ссылки", "quick-links": "Быстрые ссылки",
"utilities": "Полезные инструменты", "utilities": "Полезные инструменты",
@ -63,7 +63,9 @@
"back-to-home": "Вернуться на главную", "back-to-home": "Вернуться на главную",
"no-content-available": "Нет доступной информации", "no-content-available": "Нет доступной информации",
"loading": "Загрузка...", "loading": "Загрузка...",
"our-products": "Наши продукты", "our-products": "Наши последние продукты",
"find-discontinued-products": "Чтобы найти другие продукты, используйте функцию поиска.",
"product-discontinued-warning": "Этот продукт снят с производства и может больше не получать мгновенную поддержку или обновления",
"learn-our-solutions": "Узнайте о наших решениях", "learn-our-solutions": "Узнайте о наших решениях",
"all": "Все", "all": "Все",
"support-page-desc": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd Стремится предоставлять клиентам высококачественные продукты и услуги. Мы предлагаем послепродажное обслуживание для таких продуктов, как машины для бумажных трубок и соломинок, обеспечивая уверенность клиентов в использовании нашей продукции.", "support-page-desc": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd Стремится предоставлять клиентам высококачественные продукты и услуги. Мы предлагаем послепродажное обслуживание для таких продуктов, как машины для бумажных трубок и соломинок, обеспечивая уверенность клиентов в использовании нашей продукции.",

View File

@ -23,8 +23,8 @@
"company-name": "金申机械制造有限公司", "company-name": "金申机械制造有限公司",
"company-description": "专业生产一系列纸管、纸罐设备,集设计、制造、销售、服务于一体。", "company-description": "专业生产一系列纸管、纸罐设备,集设计、制造、销售、服务于一体。",
"learn-more": "了解更多", "learn-more": "了解更多",
"products-desc": "我们提供高质量的产品解决方案,满足各种业务需求。", "products-desc": "我们提供最新的产品与即时的服务支持,满足客户的各类业务需求。",
"solutions-desc": "为企业提供定制化的技术解决方案,助力数字化转型。", "solutions-desc": "我们为企业提供多样化的技术解决方案,在工业、包装等多种领域提供支持。",
"support-desc": "7x24小时专业技术支持确保您的业务稳定运行。", "support-desc": "7x24小时专业技术支持确保您的业务稳定运行。",
"quick-links": "快速链接", "quick-links": "快速链接",
"utilities": "实用工具", "utilities": "实用工具",
@ -63,7 +63,9 @@
"back-to-home": "返回首页", "back-to-home": "返回首页",
"no-content-available": "暂无详细信息", "no-content-available": "暂无详细信息",
"loading": "加载中...", "loading": "加载中...",
"our-products": "我们的产品", "our-products": "我们的最新产品",
"find-discontinued-products": "如需查找其他产品,请使用搜索功能",
"product-discontinued-warning": "本产品已停产,可能不再提供即时的支持或更新",
"learn-our-solutions": "了解我们的解决方案", "learn-our-solutions": "了解我们的解决方案",
"all": "全部", "all": "全部",
"support-page-desc": "金申机械制造有限公司致力于为客户提供优质的产品与服务。针对纸管机、分纸机、纸吸管等产品,我们提供全方位的售后服务,确保客户能够安心地使用我们的产品。", "support-page-desc": "金申机械制造有限公司致力于为客户提供优质的产品与服务。针对纸管机、分纸机、纸吸管等产品,我们提供全方位的售后服务,确保客户能够安心地使用我们的产品。",

View File

@ -456,21 +456,26 @@ describe('toProductDocumentView', () => {
* 单元测试: toProductView * 单元测试: toProductView
*/ */
describe('toProductView', () => { describe('toProductView', () => {
const baseData: Product = {
id: 1,
status: 'in-production',
translations: [
{
id: 1,
name: 'Product Name',
summary: 'Product Summary',
description: 'Product Description',
},
],
};
test('convert raw data to ProductView correctly', () => { test('convert raw data to ProductView correctly', () => {
const rawData: Product = { const rawData: Product = {
id: 1, ...baseData,
translations: [
{
id: 1,
name: 'Product Name',
summary: 'Product Summary',
description: 'Product Description',
},
],
}; };
expect(toProductView(rawData)).toEqual({ expect(toProductView(rawData)).toEqual({
id: '1', id: '1',
status: 'in-production',
name: 'Product Name', name: 'Product Name',
summary: 'Product Summary', summary: 'Product Summary',
description: 'Product Description', description: 'Product Description',
@ -483,12 +488,13 @@ describe('toProductView', () => {
test('convert raw data with missing translations', () => { test('convert raw data with missing translations', () => {
const rawData: Product = { const rawData: Product = {
id: 1, ...baseData,
translations: [], translations: [],
}; };
expect(toProductView(rawData)).toEqual({ expect(toProductView(rawData)).toEqual({
id: '1', id: '1',
status: 'in-production',
name: '', name: '',
summary: '', summary: '',
description: '', description: '',
@ -498,4 +504,23 @@ describe('toProductView', () => {
specs: [], specs: [],
}); });
}); });
test('conert raw data with missing status', () => {
const rawData: Product = {
...baseData,
status: undefined,
};
expect(toProductView(rawData)).toEqual({
id: '1',
status: 'discontinued',
name: 'Product Name',
summary: 'Product Summary',
description: 'Product Description',
images: [],
documents: [],
faqs: [],
specs: [],
});
});
}); });

View File

@ -219,6 +219,8 @@ export function toProductDocumentView(
export function toProductView(raw: Product): ProductView { export function toProductView(raw: Product): ProductView {
const trans = raw.translations?.[0]; const trans = raw.translations?.[0];
const status = raw.status ?? 'discontinued';
const images = toProductImageView(raw.images ?? []); const images = toProductImageView(raw.images ?? []);
const specs = toProductSpecGroupView(raw.specs ?? []); const specs = toProductSpecGroupView(raw.specs ?? []);
@ -229,6 +231,7 @@ export function toProductView(raw: Product): ProductView {
return { return {
id: raw.id.toString(), id: raw.id.toString(),
status: status,
name: trans?.name ?? '', name: trans?.name ?? '',
summary: trans?.summary ?? '', summary: trans?.summary ?? '',
images: images, images: images,

View File

@ -1,4 +1,7 @@
import type { DocumentTypeView } from './document-list-view'; import type { DocumentTypeView } from './document-list-view';
import type { Product } from '../directus/my-schema.ts';
type ProductStatus = Product['status'];
/** /**
* 产品图片视图模型 * 产品图片视图模型
@ -90,6 +93,9 @@ export interface ProductView {
/** 唯一标识符 **/ /** 唯一标识符 **/
id: string; id: string;
/** 产品状态 **/
status: ProductStatus;
/** 产品名称 **/ /** 产品名称 **/
name: string; name: string;