feat: 页脚添加ICP跳转链接

- ICP跳转： 点击备案号跳转到工信部网站

.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

.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}'

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,6 +1,6 @@
 # 金申机械制造有限公司官方网站——前端服务
 
-这是公司（金申机械制造有限公司）官网的前端服务。项目使用Nuxt.js与Element Plus进行开发，后端服务使用Strapi。旨在为客户提供直观的公司简介、产品信息、解决方案、联系方式等。
+这是公司（金申机械制造有限公司）官网的前端服务。项目使用Nuxt.js与Element Plus进行开发，后端服务使用Directus。旨在为客户提供直观的公司简介、产品信息、解决方案、联系方式等。
 
 ## 站点内容
 
@@ -18,6 +18,8 @@
   - 联系信息
 - 关于我们
   - 公司基本信息
+- 搜索页
+  - 使用Meilisearch作为搜索引擎进行搜索
 
 ## 安装与设置
 
@@ -56,8 +58,12 @@ pnpm run dev
 
 项目用到以下环境变量，请自行在项目中配置
 
-- 'STRAPI_URL': 后端Strapi服务URL
-- 'STRAPI_TOKEN': Strapi服务的API Token
+> [!NOTE]
+>
+> - NUXT_PUBLIC_DIRECTUS_URL: 后端Directus服务URL
+> - NUXT_PUBLIC_DIRECTUS_TOKEN: 后端Directus服务的API Token
+> - MEILI_HOST: Meilisearch服务地址
+> - MEILI_SEARCH_KEY: MeilisearchKey
 
 ## 构建与部署
 
@@ -79,3 +85,20 @@ pnpm run preview
 
 部署构建后的项目并推送到文件服务器中，具体步骤视服务器配置而定
 
+## Dockerfile部署
+
+1. 构建Docker镜像
+
+在项目根目录执行docker build
+
+```bash
+docker build -t jinshen-website .
+```
+
+2. 运行docker容器
+
+```bash
+docker run --name <container-name> jinshen-website
+```
+
+网站默认在3000端口开放

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/components/DocumentList.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="document-list">
-    <el-card
-      v-for="(doc, index) in documents"
-      :key="index"
-      class="document-card"
-    >
-      <div class="document-info">
-        <h3>{{ doc.title }}</h3>
-        <div class="document-content">
-          <span v-if="doc.size" class="document-meta"
-            >大小: {{ formatFileSize(doc.size) }}
-          </span>
-          <span v-if="doc.filename" class="document-meta"
-            >格式:
-            {{ formatFileExtension(getFileExtension(doc.filename)) }}</span
-          >
-          <el-button
-            class="download-button"
-            type="primary"
-            @click="handleDownload(doc.title, doc.url)"
-          >
-            下载
-          </el-button>
-        </div>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-  defineProps({
-    documents: {
-      type: Array as () => Array<ProductDocumentView>,
-      default: () => [],
-    },
-  });
-
-  const handleDownload = async (fileName: string, fileUrl: string) => {
-    const response = await fetch(fileUrl);
-    const blob = await response.blob();
-    const url = window.URL.createObjectURL(blob);
-
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = fileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    window.URL.revokeObjectURL(url);
-  };
-</script>
-
-<style scoped>
-  .document-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    width: 100%;
-  }
-
-  .document-meta {
-    font-size: 0.8rem;
-    color: var(--el-text-color-secondary);
-  }
-
-  .download-button {
-    margin-left: auto;
-  }
-
-  .document-content {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-</style>

app/components/JinshenHeader.vue

@@ -1,170 +0,0 @@
-<template>
-  <header 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>
-
-    <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
-        type="info"
-        :underline="false"
-        href="http://cal.jinshen.cn"
-        target="_blank"
-      >
-        <el-icon class="mdi mdi-calculator action-icon" />
-      </el-link>
-
-      <el-dropdown @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-menu>
-        </template>
-      </el-dropdown>
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-  const router = useRouter();
-  const localePath = useLocalePath();
-
-  const { setLocale } = useI18n();
-
-  const activeName = ref<string | undefined>(undefined);
-
-  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; // 默认不激活任何菜单项
-    }
-  };
-
-  onMounted(() => {
-    refreshMenu();
-    // 监听路由变化以更新激活状态
-    router.afterEach(() => {
-      refreshMenu();
-    });
-  });
-</script>
-
-<style scoped>
-  .header-container {
-    padding: 0 10px;
-    display: flex;
-    height: 80px;
-    align-items: center;
-    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;
-  }
-</style>

app/components/QuestionList.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="question-list">
-    <el-collapse class="question-collapse" accordion>
-      <el-collapse-item
-        v-for="question in questions"
-        :key="question.id"
-        :title="question.title"
-        :name="question.id"
-      >
-        <markdown-renderer :content="question.content || ''" />
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-
-<script setup lang="ts">
-  defineProps({
-    questions: {
-      type: Array as PropType<ProductQuestionView[]>,
-      default: () => [],
-    },
-  });
-</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/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

@@ -7,11 +7,11 @@
         :title="item.name"
         :name="item.name"
       >
-        <el-descriptions :column="1" border>
+        <el-descriptions :column="1" label-width="30%" border>
           <el-descriptions-item
             v-for="subItem in item.specs"
             :key="subItem.key"
-            :label="subItem.value"
+            :label="subItem.key"
           >
             {{ subItem.value }}
           </el-descriptions-item>
@@ -40,6 +40,7 @@
 <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

@@ -3,19 +3,13 @@
     <div class="search-results">
       <NuxtLink
         v-for="hit in paginatedHits"
-        :key="`${hit.type}-${hit.id}`"
+        :key="`${hit.sectionType}-${hit.id}`"
         :to="localePath(resolveHitLink(hit))"
       >
-        <el-card class="result-card">
-          <h3 class="result-title">{{ hit.title }}</h3>
-          <p v-if="hit.summary" class="result-summary">
-            {{ hit.summary }}
-          </p>
-          <p v-if="hit.type" class="result-type">
-            <span>内容类型: </span>
-            <span class="result-type-name">{{ getIndexLabel(hit.type) }}</span>
-          </p>
-        </el-card>
+        <search-result-card
+          :item="hit"
+          :type-label="getIndexLabel(hit.sectionType)"
+        />
       </NuxtLink>
     </div>
 
