lizhuang
/
hanye-website
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

refactor: 优化Markdown配置和样式 

本次提交主要进行了以下修改：
1. 移除了nuxt.config.ts中的Markdown目录配置，简化了Markdown设置。
2. 在styles.css中新增了Markdown内容的样式，提升了Markdown文本的可读性和视觉效果。
3. 更新了多个页面的样式，确保在不同屏幕尺寸下的响应式布局。

这些改动旨在提升用户体验和页面的整体美观性。
master
lizhuang 3 months ago
parent
aa4a1cde24
commit
16c334851e
6 changed files with 518 additions and 178 deletions
Unified View Show Diff Stats
  1. 184
    0
      assets/css/styles.css
  2. 0
    5
      nuxt.config.ts
  3. 5
    5
      pages/index.vue
  4. 155
    72
      pages/products/[id].vue
  5. 93
    14
      pages/products/index.vue
  6. 81
    82
      public/data/products-zh.json

+ 184
- 0
assets/css/styles.css View File



html[lang="en"] body { html[lang="en"] body {
font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important; font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important;
}

/* Markdown 内容样式 */
.prose {
color: rgba(255, 255, 255, 0.6);
line-height: 1.625;
}

.prose h1 {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 1.5rem;
margin-top: 2rem;
}

.prose h2 {
font-size: 1.25rem;
font-weight: 600;
color: white;
margin-bottom: 1rem;
margin-top: 1.5rem;
}

.prose h3 {
font-size: 1.125rem;
font-weight: 500;
color: white;
margin-bottom: 0.75rem;
margin-top: 1.25rem;
}

.prose h4 {
font-size: 1rem;
font-weight: 500;
color: white;
margin-bottom: 0.5rem;
margin-top: 1rem;
}

.prose p {
margin-bottom: 1rem;
line-height: 1.75;
}

.prose a {
text-decoration: none;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color 0.2s;
pointer-events: none;
}

.prose a:hover {
color: rgb(147 197 253);
}

.prose ul,
.prose ol {
margin: 1rem 0;
margin-left: 0rem;
}

.prose ul {
list-style-type: disc;
}

.prose ol {
list-style-type: decimal;
}

.prose li {
margin-bottom: 0.5rem;
}

.prose blockquote {
border-left: 4px solid rgb(59 130 246);
padding-left: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin: 1rem 0;
background-color: rgba(39, 39, 42, 0.5);
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}

.prose blockquote p {
color: rgb(214 211 209);
font-style: italic;
margin-bottom: 0;
}

.prose code {
background-color: rgb(39, 39, 42);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-size: 0.875rem;
font-family: ui-monospace, monospace;
color: rgb(147 197 253);
}

.prose pre {
background-color: rgb(39, 39, 42);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin: 1rem 0;
}

.prose pre code {
background-color: transparent;
padding: 0;
font-size: 0.875rem;
color: rgb(214 211 209);
}

.prose img {
border-radius: 0.5rem;
margin: 1.5rem 0;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.prose table {
width: 100%;
margin: 1.5rem 0;
border-collapse: collapse;
table-layout: fixed;
}

.prose th {
background-color: rgb(39, 39, 42);
color: white;
font-weight: 500;
padding: 0.5rem 1rem;
text-align: left;
border: 1px solid rgb(63, 63, 70);
}

.prose td {
padding: 0.5rem 1rem;
border: 1px solid rgb(63, 63, 70);
}

.prose tr:nth-child(even) {
background-color: rgba(39, 39, 42, 0.3);
}

.prose hr {
margin: 2rem 0;
border-color: rgb(63, 63, 70);
}

.prose strong {
font-weight: 600;
color: white;
}

.prose em {
font-style: italic;
color: rgb(214 211 209);
}

.prose kbd {
background-color: rgb(39, 39, 42);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
font-family: ui-monospace, monospace;
border: 1px solid rgb(63, 63, 70);
}

.prose details {
margin: 1rem 0;
}

.prose summary {
cursor: pointer;
font-weight: 500;
color: white;
}

.prose details[open] summary {
margin-bottom: 0.5rem;
} }

+ 0
- 5
nuxt.config.ts View File

// 配置 Markdown // 配置 Markdown
build: { build: {
markdown: { markdown: {
toc: {
depth: 3,
searchDepth: 3,
},
highlight: { highlight: {
// Theme used in all color schemes.
theme: "github-light", theme: "github-light",
}, },
}, },

+ 5
- 5
pages/index.vue View File

<template> <template>
<div> <div>
<!-- 轮播图 --> <!-- 轮播图 -->
<section class="max-w-full mb-12 md:mb-32">
<section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
<Swiper <Swiper
:modules="[Pagination, Autoplay, EffectCreative]" :modules="[Pagination, Autoplay, EffectCreative]"
:slides-per-view="1" :slides-per-view="1"
</section> </section>


<!-- 按用途产品展示 --> <!-- 按用途产品展示 -->
<section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4">
<section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
<div class="max-w-screen-2xl mx-auto relative"> <div class="max-w-screen-2xl mx-auto relative">
<div <div
class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4" class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
</section> </section>


<!-- 按分类栏目展示 --> <!-- 按分类栏目展示 -->
<section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4">
<section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
<div class="max-w-screen-2xl mx-auto relative"> <div class="max-w-screen-2xl mx-auto relative">
<div <div
class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4" class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
</section> </section>


<!-- 产品核心展示 --> <!-- 产品核心展示 -->
<section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4">
<section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
<div <div
class="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4" class="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4"
> >
</section> </section>


<!-- 当社の強み --> <!-- 当社の強み -->
<section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4">
<section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
<div class="max-w-screen-2xl mx-auto relative"> <div class="max-w-screen-2xl mx-auto relative">
<div <div
class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4" class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"

+ 155
- 72
pages/products/[id].vue View File

<div class="max-w-screen-2xl mx-auto"> <div class="max-w-screen-2xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
<!-- 左侧产品图片 --> <!-- 左侧产品图片 -->
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-6 lg:sticky lg:top-24 self-start">
<!-- 主图展示 --> <!-- 主图展示 -->
<div <div
class="bg-zinc-900 rounded-lg p-8 relative overflow-hidden group aspect-square" class="bg-zinc-900 rounded-lg p-8 relative overflow-hidden group aspect-square"
</div> </div>
</div> </div>
</div> </div>

<!-- 缩略图列表 --> <!-- 缩略图列表 -->
<div class="flex gap-4 overflow-x-auto pb-2 scrollbar-hide"> <div class="flex gap-4 overflow-x-auto pb-2 scrollbar-hide">
<div <div
<!-- 缩略图加载状态 --> <!-- 缩略图加载状态 -->
<div <div
v-if="isThumbnailLoading[index]" v-if="isThumbnailLoading[index]"
class="absolute inset-0 flex items-center justify-center bg-zinc-800 rounded-lg"
class="absolute inset-0 flex items-center justify-center bg-zinc-800/50 rounded-lg z-10"
> >
<div <div
class="animate-spin h-4 w-4 border-2 border-blue-500 rounded-full border-t-transparent" class="animate-spin h-4 w-4 border-2 border-blue-500 rounded-full border-t-transparent"
class="w-full h-full object-cover transition-all duration-300 rounded-lg" class="w-full h-full object-cover transition-all duration-300 rounded-lg"
:class="{ :class="{
'opacity-0': isThumbnailLoading[index], 'opacity-0': isThumbnailLoading[index],
'opacity-100': !isThumbnailLoading[index],
'opacity-100': !isThumbnailLoading[index] && !thumbnailErrors[index],
'group-hover:scale-110': currentImage !== image, 'group-hover:scale-110': currentImage !== image,
}" }"
@load="handleThumbnailLoad(index)" @load="handleThumbnailLoad(index)"
const thumbnailErrors = ref<boolean[]>([]); const thumbnailErrors = ref<boolean[]>([]);
const preloadImage = ref<string | null>(null); const preloadImage = ref<string | null>(null);


// 滚动跟随相关
const scrollContainer = ref<HTMLElement | null>(null);
const isSticky = ref(false);

interface Product { interface Product {
id: string; id: string;
name: string; name: string;
usage: string[]; usage: string[];
capacities: string[]; capacities: string[];
category: string; category: string;
categoryId: string;
description: string; description: string;
summary: string; summary: string;
image: string; image: string;
/** /**
* 使用queryCollection获取产品数据 * 使用queryCollection获取产品数据
*/ */
const { data: productContent } = await useAsyncData(`product-${id}`, async () => {
try {
// 使用queryCollection从content目录获取数据
const content = await queryCollection("content")
const { data: productContent } = await useAsyncData(
`product-${id}`,
async () => {
try {
// 使用queryCollection从content目录获取数据
const content = await queryCollection("content")
.where("path", "LIKE", `/products/${locale.value}/${id}`) .where("path", "LIKE", `/products/${locale.value}/${id}`)
.first();
return content;
} catch (err) {
console.error("Error fetching product content:", err);
error.value = new Error(t("products.loadError"));
return null;
.first();
return content;
} catch (err) {
console.error("Error fetching product content:", err);
error.value = new Error(t("products.loadError"));
return null;
}
} }
});
);


/** /**
* 获取分类信息 * 获取分类信息
*/ */

const { data: categoryContent } = await useAsyncData( const { data: categoryContent } = await useAsyncData(
`category-${productContent.value?.categoryId}`,
`category-${productContent.value?.meta?.categoryId}`,
async () => { async () => {
if (!productContent.value?.categoryId) return null;
if (!productContent.value?.meta?.categoryId) return null;
try { try {
const content = await queryCollection("content") const content = await queryCollection("content")
.where("path", "LIKE", `/categories/${locale.value}/${productContent.value.categoryId}`)
.where(
"path",
"LIKE",
`/categories/${locale.value}/${productContent.value.meta?.categoryId}`
)
.first(); .first();
return content; return content;
} catch (err) { } catch (err) {
} }
}, },
{ {
immediate: !!productContent.value?.categoryId
immediate: !!productContent.value?.meta?.categoryId,
} }
); );


*/ */
const product = computed<Product | null>(() => { const product = computed<Product | null>(() => {
if (!productContent.value) return null; if (!productContent.value) return null;
// 提取产品数据 // 提取产品数据
const meta = productContent.value.meta || {}; const meta = productContent.value.meta || {};
return { return {
id: id,
id: id,
name: String(meta.name || productContent.value.title || ""), name: String(meta.name || productContent.value.title || ""),
title: String(productContent.value.title || meta.name || ""), title: String(productContent.value.title || meta.name || ""),
usage: Array.isArray(meta.usage) ? meta.usage : [], usage: Array.isArray(meta.usage) ? meta.usage : [],
capacities: Array.isArray(meta.capacities) ? meta.capacities : [], capacities: Array.isArray(meta.capacities) ? meta.capacities : [],
category: categoryContent.value?.title || "", category: categoryContent.value?.title || "",
categoryId: meta.categoryId || "",
description: productContent.value.description || "", description: productContent.value.description || "",
summary: String(meta.summary || ""), summary: String(meta.summary || ""),
image: String(meta.image || ""), image: String(meta.image || ""),
gallery: Array.isArray(meta.gallery) ? meta.gallery : [], gallery: Array.isArray(meta.gallery) ? meta.gallery : [],
body: productContent.value.body || "", body: productContent.value.body || "",
content: productContent.value, content: productContent.value,
meta: {
meta: {
series: Array.isArray(meta.series) ? meta.series : [], series: Array.isArray(meta.series) ? meta.series : [],
name: String(meta.name || ""), name: String(meta.name || ""),
title: String(productContent.value.title || ""), title: String(productContent.value.title || ""),
image: String(meta.image || ""), image: String(meta.image || ""),
summary: String(meta.summary || ""), summary: String(meta.summary || ""),
},
};
},
};
}); });


/** /**
.where("path", "LIKE", `/products/${locale.value}/%`) .where("path", "LIKE", `/products/${locale.value}/%`)
.all(); .all();
return content; return content;
} catch (err) {
} catch (err) {
console.error("Error fetching related products:", err); console.error("Error fetching related products:", err);
return []; return [];
} }
*/ */
const relatedProducts = computed(() => { const relatedProducts = computed(() => {
if (!relatedProductsContent.value || !product.value) return []; if (!relatedProductsContent.value || !product.value) return [];
return relatedProductsContent.value return relatedProductsContent.value
.filter((item: any) => item._path !== `/products/${locale.value}/${id}`) .filter((item: any) => item._path !== `/products/${locale.value}/${id}`)
.map((item: any) => { .map((item: any) => {
const meta = item.meta || {}; const meta = item.meta || {};
console.log(meta);
return { return {
id: item._path?.split('/').pop() || "",
id: meta.name || "",
name: meta.name || item.title || "", name: meta.name || item.title || "",
title: item.title || meta.name || "", title: item.title || meta.name || "",
image: meta.image || "", image: meta.image || "",
* 重试加载缩略图 * 重试加载缩略图
*/ */
function retryLoadThumbnail(index: number) { function retryLoadThumbnail(index: number) {
// 确保index在有效范围内
if (index < 0) {
console.error('Invalid thumbnail index:', index);
return;
}

const images = [product.value?.image, ...(product.value?.gallery || [])];
const imageUrl = images[index];

// 检查图片URL是否有效
if (!imageUrl) {
console.error('Invalid image URL for thumbnail:', index);
thumbnailErrors.value[index] = true;
isThumbnailLoading.value[index] = false;
return;
}

console.log('Retrying thumbnail load:', { index, imageUrl });

isThumbnailLoading.value[index] = true; isThumbnailLoading.value[index] = true;
thumbnailErrors.value[index] = false; thumbnailErrors.value[index] = false;
// 强制重新加载缩略图

// 创建新的图片对象并设置超时
const img = new Image(); const img = new Image();
const images = [product.value?.image, ...(product.value?.gallery || [])];
img.src = images[index] || "";
const timeoutId = setTimeout(() => {
console.error('Thumbnail load timeout:', index);
handleThumbnailError(index);
}, 10000); // 10秒超时

img.onload = () => { img.onload = () => {
clearTimeout(timeoutId);
console.log('Thumbnail loaded successfully:', index);
handleThumbnailLoad(index); handleThumbnailLoad(index);
}; };
img.onerror = () => {

img.onerror = (error) => {
clearTimeout(timeoutId);
console.error('Thumbnail load error:', { index, error });
handleThumbnailError(index); handleThumbnailError(index);
}; };

// 设置跨域属性
img.crossOrigin = 'anonymous';
// 最后设置src以开始加载
img.src = imageUrl;
} }


/** /**
* 处理缩略图加载完成 * 处理缩略图加载完成
*/ */
function handleThumbnailLoad(index: number) { function handleThumbnailLoad(index: number) {
console.log('Thumbnail load handler called:', index);
// 确保数组索引存在
if (typeof isThumbnailLoading.value[index] === 'undefined') {
console.warn('Thumbnail index out of bounds:', index);
return;
}
// 直接修改对应索引的状态
isThumbnailLoading.value[index] = false; isThumbnailLoading.value[index] = false;
thumbnailErrors.value[index] = false; thumbnailErrors.value[index] = false;
} }
* 处理缩略图加载错误 * 处理缩略图加载错误
*/ */
function handleThumbnailError(index: number) { function handleThumbnailError(index: number) {
console.log('Thumbnail error handler called:', index);
// 确保数组索引存在
if (typeof isThumbnailLoading.value[index] === 'undefined') {
console.warn('Thumbnail index out of bounds:', index);
return;
}
// 直接修改对应索引的状态
isThumbnailLoading.value[index] = false; isThumbnailLoading.value[index] = false;
thumbnailErrors.value[index] = true; thumbnailErrors.value[index] = true;
} }
if (product.value?.image) { if (product.value?.image) {
currentImage.value = product.value.image; currentImage.value = product.value.image;
} }
// 初始化缩略图加载状态数组 // 初始化缩略图加载状态数组
const galleryLength = (product.value?.gallery?.length || 0) + 1; // +1是因为主图也算一张
isThumbnailLoading.value = Array(galleryLength).fill(true);
thumbnailErrors.value = Array(galleryLength).fill(false);
const galleryLength = (product.value?.gallery?.length || 0) + 1;
isThumbnailLoading.value = new Array(galleryLength).fill(true);
thumbnailErrors.value = new Array(galleryLength).fill(false);
// 预加载所有缩略图
const images = [product.value?.image, ...(product.value?.gallery || [])];
images.forEach((image, index) => {
if (image) {
const img = new Image();
img.onload = () => handleThumbnailLoad(index);
img.onerror = () => handleThumbnailError(index);
img.src = image;
}
});
console.log('Initialized thumbnail states:', {
loading: isThumbnailLoading.value,
errors: thumbnailErrors.value
});

// 添加滚动监听
scrollContainer.value = document.querySelector('.max-w-screen-2xl');
if (scrollContainer.value) {
window.addEventListener('scroll', handleScroll, { passive: true });
}
}); });


// 清理滚动监听
onUnmounted(() => {
if (scrollContainer.value) {
window.removeEventListener('scroll', handleScroll);
}
});

// 处理滚动事件
function handleScroll() {
if (!scrollContainer.value) return;
const containerRect = scrollContainer.value.getBoundingClientRect();
const scrollTop = window.scrollY || document.documentElement.scrollTop;
// 当容器顶部距离视窗顶部小于100px时，启用sticky
isSticky.value = containerRect.top < 100;
}

// SEO优化 // SEO优化
useHead(() => ({ useHead(() => ({
title: `${product.value?.name || "产品详情"} - Hanye`, title: `${product.value?.name || "产品详情"} - Hanye`,
})); }));
</script> </script>


<style scoped>
<style lang="scss" scoped>
/* 隐藏滚动条但保持滚动功能 */ /* 隐藏滚动条但保持滚动功能 */
.scrollbar-hide { .scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
0 2px 4px -1px rgba(0, 0, 0, 0.06); 0 2px 4px -1px rgba(0, 0, 0, 0.06);
} }


/* 添加 prose 样式 */
.prose {
@apply text-stone-400;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
@apply text-white font-medium;
}

.prose a {
@apply text-blue-400 hover:text-blue-300;
}

.prose ul,
.prose ol {
@apply list-disc list-inside;
}

.prose blockquote {
@apply border-l-4 border-zinc-700 pl-4 italic;
}

.prose code {
@apply bg-zinc-800 px-1 py-0.5 rounded;
}

.prose pre {
@apply bg-zinc-800 p-4 rounded-lg overflow-x-auto;
/* 滚动跟随效果 */
.lg\:sticky {
position: sticky;
top: 6rem; /* 96px */
transition: all 0.3s ease;
z-index: 10;
max-height: calc(100vh - 6rem);
overflow-y: auto;
} }


.prose img {
@apply rounded-lg;
@media (max-width: 1024px) {
.lg\:sticky {
position: relative;
top: 0;
max-height: none;
}
} }
</style> </style>

+ 93
- 14
pages/products/index.vue View File

</div> </div>


<div v-else> <div v-else>
<div class="w-full mb-8 md:mb-12 lg:mb-16 relative">
<div class="w-full mb-8 md:mb-12 lg:mb-16 relative">
<div class="absolute top-0 left-0 w-full h-full z-10"> <div class="absolute top-0 left-0 w-full h-full z-10">
<div <div
class="max-w-screen-2xl mx-auto h-full flex flex-col justify-center gap-2 md:gap-4 p-4 md:p-6 lg:p-8" class="max-w-screen-2xl mx-auto h-full flex flex-col justify-center gap-2 md:gap-4 p-4 md:p-6 lg:p-8"
<div class="max-w-screen-2xl mx-auto"> <div class="max-w-screen-2xl mx-auto">
<div class="w-full grid grid-cols-1 md:grid-cols-10 gap-4 md:gap-6 lg:gap-8"> <div class="w-full grid grid-cols-1 md:grid-cols-10 gap-4 md:gap-6 lg:gap-8">
<div <div
class="col-span-1 md:col-span-2 flex flex-col gap-8 md:gap-12 lg:gap-16 mb-6 md:mb-0"
class="col-span-1 md:col-span-2 flex flex-col gap-4 sm:gap-6 md:gap-8 lg:gap-10 xl:gap-12 2xl:gap-16 mb-4 sm:mb-6 md:mb-8 lg:mb-10 xl:mb-12 2xl:mb-16"
> >
<div class="flex flex-col gap-3 md:gap-4">
<div class="flex flex-col gap-2 sm:gap-3 md:gap-4 lg:gap-5 xl:gap-6">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="text-white text-xl md:text-2xl lg:text-3xl font-medium">
<div class="text-white text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-medium">
{{ t("products.product_categories_title") }} {{ t("products.product_categories_title") }}
</div> </div>
<button <button
v-if="selectedCategory" v-if="selectedCategory"
@click="clearCategory" @click="clearCategory"
class="flex items-center gap-1 px-2 py-1 md:px-3 md:py-1.5 text-xs md:text-sm text-white/60 hover:text-white bg-zinc-800/50 hover:bg-zinc-700/50 rounded-lg transition-all duration-300"
class="flex items-center gap-1 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-2.5 md:py-1.5 lg:px-3 lg:py-2 text-xs sm:text-sm md:text-base text-white/60 hover:text-white bg-zinc-800/50 hover:bg-zinc-700/50 rounded-lg transition-all duration-300 active:scale-95"
> >
<span>{{ t("common.clear") }}</span> <span>{{ t("common.clear") }}</span>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 md:h-4 md:w-4"
class="h-2.5 w-2.5 sm:h-3 sm:w-3 md:h-4 md:w-4"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
</svg> </svg>
</button> </button>
</div> </div>
<div class="flex flex-col gap-2 md:gap-3 w-fit">
<div class="flex flex-row sm:flex-col gap-1.5 sm:gap-2 md:gap-2.5 lg:gap-3 xl:gap-4 w-full sm:w-fit overflow-x-auto sm:overflow-x-visible pb-2 sm:pb-0">
<div <div
v-for="category in categories" v-for="category in categories"
:key="category" :key="category"
@click="handleCategoryFilter(category)" @click="handleCategoryFilter(category)"
class="opacity-80 select-none text-white text-sm md:text-base font-normal cursor-pointer hover:opacity-100 transition-all duration-300 px-3 py-1.5 md:px-4 md:py-2 rounded-lg inline-block"
class="opacity-80 select-none text-white text-xs sm:text-sm md:text-base lg:text-lg font-normal cursor-pointer hover:opacity-100 transition-all duration-300 px-2 py-1 sm:px-2.5 sm:py-1.5 md:px-3 md:py-2 lg:px-4 lg:py-2.5 rounded-lg inline-block active:scale-95 whitespace-nowrap"
:class="{ :class="{
'opacity-100 font-bold bg-gradient-to-r from-blue-700 to-blue-400 text-white border-0 shadow-lg scale-105 transition-all duration-300': 'opacity-100 font-bold bg-gradient-to-r from-blue-700 to-blue-400 text-white border-0 shadow-lg scale-105 transition-all duration-300':
selectedCategory === category, selectedCategory === category,
</div> </div>
</div> </div>


<div class="flex flex-col gap-3 md:gap-4">
<div class="flex flex-col gap-2 sm:gap-3 md:gap-4 lg:gap-5 xl:gap-6">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="text-white text-xl md:text-2xl lg:text-3xl font-medium">
<div class="text-white text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-medium">
{{ t("products.product_categories_usage") }} {{ t("products.product_categories_usage") }}
</div> </div>
<button <button
v-if="selectedUsage" v-if="selectedUsage"
@click="clearUsage" @click="clearUsage"
class="flex items-center gap-1 px-2 py-1 md:px-3 md:py-1.5 text-xs md:text-sm text-white/60 hover:text-white bg-zinc-800/50 hover:bg-zinc-700/50 rounded-lg transition-all duration-300"
class="flex items-center gap-1 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-2.5 md:py-1.5 lg:px-3 lg:py-2 text-xs sm:text-sm md:text-base text-white/60 hover:text-white bg-zinc-800/50 hover:bg-zinc-700/50 rounded-lg transition-all duration-300 active:scale-95"
> >
<span>{{ t("common.clear") }}</span> <span>{{ t("common.clear") }}</span>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 md:h-4 md:w-4"
class="h-2.5 w-2.5 sm:h-3 sm:w-3 md:h-4 md:w-4"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
</svg> </svg>
</button> </button>
</div> </div>
<div class="flex flex-col gap-2 md:gap-3 w-fit">
<div class="flex flex-row sm:flex-col gap-1.5 sm:gap-2 md:gap-2.5 lg:gap-3 xl:gap-4 w-full sm:w-fit overflow-x-auto sm:overflow-x-visible pb-2 sm:pb-0">
<div <div
v-for="usage in usages" v-for="usage in usages"
:key="usage" :key="usage"
@click="handleUsageFilter(usage)" @click="handleUsageFilter(usage)"
class="opacity-80 select-none text-white text-sm md:text-base font-normal cursor-pointer hover:opacity-100 transition-all duration-300 px-3 py-1.5 md:px-4 md:py-2 rounded-lg inline-block"
class="opacity-80 select-none text-white text-xs sm:text-sm md:text-base lg:text-lg font-normal cursor-pointer hover:opacity-100 transition-all duration-300 px-2 py-1 sm:px-2.5 sm:py-1.5 md:px-3 md:py-2 lg:px-4 lg:py-2.5 rounded-lg inline-block active:scale-95 whitespace-nowrap"
:class="{ :class="{
'opacity-100 font-bold bg-gradient-to-r from-blue-700 to-blue-400 text-white border-0 shadow-lg scale-105 transition-all duration-300': 'opacity-100 font-bold bg-gradient-to-r from-blue-700 to-blue-400 text-white border-0 shadow-lg scale-105 transition-all duration-300':
selectedUsage === usage, selectedUsage === usage,
padding: 1.5rem; padding: 1.5rem;
} }
} }

/* 导航栏样式优化 */
.bg-zinc-900\/50 {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

/* 导航项悬停效果 */
.group:hover {
transform: translateX(4px);
}

/* 清除按钮动画 */
button {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

button:active {
transform: translateY(0);
}

/* 响应式调整 */
@media (max-width: 768px) {
.bg-zinc-900\/50 {
padding: 1rem;
}
.group:hover {
transform: translateX(2px);
}
}

@media (min-width: 768px) {
.bg-zinc-900\/50 {
padding: 1.5rem;
}
}

@media (min-width: 1024px) {
.bg-zinc-900\/50 {
padding: 2rem;
}
}

/* 优化点击反馈 */
.active\:scale-95:active {
transform: scale(0.95);
}

/* 优化过渡动画 */
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

/* 优化横向滚动 */
.overflow-x-auto {
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}

.overflow-x-auto::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}

/* 响应式断点说明：
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
*/
</style> </style>

+ 81
- 82
public/data/products-zh.json View File

"移动数据传输/备份" "移动数据传输/备份"
], ],
"category": 5, "category": 5,
"image": "/images/products/cr-201bk.webp",
"description": "USB 3.0 多功能读卡器，支持SD/microSD卡",
"summary": "高速USB 3.0读卡器，支持多种存储卡格式，便携易用",
"image": "/images/products/Card Reader/CR-201BK/cr-201bk.webp",
"description": "",
"summary": "适用于具有OTG功能的PC和平板电脑、安卓智能手机",
"series": [ "series": [
"Card Reader" "Card Reader"
], ],
"gallery": [ "gallery": [
"/images/products/cr-201bk-1.webp",
"/images/products/cr-201bk-2.webp",
"/images/products/cr-201bk-3.webp"
"/images/products/Card Reader/CR-201BK/cr-201bk-1.webp"
], ],
"capacities": [ "capacities": [
"N/A"
""
] ]
}, },
{ {
"id": "DDR3-SODIMM-8GB-1.35V", "id": "DDR3-SODIMM-8GB-1.35V",
"title": "DDR3-SODIMM 8GB 1.35V",
"name": "DDR3-SODIMM 8GB 1.35V",
"title": "DDR3-SODIMM-8GB-1.35V",
"name": "DDR3-SODIMM-8GB-1.35V",
"usage": [ "usage": [
"内存升级/性能提升" "内存升级/性能提升"
], ],
}, },
{ {
"id": "DDR3-SODIMM-8GB-1.5V", "id": "DDR3-SODIMM-8GB-1.5V",
"title": "DDR3-SODIMM 8GB 1.5V",
"name": "DDR3-SODIMM 8GB 1.5V",
"title": "DDR3-SODIMM-8GB-1.5V",
"name": "DDR3-SODIMM-8GB-1.5V",
"usage": [ "usage": [
"内存升级/性能提升" "内存升级/性能提升"
], ],
}, },
{ {
"id": "DDR3-UDIMM-8GB-1.5V", "id": "DDR3-UDIMM-8GB-1.5V",
"title": "DDR3-UDIMM 8GB 1.5V",
"name": "DDR3-UDIMM 8GB 1.5V",
"title": "DDR3-UDIMM-8GB-1.5V",
"name": "DDR3-UDIMM-8GB-1.5V",
"usage": [ "usage": [
"内存升级/性能提升" "内存升级/性能提升"
], ],
"移动数据传输/备份" "移动数据传输/备份"
], ],
"category": 6, "category": 6,
"image": "/images/products/hse-m20grc01.webp",
"image": "/images/products/M.2 SSD Enclosure/HSE-M20GRC01/hse-m20grc01.webp",
"description": "M.2 SSD外接硬盘盒，支持SATA协议", "description": "M.2 SSD外接硬盘盒，支持SATA协议",
"summary": "高速USB 3.0 M.2 SATA SSD外接盒，轻巧便携，支持即插即用",
"summary": "这是一款可将M.2 NVMe/SATA SSD变为外置硬盘的便携盒。",
"series": [ "series": [
"M.2 SSD Enclosure" "M.2 SSD Enclosure"
], ],
"gallery": [ "gallery": [
"/images/products/hse-m20grc01-1.webp",
"/images/products/hse-m20grc01-2.webp",
"/images/products/hse-m20grc01-3.webp"
"/images/products/M.2 SSD Enclosure/HSE-M20GRC01/hse-m20grc01-1.webp"
], ],
"capacities": [
"N/A"
]
"capacities": []
}, },
{ {
"id": "HSE-M40GRC01", "id": "HSE-M40GRC01",
"移动数据传输/备份" "移动数据传输/备份"
], ],
"category": 6, "category": 6,
"image": "/images/products/hse-m40grc01.webp",
"image": "/images/products/M.2 SSD Enclosure/HSE-M40GRC01/hse-m40grc01.webp",
"description": "M.2 SSD外接硬盘盒，支持NVMe协议", "description": "M.2 SSD外接硬盘盒，支持NVMe协议",
"summary": "高速USB 3.1 M.2 NVMe SSD外接盒，轻巧便携，支持即插即用",
"summary": "支持的SSD尺寸为2230/2242/2260/2280，并与多种操作系统兼容。",
"series": [ "series": [
"M.2 SSD Enclosure" "M.2 SSD Enclosure"
], ],
"gallery": [ "gallery": [
"/images/products/hse-m40grc01-1.webp",
"/images/products/hse-m40grc01-2.webp",
"/images/products/hse-m40grc01-3.webp"
"/images/products/M.2 SSD Enclosure/HSE-M40GRC01/hse-m40grc01-1.webp"
], ],
"capacities": [
"N/A"
]
"capacities": []
}, },
{ {
"id": "HSE-M4IN1GRC01", "id": "HSE-M4IN1GRC01",
"title": "HSE-M4IN1GRC01", "title": "HSE-M4IN1GRC01",
"name": "HSE-M4IN1GRC01", "name": "HSE-M4IN1GRC01",
"usage": [],
"category": "",
"usage": [
"移动数据传输/备份"
],
"category": 6,
"image": "/images/products/M.2 SSD Enclosure/HSE-M4IN1GRC01/hse-m4in1grc01.webp",
"description": "", "description": "",
"summary": "",
"series": [],
"gallery": [],
"summary": "通过搭载“USB-C端口x1”、“USB-A端口x2”，可以将便携式HDD、U盘、鼠标、键盘通过一根USB Type-C to Type-C数据线与PC连接！",
"series": [
"M.2 SSD Enclosure"
],
"gallery": [
"/images/products/M.2 SSD Enclosure/HSE-M4IN1GRC01/hse-m4in1grc01-1.webp"
],
"capacities": [] "capacities": []
}, },
{ {
"id": "HSE-M6IN1GRC01", "id": "HSE-M6IN1GRC01",
"title": "HSE-M6IN1GRC01", "title": "HSE-M6IN1GRC01",
"name": "HSE-M6IN1GRC01", "name": "HSE-M6IN1GRC01",
"usage": [],
"category": "",
"usage": [
"移动数据传输/备份"
],
"category": 6,
"image": "/images/products/M.2 SSD Enclosure/HSE-M6IN1GRC01/hse-m6in1grc01.webp",
"description": "", "description": "",
"summary": "",
"series": [],
"gallery": [],
"summary": "M.2 SSD 盒支持M.2 NVMe M Key/B+M Key 和 M.2 SATA B+M Key SSD (基于SATA)，最大支持4TB的SSD容量",
"series": [
"M.2 SSD Enclosure"
],
"gallery": [
"/images/products/M.2 SSD Enclosure/HSE-M6IN1GRC01/hse-m6in1grc01-1.webp"
],
"capacities": [] "capacities": []
}, },
{ {
"移动数据传输/备份" "移动数据传输/备份"
], ],
"category": 5, "category": 5,
"image": "/images/products/pe-cr003.webp",
"description": "USB 3.0 多功能读卡器，支持SD/microSD/CF/XQD卡",
"summary": "高速USB 3.0读卡器，支持多种专业存储卡格式，专业摄影用户首选",
"image": "/images/products/Card Reader/PE-CR003/pe-cr003.webp",
"description": "",
"summary": "连接口采用USB-A和USB-C两种设计，搭载SD卡、microSD卡和USB2.0三个端口，支持多种媒体",
"series": [ "series": [
"Card Reader" "Card Reader"
], ],
"gallery": [ "gallery": [
"/images/products/pe-cr003-1.webp",
"/images/products/pe-cr003-2.webp",
"/images/products/pe-cr003-3.webp"
"/images/products/Card Reader/PE-CR003/pe-cr003-1.webp"
], ],
"capacities": [
"N/A"
]
"capacities": []
}, },
{ {
"id": "PE-CR405", "id": "PE-CR405",
"移动数据传输/备份" "移动数据传输/备份"
], ],
"category": 5, "category": 5,
"image": "/images/products/pe-cr405.webp",
"description": "USB 3.0 多功能读卡器，支持SD/microSD/CF卡",
"summary": "高速USB 3.0读卡器，支持多种存储卡格式，专业摄影用户首选",
"image": "/images/products/Card Reader/PE-CR405/pe-cr405.webp",
"description": "",
"summary": "可同时读写microSD、SD及CFexpress Type A/Type B三种存储卡，大幅提升工作效率",
"series": [ "series": [
"Card Reader" "Card Reader"
], ],
"gallery": [ "gallery": [
"/images/products/pe-cr405-1.webp",
"/images/products/pe-cr405-2.webp",
"/images/products/pe-cr405-3.webp"
"/images/products/Card Reader/PE-CR405/pe-cr405-1.webp"
], ],
"capacities": [
"N/A"
]
"capacities": []
}, },
{ {
"id": "Q60-1TST3", "id": "Q60-1TST3",
"category": 4, "category": 4,
"image": "/images/products/DDR/SD4-08GB-2666-1R8/sd4-08gb-2666-1r8.webp", "image": "/images/products/DDR/SD4-08GB-2666-1R8/sd4-08gb-2666-1r8.webp",
"description": "", "description": "",
"summary": "高性能DDR4笔记本内存，提供稳定可靠的系统性能提升",
"summary": "使用DDR4内存升级PC的RAM，可以缩短应用程序加载时间，并提高响应速度",
"series": [ "series": [
"DDR4-SODIMM" "DDR4-SODIMM"
], ],
], ],
"category": 4, "category": 4,
"image": "/images/products/DDR/SD4-08GB-3200-1R8/sd4-08gb-3200-1r8.webp", "image": "/images/products/DDR/SD4-08GB-3200-1R8/sd4-08gb-3200-1r8.webp",
"description": "DDR4 3200MHz 笔记本内存条，单面颗粒",
"summary": "高性能DDR4笔记本内存，提供稳定可靠的系统性能提升",
"description": "",
"summary": "使用DDR4内存升级PC的RAM，可以缩短应用程序加载时间，并提高响应速度",
"series": [ "series": [
"DDR4-SODIMM" "DDR4-SODIMM"
], ],
], ],
"category": 4, "category": 4,
"image": "/images/products/DDR/SD4-16GB-2666-2R8/sd4-16gb-2666-2r8.webp", "image": "/images/products/DDR/SD4-16GB-2666-2R8/sd4-16gb-2666-2r8.webp",
"description": "DDR4 2666MHz 笔记本内存条，双面颗粒",
"summary": "高性能DDR4笔记本内存，提供稳定可靠的系统性能提升",
"description": "",
"summary": "使用DDR4内存升级PC的RAM，可以缩短应用程序加载时间，并提高响应速度",
"series": [ "series": [
"DDR4-SODIMM" "DDR4-SODIMM"
], ],
"category": 4, "category": 4,
"image": "/images/products/DDR/SD4-16GB-3200-2R8/sd4-16gb-3200-2r8.webp", "image": "/images/products/DDR/SD4-16GB-3200-2R8/sd4-16gb-3200-2r8.webp",
"description": "DDR4 3200MHz 笔记本内存条，双面颗粒", "description": "DDR4 3200MHz 笔记本内存条，双面颗粒",
"summary": "高性能DDR4笔记本内存，提供稳定可靠的系统性能提升",
"summary": "使用DDR4内存升级PC的RAM，可以缩短应用程序加载时间，并提高响应速度",
"series": [ "series": [
"DDR4-SODIMM" "DDR4-SODIMM"
], ],
"category": 4, "category": 4,
"image": "/images/products/DDR/SD5-16GB-5600-1R8/sd5-16gb-5600-1r8.webp", "image": "/images/products/DDR/SD5-16GB-5600-1R8/sd5-16gb-5600-1r8.webp",
"description": "", "description": "",
"summary": "高性能DDR5笔记本内存，提供稳定可靠的系统性能提升",
"summary": "使用DDR4内存升级PC的RAM，可以缩短应用程序加载时间，并提高响应速度",
"series": [ "series": [
"DDR5-SODIMM" "DDR5-SODIMM"
], ],
"id": "UD4-08GB-2666-1R8", "id": "UD4-08GB-2666-1R8",
"title": "UD4-08GB-2666-1R8", "title": "UD4-08GB-2666-1R8",
"name": "UD4-08GB-2666-1R8", "name": "UD4-08GB-2666-1R8",
"usage": [],
"category": "",
"usage": [
"内存升级/性能提升"
],
"category": 4,
"image": "/images/products/DDR/UD4-08GB-2666-1R8/ud4-08gb-2666-1r8.webp",
"description": "", "description": "",
"summary": "",
"series": [],
"gallery": [],
"capacities": []
"summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升",
"series": [
"DDR4-UDIMM"
],
"gallery": [
"/images/products/DDR/UD4-08GB-2666-1R8/ud4-08gb-2666-1r8-1.webp"
],
"capacities": [
"8GB"
]
}, },
{ {
"id": "UD4-08GB-3200-1R8", "id": "UD4-08GB-3200-1R8",
"内存升级/性能提升" "内存升级/性能提升"
], ],
"category": 4, "category": 4,
"image": "/images/products/ud4-08gb-3200-1r8.webp",
"image": "/images/products/DDR/UD4-08GB-3200-1R8/ud4-08gb-3200-1r8.webp",
"description": "DDR4 3200MHz 台式机内存条，单面颗粒", "description": "DDR4 3200MHz 台式机内存条，单面颗粒",
"summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升", "summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升",
"series": [ "series": [
"DDR4-UDIMM" "DDR4-UDIMM"
], ],
"gallery": [ "gallery": [
"/images/products/ud4-08gb-3200-1r8-1.webp",
"/images/products/ud4-08gb-3200-1r8-2.webp",
"/images/products/ud4-08gb-3200-1r8-3.webp"
"/images/products/DDR/UD4-08GB-3200-1R8/ud4-08gb-3200-1r8-1.webp"
], ],
"capacities": [ "capacities": [
"8GB" "8GB"
"内存升级/性能提升" "内存升级/性能提升"
], ],
"category": 4, "category": 4,
"image": "/images/products/ud4-16gb-2666-2r8.webp",
"image": "/images/products/DDR/UD4-16GB-2666-2R8/ud4-16gb-2666-2r8.webp",
"description": "DDR4 2666MHz 台式机内存条，双面颗粒", "description": "DDR4 2666MHz 台式机内存条，双面颗粒",
"summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升", "summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升",
"series": [ "series": [
"DDR4-UDIMM" "DDR4-UDIMM"
], ],
"gallery": [ "gallery": [
"/images/products/ud4-16gb-2666-2r8-1.webp",
"/images/products/ud4-16gb-2666-2r8-2.webp",
"/images/products/ud4-16gb-2666-2r8-3.webp"
"/images/products/DDR/UUD4-16GB-2666-2R8/ud4-16gb-2666-2r8-1.webp"
], ],
"capacities": [ "capacities": [
"16GB" "16GB"
"内存升级/性能提升" "内存升级/性能提升"
], ],
"category": 4, "category": 4,
"image": "/images/products/ud4-16gb-3200-2r8.webp",
"image": "/images/products/DDR/UD4-16GB-3200-2R8/ud4-16gb-3200-2r8.webp",
"description": "DDR4 3200MHz 台式机内存条，双面颗粒", "description": "DDR4 3200MHz 台式机内存条，双面颗粒",
"summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升", "summary": "高性能DDR4台式机内存，提供稳定可靠的系统性能提升",
"series": [ "series": [
"DDR4-UDIMM" "DDR4-UDIMM"
], ],
"gallery": [ "gallery": [
"/images/products/ud4-16gb-3200-2r8-1.webp",
"/images/products/ud4-16gb-3200-2r8-2.webp",
"/images/products/ud4-16gb-3200-2r8-3.webp"
"/images/products/DDR/UD4-16GB-3200-2R8/ud4-16gb-3200-2r8-1.webp"
], ],
"capacities": [ "capacities": [
"16GB" "16GB"

Write Preview
Loading…
Cancel
Save