wooo/awoooi
1
1
Fork 0
Code Issues 2 Pull Requests 1 Actions 4 Packages Projects Releases Wiki Activity

fix(web): C4 監控工具 emoji → Lucide icon (feedback_no_emoji_use_icons.md)
Some checks failed
CD Pipeline / build-and-deploy (push) Has been cancelled
Details

Browse Source 
TOOL_EMOJI Record<string> 改為 TOOL_ICON Record<React.ReactNode>
使用 BarChart3/Flame/Telescope/FlaskConical/Activity/GitBranch

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
OG T
2026-04-09 11:28:53 +08:00
parent 12b084e2e0
commit 580053394b
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web/src/app/[locale]/page.tsx
View File

@@ -27,6 +27,7 @@ import { AppLayout } from '@/components/layout'
import { PageTabs, type TabConfig } from '@/components/layout/page-tabs' import { PageTabs, type TabConfig } from '@/components/layout/page-tabs'
import { LobsterLoading } from '@/components/shared/lobster-loading' import { LobsterLoading } from '@/components/shared/lobster-loading'
import { ServiceTopology } from '@/components/topology' import { ServiceTopology } from '@/components/topology'
import { BarChart3, Flame, Telescope, FlaskConical, Activity, GitBranch } from 'lucide-react'
const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? '' const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''
@@ -288,14 +289,14 @@ const TOOL_ACCENT_COLOR: Record<string, string> = {
Gitea: '#22C55E', Gitea: '#22C55E',
} }
// 圖示 emoji // 圖示 Lucide icon (feedback_no_emoji_use_icons.md)
const TOOL_EMOJI: Record<string, string> = { const TOOL_ICON: Record<string, React.ReactNode> = {
Grafana: '📊', Grafana: <BarChart3 size={16} />,
Prometheus: '🔥', Prometheus: <Flame size={16} />,
Sentry: '🔭', Sentry: <Telescope size={16} />,
Langfuse: '🧪', Langfuse: <FlaskConical size={16} />,
SigNoz: '🔭', SigNoz: <Activity size={16} />,
Gitea: '🐙', Gitea: <GitBranch size={16} />,
} }
function MonitoringTools() { function MonitoringTools() {
@@ -331,7 +332,7 @@ function MonitoringTools() {
const statusColor = isUp ? (hasFiring ? '#F59E0B' : '#22C55E') : '#cc2200' const statusColor = isUp ? (hasFiring ? '#F59E0B' : '#22C55E') : '#cc2200'
const statusText = isUp ? (hasFiring ? `${tool.firing_count} ${tDash('monitoringStatus.firing')}` : tDash('monitoringStatus.up')) : tDash('monitoringStatus.down') const statusText = isUp ? (hasFiring ? `${tool.firing_count} ${tDash('monitoringStatus.firing')}` : tDash('monitoringStatus.up')) : tDash('monitoringStatus.down')
const accentColor = TOOL_ACCENT_COLOR[tool.name] ?? '#b0ad9f' const accentColor = TOOL_ACCENT_COLOR[tool.name] ?? '#b0ad9f'
const emoji = TOOL_EMOJI[tool.name] ?? '🔧' const icon = TOOL_ICON[tool.name] ?? <Activity size={16} />
const link = tool.url ?? '#' const link = tool.url ?? '#'
const timeStr = (() => { const timeStr = (() => {
try { return new Date(tool.checked_at).toLocaleTimeString('zh-TW', { timeZone: 'Asia/Taipei', hour: '2-digit', minute: '2-digit' }) } try { return new Date(tool.checked_at).toLocaleTimeString('zh-TW', { timeZone: 'Asia/Taipei', hour: '2-digit', minute: '2-digit' }) }
@@ -369,7 +370,7 @@ function MonitoringTools() {
{/* 主行 */} {/* 主行 */}
<div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingLeft: 8 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingLeft: 8 }}>
<span style={{ fontSize: 18 }}>{emoji}</span> <span style={{ display: 'inline-flex', color: accentColor }}>{icon}</span>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div style={{ fontSize: 12, fontWeight: 600, color: '#141413', marginBottom: 2 }}> <div style={{ fontSize: 12, fontWeight: 600, color: '#141413', marginBottom: 2 }}>
{tool.name} {tool.name}