@@ -72,7 +66,7 @@
   const items = props.searchItems;
   const filteredHits = computed(() => {
     if (props.category) {
-      return items.filter((item) => item.type === props.category);
+      return items.filter((item) => item.sectionType === props.category);
     } else {
       return items;
     }
@@ -86,7 +80,8 @@
   const indexLabels = computed<Record<string, string>>(() => ({
     product: t('search.sections.product'),
     solution: t('search.sections.solution'),
-    support: t('search.sections.support'),
+    question: t('search.sections.faq'),
+    document: t('search.sections.document'),
     default: t('search.sections.default'),
   }));
 
@@ -115,14 +110,22 @@
 
     const slug = String(slugCandidate);
 
-    if (item.type === 'product') {
+    if (item.sectionType === 'product') {
       return localePath({ path: `/products/${slug}` });
     }
 
-    if (item.type === 'solution') {
+    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;
   };
 

app/components/pages/search/SearchTabs.vue

@@ -0,0 +1,49 @@
+<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>

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

@@ -21,10 +21,10 @@
 
   const activeTab = ref(props.modelValue || '');
   const options = [
-    { label: '服务支持', value: '' },
-    { label: '常见问题', value: 'faq' },
-    { label: '文档资料', value: 'documents' },
-    { label: '联系售后', value: 'contact-us' },
+    { 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) => {

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

@@ -1,6 +1,6 @@
 <template>
   <footer class="jinshen-footer">
-    <div class="footer-container">
+    <div class="footer-container hide-on-mobile">
       <!-- Logo 和公司信息 -->
       <div class="footer-section">
         <div class="footer-logo">
@@ -48,7 +48,7 @@
         <ul class="footer-links">
           <li>
             <a
-              href="http://cal.jinshen.cn"
+              href="http://cal.3w.jinshen.cn"
               target="_blank"
               rel="noopener noreferer"
             >
@@ -84,19 +84,24 @@
             &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>
+          <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>
@@ -250,6 +255,10 @@
 
   /* 响应式设计 */
   @media (max-width: 768px) {
+    .hide-on-mobile {
+      display: none;
+    }
+
     .footer-container {
       grid-template-columns: 1fr;
       padding: 1.5rem 1rem;

app/components/shared/JinshenHeader.vue

@@ -0,0 +1,352 @@
+<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.3w.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.3w.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

@@ -13,22 +13,17 @@
 
   const props = defineProps<Props>();
 
-  const contentWithAbsoluteUrls = convertMedia(props.content);
-
   // 将 Markdown 转换成 HTML
-  const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls));
-  // const safeHtml = computed(() => renderMarkdown(props.content))
+  const safeHtml = computed(() => renderMarkdown(props.content));
 
   const container = ref<HTMLElement | null>(null);
 
   onMounted(async () => {
     await nextTick();
     if (!safeHtml.value) return;
-    console.log(safeHtml.value);
 
     // 查找所有 table
     const tables = container.value.querySelectorAll('table');
-    console.log(tables);
     tables.forEach((table) => {
       // 1. 提取表头
       const headers = Array.from(table.querySelectorAll('thead th')).map(
@@ -55,8 +50,6 @@
       app.mount(mountPoint);
     });
   });
-
-  // console.log('Rendered HTML:', safeHtml.value);
 </script>
 
 <style>

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

@@ -61,7 +61,8 @@
   }
 
   .product-card .el-image {
-    height: 150px;
+    width: 100%;
+    aspect-ratio: 16 / 10;
     border-radius: 4px;
   }
 

app/components/shared/QuestionList.vue

@@ -0,0 +1,102 @@
+<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];
+
+      // 平滑滚动到对应位置
+      const el = document.querySelector(`#q-${target.id}`);
+      el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    },
+    { 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

@@ -67,7 +67,8 @@
   }
 
   .solution-card .el-image {
-    height: 250px;
+    width: 100%;
+    aspect-ratio: 16 / 10;
   }
 
   @media (max-width: 1200px) {

app/composables/directus/useCompanyProfile.ts

@@ -1,29 +1,17 @@
-import { readSingleton } from '@directus/sdk';
-
 export const useCompanyProfile = () => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`company-profile-${locale}`, async () => {
-    return await $directus.request(
-      readSingleton('company_profile', {
-        fields: [
-          'id',
-          {
-            translations: ['id', 'content'],
-          },
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: {
-                _eq: locale,
-              },
-            },
-          },
-        },
-      })
-    );
+    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

@@ -1,29 +1,17 @@
-import { readSingleton } from '@directus/sdk';
-
 export const useContactInfo = () => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`contact-info-${locale}`, async () => {
-    return await $directus.request(
-      readSingleton('contact_info', {
-        fields: [
-          'id',
-          {
-            translations: ['id', 'content'],
-          },
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: {
-                _eq: locale,
-              },
-            },
-          },
-        },
-      })
-    );
+    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

@@ -1,19 +1,14 @@
 export const useDirectusFiles = () => {
-  const config = useRuntimeConfig();
-  const baseUrl = config.public.directus.url;
-
   const getFileUrl = (
     id?: string | null,
     options?: Record<string, string | number | boolean>
   ): string => {
     if (!id) return '';
-    const query = options
-      ? '?' +
-        new URLSearchParams(
-          Object.entries(options).map(([key, value]) => [key, String(value)])
-        ).toString()
-      : '';
-    return `${baseUrl}/assets/${id}${query}`;
+
+    const params = new URLSearchParams(
+      options as Record<string, string>
+    ).toString();
+    return `/api/assets/${id}${params ? `?${params}` : ''}`;
   };
 
   return {

app/composables/directus/useDirectusImage.ts

@@ -1,8 +1,4 @@
 export const useDirectusImage = () => {
-  const config = useRuntimeConfig();
-  const baseUrl = config.public.directus.url;
-  const token = config.public.directus.token;
-
   type DirectusAssetParams = {
     width?: number;
     height?: number;
@@ -13,19 +9,11 @@ export const useDirectusImage = () => {
 
   const getImageUrl = (id?: string | null, options?: DirectusAssetParams) => {
     if (!id) return '';
-    const queryToken = token ? 'access_token=' + token : '';
-    const queryOptions = options
-      ? new URLSearchParams(
-          Object.fromEntries(
-            Object.entries(options).map(([key, value]) => [key, String(value)])
-          )
-        ).toString
-      : '';
-    const query =
-      queryToken || queryOptions
-        ? `?${[queryToken, queryOptions].filter(Boolean).join('&')}`
-        : '';
-    return `${baseUrl}/assets/${id}${query}`;
+
+    const params = new URLSearchParams(
+      options as Record<string, string>
+    ).toString();
+    return `/api/assets/${id}${params ? `?${params}` : ''}`;
   };
 
   return { getImageUrl };

app/composables/directus/useDocumentList.ts

@@ -1,67 +1,17 @@
-import { readItems } from '@directus/sdk';
-
 export const useDocumentList = () => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`document-list-${locale}`, async () => {
-    return await $directus.request(
-      readItems('product_documents', {
-        fields: [
-          'id',
-          {
-            file: ['id', 'filesize', 'filename_download'],
-          },
-          {
-            translations: ['id', 'title'],
-          },
-          {
-            products: [
-              'id',
-              {
-                products_id: [
-                  'id',
-                  {
-                    translations: ['id', 'name'],
-                  },
-                  {
-                    product_type: [
-                      'id',
-                      {
-                        translations: ['id', 'name'],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: { _eq: locale },
-            },
-          },
-          products: {
-            products_id: {
-              translations: {
-                _filter: {
-                  languages_code: { _eq: locale },
-                },
-              },
-              product_type: {
-                translations: {
-                  _filter: {
-                    languages_code: { _eq: locale },
-                  },
-                },
-              },
-            },
-          },
-        },
-      })
-    );
+    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

@@ -1,54 +1,17 @@
-import { readSingleton } from '@directus/sdk';
-
 export const useHomepage = () => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`homepage-${locale}`, async () => {
-    return await $directus.request(
-      readSingleton('homepage', {
-        fields: [
-          'id',
-          {
-            carousel: ['id', 'directus_files_id'],
-          },
-          {
-            recommend_products: [
-              'id',
-              {
-                translations: ['id', 'name', 'summary'],
-              },
-              'cover',
-            ],
-          },
-          {
-            recommend_solutions: [
-              'id',
-              {
-                translations: ['id', 'title', 'summary'],
-              },
-              'cover',
-            ],
-          },
-        ],
-        deep: {
-          recommend_products: {
-            translations: {
-              _filter: {
-                languages_code: { _eq: locale },
-              },
-            },
-          },
-          recommend_solutions: {
-            translations: {
-              _filter: {
-                languages_code: { _eq: locale },
-              },
-            },
-          },
-        },
-      })
-    );
+    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

@@ -1,111 +1,17 @@
-import { readItem } from '@directus/sdk';
-
 export const useProduct = (id: string) => {
-  const { $directus } = useNuxtApp();
-
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`product-${id}-${locale}`, async () => {
-    return await $directus.request(
-      readItem('products', id, {
-        fields: [
-          'id',
-          { translations: ['id', 'name', 'summary', 'description'] },
-          {
-            images: [
-              'id',
-              {
-                product_images_id: [
-                  'id',
-                  'image',
-                  { translations: ['id', 'caption'] },
-                ],
-              },
-            ],
-          },
-          {
-            specs: [
-              'id',
-              {
-                translations: ['*'],
-              },
-              {
-                specs: [
-                  'id',
-                  {
-                    translations: ['id', 'key'],
-                  },
-                  'value',
-                ],
-              },
-            ],
-          },
-          {
-            faqs: [
-              'id',
-              {
-                questions_id: [
-                  'id',
-                  {
-                    translations: ['id', 'title', 'content'],
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            documents: [
-              'id',
-              {
-                product_documents_id: [
-                  'id',
-                  {
-                    file: ['id', 'filesize', 'filename_download'],
-                  },
-                  {
-                    translations: ['id', 'title'],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: { _eq: locale },
-            },
-          },
-          images: {
-            product_images_id: {
-              translations: {
-                _filter: {
-                  languages_code: { _eq: locale },
-                },
-              },
-            },
-          },
-          faqs: {
-            questions_id: {
-              translations: {
-                _filter: {
-                  languages_code: { _eq: locale },
-                },
-              },
-            },
-          },
-          documents: {
-            documents_id: {
-              translations: {
-                _filter: {
-                  languages_code: { _eq: locale },
-                },
-              },
-            },
-          },
-        },
-      })
-    );
+    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

@@ -1,42 +1,17 @@
-import { readItems } from '@directus/sdk';
-
 export const useProductList = () => {
-  const { $directus } = useNuxtApp();
-
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`product-list-${locale}`, async () => {
-    return await $directus.request(
-      readItems('products', {
-        fields: [
-          'id',
-          { translations: ['id', 'name', 'summary'] },
-          'cover',
-          {
-            product_type: [
-              'id',
-              {
-                translations: ['id', 'name'],
-              },
-            ],
-          },
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: { _eq: locale },
-            },
-          },
-          product_type: {
-            translations: {
-              _filter: {
-                languages_code: { _eq: locale },
-              },
-            },
-          },
-        },
-      })
-    );
+    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

@@ -1,63 +1,17 @@
-import { readItems } from '@directus/sdk';
-
 export const useQuestionList = () => {
-  const { $directus } = useNuxtApp();
-
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`question-list-${locale}`, async () => {
-    return await $directus.request(
-      readItems('questions', {
-        fields: [
-          'id',
-          {
-            translations: ['*'],
-          },
-          {
-            products: [
-              'id',
-              {
-                products_id: [
-                  'id',
-                  {
-                    product_type: [
-                      'id',
-                      {
-                        translations: ['id', 'name'],
-                      },
-                    ],
-                  },
-                  { translations: ['id', 'name'] },
-                ],
-              },
-            ],
-          },
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: { _eq: locale },
-            },
-          },
-          products: {
-            products_id: {
-              product_type: {
-                translations: {
-                  _filter: {
-                    languages_code: { _eq: locale },
-                  },
-                },
-              },
-              translations: {
-                _filter: {
-                  languages_code: { _eq: locale },
-                },
-              },
-            },
-          },
-        },
-      })
-    );
+    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

@@ -1,28 +1,17 @@
-import { readItem } from '@directus/sdk';
-
 export const useSolution = (id: string) => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`solution-${id}-${locale}`, async () => {
-    return await $directus.request(
-      readItem('solutions', id, {
-        fields: [
-          'id',
-          {
-            translations: ['*'],
-          },
-          'create_at',
-        ],
-        deep: {
-          translations: {
-            _filter: {
-              languages_code: { _eq: locale },
-            },
-          },
-        },
-      })
-    );
+    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

@@ -1,38 +1,17 @@
-import { readItems } from '@directus/sdk';
-
 export const useSolutionList = () => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`solution-list-${locale}`, async () => {
-    return await $directus.request(
-      readItems('solutions', {
-        fields: [
-          'id',
-          'cover',
-          {
-            type: ['id', { translations: ['id', 'name'] }],
-          },
-          {
-            translations: ['id', 'title', 'summary'],
-          },
-        ],
-        deep: {
-          type: {
-            translations: {
-              _filter: {
-                languages_code: { _eq: locale },
-              },
-            },
-          },
-          translations: {
-            _filter: {
-              languages_code: { _eq: locale },
-            },
-          },
-        },
-      })
-    );
+    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

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

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,15 +1,14 @@
-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 / Directus / Element Plus 的多语言配置
  */
 export interface LocaleMapping {
-  /** 用于StrapiLocale **/
-  strapi: StrapiLocale;
   /** 用于Directus translations.languages_code **/
   directus: string;
   /** Element Plus语言对象 **/
@@ -24,15 +23,21 @@ export interface LocaleMapping {
  */
 export const localeMap = {
   zh: {
-    strapi: 'zh-CN',
     directus: 'zh-CN',
     element: zhCn,
   },
   en: {
-    strapi: 'en',
     directus: 'en-US',
     element: en,
   },
+  es: {
+    directus: 'es-ES',
+    element: es,
+  },
+  ru: {
+    directus: 'ru-RU',
+    element: ru,
+  },
 } satisfies Record<string, LocaleMapping>;
 
 /** 应用支持的语言键类型 **/
@@ -74,8 +79,6 @@ export const useLocalizations = () => {
   return {
     /** 当前Nuxt I18n语言(只读) **/
     locale: readonly(locale),
-    /** 获取Strapi的本地化代码 **/
-    getStrapiLocale: (l?: AppLocale) => getMapping(l).strapi,
     /** 获取Directus的本地化代码 **/
     getDirectusLocale: (l?: AppLocale) => getMapping(l).directus,
     /** 获取Element Plus语言对象 **/

app/composables/useMeilisearch.ts

@@ -1,137 +0,0 @@
-import { MeiliSearch } from 'meilisearch';
-import type { SearchParams } from 'meilisearch';
-
-const parseIndexes = (
-  indexes: string | string[] | undefined,
-  locale?: string
-): string[] => {
-  if (!indexes) {
-    return [];
-  }
-
-  let suffix = '';
-  if (locale) {
-    suffix = `_${locale}`;
-  }
-
-  if (Array.isArray(indexes)) {
-    return indexes.map((item) => `${item.trim()}${suffix}`).filter(Boolean);
-  }
-  return indexes
-    .split(',')
-    .map((item) => `${item.trim()}${suffix}`)
-    .filter(Boolean);
-};
-
-export const useMeilisearch = () => {
-  const runtimeConfig = useRuntimeConfig();
-
-  const indexes = computed(() =>
-    parseIndexes(runtimeConfig.public?.meili?.indexes)
-  );
-
-  let meiliClient: MeiliSearch | null = null;
-
-  const ensureClient = () => {
-    if (meiliClient) return meiliClient;
-
-    const host = runtimeConfig.public?.meili?.host;
-    if (!host) {
-      console.warn('Meilisearch host is not configured.');
-      return null;
-    }
-    const apiKey = runtimeConfig.public?.meili?.searchKey;
-    meiliClient = new MeiliSearch({
-      host,
-      apiKey: apiKey || undefined,
-    });
-    return meiliClient;
-  };
-
-  /**
-   * 泛型搜索函数
-   * @template T 文档类型, 如 MeiliProductIndex
-   * ---
-   *  @param query 搜索关键词
-   *  @param params 其他搜索参数
-   *  @returns 搜索结果数组
-   */
-  async function search<
-    K extends MeiliSearchItemType = MeiliSearchItemType,
-    T extends MeiliIndexMap[K] = MeiliIndexMap[K],
-  >(
-    query: string,
-    params: SearchParams = {},
-    searchLocale?: string
-  ): Promise<SearchSection<T>[]> {
-    const trimmedQuery = query.trim();
-    if (!trimmedQuery) {
-      return [];
-    }
-
-    const client = ensureClient();
-    if (!client) {
-      return [];
-    }
-
-    const activeIndexes = indexes.value as K[];
-    if (!activeIndexes.length) {
-      console.warn('No Meilisearch indexes configured.');
-      return [];
-    }
-    const rawIndexMap = Object.fromEntries(
-      activeIndexes.map((index) => [`${index}_${searchLocale}`, index])
-    );
-    const indexesWithLocale = activeIndexes.map(
-      (index) => index + (searchLocale ? `_${searchLocale}` : '')
-    );
-
-    console.log(indexesWithLocale);
-
-    const requests = indexesWithLocale.map(async (indexUid) => {
-      const response = await client.index(indexUid).search<T>(trimmedQuery, {
-        limit: params.limit ?? 10,
-        ...params,
-      });
-      return {
-        indexUid,
-        response,
-      } satisfies RawSearchSection<T>;
-    });
-
-    const settled = await Promise.allSettled(requests);
-
-    console.log('Meilisearch settled results:', settled);
-
-    settled
-      .filter(
-        (result): result is PromiseRejectedResult =>
-          result.status === 'rejected'
-      )
-      .forEach((result) => {
-        console.error('Meilisearch query failed', result.reason);
-      });
-
-    return settled
-      .filter(
-        (result): result is PromiseFulfilledResult<RawSearchSection<T>> =>
-          result.status === 'fulfilled'
-      )
-      .map((result) => {
-        const { indexUid, response } = result.value;
-        return {
-          indexUid: indexUid,
-          rawIndex: rawIndexMap[indexUid],
-          hits: response.hits,
-          estimatedTotalHits:
-            response.estimatedTotalHits ?? response.hits.length,
-          processingTimeMs: response.processingTimeMs ?? 0,
-        };
-      });
-  }
-
-  return {
-    search,
-    indexes,
-  };
-};

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

@@ -12,6 +12,17 @@
   </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 {
     display: flex;

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/models/mappers/documentMapper.ts

@@ -1,77 +0,0 @@
-/**
- * 将 Directus 返回的 Document 数据转换为 ProductDocumentView 视图模型
- *
- * @param raw: 原始的 Document 数据
- * @returns 转换后的 ProductDocumentView 对象
- *
- * @example
- * const view = toProductDocumentView(rawDocument);
- */
-export function toProductDocumentView(
-  raw: ProductDocument
-): ProductDocumentView {
-  const trans = raw.translations?.[0] ?? {
-    title: '',
-  };
-
-  const fileId = typeof raw.file === 'string' ? raw.file : raw.file?.id;
-  const file = raw.file as DirectusFile;
-
-  const { getFileUrl } = useDirectusFiles();
-
-  const url = getFileUrl(fileId);
-
-  return {
-    id: raw.id,
-    filename: file.filename_download,
-    title: trans.title,
-    url: url,
-    size: file.filesize,
-  };
-}
-
-/**
- * 将 Directus 返回的 Document 数据转换为 DocumentListView 视图模型
- *
- * @param raw: 原始的 Document 数据
- * @returns 转换后的 DocumentListView 对象
- *
- * @example
- * const view = toDocumentListView(rawDocument);
- */
-export function toDocumentListView(raw: ProductDocument): DocumentListView {
-  const trans = raw.translations?.[0] ?? { title: '' };
-
-  const fileId = typeof raw.file === 'string' ? raw.file : raw.file?.id;
-  const file = raw.file as DirectusFile;
-
-  const { getFileUrl } = useDirectusFiles();
-  const url = getFileUrl(fileId);
-
-  const related_products: DocumentListProduct[] = raw.products
-    ?.filter(isObject<ProductsProductDocument>)
-    .map((item) => item.products_id)
-    .filter(isObject<Product>)
-    .map((item) => {
-      const productType =
-        isObject<ProductType>(item.product_type) &&
-        ({
-          id: item.product_type.id,
-          name: item.product_type.translations?.[0]?.name,
-        } satisfies DocumentListProductType);
-      return {
-        id: item.id,
-        name: item.translations?.[0]?.name,
-        type: productType,
-      };
-    });
-
-  return {
-    id: raw.id,
-    filename: file.filename_download,
-    title: trans.title,
-    url: url,
-    size: file.filesize,
-    products: related_products,
-  };
-}

app/models/mappers/productMapper.ts

@@ -1,134 +0,0 @@
-/**
- * 将 Directus返回的 Product 数据转换为 ProductListView 视图模型
- *
- * @param raw: 原始的 Product 数据
- * @returns 转换后的 ProductListView 对象
- *
- * @example
- * const view = toProductListView(rawProduct);
- */
-export function toProductListView(raw: Product): ProductListView {
-  const trans = raw.translations?.[0] ?? { name: '', summary: '' };
-
-  return {
-    id: raw.id,
-    product_type:
-      typeof raw.product_type === 'string'
-        ? raw.product_type
-        : typeof raw.product_type === 'object' && raw.product_type
-          ? raw.product_type.translations[0].name || ''
-          : '',
-    name: trans.name,
-    summary: trans.summary,
-    cover: raw.cover.toString(),
-  };
-}
-
-/**
- * 将 Directus 返回的 ProductSpecGroup 数据转换为 ProductSpecGroupView 视图模型
- *
- * @param raw: 原始的 ProductSpecGroup 数据
- * @returns 转换后的 ProductSpecGroupView 对象
- *
- * @example
- * const view = toProductSpecGroupView(rawSpecGroup);
- */
-export function toProductSpecGroupView(
-  raw: ProductSpecGroup
-): ProductSpecGroupView {
-  const trans = raw.translations?.[0] ?? {
-    name: '',
-  };
-
-  return {
-    id: raw.id,
-    name: trans.name,
-    specs: raw.specs
-      .filter(isObject<ProductSpec>)
-      .map((item) => toProductSpecView(item)),
-  };
-}
-
-/**
- * 将 Directus 返回的 ProductSpec 数据转换为 ProductSpecView 视图模型
- *
- * @param raw: 原始的 ProductSpec 数据
- * @returns 转换后的 ProductSpecView 对象
- *
- * @example
- * const view = toProductSpecView(rawSpecGroup);
- */
-export function toProductSpecView(raw: ProductSpec): ProductSpecView {
-  const trans = raw.translations?.[0] ?? {
-    key: '',
-  };
-
-  return {
-    id: raw.id,
-    key: trans.key,
-    value: raw.value,
-  };
-}
-
-/**
- * 将 Directus 返回的 Product 数据转换为 ProductView 视图模型
- *
- * @param raw: 原始的 Product 数据
- * @returns 转换后的 ProductView 对象
- *
- * @example
- * const view = toProductView(rawProduct);
- */
-export function toProductView(raw: Product): ProductView {
-  const trans = raw.translations?.[0] ?? {
-    name: '',
-    summary: '',
-    description: '',
-  };
-
-  const images = (raw.images ?? [])
-    .filter(isObject<ProductsProductImage>)
-    .map((item) => item.product_images_id)
-    .filter(isObject<ProductImage>)
-    .map((item) => {
-      return {
-        id: item.id,
-        image: item.image.toString(),
-        caption: item.translations?.[0]?.caption || '',
-      };
-    });
-
-  const specs = (raw.specs ?? [])
-    .filter(isObject<ProductSpecGroup>)
-    .map((item) => toProductSpecGroupView(item));
-
-  const faqs = (raw.faqs ?? [])
-    .filter(isObject<ProductsQuestion>)
-    .map((item) => item.questions_id)
-    .filter(isObject<Question>)
-    .map((item) => toProductQuestionView(item));
-
-  const documents = (raw.documents ?? [])
-    .filter(isObject<ProductsProductDocument>)
-    .map((item) => item.product_documents_id)
-    .filter(isObject<ProductDocument>)
-    .map((item) => toProductDocumentView(item));
-
-  return {
-    id: raw.id,
-
-    product_type:
-      typeof raw.product_type === 'string'
-        ? raw.product_type
-        : typeof raw.product_type === 'object' && raw.product_type
-          ? raw.product_type.translations[0].name || ''
-          : '',
-    name: trans.name,
-    summary: trans.summary,
-    images: images,
-    description: trans.description,
-    specs: specs,
-    faqs: faqs,
-    documents: documents,
-  };
-}

app/models/mappers/questionMapper.ts

@@ -1,59 +0,0 @@
-/**
- * 将 Directus 返回的 Question 数据转换为 ProductQuestionView 视图模型
- *
- * @param raw: 原始的 Question 数据
- * @returns 转换后的 ProductQuestionView 对象
- *
- * @example
- * const view = toProductQuestionView(rawQuestion);
- */
-export function toProductQuestionView(raw: Question): ProductQuestionView {
-  const trans = raw.translations?.[0] ?? { title: '', content: '' };
-
-  return {
-    id: raw.id,
-    title: trans.title,
-    content: trans.content,
-  };
-}
-
-/**
- * 将 Directus 返回的 Question 数据转换为 QuestionListView 视图模型
- *
- * @param raw: 原始的 Question 数据
- * @returns 转换后的 QuestionListView 对象
- * ---
- *  @example
- *  const view = toQuestionListView(rawQuestion);
- */
-export function toQuestionListView(raw: Question): QuestionListView {
-  const trans = raw.translations?.[0] ?? { title: '', content: '' };
-
-  const related_products: QuestionListProduct[] = (raw.products ?? [])
-    .filter(isObject<ProductsQuestion>)
-    .map((item) => item.products_id)
-    .filter(isObject<Product>)
-    .map((item) => {
-      const translations = item.translations[0] ?? { name: '' };
-
-      const product_type =
-        isObject<ProductType>(item.product_type) &&
-        ({
-          id: item.product_type.id,
-          name: item.product_type.translations[0]?.name,
-        } satisfies QuestionListProductType);
-
-      return {
-        id: item.id,
-        name: translations.name,
-        type: product_type,
-      };
-    });
-
-  return {
-    id: raw.id,
-    title: trans.title,
-    content: trans.content,
-    products: related_products,
-  };
-}

app/models/mappers/solutionMapper.ts

@@ -1,54 +0,0 @@
-/**
- * 将 Directus 返回的 Solution 数据转换为 SolutionListView 视图模型
- *
- * @param raw: 原始的 Solution 数据
- * @returns 转换后的 SolutionListView 对象
- *
- * ---
- *
- * @example
- * const view = toSolutionListView(rawSolution);
- */
-export function toSolutionListView(raw: Solution): SolutionListView {
-  const trans = raw.translations?.[0] ?? {
-    title: '',
-    summary: '',
-  };
-
-  return {
-    id: raw.id,
-    title: trans.title,
-    summary: trans.summary,
-    solution_type: isObject<SolutionType>(raw.type)
-      ? raw.type.translations[0].name
-      : '',
-    cover: isObject<DirectusFile>(raw.cover) ? raw.cover.id : raw.cover,
-  };
-}
-
-/**
- * 将 Directus 返回的 Solution 数据转换为 SolutionView 视图模型
- *
- * @param raw: 原始的 Solution 数据
- * @returns 转换后的 SolutionView 对象
- *
- * ---
- *
- * @example
- * const view = toSolutionView(rawSolution);
- */
-export function toSolutionView(raw: Solution): SolutionView {
-  const trans = raw.translations?.[0] ?? {
-    title: '',
-    summary: '',
-    content: '',
-  };
-
-  return {
-    id: raw.id,
-    title: trans.title,
-    summary: trans.summary,
-    content: trans.content,
-    createAt: raw.create_at,
-  };
-}

app/models/views/ProductDocumentView.ts

@@ -1,20 +0,0 @@
-/**
- * 文档视图模型
- * 用于文档列表渲染的数据结构
- */
-export interface ProductDocumentView {
-  /** 唯一标识符 **/
-  id: number;
-
-  /** 文件名 **/
-  filename: string;
-
-  /** 文档标题 **/
-  title: string;
-
-  /** 文档大小 **/
-  size: number;
-
-  /** 文档链接 **/
-  url: string;
-}

app/models/views/ProductQuestionView.ts

@@ -1,14 +0,0 @@
-/**
- * 常见问题视图模型
- * 用于产品页常见问题渲染的数据结构
- */
-export interface ProductQuestionView {
-  /** 唯一标识符 **/
-  id: number;
-
-  /** 问题标题 **/
-  title: string;
-
-  /** 问题内容 **/
-  content: string;
-}

app/models/views/ProductSpecGroupView.ts

@@ -1,29 +0,0 @@
-/**
- * 产品规格模型
- * 用于产品规格渲染的数据结构
- */
-export interface ProductSpecView {
-  /** 唯一标识符 **/
-  id: number;
-
-  /** 规格名称 **/
-  key: string;
-
-  /** 规格值 **/
-  value: string;
-}
-
-/**
- * 产品规格表模型
- * 用于产品规格表渲染的数据结构
- */
-export interface ProductSpecGroupView {
-  /** 唯一标识符 **/
-  id: number;
-
-  /** 规格组名称 **/
-  name: string;
-
-  /** 规格组 **/
-  specs: ProductSpecView[];
-}

app/models/views/ProductView.ts

@@ -1,38 +0,0 @@
-interface ImageView {
-  id: number;
-  image: string;
-  caption: string;
-}
-
-/**
- * 产品视图模型
- * 用于产品详情页(/products/[slug])渲染的数据结构
- */
-export interface ProductView {
-  /** 唯一标识符 **/
-  id: number;
-
-  /** 产品名称 **/
-  name: string;
-
-  /** 产品简介 **/
-  summary: string;
-
-  /** 产品类型 **/
-  product_type: string;
-
-  /** 产品图片 **/
-  images: ImageView[];
-
-  /** 产品详情 **/
-  description: string;
-
-  /** 产品规格 **/
-  specs: ProductSpecGroupView[];
-
-  /** 产品常见问题 **/
-  faqs: QuestionView[];
-
-  /** 产品文档 **/
-  documents: ProductDocumentView[];
-}

app/models/views/SearchItemView.ts

@@ -1,13 +0,0 @@
-export interface SearchItemView {
-  /** 唯一标识符 **/
-  id: number;
-
-  /** 条目类型 **/
-  type: 'product' | 'solution' | 'question' | 'document';
-
-  /** 条目标题 **/
-  title: string;
-
-  /** 条目摘要 **/
-  summary?: string;
-}

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

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

app/pages/about/index.vue

@@ -1,34 +1,32 @@
 <template>
   <div class="page-container">
     <div v-if="!pending">
-      <el-breadcrumb class="breadcrumb" separator="/">
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/')">
-            {{ $t('navigation.home') }}
-          </NuxtLink>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/about')">
-            {{ $t('navigation.about-us') }}
-          </NuxtLink>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
 
       <div class="content">
-        <markdown-renderer :content="content.content || ''" />
+        <!-- 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> -->
       </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('/support/contact-us')">
-          <el-card class="card-button">
-            <el-icon class="icon" size="80">
-              <ElIconService />
-            </el-icon>
-            <br />
-            联系信息
-          </el-card>
-        </NuxtLink>
+        <learn-more-card
+          :title="$t('navigation.contact-info')"
+          :icon="ElIconService"
+          :to="$localePath('/support/contact-us')"
+        />
+        <learn-more-card
+          :title="$t('navigation.address')"
+          :icon="ElIconMapLocation"
+          @click="openMap"
+        />
       </div>
     </div>
     <div v-else class="loading">
@@ -38,15 +36,32 @@
 </template>
 
 <script setup lang="ts">
-  const { data, pending, error } = await useCompanyProfile();
+  const localePath = useLocalePath();
+  const hydrated = ref(false);
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.about-us') },
+  ];
+  const { data: companyProfile, pending, error } = await useCompanyProfile();
 
-  const content = computed(() => toCompanyProfileView(data.value));
+  const openMap = () => {
+    window.open(localePath('/locate'));
+  };
 
   watch(error, (value) => {
     if (value) {
-      console.error('数据获取失败: ', value);
+      logger.error('数据获取失败: ', value);
     }
   });
+
+  const pageTitle = computed(() => $t('page-title.about-us'));
+  useHead({
+    title: pageTitle,
+  });
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
 </script>
 
 <style scoped>
@@ -65,14 +80,6 @@
     margin-bottom: 2rem;
   }
 
-  :deep(.markdown-body p) {
-    text-indent: 2em;
-  }
-
-  :deep(.markdown-body h2) {
-    text-align: center;
-  }
-
   :deep(.el-divider__text) {
     color: var(--el-color-info);
     font-size: 1em;
@@ -83,25 +90,7 @@
     justify-content: left;
     margin-top: 2rem;
     margin-left: 2rem;
-  }
-
-  .card-button {
-    width: 20%;
-    min-width: 200px;
-    padding: 20px;
-    margin: 0 auto;
-    cursor: pointer;
-    text-align: center;
-    font-size: 1.5em;
-  }
-
-  .card-button:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  }
-
-  .icon {
-    padding: 10px;
+    gap: 2rem;
   }
 
   .loading {
@@ -110,4 +99,12 @@
     align-items: center;
     margin-top: 1rem;
   }
+
+  @media (max-width: 768px) {
+    .button-group {
+      align-items: center;
+      margin-left: 0;
+      gap: 0.5rem;
+    }
+  }
 </style>

app/pages/download/[id].vue

@@ -0,0 +1,69 @@
+<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 v-if="!pending" class="page-content">
+      <file-card :file-id="id" :file="file" />
+    </div>
+    <div v-else>
+      <el-skeleton :rows="6" animated />
+    </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;
+  }
+</style>

app/pages/index.vue

@@ -1,309 +1,24 @@
 <template>
   <div class="homepage">
-    <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>
-
-    <section class="homepage-section">
-      <h2>推荐产品</h2>
-      <p>
-        探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
-      </p>
-      <div v-if="!pending">
-        <el-carousel
-          class="recommend-carousel"
-          height="auto"
-          arrow="never"
-          indicator-position="outside"
-          :autoplay="false"
-        >
-          <el-carousel-item
-            v-for="n in Math.floor(recommend_products.length / 3) + 1"
-            :key="n"
-            class="recommend-list"
-          >
-            <div class="recommend-card-group">
-              <el-card
-                v-for="(item, index) in recommend_products.slice(
-                  (n - 1) * 3,
-                  n * 3
-                )"
-                :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>
-    <section class="homepage-section">
-      <h2>推荐解决方案</h2>
-      <p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
-      <div v-if="!pending">
-        <el-carousel
-          class="recommend-carousel"
-          height="auto"
-          arrow="never"
-          indicator-position="outside"
-          :autoplay="false"
-        >
-          <el-carousel-item
-            v-for="n in Math.floor(recommend_solutions.length / 3) + 1"
-            :key="n"
-            class="recommend-list"
-          >
-            <div class="recommend-card-group">
-              <el-card
-                v-for="(item, index) in recommend_solutions.slice(
-                  (n - 1) * 3,
-                  n * 3
-                )"
-                :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>
+    <homepage-carousel :homepage-data="data" :pending="pending" />
+    <homepage-product-section :homepage-data="data" :pending="pending" />
+    <homepage-solution-section :homepage-data="data" :pending="pending" />
   </div>
 </template>
 
 <script setup lang="ts">
-  const { getImageUrl } = useDirectusImage();
-
   const { data, pending, error } = await useHomepage();
 
-  const homepageData = computed(() => {
-    return toHomepageView(data.value);
-  });
-
-  const carousel = computed(() => homepageData.value?.carousel);
-
-  const recommend_products = computed(
-    () => homepageData.value?.recommendProducts
-  );
-  const recommend_solutions = computed(
-    () => homepageData.value?.recommendSolutions
-  );
-
-  watch(pending, () => {
-    console.log(data.value);
-  });
+  const pageTilte = $t('page-title.homepage');
 
   watch(error, (value) => {
     if (value) {
-      console.error('数据获取失败: ', value);
+      logger.error('数据获取失败: ', value);
     }
   });
 
-  const handleProductCardClick = (documentId: string) => {
-    // 使用路由导航到产品详情页
-    if (documentId) {
-      const localePath = useLocalePath();
-      const router = useRouter();
-      router.push(localePath(`/products/${documentId}`));
-    }
-  };
-
-  const handleSolutionCardClick = (documentId: string) => {
-    // 使用路由导航到解决方案详情页
-    if (documentId) {
-      const localePath = useLocalePath();
-      const router = useRouter();
-      router.push(localePath(`/solutions/${documentId}`));
-    }
-  };
+  useSeoMeta({
+    title: pageTilte,
+    description: $t('company-description'),
+  });
 </script>
-
-<style scoped lang="scss">
-  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;
-  }
-
-  .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;
-  }
-
-  .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: 400px;
-  }
-
-  .recommend-card-group {
-    display: flex;
-    gap: 1rem;
-    width: 100%;
-    margin: 0 auto;
-    height: 100%;
-  }
-
-  .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%;
-    border-radius: 4px;
-  }
-</style>

app/pages/locate.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>redirecting...</div>
+</template>
+
+<script setup lang="ts">
+  onMounted(async () => {
+    const platform = await getAutoMappedService();
+
+    // // ✔ 移动端能正常跳转
+    window.location.href = platform;
+  });
+</script>

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/products/[...slug].vue

@@ -1,244 +0,0 @@
-<template>
-  <div class="page-container">
-    <div v-if="!pending">
-      <div v-if="product">
-        <!-- 面包屑导航 -->
-        <el-breadcrumb class="breadcrumb" separator="/">
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/')">{{
-              $t('navigation.home')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/products')">{{
-              $t('navigation.products')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-          <el-breadcrumb-item class="text-md opactiy-50">{{
-            product.name
-          }}</el-breadcrumb-item>
-        </el-breadcrumb>
-
-        <!-- 产品详情内容 -->
-        <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="500px"
-              :autoplay="false"
-              :loop="false"
-              arrow="always"
-            >
-              <el-carousel-item
-                v-for="(item, index) in product.images || []"
-                :key="index"
-              >
-                <div class="product-carousel-item">
-                  <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>
-          </div>
-        </div>
-
-        <!-- 产品详细描述 -->
-        <div class="product-content">
-          <el-tabs v-model="activeName" class="product-tabs" stretch>
-            <el-tab-pane label="产品详情" name="details">
-              <markdown-renderer :content="product.description || ''" />
-            </el-tab-pane>
-            <el-tab-pane label="技术规格" name="specs">
-              <spec-table :data="product.specs" />
-            </el-tab-pane>
-            <el-tab-pane label="常见问题" name="faq">
-              <question-list :questions="product.faqs" />
-            </el-tab-pane>
-            <el-tab-pane label="相关文档" name="documents">
-              <document-list :documents="product.documents" />
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-      </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('/products')">
-              {{ $t('back-to-products') }}
-            </el-button>
-          </template>
-        </el-result>
-      </div>
-    </div>
-    <div v-else 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>
-</template>
-
-<script setup lang="ts">
-  const route = useRoute();
-
-  const { getImageUrl } = useDirectusImage();
-
-  // 获取路由参数
-  const id = computed(() => route.params.slug as string);
-
-  const { data, pending, error } = await useProduct(id.value);
-
-  console.log('Raw Data: ', data.value);
-
-  const rawProduct = computed(() => data.value ?? null);
-  const product = computed(() => {
-    return toProductView(rawProduct.value);
-  });
-
-  console.log('View Data: ', product.value);
-
-  const activeName = ref('details'); // 默认选中概览标签
-
-  watch(error, (value) => {
-    if (value) {
-      console.error('数据获取失败: ', value);
-    }
-  });
-
-  // SEO
-  useHead({
-    title: computed(() => product.value?.name || 'Product Detail'),
-    meta: [
-      {
-        name: 'description',
-        content: computed(() => product.value?.summary || ''),
-      },
-    ],
-  });
-</script>
-
-<style scoped>
-  .page-container {
-    min-height: 80vh;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .breadcrumb {
-    padding: 2rem;
-  }
-
-  .product-header {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    gap: 3rem;
-  }
-
-  .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;
-  }
-
-  .product-tabs ::v-deep(.el-tabs__nav) {
-    min-width: 30%;
-    float: right;
-  }
-
-  .product-tabs ::v-deep(.el-tabs__content) {
-    padding: 10px;
-  }
-
-  .product-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) {
-    .product-header {
-      grid-template-columns: 1fr;
-      gap: 2rem;
-    }
-
-    .product-info h1 {
-      font-size: 2rem;
-    }
-  }
-</style>

app/pages/products/[slug].vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="page-container">
+    <div v-if="!pending">
+      <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>
+    <div v-else 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>
+</template>
+
+<script setup lang="ts">
+  const route = useRoute();
+  const localePath = useLocalePath();
+
+  // 获取路由参数
+  const id = route.params.slug as string;
+
+  const { data: product, pending, 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

@@ -1,32 +1,27 @@
 <template>
   <div class="page-container">
     <div class="page-header">
-      <h1 class="page-title">{{ $t('our-products') }}</h1>
-      <el-breadcrumb class="breadcrumb">
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/')">{{
-            $t('navigation.home')
-          }}</NuxtLink>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/products')">{{
-            $t('navigation.products')
-          }}</NuxtLink>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+      <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 v-if="!pending" class="page-content">
       <div class="products-container">
         <el-collapse v-model="activeNames" class="product-collapse">
           <el-collapse-item
-            v-for="(group, type) in groupedProducts"
-            :key="type"
-            :title="type || '未分类'"
-            :name="type || 'no-category'"
+            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 group"
+                v-for="product in value.data"
                 :key="product.id"
                 :slug="product.id.toString()"
                 :image-url="getImageUrl(product.cover.toString())"
@@ -45,37 +40,33 @@
 </template>
 
 <script setup lang="ts">
+  const localePath = useLocalePath();
   const { getImageUrl } = useDirectusImage();
 
-  const { data, pending, error } = useProductList();
+  const { data: products, pending, error } = await useProductList();
 
   const activeNames = ref<string[]>([]);
 
-  const productsRaw = computed(() => data.value ?? []);
-  const products = computed(() =>
-    productsRaw.value.map((item) => toProductListView(item))
-  );
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.products') },
+  ];
 
   // 按类型分组
-  // 兼容 product_type 既可能为对象也可能为字符串
   const groupedProducts = computed(() => {
-    const groups: Record<string, ProductListView[]> = {};
+    const groups: Record<string, { data: ProductListView[]; sort: number }> =
+      {};
     for (const prod of products.value) {
-      let typeKey = '';
-      if (typeof prod.product_type === 'string') {
-        typeKey = prod.product_type;
-      } else if (
-        prod.product_type &&
-        typeof prod.product_type === 'object' &&
-        'name' in prod.product_type
-      ) {
-        typeKey = prod.product_type || '';
+      const typeKey = prod.product_type?.name ?? '';
+      if (!groups[typeKey]) {
+        groups[typeKey] = { data: [], sort: prod.product_type?.sort ?? 999 };
       }
-      if (!groups[typeKey]) groups[typeKey] = [];
-      groups[typeKey]?.push(prod);
+      groups[typeKey]?.data.push(prod);
     }
-    console.log(groups);
-    return groups;
+    const sortedGroups = Object.fromEntries(
+      Object.entries(groups).sort(([, a], [, b]) => a.sort - b.sort)
+    );
+    return sortedGroups;
   });
 
   watch(groupedProducts, () => {
@@ -89,13 +80,7 @@
 
   watch(error, (value) => {
     if (value) {
-      console.error('数据获取失败: ', value);
-    }
-  });
-
-  watch(pending, (value) => {
-    if (!value) {
-      console.log('AsyncData: ', data.value);
+      logger.error('数据获取失败: ', value);
     }
   });
 
@@ -107,6 +92,11 @@
       ];
     }
   });
+
+  const pageTitle = $t('page-title.products');
+  usePageSeo({
+    title: pageTitle,
+  });
 </script>
 
 <style scoped>
@@ -118,13 +108,18 @@
 
   .page-header {
     display: flex;
+    margin-bottom: 1rem;
   }
 
   .page-title {
     font-size: 2rem;
     font-weight: bold;
     color: var(--el-color-primary);
-    margin-bottom: 1rem;
+  }
+
+  .page-subtitle {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
   }
 
   .breadcrumb {

app/pages/search.vue

@@ -1,80 +1,10 @@
 <template>
   <div class="search-page">
-    <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>
-
+    <search-header v-model="keyword" />
     <div v-if="loading" class="search-state">
       <el-skeleton :rows="4" animated />
     </div>
-    <div v-else-if="hasResults" class="search-results">
-      <el-tabs v-model="activeTab">
-        <el-tab-pane :label="`全部(${resultCount['all']})`" name="all">
-          <search-results
-            v-model:current-page="currentPage"
-            :search-items="searchItems"
-          />
-        </el-tab-pane>
-        <el-tab-pane
-          :label="`产品(${resultCount['product'] || 0})`"
-          name="product"
-        >
-          <search-results
-            v-model:current-page="currentPage"
-            :search-items="searchItems"
-            category="product"
-          />
-        </el-tab-pane>
-        <el-tab-pane
-          :label="`解决方案(${resultCount['solution'] || 0})`"
-          name="solution"
-        >
-          <search-results
-            v-model:current-page="currentPage"
-            :search-items="searchItems"
-            category="solution"
-          />
-        </el-tab-pane>
-        <el-tab-pane
-          :label="`相关问题(${resultCount['question'] || 0})`"
-          name="question"
-        >
-          <search-results
-            v-model:current-page="currentPage"
-            :search-items="searchItems"
-            category="question"
-          />
-        </el-tab-pane>
-        <el-tab-pane
-          :label="`文档资料(${resultCount['document'] || 0})`"
-          name="document"
-        >
-          <search-results
-            v-model:current-page="currentPage"
-            :search-items="searchItems"
-            category="document"
-          />
-        </el-tab-pane>
-      </el-tabs>
-    </div>
+    <search-tabs v-else-if="hasResults" :search-items="searchItems" />
     <div v-else class="search-state">
       <el-empty
         :description="
@@ -88,142 +18,60 @@
 </template>
 
 <script setup lang="ts">
-  import { Search } from '@element-plus/icons-vue';
-
   // i18n相关
   const { t } = useI18n();
   const { getDirectusLocale } = useLocalizations();
-  const directusLocale = getDirectusLocale();
+  const locale = getDirectusLocale();
 
   // 路由相关
   const route = useRoute();
-  const router = useRouter();
-  const localePath = useLocalePath();
 
   // 搜索相关
-  const { search } = useMeilisearch();
   const keyword = ref('');
-  const activeRequestId = ref(0);
+
+  if (typeof route.query.query === 'string' && route.query.query.trim()) {
+    keyword.value = route.query.query;
+  }
 
   const {
-    data: sections,
+    data: searchItems,
     pending: loading,
     error,
-  } = await useAsyncData(
-    () => `search-${directusLocale}-${route.query.query ?? ''}`,
-    async () => {
-      const q = String(route.query.query ?? '').trim();
-      if (!q) return [];
-      return await search(q, { limit: 12 }, directusLocale);
-    }
-  );
-
-  // 空Section过滤
-  const filteredSections = computed(() =>
-    sections.value.filter((section) => section.hits.length > 0)
-  );
-
-  const typeMap = {
-    products: 'products',
-    solutions: 'solutions',
-    questions: 'questions',
-    product_documents: 'product_documents',
-  } as const;
-  // 展平hits
-  const hits = computed(() =>
-    filteredSections.value.flatMap((section) => {
-      const type = typeMap[section.rawIndex as keyof typeof typeMap];
-      if (!type) return [];
-      return section.hits.map((hit) => ({ type, content: hit }));
-    })
-  );
-
-  const searchItems = computed(() =>
-    hits.value.map((hit) => {
-      return toSearchItemView(hit.content, hit.type);
-    })
-  );
-
-  console.log(searchItems.value);
-
-  // 分类控制
-  const activeTab = ref('all');
-  const resultCount = computed(() => {
-    const map: Record<string, number> = { all: searchItems.value.length };
-    for (const item of searchItems.value) {
-      map[item.type] = (map[item.type] ?? 0) + 1;
-    }
-    return map;
-  });
-
-  // 分页控制
-  const currentPage = ref(1);
-
-  const hasResults = computed(() =>
-    filteredSections.value.some((section) => section.hits.length > 0)
-  );
-
-  const navigateToQuery = (value: string) => {
-    const trimmed = value.trim();
-    if (!trimmed) return;
-    navigateTo({
-      path: localePath('/search'),
-      query: { query: trimmed },
-    });
-  };
-
-  const performSearch = async (value: string) => {
-    activeRequestId.value += 1;
-    const requestId = activeRequestId.value;
-    const trimmed = value.trim();
-    if (!trimmed) {
-      if (requestId === activeRequestId.value) {
-        sections.value = [];
-        loading.value = false;
-      }
-      return;
-    }
-
+    refresh,
+  } = useAsyncData(`meilisearch-${keyword.value}-${locale}`, async () => {
     try {
-      const results = await search(trimmed, { limit: 12 }, directusLocale);
-      if (requestId === activeRequestId.value) {
-        sections.value = results;
-      }
-      console.log('hits:', hits.value);
-      console.log(resultCount.value);
+      const data = await $fetch(`/api/search?query=${keyword.value}`, {
+        headers: { 'x-locale': locale },
+      });
+      return data;
     } catch (error) {
-      console.error('Failed to perform search', error);
-      if (requestId === activeRequestId.value) {
-        sections.value = [];
-      }
+      logger.error('Error fetching search results: ', error);
+      throw error;
     }
-  };
-
-  const handleClear = () => {
-    keyword.value = '';
-    sections.value = [];
-    router.replace(localePath({ path: '/search' }));
-  };
-
-  watch(activeTab, () => {
-    currentPage.value = 1; // 重置页码
   });
 
+  const hasResults = computed(() => searchItems.value.length > 0);
+
   watch(
     () => route.query.query,
     async (newQuery) => {
       if (typeof newQuery === 'string' && newQuery.trim()) {
         keyword.value = newQuery;
-        await performSearch(newQuery);
-      } else {
-        loading.value = false;
+        await refresh();
       }
     }
   );
 
+  watch(
+    () => locale,
+    async () => {
+      await refresh();
+    }
+  );
+
   watch(error, (value) => {
     if (value) {
-      console.error('数据获取失败: ', value);
+      logger.error('数据获取失败: ', value);
     }
   });
 
@@ -245,42 +93,6 @@
     min-height: 70vh;
   }
 
-  .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;
-  }
-
-  .search-meta {
-    font-size: 0.9rem;
-    color: var(--el-text-color-secondary);
-  }
-
   .search-state {
     display: flex;
     justify-content: center;

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

@@ -1,143 +0,0 @@
-<template>
-  <div class="page-container">
-    <div v-if="!pending">
-      <div v-if="solution">
-        <div class="page-header">
-          <el-breadcrumb class="breadcrumb" separator="/">
-            <el-breadcrumb-item class="text-md opacity-50">
-              <NuxtLink :to="$localePath('/')">{{
-                $t('navigation.home')
-              }}</NuxtLink>
-            </el-breadcrumb-item>
-            <el-breadcrumb-item class="text-md opacity-50">
-              <NuxtLink :to="$localePath('/solutions')">{{
-                $t('navigation.solutions')
-              }}</NuxtLink>
-            </el-breadcrumb-item>
-            <el-breadcrumb-item class="text-md opacity-50">{{
-              solution.title
-            }}</el-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
-        <div class="page-content">
-          <div class="solution-info">
-            <h1>{{ solution.title }}</h1>
-            <div class="solution-meta">
-              <span class="solution-date">
-                CreatedAt:
-                {{ new Date(solution.createAt).toLocaleDateString() }}
-              </span>
-            </div>
-          </div>
-          <p class="summary">{{ solution.summary }}</p>
-          <div class="solution-content">
-            <markdown-renderer :content="solution.content || ''" />
-          </div>
-        </div>
-      </div>
-      <div v-else class="not-found">
-        <el-result
-          icon="warning"
-          :title="$t('solution-not-found')"
-          :sub-title="$t('solution-not-found-desc')"
-        >
-          <template #extra>
-            <el-button type="primary" @click="$router.push('/solutions')">
-              {{ $t('back-to-solutions') }}
-            </el-button>
-          </template>
-        </el-result>
-      </div>
-    </div>
-    <div v-else class="loading">
-      <el-skeleton :rows="5" animated />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const route = useRoute();
-
-  // 获取路由参数(documentId)
-  const id = computed(() => route.params.slug as string);
-
-  const { data, pending, error } = await useSolution(id.value);
-
-  console.log('RawData: ', data.value);
-  const process = toSolutionView(data.value);
-  console.log('Processed Solution: ', process);
-
-  const solution = computed(() => toSolutionView(data.value));
-
-  watch(error, (value) => {
-    if (value) {
-      console.error('数据获取失败: ', value);
-    }
-  });
-</script>
-
-<style scoped>
-  .page-container {
-    padding: 1rem;
-    min-height: 80vh;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .breadcrumb {
-    padding: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .solution-header {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-  }
-
-  .solution-header el-image {
-    width: 200px;
-    height: 200px;
-    border-radius: 4px;
-  }
-
-  .page-content h1 {
-    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);
-  }
-
-  .summary {
-    font-size: 0.8rem;
-    color: var(--el-text-color-secondary);
-    text-align: center;
-  }
-
-  .solution-content {
-    margin-top: 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/[slug].vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="page-container">
+    <div v-if="!pending">
+      <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>
+    <div v-else class="loading">
+      <el-skeleton :rows="5" animated />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const route = useRoute();
+  const localePath = useLocalePath();
+
+  // 获取路由参数
+  const id = route.params.slug as string;
+
+  const { data: solution, pending, 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

@@ -1,19 +1,12 @@
 <template>
   <div class="page-container">
     <div class="page-header">
-      <h1 class="page-title">{{ $t('learn-our-solutions') }}</h1>
-      <el-breadcrumb class="breadcrumb">
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/')">{{
-            $t('navigation.home')
-          }}</NuxtLink>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/solutions')">{{
-            $t('navigation.solutions')
-          }}</NuxtLink>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+      <div>
+        <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 v-if="!pending" class="solutions-container">
       <el-tabs v-model="activeName" class="solutions-tabs">
@@ -30,14 +23,14 @@
           </div>
         </el-tab-pane>
         <el-tab-pane
-          v-for="(group, type) in groupedSolutions"
-          :key="type"
-          :label="type || '未分类'"
-          :name="type || 'no-category'"
+          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 group"
+              v-for="solution in value.data"
               :key="solution.id"
               :document-id="solution.id.toString()"
               :cover-url="getImageUrl(solution.cover || '')"
@@ -55,44 +48,45 @@
 </template>
 
 <script setup lang="ts">
+  const localePath = useLocalePath();
   const { getImageUrl } = useDirectusImage();
 
-  const { data, pending, error } = await useSolutionList();
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.solutions') },
+  ];
 
-  const solutionsRaw = computed(() => data.value ?? []);
-  const solutions = computed(() =>
-    solutionsRaw.value.map((item) => toSolutionListView(item))
-  );
+  const { data: solutions, pending, error } = await useSolutionList();
 
   const activeName = ref<string>('all');
 
-  console.log('Processed Data', solutions.value);
-
   // 按类型分组
   const groupedSolutions = computed(() => {
-    const gourps: Record<string, SolutionListView[]> = {};
+    const groups: Record<string, { data: SolutionListView[]; sort: number }> =
+      {};
     for (const sol of solutions.value) {
-      let typeKey = '';
-      if (typeof sol.solution_type === 'string') {
-        typeKey = sol.solution_type;
-      } else if (
-        sol.solution_type &&
-        typeof sol.solution_type === 'object' &&
-        'type' in sol.solution_type
-      ) {
-        typeKey = sol.solution_type || '';
+      const typeKey = sol.solution_type?.name ?? '';
+      if (!groups[typeKey]) {
+        groups[typeKey] = { data: [], sort: sol.solution_type?.sort ?? 999 };
       }
-      if (!gourps[typeKey]) gourps[typeKey] = [];
-      gourps[typeKey]?.push(sol);
+      groups[typeKey]?.data.push(sol);
     }
-    return gourps;
+    const sortedGroups = Object.fromEntries(
+      Object.entries(groups).sort(([, a], [, b]) => a.sort - b.sort)
+    );
+    return sortedGroups;
   });
 
   watch(error, (value) => {
     if (value) {
-      console.error('数据获取失败: ', value);
+      logger.error('数据获取失败: ', value);
     }
   });
+
+  const pageTitle = $t('page-title.solutions');
+  usePageSeo({
+    title: pageTitle,
+  });
 </script>
 
 <style scoped>
@@ -104,15 +98,20 @@
 
   .page-header {
     display: flex;
+    margin-bottom: 1rem;
   }
 
   .page-title {
     font-size: 2rem;
     font-weight: bold;
-    margin-bottom: 1rem;
     color: var(--el-color-primary);
   }
 
+  .page-subtitle {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+  }
+
   .breadcrumb {
     margin-left: auto;
   }

app/pages/support/contact-us.vue

@@ -3,27 +3,19 @@
     <support-tabs model-value="contact-us" />
     <div class="page-header">
       <h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
-      <el-breadcrumb class="breadcrumb" separator="/">
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/')">
-            {{ $t('navigation.home') }}
-          </NuxtLink>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/support')">
-            {{ $t('navigation.support') }}
-          </NuxtLink>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/support/contact-us')">
-            {{ $t('navigation.contact-info') }}
-          </NuxtLink>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
 
     <div v-if="!pending" class="page-content">
-      <markdown-renderer :content="content.content || ''" />
+      <!-- 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> -->
     </div>
     <div v-else class="loading">
       <el-skeleton :rows="5" animated />
@@ -32,15 +24,29 @@
 </template>
 
 <script setup lang="ts">
-  const { data, pending, error } = await useContactInfo();
-
-  const content = computed(() => toContactInfoView(data.value));
+  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: contactInfo, pending, error } = await useContactInfo();
 
   watch(error, (value) => {
     if (value) {
-      console.error('数据获取失败: ', value);
+      logger.error('数据获取失败: ', value);
     }
   });
+
+  const pageTitle = $t('page-title.contact-us');
+  usePageSeo({
+    title: pageTitle,
+  });
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
 </script>
 
 <style scoped>

app/pages/support/documents.vue

@@ -7,87 +7,74 @@
       <support-tabs model-value="documents" />
       <div class="page-header">
         <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
-        <el-breadcrumb class="breadcrumb" separator="/">
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/')">{{
-              $t('navigation.home')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/support')">{{
-              $t('navigation.support')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/support/documents')">{{
-              $t('navigation.documents')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-        </el-breadcrumb>
-      </div>
-      <div class="document-category">
-        <el-row :gutter="12">
-          <el-col :span="8">
-            <span class="select-label">产品分类</span>
-            <el-select
-              v-model="selectedType"
-              placeholder="选择产品类型"
-              clearable
-            >
-              <el-option
-                v-for="type in productTypeOptions"
-                :key="type.id"
-                :label="type.name"
-                :value="type.id"
-              />
-            </el-select>
-          </el-col>
-          <el-col :span="8">
-            <span class="select-label">产品系列</span>
-            <el-select
-              v-model="selectedProduct"
-              placeholder="选择系列产品"
-              clearable
-            >
-              <el-option
-                v-for="product in productOptions"
-                :key="product.id"
-                :label="product.name"
-                :value="product.id"
-              />
-            </el-select>
-          </el-col>
-          <el-col :span="8">
-            <span class="select-label">关键词</span>
-            <el-input
-              v-model="keyword"
-              placeholder="输入关键词..."
-              clearable
-              :prefix-icon="Search"
-            />
-          </el-col>
-        </el-row>
+        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
       </div>
       <div class="page-content">
-        <document-list :documents="filteredDocuments" />
+        <document-filter
+          v-model="filters"
+          :product-type-options="productTypeOptions"
+          :product-options="productOptions"
+          :document-type-options="documentTypeOptions"
+        />
+
+        <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"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { Search } from '@element-plus/icons-vue';
+  const localePath = useLocalePath();
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.support'), to: localePath('/support') },
+    { label: $t('navigation.documents') },
+  ];
 
-  const { data, pending, error } = await useDocumentList();
+  const filters = reactive({
+    selectedDocumentType: null as string | null,
+    selectedProductType: null as string | null,
+    selectedProduct: null as string | null,
+    keyword: '',
+  });
 
-  const documents = computed(
-    () => data?.value.map((item) => toDocumentListView(item)) ?? []
-  );
+  const page = ref(1);
+  const documentsPerPage = 10;
 
-  const keyword = ref('');
+  const { data: documents, pending, error } = await useDocumentList();
 
-  const selectedType = ref<number | null>(null);
-  const selectedProduct = ref<number | null>(null);
+  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[] = [];
@@ -104,13 +91,13 @@
   });
 
   const productOptions = computed(() => {
-    if (!selectedType.value) return [];
+    if (!filters.selectedProductType) return [];
     const products: DocumentListProduct[] = [];
 
     documents.value.forEach((doc: DocumentListView) => {
       doc.products?.forEach((product: DocumentListProduct) => {
         if (
-          product.type.id === selectedType.value &&
+          product.type.id === filters.selectedProductType &&
           !products.some((item) => item.id === product.id)
         ) {
           products.push(product);
@@ -121,41 +108,57 @@
     return products;
   });
 
-  const filteredDocuments = computed(() =>
-    documents.value.filter((doc: DocumentListView) => {
-      const matchProduct = selectedProduct.value
+  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 === selectedProduct.value
+              product.id === filters.selectedProduct
           )
-        : selectedType.value
+        : filters.selectedProductType
           ? doc.products?.some(
               (product: DocumentListProduct) =>
-                product.type?.id === selectedType.value
+                product.type?.id === filters.selectedProductType
             )
           : true;
 
-      const matchKeyword = keyword.value
-        ? doc.title && doc.title.includes(keyword.value)
+      const matchDocumentType = filters.selectedDocumentType
+        ? doc.type.id === filters.selectedDocumentType
         : true;
 
-      return matchProduct && matchKeyword;
-    })
+      return matchProduct && matchDocumentType;
+    });
+  });
+
+  const paginatedDocuments = computed(() => {
+    return filteredDocuments.value.slice(
+      (page.value - 1) * documentsPerPage,
+      page.value * documentsPerPage
+    );
+  });
+
+  watch(
+    () => filters.selectedProductType,
+    () => {
+      filters.selectedProduct = null;
+    }
   );
 
-  watch(selectedType, () => {
-    selectedProduct.value = null;
-  });
-
-  watch(documents, (value) => {
-    console.log(value);
-  });
-
   watch(error, (value) => {
     if (value) {
-      console.error('数据获取失败: ', value);
+      logger.error('数据获取失败: ', value);
     }
   });
+
+  const pageTitle = $t('page-title.documents');
+  usePageSeo({
+    title: pageTitle,
+  });
 </script>
 
 <style scoped>
@@ -180,12 +183,6 @@
     margin-left: auto;
   }
 
-  .document-category {
-    padding: 0rem 2rem;
-    gap: 4px;
-    margin-bottom: 0.5rem;
-  }
-
   .page-content {
     padding: 1rem 2rem 2rem;
   }
@@ -200,4 +197,35 @@
     height: 40px;
     font-size: 0.9rem;
   }
+
+  .pagination-container {
+    margin-top: 2rem;
+  }
+
+  :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

@@ -7,88 +7,74 @@
       <support-tabs model-value="faq" />
       <div class="page-header">
         <h1 class="page-title">{{ $t('navigation.faq') }}</h1>
-        <el-breadcrumb class="breadcrumb" separator="/">
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/')">{{
-              $t('navigation.home')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/support')">{{
-              $t('navigation.support')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/support/faq')">{{
-              $t('navigation.faq')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-        </el-breadcrumb>
+        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
       </div>
 
-      <div class="question-category">
-        <el-row :gutter="12">
-          <el-col :span="8">
-            <span class="select-label">产品分类</span>
-            <el-select
-              v-model="selectedType"
-              placeholder="选择产品类型"
-              clearable
-            >
-              <el-option
-                v-for="type in productTypeOptions"
-                :key="type.id"
-                :label="type.name"
-                :value="type.id"
-              />
-            </el-select>
-          </el-col>
-          <el-col :span="8">
-            <span class="select-label">产品系列</span>
-            <el-select
-              v-model="selectedProduct"
-              placeholder="选择系列产品"
-              clearable
-            >
-              <el-option
-                v-for="product in productOptions"
-                :key="product.id"
-                :label="product.name"
-                :value="product.id"
-              />
-            </el-select>
-          </el-col>
-          <el-col :span="8">
-            <span class="select-label">关键词</span>
-            <el-input
-              v-model="keyword"
-              placeholder="输入关键词..."
-              clearable
-              :prefix-icon="Search"
-            />
-          </el-col>
-        </el-row>
-      </div>
       <div class="page-content">
-        <question-list :questions="filteredQuestions" />
+        <question-filter
+          v-model="filters"
+          :product-type-options="productTypeOptions"
+          :product-options="productOptions"
+          :question-type-options="questionTypeOptions"
+        />
+
+        <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"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { Search } from '@element-plus/icons-vue';
+  const localePath = useLocalePath();
+  const route = useRoute();
 
-  const { data, pending, error } = await useQuestionList();
+  const filters = reactive({
+    selectedQuestionType: null as string | null,
+    selectedProduct: null as string | null,
+    selectedProductType: null as string | null,
+    keyword: '',
+  });
 
-  const questions = computed(
-    () => data.value.map((item) => toQuestionListView(item)) ?? null
+  const page = ref(1);
+  const questionsPerPage = 10;
+
+  const focusQuestionId = ref<string | null>(
+    route.query.focus as string | null
   );
 
-  const keyword = ref('');
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.support'), to: localePath('/support') },
+    { label: $t('navigation.faq') },
+  ];
 
-  const selectedType = ref<number | null>(null);
-  const selectedProduct = ref<number | null>(null);
+  const { data: questions, pending, error } = await useQuestionList();
+
+  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[] = [];
@@ -104,12 +90,12 @@
   });
 
   const productOptions = computed(() => {
-    if (!selectedType.value) return [];
+    if (!filters.selectedProductType) return [];
     const products: QuestionListProduct[] = [];
     questions.value.forEach((q: QuestionListView) => {
       q.products.forEach((product: QuestionListProduct) => {
         if (
-          product.type.id === selectedType.value &&
+          product.type.id === filters.selectedProductType &&
           !products.some((p) => p.id === product.id)
         ) {
           products.push(product);
@@ -120,41 +106,77 @@
   });
 
   const filteredQuestions = computed(() => {
-    return questions.value.filter((question: QuestionListView) => {
-      const matchProduct = selectedProduct.value
+    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 === selectedProduct.value
+              product.id === filters.selectedProduct
           )
-        : selectedType.value
+        : filters.selectedProductType
           ? question.products?.some(
               (product: QuestionListProduct) =>
-                product.type.id === selectedType.value
+                product.type.id === filters.selectedProductType
             )
           : true;
 
-      const matchKeyword = keyword.value
-        ? (question.title && question.title.includes(keyword.value)) ||
-          (question.content && question.content.includes(keyword.value))
+      const matchQuestionType = filters.selectedQuestionType
+        ? question.type.id === filters.selectedQuestionType
         : true;
 
-      return matchProduct && matchKeyword;
+      return matchProduct && matchQuestionType;
     });
   });
 
-  watch(selectedType, () => {
-    selectedProduct.value = null;
+  const paginatedQuestions = computed(() => {
+    const start = (page.value - 1) * questionsPerPage;
+    const end = page.value * questionsPerPage;
+    return filteredQuestions.value.slice(start, end);
   });
 
-  watch(data, (newVal) => {
-    console.log('useAsyncData updated:', newVal);
-  });
+  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) {
-      console.error('数据获取失败: ', value);
+      logger.error('数据获取失败: ', value);
     }
   });
+
+  const pageTitle = $t('page-title.faq');
+  usePageSeo({
+    title: pageTitle,
+  });
 </script>
 
 <style scoped>
@@ -179,24 +201,37 @@
     margin-left: auto;
   }
 
-  .question-category {
-    padding: 0rem 2rem;
-    gap: 4px;
-    margin-bottom: 0.5rem;
-  }
-
   .page-content {
     padding: 1rem 2rem 2rem;
   }
-
-  .select-label {
-    color: var(--el-text-color-secondary);
-    font-size: 0.9rem;
+  .pagination-container {
+    margin-top: 2rem;
   }
 
-  :deep(.el-select__wrapper),
-  :deep(.el-input__wrapper) {
-    height: 40px;
-    font-size: 0.9rem;
+  :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

@@ -1,115 +1,63 @@
 <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">
-      <div class="page-header">
-        <h1 class="page-title">{{ $t('navigation.support') }}</h1>
-        <el-breadcrumb class="breadcrumb" separator="/">
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/')">{{
-              $t('navigation.home')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/support')">{{
-              $t('navigation.support')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-        </el-breadcrumb>
-      </div>
       <section style="margin-bottom: 2rem">
         <p>
-          金申机械制造有限公司致力于为客户提供优质的产品与服务。针对纸管机、分纸机、纸吸管等产品，我们提供全方位的售后服务，确保客户能够安心地使用我们的产品。
+          {{ $t('support-page-desc') }}
         </p>
       </section>
       <div class="card-group">
-        <el-card class="card">
-          <el-row>
-            <el-col :span="6">
-              <el-icon class="card-icon" size="80">
-                <ElIconQuestionFilled />
-              </el-icon>
-            </el-col>
-            <el-col :span="18">
-              <div class="card-title">
-                <span>{{ $t('navigation.faq') }}</span>
-              </div>
-            </el-col>
-          </el-row>
-          <el-row>
-            <div class="card-content">
-              <p>我们为用户整理了常见问题的答案，帮助您快速解决疑惑。</p>
-            </div>
-          </el-row>
-          <el-row>
-            <NuxtLink class="card-link" :to="$localePath('/support/faq')">
-              <el-button class="card-button" round>
-                <span>了解更多 > </span>
-              </el-button>
-            </NuxtLink>
-          </el-row>
-        </el-card>
-        <el-card class="card">
-          <el-row>
-            <el-col :span="6">
-              <el-icon class="card-icon" size="80">
-                <ElIconDocumentChecked />
-              </el-icon>
-            </el-col>
-            <el-col :span="18">
-              <div class="card-title">
-                <span>{{ $t('navigation.documents') }}</span>
-              </div>
-            </el-col>
-          </el-row>
-          <el-row>
-            <div class="card-content">
-              <p>我们为用户整理了常见问题的答案，为您快速解决疑惑。</p>
-            </div>
-          </el-row>
-          <el-row>
-            <NuxtLink class="card-link" :to="$localePath('/support/documents')">
-              <el-button class="card-button" round>
-                <span>了解更多 > </span>
-              </el-button>
-            </NuxtLink>
-          </el-row>
-        </el-card>
-        <el-card class="card">
-          <el-row>
-            <el-col :span="6">
-              <el-icon class="card-icon" size="80">
-                <ElIconService />
-              </el-icon>
-            </el-col>
-            <el-col :span="18">
-              <div class="card-title">
-                <span>{{ $t('navigation.contact-info') }}</span>
-              </div>
-            </el-col>
-          </el-row>
-          <el-row>
-            <div class="card-content">
-              <p>通过电话、邮箱联系我们，我们将现场为您服务。</p>
-            </div>
-          </el-row>
-          <el-row>
-            <NuxtLink
-              class="card-link"
-              :to="$localePath('/support/contact-us')"
-            >
-              <el-button class="card-button" round>
-                <span>了解更多 > </span>
-              </el-button>
-            </NuxtLink>
-          </el-row>
-        </el-card>
+        <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"></script>
+<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 {
@@ -119,6 +67,7 @@
 
   .page-header {
     display: flex;
+    padding: 2rem 2rem 0rem;
   }
 
   .page-title {
@@ -142,7 +91,8 @@
   }
 
   .card-group {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
     gap: 50px;
     justify-content: space-around;
     margin-bottom: 2rem;
@@ -173,36 +123,19 @@
     margin-left: auto;
   }
 
-  .card-button {
-    cursor: pointer;
-    text-align: center;
-    font-size: 1rem;
-    color: var(--el-color-primary);
-    transition: all 0.3s ease;
-  }
-
-  .button-group {
-    display: flex;
-    justify-content: left;
-    margin-top: 2rem;
-    margin-left: 2rem;
-    gap: 20px;
-  }
-
-  .el-row {
-    margin-bottom: 20px;
-  }
-
-  .el-row:last-child {
-    margin-bottom: 0;
-  }
-
-  .el-col {
-    border-radius: 4px;
-  }
-
   .grid-content {
     border-radius: 4px;
     min-height: 36px;
   }
+
+  @media (max-width: 768px) {
+    section {
+      width: 100%;
+    }
+
+    .card-group {
+      grid-template-columns: 1fr;
+      gap: 20px;
+    }
+  }
 </style>

app/plugins/directus.ts

@@ -1,10 +1,11 @@
-import { createDirectus, rest, staticToken } from '@directus/sdk';
+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/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

@@ -11,7 +11,9 @@ export function formatFileSize(sizeInBytes: number): string {
 }
 
 export function getFileExtension(filename: string): string {
-  return filename.split('.').pop() || '';
+  const lastDotIndex = filename.lastIndexOf('.');
+  if (lastDotIndex === -1) return ''; // 找不到拓展名
+  return filename.slice(lastDotIndex + 1);
 }
 
 export function formatFileExtension(ext: string): string {

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

@@ -18,17 +18,3 @@ export function renderMarkdown(content: string): string {
 
   return dirtyHtml;
 }
-
-export function convertMedia(content: string): string {
-  // 通过正则表达式替换Markdown中的图片链接
-  // ![alt text](image-url) -> ![alt text](strapiMedia(image-url))
-
-  if (!content) return '';
-
-  const contentWithAbsoluteUrls = content.replace(
-    /!\[([^\]]*)\]\((\/uploads\/[^)]+)\)/g,
-    (_, alt, url) => `![${alt}](${useStrapiMedia(url)})`
-  );
-
-  return contentWithAbsoluteUrls;
-}

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 };
+}

docker-build.sh

@@ -0,0 +1,63 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# ========== 脚本配置 ==========
+#
+IMAGE_NAME="git.jinshen.cn/remilia/jinshen-website" # 含仓库前缀的镜像名称
+DOCKERFILE="Dockerfile"                             # Dockerfile 文件路径
+BUILD_CONTEXT="."                                   # 构建上下文路径
+PUSH_IMAGE=true                                     # 是否推送镜像到远程仓库
+DOCKER_LOGIN=false                                  # 是否需要登录 Docker 仓库
+REGISTRY_USER=""                                    #Docker 仓库用户名
+REGISTRY_PASSWORD=""                                #Docker 仓库密码
+
+# ==============================
+
+# 生成时间戳TAG
+TIMESTAMP_TAG=$(date +'%Y%m%d%H%M%S')
+BUILD_TIME=$(date +"%Y-%m-%d %H:%M:%S")
+GIT_COMMIT=$(git rev-parse --short HEAD || echo "unknown")
+
+echo "📦 构建镜像: ${IMAGE_NAME}"
+echo "⏱️ 时间戳标签: ${TIMESTAMP_TAG}"
+echo "🔖 Git 提交: ${GIT_COMMIT}"
+echo "⭐ 同时构建 latest 标签"
+
+# docker login（如果启用）
+if [ "$DOCKER_LOGIN" = true ]; then
+  if [ -z "$REGISTRY_PASSWORD" ]; then
+    echo "❌ 登录失败：启用了 DOCKER_LOGIN，但 REGISTRY_PASSWORD 为空"
+    exit 1
+  fi
+  echo "🔐 正在登录 Docker Registry..."
+  echo "$REGISTRY_PASSWORD" | docker login "$(echo "$IMAGE_NAME" | cut -d'/' -f1)" \
+    --username "$REGISTRY_USER" --password-stdin
+fi
+
+# 根据是否推送决定 buildx 参数
+if [ "$PUSH_IMAGE" = true ]; then
+  BUILDX_MODE="--push"
+  echo "🚀 将构建并推送镜像到仓库"
+else
+  BUILDX_MODE="--load"
+  echo "🛠️ 仅本地构建镜像（不推送）"
+fi
+
+# 构建镜像（带 version metadata）
+docker buildx build \
+  -t "${IMAGE_NAME}:${TIMESTAMP_TAG}" \
+  -t "${IMAGE_NAME}:latest" \
+  --build-arg BUILD_TIME="$BUILD_TIME" \
+  --build-arg GIT_COMMIT="$GIT_COMMIT" \
+  -f "$DOCKERFILE" "$BUILD_CONTEXT" \
+  $BUILDX_MODE
+
+
+echo "🎉 镜像构建完成！"
+echo "📌 可用镜像："
+echo "   - ${IMAGE_NAME}:${TIMESTAMP_TAG}"
+echo "   - ${IMAGE_NAME}:latest"
+
+if [ "$PUSH_IMAGE" = false ]; then
+  echo "⚠️ 镜像未推送（PUSH_IMAGE=false）"
+fi

docker-compose.test.yml

@@ -0,0 +1,13 @@
+services:
+  website:
+    image: git.jinshen.cn/remilia/jinshen-website
+    container_name: webService
+    restart: unless-stopped
+    env_file: .env
+    environment:
+      NUXT_PUBLIC_DIRECTUS_URL: ${DIRECTUS_URL}
+      NUXT_PUBLIC_DIRECTUS_TOKEN: ${DIRECTUS_TOKEN}
+      NUXT_PUBLIC_MEILI_HOST: ${MEILI_HOST}
+      NUXT_PUBLIC_MEILI_SEARCH_KEY: ${MEILI_MASTER_KEY}
+    ports:
+      - 3200:3000

entrypoint.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+echo "Starting Nuxt App..."
+if [ -f "/app/version.json" ]; then
+  echo "Version info:"
+  cat /app/version.json
+else
+  echo "⚠️ version.json not found!"
+fi
+exec "$@"

eslint.config.mjs

@@ -13,6 +13,7 @@ export default withNuxt(
           },
         },
       ],
+      'no-console': 'warn',
     },
   }
 );

i18n/locales/en.json

@@ -10,19 +10,21 @@
     "result-count": "{count} results",
     "no-results": "No results found for \"{query}\".",
     "no-query": "Enter a keyword to start searching.",
+    "section": "Section",
     "untitled": "Untitled",
     "sections": {
       "product": "Products",
       "solution": "Solutions",
-      "support": "Support",
+      "faq": "Faqs",
+      "document": "Documents",
       "default": "Other"
     }
   },
   "company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
   "company-description": "We specialize in manufacturing a range of paper tube and can equipment, integrating design, manufacturing, sales, and service.",
   "learn-more": "Learn More",
-  "products-desc": "We provide high-quality product solutions to meet various business needs.",
-  "solutions-desc": "Providing customized technology solutions for enterprises to accelerate digital transformation.",
+  "products-desc": "We provide the latest products an instant service support to meet various business needs of our customers.",
+  "solutions-desc": "We offer diversified technical solutions for enterprises, supporting various fields such as industry and packaging.",
   "support-desc": "24/7 professional technical support to ensure stable operation of your business.",
   "quick-links": "Quick Links",
   "utilities": "Utilities",
@@ -33,9 +35,11 @@
     "support": "Support",
     "about-us": "About Us",
     "contact-info": "Contact Info",
+    "downloads": "Downloads",
     "faq": "FAQ",
     "documents": "Documents",
-    "calculator": "Calculator"
+    "calculator": "Calculator",
+    "address": "Company Address"
   },
   "contact-info": "Contact Us",
   "telephone": "Telephone",
@@ -54,9 +58,74 @@
   "solution-not-found": "Solution Not Found",
   "solution-not-found-desc": "Sorry, the solution you are lokking for does not exist or has been removed.",
   "back-to-solutions": "Back to Solutions",
+  "page-not-found": "Page Not Found",
+  "page-not-found-desc": "Sorry, the page you are looking for does not exist or has been removed.",
+  "back-to-home": "Back to Home",
   "no-content-available": "No detailed information available",
   "loading": "Loading...",
-  "our-products": "Our Products",
+  "our-products": "Our Latest Products",
+  "find-discontinued-products": "To find discontinued products, please use the search function.",
+  "product-discontinued-warning": "Product is discontinued and may no longer receive immediate support or updates",
   "learn-our-solutions": "Learn Our Solutions",
-  "all": "All"
+  "all": "All",
+  "support-page-desc": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd is committed to providing high-quality products and services to our customers. For products such as paper tube machines, slitting machines, and paper straw equipment, we offer comprehensive after-sales support to ensure our customers can use our products with confidence.",
+  "support-card-desc": {
+    "faq": "We have compiled answers to frequently asked questions to help you quickly resolve any concerns.",
+    "documents": "We provide product manuals, technical specifications, and other documentation for easy reference.",
+    "contact-info": "Contact us by phone or email, and we will provide on-site support for you."
+  },
+
+  "product-filter": {
+    "product-type": "Product type",
+    "product-model": "Product model",
+    "keyword": "Keyword",
+    "select-product-type": "Select product type",
+    "select-product-model": "Select product model",
+    "enter-keyword": "Enter keyword",
+    "question-type": "Question Type",
+    "select-question-type": "Select question type",
+    "document-type": "Document Type",
+    "select-document-type": "Select document type",
+    "misc": "Misc"
+  },
+  "document-meta": {
+    "size": "Size",
+    "format": "Format",
+    "type": "Type",
+    "upload-at": "Upload at"
+  },
+  "document-action": {
+    "download": "Download",
+    "open-in-new-tab": "Open in New Tab",
+    "preview": "Preview"
+  },
+  "mobile-menu": {
+    "title": "Menu",
+    "navigation": "Navigation",
+    "utilities": "Utilities"
+  },
+  "homepage": {
+    "recommended-products": "Recommended Products",
+    "recommended-products-desc": "Explore our curated selection of products to meet your diverse needs. Whether it's innovative technology or classic designs, we offer quality choices for you.",
+    "recommended-solutions": "Recommended Solutions",
+    "recommended-solutions-desc": "Learn about our tailored solutions designed to help your business thrive in a competitive market."
+  },
+  "page-title": {
+    "homepage": "Homepage",
+    "products": "Products",
+    "solutions": "Solutions",
+    "support": "Support",
+    "faq": "FAQ",
+    "documents": "Documents",
+    "contact-us": "Contact Us",
+    "download": "Downloads",
+    "preview": "Preview",
+    "about-us": "About Us"
+  },
+  "product-tab": {
+    "details": "Details",
+    "specs": "Specifications",
+    "faq": "FAQ",
+    "documents": "Documents"
+  }
 }

i18n/locales/es.json

@@ -0,0 +1,130 @@
+{
+  "back": "Volver",
+  "not-found": "Página no encontrada",
+  "search-placeholder": "Buscar...",
+  "search": {
+    "title": "Búsqueda en el sitio",
+    "head-title": "Búsqueda",
+    "search-button": "Buscar",
+    "results-for": "Resultados de la búsqueda para \"{query}\"",
+    "result-count": "{count} resultados",
+    "no-results": "No se encontraron coincidencias para \"{query}\".",
+    "no-query": "Ingrese una palabra clave para comenzar a buscar.",
+    "section": "sección",
+    "untitled": "sin título",
+    "sections": {
+      "product": "Productos",
+      "solution": "Soluciones",
+      "faq": "FAQ",
+      "document": "Documentaciones",
+      "default": "Otros contenidos"
+    }
+  },
+  "company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
+  "company-description": "Especializado en la producción de una serie de equipos de tubos y latas de papel, integrando diseño, fabricación, ventas y servicio.",
+  "learn-more": "Saber más",
+  "products-desc": "Ofrecemos los últimos productos y un servicio de asistencia instantáneo para satisfacer las diversas necesidades comerciales de nuestros clientes.",
+  "solutions-desc": "Ofrecemos soluciones técnicas diversificadas para empresas, prestando apoyo en diversos campos, como la industria y el embalaje.",
+  "support-desc": "Soporte técnico profesional 24/7, asegurando la estabilidad de su negocio.",
+  "quick-links": "Enlaces rápidos",
+  "utilities": "Herramientas útiles",
+  "navigation": {
+    "home": "Inicio",
+    "products": "Productos",
+    "solutions": "Soluciones",
+    "support": "Soporte",
+    "about-us": "Sobre nosotros",
+    "contact-info": "Información de contacto",
+    "downloads": "Descargas",
+    "faq": "FAQ",
+    "documents": "Documentaciones",
+    "calculator": "Herramienta de cálculo de tubos de papel",
+    "address": "Dirección de la empresa"
+  },
+  "contact-info": "Contáctenos",
+  "telephone": "Teléfono",
+  "email": "Correo electrónico",
+  "address": "Dirección",
+  "company-address": "No. 689 Qiushi Road, Wutong Industrial Zone, Tongxiang City, Zhejiang Province, China",
+  "follow-us": "Síguenos",
+  "all-rights-reserved": "All rights reserved",
+  "privacy-policy": "Política de privacidad",
+  "terms-of-service": "Términos del servicio",
+  "sitemap": "Mapa del sitio",
+  "product-details": "Detalles del producto",
+  "product-not-found": "Producto no encontrado",
+  "product-not-found-desc": "Lo sentimos, el producto que busca no existe o ha sido eliminado.",
+  "back-to-products": "Volver a la lista de productos",
+  "solution-not-found": "Solución no encontrada",
+  "solution-not-found-desc": "Lo sentimos, la solución que busca no existe o ha sido eliminada.",
+  "back-to-solutions": "Volver a la lista de soluciones",
+  "page-not-found": "Página no encontrada",
+  "page-not-found-desc": "Lo sentimos, la página que busca no existe o ha sido eliminada.",
+  "back-to-home": "Volver al inicio",
+  "no-content-available": "No hay información disponible",
+  "loading": "Cargando...",
+  "our-products": "Nuestros últimos productos",
+  "find-discontinued-products": "Para encontrar productos descatalogados, utilice la función de búsqueda.",
+  "product-discontinued-warning": "Este producto ha sido descontinuado y puede que ya no reciba soporte o actualizaciones inmediatas.",
+  "learn-our-solutions": "Aprenda sobre nuestras soluciones",
+  "all": "Todo",
+  "support-page-desc": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd se dedica a proporcionar productos y servicios de alta calidad a los clientes. Para máquinas de tubos de papel, máquinas de corte y pajitas de papel, ofrecemos un servicio postventa integral para garantizar que los clientes puedan usar nuestros productos con confianza.",
+  "support-card-desc": {
+    "faq": "Hemos compilado respuestas a preguntas frecuentes para ayudarle a resolver dudas rápidamente.",
+    "documents": "Proporcionamos manuales de productos, especificaciones técnicas y otros documentos para la comodidad del usuario.",
+    "contact-info": "Contáctenos por teléfono o correo electrónico, y le brindaremos servicio presencial."
+  },
+  "product-filter": {
+    "product-type": "Tipo de producto",
+    "product-model": "Modelo del producto",
+    "keyword": "Palabra clave",
+    "select-product-type": "Seleccione el tipo de producto",
+    "select-product-model": "Seleccione modelo de producto",
+    "enter-keyword": "Ingrese palabra clave",
+    "misc": "Varios",
+    "document-type": "Tipo de documento",
+    "select-document-type": "Seleccionar tipo de documento",
+    "question-type": "Tipo de pregunta",
+    "select-question-type": "Seleccionar tipo de pregunta"
+  },
+  "document-meta": {
+    "size": "Tamaño",
+    "format": "Formato",
+    "type": "Tipo",
+    "upload-at": "Fecha de carga"
+  },
+  "document-action": {
+    "download": "Descargar",
+    "open-in-new-tab": "Abrir en una nueva pestaña",
+    "preview": "Vista previa"
+  },
+  "mobile-menu": {
+    "title": "Menú",
+    "navigation": "Navegación del sitio",
+    "utilities": "Herramientas útiles"
+  },
+  "homepage": {
+    "recommended-products": "Productos recomendados",
+    "recommended-products-desc": "Explore nuestros productos seleccionados para satisfacer sus diversas necesidades. Ya sea tecnología innovadora o diseño clásico, ofrecemos opciones de calidad para usted.",
+    "recommended-solutions": "Soluciones recomendadas",
+    "recommended-solutions-desc": "Aprenda sobre nuestras soluciones personalizadas, que le ayudarán a optimizar sus procesos de negocio y mejorar la eficiencia."
+  },
+  "page-title": {
+    "homepage": "Página principal",
+    "products": "Productos",
+    "solutions": "Soluciones",
+    "support": "Soporte",
+    "faq": "FAQ",
+    "documents": "Documentos",
+    "contact-us": "Contáctenos",
+    "download": "Descarga de documentos",
+    "preview": "Vista previa de documentos",
+    "about-us": "Sobre nosotros"
+  },
+  "product-tab": {
+    "details": "Detalles",
+    "specs": "Especificaciones",
+    "faq": "FAQ",
+    "documents": "Documentos"
+  }
+}

i18n/locales/ru.json

@@ -0,0 +1,130 @@
+{
+  "back": "Назад",
+  "not-found": "Страница не найдена",
+  "search-placeholder": "Поиск...",
+  "search": {
+    "title": "Поиск на сайте",
+    "head-title": "Поиск",
+    "search-button": "Поиск",
+    "results-for": "Результаты поиска для \"{query}\"",
+    "result-count": "Всего {count} результатов",
+    "no-results": "Ничего не найдено по запросу \"{query}\".",
+    "no-query": "Введите ключевые слова для начала поиска.",
+    "section": "раздел",
+    "untitled": "Без названия",
+    "sections": {
+      "product": "Продукты",
+      "solution": "Решения",
+      "faq": "Часто задаваемые вопросы",
+      "document": "Документация",
+      "default": "Другие материалы"
+    }
+  },
+  "company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
+  "company-description": "Профессионально производим оборудование для бумажных трубок и канистр, услуги по проектированию, производству, продаже и сервисному обслуживанию.",
+  "learn-more": "Узнать больше",
+  "products-desc": "Мы предоставляем новейшие продукты и мгновенную сервисную поддержку для удовлетворения различных бизнес-потребностей наших клиентов.",
+  "solutions-desc": "Мы предлагаем разнообразные технические решения для предприятий, поддерживая различные области, такие как промышленность и упаковка.",
+  "support-desc": "Профессиональная техническая поддержка 24/7, обеспечивающая стабильную работу вашего бизнеса.",
+  "quick-links": "Быстрые ссылки",
+  "utilities": "Полезные инструменты",
+  "navigation": {
+    "home": "Главная",
+    "products": "Центр продуктов",
+    "solutions": "Решения",
+    "support": "Поддержка",
+    "about-us": "О нас",
+    "contact-info": "Контактная информация",
+    "downloads": "Файлы для скачивания",
+    "faq": "Часто задаваемые вопросы",
+    "documents": "Документация",
+    "calculator": "Калькулятор бумажных трубок",
+    "address": "Адрес компании"
+  },
+  "contact-info": "Свяжитесь с нами",
+  "telephone": "Телефон",
+  "email": "Электронная почта",
+  "address": "Адрес",
+  "company-address": "No. 689 Qiushi Road, Wutong Industrial Zone, Tongxiang City, Zhejiang Province, China",
+  "follow-us": "Следуйте за нами",
+  "all-rights-reserved": "All rights reserved",
+  "privacy-policy": "Политика конфиденциальности",
+  "terms-of-service": "Условия обслуживания",
+  "sitemap": "Карта сайта",
+  "product-details": "Детали продукта",
+  "product-not-found": "Продукт не найден",
+  "product-not-found-desc": "Извините, продукт, который вы ищете, не существует или был удален.",
+  "back-to-products": "Вернуться к списку продуктов",
+  "solution-not-found": "Решение не найдено",
+  "solution-not-found-desc": "Извините, решение, которое вы ищете, не существует или было удалено.",
+  "back-to-solutions": "Вернуться к списку решений",
+  "page-not-found": "Страница не найдена",
+  "page-not-found-desc": "Извините, страница, которую вы ищете, не существует или была удалена.",
+  "back-to-home": "Вернуться на главную",
+  "no-content-available": "Нет доступной информации",
+  "loading": "Загрузка...",
+  "our-products": "Наши последние продукты",
+  "find-discontinued-products": "Чтобы найти другие продукты, используйте функцию поиска.",
+  "product-discontinued-warning": "Этот продукт снят с производства и может больше не получать мгновенную поддержку или обновления",
+  "learn-our-solutions": "Узнайте о наших решениях",
+  "all": "Все",
+  "support-page-desc": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd Стремится предоставлять клиентам высококачественные продукты и услуги. Мы предлагаем послепродажное обслуживание для таких продуктов, как машины для бумажных трубок и соломинок, обеспечивая уверенность клиентов в использовании нашей продукции.",
+  "support-card-desc": {
+    "faq": "Мы собрали ответы на часто задаваемые вопросы, чтобы помочь вам быстро решить свои проблемы.",
+    "documents": "Предоставляем документацию, такую как руководства по продуктам, технические спецификации, для удобства пользователей.",
+    "contact-info": "Свяжитесь с нами по телефону или электронной почте, и мы оперативно вам поможем."
+  },
+  "product-filter": {
+    "product-type": "Тип продукта",
+    "product-model": "Модель продукта",
+    "keyword": "Ключевое слово",
+    "select-product-type": "Выберите тип продукта",
+    "select-product-model": "Выберите модель продукта",
+    "enter-keyword": "Введите ключевое слово",
+    "misc": "разное",
+    "document-type": "Тип документа",
+    "question-type": "Тип вопроса",
+    "select-document-type": "Выберите тип документа",
+    "select-question-type": "Выберите тип вопроса"
+  },
+  "document-meta": {
+    "size": "Размер",
+    "format": "Формат",
+    "type": "Тип",
+    "upload-at": "Дата загрузки"
+  },
+  "document-action": {
+    "download": "Скачать",
+    "open-in-new-tab": "Открыть в новой вкладке",
+    "preview": "Предварительный просмотр"
+  },
+  "mobile-menu": {
+    "title": "Меню",
+    "navigation": "Навигация по сайту",
+    "utilities": "Полезные инструменты"
+  },
+  "homepage": {
+    "recommended-products": "Рекомендуемые продукты",
+    "recommended-products-desc": "Исследуйте наши тщательно отобранные продукты, которые удовлетворят все ваши потребности. Мы предлагаем как инновационные технологии, так и классические решения.",
+    "recommended-solutions": "Рекомендуемые решения",
+    "recommended-solutions-desc": "Узнайте о наших индивидуальных решениях, чтобы оптимизировать бизнес-процессы и повысить эффективность."
+  },
+  "page-title": {
+    "homepage": "Главная",
+    "products": "Центр продуктов",
+    "solutions": "Решения",
+    "support": "Поддержка",
+    "faq": "Часто задаваемые вопросы",
+    "documents": "Документация",
+    "contact-us": "Свяжитесь с нами",
+    "download": "Скачать докумен",
+    "preview": "Просмотр документа",
+    "about-us": "О нас"
+  },
+  "product-tab": {
+    "details": "Детали продукта",
+    "specs": "Технические спецификации",
+    "faq": "Часто задаваемые вопросы",
+    "documents": "Связанные документы"
+  }
+}

i18n/locales/zh.json

@@ -10,19 +10,21 @@
     "result-count": "共 {count} 条结果",
     "no-results": "没有找到与 “{query}” 匹配的内容。",
     "no-query": "请输入关键字开始搜索。",
+    "section": "内容类型",
     "untitled": "未命名条目",
     "sections": {
       "product": "产品",
       "solution": "解决方案",
-      "support": "服务支持",
+      "faq": "相关问题",
+      "document": "文档资料",
       "default": "其他内容"
     }
   },
   "company-name": "金申机械制造有限公司",
   "company-description": "专业生产一系列纸管、纸罐设备，集设计、制造、销售、服务于一体。",
   "learn-more": "了解更多",
