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

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

app/components/SupportTabs.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="page-tab">
+        <el-segmented
+            v-model="activeTab"
+            class="segmented"
+            :options="options"
+            block
+            size="large"
+            @change="handleSegmentedChange"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+})
+
+const activeTab = ref(props.modelValue || '')
+const options = [
+    { label: '服务支持', value: '' },
+    { label: '常见问题', value: 'faq' },
+    { label: '文档资料', value: 'documents' },
+    { label: '联系售后', value: 'contact-us' },
+]
+
+const handleSegmentedChange = (value: string) => {
+    const localePath = useLocalePath()
+    navigateTo(localePath(`/support/${value}`))
+}
+</script>
+
+<style scoped>
+.segmented {
+    --el-segmented-bg-color: transparent;
+    --el-segmented-item-active-color: var(--el-color-primary);
+    --el-segmented-item-color: var(--el-text-color-secondary);
+    --el-segmented-item-hover-color: var(--el-color-primary);
+    --el-segmented-item-border-color: transparent;
+    --el-segmented-item-active-border-color: transparent;
+    border-bottom: 1px solid var(--el-border-color-light);
+}
+
+.segmented :deep(.el-segmented__item-selected) {
+    /* --el-border-radius-base: 16px; */
+    transition: none;
+    background: transparent;
+}
+
+.segmented :deep(.el-segmented__item) {
+
+    &:hover {
+        background: transparent;
+        color: var(--el-color-primary);
+    }
+
+    &.is-selected {
+        color: var(--el-color-primary-dark-2);
+        border-bottom: 4px solid var(--el-color-primary-dark-2);
+    }
+}
+</style>