修复差异对比下当有 unicode 字符提示时丢失的背景颜色和宽度问题

CHANGELOG.md

@@ -2,17 +2,9 @@
 
 ##### 更符合 GitHub 风格
 
-- 优化差异对比代码块的样式
-- 优化用户头像样式
-- 优化 Issue/PR/Diff/Actions 的三点菜单按钮样式
-- 优化用户动态样式
-- 优化仓库发布页面样式
-- 优化字符提示的提示框动画
-
 ### 🐞 Fix
 
-- 修复 Issue/PR 详细页面中的部分文字颜色, 时间线上的标签样式和侧边栏的时间追踪样式
+- 修复差异对比下当有 unicode 字符提示时丢失的背景颜色和宽度问题
-- 修复一些选择输入框的排列问题
 
 ## 📃 English
 
@@ -20,14 +12,4 @@
 
 ##### More aligned with GitHub style
 
-- Optimized diff comparison code block styles
-- Optimized user avatar styles
-- Optimized three-dot menu button styles for Issue/PR/Diff/Actions
-- Optimized user activity feed styles
-- Optimized repository release page styles
-- Optimized tooltip animation for character hints
-
 ### 🐞 Fix
-
-- Fixed text color issues in Issue/PR detail pages, timeline label styles, and sidebar time tracking styles
-- Fixed alignment issues with some select input fields

styles/components/diff.ts

@@ -107,8 +107,17 @@ export const diff = css`
       &.code-diff-split colgroup col:nth-child(2),
       &.code-diff-split colgroup col:nth-child(6),
       td.lines-escape {
-        width: 0; // 不要使用 display: none; 否则会影响布局
+        width: 0; // 不要使用 display: none; 否则会影响布局, 无内容时为 0, 有内容时为 20(猜测可能是根据内容宽度自动调整)
-        visibility: hidden;
+        /* visibility: hidden; */ // 不要使用 visibility: hidden; 当 escape 有内容时会导致背景颜色丢失, escape 目前用于显示检测 unicode 编码错误的内容
+      }
+      // 修复当 escape 有内容时, 宽度不够的问题
+      table:has(td.lines-escape:not(:empty)) {
+        colgroup col:nth-child(3),
+        colgroup col:nth-child(2),
+        colgroup col:nth-child(6),
+        td.lines-escape {
+          width: 20;
+        }
       }
       // Gitea 分列视图下默认 100% 宽度的目的是如果单文件只增加或只删除的情况下, 保持无内容的列的宽度一致, 始终保持左右两边的列宽度一致
       // 保持 Gitea 的默认设置, 不对行号宽度做处理