refactor: 将页面的Markdown渲染改为HTML渲染

- 前后端通信：后端相关字段由Markdown改为WYSIWYG，前端做出响应更改
- 页面显示调整： 移除解决方案页创建日期显示
- 工具添加： 添加Asset处理方法，将CMS域名URL重写为Server API URL
- 代码整理：移除部分弃用代码

ISSUES: Close: #40 Resolve: #24

app/components/pages/products/ProductDetail.vue

@@ -2,7 +2,14 @@
   <div class="product-detail">
     <el-tabs v-model="activeName" class="product-tabs" stretch>
       <el-tab-pane :label="$t('product-tab.details')" name="details">
-        <markdown-renderer :content="product.description || ''" />
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-if="!hydrated" v-html="product.description || ''" />
+        <div v-else>
+          <html-renderer
+            class="html-typography"
+            :html="product.description || ''"
+          />
+        </div>
       </el-tab-pane>
       <el-tab-pane :label="$t('product-tab.specs')" name="specs">
         <spec-table :data="product.specs" />
@@ -25,7 +32,13 @@
     },
   });
 
+  const hydrated = ref(false);
+
   const activeName = ref('details'); // 默认选中概览标签
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
 </script>
 
 <style scoped>

app/components/pages/solutions/SolutionDetail.vue

@@ -2,16 +2,14 @@
   <article class="solution-defail">
     <header class="solution-header">
       <h1 class="solution-title">{{ solution.title }}</h1>
-      <dl class="solution-meta">
-        <dt class="visually-hidden">CreatedAt:</dt>
-        <dd class="solution-date">
-          {{ new Date(solution.createAt).toLocaleDateString() }}
-        </dd>
-      </dl>
       <p class="solution-summary">{{ solution.summary }}</p>
     </header>
     <section class="solution-content">
-      <markdown-renderer :content="solution?.content || ''" />
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-if="!hydrated" v-html="solution?.content || ''" />
+      <div v-else>
+        <html-renderer class="html-typography" :html="solution.content || ''" />
+      </div>
     </section>
   </article>
 </template>
@@ -23,6 +21,12 @@
       default: null,
     },
   });
+
+  const hydrated = ref(false);
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
 </script>
 
 <style scoped>

app/components/shared/MarkdownRenderer.vue

@@ -13,11 +13,8 @@
 
   const props = defineProps<Props>();
 
-  const contentWithAbsoluteUrls = convertMedia(props.content);
-
   // 将 Markdown 转换成 HTML
-  const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls));
-  // const safeHtml = computed(() => renderMarkdown(props.content))
+  const safeHtml = computed(() => renderMarkdown(props.content));
 
   const container = ref<HTMLElement | null>(null);
 

app/components/shared/QuestionList.vue

@@ -8,10 +8,10 @@
         :title="question.title"
         :name="question.id"
       >
-        <!-- <markdown-renderer :content="question.content || ''" /> -->
+        <!-- eslint-disable-next-line vue/no-v-html -->
         <div v-if="!hydrated" v-html="question.content" />
         <div v-else>
-          <HtmlRenderer
+          <html-renderer
             class="html-typography"
             :html="question.content || ''"
           />

app/pages/about/index.vue

@@ -4,7 +4,14 @@
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
 
       <div class="content">
-        <markdown-renderer :content="companyProfile.content || ''" />
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-if="!hydrated" v-html="companyProfile.content || ''" />
+        <div v-else>
+          <html-renderer
+            class="html-typography"
+            :html="companyProfile.content || ''"
+          />
+        </div>
       </div>
 
       <el-divider content-position="left">{{ $t('learn-more') }}</el-divider>
@@ -28,6 +35,7 @@
 
 <script setup lang="ts">
   const localePath = useLocalePath();
+  const hydrated = ref(false);
   const breadcrumbItems = [
     { label: $t('navigation.home'), to: localePath('/') },
     { label: $t('navigation.about-us') },
@@ -44,6 +52,10 @@
   useHead({
     title: pageTitle,
   });
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
 </script>
 
 <style scoped>
@@ -62,14 +74,6 @@
     margin-bottom: 2rem;
   }
 
