优化 ICON 和 系统名称
This commit is contained in:
1 parent
9489c7b552
commit
6232d8e4f2
3 files changed
+29
-26
No files matched your search
@@ -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; // 毫秒时间戳
|
||||
|
||||
@@ -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"/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user