banana v1

styles/components/diff.ts

@@ -7,6 +7,7 @@ export const diff = css`
     /* 折叠行文本 */
     .code-inner {
       color: ${themeVars.color.text.light.num1};
+      font-weight: 500; // 增加字体粗细
     }
   }
   /* 增加/删除行多余的颜色 */
@@ -22,6 +23,7 @@ export const diff = css`
   .removed-code {
     border-radius: 0.1875rem;
     color: ${themeVars.color.text.self};
+    padding: 0 2px; // 增加内边距
     /* 覆盖掉 chroma 的颜色 */
     * {
       color: ${themeVars.color.text.self} !important;
@@ -30,23 +32,37 @@ export const diff = css`
   /* 展开/收缩按钮 */
   .code-expander-button {
     color: ${themeVars.color.text.light.num1};
-    height: 28px !important;
+    height: 32px !important; // 增加高度
+    padding: 0 12px; // 增加内边距
+    border-radius: 8px; // 增加圆角
+    font-weight: 500; // 增加字体粗细
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:hover {
       background: ${themeVars.github.bgColor.accent.emphasis};
       color: ${themeVars.color.white};
+      transform: translateY(-1px); // 轻微上移效果
+    }
+    &:active {
+      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
     }
   }
   /* 行号居中 */
   .lines-num {
     text-align: center !important;
+    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); // 使用等宽字体
   }
   // 差异对比文件盒子
   .diff-file-box {
+    border-radius: 12px; // 增加圆角
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
+    margin-bottom: 16px; // 增加底部间距
+    overflow: hidden; // 隐藏溢出内容
     // 差异对比文件头
     .diff-file-header {
       // 文件名
       .diff-file-name {
-        font-weight: 400;
+        font-weight: 500; // 增加字体粗细
+        padding: 12px 16px; // 增加内边距
         .fold-file.btn svg {
           min-width: 16px;
           min-height: 16px;
@@ -55,6 +71,7 @@ export const diff = css`
         }
         .diff-stats-bar {
           height: 8px;
+          border-radius: 4px; // 增加圆角
         }
         > div,
         .file-link {
@@ -66,7 +83,52 @@ export const diff = css`
         color: ${themeVars.color.text.light.num1};
         font-size: 12px;
         font-weight: 400;
+        padding: 12px 16px; // 增加内边距
       }
     }
   }
-`;
+  
+  // 增强差异对比的可读性
+  .code-diff {
+    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); // 使用等宽字体
+    font-size: 14px; // 增加字体大小
+    line-height: 1.5; // 增加行高
+  }
+  
+  // 增加行的样式
+  .add-code {
+    background-color: ${themeVars.color.diff.added.row.bg}; // 使用主题色
+    &:hover {
+      background-color: ${themeVars.color.diff.added.row.border}; // 悬停时改变背景色
+    }
+  }
+  
+  // 删除行的样式
+  .del-code {
+    background-color: ${themeVars.color.diff.removed.row.bg}; // 使用主题色
+    &:hover {
+      background-color: ${themeVars.color.diff.removed.row.border}; // 悬停时改变背景色
+    }
+  }
+  
+  // 移动行的样式
+  .moved-code {
+    background-color: ${themeVars.color.diff.moved.row.bg}; // 使用主题色
+    &:hover {
+      background-color: ${themeVars.color.diff.moved.row.border}; // 悬停时改变背景色
+    }
+  }
+  
+  // 行号的样式
+  .lines-num {
+    background-color: ${themeVars.color.box.body.self}; // 使用主题色
+    border-right: 1px solid ${themeVars.color.light.border}; // 添加右边框
+    padding: 0 8px; // 增加内边距
+    min-width: 40px; // 设置最小宽度
+  }
+  
+  // 行内容的样式
+  .lines-code {
+    padding: 0 12px; // 增加内边距
+  }
+`;