lizhuang
/
hanye-website
關註 1
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

feat(页面组件): 更新页脚和头部组件，优化产品分类展示 

- 在页脚组件中添加了企业和个人产品分类链接，并更新了版权信息的展示方式。
- 在头部组件中优化了导航菜单，增加了企业和个人用户产品组的展示，提升了用户体验。
- 更新了国际化配置，新增了相关的翻译字段，确保多语言支持的完整性。

这些修改旨在提升页面的可用性和信息的清晰度，方便用户快速找到所需的产品信息。
master
lizhuang 1 月之前
父節點
2c9f34095f
當前提交
10e62974e2
共有 16 個文件被更改，包括 370 次插入 和 84 次删除
分割檢視 顯示文件統計
  1. 52
    16
      components/TheFooter.vue
  2. 214
    42
      components/TheHeader.vue
  3. 0
    1
      content/en/privacy.md
  4. 1
    2
      content/en/support.md
  5. 7
    1
      content/en/terms.md
  6. 0
    1
      content/ja/privacy.md
  7. 0
    1
      content/ja/support.md
  8. 7
    1
      content/ja/terms.md
  9. 3
    1
      content/zh/privacy.md
  10. 1
    3
      content/zh/support.md
  11. 8
    1
      content/zh/terms.md
  12. 10
    1
      i18n/locales/en.ts
  13. 10
    1
      i18n/locales/ja.ts
  14. 10
    1
      i18n/locales/zh.ts
  15. 30
    8
      pages/products/[id].vue
  16. 17
    3
      pages/products/index.vue

+ 52
- 16
components/TheFooter.vue 查看文件

@@ -2,7 +2,7 @@
<footer
class="text-white py-8 w-full relative bg-stone-950 border-t border-zinc-800 overflow-hidden"
>
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10">
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10 mb-8">
<div
class="grid grid-cols-1 md:grid-cols-2 sm:grid-cols-1 lg:grid-cols-4 gap-8 lg:py-14"
>
@@ -14,20 +14,17 @@
<i class="icon-brand text-white text-2xl"></i>
</h3>
<LanguageSwitcher class="mb-8 hidden lg:block" />
<p class="text-white opacity-60 text-xs">
&copy; {{ new Date().getFullYear() }} Hanye. All rights reserved.
</p>
</div>

<!-- 产品分类链接 -->
<!-- 企业产品分类链接 -->
<div class="hidden lg:block">
<h3
class="justify-start text-zinc-300 text-xl font-normal leading-snug mb-4"
>
{{ t("common.footer.productsLinks.title") }}
{{ t("common.footer.productsLinks.business") }}
</h3>
<ul class="space-y-4">
<li v-for="item in menuProductsItems" :key="item.path">
<li v-for="item in menuBusinessProductsItems" :key="item.path">
<NuxtLink
:to="item.path"
class="text-zinc-500 text-sm font-normal hover:text-white transition"
@@ -37,15 +34,15 @@
</li>
</ul>
</div>
<!-- 网站快捷链接 -->
<!-- 个人产品分类链接 -->
<div class="hidden lg:block">
<h3
class="justify-start text-zinc-300 text-xl font-normal leading-snug mb-4"
>
{{ t("common.footer.websiteLinks.title") }}
{{ t("common.footer.productsLinks.personal") }}
</h3>
<ul class="space-y-4">
<li v-for="item in menuWebsiteItems" :key="item.path">
<li v-for="item in menuPersonalProductsItems" :key="item.path">
<NuxtLink
:to="item.path"
class="text-zinc-500 text-sm font-normal hover:text-white transition"
@@ -75,6 +72,18 @@
</div>
</div>
</div>
<div
class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10 text-center border-t border-white/10 py-4"
>
<p class="text-white opacity-40 text-xs mt-4">
&copy; {{ new Date().getFullYear() }} Hanye. All rights reserved.
</p>
<p class="text-[10px] text-white/20 mt-4">
{{ t("common.footer.trademark.statement1") }}
<br />
{{ t("common.footer.trademark.statement2") }}
</p>
</div>
<!-- 返回顶部按钮 -->
<BackToTop />
</footer>
@@ -119,6 +128,7 @@ const { data: categoryResponse } = await useAsyncData(
return {
title: item.title || "",
id: id,
audiences: item.meta?.audiences,
};
})
.sort((a, b) => (a.id || 0) - (b.id || 0));
@@ -134,16 +144,42 @@ const productCategories = computed(() => {
return categoryResponse.value || [];
});

