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

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

app/pages/support/documents.vue

@@ -25,32 +25,133 @@
           </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 { data, pending, error } = useAsyncData('documents', () =>
     find<ProductionDocument>('production-documents', {
-      populate: 'document',
+      populate: ['document', 'related_productions.production_type'],
       locale: strapiLocale,
     })
   );
 
-  const documents = computed(
-    () =>
-      data.value?.data.map((item) => ({
+  // 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);
+        }
+      });
+    });
+
+    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);
@@ -80,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

@@ -25,26 +25,125 @@
           </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 { data, pending, error } = useAsyncData('questions', () =>
     find<Question>('questions', {
+      populate: {
+        related_productions: {
+          populate: ['production_type'],
+        },
+      },
       locale: strapiLocale,
     })
   );
 
   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);
+        }
+      });
+    });
+    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);
@@ -74,6 +173,12 @@
     margin-left: auto;
   }
 
+  .question-category {
+    display: flex;
+    padding: 0rem 2rem;
+    gap: 4px;
+  }
+
   .page-content {
     padding: 1rem 2rem 2rem;
   }