🐛 修复FormItem错误导致的用户配置、储存管理等功能无法编辑的问题

Author: CodFrm

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "scriptcat",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "脚本猫,一个可以执行用户脚本的浏览器扩展,万物皆可脚本化,让你的浏览器可以做更多的事情!",
   "author": "CodFrm",
   "license": "GPLv3",

package.json

@@ -4,13 +4,11 @@ import {
   Button,
   Checkbox,
   Form,
-  FormInstance,
   Input,
   Message,
   Modal,
   Select,
 } from "@arco-design/web-react";
-import FormItem from "@arco-design/web-react/es/Form/form-item";
 import { IconQuestionCircleFill } from "@arco-design/web-react/icon";
 import {
   ExportParams,
@@ -19,7 +17,9 @@ import {
 } from "@Pkg/cloudscript/cloudscript";
 import CloudScriptFactory from "@Pkg/cloudscript/factory";
 import JSZip from "jszip";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect } from "react";
+
+const FormItem = Form.Item;
 
 const cloudScriptParams = CloudScriptFactory.params();
 
@@ -43,7 +43,7 @@ const CloudScriptPlan: React.FC<{
   script?: Script;
   onClose: () => void;
 }> = ({ script, onClose }) => {
-  const formRef = useRef<FormInstance>(null);
+  const [form] = Form.useForm();
   const [visible, setVisible] = React.useState(false);
   const [cloudScriptType, setCloudScriptType] =
     React.useState<ExportTarget>("local");
@@ -59,10 +59,10 @@ const CloudScriptPlan: React.FC<{
         setModel(data);
         if (data && data.params[data.target]) {
           setCloudScriptType(data.target);
-          formRef.current?.setFieldsValue(data.params[data.target]);
+          form.setFieldsValue(data.params[data.target]);
         } else {
           setCloudScriptType("local");
-          formRef.current?.setFieldsValue(defaultParams(script));
+          form.setFieldsValue(defaultParams(script));
         }
       });
     }
@@ -103,8 +103,7 @@ const CloudScriptPlan: React.FC<{
       onConfirm={async () => {
         // 保存并导出
         const dao = new ExportDAO();
-        const params =
-          formRef.current?.getFieldsValue() as unknown as ExportParams;
+        const params = form.getFieldsValue() as unknown as ExportParams;
         if (!params || !script) {
           return;
         }
@@ -162,7 +161,7 @@ const CloudScriptPlan: React.FC<{
           width: "100%",
         }}
         layout="vertical"
-        ref={formRef}
+        form={form}
       >
         <FormItem label="上传至">
           <Select
@@ -202,7 +201,7 @@ const CloudScriptPlan: React.FC<{
           type="primary"
           onClick={() => {
             if (script) {
-              formRef.current?.setFieldsValue(defaultParams(script));
+              form.setFieldsValue(defaultParams(script));
             }
           }}
         >

src/pages/components/CloudScriptPlan/index.tsx

@@ -15,12 +15,13 @@ import {
   Space,
   Table,
 } from "@arco-design/web-react";
-import FormItem from "@arco-design/web-react/es/Form/form-item";
 import { RefInputType } from "@arco-design/web-react/es/Input/interface";
 import { ColumnProps } from "@arco-design/web-react/es/Table";
 import { IconDelete, IconEdit, IconSearch } from "@arco-design/web-react/icon";
 import React, { useEffect, useRef, useState } from "react";
 
+const FormItem = Form.Item;
+
 const ScriptStorage: React.FC<{
   // eslint-disable-next-line react/require-default-props
   script?: Script;

src/pages/components/ScriptStorage/index.tsx

@@ -12,10 +12,11 @@ import {
   Tabs,
 } from "@arco-design/web-react";
 import TabPane from "@arco-design/web-react/es/Tabs/tab-pane";
-import FormItem from "@arco-design/web-react/es/Form/form-item";
 import IoC from "@App/app/ioc";
 import ValueController from "@App/app/service/value/controller";
 
+const FormItem = Form.Item;
+
 const UserConfigPanel: React.FC<{
   script: Script;
   userConfig: UserConfig;