fix: 修正面包屑导航的显示逻辑

- 竖屏下不显示面包屑导航

.dockerignore

@@ -0,0 +1,58 @@
+# ------------------------
+# Node / Package Manager
+# ------------------------
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+.pnpm-store
+
+# Nuxt build outputs
+.output
+.nuxt
+dist
+.cache
+.unimport
+.h3
+.nitro
+**/.nitro
+
+# Dev tools / OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+logs
+!.gitkeep
+
+# Local env files (runtime env should be provided by Docker/K8s)
+.env
+.env.*
+!.env.example
+
+# Git
+.git
+.gitignore
+.gitattributes
+
+# Editor / IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# Tests
+coverage
+*.lcov
+
+# Docker
+Dockerfile*
+docker-compose.yml
+
+# CI / Local build artifacts
+*.tgz
+*.zip
+*.tar
+*.mdx

.gitea/ISSUE_TEMPLATE/BUG_REPORT.yaml

@@ -0,0 +1,61 @@
+name: Bug报告
+about: 用于报告项目中的Bug，帮助我们改进项目
+title: "[BUG] " # 新开 Issue 时默认加的前缀
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        请在下方填写Bug的详细信息，包括重现步骤、预期结果和实际结果等。
+  - type: textarea
+    id: summary
+    attributes:
+      label: "问题概述/Summary"
+      description: "简要描述遇到的问题"
+      placeholder: "输入问题概述"
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: "重现步骤/Steps to Reproduce"
+      description: "列出重现该问题的具体步骤"
+      placeholder: "输入重现步骤"
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: "预期结果/Expected Behavior"
+      description: "描述你期望看到的结果"
+      placeholder: "输入预期结果"
+    validations:
+      required: true
+  - type: textarea
+    id: actual
+    attributes:
+      label: "实际结果/Actual Behavior"
+      description: "描述实际发生的情况"
+      placeholder: "输入实际结果"
+    validations:
+      required: true
+  - type: textarea
+    id: environment
+    attributes:
+      label: "环境信息/Environment"
+      description: "提供相关环境信息，如操作系统、浏览器版本等"
+      placeholder: "输入环境信息"
+    validations:
+      required: false
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: "检查表/Checklist"
+      description: "提交前，请确认以下事项"
+      options:
+        - label: 已搜索过类似问题，确保不是重复报告
+          required: true
+        - label: 提供了足够的信息以帮助我们理解和重现问题
+          required: true
+        - label: 如果可能，已附上相关截图或日志文件
+          required: false

.gitea/ISSUE_TEMPLATE/FEATURE_REQUEST.yaml

@@ -0,0 +1,53 @@
+name: 功能请求
+about: 用于提出新功能或改进建议
+title: "[FEATURE] "  # 新开 Issue 时默认加的前缀
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        请在下方填写功能请求的详细信息，包括需求背景、预期效果和相关上下文。
+  - type: textarea
+    id: summary
+    attributes:
+      label: "功能概述/Summary"
+      description: "简要描述你希望添加的功能"
+      placeholder: "输入功能概述"
+    validations:
+      required: true
+  - type: textarea
+    id: motivation
+    attributes:
+      label: "需求背景/Motivation"
+      description: "说明为什么需要这个功能，它将如何帮助用户或改进现有流程"
+      placeholder: "输入需求背景"
+    validations:
+      required: true
+  - type: textarea
+    id: proposal
+    attributes:
+      label: "解决方案/Proposal"
+      description: "描述你对该功能的设想或建议的实现方式"
+      placeholder: "输入解决方案"
+    validations:
+      required: false
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: "替代方案/Alternatives"
+      description: "如果有其他可行的替代方案，请在此列出"
+      placeholder: "输入替代方案"
+    validations:
+      required: false
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: "检查表/Checklist"
+      description: "提交前，请确认以下事项"
+      options:
+        - label: 已搜索过类似功能请求，确保不是重复提交
+          required: true
+        - label: 提供了足够的信息以帮助我们理解和评估该请求
+          required: true
+        - label: 如果可能，已附上相关截图或示意图
+          required: false

.gitea/PULL_REQUEST_TEMPLATE.yaml

@@ -0,0 +1,63 @@
+name: "Standard PR 模板"
+about: "用于提交新功能/修复bug/改进重构等合并请求"  
+title: "[PR] "  # 新开 PR 时默认加的前缀  
+ref: "master"     # 默认目标分支，可根据你们主分支改为 master/develop 等
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        请在下方填写合并请求描述，包括变更目的、主要内容及相关上下文。
+  - type: textarea
+    attributes:
+      label: "关联Issue"
+      description: "比如: Fixes #123/Closes #456/如果没有可以留空"
+      placeholder: "输入关联 issue 编号"
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: "更改内容/What Changed"
+      description: "列出本次 PR 的主要变更项，便于 Review"
+      placeholder: "输入更改内容"
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "测试步骤/How To Test"
+      description: "提供复现/验证更改的步骤，含环境/命令/预期结果等"
+      placeholder: "输入测试步骤"
+    validations:
+      required: false
+  - type: checkboxes
+    attributes:
+      label: "检查表/Checklist"
+      description: "提交前，请确认以下事项"
+      options:
+        - label: 代码格式符合团队规范
+          required: true
+        - label: 已添加或更新单元测试/集成测试
+          required: true
+        - label: 文档/README 已更新（如有必要）
+          required: false
+        - label: 所有测试通过
+          required: true
+        - label: 分支命名正确(feature/xxx或fix/xxx 等)
+          required: false
+        - label: 回归风险已评估
+          required: false
+    validations:
+      required: true
+  - type: textarea
+    id: impact
+    attributes:
+      label: "影响评估/Risk & Rollback"
+      description: "评估变更是否有破坏性风险，以及如何回滚/缓解"
+      placeholder: "例如：数据库迁移、依赖变动、兼容性问题等"
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: "可选：截图或 Demo(如界面/UI 有变化)"
+      description: "上传新的界面/UI"
+

.gitea/workflows/deploy.yml

@@ -0,0 +1,58 @@
+name: deploy to server
+
+on: push
+
+jobs:
+  build-and-deploy:
+    runs-on: node22-build
+    steps:
+      - name: Check Proxy
+        run: |
+          echo "HTTP_PROXY = $HTTP_PROXY"
+          echo "HTTPS_PROXY = $HTTPS_PROXY"
+          # 测试网络是否能透过代理访问一个外部 URL，比如 google.com
+          # 也可以换成你常用的 npm registry / GitHub
+          curl -I https://www.google.com --max-time 10 || echo "curl to google failed"
+          # 测试拉取 npm 包或 ping github.com
+          curl -I https://registry.npmjs.org --max-time 10 || echo "curl to registry.npmjs.org failed"
+          ping -c 3 github.com || echo "ping github.com failed"
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: Setup node 22
+        uses: actions/setup-node@v5
+        with: 
+          node-version: '22'
+          cache: 'pnpm'
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+      - name: Install dependencies
+        run: pnpm install
+      - name: Cache Nuxt build
+        uses: actions/cache@v4
+        with:
+          path: .nuxt
+          key: ${{ runner.os }}-nuxt-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-nuxt-
+      - name: Build project
+        run: pnpm run build
+      - name: Deploy to server
+        if: github.ref == 'refs/heads/master'
+        uses: easingthemes/ssh-deploy@main
+        with:
+          ARGS: "-rlgoDzvc -i --delete"
+          REMOTE_HOST: ${{ secrets.rsync_host }}
+          REMOTE_USER: ${{ secrets.rsync_username }}
+          SOURCE: ${{ secrets.rsync_source }}
+          TARGET: ${{ secrets.rsync_destination }}
+          SSH_PRIVATE_KEY: ${{ secrets.rsync_key }}
+          SCRIPT_AFTER: ${{ secrets.script_after_rsync }}

.graphqlrc.yaml

@@ -0,0 +1,5 @@
+schema:
+  - 'http://192.168.86.5:8055/graphql':
+      headers:
+        Authorization: 'Bearer ixSWeViHIqwj6_r7NM-uZVR3NNOyBa_W'
+documents: 'app/graphql/**/*.{graphql,js,ts,jsx,tsx}'

.husky/commit-msg

@@ -0,0 +1,150 @@
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+PURPLE='\033[0;35m'
+CYAN='\033[0;36m'
+GRAY='\033[0;37m'
+NC='\033[0m' # No Color
+
+# 启用调试模式（可选）
+DEBUG=${DEBUG:-false}
+
+# 输出函数
+print_info() {
+    echo -e "${BLUE}[INFO]${NC} $1"
+}
+
+print_success() {
+    echo -e "${GREEN}[SUCCESS]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+print_debug() {
+    if [ "$DEBUG" = "true" ]; then
+        echo -e "${GRAY}[DEBUG]${NC} $1"
+    fi
+}
+
+print_section() {
+    echo -e "${PURPLE}[SECTION]${NC} $1"
+}
+
+print_command() {
+    echo -e "${CYAN}[COMMAND]${NC} $1"
+}
+
+print_section "开始执行Commit Message Hook..."
+print_info "时间: $(date)"
+print_info "工作目录: $(pwd)"
+print_info "用户: $(whoami)"
+echo
+
+# 调试信息
+print_debug "接收到的参数: $*"
+print_debug "参数数量: $#"
+print_debug "第一个参数 (提交消息文件): $1"
+print_debug "Shell: $SHELL"
+print_debug "PATH: $PATH"
+print_debug "当前进程ID: $"
+
+
+# 检查 commitlint 是否可用
+print_section "检查 commitlint..."
+if npx commitlint --version >/dev/null 2>&1; then
+    COMMITLINT_VERSION=$(npx commitlint --version)
+    print_success "commitlint 可用: $COMMITLINT_VERSION"
+else
+    print_error "commitlint 不可用或配置有误"
+    exit 1
+fi
+
+# 检查提交消息文件
+echo
+print_section "检查提交消息文件..."
+if [ -f "$1" ]; then
+    print_success "文件存在: $1"
+    FILE_SIZE=$(wc -c < "$1")
+    print_info "文件大小: $FILE_SIZE 字节"
+    
+    print_info "文件内容:"
+    echo -e "${CYAN}========================================${NC}"
+    cat "$1"
+    echo
+    echo -e "${CYAN}========================================${NC}"
+    
+    # 检查文件权限
+    FILE_PERMS=$(ls -l "$1" | awk '{print $1}')
+    print_debug "文件权限: $FILE_PERMS"
+    
+    # 检查文件内容是否为空
+    if [ "$FILE_SIZE" -eq 0 ] || [ -z "$(tr -d '[:space:]' < "$1")" ]; then
+        print_warning "提交消息为空"
+    fi
+else
+    print_error "找不到提交消息文件: $1"
+    print_info "当前目录内容:"
+    ls -la
+    exit 1
+fi
+
+# 检查 commitlint 配置
+echo
+print_section "检查 commitlint 配置..."
+if [ -f ".commitlintrc.js" ] || [ -f ".commitlintrc.json" ] || [ -f "commitlint.config.js" ] || [ -f "commitlint.config.mjs" ]; then
+    print_success "找到 commitlint 配置文件"
+    for config_file in .commitlintrc.js .commitlintrc.json commitlint.config.js; do
+        if [ -f "$config_file" ]; then
+            print_info "配置文件: $config_file"
+            print_debug "$config_file 内容预览:"
+            print_debug "$(head -10 "$config_file" 2>/dev/null || echo '无法读取文件')"
+            break
+        fi
+    done
+else
+    print_warning "未找到 commitlint 配置文件"
+    print_info "建议创建 .commitlintrc.js 或 commitlint.config.js/commitlint.config.mjs"
+fi
+
+# 运行 commitlint
+echo
+print_section "执行 commitlint 检查..."
+print_command "执行命令: npx commitlint --edit \"$1\""
+
+# 显示详细的执行过程
+if [ "$DEBUG" = "true" ]; then
+    print_debug "详细执行过程:"
+    npx commitlint --edit "$1" --verbose
+    RESULT=$?
+else
+    npx commitlint --edit "$1"
+    RESULT=$?
+fi
+
+echo
+if [ $RESULT -eq 0 ]; then
+    print_success "提交消息格式检查通过!"
+    print_info "准备提交到 Git 仓库..."
+    print_debug "Hook 执行成功，退出代码: 0"
+else
+    print_error "提交消息格式检查失败! (退出代码: $RESULT)"
+    echo
+    print_warning "故障排查建议:"
+    echo "1. 检查提交消息是否符合约定式提交格式"
+    echo "2. 确认 commitlint 配置是否正确"
+    echo "3. 运行 'DEBUG=true git commit' 查看详细调试信息"
+    echo "4. 手动测试: npx commitlint --edit .git/COMMIT_EDITMSG"
+    echo
+    print_debug "Hook 执行失败，退出代码: $RESULT"
+fi
+
+print_info "Hook 执行完成: $(date)"
+exit $RESULT

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

Dockerfile

@@ -0,0 +1,51 @@
+# -------- Base image --------
+FROM node:22-alpine AS base
+ENV NODE_ENV=production
+WORKDIR /app
+
+# -------- Dependencies layer -------
+FROM base AS deps
+WORKDIR /app
+
+RUN corepack enable
+
+# Copy package.json and lockfile
+COPY package.json pnpm-lock.yaml .npmrc ./
+
+# Install dependencies with cache
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store pnpm install
+
+# -------- Build layer -------
+FROM deps AS build
+# Copy entire project
+COPY  . ./
+
+ENV NITRO_PRESET=node-server
+
+# Build the project
+RUN pnpm run build
+
+# ------- Runtime layer -------
+FROM base AS runtime
+WORKDIR /app
+
+# COPY .output folder
+COPY --from=build /app/.output ./
+
+
+ARG BUILD_TIME
+ARG GIT_COMMIT
+
+RUN echo "{\"buildTime\":\"$BUILD_TIME\",\"gitCommit\":\"$GIT_COMMIT\"}" > /app/version.json
+
+
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+ENV PORT=3000
+ENV NITRO_PRESET=node-server
+ENV HOST=0.0.0.0
+
+EXPOSE 3000
+ENTRYPOINT ["/entrypoint.sh"]
+CMD ["node", "/app/server/index.mjs"]

README.md

@@ -1,75 +1,104 @@
-# Nuxt Minimal Starter
+# 金申机械制造有限公司官方网站——前端服务
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+这是公司（金申机械制造有限公司）官网的前端服务。项目使用Nuxt.js与Element Plus进行开发，后端服务使用Directus。旨在为客户提供直观的公司简介、产品信息、解决方案、联系方式等。
 
-## Setup
+## 站点内容
 
-Make sure to install dependencies:
+- 首页
+  - 首页Banner
+  - 推荐产品
+- 产品展示
+  - 产品列表分类展示
+  - 产品详情页
+- 解决方案
+  - 以Markdown形式渲染解决方案文章
+- 服务支持
+  - 常见问题列表
+  - 文档资料列表
+  - 联系信息
+- 关于我们
+  - 公司基本信息
+- 搜索页
+  - 使用Meilisearch作为搜索引擎进行搜索
+
+## 安装与设置
+
+> [!NOTE]
+> 本项目默认使用pnpm作为包管理器
+
+1. 克隆项目仓库：
 
 ```bash
-# npm
+git clone http://192.168.84.125/remilia/jinshen-website.git
-npm install
+```
 
-# pnpm
+2. 进入项目目录：
+
+```bash
+cd jinshen-website
+```
+
+3. 安装依赖
+
+```bash
 pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```
 
-## Development Server
+4. 运行开发环境
-
-Start the development server on `http://localhost:3000`:
 
 ```bash
-# npm
+pnpm run dev
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```
 
-## Production
+5. 访问开发环境
 
-Build the application for production:
+通过http://localhost:3000访问前端服务
+
+### 配置说明
+
+项目用到以下环境变量，请自行在项目中配置
+
+> [!NOTE]
+>
+> - NUXT_PUBLIC_DIRECTUS_URL: 后端Directus服务URL
+> - NUXT_PUBLIC_DIRECTUS_TOKEN: 后端Directus服务的API Token
+> - MEILI_HOST: Meilisearch服务地址
+> - MEILI_SEARCH_KEY: MeilisearchKey
+
+## 构建与部署
+
+1. 构建生产版本
+
+项目构建
 
 ```bash
-# npm
+pnpm run build
-npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
 ```
 
-Locally preview production build:
+预览构建版本
 
 ```bash
-# npm
+pnpm run preview
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
 ```
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+2. 部署
+
+部署构建后的项目并推送到文件服务器中，具体步骤视服务器配置而定
+
+## Dockerfile部署
+
+1. 构建Docker镜像
+
+在项目根目录执行docker build
+
+```bash
+docker build -t jinshen-website .
+```
+
+2. 运行docker容器
+
+```bash
+docker run --name <container-name> jinshen-website
+```
+
+网站默认在3000端口开放

app/app.vue

@@ -9,29 +9,9 @@
 </template>
 
 <script setup lang="ts">
-import { ElConfigProvider } from 'element-plus';
+  import { ElConfigProvider } from 'element-plus';
 
-const { login } = useStrapiAuth();
+  const { getElementPlusLocale } = useLocalizations();
 
-const { getElementPlusLocale } = useLocalizations();
+  const elementPlusLocale = getElementPlusLocale();
-
-const elementPlusLocale = getElementPlusLocale();
-
-
-onMounted(() => {
-  // 检查用户是否已登录
-  const user = useStrapiUser();
-  if (!user.value) {
-    // 如果未登录，重定向到登录页面
-    login({ identifier: 'remilia', password: 'huanshuo51' })
-      .then(() => {
-        console.log('Login successful');
-      })
-      .catch((error) => {
-        console.error('Login failed:', error);
-      });
-  } else {
-    console.log('User is already logged in:', user.value);
-  }
-});
 </script>

app/assets/css/fonts.css

@@ -0,0 +1,36 @@
+@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;
+}

app/assets/css/typography.css

@@ -0,0 +1,95 @@
+.html-typography {
+  padding: 10px;
+  line-height: 1.6;
+}
+
+.html-typography h1 {
+  color: var(--el-color-primary);
+  font-size: 1.5em;
+  margin-bottom: 0.5em;
+  text-align: center;
+}
+
+.html-typography h2 {
+  color: var(--el-color-primary);
+  font-size: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.html-typography h3 {
+  color: var(--el-color-primary);
+  font-size: 1.2em;
+  margin-bottom: 0.5em;
+}
+
+.html-typography p {
+  text-indent: 2em;
+  text-align: justify;
+  margin: 0.5em 0;
+  margin-bottom: 1em;
+}
+
+.html-typography ol {
+  list-style-type: decimal;
+  padding-left: 2em;
+  margin-bottom: 1em;
+}
+
+.html-typography ul {
+  list-style-type: disc;
+  padding-left: 2em;
+  margin-bottom: 1em;
+}
+
+.html-typography hr {
+  border: none;
+  border-top: 1px solid var(--el-border-color);
+  margin: 20px 0;
+}
+
+/* 表格基础样式 */
+.html-typography table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--el-border-color);
+  margin: 1em 0;
+  table-layout: auto;
+  font-size: 14px;
+}
+
+/* 单元格通用样式 */
+.html-typography th,
+.html-typography td {
+  border: 1px solid var(--el-border-color);
+  padding: 8px 12px;
+  text-align: left;
+  vertical-align: middle;
+  word-break: break-word;
+}
+
+/* 表头样式 */
+.html-typography th {
+  background-color: var(--el-fill-color-light);
+  color: var(--el-text-color-primary);
+  font-weight: 600;
+}
+
+/* 行 hover 效果 */
+.html-typography tbody tr:hover {
+  background-color: var(--el-fill-color-light-hover);
+}
+
+/* 交替行背景 */
+.html-typography tbody tr:nth-child(odd) {
+  background-color: var(--el-fill-color-lighter);
+}
+
+/* 表格标题（如有 caption） */
+.html-typography table caption {
+  caption-side: top;
+  text-align: left;
+  padding: 8px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}

app/assets/scss/element/dark.scss

@@ -1,6 +1,6 @@
-@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
+@forward "element-plus/theme-chalk/src/dark/var.scss" with (
   $bg-color: (
-    'page': #0a0a0a,
+    "page": #0a0a0a,
-    'overlay': #1d1e1f,
+    "overlay": #1d1e1f,
   )
 );

app/assets/scss/element/index.scss

