From 63e87aa3e9d332d1f84b6736a440301b9797318a Mon Sep 17 00:00:00 2001
From: Kieran Kihn <114803508+kierankihn@users.noreply.github.com>
Date: Tue, 9 Dec 2025 20:06:58 +0800
Subject: [PATCH] feat(ui): add reusable `Button` and `LabeledInput` components
 using Slint

---
 src/ui/Components.slint | 65 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/ui/Components.slint

diff --git a/src/ui/Components.slint b/src/ui/Components.slint
new file mode 100644
index 0000000..d376613
--- /dev/null
+++ b/src/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;
+        }
+    }
+}