fix(ui): improve providers badge readability and albb preset

This commit is contained in:
Tam Nhu Tran
2026-03-04 00:39:02 +07:00
parent 8811e5320f
commit 3b38f1ac90
4 changed files with 45 additions and 13 deletions
+1 -1
View File
@@ -77,7 +77,7 @@ const RAW_PROVIDER_PRESET_DEFINITIONS: readonly ProviderPresetDefinition[] = [
name: 'Alibaba Coding Plan',
description: 'Alibaba Cloud Coding Plan via Anthropic-compatible endpoint',
baseUrl: 'https://coding-intl.dashscope.aliyuncs.com/apps/anthropic',
defaultProfileName: 'alibaba-plan',
defaultProfileName: 'albb',
defaultModel: 'qwen3-coder-plus',
apiKeyPlaceholder: 'sk-sp-...',
apiKeyHint: 'Get your Coding Plan key from Alibaba Cloud Model Studio',
+1 -1
View File
@@ -6,7 +6,7 @@ describe('provider-presets', () => {
const preset = getPresetById('alibaba-coding-plan');
expect(preset?.id).toBe('alibaba-coding-plan');
expect(preset?.baseUrl).toBe('https://coding-intl.dashscope.aliyuncs.com/apps/anthropic');
expect(preset?.defaultProfileName).toBe('alibaba-plan');
expect(preset?.defaultProfileName).toBe('albb');
});
it('resolves alibaba alias to Alibaba Coding Plan preset', () => {
+40 -8
View File
@@ -36,10 +36,12 @@ import { useCliproxyUpdateCheck } from '@/hooks/use-cliproxy';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils';
interface SidebarBadge {
text: string;
icon: string;
icon?: string;
icons?: string[];
text?: string;
}
interface SidebarChildItem {
@@ -79,7 +81,13 @@ function buildNavGroups(t: (key: string) => string): SidebarGroupDef[] {
path: '/providers',
icon: Key,
label: t('nav.apiProfiles'),
badge: { text: 'Featured', icon: '/icons/openrouter.svg' },
badge: {
icons: [
'/icons/openrouter.svg',
'/assets/providers/alibabacloud-color.svg',
'/icons/ollama.svg',
],
},
},
{
path: '/cliproxy',
@@ -229,14 +237,38 @@ export function AppSidebar() {
<Tooltip>
<TooltipTrigger asChild>
<span
className={`group-data-[collapsible=icon]:hidden ml-auto flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded transition-colors ${
className={cn(
'group-data-[collapsible=icon]:hidden ml-auto flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded transition-colors',
isRouteActive(item.path)
? 'bg-sidebar-accent-foreground/20 text-sidebar-accent-foreground border border-sidebar-accent-foreground/30'
? 'bg-white/92 border border-white/65 shadow-sm'
: 'bg-accent/15 text-accent border border-accent/30 group-hover/menu-item:bg-sidebar-accent-foreground/20 group-hover/menu-item:text-sidebar-accent-foreground group-hover/menu-item:border-sidebar-accent-foreground/30'
}`}
)}
>
<img src={item.badge.icon} alt="" className="w-3 h-3" />
<span className="hidden sm:inline">{item.badge.text}</span>
{(item.badge.icons && item.badge.icons.length > 0
? item.badge.icons
: item.badge.icon
? [item.badge.icon]
: []
).map((iconPath) => (
<span
key={iconPath}
className={cn(
'inline-flex h-4 w-4 items-center justify-center rounded-[3px] border',
isRouteActive(item.path)
? 'bg-white border-black/10'
: 'bg-background/80 border-border/40 group-hover/menu-item:bg-white/90'
)}
>
<img
src={iconPath}
alt=""
className="h-3 w-3 object-contain"
/>
</span>
))}
{item.badge.text && (
<span className="hidden sm:inline">{item.badge.text}</span>
)}
</span>
</TooltipTrigger>
<TooltipContent side="right">
+3 -3
View File
@@ -32,7 +32,7 @@ const resources = {
system: 'System',
health: 'Health',
settings: 'Settings',
openrouterTooltip: 'Featured: OpenRouter + Alibaba Coding Plan',
openrouterTooltip: 'Featured: OpenRouter + Alibaba Coding Plan + Ollama',
},
home: {
profiles: 'Profiles',
@@ -1179,7 +1179,7 @@ const resources = {
system: '系统',
health: '健康',
settings: '设置',
openrouterTooltip: '精选:OpenRouter + Alibaba Coding Plan',
openrouterTooltip: '精选:OpenRouter + Alibaba Coding Plan + Ollama',
},
home: {
profiles: '配置',
@@ -2283,7 +2283,7 @@ const resources = {
system: 'Hệ thống',
health: 'Sức khỏe',
settings: 'Cài đặt',
openrouterTooltip: 'Nổi bật: OpenRouter + Alibaba Coding Plan',
openrouterTooltip: 'Nổi bật: OpenRouter + Alibaba Coding Plan + Ollama',
},
home: {
profiles: 'Hồ sơ',