kever/wails-epic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
-调整接口地址显示方式- 重构按钮布局，采用垂直排列
- 统一按钮样式，设置最小宽度和字体大小- 更新导出数据按钮样式
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
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json.md5
View File

@@ -1 +1 @@
ab1f461d7da532ffc0ddf7b22c308322
98e3c997ed559906a235af48ee6be17d

52
frontend/src/pages/CapturePage.tsx
View File

@@ -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 }}>
<Button
type="primary"
icon={<PlayCircleOutlined />}
onClick={startCapture}
disabled={isCapturing || !selectedInterface}
loading={loading}
style={{ flex: 1, height: 32 }}
>
开始抓包
</Button>
<Button
danger
icon={<StopOutlined />}
onClick={stopCapture}
disabled={!isCapturing}
loading={loading}
style={{ flex: 1, height: 32 }}
>
停止抓包
</Button>
</div>
<div style={{ marginTop: 12 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
<div style={{ display: 'flex', gap: 8 }}>
<Button
type="primary"
icon={<PlayCircleOutlined />}
onClick={startCapture}
disabled={isCapturing || !selectedInterface}
loading={loading}
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, minWidth: 0, fontSize: 12 }}
>
停止抓包
</Button>
</div>
<Button
icon={<DownloadOutlined />}
onClick={exportData}
disabled={!capturedData.length}
style={{ width: '100%', height: 32 }}>
style={{ width: '100%', height: 32, fontSize: 14 }}>
导出数据
</Button>
</div>