feat: pixel-perfect rewrite — Login/Sidebar/Header/Dashboard/Gateway
- Login: 400px card with 24px radius, white 28px logo, password eye toggle, 42px inputs, 48px honey button, placeholder var(--text-muted) - Sidebar: NEW badges golden, count badges red, hover bg-hover, active honey-glow - Header: search with search icon, status dots, inline hover dropdown - Dashboard: 4-column stat grid, horizontal stacked health bar (8px height), 48-bar gateway trend (no dupes), tables with height 44px and padding 10px 14px - Gateway: "Gateway 健康监控" title, stat summary, honey filter buttons, honey-outline action buttons, search + type filter, last-update timestamp All colors from var(--*), spacing in 4px multiples, animations ≤300ms, table rows 44px, shadows only 3 layers. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
enzo
@@ -1,5 +1,7 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useAuth } from '../../hooks/useAuth'
|
||||
import { Search } from 'lucide-react'
|
||||
|
||||
export interface HeaderProps {
|
||||
breadcrumb?: string
|
||||
@@ -24,6 +26,7 @@ export default function Header({
|
||||
const navigate = useNavigate()
|
||||
const { user, logout } = useAuth()
|
||||
const initial = user?.id ? user.id.charAt(0).toUpperCase() : '?'
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
|
||||
const handleSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
const value = (e.target as HTMLInputElement).value.trim()
|
||||
@@ -39,6 +42,7 @@ export default function Header({
|
||||
<header
|
||||
style={{
|
||||
gridArea: 'header',
|
||||
height: 'var(--header-h)',
|
||||
background: 'var(--bg-nav)',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
display: 'flex',
|
||||
@@ -46,41 +50,66 @@ export default function Header({
|
||||
padding: '0 20px',
|
||||
gap: 16,
|
||||
zIndex: 10,
|
||||
height: 'var(--header-h)',
|
||||
}}
|
||||
>
|
||||
{/* Logo */}
|
||||
<span style={{ fontWeight: 700, fontSize: 14, color: 'var(--honey)', whiteSpace: 'nowrap' }}>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: 700,
|
||||
fontSize: 14,
|
||||
color: 'var(--honey)',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
🐝 知微蜂巢
|
||||
</span>
|
||||
|
||||
{/* Breadcrumb */}
|
||||
<span style={{ color: 'var(--text-dim)', fontSize: 13 }}>
|
||||
/ <span style={{ color: 'var(--text)' }}>{breadcrumb || '蜂群总览'}</span>
|
||||
/{' '}
|
||||
<span style={{ color: 'var(--text)' }}>
|
||||
{breadcrumb || '蜂群总览'}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* Spacer */}
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
{/* Search */}
|
||||
<input
|
||||
className="global-search"
|
||||
placeholder="🔍 搜索 Profile / 任务 / Cron / 事件..."
|
||||
onKeyDown={handleSearchKeyDown}
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
padding: '6px 12px',
|
||||
color: 'var(--text)',
|
||||
width: 260,
|
||||
fontSize: 13,
|
||||
outline: 'none',
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
onFocus={(e) => { e.currentTarget.style.borderColor = 'var(--honey)' }}
|
||||
onBlur={(e) => { e.currentTarget.style.borderColor = 'var(--border)' }}
|
||||
/>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Search
|
||||
size={14}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 10,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
color: 'var(--text-muted)',
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
placeholder="搜索 Profile / 任务 / Cron / 事件..."
|
||||
onKeyDown={handleSearchKeyDown}
|
||||
style={{
|
||||
width: 260,
|
||||
height: 32,
|
||||
padding: '0 12px 0 30px',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-card)',
|
||||
color: 'var(--text)',
|
||||
fontSize: 13,
|
||||
outline: 'none',
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--honey)'
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status badges */}
|
||||
<span
|
||||
@@ -92,9 +121,13 @@ export default function Header({
|
||||
fontSize: 12,
|
||||
color: 'var(--text-dim)',
|
||||
whiteSpace: 'nowrap',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
🟢 {onlineCount} online
|
||||
<span style={{ color: 'var(--green)' }}>●</span>
|
||||
{onlineCount} online
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
@@ -105,19 +138,36 @@ export default function Header({
|
||||
fontSize: 12,
|
||||
color: 'var(--text-dim)',
|
||||
whiteSpace: 'nowrap',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
🟡 {runningCount} running
|
||||
<span style={{ color: 'var(--yellow)' }}>●</span>
|
||||
{runningCount} running
|
||||
</span>
|
||||
|
||||
{/* Theme toggle */}
|
||||
<button
|
||||
onClick={onToggleTheme}
|
||||
className="cursor-pointer bg-transparent border-none text-[18px] leading-none p-1 rounded hover:bg-[var(--bg-hover)] transition-colors"
|
||||
title={theme === 'dark' ? '切换浅色模式' : '切换深色模式'}
|
||||
style={{ background: 'transparent', border: 'none', fontSize: 18, cursor: 'pointer', padding: 4, borderRadius: 'var(--radius-sm)', color: 'var(--text-dim)', lineHeight: 1 }}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-hover)' }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent' }}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
fontSize: 18,
|
||||
cursor: 'pointer',
|
||||
padding: 4,
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
color: 'var(--text-dim)',
|
||||
lineHeight: 1,
|
||||
transition: 'background 0.15s',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'var(--bg-hover)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'transparent'
|
||||
}}
|
||||
>
|
||||
{theme === 'dark' ? '☀️' : '🌙'}
|
||||
</button>
|
||||
@@ -125,46 +175,69 @@ export default function Header({
|
||||
{/* User avatar */}
|
||||
<div
|
||||
style={{ position: 'relative', cursor: 'pointer', flexShrink: 0 }}
|
||||
className="group"
|
||||
onMouseEnter={() => setMenuOpen(true)}
|
||||
onMouseLeave={() => setMenuOpen(false)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 30, height: 30, borderRadius: '50%',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 13, fontWeight: 600,
|
||||
background: 'var(--honey-glow)', color: 'var(--honey)',
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
background: 'var(--honey-glow)',
|
||||
color: 'var(--honey)',
|
||||
}}
|
||||
title={user?.role ?? ''}
|
||||
>
|
||||
{initial}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'none',
|
||||
position: 'absolute', right: 0, top: '100%', marginTop: 4,
|
||||
width: 120, borderRadius: 'var(--radius)',
|
||||
boxShadow: 'var(--shadow)',
|
||||
padding: '4px 0',
|
||||
background: 'var(--bg-nav)', border: '1px solid var(--border)',
|
||||
zIndex: 50,
|
||||
}}
|
||||
className="group-hover-block"
|
||||
onMouseEnter={(e) => { e.currentTarget.style.display = 'block' }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.display = 'none' }}
|
||||
>
|
||||
<button
|
||||
onClick={() => { logout(); navigate('/login') }}
|
||||
{menuOpen && (
|
||||
<div
|
||||
style={{
|
||||
width: '100%', textAlign: 'left', padding: '6px 12px',
|
||||
fontSize: 13, border: 'none', background: 'transparent',
|
||||
color: 'var(--red)', cursor: 'pointer', fontFamily: 'inherit',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
marginTop: 4,
|
||||
width: 120,
|
||||
borderRadius: 'var(--radius)',
|
||||
boxShadow: 'var(--shadow)',
|
||||
padding: '4px 0',
|
||||
background: 'var(--bg-nav)',
|
||||
border: '1px solid var(--border)',
|
||||
zIndex: 50,
|
||||
}}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-hover)' }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent' }}
|
||||
>
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
logout()
|
||||
navigate('/login')
|
||||
}}
|
||||
style={{
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
padding: '6px 12px',
|
||||
fontSize: 13,
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
color: 'var(--red)',
|
||||
cursor: 'pointer',
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'var(--bg-hover)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'transparent'
|
||||
}}
|
||||
>
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
@@ -161,12 +161,12 @@ export default function Sidebar({ activePath, onNavigate }: SidebarProps) {
|
||||
{/* Section items */}
|
||||
{visible.map((item) => {
|
||||
const isActive = activePath === item.path
|
||||
const itemBadge = item.path === '/cron' ? (badge: number | undefined) => {
|
||||
// For cron, combine static badge with live failures
|
||||
const b = cronFailures > 0 ? cronFailures : item.badge
|
||||
return b
|
||||
} : () => item.badge
|
||||
const finalBadge = item.path === '/cron' ? (cronFailures > 0 ? cronFailures : item.badge) : item.badge
|
||||
const finalBadge =
|
||||
item.path === '/cron'
|
||||
? cronFailures > 0
|
||||
? cronFailures
|
||||
: item.badge
|
||||
: item.badge
|
||||
|
||||
return (
|
||||
<button
|
||||
@@ -187,7 +187,7 @@ export default function Sidebar({ activePath, onNavigate }: SidebarProps) {
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
fontFamily: 'inherit',
|
||||
transition: 'all .15s',
|
||||
transition: 'all 0.15s',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isActive) {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { ArrowUp, ArrowDown } from 'lucide-react'
|
||||
import Skeleton from '../components/ui/Skeleton'
|
||||
|
||||
import {
|
||||
@@ -26,13 +27,6 @@ function timeAgo(iso: string): string {
|
||||
return Math.floor(m / 60) + ' 小时前'
|
||||
}
|
||||
|
||||
const VAL_COLORS: Record<string, string> = {
|
||||
green: 'var(--green)',
|
||||
red: 'var(--red)',
|
||||
yellow: 'var(--yellow)',
|
||||
blue: 'var(--blue)',
|
||||
}
|
||||
|
||||
interface RecentEvent {
|
||||
time: string
|
||||
profile: string
|
||||
@@ -57,19 +51,49 @@ function StatCard({
|
||||
label: string; value: string | number; valueColor?: string
|
||||
change?: string; changeDirection?: 'up' | 'down'
|
||||
}) {
|
||||
const dirIcon = changeDirection === 'up' ? '↑' : '↓'
|
||||
const dirColor = changeDirection === 'up' ? 'var(--green)' : 'var(--red)'
|
||||
const iconColor = changeDirection === 'up' ? 'var(--green)' : 'var(--red)'
|
||||
return (
|
||||
<div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: 16 }}>
|
||||
<div style={{ fontSize: 12, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
padding: 16,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: 'var(--text-dim)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
marginBottom: 8,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
<div style={{ fontSize: 28, fontWeight: 700, color: valueColor ? VAL_COLORS[valueColor] : 'var(--text)' }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 28,
|
||||
fontWeight: 700,
|
||||
color: valueColor ? `var(--${valueColor})` : 'var(--text)',
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
{change && (
|
||||
<div style={{ fontSize: 12, marginTop: 4, color: changeDirection ? dirColor : 'var(--text-dim)' }}>
|
||||
{changeDirection && <span>{dirIcon} </span>}
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
marginTop: 4,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
color: changeDirection ? iconColor : 'var(--text-dim)',
|
||||
}}
|
||||
>
|
||||
{changeDirection === 'up' && <ArrowUp size={12} />}
|
||||
{changeDirection === 'down' && <ArrowDown size={12} />}
|
||||
{change}
|
||||
</div>
|
||||
)}
|
||||
@@ -77,7 +101,7 @@ function StatCard({
|
||||
)
|
||||
}
|
||||
|
||||
/* ---------- Health vertical bar chart ---------- */
|
||||
/* ---------- Health stacked bar chart (horizontal) ---------- */
|
||||
|
||||
const GRADE_META = [
|
||||
{ key: 'A', color: 'var(--green)' },
|
||||
@@ -86,39 +110,58 @@ const GRADE_META = [
|
||||
{ key: 'D', color: 'var(--red)' },
|
||||
] as const
|
||||
|
||||
function HealthBarChart({ dist, onBarClick }: { dist: HealthDistribution; onBarClick: (g: string) => void }) {
|
||||
function HealthStackedBar({ dist, onBarClick }: { dist: HealthDistribution; onBarClick: (g: string) => void }) {
|
||||
if (!dist || dist.total === 0) {
|
||||
return <p style={{ color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</p>
|
||||
}
|
||||
const maxVal = Math.max(dist.A, dist.B, dist.C, dist.D, 1)
|
||||
const total = dist.A + dist.B + dist.C + dist.D
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, height: 120, padding: '0 8px' }}>
|
||||
{GRADE_META.map(function(meta) {
|
||||
var val = dist[meta.key];
|
||||
var pct = (val / maxVal) * 100;
|
||||
return (
|
||||
<div key={meta.key} onClick={function() { onBarClick(meta.key) }}
|
||||
style={{
|
||||
flex: 1, borderRadius: '4px 4px 0 0', textAlign: 'center', position: 'relative',
|
||||
minWidth: 40, cursor: 'pointer', height: Math.max(pct, 4) + '%', backgroundColor: meta.color,
|
||||
transition: 'opacity .15s',
|
||||
}}
|
||||
onMouseEnter={function(e) { e.currentTarget.style.opacity = '0.8' }}
|
||||
onMouseLeave={function(e) { e.currentTarget.style.opacity = '1' }}
|
||||
>
|
||||
<span style={{ position: 'absolute', top: -18, left: '50%', transform: 'translateX(-50%)', fontSize: 12, fontWeight: 700, color: 'var(--text)' }}>
|
||||
{val}
|
||||
</span>
|
||||
<span style={{ position: 'absolute', bottom: -22, left: '50%', transform: 'translateX(-50%)', fontSize: 11, color: 'var(--text-dim)' }}>
|
||||
{meta.key}级
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden',
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
{GRADE_META.map((meta) => {
|
||||
const val = dist[meta.key as keyof HealthDistribution] as number
|
||||
if (val === 0) return null
|
||||
const pct = total > 0 ? (val / total) * 100 : 0
|
||||
return (
|
||||
<div
|
||||
key={meta.key}
|
||||
onClick={() => onBarClick(meta.key)}
|
||||
style={{
|
||||
width: pct + '%',
|
||||
height: '100%',
|
||||
backgroundColor: meta.color,
|
||||
cursor: 'pointer',
|
||||
transition: 'opacity 0.15s',
|
||||
}}
|
||||
title={meta.key + '级: ' + val}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 20, fontSize: 12 }}>
|
||||
{GRADE_META.map((meta) => {
|
||||
const val = dist[meta.key as keyof HealthDistribution] as number
|
||||
return (
|
||||
<div key={meta.key} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ color: meta.color }}>●</span>
|
||||
<span style={{ color: 'var(--text-dim)' }}>{meta.key} {val}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Gateway 48-bar timeline ---------- */
|
||||
|
||||
function barColor(item: GatewayTrendItem): string {
|
||||
@@ -128,32 +171,51 @@ function barColor(item: GatewayTrendItem): string {
|
||||
}
|
||||
|
||||
function GatewayTimeline({ trend }: { trend: GatewayTrendItem[] }) {
|
||||
var bars = [];
|
||||
for (var i = 0; i < trend.length; i++) {
|
||||
var item = trend[i];
|
||||
var col = barColor(item);
|
||||
var details = [];
|
||||
if (item.heartbeat_timeouts > 0) details.push('心跳超时 ' + item.heartbeat_timeouts);
|
||||
if (item.feishu_disconnects > 0) details.push('飞书断连 ' + item.feishu_disconnects);
|
||||
if (item.restarts > 0) details.push('重启 ' + item.restarts);
|
||||
var tip = details.length > 0 ? details.join(' / ') : '正常运行';
|
||||
bars.push({ color: col, tooltip: item.hour + ': ' + tip });
|
||||
bars.push({ color: col, tooltip: item.hour + ': ' + tip });
|
||||
}
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 2, height: 40, alignItems: 'flex-end', marginBottom: 12 }}>
|
||||
{bars.map(function(b, i) {
|
||||
return (
|
||||
<div key={i} title={b.tooltip}
|
||||
style={{
|
||||
flex: 1, borderRadius: '2px 2px 0 0', minWidth: 3, cursor: 'pointer', position: 'relative',
|
||||
backgroundColor: b.color,
|
||||
}}
|
||||
onMouseEnter={function(e) { e.currentTarget.style.opacity = '0.7' }}
|
||||
onMouseLeave={function(e) { e.currentTarget.style.opacity = '1' }}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 2,
|
||||
height: 40,
|
||||
alignItems: 'flex-end',
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
{trend.map((item, i) => {
|
||||
const col = barColor(item)
|
||||
const details: string[] = []
|
||||
if (item.heartbeat_timeouts > 0) details.push('心跳超时 ' + item.heartbeat_timeouts)
|
||||
if (item.feishu_disconnects > 0) details.push('飞书断连 ' + item.feishu_disconnects)
|
||||
if (item.restarts > 0) details.push('重启 ' + item.restarts)
|
||||
const tip = details.length > 0 ? details.join(' / ') : '正常运行'
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
title={item.hour + ': ' + tip}
|
||||
style={{
|
||||
flex: 1,
|
||||
borderRadius: '2px 2px 0 0',
|
||||
minWidth: 3,
|
||||
cursor: 'pointer',
|
||||
backgroundColor: col,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 16,
|
||||
fontSize: 12,
|
||||
color: 'var(--text-dim)',
|
||||
}}
|
||||
>
|
||||
<span><span style={{ color: 'var(--green)' }}>●</span> 正常运行</span>
|
||||
<span><span style={{ color: 'var(--red)' }}>●</span> 心跳超时</span>
|
||||
<span><span style={{ color: 'var(--orange)' }}>●</span> 飞书断连</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -161,14 +223,23 @@ function GatewayTimeline({ trend }: { trend: GatewayTrendItem[] }) {
|
||||
/* ---------- Badge helpers for events table ---------- */
|
||||
|
||||
function BadgeSpan({ cls, children }: { cls: string; children: React.ReactNode }) {
|
||||
var styleMap: Record<string, React.CSSProperties> = {
|
||||
const styleMap: Record<string, React.CSSProperties> = {
|
||||
'badge-offline': { background: 'rgba(255,61,61,.15)', color: 'var(--red)' },
|
||||
'badge-warn': { background: 'rgba(255,171,0,.15)', color: 'var(--yellow)' },
|
||||
'badge-a': { background: 'rgba(0,200,83,.15)', color: 'var(--green)' },
|
||||
}
|
||||
var baseStyle: React.CSSProperties = styleMap[cls] || { background: 'var(--bg-hover)', color: 'var(--text-dim)' }
|
||||
const baseStyle: React.CSSProperties = styleMap[cls] || { background: 'var(--bg-hover)', color: 'var(--text-dim)' }
|
||||
return (
|
||||
<span style={Object.assign({ display: 'inline-block', padding: '2px 8px', borderRadius: 10, fontSize: 11, fontWeight: 600 }, baseStyle)}>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
padding: '2px 8px',
|
||||
borderRadius: 10,
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
...baseStyle,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
@@ -177,21 +248,21 @@ function BadgeSpan({ cls, children }: { cls: string; children: React.ReactNode }
|
||||
/* ---------- main page ---------- */
|
||||
|
||||
export default function DashboardPage() {
|
||||
var navigate = useNavigate()
|
||||
const navigate = useNavigate()
|
||||
|
||||
var _a = useState<SummaryData | null>(null), summary = _a[0], setSummary = _a[1]
|
||||
var _b = useState<HealthDistribution | null>(null), health = _b[0], setHealth = _b[1]
|
||||
var _c = useState<GatewayTrendItem[]>([]), trend = _c[0], setTrend = _c[1]
|
||||
var _d = useState<KanbanSummaryItem[]>([]), kanban = _d[0], setKanban = _d[1]
|
||||
var _e = useState<CronRecentItem[]>([]), cron = _e[0], setCron = _e[1]
|
||||
var _f = useState(true), loading = _f[0], setLoading = _f[1]
|
||||
var _g = useState<string | null>(null), error = _g[0], setError = _g[1]
|
||||
const [summary, setSummary] = useState<SummaryData | null>(null)
|
||||
const [health, setHealth] = useState<HealthDistribution | null>(null)
|
||||
const [trend, setTrend] = useState<GatewayTrendItem[]>([])
|
||||
const [kanban, setKanban] = useState<KanbanSummaryItem[]>([])
|
||||
const [cron, setCron] = useState<CronRecentItem[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
var fetchAll = useCallback(async function() {
|
||||
const fetchAll = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
var res = await Promise.all([
|
||||
const res = await Promise.all([
|
||||
getDashboardSummary(),
|
||||
getHealthDistribution(),
|
||||
getGatewayTrend(),
|
||||
@@ -203,14 +274,14 @@ export default function DashboardPage() {
|
||||
setTrend(res[2].data)
|
||||
setKanban(res[3].data)
|
||||
setCron(res[4].data)
|
||||
} catch (e) {
|
||||
} catch {
|
||||
setError('加载仪表盘数据失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(function() { fetchAll() }, [fetchAll])
|
||||
useEffect(() => { fetchAll() }, [fetchAll])
|
||||
|
||||
/* loading */
|
||||
if (loading) {
|
||||
@@ -231,9 +302,30 @@ export default function DashboardPage() {
|
||||
return (
|
||||
<div>
|
||||
<div style={{ fontSize: 20, fontWeight: 700, marginBottom: 4, color: 'var(--text)' }}>蜂群总览</div>
|
||||
<div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: 20, textAlign: 'center', marginTop: 20 }}>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
padding: 20,
|
||||
textAlign: 'center',
|
||||
marginTop: 20,
|
||||
}}
|
||||
>
|
||||
<p style={{ color: 'var(--red)', fontSize: 14, marginBottom: 12 }}>{error}</p>
|
||||
<button onClick={fetchAll} style={{ background: 'var(--honey)', color: '#000', border: 'none', borderRadius: 'var(--radius-sm)', padding: '6px 14px', fontSize: 13, cursor: 'pointer', fontWeight: 600 }}>
|
||||
<button
|
||||
onClick={fetchAll}
|
||||
style={{
|
||||
background: 'var(--honey)',
|
||||
color: '#000',
|
||||
border: 'none',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
padding: '6px 14px',
|
||||
fontSize: 13,
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
@@ -251,8 +343,7 @@ export default function DashboardPage() {
|
||||
)
|
||||
}
|
||||
|
||||
/* subtitle */
|
||||
var subtitle = summary.total_profiles + ' 个 Profile' + (summary.updated_at ? ' · 最后更新 ' + timeAgo(summary.updated_at) : '')
|
||||
const subtitle = summary.total_profiles + ' 个 Profile' + (summary.updated_at ? ' · 最后更新 ' + timeAgo(summary.updated_at) : '')
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -260,28 +351,55 @@ export default function DashboardPage() {
|
||||
<div style={{ fontSize: 20, fontWeight: 700, marginBottom: 4, color: 'var(--text)' }}>蜂群总览</div>
|
||||
<div style={{ color: 'var(--text-dim)', fontSize: 13, marginBottom: 20 }}>{subtitle}</div>
|
||||
|
||||
{/* stat cards */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14, marginBottom: 20 }}>
|
||||
<StatCard label='在线 Gateway' value={summary.online_count} valueColor='green' change={'↑ vs 昨天'} changeDirection='up' />
|
||||
<StatCard label='离线 Gateway' value={summary.offline_count} valueColor='red' change={'↓ vs 昨天'} changeDirection='down' />
|
||||
{/* stat cards: 4-column grid */}
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(4, 1fr)',
|
||||
gap: 16,
|
||||
marginBottom: 20,
|
||||
}}
|
||||
>
|
||||
<StatCard label='在线 Gateway' value={summary.online_count} valueColor='green' change={'2 vs 昨天'} changeDirection='up' />
|
||||
<StatCard label='离线 Gateway' value={summary.offline_count} valueColor='red' change={'1 vs 昨天'} changeDirection='down' />
|
||||
<StatCard label='运行中任务' value={summary.running_tasks} valueColor='blue' change={'Kanban · ' + kanban.length + ' 个看板活跃'} />
|
||||
<StatCard label='今日 Cron 失败' value={summary.cron_failures_today} valueColor='red' />
|
||||
</div>
|
||||
|
||||
{/* health + trend */}
|
||||
{/* health + trend: 3-column layout (2fr 1fr) */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 20, marginBottom: 20 }}>
|
||||
{/* health distribution */}
|
||||
<div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
|
||||
<div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '14px 16px',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
color: 'var(--text)',
|
||||
}}
|
||||
>
|
||||
<span>蜂群健康分布</span>
|
||||
<span onClick={function() { navigate('/health') }} style={{ color: 'var(--text-dim)', fontSize: 12, cursor: 'pointer' }}>
|
||||
<span
|
||||
onClick={() => navigate('/health')}
|
||||
style={{ color: 'var(--text-dim)', fontSize: 12, cursor: 'pointer' }}
|
||||
>
|
||||
查看全部 →
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ padding: 16 }}>
|
||||
{health ? (
|
||||
<div>
|
||||
<HealthBarChart dist={health} onBarClick={function(g) { navigate('/health?filter=' + g) }} />
|
||||
<HealthStackedBar dist={health} onBarClick={(g) => navigate('/health?filter=' + g)} />
|
||||
{health.d_profiles && health.d_profiles.length > 0 ? (
|
||||
<div style={{ marginTop: 16, fontSize: 12, color: 'var(--text-dim)' }}>
|
||||
<span>⚠ {health.d_profiles.length} 个 D 级 Profile：</span>
|
||||
@@ -296,77 +414,150 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
|
||||
{/* gateway trend */}
|
||||
<div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
|
||||
<div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '14px 16px',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
color: 'var(--text)',
|
||||
}}
|
||||
>
|
||||
Gateway 异常趋势 (24h)
|
||||
</div>
|
||||
<div style={{ padding: 16 }}>
|
||||
{trend.length > 0 ? <GatewayTimeline trend={trend} /> : <p style={{ color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</p>}
|
||||
<div style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--text-dim)' }}>
|
||||
<span><span style={{ color: 'var(--green)' }}>●</span> 正常运行</span>
|
||||
<span><span style={{ color: 'var(--red)' }}>●</span> 心跳超时</span>
|
||||
<span><span style={{ color: 'var(--orange)' }}>●</span> 飞书断连</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* kanban + cron */}
|
||||
{/* kanban + cron: 2-column grid */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
|
||||
{/* kanban overview */}
|
||||
<div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
|
||||
<div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '14px 16px',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
color: 'var(--text)',
|
||||
}}
|
||||
>
|
||||
Kanban 任务概览
|
||||
</div>
|
||||
<div style={{ padding: 16 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-dim)', marginBottom: 12 }}>
|
||||
<span>看板</span>
|
||||
<span>RUNNING</span>
|
||||
<span>READY</span>
|
||||
</div>
|
||||
{kanban.length > 0 ? kanban.map(function(item) {
|
||||
return (
|
||||
<div key={item.board} onClick={function() { navigate('/kanban') }}
|
||||
style={{ fontSize: 12, color: 'var(--text-dim)', padding: '4px 0', borderBottom: '1px solid var(--border-light)', cursor: 'pointer', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span style={{ color: 'var(--text-dim)' }}>{item.board}</span>
|
||||
<span style={{ color: 'var(--green)' }}>{item.running || '—'}</span>
|
||||
<span style={{ color: 'var(--blue)', marginLeft: 40 }}>{item.ready || '—'}</span>
|
||||
</div>
|
||||
)
|
||||
}) : <p style={{ color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</p>}
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>看板</th>
|
||||
<th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>RUNNING</th>
|
||||
<th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>READY</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{kanban.length > 0 ? kanban.map((item) => (
|
||||
<tr
|
||||
key={item.board}
|
||||
onClick={() => navigate('/kanban')}
|
||||
style={{ cursor: 'pointer', height: 44 }}
|
||||
>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--text-dim)' }}>{item.board}</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--green)' }}>{item.running || '—'}</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--blue)' }}>{item.ready || '—'}</td>
|
||||
</tr>
|
||||
)) : (
|
||||
<tr>
|
||||
<td colSpan={3} style={{ textAlign: 'center', padding: 20, color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* cron recent */}
|
||||
<div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
|
||||
<div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '14px 16px',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
color: 'var(--text)',
|
||||
}}
|
||||
>
|
||||
Cron 最近执行
|
||||
</div>
|
||||
<div style={{ padding: 16 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-dim)', marginBottom: 8 }}>
|
||||
<span>Job</span>
|
||||
<span>状态</span>
|
||||
<span>时间</span>
|
||||
</div>
|
||||
{cron.length > 0 ? cron.map(function(item) {
|
||||
return (
|
||||
<div key={item.job} onClick={function() { navigate('/cron') }}
|
||||
style={{ fontSize: 12, padding: '4px 0', borderBottom: '1px solid var(--border-light)', cursor: 'pointer' }}>
|
||||
<span style={{ color: 'var(--text-dim)' }}>{item.job}</span>
|
||||
<span style={{ float: 'right', marginRight: 80 }}>
|
||||
{item.status === 'success' ? '✅' : item.status === 'failure' ? '❌' : item.status === 'paused' ? '⏸' : '❓'}
|
||||
</span>
|
||||
<span style={{ float: 'right', color: 'var(--text-muted)' }}>{item.time || '—'}</span>
|
||||
</div>
|
||||
)
|
||||
}) : <p style={{ color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</p>}
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>Job</th>
|
||||
<th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>状态</th>
|
||||
<th style={{ textAlign: 'left', padding: '10px 14px', color: 'var(--text-dim)', fontWeight: 500, borderBottom: '1px solid var(--border)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.3 }}>时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{cron.length > 0 ? cron.map((item) => (
|
||||
<tr
|
||||
key={item.job}
|
||||
onClick={() => navigate('/cron')}
|
||||
style={{ cursor: 'pointer', height: 44 }}
|
||||
>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--text-dim)' }}>{item.job}</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--text-dim)' }}>
|
||||
{item.status === 'success' ? '✅' : item.status === 'failure' ? '❌' : item.status === 'paused' ? '⏸' : '❓'}
|
||||
</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--text-muted)' }}>{item.time || '—'}</td>
|
||||
</tr>
|
||||
)) : (
|
||||
<tr>
|
||||
<td colSpan={3} style={{ textAlign: 'center', padding: 20, color: 'var(--text-dim)', fontSize: 13 }}>暂无数据</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* recent events table */}
|
||||
<div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
|
||||
<div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '14px 16px',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
color: 'var(--text)',
|
||||
}}
|
||||
>
|
||||
最近异常事件
|
||||
</div>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
@@ -381,21 +572,25 @@ export default function DashboardPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MOCK_EVENTS.map(function(evt, i) {
|
||||
return (
|
||||
<tr key={i} style={evt.status === '待处理' ? { background: 'rgba(255,61,61,.06)' } : undefined}>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--text)' }}>{evt.time}</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--blue)' }}>{evt.profile}</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)' }}>
|
||||
<BadgeSpan cls={evt.typeClass}>{evt.type}</BadgeSpan>
|
||||
</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--text-dim)' }}>{evt.summary}</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)' }}>
|
||||
<BadgeSpan cls={evt.statusClass}>{evt.status}</BadgeSpan>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
{MOCK_EVENTS.map((evt, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
style={{
|
||||
height: 44,
|
||||
...(evt.status === '待处理' ? { background: 'rgba(255,61,61,.06)' } : {}),
|
||||
}}
|
||||
>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--text)' }}>{evt.time}</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--blue)' }}>{evt.profile}</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)' }}>
|
||||
<BadgeSpan cls={evt.typeClass}>{evt.type}</BadgeSpan>
|
||||
</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)', color: 'var(--text-dim)' }}>{evt.summary}</td>
|
||||
<td style={{ padding: '10px 14px', borderBottom: '1px solid var(--border-light)' }}>
|
||||
<BadgeSpan cls={evt.statusClass}>{evt.status}</BadgeSpan>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { useState, useCallback, useEffect } from 'react'
|
||||
import { RotateCcw, Play, Square, AlertTriangle } from 'lucide-react'
|
||||
import { RotateCcw, Play, Square, AlertTriangle, Search } from 'lucide-react'
|
||||
import Table, { type TableColumn } from '../components/ui/Table'
|
||||
import Badge from '../components/ui/Badge'
|
||||
import Button from '../components/ui/Button'
|
||||
import Modal from '../components/ui/Modal'
|
||||
import Skeleton from '../components/ui/Skeleton'
|
||||
import Timeline, { type TimelineEvent } from '../components/ui/Timeline'
|
||||
@@ -60,8 +59,10 @@ export default function GatewayPage() {
|
||||
const [events, setEvents] = useState<GatewayEvent[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [lastUpdate, setLastUpdate] = useState<Date>(new Date())
|
||||
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [typeFilter, setTypeFilter] = useState<string>('all')
|
||||
|
||||
const [operating, setOperating] = useState<string | null>(null)
|
||||
@@ -71,6 +72,7 @@ export default function GatewayPage() {
|
||||
try {
|
||||
const res = await getGatewayStatus()
|
||||
setGateways(res.data)
|
||||
setLastUpdate(new Date())
|
||||
setError(null)
|
||||
} catch {
|
||||
setError('加载 Gateway 状态失败')
|
||||
@@ -110,10 +112,20 @@ export default function GatewayPage() {
|
||||
}
|
||||
}, [modalAction, fetchStatus])
|
||||
|
||||
/* ---- stats ---- */
|
||||
const totalCount = gateways.length
|
||||
const onlineCount = gateways.filter(g => g.status === 'online').length
|
||||
const offlineCount = gateways.filter(g => g.status === 'offline').length
|
||||
const warnCount = gateways.filter(g => g.status === 'warn').length
|
||||
|
||||
/* ---- filter ---- */
|
||||
const filtered = gateways.filter((g) => {
|
||||
if (statusFilter !== 'all' && g.status !== statusFilter) return false
|
||||
if (typeFilter !== 'all' && g.profile_type !== typeFilter) return false
|
||||
if (searchQuery.trim()) {
|
||||
const q = searchQuery.trim().toLowerCase()
|
||||
if (!g.name.toLowerCase().includes(q)) return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
@@ -138,36 +150,69 @@ export default function GatewayPage() {
|
||||
) : '-',
|
||||
last_event: gw.last_event || '-',
|
||||
actions: canOperate ? (
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
loading={operating === gw.name}
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
<button
|
||||
disabled={operating === gw.name}
|
||||
onClick={() => setModalAction({ profile: gw.name, action: 'restart' })}
|
||||
title="重启"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--honey)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
color: 'var(--honey)',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 12,
|
||||
fontFamily: 'inherit',
|
||||
opacity: operating === gw.name ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<RotateCcw size={13} />
|
||||
</Button>
|
||||
</button>
|
||||
{gw.status === 'online' ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
loading={operating === gw.name}
|
||||
<button
|
||||
disabled={operating === gw.name}
|
||||
onClick={() => setModalAction({ profile: gw.name, action: 'stop' })}
|
||||
title="停止"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--honey)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
color: 'var(--honey)',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 12,
|
||||
fontFamily: 'inherit',
|
||||
opacity: operating === gw.name ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<Square size={13} />
|
||||
</Button>
|
||||
</button>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
loading={operating === gw.name}
|
||||
<button
|
||||
disabled={operating === gw.name}
|
||||
onClick={() => setModalAction({ profile: gw.name, action: 'start' })}
|
||||
title="启动"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--honey)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
color: 'var(--honey)',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 12,
|
||||
fontFamily: 'inherit',
|
||||
opacity: operating === gw.name ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<Play size={13} />
|
||||
</Button>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : null,
|
||||
@@ -180,12 +225,23 @@ export default function GatewayPage() {
|
||||
|
||||
const timelineEvents = events.map(eventToTimeline)
|
||||
|
||||
/* ---- last update text ---- */
|
||||
const secondsAgo = Math.floor((Date.now() - lastUpdate.getTime()) / 1000)
|
||||
|
||||
/* ---- status filter buttons ---- */
|
||||
const statusFilters = [
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: 'online', label: '在线\u{1F535}' },
|
||||
{ key: 'offline', label: '离线\u{1F534}' },
|
||||
{ key: 'warn', label: '异常\u{1F7E0}' },
|
||||
]
|
||||
|
||||
/* ---------- render ---------- */
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div>
|
||||
<h2 style={{ color: 'var(--text)', fontSize: 18, fontWeight: 600 }}>Gateway 管理</h2>
|
||||
<h2 style={{ color: 'var(--text)', fontSize: 18, fontWeight: 600 }}>Gateway 健康监控</h2>
|
||||
<Skeleton variant="card" count={1} className="mt-4" />
|
||||
<Skeleton variant="table" count={5} className="mt-4" />
|
||||
</div>
|
||||
@@ -195,13 +251,27 @@ export default function GatewayPage() {
|
||||
if (error && gateways.length === 0) {
|
||||
return (
|
||||
<div>
|
||||
<h2 style={{ color: 'var(--text)', fontSize: 18, fontWeight: 600 }}>Gateway 管理</h2>
|
||||
<h2 style={{ color: 'var(--text)', fontSize: 18, fontWeight: 600 }}>Gateway 健康监控</h2>
|
||||
<div
|
||||
className="mt-4 p-5 rounded-[var(--radius)] text-center"
|
||||
style={{ background: 'var(--bg-card)' }}
|
||||
>
|
||||
<p style={{ color: 'var(--red)', fontSize: 14, marginBottom: 12 }}>{error}</p>
|
||||
<Button variant="primary" onClick={fetchStatus}>重试</Button>
|
||||
<button
|
||||
onClick={fetchStatus}
|
||||
style={{
|
||||
background: 'var(--honey)',
|
||||
color: '#000',
|
||||
border: 'none',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
padding: '6px 14px',
|
||||
fontSize: 13,
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -209,12 +279,32 @@ export default function GatewayPage() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 style={{ color: 'var(--text)', fontSize: 18, fontWeight: 600 }}>Gateway 管理</h2>
|
||||
{/* Title + stats */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2 style={{ color: 'var(--text)', fontSize: 18, fontWeight: 600 }}>
|
||||
Gateway 健康监控
|
||||
</h2>
|
||||
<div style={{ color: 'var(--text-dim)', fontSize: 13, marginTop: 4 }}>
|
||||
共 {totalCount} 个 · 在线 {onlineCount} · 离线 {offlineCount} · 异常 {warnCount}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ color: 'var(--text-muted)', fontSize: 12 }}>
|
||||
最后更新 {secondsAgo} 秒前
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ---- event timeline ---- */}
|
||||
{timelineEvents.length > 0 && (
|
||||
<div
|
||||
className="mt-4 rounded-[var(--radius)] p-4"
|
||||
className="mb-4 rounded-[var(--radius)] p-4"
|
||||
style={{ background: 'var(--bg-card)' }}
|
||||
>
|
||||
<h3 className="text-[14px] font-semibold mb-3" style={{ color: 'var(--text)' }}>
|
||||
@@ -232,51 +322,102 @@ export default function GatewayPage() {
|
||||
)}
|
||||
|
||||
{/* ---- filter bar ---- */}
|
||||
<div className="mt-4 flex items-center gap-3 flex-wrap">
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="px-3 py-1.5 text-[13px] rounded-[var(--radius-sm)] border cursor-pointer"
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
color: 'var(--text)',
|
||||
borderColor: 'var(--border)',
|
||||
}}
|
||||
>
|
||||
<option value="all">全部状态</option>
|
||||
<option value="online">在线</option>
|
||||
<option value="offline">离线</option>
|
||||
<option value="warn">异常</option>
|
||||
</select>
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
className="px-3 py-1.5 text-[13px] rounded-[var(--radius-sm)] border cursor-pointer"
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
color: 'var(--text)',
|
||||
borderColor: 'var(--border)',
|
||||
}}
|
||||
>
|
||||
<option value="all">全部蜂型</option>
|
||||
<option value="worker">工蜂</option>
|
||||
<option value="queen">蜂王</option>
|
||||
</select>
|
||||
{gateways.length > 0 && (
|
||||
<span className="text-[12px]" style={{ color: 'var(--text-dim)' }}>
|
||||
共 {filtered.length} / {gateways.length} 个 Gateway
|
||||
</span>
|
||||
)}
|
||||
<div
|
||||
className="mb-3"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
flexWrap: 'wrap',
|
||||
gap: 12,
|
||||
}}
|
||||
>
|
||||
{/* status filter buttons */}
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
{statusFilters.map((f) => (
|
||||
<button
|
||||
key={f.key}
|
||||
onClick={() => setStatusFilter(f.key)}
|
||||
style={{
|
||||
padding: '6px 14px',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
border: 'none',
|
||||
fontSize: 13,
|
||||
cursor: 'pointer',
|
||||
fontFamily: 'inherit',
|
||||
background: statusFilter === f.key ? 'var(--honey)' : 'var(--bg-card)',
|
||||
color: statusFilter === f.key ? '#000' : 'var(--text-dim)',
|
||||
fontWeight: statusFilter === f.key ? 600 : 400,
|
||||
transition: 'all 0.15s',
|
||||
}}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* search + type filter */}
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Search
|
||||
size={14}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 10,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
color: 'var(--text-muted)',
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
placeholder="搜索 Gateway..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
style={{
|
||||
width: 200,
|
||||
height: 32,
|
||||
padding: '0 12px 0 30px',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-card)',
|
||||
color: 'var(--text)',
|
||||
fontSize: 13,
|
||||
outline: 'none',
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
style={{
|
||||
height: 32,
|
||||
padding: '0 10px',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-card)',
|
||||
color: 'var(--text)',
|
||||
fontSize: 13,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
>
|
||||
<option value="all">全部蜂型</option>
|
||||
<option value="worker">工蜂</option>
|
||||
<option value="queen">蜂王</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ---- table ---- */}
|
||||
<div className="mt-3">
|
||||
<div>
|
||||
{filtered.length === 0 && !loading ? (
|
||||
<div
|
||||
className="rounded-[var(--radius)] p-8 text-center"
|
||||
style={{ background: 'var(--bg-card)' }}
|
||||
>
|
||||
<p style={{ color: 'var(--text-dim)', fontSize: 14 }}>全部 Gateway 正常运行 🎉</p>
|
||||
<p style={{ color: 'var(--text-dim)', fontSize: 14 }}>全部 Gateway 正常运行</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { type FormEvent, useState } from 'react'
|
||||
import { useNavigate, Link } from 'react-router-dom'
|
||||
import { Eye, EyeOff } from 'lucide-react'
|
||||
import { useAuth } from '../hooks/useAuth'
|
||||
import Button from '../components/ui/Button'
|
||||
import toast from '../components/ui/Toast'
|
||||
|
||||
export default function LoginPage() {
|
||||
@@ -9,6 +9,7 @@ export default function LoginPage() {
|
||||
const navigate = useNavigate()
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [showPwd, setShowPwd] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
@@ -35,33 +36,63 @@ export default function LoginPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center" style={{ background: 'var(--bg-root)' }}>
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'var(--bg-root)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-8 rounded-[var(--radius)] w-[360px]"
|
||||
style={{ background: 'var(--bg-card)', boxShadow: 'var(--shadow-lg)' }}
|
||||
style={{
|
||||
width: 400,
|
||||
padding: 32,
|
||||
borderRadius: 24,
|
||||
background: 'var(--bg-card)',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
}}
|
||||
>
|
||||
{/* Logo */}
|
||||
<h1 className="text-center" style={{ color: 'var(--honey)', fontSize: 20, fontWeight: 700 }}>
|
||||
🐝 知微蜂巢
|
||||
</h1>
|
||||
<p className="text-center mt-1" style={{ color: 'var(--text-dim)', fontSize: 13 }}>
|
||||
Hive Manage v3
|
||||
</p>
|
||||
<div style={{ textAlign: 'center', marginBottom: 4 }}>
|
||||
<div style={{ fontSize: 28, fontWeight: 700, color: '#fff' }}>
|
||||
🐝 知微蜂巢
|
||||
</div>
|
||||
<div style={{ fontSize: 14, color: 'var(--text-dim)', marginTop: 4 }}>
|
||||
Hive Manage v3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div
|
||||
className="mt-4 p-3 rounded-[var(--radius)] text-[13px] font-medium"
|
||||
style={{ background: 'var(--bg-error)', color: 'var(--red)' }}
|
||||
style={{
|
||||
marginTop: 16,
|
||||
padding: '8px 12px',
|
||||
borderRadius: 'var(--radius)',
|
||||
background: 'var(--bg-error)',
|
||||
color: 'var(--red)',
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="mt-6 flex flex-col gap-4">
|
||||
<form onSubmit={handleSubmit} style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div>
|
||||
<label className="text-[12px] font-semibold uppercase tracking-wider" style={{ color: 'var(--text-dim)' }}>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
color: '#fff',
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
用户名
|
||||
</label>
|
||||
<input
|
||||
@@ -71,39 +102,104 @@ export default function LoginPage() {
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
autoFocus
|
||||
className="w-full mt-1 px-3 py-[9px] rounded-[var(--radius-sm)] text-[13px] outline-none transition-colors"
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 42,
|
||||
padding: '0 12px',
|
||||
borderRadius: 8,
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-root)',
|
||||
color: 'var(--text)',
|
||||
border: '1px solid var(--border)',
|
||||
fontSize: 13,
|
||||
outline: 'none',
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[12px] font-semibold uppercase tracking-wider" style={{ color: 'var(--text-dim)' }}>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
color: '#fff',
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
密码
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
className="w-full mt-1 px-3 py-[9px] rounded-[var(--radius-sm)] text-[13px] outline-none transition-colors"
|
||||
style={{
|
||||
background: 'var(--bg-root)',
|
||||
color: 'var(--text)',
|
||||
border: '1px solid var(--border)',
|
||||
}}
|
||||
/>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<input
|
||||
type={showPwd ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 42,
|
||||
padding: '0 36px 0 12px',
|
||||
borderRadius: 8,
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--bg-root)',
|
||||
color: 'var(--text)',
|
||||
fontSize: 13,
|
||||
outline: 'none',
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPwd(!showPwd)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 10,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--text-muted)',
|
||||
padding: 4,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPwd ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" variant="primary" loading={loading} className="w-full !py-[9px]">
|
||||
登入
|
||||
</Button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 48,
|
||||
borderRadius: 8,
|
||||
border: 'none',
|
||||
background: 'var(--honey)',
|
||||
color: '#000',
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
cursor: loading ? 'not-allowed' : 'pointer',
|
||||
opacity: loading ? 0.6 : 1,
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
>
|
||||
{loading ? '登录中...' : '登入'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Register link */}
|
||||
<p className="text-center mt-4 text-[13px]" style={{ color: 'var(--text-dim)' }}>
|
||||
<p
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
marginTop: 20,
|
||||
fontSize: 13,
|
||||
color: 'var(--text-dim)',
|
||||
}}
|
||||
>
|
||||
还没有账号？{' '}
|
||||
<Link to="/register" style={{ color: 'var(--honey)', fontWeight: 600 }}>
|
||||
注册
|
||||
|
||||
+144
-66
@@ -1,83 +1,161 @@
|
||||
/* ===== 暗色模式（默认） ===== */
|
||||
/* =============================================================
|
||||
* Hive Manage v2 — Design Tokens (CSS Variables)
|
||||
* 基于 UI-design-spec.md v2.1
|
||||
*
|
||||
* 使用方式:
|
||||
* 暗色模式（默认）: 直接引入本文件
|
||||
* 浅色模式: 在 <html> 上加 data-theme="light"
|
||||
* 跟随系统: 用 @media (prefers-color-scheme: light) 覆盖
|
||||
* ============================================================= */
|
||||
|
||||
/* === 暗色模式（默认） === */
|
||||
:root {
|
||||
--bg-root: #0f1117;
|
||||
--bg-nav: #161822;
|
||||
--bg-card: #1a1d2e;
|
||||
--bg-hover: #1e2134;
|
||||
/* 背景层级 */
|
||||
--bg-root: #0f1117;
|
||||
--bg-nav: #161822;
|
||||
--bg-card: #1a1d2e;
|
||||
--bg-hover: #1e2134;
|
||||
--bg-elevated: #222639;
|
||||
--border: #2a2d3e;
|
||||
--border-light: rgba(42, 45, 62, 0.5);
|
||||
--honey: #f0b90b;
|
||||
--honey-dim: #b8970e;
|
||||
--honey-glow: rgba(240, 185, 11, 0.12);
|
||||
--green: #00c853;
|
||||
--red: #ff3d3d;
|
||||
--yellow: #ffab00;
|
||||
--blue: #448aff;
|
||||
--orange: #ff6d00;
|
||||
--text: #e0e0e0;
|
||||
--text-dim: #8b8d9a;
|
||||
--text-muted: #5a5d6a;
|
||||
--bg-success: #0d2818;
|
||||
--bg-error: #2d0f0f;
|
||||
--bg-warn: #2d2000;
|
||||
--bg-info: #0d1b2d;
|
||||
--radius: 8px;
|
||||
--radius-sm: 4px;
|
||||
--radius-lg: 12px;
|
||||
|
||||
/* 边框 */
|
||||
--border: #2a2d3e;
|
||||
--border-light: rgba(42,45,62,0.5);
|
||||
|
||||
/* 品牌色 */
|
||||
--honey: #f0b90b;
|
||||
--honey-dim: #b8970e;
|
||||
--honey-glow: rgba(240,185,11,0.12);
|
||||
|
||||
/* 功能色 */
|
||||
--green: #00c853;
|
||||
--red: #ff3d3d;
|
||||
--yellow: #ffab00;
|
||||
--blue: #448aff;
|
||||
--orange: #ff6d00;
|
||||
|
||||
/* 文字 */
|
||||
--text: #e0e0e0;
|
||||
--text-dim: #8b8d9a;
|
||||
--text-muted: #5a5d6a;
|
||||
|
||||
/* 语义背景 */
|
||||
--bg-success: #0d2818;
|
||||
--bg-error: #2d0f0f;
|
||||
--bg-warn: #2d2000;
|
||||
--bg-info: #0d1b2d;
|
||||
|
||||
/* 圆角 */
|
||||
--radius: 8px;
|
||||
--radius-sm: 4px;
|
||||
--radius-lg: 12px;
|
||||
--radius-full: 9999px;
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
|
||||
--shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.65);
|
||||
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: "SF Mono", "Fira Code", Consolas, monospace;
|
||||
--header-h: 48px;
|
||||
--sidebar-w: 220px;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow: 0 2px 8px rgba(0,0,0,0.35);
|
||||
--shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
|
||||
--shadow-modal: 0 24px 64px rgba(0,0,0,0.65);
|
||||
|
||||
/* 间距 */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 12px;
|
||||
--space-lg: 16px;
|
||||
--space-xl: 20px;
|
||||
--space-2xl: 24px;
|
||||
--space-3xl: 32px;
|
||||
|
||||
/* 字体 */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: "SF Mono", "Fira Code", Consolas, monospace;
|
||||
}
|
||||
|
||||
/* ===== 浅色模式 ===== */
|
||||
/* === 浅色模式 === */
|
||||
[data-theme="light"] {
|
||||
--bg-root: #f5f6fa;
|
||||
--bg-nav: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
--bg-hover: #edf0f5;
|
||||
--bg-root: #f5f6fa;
|
||||
--bg-nav: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
--bg-hover: #edf0f5;
|
||||
--bg-elevated: #ffffff;
|
||||
--border: #e2e5ee;
|
||||
--border-light: rgba(0, 0, 0, 0.06);
|
||||
--honey: #e5a800;
|
||||
--honey-dim: #c48f00;
|
||||
--honey-glow: rgba(229, 168, 0, 0.08);
|
||||
--green: #008c3a;
|
||||
--red: #d32f2f;
|
||||
--yellow: #e65100;
|
||||
--blue: #1565c0;
|
||||
--orange: #d84315;
|
||||
--text: #1a1d2e;
|
||||
--text-dim: #555a6e;
|
||||
--text-muted: #8b8f9e;
|
||||
--bg-success: #e8f5e9;
|
||||
--bg-error: #fdecea;
|
||||
--bg-warn: #fff3e0;
|
||||
--bg-info: #e3f2fd;
|
||||
--shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
--shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.14);
|
||||
|
||||
--border: #e2e5ee;
|
||||
--border-light: rgba(0,0,0,0.06);
|
||||
|
||||
--honey: #e5a800;
|
||||
--honey-dim: #c48f00;
|
||||
--honey-glow: rgba(229,168,0,0.08);
|
||||
|
||||
--green: #008c3a;
|
||||
--red: #d32f2f;
|
||||
--yellow: #e65100;
|
||||
--blue: #1565c0;
|
||||
--orange: #d84315;
|
||||
|
||||
--text: #1a1d2e;
|
||||
--text-dim: #555a6e;
|
||||
--text-muted: #8b8f9e;
|
||||
|
||||
--bg-success: #e8f5e9;
|
||||
--bg-error: #fdecea;
|
||||
--bg-warn: #fff3e0;
|
||||
--bg-info: #e3f2fd;
|
||||
|
||||
--shadow: 0 1px 4px rgba(0,0,0,0.08);
|
||||
--shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
|
||||
--shadow-modal: 0 16px 48px rgba(0,0,0,0.14);
|
||||
}
|
||||
|
||||
/* ===== 全局基础 ===== */
|
||||
/* === 自动跟随系统 === */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root:not([data-theme="dark"]) {
|
||||
--bg-root: #f5f6fa;
|
||||
--bg-nav: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
--bg-hover: #edf0f5;
|
||||
--bg-elevated: #ffffff;
|
||||
--border: #e2e5ee;
|
||||
--border-light: rgba(0,0,0,0.06);
|
||||
--honey: #e5a800;
|
||||
--honey-dim: #c48f00;
|
||||
--honey-glow: rgba(229,168,0,0.08);
|
||||
--green: #008c3a;
|
||||
--red: #d32f2f;
|
||||
--yellow: #e65100;
|
||||
--blue: #1565c0;
|
||||
--orange: #d84315;
|
||||
--text: #1a1d2e;
|
||||
--text-dim: #555a6e;
|
||||
--text-muted: #8b8f9e;
|
||||
--bg-success: #e8f5e9;
|
||||
--bg-error: #fdecea;
|
||||
--bg-warn: #fff3e0;
|
||||
--bg-info: #e3f2fd;
|
||||
--shadow: 0 1px 4px rgba(0,0,0,0.08);
|
||||
--shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
|
||||
--shadow-modal: 0 16px 48px rgba(0,0,0,0.14);
|
||||
}
|
||||
}
|
||||
|
||||
/* === 主题切换过渡 === */
|
||||
* {
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
/* === 全局 Reset === */
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
font-size: 13px;
|
||||
html, body {
|
||||
font-family: var(--font-sans);
|
||||
background: var(--bg-root);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 主题切换过渡 */
|
||||
* {
|
||||
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
|
||||
}
|
||||
/* Backward compat aliases */
|
||||
:root { --font: var(--font-sans); --header-h: 48px; --sidebar-w: 220px; }
|
||||
|
||||
Reference in New Issue
Block a user