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 风格的顶部导航 */}
<header className="bg-white border-b border-[var(--color-border)] px-6 py-4">
<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
</h1>

View File

@@ -1,13 +1,6 @@
import React from "react";
import { Provider } from "../types";
import {
Play,
Edit3,
Trash2,
ExternalLink,
CheckCircle2,
Users,
} from "lucide-react";
import { Play, Edit3, Trash2, CheckCircle2, Users } from "lucide-react";
interface ProviderListProps {
providers: Record<string, Provider>;
@@ -24,14 +17,20 @@ const ProviderList: React.FC<ProviderListProps> = ({
onDelete,
onEdit,
}) => {
// 提取API地址
// 提取API地址兼容不同供应商配置Claude env / Codex TOML
const getApiUrl = (provider: Provider): string => {
try {
const config = provider.settingsConfig;
if (config?.env?.ANTHROPIC_BASE_URL) {
return config.env.ANTHROPIC_BASE_URL;
const cfg = provider.settingsConfig;
// Claude/Anthropic: 从 env 中读取
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 {
return "配置错误";
}
@@ -88,21 +87,20 @@ const ProviderList: React.FC<ProviderListProps> = ({
)}
</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 ? (
<button
onClick={(e) => {
e.preventDefault();
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}`}
>
<ExternalLink size={14} />
{provider.websiteUrl}
</button>
) : (
<span className="font-mono" title={apiUrl}>
<span className="text-[var(--color-text-secondary)]" title={apiUrl}>
{apiUrl}
</span>
)}