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>
+    );
+}; 

src/components/ProxySwitch/index.tsx

@@ -42,7 +42,17 @@ interface CustomProxy {
     enabled?: boolean;
 }
 
-export const ProxySwitch: React.FC = () => {
+interface ProxySwitchProps {
+    proxyConfigs: ProxyConfig[];
+    currentProxy: ProxyConfig | null;
+    onProxyChange: (config: ProxyConfig) => void;
+}
+
+export const ProxySwitch: React.FC<ProxySwitchProps> = ({
+    proxyConfigs,
+    currentProxy,
+    onProxyChange,
+}) => {
     const [currentMode, setCurrentMode] = useState<string>('direct');
     const [customProxies, setCustomProxies] = useState<CustomProxy[]>([]);
 
@@ -126,12 +136,48 @@ export const ProxySwitch: React.FC = () => {
 
     const handleModeChange = async (mode: string) => {
         if (mode === 'setting') {
-            chrome.runtime.openOptionsPage?.();
+            await chrome.runtime.openOptionsPage?.();
             return;
         }
 
         if (mode === 'add') {
-            chrome.runtime.openOptionsPage?.();
+            try {
+                // 获取当前活动标签页
+                const [activeTab] = await chrome.tabs.query({ 
+                    active: true,
+                    currentWindow: true
+                });
+                const optionsUrl = chrome.runtime.getURL('/proxy/options.html');
+                
+                if (activeTab?.url === optionsUrl) {
+                    // 如果当前就在 options 页面，直接发消息触发添加代理
+                    chrome.tabs.sendMessage(activeTab.id!, {
+                        action: 'TRIGGER_ADD_PROXY'
+                    });
+                } else {
+                    // 如果不在 options 页面，创建新的
+                    const tab = await chrome.tabs.create({
+                        url: optionsUrl
+                    });
+
+                    // 等待页面加载完成
+                    const listener = (tabId: number, changeInfo: chrome.tabs.TabChangeInfo) => {
+                        if (tabId === tab.id && changeInfo.status === 'complete') {
+                            chrome.tabs.onUpdated.removeListener(listener);
+                            // 给页面一点时间完全初始化
+                            // setTimeout(() => {
+                                chrome.tabs.sendMessage(tab.id!, {
+                                    action: 'TRIGGER_ADD_PROXY'
+                                });
+                            // }, 500); // 减少延迟时间
+                        }
+                    };
+                    
+                    chrome.tabs.onUpdated.addListener(listener);
+                }
+            } catch (error) {
+                console.error('Failed to get current tab:', error);
+            }
             return;
         }