rlwj-lab/aiops
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全站 PageShell 设计系统与专业 UI 统一

Browse Source 
- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架
- index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩）
- 全站路由页接入 PageShell，云账单三 Tab 为标杆
- 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化
- 登录页/侧栏/顶栏去渐变光球，企业克制风
- 修复 AIAlertAnalyzer JSX 与构建依赖导入问题
This commit is contained in:
Logan committed 2026-07-01 12:45:38 +08:00
1 parent 1acb0c49af
commit e363ded445
213 files changed
+7148 -6818
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/App.tsx
+2
View File
@@ -8,6 +8,7 @@ import { Login } from '@/components/auth/Login';
import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
import { PageTransition } from '@/components/layout/PageTransition';
import { ErrorBoundary } from '@/components/layout/ErrorBoundary';
import { Toaster } from '@/components/ui/sonner';
// Lazy load page components for code splitting
const Dashboard = lazy(() => import('@/components/dashboard/Dashboard').then(m => ({ default: m.Dashboard })));
@@ -108,6 +109,7 @@ function App() {
<ThemeProvider>
<QueryClientProvider client={queryClient}>
<ConfirmProvider>
<Toaster position="top-right" richColors closeButton />
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />} />
frontend/src/components/agent/AgentAlerts.tsx
+39 -39
View File
@@ -112,19 +112,19 @@ export function AgentAlerts() {
{/* 页头 */}
<div className="flex items-center justify-between">
<div>
<h2 className="text-xl font-semibold text-slate-100">Agent 告警</h2>
<p className="text-sm text-slate-400 mt-0.5">基于 Agent 上报指标的告警规则与事件</p>
<h2 className="text-xl font-semibold text-[var(--dg-text-primary)]">Agent 告警</h2>
<p className="text-sm dg-text-secondary mt-0.5">基于 Agent 上报指标的告警规则与事件</p>
</div>
<Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700">
<Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]">
<RefreshCw className={`h-4 w-4 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
</div>
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="bg-slate-800 border border-slate-700">
<TabsTrigger value="events" className="data-[state=active]:bg-slate-700">告警事件</TabsTrigger>
<TabsTrigger value="rules" className="data-[state=active]:bg-slate-700">告警规则</TabsTrigger>
<TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
<TabsTrigger value="events" className="data-[state=active]:bg-[var(--dg-bg-active)]">告警事件</TabsTrigger>
<TabsTrigger value="rules" className="data-[state=active]:bg-[var(--dg-bg-active)]">告警规则</TabsTrigger>
</TabsList>
{/* ========== 告警事件 ========== */}
@@ -134,7 +134,7 @@ export function AgentAlerts() {
size="sm"
variant={resolvedView ? 'outline' : 'default'}
onClick={() => setResolvedView(false)}
className={!resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-slate-800 border-slate-700 text-slate-300'}
className={!resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'dg-input text-[var(--dg-text-secondary)]'}
>
未恢复
</Button>
@@ -142,53 +142,53 @@ export function AgentAlerts() {
size="sm"
variant={resolvedView ? 'default' : 'outline'}
onClick={() => setResolvedView(true)}
className={resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-slate-800 border-slate-700 text-slate-300'}
className={resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'dg-input text-[var(--dg-text-secondary)]'}
>
已恢复
</Button>
</div>
{loading ? (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="flex items-center justify-center py-16">
<Loader2 className="h-5 w-5 animate-spin text-slate-500" />
<span className="ml-2 text-slate-400">加载中...</span>
<Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
<span className="ml-2 dg-text-secondary">加载中...</span>
</CardContent>
</Card>
) : alerts.length === 0 ? (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="flex flex-col items-center justify-center py-16">
<CheckCircle className="h-10 w-10 text-emerald-500 mb-3" />
<p className="text-slate-400">{resolvedView ? '暂无已恢复的告警' : '当前无活动告警，一切正常'}</p>
<p className="dg-text-secondary">{resolvedView ? '暂无已恢复的告警' : '当前无活动告警，一切正常'}</p>
</CardContent>
</Card>
) : (
<div className="space-y-2">
{alerts.map((alert) => (
<Card key={alert.id} className="bg-slate-900 border-slate-800 py-4">
<Card key={alert.id} className="dg-card py-4">
<CardContent>
<div className="flex items-start justify-between gap-3">
<div className="flex items-start gap-3 min-w-0 flex-1">
<div className="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center shrink-0">
<AlertTriangle className={`h-4 w-4 ${(alert.severity || 'warning') === 'critical' ? 'text-red-400' : (alert.severity || 'warning') === 'warning' ? 'text-amber-400' : 'text-blue-400'}`} />
<div className="w-9 h-9 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center shrink-0">
<AlertTriangle className={`h-4 w-4 ${(alert.severity || 'warning') === 'critical' ? 'dg-text-red' : (alert.severity || 'warning') === 'warning' ? 'dg-text-yellow' : 'dg-text-blue'}`} />
</div>
<div className="min-w-0">
<div className="flex items-center gap-2 flex-wrap">
{severityBadge(alert.severity)}
<span className="font-medium text-slate-100">{alert.rule_name || alert.name || alert.title || '告警'}</span>
<span className="font-medium text-[var(--dg-text-primary)]">{alert.rule_name || alert.name || alert.title || '告警'}</span>
</div>
<p className="text-sm text-slate-400 mt-1">{alert.message || alert.description || '触发告警阈值'}</p>
<div className="flex items-center gap-4 mt-2 text-xs text-slate-500 flex-wrap">
<p className="text-sm dg-text-secondary mt-1">{alert.message || alert.description || '触发告警阈值'}</p>
<div className="flex items-center gap-4 mt-2 text-xs dg-text-muted flex-wrap">
<span className="inline-flex items-center gap-1">
<Cpu className="h-3 w-3" />
{alert.hostname || '--'}
</span>
<span className="inline-flex items-center gap-1">
<span className="text-slate-400">指标:</span> {getMetricLabel(alert.metric)}
<span className="dg-text-secondary">指标:</span> {getMetricLabel(alert.metric)}
</span>
{alert.value != null && (
<span className="inline-flex items-center gap-1">
<span className="text-slate-400">当前值:</span> {alert.value}
<span className="dg-text-secondary">当前值:</span> {alert.value}
</span>
)}
<span className="inline-flex items-center gap-1">
@@ -203,7 +203,7 @@ export function AgentAlerts() {
size="sm"
variant="outline"
onClick={() => handleResolve(alert.id)}
className="shrink-0 h-8 bg-slate-800 border-slate-700 text-emerald-400 hover:bg-emerald-500/10 hover:text-emerald-400"
className="shrink-0 h-8 dg-input dg-text-green hover:bg-emerald-500/10 hover:dg-text-green"
>
<CheckCircle className="h-3.5 w-3.5 mr-1" />
恢复
@@ -227,17 +227,17 @@ export function AgentAlerts() {
</div>
{loading ? (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="flex items-center justify-center py-16">
<Loader2 className="h-5 w-5 animate-spin text-slate-500" />
<span className="ml-2 text-slate-400">加载中...</span>
<Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
<span className="ml-2 dg-text-secondary">加载中...</span>
</CardContent>
</Card>
) : rules.length === 0 ? (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="flex flex-col items-center justify-center py-16">
<Bell className="h-10 w-10 text-slate-600 mb-3" />
<p className="text-slate-400">暂无告警规则</p>
<Bell className="h-10 w-10 dg-text-muted mb-3" />
<p className="dg-text-secondary">暂无告警规则</p>
<Button size="sm" onClick={openCreateRule} className="mt-4 bg-blue-600 hover:bg-blue-700 text-white">
<Plus className="h-4 w-4 mr-1.5" />
创建第一条规则
@@ -249,42 +249,42 @@ export function AgentAlerts() {
{rules.map((rule) => {
const MetricIcon = METRIC_OPTIONS.find((m) => m.value === rule.metric)?.icon || Cpu;
return (
<Card key={rule.id} className={`bg-slate-900 ${rule.enabled === false ? 'border-slate-800 opacity-60' : 'border-slate-800'} py-4`}>
<Card key={rule.id} className={`bg-[var(--dg-bg-secondary)] ${rule.enabled === false ? 'border-[var(--dg-border)] opacity-60' : 'border-[var(--dg-border)]'} py-4`}>
<CardContent>
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3 min-w-0 flex-1">
<div className="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center shrink-0">
<MetricIcon className="h-4 w-4 text-blue-400" />
<div className="w-9 h-9 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center shrink-0">
<MetricIcon className="h-4 w-4 dg-text-blue" />
</div>
<div className="min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<span className="font-medium text-slate-100">{rule.name}</span>
<span className="font-medium text-[var(--dg-text-primary)]">{rule.name}</span>
{severityBadge(rule.severity)}
{rule.enabled === false && (
<Badge className="bg-slate-700 text-slate-400 border border-slate-600">已禁用</Badge>
<Badge className="bg-[var(--dg-bg-active)] dg-text-secondary border border-[var(--dg-border-hover)]">已禁用</Badge>
)}
</div>
<div className="flex items-center gap-3 mt-1.5 text-xs text-slate-500 flex-wrap">
<div className="flex items-center gap-3 mt-1.5 text-xs dg-text-muted flex-wrap">
<span>{getMetricLabel(rule.metric)}</span>
{rule.metric !== 'offline' && (
<span className="text-slate-400">
<span className="dg-text-secondary">
{rule.operator} {rule.threshold}{rule.metric === 'port_down' ? '' : '%'}
</span>
)}
{rule.metric === 'port_down' && rule.port ? (
<span className="text-slate-400">端口 {rule.port}</span>
<span className="dg-text-secondary">端口 {rule.port}</span>
) : null}
{rule.duration ? <span className="text-slate-400">持续 {rule.duration}s</span> : null}
{rule.duration ? <span className="dg-text-secondary">持续 {rule.duration}s</span> : null}
</div>
</div>
</div>
<div className="flex items-center gap-2 shrink-0">
<Switch checked={rule.enabled !== false} onCheckedChange={() => handleToggleRule(rule)} />
<Button size="icon" variant="ghost" className="h-8 w-8 text-slate-400 hover:text-slate-100 hover:bg-slate-800" onClick={() => openEditRule(rule)}>
<Button size="icon" variant="ghost" className="h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]" onClick={() => openEditRule(rule)}>
<Pencil className="h-4 w-4" />
</Button>
<Button size="icon" variant="ghost" className="h-8 w-8 text-slate-400 hover:text-red-400 hover:bg-slate-800" onClick={() => handleDeleteRule(rule.id)}>
<Button size="icon" variant="ghost" className="h-8 w-8 dg-text-secondary hover:dg-text-red hover:bg-[var(--dg-bg-hover)]" onClick={() => handleDeleteRule(rule.id)}>
<Trash2 className="h-4 w-4" />
</Button>
</div>
frontend/src/components/agent/AgentMonitor.tsx
+43 -43
View File
@@ -129,9 +129,9 @@ export function AgentMonitor() {
const onlineCount = hosts.filter((h) => isOnline(h.last_report || h.last_reported_at || h.updated_at)).length;
const stats = [
{ label: '主机总数', value: hosts.length, icon: Server, color: 'text-blue-400' },
{ label: '在线', value: onlineCount, icon: Wifi, color: 'text-emerald-400' },
{ label: '离线', value: hosts.length - onlineCount, icon: WifiOff, color: 'text-red-400' },
{ label: '主机总数', value: hosts.length, icon: Server, color: 'dg-text-blue' },
{ label: '在线', value: onlineCount, icon: Wifi, color: 'dg-text-green' },
{ label: '离线', value: hosts.length - onlineCount, icon: WifiOff, color: 'dg-text-red' },
];
return (
@@ -139,8 +139,8 @@ export function AgentMonitor() {
{/* 页头 */}
<div className="flex items-center justify-between">
<div>
<h2 className="text-xl font-semibold text-slate-100">Agent 监控</h2>
<p className="text-sm text-slate-400 mt-0.5">实时监控 Agent 上报的主机指标</p>
<h2 className="text-xl font-semibold text-[var(--dg-text-primary)]">Agent 监控</h2>
<p className="text-sm dg-text-secondary mt-0.5">实时监控 Agent 上报的主机指标</p>
</div>
<div className="flex items-center gap-2">
<Button
@@ -148,7 +148,7 @@ export function AgentMonitor() {
size="sm"
onClick={() => loadLatest()}
disabled={refreshing}
className="bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700 hover:text-slate-100"
className="dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)]"
>
<RefreshCw className={`h-4 w-4 mr-1.5 ${refreshing ? 'animate-spin' : ''}`} />
刷新
@@ -167,14 +167,14 @@ export function AgentMonitor() {
{/* 统计卡片 */}
<div className="grid grid-cols-3 gap-3">
{stats.map((s) => (
<Card key={s.label} className="bg-slate-900 border-slate-800 py-4">
<Card key={s.label} className="dg-card py-4">
<CardContent className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center">
<div className="w-10 h-10 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center">
<s.icon className={`h-5 w-5 ${s.color}`} />
</div>
<div>
<div className="text-2xl font-bold text-slate-100">{s.value}</div>
<div className="text-xs text-slate-400">{s.label}</div>
<div className="text-2xl font-bold text-[var(--dg-text-primary)]">{s.value}</div>
<div className="text-xs dg-text-secondary">{s.label}</div>
</div>
</CardContent>
</Card>
@@ -183,17 +183,17 @@ export function AgentMonitor() {
{/* 主机列表 */}
{loading ? (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="flex items-center justify-center py-16">
<Loader2 className="h-6 w-6 animate-spin text-slate-500" />
<span className="ml-2 text-slate-400">加载中...</span>
<Loader2 className="h-6 w-6 animate-spin dg-text-muted" />
<span className="ml-2 dg-text-secondary">加载中...</span>
</CardContent>
</Card>
) : hosts.length === 0 ? (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="flex flex-col items-center justify-center py-16">
<Server className="h-10 w-10 text-slate-600 mb-3" />
<p className="text-slate-400">暂无 Agent 上报数据</p>
<Server className="h-10 w-10 dg-text-muted mb-3" />
<p className="dg-text-secondary">暂无 Agent 上报数据</p>
<Button
size="sm"
onClick={() => setWizardOpen(true)}
@@ -215,22 +215,22 @@ export function AgentMonitor() {
return (
<Card
key={host.hostname}
className="bg-slate-900 border-slate-800 hover:border-slate-700 transition-colors cursor-pointer py-4"
className="dg-card hover:border-[var(--dg-border)] transition-colors cursor-pointer py-4"
onClick={() => setSelectedHost(host)}
>
<CardContent className="space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2 min-w-0">
<Server className="h-4 w-4 text-slate-500 shrink-0" />
<span className="font-medium text-slate-100 truncate">{host.hostname}</span>
<Server className="h-4 w-4 dg-text-muted shrink-0" />
<span className="font-medium text-[var(--dg-text-primary)] truncate">{host.hostname}</span>
</div>
{online ? (
<Badge className="bg-emerald-500/15 text-emerald-400 border border-emerald-500/30">
<Badge className="bg-emerald-500/15 dg-text-green border border-emerald-500/30">
<Wifi className="h-3 w-3 mr-1" />
在线
</Badge>
) : (
<Badge className="bg-red-500/15 text-red-400 border border-red-500/30">
<Badge className="bg-red-500/15 dg-text-red border border-red-500/30">
<WifiOff className="h-3 w-3 mr-1" />
离线
</Badge>
@@ -245,7 +245,7 @@ export function AgentMonitor() {
</div>
{/* 端口 & 时间 */}
<div className="flex items-center justify-between text-xs text-slate-400">
<div className="flex items-center justify-between text-xs dg-text-secondary">
<span className="inline-flex items-center gap-1">
<Network className="h-3.5 w-3.5" />
{ports.length} 个端口
@@ -261,7 +261,7 @@ export function AgentMonitor() {
<Button
size="sm"
variant="outline"
className="flex-1 h-8 bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700"
className="flex-1 h-8 dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]"
onClick={() => openCommandDialog(host.hostname)}
>
<Terminal className="h-3.5 w-3.5 mr-1" />
@@ -270,7 +270,7 @@ export function AgentMonitor() {
<Button
size="sm"
variant="outline"
className="flex-1 h-8 bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700"
className="flex-1 h-8 dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]"
onClick={() => setSelectedHost(host)}
>
<Activity className="h-3.5 w-3.5 mr-1" />
@@ -293,13 +293,13 @@ export function AgentMonitor() {
{/* 远程命令弹窗 */}
<Dialog open={cmdOpen} onOpenChange={(v) => { if (!v) closeCommandDialog(); }}>
<DialogContent className="max-w-2xl bg-slate-900 border-slate-800 text-slate-100">
<DialogContent className="max-w-2xl dg-card text-[var(--dg-text-primary)]">
<DialogHeader>
<DialogTitle className="text-slate-100 flex items-center gap-2">
<Terminal className="h-5 w-5 text-blue-400" />
<DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<Terminal className="h-5 w-5 dg-text-blue" />
远程命令
</DialogTitle>
<DialogDescription className="text-slate-400">
<DialogDescription className="dg-text-secondary">
在 {cmdHost} 上执行命令
</DialogDescription>
</DialogHeader>
@@ -307,34 +307,34 @@ export function AgentMonitor() {
<div className="space-y-3">
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5">
<Label className="text-slate-300 text-xs">目标主机</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">目标主机</Label>
<Input
value={cmdHost}
onChange={(e) => setCmdHost(e.target.value)}
readOnly
className="h-9 bg-slate-800 border-slate-700 text-slate-200"
className="h-9 dg-input"
/>
</div>
</div>
<div className="space-y-1.5">
<Label className="text-slate-300 text-xs">命令</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">命令</Label>
<Textarea
value={cmdCommand}
onChange={(e) => setCmdCommand(e.target.value)}
placeholder="例如：free -m && df -h"
rows={3}
className="bg-slate-950 border-slate-700 text-slate-200 font-mono text-sm resize-none"
className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-sm resize-none"
/>
</div>
<div className="w-40 space-y-1.5">
<Label className="text-slate-300 text-xs">超时(秒)</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">超时(秒)</Label>
<Input
type="number"
value={cmdTimeout}
onChange={(e) => setCmdTimeout(Number(e.target.value) || 30)}
className="h-9 bg-slate-800 border-slate-700 text-slate-200"
className="h-9 dg-input"
/>
</div>
@@ -342,20 +342,20 @@ export function AgentMonitor() {
{cmdResult && (
<div className="space-y-1.5">
<div className="flex items-center gap-2">
<Label className="text-slate-300 text-xs">执行结果</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">执行结果</Label>
<Badge
className={
cmdResult.status === 'success' || cmdResult.status === 'done' || cmdResult.status === 'completed'
? 'bg-emerald-500/15 text-emerald-400 border border-emerald-500/30'
? 'bg-emerald-500/15 dg-text-green border border-emerald-500/30'
: cmdResult.status === 'timeout'
? 'bg-amber-500/15 text-amber-400 border border-amber-500/30'
: 'bg-red-500/15 text-red-400 border border-red-500/30'
? 'bg-amber-500/15 dg-text-yellow border border-amber-500/30'
: 'bg-red-500/15 dg-text-red border border-red-500/30'
}
>
{cmdResult.status}
</Badge>
</div>
<pre className="text-xs text-slate-300 font-mono whitespace-pre-wrap break-all bg-slate-950 border border-slate-800 rounded-lg p-3 max-h-48 overflow-auto">
<pre className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg p-3 max-h-48 overflow-auto">
{cmdResult.result || cmdResult.output || cmdResult.error || '无输出'}
</pre>
</div>
@@ -363,7 +363,7 @@ export function AgentMonitor() {
</div>
<DialogFooter className="gap-2">
<Button variant="outline" onClick={closeCommandDialog} className="border-slate-700 text-slate-300">
<Button variant="outline" onClick={closeCommandDialog} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
关闭
</Button>
<Button
@@ -391,12 +391,12 @@ export function AgentMonitor() {
function MetricBar({ icon: Icon, label, value }: { icon: ComponentType<{ className?: string }>; label: string; value: number }) {
return (
<div className="flex items-center gap-2">
<Icon className="h-3.5 w-3.5 text-slate-500 shrink-0" />
<span className="text-xs text-slate-400 w-8 shrink-0">{label}</span>
<Icon className="h-3.5 w-3.5 dg-text-muted shrink-0" />
<span className="text-xs dg-text-secondary w-8 shrink-0">{label}</span>
<div className="flex-1">
<Progress value={value} className={`h-1.5 ${value >= 90 ? '[&>[data-slot=progress-indicator]]:bg-red-500' : value >= 75 ? '[&>[data-slot=progress-indicator]]:bg-amber-500' : '[&>[data-slot=progress-indicator]]:bg-emerald-500'}`} />
</div>
<span className={`text-xs font-medium w-10 text-right ${value >= 90 ? 'text-red-400' : value >= 75 ? 'text-amber-400' : 'text-slate-300'}`}>
<span className={`text-xs font-medium w-10 text-right ${value >= 90 ? 'dg-text-red' : value >= 75 ? 'dg-text-yellow' : 'text-[var(--dg-text-secondary)]'}`}>
{value.toFixed(1)}%
</span>
</div>
frontend/src/components/agent/AgentRuleDialog.tsx
+22 -22
View File
@@ -104,31 +104,31 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
return (
<Dialog open={open} onOpenChange={(v) => { if (!v) onOpenChange(false); }}>
<DialogContent className="max-w-md bg-slate-900 border-slate-800 text-slate-100">
<DialogContent className="max-w-md dg-card text-[var(--dg-text-primary)]">
<DialogHeader>
<DialogTitle className="text-slate-100">{editingRule ? '编辑规则' : '新建规则'}</DialogTitle>
<DialogDescription className="text-slate-400">配置 Agent 指标告警规则</DialogDescription>
<DialogTitle className="text-[var(--dg-text-primary)]">{editingRule ? '编辑规则' : '新建规则'}</DialogTitle>
<DialogDescription className="dg-text-secondary">配置 Agent 指标告警规则</DialogDescription>
</DialogHeader>
<div className="space-y-3">
<div className="space-y-1.5">
<Label className="text-slate-300 text-xs">规则名称</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">规则名称</Label>
<Input
value={ruleForm.name}
onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })}
placeholder="例如：CPU 使用率告警"
className="h-9 bg-slate-800 border-slate-700 text-slate-200"
className="h-9 dg-input"
/>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5">
<Label className="text-slate-300 text-xs">监控指标</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">监控指标</Label>
<Select value={ruleForm.metric} onValueChange={(v) => setRuleForm({ ...ruleForm, metric: v })}>
<SelectTrigger className="h-9 bg-slate-800 border-slate-700 text-slate-200">
<SelectTrigger className="h-9 dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
<SelectContent className="dg-input">
{METRIC_OPTIONS.map((m) => (
<SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>
))}
@@ -136,12 +136,12 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
</Select>
</div>
<div className="space-y-1.5">
<Label className="text-slate-300 text-xs">严重程度</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">严重程度</Label>
<Select value={ruleForm.severity} onValueChange={(v) => setRuleForm({ ...ruleForm, severity: v })}>
<SelectTrigger className="h-9 bg-slate-800 border-slate-700 text-slate-200">
<SelectTrigger className="h-9 dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
<SelectContent className="dg-input">
{SEVERITY_OPTIONS.map((s) => (
<SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
))}
@@ -153,12 +153,12 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
{ruleForm.metric !== 'offline' && (
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5">
<Label className="text-slate-300 text-xs">比较运算符</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">比较运算符</Label>
<Select value={ruleForm.operator} onValueChange={(v) => setRuleForm({ ...ruleForm, operator: v })}>
<SelectTrigger className="h-9 bg-slate-800 border-slate-700 text-slate-200">
<SelectTrigger className="h-9 dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
<SelectContent className="dg-input">
{OPERATOR_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
))}
@@ -166,12 +166,12 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
</Select>
</div>
<div className="space-y-1.5">
<Label className="text-slate-300 text-xs">阈值 {ruleForm.metric !== 'port_down' ? '(%)' : ''}</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">阈值 {ruleForm.metric !== 'port_down' ? '(%)' : ''}</Label>
<Input
type="number"
value={ruleForm.threshold}
onChange={(e) => setRuleForm({ ...ruleForm, threshold: e.target.value })}
className="h-9 bg-slate-800 border-slate-700 text-slate-200"
className="h-9 dg-input"
/>
</div>
</div>
@@ -179,36 +179,36 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
{ruleForm.metric === 'port_down' && (
<div className="space-y-1.5">
<Label className="text-slate-300 text-xs">监控端口</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">监控端口</Label>
<Input
type="number"
value={ruleForm.port}
onChange={(e) => setRuleForm({ ...ruleForm, port: e.target.value })}
placeholder="例如：8080"
className="h-9 bg-slate-800 border-slate-700 text-slate-200"
className="h-9 dg-input"
/>
</div>
)}
<div className="space-y-1.5">
<Label className="text-slate-300 text-xs">持续时间(秒)</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">持续时间(秒)</Label>
<Input
type="number"
value={ruleForm.duration}
onChange={(e) => setRuleForm({ ...ruleForm, duration: e.target.value })}
placeholder="指标持续超限多久后告警"
className="h-9 bg-slate-800 border-slate-700 text-slate-200"
className="h-9 dg-input"
/>
</div>
<div className="flex items-center justify-between">
<Label className="text-slate-300 text-xs">启用规则</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">启用规则</Label>
<Switch checked={ruleForm.enabled} onCheckedChange={(v) => setRuleForm({ ...ruleForm, enabled: v })} />
</div>
</div>
<DialogFooter className="gap-2">
<Button variant="outline" onClick={() => onOpenChange(false)} className="border-slate-700 text-slate-300">取消</Button>
<Button variant="outline" onClick={() => onOpenChange(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">取消</Button>
<Button onClick={handleSave} disabled={saving} className="bg-blue-600 hover:bg-blue-700 text-white">
{saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : null}
{editingRule ? '保存' : '创建'}
frontend/src/components/agent/AgentWizard.tsx
+38 -38
View File
@@ -196,12 +196,12 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl bg-slate-900 border-slate-800 text-slate-100">
<DialogContent className="max-w-2xl dg-card text-[var(--dg-text-primary)]">
<DialogHeader>
<DialogTitle className="text-slate-100">
<DialogTitle className="text-[var(--dg-text-primary)]">
{server ? `部署 Agent → ${server.hostname}` : '部署 Agent'}
</DialogTitle>
<DialogDescription className="text-slate-400">
<DialogDescription className="dg-text-secondary">
{server
? `目标主机 ${server.hostname} (${server.ip})，选择安装方式：`
: '在目标主机上执行以下命令即可完成 Agent 安装与注册'
@@ -210,63 +210,63 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
</DialogHeader>
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="bg-slate-800 border border-slate-700">
<TabsTrigger value="auto" className="data-[state=active]:bg-slate-700">
<TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
<TabsTrigger value="auto" className="data-[state=active]:bg-[var(--dg-bg-active)]">
<Terminal className="h-4 w-4 mr-1.5" />
安装Agent
</TabsTrigger>
{server && (
<TabsTrigger value="ssh" className="data-[state=active]:bg-slate-700">
<TabsTrigger value="ssh" className="data-[state=active]:bg-[var(--dg-bg-active)]">
<Zap className="h-4 w-4 mr-1.5" />
SSH一键安装
</TabsTrigger>
)}
{!server && (
<TabsTrigger value="ssh" className="data-[state=active]:bg-slate-700 opacity-50 cursor-not-allowed" disabled>
<TabsTrigger value="ssh" className="data-[state=active]:bg-[var(--dg-bg-active)] opacity-50 cursor-not-allowed" disabled>
<Zap className="h-4 w-4 mr-1.5" />
SSH一键安装
</TabsTrigger>
)}
<TabsTrigger value="manual" className="data-[state=active]:bg-slate-700">
<TabsTrigger value="manual" className="data-[state=active]:bg-[var(--dg-bg-active)]">
手动安装
</TabsTrigger>
</TabsList>
{/* 自动安装 */}
<TabsContent value="auto" className="mt-4 space-y-3">
<p className="text-sm text-slate-400">
<p className="text-sm dg-text-secondary">
在目标主机执行以下命令，Agent 将自动下载、安装并启动：
</p>
<div className="relative rounded-lg bg-slate-950 border border-slate-800 p-4">
<pre className="text-xs text-emerald-400 font-mono whitespace-pre-wrap break-all pr-10">
<div className="relative rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-4">
<pre className="text-xs dg-text-green font-mono whitespace-pre-wrap break-all pr-10">
{installCommand}
</pre>
<Button
size="icon"
variant="ghost"
onClick={handleCopy}
className="absolute top-2 right-2 h-8 w-8 text-slate-400 hover:text-slate-100 hover:bg-slate-800"
className="absolute top-2 right-2 h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
title="复制到剪贴板"
>
{copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
{copied ? <Check className="h-4 w-4 dg-text-green" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
{/* 手动复制模式：当自动复制失败时展示可全选的文本域 */}
{showManualInput && (
<div className="rounded-lg bg-amber-950/30 border border-amber-800/50 p-4">
<p className="text-xs text-amber-400 mb-2">
<p className="text-xs dg-text-yellow mb-2">
⚠️ 自动复制失败。请点击下方输入框全选 (Ctrl+A) 后复制 (Ctrl+C)：
</p>
<textarea
readOnly
value={installCommand}
className="w-full h-24 bg-slate-950 border border-amber-800/30 text-emerald-400 font-mono text-xs p-3 rounded resize-none focus:outline-none focus:border-amber-600"
className="w-full h-24 bg-[var(--dg-bg-primary)] border border-amber-800/30 dg-text-green font-mono text-xs p-3 rounded resize-none focus:outline-none focus:border-amber-600"
onClick={(e) => (e.target as HTMLTextAreaElement).select()}
/>
</div>
)}
<div className="flex items-start gap-2 text-xs text-slate-500">
<div className="flex items-start gap-2 text-xs dg-text-muted">
<Terminal className="h-3.5 w-3.5 mt-0.5 shrink-0" />
<span>
服务器地址已自动检测 — 安装脚本与 Agent 上报均使用 {origin}（通过 Nginx/Vite proxy 转发到后端）。安装成功后将自动连接并开始上报指标。
@@ -277,19 +277,19 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
{/* SSH 一键安装 */}
<TabsContent value="ssh" className="mt-4 space-y-4">
{!server ? (
<div className="text-center py-12 text-slate-400">
<div className="text-center py-12 dg-text-secondary">
<Server className="h-10 w-10 mx-auto mb-3 opacity-50" />
<p className="text-sm font-medium mb-1">未选择目标主机</p>
<p className="text-xs">请先在主机列表中勾选一台主机，再点击「安装 Agent」打开此页面</p>
</div>
) : (
<>
<div className="rounded-lg bg-slate-950 border border-slate-800 p-4">
<div className="rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-4">
<div className="flex items-center gap-3 mb-3">
<Server className="h-5 w-5 text-blue-400" />
<Server className="h-5 w-5 dg-text-blue" />
<div>
<p className="text-sm font-medium text-slate-200">{server.hostname}</p>
<code className="text-xs text-slate-400">{server.ip}</code>
<p className="text-sm font-medium text-[var(--dg-text-primary)]">{server.hostname}</p>
<code className="text-xs dg-text-secondary">{server.ip}</code>
</div>
</div>
@@ -302,49 +302,49 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<Label className="text-xs text-slate-400">用户名</Label>
<Label className="text-xs dg-text-secondary">用户名</Label>
<Input
value={sshUsername}
onChange={e => setSshUsername(e.target.value)}
placeholder="root"
className="h-8 text-sm bg-slate-900 border-slate-700 text-slate-200 mt-1"
className="h-8 text-sm dg-input text-[var(--dg-text-primary)] mt-1"
/>
</div>
<div className="flex items-end gap-1">
<div className="flex-1">
<Label className="text-xs text-slate-400">密码</Label>
<Label className="text-xs dg-text-secondary">密码</Label>
<Input
type="password"
value={sshPassword}
onChange={e => { setSshPassword(e.target.value); setAuthType('password'); }}
placeholder="******"
className="h-8 text-sm bg-slate-900 border-slate-700 text-slate-200 mt-1"
className="h-8 text-sm dg-input text-[var(--dg-text-primary)] mt-1"
/>
</div>
<span className="text-xs text-slate-500 px-1 pb-1">或</span>
<span className="text-xs dg-text-muted px-1 pb-1">或</span>
<Button variant="ghost" size="sm"
onClick={() => { setAuthType('key'); setSshPassword(''); }}
className={`text-xs h-7 px-2 ${authType==='key'?'text-blue-400':'text-slate-500'}`}>
className={`text-xs h-7 px-2 ${authType==='key'?'dg-text-blue':'dg-text-muted'}`}>
密钥
</Button>
</div>
</div>
{authType === 'key' && (
<div>
<Label className="text-xs text-slate-400">SSH 私钥（PEM 格式）</Label>
<Label className="text-xs dg-text-secondary">SSH 私钥（PEM 格式）</Label>
<textarea
value={sshKey}
onChange={e => setSshKey(e.target.value)}
placeholder="-----BEGIN OPENSSH PRIVATE KEY-----&#10;...&#10;-----END OPENSSH PRIVATE KEY-----"
rows={3}
className="w-full mt-1 bg-slate-900 border border-slate-700 text-slate-200 font-mono text-xs p-2 rounded-md resize-none"
className="w-full mt-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-xs p-2 rounded-md resize-none"
/>
</div>
)}
</div>
)}
<p className="text-sm text-slate-400 mb-4">
<p className="text-sm dg-text-secondary mb-4">
通过 SSH 远程连接到目标主机，自动下载并安装 Agent，完成后立即启动运行。
</p>
<Button
@@ -365,7 +365,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
)}
</Button>
</div>
<div className="flex items-start gap-2 text-xs text-slate-500">
<div className="flex items-start gap-2 text-xs dg-text-muted">
<Terminal className="h-3.5 w-3.5 mt-0.5 shrink-0" />
<span>
系统将通过 SSH 连接 {server.ip}，执行安装脚本。请确保服务器 SSH 凭据已正确配置（编辑服务器可修改密码/密钥）。
@@ -379,16 +379,16 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
<TabsContent value="manual" className="mt-4 space-y-4">
<div className="max-h-[420px] overflow-y-auto space-y-3 pr-1">
{manualSteps.map((step) => (
<div key={step.title} className="rounded-lg bg-slate-950 border border-slate-800 overflow-hidden">
<div className="flex items-center gap-2 px-4 py-2.5 bg-slate-800/50">
<step.icon className="h-4 w-4 text-blue-400" />
<span className="text-sm font-medium text-slate-200">{step.title}</span>
<div key={step.title} className="rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] overflow-hidden">
<div className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)]/50">
<step.icon className="h-4 w-4 dg-text-blue" />
<span className="text-sm font-medium text-[var(--dg-text-primary)]">{step.title}</span>
</div>
<div className="p-3 space-y-1">
{step.commands.map((cmd, idx) => (
<div key={idx} className="flex items-start gap-2">
<span className="text-slate-600 font-mono text-xs select-none mt-0.5">$</span>
<code className="text-xs text-slate-300 font-mono whitespace-pre-wrap break-all flex-1">
<span className="dg-text-muted font-mono text-xs select-none mt-0.5">$</span>
<code className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all flex-1">
{cmd}
</code>
</div>
@@ -397,7 +397,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
</div>
))}
</div>
<p className="text-xs text-slate-500">
<p className="text-xs dg-text-muted">
完成上述步骤后，Agent 将作为 systemd 服务运行并自动上报指标。
</p>
</TabsContent>
frontend/src/components/agent/HostDetailDialog.tsx
+20 -20
View File
@@ -72,15 +72,15 @@ export function HostDetailDialog({
return (
<Dialog open={!!host} onOpenChange={(v) => { if (!v) onClose(); }}>
<DialogContent className="max-w-3xl bg-slate-900 border-slate-800 text-slate-100">
<DialogContent className="max-w-3xl dg-card text-[var(--dg-text-primary)]">
<DialogHeader>
<DialogTitle className="text-slate-100 flex items-center gap-2">
<Server className="h-5 w-5 text-blue-400" />
<DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<Server className="h-5 w-5 dg-text-blue" />
{host.hostname}
{online ? (
<Badge className="bg-emerald-500/15 text-emerald-400 border border-emerald-500/30">在线</Badge>
<Badge className="bg-emerald-500/15 dg-text-green border border-emerald-500/30">在线</Badge>
) : (
<Badge className="bg-red-500/15 text-red-400 border border-red-500/30">离线</Badge>
<Badge className="bg-red-500/15 dg-text-red border border-red-500/30">离线</Badge>
)}
</DialogTitle>
<DialogDescription className="sr-only">查看主机详情和指标趋势</DialogDescription>
@@ -98,28 +98,28 @@ export function HostDetailDialog({
{/* 趋势图 */}
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-slate-200 flex items-center gap-1.5">
<Activity className="h-4 w-4 text-blue-400" />
<span className="text-sm font-medium text-[var(--dg-text-primary)] flex items-center gap-1.5">
<Activity className="h-4 w-4 dg-text-blue" />
指标趋势
</span>
<Select value={String(hours)} onValueChange={(v) => setHours(Number(v))}>
<SelectTrigger size="sm" className="h-7 w-28 bg-slate-800 border-slate-700 text-slate-300 text-xs">
<SelectTrigger size="sm" className="h-7 w-28 dg-input text-[var(--dg-text-secondary)] text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
<SelectContent className="dg-input">
<SelectItem value="1">最近 1 小时</SelectItem>
<SelectItem value="6">最近 6 小时</SelectItem>
<SelectItem value="24">最近 24 小时</SelectItem>
</SelectContent>
</Select>
</div>
<div className="h-56 rounded-lg bg-slate-950 border border-slate-800 p-3">
<div className="h-56 rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-3">
{loading ? (
<div className="h-full flex items-center justify-center">
<Loader2 className="h-5 w-5 animate-spin text-slate-500" />
<Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
</div>
) : chartData.length === 0 ? (
<div className="h-full flex items-center justify-center text-sm text-slate-500">暂无历史数据</div>
<div className="h-full flex items-center justify-center text-sm dg-text-muted">暂无历史数据</div>
) : (
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={chartData} margin={{ top: 5, right: 5, bottom: 0, left: -20 }}>
@@ -154,16 +154,16 @@ export function HostDetailDialog({
{/* 端口列表 */}
<div>
<span className="text-sm font-medium text-slate-200 flex items-center gap-1.5 mb-2">
<Network className="h-4 w-4 text-blue-400" />
<span className="text-sm font-medium text-[var(--dg-text-primary)] flex items-center gap-1.5 mb-2">
<Network className="h-4 w-4 dg-text-blue" />
端口发现 ({ports.length})
</span>
{ports.length === 0 ? (
<p className="text-xs text-slate-500">暂无端口数据</p>
<p className="text-xs dg-text-muted">暂无端口数据</p>
) : (
<div className="flex flex-wrap gap-1.5 max-h-32 overflow-y-auto">
{ports.map((p, idx) => (
<Badge key={idx} className="bg-slate-800 text-slate-300 border border-slate-700">
<Badge key={idx} className="bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border border-[var(--dg-border)]">
<Network className="h-3 w-3 mr-1" />
{p.port ?? p}
</Badge>
@@ -181,7 +181,7 @@ export function HostDetailDialog({
<Terminal className="h-4 w-4 mr-1.5" />
远程命令
</Button>
<Button variant="outline" onClick={onClose} className="border-slate-700 text-slate-300">
<Button variant="outline" onClick={onClose} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
关闭
</Button>
</DialogFooter>
@@ -192,9 +192,9 @@ export function HostDetailDialog({
function InfoCell({ label, value }: { label: string; value: string }) {
return (
<div className="bg-slate-950 border border-slate-800 rounded-lg px-3 py-2">
<div className="text-xs text-slate-500">{label}</div>
<div className="text-sm text-slate-200 font-medium truncate">{value}</div>
<div className="bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg px-3 py-2">
<div className="text-xs dg-text-muted">{label}</div>
<div className="text-sm text-[var(--dg-text-primary)] font-medium truncate">{value}</div>
</div>
);
}
frontend/src/components/agent/agentAlertHelper.tsx
+3 -3
View File
@@ -23,9 +23,9 @@ export const OPERATOR_OPTIONS = [
// 严重程度选项（含徽章配色） // Logan.Li
export const SEVERITY_OPTIONS = [
{ value: 'critical', label: '严重', color: 'bg-red-500/15 text-red-400 border-red-500/30' },
{ value: 'warning', label: '警告', color: 'bg-amber-500/15 text-amber-400 border-amber-500/30' },
{ value: 'info', label: '提示', color: 'bg-blue-500/15 text-blue-400 border-blue-500/30' },
{ value: 'critical', label: '严重', color: 'bg-red-500/15 dg-text-red border-red-500/30' },
{ value: 'warning', label: '警告', color: 'bg-amber-500/15 dg-text-yellow border-amber-500/30' },
{ value: 'info', label: '提示', color: 'bg-blue-500/15 dg-text-blue border-blue-500/30' },
];
// 获取指标中文标签 // Logan.Li
frontend/src/components/aiops/AIAlertAnalyzer.tsx
+41 -38
View File
@@ -25,6 +25,8 @@ import {
} from './analyzerHelpers';
import { AIAnalysisResult } from './AIAnalysisResult';
import { AutoFixDialog } from './AutoFixDialog';
import { PageShell } from '@/components/layout/PageShell';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
// Parse LLM JSON response (may have markdown fences) into AIAnalysis
@@ -125,45 +127,47 @@ export function AIAlertAnalyzer() {
const getSeverityIcon = (severity: string) => {
switch (severity) {
case 'critical':
return <XCircle className="h-4 w-4 text-red-400" />;
return <XCircle className="h-4 w-4 dg-text-red" />;
case 'warning':
return <AlertCircle className="h-4 w-4 text-amber-400" />;
return <AlertCircle className="h-4 w-4 dg-text-yellow" />;
default:
return <CheckCircle className="h-4 w-4 text-blue-400" />;
return <CheckCircle className="h-4 w-4 dg-text-blue" />;
}
};
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center">
<Brain className="h-5 w-5 text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-slate-100">AI 告警智能分析</h1>
<p className="text-sm text-slate-500">基于大模型的告警根因分析和自动修复建议</p>
</div>
</div>
<div className="flex items-center gap-2">
<Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
<Sparkles className="h-3 w-3 mr-1" />
AI 引擎运行中
</Badge>
</div>
</div>
const activeCount = alerts.filter(a => a.status === 'active').length;
<div className="grid grid-cols-2 gap-6 h-[calc(100vh-200px)]">
return (
<PageShell
variant="workspace"
title="AI 告警智能分析"
subtitle="基于大模型的告警根因分析和自动修复建议"
icon={<Brain className="h-5 w-5" />}
loading={loading}
metrics={(
<StatStrip
items={[
{ label: '告警总数', value: alerts.length, color: 'blue' },
{ label: '活跃', value: activeCount, color: 'red' },
]}
/>
)}
actions={(
<Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
<Sparkles className="h-3 w-3 mr-1" />AI 引擎运行中
</Badge>
)}
contentClassName="grid grid-cols-2 gap-6 h-[calc(100vh-200px)]"
>
{/* 告警列表（左侧） */}
<Card className="bg-slate-800 border-slate-700 flex flex-col">
<CardHeader className="border-b border-slate-700 pb-3">
<Card className="dg-card flex flex-col">
<CardHeader className="border-b border-[var(--dg-border)] pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-slate-100 flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-amber-400" />
<CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<AlertTriangle className="h-5 w-5 dg-text-yellow" />
活跃告警
</CardTitle>
<Badge className="bg-red-500/10 text-red-400 border-red-500/30">
<Badge className="bg-red-500/10 dg-text-red border-red-500/30">
{alerts.filter(a => a.status === 'active').length} 个活跃
</Badge>
</div>
@@ -172,11 +176,11 @@ export function AIAlertAnalyzer() {
<CardContent className="p-4 space-y-3">
{loading ? (
<div className="flex flex-col items-center justify-center h-32">
<Loader2 className="h-6 w-6 animate-spin text-slate-500 mb-2" />
<p className="text-sm text-slate-500">加载告警数据...</p>
<Loader2 className="h-6 w-6 animate-spin dg-text-muted mb-2" />
<p className="text-sm dg-text-muted">加载告警数据...</p>
</div>
) : alerts.length === 0 ? (
<div className="flex flex-col items-center justify-center h-32 text-slate-500">
<div className="flex flex-col items-center justify-center h-32 dg-text-muted">
<CheckCircle className="h-8 w-8 mb-2 opacity-50" />
<p className="text-sm">暂无告警事件</p>
</div>
@@ -187,21 +191,21 @@ export function AIAlertAnalyzer() {
className={`p-4 rounded-lg border cursor-pointer transition-all ${
selectedAlert?.id === alert.id
? 'border-purple-500 bg-purple-500/10'
: 'border-slate-700 bg-slate-800/50 hover:border-slate-600'
: 'border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/50 hover:border-[var(--dg-border-hover)]'
}`}
onClick={() => handleAnalyze(alert)}
>
<div className="flex items-start justify-between mb-2">
<div className="flex items-center gap-2">
{getSeverityIcon(alert.severity)}
<span className="font-medium text-slate-100">{alert.name}</span>
<span className="font-medium text-[var(--dg-text-primary)]">{alert.name}</span>
</div>
<Badge variant="outline" className={getSeverityColor(alert.severity)}>
{alert.severity === 'critical' ? '严重' : alert.severity === 'warning' ? '警告' : '提示'}
</Badge>
</div>
<div className="text-sm text-slate-400 mb-2">{alert.description}</div>
<div className="flex items-center gap-4 text-xs text-slate-500">
<div className="text-sm dg-text-secondary mb-2">{alert.description}</div>
<div className="flex items-center gap-4 text-xs dg-text-muted">
<span className="flex items-center gap-1">
<Server className="h-3 w-3" />
{alert.source}
@@ -229,7 +233,6 @@ export function AIAlertAnalyzer() {
analysis={analysis}
onAutoFix={handleAutoFix}
/>
</div>
{/* 自动修复脚本确认弹窗（子组件） */}
<AutoFixDialog
@@ -237,6 +240,6 @@ export function AIAlertAnalyzer() {
onOpenChange={setShowScriptDialog}
script={analysis?.autoFixScript}
/>
</div>
</PageShell>
);
}
frontend/src/components/aiops/AIAnalysisResult.tsx
+33 -33
View File
@@ -15,105 +15,105 @@ interface AIAnalysisResultProps {
export function AIAnalysisResult({ selectedAlert, isAnalyzing, analysis, onAutoFix }: AIAnalysisResultProps) {
return (
<Card className="bg-slate-800 border-slate-700 flex flex-col">
<CardHeader className="border-b border-slate-700 pb-3">
<CardTitle className="text-slate-100 flex items-center gap-2">
<Sparkles className="h-5 w-5 text-purple-400" />
<Card className="dg-card flex flex-col">
<CardHeader className="border-b border-[var(--dg-border)] pb-3">
<CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<Sparkles className="h-5 w-5 dg-text-purple" />
AI 分析结果
</CardTitle>
</CardHeader>
<ScrollArea className="flex-1">
<CardContent className="p-4">
{!selectedAlert ? (
<div className="flex flex-col items-center justify-center h-64 text-slate-500">
<div className="flex flex-col items-center justify-center h-64 dg-text-muted">
<Brain className="h-16 w-16 mb-4 opacity-30" />
<p>选择左侧告警进行AI智能分析</p>
</div>
) : isAnalyzing ? (
<div className="flex flex-col items-center justify-center h-64">
<Loader2 className="h-8 w-8 animate-spin text-purple-400 mb-4" />
<p className="text-slate-400">AI正在分析告警根因...</p>
<p className="text-xs text-slate-500 mt-2">正在关联日志、指标和历史案例</p>
<Loader2 className="h-8 w-8 animate-spin dg-text-purple mb-4" />
<p className="dg-text-secondary">AI正在分析告警根因...</p>
<p className="text-xs dg-text-muted mt-2">正在关联日志、指标和历史案例</p>
</div>
) : analysis ? (
<div className="space-y-4">
{/* 置信度 */}
<div className="flex items-center justify-between p-3 bg-purple-500/10 rounded-lg border border-purple-500/30">
<div className="flex items-center gap-2">
<Brain className="h-5 w-5 text-purple-400" />
<span className="text-slate-300">分析置信度</span>
<Brain className="h-5 w-5 dg-text-purple" />
<span className="text-[var(--dg-text-secondary)]">分析置信度</span>
</div>
<div className="flex items-center gap-2">
<div className="w-32 h-2 bg-slate-700 rounded-full overflow-hidden">
<div className="w-32 h-2 bg-[var(--dg-bg-active)] rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-purple-500 to-pink-500"
style={{ width: `${analysis.confidence}%` }}
/>
</div>
<span className="text-purple-400 font-bold">{analysis.confidence}%</span>
<span className="dg-text-purple font-bold">{analysis.confidence}%</span>
</div>
</div>
{/* 根因分析 */}
<div className="space-y-2">
<h4 className="text-sm font-medium text-slate-300 flex items-center gap-2">
<AlertCircle className="h-4 w-4 text-red-400" />
<h4 className="text-sm font-medium text-[var(--dg-text-secondary)] flex items-center gap-2">
<AlertCircle className="h-4 w-4 dg-text-red" />
根因分析
</h4>
<div className="p-3 bg-slate-900 rounded-lg border border-slate-700">
<p className="text-sm text-slate-300 leading-relaxed">{analysis.rootCause}</p>
<div className="p-3 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]">
<p className="text-sm text-[var(--dg-text-secondary)] leading-relaxed">{analysis.rootCause}</p>
</div>
</div>
{/* 影响范围 */}
<div className="space-y-2">
<h4 className="text-sm font-medium text-slate-300 flex items-center gap-2">
<TrendingUp className="h-4 w-4 text-amber-400" />
<h4 className="text-sm font-medium text-[var(--dg-text-secondary)] flex items-center gap-2">
<TrendingUp className="h-4 w-4 dg-text-yellow" />
影响范围
</h4>
<div className="p-3 bg-slate-900 rounded-lg border border-slate-700">
<p className="text-sm text-slate-300 leading-relaxed">{analysis.impact}</p>
<div className="p-3 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]">
<p className="text-sm text-[var(--dg-text-secondary)] leading-relaxed">{analysis.impact}</p>
</div>
</div>
{/* 修复建议 */}
<div className="space-y-2">
<h4 className="text-sm font-medium text-slate-300 flex items-center gap-2">
<CheckCircle className="h-4 w-4 text-emerald-400" />
<h4 className="text-sm font-medium text-[var(--dg-text-secondary)] flex items-center gap-2">
<CheckCircle className="h-4 w-4 dg-text-green" />
修复建议
</h4>
<div className="space-y-2">
{analysis.recommendations.map((rec, idx) => (
<div
key={idx}
className="flex items-start gap-2 p-2 bg-slate-900 rounded-lg border border-slate-700"
className="flex items-start gap-2 p-2 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]"
>
<span className="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-xs">
<span className="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500/20 dg-text-green flex items-center justify-center text-xs">
{idx + 1}
</span>
<span className="text-sm text-slate-300">{rec}</span>
<span className="text-sm text-[var(--dg-text-secondary)]">{rec}</span>
</div>
))}
</div>
</div>
{/* 相似历史案例 */}
<div className="flex items-center gap-2 p-3 bg-slate-900 rounded-lg border border-slate-700">
<FileText className="h-4 w-4 text-blue-400" />
<span className="text-sm text-slate-400">
发现 <span className="text-blue-400 font-medium">{analysis.similarCases}</span> 个相似历史案例
<div className="flex items-center gap-2 p-3 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]">
<FileText className="h-4 w-4 dg-text-blue" />
<span className="text-sm dg-text-secondary">
发现 <span className="dg-text-blue font-medium">{analysis.similarCases}</span> 个相似历史案例
</span>
</div>
{/* 自动修复脚本 */}
{analysis.autoFixScript && (
<div className="space-y-2">
<h4 className="text-sm font-medium text-slate-300 flex items-center gap-2">
<Terminal className="h-4 w-4 text-purple-400" />
<h4 className="text-sm font-medium text-[var(--dg-text-secondary)] flex items-center gap-2">
<Terminal className="h-4 w-4 dg-text-purple" />
自动修复脚本
</h4>
<div className="p-3 bg-slate-950 rounded-lg border border-slate-700">
<pre className="text-xs text-slate-400 overflow-x-auto">{analysis.autoFixScript}</pre>
<div className="p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
<pre className="text-xs dg-text-secondary overflow-x-auto">{analysis.autoFixScript}</pre>
</div>
<Button
className="w-full bg-purple-600 hover:bg-purple-700"
frontend/src/components/aiops/AIOpsAssistant.tsx
+45 -57
View File
@@ -26,6 +26,7 @@ import {
Square,
} from 'lucide-react';
import type { JsonData } from '@/types/common';
import { PageShell } from '@/components/layout/PageShell';
const defaultConfig: LLMConfigData = {
provider: 'openai',
@@ -295,41 +296,30 @@ export function AIOpsAssistant() {
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
<Brain className="h-5 w-5 text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-slate-100">AIOps 智能助手</h1>
<p className="text-sm text-slate-500">AI 驱动的智能运维助手</p>
</div>
</div>
<div className="flex items-center gap-3">
{configReady ? (
<Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
<CheckCircle2 className="h-3 w-3 mr-1" />
{config.model}
</Badge>
) : null}
</div>
</div>
<div className="grid grid-cols-4 gap-6 h-[calc(100vh-200px)]">
<PageShell
variant="workspace"
title="AIOps 智能助手"
subtitle="AI 驱动的智能运维助手"
icon={<Brain className="h-5 w-5" />}
actions={configReady ? (
<Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
<CheckCircle2 className="h-3 w-3 mr-1" />{config.model}
</Badge>
) : undefined}
contentClassName="grid grid-cols-4 gap-6 h-[calc(100vh-200px)]"
>
{/* Sidebar */}
<div className="col-span-1 space-y-4">
<Card className="bg-slate-800 border-slate-700">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-300">快速操作</CardTitle>
<CardTitle className="text-sm text-[var(--dg-text-secondary)]">快速操作</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{quickActions.map((action) => (
<Button
key={action.id}
variant="ghost"
className="w-full justify-start text-slate-300 hover:text-slate-100 hover:bg-slate-700"
className="w-full justify-start text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
disabled={isLoading || contextLoading !== null}
onClick={() => handleQuickAction(action)}
>
@@ -340,32 +330,32 @@ export function AIOpsAssistant() {
)}
<span className="text-sm">{action.name}</span>
{configReady && action.contextLoader && (
<span className="ml-auto text-[10px] text-emerald-400/60 shrink-0">实时</span>
<span className="ml-auto text-[10px] dg-text-green/60 shrink-0">实时</span>
)}
</Button>
))}
</CardContent>
</Card>
<Card className="bg-slate-800 border-slate-700">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-300">能力展示</CardTitle>
<CardTitle className="text-sm text-[var(--dg-text-secondary)]">能力展示</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center gap-2 text-sm text-slate-400">
<AlertTriangle className="h-4 w-4 text-amber-400" />
<div className="flex items-center gap-2 text-sm dg-text-secondary">
<AlertTriangle className="h-4 w-4 dg-text-yellow" />
<span>智能告警分析</span>
</div>
<div className="flex items-center gap-2 text-sm text-slate-400">
<Activity className="h-4 w-4 text-blue-400" />
<div className="flex items-center gap-2 text-sm dg-text-secondary">
<Activity className="h-4 w-4 dg-text-blue" />
<span>性能瓶颈识别</span>
</div>
<div className="flex items-center gap-2 text-sm text-slate-400">
<FileText className="h-4 w-4 text-emerald-400" />
<div className="flex items-center gap-2 text-sm dg-text-secondary">
<FileText className="h-4 w-4 dg-text-green" />
<span>自动报告生成</span>
</div>
<div className="flex items-center gap-2 text-sm text-slate-400">
<Terminal className="h-4 w-4 text-purple-400" />
<div className="flex items-center gap-2 text-sm dg-text-secondary">
<Terminal className="h-4 w-4 dg-text-purple" />
<span>脚本自动生成</span>
</div>
</CardContent>
@@ -373,22 +363,22 @@ export function AIOpsAssistant() {
</div>
{/* Chat Area */}
<Card className="col-span-3 bg-slate-800 border-slate-700 flex flex-col">
<CardHeader className="border-b border-slate-700 pb-3">
<Card className="col-span-3 dg-card flex flex-col">
<CardHeader className="border-b border-[var(--dg-border)] pb-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Bot className="h-5 w-5 text-purple-400" />
<span className="font-medium text-slate-100">AI 助手</span>
<Bot className="h-5 w-5 dg-text-purple" />
<span className="font-medium text-[var(--dg-text-primary)]">AI 助手</span>
{configReady ? (
<Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10 text-xs">
<Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10 text-xs">
<span className="w-2 h-2 rounded-full bg-emerald-400 mr-1 animate-pulse" />
在线
</Badge>
) : (
<Badge variant="outline" className="border-slate-600 text-slate-400 text-xs">离线</Badge>
<Badge variant="outline" className="border-[var(--dg-border-hover)] dg-text-secondary text-xs">离线</Badge>
)}
</div>
<Button variant="ghost" size="sm" className="text-slate-400" onClick={handleNewChat} disabled={messages.length === 0}>
<Button variant="ghost" size="sm" className="dg-text-secondary" onClick={handleNewChat} disabled={messages.length === 0}>
<RotateCw className="h-4 w-4 mr-1" />
新对话
</Button>
@@ -398,14 +388,14 @@ export function AIOpsAssistant() {
<ScrollArea className="flex-1 p-4">
<div className="space-y-4">
{messages.length === 0 && !isLoading && (
<div className="flex flex-col items-center justify-center py-16 text-slate-500">
<div className="flex flex-col items-center justify-center py-16 dg-text-muted">
<MessageSquare className="h-10 w-10 mb-3 opacity-30" />
<p>{configReady ? '暂无对话记录，输入问题开始与 AI 助手对话' : 'AI 助手尚未配置大模型'}</p>
{!configReady && (
<Button
variant="outline"
size="sm"
className="mt-4 border-slate-700 text-slate-300 hover:text-purple-400"
className="mt-4 dg-btn-secondary hover:dg-text-purple"
onClick={() => navigate('/ai-llm-config')}
>
<Settings className="h-4 w-4 mr-1" />
@@ -428,14 +418,14 @@ export function AIOpsAssistant() {
<div
className={`inline-block rounded-lg p-3 text-left whitespace-pre-wrap break-words ${
message.isError
? 'bg-red-900/30 border border-red-500/30 text-red-300'
? 'bg-red-900/30 border border-red-500/30 dg-text-red'
: message.role === 'assistant'
? 'bg-slate-700 text-slate-100'
? 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)]'
: 'bg-blue-600 text-white'
}`}
>
{isStreaming ? (
<div className="flex items-center gap-2 text-slate-400">
<div className="flex items-center gap-2 dg-text-secondary">
<Loader2 className="h-4 w-4 animate-spin" />
<span className="text-sm">思考中...</span>
</div>
@@ -447,9 +437,9 @@ export function AIOpsAssistant() {
<span className="inline-block w-2 h-4 ml-0.5 bg-purple-400 animate-pulse align-middle" />
)}
</div>
<div className="text-xs text-slate-500 mt-1">
<div className="text-xs dg-text-muted mt-1">
{fmtTime(message.timestamp)}
{message.isStopped && <span className="ml-2 text-slate-600">（已停止）</span>}
{message.isStopped && <span className="ml-2 dg-text-muted">（已停止）</span>}
</div>
</div>
</div>
@@ -460,14 +450,14 @@ export function AIOpsAssistant() {
</div>
</ScrollArea>
<CardContent className="border-t border-slate-700 pt-4">
<CardContent className="border-t border-[var(--dg-border)] pt-4">
<div className="flex gap-2">
<Input
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSend()}
placeholder={configReady ? '输入运维问题，或选择左侧快速操作...' : '请先配置大模型...'}
className="flex-1 bg-slate-900 border-slate-700 text-slate-100"
className="flex-1 dg-input"
disabled={isLoading}
/>
<Button className="bg-purple-600 hover:bg-purple-700" onClick={handleSend} disabled={isLoading || !input.trim()}>
@@ -477,7 +467,7 @@ export function AIOpsAssistant() {
{isLoading && (
<Button
variant="outline"
className="border-red-500/40 text-red-400 hover:bg-red-500/10"
className="border-red-500/40 dg-text-red hover:bg-red-500/10"
onClick={() => abortRef.current?.abort()}
title="停止生成"
>
@@ -487,8 +477,6 @@ export function AIOpsAssistant() {
</div>
</CardContent>
</Card>
</div>
</div>
</PageShell>
);
}
frontend/src/components/aiops/AIPredictiveAnalytics.tsx
+82 -92
View File
@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { StatStrip } from '@/components/ui/stat-strip';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Tabs, TabsContent } from '@/components/ui/tabs';
import {
Select,
SelectContent,
@@ -36,6 +36,7 @@ import {
trendColorClass,
type CapacityForecast,
} from './predictUtils';
import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common';
// 重新导出 CapacityForecast，兼容已有 import 路径 './AIPredictiveAnalytics'
@@ -45,6 +46,7 @@ export function AIPredictiveAnalytics() {
const [selectedTimeRange, setSelectedTimeRange] = useState('24h');
const [isAnalyzing, setIsAnalyzing] = useState(false);
const [loading, setLoading] = useState(true);
const [activeTab, setActiveTab] = useState('metrics');
// 原始数据
const [rawMetrics, setRawMetrics] = useState<JsonData[]>([]);
@@ -97,81 +99,69 @@ export function AIPredictiveAnalytics() {
const getTrendIcon = (trend: string) => {
switch (trend) {
case 'up':
return <TrendingUp className="h-4 w-4 text-red-400" />;
return <TrendingUp className="h-4 w-4 dg-text-red" />;
case 'down':
return <TrendingDown className="h-4 w-4 text-emerald-400" />;
return <TrendingDown className="h-4 w-4 dg-text-green" />;
default:
return <Minus className="h-4 w-4 text-slate-400" />;
return <Minus className="h-4 w-4 dg-text-secondary" />;
}
};
const pageTabs = [
{ id: 'metrics', label: '指标预测' },
{ id: 'capacity', label: '容量规划' },
{ id: 'anomaly', label: '异常预测' },
];
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center">
<Brain className="h-5 w-5 text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-slate-100">AI 预测分析</h1>
<p className="text-sm text-slate-500">基于实时指标时序数据的线性回归预测与容量规划</p>
</div>
</div>
<div className="flex items-center gap-2">
<PageShell
variant="list"
title="AI 预测分析"
subtitle="基于实时指标时序数据的线性回归预测与容量规划"
icon={<Brain className="h-5 w-5" />}
tabs={pageTabs}
activeTab={activeTab}
onTabChange={setActiveTab}
metrics={(
<StatStrip
items={[
{ label: '置信度', value: `${accuracy}%`, color: 'emerald' },
{ label: '高风险', value: predictedAlertCount, color: 'amber' },
{ label: '容量预警', value: capacityWarningCount, color: 'red' },
{ label: '指标', value: predictions.length, color: 'purple' },
]}
/>
)}
actions={(
<>
<Select value={selectedTimeRange} onValueChange={setSelectedTimeRange}>
<SelectTrigger className="w-32 bg-slate-800 border-slate-700 text-slate-100">
<SelectTrigger className="w-32 dg-input">
<Calendar className="h-4 w-4 mr-2" />
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectContent className="dg-input">
<SelectItem value="1h">1小时</SelectItem>
<SelectItem value="24h">24小时</SelectItem>
<SelectItem value="7d">7天</SelectItem>
<SelectItem value="30d">30天</SelectItem>
</SelectContent>
</Select>
<Button variant="outline" className="border-slate-700 text-slate-300" onClick={handleRefresh}>
<Button variant="outline" className="dg-btn-secondary" onClick={handleRefresh}>
{isAnalyzing || loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Activity className="h-4 w-4" />}
</Button>
</div>
</div>
{/* Overview Cards */}
<StatStrip
items={[
{ label: '置信度', value: `${accuracy}%`, color: 'emerald' },
{ label: '高风险', value: predictedAlertCount, color: 'amber' },
{ label: '容量预警', value: capacityWarningCount, color: 'red' },
{ label: '指标', value: predictions.length, color: 'purple' },
]}
/>
<Tabs defaultValue="metrics" className="space-y-4">
<TabsList className="bg-slate-800 border border-slate-700">
<TabsTrigger value="metrics" className="data-[state=active]:bg-slate-700">
<LineChart className="h-4 w-4 mr-2" />
指标预测
</TabsTrigger>
<TabsTrigger value="capacity" className="data-[state=active]:bg-slate-700">
<BarChart3 className="h-4 w-4 mr-2" />
容量规划
</TabsTrigger>
<TabsTrigger value="anomaly" className="data-[state=active]:bg-slate-700">
<AlertTriangle className="h-4 w-4 mr-2" />
异常预测
</TabsTrigger>
</TabsList>
</>
)}
>
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
<TabsContent value="metrics" className="space-y-4">
<Card className="bg-slate-800 border-slate-700">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-slate-100 flex items-center gap-2">
<TrendingUp className="h-5 w-5 text-blue-400" />
<CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<TrendingUp className="h-5 w-5 dg-text-blue" />
关键指标预测
</CardTitle>
<Badge variant="outline" className="border-purple-500/30 text-purple-400 bg-purple-500/10">
<Badge variant="outline" className="border-purple-500/30 dg-text-purple bg-purple-500/10">
<Sparkles className="h-3 w-3 mr-1" />
线性回归预测
</Badge>
@@ -179,22 +169,22 @@ export function AIPredictiveAnalytics() {
</CardHeader>
<CardContent>
{loading ? (
<div className="flex items-center justify-center py-12 text-slate-500">
<div className="flex items-center justify-center py-12 dg-text-muted">
<Loader2 className="h-5 w-5 animate-spin mr-2" /> 加载指标数据...
</div>
) : predictions.length === 0 ? (
<div className="text-center py-12 text-slate-500">暂无指标数据</div>
<div className="text-center py-12 dg-text-muted">暂无指标数据</div>
) : (
<div className="grid grid-cols-2 gap-4">
{predictions.map((prediction, idx) => (
<div key={idx} className="p-4 rounded-lg border border-slate-700 bg-slate-800/50">
<div key={idx} className="p-4 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/50">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
{prediction.name.includes('CPU') && <Cpu className="h-4 w-4 text-blue-400" />}
{prediction.name.includes('内存') && <MemoryStick className="h-4 w-4 text-emerald-400" />}
{prediction.name.includes('磁盘') && <HardDrive className="h-4 w-4 text-amber-400" />}
{prediction.name.includes('网络') && <Network className="h-4 w-4 text-purple-400" />}
<span className="font-medium text-slate-200">{prediction.name}</span>
{prediction.name.includes('CPU') && <Cpu className="h-4 w-4 dg-text-blue" />}
{prediction.name.includes('内存') && <MemoryStick className="h-4 w-4 dg-text-green" />}
{prediction.name.includes('磁盘') && <HardDrive className="h-4 w-4 dg-text-yellow" />}
{prediction.name.includes('网络') && <Network className="h-4 w-4 dg-text-purple" />}
<span className="font-medium text-[var(--dg-text-primary)]">{prediction.name}</span>
</div>
<div className="flex items-center gap-1">
{getTrendIcon(prediction.trend)}
@@ -206,14 +196,14 @@ export function AIPredictiveAnalytics() {
<div className="grid grid-cols-2 gap-4 mb-3">
<div>
<p className="text-xs text-slate-500 mb-1">当前值</p>
<p className="text-lg font-bold text-slate-100">
<p className="text-xs dg-text-muted mb-1">当前值</p>
<p className="text-lg font-bold text-[var(--dg-text-primary)]">
{prediction.current}
{prediction.unit}
</p>
</div>
<div>
<p className="text-xs text-slate-500 mb-1">预测值 ({prediction.timeRange})</p>
<p className="text-xs dg-text-muted mb-1">预测值 ({prediction.timeRange})</p>
<p className={`text-lg font-bold ${trendColorClass(prediction.trend)}`}>
{prediction.predicted}
{prediction.unit}
@@ -223,14 +213,14 @@ export function AIPredictiveAnalytics() {
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-xs text-slate-400">置信度</span>
<div className="w-16 h-1.5 bg-slate-700 rounded-full overflow-hidden">
<span className="text-xs dg-text-secondary">置信度</span>
<div className="w-16 h-1.5 bg-[var(--dg-bg-active)] rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-blue-500 to-purple-500"
style={{ width: `${prediction.confidence}%` }}
/>
</div>
<span className="text-xs text-purple-400">{prediction.confidence}%</span>
<span className="text-xs dg-text-purple">{prediction.confidence}%</span>
</div>
</div>
</div>
@@ -246,27 +236,27 @@ export function AIPredictiveAnalytics() {
</TabsContent>
<TabsContent value="anomaly" className="space-y-4">
<Card className="bg-slate-800 border-slate-700">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-slate-100 flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-red-400" />
<CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<AlertTriangle className="h-5 w-5 dg-text-red" />
异常事件预测
</CardTitle>
<span className="text-xs text-slate-500">基于告警规则阈值与实时趋势概率推算</span>
<span className="text-xs dg-text-muted">基于告警规则阈值与实时趋势概率推算</span>
</div>
</CardHeader>
<CardContent>
{loading ? (
<div className="flex items-center justify-center py-12 text-slate-500">
<div className="flex items-center justify-center py-12 dg-text-muted">
<Loader2 className="h-5 w-5 animate-spin mr-2" /> 加载异常预测...
</div>
) : dedupedAnomalies.length === 0 ? (
<div className="text-center py-12 text-slate-500">暂无异常预测数据</div>
<div className="text-center py-12 dg-text-muted">暂无异常预测数据</div>
) : (
<div className="space-y-3">
{dedupedAnomalies.map((anomaly, idx) => (
<div key={idx} className="p-4 rounded-lg border border-slate-700 bg-slate-800/50">
<div key={idx} className="p-4 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/50">
<div className="flex items-start justify-between">
<div className="flex items-start gap-3">
<div
@@ -281,21 +271,21 @@ export function AIPredictiveAnalytics() {
<AlertTriangle
className={`h-5 w-5 ${
anomaly.probability >= 70
? 'text-red-400'
? 'dg-text-red'
: anomaly.probability >= 50
? 'text-amber-400'
: 'text-blue-400'
? 'dg-text-yellow'
: 'dg-text-blue'
}`}
/>
</div>
<div>
<h4 className="font-medium text-slate-200">{anomaly.metric}</h4>
<p className="text-sm text-slate-400 mt-1">{anomaly.predictedAnomaly}</p>
<h4 className="font-medium text-[var(--dg-text-primary)]">{anomaly.metric}</h4>
<p className="text-sm dg-text-secondary mt-1">{anomaly.predictedAnomaly}</p>
<div className="flex items-center gap-4 mt-2">
<span className="text-xs text-slate-500">{anomaly.timeframe}</span>
<span className="text-xs text-slate-500">
<span className="text-xs dg-text-muted">{anomaly.timeframe}</span>
<span className="text-xs dg-text-muted">
概率:{' '}
<span className={anomaly.probability >= 70 ? 'text-red-400' : 'text-amber-400'}>
<span className={anomaly.probability >= 70 ? 'dg-text-red' : 'dg-text-yellow'}>
{anomaly.probability}%
</span>
</span>
@@ -311,7 +301,7 @@ export function AIPredictiveAnalytics() {
stroke="currentColor"
strokeWidth="4"
fill="transparent"
className="text-slate-700"
className="text-[var(--dg-text-muted)]"
/>
<circle
cx="32"
@@ -323,24 +313,24 @@ export function AIPredictiveAnalytics() {
strokeDasharray={`${anomaly.probability * 1.76} 176`}
className={
anomaly.probability >= 70
? 'text-red-400'
? 'dg-text-red'
: anomaly.probability >= 50
? 'text-amber-400'
: 'text-blue-400'
? 'dg-text-yellow'
: 'dg-text-blue'
}
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-sm font-bold text-slate-200">{anomaly.probability}%</span>
<span className="text-sm font-bold text-[var(--dg-text-primary)]">{anomaly.probability}%</span>
</div>
</div>
</div>
<div className="mt-3 p-3 bg-slate-900 rounded-lg border border-slate-700">
<div className="mt-3 p-3 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]">
<div className="flex items-start gap-2">
<Zap className="h-4 w-4 text-emerald-400 mt-0.5" />
<Zap className="h-4 w-4 dg-text-green mt-0.5" />
<div>
<span className="text-sm text-slate-400">建议操作:</span>
<p className="text-sm text-slate-300 mt-1">{anomaly.suggestedAction}</p>
<span className="text-sm dg-text-secondary">建议操作:</span>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">{anomaly.suggestedAction}</p>
</div>
</div>
</div>
@@ -352,6 +342,6 @@ export function AIPredictiveAnalytics() {
</Card>
</TabsContent>
</Tabs>
</div>
</PageShell>
);
}
frontend/src/components/aiops/AgentCLI.tsx
+71 -67
View File
@@ -18,6 +18,7 @@ import {
import AgentCLIHistory from './AgentCLIHistory';
import { MessageView, type ChatItem } from './AgentCLIMessages';
import type { AgentCliSession } from '@/api/aiops/agent-cli';
import { PageShell } from '@/components/layout/PageShell';
// WS 事件类型（后端 wsEvent 对应） // Logan.Li
interface WsEvent {
@@ -42,11 +43,11 @@ interface WsEvent {
const TIPS = [
{ icon: Cpu, title: 'LLM + 工具层（llm / tools）', color: 'text-sky-400',
desc: 'OpenAI 兼容 LLM 客户端（复用「大模型设置」中的配置）；工具系统注册 ssh_execute（远程执行命令，复用 pkg/remoteexec）与 analyze_output（超长输出分析）。AI 借助工具真正动手操作服务器。' },
{ icon: Shield, title: '安全 + Prompt（safety / prompt）', color: 'text-amber-400',
{ icon: Shield, title: '安全 + Prompt（safety / prompt）', color: 'dg-text-yellow',
desc: '五级风险评估 + 三级安全模式：危险命令（rm -rf /、mkfs）硬性拒绝，高危命令（reboot、restart）弹框确认；五层 System Prompt 定义角色、安全规则、工具与 ReAct 工作方式。' },
{ icon: Brain, title: 'ReAct 核心引擎（core）', color: 'text-violet-400',
{ icon: Brain, title: 'ReAct 核心引擎（core）', color: 'dg-text-purple',
desc: '「思考→行动→观察」循环（最多 16 轮）：每轮调用工具、读取输出，失败则分析原因换法重试；自适应检查点 + 循环检测（同参超过 3 次拒绝），直到真正解决问题而非假装解决。' },
{ icon: Database, title: '自进化引擎（evolver）', color: 'text-emerald-400',
{ icon: Database, title: '自进化引擎（evolver）', color: 'dg-text-green',
desc: '四层记忆（经验 / 环境 / 事实 / 程序）：任务完成后异步学习经验，下次同类任务自动注入历史经验，越用越聪明；学习失败优雅降级，绝不影响主流程。' },
];
@@ -267,8 +268,61 @@ export default function AgentCLI() {
setTokens(0);
};
const toolbar = (
<div className="flex items-center gap-3 flex-wrap">
<Server className="w-4 h-4 dg-text-secondary" />
<Select value={serverId} onValueChange={setServerId}>
<SelectTrigger className="w-56 dg-input">
<SelectValue placeholder="选择目标主机" />
</SelectTrigger>
<SelectContent className="dg-input max-h-72">
{servers.map((s) => (
<SelectItem key={s.id} value={String(s.id)}>
{s.hostname}（{s.ip}）
</SelectItem>
))}
</SelectContent>
</Select>
<Shield className="w-4 h-4 dg-text-secondary" />
<Select value={safetyMode} onValueChange={setSafetyMode}>
<SelectTrigger className="w-28 dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent className="dg-input">
{SAFETY_MODES.map((m) => (
<SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>
))}
</SelectContent>
</Select>
{connected && (
<Badge className="bg-emerald-500/15 dg-text-green border-emerald-500/30">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5" />已连接
</Badge>
)}
{replayMode && (
<Badge className="bg-amber-500/15 dg-text-yellow border-amber-500/30">回放模式</Badge>
)}
{canContinue && !running && !replayMode && (
<Badge className="bg-violet-500/15 dg-text-purple border-violet-500/30">可追问</Badge>
)}
{running && (
<Badge className="bg-blue-500/15 dg-text-blue border-blue-500/30">
<Loader2 className="w-3 h-3 mr-1 animate-spin" />第 {round} 轮 · {tokens} tokens
</Badge>
)}
</div>
);
return (
<div className="h-full flex gap-3 p-4">
<PageShell
variant="workspace"
title="Agent CLI"
subtitle="自然语言驱动 SSH 自主排障与部署"
icon={<Bot className="h-5 w-5" />}
toolbar={toolbar}
className="h-full"
contentClassName="h-full flex gap-3"
>
<AgentCLIHistory
serverId={serverId}
onReplay={handleReplay}
@@ -277,73 +331,23 @@ export default function AgentCLI() {
/>
<div className="flex-1 min-w-0 flex flex-col gap-3">
{/* 顶部工具栏 */}
<Card className="bg-slate-900/60 border-slate-800">
<CardContent className="p-3 flex items-center gap-3 flex-wrap">
<div className="flex items-center gap-2 text-slate-200 font-medium">
<Bot className="w-5 h-5 text-blue-400" /> Agent CLI
</div>
<div className="w-px h-6 bg-slate-700" />
<Server className="w-4 h-4 text-slate-400" />
<Select value={serverId} onValueChange={setServerId}>
<SelectTrigger className="w-56 bg-slate-800 border-slate-700 text-slate-200">
<SelectValue placeholder="选择目标主机" />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700 max-h-72">
{servers.map((s) => (
<SelectItem key={s.id} value={String(s.id)}>
{s.hostname}（{s.ip}）
</SelectItem>
))}
</SelectContent>
</Select>
<Shield className="w-4 h-4 text-slate-400" />
<Select value={safetyMode} onValueChange={setSafetyMode}>
<SelectTrigger className="w-28 bg-slate-800 border-slate-700 text-slate-200">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
{SAFETY_MODES.map((m) => (
<SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>
))}
</SelectContent>
</Select>
{connected && (
<Badge className="bg-emerald-500/15 text-emerald-400 border-emerald-500/30">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5" />已连接
</Badge>
)}
{replayMode && (
<Badge className="bg-amber-500/15 text-amber-400 border-amber-500/30">回放模式</Badge>
)}
{canContinue && !running && !replayMode && (
<Badge className="bg-violet-500/15 text-violet-400 border-violet-500/30">可追问</Badge>
)}
{running && (
<Badge className="bg-blue-500/15 text-blue-400 border-blue-500/30">
<Loader2 className="w-3 h-3 mr-1 animate-spin" />第 {round} 轮 · {tokens} tokens
</Badge>
)}
</CardContent>
</Card>
{/* tips 面板 */}
<Card className="bg-slate-900/40 border-slate-800">
<Card className="dg-card">
<CardHeader className="py-2 px-3 cursor-pointer select-none" onClick={() => setTipsOpen((v) => !v)}>
<div className="flex items-center gap-2 text-slate-300 text-sm">
<div className="flex items-center gap-2 text-[var(--dg-text-secondary)] text-sm">
{tipsOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
<Lightbulb className="w-4 h-4 text-yellow-400" />
<Lightbulb className="w-4 h-4 dg-text-yellow" />
<span className="font-medium">核心能力与设计思路</span>
</div>
</CardHeader>
{tipsOpen && (
<CardContent className="pt-2 grid grid-cols-1 md:grid-cols-2 gap-3">
{TIPS.map((t) => (
<div key={t.title} className="flex gap-2.5 p-2.5 rounded-lg bg-slate-800/40 border border-slate-800">
<div key={t.title} className="flex gap-2.5 p-2.5 rounded-lg bg-[var(--dg-bg-tertiary)]/40 border border-[var(--dg-border)]">
<t.icon className={`w-5 h-5 mt-0.5 shrink-0 ${t.color}`} />
<div>
<div className="text-sm font-medium text-slate-200">{t.title}</div>
<div className="text-xs text-slate-400 leading-relaxed mt-0.5">{t.desc}</div>
<div className="text-sm font-medium text-[var(--dg-text-primary)]">{t.title}</div>
<div className="text-xs dg-text-secondary leading-relaxed mt-0.5">{t.desc}</div>
</div>
</div>
))}
@@ -352,21 +356,21 @@ export default function AgentCLI() {
</Card>
{/* 对话流 */}
<Card className="flex-1 min-h-0 bg-slate-900/40 border-slate-800 flex flex-col">
<Card className="flex-1 min-h-0 dg-card flex flex-col">
<div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto p-4 space-y-3">
{items.length === 0 && (
<div className="h-full flex flex-col items-center justify-center text-slate-500 gap-3">
<div className="h-full flex flex-col items-center justify-center dg-text-muted gap-3">
<Terminal className="w-10 h-10 opacity-40" />
{!serverId ? (
<>
<div className="text-sm">请先选择一台目标主机</div>
{servers.length === 0 && (
<div className="text-xs text-slate-600">暂无主机，请先前往「资产管理」添加服务器</div>
<div className="text-xs dg-text-muted">暂无主机，请先前往「资产管理」添加服务器</div>
)}
</>
) : !connected ? (
<>
<Loader2 className="w-6 h-6 animate-spin text-blue-400" />
<Loader2 className="w-6 h-6 animate-spin dg-text-blue" />
<div className="text-sm">正在连接主机...</div>
</>
) : (
@@ -378,7 +382,7 @@ export default function AgentCLI() {
<MessageView key={it.id} item={it} />
))}
</div>
<div className="border-t border-slate-800 p-3 flex items-end gap-2">
<div className="border-t border-[var(--dg-border)] p-3 flex items-end gap-2">
<textarea
value={input}
onChange={(e) => setInput(e.target.value)}
@@ -390,7 +394,7 @@ export default function AgentCLI() {
}
rows={1}
disabled={replayMode}
className="flex-1 resize-none bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm text-slate-200 placeholder:text-slate-600 focus:outline-none focus:ring-1 focus:ring-blue-500 max-h-32 disabled:opacity-50"
className="flex-1 resize-none dg-input max-h-32 disabled:opacity-50"
/>
{running ? (
<Button variant="destructive" onClick={stop} className="bg-red-600 hover:bg-red-700">
@@ -404,6 +408,6 @@ export default function AgentCLI() {
</div>
</Card>
</div>
</div>
</PageShell>
);
}
frontend/src/components/aiops/AgentCLIHistory.tsx
+15 -15
View File
@@ -19,10 +19,10 @@ interface Props {
// statusBadge 会话状态标签样式 // Logan.Li
function statusBadge(status: string) {
switch (status) {
case 'done': return 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30';
case 'running': return 'bg-blue-500/15 text-blue-400 border-blue-500/30';
case 'aborted': return 'bg-slate-500/15 text-slate-400 border-slate-500/30';
default: return 'bg-red-500/15 text-red-400 border-red-500/30';
case 'done': return 'bg-emerald-500/15 dg-text-green border-emerald-500/30';
case 'running': return 'bg-blue-500/15 dg-text-blue border-blue-500/30';
case 'aborted': return 'bg-[var(--dg-bg-active)]/15 dg-text-secondary border-[var(--dg-border)]';
default: return 'bg-red-500/15 dg-text-red border-red-500/30';
}
}
@@ -89,21 +89,21 @@ export default function AgentCLIHistory({ serverId, onReplay, onNewTask, refresh
};
return (
<div className="w-72 shrink-0 flex flex-col bg-slate-900/60 border border-slate-800 rounded-lg overflow-hidden">
<div className="flex items-center gap-2 px-3 py-2.5 border-b border-slate-800">
<History className="w-4 h-4 text-slate-400" />
<span className="text-sm font-medium text-slate-200 flex-1">历史任务</span>
<div className="w-72 shrink-0 flex flex-col bg-[var(--dg-bg-secondary)]/60 border border-[var(--dg-border)] rounded-lg overflow-hidden">
<div className="flex items-center gap-2 px-3 py-2.5 border-b border-[var(--dg-border)]">
<History className="w-4 h-4 dg-text-secondary" />
<span className="text-sm font-medium text-[var(--dg-text-primary)] flex-1">历史任务</span>
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => { setActiveId(null); onNewTask(); }}>
<Plus className="w-3.5 h-3.5 mr-1" />新建
</Button>
</div>
<ScrollArea className="flex-1 min-h-0">
{!serverId ? (
<div className="p-4 text-xs text-slate-500 text-center">选择主机后查看历史</div>
<div className="p-4 text-xs dg-text-muted text-center">选择主机后查看历史</div>
) : loading ? (
<div className="p-4 flex justify-center"><Loader2 className="w-5 h-5 animate-spin text-slate-500" /></div>
<div className="p-4 flex justify-center"><Loader2 className="w-5 h-5 animate-spin dg-text-muted" /></div>
) : sessions.length === 0 ? (
<div className="p-4 text-xs text-slate-500 text-center">暂无历史任务</div>
<div className="p-4 text-xs dg-text-muted text-center">暂无历史任务</div>
) : (
<div className="p-1.5 space-y-1">
{sessions.map((s) => (
@@ -112,13 +112,13 @@ export default function AgentCLIHistory({ serverId, onReplay, onNewTask, refresh
type="button"
onClick={() => handleReplay(s)}
className={`w-full text-left rounded-md px-2.5 py-2 transition-colors group ${
activeId === s.id ? 'bg-blue-500/15 border border-blue-500/30' : 'hover:bg-slate-800/60 border border-transparent'
activeId === s.id ? 'bg-blue-500/15 border border-blue-500/30' : 'hover:bg-[var(--dg-bg-hover)]/60 border border-transparent'
}`}
>
<div className="flex items-start gap-1.5">
<div className="flex-1 min-w-0">
<div className="text-xs text-slate-200 truncate">{s.title}</div>
<div className="text-[10px] text-slate-500 mt-0.5">
<div className="text-xs text-[var(--dg-text-primary)] truncate">{s.title}</div>
<div className="text-[10px] dg-text-muted mt-0.5">
{s.rounds} 轮 · {s.total_tokens || 0} tokens
</div>
</div>
@@ -127,7 +127,7 @@ export default function AgentCLIHistory({ serverId, onReplay, onNewTask, refresh
</Badge>
<button
type="button"
className="opacity-0 group-hover:opacity-100 p-0.5 text-slate-500 hover:text-red-400 shrink-0"
className="opacity-0 group-hover:opacity-100 p-0.5 dg-text-muted hover:dg-text-red shrink-0"
onClick={(e) => handleDelete(e, s)}
>
<Trash2 className="w-3.5 h-3.5" />
frontend/src/components/aiops/AgentCLIMessages.tsx
+26 -26
View File
@@ -26,12 +26,12 @@ export interface ChatItem {
// riskClass 风险等级对应 badge 颜色 // Logan.Li
export function riskClass(risk?: string): string {
switch ((risk || '').toLowerCase()) {
case '安全': case 'safe': return 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30';
case '安全': case 'safe': return 'bg-emerald-500/15 dg-text-green border-emerald-500/30';
case '低风险': case 'low': return 'bg-sky-500/15 text-sky-400 border-sky-500/30';
case '中风险': case 'medium': return 'bg-amber-500/15 text-amber-400 border-amber-500/30';
case '高风险': case 'high': return 'bg-orange-500/15 text-orange-400 border-orange-500/30';
case '危险': case 'critical': return 'bg-red-500/15 text-red-400 border-red-500/30';
default: return 'bg-slate-500/15 text-slate-400 border-slate-500/30';
case '中风险': case 'medium': return 'bg-amber-500/15 dg-text-yellow border-amber-500/30';
case '高风险': case 'high': return 'bg-orange-500/15 dg-text-orange border-orange-500/30';
case '危险': case 'critical': return 'bg-red-500/15 dg-text-red border-red-500/30';
default: return 'bg-[var(--dg-bg-active)]/15 dg-text-secondary border-[var(--dg-border)]';
}
}
@@ -99,7 +99,7 @@ export function MessageView({ item }: { item: ChatItem }) {
);
}
if (item.kind === 'info') {
return <div className="text-center text-xs text-slate-500 py-1">{item.content}</div>;
return <div className="text-center text-xs dg-text-muted py-1">{item.content}</div>;
}
if (item.kind === 'thought') {
return <ThoughtBlock text={item.content || ''} round={item.round} streaming={item.streaming} />;
@@ -110,14 +110,14 @@ export function MessageView({ item }: { item: ChatItem }) {
if (item.kind === 'done') {
return (
<div className="flex gap-2 rounded-lg bg-emerald-500/10 border border-emerald-500/30 p-3">
<CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />
<CheckCircle2 className="w-5 h-5 dg-text-green shrink-0 mt-0.5" />
<div className="text-sm text-emerald-100 whitespace-pre-wrap leading-relaxed">{item.content}</div>
</div>
);
}
return (
<div className="flex gap-2 rounded-lg bg-red-500/10 border border-red-500/30 p-3">
<AlertTriangle className="w-5 h-5 text-red-400 shrink-0 mt-0.5" />
<AlertTriangle className="w-5 h-5 dg-text-red shrink-0 mt-0.5" />
<div className="text-sm text-red-100 whitespace-pre-wrap">{item.content}</div>
</div>
);
@@ -128,15 +128,15 @@ function ThoughtBlock({ text, round, streaming }: { text: string; round?: number
const [open, setOpen] = useState(streaming || false);
const preview = text.length > 80 ? text.slice(0, 80) + '...' : text;
return (
<div className="rounded-lg bg-slate-800/40 border border-slate-800 p-2.5">
<button className="flex items-center gap-1.5 text-xs text-slate-400 w-full text-left" onClick={() => setOpen((v) => !v)}>
<div className="rounded-lg bg-[var(--dg-bg-tertiary)]/40 border border-[var(--dg-border)] p-2.5">
<button className="flex items-center gap-1.5 text-xs dg-text-secondary w-full text-left" onClick={() => setOpen((v) => !v)}>
{open ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
<Brain className="w-3.5 h-3.5 text-violet-400" />
{round != null && <span className="text-slate-500">第 {round} 轮思考</span>}
{streaming && <Loader2 className="w-3 h-3 text-violet-400 animate-spin" />}
<span className="ml-1 text-slate-500 truncate">{!open && preview}</span>
<Brain className="w-3.5 h-3.5 dg-text-purple" />
{round != null && <span className="dg-text-muted">第 {round} 轮思考</span>}
{streaming && <Loader2 className="w-3 h-3 dg-text-purple animate-spin" />}
<span className="ml-1 dg-text-muted truncate">{!open && preview}</span>
</button>
{open && <div className="mt-1.5 text-sm text-slate-300 whitespace-pre-wrap leading-relaxed">{text}</div>}
{open && <div className="mt-1.5 text-sm text-[var(--dg-text-secondary)] whitespace-pre-wrap leading-relaxed">{text}</div>}
</div>
);
}
@@ -145,31 +145,31 @@ function ThoughtBlock({ text, round, streaming }: { text: string; round?: number
function ToolBlock({ item }: { item: ChatItem }) {
const [open, setOpen] = useState(true);
return (
<div className="rounded-lg bg-slate-800/40 border border-slate-800 overflow-hidden">
<div className="flex items-center gap-2 px-3 py-2 bg-slate-800/60">
<div className="rounded-lg bg-[var(--dg-bg-tertiary)]/40 border border-[var(--dg-border)] overflow-hidden">
<div className="flex items-center gap-2 px-3 py-2 bg-[var(--dg-bg-tertiary)]/60">
<button className="flex items-center gap-1.5 flex-1 min-w-0 text-left" onClick={() => setOpen((v) => !v)}>
{open ? <ChevronDown className="w-3.5 h-3.5 text-slate-400" /> : <ChevronRight className="w-3.5 h-3.5 text-slate-400" />}
{open ? <ChevronDown className="w-3.5 h-3.5 dg-text-secondary" /> : <ChevronRight className="w-3.5 h-3.5 dg-text-secondary" />}
<Terminal className="w-3.5 h-3.5 text-sky-400 shrink-0" />
<span className="text-xs text-slate-400 shrink-0">{item.toolName}</span>
{item.round != null && <span className="text-xs text-slate-600">· R{item.round}</span>}
<span className="text-xs dg-text-secondary shrink-0">{item.toolName}</span>
{item.round != null && <span className="text-xs dg-text-muted">· R{item.round}</span>}
</button>
{item.risk && <Badge className={`text-[10px] border ${riskClass(item.risk)}`}>{item.risk}</Badge>}
{item.pending && <Loader2 className="w-3.5 h-3.5 text-blue-400 animate-spin" />}
{item.pending && <Loader2 className="w-3.5 h-3.5 dg-text-blue animate-spin" />}
{!item.pending && item.success != null && (
item.success
? <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
: <AlertTriangle className="w-3.5 h-3.5 text-red-400" />
? <CheckCircle2 className="w-3.5 h-3.5 dg-text-green" />
: <AlertTriangle className="w-3.5 h-3.5 dg-text-red" />
)}
</div>
{open && (
<div className="px-3 py-2 space-y-2">
{item.command && (
<pre className="text-xs text-emerald-300 bg-slate-950/60 rounded px-2 py-1.5 overflow-x-auto"><code>$ {item.command}</code></pre>
<pre className="text-xs dg-text-green bg-[var(--dg-bg-primary)]/60 rounded px-2 py-1.5 overflow-x-auto"><code>$ {item.command}</code></pre>
)}
{!item.pending && item.output != null && (
<>
{item.duration && <div className="text-[10px] text-slate-600">耗时 {item.duration}</div>}
<pre className="text-xs text-slate-300 bg-slate-950/40 rounded px-2 py-1.5 overflow-x-auto max-h-80 whitespace-pre-wrap">{item.output || '（无输出）'}</pre>
{item.duration && <div className="text-[10px] dg-text-muted">耗时 {item.duration}</div>}
<pre className="text-xs text-[var(--dg-text-secondary)] bg-[var(--dg-bg-primary)]/40 rounded px-2 py-1.5 overflow-x-auto max-h-80 whitespace-pre-wrap">{item.output || '（无输出）'}</pre>
</>
)}
</div>
frontend/src/components/aiops/AutoFixDialog.tsx
+10 -10
View File
@@ -29,37 +29,37 @@ export function AutoFixDialog({ open, onOpenChange, script }: AutoFixDialogProps
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl bg-slate-900 border-slate-700 text-slate-100">
<DialogContent className="max-w-2xl bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Terminal className="h-5 w-5 text-purple-400" />
<Terminal className="h-5 w-5 dg-text-purple" />
自动修复脚本
</DialogTitle>
<DialogDescription className="text-slate-500">
<DialogDescription className="dg-text-muted">
AI生成的自动修复脚本，请确认后执行
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="p-4 bg-slate-950 rounded-lg border border-slate-700">
<div className="p-4 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
<div className="flex items-center justify-between mb-2">
<span className="text-sm text-slate-400">修复脚本</span>
<Button variant="ghost" size="sm" onClick={copyScript} className="text-slate-400">
<span className="text-sm dg-text-secondary">修复脚本</span>
<Button variant="ghost" size="sm" onClick={copyScript} className="dg-text-secondary">
{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
<pre className="text-sm text-slate-300 overflow-x-auto whitespace-pre-wrap">
<pre className="text-sm text-[var(--dg-text-secondary)] overflow-x-auto whitespace-pre-wrap">
{script}
</pre>
</div>
<div className="flex items-center gap-2 p-3 bg-amber-500/10 rounded-lg border border-amber-500/30">
<AlertTriangle className="h-4 w-4 text-amber-400" />
<span className="text-sm text-amber-400">
<AlertTriangle className="h-4 w-4 dg-text-yellow" />
<span className="text-sm dg-text-yellow">
警告：执行脚本前请确保已备份重要数据
</span>
</div>
</div>
<div className="flex gap-2">
<Button variant="outline" className="flex-1 border-slate-700 text-slate-300" onClick={() => onOpenChange(false)}>
<Button variant="outline" className="flex-1 dg-btn-secondary" onClick={() => onOpenChange(false)}>
取消
</Button>
<Button className="flex-1 bg-purple-600 hover:bg-purple-700" onClick={() => onOpenChange(false)}>
frontend/src/components/aiops/LLMConfig.tsx
+42 -42
View File
@@ -14,6 +14,7 @@ import {
Loader2, Save, Wifi, KeyRound, Brain, Sparkles, MessageSquare, AlertCircle,
} from 'lucide-react';
import { aiApi, type LLMConfigData, type LLMTestResult } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
// 单个提供商配置：默认 endpoint 与候选模型列表（第一个为推荐/最新模型） // Logan.Li
interface ProviderMeta {
@@ -133,45 +134,44 @@ export default function LLMConfigPage() {
};
const set = <K extends keyof LLMConfigData>(k: K, v: LLMConfigData[K]) => setCfg({ ...cfg, [k]: v });
if (loading) {
return <div className="flex items-center justify-center h-full text-slate-400"><Loader2 className="w-5 h-5 animate-spin mr-2" />加载配置...</div>;
}
const prov = PROVIDERS.find((x) => x.id === cfg.provider);
const models = prov?.models ?? [];
const isCustom = cfg.provider === 'custom';
return (
<div className="max-w-3xl mx-auto p-4 space-y-4">
<div className="flex items-center gap-2 text-slate-200">
<Brain className="w-5 h-5 text-blue-400" />
<span className="text-lg font-medium">大模型设置</span>
<span className="text-xs text-slate-500">— Agent CLI 与智能助手共用此配置</span>
</div>
<Card className="bg-slate-900/60 border-slate-800">
<CardHeader><CardTitle className="text-slate-200 text-base">模型与凭证</CardTitle></CardHeader>
<PageShell
variant="config"
maxWidth="3xl"
title="大模型设置"
subtitle="Agent CLI 与智能助手共用此配置"
icon={<Brain className="h-5 w-5" />}
loading={loading}
loadingLabel="加载配置..."
>
<Card className="dg-card">
<CardHeader><CardTitle className="text-[var(--dg-text-primary)] text-base">模型与凭证</CardTitle></CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5">
<Label className="text-slate-300">提供商</Label>
<Label className="text-[var(--dg-text-secondary)]">提供商</Label>
<Select value={cfg.provider} onValueChange={onProvider}>
<SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200"><SelectValue /></SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectTrigger className="dg-input"><SelectValue /></SelectTrigger>
<SelectContent className="dg-input">
{PROVIDERS.map((p) => <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>)}
</SelectContent>
</Select>
</div>
<div className="space-y-1.5">
<Label className="text-slate-300">模型</Label>
<Label className="text-[var(--dg-text-secondary)]">模型</Label>
{isCustom || modelMode === 'input' ? (
<Input value={cfg.model} onChange={(e) => set('model', e.target.value)}
placeholder={isCustom ? '自定义模型名' : '手动输入模型名'} className="bg-slate-800 border-slate-700 text-slate-200" />
placeholder={isCustom ? '自定义模型名' : '手动输入模型名'} className="dg-input" />
) : (
<Select value={cfg.model} onValueChange={onModel}>
<SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200">
<SelectTrigger className="dg-input">
<SelectValue placeholder="选择模型" />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectContent className="dg-input">
{models.map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)}
<SelectItem value="__manual">手动输入</SelectItem>
</SelectContent>
@@ -180,25 +180,25 @@ export default function LLMConfigPage() {
</div>
</div>
<div className="space-y-1.5">
<Label className="text-slate-300 flex items-center gap-1"><KeyRound className="w-3.5 h-3.5" />API Key</Label>
<Label className="text-[var(--dg-text-secondary)] flex items-center gap-1"><KeyRound className="w-3.5 h-3.5" />API Key</Label>
<Input type="password" value={cfg.api_key} onChange={(e) => set('api_key', e.target.value)}
placeholder="sk-..." className="bg-slate-800 border-slate-700 text-slate-200" />
placeholder="sk-..." className="dg-input" />
</div>
<div className="space-y-1.5">
<Label className="text-slate-300">接口地址（Endpoint）</Label>
<Label className="text-[var(--dg-text-secondary)]">接口地址（Endpoint）</Label>
<Input value={cfg.endpoint} onChange={(e) => set('endpoint', e.target.value)}
placeholder="https://api.xxx.com/v1" className="bg-slate-800 border-slate-700 text-slate-200" />
placeholder="https://api.xxx.com/v1" className="dg-input" />
</div>
</CardContent>
</Card>
<Card className="bg-slate-900/60 border-slate-800">
<CardHeader><CardTitle className="text-slate-200 text-base flex items-center gap-2"><Sparkles className="w-4 h-4 text-amber-400" />推理 / Plan 模式</CardTitle></CardHeader>
<Card className="dg-card">
<CardHeader><CardTitle className="text-[var(--dg-text-primary)] text-base flex items-center gap-2"><Sparkles className="w-4 h-4 text-[var(--dg-orange)]" />推理 / Plan 模式</CardTitle></CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<div className="text-sm text-slate-300">启用推理模式</div>
<div className="text-xs text-slate-500">
<div className="text-sm text-[var(--dg-text-secondary)]">启用推理模式</div>
<div className="text-xs dg-text-muted">
适用于 OpenAI o-series / DeepSeek R1 / Claude 3.7 Sonnet 等推理模型；普通模型开启后可能报错。
</div>
</div>
@@ -208,44 +208,44 @@ export default function LLMConfigPage() {
</Card>
<div className="flex flex-wrap items-center gap-3">
<div className="flex items-center gap-2 text-sm text-slate-300">
<div className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)]">
<Switch checked={cfg.enabled} onCheckedChange={(v) => set('enabled', v)} />
<span>启用 LLM 服务</span>
</div>
<Button onClick={save} disabled={saving} className="bg-blue-600 hover:bg-blue-700">
<Button onClick={save} disabled={saving} className="dg-btn-primary">
{saving ? <Loader2 className="w-4 h-4 mr-1 animate-spin" /> : <Save className="w-4 h-4 mr-1" />} 保存配置
</Button>
<Button variant="outline" onClick={test} disabled={testing || !cfg.enabled}
className="border-slate-700 text-slate-300">
className="dg-btn-secondary">
{testing ? <Loader2 className="w-4 h-4 mr-1 animate-spin" /> : <Wifi className="w-4 h-4 mr-1" />} 测试连接
</Button>
{!cfg.enabled && <span className="text-xs text-slate-500">请先保存并启用后再测试</span>}
{!cfg.enabled && <span className="text-xs dg-text-muted">请先保存并启用后再测试</span>}
</div>
{testResult && (
<Card className="bg-slate-900/60 border-slate-800">
<Card className="dg-card">
<CardHeader>
<CardTitle className="text-slate-200 text-base flex items-center gap-2">
<MessageSquare className="w-4 h-4 text-green-400" />
<CardTitle className="text-[var(--dg-text-primary)] text-base flex items-center gap-2">
<MessageSquare className="w-4 h-4 text-[var(--dg-green)]" />
测试结果
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="text-sm text-slate-300 whitespace-pre-wrap leading-relaxed">{testResult.answer || '（模型未返回内容）'}</div>
<div className="flex flex-wrap gap-3 text-xs text-slate-500">
<span className="bg-slate-800 px-2 py-1 rounded">模型: {testResult.model || '未知'}</span>
<span className="bg-slate-800 px-2 py-1 rounded">提供商: {testResult.provider}</span>
<span className="bg-slate-800 px-2 py-1 rounded">消耗 Token: {testResult.tokens_used ?? '-'}</span>
{testResult.reasoning_enabled && <span className="bg-amber-900/40 text-amber-400 px-2 py-1 rounded">推理模式已开启</span>}
<div className="text-sm text-[var(--dg-text-secondary)] whitespace-pre-wrap leading-relaxed">{testResult.answer || '（模型未返回内容）'}</div>
<div className="flex flex-wrap gap-3 text-xs dg-text-muted">
<span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">模型: {testResult.model || '未知'}</span>
<span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">提供商: {testResult.provider}</span>
<span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">消耗 Token: {testResult.tokens_used ?? '-'}</span>
{testResult.reasoning_enabled && <span className="bg-amber-900/40 dg-text-yellow px-2 py-1 rounded">推理模式已开启</span>}
</div>
</CardContent>
</Card>
)}
<div className="flex items-start gap-2 text-xs text-slate-500">
<div className="flex items-start gap-2 text-xs dg-text-muted">
<AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />
<span>测试时会向当前模型发送「你是什么模型？请简短回答。」，并在页面上方展示模型返回内容，用于确认接入的是目标模型。</span>
</div>
</div>
</PageShell>
);
}
frontend/src/components/aiops/PredictiveCapacityTab.tsx
+24 -24
View File
@@ -34,11 +34,11 @@ export function PredictiveCapacityTab({
};
return (
<Card className="bg-slate-800 border-slate-700">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-slate-100 flex items-center gap-2">
<HardDrive className="h-5 w-5 text-amber-400" />
<CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<HardDrive className="h-5 w-5 dg-text-yellow" />
容量规划预警
</CardTitle>
{!loading && forecasts.length > 0 && (
@@ -61,38 +61,38 @@ export function PredictiveCapacityTab({
</CardHeader>
<CardContent>
{loading ? (
<div className="flex items-center justify-center py-12 text-slate-500">
<div className="flex items-center justify-center py-12 dg-text-muted">
<Loader2 className="h-5 w-5 animate-spin mr-2" /> 加载容量数据...
</div>
) : forecasts.length === 0 ? (
<div className="text-center py-12 text-slate-500">暂无容量数据</div>
<div className="text-center py-12 dg-text-muted">暂无容量数据</div>
) : (
<div className="space-y-4">
{/* AI 深度解读结果（点击按钮后展示） */}
{insight && (
<div className="p-4 rounded-lg border border-purple-500/30 bg-purple-500/5">
<div className="flex items-center gap-2 mb-2">
<Sparkles className="h-4 w-4 text-purple-400" />
<Sparkles className="h-4 w-4 dg-text-purple" />
<span className="text-sm font-medium text-purple-300">AI 深度解读</span>
</div>
<p className="text-sm text-slate-300 whitespace-pre-wrap break-words">{insight}</p>
<p className="text-sm text-[var(--dg-text-secondary)] whitespace-pre-wrap break-words">{insight}</p>
</div>
)}
{forecasts.map((forecast, idx) => (
<div key={idx} className="p-4 rounded-lg border border-slate-700 bg-slate-800/50">
<div key={idx} className="p-4 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/50">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<Database className="h-5 w-5 text-blue-400" />
<span className="font-medium text-slate-200">{forecast.resource}</span>
<Database className="h-5 w-5 dg-text-blue" />
<span className="font-medium text-[var(--dg-text-primary)]">{forecast.resource}</span>
</div>
<Badge
variant="outline"
className={
forecast.daysUntilThreshold <= 7
? 'border-red-500/30 text-red-400 bg-red-500/10'
? 'border-red-500/30 dg-text-red bg-red-500/10'
: forecast.daysUntilThreshold <= 14
? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
? 'border-amber-500/30 dg-text-yellow bg-amber-500/10'
: 'border-emerald-500/30 dg-text-green bg-emerald-500/10'
}
>
{forecast.daysUntilThreshold <= 7
@@ -105,20 +105,20 @@ export function PredictiveCapacityTab({
<div className="mb-4">
<div className="flex items-center justify-between text-sm mb-1">
<span className="text-slate-400">7天使用率预测</span>
<span className="text-slate-400">
<span className="dg-text-secondary">7天使用率预测</span>
<span className="dg-text-secondary">
{forecast.daysUntilThreshold >= 999 ? (
'增长平缓，暂无触顶风险'
) : (
<>
预计{' '}
<span className="text-amber-400 font-medium">{forecast.daysUntilThreshold}天</span>{' '}
<span className="dg-text-yellow font-medium">{forecast.daysUntilThreshold}天</span>{' '}
后达到阈值
</>
)}
</span>
</div>
<div className="h-3 bg-slate-700 rounded-full overflow-hidden">
<div className="h-3 bg-[var(--dg-bg-active)] rounded-full overflow-hidden">
<div className="flex h-full">
<div className="bg-blue-500" style={{ width: `${forecast.currentUsage}%` }} />
<div
@@ -130,18 +130,18 @@ export function PredictiveCapacityTab({
</div>
</div>
<div className="flex items-center justify-between text-xs mt-1">
<span className="text-slate-500">当前 {forecast.currentUsage}%</span>
<span className="text-amber-400">预测 {forecast.predictedUsage}%</span>
<span className="text-red-400">阈值 {forecast.threshold}%</span>
<span className="dg-text-muted">当前 {forecast.currentUsage}%</span>
<span className="dg-text-yellow">预测 {forecast.predictedUsage}%</span>
<span className="dg-text-red">阈值 {forecast.threshold}%</span>
</div>
</div>
<div className="p-3 bg-slate-900 rounded-lg border border-slate-700">
<div className="p-3 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]">
<div className="flex items-start gap-2">
<Zap className="h-4 w-4 text-emerald-400 mt-0.5" />
<Zap className="h-4 w-4 dg-text-green mt-0.5" />
<div>
<span className="text-sm text-slate-400">AI建议:</span>
<p className="text-sm text-slate-300 mt-1">{forecast.recommendation}</p>
<span className="text-sm dg-text-secondary">AI建议:</span>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">{forecast.recommendation}</p>
</div>
</div>
</div>
frontend/src/components/aiops/analyzerHelpers.ts
+3 -3
View File
@@ -186,10 +186,10 @@ export function mapAlertEvent(event: JsonData): AlertItem {
export function getSeverityColor(severity: string): string {
switch (severity) {
case 'critical':
return 'bg-red-500/10 text-red-400 border-red-500/30';
return 'bg-red-500/10 dg-text-red border-red-500/30';
case 'warning':
return 'bg-amber-500/10 text-amber-400 border-amber-500/30';
return 'bg-amber-500/10 dg-text-yellow border-amber-500/30';
default:
return 'bg-blue-500/10 text-blue-400 border-blue-500/30';
return 'bg-blue-500/10 dg-text-blue border-blue-500/30';
}
}
frontend/src/components/aiops/predictUtils.ts
+3 -3
View File
@@ -312,11 +312,11 @@ export function computePredictions(input: ComputePredictionsInput): ComputedPred
export function trendColorClass(trend: string): string {
switch (trend) {
case 'up':
return 'text-red-400';
return 'dg-text-red';
case 'down':
return 'text-emerald-400';
return 'dg-text-green';
default:
return 'text-slate-400';
return 'dg-text-secondary';
}
}
frontend/src/components/approval/ApprovalCreateDialog.tsx
+1 -1
View File
@@ -152,7 +152,7 @@ export function ApprovalCreateDialog({
<div key={field.key} className={cn('space-y-1.5', isTextarea && 'col-span-2')}>
<Label className="text-sm font-medium text-[var(--dg-text-secondary)]">
{field.label}
{field.required && <span className="text-red-400 ml-0.5">*</span>}
{field.required && <span className="dg-text-red ml-0.5">*</span>}
</Label>
{field.type === 'select' ? (
<Select
frontend/src/components/approval/ApprovalDetailDialog.tsx
+3 -3
View File
@@ -97,9 +97,9 @@ export function ApprovalDetailDialog({
{instance.actions.map((action: JsonData, index: number) => (
<div key={index} className="flex items-center gap-3 text-sm">
{action.action === 'approve' ? (
<CheckCircle2 className="h-4 w-4 text-emerald-400" />
<CheckCircle2 className="h-4 w-4 dg-text-green" />
) : action.action === 'reject' ? (
<XCircle className="h-4 w-4 text-red-400" />
<XCircle className="h-4 w-4 dg-text-red" />
) : (
<Clock className="h-4 w-4 text-[var(--dg-text-muted)]" />
)}
@@ -127,7 +127,7 @@ export function ApprovalDetailDialog({
<DialogFooter>
{instance.status === 'pending' && (
<>
<Button variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={() => { onOpenChange(false); onReject(instance); }}>
<Button variant="outline" className="border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={() => { onOpenChange(false); onReject(instance); }}>
<XCircle className="h-4 w-4 mr-2" />{t('common.reject')}
</Button>
<Button className="bg-emerald-500/90 hover:bg-emerald-500 text-white" onClick={() => { onOpenChange(false); onApprove(instance); }}>
frontend/src/components/approval/ApprovalFlow.tsx
+47 -113
View File
@@ -4,6 +4,9 @@ import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Textarea } from '@/components/ui/textarea';
import { StatStrip } from '@/components/ui/stat-strip';
import { PageShell } from '@/components/layout/PageShell';
import { PageEmpty } from '@/components/layout/PageEmpty';
import {
Dialog,
DialogContent,
@@ -17,7 +20,6 @@ import {
CheckCircle2,
XCircle,
Loader2,
Clock,
Plus,
} from 'lucide-react';
import { toast } from 'sonner';
@@ -138,105 +140,40 @@ export function ApprovalFlow() {
const rejectedCount = processes.filter((p) => p.status === 'rejected').length;
const myPendingCount = myApprovals.filter((m) => m.status === 'pending').length;
// 页面级 Tab 配置 // Logan.Li
const pageTabs = [
{ id: 'instances', label: t('approval.flow.tabInstances') },
{ id: 'flows', label: t('approval.flow.tabTemplates') },
{ id: 'my-approvals', label: t('approval.flow.tabMyApprovals'), badge: myPendingCount > 0 ? myPendingCount : undefined },
];
return (
<div className="space-y-6">
{/* Page Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{t('approval.flow.title')}</h1>
<p className="text-sm text-[var(--dg-text-muted)] mt-1">{t('approval.flow.subtitle')}</p>
</div>
<Button
className="bg-[var(--dg-blue)] hover:opacity-90 text-white"
onClick={() => setCreateOpen(true)}
>
<Plus className="h-4 w-4 mr-2" />
{t('approval.newRequest')}
</Button>
</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)]">{t('approval.flow.pendingApproval')}</p>
<p className="text-2xl font-bold text-amber-400">{pendingCount}</p>
</div>
<div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
<Clock 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)]">{t('approval.status.approved')}</p>
<p className="text-2xl font-bold text-emerald-400">{approvedCount}</p>
</div>
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
<CheckCircle2 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)]">{t('approval.status.rejected')}</p>
<p className="text-2xl font-bold text-red-400">{rejectedCount}</p>
</div>
<div className="p-3 rounded-lg bg-red-500/10 text-red-400">
<XCircle 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)]">{t('approval.flow.myTodo')}</p>
<p className="text-2xl font-bold text-[var(--dg-blue)]">{myPendingCount}</p>
</div>
<div className="p-3 rounded-lg bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]">
<FileText className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
</div>
{/* Tab Bar */}
<div className="flex items-center gap-1 border-b border-[var(--dg-border)]">
{([
{ key: 'instances', label: t('approval.flow.tabInstances') },
{ key: 'flows', label: t('approval.flow.tabTemplates') },
{ key: 'my-approvals', label: t('approval.flow.tabMyApprovals') },
] as const).map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={cn(
'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
activeTab === tab.key
? 'border-[var(--dg-blue)] text-[var(--dg-blue)]'
: 'border-transparent text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
)}
>
{tab.label}
{tab.key === 'my-approvals' && myPendingCount > 0 && (
<Badge className="ml-2 bg-red-500/20 text-red-400 border-0 text-xs">{myPendingCount}</Badge>
)}
</button>
))}
</div>
{/* Tab Content */}
<>
<PageShell
variant="list"
title={t('approval.flow.title')}
subtitle={t('approval.flow.subtitle')}
icon={<FileText className="h-5 w-5" />}
metrics={(
<StatStrip
items={[
{ label: t('approval.flow.pendingApproval'), value: pendingCount, color: 'amber' },
{ label: t('approval.status.approved'), value: approvedCount, color: 'emerald' },
{ label: t('approval.status.rejected'), value: rejectedCount, color: 'red' },
{ label: t('approval.flow.myTodo'), value: myPendingCount, color: 'blue' },
]}
/>
)}
tabs={pageTabs}
activeTab={activeTab}
onTabChange={(id) => setActiveTab(id as typeof activeTab)}
actions={(
<Button className="dg-btn-primary" onClick={() => setCreateOpen(true)}>
<Plus className="h-4 w-4 mr-2" />
{t('approval.newRequest')}
</Button>
)}
>
{activeTab === 'instances' && (
<ApprovalProcessTab
processes={processes}
@@ -263,15 +200,11 @@ export function ApprovalFlow() {
{activeTab === 'my-approvals' && (
<div className="grid grid-cols-1 gap-4">
{myApprovals.length === 0 ? (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-12">
<div className="text-center">
<FileText className="h-12 w-12 mx-auto text-[var(--dg-text-muted)] mb-4" />
<h3 className="text-lg font-medium text-[var(--dg-text-secondary)] mb-2">{t('approval.noTodo')}</h3>
<p className="text-sm text-[var(--dg-text-muted)]">{t('approval.noTodoDesc')}</p>
</div>
</CardContent>
</Card>
<PageEmpty
icon={<FileText className="h-12 w-12" />}
title={t('approval.noTodo')}
description={t('approval.noTodoDesc')}
/>
) : (
myApprovals.map((instance) => {
const { percentage } = getProgressInfo(instance);
@@ -305,10 +238,10 @@ export function ApprovalFlow() {
</Button>
{instance.status === 'pending' && (
<>
<Button variant="outline" size="sm" className="border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10" onClick={() => openActionDialog('approve', instance)}>
<Button variant="outline" size="sm" className="border-emerald-500/30 dg-text-green hover:bg-emerald-500/10" onClick={() => openActionDialog('approve', instance)}>
<CheckCircle2 className="h-4 w-4 mr-1" />{t('common.approve')}
</Button>
<Button variant="outline" size="sm" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={() => openActionDialog('reject', instance)}>
<Button variant="outline" size="sm" className="border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={() => openActionDialog('reject', instance)}>
<XCircle className="h-4 w-4 mr-1" />{t('common.reject')}
</Button>
</>
@@ -334,6 +267,7 @@ export function ApprovalFlow() {
)}
</div>
)}
</PageShell>
{/* 详情弹窗 — 提取到 ApprovalDetailDialog */}
<ApprovalDetailDialog
@@ -352,12 +286,12 @@ export function ApprovalFlow() {
<DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
{actionType === 'approve' ? (
<>
<CheckCircle2 className="h-5 w-5 text-emerald-400" />
<CheckCircle2 className="h-5 w-5 dg-text-green" />
{t('approval.flow.approveConfirm')}
</>
) : (
<>
<XCircle className="h-5 w-5 text-red-400" />
<XCircle className="h-5 w-5 dg-text-red" />
{t('approval.flow.rejectConfirm')}
</>
)}
@@ -407,7 +341,7 @@ export function ApprovalFlow() {
templates={templates}
onSuccess={loadData}
/>
</div>
</>
);
}
frontend/src/components/approval/ApprovalProcessTab.tsx
+5 -5
View File
@@ -37,17 +37,17 @@ function getStatusBadge(status: string) {
const statusMap: Record<string, { labelKey: string; className: string; dot: string }> = {
pending: {
labelKey: 'approval.status.pending',
className: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
className: 'border-amber-500/30 dg-text-yellow bg-amber-500/10',
dot: 'bg-amber-400',
},
approved: {
labelKey: 'approval.status.approved',
className: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
className: 'border-emerald-500/30 dg-text-green bg-emerald-500/10',
dot: 'bg-emerald-400',
},
rejected: {
labelKey: 'approval.status.rejected',
className: 'border-red-500/30 text-red-400 bg-red-500/10',
className: 'border-red-500/30 dg-text-red bg-red-500/10',
dot: 'bg-red-400',
},
processing: {
@@ -186,7 +186,7 @@ export function ApprovalProcessTab({
<Button
variant="outline"
size="sm"
className="border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10"
className="border-emerald-500/30 dg-text-green hover:bg-emerald-500/10"
onClick={() => onApprove(instance)}
>
<CheckCircle2 className="h-4 w-4 mr-1" />
@@ -195,7 +195,7 @@ export function ApprovalProcessTab({
<Button
variant="outline"
size="sm"
className="border-red-500/30 text-red-400 hover:bg-red-500/10"
className="border-red-500/30 dg-text-red hover:bg-red-500/10"
onClick={() => onReject(instance)}
>
<XCircle className="h-4 w-4 mr-1" />
frontend/src/components/approval/ApprovalTemplateTab.tsx
+3 -3
View File
@@ -48,9 +48,9 @@ function renderFlowChart(flow: JsonData) {
<div
className={cn(
'px-4 py-2 rounded-lg border min-w-[100px] text-center',
node.type === 'start' && 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400',
node.type === 'start' && 'bg-emerald-500/10 border-emerald-500/30 dg-text-green',
node.type === 'approval' && 'bg-[var(--dg-blue)]/10 border-[var(--dg-blue)]/30 text-[var(--dg-blue)]',
node.type === 'condition' && 'bg-amber-500/10 border-amber-500/30 text-amber-400',
node.type === 'condition' && 'bg-amber-500/10 border-amber-500/30 dg-text-yellow',
node.type === 'end' && 'bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-secondary)]'
)}
>
@@ -161,7 +161,7 @@ export function ApprovalTemplateTab({
variant="outline"
className={
flow.status === 1 || flow.status === 'active' || flow.status === true
? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
? 'border-emerald-500/30 dg-text-green bg-emerald-500/10'
: 'border-[var(--dg-border)] text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)]'
}
>
frontend/src/components/approval/helpers.tsx
+5 -5
View File
@@ -108,9 +108,9 @@ export function renderStepProgress(instance: JsonData) {
<div
className={cn(
'flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs whitespace-nowrap',
isCompleted && 'bg-emerald-500/10 text-emerald-400',
isCurrent && !isRejected && 'bg-amber-500/10 text-amber-400 border border-amber-500/30',
isRejected && 'bg-red-500/10 text-red-400',
isCompleted && 'bg-emerald-500/10 dg-text-green',
isCurrent && !isRejected && 'bg-amber-500/10 dg-text-yellow border border-amber-500/30',
isRejected && 'bg-red-500/10 dg-text-red',
!isCompleted && !isCurrent && !isRejected && 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'
)}
>
@@ -122,8 +122,8 @@ export function renderStepProgress(instance: JsonData) {
<span className={cn(
'text-[10px] px-1 py-0 rounded',
step.step_type === 'execute'
? 'bg-green-500/15 text-green-400'
: 'bg-purple-500/15 text-purple-400'
? 'bg-green-500/15 dg-text-green'
: 'bg-purple-500/15 dg-text-purple'
)}>
{step.step_type === 'execute' ? i18n.t('approval.step.executeShort') : i18n.t('approval.step.auditShort')}
</span>
frontend/src/components/auth/Login.tsx
+156 -342
View File
@@ -1,10 +1,11 @@
import { useState, useEffect } from 'react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { User, Lock, Palette, Check, Loader2, AlertCircle, Eye, EyeOff, Languages } from 'lucide-react';
import { User, Lock, Palette, Check, Loader2, AlertCircle, Eye, EyeOff, Languages, Activity } from 'lucide-react';
import { useUserStore, useLanguageStore } from '@/store';
import { authApi } from '@/api';
import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
import { useTheme } from '@/hooks/useTheme';
import { ThemePicker } from '@/components/layout/ThemePicker';
import { cn } from '@/lib/utils';
import { SUPPORTED_LANGUAGES, type AppLanguage } from '@/i18n';
import {
@@ -16,58 +17,7 @@ import {
DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
/* ---------- CSS Animations ---------- */
const ANIMATIONS = `
@keyframes login-orb-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -50px) scale(1.12); }
66% { transform: translate(-30px, 35px) scale(0.92); }
}
@keyframes login-orb-2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-50px, 25px) scale(1.18); }
}
@keyframes login-orb-3 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, 45px) scale(0.88); }
}
@keyframes login-orb-4 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(25px, -30px) scale(1.1); }
}
@keyframes login-card-enter {
from { opacity: 0; transform: translateY(24px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes login-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes login-input-focus {
from { box-shadow: 0 0 0 0px var(--dg-input-focus-ring); }
to { box-shadow: 0 0 0 4px var(--dg-input-focus-ring); }
}
`;
/* ---------- Floating background orbs ---------- */
const ORBS = [
{ top: '-10%', left: '-5%', size: 520, color: 'var(--dg-blue)', opacity: 0.18, blur: 90, animation: 'login-orb-1 18s ease-in-out infinite' },
{ bottom: '-15%', right: '-8%', size: 480, color: 'var(--dg-purple)', opacity: 0.16, blur: 100, animation: 'login-orb-2 22s ease-in-out infinite' },
{ top: '30%', right: '10%', size: 320, color: 'var(--dg-cyan)', opacity: 0.12, blur: 70, animation: 'login-orb-3 16s ease-in-out infinite' },
{ bottom: '10%', left: '8%', size: 380, color: 'var(--dg-gradient-start)', opacity: 0.14, blur: 80, animation: 'login-orb-4 20s ease-in-out infinite' },
];
/**
* Login - 优化后的登录页面
*
* 优化点：
* 1. 使用 glass 效果替代简单的半透明背景
* 2. 输入框使用 dg-input 工具类
* 3. 密码显示/隐藏使用图标按钮
* 4. 主题切换更精致
* 5. 错误提示动画更流畅
* 6. 背景光球动画更协调
*/
/** 登录页 — 克制企业风，无渐变/粉彩色光球 // Logan.Li */
export function Login() {
const { t } = useTranslation();
const navigate = useNavigate();
@@ -78,18 +28,13 @@ export function Login() {
const [showPassword, setShowPassword] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
setLoading(true);
try {
const result = await authApi.login(username, password) as { user: any; token: string; permissions?: string[] };
const result = await authApi.login(username, password) as { user: { id: number; username: string }; token: string; permissions?: string[] };
useUserStore.getState().login(result.user, result.token, result.permissions ?? null);
localStorage.setItem('token', result.token);
navigate('/', { replace: true });
@@ -102,297 +47,166 @@ export function Login() {
};
return (
<>
<style>{ANIMATIONS}</style>
<div className="relative min-h-screen flex items-center justify-center px-4 bg-[var(--surface-canvas)]">
{/* 极弱品牌氛围 — 单色径向，非彩色光球 // Logan.Li */}
<div
className="relative min-h-screen flex items-center justify-center px-4 overflow-hidden"
aria-hidden
className="pointer-events-none absolute inset-0"
style={{
background: `radial-gradient(ellipse at 50% 0%, ${getComputedStyle(document.documentElement).getPropertyValue('--dg-bg-secondary')} 0%, ${getComputedStyle(document.documentElement).getPropertyValue('--dg-bg-primary')} 100%)`,
background: 'radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--brand) 6%, transparent), transparent)',
}}
>
{/* Floating light spots */}
{ORBS.map((orb, i) => (
<div
key={`orb-${i}`}
aria-hidden="true"
className="pointer-events-none absolute"
style={{
top: orb.top,
left: orb.left,
bottom: orb.bottom,
right: orb.right,
width: orb.size,
height: orb.size,
borderRadius: '50%',
background: `radial-gradient(circle, ${orb.color} 0%, transparent 70%)`,
opacity: mounted ? orb.opacity : 0,
filter: `blur(${orb.blur}px)`,
animation: orb.animation,
willChange: 'transform',
transition: 'opacity 1s ease-out',
}}
/>
))}
/>
{/* Theme + Language switcher */}
<div
className="fixed top-4 right-4 z-50 flex items-center gap-2"
style={{ animation: 'login-fade-in 0.6s ease-out' }}
>
{/* Language switcher */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
aria-label={t('header.language')}
className={cn(
'inline-flex items-center justify-center size-10 rounded-full',
'border border-[var(--dg-border)] transition-all duration-200',
'hover:scale-105 active:scale-95 hover:border-[var(--dg-border-hover)]',
'glass'
)}
style={{ color: 'var(--dg-text-secondary)' }}
>
<Languages className="size-5" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-40 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
style={{ boxShadow: 'var(--shadow-dropdown)' }}
>
<DropdownMenuLabel className="text-[var(--dg-text-secondary)]">{t('header.languageSwitch')}</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
{SUPPORTED_LANGUAGES.map((lang) => (
<DropdownMenuItem
key={lang.code}
className={cn(
'flex items-center gap-2.5 cursor-pointer transition-colors',
'focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]',
language === lang.code ? 'text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-secondary)]',
)}
onClick={() => setLanguage(lang.code as AppLanguage)}
>
<span className="text-base">{lang.flag}</span>
<span className="flex-1 text-sm">{lang.label}</span>
{language === lang.code && <Check className="size-4 shrink-0 text-[var(--dg-blue)]" />}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
{/* Theme switcher */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
aria-label={t('header.theme')}
className={cn(
'inline-flex items-center justify-center size-10 rounded-full',
'border border-[var(--dg-border)] transition-all duration-200',
'hover:scale-105 active:scale-95 hover:border-[var(--dg-border-hover)]',
'glass'
)}
style={{ color: 'var(--dg-text-secondary)' }}
>
<Palette className="size-5" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-60 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
style={{ boxShadow: 'var(--shadow-dropdown)' }}
>
<DropdownMenuLabel className="text-[var(--dg-text-secondary)]">{t('header.themeSwitch')}</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
{THEME_OPTIONS.map((option) => (
<DropdownMenuItem
key={option.id}
className={cn(
'flex items-center gap-2.5 cursor-pointer transition-colors',
'focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]',
theme === option.id ? 'text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-secondary)]',
)}
onClick={() => setTheme(option.id)}
>
<span
className="size-3.5 rounded-full shrink-0 ring-2"
style={{
backgroundColor: option.primaryColor,
boxShadow: '0 0 0 2px var(--dg-bg-primary)',
}}
/>
<div className="flex-1 min-w-0">
<span className="text-sm font-medium block">{option.name}</span>
<span className="text-xs opacity-60 block truncate">{option.description}</span>
</div>
{theme === option.id && <Check className="size-4 shrink-0 text-[var(--dg-blue)]" />}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
{/* Login card */}
<div
className="relative z-10 w-full max-w-md"
style={{
background: 'color-mix(in srgb, var(--dg-bg-secondary) 80%, transparent)',
backdropFilter: 'blur(24px)',
WebkitBackdropFilter: 'blur(24px)',
border: '1px solid var(--dg-border)',
borderRadius: 24,
boxShadow: 'var(--shadow-card-hover)',
padding: '44px 40px',
animation: 'login-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
}}
>
{/* Brand */}
<div className="text-center mb-8">
<div
className="inline-flex items-center justify-center size-16 rounded-2xl mb-5"
style={{
background: 'linear-gradient(135deg, var(--dg-gradient-start), var(--dg-gradient-end))',
boxShadow: '0 8px 32px color-mix(in srgb, var(--dg-gradient-start) 30%, transparent)',
}}
>
<svg
className="size-8 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.8}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M3 12h4l3-8 4 16 3-8h4" />
</svg>
</div>
<h1 className="text-3xl font-bold dg-gradient-text tracking-tight">
AIOps
</h1>
<p className="mt-2.5 text-sm text-[var(--dg-text-secondary)]">
{t('login.subtitle')}
</p>
</div>
{/* Form */}
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
{/* Error */}
{error && (
<div
className="flex items-start gap-2.5 rounded-xl px-4 py-3 text-sm animate-fade-in"
style={{
background: 'color-mix(in srgb, var(--dg-red) 10%, transparent)',
border: '1px solid color-mix(in srgb, var(--dg-red) 25%, transparent)',
color: 'var(--dg-red)',
}}
>
<AlertCircle className="size-4 shrink-0 mt-0.5" />
<span>{error}</span>
</div>
)}
{/* Username */}
<div className="space-y-1.5">
<label className="block text-sm font-medium text-[var(--dg-text-secondary)]">
{t('login.username')}
</label>
<div className="relative">
<User
className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-[var(--dg-text-muted)]"
/>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder={t('login.usernamePlaceholder')}
autoComplete="username"
autoFocus
className="dg-input w-full py-2.5 pl-10 pr-4 text-sm"
/>
</div>
</div>
{/* Password */}
<div className="space-y-1.5">
<label className="block text-sm font-medium text-[var(--dg-text-secondary)]">
{t('login.password')}
</label>
<div className="relative">
<Lock
className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-[var(--dg-text-muted)]"
/>
<input
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder={t('login.passwordPlaceholder')}
autoComplete="current-password"
className="dg-input w-full py-2.5 pl-10 pr-12 text-sm"
/>
<button
type="button"
onClick={() => setShowPassword((v) => !v)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)] transition-colors"
tabIndex={-1}
>
{showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
</button>
</div>
</div>
{/* Submit */}
{/* 语言 / 主题 */}
<div className="fixed top-4 right-4 z-50 flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="submit"
disabled={loading || !username || !password}
className={cn(
'dg-gradient-bg w-full rounded-xl py-3 mt-2 text-white font-semibold text-[15px]',
'transition-all duration-200 active:scale-[0.98] disabled:cursor-not-allowed',
)}
style={{
opacity: loading || !username || !password ? 0.6 : 1,
boxShadow: loading || !username || !password
? 'none'
: '0 6px 24px color-mix(in srgb, var(--dg-gradient-start) 30%, transparent)',
}}
type="button"
aria-label={t('header.language')}
className="dg-btn-secondary h-9 w-9 p-0 rounded-lg"
>
{loading ? (
<span className="inline-flex items-center justify-center gap-2">
<Loader2 className="size-4 animate-spin" />
{t('login.loggingIn')}
</span>
) : (
t('login.loginButton')
)}
<Languages className="size-4" />
</button>
</form>
{/* Hints */}
<div
className="mt-6 pt-5 text-center text-xs space-y-1"
style={{
borderTop: '1px solid var(--dg-border-light)',
color: 'var(--dg-text-muted)',
}}
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-40 bg-[var(--surface-raised)] border-[var(--border-default)]"
style={{ boxShadow: 'var(--shadow-dropdown)' }}
>
<p>
默认管理员账号{' '}
<span className="font-medium text-[var(--dg-text-secondary)]">admin / 123456</span>
</p>
<p>LDAP 用户可直接使用域账号登录</p>
<DropdownMenuLabel className="text-[var(--text-secondary)]">{t('header.languageSwitch')}</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-[var(--border-default)]" />
{SUPPORTED_LANGUAGES.map((lang) => (
<DropdownMenuItem
key={lang.code}
className={cn(
'flex items-center gap-2.5 cursor-pointer',
language === lang.code ? 'text-[var(--text-primary)]' : 'dg-text-secondary',
)}
onClick={() => setLanguage(lang.code as AppLanguage)}
>
<span className="text-base">{lang.flag}</span>
<span className="flex-1 text-sm">{lang.label}</span>
{language === lang.code && <Check className="size-4 shrink-0 text-[var(--brand)]" />}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
aria-label={t('header.theme')}
className="dg-btn-secondary h-9 w-9 p-0 rounded-lg"
>
<Palette className="size-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-60 bg-[var(--surface-raised)] border-[var(--border-default)]"
style={{ boxShadow: 'var(--shadow-dropdown)' }}
>
<DropdownMenuLabel className="text-[var(--text-secondary)]">{t('header.themeSwitch')}</DropdownMenuLabel>
<ThemePicker value={theme} onChange={setTheme} />
</DropdownMenuContent>
</DropdownMenu>
</div>
{/* 登录卡片 */}
<div className="relative z-10 w-full max-w-md dg-card rounded-xl p-10 animate-fade-in">
<div className="text-center mb-8">
<div className="dg-icon-box w-14 h-14 rounded-xl mx-auto mb-4">
<Activity className="size-7" />
</div>
<h1 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight">
AIOps
</h1>
<p className="mt-2 text-sm dg-text-secondary">
{t('login.subtitle')}
</p>
</div>
{/* Footer */}
<p
className="absolute bottom-4 left-0 right-0 text-center text-xs"
style={{ color: 'var(--dg-text-muted)', opacity: 0.5 }}
>
&copy; AIOps 智能运维平台
</p>
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
{error && (
<div className="flex items-start gap-2.5 rounded-lg px-4 py-3 text-sm dg-alert-banner border-[var(--alert-error-border)] bg-[var(--alert-error-bg)] text-[var(--alert-error-text)]">
<AlertCircle className="size-4 shrink-0 mt-0.5" />
<span>{error}</span>
</div>
)}
<div className="space-y-1.5">
<label className="block text-sm font-medium dg-text-secondary">
{t('login.username')}
</label>
<div className="relative">
<User className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none dg-text-muted" />
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder={t('login.usernamePlaceholder')}
autoComplete="username"
autoFocus
className="dg-input w-full py-2.5 pl-10 pr-4 text-sm"
/>
</div>
</div>
<div className="space-y-1.5">
<label className="block text-sm font-medium dg-text-secondary">
{t('login.password')}
</label>
<div className="relative">
<Lock className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none dg-text-muted" />
<input
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder={t('login.passwordPlaceholder')}
autoComplete="current-password"
className="dg-input w-full py-2.5 pl-10 pr-12 text-sm"
/>
<button
type="button"
onClick={() => setShowPassword((v) => !v)}
className="absolute right-3 top-1/2 -translate-y-1/2 dg-text-muted hover:dg-text-secondary transition-colors"
tabIndex={-1}
>
{showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
</button>
</div>
</div>
<button
type="submit"
disabled={loading || !username || !password}
className="dg-btn-primary w-full rounded-lg py-2.5 mt-1 text-[15px] font-semibold disabled:cursor-not-allowed"
>
{loading ? (
<span className="inline-flex items-center justify-center gap-2">
<Loader2 className="size-4 animate-spin" />
{t('login.loggingIn')}
</span>
) : (
t('login.loginButton')
)}
</button>
</form>
<div className="mt-6 pt-5 text-center text-xs space-y-1 border-t border-[var(--border-subtle)] dg-text-muted">
<p>
默认管理员账号{' '}
<span className="font-medium dg-text-secondary">admin / 123456</span>
</p>
<p>LDAP 用户可直接使用域账号登录</p>
</div>
</div>
</>
<p className="absolute bottom-4 left-0 right-0 text-center text-xs dg-text-muted opacity-60">
&copy; AIOps 智能运维平台
</p>
</div>
);
}
}
frontend/src/components/cloud/BillingRecordDialog.tsx
+7 -7
View File
@@ -97,7 +97,7 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
<div className="space-y-3">
<div className="grid grid-cols-2 gap-3">
<div>
<Label className="text-sm text-slate-300">厂商 *</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">厂商 *</Label>
<Select value={form.provider} onValueChange={(v) => setForm({ ...form, provider: v })}>
<SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
<SelectContent>
@@ -108,32 +108,32 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
</Select>
</div>
<div>
<Label className="text-sm text-slate-300">日期 *</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">日期 *</Label>
<Input type="date" className="mt-1" value={form.billing_date} onChange={(e) => setForm({ ...form, billing_date: e.target.value })} />
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<Label className="text-sm text-slate-300">费用(元) *</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">费用(元) *</Label>
<Input type="number" step="0.01" className="mt-1" placeholder="0.00" value={form.cost} onChange={(e) => setForm({ ...form, cost: e.target.value })} />
</div>
<div>
<Label className="text-sm text-slate-300">服务</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">服务</Label>
<Input className="mt-1" placeholder="ECS, RDS..." value={form.service} onChange={(e) => setForm({ ...form, service: e.target.value })} />
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<Label className="text-sm text-slate-300">区域</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">区域</Label>
<Input className="mt-1" placeholder="cn-hangzhou" value={form.region} onChange={(e) => setForm({ ...form, region: e.target.value })} />
</div>
<div>
<Label className="text-sm text-slate-300">账号名称</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">账号名称</Label>
<Input className="mt-1" placeholder="主账号" value={form.account_name} onChange={(e) => setForm({ ...form, account_name: e.target.value })} />
</div>
</div>
<div>
<Label className="text-sm text-slate-300">备注</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">备注</Label>
<Input className="mt-1" placeholder="可选" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
</div>
</div>
frontend/src/components/cloud/BillingRuleDialog.tsx
+6 -6
View File
@@ -87,12 +87,12 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
</DialogHeader>
<div className="space-y-3">
<div>
<Label className="text-sm text-slate-300">规则名称 *</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">规则名称 *</Label>
<Input className="mt-1" placeholder="如：日成本超 500 元预警" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<Label className="text-sm text-slate-300">厂商</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">厂商</Label>
<Select value={form.provider || 'all'} onValueChange={(v) => setForm({ ...form, provider: v === 'all' ? '' : v })}>
<SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
<SelectContent>
@@ -104,7 +104,7 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
</Select>
</div>
<div>
<Label className="text-sm text-slate-300">指标</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">指标</Label>
<Select value={form.metric} onValueChange={(v) => setForm({ ...form, metric: v })}>
<SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
<SelectContent>
@@ -116,7 +116,7 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<Label className="text-sm text-slate-300">比较</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">比较</Label>
<Select value={form.operator} onValueChange={(v) => setForm({ ...form, operator: v })}>
<SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
<SelectContent>
@@ -128,13 +128,13 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
</Select>
</div>
<div>
<Label className="text-sm text-slate-300">阈值(元) *</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">阈值(元) *</Label>
<Input type="number" step="0.01" className="mt-1" placeholder="500.00" value={form.threshold} onChange={(e) => setForm({ ...form, threshold: e.target.value })} />
</div>
</div>
<div className="flex items-center gap-2">
<Switch checked={form.enabled} onCheckedChange={(v) => setForm({ ...form, enabled: v })} />
<Label className="text-sm text-slate-300">启用</Label>
<Label className="text-sm text-[var(--dg-text-secondary)]">启用</Label>
</div>
</div>
<DialogFooter>
frontend/src/components/cloud/CloudAccountManager.tsx
+109 -91
View File
@@ -26,6 +26,10 @@ import {
} from 'lucide-react';
import { cloudApi } from '@/api';
import { CloudBrandIcon, getProviderColor } from '@/components/icons/CloudBrandIcon';
import { PageShell } from '@/components/layout/PageShell';
import { PageLoading } from '@/components/layout/PageLoading';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
const providerLabels: Record<string, string> = {
@@ -146,70 +150,84 @@ export function CloudAccountManager() {
return matchesSearch && matchesProvider;
});
const _stats = {
const stats = {
total: accounts.length,
active: accounts.filter(a => a.status === 'active').length,
inactive: accounts.filter(a => a.status === 'inactive').length,
error: accounts.filter(a => a.status === 'error').length,
};
const toolbar = (
<div className="flex items-center gap-4 flex-wrap">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input
placeholder="搜索账号名称或AccessKey..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 h-9 dg-input"
/>
</div>
<select
value={selectedProvider}
onChange={(e) => setSelectedProvider(e.target.value)}
className="px-3 py-2 h-9 rounded-md text-sm dg-input"
>
<option value="all">全部平台</option>
<option value="aws">AWS</option>
<option value="aliyun">阿里云</option>
<option value="tencent">腾讯云</option>
<option value="huawei">华为云</option>
<option value="azure">Azure</option>
</select>
</div>
);
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-slate-100">云账号管理</h1>
<p className="text-slate-400 mt-1">管理多云平台的访问凭证和账号信息</p>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={loadData} className="border-slate-700 text-slate-300">
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
<PageShell
variant="list"
title="云账号管理"
subtitle="管理多云平台的访问凭证和账号信息"
icon={<Key className="h-5 w-5" />}
metrics={
!loading ? (
<StatStrip
items={[
{ label: '总计', value: stats.total, color: 'blue' },
{ label: '正常', value: stats.active, color: 'green' },
{ label: '停用', value: stats.inactive, color: 'muted' },
{ label: '异常', value: stats.error, color: stats.error > 0 ? 'red' : 'muted' },
]}
/>
) : undefined
}
toolbar={toolbar}
actions={(
<>
<Button variant="outline" size="sm" onClick={loadData} className="dg-btn-secondary">
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
<Button className="bg-blue-600 hover:bg-blue-700" onClick={handleOpenCreate}>
<Plus className="h-4 w-4 mr-2" />
<Button size="sm" className="dg-btn-primary" onClick={handleOpenCreate}>
<Plus className="h-4 w-4 mr-1" />
添加账号
</Button>
</div>
</div>
{/* Filters */}
<div className="flex items-center gap-4">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
<Input
placeholder="搜索账号名称或AccessKey..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 bg-slate-800 border-slate-700 text-slate-100"
/>
</div>
<select
value={selectedProvider}
onChange={(e) => setSelectedProvider(e.target.value)}
className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
>
<option value="all">全部平台</option>
<option value="aws">AWS</option>
<option value="aliyun">阿里云</option>
<option value="tencent">腾讯云</option>
<option value="huawei">华为云</option>
<option value="azure">Azure</option>
</select>
</div>
{/* Account List */}
</>
)}
>
{loading ? (
<Card className="bg-slate-800 border-slate-700">
<CardContent className="p-12 text-center text-slate-500">
<RefreshCw className="h-6 w-6 animate-spin mx-auto mb-3" />
加载中...
</CardContent>
</Card>
<PageLoading />
) : filteredAccounts.length === 0 ? (
<Card className="bg-slate-800 border-slate-700">
<CardContent className="p-12 text-center text-slate-500">暂无云账号数据</CardContent>
</Card>
<PageEmpty
icon={<Key className="h-12 w-12" />}
title="暂无云账号数据"
action={(
<Button size="sm" className="dg-btn-primary" onClick={handleOpenCreate}>
<Plus className="h-4 w-4 mr-1" />
添加账号
</Button>
)}
/>
) : (
<div className="grid grid-cols-2 gap-4">
{filteredAccounts.map((account) => {
@@ -218,37 +236,37 @@ export function CloudAccountManager() {
const lastSync = account.last_sync || account.lastSync || account.created_at || '-';
const monthlyCost = account.monthly_cost ?? account.monthlyCost ?? 0;
return (
<Card key={account.id} className="bg-slate-800 border-slate-700">
<Card key={account.id} className="dg-card dg-card-hover">
<CardContent className="p-4">
<div className="flex items-start justify-between">
<div className="flex items-start gap-3">
<div className="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center" style={{ borderBottom: `2px solid ${getProviderColor(account.provider)}` }}>
<div className="w-10 h-10 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center" style={{ borderBottom: `2px solid ${getProviderColor(account.provider)}` }}>
<CloudBrandIcon provider={account.provider} className="h-6 w-6" />
</div>
<div>
<h3 className="font-medium text-slate-100">{account.name}</h3>
<p className="text-sm text-slate-400 mt-0.5">{providerLabels[account.provider] || account.provider}</p>
<h3 className="font-medium text-[var(--dg-text-primary)]">{account.name}</h3>
<p className="text-sm dg-text-secondary mt-0.5">{providerLabels[account.provider] || account.provider}</p>
<div className="flex items-center gap-3 mt-2">
{accessKey && (
<Badge variant="secondary" className="bg-slate-700 text-slate-300">
<Badge variant="secondary" className="dg-badge-muted">
<Key className="h-3 w-3 mr-1" />
{accessKey.slice(0, 8)}...
</Badge>
)}
{account.status === 'active' && (
<Badge className="bg-green-500/20 text-green-400 border-0">
<Badge className="dg-status-running border-0">
<CheckCircle2 className="h-3 w-3 mr-1" />
正常
</Badge>
)}
{account.status === 'inactive' && (
<Badge className="bg-slate-500/20 text-slate-400 border-0">
<Badge className="dg-status-stopped border-0">
<XCircle className="h-3 w-3 mr-1" />
已停用
</Badge>
)}
{account.status === 'error' && (
<Badge className="bg-red-500/20 text-red-400 border-0">
<Badge className="dg-status-error border-0">
<Key className="h-3 w-3 mr-1" />
异常
</Badge>
@@ -260,7 +278,7 @@ export function CloudAccountManager() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-slate-400 hover:text-blue-400"
className="h-8 w-8 dg-text-muted hover:text-[var(--dg-blue)]"
onClick={() => handleOpenEdit(account)}
>
<Pencil className="h-4 w-4" />
@@ -268,25 +286,25 @@ export function CloudAccountManager() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-slate-400 hover:text-red-400"
className="h-8 w-8 dg-text-muted hover:text-[var(--dg-red)]"
onClick={() => handleDelete(account.id)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
<div className="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-slate-700">
<div className="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-[var(--dg-border)]">
<div>
<p className="text-xs text-slate-400">月费用</p>
<p className="text-lg font-medium text-emerald-400">¥{Number(monthlyCost).toLocaleString()}</p>
<p className="text-xs dg-text-secondary">月费用</p>
<p className="text-lg font-medium text-[var(--dg-green)]">¥{Number(monthlyCost).toLocaleString()}</p>
</div>
<div>
<p className="text-xs text-slate-400">服务器数</p>
<p className="text-lg font-medium text-slate-100">{serverCount}</p>
<p className="text-xs dg-text-secondary">服务器数</p>
<p className="text-lg font-medium text-[var(--dg-text-primary)]">{serverCount}</p>
</div>
<div>
<p className="text-xs text-slate-400">最后同步</p>
<p className="text-sm text-slate-300">
<p className="text-xs dg-text-secondary">最后同步</p>
<p className="text-sm text-[var(--dg-text-secondary)]">
{lastSync !== '-' ? new Date(lastSync).toLocaleString() : '-'}
</p>
</div>
@@ -300,13 +318,13 @@ export function CloudAccountManager() {
{/* 创建账号 Dialog */}
<Dialog open={formOpen} onOpenChange={setFormOpen}>
<DialogContent className="bg-slate-800 border-slate-700 text-slate-100 max-w-lg">
<DialogContent className="max-w-lg">
<DialogHeader>
<DialogTitle className="text-slate-100 flex items-center gap-2">
<Cloud className="h-5 w-5 text-blue-400" />
<DialogTitle className="flex items-center gap-2">
<Cloud className="h-5 w-5 text-[var(--dg-blue)]" />
{editingAccount ? '编辑云账号' : '添加云账号'}
</DialogTitle>
<DialogDescription className="text-slate-400">
<DialogDescription>
{editingAccount ? '修改账号信息和访问凭证，留空则保持原凭证不变' : '录入多云平台的访问凭证，用于资源同步与成本统计'}
</DialogDescription>
</DialogHeader>
@@ -314,24 +332,24 @@ export function CloudAccountManager() {
<div className="space-y-4 py-2">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5">
<Label className="text-slate-300">
账号名称 <span className="text-red-400">*</span>
<Label>
账号名称 <span className="text-[var(--dg-red)]">*</span>
</Label>
<Input
placeholder="阿里云生产账号"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500"
className="dg-input"
/>
</div>
<div className="space-y-1.5">
<Label className="text-slate-300">
云平台 <span className="text-red-400">*</span>
<Label>
云平台 <span className="text-[var(--dg-red)]">*</span>
</Label>
<select
value={formData.provider}
onChange={(e) => setFormData({ ...formData, provider: e.target.value })}
className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-md text-slate-100 text-sm"
className="w-full px-3 py-2 rounded-md text-sm dg-input"
>
<option value="aliyun">阿里云</option>
<option value="tencent">腾讯云</option>
@@ -343,50 +361,50 @@ export function CloudAccountManager() {
</div>
<div className="space-y-1.5">
<Label className="text-slate-300">
<Label>
AccessKey
{editingAccount && <span className="text-xs text-slate-500 ml-2">留空保持不变</span>}
{editingAccount && <span className="text-xs dg-text-muted ml-2">留空保持不变</span>}
</Label>
<Input
placeholder="LTAI..."
value={formData.access_key}
onChange={(e) => setFormData({ ...formData, access_key: e.target.value })}
className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500 font-mono text-sm"
className="dg-input font-mono text-sm"
/>
</div>
<div className="space-y-1.5">
<Label className="text-slate-300">
<Label>
SecretKey
{editingAccount && <span className="text-xs text-slate-500 ml-2">留空保持不变</span>}
{editingAccount && <span className="text-xs dg-text-muted ml-2">留空保持不变</span>}
</Label>
<Input
type="password"
placeholder="••••••••"
value={formData.secret_key}
onChange={(e) => setFormData({ ...formData, secret_key: e.target.value })}
className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500 font-mono text-sm"
className="dg-input font-mono text-sm"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5">
<Label className="text-slate-300">月费用 (元)</Label>
<Label>月费用 (元)</Label>
<Input
type="number"
min="0"
placeholder="0"
value={formData.monthly_cost}
onChange={(e) => setFormData({ ...formData, monthly_cost: e.target.value })}
className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500"
className="dg-input"
/>
</div>
<div className="space-y-1.5">
<Label className="text-slate-300">状态</Label>
<Label>状态</Label>
<select
value={formData.status}
onChange={(e) => setFormData({ ...formData, status: e.target.value })}
className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-md text-slate-100 text-sm"
className="w-full px-3 py-2 rounded-md text-sm dg-input"
>
<option value="active">正常</option>
<option value="inactive">已停用</option>
@@ -397,11 +415,11 @@ export function CloudAccountManager() {
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setFormOpen(false)} className="border-slate-700 text-slate-300 hover:bg-slate-700">
<Button variant="outline" onClick={() => setFormOpen(false)} className="dg-btn-secondary">
取消
</Button>
<Button
className="bg-blue-600 hover:bg-blue-700"
className="dg-btn-primary"
disabled={!formData.name.trim() || submitting}
onClick={handleSubmit}
>
@@ -411,6 +429,6 @@ export function CloudAccountManager() {
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</PageShell>
);
}
frontend/src/components/cloud/CloudBilling.tsx
+241 -214
View File
@@ -17,17 +17,26 @@ import {
Trash2,
Pencil,
RefreshCw,
Loader2,
Wallet,
Bell,
} from 'lucide-react';
import { toast } from 'sonner';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { billingApi } from '@/api';
import { formatCurrency, TrendChart, providerLabels, providerColors } from './CloudBillingHelpers';
import {
formatCurrency,
TrendChart,
providerLabels,
providerHex,
ProviderDot,
} from './CloudBillingHelpers';
import { StatStrip } from '@/components/ui/stat-strip';
import { BillingRecordDialog } from './BillingRecordDialog';
import { BillingRuleDialog } from './BillingRuleDialog';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { PageLoading } from '@/components/layout/PageLoading';
import { PageEmpty } from '@/components/layout/PageEmpty';
import type { JsonData } from '@/types/common';
export function CloudBilling() {
@@ -47,7 +56,6 @@ export function CloudBilling() {
const [rules, setRules] = useState<JsonData[]>([]);
const [rulesLoading, setRulesLoading] = useState(true);
// 弹窗状态（open + 编辑目标） // Logan.Li
const [recordDialogOpen, setRecordDialogOpen] = useState(false);
const [editingRecord, setEditingRecord] = useState<JsonData>(null);
const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
@@ -105,6 +113,12 @@ export function CloudBilling() {
if (activeTab === 'alerts') loadRules();
}, [activeTab, loadRules]);
const refreshAll = () => {
loadStats();
if (activeTab === 'records') loadRecords();
if (activeTab === 'alerts') loadRules();
};
const openAddRecord = () => {
setEditingRecord(null);
setRecordDialogOpen(true);
@@ -160,176 +174,184 @@ export function CloudBilling() {
}
};
const pageTabs = [
{ id: 'overview', label: '概览统计' },
{ id: 'records', label: '成本记录' },
{ id: 'alerts', label: '预警规则', badge: rules.length > 0 ? rules.length : undefined },
];
const recordsToolbar = (
<div className="flex flex-wrap items-end gap-3">
<div>
<Label className="text-xs dg-text-secondary mb-1">厂商</Label>
<Select value={filterProvider || 'all'} onValueChange={(v) => setFilterProvider(v === 'all' ? '' : v)}>
<SelectTrigger className="w-32 h-9 dg-input"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="all">全部</SelectItem>
{Object.entries(providerLabels).map(([k, v]) => (
<SelectItem key={k} value={k}>{v}</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div>
<Label className="text-xs dg-text-secondary mb-1">开始日期</Label>
<Input type="date" className="w-40 h-9 dg-input" value={filterStart} onChange={(e) => setFilterStart(e.target.value)} />
</div>
<div>
<Label className="text-xs dg-text-secondary mb-1">结束日期</Label>
<Input type="date" className="w-40 h-9 dg-input" value={filterEnd} onChange={(e) => setFilterEnd(e.target.value)} />
</div>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadRecords}>
<RefreshCw className="h-4 w-4 mr-1" />查询
</Button>
</div>
);
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold text-slate-100">云账单管理</h2>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={() => { loadStats(); if (activeTab === 'records') loadRecords(); if (activeTab === 'alerts') loadRules(); }}>
<PageShell
variant="list"
title="云账单管理"
subtitle="多云成本统计、记录与预警"
icon={<Wallet className="h-5 w-5" />}
tabs={pageTabs}
activeTab={activeTab}
onTabChange={(id) => setActiveTab(id as typeof activeTab)}
toolbar={activeTab === 'records' ? recordsToolbar : undefined}
metrics={
stats && !statsLoading ? (
<StatStrip
items={[
{ label: '今日', value: formatCurrency(stats.today_cost || 0), color: 'blue' },
{ label: '本月', value: formatCurrency(stats.month_cost || 0), color: 'amber' },
{ label: '年度', value: formatCurrency(stats.year_cost || 0), color: 'purple' },
{ label: '预警', value: `${stats.alerts?.length || 0} 条`, color: stats.alerts?.length > 0 ? 'red' : 'muted' },
]}
/>
) : undefined
}
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={refreshAll}>
<RefreshCw className="h-4 w-4 mr-1" />刷新
</Button>
{activeTab === 'records' && (
<Button size="sm" onClick={openAddRecord}>
<Button size="sm" className="dg-btn-primary" onClick={openAddRecord}>
<Plus className="h-4 w-4 mr-1" />记录成本
</Button>
)}
{activeTab === 'alerts' && (
<Button size="sm" onClick={openAddRule}>
<Button size="sm" className="dg-btn-primary" onClick={openAddRule}>
<Plus className="h-4 w-4 mr-1" />添加规则
</Button>
)}
</div>
</div>
<div className="flex gap-1 border-b border-slate-800">
{([
{ key: 'overview', label: '概览统计' },
{ key: 'records', label: '成本记录' },
{ key: 'alerts', label: '预警规则' },
] as const).map(tab => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
activeTab === tab.key
? 'text-blue-400 border-blue-400'
: 'text-slate-400 border-transparent hover:text-slate-200'
}`}
>
{tab.label}
</button>
))}
</div>
</>
)}
>
{/* Tab 1：概览统计 */}
{activeTab === 'overview' && (
<div className="space-y-4">
{statsLoading ? (
<div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
) : stats ? (
<>
<StatStrip
items={[
{ label: '今日', value: formatCurrency(stats.today_cost || 0), color: 'blue' },
{ label: '本月', value: formatCurrency(stats.month_cost || 0), color: 'amber' },
{ label: '年度', value: formatCurrency(stats.year_cost || 0), color: 'purple' },
{ label: '预警', value: `${stats.alerts?.length || 0} 条`, color: stats.alerts?.length > 0 ? 'red' : 'muted' },
]}
/>
{stats.alerts?.length > 0 && (
<div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-4">
<div className="flex items-center gap-2 mb-3">
<Bell className="h-4 w-4 text-amber-400" />
<span className="text-sm font-medium text-amber-300">成本预警</span>
</div>
<div className="space-y-2">
{stats.alerts.map((a: JsonData, i: number) => (
<div key={i} className="flex items-center justify-between text-sm">
<div className="flex items-center gap-2">
<Badge variant="outline" className="border-amber-500/50 text-amber-300">{a.rule_name}</Badge>
<span className="text-slate-400">
{a.provider} · {a.metric === 'daily' ? '日' : '月'}成本
</span>
</div>
<span className="text-slate-300">
当前 <span className="text-amber-300 font-medium">{formatCurrency(a.current)}</span>
{' '}{a.operator}{' '}
阈值 <span className="text-red-400 font-medium">{formatCurrency(a.threshold)}</span>
statsLoading ? (
<PageLoading />
) : stats ? (
<div className="space-y-4">
{stats.alerts?.length > 0 && (
<div className="dg-alert-banner">
<div className="flex items-center gap-2 mb-3">
<Bell className="h-4 w-4 dg-text-yellow" />
<span className="dg-alert-banner-title">成本预警</span>
</div>
<div className="space-y-2">
{stats.alerts.map((a: JsonData, i: number) => (
<div key={i} className="flex items-center justify-between text-sm flex-wrap gap-2">
<div className="flex items-center gap-2">
<Badge variant="outline" className="dg-badge-yellow">{a.rule_name}</Badge>
<span className="dg-text-secondary">
{a.provider} · {a.metric === 'daily' ? '日' : '月'}成本
</span>
</div>
))}
</div>
</div>
)}
<Card className="bg-slate-900/50 border-slate-800">
<CardContent className="pt-4">
<h3 className="text-sm font-medium text-slate-200 mb-4">近 30 天成本趋势</h3>
<TrendChart data={stats.month_trend || []} />
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-slate-800">
<CardContent className="pt-4">
<h3 className="text-sm font-medium text-slate-200 mb-4">本月厂商成本分布</h3>
{(stats.provider_dist || []).length === 0 ? (
<p className="text-sm text-slate-500 py-8 text-center">暂无数据</p>
) : (
<div className="space-y-3">
<div className="flex h-8 rounded-lg overflow-hidden">
{stats.provider_dist.map((p: JsonData, i: number) => (
<div
key={i}
className={`${providerColors[p.provider] || 'bg-slate-600'} flex items-center justify-center text-xs text-white font-medium`}
style={{ width: `${p.percent}%` }}
title={`${providerLabels[p.provider] || p.provider}: ${formatCurrency(p.cost)} (${p.percent.toFixed(1)}%)`}
>
{p.percent > 8 ? (providerLabels[p.provider] || p.provider) : ''}
</div>
))}
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
{stats.provider_dist.map((p: JsonData, i: number) => (
<div key={i} className="flex items-center justify-between text-sm">
<div className="flex items-center gap-2">
<div className={`w-3 h-3 rounded ${providerColors[p.provider] || 'bg-slate-600'}`} />
<span className="text-slate-300">{providerLabels[p.provider] || p.provider}</span>
</div>
<div className="text-right">
<span className="text-slate-200 font-medium">{formatCurrency(p.cost)}</span>
<span className="text-slate-500 ml-2">{p.percent.toFixed(1)}%</span>
</div>
</div>
))}
</div>
<span className="text-[var(--text-secondary)]">
当前 <span className="dg-text-yellow font-medium">{formatCurrency(a.current)}</span>
{' '}{a.operator}{' '}
阈值 <span className="dg-text-red font-medium">{formatCurrency(a.threshold)}</span>
</span>
</div>
)}
</CardContent>
</Card>
</>
) : null}
</div>
))}
</div>
</div>
)}
<Card className="dg-card">
<CardContent className="pt-4">
<h3 className="dg-section-title">近 30 天成本趋势</h3>
<TrendChart data={stats.month_trend || []} />
</CardContent>
</Card>
<Card className="dg-card">
<CardContent className="pt-4">
<h3 className="dg-section-title">本月厂商成本分布</h3>
{(stats.provider_dist || []).length === 0 ? (
<PageEmpty title="暂无分布数据" className="py-8" />
) : (
<div className="space-y-3">
<div className="flex h-8 rounded-lg overflow-hidden">
{stats.provider_dist.map((p: JsonData, i: number) => (
<div
key={i}
className="flex items-center justify-center text-xs text-white font-medium"
style={{
width: `${p.percent}%`,
backgroundColor: providerHex[p.provider] || 'var(--surface-active)',
}}
title={`${providerLabels[p.provider] || p.provider}: ${formatCurrency(p.cost)} (${p.percent.toFixed(1)}%)`}
>
{p.percent > 8 ? (providerLabels[p.provider] || p.provider) : ''}
</div>
))}
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
{stats.provider_dist.map((p: JsonData, i: number) => (
<div key={i} className="flex items-center justify-between text-sm">
<div className="flex items-center gap-2">
<ProviderDot provider={p.provider} className="w-3 h-3" />
<span className="text-[var(--text-secondary)]">{providerLabels[p.provider] || p.provider}</span>
</div>
<div className="text-right">
<span className="text-[var(--text-primary)] font-medium">{formatCurrency(p.cost)}</span>
<span className="dg-text-muted ml-2">{p.percent.toFixed(1)}%</span>
</div>
</div>
))}
</div>
</div>
)}
</CardContent>
</Card>
</div>
) : (
<PageEmpty icon={<Wallet className="h-12 w-12" />} title="暂无统计数据" />
)
)}
{/* Tab 2：成本记录 */}
{activeTab === 'records' && (
<div className="space-y-3">
<div className="flex flex-wrap items-end gap-3">
<div>
<Label className="text-xs text-slate-400 mb-1">厂商</Label>
<Select value={filterProvider || 'all'} onValueChange={(v) => setFilterProvider(v === 'all' ? '' : v)}>
<SelectTrigger className="w-32 h-9"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="all">全部</SelectItem>
{Object.entries(providerLabels).map(([k, v]) => (
<SelectItem key={k} value={k}>{v}</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div>
<Label className="text-xs text-slate-400 mb-1">开始日期</Label>
<Input type="date" className="w-40 h-9" value={filterStart} onChange={(e) => setFilterStart(e.target.value)} />
</div>
<div>
<Label className="text-xs text-slate-400 mb-1">结束日期</Label>
<Input type="date" className="w-40 h-9" value={filterEnd} onChange={(e) => setFilterEnd(e.target.value)} />
</div>
<Button variant="outline" size="sm" onClick={loadRecords}>
<RefreshCw className="h-4 w-4 mr-1" />查询
</Button>
</div>
<ContentPanel noPadding>
{recordsLoading ? (
<div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
<PageLoading />
) : records.length === 0 ? (
<div className="py-20 text-center text-slate-500">
<Wallet className="h-12 w-12 mx-auto mb-3 opacity-30" />
<p className="text-sm">暂无成本记录</p>
</div>
<PageEmpty
icon={<Wallet className="h-12 w-12" />}
title="暂无成本记录"
action={(
<Button size="sm" className="dg-btn-primary" onClick={openAddRecord}>
<Plus className="h-4 w-4 mr-1" />记录成本
</Button>
)}
/>
) : (
<div className="overflow-x-auto rounded-lg border border-slate-800">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead className="bg-slate-900/80 text-slate-400">
<thead className="bg-[var(--surface-raised)] dg-text-secondary">
<tr>
<th className="px-4 py-2.5 text-left font-medium">日期</th>
<th className="px-4 py-2.5 text-left font-medium">厂商</th>
@@ -343,25 +365,25 @@ export function CloudBilling() {
</thead>
<tbody>
{records.map((r) => (
<tr key={r.id} className="border-t border-slate-800 hover:bg-slate-800/30">
<td className="px-4 py-2.5 text-slate-300">{r.billing_date}</td>
<tr key={r.id} className="dg-table-row border-t border-[var(--border-default)]">
<td className="px-4 py-2.5 text-[var(--text-secondary)]">{r.billing_date}</td>
<td className="px-4 py-2.5">
<span className="inline-flex items-center gap-1.5">
<span className={`w-2 h-2 rounded-full ${providerColors[r.provider] || 'bg-slate-500'}`} />
<ProviderDot provider={r.provider} />
{providerLabels[r.provider] || r.provider}
</span>
</td>
<td className="px-4 py-2.5 text-slate-400">{r.service || '-'}</td>
<td className="px-4 py-2.5 text-slate-400">{r.region || '-'}</td>
<td className="px-4 py-2.5 text-slate-400">{r.account_name || '-'}</td>
<td className="px-4 py-2.5 text-right text-slate-200 font-medium">{formatCurrency(r.cost)}</td>
<td className="px-4 py-2.5 text-slate-500 max-w-xs truncate">{r.description || '-'}</td>
<td className="px-4 py-2.5 dg-text-secondary">{r.service || '-'}</td>
<td className="px-4 py-2.5 dg-text-secondary">{r.region || '-'}</td>
<td className="px-4 py-2.5 dg-text-secondary">{r.account_name || '-'}</td>
<td className="px-4 py-2.5 text-right text-[var(--text-primary)] font-medium">{formatCurrency(r.cost)}</td>
<td className="px-4 py-2.5 dg-text-muted max-w-xs truncate">{r.description || '-'}</td>
<td className="px-4 py-2.5">
<div className="flex items-center justify-center gap-1">
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRecord(r)}>
<Pencil className="h-3.5 w-3.5" />
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => handleDeleteRecord(r.id)}>
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => handleDeleteRecord(r.id)}>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
@@ -372,64 +394,69 @@ export function CloudBilling() {
</table>
</div>
)}
</div>
</ContentPanel>
)}
{/* Tab 3：预警规则 */}
{activeTab === 'alerts' && (
<div className="space-y-3">
{rulesLoading ? (
<div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
) : rules.length === 0 ? (
<div className="py-20 text-center text-slate-500">
<Bell className="h-12 w-12 mx-auto mb-3 opacity-30" />
<p className="text-sm">暂无预警规则</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{rules.map((r) => (
<Card key={r.id} className="bg-slate-900/50 border-slate-800">
<CardContent className="pt-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<Bell className={`h-4 w-4 ${r.enabled ? 'text-amber-400' : 'text-slate-600'}`} />
<span className="text-sm font-medium text-slate-200">{r.name}</span>
</div>
<Switch checked={r.enabled} onCheckedChange={() => handleToggleRule(r.id)} />
rulesLoading ? (
<PageLoading />
) : rules.length === 0 ? (
<PageEmpty
icon={<Bell className="h-12 w-12" />}
title="暂无预警规则"
description="添加规则后，成本超阈值将在此页管理"
action={(
<Button size="sm" className="dg-btn-primary" onClick={openAddRule}>
<Plus className="h-4 w-4 mr-1" />添加规则
</Button>
)}
/>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{rules.map((r) => (
<Card key={r.id} className="dg-card">
<CardContent className="pt-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<Bell className={`h-4 w-4 ${r.enabled ? 'dg-text-yellow' : 'dg-text-muted'}`} />
<span className="text-sm font-medium text-[var(--text-primary)]">{r.name}</span>
</div>
<div className="grid grid-cols-2 gap-2 text-sm">
<div>
<span className="text-slate-500">厂商</span>
<span className="ml-2 text-slate-300">{r.provider ? (providerLabels[r.provider] || r.provider) : '全部'}</span>
</div>
<div>
<span className="text-slate-500">指标</span>
<span className="ml-2 text-slate-300">{r.metric === 'daily' ? '日成本' : '月累计'}</span>
</div>
<div>
<span className="text-slate-500">阈值</span>
<span className="ml-2 text-amber-300 font-medium">{r.operator} {formatCurrency(r.threshold)}</span>
</div>
{r.last_triggered && (
<div>
<span className="text-slate-500">最后触发</span>
<span className="ml-2 text-slate-400">{new Date(r.last_triggered).toLocaleString('zh-CN')}</span>
</div>
)}
<Switch checked={r.enabled} onCheckedChange={() => handleToggleRule(r.id)} />
</div>
<div className="grid grid-cols-2 gap-2 text-sm">
<div>
<span className="dg-text-muted">厂商</span>
<span className="ml-2 text-[var(--text-secondary)]">{r.provider ? (providerLabels[r.provider] || r.provider) : '全部'}</span>
</div>
<div className="flex justify-end gap-1 mt-3">
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRule(r)}>
<Pencil className="h-3.5 w-3.5" />
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => handleDeleteRule(r.id)}>
<Trash2 className="h-3.5 w-3.5" />
</Button>
<div>
<span className="dg-text-muted">指标</span>
<span className="ml-2 text-[var(--text-secondary)]">{r.metric === 'daily' ? '日成本' : '月累计'}</span>
</div>
</CardContent>
</Card>
))}
</div>
)}
</div>
<div>
<span className="dg-text-muted">阈值</span>
<span className="ml-2 dg-text-yellow font-medium">{r.operator} {formatCurrency(r.threshold)}</span>
</div>
{r.last_triggered && (
<div>
<span className="dg-text-muted">最后触发</span>
<span className="ml-2 dg-text-secondary">{new Date(r.last_triggered).toLocaleString('zh-CN')}</span>
</div>
)}
</div>
<div className="flex justify-end gap-1 mt-3">
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRule(r)}>
<Pencil className="h-3.5 w-3.5" />
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => handleDeleteRule(r.id)}>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
</CardContent>
</Card>
))}
</div>
)
)}
<BillingRecordDialog
@@ -444,6 +471,6 @@ export function CloudBilling() {
editingRule={editingRule}
onSuccess={() => { loadRules(); loadStats(); }}
/>
</div>
</PageShell>
);
}
}
frontend/src/components/cloud/CloudBillingHelpers.tsx
+35 -14
View File
@@ -10,7 +10,16 @@ export const providerLabels: Record<string, string> = {
azure: 'Azure',
};
// 云厂商品牌色（主组件 + 弹窗共享） // Logan.Li
// 云厂商品牌色（跨主题固定，用 hex 避免 Tailwind 硬编码） // Logan.Li
export const providerHex: Record<string, string> = {
aliyun: '#FF6A00',
tencent: '#006EFF',
aws: '#FF9900',
huawei: '#CF0A2C',
azure: '#0078D4',
};
/** @deprecated 请改用 providerHex + style */
export const providerColors: Record<string, string> = {
aliyun: 'bg-orange-500',
tencent: 'bg-blue-500',
@@ -19,6 +28,15 @@ export const providerColors: Record<string, string> = {
azure: 'bg-sky-500',
};
export function ProviderDot({ provider, className = 'w-2 h-2' }: { provider: string; className?: string }) {
return (
<span
className={`rounded-full shrink-0 ${className}`}
style={{ backgroundColor: providerHex[provider] || 'var(--surface-active)' }}
/>
);
}
export function formatCurrency(n: number) {
return `¥${n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}
@@ -32,17 +50,17 @@ export function StatCard({ icon, label, value, trend, trendLabel, alert }: {
alert?: boolean;
}) {
return (
<div className={`rounded-lg border p-4 ${alert ? 'border-amber-500/30 bg-amber-500/5' : 'border-slate-800 bg-slate-900/50'}`}>
<div className={alert ? 'dg-alert-banner' : 'rounded-lg border border-[var(--border-default)] bg-[var(--surface-raised)]/50 p-4'}>
<div className="flex items-center justify-between mb-2">
<span className="text-slate-400 text-sm">{label}</span>
<span className={alert ? 'text-amber-400' : 'text-slate-500'}>{icon}</span>
<span className="dg-text-secondary text-sm">{label}</span>
<span className={alert ? 'dg-text-yellow' : 'dg-text-muted'}>{icon}</span>
</div>
<div className={`text-2xl font-bold ${alert ? 'text-amber-300' : 'text-slate-100'}`}>{value}</div>
<div className={`text-2xl font-bold ${alert ? 'dg-text-yellow' : 'text-[var(--text-primary)]'}`}>{value}</div>
{trendLabel && (
<div className="flex items-center gap-1 mt-1 text-xs">
{trend !== undefined && trend > 0 && <TrendingUp className="h-3 w-3 text-red-400" />}
{trend !== undefined && trend < 0 && <TrendingDown className="h-3 w-3 text-green-400" />}
<span className="text-slate-500">{trendLabel}</span>
{trend !== undefined && trend > 0 && <TrendingUp className="h-3 w-3 dg-text-red" />}
{trend !== undefined && trend < 0 && <TrendingDown className="h-3 w-3 dg-text-green" />}
<span className="dg-text-muted">{trendLabel}</span>
</div>
)}
</div>
@@ -51,7 +69,7 @@ export function StatCard({ icon, label, value, trend, trendLabel, alert }: {
export function TrendChart({ data }: { data: { date: string; cost: number }[] }) {
if (data.length === 0) {
return <p className="text-sm text-slate-500 py-8 text-center">暂无数据</p>;
return <p className="text-sm dg-text-muted py-8 text-center">暂无数据</p>;
}
const max = Math.max(...data.map((d) => d.cost), 1);
const recent = data.slice(-30);
@@ -68,20 +86,23 @@ export function TrendChart({ data }: { data: { date: string; cost: number }[] })
style={{ height: '100%' }}
>
<div
className="absolute bottom-0 w-full rounded-t-sm bg-gradient-to-t from-blue-600/60 to-blue-400/80 group-hover:from-blue-500 group-hover:to-blue-300 transition-colors"
style={{ height: `${h}%` }}
className="absolute bottom-0 w-full rounded-t-sm transition-opacity group-hover:opacity-90"
style={{
height: `${h}%`,
background: `linear-gradient(to top, color-mix(in srgb, var(--brand) 55%, transparent), color-mix(in srgb, var(--brand) 85%, transparent))`,
}}
/>
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap text-xs bg-slate-800 text-slate-200 px-2 py-1 rounded border border-slate-700 z-10">
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap text-xs bg-[var(--surface-inset)] text-[var(--text-primary)] px-2 py-1 rounded border border-[var(--border-default)] z-10">
{d.date}: {formatCurrency(d.cost)}
</div>
</div>
);
})}
</div>
<div className="flex justify-between mt-2 text-xs text-slate-500">
<div className="flex justify-between mt-2 text-xs dg-text-muted">
<span>{recent[0]?.date}</span>
<span>{recent[recent.length - 1]?.date}</span>
</div>
</div>
);
}
}
frontend/src/components/cloud/DomainManager.tsx
+104 -86
View File
@@ -25,6 +25,10 @@ import {
Loader2,
} from 'lucide-react';
import { cloudApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
import { PageLoading } from '@/components/layout/PageLoading';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
export function DomainManager() {
@@ -145,7 +149,7 @@ export function DomainManager() {
return matchesSearch && matchesStatus;
});
const _stats = {
const stats = {
total: domains.length,
active: domains.filter(d => d.status === 'active').length,
expired: domains.filter(d => d.status === 'expired').length,
@@ -159,61 +163,75 @@ export function DomainManager() {
return days;
};
const toolbar = (
<div className="flex items-center gap-4 flex-wrap">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input
placeholder="搜索域名..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 h-9 dg-input"
/>
</div>
<select
value={selectedStatus}
onChange={(e) => setSelectedStatus(e.target.value)}
className="px-3 py-2 h-9 rounded-md text-sm dg-input"
>
<option value="all">全部状态</option>
<option value="active">正常</option>
<option value="expired">已过期</option>
<option value="pending">待审核</option>
</select>
</div>
);
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-slate-100">域名管理</h1>
<p className="text-slate-400 mt-1">管理域名注册信息和DNS解析记录</p>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={loadData} className="border-slate-700 text-slate-300">
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
<PageShell
variant="list"
title="域名管理"
subtitle="管理域名注册信息和DNS解析记录"
icon={<Globe className="h-5 w-5" />}
metrics={
!loading ? (
<StatStrip
items={[
{ label: '总计', value: stats.total, color: 'blue' },
{ label: '正常', value: stats.active, color: 'green' },
{ label: '已过期', value: stats.expired, color: stats.expired > 0 ? 'red' : 'muted' },
{ label: 'SSL', value: stats.sslEnabled, color: 'cyan' },
]}
/>
) : undefined
}
toolbar={toolbar}
actions={(
<>
<Button variant="outline" size="sm" onClick={loadData} className="dg-btn-secondary">
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
<Button className="bg-blue-600 hover:bg-blue-700" onClick={handleOpenCreate}>
<Plus className="h-4 w-4 mr-2" />
<Button size="sm" className="dg-btn-primary" onClick={handleOpenCreate}>
<Plus className="h-4 w-4 mr-1" />
添加域名
</Button>
</div>
</div>
{/* Filters */}
<div className="flex items-center gap-4">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
<Input
placeholder="搜索域名..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 bg-slate-800 border-slate-700 text-slate-100"
/>
</div>
<select
value={selectedStatus}
onChange={(e) => setSelectedStatus(e.target.value)}
className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
>
<option value="all">全部状态</option>
<option value="active">正常</option>
<option value="expired">已过期</option>
<option value="pending">待审核</option>
</select>
</div>
{/* Domain List */}
</>
)}
>
{loading ? (
<Card className="bg-slate-800 border-slate-700">
<CardContent className="p-12 text-center text-slate-500">
<RefreshCw className="h-6 w-6 animate-spin mx-auto mb-3" />
加载中...
</CardContent>
</Card>
<PageLoading />
) : filteredDomains.length === 0 ? (
<Card className="bg-slate-800 border-slate-700">
<CardContent className="p-12 text-center text-slate-500">暂无域名数据</CardContent>
</Card>
<PageEmpty
icon={<Globe className="h-12 w-12" />}
title="暂无域名数据"
action={(
<Button size="sm" className="dg-btn-primary" onClick={handleOpenCreate}>
<Plus className="h-4 w-4 mr-1" />
添加域名
</Button>
)}
/>
) : (
<div className="space-y-3">
{filteredDomains.map((domain) => {
@@ -222,42 +240,42 @@ export function DomainManager() {
const sslExpireDate = domain.ssl_expire_date || domain.sslExpireDate || '';
const daysUntilExpiry = getDaysUntilExpiry(expireDate);
return (
<Card key={domain.id} className="bg-slate-800 border-slate-700">
<Card key={domain.id} className="dg-card dg-card-hover">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
<Globe className="h-5 w-5 text-white" />
<div className="dg-icon-box">
<Globe className="h-5 w-5" />
</div>
<div>
<div className="flex items-center gap-2">
<h3 className="font-medium text-slate-100 text-lg">{domain.name}</h3>
<h3 className="font-medium text-[var(--dg-text-primary)] text-lg">{domain.name}</h3>
{domain.status === 'active' && (
<Badge className="bg-green-500/20 text-green-400 border-0">
<Badge className="dg-status-running border-0">
<CheckCircle2 className="h-3 w-3 mr-1" />
正常
</Badge>
)}
{domain.status === 'expired' && (
<Badge className="bg-red-500/20 text-red-400 border-0">
<Badge className="dg-status-error border-0">
<XCircle className="h-3 w-3 mr-1" />
已过期
</Badge>
)}
{domain.status === 'pending' && (
<Badge className="bg-yellow-500/20 text-yellow-400 border-0">
<Badge className="dg-status-warning border-0">
<Clock className="h-3 w-3 mr-1" />
待审核
</Badge>
)}
{sslEnabled && (
<Badge className="bg-cyan-500/20 text-cyan-400 border-0">
<Badge className="dg-badge-cyan border-0">
<CheckCircle2 className="h-3 w-3 mr-1" />
SSL
</Badge>
)}
</div>
<div className="flex items-center gap-4 mt-1 text-sm text-slate-400">
<div className="flex items-center gap-4 mt-1 text-sm dg-text-secondary">
<span>注册商: {domain.registrar || '-'}</span>
<span>DNS: {domain.dns_provider || domain.dnsProvider || '-'}</span>
<span>解析记录: {domain.record_count ?? domain.recordCount ?? 0}条</span>
@@ -266,11 +284,11 @@ export function DomainManager() {
</div>
<div className="flex items-center gap-4">
<div className="text-right">
<p className="text-sm text-slate-400">到期时间</p>
<p className={`text-sm font-medium ${daysUntilExpiry < 30 ? 'text-red-400' : 'text-slate-200'}`}>
<p className="text-sm dg-text-secondary">到期时间</p>
<p className={`text-sm font-medium ${daysUntilExpiry < 30 ? 'text-[var(--dg-red)]' : 'text-[var(--dg-text-primary)]'}`}>
{expireDate ? expireDate.substring(0, 10) : '-'}{expireDate && ` (${daysUntilExpiry}天)`}
{sslEnabled && sslExpireDate && (
<span className="text-slate-500"> · SSL: {sslExpireDate.substring(0, 10)}</span>
<span className="dg-text-muted"> · SSL: {sslExpireDate.substring(0, 10)}</span>
)}
</p>
</div>
@@ -278,7 +296,7 @@ export function DomainManager() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-slate-400 hover:text-blue-400"
className="h-8 w-8 dg-text-muted hover:text-[var(--dg-blue)]"
onClick={() => handleOpenEdit(domain)}
>
<Edit2 className="h-4 w-4" />
@@ -286,7 +304,7 @@ export function DomainManager() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-slate-400 hover:text-red-400"
className="h-8 w-8 dg-text-muted hover:text-[var(--dg-red)]"
onClick={() => handleDelete(domain.id)}
>
<Trash2 className="h-4 w-4" />
@@ -303,44 +321,44 @@ export function DomainManager() {
{/* 创建/编辑域名 Dialog */}
<Dialog open={formOpen} onOpenChange={setFormOpen}>
<DialogContent className="bg-slate-800 border-slate-700 text-slate-100 max-w-lg">
<DialogContent className="max-w-lg">
<DialogHeader>
<DialogTitle className="text-slate-100 flex items-center gap-2">
<Globe className="h-5 w-5 text-blue-400" />
<DialogTitle className="flex items-center gap-2">
<Globe className="h-5 w-5 text-[var(--dg-blue)]" />
{editingDomain ? '编辑域名' : '添加域名'}
</DialogTitle>
<DialogDescription className="text-slate-400">
<DialogDescription>
{editingDomain ? '修改域名注册信息、DNS 配置和 SSL 证书状态' : '录入域名信息，包括注册商、DNS 服务商和到期时间'}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-2">
<div className="space-y-2">
<Label className="text-slate-300">域名 *</Label>
<Label>域名 *</Label>
<Input
placeholder="example.com"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="bg-slate-900 border-slate-700 text-slate-100"
className="dg-input"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label className="text-slate-300">注册商</Label>
<Label>注册商</Label>
<Input
placeholder="阿里云 / Cloudflare ..."
value={formData.registrar}
onChange={(e) => setFormData({ ...formData, registrar: e.target.value })}
className="bg-slate-900 border-slate-700 text-slate-100"
className="dg-input"
/>
</div>
<div className="space-y-2">
<Label className="text-slate-300">状态</Label>
<Label>状态</Label>
<select
value={formData.status}
onChange={(e) => setFormData({ ...formData, status: e.target.value })}
className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-md text-slate-100 text-sm"
className="w-full px-3 py-2 rounded-md text-sm dg-input"
>
<option value="active">正常</option>
<option value="expired">已过期</option>
@@ -351,45 +369,45 @@ export function DomainManager() {
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label className="text-slate-300">到期时间</Label>
<Label>到期时间</Label>
<Input
type="date"
value={formData.expire_date}
onChange={(e) => setFormData({ ...formData, expire_date: e.target.value })}
className="bg-slate-900 border-slate-700 text-slate-100"
className="dg-input"
/>
</div>
<div className="space-y-2">
<Label className="text-slate-300">DNS 服务商</Label>
<Label>DNS 服务商</Label>
<Input
placeholder="Cloudflare / DNSPod ..."
value={formData.dns_provider}
onChange={(e) => setFormData({ ...formData, dns_provider: e.target.value })}
className="bg-slate-900 border-slate-700 text-slate-100"
className="dg-input"
/>
</div>
</div>
<div className="space-y-2">
<Label className="text-slate-300">解析记录数</Label>
<Label>解析记录数</Label>
<Input
type="number"
placeholder="0"
value={formData.record_count}
onChange={(e) => setFormData({ ...formData, record_count: e.target.value })}
className="bg-slate-900 border-slate-700 text-slate-100"
className="dg-input"
/>
</div>
<div className="grid grid-cols-2 gap-4 items-end">
<div className="space-y-2">
<Label className="text-slate-300">SSL 证书到期</Label>
<Label>SSL 证书到期</Label>
<Input
type="date"
value={formData.ssl_expire_date}
onChange={(e) => setFormData({ ...formData, ssl_expire_date: e.target.value })}
disabled={!formData.ssl_enabled}
className="bg-slate-900 border-slate-700 text-slate-100 disabled:opacity-40"
className="dg-input disabled:opacity-40"
/>
</div>
<label className="flex items-center gap-2 cursor-pointer pb-2">
@@ -397,19 +415,19 @@ export function DomainManager() {
type="checkbox"
checked={formData.ssl_enabled}
onChange={(e) => setFormData({ ...formData, ssl_enabled: e.target.checked })}
className="h-4 w-4 rounded border-slate-600 bg-slate-900 accent-cyan-500"
className="h-4 w-4 rounded border-[var(--dg-border)] accent-[var(--dg-cyan)]"
/>
<span className="text-slate-300 text-sm">启用 SSL</span>
<span className="text-sm text-[var(--dg-text-secondary)]">启用 SSL</span>
</label>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setFormOpen(false)} className="border-slate-700 text-slate-300">
<Button variant="outline" onClick={() => setFormOpen(false)} className="dg-btn-secondary">
取消
</Button>
<Button
className="bg-blue-600 hover:bg-blue-700"
className="dg-btn-primary"
disabled={!formData.name.trim() || submitting}
onClick={handleSubmit}
>
@@ -419,6 +437,6 @@ export function DomainManager() {
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</PageShell>
);
}
frontend/src/components/cloud/PlatformManager.tsx
+100 -62
View File
@@ -28,8 +28,13 @@ import {
XCircle,
ExternalLink,
Loader2,
RefreshCw,
} from 'lucide-react';
import { platformApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
import { PageLoading } from '@/components/layout/PageLoading';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
const typeLabels: Record<string, string> = {
@@ -39,9 +44,9 @@ const typeLabels: Record<string, string> = {
};
const typeColors: Record<string, string> = {
public: 'text-blue-400',
private: 'text-purple-400',
hybrid: 'text-cyan-400',
public: 'text-[var(--dg-blue)]',
private: 'text-[var(--dg-purple)]',
hybrid: 'text-[var(--dg-cyan)]',
};
export function PlatformManager() {
@@ -121,94 +126,127 @@ export function PlatformManager() {
loadData();
};
return (
<div className="p-6 space-y-4">
{/* Toolbar */}
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-3 flex-1">
<div className="relative w-72">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
<Input
placeholder="搜索平台名称或编码..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 h-9 bg-slate-800/50 border-slate-700"
/>
</div>
<Select value={selectedType} onValueChange={setSelectedType}>
<SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部类型</SelectItem>
<SelectItem value="public">公有云</SelectItem>
<SelectItem value="private">私有云</SelectItem>
<SelectItem value="hybrid">混合云</SelectItem>
</SelectContent>
</Select>
</div>
<Button onClick={openCreate} className="gap-2">
<Plus className="h-4 w-4" />
添加平台
</Button>
</div>
const stats = {
total: platforms.length,
active: platforms.filter(p => p.status === 'active').length,
public: platforms.filter(p => p.type === 'public').length,
};
{/* List */}
const toolbar = (
<div className="flex items-center gap-3 flex-wrap">
<div className="relative w-72">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input
placeholder="搜索平台名称或编码..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 h-9 dg-input"
/>
</div>
<Select value={selectedType} onValueChange={setSelectedType}>
<SelectTrigger className="w-32 h-9 dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部类型</SelectItem>
<SelectItem value="public">公有云</SelectItem>
<SelectItem value="private">私有云</SelectItem>
<SelectItem value="hybrid">混合云</SelectItem>
</SelectContent>
</Select>
</div>
);
return (
<PageShell
variant="list"
title="云平台管理"
subtitle="管理公有云、私有云与混合云平台信息"
icon={<CloudCog className="h-5 w-5" />}
metrics={
!loading ? (
<StatStrip
items={[
{ label: '总计', value: stats.total, color: 'blue' },
{ label: '启用', value: stats.active, color: 'green' },
{ label: '公有云', value: stats.public, color: 'cyan' },
]}
/>
) : undefined
}
toolbar={toolbar}
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
<Button size="sm" className="dg-btn-primary" onClick={openCreate}>
<Plus className="h-4 w-4 mr-1" />
添加平台
</Button>
</>
)}
>
{loading ? (
<div className="flex justify-center py-20">
<Loader2 className="h-6 w-6 animate-spin text-slate-500" />
</div>
<PageLoading />
) : filtered.length === 0 ? (
<div className="text-center py-20 text-slate-500">
<CloudCog className="h-12 w-12 mx-auto mb-3 opacity-40" />
<p>暂无云平台数据</p>
</div>
<PageEmpty
icon={<CloudCog className="h-12 w-12" />}
title="暂无云平台数据"
action={(
<Button size="sm" className="dg-btn-primary" onClick={openCreate}>
<Plus className="h-4 w-4 mr-1" />
添加平台
</Button>
)}
/>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{filtered.map((p) => (
<div
key={p.id}
className="bg-slate-800/30 rounded-lg p-4 hover:bg-slate-800/50 transition-colors group"
className="dg-card dg-card-hover p-4 group"
>
<div className="flex items-start justify-between mb-3">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
<CloudCog className="h-5 w-5 text-blue-400" />
<div className="w-10 h-10 rounded-lg bg-[var(--dg-blue)]/15 flex items-center justify-center">
<CloudCog className="h-5 w-5 text-[var(--dg-blue)]" />
</div>
<div>
<h3 className="font-medium text-slate-100">{p.name}</h3>
<span className="text-xs text-slate-500 font-mono">{p.code}</span>
<h3 className="font-medium text-[var(--dg-text-primary)]">{p.name}</h3>
<span className="text-xs dg-text-muted font-mono">{p.code}</span>
</div>
</div>
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
{p.website && (
<a href={p.website} target="_blank" rel="noreferrer" className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200">
<a href={p.website} target="_blank" rel="noreferrer" className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] dg-text-muted hover:text-[var(--dg-text-primary)]">
<ExternalLink className="h-3.5 w-3.5" />
</a>
)}
<button onClick={() => openEdit(p)} className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200">
<button onClick={() => openEdit(p)} className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] dg-text-muted hover:text-[var(--dg-text-primary)]">
<Pencil className="h-3.5 w-3.5" />
</button>
<button onClick={() => handleDelete(p.id)} className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-red-400">
<button onClick={() => handleDelete(p.id)} className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] dg-text-muted hover:text-[var(--dg-red)]">
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
</div>
{p.description && (
<p className="text-sm text-slate-400 mb-3 line-clamp-2">{p.description}</p>
<p className="text-sm dg-text-secondary mb-3 line-clamp-2">{p.description}</p>
)}
<div className="flex items-center gap-2 flex-wrap">
<Badge variant="outline" className={typeColors[p.type] || 'text-slate-400'}>
<Badge variant="outline" className={typeColors[p.type] || 'dg-text-muted'}>
{typeLabels[p.type] || p.type}
</Badge>
{p.status === 'active' ? (
<Badge className="bg-emerald-500/20 text-emerald-400 gap-1">
<Badge className="dg-status-running gap-1 border-0">
<CheckCircle2 className="h-3 w-3" /> 启用
</Badge>
) : (
<Badge className="bg-slate-500/20 text-slate-400 gap-1">
<Badge className="dg-status-stopped gap-1 border-0">
<XCircle className="h-3 w-3" /> 禁用
</Badge>
)}
@@ -233,7 +271,7 @@ export function PlatformManager() {
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder="如：阿里云"
className="bg-slate-800/50 border-slate-700"
className="dg-input"
/>
</div>
<div className="space-y-1.5">
@@ -242,7 +280,7 @@ export function PlatformManager() {
value={formData.code}
onChange={(e) => setFormData({ ...formData, code: e.target.value })}
placeholder="如：aliyun"
className="bg-slate-800/50 border-slate-700"
className="dg-input"
disabled={!!editingItem}
/>
</div>
@@ -251,7 +289,7 @@ export function PlatformManager() {
<div className="space-y-1.5">
<Label>类型</Label>
<Select value={formData.type} onValueChange={(v) => setFormData({ ...formData, type: v })}>
<SelectTrigger className="bg-slate-800/50 border-slate-700">
<SelectTrigger className="dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -264,7 +302,7 @@ export function PlatformManager() {
<div className="space-y-1.5">
<Label>状态</Label>
<Select value={formData.status} onValueChange={(v) => setFormData({ ...formData, status: v })}>
<SelectTrigger className="bg-slate-800/50 border-slate-700">
<SelectTrigger className="dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -280,7 +318,7 @@ export function PlatformManager() {
value={formData.website}
onChange={(e) => setFormData({ ...formData, website: e.target.value })}
placeholder="https://..."
className="bg-slate-800/50 border-slate-700"
className="dg-input"
/>
</div>
<div className="space-y-1.5">
@@ -289,7 +327,7 @@ export function PlatformManager() {
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
placeholder="平台描述..."
className="bg-slate-800/50 border-slate-700"
className="dg-input"
/>
</div>
</div>
@@ -310,13 +348,13 @@ export function PlatformManager() {
<DialogTitle>确认删除</DialogTitle>
<DialogDescription className="sr-only">描述</DialogDescription>
</DialogHeader>
<p className="text-sm text-slate-400">确定删除此云平台？此操作不可撤销。</p>
<p className="text-sm dg-text-secondary">确定删除此云平台？此操作不可撤销。</p>
<DialogFooter>
<Button variant="ghost" onClick={() => setDeleteId(null)}>取消</Button>
<Button variant="destructive" onClick={confirmDelete}>删除</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</PageShell>
);
}
frontend/src/components/cloud/RegionManager.tsx
+117 -80
View File
@@ -27,10 +27,16 @@ import {
CheckCircle2,
XCircle,
Loader2,
RefreshCw,
} from 'lucide-react';
import { regionApi } from '@/api';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { toast } from 'sonner';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { PageLoading } from '@/components/layout/PageLoading';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
const providerNames: Record<string, string> = {
@@ -42,11 +48,11 @@ const providerNames: Record<string, string> = {
};
const providerColors: Record<string, string> = {
aws: 'text-orange-400',
aliyun: 'text-orange-400',
tencent: 'text-blue-400',
huawei: 'text-red-400',
azure: 'text-blue-400',
aws: 'dg-text-orange',
aliyun: 'dg-text-orange',
tencent: 'dg-text-blue',
huawei: 'dg-text-red',
azure: 'dg-text-blue',
};
export function RegionManager() {
@@ -171,9 +177,9 @@ export function RegionManager() {
{
key: 'status', header: '状态', sortable: true,
render: (r) => r.status === 'active' ? (
<Badge className="bg-emerald-500/20 text-emerald-400 gap-1"><CheckCircle2 className="h-3 w-3" /> 启用</Badge>
<Badge className="dg-status-running gap-1 border-0"><CheckCircle2 className="h-3 w-3" /> 启用</Badge>
) : (
<Badge className="bg-slate-500/20 text-slate-400 gap-1"><XCircle className="h-3 w-3" /> 禁用</Badge>
<Badge className="dg-status-stopped gap-1 border-0"><XCircle className="h-3 w-3" /> 禁用</Badge>
),
},
{
@@ -183,7 +189,7 @@ export function RegionManager() {
<button onClick={() => openEdit(r)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
<Pencil className="h-3.5 w-3.5" />
</button>
<button onClick={() => handleDelete(r.id)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:text-red-400">
<button onClick={() => handleDelete(r.id)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:dg-text-red">
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
@@ -191,74 +197,105 @@ export function RegionManager() {
},
];
return (
<div className="p-6 space-y-4">
{/* 批量操作栏 */}
{selectedIds.length > 0 && (
<div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
<span className="text-sm text-[var(--dg-text-secondary)]">
已选择 <span className="font-semibold text-[var(--dg-text-primary)]">{selectedIds.length}</span> 个区域
</span>
<div className="flex items-center gap-2">
<Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
取消选择
</Button>
<Button
variant="outline"
size="sm"
className="border-red-500/30 text-red-400 hover:bg-red-500/10"
onClick={handleBatchDelete}
>
<Trash2 className="h-4 w-4 mr-1.5" />
批量删除
</Button>
</div>
</div>
)}
const stats = {
total: regions.length,
active: regions.filter(r => r.status === 'active').length,
inactive: regions.filter(r => r.status !== 'active').length,
};
{/* DataTable */}
<DataTable
columns={columns}
data={filtered}
rowKey={(r) => r.id}
loading={loading}
searchable
searchPlaceholder="搜索区域名称或编码..."
searchKeys={['name', 'code']}
sortable
selectable
selectedIds={selectedIds}
onSelectionChange={setSelectedIds}
columnToggle
exportable
exportFilename="regions.csv"
emptyText="暂无区域数据"
emptyRender={() => (
<div className="flex flex-col items-center gap-3 py-8">
<MapPin className="h-12 w-12 text-[var(--dg-text-muted)] opacity-40" />
<p className="text-[var(--dg-text-muted)]">暂无区域数据</p>
</div>
)}
toolbarExtra={
<>
<Select value={selectedProvider} onValueChange={setSelectedProvider}>
<SelectTrigger className="w-32 h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部云商</SelectItem>
{Object.entries(providerNames).map(([k, v]) => (
<SelectItem key={k} value={k}>{v}</SelectItem>
))}
</SelectContent>
</Select>
<Button onClick={openCreate} size="sm" className="h-8 gap-1.5">
<Plus className="h-4 w-4" />
const toolbar = (
<Select value={selectedProvider} onValueChange={setSelectedProvider}>
<SelectTrigger className="w-32 h-9 dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部云商</SelectItem>
{Object.entries(providerNames).map(([k, v]) => (
<SelectItem key={k} value={k}>{v}</SelectItem>
))}
</SelectContent>
</Select>
);
const batchToolbar = selectedIds.length > 0 ? (
<div className="flex items-center gap-2">
<span className="text-sm dg-text-secondary">
已选择 <span className="font-semibold text-[var(--text-primary)]">{selectedIds.length}</span> 个区域
</span>
<Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="dg-text-muted">
取消选择
</Button>
<Button variant="outline" size="sm" className="dg-btn-danger" onClick={handleBatchDelete}>
<Trash2 className="h-4 w-4 mr-1" />
批量删除
</Button>
</div>
) : undefined;
return (
<PageShell
variant="list"
title="区域管理"
subtitle="管理各云厂商的区域与接入端点"
icon={<MapPin className="h-5 w-5" />}
metrics={
!loading ? (
<StatStrip
items={[
{ label: '总计', value: stats.total, color: 'blue' },
{ label: '启用', value: stats.active, color: 'green' },
{ label: '禁用', value: stats.inactive, color: 'muted' },
]}
/>
) : undefined
}
toolbar={toolbar}
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
<Button size="sm" className="dg-btn-primary" onClick={openCreate}>
<Plus className="h-4 w-4 mr-1" />
添加区域
</Button>
</>
)}
>
{loading ? (
<PageLoading />
) : filtered.length === 0 ? (
<PageEmpty
icon={<MapPin className="h-12 w-12" />}
title="暂无区域数据"
action={(
<Button size="sm" className="dg-btn-primary" onClick={openCreate}>
<Plus className="h-4 w-4 mr-1" />
添加区域
</Button>
</>
}
/>
)}
/>
) : (
<ContentPanel toolbar={batchToolbar}>
<DataTable
columns={columns}
data={filtered}
rowKey={(r) => r.id}
searchable
searchPlaceholder="搜索区域名称或编码..."
searchKeys={['name', 'code']}
sortable
selectable
selectedIds={selectedIds}
onSelectionChange={setSelectedIds}
columnToggle
exportable
exportFilename="regions.csv"
emptyText="暂无匹配区域"
/>
</ContentPanel>
)}
{/* Dialog */}
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
@@ -275,7 +312,7 @@ export function RegionManager() {
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder="如：华北-北京"
className="bg-slate-800/50 border-slate-700"
className="dg-input"
/>
</div>
<div className="space-y-1.5">
@@ -284,7 +321,7 @@ export function RegionManager() {
value={formData.code}
onChange={(e) => setFormData({ ...formData, code: e.target.value })}
placeholder="如：cn-north-1"
className="bg-slate-800/50 border-slate-700 font-mono"
className="dg-input font-mono"
disabled={!!editingItem}
/>
</div>
@@ -293,7 +330,7 @@ export function RegionManager() {
<div className="space-y-1.5">
<Label>云商</Label>
<Select value={formData.provider} onValueChange={(v) => setFormData({ ...formData, provider: v })}>
<SelectTrigger className="bg-slate-800/50 border-slate-700">
<SelectTrigger className="dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -306,7 +343,7 @@ export function RegionManager() {
<div className="space-y-1.5">
<Label>状态</Label>
<Select value={formData.status} onValueChange={(v) => setFormData({ ...formData, status: v })}>
<SelectTrigger className="bg-slate-800/50 border-slate-700">
<SelectTrigger className="dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -322,7 +359,7 @@ export function RegionManager() {
value={formData.location}
onChange={(e) => setFormData({ ...formData, location: e.target.value })}
placeholder="如：中国北京"
className="bg-slate-800/50 border-slate-700"
className="dg-input"
/>
</div>
<div className="space-y-1.5">
@@ -331,7 +368,7 @@ export function RegionManager() {
value={formData.endpoint}
onChange={(e) => setFormData({ ...formData, endpoint: e.target.value })}
placeholder="如：ecs.cn-north-1.aliyuncs.com"
className="bg-slate-800/50 border-slate-700 font-mono text-sm"
className="dg-input font-mono text-sm"
/>
</div>
</div>
@@ -344,6 +381,6 @@ export function RegionManager() {
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</PageShell>
);
}
frontend/src/components/dashboard/Dashboard.tsx
+16 -22
View File
@@ -20,6 +20,7 @@ import type {
DashboardCluster,
} from './DashboardRecent';
import { SkeletonDashboard } from '@/components/layout/SkeletonCard';
import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common';
import type { AlertEventRecord, CertExpiryRecord } from '@/types';
@@ -109,14 +110,12 @@ export function Dashboard() {
const costStats = stats?.cost_stats;
return (
<div className="dg-page">
{/* Page Header */}
<div className="dg-page-header">
<div>
<h1 className="dg-page-title">{t('dashboard.title')}</h1>
<p className="dg-page-subtitle">{t('dashboard.subtitle')} · {t('dashboard.lastUpdated')}: {new Date().toLocaleTimeString()}</p>
</div>
<div className="dg-page-actions">
<PageShell
variant="workspace"
title={t('dashboard.title')}
subtitle={`${t('dashboard.subtitle')} · ${t('dashboard.lastUpdated')}: ${new Date().toLocaleTimeString()}`}
actions={(
<>
<Button
variant="outline"
className="dg-btn-secondary"
@@ -126,19 +125,14 @@ export function Dashboard() {
<Clock className={cn('h-4 w-4', refreshing && 'animate-spin')} />
{refreshing ? t('dashboard.refreshing') : t('dashboard.refresh')}
</Button>
<Button
className="dg-btn-primary"
onClick={() => navigate('/servers')}
>
<Button className="dg-btn-primary" onClick={() => navigate('/servers')}>
<Server className="h-4 w-4" />
{t('dashboard.servers')}
<ArrowRight className="h-3.5 w-3.5" />
</Button>
</div>
</div>
{/* Stats — compact strip */}
<div className="animate-fade-in-delay-1">
</>
)}
metrics={(
<StatStrip
items={[
{ label: t('dashboard.stat.servers'), value: serverStats?.total ?? 0, color: 'blue' },
@@ -150,10 +144,10 @@ export function Dashboard() {
{ label: t('dashboard.stat.monthlyCost'), value: `¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`, color: 'amber' },
]}
/>
</div>
{/* Resource Usage Chart */}
<div className="animate-fade-in-delay-2">
)}
contentClassName="space-y-6"
>
<div>
<ResourceUsageCard
avgCpu={Number(serverStats?.avg_cpu ?? 0)}
avgMemory={Number(serverStats?.avg_memory ?? 0)}
@@ -185,7 +179,7 @@ export function Dashboard() {
<ServerStatusCard servers={servers} />
<KubernetesClusterCard clusters={clusters} />
</div>
</div>
</PageShell>
);
}
frontend/src/components/deploy/AppRelease.tsx
+77 -134
View File
@@ -38,6 +38,10 @@ import { toast } from 'sonner';
import { getStatusBadge, getEnvBadge } from './releaseHelpers';
import { ReleaseDetailDialog } from './ReleaseDetailDialog';
import { ReleaseCreateDialog } from './ReleaseCreateDialog';
import { PageShell } from '@/components/layout/PageShell';
import { PageLoading } from '@/components/layout/PageLoading';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip';
export function AppReleaseManager() {
const navigate = useNavigate();
@@ -84,113 +88,23 @@ export function AppReleaseManager() {
}
};
return (
<div className="space-y-6">
{/* Page Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-slate-100">应用发布</h1>
<p className="text-sm text-slate-500 mt-1">CI/CD流水线管理与发布历史</p>
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
onClick={() => navigate('/pipelines')}
>
<Settings className="h-4 w-4 mr-2" />
流水线配置
</Button>
<Button
className="bg-blue-600 hover:bg-blue-700 text-white"
onClick={() => setIsCreateDialogOpen(true)}
>
<Plus className="h-4 w-4 mr-2" />
新建发布
</Button>
</div>
</div>
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-slate-500">今日发布</p>
<p className="text-2xl font-bold text-slate-100">{releases.length}</p>
</div>
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
<Rocket className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-slate-500">发布成功</p>
<p className="text-2xl font-bold text-emerald-400">
{releases.filter((r) => r.status === 'success').length}
</p>
</div>
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
<CheckCircle className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-slate-500">发布失败</p>
<p className="text-2xl font-bold text-red-400">
{releases.filter((r) => r.status === 'failed').length}
</p>
</div>
<div className="p-3 rounded-lg bg-red-500/10 text-red-400">
<XCircle className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-slate-500">成功率</p>
<p className="text-2xl font-bold text-blue-400">
{releases.length > 0
? `${Math.round((releases.filter((r) => r.status === 'success').length / releases.length) * 100)}%`
: '0%'}
</p>
</div>
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
<History className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
</div>
{/* Filters */}
<div className="flex items-center gap-3 flex-wrap">
const successCount = releases.filter((r) => r.status === 'success').length;
const toolbar = (
<div className="flex items-center gap-3 flex-wrap">
<div className="relative w-64">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input
placeholder="搜索应用名称或版本..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
className="pl-9 h-9 dg-input"
/>
</div>
<Select value={envFilter} onValueChange={setEnvFilter}>
<SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
<SelectTrigger className="w-32 h-9 dg-input">
<SelectValue placeholder="环境" />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectContent className="dg-input">
<SelectItem value="all">全部环境</SelectItem>
<SelectItem value="dev">开发环境</SelectItem>
<SelectItem value="test">测试环境</SelectItem>
@@ -199,10 +113,10 @@ export function AppReleaseManager() {
</SelectContent>
</Select>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
<SelectTrigger className="w-32 h-9 dg-input">
<SelectValue placeholder="状态" />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectContent className="dg-input">
<SelectItem value="all">全部状态</SelectItem>
<SelectItem value="success">成功</SelectItem>
<SelectItem value="failed">失败</SelectItem>
@@ -210,50 +124,79 @@ export function AppReleaseManager() {
<SelectItem value="rolled_back">已回滚</SelectItem>
</SelectContent>
</Select>
</div>
</div>
);
{/* Releases Table */}
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-0">
<div className="border-t border-slate-800">
return (
<PageShell
variant="list"
title="应用发布"
subtitle="CI/CD 流水线管理与发布历史"
icon={<Rocket className="h-5 w-5" />}
toolbar={toolbar}
metrics={(
<StatStrip
items={[
{ label: '今日发布', value: releases.length, color: 'blue' },
{ label: '发布成功', value: successCount, color: 'green' },
{ label: '发布失败', value: releases.filter((r) => r.status === 'failed').length, color: 'red' },
{
label: '成功率',
value: releases.length > 0 ? `${Math.round((successCount / releases.length) * 100)}%` : '0%',
color: 'cyan',
},
]}
/>
)}
actions={(
<>
<Button variant="outline" className="dg-btn-secondary" onClick={() => navigate('/pipelines')}>
<Settings className="h-4 w-4 mr-2" />
流水线配置
</Button>
<Button className="dg-btn-primary" onClick={() => setIsCreateDialogOpen(true)}>
<Plus className="h-4 w-4 mr-2" />
新建发布
</Button>
</>
)}
>
<ContentPanel noPadding>
{loading ? (
<PageLoading />
) : (
<div>
<Table>
<TableHeader>
<TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="text-slate-400">应用名称</TableHead>
<TableHead className="text-slate-400">版本</TableHead>
<TableHead className="text-slate-400">环境</TableHead>
<TableHead className="text-slate-400">状态</TableHead>
<TableHead className="text-slate-400">代码</TableHead>
<TableHead className="text-slate-400">发布人</TableHead>
<TableHead className="text-slate-400">开始时间</TableHead>
<TableHead className="text-slate-400 text-right">操作</TableHead>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">应用名称</TableHead>
<TableHead className="dg-text-secondary">版本</TableHead>
<TableHead className="dg-text-secondary">环境</TableHead>
<TableHead className="dg-text-secondary">状态</TableHead>
<TableHead className="dg-text-secondary">代码</TableHead>
<TableHead className="dg-text-secondary">发布人</TableHead>
<TableHead className="dg-text-secondary">开始时间</TableHead>
<TableHead className="dg-text-secondary text-right">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{loading ? (
<TableRow className="border-slate-800">
<TableCell colSpan={8} className="text-center text-slate-500 py-8">
<Loader2 className="h-5 w-5 animate-spin inline mr-2" />
加载中...
</TableCell>
</TableRow>
) : filteredReleases.map((release) => (
<TableRow key={release.id} className="border-slate-800 hover:bg-slate-800/50">
{filteredReleases.map((release) => (
<TableRow key={release.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<TableCell>
<div className="flex items-center gap-2">
<Rocket className="h-4 w-4 text-slate-500" />
<span className="text-sm font-medium text-slate-200">{release.app_name}</span>
<Rocket className="h-4 w-4 dg-text-muted" />
<span className="text-sm font-medium text-[var(--dg-text-primary)]">{release.app_name}</span>
</div>
</TableCell>
<TableCell>
<Badge variant="outline" className="border-slate-700 text-slate-400">
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">
{release.version}
</Badge>
</TableCell>
<TableCell>{getEnvBadge(release.environment)}</TableCell>
<TableCell>{getStatusBadge(release.status)}</TableCell>
<TableCell>
<div className="flex items-center gap-1 text-xs text-slate-400">
<div className="flex items-center gap-1 text-xs dg-text-secondary">
<GitBranch className="h-3 w-3" />
<span>{release.branch}</span>
<span className="mx-1">·</span>
@@ -262,10 +205,10 @@ export function AppReleaseManager() {
</div>
</TableCell>
<TableCell>
<span className="text-sm text-slate-300">{release.deployer}</span>
<span className="text-sm text-[var(--dg-text-secondary)]">{release.deployer}</span>
</TableCell>
<TableCell>
<span className="text-sm text-slate-400">
<span className="text-sm dg-text-secondary">
{release.created_at ? new Date(release.created_at).toLocaleString() : '--'}
</span>
</TableCell>
@@ -274,7 +217,7 @@ export function AppReleaseManager() {
<Button
variant="ghost"
size="sm"
className="h-8 text-slate-400 hover:text-slate-100"
className="h-8 dg-text-secondary hover:text-[var(--dg-text-primary)]"
onClick={() => setSelectedRelease(release)}
>
<Eye className="h-4 w-4 mr-1" />
@@ -284,7 +227,7 @@ export function AppReleaseManager() {
<Button
variant="ghost"
size="sm"
className="h-8 text-slate-400 hover:text-blue-400"
className="h-8 dg-text-secondary hover:dg-text-blue"
onClick={async () => {
try {
await releaseApi.deployRelease(release.id);
@@ -303,7 +246,7 @@ export function AppReleaseManager() {
<Button
variant="ghost"
size="sm"
className="h-8 text-slate-400 hover:text-amber-400"
className="h-8 dg-text-secondary hover:dg-text-yellow"
onClick={() => handleRollback(release.id)}
>
<RotateCcw className="h-4 w-4 mr-1" />
@@ -317,8 +260,8 @@ export function AppReleaseManager() {
</TableBody>
</Table>
</div>
</CardContent>
</Card>
)}
</ContentPanel>
{/* Release Detail Dialog */}
<ReleaseDetailDialog
@@ -334,6 +277,6 @@ export function AppReleaseManager() {
onOpenChange={setIsCreateDialogOpen}
onSuccess={loadData}
/>
</div>
</PageShell>
);
}
frontend/src/components/deploy/CredentialFormDialog.tsx
+1 -1
View File
@@ -130,7 +130,7 @@ export default function CredentialFormDialog({ open, onOpenChange, type, editId,
</SelectContent>
</Select>
{filteredCredentials.length === 0 && (
<p className="text-xs text-amber-400 flex items-center gap-1 mt-1">
<p className="text-xs dg-text-yellow flex items-center gap-1 mt-1">
<Plus className="h-3 w-3" />
暂无{isRepo ? '' : 'Docker 密码'}类型凭证，请在凭证配置页面新增
</p>
frontend/src/components/deploy/CredentialManager.tsx
+77 -59
View File
@@ -2,7 +2,7 @@ import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
Plus, Pencil, Trash2, RefreshCw, Key, Shield, Search,
Clock, CheckCircle2, XCircle, Zap,
Clock, CheckCircle2, XCircle,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
@@ -15,6 +15,10 @@ import type { Credential, SecretType } from './credential-manager/types';
import { TYPE_CONFIG, TYPE_BADGE_CLASS } from './credential-manager/constants';
import { CredDetailDialog } from './credential-manager/CredDetailDialog';
import { CredFormDialog } from './credential-manager/CredFormDialog';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
// 凭据管理页编排器 // Logan.Li
export default function CredentialManager() {
@@ -66,64 +70,77 @@ export default function CredentialManager() {
const typeOptions = Object.entries(TYPE_CONFIG) as [SecretType, typeof TYPE_CONFIG[SecretType]][];
const activeCount = credentials.filter(c => c.is_active).length;
const toolbar = (
<div className="flex items-center gap-3 flex-wrap">
<Select value={filterType} onValueChange={setFilterType}>
<SelectTrigger className="w-[140px] h-9 dg-input text-sm">
<SelectValue placeholder={t('deploy.label.allType')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">{t('deploy.label.allType')}</SelectItem>
{typeOptions.map(([k, v]) => (
<SelectItem key={k} value={k}>
<span className="flex items-center gap-2"><v.icon className="h-3.5 w-3.5" />{v.label}</span>
</SelectItem>
))}
</SelectContent>
</Select>
<div className="relative flex-1 max-w-xs">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input
value={filterSearch}
onChange={e => setFilterSearch(e.target.value)}
placeholder={t('deploy.label.searchPlaceholder')}
className="pl-8 h-9 dg-input text-sm"
/>
</div>
<span className="text-xs dg-text-muted">{t('deploy.cred.credCount', { count: credentials.length })}</span>
</div>
);
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h2 className="text-lg font-semibold text-[var(--dg-text-primary)]">{t('deploy.cred.title')}</h2>
<p className="text-sm text-[var(--dg-text-muted)] mt-0.5">
{t('deploy.cred.subtitle')}
</p>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={() => refetch()}>
<PageShell
variant="list"
title={t('deploy.cred.title')}
subtitle={t('deploy.cred.subtitle')}
icon={<Key className="h-5 w-5" />}
loading={loading}
loadingLabel={t('deploy.label.loading')}
metrics={(
<StatStrip
items={[
{ label: t('deploy.cred.title'), value: credentials.length, color: 'blue' },
{ label: t('common.enable'), value: activeCount, color: 'emerald' },
]}
/>
)}
toolbar={toolbar}
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => refetch()}>
<RefreshCw className="w-4 h-4 mr-1" />{t('common.refresh')}
</Button>
<Button size="sm" onClick={() => { setEditing(null); setDialogOpen(true); }}>
<Button size="sm" className="dg-btn-primary" onClick={() => { setEditing(null); setDialogOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />{t('deploy.cred.addCredential')}
</Button>
</div>
</div>
{/* 搜索与筛选 // Logan.Li */}
<div className="flex items-center gap-3 flex-wrap">
<Select value={filterType} onValueChange={setFilterType}>
<SelectTrigger className="w-[140px] bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] h-9 text-sm">
<SelectValue placeholder={t('deploy.label.allType')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">{t('deploy.label.allType')}</SelectItem>
{typeOptions.map(([k, v]) => (
<SelectItem key={k} value={k}>
<span className="flex items-center gap-2"><v.icon className="h-3.5 w-3.5" />{v.label}</span>
</SelectItem>
))}
</SelectContent>
</Select>
<div className="relative flex-1 max-w-xs">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
<Input value={filterSearch} onChange={e => setFilterSearch(e.target.value)}
placeholder={t('deploy.label.searchPlaceholder')}
className="pl-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] h-9 text-sm" />
</div>
<span className="text-xs text-[var(--dg-text-muted)]">{t('deploy.cred.credCount', { count: credentials.length })}</span>
</div>
{loading ? (
<div className="text-center py-16 text-[var(--dg-text-secondary)]">
<Zap className="w-6 h-6 animate-spin mx-auto mb-2 text-[var(--dg-blue)]" />{t('deploy.label.loading')}
</div>
) : credentials.length === 0 ? (
<div className="text-center py-16 border border-dashed border-[var(--dg-border)] rounded-lg">
<Shield className="w-12 h-12 mx-auto mb-3 text-[var(--dg-text-muted)]" />
<p className="text-[var(--dg-text-secondary)] mb-2">{t('deploy.cred.noCredentials')}</p>
<p className="text-xs text-[var(--dg-text-muted)] mb-4">{t('deploy.cred.subtitle')}</p>
<Button onClick={() => { setEditing(null); setDialogOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />{t('deploy.cred.createFirst')}
</Button>
</div>
</>
)}
>
{!loading && credentials.length === 0 ? (
<PageEmpty
icon={<Shield className="h-12 w-12" />}
title={t('deploy.cred.noCredentials')}
description={t('deploy.cred.subtitle')}
action={(
<Button onClick={() => { setEditing(null); setDialogOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />{t('deploy.cred.createFirst')}
</Button>
)}
/>
) : (
<div className="rounded-md border border-[var(--dg-border)] overflow-hidden">
<ContentPanel noPadding>
<div className="overflow-hidden">
<table className="w-full text-sm">
<thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
<tr>
@@ -183,12 +200,12 @@ export default function CredentialManager() {
<td className="px-3 py-2.5">
<div className="flex items-center gap-1">
{cred.is_active ? (
<Badge className="bg-green-500/20 text-green-400 text-xs border-0">{t('common.enable')}</Badge>
<Badge className="bg-green-500/20 dg-text-green text-xs border-0">{t('common.enable')}</Badge>
) : (
<Badge className="bg-red-500/20 text-red-400 text-xs border-0">{t('common.disable')}</Badge>
<Badge className="bg-red-500/20 dg-text-red text-xs border-0">{t('common.disable')}</Badge>
)}
{isExpired && (
<Badge className="bg-yellow-500/20 text-yellow-400 text-xs border-0"><Clock className="h-2.5 w-2.5 mr-0.5" />{t('deploy.status.expired')}</Badge>
<Badge className="bg-yellow-500/20 dg-text-yellow text-xs border-0"><Clock className="h-2.5 w-2.5 mr-0.5" />{t('deploy.status.expired')}</Badge>
)}
</div>
</td>
@@ -201,7 +218,7 @@ export default function CredentialManager() {
<Button variant="ghost" size="icon" className="h-7 w-7"
onClick={() => handleToggleActive(cred as Credential)}
title={cred.is_active ? t('common.disable') : t('common.enable')}>
{cred.is_active ? <XCircle className="w-3.5 h-3.5 text-yellow-500" /> : <CheckCircle2 className="w-3.5 h-3.5 text-green-500" />}
{cred.is_active ? <XCircle className="w-3.5 h-3.5 text-yellow-500" /> : <CheckCircle2 className="w-3.5 h-3.5 dg-text-green" />}
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-red-500"
onClick={() => handleDelete(cred as Credential)} title={t('common.delete')}>
@@ -214,11 +231,12 @@ export default function CredentialManager() {
})}
</tbody>
</table>
</div>
</div>
</ContentPanel>
)}
<CredFormDialog open={dialogOpen} onClose={() => setDialogOpen(false)} onSaved={() => refetch()} editData={editing} />
<CredDetailDialog open={detailOpen} onClose={() => setDetailOpen(false)} credId={detailId} />
</div>
</PageShell>
);
}
frontend/src/components/deploy/DeployCredentials.tsx
+84 -51
View File
@@ -1,9 +1,12 @@
import { useState, useEffect } from 'react';
import { Plus, Pencil, Trash2, RefreshCw, Loader2, GitBranch, Container, Globe, Wrench} from 'lucide-react';
import { Plus, Pencil, Trash2, RefreshCw, GitBranch, Container, Globe, Settings2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -106,6 +109,7 @@ export default function DeployCredentials() {
const [editingId, setEditingId] = useState<number | null>(null);
const [envDialogOpen, setEnvDialogOpen] = useState(false);
const [editEnv, setEditEnv] = useState<Environment | null>(null);
const [activeTab, setActiveTab] = useState('repos');
const fetchAll = async () => {
setLoading(true);
@@ -134,34 +138,52 @@ export default function DeployCredentials() {
const envTypeLabel: Record<string, string> = { production: '生产', staging: '预发布', testing: '测试', development: '开发' };
const pageTabs = [
{ id: 'repos', label: 'Git 仓库', badge: repos.length || undefined },
{ id: 'registries', label: '镜像仓库', badge: registries.length || undefined },
{ id: 'environments', label: '环境管理', badge: environments.length || undefined },
{ id: 'tools', label: '工具配置' },
];
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold text-[var(--dg-text-primary)]">发布配置管理</h2>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={fetchAll}><RefreshCw className="w-4 h-4 mr-1" />刷新</Button>
<Button size="sm" onClick={() => { setEditType('repo'); setEditingId(null); setEditorOpen(true); }}>
<PageShell
variant="list"
title="发布配置管理"
subtitle="Git 仓库、镜像仓库、环境与工具配置"
icon={<Settings2 className="h-5 w-5" />}
loading={loading}
tabs={pageTabs}
activeTab={activeTab}
onTabChange={setActiveTab}
metrics={(
<StatStrip
items={[
{ label: 'Git 仓库', value: repos.length, color: 'blue' },
{ label: '镜像仓库', value: registries.length, color: 'cyan' },
{ label: '环境', value: environments.length, color: 'purple' },
]}
/>
)}
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchAll}>
<RefreshCw className="w-4 h-4 mr-1" />刷新
</Button>
<Button size="sm" className="dg-btn-primary" onClick={() => { setEditType('repo'); setEditingId(null); setEditorOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />新增 Git 仓库
</Button>
<Button size="sm" variant="secondary" onClick={() => { setEditType('registry'); setEditingId(null); setEditorOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />新增镜像仓库
</Button>
</div>
</div>
<Tabs defaultValue="repos">
<TabsList>
<TabsTrigger value="repos" className="gap-1"><GitBranch className="w-4 h-4" />Git 仓库 ({repos.length})</TabsTrigger>
<TabsTrigger value="registries" className="gap-1"><Container className="w-4 h-4" />镜像仓库 ({registries.length})</TabsTrigger>
<TabsTrigger value="environments" className="gap-1"><Globe className="w-4 h-4" />环境管理 ({environments.length})</TabsTrigger>
<TabsTrigger value="tools" className="gap-1"><Wrench className="w-4 h-4" />工具配置</TabsTrigger>
</TabsList>
<TabsContent value="repos" className="mt-3">
{loading ? <div className="text-center py-8 text-[var(--dg-text-secondary)]"><Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />加载中...</div>
: repos.length === 0 ? <div className="text-center py-8 text-[var(--dg-text-secondary)]">暂无 Git 仓库认证配置</div>
: (
<div className="rounded-md border border-[var(--dg-border)] overflow-hidden">
</>
)}
>
{activeTab === 'repos' && (
repos.length === 0 ? (
<PageEmpty icon={<GitBranch className="h-10 w-10" />} title="暂无 Git 仓库认证配置" />
) : (
<ContentPanel noPadding>
<div className="overflow-hidden">
<table className="w-full text-sm">
<thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
<tr>
@@ -179,7 +201,7 @@ export default function DeployCredentials() {
<td className="px-3 py-2 text-[var(--dg-text-secondary)] hidden md:table-cell font-mono text-xs max-w-[300px] truncate">{r.url}</td>
<td className="px-3 py-2"><Badge variant="outline" className="text-xs">{r.auth_type}</Badge></td>
<td className="px-3 py-2">
<Badge className={r.enabled ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>{r.enabled ? '启用' : '禁用'}</Badge>
<Badge className={r.enabled ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>{r.enabled ? '启用' : '禁用'}</Badge>
</td>
<td className="px-3 py-2 text-right">
<div className="flex justify-end gap-1">
@@ -192,14 +214,16 @@ export default function DeployCredentials() {
</tbody>
</table>
</div>
)}
</TabsContent>
</ContentPanel>
)
)}
<TabsContent value="registries" className="mt-3">
{loading ? <div className="text-center py-8 text-[var(--dg-text-secondary)]"><Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />加载中...</div>
: registries.length === 0 ? <div className="text-center py-8 text-[var(--dg-text-secondary)]">暂无镜像仓库认证配置</div>
: (
<div className="rounded-md border border-[var(--dg-border)] overflow-hidden">
{activeTab === 'registries' && (
registries.length === 0 ? (
<PageEmpty icon={<Container className="h-10 w-10" />} title="暂无镜像仓库认证配置" />
) : (
<ContentPanel noPadding>
<div className="overflow-hidden">
<table className="w-full text-sm">
<thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
<tr>
@@ -219,7 +243,7 @@ export default function DeployCredentials() {
<td className="px-3 py-2 text-[var(--dg-text-secondary)] hidden sm:table-cell">{r.namespace || '-'}</td>
<td className="px-3 py-2"><Badge variant="outline" className="text-xs">{r.auth_type}</Badge></td>
<td className="px-3 py-2">
<Badge className={r.enabled ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>{r.enabled ? '启用' : '禁用'}</Badge>
<Badge className={r.enabled ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>{r.enabled ? '启用' : '禁用'}</Badge>
</td>
<td className="px-3 py-2 text-right">
<div className="flex justify-end gap-1">
@@ -232,20 +256,31 @@ export default function DeployCredentials() {
</tbody>
</table>
</div>
)}
</TabsContent>
</ContentPanel>
)
)}
{/* Environments tab */}
<TabsContent value="environments" className="mt-3">
{activeTab === 'environments' && (
<>
<div className="flex items-center justify-end mb-3">
<Button size="sm" onClick={() => { setEditEnv(null); setEnvDialogOpen(true); }}>
<Button size="sm" className="dg-btn-primary" onClick={() => { setEditEnv(null); setEnvDialogOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />新增环境
</Button>
</div>
{loading ? <div className="text-center py-8 text-[var(--dg-text-secondary)]"><Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />加载中...</div>
: environments.length === 0 ? <div className="text-center py-8 text-[var(--dg-text-secondary)]">暂无环境配置，点击"新增环境"创建</div>
: (
<div className="rounded-md border border-[var(--dg-border)] overflow-hidden">
{environments.length === 0 ? (
<PageEmpty
icon={<Globe className="h-10 w-10" />}
title="暂无环境配置"
description='点击"新增环境"创建'
action={(
<Button size="sm" onClick={() => { setEditEnv(null); setEnvDialogOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />新增环境
</Button>
)}
/>
) : (
<ContentPanel noPadding>
<div className="overflow-hidden">
<table className="w-full text-sm">
<thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
<tr>
@@ -272,7 +307,7 @@ export default function DeployCredentials() {
<td className="px-3 py-2"><div className="w-6 h-6 rounded border" style={{ backgroundColor: env.color }} /></td>
<td className="px-3 py-2 text-[var(--dg-text-secondary)]">{env.sort_order}</td>
<td className="px-3 py-2">
<Badge className={env.enabled ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>{env.enabled ? '启用' : '禁用'}</Badge>
<Badge className={env.enabled ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>{env.enabled ? '启用' : '禁用'}</Badge>
</td>
<td className="px-3 py-2 text-right">
<div className="flex justify-end gap-1">
@@ -284,15 +319,13 @@ export default function DeployCredentials() {
))}
</tbody>
</table>
</div>
</div>
</ContentPanel>
)}
</TabsContent>
</>
)}
{/* Tools config tab */}
<TabsContent value="tools" className="mt-3">
<ToolConfigTab />
</TabsContent>
</Tabs>
{activeTab === 'tools' && <ToolConfigTab />}
<CredentialFormDialog
open={editorOpen} onOpenChange={setEditorOpen} type={editType} editId={editingId}
@@ -300,6 +333,6 @@ export default function DeployCredentials() {
/>
<EnvFormDialog open={envDialogOpen} onClose={() => setEnvDialogOpen(false)} onSaved={fetchAll} editData={editEnv} />
</div>
</PageShell>
);
}
frontend/src/components/deploy/DeployRBAC.tsx
+39 -34
View File
@@ -9,6 +9,9 @@ import { Label } from '@/components/ui/label';
import { toast } from 'sonner';
import { deployApi, userApi, pipelineApi } from '@/api';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { PageShell } from '@/components/layout/PageShell';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
interface ItemRole {
@@ -159,36 +162,41 @@ export default function DeployRBAC() {
};
const roleBadgeClass = (role: string) =>
role === 'owner' ? 'bg-amber-500/20 text-amber-400 border-amber-500/30' :
role === 'editor' ? 'bg-blue-500/20 text-blue-400 border-blue-500/30' :
'bg-slate-500/20 text-slate-400 border-slate-500/30';
role === 'owner' ? 'bg-amber-500/20 dg-text-yellow border-amber-500/30' :
role === 'editor' ? 'bg-blue-500/20 dg-text-blue border-blue-500/30' :
'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]';
const selectedUser = users.find(u => String(u.id) === selectedUserId);
if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="w-6 h-6 animate-spin" /></div>;
const activeRoles = roles.filter(r => r.status === 1).length;
return (
<div className="space-y-4">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-xl font-bold flex items-center gap-2 text-[var(--dg-text-primary)]">
<Shield className="w-5 h-5 text-purple-500" />发布权限
</h1>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">
Jenkins-style Role Strategy — 按流水线 code 正则匹配分配角色
</p>
</div>
<Button onClick={() => setShowCreate(true)} disabled={showCreate}>
<PageShell
variant="list"
title="发布权限"
subtitle="Jenkins-style Role Strategy — 按流水线 code 正则匹配分配角色"
icon={<Shield className="h-5 w-5" />}
loading={loading}
metrics={(
<StatStrip
items={[
{ label: 'Item Role', value: roles.length, color: 'purple' },
{ label: '已启用', value: activeRoles, color: 'emerald' },
{ label: '流水线', value: pipelines.length, color: 'blue' },
]}
/>
)}
actions={(
<Button className="dg-btn-primary" onClick={() => setShowCreate(true)} disabled={showCreate}>
<Plus className="w-4 h-4 mr-1" />新建角色
</Button>
</div>
)}
>
{/* ====== Pipeline Preview ====== */}
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center gap-2 mb-3">
<GitBranch className="w-4 h-4 text-blue-500" />
<GitBranch className="w-4 h-4 dg-text-blue" />
<span className="text-sm font-medium text-[var(--dg-text-primary)]">流水线命中预览</span>
<span className="text-xs text-[var(--dg-text-muted)]">— 选择一个角色查看哪些流水线会被匹配</span>
</div>
@@ -215,7 +223,7 @@ export default function DeployRBAC() {
})
}
{previewRoleId !== null && previewMatches.length === 0 && (
<span className="text-xs text-red-400">无匹配 — 请调整正则表达式</span>
<span className="text-xs dg-text-red">无匹配 — 请调整正则表达式</span>
)}
</div>
</CardContent>
@@ -266,10 +274,7 @@ export default function DeployRBAC() {
{/* Role list */}
{roles.length === 0 ? (
<div className="text-center py-12 text-[var(--dg-text-secondary)]">
<Shield className="w-10 h-10 mx-auto mb-2 opacity-20" />
<p className="text-sm">暂无 Item Role</p>
</div>
<PageEmpty icon={<Shield className="h-10 w-10" />} title="暂无 Item Role" description="创建角色后按正则匹配流水线并分配给用户" />
) : (
<div className="space-y-2">
{roles.map(role => (
@@ -278,21 +283,21 @@ export default function DeployRBAC() {
<div className="flex items-center justify-between">
<div className="flex items-center gap-3 flex-1 min-w-0">
<div className="w-9 h-9 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
<Regex className="w-4 h-4 text-purple-400" />
<Regex className="w-4 h-4 dg-text-purple" />
</div>
<div className="min-w-0">
<div className="flex items-center gap-1.5 flex-wrap">
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{role.name}</span>
<Badge className={`text-xs border ${roleBadgeClass(role.role)}`}>{role.role === 'owner' ? '拥有者' : role.role === 'editor' ? '编辑者' : '查看者'}</Badge>
{role.status === 0 && <Badge variant="secondary" className="text-xs text-red-400">已禁用</Badge>}
{role.status === 0 && <Badge variant="secondary" className="text-xs dg-text-red">已禁用</Badge>}
<Badge variant="secondary" className="text-xs cursor-pointer" onClick={() => setPreviewRoleId(previewRoleId === role.id ? null : role.id)}>
<GitBranch className="w-3 h-3 mr-0.5" />{matchCount[role.id]?.length || 0} 条
</Badge>
</div>
<div className="text-xs text-[var(--dg-text-secondary)] mt-0.5 truncate">
<code className="font-mono text-purple-400 bg-purple-500/10 px-1 rounded">{role.code}</code>
<code className="font-mono dg-text-purple bg-purple-500/10 px-1 rounded">{role.code}</code>
<span className="mx-1">→</span>
<code className="font-mono text-blue-400 bg-blue-500/10 px-1 rounded">{role.pattern}</code>
<code className="font-mono dg-text-blue bg-blue-500/10 px-1 rounded">{role.pattern}</code>
{role.description && <span className="ml-2 opacity-60">{role.description}</span>}
</div>
</div>
@@ -309,8 +314,8 @@ export default function DeployRBAC() {
<SelectItem value="viewer">查看者</SelectItem>
</SelectContent>
</Select>
<Button size="icon" variant="ghost" className="h-7 w-7 text-green-400" onClick={() => handleUpdate(role.id)}><Check className="w-3.5 h-3.5" /></Button>
<Button size="icon" variant="ghost" className="h-7 w-7 text-red-400" onClick={() => setEditing(null)}><X className="w-3.5 h-3.5" /></Button>
<Button size="icon" variant="ghost" className="h-7 w-7 dg-text-green" onClick={() => handleUpdate(role.id)}><Check className="w-3.5 h-3.5" /></Button>
<Button size="icon" variant="ghost" className="h-7 w-7 dg-text-red" onClick={() => setEditing(null)}><X className="w-3.5 h-3.5" /></Button>
</>
) : (
<>
@@ -331,7 +336,7 @@ export default function DeployRBAC() {
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center gap-2 mb-3">
<UserPlus className="w-4 h-4 text-amber-400" />
<UserPlus className="w-4 h-4 dg-text-yellow" />
<span className="text-sm font-medium text-[var(--dg-text-primary)]">分配角色给用户</span>
</div>
<div className="flex gap-3 items-end mb-4">
@@ -344,7 +349,7 @@ export default function DeployRBAC() {
{users.map(u => (
<SelectItem key={u.id} value={String(u.id)}>
{u.real_name || u.username} ({u.username})
{assignments.some(a => a.user_id === u.id) && <span className="ml-2 text-xs text-purple-400">已分配</span>}
{assignments.some(a => a.user_id === u.id) && <span className="ml-2 text-xs dg-text-purple">已分配</span>}
</SelectItem>
))}
</SelectContent>
@@ -395,7 +400,7 @@ export default function DeployRBAC() {
</code>
)}
</div>
<Button variant="ghost" size="icon" className="h-6 w-6 text-red-400" onClick={() => handleRevoke(a.id)}>
<Button variant="ghost" size="icon" className="h-6 w-6 dg-text-red" onClick={() => handleRevoke(a.id)}>
<X className="w-3 h-3" />
</Button>
</div>
@@ -407,6 +412,6 @@ export default function DeployRBAC() {
)}
</CardContent>
</Card>
</div>
</PageShell>
);
}
frontend/src/components/deploy/FileBrowserDialog.tsx
+2 -2
View File
@@ -175,7 +175,7 @@ export function FileBrowserDialog({
)}
{error && (
<div className="flex items-center justify-center h-full text-red-400 text-sm">
<div className="flex items-center justify-center h-full dg-text-red text-sm">
{error}
</div>
)}
@@ -218,7 +218,7 @@ export function FileBrowserDialog({
onClick={() => loadDir(dir.path)}
>
<td className="py-2 pl-4 pr-2 flex items-center gap-2">
<FolderOpen className="h-4 w-4 text-amber-400 shrink-0" />
<FolderOpen className="h-4 w-4 dg-text-yellow shrink-0" />
<span className="text-[var(--dg-text-primary)]">{dir.name}</span>
</td>
<td className="py-2 px-2 text-right text-[var(--dg-text-muted)]">-</td>
frontend/src/components/deploy/PipelineEditor.tsx
+71 -56
View File
@@ -44,6 +44,8 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
import { toast } from 'sonner';
import { pipelineApi, deployApi } from '@/api';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { PageShell } from '@/components/layout/PageShell';
import { PageEmpty } from '@/components/layout/PageEmpty';
import type { JsonData } from '@/types/common';
// ---- types ----
@@ -76,10 +78,10 @@ function TaskCard({ task, selected, onSelect, onDelete }: { task: Task; selected
<div
onClick={onSelect}
className={`flex items-center gap-3 p-3 rounded-md border cursor-pointer transition-all group ${
selected ? 'border-blue-500 bg-blue-500/10' : 'border-[var(--dg-border)] hover:border-slate-400 bg-[var(--dg-bg-secondary)]'
selected ? 'border-[var(--dg-blue)] bg-[color-mix(in_srgb,var(--dg-blue)_12%,transparent)]' : 'border-[var(--dg-border)] hover:border-[var(--dg-border-hover)] bg-[var(--dg-bg-secondary)]'
}`}
>
<div className={`p-1.5 rounded ${selected ? 'bg-blue-100' : 'bg-slate-100 dark:bg-slate-800'}`}>
<div className={`p-1.5 rounded ${selected ? 'bg-[color-mix(in_srgb,var(--dg-blue)_15%,transparent)]' : 'bg-[var(--dg-bg-tertiary)]'}`}>
<Icon className={`w-4 h-4 ${selected ? 'text-blue-600' : 'text-[var(--dg-text-secondary)]'}`} />
</div>
<div className="flex-1 min-w-0">
@@ -113,7 +115,7 @@ function TaskEditor({ task, onUpdate }: { task: Task | null; onUpdate: (t: Task)
<div className="flex gap-2">{['shell', 'python'].map(t => (<Badge key={t} variant={task.script_type === t ? 'default' : 'outline'} className="cursor-pointer text-xs" onClick={() => onUpdate({ ...task, script_type: t })}>{t}</Badge>))}</div>
</div>
<div className="space-y-1"><Label className="text-xs">脚本内容</Label>
<Textarea value={task.script} onChange={e => onUpdate({ ...task, script: e.target.value })} className="font-mono text-xs min-h-[200px] bg-slate-950 text-green-400" placeholder="#!/bin/bash\nset -e\necho 'hello'" />
<Textarea value={task.script} onChange={e => onUpdate({ ...task, script: e.target.value })} className="font-mono text-xs min-h-[200px] bg-[var(--dg-bg-primary)] dg-text-green" placeholder="#!/bin/bash\nset -e\necho 'hello'" />
</div>
</div>
);
@@ -132,18 +134,18 @@ function LogDialog({ open, onClose, run, logs }: { open: boolean; onClose: () =>
<span>耗时: {fmtDuration(run?.duration)}</span>
<span>{run?.created_at ? new Date(run.created_at).toLocaleString('zh-CN') : '-'}</span>
</div>
<div className="bg-slate-950 rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs">
<div className="bg-[var(--dg-bg-primary)] rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs">
{logs.length === 0 ? (
<div className="text-slate-500 py-4 text-center">暂无日志</div>
<div className="dg-text-muted py-4 text-center">暂无日志</div>
) : (
logs.map((l, i) => (
<div key={i} className="flex gap-2 py-0.5">
<span className="text-slate-500 shrink-0">[{l.time}]</span>
<span className="dg-text-muted shrink-0">[{l.time}]</span>
<span className={
l.level === 'error' ? 'text-red-400' :
l.level === 'warn' ? 'text-yellow-400' :
l.level === 'success' ? 'text-green-400' :
'text-slate-300'
l.level === 'error' ? 'dg-text-red' :
l.level === 'warn' ? 'dg-text-yellow' :
l.level === 'success' ? 'dg-text-green' :
'text-[var(--dg-text-secondary)]'
}>
{l.level === 'success' ? '✓' : l.level === 'error' ? '✗' : l.level === 'warn' ? '!' : '>'} {l.message}
</span>
@@ -323,27 +325,48 @@ export default function PipelineEditor() {
const envBadge = environments.find(e => String(e.id) === String(environmentId));
if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="w-6 h-6 animate-spin" /></div>;
if (!pipeline) return <div className="text-center py-20 text-[var(--dg-text-secondary)]">流水线不存在</div>;
const editorTabs = [
{ id: 'flow', label: '流程配置' },
{ id: 'triggers', label: '触发设置' },
{ id: 'variables', label: '变量' },
{ id: 'runs', label: '发布记录', badge: runs.length || undefined },
{ id: 'members', label: '成员管理', badge: members.length || undefined },
];
if (!loading && !pipeline) {
return (
<PageShell variant="workspace" title="流水线编辑" icon={<GitBranch className="h-5 w-5" />}>
<PageEmpty title="流水线不存在" description="请检查链接或返回列表重试" />
</PageShell>
);
}
return (
<div className="space-y-4">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-xl font-bold flex items-center gap-2 text-[var(--dg-text-primary)]">
<GitBranch className="w-5 h-5 text-blue-500" />
{pipeline.name}
{envBadge && <Badge style={{ backgroundColor: envBadge.color + '20', color: envBadge.color, borderColor: envBadge.color + '40' }} className="text-xs ml-2">{envBadge.display_name}</Badge>}
</h1>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">code: {pipeline.code} · {pipeline.description}</p>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={handleSave} disabled={saving}><Save className="w-4 h-4 mr-1" />{saving ? '保存中...' : '保存'}</Button>
<Button variant="default" onClick={handleTrigger}><Play className="w-4 h-4 mr-1" />运行</Button>
</div>
</div>
<PageShell
variant="workspace"
title={pipeline?.name || '流水线编辑'}
subtitle={pipeline ? `code: ${pipeline.code} · ${pipeline.description || ''}` : undefined}
icon={<GitBranch className="h-5 w-5" />}
loading={loading}
tabs={editorTabs}
activeTab={activeTab}
onTabChange={setActiveTab}
actions={(
<>
{envBadge && (
<Badge style={{ backgroundColor: envBadge.color + '20', color: envBadge.color, borderColor: envBadge.color + '40' }} className="text-xs">
{envBadge.display_name}
</Badge>
)}
<Button variant="outline" className="dg-btn-secondary" onClick={handleSave} disabled={saving}>
<Save className="w-4 h-4 mr-1" />{saving ? '保存中...' : '保存'}
</Button>
<Button className="dg-btn-primary" onClick={handleTrigger}>
<Play className="w-4 h-4 mr-1" />运行
</Button>
</>
)}
>
{/* Environment Selector - quick bar */}
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-3 flex items-center gap-3">
@@ -368,14 +391,6 @@ export default function PipelineEditor() {
</Card>
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList>
<TabsTrigger value="flow">流程配置</TabsTrigger>
<TabsTrigger value="triggers">触发设置</TabsTrigger>
<TabsTrigger value="variables">变量</TabsTrigger>
<TabsTrigger value="runs">发布记录 ({runs.length})</TabsTrigger>
<TabsTrigger value="members">成员管理 ({members.length})</TabsTrigger>
</TabsList>
{/* ====== Flow Tab ====== */}
<TabsContent value="flow" className="mt-3">
<div className="flex gap-4">
@@ -433,18 +448,18 @@ export default function PipelineEditor() {
<TabsContent value="triggers" className="mt-3">
<div className="space-y-4 max-w-lg">
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"><CardContent className="pt-6 space-y-4">
<div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><GitBranch className="w-5 h-5 text-blue-500" /><span className="font-medium">Git Push 触发</span></div><Switch checked={triggerMode === 'git_push'} onCheckedChange={v => setTriggerMode(v ? 'git_push' : 'manual')} /></div>
<div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><GitBranch className="w-5 h-5 dg-text-blue" /><span className="font-medium">Git Push 触发</span></div><Switch checked={triggerMode === 'git_push'} onCheckedChange={v => setTriggerMode(v ? 'git_push' : 'manual')} /></div>
{triggerMode === 'git_push' && <div className="space-y-1"><Label>监听分支</Label><Input value={watchBranches} onChange={e => setWatchBranches(e.target.value)} placeholder="master, release/*" className="h-9" /></div>}
</CardContent></Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"><CardContent className="pt-6 space-y-4">
<div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Clock className="w-5 h-5 text-blue-500" /><span className="font-medium">定时触发</span></div><Switch checked={triggerMode === 'cron'} onCheckedChange={v => setTriggerMode(v ? 'cron' : 'manual')} /></div>
<div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Clock className="w-5 h-5 dg-text-blue" /><span className="font-medium">定时触发</span></div><Switch checked={triggerMode === 'cron'} onCheckedChange={v => setTriggerMode(v ? 'cron' : 'manual')} /></div>
{triggerMode === 'cron' && <div className="space-y-1"><Label>Cron 表达式</Label><Input value={cronExpr} onChange={e => setCronExpr(e.target.value)} placeholder="0 2 * * *" className="h-9 font-mono" /></div>}
</CardContent></Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"><CardContent className="pt-6 space-y-4">
<div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Webhook className="w-5 h-5 text-blue-500" /><span className="font-medium">Webhook 触发</span></div><Switch checked={triggerMode === 'webhook'} onCheckedChange={v => setTriggerMode(v ? 'webhook' : 'manual')} /></div>
<div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Webhook className="w-5 h-5 dg-text-blue" /><span className="font-medium">Webhook 触发</span></div><Switch checked={triggerMode === 'webhook'} onCheckedChange={v => setTriggerMode(v ? 'webhook' : 'manual')} /></div>
{triggerMode === 'webhook' && <div className="space-y-1"><Label>Secret Token</Label><Input value={webhookToken} onChange={e => setWebhookToken(e.target.value)} type="password" placeholder="输入签名密钥" className="h-9" /></div>}
</CardContent></Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"><CardContent className="pt-6"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Hand className="w-5 h-5 text-blue-500" /><span className="font-medium">手动触发</span><Badge variant="secondary" className="text-xs">默认启用</Badge></div></CardContent></Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"><CardContent className="pt-6"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Hand className="w-5 h-5 dg-text-blue" /><span className="font-medium">手动触发</span><Badge variant="secondary" className="text-xs">默认启用</Badge></div></CardContent></Card>
</div>
</TabsContent>
@@ -487,10 +502,10 @@ export default function PipelineEditor() {
<tr key={r.id} className="border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/50">
<td className="px-3 py-2 font-medium text-[var(--dg-text-primary)]">#{r.build_number || r.id}</td>
<td className="px-3 py-2">
{r.status === 'success' ? <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30"><Check className="w-3 h-3 mr-0.5" />成功</Badge> :
r.status === 'failed' ? <Badge className="bg-red-500/20 text-red-400 border-red-500/30"><X className="w-3 h-3 mr-0.5" />失败</Badge> :
r.status === 'running' ? <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30"><Loader2 className="w-3 h-3 animate-spin mr-0.5" />执行中</Badge> :
r.status === 'cancelled' ? <Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30"><StopCircle className="w-3 h-3 mr-0.5" />已停止</Badge> :
{r.status === 'success' ? <Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30"><Check className="w-3 h-3 mr-0.5" />成功</Badge> :
r.status === 'failed' ? <Badge className="bg-red-500/20 dg-text-red border-red-500/30"><X className="w-3 h-3 mr-0.5" />失败</Badge> :
r.status === 'running' ? <Badge className="bg-blue-500/20 dg-text-blue border-blue-500/30"><Loader2 className="w-3 h-3 animate-spin mr-0.5" />执行中</Badge> :
r.status === 'cancelled' ? <Badge className="bg-yellow-500/20 dg-text-yellow border-yellow-500/30"><StopCircle className="w-3 h-3 mr-0.5" />已停止</Badge> :
<Badge variant="secondary" className="text-[var(--dg-text-secondary)]">{r.status}</Badge>}
</td>
<td className="px-3 py-2 text-[var(--dg-text-secondary)] text-xs">
@@ -506,9 +521,9 @@ export default function PipelineEditor() {
<td className="px-3 py-2 text-[var(--dg-text-secondary)] text-xs">{r.created_at ? new Date(r.created_at).toLocaleString('zh-CN') : '-'}</td>
<td className="px-3 py-2 text-right">
<div className="flex items-center justify-end gap-1">
<Button variant="ghost" size="sm" className="h-7 text-xs text-blue-400 hover:text-blue-300" onClick={() => handleViewLog(r)}><FileText className="w-3.5 h-3.5 mr-1" />日志</Button>
<Button variant="ghost" size="sm" className="h-7 text-xs dg-text-blue hover:text-blue-300" onClick={() => handleViewLog(r)}><FileText className="w-3.5 h-3.5 mr-1" />日志</Button>
{(r.status === 'running' || r.status === 'pending') && (
<Button variant="ghost" size="sm" className="h-7 text-xs text-red-400 hover:text-red-300" onClick={() => handleStop(r.id)}><StopCircle className="w-3.5 h-3.5 mr-1" />停止</Button>
<Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red hover:dg-text-red" onClick={() => handleStop(r.id)}><StopCircle className="w-3.5 h-3.5 mr-1" />停止</Button>
)}
</div>
</td>
@@ -527,7 +542,7 @@ export default function PipelineEditor() {
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<div className="flex items-center gap-3">
<UserPlus className="w-4 h-4 text-blue-500" />
<UserPlus className="w-4 h-4 dg-text-blue" />
<span className="text-sm font-medium text-[var(--dg-text-primary)]">添加用户</span>
</div>
<div className="flex items-end gap-3 mt-3">
@@ -572,13 +587,13 @@ export default function PipelineEditor() {
{directUsers.map((m: JsonData) => (
<div key={m.id} className="flex items-center justify-between px-4 py-3">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center"><Users className="w-4 h-4 text-blue-400" /></div>
<div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center"><Users className="w-4 h-4 dg-text-blue" /></div>
<div>
<div className="text-sm font-medium text-[var(--dg-text-primary)]">{m.username}</div>
<div className="text-xs text-[var(--dg-text-secondary)]">{m.role === 'owner' ? <span className="text-amber-400">拥有者</span> : m.role === 'editor' ? <span className="text-blue-400">编辑者</span> : <span className="text-slate-400">查看者</span>}</div>
<div className="text-xs text-[var(--dg-text-secondary)]">{m.role === 'owner' ? <span className="dg-text-yellow">拥有者</span> : m.role === 'editor' ? <span className="dg-text-blue">编辑者</span> : <span className="dg-text-secondary">查看者</span>}</div>
</div>
</div>
<Button variant="ghost" size="sm" className="h-7 text-xs text-red-400 hover:text-red-300" onClick={() => handleRemoveMember(m.id)}><Trash2 className="w-3.5 h-3.5 mr-1" />移除</Button>
<Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red hover:dg-text-red" onClick={() => handleRemoveMember(m.id)}><Trash2 className="w-3.5 h-3.5 mr-1" />移除</Button>
</div>
))}
</div>
@@ -594,20 +609,20 @@ export default function PipelineEditor() {
</div>
{groupAssignments.length === 0 ? (
<div className="py-4 text-center text-[var(--dg-text-secondary)] text-xs">
暂无组授权 — 在「<a href="/deploy/groups" className="text-blue-400 underline">用户组管理</a>」页面创建组后，可在此授权
暂无组授权 — 在「<a href="/deploy/groups" className="dg-text-blue underline">用户组管理</a>」页面创建组后，可在此授权
</div>
) : (
<div className="divide-y divide-[var(--dg-border)]">
{groupAssignments.map((m: JsonData) => (
<div key={m.id} className="flex items-center justify-between px-4 py-3">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center"><Shield className="w-4 h-4 text-purple-400" /></div>
<div className="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center"><Shield className="w-4 h-4 dg-text-purple" /></div>
<div>
<div className="text-sm font-medium text-[var(--dg-text-primary)]">{m.group?.name || `组 #${m.group_id}`}</div>
<div className="text-xs text-[var(--dg-text-secondary)]">{m.role === 'owner' ? <span className="text-amber-400">拥有者</span> : m.role === 'editor' ? <span className="text-blue-400">编辑者</span> : <span className="text-slate-400">查看者</span>} · 组内全体成员</div>
<div className="text-xs text-[var(--dg-text-secondary)]">{m.role === 'owner' ? <span className="dg-text-yellow">拥有者</span> : m.role === 'editor' ? <span className="dg-text-blue">编辑者</span> : <span className="dg-text-secondary">查看者</span>} · 组内全体成员</div>
</div>
</div>
<Button variant="ghost" size="sm" className="h-7 text-xs text-red-400 hover:text-red-300" onClick={() => handleRemoveMember(m.id)}><Trash2 className="w-3.5 h-3.5 mr-1" />撤销授权</Button>
<Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red hover:dg-text-red" onClick={() => handleRemoveMember(m.id)}><Trash2 className="w-3.5 h-3.5 mr-1" />撤销授权</Button>
</div>
))}
</div>
@@ -623,6 +638,6 @@ export default function PipelineEditor() {
{/* Log Dialog */}
<LogDialog open={logOpen} onClose={() => setLogOpen(false)} run={logRun} logs={logs} />
</div>
</PageShell>
);
}
frontend/src/components/deploy/PipelineManager.tsx
+83 -66
View File
@@ -8,7 +8,6 @@ import {
GitBranch,
Clock,
CheckCircle,
Loader2,
Rocket,
Container,
ArrowRight,
@@ -26,6 +25,9 @@ import { useConfirm } from '@/components/ui/confirm-dialog';
import { toast } from 'sonner';
import { PipelineCard } from './pipeline-manager/PipelineCard';
import { PipelineCreateDialog } from './pipeline-manager/PipelineCreateDialog';
import { PageShell } from '@/components/layout/PageShell';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
// 流水线列表页编排器 // Logan.Li
export function PipelineManager() {
@@ -155,21 +157,68 @@ export function PipelineManager() {
return matchSearch && matchEnv;
});
const runningCount = pipelines.filter(p => p.last_status === 'running').length;
const toolbar = (
<div className="flex items-center gap-4 flex-wrap">
<div className="relative max-w-md flex-1 min-w-[200px]">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-secondary" />
<Input
placeholder={t('deploy.pipeline.searchPlaceholder')}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 dg-input"
/>
</div>
<div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
{ENV_TYPES.map((et) => {
const active = envFilter === et.key;
const Icon = et.icon;
return (
<button
key={et.key}
onClick={() => setEnvFilter(et.key)}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
active ? 'text-white shadow-sm' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
}`}
style={active ? { backgroundColor: et.color } : {}}
>
<Icon className="h-3.5 w-3.5" />{et.label}
</button>
);
})}
</div>
</div>
);
return (
<div className="space-y-5">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{t('deploy.pipeline.title')}</h1>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">{t('deploy.pipeline.subtitle')}</p>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => refetchPipelines()}>
<PageShell
variant="list"
title={t('deploy.pipeline.title')}
subtitle={t('deploy.pipeline.subtitle')}
icon={<Workflow className="h-5 w-5" />}
loading={loading}
metrics={(
<StatStrip
items={[
{ label: t('deploy.pipeline.title'), value: pipelines.length, color: 'blue' },
{ label: t('common.running'), value: runningCount, color: 'amber' },
{ label: t('deploy.env.all'), value: filtered.length, color: 'muted' },
]}
/>
)}
toolbar={toolbar}
actions={(
<>
<Button variant="outline" className="dg-btn-secondary" onClick={() => refetchPipelines()}>
<Clock className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />{t('common.refresh')}
</Button>
<Button onClick={() => setNewOpen(true)}><Plus className="h-4 w-4 mr-2" />{t('deploy.pipeline.newPipeline')}</Button>
</div>
</div>
<Button className="dg-btn-primary" onClick={() => setNewOpen(true)}>
<Plus className="h-4 w-4 mr-2" />{t('deploy.pipeline.newPipeline')}
</Button>
</>
)}
>
{/* 全流程可视化横幅 — 双路径 // Logan.Li */}
<div className="flex items-stretch gap-3 px-4 py-3 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
<div className="flex-1 space-y-1.5">
@@ -177,12 +226,12 @@ export function PipelineManager() {
<GitBranch className="h-3 w-3 text-indigo-400" />
<span className="text-[10px] font-semibold text-indigo-400">{t('deploy.banner.build')}</span>
<ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
<Rocket className="h-3 w-3 text-red-400" />
<span className="text-[10px] font-semibold text-red-400">{t('deploy.banner.deploy')}</span>
<Rocket className="h-3 w-3 dg-text-red" />
<span className="text-[10px] font-semibold dg-text-red">{t('deploy.banner.deploy')}</span>
<ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
<div className="flex items-center gap-1 px-2 py-0.5 rounded bg-blue-400/10 border border-blue-400/20">
<Server className="h-3 w-3 text-blue-400" />
<span className="text-[10px] font-medium text-blue-400">{t('deploy.banner.sshHost')}</span>
<Server className="h-3 w-3 dg-text-blue" />
<span className="text-[10px] font-medium dg-text-blue">{t('deploy.banner.sshHost')}</span>
</div>
</div>
<p className="text-[9px] text-[var(--dg-text-secondary)] opacity-40 pl-1">{t('deploy.banner.sshDesc')}</p>
@@ -193,15 +242,15 @@ export function PipelineManager() {
<GitBranch className="h-3 w-3 text-indigo-400" />
<span className="text-[10px] font-semibold text-indigo-400">{t('deploy.banner.build')}</span>
<ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
<Container className="h-3 w-3 text-cyan-400" />
<span className="text-[10px] font-semibold text-cyan-400">{t('deploy.banner.imageRegistry')}</span>
<Container className="h-3 w-3 dg-text-cyan" />
<span className="text-[10px] font-semibold dg-text-cyan">{t('deploy.banner.imageRegistry')}</span>
<ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
<Rocket className="h-3 w-3 text-red-400" />
<span className="text-[10px] font-semibold text-red-400">{t('deploy.banner.deploy')}</span>
<Rocket className="h-3 w-3 dg-text-red" />
<span className="text-[10px] font-semibold dg-text-red">{t('deploy.banner.deploy')}</span>
<ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
<div className="flex items-center gap-1 px-2 py-0.5 rounded bg-emerald-400/10 border border-emerald-400/20">
<Network className="h-3 w-3 text-emerald-400" />
<span className="text-[10px] font-medium text-emerald-400">{t('deploy.banner.kubernetes')}</span>
<Network className="h-3 w-3 dg-text-green" />
<span className="text-[10px] font-medium dg-text-green">{t('deploy.banner.kubernetes')}</span>
</div>
</div>
<p className="text-[9px] text-[var(--dg-text-secondary)] opacity-40 pl-1">{t('deploy.banner.k8sDesc')}</p>
@@ -209,48 +258,16 @@ export function PipelineManager() {
<span className="self-center ml-2 text-[10px] text-[var(--dg-text-secondary)] opacity-30 tracking-wide whitespace-nowrap">{t('deploy.banner.fullFlow')}</span>
</div>
<div className="flex items-center gap-4">
<div className="relative max-w-md flex-1">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
<Input
placeholder={t('deploy.pipeline.searchPlaceholder')}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
/>
</div>
<div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
{ENV_TYPES.map((et) => {
const active = envFilter === et.key;
const Icon = et.icon;
return (
<button
key={et.key}
onClick={() => setEnvFilter(et.key)}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
active ? 'text-white shadow-sm' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
}`}
style={active ? { backgroundColor: et.color } : {}}
>
<Icon className="h-3.5 w-3.5" />{et.label}
</button>
);
})}
</div>
</div>
{loading ? (
<div className="flex items-center justify-center py-12">
<Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
</div>
) : filtered.length === 0 ? (
<div className="text-center py-16 text-[var(--dg-text-secondary)]">
<Workflow className="h-10 w-10 mx-auto mb-3 opacity-30" />
<p className="text-sm">{t('deploy.pipeline.noData')}</p>
<Button variant="outline" className="mt-4" onClick={() => setNewOpen(true)}>
<Plus className="h-4 w-4 mr-1" />{t('deploy.pipeline.createFirst')}
</Button>
</div>
{!loading && filtered.length === 0 ? (
<PageEmpty
icon={<Workflow className="h-10 w-10" />}
title={t('deploy.pipeline.noData')}
action={(
<Button variant="outline" onClick={() => setNewOpen(true)}>
<Plus className="h-4 w-4 mr-1" />{t('deploy.pipeline.createFirst')}
</Button>
)}
/>
) : (
<div className="space-y-3">
{filtered.map((pipeline) => {
@@ -275,6 +292,6 @@ export function PipelineManager() {
)}
<PipelineCreateDialog open={newOpen} onOpenChange={setNewOpen} onCreated={refetchPipelines} />
</div>
</PageShell>
);
}
frontend/src/components/deploy/PipelineRunDetail.tsx
+57 -57
View File
@@ -12,6 +12,8 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { toast } from 'sonner';
import { pipelineApi } from '@/api';
import { FileBrowserDialog } from './FileBrowserDialog';
import { PageShell } from '@/components/layout/PageShell';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
// ═══════════ 阶段定义 (与 PipelineManager 共用) ═══════════
@@ -55,11 +57,11 @@ interface StageStatus {
}
const STATUS_BADGES: Record<string, string> = {
success: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
failed: 'bg-red-500/20 text-red-400 border-red-500/30',
running: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
pending: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
cancelled: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
success: 'bg-emerald-500/20 dg-text-green border-emerald-500/30',
failed: 'bg-red-500/20 dg-text-red border-red-500/30',
running: 'bg-blue-500/20 dg-text-blue border-blue-500/30',
pending: 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]',
cancelled: 'bg-amber-500/20 dg-text-yellow border-amber-500/30',
};
const STATUS_ICONS: JsonData = {
@@ -290,37 +292,35 @@ export default function PipelineRunDetail() {
// 获取当前选中阶段的摘要日志
const stageSummary = selectedStage ? getStageLogSummary(logs, selectedStage) : '';
const successCount = runs.filter(r => r.status === 'success').length;
const runningCount = runs.filter(r => r.status === 'running').length;
return (
<div className="space-y-4 h-full flex flex-col">
{/* ═══════════ 页面头部 ═══════════ */}
<div className="flex items-center justify-between">
<div>
<h2 className="text-lg font-semibold text-[var(--dg-text-primary)]">
<History className="w-5 h-5 inline mr-2" />
流水线详情
</h2>
<div className="flex items-center gap-2 mt-0.5 flex-wrap">
{pipeline?.name && (
<span className="text-sm font-medium text-[var(--dg-text-primary)]">
{pipeline.name}
</span>
)}
{pipeline?.environment && (
<Badge className="text-xs" style={{
backgroundColor: pipeline.environment.color + '20',
color: pipeline.environment.color,
}}>
{pipeline.environment.display_name}
</Badge>
)}
{selectedRun && (
<span className="text-sm text-[var(--dg-text-secondary)]">
发布 #{selectedRun.build_number}
</span>
)}
</div>
</div>
<div className="flex gap-2 items-center">
<PageShell
variant="workspace"
title={pipeline?.name || '流水线详情'}
subtitle={selectedRun ? `发布 #${selectedRun.build_number}` : (pipeline?.code ? `code: ${pipeline.code}` : '执行记录与日志')}
icon={<History className="h-5 w-5" />}
contentClassName="space-y-4 h-full flex flex-col"
metrics={(
<StatStrip
items={[
{ label: '执行记录', value: runs.length, color: 'blue' },
{ label: '成功', value: successCount, color: 'emerald' },
{ label: '执行中', value: runningCount, color: 'amber' },
]}
/>
)}
actions={(
<>
{pipeline?.environment && (
<Badge className="text-xs" style={{
backgroundColor: pipeline.environment.color + '20',
color: pipeline.environment.color,
}}>
{pipeline.environment.display_name}
</Badge>
)}
{selectedIds.size > 0 && (
<Button variant="destructive" size="sm" onClick={batchDelete} disabled={deleting}>
<Trash2 className="w-4 h-4 mr-1" />删除 ({selectedIds.size})
@@ -329,21 +329,21 @@ export default function PipelineRunDetail() {
<select
value={pageSize}
onChange={e => setPageSize(Number(e.target.value))}
className="h-8 px-2 text-xs rounded border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] text-[var(--dg-text-primary)]"
className="h-8 px-2 text-xs rounded border border-[var(--dg-border)] dg-input"
>
<option value={10}>10条/页</option>
<option value={20}>20条/页</option>
<option value={30}>30条/页</option>
</select>
<Button variant="outline" size="sm" onClick={fetchRuns}>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchRuns}>
<RefreshCw className="w-4 h-4 mr-1" />刷新
</Button>
<Button size="sm" onClick={triggerRun}>
<Button size="sm" className="dg-btn-primary" onClick={triggerRun}>
<Play className="w-4 h-4 mr-1" />立即执行
</Button>
</div>
</div>
</>
)}
>
{/* ═══════════ 阶段进度条 (交互式) ═══════════ */}
<div className="flex items-center gap-0 px-4 py-3 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] overflow-x-auto">
{STAGE_DEFS.map((def, i) => {
@@ -473,7 +473,7 @@ export default function PipelineRunDetail() {
</td>
<td className="px-3 py-2.5 text-[var(--dg-text-secondary)] font-mono text-xs">
{run.status === 'running' ? (
<span className="flex items-center gap-1 text-blue-400">
<span className="flex items-center gap-1 dg-text-blue">
<Loader2 className="w-3 h-3 animate-spin" />执行中...
</span>
) : formatDuration(run.duration)}
@@ -516,7 +516,7 @@ export default function PipelineRunDetail() {
{pipeline?.name || `#${pipelineCode}`} #{selectedRun.build_number}
</CardTitle>
{selectedRun.status === 'running' && (
<Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 text-xs">
<Badge className="bg-blue-500/20 dg-text-blue border-blue-500/30 text-xs">
<Loader2 className="w-3 h-3 animate-spin mr-1" />实时
</Badge>
)}
@@ -533,7 +533,7 @@ export default function PipelineRunDetail() {
{selectedRun.commit_id && (
<>
<span className="opacity-40">|</span>
<code className="bg-amber-400/10 text-amber-400 px-1 py-0.5 rounded text-[10px]">
<code className="bg-amber-400/10 dg-text-yellow px-1 py-0.5 rounded text-[10px]">
{selectedRun.commit_id.slice(0, 8)}
</code>
</>
@@ -541,7 +541,7 @@ export default function PipelineRunDetail() {
{selectedRun.image_tag && (
<>
<span className="opacity-40">|</span>
<code className="bg-cyan-400/10 text-cyan-400 px-1 py-0.5 rounded text-[10px]">
<code className="bg-cyan-400/10 dg-text-cyan px-1 py-0.5 rounded text-[10px]">
📦 {selectedRun.image_tag}
</code>
</>
@@ -558,9 +558,9 @@ export default function PipelineRunDetail() {
</span>
{(() => {
const st = stageStats.get(selectedStage);
if (st === 'success' || st === 'completed') return <CheckCircle2 className="h-3.5 w-3.5 text-emerald-400" />;
if (st === 'failed' || st === 'error') return <XCircle className="h-3.5 w-3.5 text-red-400" />;
if (st === 'running' || st === 'in_progress') return <Loader2 className="h-3.5 w-3.5 text-blue-400 animate-spin" />;
if (st === 'success' || st === 'completed') return <CheckCircle2 className="h-3.5 w-3.5 dg-text-green" />;
if (st === 'failed' || st === 'error') return <XCircle className="h-3.5 w-3.5 dg-text-red" />;
if (st === 'running' || st === 'in_progress') return <Loader2 className="h-3.5 w-3.5 dg-text-blue animate-spin" />;
return null;
})()}
<span className="text-xs text-[var(--dg-text-muted)] truncate font-mono">
@@ -571,7 +571,7 @@ export default function PipelineRunDetail() {
)}
<div className="h-full overflow-y-auto bg-[#0d1117] font-mono text-xs leading-5 p-4" style={{ minHeight: 280 }}>
{filteredLogs.length === 0 && selectedRun.status !== 'running' ? (
<div className="text-center py-12 text-slate-500">
<div className="text-center py-12 dg-text-muted">
{selectedStage ? '该阶段暂无日志输出' : '暂无日志输出'}
</div>
) : (
@@ -601,25 +601,25 @@ export default function PipelineRunDetail() {
: isSuccess ? 'border-l-2 border-emerald-500 bg-emerald-500/5' : '';
const msgColor = isError ? 'text-red-200'
: isWarn ? 'text-amber-200'
: isSuccess ? 'text-emerald-200' : 'text-slate-300';
: isSuccess ? 'text-emerald-200' : 'text-[var(--dg-text-secondary)]';
const levelBadge = isError
? <span className="shrink-0 px-1.5 py-px rounded text-[10px] font-bold bg-red-600/40 text-red-200">ERR</span>
: isWarn
? <span className="shrink-0 px-1.5 py-px rounded text-[10px] font-bold bg-amber-600/40 text-amber-200">WARN</span>
: isSuccess
? <span className="shrink-0 px-1.5 py-px rounded text-[10px] font-bold bg-emerald-600/30 text-emerald-200"> OK </span>
: <span className="shrink-0 px-1.5 py-px rounded text-[10px] bg-slate-600/30 text-slate-400">INFO</span>;
: <span className="shrink-0 px-1.5 py-px rounded text-[10px] bg-[var(--dg-bg-active)]/30 dg-text-secondary">INFO</span>;
return (
<React.Fragment key={i}>
{showStage && (
<div className={`flex items-center gap-2 my-2 py-1 px-2 border-l-4 rounded-r ${stageStyles[entry.stage || ''] || 'border-slate-500 bg-slate-500/10'}`}>
<div className={`flex items-center gap-2 my-2 py-1 px-2 border-l-4 rounded-r ${stageStyles[entry.stage || ''] || 'border-[var(--dg-border)] bg-[var(--dg-bg-active)]/10'}`}>
<span className="text-xs">{stageIcons[entry.stage || ''] || '▸'}</span>
<span className="text-[11px] font-semibold tracking-wider text-slate-200">{entry.stage}</span>
<span className="flex-1 border-t border-slate-700/50"></span>
<span className="text-[11px] font-semibold tracking-wider text-[var(--dg-text-primary)]">{entry.stage}</span>
<span className="flex-1 border-t border-[var(--dg-border)]/50"></span>
</div>
)}
<div className={`flex items-start gap-2 px-2 py-0.5 -mx-1 rounded-sm ${accent} ${!isError && !isWarn && !isSuccess ? 'hover:bg-white/[0.03]' : ''}`}>
<span className="text-slate-600 shrink-0 w-14 text-right text-[10px] pt-px">{entry.time}</span>
<span className="dg-text-muted shrink-0 w-14 text-right text-[10px] pt-px">{entry.time}</span>
{levelBadge}
<span className={`break-all ${msgColor}`}>{entry.message}</span>
</div>
@@ -629,7 +629,7 @@ export default function PipelineRunDetail() {
})()}
{selectedRun.status === 'running' && (
<div className="flex items-center gap-2 mt-2 py-1.5 px-3 bg-blue-500/10 border-l-4 border-blue-500 rounded-r">
<Loader2 className="w-3 h-3 animate-spin text-blue-400 shrink-0" />
<Loader2 className="w-3 h-3 animate-spin dg-text-blue shrink-0" />
<span className="text-[11px] text-blue-300 font-medium">流水线执行中，实时输出...</span>
<span className="flex gap-1 ml-1">
<span className="w-1 h-1 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: '0ms' }}></span>
@@ -654,6 +654,6 @@ export default function PipelineRunDetail() {
runId={browserRun?.id ?? null}
buildNumber={browserRun?.buildNumber ?? 0}
/>
</div>
</PageShell>
);
}
frontend/src/components/deploy/ReleaseApproveDialog.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export function ReleaseApproveDialog({ release, open, onOpenChange, onSuccess }:
<DialogFooter>
<Button
variant="outline"
className="border-red-600 text-red-400 hover:bg-red-600/20"
className="border-red-600 dg-text-red hover:bg-red-600/20"
disabled={submitting}
onClick={() => handleApprove(false)}
>
frontend/src/components/deploy/ReleaseCreateDialog.tsx
+17 -17
View File
@@ -74,41 +74,41 @@ export function ReleaseCreateDialog({ open, onOpenChange, onSuccess }: ReleaseCr
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl bg-slate-900 border-slate-800">
<DialogContent className="max-w-2xl dg-card">
<DialogHeader>
<DialogTitle className="text-slate-100">新建发布</DialogTitle>
<DialogDescription className="text-slate-500">创建新的应用版本发布申请</DialogDescription>
<DialogTitle className="text-[var(--dg-text-primary)]">新建发布</DialogTitle>
<DialogDescription className="dg-text-muted">创建新的应用版本发布申请</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div>
<Label className="text-slate-300">应用名称</Label>
<Label className="text-[var(--dg-text-secondary)]">应用名称</Label>
<Input
value={form.appName}
onChange={(e) => update('appName', e.target.value)}
placeholder="如：用户中心服务"
className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
className="mt-1 dg-input"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label className="text-slate-300">版本号</Label>
<Label className="text-[var(--dg-text-secondary)]">版本号</Label>
<Input
value={form.version}
onChange={(e) => update('version', e.target.value)}
placeholder="v1.0.0"
className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
className="mt-1 dg-input"
/>
</div>
<div>
<Label className="text-slate-300">目标环境</Label>
<Label className="text-[var(--dg-text-secondary)]">目标环境</Label>
<Select
value={form.environment}
onValueChange={(value) => update('environment', value)}
>
<SelectTrigger className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200">
<SelectTrigger className="mt-1 dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectContent className="dg-input">
<SelectItem value="dev">开发环境</SelectItem>
<SelectItem value="test">测试环境</SelectItem>
<SelectItem value="staging">预发布</SelectItem>
@@ -119,36 +119,36 @@ export function ReleaseCreateDialog({ open, onOpenChange, onSuccess }: ReleaseCr
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label className="text-slate-300">Commit ID</Label>
<Label className="text-[var(--dg-text-secondary)]">Commit ID</Label>
<Input
value={form.commitId}
onChange={(e) => update('commitId', e.target.value)}
placeholder="abc1234"
className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
className="mt-1 dg-input"
/>
</div>
<div>
<Label className="text-slate-300">提交信息</Label>
<Label className="text-[var(--dg-text-secondary)]">提交信息</Label>
<Input
value={form.commitMsg}
onChange={(e) => update('commitMsg', e.target.value)}
placeholder="feat: 新增功能"
className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
className="mt-1 dg-input"
/>
</div>
</div>
<div>
<Label className="text-slate-300">发布说明</Label>
<Label className="text-[var(--dg-text-secondary)]">发布说明</Label>
<Textarea
value={form.description}
onChange={(e) => update('description', e.target.value)}
placeholder="描述本次发布的内容..."
className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
className="mt-1 dg-input"
/>
</div>
</div>
<DialogFooter>
<Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => onOpenChange(false)}>
<Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => onOpenChange(false)}>
取消
</Button>
<Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleSubmit} disabled={submitting}>
frontend/src/components/deploy/ReleaseDetailDialog.tsx
+20 -20
View File
@@ -45,16 +45,16 @@ export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }:
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-4xl bg-slate-900 border-slate-800">
<DialogContent className="max-w-4xl dg-card">
<DialogHeader>
<DialogTitle className="text-slate-100 flex items-center gap-2">
<Rocket className="h-5 w-5 text-blue-400" />
<DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<Rocket className="h-5 w-5 dg-text-blue" />
{release?.app_name}
<Badge variant="outline" className="border-slate-700 text-slate-400">
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">
{release?.version}
</Badge>
</DialogTitle>
<DialogDescription className="text-slate-500">
<DialogDescription className="dg-text-muted">
环境: {release?.environment}
</DialogDescription>
</DialogHeader>
@@ -62,7 +62,7 @@ export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }:
<div className="space-y-4">
{/* Pipeline Steps */}
<div className="space-y-2">
<h4 className="text-sm font-medium text-slate-300">发布进度</h4>
<h4 className="text-sm font-medium text-[var(--dg-text-secondary)]">发布进度</h4>
<div className="space-y-2">
{PIPELINE_STEPS.map((step, index) => (
<div
@@ -71,15 +71,15 @@ export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }:
'flex items-center gap-3 p-3 rounded-lg',
step.status === 'success' && 'bg-emerald-500/5',
step.status === 'running' && 'bg-blue-500/5',
step.status === 'pending' && 'bg-slate-800/50'
step.status === 'pending' && 'bg-[var(--dg-bg-tertiary)]/50'
)}
>
<div
className={cn(
'w-6 h-6 rounded-full flex items-center justify-center',
step.status === 'success' && 'bg-emerald-500/20 text-emerald-400',
step.status === 'running' && 'bg-blue-500/20 text-blue-400',
step.status === 'pending' && 'bg-slate-700 text-slate-500'
step.status === 'success' && 'bg-emerald-500/20 dg-text-green',
step.status === 'running' && 'bg-blue-500/20 dg-text-blue',
step.status === 'pending' && 'bg-[var(--dg-bg-active)] dg-text-muted'
)}
>
{step.status === 'success' ? (
@@ -90,8 +90,8 @@ export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }:
<span className="text-xs">{index + 1}</span>
)}
</div>
<span className="flex-1 text-sm text-slate-200">{step.name}</span>
<span className="text-sm text-slate-500">{step.duration}</span>
<span className="flex-1 text-sm text-[var(--dg-text-primary)]">{step.name}</span>
<span className="text-sm dg-text-muted">{step.duration}</span>
</div>
))}
</div>
@@ -99,23 +99,23 @@ export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }:
{/* Build Logs */}
<div className="space-y-2">
<h4 className="text-sm font-medium text-slate-300">构建日志</h4>
<div className="bg-slate-950 rounded-lg p-4 font-mono text-xs text-slate-400 h-48 overflow-auto">
<h4 className="text-sm font-medium text-[var(--dg-text-secondary)]">构建日志</h4>
<div className="bg-[var(--dg-bg-primary)] rounded-lg p-4 font-mono text-xs dg-text-secondary h-48 overflow-auto">
<div className="space-y-1">
<p>[10:00:00] Starting pipeline for {release?.app_name}...</p>
<p>[10:00:15] Checkout code from branch {release?.branch}</p>
<p>[10:00:30] Installing dependencies...</p>
<p className="text-emerald-400">[10:01:15] Dependencies installed successfully</p>
<p className="dg-text-green">[10:01:15] Dependencies installed successfully</p>
<p>[10:01:15] Running code analysis...</p>
<p className="text-emerald-400">[10:01:45] Code analysis passed</p>
<p className="dg-text-green">[10:01:45] Code analysis passed</p>
<p>[10:01:45] Running unit tests...</p>
<p className="text-emerald-400">[10:04:00] All tests passed (156/156)</p>
<p className="dg-text-green">[10:04:00] All tests passed (156/156)</p>
<p>[10:04:00] Building Docker image...</p>
<p className="text-emerald-400">[10:07:30] Image built successfully</p>
<p className="dg-text-green">[10:07:30] Image built successfully</p>
<p>[10:07:30] Pushing image to registry...</p>
<p className="text-emerald-400">[10:08:50] Image pushed successfully</p>
<p className="dg-text-green">[10:08:50] Image pushed successfully</p>
<p>[10:08:50] Deploying to Kubernetes...</p>
<p className="text-blue-400">[10:10:00] Deployment in progress...</p>
<p className="dg-text-blue">[10:10:00] Deployment in progress...</p>
</div>
</div>
</div>
frontend/src/components/deploy/ReleaseManager.tsx
+39 -46
View File
@@ -37,6 +37,10 @@ import { toast } from 'sonner';
import { getStatusBadge, getEnvironmentBadge } from './releaseManagerHelpers';
import { ReleaseApplyDialog } from './ReleaseApplyDialog';
import { ReleaseApproveDialog } from './ReleaseApproveDialog';
import { PageShell } from '@/components/layout/PageShell';
import { PageLoading } from '@/components/layout/PageLoading';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
export function ReleaseManager() {
const _confirm = useConfirm();
@@ -106,40 +110,8 @@ export function ReleaseManager() {
}
};
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">发布管理</h1>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">管理应用版本发布与审批流程</p>
</div>
<Button onClick={() => setIsCreateDialogOpen(true)}>
<Plus className="h-4 w-4 mr-2" />
新建发布
</Button>
</div>
{/* Stats */}
<div className="grid grid-cols-5 gap-4">
{[
{ label: '待审批', val: releases.filter((r) => r.status === 'pending').length, color: 'text-amber-400' },
{ label: '发布中', val: releases.filter((r) => r.status === 'deploying').length, color: 'text-blue-400' },
{ label: '发布成功', val: releases.filter((r) => r.status === 'success').length, color: 'text-emerald-400' },
{ label: '发布失败', val: releases.filter((r) => r.status === 'failed').length, color: 'text-red-400' },
{ label: '已回滚', val: releases.filter((r) => r.status === 'rolled_back').length, color: 'text-slate-400' },
].map((s) => (
<Card key={s.label} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<p className="text-[var(--dg-text-secondary)] text-sm">{s.label}</p>
<p className={`text-2xl font-bold ${s.color}`}>{s.val}</p>
</CardContent>
</Card>
))}
</div>
{/* Filters */}
<div className="flex items-center gap-4">
const toolbar = (
<div className="flex items-center gap-4 flex-wrap">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
<Input
@@ -176,17 +148,38 @@ export function ReleaseManager() {
<SelectItem value="rolled_back">已回滚</SelectItem>
</SelectContent>
</Select>
</div>
</div>
);
return (
<PageShell
variant="list"
title="发布管理"
subtitle="管理应用版本发布与审批流程"
icon={<Rocket className="h-5 w-5" />}
toolbar={toolbar}
metrics={(
<StatStrip
items={[
{ label: '待审批', value: releases.filter((r) => r.status === 'pending').length, color: 'amber' },
{ label: '发布中', value: releases.filter((r) => r.status === 'deploying').length, color: 'blue' },
{ label: '发布成功', value: releases.filter((r) => r.status === 'success').length, color: 'green' },
{ label: '发布失败', value: releases.filter((r) => r.status === 'failed').length, color: 'red' },
{ label: '已回滚', value: releases.filter((r) => r.status === 'rolled_back').length, color: 'muted' },
]}
/>
)}
actions={(
<Button onClick={() => setIsCreateDialogOpen(true)} className="dg-btn-primary">
<Plus className="h-4 w-4 mr-2" />
新建发布
</Button>
)}
>
{loading ? (
<div className="flex items-center justify-center py-12">
<Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
</div>
<PageLoading />
) : filteredReleases.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 text-[var(--dg-text-secondary)]">
<PackageOpen className="h-12 w-12 mb-3 opacity-50" />
<p className="text-sm">暂无发布记录</p>
</div>
<PageEmpty icon={<PackageOpen className="h-12 w-12" />} title="暂无发布记录" />
) : (
<div className="space-y-3">
{filteredReleases.map((release) => (
@@ -231,7 +224,7 @@ export function ReleaseManager() {
<Button
variant="outline"
size="sm"
className="border-emerald-600 text-emerald-400 hover:bg-emerald-600/20"
className="border-emerald-600 dg-text-green hover:bg-emerald-600/20"
onClick={() => {
setSelectedRelease(release);
setIsApproveDialogOpen(true);
@@ -245,7 +238,7 @@ export function ReleaseManager() {
<Button
variant="outline"
size="sm"
className="border-blue-600 text-blue-400 hover:bg-blue-600/20"
className="border-blue-600 dg-text-blue hover:bg-blue-600/20"
onClick={() => handleDeploy(release.id, release.app_name, release.version)}
>
<Play className="h-4 w-4 mr-1" />
@@ -256,7 +249,7 @@ export function ReleaseManager() {
<Button
variant="outline"
size="sm"
className="border-amber-600 text-amber-400 hover:bg-amber-600/20"
className="border-amber-600 dg-text-yellow hover:bg-amber-600/20"
onClick={() => handleRollback(release.id, release.app_name, release.version)}
>
<RotateCcw className="h-4 w-4 mr-1" />
@@ -363,6 +356,6 @@ export function ReleaseManager() {
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</PageShell>
);
}
frontend/src/components/deploy/ToolConfigTab.tsx
+13 -13
View File
@@ -24,18 +24,18 @@ const categoryLabel: Record<string, string> = {
build: '构建', deploy: '部署', automation: '自动化', other: '其他',
};
const categoryColor: Record<string, string> = {
build: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
deploy: 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30',
automation: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
other: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
build: 'bg-amber-500/20 dg-text-yellow border-amber-500/30',
deploy: 'bg-cyan-500/20 dg-text-cyan border-cyan-500/30',
automation: 'bg-purple-500/20 dg-text-purple border-purple-500/30',
other: 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]',
};
const _methodLabel: Record<string, string> = {
preinstall: '预装', lazy: '懒加载', disabled: '禁用',
};
const _methodColor: Record<string, string> = {
preinstall: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
lazy: 'bg-violet-500/20 text-violet-400 border-violet-500/30',
disabled: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
preinstall: 'bg-emerald-500/20 dg-text-green border-emerald-500/30',
lazy: 'bg-violet-500/20 dg-text-purple border-violet-500/30',
disabled: 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]',
};
// Tools that support version selection
@@ -177,10 +177,10 @@ export default function ToolConfigTab() {
<div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5 max-w-[220px] leading-tight">{tool.description}</div>
)}
{tool.installed_version && tool.status === 'installed' && (
<div className="text-xs text-emerald-400 font-mono mt-0.5">v{tool.installed_version}</div>
<div className="text-xs dg-text-green font-mono mt-0.5">v{tool.installed_version}</div>
)}
{tool.error_msg && (
<div className="text-xs text-red-400 mt-0.5 max-w-[200px] truncate" title={tool.error_msg}>{tool.error_msg}</div>
<div className="text-xs dg-text-red mt-0.5 max-w-[200px] truncate" title={tool.error_msg}>{tool.error_msg}</div>
)}
</td>
<td className="px-3 py-2 hidden sm:table-cell">
@@ -205,19 +205,19 @@ export default function ToolConfigTab() {
</td>
<td className="px-3 py-2">
{tool.status === 'installed' ? (
<Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30 text-xs gap-1">
<Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30 text-xs gap-1">
<CheckCircle className="w-3 h-3" />已安装
</Badge>
) : tool.status === 'installing' ? (
<Badge className="bg-amber-500/20 text-amber-400 border-amber-500/30 text-xs gap-1">
<Badge className="bg-amber-500/20 dg-text-yellow border-amber-500/30 text-xs gap-1">
<Loader2 className="w-3 h-3 animate-spin" />安装中
</Badge>
) : tool.status === 'failed' ? (
<Badge className="bg-red-500/20 text-red-400 border-red-500/30 text-xs gap-1">
<Badge className="bg-red-500/20 dg-text-red border-red-500/30 text-xs gap-1">
<XCircle className="w-3 h-3" />失败
</Badge>
) : (
<Badge className="bg-slate-500/20 text-slate-400 border-slate-500/30 text-xs gap-1">
<Badge className="bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)] text-xs gap-1">
<Clock className="w-3 h-3" />未安装
</Badge>
)}
frontend/src/components/deploy/UserGroupsManager.tsx
+43 -23
View File
@@ -1,6 +1,9 @@
import { useState, useEffect } from 'react';
import { Plus, Trash2, Pencil, RefreshCw, Loader2, Users, UserPlus, UserX, Shield } from 'lucide-react';
import { Plus, Trash2, Pencil, RefreshCw, Users, UserPlus, UserX, Shield } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { PageShell } from '@/components/layout/PageShell';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -78,35 +81,52 @@ export default function UserGroupsManager() {
const toggleExpand = (gid: number) => setExpanded(p => ({ ...p, [gid]: !p[gid] }));
const memberCount = groups.reduce((sum, g) => sum + (g.members || []).length, 0);
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h2 className="text-lg font-semibold text-[var(--dg-text-primary)]">用户组管理</h2>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">创建用户组，将组授权给流水线，组内成员自动获得流水线权限</p>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={loadGroups}><RefreshCw className="w-4 h-4 mr-1" />刷新</Button>
<Button size="sm" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}>
<PageShell
variant="list"
title="用户组管理"
subtitle="创建用户组，将组授权给流水线，组内成员自动获得流水线权限"
icon={<Users className="h-5 w-5" />}
loading={loading}
metrics={(
<StatStrip
items={[
{ label: '用户组', value: groups.length, color: 'blue' },
{ label: '成员总数', value: memberCount, color: 'purple' },
]}
/>
)}
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadGroups}>
<RefreshCw className="w-4 h-4 mr-1" />刷新
</Button>
<Button size="sm" className="dg-btn-primary" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />新建用户组
</Button>
</div>
</div>
{loading ? (
<div className="flex justify-center py-12"><Loader2 className="w-6 h-6 animate-spin text-[var(--dg-text-secondary)]" /></div>
) : groups.length === 0 ? (
<div className="text-center py-12 text-[var(--dg-text-secondary)]">
<Users className="w-10 h-10 mx-auto mb-3 opacity-30" />
<p>暂无用户组，点击「新建用户组」创建</p>
</div>
</>
)}
>
{!loading && groups.length === 0 ? (
<PageEmpty
icon={<Users className="h-10 w-10" />}
title="暂无用户组"
description="点击「新建用户组」创建第一个用户组"
action={(
<Button size="sm" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />新建用户组
</Button>
)}
/>
) : (
<div className="space-y-3">
{groups.map(g => (
<div key={g.id} className="border border-[var(--dg-border)] rounded-lg bg-[var(--dg-bg-secondary)]">
<div className="flex items-center justify-between p-4">
<div className="flex items-center gap-3" style={{ cursor: 'pointer' }} onClick={() => toggleExpand(g.id)}>
<Shield className="w-5 h-5 text-blue-400" />
<Shield className="w-5 h-5 dg-text-blue" />
<div>
<div className="font-medium text-[var(--dg-text-primary)]">{g.name}</div>
<div className="text-xs text-[var(--dg-text-secondary)]">{g.description || '暂无描述'} · {(g.members || []).length} 位成员</div>
@@ -139,7 +159,7 @@ export default function UserGroupsManager() {
{(g.members || []).map(m => (
<Badge key={m.id} variant="secondary" className="flex items-center gap-1 pl-2 pr-1 py-1.5">
<Users className="w-3 h-3" />{m.username}
<button className="ml-1 hover:text-red-400" onClick={() => handleRemoveMember(g.id, m.id, m.username)}>
<button className="ml-1 hover:dg-text-red" onClick={() => handleRemoveMember(g.id, m.id, m.username)}>
<UserX className="w-3 h-3" />
</button>
</Badge>
@@ -167,6 +187,6 @@ export default function UserGroupsManager() {
</div>
</DialogContent>
</Dialog>
</div>
</PageShell>
);
}
frontend/src/components/deploy/credential-manager/CredDetailDialog.tsx
+4 -4
View File
@@ -88,10 +88,10 @@ export function CredDetailDialog({ open, onClose, credId }: CredDetailDialogProp
</div>
<div><span className="text-[var(--dg-text-muted)]">状态：</span>
{detailRecord?.is_active
? <Badge className="bg-green-500/20 text-green-400 text-xs ml-1"><CheckCircle2 className="h-3 w-3 mr-0.5" />启用</Badge>
: <Badge className="bg-red-500/20 text-red-400 text-xs ml-1"><XCircle className="h-3 w-3 mr-0.5" />禁用</Badge>}
? <Badge className="bg-green-500/20 dg-text-green text-xs ml-1"><CheckCircle2 className="h-3 w-3 mr-0.5" />启用</Badge>
: <Badge className="bg-red-500/20 dg-text-red text-xs ml-1"><XCircle className="h-3 w-3 mr-0.5" />禁用</Badge>}
{detailRecord?.expires_at && new Date(detailRecord.expires_at as string) < new Date() && (
<Badge className="bg-yellow-500/20 text-yellow-400 text-xs ml-1"><AlertTriangle className="h-3 w-3 mr-0.5" />已过期</Badge>
<Badge className="bg-yellow-500/20 dg-text-yellow text-xs ml-1"><AlertTriangle className="h-3 w-3 mr-0.5" />已过期</Badge>
)}
</div>
<div className="col-span-2 cursor-pointer" onClick={() => copyValue((detailRecord?.env_prefix as string) || '')}>
@@ -118,7 +118,7 @@ export function CredDetailDialog({ open, onClose, credId }: CredDetailDialogProp
<Key className="h-4 w-4 text-yellow-500" />密钥数据
</div>
<div className="p-3 rounded-md bg-yellow-500/5 border border-yellow-500/20 mb-3">
<p className="text-xs text-yellow-400/80">以下内容包含敏感信息，请妥善保管，不要泄露给他人。</p>
<p className="text-xs dg-text-yellow/80">以下内容包含敏感信息，请妥善保管，不要泄露给他人。</p>
</div>
{st === 'ssh' && <>
frontend/src/components/deploy/credential-manager/CredFormDialog.tsx
+7 -7
View File
@@ -161,7 +161,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
const show = showMap[fieldKey];
return (
<div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{label}{required && !isEdit && <span className="text-red-400"> *</span>}</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">{label}{required && !isEdit && <span className="dg-text-red"> *</span>}</Label>
<div className="relative">
{isLong ? (
<textarea value={value} onChange={e => onChange(e.target.value)}
@@ -202,7 +202,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
<div className="text-xs font-medium text-[var(--dg-text-secondary)] mb-2">基本信息</div>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">凭据名称 <span className="text-red-400">*</span></Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">凭据名称 <span className="dg-text-red">*</span></Label>
<Input value={name} onChange={e => setName(e.target.value)} placeholder="如：生产环境 SSH"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div>
@@ -212,7 +212,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-sm" />
</div>
<div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">类型{!isEdit && <span className="text-red-400"> *</span>}</Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">类型{!isEdit && <span className="dg-text-red"> *</span>}</Label>
<Select value={secretType} onValueChange={(v) => setSecretType(v as SecretType)} disabled={isEdit}>
<SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
<SelectValue />
@@ -276,7 +276,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
{secretType === 'docker' && (
<div className="grid grid-cols-2 gap-3">
<div className="col-span-2 space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">Registry 地址 <span className="text-red-400">*</span></Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">Registry 地址 <span className="dg-text-red">*</span></Label>
<Input value={dockerServer} onChange={e => setDockerServer(e.target.value)} placeholder="registry.example.com"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
</div>
@@ -304,7 +304,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
{secretType === 'aksk' && (
<div className="grid grid-cols-2 gap-3">
<div className="col-span-2 space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">Access Key ID <span className="text-red-400">*</span></Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">Access Key ID <span className="dg-text-red">*</span></Label>
<Input value={akskAccessKey} onChange={e => setAkskAccessKey(e.target.value)} placeholder="AKIDxxxx..."
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
</div>
@@ -334,7 +334,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
</Select>
</div>
<div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">主机 <span className="text-red-400">*</span></Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">主机 <span className="dg-text-red">*</span></Label>
<Input value={dbHost} onChange={e => setDbHost(e.target.value)} placeholder="10.0.0.1"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
</div>
@@ -373,7 +373,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
{secretType === 'generic' && (
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">Key <span className="text-red-400">*</span></Label>
<Label className="text-[var(--dg-text-secondary)] text-xs">Key <span className="dg-text-red">*</span></Label>
<Input value={genericKey} onChange={e => setGenericKey(e.target.value)} placeholder="MY_SECRET"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
</div>
frontend/src/components/deploy/credential-manager/constants.ts
+14 -14
View File
@@ -6,21 +6,21 @@ import {
import type { SecretType } from './types';
export const TYPE_CONFIG: Record<SecretType, { label: string; icon: typeof Key; color: string; desc: string }> = {
ssh: { label: 'SSH 密钥', icon: Server, color: 'text-amber-400', desc: 'SSH 私钥/公钥/密码' },
docker: { label: 'Docker 凭证', icon: Container, color: 'text-cyan-400', desc: 'Docker Registry 登录凭据' },
tls: { label: 'TLS 证书', icon: Shield, color: 'text-green-400', desc: 'TLS/SSL 证书与私钥' },
aksk: { label: 'AKSK 密钥', icon: Cloud, color: 'text-purple-400', desc: '云服务 AccessKey/SecretKey' },
database: { label: '数据库凭证', icon: Database, color: 'text-blue-400', desc: '数据库连接信息' },
api: { label: 'API 密钥', icon: Globe, color: 'text-orange-400', desc: 'API Token/Key + 端点' },
generic: { label: '通用凭证', icon: FileText, color: 'text-gray-400', desc: '自定义 Key/Value 键值对' },
ssh: { label: 'SSH 密钥', icon: Server, color: 'dg-text-yellow', desc: 'SSH 私钥/公钥/密码' },
docker: { label: 'Docker 凭证', icon: Container, color: 'dg-text-cyan', desc: 'Docker Registry 登录凭据' },
tls: { label: 'TLS 证书', icon: Shield, color: 'dg-text-green', desc: 'TLS/SSL 证书与私钥' },
aksk: { label: 'AKSK 密钥', icon: Cloud, color: 'dg-text-purple', desc: '云服务 AccessKey/SecretKey' },
database: { label: '数据库凭证', icon: Database, color: 'dg-text-blue', desc: '数据库连接信息' },
api: { label: 'API 密钥', icon: Globe, color: 'dg-text-orange', desc: 'API Token/Key + 端点' },
generic: { label: '通用凭证', icon: FileText, color: 'dg-text-secondary', desc: '自定义 Key/Value 键值对' },
};
export const TYPE_BADGE_CLASS: Record<SecretType, string> = {
ssh: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
docker: 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30',
tls: 'bg-green-500/20 text-green-400 border-green-500/30',
aksk: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
database: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
api: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
generic: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
ssh: 'bg-amber-500/20 dg-text-yellow border-amber-500/30',
docker: 'bg-cyan-500/20 dg-text-cyan border-cyan-500/30',
tls: 'bg-green-500/20 dg-text-green border-green-500/30',
aksk: 'bg-purple-500/20 dg-text-purple border-purple-500/30',
database: 'bg-blue-500/20 dg-text-blue border-blue-500/30',
api: 'bg-orange-500/20 dg-text-orange border-orange-500/30',
generic: 'dg-badge-muted',
};
frontend/src/components/deploy/pipeline-helpers.tsx
+6 -6
View File
@@ -47,21 +47,21 @@ export function getStatusBadge( status: string) {
switch (status) {
case 'success':
return (
<Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
<Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
<CheckCircle className="h-3 w-3 mr-1" />
成功
</Badge>
);
case 'failed':
return (
<Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
<Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10">
<XCircle className="h-3 w-3 mr-1" />
失败
</Badge>
);
case 'running':
return (
<Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
<Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10 animate-pulse">
<Loader2 className="h-3 w-3 mr-1 animate-spin" />
运行中
</Badge>
@@ -79,11 +79,11 @@ export function getStatusBadge( status: string) {
export function getStageStatusIcon(status: PipelineStage['status']) {
switch (status) {
case 'success':
return <CheckCircle className="h-4 w-4 text-emerald-400" />;
return <CheckCircle className="h-4 w-4 dg-text-green" />;
case 'failed':
return <XCircle className="h-4 w-4 text-red-400" />;
return <XCircle className="h-4 w-4 dg-text-red" />;
case 'running':
return <Loader2 className="h-4 w-4 text-blue-400 animate-spin" />;
return <Loader2 className="h-4 w-4 dg-text-blue animate-spin" />;
case 'skipped':
return <span className="text-[var(--dg-text-secondary)] text-xs">跳过</span>;
default:
frontend/src/components/deploy/pipeline-manager/PipelineCard.tsx
+2 -2
View File
@@ -98,7 +98,7 @@ export function PipelineCard({
<span className="text-[var(--dg-text-secondary)] opacity-50 text-[10px] mx-0.5">+</span>
)}
{pipeline.last_commit_id && (
<code className="text-amber-400 bg-amber-400/10 px-1 py-0.5 rounded text-[11px]">
<code className="dg-text-yellow bg-amber-400/10 px-1 py-0.5 rounded text-[11px]">
{String(pipeline.last_commit_id).slice(0, 8)}
</code>
)}
@@ -106,7 +106,7 @@ export function PipelineCard({
<ArrowRight className="h-3 w-3 text-[var(--dg-text-secondary)] opacity-40 mx-0.5" />
)}
{pipeline.last_image_tag && (
<span className="flex items-center gap-0.5 text-cyan-400">
<span className="flex items-center gap-0.5 dg-text-cyan">
<Package className="h-3 w-3" />
<code className="bg-cyan-400/10 px-1 py-0.5 rounded text-[11px]">{String(pipeline.last_image_tag)}</code>
</span>
frontend/src/components/deploy/pipeline-manager/PipelineCreateDialog.tsx
+7 -7
View File
@@ -158,7 +158,7 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
<div className="space-y-4">
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<Label>名称 <span className="text-red-400">*</span></Label>
<Label>名称 <span className="dg-text-red">*</span></Label>
<Input value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="例如: demo-jar 后端部署" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9" />
</div>
<div className="space-y-1">
@@ -238,7 +238,7 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<Label>Git URL {selectedStages.includes('checkout') && <span className="text-red-400">*</span>}</Label>
<Label>Git URL {selectedStages.includes('checkout') && <span className="dg-text-red">*</span>}</Label>
<Input value={newSource} onChange={(e) => setNewSource(e.target.value)} placeholder="https://gitee.com/user/repo.git" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9 font-mono text-xs" />
</div>
<div className="space-y-1">
@@ -260,10 +260,10 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
))}
</SelectContent>
</Select>
{!newGitCredentialId && selectedStages.includes('checkout') && <p className="text-xs text-amber-400">建议关联凭证</p>}
{!newGitCredentialId && selectedStages.includes('checkout') && <p className="text-xs dg-text-yellow">建议关联凭证</p>}
</div>
<div className="space-y-1">
<Label>镜像仓库凭证 {selectedStages.includes('image') && <span className="text-red-400">*</span>}</Label>
<Label>镜像仓库凭证 {selectedStages.includes('image') && <span className="dg-text-red">*</span>}</Label>
<Select value={String(newRegistryCredentialId)} onValueChange={(v) => setNewRegistryCredentialId(v === '__none' ? '' : v)}>
<SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9"><SelectValue placeholder="选择 Docker 凭证" /></SelectTrigger>
<SelectContent>
@@ -277,13 +277,13 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
))}
</SelectContent>
</Select>
{!newRegistryCredentialId && selectedStages.includes('image') && <p className="text-xs text-amber-400">需要关联 Docker 凭证</p>}
{!newRegistryCredentialId && selectedStages.includes('image') && <p className="text-xs dg-text-yellow">需要关联 Docker 凭证</p>}
</div>
</div>
{newRegistryCredentialId && newJobName && (
<div className="p-2.5 rounded-md bg-blue-500/5 border border-blue-500/20 text-xs text-[var(--dg-text-secondary)]">
<span className="text-blue-400">镜像命名：</span>
<span className="dg-text-blue">镜像命名：</span>
<code className="text-[var(--dg-text-primary)]">{'{registry}'}/{'{namespace}'}/{'{'}{'{JOB_BASE_NAME}'}{'}'}:{'{'}{'{tag}'}{'}'}</code>
<span className="ml-2 opacity-60">例：</span>
<code className="opacity-60">harbor.ast1001.com/test/{newJobName}:latest</code>
@@ -456,7 +456,7 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
placeholder="说明"
className="col-span-4 h-8 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"
/>
<Button variant="ghost" size="icon" className="col-span-1 h-8 w-8 text-red-400" onClick={() => setNewEnvVars(newEnvVars.filter((_, idx) => idx !== i))}>
<Button variant="ghost" size="icon" className="col-span-1 h-8 w-8 dg-text-red" onClick={() => setNewEnvVars(newEnvVars.filter((_, idx) => idx !== i))}>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
frontend/src/components/deploy/pipeline-manager/PipelineRunPanel.tsx
+15 -15
View File
@@ -72,7 +72,7 @@ function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> })
<span className="font-bold text-[var(--dg-text-primary)]">{running}/{max}</span>
{queued > 0 && (
<span className="text-[var(--dg-text-secondary)] ml-2">
构建队列 <span className="font-bold text-amber-400">({queued})</span>
构建队列 <span className="font-bold dg-text-yellow">({queued})</span>
</span>
)}
</div>
@@ -82,12 +82,12 @@ function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> })
{pendingRuns.map((run) => (
<div key={run.id as number} className="flex items-center justify-between bg-[var(--dg-bg-tertiary)] rounded px-3 py-1.5">
<div className="flex items-center gap-2 text-xs">
<Clock className="h-3 w-3 text-amber-400" />
<Clock className="h-3 w-3 dg-text-yellow" />
<span className="text-[var(--dg-text-secondary)] font-mono">#{String(run.build_number ?? run.id ?? '')}</span>
<span className="text-[var(--dg-text-secondary)]">{String(run.branch || '-')}</span>
<span className="text-[var(--dg-text-secondary)] opacity-50">{String(run.triggered_by || '-')}</span>
</div>
<Button variant="ghost" size="sm" className="h-6 text-xs text-red-400 hover:text-red-300" onClick={() => handleCancel(run.id as number)}>
<Button variant="ghost" size="sm" className="h-6 text-xs dg-text-red hover:dg-text-red" onClick={() => handleCancel(run.id as number)}>
<XCircle className="h-3 w-3 mr-1" />取消
</Button>
</div>
@@ -100,10 +100,10 @@ function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> })
{queueIds.map((id) => (
<div key={id} className="flex items-center justify-between bg-[var(--dg-bg-tertiary)] rounded px-3 py-1.5">
<div className="flex items-center gap-2 text-xs">
<Clock className="h-3 w-3 text-amber-400" />
<Clock className="h-3 w-3 dg-text-yellow" />
<span className="text-[var(--dg-text-muted)] font-mono">Run #{id}</span>
</div>
<Button variant="ghost" size="sm" className="h-6 text-xs text-red-400 hover:text-red-300" onClick={() => handleCancel(id)}>
<Button variant="ghost" size="sm" className="h-6 text-xs dg-text-red hover:dg-text-red" onClick={() => handleCancel(id)}>
<XCircle className="h-3 w-3 mr-1" />取消
</Button>
</div>
@@ -160,19 +160,19 @@ export function PipelineRunPanel({ pipeline, pipelineRuns, isLoadingRuns, onStop
<td className="px-4 py-2 font-medium text-[var(--dg-text-primary)]">#{String(r.build_number ?? r.id ?? '')}</td>
<td className="px-4 py-2">
{r.status === 'success' ? (
<Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30 text-[11px]">
<Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30 text-[11px]">
<CheckCircle className="h-3 w-3 mr-0.5" />成功
</Badge>
) : r.status === 'failed' ? (
<Badge className="bg-red-500/20 text-red-400 border-red-500/30 text-[11px]">
<Badge className="bg-red-500/20 dg-text-red border-red-500/30 text-[11px]">
<XCircle className="h-3 w-3 mr-0.5" />失败
</Badge>
) : r.status === 'running' ? (
<Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 text-[11px]">
<Badge className="bg-blue-500/20 dg-text-blue border-blue-500/30 text-[11px]">
<Loader2 className="h-3 w-3 animate-spin mr-0.5" />执行中
</Badge>
) : r.status === 'cancelled' ? (
<Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30 text-[11px]">
<Badge className="bg-yellow-500/20 dg-text-yellow border-yellow-500/30 text-[11px]">
<StopCircle className="h-3 w-3 mr-0.5" />已停止
</Badge>
) : (
@@ -186,11 +186,11 @@ export function PipelineRunPanel({ pipeline, pipelineRuns, isLoadingRuns, onStop
</td>
<td className="px-4 py-2 text-right">
<div className="flex items-center justify-end gap-1">
<Button variant="ghost" size="sm" className="h-7 text-xs text-blue-400 hover:text-blue-300" onClick={() => handleViewLog(r)}>
<Button variant="ghost" size="sm" className="h-7 text-xs dg-text-blue hover:text-blue-300" onClick={() => handleViewLog(r)}>
<FileText className="h-3.5 w-3.5 mr-1" />日志
</Button>
{(r.status === 'running' || r.status === 'pending') && (
<Button variant="ghost" size="sm" className="h-7 text-xs text-red-400 hover:text-red-300" onClick={() => onStopRun(r.id as number | string)}>
<Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red hover:dg-text-red" onClick={() => onStopRun(r.id as number | string)}>
<StopCircle className="h-3.5 w-3.5 mr-1" />停止
</Button>
)}
@@ -215,14 +215,14 @@ export function PipelineRunPanel({ pipeline, pipelineRuns, isLoadingRuns, onStop
<span>分支: {String(logRun?.branch || '-')}</span>
<span>耗时: {fmtDuration(logRun?.duration as number | undefined)}</span>
</div>
<div className="bg-slate-950 rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs">
<div className="bg-[var(--dg-bg-primary)] rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs">
{logs.length === 0 ? (
<div className="text-slate-500 py-4 text-center">暂无日志</div>
<div className="dg-text-muted py-4 text-center">暂无日志</div>
) : (
logs.map((l, i) => (
<div key={i} className="flex gap-2 py-0.5">
<span className="text-slate-500 shrink-0">[{l.time}]</span>
<span className={l.level === 'error' ? 'text-red-400' : l.level === 'warn' ? 'text-yellow-400' : l.level === 'success' ? 'text-green-400' : 'text-slate-300'}>
<span className="dg-text-muted shrink-0">[{l.time}]</span>
<span className={l.level === 'error' ? 'dg-text-red' : l.level === 'warn' ? 'dg-text-yellow' : l.level === 'success' ? 'dg-text-green' : 'text-[var(--dg-text-secondary)]'}>
{l.level === 'success' ? '✓' : l.level === 'error' ? '✗' : l.level === 'warn' ? '!' : '>'} {l.message}
</span>
</div>
frontend/src/components/deploy/releaseHelpers.tsx
+10 -10
View File
@@ -14,42 +14,42 @@ export function getStatusBadge( status: string) {
switch (status) {
case 'success':
return (
<Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
<Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
<CheckCircle className="h-3 w-3 mr-1" />
成功
</Badge>
);
case 'failed':
return (
<Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
<Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10">
<XCircle className="h-3 w-3 mr-1" />
失败
</Badge>
);
case 'deploying':
return (
<Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
<Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10 animate-pulse">
<Loader2 className="h-3 w-3 mr-1 animate-spin" />
发布中
</Badge>
);
case 'building':
return (
<Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
<Badge variant="outline" className="border-amber-500/30 dg-text-yellow bg-amber-500/10">
<Loader2 className="h-3 w-3 mr-1 animate-spin" />
构建中
</Badge>
);
case 'rolled_back':
return (
<Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary bg-[var(--dg-bg-active)]/10">
<RotateCcw className="h-3 w-3 mr-1" />
已回滚
</Badge>
);
case 'pending':
return (
<Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary bg-[var(--dg-bg-active)]/10">
<Clock className="h-3 w-3 mr-1" />
待发布
</Badge>
@@ -62,10 +62,10 @@ export function getStatusBadge( status: string) {
// 环境徽章 // Logan.Li
export function getEnvBadge( env: string) {
const colors: Record<string, string> = {
dev: 'border-slate-500/30 text-slate-400 bg-slate-500/10',
test: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
staging: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
prod: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
dev: 'border-[var(--dg-border)] dg-text-secondary bg-[var(--dg-bg-active)]/10',
test: 'border-blue-500/30 dg-text-blue bg-blue-500/10',
staging: 'border-amber-500/30 dg-text-yellow bg-amber-500/10',
prod: 'border-emerald-500/30 dg-text-green bg-emerald-500/10',
};
const labels: Record<string, string> = {
dev: '开发环境',
frontend/src/components/deploy/releaseManagerHelpers.tsx
+12 -12
View File
@@ -13,22 +13,22 @@ import {
// 环境配置（值与后端 oneof=dev test staging prod 一致） // Logan.Li
export const ENVIRONMENTS: Record<string, { label: string; color: string }> = {
dev: { label: '开发环境', color: 'border-blue-500/30 text-blue-400 bg-blue-500/10' },
test: { label: '测试环境', color: 'border-cyan-500/30 text-cyan-400 bg-cyan-500/10' },
staging: { label: '预发环境', color: 'border-amber-500/30 text-amber-400 bg-amber-500/10' },
prod: { label: '生产环境', color: 'border-red-500/30 text-red-400 bg-red-500/10' },
dev: { label: '开发环境', color: 'border-blue-500/30 dg-text-blue bg-blue-500/10' },
test: { label: '测试环境', color: 'border-cyan-500/30 dg-text-cyan bg-cyan-500/10' },
staging: { label: '预发环境', color: 'border-amber-500/30 dg-text-yellow bg-amber-500/10' },
prod: { label: '生产环境', color: 'border-red-500/30 dg-text-red bg-red-500/10' },
};
// 发布状态徽章（审批流：待审批/已审批/已驳回/发布中/发布成功/发布失败/已回滚） // Logan.Li
export function getStatusBadge( status: string) {
const map: Record<string, { icon: any; label: string; cls: string }> = {
pending: { icon: Clock, label: '待审批', cls: 'border-amber-500/30 text-amber-400 bg-amber-500/10' },
approved: { icon: Check, label: '已审批', cls: 'border-purple-500/30 text-purple-400 bg-purple-500/10' },
rejected: { icon: XCircle, label: '已驳回', cls: 'border-slate-500/30 text-slate-400 bg-slate-500/10' },
deploying: { icon: Loader2, label: '发布中', cls: 'border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse' },
success: { icon: CheckCircle, label: '发布成功', cls: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10' },
failed: { icon: XCircle, label: '发布失败', cls: 'border-red-500/30 text-red-400 bg-red-500/10' },
rolled_back: { icon: RotateCcw, label: '已回滚', cls: 'border-slate-500/30 text-slate-400 bg-slate-500/10' },
pending: { icon: Clock, label: '待审批', cls: 'border-amber-500/30 dg-text-yellow bg-amber-500/10' },
approved: { icon: Check, label: '已审批', cls: 'border-purple-500/30 dg-text-purple bg-purple-500/10' },
rejected: { icon: XCircle, label: '已驳回', cls: 'border-[var(--dg-border)] dg-text-secondary bg-[var(--dg-bg-active)]/10' },
deploying: { icon: Loader2, label: '发布中', cls: 'border-blue-500/30 dg-text-blue bg-blue-500/10 animate-pulse' },
success: { icon: CheckCircle, label: '发布成功', cls: 'border-emerald-500/30 dg-text-green bg-emerald-500/10' },
failed: { icon: XCircle, label: '发布失败', cls: 'border-red-500/30 dg-text-red bg-red-500/10' },
rolled_back: { icon: RotateCcw, label: '已回滚', cls: 'border-[var(--dg-border)] dg-text-secondary bg-[var(--dg-bg-active)]/10' },
};
const cfg = map[status];
if (!cfg) return null;
@@ -45,7 +45,7 @@ export function getStatusBadge( status: string) {
export function getEnvironmentBadge( env: string) {
const cfg = ENVIRONMENTS[env];
return (
<Badge variant="outline" className={cfg?.color || 'border-slate-500/30 text-slate-400'}>
<Badge variant="outline" className={cfg?.color || 'border-[var(--dg-border)] dg-text-secondary'}>
{cfg?.label || env}
</Badge>
);
frontend/src/components/kubernetes/CapacityPage.tsx
+51 -51
View File
@@ -1,6 +1,5 @@
import { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { useParams, useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
@@ -9,8 +8,10 @@ import {
import {
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import { RefreshCw, ChevronRight, BarChart3, Download, Cpu, HardDrive } from 'lucide-react';
import { RefreshCw, BarChart3, Download, Cpu, HardDrive } from 'lucide-react';
import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import type { JsonData } from '@/types/common';
export default function CapacityPage() {
@@ -70,71 +71,70 @@ export default function CapacityPage() {
const exportCSV = () => kubernetesApi.exportAsCSV(`capacity-${activeCluster}.csv`, rows);
return (
<div className="space-y-4">
<div className="flex items-center gap-2 text-sm text-slate-500">
<Link to="/kubernetes" className="hover:text-slate-300">集群</Link>
{activeCluster && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${activeCluster}`} className="hover:text-slate-300">{activeCluster}</Link></>}
<ChevronRight className="h-3 w-3" /><span className="text-slate-300">容量分析</span>
</div>
const clusterName = clusters.find((c: JsonData) => (c.code || String(c.id)) === activeCluster)?.name;
<div className="flex items-center justify-between flex-wrap gap-3">
<h2 className="text-lg font-semibold text-slate-100 flex items-center gap-2"><BarChart3 className="h-5 w-5 text-purple-400" />资源容量分析</h2>
<div className="flex items-center gap-2">
return (
<PageShell
variant="list"
title="资源容量分析"
subtitle={clusterName ? `${clusterName} · Deployment 资源请求与限制` : 'Deployment 资源请求与限制'}
icon={<BarChart3 className="h-5 w-5" />}
actions={(
<>
<Select value={activeCluster} onValueChange={v => { setActiveCluster(v); navigate(`/kubernetes/${v}/capacity`); }}>
<SelectTrigger className="w-40 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue /></SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
{clusters.map((c: JsonData) => <SelectItem key={c.id} value={c.code || String(c.id)} className="text-xs">{c.name || c.code}</SelectItem>)}
<SelectTrigger className="w-40 h-9 dg-input"><SelectValue /></SelectTrigger>
<SelectContent>
{clusters.map((c: JsonData) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name || c.code}</SelectItem>)}
</SelectContent>
</Select>
<Select value={selectedNs} onValueChange={setSelectedNs}>
<SelectTrigger className="w-32 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectItem value="all" className="text-xs">所有命名空间</SelectItem>
{namespaces.map(n => <SelectItem key={n} value={n} className="text-xs">{n}</SelectItem>)}
<SelectTrigger className="w-32 h-9 dg-input"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
<SelectContent>
<SelectItem value="all">所有命名空间</SelectItem>
{namespaces.map(n => <SelectItem key={n} value={n}>{n}</SelectItem>)}
</SelectContent>
</Select>
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 text-xs" onClick={loadCapacity} disabled={loading}>
<RefreshCw className={`h-3 w-3 mr-1 ${loading ? 'animate-spin' : ''}`} />刷新
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadCapacity} disabled={loading}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 text-xs" onClick={exportCSV}>
<Download className="h-3 w-3 mr-1" />CSV
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={exportCSV}>
<Download className="h-4 w-4 mr-1" />
CSV
</Button>
</div>
</div>
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-0">
</>
)}
>
<ContentPanel>
<Table>
<TableHeader><TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="text-slate-400">Deployment</TableHead>
<TableHead className="text-slate-400">命名空间</TableHead>
<TableHead className="text-slate-400">副本</TableHead>
<TableHead className="text-slate-400">容器</TableHead>
<TableHead className="text-slate-400"><Cpu className="h-3 w-3 inline mr-1" />CPU Req</TableHead>
<TableHead className="text-slate-400"><Cpu className="h-3 w-3 inline mr-1" />CPU Lim</TableHead>
<TableHead className="text-slate-400"><HardDrive className="h-3 w-3 inline mr-1" />Mem Req</TableHead>
<TableHead className="text-slate-400"><HardDrive className="h-3 w-3 inline mr-1" />Mem Lim</TableHead>
<TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">Deployment</TableHead>
<TableHead className="dg-text-secondary">命名空间</TableHead>
<TableHead className="dg-text-secondary">副本</TableHead>
<TableHead className="dg-text-secondary">容器</TableHead>
<TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU Req</TableHead>
<TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU Lim</TableHead>
<TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Mem Req</TableHead>
<TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Mem Lim</TableHead>
</TableRow></TableHeader>
<TableBody>
{rows.length === 0 ? (
<TableRow><TableCell colSpan={8} className="text-center text-slate-500 py-8">暂无数据{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
<TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-8">暂无数据{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
) : rows.map((r, i) => (
<TableRow key={`${r.deployment}-${r.container}-${i}`} className="border-slate-800 hover:bg-slate-800/30">
<TableCell className="font-medium text-slate-200 text-sm">{r.deployment}</TableCell>
<TableCell><Badge variant="outline" className="border-slate-700 text-slate-400 text-xs">{r.namespace}</Badge></TableCell>
<TableCell className="text-sm text-slate-300">{r.replicas}</TableCell>
<TableCell className="text-sm text-slate-400">{r.container}</TableCell>
<TableCell className={`text-sm ${r.cpu_req !== '-' ? 'text-blue-400' : 'text-slate-600'}`}>{r.cpu_req}</TableCell>
<TableCell className={`text-sm ${r.cpu_lim !== '-' ? 'text-cyan-400' : 'text-slate-600'}`}>{r.cpu_lim}</TableCell>
<TableCell className={`text-sm ${r.mem_req !== '-' ? 'text-emerald-400' : 'text-slate-600'}`}>{r.mem_req}</TableCell>
<TableCell className={`text-sm ${r.mem_lim !== '-' ? 'text-teal-400' : 'text-slate-600'}`}>{r.mem_lim}</TableCell>
<TableRow key={`${r.deployment}-${r.container}-${i}`} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<TableCell className="font-medium text-[var(--dg-text-primary)] text-sm">{r.deployment}</TableCell>
<TableCell><Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-xs">{r.namespace}</Badge></TableCell>
<TableCell className="text-sm text-[var(--dg-text-secondary)]">{r.replicas}</TableCell>
<TableCell className="text-sm dg-text-secondary">{r.container}</TableCell>
<TableCell className={`text-sm ${r.cpu_req !== '-' ? 'dg-text-blue' : 'dg-text-muted'}`}>{r.cpu_req}</TableCell>
<TableCell className={`text-sm ${r.cpu_lim !== '-' ? 'dg-text-cyan' : 'dg-text-muted'}`}>{r.cpu_lim}</TableCell>
<TableCell className={`text-sm ${r.mem_req !== '-' ? 'dg-text-green' : 'dg-text-muted'}`}>{r.mem_req}</TableCell>
<TableCell className={`text-sm ${r.mem_lim !== '-' ? 'text-teal-400' : 'dg-text-muted'}`}>{r.mem_lim}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</div>
</ContentPanel>
</PageShell>
);
}
frontend/src/components/kubernetes/ClusterComparePage.tsx
+56 -56
View File
@@ -84,9 +84,9 @@ export default function ClusterComparePage() {
]).filter(d => d.value > 0);
const statusColorMap: Record<string, string> = {
healthy: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
warning: 'bg-amber-500/15 text-amber-400 border-amber-500/30',
error: 'bg-red-500/15 text-red-400 border-red-500/30',
healthy: 'bg-emerald-500/15 dg-text-green border-emerald-500/30',
warning: 'bg-amber-500/15 dg-text-yellow border-amber-500/30',
error: 'bg-red-500/15 dg-text-red border-red-500/30',
};
// 格式化内存 (MB → GB)
@@ -105,24 +105,24 @@ export default function ClusterComparePage() {
};
return (
<div className="min-h-screen bg-slate-950 text-slate-100">
<div className="min-h-screen bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)]">
{/* Header */}
<div className="border-b border-slate-800/60 bg-slate-900/40 px-6 py-4 flex items-center justify-between sticky top-0 z-20 backdrop-blur">
<div className="border-b border-[var(--dg-border)]/60 bg-[var(--dg-bg-secondary)]/40 px-6 py-4 flex items-center justify-between sticky top-0 z-20 backdrop-blur">
<div className="flex items-center gap-3">
<Layers className="h-5 w-5 text-blue-400" />
<Layers className="h-5 w-5 dg-text-blue" />
<div>
<h1 className="text-lg font-semibold">多集群资源对比看板</h1>
<p className="text-xs text-slate-500">跨集群资源用量、节点分布、健康状态对比</p>
<p className="text-xs dg-text-muted">跨集群资源用量、节点分布、健康状态对比</p>
</div>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={loadData} disabled={loading}
className="border-slate-700 hover:bg-slate-800">
className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<RefreshCw className={`h-3.5 w-3.5 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
<Link to="/kubernetes">
<Button variant="outline" size="sm" className="border-slate-700 hover:bg-slate-800">
<Button variant="outline" size="sm" className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<Cloud className="h-3.5 w-3.5 mr-1.5" />集群列表
</Button>
</Link>
@@ -132,7 +132,7 @@ export default function ClusterComparePage() {
<div className="p-6 space-y-6 max-w-[1600px] mx-auto">
{error && (
<Card className="border-red-500/30 bg-red-500/5">
<CardContent className="py-3 text-sm text-red-400">⚠ {error}</CardContent>
<CardContent className="py-3 text-sm dg-text-red">⚠ {error}</CardContent>
</Card>
)}
@@ -148,12 +148,12 @@ export default function ClusterComparePage() {
/>
{clusters.length === 0 && !loading && (
<Card className="bg-slate-900/60 border-slate-800">
<Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
<CardContent className="py-12 text-center">
<Cloud className="h-12 w-12 text-slate-700 mx-auto mb-3" />
<p className="text-slate-500">暂无集群数据，请先添加 Kubernetes 集群并同步</p>
<Cloud className="h-12 w-12 dg-text-muted mx-auto mb-3" />
<p className="dg-text-muted">暂无集群数据，请先添加 Kubernetes 集群并同步</p>
<Link to="/kubernetes" className="inline-block mt-3">
<Button variant="outline" size="sm" className="border-slate-700">
<Button variant="outline" size="sm" className="border-[var(--dg-border)]">
去添加集群 <ChevronRight className="h-3.5 w-3.5 ml-1" />
</Button>
</Link>
@@ -165,10 +165,10 @@ export default function ClusterComparePage() {
<>
{/* 资源对比柱状图 + 使用率柱状图 */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card className="bg-slate-900/60 border-slate-800">
<Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
<CardContent className="p-5">
<div className="flex items-center gap-2 mb-4">
<Layers className="h-4 w-4 text-blue-400" />
<Layers className="h-4 w-4 dg-text-blue" />
<h3 className="text-sm font-semibold">资源数量对比</h3>
</div>
<ResponsiveContainer width="100%" height={280}>
@@ -187,10 +187,10 @@ export default function ClusterComparePage() {
</CardContent>
</Card>
<Card className="bg-slate-900/60 border-slate-800">
<Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
<CardContent className="p-5">
<div className="flex items-center gap-2 mb-4">
<Activity className="h-4 w-4 text-emerald-400" />
<Activity className="h-4 w-4 dg-text-green" />
<h3 className="text-sm font-semibold">CPU / 内存使用率对比</h3>
</div>
<ResponsiveContainer width="100%" height={280}>
@@ -211,10 +211,10 @@ export default function ClusterComparePage() {
{/* 雷达图 + 节点角色饼图 */}
{clusters.length >= 2 && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card className="bg-slate-900/60 border-slate-800">
<Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
<CardContent className="p-5">
<div className="flex items-center gap-2 mb-4">
<TrendingUp className="h-4 w-4 text-purple-400" />
<TrendingUp className="h-4 w-4 dg-text-purple" />
<h3 className="text-sm font-semibold">资源雷达对比</h3>
</div>
<ResponsiveContainer width="100%" height={320}>
@@ -238,10 +238,10 @@ export default function ClusterComparePage() {
</CardContent>
</Card>
<Card className="bg-slate-900/60 border-slate-800">
<Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
<CardContent className="p-5">
<div className="flex items-center gap-2 mb-4">
<Server className="h-4 w-4 text-amber-400" />
<Server className="h-4 w-4 dg-text-yellow" />
<h3 className="text-sm font-semibold">节点角色分布</h3>
</div>
{nodeRolePie.length > 0 ? (
@@ -260,7 +260,7 @@ export default function ClusterComparePage() {
</PieChart>
</ResponsiveContainer>
) : (
<div className="h-[320px] flex items-center justify-center text-slate-600 text-sm">无节点角色数据</div>
<div className="h-[320px] flex items-center justify-center dg-text-muted text-sm">无节点角色数据</div>
)}
</CardContent>
</Card>
@@ -268,64 +268,64 @@ export default function ClusterComparePage() {
)}
{/* 详细对比表格 */}
<Card className="bg-slate-900/60 border-slate-800">
<Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
<CardContent className="p-5">
<div className="flex items-center gap-2 mb-4">
<HardDrive className="h-4 w-4 text-cyan-400" />
<HardDrive className="h-4 w-4 dg-text-cyan" />
<h3 className="text-sm font-semibold">详细对比</h3>
<span className="text-xs text-slate-500 ml-2">点击行可进入集群概览</span>
<span className="text-xs dg-text-muted ml-2">点击行可进入集群概览</span>
</div>
<div className="overflow-x-auto">
<Table>
<TableHeader>
<TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="text-slate-400">集群</TableHead>
<TableHead className="text-slate-400">状态</TableHead>
<TableHead className="text-slate-400 text-right">节点</TableHead>
<TableHead className="text-slate-400 text-right">Pod</TableHead>
<TableHead className="text-slate-400 text-right">Deployment</TableHead>
<TableHead className="text-slate-400 text-right">Service</TableHead>
<TableHead className="text-slate-400 text-right">CPU 核数</TableHead>
<TableHead className="text-slate-400 text-right">内存</TableHead>
<TableHead className="text-slate-400 text-right">CPU 使用率</TableHead>
<TableHead className="text-slate-400 text-right">内存使用率</TableHead>
<TableHead className="text-slate-400">角色</TableHead>
<TableHead className="text-slate-400">同步时间</TableHead>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">集群</TableHead>
<TableHead className="dg-text-secondary">状态</TableHead>
<TableHead className="dg-text-secondary text-right">节点</TableHead>
<TableHead className="dg-text-secondary text-right">Pod</TableHead>
<TableHead className="dg-text-secondary text-right">Deployment</TableHead>
<TableHead className="dg-text-secondary text-right">Service</TableHead>
<TableHead className="dg-text-secondary text-right">CPU 核数</TableHead>
<TableHead className="dg-text-secondary text-right">内存</TableHead>
<TableHead className="dg-text-secondary text-right">CPU 使用率</TableHead>
<TableHead className="dg-text-secondary text-right">内存使用率</TableHead>
<TableHead className="dg-text-secondary">角色</TableHead>
<TableHead className="dg-text-secondary">同步时间</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{clusters.map((c: JsonData) => (
<TableRow key={c.id}
className="border-slate-800/50 hover:bg-slate-800/30 cursor-pointer"
className="border-[var(--dg-border)]/50 hover:bg-[var(--dg-bg-hover)] cursor-pointer"
onClick={() => navigate(`/kubernetes/${c.code}`)}
>
<TableCell>
<div className="font-medium text-slate-200">{c.name}</div>
<div className="text-xs text-slate-500">{c.code} · {c.api_server || '-'}</div>
<div className="font-medium text-[var(--dg-text-primary)]">{c.name}</div>
<div className="text-xs dg-text-muted">{c.code} · {c.api_server || '-'}</div>
</TableCell>
<TableCell>
<Badge variant="outline" className={`text-xs ${statusColorMap[c.status] || statusColorMap.error}`}>
{c.status === 'healthy' ? '✓ 健康' : c.status === 'warning' ? '⚠ 警告' : '✗ 异常'}
</Badge>
</TableCell>
<TableCell className="text-right font-mono text-slate-300">{c.node_count}</TableCell>
<TableCell className="text-right font-mono text-slate-300">{c.pod_count}</TableCell>
<TableCell className="text-right font-mono text-slate-300">{c.deployment_count}</TableCell>
<TableCell className="text-right font-mono text-slate-300">{c.service_count}</TableCell>
<TableCell className="text-right font-mono text-slate-300">{c.total_cpu_cores || '-'}</TableCell>
<TableCell className="text-right font-mono text-slate-300">{fmtMem(c.total_memory_mb)}</TableCell>
<TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.node_count}</TableCell>
<TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.pod_count}</TableCell>
<TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.deployment_count}</TableCell>
<TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.service_count}</TableCell>
<TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.total_cpu_cores || '-'}</TableCell>
<TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{fmtMem(c.total_memory_mb)}</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-1.5">
<span className="font-mono text-sm text-blue-400">{(c.cpu_usage || 0).toFixed(1)}%</span>
<div className="w-12 h-1.5 bg-slate-800 rounded-full overflow-hidden">
<span className="font-mono text-sm dg-text-blue">{(c.cpu_usage || 0).toFixed(1)}%</span>
<div className="w-12 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
<div className="h-full bg-blue-500 rounded-full" style={{ width: `${Math.min(c.cpu_usage || 0, 100)}%` }} />
</div>
</div>
</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-1.5">
<span className="font-mono text-sm text-emerald-400">{(c.memory_usage || 0).toFixed(1)}%</span>
<div className="w-12 h-1.5 bg-slate-800 rounded-full overflow-hidden">
<span className="font-mono text-sm dg-text-green">{(c.memory_usage || 0).toFixed(1)}%</span>
<div className="w-12 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
<div className="h-full bg-emerald-500 rounded-full" style={{ width: `${Math.min(c.memory_usage || 0, 100)}%` }} />
</div>
</div>
@@ -333,15 +333,15 @@ export default function ClusterComparePage() {
<TableCell>
<div className="flex items-center gap-1 text-xs">
{(c.master_count > 0) && (
<span className="text-emerald-400">M:{c.master_count}</span>
<span className="dg-text-green">M:{c.master_count}</span>
)}
{(c.worker_count > 0) && (
<span className="text-blue-400">W:{c.worker_count}</span>
<span className="dg-text-blue">W:{c.worker_count}</span>
)}
{!c.master_count && !c.worker_count && <span className="text-slate-600">-</span>}
{!c.master_count && !c.worker_count && <span className="dg-text-muted">-</span>}
</div>
</TableCell>
<TableCell className="text-xs text-slate-500">{fmtTime(c.last_sync_at)}</TableCell>
<TableCell className="text-xs dg-text-muted">{fmtTime(c.last_sync_at)}</TableCell>
</TableRow>
))}
</TableBody>
frontend/src/components/kubernetes/ClusterOverviewPage.tsx
+28 -60
View File
@@ -1,6 +1,5 @@
import { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
@@ -22,6 +21,9 @@ import {
import { kubernetesApi } from '@/api';
import { useToast } from '@/hooks/use-toast';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
const NAMESPACE_ICON: Record<string, React.ComponentType<Record<string, unknown>>> = {
@@ -79,66 +81,33 @@ export default function ClusterOverviewPage() {
};
return (
<div className="space-y-4">
{/* Breadcrumb */}
<div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
<Link to="/kubernetes" className="hover:text-[var(--dg-text-secondary)] transition-colors">集群</Link>
<ChevronRight className="h-3 w-3" />
<span className="text-[var(--dg-text-secondary)]">{clusterCode}</span>
</div>
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{clusterCode}</h1>
<p className="text-sm text-[var(--dg-text-muted)] mt-1">
集群概览
{clusterInfo?.version ? ` — Kubernetes ${clusterInfo.version}` : ''}
</p>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
onClick={loadData} disabled={loading}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
</Button>
</div>
</div>
{/* Stats cards */}
<div className="grid grid-cols-3 md:grid-cols-3 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-blue)]">{nodes.length}</p></div>
<Cpu className="h-8 w-8 opacity-30 text-[var(--dg-blue)]" />
</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-green)]">{namespaces.length}</p></div>
<Boxes className="h-8 w-8 opacity-30 text-[var(--dg-green)]" />
</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-lg font-bold text-[var(--dg-text-secondary)]">{clusterInfo?.version || '-'}</p></div>
<Server className="h-8 w-8 opacity-30 text-[var(--dg-text-secondary)]" />
</div>
</CardContent>
</Card>
</div>
{/* Nodes table */}
<PageShell
variant="default"
title={clusterCode || '集群概览'}
subtitle={clusterInfo?.version ? `集群概览 · Kubernetes ${clusterInfo.version}` : '集群概览'}
icon={<Server className="h-5 w-5" />}
metrics={!loading ? (
<StatStrip
items={[
{ label: '节点', value: nodes.length, color: 'blue' },
{ label: '命名空间', value: namespaces.length, color: 'green' },
{ label: '版本', value: clusterInfo?.version || '-', color: 'muted' },
]}
/>
) : undefined}
actions={(
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
)}
>
{/* 节点列表 // Logan.Li */}
<div>
<h2 className="text-lg font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
<Cpu className="h-4 w-4 text-[var(--dg-blue)]" />节点列表
</h2>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-0">
<ContentPanel>
<Table>
<TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -207,8 +176,7 @@ export default function ClusterOverviewPage() {
)}
</TableBody>
</Table>
</CardContent>
</Card>
</ContentPanel>
</div>
{/* Namespace list */}
@@ -241,6 +209,6 @@ export default function ClusterOverviewPage() {
})}
</div>
</div>
</div>
</PageShell>
);
}
frontend/src/components/kubernetes/DeploymentDetail.tsx
+10 -10
View File
@@ -123,10 +123,10 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
if (loading) {
return (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
<p className="text-slate-500 mt-3">加载中...</p>
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3">加载中...</p>
</CardContent>
</Card>
);
@@ -134,10 +134,10 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
if (!deployment) {
return (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-12 text-center">
<XCircle className="h-8 w-8 mx-auto text-red-400" />
<p className="text-slate-400 mt-3">未找到 Deployment: {deploymentName}</p>
<XCircle className="h-8 w-8 mx-auto dg-text-red" />
<p className="dg-text-secondary mt-3">未找到 Deployment: {deploymentName}</p>
<Button variant="outline" className="mt-4" onClick={onBack}>返回</Button>
</CardContent>
</Card>
@@ -173,14 +173,14 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
/>
<Tabs defaultValue="pods">
<TabsList className="bg-slate-800 border border-slate-700">
<TabsTrigger value="pods" className="data-[state=active]:bg-slate-700">
<TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
<TabsTrigger value="pods" className="data-[state=active]:bg-[var(--dg-bg-active)]">
Pod 列表 ({pods.length})
</TabsTrigger>
<TabsTrigger value="logs" className="data-[state=active]:bg-slate-700">
<TabsTrigger value="logs" className="data-[state=active]:bg-[var(--dg-bg-active)]">
<FileText className="h-4 w-4 mr-1" />日志
</TabsTrigger>
<TabsTrigger value="hpa" className="data-[state=active]:bg-slate-700">
<TabsTrigger value="hpa" className="data-[state=active]:bg-[var(--dg-bg-active)]">
<Gauge className="h-4 w-4 mr-1" />HPA ({hpas.length})
</TabsTrigger>
</TabsList>
frontend/src/components/kubernetes/DeploymentEditAdvanced.tsx
+61 -61
View File
@@ -320,10 +320,10 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
if (loading) {
return (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
<p className="text-slate-500 mt-3 text-sm">加载中...</p>
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3 text-sm">加载中...</p>
</CardContent>
</Card>
);
@@ -331,8 +331,8 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
if (!manifest) {
return (
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-8 text-center text-slate-500">
<Card className="dg-card">
<CardContent className="p-8 text-center dg-text-muted">
未获取到 manifest 数据，请使用 YAML 编辑模式直接修改。
</CardContent>
</Card>
@@ -342,20 +342,20 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
return (
<div className="space-y-4">
{/* 更新策略 */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<RefreshCw className="h-4 w-4 text-blue-400" />更新策略 (Strategy)
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<RefreshCw className="h-4 w-4 dg-text-blue" />更新策略 (Strategy)
</CardTitle>
</CardHeader>
<CardContent className="pt-0 space-y-3">
<div className="flex items-center gap-4">
<label className="flex items-center gap-1.5 text-xs text-slate-300 cursor-pointer">
<label className="flex items-center gap-1.5 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
<input type="radio" checked={strategyType === 'RollingUpdate'} onChange={() => setStrategyType('RollingUpdate')}
className="accent-blue-500" />
RollingUpdate（滚动更新）
</label>
<label className="flex items-center gap-1.5 text-xs text-slate-300 cursor-pointer">
<label className="flex items-center gap-1.5 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
<input type="radio" checked={strategyType === 'Recreate'} onChange={() => setStrategyType('Recreate')}
className="accent-blue-500" />
Recreate（重建）
@@ -364,14 +364,14 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
{strategyType === 'RollingUpdate' && (
<div className="grid grid-cols-2 gap-3">
<div>
<Label className="text-slate-500 text-xs">maxSurge（整数或百分比，超出期望副本数）</Label>
<Label className="dg-text-muted text-xs">maxSurge（整数或百分比，超出期望副本数）</Label>
<Input value={maxSurge} onChange={e => setMaxSurge(e.target.value)}
placeholder="25%" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
</div>
<div>
<Label className="text-slate-500 text-xs">maxUnavailable（整数或百分比，不可用上限）</Label>
<Label className="dg-text-muted text-xs">maxUnavailable（整数或百分比，不可用上限）</Label>
<Input value={maxUnavailable} onChange={e => setMaxUnavailable(e.target.value)}
placeholder="25%" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
</div>
</div>
)}
@@ -379,53 +379,53 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
</Card>
{/* 历史版本 / 进度 */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Clock className="h-4 w-4 text-amber-400" />历史版本 & 进度
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Clock className="h-4 w-4 dg-text-yellow" />历史版本 & 进度
</CardTitle>
</CardHeader>
<CardContent className="pt-0 grid grid-cols-2 gap-3">
<div>
<Label className="text-slate-500 text-xs">revisionHistoryLimit（保留 RS 历史）</Label>
<Label className="dg-text-muted text-xs">revisionHistoryLimit（保留 RS 历史）</Label>
<Input type="number" value={revisionHistoryLimit} onChange={e => setRevisionHistoryLimit(e.target.value)}
className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
className="h-8 mt-1 dg-input text-sm font-mono" />
</div>
<div>
<Label className="text-slate-500 text-xs">progressDeadlineSeconds（升级超时秒数）</Label>
<Label className="dg-text-muted text-xs">progressDeadlineSeconds（升级超时秒数）</Label>
<Input type="number" value={progressDeadlineSeconds} onChange={e => setProgressDeadlineSeconds(e.target.value)}
className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
className="h-8 mt-1 dg-input text-sm font-mono" />
</div>
</CardContent>
</Card>
{/* 容忍 (Tolerations) — 此前仅有状态无 UI // Logan.Li */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-sm text-slate-200">容忍 (Tolerations)</CardTitle>
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs"
<CardTitle className="text-sm text-[var(--dg-text-primary)]">容忍 (Tolerations)</CardTitle>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs"
onClick={() => setTolerations(prev => [...prev, { key: '', operator: 'Equal', value: '', effect: 'NoSchedule', tolerationSeconds: '' }])}>
<Plus className="h-3 w-3 mr-1" />添加
</Button>
</div>
</CardHeader>
<CardContent className="pt-0 space-y-2">
{tolerations.length === 0 && <p className="text-xs text-slate-600">未配置容忍</p>}
{tolerations.length === 0 && <p className="text-xs dg-text-muted">未配置容忍</p>}
{tolerations.map((t, i) => (
<div key={i} className="grid grid-cols-[1fr_80px_1fr_100px_80px_auto] gap-2 items-center">
<Input value={t.key} placeholder="key" onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, key: e.target.value } : x))}
className="h-7 bg-slate-800 border-slate-700 text-xs font-mono" />
className="h-7 dg-input text-xs font-mono" />
<select value={t.operator} onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, operator: e.target.value } : x))}
className="h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1">
className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1">
<option value="Equal">Equal</option>
<option value="Exists">Exists</option>
</select>
<Input value={t.value} placeholder="value" disabled={t.operator === 'Exists'}
onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, value: e.target.value } : x))}
className="h-7 bg-slate-800 border-slate-700 text-xs font-mono" />
className="h-7 dg-input text-xs font-mono" />
<select value={t.effect} onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, effect: e.target.value } : x))}
className="h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1">
className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1">
<option value="">任意</option>
<option value="NoSchedule">NoSchedule</option>
<option value="PreferNoSchedule">PreferNoSchedule</option>
@@ -433,8 +433,8 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
</select>
<Input value={t.tolerationSeconds} placeholder="秒" disabled={t.effect !== 'NoExecute'}
onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, tolerationSeconds: e.target.value } : x))}
className="h-7 bg-slate-800 border-slate-700 text-xs font-mono" />
<Button variant="ghost" size="icon" className="h-7 w-7 text-red-400" onClick={() => setTolerations(prev => prev.filter((_, idx) => idx !== i))}>
className="h-7 dg-input text-xs font-mono" />
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red" onClick={() => setTolerations(prev => prev.filter((_, idx) => idx !== i))}>
<Trash2 className="h-3 w-3" />
</Button>
</div>
@@ -457,17 +457,17 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
/>
{/* Pod 级别杂项 */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Settings className="h-4 w-4 text-slate-400" />Pod 级别
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Settings className="h-4 w-4 dg-text-secondary" />Pod 级别
</CardTitle>
</CardHeader>
<CardContent className="pt-0 grid grid-cols-2 gap-3">
<div>
<Label className="text-slate-500 text-xs">dnsPolicy</Label>
<Label className="dg-text-muted text-xs">dnsPolicy</Label>
<select value={dnsPolicy} onChange={e => setDnsPolicy(e.target.value)}
className="h-8 mt-1 w-full bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2">
className="h-8 mt-1 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2">
<option value="ClusterFirst">ClusterFirst</option>
<option value="ClusterFirstWithHostNet">ClusterFirstWithHostNet</option>
<option value="Default">Default</option>
@@ -475,57 +475,57 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
</select>
</div>
<div>
<Label className="text-slate-500 text-xs">restartPolicy</Label>
<Label className="dg-text-muted text-xs">restartPolicy</Label>
<select value={restartPolicy} onChange={e => setRestartPolicy(e.target.value)}
className="h-8 mt-1 w-full bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2">
className="h-8 mt-1 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2">
<option value="Always">Always</option>
<option value="OnFailure">OnFailure</option>
<option value="Never">Never</option>
</select>
</div>
<div>
<Label className="text-slate-500 text-xs">schedulerName</Label>
<Label className="dg-text-muted text-xs">schedulerName</Label>
<Input value={schedulerName} onChange={e => setSchedulerName(e.target.value)}
className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
className="h-8 mt-1 dg-input text-sm font-mono" />
</div>
<div>
<Label className="text-slate-500 text-xs">terminationGracePeriodSeconds</Label>
<Label className="dg-text-muted text-xs">terminationGracePeriodSeconds</Label>
<Input type="number" value={terminationGracePeriodSeconds} onChange={e => setTerminationGracePeriodSeconds(e.target.value)}
className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
className="h-8 mt-1 dg-input text-sm font-mono" />
</div>
<div className="col-span-2">
<Label className="text-slate-500 text-xs">serviceAccountName</Label>
<Label className="dg-text-muted text-xs">serviceAccountName</Label>
<Input value={serviceAccountName} onChange={e => setServiceAccountName(e.target.value)}
placeholder="default" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
placeholder="default" className="h-8 mt-1 dg-input text-sm font-mono" />
</div>
</CardContent>
</Card>
{/* Pod 安全上下文 */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Shield className="h-4 w-4 text-rose-400" />Pod 安全上下文 (securityContext)
</CardTitle>
</CardHeader>
<CardContent className="pt-0 grid grid-cols-2 gap-3">
<div>
<Label className="text-slate-500 text-xs">fsGroup</Label>
<Label className="dg-text-muted text-xs">fsGroup</Label>
<Input type="number" value={podFsGroup} onChange={e => setPodFsGroup(e.target.value)}
placeholder="1000" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
placeholder="1000" className="h-8 mt-1 dg-input text-sm font-mono" />
</div>
<div>
<Label className="text-slate-500 text-xs">runAsUser</Label>
<Label className="dg-text-muted text-xs">runAsUser</Label>
<Input type="number" value={podRunAsUser} onChange={e => setPodRunAsUser(e.target.value)}
placeholder="1000" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
placeholder="1000" className="h-8 mt-1 dg-input text-sm font-mono" />
</div>
<div>
<Label className="text-slate-500 text-xs">runAsGroup</Label>
<Label className="dg-text-muted text-xs">runAsGroup</Label>
<Input type="number" value={podRunAsGroup} onChange={e => setPodRunAsGroup(e.target.value)}
placeholder="1000" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
placeholder="1000" className="h-8 mt-1 dg-input text-sm font-mono" />
</div>
<div className="flex items-end pb-1">
<label className="flex items-center gap-2 text-xs text-slate-400 cursor-pointer">
<label className="flex items-center gap-2 text-xs dg-text-secondary cursor-pointer">
<input type="checkbox" checked={podRunAsNonRoot} onChange={e => setPodRunAsNonRoot(e.target.checked)}
className="accent-blue-500" />
runAsNonRoot
@@ -535,29 +535,29 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
</Card>
{/* 主机设置（M8 补全） */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Network className="h-4 w-4 text-cyan-400" />主机设置 (Host Namespace)
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Network className="h-4 w-4 dg-text-cyan" />主机设置 (Host Namespace)
</CardTitle>
</CardHeader>
<CardContent className="pt-0 grid grid-cols-2 gap-3">
<label className="flex items-center gap-2 text-xs text-slate-300 cursor-pointer">
<label className="flex items-center gap-2 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
<input type="checkbox" checked={hostNetwork} onChange={e => setHostNetwork(e.target.checked)}
className="accent-blue-500" />
hostNetwork（共享主机网络命名空间）
</label>
<label className="flex items-center gap-2 text-xs text-slate-300 cursor-pointer">
<label className="flex items-center gap-2 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
<input type="checkbox" checked={hostIPC} onChange={e => setHostIPC(e.target.checked)}
className="accent-blue-500" />
hostIPC（共享主机 IPC 命名空间）
</label>
<label className="flex items-center gap-2 text-xs text-slate-300 cursor-pointer">
<label className="flex items-center gap-2 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
<input type="checkbox" checked={hostPID} onChange={e => setHostPID(e.target.checked)}
className="accent-blue-500" />
hostPID（共享主机 PID 命名空间）
</label>
<label className="flex items-center gap-2 text-xs text-slate-300 cursor-pointer">
<label className="flex items-center gap-2 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
<input type="checkbox" checked={shareProcessNamespace} onChange={e => setShareProcessNamespace(e.target.checked)}
className="accent-blue-500" />
shareProcessNamespace（共享进程命名空间）
@@ -578,7 +578,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
{/* 操作栏 */}
<div className="flex justify-end gap-2 pt-2">
<Button variant="outline" className="border-slate-700 text-slate-400" onClick={onCancel}>取消</Button>
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
<Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
{saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
保存
frontend/src/components/kubernetes/DeploymentEditBasic.tsx
+57 -57
View File
@@ -136,10 +136,10 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
if (loading) {
return (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
<p className="text-slate-500 mt-3 text-sm">加载中...</p>
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3 text-sm">加载中...</p>
</CardContent>
</Card>
);
@@ -147,8 +147,8 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
if (!manifest) {
return (
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-8 text-center text-slate-500">
<Card className="dg-card">
<CardContent className="p-8 text-center dg-text-muted">
未获取到 manifest 数据，请使用 YAML 编辑模式直接修改。
</CardContent>
</Card>
@@ -158,10 +158,10 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
return (
<div className="space-y-4">
{/* 副本数 */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Hash className="h-4 w-4 text-blue-400" />
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Hash className="h-4 w-4 dg-text-blue" />
副本数 (Replicas)
</CardTitle>
</CardHeader>
@@ -172,64 +172,64 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
min={0}
value={replicas}
onChange={e => setReplicas(Math.max(0, Number(e.target.value) || 0))}
className="w-32 bg-slate-800 border-slate-700 text-slate-200"
className="w-32 dg-input"
/>
<span className="text-xs text-slate-500">期望运行的 Pod 实例数量</span>
<span className="text-xs dg-text-muted">期望运行的 Pod 实例数量</span>
</div>
</CardContent>
</Card>
{/* 基本标识 */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Lock className="h-4 w-4 text-slate-500" />
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Lock className="h-4 w-4 dg-text-muted" />
{isCreate ? '基本标识' : '基本标识（只读）'}
</CardTitle>
</CardHeader>
<CardContent className="pt-0 grid grid-cols-2 gap-4">
<div>
<Label className="text-slate-400 text-xs">名称 (name)</Label>
<Label className="dg-text-secondary text-xs">名称 (name)</Label>
<Input
value={isCreate ? resName : deploymentName}
readOnly={!isCreate}
onChange={e => isCreate && setResName(e.target.value)}
className={`mt-1 font-mono text-sm ${isCreate ? 'bg-slate-800 border-slate-700 text-slate-200' : 'bg-slate-950 border-slate-800 text-slate-500 cursor-not-allowed'}`}
className={`mt-1 font-mono text-sm ${isCreate ? 'dg-input' : 'bg-[var(--dg-bg-primary)] border-[var(--dg-border)] dg-text-muted cursor-not-allowed'}`}
/>
</div>
<div>
<Label className="text-slate-400 text-xs">命名空间 (namespace)</Label>
<Label className="dg-text-secondary text-xs">命名空间 (namespace)</Label>
<Input value={namespace} readOnly
className="mt-1 bg-slate-950 border-slate-800 text-slate-500 font-mono text-sm cursor-not-allowed" />
className="mt-1 bg-[var(--dg-bg-primary)] border-[var(--dg-border)] dg-text-muted font-mono text-sm cursor-not-allowed" />
</div>
</CardContent>
</Card>
{/* Labels */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Tags className="h-4 w-4 text-emerald-400" />
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Tags className="h-4 w-4 dg-text-green" />
标签 (Labels)
<Badge variant="outline" className="border-slate-700 text-slate-500 text-[10px]">{labels.length}</Badge>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-muted text-[10px]">{labels.length}</Badge>
</CardTitle>
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={addLabel}>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={addLabel}>
<Plus className="h-3 w-3 mr-1" />新增
</Button>
</div>
</CardHeader>
<CardContent className="pt-0 space-y-1.5">
{labels.length === 0 && <p className="text-[11px] text-slate-600">无标签</p>}
{labels.length === 0 && <p className="text-[11px] dg-text-muted">无标签</p>}
{labels.map((l, i) => (
<div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
<Input value={l.key} placeholder="app"
onChange={e => updateLabel(i, { key: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
<Input value={l.value} placeholder="nginx"
onChange={e => updateLabel(i, { value: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
<Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300"
className="dg-input font-mono text-xs h-8" />
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red"
onClick={() => removeLabel(i)}><Trash2 className="h-3.5 w-3.5" /></Button>
</div>
))}
@@ -237,31 +237,31 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
</Card>
{/* Selector */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Tags className="h-4 w-4 text-amber-400" />
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Tags className="h-4 w-4 dg-text-yellow" />
选择器 (Selector)
<Badge variant="outline" className="border-amber-700/50 text-amber-500 text-[10px]">⚠️ 需与模板标签一致</Badge>
</CardTitle>
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={addSelector}>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={addSelector}>
<Plus className="h-3 w-3 mr-1" />新增
</Button>
</div>
</CardHeader>
<CardContent className="pt-0 space-y-1.5">
<p className="text-[11px] text-amber-500/70 mb-1">Selector 决定哪些 Pod 归属此 Deployment。修改时必须确保与 Pod Template Labels 匹配，否则 Deployment 将无法管理 Pod。</p>
{selectorLabels.length === 0 && <p className="text-[11px] text-slate-600">无选择器</p>}
{selectorLabels.length === 0 && <p className="text-[11px] dg-text-muted">无选择器</p>}
{selectorLabels.map((s, i) => (
<div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
<Input value={s.key} placeholder="app"
onChange={e => updateSelector(i, { key: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
<Input value={s.value} placeholder="nginx"
onChange={e => updateSelector(i, { value: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
<Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300"
className="dg-input font-mono text-xs h-8" />
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red"
onClick={() => removeSelector(i)}><Trash2 className="h-3.5 w-3.5" /></Button>
</div>
))}
@@ -269,35 +269,35 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
</Card>
{/* Pod 模板标签 */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Tags className="h-4 w-4 text-cyan-400" />
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Tags className="h-4 w-4 dg-text-cyan" />
Pod 模板标签 (template.metadata.labels)
</CardTitle>
<div className="flex gap-1">
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={syncSelectorToTemplate}>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={syncSelectorToTemplate}>
从 Selector 同步
</Button>
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={addTemplateLabel}>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={addTemplateLabel}>
<Plus className="h-3 w-3 mr-1" />新增
</Button>
</div>
</div>
</CardHeader>
<CardContent className="pt-0 space-y-1.5">
<p className="text-[11px] text-slate-600 mb-1">Pod 模板标签必须包含 Selector 全部键值，否则 Deployment 无法管理 Pod</p>
{templateLabels.length === 0 && <p className="text-[11px] text-slate-600">无模板标签</p>}
<p className="text-[11px] dg-text-muted mb-1">Pod 模板标签必须包含 Selector 全部键值，否则 Deployment 无法管理 Pod</p>
{templateLabels.length === 0 && <p className="text-[11px] dg-text-muted">无模板标签</p>}
{templateLabels.map((l, i) => (
<div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
<Input value={l.key} placeholder="app"
onChange={e => updateTemplateLabel(i, { key: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
<Input value={l.value} placeholder="nginx"
onChange={e => updateTemplateLabel(i, { value: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
<Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300"
className="dg-input font-mono text-xs h-8" />
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red"
onClick={() => removeTemplateLabel(i)}><Trash2 className="h-3.5 w-3.5" /></Button>
</div>
))}
@@ -305,30 +305,30 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
</Card>
{/* Annotations */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<FileText className="h-4 w-4 text-purple-400" />
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<FileText className="h-4 w-4 dg-text-purple" />
注解 (Annotations)
<Badge variant="outline" className="border-slate-700 text-slate-500 text-[10px]">{annotations.length}</Badge>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-muted text-[10px]">{annotations.length}</Badge>
</CardTitle>
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={addAnnotation}>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={addAnnotation}>
<Plus className="h-3 w-3 mr-1" />新增
</Button>
</div>
</CardHeader>
<CardContent className="pt-0 space-y-1.5">
{annotations.length === 0 && <p className="text-[11px] text-slate-600">无注解</p>}
{annotations.length === 0 && <p className="text-[11px] dg-text-muted">无注解</p>}
{annotations.map((a, i) => (
<div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
<Input value={a.key} placeholder="deployment.kubernetes.io/revision"
onChange={e => updateAnnotation(i, { key: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
<Input value={a.value} placeholder="1"
onChange={e => updateAnnotation(i, { value: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
<Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300"
className="dg-input font-mono text-xs h-8" />
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red"
onClick={() => removeAnnotation(i)}><Trash2 className="h-3.5 w-3.5" /></Button>
</div>
))}
@@ -336,12 +336,12 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
</Card>
{/* 保存栏 */}
<div className="sticky bottom-0 bg-slate-950/80 backdrop-blur border-t border-slate-800 p-3 flex items-center justify-between">
<p className="text-[11px] text-slate-500">
保存将通过 <code className="text-slate-400">PUT application/yaml</code> 提交（自动剥离 status/managedFields 等只读字段）
<div className="sticky bottom-0 bg-[var(--dg-bg-primary)]/80 backdrop-blur border-t border-[var(--dg-border)] p-3 flex items-center justify-between">
<p className="text-[11px] dg-text-muted">
保存将通过 <code className="dg-text-secondary">PUT application/yaml</code> 提交（自动剥离 status/managedFields 等只读字段）
</p>
<div className="flex gap-2">
<Button variant="outline" className="border-slate-700 text-slate-400" onClick={onCancel}>取消</Button>
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
<Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
{saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
保存
frontend/src/components/kubernetes/DeploymentEditContainers.tsx
+22 -22
View File
@@ -110,18 +110,18 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
if (loading) {
return (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
<p className="text-slate-500 mt-3 text-sm">加载中...</p>
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3 text-sm">加载中...</p>
</CardContent>
</Card>
);
}
if (!manifest) {
return (
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-8 text-center text-slate-500">
<Card className="dg-card">
<CardContent className="p-8 text-center dg-text-muted">
未获取到 manifest 数据，请使用 YAML 编辑模式直接修改。
</CardContent>
</Card>
@@ -131,34 +131,34 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
return (
<div className="space-y-4">
{/* Pod 级别设置：镜像拉取凭证 */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<KeyRound className="h-4 w-4 text-amber-400" />
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<KeyRound className="h-4 w-4 dg-text-yellow" />
镜像拉取凭证 (imagePullSecrets)
<Badge variant="outline" className="border-slate-700 text-slate-500 text-[10px]">Pod 级别</Badge>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-muted text-[10px]">Pod 级别</Badge>
</CardTitle>
</CardHeader>
<CardContent className="pt-0 space-y-2">
<div className="flex items-center gap-2 flex-wrap">
{imagePullSecrets.map((sec, i) => (
<div key={i} className="flex items-center gap-1 bg-slate-800 rounded px-2 py-1">
<span className="text-xs text-slate-300 font-mono">{sec}</span>
<div key={i} className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] rounded px-2 py-1">
<span className="text-xs text-[var(--dg-text-secondary)] font-mono">{sec}</span>
<button onClick={() => setImagePullSecrets(prev => prev.filter((_, j) => j !== i))}
className="text-red-400 hover:text-red-300 ml-1"><Trash2 className="h-3 w-3" /></button>
className="dg-text-red hover:dg-text-red ml-1"><Trash2 className="h-3 w-3" /></button>
</div>
))}
{imagePullSecrets.length === 0 && <span className="text-[11px] text-slate-600">无</span>}
{imagePullSecrets.length === 0 && <span className="text-[11px] dg-text-muted">无</span>}
</div>
<div className="flex gap-2">
<Input placeholder="输入 Secret 名称后回车" className="bg-slate-800 border-slate-700 text-slate-200 text-xs h-8"
<Input placeholder="输入 Secret 名称后回车" className="dg-input text-xs h-8"
onKeyDown={(e) => {
if (e.key === 'Enter') {
const val = (e.target as HTMLInputElement).value.trim();
if (val) { setImagePullSecrets(prev => [...prev, val]); (e.target as HTMLInputElement).value = ''; }
}
}} />
<Button size="sm" variant="outline" className="h-8 border-slate-700 text-slate-300 text-xs"
<Button size="sm" variant="outline" className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs"
onClick={() => setImagePullSecrets(prev => [...prev, ''])}>
<Plus className="h-3 w-3 mr-1" />新增
</Button>
@@ -170,7 +170,7 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
<ContainerGroupSection
title="初始化容器"
description="在主容器启动前按顺序执行的容器，用于初始化环境"
icon={<Play className="h-4 w-4 text-purple-400" />}
icon={<Play className="h-4 w-4 dg-text-purple" />}
containers={initContainers}
accentColor="purple"
onAdd={addInit}
@@ -182,7 +182,7 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
<ContainerGroupSection
title="工作容器"
description="Deployment 运行的主容器，定义应用进程及其运行时配置"
icon={<Container className="h-4 w-4 text-blue-400" />}
icon={<Container className="h-4 w-4 dg-text-blue" />}
containers={containers}
accentColor="blue"
onAdd={addContainer}
@@ -192,13 +192,13 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
/>
{/* 保存栏 */}
<div className="sticky bottom-0 bg-slate-950/80 backdrop-blur border-t border-slate-800 p-3 flex items-center justify-between">
<div className="text-[11px] text-slate-500">
共 <span className="text-slate-300 font-semibold">{initContainers.length}</span> 个初始化容器 +
<span className="text-slate-300 font-semibold ml-1">{containers.length}</span> 个工作容器
<div className="sticky bottom-0 bg-[var(--dg-bg-primary)]/80 backdrop-blur border-t border-[var(--dg-border)] p-3 flex items-center justify-between">
<div className="text-[11px] dg-text-muted">
共 <span className="text-[var(--dg-text-secondary)] font-semibold">{initContainers.length}</span> 个初始化容器 +
<span className="text-[var(--dg-text-secondary)] font-semibold ml-1">{containers.length}</span> 个工作容器
</div>
<div className="flex gap-2">
<Button variant="outline" className="border-slate-700 text-slate-400" onClick={onCancel}>取消</Button>
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
<Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
{saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
保存
frontend/src/components/kubernetes/DeploymentEditService.tsx
+80 -80
View File
@@ -289,10 +289,10 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
if (loading) {
return (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
<p className="text-slate-500 mt-3 text-sm">加载中...</p>
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3 text-sm">加载中...</p>
</CardContent>
</Card>
);
@@ -301,20 +301,20 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
return (
<div className="space-y-4">
{/* Selector 提示 */}
<Card className="bg-slate-900/50 border-slate-800">
<Card className="dg-card">
<CardContent className="p-3">
<div className="flex items-center gap-2 text-xs text-slate-400">
<Network className="h-3.5 w-3.5 text-blue-400" />
<div className="flex items-center gap-2 text-xs dg-text-secondary">
<Network className="h-3.5 w-3.5 dg-text-blue" />
<span>选择器:</span>
<div className="flex flex-wrap gap-1">
{Object.entries(selectorLabels).map(([k, v]) => (
<code key={k} className="bg-slate-800 px-1.5 py-0.5 rounded text-slate-300 text-[11px]">{k}={v}</code>
<code key={k} className="bg-[var(--dg-bg-tertiary)] px-1.5 py-0.5 rounded text-[var(--dg-text-secondary)] text-[11px]">{k}={v}</code>
))}
{Object.keys(selectorLabels).length === 0 && (
<span className="text-slate-600 italic">（无 selector）</span>
<span className="dg-text-muted italic">（无 selector）</span>
)}
</div>
<Button size="sm" variant="ghost" className="h-6 ml-auto text-xs text-slate-400" onClick={load}>
<Button size="sm" variant="ghost" className="h-6 ml-auto text-xs dg-text-secondary" onClick={load}>
<RefreshCw className="h-3 w-3 mr-1" />刷新
</Button>
</div>
@@ -322,15 +322,15 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
</Card>
{/* Services */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Network className="h-4 w-4 text-blue-400" />
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Network className="h-4 w-4 dg-text-blue" />
Services
<Badge variant="outline" className="border-slate-700 text-slate-400">{matchedSvcs.length} 个关联</Badge>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{matchedSvcs.length} 个关联</Badge>
</CardTitle>
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs"
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs"
onClick={() => {
setSvcForm({ name: `${deploymentName}-svc`, type: 'ClusterIP', ports: [{ name: 'http', port: '8080', targetPort: '8080', protocol: 'TCP', nodePort: '' }] });
setShowCreate('service');
@@ -338,12 +338,12 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
<Plus className="h-3 w-3 mr-1" />创建 Service
</Button>
</div>
<p className="text-xs text-slate-500 mt-1">仅显示 selector 匹配此 Deployment 的关联 Service</p>
<p className="text-xs dg-text-muted mt-1">仅显示 selector 匹配此 Deployment 的关联 Service</p>
</CardHeader>
<CardContent className="pt-0">
{matchedSvcs.length === 0 && showCreate !== 'service' ? (
<div className="text-center py-6 text-slate-500 text-sm border border-dashed border-slate-800 rounded-lg">
<Network className="h-8 w-8 mx-auto mb-2 text-slate-700" />
<div className="text-center py-6 dg-text-muted text-sm border border-dashed border-[var(--dg-border)] rounded-lg">
<Network className="h-8 w-8 mx-auto mb-2 dg-text-muted" />
当前命名空间暂无关联 Service
</div>
) : (
@@ -351,18 +351,18 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{matchedSvcs.map(svc => {
const matched = selectorMatches(svc.selector);
return (
<div key={svc.name} className={`rounded-lg border p-3 ${matched ? 'border-blue-700/50 bg-blue-950/20' : 'border-slate-800 bg-slate-950/30'}`}>
<div key={svc.name} className={`rounded-lg border p-3 ${matched ? 'border-blue-700/50 bg-blue-950/20' : 'border-[var(--dg-border)] bg-[var(--dg-bg-primary)]/30'}`}>
<div className="flex items-center gap-2 flex-wrap">
{matched ? <CheckCircle className="h-4 w-4 text-blue-400" /> : <Network className="h-4 w-4 text-slate-500" />}
<span className="text-sm font-semibold text-slate-200">{svc.name}</span>
<Badge variant="outline" className="border-slate-700 text-slate-400 text-[10px]">{svc.type}</Badge>
{matched ? <CheckCircle className="h-4 w-4 dg-text-blue" /> : <Network className="h-4 w-4 dg-text-muted" />}
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{svc.name}</span>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{svc.type}</Badge>
{matched && <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-[10px]">关联</Badge>}
<code className="text-[11px] text-slate-500 ml-auto">{svc.clusterIP}</code>
<Button size="sm" variant="ghost" className="h-6 text-xs text-emerald-400"
<code className="text-[11px] dg-text-muted ml-auto">{svc.clusterIP}</code>
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green"
onClick={() => setVisualEditor({ resource: 'services', name: svc.name })}>
<Pencil className="h-3 w-3 mr-1" />编辑
</Button>
<Button size="sm" variant="ghost" className="h-6 w-6 p-0 text-red-400 hover:text-red-300"
<Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
title="删除 Service" onClick={() => deleteResource('service', svc.name)}>
<Trash2 className="h-3 w-3" />
</Button>
@@ -370,17 +370,17 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{/* Ports */}
<div className="mt-2 flex flex-wrap gap-1.5 text-[11px]">
{svc.ports.map((p, i) => (
<code key={i} className="bg-slate-800/60 px-1.5 py-0.5 rounded text-slate-300">
{p.name && <span className="text-slate-500">{p.name}: </span>}
<code key={i} className="bg-[var(--dg-bg-tertiary)]/60 px-1.5 py-0.5 rounded text-[var(--dg-text-secondary)]">
{p.name && <span className="dg-text-muted">{p.name}: </span>}
{p.port}→{p.targetPort}{p.nodePort ? `/NodePort:${p.nodePort}` : ''}/{p.protocol}
</code>
))}
</div>
{/* Selector */}
<div className="mt-1 flex flex-wrap gap-1 text-[10px]">
<span className="text-slate-600">selector:</span>
<span className="dg-text-muted">selector:</span>
{Object.entries(svc.selector).map(([k, v]) => (
<code key={k} className="text-slate-500">{k}={v}</code>
<code key={k} className="dg-text-muted">{k}={v}</code>
))}
</div>
</div>
@@ -399,15 +399,15 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{/* 基本信息 */}
<div className="grid grid-cols-2 gap-2">
<div>
<Label className="text-slate-500 text-[11px]">名称</Label>
<Label className="dg-text-muted text-[11px]">名称</Label>
<Input value={svcForm.name} onChange={e => setSvcForm(s => ({ ...s, name: e.target.value }))}
placeholder={`${deploymentName}-svc`}
className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div>
<div>
<Label className="text-slate-500 text-[11px]">类型</Label>
<Label className="dg-text-muted text-[11px]">类型</Label>
<select value={svcForm.type} onChange={e => setSvcForm(s => ({ ...s, type: e.target.value }))}
className="h-7 mt-0.5 w-full bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2">
className="h-7 mt-0.5 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2">
<option value="ClusterIP">ClusterIP</option>
<option value="NodePort">NodePort</option>
</select>
@@ -416,15 +416,15 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{/* 快速预设 */}
<div>
<Label className="text-slate-500 text-[11px] mb-1 block">快速添加常用端口</Label>
<Label className="dg-text-muted text-[11px] mb-1 block">快速添加常用端口</Label>
<div className="flex gap-1.5">
{PORT_PRESETS.map(p => (
<button key={p.name} onClick={() => addPort(p)}
className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-medium
bg-slate-800 border border-slate-700 text-slate-300 hover:border-blue-500/50 hover:text-blue-300 transition-colors">
bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:border-blue-500/50 hover:text-blue-300 transition-colors">
<Zap className="h-2.5 w-2.5" />
{p.label}
<span className="text-slate-500 text-[9px]">{p.protocol} {p.port}:{p.targetPort}</span>
<span className="dg-text-muted text-[9px]">{p.protocol} {p.port}:{p.targetPort}</span>
</button>
))}
</div>
@@ -432,63 +432,63 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{/* 端口列表 */}
<div className="space-y-2">
<Label className="text-slate-500 text-[11px]">
端口配置 <span className="text-slate-600">({svcForm.ports.length} 个端口)</span>
<Label className="dg-text-muted text-[11px]">
端口配置 <span className="dg-text-muted">({svcForm.ports.length} 个端口)</span>
</Label>
{svcForm.ports.map((p, i) => (
<div key={i} className="flex items-center gap-1.5 p-2 rounded bg-slate-800/50 border border-slate-700/50">
<div key={i} className="flex items-center gap-1.5 p-2 rounded bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]/50">
{/* 名称 */}
<Input value={p.name} onChange={e => updatePort(i, 'name', e.target.value)}
placeholder="http"
className="h-7 w-[72px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
{/* 协议 */}
<select value={p.protocol} onChange={e => updatePort(i, 'protocol', e.target.value)}
className="h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5 w-16">
className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5 w-16">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
</select>
{/* port → targetPort */}
<Input value={p.port} onChange={e => updatePort(i, 'port', e.target.value)}
type="number" placeholder="port"
className="h-7 w-[72px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
<span className="text-slate-600 text-[10px]">→</span>
className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
<span className="dg-text-muted text-[10px]">→</span>
<Input value={p.targetPort} onChange={e => updatePort(i, 'targetPort', e.target.value)}
type="number" placeholder="targetPort"
className="h-7 w-[72px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
{/* NodePort (仅 NodePort 类型) */}
{svcForm.type === 'NodePort' && (
<Input value={p.nodePort} onChange={e => updatePort(i, 'nodePort', e.target.value)}
type="number" placeholder="30000-32767"
className="h-7 w-[80px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
className="h-7 w-[80px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
)}
{/* 删除 */}
<Button size="icon" variant="ghost" className="h-6 w-6 text-slate-500 hover:text-red-400"
<Button size="icon" variant="ghost" className="h-6 w-6 dg-text-muted hover:dg-text-red"
onClick={() => removePort(i)} disabled={svcForm.ports.length <= 1}>
<Minus className="h-3 w-3" />
</Button>
</div>
))}
{/* 添加自定义端口 */}
<Button size="sm" variant="outline" className="h-7 w-full border-dashed border-slate-700 text-slate-400 text-xs"
<Button size="sm" variant="outline" className="h-7 w-full border-dashed border-[var(--dg-border)] dg-text-secondary text-xs"
onClick={() => addPort()}>
<Plus className="h-3 w-3 mr-1" />添加自定义端口
</Button>
</div>
{/* Selector 预览 */}
<div className="text-[10px] text-slate-500 border-t border-slate-700/50 pt-2">
<span className="text-slate-600">selector (自动检测): </span>
<div className="text-[10px] dg-text-muted border-t border-[var(--dg-border)]/50 pt-2">
<span className="dg-text-muted">selector (自动检测): </span>
{Object.keys(selectorLabels).length > 0 ? (
Object.entries(selectorLabels).map(([k, v]) => (
<code key={k} className="bg-slate-800 px-1 py-0.5 rounded text-slate-400 ml-1">{k}={v}</code>
<code key={k} className="bg-[var(--dg-bg-tertiary)] px-1 py-0.5 rounded dg-text-secondary ml-1">{k}={v}</code>
))
) : (
<span className="text-slate-600 italic">未检测到</span>
<span className="dg-text-muted italic">未检测到</span>
)}
</div>
<div className="flex justify-end gap-2 pt-1">
<Button size="sm" variant="ghost" className="h-7 text-xs text-slate-400" onClick={() => setShowCreate(null)}>取消</Button>
<Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={() => setShowCreate(null)}>取消</Button>
<Button size="sm" className="h-7 bg-blue-600 hover:bg-blue-700 text-xs" onClick={createService}>创建</Button>
</div>
</div>
@@ -497,15 +497,15 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
</Card>
{/* Ingresses */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<GitBranch className="h-4 w-4 text-purple-400" />
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<GitBranch className="h-4 w-4 dg-text-purple" />
Ingresses (应用路由)
<Badge variant="outline" className="border-slate-700 text-slate-400">{matchedIngs.length}/{ingresses.length}</Badge>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{matchedIngs.length}/{ingresses.length}</Badge>
</CardTitle>
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs"
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs"
onClick={() => {
setIngForm(s => ({ ...s, name: `${deploymentName}-ingress`, svcPort: String(matchedSvcs[0]?.ports[0]?.port || 80) }));
setShowCreate('ingress');
@@ -513,12 +513,12 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
<Plus className="h-3 w-3 mr-1" />创建 Ingress
</Button>
</div>
<p className="text-xs text-slate-500 mt-1">backend 指向关联 Service 的 Ingress 自动高亮</p>
<p className="text-xs dg-text-muted mt-1">backend 指向关联 Service 的 Ingress 自动高亮</p>
</CardHeader>
<CardContent className="pt-0">
{ingresses.length === 0 ? (
<div className="text-center py-6 text-slate-500 text-sm border border-dashed border-slate-800 rounded-lg">
<GitBranch className="h-8 w-8 mx-auto mb-2 text-slate-700" />
<div className="text-center py-6 dg-text-muted text-sm border border-dashed border-[var(--dg-border)] rounded-lg">
<GitBranch className="h-8 w-8 mx-auto mb-2 dg-text-muted" />
当前命名空间暂无 Ingress
</div>
) : (
@@ -526,17 +526,17 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{ingresses.map(ing => {
const matched = matchedIngs.includes(ing);
return (
<div key={ing.name} className={`rounded-lg border p-3 ${matched ? 'border-purple-700/50 bg-purple-950/20' : 'border-slate-800 bg-slate-950/30'}`}>
<div key={ing.name} className={`rounded-lg border p-3 ${matched ? 'border-purple-700/50 bg-purple-950/20' : 'border-[var(--dg-border)] bg-[var(--dg-bg-primary)]/30'}`}>
<div className="flex items-center gap-2 flex-wrap">
{matched ? <CheckCircle className="h-4 w-4 text-purple-400" /> : <GitBranch className="h-4 w-4 text-slate-500" />}
<span className="text-sm font-semibold text-slate-200">{ing.name}</span>
<Badge variant="outline" className="border-slate-700 text-slate-400 text-[10px]">{ing.className}</Badge>
{matched ? <CheckCircle className="h-4 w-4 dg-text-purple" /> : <GitBranch className="h-4 w-4 dg-text-muted" />}
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{ing.name}</span>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{ing.className}</Badge>
{matched && <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-[10px]">关联</Badge>}
<Button size="sm" variant="ghost" className="h-6 text-xs text-emerald-400 ml-auto"
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green ml-auto"
onClick={() => setVisualEditor({ resource: 'ingresses', name: ing.name })}>
<Pencil className="h-3 w-3 mr-1" />编辑
</Button>
<Button size="sm" variant="ghost" className="h-6 w-6 p-0 text-red-400 hover:text-red-300"
<Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
title="删除 Ingress" onClick={() => deleteResource('ingress', ing.name)}>
<Trash2 className="h-3 w-3" />
</Button>
@@ -545,10 +545,10 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
<div className="mt-2 space-y-1 text-[11px]">
{ing.rules.map((r, i) => (
<div key={i} className="flex items-start gap-1.5">
<Server className="h-3 w-3 text-slate-500 mt-0.5" />
<code className="text-slate-300">{r.host || '*'}</code>
<Server className="h-3 w-3 dg-text-muted mt-0.5" />
<code className="text-[var(--dg-text-secondary)]">{r.host || '*'}</code>
{r.paths.map((p, j) => (
<code key={j} className="bg-slate-800/60 px-1.5 py-0.5 rounded text-slate-400">
<code key={j} className="bg-[var(--dg-bg-tertiary)]/60 px-1.5 py-0.5 rounded dg-text-secondary">
{p.path} → {(p as any).backend?.service}:{(p as any).backend?.port}
</code>
))}
@@ -569,37 +569,37 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<Label className="text-slate-500 text-[11px]">名称</Label>
<Label className="dg-text-muted text-[11px]">名称</Label>
<Input value={ingForm.name} onChange={e => setIngForm(s => ({ ...s, name: e.target.value }))}
placeholder={`${deploymentName}-ingress`}
className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div>
<div>
<Label className="text-slate-500 text-[11px]">ingressClassName</Label>
<Label className="dg-text-muted text-[11px]">ingressClassName</Label>
<Input value={ingForm.className} onChange={e => setIngForm(s => ({ ...s, className: e.target.value }))}
placeholder="nginx"
className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div>
<div>
<Label className="text-slate-500 text-[11px]">host (域名)</Label>
<Label className="dg-text-muted text-[11px]">host (域名)</Label>
<Input value={ingForm.host} onChange={e => setIngForm(s => ({ ...s, host: e.target.value }))}
placeholder="app.example.com"
className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div>
<div>
<Label className="text-slate-500 text-[11px]">path</Label>
<Label className="dg-text-muted text-[11px]">path</Label>
<Input value={ingForm.path} onChange={e => setIngForm(s => ({ ...s, path: e.target.value }))}
placeholder="/"
className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div>
<div>
<Label className="text-slate-500 text-[11px]">Service 端口</Label>
<Label className="dg-text-muted text-[11px]">Service 端口</Label>
<Input type="number" value={ingForm.svcPort} onChange={e => setIngForm(s => ({ ...s, svcPort: e.target.value }))}
className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div>
</div>
<div className="flex justify-end gap-2 pt-1">
<Button size="sm" variant="ghost" className="h-7 text-xs text-slate-400" onClick={() => setShowCreate(null)}>取消</Button>
<Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={() => setShowCreate(null)}>取消</Button>
<Button size="sm" className="h-7 bg-purple-600 hover:bg-purple-700 text-xs" onClick={createIngress}>创建</Button>
</div>
</div>
@@ -619,7 +619,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
)}
<div className="flex justify-end gap-2 pt-2">
<Button size="sm" variant="outline" className="h-7 text-xs border-slate-700 text-slate-400" onClick={onCancel}>返回查看</Button>
<Button size="sm" variant="outline" className="h-7 text-xs border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>返回查看</Button>
</div>
</div>
);
frontend/src/components/kubernetes/DeploymentEditStorage.tsx
+39 -39
View File
@@ -39,11 +39,11 @@ interface Props {
}
const VOLUME_TYPES: { key: VolumeForm['type']; label: string; icon: typeof HardDrive; color: string }[] = [
{ key: 'persistentVolumeClaim', label: '存储卷声明', icon: Database, color: 'text-emerald-400' },
{ key: 'emptyDir', label: '临时目录(EmptyDir)', icon: Disc, color: 'text-slate-400' },
{ key: 'hostPath', label: 'HostPath', icon: HardDrive, color: 'text-amber-400' },
{ key: 'nfs', label: 'NFS', icon: Server, color: 'text-purple-400' },
{ key: 'configMap', label: '配置字典', icon: File, color: 'text-blue-400' },
{ key: 'persistentVolumeClaim', label: '存储卷声明', icon: Database, color: 'dg-text-green' },
{ key: 'emptyDir', label: '临时目录(EmptyDir)', icon: Disc, color: 'dg-text-secondary' },
{ key: 'hostPath', label: 'HostPath', icon: HardDrive, color: 'dg-text-yellow' },
{ key: 'nfs', label: 'NFS', icon: Server, color: 'dg-text-purple' },
{ key: 'configMap', label: '配置字典', icon: File, color: 'dg-text-blue' },
{ key: 'secret', label: '密文', icon: Lock, color: 'text-rose-400' },
];
@@ -162,10 +162,10 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
if (loading) {
return (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
<p className="text-slate-500 mt-3 text-sm">加载中...</p>
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3 text-sm">加载中...</p>
</CardContent>
</Card>
);
@@ -173,8 +173,8 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
if (!manifest) {
return (
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-8 text-center text-slate-500">未获取到 manifest 数据，请使用 YAML 编辑模式。</CardContent>
<Card className="dg-card">
<CardContent className="p-8 text-center dg-text-muted">未获取到 manifest 数据，请使用 YAML 编辑模式。</CardContent>
</Card>
);
}
@@ -192,26 +192,26 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
onSaved={() => { loadResources(); setCreateResource(null); }}
/>
)}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between gap-3">
<div>
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Database className="h-4 w-4 text-emerald-400" />
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Database className="h-4 w-4 dg-text-green" />
数据卷
<Badge variant="outline" className="border-slate-700 text-slate-400">{entries.length}</Badge>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{entries.length}</Badge>
</CardTitle>
<p className="text-[11px] text-slate-500 mt-1">定义数据卷，并将其挂载到工作负载的容器中</p>
<p className="text-[11px] dg-text-muted mt-1">定义数据卷，并将其挂载到工作负载的容器中</p>
</div>
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs shrink-0" onClick={addEntry}>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs shrink-0" onClick={addEntry}>
<Plus className="h-3 w-3 mr-1" />添加数据卷
</Button>
</div>
</CardHeader>
<CardContent className="pt-0 space-y-4">
{entries.length === 0 ? (
<div className="text-center py-10 text-slate-500 text-sm border border-dashed border-slate-800 rounded-lg">
<Database className="h-8 w-8 mx-auto mb-2 text-slate-700" />
<div className="text-center py-10 dg-text-muted text-sm border border-dashed border-[var(--dg-border)] rounded-lg">
<Database className="h-8 w-8 mx-auto mb-2 dg-text-muted" />
未配置数据卷，点击「添加数据卷」开始
</div>
) : entries.map((entry, i) => {
@@ -220,12 +220,12 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
const VIcon = vtype?.icon || Folder;
const selectValue = SELECTABLE_TYPES.has(vol.type) ? vol.type : 'emptyDir';
return (
<div key={i} className="bg-slate-950/60 border border-slate-800 rounded-lg">
<div key={i} className="bg-[var(--dg-bg-primary)]/60 border border-[var(--dg-border)] rounded-lg">
{/* 卷定义 */}
<div className="p-3 space-y-2.5 border-b border-slate-800/80">
<div className="p-3 space-y-2.5 border-b border-[var(--dg-border)]/80">
<div className="flex items-center gap-2 flex-wrap">
<VIcon className={`h-4 w-4 ${vtype?.color || 'text-slate-400'}`} />
<span className="text-xs text-slate-400 shrink-0">数据卷名称</span>
<VIcon className={`h-4 w-4 ${vtype?.color || 'dg-text-secondary'}`} />
<span className="text-xs dg-text-secondary shrink-0">数据卷名称</span>
<Input
value={vol.name}
onChange={(e) => {
@@ -237,7 +237,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
updateVolume(i, patch);
}}
placeholder="如 app-logs / fluent-bit-config"
className="h-8 w-44 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono"
className="h-8 w-44 dg-input text-sm font-mono"
/>
{/* 原生 select，避免 Radix Select 在 overflow 容器内无法下拉 // Logan.Li */}
<select
@@ -250,13 +250,13 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
if (type === 'persistentVolumeClaim' && resources.pvcs.length === 1) patch.pvcName = resources.pvcs[0];
updateVolume(i, patch);
}}
className="h-8 min-w-[168px] bg-slate-800 border border-slate-700 rounded-md text-xs text-slate-300 px-2"
className="h-8 min-w-[168px] bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-md text-xs text-[var(--dg-text-secondary)] px-2"
>
{VOLUME_TYPES.map((t) => (
<option key={t.key} value={t.key}>{t.label}</option>
))}
</select>
<Button size="icon" variant="ghost" className="h-8 w-8 text-red-400 ml-auto" onClick={() => removeEntry(i)}>
<Button size="icon" variant="ghost" className="h-8 w-8 dg-text-red ml-auto" onClick={() => removeEntry(i)}>
<Trash2 className="h-4 w-4" />
</Button>
</div>
@@ -280,34 +280,34 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
</div>
{/* 挂载到容器（支持一卷多容器，Kuboard 同卡） */}
<div className="px-3 py-2.5 bg-slate-900/40 space-y-2">
<div className="px-3 py-2.5 bg-[var(--dg-bg-secondary)]/40 space-y-2">
<div className="flex items-center justify-between gap-2">
<p className="text-[11px] text-slate-500 flex items-center gap-1.5">
<Container className="h-3.5 w-3.5 text-blue-400" />
<p className="text-[11px] dg-text-muted flex items-center gap-1.5">
<Container className="h-3.5 w-3.5 dg-text-blue" />
将上述数据卷挂载到容器
</p>
<Button size="sm" variant="ghost" className="h-6 px-2 text-[11px] text-slate-400 hover:text-slate-200" onClick={() => addMount(i)}>
<Button size="sm" variant="ghost" className="h-6 px-2 text-[11px] dg-text-secondary hover:text-[var(--dg-text-primary)]" onClick={() => addMount(i)}>
<Plus className="h-3 w-3 mr-0.5" />添加挂载
</Button>
</div>
{entry.mounts.map((mount, mi) => (
<div key={mi} className="space-y-2 rounded-md border border-slate-800/60 bg-slate-950/40 p-2.5">
<div key={mi} className="space-y-2 rounded-md border border-[var(--dg-border)]/60 bg-[var(--dg-bg-primary)]/40 p-2.5">
<div className="flex items-center gap-2 flex-wrap">
<select
value={mount.containerName}
onChange={(e) => updateMount(i, mi, { containerName: e.target.value })}
className="h-8 min-w-[140px] max-w-[280px] bg-slate-800 border border-slate-700 rounded-md text-sm text-slate-200 px-2 font-medium truncate"
className="h-8 min-w-[140px] max-w-[280px] bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-md text-sm text-[var(--dg-text-primary)] px-2 font-medium truncate"
>
{containers.length === 0 && <option value="">（无容器）</option>}
{containers.map((cn) => <option key={cn} value={cn}>{cn}</option>)}
</select>
<div className="flex items-center gap-1 bg-slate-800 rounded-lg p-0.5 border border-slate-700">
<div className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] rounded-lg p-0.5 border border-[var(--dg-border)]">
<button type="button" onClick={() => updateMount(i, mi, { readOnly: true })}
className={`px-2.5 py-1 rounded text-xs font-medium transition-all ${mount.readOnly ? 'bg-amber-500/20 text-amber-300' : 'text-slate-500 hover:text-slate-300'}`}>
className={`px-2.5 py-1 rounded text-xs font-medium transition-all ${mount.readOnly ? 'bg-amber-500/20 text-amber-300' : 'dg-text-muted hover:text-[var(--dg-text-secondary)]'}`}>
只读
</button>
<button type="button" onClick={() => updateMount(i, mi, { readOnly: false })}
className={`px-2.5 py-1 rounded text-xs font-medium transition-all ${!mount.readOnly ? 'bg-blue-500/20 text-blue-300' : 'text-slate-500 hover:text-slate-300'}`}>
className={`px-2.5 py-1 rounded text-xs font-medium transition-all ${!mount.readOnly ? 'bg-blue-500/20 text-blue-300' : 'dg-text-muted hover:text-[var(--dg-text-secondary)]'}`}>
读写
</button>
</div>
@@ -315,21 +315,21 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
value={mount.mountPath}
onChange={(e) => updateMount(i, mi, { mountPath: e.target.value })}
placeholder="挂载路径 /bitcloud/app/.../logs"
className="h-8 flex-1 min-w-[200px] bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono"
className="h-8 flex-1 min-w-[200px] dg-input text-sm font-mono"
/>
{entry.mounts.length > 1 && (
<Button size="icon" variant="ghost" className="h-8 w-8 text-red-400/70 shrink-0" onClick={() => removeMount(i, mi)}>
<Button size="icon" variant="ghost" className="h-8 w-8 dg-text-red/70 shrink-0" onClick={() => removeMount(i, mi)}>
<Trash2 className="h-3.5 w-3.5" />
</Button>
)}
</div>
<div className="flex items-center gap-2">
<span className="text-[11px] text-slate-500 shrink-0">子路径 subPath</span>
<span className="text-[11px] dg-text-muted shrink-0">子路径 subPath</span>
<Input
value={mount.subPath}
onChange={(e) => updateMount(i, mi, { subPath: e.target.value })}
placeholder="如 config.yaml（挂载单文件时填写）"
className="h-7 flex-1 max-w-md bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono"
className="h-7 flex-1 max-w-md dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
/>
</div>
</div>
@@ -342,7 +342,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
</Card>
<div className="flex justify-end gap-2 pt-2">
<Button variant="outline" className="border-slate-700 text-slate-400" onClick={onCancel}>取消</Button>
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
<Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
{saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
保存
frontend/src/components/kubernetes/DeploymentView.tsx
+1 -1
View File
@@ -233,7 +233,7 @@ export function DeploymentView(props: DeploymentViewProps) {
<Input
type="number" min={0} value={scaleValue}
onChange={e => setScaleValue(Math.max(0, Number(e.target.value)))}
className="w-16 h-7 text-center text-sm font-bold bg-slate-800 border-slate-700 text-slate-200"
className="w-16 h-7 text-center text-sm font-bold dg-input"
/>
<Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]"
disabled={scaleLoading}
frontend/src/components/kubernetes/DeploymentWorkload.tsx
+46 -132
View File
@@ -39,6 +39,7 @@ import { ActionModals } from './deployment-workload/ActionModals';
import { createEmptyManifest } from './resource-create-templates';
import { CREATE_DEPLOYMENT_SLUG, isCreateDeployment } from './deployment-constants';
import { extractContainers } from './deployment-detail/helpers';
import { PageShell } from '@/components/layout/PageShell';
import type { ActionModal, DeploymentWorkloadProps } from './deployment-workload/types';
export type { DeploymentWorkloadProps, WorkloadMode } from './deployment-workload/types';
@@ -283,161 +284,74 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
}
};
// ============ 渲染 ============
// ============ 渲染 // Logan.Li ============
if (loading) {
return (
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
<p className="text-slate-500 mt-3">加载中...</p>
</CardContent>
</Card>
<PageShell variant="workspace" title={deploymentName} subtitle={`${clusterCode} / ${namespace}`} loading loadingLabel="加载 Deployment..." actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>}>
{null}
</PageShell>
);
}
if (!deployment && !isCreate) {
return (
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-12 text-center">
<XCircle className="h-8 w-8 mx-auto text-red-400" />
<p className="text-slate-400 mt-3">未找到 Deployment: {deploymentName}</p>
<Button variant="outline" className="mt-4" onClick={onBack}>返回</Button>
</CardContent>
</Card>
<PageShell variant="default" title={deploymentName} subtitle={`${clusterCode} / ${namespace}`} actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>}>
<Card className="dg-card"><CardContent className="p-12 text-center"><XCircle className="h-8 w-8 mx-auto dg-text-red" /><p className="dg-text-secondary mt-3">未找到 Deployment: {deploymentName}</p></CardContent></Card>
</PageShell>
);
}
if (isCreate) {
const handleCreated = (updated?: any) => {
const name = updated?.metadata?.name;
if (name) {
navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/workload/view/Deployment/${name}`);
}
if (name) navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/workload/view/Deployment/${name}`);
};
return (
<div className="space-y-4">
<div className="flex items-center gap-3">
<Button variant="ghost" size="sm" className="text-slate-400" onClick={onBack}>
<ArrowLeft className="h-4 w-4 mr-1" />返回
</Button>
<div>
<h1 className="text-xl font-bold text-slate-100">新建 Deployment</h1>
<p className="text-xs text-slate-500 mt-0.5">{namespace} · {clusterCode}</p>
</div>
</div>
<EditModeContainer
clusterCode={clusterCode}
namespace={namespace}
deploymentName={CREATE_DEPLOYMENT_SLUG}
manifest={manifest}
isCreate
onSaved={handleCreated}
onCancel={onBack}
/>
</div>
<PageShell variant="workspace" title="新建 Deployment" subtitle={`${clusterCode} / ${namespace}`} actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>}>
<EditModeContainer clusterCode={clusterCode} namespace={namespace} deploymentName={CREATE_DEPLOYMENT_SLUG} manifest={manifest} isCreate onSaved={handleCreated} onCancel={onBack} />
</PageShell>
);
}
const ready = deployment.ready_replicas || deployment.readyReplicas || 0;
const total = deployment.replicas || 0;
const isHealthy = ready === total && total > 0;
const _viewBase = `/kubernetes/${clusterCode}/namespace/${namespace}/workload`;
const modeTabs = (
<div className="inline-flex rounded-md border border-[var(--dg-border)] overflow-hidden">
<button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'view' ? 'bg-[var(--dg-bg-active)] text-[var(--dg-text-primary)]' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('view')}>查看</button>
<button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'edit' ? 'bg-blue-600 text-white' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('edit')}>编辑</button>
<button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'yaml' ? 'bg-emerald-600 text-white' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('yaml')}>YAML</button>
</div>
);
return (
<div className="space-y-4">
{/* ============ 顶部：标题 + 模式标识 + 操作菜单 ============ */}
<div className="flex items-center justify-between gap-2 flex-wrap">
<div className="flex items-center gap-3 min-w-0">
<Button variant="ghost" size="sm" className="text-slate-400" onClick={onBack}>
<ArrowLeft className="h-4 w-4 mr-1" />返回
<PageShell
variant="workspace"
title={deploymentName}
subtitle={`${clusterCode} / ${namespace} · Deployment · 镜像: ${deployment?.image || '-'}`}
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>
{modeTabs}
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}><RefreshCw className="h-4 w-4" /></Button>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { setNewImage(deployment?.image || ''); setModal({ kind: 'image' }); }}><ImageIcon className="h-3.5 w-3.5 mr-1" />调整镜像</Button>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={handleRestart}><RotateCw className="h-3.5 w-3.5 mr-1" />重启</Button>
<Button variant="outline" size="sm" className="dg-btn-secondary" disabled={!!actionLoading} onClick={handleTogglePause}>
{deployment?.paused ? <><Play className="h-3.5 w-3.5 mr-1 dg-text-green" />恢复</> : <><Pause className="h-3.5 w-3.5 mr-1 dg-text-orange" />暂停</>}
</Button>
<div className="min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<h1 className="text-xl font-bold text-slate-100 truncate">{deploymentName}</h1>
<Badge variant="outline" className="border-slate-700 text-slate-400">{namespace}</Badge>
<Badge variant="outline" className="border-slate-700 text-slate-400">Deployment</Badge>
<Badge
className={isHealthy
? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30'
: 'bg-amber-500/20 text-amber-400 border-amber-500/30'}
>
{isHealthy ? <CheckCircle className="h-3 w-3 mr-1" /> : <AlertTriangle className="h-3 w-3 mr-1" />}
{ready}/{total}
</Badge>
{deployment?.paused && (
<Badge className="bg-orange-500/20 text-orange-400 border-orange-500/30">
<Pause className="h-3 w-3 mr-1" />已暂停更新
</Badge>
)}
</div>
<p className="text-xs text-slate-500 mt-0.5 truncate">
镜像: <code className="text-slate-400">{deployment.image || '-'}</code>
</p>
</div>
</div>
<div className="flex items-center gap-2">
{/* 模式切换 — 查看 / 编辑 / YAML */}
<div className="inline-flex rounded-md border border-slate-700 overflow-hidden">
<button
className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'view' ? 'bg-slate-700 text-slate-100' : 'bg-transparent text-slate-400 hover:text-slate-200'}`}
onClick={() => onModeChange('view')}
>
查看
</button>
<button
className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'edit' ? 'bg-blue-600 text-white' : 'bg-transparent text-slate-400 hover:text-slate-200'}`}
onClick={() => onModeChange('edit')}
>
编辑
</button>
<button
className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'yaml' ? 'bg-emerald-600 text-white' : 'bg-transparent text-slate-400 hover:text-slate-200'}`}
onClick={() => onModeChange('yaml')}
>
YAML
</button>
</div>
<Button variant="outline" size="sm" className="border-slate-700 text-slate-400" onClick={loadData} title="刷新">
<RefreshCw className="h-4 w-4" />
</Button>
{/* 操作按钮行 */}
<div className="flex items-center gap-1.5">
<Button
variant="outline"
size="sm"
className="border-slate-700 text-slate-300"
onClick={() => {
setNewImage(deployment?.image || '');
setModal({ kind: 'image' });
}}
>
<ImageIcon className="h-3.5 w-3.5 mr-1" />调整镜像
</Button>
<Button variant="outline" size="sm" className="border-slate-700 text-slate-300" onClick={handleRestart}>
<RotateCw className="h-3.5 w-3.5 mr-1" />重启
</Button>
<Button
variant="outline" size="sm"
className="border-slate-700 text-slate-300"
disabled={!!actionLoading}
onClick={handleTogglePause}
>
{deployment?.paused
? <><Play className="h-3.5 w-3.5 mr-1 text-green-400" />恢复</>
: <><Pause className="h-3.5 w-3.5 mr-1 text-orange-400" />暂停</>
}
</Button>
<Button variant="outline" size="sm" className="border-slate-700 text-slate-300" onClick={handleCICD}>
<Rocket className="h-3.5 w-3.5 mr-1 text-purple-400" />CI/CD
</Button>
<Button variant="outline" size="sm" className="border-slate-700 text-red-400 hover:bg-red-500/10" onClick={() => setModal({ kind: 'delete' })}>
<Trash2 className="h-3.5 w-3.5 mr-1" />删除
</Button>
</div>
</div>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={handleCICD}><Rocket className="h-3.5 w-3.5 mr-1 dg-text-purple" />CI/CD</Button>
<Button variant="outline" size="sm" className="dg-btn-danger" onClick={() => setModal({ kind: 'delete' })}><Trash2 className="h-3.5 w-3.5 mr-1" />删除</Button>
</>
)}
>
<div className="flex items-center gap-2 flex-wrap mb-4">
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{namespace}</Badge>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">Deployment</Badge>
<Badge className={isHealthy ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-amber-500/20 dg-text-yellow border-amber-500/30'}>
{isHealthy ? <CheckCircle className="h-3 w-3 mr-1" /> : <AlertTriangle className="h-3 w-3 mr-1" />}{ready}/{total}
</Badge>
{deployment?.paused && <Badge className="bg-orange-500/20 dg-text-orange border-orange-500/30"><Pause className="h-3 w-3 mr-1" />已暂停更新</Badge>}
</div>
{/* ============ 主体：view / edit / yaml ============ */}
@@ -567,6 +481,6 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
podName={fileBrowserPod || ''}
containers={(pods.find(( p: any) => p.name === fileBrowserPod)?.containers || []).map(( c: any) => c.name).filter(Boolean)}
/>
</div>
</PageShell>
);
}
frontend/src/components/kubernetes/EventsPage.tsx
+76 -93
View File
@@ -1,14 +1,17 @@
import { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import { RefreshCw, ChevronRight, Bell, AlertTriangle, X } from 'lucide-react';
import { RefreshCw, Bell, AlertTriangle, X } from 'lucide-react';
import { kubernetesApi } from '@/api';
import { EventTable } from './EventTable';
import { normalizeK8sEvent, formatEventRelative } from './k8s-event-utils';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
interface RankItem { name: string; count: number }
@@ -63,16 +66,6 @@ function RankPanel({
);
}
function StatCell({ label, value, hint }: { label: string; value: number | string; hint?: string }) {
return (
<div className="px-4 py-3 border-r border-[var(--dg-border)] last:border-r-0">
<p className="text-xs text-[var(--dg-text-muted)]">{label}</p>
<p className="text-xl font-semibold tabular-nums text-[var(--dg-text-primary)] mt-0.5">{value}</p>
{hint && <p className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{hint}</p>}
</div>
);
}
export default function EventsPage() {
const { clusterCode } = useParams<{ clusterCode: string }>();
const navigate = useNavigate();
@@ -163,71 +156,9 @@ export default function EventsPage() {
(summary?.by_kind || []).map((k: JsonData) => ({ name: k.kind || 'Unknown', count: k.count })),
[summary]);
return (
<div className="space-y-4">
<div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
<Link to="/kubernetes" className="hover:text-[var(--dg-text-secondary)]">集群</Link>
{activeCluster && (
<>
<ChevronRight className="h-3 w-3" />
<Link to={`/kubernetes/${activeCluster}`} className="hover:text-[var(--dg-text-secondary)]">{activeCluster}</Link>
</>
)}
<ChevronRight className="h-3 w-3" />
<span className="text-[var(--dg-text-secondary)]">事件</span>
</div>
const clusterName = clusters.find((c: JsonData) => (c.code || String(c.id)) === activeCluster)?.name;
<div className="flex items-center justify-between flex-wrap gap-3">
<h2 className="text-lg font-semibold text-[var(--dg-text-primary)] flex items-center gap-2">
<Bell className="h-5 w-5 text-[var(--dg-text-muted)]" />
事件中心
</h2>
<div className="flex items-center gap-2 flex-wrap">
<Select value={activeCluster} onValueChange={(v) => { setActiveCluster(v); navigate(`/kubernetes/${v}/events`); }}>
<SelectTrigger className="w-40 h-8 text-xs"><SelectValue /></SelectTrigger>
<SelectContent>
{clusters.map((c: JsonData) => (
<SelectItem key={c.id} value={c.code || String(c.id)} className="text-xs">{c.name || c.code}</SelectItem>
))}
</SelectContent>
</Select>
<Select value={selectedNs} onValueChange={(v) => { setSelectedNs(v); setSelectedReason(''); setSelectedKind(''); }}>
<SelectTrigger className="w-36 h-8 text-xs"><SelectValue placeholder="命名空间" /></SelectTrigger>
<SelectContent>
<SelectItem value="all" className="text-xs">所有命名空间</SelectItem>
{namespaces.map((n) => <SelectItem key={n} value={n} className="text-xs">{n}</SelectItem>)}
</SelectContent>
</Select>
<Select value={timeWindow} onValueChange={setTimeWindow}>
<SelectTrigger className="w-32 h-8 text-xs"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="0" className="text-xs">全部时间</SelectItem>
<SelectItem value="1" className="text-xs">近 1 小时</SelectItem>
<SelectItem value="6" className="text-xs">近 6 小时</SelectItem>
<SelectItem value="24" className="text-xs">近 24 小时</SelectItem>
<SelectItem value="168" className="text-xs">近 7 天</SelectItem>
</SelectContent>
</Select>
<Button variant="outline" size="sm" className="h-8 text-xs" onClick={() => { loadEvents(); loadSummary(); }} disabled={loading}>
<RefreshCw className={`h-3 w-3 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
</div>
</div>
{/* 统计条：统一边框，无彩色卡片 */}
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-0">
<div className="grid grid-cols-2 md:grid-cols-4">
<StatCell label="事件总数" value={summary?.total ?? events.length} />
<StatCell label="告警事件" value={summary?.warning_count ?? warningCount} hint="Warning" />
<StatCell label="正常事件" value={summary?.normal_count ?? normalCount} hint="Normal" />
<StatCell label="告警类型" value={reasonData.length} hint="不同 Reason" />
</div>
</CardContent>
</Card>
{(selectedReason || selectedKind) && (
const filterToolbar = (selectedReason || selectedKind) ? (
<div className="flex items-center gap-2 text-xs">
<span className="text-[var(--dg-text-muted)]">筛选:</span>
{selectedReason && (
@@ -241,8 +172,59 @@ export default function EventsPage() {
</button>
)}
</div>
)}
) : undefined;
return (
<PageShell
variant="list"
title="事件中心"
subtitle={clusterName ? `${clusterName} · 集群事件与告警` : '集群事件与告警'}
icon={<Bell className="h-5 w-5" />}
metrics={!loading ? (
<StatStrip
items={[
{ label: '事件总数', value: summary?.total ?? events.length, color: 'muted' },
{ label: '告警事件', value: summary?.warning_count ?? warningCount, color: 'amber' },
{ label: '正常事件', value: summary?.normal_count ?? normalCount, color: 'green' },
{ label: '告警类型', value: reasonData.length, color: 'red' },
]}
/>
) : undefined}
toolbar={filterToolbar}
actions={(
<>
<Select value={activeCluster} onValueChange={(v) => { setActiveCluster(v); navigate(`/kubernetes/${v}/events`); }}>
<SelectTrigger className="w-40 h-9 dg-input"><SelectValue /></SelectTrigger>
<SelectContent>
{clusters.map((c: JsonData) => (
<SelectItem key={c.id} value={c.code || String(c.id)}>{c.name || c.code}</SelectItem>
))}
</SelectContent>
</Select>
<Select value={selectedNs} onValueChange={(v) => { setSelectedNs(v); setSelectedReason(''); setSelectedKind(''); }}>
<SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder="命名空间" /></SelectTrigger>
<SelectContent>
<SelectItem value="all">所有命名空间</SelectItem>
{namespaces.map((n) => <SelectItem key={n} value={n}>{n}</SelectItem>)}
</SelectContent>
</Select>
<Select value={timeWindow} onValueChange={setTimeWindow}>
<SelectTrigger className="w-32 h-9 dg-input"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="0">全部时间</SelectItem>
<SelectItem value="1">近 1 小时</SelectItem>
<SelectItem value="6">近 6 小时</SelectItem>
<SelectItem value="24">近 24 小时</SelectItem>
<SelectItem value="168">近 7 天</SelectItem>
</SelectContent>
</Select>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { loadEvents(); loadSummary(); }} disabled={loading}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
</>
)}
>
{reasonData.length > 0 && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
<RankPanel title="告警原因" items={reasonData} selected={selectedReason} onSelect={setSelectedReason} />
@@ -279,26 +261,27 @@ export default function EventsPage() {
</Card>
)}
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-0">
<div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
<span className="text-sm text-[var(--dg-text-secondary)]">事件列表 ({displayEvents.length})</span>
<ContentPanel
toolbar={(
<div className="flex items-center justify-between w-full">
<span className="text-sm dg-text-secondary">事件列表 ({displayEvents.length})</span>
<Select value={filterType} onValueChange={setFilterType}>
<SelectTrigger className="w-28 h-7 text-xs"><SelectValue /></SelectTrigger>
<SelectTrigger className="w-28 h-8 dg-input text-xs"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="all" className="text-xs">所有类型</SelectItem>
<SelectItem value="Warning" className="text-xs">Warning</SelectItem>
<SelectItem value="Normal" className="text-xs">Normal</SelectItem>
<SelectItem value="all">所有类型</SelectItem>
<SelectItem value="Warning">Warning</SelectItem>
<SelectItem value="Normal">Normal</SelectItem>
</SelectContent>
</Select>
</div>
<EventTable
events={displayEvents}
loading={loading}
showNamespace
/>
</CardContent>
</Card>
</div>
)}
>
<EventTable
events={displayEvents}
loading={loading}
showNamespace
/>
</ContentPanel>
</PageShell>
);
}
frontend/src/components/kubernetes/K8sShortcutRedirect.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export default function K8sShortcutRedirect({ target }: Props) {
}, [navigate, target]);
return (
<div className="flex flex-col items-center justify-center py-24 text-slate-500 gap-2">
<div className="flex flex-col items-center justify-center py-24 dg-text-muted gap-2">
<Loader2 className="h-6 w-6 animate-spin" />
<span className="text-sm">正在跳转...</span>
</div>
frontend/src/components/kubernetes/KubectlTerminal.tsx
+1 -1
View File
@@ -180,7 +180,7 @@ export function KubectlTerminal({ open, onOpenChange, clusterId, clusterName }:
<div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
<div className="flex items-center gap-2 text-sm">
<div className={cn('w-2 h-2 rounded-full', connected ? 'bg-emerald-400' : error ? 'bg-red-400' : 'bg-yellow-400')} />
<Terminal className="h-4 w-4 text-blue-400" />
<Terminal className="h-4 w-4 dg-text-blue" />
<span className="text-[var(--dg-text-primary)] font-medium">kubectl — {clusterName}</span>
{!connected && !error && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />}
</div>
frontend/src/components/kubernetes/KubernetesClusterDialog.tsx
+3 -3
View File
@@ -161,7 +161,7 @@ export function KubernetesClusterDialog({
placeholder="如: prod-cluster"
className={`bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] ${nameError ? 'border-red-500' : ''}`}
/>
{nameError && <p className="text-xs text-red-400">{nameError}</p>}
{nameError && <p className="text-xs dg-text-red">{nameError}</p>}
<p className="text-xs text-[var(--dg-text-muted)]">
只允许英文、数字和连字符(-)，首尾不能是连字符。名称将作为集群唯一标识。
</p>
@@ -218,7 +218,7 @@ export function KubernetesClusterDialog({
{formData.config_type === 0 ? (
<div className="space-y-2">
<Label className="text-[var(--dg-text-secondary)]">
Token {hasToken && <span className="text-emerald-400 text-xs ml-1">✓ 已配置（留空不修改）</span>}
Token {hasToken && <span className="dg-text-green text-xs ml-1">✓ 已配置（留空不修改）</span>}
</Label>
<Textarea
value={formData.token}
@@ -231,7 +231,7 @@ export function KubernetesClusterDialog({
) : (
<div className="space-y-2">
<Label className="text-[var(--dg-text-secondary)]">
Kubeconfig {hasKubeConfig && <span className="text-emerald-400 text-xs ml-1">✓ 已配置（留空不修改）</span>}
Kubeconfig {hasKubeConfig && <span className="dg-text-green text-xs ml-1">✓ 已配置（留空不修改）</span>}
</Label>
<Textarea
value={formData.kube_config}
frontend/src/components/kubernetes/KubernetesClusters.tsx
+33 -42
View File
@@ -34,6 +34,7 @@ import type { KubernetesCluster } from '@/types';
import { KubernetesClusterDetail } from './KubernetesClusterDetail';
import { KubernetesClusterDialog } from './KubernetesClusterDialog';
import { KubectlTerminal } from './KubectlTerminal';
import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common';
export function KubernetesClusters() {
@@ -161,53 +162,43 @@ export function KubernetesClusters() {
const clusterDetail = selectedCluster ? clusters.find((c) => c.id === selectedCluster) : null;
const searchToolbar = (
<div className="relative w-80">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input
placeholder="搜索集群名称或版本..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 h-9 dg-input"
/>
</div>
);
return (
<div className="space-y-6">
{/* Page Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">集群列表</h1>
<p className="text-sm text-[var(--dg-text-muted)] mt-1">管理Kubernetes集群资源</p>
</div>
<div className="flex items-center gap-2">
<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={loadData}
>
<RefreshCw className={cn('h-4 w-4 mr-2', loading && 'animate-spin')} />
<PageShell
variant="list"
title="集群列表"
subtitle="管理 Kubernetes 集群资源"
icon={<Cloud className="h-5 w-5" />}
toolbar={searchToolbar}
loading={loading}
loadingLabel="加载集群..."
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}>
<RefreshCw className={cn('h-4 w-4 mr-1', loading && 'animate-spin')} />
刷新
</Button>
<Button className="bg-[var(--dg-blue)] hover:opacity-90 text-white" onClick={() => { setEditingCluster(null); setDialogOpen(true); }}>
<Plus className="h-4 w-4 mr-2" />
<Button size="sm" className="dg-btn-primary" onClick={() => { setEditingCluster(null); setDialogOpen(true); }}>
<Plus className="h-4 w-4 mr-1" />
添加集群
</Button>
</div>
</div>
{/* Search */}
<div className="flex items-center gap-3">
<div className="relative w-80">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
<Input
placeholder="搜索集群名称或版本..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]"
/>
</div>
</div>
{/* Clusters Grid */}
</>
)}
>
{/* Clusters Grid // Logan.Li */}
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
{loading ? (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] col-span-full">
<CardContent className="p-12 text-center text-[var(--dg-text-muted)]">
<RefreshCw className="h-6 w-6 animate-spin mx-auto mb-3" />
加载中...
</CardContent>
</Card>
) : filteredClusters.length === 0 ? (
{!loading && filteredClusters.length === 0 ? (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] col-span-full">
<CardContent className="p-12 text-center text-[var(--dg-text-muted)]">暂无集群数据</CardContent>
</Card>
@@ -440,6 +431,6 @@ export function KubernetesClusters() {
</div>
</div>
)}
</div>
</PageShell>
);
}
frontend/src/components/kubernetes/KubernetesNodes.tsx
+41 -36
View File
@@ -11,6 +11,8 @@ import {
} from '@/components/ui/table';
import { RefreshCw, Search, Server, Loader2 } from 'lucide-react';
import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import type { JsonData } from '@/types/common';
export function KubernetesNodes() {
@@ -58,49 +60,53 @@ export function KubernetesNodes() {
? <Badge className="bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30">{status}</Badge>
: <Badge variant="destructive">{status || 'Unknown'}</Badge>;
const tableToolbar = (
<div className="flex items-center gap-3 flex-wrap">
<div className="relative w-56">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input placeholder="搜索节点..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" />
</div>
<Select value={roleFilter} onValueChange={setRoleFilter}>
<SelectTrigger className="w-32 h-9 dg-input">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部角色</SelectItem>
<SelectItem value="master">Master</SelectItem>
<SelectItem value="worker">Worker</SelectItem>
</SelectContent>
</Select>
</div>
);
const clusterLabel = clusters.find((c) => String(c.code || c.id) === selectedCluster)?.name;
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">节点管理</h1>
<p className="text-sm text-[var(--dg-text-muted)] mt-1">Kubernetes 集群工作节点状态与资源</p>
</div>
<div className="flex items-center gap-2">
<PageShell
variant="list"
title="节点管理"
subtitle={clusterLabel ? `${clusterLabel} · 工作节点状态与资源` : 'Kubernetes 集群工作节点状态与资源'}
icon={<Server className="h-5 w-5" />}
actions={(
<>
<Select value={selectedCluster} onValueChange={setSelectedCluster}>
<SelectTrigger className="w-48 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]">
<SelectTrigger className="w-48 h-9 dg-input">
<SelectValue placeholder="选择集群" />
</SelectTrigger>
<SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
<SelectContent>
{clusters.map((c) => (
<SelectItem key={c.id} value={String(c.code || c.id)}>{c.name}</SelectItem>
))}
</SelectContent>
</Select>
<Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={loadNodes} disabled={loading}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadNodes} disabled={loading}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
</div>
</div>
<div className="flex items-center gap-3">
<div className="relative w-56">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
<Input placeholder="搜索节点..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div>
<Select value={roleFilter} onValueChange={setRoleFilter}>
<SelectTrigger className="w-32 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
<SelectItem value="all">全部角色</SelectItem>
<SelectItem value="master">Master</SelectItem>
<SelectItem value="worker">Worker</SelectItem>
</SelectContent>
</Select>
</div>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-0">
</>
)}
>
<ContentPanel toolbar={tableToolbar}>
<Table>
<TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -162,8 +168,7 @@ export function KubernetesNodes() {
)}
</TableBody>
</Table>
</CardContent>
</Card>
</div>
</ContentPanel>
</PageShell>
);
}
frontend/src/components/kubernetes/KubernetesWorkloads.tsx
+60 -60
View File
@@ -104,12 +104,12 @@ export function KubernetesWorkloads() {
const getPodStatusBadge = (status: string) => {
const map: Record<string, string> = {
Running: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
Pending: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
Failed: 'bg-red-500/20 text-red-400 border-red-500/30',
Succeeded: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
Running: 'bg-emerald-500/20 dg-text-green border-emerald-500/30',
Pending: 'bg-yellow-500/20 dg-text-yellow border-yellow-500/30',
Failed: 'bg-red-500/20 dg-text-red border-red-500/30',
Succeeded: 'bg-blue-500/20 dg-text-blue border-blue-500/30',
};
return <Badge className={map[status] || 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>{status || 'Unknown'}</Badge>;
return <Badge className={map[status] || 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>{status || 'Unknown'}</Badge>;
};
const handleQuickScale = async (dep: JsonData, delta: number) => {
@@ -144,32 +144,32 @@ export function KubernetesWorkloads() {
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-slate-100">工作负载</h1>
<p className="text-sm text-slate-500 mt-1">Deployment 与 Pod 运行状态</p>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">工作负载</h1>
<p className="text-sm dg-text-muted mt-1">Deployment 与 Pod 运行状态</p>
</div>
<div className="flex items-center gap-2">
<Select value={selectedCluster} onValueChange={(v) => { setSelectedCluster(v); setSelectedNamespace('all'); }}>
<SelectTrigger className="w-48 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
<SelectTrigger className="w-48 h-9 dg-input">
<SelectValue placeholder="选择集群" />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectContent className="dg-input">
{clusters.map((c) => (
<SelectItem key={c.id} value={c.code || String(c.id)}>{c.name}</SelectItem>
))}
</SelectContent>
</Select>
<Select value={selectedNamespace} onValueChange={setSelectedNamespace}>
<SelectTrigger className="w-40 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
<SelectTrigger className="w-40 h-9 dg-input">
<SelectValue placeholder="命名空间" />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700 max-h-[300px]">
<SelectContent className="dg-input max-h-[300px]">
<SelectItem value="all">全部命名空间</SelectItem>
{namespaces.map((ns) => (
<SelectItem key={ns} value={ns}>{ns}</SelectItem>
))}
</SelectContent>
</Select>
<Button variant="outline" size="icon" className="h-9 w-9 border-slate-700 text-slate-400" onClick={loadData} disabled={loading}>
<Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] dg-text-secondary" onClick={loadData} disabled={loading}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
</Button>
</div>
@@ -178,15 +178,15 @@ export function KubernetesWorkloads() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[
{ label: 'Deployment', value: deployments.length, icon: <Boxes className="h-5 w-5" />, color: 'text-rose-400' },
{ label: 'Pod 总数', value: pods.length, icon: <Container className="h-5 w-5" />, color: 'text-blue-400' },
{ label: 'Running', value: pods.filter((p) => p.status === 'Running').length, icon: <Container className="h-5 w-5" />, color: 'text-emerald-400' },
{ label: '异常', value: pods.filter((p) => ['Failed', 'Pending'].includes(p.status)).length, icon: <Container className="h-5 w-5" />, color: 'text-red-400' },
{ label: 'Pod 总数', value: pods.length, icon: <Container className="h-5 w-5" />, color: 'dg-text-blue' },
{ label: 'Running', value: pods.filter((p) => p.status === 'Running').length, icon: <Container className="h-5 w-5" />, color: 'dg-text-green' },
{ label: '异常', value: pods.filter((p) => ['Failed', 'Pending'].includes(p.status)).length, icon: <Container className="h-5 w-5" />, color: 'dg-text-red' },
].map((s) => (
<Card key={s.label} className="bg-slate-900 border-slate-800">
<Card key={s.label} className="dg-card">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-slate-500">{s.label}</p>
<p className="text-sm dg-text-muted">{s.label}</p>
<p className={`text-2xl font-bold ${s.color}`}>{s.value}</p>
</div>
<div className="opacity-60">{s.icon}</div>
@@ -197,40 +197,40 @@ export function KubernetesWorkloads() {
</div>
<div className="relative w-56">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
<Input placeholder="搜索..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input placeholder="搜索..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" />
</div>
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList className="bg-slate-800 border border-slate-700">
<TabsTrigger value="deployments" className="data-[state=active]:bg-slate-700">Deployment ({filteredDeps.length})</TabsTrigger>
<TabsTrigger value="pods" className="data-[state=active]:bg-slate-700">Pod ({filteredPods.length})</TabsTrigger>
<TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
<TabsTrigger value="deployments" className="data-[state=active]:bg-[var(--dg-bg-active)]">Deployment ({filteredDeps.length})</TabsTrigger>
<TabsTrigger value="pods" className="data-[state=active]:bg-[var(--dg-bg-active)]">Pod ({filteredPods.length})</TabsTrigger>
</TabsList>
<TabsContent value="deployments">
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-0">
<Table>
<TableHeader>
<TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="text-slate-400">名称</TableHead>
<TableHead className="text-slate-400">命名空间</TableHead>
<TableHead className="text-slate-400">副本</TableHead>
<TableHead className="text-slate-400">镜像</TableHead>
<TableHead className="text-slate-400 w-[140px]">操作</TableHead>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">名称</TableHead>
<TableHead className="dg-text-secondary">命名空间</TableHead>
<TableHead className="dg-text-secondary">副本</TableHead>
<TableHead className="dg-text-secondary">镜像</TableHead>
<TableHead className="dg-text-secondary w-[140px]">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{loading ? (
<TableRow><TableCell colSpan={5} className="text-center text-slate-500 py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
<TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
) : filteredDeps.length === 0 ? (
<TableRow><TableCell colSpan={5} className="text-center text-slate-500 py-12"><Boxes className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无 Deployment</TableCell></TableRow>
<TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-12"><Boxes className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无 Deployment</TableCell></TableRow>
) : (
filteredDeps.map((d) => (
<TableRow key={d.id || d.name} className="border-slate-800 hover:bg-slate-800/30 cursor-pointer"
<TableRow key={d.id || d.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] cursor-pointer"
onClick={() => setSelectedDeployment({ name: d.name, namespace: d.namespace })}>
<TableCell className="font-medium text-slate-200">{d.name}</TableCell>
<TableCell><Badge variant="outline" className="border-slate-700 text-slate-400">{d.namespace}</Badge></TableCell>
<TableCell className="font-medium text-[var(--dg-text-primary)]">{d.name}</TableCell>
<TableCell><Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{d.namespace}</Badge></TableCell>
<TableCell>
{(() => {
const ready = d.ready_replicas || 0;
@@ -239,27 +239,27 @@ export function KubernetesWorkloads() {
const done = ready === total;
return (
<div className="flex items-center gap-2 min-w-[100px]">
<div className="flex-1 h-1.5 rounded-full bg-slate-700/50 overflow-hidden">
<div className="flex-1 h-1.5 rounded-full bg-[var(--dg-bg-active)]/50 overflow-hidden">
<div className={`h-full rounded-full ${done ? 'bg-emerald-500' : 'bg-yellow-500'}`} style={{ width: `${pct}%` }} />
</div>
<span className={`text-xs ${done ? 'text-emerald-400' : 'text-yellow-400'}`}>{ready}/{total}</span>
<span className={`text-xs ${done ? 'dg-text-green' : 'dg-text-yellow'}`}>{ready}/{total}</span>
</div>
);
})()}
</TableCell>
<TableCell className="text-xs text-slate-500 max-w-[200px] truncate">{d.image || '-'}</TableCell>
<TableCell className="text-xs dg-text-muted max-w-[200px] truncate">{d.image || '-'}</TableCell>
<TableCell onClick={(e) => e.stopPropagation()}>
<div className="flex items-center gap-0.5">
<Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-slate-200"
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:text-[var(--dg-text-primary)]"
title="减少副本" disabled={(d.replicas || 0) <= 0}
onClick={() => handleQuickScale(d, -1)}>
<Minus className="h-3.5 w-3.5" />
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-slate-200"
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:text-[var(--dg-text-primary)]"
title="增加副本" onClick={() => handleQuickScale(d, 1)}>
<Plus className="h-3.5 w-3.5" />
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-blue-400"
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-blue"
title="查看详情" onClick={() => setSelectedDeployment({ name: d.name, namespace: d.namespace })}>
<Eye className="h-3.5 w-3.5" />
</Button>
@@ -275,37 +275,37 @@ export function KubernetesWorkloads() {
</TabsContent>
<TabsContent value="pods">
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-0">
<Table>
<TableHeader>
<TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="text-slate-400">名称</TableHead>
<TableHead className="text-slate-400">命名空间</TableHead>
<TableHead className="text-slate-400">状态</TableHead>
<TableHead className="text-slate-400">节点</TableHead>
<TableHead className="text-slate-400">CPU</TableHead>
<TableHead className="text-slate-400">内存</TableHead>
<TableHead className="text-slate-400">重启</TableHead>
<TableHead className="text-slate-400">镜像</TableHead>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">名称</TableHead>
<TableHead className="dg-text-secondary">命名空间</TableHead>
<TableHead className="dg-text-secondary">状态</TableHead>
<TableHead className="dg-text-secondary">节点</TableHead>
<TableHead className="dg-text-secondary">CPU</TableHead>
<TableHead className="dg-text-secondary">内存</TableHead>
<TableHead className="dg-text-secondary">重启</TableHead>
<TableHead className="dg-text-secondary">镜像</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{loading ? (
<TableRow><TableCell colSpan={8} className="text-center text-slate-500 py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
<TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
) : filteredPods.length === 0 ? (
<TableRow><TableCell colSpan={8} className="text-center text-slate-500 py-12"><Container className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无 Pod</TableCell></TableRow>
<TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-12"><Container className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无 Pod</TableCell></TableRow>
) : (
filteredPods.map((p) => (
<TableRow key={p.id} className="border-slate-800 hover:bg-slate-800/30">
<TableCell className="font-medium text-slate-200">{p.name}</TableCell>
<TableCell><Badge variant="outline" className="border-slate-700 text-slate-400">{p.namespace}</Badge></TableCell>
<TableRow key={p.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{p.name}</TableCell>
<TableCell><Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{p.namespace}</Badge></TableCell>
<TableCell>{getPodStatusBadge(p.status)}</TableCell>
<TableCell className="text-sm text-slate-400">{p.node_name || '-'}</TableCell>
<TableCell className="text-sm text-cyan-400">{p.cpu_usage_m || '-'}</TableCell>
<TableCell className="text-sm text-amber-400">{p.mem_usage_mi || '-'}</TableCell>
<TableCell className={p.restart_count > 0 ? 'text-yellow-400' : 'text-slate-500'}>{p.restart_count || 0}</TableCell>
<TableCell className="text-xs text-slate-500 max-w-[200px] truncate">{p.image || '-'}</TableCell>
<TableCell className="text-sm dg-text-secondary">{p.node_name || '-'}</TableCell>
<TableCell className="text-sm dg-text-cyan">{p.cpu_usage_m || '-'}</TableCell>
<TableCell className="text-sm dg-text-yellow">{p.mem_usage_mi || '-'}</TableCell>
<TableCell className={p.restart_count > 0 ? 'dg-text-yellow' : 'dg-text-muted'}>{p.restart_count || 0}</TableCell>
<TableCell className="text-xs dg-text-muted max-w-[200px] truncate">{p.image || '-'}</TableCell>
</TableRow>
))
)}
frontend/src/components/kubernetes/NamespaceManagementPage.tsx
+43 -81
View File
@@ -1,6 +1,5 @@
import { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { useParams, useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
@@ -12,11 +11,14 @@ import {
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogTrigger,
} from '@/components/ui/dialog';
import {
RefreshCw, Loader2, ChevronRight, Plus, Trash2, Boxes, Container, Network,
Shield, Activity, AlertTriangle, CheckCircle2,
RefreshCw, Loader2, Plus, Trash2, Boxes,
Shield, AlertTriangle, CheckCircle2,
} from 'lucide-react';
import { kubernetesApi } from '@/api';
import { toast } from 'sonner';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip';
interface NamespaceDetail {
name: string;
@@ -105,34 +107,41 @@ export default function NamespaceManagementPage() {
const totalSvcs = namespaces.reduce((s, n) => s + (n.resource_counts?.services || 0), 0);
const quotaCount = namespaces.filter(n => n.has_resource_quota).length;
return (
<div className="space-y-4">
{/* Breadcrumb */}
<div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
<Link to="/kubernetes" className="hover:text-[var(--dg-text-secondary)] transition-colors">集群</Link>
<ChevronRight className="h-3 w-3" />
<Link to={`/kubernetes/${clusterCode}`} className="hover:text-[var(--dg-text-secondary)] transition-colors">{clusterCode}</Link>
<ChevronRight className="h-3 w-3" />
<span className="text-[var(--dg-text-secondary)]">命名空间管理</span>
</div>
const searchToolbar = (
<Input
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="搜索命名空间..."
className="max-w-xs dg-input"
/>
);
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)] flex items-center gap-2">
<Boxes className="h-6 w-6 text-[var(--dg-green)]" />
命名空间管理
</h1>
<p className="text-sm text-[var(--dg-text-muted)] mt-1">命名空间资源配额与生命周期管理</p>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
onClick={loadData} disabled={loading}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
return (
<PageShell
variant="list"
title="命名空间管理"
subtitle={`${clusterCode} · 资源配额与生命周期管理`}
icon={<Boxes className="h-5 w-5" />}
metrics={!loading ? (
<StatStrip
items={[
{ label: '命名空间', value: namespaces.length, color: 'green' },
{ label: 'Deployments', value: totalDeploys, color: 'blue' },
{ label: 'Pods', value: totalPods, color: 'purple' },
{ label: 'Services', value: totalSvcs, color: 'cyan' },
{ label: '配额限制', value: quotaCount, color: 'amber' },
]}
/>
) : undefined}
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
<DialogTrigger asChild>
<Button className="bg-[var(--dg-blue)] hover:opacity-90">
<Button size="sm" className="dg-btn-primary">
<Plus className="h-4 w-4 mr-1" />创建命名空间
</Button>
</DialogTrigger>
@@ -163,56 +172,10 @@ export default function NamespaceManagementPage() {
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</div>
{/* Stats cards */}
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4 flex items-center justify-between">
<div><p className="text-xs text-[var(--dg-text-muted)]">命名空间</p><p className="text-xl font-bold text-[var(--dg-green)]">{namespaces.length}</p></div>
<Boxes className="h-6 w-6 opacity-30 text-[var(--dg-green)]" />
</CardContent>
</Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4 flex items-center justify-between">
<div><p className="text-xs text-[var(--dg-text-muted)]">Deployments</p><p className="text-xl font-bold text-[var(--dg-blue)]">{totalDeploys}</p></div>
<Container className="h-6 w-6 opacity-30 text-[var(--dg-blue)]" />
</CardContent>
</Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4 flex items-center justify-between">
<div><p className="text-xs text-[var(--dg-text-muted)]">Pods</p><p className="text-xl font-bold text-[var(--dg-purple)]">{totalPods}</p></div>
<Activity className="h-6 w-6 opacity-30 text-[var(--dg-purple)]" />
</CardContent>
</Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4 flex items-center justify-between">
<div><p className="text-xs text-[var(--dg-text-muted)]">Services</p><p className="text-xl font-bold text-[var(--dg-cyan)]">{totalSvcs}</p></div>
<Network className="h-6 w-6 opacity-30 text-[var(--dg-cyan)]" />
</CardContent>
</Card>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4 flex items-center justify-between">
<div><p className="text-xs text-[var(--dg-text-muted)]">配额限制</p><p className="text-xl font-bold text-[var(--dg-orange)]">{quotaCount}</p></div>
<Shield className="h-6 w-6 opacity-30 text-[var(--dg-orange)]" />
</CardContent>
</Card>
</div>
{/* Search */}
<div className="flex items-center gap-3">
<Input
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="搜索命名空间..."
className="max-w-xs bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
/>
</div>
{/* Namespace table */}
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-0">
</>
)}
>
<ContentPanel toolbar={searchToolbar}>
<Table>
<TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -302,8 +265,7 @@ export default function NamespaceManagementPage() {
)}
</TableBody>
</Table>
</CardContent>
</Card>
</ContentPanel>
{/* Delete confirmation dialog */}
<Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
@@ -332,6 +294,6 @@ export default function NamespaceManagementPage() {
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</PageShell>
);
}
frontend/src/components/kubernetes/NamespaceOverviewPage.tsx
+10 -23
View File
@@ -14,6 +14,7 @@ import {
} from 'lucide-react';
import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common';
const RESOURCE_LINKS = [
@@ -63,28 +64,14 @@ export default function NamespaceOverviewPage() {
useEffect(() => { loadCounts(); }, [loadCounts]);
return (
<div className="space-y-4">
{/* Breadcrumb */}
<div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
<Link to="/kubernetes" className="hover:text-[var(--dg-text-primary)] transition-colors">集群</Link>
<ChevronRight className="h-3 w-3" />
<Link to={`/kubernetes/${clusterCode}`} className="hover:text-[var(--dg-text-primary)] transition-colors">{clusterCode}</Link>
<ChevronRight className="h-3 w-3" />
<span className="text-[var(--dg-text-primary)]">{namespace}</span>
</div>
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)] flex items-center gap-2">
<Cloud className="h-6 w-6 text-[var(--dg-blue)]" />
{namespace}
</h1>
<p className="text-sm text-[var(--dg-text-muted)] mt-1">命名空间概览</p>
</div>
</div>
{/* Resource grid */}
<PageShell
variant="default"
title={namespace || '命名空间'}
subtitle={`${clusterCode} · 命名空间概览`}
icon={<Cloud className="h-5 w-5" />}
loading={loading}
loadingLabel="加载资源统计..."
>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{RESOURCE_LINKS.map((r) => (
<Link key={r.type}
@@ -101,6 +88,6 @@ export default function NamespaceOverviewPage() {
</Link>
))}
</div>
</div>
</PageShell>
);
}
frontend/src/components/kubernetes/NamespaceResourcePage.tsx
+63 -65
View File
@@ -1,7 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams, useNavigate, useLocation, Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { useParams, useNavigate, useLocation } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
@@ -13,7 +12,7 @@ import {
} from '@/components/ui/table';
import {
RefreshCw, Search, Loader2, Boxes, Container,
Network, FileText, Shield, Activity, Clock, ChevronRight,
Network, FileText, Shield, Activity, Clock,
Download, FileCode, Pencil, Terminal, HardDrive, Plus, Upload, Trash2, Eye,
} from 'lucide-react';
import { YamlViewer } from './YamlViewer';
@@ -24,6 +23,8 @@ import { PodFileBrowser } from './PodFileBrowser';
import { kubernetesApi } from '@/api';
import { useToast } from '@/hooks/use-toast';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
type ResourceType =
| 'deployments' | 'pods' | 'services' | 'ingresses'
@@ -463,8 +464,63 @@ export default function NamespaceResourcePage() {
if (!config) return <div className="text-[var(--dg-text-secondary)] p-8 text-center">未知资源类型: {type}</div>;
const searchToolbar = (
<div className="relative w-56 flex-1 min-w-[200px] max-w-xs">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input placeholder="搜索..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" />
</div>
);
const ResourceIcon = config.icon;
return (
<div className="space-y-4">
<PageShell
variant="list"
title={config.title}
subtitle={`${clusterCode || '-'} / ${namespace || '-'} · ${config.subtitle}`}
icon={<ResourceIcon className="h-5 w-5" />}
actions={(
<>
<Select value={clusterCode || ''} onValueChange={(v) => navigate(`/kubernetes/${v}/namespace/${namespace || 'default'}/${type}`)}>
<SelectTrigger className="w-48 h-9 dg-input"><SelectValue placeholder="选择集群" /></SelectTrigger>
<SelectContent>{clusters.map((c) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name}</SelectItem>)}</SelectContent>
</Select>
<Select value={namespace || ''} onValueChange={(v) => navigate(`/kubernetes/${clusterCode}/namespace/${v}/${type}`)}>
<SelectTrigger className="w-40 h-9 dg-input"><SelectValue placeholder="命名空间" /></SelectTrigger>
<SelectContent className="max-h-[300px]">{namespaces.map((ns) => <SelectItem key={ns} value={ns}>{ns}</SelectItem>)}</SelectContent>
</Select>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
{BULK_EXPORT_TYPES.includes(type) && (
<>
<Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportCSV} title="导出CSV">
<Download className="h-3 w-3 mr-1" />CSV
</Button>
<Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportJSON} title="导出JSON">
<Download className="h-3 w-3 mr-1" />JSON
</Button>
</>
)}
{EXPORT_YAML_TYPES.includes(type) && (
<Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportYaml} title="导出命名空间 YAML（tar.gz）">
<Download className="h-3 w-3 mr-1" />导出YAML
</Button>
)}
{(VISUAL_RESOURCE_TYPES.includes(type) || DEPLOYMENT_LIST_TYPES.includes(type)) && (
<>
<Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={() => setShowYamlImport(true)}>
<Upload className="h-3 w-3 mr-1" />导入
</Button>
<Button size="sm" className="dg-btn-primary text-xs" onClick={handleCreate}>
<Plus className="h-3 w-3 mr-1" />新建
</Button>
</>
)}
</>
)}
>
{yamlItem && (
<YamlViewer
clusterCode={clusterCode || ''}
@@ -495,64 +551,7 @@ export default function NamespaceResourcePage() {
/>
)}
<div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
<Link to="/kubernetes" className="hover:text-[var(--dg-text-secondary)] transition-colors">集群</Link>
{clusterCode && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${clusterCode}`} className="hover:text-[var(--dg-text-secondary)] transition-colors">{clusterCode}</Link></>}
{namespace && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${clusterCode}/namespace/${namespace}`} className="hover:text-[var(--dg-text-secondary)] transition-colors">{namespace}</Link></>}
<ChevronRight className="h-3 w-3" /><span className="text-[var(--dg-text-secondary)]">{config.title}</span>
</div>
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{config.title}</h1>
<p className="text-sm text-[var(--dg-text-muted)] mt-1">{config.subtitle}</p>
</div>
<div className="flex items-center gap-2">
<Select value={clusterCode || ''} onValueChange={(v) => navigate(`/kubernetes/${v}/namespace/${namespace || 'default'}/${type}`)}>
<SelectTrigger className="w-48 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]"><SelectValue placeholder="选择集群" /></SelectTrigger>
<SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">{clusters.map((c) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name}</SelectItem>)}</SelectContent>
</Select>
<Select value={namespace || ''} onValueChange={(v) => navigate(`/kubernetes/${clusterCode}/namespace/${v}/${type}`)}>
<SelectTrigger className="w-40 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]"><SelectValue placeholder="命名空间" /></SelectTrigger>
<SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] max-h-[300px]">{namespaces.map((ns) => <SelectItem key={ns} value={ns}>{ns}</SelectItem>)}</SelectContent>
</Select>
<Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={loadData} disabled={loading}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
</Button>
{BULK_EXPORT_TYPES.includes(type) && (
<>
<Button variant="outline" size="sm" className="h-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={handleExportCSV} title="导出CSV">
<Download className="h-3 w-3 mr-1" />CSV
</Button>
<Button variant="outline" size="sm" className="h-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={handleExportJSON} title="导出JSON">
<Download className="h-3 w-3 mr-1" />JSON
</Button>
</>
)}
{EXPORT_YAML_TYPES.includes(type) && (
<Button variant="outline" size="sm" className="h-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={handleExportYaml} title="导出命名空间 YAML（tar.gz）">
<Download className="h-3 w-3 mr-1" />导出YAML
</Button>
)}
{(VISUAL_RESOURCE_TYPES.includes(type) || DEPLOYMENT_LIST_TYPES.includes(type)) && (
<>
<Button variant="outline" size="sm" className="h-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={() => setShowYamlImport(true)}>
<Upload className="h-3 w-3 mr-1" />导入
</Button>
<Button size="sm" className="h-9 text-xs bg-[var(--dg-blue)] hover:opacity-90" onClick={handleCreate}>
<Plus className="h-3 w-3 mr-1" />新建
</Button>
</>
)}
</div>
</div>
<div className="flex items-center gap-3 flex-wrap">
<div className="relative w-56 flex-1 min-w-[200px] max-w-xs">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
<Input placeholder="搜索..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div>
</div>
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-0">
<ContentPanel toolbar={searchToolbar}>
<Table>
<TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">{config.columns.map((col) => <TableHead key={col} className="text-[var(--dg-text-secondary)]">{col}</TableHead>)}</TableRow></TableHeader>
<TableBody>
@@ -565,8 +564,7 @@ export default function NamespaceResourcePage() {
)}
</TableBody>
</Table>
</CardContent>
</Card>
</ContentPanel>
{/* ============ Pod 终端 ============ */}
<PodExecTerminal
@@ -709,6 +707,6 @@ export default function NamespaceResourcePage() {
</div>
</div>
)}
</div>
</PageShell>
);
}
frontend/src/components/kubernetes/NodeDetailPage.tsx
+132 -138
View File
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
@@ -13,7 +13,7 @@ import {
Loader2,
Server,
Activity,
ChevronRight,
ArrowLeft,
Container,
Network,
Info,
@@ -22,10 +22,11 @@ import {
} from 'lucide-react';
import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
export default function NodeDetailPage() {
const { clusterCode, nodeName } = useParams<{ clusterCode: string; nodeName: string }>();
const _navigate = useNavigate();
const navigate = useNavigate();
const [data, setData] = useState<any>(null);
const [loading, setLoading] = useState(false);
@@ -53,13 +54,13 @@ export default function NodeDetailPage() {
return (
<div className="space-y-1.5">
<div className="flex items-center justify-between text-xs">
<span className="text-slate-400">{label}</span>
<span className="text-slate-300 font-medium">
<span className="dg-text-secondary">{label}</span>
<span className="text-[var(--dg-text-secondary)] font-medium">
{used} / {total} {unit}
</span>
</div>
<div className="flex items-center gap-2">
<div className="flex-1 h-2 rounded-full bg-slate-700/50 overflow-hidden">
<div className="flex-1 h-2 rounded-full bg-[var(--dg-bg-active)]/50 overflow-hidden">
<div className={`h-full rounded-full ${barColor} transition-all duration-500`} style={{ width: `${safePct}%` }} />
</div>
<span className={`text-xs font-semibold min-w-[40px] text-right ${color}`}>
@@ -72,120 +73,113 @@ export default function NodeDetailPage() {
const conditionColor = (type: string, status: string) => {
if (status === 'True') {
if (type === 'Ready') return 'bg-emerald-500/20 text-emerald-400';
if (type === 'Ready') return 'bg-emerald-500/20 dg-text-green';
// Other True conditions (DiskPressure, MemoryPressure, PIDPressure, NetworkUnavailable) are BAD
return 'bg-red-500/20 text-red-400';
return 'bg-red-500/20 dg-text-red';
}
return 'bg-slate-500/20 text-slate-400';
return 'bg-[var(--dg-bg-active)]/20 dg-text-secondary';
};
const taintColor = (effect: string) => {
if (effect === 'NoSchedule') return 'bg-red-500/20 text-red-400 border-red-500/30';
if (effect === 'NoExecute') return 'bg-red-600/20 text-red-300 border-red-600/30';
if (effect === 'PreferNoSchedule') return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
return 'bg-slate-500/20 text-slate-400 border-slate-500/30';
if (effect === 'NoSchedule') return 'bg-red-500/20 dg-text-red border-red-500/30';
if (effect === 'NoExecute') return 'bg-red-600/20 dg-text-red border-red-600/30';
if (effect === 'PreferNoSchedule') return 'bg-amber-500/20 dg-text-yellow border-amber-500/30';
return 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]';
};
const nodeSubtitle = [
clusterCode,
data?.internal_ip,
data?.hostname,
].filter(Boolean).join(' · ');
return (
<div className="space-y-4">
{/* Breadcrumb */}
<div className="flex items-center gap-2 text-sm text-slate-500">
<Link to="/kubernetes" className="hover:text-slate-300 transition-colors">集群</Link>
<ChevronRight className="h-3 w-3" />
<Link to={`/kubernetes/${clusterCode}`} className="hover:text-slate-300 transition-colors">{clusterCode}</Link>
<ChevronRight className="h-3 w-3" />
<span className="text-slate-300">{nodeName}</span>
</div>
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="flex items-center justify-center w-12 h-12 rounded-xl bg-slate-800 border border-slate-700">
<Server className="h-6 w-6 text-blue-400" />
</div>
<div>
<div className="flex items-center gap-2">
<h1 className="text-2xl font-bold text-slate-100">{nodeName}</h1>
<Badge className={data?.role === 'master' ? 'bg-blue-500/20 text-blue-400 border-blue-500/30' : 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>
{data?.role || 'worker'}
</Badge>
<Badge className={data?.status === 'Ready' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-red-500/20 text-red-400'}>
{data?.status || 'Unknown'}
</Badge>
</div>
<p className="text-sm text-slate-500 mt-0.5">
{data?.internal_ip && `${data.internal_ip}`}
{data?.hostname && ` · ${data.hostname}`}
</p>
</div>
<PageShell
variant="default"
title={nodeName || '节点详情'}
subtitle={nodeSubtitle || clusterCode}
icon={<Server className="h-5 w-5" />}
loading={loading && !data}
loadingLabel="加载节点详情..."
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => navigate(-1)}>
<ArrowLeft className="h-4 w-4 mr-1" />
返回
</Button>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
</>
)}
>
{data && (
<div className="flex items-center gap-2 mb-4">
<Badge className={data?.role === 'master' ? 'bg-blue-500/20 dg-text-blue border-blue-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>
{data?.role || 'worker'}
</Badge>
<Badge className={data?.status === 'Ready' ? 'bg-emerald-500/20 dg-text-green' : 'bg-red-500/20 dg-text-red'}>
{data?.status || 'Unknown'}
</Badge>
</div>
<Button variant="outline" size="icon" className="h-9 w-9 border-slate-700 text-slate-400"
onClick={loadData} disabled={loading}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
</Button>
</div>
)}
{loading && !data ? (
<Card className="bg-slate-900 border-slate-800">
<CardContent className="py-16 flex items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin text-slate-500" />
</CardContent>
</Card>
) : !data ? (
<Card className="bg-slate-900 border-slate-800">
<CardContent className="py-16 text-center text-slate-500">
{!loading && !data ? (
<Card className="dg-card">
<CardContent className="py-16 text-center dg-text-muted">
<AlertTriangle className="h-8 w-8 mx-auto mb-2 opacity-50" />
无法加载节点详情
</CardContent>
</Card>
) : (
) : data ? (
<>
{/* Row 1: System Info + Basic Info */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* System Info */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-4">
<h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
<Info className="h-4 w-4 text-cyan-400" />系统信息
<h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
<Info className="h-4 w-4 dg-text-cyan" />系统信息
</h2>
<div className="space-y-2 text-xs">
<div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
<span className="text-slate-500">容器运行时</span>
<span className="text-slate-300 font-mono">{data.container_runtime || '-'}</span>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">容器运行时</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{data.container_runtime || '-'}</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
<span className="text-slate-500">Kubelet</span>
<span className="text-slate-300 font-mono">{data.kubelet_version || '-'}</span>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">Kubelet</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{data.kubelet_version || '-'}</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
<span className="text-slate-500">操作系统</span>
<span className="text-slate-300">{data.os_image || '-'}</span>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">操作系统</span>
<span className="text-[var(--dg-text-secondary)]">{data.os_image || '-'}</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
<span className="text-slate-500">内核版本</span>
<span className="text-slate-300 font-mono">{data.kernel_version || '-'}</span>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">内核版本</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{data.kernel_version || '-'}</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
<span className="text-slate-500">架构</span>
<span className="text-slate-300 font-mono">{data.architecture || '-'}</span>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">架构</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{data.architecture || '-'}</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
<span className="text-slate-500">创建时间</span>
<span className="text-slate-300">{data.creation_time ? new Date(data.creation_time).toLocaleString('zh-CN') : '-'}</span>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">创建时间</span>
<span className="text-[var(--dg-text-secondary)]">{data.creation_time ? new Date(data.creation_time).toLocaleString('zh-CN') : '-'}</span>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-slate-500">Pod CIDR</span>
<span className="text-slate-300 font-mono">{data.pod_cidr || '-'}</span>
<span className="dg-text-muted">Pod CIDR</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{data.pod_cidr || '-'}</span>
</div>
</div>
</CardContent>
</Card>
{/* Resource Allocation */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-4">
<h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
<Activity className="h-4 w-4 text-emerald-400" />资源分配率
<h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
<Activity className="h-4 w-4 dg-text-green" />资源分配率
</h2>
<div className="space-y-4 mt-4">
{/* CPU allocation (requested vs allocatable) */}
@@ -195,7 +189,7 @@ export default function NodeDetailPage() {
total={`${data.cpu_allocatable} 核`}
unit=""
pct={data.cpu_alloc_pct}
color="text-emerald-400"
color="dg-text-green"
/>
{/* CPU real usage (from metrics) */}
{data.cpu_usage_m && (
@@ -205,7 +199,7 @@ export default function NodeDetailPage() {
total={`${data.cpu_capacity} 核`}
unit=""
pct={(parseFloat(data.cpu_usage_m.replace('m', '')) / (data.cpu_capacity * 1000)) * 100}
color="text-blue-400"
color="dg-text-blue"
/>
)}
{/* Memory allocation */}
@@ -215,7 +209,7 @@ export default function NodeDetailPage() {
total={`${data.mem_allocatable_mb} Mi`}
unit=""
pct={data.mem_alloc_pct}
color="text-emerald-400"
color="dg-text-green"
/>
{/* Memory real usage */}
{data.mem_usage_mi && (
@@ -225,7 +219,7 @@ export default function NodeDetailPage() {
total={`${data.mem_capacity_mb} Mi`}
unit=""
pct={(parseFloat(data.mem_usage_mi.replace('Mi', '').replace('Ki', '').replace('Gi', '')) / data.mem_capacity_mb) * 100}
color="text-blue-400"
color="dg-text-blue"
/>
)}
{/* Pod allocation */}
@@ -235,11 +229,11 @@ export default function NodeDetailPage() {
total={`${data.pod_allocatable}`}
unit=""
pct={data.pod_alloc_pct}
color="text-emerald-400"
color="dg-text-green"
/>
</div>
{/* Capacity vs Allocatable raw */}
<div className="mt-4 pt-3 border-t border-slate-800/50 space-y-1 text-[11px] text-slate-500">
<div className="mt-4 pt-3 border-t border-[var(--dg-border)]/50 space-y-1 text-[11px] dg-text-muted">
<div className="flex justify-between">
<span>CPU 容量 / 可分配</span>
<span className="font-mono">{data.cpu_capacity} / {data.cpu_allocatable} 核</span>
@@ -260,24 +254,24 @@ export default function NodeDetailPage() {
{/* Row 2: Conditions + Taints */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Conditions */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-4">
<h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
<CheckCircle2 className="h-4 w-4 text-blue-400" />节点条件
<h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
<CheckCircle2 className="h-4 w-4 dg-text-blue" />节点条件
</h2>
{(!data.conditions || data.conditions.length === 0) ? (
<p className="text-xs text-slate-500 py-4 text-center">无条件数据</p>
<p className="text-xs dg-text-muted py-4 text-center">无条件数据</p>
) : (
<div className="space-y-2">
{data.conditions.map(( cond: any, i: number) => (
<div key={i} className="flex items-start gap-2 text-xs py-1.5 border-b border-slate-800/30 last:border-0">
<div key={i} className="flex items-start gap-2 text-xs py-1.5 border-b border-[var(--dg-border)]/30 last:border-0">
<Badge className={conditionColor(cond.type, cond.status)}>
{cond.status === 'True' ? <CheckCircle2 className="h-3 w-3 mr-1" /> : null}
{cond.type}
</Badge>
<div className="flex-1 min-w-0">
{cond.reason && <span className="text-slate-400 block">{cond.reason}</span>}
{cond.message && <span className="text-slate-600 text-[11px] block truncate">{cond.message}</span>}
{cond.reason && <span className="dg-text-secondary block">{cond.reason}</span>}
{cond.message && <span className="dg-text-muted text-[11px] block truncate">{cond.message}</span>}
</div>
</div>
))}
@@ -287,20 +281,20 @@ export default function NodeDetailPage() {
</Card>
{/* Taints */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-4">
<h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
<AlertTriangle className="h-4 w-4 text-amber-400" />污点 (Taints)
<h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
<AlertTriangle className="h-4 w-4 dg-text-yellow" />污点 (Taints)
</h2>
{(!data.taints || data.taints.length === 0) ? (
<p className="text-xs text-slate-500 py-4 text-center">无污点</p>
<p className="text-xs dg-text-muted py-4 text-center">无污点</p>
) : (
<div className="space-y-2">
{data.taints.map(( t: any, i: number) => (
<div key={i} className="flex items-center gap-2 text-xs">
<Badge className={taintColor(t.effect)}>{t.effect}</Badge>
<span className="text-slate-300 font-mono">{t.key}</span>
{t.value && <span className="text-slate-500">= {t.value}</span>}
<span className="text-[var(--dg-text-secondary)] font-mono">{t.key}</span>
{t.value && <span className="dg-text-muted">= {t.value}</span>}
</div>
))}
</div>
@@ -311,17 +305,17 @@ export default function NodeDetailPage() {
{/* Row 3: Labels */}
{data.labels && data.labels.length > 0 && (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-4">
<h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
<Network className="h-4 w-4 text-slate-400" />标签 ({data.labels.length})
<h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
<Network className="h-4 w-4 dg-text-secondary" />标签 ({data.labels.length})
</h2>
<div className="flex flex-wrap gap-1.5">
{data.labels.map(( l: any, i: number) => (
<div key={i} className="flex items-center gap-1 bg-slate-800/50 border border-slate-700/50 rounded px-2 py-0.5 text-[11px]">
<span className="text-slate-400">{l.key}</span>
<span className="text-slate-600">:</span>
<span className="text-slate-300">{l.value}</span>
<div key={i} className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]/50 rounded px-2 py-0.5 text-[11px]">
<span className="dg-text-secondary">{l.key}</span>
<span className="dg-text-muted">:</span>
<span className="text-[var(--dg-text-secondary)]">{l.value}</span>
</div>
))}
</div>
@@ -330,54 +324,54 @@ export default function NodeDetailPage() {
)}
{/* Row 4: Pods on this node */}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-0">
<div className="px-4 py-3 border-b border-slate-800">
<h2 className="text-sm font-semibold text-slate-200 flex items-center gap-2">
<Container className="h-4 w-4 text-cyan-400" />
<div className="px-4 py-3 border-b border-[var(--dg-border)]">
<h2 className="text-sm font-semibold text-[var(--dg-text-primary)] flex items-center gap-2">
<Container className="h-4 w-4 dg-text-cyan" />
节点上的 Pod
<Badge className="bg-slate-700/50 text-slate-300">{data.pods?.length || 0}</Badge>
<Badge className="bg-[var(--dg-bg-active)]/50 text-[var(--dg-text-secondary)]">{data.pods?.length || 0}</Badge>
</h2>
</div>
{(!data.pods || data.pods.length === 0) ? (
<p className="text-xs text-slate-500 py-8 text-center">该节点上暂无 Pod</p>
<p className="text-xs dg-text-muted py-8 text-center">该节点上暂无 Pod</p>
) : (
<Table>
<TableHeader>
<TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="text-slate-400">命名空间</TableHead>
<TableHead className="text-slate-400">名称</TableHead>
<TableHead className="text-slate-400">状态</TableHead>
<TableHead className="text-slate-400">IP</TableHead>
<TableHead className="text-slate-400">CPU 请求</TableHead>
<TableHead className="text-slate-400">内存请求</TableHead>
<TableHead className="text-slate-400">重启次数</TableHead>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">命名空间</TableHead>
<TableHead className="dg-text-secondary">名称</TableHead>
<TableHead className="dg-text-secondary">状态</TableHead>
<TableHead className="dg-text-secondary">IP</TableHead>
<TableHead className="dg-text-secondary">CPU 请求</TableHead>
<TableHead className="dg-text-secondary">内存请求</TableHead>
<TableHead className="dg-text-secondary">重启次数</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.pods.map(( p: any, i: number) => (
<TableRow key={i} className="border-slate-800 hover:bg-slate-800/30">
<TableCell className="text-sm text-slate-400">{p.namespace}</TableCell>
<TableCell className="text-sm font-medium text-slate-200">{p.name}</TableCell>
<TableRow key={i} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<TableCell className="text-sm dg-text-secondary">{p.namespace}</TableCell>
<TableCell className="text-sm font-medium text-[var(--dg-text-primary)]">{p.name}</TableCell>
<TableCell>
<Badge className={
p.status === 'Running' ? 'bg-emerald-500/20 text-emerald-400' :
p.status === 'Pending' ? 'bg-amber-500/20 text-amber-400' :
'bg-red-500/20 text-red-400'
p.status === 'Running' ? 'bg-emerald-500/20 dg-text-green' :
p.status === 'Pending' ? 'bg-amber-500/20 dg-text-yellow' :
'bg-red-500/20 dg-text-red'
}>{p.status}</Badge>
</TableCell>
<TableCell className="text-xs text-slate-400 font-mono">{p.ip || '-'}</TableCell>
<TableCell className="text-xs text-slate-400">
<TableCell className="text-xs dg-text-secondary font-mono">{p.ip || '-'}</TableCell>
<TableCell className="text-xs dg-text-secondary">
{p.cpu_request_m > 0 ? `${p.cpu_request_m}m` : '-'}
</TableCell>
<TableCell className="text-xs text-slate-400">
<TableCell className="text-xs dg-text-secondary">
{p.mem_request_mi > 0 ? `${p.mem_request_mi}Mi` : '-'}
</TableCell>
<TableCell className="text-xs">
{p.restart_count > 0 ? (
<span className="text-amber-400">{p.restart_count}</span>
<span className="dg-text-yellow">{p.restart_count}</span>
) : (
<span className="text-slate-600">0</span>
<span className="dg-text-muted">0</span>
)}
</TableCell>
</TableRow>
@@ -388,7 +382,7 @@ export default function NodeDetailPage() {
</CardContent>
</Card>
</>
)}
</div>
) : null}
</PageShell>
);
}
frontend/src/components/kubernetes/PodExecTerminal.tsx
+2 -2
View File
@@ -265,7 +265,7 @@ export function PodExecTerminal({
// ─── UI ───
const statusColor = connState === 'connected' ? 'bg-emerald-400'
: connState === 'error' ? 'bg-red-400'
: connState === 'closed' ? 'bg-slate-500' : 'bg-amber-400';
: connState === 'closed' ? 'bg-[var(--dg-bg-active)]' : 'bg-amber-400';
const statusText = connState === 'connected' ? '已连接'
: connState === 'connecting' ? '连接中'
: connState === 'error' ? '连接错误'
@@ -295,7 +295,7 @@ export function PodExecTerminal({
<div className="flex items-center justify-between gap-2 px-4 py-2 border-b border-[var(--dg-border)] flex-wrap">
<div className="flex items-center gap-2 text-sm min-w-0">
<div className={cn('w-2 h-2 rounded-full shrink-0', statusColor)} title={statusText} />
<Terminal className="h-4 w-4 text-blue-400 shrink-0" />
<Terminal className="h-4 w-4 dg-text-blue shrink-0" />
<span className="text-[var(--dg-text-primary)] font-medium truncate">exec — {podName}</span>
{connState === 'connecting' && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />}
<span className="text-xs text-[var(--dg-text-muted)]">{statusText}</span>
frontend/src/components/kubernetes/PodFileBrowser.tsx
+28 -28
View File
@@ -163,55 +163,55 @@ export function PodFileBrowser({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70" onClick={() => onOpenChange(false)}>
<div
className="bg-slate-900 border border-slate-700 rounded-xl w-[90vw] max-w-5xl h-[80vh] flex flex-col shadow-2xl"
className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl w-[90vw] max-w-5xl h-[80vh] flex flex-col shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-center justify-between p-3 border-b border-slate-700 shrink-0 gap-3">
<div className="flex items-center justify-between p-3 border-b border-[var(--dg-border)] shrink-0 gap-3">
<div className="flex items-center gap-2 min-w-0 flex-1">
<HardDrive className="h-4 w-4 shrink-0 text-amber-400" />
<span className="text-sm font-semibold text-slate-200 truncate" title={podName}>文件: {podName}</span>
<Badge variant="outline" className="border-slate-700 text-slate-400 text-[10px] shrink-0">{namespace}</Badge>
<HardDrive className="h-4 w-4 shrink-0 dg-text-yellow" />
<span className="text-sm font-semibold text-[var(--dg-text-primary)] truncate" title={podName}>文件: {podName}</span>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px] shrink-0">{namespace}</Badge>
</div>
<div className="flex items-center gap-2">
{containers.length > 0 && (
<select
value={container}
onChange={(e) => { setContainer(e.target.value); }}
className="bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2 py-1"
className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2 py-1"
>
{containers.map((c) => <option key={c} value={c}>{c}</option>)}
</select>
)}
<Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400" onClick={() => onOpenChange(false)}>
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary" onClick={() => onOpenChange(false)}>
<X className="h-4 w-4" />
</Button>
</div>
</div>
{/* Breadcrumb + Actions */}
<div className="flex items-center justify-between p-2 border-b border-slate-800 shrink-0">
<div className="flex items-center gap-1 text-xs text-slate-400">
<Button variant="ghost" size="icon" className="h-6 w-6 text-slate-500" onClick={handleGoUp} disabled={currentPath === '/'}>
<div className="flex items-center justify-between p-2 border-b border-[var(--dg-border)] shrink-0">
<div className="flex items-center gap-1 text-xs dg-text-secondary">
<Button variant="ghost" size="icon" className="h-6 w-6 dg-text-muted" onClick={handleGoUp} disabled={currentPath === '/'}>
<ArrowLeft className="h-3.5 w-3.5" />
</Button>
<button className="hover:text-slate-200" onClick={() => loadFiles('/')}>root</button>
<button className="hover:text-[var(--dg-text-primary)]" onClick={() => loadFiles('/')}>root</button>
{pathSegments.map((seg, i) => {
const path = `/${pathSegments.slice(0, i + 1).join('/')}`;
return (
<span key={path} className="flex items-center gap-1">
<ChevronRight className="h-3 w-3" />
<button className="hover:text-slate-200" onClick={() => loadFiles(path)}>{seg}</button>
<button className="hover:text-[var(--dg-text-primary)]" onClick={() => loadFiles(path)}>{seg}</button>
</span>
);
})}
</div>
<div className="flex items-center gap-2">
<input type="file" ref={fileInputRef} className="hidden" onChange={handleUpload} />
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={() => fileInputRef.current?.click()} disabled={uploading}>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={() => fileInputRef.current?.click()} disabled={uploading}>
{uploading ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Upload className="h-3 w-3 mr-1" />}上传
</Button>
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={() => loadFiles(currentPath)} disabled={loading}>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={() => loadFiles(currentPath)} disabled={loading}>
{loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
</Button>
</div>
@@ -220,34 +220,34 @@ export function PodFileBrowser({
{/* Content */}
<div className="flex-1 overflow-hidden flex">
{/* File list */}
<div className={`${preview ? 'w-1/2' : 'w-full'} overflow-auto p-2 border-r border-slate-800`}>
{error && <p className="text-xs text-red-400 p-2">{error}</p>}
<div className={`${preview ? 'w-1/2' : 'w-full'} overflow-auto p-2 border-r border-[var(--dg-border)]`}>
{error && <p className="text-xs dg-text-red p-2">{error}</p>}
{loading ? (
<div className="flex items-center justify-center h-32"><Loader2 className="h-5 w-5 animate-spin text-slate-500" /></div>
<div className="flex items-center justify-center h-32"><Loader2 className="h-5 w-5 animate-spin dg-text-muted" /></div>
) : entries.length === 0 ? (
<p className="text-xs text-slate-500 p-4 text-center">空目录</p>
<p className="text-xs dg-text-muted p-4 text-center">空目录</p>
) : (
<div className="space-y-0.5">
{entries.sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1)).map((entry) => (
<div
key={entry.name}
className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-slate-800/50 cursor-pointer group"
className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--dg-bg-hover)] cursor-pointer group"
onClick={() => handleClick(entry)}
>
{entry.isDir ? (
<Folder className="h-4 w-4 text-blue-400 shrink-0" />
<Folder className="h-4 w-4 dg-text-blue shrink-0" />
) : (
<File className="h-4 w-4 text-slate-500 shrink-0" />
<File className="h-4 w-4 dg-text-muted shrink-0" />
)}
<span className={`text-xs truncate ${entry.isDir ? 'text-blue-300' : 'text-slate-300'}`}>
<span className={`text-xs truncate ${entry.isDir ? 'text-blue-300' : 'text-[var(--dg-text-secondary)]'}`}>
{entry.name}
</span>
{!entry.isDir && (
<span className="text-[10px] text-slate-600 ml-auto shrink-0">{formatSize(entry.size)}</span>
<span className="text-[10px] dg-text-muted ml-auto shrink-0">{formatSize(entry.size)}</span>
)}
{!entry.isDir && (
<Button
variant="ghost" size="icon" className="h-5 w-5 opacity-0 group-hover:opacity-100 text-slate-400 hover:text-emerald-400 shrink-0"
variant="ghost" size="icon" className="h-5 w-5 opacity-0 group-hover:opacity-100 dg-text-secondary hover:dg-text-green shrink-0"
onClick={(e) => { e.stopPropagation(); handleDownload(entry.name); }}
title="下载"
>
@@ -263,14 +263,14 @@ export function PodFileBrowser({
{/* Preview */}
{preview && (
<div className="w-1/2 flex flex-col overflow-hidden">
<div className="flex items-center justify-between p-2 border-b border-slate-800 shrink-0">
<span className="text-xs text-slate-300 font-mono">{preview.file}</span>
<Button variant="ghost" size="icon" className="h-6 w-6 text-slate-400" onClick={() => setPreview(null)}>
<div className="flex items-center justify-between p-2 border-b border-[var(--dg-border)] shrink-0">
<span className="text-xs text-[var(--dg-text-secondary)] font-mono">{preview.file}</span>
<Button variant="ghost" size="icon" className="h-6 w-6 dg-text-secondary" onClick={() => setPreview(null)}>
<X className="h-3.5 w-3.5" />
</Button>
</div>
<div className="flex-1 overflow-auto p-3">
<pre className="text-xs text-slate-300 font-mono whitespace-pre-wrap break-all bg-slate-950 rounded p-3">
<pre className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all bg-[var(--dg-bg-primary)] rounded p-3">
{preview.content || '(空文件)'}
</pre>
</div>
frontend/src/components/kubernetes/PodLogsViewer.tsx
+7 -7
View File
@@ -337,9 +337,9 @@ export function PodLogsViewer({
<div className="flex items-center gap-2 text-sm min-w-0">
<div className={cn(
'w-2 h-2 rounded-full shrink-0',
streaming ? (paused ? 'bg-amber-400' : 'bg-emerald-400 animate-pulse') : 'bg-slate-500'
streaming ? (paused ? 'bg-amber-400' : 'bg-emerald-400 animate-pulse') : 'bg-[var(--dg-bg-active)]'
)} />
<ScrollText className="h-4 w-4 text-blue-400 shrink-0" />
<ScrollText className="h-4 w-4 dg-text-blue shrink-0" />
<span className="text-[var(--dg-text-primary)] font-medium truncate">日志 — {podName}</span>
{loading && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />}
<span className="text-xs text-[var(--dg-text-muted)]">
@@ -472,7 +472,7 @@ export function PodLogsViewer({
<>
<Button
variant="outline" size="sm"
className={cn('h-8 text-xs', paused ? 'border-emerald-500 text-emerald-400' : 'border-amber-500 text-amber-400')}
className={cn('h-8 text-xs', paused ? 'border-emerald-500 dg-text-green' : 'border-amber-500 dg-text-yellow')}
onClick={() => setPaused(!paused)}
title={paused ? '继续' : '暂停'}
>
@@ -481,7 +481,7 @@ export function PodLogsViewer({
</Button>
<Button
variant="outline" size="sm"
className="h-8 text-xs border-red-500 text-red-400"
className="h-8 text-xs border-red-500 dg-text-red"
onClick={stopStream}
title="停止"
>
@@ -503,7 +503,7 @@ export function PodLogsViewer({
}}
className={cn(
'overflow-auto bg-[#0f172a] font-mono text-xs leading-relaxed p-3',
'text-slate-300'
'text-[var(--dg-text-secondary)]'
)}
style={{ height: fullscreen ? 'calc(100vh - 98px)' : '520px' }}
>
@@ -531,10 +531,10 @@ export function PodLogsViewer({
<span className="flex items-center gap-1"><Filter className="h-3 w-3" />缓冲 {lineCount}/{RING_BUFFER_MAX}</span>
{keyword && <span>匹配 {matchedCount}</span>}
{container && <span className="flex items-center gap-1"><Box className="h-3 w-3" />{container}</span>}
{previous && <span className="text-amber-400 flex items-center gap-1"><History className="h-3 w-3" />previous</span>}
{previous && <span className="dg-text-yellow flex items-center gap-1"><History className="h-3 w-3" />previous</span>}
</div>
<button
className={cn('flex items-center gap-1', autoScroll ? 'text-emerald-400' : 'text-[var(--dg-text-muted)]')}
className={cn('flex items-center gap-1', autoScroll ? 'dg-text-green' : 'text-[var(--dg-text-muted)]')}
onClick={() => {
setAutoScroll(!autoScroll);
if (!autoScroll && scrollRef.current) {
frontend/src/components/kubernetes/PodMetricsPage.tsx
+52 -56
View File
@@ -1,6 +1,5 @@
import { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { useParams, useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
@@ -9,8 +8,11 @@ import {
import {
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import { Cpu, HardDrive, RefreshCw, ChevronRight, Activity } from 'lucide-react';
import { Cpu, HardDrive, RefreshCw, Activity } from 'lucide-react';
import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
export default function PodMetricsPage() {
@@ -78,75 +80,69 @@ export default function PodMetricsPage() {
return sum;
}, [rows]);
return (
<div className="space-y-4">
<div className="flex items-center gap-2 text-sm text-slate-500">
<Link to="/kubernetes" className="hover:text-slate-300">集群</Link>
{activeCluster && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${activeCluster}`} className="hover:text-slate-300">{activeCluster}</Link></>}
<ChevronRight className="h-3 w-3" /><span className="text-slate-300">Pod 资源用量</span>
</div>
const clusterName = clusters.find((c: JsonData) => (c.code || String(c.id)) === activeCluster)?.name;
<div className="flex items-center justify-between flex-wrap gap-3">
<h2 className="text-lg font-semibold text-slate-100 flex items-center gap-2"><Activity className="h-5 w-5 text-blue-400" />Pod 资源用量</h2>
<div className="flex items-center gap-2">
return (
<PageShell
variant="list"
title="Pod 资源用量"
subtitle={clusterName ? `${clusterName} · 容器 CPU/内存实时指标` : '容器 CPU/内存实时指标'}
icon={<Activity className="h-5 w-5" />}
metrics={!loading ? (
<StatStrip
items={[
{ label: 'Pod 数', value: metrics.length, color: 'muted' },
{ label: '总 CPU', value: `${totalCPU}m`, color: 'blue' },
{ label: '总内存', value: `${totalMem.toFixed(0)}Mi`, color: 'green' },
]}
/>
) : undefined}
actions={(
<>
<Select value={activeCluster} onValueChange={v => { setActiveCluster(v); navigate(`/kubernetes/${v}/metrics/pods`); }}>
<SelectTrigger className="w-44 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue /></SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
{clusters.map((c: JsonData) => <SelectItem key={c.id} value={c.code || String(c.id)} className="text-xs">{c.name || c.code}</SelectItem>)}
<SelectTrigger className="w-44 h-9 dg-input"><SelectValue /></SelectTrigger>
<SelectContent>
{clusters.map((c: JsonData) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name || c.code}</SelectItem>)}
</SelectContent>
</Select>
<Select value={selectedNs} onValueChange={setSelectedNs}>
<SelectTrigger className="w-36 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectItem value="all" className="text-xs">所有命名空间</SelectItem>
{namespaces.map(n => <SelectItem key={n} value={n} className="text-xs">{n}</SelectItem>)}
<SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
<SelectContent>
<SelectItem value="all">所有命名空间</SelectItem>
{namespaces.map(n => <SelectItem key={n} value={n}>{n}</SelectItem>)}
</SelectContent>
</Select>
<Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 text-xs" onClick={loadMetrics} disabled={loading}>
<RefreshCw className={`h-3 w-3 mr-1 ${loading ? 'animate-spin' : ''}`} />刷新
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadMetrics} disabled={loading}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
刷新
</Button>
</div>
</div>
{/* Summary cards */}
<div className="grid grid-cols-3 gap-3">
<Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
<p className="text-xs text-slate-500">Pod 数</p><p className="text-xl font-bold text-slate-200">{metrics.length}</p>
</CardContent></Card>
<Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
<p className="text-xs text-slate-500">总 CPU</p><p className="text-xl font-bold text-blue-400">{totalCPU}m</p>
</CardContent></Card>
<Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
<p className="text-xs text-slate-500">总内存</p><p className="text-xl font-bold text-emerald-400">{totalMem.toFixed(0)}Mi</p>
</CardContent></Card>
</div>
<Card className="bg-slate-900 border-slate-800">
<CardContent className="p-0">
</>
)}
>
<ContentPanel>
<Table>
<TableHeader><TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="text-slate-400">Pod</TableHead>
<TableHead className="text-slate-400">命名空间</TableHead>
<TableHead className="text-slate-400">容器</TableHead>
<TableHead className="text-slate-400"><Cpu className="h-3 w-3 inline mr-1" />CPU</TableHead>
<TableHead className="text-slate-400"><HardDrive className="h-3 w-3 inline mr-1" />Memory</TableHead>
<TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">Pod</TableHead>
<TableHead className="dg-text-secondary">命名空间</TableHead>
<TableHead className="dg-text-secondary">容器</TableHead>
<TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU</TableHead>
<TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Memory</TableHead>
</TableRow></TableHeader>
<TableBody>
{rows.length === 0 ? (
<TableRow><TableCell colSpan={5} className="text-center text-slate-500 py-8">暂无数据{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
<TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-8">暂无数据{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
) : rows.map((r, i) => (
<TableRow key={`${r.pod}-${r.container}-${i}`} className="border-slate-800 hover:bg-slate-800/30">
<TableCell className="font-medium text-slate-200 text-sm">{r.pod}</TableCell>
<TableCell><Badge variant="outline" className="border-slate-700 text-slate-400 text-xs">{r.namespace}</Badge></TableCell>
<TableCell className="text-sm text-slate-400">{r.container}</TableCell>
<TableCell className="text-sm text-blue-400">{r.cpu}</TableCell>
<TableCell className="text-sm text-emerald-400">{r.memory}</TableCell>
<TableRow key={`${r.pod}-${r.container}-${i}`} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<TableCell className="font-medium text-[var(--dg-text-primary)] text-sm">{r.pod}</TableCell>
<TableCell><Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-xs">{r.namespace}</Badge></TableCell>
<TableCell className="text-sm dg-text-secondary">{r.container}</TableCell>
<TableCell className="text-sm dg-text-blue">{r.cpu}</TableCell>
<TableCell className="text-sm dg-text-green">{r.memory}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</div>
</ContentPanel>
</PageShell>
);
}
frontend/src/components/kubernetes/ResourceVisualEditor.tsx
+11 -11
View File
@@ -158,11 +158,11 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
const resCfg = getYamlResourceConfig(resource);
const resourceMeta: Record<string, { title: string; icon: ComponentType<{ className?: string }>; color: string }> = {
configmaps: { title: 'ConfigMap', icon: FileText, color: 'text-blue-400' },
secrets: { title: 'Secret', icon: Shield, color: 'text-amber-400' },
services: { title: 'Service', icon: Network, color: 'text-cyan-400' },
ingresses: { title: 'Ingress', icon: ChevronRight, color: 'text-purple-400' },
pvcs: { title: 'PersistentVolumeClaim', icon: Database, color: 'text-emerald-400' },
configmaps: { title: 'ConfigMap', icon: FileText, color: 'dg-text-blue' },
secrets: { title: 'Secret', icon: Shield, color: 'dg-text-yellow' },
services: { title: 'Service', icon: Network, color: 'dg-text-cyan' },
ingresses: { title: 'Ingress', icon: ChevronRight, color: 'dg-text-purple' },
pvcs: { title: 'PersistentVolumeClaim', icon: Database, color: 'dg-text-green' },
};
const meta = resourceMeta[resource] || resourceMeta.configmaps;
const MetaIcon = meta.icon;
@@ -338,7 +338,7 @@ function ConfigMapEditor({ manifest, onSave, saving, isCreate }: { manifest: any
rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)}
className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed"
/>
<Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300 shrink-0" onClick={() => removeRow(i)}>
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red shrink-0" onClick={() => removeRow(i)}>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
@@ -439,7 +439,7 @@ function SecretEditor({ manifest, onSave, saving, isCreate }: { manifest: any; o
rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)}
className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed"
/>
<Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300 shrink-0" onClick={() => removeRow(i)}>
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red shrink-0" onClick={() => removeRow(i)}>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
@@ -564,7 +564,7 @@ function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any;
{svcType === 'NodePort' ? (
<Input value={p.nodePort} onChange={e => updatePort(i, 'nodePort', e.target.value)} placeholder="NodePort" type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
) : <div />}
<Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => removePort(i)}><Trash2 className="h-3 w-3" /></Button>
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => removePort(i)}><Trash2 className="h-3 w-3" /></Button>
</div>
</div>
))}
@@ -584,7 +584,7 @@ function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any;
<Input value={s.key} onChange={e => updateSelector(i, 'key', e.target.value)} placeholder="键 (如 app)" className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<span className="text-[var(--dg-text-muted)] text-xs shrink-0">=</span>
<Input value={s.value} onChange={e => updateSelector(i, 'value', e.target.value)} placeholder="值 (如 nginx)" className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-red-400 hover:text-red-300" onClick={() => removeSelector(i)}><Trash2 className="h-3 w-3" /></Button>
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 dg-text-red hover:dg-text-red" onClick={() => removeSelector(i)}><Trash2 className="h-3 w-3" /></Button>
</div>
))}
{selector.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs">暂无选择器</div>}
@@ -769,7 +769,7 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
title={rule.host}
/>
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-red-400 hover:text-red-300" onClick={() => removeRule(ri)}><Trash2 className="h-3 w-3" /></Button>
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 dg-text-red hover:dg-text-red" onClick={() => removeRule(ri)}><Trash2 className="h-3 w-3" /></Button>
</div>
{rule.paths.map((p, pi) => (
<div key={pi} className="overflow-x-auto pl-4">
@@ -781,7 +781,7 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
</Select>
<Input value={p.serviceName} onChange={e => updatePath(ri, pi, 'serviceName', e.target.value)} placeholder="Service" className="font-mono text-xs h-7 min-w-0 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<Input value={p.servicePort} onChange={e => updatePath(ri, pi, 'servicePort', e.target.value)} placeholder="端口" type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => removePath(ri, pi)}><Trash2 className="h-3 w-3" /></Button>
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => removePath(ri, pi)}><Trash2 className="h-3 w-3" /></Button>
</div>
</div>
))}
frontend/src/components/kubernetes/TopologyView.tsx
+101 -110
View File
@@ -25,6 +25,8 @@ import {
buildTopology, getNodeIcon, getNodeColor, NODE_TYPE_LABELS, CUSTOM_NODE_TYPES,
isCustomNode, type TopologyLayoutData,
} from './topology-helpers';
import { PageShell } from '@/components/layout/PageShell';
import { StatStrip } from '@/components/ui/stat-strip';
export function TopologyView() {
const { t } = useTranslation();
@@ -294,7 +296,7 @@ export function TopologyView() {
const ys = [60, 180, 320, 480, 640];
const labels = [t('k8s.tab.overview'), 'Ingress', 'Service', 'Deployment', 'Node'];
return (
<svg ref={svgRef} width="100%" height="100%" viewBox={`0 0 ${canvasW} ${canvasH}`} className="bg-slate-950 rounded-lg" preserveAspectRatio="xMidYMin meet"
<svg ref={svgRef} width="100%" height="100%" viewBox={`0 0 ${canvasW} ${canvasH}`} className="bg-[var(--dg-bg-primary)] rounded-lg" preserveAspectRatio="xMidYMin meet"
onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp}>
<defs>
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
@@ -360,126 +362,115 @@ export function TopologyView() {
return (
<div className="grid grid-cols-2 gap-3">
{entries.map(([key, val]) => (
<div key={key} className="p-2 rounded-lg bg-slate-800/50">
<p className="text-xs text-slate-500 mb-0.5">{key}</p>
<p className="text-sm text-slate-200 truncate" title={String(val)}>{val === null || val === undefined ? '—' : String(val)}</p>
<div key={key} className="p-2 rounded-lg bg-[var(--dg-bg-tertiary)]/50">
<p className="text-xs dg-text-muted mb-0.5">{key}</p>
<p className="text-sm text-[var(--dg-text-primary)] truncate" title={String(val)}>{val === null || val === undefined ? '—' : String(val)}</p>
</div>
))}
</div>
);
};
const selectedClusterName = clusters.find((c) => String(c.id) === selectedClusterId)?.name;
const filterToolbar = (
<div className="flex items-center gap-3">
<div className="relative w-48">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input placeholder={t('k8s.topology.searchPlaceholder')} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-9 h-9 dg-input" />
</div>
<Select value={viewType} onValueChange={setViewType}>
<SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder={t('k8s.topology.nodeTypeLabel')} /></SelectTrigger>
<SelectContent className="dg-input">
<SelectItem value="all">{t('k8s.topology.allTypes')}</SelectItem>
{Object.entries(NODE_TYPE_LABELS).map(([v, l]) => <SelectItem key={v} value={v}>{l}</SelectItem>)}
</SelectContent>
</Select>
</div>
);
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-slate-100">{t('k8s.topology.title')}</h1>
<p className="text-sm text-slate-500 mt-1">
{t('k8s.topology.subtitle')}
{editMode && <span className="text-amber-400 ml-2">{`· ${t('k8s.topology.editModeActive')}`}</span>}
{connectMode && <span className="text-amber-400 ml-1">{`· ${t('k8s.topology.connecting')} ${connectSource ? t('k8s.topology.selectTarget') : t('k8s.topology.selectSource')}`}</span>}
</p>
</div>
<div className="flex items-center gap-2">
<PageShell
variant="workspace"
title={t('k8s.topology.title')}
subtitle={(
<>
{selectedClusterName || t('k8s.topology.subtitle')}
{editMode && <span className="dg-text-yellow ml-2">{`· ${t('k8s.topology.editModeActive')}`}</span>}
{connectMode && <span className="dg-text-yellow ml-1">{`· ${t('k8s.topology.connecting')} ${connectSource ? t('k8s.topology.selectTarget') : t('k8s.topology.selectSource')}`}</span>}
</>
)}
metrics={!loading ? (
<StatStrip
items={[
{ label: t('k8s.topology.totalNodes'), value: topology.nodes.length, color: 'blue' },
{ label: t('k8s.topology.connections'), value: topology.edges.length, color: 'purple' },
{ label: 'Service', value: countByType('service'), color: 'green' },
{ label: 'Deployment', value: countByType('app'), color: 'red' },
{ label: t('k8s.topology.custom2'), value: topology.nodes.filter((n) => isCustomNode(n.id)).length, color: 'amber' },
]}
/>
) : undefined}
toolbar={filterToolbar}
actions={(
<>
<Select value={selectedClusterId} onValueChange={(v) => { setSelectedClusterId(v); setSelectedNode(null); setEditMode(false); }}>
<SelectTrigger className="w-44 h-9 bg-slate-800/50 border-slate-700 text-slate-200"><SelectValue placeholder={t('k8s.topology.selectCluster')} /></SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectTrigger className="w-44 h-9 dg-input"><SelectValue placeholder={t('k8s.topology.selectCluster')} /></SelectTrigger>
<SelectContent className="dg-input">
{clusters.map((c) => <SelectItem key={c.id} value={String(c.id)}>{c.name}</SelectItem>)}
</SelectContent>
</Select>
<Button variant={editMode ? 'default' : 'outline'} size="sm" className="h-9"
<Button variant={editMode ? 'default' : 'outline'} size="sm" className="dg-btn-secondary"
onClick={() => { setEditMode(!editMode); setConnectMode(false); setConnectSource(null); }}>
<Pencil className="h-4 w-4 mr-1" />{editMode ? t('k8s.topology.exitEdit') : t('common.edit')}
</Button>
<Button variant="outline" size="icon" className="h-9 w-9 border-slate-700 text-slate-400" onClick={loadTopology} disabled={loading}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadTopology} disabled={loading}>
<RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
{t('common.refresh')}
</Button>
<Button
variant="outline"
size="sm"
className="h-9 text-xs border-blue-600/40 text-blue-400"
onClick={async () => {
setSavedLayout(null);
await loadTopology();
}}
className="dg-btn-secondary"
onClick={async () => { setSavedLayout(null); await loadTopology(); }}
disabled={loading}
title={t('k8s.topology.autoGenerateTitle')}
>
<RotateCcw className="h-3.5 w-3.5 mr-1" /> {t('k8s.topology.autoGenerate')}
</Button>
</div>
</div>
{/* 编辑模式工具栏 */}
</>
)}
>
{/* 编辑模式工具栏 // Logan.Li */}
{editMode && (
<div className="flex items-center gap-2 p-3 rounded-lg bg-slate-800/50 border border-slate-700">
<Button size="sm" variant="outline" className="border-slate-600 text-slate-200" onClick={handleAddNode}>
<div className="flex items-center gap-2 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]">
<Button size="sm" variant="outline" className="border-[var(--dg-border-hover)] text-[var(--dg-text-primary)]" onClick={handleAddNode}>
<Plus className="h-4 w-4 mr-1" />{t('k8s.topology.addNode')}
</Button>
<Button size="sm" variant={connectMode ? 'default' : 'outline'} className={connectMode ? 'bg-amber-600 hover:bg-amber-700' : 'border-slate-600 text-slate-200'}
<Button size="sm" variant={connectMode ? 'default' : 'outline'} className={connectMode ? 'bg-amber-600 hover:bg-amber-700' : 'border-[var(--dg-border-hover)] text-[var(--dg-text-primary)]'}
onClick={() => { setConnectMode(!connectMode); setConnectSource(null); }}>
<Link2 className="h-4 w-4 mr-1" />{connectMode ? t('k8s.topology.cancelConnect') : t('k8s.topology.addConnection')}
</Button>
<div className="h-5 w-px bg-slate-600" />
<Button size="sm" variant="outline" className="border-emerald-600/30 text-emerald-400 hover:bg-emerald-600/10" onClick={handleSaveLayout} disabled={saving}>
<div className="h-5 w-px bg-[var(--dg-bg-active)]" />
<Button size="sm" variant="outline" className="border-emerald-600/30 dg-text-green hover:bg-emerald-600/10" onClick={handleSaveLayout} disabled={saving}>
<Save className="h-4 w-4 mr-1" />{saving ? t('k8s.topology.saving') : t('k8s.topology.saveLayout')}
</Button>
<Button size="sm" variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={handleResetLayout}>
<Button size="sm" variant="outline" className="border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={handleResetLayout}>
<RotateCcw className="h-4 w-4 mr-1" />{t('k8s.topology.resetLayout')}
</Button>
<span className="text-xs text-slate-500 ml-auto">{t('k8s.topology.editToolbarHint')}</span>
<span className="text-xs dg-text-muted ml-auto">{t('k8s.topology.editToolbarHint')}</span>
</div>
)}
{/* Stats */}
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
{[
{ label: t('k8s.topology.totalNodes'), value: topology.nodes.length, icon: <Cloud className="h-5 w-5" />, color: 'text-blue-400', bg: 'bg-blue-500/10' },
{ label: t('k8s.topology.connections'), value: topology.edges.length, icon: <Link2 className="h-5 w-5" />, color: 'text-purple-400', bg: 'bg-purple-500/10' },
{ label: 'Service', value: countByType('service'), icon: getNodeIcon('service'), color: 'text-emerald-400', bg: 'bg-emerald-500/10' },
{ label: 'Deployment', value: countByType('app'), icon: getNodeIcon('app'), color: 'text-rose-400', bg: 'bg-rose-500/10' },
{ label: t('k8s.topology.custom2'), value: topology.nodes.filter((n) => isCustomNode(n.id)).length, icon: getNodeIcon('custom'), color: 'text-amber-400', bg: 'bg-amber-500/10' },
].map((s) => (
<Card key={s.label} className="bg-slate-900 border-slate-800">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-slate-500">{s.label}</p>
<p className={`text-2xl font-bold ${s.color}`}>{s.value}</p>
</div>
<div className={`p-3 rounded-lg ${s.bg} ${s.color}`}>{s.icon}</div>
</div>
</CardContent>
</Card>
))}
</div>
{/* Filters */}
<div className="flex items-center gap-3">
<div className="relative w-48">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
<Input placeholder={t('k8s.topology.searchPlaceholder')} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
</div>
<Select value={viewType} onValueChange={setViewType}>
<SelectTrigger className="w-36 h-9 bg-slate-800/50 border-slate-700 text-slate-200"><SelectValue placeholder={t('k8s.topology.nodeTypeLabel')} /></SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectItem value="all">{t('k8s.topology.allTypes')}</SelectItem>
{Object.entries(NODE_TYPE_LABELS).map(([v, l]) => <SelectItem key={v} value={v}>{l}</SelectItem>)}
</SelectContent>
</Select>
</div>
{/* Canvas + Node List */}
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
<div className="lg:col-span-3">
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-4">
<div className={`h-[600px] overflow-auto ${connectMode ? 'ring-2 ring-amber-500/30 rounded-lg' : ''}`}>
{loading ? (
<div className="flex items-center justify-center h-full"><Loader2 className="h-8 w-8 animate-spin text-slate-600" /></div>
<div className="flex items-center justify-center h-full"><Loader2 className="h-8 w-8 animate-spin dg-text-muted" /></div>
) : topology.nodes.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-slate-600">
<div className="flex flex-col items-center justify-center h-full dg-text-muted">
<Cloud className="h-12 w-12 mb-3 opacity-50" />
<p className="text-sm">{selectedClusterId ? t('k8s.topology.noDataWithCluster') : t('k8s.topology.noDataSelectCluster')}</p>
</div>
@@ -489,22 +480,22 @@ export function TopologyView() {
</Card>
</div>
<div>
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-2">
<CardTitle className="text-base text-slate-100">{t('k8s.topology.nodeList')}</CardTitle>
<CardDescription className="text-slate-500">{t('k8s.topology.clickToViewDetail')}</CardDescription>
<CardTitle className="text-base text-[var(--dg-text-primary)]">{t('k8s.topology.nodeList')}</CardTitle>
<CardDescription className="dg-text-muted">{t('k8s.topology.clickToViewDetail')}</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2 max-h-[520px] overflow-auto">
{filteredNodes.length === 0 ? (
<p className="text-sm text-slate-600 text-center py-8">{t('k8s.topology.noNodes')}</p>
<p className="text-sm dg-text-muted text-center py-8">{t('k8s.topology.noNodes')}</p>
) : (
filteredNodes.map((node) => (
<div key={node.id} className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors ${selectedNode?.id === node.id ? 'bg-blue-500/10 border border-blue-500/30' : 'hover:bg-slate-800/50'}`} onClick={() => setSelectedNode(node)}>
<div key={node.id} className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors ${selectedNode?.id === node.id ? 'bg-blue-500/10 border border-blue-500/30' : 'hover:bg-[var(--dg-bg-hover)]'}`} onClick={() => setSelectedNode(node)}>
<div className={`p-2 rounded-lg ${getNodeColor(node.type)}`}>{getNodeIcon(node.type)}</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-slate-200 truncate">{node.name}</p>
<p className="text-xs text-slate-500">{NODE_TYPE_LABELS[node.type] || node.type}{isCustomNode(node.id) ? ` · ${t('k8s.topology.customSuffix')}` : ''}</p>
<p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{node.name}</p>
<p className="text-xs dg-text-muted">{NODE_TYPE_LABELS[node.type] || node.type}{isCustomNode(node.id) ? ` · ${t('k8s.topology.customSuffix')}` : ''}</p>
</div>
</div>
))
@@ -517,45 +508,45 @@ export function TopologyView() {
{/* Node Detail Dialog */}
<Dialog open={!!selectedNode} onOpenChange={() => setSelectedNode(null)}>
<DialogContent className="bg-slate-900 border-slate-800 max-w-lg">
<DialogContent className="dg-card max-w-lg">
<DialogHeader>
<DialogTitle className="text-slate-100 flex items-center gap-2">
<DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<div className={`p-2 rounded-lg ${getNodeColor(selectedNode?.type || 'server')}`}>{selectedNode && getNodeIcon(selectedNode.type)}</div>
{selectedNode?.name}
{selectedNode && isCustomNode(selectedNode.id) && <Badge variant="outline" className="border-amber-500/30 text-amber-400 text-xs">{t('k8s.topology.custom2')}</Badge>}
{selectedNode && isCustomNode(selectedNode.id) && <Badge variant="outline" className="border-amber-500/30 dg-text-yellow text-xs">{t('k8s.topology.custom2')}</Badge>}
</DialogTitle>
<DialogDescription className="text-slate-500">{t('common.type')}: {NODE_TYPE_LABELS[selectedNode?.type || ''] || selectedNode?.type}</DialogDescription>
<DialogDescription className="dg-text-muted">{t('common.type')}: {NODE_TYPE_LABELS[selectedNode?.type || ''] || selectedNode?.type}</DialogDescription>
</DialogHeader>
{selectedNode && (
<div className="space-y-4">
{renderNodeDetailFields(selectedNode)}
<div>
<h4 className="text-sm font-medium text-slate-300 mb-2">{t('k8s.topology.relatedConnections')}</h4>
<h4 className="text-sm font-medium text-[var(--dg-text-secondary)] mb-2">{t('k8s.topology.relatedConnections')}</h4>
<div className="space-y-2">
{topology.edges.filter((e) => e.source === selectedNode.id || e.target === selectedNode.id).map((edge) => {
const isSource = edge.source === selectedNode.id;
const related = topology.nodes.find((n) => n.id === (isSource ? edge.target : edge.source));
if (!related) return null;
return (
<div key={edge.id} className="flex items-center gap-2 p-2 rounded-lg bg-slate-800/50">
<span className="text-sm text-slate-400">{isSource ? '→' : '←'}</span>
<div key={edge.id} className="flex items-center gap-2 p-2 rounded-lg bg-[var(--dg-bg-tertiary)]/50">
<span className="text-sm dg-text-secondary">{isSource ? '→' : '←'}</span>
<div className={`p-1 rounded ${getNodeColor(related.type)}`}>{getNodeIcon(related.type, 'h-4 w-4')}</div>
<span className="text-sm text-slate-300">{related.name}</span>
<Badge variant="outline" className="ml-auto border-slate-700 text-slate-400 text-xs">{edge.label}</Badge>
<span className="text-sm text-[var(--dg-text-secondary)]">{related.name}</span>
<Badge variant="outline" className="ml-auto border-[var(--dg-border)] dg-text-secondary text-xs">{edge.label}</Badge>
</div>
);
})}
{topology.edges.filter((e) => e.source === selectedNode.id || e.target === selectedNode.id).length === 0 && <p className="text-xs text-slate-600">{t('k8s.topology.noConnections')}</p>}
{topology.edges.filter((e) => e.source === selectedNode.id || e.target === selectedNode.id).length === 0 && <p className="text-xs dg-text-muted">{t('k8s.topology.noConnections')}</p>}
</div>
</div>
{/* 编辑模式操作按钮 */}
{editMode && selectedNode && (
<div className="flex gap-2 pt-2 border-t border-slate-700">
<Button size="sm" variant="outline" className="border-slate-600 text-slate-200" onClick={() => handleEditNode(selectedNode)}>
<div className="flex gap-2 pt-2 border-t border-[var(--dg-border)]">
<Button size="sm" variant="outline" className="border-[var(--dg-border-hover)] text-[var(--dg-text-primary)]" onClick={() => handleEditNode(selectedNode)}>
<Pencil className="h-3.5 w-3.5 mr-1" />{t('common.edit')}
</Button>
{isCustomNode(selectedNode.id) && (
<Button size="sm" variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={() => handleDeleteNode(selectedNode)}>
<Button size="sm" variant="outline" className="border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={() => handleDeleteNode(selectedNode)}>
<Trash2 className="h-3.5 w-3.5 mr-1" />{t('common.delete')}
</Button>
)}
@@ -568,38 +559,38 @@ export function TopologyView() {
{/* Edit/Add Node Dialog */}
<Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
<DialogContent className="bg-slate-900 border-slate-800 max-w-md">
<DialogContent className="dg-card max-w-md">
<DialogHeader>
<DialogTitle className="text-slate-100">{editingNode ? t('k8s.topology.editNodeTitle') : t('k8s.topology.addNodeTitle')}</DialogTitle>
<DialogDescription className="text-slate-500">{editingNode ? t('k8s.topology.editNodeDesc') : t('k8s.topology.addNodeDesc')}</DialogDescription>
<DialogTitle className="text-[var(--dg-text-primary)]">{editingNode ? t('k8s.topology.editNodeTitle') : t('k8s.topology.addNodeTitle')}</DialogTitle>
<DialogDescription className="dg-text-muted">{editingNode ? t('k8s.topology.editNodeDesc') : t('k8s.topology.addNodeDesc')}</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<div className="space-y-2">
<Label className="text-slate-300">{t('k8s.topology.nodeName')}</Label>
<Label className="text-[var(--dg-text-secondary)]">{t('k8s.topology.nodeName')}</Label>
<Input value={editForm.name} onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
placeholder={t('k8s.topology.namePlaceholder')} className="bg-slate-800/50 border-slate-700 text-slate-200" />
placeholder={t('k8s.topology.namePlaceholder')} className="dg-input" />
</div>
<div className="space-y-2">
<Label className="text-slate-300">{t('k8s.topology.nodeType')}</Label>
<Label className="text-[var(--dg-text-secondary)]">{t('k8s.topology.nodeType')}</Label>
<Select value={editForm.type} onValueChange={(v) => setEditForm({ ...editForm, type: v as TopologyNode['type'] })}>
<SelectTrigger className="bg-slate-800/50 border-slate-700 text-slate-200"><SelectValue /></SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700">
<SelectTrigger className="dg-input"><SelectValue /></SelectTrigger>
<SelectContent className="dg-input">
{CUSTOM_NODE_TYPES.map((t) => <SelectItem key={t.value} value={t.value}>{t.label} — {t.desc}</SelectItem>)}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-slate-300">{t('k8s.topology.nodeNote')}</Label>
<Label className="text-[var(--dg-text-secondary)]">{t('k8s.topology.nodeNote')}</Label>
<Textarea value={editForm.note} onChange={(e) => setEditForm({ ...editForm, note: e.target.value })}
placeholder={t('k8s.topology.notePlaceholder')} rows={2} className="bg-slate-800/50 border-slate-700 text-slate-200 resize-none" />
placeholder={t('k8s.topology.notePlaceholder')} rows={2} className="dg-input resize-none" />
</div>
</div>
<DialogFooter>
<Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => setEditDialogOpen(false)}>{t('common.cancel')}</Button>
<Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setEditDialogOpen(false)}>{t('common.cancel')}</Button>
<Button onClick={handleSaveNode}>{editingNode ? t('common.save') : t('k8s.topology.add2')}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</PageShell>
);
}
frontend/src/components/kubernetes/WorkloadViewPage.tsx
+35 -44
View File
@@ -20,6 +20,7 @@ import { YamlViewer } from './YamlViewer';
import { PodExecTerminal } from './PodExecTerminal';
import { PodFileBrowser } from './PodFileBrowser';
import { formatK8sTime, statusColor, STATUS_COLORS } from './k8s-yaml-utils';
import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common';
type WorkloadKind = 'StatefulSet' | 'DaemonSet';
@@ -187,60 +188,50 @@ export default function WorkloadViewPage() {
const labels = manifest?.metadata?.labels || {};
const annotations = manifest?.metadata?.annotations || {};
const modeTabs = (
<div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-0.5">
<button className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'view' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`} onClick={() => handleModeChange('view')}>查看</button>
<button className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'yaml' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`} onClick={() => handleModeChange('yaml')}>YAML</button>
</div>
);
return (
<div className="p-4 space-y-4">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]" onClick={() => navigate(-1)}>
<ArrowLeft className="h-4 w-4" />
<PageShell
variant="workspace"
title={name}
subtitle={`${clusterCode} / ${namespace} · ${kind}`}
icon={<Boxes className="h-5 w-5" />}
loading={loading}
loadingLabel="加载工作负载..."
actions={(
<>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => navigate(-1)}>
<ArrowLeft className="h-4 w-4 mr-1" />返回
</Button>
<Boxes className="h-5 w-5 text-[var(--dg-blue)]" />
<div>
<div className="flex items-center gap-2">
<h1 className="text-lg font-bold text-[var(--dg-text-primary)]">{name}</h1>
<Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{kind}</Badge>
<Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{namespace}</Badge>
{isHealthy
? <Badge className="bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30">健康</Badge>
: <Badge className="bg-[var(--dg-orange)]/20 text-[var(--dg-orange)] border-[var(--dg-orange)]/30">更新中</Badge>}
</div>
<p className="text-xs text-[var(--dg-text-muted)] mt-0.5">集群: {clusterCode}</p>
</div>
</div>
<div className="flex items-center gap-2">
{/* Mode tabs */}
<div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-0.5">
<button
className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'view' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`}
onClick={() => handleModeChange('view')}
>查看</button>
<button
className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'yaml' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`}
onClick={() => handleModeChange('yaml')}
>YAML</button>
</div>
{/* Actions */}
{modeTabs}
{isSts && (
<Button variant="outline" size="sm" className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
onClick={() => { setScaleValue(replicas); setScaleModal(true); }}>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { setScaleValue(replicas); setScaleModal(true); }}>
<Boxes className="h-3.5 w-3.5 mr-1" />伸缩
</Button>
)}
<Button variant="outline" size="sm" className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
disabled={actionLoading} onClick={handleRestart}>
<Button variant="outline" size="sm" className="dg-btn-secondary" disabled={actionLoading} onClick={handleRestart}>
<RotateCcw className="h-3.5 w-3.5 mr-1" />{actionLoading ? '重启中...' : '重启'}
</Button>
<Button variant="outline" size="sm" className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
onClick={() => setYamlModal(true)}>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => setYamlModal(true)}>
<FileCode className="h-3.5 w-3.5 mr-1" />YAML
</Button>
</div>
</>
)}
>
<div className="flex items-center gap-2 mb-4">
<Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{kind}</Badge>
<Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{namespace}</Badge>
{isHealthy
? <Badge className="bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30">健康</Badge>
: <Badge className="bg-[var(--dg-orange)]/20 text-[var(--dg-orange)] border-[var(--dg-orange)]/30">更新中</Badge>}
</div>
{loading ? (
<div className="text-center text-[var(--dg-text-muted)] py-20">加载中...</div>
) : mode === 'yaml' ? (
{!loading && (mode === 'yaml' ? (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4">
<YamlViewer
@@ -487,7 +478,7 @@ export default function WorkloadViewPage() {
</CardContent>
</Card>
</>
)}
))}
{/* Scale modal */}
{scaleModal && (
@@ -547,7 +538,7 @@ export default function WorkloadViewPage() {
containers={fileBrowserPod.containers?.map((c: JsonData) => c.name).filter(Boolean) || []}
/>
)}
</div>
</PageShell>
);
}
frontend/src/components/kubernetes/YamlCodeMirror.tsx
+2 -2
View File
@@ -76,14 +76,14 @@ export function YamlCodeMirror({
if (fill) {
return (
<div ref={containerRef} className={`flex-1 min-h-0 h-full overflow-hidden rounded-lg border border-slate-700 ${className}`}>
<div ref={containerRef} className={`flex-1 min-h-0 h-full overflow-hidden rounded-lg border border-[var(--dg-border)] ${className}`}>
{editor}
</div>
);
}
return (
<div className={`overflow-auto rounded-lg border border-slate-700 ${className}`}>
<div className={`overflow-auto rounded-lg border border-[var(--dg-border)] ${className}`}>
{editor}
</div>
);
frontend/src/components/kubernetes/YamlEditorToolbar.tsx
+6 -6
View File
@@ -26,23 +26,23 @@ export function YamlEditorToolbar({
const sz = compact ? 'h-7 text-xs' : 'h-8';
return (
<div className="flex items-center gap-2 flex-wrap">
<Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onCopy}>
{copied ? <Check className="h-3 w-3 mr-1 text-emerald-400" /> : <Copy className="h-3 w-3 mr-1" />}
<Button variant="outline" size="sm" className={`${sz} border-[var(--dg-border)] text-[var(--dg-text-secondary)]`} onClick={onCopy}>
{copied ? <Check className="h-3 w-3 mr-1 dg-text-green" /> : <Copy className="h-3 w-3 mr-1" />}
{copied ? '已复制' : '复制'}
</Button>
{onDownload && (
<Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onDownload}>
<Button variant="outline" size="sm" className={`${sz} border-[var(--dg-border)] text-[var(--dg-text-secondary)]`} onClick={onDownload}>
<Download className="h-3 w-3 mr-1" />下载
</Button>
)}
{!readOnly && (
!editing ? (
<Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onEdit}>
<Button variant="outline" size="sm" className={`${sz} border-[var(--dg-border)] text-[var(--dg-text-secondary)]`} onClick={onEdit}>
<Pencil className="h-3 w-3 mr-1" />编辑
</Button>
) : (
<>
<Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onCancel}>取消</Button>
<Button variant="outline" size="sm" className={`${sz} border-[var(--dg-border)] text-[var(--dg-text-secondary)]`} onClick={onCancel}>取消</Button>
<Button size="sm" className={`${sz} bg-blue-600 hover:bg-blue-700`} onClick={onSave} disabled={saving}>
{saving ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Save className="h-3 w-3 mr-1" />}
保存
@@ -54,7 +54,7 @@ export function YamlEditorToolbar({
<button
type="button"
onClick={onToggleRaw}
className="text-[11px] text-slate-500 hover:text-slate-300 underline-offset-2 hover:underline"
className="text-[11px] dg-text-muted hover:text-[var(--dg-text-secondary)] underline-offset-2 hover:underline"
>
{showRaw ? '精简视图' : '原始 YAML'}
</button>
frontend/src/components/kubernetes/YamlViewer.tsx
+10 -10
View File
@@ -148,7 +148,7 @@ export function YamlViewer({
const editor = loading ? (
<div className="flex items-center justify-center h-full min-h-[200px]">
<Loader2 className="h-6 w-6 animate-spin text-slate-500" />
<Loader2 className="h-6 w-6 animate-spin dg-text-muted" />
</div>
) : (
<YamlCodeMirror
@@ -164,9 +164,9 @@ export function YamlViewer({
return (
<div className="flex flex-col gap-3 min-h-[400px] h-[calc(100vh-220px)] max-h-[720px]">
<div className="flex items-center justify-between gap-3 flex-wrap shrink-0">
<p className="text-xs text-slate-500">
<code className="text-slate-400">{resource}/{name}</code>
{resourceHint ? <span className="text-slate-600"> · {resourceHint}</span> : null}
<p className="text-xs dg-text-muted">
<code className="dg-text-secondary">{resource}/{name}</code>
{resourceHint ? <span className="dg-text-muted"> · {resourceHint}</span> : null}
{' · '}{namespace}
</p>
{toolbar}
@@ -179,20 +179,20 @@ export function YamlViewer({
return (
<ModalOverlay onClose={onClose}>
<div
className="bg-slate-900 border border-slate-700 rounded-xl w-[92vw] max-w-5xl h-[85vh] flex flex-col shadow-2xl"
className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl w-[92vw] max-w-5xl h-[85vh] flex flex-col shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between p-4 border-b border-slate-700 gap-3 shrink-0">
<div className="flex items-center justify-between p-4 border-b border-[var(--dg-border)] gap-3 shrink-0">
<div className="min-w-0 flex-1">
<h2 className="text-lg font-bold text-slate-100 truncate" title={`${resCfg.label} YAML — ${name}`}>
<h2 className="text-lg font-bold text-[var(--dg-text-primary)] truncate" title={`${resCfg.label} YAML — ${name}`}>
{resCfg.label} YAML — {name}
{readOnly && <span className="ml-2 text-xs font-normal text-slate-500">只读</span>}
{readOnly && <span className="ml-2 text-xs font-normal dg-text-muted">只读</span>}
</h2>
<p className="text-xs text-slate-500 truncate" title={`${namespace} · ${clusterCode}`}>{namespace} · {clusterCode}</p>
<p className="text-xs dg-text-muted truncate" title={`${namespace} · ${clusterCode}`}>{namespace} · {clusterCode}</p>
</div>
<div className="flex items-center gap-2 shrink-0">
{toolbar}
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={onClose}><X className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary" onClick={onClose}><X className="h-4 w-4" /></Button>
</div>
</div>
<div className="flex-1 min-h-0 flex flex-col overflow-hidden p-4">{editor}</div>
frontend/src/components/kubernetes/deployment-detail/CreateHPADialog.tsx
+17 -17
View File
@@ -54,57 +54,57 @@ export function CreateHPADialog({ clusterCode, namespace, deploymentName, onCrea
return (
<>
<Button variant="outline" size="sm" className="border-slate-700 text-slate-300" onClick={() => setOpen(true)}>
<Button variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setOpen(true)}>
<Plus className="h-3.5 w-3.5 mr-1" />创建 HPA
</Button>
{open && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={() => setOpen(false)}>
<div className="bg-slate-900 border border-slate-700 rounded-xl w-[480px] max-w-[92vw] max-h-[85vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
<h2 className="text-lg font-bold text-slate-100 px-6 pt-6 pb-4 shrink-0">创建 HPA</h2>
<div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl w-[480px] max-w-[92vw] max-h-[85vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
<h2 className="text-lg font-bold text-[var(--dg-text-primary)] px-6 pt-6 pb-4 shrink-0">创建 HPA</h2>
<div className="flex-1 min-h-0 overflow-y-auto px-6 space-y-3">
<div>
<Label className="text-slate-400 text-sm">名称</Label>
<Label className="dg-text-secondary text-sm">名称</Label>
<Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
placeholder={`hpa-${deploymentName}`}
className="bg-slate-800 border-slate-700 text-slate-200 mt-1" />
className="dg-input mt-1" />
</div>
<div>
<Label className="text-slate-400 text-sm">目标</Label>
<p className="text-slate-300 text-sm mt-1 bg-slate-800 rounded px-3 py-2 truncate" title={`Deployment: ${deploymentName} · 命名空间: ${namespace}`}>
<Label className="dg-text-secondary text-sm">目标</Label>
<p className="text-[var(--dg-text-secondary)] text-sm mt-1 bg-[var(--dg-bg-tertiary)] rounded px-3 py-2 truncate" title={`Deployment: ${deploymentName} · 命名空间: ${namespace}`}>
Deployment: {deploymentName} · 命名空间: {namespace}
</p>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<Label className="text-slate-400 text-sm">最小副本数</Label>
<Label className="dg-text-secondary text-sm">最小副本数</Label>
<Input type="number" value={form.minReplicas} min={1}
onChange={(e) => setForm({ ...form, minReplicas: Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 mt-1" />
className="dg-input mt-1" />
</div>
<div>
<Label className="text-slate-400 text-sm">最大副本数</Label>
<Label className="dg-text-secondary text-sm">最大副本数</Label>
<Input type="number" value={form.maxReplicas} min={1}
onChange={(e) => setForm({ ...form, maxReplicas: Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 mt-1" />
className="dg-input mt-1" />
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<Label className="text-slate-400 text-sm">CPU 目标 (%)</Label>
<Label className="dg-text-secondary text-sm">CPU 目标 (%)</Label>
<Input type="number" value={form.cpuPercent} min={0} max={100}
onChange={(e) => setForm({ ...form, cpuPercent: Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 mt-1" />
className="dg-input mt-1" />
</div>
<div>
<Label className="text-slate-400 text-sm">内存目标 (%) <span className="text-slate-600">可选</span></Label>
<Label className="dg-text-secondary text-sm">内存目标 (%) <span className="dg-text-muted">可选</span></Label>
<Input type="number" value={form.memPercent} min={0} max={100}
onChange={(e) => setForm({ ...form, memPercent: Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 mt-1" />
className="dg-input mt-1" />
</div>
</div>
</div>
<div className="flex justify-end gap-2 px-6 py-4 border-t border-slate-700 shrink-0">
<Button variant="outline" className="border-slate-700 text-slate-400" onClick={() => setOpen(false)}>取消</Button>
<div className="flex justify-end gap-2 px-6 py-4 border-t border-[var(--dg-border)] shrink-0">
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={() => setOpen(false)}>取消</Button>
<Button className="bg-blue-600 hover:bg-blue-700" disabled={loading} onClick={handleCreate}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : '创建'}
</Button>
frontend/src/components/kubernetes/deployment-detail/DeploymentHpaTab.tsx
+15 -15
View File
@@ -28,10 +28,10 @@ export function DeploymentHpaTab({
}: DeploymentHpaTabProps) {
return (
<TabsContent value="hpa">
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<CardTitle className="text-sm text-slate-400">HPA 自动扩缩容</CardTitle>
<CardTitle className="text-sm dg-text-secondary">HPA 自动扩缩容</CardTitle>
<CreateHPADialog
clusterCode={clusterCode}
namespace={namespace}
@@ -42,7 +42,7 @@ export function DeploymentHpaTab({
</CardHeader>
<CardContent className="p-0">
{hpas.length === 0 ? (
<div className="text-center py-12 text-slate-500">
<div className="text-center py-12 dg-text-muted">
<Gauge className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p>未配置 HPA</p>
<p className="text-xs mt-1">点击右上角「创建 HPA」设置自动扩缩容</p>
@@ -50,12 +50,12 @@ export function DeploymentHpaTab({
) : (
<Table>
<TableHeader>
<TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="text-slate-400">名称</TableHead>
<TableHead className="text-slate-400">最小/最大</TableHead>
<TableHead className="text-slate-400">指标</TableHead>
<TableHead className="text-slate-400">当前/目标</TableHead>
<TableHead className="text-slate-400">操作</TableHead>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">名称</TableHead>
<TableHead className="dg-text-secondary">最小/最大</TableHead>
<TableHead className="dg-text-secondary">指标</TableHead>
<TableHead className="dg-text-secondary">当前/目标</TableHead>
<TableHead className="dg-text-secondary">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -67,13 +67,13 @@ export function DeploymentHpaTab({
if (mem) metricsParts.push(`MEM: ${mem}%`);
const metrics = metricsParts.join(', ') || '-';
return (
<TableRow key={hpa.name} className="border-slate-800 hover:bg-slate-800/30">
<TableCell className="font-medium text-slate-200">{hpa.name}</TableCell>
<TableCell className="text-slate-300">{hpa.min_replicas} / {hpa.max_replicas}</TableCell>
<TableCell className="text-sm text-slate-400">{metrics}</TableCell>
<TableCell className="text-slate-300">{hpa.current_replicas || 0}</TableCell>
<TableRow key={hpa.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{hpa.name}</TableCell>
<TableCell className="text-[var(--dg-text-secondary)]">{hpa.min_replicas} / {hpa.max_replicas}</TableCell>
<TableCell className="text-sm dg-text-secondary">{metrics}</TableCell>
<TableCell className="text-[var(--dg-text-secondary)]">{hpa.current_replicas || 0}</TableCell>
<TableCell>
<Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300"
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red"
onClick={() => onDeleteHpa(hpa)} title="删除 HPA">
<Trash2 className="h-3.5 w-3.5" />
</Button>
frontend/src/components/kubernetes/deployment-detail/DeploymentLogsTab.tsx
+10 -10
View File
@@ -33,32 +33,32 @@ export function DeploymentLogsTab({
}: DeploymentLogsTabProps) {
return (
<TabsContent value="logs">
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<CardTitle className="text-sm text-slate-400">Pod 日志</CardTitle>
<CardTitle className="text-sm dg-text-secondary">Pod 日志</CardTitle>
<div className="flex items-center gap-2">
<span className="text-xs text-slate-500">最近</span>
<span className="text-xs dg-text-muted">最近</span>
<Input
type="number" value={logTail} onChange={(e) => onLogTailChange(Number(e.target.value))}
className="w-20 h-7 bg-slate-800 border-slate-700 text-slate-200 text-xs"
className="w-20 h-7 dg-input text-xs"
/>
<span className="text-xs text-slate-500">行</span>
<span className="text-xs dg-text-muted">行</span>
</div>
</div>
</CardHeader>
<CardContent>
{pods.length === 0 ? (
<div className="text-center py-12 text-slate-500">
<div className="text-center py-12 dg-text-muted">
<FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p>暂无 Pod</p>
</div>
) : (
<div className="flex items-center gap-3 py-10 justify-center flex-wrap">
<FileText className="h-5 w-5 text-blue-400" />
<span className="text-sm text-slate-400">选择 Pod 打开增强版日志查看器</span>
<FileText className="h-5 w-5 dg-text-blue" />
<span className="text-sm dg-text-secondary">选择 Pod 打开增强版日志查看器</span>
<Select value={logsTabPod} onValueChange={onLogsTabPodChange}>
<SelectTrigger className="w-[280px] h-8 bg-slate-800 border-slate-700 text-slate-200 text-xs">
<SelectTrigger className="w-[280px] h-8 dg-input text-xs">
<SelectValue placeholder="选择 Pod…" />
</SelectTrigger>
<SelectContent>
@@ -78,7 +78,7 @@ export function DeploymentLogsTab({
>
<ExternalLink className="h-3 w-3 mr-1" />打开日志
</Button>
<span className="text-xs text-slate-600 block w-full text-center mt-2">
<span className="text-xs dg-text-muted block w-full text-center mt-2">
支持实时跟踪、多容器切换、previous 日志、关键字过滤、导出
</span>
</div>
frontend/src/components/kubernetes/deployment-detail/DeploymentOverview.tsx
+29 -29
View File
@@ -41,53 +41,53 @@ export function DeploymentOverview({
<>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Button variant="ghost" size="sm" className="text-slate-400" onClick={onBack}>
<Button variant="ghost" size="sm" className="dg-text-secondary" onClick={onBack}>
<ArrowLeft className="h-4 w-4 mr-1" />返回
</Button>
<div>
<div className="flex items-center gap-2">
<h1 className="text-xl font-bold text-slate-100">{deploymentName}</h1>
<Badge variant="outline" className="border-slate-700 text-slate-400">{namespace}</Badge>
<h1 className="text-xl font-bold text-[var(--dg-text-primary)]">{deploymentName}</h1>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{namespace}</Badge>
</div>
<p className="text-sm text-slate-500 mt-0.5">镜像: {deployment.image || '-'}</p>
<p className="text-sm dg-text-muted mt-0.5">镜像: {deployment.image || '-'}</p>
</div>
</div>
<Button variant="outline" size="sm" className="border-slate-700 text-slate-400" onClick={onRefresh}>
<Button variant="outline" size="sm" className="border-[var(--dg-border)] dg-text-secondary" onClick={onRefresh}>
<RefreshCw className="h-4 w-4 mr-1" />刷新
</Button>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-3">
<p className="text-xs text-slate-500">副本状态</p>
<p className={`text-lg font-bold ${isHealthy ? 'text-emerald-400' : 'text-amber-400'}`}>
<p className="text-xs dg-text-muted">副本状态</p>
<p className={`text-lg font-bold ${isHealthy ? 'dg-text-green' : 'dg-text-yellow'}`}>
{ready}/{total}
</p>
</CardContent>
</Card>
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-3">
<p className="text-xs text-slate-500">可用副本</p>
<p className="text-lg font-bold text-blue-400">{available}</p>
<p className="text-xs dg-text-muted">可用副本</p>
<p className="text-lg font-bold dg-text-blue">{available}</p>
</CardContent>
</Card>
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-3">
<p className="text-xs text-slate-500">镜像</p>
<p className="text-sm font-mono text-slate-300 truncate max-w-[200px]" title={deployment.image}>
<p className="text-xs dg-text-muted">镜像</p>
<p className="text-sm font-mono text-[var(--dg-text-secondary)] truncate max-w-[200px]" title={deployment.image}>
{deployment.image?.split('/').pop() || '-'}
</p>
</CardContent>
</Card>
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-3">
<p className="text-xs text-slate-500">HPA</p>
<p className="text-xs dg-text-muted">HPA</p>
{hpas.length > 0 ? (
<p className="text-lg font-bold text-purple-400">已启用</p>
<p className="text-lg font-bold dg-text-purple">已启用</p>
) : (
<div className="flex items-center justify-between">
<p className="text-lg font-bold text-slate-500">未配置</p>
<p className="text-lg font-bold dg-text-muted">未配置</p>
<CreateHPADialog
clusterCode={clusterCode}
namespace={namespace}
@@ -100,25 +100,25 @@ export function DeploymentOverview({
</Card>
</div>
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-base text-slate-200">操作</CardTitle>
<CardTitle className="text-base text-[var(--dg-text-primary)]">操作</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap items-center gap-3">
<div className="flex items-center gap-1 bg-slate-800 rounded-lg p-1">
<div className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] rounded-lg p-1">
<Button
variant="ghost" size="icon" className="h-8 w-8 text-slate-300 hover:text-slate-100"
variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
disabled={actionLoading === 'scale' || total <= 0}
onClick={() => onScale(-1)}
>
<Minus className="h-4 w-4" />
</Button>
<span className="text-sm font-mono text-slate-200 w-8 text-center">
<span className="text-sm font-mono text-[var(--dg-text-primary)] w-8 text-center">
{actionLoading === 'scale' ? <Loader2 className="h-4 w-4 animate-spin inline" /> : total}
</span>
<Button
variant="ghost" size="icon" className="h-8 w-8 text-slate-300 hover:text-slate-100"
variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
disabled={actionLoading === 'scale'}
onClick={() => onScale(1)}
>
@@ -126,7 +126,7 @@ export function DeploymentOverview({
</Button>
</div>
<Button
variant="outline" size="sm" className="border-slate-700 text-slate-300 hover:text-slate-100"
variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
disabled={actionLoading === 'restart'}
onClick={onRestart}
>
@@ -134,7 +134,7 @@ export function DeploymentOverview({
滚动重启
</Button>
<Button
variant="outline" size="sm" className="border-slate-700 text-slate-300 hover:text-slate-100"
variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
onClick={onToggleImageUpdate}
>
<Upload className="h-4 w-4 mr-1" />
@@ -142,12 +142,12 @@ export function DeploymentOverview({
</Button>
</div>
{showImageUpdate && (
<div className="mt-3 flex items-center gap-2 p-3 bg-slate-800/50 rounded-lg border border-slate-700">
<div className="mt-3 flex items-center gap-2 p-3 bg-[var(--dg-bg-tertiary)]/50 rounded-lg border border-[var(--dg-border)]">
<Input
value={newImage}
onChange={(e) => onNewImageChange(e.target.value)}
placeholder="输入新镜像地址，如 harbor.example.com/app:v2.0"
className="flex-1 h-9 bg-slate-900 border-slate-700 text-slate-200 text-sm font-mono"
className="flex-1 h-9 dg-input text-[var(--dg-text-primary)] text-sm font-mono"
/>
<Button size="sm" className="bg-blue-600 hover:bg-blue-700"
disabled={actionLoading === 'image' || !newImage.trim()}
@@ -155,7 +155,7 @@ export function DeploymentOverview({
>
{actionLoading === 'image' ? <Loader2 className="h-4 w-4 animate-spin" /> : '更新'}
</Button>
<Button variant="ghost" size="sm" className="text-slate-400" onClick={onToggleImageUpdate}>取消</Button>
<Button variant="ghost" size="sm" className="dg-text-secondary" onClick={onToggleImageUpdate}>取消</Button>
</div>
)}
</CardContent>
frontend/src/components/kubernetes/deployment-detail/DeploymentPodsTab.tsx
+21 -21
View File
@@ -22,60 +22,60 @@ export interface DeploymentPodsTabProps {
export function DeploymentPodsTab({ pods, onOpenLogsViewer, onOpenExec, onOpenFileBrowser, onOpenYaml }: DeploymentPodsTabProps) {
return (
<TabsContent value="pods">
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-0">
<Table>
<TableHeader>
<TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="text-slate-400">Pod 名称</TableHead>
<TableHead className="text-slate-400">状态</TableHead>
<TableHead className="text-slate-400">节点</TableHead>
<TableHead className="text-slate-400">IP</TableHead>
<TableHead className="text-slate-400">重启</TableHead>
<TableHead className="text-slate-400">操作</TableHead>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">Pod 名称</TableHead>
<TableHead className="dg-text-secondary">状态</TableHead>
<TableHead className="dg-text-secondary">节点</TableHead>
<TableHead className="dg-text-secondary">IP</TableHead>
<TableHead className="dg-text-secondary">重启</TableHead>
<TableHead className="dg-text-secondary">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{pods.length === 0 ? (
<TableRow>
<TableCell colSpan={6} className="text-center text-slate-500 py-8">
<TableCell colSpan={6} className="text-center dg-text-muted py-8">
暂无 Pod
</TableCell>
</TableRow>
) : (
pods.map((pod: JsonData) => (
<TableRow key={pod.name} className="border-slate-800 hover:bg-slate-800/30">
<TableCell className="font-medium text-slate-200">{pod.name}</TableCell>
<TableRow key={pod.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{pod.name}</TableCell>
<TableCell>
<Badge className={
pod.status === 'Running' ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' :
pod.status === 'Pending' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
'bg-red-500/20 text-red-400 border-red-500/30'
pod.status === 'Running' ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' :
pod.status === 'Pending' ? 'bg-yellow-500/20 dg-text-yellow border-yellow-500/30' :
'bg-red-500/20 dg-text-red border-red-500/30'
}>{pod.status}</Badge>
</TableCell>
<TableCell className="text-sm text-slate-400">{pod.node_name || '-'}</TableCell>
<TableCell className="text-sm text-slate-500 font-mono">{pod.ip || '-'}</TableCell>
<TableCell className={pod.restart_count > 0 ? 'text-yellow-400' : 'text-slate-500'}>
<TableCell className="text-sm dg-text-secondary">{pod.node_name || '-'}</TableCell>
<TableCell className="text-sm dg-text-muted font-mono">{pod.ip || '-'}</TableCell>
<TableCell className={pod.restart_count > 0 ? 'dg-text-yellow' : 'dg-text-muted'}>
{pod.restart_count || 0}
</TableCell>
<TableCell>
<div className="flex items-center gap-1">
<Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-blue-400"
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-blue"
title="查看日志"
onClick={() => onOpenLogsViewer({ name: pod.name, containers: extractContainers(pod) })}>
<FileText className="h-3.5 w-3.5" />
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-emerald-400"
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-green"
title="exec 终端"
onClick={() => onOpenExec({ name: pod.name, containers: extractContainers(pod) })}>
<Terminal className="h-3.5 w-3.5" />
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-amber-400"
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-yellow"
title="文件浏览器"
onClick={() => onOpenFileBrowser({ name: pod.name, containers: extractContainers(pod) })}>
<FolderOpen className="h-3.5 w-3.5" />
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-blue-400"
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-blue"
title="查看 YAML"
onClick={() => onOpenYaml(pod.name)}>
<FileCode className="h-3.5 w-3.5" />
frontend/src/components/kubernetes/deployment-edit-advanced/DnsHostSection.tsx
+25 -25
View File
@@ -50,47 +50,47 @@ export function DnsHostSection({
return (
<>
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Globe className="h-4 w-4 text-indigo-400" />DNS 配置 (dnsConfig)
</CardTitle>
</CardHeader>
<CardContent className="pt-0 space-y-3">
<p className="text-[11px] text-slate-500">
提示：dnsConfig 通常与 <code className="text-slate-400">dnsPolicy: None</code> 搭配使用。每行一个值。
<p className="text-[11px] dg-text-muted">
提示：dnsConfig 通常与 <code className="dg-text-secondary">dnsPolicy: None</code> 搭配使用。每行一个值。
</p>
<div className="grid grid-cols-2 gap-3">
<div>
<Label className="text-slate-500 text-xs">nameservers（每行一个 IP）</Label>
<Label className="dg-text-muted text-xs">nameservers（每行一个 IP）</Label>
<textarea
value={dnsNameservers}
onChange={e => onDnsNameserversChange(e.target.value)}
placeholder={'8.8.8.8\n114.114.114.114'}
rows={3}
className="w-full mt-1 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 font-mono p-2 resize-y"
className="w-full mt-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] font-mono p-2 resize-y"
/>
</div>
<div>
<Label className="text-slate-500 text-xs">searches（搜索域，每行一个）</Label>
<Label className="dg-text-muted text-xs">searches（搜索域，每行一个）</Label>
<textarea
value={dnsSearches}
onChange={e => onDnsSearchesChange(e.target.value)}
placeholder={'svc.cluster.local\ncluster.local'}
rows={3}
className="w-full mt-1 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 font-mono p-2 resize-y"
className="w-full mt-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] font-mono p-2 resize-y"
/>
</div>
</div>
<div>
<div className="flex items-center justify-between mb-1">
<Label className="text-slate-400 text-xs">options（DNS 选项）</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs text-slate-400" onClick={addDnsOption}>
<Label className="dg-text-secondary text-xs">options（DNS 选项）</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-secondary" onClick={addDnsOption}>
<Plus className="h-3 w-3 mr-1" />添加
</Button>
</div>
{dnsOptions.length === 0 ? (
<p className="text-xs text-slate-600 italic">未配置</p>
<p className="text-xs dg-text-muted italic">未配置</p>
) : (
dnsOptions.map((o, i) => (
<div key={i} className="flex items-center gap-2 mb-1.5">
@@ -98,16 +98,16 @@ export function DnsHostSection({
value={o.name}
onChange={e => updateDnsOption(i, { name: e.target.value })}
placeholder="ndots"
className="flex-1 h-7 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono"
className="flex-1 h-7 dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
/>
<span className="text-slate-600">:</span>
<span className="dg-text-muted">:</span>
<Input
value={o.value}
onChange={e => updateDnsOption(i, { value: e.target.value })}
placeholder="5（可留空）"
className="flex-1 h-7 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono"
className="flex-1 h-7 dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
/>
<Button size="icon" variant="ghost" className="h-6 w-6 text-red-400" onClick={() => removeDnsOption(i)}>
<Button size="icon" variant="ghost" className="h-6 w-6 dg-text-red" onClick={() => removeDnsOption(i)}>
<Trash2 className="h-3 w-3" />
</Button>
</div>
@@ -117,21 +117,21 @@ export function DnsHostSection({
</CardContent>
</Card>
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<MapPin className="h-4 w-4 text-amber-400" />主机别名 (hostAliases)
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<MapPin className="h-4 w-4 dg-text-yellow" />主机别名 (hostAliases)
</CardTitle>
</CardHeader>
<CardContent className="pt-0 space-y-2">
<div className="flex items-center justify-between mb-1">
<Label className="text-slate-400 text-xs">IP → 主机名映射（注入 Pod 的 /etc/hosts）</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs text-slate-400" onClick={addHostAlias}>
<Label className="dg-text-secondary text-xs">IP → 主机名映射（注入 Pod 的 /etc/hosts）</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-secondary" onClick={addHostAlias}>
<Plus className="h-3 w-3 mr-1" />添加
</Button>
</div>
{hostAliases.length === 0 ? (
<p className="text-xs text-slate-600 italic">未配置</p>
<p className="text-xs dg-text-muted italic">未配置</p>
) : (
hostAliases.map((a, i) => (
<div key={i} className="flex items-center gap-2">
@@ -139,16 +139,16 @@ export function DnsHostSection({
value={a.ip}
onChange={e => updateHostAlias(i, { ip: e.target.value })}
placeholder="10.10.10.72"
className="w-40 h-7 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono"
className="w-40 h-7 dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
/>
<span className="text-slate-600">→</span>
<span className="dg-text-muted">→</span>
<Input
value={a.hostnames}
onChange={e => updateHostAlias(i, { hostnames: e.target.value })}
placeholder="gitlab.local, registry.local"
className="flex-1 h-7 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono"
className="flex-1 h-7 dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
/>
<Button size="icon" variant="ghost" className="h-6 w-6 text-red-400" onClick={() => removeHostAlias(i)}>
<Button size="icon" variant="ghost" className="h-6 w-6 dg-text-red" onClick={() => removeHostAlias(i)}>
<Trash2 className="h-3 w-3" />
</Button>
</div>
frontend/src/components/kubernetes/deployment-edit-advanced/SchedulingSection.tsx
+25 -25
View File
@@ -51,21 +51,21 @@ export function SchedulingSection({
nodeLabels,
}: SchedulingSectionProps) {
return (
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-sm text-slate-200 flex items-center gap-2">
<Server className="h-4 w-4 text-emerald-400" />调度 (Scheduling)
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Server className="h-4 w-4 dg-text-green" />调度 (Scheduling)
</CardTitle>
<div className="flex items-center gap-1 bg-slate-800 rounded-lg p-0.5 border border-slate-700">
<div className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] rounded-lg p-0.5 border border-[var(--dg-border)]">
{SCHEDULE_MODES.map(m => (
<button
key={m.key}
onClick={() => onScheduleModeChange(m.key)}
className={`px-2.5 py-1 rounded text-[10px] font-medium transition-all ${
scheduleMode === m.key
? 'bg-emerald-500/20 text-emerald-300 shadow-sm'
: 'text-slate-400 hover:text-slate-300'
? 'bg-emerald-500/20 dg-text-green shadow-sm'
: 'dg-text-secondary hover:text-[var(--dg-text-secondary)]'
}`}
>
{m.label}
@@ -73,7 +73,7 @@ export function SchedulingSection({
))}
</div>
</div>
<p className="text-xs text-slate-500 mt-1">
<p className="text-xs dg-text-muted mt-1">
{scheduleMode === 'nodeName' && 'Pod 将直接调度到指定节点'}
{scheduleMode === 'nodeSelector' && 'Pod 将调度到匹配标签的节点'}
{scheduleMode === 'nodeAffinity' && '通过亲和性规则控制 Pod 调度到指定节点'}
@@ -82,16 +82,16 @@ export function SchedulingSection({
<CardContent className="pt-0">
{scheduleMode === 'nodeName' && (
<div className="space-y-2">
<Label className="text-slate-400 text-xs">请选择节点</Label>
<Label className="dg-text-secondary text-xs">请选择节点</Label>
{nodesLoading ? (
<div className="flex items-center gap-1 text-slate-500 text-xs">
<div className="flex items-center gap-1 dg-text-muted text-xs">
<Loader2 className="h-3 w-3 animate-spin" />加载节点列表...
</div>
) : (
<select
value={nodeName}
onChange={e => onNodeNameChange(e.target.value)}
className="h-8 w-full bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2"
className="h-8 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2"
>
<option value="">（不指定）</option>
{availableNodes.map(n => (
@@ -102,8 +102,8 @@ export function SchedulingSection({
</select>
)}
{nodeName && (
<div className="text-[10px] text-slate-500">
已选择: <code className="bg-slate-800 px-1 py-0.5 rounded text-emerald-400">{nodeName}</code>
<div className="text-[10px] dg-text-muted">
已选择: <code className="bg-[var(--dg-bg-tertiary)] px-1 py-0.5 rounded dg-text-green">{nodeName}</code>
</div>
)}
</div>
@@ -112,20 +112,20 @@ export function SchedulingSection({
{scheduleMode === 'nodeSelector' && (
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label className="text-slate-400 text-xs">请选择标签</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs text-slate-400" onClick={onAddLabelSelector}>
<Label className="dg-text-secondary text-xs">请选择标签</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-secondary" onClick={onAddLabelSelector}>
<Plus className="h-3 w-3 mr-1" />添加
</Button>
</div>
{labelSelectorKv.length === 0 ? (
<p className="text-xs text-slate-600 italic">未配置标签选择器</p>
<p className="text-xs dg-text-muted italic">未配置标签选择器</p>
) : (
labelSelectorKv.map((n, i) => (
<div key={i} className="flex items-center gap-2">
<select
value={n.key}
onChange={e => onUpdateLabelSelector(i, { key: e.target.value, value: '' })}
className="flex-1 h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5"
className="flex-1 h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5"
>
<option value="">选择标签</option>
{Object.entries(nodeLabels).map(([k, vals]) => (
@@ -135,7 +135,7 @@ export function SchedulingSection({
<select
value={n.value}
onChange={e => onUpdateLabelSelector(i, { value: e.target.value })}
className="flex-1 h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5"
className="flex-1 h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5"
disabled={!n.key}
>
<option value="">选择值</option>
@@ -146,7 +146,7 @@ export function SchedulingSection({
<Button
size="icon"
variant="ghost"
className="h-6 w-6 text-red-400"
className="h-6 w-6 dg-text-red"
onClick={() => onRemoveLabelSelector(i)}
>
<Trash2 className="h-3 w-3" />
@@ -160,22 +160,22 @@ export function SchedulingSection({
{scheduleMode === 'nodeAffinity' && (
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label className="text-slate-400 text-xs">
请选择标签 <span className="text-slate-600">（生成 requiredDuringScheduling 规则）</span>
<Label className="dg-text-secondary text-xs">
请选择标签 <span className="dg-text-muted">（生成 requiredDuringScheduling 规则）</span>
</Label>
<Button size="sm" variant="ghost" className="h-6 text-xs text-slate-400" onClick={onAddLabelSelector}>
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-secondary" onClick={onAddLabelSelector}>
<Plus className="h-3 w-3 mr-1" />添加
</Button>
</div>
{labelSelectorKv.length === 0 ? (
<p className="text-xs text-slate-600 italic">未配置亲和性规则</p>
<p className="text-xs dg-text-muted italic">未配置亲和性规则</p>
) : (
labelSelectorKv.map((n, i) => (
<div key={i} className="flex items-center gap-2">
<select
value={n.key}
onChange={e => onUpdateLabelSelector(i, { key: e.target.value, value: '' })}
className="flex-1 h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5"
className="flex-1 h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5"
>
<option value="">选择标签</option>
{Object.entries(nodeLabels).map(([k, vals]) => (
@@ -185,7 +185,7 @@ export function SchedulingSection({
<select
value={n.value}
onChange={e => onUpdateLabelSelector(i, { value: e.target.value })}
className="flex-1 h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5"
className="flex-1 h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5"
disabled={!n.key}
>
<option value="">选择值</option>
@@ -196,7 +196,7 @@ export function SchedulingSection({
<Button
size="icon"
variant="ghost"
className="h-6 w-6 text-red-400"
className="h-6 w-6 dg-text-red"
onClick={() => onRemoveLabelSelector(i)}
>
<Trash2 className="h-3 w-3" />
frontend/src/components/kubernetes/deployment-edit/ContainerEditor.tsx
+101 -101
View File
@@ -28,67 +28,67 @@ import type {
export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
const c = container;
const sectionBtn = "flex items-center gap-1.5 text-xs font-semibold text-slate-300 mb-2";
const sectionBtn = "flex items-center gap-1.5 text-xs font-semibold text-[var(--dg-text-secondary)] mb-2";
return (
<>
{/* ---- 基本设置 ---- */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<Label className="text-slate-400 text-xs">容器名称</Label>
<Label className="dg-text-secondary text-xs">容器名称</Label>
<Input value={c.name} onChange={e => onUpdate({ name: e.target.value })}
placeholder="my-app"
className="mt-1 bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="mt-1 dg-input font-mono text-xs h-8" />
</div>
<div>
<Label className="text-slate-400 text-xs">容器镜像</Label>
<Label className="dg-text-secondary text-xs">容器镜像</Label>
<Input value={c.image} onChange={e => onUpdate({ image: e.target.value })}
placeholder="nginx:1.25"
className="mt-1 bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="mt-1 dg-input font-mono text-xs h-8" />
</div>
<div>
<Label className="text-slate-400 text-xs">镜像拉取策略</Label>
<Label className="dg-text-secondary text-xs">镜像拉取策略</Label>
<Select value={c.imagePullPolicy || '__none'} onValueChange={v => onUpdate({ imagePullPolicy: v === '__none' ? '' : v })}>
<SelectTrigger className="mt-1 bg-slate-800 border-slate-700 text-slate-200 text-xs h-8">
<SelectTrigger className="mt-1 dg-input text-xs h-8">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-900 border-slate-700">
<SelectItem value="__none" className="text-slate-400">不设置（默认 IfNotPresent）</SelectItem>
<SelectItem value="Always" className="text-slate-200">Always</SelectItem>
<SelectItem value="IfNotPresent" className="text-slate-200">IfNotPresent</SelectItem>
<SelectItem value="Never" className="text-slate-200">Never</SelectItem>
<SelectContent className="dg-input">
<SelectItem value="__none" className="dg-text-secondary">不设置（默认 IfNotPresent）</SelectItem>
<SelectItem value="Always" className="text-[var(--dg-text-primary)]">Always</SelectItem>
<SelectItem value="IfNotPresent" className="text-[var(--dg-text-primary)]">IfNotPresent</SelectItem>
<SelectItem value="Never" className="text-[var(--dg-text-primary)]">Never</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label className="text-slate-400 text-xs">工作目录 (workingDir)</Label>
<Label className="dg-text-secondary text-xs">工作目录 (workingDir)</Label>
<Input value={c.workingDir || ''} onChange={e => onUpdate({ workingDir: e.target.value })}
placeholder="/app"
className="mt-1 bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="mt-1 dg-input font-mono text-xs h-8" />
</div>
</div>
{/* ---- 命令与参数 ---- */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<Label className="text-slate-400 text-xs">启动命令 (command) — 每行一个</Label>
<Label className="dg-text-secondary text-xs">启动命令 (command) — 每行一个</Label>
<Textarea value={arrToText(c.command)} placeholder={"/bin/sh\n-c"}
onChange={e => onUpdate({ command: textToArr(e.target.value) })}
className="mt-1 bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs min-h-[60px]" />
className="mt-1 dg-input font-mono text-xs min-h-[60px]" />
</div>
<div>
<Label className="text-slate-400 text-xs">启动参数 (args) — 每行一个</Label>
<Label className="dg-text-secondary text-xs">启动参数 (args) — 每行一个</Label>
<Textarea value={arrToText(c.args)} placeholder={"--config=/etc/app.yaml\n--debug"}
onChange={e => onUpdate({ args: textToArr(e.target.value) })}
className="mt-1 bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs min-h-[60px]" />
className="mt-1 dg-input font-mono text-xs min-h-[60px]" />
</div>
</div>
{/* ---- 环境变量 ---- */}
<div>
<div className="flex items-center justify-between mb-2">
<div className={sectionBtn}><Terminal className="h-3.5 w-3.5 text-cyan-400" /> 环境变量</div>
<Button size="sm" variant="outline" className="h-6 border-slate-700 text-slate-300 text-[11px]"
<div className={sectionBtn}><Terminal className="h-3.5 w-3.5 dg-text-cyan" /> 环境变量</div>
<Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
onClick={() => onUpdate({ env: [...c.env, { name: '', value: '' }] })}>
<Plus className="h-3 w-3 mr-1" />新增
</Button>
@@ -98,17 +98,17 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
<div key={ei} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
<Input value={env.name} placeholder="KEY"
onChange={e => { const n = [...c.env]; n[ei] = { ...env, name: e.target.value }; onUpdate({ env: n }); }}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
<Input value={env.value || ''} placeholder="value"
onChange={e => { const n = [...c.env]; n[ei] = { ...env, value: e.target.value }; onUpdate({ env: n }); }}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
<Button variant="ghost" size="icon" className="h-8 w-8 text-red-400"
className="dg-input font-mono text-xs h-8" />
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red"
onClick={() => onUpdate({ env: c.env.filter((_, j) => j !== ei) })}>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
))}
{c.env.length === 0 && <p className="text-[11px] text-slate-600">无环境变量</p>}
{c.env.length === 0 && <p className="text-[11px] dg-text-muted">无环境变量</p>}
</div>
</div>
@@ -116,7 +116,7 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
<div>
<div className="flex items-center justify-between mb-2">
<div className={sectionBtn}><Network className="h-3.5 w-3.5 text-indigo-400" /> 端口</div>
<Button size="sm" variant="outline" className="h-6 border-slate-700 text-slate-300 text-[11px]"
<Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
onClick={() => onUpdate({ ports: [...c.ports, { name: '', containerPort: '', protocol: 'TCP' }] })}>
<Plus className="h-3 w-3 mr-1" />新增
</Button>
@@ -126,57 +126,57 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
<div key={pi} className="grid grid-cols-[1fr_1fr_100px_auto] gap-2">
<Input value={p.name || ''} placeholder="http"
onChange={e => { const n = [...c.ports]; n[pi] = { ...p, name: e.target.value }; onUpdate({ ports: n }); }}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
<Input type="number" value={p.containerPort} placeholder="8080"
onChange={e => { const n = [...c.ports]; n[pi] = { ...p, containerPort: e.target.value }; onUpdate({ ports: n }); }}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
<Select value={p.protocol || 'TCP'} onValueChange={v => { const n = [...c.ports]; n[pi] = { ...p, protocol: v }; onUpdate({ ports: n }); }}>
<SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200 text-xs h-8">
<SelectTrigger className="dg-input text-xs h-8">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-900 border-slate-700">
<SelectItem value="TCP" className="text-slate-200">TCP</SelectItem>
<SelectItem value="UDP" className="text-slate-200">UDP</SelectItem>
<SelectItem value="SCTP" className="text-slate-200">SCTP</SelectItem>
<SelectContent className="dg-input">
<SelectItem value="TCP" className="text-[var(--dg-text-primary)]">TCP</SelectItem>
<SelectItem value="UDP" className="text-[var(--dg-text-primary)]">UDP</SelectItem>
<SelectItem value="SCTP" className="text-[var(--dg-text-primary)]">SCTP</SelectItem>
</SelectContent>
</Select>
<Button variant="ghost" size="icon" className="h-8 w-8 text-red-400"
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red"
onClick={() => onUpdate({ ports: c.ports.filter((_, j) => j !== pi) })}>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
))}
{c.ports.length === 0 && <p className="text-[11px] text-slate-600">无端口暴露</p>}
{c.ports.length === 0 && <p className="text-[11px] dg-text-muted">无端口暴露</p>}
</div>
</div>
{/* ---- 资源 requests/limits ---- */}
<div>
<div className={sectionBtn}><Cpu className="h-3.5 w-3.5 text-amber-400" /> 资源 (requests / limits)</div>
<div className={sectionBtn}><Cpu className="h-3.5 w-3.5 dg-text-yellow" /> 资源 (requests / limits)</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
<div>
<Label className="text-[11px] text-slate-500">CPU 请求</Label>
<Label className="text-[11px] dg-text-muted">CPU 请求</Label>
<Input value={c.resources.requests?.cpu || ''} placeholder="100m"
onChange={e => onUpdate({ resources: { ...c.resources, requests: { ...c.resources.requests, cpu: e.target.value } } })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
</div>
<div>
<Label className="text-[11px] text-slate-500">CPU 上限</Label>
<Label className="text-[11px] dg-text-muted">CPU 上限</Label>
<Input value={c.resources.limits?.cpu || ''} placeholder="500m"
onChange={e => onUpdate({ resources: { ...c.resources, limits: { ...c.resources.limits, cpu: e.target.value } } })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
</div>
<div>
<Label className="text-[11px] text-slate-500">内存请求</Label>
<Label className="text-[11px] dg-text-muted">内存请求</Label>
<Input value={c.resources.requests?.memory || ''} placeholder="128Mi"
onChange={e => onUpdate({ resources: { ...c.resources, requests: { ...c.resources.requests, memory: e.target.value } } })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
</div>
<div>
<Label className="text-[11px] text-slate-500">内存上限</Label>
<Label className="text-[11px] dg-text-muted">内存上限</Label>
<Input value={c.resources.limits?.memory || ''} placeholder="512Mi"
onChange={e => onUpdate({ resources: { ...c.resources, limits: { ...c.resources.limits, memory: e.target.value } } })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
</div>
</div>
</div>
@@ -197,7 +197,7 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
{/* ---- 生命周期 ---- */}
<div>
<div className={sectionBtn}><Zap className="h-3.5 w-3.5 text-yellow-400" /> 生命周期回调 (Lifecycle)</div>
<div className={sectionBtn}><Zap className="h-3.5 w-3.5 dg-text-yellow" /> 生命周期回调 (Lifecycle)</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<LifecycleHandlerEditor label="启动后 (postStart)" handler={c.lifecycle?.postStart}
onChange={h => onUpdate({ lifecycle: { ...c.lifecycle, postStart: h } })} />
@@ -205,7 +205,7 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
onChange={h => onUpdate({ lifecycle: { ...c.lifecycle, preStop: h } })} />
</div>
{!c.lifecycle && (
<Button size="sm" variant="outline" className="h-6 border-slate-700 text-slate-300 text-[11px] mt-1"
<Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px] mt-1"
onClick={() => onUpdate({ lifecycle: { postStart: { type: 'none' }, preStop: { type: 'none' } } })}>
<Plus className="h-3 w-3 mr-1" />启用生命周期回调
</Button>
@@ -214,33 +214,33 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
{/* ---- 安全上下文 ---- */}
<div>
<div className={sectionBtn}><Shield className="h-3.5 w-3.5 text-emerald-400" /> 安全上下文 (SecurityContext)</div>
<div className={sectionBtn}><Shield className="h-3.5 w-3.5 dg-text-green" /> 安全上下文 (SecurityContext)</div>
{c.securityContext ? (
<div className="space-y-2 border border-slate-800 rounded-md p-3 bg-slate-950/30">
<div className="space-y-2 border border-[var(--dg-border)] rounded-md p-3 bg-[var(--dg-bg-primary)]/30">
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
<div>
<Label className="text-[11px] text-slate-500">runAsUser</Label>
<Label className="text-[11px] dg-text-muted">runAsUser</Label>
<Input type="number" value={c.securityContext.runAsUser ?? ''} placeholder="1000"
onChange={e => onUpdate({ securityContext: { ...c.securityContext!, runAsUser: e.target.value === '' ? undefined : Number(e.target.value) } })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
</div>
<div>
<Label className="text-[11px] text-slate-500">runAsGroup</Label>
<Label className="text-[11px] dg-text-muted">runAsGroup</Label>
<Input type="number" value={c.securityContext.runAsGroup ?? ''} placeholder="1000"
onChange={e => onUpdate({ securityContext: { ...c.securityContext!, runAsGroup: e.target.value === '' ? undefined : Number(e.target.value) } })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
</div>
<div>
<Label className="text-[11px] text-slate-500">Capabilities Add (逗号分隔)</Label>
<Label className="text-[11px] dg-text-muted">Capabilities Add (逗号分隔)</Label>
<Input value={(c.securityContext.capabilitiesAdd || []).join(',')} placeholder="NET_ADMIN"
onChange={e => onUpdate({ securityContext: { ...c.securityContext!, capabilitiesAdd: e.target.value.split(',').map(s => s.trim()).filter(Boolean) } })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
</div>
<div>
<Label className="text-[11px] text-slate-500">Capabilities Drop (逗号分隔)</Label>
<Label className="text-[11px] dg-text-muted">Capabilities Drop (逗号分隔)</Label>
<Input value={(c.securityContext.capabilitiesDrop || []).join(',')} placeholder="ALL"
onChange={e => onUpdate({ securityContext: { ...c.securityContext!, capabilitiesDrop: e.target.value.split(',').map(s => s.trim()).filter(Boolean) } })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
</div>
</div>
<div className="flex items-center gap-4 flex-wrap">
@@ -253,13 +253,13 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
<BoolToggle label="allowPrivilegeEscalation" value={c.securityContext.allowPrivilegeEscalation ?? false}
onChange={v => onUpdate({ securityContext: { ...c.securityContext!, allowPrivilegeEscalation: v } })} />
</div>
<Button size="sm" variant="ghost" className="h-6 text-red-400 text-[11px]"
<Button size="sm" variant="ghost" className="h-6 dg-text-red text-[11px]"
onClick={() => onUpdate({ securityContext: null })}>
<Trash2 className="h-3 w-3 mr-1" />移除安全上下文
</Button>
</div>
) : (
<Button size="sm" variant="outline" className="h-6 border-slate-700 text-slate-300 text-[11px]"
<Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
onClick={() => onUpdate({ securityContext: { runAsNonRoot: false, privileged: false } })}>
<Plus className="h-3 w-3 mr-1" />启用安全上下文
</Button>
@@ -270,7 +270,7 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
<div>
<div className="flex items-center justify-between mb-2">
<div className={sectionBtn}><FolderOpen className="h-3.5 w-3.5 text-teal-400" /> 卷挂载 (VolumeMounts)</div>
<Button size="sm" variant="outline" className="h-6 border-slate-700 text-slate-300 text-[11px]"
<Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
onClick={() => onUpdate({ volumeMounts: [...c.volumeMounts, { name: '', mountPath: '', subPath: '', readOnly: false }] })}>
<Plus className="h-3 w-3 mr-1" />新增
</Button>
@@ -280,25 +280,25 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
<div key={mi} className="grid grid-cols-[1fr_1fr_1fr_60px_auto] gap-2 items-center">
<Input value={m.name} placeholder="volume 名称"
onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, name: e.target.value }; onUpdate({ volumeMounts: n }); }}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
<Input value={m.mountPath} placeholder="/data"
onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, mountPath: e.target.value }; onUpdate({ volumeMounts: n }); }}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
className="dg-input font-mono text-xs h-8" />
<Input value={m.subPath || ''} placeholder="subPath (可选)"
onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, subPath: e.target.value }; onUpdate({ volumeMounts: n }); }}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
<label className="flex items-center gap-1 text-[10px] text-slate-500 cursor-pointer">
className="dg-input font-mono text-xs h-8" />
<label className="flex items-center gap-1 text-[10px] dg-text-muted cursor-pointer">
<Switch checked={!!m.readOnly}
onCheckedChange={v => { const n = [...c.volumeMounts]; n[mi] = { ...m, readOnly: v }; onUpdate({ volumeMounts: n }); }} />
RO
</label>
<Button variant="ghost" size="icon" className="h-8 w-8 text-red-400"
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red"
onClick={() => onUpdate({ volumeMounts: c.volumeMounts.filter((_, j) => j !== mi) })}>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
))}
{c.volumeMounts.length === 0 && <p className="text-[11px] text-slate-600">无卷挂载</p>}
{c.volumeMounts.length === 0 && <p className="text-[11px] dg-text-muted">无卷挂载</p>}
</div>
</div>
</>
@@ -312,24 +312,24 @@ function ProbeEditor({ label, probe, onChange }: ProbeEditorProps) {
const setField = (patch: Partial<ProbeDef>) => onChange({ ...p, ...patch });
return (
<div className="border border-slate-800 rounded-md p-2.5 bg-slate-950/30">
<div className="border border-[var(--dg-border)] rounded-md p-2.5 bg-[var(--dg-bg-primary)]/30">
<div className="flex items-center justify-between mb-2">
<span className="text-xs text-slate-300 font-medium">{label}</span>
<span className="text-xs text-[var(--dg-text-secondary)] font-medium">{label}</span>
<Switch checked={enabled}
onCheckedChange={v => onChange(v ? { type: 'httpGet', httpPath: '/', httpPort: 8080, initialDelaySeconds: 10, periodSeconds: 10 } : null)} />
</div>
{enabled && (
<>
<div className="flex items-center gap-2 mb-2">
<span className="text-[10px] text-slate-500 w-8">类型</span>
<span className="text-[10px] dg-text-muted w-8">类型</span>
<Select value={p.type || 'httpGet'} onValueChange={v => setField({ type: v as ProbeDef['type'] })}>
<SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200 text-xs h-7 flex-1">
<SelectTrigger className="dg-input text-xs h-7 flex-1">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-900 border-slate-700">
<SelectItem value="httpGet" className="text-slate-200">HTTP GET</SelectItem>
<SelectItem value="tcpSocket" className="text-slate-200">TCP Socket</SelectItem>
<SelectItem value="exec" className="text-slate-200">Exec 命令</SelectItem>
<SelectContent className="dg-input">
<SelectItem value="httpGet" className="text-[var(--dg-text-primary)]">HTTP GET</SelectItem>
<SelectItem value="tcpSocket" className="text-[var(--dg-text-primary)]">TCP Socket</SelectItem>
<SelectItem value="exec" className="text-[var(--dg-text-primary)]">Exec 命令</SelectItem>
</SelectContent>
</Select>
</div>
@@ -337,59 +337,59 @@ function ProbeEditor({ label, probe, onChange }: ProbeEditorProps) {
<div className="grid grid-cols-3 gap-2 mb-2">
<Input value={p.httpPath || ''} placeholder="/healthz"
onChange={e => setField({ httpPath: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
<Input type="number" value={p.httpPort ?? ''} placeholder="8080"
onChange={e => setField({ httpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
<Input value={p.httpHost || ''} placeholder="host (可选)"
onChange={e => setField({ httpHost: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
</div>
)}
{p.type === 'tcpSocket' && (
<div className="mb-2">
<Input type="number" value={p.tcpPort ?? ''} placeholder="端口"
onChange={e => setField({ tcpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
</div>
)}
{p.type === 'exec' && (
<div className="mb-2">
<Textarea value={p.execCommand || ''} placeholder="每行一个命令片段，如：\ncat\n/tmp/healthy"
onChange={e => setField({ execCommand: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs min-h-[50px]" />
className="dg-input font-mono text-xs min-h-[50px]" />
</div>
)}
<div className="grid grid-cols-5 gap-2">
<div>
<Label className="text-[10px] text-slate-500">延迟(s)</Label>
<Label className="text-[10px] dg-text-muted">延迟(s)</Label>
<Input type="number" value={p.initialDelaySeconds ?? ''} placeholder="10"
onChange={e => setField({ initialDelaySeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
</div>
<div>
<Label className="text-[10px] text-slate-500">间隔(s)</Label>
<Label className="text-[10px] dg-text-muted">间隔(s)</Label>
<Input type="number" value={p.periodSeconds ?? ''} placeholder="10"
onChange={e => setField({ periodSeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
</div>
<div>
<Label className="text-[10px] text-slate-500">超时(s)</Label>
<Label className="text-[10px] dg-text-muted">超时(s)</Label>
<Input type="number" value={p.timeoutSeconds ?? ''} placeholder="1"
onChange={e => setField({ timeoutSeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
</div>
<div>
<Label className="text-[10px] text-slate-500">成功</Label>
<Label className="text-[10px] dg-text-muted">成功</Label>
<Input type="number" value={p.successThreshold ?? ''} placeholder="1"
onChange={e => setField({ successThreshold: e.target.value === '' ? undefined : Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
</div>
<div>
<Label className="text-[10px] text-slate-500">失败</Label>
<Label className="text-[10px] dg-text-muted">失败</Label>
<Input type="number" value={p.failureThreshold ?? ''} placeholder="3"
onChange={e => setField({ failureThreshold: e.target.value === '' ? undefined : Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
</div>
</div>
</>
@@ -403,41 +403,41 @@ function LifecycleHandlerEditor({ label, handler, onChange }: LifecycleHandlerEd
const selVal = (!h.type || h.type === 'none') ? '__none' : h.type;
return (
<div className="border border-slate-800 rounded-md p-2.5 bg-slate-950/30">
<span className="text-xs text-slate-300 font-medium block mb-2">{label}</span>
<div className="border border-[var(--dg-border)] rounded-md p-2.5 bg-[var(--dg-bg-primary)]/30">
<span className="text-xs text-[var(--dg-text-secondary)] font-medium block mb-2">{label}</span>
<div className="flex items-center gap-2 mb-2">
<span className="text-[10px] text-slate-500 w-8">类型</span>
<span className="text-[10px] dg-text-muted w-8">类型</span>
<Select value={selVal} onValueChange={v => onChange({ ...h, type: (v === '__none' ? 'none' : v) as LifecycleHandler['type'] })}>
<SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200 text-xs h-7 flex-1">
<SelectTrigger className="dg-input text-xs h-7 flex-1">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-900 border-slate-700">
<SelectItem value="__none" className="text-slate-400">不设置</SelectItem>
<SelectItem value="exec" className="text-slate-200">Exec 命令</SelectItem>
<SelectItem value="httpGet" className="text-slate-200">HTTP GET</SelectItem>
<SelectItem value="tcpSocket" className="text-slate-200">TCP Socket</SelectItem>
<SelectContent className="dg-input">
<SelectItem value="__none" className="dg-text-secondary">不设置</SelectItem>
<SelectItem value="exec" className="text-[var(--dg-text-primary)]">Exec 命令</SelectItem>
<SelectItem value="httpGet" className="text-[var(--dg-text-primary)]">HTTP GET</SelectItem>
<SelectItem value="tcpSocket" className="text-[var(--dg-text-primary)]">TCP Socket</SelectItem>
</SelectContent>
</Select>
</div>
{h.type === 'exec' && (
<Textarea value={h.execCommand || ''} placeholder="每行一个命令片段"
onChange={e => onChange({ ...h, execCommand: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs min-h-[50px]" />
className="dg-input font-mono text-xs min-h-[50px]" />
)}
{h.type === 'httpGet' && (
<div className="grid grid-cols-2 gap-2">
<Input value={h.httpPath || ''} placeholder="/shutdown"
onChange={e => onChange({ ...h, httpPath: e.target.value })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
<Input type="number" value={h.httpPort ?? ''} placeholder="8080"
onChange={e => onChange({ ...h, httpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
</div>
)}
{h.type === 'tcpSocket' && (
<Input type="number" value={h.tcpPort ?? ''} placeholder="端口"
onChange={e => onChange({ ...h, tcpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
className="dg-input font-mono text-xs h-7" />
)}
</div>
);
@@ -447,7 +447,7 @@ function BoolToggle({ label, value, onChange }: BoolToggleProps) {
return (
<label className="flex items-center gap-1.5 cursor-pointer">
<Switch checked={value} onCheckedChange={onChange} />
<span className="text-[11px] text-slate-400 font-mono">{label}</span>
<span className="text-[11px] dg-text-secondary font-mono">{label}</span>
</label>
);
}
frontend/src/components/kubernetes/deployment-edit/ContainerGroupSection.tsx
+13 -13
View File
@@ -34,23 +34,23 @@ export function ContainerGroupSection({
const headerBg = accentColor === 'blue' ? 'bg-blue-500/5' : 'bg-purple-500/5';
return (
<Card className={`bg-slate-900 border-slate-800`}>
<Card className={`dg-card`}>
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{icon}
<CardTitle className="text-sm text-slate-200">{title}</CardTitle>
<Badge variant="outline" className={`border-slate-700 text-slate-400 text-[10px]`}>{containers.length}</Badge>
<CardTitle className="text-sm text-[var(--dg-text-primary)]">{title}</CardTitle>
<Badge variant="outline" className={`border-[var(--dg-border)] dg-text-secondary text-[10px]`}>{containers.length}</Badge>
</div>
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={onAdd}>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={onAdd}>
<Plus className="h-3 w-3 mr-1" />新增容器
</Button>
</div>
<p className="text-[11px] text-slate-600">{description}</p>
<p className="text-[11px] dg-text-muted">{description}</p>
</CardHeader>
<CardContent className="pt-0 space-y-3">
{containers.length === 0 && (
<div className="text-center py-6 text-slate-600 text-xs">暂无容器，点击「新增容器」添加</div>
<div className="text-center py-6 dg-text-muted text-xs">暂无容器，点击「新增容器」添加</div>
)}
{containers.map((c, idx) => {
const isOpen = openIndices.has(idx) || containers.length === 1;
@@ -59,19 +59,19 @@ export function ContainerGroupSection({
{/* container header */}
<div className={`flex items-center justify-between px-3 py-2 ${headerBg} cursor-pointer`} onClick={() => toggleOpen(idx)}>
<div className="flex items-center gap-2">
{isOpen ? <ChevronDown className="h-4 w-4 text-slate-500" /> : <ChevronRight className="h-4 w-4 text-slate-500" />}
<Container className={`h-4 w-4 ${accentColor === 'blue' ? 'text-blue-400' : 'text-purple-400'}`} />
<span className="text-sm font-mono text-slate-200 font-semibold">{c.name || '(未命名)'}</span>
{c.image && <code className="text-[10px] text-slate-500 font-mono truncate max-w-[300px]">{c.image}</code>}
{isOpen ? <ChevronDown className="h-4 w-4 dg-text-muted" /> : <ChevronRight className="h-4 w-4 dg-text-muted" />}
<Container className={`h-4 w-4 ${accentColor === 'blue' ? 'dg-text-blue' : 'dg-text-purple'}`} />
<span className="text-sm font-mono text-[var(--dg-text-primary)] font-semibold">{c.name || '(未命名)'}</span>
{c.image && <code className="text-[10px] dg-text-muted font-mono truncate max-w-[300px]">{c.image}</code>}
</div>
<div className="flex items-center gap-1" onClick={e => e.stopPropagation()}>
{onDuplicate && (
<Button variant="ghost" size="icon" className="h-7 w-7 text-slate-500 hover:text-slate-300" title="复制"
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-muted hover:text-[var(--dg-text-secondary)]" title="复制"
onClick={() => onDuplicate(idx)}>
<RotateCw className="h-3.5 w-3.5" />
</Button>
)}
<Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" title="删除"
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" title="删除"
onClick={async () => {
const ok = await confirm({
title: '删除容器',
@@ -87,7 +87,7 @@ export function ContainerGroupSection({
</div>
{/* container body */}
{isOpen && (
<div className="p-3 space-y-4 bg-slate-950/30">
<div className="p-3 space-y-4 bg-[var(--dg-bg-primary)]/30">
<ContainerEditor container={c} onUpdate={(patch) => onUpdate(idx, patch)} />
</div>
)}
Loaded 100 of 213 files, more files were not shown because too many files have changed in this diff. Show more