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

ui/Components.slint

@@ -0,0 +1,65 @@
+import { LineEdit } from "std-widgets.slint";
+
+export component Button inherits Rectangle {
+    in property <string> text;
+    in property <bool> enabled: true;
+
+    callback clicked;
+
+    width: 100px;
+    height: 36px;
+    background: !root.enabled ? #555555               // 禁用状态
+                         : touch.pressed ? #444444    // 按下
+                             : #2C2C2C;               // 默认
+    border-radius: 6px;
+
+    touch := TouchArea {
+        enabled: root.enabled;
+        clicked => {
+            root.clicked()
+        }
+    }
+
+    Text {
+        text: root.text;
+        color: #FFFFFF;
+        font-size: 14px;
+        vertical-alignment: center;
+        horizontal-alignment: center;
+    }
+}
+
+export component LabeledInput inherits VerticalLayout {
+    in property <InputType> input-type: InputType.text;
+
+    in property <string> label-text;
+    in-out property <string> value <=> input.text;
+    in property <string> placeholder;
+
+    spacing: 6px;
+
+    // 标签文本
+    Text {
+        text: root.label-text;
+        font-size: 12px;
+        font-weight: 500;
+        color: #555555;
+    }
+
+    // 输入框背景和实体
+    Rectangle {
+        height: 36px;
+        background: #FFFFFF;
+        border-radius: 6px;
+        border-width: 1px;
+        border-color: input.has-focus ? #888888 : #E0E0E0; // 聚焦时边框变深
+
+        input := LineEdit {
+            width: 100%;
+            height: 100%;
+            font-size: 14px;
+            placeholder-text: root.placeholder;
+            input-type: root.input-type;
+        }
+    }
+}

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

ui/MainWindow.slint

@@ -0,0 +1,33 @@
+import { ConnectPage } from "ConnectPage.slint";
+import { StartPage } from "StartPage.slint";
+
+enum PageType {
+    ConnectPage,
+    StartPage,
+    GamePage
+}
+
+export component MainWindow inherits Window {
+    in property <PageType> active-page: PageType.ConnectPage;
+    in property <bool> is-connecting;
+    in property <bool> is-ready;
+
+    callback request-connect(string, string, string);
+    callback request-start;
+
+    width: 1920px;
+    height: 1080px;
+
+    if root.active-page == PageType.ConnectPage: connect-page := ConnectPage {
+        is-connecting: root.is-connecting;
+        request-connect(server-address, server-port, player-name) => {
+            root.request-connect(server-address, server-port, player-name);
+        }
+    }
+    if root.active-page == PageType.StartPage: start-page := StartPage {
+        is-ready: root.is-ready;
+        request-start => {
+            root.request-start();
+        }
+    }
+}

ui/StartPage.slint

@@ -0,0 +1,75 @@
+import {Button} from "Components.slint";
+
+export component StartPage inherits Window {
+    width: 1920px;
+    height: 1080px;
+    title: "UNO!";
+
+    in property <bool> is-ready;
+
+    callback request-start;
+
+    // 背景渐变 (从左上角的米色到右下角的淡粉色)
+    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;
+            }
+
+            // 底部按钮区域 (增加一点顶部间距)
+            HorizontalLayout {
+                padding-top: 10px;
+                alignment: center;
+
+                Button {
+                    enabled: !is-ready;
+                    text: is-ready ? "已准备" : "准备";
+                    clicked => {
+                        root.request-start();
+                    }
+                }
+            }
+        }
+    }
+}