From 56dd57e244396786a269b543937a878d55ddcaf0 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Mon, 29 Sep 2025 16:09:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(support):=20=E6=B7=BB=E5=8A=A0=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E7=AD=9B=E9=80=89=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为常见问题&文档资料页面添加分类筛选功能
- 调整markdown中的表格渲染样式
---
 app/components/MarkdownRenderer.vue |  43 +++++++++-
 app/components/MarkdownTable.vue    |  12 +++
 app/components/QuestionList.vue     |  12 ++-
 app/pages/support/documents.vue     | 119 ++++++++++++++++++++++++++--
 app/pages/support/faq.vue           | 107 ++++++++++++++++++++++++-
 5 files changed, 280 insertions(+), 13 deletions(-)
 create mode 100644 app/components/MarkdownTable.vue

diff --git a/app/components/MarkdownRenderer.vue b/app/components/MarkdownRenderer.vue
index 78367da..617112a 100644
--- a/app/components/MarkdownRenderer.vue
+++ b/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>
diff --git a/app/components/MarkdownTable.vue b/app/components/MarkdownTable.vue
new file mode 100644
index 0000000..7625220
--- /dev/null
+++ b/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>
diff --git a/app/components/QuestionList.vue b/app/components/QuestionList.vue
index 6c30e8a..e4d6fc2 100644
--- a/app/components/QuestionList.vue
+++ b/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: () => [],
     },
   });
diff --git a/app/pages/support/documents.vue b/app/pages/support/documents.vue
index 3ab5322..efd080c 100644
--- a/app/pages/support/documents.vue
+++ b/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;
   }
diff --git a/app/pages/support/faq.vue b/app/pages/support/faq.vue
index 054ecde..da59242 100644
--- a/app/pages/support/faq.vue
+++ b/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;
   }