feat!: 将QuestionList的内容渲染由Markdown改为HTML

- 后端CMS字段由Markdown改为WYSIWYG因此前端做出对应修改

app/components/shared/HtmlRenderer.ts

@@ -0,0 +1,30 @@
+export default defineComponent({
+  name: 'HtmlRenderer',
+
+  props: {
+    html: {
+      type: String,
+      required: true,
+    },
+    map: {
+      type: Object as () => HtmlRenderMap,
+      default: () => defaultHtmlRenderMap,
+    },
+    allowUnknown: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup(props, { attrs }) {
+    const nodes: VNode[] = useHtmlRenderer(props.html, {
+      map: props.map,
+      allowUnknownTags: props.allowUnknown,
+    });
+
+    logger.debug('nodes: ', nodes);
+
+    // 渲染函数：直接返回 VNode 数组
+    return () => h('div', { ...attrs }, nodes);
+  },
+});

app/components/shared/QuestionList.vue

@@ -8,7 +8,14 @@
         :title="question.title"
         :name="question.id"
       >
-        <markdown-renderer :content="question.content || ''" />
+        <!-- <markdown-renderer :content="question.content || ''" /> -->
+        <div v-if="!hydrated" v-html="question.content" />
+        <div v-else>
+          <HtmlRenderer
+            class="html-typography"
+            :html="question.content || ''"
+          />
+        </div>
       </el-collapse-item>
     </el-collapse>
   </div>
@@ -25,6 +32,8 @@
 
   const activeNames = ref<(string | number)[]>([]);
 
+  const hydrated = ref(false);
+
   // 当路由变化（包括初次挂载）时，检查是否需要聚焦
   watch(
     () => route.query.focus,
@@ -47,6 +56,10 @@
     },
     { immediate: true }
   );
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
 </script>
 
 <style scoped>