885 lines
31 KiB
Plaintext
885 lines
31 KiB
Plaintext
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 { StatusIndicator, StatusState } from "./components/status-indicator.slint";
|
|
import { Progress } from "./components/progress.slint";
|
|
|
|
export component App inherits Window {
|
|
title: "Clash Manager";
|
|
preferred-width: 1200px;
|
|
preferred-height: 800px;
|
|
background: Theme.colors.background;
|
|
|
|
in-out property <int> current-page: 0;
|
|
in-out property <StatusState> mihomo-status: StatusState.stopped;
|
|
in-out property <bool> mihomo-loading: false;
|
|
|
|
callback toggle-mihomo();
|
|
callback navigate(int);
|
|
|
|
HorizontalLayout {
|
|
// Sidebar
|
|
sidebar := Rectangle {
|
|
width: 240px;
|
|
background: Theme.colors.background;
|
|
border-width: 1px;
|
|
border-color: Theme.colors.border;
|
|
|
|
VerticalLayout {
|
|
padding: 16px;
|
|
spacing: 16px;
|
|
|
|
// Header
|
|
HorizontalLayout {
|
|
spacing: 12px;
|
|
|
|
Rectangle {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background: Theme.colors.primary;
|
|
|
|
Text {
|
|
text: "C";
|
|
color: Theme.colors.primary-foreground;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
VerticalLayout {
|
|
spacing: 2px;
|
|
|
|
Text {
|
|
text: "Clash Manager";
|
|
color: Theme.colors.foreground;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
Text {
|
|
text: "v1.0.0";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navigation
|
|
VerticalLayout {
|
|
spacing: 4px;
|
|
|
|
Text {
|
|
text: "NAVIGATION";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
NavButton {
|
|
icon: "🏠";
|
|
title: "Home";
|
|
active: root.current-page == 0;
|
|
clicked => { root.current-page = 0; root.navigate(0); }
|
|
}
|
|
|
|
NavButton {
|
|
icon: "🌐";
|
|
title: "Proxies";
|
|
active: root.current-page == 1;
|
|
clicked => { rourrent-page = 1; root.navigate(1); }
|
|
}
|
|
|
|
NavButton {
|
|
icon: "📋";
|
|
title: "Profiles";
|
|
active: root.current-page == 2;
|
|
clicked => { root.current-page = 2; root.navigate(2); }
|
|
}
|
|
|
|
NavButton {
|
|
icon: "🔗";
|
|
title: "Connections";
|
|
active: root.current-page == 3;
|
|
clicked => { root.current-page = 3; root.navigate(3); }
|
|
}
|
|
|
|
NavButton {
|
|
icon: "📝";
|
|
title: "Logs";
|
|
active: root.current-page == 4;
|
|
clicked => { root.current-page = 4; root.navigate(4); }
|
|
}
|
|
|
|
NavButton {
|
|
icon: "⚙";
|
|
title: "Settings";
|
|
active: root.current-page == 5;
|
|
clicked => { root.current-page = 5; root.navigate(5); }
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
vertical-stretch: 1;
|
|
}
|
|
|
|
// Status Footer
|
|
Rectangle {
|
|
background: mihomo-status == StatusState.starting ? #eab30820 :
|
|
mihomo-status == StatusState.running ? #22c55e20 :
|
|
transparent;
|
|
border-radius: 8px;
|
|
|
|
HorizontalLayout {
|
|
padding: 12px;
|
|
spacing: 12px;
|
|
alignment: space-between;
|
|
|
|
HorizontalLayout {
|
|
spacing: 12px;
|
|
|
|
StatusIndicator {
|
|
state: root.mihomo-status;
|
|
}
|
|
|
|
VerticalLayout {
|
|
spacing: 2px;
|
|
|
|
Text {
|
|
text: "Clash";
|
|
color: mihomo-status == StatusState.running ? #22c55e :
|
|
mihomo-status == StatusState.starting ? #eab308 :
|
|
#9ca3af;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
Text {
|
|
text: mihomo-status == StatusState.running ? "Running" :
|
|
mihomo-status == StatusState.starting ? "Starting..." :
|
|
"Stopped";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
Button {
|
|
width: 32px;
|
|
height: 32px;
|
|
text: mihomo-loading ? "..." : (mihomo-status == StatusState.running ? "||" : ">");
|
|
variant: "ghost";
|
|
disabled: mihomo-loading;
|
|
|
|
clicked => {
|
|
root.toggle-mihomo();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Content Area
|
|
content := Rectangle {
|
|
background: Theme.colors.background;
|
|
|
|
// Home Page
|
|
if root.current-page == 0: HomePage {
|
|
toggle-mihomo => { root.toggle-mihomo(); }
|
|
}
|
|
// Proxies Page
|
|
if root.current-page == 1: ProxiesPage {}
|
|
|
|
// Profiles Page
|
|
if root.current-page == 2: ProfilesPage {}
|
|
|
|
// Connections Page
|
|
if root.current-page == 3: ConnectionsPage {}
|
|
|
|
// Logs Page
|
|
if root.current-page == 4: LogsPage {}
|
|
|
|
// Settings Page
|
|
if root.current-page == 5: SettingsPage {}
|
|
}
|
|
}
|
|
}
|
|
|
|
component NavButton {
|
|
in property <string> icon: "";
|
|
in property <string> title: "";
|
|
in property <bool> active: false;
|
|
|
|
callback clicked();
|
|
|
|
private property <bool> hovered: false;
|
|
|
|
height: 40px;
|
|
|
|
container := Rectangle {
|
|
background: active ? Theme.colors.primary.transparentize(0.9) :
|
|
hovered ? Theme.colors.muted.transparentize(0.5) :
|
|
transparent;
|
|
border-radius: 8px;
|
|
|
|
HorizontalLayout {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
spacing: 12px;
|
|
|
|
Text {
|
|
text: root.icon;
|
|
color: active ? Theme.colors.primary : Theme.colors.muted-foregr font-size: 18px;
|
|
vertical-alignment: center;
|
|
width: 20px;
|
|
}
|
|
|
|
Text {
|
|
text: root.title;
|
|
color: active ? Theme.colors.foreground : Theme.colors.muted-foreground;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
TouchArea {
|
|
clicked => { root.clicked(); }
|
|
moved => { root.hovered = self.has-hover; }
|
|
}
|
|
}
|
|
}
|
|
|
|
component HomePage {
|
|
toggle-mihomo();
|
|
|
|
VerticalLayout {
|
|
padding: 24px;
|
|
spacing: 16px;
|
|
|
|
Text {
|
|
text: "Home";
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
ScrollView {
|
|
VerticalLayout {
|
|
spacing: 16px;
|
|
|
|
// Profile Card
|
|
Card {
|
|
VerticalLayout {
|
|
spacing: 16px;
|
|
|
|
HorizontalLayout {
|
|
spacing: 12px;
|
|
|
|
Rectangle {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
background: Theme.colors.primary.transparentize(0.9);
|
|
|
|
Text {
|
|
text: "☁";
|
|
color: Theme.colors.primary;
|
|
font-size: 24px;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
VerticalLayout {
|
|
spacing: 4px;
|
|
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
|
|
Text {
|
|
text: "NanoCloud";
|
|
color: Theme.colors.foreground;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
|
|
Text {
|
|
text: "🌐 Free-Japan1-Ver.7";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 12px;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
Badge {
|
|
text: "Vmess";
|
|
variant: "outline";
|
|
}
|
|
|
|
Badge {
|
|
text: "UDP";
|
|
variant: "outline";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
height: 1px;
|
|
background: Theme.colors.border.transparentize(0.6);
|
|
}
|
|
|
|
HorizontalLayout {
|
|
spacing: 24px;
|
|
|
|
VerticalLayout {
|
|
spacing: 4px;
|
|
|
|
Text {
|
|
text: "☁ Usage / Total";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
Text {
|
|
text: "1.26GB / 100GB";
|
|
color: Theme.colors.foreground;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
n
|
|
VerticalLayout {
|
|
spacing: 4px;
|
|
|
|
Text {
|
|
text: "✓ Expiry Date";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
Text {
|
|
text: "2025-11-11";
|
|
color: Theme.colors.foreground;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
VerticalLayout {
|
|
spacing: 4px;
|
|
|
|
Text {
|
|
text: "✓ Last Update";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
Text {
|
|
text: "2025-10-12 10:05";
|
|
color: Theme.colors.foreground;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Location Card
|
|
Card {
|
|
VerticalLayout {
|
|
spacing: 16px;
|
|
|
|
HorizontalLayout {
|
|
spacing: 24px;
|
|
|
|
VerticalLayout {
|
|
spacing: 4px;
|
|
|
|
Text {
|
|
text: "🌐 IP Address";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
Text {
|
|
text: "47.238.198.100";
|
|
color: Theme.colors.foreground;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
VerticalLayout {
|
|
spacing: 4px;
|
|
|
|
Text {
|
|
text: "🌐 Location";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
Text {
|
|
text: "Japan · Tokyo";
|
|
color: Theme.colors.foreground;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Settings Card
|
|
Card {
|
|
VerticalLayout {
|
|
spacing: 0;
|
|
|
|
SettingRow {
|
|
label: "TUN Mode";
|
|
Switch {
|
|
checked: false;
|
|
toggled(checked) => { debug("TUN mode:", checked); }
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
height: 1px;
|
|
background: Theme.colors.border.transparentize(0.6);
|
|
}
|
|
|
|
SettingRow {
|
|
label: "System Proxy";
|
|
Switch {
|
|
checked: false;
|
|
toggled(checked) => { debug("System proxy:", checked); }
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
height: 1px;
|
|
background: Themelors.border.transparentize(0.6);
|
|
}
|
|
|
|
SettingRow {
|
|
label: "Proxy Port";
|
|
Text {
|
|
text: "7890";
|
|
color: Theme.colors.primary;
|
|
font-size: 14px;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
component SettingRow {
|
|
in property <string> label: "";
|
|
|
|
height: 48px;
|
|
|
|
Horout {
|
|
spacing: 12px;
|
|
alignment: space-between;
|
|
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
|
|
Text {
|
|
text: "✓";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 14px;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
Text {
|
|
text: root.label;
|
|
color: Theme.colors.foreground;
|
|
font-size: 14px;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
@children
|
|
}
|
|
}
|
|
|
|
component ProxiesPage {
|
|
Vertica {
|
|
padding: 24px;
|
|
spacing: 16px;
|
|
|
|
Text {
|
|
text: "Proxies";
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
Card {
|
|
Text {
|
|
text: "Proxy management page - Coming soon";
|
|
color: Theme.colors.muted-foreground;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
component ProfilesPage {
|
|
VerticalLayout {
|
|
padding: 24px;
|
|
spacing: 16px;
|
|
|
|
Text {
|
|
text: "Profiles";
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
ScrollView {
|
|
GridLayout {
|
|
spacing: 16px;
|
|
|
|
Card {
|
|
min-width: 280px;
|
|
height: 120px;
|
|
|
|
VerticalLayout {
|
|
spacing: 8px;
|
|
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
|
|
Text {
|
|
text: "☁";
|
|
font-size: 18px;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
Text {
|
|
text: "NanoCloud";
|
|
color: Theme.colors.foreground;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
Text {
|
|
text: "Free tier subscription - Japan servers";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 12px;
|
|
}
|
|
|
|
Progress {
|
|
value: 1.26;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
alignment: space-between;
|
|
|
|
Text {
|
|
text: "Updated: Just now";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 10px;
|
|
}
|
|
|
|
Text {
|
|
text: "1.26 / 100 GB";
|
|
color: Theme.colors.foreground;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Card {
|
|
min-width: 280px;
|
|
height: 120px;
|
|
|
|
VerticalLayout {
|
|
spacing: 8px;
|
|
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
|
|
Text {
|
|
text: "📄";
|
|
font-size: 18px;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
Text {
|
|
text: "Local Config";
|
|
color: Theme.colors.foreground;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
Text {
|
|
text: "Custom local configuration file";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 12px;
|
|
}
|
|
|
|
Text {
|
|
text: "Local Profile";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
component ConnectionsPage {
|
|
VerticalLayout {
|
|
padding: 24px;
|
|
spacing: 16px;
|
|
|
|
Text {
|
|
text: "Connections";
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
ScrollView {
|
|
VerticalLayout {
|
|
spacing: 8px;
|
|
|
|
for Card {
|
|
height: 60px;
|
|
|
|
HorizontalLayout {
|
|
spacing: 12px;
|
|
|
|
Rectangle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
background: Theme.colors.primary.transparentize(0.9);
|
|
|
|
Text {
|
|
text: "🔗";
|
|
font-size: 18px;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
VerticalLayout {
|
|
spacing: 4px;
|
|
|
|
Text {
|
|
text: "192.168.1.100:54321 → github.com:443";
|
|
color: Theme.colors.foreground;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
spacing: 12px;
|
|
|
|
Text {
|
|
text: "HTTPS";
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 12px;
|
|
}
|
|
|
|
Text {
|
|
text: "↑ 1.2 KB/s";
|
|
color: Theme.colors.primary;
|
|
font-size: 12px;
|
|
}
|
|
|
|
Text {
|
|
text: "↓ 45.6 KB/s";
|
|
color: Theme.colors.secondary;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
component LogsPage {
|
|
VerticalLayout {
|
|
padding: 24px;
|
|
spacing: 16px;
|
|
|
|
Text {
|
|
text: "Logs";
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
Card {
|
|
ScrollView {
|
|
VerticalLayout {
|
|
spacing: 0;
|
|
|
|
for i in 20: LogRow {
|
|
time: "10:23:45";
|
|
level: i < 5 ? "info" : (i < 10 ? "debug" : (i < 15 ? "warn" : "error"));
|
|
message: "Sample log message " + i;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
: 24px;
|
|
|
|
HorizontalLayout {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
spacing: 8px;
|
|
|
|
Text {
|
|
text: root.time;
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: 11px;
|
|
font-family: "monospace";
|
|
vertical-alignment: center;
|
|
width: 80px;
|
|
}
|
|
|
|
Text {
|
|
text: root.level;
|
|
color: root.level-color;
|
|
font-size: 11px;
|
|
font-family: "monospace";
|
|
font-weight: 700;
|
|
vertical-alignment: center;
|
|
width: 60px;
|
|
}
|
|
|
|
Text {
|
|
text: root.message;
|
|
color: Theme.colors.foreground;
|
|
font-size: 11px;
|
|
font-family: "monospace";
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
component SettingsPage {
|
|
VerticalLayout {
|
|
padding: 24px;
|
|
spacing: 16px;
|
|
|
|
Text {
|
|
text: "Settings";
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
ScrollView {
|
|
VerticalLayout {
|
|
spacing: 16px;
|
|
|
|
Card {
|
|
VerticalLayout {
|
|
spacing: 12px;
|
|
|
|
Text {
|
|
text: "App Settings";
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
SettingRow {
|
|
label: "Auto Start";
|
|
Switch {
|
|
checked: false;
|
|
toggled(checked) debug("Auto start:", checked); }
|
|
}
|
|
}
|
|
|
|
SettingRow {
|
|
label: "Silent Start";
|
|
Switch {
|
|
checked: false;
|
|
toggled(checked) => { debug("Silent start:", checked); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Card {
|
|
VerticalLayout {
|
|
spacing: 12px;
|
|
|
|
Text {
|
|
t Settings";
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
SettingRow {
|
|
label: "Allow LAN";
|
|
Switch {
|
|
checked: false;
|
|
toggled(checked) => { debug("Allow LAN:", checked); }
|
|
}
|
|
}
|
|
|
|
SettingRow {
|
|
label: "IPv6";
|
|
Switch {
|
|
checked: false;
|
|
toggled(checked) => { debug("IPv6:", checked); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|