admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(styles): migrate from CSS variables to Tailwind classes

Browse Source 
- Replace all CSS custom properties with Tailwind utility classes
- Add tailwind.config.js with custom color palette matching Linear design
- Reduce index.css from 89 to 37 lines (58% reduction)
- Maintain consistent visual appearance with semantic color usage
- Update all components to use Tailwind classes instead of CSS variables
This commit is contained in:
Jason
2025-09-08 11:48:05 +08:00
parent 3ce847d2e0
commit 77a65aaad8
13 changed files with 168 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.tsx
View File

@@ -202,17 +202,17 @@ function App() {
return ( return (
<div className="min-h-screen flex flex-col bg-[var(--color-bg-primary)]"> <div className="min-h-screen flex flex-col bg-gray-50">
{/* Linear 风格的顶部导航 */} {/* Linear 风格的顶部导航 */}
<header className="bg-white border-b border-[var(--color-border)] px-6 py-4"> <header className="bg-white border-b border-gray-200 px-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h1 className="text-xl font-semibold text-[var(--color-primary)]"> <h1 className="text-xl font-semibold text-blue-500">
CC Switch CC Switch
</h1> </h1>
<button <button
onClick={() => setIsSettingsOpen(true)} onClick={() => setIsSettingsOpen(true)}
className="p-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] hover:bg-[var(--color-bg-tertiary)] rounded-md transition-all" className="p-1.5 text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded-md transition-all"
title="设置" title="设置"
> >
<Settings size={18} /> <Settings size={18} />
@@ -224,7 +224,7 @@ function App() {
<button <button
onClick={() => setIsAddModalOpen(true)} onClick={() => setIsAddModalOpen(true)}
className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-hover)] transition-colors text-sm font-medium" className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium"
> >
<Plus size={16} /> <Plus size={16} />
添加供应商 添加供应商
@@ -241,8 +241,8 @@ function App() {
<div <div
className={`fixed top-6 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${ className={`fixed top-6 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${
notification.type === "error" notification.type === "error"
? "bg-[var(--color-error)] text-white" ? "bg-red-500 text-white"
: "bg-[var(--color-success)] text-white" : "bg-green-500 text-white"
} ${isNotificationVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"}`} } ${isNotificationVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"}`}
> >
{notification.message} {notification.message}

10
src/components/AppSwitcher.tsx
View File

@@ -13,14 +13,14 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
}; };
return ( return (
<div className="inline-flex bg-[var(--color-bg-tertiary)] rounded-lg p-1 gap-1"> <div className="inline-flex bg-gray-100 rounded-lg p-1 gap-1">
<button <button
type="button" type="button"
onClick={() => handleSwitch("claude")} onClick={() => handleSwitch("claude")}
className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${ className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
activeApp === "claude" activeApp === "claude"
? "bg-white text-[var(--color-text-primary)] shadow-sm" ? "bg-white text-gray-900 shadow-sm"
: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-white/50" : "text-gray-500 hover:text-gray-900 hover:bg-white/50"
}`} }`}
> >
<Code2 size={16} /> <Code2 size={16} />
@@ -32,8 +32,8 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
onClick={() => handleSwitch("codex")} onClick={() => handleSwitch("codex")}
className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${ className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
activeApp === "codex" activeApp === "codex"
? "bg-white text-[var(--color-text-primary)] shadow-sm" ? "bg-white text-gray-900 shadow-sm"
: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-white/50" : "text-gray-500 hover:text-gray-900 hover:bg-white/50"
}`} }`}
> >
<Terminal size={16} /> <Terminal size={16} />

18
src/components/ConfirmDialog.tsx
View File

@@ -33,18 +33,18 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
{/* Dialog */} {/* Dialog */}
<div className="relative bg-white rounded-xl shadow-lg max-w-md w-full mx-4 overflow-hidden"> <div className="relative bg-white rounded-xl shadow-lg max-w-md w-full mx-4 overflow-hidden">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between p-6 border-b border-[var(--color-border)]"> <div className="flex items-center justify-between p-6 border-b border-gray-200">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 bg-[var(--color-error-light)] rounded-full flex items-center justify-center"> <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<AlertTriangle size={20} className="text-[var(--color-error)]" /> <AlertTriangle size={20} className="text-red-500" />
</div> </div>
<h3 className="text-lg font-semibold text-[var(--color-text-primary)]"> <h3 className="text-lg font-semibold text-gray-900">
{title} {title}
</h3> </h3>
</div> </div>
<button <button
onClick={onCancel} onClick={onCancel}
className="p-1 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)] rounded-md transition-colors" className="p-1 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
> >
<X size={18} /> <X size={18} />
</button> </button>
@@ -52,23 +52,23 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
{/* Content */} {/* Content */}
<div className="p-6"> <div className="p-6">
<p className="text-[var(--color-text-secondary)] leading-relaxed"> <p className="text-gray-500 leading-relaxed">
{message} {message}
</p> </p>
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex items-center justify-end gap-3 p-6 border-t border-[var(--color-border)] bg-[var(--color-bg-tertiary)]"> <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-100">
<button <button
onClick={onCancel} onClick={onCancel}
className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-white rounded-md transition-colors" className="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-md transition-colors"
autoFocus autoFocus
> >
{cancelText} {cancelText}
</button> </button>
<button <button
onClick={onConfirm} onClick={onConfirm}
className="px-4 py-2 text-sm font-medium bg-[var(--color-error)] text-white hover:bg-[var(--color-error)]/90 rounded-md transition-colors" className="px-4 py-2 text-sm font-medium bg-red-500 text-white hover:bg-red-500/90 rounded-md transition-colors"
> >
{confirmText} {confirmText}
</button> </button>

26
src/components/ProviderForm.tsx
View File

@@ -453,14 +453,14 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
{/* Modal */} {/* Modal */}
<div className="relative bg-white rounded-xl shadow-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col"> <div className="relative bg-white rounded-xl shadow-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between p-6 border-b border-[var(--color-border)]"> <div className="flex items-center justify-between p-6 border-b border-gray-200">
<h2 className="text-xl font-semibold text-[var(--color-text-primary)]"> <h2 className="text-xl font-semibold text-gray-900">
{title} {title}
</h2> </h2>
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
className="p-1 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)] rounded-md transition-colors" className="p-1 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
aria-label="关闭" aria-label="关闭"
> >
<X size={18} /> <X size={18} />
@@ -470,12 +470,12 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
<form onSubmit={handleSubmit} className="flex flex-col flex-1 min-h-0"> <form onSubmit={handleSubmit} className="flex flex-col flex-1 min-h-0">
<div className="flex-1 overflow-auto p-6 space-y-6"> <div className="flex-1 overflow-auto p-6 space-y-6">
{error && ( {error && (
<div className="flex items-center gap-3 p-4 bg-[var(--color-error-light)] border border-[var(--color-error)]/20 rounded-lg"> <div className="flex items-center gap-3 p-4 bg-red-100 border border-red-500/20 rounded-lg">
<AlertCircle <AlertCircle
size={20} size={20}
className="text-[var(--color-error)] flex-shrink-0" className="text-red-500 flex-shrink-0"
/> />
<p className="text-[var(--color-error)] text-sm font-medium"> <p className="text-red-500 text-sm font-medium">
{error} {error}
</p> </p>
</div> </div>
@@ -506,7 +506,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
<div className="space-y-2"> <div className="space-y-2">
<label <label
htmlFor="name" htmlFor="name"
className="block text-sm font-medium text-[var(--color-text-primary)]" className="block text-sm font-medium text-gray-900"
> >
供应商名称 * 供应商名称 *
</label> </label>
@@ -519,7 +519,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
placeholder="例如：Anthropic 官方" placeholder="例如：Anthropic 官方"
required required
autoComplete="off" autoComplete="off"
className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
/> />
</div> </div>
@@ -571,7 +571,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
<div className="space-y-2"> <div className="space-y-2">
<label <label
htmlFor="websiteUrl" htmlFor="websiteUrl"
className="block text-sm font-medium text-[var(--color-text-primary)]" className="block text-sm font-medium text-gray-900"
> >
官网地址 官网地址
</label> </label>
@@ -583,7 +583,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
onChange={handleChange} onChange={handleChange}
placeholder="https://example.com（可选）" placeholder="https://example.com（可选）"
autoComplete="off" autoComplete="off"
className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
/> />
</div> </div>
@@ -622,17 +622,17 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
</div> </div>
{/* Footer */} {/* Footer */}
<div className="flex items-center justify-end gap-3 p-6 border-t border-[var(--color-border)] bg-[var(--color-bg-tertiary)]"> <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-100">
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-white rounded-lg transition-colors" className="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-lg transition-colors"
> >
取消 取消
</button> </button>
<button <button
type="submit" type="submit"
className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-hover)] transition-colors text-sm font-medium" className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium"
> >
<Save size={16} /> <Save size={16} />
{submitText} {submitText}

8
src/components/ProviderForm/ApiKeyInput.tsx
View File

@@ -28,15 +28,15 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${ const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${
disabled disabled
? "bg-[var(--color-bg-tertiary)] border-[var(--color-border)] text-[var(--color-text-tertiary)] cursor-not-allowed" ? "bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed"
: "border-[var(--color-border)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]" : "border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
}`; }`;
return ( return (
<div className="space-y-2"> <div className="space-y-2">
<label <label
htmlFor={id} htmlFor={id}
className="block text-sm font-medium text-[var(--color-text-primary)]" className="block text-sm font-medium text-gray-900"
> >
{label} {required && "*"} {label} {required && "*"}
</label> </label>
@@ -56,7 +56,7 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
<button <button
type="button" type="button"
onClick={toggleShowKey} onClick={toggleShowKey}
className="absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors" className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-900 transition-colors"
aria-label={showKey ? "隐藏API Key" : "显示API Key"} aria-label={showKey ? "隐藏API Key" : "显示API Key"}
> >
{showKey ? <EyeOff size={16} /> : <Eye size={16} />} {showKey ? <EyeOff size={16} /> : <Eye size={16} />}

8
src/components/ProviderForm/ClaudeConfigEditor.tsx
View File

@@ -19,16 +19,16 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<label <label
htmlFor="settingsConfig" htmlFor="settingsConfig"
className="block text-sm font-medium text-[var(--color-text-primary)]" className="block text-sm font-medium text-gray-900"
> >
Claude Code 配置 (JSON) * Claude Code 配置 (JSON) *
</label> </label>
<label className="inline-flex items-center gap-2 text-sm text-[var(--color-text-secondary)] cursor-pointer"> <label className="inline-flex items-center gap-2 text-sm text-gray-500 cursor-pointer">
<input <input
type="checkbox" type="checkbox"
checked={disableCoAuthored} checked={disableCoAuthored}
onChange={(e) => onCoAuthoredToggle(e.target.checked)} onChange={(e) => onCoAuthoredToggle(e.target.checked)}
className="w-4 h-4 text-[var(--color-primary)] bg-white border-[var(--color-border)] rounded focus:ring-[var(--color-primary)] focus:ring-2" className="w-4 h-4 text-blue-500 bg-white border-gray-200 rounded focus:ring-blue-500 focus:ring-2"
/> />
禁止 Claude Code 签名 禁止 Claude Code 签名
</label> </label>
@@ -44,7 +44,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
}`} }`}
rows={12} rows={12}
/> />
<p className="text-xs text-[var(--color-text-secondary)]"> <p className="text-xs text-gray-500">
完整的 Claude Code settings.json 配置内容 完整的 Claude Code settings.json 配置内容
</p> </p>
</div> </div>

12
src/components/ProviderForm/CodexConfigEditor.tsx
View File

@@ -20,7 +20,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
<div className="space-y-2"> <div className="space-y-2">
<label <label
htmlFor="codexAuth" htmlFor="codexAuth"
className="block text-sm font-medium text-[var(--color-text-primary)]" className="block text-sm font-medium text-gray-900"
> >
auth.json (JSON) * auth.json (JSON) *
</label> </label>
@@ -34,9 +34,9 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
}`} }`}
rows={6} rows={6}
required required
className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors resize-y min-h-[8rem]" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors resize-y min-h-[8rem]"
/> />
<p className="text-xs text-[var(--color-text-secondary)]"> <p className="text-xs text-gray-500">
Codex auth.json 配置内容 Codex auth.json 配置内容
</p> </p>
</div> </div>
@@ -44,7 +44,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
<div className="space-y-2"> <div className="space-y-2">
<label <label
htmlFor="codexConfig" htmlFor="codexConfig"
className="block text-sm font-medium text-[var(--color-text-primary)]" className="block text-sm font-medium text-gray-900"
> >
config.toml (TOML) config.toml (TOML)
</label> </label>
@@ -54,9 +54,9 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
onChange={(e) => onConfigChange(e.target.value)} onChange={(e) => onConfigChange(e.target.value)}
placeholder="" placeholder=""
rows={8} rows={8}
className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors resize-y min-h-[10rem]" className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors resize-y min-h-[10rem]"
/> />
<p className="text-xs text-[var(--color-text-secondary)]"> <p className="text-xs text-gray-500">
Codex config.toml 配置内容 Codex config.toml 配置内容
</p> </p>
</div> </div>

22
src/components/ProviderForm/KimiModelSelector.tsx
View File

@@ -88,8 +88,8 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
const selectClass = `w-full px-3 py-2 border rounded-lg text-sm transition-colors appearance-none bg-white ${ const selectClass = `w-full px-3 py-2 border rounded-lg text-sm transition-colors appearance-none bg-white ${
disabled disabled
? "bg-[var(--color-bg-tertiary)] border-[var(--color-border)] text-[var(--color-text-tertiary)] cursor-not-allowed" ? "bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed"
: "border-[var(--color-border)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]" : "border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
}`; }`;
const ModelSelect: React.FC<{ const ModelSelect: React.FC<{
@@ -98,7 +98,7 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
onChange: (value: string) => void; onChange: (value: string) => void;
}> = ({ label, value, onChange }) => ( }> = ({ label, value, onChange }) => (
<div className="space-y-2"> <div className="space-y-2">
<label className="block text-sm font-medium text-[var(--color-text-primary)]"> <label className="block text-sm font-medium text-gray-900">
{label} {label}
</label> </label>
<div className="relative"> <div className="relative">
@@ -123,7 +123,7 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
</select> </select>
<ChevronDown <ChevronDown
size={16} size={16}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[var(--color-text-secondary)] pointer-events-none" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none"
/> />
</div> </div>
</div> </div>
@@ -132,14 +132,14 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="text-sm font-medium text-[var(--color-text-primary)]"> <h3 className="text-sm font-medium text-gray-900">
模型配置 模型配置
</h3> </h3>
<button <button
type="button" type="button"
onClick={() => debouncedKey && fetchModelsWithKey(debouncedKey)} onClick={() => debouncedKey && fetchModelsWithKey(debouncedKey)}
disabled={disabled || loading || !debouncedKey} disabled={disabled || loading || !debouncedKey}
className="inline-flex items-center gap-1 px-2 py-1 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors" className="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:text-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
> >
<RefreshCw size={12} className={loading ? "animate-spin" : ""} /> <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
刷新模型列表 刷新模型列表
@@ -147,12 +147,12 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
</div> </div>
{error && ( {error && (
<div className="flex items-center gap-2 p-3 bg-[var(--color-error-light)] border border-[var(--color-error)]/20 rounded-lg"> <div className="flex items-center gap-2 p-3 bg-red-100 border border-red-500/20 rounded-lg">
<AlertCircle <AlertCircle
size={16} size={16}
className="text-[var(--color-error)] flex-shrink-0" className="text-red-500 flex-shrink-0"
/> />
<p className="text-[var(--color-error)] text-xs">{error}</p> <p className="text-red-500 text-xs">{error}</p>
</div> </div>
)} )}
@@ -172,8 +172,8 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
</div> </div>
{!apiKey.trim() && ( {!apiKey.trim() && (
<div className="p-3 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg"> <div className="p-3 bg-gray-100 border border-gray-200 rounded-lg">
<p className="text-xs text-[var(--color-text-secondary)]"> <p className="text-xs text-gray-500">
📝 请先填写 API Key（格式：sk-xxx-api-key-here）以获取可用模型列表 📝 请先填写 API Key（格式：sk-xxx-api-key-here）以获取可用模型列表
</p> </p>
</div> </div>

12
src/components/ProviderForm/PresetSelector.tsx
View File

@@ -30,11 +30,11 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
if (isSelected) { if (isSelected) {
return isOfficial return isOfficial
? `${baseClass} bg-[var(--color-warning)] text-white` ? `${baseClass} bg-amber-500 text-white`
: `${baseClass} bg-[var(--color-primary)] text-white`; : `${baseClass} bg-blue-500 text-white`;
} }
return `${baseClass} bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] hover:bg-[var(--color-border)]`; return `${baseClass} bg-gray-100 text-gray-500 hover:bg-gray-200`;
}; };
const getDescription = () => { const getDescription = () => {
@@ -55,13 +55,13 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-[var(--color-text-primary)] mb-3"> <label className="block text-sm font-medium text-gray-900 mb-3">
{title} {title}
</label> </label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
<button <button
type="button" type="button"
className={getButtonClass(-1)} className={`${getButtonClass(-1)} ${selectedIndex === -1 ? '' : ''}`}
onClick={onCustomClick} onClick={onCustomClick}
> >
{customLabel} {customLabel}
@@ -80,7 +80,7 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
</div> </div>
</div> </div>
{getDescription() && ( {getDescription() && (
<p className="text-sm text-[var(--color-text-secondary)]"> <p className="text-sm text-gray-500">
{getDescription()} {getDescription()}
</p> </p>
)} )}

30
src/components/ProviderList.tsx
View File

@@ -69,13 +69,13 @@ const ProviderList: React.FC<ProviderListProps> = ({
<div className="space-y-4"> <div className="space-y-4">
{sortedProviders.length === 0 ? ( {sortedProviders.length === 0 ? (
<div className="text-center py-12"> <div className="text-center py-12">
<div className="w-16 h-16 mx-auto mb-4 bg-[var(--color-bg-tertiary)] rounded-full flex items-center justify-center"> <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
<Users size={24} className="text-[var(--color-text-tertiary)]" /> <Users size={24} className="text-gray-400" />
</div> </div>
<h3 className="text-lg font-medium text-[var(--color-text-primary)] mb-2"> <h3 className="text-lg font-medium text-gray-900 mb-2">
还没有添加任何供应商 还没有添加任何供应商
</h3> </h3>
<p className="text-[var(--color-text-secondary)] text-sm"> <p className="text-gray-500 text-sm">
点击右上角的"添加供应商"按钮开始配置您的第一个API供应商 点击右上角的"添加供应商"按钮开始配置您的第一个API供应商
</p> </p>
</div> </div>
@@ -90,18 +90,18 @@ const ProviderList: React.FC<ProviderListProps> = ({
key={provider.id} key={provider.id}
className={`bg-white rounded-lg border p-4 transition-all duration-200 ${ className={`bg-white rounded-lg border p-4 transition-all duration-200 ${
isCurrent isCurrent
? "border-[var(--color-primary)] ring-1 ring-[var(--color-primary)]/20 bg-[var(--color-primary)]/5" ? "border-blue-500 ring-1 ring-blue-500/20 bg-blue-500/5"
: "border-[var(--color-border)] hover:border-[var(--color-border-hover)] hover:shadow-sm" : "border-gray-200 hover:border-gray-300 hover:shadow-sm"
}`} }`}
> >
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-2">
<h3 className="font-medium text-[var(--color-text-primary)]"> <h3 className="font-medium text-gray-900">
{provider.name} {provider.name}
</h3> </h3>
{isCurrent && ( {isCurrent && (
<div className="inline-flex items-center gap-1 px-2 py-1 bg-[var(--color-success)]/10 text-[var(--color-success)] rounded-md text-xs font-medium"> <div className="inline-flex items-center gap-1 px-2 py-1 bg-green-500/10 text-green-500 rounded-md text-xs font-medium">
<CheckCircle2 size={12} /> <CheckCircle2 size={12} />
当前使用 当前使用
</div> </div>
@@ -115,14 +115,14 @@ const ProviderList: React.FC<ProviderListProps> = ({
e.preventDefault(); e.preventDefault();
handleUrlClick(provider.websiteUrl!); handleUrlClick(provider.websiteUrl!);
}} }}
className="inline-flex items-center gap-1 text-[var(--color-primary)] hover:opacity-90 transition-colors" className="inline-flex items-center gap-1 text-blue-500 hover:opacity-90 transition-colors"
title={`访问 ${provider.websiteUrl}`} title={`访问 ${provider.websiteUrl}`}
> >
{provider.websiteUrl} {provider.websiteUrl}
</button> </button>
) : ( ) : (
<span <span
className="text-[var(--color-text-secondary)]" className="text-gray-500"
title={apiUrl} title={apiUrl}
> >
{apiUrl} {apiUrl}
@@ -137,8 +137,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
disabled={isCurrent} disabled={isCurrent}
className={`inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${ className={`inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
isCurrent isCurrent
? "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)] cursor-not-allowed" ? "bg-gray-100 text-gray-400 cursor-not-allowed"
: "bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)]" : "bg-blue-500 text-white hover:bg-blue-600"
}`} }`}
> >
<Play size={14} /> <Play size={14} />
@@ -147,7 +147,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
<button <button
onClick={() => onEdit(provider.id)} onClick={() => onEdit(provider.id)}
className="p-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)] rounded-md transition-colors" className="p-1.5 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
title="编辑供应商" title="编辑供应商"
> >
<Edit3 size={16} /> <Edit3 size={16} />
@@ -158,8 +158,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
disabled={isCurrent} disabled={isCurrent}
className={`p-1.5 rounded-md transition-colors ${ className={`p-1.5 rounded-md transition-colors ${
isCurrent isCurrent
? "text-[var(--color-text-tertiary)] cursor-not-allowed" ? "text-gray-400 cursor-not-allowed"
: "text-[var(--color-text-secondary)] hover:text-[var(--color-error)] hover:bg-[var(--color-error-light)]" : "text-gray-500 hover:text-red-500 hover:bg-red-100"
}`} }`}
title="删除供应商" title="删除供应商"
> >

44
src/components/SettingsModal.tsx
View File

@@ -86,15 +86,15 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-white rounded-xl shadow-2xl w-[500px] overflow-hidden"> <div className="bg-white rounded-xl shadow-2xl w-[500px] overflow-hidden">
{/* 标题栏 */} {/* 标题栏 */}
<div className="flex items-center justify-between px-6 py-4 border-b border-[var(--color-border)]"> <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-semibold text-[var(--color-primary)]"> <h2 className="text-lg font-semibold text-blue-500">
设置 设置
</h2> </h2>
<button <button
onClick={onClose} onClick={onClose}
className="p-1.5 hover:bg-[var(--color-bg-tertiary)] rounded-md transition-colors" className="p-1.5 hover:bg-gray-100 rounded-md transition-colors"
> >
<X size={20} className="text-[var(--color-text-secondary)]" /> <X size={20} className="text-gray-500" />
</button> </button>
</div> </div>
@@ -102,11 +102,11 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
<div className="px-6 py-4 space-y-6"> <div className="px-6 py-4 space-y-6">
{/* 显示设置 - 功能还未实现 */} {/* 显示设置 - 功能还未实现 */}
{/* <div> {/* <div>
<h3 className="text-sm font-medium text-[var(--color-text-primary)] mb-3"> <h3 className="text-sm font-medium text-gray-900 mb-3">
显示设置 显示设置
</h3> </h3>
<label className="flex items-center justify-between"> <label className="flex items-center justify-between">
<span className="text-sm text-[var(--color-text-secondary)]"> <span className="text-sm text-gray-500">
在 Dock 中显示（macOS） 在 Dock 中显示（macOS）
</span> </span>
<input <input
@@ -115,30 +115,30 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
onChange={(e) => onChange={(e) =>
setSettings({ ...settings, showInDock: e.target.checked }) setSettings({ ...settings, showInDock: e.target.checked })
} }
className="w-4 h-4 text-[var(--color-primary)] rounded focus:ring-[var(--color-primary)]/20" className="w-4 h-4 text-blue-500 rounded focus:ring-blue-500/20"
/> />
</label> </label>
</div> */} </div> */}
{/* 配置文件位置 */} {/* 配置文件位置 */}
<div> <div>
<h3 className="text-sm font-medium text-[var(--color-text-primary)] mb-3"> <h3 className="text-sm font-medium text-gray-900 mb-3">
配置文件位置 配置文件位置
</h3> </h3>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="flex-1 px-3 py-2 bg-[var(--color-bg-tertiary)] rounded-lg"> <div className="flex-1 px-3 py-2 bg-gray-100 rounded-lg">
<span className="text-xs font-mono text-[var(--color-text-secondary)]"> <span className="text-xs font-mono text-gray-500">
{configPath || "加载中..."} {configPath || "加载中..."}
</span> </span>
</div> </div>
<button <button
onClick={handleOpenConfigFolder} onClick={handleOpenConfigFolder}
className="p-2 hover:bg-[var(--color-bg-tertiary)] rounded-lg transition-colors" className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
title="打开文件夹" title="打开文件夹"
> >
<FolderOpen <FolderOpen
size={18} size={18}
className="text-[var(--color-text-secondary)]" className="text-gray-500"
/> />
</button> </button>
</div> </div>
@@ -146,21 +146,21 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
{/* 关于 */} {/* 关于 */}
<div> <div>
<h3 className="text-sm font-medium text-[var(--color-text-primary)] mb-3"> <h3 className="text-sm font-medium text-gray-900 mb-3">
关于 关于
</h3> </h3>
<div className="p-4 bg-[var(--color-bg-tertiary)] rounded-lg"> <div className="p-4 bg-gray-100 rounded-lg">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Info <Info
size={18} size={18}
className="text-[var(--color-text-secondary)] mt-0.5" className="text-gray-500 mt-0.5"
/> />
<div className="text-sm"> <div className="text-sm">
<p className="font-medium text-[var(--color-text-primary)]"> <p className="font-medium text-gray-900">
CC Switch CC Switch
</p> </p>
<p className="mt-1 text-[var(--color-text-secondary)]"> <p className="mt-1 text-gray-500">
版本 {version} 版本 {version}
</p> </p>
</div> </div>
@@ -170,8 +170,8 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
disabled={isCheckingUpdate} disabled={isCheckingUpdate}
className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${ className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${
isCheckingUpdate isCheckingUpdate
? "bg-[var(--color-bg-secondary)] text-[var(--color-text-tertiary)]" ? "bg-white text-gray-400"
: "bg-white hover:bg-[var(--color-bg-primary)] text-[var(--color-primary)]" : "bg-white hover:bg-gray-50 text-blue-500"
}`} }`}
> >
{isCheckingUpdate ? ( {isCheckingUpdate ? (
@@ -189,16 +189,16 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
</div> </div>
{/* 底部按钮 */} {/* 底部按钮 */}
<div className="flex justify-end gap-3 px-6 py-4 border-t border-[var(--color-border)]"> <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200">
<button <button
onClick={onClose} onClick={onClose}
className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-tertiary)] rounded-lg transition-colors" className="px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 rounded-lg transition-colors"
> >
取消 取消
</button> </button>
<button <button
onClick={saveSettings} onClick={saveSettings}
className="px-4 py-2 text-sm font-medium text-white bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] rounded-lg transition-colors" className="px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition-colors"
> >
保存 保存
</button> </button>

68
src/index.css
View File

@@ -1,89 +1,37 @@
@import "tailwindcss"; @import "tailwindcss";
/* Linear 风格的全局配色和基础样式 */ /* 全局基础样式 */
:root {
/* Linear 配色方案 */
--color-bg-primary: #fafafa;
--color-bg-secondary: #ffffff;
--color-bg-tertiary: #f4f4f5;
--color-border: #e4e4e7;
--color-border-hover: #d4d4d8;
/* 蓝色主色调 */
--color-primary: #3498db;
--color-primary-hover: #2980b9;
--color-primary-light: #5dade2;
/* 文本颜色 */
--color-text-primary: #18181b;
--color-text-secondary: #71717a;
--color-text-tertiary: #a1a1aa;
/* 状态颜色 */
--color-success: #10b981;
--color-success-light: #d1fae5;
--color-error: #ef4444;
--color-error-light: #fee2e2;
--color-warning: #f59e0b;
--color-warning-light: #fef3c7;
/* 阴影 */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg:
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
/* 圆角 */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
/* 字体 */
--font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue",
Arial, sans-serif;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
html { html {
font-family: var(--font-family); @apply font-sans antialiased;
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
body { body {
margin: 0; @apply m-0 p-0 bg-gray-50 text-gray-900 text-sm;
padding: 0;
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
font-size: 14px;
} }
/* 滚动条样式 */ /* 滚动条样式 */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; @apply w-1.5 h-1.5;
height: 6px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: var(--color-bg-tertiary); @apply bg-gray-100;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--color-border-hover); @apply bg-gray-300 rounded;
border-radius: 3px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary); @apply bg-gray-400;
} }
/* 焦点样式 */ /* 焦点样式 */
*:focus-visible { *:focus-visible {
outline: 2px solid var(--color-primary); @apply outline-2 outline-blue-500 outline-offset-2;
outline-offset: 2px;
} }

58
tailwind.config.js Normal file
View File

@@ -0,0 +1,58 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
// 扩展蓝色系列以匹配 Linear 风格
blue: {
500: '#3498db',
600: '#2980b9',
400: '#5dade2',
},
// 自定义灰色系列
gray: {
50: '#fafafa', // bg-primary
100: '#f4f4f5', // bg-tertiary
200: '#e4e4e7', // border
300: '#d4d4d8', // border-hover
400: '#a1a1aa', // text-tertiary
500: '#71717a', // text-secondary
900: '#18181b', // text-primary
},
// 状态颜色
green: {
500: '#10b981',
100: '#d1fae5',
},
red: {
500: '#ef4444',
100: '#fee2e2',
},
amber: {
500: '#f59e0b',
100: '#fef3c7',
},
},
boxShadow: {
'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
},
borderRadius: {
'sm': '0.375rem',
'md': '0.5rem',
'lg': '0.75rem',
'xl': '0.875rem',
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'],
mono: ['ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Consolas', '"Liberation Mono"', 'Menlo', 'monospace'],
},
},
},
plugins: [],
}