-

2026-01-30 12:56:00 +08:00
parent 91f24cb462
commit dcbbda951e
89 changed files with 13486 additions and 72 deletions
--- a/ui/pages/connections.slint
+++ b/ui/pages/connections.slint
@@ -0,0 +1,131 @@
+import { Theme, SpacingSystem, Typography } from "../theme/theme.slint";
+
+export struct Connection {
+    source: string,
+    destination: string,
+    protocol: string,
+    upload: string,
+    download: string,
+    duration: string,
+}
+
+export component ConnectionsPage {
+    in property <[Connection]> connections: [];
+    
+    VerticalLayout {
+        padding: SpacingSystem.spacing.s4;
+        spacing: SpacingSystem.spacing.s4;
+        
+        // Header
+        Text {
+            text: "Connections";
+            color: Theme.colors.foreground;
+            font-size: Typography.sizes.xl;
+            font-weight: Typography.weights.bold;
+        }
+        
+        // Connections List
+        ScrollView {
+            VerticalLayout {
+                spacing: SpacingSystem.spacing.s2;
+                
+                for connection in root.connections: ConnectionItem {
+                    connection-data: connection;
+                }
+            }
+        }
+    }
+}
+
+component ConnectionItem {
+    in property <Connection> connection-data;
+    
+    private property <bool> hovered: false;
+    
+    height: 60px;
+    
+    states [
+        hovered when root.hovered: {
+            container.background: Theme.colors.muted.transparentize(0.5);
+        }
+    ]
+    
+    container := Rectangle {
+        background: transparent;
+        border-radius: SpacingSystem.radius.md;
+        border-width: 1px;
+        border-color: Theme.colors.border;
+        
+        animate background { duration: 150ms; }
+        
+        HorizontalLayout {
+            padding: SpacingSystem.spacing.s3;
+            spacing: SpacingSystem.spacing.s3;
+            alignment: space-between;
+            
+            // Icon
+            Rectangle {
+                width: 40px;
+                height: 40px;
+                border-radius: SpacingSystem.radius.md;
+                background: Theme.colors.primary.transparentize(0.9);
+                
+                Text {
+                    text: "🔗";
+                    font-size: Typography.sizes.lg;
+                    horizontal-alignment: center;
+                    vertical-alignment: center;
+                }
+            }
+            
+            // Connection Info
+            VerticalLayout {
+                spacing: SpacingSystem.spacing.s1;
+                
+                Text {
+                    text: root.connection-data.source + " → " + root.connection-data.destination;
+                    color: Theme.colors.foreground;
+                    font-size: Typography.sizes.sm;
+                    font-weight: Typography.weights.medium;
+                    overflow: elide;
+                }
+                
+                HorizontalLayout {
+                    spacing: SpacingSystem.spacing.s3;
+                    
+                    Text {
+                        text: root.connection-data.protocol;
+                        color: Theme.colors.muted-foreground;
+                        font-size: Typography.sizes.xs;
+                    }
+                    
+                    Text {
+                        text: "↑ " + root.connection-data.upload;
+                        color: Theme.colors.primary;
+                        font-size: Typography.sizes.xs;
+                    }
+                    
+                    Text {
+                        text: "↓ " + root.connection-data.download;
+                        color: Theme.colors.secondary;
+                        font-size: Typography.sizes.xs;
+                    }
+                }
+            }
+            
+            // Duration
+            Text {
+                text: root.connection-data.duration;
+                color: Theme.colmuted-foreground;
+                font-size: Typography.sizes.xs;
+                vertical-alignment: center;
+            }
+        }
+        
+        touch := TouchArea {
+            moved => {
+                root.hovered = self.has-hover;
+            }
+        }
+    }
+}