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:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user