// 导航菜单项
const menuProductsItems = computed(() => {
// 企业产品导航菜单项
const menuBusinessProductsItems = computed(() => {
// 构建路径前缀
const prefix = locale.value === defaultLocale ? "" : `/${locale.value}`;

// 使用修改后的产品分类数据
return productCategories.value
.filter((category: any) => category.audiences === 1)
.map((category: any) => {
const path = `${prefix}/products?category=${encodeURIComponent(
category.title
)}&audiences=${category.audiences}`;
return {
label: category.title,
path: path,
};
});
});

// 个人产品导航菜单项
const menuPersonalProductsItems = computed(() => {
// 构建路径前缀
const prefix = locale.value === defaultLocale ? "" : `/${locale.value}`;

// 使用修改后的产品分类数据
return productCategories.value.map((category: any) => ({
label: category.title,
path: `${prefix}/products?category=${encodeURIComponent(category.title)}`,
}));
return productCategories.value
.filter((category: any) => category.audiences === 0)
.map((category: any) => {
const path = `${prefix}/products?category=${encodeURIComponent(
category.title
)}&audiences=${category.audiences}`;
return {
label: category.title,
path: path,
};
});
});

const menuWebsiteItems = computed(() => [

+ 214
- 42
components/TheHeader.vue 查看文件

@@ -10,7 +10,9 @@
></i>
</nuxt-link>
<!-- Desktop Menu -->
<nav class="hidden md:flex justify-start items-start gap-1 lg:gap-7 xl:gap-14">
<nav
class="hidden md:flex justify-start items-start gap-1 lg:gap-7 xl:gap-14"
>
<template v-for="item in menuItems" :key="item.label">
<!-- Regular Link -->
<nuxt-link
@@ -50,31 +52,130 @@
<div
v-if="item.isDropdown && openDropdown === item.label"
@mouseenter="handleMouseEnter(item.label)"
class="absolute left-0 top-full mt-4 w-[300px] bg-slate-900 rounded-none border-none shadow-none p-0 z-10 gap-0 transition-all duration-300"
class="absolute left-[-15px] top-full mt-4 w-[550px] bg-slate-900/95 backdrop-blur-[50px] rounded-none border-none shadow-none p-0 z-10 gap-0 transition-all duration-300"
>
<div
v-for="(section, index) in item.children"
:key="index"
class="bg-slate-900 rounded-none p-6 flex flex-col gap-1"
class="rounded-none p-2 flex flex-col gap-1"
>
<!-- <h3 class="text-base font-medium text-white mb-2">
{{ t(section.title) }}
</h3> -->
<ul class="flex flex-col gap-1">
<li v-for="link in section.items" :key="link.path">
<nuxt-link
:to="link.path"
@click="handleMouseLeave"
class="block text-base text-gray-200 rounded-none py-2 transition-all duration-200 hover:text-white/80 hover:font-bold"
:class="{
'text-white font-bold bg-white/15':
route.path === link.path,
}"
>
{{ t(link.label) }}
</nuxt-link>
</li>
</ul>
<div class="grid grid-cols-2 gap-8 p-2">
<!-- 企业用户产品组 -->
<div class="relative group/card">
<div class="relative space-y-4">
<div
class="px-6 py-4 text-sm font-semibold text-gray-200 bg-gradient-to-br from-slate-800/90 to-slate-900/90 rounded-xl border border-slate-700/30 shadow-2xl backdrop-blur-sm group-hover/card:shadow-blue-500/10 transition-all duration-500"
>
<div class="flex items-center gap-4">
<div
class="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-indigo-500/20 group-hover/card:from-blue-500/30 group-hover/card:to-indigo-500/30 transition-all duration-500"
>
<i
class="icon-building text-2xl text-blue-400"
></i>
</div>
<div>
<span
class="block text-lg font-medium tracking-wide text-white"
>{{ t("common.business") }}</span
>
<span
class="text-xs text-gray-400 mt-0.5 block"
>{{ t("common.businessDesc") }}</span
>
</div>
</div>
</div>
<ul class="space-y-2">
<li
v-for="link in getGroupedItems(section.items)
.enterprise"
:key="link.path"
class="group/item"
>
<nuxt-link
:to="link.path"
@click="handleMouseLeave"
class="block text-base text-gray-200 rounded-lg py-2.5 px-4 transition-all duration-200 hover:text-white hover:bg-white/5 relative"
:class="{
'text-white font-medium bg-white/10':
route.path === link.path,
}"
>
<span
class="relative flex items-center gap-3"
>
<span
class="w-1.5 h-1.5 rounded-full bg-white/30 group-hover/item:bg-white/60 transition-colors duration-200"
></span>
<span class="text-base">{{
t(link.label)
}}</span>
</span>
</nuxt-link>
</li>
</ul>
</div>
</div>

<!-- 个人用户产品组 -->
<div class="relative group/card">
<div class="relative space-y-4">
<div
class="px-6 py-4 text-sm font-semibold text-gray-200 bg-gradient-to-br from-slate-800/90 to-slate-900/90 rounded-xl border border-slate-700/30 shadow-2xl backdrop-blur-sm group-hover/card:shadow-cyan-500/10 transition-all duration-500"
>
<div class="flex items-center gap-4">
<div
class="p-2 rounded-lg bg-gradient-to-br from-cyan-500/20 to-blue-500/20 group-hover/card:from-cyan-500/30 group-hover/card:to-blue-500/30 transition-all duration-500"
>
<i
class="icon-user text-2xl text-cyan-400"
></i>
</div>
<div>
<span
class="block text-lg font-medium tracking-wide text-white"
>{{ t("common.personal") }}</span
>
<span
class="text-xs text-gray-400 mt-0.5 block"
>{{ t("common.personalDesc") }}</span
>
</div>
</div>
</div>
<ul class="space-y-2">
<li
v-for="link in getGroupedItems(section.items)
.personal"
:key="link.path"
class="group/item"
>
<nuxt-link
:to="link.path"
@click="handleMouseLeave"
class="block text-base text-gray-200 rounded-lg py-2.5 px-4 transition-all duration-200 hover:text-white hover:bg-white/5 relative"
:class="{
'text-white font-medium bg-white/10 is-active':
route.path === link.path,
}"
>
<span
class="relative flex items-center gap-3"
>
<span
class="w-1.5 h-1.5 rounded-full bg-white/30 group-hover/item:bg-white/60 transition-colors duration-200"
></span>
<span class="text-base">{{
t(link.label)
}}</span>
</span>
</nuxt-link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</transition>
@@ -189,8 +290,6 @@
:key="section.title"
class="mt-1"
>
<!-- Optional: Section title for mobile? -->
<!-- <h4 class="px-3 pt-1 text-xs font-medium text-gray-500">{{ t(section.title) }}</h4> -->
<nuxt-link
v-for="link in section.items"
:key="link.path"
@@ -394,18 +493,12 @@ const { data: categoryResponse } = await useAsyncData(
// 转换为需要的格式
return content
.map((item: any) => {
// 从路径中提取ID - 文件名就是ID
const pathParts = item.path?.split("/");
const idFile = pathParts?.[pathParts.length - 1] || "";
// 如果ID在元数据中有提供，优先使用元数据中的ID
const id = item.id
? parseInt(item.id)
: parseInt(idFile.replace(".md", "")) || 0;

console.log(item);
return {
label: item.title || "",
path: `/products?category=${encodeURIComponent(item.title)}`,
id: id,
path: `/products?category=${encodeURIComponent(item.title)}&audiences=${item.meta.audiences}`,
id: item.meta.id,
audiences: item.meta.audiences,
};
})
.sort((a, b) => (a.id || 0) - (b.id || 0));
@@ -492,13 +585,6 @@ const menuItems = computed(() => {
path: `${prefix}${category.path}`,
})),
},
// {
// title: "common.byUsage",
// items: productUsages.value.map((usage: any) => ({
// ...usage,
// path: `${prefix}${usage.path}`,
// })),
// },
],
},
{ label: "common.faq", path: `${prefix}/faq` },
@@ -584,14 +670,25 @@ const handleSearch = debounce(async () => {
await searchProducts(searchQuery.value);
}, 300);


