-
This commit is contained in:
967
ui/pages-complete-backup.slint
Normal file
967
ui/pages-complete-backup.slint
Normal file
@@ -0,0 +1,967 @@
|
||||
import { Theme, SpacingSystem, Typography } from "./theme/theme.slint";
|
||||
import { Button } from "./components/button.slint";
|
||||
import { Card } from "./components/card.slint";
|
||||
import { Switch } from "./components/switch.slint";
|
||||
import { Badge } from "./components/badge.slint";
|
||||
import { Progress } from "./components/progress.slint";
|
||||
import { ScrollView } from "std-widgets.slint";
|
||||
|
||||
// Home Page - Redesigned with better UI
|
||||
export component HomePage {
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 20px;
|
||||
|
||||
Text {
|
||||
text: "Home";
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
VerticalLayout {
|
||||
spacing: 20px;
|
||||
|
||||
// Profile Card
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 16px;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 16px;
|
||||
|
||||
Rectangle {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
background: Theme.colors.primary.transparentize(0.9);
|
||||
|
||||
Text {
|
||||
text: "☁";
|
||||
color: Theme.colors.primary;
|
||||
font-size: 28px;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
spacing: 6px;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 10px;
|
||||
|
||||
Text {
|
||||
text: "NanoCloud";
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 8px;
|
||||
|
||||
Text {
|
||||
text: "🌐 Free-Japan1-Ver.7";
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 13px;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
Badge {
|
||||
text: "Vmess";
|
||||
variant: "outline";
|
||||
}
|
||||
|
||||
Badge {
|
||||
text: "UDP";
|
||||
variant: "secondary";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
horizontal-stretch: 1;
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "↻";
|
||||
variant: "ghost";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
background: Theme.colors.border;
|
||||
}
|
||||
|
||||
GridLayout {
|
||||
spacing: 20px;
|
||||
Row {
|
||||
VerticalLayout {
|
||||
spacing: 6px;
|
||||
|
||||
Text {
|
||||
text: "Usage / Total";
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "1.26GB / 100GB";
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Progress {
|
||||
value: 1.26;
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
spacing: 6px;
|
||||
|
||||
Text {
|
||||
text: "Expiry Date";
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "2025-11-11";
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
spacing: 6px;
|
||||
|
||||
Text {
|
||||
text: "Last Update";
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "2025-10-12";
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Location Card
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 16px;
|
||||
|
||||
Text {
|
||||
text: "Location Info";
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 32px;
|
||||
|
||||
VerticalLayout {
|
||||
spacing: 6px;
|
||||
|
||||
Text {
|
||||
text: "IP Address";
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "47.238.198.100";
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
spacing: 6px;
|
||||
|
||||
Text {
|
||||
text: "Location";
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Japan · Tokyo";
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Quick Settings Card
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 0;
|
||||
|
||||
Text {
|
||||
text: "Quick Settings";
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: Theme.colors.foreground;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
SettingRow {
|
||||
label: "TUN Mode";
|
||||
Switch {
|
||||
checked: false;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
background: Theme.colors.border;
|
||||
}
|
||||
|
||||
SettingRow {
|
||||
label: "System Proxy";
|
||||
Switch {
|
||||
checked: false;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
background: Theme.colors.border;
|
||||
}
|
||||
|
||||
SettingRow {
|
||||
label: "Proxy Port";
|
||||
Text {
|
||||
text: "7890";
|
||||
color: Theme.colors.primary;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component SettingRow {
|
||||
in property <string> label: "";
|
||||
|
||||
height: 52px;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 12px;
|
||||
alignment: space-between;
|
||||
|
||||
Text {
|
||||
text: root.label;
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
@children
|
||||
}
|
||||
}
|
||||
|
||||
// Profiles Page
|
||||
export component ProfilesPage {
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 20px;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 12px;
|
||||
alignment: space-between;
|
||||
|
||||
Text {
|
||||
text: "Profiles";
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: Theme.colors.foreground;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 8px;
|
||||
|
||||
Button {
|
||||
text: "+ Add";
|
||||
variant: "default";
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "↻";
|
||||
variant: "ghost";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
GridLayout {
|
||||
spacing: 16px;
|
||||
Row {
|
||||
ProfileCard {
|
||||
name: "NanoCloud";
|
||||
type-icon: "☁";
|
||||
description: "Free tier subscription - Japan servers";
|
||||
is-remote: true;
|
||||
usage: 1.26;
|
||||
total: 100.0;
|
||||
updated: "Just now";
|
||||
}
|
||||
|
||||
ProfileCard {
|
||||
name: "Local Config";
|
||||
type-icon: "📄";
|
||||
description: "Custom local configuration file";
|
||||
is-remote: false;
|
||||
updated: "2025-01-15";
|
||||
}
|
||||
|
||||
ProfileCard {
|
||||
name: "Premium VPN";
|
||||
type-icon: "☁";
|
||||
description: "Premium subscription with global servers";
|
||||
is-remote: true;
|
||||
usage: 45.8;
|
||||
total: 500.0;
|
||||
updated: "2 hours ago";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component ProfileCard {
|
||||
in property <string> name: "";
|
||||
in property <string> type-icon: "";
|
||||
in property <string> description: "";
|
||||
in property <bool> is-remote: false;
|
||||
in property <float> usage: 0;
|
||||
in property <float> total: 100;
|
||||
in property <string> updated: "";
|
||||
|
||||
min-width: 300px;
|
||||
height: 140px;
|
||||
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 10px;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 10px;
|
||||
|
||||
Text {
|
||||
text: root.type-icon;
|
||||
font-size: 20px;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.name;
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
horizontal-stretch: 1;
|
||||
}
|
||||
|
||||
if root.is-remote: Button {
|
||||
text: "↻";
|
||||
variant: "ghost";
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.description;
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 13px;
|
||||
overflow: elide;
|
||||
}
|
||||
|
||||
if root.is-remote: VerticalLayout {
|
||||
spacing: 6px;
|
||||
|
||||
Progress {
|
||||
value: (root.usage / root.total) * 100;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
alignment: space-between;
|
||||
|
||||
Text {
|
||||
text: "Updated: " + root.updated;
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.usage + " / " + root.total + " GB";
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if !root.is-remote: Text {
|
||||
text: "Local Profile";
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Logs Page
|
||||
export component LogsPage {
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 20px;
|
||||
|
||||
Text {
|
||||
text: "Logs";
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
Card {
|
||||
height: 500px;
|
||||
|
||||
ScrollView {
|
||||
VerticalLayout {
|
||||
spacing: 0;
|
||||
|
||||
LogRow {
|
||||
time: "10:23:45";
|
||||
level: "info";
|
||||
message: "Mihomo core started successfully";
|
||||
}
|
||||
|
||||
LogRow {
|
||||
time: "10:23:46";
|
||||
level: "info";
|
||||
message: "HTTP proxy listening on 127.0.0.1:7890";
|
||||
}
|
||||
|
||||
LogRow {
|
||||
time: "10:23:47";
|
||||
level: "debug";
|
||||
message: "Loading configuration from config.yaml";
|
||||
}
|
||||
|
||||
LogRow {
|
||||
time: "10:23:48";
|
||||
level: "info";
|
||||
message: "Profile loaded: NanoCloud";
|
||||
}
|
||||
|
||||
LogRow {
|
||||
time: "10:23:50";
|
||||
level: "warn";
|
||||
message: "DNS resolution timeout for example.com";
|
||||
}
|
||||
|
||||
LogRow {
|
||||
time: "10:23:51";
|
||||
level: "error";
|
||||
message: "Failed to connect to proxy server";
|
||||
}
|
||||
|
||||
LogRow {
|
||||
time: "10:23:52";
|
||||
level: "info";
|
||||
message: "Retrying connection...";
|
||||
}
|
||||
|
||||
LogRow {
|
||||
time: "10:23:53";
|
||||
level: "info";
|
||||
message: "Connection established successfully";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component LogRow {
|
||||
in property <string> time: "";
|
||||
in property <string> level: "";
|
||||
in property <string> message: "";
|
||||
|
||||
private property <color> level-color: level == "error" ? #ef4444 :
|
||||
level == "warn" ? #eab308 :
|
||||
level == "info" ? #3b82f6 :
|
||||
#6b7280;
|
||||
|
||||
height: 28px;
|
||||
|
||||
HorizontalLayout {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
spacing: 12px;
|
||||
|
||||
Text {
|
||||
text: root.time;
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 12px;
|
||||
font-family: "monospace";
|
||||
vertical-alignment: center;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.level;
|
||||
color: root.level-color;
|
||||
font-size: 12px;
|
||||
font-family: "monospace";
|
||||
font-weight: 700;
|
||||
vertical-alignment: center;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.message;
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 12px;
|
||||
font-family: "monospace";
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Connections Page
|
||||
export component ConnectionsPage {
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 20px;
|
||||
|
||||
Text {
|
||||
text: "Connections";
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
VerticalLayout {
|
||||
spacing: 12px;
|
||||
|
||||
ConnectionItem {
|
||||
source: "192.168.1.100:54321";
|
||||
destination: "github.com:443";
|
||||
protocol: "HTTPS";
|
||||
upload: "1.2 KB/s";
|
||||
download: "45.6 KB/s";
|
||||
duration: "00:02:15";
|
||||
}
|
||||
|
||||
ConnectionItem {
|
||||
source: "192.168.1.100:54322";
|
||||
destination: "google.com:443";
|
||||
protocol: "HTTPS";
|
||||
upload: "0.5 KB/s";
|
||||
download: "12.3 KB/s";
|
||||
duration: "00:01:30";
|
||||
}
|
||||
|
||||
ConnectionItem {
|
||||
source: "192.168.1.100:54323";
|
||||
destination: "youtube.com:443";
|
||||
protocol: "HTTPS";
|
||||
upload: "2.1 KB/s";
|
||||
download: "256.7 KB/s";
|
||||
duration: "00:05:42";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component ConnectionItem {
|
||||
in property <string> source: "";
|
||||
in property <string> destination: "";
|
||||
in property <string> protocol: "";
|
||||
in property <string> upload: "";
|
||||
in property <string> download: "";
|
||||
in property <string> duration: "";
|
||||
|
||||
height: 72px;
|
||||
|
||||
Card {
|
||||
HorizontalLayout {
|
||||
spacing: 16px;
|
||||
|
||||
Rectangle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
background: Theme.colors.primary.transparentize(0.9);
|
||||
|
||||
Text {
|
||||
text: "🔗";
|
||||
font-size: 20px;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
spacing: 6px;
|
||||
|
||||
Text {
|
||||
text: root.source + " → " + root.destination;
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
overflow: elide;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 16px;
|
||||
|
||||
Text {
|
||||
text: root.protocol;
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "↑ " + root.upload;
|
||||
color: Theme.colors.primary;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "↓ " + root.download;
|
||||
color: #22c55e;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.duration;
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Settings Page
|
||||
export component SettingsPage {
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 20px;
|
||||
|
||||
Text {
|
||||
text: "Settings";
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
VerticalLayout {
|
||||
spacing: 16px;
|
||||
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 0;
|
||||
|
||||
Text {
|
||||
text: "App Settings";
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: Theme.colors.foreground;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
SettingRow {
|
||||
label: "Auto Start";
|
||||
Switch {
|
||||
checked: false;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
background: Theme.colors.border;
|
||||
}
|
||||
|
||||
SettingRow {
|
||||
label: "Silent Start";
|
||||
Switch {
|
||||
checked: false;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
background: Theme.colors.border;
|
||||
}
|
||||
|
||||
SettingRow {
|
||||
label: "Clash Core";
|
||||
Switch {
|
||||
checked: true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 0;
|
||||
|
||||
Text {
|
||||
text: "Clash Settings";
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: Theme.colors.foreground;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
SettingRow {
|
||||
label: "Allow LAN";
|
||||
Switch {
|
||||
checked: false;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
background: Theme.colors.border;
|
||||
}
|
||||
|
||||
SettingRow {
|
||||
label: "IPv6";
|
||||
Switch {
|
||||
checked: false;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
background: Theme.colors.border;
|
||||
}
|
||||
|
||||
SettingRow {
|
||||
label: "Unified Delay";
|
||||
Switch {
|
||||
checked: true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 12px;
|
||||
|
||||
Text {
|
||||
text: "About";
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 12px;
|
||||
alignment: space-between;
|
||||
|
||||
Text {
|
||||
text: "App Version";
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "1.0.0";
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Proxies Page
|
||||
export component ProxiesPage {
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 20px;
|
||||
|
||||
Text {
|
||||
text: "Proxies";
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
VerticalLayout {
|
||||
spacing: 16px;
|
||||
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 12px;
|
||||
|
||||
Text {
|
||||
text: "Hong Kong";
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
GridLayout {
|
||||
spacing: 12px;
|
||||
Row {
|
||||
ProxyNode {
|
||||
name: "HK-01";
|
||||
type-text: "Vmess";
|
||||
latency: "45ms";
|
||||
}
|
||||
|
||||
ProxyNode {
|
||||
name: "HK-02";
|
||||
type-text: "Vmess";
|
||||
latency: "52ms";
|
||||
}
|
||||
|
||||
ProxyNode {
|
||||
name: "HK-03";
|
||||
type-text: "Trojan";
|
||||
latency: "38ms";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 12px;
|
||||
|
||||
Text {
|
||||
text: "Japan";
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
GridLayout {
|
||||
spacing: 12px;
|
||||
Row {
|
||||
ProxyNode {
|
||||
name: "JP-Tokyo-01";
|
||||
type-text: "Vmess";
|
||||
latency: "122ms";
|
||||
}
|
||||
|
||||
ProxyNode {
|
||||
name: "JP-Tokyo-02";
|
||||
type-text: "SS";
|
||||
latency: "115ms";
|
||||
}
|
||||
|
||||
ProxyNode {
|
||||
name: "JP-Osaka-01";
|
||||
type-text: "Vmess";
|
||||
latency: "135ms";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component ProxyNode {
|
||||
in property <string> name: "";
|
||||
in property <string> type-text: "";
|
||||
in property <string> latency: "";
|
||||
|
||||
min-width: 200px;
|
||||
height: 70px;
|
||||
|
||||
Card {
|
||||
HorizontalLayout {
|
||||
spacing: 12px;
|
||||
alignment: space-between;
|
||||
|
||||
VerticalLayout {
|
||||
spacing: 6px;
|
||||
|
||||
Text {
|
||||
text: root.name;
|
||||
color: Theme.colors.foreground;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.type-text;
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.latency;
|
||||
color: Theme.colors.primary;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user