@@ -1,26 +1,26 @@
 $-colors: (
-  'primary': (
+  "primary": (
-    'base': #177ee5,
+    "base": #177ee5,
   ),
-  'success': (
+  "success": (
-    'base': green,
+    "base": green,
   ),
-  'warning': (
+  "warning": (
-    'base': #f9a23c,
+    "base": #f9a23c,
   ),
-  'danger': (
+  "danger": (
-    'base': #ff3300,
+    "base": #ff3300,
   ),
-  'error': (
+  "error": (
-    'base': #f56c6c,
+    "base": #f56c6c,
   ),
-  'info': (
+  "info": (
-    'base': #909399,
+    "base": #909399,
   ),
 );
 
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+@forward "element-plus/theme-chalk/src/common/var.scss" with (
   $colors: $-colors
 );
 
-@use './dark.scss';
+@use "./dark.scss";

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,8 @@ 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;
+}

app/components/JinshenFooter.vue

@@ -1,275 +0,0 @@
-<template>
-  <footer class="jinshen-footer">
-    <div class="footer-container">
-      <!-- Logo 和公司信息 -->
-      <div class="footer-section">
-        <div class="footer-logo">
-          <img src="/jinshen-logo.png" alt="Jinshen Logo" class="logo-image">
-          <h3>{{ $t('company-name') }}</h3>
-        </div>
-        <p class="company-description">
-          {{ $t('company-description') }}
-        </p>
-      </div>
-
-      <!-- 快速链接 -->
-      <div class="footer-section">
-        <h4>{{ $t('quick-links') }}</h4>
-        <ul class="footer-links">
-          <li>
-            <NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale>
-          </li>
-          <li>
-            <NuxtLink :to="$localePath('/productions')">{{ $t('productions') }}</NuxtLink>
-          </li>
-          <li>
-            <NuxtLink :to="$localePath('/solutions')">{{ $t('solutions') }}</NuxtLink>
-          </li>
-          <li>
-            <NuxtLink :to="$localePath('/support')">{{ $t('support') }}</NuxtLink>
-          </li>
-          <li>
-            <NuxtLink :to="$localePath('/about')">{{ $t('about-us') }}</NuxtLink>
-          </li>
-        </ul>
-      </div>
-
-      <!-- 联系信息 -->
-      <div class="footer-section">
-        <h4>{{ $t('contact-info') }}</h4>
-        <div class="contact-item">
-          <el-icon><Phone /></el-icon>
-          <span>{{ $t('telephone') }}: 0573-88187988</span>
-        </div>
-        <div class="contact-item">
-          <el-icon><Message /></el-icon>
-          <span>{{ $t('email') }}: jinshen@wzjinshen.com</span>
-        </div>
-        <div class="contact-item">
-          <el-icon><Location /></el-icon>
-          <span>{{ $t('address') }}: {{ $t('company-address') }}</span>
-        </div>
-      </div>
-
-      <!-- 社交媒体 -->
-      <div class="footer-section">
-        <h4>{{ $t('follow-us') }}</h4>
-        <div class="social-links">
-          <a href="#" class="social-link" aria-label="WeChat">
-            <el-icon size="20"><ChatDotRound /></el-icon>
-          </a>
-          <a href="#" class="social-link" aria-label="Weibo">
-            <el-icon size="20"><Star /></el-icon>
-          </a>
-          <a href="#" class="social-link" aria-label="LinkedIn">
-            <el-icon size="20"><Link /></el-icon>
-          </a>
-          <a href="#" class="social-link" aria-label="Email">
-            <el-icon size="20"><Message /></el-icon>
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <!-- 版权信息 -->
-    <div class="footer-bottom">
-      <div class="footer-container">
-        <div class="copyright">
-          <p>&copy; {{ currentYear }} {{ $t('company-name') }}. {{ $t('all-rights-reserved') }}</p>
-          <p>备案号: 浙ICP备12003709号-5</p>
-        </div>
-        <div class="footer-links-bottom">
-          <NuxtLink :to="$localePath('/privacy')">{{ $t('privacy-policy') }}</NuxtLink>
-          <span class="separator">|</span>
-          <NuxtLink :to="$localePath('/terms')">{{ $t('terms-of-service') }}</NuxtLink>
-          <span class="separator">|</span>
-          <NuxtLink :to="$localePath('/sitemap')">{{ $t('sitemap') }}</NuxtLink>
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<script setup lang="ts">
-import { 
-  Phone, 
-  Message, 
-  Location, 
-  ChatDotRound, 
-  Star, 
-  Link 
-} from '@element-plus/icons-vue'
-
-const currentYear = new Date().getFullYear()
-</script>
-
-<style scoped>
-.jinshen-footer {
-  background: var(--el-bg-color-page);
-  border-top: 1px solid var(--el-border-color);
-  margin-top: auto;
-}
-
-.footer-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem 1rem;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
-}
-
-.footer-section h3,
-.footer-section h4 {
-  color: var(--el-text-color-primary);
-  margin-bottom: 1rem;
-  font-weight: 600;
-}
-
-.footer-logo {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-.logo-image {
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-}
-
-.company-description {
-  color: var(--el-text-color-regular);
-  line-height: 1.6;
-  margin: 0;
-}
-
-.footer-links {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.footer-links li {
-  margin-bottom: 0.5rem;
-}
-
-.footer-links a {
-  color: var(--el-text-color-regular);
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.footer-links a:hover {
-  color: var(--el-color-primary);
-}
-
-.contact-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  color: var(--el-text-color-regular);
-}
-
-.contact-item .el-icon {
-  color: var(--el-color-primary);
-}
-
-.social-links {
-  display: flex;
-  gap: 1rem;
-}
-
-.social-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: var(--el-fill-color-light);
-  border-radius: 50%;
-  color: var(--el-text-color-regular);
-  text-decoration: none;
-  transition: all 0.3s ease;
-}
-
-.social-link:hover {
-  background: var(--el-color-primary);
-  color: white;
-  transform: translateY(-2px);
-}
-
-.footer-bottom {
-  background: var(--el-fill-color-light);
-  border-top: 1px solid var(--el-border-color-lighter);
-  padding: 1rem 0;
-}
-
-.footer-bottom .footer-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 1rem;
-  grid-template-columns: none;
-  gap: 1rem;
-}
-
-.copyright p {
-  margin: 0;
-  color: var(--el-text-color-regular);
-  font-size: 0.875rem;
-}
-
-.footer-links-bottom {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.footer-links-bottom a {
-  color: var(--el-text-color-regular);
-  text-decoration: none;
-  font-size: 0.875rem;
-  transition: color 0.3s ease;
-}
-
-.footer-links-bottom a:hover {
-  color: var(--el-color-primary);
-}
-
-.separator {
-  color: var(--el-text-color-placeholder);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .footer-container {
-    grid-template-columns: 1fr;
-    padding: 1.5rem 1rem;
-  }
-  
-  .footer-bottom .footer-container {
-    flex-direction: column;
-    text-align: center;
-    gap: 1rem;
-  }
-  
-  .footer-links-bottom {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-}
-
-/* 暗色模式适配 */
-@media (prefers-color-scheme: dark) {
-  .jinshen-footer {
-    background: var(--el-bg-color-page);
-  }
-  
-  .footer-bottom {
-    background: var(--el-fill-color-darker);
-  }
-}
-</style>

app/components/JinshenHeader.vue

@@ -1,112 +0,0 @@
-<template>
-    <div class="header-container">
-        <div class="logo-section">
-            <NuxtLink :to="$localePath('/')" class="logo-link">
-                <el-image class="website-logo" src="/jinshen-logo.png" alt="Jinshen Logo" fit="contain" />
-            </NuxtLink>
-        </div>
-
-
-        <!-- 导航菜单 -->
-        <el-menu default-active="productions" class="header-menu" mode="horizontal" :ellipsis="false" router>
-            <el-menu-item :index="$localePath('/productions')">
-                <span class="title">{{ $t('productions') }}</span>
-            </el-menu-item>
-            <el-menu-item :index="$localePath('/solutions')">
-                <span class="title">{{ $t('solutions') }}</span>
-            </el-menu-item>
-            <el-menu-item :index="$localePath('/support')">
-                <span class="title">{{ $t('support') }}</span>
-            </el-menu-item>
-            <el-menu-item :index="$localePath('/about')">
-                <span class="title">{{ $t('about-us') }}</span>
-            </el-menu-item>
-        </el-menu>
-
-        <!-- 右侧功能区 -->
-        <div class="header-actions">
-            <el-input
-v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
-                :prefix-icon="Search" clearable @keyup.enter="handleSearch" />
-            <el-dropdown @command="setLocale">
-                <el-link type="info" :underline="false">
-                    <el-icon class="mdi mdi-translate translate-link" />
-                </el-link>
-                <template #dropdown>
-                    <el-dropdown-menu>
-                        <el-dropdown-item command="zh">简体中文</el-dropdown-item>
-                        <el-dropdown-item command="en">English</el-dropdown-item>
-                    </el-dropdown-menu>
-                </template>
-            </el-dropdown>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { Search } from '@element-plus/icons-vue';
-
-const { setLocale } = useI18n();
-
-const searchQuery = ref('')
-
-const handleSearch = () => {
-    if (searchQuery.value.trim()) {
-        // 这里可以添加搜索逻辑，例如导航到搜索结果页面
-        console.log('Searching for:', searchQuery.value);
-        // 示例：导航到搜索结果页面
-        // router.push({ path: '/search', query: { q: searchQuery.value } });
-    }
-}
-</script>
-
-<style scoped>
-.header-container {
-    margin: 0 auto;
-    padding: 0 10px;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid #e0e0e0;
-}
-
-.logo-section {
-    display: flex;
-    flex: 1;
-    align-items: center;
-}
-
-.logo-link {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-}
-
-.website-logo {
-    height: 64px;
-    width: auto;
-}
-
-.header-menu {
-    margin-right: 40px;
-    border-bottom: none !important;
-    width: auto;
-}
-
-.header-menu .el-menu-item {
-    border-bottom: none !important;
-}
-
-.header-actions {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-}
-
-.search-input {
-    width: 200px;
-}
-
-.translate-link {
-    font-size: 20px;
-}
-</style>

app/components/MarkdownRenderer.vue

@@ -1,35 +0,0 @@
-<!-- eslint-disable vue/no-v-html -->
-<template>
-  <!-- 用 v-html 渲染解析后的 HTML -->
-  <div class="markdown-body" v-html="safeHtml"/>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  content: string
-}
-
-const props = defineProps<Props>()
-
-// 将 Markdown 转换成 HTML
-const safeHtml = computed(() => renderMarkdown(props.content))
-</script>
-
-<style>
-.markdown-body {
-  padding: 10px;
-  line-height: 1.6;
-}
-
-.markdown-body h1,
-.markdown-body h2 {
-    color: var(--el-color-primary);
-    font-size: 1.5em;
-    margin-bottom: 0.5em;
-}
-
-.markdown-body ol {
-    list-style-type: decimal;
-    padding-left: 2em;
-}
-</style>

app/components/ProductionCard.vue

@@ -1,74 +0,0 @@
-<template>
-    <el-card class="production-card" @click="handleClick">
-        <!-- Image -->
-        <el-image class="production-image" :src="imageUrl" fit="contain" />
-        <template #footer>
-            <!-- Name -->
-            <div class="text-center mx-auto text-md">
-                <span class="production-name">{{ name }}</span>
-            </div>
-            <!-- Description -->
-            <div class="mx-auto mt-5 text-center text-sm opacity-25">{{ description }}</div>
-        </template>
-    </el-card>
-</template>
-
-<script setup lang="ts">
-
-interface Props {
-    name: string
-    description: string
-    imageUrl: string
-    id?: string | number
-    slug?: string
-}
-
-const props = defineProps<Props>()
-const localePath = useLocalePath()
-
-const handleClick = () => {
-    // 优先使用 slug，如果没有则使用 id
-    const routeParam = props.slug || props.id
-    if (routeParam) {
-        navigateTo(localePath(`/productions/${routeParam}`))
-    }
-}
-</script>
-
-<style scoped>
-.production-card {
-    width: 20%;
-    /* margin: 20px auto; */
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-align: center;
-}
-
-.production-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-}
-
-.production-name {
-    font-weight: 600;
-    color: var(--el-text-color-primary);
-}
-
-.production-card .el-image {
-    height: 200px;
-    border-radius: 4px;
-}
-
-/* 响应式设计 */
-@media (max-width: 1200px) {
-    .production-card {
-        width: 45%;
-    }
-}
-
-@media (max-width: 768px) {
-    .production-card {
-        width: 90%;
-    }
-}
-</style>

app/components/SpecTable.vue

@@ -1,27 +0,0 @@
-<template>
-    <div class="spec-collapse">
-        <el-collapse  v-model="activeName">
-            <el-collapse-item v-for="item in data" :key="item.title" :title="item.title" :name="item.title">
-                <el-descriptions :column="1" border>
-                    <el-descriptions-item v-for="subItem in item.items" :key="subItem.label" :label="subItem.label">
-                        {{ subItem.value }}
-                    </el-descriptions-item>
-                </el-descriptions>
-            </el-collapse-item>
-        </el-collapse>
-    </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps({
-    data: {
-        type: Object as () => ProductionSpecGroup[],
-        required: true
-    }
-})
-
-// 默认全部展开
-const activeName = ref<string[]>(props.data.map((item: ProductionSpecGroup) => {
-    return item.title
-}) || [])
-</script>

app/components/pages/about/LearnMoreCard.vue

@@ -0,0 +1,107 @@
+<template>
+  <component
+    :is="wrapperTag"
+    v-bind="wrapperProps"
+    class="learn-more-wrapper"
+    @click="handleAsyncClick"
+  >
+    <el-card class="learn-more-card">
+      <el-icon class="icon" size="80">
+        <component :is="icon" />
+      </el-icon>
+      <br />
+      {{ title }}
+    </el-card>
+  </component>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: Object,
+      default: null,
+    },
+    to: {
+      type: String,
+      default: null,
+    },
+    href: {
+      type: [String, Function],
+      default: null,
+    },
+  });
+
+  // 包裹器标签
+  const wrapperTag = computed(() => {
+    if (props.to) return resolveComponent('NuxtLink');
+    if (props.href) return 'a';
+    return 'div';
+  });
+
+  // 包裹器属性
+  const wrapperProps = computed(() => {
+    // Nuxt 内部跳转
+    if (props.to) {
+      return { to: props.to };
+    }
+
+    // 外部跳转（字符串）
+    if (typeof props.href === 'string') {
+      return {
+        href: props.href,
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      };
+    }
+
+    // 其他情况：href 是异步函数 → 不在这里处理
+    return { href: '#' };
+  });
+
+  async function handleAsyncClick(event: Event) {
+    if (typeof props.href === 'function') {
+      event.preventDefault();
+      const url = await props.href();
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  }
+</script>
+
+<style scoped>
+  .learn-more-card {
+    width: 20%;
+    min-width: 200px;
+    padding: 20px;
+    margin: 0 auto;
+    cursor: pointer;
+    text-align: center;
+    font-size: 1.5em;
+  }
+
+  .learn-more-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+
+  .icon {
+    padding: 10px;
+  }
+
+  @media (max-width: 768px) {
+    .learn-more-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+
+    .learn-more-card {
+      width: 80%;
+      min-width: 0;
+    }
+  }
+</style>

app/components/pages/download/FileCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-card shadow="hover" class="p-4">
+    <template #header>
+      <div class="header-content">
+        <el-icon class="header-icon"><ElIconDocument /></el-icon>
+        <span class="truncate font-medium">{{ file.filename_download }}</span>
+      </div>
+    </template>
+    <dl class="text-gray-600 space-y-1 mb-6">
+      <div>
+        <dt class="font-semibold inline">{{ $t('document-meta.type') }}：</dt>
+        <dd class="inline">{{ file.type }}</dd>
+      </div>
+      <div>
+        <dt class="font-semibold inline">{{ $t('document-meta.size') }}：</dt>
+        <dd class="inline">{{ formatFileSize(file.filesize) }}</dd>
+      </div>
+      <div>
+        <dt class="font-semibold inline">
+          {{ $t('document-meta.upload-at') }}：
+        </dt>
+        <dd class="inline">
+          {{ new Date(file.uploaded_on).toLocaleDateString() }}
+        </dd>
+      </div>
+    </dl>
+    <template #footer>
+      <div class="button-group">
+        <el-button type="primary" @click="handleDownload">{{
+          $t('document-action.download')
+        }}</el-button>
+        <el-button v-if="file.previewable" @click="handlePreview">{{
+          $t('document-action.preview')
+        }}</el-button>
+      </div>
+    </template>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    fileId: {
+      type: String,
+      required: true,
+    },
+    file: {
+      type: Object as PropType<FileMeta>,
+      required: true,
+    },
+  });
+
+  const localePath = useLocalePath();
+  const router = useRouter();
+
+  function handleDownload() {
+    const link = document.createElement('a');
+    link.href = `/api/download/${props.fileId}`;
+    link.download = props.file?.filename_download ?? 'download';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+  function handlePreview() {
+    router.push(localePath(`/preview/${props.fileId}`));
+  }
+</script>
+
+<style scoped>
+  .header-content {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    margin-bottom: 4px;
+  }
+  .header-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .button-group {
+    display: flex;
+    justify-content: flex-end;
+    align-items: baseline;
+    gap: 1rem;
+  }
+</style>

app/components/pages/homepage/HomepageCarousel.vue

@@ -0,0 +1,92 @@
+<template>
+  <section v-if="!pending" class="carousel-section">
+    <el-carousel
+      class="homepage-carousel"
+      height="auto"
+      :interval="5000"
+      arrow="never"
+      autoplay
+    >
+      <el-carousel-item v-for="(item, index) in carousel" :key="index">
+        <div class="carousel-item">
+          <el-image
+            class="carousel-image"
+            :src="getImageUrl(item)"
+            :alt="`Carousel Image ${index + 1}`"
+            fit="contain"
+            lazy
+          />
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </section>
+  <section v-else>
+    <el-skeleton :rows="5" animated />
+  </section>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    homepageData: {
+      type: Object as PropType<HomepageView>,
+      default: null,
+    },
+    pending: {
+      type: Boolean,
+    },
+  });
+
+  const { getImageUrl } = useDirectusImage();
+
+  const carousel = computed(() => props.homepageData?.carousel || []);
+</script>
+
+<style scoped>
+  .carousel-section {
+    padding: 0;
+  }
+
+  .homepage-carousel .el-carousel__item {
+    width: 100%;
+    height: 33vw;
+    /* 16:9 Aspect Ratio */
+  }
+
+  .el-carousel__item h3 {
+    display: flex;
+    color: #475669;
+    opacity: 0.8;
+    line-height: 300px;
+    margin: 0;
+  }
+
+  .homepage-carousel .carousel-item {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f7fa;
+  }
+
+  .carousel-image {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .carousel-image-caption {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 5px;
+    font-size: 14px;
+  }
+
+  @media (max-width: 768px) {
+    .homepage-carousel .el-carousel__item {
+      height: 50vw;
+    }
+  }
+</style>

app/components/pages/homepage/HomepageProductSection.vue

@@ -0,0 +1,228 @@
+<template>
+  <section class="homepage-section">
+    <h2>{{ $t('homepage.recommended-products') }}</h2>
+    <p>
+      {{ $t('homepage.recommended-products-desc') }}
+    </p>
+    <div v-if="!pending">
+      <el-carousel
+        class="recommend-carousel"
+        :height="carouselHeight"
+        arrow="never"
+        indicator-position="outside"
+        :autoplay="false"
+      >
+        <el-carousel-item
+          v-for="n in pages"
+          ref="carouselItem"
+          :key="n"
+          class="recommend-list"
+        >
+          <div class="recommend-card-group">
+            <el-card
+              v-for="(item, index) in pageProducts(n)"
+              :key="index"
+              class="recommend-card"
+              @click="handleProductCardClick(item.id.toString() || '')"
+            >
+              <template #header>
+                <el-image
+                  :src="getImageUrl(item.cover)"
+                  :alt="item.name"
+                  fit="cover"
+                  lazy
+                />
+              </template>
+              <div class="recommend-card-body">
+                <!-- Title -->
+                <div class="text-center">
+                  <span class="recommend-card-title">{{ item.name }}</span>
+                </div>
+                <!-- Description -->
+                <div class="recommend-card-description text-left opacity-25">
+                  {{ item.summary }}
+                </div>
+              </div>
+            </el-card>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div v-else>
+      <el-skeleton :rows="4" animated />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    homepageData: {
+      type: Object as PropType<HomepageView>,
+      default: null,
+    },
+    pending: {
+      type: Boolean,
+    },
+  });
+
+  const carouselHeight = ref<string>('auto');
+  const perPage = ref(3);
+  const carouselItem = ref<HTMLElement | null>(null);
+
+  const { getImageUrl } = useDirectusImage();
+  const { height } = useElementSize(carouselItem);
+
+  const products = computed(() => props.homepageData?.recommendProducts || []);
+  const pages = computed(() =>
+    Math.ceil(products.value.length / perPage.value)
+  );
+
+  const updatePerPage = () => {
+    const width = window.innerWidth;
+    if (width < 768) {
+      perPage.value = 1;
+    } else if (width < 1024) {
+      perPage.value = 2;
+    } else {
+      perPage.value = 3;
+    }
+  };
+
+  const pageProducts = (n: number) => {
+    return products.value.slice((n - 1) * perPage.value, n * perPage.value);
+  };
+
+  const handleProductCardClick = (documentId: string) => {
+    // 使用路由导航到产品详情页
+    if (documentId) {
+      const localePath = useLocalePath();
+      const router = useRouter();
+      router.push(localePath(`/products/${documentId}`));
+    }
+  };
+
+  watch(height, (h) => {
+    if (h > 0) {
+      carouselHeight.value = h + 40 + 'px';
+    }
+  });
+
+  onMounted(() => {
+    updatePerPage();
+    window.addEventListener('resize', updatePerPage);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', updatePerPage);
+  });
+</script>
+
+<style scoped>
+  section {
+    padding: 2rem;
+  }
+
+  section h2 {
+    color: var(--el-text-color-primary);
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  section p {
+    color: var(--el-text-color-regular);
+    line-height: 1.6;
+  }
+
+  .homepage-section {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .recommend-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
+  }
+
+  .homepage-section {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .recommend-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
+  }
+
+  .recommend-list {
+    display: flex;
+    padding: 1rem;
+    height: auto;
+  }
+
+  .recommend-card-group {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+    margin: 0 auto;
+    height: auto;
+  }
+
+  .recommend-card {
+    width: 33%;
+    transition: all 0.3s ease;
+    text-align: center;
+  }
+
+  .recommend-card :deep(.el-card__header) {
+    padding: 0;
+    border: none;
+  }
+
+  .recommend-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+  }
+
+  .recommend-card-body {
+    margin: 10px auto;
+    padding: 0px auto;
+  }
+
+  .recommend-card-title {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .recommend-card-description {
+    font-size: 0.8rem;
+    margin-top: 5px;
+  }
+
+  .recommend-card .el-image {
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    border-radius: 4px;
+  }
+
+  @media (max-width: 1024px) {
+    .recommend-card {
+      width: 50%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .recommend-card {
+      width: 100%;
+    }
+  }
+</style>

app/components/pages/homepage/HomepageSolutionSection.vue

@@ -0,0 +1,228 @@
+<template>
+  <section class="homepage-section">
+    <h2>{{ $t('homepage.recommended-solutions') }}</h2>
+    <p>{{ $t('homepage.recommended-solutions-desc') }}</p>
+    <div v-if="!pending">
+      <el-carousel
+        class="recommend-carousel"
+        :height="carouselHeight"
+        arrow="never"
+        indicator-position="outside"
+        :autoplay="false"
+      >
+        <el-carousel-item
+          v-for="n in pages"
+          ref="carouselItem"
+          :key="n"
+          class="recommend-list"
+        >
+          <div class="recommend-card-group">
+            <el-card
+              v-for="(item, index) in pageSolutions(n)"
+              :key="index"
+              class="recommend-card"
+              @click="handleSolutionCardClick(item.id.toString() || '')"
+            >
+              <template #header>
+                <el-image
+                  :src="getImageUrl(item.cover)"
+                  :alt="item.title"
+                  fit="cover"
+                  lazy
+                />
+              </template>
+              <div class="recommend-card-body">
+                <!-- Title -->
+                <div class="text-center">
+                  <span class="recommend-card-title">{{ item.title }}</span>
+                </div>
+                <!-- Description -->
+                <div class="recommend-card-description text-left opacity-25">
+                  {{ item.summary }}
+                </div>
+              </div>
+            </el-card>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div v-else>
+      <el-skeleton :rows="4" animated />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    homepageData: {
+      type: Object as PropType<HomepageView>,
+      default: null,
+    },
+    pending: {
+      type: Boolean,
+    },
+  });
+
+  const carouselHeight = ref<string>('auto');
+  const perPage = ref(3);
+  const carouselItem = ref<HTMLElement | null>(null);
+
+  const { getImageUrl } = useDirectusImage();
+  const { height } = useElementSize(carouselItem);
+
+  const solutions = computed(
+    () => props.homepageData?.recommendSolutions || []
+  );
+  const pages = computed(() =>
+    Math.ceil(solutions.value.length / perPage.value)
+  );
+
+  const updatePerPage = () => {
+    const width = window.innerWidth;
+    if (width < 768) {
+      perPage.value = 1;
+    } else if (width < 1024) {
+      perPage.value = 2;
+    } else {
+      perPage.value = 3;
+    }
+  };
+
+  const pageSolutions = (n: number) => {
+    return solutions.value.slice((n - 1) * perPage.value, n * perPage.value);
+  };
+
+  const handleSolutionCardClick = (documentId: string) => {
+    // 使用路由导航到产品详情页
+    if (documentId) {
+      const localePath = useLocalePath();
+      const router = useRouter();
+      router.push(localePath(`/solutions/${documentId}`));
+    }
+  };
+
+  watch(height, (h) => {
+    if (h > 0) {
+      carouselHeight.value = h + 40 + 'px';
+    }
+  });
+
+  onMounted(() => {
+    updatePerPage();
+    window.addEventListener('resize', updatePerPage);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', updatePerPage);
+  });
+</script>
+
+<style scoped>
+  section {
+    padding: 2rem;
+  }
+
+  section h2 {
+    color: var(--el-text-color-primary);
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  section p {
+    color: var(--el-text-color-regular);
+    line-height: 1.6;
+  }
+
+  .homepage-section {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .recommend-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
+  }
+
+  .homepage-section {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .recommend-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
+  }
+
+  .recommend-list {
+    display: flex;
+    padding: 1rem;
+    height: auto;
+  }
+
+  .recommend-card-group {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+    margin: 0 auto;
+    height: auto;
+  }
+
+  .recommend-card {
+    width: 33%;
+    transition: all 0.3s ease;
+    text-align: center;
+  }
+
+  .recommend-card :deep(.el-card__header) {
+    padding: 0;
+    border: none;
+  }
+
+  .recommend-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+  }
+
+  .recommend-card-body {
+    margin: 10px auto;
+    padding: 0px auto;
+  }
+
+  .recommend-card-title {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .recommend-card-description {
+    font-size: 0.8rem;
+    margin-top: 5px;
+  }
+
+  .recommend-card .el-image {
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    border-radius: 4px;
+  }
+
+  @media (max-width: 1024px) {
+    .recommend-card {
+      width: 50%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .recommend-card {
+      width: 100%;
+    }
+  }
+</style>

app/components/pages/products/ProductDetail.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="product-detail">
+    <el-tabs v-model="activeName" class="product-tabs" stretch>
+      <el-tab-pane :label="$t('product-tab.details')" name="details">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div class="html-typography" v-html="product?.description || ''" />
+        <!-- <div v-if="!hydrated" v-html="product.description || ''" /> -->
+        <!-- <div v-else> -->
+        <!--   <html-renderer -->
+        <!--     class="html-typography" -->
+        <!--     :html="product.description || ''" -->
+        <!--   /> -->
+        <!-- </div> -->
+      </el-tab-pane>
+      <el-tab-pane :label="$t('product-tab.specs')" name="specs">
+        <spec-table :data="product.specs" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('product-tab.faq')" name="faq">
+        <question-list :questions="product.faqs" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('product-tab.documents')" name="documents">
+        <document-list :documents="product.documents" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    product: {
+      type: Object as PropType<ProductView>,
+      required: true,
+    },
+  });
+
+  const hydrated = ref(false);
+
+  const activeName = ref('details'); // 默认选中概览标签
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
+</script>
+
+<style scoped>
+  .product-tabs ::v-deep(.el-tabs__nav) {
+    min-width: 30%;
+    float: right;
+  }
+
+  .product-tabs ::v-deep(.el-tabs__content) {
+    padding: 10px;
+  }
+
+  .product-detail h2 {
+    color: var(--el-text-color-primary);
+    margin: 0;
+  }
+
+  @media (max-width: 768px) {
+    .product-tabs ::v-deep(.el-tabs__nav) {
+      float: none;
+      min-width: 100%;
+    }
+  }
+</style>