-  "products-desc": "我们提供高质量的产品解决方案，满足各种业务需求。",
-  "solutions-desc": "为企业提供定制化的技术解决方案，助力数字化转型。",
+  "products-desc": "我们提供最新的产品与即时的服务支持，满足客户的各类业务需求。",
+  "solutions-desc": "我们为企业提供多样化的技术解决方案，在工业、包装等多种领域提供支持。",
   "support-desc": "7x24小时专业技术支持，确保您的业务稳定运行。",
   "quick-links": "快速链接",
   "utilities": "实用工具",
@@ -33,9 +35,11 @@
     "support": "服务支持",
     "about-us": "关于我们",
     "contact-info": "联系信息",
+    "downloads": "文件下载",
     "faq": "常见问题",
     "documents": "文档资料",
-    "calculator": "纸管计算工具"
+    "calculator": "纸管计算工具",
+    "address": "公司地址"
   },
   "contact-info": "联系我们",
   "telephone": "电话",
@@ -54,9 +58,73 @@
   "solution-not-found": "解决方案未找到",
   "solution-not-found-desc": "抱歉，您访问的解决方案不存在或已被删除",
   "back-to-solutions": "返回解决方案列表",
+  "page-not-found": "页面未找到",
+  "page-not-found-desc": "抱歉，您访问的页面不存在或已被删除。",
+  "back-to-home": "返回首页",
   "no-content-available": "暂无详细信息",
   "loading": "加载中...",
