feat(support): 添加分类筛选的功能

- 为常见问题&文档资料页面添加分类筛选功能
- 调整markdown中的表格渲染样式

app/components/MarkdownRenderer.vue

@@ -1,10 +1,12 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <!-- 用 v-html 渲染解析后的 HTML -->
-  <div class="markdown-body" v-html="safeHtml" />
+  <div ref="container" class="markdown-body" v-html="safeHtml" />
 </template>
 
 <script setup lang="ts">
+  import { createApp } from 'vue';
+  import MarkdownTable from './MarkdownTable.vue';
   interface Props {
     content: string;
   }
@@ -17,7 +19,44 @@
   const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls));
   // const safeHtml = computed(() => renderMarkdown(props.content))
 
-  console.log('Rendered HTML:', safeHtml.value);
+  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(
+        (th) => th.textContent?.trim() ?? ''
+      );
+
+      // 2. 提取行数据
+      const rows = Array.from(table.querySelectorAll('tbody tr')).map((tr) => {
+        const cells = Array.from(tr.querySelectorAll('td')).map(
+          (td) => td.textContent?.trim() ?? ''
+        );
+        const obj: Record<string, string> = {};
+        headers.forEach((h, i) => {
+          obj[h] = cells[i];
+        });
+        return obj;
+      });
+
+      // 3. 创建 Vue 子应用，把原生 table 替换成 <md-table>
+      const mountPoint = document.createElement('div');
+      table.replaceWith(mountPoint);
+
+      const app = createApp(MarkdownTable, { headers, rows });
+      app.mount(mountPoint);
+    });
+  });
+
+  // console.log('Rendered HTML:', safeHtml.value);
 </script>
 
 <style>

app/components/MarkdownTable.vue

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

app/components/QuestionList.vue

@@ -2,10 +2,10 @@
   <div class="question-list">
     <el-collapse class="question-collapse" accordion>
       <el-collapse-item
-        v-for="(question, index) in questions"
-        :key="index"
+        v-for="question in questions"
+        :key="question.documentId"
         :title="question.title"
-        :name="String(index)"
+        :name="question.documentId"
       >
         <markdown-renderer :content="question.content || ''" />
       </el-collapse-item>
@@ -16,7 +16,11 @@
 <script setup lang="ts">
   defineProps({
     questions: {
-      type: Array as () => Array<{ title: string; content: string }>,
+      type: Array as () => Array<{
+        title: string;
+        content: string;
+        documentId: string;
+      }>,
       default: () => [],
     },
   });

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>

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;

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

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>

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'),
   }));

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>

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>

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>

app/pages/support/documents.vue

@@ -25,38 +25,136 @@
           </el-breadcrumb-item>
         </el-breadcrumb>
       </div>
+      <div class="document-category">
+        <el-select v-model="selectedType" placeholder="选择产品类型" clearable>
+          <el-option
+            v-for="type in productionTypeOptions"
+            :key="type.documentId"
+            :label="type.type"
+            :value="type.documentId"
+          />
+        </el-select>
+        <el-select
+          v-model="selectedProduction"
+          placeholder="选择系列产品"
+          clearable
+        >
+          <el-option
+            v-for="production in productionOptions"
+            :key="production.documentId"
+            :label="production.title"
+            :value="production.documentId"
+          />
+        </el-select>
+        <el-input
+          v-model="keyword"
+          placeholder="输入关键词..."
+          clearable
+          :prefix-icon="Search"
+        />
+      </div>
       <div class="page-content">
-        <document-list :documents="documents" />
+        <document-list :documents="filteredDocuments" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+  import { Search } from '@element-plus/icons-vue';
+
   const { find } = useStrapi();
   const { getStrapiLocale } = useLocalizations();
   const strapiLocale = getStrapiLocale();
 
-  const pending = ref(true);
-
-  const documents = ref<StrapiMedia[]>([]);
-
-  onMounted(async () => {
-    try {
-      const response = await find<ProductionDocument>('production-documents', {
+  const { data, pending, error } = useAsyncData('documents', () =>
+    find<ProductionDocument>('production-documents', {
+      populate: ['document', 'related_productions.production_type'],
       locale: strapiLocale,
-        populate: 'document',
-      });
-      if (response.data) {
-        documents.value =
-          response.data.map((item) => ({
-            ...item.document,
-          })) || [];
+    })
+  );
+
+  // const documents = computed(
+  //   () =>
+  //     data.value?.data.map((item) => ({
+  //       ...item.document,
+  //     })) || []
+  // );
+  const documents = computed(() => data.value?.data ?? []);
+
+  const keyword = ref('');
+
+  const selectedType = ref<string | null>(null);
+  const selectedProduction = ref<string | null>(null);
+
+  const productionTypeOptions = computed(() => {
+    const types: ProductionType[] = [];
+    documents.value.forEach((document: ProductionDocument) => {
+      document.related_productions?.forEach((production: Production) => {
+        const productionType = production?.production_type;
+        if (!types.some((p) => p.documentId === productionType.documentId)) {
+          types.push(productionType);
         }
-    } catch (error) {
-      console.error('Error fetching documents:', error);
-    } finally {
-      pending.value = false;
+      });
+    });
+
+    return types;
+  });
+
+  const productionOptions = computed(() => {
+    if (!selectedType.value) return [];
+    const productions: Production[] = [];
+    documents.value.forEach((document: ProductionDocument) => {
+      document.related_productions.forEach((production: Production) => {
+        if (
+          production.production_type?.documentId === selectedType.value &&
+          !productions.some((p) => p.documentId === production.documentId)
+        ) {
+          productions.push(production);
+        }
+      });
+    });
+    return productions;
+  });
+
+  const filteredDocuments = computed(() =>
+    documents.value
+      .filter((document: ProductionDocument) => {
+        const matchProduction = selectedProduction.value
+          ? document.related_productions?.some(
+              (production: Production) =>
+                production.documentId === selectedProduction.value
+            )
+          : selectedType.value
+            ? document.related_productions?.some(
+                (production: Production) =>
+                  production.production_type?.documentId === selectedType.value
+              )
+            : true;
+
+        const matchKeyword = keyword.value
+          ? document.document.caption &&
+            document.document.caption.includes(keyword.value)
+          : true;
+
+        return matchProduction && matchKeyword;
+      })
+      .map((item) => ({
+        ...item.document,
+      }))
+  );
+
+  watch(selectedType, () => {
+    selectedProduction.value = null;
+  });
+
+  watch(documents, (value) => {
+    console.log(value);
+  });
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
     }
   });
 </script>
@@ -83,6 +181,12 @@
     margin-left: auto;
   }
 
