feat: 为搜索页添加error监听

feat(SSR): 为搜索页启用SSR
feat(SSR): 将关于我们页改为SSR
2025-09-28 16:41:36 +08:00 · 2025-09-28 16:40:46 +08:00 · 2025-09-28 16:30:23 +08:00 · 2025-09-28 16:27:01 +08:00 · 2025-09-28 16:11:35 +08:00 · 2025-09-28 15:57:40 +08:00
14 changed files with 461 additions and 430 deletions
--- a/app/components/JinshenFooter.vue
+++ b/app/components/JinshenFooter.vue
@ -42,6 +42,22 @@
        </ul>
      </div>

+      <!-- 实用工具 -->
+      <div class="footer-section">
+        <h4>{{ $t('utilities') }}</h4>
+        <ul class="footer-links">
+          <li>
+            <a
+              href="http://cal.jinshen.cn"
+              target="_blank"
+              rel="noopener noreferer"
+            >
+              {{ $t('navigation.calculator') }}
+            </a>
+          </li>
+        </ul>
+      </div>
+
      <!-- 联系信息 -->
      <div class="footer-section">
        <h4>{{ $t('contact-info') }}</h4>
@ -58,25 +74,6 @@
          <span>{{ $t('address') }}: {{ $t('company-address') }}</span>
        </div>
      </div>
-
-      <!-- 社交媒体 -->
-      <div class="footer-section">
-        <h4>{{ $t('follow-us') }}</h4>
-        <div class="social-links">
-          <a href="#" class="social-link" aria-label="WeChat">
-            <el-icon size="20"><ChatDotRound /></el-icon>
-          </a>
-          <a href="#" class="social-link" aria-label="Weibo">
-            <el-icon size="20"><Star /></el-icon>
-          </a>
-          <a href="#" class="social-link" aria-label="LinkedIn">
-            <el-icon size="20"><Link /></el-icon>
-          </a>
-          <a href="#" class="social-link" aria-label="Email">
-            <el-icon size="20"><Message /></el-icon>
-          </a>
-        </div>
-      </div>
    </div>

    <!-- 版权信息 -->
@ -106,14 +103,7 @@
 </template>

 <script setup lang="ts">
-  import {
-    Phone,
-    Message,
-    Location,
-    ChatDotRound,
-    Star,
-    Link,
-  } from '@element-plus/icons-vue';
+  import { Phone, Message, Location } from '@element-plus/icons-vue';

  const currentYear = new Date().getFullYear();
 </script>
--- a/app/components/JinshenHeader.vue
+++ b/app/components/JinshenHeader.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="header-container">
+  <header class="header-container">
    <div class="logo-section">
      <NuxtLink :to="$localePath('/')" class="logo-link">
        <el-image
@ -44,7 +44,16 @@
        type="info"
        @click="navigateTo(localePath('/search'))"
      >
-        <el-icon class="action-icon"><ElIconSearch /></el-icon>
+        <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">
@ -59,7 +68,7 @@
        </template>
      </el-dropdown>
    </div>
-  </div>
+  </header>
 </template>

 <script setup lang="ts">
--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@ -1,6 +1,6 @@
 <template>
  <div class="page-container">
-    <div v-if="content">
+    <div v-if="!pending">
      <el-breadcrumb class="breadcrumb" separator="/">
        <el-breadcrumb-item class="text-md opacity-50">
          <NuxtLink :to="$localePath('/')">
@ -40,27 +40,19 @@
 <script setup lang="ts">
  const { findOne } = useStrapi();
  const { getStrapiLocale } = useLocalizations();
-
  const strapiLocale = getStrapiLocale();

