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/pages/audit/terminal-audit/SessionCommandsPanel.tsx
+25 -25
View File
@@ -113,13 +113,13 @@ export function SessionCommandsPanel() {
<>
<div className="flex items-center gap-2 flex-wrap">
<div className="relative w-52">
<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={t('audit.terminal.searchUserCommand')}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
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>
<Input
@@ -127,31 +127,31 @@ export function SessionCommandsPanel() {
value={username}
onChange={(e) => setUsername(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
className="w-28 h-9 bg-slate-800/50 border-slate-700 text-slate-200"
className="w-28 h-9 dg-input"
/>
<Input
placeholder={t('audit.terminal.sessionIdPlaceholder')}
value={sessionIdInput}
onChange={(e) => setSessionIdInput(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
className="w-32 h-9 dg-input"
/>
<Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="w-36 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
<span className="text-slate-600 text-sm">—</span>
<Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="w-36 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
<Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(1); setStartDate(r.start); setEndDate(r.end); }}>
<Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="w-36 h-9 dg-input" />
<span className="dg-text-muted text-sm">—</span>
<Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="w-36 h-9 dg-input" />
<Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => { const r = presetAuditRange(1); setStartDate(r.start); setEndDate(r.end); }}>
{t('audit.terminal.presetToday')}
</Button>
<Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(7); setStartDate(r.start); setEndDate(r.end); }}>
<Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => { const r = presetAuditRange(7); setStartDate(r.start); setEndDate(r.end); }}>
{t('audit.terminal.preset7d')}
</Button>
<Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(30); setStartDate(r.start); setEndDate(r.end); }}>
<Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => { const r = presetAuditRange(30); setStartDate(r.start); setEndDate(r.end); }}>
{t('audit.terminal.preset30d')}
</Button>
<Button size="sm" className="h-9" onClick={applyFilters}>{t('audit.terminal.applyFilter')}</Button>
<Button
variant="outline"
className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800 h-9"
className="dg-btn-secondary h-9"
onClick={() => refetch()}
>
<RefreshCw className="h-4 w-4 mr-2" />
@@ -159,7 +159,7 @@ export function SessionCommandsPanel() {
</Button>
<Button
variant="outline"
className="border-slate-700 text-slate-300 hover:text-amber-400 h-9"
className="dg-btn-secondary hover:text-[var(--dg-orange)] h-9"
onClick={handleExportCsv}
disabled={exporting || total === 0}
title={t('audit.terminal.exportCommandsCsv')}
@@ -169,22 +169,22 @@ export function SessionCommandsPanel() {
</Button>
</div>
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-0">
<div className="border-t border-slate-800">
<div className="border-t border-[var(--dg-border)]">
{isLoading ? (
<div className="flex items-center justify-center py-16">
<div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
</div>
) : commands.length === 0 ? (
<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">
<Search className="h-8 w-8 mb-3 opacity-40" />
<p className="text-sm">{t('audit.terminal.noCommands')}</p>
</div>
) : (
<>
<div
className="grid gap-2 px-4 py-2 border-b border-slate-800 bg-slate-900 text-xs font-medium text-slate-400"
className="grid gap-2 px-4 py-2 border-b border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] text-xs font-medium dg-text-secondary"
style={{ gridTemplateColumns: GRID_COLS }}
>
<span>{t('audit.terminal.col.startTime')}</span>
@@ -215,29 +215,29 @@ export function SessionCommandsPanel() {
gridTemplateColumns: GRID_COLS,
gap: '0.5rem',
}}
className="px-4 py-2.5 border-b border-slate-800 hover:bg-slate-800/50"
className="px-4 py-2.5 border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]"
>
<span className="text-sm text-slate-400 truncate">
<span className="text-sm dg-text-secondary truncate">
{c.created_at ? new Date(c.created_at).toLocaleString() : '--'}
</span>
<span className="text-sm text-slate-200 truncate">{c.username || '--'}</span>
<span className="text-sm text-[var(--dg-text-primary)] truncate">{c.username || '--'}</span>
<code className={cn(
'text-xs bg-slate-800 px-2 py-0.5 rounded max-w-[400px] truncate block',
isHighRiskCommand(c.command || '') ? 'text-red-400' : 'text-slate-300',
'text-xs bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded max-w-[400px] truncate block',
isHighRiskCommand(c.command || '') ? 'dg-text-red' : 'text-[var(--dg-text-secondary)]',
)}>
{c.command || '--'}
</code>
<span className="text-sm text-slate-400">{formatCommandOutput(c.output_size)}</span>
<span className="text-sm dg-text-secondary">{formatCommandOutput(c.output_size)}</span>
<span className={cn(
'text-xs',
c.session_record_size ? 'text-slate-500' : 'text-amber-500/80',
c.session_record_size ? 'dg-text-muted' : 'text-amber-500/80',
)} title={!c.session_record_size ? t('audit.terminal.replayPlayer.noRecord') : undefined}>
#{c.session_id}
</span>
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-slate-400 hover:text-blue-400 disabled:opacity-30"
className="h-7 w-7 dg-text-secondary hover:dg-text-blue disabled:opacity-30"
onClick={() => openReplayAtCommand(c)}
disabled={!c.session_record_size}
title={c.session_record_size
@@ -252,7 +252,7 @@ export function SessionCommandsPanel() {
</div>
</div>
<div className="text-center py-2 text-xs text-slate-500 border-t border-slate-800">
<div className="text-center py-2 text-xs dg-text-muted border-t border-[var(--dg-border)]">
{t('audit.terminal.totalCommands', { count: total })}
{commands.length < total && ` · ${t('audit.terminal.showingLoaded', { loaded: commands.length })}`}
{commands.length > 200 && ` · ${t('audit.terminal.virtualScroll')}`}