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

feat: complete stage 4 cleanup and code formatting

Browse Source 
This commit completes stage 4 of the refactoring plan, focusing on cleanup
and optimization of the modernized codebase.

## Key Changes

### Code Cleanup
- Remove legacy `src/lib/styles.ts` (no longer needed)
- Remove old modal components (`ImportProgressModal.tsx`, `ProviderList.tsx`)
- Streamline `src/lib/tauri-api.ts` from 712 lines to 17 lines (-97.6%)
  - Remove global `window.api` pollution
  - Keep only event listeners (`tauriEvents.onProviderSwitched`)
  - All API calls now use modular `@/lib/api/*` layer

### Type System
- Clean up `src/vite-env.d.ts` (remove 156 lines of outdated types)
- Remove obsolete global type declarations
- All TypeScript checks pass with zero errors

### Code Formatting
- Format all source files with Prettier (82 files)
- Fix formatting issues in 15 files:
  - App.tsx and core components
  - MCP management components
  - Settings module components
  - Provider management components
  - UI components

### Documentation Updates
- Update `REFACTORING_CHECKLIST.md` with stage 4 progress
- Mark completed tasks in `REFACTORING_MASTER_PLAN.md`

## Impact

**Code Reduction:**
- Total: -1,753 lines, +384 lines (net -1,369 lines)
- tauri-api.ts: 712 → 17 lines (-97.6%)
- Removed styles.ts: -82 lines
- Removed vite-env.d.ts declarations: -156 lines

**Quality Improvements:**
- ✅ Zero TypeScript errors
- ✅ Zero TODO/FIXME comments
- ✅ 100% Prettier compliant
- ✅ Zero `window.api` references
- ✅ Fully modular API layer

## Testing
- [x] TypeScript compilation passes
- [x] Code formatting validated
- [x] No linting errors

Stage 4 completion: 100%
Ready for stage 5 (testing and bug fixes)
This commit is contained in:
Jason
2025-10-16 12:13:51 +08:00
parent 2b45af118f
commit f3e7412a14
46 changed files with 384 additions and 1753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/ImportProgressModal.tsx
View File

@@ -1,107 +0,0 @@
import { useEffect } from "react";
import { CheckCircle, Loader2, AlertCircle } from "lucide-react";
import { useTranslation } from "react-i18next";
interface ImportProgressModalProps {
status: "importing" | "success" | "error";
message?: string;
backupId?: string;
onComplete?: () => void;
onSuccess?: () => void;
}
export function ImportProgressModal({
status,
message,
backupId,
onComplete,
onSuccess,
}: ImportProgressModalProps) {
const { t } = useTranslation();
useEffect(() => {
if (status === "success") {
console.log(
"[ImportProgressModal] Success detected, starting 2 second countdown",
);
// 成功后等待2秒自动关闭并刷新数据
const timer = setTimeout(() => {
console.log(
"[ImportProgressModal] 2 seconds elapsed, calling callbacks...",
);
if (onSuccess) {
onSuccess();
}
if (onComplete) {
onComplete();
}
}, 2000);
return () => {
console.log("[ImportProgressModal] Cleanup timer");
clearTimeout(timer);
};
}
}, [status, onComplete, onSuccess]);
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center">
<div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" />
<div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-2xl p-8 max-w-md w-full mx-4">
<div className="flex flex-col items-center text-center">
{status === "importing" && (
<>
<Loader2 className="w-12 h-12 text-blue-500 animate-spin mb-4" />
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
{t("settings.importing")}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
{t("common.loading")}
</p>
</>
)}
{status === "success" && (
<>
<CheckCircle className="w-12 h-12 text-green-500 mb-4" />
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
{t("settings.importSuccess")}
</h3>
{backupId && (
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
{t("settings.backupId")}: {backupId}
</p>
)}
<p className="text-sm text-gray-600 dark:text-gray-400">
{t("settings.autoReload")}
</p>
</>
)}
{status === "error" && (
<>
<AlertCircle className="w-12 h-12 text-red-500 mb-4" />
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
{t("settings.importFailed")}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
{message || t("settings.configCorrupted")}
</p>
<button
onClick={() => {
if (onComplete) {
onComplete();
}
}}
className="mt-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
>
{t("common.close")}
</button>
</>
)}
</div>
</div>
</div>
);
}