-  const content = ref<string | null>(null);
-
-  onMounted(async () => {
-    try {
-      const response = await findOne<StrapiCompanyProfile>(
-        'company-profile',
-        undefined,
-        {
+  const { data, pending, error } = useAsyncData('company-profile', () =>
+    findOne<StrapiCompanyProfile>('company-profile', undefined, {
      locale: strapiLocale,
-        }
+    })
  );
-      if (response.data) {
-        content.value = response.data.content || '';
-      } else {
-        console.warn('No company profile data found');
-      }
-    } catch (error) {
-      console.error('Failed to fetch company profile:', error);
+
+  const content = computed(() => data.value?.data.content);
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
    }
  });
 </script>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@ -1,6 +1,6 @@
 <template>
  <div class="homepage">
-    <div v-if="!pending" class="carousel">
+    <section v-if="!pending" class="carousel-section">
      <el-carousel
        class="homepage-carousel"
        height="auto"
@ -8,7 +8,7 @@
        arrow="never"
        autoplay
      >
-        <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
+        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <div class="carousel-item">
            <el-image
              class="carousel-image"
@ -23,11 +23,17 @@
          </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"
@ -72,10 +78,15 @@
            </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"
@ -120,12 +131,12 @@
            </div>
          </el-carousel-item>
        </el-carousel>
+      </div>
+      <div v-else>
+        <el-skeleton :rows="4" animated />
+      </div>
    </section>
  </div>
-    <div v-else class="loading">
-      <el-skeleton :rows="3" animated />
-    </div>
-  </div>
 </template>

 <script setup lang="ts">
@ -133,15 +144,8 @@
  const { getStrapiLocale } = useLocalizations();
  const strapiLocale = getStrapiLocale();

-  const carouselImages = ref<StrapiImage[]>([]);
-  const recommend_productions = ref<Production[]>([]);
-  const recommend_solutions = ref<Solution[]>([]);
-
-  const pending = ref(true);
-
-  onMounted(async () => {
-    try {
-      const response = await findOne<StrapiHomepage>('homepage', undefined, {
+  const { data, pending, error } = useAsyncData('homepage', () =>
+    findOne<StrapiHomepage>('homepage', undefined, {
      populate: {
        carousel: {
          populate: '*',
@ -162,18 +166,20 @@
        },
      },
      locale: strapiLocale,
-      });
-      if (response.data) {
-        carouselImages.value = response.data.carousel || [];
-        recommend_productions.value = response.data.recommend_productions || [];
-        recommend_solutions.value = response.data.recommend_solutions || [];
-        console.log('推荐产品:', recommend_productions.value);
-        console.log('推荐解决方案:', recommend_solutions.value);
-      }
-    } catch (error) {
-      console.error('Error fetching homepage data:', error);
-    } finally {
-      pending.value = false;
+    })
+  );
+
+  const carousel = computed(() => data.value?.data.carousel || []);
+  const recommend_productions = computed(
+    () => data.value?.data.recommend_productions || []
+  );
+  const recommend_solutions = computed(
+    () => data.value?.data.recommend_solutions || []
+  );
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
    }
  });

@ -213,6 +219,10 @@
    line-height: 1.6;
  }

