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

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>