优化 ICON 和 系统名称

This commit is contained in:
dushixiang committed 2025-12-15 19:09:13 +08:00
1 parent 9489c7b552
commit 6232d8e4f2
3 files changed
+29 -26

No files matched your search

-5
View File
@@ -44,11 +44,6 @@ export const getMonitorAgentStats = (id: string) => {
return get<AgentMonitorStat[]>(`/monitors/${encodeURIComponent(id)}/agents`);
};
// 公开接口 - 获取监控详情(整合版,包含stats和agents)
export const getMonitorDetail = (id: string) => {
return get<MonitorDetail>(`/monitors/${encodeURIComponent(id)}`);
};
// VictoriaMetrics 时序数据点
export interface MetricDataPoint {
timestamp: number; // 毫秒时间戳
+19 -6
View File
@@ -1,5 +1,5 @@
import {useEffect, useState} from 'react';
import {Activity, LogIn, ServerIcon, Settings, Menu, X} from 'lucide-react';
import {Activity, LogIn, Menu, ServerIcon, Settings, X} from 'lucide-react';
import {getCurrentUser} from '../api/auth';
import {Link, useLocation} from "react-router-dom";
@@ -47,6 +47,18 @@ const PublicHeader = () => {
activeTab = 'monitors';
}
// let systemName = window.SystemConfig?.SystemNameZh;
let systemName = "Best Zhen";
let leftName = '';
let rightName = '';
if (systemName) {
const mid = Math.floor(systemName.length / 2);
leftName = systemName.substring(0, mid);
rightName = systemName.substring(mid);
}
return (
<>
<header className="border-b border-cyan-900/50 bg-[#05050a]/80 backdrop-blur-xl sticky top-0 z-40">
@@ -66,7 +78,7 @@ const PublicHeader = () => {
</div>
<div>
<h1 className="text-2xl font-black tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-400 uppercase italic">
{window.SystemConfig?.SystemNameEn}
{leftName}<span className="text-white">{rightName}</span>
</h1>
<p className="text-[10px] text-cyan-500/60 font-mono tracking-[0.3em] uppercase">
{window.SystemConfig?.SystemNameZh}
@@ -150,7 +162,8 @@ const PublicHeader = () => {
{/* Mobile Menu */}
{mobileMenuOpen && (
<div className="md:hidden fixed inset-0 top-20 bg-[#05050a]/95 backdrop-blur-xl z-30 animate-in slide-in-from-top">
<div
className="md:hidden fixed inset-0 top-20 bg-[#05050a]/95 backdrop-blur-xl z-30 animate-in slide-in-from-top">
<div className="flex flex-col p-4 gap-4">
{/* Mobile Navigation */}
{[
@@ -164,9 +177,9 @@ const PublicHeader = () => {
className={`
flex items-center gap-3 p-4 rounded-lg border transition-all
${activeTab === tab.id
? 'bg-cyan-500/20 border-cyan-500/50 text-cyan-400'
: 'bg-cyan-500/5 border-cyan-500/20 text-slate-400 hover:bg-cyan-500/10 hover:border-cyan-500/30'
}
? 'bg-cyan-500/20 border-cyan-500/50 text-cyan-400'
: 'bg-cyan-500/5 border-cyan-500/20 text-slate-400 hover:bg-cyan-500/10 hover:border-cyan-500/30'
}
`}
>
<tab.icon className="w-5 h-5"/>
+10 -15
View File
@@ -6,14 +6,14 @@ import {
ArrowDown,
ArrowUp,
Calendar,
CheckCircle2,
Cpu,
Filter,
HardDrive,
LinkIcon,
Loader2,
MemoryStick,
Server,
XCircle
UnlinkIcon
} from 'lucide-react';
import {getPublicTags, listAgents} from '@/api/agent.ts';
import type {Agent, LatestMetrics} from '@/types';
@@ -95,11 +95,6 @@ const ServerList = () => {
refetchInterval: 30000,
});
// 根据选中的标签过滤服务器
const filteredAgents = selectedTag
? agents.filter(agent => agent.tags?.includes(selectedTag))
: agents;
// 计算统计数据
const stats = useMemo(() => {
const total = agents.length;
@@ -173,13 +168,13 @@ const ServerList = () => {
<StatCard
title="在线设备"
value={stats.online}
icon={CheckCircle2}
icon={LinkIcon}
color="emerald"
/>
<StatCard
title="离线设备"
value={stats.offline}
icon={XCircle}
icon={UnlinkIcon}
color="rose"
/>
<NetworkStatCard
@@ -193,7 +188,8 @@ const ServerList = () => {
{/* 标签过滤器 */}
{allTags.length > 1 && (
<div className="flex flex-wrap gap-1.5 sm:gap-2 items-center">
<div className="text-[10px] sm:text-xs font-mono text-cyan-600 flex items-center gap-1.5 sm:gap-2 mr-1 sm:mr-2">
<div
className="text-[10px] sm:text-xs font-mono text-cyan-600 flex items-center gap-1.5 sm:gap-2 mr-1 sm:mr-2">
<Filter className="w-3 h-3"/>
<span className="hidden sm:inline">FILTERS:</span>
</div>
@@ -234,14 +230,15 @@ const ServerList = () => {
) : (
<>
{/* 桌面端表格布局 */}
<div className="hidden md:block bg-[#0a0b10]/90 border border-cyan-900/50 rounded-md overflow-hidden shadow-2xl backdrop-blur-sm">
<div
className="hidden md:block bg-[#0a0b10]/90 border border-cyan-900/50 rounded-md overflow-hidden shadow-2xl backdrop-blur-sm">
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-black/40 text-[10px] font-mono uppercase tracking-widest text-cyan-600 border-b border-cyan-900/50">
<th className="p-4 font-normal w-[300px]">System Identity</th>
<th className="p-4 font-normal">Resource Telemetry</th>
<th className="p-4 font-normal w-[200px]">Network I/O</th>
<th className="p-4 font-normal w-[180px]">Meta / Status</th>
<th className="p-4 font-normal w-[180px]">Meta / Tags</th>
</tr>
</thead>
<tbody className="divide-y divide-cyan-900/30">
@@ -334,7 +331,7 @@ const ServerList = () => {
<span>OUT: {formatSpeed(upload)}</span>
</span>
</div>
{server.trafficLimit > 0 ? (
{server.trafficLimit > 0 && (
<div className="w-32">
<div
className="flex justify-between text-[9px] text-cyan-700 mb-0.5">
@@ -346,8 +343,6 @@ const ServerList = () => {
style={{width: `${((server.trafficUsed || 0) / server.trafficLimit) * 100}%`}}></div>
</div>
</div>
) : (
<div className="text-[10px] text-cyan-800 italic">-- NO METERING --</div>
)}
</td>