From 4750e695da1b2104ab3542b28e35c66a52163cf1 Mon Sep 17 00:00:00 2001
From: chengkai3 <chengkai3@asiainfo.com>
Date: Fri, 1 May 2026 19:26:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8F=82=E6=95=B0=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E6=96=B0=E5=BB=BA=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app/admin/system-params/page.tsx | 91 ++++++++++++++----------
 1 file changed, 53 insertions(+), 38 deletions(-)

diff --git a/web/src/app/admin/system-params/page.tsx b/web/src/app/admin/system-params/page.tsx
index aa3b212..24166dd 100644
--- a/web/src/app/admin/system-params/page.tsx
+++ b/web/src/app/admin/system-params/page.tsx
@@ -61,6 +61,7 @@ export default function AdminSystemParamsPage() {
   const [keyword, setKeyword] = useState("");
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
   const [editingId, setEditingId] = useState<number | null>(null);
+  const [editorOpen, setEditorOpen] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState("");
 
@@ -113,6 +114,7 @@ export default function AdminSystemParamsPage() {
     setError("");
     setSuccess("");
     resetForm();
+    setEditorOpen(true);
   }, [resetForm]);
 
   const startEdit = useCallback((item: SystemParamSummary) => {
@@ -126,8 +128,14 @@ export default function AdminSystemParamsPage() {
       description: item.description ?? "",
       status: item.status,
     });
+    setEditorOpen(true);
   }, [formApi]);
 
+  const closeEditor = useCallback(() => {
+    setEditorOpen(false);
+    resetForm();
+  }, [resetForm]);
+
   const saveMutation = useMutation({
     mutationFn: async () => {
       if (!canManage) {
@@ -175,6 +183,7 @@ export default function AdminSystemParamsPage() {
     onSuccess: async (mode) => {
       setError("");
       setSuccess(mode === "created" ? "系统参数已创建" : "系统参数已更新");
+      setEditorOpen(false);
       resetForm();
       await refreshList();
     },
@@ -196,6 +205,7 @@ export default function AdminSystemParamsPage() {
     },
     onSuccess: async (deletedId) => {
       if (editingId === deletedId) {
+        setEditorOpen(false);
         resetForm();
       }
       setError("");
@@ -372,50 +382,55 @@ export default function AdminSystemParamsPage() {
       </Card>
 
       {canManage && (
-        <Card title={editingId === null ? "新建系统参数" : "编辑系统参数"}>
-          <Space direction="vertical" size={12} className="w-full">
-            <Form<FormState> form={formApi} layout="vertical" initialValues={EMPTY_FORM}>
-              <div className="grid gap-4 md:grid-cols-2">
-                <Form.Item<FormState>
-                  label="参数键"
-                  name="param_key"
-                  rules={[{ required: true, message: "请输入参数键" }]}
-                >
-                  <Input disabled={editingId !== null} placeholder="如 site.title" />
-                </Form.Item>
-
-                <Form.Item<FormState>
-                  label="参数名称"
-                  name="param_name"
-                  rules={[{ required: true, message: "请输入参数名称" }]}
-                >
-                  <Input placeholder="如 站点标题" />
-                </Form.Item>
-
-                <Form.Item<FormState> className="md:col-span-2" label="参数值" name="param_value">
-                  <Input.TextArea rows={4} />
-                </Form.Item>
-
-                <Form.Item<FormState> className="md:col-span-2" label="说明" name="description">
-                  <Input.TextArea rows={3} />
-                </Form.Item>
-
-                <Form.Item<FormState> label="状态" name="status">
-                  <Select
-                    options={[...PARAM_STATUS_OPTIONS]}
-                  />
-                </Form.Item>
-              </div>
-            </Form>
-
+        <Modal
+          title={editingId === null ? "新建系统参数" : "编辑系统参数"}
+          open={editorOpen}
+          onCancel={closeEditor}
+          width={760}
+          destroyOnClose
+          footer={(
             <Space>
               <Button type="primary" loading={saveMutation.isPending} onClick={() => saveMutation.mutate()}>
                 {saveMutation.isPending ? "提交中..." : editingId === null ? "创建" : "保存"}
               </Button>
               <Button onClick={resetForm}>重置</Button>
             </Space>
-          </Space>
-        </Card>
+          )}
+        >
+          <Form<FormState> form={formApi} layout="vertical" initialValues={EMPTY_FORM}>
+            <div className="grid gap-4 md:grid-cols-2">
+              <Form.Item<FormState>
+                label="参数键"
+                name="param_key"
+                rules={[{ required: true, message: "请输入参数键" }]}
+              >
+                <Input disabled={editingId !== null} placeholder="如 site.title" />
+              </Form.Item>
+
+              <Form.Item<FormState>
+                label="参数名称"
+                name="param_name"
+                rules={[{ required: true, message: "请输入参数名称" }]}
+              >
+                <Input placeholder="如 站点标题" />
+              </Form.Item>
+
+              <Form.Item<FormState> className="md:col-span-2" label="参数值" name="param_value">
+                <Input.TextArea rows={4} />
+              </Form.Item>
+
+              <Form.Item<FormState> className="md:col-span-2" label="说明" name="description">
+                <Input.TextArea rows={3} />
+              </Form.Item>
+
+              <Form.Item<FormState> label="状态" name="status">
+                <Select
+                  options={[...PARAM_STATUS_OPTIONS]}
+                />
+              </Form.Item>
+            </div>
+          </Form>
+        </Modal>
       )}
     </Space>
   );