banana v1

.env.example

@@ -1,8 +0,0 @@
-# 开发模式下编译的主题 (开发模式仅编译单个主题)
-DEV_THEME=dark
-# 把编译后的主题上传到服务器的服务器名称, 通过 SCP 上传
-SSH_SERVER=localhost
-# 上传到服务器的用户名称, 不支持密码, 请确保有 SSH 免密登录权限
-SSH_USER=root
-# 上传到服务器的主题路径, 请使用绝对路径
-GITEA_THEME_PATH=/data/gitea/public/assets/css/

IFLOW.md

@@ -1,6 +1,6 @@
 # Gitea GitHub Theme 项目概述
 
-这个项目为 Gitea 提供了一套 Apple 风格的主题。它包含多种预设颜色方案，如基础的亮色、暗色和柔和暗色主题，以及为色盲用户设计的主题和粉色主题。主题通过 CSS 实现，并利用 Vite 和 Vanilla Extract 等工具进行构建。
+这个项目为 Gitea 提供了一套 Banana 风格的主题。它包含多种预设颜色方案，如基础的亮色、暗色和柔和暗色主题，以及为色盲用户设计的主题和粉色主题。主题通过 CSS 实现，并利用 Vite 和 Vanilla Extract 等工具进行构建。
 
 ## 项目结构
 

src/core/theme.ts