-  :deep(.markdown-body p) {
-    text-indent: 2em;
-  }
-
-  :deep(.markdown-body h2) {
-    text-align: center;
-  }
-
   :deep(.el-divider__text) {
     color: var(--el-color-info);
     font-size: 1em;

app/pages/support/contact-us.vue

@@ -7,7 +7,14 @@
     </div>
 
     <div v-if="!pending" class="page-content">
-      <markdown-renderer :content="contactInfo.content || ''" />
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-if="!hydrated" v-html="contactInfo?.content || ''" />
+      <div v-else>
+        <html-renderer
+          class="html-typography"
+          :html="contactInfo?.content || ''"
+        />
+      </div>
     </div>
     <div v-else class="loading">
       <el-skeleton :rows="5" animated />
@@ -17,6 +24,7 @@
 
 <script setup lang="ts">
   const localePath = useLocalePath();
+  const hydrated = ref(false);
   const breadcrumbItems = [
     { label: $t('navigation.home'), to: localePath('/') },
     { label: $t('navigation.support'), to: localePath('/support') },
@@ -34,6 +42,10 @@
   usePageSeo({
     title: pageTitle,
   });
+
+  onMounted(() => {
+    hydrated.value = true;
+  });
 </script>
 
 <style scoped>

app/utils/markdown.ts

@@ -18,17 +18,3 @@ export function renderMarkdown(content: string): string {
 
   return dirtyHtml;
 }
-
-export function convertMedia(content: string): string {
-  // 通过正则表达式替换Markdown中的图片链接
-  // ![alt text](image-url) -> ![alt text](strapiMedia(image-url))
-
-  if (!content) return '';
-
-  const contentWithAbsoluteUrls = content.replace(
-    /!\[([^\]]*)\]\((\/uploads\/[^)]+)\)/g,
-    (_, alt, url) => `![${alt}](${useStrapiMedia(url)})`
-  );
-
-  return contentWithAbsoluteUrls;
-}

app/utils/transliterateText.ts

@@ -1,17 +0,0 @@
-import { pinyin } from 'pinyin-pro';
-
-/**
- * 将汉语文本转换为拼音形式
- */
-export function transliterateText(input: string): string {
-  if (!input) return '';
-  const text = input.normalize('NFKC').trim();
-
-  // 检测是否包含中文字符
-  if (/[\u4e00-\u9fa5]/.test(text)) {
-    return pinyin(text, { toneType: 'none', type: 'array' }).join('');
-  }
-
-  // 否则返回原文本
-  return text;
-}

nuxt.config.ts

@@ -44,6 +44,10 @@ export default defineNuxtConfig({
       },
       directus: {
         url: process.env.DIRECTUS_URL || 'http://localhost:8055',
+        publicUrl:
+          process.env.DIRECTUS_PUBLIC_URL ||
+          process.env.DIRECTUS_URL ||
+          'http://localhost:8055',
         token: process.env.DIRECTUS_TOKEN || undefined,
       },
     },

package.json

@@ -22,6 +22,7 @@
     "@types/markdown-it": "^14.1.2",
     "@unocss/nuxt": "^66.4.2",
     "@vueuse/nuxt": "^13.6.0",
+    "dom-serializer": "^2.0.0",
     "domhandler": "^5.0.3",
     "dompurify": "^3.2.6",
     "element-plus": "^2.10.7",

pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       '@vueuse/nuxt':
         specifier: ^13.6.0
         version: 13.9.0(magicast@0.3.5)(nuxt@4.1.2(@parcel/watcher@2.5.1)(@types/node@24.4.0)(@vue/compiler-sfc@3.5.21)(db0@0.3.2)(eslint@9.35.0(jiti@2.5.1))(ioredis@5.7.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.50.2)(sass@1.92.1)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1))(yaml@2.8.1))(vue@3.5.21(typescript@5.9.2))
+      dom-serializer:
+        specifier: ^2.0.0
+        version: 2.0.0
       domhandler:
         specifier: ^5.0.3
         version: 5.0.3

server/api/cms/companyProfile.get.ts

@@ -3,5 +3,13 @@ import { companyProfileService } from '~~/server/services/cms/companyProfileServ
 export default defineEventHandler(async (event) => {
   const locale = getHeader(event, 'x-locale') || 'zh-CN';
 
-  return companyProfileService.getCompanyProfile(locale);
+  const companyProfile = await companyProfileService.getCompanyProfile(locale);
+
+  companyProfile.content = rewriteAssetUrls(
+    companyProfile.content,
+    useRuntimeConfig().public.directus.publicUrl,
+    '/api/assets'
+  );
+
+  return companyProfile;
 });

