refactor(ui): update Slint UI paths and update CMakeList.txt accordingly

2025-12-27 02:13:18 +08:00 · 2025-12-09 20:17:12 +08:00
parent bea9caa078
commit 592ae1ad23
5 changed files with 1 additions and 1 deletions
--- a/ui/ConnectPage.slint
+++ b/ui/ConnectPage.slint
@@ -0,0 +1,96 @@
+import {
+    VerticalBox,
+    HorizontalBox,
+} from "std-widgets.slint";
+import { Button, LabeledInput } from "Components.slint";
+
+export component ConnectPage inherits Window {
+    width: 1920px;
+    height: 1080px;
+    title: "UNO!";
+    
+    in property <bool> is-connecting;
+
+    callback request-connect(string, string, string);
+
+    // 背景渐变 (从左上角的米色到右下角的淡粉色)
+    Rectangle {
+        background: @linear-gradient(135deg, #fdfbf7 0%, #f3e7e9 100%);
+    }
+
+    // 中心卡片
+    Rectangle {
+        width: 600px;
+        height: 600px; // 根据内容高度调整
+        background: #FDFBF8; // 略微区别于背景的米白色
+        border-radius: 20px;
+
+        // 简单的阴影模拟
+        drop-shadow-blur: 20px;
+        drop-shadow-color: #00000015;
+        drop-shadow-offset-y: 4px;
+
+        VerticalLayout {
+            padding: 40px;
+            spacing: 20px;
+            alignment: center;
+
+            // 标题区域
+            VerticalLayout {
+                spacing: 8px;
+                alignment: center;
+
+                Text {
+                    text: "UNO";
+                    font-size: 96px;
+                    font-weight: 700;
+                    color: #222222;
+                    horizontal-alignment: center;
+                }
+
+                Text {
+                    text: "连接至服务器以开始游戏";
+                    font-size: 14px;
+                    color: #666666;
+                    horizontal-alignment: center;
+                }
+            }
+
+            // 占位间隔
+            Rectangle {
+                height: 10px;
+            }
+
+            // 表单区域
+            address-input := LabeledInput {
+                label-text: "服务器地址";
+                value: "localhost";
+            }
+
+            port-input := LabeledInput {
+                label-text: "服务器端口";
+                value: "10001";
+                input-type: InputType.number;
+            }
+
+            name-input := LabeledInput {
+                label-text: "玩家昵称";
+                value: "Player";
+            }
+
+            // 底部按钮区域 (增加一点顶部间距)
+            HorizontalLayout {
+                padding-top: 10px;
+                alignment: center;
+
+                Button {
+                    text: is-connecting ? "正在连接..." : "连接";
+                    enabled: !is-connecting;
+                    clicked => {
+                        root.request-connect(address-input.value, port-input.value, name-input.value);
+                    }
+                }
+            }
+        }
+    }
+}