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

-调整接口地址显示方式- 重构按钮布局,采用垂直排列
- 统一按钮样式,设置最小宽度和字体大小- 更新导出数据按钮样式
This commit is contained in:
hu xiaotong
2025-07-02 16:41:54 +08:00
parent 50281ce812
commit 2ddd9f2856
2 changed files with 26 additions and 28 deletions

View File

@@ -1 +1 @@
ab1f461d7da532ffc0ddf7b22c308322
98e3c997ed559906a235af48ee6be17d

View File

@@ -391,12 +391,13 @@ 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', flexDirection: 'column', gap: 8 }}>
<div style={{ display: 'flex', gap: 8 }}>
<Button
type="primary"
@@ -404,29 +405,26 @@ function CapturePage() {
onClick={startCapture}
disabled={isCapturing || !selectedInterface}
loading={loading}
style={{ flex: 1, height: 32 }}
style={{ flex: 1, height: 32, minWidth: 0, fontSize: 12 }}
>
</Button>
<Button
danger
icon={<StopOutlined />}
onClick={stopCapture}
disabled={!isCapturing}
loading={loading}
style={{ flex: 1, height: 32 }}
style={{ flex: 1, height: 32, minWidth: 0, fontSize: 12 }}
>
</Button>
</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>