+  .carousel-section {
+    padding: 0;
+  }
+
  .homepage-carousel .el-carousel__item {
    width: 100%;
    height: 33vw;
@ -293,6 +303,7 @@
  .recommend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
  }

  .recommend-card-body {
--- a/app/pages/productions/[...slug].vue
+++ b/app/pages/productions/[...slug].vue
@ -1,5 +1,6 @@
 <template>
  <div class="page-container">
+    <div v-if="!pending">
      <div v-if="production">
        <!-- 面包屑导航 -->
        <el-breadcrumb class="breadcrumb" separator="/">
@ -53,6 +54,7 @@
              </el-carousel-item>
            </el-carousel>
          </div>
+
          <div class="production-info">
            <h1>{{ production.title }}</h1>
            <p class="summary">{{ production.summary }}</p>
@ -63,7 +65,9 @@
        <div class="production-content">
          <el-tabs v-model="activeName" class="production-tabs" stretch>
            <el-tab-pane label="产品详情" name="details">
-            <markdown-renderer :content="production.production_details || ''" />
+              <markdown-renderer
+                :content="production.production_details || ''"
+              />
            </el-tab-pane>
            <el-tab-pane label="技术规格" name="specs">
              <spec-table :data="production.production_specs" />
@ -74,25 +78,15 @@
            <el-tab-pane label="相关文档" name="documents">
              <document-list
                :documents="
-                production.production_documents.map((item) => item.document) ||
-                []
+                  production.production_documents.map(
+                    (item) => item.document
+                  ) || []
                "
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
-
-    <!-- 加载状态 -->
-    <div v-else-if="pending" class="loading">
-      <el-skeleton style="--el-skeleton-circle-size: 400px">
-        <template #template>
-          <el-skeleton-item variant="circle" />
-        </template>
-      </el-skeleton>
-      <el-skeleton :rows="5" animated />
-    </div>
-
      <!-- 未找到产品 -->
      <div v-else class="not-found">
        <el-result
@ -108,6 +102,15 @@
        </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">
@ -116,20 +119,13 @@
  const { getStrapiLocale } = useLocalizations();
  const strapiLocale = getStrapiLocale();

-  const production = ref<Production | null>(null);
-  const pending = ref(true);
-
-  const activeName = ref('details'); // 默认选中概览标签
-
  // 获取路由参数（slug 或 id）
  const documentId = computed(() => route.params.slug as string);

-  onMounted(async () => {
-    try {
-      const response = await findOne<Production>(
-        'productions',
-        documentId.value,
-        {
+  const { data, pending, error } = useAsyncData(
+    () => `production-${documentId.value}`,
+    () =>
+      findOne<Production>('productions', documentId.value, {
        populate: {
          production_specs: {
            populate: '*',
@ -148,19 +144,16 @@
          },
        },
        locale: strapiLocale,
-        }
+      })
  );
-      if (response.data) {
-        const item = response.data;
-        production.value = {
-          ...item,
-        };
-        console.log('Fetched production:', production.value);
-      }
-    } catch (error) {
-      console.error('Failed to fetch production:', error);
-    } finally {
-      pending.value = false;
+
+  const production = computed(() => data.value?.data ?? null);
+
+  const activeName = ref('details'); // 默认选中概览标签
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
    }
  });

--- a/app/pages/productions/index.vue
+++ b/app/pages/productions/index.vue
@ -15,7 +15,7 @@
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
-    <div class="page-content">
+    <div v-if="!pending" class="page-content">
      <div class="productions-container">
        <el-collapse v-model="activeNames" class="production-collapse">
          <el-collapse-item
@ -38,18 +38,44 @@
        </el-collapse>
      </div>
    </div>
+    <div v-else>
+      <el-skeleton :rows="6" animated />
+    </div>
  </div>
 </template>

 <script setup lang="ts">
  const { find } = useStrapi();
  const { getStrapiLocale } = useLocalizations();
-
  const strapiLocale = getStrapiLocale();

+  const { data, pending, error } = useAsyncData(
+    'productions',
+    () =>
+      find<Production>('productions', {
+        populate: {
+          cover: {
+            populate: '*',
+          },
+          production_type: {
+            populate: '*',
+          },
+        },
+        filters: {
+          show_in_production_list: {
+            $eq: true,
+          },
+        },
+        locale: strapiLocale,
+      }),
+    {
+      lazy: true,
+    }
+  );
+
  const activeNames = ref<string[]>([]);

-  const productions = ref<Production[]>([]);
+  const productions = computed(() => data.value?.data ?? []);

  // 按类型分组
  // 兼容 production_type 既可能为对象也可能为字符串
@ -72,34 +98,27 @@
    return groups;
  });

