fix: 重定向页布局调整

- 补全各个页面的骨架屏渲染机制修改

app/components/pages/search/SearchTabs.vue

@@ -47,3 +47,9 @@
     currentPage.value = 1; // 重置页码
   });
 </script>
+
+<style scoped>
+  .el-tabs {
+    width: 100%;
+  }
+</style>

app/components/shared/QuestionList.vue

@@ -51,9 +51,19 @@
       // 展开目标项
       activeNames.value = [target.id];
 
+      await nextTick();
+      await new Promise((resolve) => setTimeout(resolve, 100)); // 等待动画完成
+
       // 平滑滚动到对应位置
+      // const el = document.querySelector(`#q-${target.id}`);
+      // el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      setTimeout(() => {
         const el = document.querySelector(`#q-${target.id}`);
-      el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        el?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+        });
+      }, 200); // 与 el-collapse 的 transition 时间匹配
     },
     { immediate: true }
   );

app/pages/about/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="page-container">
-    <div v-if="!pending">
     <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
 
     <div class="content">
+      <el-skeleton :loading="pending" :rows="10" animated>
+        <template #default>
           <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="html-typography" v-html="companyProfile.content || ''" />
+          <div class="html-typography" v-html="companyProfile?.content || ''" />
           <!-- <div v-if="!hydrated" v-html="companyProfile.content || ''" /> -->
           <!-- <div v-else> -->
           <!--   <html-renderer -->
@@ -13,9 +14,10 @@
           <!--     :html="companyProfile.content || ''" -->
           <!--   /> -->
           <!-- </div> -->
-      </div>
 
-      <el-divider content-position="left">{{ $t('learn-more') }}</el-divider>
+          <el-divider content-position="left">{{
+            $t('learn-more')
+          }}</el-divider>
           <div class="button-group">
             <learn-more-card
               :title="$t('navigation.contact-info')"
@@ -28,9 +30,8 @@
               @click="openMap"
             />
           </div>
-    </div>
+        </template>
-    <div v-else class="loading">
+      </el-skeleton>
-      <el-skeleton :rows="5" animated />
     </div>
   </div>
 </template>
@@ -42,7 +43,9 @@
     { label: $t('navigation.home'), to: localePath('/') },
     { label: $t('navigation.about-us') },
   ];
-  const { data: companyProfile, pending, error } = await useCompanyProfile();
+  const { data, pending, error } = useCompanyProfile();
+
+  const companyProfile = computed(() => data.value ?? null);
 
   const openMap = () => {
     window.open(localePath('/locate'));

app/pages/download/[id].vue

@@ -4,11 +4,17 @@
       <h1 class="page-title">{{ $t('navigation.downloads') }}</h1>
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-if="!pending" class="page-content">
+    <div class="page-content">
+      <el-skeleton
+        :loading="pending"
+        :rows="6"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #default>
           <file-card :file-id="id" :file="file" />
-    </div>
+        </template>
-    <div v-else>
+      </el-skeleton>
-      <el-skeleton :rows="6" animated />
     </div>
   </div>
 </template>

app/pages/locate.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>redirecting...</div>
+  <div class="page-container">
+    <h1>{{ $t('redirecting') }}</h1>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -10,3 +12,17 @@
     window.location.href = platform;
   });
 </script>
+
+<style scoped>
+  .page-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80vh;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+</style>

app/pages/products/[slug].vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page-container">
-    <div v-if="!pending">
     <div v-if="product">
       <!-- 面包屑导航 -->
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
@@ -19,15 +18,6 @@
       />
     </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">
@@ -37,7 +27,7 @@
   // 获取路由参数
   const id = route.params.slug as string;
 
