feat: add Codex icons and update references in components

This commit is contained in:
Supra4E8C
2026-01-31 17:06:27 +08:00
parent 1053e91fe4
commit 460519ed00
6 changed files with 75 additions and 8 deletions

View File

@@ -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}
/>

View File

@@ -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]);