@@ -49,7 +49,7 @@ export function createTheme(theme: Theme): void {
   createGlobalTheme(":root", themeInfoVars, { version });
   createGlobalTheme(":root", themeVars, theme);
   createGlobalTheme(":root", otherThemeVars, {
-    border: { radius: "6px" },
+    border: { radius: "8px" },
     color: {
       git: "#f05133",
       light: {

src/core/vite.ts

@@ -52,10 +52,10 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k
 
 function giteaThemeMetaInfo(nameGroup: string[]): string {
   const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
-  return `gitea-theme-meta-info{--theme-display-name:"GitHub ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
+  return `gitea-theme-meta-info{--theme-display-name:"Nanobanana ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
 }
 
-const prefix = "theme-github-";
+const prefix = "theme-nanobanana-";
 
 /**
  * 生成主题文件

styles/components/clone.ts

@@ -1,4 +1,4 @@
-import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
+import { css, customThemeVars, themeVars } from "src/types/vars";
 
 // 克隆按钮的弹窗
 export const clone = css`
@@ -12,22 +12,28 @@ export const clone = css`
         &:first-of-type {
           font-weight: 600;
           margin-top: 16px;
+          font-size: 16px; // 增加字体大小
         }
       }
       // 按钮组
       .clone-panel-tab {
         display: flex;
         gap: 8px;
-        margin-left: 16px;
+        margin: 16px; // 增加外边距
+        padding: 4px; // 增加内边距
+        background-color: ${themeVars.color.hover.self}; // 添加背景色
+        border-radius: 12px; // 增加圆角
         // 按钮
         .item {
           color: ${themeVars.color.text.self};
           font-weight: 600;
-          padding: 6px 8px;
+          padding: 8px 12px; // 增加内边距
-          margin: 8px 0;
+          margin: 4px; // 调整外边距
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
-            border-radius: ${otherThemeVars.border.radius};
+            transform: translateY(-1px); // 轻微上移效果
           }
           &.active:after {
             content: "";
@@ -38,65 +44,84 @@ export const clone = css`
             width: 100%;
             height: 2px;
             background: ${themeVars.github.underlineNav.borderColor.active};
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
           }
         }
         .item.active {
           border-bottom: 0;
           position: relative;
+          background-color: ${themeVars.color.menu}; // 添加背景色
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
         }
       }
       // 克隆地址
       .ui.input.action {
+        margin: 0 16px 16px 16px; // 增加外边距
         > input {
           border: 1px solid ${themeVars.color.light.border};
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
           min-width: 150px;
           max-width: 400px;
           width: ${customThemeVars.cloneMenuWidth};
+          padding: 8px 12px; // 增加内边距
+          font-size: 14px; // 增加字体大小
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             border: 1px solid ${themeVars.color.light.border};
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
           }
           &:focus,
           &:focus-visible {
             border-color: ${themeVars.github.borderColor.accent.emphasis};
+            box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
           }
         }
         .ui.ui.ui.button {
           background-color: unset;
           border: unset;
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           color: ${themeVars.color.text.light.num1};
           padding: 0;
-          width: 32px;
+          width: 36px; // 增加宽度
-          height: 32px;
+          height: 36px; // 增加高度
-          margin-left: 5px;
+          margin-left: 8px; // 增加左边距
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: scale(1.05); // 轻微放大效果
           }
           svg {
-            width: 16px;
+            width: 18px; // 增加宽度
-            height: 16px;
+            height: 18px; // 增加高度
           }
         }
       }
       // 面板操作列表之间的分割线
       .divider {
         margin: 0;
+        border-color: ${themeVars.color.light.border}; // 使用主题色
       }
       // 面板操作列表
       .clone-panel-list {
         margin: 8px;
         .item {
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
-          padding: 6px 8px;
+          padding: 8px 12px; // 增加内边距
           line-height: 1.5;
-          margin: 0;
+          margin: 4px 8px; // 调整外边距
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           svg {
             color: ${themeVars.color.text.light.num1};
-            margin-right: 0.25rem;
+            margin-right: 0.5rem; // 增加右边距
+            width: 16px; // 增加宽度
+            height: 16px; // 增加高度
+          }
+          &:hover {
+            color: ${themeVars.color.text.self};
+            text-decoration: none;
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateX(2px); // 轻微右移效果
           }
         }
         > .item:hover {
@@ -107,4 +132,24 @@ export const clone = css`
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .tippy-box .clone-panel-popup {
+      .clone-panel-tab .item {
+        padding: 6px 10px; // 调整内边距
+      }
+      
+      .ui.input.action {
+        > input {
+          padding: 6px 10px; // 调整内边距
+          font-size: 13px; // 调整字体大小
+        }
+        .ui.ui.ui.button {
+          width: 32px; // 调整宽度
+          height: 32px; // 调整高度
+        }
+      }
+    }
+  }
 `;

styles/components/commit.ts

@@ -1,25 +1,41 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 // 提交列表
 export const commit = css`
   .page-content.repository {
     // 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
     #commits-table.ui.basic.striped.table tbody.commit-list {
+      border-radius: 12px; // 增加圆角
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
+      overflow: hidden; // 隐藏溢出内容
       // 作者
       .author {
         // 作者名称
         .author-wrapper {
           color: ${themeVars.color.text.light.num1};
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            color: ${themeVars.color.primary.self};
+          }
         }
       }
       // SHA 标签
       .sha {
         a.ui.label.commit-id-short {
-          padding: 2px 8px;
+          padding: 4px 10px; // 增加内边距
-          height: 28px;
+          height: 32px; // 增加高度
           margin-top: 0.375rem;
           margin-bottom: 0.375rem;
           margin-left: -8px;
+          border-radius: 25px; // 增加圆角
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            background-color: ${themeVars.github.bgColor.accent.emphasis};
+            color: ${themeVars.color.white};
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
       }
       // 提交信息
@@ -28,7 +44,12 @@ export const commit = css`
         a.ui.basic.primary.label {
           border-radius: 25px;
           border-width: 1.5px;
-          padding: 5px 8px !important;
+          padding: 6px 12px !important; // 增加内边距
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
       }
       // 提交信息右侧
@@ -40,12 +61,21 @@ export const commit = css`
         // 查看提交路径按钮
         .btn.view-commit-path {
           color: ${themeVars.color.text.light.num1};
+          padding: 4px 8px; // 增加内边距
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            background-color: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
       }
       tr {
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         // 整行悬停色
         &:hover {
           background-color: ${themeVars.color.hover.opaque};
+          transform: translateX(2px); // 轻微右移效果
         }
         // 偶数行悬停色
         &:nth-child(2n):hover {
@@ -54,24 +84,57 @@ export const commit = css`
         // 尾行圆角
         &:last-child {
           td:first-child {
-            border-bottom-left-radius: ${otherThemeVars.border.radius};
+            border-bottom-left-radius: 12px; // 增加圆角
           }
           td:last-child {
-            border-bottom-right-radius: ${otherThemeVars.border.radius};
+            border-bottom-right-radius: 12px; // 增加圆角
           }
         }
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .page-content.repository #commits-table.ui.basic.striped.table tbody.commit-list {
+      .sha a.ui.label.commit-id-short {
+        padding: 3px 8px; // 调整内边距
+        height: 28px; // 调整高度
+      }
+      
+      .message a.ui.basic.primary.label {
+        padding: 4px 8px !important; // 调整内边距
+      }
+      
+      .tw-text-right {
+        .btn.copy-commit-id,
+        .btn.view-commit-path {
+          padding: 3px 6px; // 调整内边距
+        }
+      }
+    }
+  }
 `;
 
 export const commitStatus = css`
   .flex-text-inline[data-global-init="initCommitStatuses"] {
-    padding: 6px;
+    padding: 8px 12px; // 增加内边距
-    margin-top: 2px;
+    margin-top: 4px; // 增加顶部外边距
-    border-radius: ${otherThemeVars.border.radius};
+    border-radius: 8px; // 增加圆角
+    background-color: ${themeVars.color.menu}; // 添加背景色
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:hover {
       background-color: ${themeVars.github.control.transparent.bgColor.hover};
+      transform: translateY(-1px); // 轻微上移效果
+    }
+  }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .flex-text-inline[data-global-init="initCommitStatuses"] {
+      padding: 6px 10px; // 调整内边距
+      margin-top: 2px; // 调整顶部外边距
     }
   }
 `;

styles/components/dashboard.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 export const dashboard = css`
   // 首页仪表板, 避免选中管理员后台的维护管理面板
@@ -8,25 +8,30 @@ export const dashboard = css`
       background: ${themeVars.color.hover.self};
       border: 0;
       border-radius: 12px;
-      margin-bottom: 8px;
+      margin-bottom: 16px; // 增加底部间距
+      padding: 4px; // 增加内边距
       > .item {
         background: unset;
         border-radius: 12px;
-        padding: 6px 12px !important;
+        padding: 8px 16px !important; // 增加内边距
+        font-weight: 500; // 增加字体粗细
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &.active {
           background: ${themeVars.color.menu};
           box-shadow: ${themeVars.github.shadow.floating.small};
           font-weight: 600;
+          transform: translateY(-1px); // 轻微上移效果
         }
         &::before {
           display: none;
         }
         &:not(.active) {
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
-          margin: 6px !important;
+          margin: 4px !important; // 调整边距
-          width: calc(50% - 12px);
+          width: calc(50% - 8px); // 调整宽度
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateY(-1px); // 轻微上移效果
           }
         }
       }
@@ -35,18 +40,21 @@ export const dashboard = css`
     .ui.top.attached.header {
       border: 0;
       font-size: 20px;
-      font-weight: 400;
+      font-weight: 600; // 增加字体粗细
       background-color: unset !important;
       margin-bottom: 0.25rem;
+      padding: 16px 20px; // 增加内边距
     }
     // 仓库/组织列表
     .ui.attached.segment {
       background-color: ${themeVars.color.menu};
       border: unset !important;
       box-shadow: ${themeVars.github.shadow.floating.small};
+      margin-bottom: 16px; // 增加底部间距
       &.repos-search {
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
+        padding: 16px; // 增加内边距
       }
       &.table {
         &:last-child {
@@ -56,13 +64,16 @@ export const dashboard = css`
         ul {
           padding: 8px;
           li {
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
-            padding: 6px 8px !important;
+            padding: 12px 16px !important; // 增加内边距
+            margin: 4px 0; // 增加垂直间距
+            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
             &:not(:last-child) {
               border-bottom: 0;
             }
             &:hover {
               background: ${themeVars.github.control.transparent.bgColor.hover};
+              transform: translateX(2px); // 轻微右移效果
             }
             a.muted:hover {
               color: inherit;
@@ -87,39 +98,47 @@ export const dashboardIssues = css`
       background-color: ${themeVars.color.box.header};
       border: 1px solid ${themeVars.color.light.border};
       border-bottom: 0;
-      border-top-left-radius: ${otherThemeVars.border.radius};
+      border-top-left-radius: 12px; // 增加圆角
-      border-top-right-radius: ${otherThemeVars.border.radius};
+      border-top-right-radius: 12px; // 增加圆角
       height: 54px;
-      padding: 16px 8px;
+      padding: 16px 16px; // 增加内边距
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
       .list-header-toggle {
         align-items: center;
         border: 0;
         > .item {
           background: unset !important;
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           color: ${themeVars.color.text.light.num1};
-          padding: 0px 8px;
+          padding: 0px 16px; // 增加内边距
-          height: 30px;
+          height: 36px; // 增加高度
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:before {
             display: none;
           }
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+            transform: translateY(-1px); // 轻微上移效果
           }
           &.active {
             color: ${themeVars.color.text.self};
             font-weight: 700;
+            background: ${themeVars.color.active} !important; // 添加背景色
           }
         }
       }
       .list-header-filters {
         > .item {
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           color: ${themeVars.color.text.light.num1};
-          padding: 0px 12px;
+          padding: 0px 16px; // 增加内边距
-          height: 32px;
+          height: 36px; // 增加高度
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateY(-1px); // 轻微上移效果
           }
         }
       }
@@ -132,6 +151,21 @@ export const issueListMobile = css`
   @media (max-width: 767.98px) {
     .page-content.dashboard.issues .list-header {
       height: auto;
+      padding: 12px; // 调整内边距
+    }
+    
+    // 移动端优化
+    .list-header-toggle,
+    .list-header-filters {
+      flex-wrap: wrap; // 允许换行
+      gap: 8px; // 增加间距
+    }
+    
+    .list-header-toggle > .item,
+    .list-header-filters > .item {
+      flex: 1 1 auto; // 自适应宽度
+      min-width: calc(50% - 4px); // 最小宽度
+      text-align: center; // 文本居中
     }
   }
 `;
@@ -141,4 +175,15 @@ export const fixOrgLabel = css`
   .dashboard .secondary-nav .org-visibility .label {
     margin-right: 0;
   }
+  
+  // 增强组织可见性标签样式
+  .dashboard .secondary-nav .org-visibility .label {
+    padding: 4px 12px; // 增加内边距
+    border-radius: 25px; // 增加圆角
+    font-weight: 500; // 增加字体粗细
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+    &:hover {
+      transform: translateY(-1px); // 轻微上移效果
+    }
+  }
 `;

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; // 增加内边距
+  }
 `;

styles/components/filelist.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 // 文件列表页面下的分支按钮
 export const branchButton = css`
@@ -11,6 +11,13 @@ export const branchButton = css`
         margin-top: 1px;
         margin-left: auto;
         margin-right: 20px; // gitea 有 RSS 留出足够的空间
+        border-radius: 25px; // 增加圆角
+        padding: 4px 10px; // 增加内边距
+        font-weight: 500; // 增加字体粗细
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        &:hover {
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
     }
   }
@@ -21,10 +28,18 @@ export const syncFork = css`
   .page-content.repository.file.list {
     .repo-home-filelist > .ui.message {
       background: ${themeVars.color.box.header};
-      padding: 8px 8px 8px 16px;
+      padding: 12px 16px; // 增加内边距
       margin: 16px 0px;
+      border-radius: 12px; // 增加圆角
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
       .ui.button {
         min-width: 96px;
+        border-radius: 8px; // 增加圆角
+        font-weight: 500; // 增加字体粗细
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        &:hover {
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
     }
   }
@@ -35,10 +50,14 @@ export const repoFiles = css`
   // 文件列表和提交列表的按钮组
   .repo-button-row {
     margin: 16px 0;
+    gap: 8px; // 增加间距
   }
   .repository.file.list {
     #repo-files-table {
       margin: 16px 0;
+      border-radius: 12px; // 增加圆角
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
+      overflow: hidden; // 隐藏溢出内容
       // 头部最后一次提交
       .repo-file-line {
         padding-right: 16px;
@@ -81,7 +100,11 @@ export const repoFiles = css`
       // 文件列表
       .repo-file-item {
         .repo-file-cell {
-          height: 40px;
+          height: 44px; // 增加高度
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            background-color: ${themeVars.color.hover.opaque};
+          }
           &.name {
             display: flex;
             align-items: center;
@@ -99,6 +122,7 @@ export const repoFiles = css`
         background: ${themeVars.color.body};
         min-height: 48px;
         padding: 0px 8px !important;
+        border-radius: 12px 12px 0 0; // 增加圆角
         svg {
           color: ${themeVars.color.text.light.num1};
         }
@@ -106,14 +130,16 @@ export const repoFiles = css`
           padding: 8px !important;
           // 伪元素宽度等于按钮宽度而不是父元素宽度
           position: relative;
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
           }
           &:after {
             content: "";
             background: ${themeVars.github.underlineNav.borderColor.active};
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
             bottom: -7px;
             left: 0;
             height: 2px;
@@ -125,9 +151,13 @@ export const repoFiles = css`
             text-decoration-line: none;
           }
         }
-        .file-header-right:hover {
+        .file-header-right {
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
-          border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
+          }
         }
       }
     }
@@ -185,6 +215,8 @@ export const repoFileView = css`
         // 固定头部
         position: sticky;
         top: 0;
+        border-radius: 12px; // 增加圆角
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
         &:after {
           content: "";
           position: absolute;
@@ -203,6 +235,7 @@ export const repoFileView = css`
           // 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除
           position: sticky;
           top: 0;
+          border-radius: 12px 12px 0 0; // 增加圆角
           &:after {
             content: "";
             position: absolute;
@@ -214,6 +247,11 @@ export const repoFileView = css`
           }
           .ui.compact.icon.button {
             border: 0;
+            border-radius: 8px; // 增加圆角
+            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+            &:hover {
+              transform: translateY(-1px); // 轻微上移效果
+            }
           }
         }
         .view-file-tree-items {
@@ -228,7 +266,7 @@ export const repoFileView = css`
           align-content: center;
           background: ${themeVars.color.box.header};
           border: 1px solid ${themeVars.color.secondary.self};
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 12px; // 增加圆角
           margin: 16px 0;
           height: 46px;
           min-height: 46px;
@@ -236,8 +274,15 @@ export const repoFileView = css`
           position: sticky;
           top: 0;
           z-index: 1;
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
           .ui.button {
             min-height: 32px;
+            border-radius: 8px; // 增加圆角
+            font-weight: 500; // 增加字体粗细
+            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+            &:hover {
+              transform: translateY(-1px); // 轻微上移效果
+            }
           }
           // 打开文件树按钮
           .repo-view-file-tree-toggle-show {
@@ -245,10 +290,12 @@ export const repoFileView = css`
             border-color: #0000;
             padding: 0;
             min-width: 32px;
+            border-radius: 8px; // 增加圆角
           }
           // 分支选择按钮
           .branch-dropdown-button {
             padding: 0 12px;
+            border-radius: 8px; // 增加圆角
           }
           // 路径
           .repo-path {
@@ -274,9 +321,11 @@ export const repoFileView = css`
           h4.file-header {
             padding: 8px 12px !important;
             position: sticky;
+            border-radius: 12px 12px 0 0; // 增加圆角
             // 重叠边框线, 避免过粗
             top: 45px;
             z-index: 1;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
             .file-header-left {
               color: ${themeVars.color.text.light.num1};
               font-size: 12px;
@@ -290,6 +339,11 @@ export const repoFileView = css`
                   height: 28px;
                   font-size: 12px;
                   padding: 0 8px;
+                  border-radius: 8px; // 增加圆角
+                  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+                  &:hover {
+                    transform: translateY(-1px); // 轻微上移效果
+                  }
                 }
               }
               // 右侧操作按钮
@@ -300,20 +354,23 @@ export const repoFileView = css`
                 border: 1px solid ${themeVars.color.light.border};
                 height: 28px;
                 padding: 0 8px;
+                border-radius: 8px; // 增加圆角
+                transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
                 svg {
                   color: ${themeVars.color.text.light.num1};
                 }
                 &:first-of-type {
-                  border-top-left-radius: ${otherThemeVars.border.radius};
+                  border-top-left-radius: 8px; // 增加圆角
-                  border-bottom-left-radius: ${otherThemeVars.border.radius};
+                  border-bottom-left-radius: 8px; // 增加圆角
                 }
                 &:last-of-type {
-                  border-top-right-radius: ${otherThemeVars.border.radius};
+                  border-top-right-radius: 8px; // 增加圆角
-                  border-bottom-right-radius: ${otherThemeVars.border.radius};
+                  border-bottom-right-radius: 8px; // 增加圆角
                 }
                 &:hover {
                   background: ${themeVars.color.hover.self};
                   color: ${themeVars.color.text.light.num1};
+                  transform: translateY(-1px); // 轻微上移效果
                 }
               }
             }
@@ -321,9 +378,11 @@ export const repoFileView = css`
         }
         // 头部提交信息
         .ui.segment#repo-file-commit-box {
-          padding: 8px 12px;
+          padding: 12px 16px; // 增加内边距
           margin-bottom: 16px !important;
           min-height: 46px;
+          border-radius: 12px; // 增加圆角
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
           > .latest-commit {
             gap: 8px;
             .commit-summary {
@@ -357,6 +416,20 @@ export const repoFileViewMobile = css`
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .repo-view-container .repo-view-file-tree-container {
+      height: auto;
+      position: static;
+    }
+    
+    .repo-view-content .repo-button-row {
+      flex-wrap: wrap;
+      height: auto;
+      padding: 8px 12px;
+    }
+  }
 `;
 
 // 仓库代码布局调整, 侧边栏宽度调整
@@ -393,6 +466,8 @@ export const repoSidebarTop = css`
           }
           .repo-description {
             color: ${themeVars.color.text.self};
+            font-size: 14px; // 增加字体大小
+            line-height: 1.5; // 增加行高
           }
           #repo-topics {
             margin: 10px 0px !important;
@@ -428,6 +503,12 @@ export const repoSidebarBottom = css`
       }
       .flex-item {
         padding: 16px 0;
+        border-radius: 12px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        &:hover {
+          background-color: ${themeVars.color.hover.opaque};
+          transform: translateY(-1px); // 轻微上移效果
+        }
         .flex-item {
           padding: 16px 0 0 0;
           .flex-item-icon {
@@ -448,6 +529,7 @@ export const repoSidebarBottom = css`
       .language-stats {
         height: 8px;
         margin-bottom: 0px;
+        border-radius: 4px; // 增加圆角
       }
       .language-stats-details .item {
         font-size: 12px;
@@ -456,6 +538,7 @@ export const repoSidebarBottom = css`
           height: 8px;
           width: 8px;
           margin-right: 8px;
+          border-radius: 50%; // 圆形图标
         }
         .tw-font-semibold {
           color: ${themeVars.color.text.self};

styles/components/footer.ts

@@ -2,19 +2,27 @@ import { css, themeVars } from "src/types/vars";
 
 export const footer = css`
   .page-footer {
-    background-color: ${themeVars.color.body};
+    background-color: ${themeVars.color.footer}; // 使用主题色
     border-top: 0;
     color: ${themeVars.color.text.light.num1};
     font-size: 12px;
     gap: 32px;
     justify-content: center;
-    padding: 16px 0 40px 0;
+    padding: 24px 0 40px 0; // 增加顶部内边距
+    border-radius: 12px 12px 0 0; // 增加圆角
+    margin-top: 32px; // 增加顶部外边距
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
     > .left-links {
-      gap: 4px;
+      gap: 8px; // 增加间距
       > a {
         color: ${themeVars.color.text.light.num1};
+        padding: 4px 8px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:hover {
           color: ${themeVars.color.primary.self};
+          background-color: ${themeVars.color.hover.self};
+          transform: translateY(-1px); // 轻微上移效果
         }
       }
       > strong {
@@ -25,19 +33,43 @@ export const footer = css`
       gap: 16px;
       > .ui.dropdown {
         font-size: 12px;
+        padding: 4px 8px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:hover {
           color: ${themeVars.color.primary.self};
+          background-color: ${themeVars.color.hover.self};
+          transform: translateY(-1px); // 轻微上移效果
         }
       }
       > a {
         border-left: 0;
         color: ${themeVars.color.text.light.num1};
-        padding-left: 0;
+        padding: 4px 8px; // 增加内边距
         margin-left: 0;
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:hover {
           color: ${themeVars.color.primary.self};
+          background-color: ${themeVars.color.hover.self};
+          transform: translateY(-1px); // 轻微上移效果
         }
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .page-footer {
+      flex-direction: column; // 垂直排列
+      gap: 16px; // 调整间距
+      padding: 16px 0 32px 0; // 调整内边距
+      > .left-links,
+      > .right-links {
+        flex-wrap: wrap; // 允许换行
+        justify-content: center; // 居中对齐
+        gap: 8px; // 调整间距
+      }
+    }
+  }
 `;

styles/components/heatmap.ts

@@ -9,30 +9,38 @@ export const heatmap = css`
     .total-contributions {
       left: 25px + 20px;
       bottom: 0 + 12px;
+      color: ${themeVars.color.text.light.num1};
+      font-size: 12px; // 增加字体大小
+      font-weight: 500; // 增加字体粗细
     }
     .total-contributions,
     .vch__legend-right {
       color: ${themeVars.color.text.light.num1};
     }
     .vch__container {
-      padding: 12px 20px;
+      padding: 16px 24px; // 增加内边距
       box-shadow: ${themeVars.github.shadow.floating.small};
       border-radius: 12px;
+      background-color: ${themeVars.color.menu}; // 添加背景色
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       // 覆盖热力图和图例的背景色
       .vch__day__square,
       .vch__legend__wrapper rect {
         // 圆角
-        rx: 2.5px;
+        rx: 3px; // 增加圆角
-        ry: 2.5px;
+        ry: 3px; // 增加圆角
         // hover 时的圆角
-        border-radius: 0.75px;
+        border-radius: 1px; // 增加圆角
         // 宽度和高度可以用来控制间隔
-        width: 9px;
+        width: 11px; // 增加宽度
-        height: 9px;
+        height: 11px; // 增加高度
         // 边框
         outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
-        // 边框向内偏移
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
-        outline-offset: -0.5px;
+        // 悬停效果
+        &:hover {
+          transform: scale(1.2); // 轻微放大效果
+        }
 
         &[style="fill: var(--color-secondary-alpha-60);"] {
           fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
@@ -65,6 +73,18 @@ export const heatmap = css`
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    #user-heatmap .vch__container {
+      padding: 12px 16px; // 调整内边距
+      .vch__day__square,
+      .vch__legend__wrapper rect {
+        width: 9px; // 调整宽度
+        height: 9px; // 调整高度
+      }
+    }
+  }
 `;
 
 // 动态
@@ -72,9 +92,19 @@ export const activity = css`
   .flex-list#activity-feed {
     border-radius: 12px;
     box-shadow: ${themeVars.github.shadow.floating.small};
+    background-color: ${themeVars.color.menu}; // 添加背景色
     > .flex-item {
       gap: 12px;
-      padding: 12px 8px 16px 14px;
+      padding: 16px 12px 20px 16px; // 增加内边距
+      border-bottom: 1px solid ${themeVars.color.light.border}; // 添加底部边框
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:last-child {
+        border-bottom: none; // 最后一项移除边框
+      }
+      &:hover {
+        background-color: ${themeVars.color.hover.opaque};
+        transform: translateX(2px); // 轻微右移效果
+      }
       > .flex-item-main {
         gap: 8px !important;
         > div:not([class]) {
@@ -88,13 +118,28 @@ export const activity = css`
       }
       // 动态的右侧 svg 图标
       .flex-item-trailing svg {
-        height: 20px;
+        height: 24px; // 增加高度
-        width: 20px;
+        width: 24px; // 增加宽度
+        color: ${themeVars.color.text.light.num1};
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       }
     }
     > .page.buttons {
       border-top: 1px solid ${themeVars.color.secondary.self};
-      padding: 12px 0px;
+      padding: 16px 0px; // 增加内边距
+      margin: 0; // 移除外边距
+      border-radius: 0 0 12px 12px; // 增加圆角
+    }
+  }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .flex-list#activity-feed > .flex-item {
+      padding: 12px 8px 16px 12px; // 调整内边距
+      .flex-item-trailing svg {
+        height: 20px; // 调整高度
+        width: 20px; // 调整宽度
+      }
     }
   }
 `;

styles/components/issue.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
 // 工单&PR 列表
@@ -14,11 +14,12 @@ export const issueList = css`
       background-color: ${themeVars.color.box.header};
       border: 1px solid ${themeVars.color.light.border};
       border-bottom: 0;
-      border-top-left-radius: ${otherThemeVars.border.radius};
+      border-top-left-radius: 12px; // 增加圆角
-      border-top-right-radius: ${otherThemeVars.border.radius};
+      border-top-right-radius: 12px; // 增加圆角
-      height: 48px;
+      height: 56px; // 增加高度
-      padding: 8px;
+      padding: 12px 16px; // 增加内边距
       margin-top: 16px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
       .issue-list-toolbar-left {
         // 复选框
         input {
@@ -29,19 +30,23 @@ export const issueList = css`
           border: 0;
           > .item {
             background: unset !important;
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
             color: ${themeVars.color.text.light.num1};
-            padding: 0px 8px;
+            padding: 0px 16px; // 增加内边距
-            height: 30px;
+            height: 36px; // 增加高度
+            font-weight: 500; // 增加字体粗细
+            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
             &:before {
               display: none;
             }
             &:hover {
               background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+              transform: translateY(-1px); // 轻微上移效果
             }
             &.active {
               color: ${themeVars.color.text.self};
               font-weight: 700;
+              background: ${themeVars.color.active} !important; // 添加背景色
             }
           }
         }
@@ -52,8 +57,14 @@ export const issueList = css`
           color: ${themeVars.color.text.light.num1};
         }
         > .ui.button {
-          padding: 0 12px;
+          padding: 0 16px; // 增加内边距
-          height: 32px;
+          height: 36px; // 增加高度
+          border-radius: 8px; // 增加圆角
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
       }
     }
@@ -68,17 +79,19 @@ export const issueList = css`
   .page-content.repository.issue-list {
     .flex-list#issue-list {
       border: 1px solid ${themeVars.color.light.border};
-      border-bottom-left-radius: ${otherThemeVars.border.radius};
+      border-bottom-left-radius: 12px; // 增加圆角
-      border-bottom-right-radius: ${otherThemeVars.border.radius};
+      border-bottom-right-radius: 12px; // 增加圆角
       > .flex-item {
         align-items: center;
         padding: 0;
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:last-child {
-          border-bottom-left-radius: ${otherThemeVars.border.radius};
+          border-bottom-left-radius: 12px; // 增加圆角
-          border-bottom-right-radius: ${otherThemeVars.border.radius};
+          border-bottom-right-radius: 12px; // 增加圆角
         }
         &:hover {
           background-color: ${themeVars.color.hover.opaque};
+          transform: translateX(2px); // 轻微右移效果
         }
         > .flex-item-icon {
           display: flex;
@@ -97,11 +110,11 @@ export const issueList = css`
         > .flex-item-main {
           gap: 4px;
           .flex-item-header {
-            padding-top: 8px;
+            padding-top: 12px; // 增加内边距
           }
           .flex-item-body {
             font-size: 12px;
-            padding-bottom: 8px;
+            padding-bottom: 12px; // 增加内边距
           }
         }
         > .flex-item-trailing {
@@ -114,14 +127,19 @@ export const issueList = css`
   // [TODO] 暂时排除项目的列表
   .page-content.repository.milestones:not(.projects) .milestone-list {
     border: 1px solid ${themeVars.color.light.border};
-    border-bottom-left-radius: ${otherThemeVars.border.radius};
+    border-bottom-left-radius: 12px; // 增加圆角
-    border-bottom-right-radius: ${otherThemeVars.border.radius};
+    border-bottom-right-radius: 12px; // 增加圆角
     .milestone-card {
-      padding: 8px 16px 10px 16px;
+      padding: 16px 20px; // 增加内边距
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        background-color: ${themeVars.color.hover.opaque};
+        transform: translateY(-1px); // 轻微上移效果
+      }
       .milestone-header {
         h3 {
-          font-size: 16px;
+          font-size: 18px; // 增加字体大小
-          font-weight: 500;
+          font-weight: 600; // 增加字体粗细
         }
         div span {
           font-size: 14px;
@@ -146,31 +164,53 @@ export const issueListMobile = css`
     .page-content.repository.issue-list {
       .issue-list-toolbar {
         height: auto;
+        padding: 12px; // 调整内边距
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .issue-list-toolbar-left > .ui.compact.menu > .item,
+    .issue-list-toolbar-right > .ui.menu > .item {
+      padding: 0px 12px; // 调整内边距
+      height: 32px; // 调整高度
+    }
+    
+    .issue-list-toolbar-right > .ui.menu > .ui.button {
+      padding: 0 12px; // 调整内边距
+      height: 32px; // 调整高度
+    }
+  }
 `;
 
 // 置顶 Issue
 export const issuePins = css`
   #issue-pins {
-    gap: 12px;
+    gap: 16px; // 增加间距
-    margin-bottom: 16px;
+    margin-bottom: 20px; // 增加底部间距
     .issue-card {
-      padding: 16px 12px;
+      padding: 20px 16px; // 增加内边距
+      border-radius: 12px; // 增加圆角
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        transform: translateY(-2px); // 轻微上移效果
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 增强阴影
+      }
       .content {
         .issue-card-title {
-          font-size: 16px;
+          font-size: 18px; // 增加字体大小
           font-weight: 600;
         }
         svg {
           color: ${themeVars.color.text.light.num1};
           height: 100%;
-          margin-right: 3px;
+          margin-right: 4px; // 增加右边距
         }
         .meta {
           font-size: 12px;
-          padding-top: 4px;
+          padding-top: 6px; // 增加内边距
         }
       }
       .issue-card-bottom {
@@ -187,20 +227,47 @@ export const button = css`
       color: ${themeVars.github.fgColor.done};
       background-color: ${themeVars.color.button};
       border-color: ${themeVars.color.light.border};
+      border-radius: 8px; // 增加圆角
+      padding: 8px 16px; // 增加内边距
+      font-weight: 500; // 增加字体粗细
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       &:hover {
         background-color: ${themeVars.color.hover.self};
+        transform: translateY(-1px); // 轻微上移效果
+      }
+      &:active {
+        animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
       }
     }
 
     // 重新开启按钮
     .ui.basic.primary.button#status-button {
       color: ${themeVars.github.fgColor.success};
+      border-radius: 8px; // 增加圆角
+      padding: 8px 16px; // 增加内边距
+      font-weight: 500; // 增加字体粗细
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        transform: translateY(-1px); // 轻微上移效果
+      }
+      &:active {
+        animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
+      }
     }
   }
   // 工单&PR标题右侧按钮
   .repository.view.issue .issue-title-buttons > .ui.button {
-    padding: 0 12px;
+    padding: 0 16px; // 增加内边距
-    height: 32px;
+    height: 36px; // 增加高度
+    border-radius: 8px; // 增加圆角
+    font-weight: 500; // 增加字体粗细
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+    &:hover {
+      transform: translateY(-1px); // 轻微上移效果
+    }
+    &:active {
+      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
+    }
   }
 `;
 
@@ -210,37 +277,55 @@ export const babel = css`
       // 时间线打开状态标签
       &.tw-bg-green {
         background-color: ${themeVars.github.bgColor.success.emphasis} !important;
+        border-radius: 25px; // 增加圆角
       }
       // 时间线关闭状态标签
       &.tw-bg-red {
         background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+        border-radius: 25px; // 增加圆角
       }
       // 时间线合并状态标签
       &.tw-bg-purple {
         background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+        border-radius: 25px; // 增加圆角
       }
     }
   }
   // 工单&PR状态标签
   .ui.label.issue-state-label {
     border-radius: 25px !important;
+    padding: 6px 12px; // 增加内边距
+    font-weight: 500; // 增加字体粗细
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
 
     &.green {
       color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.success.emphasis} !important;
       border-color: ${themeVars.github.bgColor.success.emphasis} !important;
+      &:hover {
+        opacity: 0.9; // 悬停时降低不透明度
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
 
     &.red {
       color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.done.emphasis} !important;
       border-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      &:hover {
+        opacity: 0.9; // 悬停时降低不透明度
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
 
     &.purple {
       color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.done.emphasis} !important;
       border-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      &:hover {
+        opacity: 0.9; // 悬停时降低不透明度
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
   }
 `;
@@ -251,16 +336,22 @@ export const prBranch = css`
   #issue-list .flex-item-body .branches .branch {
     color: ${themeVars.github.fgColor.accent};
     background-color: ${themeVars.github.bgColor.accent.muted};
-    border-radius: ${otherThemeVars.border.radius};
+    border-radius: 25px; // 增加圆角
     font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
     font-size: 12px;
-    padding: 0 5px;
+    padding: 4px 10px; // 增加内边距
     line-height: 20px;
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+    &:hover {
+      background-color: ${themeVars.github.bgColor.accent.emphasis};
+      color: ${themeVars.color.white};
+      transform: translateY(-1px); // 轻微上移效果
+    }
   }
 
   .repository.view.issue .pull-desc code {
-    padding-top: 3px;
+    padding-top: 4px; // 增加内边距
-    padding-bottom: 3px;
+    padding-bottom: 4px; // 增加内边距
     a:hover {
       text-decoration-line: none;
     }
@@ -282,12 +373,13 @@ export const comment = css`
     &:target {
       .comment-container {
         border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
-        box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
+        box-shadow: 0 0 0 2px ${themeVars.color.primary.self} !important; // 增强焦点效果
       }
     }
     .comment-header {
-      padding: 4px 4px 4px 16px;
+      padding: 8px 8px 8px 16px; // 增加内边距
-      min-height: 38px;
+      min-height: 42px; // 增加最小高度
+      border-radius: 12px 12px 0 0; // 增加圆角
     }
     .comment-header-right {
       > .item,
@@ -297,8 +389,13 @@ export const comment = css`
       > .ui.label {
         background-color: initial;
         font-size: 12px;
-        height: 20px;
+        height: 24px; // 增加高度
-        padding: 0 6px;
+        padding: 0 8px; // 增加内边距
+        border-radius: 25px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        &:hover {
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
       // 隐藏顶部菜单的表情按钮
       // 无法使用此样式, 评论无表情时底部的表情按钮元素不会渲染, 这是一个先有鸡还是先有蛋的问题
@@ -314,9 +411,12 @@ export const comment = css`
         // 评论菜单的删除按钮
         .menu .item.delete-comment {
           color: ${themeVars.color.red.self};
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background-color: ${themeVars.color.red.badge.bg} !important;
             color: ${themeVars.color.red.light};
+            transform: translateX(2px); // 轻微右移效果
           }
         }
       }
@@ -327,12 +427,17 @@ export const comment = css`
       align-items: center;
       justify-content: center;
       background: ${themeVars.color.button};
-      border-radius: 25px;
+      border-radius: 25px; // 增加圆角
       border: 1px solid ${themeVars.color.light.border};
       color: ${themeVars.color.text.light.num1};
-      padding: 0px 8px !important;
+      padding: 0px 10px !important; // 增加内边距
-      height: 28px;
+      height: 32px; // 增加高度
-      width: 28px;
+      width: 32px; // 增加宽度
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        background: ${themeVars.color.hover.self};
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
     // 底部表情栏
     .bottom-reactions {
@@ -340,9 +445,12 @@ export const comment = css`
         background-color: unset !important;
         border-radius: 25px;
         border-color: ${themeVars.color.light.border};
+        padding: 4px 10px; // 增加内边距
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:hover {
           background-color: ${themeVars.color.reaction.hoverBg} !important;
           border-color: ${themeVars.color.light.border};
+          transform: translateY(-1px); // 轻微上移效果
         }
         .reaction {
           font-size: 12px;
@@ -350,7 +458,7 @@ export const comment = css`
         .reaction-count {
           color: ${themeVars.color.text.light.self};
           font-weight: 500;
-          margin-left: 0;
+          margin-left: 4px; // 增加左边距
         }
       }
       // 显示表情菜单按钮
@@ -370,6 +478,8 @@ export const commentForm = css`
     &::after {
       display: none;
     }
+    border-radius: 12px; // 增加圆角
+    padding: 16px; // 增加内边距
   }
 `;
 
@@ -383,6 +493,14 @@ export const dropdown = css`
         content: "";
         ${activeItemAfterStyle}
       }
+      .item {
+        padding: 8px 12px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        &:hover {
+          transform: translateX(2px); // 轻微右移效果
+        }
+      }
     }
   }
 `;
@@ -393,15 +511,16 @@ export const prMerge = css`
     // 头像
     .timeline-avatar {
       color: ${themeVars.color.white} !important;
-      border-radius: ${otherThemeVars.border.radius};
+      border-radius: 12px; // 增加圆角
-      width: 40px;
+      width: 48px; // 增加宽度
-      height: 40px;
+      height: 48px; // 增加高度
       display: flex;
       align-items: center;
       justify-content: center;
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       svg {
-        width: 24px;
+        width: 28px; // 增加宽度
-        height: 24px;
+        height: 28px; // 增加高度
       }
       // 可以合并
       &.green {
@@ -432,14 +551,18 @@ export const prMerge = css`
           }
         }
       }
+      &:hover {
+        transform: scale(1.05); // 轻微放大效果
+      }
     }
     // 检查状态
     .commit-status-panel {
       .commit-status-header {
         background: ${themeVars.color.body};
-        padding: 16px;
+        padding: 20px; // 增加内边距
-        font-size: 16px;
+        font-size: 18px; // 增加字体大小
         font-weight: 600;
+        border-radius: 12px 12px 0 0; // 增加圆角
         .ui.right {
           color: ${themeVars.color.text.light.num1};
           font-size: 14px;
@@ -450,18 +573,20 @@ export const prMerge = css`
       .commit-status-list {
         background: ${themeVars.color.menu};
         .commit-status-item {
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
-          padding: 2px 8px;
+          padding: 6px 12px; // 增加内边距
-          margin: 0px 8px;
+          margin: 0px 12px; // 增加边距
-          height: 37px;
+          height: 42px; // 增加高度
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:first-child {
-            margin-top: 8px;
+            margin-top: 12px; // 增加边距
           }
           &:last-child {
-            margin-bottom: 8px;
+            margin-bottom: 12px; // 增加边距
           }
           &:hover {
             background-color: ${themeVars.color.hover.opaque};
+            transform: translateX(2px); // 轻微右移效果
           }
         }
       }
@@ -469,9 +594,10 @@ export const prMerge = css`
     // 合并信息和操作
     .merge-section {
       color: ${themeVars.color.text.light.num1};
-      padding: 16px;
+      padding: 20px; // 增加内边距
       display: grid;
-      gap: 8px;
+      gap: 12px; // 增加间距
+      border-radius: 0 0 12px 12px; // 增加圆角
       &.no-header {
         &::before,
         &::after {
@@ -493,17 +619,18 @@ export const timeline = css`
       }
       .timeline-item,
       .timeline-item-group {
-        padding: 16px 0;
+        padding: 20px 0; // 增加内边距
         // 事件
         &.event {
           // 修复覆盖后的位置问题
           padding-left: 15px;
           .avatar {
-            width: 20px;
+            width: 24px; // 增加宽度
-            height: 20px;
+            height: 24px; // 增加高度
           }
           .badge {
             border: 2px solid ${themeVars.color.body};
+            border-radius: 50%; // 圆形徽章
           }
           // 仅匹配只有 badge
           .badge:not([class*=" "]) {
@@ -517,7 +644,7 @@ export const timeline = css`
         &.commits-list {
           // 每个提交之间的间隔
           .flex-text-block {
-            padding-top: 4px;
+            padding-top: 6px; // 增加内边距
           }
           .badge svg {
             color: ${themeVars.color.text.light.num1};
@@ -538,7 +665,7 @@ export const timeline = css`
 `;
 
 const sidebarPadding = {
-  padding: "4px 8px",
+  padding: "8px 12px", // 增加内边距
 };
 
 // 侧边栏
@@ -551,6 +678,8 @@ export const issueSidebar = css`
         border: 0;
         font-size: 12px;
         padding: 0;
+        border-radius: 12px; // 增加圆角
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
         .ui.button {
           font-size: 12px;
         }
@@ -577,7 +706,7 @@ export const issueSidebar = css`
         }
         // 允许维护者编辑
         > .ui.checkbox {
-          margin: 4px 8px;
+          margin: 8px 12px; // 增加边距
           strong {
             font-weight: 400;
           }
@@ -585,11 +714,14 @@ export const issueSidebar = css`
         .issue-sidebar-combo {
           .ui.dropdown > a.fixed-text.muted {
             align-items: center;
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
             text-decoration-line: none;
-            height: 28px;
+            height: 32px; // 增加高度
+            padding: 0 12px; // 增加内边距
+            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
             &:hover {
               background: ${themeVars.github.control.transparent.bgColor.hover};
+              transform: translateY(-1px); // 轻微上移效果
             }
           }
           .ui.list {
@@ -600,11 +732,14 @@ export const issueSidebar = css`
         // 时间追踪
         > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
           align-items: center;
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           text-decoration-line: none;
-          height: 28px;
+          height: 32px; // 增加高度
+          padding: 0 12px; // 增加内边距
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateY(-1px); // 轻微上移效果
           }
         }
         // 选中日期颜色
@@ -612,16 +747,21 @@ export const issueSidebar = css`
           color: ${themeVars.color.text.self};
         }
         .divider {
-          margin: 12px 0 12px 8px;
+          margin: 16px 0 16px 12px; // 增加边距
-          width: calc(100% - 16px);
+          width: calc(100% - 24px); // 调整宽度
         }
         // 订阅按钮
         .ui.watching .ui.button {
-          padding: 0px 8px;
+          padding: 0px 12px; // 增加内边距
-          height: 28px;
+          height: 32px; // 增加高度
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           svg {
             margin: 0 !important;
           }
+          &:hover {
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
         // PIN 按钮
         .form-fetch-action.single-button-form .ui.button,
@@ -634,8 +774,11 @@ export const issueSidebar = css`
           // 好像是浏览器 BUG, 最后不生效, 必须 !important
           margin: 0 !important;
           justify-content: left;
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateX(2px); // 轻微右移效果
           }
         }
         .ui.show-modal.button[data-modal="#sidebar-delete-issue"] {

styles/components/navbar.ts

@@ -1,18 +1,23 @@
 import { fallbackVar } from "src/functions";
-import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
+import { css, customThemeVars, themeVars } from "src/types/vars";
 
 export const navbarRight = css`
   #navbar {
     border-bottom: 0;
     padding: 0px 16px;
     min-height: 64px;
+    background-color: ${themeVars.color.nav.bg}; // 添加背景色
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
     .navbar-left {
       gap: 8px;
       > .item {
         padding: 4px 8px;
         min-height: 20px;
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &.active {
           font-weight: 600;
+          background-color: ${themeVars.color.active}; // 添加背景色
         }
         &#navbar-logo {
           // 与下方的用户切换头像对齐
@@ -25,6 +30,10 @@ export const navbarRight = css`
             width: 32px;
           }
         }
+        &:hover:not(#navbar-logo) {
+          background-color: ${themeVars.color.nav.hoverBg};
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
     }
     // 进入用户页面后, 避免注册, 登录和首页等意外覆盖
@@ -39,11 +48,12 @@ export const navbarRight = css`
         align-content: center;
         justify-content: center;
         border: 1px solid ${themeVars.color.light.border};
-        border-radius: ${otherThemeVars.border.radius};
+        border-radius: 8px; // 增加圆角
         padding: unset;
-        height: 32px;
+        height: 36px; // 增加高度
-        min-width: 32px;
+        min-width: 36px; // 增加最小宽度
-        min-height: 32px;
+        min-height: 36px; // 增加最小高度
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         // 纠正内容保证居中
         .tw-relative {
           height: 16px;
@@ -54,7 +64,7 @@ export const navbarRight = css`
         }
         // 带下拉菜单的按钮
         &.ui.dropdown {
-          padding: 0 8px;
+          padding: 0 12px; // 增加内边距
           .text {
             display: grid;
             grid-auto-flow: column;
@@ -69,8 +79,13 @@ export const navbarRight = css`
           }
           &:hover {
             background-color: ${themeVars.color.nav.hoverBg};
+            transform: translateY(-1px); // 轻微上移效果
           }
         }
+        &:hover:not(.ui.dropdown) {
+          background-color: ${themeVars.color.nav.hoverBg};
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
       .item.ui.dropdown {
         // 头像菜单
@@ -85,8 +100,13 @@ export const navbarRight = css`
             // 头像
             img {
               border-radius: 25px;
-              height: 32px;
+              height: 36px; // 增加高度
-              max-height: 32px;
+              max-height: 36px; // 增加最大高度
+              width: 36px; // 增加宽度
+              transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+              &:hover {
+                transform: scale(1.05); // 轻微放大效果
+              }
             }
           }
         }
@@ -114,6 +134,11 @@ export const navbarRight = css`
           font-weight: 600;
           top: -15px;
           left: 11px;
+          min-width: 18px; // 设置最小宽度
+          height: 18px; // 设置高度
+          display: flex; // 使用弹性布局
+          align-items: center; // 垂直居中
+          justify-content: center; // 水平居中
         }
       }
     }
@@ -121,6 +146,8 @@ export const navbarRight = css`
     .navbar-right .user-menu {
       width: ${fallbackVar(customThemeVars.userMenuWidth, "192px")};
       max-width: 320px;
+      border-radius: 12px; // 增加圆角
+      box-shadow: ${themeVars.github.shadow.floating.small}; // 增强阴影
       > .header {
         font-size: 14px;
         font-weight: 400;
@@ -145,6 +172,26 @@ export const navbarRight = css`
       display: grid;
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    #navbar {
+      padding: 0px 12px; // 调整内边距
+      min-height: 56px; // 调整最小高度
+    }
+    
+    #navbar .navbar-left > .item {
+      padding: 4px 6px; // 调整内边距
+      min-height: 16px; // 调整最小高度
+    }
+    
+    #navbar .navbar-right:has(.user-menu) > .item:not(:last-child) {
+      height: 32px; // 调整高度
+      min-width: 32px; // 调整最小宽度
+      min-height: 32px; // 调整最小高度
+      padding: 0 8px; // 调整内边距
+    }
+  }
 `;
 
 // 二级导航栏
@@ -155,7 +202,14 @@ export const secondaryNav = css`
     > .ui.secondary.stackable.menu {
       gap: 0px;
       min-height: 48px;
+      padding: 8px 0; // 增加内边距
+      border-radius: 12px; // 增加圆角
+      background-color: ${themeVars.color.box.header}; // 添加背景色
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
       > .item {
+        padding: 0 16px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         > .ui.dropdown > .text {
           display: inline-flex;
           align-items: center;
@@ -164,10 +218,31 @@ export const secondaryNav = css`
             margin-right: 4px;
           }
         }
+        &:hover {
+          background-color: ${themeVars.color.hover.self};
+          transform: translateY(-1px); // 轻微上移效果
+        }
+        &.active {
+          background-color: ${themeVars.color.active};
+          font-weight: 600;
+        }
       }
       > .right.menu {
         gap: 4px;
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .page-content > :first-child.secondary-nav > .ui.secondary.stackable.menu {
+      flex-wrap: wrap; // 允许换行
+      min-height: auto; // 自适应高度
+      padding: 8px; // 调整内边距
+      > .item {
+        padding: 8px 12px; // 调整内边距
+        margin: 4px; // 增加边距
+      }
+    }
+  }
 `;

styles/components/repo.ts

@@ -1,11 +1,20 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 // 仓库头信息
 export const repoHeader = css`
   .page-content.repository .repo-header {
     // 点星/关注/克隆/RSS 按钮
     .ui.compact.button {
-      padding: 3px 12px;
+      padding: 6px 16px; // 增加内边距
+      border-radius: 8px; // 增加圆角
+      font-weight: 500; // 增加字体粗细
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        transform: translateY(-1px); // 轻微上移效果
+      }
+      &:active {
+        animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
+      }
     }
     // 仓库名称
     .flex-item {
@@ -17,15 +26,18 @@ export const repoHeader = css`
           display: flex;
           align-items: center;
           color: ${themeVars.color.text.self};
-          font-size: 16px;
+          font-size: 20px; // 增加字体大小
+          font-weight: 600; // 增加字体粗细
           text-decoration: none !important;
           min-width: 3ch;
-          padding: 4px 6px;
+          padding: 8px 12px; // 增加内边距
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           margin-top: 0.5rem;
           margin-bottom: 0.5rem;
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateX(2px); // 轻微右移效果
           }
           &.muted:not(.tw-font-normal) {
             font-weight: 600;
@@ -45,20 +57,34 @@ export const repoMenu = css`
   .page-content.repository {
     .repository-summary .repository-menu {
       background-color: ${themeVars.color.box.header};
+      border-radius: 12px; // 增加圆角
+      padding: 8px; // 增加内边距
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
       .item {
         color: ${themeVars.color.text.light.num1};
-        height: 31px; // 文件列表下与右侧输入框对齐
+        height: 36px; // 增加高度
+        padding: 0 16px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        font-weight: 500; // 增加字体粗细
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         b {
           color: ${themeVars.color.text.self};
-          margin: 0 2px;
+          margin: 0 4px; // 增加边距
         }
         &.active {
           background-color: ${themeVars.color.active};
           color: ${themeVars.color.text.self};
-          font-weight: 500;
+          font-weight: 600; // 增加字体粗细
           svg {
             color: ${themeVars.color.text.light.num1};
           }
+          &:hover {
+            transform: translateY(-1px); // 轻微上移效果
+          }
+        }
+        &:hover:not(.active) {
+          background-color: ${themeVars.github.control.transparent.bgColor.hover};
+          transform: translateY(-1px); // 轻微上移效果
         }
       }
     }
@@ -74,12 +100,14 @@ export const repoTopic = css`
     border-radius: 25px;
     font-size: 12px;
     font-weight: 500;
-    padding: 5px 10px;
+    padding: 6px 12px; // 增加内边距
     background-color: ${themeVars.github.bgColor.accent.muted};
     color: ${themeVars.github.fgColor.accent};
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:hover {
       background-color: ${themeVars.github.bgColor.accent.emphasis};
       color: ${themeVars.color.white};
+      transform: translateY(-1px); // 轻微上移效果
     }
   }
 `;
@@ -88,5 +116,11 @@ export const repoTopic = css`
 export const closedIssueTableCell = css`
   .stats-table .table-cell.tw-bg-red[href="#closed-issues"] {
     background-color: ${themeVars.color.purple.self} !important;
+    border-radius: 8px; // 增加圆角
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+    &:hover {
+      opacity: 0.9; // 悬停时降低不透明度
+      transform: translateY(-1px); // 轻微上移效果
+    }
   }
 `;

styles/public/animation.ts

@@ -24,4 +24,143 @@ export const keyframe = css`
       transform: translateY(0);
     }
   }
+  
+  // 添加更多动画效果
+  // 淡入动画
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  // 缩放进入动画
+  @keyframes scale-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  
+  // 缩放退出动画
+  @keyframes scale-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+  
+  // 从左侧滑入动画
+  @keyframes slide-in-from-left {
+    0% {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  // 从右侧滑入动画
+  @keyframes slide-in-from-right {
+    0% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  // 从顶部滑入动画
+  @keyframes slide-in-from-top {
+    0% {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  // 从底部滑入动画
+  @keyframes slide-in-from-bottom {
+    0% {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  // 脉冲动画
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+  
+  // 脉冲点击动画
+  @keyframes pulse-click {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(0.95);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  
+  // 弹跳动画
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+  
+  // 旋转动画
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+  // 摆动动画
+  @keyframes swing {
+    0%, 100% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(5deg);
+    }
+    75% {
+      transform: rotate(-5deg);
+    }
+  }
 `;

styles/public/button.ts

@@ -5,12 +5,15 @@ export const primaryStyle = {
   backgroundColor: themeVars.github.button.primary.bgColor.rest,
   borderColor: themeVars.github.button.primary.borderColor.rest,
   boxShadow: themeVars.github.shadow.resting.small,
+  borderRadius: "8px", // 增加圆角
 };
 
 export const primaryHoverStyle = {
   color: themeVars.github.button.primary.fgColor.rest,
   backgroundColor: themeVars.github.button.primary.bgColor.hover,
   borderColor: themeVars.github.button.primary.borderColor.hover,
+  transform: "translateY(-1px)", // 添加轻微的上移效果
+  boxShadow: `0 4px 12px rgba(0, 0, 0, 0.1), ${themeVars.github.shadow.resting.small}`, // 增强阴影
 };
 
 // 普通按钮和主色调按钮
@@ -19,9 +22,15 @@ export const baseButton = css`
     min-height: 30px;
     font-weight: 500;
     padding: 9px 16px;
+    border-radius: 8px; // 增加圆角
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &.ui {
       gap: 8px;
     }
+    // 添加点击效果
+    &:active {
+      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
   }
   .ui.button:not(.primary):not(.red) svg {
     color: ${themeVars.color.text.light.num1};
@@ -38,6 +47,9 @@ export const baseButton = css`
       &:hover {
         ${primaryHoverStyle}
       }
+      &:active {
+        transform: translateY(0); // 点击时回到原位
+      }
     }
     // 按钮组整体有阴影
     &.buttons {
@@ -55,18 +67,32 @@ export const baseButton = css`
     color: ${themeVars.color.text.self};
     border-color: ${themeVars.color.light.border};
     box-shadow: none;
+    border-radius: 8px; // 增加圆角
     &:hover {
       background-color: ${themeVars.color.hover.self};
       color: ${themeVars.color.text.self};
       border-color: ${themeVars.color.light.border};
+      transform: translateY(-1px); // 添加轻微的上移效果
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
+    }
+    &:active {
+      transform: translateY(0); // 点击时回到原位
+      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
     }
   }
   /* 普通按钮边框色不变 */
   .ui.basic.button,
   /* 仓库点星等数字标签按钮边框色不变 */
   .ui.labeled.button > .label {
+    border-radius: 8px; // 增加圆角
     &:hover {
       border-color: ${themeVars.color.light.border};
+      transform: translateY(-1px); // 添加轻微的上移效果
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
+    }
+    &:active {
+      transform: translateY(0); // 点击时回到原位
+      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
     }
   }
 
@@ -78,6 +104,7 @@ export const baseButton = css`
   .ui.basic.buttons .active.button:hover,
   .ui.basic.active.button:hover {
     background-color: ${themeVars.github.button.default.bgColor.active};
+    animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
   }
 `;
 
@@ -90,12 +117,19 @@ export const redButton = css`
     background-color: ${themeVars.github.button.danger.bgColor.rest};
     /* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致 */
     border-color: ${themeVars.color.light.border};
+    border-radius: 8px; // 增加圆角
 
     &:hover {
       color: ${themeVars.github.button.danger.fgColor.hover};
       background-color: ${themeVars.github.button.danger.bgColor.hover};
       border-color: ${themeVars.github.button.danger.borderColor.hover};
       box-shadow: ${themeVars.github.shadow.resting.small};
+      transform: translateY(-1px); // 添加轻微的上移效果
+    }
+    
+    &:active {
+      transform: translateY(0); // 点击时回到原位
+      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
     }
   }
 `;
@@ -107,10 +141,12 @@ export const fixButtonHeight = css`
   .ui.ui.ui.ui.small.button {
     min-height: 26px;
     height: 32px;
+    border-radius: 6px; // 小按钮使用稍小的圆角
   }
   // 修复仓库页仓库操作按钮高度对齐和修正
   .repo-button-row .ui.button {
     min-height: 32px;
+    border-radius: 8px; // 保持一致的圆角
   }
   // 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
   .repo-header {
@@ -118,11 +154,13 @@ export const fixButtonHeight = css`
     .ui.labeled.button > .label {
       height: 28px;
       min-height: 28px;
+      border-radius: 6px; // 小按钮使用稍小的圆角
     }
   }
   .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,
   .ui.ui.ui.ui.tiny.button {
     min-height: 20px;
+    border-radius: 4px; // 微型按钮使用更小的圆角
   }
 `;
 
@@ -135,5 +173,6 @@ export const fixButton = css`
   .ui.button.code-copy {
     padding: 4px 6px;
     min-height: 28px;
+    border-radius: 6px; // 保持一致的圆角
   }
 `;

styles/public/dropdown.ts

@@ -1,6 +1,6 @@
 import { animationDown, animationUp } from "src/core/theme";
 import { fallbackVar } from "src/functions";
-import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
+import { css, customThemeVars, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
 export const dropdown = css`
@@ -17,9 +17,10 @@ export const dropdown = css`
       > .item:not(.tw-hidden) {
         display: flex !important;
         align-items: center;
-        padding: 6px 8px !important;
+        padding: 8px 12px !important; // 增加内边距
-        border-radius: ${otherThemeVars.border.radius} !important;
+        border-radius: 8px !important; // 增加圆角
         gap: 4px;
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:not(.emoji) {
           margin: 0 8px;
         }
@@ -33,6 +34,7 @@ export const dropdown = css`
         }
         &:hover {
           background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
+          transform: translateX(2px); // 轻微右移效果
         }
         &.selected {
           background-color: ${themeVars.color.active} !important;
@@ -146,16 +148,19 @@ export const selectionDropdown = css`
   .ui.selection.dropdown.active:not(.search):not(.ellipsis-text-items) {
     background-color: ${themeVars.color.button};
     border-color: ${themeVars.color.light.border};
-    border-radius: ${otherThemeVars.border.radius};
+    border-radius: 8px; // 增加圆角
     padding: 8px 16px;
     min-height: 32px;
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:focus {
       background: ${themeVars.color.button};
       border-color: ${themeVars.color.light.border};
+      box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
     }
     &:hover {
       background: ${themeVars.color.hover.self};
-      border-color: ${themeVars.color.light.border};
+      border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
+      transform: translateY(-1px); // 轻微上移效果
     }
     // 悬停提供伪元素
     .item:hover:after {
@@ -176,34 +181,41 @@ export const selectionDropdown = css`
   // 不实现伪元素, 因为 .item 设置溢出的元素会被截断
   .ui.selection.dropdown.ellipsis-text-items,
   .ui.selection.dropdown.activeellipsis-text-items {
+    border-radius: 8px; // 增加圆角
     &:focus {
       background: ${themeVars.color.button};
       border-color: ${themeVars.color.light.border};
+      box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
     }
     &:hover {
       background: ${themeVars.color.hover.self};
-      border-color: ${themeVars.color.light.border};
+      border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
+      transform: translateY(-1px); // 轻微上移效果
     }
   }
   // 选择输入框效果和输入框 focus 效果一样
   .ui.selection.dropdown.active.search {
     background: ${themeVars.color.body};
     // 向内部添加一个 1px 的边框
-    box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
+    box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
     outline: none;
+    border-radius: 8px; // 增加圆角
   }
   // 覆盖选择输入框向上弹出时的 hover 效果, 原阴影会覆盖加厚的边框线
   .ui.selection.dropdown.active.search.upward:hover {
-    box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
+    box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
   }
   // 由于之前的排除导致样式优先级变高, 小按钮去除圆角
   .ui.action.input > .dropdown.small:not(:first-child) {
-    border-radius: 0;
+    border-radius: 0 8px 8px 0; // 右侧圆角
+  }
+  .ui.action.input > .dropdown.small:first-child {
+    border-radius: 8px 0 0 8px; // 左侧圆角
   }
   // 排除一些小按钮, 例如软件包类型, 通常相邻有元素
   .ui.selection.dropdown.active:not(.small) {
-    border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
+    border-bottom-left-radius: 8px !important;
-    border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
+    border-bottom-right-radius: 8px !important;
   }
   // 修复因为上面的排除导致的圆角问题
   // 具体工单页面下依赖菜单选择框
@@ -215,8 +227,10 @@ export const selectionDropdown = css`
   // 修复选择框的下拉菜单向上显示时的样式问题
   .ui.upward.selection.dropdown.visible:not(.small),
   .ui.active.upward.selection.dropdown:not(.small) {
-    border-top-left-radius: ${otherThemeVars.border.radius} !important;
+    border-top-left-radius: 8px !important;
-    border-top-right-radius: ${otherThemeVars.border.radius} !important;
+    border-top-right-radius: 8px !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
   }
   // 工单标签菜单中的标签换行和颜色
   // 标签页面的标签选择框
@@ -259,13 +273,17 @@ export const emojiDropdown = css`
     gap: 4px;
     padding: 4px;
     min-width: auto;
+    border-radius: 12px !important; // 增加圆角
     > .item.emoji {
       font-size: 14px;
       min-height: 32px;
       height: 32px;
       margin: 0px;
+      border-radius: 8px; // 增加圆角
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       &:hover {
         background-color: ${themeVars.github.bgColor.accent.emphasis} !important;
+        transform: scale(1.1); // 轻微放大效果
       }
     }
   }

styles/public/input.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 export const input = css`
   input,
@@ -20,23 +20,45 @@ export const input = css`
   .ui.form input[type="time"],
   .ui.form input[type="url"] {
     padding: 8px 12px;
+    border-radius: 8px; // 增加圆角
+    border: 1px solid ${themeVars.color.light.border}; // 默认边框
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:focus,
     &:focus-visible {
       background: ${themeVars.color.body} !important;
-      border-radius: ${otherThemeVars.border.radius};
+      border-radius: 8px; // 保持圆角
       border-color: ${themeVars.github.borderColor.accent.emphasis};
       // 向内部添加一个 1px 的边框
-      box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
+      box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 3px rgba(253, 224, 71, 0.2); // 增强焦点效果
       outline: none;
+      transform: translateY(-1px); // 轻微上移效果
+    }
+    &:hover:not(:focus) {
+      border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加轻微阴影
     }
   }
 
   .ui.input {
     height: 32px;
+    border-radius: 8px; // 增加圆角
   }
   // 由于输入框高度, 需要输入框在表单中垂直居中
   // 管理员页面仓库搜索表单
   .ui.form#repo-search-form {
     align-items: center;
   }
+  
+  // 增强表单元素的整体样式
+  .ui.form {
+    .field {
+      margin-bottom: 16px; // 增加字段间距
+    }
+    
+    label {
+      font-weight: 500; // 增加标签字体粗细
+      margin-bottom: 6px; // 增加标签与输入框间距
+      display: block;
+    }
+  }
 `;

styles/public/label.ts

@@ -8,6 +8,9 @@ export const label = css`
     &.ui.ui.ui {
       &.label {
         border-radius: 25px;
+        padding: 5px 12px; // 增加内边距
+        font-weight: 500; // 增加字体粗细
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         // 多个标签的组合标签的圆角修复
         &.scope-parent {
           .scope-left {
@@ -27,42 +30,75 @@ export const label = css`
           background-color: unset;
           border: 1px solid ${themeVars.color.primary.self};
           color: ${themeVars.color.primary.self};
+          &:hover {
+            background-color: ${themeVars.color.primary.dark.num1}; // 悬停时添加背景色
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
         /* 红色标签 */
         &.red {
           background-color: unset;
           border: 1px solid ${themeVars.github.borderColor.done.emphasis};
           color: ${themeVars.color.purple.self};
+          &:hover {
+            background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
         /* 橙色标签 */
         &.orange {
           background-color: unset;
           border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
           color: ${themeVars.color.yellow.self};
+          &:hover {
+            background-color: ${themeVars.color.yellow.dark.num1}; // 悬停时添加背景色
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
         /* 黄色标签 */
         &.yellow {
           background-color: unset;
           border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
           color: ${themeVars.color.orange.self};
+          &:hover {
+            background-color: ${themeVars.color.orange.dark.num1}; // 悬停时添加背景色
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
         /* 黄绿色标签 */
         &.olive {
           background-color: unset;
           border: 1px solid ${themeVars.color.olive.self};
           color: ${themeVars.color.olive.self};
+          &:hover {
+            background-color: ${themeVars.color.olive.dark.num1}; // 悬停时添加背景色
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
         /* 绿色标签 */
         &.green {
           background-color: unset;
           border: 1px solid ${themeVars.github.borderColor.success.emphasis};
           color: ${themeVars.color.green.self};
+          &:hover {
+            background-color: ${themeVars.color.green.dark.num1}; // 悬停时添加背景色
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
         /* 紫色标签 */
         &.purple {
           background-color: unset;
           border: 1px solid ${themeVars.github.borderColor.done.emphasis};
           color: ${themeVars.color.purple.self};
+          &:hover {
+            background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色
+            transform: translateY(-1px); // 轻微上移效果
+          }
+        }
+        // 添加悬停效果
+        &:hover:not(.primary):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.purple) {
+          background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色
+          transform: translateY(-1px); // 轻微上移效果
         }
       }
     }
@@ -84,10 +120,14 @@ export const shaLabel = css`
     color: ${themeVars.color.text.light.num1};
     font-size: 12px;
     font-weight: 500;
+    padding: 4px 8px; // 增加内边距
     // 仪表盘页的提交 SHA 标签居中对齐
     margin-top: 2px;
+    border-radius: 25px; // 增加圆角
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:hover {
       background-color: ${themeVars.color.label.hoverBg};
+      transform: translateY(-1px); // 轻微上移效果
     }
     // 验证提交 SHA 标签
     &.commit-is-signed {
@@ -95,22 +135,26 @@ export const shaLabel = css`
       background-color: unset !important;
       &:hover {
         background-color: ${themeVars.color.label.hoverBg} !important;
+        transform: translateY(-1px); // 轻微上移效果
       }
       span.ui.label.commit-is-signed {
         padding: 3px 5px;
         margin-left: 5px;
+        border-radius: 25px; // 增加圆角
       }
     }
   }
 
   // 验证提交附带的图标
   span.ui.label.commit-is-signed {
+    border-radius: 25px; // 增加圆角
     // 验证信任
     &.sign-trusted {
       border: 1.5px solid ${themeVars.color.green.badge.self} !important;
       color: ${themeVars.color.green.badge.self} !important;
       &:hover {
-        background-color: ${themeVars.color.green.badge.hover.bg} !important;
+        background-color: ${themeVars.color.green.badge.bg} !important;
+        transform: translateY(-1px); // 轻微上移效果
       }
     }
     // 验证未信任
@@ -118,7 +162,8 @@ export const shaLabel = css`
       border: 1.5px solid ${themeVars.color.yellow.badge.self} !important;
       color: ${themeVars.color.yellow.badge.self} !important;
       &:hover {
-        background-color: ${themeVars.color.yellow.badge.hover.bg} !important;
+        background-color: ${themeVars.color.yellow.badge.bg} !important;
+        transform: translateY(-1px); // 轻微上移效果
       }
     }
     // 验证未匹配
@@ -126,7 +171,8 @@ export const shaLabel = css`
       border: 1.5px solid ${themeVars.color.orange.badge.self} !important;
       color: ${themeVars.color.orange.badge.self} !important;
       &:hover {
-        background-color: ${themeVars.color.orange.badge.hover.bg} !important;
+        background-color: ${themeVars.color.orange.badge.bg} !important;
+        transform: translateY(-1px); // 轻微上移效果
       }
     }
     // 验证警告
@@ -134,7 +180,8 @@ export const shaLabel = css`
       border: 1.5px solid ${themeVars.color.red.badge.self} !important;
       color: ${themeVars.color.red.badge.self} !important;
       &:hover {
-        background-color: ${themeVars.color.red.badge.hover.bg} !important;
+        background-color: ${themeVars.color.red.badge.bg} !important;
+        transform: translateY(-1px); // 轻微上移效果
       }
     }
   }
@@ -147,12 +194,26 @@ export const taskStatusLabel = css`
       color: ${themeVars.color.success.text};
       border: 1px solid ${themeVars.color.success.border};
       background: ${themeVars.color.success.bg};
+      border-radius: 25px; // 增加圆角
+      padding: 5px 12px; // 增加内边距
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        background: ${themeVars.color.success.bg}; // 悬停时改变背景色
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
 
     &failure {
       color: ${themeVars.color.error.text};
       border: 1px solid ${themeVars.color.error.border};
       background: ${themeVars.color.error.bg.self};
+      border-radius: 25px; // 增加圆角
+      padding: 5px 12px; // 增加内边距
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        background: ${themeVars.color.error.bg.self}; // 悬停时改变背景色
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
 
     &running,
@@ -160,6 +221,13 @@ export const taskStatusLabel = css`
       color: ${themeVars.color.info.text};
       border: 1px solid ${themeVars.color.info.border};
       background: ${themeVars.color.info.bg};
+      border-radius: 25px; // 增加圆角
+      padding: 5px 12px; // 增加内边距
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        background: ${themeVars.color.info.bg}; // 悬停时改变背景色
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
 
     &cancelled,
@@ -167,6 +235,13 @@ export const taskStatusLabel = css`
       color: ${themeVars.color.warning.text};
       border: 1px solid ${themeVars.color.warning.border};
       background: ${themeVars.color.warning.bg};
+      border-radius: 25px; // 增加圆角
+      padding: 5px 12px; // 增加内边距
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        background: ${themeVars.color.warning.bg}; // 悬停时改变背景色
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
   }
 `;
@@ -181,7 +256,13 @@ export const repoLabel = css`
       color: ${themeVars.color.text.light.num1};
       font-size: 12px;
       font-weight: 500;
-      padding: 3px 6px;
+      padding: 4px 8px; // 增加内边距
+      border-radius: 25px; // 增加圆角
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
   }
   .org-visibility span.ui.basic.label {

styles/public/menu.ts

@@ -24,25 +24,30 @@ export const verticalMenu = css`
       font-weight: 700;
       background: unset;
       margin-bottom: 0.5rem;
+      padding: 8px 12px; // 增加内边距
     }
     // 菜单项被悬停时的背景色, 限制a标签, 避免为子菜单多余渲染
     a.item:hover {
       background: ${themeVars.github.control.transparent.bgColor.hover};
+      border-radius: 8px; // 增加圆角
+      transform: translateX(2px); // 轻微右移效果
     }
     // 菜单项
     .item,
     .item > summary {
       font-size: 1.1rem;
       background: unset;
-      border-radius: ${otherThemeVars.border.radius};
+      border-radius: 8px; // 增加圆角
-      padding: 6px 8px;
+      padding: 8px 12px; // 增加内边距
+      margin: 2px 0; // 增加垂直间距
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     }
     // Actions 菜单的圆角覆盖
     > .item,
     > .active.item {
       &:first-child,
       &:last-child {
-        border-radius: ${otherThemeVars.border.radius};
+        border-radius: 8px; // 增加圆角
       }
     }
     // 去除菜单项的边框线
@@ -53,7 +58,8 @@ export const verticalMenu = css`
     .active.item,
     .active.item > summary {
       font-weight: 600;
-      border-radius: ${otherThemeVars.border.radius};
+      border-radius: 8px; // 增加圆角
+      background-color: ${themeVars.color.active}; // 添加背景色
     }
     // 添加伪元素, 用于指示当前激活的菜单项
     .active.item:after {
@@ -65,16 +71,19 @@ export const verticalMenu = css`
       // 子菜单的标题
       summary:hover {
         background: ${themeVars.github.control.transparent.bgColor.hover};
+        border-radius: 8px; // 增加圆角
       }
       // 子菜单的选项
       .menu .item {
         color: ${themeVars.color.text.self};
+        padding: 6px 12px 6px 24px; // 增加左侧内边距
       }
       // 子菜单的选项被激活
       &:has(.active.item) {
         > summary {
           font-weight: 600;
           background: ${themeVars.color.active};
+          border-radius: 8px; // 增加圆角
           // 收回状态,悬停色
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
@@ -88,6 +97,7 @@ export const verticalMenu = css`
         .active.item {
           background: ${themeVars.color.active};
           font-weight: 400;
+          border-radius: 8px; // 增加圆角
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
           }
@@ -96,6 +106,7 @@ export const verticalMenu = css`
         &[open] {
           > summary {
             background: unset;
+            border-radius: 8px 8px 0 0; // 顶部圆角
             &:hover {
               background: ${themeVars.github.control.transparent.bgColor.hover};
             }
@@ -117,15 +128,20 @@ export const menu = css`
   .ui.menu a.item,
   .ui.secondary.pointing.menu a.item,
   .ui.secondary.menu .dropdown.item {
+    border-radius: 8px; // 增加圆角
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:hover {
       background: ${themeVars.github.control.transparent.bgColor.hover};
+      transform: translateY(-1px); // 轻微上移效果
     }
   }
   // 一些水平小型菜单的颜色更改
   .small-menu-items .item {
     background-color: ${themeVars.color.body} !important;
+    border-radius: 8px; // 增加圆角
     &:hover {
       background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+      transform: translateY(-1px); // 轻微上移效果
     }
   }
   // 一些菜单的悬浮色更改
@@ -134,8 +150,11 @@ export const menu = css`
   .ui.secondary.pointing.menu {
     .item,
     .active.item {
+      border-radius: 8px; // 增加圆角
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       &:hover {
         background: ${themeVars.github.control.transparent.bgColor.hover};
+        transform: translateY(-1px); // 轻微上移效果
       }
     }
   }
@@ -148,9 +167,12 @@ export const secondaryMenu = css`
       padding: 0px 12px;
       height: 32px;
       font-weight: 500;
+      border-radius: 8px; // 增加圆角
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     }
     a.item:hover {
       background: ${themeVars.github.control.transparent.bgColor.hover};
+      transform: translateY(-1px); // 轻微上移效果
     }
   }
   // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
@@ -162,20 +184,26 @@ export const secondaryMenu = css`
         margin-block-start: 0.5rem;
         margin-block-end: 0.5rem;
         margin-bottom: 0.5rem !important;
+        border-radius: 8px; // 增加圆角
       }
     }
     .item {
       font-weight: 400; // 二级导航栏不需要加粗
+      border-radius: 8px; // 增加圆角
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     }
     .active.item,
     .dropdown.item,
     .link.item,
     a.item {
-      border-radius: ${otherThemeVars.border.radius};
+      border-radius: 8px; // 增加圆角
       color: ${themeVars.color.text.self};
       svg {
         margin-right: 8px;
       }
+      &:hover {
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
     .active.item {
       // 取消激活时的下划线, 需要为透明, 保持间距
@@ -184,7 +212,7 @@ export const secondaryMenu = css`
       span:after {
         content: "";
         background: ${themeVars.github.underlineNav.borderColor.active};
-        border-radius: ${otherThemeVars.border.radius};
+        border-radius: 8px; // 增加圆角
         bottom: calc(50% - 1.8rem);
         height: 2px;
         position: absolute;
@@ -210,16 +238,18 @@ export const paginationMenu = css`
     gap: 4px;
     min-height: fit-content;
     .item {
-      border-radius: ${otherThemeVars.border.radius};
+      border-radius: 8px; // 增加圆角
       min-width: 32px;
       min-height: 32px;
       height: 32px;
       justify-content: center;
       // 避免一些 hover 效果调整内容
       padding: 5px 10px !important;
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       &.active {
         background: ${themeVars.github.bgColor.accent.emphasis};
         color: ${themeVars.color.white};
+        transform: translateY(-1px); // 轻微上移效果
       }
       // 设置透明边框线避免 hover 时元素大小变化
       &:not(.active) {
@@ -227,6 +257,7 @@ export const paginationMenu = css`
         &:hover {
           background: unset;
           border-color: ${themeVars.color.secondary.self};
+          transform: translateY(-1px); // 轻微上移效果
         }
       }
       &.navigation {
@@ -240,6 +271,9 @@ export const paginationMenu = css`
         svg {
           margin-top: 2px;
         }
+        &:hover {
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
     }
   }
@@ -262,15 +296,19 @@ export const smallCompactMenu = css`
       gap: 8px;
       height: 32px;
       min-height: 32px !important;
+      padding: 4px; // 增加内边距
+      border-radius: 12px; // 增加圆角
       > .item {
         background: unset !important;
         border: 1px solid ${themeVars.color.hover.self};
-        border-radius: ${otherThemeVars.border.radius};
+        border-radius: 8px; // 增加圆角
         padding: 6px 12px !important;
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &.active {
           background: ${themeVars.color.menu} !important;
           border-color: ${themeVars.color.light.border};
           font-weight: 600;
+          transform: translateY(-1px); // 轻微上移效果
         }
         &::before {
           display: none;
@@ -290,6 +328,7 @@ export const smallCompactMenu = css`
           }
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+            transform: translateY(-1px); // 轻微上移效果
           }
         }
       }

styles/public/modal.ts

@@ -5,15 +5,23 @@ export const modal = css`
   .ui.modal {
     animation: ${animationDown};
     border: 1.5px solid ${themeVars.color.light.border};
+    border-radius: 16px; // 增加圆角
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05); // 增强阴影效果
+    overflow: hidden; // 隐藏溢出内容
 
     > .header {
       background-color: ${themeVars.color.menu};
       border-bottom: 1.5px solid ${themeVars.color.light.border};
+      padding: 20px 24px; // 增加内边距
+      font-size: 1.25rem; // 增加字体大小
+      font-weight: 600; // 增加字体粗细
+      border-radius: 16px 16px 0 0; // 保持顶部圆角
     }
 
     > .content,
     form > .content {
       background-color: ${themeVars.color.menu};
+      padding: 24px; // 增加内边距
     }
 
     > .actions,
@@ -21,9 +29,27 @@ export const modal = css`
     .content + form > .actions {
       background-color: ${themeVars.color.menu};
       border-top: 1.5px solid ${themeVars.color.light.border};
+      padding: 16px 24px; // 增加内边距
+      border-radius: 0 0 16px 16px; // 保持底部圆角
     }
     .actions > .ui.button {
-      padding: 8px 12px;
+      padding: 8px 16px; // 增加内边距
+      border-radius: 8px; // 增加圆角
+      min-height: 36px; // 增加最小高度
+      font-weight: 500; // 增加字体粗细
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        transform: translateY(-1px); // 轻微上移效果
       }
+      &:active {
+        animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
+      }
+    }
+  }
+  
+  // 增强模态框的可访问性
+  .ui.modal:focus {
+    outline: 2px solid ${themeVars.github.borderColor.accent.emphasis};
+    outline-offset: 2px;
   }
 `;

styles/public/other.ts

@@ -5,6 +5,11 @@ export const listHeader = css`
   .list-header {
     align-items: center;
     align-content: center;
+    padding: 16px; // 增加内边距
+    border-radius: 12px; // 增加圆角
+    background-color: ${themeVars.color.box.header}; // 背景色
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
+    margin-bottom: 16px; // 增加底部间距
   }
 `;
 
@@ -14,3 +19,47 @@ export const star = css`
     color: ${themeVars.github.button.star.iconColor} !important;
   }
 `;
+
+// 卡片样式，参考 Nano-Banana-AI-Image-Editor 的设计
+export const card = css`
+  .ui.segment,
+  .ui.attached.segment,
+  .ui.card,
+  .ui.cards > .card {
+    border-radius: 12px; // 增加圆角
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05); // 添加卡片阴影
+    border: 1px solid ${themeVars.color.light.border}; // 添加边框
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+    
+    &:hover {
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 悬停时增强阴影
+      transform: translateY(-2px); // 轻微上移效果
+    }
+  }
+  
+  // 卡片头部
+  .ui.segment > .ui.tabular.menu,
+  .header-wrapper .ui.tabular.menu {
+    border-radius: 12px 12px 0 0; // 保持顶部圆角
+    margin: -1px -1px 0 -1px; // 调整边距
+  }
+`;
+
+// 面板样式
+export const panel = css`
+  .ui.attached.header,
+  .ui.top.attached.header {
+    border-radius: 12px 12px 0 0; // 保持顶部圆角
+    padding: 16px; // 增加内边距
+    font-weight: 600; // 增加字体粗细
+    border: 1px solid ${themeVars.color.light.border}; // 添加边框
+    border-bottom: none; // 移除底部边框
+  }
+  
+  .ui.bottom.attached.header {
+    border-radius: 0 0 12px 12px; // 保持底部圆角
+    padding: 16px; // 增加内边距
+    border: 1px solid ${themeVars.color.light.border}; // 添加边框
+    border-top: none; // 移除顶部边框
+  }
+`;

styles/public/radius.ts

@@ -63,6 +63,14 @@ export const radius = css`
   .ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) {
     border-radius: ${otherThemeVars.border.radius};
   }
+  
+  // 增加特殊组件的圆角
+  .ui.card,
+  .ui.cards > .card,
+  .ui.attached.segment,
+  .ui.tabular.menu {
+    border-radius: 12px; // 卡片使用更大的圆角
+  }
 `;
 
 // 全部圆角替换(原CSS带!important)
@@ -86,6 +94,12 @@ export const radiusImportant = css`
       border-radius: ${otherThemeVars.border.radius} !important;
     }
   }