-  onMounted(async () => {
-    try {
-      const response = await find<Production>('productions', {
-        populate: {
-          cover: {
-            populate: '*',
-          },
-          production_type: {
-            populate: '*',
-          },
-        },
-        filters: {
-          show_in_production_list: {
-            $eq: true, // 只获取在产品列表中显示的产品
-          },
-        },
-        locale: strapiLocale,
+  watch(groupedProductions, () => {
+    if (groupedProductions.value) {
+      activeNames.value = [
+        ...Object.keys(groupedProductions.value),
+        'no-category',
+      ];
+    }
  });
-      productions.value = response.data.map((item: Production) => ({
-        ...item,
-        // 保持 production_type 原始类型，兼容对象或字符串
-        production_type: item.production_type,
-      }));
-      // 默认展开所有分组
-      activeNames.value = Object.keys(groupedProductions.value);
-      activeNames.value.push('no-category'); // 展开未分类
-    } catch (error) {
-      console.error('Failed to fetch productions:', error);
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
+    }
+  });
+
+  onMounted(() => {
+    if (groupedProductions.value) {
+      activeNames.value = [
+        ...Object.keys(groupedProductions.value),
+        'no-category',
+      ];
    }
  });
 </script>
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@ -101,12 +101,23 @@
  const localePath = useLocalePath();

  // 搜索相关
-  const loading = ref(true);
  const { search } = useMeilisearch();
  const keyword = ref('');
  const activeRequestId = ref(0);

-  const sections = ref<SearchSection[]>([]);
+  const {
+    data: sections,
+    pending: loading,
+    error,
+  } = await useAsyncData(
+    () => `search-${route.query.query ?? ''}`,
+    async () => {
+      const q = String(route.query.query ?? '').trim();
+      if (!q) return [];
+      return await search(q, { limit: 12 });
+    }
+  );
+
  // 本地化+空Section过滤
  const filteredSections = computed(() =>
    sections.value
@ -137,7 +148,7 @@
    return map;
  });

-  // 分类控制
+  // 分页控制
  const currentPage = ref(1);

  const hasResults = computed(() =>
@ -165,7 +176,6 @@
      return;
    }

-    loading.value = true;
    try {
      const results = await search(trimmed, { limit: 12 });
      if (requestId === activeRequestId.value) {
@ -178,10 +188,6 @@
      if (requestId === activeRequestId.value) {
        sections.value = [];
      }
-    } finally {
-      if (requestId === activeRequestId.value) {
-        loading.value = false;
-      }
    }
  };

@ -203,15 +209,17 @@
    }
  );

-  onMounted(() => {
-    if (typeof route.query.query === 'string' && route.query.query.trim()) {
-      keyword.value = route.query.query;
-      performSearch(route.query.query);
-    } else {
-      loading.value = false;
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
    }
  });

+  onMounted(() => {
+    if (typeof route.query.query === 'string' && route.query.query.trim())
+      keyword.value = route.query.query;
+  });
+
  useHead(() => ({
    title: t('search.head-title'),
  }));
--- a/app/pages/solutions/[...slug].vue
+++ b/app/pages/solutions/[...slug].vue
@ -1,5 +1,6 @@
 <template>
  <div class="page-container">
+    <div v-if="!pending">
      <div v-if="solution">
        <div class="page-header">
          <el-breadcrumb class="breadcrumb" separator="/">
@ -23,7 +24,8 @@
            <h1>{{ solution.title }}</h1>
            <div class="solution-meta">
              <span class="solution-date">
-              CreatedAt: {{ new Date(solution.createdAt).toLocaleDateString() }}
+                CreatedAt:
+                {{ new Date(solution.createdAt).toLocaleDateString() }}
              </span>
            </div>
          </div>
@ -33,6 +35,20 @@
          </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('/productions')">
+              {{ $t('back-to-solutions') }}
+            </el-button>
+          </template>
+        </el-result>
+      </div>
+    </div>
    <div v-else class="loading">
      <el-skeleton :rows="5" animated />
    </div>
@ -45,27 +61,23 @@
  const { getStrapiLocale } = useLocalizations();
  const strapiLocale = getStrapiLocale();

-  const solution = ref<Solution | null>(null);
-
  // 获取路由参数(documentId)
  const documentId = computed(() => route.params.slug as string);