-  const { data: product, pending, error } = await useProduct(id);
+  const { data: product, error } = await useProduct(id);
 
   const breadcrumbItems = computed(() => [
     { label: $t('navigation.home'), to: localePath('/') },

app/pages/products/index.vue

@@ -10,7 +10,26 @@
 
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-if="!pending" class="page-content">
+    <div>
+      <el-skeleton
+        animated
+        :loading="pending"
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <div v-for="i in 3" :key="i" class="products-container">
+            <el-skeleton-item variant="h1" class="skeleton-collapse" />
+            <div class="skeleton-group-list">
+              <el-skeleton-item
+                v-for="j in 3"
+                :key="j"
+                variant="rect"
+                class="skeleton-card"
+              />
+            </div>
+          </div>
+        </template>
+        <template #default>
           <div class="products-container">
             <el-collapse v-model="activeNames" class="product-collapse">
               <el-collapse-item
@@ -32,9 +51,8 @@
               </el-collapse-item>
             </el-collapse>
           </div>
-    </div>
+        </template>
-    <div v-else>
+      </el-skeleton>
-      <el-skeleton :rows="6" animated />
     </div>
   </div>
 </template>
@@ -151,6 +169,46 @@
     justify-content: flex-start;
   }
 
+  .skeleton-collapse {
+    height: 50px;
+    width: 100%;
+  }
+
+  .skeleton-group-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+    justify-content: flex-start;
+    margin-bottom: 2rem;
+  }
+
+  .skeleton-card {
+    width: 30%;
+    height: 250px;
+    margin-right: 1rem;
+  }
+
+  @media (max-width: 1200px) {
+    .skeleton-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .group-list {
+      justify-content: center;
+      align-items: center;
+    }
+    .skeleton-group-list {
+      justify-content: center;
+      align-items: center;
+    }
+
+    .skeleton-card {
+      width: 90%;
+    }
+  }
+
   :deep(.el-collapse-item__header) {
     padding: 30px auto;
     font-size: 1.5rem;

app/pages/search.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="search-page">
     <search-header v-model="keyword" />
-    <div v-if="loading" class="search-state">
+    <div class="search-state">
-      <el-skeleton :rows="4" animated />
+      <el-skeleton
-    </div>
+        :loading="loading"
-    <search-tabs v-else-if="hasResults" :search-items="searchItems" />
+        animated
-    <div v-else class="search-state">
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <el-skeleton-item
+            v-for="i in 10"
+            :key="i"
+            variant="rect"
+            class="skeleton-item"
+          />
+        </template>
+        <template #default>
+          <search-tabs v-if="hasResults" :search-items="searchItems" />
+          <div v-else>
             <el-empty
               :description="
                 route.query.query
@@ -14,6 +26,9 @@
               "
             />
           </div>
+        </template>
+      </el-skeleton>
+    </div>
   </div>
 </template>
 
@@ -96,7 +111,11 @@
   .search-state {
     display: flex;
     justify-content: center;
-    padding: 3rem 0;
+  }
+
+  .skeleton-item {
+    height: 80px;
+    margin-bottom: 1rem;
   }
 
   @media (max-width: 640px) {

app/pages/solutions/[slug].vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page-container">
-    <div v-if="!pending">
     <div v-if="solution">
       <div class="page-header">
         <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
@@ -16,10 +15,6 @@
       />
     </div>
   </div>
-    <div v-else class="loading">
-      <el-skeleton :rows="5" animated />
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,7 +24,7 @@
   // 获取路由参数
   const id = route.params.slug as string;
 
-  const { data: solution, pending, error } = await useSolution(id);
+  const { data: solution, error } = await useSolution(id);
 
   const breadcrumbItems = computed(() => [
     { label: $t('navigation.home'), to: localePath('/') },

app/pages/solutions/index.vue

@@ -8,7 +8,26 @@
 
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-if="!pending" class="solutions-container">
+    <div class="solutions-container">
+      <el-skeleton
+        :loading="pending"
+        animated
+        :throttle="{
+          leading: 500,
+          trailing: 500,
+        }"
+      >
+        <template #template>
+          <div class="skeleton-group-list">
+            <el-skeleton-item
+              v-for="i in 12"
+              :key="i"
+              variant="rect"
+              class="skeleton-card"
+            />
+          </div>
+        </template>
+        <template #default>
           <el-tabs v-model="activeName" class="solutions-tabs">
             <el-tab-pane :label="$t('all')" name="all">
               <div class="solution-list">
@@ -40,9 +59,8 @@
               </div>
             </el-tab-pane>
           </el-tabs>
-    </div>
+        </template>
-    <div v-else>
+      </el-skeleton>
-      <el-skeleton :rows="6" animated />
     </div>
   </div>
 </template>
@@ -56,7 +74,9 @@
     { label: $t('navigation.solutions') },
   ];
 
-  const { data: solutions, pending, error } = await useSolutionList();
+  const { data, pending, error } = useSolutionList();
+
+  const solutions = computed(() => data.value ?? []);
 
   const activeName = ref<string>('all');
 
@@ -123,4 +143,34 @@
     margin-bottom: 2rem;
     gap: 40px;
   }
+
+  .skeleton-group-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: flex-start;
+    margin-bottom: 2rem;
+  }
+
+  .skeleton-card {
+    width: 30%;
+    height: 200px;
+  }
+
+  @media (max-width: 1200px) {
+    .skeleton-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .skeleton-group-list {
+      justify-content: center;
+      align-items: center;
+    }
+
+    .skeleton-card {
+      width: 90%;
+    }
+  }
 </style>

