mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-12 02:37:45 +08:00
feat(frontend): implement comprehensive API Settings Management Interface
Implement a complete API Management Interface for React frontend with split- panel layout, migrating all features from legacy JS frontend. New Features: - API Settings page with 5 tabs: Providers, Endpoints, Cache, Model Pools, CLI Settings - Provider Management: CRUD operations, multi-key rotation, health checks, test connection - Endpoint Management: CRUD operations, cache strategy configuration, enable/disable toggle - Cache Settings: Global configuration, statistics display, clear cache functionality - Model Pool Management: CRUD operations, auto-discovery feature, provider exclusion - CLI Settings Management: Provider-based and Direct modes, full CRUD support - Multi-Key Settings Modal: Manage API keys with rotation strategies and weights - Manage Models Modal: View and manage models per provider (LLM and Embedding) - Sync to CodexLens: Integration handler for provider configuration sync Technical Implementation: - Created 12 new React components in components/api-settings/ - Extended lib/api.ts with 460+ lines of API client functions - Created hooks/useApiSettings.ts with 772 lines of TanStack Query hooks - Added RadioGroup UI component for form selections - Implemented unified error handling with useNotifications across all operations - Complete i18n support (500+ keys in English and Chinese) - Route integration (/api-settings) and sidebar navigation Code Quality: - All acceptance criteria from plan.json verified - Code review passed with Gemini (all 7 IMPL tasks complete) - Follows existing patterns: Shadcn UI, TanStack Query, react-intl, Lucide icons
This commit is contained in:
catlog22
205
ccw/frontend/src/components/codexlens/SemanticInstallDialog.tsx
Normal file
205
ccw/frontend/src/components/codexlens/SemanticInstallDialog.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
// ========================================
|
||||
// CodexLens Semantic Install Dialog
|
||||
// ========================================
|
||||
// Dialog for installing semantic search dependencies with GPU mode selection
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import {
|
||||
Cpu,
|
||||
Zap,
|
||||
Monitor,
|
||||
CheckCircle2,
|
||||
AlertCircle,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/Dialog';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup';
|
||||
import { Label } from '@/components/ui/Label';
|
||||
import { Card, CardContent } from '@/components/ui/Card';
|
||||
import { useNotifications } from '@/hooks/useNotifications';
|
||||
import { useCodexLensMutations } from '@/hooks';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
type GpuMode = 'cpu' | 'cuda' | 'directml';
|
||||
|
||||
interface GpuModeOption {
|
||||
value: GpuMode;
|
||||
label: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
recommended?: boolean;
|
||||
}
|
||||
|
||||
interface SemanticInstallDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
export function SemanticInstallDialog({ open, onOpenChange, onSuccess }: SemanticInstallDialogProps) {
|
||||
const { formatMessage } = useIntl();
|
||||
const { success, error: showError } = useNotifications();
|
||||
const { installSemantic, isInstallingSemantic } = useCodexLensMutations();
|
||||
|
||||
const [selectedMode, setSelectedMode] = useState<GpuMode>('cpu');
|
||||
|
||||
const gpuModes: GpuModeOption[] = [
|
||||
{
|
||||
value: 'cpu',
|
||||
label: formatMessage({ id: 'codexlens.semantic.gpu.cpu' }),
|
||||
description: formatMessage({ id: 'codexlens.semantic.gpu.cpuDesc' }),
|
||||
icon: <Cpu className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
value: 'directml',
|
||||
label: formatMessage({ id: 'codexlens.semantic.gpu.directml' }),
|
||||
description: formatMessage({ id: 'codexlens.semantic.gpu.directmlDesc' }),
|
||||
icon: <Monitor className="w-5 h-5" />,
|
||||
recommended: true,
|
||||
},
|
||||
{
|
||||
value: 'cuda',
|
||||
label: formatMessage({ id: 'codexlens.semantic.gpu.cuda' }),
|
||||
description: formatMessage({ id: 'codexlens.semantic.gpu.cudaDesc' }),
|
||||
icon: <Zap className="w-5 h-5" />,
|
||||
},
|
||||
];
|
||||
|
||||
const handleInstall = async () => {
|
||||
try {
|
||||
const result = await installSemantic(selectedMode);
|
||||
if (result.success) {
|
||||
success(
|
||||
formatMessage({ id: 'codexlens.semantic.installSuccess' }),
|
||||
result.message || formatMessage({ id: 'codexlens.semantic.installSuccessDesc' }, { mode: selectedMode })
|
||||
);
|
||||
onSuccess?.();
|
||||
onOpenChange(false);
|
||||
} else {
|
||||
throw new Error(result.error || 'Installation failed');
|
||||
}
|
||||
} catch (err) {
|
||||
showError(
|
||||
formatMessage({ id: 'codexlens.semantic.installFailed' }),
|
||||
err instanceof Error ? err.message : formatMessage({ id: 'codexlens.semantic.unknownError' })
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Zap className="w-5 h-5 text-primary" />
|
||||
{formatMessage({ id: 'codexlens.semantic.installTitle' })}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{formatMessage({ id: 'codexlens.semantic.installDescription' })}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Info Card */}
|
||||
<Card className="bg-muted/50 border-muted">
|
||||
<CardContent className="p-4 flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-info mt-0.5 flex-shrink-0" />
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{formatMessage({ id: 'codexlens.semantic.installInfo' })}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* GPU Mode Selection */}
|
||||
<RadioGroup value={selectedMode} onValueChange={(v) => setSelectedMode(v as GpuMode)}>
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{gpuModes.map((mode) => (
|
||||
<Card
|
||||
key={mode.value}
|
||||
className={cn(
|
||||
"cursor-pointer transition-colors hover:bg-accent/50",
|
||||
selectedMode === mode.value && "border-primary bg-accent"
|
||||
)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<RadioGroupItem
|
||||
value={mode.value}
|
||||
id={`gpu-mode-${mode.value}`}
|
||||
className="mt-1"
|
||||
/>
|
||||
<div className="flex items-start gap-3 flex-1">
|
||||
<div className={cn(
|
||||
"p-2 rounded-lg",
|
||||
selectedMode === mode.value
|
||||
? "bg-primary/20 text-primary"
|
||||
: "bg-muted text-muted-foreground"
|
||||
)}>
|
||||
{mode.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label
|
||||
htmlFor={`gpu-mode-${mode.value}`}
|
||||
className="font-medium cursor-pointer"
|
||||
>
|
||||
{mode.label}
|
||||
</Label>
|
||||
{mode.recommended && (
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary">
|
||||
{formatMessage({ id: 'codexlens.semantic.recommended' })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{mode.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={isInstallingSemantic}
|
||||
>
|
||||
{formatMessage({ id: 'common.actions.cancel' })}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleInstall}
|
||||
disabled={isInstallingSemantic}
|
||||
>
|
||||
{isInstallingSemantic ? (
|
||||
<>
|
||||
<Zap className="w-4 h-4 mr-2 animate-pulse" />
|
||||
{formatMessage({ id: 'codexlens.semantic.installing' })}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle2 className="w-4 h-4 mr-2" />
|
||||
{formatMessage({ id: 'codexlens.semantic.install' })}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default SemanticInstallDialog;
|
||||
Reference in New Issue
Block a user