/**
* 清空搜索
*/
const clearSearch = () => {
searchQuery.value = '';
searchQuery.value = "";
searchResults.value = [];
};

/**
* 将产品按照用户类型分组
* @param items 产品列表
* @returns 分组后的产品对象
*/
function getGroupedItems(items: any[]) {
return {
personal: items.filter((item) => item.audiences === 0),
enterprise: items.filter((item) => item.audiences === 1),
};
}
</script>

<style lang="scss" scoped>
@@ -707,4 +804,79 @@ header {
}
}
}

/* 菜单项激活状态样式 */
.is-active {
position: relative;

&::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 16px;
background: #fff;
border-radius: 0 1px 1px 0;
}
}

/* 菜单组标题样式 */
.group-title {
position: relative;
overflow: hidden;

&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
}
}

/* 添加图标样式 */
.icon-user,
.icon-building {
font-size: 20px;
opacity: 0.8;
transition: opacity 0.2s ease;
}

/* 优化过渡动画 */
.transition-all {
transition-property: all;
transition-timing-function: ease;
}

/* 添加阴影效果 */
.shadow-2xl {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 添加玻璃态效果 */
.backdrop-blur-sm {
backdrop-filter: blur(8px);
}

/* 移除复杂的动画效果 */
.bg-gradient-to-br {
background-size: 100% 100%;
}

/* 移除波纹效果 */
.group\/item:hover {
&::before {
display: none;
}
}
</style>

+ 0
- 1
content/en/privacy.md 查看文件

@@ -95,4 +95,3 @@ If you have any questions, comments, or suggestions about this Privacy Policy, o
We will process your request as soon as possible.

---
*"Note: The registered trademark 'Hanyetech' is for use in mainland China only. The registered trademark 'Hanye' is for use in regions outside mainland China."*

+ 1
- 2
content/en/support.md 查看文件

@@ -68,5 +68,4 @@ Emails or messages received outside of service hours will be processed as soon a
* **Email:** [hanye@hanye.cn]
* **Phone:** **86-024-8399-0696**

---
*"Note: The registered trademark 'Hanyetech' is for use in mainland China only. The registered trademark 'Hanye' is for use in regions outside mainland China."*
---

+ 7
- 1
content/en/terms.md 查看文件

@@ -104,4 +104,10 @@ If you have any questions about these Terms of Use, please contact us via:
* **Service Hours:** Weekdays `**9:00** - **18:00** (Closed on weekends and public holidays)

---
*"Note: The registered trademark 'Hanyetech' is for use in mainland China only. The registered trademark 'Hanye' is for use in regions outside mainland China."*

**Trademark Statement**
* “Hanyetech” is a registered trademark exclusively owned and used by our company in Mainland China.
* “Hanye” is a registered trademark exclusively owned and used by our company outside Mainland China.
* hese trademarks are protected by applicable laws and international treaties. Unauthorized use, reproduction, or imitation in any unauthorized region is strictly prohibited. We reserve the right to pursue legal action against any infringement.

---

+ 0
- 1
content/ja/privacy.md 查看文件

@@ -95,4 +95,3 @@ title: プライバシーポリシー
お受けしたお問い合わせは、できるだけ早く処理いたします。

---
*「ご注意：登録商標「Hanyetech」は中国大陸地域でのみご使用いただけます。登録商標「Hanye」は中国大陸以外の地域でご使用いただけます。」*

+ 0
- 1
content/ja/support.md 查看文件

@@ -69,4 +69,3 @@ Hanyeのカスタマーサポートは、以下の方法でご利用いただけ
* **電話番号：** **86-024-8399-0696**

---
*「ご注意：登録商標「Hanyetech」は中国大陸地域でのみご使用いただけます。登録商標「Hanye」は中国大陸以外の地域でご使用いただけます。」*

+ 7
- 1
content/ja/terms.md 查看文件

@@ -104,4 +104,10 @@ Hanyeは、いつでも本利用規約を更新または変更することがあ
* **受付時間：** 平日 **9:00** - **18:00** （週末および法定祝祭日を除く）

---
*「ご注意：登録商標「Hanyetech」は中国大陸地域でのみご使用いただけます。登録商標「Hanye」は中国大陸以外の地域でご使用いただけます。」*

**商標に関する声明**
* 「Hanyetech（ハニーテック）」は、当社が中華人民共和国本土（中国大陸）で専有的に登録・使用する商標です。
* 「Hanye（ハニエ）」は、当社が中国本土以外の地域で専有的に登録・使用する商標です。
* これらの商標は、関連する法律および国際条約により保護されています。許可されていない地域での無断使用・複製・模倣は禁止されており、当社は必要に応じて法的措置を講じる権利を有します。

---

+ 3
- 1
content/zh/privacy.md 查看文件

@@ -96,4 +96,6 @@ title: 隐私政策
我们将尽快处理您的请求。

---
*（提示：Hanyetech注册品牌限大陆地区使用，Hanye注册品牌为大陆以外地区使用）*




+ 1
- 3
content/zh/support.md 查看文件

@@ -68,6 +68,4 @@ title: 技术支持
* **电子邮箱：** [hanye@hanye.cn]
* **联系电话：** **86-024-8399-0696**

---

*（提示：Hanyetech注册品牌限大陆地区使用，Hanye注册品牌为大陆以外地区使用）*
---

+ 8
- 1
content/zh/terms.md 查看文件

@@ -104,4 +104,11 @@ Hanye 可能随时更新或修改本使用条款。任何变更将在本页面
* **服务时间：** 工作日 **9:00** - **18:00** （周末及法定节假日休息）

---
*（提示：Hanyetech注册品牌限大陆地区使用，Hanye注册品牌为大陆以外地区使用）*

**商标声明**

* “Hanyetech” 为本公司在中华人民共和国大陆地区注册并专属使用的商标；
* “Hanye” 为本公司在中国大陆以外地区注册并专属使用的商标。<br>
* 上述商标受相关法律法规及国际条约保护，未经本公司书面授权，禁止在任何未经授权的地区使用、复制或仿冒，本公司保留依法追究法律责任的权利。

---

+ 10
- 1
i18n/locales/en.ts 查看文件

@@ -56,7 +56,8 @@ export default {
},
footer: {
productsLinks: {
title: "Products",
business: "Business",
personal: "Personal",
},
websiteLinks: {
title: "Website",
@@ -72,8 +73,16 @@ export default {
privacy: "Privacy Policy",
terms: "Terms of Use",
},
trademark: {
statement1: "Trademark Statement: “Hanyetech” is a registered trademark exclusively owned and used by our company in Mainland China. “Hanye” is a registered trademark exclusively owned and used by our company outside Mainland China.",
statement2: "These trademarks are protected by applicable laws and international treaties. Unauthorized use, reproduction, or imitation in any unauthorized region is strictly prohibited. We reserve the right to pursue legal action against any infringement.",
},
},
all: "All",
personal: "Personal",
business: "Business",
personalDesc: "Personal product",
businessDesc: "Business product",
},
home: {
title: "Hanye Website",

+ 10
- 1
i18n/locales/ja.ts 查看文件

@@ -50,7 +50,8 @@ export default {
},
footer: {
productsLinks: {
title: "製品",
business: "Business",
personal: "Personal",
},
websiteLinks: {
title: "ウェブサイト",
@@ -66,8 +67,16 @@ export default {
privacy: "プライバシーポリシー",
terms: "利用規約",
},
trademark: {
statement1: "商標に関する声明：「Hanyetech（ハニーテック）」は、当社が中華人民共和国本土（中国大陸）で専有的に登録・使用する商標です。「Hanye（ハニエ）」は、当社が中国本土以外の地域で専有的に登録・使用する商標です。",
statement2: "これらの商標は、関連する法律および国際条約により保護されています。許可されていない地域での無断使用・複製・模倣は禁止されており、当社は必要に応じて法的措置を講じる権利を有します。",
}
},
all: "全部",
personal: "Personal",
business: "Business",
personalDesc: "個人用製品情報",
businessDesc: "企業用製品情報",
},
home: {
title: "Hanye ウェブサイトへようこそ",

+ 10
- 1
i18n/locales/zh.ts 查看文件

@@ -17,7 +17,8 @@ export default {
backToTop: "返回顶部",
footer: {
productsLinks: {
title: "产品",
personal: "个人产品",
business: "企业产品",
},
websiteLinks: {
title: "网站",
@@ -33,6 +34,10 @@ export default {
privacy: "隐私政策",
terms: "使用条款",
},
trademark: {
statement1: "商标声明：“Hanyetech” 为本公司在中华人民共和国大陆地区注册并专属使用的商标；“Hanye” 为本公司在中国大陆以外地区注册并专属使用的商标。",
statement2: "上述商标受相关法律法规及国际条约保护，未经本公司书面授权，禁止在任何未经授权的地区使用、复制或仿冒，本公司保留依法追究法律责任的权利。",
},
},
breadcrumb: {
home: "首页",
@@ -68,6 +73,10 @@ export default {
},
},
all: "全部",
personal: "个人用户产品",
business: "企业用户产品",
personalDesc: "个人存储产品信息",
businessDesc: "企业存储和内存产品信息",
},
home: {
title: "Hanye 官网",

+ 30
- 8
pages/products/[id].vue 查看文件

@@ -20,16 +20,21 @@
>
<span class="text-white/60 text-base font-normal px-2"> / </span>
<nuxt-link
:to="`${homepagePath}/products`"
v-if="product?.category"
:to="`${homepagePath}/products?audiences=${product.meta?.audiences}`"
class="text-white/60 text-base font-normal"
>{{ t("common.breadcrumb.products") }}</nuxt-link
>{{
product.meta?.audiences === 0
? t("common.personal")
: t("common.business")
}}</nuxt-link
>
<span class="text-white/60 text-base font-normal px-2"> / </span>
<nuxt-link
v-if="product?.category"
:to="`${homepagePath}/products?category=${encodeURIComponent(
product.category
)}`"
)}&audiences=${product.meta?.audiences}`"
class="text-white/60 text-base font-normal"
>{{ product.category }}</nuxt-link
>
@@ -297,9 +302,9 @@
}}</span>
<span class="text-white font-medium"
>{{ product.category
}}<template v-if="product.tag"> / {{
product.tag
}}</template></span
}}<template v-if="product.tag">
/ {{ product.tag }}</template
></span
>
</div>
<div
@@ -352,7 +357,11 @@
</div>
</div>