-  onMounted(async () => {
-    try {
-      const response = await findOne<Solution>('solutions', documentId.value, {
+  const { data, pending, error } = useAsyncData(
+    () => `solution-${documentId.value}`,
+    () =>
+      findOne<Solution>('solutions', documentId.value, {
        populate: '*',
        locale: strapiLocale,
-      });
-      if (response.data) {
-        solution.value = {
-          ...response.data,
-          // 确保 solution_type 保持原始类型
-          solution_type: response.data.solution_type,
-        };
-      }
-      console.log('Fetched Solution:', solution.value);
-    } catch (error) {
-      console.error('Failed to fetch solution:', error);
+      })
+  );
+
+  const solution = computed(() => data.value?.data ?? null);
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
    }
  });
 </script>
@ -127,4 +139,11 @@
    align-items: center;
    margin-top: 1rem;
  }
+
+  .not-found {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+  }
 </style>
--- a/app/pages/solutions/index.vue
+++ b/app/pages/solutions/index.vue
@ -15,7 +15,7 @@
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
-    <div class="solutions-container">
+    <div v-if="!pending" class="solutions-container">
      <el-tabs v-model="activeName" class="solutions-tabs">
        <el-tab-pane :label="$t('all')" name="all">
          <div class="solution-list">
@ -48,18 +48,34 @@
        </el-tab-pane>
      </el-tabs>
    </div>
+    <div v-else>
+      <el-skeleton :rows="6" animated />
+    </div>
  </div>
 </template>

 <script setup lang="ts">
  const { find } = useStrapi();
  const { getStrapiLocale } = useLocalizations();
-
  const strapiLocale = getStrapiLocale();

+  const { data, pending, error } = useAsyncData('solutions', () =>
+    find<Solution>('solutions', {
+      populate: {
+        cover: {
+          populate: '*',
+        },
+        solution_type: {
+          populate: '*',
+        },
+      },
+      locale: strapiLocale,
+    })
+  );
+
  const activeName = ref<string>('all');

-  const solutions = ref<Solution[]>([]);
+  const solutions = computed(() => data.value?.data ?? []);

  // 按类型分组
  const groupedSolutions = computed(() => {
@ -81,27 +97,9 @@
    return gourps;
  });

-  onMounted(async () => {
-    try {
-      const response = await find<Solution>('solutions', {
-        populate: {
-          cover: {
-            populate: '*',
-          },
-          solution_type: {
-            populate: '*',
-          },
-        },
-        locale: strapiLocale,
-      });
-      solutions.value = response.data.map((item: Solution) => ({
-        ...item,
-        solution_type: item.solution_type,
-      }));
-      console.log('Fetched Solutions:', solutions.value);
-      console.log('Grouped Solutions:', groupedSolutions.value);
-    } catch (error) {
-      console.error('Failed to fetch solutions:', error);
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
    }
  });
 </script>
--- a/app/pages/support/contact-us.vue
+++ b/app/pages/support/contact-us.vue
@ -1,6 +1,5 @@
 <template>
  <div class="page-container">
-    <div v-if="content">
    <support-tabs model-value="contact-us" />
    <div class="page-header">
      <h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
@ -23,10 +22,9 @@
      </el-breadcrumb>
    </div>

-      <div class="page-content">
+    <div v-if="!pending" class="page-content">
      <markdown-renderer :content="content || ''" />
    </div>
-    </div>
    <div v-else class="loading">
      <el-skeleton :rows="5" animated />
    </div>
@ -36,28 +34,20 @@
 <script setup lang="ts">
  const { findOne } = useStrapi();
  const { getStrapiLocale } = useLocalizations();
-
  const strapiLocale = getStrapiLocale();