+  
+  // 卡片圆角
+  .ui.card,
+  .ui.cards > .card {
+    border-radius: 12px !important;
+  }
 `;
 
 // 上半部分圆角替换
@@ -111,6 +125,14 @@ export const radiusTop = css`
   .ui.modal > :first-child:not(.icon):not(.dimmer) {
     border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
   }
+  
+  // 卡片顶部圆角
+  .ui.card > .content:first-child,
+  .ui.cards > .card > .content:first-child,
+  .ui.segment > .ui.tabular.menu,
+  .header-wrapper .ui.tabular.menu {
+    border-radius: 12px 12px 0 0;
+  }
 `;
 
 // 上半部分圆角替换(原CSS带!important)
@@ -123,6 +145,12 @@ export const radiusTopImportant = css`
       border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
     }
   }
+  
+  // 卡片顶部圆角
+  .ui.card > .content:first-child,
+  .ui.cards > .card > .content:first-child {
+    border-radius: 12px 12px 0 0 !important;
+  }
 `;
 
 // 下半部分圆角替换
@@ -159,6 +187,12 @@ export const radiusBottom = css`
   .ui.segment:has(+ .ui.segment:not(.attached)) {
     border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
   }
+  
+  // 卡片底部圆角
+  .ui.card > .content:last-child,
+  .ui.cards > .card > .content:last-child {
+    border-radius: 0 0 12px 12px;
+  }
 `;
 
 // 下半部分圆角替换(原CSS带!important)
@@ -167,6 +201,12 @@ export const radiusBottomImportant = css`
   .ui.active.upward.selection.dropdown {
     border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} !important;
   }
