feat(ui): Phase 2 C3 — Settings 页 + Dialogs + 窗口状态保存
- src/storage.rs: AppState (last_window_width/height) + load/save atomic write 到 %APPDATA%/WindowsGotify/state.json（§18） - ui/settings-page.slint: 5 分组（Connection / Notifications / Startup / Appearance / Advanced），Appearance 实时切主题（System/Light/Dark radio）；Advanced 折叠 - ui/dialogs.slint: AboutDialog + ConfirmDialog（§54） - ui/server-card.slint: 单 server 行（name/url/enabled toggle/edit/remove） - ui/app.slint: settings 页切换、About 导航、theme 联动 - src/lib.rs: load_state → 启动时应用窗口尺寸；ui.window() .on_close_requested 在 OS 关闭前 save_state；wire about/close callbacks - src/error.rs: 加 AppError::Storage(String) 变体 - Cargo.toml: 加 serde + serde_json 避坑： - Slint 1.x 同文件内 export component 必须在引用前定义（sub-components 移到 SettingsPage 上面） - Slint 不支持 padding 两值简写 (padding: 0 16px) → 用 padding-* 四属性 - Slint 不支持 Rectangle 内建 border-color 覆盖 → 命名 card-border - Slint 不支持 alignment: right → 用 spacer + horizontal-stretch: 1 - 修了一处 .slint 文件被 PowerShell Set-Content GBK 损坏的问题（已 通过 write 工具 + UTF-8 no BOM 重写并清理 ui/ 所有 .slint） 验证：cargo build / build --release 都 exit 0，0 warning - debug 27.55 MB, subsystem = WINDOWS_CUI - release 8.10 MB, subsystem = WINDOWS_GUI
This commit is contained in:
+299
-5
@@ -1,6 +1,300 @@
|
||||
// AGENTS.md §10 Settings page.
|
||||
// AGENTS.md §10 / §11 settings page.
|
||||
//
|
||||
// Placeholder for Phase 2 C1. C3 will lay out the five required sections
|
||||
// (Connection / Notifications / Startup / Appearance / Advanced), use the
|
||||
// Appearance section to drive the live `Theme.appearance` switch, and wire
|
||||
// up the actual save pipeline (Phase 5).
|
||||
// C3 lays out the five sections (Connection / Notifications / Startup /
|
||||
// Appearance / Advanced) with controls. The Appearance section is the only
|
||||
// one wired back to the model: the radio selection drives
|
||||
// `MainWindow.theme` via the `appearance-changed` callback. Everything else
|
||||
// is a UI shell — Phase 5 wires it to `AppConfig` + Settings → state.json.
|
||||
//
|
||||
// Sub-components MUST be defined before the components that reference them
|
||||
// in Slint 1.x, so `SettingsToggleRow` / `AppearanceRadio` come first.
|
||||
|
||||
import { SectionLabel } from "./components.slint";
|
||||
import { ServerCard } from "./server-card.slint";
|
||||
|
||||
// ─── Sub-components ────────────────────────────────────────────────
|
||||
|
||||
export component SettingsToggleRow inherits Rectangle {
|
||||
in property <string> label;
|
||||
in property <bool> value: false;
|
||||
in property <bool> enabled: true;
|
||||
callback toggled(bool);
|
||||
|
||||
in property <color> row-bg: #28292d;
|
||||
in property <color> row-border: #3a3b40;
|
||||
in property <color> label-color: #e6e6e6;
|
||||
in property <color> toggle-on: #4ea1ff;
|
||||
in property <color> toggle-off: #6a6a6a;
|
||||
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
background: row-bg;
|
||||
border-color: row-border;
|
||||
border-width: 1px;
|
||||
opacity: enabled ? 1.0 : 0.5;
|
||||
|
||||
HorizontalLayout {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
alignment: center;
|
||||
|
||||
Text {
|
||||
text: label;
|
||||
color: label-color;
|
||||
font-size: 13px;
|
||||
horizontal-stretch: 1;
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background: value ? toggle-on : toggle-off;
|
||||
y: parent.height / 2 - self.height / 2;
|
||||
|
||||
Rectangle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
x: value ? parent.width - self.width - 2px : 2px;
|
||||
y: (parent.height - self.height) / 2;
|
||||
}
|
||||
TouchArea {
|
||||
enabled: root.enabled;
|
||||
clicked => {
|
||||
root.toggled(!root.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component AppearanceRadio inherits Rectangle {
|
||||
in property <string> label;
|
||||
in property <string> description;
|
||||
in property <bool> selected: false;
|
||||
callback chosen();
|
||||
|
||||
in property <color> row-bg: #28292d;
|
||||
in property <color> row-border: #3a3b40;
|
||||
in property <color> row-border-selected: #4ea1ff;
|
||||
in property <color> label-color: #e6e6e6;
|
||||
in property <color> hint-color: #6a6a6a;
|
||||
|
||||
width: 160px;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
background: row-bg;
|
||||
border-color: selected ? row-border-selected : row-border;
|
||||
border-width: selected ? 2px : 1px;
|
||||
|
||||
VerticalLayout {
|
||||
padding: 12px;
|
||||
spacing: 2px;
|
||||
|
||||
Text {
|
||||
text: label;
|
||||
color: label-color;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
Text {
|
||||
text: description;
|
||||
color: hint-color;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
TouchArea {
|
||||
clicked => {
|
||||
root.chosen();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Main page ─────────────────────────────────────────────────────
|
||||
|
||||
export component SettingsPage inherits Rectangle {
|
||||
// Appearance (live wired)
|
||||
in-out property <int> appearance-index: 2;
|
||||
callback appearance-changed(int);
|
||||
|
||||
// Notifications (UI shell)
|
||||
in-out property <bool> desktop-notify: true;
|
||||
in-out property <bool> sound: true;
|
||||
in-out property <bool> notify-high: true;
|
||||
in-out property <bool> notify-max: true;
|
||||
|
||||
// Startup (UI shell)
|
||||
in-out property <bool> start-with-windows: false;
|
||||
in-out property <bool> start-minimized: false;
|
||||
in-out property <bool> close-to-tray: true;
|
||||
|
||||
// Advanced (collapsed by default per §10)
|
||||
in-out property <bool> advanced-expanded: false;
|
||||
|
||||
// Tokens
|
||||
in property <color> divider-color: #3a3b40;
|
||||
in property <color> hint-color: #6a6a6a;
|
||||
|
||||
background: transparent;
|
||||
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 24px;
|
||||
|
||||
// CONNECTION
|
||||
VerticalLayout {
|
||||
spacing: 8px;
|
||||
SectionLabel { label: "CONNECTION"; text-color: hint-color; }
|
||||
ServerCard {
|
||||
server-name: "Home";
|
||||
server-url: "https://gotify.example.com";
|
||||
enabled: true;
|
||||
is-current: true;
|
||||
}
|
||||
ServerCard {
|
||||
server-name: "NAS";
|
||||
server-url: "http://192.168.50.103:50334";
|
||||
enabled: true;
|
||||
is-current: false;
|
||||
}
|
||||
}
|
||||
|
||||
// NOTIFICATIONS
|
||||
VerticalLayout {
|
||||
spacing: 10px;
|
||||
SectionLabel { label: "NOTIFICATIONS"; text-color: hint-color; }
|
||||
SettingsToggleRow {
|
||||
label: "Enable desktop notification";
|
||||
value: root.desktop-notify;
|
||||
}
|
||||
SettingsToggleRow {
|
||||
label: "Play sound";
|
||||
value: root.sound;
|
||||
enabled: root.desktop-notify;
|
||||
}
|
||||
SettingsToggleRow {
|
||||
label: "Notify on High priority";
|
||||
value: root.notify-high;
|
||||
enabled: root.desktop-notify;
|
||||
}
|
||||
SettingsToggleRow {
|
||||
label: "Notify on Max priority";
|
||||
value: root.notify-max;
|
||||
enabled: root.desktop-notify;
|
||||
}
|
||||
}
|
||||
|
||||
// STARTUP
|
||||
VerticalLayout {
|
||||
spacing: 10px;
|
||||
SectionLabel { label: "STARTUP"; text-color: hint-color; }
|
||||
SettingsToggleRow {
|
||||
label: "Start with Windows";
|
||||
value: root.start-with-windows;
|
||||
}
|
||||
SettingsToggleRow {
|
||||
label: "Start minimized to tray";
|
||||
value: root.start-minimized;
|
||||
}
|
||||
SettingsToggleRow {
|
||||
label: "Close button minimizes to tray";
|
||||
value: root.close-to-tray;
|
||||
}
|
||||
}
|
||||
|
||||
// APPEARANCE (live wired)
|
||||
VerticalLayout {
|
||||
spacing: 10px;
|
||||
SectionLabel { label: "APPEARANCE"; text-color: hint-color; }
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 12px;
|
||||
|
||||
AppearanceRadio {
|
||||
label: "System";
|
||||
description: "Follow Windows theme";
|
||||
selected: root.appearance-index == 0;
|
||||
chosen => {
|
||||
root.appearance-index = 0;
|
||||
root.appearance-changed(0);
|
||||
}
|
||||
}
|
||||
AppearanceRadio {
|
||||
label: "Light";
|
||||
description: "Bright neutrals";
|
||||
selected: root.appearance-index == 1;
|
||||
chosen => {
|
||||
root.appearance-index = 1;
|
||||
root.appearance-changed(1);
|
||||
}
|
||||
}
|
||||
AppearanceRadio {
|
||||
label: "Dark";
|
||||
description: "Graphite";
|
||||
selected: root.appearance-index == 2;
|
||||
chosen => {
|
||||
root.appearance-index = 2;
|
||||
root.appearance-changed(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SettingsToggleRow {
|
||||
label: "Compact message density";
|
||||
value: false;
|
||||
enabled: false;
|
||||
}
|
||||
}
|
||||
|
||||
// ADVANCED (collapsed by default per §10)
|
||||
VerticalLayout {
|
||||
spacing: 10px;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 8px;
|
||||
alignment: center;
|
||||
Text {
|
||||
text: advanced-expanded ? "v" : ">";
|
||||
color: hint-color;
|
||||
font-size: 11px;
|
||||
}
|
||||
Text {
|
||||
text: "ADVANCED";
|
||||
color: hint-color;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
TouchArea {
|
||||
clicked => {
|
||||
root.advanced-expanded = !root.advanced-expanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if advanced-expanded: VerticalLayout {
|
||||
spacing: 10px;
|
||||
SettingsToggleRow {
|
||||
label: "Log level: Info (release default)";
|
||||
value: false;
|
||||
enabled: false;
|
||||
}
|
||||
SettingsToggleRow {
|
||||
label: "Clear local state (messages + window size)";
|
||||
value: false;
|
||||
enabled: false;
|
||||
}
|
||||
SettingsToggleRow {
|
||||
label: "Reset settings to defaults";
|
||||
value: false;
|
||||
enabled: false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user