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/HistorySessionsPanel.tsx
+36 -36
View File
@@ -94,13 +94,13 @@ export function HistorySessionsPanel() {
<div className="flex flex-col gap-3">
<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.searchUserServerIp')}
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"
className="pl-9 h-9 dg-input"
/>
</div>
<Input
@@ -108,39 +108,39 @@ export function HistorySessionsPanel() {
value={username}
onChange={(e) => setUsername(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200"
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>
<label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer">
<label className="flex items-center gap-1.5 text-xs dg-text-secondary cursor-pointer">
<input type="checkbox" checked={hasRecordOnly} onChange={(e) => setHasRecordOnly(e.target.checked)} className="rounded" />
{t('audit.terminal.hasRecordOnly')}
</label>
<Button size="sm" className="h-9" onClick={applyFilters}>{t('audit.terminal.applyFilter')}</Button>
<Button variant="outline" size="sm" className="border-slate-700 text-slate-300 h-9" onClick={() => refetch()}>
<Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => refetch()}>
<RefreshCw className="h-4 w-4 mr-1" />{t('common.refresh')}
</Button>
</div>
</div>
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-0">
{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>
) : sessions.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">
<Monitor className="h-8 w-8 mb-3 opacity-40" />
<p className="text-sm">{t('audit.terminal.noHistory')}</p>
</div>
@@ -148,47 +148,47 @@ export function HistorySessionsPanel() {
<>
<Table>
<TableHeader>
<TableRow className="border-slate-800 hover:bg-transparent">
<TableHead className="text-slate-400">{t('audit.terminal.col.id')}</TableHead>
<TableHead className="text-slate-400">{t('audit.terminal.col.user')}</TableHead>
<TableHead className="text-slate-400">{t('audit.terminal.col.targetServer')}</TableHead>
<TableHead className="text-slate-400">{t('audit.terminal.col.startTime')}</TableHead>
<TableHead className="text-slate-400">{t('audit.terminal.col.duration')}</TableHead>
<TableHead className="text-slate-400">{t('audit.terminal.col.recordSize')}</TableHead>
<TableHead className="text-slate-400">{t('audit.terminal.col.status')}</TableHead>
<TableHead className="text-slate-400 text-right">{t('audit.terminal.col.actions')}</TableHead>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">{t('audit.terminal.col.id')}</TableHead>
<TableHead className="dg-text-secondary">{t('audit.terminal.col.user')}</TableHead>
<TableHead className="dg-text-secondary">{t('audit.terminal.col.targetServer')}</TableHead>
<TableHead className="dg-text-secondary">{t('audit.terminal.col.startTime')}</TableHead>
<TableHead className="dg-text-secondary">{t('audit.terminal.col.duration')}</TableHead>
<TableHead className="dg-text-secondary">{t('audit.terminal.col.recordSize')}</TableHead>
<TableHead className="dg-text-secondary">{t('audit.terminal.col.status')}</TableHead>
<TableHead className="dg-text-secondary text-right">{t('audit.terminal.col.actions')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{sessions.map((s) => (
<TableRow key={s.id} className="border-slate-800 hover:bg-slate-800/50">
<TableCell><span className="text-sm text-slate-400">{s.id}</span></TableCell>
<TableCell><span className="text-sm text-slate-200">{s.username || '--'}</span></TableCell>
<TableRow key={s.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<TableCell><span className="text-sm dg-text-secondary">{s.id}</span></TableCell>
<TableCell><span className="text-sm text-[var(--dg-text-primary)]">{s.username || '--'}</span></TableCell>
<TableCell>
<div className="flex flex-col">
<span className="text-sm text-slate-200">{s.server_name || '--'}</span>
<span className="text-xs text-slate-500">{s.server_ip}</span>
<span className="text-sm text-[var(--dg-text-primary)]">{s.server_name || '--'}</span>
<span className="text-xs dg-text-muted">{s.server_ip}</span>
</div>
</TableCell>
<TableCell>
<span className="text-sm text-slate-400">
<span className="text-sm dg-text-secondary">
{s.start_time ? new Date(s.start_time).toLocaleString() : '--'}
</span>
</TableCell>
<TableCell><span className="text-sm text-slate-300">{formatDuration(s.duration)}</span></TableCell>
<TableCell><span className="text-sm text-[var(--dg-text-secondary)]">{formatDuration(s.duration)}</span></TableCell>
<TableCell>
<span className="text-sm text-slate-400">{s.record_size > 0 ? formatSize(s.record_size) : '--'}</span>
<span className="text-sm dg-text-secondary">{s.record_size > 0 ? formatSize(s.record_size) : '--'}</span>
</TableCell>
<TableCell>{getStatusBadge(s.status)}</TableCell>
<TableCell>
<div className="flex items-center justify-end gap-0.5">
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400" onClick={() => openReplay(s.id)} disabled={!s.record_size} title={t('audit.terminal.replay')}>
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary hover:dg-text-blue" onClick={() => openReplay(s.id)} disabled={!s.record_size} title={t('audit.terminal.replay')}>
<Play className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-amber-400" onClick={() => handleExportReport(s.id)} title={t('audit.terminal.exportReport')}>
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary hover:dg-text-yellow" onClick={() => handleExportReport(s.id)} title={t('audit.terminal.exportReport')}>
<FileText className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-green-400" onClick={() => handleDownload(s.id)} disabled={!s.record_size} title={t('audit.terminal.downloadRecord')}>
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary hover:dg-text-green" onClick={() => handleDownload(s.id)} disabled={!s.record_size} title={t('audit.terminal.downloadRecord')}>
<Download className="h-4 w-4" />
</Button>
</div>
@@ -197,13 +197,13 @@ export function HistorySessionsPanel() {
))}
</TableBody>
</Table>
<div className="flex items-center justify-between px-4 py-3 border-t border-slate-800">
<span className="text-xs text-slate-500">{t('audit.terminal.totalSessions', { count: total })}</span>
<div className="flex items-center justify-between px-4 py-3 border-t border-[var(--dg-border)]">
<span className="text-xs dg-text-muted">{t('audit.terminal.totalSessions', { count: total })}</span>
<div className="flex items-center gap-2">
<Button variant="ghost" size="icon" className="h-8 w-8" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
<ChevronLeft className="h-4 w-4" />
</Button>
<span className="text-xs text-slate-400">{page} / {totalPages}</span>
<span className="text-xs dg-text-secondary">{page} / {totalPages}</span>
<Button variant="ghost" size="icon" className="h-8 w-8" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
<ChevronRight className="h-4 w-4" />
</Button>