From e1c97dd8f081283137cbc16379181092eb908748 Mon Sep 17 00:00:00 2001
From: cfq <cfq@qq.com>
Date: Fri, 30 Jan 2026 17:27:31 +0800
Subject: [PATCH] =?UTF-8?q?style(LivePreviewEditor):=20=E4=B8=BA=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=9D=97=E9=A6=96=E5=B0=BE=E8=A1=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9C=86=E8=A7=92=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为代码块的第一行和最后一行添加特定的 CSS 类名（`cm-md-fenced-code-start` 和 `cm-md-fenced-code-end`），并在编辑器的主题样式中为这些类应用圆角边框和额外的内边距，以提升视觉层次感和美观度。
---
 src/codemirror/liveMarkdownDecorations.js |  9 +++++++--
 src/components/LivePreviewEditor.vue      | 11 +++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/codemirror/liveMarkdownDecorations.js b/src/codemirror/liveMarkdownDecorations.js
index db4ced0..2141400 100644
--- a/src/codemirror/liveMarkdownDecorations.js
+++ b/src/codemirror/liveMarkdownDecorations.js
@@ -311,14 +311,19 @@ const buildDecorations = (state, filePath) => {
          const startLine = doc.lineAt(nodeFrom)
          const endLine = doc.lineAt(nodeTo)
          const cursorInBlock = isCursorInRange(state, nodeFrom, nodeTo)
-         const blockClass = cursorInBlock ? 'cm-md-fenced-code cm-active' : 'cm-md-fenced-code'
+         const baseClass = cursorInBlock ? 'cm-md-fenced-code cm-active' : 'cm-md-fenced-code'
 
          for (let l = startLine.number; l <= endLine.number; l++) {
            const lineInfo = doc.line(l)
+           let lineClass = baseClass
+           
+           if (l === startLine.number) lineClass += ' cm-md-fenced-code-start'
+           if (l === endLine.number) lineClass += ' cm-md-fenced-code-end'
+           
            decorations.push({
              from: lineInfo.from,
              to: lineInfo.from,
-             value: Decoration.line({ class: blockClass })
+             value: Decoration.line({ class: lineClass })
            })
          }
       }
diff --git a/src/components/LivePreviewEditor.vue b/src/components/LivePreviewEditor.vue
index 647ef6f..4645f89 100644
--- a/src/components/LivePreviewEditor.vue
+++ b/src/components/LivePreviewEditor.vue
@@ -232,6 +232,17 @@ const liveEditorTheme = computed(() => {
         paddingLeft: "16px",
         fontSize: "0.9em",
       },
+      // 代码块圆角处理
+      ".cm-line.cm-md-fenced-code-start": {
+        borderTopLeftRadius: "8px",
+        borderTopRightRadius: "8px",
+        paddingTop: "6px",
+      },
+      ".cm-line.cm-md-fenced-code-end": {
+        borderBottomLeftRadius: "8px",
+        borderBottomRightRadius: "8px",
+        paddingBottom: "6px",
+      },
       ".cm-line.cm-md-fenced-code.cm-active": {
         backgroundColor: "var(--hover-background)",
         outline: "1px solid var(--border-color)",