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 (
<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 风格的顶部导航 */}
<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 gap-2">
<h1 className="text-xl font-semibold text-[var(--color-primary)]">
<h1 className="text-xl font-semibold text-blue-500">
CC Switch
</h1>
<button
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="设置"
>
<Settings size={18} />
@@ -224,7 +224,7 @@ function App() {
<button
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} />
添加供应商
@@ -241,8 +241,8 @@ function App() {
<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 ${
notification.type === "error"
? "bg-[var(--color-error)] text-white"
: "bg-[var(--color-success)] text-white"
? "bg-red-500 text-white"
: "bg-green-500 text-white"
} ${isNotificationVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"}`}
>
{notification.message}

10
src/components/AppSwitcher.tsx
View File

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

18
src/components/ConfirmDialog.tsx
View File

@@ -33,18 +33,18 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
{/* Dialog */}
<div className="relative bg-white rounded-xl shadow-lg max-w-md w-full mx-4 overflow-hidden">
{/* 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="w-10 h-10 bg-[var(--color-error-light)] rounded-full flex items-center justify-center">
<AlertTriangle size={20} className="text-[var(--color-error)]" />
<div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<AlertTriangle size={20} className="text-red-500" />
</div>
<h3 className="text-lg font-semibold text-[var(--color-text-primary)]">
<h3 className="text-lg font-semibold text-gray-900">
{title}
</h3>
</div>
<button
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} />
</button>
@@ -52,23 +52,23 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
{/* Content */}
<div className="p-6">
<p className="text-[var(--color-text-secondary)] leading-relaxed">
<p className="text-gray-500 leading-relaxed">
{message}
</p>
</div>
{/* 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
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
>
{cancelText}
</button>
<button
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}
</button>

26
src/components/ProviderForm.tsx
View File

@@ -453,14 +453,14 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
{/* 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">
{/* Header */}
<div className="flex items-center justify-between p-6 border-b border-[var(--color-border)]">
<h2 className="text-xl font-semibold text-[var(--color-text-primary)]">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<h2 className="text-xl font-semibold text-gray-900">
{title}
</h2>
<button
type="button"
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="关闭"
>
<X size={18} />
@@ -470,12 +470,12 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
<form onSubmit={handleSubmit} className="flex flex-col flex-1 min-h-0">
<div className="flex-1 overflow-auto p-6 space-y-6">
{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
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}
</p>
</div>
@@ -506,7 +506,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
<div className="space-y-2">
<label
htmlFor="name"
className="block text-sm font-medium text-[var(--color-text-primary)]"
className="block text-sm font-medium text-gray-900"
>
供应商名称 *
</label>
@@ -519,7 +519,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
placeholder="例如：Anthropic 官方"
required
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>
@@ -571,7 +571,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
<div className="space-y-2">
<label
htmlFor="websiteUrl"
className="block text-sm font-medium text-[var(--color-text-primary)]"
className="block text-sm font-medium text-gray-900"
>
官网地址
</label>
@@ -583,7 +583,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
onChange={handleChange}
placeholder="https://example.com（可选）"
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>
@@ -622,17 +622,17 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
</div>
{/* 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
type="button"
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
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} />
{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 ${
disabled
? "bg-[var(--color-bg-tertiary)] border-[var(--color-border)] text-[var(--color-text-tertiary)] cursor-not-allowed"
: "border-[var(--color-border)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]"
? "bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed"
: "border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
}`;
return (
<div className="space-y-2">
<label
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>
@@ -56,7 +56,7 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
<button
type="button"
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"}
>
{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">
<label
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) *
</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
type="checkbox"
checked={disableCoAuthored}
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 签名
</label>
@@ -44,7 +44,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
}`}
rows={12}
/>
<p className="text-xs text-[var(--color-text-secondary)]">
<p className="text-xs text-gray-500">
完整的 Claude Code settings.json 配置内容
</p>
</div>

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

@@ -20,7 +20,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
<div className="space-y-2">
<label
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) *
</label>
@@ -34,9 +34,9 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
}`}
rows={6}
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 配置内容
</p>
</div>
@@ -44,7 +44,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
<div className="space-y-2">
<label
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)
</label>
@@ -54,9 +54,9 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
onChange={(e) => onConfigChange(e.target.value)}
placeholder=""
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 配置内容
</p>
</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 ${
disabled
? "bg-[var(--color-bg-tertiary)] border-[var(--color-border)] text-[var(--color-text-tertiary)] cursor-not-allowed"
: "border-[var(--color-border)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]"
? "bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed"
: "border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
}`;
const ModelSelect: React.FC<{
@@ -98,7 +98,7 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
onChange: (value: string) => void;
}> = ({ label, value, onChange }) => (
<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>
<div className="relative">
@@ -123,7 +123,7 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
</select>
<ChevronDown
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>
@@ -132,14 +132,14 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
return (
<div className="space-y-4">
<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>
<button
type="button"
onClick={() => debouncedKey && fetchModelsWithKey(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" : ""} />
刷新模型列表
@@ -147,12 +147,12 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
</div>
{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
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>
)}
@@ -172,8 +172,8 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
</div>
{!apiKey.trim() && (
<div className="p-3 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg">
<p className="text-xs text-[var(--color-text-secondary)]">
<div className="p-3 bg-gray-100 border border-gray-200 rounded-lg">
<p className="text-xs text-gray-500">
📝 请先填写 API Key（格式：sk-xxx-api-key-here）以获取可用模型列表
</p>
</div>

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

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

30
src/components/ProviderList.tsx
View File

@@ -69,13 +69,13 @@ const ProviderList: React.FC<ProviderListProps> = ({
<div className="space-y-4">
{sortedProviders.length === 0 ? (
<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">
<Users size={24} className="text-[var(--color-text-tertiary)]" />
<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-gray-400" />
</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>
<p className="text-[var(--color-text-secondary)] text-sm">
<p className="text-gray-500 text-sm">
点击右上角的"添加供应商"按钮开始配置您的第一个API供应商
</p>
</div>
@@ -90,18 +90,18 @@ const ProviderList: React.FC<ProviderListProps> = ({
key={provider.id}
className={`bg-white rounded-lg border p-4 transition-all duration-200 ${
isCurrent
? "border-[var(--color-primary)] ring-1 ring-[var(--color-primary)]/20 bg-[var(--color-primary)]/5"
: "border-[var(--color-border)] hover:border-[var(--color-border-hover)] hover:shadow-sm"
? "border-blue-500 ring-1 ring-blue-500/20 bg-blue-500/5"
: "border-gray-200 hover:border-gray-300 hover:shadow-sm"
}`}
>
<div className="flex items-start justify-between">
<div className="flex-1">
<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}
</h3>
{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} />
当前使用
</div>
@@ -115,14 +115,14 @@ const ProviderList: React.FC<ProviderListProps> = ({
e.preventDefault();
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}`}
>
{provider.websiteUrl}
</button>
) : (
<span
className="text-[var(--color-text-secondary)]"
className="text-gray-500"
title={apiUrl}
>
{apiUrl}
@@ -137,8 +137,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
disabled={isCurrent}
className={`inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
isCurrent
? "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)] cursor-not-allowed"
: "bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)]"
? "bg-gray-100 text-gray-400 cursor-not-allowed"
: "bg-blue-500 text-white hover:bg-blue-600"
}`}
>
<Play size={14} />
@@ -147,7 +147,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
<button
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="编辑供应商"
>
<Edit3 size={16} />
@@ -158,8 +158,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
disabled={isCurrent}
className={`p-1.5 rounded-md transition-colors ${
isCurrent
? "text-[var(--color-text-tertiary)] cursor-not-allowed"
: "text-[var(--color-text-secondary)] hover:text-[var(--color-error)] hover:bg-[var(--color-error-light)]"
? "text-gray-400 cursor-not-allowed"
: "text-gray-500 hover:text-red-500 hover:bg-red-100"
}`}
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="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)]">
<h2 className="text-lg font-semibold text-[var(--color-primary)]">
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-semibold text-blue-500">
设置
</h2>
<button
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>
</div>
@@ -102,11 +102,11 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
<div className="px-6 py-4 space-y-6">
{/* 显示设置 - 功能还未实现 */}
{/* <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>
<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）
</span>
<input
@@ -115,30 +115,30 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
onChange={(e) =>
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>
</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>
<div className="flex items-center gap-2">
<div className="flex-1 px-3 py-2 bg-[var(--color-bg-tertiary)] rounded-lg">
<span className="text-xs font-mono text-[var(--color-text-secondary)]">
<div className="flex-1 px-3 py-2 bg-gray-100 rounded-lg">
<span className="text-xs font-mono text-gray-500">
{configPath || "加载中..."}
</span>
</div>
<button
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="打开文件夹"
>
<FolderOpen
size={18}
className="text-[var(--color-text-secondary)]"
className="text-gray-500"
/>
</button>
</div>
@@ -146,21 +146,21 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
{/* 关于 */}
<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>
<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 gap-3">
<Info
size={18}
className="text-[var(--color-text-secondary)] mt-0.5"
className="text-gray-500 mt-0.5"
/>
<div className="text-sm">
<p className="font-medium text-[var(--color-text-primary)]">
<p className="font-medium text-gray-900">
CC Switch
</p>
<p className="mt-1 text-[var(--color-text-secondary)]">
<p className="mt-1 text-gray-500">
版本 {version}
</p>
</div>
@@ -170,8 +170,8 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
disabled={isCheckingUpdate}
className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${
isCheckingUpdate
? "bg-[var(--color-bg-secondary)] text-[var(--color-text-tertiary)]"
: "bg-white hover:bg-[var(--color-bg-primary)] text-[var(--color-primary)]"
? "bg-white text-gray-400"
: "bg-white hover:bg-gray-50 text-blue-500"
}`}
>
{isCheckingUpdate ? (
@@ -189,16 +189,16 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
</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
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
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>

68
src/index.css
View File

@@ -1,89 +1,37 @@
@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;
}
html {
font-family: var(--font-family);
@apply font-sans antialiased;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
padding: 0;
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
font-size: 14px;
@apply m-0 p-0 bg-gray-50 text-gray-900 text-sm;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
@apply w-1.5 h-1.5;
}
::-webkit-scrollbar-track {
background: var(--color-bg-tertiary);
@apply bg-gray-100;
}
::-webkit-scrollbar-thumb {
background: var(--color-border-hover);
border-radius: 3px;
@apply bg-gray-300 rounded;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
@apply bg-gray-400;
}
/* 焦点样式 */
*:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
@apply outline-2 outline-blue-500 outline-offset-2;
}

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: [],
}