feat(ui): add dynamic scaling support

- Introduced `scale` property across components for responsive design.
- Adjusted dimensions and positions dynamically based on scale.
- Enhanced flexibility for varying display resolutions.

ui/ConnectPage.slint

@@ -4,13 +4,15 @@ import {
 } from "std-widgets.slint";
 import { Button, LabeledInput } from "Components.slint";
 
-export component ConnectPage inherits Window {
+export component ConnectPage inherits Rectangle {
+    in property <float> scale;
+    
     in property <bool> is-connecting;
 
     callback request-connect(string, string, string);
 
-    width: 1920px;
-    height: 1080px;
+    width: 100%;
+    height: 100%;
 
     // 背景渐变 (从左上角的米色到右下角的淡粉色)
     Rectangle {
@@ -19,29 +21,29 @@ export component ConnectPage inherits Window {
 
     // 中心卡片
     Rectangle {
-        width: 600px;
-        height: 600px; // 根据内容高度调整
+        width: 600px * scale;
+        height: 600px * scale; // 根据内容高度调整
         background: #FDFBF8; // 略微区别于背景的米白色
-        border-radius: 20px;
+        border-radius: 20px * scale;
 
         // 简单的阴影模拟
-        drop-shadow-blur: 20px;
+        drop-shadow-blur: 20px * scale;
         drop-shadow-color: #00000015;
-        drop-shadow-offset-y: 4px;
+        drop-shadow-offset-y: 4px * scale;
 
         VerticalLayout {
-            padding: 40px;
-            spacing: 20px;
+            padding: 40px * scale;
+            spacing: 20px * scale;
             alignment: center;
 
             // 标题区域
             VerticalLayout {
-                spacing: 8px;
+                spacing: 8px * scale;
                 alignment: center;
 
                 Text {
                     text: "UNO";
-                    font-size: 96px;
+                    font-size: 96px * scale;
                     font-weight: 700;
                     color: #222222;
                     horizontal-alignment: center;
@@ -49,7 +51,7 @@ export component ConnectPage inherits Window {
 
                 Text {
                     text: "连接至服务器以开始游戏";
-                    font-size: 14px;
+                    font-size: 14px * scale;
                     color: #666666;
                     horizontal-alignment: center;
                 }
@@ -57,32 +59,36 @@ export component ConnectPage inherits Window {
 
             // 占位间隔
             Rectangle {
-                height: 10px;
+                height: 10px * scale;
             }
 
             // 表单区域
             address-input := LabeledInput {
+                scale: root.scale;
                 label-text: "服务器地址";
                 value: "localhost";
             }
 
             port-input := LabeledInput {
+                scale: root.scale;
                 label-text: "服务器端口";
                 value: "10001";
                 input-type: InputType.number;
             }
 
             name-input := LabeledInput {
+                scale: root.scale;
                 label-text: "玩家昵称";
                 value: "Player";
             }
 
             // 底部按钮区域 (增加一点顶部间距)
             HorizontalLayout {
-                padding-top: 10px;
+                padding-top: 10px * scale;
                 alignment: center;
 
                 Button {
+                    scale: root.scale;
                     text: is-connecting ? "正在连接..." : "连接";
                     enabled: !is-connecting;
                     clicked => {