From 0a7d5970c9f328ab14182a4ad980eaa08904cc69 Mon Sep 17 00:00:00 2001 From: lutinglt Date: Sun, 2 Nov 2025 12:18:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20diff=20=E7=9A=84=E8=A1=8C?= =?UTF-8?q?=E5=8F=B7=E5=AE=BD=E5=BA=A6=E8=B0=83=E6=95=B4=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 +- styles/components/diff.ts | 27 +++++++++------------------ 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cf4e7c4..c616a61 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ##### 更符合 GitHub 风格 -- 同步差异对比代码块的样式 +- 优化差异对比代码块的样式 - 优化用户头像样式 - 优化 Issue/PR/Diff/Actions 的三点菜单按钮样式 - 优化用户动态样式 diff --git a/styles/components/diff.ts b/styles/components/diff.ts index 2436521..5107eee 100644 --- a/styles/components/diff.ts +++ b/styles/components/diff.ts @@ -109,27 +109,18 @@ export const diff = css` width: 0; // 不要使用 display: none; 否则会影响布局 visibility: hidden; } - // 固定表格中每列的宽度 - table { - width: 100%; + // 不明白 Gitea 分列视图下默认 100% 宽度的目的, 这里设置为 auto 使行号列宽自适应 + &.code-diff-split table { + width: auto; } // 行号宽度 - // 合并视图的第一列和第二列 - &.code-diff-unified colgroup col:nth-child(1), - &.code-diff-unified colgroup col:nth-child(2), - // 拆分视图的第一列和第五列 - &.code-diff-split colgroup col:nth-child(1), - &.code-diff-split colgroup col:nth-child(5) { - // 40px: 代码超过 9999 行时换行 - // 45px: 代码超过 99999 行时换行 - // 50px: 代码超过 999999 行时换行 - // GitHub 在 commit 中的行宽最小为 40px, 但会动态调整, 在 release 和 review 的差异对比中为 50px - // 这里折中为 45px, 单文件超过十万行代码的视为垃圾代码, 换行体验不佳为活该 - width: 45; - } - // 修复 table 100% 宽度时的行号换行问题, GitHub 会自动换行, 这里与 GitHub 保持一致 + // 40px: 长度 = 9999 行 + // 45px: 长度 = 99999 行 + // 50px: 长度 = 999999 行 + // GitHub 在 commit 中的行宽最小为 40px, 但会动态调整, 在 release 和 review 的差异对比中为 50px + // 这里折中为 45px 会根据代码行数动态调整, 45px 既不会在行数少时显得太宽, 也可以在大多数情况下保持宽度一致 .lines-num { - text-wrap-mode: wrap; // 2024年10月浏览器开始支持 + min-width: 45px; } // 合并视图的第四列 &.code-diff-unified colgroup col:nth-child(4),