app/components/pages/products/ProductHeader.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="product-header">
+    <div class="product-image">
+      <el-image
+        v-if="product.images.length <= 1"
+        :src="getImageUrl(product.images[0].image)"
+        :alt="product.name"
+        fit="contain"
+      />
+      <el-carousel
+        v-else
+        class="product-carousel"
+        height="auto"
+        :autoplay="false"
+        :loop="false"
+        arrow="always"
+      >
+        <el-carousel-item
+          v-for="(item, index) in product.images || []"
+          :key="index"
+          class="product-carousel-item"
+        >
+          <div>
+            <el-image
+              :src="getImageUrl(item.image || '')"
+              :alt="product.name"
+              fit="contain"
+              lazy
+            />
+            <p v-if="item.caption" class="product-image-caption">
+              {{ item.caption }}
+            </p>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+
+    <div class="product-info">
+      <h1>{{ product.name }}</h1>
+      <p class="summary">{{ product.summary }}</p>
+      <p v-if="product.status === 'discontinued'" class="discontinued-warning">
+        <el-icon><ElIconWarning /></el-icon>
+        {{ $t('product-discontinued-warning') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    product: {
+      type: Object as PropType<ProductView>,
+      required: true,
+    },
+  });
+
+  const { getImageUrl } = useDirectusImage();
+</script>
+
+<style scoped>
+  .product-header {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 3rem;
+  }
+
+  .product-carousel-item {
+    height: 500px;
+  }
+
+  .product-image .el-image {
+    position: relative;
+    width: 100%;
+    height: 500px;
+    border-radius: 8px;
+  }
+
+  .product-image-caption {
+    position: absolute;
+    bottom: 10px;
+    /* left: 10%; */
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    padding: 5px 10px;
+    text-align: center;
+    color: white;
+    font-size: 0.8rem;
+  }
+
+  .product-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
+  }
+
+  .product-info h1 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-size: 2rem;
+  }
+
+  .summary {
+    color: var(--el-color-info);
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 2rem;
+  }
+
+  .discontinued-warning {
+    color: var(--el-color-error);
+  }
+
+  @media (max-width: 768px) {
+    .product-header {
+      grid-template-columns: 1fr;
+    }
+
+    .product-carousel-item {
+      height: 300px;
+    }
+
+    .product-image .el-image {
+      height: 300px;
+    }
+    .product-info {
+      padding: 0 1rem;
+    }
+
+    .product-info h1 {
+      font-size: 1.5rem;
+      margin-top: 0;
+    }
+  }
+</style>

app/components/pages/products/SpecTable.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="spec-collapse">
+    <el-collapse v-model="activeName">
+      <el-collapse-item
+        v-for="item in data"
+        :key="item.name"
+        :title="item.name"
+        :name="item.name"
+      >
+        <el-descriptions :column="1" label-width="30%" border>
+          <el-descriptions-item
+            v-for="subItem in item.specs"
+            :key="subItem.key"
+            :label="subItem.key"
+          >
+            {{ subItem.value }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps({
+    data: {
+      type: Object as () => ProductSpecGroupView[],
+      required: true,
+    },
+  });
+
+  // 默认全部展开
+  const activeName = ref<string[]>(
+    props.data.map((item: ProductSpecGroupView) => {
+      return item.name;
+    }) || []
+  );
+</script>
+
+<style scoped>
+  .spec-collapse ::v-deep(.el-collapse-item__header) {
+    font-size: 1rem;
+    font-weight: 600;
+    padding: 1rem;
+  }
+</style>

app/components/pages/search/SearchHeader.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="search-header">
+    <h1 class="page-title">{{ $t('search.title') }}</h1>
+    <div class="search-bar">
+      <el-input
+        v-model="keyword"
+        class="search-input"
+        :placeholder="$t('search-placeholder')"
+        :prefix-icon="Search"
+        clearable
+        @keyup.enter="navigateToQuery(keyword)"
+        @clear="handleClear"
+      />
+      <el-button
+        type="primary"
+        class="search-button"
+        @click="navigateToQuery(keyword)"
+      >
+        {{ $t('search.search-button') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Search } from '@element-plus/icons-vue';
+
+  const keyword = defineModel<string>({ default: '' });
+  const localePath = useLocalePath();
+  const router = useRouter();
+
+  const navigateToQuery = (value: string) => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    navigateTo({
+      path: localePath('/search'),
+      query: { query: trimmed },
+    });
+  };
+
+  const handleClear = () => {
+    keyword.value = '';
+    router.replace(localePath({ path: '/search' }));
+  };
+</script>
+
+<style scoped>
+  .search-header {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .page-title {
+    font-size: 2.25rem;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  .search-bar {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    font-size: 16px;
+  }
+
+  .search-input {
+    flex: 1;
+    height: 50px;
+  }
+
+  .search-button {
+    height: 50px;
+    width: 100px;
+    font-size: 16px;
+  }
+</style>

app/components/pages/search/SearchResultCard.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-card class="result-card">
+    <el-row>
+      <el-col :span="12">
+        <h3 class="result-title">{{ item.title }}</h3>
+        <p v-if="item.summary" class="result-summary">
+          {{ item.summary }}
+        </p>
+        <p v-if="item.sectionType" class="result-type">
+          <span>{{ $t('search.section') }}: </span>
+          <span class="result-type-name">{{ typeLabel }}</span>
+          <span v-if="item.type" class="result-type-name"
+            >({{ item.type }})</span
+          >
+        </p>
+      </el-col>
+      <el-col :span="12" class="image-col">
+        <el-image
+          v-if="item.thumbnail"
+          :src="item.thumbnail"
+          :alt="item.title"
+          style="width: 150px"
+        />
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  defineProps<{
+    item: SearchItemView;
+    typeLabel: string;
+  }>();
+</script>
+
+<style scoped>
+  .result-card {
+    border-radius: 12px;
+    transition: box-shadow 0.2s ease;
+  }
+
+  .result-card:hover {
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  }
+
+  .result-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--el-color-primary);
+    display: inline-block;
+  }
+
+  .result-summary {
+    font-size: 0.95rem;
+    color: var(--el-text-color-regular);
+    margin-bottom: 0.5rem;
+    line-height: 1.6;
+  }
+
+  .result-type {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+  }
+
+  .result-type-name {
+    margin-left: 4px;
+    color: var(--el-color-primary);
+  }
+
+  .image-col {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+  }
+</style>

app/components/pages/search/SearchResults.vue

@@ -0,0 +1,201 @@
+<template>
+  <div v-if="hasResults">
+    <div class="search-results">
+      <NuxtLink
+        v-for="hit in paginatedHits"
+        :key="`${hit.sectionType}-${hit.id}`"
+        :to="localePath(resolveHitLink(hit))"
+      >
+        <search-result-card
+          :item="hit"
+          :type-label="getIndexLabel(hit.sectionType)"
+        />
+      </NuxtLink>
+    </div>
+
+    <!-- 分页组件 -->
+    <div class="pagination-container text-align-center mt-12">
+      <el-pagination
+        v-model:current-page="page"
+        class="justify-center"
+        layout="prev, pager, next"
+        hide-on-single-page
+        :page-size="pageSize"
+        :total="filteredHits.length"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+  <div v-else>
+    <el-empty
+      :description="
+        route.query.query
+          ? $t('search.no-results', { query: route.query?.query })
+          : $t('search.no-query')
+      "
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps<{
+    searchItems: SearchItemView[];
+    currentPage: number;
+    category?: string;
+  }>();
+
+  const emit = defineEmits(['update:current-page']);
+
+  // i18n相关
+  const { t } = useI18n();
+
+  // 路由相关
+  const localePath = useLocalePath();
+  const route = useRoute();
+
+  // 分页相关
+  const page = computed({
+    get: () => props.currentPage,
+    set: (val) => {
+      emit('update:current-page', val);
+    },
+  });
+  const pageSize = ref(5);
+
+  // 搜索相关
+  const items = props.searchItems;
+  const filteredHits = computed(() => {
+    if (props.category) {
+      return items.filter((item) => item.sectionType === props.category);
+    } else {
+      return items;
+    }
+  });
+  const paginatedHits = computed(() => {
+    const start = (page.value - 1) * pageSize.value;
+    const end = page.value * pageSize.value;
+    return filteredHits.value.slice(start, end);
+  });
+
+  const indexLabels = computed<Record<string, string>>(() => ({
+    product: t('search.sections.product'),
+    solution: t('search.sections.solution'),
+    question: t('search.sections.faq'),
+    document: t('search.sections.document'),
+    default: t('search.sections.default'),
+  }));
+
+  /**
+   * 根据indexUid获取标签名
+   * @param indexUid 搜索条目的IndexUid
+   */
+  const getIndexLabel = (indexUid: string) =>
+    indexLabels.value[indexUid] || indexLabels.value.default;
+
+  const hasResults = computed(() => {
+    return filteredHits.value.length > 0;
+  });
+
+  /**
+   * 解析条目链接
+   * 根据条目类型返回正确的跳转链接
+   * @param item 搜索条目
+   */
+  const resolveHitLink = (item: SearchItemView) => {
+    const slugCandidate = item.id;
+
+    if (!slugCandidate) {
+      return null;
+    }
+
+    const slug = String(slugCandidate);
+
+    if (item.sectionType === 'product') {
+      return localePath({ path: `/products/${slug}` });
+    }
+
+    if (item.sectionType === 'solution') {
+      return localePath({ path: `/solutions/${slug}` });
+    }
+
+    if (item.sectionType === 'document') {
+      return localePath({ path: `/download/${slug}` });
+    }
+
+    if (item.sectionType === 'question') {
+      return localePath({ path: `/support/faq`, query: { focus: slug } });
+    }
+
+    return null;
+  };
+
+  const handleCurrentChange = () => {};
+</script>
+
+<style scoped>
+  .search-results {
+    display: grid;
+    gap: 1.5rem;
+    padding: 0.5rem;
+  }
+
+  .result-card {
+    border-radius: 12px;
+    transition: box-shadow 0.2s ease;
+  }
+
+  .result-card:hover {
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  }
+
+  .result-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--el-color-primary);
+    display: inline-block;
+  }
+
+  .result-summary {
+    font-size: 0.95rem;
+    color: var(--el-text-color-regular);
+    margin-bottom: 0.5rem;
+    line-height: 1.6;
+  }
+
+  .result-type {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+  }
+
+  .result-type-name {
+    margin-left: 4px;
+    color: var(--el-color-primary);
+  }
+
+  :deep(.el-pagination) {
+    .btn-prev,
+    .btn-next {
+      .el-icon {
+        font-size: 24px;
+      }
+    }
+
+    .el-pager {
+      gap: 0.5rem;
+    }
+    .el-pager li {
+      font-size: 1rem;
+      /* border: 1px solid #409eff; */
+      border-radius: 50%;
+
+      &:hover {
+        background-color: #ecf5ff;
+      }
+
+      &.is-active {
+        background-color: var(--el-color-primary);
+        color: #fff;
+      }
+    }
+  }
+</style>

app/components/pages/search/SearchTabs.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-tabs v-model="activeTab">
+    <el-tab-pane
+      v-for="tab in tabs"
+      :key="tab.name"
+      :label="`${tab.label}(${resultCount[tab.name] || 0})`"
+      :name="tab.name"
+    >
+      <SearchResults
+        v-model:current-page="currentPage"
+        :search-items="searchItems"
+        :category="tab.name === 'all' ? undefined : tab.name"
+      />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps<{
+    // resultCount: Record<string, number>;
+    searchItems: SearchItemView[];
+  }>();
+
+  const tabs = [
+    { name: 'all', label: $t('all') },
+    { name: 'product', label: $t('search.sections.product') },
+    { name: 'solution', label: $t('search.sections.solution') },
+    { name: 'question', label: $t('search.sections.faq') },
+    { name: 'document', label: $t('search.sections.document') },
+  ];
+
+  const resultCount = computed(() => {
+    const map: Record<string, number> = { all: props.searchItems.length };
+    for (const item of props.searchItems) {
+      map[item.sectionType] = (map[item.sectionType] ?? 0) + 1;
+    }
+    return map;
+  });
+
+  // 分类控制
+  const activeTab = ref('all');
+
+  // 分页控制
+  const currentPage = ref(1);
+
+  watch(activeTab, () => {
+    currentPage.value = 1; // 重置页码
+  });
+</script>
+
+<style scoped>
+  .el-tabs {
+    width: 100%;
+  }
+</style>

app/components/pages/solutions/SolutionDetail.vue

@@ -0,0 +1,59 @@
+<template>
+  <article class="solution-defail">
+    <header class="solution-header">
+      <h1 class="solution-title">{{ solution.title }}</h1>
+      <p class="solution-summary">{{ solution.summary }}</p>
+    </header>
+    <section class="solution-content">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div class="html-typography" v-html="solution?.content || ''" />
+      <!-- <div v-if="!hydrated" v-html="solution?.content || ''" /> -->
+      <!-- <div v-else> -->
+      <!--   <html-renderer class="html-typography" :html="solution.content || ''" /> -->
+      <!-- </div> -->
+    </section>
+  </article>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    solution: {
+      type: Object as PropType<SolutionView>,
+      default: null,
+    },
+  });
+
+  const hydrated = ref(false);
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
+</script>
+
+<style scoped>
+  .solution-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    text-align: center;
+  }
+
+  .solution-meta {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+  }
+
+  .solution-summary {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+  }
+
+  .solution-content {
+    margin-top: 1rem;
+  }
+</style>

app/components/pages/support/DocumentFilter.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="document-category">
+    <el-row :gutter="12">
+      <el-col :span="12" :xs="12">
+        <span class="select-label">{{
+          $t('product-filter.product-type')
+        }}</span>
+        <el-select
+          v-model="model.selectedProductType"
+          :placeholder="$t('product-filter.select-product-type')"
+          clearable
+        >
+          <el-option
+            v-for="type in productTypeOptions"
+            :key="type.id"
+            :label="type.name"
+            :value="type.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="12" :xs="12">
+        <span class="select-label">{{
+          $t('product-filter.product-model')
+        }}</span>
+        <el-select
+          v-model="model.selectedProduct"
+          :placeholder="$t('product-filter.select-product-model')"
+          clearable
+        >
+          <el-option
+            v-for="product in productOptions"
+            :key="product.id"
+            :label="product.name"
+            :value="product.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="12" :xs="24">
+        <span class="select-label">
+          {{ $t('product-filter.document-type') }}
+        </span>
+        <el-select
+          v-model="model.selectedDocumentType"
+          :placeholder="$t('product-filter.select-document-type')"
+          clearable
+        >
+          <el-option
+            v-for="questionType in documentTypeOptions"
+            :key="questionType.id"
+            :label="questionType.name"
+            :value="questionType.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="12" :xs="24">
+        <span class="select-label">{{ $t('product-filter.keyword') }}</span>
+        <el-input
+          v-model="model.keyword"
+          :placeholder="$t('product-filter.enter-keyword')"
+          clearable
+          :prefix-icon="Search"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Search } from '@element-plus/icons-vue';
+
+  defineProps({
+    productTypeOptions: {
+      type: Array as () => Array<DocumentListProductType>,
+      default: () => [],
+    },
+    productOptions: {
+      type: Array as () => Array<DocumentListProduct>,
+      default: () => [],
+    },
+    documentTypeOptions: {
+      type: Array as () => Array<DocumentTypeView>,
+      default: () => [],
+    },
+  });
+
+  const model = defineModel<{
+    selectedProduct: string | null;
+    selectedProductType: string | null;
+    selectedDocumentType: string | null;
+    keyword: string;
+  }>();
+</script>
+
+<style scoped>
+  .document-category {
+    margin-bottom: 1rem;
+    padding: 0 0;
+  }
+
+  .select-label {
+    color: var(--el-text-color-secondary);
+    font-size: 0.9rem;
+  }
+
+  :deep(.el-select__wrapper),
+  :deep(.el-input__wrapper) {
+    height: 40px;
+    font-size: 0.9rem;
+  }
+</style>

