210 lines
8.4 KiB
Plaintext
210 lines
8.4 KiB
Plaintext
// Logs Page - Display Mihomo and App logs with tabs
|
|
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
|
|
import { Empty } from "../components/empty.slint";
|
|
import { LogEntry } from "../types.slint";
|
|
|
|
export component LogsPage inherits Rectangle {
|
|
in property <[LogEntry]> mihomo-logs;
|
|
in property <[LogEntry]> app-logs;
|
|
in-out property <string> active-tab: "mihomo";
|
|
|
|
callback load-logs(string /* type: mihomo/app */);
|
|
|
|
background: Theme.colors.background;
|
|
|
|
VerticalLayout {
|
|
// Fixed header with tabs
|
|
Rectangle {
|
|
height: 48px;
|
|
background: Theme.colors.background;
|
|
|
|
HorizontalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s4;
|
|
alignment: space-between;
|
|
|
|
Text {
|
|
text: "Logs";
|
|
font-size: Typography.sizes.xl;
|
|
font-weight: Typography.weights.bold;
|
|
color: Theme.colors.foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
// Tabs
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s1;
|
|
|
|
Rectangle {
|
|
width: 120px;
|
|
height: 32px;
|
|
background: active-tab == "mihomo" ? Theme.colors.primary : Theme.colors.muted;
|
|
border-radius: SpacingSystem.radius.md;
|
|
|
|
TouchArea {
|
|
clicked => {
|
|
active-tab = "mihomo";
|
|
root.load-logs("mihomo");
|
|
}
|
|
}
|
|
|
|
Text {
|
|
text: "Mihomo Logs";
|
|
font-size: Typography.sizes.sm;
|
|
font-weight: Typography.weights.medium;
|
|
color: active-tab == "mihomo" ? Theme.colors.primary-foreground : Theme.colors.muted-foreground;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: 100px;
|
|
height: 32px;
|
|
background: active-tab == "app" ? Theme.colors.primary : Theme.colors.muted;
|
|
border-radius: SpacingSystem.radius.md;
|
|
|
|
TouchArea {
|
|
clicked => {
|
|
active-tab = "app";
|
|
root.load-logs("app");
|
|
}
|
|
}
|
|
|
|
Text {
|
|
text: "App Logs";
|
|
font-size: Typography.sizes.sm;
|
|
font-weight: Typography.weights.medium;
|
|
color: active-tab == "app" ? Theme.colors.primary-foreground : Theme.colors.muted-foreground;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Scrollable log content
|
|
Flickable {
|
|
viewport-height: log-content.preferred-height + SpacingSystem.spacing.s4 * 2;
|
|
|
|
log-content := VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: 0px;
|
|
|
|
// Mihomo logs
|
|
if active-tab == "mihomo": VerticalLayout {
|
|
spacing: 0px;
|
|
|
|
if mihomo-logs.length == 0: Empty {
|
|
height: 300px;
|
|
icon: "📝";
|
|
title: "No Logs";
|
|
description: "Mihomo logs will appear here";
|
|
}
|
|
|
|
for log[index] in mihomo-logs: Rectangle {
|
|
height: 24px;
|
|
background: mod(index, 2) == 0 ? Theme.colors.muted : transparent;
|
|
|
|
HorizontalLayout {
|
|
padding-left: SpacingSystem.spacing.s2;
|
|
padding-right: SpacingSystem.spacing.s2;
|
|
spacing: SpacingSystem.spacing.s2;
|
|
|
|
// Time
|
|
Text {
|
|
text: log.time;
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.muted-foreground;
|
|
font-family: "monospace";
|
|
vertical-alignment: center;
|
|
width: 80px;
|
|
}
|
|
|
|
// Level
|
|
Text {
|
|
text: log.level;
|
|
font-size: Typography.sizes.xs;
|
|
font-weight: Typography.weights.bold;
|
|
color: log.level == "error" ? #ef4444 :
|
|
log.level == "warn" ? #f59e0b :
|
|
log.level == "info" ? #3b82f6 : Theme.colors.muted-foreground;
|
|
font-family: "monospace";
|
|
vertical-alignment: center;
|
|
width: 60px;
|
|
}
|
|
|
|
// Message
|
|
Text {
|
|
text: log.message;
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.foreground;
|
|
font-family: "monospace";
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// App logs
|
|
if active-tab == "app": VerticalLayout {
|
|
spacing: 0px;
|
|
|
|
if app-logs.length == 0: Empty {
|
|
height: 300px;
|
|
icon: "📝";
|
|
title: "No Logs";
|
|
description: "App logs will appear here";
|
|
}
|
|
|
|
for log[index] in app-logs: Rectangle {
|
|
height: 24px;
|
|
background: mod(index, 2) == 0 ? Theme.colors.muted : transparent;
|
|
|
|
HorizontalLayout {
|
|
padding-left: SpacingSystem.spacing.s2;
|
|
padding-right: SpacingSystem.spacing.s2;
|
|
spacing: SpacingSystem.spacing.s2;
|
|
|
|
// Time
|
|
Text {
|
|
text: log.time;
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.muted-foreground;
|
|
font-family: "monospace";
|
|
vertical-alignment: center;
|
|
width: 80px;
|
|
}
|
|
|
|
// Level
|
|
Text {
|
|
text: log.level;
|
|
font-size: Typography.sizes.xs;
|
|
font-weight: Typography.weights.bold;
|
|
color: log.level == "error" ? #ef4444 :
|
|
log.level == "warn" ? #f59e0b :
|
|
log.level == "info" ? #3b82f6 : Theme.colors.muted-foreground;
|
|
font-family: "monospace";
|
|
vertical-alignment: center;
|
|
width: 60px;
|
|
}
|
|
|
|
// Message
|
|
Text {
|
|
text: log.message;
|
|
font-size: Typography.sizes.xs;
|
|
color: Theme.colors.foreground;
|
|
font-family: "monospace";
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|