-  "our-products": "我们的产品",
+  "our-products": "我们的最新产品",
+  "find-discontinued-products": "如需查找其他产品，请使用搜索功能",
+  "product-discontinued-warning": "本产品已停产，可能不再提供即时的支持或更新",
   "learn-our-solutions": "了解我们的解决方案",
-  "all": "全部"
+  "all": "全部",
+  "support-page-desc": "金申机械制造有限公司致力于为客户提供优质的产品与服务。针对纸管机、分纸机、纸吸管等产品，我们提供全方位的售后服务，确保客户能够安心地使用我们的产品。",
+  "support-card-desc": {
+    "faq": "我们为用户整理了常见问题的答案，帮助您快速解决疑惑。",
+    "documents": "提供产品手册、技术规格等文档资料，方便用户查阅。",
+    "contact-info": "通过电话、邮箱联系我们，我们将现场为您服务。"
+  },
+  "product-filter": {
+    "product-type": "产品类型",
+    "product-model": "产品系列",
+    "keyword": "关键词",
+    "select-product-type": "选择产品类型",
+    "select-product-model": "选择产品系列",
+    "enter-keyword": "输入关键词",
+    "question-type": "问题类型",
+    "select-question-type": "选择问题类型",
+    "document-type": "文档类型",
+    "select-document-type": "选择文档类型",
+    "misc": "其他"
+  },
+  "document-meta": {
+    "size": "大小",
+    "format": "格式",
+    "type": "类型",
+    "upload-at": "上传时间"
+  },
+  "document-action": {
+    "download": "下载",
+    "open-in-new-tab": "在新标签页打开",
+    "preview": "预览"
+  },
+  "mobile-menu": {
+    "title": "菜单",
+    "navigation": "站内导航",
+    "utilities": "实用工具"
+  },
+  "homepage": {
+    "recommended-products": "推荐产品",
+    "recommended-products-desc": "探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。",
+    "recommended-solutions": "推荐解决方案",
+    "recommended-solutions-desc": "了解我们的定制解决方案，帮助您优化业务流程，提高效率。"
+  },
+  "page-title": {
+    "homepage": "首页",
+    "products": "产品中心",
+    "solutions": "解决方案",
+    "support": "服务支持",
+    "faq": "常见问题",
+    "documents": "文档资料",
+    "contact-us": "联系我们",
+    "download": "文档下载",
+    "preview": "文档预览",
+    "about-us": "关于我们"
+  },
+  "product-tab": {
+    "details": "产品详情",
+    "specs": "技术规格",
+    "faq": "常见问题",
+    "documents": "相关文档"
+  }
 }