2
src/components/ProviderForm.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Provider, ProviderCategory, CustomEndpoint } from "../types";
import { AppType } from "../lib/tauri-api";
import type { AppType } from "@/lib/api";
import {
updateCommonConfigSnippet,
hasCommonConfigSnippet,

15
src/components/ProviderForm/EndpointSpeedTest.tsx
View File

@@ -1,10 +1,9 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Zap, Loader2, Plus, X, AlertCircle, Save } from "lucide-react";
import { vscodeApi, type AppType } from "@/lib/api";
import { isLinux } from "../../lib/platform";
import type { AppType } from "../../lib/tauri-api";
export interface EndpointCandidate {
id?: string;
url: string;
@@ -94,7 +93,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
const loadCustomEndpoints = async () => {
try {
if (!providerId) return;
const customEndpoints = await window.api.getCustomEndpoints(
const customEndpoints = await vscodeApi.getCustomEndpoints(
appType,
providerId,
);
@@ -251,7 +250,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
// 保存到后端
try {
if (providerId) {
await window.api.addCustomEndpoint(appType, providerId, sanitized);
await vscodeApi.addCustomEndpoint(appType, providerId, sanitized);
}
// 更新本地状态
@@ -295,7 +294,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
// 如果是自定义端点，尝试从后端删除（无 providerId 则仅本地删除）
if (entry.isCustom && providerId) {
try {
await window.api.removeCustomEndpoint(appType, providerId, entry.url);
await vscodeApi.removeCustomEndpoint(appType, providerId, entry.url);
} catch (error) {
console.error(t("endpointTest.removeEndpointFailed"), error);
return;
@@ -322,7 +321,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
return;
}
if (typeof window === "undefined" || !window.api?.testApiEndpoints) {
if (typeof window === "undefined") {
setLastError(t("endpointTest.testUnavailable"));
return;
}
@@ -341,7 +340,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
);
try {
const results = await window.api.testApiEndpoints(urls, {
const results = await vscodeApi.testApiEndpoints(urls, {
timeoutSecs: appType === "codex" ? 12 : 8,
});
const resultMap = new Map(
@@ -400,7 +399,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
// 更新最后使用时间（对自定义端点）
const entry = entries.find((e) => e.url === url);
if (entry?.isCustom && providerId) {
await window.api.updateEndpointLastUsed(appType, providerId, url);
await vscodeApi.updateEndpointLastUsed(appType, providerId, url);
}
onChange(url);

418
src/components/ProviderList.tsx
View File

@@ -1,418 +0,0 @@
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Provider, UsageScript } from "../types";
import { AppType } from "../lib/tauri-api";
import { Play, Edit3, Trash2, CheckCircle2, Users, Check, BarChart3, GripVertical } from "lucide-react";
import { buttonStyles, badgeStyles, cn } from "../lib/styles";
import UsageFooter from "./UsageFooter";
import UsageScriptModal from "./UsageScriptModal";
import {
DndContext,
closestCenter,
KeyboardSensor,
PointerSensor,
useSensor,
useSensors,
DragEndEvent,
} from "@dnd-kit/core";
import {
arrayMove,
SortableContext,
sortableKeyboardCoordinates,
useSortable,
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
// 不再在列表中显示分类徽章，避免造成困惑
interface ProviderListProps {
providers: Record<string, Provider>;
currentProviderId: string;
onSwitch: (id: string) => void;
onDelete: (id: string) => void;
onEdit: (id: string) => void;
appType: AppType;
onNotify?: (
message: string,
type: "success" | "error",
duration?: number,
) => void;
onProvidersUpdated?: () => Promise<void>;
}
// Sortable Provider Item Component
interface SortableProviderItemProps {
provider: Provider;
isCurrent: boolean;
apiUrl: string;
onSwitch: (id: string) => void;
onEdit: (id: string) => void;
onDelete: (id: string) => void;
onOpenUsageModal: (id: string) => void;
onUrlClick: (url: string) => Promise<void>;
appType: AppType;
t: any;
}
const SortableProviderItem: React.FC<SortableProviderItemProps> = ({
provider,
isCurrent,
apiUrl,
onSwitch,
onEdit,
onDelete,
onOpenUsageModal,
onUrlClick,
appType,
t,
}) => {
const {
attributes,
listeners,
setNodeRef,
transform,
isDragging,
} = useSortable({
id: provider.id,
animateLayoutChanges: () => false, // Disable layout animations
});
const style: React.CSSProperties = {
transform: CSS.Transform.toString(transform),
transition: 'none', // No transitions at all
opacity: isDragging ? 0.5 : 1,
zIndex: isDragging ? 1000 : undefined,
};
return (
<div
ref={setNodeRef}
style={style}
className={cn(
// Base card styles without transitions that conflict with dragging
"bg-white rounded-lg border p-4 dark:bg-gray-900",
// Different border colors based on state
isCurrent
? "border-blue-500 shadow-sm bg-blue-50 dark:border-blue-400 dark:bg-blue-400/10"
: "border-gray-200 dark:border-gray-700",
// Hover effects only when not dragging
!isDragging && !isCurrent && "hover:border-gray-300 hover:shadow-sm dark:hover:border-gray-600",
// Shadow during drag
isDragging && "shadow-lg",
// Only apply transition when not dragging to prevent conflicts
!isDragging && "transition-[border-color,box-shadow] duration-200"
)}
>
<div className="flex items-center justify-between">
{/* Drag Handle */}
<div
{...attributes}
{...listeners}
className="cursor-grab active:cursor-grabbing p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded mr-2 transition-colors"
title={t("provider.dragToReorder") || "拖拽以重新排序"}
>
<GripVertical size={20} className="text-gray-400" />
</div>
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h3 className="font-medium text-gray-900 dark:text-gray-100">
{provider.name}
</h3>
<div
className={cn(
badgeStyles.success,
!isCurrent && "invisible",
)}
>
<CheckCircle2 size={12} />
{t("provider.currentlyUsing")}
</div>
</div>
<div className="flex items-center gap-2 text-sm">
{provider.websiteUrl ? (
<button
onClick={(e) => {
e.preventDefault();
onUrlClick(provider.websiteUrl!);
}}
className="inline-flex items-center gap-1 text-blue-500 dark:text-blue-400 hover:opacity-90 transition-colors"
title={t("providerForm.visitWebsite", {
url: provider.websiteUrl,
})}
>
{provider.websiteUrl}
</button>
) : (
<span
className="text-gray-500 dark:text-gray-400"
title={apiUrl}
>
{apiUrl}
</span>
)}
</div>
</div>
<div className="flex items-center gap-2 ml-4">
<button
onClick={() => onSwitch(provider.id)}
disabled={isCurrent}
className={cn(
"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors w-[90px] justify-center whitespace-nowrap",
isCurrent
? "bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500 cursor-not-allowed"
: "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
)}
>
{isCurrent ? <Check size={14} /> : <Play size={14} />}
{isCurrent ? t("provider.inUse") : t("provider.enable")}
</button>
<button
onClick={() => onEdit(provider.id)}
className={buttonStyles.icon}
title={t("provider.editProvider")}
>
<Edit3 size={16} />
</button>
<button
onClick={() => onOpenUsageModal(provider.id)}
className={buttonStyles.icon}
title="配置用量查询"
>
<BarChart3 size={16} />
</button>
<button
onClick={() => onDelete(provider.id)}
disabled={isCurrent}
className={cn(
buttonStyles.icon,
isCurrent
? "text-gray-400 cursor-not-allowed"
: "text-gray-500 hover:text-red-500 hover:bg-red-100 dark:text-gray-400 dark:hover:text-red-400 dark:hover:bg-red-500/10",
)}
title={t("provider.deleteProvider")}
>
<Trash2 size={16} />
</button>
</div>
</div>
<UsageFooter
providerId={provider.id}
appType={appType}
usageEnabled={provider.meta?.usage_script?.enabled || false}
/>
</div>
);
}
const ProviderList: React.FC<ProviderListProps> = ({
providers,
currentProviderId,
onSwitch,
onDelete,
onEdit,
appType,
onNotify,
onProvidersUpdated,
}) => {
const { t, i18n } = useTranslation();
const [usageModalProviderId, setUsageModalProviderId] = useState<string | null>(null);
// Drag and drop sensors
const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: {
distance: 8,
},
}),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
);
// 提取API地址（兼容不同供应商配置：Claude env / Codex TOML）
const getApiUrl = (provider: Provider): string => {
try {
const cfg = provider.settingsConfig;
// Claude/Anthropic: 从 env 中读取
if (cfg?.env?.ANTHROPIC_BASE_URL) {
return cfg.env.ANTHROPIC_BASE_URL;
}
// Codex: 从 TOML 配置中解析 base_url
if (typeof cfg?.config === "string" && cfg.config.includes("base_url")) {
// 支持单/双引号
const match = cfg.config.match(/base_url\s*=\s*(['"])([^'\"]+)\1/);
if (match && match[2]) return match[2];
}
return t("provider.notConfigured");
} catch {
return t("provider.configError");
}
};
const handleUrlClick = async (url: string) => {
try {
await window.api.openExternal(url);
} catch (error) {
console.error(t("console.openLinkFailed"), error);
onNotify?.(
`${t("console.openLinkFailed")}: ${String(error)}`,
"error",
4000,
);
}
};
// 列表页不再提供 Claude 插件按钮，统一在"设置"中控制
// 处理用量配置保存
const handleSaveUsageScript = async (providerId: string, script: UsageScript) => {
try {
const provider = providers[providerId];
const updatedProvider = {
...provider,
meta: {
...provider.meta,
usage_script: script,
},
};
await window.api.updateProvider(updatedProvider, appType);
onNotify?.("用量查询配置已保存", "success", 2000);
// 重新加载供应商列表,触发 UsageFooter 的 useEffect
if (onProvidersUpdated) {
await onProvidersUpdated();
}
} catch (error) {
console.error("保存用量配置失败:", error);
onNotify?.("保存失败", "error");
}
};
// Sort providers
const sortedProviders = React.useMemo(() => {
return Object.values(providers).sort((a, b) => {
// Priority 1: sortIndex
if (a.sortIndex !== undefined && b.sortIndex !== undefined) {
return a.sortIndex - b.sortIndex;
}
if (a.sortIndex !== undefined) return -1;
if (b.sortIndex !== undefined) return 1;
// Priority 2: createdAt
const timeA = a.createdAt || 0;
const timeB = b.createdAt || 0;
if (timeA !== 0 && timeB !== 0) return timeA - timeB;
if (timeA === 0 && timeB === 0) {
// Priority 3: name
const locale = i18n.language === "zh" ? "zh-CN" : "en-US";
return a.name.localeCompare(b.name, locale);
}
return timeA === 0 ? -1 : 1;
});
}, [providers, i18n.language]);
// Handle drag end - immediate refresh
const handleDragEnd = React.useCallback(async (event: DragEndEvent) => {
const { active, over } = event;
if (!over || active.id === over.id) return;
const oldIndex = sortedProviders.findIndex((p) => p.id === active.id);
const newIndex = sortedProviders.findIndex((p) => p.id === over.id);
if (oldIndex === -1 || newIndex === -1) return;
// Calculate new sort order
const reorderedProviders = arrayMove(sortedProviders, oldIndex, newIndex);
const updates = reorderedProviders.map((provider, index) => ({
id: provider.id,
sortIndex: index,
}));
try {
// Save to backend and refresh immediately
await window.api.updateProvidersSortOrder(updates, appType);
onProvidersUpdated?.();
// Update tray menu to reflect new order
await window.api.updateTrayMenu();
} catch (error) {
console.error("Failed to update sort order:", error);
onNotify?.(t("provider.sortUpdateFailed") || "排序更新失败", "error");
}
}, [sortedProviders, appType, onProvidersUpdated, onNotify, t]);
return (
<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-gray-100 rounded-full flex items-center justify-center">
<Users size={24} className="text-gray-400" />
</div>
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
{t("provider.noProviders")}
</h3>
<p className="text-gray-500 dark:text-gray-400 text-sm">
{t("provider.noProvidersDescription")}
</p>
</div>
) : (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
autoScroll={true}
>
<SortableContext
items={sortedProviders.map((p) => p.id)}
strategy={verticalListSortingStrategy}
>
<div className="space-y-3">
{sortedProviders.map((provider) => {
const isCurrent = provider.id === currentProviderId;
const apiUrl = getApiUrl(provider);
return (
<SortableProviderItem
key={provider.id}
provider={provider}
isCurrent={isCurrent}
apiUrl={apiUrl}
onSwitch={onSwitch}
onEdit={onEdit}
onDelete={onDelete}
onOpenUsageModal={setUsageModalProviderId}
onUrlClick={handleUrlClick}
appType={appType}
t={t}
/>
);
})}
</div>
</SortableContext>
</DndContext>
)}
{/* 用量配置模态框 */}
{usageModalProviderId && providers[usageModalProviderId] && (
<UsageScriptModal
provider={providers[usageModalProviderId]}
appType={appType!}
onClose={() => setUsageModalProviderId(null)}
onSave={(script) =>
handleSaveUsageScript(usageModalProviderId, script)
}
onNotify={onNotify}
/>
)}
</div>
);
};
export default ProviderList;

44
src/components/UsageFooter.tsx
View File

@@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef } from "react";
import { UsageResult, UsageData } from "../types";
import { AppType } from "../lib/tauri-api";
import { RefreshCw, AlertCircle } from "lucide-react";
import { usageApi, type AppType } from "@/lib/api";
import { UsageResult, UsageData } from "../types";
interface UsageFooterProps {
providerId: string;
@@ -18,7 +18,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
const [loading, setLoading] = useState(false);
// 记录上次请求的关键参数，防止重复请求
const lastFetchParamsRef = useRef<string>('');
const lastFetchParamsRef = useRef<string>("");
const fetchUsage = async () => {
// 防止并发请求
@@ -26,10 +26,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
setLoading(true);
try {
const result = await window.api.queryProviderUsage(
providerId,
appType
);
const result = await usageApi.query(providerId, appType);
setUsage(result);
} catch (error: any) {
console.error("查询用量失败:", error);
@@ -54,7 +51,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
}
} else {
// 如果禁用了，清空记录和数据
lastFetchParamsRef.current = '';
lastFetchParamsRef.current = "";
setUsage(null);
}
}, [providerId, usageEnabled, appType]);
@@ -120,7 +117,16 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
// 单个套餐数据展示组件
const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
const { planName, extra, isValid, invalidMessage, total, used, remaining, unit } = data;
const {
planName,
extra,
isValid,
invalidMessage,
total,
used,
remaining,
unit,
} = data;
// 判断套餐是否失效（isValid 为 false 或未定义时视为有效）
const isExpired = isValid === false;
@@ -128,7 +134,10 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
return (
<div className="flex items-center gap-3">
{/* 标题部分：25% */}
<div className="text-xs text-gray-500 dark:text-gray-400 min-w-0" style={{ width: "25%" }}>
<div
className="text-xs text-gray-500 dark:text-gray-400 min-w-0"
style={{ width: "25%" }}
>
{planName ? (
<span
className={`font-medium truncate block ${isExpired ? "text-red-500 dark:text-red-400" : ""}`}
@@ -142,7 +151,10 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
</div>
{/* 扩展字段：30% */}
<div className="text-xs text-gray-500 dark:text-gray-400 min-w-0 flex items-center gap-2" style={{ width: "30%" }}>
<div
className="text-xs text-gray-500 dark:text-gray-400 min-w-0 flex items-center gap-2"
style={{ width: "30%" }}
>
{extra && (
<span
className={`truncate ${isExpired ? "text-red-500 dark:text-red-400" : ""}`}
@@ -159,7 +171,10 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
</div>
{/* 用量信息：45% */}
<div className="flex items-center justify-end gap-2 text-xs flex-shrink-0" style={{ width: "45%" }}>
<div
className="flex items-center justify-end gap-2 text-xs flex-shrink-0"
style={{ width: "45%" }}
>
{/* 总额度 */}
{total !== undefined && (
<>
@@ -200,11 +215,12 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
</>
)}
{unit && <span className="text-gray-500 dark:text-gray-400">{unit}</span>}
{unit && (
<span className="text-gray-500 dark:text-gray-400">{unit}</span>
)}
</div>
</div>
);
};
export default UsageFooter;

67
src/components/UsageScriptModal.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { X, Play, Wand2 } from "lucide-react";
import { Provider, UsageScript } from "../types";
import { AppType } from "../lib/tauri-api";
import { usageApi, type AppType } from "@/lib/api";
import JsonEditor from "./JsonEditor";
import * as prettier from "prettier/standalone";
import * as parserBabel from "prettier/parser-babel";
@@ -15,7 +15,7 @@ interface UsageScriptModalProps {
onNotify?: (
message: string,
type: "success" | "error",
duration?: number
duration?: number,
) => void;
}
@@ -117,10 +117,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
const handleTest = async () => {
setTesting(true);
try {
const result = await window.api.queryProviderUsage(
provider.id,
appType
);
const result = await usageApi.query(provider.id, appType);
if (result.success && result.data && result.data.length > 0) {
// 显示所有套餐数据
const summary = result.data
@@ -230,7 +227,8 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
/>
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
支持变量: <code>{"{{apiKey}}"}</code>,{" "}
<code>{"{{baseUrl}}"}</code> | extractor 函数接收 API 响应的 JSON 对象
<code>{"{{baseUrl}}"}</code> | extractor 函数接收 API 响应的
JSON 对象
</p>
</div>
@@ -246,7 +244,10 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
max="30"
value={script.timeout || 10}
onChange={(e) =>
setScript({ ...script, timeout: parseInt(e.target.value) })
setScript({
...script,
timeout: parseInt(e.target.value),
})
}
className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
/>
@@ -260,7 +261,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
<div>
<strong>配置格式：</strong>
<pre className="mt-1 p-2 bg-white/50 dark:bg-black/20 rounded text-[10px] overflow-x-auto">
{`({
{`({
request: {
url: "{{baseUrl}}/api/usage",
method: "POST",
@@ -285,23 +286,49 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
<div>
<strong>extractor 返回格式（所有字段均为可选）：</strong>
<ul className="mt-1 space-y-0.5 ml-2">
<li>• <code>isValid</code>: 布尔值，套餐是否有效</li>
<li>• <code>invalidMessage</code>: 字符串，失效原因说明（当 isValid 为 false 时显示）</li>
<li>• <code>remaining</code>: 数字，剩余额度</li>
<li>• <code>unit</code>: 字符串，单位（如 "USD"）</li>
<li>• <code>planName</code>: 字符串，套餐名称</li>
<li>• <code>total</code>: 数字，总额度</li>
<li>• <code>used</code>: 数字，已用额度</li>
<li>• <code>extra</code>: 字符串，扩展字段，可自由补充需要展示的文本</li>
<li>
• <code>isValid</code>: 布尔值，套餐是否有效
</li>
<li>
• <code>invalidMessage</code>: 字符串，失效原因说明（当
isValid 为 false 时显示）
</li>
<li>
• <code>remaining</code>: 数字，剩余额度
</li>
<li>
• <code>unit</code>: 字符串，单位（如 "USD"）
</li>
<li>
• <code>planName</code>: 字符串，套餐名称
</li>
<li>
• <code>total</code>: 数字，总额度
</li>
<li>
• <code>used</code>: 数字，已用额度
</li>
<li>
• <code>extra</code>:
字符串，扩展字段，可自由补充需要展示的文本
</li>
</ul>
</div>
<div className="text-gray-600 dark:text-gray-400">
<strong>💡 提示：</strong>
<ul className="mt-1 space-y-0.5 ml-2">
<li>• 变量 <code>{"{{apiKey}}"}</code> 和 <code>{"{{baseUrl}}"}</code> 会自动替换</li>
<li>• extractor 函数在沙箱环境中执行，支持 ES2020+ 语法</li>
<li>• 整个配置必须用 <code>()</code> 包裹，形成对象字面量表达式</li>
<li>
• 变量 <code>{"{{apiKey}}"}</code> 和{" "}
<code>{"{{baseUrl}}"}</code> 会自动替换
</li>
<li>
• extractor 函数在沙箱环境中执行，支持 ES2020+ 语法
</li>
<li>
• 整个配置必须用 <code>()</code>{" "}
包裹，形成对象字面量表达式
</li>
</ul>
</div>
</div>

77
src/components/mcp/McpFormModal.tsx
View File

@@ -1,18 +1,27 @@
import React, { useMemo, useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { X, Save, AlertCircle, ChevronDown, ChevronUp, AlertTriangle } from "lucide-react";
import {
X,
Save,
AlertCircle,
ChevronDown,
ChevronUp,
AlertTriangle,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { mcpApi, type AppType } from "@/lib/api";
import { McpServer, McpServerSpec } from "../../types";
import {
mcpPresets,
getMcpPresetWithDescription,
} from "../../config/mcpPresets";
import { buttonStyles, inputStyles } from "../../lib/styles";
import McpWizardModal from "./McpWizardModal";
import {
extractErrorMessage,
translateMcpBackendError,
} from "../../utils/errorUtils";
import { AppType } from "../../lib/tauri-api";
import {
validateToml,
tomlToMcpServer,
@@ -125,10 +134,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
const syncTargetLabel =
appType === "claude" ? t("apps.codex") : t("apps.claude");
const otherAppType: AppType = appType === "claude" ? "codex" : "claude";
const syncCheckboxId = useMemo(
() => `sync-other-side-${appType}`,
[appType],
);
const syncCheckboxId = useMemo(() => `sync-other-side-${appType}`, [appType]);
// 检测另一侧是否有同名 MCP
useEffect(() => {
@@ -140,8 +146,10 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
}
try {
const otherConfig = await window.api.getMcpConfig(otherAppType);
const hasConflict = Object.keys(otherConfig.servers || {}).includes(currentId);
const otherConfig = await mcpApi.getConfig(otherAppType);
const hasConflict = Object.keys(otherConfig.servers || {}).includes(
currentId,
);
setOtherSideHasConflict(hasConflict);
} catch (error) {
console.error("检查另一侧 MCP 配置失败:", error);
@@ -562,8 +570,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
</span>
)}
</div>
<input
className={inputStyles.text}
<Input
type="text"
placeholder={t("mcp.form.titlePlaceholder")}
value={formId}
onChange={(e) => handleIdChange(e.target.value)}
@@ -576,8 +584,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{t("mcp.form.name")}
</label>
<input
className={inputStyles.text}
<Input
type="text"
placeholder={t("mcp.form.namePlaceholder")}
value={formName}
onChange={(e) => setFormName(e.target.value)}
@@ -608,8 +616,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{t("mcp.form.description")}
</label>
<input
className={inputStyles.text}
<Input
type="text"
placeholder={t("mcp.form.descriptionPlaceholder")}
value={formDescription}
onChange={(e) => setFormDescription(e.target.value)}
@@ -621,8 +629,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{t("mcp.form.tags")}
</label>
<input
className={inputStyles.text}
<Input
type="text"
placeholder={t("mcp.form.tagsPlaceholder")}
value={formTags}
onChange={(e) => setFormTags(e.target.value)}
@@ -634,8 +642,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{t("mcp.form.homepage")}
</label>
<input
className={inputStyles.text}
<Input
type="text"
placeholder={t("mcp.form.homepagePlaceholder")}
value={formHomepage}
onChange={(e) => setFormHomepage(e.target.value)}
@@ -647,8 +655,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{t("mcp.form.docs")}
</label>
<input
className={inputStyles.text}
<Input
type="text"
placeholder={t("mcp.form.docsPlaceholder")}
value={formDocs}
onChange={(e) => setFormDocs(e.target.value)}
@@ -673,8 +681,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
</button>
)}
</div>
<textarea
className={`${inputStyles.text} h-48 resize-none font-mono text-xs`}
<Textarea
className="h-48 resize-none font-mono text-xs"
placeholder={
useToml
? t("mcp.form.tomlPlaceholder")
@@ -707,7 +715,9 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
<label
htmlFor={syncCheckboxId}
className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none"
title={t("mcp.form.syncOtherSideHint", { target: syncTargetLabel })}
title={t("mcp.form.syncOtherSideHint", {
target: syncTargetLabel,
})}
>
{t("mcp.form.syncOtherSide", { target: syncTargetLabel })}
</label>
@@ -716,7 +726,9 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
<div className="flex items-center gap-1.5 text-amber-600 dark:text-amber-400">
<AlertTriangle size={14} />
<span className="text-xs font-medium">
{t("mcp.form.willOverwriteWarning", { target: syncTargetLabel })}
{t("mcp.form.willOverwriteWarning", {
target: syncTargetLabel,
})}
</span>
</div>
)}
@@ -724,16 +736,15 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
{/* 操作按钮 */}
<div className="flex items-center gap-3">
<button
onClick={onClose}
className="px-4 py-2 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-200 rounded-lg transition-colors text-sm font-medium"
>
<Button type="button" variant="ghost" size="sm" onClick={onClose}>
{t("common.cancel")}
</button>
<button
</Button>
<Button
type="button"
size="sm"
onClick={handleSubmit}
disabled={saving || (!isEditing && !!idError)}
className={`inline-flex items-center gap-2 ${buttonStyles.mcp}`}
className="bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
>
<Save size={16} />
{saving
@@ -741,7 +752,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
: isEditing
? t("common.save")
: t("common.add")}
</button>
</Button>
</div>
</div>
</div>

35
src/components/mcp/McpListItem.tsx
View File

@@ -1,9 +1,10 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Edit3, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { settingsApi } from "@/lib/api";
import { McpServer } from "../../types";
import { mcpPresets } from "../../config/mcpPresets";
import { cardStyles, buttonStyles, cn } from "../../lib/styles";
import McpToggle from "./McpToggle";
interface McpListItemProps {
@@ -44,14 +45,14 @@ const McpListItem: React.FC<McpListItemProps> = ({
const url = docsUrl || homepageUrl;
if (!url) return;
try {
await window.api.openExternal(url);
await settingsApi.openExternal(url);
} catch {
// ignore
}
};
return (
<div className={cn(cardStyles.interactive, "!p-4 h-16")}>
<div className="h-16 rounded-lg border border-border bg-card p-4 transition-[border-color,box-shadow] duration-200 hover:border-primary/40 hover:shadow-sm">
<div className="flex items-center gap-4 h-full">
{/* 左侧：Toggle 开关 */}
<div className="flex-shrink-0">
@@ -82,32 +83,36 @@ const McpListItem: React.FC<McpListItemProps> = ({
{/* 右侧：操作按钮 */}
<div className="flex items-center gap-2 flex-shrink-0">
{docsUrl && (
<button
<Button
type="button"
variant="ghost"
size="sm"
onClick={openDocs}
className={buttonStyles.ghost}
title={t("mcp.presets.docs")}
>
{t("mcp.presets.docs")}
</button>
</Button>
)}
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => onEdit(id)}
className={buttonStyles.icon}
title={t("common.edit")}
>
<Edit3 size={16} />
</button>
</Button>
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => onDelete(id)}
className={cn(
buttonStyles.icon,
"hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10",
)}
className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
title={t("common.delete")}
>
<Trash2 size={16} />
</button>
</Button>
</div>
</div>
</div>

40
src/components/mcp/McpPanel.tsx
View File

@@ -1,6 +1,8 @@
import React, { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { X, Plus, Server, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { mcpApi, type AppType } from "@/lib/api";
import { McpServer } from "../../types";
import McpListItem from "./McpListItem";
import McpFormModal from "./McpFormModal";
@@ -9,9 +11,6 @@ import {
extractErrorMessage,
translateMcpBackendError,
} from "../../utils/errorUtils";
// 预设相关逻辑已迁移到“新增 MCP”面板，列表此处无需引用
import { buttonStyles } from "../../lib/styles";
import { AppType } from "../../lib/tauri-api";
interface McpPanelProps {
onClose: () => void;
@@ -43,7 +42,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
const reload = async () => {
setLoading(true);
try {
const cfg = await window.api.getMcpConfig(appType);
const cfg = await mcpApi.getConfig(appType);
setServers(cfg.servers || {});
} finally {
setLoading(false);
@@ -55,9 +54,9 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
try {
// 初始化：仅从对应客户端导入已有 MCP，不做“预设落库”
if (appType === "claude") {
await window.api.importMcpFromClaude();
await mcpApi.importFromClaude();
} else if (appType === "codex") {
await window.api.importMcpFromCodex();
await mcpApi.importFromCodex();
}
} catch (e) {
console.warn("MCP 初始化导入失败（忽略继续）", e);
@@ -82,7 +81,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
try {
// 后台调用 API
await window.api.setMcpEnabled(appType, id, enabled);
await mcpApi.setEnabled(appType, id, enabled);
onNotify?.(
enabled ? t("mcp.msg.enabled") : t("mcp.msg.disabled"),
"success",
@@ -118,7 +117,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
message: t("mcp.confirm.deleteMessage", { id }),
onConfirm: async () => {
try {
await window.api.deleteMcpServerInConfig(appType, id);
await mcpApi.deleteServerInConfig(appType, id);
await reload();
setConfirmDialog(null);
onNotify?.(t("mcp.msg.deleted"), "success", 1500);
@@ -142,7 +141,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
) => {
try {
const payload: McpServer = { ...server, id };
await window.api.upsertMcpServerInConfig(appType, id, payload, {
await mcpApi.upsertServerInConfig(appType, id, payload, {
syncOtherSide: options?.syncOtherSide,
});
await reload();
@@ -197,19 +196,18 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
</h3>
<div className="flex items-center gap-3">
<button
<Button
type="button"
size="sm"
onClick={handleAdd}
className={`inline-flex items-center gap-2 ${buttonStyles.mcp}`}
className="bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
>
<Plus size={16} />
{t("mcp.add")}
</button>
<button
onClick={onClose}
className="p-1 text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
>
</Button>
<Button type="button" variant="ghost" size="icon" onClick={onClose}>
<X size={18} />
</button>
</Button>
</div>
</div>
@@ -272,13 +270,15 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
{/* Footer */}
<div className="flex-shrink-0 flex items-center justify-end p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
<button
<Button
type="button"
size="sm"
onClick={onClose}
className={`inline-flex items-center gap-2 ${buttonStyles.mcp}`}
className="bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
>
<Check size={16} />
{t("common.done")}
</button>
</Button>
</div>
</div>

7
src/components/mcp/McpWizardModal.tsx
View File

@@ -173,8 +173,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
setWizardTitle(title);
const resolvedType =
initialServer?.type ??
(initialServer?.url ? "http" : "stdio");
initialServer?.type ?? (initialServer?.url ? "http" : "stdio");
setWizardType(resolvedType);
@@ -203,7 +202,9 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
setWizardArgs(Array.isArray(argsValue) ? argsValue.join("\n") : "");
const envCandidate = initialServer?.env;
const env =
envCandidate && typeof envCandidate === "object" ? envCandidate : undefined;
envCandidate && typeof envCandidate === "object"
? envCandidate
: undefined;
setWizardEnv(
env
? Object.entries(env)

5
src/components/mode-toggle.tsx
View File

@@ -38,10 +38,7 @@ export function ModeToggle() {
{t("common.theme", { defaultValue: "主题" })}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={theme}
onValueChange={handleChange}
>
<DropdownMenuRadioGroup value={theme} onValueChange={handleChange}>
<DropdownMenuRadioItem value="light">
{t("common.lightMode", { defaultValue: "浅色" })}
</DropdownMenuRadioItem>

3
src/components/providers/ProviderCard.tsx
View File

@@ -92,7 +92,8 @@ export function ProviderCard({
isCurrent
? "border-primary/70 bg-primary/5"
: "border-border hover:border-primary/40",
dragHandleProps?.isDragging && "cursor-grabbing border-primary/60 shadow-lg",
dragHandleProps?.isDragging &&
"cursor-grabbing border-primary/60 shadow-lg",
)}
>
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">

9
src/components/providers/ProviderList.tsx
View File

@@ -1,8 +1,5 @@
import { CSS } from "@dnd-kit/utilities";
import {
DndContext,
closestCenter,
} from "@dnd-kit/core";
import { DndContext, closestCenter } from "@dnd-kit/core";
import {
SortableContext,
useSortable,
@@ -137,9 +134,7 @@ function SortableProviderCard({
onEdit={onEdit}
onDelete={onDelete}
onConfigureUsage={
onConfigureUsage
? (item) => onConfigureUsage(item)
: () => undefined
onConfigureUsage ? (item) => onConfigureUsage(item) : () => undefined
}
onOpenWebsite={onOpenWebsite}
dragHandleProps={{

15
src/components/providers/forms/ProviderForm.tsx
View File

@@ -14,10 +14,7 @@ import {
import { Input } from "@/components/ui/input";
import { useTheme } from "@/components/theme-provider";
import JsonEditor from "@/components/JsonEditor";
import {
providerSchema,
type ProviderFormData,
} from "@/lib/schemas/provider";
import { providerSchema, type ProviderFormData } from "@/lib/schemas/provider";
interface ProviderFormProps {
submitLabel: string;
@@ -83,10 +80,7 @@ export function ProviderForm({
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(handleSubmit)}
className="space-y-6"
>
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
<FormField
control={form.control}
name="name"
@@ -117,10 +111,7 @@ export function ProviderForm({
{t("provider.websiteUrl", { defaultValue: "官网链接" })}
</FormLabel>
<FormControl>
<Input
{...field}
placeholder="https://"
/>
<Input {...field} placeholder="https://" />
</FormControl>
<FormMessage />
</FormItem>

22
src/components/settings/AboutSection.tsx
View File

@@ -59,8 +59,8 @@ export function AboutSection({ isPortable }: AboutSectionProps) {
const displayVersion = targetVersion.startsWith("v")
? targetVersion
: targetVersion
? `v${targetVersion}`
: "";
? `v${targetVersion}`
: "";
if (!displayVersion) {
await settingsApi.openExternal(
@@ -108,7 +108,10 @@ export function AboutSection({ isPortable }: AboutSectionProps) {
try {
await settingsApi.checkUpdates();
} catch (fallbackError) {
console.error("[AboutSection] Failed to open fallback updater", fallbackError);
console.error(
"[AboutSection] Failed to open fallback updater",
fallbackError,
);
}
} finally {
setIsDownloading(false);
@@ -119,9 +122,7 @@ export function AboutSection({ isPortable }: AboutSectionProps) {
try {
const available = await checkUpdate();
if (!available) {
toast.success(
t("settings.upToDate", { defaultValue: "已是最新版本" }),
);
toast.success(t("settings.upToDate", { defaultValue: "已是最新版本" }));
}
} catch (error) {
console.error("[AboutSection] Check update failed", error);
@@ -131,14 +132,7 @@ export function AboutSection({ isPortable }: AboutSectionProps) {
}),
);
}
}, [
checkUpdate,
hasUpdate,
isPortable,
resetDismiss,
t,
updateHandle,
]);
}, [checkUpdate, hasUpdate, isPortable, resetDismiss, t, updateHandle]);
const displayVersion =
version ?? t("common.unknown", { defaultValue: "未知" });

5
src/components/settings/DirectorySettings.tsx
View File

@@ -106,7 +106,10 @@ function DirectoryInput({
onReset,
}: DirectoryInputProps) {
const { t } = useTranslation();
const displayValue = useMemo(() => value ?? resolvedValue ?? "", [value, resolvedValue]);
const displayValue = useMemo(
() => value ?? resolvedValue ?? "",
[value, resolvedValue],
);
return (
<div className="space-y-1.5">

4
src/components/settings/ImportExportSection.tsx
View File

@@ -156,7 +156,9 @@ function ImportStatusMessage({
if (status === "success") {
return (
<div className={`${baseClass} border-green-200 bg-green-100/70 text-green-700`}>
<div
className={`${baseClass} border-green-200 bg-green-100/70 text-green-700`}
>
<CheckCircle2 className="mt-0.5 h-4 w-4" />
<div className="space-y-1">
<p className="font-medium">{t("settings.importSuccess")}</p>

12
src/components/settings/LanguageSettings.tsx
View File

@@ -21,16 +21,10 @@ export function LanguageSettings({ value, onChange }: LanguageSettingsProps) {
</p>
</header>
<div className="inline-flex gap-1 rounded-md border border-border bg-background p-1">
<LanguageButton
active={value === "zh"}
onClick={() => onChange("zh")}
>
<LanguageButton active={value === "zh"} onClick={() => onChange("zh")}>
{t("settings.languageOptionChinese")}
</LanguageButton>
<LanguageButton
active={value === "en"}
onClick={() => onChange("en")}
>
<LanguageButton active={value === "en"} onClick={() => onChange("en")}>
{t("settings.languageOptionEnglish")}
</LanguageButton>
</div>
@@ -55,7 +49,7 @@ function LanguageButton({ active, onClick, children }: LanguageButtonProps) {
"min-w-[96px]",
active
? "shadow-sm"
: "text-muted-foreground hover:text-foreground hover:bg-muted"
: "text-muted-foreground hover:text-foreground hover:bg-muted",
)}
>
{children}

20
src/components/settings/SettingsDialog.tsx
View File

@@ -1,7 +1,13 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { Loader2, Save } from "lucide-react";
import { toast } from "sonner";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { settingsApi } from "@/lib/api";
@@ -84,7 +90,13 @@ export function SettingsDialog({
clearSelection();
resetStatus();
onOpenChange(false);
}, [acknowledgeRestart, clearSelection, onOpenChange, resetSettings, resetStatus]);
}, [
acknowledgeRestart,
clearSelection,
onOpenChange,
resetSettings,
resetStatus,
]);
const handleDialogChange = useCallback(
(nextOpen: boolean) => {
@@ -173,9 +185,7 @@ export function SettingsDialog({
<TabsTrigger value="advanced">
{t("settings.tabAdvanced", { defaultValue: "高级" })}
</TabsTrigger>
<TabsTrigger value="about">
{t("common.about")}
</TabsTrigger>
<TabsTrigger value="about">{t("common.about")}</TabsTrigger>
</TabsList>
<div className="flex-1 overflow-y-auto pr-1">

8
src/components/settings/WindowSettings.tsx
View File

@@ -13,9 +13,7 @@ export function WindowSettings({ settings, onChange }: WindowSettingsProps) {
return (
<section className="space-y-4">
<header className="space-y-1">
<h3 className="text-sm font-medium">
{t("settings.windowBehavior")}
</h3>
<h3 className="text-sm font-medium">{t("settings.windowBehavior")}</h3>
<p className="text-xs text-muted-foreground">
{t("settings.windowBehaviorHint", {
defaultValue: "配置窗口最小化与 Claude 插件联动策略。",
@@ -27,9 +25,7 @@ export function WindowSettings({ settings, onChange }: WindowSettingsProps) {
title={t("settings.minimizeToTray")}
description={t("settings.minimizeToTrayDescription")}
checked={settings.minimizeToTrayOnClose}
onCheckedChange={(value) =>
onChange({ minimizeToTrayOnClose: value })
}
onCheckedChange={(value) => onChange({ minimizeToTrayOnClose: value })}
/>
<ToggleRow

4
src/components/ui/button.tsx
View File

@@ -30,7 +30,7 @@ const buttonVariants = cva(
variant: "default",
size: "default",
},
}
},
);
export interface ButtonProps
@@ -49,7 +49,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
/>
);
}
},
);
Button.displayName = "Button";

10
src/components/ui/dialog.tsx
View File

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
className,
)}
{...props}
/>
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
ref={ref}
className={cn(
"fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
className,
)}
{...props}
>
@@ -57,7 +57,7 @@ const DialogHeader = ({
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
className,
)}
{...props}
/>
@@ -71,7 +71,7 @@ const DialogFooter = ({
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
className,
)}
{...props}
/>
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
className,
)}
{...props}
/>

25
src/components/ui/dropdown-menu.tsx
View File

@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
className={cn(
"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8",
className
className,
)}
{...props}
/>
@@ -41,7 +41,7 @@ const DropdownMenuSubContent = React.forwardRef<
ref={ref}
className={cn(
"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
className
className,
)}
{...props}
/>
@@ -59,7 +59,7 @@ const DropdownMenuContent = React.forwardRef<
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
className,
)}
{...props}
/>
@@ -78,7 +78,7 @@ const DropdownMenuItem = React.forwardRef<
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
className,
)}
{...props}
/>
@@ -93,7 +93,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
className,
)}
checked={checked}
{...props}
@@ -127,7 +127,7 @@ const DropdownMenuRadioItem = React.forwardRef<
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
className,
)}
{...props}
>
@@ -139,8 +139,7 @@ const DropdownMenuRadioItem = React.forwardRef<
{children}
</DropdownMenuPrimitive.RadioItem>
));
DropdownMenuRadioItem.displayName =
DropdownMenuPrimitive.RadioItem.displayName;
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
@@ -153,7 +152,7 @@ const DropdownMenuLabel = React.forwardRef<
className={cn(
"px-2 py-1.5 text-sm font-semibold text-muted-foreground",
inset && "pl-8",
className
className,
)}
{...props}
/>
@@ -170,15 +169,17 @@ const DropdownMenuSeparator = React.forwardRef<
{...props}
/>
));
DropdownMenuSeparator.displayName =
DropdownMenuPrimitive.Separator.displayName;
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
const DropdownMenuShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => (
<span
className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className,
)}
{...props}
/>
);

8
src/components/ui/form.tsx
View File

@@ -15,18 +15,18 @@ const Form = FormProvider;
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
name: TName;
};
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
{} as FormFieldContextValue,
);
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
@@ -61,7 +61,7 @@ const useFormField = () => {
};
const FormItemContext = React.createContext<{ id: string }>(
{} as { id: string }
{} as { id: string },
);
const FormItem = React.forwardRef<

4
src/components/ui/input.tsx
View File

@@ -10,13 +10,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
className,
)}
ref={ref}
{...props}
/>
);
}
},
);
Input.displayName = "Input";

2
src/components/ui/label.tsx
View File

@@ -10,7 +10,7 @@ const Label = React.forwardRef<
ref={ref}
className={cn(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
className
className,
)}
{...props}
/>

8
src/components/ui/select.tsx
View File

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
className,
)}
{...props}
>
@@ -38,7 +38,7 @@ const SelectContent = React.forwardRef<
ref={ref}
className={cn(
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
className,
)}
position={position}
{...props}
@@ -50,7 +50,7 @@ const SelectContent = React.forwardRef<
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
)}
>
{children}
@@ -83,7 +83,7 @@ const SelectItem = React.forwardRef<
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
className,
)}
{...props}
>

3
src/components/ui/sonner.tsx
View File

@@ -8,7 +8,8 @@ export function Toaster() {
theme="system"
toastOptions={{
classNames: {
toast: "group rounded-md border bg-background text-foreground shadow-lg",
toast:
"group rounded-md border bg-background text-foreground shadow-lg",
title: "text-sm font-semibold",
description: "text-sm text-muted-foreground",
closeButton:

4
src/components/ui/switch.tsx
View File

@@ -10,13 +10,13 @@ const Switch = React.forwardRef<
ref={ref}
className={cn(
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className
className,
)}
{...props}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
)}
/>
</SwitchPrimitives.Root>

6
src/components/ui/tabs.tsx
View File

@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
ref={ref}
className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
className
className,
)}
{...props}
/>
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
ref={ref}
className={cn(
"inline-flex min-w-[120px] items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=inactive]:opacity-60",
className
className,
)}
{...props}
/>
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
ref={ref}
className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className
className,
)}
{...props}
/>

4
src/components/ui/textarea.tsx
View File

@@ -9,13 +9,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
className,
)}
ref={ref}
{...props}
/>
);
}
},
);
Textarea.displayName = "Textarea";