-

ui/components/button.slint

@@ -10,7 +10,7 @@ export component Button {
     in property <string> variant: "default"; // default | destructive | outline | secondary | ghost
     in property <string> size: "md"; // sm | md | lg
     in property <bool> disabled: false;
-    
+
     // Callbacks
     callback clicked();
     
@@ -48,42 +48,20 @@ export component Button {
         border-radius: SpacingSystem.radius.md;
         border-width: variant == "outline" ? 1px : 0px;
         border-color: Theme.colors.border;
-        
+
         // Smooth transitions
-        animate background { 
-            duration: Animations.durations.fast; 
-            easing: Animations.ease-in-out; 
+        animate background {
+            duration: Animations.durations.fast;
+            easing: Animations.ease-in-out;
         }
-        
-        // Hover overlay - light mask
-        hover-overlay := Rectangle {
-            background: Colors.transparent;
-            border-radius: SpacingSystem.radius.md;
-            
-            animate background { 
-                duration: Animations.durations.fast; 
-                easing: Animations.ease-in-out; 
-            }
-        }
-        
-        // Press overlay - darker mask
-        press-overlay := Rectangle {
-            background: Colors.transparent;
-            border-radius: SpacingSystem.radius.md;
-            
-            animate background { 
-                duration: 100ms; 
-                easing: Animations.ease-out; 
-            }
-        }
-        
+
         // Content layout
         HorizontalLayout {
             padding-left: btn-padding-x;
             padding-right: btn-padding-x;
             spacing: SpacingSystem.spacing.s2;
             alignment: center;
-            
+
             // Button text
             Text {
                 text: root.text;
@@ -94,32 +72,39 @@ export component Button {
                 horizontal-alignment: center;
             }
         }
-        
+
         // Touch interaction area
         touch := TouchArea {
             enabled: !disabled;
-            
+
             clicked => {
                 root.clicked();
             }
         }
-        
-        // States for visual feedback with color overlays
-        states [
-            pressed when touch.pressed && !disabled: {
-                press-overlay.background: #00000040;  // Dark overlay for press
+
+        // Combined overlay for both hover and press effects
+        overlay := Rectangle {
+            width: 100%;
+            height: 100%;
+            border-radius: SpacingSystem.radius.md;
+
+            // 直接根据状态设置背景色，不使用 states 块
+            background: {
+                if disabled {
+                    Colors.transparent
+                } else if touch.pressed {
+                    #00000030  // 按压时深色
+                } else if touch.has-hover {
+                    #ffffff10  // 悬停时浅色
+                } else {
+                    Colors.transparent
+                }
+            };
+
+            animate background {
+                duration: 200ms;
+                easing: ease-in-out;
             }
-            hovered when touch.has-hover && !disabled && !touch.pressed: {
-                hover-overlay.background: #ffffff15;  // Light overlay for hover
-            }
-            normal when !disabled: {
-                hover-overlay.background: Colors.transparent;
-                press-overlay.background: Colors.transparent;
-            }
-            disabled-state when disabled: {
-                hover-overlay.background: Colors.transparent;
-                press-overlay.background: Colors.transparent;
-            }
-        ]
+        }
     }
 }