banana v1

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; // 保持一致的圆角
   }
-`;
+`;