mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-18 18:50:49 +08:00
feat: add Codex icons and update references in components
This commit is contained in:
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
|
||||
import iconOpenaiLight from '@/assets/icons/openai-light.svg';
|
||||
import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
|
||||
import iconCodexLight from '@/assets/icons/codex_light.svg';
|
||||
import iconCodexDark from '@/assets/icons/codex_drak.svg';
|
||||
import type { ProviderKeyConfig } from '@/types';
|
||||
import { maskApiKey } from '@/utils/format';
|
||||
import {
|
||||
@@ -73,7 +73,7 @@ export function CodexSection({
|
||||
title={
|
||||
<span className={styles.cardTitle}>
|
||||
<img
|
||||
src={resolvedTheme === 'dark' ? iconOpenaiDark : iconOpenaiLight}
|
||||
src={resolvedTheme === 'dark' ? iconCodexDark : iconCodexLight}
|
||||
alt=""
|
||||
className={styles.cardTitleIcon}
|
||||
/>
|
||||
|
||||
@@ -4,6 +4,8 @@ import { useThemeStore } from '@/stores';
|
||||
import iconGemini from '@/assets/icons/gemini.svg';
|
||||
import iconOpenaiLight from '@/assets/icons/openai-light.svg';
|
||||
import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
|
||||
import iconCodexLight from '@/assets/icons/codex_light.svg';
|
||||
import iconCodexDark from '@/assets/icons/codex_drak.svg';
|
||||
import iconClaude from '@/assets/icons/claude.svg';
|
||||
import iconVertex from '@/assets/icons/vertex.svg';
|
||||
import iconAmp from '@/assets/icons/amp.svg';
|
||||
@@ -19,7 +21,7 @@ interface ProviderNavItem {
|
||||
|
||||
const PROVIDERS: ProviderNavItem[] = [
|
||||
{ id: 'gemini', label: 'Gemini', getIcon: () => iconGemini },
|
||||
{ id: 'codex', label: 'Codex', getIcon: (theme) => (theme === 'dark' ? iconOpenaiDark : iconOpenaiLight) },
|
||||
{ id: 'codex', label: 'Codex', getIcon: (theme) => (theme === 'dark' ? iconCodexDark : iconCodexLight) },
|
||||
{ id: 'claude', label: 'Claude', getIcon: () => iconClaude },
|
||||
{ id: 'vertex', label: 'Vertex', getIcon: () => iconVertex },
|
||||
{ id: 'ampcode', label: 'Ampcode', getIcon: () => iconAmp },
|
||||
@@ -46,6 +48,7 @@ export function ProviderNav() {
|
||||
const triggerPoint = containerRect.top + containerRect.height * 0.3;
|
||||
|
||||
let currentActive: ProviderId | null = null;
|
||||
let closestAbove: { id: ProviderId; top: number } | null = null;
|
||||
|
||||
for (const provider of PROVIDERS) {
|
||||
const element = document.getElementById(`provider-${provider.id}`);
|
||||
@@ -54,13 +57,27 @@ export function ProviderNav() {
|
||||
const elementTop = rect.top;
|
||||
const elementBottom = rect.bottom;
|
||||
|
||||
// Check if triggerPoint is within this element's bounds
|
||||
if (triggerPoint >= elementTop && triggerPoint < elementBottom) {
|
||||
currentActive = provider.id;
|
||||
break;
|
||||
}
|
||||
|
||||
// Track the element whose top is closest to (but not exceeding) triggerPoint
|
||||
// This handles short cards where triggerPoint may have passed the bottom
|
||||
if (elementTop <= triggerPoint) {
|
||||
if (!closestAbove || elementTop > closestAbove.top) {
|
||||
closestAbove = { id: provider.id, top: elementTop };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If no element contains triggerPoint, use the closest one above it
|
||||
if (!currentActive && closestAbove) {
|
||||
currentActive = closestAbove.id;
|
||||
}
|
||||
|
||||
setActiveProvider(currentActive);
|
||||
}, [getScrollContainer]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user