@@ -115,8 +118,8 @@ function DetailedChart({ chart, className }: { chart: ResourceChartConfig; class
function Stat({ label, value }: { label: string; value: string }) {
return (
-
{label}
-
{value}
+
{label}
+
{value}
)
}
@@ -132,6 +135,9 @@ function LineAreaChart({
formatValue: (value: number) => string
unitLabel?: string
}) {
+ const { theme } = useTheme()
+ const isDark = theme === 'dark'
+
const width = 520
const height = 150
const left = 50
@@ -158,12 +164,20 @@ function LineAreaChart({
const yTicks = [1, 0.5, 0]
const xTicks = [0, 0.5, 1]
+ // Dark mode colors
+ const gridStroke = isDark ? '#374151' : '#e5e7eb'
+ const gridStrokeV = isDark ? '#1f2937' : '#edf0f2'
+ const axisStroke = isDark ? '#9ca3af' : '#888'
+ const lineStroke = isDark ? '#f9fafb' : '#444'
+ const gradientTop = isDark ? '#f9fafb' : '#555'
+ const gradientBottom = isDark ? '#374151' : '#555'
+
return (
)
}
diff --git a/frontend/src/components/RingStats.tsx b/frontend/src/components/RingStats.tsx
index 9792006..35bfc74 100644
--- a/frontend/src/components/RingStats.tsx
+++ b/frontend/src/components/RingStats.tsx
@@ -1,4 +1,5 @@
import type { ReactNode } from 'react'
+import { useTheme } from '../contexts/ThemeContext'
interface RingStatProps {
value: number
@@ -10,11 +11,17 @@ interface RingStatProps {
}
export function RingStat({ value, max = 100, label, subLabel, size = 120, strokeWidth = 8 }: RingStatProps) {
+ const { theme } = useTheme()
+ const isDark = theme === 'dark'
+
const radius = (size - strokeWidth) / 2
const circumference = radius * 2 * Math.PI
const percentage = Math.min(Math.max(value / max * 100, 0), 100)
const strokeDashoffset = circumference - (percentage / 100) * circumference
+ const bgStroke = isDark ? '#374151' : '#f3f4f6'
+ const progressStroke = isDark ? '#f9fafb' : '#000000'
+
return (
@@ -25,7 +32,7 @@ export function RingStat({ value, max = 100, label, subLabel, size = 120, stroke
cy={size / 2}
r={radius}
fill="none"
- stroke="#f3f4f6"
+ stroke={bgStroke}
strokeWidth={strokeWidth}
/>
{/* Progress ring */}
@@ -34,7 +41,7 @@ export function RingStat({ value, max = 100, label, subLabel, size = 120, stroke
cy={size / 2}
r={radius}
fill="none"
- stroke="#000000"
+ stroke={progressStroke}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeDasharray={circumference}
@@ -44,12 +51,12 @@ export function RingStat({ value, max = 100, label, subLabel, size = 120, stroke
{/* Center value */}
- {value.toFixed(percentage < 1 ? 2 : 1)}%
+ {value.toFixed(percentage < 1 ? 2 : 1)}%
-
{label}
- {subLabel &&
{subLabel}
}
+
{label}
+ {subLabel &&
{subLabel}
}
)
@@ -96,8 +103,8 @@ export default function RingStats({
const hasSwap = swapTotal > 0
return (
-
-
状态
+
+
状态
{
+ getVersion()
+ .then(res => {
+ if (res.data?.data?.version) {
+ setVersion(res.data.data.version)
+ }
+ })
+ .catch(() => {})
+ }, [])
const isContainerPage =
location.pathname.startsWith('/containers') ||
@@ -42,27 +59,27 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
return (