+  
+  // 卡片底部圆角
+  .ui.card > .content:last-child,
+  .ui.cards > .card > .content:last-child {
+    border-radius: 0 0 12px 12px !important;
+  }
 `;
 
 // 左半部分圆角替换
@@ -212,6 +252,12 @@ export const radiusTopLeft = css`
   .ui.table > thead > tr:first-child > th:first-child {
     border-top-left-radius: ${otherThemeVars.border.radius};
   }
+  
+  // 卡片左上圆角
+  .ui.card > .content:first-child,
+  .ui.cards > .card > .content:first-child {
+    border-top-left-radius: 12px;
+  }
 `;
 
 // 右上圆角替换
@@ -220,6 +266,12 @@ export const radiusTopRight = css`
   .ui.category.search > .results .category:first-child .name + .result {
     border-top-right-radius: ${otherThemeVars.border.radius};
   }
+  
+  // 卡片右上圆角
+  .ui.card > .content:first-child,
+  .ui.cards > .card > .content:first-child {
+    border-top-right-radius: 12px;
+  }
 `;
 
 // 左下圆角替换
@@ -232,6 +284,12 @@ export const radiusBottomLeft = css`
       }
     }
   }
+  
+  // 卡片左下圆角
+  .ui.card > .content:last-child,
+  .ui.cards > .card > .content:last-child {
+    border-bottom-left-radius: 12px;
+  }
 `;
 
 // 右下圆角替换
@@ -248,6 +306,12 @@ export const radiusBottomRight = css`
   .ui.category.search > .results .category:last-child .result:last-child {
     border-bottom-right-radius: ${otherThemeVars.border.radius};
   }
