Feature: 解决方案列表 & 网页字体

2025-08-22 10:58:04 +08:00
parent e9b6409144
commit 3d858e475e
20 changed files with 233 additions and 35 deletions
--- a/app/assets/css/fonts.css
+++ b/app/assets/css/fonts.css
@ -0,0 +1,26 @@
+@font-face {
+    font-family: "Source Han Sans CN";
+    src: url("/fonts/source-han-sans/SourceHanSansCN-Regular-Alphabetic.woff2") format("woff2"),
+         url("/fonts/source-han-sans/SourceHanSansCN-Regular-Alphabetic.woff") format("woff");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Source Han Sans CN";
+    src: url("/fonts/source-han-sans/SourceHanSansCN-Bold-Alphabetic.woff2") format("woff2"),
+         url("/fonts/source-han-sans/SourceHanSansCN-Bold-Alphabetic.woff") format("woff");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Source Han Sans CN";
+    src: url("/fonts/source-han-sans/SourceHanSansCN-Light-Alphabetic.woff2") format("woff2"),
+         url("/fonts/source-han-sans/SourceHanSansCN-Light-Alphabetic.woff") format("woff");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
--- a/app/assets/scss/index.scss
+++ b/app/assets/scss/index.scss
@ -3,6 +3,7 @@ body,
 #app {
  margin: 0;
  padding: 0;
+  font-family: var(--font-main);
 }

 html.dark {
@ -14,3 +15,7 @@ a {
  font-weight: 400;
  color: var(--el-color-primary);
 }
+
+:root {
+  --font-main: "Source Han Sans CN", "Noto Sans CJK SC", "Noto Sans CJK", sans-serif;
+}
--- a/app/components/JinshenHeader.vue
+++ b/app/components/JinshenHeader.vue
@ -8,7 +8,9 @@


        <!-- 导航菜单 -->
-        <el-menu :default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false" :persistent="false" router>
+        <el-menu
+:default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false"
+            :persistent="false" router>
            <el-menu-item index="productions" :route="$localePath('/productions')">
                <span class="title">{{ $t('navigation.productions') }}</span>
            </el-menu-item>
@ -52,7 +54,7 @@ const { setLocale } = useI18n();

 const searchQuery = ref('')

-const activeName = ref('')
+const activeName = ref<string | undefined>(undefined)

 const handleSearch = () => {
    if (searchQuery.value.trim()) {
@ -63,7 +65,7 @@ const handleSearch = () => {
    }
 }

-onMounted(() => {
+const refreshMenu = () => {
    const path = router.currentRoute.value.path;
    if (path.startsWith('/productions')) {
        activeName.value = 'productions';
@ -74,9 +76,16 @@ onMounted(() => {
    } else if (path.startsWith('/about')) {
        activeName.value = 'about';
    } else {
-        activeName.value = '';
+        activeName.value = undefined; // 默认不激活任何菜单项
    }
-    console.log('Current path:', path, 'Active menu:', activeName.value);
+}
+
+onMounted(() => {
+    refreshMenu();
+    // 监听路由变化以更新激活状态
+    router.afterEach(() => {
+        refreshMenu();
+    });
 })
 </script>

@ -85,14 +94,16 @@ onMounted(() => {
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
+    height: 80px;
    align-items: center;
-    /* border-bottom: 1px solid #e0e0e0; */
+    border-bottom: 1px solid #e0e0e0;
 }

 .logo-section {
    display: flex;
    flex: 1;
    align-items: center;
+    margin-left: 20px;
 }

 .logo-link {
@ -102,7 +113,7 @@ onMounted(() => {
 }

 .website-logo {
-    height: 80px;
+    height: 64px;
    width: auto;
 }

@ -110,6 +121,7 @@ onMounted(() => {
    margin-right: 40px;
    border-bottom: none !important;
    width: auto;
+    --el-menu-horizontal-height: 100%;
 }

 .header-menu .el-menu-item {
--- a/app/pages/about/contact-us.vue
+++ b/app/pages/about/contact-us.vue
@ -2,11 +2,15 @@
    <div class="page-container">
        <div v-if="content">
            <el-breadcrumb class="breadcrumb" separator="/">
-                <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
-                    {{ $t('navigation.home') }}
+                <el-breadcrumb-item class="text-md opacity-50">
+                    <NuxtLink :to="$localePath('/')">
+                        {{ $t('navigation.home') }}
+                    </NuxtLink>
                </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-sm opacity-50">
-                    {{ $t('navigation.contact-info') }}
+                <el-breadcrumb-item class="text-md opacity-50">
+                    <NuxtLink :to="$localePath('/about')">
+                        {{ $t('navigation.contact-info') }}
+                    </NuxtLink>
                </el-breadcrumb-item>
            </el-breadcrumb>

--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@ -2,11 +2,15 @@
    <div class="page-container">
        <div v-if="content">
            <el-breadcrumb class="breadcrumb" separator="/">
-                <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
-                    {{ $t('navigation.home') }}
+                <el-breadcrumb-item class="text-md opacity-50">
+                    <NuxtLink :to="$localePath('/')">
+                        {{ $t('navigation.home') }}
+                    </NuxtLink>
                </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-sm opacity-50">
-                    {{ $t('navigation.about-us') }}
+                <el-breadcrumb-item class="text-md opacity-50">
+                    <NuxtLink :to="$localePath('/about')">
+                        {{ $t('navigation.about-us') }}
+                    </NuxtLink>
                </el-breadcrumb-item>
            </el-breadcrumb>

--- a/app/pages/productions/[...slug].vue
+++ b/app/pages/productions/[...slug].vue
@ -3,11 +3,13 @@
    <div v-if="production">
      <!-- 面包屑导航 -->
      <el-breadcrumb class="breadcrumb" separator="/">
-        <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">{{ $t('navigation.home')
-          }}</el-breadcrumb-item>
-        <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/productions') }">{{ $t('navigation.productions')
-          }}</el-breadcrumb-item>
-        <el-breadcrumb-item class="text-sm opactiy-50">{{ production.title }}</el-breadcrumb-item>
+        <el-breadcrumb-item class="text-md opacity-50">
+          <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item class="text-md opacity-50">
+          <NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item class="text-md opactiy-50">{{ production.title }}</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 产品详情内容 -->
@ -87,7 +89,7 @@ onMounted(async () => {
        production_image: {
          populate: '*',
        },
-      }, 
+      },
      locale: strapiLocale,
    })
    if (response.data) {
--- a/app/pages/solutions/index.vue
+++ b/app/pages/solutions/index.vue
@ -1,7 +1,7 @@
 <template>
    <div class="page-container">
        <div class="page-header">
-            <h1 class="page-title">{{ $t('get-our-solutions') }}</h1>
+            <h1 class="page-title">{{ $t('learn-our-solutions') }}</h1>
            <el-breadcrumb class="breadcrumb">
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
@ -11,9 +11,87 @@
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
+        <div class="solutions-container">
+            <el-tabs v-model="activeName" class="solutions-tabs">
+                <el-tab-pane :label="$t('all')" name="all">
+                    <div class="solution-list">
+                        <production-card
+v-for="solution in solutions" :key="solution.documentId || solution.id"
+                            :slug="solution.documentId"
+                            :image-url="useStrapiMedia(solution?.cover?.url || '')"
+                            :name="solution.title" :description="solution.summary || ''" />
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane
+v-for="(group, type) in groupedSolutions" :key="type" :label="type || '未分类'"
+                    :name="type || 'no-category'">
+                    <div class="solution-list">
+                        <production-card
+v-for="solution in group" :key="solution.documentId || solution.id"
+                            :slug="solution.documentId"
+                            :image-url="useStrapiMedia(solution?.cover?.url || '')"
+                            :name="solution.title" :description="solution.summary || ''" />
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
    </div>
 </template>

+<script setup lang="ts">
+const { find } = useStrapi()
+const { getStrapiLocale } = useLocalizations()
+
+const strapiLocale = getStrapiLocale()
+
+const activeName = ref<string>('all')
+
+const solutions = ref<Solution[]>([])
+
+// 按类型分组
+const groupedSolutions = computed(() => {
+    const gourps: Record<string, Solution[]> = {}
+    for (const sol of solutions.value) {
+        let typeKey = ''
+        if (typeof sol.solution_type === 'string') {
+            typeKey = sol.solution_type
+        } else if (sol.solution_type && typeof sol.solution_type === 'object' && 'type' in sol.solution_type) {
+            typeKey = sol.solution_type.type || ''
+        }
+        if (!gourps[typeKey]) gourps[typeKey] = []
+        gourps[typeKey]?.push(sol)
+    }
+    return gourps
+})
+
+
+
+onMounted(async () => {
+    try {
+        const response = await find<Solution>('solutions', {
+            populate: {
+                cover: {
+                    populate: '*',
+                },
+                solution_type: {
+                    populate: '*',
+                },
+            },
+            locale: strapiLocale,
+        })
+        solutions.value = response.data.map((item: Solution) => ({
+            ...item,
+            solution_type: item.solution_type,
+        }))
+        console.log('Fetched Solutions:', solutions.value)
+        console.log('Grouped Solutions:', groupedSolutions.value)
+    } catch (error) {
+        console.error('Failed to fetch solutions:', error)
+    }
+})
+
+</script>
+
 <style scoped>
 .page-container {
    padding: 2rem 1rem;
@ -32,4 +110,10 @@
 .breadcrumb {
    margin-left: auto;
 }
+
+.solution-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+}
 </style>
--- a/app/types/strapi/index.ts
+++ b/app/types/strapi/index.ts
@ -1,3 +1,4 @@
 export * from './common';
 export * from './production';
-export * from './singleTypes';
+export * from './singleTypes';
+export * from './solution';
--- a/app/types/strapi/solution.ts
+++ b/app/types/strapi/solution.ts
@ -0,0 +1,13 @@
+import type { StrapiEntity, StrapiImage } from './common';
+
+export interface SolutionType extends StrapiEntity {
+    type: string;
+}
+
+export interface Solution extends StrapiEntity {
+    title: string;
+    summary: string;
+    cover: StrapiImage;
+    solution_type: SolutionType;
+    content: string;
+}