03af3600b0
Comprehensive UI polish across multiple components to enhance visual design, improve user experience, and maintain consistency. UsageScriptModal Component (1302 lines refactored): - Complete layout overhaul for better usability - Improved script editor with syntax highlighting - Better template selection interface - Enhanced test/preview panels with clearer separation - Improved error feedback and validation messages - Better modal sizing and responsiveness - Cleaner tab navigation between sections - Enhanced code formatting and readability - Improved loading states for async operations - Better integration with parent components MCP Components: - McpFormModal (42 lines): * Streamlined form layout * Better server type selection (stdio/http) * Improved field grouping and labels * Enhanced validation feedback - UnifiedMcpPanel (14 lines): * Minor layout adjustments * Better list item spacing * Improved server status indicators * Enhanced action button placement Provider Components: - ProviderCard (11 lines): * Refined card layout and spacing * Better visual hierarchy * Improved badge placement * Enhanced hover effects - ProviderList (5 lines): * Minor grid layout adjustments * Better drag-and-drop visual feedback - GeminiConfigSections (4 lines): * Field label alignment * Improved spacing consistency Editor & Footer Components: - JsonEditor (13 lines): * Better editor height management * Improved error display * Enhanced syntax highlighting - UsageFooter (10 lines): * Refined footer layout * Better quota display * Improved refresh button placement Settings & Environment: - ImportExportSection (24 lines): * Better button layout * Improved action grouping * Enhanced visual feedback - EnvWarningBanner (4 lines): * Refined alert styling * Better dismiss button placement Global Styles (index.css): - Added 11 lines of utility classes - Improved transition timing - Better focus indicators - Enhanced scrollbar styling - Refined spacing utilities Design Improvements: - Consistent spacing using design tokens - Unified color palette application - Better typography hierarchy - Improved shadow system for depth - Enhanced interactive states (hover, active, focus) - Better border radius consistency - Refined animation timings Accessibility: - Improved focus indicators - Better keyboard navigation - Enhanced screen reader support - Improved color contrast ratios Code Quality: - Net increase of 68 lines due to UsageScriptModal improvements - Better component organization - Cleaner style application - Reduced style duplication These visual refinements create a more polished and professional interface while maintaining excellent usability and accessibility standards across all components.
801 lines
27 KiB
TypeScript
801 lines
27 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Play, Wand2, Eye, EyeOff, Save } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Provider, UsageScript } from "@/types";
|
|
import { usageApi, type AppId } 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 { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface UsageScriptModalProps {
|
|
provider: Provider;
|
|
appId: AppId;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSave: (script: UsageScript) => void;
|
|
}
|
|
|
|
// 预设模板键名（用于国际化）
|
|
const TEMPLATE_KEYS = {
|
|
CUSTOM: "custom",
|
|
GENERAL: "general",
|
|
NEW_API: "newapi",
|
|
} as const;
|
|
|
|
// 生成预设模板的函数（支持国际化）
|
|
const generatePresetTemplates = (
|
|
t: (key: string) => string,
|
|
): Record<string, string> => ({
|
|
[TEMPLATE_KEYS.CUSTOM]: `({
|
|
request: {
|
|
url: "",
|
|
method: "GET",
|
|
headers: {}
|
|
},
|
|
extractor: function(response) {
|
|
return {
|
|
remaining: 0,
|
|
unit: "USD"
|
|
};
|
|
}
|
|
})`,
|
|
|
|
[TEMPLATE_KEYS.GENERAL]: `({
|
|
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"
|
|
};
|
|
}
|
|
})`,
|
|
|
|
[TEMPLATE_KEYS.NEW_API]: `({
|
|
request: {
|
|
url: "{{baseUrl}}/api/user/self",
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"Authorization": "Bearer {{accessToken}}",
|
|
"New-Api-User": "{{userId}}"
|
|
},
|
|
},
|
|
extractor: function (response) {
|
|
if (response.success && response.data) {
|
|
return {
|
|
planName: response.data.group || "${t("usageScript.defaultPlan")}",
|
|
remaining: response.data.quota / 500000,
|
|
used: response.data.used_quota / 500000,
|
|
total: (response.data.quota + response.data.used_quota) / 500000,
|
|
unit: "USD",
|
|
};
|
|
}
|
|
return {
|
|
isValid: false,
|
|
invalidMessage: response.message || "${t("usageScript.queryFailedMessage")}"
|
|
};
|
|
},
|
|
})`,
|
|
});
|
|
|
|
// 模板名称国际化键映射
|
|
const TEMPLATE_NAME_KEYS: Record<string, string> = {
|
|
[TEMPLATE_KEYS.CUSTOM]: "usageScript.templateCustom",
|
|
[TEMPLATE_KEYS.GENERAL]: "usageScript.templateGeneral",
|
|
[TEMPLATE_KEYS.NEW_API]: "usageScript.templateNewAPI",
|
|
};
|
|
|
|
const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
|
|
provider,
|
|
appId,
|
|
isOpen,
|
|
onClose,
|
|
onSave,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
// 生成带国际化的预设模板
|
|
const PRESET_TEMPLATES = generatePresetTemplates(t);
|
|
|
|
const [script, setScript] = useState<UsageScript>(() => {
|
|
return (
|
|
provider.meta?.usage_script || {
|
|
enabled: false,
|
|
language: "javascript",
|
|
code: PRESET_TEMPLATES[TEMPLATE_KEYS.GENERAL],
|
|
timeout: 10,
|
|
}
|
|
);
|
|
});
|
|
|
|
const [testing, setTesting] = useState(false);
|
|
|
|
// 🔧 失焦时的验证（严格）- 仅确保有效整数
|
|
const validateTimeout = (value: string): number => {
|
|
const num = Number(value);
|
|
if (isNaN(num) || value.trim() === "") {
|
|
return 10;
|
|
}
|
|
if (!Number.isInteger(num)) {
|
|
toast.warning(
|
|
t("usageScript.timeoutMustBeInteger") || "超时时间必须为整数",
|
|
);
|
|
}
|
|
if (num < 0) {
|
|
toast.error(
|
|
t("usageScript.timeoutCannotBeNegative") || "超时时间不能为负数",
|
|
);
|
|
return 10;
|
|
}
|
|
return Math.floor(num);
|
|
};
|
|
|
|
// 🔧 失焦时的验证（严格）- 自动查询间隔
|
|
const validateAndClampInterval = (value: string): number => {
|
|
const num = Number(value);
|
|
if (isNaN(num) || value.trim() === "") {
|
|
return 0;
|
|
}
|
|
if (!Number.isInteger(num)) {
|
|
toast.warning(
|
|
t("usageScript.intervalMustBeInteger") || "自动查询间隔必须为整数",
|
|
);
|
|
}
|
|
if (num < 0) {
|
|
toast.error(
|
|
t("usageScript.intervalCannotBeNegative") || "自动查询间隔不能为负数",
|
|
);
|
|
return 0;
|
|
}
|
|
const clamped = Math.max(0, Math.min(1440, Math.floor(num)));
|
|
if (clamped !== num && num > 0) {
|
|
toast.info(
|
|
t("usageScript.intervalAdjusted", { value: clamped }) ||
|
|
`自动查询间隔已调整为 ${clamped} 分钟`,
|
|
);
|
|
}
|
|
return clamped;
|
|
};
|
|
|
|
const [selectedTemplate, setSelectedTemplate] = useState<string | null>(
|
|
() => {
|
|
const existingScript = provider.meta?.usage_script;
|
|
if (existingScript?.accessToken || existingScript?.userId) {
|
|
return TEMPLATE_KEYS.NEW_API;
|
|
}
|
|
return null;
|
|
},
|
|
);
|
|
|
|
const [showApiKey, setShowApiKey] = useState(false);
|
|
const [showAccessToken, setShowAccessToken] = useState(false);
|
|
|
|
const handleSave = () => {
|
|
if (script.enabled && !script.code.trim()) {
|
|
toast.error(t("usageScript.scriptEmpty"));
|
|
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.testScript(
|
|
provider.id,
|
|
appId,
|
|
script.code,
|
|
script.timeout,
|
|
script.apiKey,
|
|
script.baseUrl,
|
|
script.accessToken,
|
|
script.userId,
|
|
);
|
|
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) {
|
|
if (presetName === TEMPLATE_KEYS.CUSTOM) {
|
|
setScript({
|
|
...script,
|
|
code: preset,
|
|
apiKey: undefined,
|
|
baseUrl: undefined,
|
|
accessToken: undefined,
|
|
userId: undefined,
|
|
});
|
|
} else if (presetName === TEMPLATE_KEYS.GENERAL) {
|
|
setScript({
|
|
...script,
|
|
code: preset,
|
|
accessToken: undefined,
|
|
userId: undefined,
|
|
});
|
|
} else if (presetName === TEMPLATE_KEYS.NEW_API) {
|
|
setScript({
|
|
...script,
|
|
code: preset,
|
|
apiKey: undefined,
|
|
});
|
|
}
|
|
setSelectedTemplate(presetName);
|
|
}
|
|
};
|
|
|
|
const shouldShowCredentialsConfig =
|
|
selectedTemplate === TEMPLATE_KEYS.GENERAL ||
|
|
selectedTemplate === TEMPLATE_KEYS.NEW_API;
|
|
|
|
const footer = (
|
|
<>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={handleTest}
|
|
disabled={!script.enabled || testing}
|
|
>
|
|
<Play size={14} className="mr-1" />
|
|
{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} className="mr-1" />
|
|
{t("usageScript.format")}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onClose}
|
|
className="border-border/20 hover:bg-accent hover:text-accent-foreground"
|
|
>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
<Button
|
|
onClick={handleSave}
|
|
className="bg-primary text-primary-foreground hover:bg-primary/90"
|
|
>
|
|
<Save size={16} className="mr-2" />
|
|
{t("usageScript.saveConfig")}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<FullScreenPanel
|
|
isOpen={isOpen}
|
|
title={`${t("usageScript.title")} - ${provider.name}`}
|
|
onClose={onClose}
|
|
footer={footer}
|
|
>
|
|
<div className="rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm flex items-center justify-between gap-4">
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium leading-none text-foreground">
|
|
{t("usageScript.enableUsageQuery")}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{t("usageScript.autoQueryIntervalHint")}
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={script.enabled}
|
|
onCheckedChange={(checked) =>
|
|
setScript({ ...script, enabled: checked })
|
|
}
|
|
aria-label={t("usageScript.enableUsageQuery")}
|
|
/>
|
|
</div>
|
|
|
|
{script.enabled && (
|
|
<div className="space-y-6">
|
|
{/* 预设模板选择 */}
|
|
<div className="space-y-4 rounded-xl border border-border-default bg-card p-4 shadow-sm">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<Label className="text-base font-medium">
|
|
{t("usageScript.presetTemplate")}
|
|
</Label>
|
|
<span className="text-xs text-muted-foreground">
|
|
{t("usageScript.variablesHint")}
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-2 flex-wrap">
|
|
{Object.keys(PRESET_TEMPLATES).map((name) => {
|
|
const isSelected = selectedTemplate === name;
|
|
return (
|
|
<Button
|
|
key={name}
|
|
type="button"
|
|
variant={isSelected ? "default" : "outline"}
|
|
size="sm"
|
|
className={cn(
|
|
"rounded-lg border",
|
|
isSelected
|
|
? "shadow-sm"
|
|
: "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground",
|
|
)}
|
|
onClick={() => handleUsePreset(name)}
|
|
>
|
|
{t(TEMPLATE_NAME_KEYS[name])}
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* 凭证配置 */}
|
|
{shouldShowCredentialsConfig && (
|
|
<div className="space-y-4">
|
|
<h4 className="text-sm font-medium text-foreground">
|
|
{t("usageScript.credentialsConfig")}
|
|
</h4>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{selectedTemplate === TEMPLATE_KEYS.GENERAL && (
|
|
<>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-api-key">API Key</Label>
|
|
<div className="relative">
|
|
<Input
|
|
id="usage-api-key"
|
|
type={showApiKey ? "text" : "password"}
|
|
value={script.apiKey || ""}
|
|
onChange={(e) =>
|
|
setScript({ ...script, apiKey: e.target.value })
|
|
}
|
|
placeholder="sk-xxxxx"
|
|
autoComplete="off"
|
|
className="bg-card border-border-default"
|
|
/>
|
|
{script.apiKey && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowApiKey(!showApiKey)}
|
|
className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors"
|
|
aria-label={
|
|
showApiKey
|
|
? t("apiKeyInput.hide")
|
|
: t("apiKeyInput.show")
|
|
}
|
|
>
|
|
{showApiKey ? (
|
|
<EyeOff size={16} />
|
|
) : (
|
|
<Eye size={16} />
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-base-url">Base URL</Label>
|
|
<Input
|
|
id="usage-base-url"
|
|
type="text"
|
|
value={script.baseUrl || ""}
|
|
onChange={(e) =>
|
|
setScript({ ...script, baseUrl: e.target.value })
|
|
}
|
|
placeholder="https://api.example.com"
|
|
autoComplete="off"
|
|
className="bg-card border-border-default"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{selectedTemplate === TEMPLATE_KEYS.NEW_API && (
|
|
<>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-newapi-base-url">Base URL</Label>
|
|
<Input
|
|
id="usage-newapi-base-url"
|
|
type="text"
|
|
value={script.baseUrl || ""}
|
|
onChange={(e) =>
|
|
setScript({ ...script, baseUrl: e.target.value })
|
|
}
|
|
placeholder="https://api.newapi.com"
|
|
autoComplete="off"
|
|
className="bg-card border-border-default"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-access-token">
|
|
{t("usageScript.accessToken")}
|
|
</Label>
|
|
<div className="relative">
|
|
<Input
|
|
id="usage-access-token"
|
|
type={showAccessToken ? "text" : "password"}
|
|
value={script.accessToken || ""}
|
|
onChange={(e) =>
|
|
setScript({
|
|
...script,
|
|
accessToken: e.target.value,
|
|
})
|
|
}
|
|
placeholder={t(
|
|
"usageScript.accessTokenPlaceholder",
|
|
)}
|
|
autoComplete="off"
|
|
className="bg-card border-border-default"
|
|
/>
|
|
{script.accessToken && (
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
setShowAccessToken(!showAccessToken)
|
|
}
|
|
className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors"
|
|
aria-label={
|
|
showAccessToken
|
|
? t("apiKeyInput.hide")
|
|
: t("apiKeyInput.show")
|
|
}
|
|
>
|
|
{showAccessToken ? (
|
|
<EyeOff size={16} />
|
|
) : (
|
|
<Eye size={16} />
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-user-id">
|
|
{t("usageScript.userId")}
|
|
</Label>
|
|
<Input
|
|
id="usage-user-id"
|
|
type="text"
|
|
value={script.userId || ""}
|
|
onChange={(e) =>
|
|
setScript({ ...script, userId: e.target.value })
|
|
}
|
|
placeholder={t("usageScript.userIdPlaceholder")}
|
|
autoComplete="off"
|
|
className="bg-card border-border-default"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 脚本配置 */}
|
|
<div className="space-y-4 rounded-xl border border-border-default bg-card p-4 shadow-sm">
|
|
<div className="flex items-center justify-between">
|
|
<h4 className="text-base font-medium text-foreground">
|
|
{t("usageScript.scriptConfig")}
|
|
</h4>
|
|
<p className="text-xs text-muted-foreground">
|
|
{t("usageScript.variablesHint")}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-request-url">
|
|
{t("usageScript.requestUrl")}
|
|
</Label>
|
|
<Input
|
|
id="usage-request-url"
|
|
type="text"
|
|
value={script.request?.url || ""}
|
|
onChange={(e) => {
|
|
setScript({
|
|
...script,
|
|
request: { ...script.request, url: e.target.value },
|
|
});
|
|
}}
|
|
placeholder={t("usageScript.requestUrlPlaceholder")}
|
|
className="bg-card border-border-default"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-method">
|
|
{t("usageScript.method")}
|
|
</Label>
|
|
<Input
|
|
id="usage-method"
|
|
type="text"
|
|
value={script.request?.method || "GET"}
|
|
onChange={(e) => {
|
|
setScript({
|
|
...script,
|
|
request: {
|
|
...script.request,
|
|
method: e.target.value.toUpperCase(),
|
|
},
|
|
});
|
|
}}
|
|
placeholder="GET / POST"
|
|
className="bg-card border-border-default"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-timeout">
|
|
{t("usageScript.timeoutSeconds")}
|
|
</Label>
|
|
<Input
|
|
id="usage-timeout"
|
|
type="number"
|
|
min={0}
|
|
value={script.timeout ?? 10}
|
|
onChange={(e) =>
|
|
setScript({
|
|
...script,
|
|
timeout: validateTimeout(e.target.value),
|
|
})
|
|
}
|
|
onBlur={(e) =>
|
|
setScript({
|
|
...script,
|
|
timeout: validateTimeout(e.target.value),
|
|
})
|
|
}
|
|
className="bg-card border-border-default"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-headers">
|
|
{t("usageScript.headers")}
|
|
</Label>
|
|
<JsonEditor
|
|
id="usage-headers"
|
|
value={
|
|
script.request?.headers
|
|
? JSON.stringify(script.request.headers, null, 2)
|
|
: "{}"
|
|
}
|
|
onChange={(value) => {
|
|
try {
|
|
const parsed = JSON.parse(value || "{}");
|
|
setScript({
|
|
...script,
|
|
request: { ...script.request, headers: parsed },
|
|
});
|
|
} catch (error) {
|
|
console.error("Invalid headers JSON", error);
|
|
}
|
|
}}
|
|
height={180}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-body">{t("usageScript.body")}</Label>
|
|
<JsonEditor
|
|
id="usage-body"
|
|
value={
|
|
script.request?.body
|
|
? JSON.stringify(script.request.body, null, 2)
|
|
: "{}"
|
|
}
|
|
onChange={(value) => {
|
|
try {
|
|
const parsed =
|
|
value?.trim() === "" ? undefined : JSON.parse(value);
|
|
setScript({
|
|
...script,
|
|
request: { ...script.request, body: parsed },
|
|
});
|
|
} catch (error) {
|
|
toast.error(
|
|
t("usageScript.invalidJson") || "Body 必须是合法 JSON",
|
|
);
|
|
}
|
|
}}
|
|
height={220}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="usage-interval">
|
|
{t("usageScript.autoIntervalMinutes")}
|
|
</Label>
|
|
<Input
|
|
id="usage-interval"
|
|
type="number"
|
|
min={0}
|
|
max={1440}
|
|
value={script.autoIntervalMinutes ?? 0}
|
|
onChange={(e) =>
|
|
setScript({
|
|
...script,
|
|
autoIntervalMinutes: validateAndClampInterval(
|
|
e.target.value,
|
|
),
|
|
})
|
|
}
|
|
onBlur={(e) =>
|
|
setScript({
|
|
...script,
|
|
autoIntervalMinutes: validateAndClampInterval(
|
|
e.target.value,
|
|
),
|
|
})
|
|
}
|
|
className="bg-card border-border-default"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
{t("usageScript.autoQueryIntervalHint")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 提取器代码 */}
|
|
<div className="space-y-4 rounded-xl border border-border-default bg-card p-4 shadow-sm">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-base font-medium">
|
|
{t("usageScript.extractorCode")}
|
|
</Label>
|
|
<div className="text-xs text-muted-foreground">
|
|
{t("usageScript.extractorHint")}
|
|
</div>
|
|
</div>
|
|
<JsonEditor
|
|
id="usage-code"
|
|
value={script.code || ""}
|
|
onChange={(value) => setScript({ ...script, code: value })}
|
|
height={480}
|
|
language="javascript"
|
|
showMinimap={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* 帮助信息 */}
|
|
<div className="rounded-xl border border-border-default bg-card p-4 shadow-sm text-sm text-foreground/90">
|
|
<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-muted text-foreground rounded border border-border-default text-[10px] overflow-x-auto">
|
|
{`({
|
|
request: {
|
|
url: "{{baseUrl}}/api/usage",
|
|
method: "POST",
|
|
headers: {
|
|
"Authorization": "Bearer {{apiKey}}",
|
|
"User-Agent": "cc-switch/1.0"
|
|
}
|
|
},
|
|
extractor: function(response) {
|
|
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-muted-foreground">
|
|
<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>
|
|
)}
|
|
</FullScreenPanel>
|
|
);
|
|
};
|
|
|
|
export default UsageScriptModal;
|