mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-24 12:44:18 +08:00
41267135f5
* feat(db): add circuit breaker config table and provider proxy target APIs Add database support for auto-failover feature: - Add circuit_breaker_config table for storing failover thresholds - Add get/update_circuit_breaker_config methods in proxy DAO - Add reset_provider_health method for manual recovery - Add set_proxy_target and get_proxy_targets methods in providers DAO for managing multi-provider failover configuration * feat(proxy): implement circuit breaker and provider router for auto-failover Add core failover logic: - CircuitBreaker: Tracks provider health with three states: - Closed: Normal operation, requests pass through - Open: Circuit broken after consecutive failures, skip provider - HalfOpen: Testing recovery with limited requests - ProviderRouter: Routes requests across multiple providers with: - Health tracking and automatic failover - Configurable failure/success thresholds - Auto-disable proxy target after reaching failure threshold - Support for manual circuit breaker reset - Export new types in proxy module * feat(proxy): add failover Tauri commands and integrate with forwarder Expose failover functionality to frontend: - Add Tauri commands: get_proxy_targets, set_proxy_target, get_provider_health, reset_circuit_breaker, get/update_circuit_breaker_config, get_circuit_breaker_stats - Register all new commands in lib.rs invoke handler - Update forwarder with improved error handling and logging - Integrate ProviderRouter with proxy server startup - Add provider health tracking in request handlers * feat(frontend): add failover API layer and TanStack Query hooks Add frontend data layer for failover management: - Add failover.ts API: Tauri invoke wrappers for all failover commands - Add failover.ts query hooks: TanStack Query mutations and queries - useProxyTargets, useProviderHealth queries - useSetProxyTarget, useResetCircuitBreaker mutations - useCircuitBreakerConfig query and mutation - Update queries.ts with provider health query key - Update mutations.ts to invalidate health on provider changes - Add CircuitBreakerConfig and ProviderHealth types * feat(ui): add auto-failover configuration UI and provider health display Add comprehensive UI for failover management: Components: - ProviderHealthBadge: Display provider health status with color coding - CircuitBreakerConfigPanel: Configure failure/success thresholds, timeout duration, and error rate limits - AutoFailoverConfigPanel: Manage proxy targets with drag-and-drop priority ordering and individual enable/disable controls - ProxyPanel: Integrate failover tabs for unified proxy management Provider enhancements: - ProviderCard: Show health badge and proxy target indicator - ProviderActions: Add "Set as Proxy Target" action - EditProviderDialog: Add is_proxy_target toggle - ProviderList: Support proxy target filtering mode Other: - Update App.tsx routing for settings integration - Update useProviderActions hook with proxy target mutation - Fix ProviderList tests for updated component API * fix(usage): stabilize date range to prevent infinite re-renders * feat(backend): add tool version check command Add get_tool_versions command to check local and latest versions of Claude, Codex, and Gemini CLI tools: - Detect local installed versions via command line execution - Fetch latest versions from npm registry (Claude, Gemini) and GitHub releases API (Codex) - Return comprehensive version info including error details for uninstalled tools - Register command in Tauri invoke handler * style(ui): format accordion component code style Apply consistent code formatting to accordion component: - Convert double quotes to semicolons at line endings - Adjust indentation to 2-space standard - Align with project code style conventions * refactor(providers): update provider card styling to use theme tokens Replace hardcoded color classes with semantic design tokens: - Use bg-card, border-border, text-card-foreground instead of glass-card - Replace gray/white color literals with muted/foreground tokens - Change proxy target indicator color from purple to green - Improve hover states with border-border-active - Ensure consistent dark mode support via CSS variables * refactor(proxy): simplify auto-failover config panel structure Restructure AutoFailoverConfigPanel for better integration: - Remove internal Card wrapper and expansion toggle (now handled by parent) - Extract enabled state to props for external control - Simplify loading state display - Clean up redundant CardHeader/CardContent wrappers - ProxyPanel: reduce complexity by delegating to parent components * feat(settings): enhance settings page with accordion layout and tool versions Major settings page improvements: AboutSection: - Add local tool version detection (Claude, Codex, Gemini) - Display installed vs latest version comparison with visual indicators - Show update availability badges and environment check cards SettingsPage: - Reorganize advanced settings into collapsible accordion sections - Add proxy control panel with inline status toggle - Integrate auto-failover configuration with accordion UI - Add database and cost calculation config sections DirectorySettings & WindowSettings: - Minor styling adjustments for consistency settings.ts API: - Add getToolVersions() wrapper for new backend command * refactor(usage): restructure usage dashboard components Comprehensive usage statistics panel refactoring: UsageDashboard: - Reorganize layout with improved section headers - Add better loading states and empty state handling ModelStatsTable & ProviderStatsTable: - Minor styling updates for consistency ModelTestConfigPanel & PricingConfigPanel: - Simplify component structure - Remove redundant Card wrappers - Improve form field organization RequestLogTable: - Enhance table layout with better column sizing - Improve pagination controls UsageSummaryCards: - Update card styling with semantic tokens - Better responsive grid layout UsageTrendChart: - Refine chart container styling - Improve legend and tooltip display * chore(deps): add accordion and animation dependencies Package updates: - Add @radix-ui/react-accordion for collapsible sections - Add cmdk for command palette support - Add framer-motion for enhanced animations Tailwind config: - Add accordion-up/accordion-down animations - Update darkMode config to support both selector and class - Reorganize color and keyframe definitions for clarity * style(app): update header and app switcher styling App.tsx: - Replace glass-header with explicit bg-background/80 backdrop-blur - Update navigation button container to use bg-muted AppSwitcher: - Replace hardcoded gray colors with semantic muted/foreground tokens - Ensure consistent dark mode support via CSS variables - Add group class for better hover state transitions
163 lines
4.1 KiB
TypeScript
163 lines
4.1 KiB
TypeScript
import {
|
|
BarChart3,
|
|
Check,
|
|
Copy,
|
|
Edit,
|
|
Loader2,
|
|
Play,
|
|
TestTube2,
|
|
Trash2,
|
|
RotateCcw,
|
|
} from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ProviderActionsProps {
|
|
isCurrent: boolean;
|
|
isTesting?: boolean;
|
|
onSwitch: () => void;
|
|
onEdit: () => void;
|
|
onDuplicate: () => void;
|
|
onTest?: () => void;
|
|
onConfigureUsage: () => void;
|
|
onDelete: () => void;
|
|
onResetCircuitBreaker?: () => void;
|
|
isProxyTarget?: boolean;
|
|
consecutiveFailures?: number;
|
|
}
|
|
|
|
export function ProviderActions({
|
|
isCurrent,
|
|
isTesting,
|
|
onSwitch,
|
|
onEdit,
|
|
onDuplicate,
|
|
onTest,
|
|
onConfigureUsage,
|
|
onDelete,
|
|
onResetCircuitBreaker,
|
|
isProxyTarget,
|
|
consecutiveFailures = 0,
|
|
}: ProviderActionsProps) {
|
|
const { t } = useTranslation();
|
|
const iconButtonClass = "h-8 w-8 p-1";
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5">
|
|
<Button
|
|
size="sm"
|
|
variant={isCurrent ? "secondary" : "default"}
|
|
onClick={onSwitch}
|
|
disabled={isCurrent}
|
|
className={cn(
|
|
"w-[4.5rem] px-2.5",
|
|
isCurrent &&
|
|
"bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
|
|
)}
|
|
>
|
|
{isCurrent ? (
|
|
<>
|
|
<Check className="h-4 w-4" />
|
|
{t("provider.inUse")}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Play className="h-4 w-4" />
|
|
{t("provider.enable")}
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={onEdit}
|
|
title={t("common.edit")}
|
|
className={iconButtonClass}
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={onDuplicate}
|
|
title={t("provider.duplicate")}
|
|
className={iconButtonClass}
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
|
|
{onTest && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={onTest}
|
|
disabled={isTesting}
|
|
title={t("modelTest.testProvider", "测试模型")}
|
|
className={iconButtonClass}
|
|
>
|
|
{isTesting ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<TestTube2 className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={onConfigureUsage}
|
|
title={t("provider.configureUsage")}
|
|
className={iconButtonClass}
|
|
>
|
|
<BarChart3 className="h-4 w-4" />
|
|
</Button>
|
|
|
|
{/* 重置熔断器按钮 - 代理目标启用时显示 */}
|
|
{onResetCircuitBreaker && isProxyTarget && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={onResetCircuitBreaker}
|
|
disabled={consecutiveFailures === 0}
|
|
title={
|
|
consecutiveFailures > 0
|
|
? t("provider.resetCircuitBreaker", {
|
|
defaultValue: "重置熔断器",
|
|
})
|
|
: t("provider.noFailures", {
|
|
defaultValue: "当前无失败记录",
|
|
})
|
|
}
|
|
className={cn(
|
|
iconButtonClass,
|
|
consecutiveFailures > 0 &&
|
|
"hover:text-orange-500 dark:hover:text-orange-400",
|
|
)}
|
|
>
|
|
<RotateCcw className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={isCurrent ? undefined : onDelete}
|
|
title={t("common.delete")}
|
|
className={cn(
|
|
iconButtonClass,
|
|
!isCurrent && "hover:text-red-500 dark:hover:text-red-400",
|
|
isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground",
|
|
)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|