app/components/pages/support/QuestionFilter.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="question-category">
+    <el-row :gutter="12">
+      <el-col :span="12" :xs="12">
+        <span class="select-label">{{
+          $t('product-filter.product-type')
+        }}</span>
+        <el-select
+          v-model="model.selectedProductType"
+          :placeholder="$t('product-filter.select-product-type')"
+          clearable
+        >
+          <el-option
+            v-for="type in productTypeOptions"
+            :key="type.id"
+            :label="type.name"
+            :value="type.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="12" :xs="12">
+        <span class="select-label">{{
+          $t('product-filter.product-model')
+        }}</span>
+        <el-select
+          v-model="model.selectedProduct"
+          :placeholder="$t('product-filter.select-product-model')"
+          clearable
+        >
+          <el-option
+            v-for="product in productOptions"
+            :key="product.id"
+            :label="product.name"
+            :value="product.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="12" :xs="24">
+        <span class="select-label">
+          {{ $t('product-filter.question-type') }}
+        </span>
+        <el-select
+          v-model="model.selectedQuestionType"
+          :placeholder="$t('product-filter.select-question-type')"
+          clearable
+        >
+          <el-option
+            v-for="questionType in questionTypeOptions"
+            :key="questionType.id"
+            :label="questionType.name"
+            :value="questionType.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="12" :xs="24">
+        <span class="select-label">{{ $t('product-filter.keyword') }}</span>
+        <el-input
+          v-model="model.keyword"
+          :placeholder="$t('product-filter.enter-keyword')"
+          clearable
+          :prefix-icon="Search"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Search } from '@element-plus/icons-vue';
+
+  defineProps({
+    productTypeOptions: {
+      type: Array as () => Array<QuestionListProductType>,
+      default: () => [],
+    },
+    productOptions: {
+      type: Array as () => Array<QuestionListProduct>,
+      default: () => [],
+    },
+    questionTypeOptions: {
+      type: Array as () => Array<QuestionTypeView>,
+      default: () => [],
+    },
+  });
+
+  const model = defineModel<{
+    selectedProduct: string | null;
+    selectedProductType: string | null;
+    selectedQuestionType: string | null;
+    keyword: string;
+  }>();
+</script>
+
+<style scoped>
+  .question-category {
+    margin-bottom: 1rem;
+  }
+
+  .select-label {
+    color: var(--el-text-color-secondary);
+    font-size: 0.9rem;
+  }
+
+  :deep(.el-select__wrapper),
+  :deep(.el-input__wrapper) {
+    height: 40px;
+    font-size: 0.9rem;
+  }
+</style>

app/components/pages/support/SupportCard.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-card class="support-card">
+    <el-row>
+      <el-col :span="6">
+        <el-icon class="card-icon" size="80">
+          <component :is="iconComponent" />
+        </el-icon>
+      </el-col>
+      <el-col :span="18">
+        <div class="card-title">
+          <span>{{ title }}</span>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <div class="card-content">
+        <p>{{ description }}</p>
+      </div>
+    </el-row>
+    <el-row>
+      <NuxtLink class="card-link" :to="to">
+        <el-button class="card-button" round>
+          <span>{{ $t('learn-more') }} > </span>
+        </el-button>
+      </NuxtLink>
+    </el-row>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    title: {
+      type: String,
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    to: {
+      type: String,
+      default: '',
+    },
+    iconComponent: {
+      type: Object,
+      default: null,
+    },
+  });
+</script>
+
+<style scoped>
+  .support-card {
+    width: 100%;
+    padding: 20px;
+    box-shadow: none;
+    border-radius: none;
+  }
+
+  .card-icon {
+    color: var(--el-color-primary);
+  }
+
+  .card-title {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin-left: 2rem;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+  }
+
+  .card-link {
+    margin-left: auto;
+  }
+
+  .card-button {
+    cursor: pointer;
+    text-align: center;
+    font-size: 1rem;
+    color: var(--el-color-primary);
+    transition: all 0.3s ease;
+  }
+
+  .el-row {
+    margin-bottom: 20px;
+  }
+
+  .el-row:last-child {
+    margin-bottom: 0;
+  }
+
+  .el-col {
+    border-radius: 4px;
+  }
+</style>

app/components/pages/support/SupportTabs.vue

@@ -0,0 +1,64 @@
+<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: $t('navigation.support'), value: '' },
+    { label: $t('navigation.faq'), value: 'faq' },
+    { label: $t('navigation.documents'), value: 'documents' },
+    { label: $t('navigation.contact-info'), 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>

app/components/shared/AppBreadcrumb.vue

@@ -0,0 +1,21 @@
+<template>
+  <el-breadcrumb separator="/">
+    <el-breadcrumb-item
+      v-for="(item, index) in items"
+      :key="index"
+      class="text-md opacity-50"
+    >
+      <NuxtLink v-if="item.to" :to="item.to">{{ item.label }}</NuxtLink>
+      <span v-else>{{ item.label }}</span>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    items: {
+      type: Array as () => Array<{ label: string; to?: string }>,
+      required: true,
+    },
+  });
+</script>

