ui v0.0.2-beta

src/components/AddProxyForm/index.css

@@ -0,0 +1,10 @@
+.add-proxy-form {
+    padding: 24px;
+}
+
+.form-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 24px;
+} 

src/components/AddProxyForm/index.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Form, Input, Select, InputNumber, Button, message } from 'antd';
+import { ProxyActionType } from '@/types/action';
+import './index.css';
+
+interface EditFormData {
+    name: string;
+    proxyType: string;
+    scheme?: string;
+    host?: string;
+    port?: number;
+    pacScript?: string;
+}
+
+export const AddProxyForm: React.FC = () => {
+    const [form] = Form.useForm<EditFormData>();
+
+    // 初始化表单
+    React.useEffect(() => {
+        form.setFieldsValue({
+            name: '',
+            proxyType: 'fixed_servers',
+            scheme: 'http',
+            host: '127.0.0.1',
+            port: 8080
+        });
+    }, []);
+
+    const handleSave = async () => {
+        try {
+            const values = await form.validateFields();
+            const newConfig = {
+                id: Date.now().toString(),
+                ...values,
+                enabled: false
+            };
+
+            const response = await chrome.runtime.sendMessage({
+                action: ProxyActionType.ADD_PROXY_CONFIG,
+                config: newConfig
+            });
+
+            if (response.success) {
+                message.success('添加成功');
+                window.close();  // 关闭窗口
+            }
+        } catch (error) {
+            console.error('Failed to add proxy:', error);
+            message.error('添加失败');
+        }
+    };
+
+    return (
+        <div className="add-proxy-form">
+            <Form
+                form={form}
+                layout="vertical"
+                onFinish={handleSave}
+            >
+                {/* 表单项与之前相同 */}
+                <Form.Item className="form-buttons">
+                    <Button type="primary" htmlType="submit">
+                        确定
+                    </Button>
+                    <Button onClick={() => window.close()}>
+                        取消
+                    </Button>
+                </Form.Item>
+            </Form>
+        </div>
+    );
+};