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

feat: 系统托盘 (#12)

Browse Source 
* feat: 系统托盘

1. 添加系统托盘
2. 托盘添加切换供应商功能
3. 整理组件目录

* feat: 优化系统托盘菜单结构

- 扁平化Claude和Codex的菜单结构，直接将所有供应商添加到主菜单，简化用户交互。
- 添加无供应商时的提示信息，提升用户体验。
- 更新分隔符文本以增强可读性。

* feat: integrate Tailwind CSS and Lucide icons

- Added Tailwind CSS for styling and layout improvements.
- Integrated Lucide icons for enhanced UI elements.
- Updated project structure by removing unused CSS files and components.
- Refactored configuration files to support new styling and component structure.
- Introduced new components for managing providers with improved UI interactions.   

* fix: 修复类型声明和分隔符实现问题

- 修复 updateTrayMenu 返回类型不一致（Promise<void> -> Promise<boolean>）
- 添加缺失的 UnlistenFn 类型导入
- 使用 MenuBuilder.separator() 替代文本分隔符

---------

Co-authored-by: farion1231 <farion1231@gmail.c
This commit is contained in:
TinsFox
2025-09-06 16:21:21 +08:00
committed by GitHub
parent 07b870488d
commit 5af476d376
21 changed files with 1222 additions and 1193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/components/ProviderList.tsx
View File

@@ -1,6 +1,13 @@
import React from "react";
import { Provider } from "../types";
import "./ProviderList.css";
import {
Play,
Edit3,
Trash2,
ExternalLink,
CheckCircle2,
Users,
} from "lucide-react";
interface ProviderListProps {
providers: Record<string, Provider>;
@@ -39,71 +46,104 @@ const ProviderList: React.FC<ProviderListProps> = ({
};
return (
<div className="provider-list">
<div className="space-y-4">
{Object.values(providers).length === 0 ? (
<div className="empty-state">
<p>还没有添加任何供应商</p>
<p>点击右上角的"添加供应商"按钮开始</p>
<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>
<h3 className="text-lg font-medium text-[var(--color-text-primary)] mb-2">
还没有添加任何供应商
</h3>
<p className="text-[var(--color-text-secondary)] text-sm">
点击右上角的"添加供应商"按钮开始配置您的第一个API供应商
</p>
</div>
) : (
<div className="provider-items">
<div className="space-y-3">
{Object.values(providers).map((provider) => {
const isCurrent = provider.id === currentProviderId;
const apiUrl = getApiUrl(provider);
return (
<div
key={provider.id}
className={`provider-item ${isCurrent ? "current" : ""}`}
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"
}`}
>
<div className="provider-info">
<div className="provider-name">
<span>{provider.name}</span>
{isCurrent && (
<span className="current-badge">当前使用</span>
)}
</div>
<div className="provider-url">
{provider.websiteUrl ? (
<a
href="#"
onClick={(e) => {
e.preventDefault();
handleUrlClick(provider.websiteUrl!);
}}
className="url-link"
title={`访问 ${provider.websiteUrl}`}
>
{provider.websiteUrl}
</a>
) : (
<span className="api-url" title={getApiUrl(provider)}>
{getApiUrl(provider)}
</span>
)}
</div>
</div>
<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)]">
{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">
<CheckCircle2 size={12} />
当前使用
</div>
)}
</div>
<div className="provider-actions">
<button
className="enable-btn"
onClick={() => onSwitch(provider.id)}
disabled={isCurrent}
>
启用
</button>
<button
className="edit-btn"
onClick={() => onEdit(provider.id)}
>
编辑
</button>
<button
className="delete-btn"
onClick={() => onDelete(provider.id)}
disabled={isCurrent}
>
删除
</button>
<div className="flex items-center gap-2 text-sm text-[var(--color-text-secondary)]">
{provider.websiteUrl ? (
<button
onClick={(e) => {
e.preventDefault();
handleUrlClick(provider.websiteUrl!);
}}
className="inline-flex items-center gap-1 hover:text-[var(--color-primary)] transition-colors"
title={`访问 ${provider.websiteUrl}`}
>
<ExternalLink size={14} />
{provider.websiteUrl}
</button>
) : (
<span className="font-mono" title={apiUrl}>
{apiUrl}
</span>
)}
</div>
</div>
<div className="flex items-center gap-2 ml-4">
<button
onClick={() => onSwitch(provider.id)}
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)]"
}`}
>
<Play size={14} />
{isCurrent ? "使用中" : "启用"}
</button>
<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"
title="编辑供应商"
>
<Edit3 size={16} />
</button>
<button
onClick={() => onDelete(provider.id)}
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)]"
}`}
title="删除供应商"
>
<Trash2 size={16} />
</button>
</div>
</div>
</div>
);