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:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user