hikvision-web 1.0.0

package/src/pages/SystemPage.tsx

@@ -0,0 +1,758 @@
+import { useState, useEffect } from 'react';
+import { Card, Button, Form, Input, message, Divider, Descriptions, Modal, InputNumber, Row, Col, Statistic, Tag } from 'antd';
+import { SettingOutlined, SaveOutlined, ReloadOutlined, PlayCircleOutlined, StopOutlined, SyncOutlined, CheckCircleOutlined, CloseCircleOutlined, EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
+import { saveApiKey, getApiKey, clearApiKey } from '../services/api';
+
+// fetch 封装，自动携带 API Key
+const apiFetch = async (url: string, options: RequestInit = {}) => {
+  const apiKey = getApiKey();
+  const headers: any = { ...options.headers };
+  if (apiKey) {
+    headers['x-api-key'] = apiKey;
+  }
+  return fetch(url, { ...options, headers });
+};
+
+// 从当前页面 URL 动态获取 Manager URL（解决跨主机访问 localhost 问题）
+// Manager 端口从 config.json 读取，默认 3001
+const getManagerUrl = (managerPort: number = 3001) => {
+  const url = new URL(window.location.href);
+  return `${url.protocol}//${url.hostname}:${managerPort}`;
+};
+
+let MANAGER_URL = getManagerUrl(3001); // 默认值，启动时从配置更新
+
+interface ConfigData {
+  apiServer: { port: number };
+  web: { port: number };
+  manager?: { port: number };
+  hikvision: { host: string; appKey: string; appSecret: string };
+}
+
+interface ServiceStatus {
+  isRunning: boolean;
+  pid: number | null;
+  port: number;
+  host: string;
+  uptime: number;
+}
+
+interface ManagerStatus {
+  isRunning: boolean;
+  pid: number | null;
+  port: number;
+}
+
+interface ManagerConnectionStatus {
+  connected: boolean;
+  port: number | null;
+  error?: string;
+}
+
+export default function SystemPage() {
+  const [form] = Form.useForm();
+  const [, setConfig] = useState<ConfigData | null>(null);
+  const [serviceStatus, setServiceStatus] = useState<ServiceStatus | null>(null);
+  const [_managerStatus, setManagerStatus] = useState<ManagerStatus | null>(null);
+  const [managerConnStatus, setManagerConnStatus] = useState<ManagerConnectionStatus>({ connected: false, port: null });
+  const [apiAvailable, setApiAvailable] = useState(true);
+  const [apiKeyInput, setApiKeyInput] = useState(getApiKey());
+  const [apiKeyStatus, setApiKeyStatus] = useState<'none' | 'saved' | 'error'>('none');
+  // 存储原始配置值，用于比较哪些字段被修改
+  const [originalConfig, setOriginalConfig] = useState<{
+    host: string;
+    appKey: string;
+    appSecret: string;
+  } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+
+  // 尝试从 Manager 服务获取配置（当 API 不可用时）
+  const loadConfigFromManager = async (): Promise<ConfigData | null> => {
+    try {
+      const res = await fetch(`${MANAGER_URL}/api/config`);
+      const data = await res.json();
+      if (data.success && data.data?.fileConfig) {
+        return data.data.fileConfig;
+      }
+    } catch {
+      // Manager 也不可用
+    }
+    return null;
+  };
+
+  // 加载配置和服务状态
+  const loadAll = async () => {
+    try {
+      // 先尝试从 API Server 加载
+      let configData: any = null;
+      let statusData: any = null;
+      let apiOk = false;
+
+      try {
+        const [configRes, statusRes] = await Promise.all([
+          apiFetch('/api/config'),
+          apiFetch('/api/service/status')
+        ]);
+        
+        if (configRes.ok) {
+          configData = await configRes.json();
+          apiOk = true;
+        }
+        if (statusRes.ok) {
+          statusData = await statusRes.json();
+        }
+      } catch {
+        // API Server 不可用
+        setApiAvailable(false);
+      }
+
+      if (apiOk && configData?.success) {
+        setApiAvailable(true);
+        setConfig(configData.data);
+        const fc = configData.data.fileConfig;
+        // 从配置中获取 Manager 端口并更新 MANAGER_URL
+        const mgrPort = fc?.manager?.port || 3001;
+        MANAGER_URL = getManagerUrl(mgrPort);
+        
+        // 保存原始配置值，用于后续比较
+        const originalHik = {
+          host: fc?.hikvision?.host || '',
+          appKey: fc?.hikvision?.appKey || '',
+          appSecret: fc?.hikvision?.appSecret || '',
+        };
+        setOriginalConfig(originalHik);
+        
+        // 显示实际内容
+        form.setFieldsValue({
+          host: originalHik.host,
+          appKey: originalHik.appKey,
+          appSecret: originalHik.appSecret,
+          apiPort: fc?.apiServer?.port || 3000,
+          webPort: fc?.web?.port || 3030,
+        });
+        // 验证 API Key 是否有效
+        const savedKey = getApiKey();
+        if (savedKey) {
+          try {
+            const testRes = await apiFetch('/api/service/status');
+            setApiKeyStatus(testRes.ok ? 'saved' : 'error');
+          } catch {
+            setApiKeyStatus('error');
+          }
+        }
+      } else if (statusData?.success) {
+        // API 不可用但有状态数据，说明部分可用
+        setApiAvailable(false);
+      } else {
+        // API 完全不可用，尝试从 Manager 获取配置
+        const fc = await loadConfigFromManager();
+        if (fc) {
+          setApiAvailable(false);
+          setConfig({ fileConfig: fc } as any);
+          // 从 Manager 配置中获取 Manager 端口并更新 MANAGER_URL
+          const mgrPort = fc?.manager?.port || 3001;
+          MANAGER_URL = getManagerUrl(mgrPort);
+          
+          // 保存原始配置值，用于后续比较
+          const originalHik = {
+            host: fc?.hikvision?.host || '',
+            appKey: fc?.hikvision?.appKey || '',
+            appSecret: fc?.hikvision?.appSecret || '',
+          };
+          setOriginalConfig(originalHik);
+          
+          // 显示实际内容
+          form.setFieldsValue({
+            host: originalHik.host,
+            appKey: originalHik.appKey,
+            appSecret: originalHik.appSecret,
+            apiPort: fc?.apiServer?.port || 3000,
+            webPort: fc?.web?.port || 3030,
+          });
+        } else {
+          setApiAvailable(false);
+          message.warning('无法连接 API 服务，请检查服务状态');
+        }
+      }
+
+      if (statusData?.success) {
+        setServiceStatus(statusData.data);
+      }
+
+      // 查询 Manager 状态
+      try {
+        const managerRes = await fetch(`${MANAGER_URL}/api/manager/status`);
+        if (managerRes.ok) {
+          const mdata = await managerRes.json();
+          if (mdata.success) {
+            setManagerStatus(mdata.data);
+            setManagerConnStatus({ connected: true, port: mdata.data?.port || 3001 });
+          }
+        }
+      } catch (error: any) {
+        setManagerConnStatus({ connected: false, port: 3001, error: error.message });
+      }
+    } catch (error: any) {
+      message.error(`加载失败: ${error.message}`);
+    }
+  };
+
+  useEffect(() => {
+    loadAll();
+    // 定时刷新状态
+    const interval = setInterval(() => {
+      // 刷新 API 状态
+      fetch('/api/service/status')
+        .then(r => r.ok ? r.json() : null)
+        .then(data => {
+          if (data?.success) {
+            setApiAvailable(true);
+            setServiceStatus(data.data);
+          } else {
+            setApiAvailable(false);
+          }
+        })
+        .catch(() => {
+          setApiAvailable(false);
+        });
+      
+      // 刷新 Manager 状态
+      fetch(`${MANAGER_URL}/api/manager/status`)
+        .then(r => r.ok ? r.json() : null)
+        .then(data => {
+          if (data?.success) {
+            setManagerStatus(data.data);
+            setManagerConnStatus({ connected: true, port: data.data?.port || 3001 });
+            // Manager 返回的 API Server 状态（用于 API 不可用时）
+            if (data.data) {
+              setServiceStatus(data.data);
+            }
+          }
+        })
+        .catch((error: any) => {
+          setManagerConnStatus({ connected: false, port: 3001, error: error.message });
+        });
+    }, 5000); // 5秒刷新一次，更及时反映状态变化
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      const values = await form.validateFields();
+      
+      // 只保存修改过的字段
+      const newHikvision: any = {};
+      
+      if (!originalConfig || values.host !== originalConfig.host) {
+        newHikvision.host = values.host;
+      }
+      if (!originalConfig || values.appKey !== originalConfig.appKey) {
+        newHikvision.appKey = values.appKey;
+      }
+      if (!originalConfig || values.appSecret !== originalConfig.appSecret) {
+        newHikvision.appSecret = values.appSecret;
+      }
+      
+      // 如果没有修改任何 hikvision 字段，只发送其他配置
+      if (Object.keys(newHikvision).length === 0) {
+        message.info('未检测到配置变更');
+        setSaving(false);
+        return;
+      }
+      
+      const newConfig: ConfigData = {
+        apiServer: { port: values.apiPort || 3000 },
+        web: { port: values.webPort || 3030 },
+        hikvision: newHikvision,
+      };
+      
+      const res = await apiFetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newConfig)
+      });
+      
+      const result = await res.json();
+      
+      if (result.success) {
+        message.success('配置已更新，重启服务后生效');
+        loadAll();
+      } else {
+        message.error(result.message || '保存失败');
+      }
+    } catch (error: any) {
+      message.error(`保存失败: ${error.message || error}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleSaveApiKey = async () => {
+    if (apiKeyInput.trim()) {
+      saveApiKey(apiKeyInput.trim());
+      // 立即验证 API Key 是否有效
+      try {
+        const res = await apiFetch('/api/service/status');
+        if (res.ok) {
+          setApiKeyStatus('saved');
+          message.success('API Key 已保存并验证通过');
+        } else {
+          const data = await res.json();
+          if (data.message?.includes('未授权')) {
+            setApiKeyStatus('error');
+            message.error('API Key 无效，请检查配置');
+          } else {
+            setApiKeyStatus('saved'); // 其他错误（如服务未运行）也认为 key 有效
+            message.success('API Key 已保存');
+          }
+        }
+      } catch {
+        setApiKeyStatus('saved'); // 网络错误时也认为 key 已保存
+        message.success('API Key 已保存');
+      }
+    } else {
+      clearApiKey();
+      setApiKeyStatus('none');
+      message.info('API Key 已清除');
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    try {
+      const values = await form.validateFields();
+      const res = await apiFetch('/api/config/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          host: values.host,
+          appKey: values.appKey,
+          appSecret: values.appSecret,
+        })
+      });
+      const data = await res.json();
+      
+      if (data.status === 'ok') {
+        message.success('连接测试成功！');
+        if (data.config) {
+          message.info(`平台: ${data.config.host}, App Key: ${data.config.appKeyConfigured ? '已配置' : '未配置'}`);
+        }
+      } else {
+        message.error(`连接测试失败: ${data.message || '请检查配置'}`);
+      }
+    } catch (error: any) {
+      message.error(`连接测试失败: ${error.message || '请检查配置'}`);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  // 通过 Manager 服务启动 API Server
+  const handleStartViaManager = async () => {
+    setLoading(true);
+    try {
+      const res = await apiFetch(`${MANAGER_URL}/api/manager/start`, { method: 'POST' });
+      const data = await res.json();
+      
+      if (data.success) {
+        message.success(data.message);
+        // 立即更新状态为运行中
+        setServiceStatus({ isRunning: true, pid: data.pid || null, port: 3000, host: 'http://localhost:3000', uptime: 0 });
+        setApiAvailable(true);
+        // 从 Manager 获取最新状态
+        setTimeout(loadAll, 3000);
+      } else {
+        message.error(data.message || '启动失败');
+      }
+    } catch (error: any) {
+      message.error(`启动失败: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
+  // 通过 Manager 服务停止 API Server
+  const handleStopViaManager = async () => {
+    Modal.confirm({
+      title: '确认停止服务',
+      content: '停止服务后，前端页面将无法访问 API。确定继续？',
+      onOk: async () => {
+        setLoading(true);
+        try {
+          const res = await apiFetch(`${MANAGER_URL}/api/manager/stop`, { method: 'POST' });
+          const data = await res.json();
+          
+          if (data.success) {
+            message.success(data.message);
+            // 立即更新状态为已停止
+            setApiAvailable(false);
+            setServiceStatus({ isRunning: false, pid: null, port: 3000, host: '', uptime: 0 });
+            setManagerStatus({ isRunning: true, pid: null, port: 3000 });
+            // 从 Manager 获取最新状态
+            setTimeout(loadAll, 1000);
+          } else {
+            message.error(data.message || '停止失败');
+          }
+        } catch (error: any) {
+          message.error(`停止失败: ${error.message}`);
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
+  };
+
+  // 通过 Manager 服务重启 API Server
+  const handleRestartViaManager = async () => {
+    Modal.confirm({
+      title: '确认重启服务',
+      content: '重启服务将短暂中断 API 访问。确定继续？',
+      onOk: async () => {
+        setLoading(true);
+        try {
+          const res = await apiFetch(`${MANAGER_URL}/api/manager/restart`, { method: 'POST' });
+          const data = await res.json();
+          
+          if (data.success) {
+            message.success('服务已重启');
+            // 立即更新状态为运行中（PID 来自 Manager 响应）
+            setServiceStatus({ isRunning: true, pid: data.pid || null, port: 3000, host: 'http://localhost:3000', uptime: 0 });
+            setApiAvailable(true);
+            // 从 Manager 获取最新状态
+            setTimeout(loadAll, 3000);
+          } else {
+            message.error(data.message || '重启失败');
+          }
+        } catch (error: any) {
+          message.error(`重启失败: ${error.message}`);
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
+  };
+
+  // 通过 API Server 控制服务（服务运行时使用）
+  const handleStart = async () => {
+    setLoading(true);
+    try {
+      const res = await apiFetch('/api/service/start', { method: 'POST' });
+      const data = await res.json();
+      
+      if (data.success) {
+        message.success(data.message);
+        // 立即更新状态为运行中
+        setServiceStatus({ isRunning: true, pid: data.pid || null, port: 3000, host: 'http://localhost:3000', uptime: 0 });
+        setApiAvailable(true);
+        setTimeout(loadAll, 3000);
+      } else {
+        message.error(data.message || '启动失败');
+      }
+    } catch (error: any) {
+      message.error(`启动失败: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
+  const handleStop = async () => {
+    Modal.confirm({
+      title: '确认停止服务',
+      content: '停止服务后，前端页面将无法访问 API。确定继续？',
+      onOk: async () => {
+        setLoading(true);
+        try {
+          const res = await apiFetch('/api/service/stop', { method: 'POST' });
+          const data = await res.json();
+          
+          if (data.success) {
+            message.success(data.message);
+            // 立即更新状态为已停止
+            setApiAvailable(false);
+            setServiceStatus({ isRunning: false, pid: null, port: 3000, host: '', uptime: 0 });
+            setTimeout(loadAll, 1000);
+          } else {
+            message.error(data.message || '停止失败');
+          }
+        } catch (error: any) {
+          message.error(`停止失败: ${error.message}`);
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
+  };
+
+  const handleRestart = async () => {
+    Modal.confirm({
+      title: '确认重启服务',
+      content: '重启服务将短暂中断 API 访问。确定继续？',
+      onOk: async () => {
+        setLoading(true);
+        try {
+          const res = await apiFetch('/api/service/restart', { method: 'POST' });
+          const data = await res.json();
+          
+          if (data.success) {
+            message.success('服务已重启');
+            // 立即更新状态为运行中
+            setServiceStatus({ isRunning: true, pid: data.pid || null, port: 3000, host: 'http://localhost:3000', uptime: 0 });
+            setApiAvailable(true);
+            setTimeout(loadAll, 3000);
+          } else {
+            message.error(data.message || '重启失败');
+          }
+        } catch (error: any) {
+          message.error(`重启失败: ${error.message}`);
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
+  };
+
+  const formatUptime = (seconds: number) => {
+    if (!seconds) return '-';
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+    return `${h}h ${m}m ${s}s`;
+  };
+
+  // 选择使用哪个控制接口
+  const useManager = !apiAvailable;
+
+  return (
+    <div>
+      <h2 className="page-title" style={{ marginBottom: 24 }}>系统设置</h2>
+
+      {/* ========== 服务状态卡片 ========== */}
+      <Card title="API Server 服务状态">
+        {useManager && (
+          <div style={{ marginBottom: 12, padding: 8, background: '#fffbe6', border: '1px solid #ffe58f', borderRadius: 4 }}>
+            <Tag color={managerConnStatus.connected ? 'green' : 'red'}>
+              {managerConnStatus.connected ? '✅ 已连接管理服务' : '❌ 无法连接管理服务'}
+            </Tag>
+            {managerConnStatus.connected ? (
+              <span style={{ marginLeft: 8, color: '#666' }}>管理服务端口: {managerConnStatus.port}</span>
+            ) : (
+              <span style={{ marginLeft: 8, color: '#666' }}>管理服务 ({MANAGER_URL}) {managerConnStatus.error ? `- ${managerConnStatus.error}` : ''}</span>
+            )}
+          </div>
+        )}
+        {!useManager && (
+          <div style={{ marginBottom: 12, padding: 8, background: '#f6ffed', border: '1px solid #b7eb8f', borderRadius: 4 }}>
+            <Tag color="green">✅ API 服务正常</Tag>
+            <Tag color="blue" style={{ marginLeft: 8 }}>管理服务: {managerConnStatus.connected ? '已连接' : '未连接'}</Tag>
+          </div>
+        )}
+        <Row gutter={16}>
+          <Col span={6}>
+            <Statistic 
+              title="状态" 
+              value={serviceStatus?.isRunning ? '运行中' : '已停止'}
+              valueStyle={{ 
+                color: serviceStatus?.isRunning ? '#52c41a' : '#ff4d4f',
+                fontWeight: 'bold'
+              }}
+              prefix={serviceStatus?.isRunning ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
+            />
+          </Col>
+          <Col span={6}>
+            <Statistic title="端口" value={serviceStatus?.port || '-'} />
+          </Col>
+          <Col span={6}>
+            <Statistic title="PID" value={serviceStatus?.pid || '-'} />
+          </Col>
+          <Col span={6}>
+            <Statistic title="运行时间" value={formatUptime(serviceStatus?.uptime || 0)} />
+          </Col>
+        </Row>
+        
+        <Divider />
+        
+        <div style={{ display: 'flex', gap: 8 }}>
+          {useManager ? (
+            <>
+              <Button 
+                type="primary" 
+                icon={<PlayCircleOutlined />} 
+                onClick={handleStartViaManager}
+                disabled={serviceStatus?.isRunning ?? false}
+                loading={loading}
+              >
+                启动
+              </Button>
+              
+              <Button 
+                danger
+                icon={<StopOutlined />} 
+                onClick={handleStopViaManager}
+                disabled={!(serviceStatus?.isRunning ?? false)}
+                loading={loading}
+              >
+                停止
+              </Button>
+              
+              <Button 
+                icon={<SyncOutlined />} 
+                onClick={handleRestartViaManager}
+                loading={loading}
+              >
+                重启
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button 
+                type="primary" 
+                icon={<PlayCircleOutlined />} 
+                onClick={handleStart}
+                disabled={serviceStatus?.isRunning}
+                loading={loading}
+              >
+                启动
+              </Button>
+              
+              <Button 
+                danger
+                icon={<StopOutlined />} 
+                onClick={handleStop}
+                disabled={!serviceStatus?.isRunning}
+                loading={loading}
+              >
+                停止
+              </Button>
+              
+              <Button 
+                icon={<SyncOutlined />} 
+                onClick={handleRestart}
+                loading={loading}
+              >
+                重启
+              </Button>
+            </>
+          )}
+          
+          <Button 
+            icon={<ReloadOutlined />} 
+            onClick={loadAll}
+            style={{ marginLeft: 'auto' }}
+          >
+            刷新
+          </Button>
+        </div>
+      </Card>
+
+      {/* ========== API 配置 ========== */}
+      <Card title="API 配置" style={{ marginTop: 24 }}>
+        <Form form={form} layout="vertical" onFinish={handleSave}>
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="host" label="平台主机地址" tooltip="海康平台 API 地址，如：127.0.0.1:18443" rules={[{ required: true, message: '请输入主机地址' }]}>
+                <Input placeholder="如：127.0.0.1:18443" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="apiPort" label="API Server 端口" tooltip="API 服务监听端口" rules={[{ required: true, type: 'number', min: 1, max: 65535 }]}>
+                <InputNumber min={1} max={65535} style={{ width: '100%' }} />
+              </Form.Item>
+            </Col>
+          </Row>
+          
+          <Row gutter={16}>
+            <Col span={8}>
+              <Form.Item name="appKey" label="App Key" tooltip="在海康平台申请的 App Key" rules={[{ required: true, message: '请输入 App Key' }]}>
+                <Input placeholder="请输入 App Key" />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item name="appSecret" label="App Secret" tooltip="在海康平台申请的 App Secret" rules={[{ required: true, message: '请输入 App Secret' }]}>
+                <Input.Password placeholder="请输入 App Secret" />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item name="webPort" label="Web 前端端口" tooltip="前端开发服务器端口" rules={[{ required: true, type: 'number', min: 1, max: 65535 }]}>
+                <InputNumber min={1} max={65535} style={{ width: '100%' }} />
+              </Form.Item>
+            </Col>
+          </Row>
+          
+          <Divider />
+          
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item label="API Key" tooltip="用于前端访问 API Server 的认证密钥">
+                <Input.Password 
+                  value={apiKeyInput}
+                  onChange={(e) => setApiKeyInput(e.target.value)}
+                  placeholder="输入 API Key（从 config.json 的 auth.apiKey 获取）"
+                  iconRender={(visible) => visible ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={4}>
+              <Form.Item label=" ">
+                <Button 
+                  icon={<SaveOutlined />} 
+                  onClick={handleSaveApiKey}
+                  style={{ marginTop: 4 }}
+                >
+                  保存 API Key
+                </Button>
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item label="状态">
+                <Tag color={apiKeyStatus === 'saved' ? 'green' : apiKeyStatus === 'error' ? 'red' : 'default'}>
+                  {apiKeyStatus === 'saved' ? '✅ 已配置' : apiKeyStatus === 'error' ? '❌ 验证失败' : '未配置'}
+                </Tag>
+                <span style={{ marginLeft: 8, color: '#666', fontSize: 12 }}>
+                  {getApiKey() ? `已保存 ${getApiKey().slice(0, 8)}...` : '未保存'}
+                </span>
+              </Form.Item>
+            </Col>
+          </Row>
+          
+          <Divider />
+          
+          <Form.Item>
+            <Button type="primary" icon={<SaveOutlined />} onClick={handleSave} loading={saving}>保存配置</Button>
+            <Button icon={<ReloadOutlined />} onClick={loadAll} style={{ marginLeft: 8 }}>重置</Button>
+            <Button icon={<SettingOutlined />} onClick={handleTestConnection} loading={testing} style={{ marginLeft: 8 }}>测试连接</Button>
+          </Form.Item>
+        </Form>
+      </Card>
+
+      {/* ========== 配置说明 ========== */}
+      <Card title="配置说明" style={{ marginTop: 24 }}>
+        <Descriptions bordered column={1}>
+          <Descriptions.Item label="配置优先级">
+            <Tag color="red">环境变量</Tag> 
+            &gt; 
+            <Tag color="blue">config.json</Tag> 
+            &gt; 
+            <Tag color="default">默认值</Tag>
+          </Descriptions.Item>
+          <Descriptions.Item label="配置文件位置">
+            <code>packages/server/config.json</code>
+          </Descriptions.Item>
+          <Descriptions.Item label="环境变量文件">
+            <code>.env</code> 或 <code>/etc/openclaw/openclaw.env</code>
+          </Descriptions.Item>
+          <Descriptions.Item label="生效方式">
+            修改配置后需要重启 API Server 才能生效
+          </Descriptions.Item>
+          <Descriptions.Item label="管理服务">
+            独立运行在 <code>:3031</code>，即使 API Server 停止也可控制其启停
+          </Descriptions.Item>
+        </Descriptions>
+      </Card>
+    </div>
+  );
+}