+  
+  // 卡片右下圆角
+  .ui.card > .content:last-child,
+  .ui.cards > .card > .content:last-child {
+    border-bottom-right-radius: 12px;
+  }
 `;
 
 // only-child 顺序最后生效
@@ -269,6 +333,12 @@ export const onlyChild = css`
       }
     }
   }
+  
+  // 独立卡片圆角
+  .ui.card:not(.attached),
+  .ui.cards > .card:not(.attached) {
+    border-radius: 12px;
+  }
 `;
 
 // 修复一些情况下圆角边框线被覆盖的问题
@@ -283,6 +353,12 @@ export const fixRadius = css`
     border-bottom-left-radius: ${otherThemeVars.border.radius};
     border-bottom-right-radius: ${otherThemeVars.border.radius};
   }
+  
+  // 修复卡片圆角问题
+  .ui.card,
+  .ui.cards > .card {
+    overflow: hidden;
+  }
 `;
 
 // 修复一些根本无法理解的生效顺序
@@ -291,4 +367,10 @@ export const fixWhyRadius = css`
   .ui.secondary.menu .item {
     border-radius: ${otherThemeVars.border.radius};
   }
+  
+  // 卡片圆角
+  .ui.card,
+  .ui.cards > .card {
+    border-radius: 12px;
+  }
 `;

styles/public/text.ts

@@ -8,6 +8,12 @@ export const red = css`
       color: ${themeVars.github.fgColor.done} !important;
     }
   }
