feat: 完成网站前端的基本建设

- 网站内容展示：首页， 产品页， 解决方案， 联系信息等
- 网站跳转逻辑：通过Vue-Router实现路由跳转
- 后端通信： 通过Nuxt Strapi与后端Strapi服务进行通信

app/pages/solutions/index.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="page-container">
+        <div class="page-header">
+            <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>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="text-md opacity-50">
+                    <NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
+                </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">
+                        <solution-card
+v-for="solution in solutions" :key="solution.documentId" :title="solution.title"
+                            :summary="solution.summary || ''" :cover-url="useStrapiMedia(solution?.cover?.url || '')"
+                            :document-id="solution.documentId" />
+                    </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">
+                        <solution-card 
+                            v-for="solution in group" 
+                            :key="solution.documentId"
+                            :document-id="solution.documentId" 
+                            :cover-url="useStrapiMedia(solution?.cover?.url || '')"
+                            :title="solution.title" 
+                            :summary="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;
+}
+
+.page-header {
+    display: flex;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    color: var(--el-color-primary);
+}
+
+.breadcrumb {
+    margin-left: auto;
+}
+
+.solution-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 1rem;
+    margin-bottom: 2rem;
+    gap: 40px;
+}
+</style>