fix(usage-script): replace FormLabel with Label to fix white screen crash

FormLabel component requires FormField context and throws error when used
standalone, causing the entire component to crash with a white screen.

Root cause:
- FormLabel internally calls useFormField() hook
- useFormField() requires FormFieldContext (must be within <FormField>)
- Without context, it throws: "useFormField should be used within <FormField>"
- Uncaught error crashes React rendering tree

Solution:
- Replace FormLabel with standalone Label component
- Label component from @/components/ui/label doesn't depend on form context
- Maintains same styling (text-sm font-medium) without requiring context

This fixes the white screen issue when clicking the usage panel.
This commit is contained in:
Jason
2025-11-10 15:51:18 +08:00
parent 2a56a0d889
commit 9d6f101006

View File

@@ -17,7 +17,7 @@ import {
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { FormLabel } from "@/components/ui/form"; import { Label } from "@/components/ui/label";
interface UsageScriptModalProps { interface UsageScriptModalProps {
provider: Provider; provider: Provider;
@@ -298,9 +298,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
<> <>
{/* 预设模板选择 */} {/* 预设模板选择 */}
<div> <div>
<FormLabel className="mb-2"> <Label className="mb-2">
{t("usageScript.presetTemplate")} {t("usageScript.presetTemplate")}
</FormLabel> </Label>
<div className="flex gap-2"> <div className="flex gap-2">
{Object.keys(PRESET_TEMPLATES).map((name) => { {Object.keys(PRESET_TEMPLATES).map((name) => {
const isSelected = selectedTemplate === name; const isSelected = selectedTemplate === name;
@@ -332,9 +332,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
{selectedTemplate === TEMPLATE_KEYS.GENERAL && ( {selectedTemplate === TEMPLATE_KEYS.GENERAL && (
<> <>
<div className="space-y-2"> <div className="space-y-2">
<FormLabel htmlFor="usage-api-key"> <Label htmlFor="usage-api-key">
API Key API Key
</FormLabel> </Label>
<div className="relative"> <div className="relative">
<Input <Input
id="usage-api-key" id="usage-api-key"
@@ -360,9 +360,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<FormLabel htmlFor="usage-base-url"> <Label htmlFor="usage-base-url">
Base URL Base URL
</FormLabel> </Label>
<Input <Input
id="usage-base-url" id="usage-base-url"
type="text" type="text"
@@ -381,9 +381,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
{selectedTemplate === TEMPLATE_KEYS.NEW_API && ( {selectedTemplate === TEMPLATE_KEYS.NEW_API && (
<> <>
<div className="space-y-2"> <div className="space-y-2">
<FormLabel htmlFor="usage-newapi-base-url"> <Label htmlFor="usage-newapi-base-url">
Base URL Base URL
</FormLabel> </Label>
<Input <Input
id="usage-newapi-base-url" id="usage-newapi-base-url"
type="text" type="text"
@@ -397,9 +397,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<FormLabel htmlFor="usage-access-token"> <Label htmlFor="usage-access-token">
{t("usageScript.accessToken")} {t("usageScript.accessToken")}
</FormLabel> </Label>
<div className="relative"> <div className="relative">
<Input <Input
id="usage-access-token" id="usage-access-token"
@@ -425,9 +425,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<FormLabel htmlFor="usage-user-id"> <Label htmlFor="usage-user-id">
{t("usageScript.userId")} {t("usageScript.userId")}
</FormLabel> </Label>
<Input <Input
id="usage-user-id" id="usage-user-id"
type="text" type="text"
@@ -446,9 +446,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
{/* 脚本编辑器 */} {/* 脚本编辑器 */}
<div> <div>
<FormLabel className="mb-2"> <Label className="mb-2">
{t("usageScript.queryScript")} {t("usageScript.queryScript")}
</FormLabel> </Label>
<JsonEditor <JsonEditor
value={script.code} value={script.code}
onChange={(code) => setScript({ ...script, code })} onChange={(code) => setScript({ ...script, code })}
@@ -466,9 +466,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
{/* 配置选项 */} {/* 配置选项 */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<FormLabel htmlFor="usage-timeout"> <Label htmlFor="usage-timeout">
{t("usageScript.timeoutSeconds")} {t("usageScript.timeoutSeconds")}
</FormLabel> </Label>
<Input <Input
id="usage-timeout" id="usage-timeout"
type="number" type="number"
@@ -486,9 +486,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
{/* 🆕 自动查询间隔 */} {/* 🆕 自动查询间隔 */}
<div className="space-y-2"> <div className="space-y-2">
<FormLabel htmlFor="usage-auto-interval"> <Label htmlFor="usage-auto-interval">
{t("usageScript.autoQueryInterval")} {t("usageScript.autoQueryInterval")}
</FormLabel> </Label>
<Input <Input
id="usage-auto-interval" id="usage-auto-interval"
type="number" type="number"