+  .document-category {
+    display: flex;
+    padding: 0rem 2rem;
+    gap: 4px;
+  }
+
   .page-content {
     padding: 1rem 2rem 2rem;
   }

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" />
@@ -25,34 +25,128 @@
           </el-breadcrumb-item>
         </el-breadcrumb>
       </div>
+      <div class="question-category">
+        <el-select v-model="selectedType" placeholder="选择产品类型" clearable>
+          <el-option
+            v-for="type in productionTypeOptions"
+            :key="type.documentId"
+            :label="type.type"
+            :value="type.documentId"
+          />
+        </el-select>
+        <el-select
+          v-model="selectedProduction"
+          placeholder="选择系列产品"
+          clearable
+        >
+          <el-option
+            v-for="production in productionOptions"
+            :key="production.documentId"
+            :label="production.title"
+            :value="production.documentId"
+          />
+        </el-select>
+        <el-input
+          v-model="keyword"
+          placeholder="输入关键词..."
+          clearable
+          :prefix-icon="Search"
+        />
+      </div>
       <div class="page-content">
-        <question-list :questions="questions" />
+        <question-list :questions="filteredQuestions" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+  import { Search } from '@element-plus/icons-vue';
   const { find } = useStrapi();
   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', {
+      populate: {
+        related_productions: {
+          populate: ['production_type'],
+        },
+      },
       locale: strapiLocale,
-      });
-      if (faqData) {
-        questions.value = faqData.data || [];
+    })
+  );
+
+  const questions = computed(() => data.value?.data ?? null);
+
+  const keyword = ref('');
+
+  const selectedType = ref<string | null>(null);
+  const selectedProduction = ref<string | null>(null);
+
+  const productionTypeOptions = computed(() => {
+    const types: ProductionType[] = [];
+    questions.value.forEach((q: Question) => {
+      q.related_productions?.forEach((production: Production) => {
+        const productionType = production?.production_type;
+        if (!types.some((p) => p.documentId === productionType.documentId)) {
+          types.push(productionType);
         }
-    } catch (error) {
-      console.error('Failed to fetch FAQ data:', error);
-    } finally {
-      pending.value = false;
+      });
+    });
+    return types;
+  });
+
+  const productionOptions = computed(() => {
+    if (!selectedType.value) return [];
+    const productions: Production[] = [];
+    questions.value.forEach((question: Question) => {
+      question.related_productions.forEach((production: Production) => {
+        if (
+          production.production_type?.documentId === selectedType.value &&
+          !productions.some((p) => p.documentId === production.documentId)
+        ) {
+          productions.push(production);
+        }
+      });
+    });
+    return productions;
+  });
+
+  const filteredQuestions = computed(() => {
+    return questions.value.filter((question: Question) => {
+      const matchProduction = selectedProduction.value
+        ? question.related_productions?.some(
+            (production: Production) =>
+              production.documentId === selectedProduction.value
+          )
+        : selectedType.value
+          ? question.related_productions?.some(
+              (production: Production) =>
+                production.production_type?.documentId === selectedType.value
+            )
+          : true;
+
+      const matchKeyword = keyword.value
+        ? (question.title && question.title.includes(keyword.value)) ||
+          (question.content && question.content.includes(keyword.value))
+        : true;
+
+      return matchProduction && matchKeyword;
+    });
+  });
+
+  watch(selectedType, () => {
+    selectedProduction.value = null;
+  });
+
+  watch(data, (newVal) => {
+    console.log('useAsyncData updated:', newVal);
+  });
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
     }
   });
 </script>
@@ -79,6 +173,12 @@
     margin-left: auto;
   }
 
+  .question-category {
+    display: flex;
+    padding: 0rem 2rem;
+    gap: 4px;
+  }
+
   .page-content {
     padding: 1rem 2rem 2rem;
   }

i18n/locales/en.json

@@ -51,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",

i18n/locales/zh.json

@@ -51,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": "我们的产品",