+  
+  // 增强红色文本的视觉效果
+  .text.red {
+    color: ${themeVars.color.red.self} !important;
+    font-weight: 500; // 增加字体粗细
+  }
 `;
 
 export const grey = css`
@@ -16,4 +22,46 @@ export const grey = css`
   .text.grey {
     color: ${themeVars.color.text.light.num1} !important;
   }
+  
+  // 增强灰色文本的视觉效果
+  .text.grey {
+    font-weight: 400; // 设置字体粗细
+  }
+`;
+
+// 增加更多文本颜色样式
+export const textColors = css`
+  .text.blue {
+    color: ${themeVars.color.blue.self} !important;
+    font-weight: 500; // 增加字体粗细
+  }
+  
+  .text.green {
+    color: ${themeVars.color.green.self} !important;
+    font-weight: 500; // 增加字体粗细
+  }
+  
+  .text.yellow {
+    color: ${themeVars.color.yellow.self} !important;
+    font-weight: 500; // 增加字体粗细
+  }
+  
+  .text.purple {
+    color: ${themeVars.color.purple.self} !important;
+    font-weight: 500; // 增加字体粗细
+  }
+  
+  .text.orange {
+    color: ${themeVars.color.orange.self} !important;
+    font-weight: 500; // 增加字体粗细
+  }
+  
+  // 链接文本样式
+  a.text {
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+    &:hover {
+      opacity: 0.8; // 悬停时降低不透明度
+      text-decoration: underline; // 悬停时添加下划线
+    }
+  }
 `;

