Losita/mai-bot
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(theme): migrate all CSS variable references and adapt third-party components

Browse Source 
- Task 10: Bulk migrate CSS variable references from --primary/--secondary/etc to --color-primary/--color-secondary/etc across all components
- Task 11: Adapt CodeEditor to auto-detect theme from ThemeProvider context, remove hardcoded theme='dark' from plugin-config and bot config pages
This commit is contained in:
DrSmoothl
2026-02-19 18:01:14 +08:00
parent b5088fa455
commit 06a88a877f
9 changed files with 86 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/src/routes/annual-report.tsx
View File

@@ -341,7 +341,7 @@ export function AnnualReportPage() {
contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
cursor={{ fill: 'transparent' }}
/>
<Bar dataKey="count" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
<Bar dataKey="count" fill="hsl(var(--color-primary))" radius={[4, 4, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</CardContent>

1
dashboard/src/routes/config/bot.tsx
View File

@@ -625,7 +625,6 @@ function BotConfigPageContent() {
}
}}
language="toml"
theme="dark"
height="calc(100vh - 280px)"
minHeight="500px"
placeholder="TOML 配置内容"

46
dashboard/src/routes/index.tsx
View File

@@ -403,15 +403,15 @@ function IndexPageContent() {
const chartConfig = {
requests: {
label: '请求数',
color: 'hsl(var(--chart-1))',
color: 'hsl(var(--color-chart-1))',
},
cost: {
label: '花费(¥)',
color: 'hsl(var(--chart-2))',
color: 'hsl(var(--color-chart-2))',
},
tokens: {
label: 'Tokens',
color: 'hsl(var(--chart-3))',
color: 'hsl(var(--color-chart-3))',
},
} satisfies ChartConfig
@@ -738,17 +738,17 @@ function IndexPageContent() {
<CardContent>
<ChartContainer config={chartConfig} className="h-[300px] sm:h-[400px] w-full aspect-auto">
<LineChart data={hourly_data}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
<XAxis
dataKey="timestamp"
tickFormatter={(value) => formatDateTime(value)}
angle={-45}
textAnchor="end"
height={60}
stroke="hsl(var(--muted-foreground))"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
stroke="hsl(var(--color-muted-foreground))"
tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
/>
<YAxis stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
<YAxis stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
<ChartTooltip
content={<ChartTooltipContent labelFormatter={(value) => formatDateTime(value as string)} />}
/>
@@ -772,17 +772,17 @@ function IndexPageContent() {
<CardContent>
<ChartContainer config={chartConfig} className="h-[250px] sm:h-[300px] w-full aspect-auto">
<BarChart data={hourly_data}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
<XAxis
dataKey="timestamp"
tickFormatter={(value) => formatDateTime(value)}
angle={-45}
textAnchor="end"
height={60}
stroke="hsl(var(--muted-foreground))"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
stroke="hsl(var(--color-muted-foreground))"
tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
/>
<YAxis stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
<YAxis stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
<ChartTooltip
content={<ChartTooltipContent labelFormatter={(value) => formatDateTime(value as string)} />}
/>
@@ -800,17 +800,17 @@ function IndexPageContent() {
<CardContent>
<ChartContainer config={chartConfig} className="h-[250px] sm:h-[300px] w-full aspect-auto">
<BarChart data={hourly_data}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
<XAxis
dataKey="timestamp"
tickFormatter={(value) => formatDateTime(value)}
angle={-45}
textAnchor="end"
height={60}
stroke="hsl(var(--muted-foreground))"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
stroke="hsl(var(--color-muted-foreground))"
tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
/>
<YAxis stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
<YAxis stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
<ChartTooltip
content={<ChartTooltipContent labelFormatter={(value) => formatDateTime(value as string)} />}
/>
@@ -889,7 +889,7 @@ function IndexPageContent() {
<div
className="w-3 h-3 rounded-full ml-2 flex-shrink-0"
style={{
backgroundColor: `hsl(var(--chart-${(index % 5) + 1}))`,
backgroundColor: `hsl(var(--color-chart-${(index % 5) + 1}))`,
}}
/>
</div>
@@ -992,28 +992,28 @@ function IndexPageContent() {
config={{
requests: {
label: '请求数',
color: 'hsl(var(--chart-1))',
color: 'hsl(var(--color-chart-1))',
},
cost: {
label: '花费(¥)',
color: 'hsl(var(--chart-2))',
color: 'hsl(var(--color-chart-2))',
},
}}
className="h-[400px] sm:h-[500px] w-full aspect-auto"
>
<BarChart data={daily_data}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
<XAxis
dataKey="timestamp"
tickFormatter={(value) => {
const date = new Date(value)
return `${date.getMonth() + 1}/${date.getDate()}`
}}
stroke="hsl(var(--muted-foreground))"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
stroke="hsl(var(--color-muted-foreground))"
tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
/>
<YAxis yAxisId="left" stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
<YAxis yAxisId="right" orientation="right" stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
<YAxis yAxisId="left" stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
<YAxis yAxisId="right" orientation="right" stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
<ChartTooltip
content={
<ChartTooltipContent

27
dashboard/src/routes/plugin-config.tsx
View File

@@ -602,20 +602,19 @@ function PluginConfigEditor({ plugin, onBack }: PluginConfigEditorProps) {
</AlertDescription>
</Alert>
<CodeEditor
value={sourceCode}
onChange={(value) => {
setSourceCode(value)
if (hasTomlError) {
setHasTomlError(false)
}
}}
language="toml"
theme="dark"
height="calc(100vh - 350px)"
minHeight="500px"
placeholder="TOML 配置内容"
/>
<CodeEditor
value={sourceCode}
onChange={(value) => {
setSourceCode(value)
if (hasTomlError) {
setHasTomlError(false)
}
}}
language="toml"
height="calc(100vh - 350px)"
minHeight="500px"
placeholder="TOML 配置内容"
/>
</div>
)}

10
dashboard/src/routes/settings.tsx
View File

@@ -178,14 +178,14 @@ function applyAccentColor(color: string) {
const selectedColor = colors[color as keyof typeof colors]
if (selectedColor) {
// 设置主色
root.style.setProperty('--primary', selectedColor.hsl)
root.style.setProperty('--color-primary', selectedColor.hsl)
// 设置渐变（如果有）
if (selectedColor.gradient) {
root.style.setProperty('--primary-gradient', selectedColor.gradient)
root.style.setProperty('--color-primary-gradient', selectedColor.gradient)
root.classList.add('has-gradient')
} else {
root.style.removeProperty('--primary-gradient')
root.style.removeProperty('--color-primary-gradient')
root.classList.remove('has-gradient')
}
} else if (color.startsWith('#')) {
@@ -219,8 +219,8 @@ function applyAccentColor(color: string) {
return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
}
root.style.setProperty('--primary', hexToHsl(color))
root.style.removeProperty('--primary-gradient')
root.style.setProperty('--color-primary', hexToHsl(color))
root.style.removeProperty('--color-primary-gradient')
root.classList.remove('has-gradient')
}
}