feat(ui): unify link/address styles and set primary header color

- Links use primary color; removed leading icon
- Show API address when website is missing; use secondary text color, non-monospace
- Parse base_url from Codex TOML; change fallback copy to "未配置官网地址"
- Use primary color for the top-left header title
- Clean up unused imports

Affected files:
- src/components/ProviderList.tsx
- src/App.tsx
This commit is contained in:
Jason
2025-09-06 23:57:10 +08:00
parent 7346fcde2c
commit 48bd37a74b
2 changed files with 16 additions and 18 deletions

View File

@@ -218,7 +218,7 @@ function App() {
{/* Linear 风格的顶部导航 */} {/* Linear 风格的顶部导航 */}
<header className="bg-white border-b border-[var(--color-border)] px-6 py-4"> <header className="bg-white border-b border-[var(--color-border)] px-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h1 className="text-xl font-semibold text-[var(--color-text-primary)]"> <h1 className="text-xl font-semibold text-[var(--color-primary)]">
CC Switch CC Switch
</h1> </h1>

View File

@@ -1,13 +1,6 @@
import React from "react"; import React from "react";
import { Provider } from "../types"; import { Provider } from "../types";
import { import { Play, Edit3, Trash2, CheckCircle2, Users } from "lucide-react";
Play,
Edit3,
Trash2,
ExternalLink,
CheckCircle2,
Users,
} from "lucide-react";
interface ProviderListProps { interface ProviderListProps {
providers: Record<string, Provider>; providers: Record<string, Provider>;
@@ -24,14 +17,20 @@ const ProviderList: React.FC<ProviderListProps> = ({
onDelete, onDelete,
onEdit, onEdit,
}) => { }) => {
// 提取API地址 // 提取API地址兼容不同供应商配置Claude env / Codex TOML
const getApiUrl = (provider: Provider): string => { const getApiUrl = (provider: Provider): string => {
try { try {
const config = provider.settingsConfig; const cfg = provider.settingsConfig;
if (config?.env?.ANTHROPIC_BASE_URL) { // Claude/Anthropic: 从 env 中读取
return config.env.ANTHROPIC_BASE_URL; if (cfg?.env?.ANTHROPIC_BASE_URL) {
return cfg.env.ANTHROPIC_BASE_URL;
} }
return "未设置"; // Codex: 从 TOML 配置中解析 base_url
if (typeof cfg?.config === "string" && cfg.config.includes("base_url")) {
const match = cfg.config.match(/base_url\s*=\s*"([^"]+)"/);
if (match && match[1]) return match[1];
}
return "未配置官网地址";
} catch { } catch {
return "配置错误"; return "配置错误";
} }
@@ -88,21 +87,20 @@ const ProviderList: React.FC<ProviderListProps> = ({
)} )}
</div> </div>
<div className="flex items-center gap-2 text-sm text-[var(--color-text-secondary)]"> <div className="flex items-center gap-2 text-sm">
{provider.websiteUrl ? ( {provider.websiteUrl ? (
<button <button
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
handleUrlClick(provider.websiteUrl!); handleUrlClick(provider.websiteUrl!);
}} }}
className="inline-flex items-center gap-1 hover:text-[var(--color-primary)] transition-colors" className="inline-flex items-center gap-1 text-[var(--color-primary)] hover:opacity-90 transition-colors"
title={`访问 ${provider.websiteUrl}`} title={`访问 ${provider.websiteUrl}`}
> >
<ExternalLink size={14} />
{provider.websiteUrl} {provider.websiteUrl}
</button> </button>
) : ( ) : (
<span className="font-mono" title={apiUrl}> <span className="text-[var(--color-text-secondary)]" title={apiUrl}>
{apiUrl} {apiUrl}
</span> </span>
)} )}