okooooooo/pika
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化前端页面&移除服务监控的状态过滤

Browse Source
This commit is contained in:
dushixiang committed 2025-12-25 21:43:15 +08:00
1 parent 32881f424e
commit b90ad069b1
4 files changed
+9 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/components/NetworkStatCard.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ const NetworkStatCard: FC<NetworkStatCardProps> = ({
</div>
<div className="relative z-10 flex justify-between items-start">
<div className="flex-1 min-w-0">
<div className="text-xs font-bold font-mono uppercase tracking-widest opacity-70 mb-2">网络统计</div>
<div className="text-xs font-bold font-mono uppercase tracking-widest opacity-70 mb-3">网络统计</div>
<div className="space-y-0.5 text-xs sm:text-xs font-mono">
<div className="flex items-center gap-1.5 sm:gap-2">
<ArrowUp className="w-3 h-3 dark:text-blue-400 text-blue-600 flex-shrink-0"/>
web/src/components/ServerCard.tsx
+3 -3
View File
@@ -187,17 +187,17 @@ const ServerCard: FC<ServerCardProps> = ({server}) => {
<Network className="w-3 h-3 text-emerald-600 dark:text-emerald-400"/>
<span
className="text-emerald-600 dark:text-emerald-400">{netConn.established || 0}</span>
<span className="text-gray-600 dark:text-cyan-500">已建立</span>
<span className="text-gray-600 dark:text-cyan-500">ESTABLISHED</span>
</span>
<span className="flex items-center gap-1">
<Network className="w-3 h-3 text-blue-600 dark:text-blue-400"/>
<span className="text-blue-600 dark:text-blue-400">{netConn.listen || 0}</span>
<span className="text-gray-600 dark:text-cyan-500">监听</span>
<span className="text-gray-600 dark:text-cyan-500">LISTEN</span>
</span>
<span className="flex items-center gap-1">
<Network className="w-3 h-3 text-rose-600 dark:text-rose-400"/>
<span className="text-rose-600 dark:text-rose-400">{netConn.closeWait || 0}</span>
<span className="text-gray-600 dark:text-cyan-500">等待关闭</span>
<span className="text-gray-600 dark:text-cyan-500">CLOSE_WAIT</span>
</span>
</div>
)}
web/src/pages/Public/MonitorList.tsx
+1 -29
View File
@@ -35,7 +35,6 @@ interface Stats {
}
const MonitorList = () => {
const [filter, setFilter] = useState<FilterStatus>('all');
const [searchKeyword, setSearchKeyword] = useState('');
const [displayMode, setDisplayMode] = useState<DisplayMode>('max');
@@ -54,11 +53,6 @@ const MonitorList = () => {
const filteredMonitors = useMemo(() => {
let result = monitors;
// 状态过滤
if (filter !== 'all') {
result = result.filter(m => m.status === filter);
}
// 搜索过滤
if (searchKeyword.trim()) {
const keyword = searchKeyword.toLowerCase();
@@ -69,7 +63,7 @@ const MonitorList = () => {
}
return result;
}, [monitors, filter, searchKeyword]);
}, [monitors, searchKeyword]);
// 统计信息
const calculateStats = (monitors: PublicMonitor[]) => {
@@ -131,28 +125,6 @@ const MonitorList = () => {
{/* 过滤和搜索 */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
<div className="flex flex-wrap gap-4 items-center w-full md:w-auto">
{/* 状态过滤 */}
<div
className="flex gap-2 bg-slate-100 dark:bg-black/40 p-1 rounded-lg border border-slate-200 dark:border-cyan-900/50">
{(['all', 'up', 'down', 'unknown'] as const).map(f => {
const labels = {all: '全部', up: '正常', down: '异常', unknown: '未知'};
return (
<button
key={f}
onClick={() => setFilter(f)}
className={cn(
"px-4 py-1.5 rounded-md text-xs font-medium transition-all font-mono cursor-pointer",
filter === f
? 'bg-gray-200 dark:bg-cyan-500/20 text-gray-800 dark:text-cyan-300 border border-gray-300 dark:border-cyan-500/30'
: 'text-gray-600 dark:text-cyan-500 hover:text-gray-800 dark:hover:text-cyan-400'
)}
>
{labels[f]}
</button>
);
})}
</div>
{/* 显示模式切换 */}
<div className="flex gap-1 bg-slate-100 dark:bg-black/40 p-1 rounded-lg border border-slate-200 dark:border-cyan-900/50 items-center">
<span className="text-xs text-gray-600 dark:text-cyan-500 px-2 font-mono">卡片指标:</span>
web/src/pages/Public/ServerList.tsx
+4 -4
View File
@@ -253,7 +253,7 @@ const ServerList = () => {
<th className="p-5 font-bold w-[250px]">Identity</th>
<th className="p-5 font-bold">Telemetry</th>
<th className="p-5 font-bold w-[220px]">I/O Rate</th>
<th className="p-5 font-bold w-[150px]">Status</th>
<th className="p-5 font-bold w-[150px]">Network</th>
<th className="p-5 font-bold w-[200px]">Meta / Tags</th>
</tr>
</thead>
@@ -399,17 +399,17 @@ const ServerList = () => {
<Network className="w-3 h-3 text-emerald-600 dark:text-emerald-400"/>
<span
className="text-emerald-600 dark:text-emerald-400">{netConn.established || 0}</span>
<span className="text-gray-600 dark:text-cyan-500">已建立</span>
<span className="text-gray-600 dark:text-cyan-500">ESTABLISHED</span>
</div>
<div className="flex items-center gap-2">
<Network className="w-3 h-3 text-blue-600 dark:text-blue-400"/>
<span className="text-blue-600 dark:text-blue-400">{netConn.listen || 0}</span>
<span className="text-gray-600 dark:text-cyan-500">监听中</span>
<span className="text-gray-600 dark:text-cyan-500">LISTEN</span>
</div>
<div className="flex items-center gap-2">
<Network className="w-3 h-3 text-rose-600 dark:text-rose-400"/>
<span className="text-rose-600 dark:text-rose-400">{netConn.closeWait || 0}</span>
<span className="text-gray-600 dark:text-cyan-500">等待关闭</span>
<span className="text-gray-600 dark:text-cyan-500">CLOSE_WAIT</span>
</div>
</div>
) : (