背景
在 #66 和 #71 中，端口管理已经被规划为 DevEnv Manager 的重点增强功能：需要识别更多软件类型、显示证据和置信度、提供快捷操作、支持项目端口联动和历史画像。
但随着能力增强，端口管理页面会面临一个新问题：信息太多，界面容易拥挤、错位、表格变形，用户反而找不到重点。
因此需要单独优化端口管理界面布局。目标不是新增更多检测功能，而是重新组织现有和计划中的信息，让端口管理既专业又清爽。
总目标
端口管理页面应采用：
摘要优先 → 筛选分层 → 表格轻量 → 详情抽屉承载复杂信息 → 快捷操作按场景展示
最终体验：
用户先看到当前端口总体状态。
再通过筛选快速定位问题。
表格只展示最关键字段。
复杂证据、冲突原因、历史画像、项目联动放到右侧详情抽屉。
快捷操作只在详情或行内更多菜单里出现，不把表格挤爆。
一、推荐整体布局
建议端口管理使用五层布局：
1. 顶部状态摘要区
2. 搜索与快捷筛选区
3. 端口表格主体区
4. 右侧详情抽屉 / 详情面板
5. 底部或侧边的历史与项目联动区，可并入详情抽屉
不要把所有信息都堆在表格中。
二、顶部状态摘要区
顶部只显示总览级信息，帮助用户快速判断当前情况。
建议卡片：
监听端口
开发服务
数据库/中间件
桌面应用/WebView
高风险/系统服务
低置信度/未知
当前项目冲突
每个卡片只显示：
示例：
监听端口 18
开发服务 5
数据库 3
桌面应用 6
高风险 1
项目冲突 2
点击卡片可切换筛选条件。
UI 要求：
- 卡片不宜过高。
- 不展示长文字解释。
- 小屏时可横向滚动或变成两行紧凑卡片。
- 不要使用过多醒目颜色，避免页面花。
三、搜索与快捷筛选区
搜索区要放在表格上方，保持固定且清晰。
1. 搜索框
支持搜索：
- 端口号。
- PID。
- 进程名。
- 软件识别结果。
- 服务名。
- 路径关键词。
- 标签。
搜索框 placeholder：
2. 快捷筛选 chips
建议第一行筛选：
全部
监听中
开发服务
前端
后端
Python/AI
数据库
中间件
桌面应用
代理/调试
系统/高风险
低置信度
项目冲突
3. 高级筛选折叠
高级筛选不要默认展开，避免占空间。
高级筛选包括：
- 协议 TCP/UDP。
- 状态 LISTENING / ESTABLISHED / TIME_WAIT。
- 置信度 High / Medium / Low / Unknown / Conflict。
- 风险等级。
- 是否当前项目相关。
- 是否最近 7 天常见占用。
UI 要求：
普通用户只看快捷筛选。
高级用户点击“高级筛选”再展开。
四、端口表格主体区
表格必须轻量，只展示最重要信息。
1. 建议表格列
默认列建议：
端口
状态
识别结果
进程
PID
置信度
风险
快捷
不要默认展示：
- 完整 commandLine。
- 完整路径。
- 完整证据。
- 完整历史。
- 长说明文字。
这些全部放到详情抽屉。
2. 表格行展示示例
8080 | LISTENING | Steam WebView | steamwebhelper.exe | 1234 | High · 3证据 · 1冲突 | 普通 | ⋯
5173 | LISTENING | Vite Dev Server | node.exe | 2345 | High · 4证据 | 低 | ⋯
3306 | LISTENING | MySQL | mysqld.exe | 3308 | High · 3证据 | 谨慎 | ⋯
3. 表格密度
建议提供密度切换：
默认使用“舒适”，但不要太高。紧凑模式适合端口很多的用户。
4. 表格交互
- 点击一行：打开右侧详情抽屉。
- 双击 HTTP 服务：可尝试打开 localhost，但不建议默认这样做，避免误触。
- 行内只放 1 个“更多操作”按钮。
- 不要在每一行放一堆按钮。
5. 空状态
没有端口或无权限时，不要空白：
未发现监听端口，或当前权限不足。你可以刷新扫描，或以管理员运行以获取更多进程信息。
五、详情抽屉 / 右侧面板
复杂信息必须放到详情抽屉，不要塞表格。
1. 抽屉位置
建议右侧抽屉：
宽度 360–480px
小屏时改为底部抽屉或全屏详情页
2. 详情内容分区
详情抽屉建议分为 tab 或折叠 section：
概览
显示：
- 端口。
- 协议。
- 状态。
- 识别结果。
- 置信度。
- 风险等级。
- 简短建议。
证据
显示：
- 命中证据。
- 冲突证据。
- 评分过程。
- 为什么不是其他类型。
快捷操作
按类型展示：
- 通用操作。
- HTTP 操作。
- 项目操作。
- 数据库/中间件操作。
- 危险操作。
危险操作放最后，并且需要确认。
项目联动
如果已经分析项目，显示：
- 当前项目端口。
- 是否冲突。
- 占用进程是否属于当前项目。
- 修改端口预览入口。
历史
显示最近 7 天：
风险
显示：
- 是否建议结束。
- 结束可能影响什么。
- 是否系统/数据库/桌面应用。
3. 抽屉按钮规则
详情抽屉底部可以固定操作栏：
复制摘要
打开目录
打开 localhost
更多
危险操作例如结束进程不要作为主按钮长期醒目显示，应放在“更多 / 危险操作”区域。
六、冲突证据 UI 设计
冲突证据是重要信息，但不能占地方。
1. 表格只显示短 badge
示例：
或者：
2. hover / focus / click 展示摘要
鼠标悬停或键盘 focus 时显示短 tooltip：
端口 8080 常见于 Java Web，但进程 steamwebhelper.exe 明确指向 Steam，因此未标记为 Spring/Tomcat。
3. 完整信息放详情抽屉
tooltip 不展示完整评分过程，只展示一句摘要。
完整内容放：
4. 防错位要求
- Tooltip 自动避让边界。
- Tooltip 不被表格 overflow 截断。
- Tooltip 最大宽度固定。
- Tooltip 超长文本换行但不撑开表格。
- 表格列宽不因 tooltip 内容变化。
- badge 固定宽度或最大宽度。
- 小屏时点击打开 popover，而不是 hover。
七、快捷操作布局
快捷操作不能把表格挤满。
1. 行内操作
表格行内只保留：
或一个 ⋯ 菜单。
2. 更多菜单内容
根据端口类型动态显示：
通用：
复制端口
复制 PID
复制诊断摘要
打开进程目录
HTTP：
打开 127.0.0.1
打开 localhost
复制 curl
项目冲突：
数据库：
危险：
危险操作必须分组到最下面，并有分隔线和风险提示。
八、推荐页面草图
建议结构：
┌──────────────────────────────────────────────┐
│ 端口管理 │
│ 本机开发端口识别与安全处理 │
├──────────────────────────────────────────────┤
│ [监听 18] [开发 5] [数据库 3] [桌面 6] [冲突2] │
├──────────────────────────────────────────────┤
│ 搜索端口/进程/PID... [刷新] [导出] │
│ 全部 开发 前端 后端 Python 数据库 桌面 低置信度 │
├───────────────────────────────┬──────────────┤
│ 端口表格 │ 详情抽屉 │
│ 8080 Steam WebView High ... │ 8080 │
│ 5173 Vite High ... │ 识别：Steam │
│ 3306 MySQL High ... │ 证据 / 操作 │
└───────────────────────────────┴──────────────┘
如果窗口较窄：
九、响应式布局要求
宽屏
中等宽度
- 表格全宽。
- 详情以右侧 overlay 抽屉展示。
小窗口
- 摘要卡片变成横向滚动。
- 表格隐藏部分非关键列。
- 详情改为底部 drawer。
- hover 改为 click popover。
不得出现：
- 列错位。
- 按钮挤在一起。
- tooltip 被截断。
- 横向滚动无法操作。
- 证据文本撑爆行高。
十、信息优先级
默认第一眼只看：
这个端口是什么
是不是监听
哪个进程占用
可信不可信
有没有风险
是否和当前项目冲突
第二层再看：
为什么这么判断
有哪些冲突证据
能做哪些操作
历史上谁常占用
第三层才看：
完整 commandLine
完整路径
评分细节
脱敏后的历史记录
十一、文档和测试要求
更新：
docs/user-guide.mddocs/release-v1.5.2.mddocs/issues-57-72.md
测试或手动验收：
- 端口很多时页面不拥挤。
- 端口表格不展示长证据文本。
- 点击行能打开详情抽屉。
- hover 冲突 badge 显示短摘要。
- 完整证据在详情抽屉中查看。
- 小窗口无明显错位。
- 表格列不会被 commandLine 撑开。
- 行内操作不超过一个主按钮或一个更多菜单。
- 危险操作不作为默认主按钮。
- 详情抽屉关闭后表格状态不丢失。
验收标准
背景
在 #66 和 #71 中，端口管理已经被规划为 DevEnv Manager 的重点增强功能：需要识别更多软件类型、显示证据和置信度、提供快捷操作、支持项目端口联动和历史画像。
但随着能力增强，端口管理页面会面临一个新问题：信息太多，界面容易拥挤、错位、表格变形，用户反而找不到重点。
因此需要单独优化端口管理界面布局。目标不是新增更多检测功能，而是重新组织现有和计划中的信息，让端口管理既专业又清爽。
总目标
端口管理页面应采用：
最终体验：
一、推荐整体布局
建议端口管理使用五层布局：
不要把所有信息都堆在表格中。
二、顶部状态摘要区
顶部只显示总览级信息，帮助用户快速判断当前情况。
建议卡片：
每个卡片只显示：
示例：
点击卡片可切换筛选条件。
UI 要求：
三、搜索与快捷筛选区
搜索区要放在表格上方，保持固定且清晰。
1. 搜索框
支持搜索：
搜索框 placeholder：
2. 快捷筛选 chips
建议第一行筛选：
3. 高级筛选折叠
高级筛选不要默认展开，避免占空间。
高级筛选包括：
UI 要求：
四、端口表格主体区
表格必须轻量，只展示最重要信息。
1. 建议表格列
默认列建议：
不要默认展示：
这些全部放到详情抽屉。
2. 表格行展示示例
3. 表格密度
建议提供密度切换：
默认使用“舒适”，但不要太高。紧凑模式适合端口很多的用户。
4. 表格交互
5. 空状态
没有端口或无权限时，不要空白：
五、详情抽屉 / 右侧面板
复杂信息必须放到详情抽屉，不要塞表格。
1. 抽屉位置
建议右侧抽屉：
2. 详情内容分区
详情抽屉建议分为 tab 或折叠 section：
概览
显示：
证据
显示：
快捷操作
按类型展示：
危险操作放最后，并且需要确认。
项目联动
如果已经分析项目，显示：
历史
显示最近 7 天：
风险
显示：
3. 抽屉按钮规则
详情抽屉底部可以固定操作栏：
危险操作例如结束进程不要作为主按钮长期醒目显示，应放在“更多 / 危险操作”区域。
六、冲突证据 UI 设计
冲突证据是重要信息，但不能占地方。
1. 表格只显示短 badge
示例：
或者：
2. hover / focus / click 展示摘要
鼠标悬停或键盘 focus 时显示短 tooltip：
3. 完整信息放详情抽屉
tooltip 不展示完整评分过程，只展示一句摘要。
完整内容放：
4. 防错位要求
七、快捷操作布局
快捷操作不能把表格挤满。
1. 行内操作
表格行内只保留：
或一个
⋯菜单。2. 更多菜单内容
根据端口类型动态显示：
通用：
HTTP：
项目冲突：
数据库：
危险：
危险操作必须分组到最下面，并有分隔线和风险提示。
八、推荐页面草图
建议结构：
如果窗口较窄：
九、响应式布局要求
宽屏
中等宽度
小窗口
不得出现：
十、信息优先级
默认第一眼只看：
第二层再看：
第三层才看：
十一、文档和测试要求
更新：
docs/user-guide.mddocs/release-v1.5.2.mddocs/issues-57-72.md测试或手动验收：
验收标准
npm run build通过。