From 9fea067931075b673d9ab338ac46c20509181581 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?piexlMax=28=E5=A5=87=E6=B7=BC?=
 <qimiaojiangjizhao@gmail.com>
Date: Tue, 10 Feb 2026 11:44:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=AF=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E7=BC=96=E8=BE=91=E5=99=A8=E6=A0=B7=E5=BC=8F=E5=92=8C?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=EF=BC=8C=E5=A2=9E=E5=BC=BA=E5=8F=AF=E8=AF=BB?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/richtext/rich-edit.vue | 73 ++++++++++++++++++++-
 web/src/components/richtext/rich-view.vue | 77 ++++++++++++++++++++++-
 2 files changed, 147 insertions(+), 3 deletions(-)

diff --git a/web/src/components/richtext/rich-edit.vue b/web/src/components/richtext/rich-edit.vue
index cf248fb9e..64703dbd6 100644
--- a/web/src/components/richtext/rich-edit.vue
+++ b/web/src/components/richtext/rich-edit.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border border-solid border-gray-100 h-full z-10">
+  <div class="richtext-wrapper border border-solid border-gray-100 h-full z-10">
     <Toolbar
       :editor="editorRef"
       :default-config="toolbarConfig"
@@ -89,5 +89,76 @@
 </script>
 
 <style scoped lang="scss">
+  .richtext-wrapper {
+    :deep(.w-e-text-container [data-slate-editor]) {
+      h1 {
+        font-size: 2em;
+        font-weight: 700;
+      }
 
+      h2 {
+        font-size: 1.5em;
+        font-weight: 700;
+      }
+
+      h3 {
+        font-size: 1.17em;
+        font-weight: 700;
+      }
+
+      h4 {
+        font-size: 1em;
+        font-weight: 700;
+      }
+
+      h5 {
+        font-size: 0.83em;
+        font-weight: 700;
+      }
+
+      h6 {
+        font-size: 0.67em;
+        font-weight: 700;
+      }
+
+      ul,
+      ol {
+        margin: 1em 0;
+        padding-left: 2em;
+      }
+
+      ul {
+        list-style-type: disc;
+      }
+
+      ol {
+        list-style-type: decimal;
+      }
+
+      li {
+        margin: 0.25em 0;
+      }
+
+      a {
+        color: var(--el-color-primary, #409eff);
+        text-decoration: underline;
+      }
+    }
+
+    :deep(.w-e-text-container [data-slate-editor] ul ul) {
+      list-style-type: circle;
+    }
+
+    :deep(.w-e-text-container [data-slate-editor] ul ul ul) {
+      list-style-type: square;
+    }
+
+    :deep(.w-e-text-container [data-slate-editor] ol ol) {
+      list-style-type: lower-alpha;
+    }
+
+    :deep(.w-e-text-container [data-slate-editor] ol ol ol) {
+      list-style-type: lower-roman;
+    }
+  }
 </style>
diff --git a/web/src/components/richtext/rich-view.vue b/web/src/components/richtext/rich-view.vue
index b1de744f2..a1161413d 100644
--- a/web/src/components/richtext/rich-view.vue
+++ b/web/src/components/richtext/rich-view.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border border-solid border-gray-100 h-full">
+  <div class="richtext-wrapper border border-solid border-gray-100 h-full">
     <Editor
       v-model="valueHtml"
       class="overflow-y-hidden mt-0.5"
@@ -55,4 +55,77 @@
   )
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .richtext-wrapper {
+    :deep(.w-e-text-container [data-slate-editor]) {
+      h1 {
+        font-size: 2em;
+        font-weight: 700;
+      }
+
+      h2 {
+        font-size: 1.5em;
+        font-weight: 700;
+      }
+
+      h3 {
+        font-size: 1.17em;
+        font-weight: 700;
+      }
+
+      h4 {
+        font-size: 1em;
+        font-weight: 700;
+      }
+
+      h5 {
+        font-size: 0.83em;
+        font-weight: 700;
+      }
+
+      h6 {
+        font-size: 0.67em;
+        font-weight: 700;
+      }
+
+      ul,
+      ol {
+        margin: 1em 0;
+        padding-left: 2em;
+      }
+
+      ul {
+        list-style-type: disc;
+      }
+
+      ol {
+        list-style-type: decimal;
+      }
+
+      li {
+        margin: 0.25em 0;
+      }
+
+      a {
+        color: var(--el-color-primary, #409eff);
+        text-decoration: underline;
+      }
+    }
+
+    :deep(.w-e-text-container [data-slate-editor] ul ul) {
+      list-style-type: circle;
+    }
+
+    :deep(.w-e-text-container [data-slate-editor] ul ul ul) {
+      list-style-type: square;
+    }
+
+    :deep(.w-e-text-container [data-slate-editor] ol ol) {
+      list-style-type: lower-alpha;
+    }
+
+    :deep(.w-e-text-container [data-slate-editor] ol ol ol) {
+      list-style-type: lower-roman;
+    }
+  }
+</style>