From ec9a097ef52e5f68211713bac13e1d52367e1c6f Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Fri, 14 Nov 2025 13:29:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9A=82=E6=97=B6=E5=BC=83=E7=94=A8html?=
 =?UTF-8?q?-renderer=E5=B0=86html=E6=B8=B2=E6=9F=93=E5=9B=9E=E6=BB=9A?=
 =?UTF-8?q?=E5=88=B0v-html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增添table样式
---
 app/assets/css/typography.css                 | 42 +++++++++++++++++++
 .../pages/products/ProductDetail.vue          | 15 +++----
 .../pages/solutions/SolutionDetail.vue        |  9 ++--
 app/components/shared/QuestionList.vue        | 15 +++----
 app/pages/about/index.vue                     | 15 +++----
 app/pages/support/contact-us.vue              | 15 +++----
 6 files changed, 79 insertions(+), 32 deletions(-)

diff --git a/app/assets/css/typography.css b/app/assets/css/typography.css
index 62b3f10..a222270 100644
--- a/app/assets/css/typography.css
+++ b/app/assets/css/typography.css
@@ -47,7 +47,49 @@
   margin: 20px 0;
 }
 
+/* 表格基础样式 */
 .html-typography table {
   width: 100%;
+  border-collapse: collapse;
   border: 1px solid var(--el-border-color);
+  margin: 1em 0;
+  table-layout: auto;
+  font-size: 14px;
+}
+
+/* 单元格通用样式 */
+.html-typography th,
+.html-typography td {
+  border: 1px solid var(--el-border-color);
+  padding: 8px 12px;
+  text-align: left;
+  vertical-align: middle;
+  word-break: break-word;
+}
+
+/* 表头样式 */
+.html-typography th {
+  background-color: var(--el-fill-color-light);
+  color: var(--el-text-color-primary);
+  font-weight: 600;
+}
+
+/* 行 hover 效果 */
+.html-typography tbody tr:hover {
+  background-color: var(--el-fill-color-light-hover);
+}
+
+/* 交替行背景 */
+.html-typography tbody tr:nth-child(odd) {
+  background-color: var(--el-fill-color-lighter);
+}
+
+/* 表格标题（如有 caption） */
+.html-typography table caption {
+  caption-side: top;
+  text-align: left;
+  padding: 8px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
 }
diff --git a/app/components/pages/products/ProductDetail.vue b/app/components/pages/products/ProductDetail.vue
index 4f32ceb..903bb7e 100644
--- a/app/components/pages/products/ProductDetail.vue
+++ b/app/components/pages/products/ProductDetail.vue
@@ -3,13 +3,14 @@
     <el-tabs v-model="activeName" class="product-tabs" stretch>
       <el-tab-pane :label="$t('product-tab.details')" name="details">
         <!-- 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>
+        <div class="html-typography" v-html="product?.description || ''" />
+        <!-- <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" />
diff --git a/app/components/pages/solutions/SolutionDetail.vue b/app/components/pages/solutions/SolutionDetail.vue
index 9bcb209..96bbd77 100644
--- a/app/components/pages/solutions/SolutionDetail.vue
+++ b/app/components/pages/solutions/SolutionDetail.vue
@@ -6,10 +6,11 @@
     </header>
     <section class="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>
+      <div class="html-typography" v-html="solution?.content || ''" />
+      <!-- <div v-if="!hydrated" v-html="solution?.content || ''" /> -->
+      <!-- <div v-else> -->
+      <!--   <html-renderer class="html-typography" :html="solution.content || ''" /> -->
+      <!-- </div> -->
     </section>
   </article>
 </template>
diff --git a/app/components/shared/QuestionList.vue b/app/components/shared/QuestionList.vue
index fb8dd5b..40ff8f2 100644
--- a/app/components/shared/QuestionList.vue
+++ b/app/components/shared/QuestionList.vue
@@ -9,13 +9,14 @@
         :name="question.id"
       >
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <div v-if="!hydrated" v-html="question.content" />
-        <div v-else>
-          <html-renderer
-            class="html-typography"
-            :html="question.content || ''"
-          />
-        </div>
+        <div class="html-typography" v-html="question.content || ''" />
+        <!-- <div v-if="!hydrated" v-html="question.content" /> -->
+        <!-- <div v-else> -->
+        <!--   <html-renderer -->
+        <!--     class="html-typography" -->
+        <!--     :html="question.content || ''" -->
+        <!--   /> -->
+        <!-- </div> -->
       </el-collapse-item>
     </el-collapse>
   </div>
diff --git a/app/pages/about/index.vue b/app/pages/about/index.vue
index 52f778e..ff613a8 100644
--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@@ -5,13 +5,14 @@
 
       <div class="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 class="html-typography" v-html="companyProfile.content || ''" />
+        <!-- <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>
diff --git a/app/pages/support/contact-us.vue b/app/pages/support/contact-us.vue
index bc80542..7812c9c 100644
--- a/app/pages/support/contact-us.vue
+++ b/app/pages/support/contact-us.vue
@@ -8,13 +8,14 @@
 
     <div v-if="!pending" class="page-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 class="html-typography" v-html="contactInfo?.content || ''" />
+      <!-- <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 />