nuxt.config.ts

@@ -1,4 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import GraphQLLoader from 'vite-plugin-graphql-loader';
+
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
@@ -6,18 +8,29 @@ export default defineNuxtConfig({
   app: {
     // head
     head: {
-      title: '金申机械制造有限公司',
+      titleTemplate: '金申机械制造有限公司',
       meta: [
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
         {
           name: 'description',
-          content: 'Jinshen Website',
+          content:
+            '浙江金申机械制造有限公司，专业生产一系列纸管、纸罐设备，是一家集设计、制造、销售、服务于一体的企业。公司主要 产品有原纸分切机、数控纸管机、纸管精切机及纸管后加工设备等 三十多个品种，产品在造纸、印刷、包装、纺织及文具等行业得到 广泛应用。公司依靠科技进步，引进高新技术，致力于新产品开发及技术改造，并配备完善的销售网络和售后服务体系，产品销往全国各地及全球上百个国家和地区，真正做到让客户买的放心，用的安心。',
         },
       ],
-      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+      htmlAttrs: {
+        lang: 'zh',
+      },
+      link: [{ rel: 'icon', type: 'image/x-icon', href: '/jinshen-logo.ico' }],
     },
   },
 
+  components: [
+    {
+      path: '~/components',
+      pathPrefix: false,
+    },
+  ],
+
   runtimeConfig: {
     public: {
       meili: {
@@ -31,6 +44,10 @@ export default defineNuxtConfig({
       },
       directus: {
         url: process.env.DIRECTUS_URL || 'http://localhost:8055',
+        publicUrl:
+          process.env.DIRECTUS_PUBLIC_URL ||
+          process.env.DIRECTUS_URL ||
+          'http://localhost:8055',
         token: process.env.DIRECTUS_TOKEN || undefined,
       },
     },
@@ -55,6 +72,7 @@ export default defineNuxtConfig({
     '@unocss/reset/tailwind.css',
     '~/assets/scss/index.scss',
     '~/assets/css/fonts.css',
+    '~/assets/css/typography.css',
     '@mdi/font/css/materialdesignicons.min.css',
   ],
 
@@ -79,6 +97,7 @@ export default defineNuxtConfig({
         },
       },
     },
+    plugins: [GraphQLLoader()],
   },
 
   devServer: {
@@ -93,6 +112,7 @@ export default defineNuxtConfig({
   },
 
   i18n: {
+    baseUrl: process.env.BASE_URL || 'http://localhost:3000',
     detectBrowserLanguage: {
       useCookie: true,
       cookieKey: 'i18n_redirected',
@@ -102,6 +122,8 @@ export default defineNuxtConfig({
     locales: [
       { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
       { code: 'zh', language: 'zh-CN', name: '简体中文', file: 'zh.json' },
+      { code: 'es', language: 'es-ES', name: 'Español', file: 'es.json' },
+      { code: 'ru', language: 'ru-RU', name: 'Русский', file: 'ru.json' },
     ],
     defaultLocale: 'zh',
     strategy: 'prefix_except_default',
@@ -117,11 +139,11 @@ export default defineNuxtConfig({
     '@nuxt/fonts',
     '@nuxt/icon',
     '@nuxt/image',
-    '@nuxt/test-utils',
     '@vueuse/nuxt',
     '@pinia/nuxt',
     '@unocss/nuxt',
     '@element-plus/nuxt',
     '@nuxtjs/i18n',
+    '@nuxt/test-utils/module',
   ],
 });

package.json

@@ -17,20 +17,25 @@
     "@nuxt/fonts": "0.11.4",
     "@nuxt/icon": "2.0.0",
     "@nuxt/image": "1.11.0",
-    "@nuxt/test-utils": "3.19.2",
     "@nuxtjs/i18n": "10.0.5",
     "@pinia/nuxt": "^0.11.2",
     "@types/markdown-it": "^14.1.2",
     "@unocss/nuxt": "^66.4.2",
     "@vueuse/nuxt": "^13.6.0",
+    "dom-serializer": "^2.0.0",
+    "domhandler": "^5.0.3",
     "dompurify": "^3.2.6",
     "element-plus": "^2.10.7",
+    "fuse.js": "^7.1.0",
+    "graphql": "^16.12.0",
+    "htmlparser2": "^10.0.0",
     "markdown-it": "^14.1.0",
     "meilisearch": "^0.53.0",
     "nuxt": "^4.0.3",
     "nuxt-directus": "5.7.0",
     "sass": "^1.90.0",
     "sharp": "^0.34.3",
+    "vite-plugin-graphql-loader": "^4.0.4",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },
@@ -38,9 +43,14 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@element-plus/nuxt": "^1.1.4",
+    "@nuxt/test-utils": "3.19.2",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^9.35.0",
+    "happy-dom": "^20.0.8",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.6",
-    "prettier": "^3.6.2"
+    "playwright-core": "^1.56.1",
+    "prettier": "^3.6.2",
+    "vitest": "^4.0.3"
   }
 }

pnpm-lock.yaml

@@ -26,9 +26,6 @@ importers:
       '@nuxt/image':
         specifier: 1.11.0
         version: 1.11.0(db0@0.3.2)(ioredis@5.7.0)(magicast@0.3.5)
-      '@nuxt/test-utils':
-        specifier: 3.19.2
-        version: 3.19.2(magicast@0.3.5)(typescript@5.9.2)
       '@nuxtjs/i18n':
         specifier: 10.0.5
         version: 10.0.5(@vue/compiler-dom@3.5.21)(db0@0.3.2)(eslint@9.35.0(jiti@2.5.1))(ioredis@5.7.0)(magicast@0.3.5)(rollup@4.50.2)(vue@3.5.21(typescript@5.9.2))
@@ -44,12 +41,27 @@ importers:
       '@vueuse/nuxt':
         specifier: ^13.6.0
         version: 13.9.0(magicast@0.3.5)(nuxt@4.1.2(@parcel/watcher@2.5.1)(@types/node@24.4.0)(@vue/compiler-sfc@3.5.21)(db0@0.3.2)(eslint@9.35.0(jiti@2.5.1))(ioredis@5.7.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.50.2)(sass@1.92.1)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1))(yaml@2.8.1))(vue@3.5.21(typescript@5.9.2))
+      dom-serializer:
+        specifier: ^2.0.0
+        version: 2.0.0
+      domhandler:
+        specifier: ^5.0.3
+        version: 5.0.3
       dompurify:
         specifier: ^3.2.6
         version: 3.2.6
       element-plus:
         specifier: ^2.10.7
         version: 2.11.2(vue@3.5.21(typescript@5.9.2))
+      fuse.js:
+        specifier: ^7.1.0
+        version: 7.1.0
+      graphql:
+        specifier: ^16.12.0
+        version: 16.12.0
+      htmlparser2:
+        specifier: ^10.0.0
+        version: 10.0.0
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
@@ -68,6 +80,9 @@ importers:
       sharp:
         specifier: ^0.34.3
         version: 0.34.3
+      vite-plugin-graphql-loader:
+        specifier: ^4.0.4
+        version: 4.0.4
       vue:
         specifier: ^3.5.18
         version: 3.5.21(typescript@5.9.2)
@@ -84,18 +99,33 @@ importers:
       '@element-plus/nuxt':
         specifier: ^1.1.4
         version: 1.1.4(@element-plus/icons-vue@2.3.2(vue@3.5.21(typescript@5.9.2)))(element-plus@2.11.2(vue@3.5.21(typescript@5.9.2)))(magicast@0.3.5)
+      '@nuxt/test-utils':
+        specifier: 3.19.2
+        version: 3.19.2(@vue/test-utils@2.4.6)(happy-dom@20.0.8)(magicast@0.3.5)(playwright-core@1.56.1)(typescript@5.9.2)(vitest@4.0.3(@types/node@24.4.0)(happy-dom@20.0.8)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1))
+      '@vue/test-utils':
+        specifier: ^2.4.6
+        version: 2.4.6
       eslint:
         specifier: ^9.35.0
         version: 9.35.0(jiti@2.5.1)
+      happy-dom:
+        specifier: ^20.0.8
+        version: 20.0.8
       husky:
         specifier: ^9.1.7
         version: 9.1.7
       lint-staged:
         specifier: ^16.1.6
         version: 16.1.6
+      playwright-core:
+        specifier: ^1.56.1
+        version: 1.56.1
       prettier:
         specifier: ^3.6.2
         version: 3.6.2
+      vitest:
+        specifier: ^4.0.3
+        version: 4.0.3(@types/node@24.4.0)(happy-dom@20.0.8)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1)
 
 packages:
 
@@ -1004,6 +1034,9 @@ packages:
     resolution: {integrity: sha512-rLQc/nEVWL0xMJf1a6+ndUpdQtxPBFzm4jeqG4o7HuXtDLn4HOe1dPdu7AsaIqq7EcsEjZ5T4mX4X8XnB8cT0Q==}
     engines: {node: '>=20.11.1'}
 
+  '@one-ini/wasm@0.1.1':
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
+
   '@oxc-minify/binding-android-arm64@0.87.0':
     resolution: {integrity: sha512-ZbJmAfXvNAamOSnXId3BiM3DiuzlD1isqKjtmRFb/hpvChHHA23FSPrFcO16w+ugZKg33sZ93FinFkKtlC4hww==}
     engines: {node: '>=14.0.0'}
@@ -1770,6 +1803,9 @@ packages:
   '@speed-highlight/core@1.2.7':
     resolution: {integrity: sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==}
 
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
   '@stylistic/eslint-plugin@5.3.1':
     resolution: {integrity: sha512-Ykums1VYonM0TgkD0VteVq9mrlO2FhF48MDJnPyv3MktIB2ydtuhlO0AfWm7xnW1kyf5bjOqA6xc7JjviuVTxg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1789,9 +1825,15 @@ packages:
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
   '@types/conventional-commits-parser@5.0.1':
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
 
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/eslint-scope@3.7.7':
     resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
 
@@ -1819,6 +1861,9 @@ packages:
   '@types/mdurl@2.0.0':
     resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
+  '@types/node@20.19.23':
+    resolution: {integrity: sha512-yIdlVVVHXpmqRhtyovZAcSy0MiPcYWGkoO4CGe/+jpP0hmNuihm4XhHbADpK++MsiLHP5MVlv+bcgdF99kSiFQ==}
+
   '@types/node@24.4.0':
     resolution: {integrity: sha512-gUuVEAK4/u6F9wRLznPUU4WGUacSEBDPoC2TrBkw3GAnOLHBL45QdfHOXp1kJ4ypBGLxTOB+t7NJLpKoC3gznQ==}
 
@@ -1838,6 +1883,9 @@ packages:
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
+  '@types/whatwg-mimetype@3.0.2':
+    resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
+
   '@typescript-eslint/eslint-plugin@8.43.0':
     resolution: {integrity: sha512-8tg+gt7ENL7KewsKMKDHXR1vm8tt9eMxjJBYINf6swonlWgkYn5NwyIgXpbbDxTNU5DgpDFfj95prcTq2clIQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2110,6 +2158,35 @@ packages:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
       vue: ^3.2.25
 
+  '@vitest/expect@4.0.3':
+    resolution: {integrity: sha512-v3eSDx/bF25pzar6aEJrrdTXJduEBU3uSGXHslIdGIpJVP8tQQHV6x1ZfzbFQ/bLIomLSbR/2ZCfnaEGkWkiVQ==}
+
+  '@vitest/mocker@4.0.3':
+    resolution: {integrity: sha512-evZcRspIPbbiJEe748zI2BRu94ThCBE+RkjCpVF8yoVYuTV7hMe+4wLF/7K86r8GwJHSmAPnPbZhpXWWrg1qbA==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.0.3':
+    resolution: {integrity: sha512-N7gly/DRXzxa9w9sbDXwD9QNFYP2hw90LLLGDobPNwiWgyW95GMxsCt29/COIKKh3P7XJICR38PSDePenMBtsw==}
+
+  '@vitest/runner@4.0.3':
+    resolution: {integrity: sha512-1/aK6fPM0lYXWyGKwop2Gbvz1plyTps/HDbIIJXYtJtspHjpXIeB3If07eWpVH4HW7Rmd3Rl+IS/+zEAXrRtXA==}
+
+  '@vitest/snapshot@4.0.3':
+    resolution: {integrity: sha512-amnYmvZ5MTjNCP1HZmdeczAPLRD6iOm9+2nMRUGxbe/6sQ0Ymur0NnR9LIrWS8JA3wKE71X25D6ya/3LN9YytA==}
+
+  '@vitest/spy@4.0.3':
+    resolution: {integrity: sha512-82vVL8Cqz7rbXaNUl35V2G7xeNMAjBdNOVaHbrzznT9BmiCiPOzhf0FhU3eP41nP1bLDm/5wWKZqkG4nyU95DQ==}
+
+  '@vitest/utils@4.0.3':
+    resolution: {integrity: sha512-qV6KJkq8W3piW6MDIbGOmn1xhvcW4DuA07alqaQ+vdx7YA49J85pnwnxigZVQFQw3tWnQNRKWwhz5wbP6iv/GQ==}
+
   '@volar/language-core@2.4.23':
     resolution: {integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==}
 
@@ -2207,6 +2284,9 @@ packages:
   '@vue/shared@3.5.21':
     resolution: {integrity: sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==}
 
+  '@vue/test-utils@2.4.6':
+    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
+
   '@vueuse/core@13.9.0':
     resolution: {integrity: sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==}
     peerDependencies:
@@ -2290,6 +2370,10 @@ packages:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
 
+  abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -2391,6 +2475,10 @@ packages:
   array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   ast-kit@2.1.2:
     resolution: {integrity: sha512-cl76xfBQM6pztbrFWRnxbrDm9EOqDr1BF6+qQnnDZG2Co2LjyUktkN9GTJfBAfdae+DbT2nJf2nCGAdDDN7W2g==}
     engines: {node: '>=20.18.0'}
@@ -2552,6 +2640,10 @@ packages:
   caniuse-lite@1.0.30001741:
     resolution: {integrity: sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==}
 
+  chai@6.2.0:
+    resolution: {integrity: sha512-aUTnJc/JipRzJrNADXVvpVqi6CO0dn3nx4EVPxijri+fj3LUUDyZQOgVeW54Ob3Y1Xh9Iz8f+CgaCl8v0mn9bA==}
+    engines: {node: '>=18'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -2637,6 +2729,10 @@ packages:
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+
   commander@11.1.0:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
@@ -2678,6 +2774,9 @@ packages:
   confbox@0.2.2:
     resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
 
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+
   consola@3.4.2:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -2960,6 +3059,11 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  editorconfig@1.0.4:
+    resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -2995,6 +3099,10 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -3217,11 +3325,15 @@ packages:
     resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
     engines: {node: '>=6'}
 
+  expect-type@1.2.2:
+    resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
+    engines: {node: '>=12.0.0'}
+
   exsolve@1.0.7:
     resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
-  fake-indexeddb@6.2.2:
-    resolution: {integrity: sha512-SGbf7fzjeHz3+12NO1dYigcYn4ivviaeULV5yY5rdGihBvvgwMds4r4UBbNIUMwkze57KTDm32rq3j1Az8mzEw==}
+  fake-indexeddb@6.2.4:
+    resolution: {integrity: sha512-INKeIKEtSViN4yVtEWEUqbsqmaIy7Ls+MfU0yxQVXg67pOJ/sH1ZxcVrP8XrKULUFohcPD9gnmym+qBfEybACw==}
     engines: {node: '>=18'}
 
   fast-deep-equal@3.1.3:
@@ -3405,6 +3517,16 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  graphql-tag@2.12.6:
+    resolution: {integrity: sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      graphql: ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+
+  graphql@16.12.0:
+    resolution: {integrity: sha512-DKKrynuQRne0PNpEbzuEdHlYOMksHSUI8Zc9Unei5gTsMNA2/vMpoMz/yKba50pejK56qj98qM0SjYxAKi13gQ==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+
   gzip-size@6.0.0:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
@@ -3416,6 +3538,10 @@ packages:
   h3@1.15.4:
     resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==}
 
+  happy-dom@20.0.8:
+    resolution: {integrity: sha512-TlYaNQNtzsZ97rNMBAm8U+e2cUQXNithgfCizkDgc11lgmN4j9CKMhO3FPGKWQYPwwkFcPpoXYF/CqEPLgzfOg==}
+    engines: {node: '>=20.0.0'}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -3431,6 +3557,9 @@ packages:
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
+  htmlparser2@10.0.0:
+    resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
+
   http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
@@ -3634,6 +3763,15 @@ packages:
     resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
     hasBin: true
 
+  js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -3930,6 +4068,10 @@ packages:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
 
+  minimatch@9.0.1:
+    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -4049,6 +4191,11 @@ packages:
   node-releases@2.0.21:
     resolution: {integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==}
 
+  nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   nopt@8.1.0:
     resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -4290,6 +4437,11 @@ packages:
   pkg-types@2.3.0:
     resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
 
+  playwright-core@1.56.1:
+    resolution: {integrity: sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -4500,6 +4652,9 @@ packages:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
 
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+
   protocols@2.0.2:
     resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
 
@@ -4717,6 +4872,9 @@ packages:
     resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
     engines: {node: '>= 0.4'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -4787,6 +4945,9 @@ packages:
     resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
     engines: {node: '>=12.0.0'}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
@@ -4958,6 +5119,12 @@ packages:
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
   tinyexec@1.0.1:
     resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
@@ -4965,6 +5132,10 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@3.0.3:
+    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
+    engines: {node: '>=14.0.0'}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -5030,6 +5201,9 @@ packages:
   unctx@2.4.1:
     resolution: {integrity: sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==}
 
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
   undici-types@7.11.0:
     resolution: {integrity: sha512-kt1ZriHTi7MU+Z/r9DOdAI3ONdaR3M3csEaRc6ewa4f4dTvX4cQCbJ4NkEn0ohE4hHtq85+PhPSTY+pO/1PwgA==}
 
@@ -5246,6 +5420,9 @@ packages:
       vue-tsc:
         optional: true
 
+  vite-plugin-graphql-loader@4.0.4:
+    resolution: {integrity: sha512-lYnpQ2luV2fcuXmOJADljuktfMbDW00Y+6QS+Ek8Jz1Vdzlj/51LSGJwZqyjJ24a5YQ+o29Hr6el/5+nlZetvg==}
+
   vite-plugin-inspect@11.3.3:
     resolution: {integrity: sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==}
     engines: {node: '>=14'}
@@ -5305,12 +5482,49 @@ packages:
   vitest-environment-nuxt@1.0.1:
     resolution: {integrity: sha512-eBCwtIQriXW5/M49FjqNKfnlJYlG2LWMSNFsRVKomc8CaMqmhQPBS5LZ9DlgYL9T8xIVsiA6RZn2lk7vxov3Ow==}
 
+  vitest@4.0.3:
+    resolution: {integrity: sha512-IUSop8jgaT7w0g1yOM/35qVtKjr/8Va4PrjzH1OUb0YH4c3OXB2lCZDkMAB6glA8T5w8S164oJGsbcmAecr4sA==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.0.3
+      '@vitest/browser-preview': 4.0.3
+      '@vitest/browser-webdriverio': 4.0.3
+      '@vitest/ui': 4.0.3
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
   vue-bundle-renderer@2.1.2:
     resolution: {integrity: sha512-M4WRBO/O/7G9phGaGH9AOwOnYtY9ZpPoDVpBpRzR2jO5rFL9mgIlQIgums2ljCTC2HL1jDXFQc//CzWcAQHgAw==}
 
+  vue-component-type-helpers@2.2.12:
+    resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -5377,6 +5591,10 @@ packages:
       webpack-cli:
         optional: true
 
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -5390,6 +5608,11 @@ packages:
     engines: {node: ^18.17.0 || >=20.5.0}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -6673,7 +6896,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/test-utils@3.19.2(magicast@0.3.5)(typescript@5.9.2)':
+  '@nuxt/test-utils@3.19.2(@vue/test-utils@2.4.6)(happy-dom@20.0.8)(magicast@0.3.5)(playwright-core@1.56.1)(typescript@5.9.2)(vitest@4.0.3(@types/node@24.4.0)(happy-dom@20.0.8)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
       '@nuxt/kit': 3.19.2(magicast@0.3.5)
       c12: 3.2.0(magicast@0.3.5)
@@ -6681,7 +6904,7 @@ snapshots:
       defu: 6.1.4
       destr: 2.0.5
       estree-walker: 3.0.3
-      fake-indexeddb: 6.2.2
+      fake-indexeddb: 6.2.4
       get-port-please: 3.2.0
       h3: 1.15.4
       local-pkg: 1.1.2
@@ -6697,8 +6920,13 @@ snapshots:
       tinyexec: 1.0.1
       ufo: 1.6.1
       unplugin: 2.3.10
-      vitest-environment-nuxt: 1.0.1(magicast@0.3.5)(typescript@5.9.2)
+      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(happy-dom@20.0.8)(magicast@0.3.5)(playwright-core@1.56.1)(typescript@5.9.2)(vitest@4.0.3(@types/node@24.4.0)(happy-dom@20.0.8)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1))
       vue: 3.5.21(typescript@5.9.2)
+    optionalDependencies:
+      '@vue/test-utils': 2.4.6
+      happy-dom: 20.0.8
+      playwright-core: 1.56.1
+      vitest: 4.0.3(@types/node@24.4.0)(happy-dom@20.0.8)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - magicast
       - typescript
@@ -6818,6 +7046,8 @@ snapshots:
       - uploadthing
       - vue
 
+  '@one-ini/wasm@0.1.1': {}
+
   '@oxc-minify/binding-android-arm64@0.87.0':
     optional: true
 
@@ -7294,6 +7524,8 @@ snapshots:
 
   '@speed-highlight/core@1.2.7': {}
 
+  '@standard-schema/spec@1.0.0': {}
+
   '@stylistic/eslint-plugin@5.3.1(eslint@9.35.0(jiti@2.5.1))':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.35.0(jiti@2.5.1))
@@ -7318,10 +7550,17 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
   '@types/conventional-commits-parser@5.0.1':
     dependencies:
       '@types/node': 24.4.0
 
+  '@types/deep-eql@4.0.2': {}
+
   '@types/eslint-scope@3.7.7':
     dependencies:
       '@types/eslint': 9.6.1
@@ -7351,6 +7590,10 @@ snapshots:
 
   '@types/mdurl@2.0.0': {}
 
+  '@types/node@20.19.23':
+    dependencies:
+      undici-types: 6.21.0
+
   '@types/node@24.4.0':
     dependencies:
       undici-types: 7.11.0
@@ -7368,6 +7611,8 @@ snapshots:
 
   '@types/web-bluetooth@0.0.21': {}
 
+  '@types/whatwg-mimetype@3.0.2': {}
+
   '@typescript-eslint/eslint-plugin@8.43.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -7749,6 +7994,45 @@ snapshots:
       vite: 7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1)
       vue: 3.5.21(typescript@5.9.2)
 
+  '@vitest/expect@4.0.3':
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.0.3
+      '@vitest/utils': 4.0.3
+      chai: 6.2.0
+      tinyrainbow: 3.0.3
+
+  '@vitest/mocker@4.0.3(vite@7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1))':
+    dependencies:
+      '@vitest/spy': 4.0.3
+      estree-walker: 3.0.3
+      magic-string: 0.30.19
+    optionalDependencies:
+      vite: 7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1)
+
+  '@vitest/pretty-format@4.0.3':
+    dependencies:
+      tinyrainbow: 3.0.3
+
+  '@vitest/runner@4.0.3':
+    dependencies:
+      '@vitest/utils': 4.0.3
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.0.3':
+    dependencies:
+      '@vitest/pretty-format': 4.0.3
+      magic-string: 0.30.19
+      pathe: 2.0.3
+
+  '@vitest/spy@4.0.3': {}
+
+  '@vitest/utils@4.0.3':
+    dependencies:
+      '@vitest/pretty-format': 4.0.3
+      tinyrainbow: 3.0.3
+
   '@volar/language-core@2.4.23':
     dependencies:
       '@volar/source-map': 2.4.23
@@ -7908,6 +8192,11 @@ snapshots:
 
   '@vue/shared@3.5.21': {}
 
+  '@vue/test-utils@2.4.6':
+    dependencies:
+      js-beautify: 1.15.4
+      vue-component-type-helpers: 2.2.12
+
   '@vueuse/core@13.9.0(vue@3.5.21(typescript@5.9.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
@@ -8036,6 +8325,8 @@ snapshots:
       jsonparse: 1.3.1
       through: 2.3.8
 
+  abbrev@2.0.0: {}
+
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0:
@@ -8132,6 +8423,8 @@ snapshots:
 
   array-ify@1.0.0: {}
 
+  assertion-error@2.0.1: {}
+
   ast-kit@2.1.2:
     dependencies:
       '@babel/parser': 7.28.4
@@ -8302,6 +8595,8 @@ snapshots:
 
   caniuse-lite@1.0.30001741: {}
 
+  chai@6.2.0: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -8389,6 +8684,8 @@ snapshots:
 
   colorette@2.0.20: {}
 
+  commander@10.0.1: {}
+
   commander@11.1.0: {}
 
   commander@14.0.1: {}
@@ -8423,6 +8720,11 @@ snapshots:
 
   confbox@0.2.2: {}
 
+  config-chain@1.1.13:
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+
   consola@3.4.2: {}
 
   conventional-changelog-angular@7.0.0:
@@ -8675,6 +8977,13 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  editorconfig@1.0.4:
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.1
+      semver: 7.7.2
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.218: {}
@@ -8720,6 +9029,8 @@ snapshots:
 
   entities@4.5.0: {}
 
+  entities@6.0.1: {}
+
   env-paths@2.2.1: {}
 
   environment@1.1.0: {}
@@ -9012,9 +9323,11 @@ snapshots:
   expand-template@2.0.3:
     optional: true
 
+  expect-type@1.2.2: {}
+
   exsolve@1.0.7: {}
 
-  fake-indexeddb@6.2.2: {}
+  fake-indexeddb@6.2.4: {}
 
   fast-deep-equal@3.1.3: {}
 
@@ -9203,6 +9516,13 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  graphql-tag@2.12.6(graphql@16.12.0):
+    dependencies:
+      graphql: 16.12.0
+      tslib: 2.8.1
+
+  graphql@16.12.0: {}
+
   gzip-size@6.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -9223,6 +9543,12 @@ snapshots:
       ufo: 1.6.1
       uncrypto: 0.1.3
 
+  happy-dom@20.0.8:
+    dependencies:
+      '@types/node': 20.19.23
+      '@types/whatwg-mimetype': 3.0.2
+      whatwg-mimetype: 3.0.0
+
   has-flag@4.0.0: {}
 
   hasown@2.0.2:
@@ -9233,6 +9559,13 @@ snapshots:
 
   hookable@5.5.3: {}
 
+  htmlparser2@10.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 6.0.1
+
   http-errors@2.0.0:
     dependencies:
       depd: 2.0.0
@@ -9287,8 +9620,7 @@ snapshots:
 
   inherits@2.0.4: {}
 
-  ini@1.3.8:
-    optional: true
+  ini@1.3.8: {}
 
   ini@4.1.1: {}
 
@@ -9449,6 +9781,16 @@ snapshots:
 
   jiti@2.5.1: {}
 
+  js-beautify@1.15.4:
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.4
+      glob: 10.4.5
+      js-cookie: 3.0.5
+      nopt: 7.2.1
+
+  js-cookie@3.0.5: {}
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.1: {}
@@ -9734,6 +10076,10 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minimatch@9.0.1:
+    dependencies:
+      brace-expansion: 2.0.2
+
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.2
@@ -9910,6 +10256,10 @@ snapshots:
 
   node-releases@2.0.21: {}
 
+  nopt@7.2.1:
+    dependencies:
+      abbrev: 2.0.0
+
   nopt@8.1.0:
     dependencies:
       abbrev: 3.0.1
@@ -10331,6 +10681,8 @@ snapshots:
       exsolve: 1.0.7
       pathe: 2.0.3
 
+  playwright-core@1.56.1: {}
+
   pluralize@8.0.0: {}
 
   postcss-calc@10.1.1(postcss@8.5.6):
@@ -10531,6 +10883,8 @@ snapshots:
       kleur: 3.0.3
       sisteransi: 1.0.5
 
+  proto-list@1.2.4: {}
+
   protocols@2.0.2: {}
 
   pump@3.0.3:
@@ -10813,6 +11167,8 @@ snapshots:
 
   shell-quote@1.8.3: {}
 
+  siginfo@2.0.0: {}
+
   signal-exit@4.1.0: {}
 
   simple-concat@1.0.1:
@@ -10880,6 +11236,8 @@ snapshots:
 
   stable-hash-x@0.2.0: {}
 
+  stackback@0.0.2: {}
+
   standard-as-callback@2.1.0: {}
 
   statuses@2.0.1: {}
@@ -11078,6 +11436,10 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
+
   tinyexec@1.0.1: {}
 
   tinyglobby@0.2.15:
@@ -11085,6 +11447,8 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tinyrainbow@3.0.3: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -11140,6 +11504,8 @@ snapshots:
       magic-string: 0.30.19
       unplugin: 2.3.10
 
+  undici-types@6.21.0: {}
+
   undici-types@7.11.0: {}
 
   unenv@2.0.0-rc.21:
@@ -11410,6 +11776,12 @@ snapshots:
       optionator: 0.9.4
       typescript: 5.9.2
 
+  vite-plugin-graphql-loader@4.0.4:
+    dependencies:
+      graphql: 16.12.0
+      graphql-tag: 2.12.6(graphql@16.12.0)
+      magic-string: 0.30.19
+
   vite-plugin-inspect@11.3.3(@nuxt/kit@3.19.2(magicast@0.3.5))(vite@7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       ansis: 4.1.0
@@ -11453,9 +11825,9 @@ snapshots:
       terser: 5.44.0
       yaml: 2.8.1
 
-  vitest-environment-nuxt@1.0.1(magicast@0.3.5)(typescript@5.9.2):
+  vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(happy-dom@20.0.8)(magicast@0.3.5)(playwright-core@1.56.1)(typescript@5.9.2)(vitest@4.0.3(@types/node@24.4.0)(happy-dom@20.0.8)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
-      '@nuxt/test-utils': 3.19.2(magicast@0.3.5)(typescript@5.9.2)
+      '@nuxt/test-utils': 3.19.2(@vue/test-utils@2.4.6)(happy-dom@20.0.8)(magicast@0.3.5)(playwright-core@1.56.1)(typescript@5.9.2)(vitest@4.0.3(@types/node@24.4.0)(happy-dom@20.0.8)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1))
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -11470,12 +11842,53 @@ snapshots:
       - typescript
       - vitest
 
+  vitest@4.0.3(@types/node@24.4.0)(happy-dom@20.0.8)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1):
+    dependencies:
+      '@vitest/expect': 4.0.3
+      '@vitest/mocker': 4.0.3(vite@7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/pretty-format': 4.0.3
+      '@vitest/runner': 4.0.3
+      '@vitest/snapshot': 4.0.3
+      '@vitest/spy': 4.0.3
+      '@vitest/utils': 4.0.3
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      expect-type: 1.2.2
+      magic-string: 0.30.19
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.9.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vite: 7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 24.4.0
+      happy-dom: 20.0.8
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
   vscode-uri@3.1.0: {}
 
   vue-bundle-renderer@2.1.2:
     dependencies:
       ufo: 1.6.1
 
+  vue-component-type-helpers@2.2.12: {}
+
   vue-demi@0.14.10(vue@3.5.21(typescript@5.9.2)):
     dependencies:
       vue: 3.5.21(typescript@5.9.2)
@@ -11561,6 +11974,8 @@ snapshots:
       - esbuild
       - uglify-js
 
+  whatwg-mimetype@3.0.0: {}
+
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3
@@ -11574,6 +11989,11 @@ snapshots:
     dependencies:
       isexe: 3.1.1
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   word-wrap@1.2.5: {}
 
   wrap-ansi@7.0.0: