From 9d6f1010067dff65db51ba489d9d28d6d02c81ae Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Mon, 10 Nov 2025 15:51:18 +0800
Subject: [PATCH] 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.
---
 src/components/UsageScriptModal.tsx | 38 ++++++++++++++---------------
 1 file changed, 19 insertions(+), 19 deletions(-)

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