app/pages/support/contact-us.vue

@@ -6,7 +6,14 @@
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
 
-    <div v-if="!pending" class="page-content">
+    <div class="page-content">
+      <el-skeleton
+        :rows="10"
+        :loading="pending"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #default>
           <!-- eslint-disable-next-line vue/no-v-html -->
           <div class="html-typography" v-html="contactInfo?.content || ''" />
           <!-- <div v-if="!hydrated" v-html="contactInfo?.content || ''" /> -->
@@ -16,9 +23,8 @@
           <!--     :html="contactInfo?.content || ''" -->
           <!--   /> -->
           <!-- </div> -->
-    </div>
+        </template>
-    <div v-else class="loading">
+      </el-skeleton>
-      <el-skeleton :rows="5" animated />
     </div>
   </div>
 </template>
@@ -31,7 +37,9 @@
     { label: $t('navigation.support'), to: localePath('/support') },
     { label: $t('navigation.contact-info') },
   ];
-  const { data: contactInfo, pending, error } = await useContactInfo();
+  const { data, pending, error } = useContactInfo();
+
+  const contactInfo = computed(() => data.value ?? null);
 
   watch(error, (value) => {
     if (value) {

app/pages/support/documents.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="page-container">
-    <div v-if="pending">
+    <div>
-      <el-skeleton :rows="5" animated />
-    </div>
-    <div v-else>
       <support-tabs model-value="documents" />
       <div class="page-header">
         <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
@@ -17,6 +14,29 @@
           :document-type-options="documentTypeOptions"
         />
 
+        <el-skeleton
+          :loading="pending"
+          animated
+          :throttle="{
+            leading: 500,
+            trailing: 500,
+          }"
+        >
+          <template #template>
+            <div class="flex flex-col gap-xl">
+              <el-skeleton-item
+                variant="rect"
+                style="width: 100%; height: 100px"
+              />
+              <el-skeleton-item
+                v-for="i in 10"
+                :key="i"
+                variant="h1"
+                style="height: 60px"
+              />
+            </div>
+          </template>
+          <template #default>
             <document-list
               :documents="paginatedDocuments"
               :show-category="
@@ -33,6 +53,8 @@
               :page-size="documentsPerPage"
               :total="filteredDocuments.length"
             />
+          </template>
+        </el-skeleton>
       </div>
     </div>
   </div>
@@ -56,7 +78,9 @@
   const page = ref(1);
   const documentsPerPage = 10;
 
-  const { data: documents, pending, error } = await useDocumentList();
+  const { data, pending, error } = useDocumentList();
+
+  const documents = computed(() => data.value ?? []);
 
   const documentTypeOptions = computed(() => {
     const types: DocumentTypeView[] = [];

app/pages/support/faq.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="page-container">
-    <div v-if="pending" class="flex justify-center items-center h-64">
-      <el-skeleton :rows="6" animated />
-    </div>
-    <div v-else>
     <support-tabs model-value="faq" />
     <div class="page-header">
       <h1 class="page-title">{{ $t('navigation.faq') }}</h1>
@@ -18,6 +14,22 @@
         :question-type-options="questionTypeOptions"
       />
 
+      <el-skeleton
+        :loading="pending"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <div class="flex flex-col gap-xl">
+            <el-skeleton-item
+              v-for="i in 10"
+              :key="i"
+              variant="h1"
+              style="height: 80px"
+            />
+          </div>
+        </template>
+        <template #default>
           <question-list :questions="paginatedQuestions" />
 
           <el-pagination
@@ -28,7 +40,8 @@
             :page-size="questionsPerPage"
             :total="filteredQuestions.length"
           />
-      </div>
+        </template>
+      </el-skeleton>
     </div>
   </div>
 </template>
@@ -57,7 +70,9 @@
     { label: $t('navigation.faq') },
   ];
 
-  const { data: questions, pending, error } = await useQuestionList();
+  const { data, pending, error } = useQuestionList();
+
+  const questions = computed(() => data.value ?? []);
 
   const questionTypeOptions = computed(() => {
     const types: QuestionTypeView[] = [];

i18n/locales/en.json

@@ -127,5 +127,6 @@
     "specs": "Specifications",
     "faq": "FAQ",
     "documents": "Documents"
-  }
+  },
+  "redirecting": "Redirecting..."
 }

i18n/locales/es.json

@@ -126,5 +126,6 @@
     "specs": "Especificaciones",
     "faq": "FAQ",
     "documents": "Documentos"
-  }
+  },
+  "redirecting": "Redirigiendo..."
 }

