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: () => [],
     },
   });