381 lines
16 KiB
Plaintext
381 lines
16 KiB
Plaintext
// Home Page - Dashboard with profile info and quick settings
|
|
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
|
|
import { Container } from "../layouts/container.slint";
|
|
import { Badge } from "../components/badge.slint";
|
|
import { Button } from "../components/button.slint";
|
|
import { Profile, SettingItem } from "../types.slint";
|
|
|
|
export component HomePage inherits Rectangle {
|
|
in property <Profile> current-profile;
|
|
in property <[SettingItem]> quick-settings;
|
|
|
|
callback load-home-data();
|
|
callback toggle-setting(string /* key */, bool /* value */);
|
|
|
|
background: Theme.colors.background;
|
|
|
|
VerticalLayout {
|
|
// Fixed header
|
|
Rectangle {
|
|
height: 48px;
|
|
background: Theme.colors.background;
|
|
|
|
HorizontalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
|
|
Text {
|
|
text: "Home";
|
|
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;
|
|
|
|
// Profile Card
|
|
Container {
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s4;
|
|
|
|
// Header with icon and name
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
alignment: space-between;
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
// Icon
|
|
Rectangle {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: Theme.colors.primary;
|
|
border-radius: SpacingSystem.radius.lg;
|
|
|
|
Text {
|
|
text: "☁";
|
|
font-size: 28px;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
// Profile info
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s1;
|
|
|
|
Text {
|
|
text: current-profile.name;
|
|
font-size: Typography.sizes.lg;
|
|
font-weight: Typography.weights.bold;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
|
|
Text {
|
|
text: "🌍";
|
|
font-size: Typography.sizes.xs;
|
|
}
|
|
|
|
Text {
|
|
text: current-profile.type;
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.muted-foreground;
|
|
}
|
|
|
|
Badge {
|
|
text: "Vmess";
|
|
variant: "outline";
|
|
}
|
|
|
|
Badge {
|
|
text: "UDP";
|
|
variant: "outline";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Refresh button
|
|
Button {
|
|
text: "🔄";
|
|
variant: "ghost";
|
|
size: "sm";
|
|
}
|
|
}
|
|
|
|
// Divider
|
|
Rectangle {
|
|
height: 1px;
|
|
background: Theme.colors.border;
|
|
}
|
|
|
|
// Stats grid
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s6;
|
|
|
|
// Usage
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s1;
|
|
horizontal-stretch: 1;
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
|
|
Text {
|
|
text: "☁";
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.muted-foreground;
|
|
}
|
|
|
|
Text {
|
|
text: "已使用 / 总量";
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.muted-foreground;
|
|
}
|
|
}
|
|
|
|
Text {
|
|
text: current-profile.usage;
|
|
font-size: Typography.sizes.sm;
|
|
font-weight: Typography.weights.medium;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
}
|
|
|
|
// Expire date
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s1;
|
|
horizontal-stretch: 1;
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
|
|
Text {
|
|
text: "✓";
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.muted-foreground;
|
|
}
|
|
|
|
Text {
|
|
text: "到期时间";
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.muted-foreground;
|
|
}
|
|
}
|
|
|
|
Text {
|
|
text: current-profile.expire-at;
|
|
font-size: Typography.sizes.sm;
|
|
font-weight: Typography.weights.medium;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
}
|
|
|
|
// Updated date
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s1;
|
|
horizontal-stretch: 1;
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
|
|
Text {
|
|
text: "🕐";
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.muted-foreground;
|
|
}
|
|
|
|
Text {
|
|
text: "更新时间";
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.muted-foreground;
|
|
}
|
|
}
|
|
|
|
Text {
|
|
text: current-profile.updated-at;
|
|
font-size: Typography.sizes.sm;
|
|
font-weight: Typography.weights.medium;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Location Card (placeholder)
|
|
Container {
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
Text {
|
|
text: "位置信息";
|
|
font-size: Typography.sizes.base;
|
|
font-weight: Typography.weights.semibold;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
Text {
|
|
text: "🌍";
|
|
font-size: 32px;
|
|
}
|
|
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s1;
|
|
|
|
Text {
|
|
text: "当前位置: 日本 东京";
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
Text {
|
|
text: "IP: 192.168.1.1";
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.muted-foreground;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Quick Settings Card
|
|
Container {
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
Text {
|
|
text: "快捷设置";
|
|
font-size: Typography.sizes.base;
|
|
font-weight: Typography.weights.semibold;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
// Quick settings grid
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
// System Proxy
|
|
Rectangle {
|
|
horizontal-stretch: 1;
|
|
height: 80px;
|
|
background: Theme.colors.muted;
|
|
border-radius: SpacingSystem.radius.md;
|
|
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s3;
|
|
spacing: SpacingSystem.spacing.s2;
|
|
alignment: center;
|
|
|
|
Text {
|
|
text: "🌐";
|
|
font-size: 24px;
|
|
horizontal-alignment: center;
|
|
}
|
|
|
|
Text {
|
|
text: "系统代理";
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.foreground;
|
|
horizontal-alignment: center;
|
|
}
|
|
}
|
|
|
|
TouchArea {
|
|
clicked => {
|
|
root.toggle-setting("system-proxy", true);
|
|
}
|
|
}
|
|
}
|
|
|
|
// TUN Mode
|
|
Rectangle {
|
|
horizontal-stretch: 1;
|
|
height: 80px;
|
|
background: Theme.colors.muted;
|
|
border-radius: SpacingSystem.radius.md;
|
|
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s3;
|
|
spacing: SpacingSystem.spacing.s2;
|
|
alignment: center;
|
|
|
|
Text {
|
|
text: "🔧";
|
|
font-size: 24px;
|
|
horizontal-alignment: center;
|
|
}
|
|
|
|
Text {
|
|
text: "TUN 模式";
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.foreground;
|
|
horizontal-alignment: center;
|
|
}
|
|
}
|
|
|
|
TouchArea {
|
|
clicked => {
|
|
root.toggle-setting("tun-mode", true);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Allow LAN
|
|
Rectangle {
|
|
horizontal-stretch: 1;
|
|
height: 80px;
|
|
background: Theme.colors.muted;
|
|
border-radius: SpacingSystem.radius.md;
|
|
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s3;
|
|
spacing: SpacingSystem.spacing.s2;
|
|
alignment: center;
|
|
|
|
Text {
|
|
text: "📡";
|
|
font-size: 24px;
|
|
horizontal-alignment: center;
|
|
}
|
|
|
|
Text {
|
|
text: "允许局域网";
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.foreground;
|
|
horizontal-alignment: center;
|
|
}
|
|
}
|
|
|
|
TouchArea {
|
|
clicked => {
|
|
root.toggle-setting("allow-lan", true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|