refactor(frontend): 优化抓包页面样式和布局

-调整接口地址显示方式- 重构按钮布局，采用垂直排列
- 统一按钮样式，设置最小宽度和字体大小- 更新导出数据按钮样式

frontend/package.json.md5

@@ -1 +1 @@
-ab1f461d7da532ffc0ddf7b22c308322
+98e3c997ed559906a235af48ee6be17d

frontend/src/pages/CapturePage.tsx

@@ -391,42 +391,40 @@ function CapturePage() {
                                 >
                                     {interfaces.map((iface) => (
                                         <Select.Option key={iface.name} value={iface.name}>
-                                            {iface.addresses.join(', ')}
+                                            {iface.addresses}
                                         </Select.Option>
                                     ))}
                                 </Select>
                             </div>
 
-                            <div style={{ display: 'flex', gap: 8 }}>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                                <Button
+                                <div style={{ display: 'flex', gap: 8 }}>
-                                    type="primary"
+                                    <Button
-                                    icon={<PlayCircleOutlined />}
+                                        type="primary"
-                                    onClick={startCapture}
+                                        icon={<PlayCircleOutlined />}
-                                    disabled={isCapturing || !selectedInterface}
+                                        onClick={startCapture}
-                                    loading={loading}
+                                        disabled={isCapturing || !selectedInterface}
-                                    style={{ flex: 1, height: 32 }}
+                                        loading={loading}
-                                >
+                                        style={{ flex: 1, height: 32, minWidth: 0, fontSize: 12 }}
-                                    开始抓包
+                                    >
-                                </Button>
+                                        开始抓包
-
+                                    </Button>
-                                <Button
+                                    <Button
-                                    danger
+                                        danger
-                                    icon={<StopOutlined />}
+                                        icon={<StopOutlined />}
-                                    onClick={stopCapture}
+                                        onClick={stopCapture}
-                                    disabled={!isCapturing}
+                                        disabled={!isCapturing}
-                                    loading={loading}
+                                        loading={loading}
-                                    style={{ flex: 1, height: 32 }}
+                                        style={{ flex: 1, height: 32, minWidth: 0, fontSize: 12 }}
-                                >
+                                    >
-                                    停止抓包
+                                        停止抓包
-                                </Button>
+                                    </Button>
-                            </div>
+                                </div>
-
-                            <div style={{ marginTop: 12 }}>
                                 <Button
                                     icon={<DownloadOutlined />}
                                     onClick={exportData}
                                     disabled={!capturedData.length}
-                                    style={{ width: '100%', height: 32 }}>
+                                    style={{ width: '100%', height: 32, fontSize: 14 }}>
                                     导出数据
                                 </Button>
                             </div>