app/components/shared/DocumentList.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="document-list">
+    <el-card
+      v-for="(doc, index) in documents"
+      :key="index"
+      class="document-card"
+      @click="handleClick(doc.fileId)"
+    >
+      <div class="document-info">
+        <div class="document-title">
+          <h3>
+            {{ doc.title }}
+            <span v-if="showCategory && doc.type" class="document-category">
+              |
+            </span>
+            <span v-if="showCategory && doc.type" class="document-category">
+              {{ doc.type.name }}
+            </span>
+          </h3>
+        </div>
+        <div class="document-content">
+          <span v-if="doc.size" class="document-meta"
+            >{{ $t('document-meta.size') }}: {{ formatFileSize(doc.size) }}
+          </span>
+          <span v-if="doc.filename" class="document-meta"
+            >{{ $t('document-meta.format') }}:
+            {{ formatFileExtension(getFileExtension(doc.filename)) }}</span
+          >
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    documents: {
+      type: Array as () => Array<ProductDocumentView>,
+      default: () => [],
+    },
+    showCategory: {
+      type: Boolean,
+      default: true,
+    },
+  });
+
+  const localePath = useLocalePath();
+
+  const handleClick = (id: string) => {
+    // 获取路由参数
+    if (id) {
+      navigateTo(localePath(`/download/${id}`));
+    }
+  };
+</script>
+
+<style scoped>
+  .document-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+  }
+
+  .document-card {
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .document-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+
+  .document-meta {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+  }
+
+  .document-title {
+    margin-bottom: 0.5rem;
+  }
+
+  .document-category {
+    font-size: 0.75rem;
+    color: var(--el-text-color-secondary);
+  }
+
+  .download-button {
+    margin-left: auto;
+  }
+
+  .document-content {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+</style>

app/components/shared/FilePreviewer.vue

@@ -0,0 +1,179 @@
+<template>
+  <section class="h-screen flex flex-col">
+    <!-- 头部工具栏 -->
+    <header
+      v-if="showToolbar && fileMeta"
+      class="p-3 border-b flex items-center justify-between"
+    >
+      <div class="min-w-0">
+        <h2 class="truncate font-medium" :title="fileMeta.filename_download">
+          {{ fileMeta.filename_download }}
+        </h2>
+        <p class="text-xs text-gray-500">
+          {{ fileMeta.type }} · {{ formatedSize }} · {{ formatedDate }}
+        </p>
+      </div>
+
+      <div class="shrink-0 flex items-center gap-2">
+        <button
+          class="px-3 py-1.5 rounded border hover:bg-gray-50"
+          type="button"
+          :disabled="!fileMeta"
+          @click="openInNewTab"
+        >
+          {{ $t('document-action.open-in-new-tab') }}
+        </button>
+        <button
+          class="px-3 py-1.5 rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
+          type="button"
+          :disabled="!fileMeta"
+          @click="download"
+        >
+          {{ $t('document-action.download') }}
+        </button>
+      </div>
+    </header>
+
+    <div class="flex-1 overflow-hidden">
+      <!-- 加载状态 -->
+      <div v-if="pending" class="h-48 grid place-items-center border rounded">
+        {{ $t('loading') }}
+      </div>
+      <div
+        v-else-if="errorText"
+        class="h-48 grid place-items-center border rounded text-red-600"
+      >
+        {{ errorText }}
+      </div>
+      <!-- 文件预览 -->
+      <ClientOnly v-else>
+        <div
+          v-if="fileMeta && previewable"
+          class="h-full w-full flex justify-center bg-gray-50"
+        >
+          <!-- 图片 -->
+          <el-image
+            v-if="isImage"
+            fit="contain"
+            class="max-w-full max-h-full select-none"
+            :src="src"
+            :alt="fileMeta.title || fileMeta.filename_download"
+          />
+
+          <!-- PDF -->
+          <iframe
+            v-else-if="isPdf"
+            :src="src"
+            title="PDF 预览"
+            class="w-full h-full border-0"
+          />
+
+          <!-- 视频 -->
+          <video
+            v-else-if="isVideo"
+            :src="src"
+            controls
+            class="w-full bg-black"
+          />
+
+          <!-- 文本（简单方式用 iframe；如需代码高亮可改为拉取文本并渲染 <pre>） -->
+          <iframe
+            v-else-if="isText"
+            :src="src"
+            title="文本预览"
+            class="w-full h-full border-0"
+          />
+        </div>
+      </ClientOnly>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  const props = withDefaults(
+    defineProps<{
+      /** 预览的文件 ID */
+      fileId?: string;
+      file?: FileMeta;
+
+      /** 是否显示上方工具栏（文件名、大小、按钮） */
+      showToolbar?: boolean;
+
+      /** 下载 API 基础路径（你的后端流接口），用于“下载”按钮 */
+      downloadApiBase?: string;
+
+      /** 追加到 file.url 的查询（如临时 token），形如 { token: 'xxx' } */
+      extraQuery?: Record<string, string | number | boolean>;
+    }>(),
+    {
+      fileId: undefined,
+      file: undefined,
+      showToolbar: true,
+      downloadApiBase: '/api/download',
+      extraQuery: undefined,
+    }
+  );
+
+  const { data, pending, error } = await useFetch<FileMeta>(
+    () => (props.file ? null : `/api/file/${props.fileId}`),
+    { server: true }
+  );
+
+  const errorText = computed(() => error.value?.message ?? null);
+  const fileMeta = computed(() => props.file ?? data.value ?? null);
+
+  logger.debug('FilePreviewer - fileMeta:', fileMeta.value);
+
+  /** 预览源地址：支持在 file.url 上追加额外 query（如临时 token、inline） */
+  const src = computed<string>(() => {
+    if (!fileMeta.value) return '';
+    const url = new URL(fileMeta.value.url, window?.location?.origin);
+    if (props.extraQuery) {
+      Object.entries(props.extraQuery).forEach(([k, v]) =>
+        url.searchParams.set(k, String(v))
+      );
+    }
+    return url.toString();
+  });
+
+  /** 类型判定 */
+  const isImage = computed(
+    () => fileMeta.value?.type.startsWith('image/') === true
+  );
+  const isPdf = computed(() => fileMeta.value?.type === 'application/pdf');
+  const isVideo = computed(
+    () => fileMeta.value?.type.startsWith('video/') === true
+  );
+  const isText = computed(
+    () => fileMeta.value?.type.startsWith('text/') === true
+  );
+  const previewable = computed(() => fileMeta.value?.previewable === true);
+
+  const formatedSize = computed(() => {
+    const size = fileMeta.value?.filesize ?? 0;
+    return formatFileSize(size);
+  });
+
+  const formatedDate = computed(() => {
+    if (!fileMeta.value?.uploaded_on) return '';
+    return new Date(fileMeta.value.uploaded_on).toLocaleDateString();
+  });
+
+  /** 下载动作：走你自己的流式后端，避免直链暴露（便于权限与统计） */
+  function download(): void {
+    if (!fileMeta.value) return;
+    const id = fileMeta.value.id;
+    const a = document.createElement('a');
+    a.href = `${props.downloadApiBase}/${encodeURIComponent(id)}`;
+    a.download = fileMeta.value.filename_download;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  /** 新标签打开（直接访问直链，适合预览失败时的兜底体验） */
+  function openInNewTab(): void {
+    if (!src.value) return;
+    window.open(src.value, '_blank', 'noopener,noreferrer');
+  }
+</script>

app/components/shared/HtmlRenderer.ts

@@ -0,0 +1,30 @@
+export default defineComponent({
+  name: 'HtmlRenderer',
+
+  props: {
+    html: {
+      type: String,
+      required: true,
+    },
+    map: {
+      type: Object as () => HtmlRenderMap,
+      default: () => defaultHtmlRenderMap,
+    },
+    allowUnknown: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup(props, { attrs }) {
+    const nodes: VNode[] = useHtmlRenderer(props.html, {
+      map: props.map,
+      allowUnknownTags: props.allowUnknown,
+    });
+
+    logger.debug('nodes: ', nodes);
+
+    // 渲染函数：直接返回 VNode 数组
+    return () => h('div', { ...attrs }, nodes);
+  },
+});

app/components/shared/JinshenFooter.vue

@@ -0,0 +1,289 @@
+<template>
+  <footer class="jinshen-footer">
+    <div class="footer-container hide-on-mobile">
+      <!-- Logo 和公司信息 -->
+      <div class="footer-section">
+        <div class="footer-logo">
+          <img src="/jinshen-logo.png" alt="Jinshen Logo" class="logo-image" />
+          <h3>{{ $t('company-name') }}</h3>
+        </div>
+        <p class="company-description">
+          {{ $t('company-description') }}
+        </p>
+      </div>
+
+      <!-- 快速链接 -->
+      <div class="footer-section">
+        <h4>{{ $t('quick-links') }}</h4>
+        <ul class="footer-links">
+          <li>
+            <NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale>
+          </li>
+          <li>
+            <NuxtLink :to="$localePath('/products')">{{
+              $t('navigation.products')
+            }}</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink :to="$localePath('/solutions')">{{
+              $t('navigation.solutions')
+            }}</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink :to="$localePath('/support')">{{
+              $t('navigation.support')
+            }}</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink :to="$localePath('/about')">{{
+              $t('navigation.about-us')
+            }}</NuxtLink>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 实用工具 -->
+      <div class="footer-section">
+        <h4>{{ $t('utilities') }}</h4>
+        <ul class="footer-links">
+          <li>
+            <a
+              href="http://cal.jinshen.cn"
+              target="_blank"
+              rel="noopener noreferer"
+            >
+              {{ $t('navigation.calculator') }}
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 联系信息 -->
+      <div class="footer-section">
+        <h4>{{ $t('contact-info') }}</h4>
+        <div class="contact-item">
+          <el-icon><Phone /></el-icon>
+          <span>{{ $t('telephone') }}: 0573-88187988</span>
+        </div>
+        <div class="contact-item">
+          <el-icon><Message /></el-icon>
+          <span>{{ $t('email') }}: jinshen@wzjinshen.com</span>
+        </div>
+        <div class="contact-item">
+          <el-icon><Location /></el-icon>
+          <span>{{ $t('address') }}: {{ $t('company-address') }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 版权信息 -->
+    <div class="footer-bottom">
+      <div class="footer-container">
+        <div class="copyright">
+          <p>
+            &copy; {{ currentYear }} {{ $t('company-name') }}.
+            {{ $t('all-rights-reserved') }}
+          </p>
+          <p>
+            备案号:
+            <a href="https://beian.miit.gov.cn/" target="_blank"
+              >浙ICP备12003709号-5</a
+            >
+          </p>
+        </div>
+        <!-- <div class="footer-links-bottom"> -->
+        <!--   <NuxtLink :to="$localePath('/privacy')">{{ -->
+        <!--     $t('privacy-policy') -->
+        <!--   }}</NuxtLink> -->
+        <!--   <span class="separator">|</span> -->
+        <!--   <NuxtLink :to="$localePath('/terms')">{{ -->
+        <!--     $t('terms-of-service') -->
+        <!--   }}</NuxtLink> -->
+        <!--   <span class="separator">|</span> -->
+        <!--   <NuxtLink :to="$localePath('/sitemap')">{{ $t('sitemap') }}</NuxtLink> -->
+        <!-- </div> -->
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+  import { Phone, Message, Location } from '@element-plus/icons-vue';
+
+  const currentYear = new Date().getFullYear();
+</script>
+
+<style scoped>
+  .jinshen-footer {
+    background: var(--el-bg-color-page);
+    border-top: 1px solid var(--el-border-color);
+    margin-top: auto;
+  }
+
+  .footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+  }
+
+  .footer-section h3,
+  .footer-section h4 {
+    color: var(--el-text-color-primary);
+    margin-bottom: 1rem;
+    font-weight: 600;
+  }
+
+  .footer-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  .logo-image {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+  }
+
+  .company-description {
+    color: var(--el-text-color-regular);
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .footer-links {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .footer-links li {
+    margin-bottom: 0.5rem;
+  }
+
+  .footer-links a {
+    color: var(--el-text-color-regular);
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+
+  .footer-links a:hover {
+    color: var(--el-color-primary);
+  }
+
+  .contact-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    color: var(--el-text-color-regular);
+  }
+
+  .contact-item .el-icon {
+    color: var(--el-color-primary);
+  }
+
+  .social-links {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .social-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: var(--el-fill-color-light);
+    border-radius: 50%;
+    color: var(--el-text-color-regular);
+    text-decoration: none;
+    transition: all 0.3s ease;
+  }
+
+  .social-link:hover {
+    background: var(--el-color-primary);
+    color: white;
+    transform: translateY(-2px);
+  }
+
+  .footer-bottom {
+    background: var(--el-fill-color-light);
+    border-top: 1px solid var(--el-border-color-lighter);
+    padding: 1rem 0;
+  }
+
+  .footer-bottom .footer-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1rem;
+    grid-template-columns: none;
+    gap: 1rem;
+  }
+
+  .copyright p {
+    margin: 0;
+    color: var(--el-text-color-regular);
+    font-size: 0.875rem;
+  }
+
+  .footer-links-bottom {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .footer-links-bottom a {
+    color: var(--el-text-color-regular);
+    text-decoration: none;
+    font-size: 0.875rem;
+    transition: color 0.3s ease;
+  }
+
+  .footer-links-bottom a:hover {
+    color: var(--el-color-primary);
+  }
+
+  .separator {
+    color: var(--el-text-color-placeholder);
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 768px) {
+    .hide-on-mobile {
+      display: none;
+    }
+
+    .footer-container {
+      grid-template-columns: 1fr;
+      padding: 1.5rem 1rem;
+    }
+
+    .footer-bottom .footer-container {
+      flex-direction: column;
+      text-align: center;
+      gap: 1rem;
+    }
+
+    .footer-links-bottom {
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+
+  /* 暗色模式适配 */
+  @media (prefers-color-scheme: dark) {
+    .jinshen-footer {
+      background: var(--el-bg-color-page);
+    }
+
+    .footer-bottom {
+      background: var(--el-fill-color-darker);
+    }
+  }
+</style>

app/components/shared/JinshenHeader.vue

@@ -0,0 +1,350 @@
+<template>
+  <header class="header-container">
+    <!-- Logo -->
+    <div class="logo-section">
+      <NuxtLink :to="$localePath('/')" class="logo-link">
+        <el-image
+          class="website-logo"
+          src="/jinshen-logo.png"
+          alt="Jinshen Logo"
+          fit="contain"
+        />
+      </NuxtLink>
+    </div>
+
+    <!-- 桌面菜单 -->
+    <div class="header-menu-section">
+      <!-- 导航菜单 -->
+      <el-menu
+        :default-active="activeName"
+        class="header-menu"
+        mode="horizontal"
+        :ellipsis="false"
+        :persistent="false"
+        router
+      >
+        <el-menu-item index="products" :route="$localePath('/products')">
+          <span class="title">{{ $t('navigation.products') }}</span>
+        </el-menu-item>
+        <el-menu-item index="solutions" :route="$localePath('/solutions')">
+          <span class="title">{{ $t('navigation.solutions') }}</span>
+        </el-menu-item>
+        <el-menu-item index="support" :route="$localePath('/support')">
+          <span class="title">{{ $t('navigation.support') }}</span>
+        </el-menu-item>
+        <el-menu-item index="about" :route="$localePath('/about')">
+          <span class="title">{{ $t('navigation.about-us') }}</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+
+    <!-- 右侧功能区 -->
+    <div class="header-actions">
+      <el-link
+        class="search-link"
+        :underline="false"
+        type="info"
+        @click="navigateTo(localePath('/search'))"
+      >
+        <el-icon class="mdi mdi-magnify action-icon" />
+      </el-link>
+
+      <el-link
+        class="hide-on-mobile"
+        type="info"
+        :underline="false"
+        href="http://cal.jinshen.cn"
+        target="_blank"
+      >
+        <el-icon class="mdi mdi-calculator action-icon" />
+      </el-link>
+
+      <el-dropdown class="hide-on-mobile" @command="setLocale">
+        <el-link type="info" :underline="false">
+          <el-icon class="mdi mdi-translate action-icon" />
+        </el-link>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="zh">简体中文</el-dropdown-item>
+            <el-dropdown-item command="en">English</el-dropdown-item>
+            <el-dropdown-item command="es"
+              >Español(Machine Translate)</el-dropdown-item
+            >
+            <el-dropdown-item command="ru"
+              >Русский(Machine Translate)</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+
+      <!-- 汉堡按钮（仅移动端显示） -->
+      <el-link type="info" :underline="false">
+        <el-icon
+          class="mdi mdi-menu mobile-menu-button"
+          @click="mobileMenuVisible = true"
+        />
+      </el-link>
+
+      <!-- Drawer 抽屉菜单 -->
+      <client-only>
+        <el-drawer
+          v-model="mobileMenuVisible"
+          class="mobile-drawer"
+          direction="rtl"
+          size="70%"
+        >
+          <template #header>
+            <div class="drawer-header">
+              <h1>{{ $t('mobile-menu.title') }}</h1>
+            </div>
+          </template>
+          <div>
+            <h2>{{ $t('mobile-menu.navigation') }}</h2>
+            <el-menu
+              :default-active="activeName"
+              class="mobile-menu"
+              mode="vertical"
+              router
+              @select="mobileMenuVisible = false"
+            >
+              <el-menu-item index="products" :route="$localePath('/products')">
+                {{ $t('navigation.products') }}
+              </el-menu-item>
+              <el-menu-item
+                index="solutions"
+                :route="$localePath('/solutions')"
+              >
+                {{ $t('navigation.solutions') }}
+              </el-menu-item>
+              <el-menu-item index="support" :route="$localePath('/support')">
+                {{ $t('navigation.support') }}
+              </el-menu-item>
+              <el-menu-item index="about" :route="$localePath('/about')">
+                {{ $t('navigation.about-us') }}
+              </el-menu-item>
+            </el-menu>
+
+            <h2>{{ $t('mobile-menu.utilities') }}</h2>
+            <el-menu
+              :default-active="activeName"
+              class="mobile-menu"
+              mode="vertical"
+              @select="mobileMenuVisible = false"
+            >
+              <el-menu-item @click="openExternalLink('http://cal.jinshen.cn')">
+                {{ $t('navigation.calculator') }}
+              </el-menu-item>
+            </el-menu>
+          </div>
+
+          <template #footer>
+            <el-dropdown @command="setLocale">
+              <el-link type="info" :underline="false">
+                <el-icon class="mdi mdi-translate mobile-menu-button" />
+              </el-link>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="zh">简体中文</el-dropdown-item>
+                  <el-dropdown-item command="en">English</el-dropdown-item>
+                  <el-dropdown-item command="es"
+                    >Español(Machine Translate)</el-dropdown-item
+                  >
+                  <el-dropdown-item command="ru"
+                    >Русский(Machine Translate)</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </el-drawer>
+      </client-only>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+  const router = useRouter();
+  const localePath = useLocalePath();
+
+  const { setLocale } = useI18n();
+
+  const activeName = ref<string | undefined>(undefined);
+  const mobileMenuVisible = ref(false);
+
+  const refreshMenu = () => {
+    const path = router.currentRoute.value.path;
+    if (path.startsWith('/products')) {
+      activeName.value = 'products';
+    } else if (path.startsWith('/solutions')) {
+      activeName.value = 'solutions';
+    } else if (path.startsWith('/support')) {
+      activeName.value = 'support';
+    } else if (path.startsWith('/about')) {
+      activeName.value = 'about';
+    } else {
+      activeName.value = undefined; // 默认不激活任何菜单项
+    }
+  };
+
+  const openExternalLink = (url: string) => {
+    window.open(url, '_blank');
+  };
+
+  onMounted(() => {
+    refreshMenu();
+    // 监听路由变化以更新激活状态
+    router.afterEach(() => {
+      refreshMenu();
+    });
+  });
+</script>
+
+<style scoped>
+  .header-container {
+    display: flex;
+    align-items: center;
+    height: 80px;
+    padding: 0 20px;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .logo-section {
+    display: flex;
+    flex: 1;
+    margin-left: 20px;
+  }
+
+  .logo-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+  }
+
+  .website-logo {
+    height: 64px;
+    width: auto;
+  }
+
+  .header-menu-section {
+    flex: 2;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .header-menu {
+    margin-right: 40px;
+    border-bottom: none !important;
+    width: auto;
+    --el-menu-horizontal-height: 100%;
+  }
+
+  .header-menu .el-menu-item {
+    font-size: 16px;
+    background-color: transparent !important;
+  }
+
+  .header-menu .el-menu-item.is-active {
+    border-bottom: 2.5px solid var(--el-color-primary-dark-2);
+    color: var(--el-color-primary);
+  }
+
+  .header-menu .el-menu-item:hover {
+    border-bottom: 2.5px solid var(--el-color-primary);
+  }
+
+  .header-actions {
+    flex: 1;
+    justify-content: flex-end;
+    display: flex;
+    gap: 16px;
+  }
+
+  .action-icon {
+    font-size: 24px;
+  }
+
+  .mobile-menu-button {
+    display: none; /* 默认隐藏汉堡按钮 */
+  }
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :deep(.el-drawer__header) {
+    margin-bottom: 0;
+  }
+
+  :deep(.el-drawer__body) {
+    padding: 20px;
+  }
+
+  .mobile-drawer h1 {
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .mobile-drawer h2 {
+    font-size: 20px;
+    margin-bottom: 16px;
+    font-weight: bold;
+  }
+
+  .mobile-menu {
+    border: none;
+    margin-bottom: 24px;
+  }
+
+  .mobile-menu .el-menu-item {
+    font-size: 16px;
+    background-color: transparent !important;
+  }
+
+  .mobile-menu .el-menu-item.is-active {
+    color: var(--el-color-primary);
+  }
+
+  .mobile-menu .el-menu-item:hover {
+    color: var(--el-color-primary);
+  }
+
+  @media (max-width: 1024px) {
+    .header-container {
+      height: 70px;
+      padding: 0 16px;
+    }
+
+    .website-logo {
+      height: 48px;
+    }
+
+    .header-menu-section .header-menu .el-menu-item {
+      font-size: 14px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .header-menu-section {
+      display: none; /* 隐藏横向菜单 */
+    }
+
+    .hide-on-mobile {
+      display: none; /* 隐藏部分图标 */
+    }
+
+    .header-actions {
+      gap: 12px;
+    }
+
+    .mobile-menu-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      cursor: pointer;
+    }
+  }
+</style>

app/components/shared/MarkdownRenderer.vue

@@ -0,0 +1,104 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <!-- 用 v-html 渲染解析后的 HTML -->
+  <div ref="container" class="markdown-body" v-html="safeHtml" />
+</template>
+
+<script setup lang="ts">
+  import { createApp } from 'vue';
+  import MarkdownTable from './MarkdownTable.vue';
+  interface Props {
+    content: string;
+  }
+
+  const props = defineProps<Props>();
+
+  // 将 Markdown 转换成 HTML
+  const safeHtml = computed(() => renderMarkdown(props.content));
+
+  const container = ref<HTMLElement | null>(null);
+
+  onMounted(async () => {
+    await nextTick();
+    if (!safeHtml.value) return;
+
+    // 查找所有 table
+    const tables = container.value.querySelectorAll('table');
+    tables.forEach((table) => {
+      // 1. 提取表头
+      const headers = Array.from(table.querySelectorAll('thead th')).map(
+        (th) => th.textContent?.trim() ?? ''
+      );
+
+      // 2. 提取行数据
+      const rows = Array.from(table.querySelectorAll('tbody tr')).map((tr) => {
+        const cells = Array.from(tr.querySelectorAll('td')).map(
+          (td) => td.textContent?.trim() ?? ''
+        );
+        const obj: Record<string, string> = {};
+        headers.forEach((h, i) => {
+          obj[h] = cells[i];
+        });
+        return obj;
+      });
+
+      // 3. 创建 Vue 子应用，把原生 table 替换成 <md-table>
+      const mountPoint = document.createElement('div');
+      table.replaceWith(mountPoint);
+
+      const app = createApp(MarkdownTable, { headers, rows });
+      app.mount(mountPoint);
+    });
+  });
+</script>
+
+<style>
+  .markdown-body {
+    padding: 10px;
+    line-height: 1.6;
+  }
+
+  .markdown-body h1 {
+    color: var(--el-color-primary);
+    font-size: 1.5em;
+    margin-bottom: 0.5em;
+    text-align: center;
+  }
+
+  .markdown-body h2 {
+    color: var(--el-color-primary);
+    font-size: 1.5em;
+    margin-bottom: 0.5em;
+  }
+
+  .markdown-body h3 {
+    color: var(--el-color-primary);
+    font-size: 1.2em;
+    margin-bottom: 0.5em;
+  }
+
+  .markdown-body p {
+    text-indent: 2em;
+    text-align: justify;
+    margin: 0.5em 0;
+    margin-bottom: 1em;
+  }
+
+  .markdown-body ol {
+    list-style-type: decimal;
+    padding-left: 2em;
+    margin-bottom: 1em;
+  }
+
+  .markdown-body ul {
+    list-style-type: disc;
+    padding-left: 2em;
+    margin-bottom: 1em;
+  }
+
+  .markdown-body hr {
+    border: none;
+    border-top: 1px solid var(--el-border-color);
+    margin: 20px 0;
+  }
+</style>

app/components/shared/MarkdownTable.vue

@@ -0,0 +1,12 @@
+<template>
+  <el-table :data="rows" border>
+    <el-table-column v-for="h in headers" :key="h" :prop="h" :label="h" />
+  </el-table>
+</template>
+
+<script setup lang="ts">
+  defineProps<{
+    headers: string[];
+    rows: Record<string, string>[];
+  }>();
+</script>

app/components/shared/NotFoundResult.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-result icon="warning" :title="title" :sub-title="subTitle">
+    <template #extra>
+      <el-button type="primary" @click="onBack">
+        {{ backText || $t('back') }}
+      </el-button>
+    </template>
+  </el-result>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    title: {
+      type: String,
+      required: true,
+    },
+    subTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    backText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    onBack: {
+      type: Function as () => unknown,
+      required: false,
+      default: undefined,
+    },
+  });
+</script>

app/components/shared/ProductCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-card class="product-card" @click="handleClick">
+    <template #header>
+      <!-- Image -->
+      <el-image class="product-image" :src="imageUrl" fit="contain" />
+    </template>
+
+    <div class="card-body">
+      <!-- Name -->
+      <div class="text-center">
+        <span class="product-name">{{ name }}</span>
+      </div>
+      <!-- Description -->
+      <div class="card-description text-left opacity-25">{{ description }}</div>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    name: string;
+    description: string;
+    imageUrl: string;
+    id?: string | number;
+    slug?: string;
+  }
+
+  const props = defineProps<Props>();
+  const localePath = useLocalePath();
+
+  const handleClick = () => {
+    // 优先使用 slug，如果没有则使用 id
+    const routeParam = props.slug || props.id;
+    if (routeParam) {
+      navigateTo(localePath(`/products/${routeParam}`));
+    }
+  };
+</script>
+
+<style scoped>
+  .product-card {
+    width: 30%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+  }
+
+  .product-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+
+  .product-name {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .card-description {
+    font-size: 0.8rem;
+    margin-top: 5px;
+  }
+
+  .product-card .el-image {
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    border-radius: 4px;
+  }
+
+  .card-body {
+    margin: 10px auto;
+    padding: 0px auto;
+    height: 100px;
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 1200px) {
+    .product-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .product-card {
+      width: 90%;
+    }
+  }
+</style>

app/components/shared/QuestionList.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="question-list">
+    <el-collapse v-model="activeNames" class="question-collapse">
+      <el-collapse-item
+        v-for="question in questions"
+        :id="`q-${question.id}`"
+        :key="question.id"
+        :title="question.title"
+        :name="question.id"
+      >
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div class="html-typography" v-html="question.content || ''" />
+        <!-- <div v-if="!hydrated" v-html="question.content" /> -->
+        <!-- <div v-else> -->
+        <!--   <html-renderer -->
+        <!--     class="html-typography" -->
+        <!--     :html="question.content || ''" -->
+        <!--   /> -->
+        <!-- </div> -->
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    questions: {
+      type: Array as PropType<ProductQuestionView[]>,
+      default: () => [],
+    },
+  });
+  const route = useRoute();
+
+  const activeNames = ref<(string | number)[]>([]);
+
+  const hydrated = ref(false);
+
+  // 当路由变化（包括初次挂载）时，检查是否需要聚焦
+  watch(
+    () => route.query.focus,
+    async (focusId) => {
+      if (!focusId) return;
+      if (!import.meta.client) return;
+
+      // 确保渲染完成后再操作 DOM
+      await nextTick();
+
+      const target = props.questions.find((q) => q.id === focusId);
+      if (!target) return;
+
+      // 展开目标项
+      activeNames.value = [target.id];
+
+      await nextTick();
+      await new Promise((resolve) => setTimeout(resolve, 100)); // 等待动画完成
+
+      // 平滑滚动到对应位置
+      // const el = document.querySelector(`#q-${target.id}`);
+      // el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      setTimeout(() => {
+        const el = document.querySelector(`#q-${target.id}`);
+        el?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+        });
+      }, 200); // 与 el-collapse 的 transition 时间匹配
+    },
+    { immediate: true }
+  );
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
+</script>
+
+<style scoped>
+  .question-list {
+    width: 100%;
+  }
+
+  .question-collapse {
+    border: none;
+  }
+
+  .question-collapse :deep(.el-collapse-item) {
+    margin-bottom: 1rem;
+    border-radius: 8px;
+  }
+
+  .question-collapse :deep(.el-collapse-item__header) {
+    font-size: 1rem;
+    padding: 1rem;
+    border-radius: 8px;
+    background-color: #f5f7fa;
+
+    transition: all 0.3s ease;
+
+    &.is-active {
+      background-color: #e1e6eb;
+      color: var(--el-color-primary);
+    }
+  }
+
+  .question-collapse :deep(.el-collapse-item__wrap) {
+    border: none;
+  }
+
+  .question-collapse :deep(.el-collapse-item__content) {
+    padding: 1rem;
+    font-size: 0.9rem;
+  }
+</style>

app/components/shared/SolutionCard.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-card
+    class="solution-card"
+    body-class="card-body"
+    header-class="card-header"
+    @click="handleClick"
+  >
+    <template #header>
+      <!-- Cover Image -->
+      <el-image class="solution-cover" :src="coverUrl" fit="cover" />
+    </template>
+    <!-- Title -->
+    <template #default>
+      <div class="text-center mx-auto text-md">
+        <span class="solution-title">{{ title }}</span>
+      </div>
+      <!-- Summary -->
+      <div class="mx-auto mt-5 text-left text-sm opacity-25">{{ summary }}</div>
+    </template>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    title: string;
+    summary: string;
+    coverUrl: string;
+    documentId?: string;
+  }
+
+  const props = defineProps<Props>();
+  const localePath = useLocalePath();
+
+  const handleClick = () => {
+    const routeParam = props.documentId;
+    if (routeParam) {
+      navigateTo(localePath(`/solutions/${routeParam}`));
+    }
+  };
+</script>
+
+<style scoped>
+  .solution-card {
+    width: 30%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+  }
+
+  .solution-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+
+  .solution-title {
+    font-weight: 600;
+  }
+
+  :deep(.card-header) {
+    padding: 0;
+    border-bottom: none !important;
+  }
+
+  :deep(.card-body) {
+    margin: 10px auto;
+    padding: 1px auto;
+  }
+
+  .solution-card .el-image {
+    width: 100%;
+    aspect-ratio: 16 / 10;
+  }
+
+  @media (max-width: 1200px) {
+    .solution-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .solution-card {
+      width: 90%;
+      margin: 10px auto;
+    }
+  }
+</style>

app/composables/directus/index.ts

@@ -0,0 +1,11 @@
+export * from './useDirectusImage';
+export * from './useDirectusFiles';
+export * from './useProductList';
+export * from './useProduct';
+export * from './useSolutionList';
+export * from './useSolution';
+export * from './useQuestionList';
+export * from './useDocumentList';
+export * from './useContactInfo';
+export * from './useCompanyProfile';
+export * from './useHomepage';

app/composables/directus/useCompanyProfile.ts

@@ -0,0 +1,17 @@
+export const useCompanyProfile = () => {
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`company-profile-${locale}`, async () => {
+    try {
+      const data = await $fetch(`/api/cms/companyProfile`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching company profile: ', error);
+      throw error;
+    }
+  });
+};

app/composables/directus/useContactInfo.ts

@@ -0,0 +1,17 @@
+export const useContactInfo = () => {
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`contact-info-${locale}`, async () => {
+    try {
+      const data = await $fetch('/api/cms/contactInfo', {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching contact info: ', error);
+      throw error;
+    }
+  });
+};

app/composables/directus/useDirectusFiles.ts

@@ -0,0 +1,17 @@
+export const useDirectusFiles = () => {
+  const getFileUrl = (
+    id?: string | null,
+    options?: Record<string, string | number | boolean>
+  ): string => {
+    if (!id) return '';
+
+    const params = new URLSearchParams(
+      options as Record<string, string>
+    ).toString();
+    return `/api/assets/${id}${params ? `?${params}` : ''}`;
+  };
+
+  return {
+    getFileUrl,
+  };
+};

app/composables/directus/useDirectusImage.ts

@@ -0,0 +1,20 @@
+export const useDirectusImage = () => {
+  type DirectusAssetParams = {
+    width?: number;
+    height?: number;
+    fit?: 'cover' | 'contain' | 'inside' | 'outside';
+    quality?: number;
+    format?: 'webp' | 'jpg' | 'png' | 'auto';
+  } & Record<string, string | number | boolean>;
+
+  const getImageUrl = (id?: string | null, options?: DirectusAssetParams) => {
+    if (!id) return '';
+
+    const params = new URLSearchParams(
+      options as Record<string, string>
+    ).toString();
+    return `/api/assets/${id}${params ? `?${params}` : ''}`;
+  };
+
+  return { getImageUrl };
+};

app/composables/directus/useDocumentList.ts

@@ -0,0 +1,17 @@
+export const useDocumentList = () => {
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`document-list-${locale}`, async () => {
+    try {
+      const data = $fetch(`/api/cms/documentList`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching document list:', error);
+      throw error;
+    }
+  });
+};

app/composables/directus/useHomepage.ts

@@ -0,0 +1,17 @@
+export const useHomepage = () => {
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`homepage-${locale}`, async () => {
+    try {
+      const data = $fetch(`/api/cms/homepage`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching homepage:', error);
+      throw error;
+    }
+  });
+};

app/composables/directus/useProduct.ts

@@ -0,0 +1,17 @@
+export const useProduct = (id: string) => {
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`product-${id}-${locale}`, async () => {
+    try {
+      const data = await $fetch(`/api/cms/product/${id}`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching product: ', error);
+      throw error;
+    }
+  });
+};

app/composables/directus/useProductList.ts

@@ -0,0 +1,17 @@
+export const useProductList = () => {
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`product-list-${locale}`, async () => {
+    try {
+      const data = await $fetch(`/api/cms/productList`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching product list: ', error);
+      throw error;
+    }
+  });
+};

app/composables/directus/useQuestionList.ts

@@ -0,0 +1,17 @@
+export const useQuestionList = () => {
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`question-list-${locale}`, async () => {
+    try {
+      const data = $fetch(`/api/cms/questionList`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching question list:', error);
+      throw error;
+    }
+  });
+};

app/composables/directus/useSolution.ts

@@ -0,0 +1,17 @@
+export const useSolution = (id: string) => {
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`solution-${id}-${locale}`, async () => {
+    try {
+      const data = await $fetch(`/api/cms/solution/${id}`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching solution: ', error);
+      throw error;
+    }
+  });
+};

app/composables/directus/useSolutionList.ts

@@ -0,0 +1,17 @@
+export const useSolutionList = () => {
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`solution-list-${locale}`, async () => {
+    try {
+      const data = $fetch(`/api/cms/solutionList`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching solution list:', error);
+      throw error;
+    }
+  });
+};

app/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './directus';
+export * from './useLocalizations';

app/composables/useHtmlRenderer.ts

@@ -0,0 +1,80 @@
+import { h, type VNode } from 'vue';
+import { parseDocument } from 'htmlparser2';
+import type { Element, Text, Node } from 'domhandler';
+
+/** 标签映射的类型：key=标签名，value=渲染函数 */
+export type HtmlRenderMap = Record<
+  string,
+  (node: Element, children: VNode[]) => VNode
+>;
+
+export interface HtmlRenderOptions {
+  /** 自定义标签渲染映射 */
+  map?: HtmlRenderMap;
+
+  /** 默认是否将未知标签渲染为原生标签（默认 true） */
+  allowUnknownTags?: boolean;
+}
+
+export const useHtmlRenderer = (
+  html: string,
+  options: HtmlRenderOptions = {}
+) => {
+  const { map = {}, allowUnknownTags = true } = options;
+
+  const doc = parseDocument(html);
+
+  function render(node: Node): VNode | string | null {
+    // 文本节点
+    if (node.type === 'text') {
+      const textNode = node as Text;
+      const content = textNode.data;
+
+      // ❗忽略"纯空白" 文本(换行、空格)
+      if (!content || /^\s+$/.test(content)) {
+        return null;
+      }
+
+      return content;
+    }
+
+    // 标签节点
+    if (node.type === 'tag') {
+      const elem = node as Element;
+      const rawName = elem.name ?? '';
+      const name = rawName.trim().toLowerCase();
+
+      // 标签名有效性校验
+      const isValidTag = /^[a-zA-Z][a-zA-Z0-9-]*$/.test(name);
+      if (!isValidTag) {
+        logger.warn(`Invalid tag name ignored: "${rawName}"`);
+        return null;
+      }
+
+      const children: VNode[] = (elem.children || [])
+        .map((child) => render(child))
+        .filter(Boolean) as VNode[];
+
+      // 自定义映射
+      if (map[name]) {
+        return map[name](elem, children);
+      }
+
+      // 默认将未知标签渲染为原生标签
+      if (allowUnknownTags) {
+        return h(name, elem.attribs || {}, children);
+      }
+
+      // 忽略无法渲染节点
+      return null;
+    }
+
+    return null;
+  }
+
+  const nodes = doc.children
+    .map((child) => render(child))
+    .filter(Boolean) as VNode[];
+
+  return nodes;
+};

app/composables/useLocalizations.ts

@@ -1,39 +1,99 @@
-import type { StrapiLocale } from '@nuxtjs/strapi';
 import type { Language as ElementLanguage } from 'element-plus/es/locale';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import en from 'element-plus/es/locale/lang/en';
+import es from 'element-plus/es/locale/lang/es';
+import ru from 'element-plus/es/locale/lang/ru';
 
-// Strapi本地化映射
+/**
-export const strapiLocales: Record<string, StrapiLocale> = {
+ * 应用语言映射结构
-    'zh': 'zh-Hans',
+ * 用于统一 Strapi / Directus / Element Plus 的多语言配置
-    'en': 'en'
+ */
+export interface LocaleMapping {
+  /** 用于Directus translations.languages_code **/
+  directus: string;
+  /** Element Plus语言对象 **/
+  element: ElementLanguage;
 }
 
-// Element Plus本地化映射
+/**
-export const elementPlusLocales: Record<string, ElementLanguage> = {
+ * 应用支持的语言映射表。
-    'zh': zhCn,
+ *
-    'en': en
+ * 每个键（如 "zh"、"en"）对应一套统一的本地化配置，
-}
+ * 方便在 Strapi / Directus / Element Plus 三方系统间保持一致。
+ */
+export const localeMap = {
+  zh: {
+    directus: 'zh-CN',
+    element: zhCn,
+  },
+  en: {
+    directus: 'en-US',
+    element: en,
+  },
+  es: {
+    directus: 'es-ES',
+    element: es,
+  },
+  ru: {
+    directus: 'ru-RU',
+    element: ru,
+  },
+} satisfies Record<string, LocaleMapping>;
 
+/** 应用支持的语言键类型 **/
+export type AppLocale = keyof typeof localeMap;
+
+/** 默认语言， 当找不到匹配语言时回退到默认语言 **/
+const defaultLocale: AppLocale = 'zh';
+
+/**
+ * 提供 Strapi、 Directus 与 Element Plus的国际化映射工具
+ *
+ * ---
+ *  @example
+ *  ``` ts
+ * const { locale, getStrapiLocale, getElementPlusLocale } = useLocalizations()
+ *
+ * const strapiLang = getStrapiLocale()          // 当前 Strapi 语言码
+ * const elLocale = getElementPlusLocale('en')   // 获取 Element Plus 英文对象
+ * const all = getLocaleMapping('zh')            // 获取完整映射结构
+ *  ```
+ *  ---
+ *
+ *  @returns 返回当前语言及各系统的本地化获取方法
+ */
 export const useLocalizations = () => {
-    const { locale } = useI18n();
+  const { locale } = useI18n<{ locale: Ref<AppLocale> }>();
 
-    // 获取Strapi本地化代码
+  /**
-    const getStrapiLocale = (nuxtLocale?: string): StrapiLocale => {
+   * 获取对应语言的完整映射结构
-        const currentLocale = nuxtLocale || locale.value;
+   *
-        return strapiLocales[currentLocale] || 'zh-Hans';
+   * @param nuxtLocale - 可选的语言码参数，若提供则使用该语言码，否则使用当前应用语言
-    }
+   * @returns 返回当前语言的完整映射对象
-
+   */
-    // 获取Element Plus本地化
+  const getMapping = (nuxtLocale?: AppLocale): LocaleMapping => {
-    const getElementPlusLocale = (nuxtLocale?: string) => {
+    const current = nuxtLocale || locale.value;
-        const currentLocale = nuxtLocale || locale.value;
+    return localeMap[current] || localeMap[defaultLocale];
-        const elementPlusLocale = elementPlusLocales[currentLocale] || elementPlusLocales['zh'];
+  };
-        return elementPlusLocale;
-    }
 
   return {
+    /** 当前Nuxt I18n语言(只读) **/
     locale: readonly(locale),
-        getStrapiLocale,
+    /** 获取Directus的本地化代码 **/
-        getElementPlusLocale,
+    getDirectusLocale: (l?: AppLocale) => getMapping(l).directus,
-    }
+    /** 获取Element Plus语言对象 **/
-}
+    getElementPlusLocale: (l?: AppLocale) => getMapping(l).element,
+    /**
+     * 获取完整的语言映射结构(Strapi / Directus / Element Plus)
+     *
+     * @param l: 指定语言，默认为当前locale
+     * @returns 语言映射对象
+     */
+    getLocaleMapping: getMapping,
+
+    /** 所有可用的Directus语言代码列表(只读) **/
+    availableDirectusLocales: readonly(
+      Object.values(localeMap).map((item) => item.directus)
+    ),
+  };
+};

