wangyang
/
yx_net_inspector_flutter
1
0
Fork 0
Code Pull Requests Actions Releases Activity

精简网络检查器界面设计 

- 简化统计信息区域：突出显示错误数量，成功时显示绿色状态
- 重新设计日志列表项：使用紧凑的行布局，突出重要信息
- 添加HTTP方法颜色编码：GET蓝色、POST绿色、PUT橙色、DELETE红色
- 优化错误显示：错误请求有红色边框，显示错误图标
- 移除搜索栏默认显示：节省界面空间，用户需要时可通过头部按钮打开
- 改进视觉层级：状态码、耗时、URL等关键信息更突出
- 提升排错效率：一眼就能看出请求状态和关键信息
This commit is contained in:
YuanXuan 2025-08-28 10:57:54 +08:00
parent 10a251dcf9
commit 72ca9ca94e
1 changed files with 179 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

330
lib/src/widgets/inspector_panel.dart
View File

@ -26,7 +26,7 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
String _searchKeyword = '';
bool _showOnlyErrors = false;
bool _isFullScreen = false;
// 页面导航状态
NetworkLogEntry? _selectedLog;
bool _showDetailPage = false;
@ -73,7 +73,7 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
listenable: widget.controller,
builder: (context, child) {
Widget content;
if (_showDetailPage && _selectedLog != null) {
// 显示详情页面
content = Column(
@ -246,77 +246,89 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
Widget _buildStatistics() {
final stats = widget.controller.getStatistics();
final totalRequests = stats['totalRequests'] as int;
final errorRequests = stats['errorRequests'] as int;
return Container(
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: widget.theme.backgroundColor,
border: Border(
bottom: BorderSide(
color: widget.theme.secondaryTextColor.withValues(alpha: 0.2),
width: 1,
),
),
),
child: Row(
children: [
Expanded(
child: _buildStatItem(
'总计',
stats['totalRequests'].toString(),
Icons.list,
widget.theme.primaryColor,
// 简化统计 - 只显示关键信息
Text(
'总请求: $totalRequests',
style: TextStyle(
fontSize: 14,
color: widget.theme.textColor,
fontWeight: FontWeight.w500,
),
),
Expanded(
child: _buildStatItem(
'成功',
stats['successRequests'].toString(),
Icons.check_circle,
widget.theme.successColor,
const SizedBox(width: 16),
if (errorRequests > 0) ...[
Icon(
Icons.error_outline,
size: 16,
color: widget.theme.errorColor,
),
),
Expanded(
child: _buildStatItem(
'失败',
stats['errorRequests'].toString(),
Icons.error,
widget.theme.errorColor,
const SizedBox(width: 4),
Text(
'错误: $errorRequests',
style: TextStyle(
fontSize: 14,
color: widget.theme.errorColor,
fontWeight: FontWeight.w600,
),
),
),
Expanded(
child: _buildStatItem(
'成功率',
stats['successRate'],
Icons.percent,
widget.theme.warningColor,
] else ...[
Icon(
Icons.check_circle_outline,
size: 16,
color: widget.theme.successColor,
),
const SizedBox(width: 4),
Text(
'全部成功',
style: TextStyle(
fontSize: 14,
color: widget.theme.successColor,
fontWeight: FontWeight.w500,
),
),
],
const Spacer(),
// 快速过滤按钮
if (errorRequests > 0)
TextButton.icon(
onPressed: () {
setState(() {
_showOnlyErrors = !_showOnlyErrors;
});
},
icon: Icon(
_showOnlyErrors ? Icons.clear : Icons.filter_list,
size: 16,
),
label: Text(_showOnlyErrors ? '显示全部' : '仅错误'),
style: TextButton.styleFrom(
foregroundColor: widget.theme.errorColor,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
minimumSize: Size.zero,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
),
),
],
),
);
}
Widget _buildStatItem(
String label,
String value,
IconData icon,
Color color,
) {
return Column(
children: [
Icon(icon, color: color, size: 20),
const SizedBox(height: 4),
Text(
value,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: color,
),
),
Text(
label,
style: TextStyle(
fontSize: 12,
color: widget.theme.secondaryTextColor,
),
),
],
);
}
Widget _buildSearchBar() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
@ -348,18 +360,6 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
},
),
),
const SizedBox(width: 8),
FilterChip(
label: const Text('仅显示错误'),
selected: _showOnlyErrors,
onSelected: (selected) {
setState(() {
_showOnlyErrors = selected;
});
},
selectedColor: widget.theme.errorColor.withValues(alpha: 0.2),
backgroundColor: widget.theme.cardColor,
),
],
),
);
@ -397,98 +397,109 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
}
Widget _buildLogItem(NetworkLogEntry log) {
return Card(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
color: widget.theme.cardColor,
return Container(
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
decoration: BoxDecoration(
color: widget.theme.cardColor,
borderRadius: BorderRadius.circular(6),
border: Border.all(
color: log.isSuccess
? Colors.transparent
: widget.theme.errorColor.withValues(alpha: 0.3),
width: log.isSuccess ? 0 : 1,
),
),
child: InkWell(
onTap: () {
_showLogDetail(log);
},
borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(6),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
child: Row(
children: [
// 第一行：方法、状态、时间
Row(
children: [
Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: log.statusColor,
shape: BoxShape.circle,
),
),
const SizedBox(width: 8),
Text(
log.method,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
color: widget.theme.textColor,
),
),
const SizedBox(width: 8),
Expanded(
child: Text(
log.statusText,
style: TextStyle(
color: log.statusColor,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
),
Text(
log.formattedTime,
style: TextStyle(
fontSize: 12,
color: widget.theme.secondaryTextColor,
),
),
],
// 状态指示器
Container(
width: 6,
height: 6,
decoration: BoxDecoration(
color: log.statusColor,
shape: BoxShape.circle,
),
),
const SizedBox(height: 8),
// 第二行：URL
const SizedBox(width: 8),
// 方法标签
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: _getMethodColor(log.method).withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4),
),
child: Text(
log.method,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: _getMethodColor(log.method),
),
),
),
const SizedBox(width: 8),
// URL和状态
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
log.displayUrl,
style: TextStyle(
fontSize: 13,
color: widget.theme.textColor,
fontWeight: FontWeight.w500,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 2),
Row(
children: [
Text(
'${log.statusCode ?? "?"} • ${log.formattedDuration}',
style: TextStyle(
fontSize: 11,
color: log.statusColor,
fontWeight: FontWeight.w500,
),
),
if (log.errorMessage != null) ...[
const SizedBox(width: 8),
Icon(
Icons.error_outline,
size: 12,
color: widget.theme.errorColor,
),
],
],
),
],
),
),
// 时间
Text(
log.displayUrl,
log.formattedTime.split(' ')[1], // 只显示时间部分
style: TextStyle(
fontSize: 12,
fontSize: 10,
color: widget.theme.secondaryTextColor,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
// 第三行：耗时和大小
Row(
children: [
Text(
'耗时: ${log.formattedDuration}',
style: TextStyle(
fontSize: 12,
color: widget.theme.secondaryTextColor,
),
),
const SizedBox(width: 16),
Text(
'大小: ${log.requestSize + log.responseSize} B',
style: TextStyle(
fontSize: 12,
color: widget.theme.secondaryTextColor,
),
),
const Spacer(),
Icon(
Icons.arrow_forward_ios,
size: 16,
color: widget.theme.secondaryTextColor.withValues(
alpha: 0.6,
),
),
],
const SizedBox(width: 4),
Icon(
Icons.chevron_right,
size: 16,
color: widget.theme.secondaryTextColor.withValues(alpha: 0.5),
),
],
),
@ -496,4 +507,21 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
),
);
}
Color _getMethodColor(String method) {
switch (method.toUpperCase()) {
case 'GET':
return Colors.blue;
case 'POST':
return Colors.green;
case 'PUT':
return Colors.orange;
case 'DELETE':
return Colors.red;
case 'PATCH':
return Colors.purple;
default:
return widget.theme.secondaryTextColor;
}
}
}