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

fix(web/default): api-info color dot shows wrong color due to semantic token mismatch (#4824)

Browse Source 
* fix: unify color system for api-info, add slate to SemanticColor

Signed-off-by: Micah-Zheng <102610064+Micah-Zheng@users.noreply.github.com>

* fix: use direct Tailwind color classes in colorToBgClass for accurate color display

Signed-off-by: Micah-Zheng <102610064+Micah-Zheng@users.noreply.github.com>

---------

Signed-off-by: Micah-Zheng <102610064+Micah-Zheng@users.noreply.github.com>
This commit is contained in:
Micah-Zheng 2026-05-19 16:15:02 +08:00 committed by GitHub
parent 8db32213e7
commit c78573ce03
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/default/src/features/system-settings/content/api-info-section.tsx vendored
View File

@ -23,6 +23,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
import { Plus, Edit, Trash2, Save } from 'lucide-react' import { Plus, Edit, Trash2, Save } from 'lucide-react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { toast } from 'sonner' import { toast } from 'sonner'
import { getBgColorClass } from '@/lib/colors'
import { import {
AlertDialog, AlertDialog,
AlertDialogAction, AlertDialogAction,
@ -98,20 +99,20 @@ const createApiInfoSchema = (t: (key: string) => string) =>
type ApiInfoFormValues = z.infer<ReturnType<typeof createApiInfoSchema>> type ApiInfoFormValues = z.infer<ReturnType<typeof createApiInfoSchema>>
const colorOptions = [ const colorOptions = [
{ value: 'blue', label: 'Blue', bgClass: 'bg-blue-500' }, { value: 'blue', label: 'Blue' },
{ value: 'green', label: 'Green', bgClass: 'bg-green-500' }, { value: 'green', label: 'Green' },
{ value: 'cyan', label: 'Cyan', bgClass: 'bg-cyan-500' }, { value: 'cyan', label: 'Cyan' },
{ value: 'purple', label: 'Purple', bgClass: 'bg-purple-500' }, { value: 'purple', label: 'Purple' },
{ value: 'pink', label: 'Pink', bgClass: 'bg-pink-500' }, { value: 'pink', label: 'Pink' },
{ value: 'red', label: 'Red', bgClass: 'bg-red-500' }, { value: 'red', label: 'Red' },
{ value: 'orange', label: 'Orange', bgClass: 'bg-orange-500' }, { value: 'orange', label: 'Orange' },
{ value: 'amber', label: 'Amber', bgClass: 'bg-amber-500' }, { value: 'amber', label: 'Amber' },
{ value: 'yellow', label: 'Yellow', bgClass: 'bg-yellow-500' }, { value: 'yellow', label: 'Yellow' },
{ value: 'lime', label: 'Lime', bgClass: 'bg-lime-500' }, { value: 'lime', label: 'Lime' },
{ value: 'teal', label: 'Teal', bgClass: 'bg-teal-500' }, { value: 'teal', label: 'Teal' },
{ value: 'indigo', label: 'Indigo', bgClass: 'bg-indigo-500' }, { value: 'indigo', label: 'Indigo' },
{ value: 'violet', label: 'Violet', bgClass: 'bg-violet-500' }, { value: 'violet', label: 'Violet' },
{ value: 'slate', label: 'Slate', bgClass: 'bg-slate-500' }, { value: 'slate', label: 'Slate' },
] ]
export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) { export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
@ -270,11 +271,7 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
) )
} }
const getColorClass = (color: string) => { const getColorClass = (color: string) => getBgColorClass(color)
return (
colorOptions.find((opt) => opt.value === color)?.bgClass || 'bg-blue-500'
)
}
return ( return (
<SettingsSection <SettingsSection
@ -488,7 +485,7 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
label: ( label: (
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
<div <div
className={`h-4 w-4 rounded-full ${option.bgClass}`} className={`h-4 w-4 rounded-full ${getBgColorClass(option.value)}`}
/> />
{option.label} {option.label}
</div> </div>
@ -509,7 +506,7 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
<SelectItem key={option.value} value={option.value}> <SelectItem key={option.value} value={option.value}>
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
<div <div
className={`h-4 w-4 rounded-full ${option.bgClass}`} className={`h-4 w-4 rounded-full ${getBgColorClass(option.value)}`}
/> />
{option.label} {option.label}
</div> </div>

35
web/default/src/lib/colors.ts vendored
View File

@ -33,24 +33,26 @@ export type SemanticColor =
| 'indigo' | 'indigo'
| 'violet' | 'violet'
| 'grey' | 'grey'
| 'slate'
export const colorToBgClass: Record<SemanticColor, string> = { export const colorToBgClass: Record<SemanticColor, string> = {
blue: 'bg-chart-1', blue: 'bg-blue-500',
green: 'bg-success', green: 'bg-green-500',
cyan: 'bg-chart-2', cyan: 'bg-cyan-500',
purple: 'bg-chart-4', purple: 'bg-purple-500',
pink: 'bg-chart-5', pink: 'bg-pink-500',
red: 'bg-destructive', red: 'bg-red-500',
orange: 'bg-warning', orange: 'bg-orange-500',
amber: 'bg-warning', amber: 'bg-amber-500',
yellow: 'bg-warning', yellow: 'bg-yellow-500',
lime: 'bg-chart-3', lime: 'bg-lime-500',
'light-green': 'bg-success', 'light-green': 'bg-green-400',
teal: 'bg-chart-2', teal: 'bg-teal-500',
'light-blue': 'bg-info', 'light-blue': 'bg-sky-400',
indigo: 'bg-chart-1', indigo: 'bg-indigo-500',
violet: 'bg-chart-4', violet: 'bg-violet-500',
grey: 'bg-neutral', grey: 'bg-gray-400',
slate: 'bg-slate-500',
} }
export const avatarColorMap: Record<SemanticColor, string> = { export const avatarColorMap: Record<SemanticColor, string> = {
@ -70,6 +72,7 @@ export const avatarColorMap: Record<SemanticColor, string> = {
indigo: 'bg-chart-1/10 text-chart-1', indigo: 'bg-chart-1/10 text-chart-1',
violet: 'bg-chart-4/10 text-chart-4', violet: 'bg-chart-4/10 text-chart-4',
grey: 'bg-muted text-muted-foreground', grey: 'bg-muted text-muted-foreground',
slate: 'bg-muted text-muted-foreground',
} }
export function getAvatarColorClass(name: string): string { export function getAvatarColorClass(name: string): string {