app/composables/usePageSeo.ts

@@ -0,0 +1,47 @@
+/**
+ * 设置页面级 SEO 元数据（包含 title、description、OG/Twitter 等常用字段）。
+ *
+ * 该函数基于 `useSeoMeta` 封装，可用于 Nuxt 3 / Nuxt 4
+ * 配合 SSR/CSR 动态更新，可安全用于异步数据场景（如 CMS 内容页）。
+ *
+ * @param {Object} meta - 页面 SEO 配置对象
+ * @param {string} meta.title - 页面标题（会同时应用到 title / og:title）
+ * @param {string} [meta.description] - 页面描述（会应用到 description / og:description）
+ * @param {string} [meta.image] - 用于分享卡片的预览图（og:image / twitter:image）
+ *
+ * @example
+ * // 用于普通页面
+ * usePageSeo({
+ *   title: '产品中心 - 金申机械',
+ *   description: '查看全系列纸管机械产品',
+ *   image: '/images/og/products.png'
+ * })
+ *
+ * @example
+ * // 用于动态内容（如产品详情页）
+ * const product = await fetchProduct()
+ * usePageSeo({
+ *   title: product.name,
+ *   description: product.summary,
+ *   image: product.coverImage
+ * })
+ *
+ * @remarks
+ * - 自动生成以下 meta：`title`, `description`, `og:title`, `og:description`, `og:image`, `twitter:card`
+ * - 默认使用 `summary_large_image` 作为 Twitter 卡片类型
+ * - 推荐与 `useHead()` 配合增加 canonical / alternate hreflang 等额外 SEO 标签
+ */
+export function usePageSeo(meta: {
+  title: string;
+  description?: string;
+  image?: string;
+}) {
+  useSeoMeta({
+    title: meta.title,
+    ogTitle: meta.title,
+    description: meta.description,
+    ogDescription: meta.description,
+    ogImage: meta.image,
+    twitterCard: 'summary_large_image',
+  });
+}

app/layouts/default.vue

@@ -1,35 +1,48 @@
 <template>
   <el-container class="app-container">
-        <el-header class="page-header">
+    <el-header height="auto" class="page-header">
       <jinshen-header />
     </el-header>
     <el-main class="main-content">
       <slot />
     </el-main>
-        <el-footer class="page-footer">
+    <el-footer height="auto" class="page-footer">
       <jinshen-footer />
     </el-footer>
   </el-container>
 </template>
 
+<script setup lang="ts">
+  const { t } = useI18n();
+
+  useHead(() => {
+    const siteTitle = t('company-name');
+    return {
+      titleTemplate: (title) => (title ? `${title} - ${siteTitle}` : siteTitle),
+    };
+  });
+</script>
+
 <style scoped>
-.app-container {
+  .app-container {
     display: flex;
     flex-direction: column;
-}
+    min-height: 100vh;
+    padding: 0;
+  }
 
-.page-header {
+  .page-header {
     padding: 0px;
-}
+    margin-bottom: auto;
+  }
 
-.main-content {
+  .main-content {
     flex: 1;
-    padding: 20px;
+    padding: 0;
-    flex-direction: column;
+    overflow-y: auto;
-}
+  }
 
-.page-footer {
+  .page-footer {
     padding: 0px;
-}
+  }
-
 </style>

app/layouts/preview.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const { t } = useI18n();
+
+  useHead(() => {
+    const siteTitle = `${$t('page-title.preview')} - ${t('company-name')}`;
+    return {
+      title: siteTitle,
+    };
+  });
+</script>

app/pages/[...all].vue

@@ -1,17 +1,10 @@
 <template>
-<main p="x4 y10" text="center teal-700 dark:gray-200">
+  <main p="x4 y10" text="center teal-700 dark:gray-200">
-    <div text4xl>
+    <not-found-result
-        <div i-ep-warning inline-block />
+      :title="$t('page-not-found')"
-    </div>
+      :sub-title="$t('page-not-found-desc')"
-    <div>{{ $t('not-found') }}</div>
+      :back-text="$t('back-to-home')"
-    <div>
+      :on-back="() => $router.push($localePath('/'))"
-        <button text-sm btn m="3 t8" @click="router.back()">
+    />
-            {{ $t('back') }}
+  </main>
-        </button>
-    </div>
-</main>
 </template>
-
-<script setup lang="ts">
-const router = useRouter()
-</script>

app/pages/about/contact-us.vue

@@ -1,60 +0,0 @@
-<template>
-    <div>
-        <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">
-                {{ $t('contact-info') }}
-            </el-breadcrumb-item>
-        </el-breadcrumb>
-
-        <div class="content">
-            <markdown-renderer :content="content || ''" />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-const { findOne } = useStrapi()
-const { getStrapiLocale } = useLocalizations()
-
-const strapiLocale = getStrapiLocale()
-
-const content = ref<string>('')
-
-onMounted(async () => {
-    try {
-        const response = await findOne<StrapiContactInfo>('contact-info', undefined, {
-            populate: '*',
-            locale: strapiLocale,
-        })
-        if (response.data) {
-            content.value = response.data.content || ''
-        } else {
-            console.warn('No contact info data found')
-        }
-    } catch (error) {
-        console.error('Failed to fetch contact info:', error)
-    }
-})
-</script>
-
-<style scoped>
-.breadcrumb {
-    padding: 1rem 1rem;
-}
-
-.content {
-    padding: 1rem;
-    margin-bottom: 2rem;
-}
-
-:deep(.markdown-body p) {
-    margin-bottom: 1rem;
-}
-
-:deep(.markdown-body h2) {
-    text-align: center;
-}
-</style>

app/pages/about/index.vue

@@ -1,102 +1,117 @@
 <template>
-    <div>
+  <div class="page-container">
-        <el-breadcrumb class="breadcrumb" separator="/">
+    <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
-            <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">
-                {{ $t('about-us') }}
-            </el-breadcrumb-item>
-        </el-breadcrumb>
 
     <div class="content">
-            <markdown-renderer :content="content || ''" />
+      <el-skeleton :loading="pending" :rows="10" animated>
-        </div>
+        <template #default>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div class="html-typography" v-html="companyProfile?.content || ''" />
+          <!-- <div v-if="!hydrated" v-html="companyProfile.content || ''" /> -->
+          <!-- <div v-else> -->
+          <!--   <html-renderer -->
+          <!--     class="html-typography" -->
+          <!--     :html="companyProfile.content || ''" -->
+          <!--   /> -->
+          <!-- </div> -->
 
-        <el-divider content-position="left">更多信息</el-divider>
+          <el-divider content-position="left">{{
+            $t('learn-more')
+          }}</el-divider>
           <div class="button-group">
-            <NuxtLink :to="$localePath('/about/contact-us')">
+            <learn-more-card
-                <el-card class="card-button">
+              :title="$t('navigation.contact-info')"
-                    <el-icon class="icon" size="80"><ElIconService /></el-icon>
+              :icon="ElIconService"
-                    <br>
+              :to="$localePath('/support/contact-us')"
-                    联系信息
+            />
-                </el-card>
+            <learn-more-card
-            </NuxtLink>
+              :title="$t('navigation.address')"
+              :icon="ElIconMapLocation"
+              @click="openMap"
+            />
+          </div>
+        </template>
+      </el-skeleton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const { findOne } = useStrapi()
+  const localePath = useLocalePath();
-const { getStrapiLocale } = useLocalizations()
+  const hydrated = ref(false);
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.about-us') },
+  ];
+  const { data, pending, error } = useCompanyProfile();
 
-const strapiLocale = getStrapiLocale()
+  const companyProfile = computed(() => data.value ?? null);
 
-const content = ref<string>('')
+  const openMap = () => {
+    window.open(localePath('/locate'));
+  };
 
-onMounted(async () => {
+  watch(error, (value) => {
-    try {
+    if (value) {
-        const response = await findOne<StrapiCompanyProfile>('company-profile', undefined, {
+      logger.error('数据获取失败: ', value);
-            populate: '*',
-            locale: strapiLocale,
-        })
-        if (response.data) {
-            content.value = response.data.content || ''
-        } else {
-            console.warn('No company profile data found')
     }
-    } catch (error) {
+  });
-        console.error('Failed to fetch company profile:', error)
+
-    }
+  const pageTitle = computed(() => $t('page-title.about-us'));
-})
+  useHead({
+    title: pageTitle,
+  });
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
 </script>
 
 <style scoped>
-.breadcrumb {
+  .page-container {
-    padding: 1rem 1rem;
+    padding: 2rem 1rem;
-}
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 
-.content {
+  .breadcrumb {
+    padding: 1rem 1rem;
+  }
+
+  .content {
     padding: 1rem;
     margin-bottom: 2rem;
-}
+  }
 
-:deep(.markdown-body p) {
+  :deep(.el-divider__text) {
-    text-indent: 2em;
-}
-
-:deep(.markdown-body h2) {
-    text-align: center;
-}
-
-:deep(.el-divider__text) {
     color: var(--el-color-info);
     font-size: 1em;
-}
+  }
 
-.button-group {
+  .button-group {
     display: flex;
     justify-content: left;
     margin-top: 2rem;
     margin-left: 2rem;
-}
+    gap: 2rem;
+  }
 
-.card-button {
+  .loading {
-    width: 20%;
+    display: flex;
-    min-width: 200px;
+    justify-content: center;
-    padding: 20px;
+    align-items: center;
-    margin: 0 auto;
+    margin-top: 1rem;
-    cursor: pointer;
+  }
-    text-align: center;
-    font-size: 1.5em;
-}
 
-.card-button:hover {
+  @media (max-width: 768px) {
-    transform: translateY(-4px);
+    .button-group {
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+      align-items: center;
-}
+      margin-left: 0;
+      gap: 0.5rem;
+    }
 
-.icon {
+    .breadcrumb {
-    padding: 10px;
+      display: none;
-}
+    }
+  }
 </style>

app/pages/download/[id].vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('navigation.downloads') }}</h1>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+    </div>
+    <div class="page-content">
+      <el-skeleton
+        :loading="pending"
+        :rows="6"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #default>
+          <file-card :file-id="id" :file="file" />
+        </template>
+      </el-skeleton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const route = useRoute();
+  const localePath = useLocalePath();
+
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.support'), to: localePath('/support') },
+    { label: $t('navigation.documents'), to: localePath('/support/documents') },
+    { label: $t('navigation.downloads') },
+  ];
+
+  const id = route.params.id as string;
+
+  const {
+    data: file,
+    pending,
+    error,
+  } = await useFetch<FileMeta>(`/api/file/${id}`);
+
+  if (error.value || !file.value) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: '文件未找到',
+    });
+  }
+
+  const pageTitle = $t('page-title.download');
+  usePageSeo({
+    title: file.value.filename_download || pageTitle,
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    padding: 2rem;
+    margin: 0 auto;
+    max-width: 1200px;
+  }
+
+  .page-header {
+    display: flex;
+  }
+
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
+
+  .breadcrumb {
+    margin-left: auto;
+  }
+
+  @media (max-width: 768px) {
+    .breadcrumb {
+      display: none;
+    }
+  }
+</style>

app/pages/index.vue

@@ -1,76 +1,24 @@
 <template>
   <div class="homepage">
-    <div class="hero-section">
+    <homepage-carousel :homepage-data="data" :pending="pending" />
-      <h1>{{ $t('company-name') }}</h1>
+    <homepage-product-section :homepage-data="data" :pending="pending" />
-      <p>{{ $t('company-description') }}</p>
+    <homepage-solution-section :homepage-data="data" :pending="pending" />
-      <el-button type="primary" size="large">
-        {{ $t('learn-more') }}
-      </el-button>
-    </div>
-    
-    <div class="content-sections">
-      <div class="section">
-        <h2>{{ $t('productions') }}</h2>
-        <p>{{ $t('productions-desc') }}</p>
-      </div>
-      
-      <div class="section">
-        <h2>{{ $t('solutions') }}</h2>
-        <p>{{ $t('solutions-desc') }}</p>
-      </div>
-      
-      <div class="section">
-        <h2>{{ $t('support') }}</h2>
-        <p>{{ $t('support-desc') }}</p>
-      </div>
-    </div>
   </div>
 </template>
 
-<style scoped>
+<script setup lang="ts">
-.homepage {
+  const { data, pending, error } = await useHomepage();
-  padding: 2rem;
-}
 
-.hero-section {
+  const pageTilte = $t('page-title.homepage');
-  text-align: center;
-  padding: 4rem 0;
-  background: linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary));
-  border-radius: 8px;
-  margin-bottom: 3rem;
-  color: white;
-}
 
-.hero-section h1 {
+  watch(error, (value) => {
-  font-size: 3rem;
+    if (value) {
-  margin-bottom: 1rem;
+      logger.error('数据获取失败: ', value);
-}
+    }
+  });
 
-.hero-section p {
+  useSeoMeta({
-  font-size: 1.2rem;
+    title: pageTilte,
-  margin-bottom: 2rem;
+    description: $t('company-description'),
-}
+  });
-
+</script>
-.content-sections {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 2rem;
-}
-
-.section {
-  padding: 2rem;
-  background: var(--el-bg-color);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.section h2 {
-  color: var(--el-color-primary);
-  margin-bottom: 1rem;
-}
-
-.section p {
-  color: var(--el-text-color-regular);
-  line-height: 1.6;
-}
-</style>

app/pages/locate.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="page-container">
+    <h1>{{ $t('redirecting') }}</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+  onMounted(async () => {
+    const platform = await getAutoMappedService();
+
+    // // ✔ 移动端能正常跳转
+    window.location.href = platform;
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80vh;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+</style>

app/pages/preview/[id].vue

@@ -0,0 +1,13 @@
+<template>
+  <file-previewer :file-id="id" />
+</template>
+
+<script setup lang="ts">
+  definePageMeta({
+    layout: 'preview',
+  });
+
+  const route = useRoute();
+
+  const id = computed(() => route.params.id as string);
+</script>

app/pages/productions/[...slug].vue

@@ -1,188 +0,0 @@
-<template>
-  <div class="production-detail">
-    <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('productions')
-          }}</el-breadcrumb-item>
-        <el-breadcrumb-item class="text-sm opactiy-50">{{ production.title }}</el-breadcrumb-item>
-      </el-breadcrumb>
-
-      <!-- 产品详情内容 -->
-      <div class="production-header">
-        <div class="production-image">
-          <el-image
-:src="useStrapiMedia(production?.production_image?.url || '')" :alt="production.title"
-            fit="contain" />
-        </div>
-        <div class="production-info">
-          <h1>{{ production.title }}</h1>
-          <p class="summary">{{ production.summary }}</p>
-        </div>
-      </div>
-
-      <!-- 产品详细描述 -->
-      <div class="production-content">
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="产品详情" name="details">
-            <markdown-renderer :content="production.production_details || ''" />
-          </el-tab-pane>
-          <el-tab-pane label="技术规格" name="specs">
-            <spec-table :data="production.production_specs" />
-          </el-tab-pane>
-          <el-tab-pane label="相关文档" name="documents" />
-        </el-tabs>
-      </div>
-    </div>
-
-    <!-- 加载状态 -->
-    <div v-else-if="pending" class="loading">
-      <el-skeleton style="--el-skeleton-circle-size: 400px">
-        <template #template>
-          <el-skeleton-item variant="circle" />
-        </template>
-      </el-skeleton>
-      <el-skeleton :rows="5" animated />
-    </div>
-
-    <!-- 未找到产品 -->
-    <div v-else class="not-found">
-      <el-result icon="warning" :title="$t('product-not-found')" :sub-title="$t('product-not-found-desc')">
-        <template #extra>
-          <el-button type="primary" @click="$router.push('/productions')">
-            {{ $t('back-to-productions') }}
-          </el-button>
-        </template>
-      </el-result>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Production } from '~/types/strapi/production'
-
-const route = useRoute()
-const { findOne } = useStrapi()
-const { getStrapiLocale } = useLocalizations()
-const strapiLocale = getStrapiLocale()
-
-const production = ref<Production | null>(null)
-const pending = ref(true)
-
-const activeName = ref('details') // 默认选中概览标签
-
-// 获取路由参数（slug 或 id）
-const documentId = computed(() => route.params.slug as string)
-
-
-onMounted(async () => {
-  try {
-    const response = await findOne<Production>('productions', documentId.value, {
-      populate: {
-        production_specs: {
-          populate: '*',
-        },
-        production_image: {
-          populate: '*',
-        },
-      }, 
-      locale: strapiLocale,
-    })
-    if (response.data) {
-      const item = response.data
-      production.value = {
-        ...item,
-      }
-    }
-  } catch (error) {
-    console.error('Failed to fetch production:', error)
-  } finally {
-    pending.value = false
-  }
-})
-
-// SEO
-useHead({
-  title: computed(() => production.value?.title || 'Product Detail'),
-  meta: [
-    {
-      name: 'description',
-      content: computed(() => production.value?.summary || '')
-    }
-  ]
-})
-</script>
-
-<style scoped>
-.production-detail {
-  min-height: 60vh;
-}
-
-.breadcrumb {
-  padding: 1rem 1rem;
-  margin-bottom: 2rem;
-}
-
-.production-header {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3rem;
-  margin-bottom: 3rem;
-}
-
-.production-image .el-image {
-  width: 100%;
-  height: 400px;
-  border-radius: 8px;
-}
-
-.production-info h1 {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  font-size: 2rem;
-}
-
-.summary {
-  color: var(--el-color-info);
-  font-size: 1rem;
-  line-height: 1.6;
-  margin-bottom: 2rem;
-}
-
-.production-content {
-  margin-top: 2rem;
-}
-
-.production-content h2 {
-  color: var(--el-text-color-primary);
-  margin: 0;
-}
-
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 1rem;
-}
-
-.not-found {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 400px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .production-header {
-    grid-template-columns: 1fr;
-    gap: 2rem;
-  }
-
-  .production-info h1 {
-    font-size: 2rem;
-  }
-}
-</style>

app/pages/productions/index.vue

