From 6efc3f9868bf17d8035913c2d151daa024fca81d Mon Sep 17 00:00:00 2001
From: xiepengfei <xiepengfei@uniontech.com>
Date: Wed, 26 Aug 2026 17:42:40 +0800
Subject: [PATCH] fix(markdown): unify table border color and fix rounded
 corner gaps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use a dedicated --table-border (10% overlay) for the table frame and
cell grid, and hide the table's outer left/right/bottom borders so the
rounded block border closes cleanly without clipped-line gaps.

表格边框改用专用 --table-border（10% 半透明叠加），外框与单元格网格线
同色；隐藏表格左/右/底外边框，由外层圆角边框封闭，消除转角缺口。

Log: 修复Markdown表格边框颜色不一致及圆角转角缺口
Influence: Markdown预览区表格边框颜色统一、转角渲染完整，深浅色主题均适配。
---
 src/editor/markdown/web/build/style.css | 24 +++++++++++++++++-------
 src/editor/markdown/web/theme.css       | 24 +++++++++++++++++-------
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/editor/markdown/web/build/style.css b/src/editor/markdown/web/build/style.css
index 2e0ecf5c..6373d953 100644
--- a/src/editor/markdown/web/build/style.css
+++ b/src/editor/markdown/web/build/style.css
@@ -11,6 +11,9 @@
     --code-bg: #f5f5f5;
     --code-fg: #1f1f1f;
     --border: #e0e0e0;
+    /* 表格专用边框：半透明适配任意主题底色（浅色叠加白底 ≈ #e6e6e6，与 §4.8.5 设计稿 #e5e5e5 一致）；
+       不复用 --border（C++ 注入 bg.darker(130)，白底时为 #c4c4c4，比设计稿明显偏深） */
+    --table-border: rgba(0, 0, 0, 0.1);
     --link: #0058de;
     --content-max-width: 800px;
     --content-center: 1;
@@ -18,6 +21,7 @@
 
 [data-theme="dark"] {
     --link: #024cca;
+    --table-border: rgba(255, 255, 255, 0.1);
 }
 
 html, body {
@@ -80,7 +84,8 @@ html, body {
     max-width: 100%;
     min-height: 222px;
     box-sizing: border-box;
-    border: 1px solid rgba(229, 229, 229, 1);
+    /* 外框用 --table-border 与内部网格线同色，避免表头区域边框与表格边框颜色不一致 */
+    border: 1px solid var(--table-border);
     border-radius: 12px;
     background-color: rgba(255, 255, 255, 0.3);
     margin: 1em 0;
@@ -96,7 +101,15 @@ html, body {
     border-radius: 0 0 12px 12px;
 }
 .table-wrapper table { width: 100%; border-collapse: collapse; margin: 1em 0; }
-.table-block .table-wrapper table { margin: 0; }
+/* 隐藏表格左/右/底外边框（collapse 冲突规则中 hidden 优先级最高）：
+   外框由 .table-block 的圆角边框承担，单元格不再贴边画直线——
+   否则侧面出现双线，且底部直边被 wrapper 圆角裁剪，转角处露出无边的透明缺口 */
+.table-block .table-wrapper table {
+    margin: 0;
+    border-left-style: hidden;
+    border-right-style: hidden;
+    border-bottom-style: hidden;
+}
 .table-wrapper td, .table-wrapper th {
     min-width: 100px;
     max-width: 240px;
@@ -106,7 +119,7 @@ html, body {
     vertical-align: middle;
     word-break: break-word;
     white-space: normal;
-    border: 1px solid var(--border);
+    border: 1px solid var(--table-border);
     box-sizing: border-box;
 }
 .table-wrapper th { font-weight: 700; }
@@ -237,10 +250,7 @@ html, body {
 [data-theme="dark"] .code-block-expand { color: rgba(255, 255, 255, 0.7); }
 [data-theme="dark"] .code-block-expand:hover { color: rgba(255, 255, 255, 1); }
 [data-theme="dark"] .table-block-header { background-color: rgba(255, 255, 255, 0.05); }
-[data-theme="dark"] .table-block {
-    border-color: var(--border);
-    background-color: rgba(255, 255, 255, 0.1);
-}
+[data-theme="dark"] .table-block { background-color: rgba(255, 255, 255, 0.1); }
 
 /* §4.8.7 图片 */
 .milkdown img {
diff --git a/src/editor/markdown/web/theme.css b/src/editor/markdown/web/theme.css
index 07a11645..dee9e8ba 100644
--- a/src/editor/markdown/web/theme.css
+++ b/src/editor/markdown/web/theme.css
@@ -10,6 +10,9 @@
     --code-bg: #f5f5f5;
     --code-fg: #1f1f1f;
     --border: #e0e0e0;
+    /* 表格专用边框：半透明适配任意主题底色（浅色叠加白底 ≈ #e6e6e6，与 §4.8.5 设计稿 #e5e5e5 一致）；
+       不复用 --border（C++ 注入 bg.darker(130)，白底时为 #c4c4c4，比设计稿明显偏深） */
+    --table-border: rgba(0, 0, 0, 0.1);
     --link: #0058de;
     --content-max-width: 800px;
     --content-center: 1;
@@ -17,6 +20,7 @@
 
 [data-theme="dark"] {
     --link: #024cca;
+    --table-border: rgba(255, 255, 255, 0.1);
 }
 
 html, body {
@@ -79,7 +83,8 @@ html, body {
     max-width: 100%;
     min-height: 222px;
     box-sizing: border-box;
-    border: 1px solid rgba(229, 229, 229, 1);
+    /* 外框用 --table-border 与内部网格线同色，避免表头区域边框与表格边框颜色不一致 */
+    border: 1px solid var(--table-border);
     border-radius: 12px;
     background-color: rgba(255, 255, 255, 0.3);
     margin: 1em 0;
@@ -95,7 +100,15 @@ html, body {
     border-radius: 0 0 12px 12px;
 }
 .table-wrapper table { width: 100%; border-collapse: collapse; margin: 1em 0; }
-.table-block .table-wrapper table { margin: 0; }
+/* 隐藏表格左/右/底外边框（collapse 冲突规则中 hidden 优先级最高）：
+   外框由 .table-block 的圆角边框承担，单元格不再贴边画直线——
+   否则侧面出现双线，且底部直边被 wrapper 圆角裁剪，转角处露出无边的透明缺口 */
+.table-block .table-wrapper table {
+    margin: 0;
+    border-left-style: hidden;
+    border-right-style: hidden;
+    border-bottom-style: hidden;
+}
 .table-wrapper td, .table-wrapper th {
     min-width: 100px;
     max-width: 240px;
@@ -105,7 +118,7 @@ html, body {
     vertical-align: middle;
     word-break: break-word;
     white-space: normal;
-    border: 1px solid var(--border);
+    border: 1px solid var(--table-border);
     box-sizing: border-box;
 }
 .table-wrapper th { font-weight: 700; }
@@ -236,10 +249,7 @@ html, body {
 [data-theme="dark"] .code-block-expand { color: rgba(255, 255, 255, 0.7); }
 [data-theme="dark"] .code-block-expand:hover { color: rgba(255, 255, 255, 1); }
 [data-theme="dark"] .table-block-header { background-color: rgba(255, 255, 255, 0.05); }
-[data-theme="dark"] .table-block {
-    border-color: var(--border);
-    background-color: rgba(255, 255, 255, 0.1);
-}
+[data-theme="dark"] .table-block { background-color: rgba(255, 255, 255, 0.1); }
 
 /* §4.8.7 图片 */
 .milkdown img {