<div class="bg-zinc-900 rounded-lg p-6">
<!-- 个人用户产品描述 -->
<div
v-if="product.meta?.audiences === 0"
class="bg-zinc-900 rounded-lg p-6"
>
<div
class="text-[#71717A] leading-relaxed space-y-4 prose prose-invert max-w-none"
>
@@ -403,6 +412,17 @@
</div>
</div>
</div>
<!-- 企业用户产品描述 -->
<div
v-if="product.meta?.audiences === 1"
class="bg-zinc-900 rounded-lg p-6 mt-6"
>
<div
class="text-[#71717A] leading-relaxed space-y-4 prose prose-invert max-w-none"
>
<ContentRenderer :value="product.content" />
</div>
</div>
</div>
</div>
</div>
@@ -475,6 +495,7 @@ interface Product {
title?: string;
image?: string;
summary?: string;
audiences: number;
};
title?: string;
}
@@ -529,7 +550,7 @@ const { data: categoryContent } = await useAsyncData(
/**
* 使用计算属性解析产品数据
*/
const product = computed<Product | null>(() => {
const product = computed<Product | any>(() => {
if (!productContent.value) return null;

// 提取产品数据
@@ -557,6 +578,7 @@ const product = computed<Product | null>(() => {
title: String(productContent.value.title || ""),
image: String(meta.image || ""),
summary: String(meta.summary || ""),
audiences: categoryContent.value?.meta?.audiences || 0,
},
};
});

+ 17
- 3
pages/products/index.vue 查看文件

@@ -522,6 +522,7 @@ interface Category {
capacities: string[];
sort: number;
tags: string[];
audiences: number;
}

// 分页配置
@@ -617,6 +618,7 @@ const { data: categoryData } = await useAsyncData("categories", async () => {
capacities: meta.capacities || [],
sort: meta.sort || 0,
tags: meta.tags || [],
audiences: meta.audiences,
};
})
.sort((a, b) => a.sort - b.sort);
@@ -662,9 +664,16 @@ const uniqueUsages = computed(() => {
});

// 使用计算属性优化类别列表
const categoryTitles = computed(() =>
allCategories.value.map((c: Category) => c.title)
);
const categoryTitles = computed(() => {
if (route.query.audiences) {
return allCategories.value
.filter(
(c: Category) => c.audiences === parseInt(route.query.audiences as string)
)
.map((c: Category) => c.title);
}
return allCategories.value.map((c: Category) => c.title);
});

// 使用计算属性优化系列分组
const productsBySeries = computed(() => {
@@ -749,6 +758,10 @@ function handleCategoryFilter(category: string) {
currentPage.value = 1; // 重置页码
filteredProducts.value = paginatedProducts.value;

const categoryObj = allCategories.value.find(
(c: Category) => c.title === category
);

// 更新路由，移除tag参数
router.push({
query: {
@@ -756,6 +769,7 @@ function handleCategoryFilter(category: string) {
category: category,
tag: undefined, // 清除tag参数
page: currentPage.value > 1 ? currentPage.value.toString() : undefined,
audiences: categoryObj?.audiences,
},
});
}

Write Preview
Loading…
取消
儲存