feat: 全站 PageShell 设计系统与专业 UI 统一
- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架 - index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩） - 全站路由页接入 PageShell，云账单三 Tab 为标杆 - 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化 - 登录页/侧栏/顶栏去渐变光球，企业克制风 - 修复 AIAlertAnalyzer JSX 与构建依赖导入问题
This commit is contained in:
Logan committed
1 parent
1acb0c49af
commit
e363ded445
213 files changed
+7148
-6818
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user