@@ -1,110 +0,0 @@
-<template>
-    <div class="productions-container">
-        <el-collapse v-model="activeNames" class="production-collapse">
-            <el-collapse-item
-v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分类'"
-                :name="type || 'no-category'">
-                <div class="group-list">
-                    <production-card
-v-for="production in group" :key="production.documentId || production.id"
-                        :slug="production.documentId"
-                        :image-url="useStrapiMedia(production?.production_image?.url || '')" :name="production.title"
-                        :description="production.summary || ''" />
-                </div>
-            </el-collapse-item>
-        </el-collapse>
-    </div>
-</template>
-
-
-
-<script setup lang="ts">
-const { find } = useStrapi()
-const { getStrapiLocale } = useLocalizations()
-
-const strapiLocale = getStrapiLocale()
-
-const activeNames = ref<string[]>([])
-
-const productions = ref<Production[]>([])
-
-// 按类型分组
-// 兼容 production_type 既可能为对象也可能为字符串
-const groupedProductions = computed(() => {
-    const groups: Record<string, Production[]> = {}
-    for (const prod of productions.value) {
-        let typeKey = ''
-        if (typeof prod.production_type === 'string') {
-            typeKey = prod.production_type
-        } else if (prod.production_type && typeof prod.production_type === 'object' && 'type' in prod.production_type) {
-            typeKey = prod.production_type.type || ''
-        }
-        if (!groups[typeKey]) groups[typeKey] = []
-        groups[typeKey]?.push(prod)
-    }
-    return groups
-})
-
-onMounted(async () => {
-    try {
-        const response = await find<Production>('productions', {
-            populate: {
-                production_image: {
-                    populate: '*',
-                },
-                production_type: {
-                    populate: '*',
-                }
-            },
-            filters: {
-                show_in_production_list: {
-                    $eq: true, // 只获取在产品列表中显示的产品
-                },
-            },
-            locale: strapiLocale,
-        })
-        productions.value = response.data.map((item: Production) => ({
-            ...item,
-            // 保持 production_type 原始类型，兼容对象或字符串
-            production_type: item.production_type,
-        }))
-        // 默认展开所有分组
-        activeNames.value = Object.keys(groupedProductions.value)
-        activeNames.value.push('no-category') // 展开未分类
-    } catch (error) {
-        console.error('Failed to fetch productions:', error)
-    }
-});
-</script>
-
-<style scoped>
-.productions-container {
-    display: flex;
-    flex-direction: column;
-    gap: 40px;
-    padding: 20px;
-}
-
-.production-group {
-    margin-bottom: 32px;
-}
-
-.group-title {
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 16px;
-    color: var(--el-color-primary);
-}
-
-.group-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    justify-content: flex-start;
-}
-
-:deep(.el-collapse-item__header) {
-    padding: 30px auto;
-    font-size: 1.5rem;
-}
-</style>

app/pages/products/[slug].vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="page-container">
+    <div v-if="product">
+      <!-- 面包屑导航 -->
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+      <!-- 产品详情内容 -->
+      <product-header :product="product" />
+      <!-- 产品详细描述 -->
+      <product-detail :product="product" />
+    </div>
+    <!-- 未找到产品 -->
+    <div v-else class="not-found">
+      <not-found-result
+        :title="$t('product-not-found')"
+        :sub-title="$t('product-not-found-desc')"
+        :back-text="$t('back-to-products')"
+        :on-back="() => $router.push($localePath('/products'))"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const route = useRoute();
+  const localePath = useLocalePath();
+
+  // 获取路由参数
+  const id = route.params.slug as string;
+
+  const { data: product, error } = await useProduct(id);
+
+  const breadcrumbItems = computed(() => [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.products'), to: localePath('/products') },
+    { label: product.value?.name || '' },
+  ]);
+
+  watch(error, (value) => {
+    if (value) {
+      logger.error('数据获取失败: ', value);
+    }
+  });
+
+  // SEO
+  usePageSeo({
+    title: product.value?.name || $t('page-title.products'),
+    description: product.value?.summary || '',
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    min-height: 80vh;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .breadcrumb {
+    padding: 2rem;
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+  }
+
+  .not-found {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+  }
+</style>

app/pages/products/index.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="page-container">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ $t('our-products') }}</h1>
+        <p class="page-subtitle">
+          {{ $t('products-desc') }}{{ $t('find-discontinued-products') }}
+        </p>
+      </div>
+
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+    </div>
+    <div>
+      <el-skeleton
+        animated
+        :loading="pending"
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <div v-for="i in 3" :key="i" class="products-container">
+            <el-skeleton-item variant="h1" class="skeleton-collapse" />
+            <div class="skeleton-group-list">
+              <el-skeleton-item
+                v-for="j in 3"
+                :key="j"
+                variant="rect"
+                class="skeleton-card"
+              />
+            </div>
+          </div>
+        </template>
+        <template #default>
+          <div class="products-container">
+            <el-collapse v-model="activeNames" class="product-collapse">
+              <el-collapse-item
+                v-for="[key, value] in Object.entries(groupedProducts)"
+                :key="key"
+                :title="key || '未分类'"
+                :name="key || 'no-category'"
+              >
+                <div class="group-list">
+                  <product-card
+                    v-for="product in value.data"
+                    :key="product.id"
+                    :slug="product.id.toString()"
+                    :image-url="getImageUrl(product.cover.toString())"
+                    :name="product.name"
+                    :description="product.summary || ''"
+                  />
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </template>
+      </el-skeleton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const localePath = useLocalePath();
+  const { getImageUrl } = useDirectusImage();
+
+  const { data: products, pending, error } = await useProductList();
+
+  const activeNames = ref<string[]>([]);
+
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.products') },
+  ];
+
+  // 按类型分组
+  const groupedProducts = computed(() => {
+    const groups: Record<string, { data: ProductListView[]; sort: number }> =
+      {};
+    for (const prod of products.value) {
+      const typeKey = prod.product_type?.name ?? '';
+      if (!groups[typeKey]) {
+        groups[typeKey] = { data: [], sort: prod.product_type?.sort ?? 999 };
+      }
+      groups[typeKey]?.data.push(prod);
+    }
+    const sortedGroups = Object.fromEntries(
+      Object.entries(groups).sort(([, a], [, b]) => a.sort - b.sort)
+    );
+    return sortedGroups;
+  });
+
+  watch(groupedProducts, () => {
+    if (groupedProducts.value) {
+      activeNames.value = [
+        ...Object.keys(groupedProducts.value),
+        'no-category',
+      ];
+    }
+  });
+
+  watch(error, (value) => {
+    if (value) {
+      logger.error('数据获取失败: ', value);
+    }
+  });
+
+  onMounted(async () => {
+    if (groupedProducts.value) {
+      activeNames.value = [
+        ...Object.keys(groupedProducts.value),
+        'no-category',
+      ];
+    }
+  });
+
+  const pageTitle = $t('page-title.products');
+  usePageSeo({
+    title: pageTitle,
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    padding: 2rem;
+    margin: 0 auto;
+    max-width: 1200px;
+  }
+
+  .page-header {
+    display: flex;
+    margin-bottom: 1rem;
+  }
+
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+  }
+
+  .page-subtitle {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+  }
+
+  .breadcrumb {
+    margin-left: auto;
+  }
+
+  .products-container {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  .product-group {
+    margin-bottom: 32px;
+  }
+
+  .group-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 16px;
+    color: var(--el-color-primary);
+  }
+
+  .group-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 1rem;
+    gap: 20px;
+    justify-content: flex-start;
+  }
+
+  .skeleton-collapse {
+    height: 50px;
+    width: 100%;
+  }
+
+  .skeleton-group-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+    justify-content: flex-start;
+    margin-bottom: 2rem;
+  }
+
+  .skeleton-card {
+    width: 30%;
+    height: 250px;
+    margin-right: 1rem;
+  }
+
+  @media (max-width: 1200px) {
+    .skeleton-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .group-list {
+      justify-content: center;
+      align-items: center;
+    }
+    .skeleton-group-list {
+      justify-content: center;
+      align-items: center;
+    }
+
+    .skeleton-card {
+      width: 90%;
+    }
+
+    .breadcrumb {
+      display: none;
+    }
+  }
+
+  :deep(.el-collapse-item__header) {
+    padding: 30px auto;
+    font-size: 1.5rem;
+  }
+</style>

app/pages/search.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="search-page">
+    <search-header v-model="keyword" />
+    <div class="search-state">
+      <el-skeleton
+        :loading="loading"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <el-skeleton-item
+            v-for="i in 10"
+            :key="i"
+            variant="rect"
+            class="skeleton-item"
+          />
+        </template>
+        <template #default>
+          <search-tabs v-if="hasResults" :search-items="searchItems" />
+          <div v-else>
+            <el-empty
+              :description="
+                route.query.query
+                  ? $t('search.no-results', { query: route.query?.query })
+                  : $t('search.no-query')
+              "
+            />
+          </div>
+        </template>
+      </el-skeleton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // i18n相关
+  const { t } = useI18n();
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  // 路由相关
+  const route = useRoute();
+
+  // 搜索相关
+  const keyword = ref('');
+
+  if (typeof route.query.query === 'string' && route.query.query.trim()) {
+    keyword.value = route.query.query;
+  }
+
+  const {
+    data: searchItems,
+    pending: loading,
+    error,
+    refresh,
+  } = useAsyncData(`meilisearch-${keyword.value}-${locale}`, async () => {
+    try {
+      const data = await $fetch(`/api/search?query=${keyword.value}`, {
+        headers: { 'x-locale': locale },
+      });
+      return data;
+    } catch (error) {
+      logger.error('Error fetching search results: ', error);
+      throw error;
+    }
+  });
+
+  const hasResults = computed(() => searchItems.value.length > 0);
+
+  watch(
+    () => route.query.query,
+    async (newQuery) => {
+      if (typeof newQuery === 'string' && newQuery.trim()) {
+        keyword.value = newQuery;
+        await refresh();
+      }
+    }
+  );
+
+  watch(
+    () => locale,
+    async () => {
+      await refresh();
+    }
+  );
+
+  watch(error, (value) => {
+    if (value) {
+      logger.error('数据获取失败: ', value);
+    }
+  });
+
+  onMounted(() => {
+    if (typeof route.query.query === 'string' && route.query.query.trim())
+      keyword.value = route.query.query;
+  });
+
+  useHead(() => ({
+    title: t('search.head-title'),
+  }));
+</script>
+
+<style scoped>
+  .search-page {
+    margin: 0 auto;
+    max-width: 960px;
+    padding: 2.5rem 1.5rem 3rem;
+    min-height: 70vh;
+  }
+
+  .search-state {
+    display: flex;
+    justify-content: center;
+  }
+
+  .skeleton-item {
+    height: 80px;
+    margin-bottom: 1rem;
+  }
+
+  @media (max-width: 640px) {
+    .search-page {
+      padding: 2rem 1rem;
+    }
+
+    .search-bar {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .search-input {
+      width: 100%;
+    }
+  }
+</style>

app/pages/solutions/[slug].vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="page-container">
+    <div v-if="solution">
+      <div class="page-header">
+        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+      </div>
+      <solution-detail :solution="solution" />
+    </div>
+    <div v-else class="not-found">
+      <not-found-result
+        :title="$t('solution-not-found')"
+        :sub-title="$t('solution-not-found-desc')"
+        :back-text="$t('back-to-solutions')"
+        :on-back="() => $router.push($localePath('/solutions'))"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const route = useRoute();
+  const localePath = useLocalePath();
+
+  // 获取路由参数
+  const id = route.params.slug as string;
+
+  const { data: solution, error } = await useSolution(id);
+
+  const breadcrumbItems = computed(() => [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.solutions'), to: localePath('/solutions') },
+    { label: solution.value ? solution.value.title : '' },
+  ]);
+
+  watch(error, (value) => {
+    if (value) {
+      logger.error('数据获取失败: ', value);
+    }
+  });
+
+  usePageSeo({
+    title: solution.value?.title || $t('page-title.solutions'),
+    description: solution.value?.summary || '',
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    padding: 1rem;
+    min-height: 80vh;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .breadcrumb {
+    padding: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+  }
+
+  .not-found {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+  }
+</style>

app/pages/solutions/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="page-container">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ $t('learn-our-solutions') }}</h1>
+        <p class="page-subtitle">{{ $t('solutions-desc') }}</p>
+      </div>
+
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+    </div>
+    <div class="solutions-container">
+      <el-skeleton
+        :loading="pending"
+        animated
+        :throttle="{
+          leading: 500,
+          trailing: 500,
+        }"
+      >
+        <template #template>
+          <div class="skeleton-group-list">
+            <el-skeleton-item
+              v-for="i in 12"
+              :key="i"
+              variant="rect"
+              class="skeleton-card"
+            />
+          </div>
+        </template>
+        <template #default>
+          <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.id"
+                  :title="solution.title"
+                  :summary="solution.summary || ''"
+                  :cover-url="getImageUrl(solution.cover || '')"
+                  :document-id="solution.id.toString()"
+                />
+              </div>
+            </el-tab-pane>
+            <el-tab-pane
+              v-for="[key, value] in Object.entries(groupedSolutions)"
+              :key="key"
+              :label="key || '未分类'"
+              :name="key || 'no-category'"
+            >
+              <div class="solution-list">
+                <solution-card
+                  v-for="solution in value.data"
+                  :key="solution.id"
+                  :document-id="solution.id.toString()"
+                  :cover-url="getImageUrl(solution.cover || '')"
+                  :title="solution.title"
+                  :summary="solution.summary || ''"
+                />
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </template>
+      </el-skeleton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const localePath = useLocalePath();
+  const { getImageUrl } = useDirectusImage();
+
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.solutions') },
+  ];
+
+  const { data, pending, error } = useSolutionList();
+
+  const solutions = computed(() => data.value ?? []);
+
+  const activeName = ref<string>('all');
+
+  // 按类型分组
+  const groupedSolutions = computed(() => {
+    const groups: Record<string, { data: SolutionListView[]; sort: number }> =
+      {};
+    for (const sol of solutions.value) {
+      const typeKey = sol.solution_type?.name ?? '';
+      if (!groups[typeKey]) {
+        groups[typeKey] = { data: [], sort: sol.solution_type?.sort ?? 999 };
+      }
+      groups[typeKey]?.data.push(sol);
+    }
+    const sortedGroups = Object.fromEntries(
+      Object.entries(groups).sort(([, a], [, b]) => a.sort - b.sort)
+    );
+    return sortedGroups;
+  });
+
+  watch(error, (value) => {
+    if (value) {
+      logger.error('数据获取失败: ', value);
+    }
+  });
+
+  const pageTitle = $t('page-title.solutions');
+  usePageSeo({
+    title: pageTitle,
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .page-header {
+    display: flex;
+    margin-bottom: 1rem;
+  }
+
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+  }
+
+  .page-subtitle {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+  }
+
+  .breadcrumb {
+    margin-left: auto;
+  }
+
+  .solution-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 1rem;
+    margin-bottom: 2rem;
+    gap: 40px;
+  }
+
+  .skeleton-group-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: flex-start;
+    margin-bottom: 2rem;
+  }
+
+  .skeleton-card {
+    width: 30%;
+    height: 200px;
+  }
+
+  @media (max-width: 1200px) {
+    .skeleton-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .skeleton-group-list {
+      justify-content: center;
+      align-items: center;
+    }
+
+    .skeleton-card {
+      width: 90%;
+    }
+
+    .breadcrumb {
+      display: none;
+    }
+  }
+</style>