-  const content = ref<string>('');
-
-  onMounted(async () => {
-    try {
-      const response = await findOne<StrapiContactInfo>(
-        'contact-info',
-        undefined,
-        {
+  const { data, pending, error } = useAsyncData('contact-info', () =>
+    findOne<StrapiContactInfo>('contact-info', undefined, {
      populate: '*',
      locale: strapiLocale,
-        }
+    })
  );
-      if (response.data) {
-        content.value = response.data.content || '';
-      } else {
-        console.warn('No contact info data found');
-      }
-    } catch (error) {
-      console.error('Failed to fetch contact info:', error);
+
+  const content = computed(() => data.value?.data.content ?? '');
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
    }
  });
 </script>
--- a/app/pages/support/documents.vue
+++ b/app/pages/support/documents.vue
@ -37,26 +37,23 @@
  const { getStrapiLocale } = useLocalizations();
  const strapiLocale = getStrapiLocale();

-  const pending = ref(true);
-
-  const documents = ref<StrapiMedia[]>([]);
-
-  onMounted(async () => {
-    try {
-      const response = await find<ProductionDocument>('production-documents', {
-        locale: strapiLocale,
+  const { data, pending, error } = useAsyncData('documents', () =>
+    find<ProductionDocument>('production-documents', {
      populate: 'document',
-      });
-      if (response.data) {
-        documents.value =
-          response.data.map((item) => ({
+      locale: strapiLocale,
+    })
+  );
+
+  const documents = computed(
+    () =>
+      data.value?.data.map((item) => ({
        ...item.document,
-          })) || [];
-      }
-    } catch (error) {
-      console.error('Error fetching documents:', error);
-    } finally {
-      pending.value = false;
+      })) || []
+  );
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
    }
  });
 </script>
--- a/app/pages/support/faq.vue
+++ b/app/pages/support/faq.vue
@ -1,7 +1,7 @@
 <template>
  <div class="page-container">
    <div v-if="pending" class="flex justify-center items-center h-64">
-      <el-spinner />
+      <el-skeleton :rows="6" animated />
    </div>
    <div v-else>
      <support-tabs model-value="faq" />
@ -37,22 +37,17 @@
  const { getStrapiLocale } = useLocalizations();
  const strapiLocale = getStrapiLocale();

-  const questions = ref<Question[]>([]);
-
-  const pending = ref(true);
-
-  onMounted(async () => {
-    try {
-      const faqData = await find<Question>('questions', {
+  const { data, pending, error } = useAsyncData('questions', () =>
+    find<Question>('questions', {
      locale: strapiLocale,
-      });
-      if (faqData) {
-        questions.value = faqData.data || [];
-      }
-    } catch (error) {
-      console.error('Failed to fetch FAQ data:', error);
-    } finally {
-      pending.value = false;
+    })
+  );
+
+  const questions = computed(() => data.value?.data ?? null);
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
    }
  });
 </script>
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@ -25,6 +25,7 @@
  "solutions-desc": "Providing customized technology solutions for enterprises to accelerate digital transformation.",
  "support-desc": "24/7 professional technical support to ensure stable operation of your business.",
  "quick-links": "Quick Links",
+  "utilities": "Utilities",
  "navigation": {
    "home": "Home",
    "productions": "Productions",
@ -33,7 +34,8 @@
    "about-us": "About Us",
    "contact-info": "Contact Info",
    "faq": "FAQ",
-    "documents": "Documents"
+    "documents": "Documents",
+    "calculator": "Calculator"
  },
  "contact-info": "Contact Us",
  "telephone": "Telephone",
@ -49,6 +51,9 @@
  "product-not-found": "Product Not Found",
  "product-not-found-desc": "Sorry, the product you are looking for does not exist or has been removed.",
  "back-to-productions": "Back to Products",
+  "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",
  "no-content-available": "No detailed information available",
  "loading": "Loading...",
  "our-productions": "Our Productions",
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@ -25,6 +25,7 @@
  "solutions-desc": "为企业提供定制化的技术解决方案，助力数字化转型。",
  "support-desc": "7x24小时专业技术支持，确保您的业务稳定运行。",
  "quick-links": "快速链接",
+  "utilities": "实用工具",
  "navigation": {
    "home": "主页",
    "productions": "产品中心",
@ -33,7 +34,8 @@
    "about-us": "关于我们",
    "contact-info": "联系信息",
    "faq": "常见问题",
-    "documents": "文档资料"
+    "documents": "文档资料",
+    "calculator": "纸管计算工具"
  },
  "contact-info": "联系我们",
  "telephone": "电话",
@ -49,6 +51,9 @@
  "product-not-found": "产品未找到",
  "product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
  "back-to-productions": "返回产品列表",
+  "solution-not-found": "解决方案未找到",
+  "solution-not-found-desc": "抱歉，您访问的解决方案不存在或已被删除",
+  "back-to-solutions": "返回解决方案列表",
  "no-content-available": "暂无详细信息",
  "loading": "加载中...",
  "our-productions": "我们的产品",
Author	SHA1	Message	Date
R2m1liA	1c98921e01	feat: 为搜索页添加error监听 All checks were successful deploy to server / build-and-deploy (push) Successful in 2m45s Details	2025-09-28 16:41:36 +08:00
R2m1liA	1ac9c76c3e	feat(SSR): 为搜索页启用SSR	2025-09-28 16:40:46 +08:00
R2m1liA	9f2f7f6984	feat(SSR): 将关于我们页改为SSR	2025-09-28 16:30:23 +08:00
R2m1liA	d4c079286e	feat(SSR): 将服务支持页面改为SSR	2025-09-28 16:27:01 +08:00
R2m1liA	a7a4551528	feat(SSR): 将解决方案页改为SSR - 使用Nuxt的useAsyncData - 添加i18n信息	2025-09-28 16:11:35 +08:00
R2m1liA	dbd9346362	fix: 调整错误处理机制 - 移出抛出错误的方法	2025-09-28 15:57:40 +08:00
R2m1liA	94196ffdfe	feat(SSR): 将产品页改为SSR	2025-09-28 15:50:31 +08:00
R2m1liA	ba31f0b644	chore: merge from branch 'master'	2025-09-28 14:37:38 +08:00
R2m1liA	509a6fae36	feat(SSR): 将首页调整为SSR - 将CMS数据的获取方式改为Nuxt的useAsyncData - 将加载模式改为渐进式	2025-09-28 14:18:27 +08:00
R2m1liA	b985749f5b	feat: 添加计算工具跳转功能 All checks were successful deploy to server / build-and-deploy (push) Successful in 2m44s Details - 在header与foot中分别添加纸管计算工具的跳转链接 - 重构代码，提升语义化 - 添加i18n国际化数据 Issue: resolve #22	2025-09-27 15:10:27 +08:00
R2m1liA	aafa5c8942	chore: merge from 'master' Some checks failed deploy to server / build-and-deploy (push) Has been cancelled Details	2025-09-27 15:05:47 +08:00
R2m1liA	ce975f7e3b	feat(header): 修改header布局 - 在header的action区添加计算器的跳转链接	2025-09-27 15:04:59 +08:00
R2m1liA	c7a8a96451	fix: 修正首页卡片在鼠标hover时的指针行为 All checks were successful deploy to server / build-and-deploy (push) Successful in 6m29s Details - 为recommend-card的hover样式添加cursor: pointer Issue: Fixes #27	2025-09-27 14:35:19 +08:00
R2m1liA	2f88b0b017	fix: 修正首页卡片在鼠标hover时的指针行为 - 为recommend-card的hover样式添加cursor: pointer	2025-09-27 14:32:36 +08:00
R2m1liA	d33007bcfb	refactor(header): 使用<header>标签替换<div> - 提高语义化，提高可读性	2025-09-24 14:45:43 +08:00
R2m1liA	059b99b802	feat(footer): 修改footer布局 - 在footer中添加实用工具的跳转链接	2025-09-24 14:44:22 +08:00