eb6948a562
- Add 45+ new translation keys for usage query and usage script features - Fix duplicate provider object in translation files that caused missing translations - Remove all hardcoded Chinese text and defaultValue fallbacks from components - Add proper translations for: * Usage footer (query status, plan usage display) * Usage script modal (script editor, validation, test controls) * Provider forms (basic fields, endpoints, model selectors) * Provider dialogs (add/edit hints and titles) Modified 16 files: - 2 translation files (zh.json, en.json) - 14 component files (removed defaultValue, added t() calls) All UI text now properly supports Chinese/English switching.
359 lines
12 KiB
TypeScript
359 lines
12 KiB
TypeScript
import React, { useState } from "react";
|
||
import { Play, Wand2 } from "lucide-react";
|
||
import { toast } from "sonner";
|
||
import { useTranslation } from "react-i18next";
|
||
import { Provider, UsageScript } from "../types";
|
||
import { usageApi, type AppType } from "@/lib/api";
|
||
import JsonEditor from "./JsonEditor";
|
||
import * as prettier from "prettier/standalone";
|
||
import * as parserBabel from "prettier/parser-babel";
|
||
import * as pluginEstree from "prettier/plugins/estree";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
} from "@/components/ui/dialog";
|
||
import { Button } from "@/components/ui/button";
|
||
|
||
interface UsageScriptModalProps {
|
||
provider: Provider;
|
||
appType: AppType;
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
onSave: (script: UsageScript) => void;
|
||
}
|
||
|
||
// 预设模板（JS 对象字面量格式）
|
||
const PRESET_TEMPLATES: Record<string, string> = {
|
||
通用模板: `({
|
||
request: {
|
||
url: "{{baseUrl}}/user/balance",
|
||
method: "GET",
|
||
headers: {
|
||
"Authorization": "Bearer {{apiKey}}",
|
||
"User-Agent": "cc-switch/1.0"
|
||
}
|
||
},
|
||
extractor: function(response) {
|
||
return {
|
||
isValid: response.is_active || true,
|
||
remaining: response.balance,
|
||
unit: "USD"
|
||
};
|
||
}
|
||
})`,
|
||
|
||
NewAPI: `({
|
||
request: {
|
||
url: "{{baseUrl}}/api/usage/token",
|
||
method: "GET",
|
||
headers: {
|
||
Authorization: "Bearer {{apiKey}}",
|
||
},
|
||
},
|
||
extractor: function (response) {
|
||
if (response.code) {
|
||
if (response.data.unlimited_quota) {
|
||
return {
|
||
planName: response.data.name,
|
||
total: -1,
|
||
used: response.data.total_used / 500000,
|
||
unit: "USD",
|
||
};
|
||
}
|
||
return {
|
||
isValid: true,
|
||
planName: response.data.name,
|
||
total: response.data.total_granted / 500000,
|
||
used: response.data.total_used / 500000,
|
||
remaining: response.data.total_available / 500000,
|
||
unit: "USD",
|
||
};
|
||
}
|
||
if (response.error) {
|
||
return {
|
||
isValid: false,
|
||
invalidMessage: response.error.message,
|
||
};
|
||
}
|
||
},
|
||
})`,
|
||
};
|
||
|
||
const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
|
||
provider,
|
||
appType,
|
||
isOpen,
|
||
onClose,
|
||
onSave,
|
||
}) => {
|
||
const { t } = useTranslation();
|
||
const [script, setScript] = useState<UsageScript>(() => {
|
||
return (
|
||
provider.meta?.usage_script || {
|
||
enabled: false,
|
||
language: "javascript",
|
||
code: PRESET_TEMPLATES[t("usageScript.presetTemplate") === "预设模板" ? "通用模板" : "General"],
|
||
timeout: 10,
|
||
}
|
||
);
|
||
});
|
||
|
||
const [testing, setTesting] = useState(false);
|
||
|
||
const handleSave = () => {
|
||
// 验证脚本格式
|
||
if (script.enabled && !script.code.trim()) {
|
||
toast.error(t("usageScript.scriptEmpty"));
|
||
return;
|
||
}
|
||
|
||
// 基本的 JS 语法检查（检查是否包含 return 语句）
|
||
if (script.enabled && !script.code.includes("return")) {
|
||
toast.error(t("usageScript.mustHaveReturn"), { duration: 5000 });
|
||
return;
|
||
}
|
||
|
||
onSave(script);
|
||
onClose();
|
||
};
|
||
|
||
const handleTest = async () => {
|
||
setTesting(true);
|
||
try {
|
||
const result = await usageApi.query(provider.id, appType);
|
||
if (result.success && result.data && result.data.length > 0) {
|
||
// 显示所有套餐数据
|
||
const summary = result.data
|
||
.map((plan) => {
|
||
const planInfo = plan.planName ? `[${plan.planName}]` : "";
|
||
return `${planInfo} ${t("usage.remaining")} ${plan.remaining} ${plan.unit}`;
|
||
})
|
||
.join(", ");
|
||
toast.success(`${t("usageScript.testSuccess")}${summary}`, { duration: 3000 });
|
||
} else {
|
||
toast.error(`${t("usageScript.testFailed")}: ${result.error || t("endpointTest.noResult")}`, {
|
||
duration: 5000,
|
||
});
|
||
}
|
||
} catch (error: any) {
|
||
toast.error(`${t("usageScript.testFailed")}: ${error?.message || t("common.unknown")}`, {
|
||
duration: 5000,
|
||
});
|
||
} finally {
|
||
setTesting(false);
|
||
}
|
||
};
|
||
|
||
const handleFormat = async () => {
|
||
try {
|
||
const formatted = await prettier.format(script.code, {
|
||
parser: "babel",
|
||
plugins: [parserBabel as any, pluginEstree as any],
|
||
semi: true,
|
||
singleQuote: false,
|
||
tabWidth: 2,
|
||
printWidth: 80,
|
||
});
|
||
setScript({ ...script, code: formatted.trim() });
|
||
toast.success(t("usageScript.formatSuccess"), { duration: 1000 });
|
||
} catch (error: any) {
|
||
toast.error(`${t("usageScript.formatFailed")}: ${error?.message || t("jsonEditor.invalidJson")}`, {
|
||
duration: 3000,
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleUsePreset = (presetName: string) => {
|
||
const preset = PRESET_TEMPLATES[presetName];
|
||
if (preset) {
|
||
setScript({ ...script, code: preset });
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||
<DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
|
||
<DialogHeader>
|
||
<DialogTitle>{t("usageScript.title")} - {provider.name}</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
{/* Content - Scrollable */}
|
||
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
|
||
{/* 启用开关 */}
|
||
<label className="flex items-center gap-2 cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
checked={script.enabled}
|
||
onChange={(e) =>
|
||
setScript({ ...script, enabled: e.target.checked })
|
||
}
|
||
className="w-4 h-4"
|
||
/>
|
||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||
{t("usageScript.enableUsageQuery")}
|
||
</span>
|
||
</label>
|
||
|
||
{script.enabled && (
|
||
<>
|
||
{/* 预设模板选择 */}
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2 text-gray-900 dark:text-gray-100">
|
||
{t("usageScript.presetTemplate")}
|
||
</label>
|
||
<div className="flex gap-2">
|
||
{Object.keys(PRESET_TEMPLATES).map((name) => (
|
||
<button
|
||
key={name}
|
||
onClick={() => handleUsePreset(name)}
|
||
className="px-3 py-1.5 text-xs bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors"
|
||
>
|
||
{name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 脚本编辑器 */}
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2 text-gray-900 dark:text-gray-100">
|
||
{t("usageScript.queryScript")}
|
||
</label>
|
||
<JsonEditor
|
||
value={script.code}
|
||
onChange={(code) => setScript({ ...script, code })}
|
||
height="300px"
|
||
language="javascript"
|
||
/>
|
||
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||
{t("usageScript.variablesHint", {
|
||
apiKey: "{{apiKey}}",
|
||
baseUrl: "{{baseUrl}}"
|
||
})}
|
||
</p>
|
||
</div>
|
||
|
||
{/* 配置选项 */}
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<label className="block">
|
||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||
{t("usageScript.timeoutSeconds")}
|
||
</span>
|
||
<input
|
||
type="number"
|
||
min="2"
|
||
max="30"
|
||
value={script.timeout || 10}
|
||
onChange={(e) =>
|
||
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"
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
{/* 脚本说明 */}
|
||
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm text-gray-700 dark:text-gray-300">
|
||
<h4 className="font-medium mb-2">{t("usageScript.scriptHelp")}</h4>
|
||
<div className="space-y-3 text-xs">
|
||
<div>
|
||
<strong>{t("usageScript.configFormat")}</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",
|
||
headers: {
|
||
"Authorization": "Bearer {{apiKey}}",
|
||
"User-Agent": "cc-switch/1.0"
|
||
},
|
||
body: JSON.stringify({ key: "value" }) // 可选
|
||
},
|
||
extractor: function(response) {
|
||
// response 是 API 返回的 JSON 数据
|
||
return {
|
||
isValid: !response.error,
|
||
remaining: response.balance,
|
||
unit: "USD"
|
||
};
|
||
}
|
||
})`}
|
||
</pre>
|
||
</div>
|
||
|
||
<div>
|
||
<strong>{t("usageScript.extractorFormat")}</strong>
|
||
<ul className="mt-1 space-y-0.5 ml-2">
|
||
<li>{t("usageScript.fieldIsValid")}</li>
|
||
<li>{t("usageScript.fieldInvalidMessage")}</li>
|
||
<li>{t("usageScript.fieldRemaining")}</li>
|
||
<li>{t("usageScript.fieldUnit")}</li>
|
||
<li>{t("usageScript.fieldPlanName")}</li>
|
||
<li>{t("usageScript.fieldTotal")}</li>
|
||
<li>{t("usageScript.fieldUsed")}</li>
|
||
<li>{t("usageScript.fieldExtra")}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="text-gray-600 dark:text-gray-400">
|
||
<strong>{t("usageScript.tips")}</strong>
|
||
<ul className="mt-1 space-y-0.5 ml-2">
|
||
<li>{t("usageScript.tip1", { apiKey: "{{apiKey}}", baseUrl: "{{baseUrl}}" })}</li>
|
||
<li>{t("usageScript.tip2")}</li>
|
||
<li>{t("usageScript.tip3")}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<DialogFooter className="flex-col sm:flex-row sm:justify-between gap-3 pt-4">
|
||
{/* Left side - Test and Format buttons */}
|
||
<div className="flex gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={handleTest}
|
||
disabled={!script.enabled || testing}
|
||
>
|
||
<Play size={14} />
|
||
{testing ? t("usageScript.testing") : t("usageScript.testScript")}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={handleFormat}
|
||
disabled={!script.enabled}
|
||
title={t("usageScript.format")}
|
||
>
|
||
<Wand2 size={14} />
|
||
{t("usageScript.format")}
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Right side - Cancel and Save buttons */}
|
||
<div className="flex gap-2">
|
||
<Button variant="ghost" size="sm" onClick={onClose}>
|
||
{t("common.cancel")}
|
||
</Button>
|
||
<Button variant="default" size="sm" onClick={handleSave}>
|
||
{t("usageScript.saveConfig")}
|
||
</Button>
|
||
</div>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
export default UsageScriptModal;
|