styles/public/tippy.ts

@@ -1,19 +1,24 @@
 import { animationDown } from "src/core/theme";
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 // 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
 export const tippyBox = css`
   .tippy-box {
     margin-top: -3px;
-    border-radius: ${otherThemeVars.border.radius};
+    border-radius: 12px; // 增加圆角
     overflow: hidden;
     animation: ${animationDown};
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     // 克隆菜单和PR提示框为 default
     &[data-theme="default"],
     // 带标题的提示框 (Runner信息)
     &[data-theme="box-with-header"] {
       border: unset;
       box-shadow: ${themeVars.github.shadow.floating.small};
+      &:hover {
+        transform: translateY(-2px); // 轻微上移效果
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 增强阴影
+      }
     }
     &[data-theme="default"] {
       border-radius: 12px;
@@ -23,6 +28,8 @@ export const tippyBox = css`
         background-color: ${themeVars.color.menu};
         .ui.attached.header {
           background-color: ${themeVars.color.body};
+          padding: 12px 16px; // 增加内边距
+          font-weight: 600; // 增加字体粗细
         }
       }
     }
@@ -31,9 +38,12 @@ export const tippyBox = css`
       .tippy-content {
         padding: 8px;
         .item {
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
+          padding: 6px 12px; // 增加内边距
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateX(2px); // 轻微右移效果
           }
         }
       }
@@ -43,7 +53,10 @@ export const tippyBox = css`
       .tippy-content {
         font-size: 12px;
         font-weight: 400;
-        padding: 4px 8px;
+        padding: 6px 12px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        background-color: ${themeVars.color.menu}; // 添加背景色
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
       }
     }
   }

