Skip to content

Commit be32999

Browse files
woodchen-inkwoodchen-ink
committed
style(ui): 更新缓存管理页面和路径配置的UI样式和颜色主题
将蓝色主题替换为棕色主题，优化颜色搭配和视觉层次。调整加载指示器、卡片、徽章和按钮的样式，使用内联样式替代部分Tailwind类名，提升自定义灵活性。同时优化路径统计卡片的布局和交互，添加展开/收起功能。
1 parent 335f88a commit be32999

File tree

8 files changed

+658
-452
lines changed

8 files changed

+658
-452
lines changed

‎web/app/dashboard/cache/page.tsx‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ export default function CachePage() {
336336
return (
337337
<div className="flex h-[calc(100vh-4rem)] items-center justify-center">
338338
<div className="text-center">
339-
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-4 text-blue-500" />
339+
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-4" style={{ color: '#C08259' }} />
340340
<div className="text-lg font-medium">加载中...</div>
341341
<div className="text-sm text-gray-500 mt-1">正在获取缓存统计信息</div>
342342
</div>
@@ -349,7 +349,7 @@ export default function CachePage() {
349349
<div className="space-y-6">
350350
<div className="flex justify-between items-center">
351351
<div className="flex items-center gap-2">
352-
<Database className="h-6 w-6 text-blue-600" />
352+
<Database className="h-6 w-6" style={{ color: '#C08259' }} />
353353
<h1 className="text-2xl font-bold">缓存管理</h1>
354354
</div>
355355
<Button
@@ -363,9 +363,9 @@ export default function CachePage() {
363363
</div>
364364

365365
{/* 智能缓存汇总 */}
366-
<Card className="border-2 border-blue-100 bg-gradient-to-r from-blue-50 to-purple-50">
366+
<Card style={{ border: '2px solid #EEEDEC', backgroundColor: '#F8F7F6' }}>
367367
<CardHeader className="pb-3">
368-
<CardTitle className="flex items-center gap-2 text-blue-800">
368+
<CardTitle className="flex items-center gap-2" style={{ color: '#C08259' }}>
369369
<Zap className="h-5 w-5" />
370370
智能缓存汇总
371371
</CardTitle>
@@ -374,15 +374,15 @@ export default function CachePage() {
374374
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
375375
<Tooltip>
376376
<TooltipTrigger asChild>
377-
<div className="text-center p-4 bg-white rounded-lg shadow-sm border cursor-help hover:shadow-md transition-shadow">
377+
<div className="text-center p-4 rounded-lg shadow-sm border cursor-help hover:shadow-md transition-shadow" style={{ backgroundColor: 'white' }}>
378378
<div className="flex items-center justify-center gap-2 mb-2">
379-
<FileText className="h-5 w-5 text-blue-600" />
380-
<Info className="h-3 w-3 text-gray-400" />
379+
<FileText className="h-5 w-5" style={{ color: '#C08259' }} />
380+
<Info className="h-3 w-3" style={{ color: '#999' }} />
381381
</div>
382-
<div className="text-2xl font-bold text-blue-600">
382+
<div className="text-2xl font-bold" style={{ color: '#C08259' }}>
383383
{(stats?.proxy.regular_cache_hit ?? 0) + (stats?.mirror.regular_cache_hit ?? 0)}
384384
</div>
385-
<div className="text-sm text-gray-600 font-medium">常规缓存命中</div>
385+
<div className="text-sm font-medium" style={{ color: '#666' }}>常规缓存命中</div>
386386
</div>
387387
</TooltipTrigger>
388388
<TooltipContent>
@@ -392,15 +392,15 @@ export default function CachePage() {
392392

393393
<Tooltip>
394394
<TooltipTrigger asChild>
395-
<div className="text-center p-4 bg-white rounded-lg shadow-sm border cursor-help hover:shadow-md transition-shadow">
395+
<div className="text-center p-4 rounded-lg shadow-sm border cursor-help hover:shadow-md transition-shadow" style={{ backgroundColor: 'white' }}>
396396
<div className="flex items-center justify-center gap-2 mb-2">
397-
<ImageIcon className="h-5 w-5 text-green-600" aria-hidden="true" />
398-
<Info className="h-3 w-3 text-gray-400" />
397+
<ImageIcon className="h-5 w-5" style={{ color: '#518751' }} aria-hidden="true" />
398+
<Info className="h-3 w-3" style={{ color: '#999' }} />
399399
</div>
400-
<div className="text-2xl font-bold text-green-600">
400+
<div className="text-2xl font-bold" style={{ color: '#518751' }}>
401401
{(stats?.proxy.image_cache_hit ?? 0) + (stats?.mirror.image_cache_hit ?? 0)}
402402
</div>
403-
<div className="text-sm text-gray-600 font-medium">图片精确命中</div>
403+
<div className="text-sm font-medium" style={{ color: '#666' }}>图片精确命中</div>
404404
</div>
405405
</TooltipTrigger>
406406
<TooltipContent>
@@ -410,15 +410,15 @@ export default function CachePage() {
410410

411411
<Tooltip>
412412
<TooltipTrigger asChild>
413-
<div className="text-center p-4 bg-white rounded-lg shadow-sm border cursor-help hover:shadow-md transition-shadow">
413+
<div className="text-center p-4 rounded-lg shadow-sm border cursor-help hover:shadow-md transition-shadow" style={{ backgroundColor: 'white' }}>
414414
<div className="flex items-center justify-center gap-2 mb-2">
415-
<RotateCcw className="h-5 w-5 text-orange-600" />
416-
<Info className="h-3 w-3 text-gray-400" />
415+
<RotateCcw className="h-5 w-5" style={{ color: '#b85e48' }} />
416+
<Info className="h-3 w-3" style={{ color: '#999' }} />
417417
</div>
418-
<div className="text-2xl font-bold text-orange-600">
418+
<div className="text-2xl font-bold" style={{ color: '#b85e48' }}>
419419
{(stats?.proxy.format_fallback_hit ?? 0) + (stats?.mirror.format_fallback_hit ?? 0)}
420420
</div>
421-
<div className="text-sm text-gray-600 font-medium">格式回退命中</div>
421+
<div className="text-sm font-medium" style={{ color: '#666' }}>格式回退命中</div>
422422
</div>
423423
</TooltipTrigger>
424424
<TooltipContent>
@@ -428,19 +428,19 @@ export default function CachePage() {
428428

429429
<Tooltip>
430430
<TooltipTrigger asChild>
431-
<div className="text-center p-4 bg-white rounded-lg shadow-sm border cursor-help hover:shadow-md transition-shadow">
431+
<div className="text-center p-4 rounded-lg shadow-sm border cursor-help hover:shadow-md transition-shadow" style={{ backgroundColor: 'white' }}>
432432
<div className="flex items-center justify-center gap-2 mb-2">
433-
<Target className="h-5 w-5 text-purple-600" />
434-
<Info className="h-3 w-3 text-gray-400" />
433+
<Target className="h-5 w-5" style={{ color: '#C08259' }} />
434+
<Info className="h-3 w-3" style={{ color: '#999' }} />
435435
</div>
436-
<div className="text-2xl font-bold text-purple-600">
436+
<div className="text-2xl font-bold" style={{ color: '#C08259' }}>
437437
{(() => {
438438
const totalImageRequests = (stats?.proxy.image_cache_hit ?? 0) + (stats?.mirror.image_cache_hit ?? 0) + (stats?.proxy.format_fallback_hit ?? 0) + (stats?.mirror.format_fallback_hit ?? 0)
439439
const fallbackHits = (stats?.proxy.format_fallback_hit ?? 0) + (stats?.mirror.format_fallback_hit ?? 0)
440440
return totalImageRequests > 0 ? ((fallbackHits / totalImageRequests) * 100).toFixed(1) : '0.0'
441441
})()}%
442442
</div>
443-
<div className="text-sm text-gray-600 font-medium">格式回退率</div>
443+
<div className="text-sm font-medium" style={{ color: '#666' }}>格式回退率</div>
444444
</div>
445445
</TooltipTrigger>
446446
<TooltipContent>
@@ -453,10 +453,10 @@ export default function CachePage() {
453453

454454
<div className="grid gap-6 md:grid-cols-2">
455455
{/* 代理缓存 */}
456-
<Card className="border-l-4 border-l-blue-500">
456+
<Card style={{ borderLeft: '4px solid #C08259' }}>
457457
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
458458
<CardTitle className="flex items-center gap-2">
459-
<HardDrive className="h-5 w-5 text-blue-600" />
459+
<HardDrive className="h-5 w-5" style={{ color: '#C08259' }} />
460460
代理缓存
461461
</CardTitle>
462462
<div className="flex items-center space-x-2">
@@ -505,19 +505,19 @@ export default function CachePage() {
505505
</dt>
506506
<dd className="text-sm font-semibold text-red-800">{stats?.proxy.miss_count ?? 0}</dd>
507507
</div>
508-
<div className="flex justify-between items-center p-2 bg-blue-50 rounded">
509-
<dt className="text-sm font-medium text-blue-700 flex items-center gap-2">
508+
<div className="flex justify-between items-center p-2 bg-[#F4E8E0] rounded">
509+
<dt className="text-sm font-medium text-[#666] flex items-center gap-2">
510510
<Activity className="h-4 w-4" />
511511
命中率
512512
</dt>
513-
<dd className="text-sm font-semibold text-blue-800">{(stats?.proxy.hit_rate ?? 0).toFixed(2)}%</dd>
513+
<dd className="text-sm font-semibold text-[#C08259]">{(stats?.proxy.hit_rate ?? 0).toFixed(2)}%</dd>
514514
</div>
515-
<div className="flex justify-between items-center p-2 bg-purple-50 rounded">
516-
<dt className="text-sm font-medium text-purple-700 flex items-center gap-2">
515+
<div className="flex justify-between items-center p-2 bg-[#F4E8E0] rounded">
516+
<dt className="text-sm font-medium text-[#666] flex items-center gap-2">
517517
<Zap className="h-4 w-4" />
518518
节省带宽
519519
</dt>
520-
<dd className="text-sm font-semibold text-purple-800">{formatBytes(stats?.proxy.bytes_saved ?? 0)}</dd>
520+
<dd className="text-sm font-semibold text-[#C08259]">{formatBytes(stats?.proxy.bytes_saved ?? 0)}</dd>
521521
</div>
522522
</dl>
523523

@@ -529,10 +529,10 @@ export default function CachePage() {
529529
<div className="grid grid-cols-3 gap-3">
530530
<Tooltip>
531531
<TooltipTrigger asChild>
532-
<div className="text-center p-3 bg-blue-50 rounded-lg border cursor-help hover:bg-blue-100 transition-colors">
533-
<FileText className="h-4 w-4 mx-auto mb-1 text-blue-600" />
534-
<div className="text-lg font-bold text-blue-600">{stats?.proxy.regular_cache_hit ?? 0}</div>
535-
<div className="text-xs text-blue-700">常规命中</div>
532+
<div className="text-center p-3 bg-[#F4E8E0] rounded-lg border cursor-help hover:bg-blue-100 transition-colors">
533+
<FileText className="h-4 w-4 mx-auto mb-1 text-[#C08259]" />
534+
<div className="text-lg font-bold text-[#C08259]">{stats?.proxy.regular_cache_hit ?? 0}</div>
535+
<div className="text-xs text-[#666]">常规命中</div>
536536
</div>
537537
</TooltipTrigger>
538538
<TooltipContent>
@@ -572,7 +572,7 @@ export default function CachePage() {
572572
</Card>
573573

574574
{/* 镜像缓存 */}
575-
<Card className="border-l-4 border-l-green-500">
575+
<Card style={{ borderLeft: '4px solid #518751' }}>
576576
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
577577
<CardTitle className="flex items-center gap-2">
578578
<Database className="h-5 w-5 text-green-600" />
@@ -624,19 +624,19 @@ export default function CachePage() {
624624
</dt>
625625
<dd className="text-sm font-semibold text-red-800">{stats?.mirror.miss_count ?? 0}</dd>
626626
</div>
627-
<div className="flex justify-between items-center p-2 bg-blue-50 rounded">
628-
<dt className="text-sm font-medium text-blue-700 flex items-center gap-2">
627+
<div className="flex justify-between items-center p-2 bg-[#F4E8E0] rounded">
628+
<dt className="text-sm font-medium text-[#666] flex items-center gap-2">
629629
<Activity className="h-4 w-4" />
630630
命中率
631631
</dt>
632-
<dd className="text-sm font-semibold text-blue-800">{(stats?.mirror.hit_rate ?? 0).toFixed(2)}%</dd>
632+
<dd className="text-sm font-semibold text-[#C08259]">{(stats?.mirror.hit_rate ?? 0).toFixed(2)}%</dd>
633633
</div>
634-
<div className="flex justify-between items-center p-2 bg-purple-50 rounded">
635-
<dt className="text-sm font-medium text-purple-700 flex items-center gap-2">
634+
<div className="flex justify-between items-center p-2 bg-[#F4E8E0] rounded">
635+
<dt className="text-sm font-medium text-[#666] flex items-center gap-2">
636636
<Zap className="h-4 w-4" />
637637
节省带宽
638638
</dt>
639-
<dd className="text-sm font-semibold text-purple-800">{formatBytes(stats?.mirror.bytes_saved ?? 0)}</dd>
639+
<dd className="text-sm font-semibold text-[#C08259]">{formatBytes(stats?.mirror.bytes_saved ?? 0)}</dd>
640640
</div>
641641
</dl>
642642

@@ -648,10 +648,10 @@ export default function CachePage() {
648648
<div className="grid grid-cols-3 gap-3">
649649
<Tooltip>
650650
<TooltipTrigger asChild>
651-
<div className="text-center p-3 bg-blue-50 rounded-lg border cursor-help hover:bg-blue-100 transition-colors">
652-
<FileText className="h-4 w-4 mx-auto mb-1 text-blue-600" />
653-
<div className="text-lg font-bold text-blue-600">{stats?.mirror.regular_cache_hit ?? 0}</div>
654-
<div className="text-xs text-blue-700">常规命中</div>
651+
<div className="text-center p-3 bg-[#F4E8E0] rounded-lg border cursor-help hover:bg-blue-100 transition-colors">
652+
<FileText className="h-4 w-4 mx-auto mb-1 text-[#C08259]" />
653+
<div className="text-lg font-bold text-[#C08259]">{stats?.mirror.regular_cache_hit ?? 0}</div>
654+
<div className="text-xs text-[#666]">常规命中</div>
655655
</div>
656656
</TooltipTrigger>
657657
<TooltipContent>

0 commit comments

Comments
 (0)