add proxy switch demo

src/pages/OptionsPage/index.tsx

@@ -103,17 +103,21 @@ export const OptionsPage: React.FC = () => {
     }, []);
 
     useEffect(() => {
+        // 加载日志
         const loadLogs = async () => {
             const result = await chrome.storage.local.get('proxyLogs');
             setProxyLogs(result.proxyLogs || []);
         };
+        
         loadLogs();
 
+        // 监听存储变化
         const handleStorageChange = (changes: StorageChanges) => {
             if (changes.proxyLogs) {
-                setProxyLogs(changes.proxyLogs.newValue);
+                setProxyLogs(changes.proxyLogs.newValue || []);
             }
         };
+        
         chrome.storage.onChanged.addListener(handleStorageChange);
         return () => chrome.storage.onChanged.removeListener(handleStorageChange);
     }, []);
@@ -235,6 +239,22 @@ export const OptionsPage: React.FC = () => {
         }
     };
 
+    const handleClearLogs = () => {
+        chrome.runtime.sendMessage({
+            action: ProxyActionType.CLEAR_PROXY_LOGS
+        }, (response) => {
+            if (chrome.runtime.lastError) {
+                message.error(chrome.runtime.lastError.message || '清除日志失败');
+                return;
+            }
+            if (response?.success) {
+                message.success('日志已清除');
+            } else {
+                message.error(response?.error || '清除日志失败');
+            }
+        });
+    };
+
     return (
         <Layout className="options-page">
             <Content style={contentStyle}>
@@ -370,11 +390,33 @@ export const OptionsPage: React.FC = () => {
                             key: 'logs',
                             label: '代理日志',
                             children: (
-                                <Table 
-                                    dataSource={proxyLogs}
-                                    columns={columns}
-                                    pagination={{ pageSize: 50 }}
-                                />
+                                <>
+                                    <div style={{ 
+                                        marginBottom: 16, 
+                                        display: 'flex', 
+                                        justifyContent: 'flex-end' 
+                                    }}>
+                                        <Button 
+                                            danger 
+                                            onClick={handleClearLogs}
+                                            icon={<DeleteOutlined />}
+                                        >
+                                            清除日志
+                                        </Button>
+                                    </div>
+                                    <Table 
+                                        dataSource={proxyLogs}
+                                        columns={columns}
+                                        pagination={{ 
+                                            pageSize: 10,
+                                            showSizeChanger: true,
+                                            showQuickJumper: true,
+                                            showTotal: (total) => `共 ${total} 条`,
+                                            pageSizeOptions: ['10', '20', '50', '100']
+                                        }}
+                                        rowKey="id"
+                                    />
+                                </>
                             )
                         }
                     ]}

src/types/action.ts

@@ -1,15 +1,20 @@
+// export const ActionType = {
+//     CONNECT: "CONNECT",
+//     SEND_MESSAGE: "SEND_MESSAGE",
+//     DISCONNECT: "DISCONNECT",
+//     SET_PROXY: "SET_PROXY",
+//     CLEAR_PROXY: "CLEAR_PROXY",
+//     PROXY_STATUS: "PROXY_STATUS",
+//     INJECT_SCRIPT: "INJECT_SCRIPT"
+// } as const;
+
+// export type ActionType = typeof ActionType[keyof typeof ActionType];
+
 export const ProxyActionType = {
-    CONNECT: "CONNECT",
-    SEND_MESSAGE: "SEND_MESSAGE",
-    DISCONNECT: "DISCONNECT",
-    SET_PROXY: "SET_PROXY",
-    CLEAR_PROXY: "CLEAR_PROXY",
-    PROXY_STATUS: "PROXY_STATUS",
-    INJECT_SCRIPT: "INJECT_SCRIPT",
-    BADGE_COUNT: "BADGE_COUNT",
     SET_PROXY_CONFIG: "SET_PROXY_CONFIG",
     CLEAR_PROXY_CONFIG: "CLEAR_PROXY_CONFIG",
-    GET_PROXY_STATUS: "GET_PROXY_STATUS"
+    GET_PROXY_STATUS: "GET_PROXY_STATUS",
+    CLEAR_PROXY_LOGS: "CLEAR_PROXY_LOGS"
 } as const;
 
-export type ProxyActionType = typeof ProxyActionType[keyof typeof ProxyActionType];
+export type ProxyActionType = typeof ProxyActionType[keyof typeof ProxyActionType];