styles/public/transition.ts

@@ -1,6 +1,6 @@
 import { css } from "src/types/vars";
 
-// 简单的渐变过渡
+// 增强的渐变过渡，参考 Nano-Banana-AI-Image-Editor 的设计
 export const transition = css`
   // 差异对比的代码折叠按钮
   .code-expander-button,
@@ -36,7 +36,7 @@ export const transition = css`
   .ui.selection.active.dropdown:hover .menu,
   .ui.vertical.menu .header.item,
   .ui.secondary.menu .item {
-    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   }
   // Gitea 表单元素原始过渡覆盖
   input,
@@ -56,6 +56,74 @@ export const transition = css`
   .ui.form input[type="text"],
   .ui.form input[type="file"],
   .ui.form input[type="url"] {
-    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  // 添加按钮点击脉冲动画
+  @keyframes pulse-click {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(0.95);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  
+  .pulse-click {
+    animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  // 添加滑入动画
+  @keyframes slide-in-from-top-full {
+    0% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes slide-in-from-right {
+    0% {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes slide-out-to-right {
+    0% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+  
+  .animate-in {
+    animation-duration: 300ms;
+    animation-fill-mode: both;
+  }
+  
+  .slide-in-from-top-full {
+    animation-name: slide-in-from-top-full;
+  }
+  
+  .slide-in-from-right {
+    animation-name: slide-in-from-right;
+  }
+  
+  .slide-out-to-right {
+    animation-name: slide-out-to-right;
   }
 `;

themes/modern-dark.css.ts

@@ -0,0 +1,89 @@
+/**
+ * @author iFlow CLI
+ * 现代化暗色主题，基于 Nano-Banana-AI-Image-Editor 的设计风格
+ */
+
+import { defineTheme } from "src";
+import { github2ThemeColor, type GithubColor } from "src/core/github";
+
+export const modernDarkGithubColors: GithubColor = {
+  isDarkTheme: true,
+  display: {
+    blue: { fgColor: "#4493f8" },
+    brown: { fgColor: "#b69a6d" },
+    cyan: { fgColor: "#07ace4" },
+    indigo: { fgColor: "#9899ec" },
+    lemon: { fgColor: "#fde047" }, // 使用香蕉黄作为柠檬色
+    olive: { fgColor: "#a2a626" },
+    teal: { fgColor: "#1cb0ab" },
+  },
+  diffBlob: {
+    addtionNum: { bgColor: "#3fb9504d" },
+    addtionWord: { bgColor: "#2ea04366" },
+    deletionNum: { bgColor: "#f851494d" },
+    deletionWord: { bgColor: "#f8514966" },
+    hunkNum: { bgColor: { rest: "#0c2d6b" } },
+  },
+  fgColor: {
+    accent: "#fde047", // 使用香蕉黄作为主色调
+    attention: "#d29922",
+    danger: "#f85149",
+    default: "#f0f6fc",
+    disabled: "#656c76",
+    done: "#ab7df8",
+    muted: "#9198a1",
+    neutral: "#9198a1",
+    severe: "#db6d28",
+    sponsors: "#db61a2",
+    success: "#3fb950",
+    black: "#010409",
+    white: "#ffffff",
+    onEmphasis: "#ffffff",
+  },
+  bgColor: {
+    accent: { emphasis: "#fde047", muted: "#fde0471a" }, // 使用香蕉黄作为强调色
+    attention: { muted: "#bb800926" },
+    danger: { muted: "#f851491a" },
+    default: "#0d1117",
+    done: { emphasis: "#8957e5" },
+    emphasis: "#3d444d",
+    muted: "#151b23",
+    neutral: { muted: "#656c7633" },
+    success: { emphasis: "#238636", muted: "#2ea04326" },
+    inset: "#010409",
+  },
+  borderColor: {
+    accent: { emphasis: "#fde047" }, // 使用香蕉黄作为边框强调色
+    attention: { emphasis: "#9e6a03" },
+    default: "#3d444d",
+    done: { emphasis: "#8957e5" },
+    success: { emphasis: "#238636" },
+    muted: "#3d444db3",
+    translucent: "#ffffff26",
+  },
+  button: {
+    primary: {
+      fgColor: { accent: "#0d1117", rest: "#0d1117" }, // 深色文字在黄色背景上
+      bgColor: { rest: "#fde047", hover: "#eab308" }, // 香蕉黄按钮
+    },
+    danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
+    star: { iconColor: "#fde047" }, // 使用香蕉黄作为星标颜色
+  },
+  control: {
+    bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
+    transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
+  },
+  shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
+  overlay: { backdrop: { bgColor: "#21283066" } },
+  underlineNav: { borderColor: { active: "#fde047" } }, // 使用香蕉黄作为导航下划线
+  contribution: {
+    default: {
+      bgColor: { num0: "#151b23", num1: "#033a16", num2: "#196c2e", num3: "#2ea043", num4: "#56d364" },
+      borderColor: { num0: "#0104090d" },
+    },
+  },
+};
+
+export const modernDarkColors = github2ThemeColor(modernDarkGithubColors);
+
+export default defineTheme(modernDarkColors);

themes/modern-light.css.ts

@@ -0,0 +1,90 @@
+/**
+ * @author iFlow CLI
+ * 现代化亮色主题，基于 Nano-Banana-AI-Image-Editor 的设计风格
+ */
+
+import { defineTheme } from "src";
+import { github2ThemeColor, type GithubColor } from "src/core/github";
+
+export const modernLightGithubColors: GithubColor = {
+  isDarkTheme: false,
+  display: {
+    blue: { fgColor: "#0969da" },
+    brown: { fgColor: "#755f43" },
+    cyan: { fgColor: "#006a80" },
+    indigo: { fgColor: "#494edf" },
+    lemon: { fgColor: "#fde047" }, // 使用香蕉黄作为柠檬色
+    olive: { fgColor: "#56682c" },
+    teal: { fgColor: "#106e75" },
+  },
+  diffBlob: {
+    addtionNum: { bgColor: "#aceebb" },
+    addtionWord: { bgColor: "#aceebb" },
+    deletionNum: { bgColor: "#ffcecb" },
+    deletionWord: { bgColor: "#ffcecb" },
+    hunkNum: { bgColor: { rest: "#b6e3ff" } },
+  },
+  fgColor: {
+    accent: "#fde047", // 使用香蕉黄作为主色调
+    attention: "#9a6700",
+    danger: "#d1242f",
+    default: "#1f2328",
+    disabled: "#818b98",
+    done: "#8250df",
+    muted: "#59636e",
+    neutral: "#59636e",
+    severe: "#bc4c00",
+    sponsors: "#bf3989",
+    success: "#1a7f37",
+    black: "#1f2328",
+    white: "#ffffff",
+    onEmphasis: "#ffffff",
+  },
+  bgColor: {
+    accent: { emphasis: "#fde047", muted: "#fffbeb" }, // 使用香蕉黄作为强调色
+    attention: { muted: "#fff8c5" },
+    danger: { muted: "#ffebe9" },
+    default: "#ffffff",
+    done: { emphasis: "#8250df" },
+    emphasis: "#25292e",
+    muted: "#f6f8fa",
+    neutral: { muted: "#818b981f" },
+    success: { emphasis: "#1f883d", muted: "#dafbe1" },
+    inset: "#f6f8fa",
+  },
+  borderColor: {
+    accent: { emphasis: "#fde047" }, // 使用香蕉黄作为边框强调色
+    attention: { emphasis: "#9a6700" },
+    default: "#d1d9e0",
+    done: { emphasis: "#8250df" },
+    success: { emphasis: "#1a7f37" },
+    muted: "#d1d9e0b3",
+    translucent: "#1f232826",
+  },
+  button: {
+    primary: {
+      fgColor: { accent: "#1f2328", rest: "#1f2328" }, // 深色文字在黄色背景上
+      bgColor: { rest: "#fde047", hover: "#eab308" }, // 香蕉黄按钮
+    },
+    danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } },
+    star: { iconColor: "#fde047" }, // 使用香蕉黄作为星标颜色
+  },
+  control: {
+    bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
+    transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
+  },
+  shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
+  overlay: { backdrop: { bgColor: "#c8d1da66" } },
+  underlineNav: { borderColor: { active: "#fde047" }, // 使用香蕉黄作为导航下划线
+ },
+  contribution: {
+    default: {
+      bgColor: { num0: "#eff2f5", num1: "#aceebb", num2: "#4ac26b", num3: "#2da44e", num4: "#116329" },
+      borderColor: { num0: "#1f23280d" },
+    },
+  },
+};
+
+export const modernLightColors = github2ThemeColor(modernLightGithubColors);
+
+export default defineTheme(modernLightColors);