i18n/locales/ru.json

@@ -126,5 +126,6 @@
     "specs": "Технические спецификации",
     "faq": "Часто задаваемые вопросы",
     "documents": "Связанные документы"
-  }
+  },
+  "redirecting": "Перенаправление..."
 }

i18n/locales/zh.json

@@ -126,5 +126,6 @@
     "specs": "技术规格",
     "faq": "常见问题",
     "documents": "相关文档"
-  }
+  },
+  "redirecting": "正在跳转..."
 }

server/api/search.get.ts

@@ -11,7 +11,7 @@ export default defineEventHandler(async (event) => {
   if (!q) return [];
 
   const meili = getMeiliService();
-  const sections = await meili.search(q, { limit: 12 }, locale);
+  const sections = await meili.search(q, { limit: 500 }, locale);
 
   // 空Section过滤
   const filteredSections = sections.filter(

server/assets/graphql/documentList.graphql

@@ -1,5 +1,5 @@
 query GetDocumentList($locale: String!) {
-  product_documents(filter: { status: { _eq: "published" } }) {
+  product_documents(filter: { status: { _eq: "published" } }, limit: 500) {
     id
     file {
       id

server/assets/graphql/productList.graphql

@@ -1,5 +1,5 @@
 query GetProductList($locale: String!) {
-  products(filter: { status: { _eq: "in-production" } }) {
+  products(filter: { status: { _eq: "in-production" } }, limit: 200) {
     id
     status
     translations(filter: { languages_code: { code: { _eq: $locale } } }) {

server/assets/graphql/questionList.graphql

@@ -1,5 +1,5 @@
 query GetQuestionList($locale: String!) {
-  questions(filter: { status: { _eq: "published" } }) {
+  questions(filter: { status: { _eq: "published" } }, limit: 500) {
     id
     type {
       id

server/assets/graphql/solutionList.graphql

@@ -1,5 +1,5 @@
 query GetSolutionList($locale: String!) {
-  solutions(filter: { status: { _eq: "published" } }) {
+  solutions(filter: { status: { _eq: "published" } }, limit: 200) {
     id
     cover {
       id