server/api/cms/contactInfo.get.ts

@@ -3,5 +3,13 @@ import { contactInfoService } from '~~/server/services/cms/contactInfoService';
 export default defineEventHandler(async (event) => {
   const locale = getHeader(event, 'x-locale') || 'zh-CN';
 
-  return contactInfoService.getContactInfo(locale);
+  const contactInfo = await contactInfoService.getContactInfo(locale);
+
+  contactInfo.content = rewriteAssetUrls(
+    contactInfo.content,
+    useRuntimeConfig().public.directus.publicUrl,
+    '/api/assets'
+  );
+
+  return contactInfo;
 });

server/api/cms/product/[id].get.ts

@@ -9,5 +9,13 @@ export default defineEventHandler(async (event) => {
     });
   const locale = getHeader(event, 'x-locale') || 'zh-CN';
 
-  return productService.getProductById(id, locale);
+  const product = await productService.getProductById(id, locale);
+
+  product.description = rewriteAssetUrls(
+    product.description,
+    useRuntimeConfig().public.directus.publicUrl,
+    '/api/assets'
+  );
+
+  return product;
 });

server/api/cms/questionList.get.ts

@@ -2,5 +2,15 @@ import { questionService } from '~~/server/services/cms/questionService';
 export default defineEventHandler(async (event) => {
   const locale = getHeader(event, 'x-locale') || 'zh-CN';
 
-  return questionService.getQuestionList(locale);
+  const questions = await questionService.getQuestionList(locale);
+
+  questions.forEach((question) => {
+    question.content = rewriteAssetUrls(
+      question.content,
+      useRuntimeConfig().public.directus.publicUrl,
+      '/api/assets'
+    );
+  });
+
+  return questions;
 });

server/api/cms/solution/[id].get.ts

@@ -10,5 +10,13 @@ export default defineEventHandler(async (event) => {
 
   const locale = getHeader(event, 'x-locale') || 'zh-CN';
 
-  return solutionService.getSolutionById(id, locale);
+  const solution = await solutionService.getSolutionById(id, locale);
+
+  solution.content = rewriteAssetUrls(
+    solution.content,
+    useRuntimeConfig().public.directus.publicUrl,
+    '/api/assets'
+  );
+
+  return solution;
 });

server/utils/rewriteAssetUrls.test.ts

@@ -0,0 +1,14 @@
+import { test, expect, describe } from 'vitest';
+import { rewriteAssetUrls } from './rewriteAssetUrls';
+
+describe('rewriteAssetUrls', () => {
+  const cmsBase = 'https://cms.example.com';
+  const proxyBase = '/api/assets';
+  const baseHTML =
+    '<img src="https://cms.example.com/assets/rand-om__-uuid-1234" /><a href="https://cms.example.com/assets/rand-om__-uuid-5678">Link</a><video src="https://otherdomain.com/video.mp4"></video>';
+  test('rewrites asset URLs correctly', () => {
+    expect(rewriteAssetUrls(baseHTML, cmsBase, proxyBase)).toBe(
+      '<img src="/api/assets/rand-om__-uuid-1234"><a href="/api/assets/rand-om__-uuid-5678">Link</a><video src="https://otherdomain.com/video.mp4"></video>'
+    );
+  });
+});

server/utils/rewriteAssetUrls.ts

@@ -0,0 +1,36 @@
+import { parseDocument, DomUtils } from 'htmlparser2';
+import serialize from 'dom-serializer';
+
+export function rewriteAssetUrls(
+  html: string,
+  cmsBase: string,
+  proxyBase: string
+) {
+  if (!html) return html;
+
+  const dom = parseDocument(html);
+
+  const elements = DomUtils.findAll(
+    (elem) => elem.type === 'tag',
+    dom.children
+  );
+
+  for (const el of elements) {
+    // img / video / source -> src
+    // a -> href
+    const tag = el.name.toLowerCase();
+    const attr = tag === 'a' ? 'href' : 'src';
+
+    if (!el.attribs || !el.attribs[attr]) continue;
+
+    const url = el.attribs[attr];
+
+    // 替换cmsBase为proxyBase
+    if (url.startsWith(cmsBase)) {
+      const uuid = url.replace(`${cmsBase}/assets/`, '');
+      el.attribs[attr] = `${proxyBase}/${uuid}`;
+    }
+  }
+
+  return serialize(dom);
+}