feat: ServerManager 死按钮清理+CSV导出+统计卡片提取; 审批/导航后端拆分; DialogDescription修复; AppRelease重试按钮实现

This commit is contained in:
attacker committed 2026-06-16 01:07:43 +08:00
1 parent f5bda8b03b
commit be529c8c36
14 files changed
+615 -576

No files matched your search

@@ -553,6 +553,7 @@ function HostDetailDialog({
<Badge className="bg-red-500/15 text-red-400 border border-red-500/30">离线</Badge>
)}
</DialogTitle>
<DialogDescription className="sr-only">查看主机详情和指标趋势</DialogDescription>
</DialogHeader>
<div className="space-y-4">
@@ -535,6 +535,7 @@ const SQLAuditManager: React.FC = () => {
<DialogContent className="max-w-3xl">
<DialogHeader>
<DialogTitle>SQL审计详情</DialogTitle>
<DialogDescription className="sr-only">查看SQL审计记录详情</DialogDescription>
</DialogHeader>
{selectedRecord && (
<div className="space-y-4">
@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
@@ -221,6 +222,7 @@ export function PlatformManager() {
<DialogContent>
<DialogHeader>
<DialogTitle>{editingItem ? '编辑云平台' : '添加云平台'}</DialogTitle>
<DialogDescription className="sr-only">描述</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-2">
<div className="grid grid-cols-2 gap-4">
@@ -305,6 +307,7 @@ export function PlatformManager() {
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle>确认删除</DialogTitle>
<DialogDescription className="sr-only">描述</DialogDescription>
</DialogHeader>
<p className="text-sm text-slate-400">确定删除此云平台?此操作不可撤销。</p>
<DialogFooter>
@@ -15,6 +15,7 @@ import {
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
@@ -318,6 +319,7 @@ export function RegionManager() {
<DialogContent>
<DialogHeader>
<DialogTitle>{editingItem ? '编辑区域' : '添加区域'}</DialogTitle>
<DialogDescription className="sr-only">描述</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-2">
<div className="grid grid-cols-2 gap-4">
+32 -8
View File
@@ -53,7 +53,6 @@ import {
Loader2,
ArrowLeft,
ArrowRight,
Terminal,
} from 'lucide-react';
import { releaseApi } from '@/services/api';
import { toast } from 'sonner';
@@ -416,7 +415,20 @@ export function AppReleaseManager() {
详情
</Button>
{release.status === 'failed' && (
<Button variant="ghost" size="sm" className="h-8 text-slate-400 hover:text-blue-400">
<Button
variant="ghost"
size="sm"
className="h-8 text-slate-400 hover:text-blue-400"
onClick={async () => {
try {
await releaseApi.deployRelease(release.id);
toast.success('已重新触发部署');
loadData();
} catch {
toast.error('重新部署失败');
}
}}
>
<RotateCcw className="h-4 w-4 mr-1" />
重试
</Button>
@@ -521,14 +533,26 @@ export function AppReleaseManager() {
</div>
<DialogFooter>
<Button variant="outline" className="border-slate-700 text-slate-300">
<Terminal className="h-4 w-4 mr-2" />
查看完整日志
</Button>
{selectedRelease?.status === 'failed' && (
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
<Button
className="bg-blue-600 hover:bg-blue-700 text-white"
onClick={async () => {
try {
setSubmitting(true);
await releaseApi.deployRelease(selectedRelease.id);
toast.success('已重新触发部署');
setSelectedRelease(null);
loadData();
} catch {
toast.error('重新部署失败');
} finally {
setSubmitting(false);
}
}}
disabled={submitting}
>
<RotateCcw className="h-4 w-4 mr-2" />
重新发布
重新部署
</Button>
)}
</DialogFooter>
@@ -26,6 +26,7 @@ export function AlertDetailDialog({
{alert?.title}
{alert && getSeverityBadge(alert.severity)}
</DialogTitle>
<DialogDescription className="sr-only">查看告警详情</DialogDescription>
</DialogHeader>
{alert && (
<div className="space-y-4">
@@ -502,6 +502,7 @@ const TraceManager: React.FC = () => {
Trace详情
<span className="font-mono text-sm text-muted-foreground">{selectedTrace?.traceId}</span>
</DialogTitle>
<DialogDescription className="sr-only">描述</DialogDescription>
</DialogHeader>
{selectedTrace && (
<div className="space-y-4">
@@ -550,6 +551,7 @@ const TraceManager: React.FC = () => {
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>Span详情</DialogTitle>
<DialogDescription className="sr-only">描述</DialogDescription>
</DialogHeader>
{selectedSpan && (
<div className="space-y-4">
@@ -33,19 +33,17 @@ import {
Plus,
MoreHorizontal,
Terminal,
Power,
RotateCw,
Trash2,
Edit,
Download,
Upload,
Server,
Activity,
Server as ServerIcon,
Cloud,
FileSpreadsheet,
RefreshCw,
} from 'lucide-react';
import { serverApi } from '@/services/api';
import { ServerStatsCards } from './ServerStatsCards';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { toast } from 'sonner';
import type { Server as ServerType } from '@/types';
@@ -247,6 +245,32 @@ export function ServerManager() {
}
};
// 导出 CSV — 将当前服务器列表导出为 CSV 文件 // Logan.Li
const handleExport = () => {
if (filteredServers.length === 0) {
toast.error('没有可导出的数据');
return;
}
const headers = ['主机名', 'IP地址', '公网IP', '端口', '操作系统', 'CPU(核)', '内存(GB)', '磁盘(GB)', '状态', '标签'];
const rows = filteredServers.map((s) => {
const memGB = s.memory ? Math.round(s.memory / 1024) : 0;
const tags = getTags(s).join(';');
return [s.hostname || '', s.ip || '', s.public_ip || '', s.port || 22, s.os || '',
s.cpu || 0, memGB, s.disk || 0, s.status || '', tags];
});
const csv = [headers, ...rows]
.map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
.join('\n');
const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `servers_${new Date().toISOString().slice(0, 10)}.csv`;
a.click();
URL.revokeObjectURL(url);
toast.success(`已导出 ${filteredServers.length} 台服务器`);
};
const getStatusBadge = (status: ServerType['status']) => {
switch (status) {
case 'running':
@@ -299,7 +323,11 @@ export function ServerManager() {
<RefreshCw className={cn('h-4 w-4 mr-2', loading && 'animate-spin')} />
刷新
</Button>
<Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]">
<Button
variant="outline"
className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
onClick={handleExport}
>
<Download className="h-4 w-4 mr-2" />
导出
</Button>
@@ -342,66 +370,7 @@ export function ServerManager() {
</div>
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-[var(--dg-text-muted)]">服务器总数</p>
<p className="text-2xl font-bold text-[var(--dg-text-primary)]">{servers.length}</p>
</div>
<div className="p-3 rounded-lg bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]">
<Server className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-[var(--dg-text-muted)]">运行中</p>
<p className="text-2xl font-bold text-emerald-400">
{servers.filter((s) => s.status === 'running').length}
</p>
</div>
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
<Activity className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-[var(--dg-text-muted)]">维护中</p>
<p className="text-2xl font-bold text-amber-400">
{servers.filter((s) => s.status === 'maintenance').length}
</p>
</div>
<div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
<RotateCw className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-[var(--dg-text-muted)]">已停止</p>
<p className="text-2xl font-bold text-[var(--dg-text-muted)]">
{servers.filter((s) => s.status === 'stopped').length}
</p>
</div>
<div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)]">
<Power className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
</div>
<ServerStatsCards servers={servers} />
{/* Filters & Table */}
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
@@ -434,14 +403,6 @@ export function ServerManager() {
{selectedServers.length > 0 && (
<div className="flex items-center gap-2">
<span className="text-sm text-[var(--dg-text-secondary)]">已选择 {selectedServers.length} 项</span>
<Button variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]">
<Terminal className="h-4 w-4 mr-2" />
批量命令
</Button>
<Button variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]">
<RotateCw className="h-4 w-4 mr-2" />
重启
</Button>
<Button
variant="outline"
size="sm"
@@ -509,7 +470,7 @@ export function ServerManager() {
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Server className="h-4 w-4 text-[var(--dg-text-muted)]" />
<ServerIcon className="h-4 w-4 text-[var(--dg-text-muted)]" />
<div>
<p className="font-medium text-[var(--dg-text-primary)]">{server.hostname}</p>
<p className="text-xs text-[var(--dg-text-muted)]">{server.os}</p>
@@ -609,15 +570,13 @@ export function ServerManager() {
<Edit className="h-4 w-4 mr-2" />
编辑
</DropdownMenuItem>
<DropdownMenuItem className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer" onClick={() => openTerminal(server)}>
<DropdownMenuItem className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
onClick={() => openTerminal(server)}
>
<Terminal className="h-4 w-4 mr-2" />
终端
</DropdownMenuItem>
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
<DropdownMenuItem className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer">
<RotateCw className="h-4 w-4 mr-2" />
重启
</DropdownMenuItem>
<DropdownMenuItem
className="text-red-400 focus:bg-[var(--dg-bg-hover)] focus:text-red-400 cursor-pointer"
onClick={() => handleDelete(server.id)}
@@ -0,0 +1,70 @@
// 服务器统计卡片组件 — 从 ServerManager 提取 // Logan.Li
import { Card, CardContent } from '@/components/ui/card';
import { Server, Activity, RotateCw, Power } from 'lucide-react';
interface ServerStatsCardsProps {
servers: any[];
}
export function ServerStatsCards({ servers }: ServerStatsCardsProps) {
const runningCount = servers.filter((s) => s.status === 'running').length;
const maintenanceCount = servers.filter((s) => s.status === 'maintenance').length;
const stoppedCount = servers.filter((s) => s.status === 'stopped').length;
return (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-[var(--dg-text-muted)]">服务器总数</p>
<p className="text-2xl font-bold text-[var(--dg-text-primary)]">{servers.length}</p>
</div>
<div className="p-3 rounded-lg bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]">
<Server className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-[var(--dg-text-muted)]">运行中</p>
<p className="text-2xl font-bold text-emerald-400">{runningCount}</p>
</div>
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
<Activity className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-[var(--dg-text-muted)]">维护中</p>
<p className="text-2xl font-bold text-amber-400">{maintenanceCount}</p>
</div>
<div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
<RotateCw className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-[var(--dg-text-muted)]">已停止</p>
<p className="text-2xl font-bold text-[var(--dg-text-muted)]">{stoppedCount}</p>
</div>
<div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)]">
<Power className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
</div>
);
}