Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(theme): update color classes

Browse Source
This commit is contained in:
CaIon
2026-06-19 14:53:44 +08:00
parent 490395b2f8
commit 0c806db996
12 changed files with 50 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/dashboard/components/models/consumption-distribution-chart.tsx
Vendored
+1 -9
View File
@@ -102,17 +102,9 @@ export function ConsumptionDistributionChart(
props.loading ? [] : props.data,
timeGranularity,
t,
customization.preset,
chartRadius
),
[
props.data,
props.loading,
timeGranularity,
t,
customization.preset,
chartRadius,
]
[props.data, props.loading, timeGranularity, t, chartRadius]
)
const spec = chartType === 'bar' ? chartData.spec_line : chartData.spec_area
const specType = typeof spec?.type === 'string' ? spec.type : chartType
web/default/src/features/dashboard/components/models/model-charts.tsx
Vendored
+1 -9
View File
@@ -100,17 +100,9 @@ export function ModelCharts(props: ModelChartsProps) {
props.loading ? [] : props.data,
timeGranularity,
t,
customization.preset,
chartRadius
),
[
props.data,
props.loading,
timeGranularity,
t,
customization.preset,
chartRadius,
]
[props.data, props.loading, timeGranularity, t, chartRadius]
)
const spec = chartData[CHART_SPEC_KEYS[activeTab]]
web/default/src/features/dashboard/components/overview/uptime-panel.tsx
Vendored
+4 -4
View File
@@ -30,10 +30,10 @@ import type {
import { PanelWrapper } from '../ui/panel-wrapper'
const STATUS_COLOR_MAP: Record<number, string> = {
1: 'bg-success',
0: 'bg-destructive',
2: 'bg-warning',
3: 'bg-info',
1: 'bg-emerald-500',
0: 'bg-red-500',
2: 'bg-amber-500',
3: 'bg-blue-500',
}
const DEFAULT_STATUS_COLOR = 'bg-muted-foreground/40'
web/default/src/features/dashboard/components/users/user-charts.tsx
Vendored
+3 -14
View File
@@ -23,7 +23,6 @@ import { Users, Loader2 } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { getRollingDateRange, type TimeGranularity } from '@/lib/time'
import { VCHART_OPTION } from '@/lib/vchart'
import { useThemeCustomization } from '@/context/theme-customization-provider'
import { useTheme } from '@/context/theme-provider'
import { Skeleton } from '@/components/ui/skeleton'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
@@ -66,7 +65,6 @@ const TOP_USER_LIMIT_OPTIONS = [5, 10, 20, 50]
export function UserCharts() {
const { t } = useTranslation()
const { resolvedTheme } = useTheme()
const { customization } = useThemeCustomization()
const [themeReady, setThemeReady] = useState(false)
const themeManagerRef = useRef<
(typeof import('@visactor/vchart'))['ThemeManager'] | null
@@ -138,18 +136,9 @@ export function UserCharts() {
isLoading ? [] : (userData ?? []),
timeGranularity,
t,
topUserLimit,
customization.preset
topUserLimit
),
[
userData,
isLoading,
timeGranularity,
t,
topUserLimit,
customization.preset,
customization.radius,
]
[userData, isLoading, timeGranularity, t, topUserLimit]
)
return (
@@ -240,7 +229,7 @@ export function UserCharts() {
themeReady &&
spec && (
<VChart
key={`user-${chart.value}-${topUserLimit}-${resolvedTheme}-${customization.preset}`}
key={`user-${chart.value}-${topUserLimit}-${resolvedTheme}`}
spec={{
...spec,
theme: resolvedTheme === 'dark' ? 'dark' : 'light',
web/default/src/features/dashboard/lib/api-info.ts
Vendored
+3 -3
View File
@@ -23,12 +23,12 @@ import type { PingStatus } from '@/features/dashboard/types'
*/
export function getLatencyColorClass(latency: number): string {
if (latency < 200) {
return 'text-success'
return 'text-green-600 dark:text-green-400'
}
if (latency < 500) {
return 'text-warning'
return 'text-yellow-600 dark:text-yellow-400'
}
return 'text-destructive'
return 'text-red-600 dark:text-red-400'
}
/**
web/default/src/features/dashboard/lib/charts.ts
Vendored
+7 -50
View File
@@ -38,37 +38,7 @@ type TooltipLineItem = {
shapeSize?: number
}
const THEME_CHART_COLOR_VARIABLES = [
'--chart-1',
'--chart-2',
'--chart-3',
'--chart-4',
'--chart-5',
] as const
function getThemeChartColors(themeKey?: string): string[] {
if (typeof document === 'undefined') return []
void themeKey
const bodyStyle = window.getComputedStyle(document.body)
const rootStyle = window.getComputedStyle(document.documentElement)
return THEME_CHART_COLOR_VARIABLES.map((name) => {
return (
bodyStyle.getPropertyValue(name) || rootStyle.getPropertyValue(name)
).trim()
}).filter(Boolean)
}
function getVChartDefaultColors(domainLength: number, themeKey?: string) {
const themeColors = getThemeChartColors(themeKey)
if (themeColors.length > 0) {
return Array.from(
{ length: Math.max(domainLength, themeColors.length) },
(_, index) => themeColors[index % themeColors.length]
)
}
function getVChartDefaultColors(domainLength: number) {
const scheme =
vchartDefaultDataScheme.find(
(item) => !item.maxDomainLength || domainLength <= item.maxDomainLength
@@ -98,7 +68,6 @@ export function processChartData(
data: QuotaDataItem[],
timeGranularity: TimeGranularity = 'day',
t?: TFunction,
themeKey?: string,
chartCornerRadius?: number
): ProcessedChartData {
const tt: TFunction = t ?? ((x) => x)
@@ -290,10 +259,7 @@ export function processChartData(
const sortedTimes = Array.from(timeModelMap.keys()).sort()
const sortedModels = [...allModels].sort()
const modelColorDomain = Array.from(new Set([...sortedModels, otherLabel]))
const modelColorRange = getVChartDefaultColors(
modelColorDomain.length,
themeKey
)
const modelColorRange = getVChartDefaultColors(modelColorDomain.length)
const otherColor = modelColorRange[modelColorDomain.indexOf(otherLabel)]
const otherTooltipColor =
typeof otherColor === 'string' ? otherColor : '#FF8A00'
@@ -719,7 +685,7 @@ export function processChartData(
}
}
const USER_COLOR_FALLBACKS = [
const USER_COLORS = [
'#5B8FF9',
'#5AD8A6',
'#F6BD16',
@@ -736,20 +702,11 @@ export function processUserChartData(
data: QuotaDataItem[],
timeGranularity: TimeGranularity = 'day',
t?: TFunction,
limit = 10,
themeKey?: string
limit = 10
): ProcessedUserChartData {
const tt: TFunction = t ?? ((x) => x)
const { config } = getCurrencyDisplay()
const quotaPerUnit = config.quotaPerUnit
const themeUserColors = getThemeChartColors(themeKey)
const userColorRange =
themeUserColors.length > 0
? Array.from(
{ length: Math.max(limit, themeUserColors.length) },
(_, index) => themeUserColors[index % themeUserColors.length]
)
: USER_COLOR_FALLBACKS
const formatVal = (raw: number) => renderQuotaCompat(raw, 2)
@@ -767,7 +724,7 @@ export function processUserChartData(
subtext: tt('No data available'),
},
legends: { visible: false },
color: { type: 'ordinal', range: userColorRange },
color: { type: 'ordinal', range: USER_COLORS },
background: { fill: 'transparent' },
},
spec_user_trend: {
@@ -782,7 +739,7 @@ export function processUserChartData(
subtext: tt('No data available'),
},
legends: { visible: true, selectMode: 'single' },
color: { type: 'ordinal', range: userColorRange },
color: { type: 'ordinal', range: USER_COLORS },
point: { visible: false },
background: { fill: 'transparent' },
},
@@ -812,7 +769,7 @@ export function processUserChartData(
const userColorMap = topUsers.reduce<Record<string, string>>(
(acc, user, i) => {
acc[user] = userColorRange[i % userColorRange.length]
acc[user] = USER_COLORS[i % USER_COLORS.length]
return acc
},
{}
web/default/src/features/performance-metrics/lib/format.ts
Vendored
+8 -8
View File
@@ -61,18 +61,18 @@ export function getSuccessRateLevel(rate: number): SuccessRateLevel {
}
const SUCCESS_RATE_TEXT_CLASS: Record<SuccessRateLevel, string> = {
excellent: 'text-success',
good: 'text-success/70',
warning: 'text-warning',
critical: 'text-destructive',
excellent: 'text-emerald-600 dark:text-emerald-400',
good: 'text-emerald-500 dark:text-emerald-300',
warning: 'text-amber-600 dark:text-amber-400',
critical: 'text-red-600 dark:text-red-400',
unknown: 'text-muted-foreground',
}
const SUCCESS_RATE_DOT_CLASS: Record<SuccessRateLevel, string> = {
excellent: 'bg-success',
good: 'bg-success/60',
warning: 'bg-warning',
critical: 'bg-destructive',
excellent: 'bg-emerald-500',
good: 'bg-emerald-400',
warning: 'bg-amber-500',
critical: 'bg-red-500',
unknown: 'bg-muted-foreground',
}
web/default/src/features/usage-logs/components/columns/column-helpers.tsx
Vendored
+3 -3
View File
@@ -137,11 +137,11 @@ export function createDurationColumn<T>(config: {
const durationBgMap: Record<string, string> = {
success:
'border border-emerald-200/40 bg-emerald-50/35 dark:border-emerald-900/40 dark:bg-emerald-950/15',
'border border-emerald-200/40 bg-emerald-50/35 !text-emerald-600 dark:border-emerald-900/40 dark:bg-emerald-950/15 dark:!text-emerald-400',
warning:
'border border-amber-200/45 bg-amber-50/35 dark:border-amber-900/40 dark:bg-amber-950/15',
'border border-amber-200/45 bg-amber-50/35 !text-amber-600 dark:border-amber-900/40 dark:bg-amber-950/15 dark:!text-amber-400',
danger:
'border border-rose-200/50 bg-rose-50/35 dark:border-rose-900/40 dark:bg-rose-950/15',
'border border-rose-200/50 bg-rose-50/35 !text-red-600 dark:border-rose-900/40 dark:bg-rose-950/15 dark:!text-red-400',
}
return (
web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
Vendored
+3 -3
View File
@@ -560,11 +560,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
const timingBgMap: Record<string, string> = {
success:
'border border-emerald-200/40 bg-emerald-50/35 dark:border-emerald-900/40 dark:bg-emerald-950/15',
'border border-emerald-200/40 bg-emerald-50/35 !text-emerald-600 dark:border-emerald-900/40 dark:bg-emerald-950/15 dark:!text-emerald-400',
warning:
'border border-amber-200/45 bg-amber-50/35 dark:border-amber-900/40 dark:bg-amber-950/15',
'border border-amber-200/45 bg-amber-50/35 !text-amber-600 dark:border-amber-900/40 dark:bg-amber-950/15 dark:!text-amber-400',
danger:
'border border-rose-200/50 bg-rose-50/35 dark:border-rose-900/40 dark:bg-rose-950/15',
'border border-rose-200/50 bg-rose-50/35 !text-red-600 dark:border-rose-900/40 dark:bg-rose-950/15 dark:!text-red-400',
neutral:
'border border-border/60 bg-muted/30 dark:border-border/40 dark:bg-muted/20',
}
web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
Vendored
+3 -2
View File
@@ -147,9 +147,10 @@ export function useDrawingLogsColumns(
<div className='flex max-w-[160px] flex-col gap-0.5'>
<StatusBadge
label={mjId}
autoColor={mjId}
copyText={mjId}
variant='neutral'
size='sm'
className='border-border/60 bg-muted/30 max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
className='border-border/60 bg-muted/30 !text-foreground max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
/>
</div>
)
web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
Vendored
+3 -2
View File
@@ -174,9 +174,10 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
<div className='flex max-w-[170px] flex-col gap-0.5'>
<StatusBadge
label={taskId}
autoColor={taskId}
copyText={taskId}
variant='neutral'
size='sm'
className='border-border/60 bg-muted/30 max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
className='border-border/60 bg-muted/30 !text-foreground max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
/>
<span className='text-muted-foreground/60 truncate text-[11px]'>
{t(log.platform)} · {t(taskActionMapper.getLabel(log.action))}
web/default/src/styles/theme.css
Vendored
+11 -11
View File
@@ -145,20 +145,20 @@ For commercial licensing, please contact support@quantumnous.com
}
.dark {
/* OpenAI-like dark mode: nearly black chrome, readable raised surfaces. */
--background: oklch(0.185 0 0);
/* OpenAI-like dark mode with a softer charcoal canvas. */
--background: oklch(0.225 0 0);
--foreground: oklch(0.965 0 0);
--card: oklch(0.235 0 0);
--card: oklch(0.275 0 0);
--card-foreground: oklch(0.965 0 0);
--popover: oklch(0.255 0 0);
--popover: oklch(0.295 0 0);
--popover-foreground: oklch(0.965 0 0);
--primary: oklch(0.965 0 0);
--primary-foreground: oklch(0.145 0 0);
--secondary: oklch(0.285 0 0);
--secondary: oklch(0.325 0 0);
--secondary-foreground: oklch(0.965 0 0);
--muted: oklch(0.255 0 0);
--muted: oklch(0.295 0 0);
--muted-foreground: oklch(0.76 0 0);
--accent: oklch(0.325 0 0);
--accent: oklch(0.365 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
@@ -178,14 +178,14 @@ For commercial licensing, please contact support@quantumnous.com
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.115 0 0);
--sidebar: oklch(0.195 0 0);
--sidebar-foreground: oklch(0.95 0 0);
--sidebar-primary: oklch(0.965 0 0);
--sidebar-primary-foreground: oklch(0.145 0 0);
--sidebar-accent: oklch(0.31 0 0);
--sidebar-accent: oklch(0.35 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.68 0 0);
--skeleton-base: oklch(0.285 0 0);
--skeleton-highlight: oklch(0.39 0 0);
--skeleton-base: oklch(0.325 0 0);
--skeleton-highlight: oklch(0.43 0 0);
}