优化代理配置

web/frontend/src/pages/ProxyPage.tsx

@@ -1,26 +1,64 @@
-import { useEffect, useState } from 'react';
-import { Form, Input, Switch, Button, Card, message, Divider, Space } from 'antd';
+import { useEffect, useState, useRef } from 'react';
+import { Form, Input, Switch, Button, Card, message, Row, Col } from 'antd';
 import { proxyApi } from '../api/modules';
 
+const WS_BASE = `ws://${window.location.hostname}:8000`;
+
 export default function ProxyPage() {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
   const [testing, setTesting] = useState(false);
   const [testingWl, setTestingWl] = useState(false);
+  const [configLoaded, setConfigLoaded] = useState(false);
+  const [logs, setLogs] = useState<{ level: string; message: string }[]>([]);
+  const wsRef = useRef<WebSocket | null>(null);
 
   const loadConfig = async () => {
     try {
       const data = await proxyApi.get();
-      form.setFieldsValue(data);
+      form.setFieldsValue({
+        enabled: data.enabled ?? false,
+        api_url: data.api_url ?? '',
+        http: data.http ?? '',
+        https: data.https ?? '',
+        whitelist_enabled: data.whitelist_enabled ?? false,
+        whitelist_uid: data.whitelist_uid ?? '',
+        whitelist_ukey: data.whitelist_ukey ?? '',
+      });
     } catch (e: any) {
       message.error(e.message);
+    } finally {
+      setConfigLoaded(true);
     }
   };
 
   useEffect(() => {
     loadConfig();
+    return () => {
+      wsRef.current?.close();
+    };
   }, []);
 
+  const appendLog = (level: string, msg: string) => {
+    setLogs((prev) => [...prev, { level, message: msg }]);
+  };
+
+  const connectWs = (testId: string) => {
+    wsRef.current?.close();
+    setLogs([]);
+    const ws = new WebSocket(`${WS_BASE}/api/proxy/ws/test/${testId}`);
+    wsRef.current = ws;
+    ws.onmessage = (event) => {
+      const msg = JSON.parse(event.data);
+      if (msg.level === 'heartbeat') return;
+      if (msg.level === 'result') return;
+      appendLog(msg.level, msg.message);
+    };
+    ws.onclose = () => {
+      wsRef.current = null;
+    };
+  };
+
   const handleSave = async () => {
     setLoading(true);
     try {
@@ -36,74 +74,115 @@ export default function ProxyPage() {
 
   const handleTestProxy = async () => {
     setTesting(true);
+    setLogs([]);
     try {
       const result = await proxyApi.test();
-      if (result.success) {
-        message.success(result.message);
-      } else {
-        message.warning(result.message);
-      }
+      if (result.test_id) connectWs(result.test_id);
     } catch (e: any) {
       message.error(e.message);
-    } finally {
       setTesting(false);
     }
   };
 
   const handleTestWhitelist = async () => {
     setTestingWl(true);
+    setLogs([]);
     try {
       const result = await proxyApi.testWhitelist();
-      if (result.success) {
-        message.success(result.message);
-      } else {
-        message.warning(result.message);
-      }
+      if (result.test_id) connectWs(result.test_id);
     } catch (e: any) {
       message.error(e.message);
-    } finally {
       setTestingWl(false);
     }
   };
 
+  // WebSocket 关闭后恢复按钮
+  useEffect(() => {
+    if (!wsRef.current) {
+      setTesting(false);
+      setTestingWl(false);
+    }
+  }, [logs.length === 0]);
+
+  const logColors: Record<string, string> = {
+    error: '#ff4d4f',
+    success: '#52c41a',
+    warning: '#faad14',
+    info: '#333',
+  };
+
   return (
-    <div>
-      <h2>代理配置</h2>
-      <Form form={form} layout="vertical" style={{ maxWidth: 600 }}>
-        <Card title="代理设置" size="small" style={{ marginBottom: 16 }}>
-          <Form.Item name="enabled" label="启用代理" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item name="api_url" label="代理API地址">
-            <Input placeholder="http://op.xiequ.cn/...?act=get" />
-          </Form.Item>
-          <Form.Item name="http" label="静态HTTP代理">
-            <Input placeholder="http://ip:port" />
-          </Form.Item>
-          <Form.Item name="https" label="静态HTTPS代理">
-            <Input placeholder="http://ip:port" />
-          </Form.Item>
-          <Button onClick={handleTestProxy} loading={testing}>测试代理</Button>
-        </Card>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <h2 style={{ margin: 0 }}>代理配置</h2>
+        <Button type="primary" onClick={handleSave} loading={loading}>保存配置</Button>
+      </div>
 
-        <Card title="白名单管理" size="small">
-          <Form.Item name="whitelist_enabled" label="启用白名单自动管理" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item name="whitelist_uid" label="协固UID">
-            <Input placeholder="如: 99769" />
-          </Form.Item>
-          <Form.Item name="whitelist_ukey" label="协固UKEY">
-            <Input placeholder="如: C99371082B965B70F46DCAA87A04618B" />
-          </Form.Item>
-          <Button onClick={handleTestWhitelist} loading={testingWl}>测试白名单</Button>
-        </Card>
-
-        <Divider />
-        <Space>
-          <Button type="primary" onClick={handleSave} loading={loading}>保存配置</Button>
-        </Space>
+      <Form
+        form={form}
+        layout="vertical"
+        disabled={!configLoaded}
+        initialValues={{
+          enabled: false,
+          whitelist_enabled: false,
+          api_url: '',
+          http: '',
+          https: '',
+          whitelist_uid: '',
+          whitelist_ukey: '',
+        }}
+      >
+        <Row gutter={16}>
+          <Col span={12}>
+            <Card title="代理设置" size="small" style={{ marginBottom: 16 }}>
+              <Form.Item name="enabled" label="启用代理" valuePropName="checked">
+                <Switch />
+              </Form.Item>
+              <Form.Item name="api_url" label="代理API地址">
+                <Input placeholder="http://op.xiequ.cn/...?act=get" />
+              </Form.Item>
+              <Form.Item name="http" label="静态HTTP代理">
+                <Input placeholder="http://ip:port" />
+              </Form.Item>
+              <Form.Item name="https" label="静态HTTPS代理">
+                <Input placeholder="http://ip:port" />
+              </Form.Item>
+              <Button onClick={handleTestProxy} loading={testing}>测试代理</Button>
+            </Card>
+          </Col>
+          <Col span={12}>
+            <Card title="白名单管理" size="small" style={{ marginBottom: 16 }}>
+              <Form.Item name="whitelist_enabled" label="启用白名单自动管理" valuePropName="checked">
+                <Switch />
+              </Form.Item>
+              <Form.Item name="whitelist_uid" label="协固UID">
+                <Input placeholder="如: 99769" />
+              </Form.Item>
+              <Form.Item name="whitelist_ukey" label="协固UKEY">
+                <Input placeholder="如: C99371082B965B70F46DCAA87A04618B" />
+              </Form.Item>
+              <Button onClick={handleTestWhitelist} loading={testingWl}>测试白名单</Button>
+            </Card>
+          </Col>
+        </Row>
       </Form>
+
+      <Card
+        title="实时日志"
+        size="small"
+        style={{ flex: 1, minHeight: 200, overflow: 'auto' }}
+        styles={{ body: { maxHeight: 350, overflow: 'auto', fontFamily: 'monospace', fontSize: 12, padding: '8px 16px' } }}
+      >
+        {logs.length === 0 ? (
+          <span style={{ color: '#999' }}>点击"测试代理"或"测试白名单"查看日志</span>
+        ) : (
+          logs.map((log, i) => (
+            <div key={i} style={{ color: logColors[log.level] || '#333', lineHeight: '20px' }}>
+              {log.message}
+            </div>
+          ))
+        )}
+      </Card>
     </div>
   );
 }