1

video-gen-admin/src/pages/AdminSettings.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Button, Card, Form, Input, InputNumber, message, Select, Space, Switch, Tabs, Typography, Upload,
+  Button, Card, Form, Input, InputNumber, Modal, message, Select, Space, Switch, Tabs, Typography, Upload,
 } from 'antd';
 import {
-  SettingOutlined, SaveOutlined, UploadOutlined, FilePdfOutlined, EyeOutlined, DatabaseOutlined, VideoCameraOutlined, RobotOutlined,
+  SettingOutlined, SaveOutlined, UploadOutlined, FilePdfOutlined, EyeOutlined, DatabaseOutlined, PlusOutlined, VideoCameraOutlined, RobotOutlined,
 } from '@ant-design/icons';
 import {
   createSystemConfig,
@@ -28,6 +28,8 @@ const AdminSettings: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [uploading, setUploading] = useState('');
+  const [addModalOpen, setAddModalOpen] = useState(false);
+  const [addForm] = Form.useForm();
   const [form] = Form.useForm();
 
   useEffect(() => {
@@ -331,6 +333,20 @@ const AdminSettings: React.FC = () => {
     return <Input placeholder={config.description} size="large" />;
   };
 
+  const handleAddConfig = async () => {
+    try {
+      const values = await addForm.validateFields();
+      const res = await createSystemConfig(values.key, values.value, values.description || '');
+      setConfigs(prev => [...prev, res]);
+      form.setFieldsValue({ [res.key]: res.value });
+      setAddModalOpen(false);
+      addForm.resetFields();
+      message.success('配置已添加');
+    } catch (e: any) {
+      message.error(e?.message || '添加失败');
+    }
+  };
+
   if (loading) {
     return <Card loading variant="outlined" style={{ borderRadius: 12 }} />;
   }
@@ -520,12 +536,34 @@ const AdminSettings: React.FC = () => {
           <Tabs items={tabItems} defaultActiveKey="basic" />
       </Card>
 
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Button icon={<PlusOutlined />} onClick={() => setAddModalOpen(true)}>添加配置</Button>
         <Button type="primary" icon={<SaveOutlined />} onClick={handleSave} loading={saving}
           size="large" style={{ borderRadius: 8, minWidth: 140 }}>
           保存配置
         </Button>
       </div>
+
+      <Modal
+        title="添加系统配置"
+        open={addModalOpen}
+        onOk={handleAddConfig}
+        onCancel={() => { setAddModalOpen(false); addForm.resetFields(); }}
+        okText="添加"
+        cancelText="取消"
+      >
+        <Form form={addForm} layout="vertical">
+          <Form.Item name="key" label="配置键名" rules={[{ required: true, message: '请输入配置键名' }]}>
+            <Input placeholder="例如: optimize_hold_credits" />
+          </Form.Item>
+          <Form.Item name="value" label="配置值" rules={[{ required: true, message: '请输入配置值' }]}>
+            <Input placeholder="例如: 5" />
+          </Form.Item>
+          <Form.Item name="description" label="描述">
+            <Input placeholder="配置说明（可选）" />
+          </Form.Item>
+        </Form>
+      </Modal>
     </div>
   );
 };