-

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;
-            }
-        ]
+        }
     }
 }

ui/demo.slint

@@ -14,12 +14,12 @@ import { ToastContainer, ToastMessage } from "components/toast.slint";
 export component Demo inherits Window {
     title: "Slint Shadcn UI - Task Manager Demo";
     background: Theme.colors.background;
-    
-    // Window size settings - now resizable
+
+    // Window size settings - reduced for lower memory usage
     min-width: 800px;
     min-height: 600px;
-    preferred-width: 1400px;
-    preferred-height: 900px;
+    preferred-width: 1000px;
+    preferred-height: 700px;
     
     // Application state
     in-out property <string> new-task-title: "";
@@ -95,25 +95,27 @@ export component Demo inherits Window {
             Sidebar {
                 items: nav-items;
                 collapsed: sidebar-collapsed;
-                
+
                 item-clicked(index) => {
                     if index == 0 { current-view = "tasks"; }
                     else if index == 1 { current-view = "components"; }
                     else if index == 2 { current-view = "settings"; }
                 }
-                
+
                 toggle-collapsed => {
                     sidebar-collapsed = !sidebar-collapsed;
                 }
             }
-            
-            // Main content area - fixed height
+
+            // Main content area
             Rectangle {
                 background: Theme.colors.background;
-                
+                horizontal-stretch: 1;
+                vertical-stretch: 1;
+
                 Flickable {
                     width: 100%;
-                    height: parent.height;
+                    height: 100%;
                     viewport-height: content-layout.preferred-height;
                     
                     content-layout := VerticalLayout {