273 lines
11 KiB
Plaintext
273 lines
11 KiB
Plaintext
// Settings Page - App and Clash settings
|
|
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
|
|
import { Container } from "../layouts/container.slint";
|
|
import { Switch } from "../components/switch.slint";
|
|
import { Button } from "../components/button.slint";
|
|
import { SettingItem } from "../types.slint";
|
|
|
|
export component SettingsPage inherits Rectangle {
|
|
in property <[SettingItem]> app-settings;
|
|
in property <[SettingItem]> clash-settings;
|
|
|
|
callback toggle-setting(string /* key */, bool /* value */);
|
|
callback load-settings();
|
|
|
|
background: Theme.colors.background;
|
|
|
|
VerticalLayout {
|
|
// Fixed header
|
|
Rectangle {
|
|
height: 48px;
|
|
background: Theme.colors.background;
|
|
|
|
HorizontalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
|
|
Text {
|
|
text: "Settings";
|
|
font-size: Typography.sizes.xl;
|
|
font-weight: Typography.weights.bold;
|
|
color: Theme.colors.foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Scrollable content
|
|
Flickable {
|
|
viewport-height: content-layout.preferred-height + SpacingSystem.spacing.s4 * 2;
|
|
|
|
content-layout := VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s4;
|
|
|
|
// App Settings Section
|
|
Container {
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
// Section title
|
|
Text {
|
|
text: "App 设置";
|
|
font-size: Typography.sizes.base;
|
|
font-weight: Typography.weights.semibold;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
// App settings list
|
|
for setting in app-settings: Rectangle {
|
|
height: 48px;
|
|
|
|
HorizontalLayout {
|
|
padding-top: SpacingSystem.spacing.s2;
|
|
padding-bottom: SpacingSystem.spacing.s2;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
alignment: space-between;
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
// Icon
|
|
Text {
|
|
text: "✓";
|
|
font-size: Typography.sizes.base;
|
|
color: Theme.colors.primary;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
// Label
|
|
Text {
|
|
text: setting.label;
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
// Control based on type
|
|
if setting.type == "switch": Switch {
|
|
checked: setting.enabled;
|
|
|
|
toggled => {
|
|
root.toggle-setting(setting.key, self.checked);
|
|
}
|
|
}
|
|
|
|
if setting.type == "button": Button {
|
|
text: setting.value;
|
|
variant: "link";
|
|
size: "sm";
|
|
}
|
|
|
|
if setting.type == "text": Text {
|
|
text: setting.value;
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.muted-foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Clash Settings Section
|
|
Container {
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
// Section title
|
|
Text {
|
|
text: "Clash 设置";
|
|
font-size: Typography.sizes.base;
|
|
font-weight: Typography.weights.semibold;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
// Clash settings list
|
|
for setting in clash-settings: Rectangle {
|
|
height: 48px;
|
|
|
|
HorizontalLayout {
|
|
padding-top: SpacingSystem.spacing.s2;
|
|
padding-bottom: SpacingSystem.spacing.s2;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
alignment: space-between;
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
// Icon
|
|
Text {
|
|
text: "⚙";
|
|
font-size: Typography.sizes.base;
|
|
color: Theme.colors.primary;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
// Label
|
|
Text {
|
|
text: setting.label;
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
// Control based on type
|
|
if setting.type == "switch": Switch {
|
|
checked: setting.enabled;
|
|
|
|
toggled => {
|
|
root.toggle-setting(setting.key, self.checked);
|
|
}
|
|
}
|
|
|
|
if setting.type == "button": Button {
|
|
text: setting.value;
|
|
variant: "link";
|
|
size: "sm";
|
|
}
|
|
|
|
if setting.type == "text": Text {
|
|
text: setting.value;
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.muted-foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Miscellaneous Section
|
|
Container {
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
// Section title
|
|
Text {
|
|
text: "杂项";
|
|
font-size: Typography.sizes.base;
|
|
font-weight: Typography.weights.semibold;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
// Misc items
|
|
Rectangle {
|
|
height: 48px;
|
|
|
|
HorizontalLayout {
|
|
padding-top: SpacingSystem.spacing.s2;
|
|
padding-bottom: SpacingSystem.spacing.s2;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
alignment: space-between;
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
Text {
|
|
text: "📁";
|
|
font-size: Typography.sizes.base;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
Text {
|
|
text: "App 目录";
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
Button {
|
|
text: "打开";
|
|
variant: "link";
|
|
size: "sm";
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
height: 48px;
|
|
|
|
HorizontalLayout {
|
|
padding-top: SpacingSystem.spacing.s2;
|
|
padding-bottom: SpacingSystem.spacing.s2;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
alignment: space-between;
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
Text {
|
|
text: "📋";
|
|
font-size: Typography.sizes.base;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
Text {
|
|
text: "App 版本";
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
Text {
|
|
text: "v1.0.0";
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.muted-foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|