-
This commit is contained in:
366
ui/app-nav-backup.slint
Normal file
366
ui/app-nav-backup.slint
Normal file
@@ -0,0 +1,366 @@
|
||||
import { Theme } from "./theme/theme.slint";
|
||||
import { Button } from "./components/button.slint";
|
||||
import { Card } from "./components/card.slint";
|
||||
import { Switch } from "./components/switch.slint";
|
||||
import { StatusIndicator, StatusState } from "./components/status-indicator.slint";
|
||||
import { ScrollView } from "std-widgets.slint";
|
||||
|
||||
// Component definitions must come before usage
|
||||
component NavButton {
|
||||
in property <string> icon: "";
|
||||
in property <string> title: "";
|
||||
in property <bool> active: false;
|
||||
|
||||
callback clicked();
|
||||
|
||||
private property <bool> hovered: false;
|
||||
|
||||
height: 40px;
|
||||
|
||||
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-foreground;
|
||||
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 {
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 16px;
|
||||
|
||||
Text {
|
||||
text: "Home";
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
VerticalLayout {
|
||||
spacing: 16px;
|
||||
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 16px;
|
||||
|
||||
Text {
|
||||
text: "Welcome to Clash Manager";
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Click the navigation buttons on the left to switch between pages.";
|
||||
color: Theme.colors.muted-foreground;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 12px;
|
||||
|
||||
Text {
|
||||
text: "Quick Settings";
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 12px;
|
||||
alignment: space-between;
|
||||
|
||||
Text {
|
||||
text: "TUN Mode";
|
||||
color: Theme.colors.foreground;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
Switch {
|
||||
checked: false;
|
||||
toggled(checked) => {
|
||||
debug("TUN mode:", checked);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 12px;
|
||||
alignment: space-between;
|
||||
|
||||
Text {
|
||||
text: "System Proxy";
|
||||
color: Theme.colors.foreground;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
Switch {
|
||||
checked: false;
|
||||
toggled(checked) => {
|
||||
debug("System proxy:", checked);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component SimplePage {
|
||||
in property <string> page-title: "Page";
|
||||
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 16px;
|
||||
|
||||
Text {
|
||||
text: root.page-title;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
Card {
|
||||
VerticalLayout {
|
||||
spacing: 12px;
|
||||
|
||||
Text {
|
||||
text: root.page-title + " page content";
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: Theme.colors.foreground;
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "This page is under construction. Full implementation coming soon!";
|
||||
color: Theme.colors.muted-foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
HorizontalLayout {
|
||||
// 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; }
|
||||
}
|
||||
|
||||
NavButton {
|
||||
icon: "🌐";
|
||||
title: "Proxies";
|
||||
active: root.current-page == 1;
|
||||
clicked => { root.current-page = 1; }
|
||||
}
|
||||
|
||||
NavButton {
|
||||
icon: "📋";
|
||||
title: "Profiles";
|
||||
active: root.current-page == 2;
|
||||
clicked => { root.current-page = 2; }
|
||||
}
|
||||
|
||||
NavButton {
|
||||
icon: "🔗";
|
||||
title: "Connections";
|
||||
active: root.current-page == 3;
|
||||
clicked => { root.current-page = 3; }
|
||||
}
|
||||
|
||||
NavButton {
|
||||
icon: "📝";
|
||||
title: "Logs";
|
||||
active: root.current-page == 4;
|
||||
clicked => { root.current-page = 4; }
|
||||
}
|
||||
|
||||
NavButton {
|
||||
icon: "⚙";
|
||||
title: "Settings";
|
||||
active: root.current-page == 5;
|
||||
clicked => { root.current-page = 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
|
||||
Rectangle {
|
||||
background: Theme.colors.background;
|
||||
|
||||
if root.current-page == 0: HomePage {}
|
||||
if root.current-page == 1: SimplePage { page-title: "Proxies"; }
|
||||
if root.current-page == 2: SimplePage { page-title: "Profiles"; }
|
||||
if root.current-page == 3: SimplePage { page-title: "Connections"; }
|
||||
if root.current-page == 4: SimplePage { page-title: "Logs"; }
|
||||
if root.current-page == 5: SimplePage { page-title: "Settings"; }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user