app/pages/support/contact-us.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="page-container">
+    <support-tabs model-value="contact-us" />
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+    </div>
+
+    <div class="page-content">
+      <el-skeleton
+        :rows="10"
+        :loading="pending"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #default>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div class="html-typography" v-html="contactInfo?.content || ''" />
+          <!-- <div v-if="!hydrated" v-html="contactInfo?.content || ''" /> -->
+          <!-- <div v-else> -->
+          <!--   <html-renderer -->
+          <!--     class="html-typography" -->
+          <!--     :html="contactInfo?.content || ''" -->
+          <!--   /> -->
+          <!-- </div> -->
+        </template>
+      </el-skeleton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const localePath = useLocalePath();
+  const hydrated = ref(false);
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.support'), to: localePath('/support') },
+    { label: $t('navigation.contact-info') },
+  ];
+  const { data, pending, error } = useContactInfo();
+
+  const contactInfo = computed(() => data.value ?? null);
+
+  watch(error, (value) => {
+    if (value) {
+      logger.error('数据获取失败: ', value);
+    }
+  });
+
+  const pageTitle = $t('page-title.contact-us');
+  usePageSeo({
+    title: pageTitle,
+  });
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .page-header {
+    display: flex;
+    padding: 2rem 2rem 0rem;
+  }
+
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
+
+  .breadcrumb {
+    margin-left: auto;
+  }
+
+  .page-content {
+    padding: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  :deep(.markdown-body ul) {
+    list-style-type: none;
+  }
+
+  @media (max-width: 768px) {
+    .breadcrumb {
+      display: none;
+    }
+  }
+</style>

app/pages/support/documents.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="page-container">
+    <div>
+      <support-tabs model-value="documents" />
+      <div class="page-header">
+        <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
+        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+      </div>
+      <div class="page-content">
+        <document-filter
+          v-model="filters"
+          :product-type-options="productTypeOptions"
+          :product-options="productOptions"
+          :document-type-options="documentTypeOptions"
+        />
+
+        <el-skeleton
+          :loading="pending"
+          animated
+          :throttle="{
+            leading: 500,
+            trailing: 500,
+          }"
+        >
+          <template #template>
+            <div class="flex flex-col gap-xl">
+              <el-skeleton-item
+                variant="rect"
+                style="width: 100%; height: 100px"
+              />
+              <el-skeleton-item
+                v-for="i in 10"
+                :key="i"
+                variant="h1"
+                style="height: 60px"
+              />
+            </div>
+          </template>
+          <template #default>
+            <document-list
+              :documents="paginatedDocuments"
+              :show-category="
+                filters.selectedDocumentType === null ||
+                filters.selectedDocumentType === undefined
+              "
+            />
+
+            <el-pagination
+              v-model:current-page="page"
+              class="justify-center pagination-container"
+              layout="prev, pager, next"
+              hide-on-single-page
+              :page-size="documentsPerPage"
+              :total="filteredDocuments.length"
+            />
+          </template>
+        </el-skeleton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const localePath = useLocalePath();
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.support'), to: localePath('/support') },
+    { label: $t('navigation.documents') },
+  ];
+
+  const filters = reactive({
+    selectedDocumentType: null as string | null,
+    selectedProductType: null as string | null,
+    selectedProduct: null as string | null,
+    keyword: '',
+  });
+
+  const page = ref(1);
+  const documentsPerPage = 10;
+
+  const { data, pending, error } = useDocumentList();
+
+  const documents = computed(() => data.value ?? []);
+
+  const documentTypeOptions = computed(() => {
+    const types: DocumentTypeView[] = [];
+    documents.value.forEach((doc: DocumentListView) => {
+      if (!types.some((item) => item.id === doc.type.id)) {
+        if (doc.type.id === '-1') {
+          types.push({
+            id: '-1',
+            name: $t('product-filter.misc'),
+          });
+        } else {
+          types.push(doc.type);
+        }
+      }
+    });
+
+    return types;
+  });
+
+  const productTypeOptions = computed(() => {
+    const types: DocumentListProductType[] = [];
+    documents.value.forEach((doc: DocumentListView) => {
+      doc.products?.forEach((product: DocumentListProduct) => {
+        const productType = product.type;
+        if (!types.some((item) => item.id === productType.id)) {
+          types.push(productType);
+        }
+      });
+    });
+
+    return types;
+  });
+
+  const productOptions = computed(() => {
+    if (!filters.selectedProductType) return [];
+    const products: DocumentListProduct[] = [];
+
+    documents.value.forEach((doc: DocumentListView) => {
+      doc.products?.forEach((product: DocumentListProduct) => {
+        if (
+          product.type.id === filters.selectedProductType &&
+          !products.some((item) => item.id === product.id)
+        ) {
+          products.push(product);
+        }
+      });
+    });
+
+    return products;
+  });
+
+  const filteredDocuments = computed(() => {
+    const fuzzyMatchedDocuments = fuzzyMatch(documents.value, {
+      keyword: filters.keyword,
+      keys: ['title'],
+      threshold: 0.6,
+    });
+    return fuzzyMatchedDocuments.filter((doc: DocumentListView) => {
+      const matchProduct = filters.selectedProduct
+        ? doc.products?.some(
+            (product: DocumentListProduct) =>
+              product.id === filters.selectedProduct
+          )
+        : filters.selectedProductType
+          ? doc.products?.some(
+              (product: DocumentListProduct) =>
+                product.type?.id === filters.selectedProductType
+            )
+          : true;
+
+      const matchDocumentType = filters.selectedDocumentType
+        ? doc.type.id === filters.selectedDocumentType
+        : true;
+
+      return matchProduct && matchDocumentType;
+    });
+  });
+
+  const paginatedDocuments = computed(() => {
+    return filteredDocuments.value.slice(
+      (page.value - 1) * documentsPerPage,
+      page.value * documentsPerPage
+    );
+  });
+
+  watch(
+    () => filters.selectedProductType,
+    () => {
+      filters.selectedProduct = null;
+    }
+  );
+
+  watch(error, (value) => {
+    if (value) {
+      logger.error('数据获取失败: ', value);
+    }
+  });
+
+  const pageTitle = $t('page-title.documents');
+  usePageSeo({
+    title: pageTitle,
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .page-header {
+    display: flex;
+    padding: 2rem 2rem 0rem;
+  }
+
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
+
+  .breadcrumb {
+    margin-left: auto;
+  }
+
+  .page-content {
+    padding: 1rem 2rem 2rem;
+  }
+
+  .select-label {
+    color: var(--el-text-color-secondary);
+    font-size: 0.9rem;
+  }
+
+  :deep(.el-select__wrapper),
+  :deep(.el-input__wrapper) {
+    height: 40px;
+    font-size: 0.9rem;
+  }
+
+  .pagination-container {
+    margin-top: 2rem;
+  }
+
+  @media (max-width: 768px) {
+    .breadcrumb {
+      display: none;
+    }
+  }
+
+  :deep(.el-pagination) {
+    .btn-prev,
+    .btn-next {
+      .el-icon {
+        font-size: 24px;
+      }
+    }
+
+    .el-pager {
+      gap: 0.5rem;
+    }
+    .el-pager li {
+      font-size: 1rem;
+      /* border: 1px solid #409eff; */
+      border-radius: 50%;
+
+      &:hover {
+        background-color: #ecf5ff;
+      }
+
+      &.is-active {
+        background-color: var(--el-color-primary);
+        color: #fff;
+      }
+    }
+  }
+</style>

app/pages/support/faq.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="page-container">
+    <support-tabs model-value="faq" />
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('navigation.faq') }}</h1>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+    </div>
+
+    <div class="page-content">
+      <question-filter
+        v-model="filters"
+        :product-type-options="productTypeOptions"
+        :product-options="productOptions"
+        :question-type-options="questionTypeOptions"
+      />
+
+      <el-skeleton
+        :loading="pending"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <div class="flex flex-col gap-xl">
+            <el-skeleton-item
+              v-for="i in 10"
+              :key="i"
+              variant="h1"
+              style="height: 80px"
+            />
+          </div>
+        </template>
+        <template #default>
+          <question-list :questions="paginatedQuestions" />
+
+          <el-pagination
+            v-model:current-page="page"
+            class="justify-center pagination-container"
+            layout="prev, pager, next"
+            hide-on-single-page
+            :page-size="questionsPerPage"
+            :total="filteredQuestions.length"
+          />
+        </template>
+      </el-skeleton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const localePath = useLocalePath();
+  const route = useRoute();
+
+  const filters = reactive({
+    selectedQuestionType: null as string | null,
+    selectedProduct: null as string | null,
+    selectedProductType: null as string | null,
+    keyword: '',
+  });
+
+  const page = ref(1);
+  const questionsPerPage = 10;
+
+  const focusQuestionId = ref<string | null>(
+    route.query.focus as string | null
+  );
+
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.support'), to: localePath('/support') },
+    { label: $t('navigation.faq') },
+  ];
+
+  const { data, pending, error } = useQuestionList();
+
+  const questions = computed(() => data.value ?? []);
+
+  const questionTypeOptions = computed(() => {
+    const types: QuestionTypeView[] = [];
+    questions.value.forEach((q: QuestionListView) => {
+      if (!types.some((t) => t.id === q.type.id)) {
+        if (q.type.id === '-1') {
+          types.push({
+            id: '-1',
+            name: $t('product-filter.misc'),
+          });
+        } else {
+          types.push(q.type);
+        }
+      }
+    });
+    return types;
+  });
+
+  const productTypeOptions = computed(() => {
+    const types: QuestionListProductType[] = [];
+    questions.value.forEach((q: QuestionListView) => {
+      q.products.forEach((product: QuestionListProduct) => {
+        const productType = product.type;
+        if (!types.some((p) => p.id === productType.id)) {
+          types.push(productType);
+        }
+      });
+    });
+    return types;
+  });
+
+  const productOptions = computed(() => {
+    if (!filters.selectedProductType) return [];
+    const products: QuestionListProduct[] = [];
+    questions.value.forEach((q: QuestionListView) => {
+      q.products.forEach((product: QuestionListProduct) => {
+        if (
+          product.type.id === filters.selectedProductType &&
+          !products.some((p) => p.id === product.id)
+        ) {
+          products.push(product);
+        }
+      });
+    });
+    return products;
+  });
+
+  const filteredQuestions = computed(() => {
+    const fuzzyMatchedQuestions = fuzzyMatch(questions.value, {
+      keyword: filters.keyword,
+      keys: ['title'],
+      threshold: 0.6,
+    });
+    return fuzzyMatchedQuestions.filter((question: QuestionListView) => {
+      const matchProduct = filters.selectedProduct
+        ? question.products?.some(
+            (product: QuestionListProduct) =>
+              product.id === filters.selectedProduct
+          )
+        : filters.selectedProductType
+          ? question.products?.some(
+              (product: QuestionListProduct) =>
+                product.type.id === filters.selectedProductType
+            )
+          : true;
+
+      const matchQuestionType = filters.selectedQuestionType
+        ? question.type.id === filters.selectedQuestionType
+        : true;
+
+      return matchProduct && matchQuestionType;
+    });
+  });
+
+  const paginatedQuestions = computed(() => {
+    const start = (page.value - 1) * questionsPerPage;
+    const end = page.value * questionsPerPage;
+    return filteredQuestions.value.slice(start, end);
+  });
+
+  watch(
+    focusQuestionId,
+    async (focusId) => {
+      if (!focusId) return;
+      if (!import.meta.client) return;
+
+      await nextTick();
+
+      const question = filteredQuestions.value.find((q) => q.id === focusId);
+      if (!question) return;
+
+      const targetIndex = filteredQuestions.value.indexOf(question);
+      const targetPage = Math.floor(targetIndex / questionsPerPage) + 1;
+      onMounted(() => {
+        if (page.value !== targetPage) {
+          page.value = targetPage;
+        }
+      });
+    },
+    { immediate: true }
+  );
+
+  watch(
+    () => filters.selectedProductType,
+    () => {
+      filters.selectedProduct = null;
+    }
+  );
+
+  watch(error, (value) => {
+    if (value) {
+      logger.error('数据获取失败: ', value);
+    }
+  });
+
+  const pageTitle = $t('page-title.faq');
+  usePageSeo({
+    title: pageTitle,
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .page-header {
+    display: flex;
+    padding: 2rem 2rem 0rem;
+  }
+
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
+
+  .breadcrumb {
+    margin-left: auto;
+  }
+
+  .page-content {
+    padding: 1rem 2rem 2rem;
+  }
+  .pagination-container {
+    margin-top: 2rem;
+  }
+
+  @media (max-width: 768px) {
+    .breadcrumb {
+      display: none;
+    }
+  }
+
+  :deep(.el-pagination) {
+    .btn-prev,
+    .btn-next {
+      .el-icon {
+        font-size: 24px;
+      }
+    }
+
+    .el-pager {
+      gap: 0.5rem;
+    }
+    .el-pager li {
+      font-size: 1rem;
+      /* border: 1px solid #409eff; */
+      border-radius: 50%;
+
+      &:hover {
+        background-color: #ecf5ff;
+      }
+
+      &.is-active {
+        background-color: var(--el-color-primary);
+        color: #fff;
+      }
+    }
+  }
+</style>

app/pages/support/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="page-container">
+    <support-tabs />
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('navigation.support') }}</h1>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+    </div>
+    <div class="page-content">
+      <section style="margin-bottom: 2rem">
+        <p>
+          {{ $t('support-page-desc') }}
+        </p>
+      </section>
+      <div class="card-group">
+        <support-card
+          v-for="(item, index) in supportItems"
+          :key="index"
+          :title="item.title"
+          :description="item.description"
+          :to="item.to"
+          :icon-component="item.iconComponent"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const localePath = useLocalePath();
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.support') },
+  ];
+
+  const supportItems = [
+    {
+      title: $t('navigation.faq'),
+      description: $t('support-card-desc.faq'),
+      to: localePath('/support/faq'),
+      iconComponent: ElIconQuestionFilled,
+    },
+    {
+      title: $t('navigation.documents'),
+      description: $t('support-card-desc.documents'),
+      to: localePath('/support/documents'),
+      iconComponent: ElIconDocumentChecked,
+    },
+    {
+      title: $t('navigation.contact-info'),
+      description: $t('support-card-desc.contact-info'),
+      to: localePath('/support/contact-us'),
+      iconComponent: ElIconService,
+    },
+  ];
+
+  const pageTitle = $t('page-title.support');
+  usePageSeo({
+    title: pageTitle,
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .page-header {
+    display: flex;
+    padding: 2rem 2rem 0rem;
+  }
+
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
+
+  .breadcrumb {
+    margin-left: auto;
+  }
+
+  .page-content {
+    padding: 1rem 2rem 2rem;
+  }
+
+  section {
+    line-height: 1.6;
+    width: 60%;
+  }
+
+  .card-group {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 50px;
+    justify-content: space-around;
+    margin-bottom: 2rem;
+  }
+
+  .el-card {
+    width: 100%;
+    padding: 20px;
+    box-shadow: none;
+    border-radius: 8px;
+  }
+
+  .card-icon {
+    color: var(--el-color-primary);
+  }
+
+  .card-title {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin-left: 2rem;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+  }
+
+  .card-link {
+    margin-left: auto;
+  }
+
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+
+  @media (max-width: 768px) {
+    section {
+      width: 100%;
+    }
+
+    .card-group {
+      grid-template-columns: 1fr;
+      gap: 20px;
+    }
+
+    .breadcrumb {
+      display: none;
+    }
+  }
+</style>

app/plugins/directus.ts

@@ -0,0 +1,13 @@
+import { createDirectus, rest, staticToken, graphql } from '@directus/sdk';
+
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+
+  const directus = createDirectus<Schema>(config.public.directus.url)
+    .with(rest())
+    .with(graphql())
+    .with(staticToken(config.public.directus.token || ''));
+  return {
+    provide: { directus },
+  };
+});

app/types/strapi/common.ts

@@ -1,46 +0,0 @@
-export interface StrapiEntity {
-    id: number;
-    documentId: string;
-    createdAt: string;
-    updatedAt: string;
-    publishedAt: string;
-    locale: string;
-}
-
-export interface StrapiMedia {
-    id: number;
-    url: string;
-    ext: string;
-    name: string;
-    alternativeText: string;
-    caption: string;
-}
-
-export interface StrapiImageFormat {
-    url: string;
-    width: number;
-    height: number;
-    size: number;
-}
-
-export interface StrapiImage extends StrapiMedia {
-    width: number;
-    height: number;
-    formats: {
-        small: StrapiImageFormat;
-        medium: StrapiImageFormat;
-        thumbnail: StrapiImageFormat;
-    }
-}
-
-export interface StrapiResponse<T> {
-    data: T;
-    meta: {
-        pagination: {
-            page: number;
-            pageSize: number;
-            pageCount: number;
-            total: number;
-        }
-    }
-}

app/types/strapi/index.ts

@@ -1,3 +0,0 @@
-export * from './common';
-export * from './production';
-export * from './singleTypes';

app/types/strapi/production.ts

@@ -1,26 +0,0 @@
-import type { StrapiEntity, StrapiImage, StrapiMedia } from './common';
-
-export interface ProductionType extends StrapiEntity {
-    type: string;
-}
-
-export interface ProductionSpecItem {
-    label: string;
-    value: string;
-}
-
-export interface ProductionSpecGroup {
-    title: string;
-    items: ProductionSpecItem[];
-}
-
-export interface Production extends StrapiEntity {
-    title: string;
-    summary: string;
-    production_type: ProductionType;
-    production_image: StrapiImage;
-    production_details: string;
-    production_specs: ProductionSpecGroup[];
-    documents: StrapiMedia[];
-    show_in_production_list: boolean;
-}

app/types/strapi/singleTypes.ts

@@ -1,7 +0,0 @@
-export interface StrapiCompanyProfile extends StrapiEntity {
-    content: string;
-}
-
-export interface StrapiContactInfo extends StrapiEntity {
-    content: string;
-}

app/utils/autoMap.ts

@@ -0,0 +1,45 @@
+async function testSpeed(url: string, timeout = 1500) {
+  const start = performance.now();
+
+  try {
+    await Promise.race([
+      fetch(url, { method: 'HEAD', mode: 'no-cors' }),
+      new Promise((_, reject) => setTimeout(() => reject('timeout'), timeout)),
+    ]);
+
+    return performance.now() - start;
+  } catch {
+    return Infinity; // unreachable or timed out
+  }
+}
+
+async function selectBestMap() {
+  const testTargets = {
+    // amap: 'https://www.amap.com/favicon.ico',
+    baidu: 'https://map.baidu.com/favicon.ico',
+    google: 'https://maps.google.com/favicon.ico',
+  };
+
+  const results: Record<string, number> = {};
+
+  for (const key in testTargets) {
+    results[key] = await testSpeed(testTargets[key]);
+  }
+
+  logger.debug(results);
+
+  // 根据延迟排序，选择最稳最快的平台
+  return Object.entries(results).sort((a, b) => a[1] - b[1])[0][0];
+}
+
+export async function getAutoMappedService(): Promise<string> {
+  const target = {
+    // amap: 'https://surl.amap.com/2dYNorIJ1dgoN',
+    baidu: 'https://j.map.baidu.com/f9/c3x',
+    google: 'https://maps.app.goo.gl/9LqvMwEq7VaRkqnM6',
+  };
+
+  const fastestMap = await selectBestMap();
+
+  return target[fastestMap];
+}

app/utils/file.test.ts

@@ -0,0 +1,47 @@
+import { expect, test, describe } from 'vitest';
+import { formatFileSize, getFileExtension, formatFileExtension } from './file';
+
+/**
+ * 单元测试: formatFileSize
+ */
+describe('formatFileSize', () => {
+  test('format bytes correctly', () => {
+    expect(formatFileSize(500)).toBe('500.00 B');
+  });
+  test('format kilobytes correctly', () => {
+    expect(formatFileSize(2048)).toBe('2.00 KB');
+  });
+  test('format megabytes correctly', () => {
+    expect(formatFileSize(5 * 1024 * 1024)).toBe('5.00 MB');
+  });
+});
+
+/**
+ * 单元测试: getFileExtension
+ */
+describe('getFileExtension', () => {
+  test('extract extension from filename', () => {
+    expect(getFileExtension('document.pdf')).toBe('pdf');
+  });
+  test('handle filenames without extension', () => {
+    expect(getFileExtension('README')).toBe('');
+  });
+  test('handle multiple dots in filename', () => {
+    expect(getFileExtension('archive.tar.gz')).toBe('gz');
+  });
+  test('handle empty filename', () => {
+    expect(getFileExtension('')).toBe('');
+  });
+});
+
+/**
+ * 单元测试: formatFileExtension
+ */
+describe('formatFileExtension', () => {
+  test('format extension without dot', () => {
+    expect(formatFileExtension('txt')).toBe('TXT');
+  });
+  test('format extension with dot', () => {
+    expect(formatFileExtension('.jpg')).toBe('JPG');
+  });
+});

app/utils/file.ts

@@ -0,0 +1,21 @@
+export function formatFileSize(sizeInBytes: number): string {
+  if (sizeInBytes < 1024) {
+    return `${sizeInBytes.toFixed(2)} B`;
+  } else if (sizeInBytes < 1024 * 1024) {
+    const sizeInKB = sizeInBytes / 1024;
+    return `${sizeInKB.toFixed(2)} KB`;
+  } else {
+    const sizeInMB = sizeInBytes / 1024 / 1024;
+    return `${sizeInMB.toFixed(2)} MB`;
+  }
+}
+
+export function getFileExtension(filename: string): string {
+  const lastDotIndex = filename.lastIndexOf('.');
+  if (lastDotIndex === -1) return ''; // 找不到拓展名
+  return filename.slice(lastDotIndex + 1);
+}
+
+export function formatFileExtension(ext: string): string {
+  return ext.startsWith('.') ? ext.slice(1).toUpperCase() : ext.toUpperCase();
+}

app/utils/fuzzyFilter.ts

@@ -0,0 +1,108 @@
+import Fuse from 'fuse.js';
+
+interface FuzzyFilterOptions<T> {
+  /** 匹配关键字 */
+  keyword: string;
+
+  /** 搜索字段 */
+  keys: Array<FuzzyKeyOf<T>>;
+
+  /** 模糊程度 (0~1，越低越严格) */
+  threshold?: number;
+
+  /** 最小匹配字符数 */
+  minMatchCharLength?: number;
+
+  /** 当前语言 */
+  locale?: string;
+}
+
+/** 限定 keys 只能选择字符串字段 */
+type FuzzyKeyOf<T> = {
+  [K in keyof T]: T[K] extends string ? K : never;
+}[keyof T];
+
+export function fuzzyMatch<T extends object>(
+  source: T[],
+  options: FuzzyFilterOptions<T>
+): T[] {
+  const { keyword, keys, threshold = 0.35, minMatchCharLength = 1 } = options;
+
+  // --- 文本标准化函数 ---
+  const normalizeText = (text: string): string => {
+    const normalizedText = text.normalize('NFKC').toLowerCase().trim();
+    return normalizedText;
+  };
+
+  /**
+   * 类型安全的对象取值函数
+   */
+  function getPropertyByPath<T>(
+    obj: T,
+    path: string | string[]
+  ): string | undefined {
+    const keys = Array.isArray(path) ? path : path.split('.');
+    let value: unknown = obj;
+    for (const key of keys) {
+      if (value && typeof value === 'object' && key in value) {
+        value = (value as Record<string, unknown>)[key];
+      } else {
+        return undefined;
+      }
+    }
+    return typeof value === 'string' ? value : undefined;
+  }
+
+  // --- fallback 模糊匹配算法 ---
+  const fallbackFuzzyMatch = (text: string, pattern: string): boolean => {
+    const normalizedText = normalizeText(text);
+    const normalizedPattern = normalizeText(pattern);
+    let i = 0;
+    for (const char of normalizedPattern) {
+      i = normalizedText.indexOf(char, i);
+      if (i === -1) return false;
+      i++;
+    }
+    return true;
+  };
+
+  const k = keyword.trim();
+
+  if (!k) {
+    return source;
+  }
+
+  if (import.meta.client) {
+    // 客户端使用Fuze.js进行模糊匹配
+    const fuse = new Fuse<T>(source, {
+      keys: keys as string[],
+      threshold,
+      minMatchCharLength,
+      ignoreLocation: true,
+      findAllMatches: true,
+      isCaseSensitive: false,
+      getFn: (obj, path) => {
+        const value = getPropertyByPath(obj, path);
+        if (typeof value === 'string') {
+          const normalized = value
+            .normalize('NFKC')
+            .replace(/\s+/g, '')
+            .toLowerCase()
+            .trim();
+          return normalized;
+        }
+        return value;
+      },
+    });
+
+    const result = fuse.search(k);
+    return result.map((result) => result.item);
+  }
+
+  return source.filter((item) =>
+    keys.some((key) => {
+      const value = item[key];
+      return typeof value === 'string' ? fallbackFuzzyMatch(value, k) : false;
+    })
+  );
+}

app/utils/htmlDefaultMap.ts

@@ -0,0 +1,30 @@
+import type { HtmlRenderMap } from '@/composables/useHtmlRenderer';
+import { h } from 'vue';
+import MarkdownTable from '@/components/shared/MarkdownTable.vue';
+
+export const defaultHtmlRenderMap: HtmlRenderMap = {
+  h1: (_, children) => h('h1', {}, children),
+
+  h2: (_, children) => h('h2', {}, children),
+
+  p: (_, children) => h('p', {}, children),
+
+  // table: (_, children) => h('div', {}, [h('table', {}, children)]),
+  table: (node) => {
+    const { headers, rows } = parseHtmlTable(node);
+
+    return h(
+      'div',
+      {},
+      h(MarkdownTable, {
+        headers,
+        rows,
+      })
+    );
+  },
+
+  img: (node) =>
+    h('img', {
+      src: node.attribs?.src,
+    }),
+};

app/utils/markdown.ts

@@ -5,17 +5,16 @@ const md = new MarkdownIt({
   linkify: true,
   typographer: true,
   breaks: true,
-})
+});
 
 export function renderMarkdown(content: string): string {
   const dirtyHtml = md.render(content);
 
   if (typeof window !== 'undefined') {
-        import('dompurify').then((DOMPurify => {
+    import('dompurify').then((DOMPurify) => {
-            return DOMPurify.default.sanitize(dirtyHtml)
+      return DOMPurify.default.sanitize(dirtyHtml);
-        }))
+    });
   }
 
-    return dirtyHtml
+  return dirtyHtml;
 }
-

app/utils/parseTable.ts

@@ -0,0 +1,90 @@
+import type { Element, Node } from 'domhandler';
+
+export interface ParsedTable {
+  headers: string[];
+  rows: Record<string, string>[];
+}
+
+const isElement = (n: Node): n is Element => n.type === 'tag';
+
+export function parseHtmlTable(table: Element): ParsedTable {
+  if (table.name !== 'table') {
+    throw new Error('parseHtmlTable: node is not <table>');
+  }
+  // 获取 table 下的所有 tag 子节点
+  const getChildren = (node: Node): Element[] =>
+    isElement(node) ? node.children.filter(isElement) : [];
+
+  // ---- 找 thead / tbody ----
+  const children = getChildren(table);
+  const thead = children.find((n) => n.name === 'thead');
+  const tbody = children.find((n) => n.name === 'tbody');
+
+  if (!tbody) {
+    return { headers: [], rows: [] };
+  }
+
+  const bodyRows = getChildren(tbody).filter((n) => n.name === 'tr');
+
+  if (bodyRows.length === 0) {
+    return { headers: [], rows: [] };
+  }
+  // ---- 1. 表头 ----
+  let headerCells: Element[] = [];
+
+  if (thead) {
+    // 如果 Directus 有 thead（一般不会）
+    const headerRow = getChildren(thead).find((n) => n.name === 'tr');
+    headerCells = headerRow
+      ? getChildren(headerRow).filter((n) => n.name === 'th' || n.name === 'td')
+      : [];
+  } else {
+    // Directus 情况：没有 thead → 用 tbody 第一行作为 header
+    headerCells = getChildren(bodyRows[0]).filter(
+      (n) => n.name === 'th' || n.name === 'td'
+    );
+  }
+
+  logger.info(headerCells);
+
+  const headers = headerCells.map((cell, i) => {
+    const text = cell.children
+      .filter((c) => c.type === 'text')
+      .map((t) => t.data.trim())
+      .filter(Boolean)
+      .join('');
+    return text || `列${i + 1}`;
+  });
+
+  // ---- 2. 数据行 ----
+  // 如果没有 thead，则跳过第一行（它是 header）
+  const dataRows = thead ? bodyRows : bodyRows.slice(1);
+
+  const rows = dataRows.map((row) => {
+    const cells = getChildren(row).filter(
+      (n) => n.name === 'td' || n.name === 'th'
+    );
+
+    const record: Record<string, string> = {};
+
+    headers.forEach((header, i) => {
+      const cell = cells[i];
+      if (!cell) {
+        record[header] = '';
+      } else {
+        const text = cell.children
+          .filter((c) => c.type === 'text')
+          .map((t) => t.data.trim())
+          .filter(Boolean)
+          .join('');
+        record[header] = text;
+      }
+    });
+
+    return record;
+  });
+
+  logger.info(headers, rows);
+
+  return { headers, rows };
+}

commitlint.config.mjs

@@ -0,0 +1,3 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+};