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

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

@ -246,41 +246,82 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
Widget _buildStatistics() { Widget _buildStatistics() {
final stats = widget.controller.getStatistics(); final stats = widget.controller.getStatistics();
final totalRequests = stats['totalRequests'] as int;
final errorRequests = stats['errorRequests'] as int;
return Container( 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( child: Row(
children: [ children: [
Expanded( // 简化统计 - 只显示关键信息
child: _buildStatItem( Text(
'总计', '总请求: $totalRequests',
stats['totalRequests'].toString(), style: TextStyle(
Icons.list, fontSize: 14,
widget.theme.primaryColor, color: widget.theme.textColor,
fontWeight: FontWeight.w500,
), ),
), ),
Expanded( const SizedBox(width: 16),
child: _buildStatItem( if (errorRequests > 0) ...[
'成功', Icon(
stats['successRequests'].toString(), Icons.error_outline,
Icons.check_circle, size: 16,
widget.theme.successColor, color: widget.theme.errorColor,
),
const SizedBox(width: 4),
Text(
'错误: $errorRequests',
style: TextStyle(
fontSize: 14,
color: widget.theme.errorColor,
fontWeight: FontWeight.w600,
), ),
), ),
Expanded( ] else ...[
child: _buildStatItem( Icon(
'失败', Icons.check_circle_outline,
stats['errorRequests'].toString(), size: 16,
Icons.error, color: widget.theme.successColor,
widget.theme.errorColor, ),
const SizedBox(width: 4),
Text(
'全部成功',
style: TextStyle(
fontSize: 14,
color: widget.theme.successColor,
fontWeight: FontWeight.w500,
), ),
), ),
Expanded( ],
child: _buildStatItem( const Spacer(),
'成功率', // 快速过滤按钮
stats['successRate'], if (errorRequests > 0)
Icons.percent, TextButton.icon(
widget.theme.warningColor, 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,
), ),
), ),
], ],
@ -288,35 +329,6 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
); );
} }
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() { Widget _buildSearchBar() {
return Container( return Container(
padding: const EdgeInsets.symmetric(horizontal: 16), 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) { Widget _buildLogItem(NetworkLogEntry log) {
return Card( return Container(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4), margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
decoration: BoxDecoration(
color: widget.theme.cardColor, 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( child: InkWell(
onTap: () { onTap: () {
_showLogDetail(log); _showLogDetail(log);
}, },
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(6),
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
child: Column( child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 第一行：方法、状态、时间
Row(
children: [ children: [
// 状态指示器
Container( Container(
width: 8, width: 6,
height: 8, height: 6,
decoration: BoxDecoration( decoration: BoxDecoration(
color: log.statusColor, color: log.statusColor,
shape: BoxShape.circle, shape: BoxShape.circle,
), ),
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
Text(
// 方法标签
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, log.method,
style: TextStyle( style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 14, color: _getMethodColor(log.method),
color: widget.theme.textColor, ),
), ),
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
// URL和状态
Expanded( Expanded(
child: Text( child: Column(
log.statusText, crossAxisAlignment: CrossAxisAlignment.start,
style: TextStyle( children: [
color: log.statusColor,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
),
Text(
log.formattedTime,
style: TextStyle(
fontSize: 12,
color: widget.theme.secondaryTextColor,
),
),
],
),
const SizedBox(height: 8),
// 第二行：URL
Text( Text(
log.displayUrl, log.displayUrl,
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 13,
color: widget.theme.secondaryTextColor, color: widget.theme.textColor,
fontWeight: FontWeight.w500,
), ),
maxLines: 2, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
const SizedBox(height: 8), const SizedBox(height: 2),
// 第三行：耗时和大小
Row( Row(
children: [ children: [
Text( Text(
'耗时: ${log.formattedDuration}', '${log.statusCode ?? "?"} • ${log.formattedDuration}',
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 11,
color: widget.theme.secondaryTextColor, color: log.statusColor,
fontWeight: FontWeight.w500,
), ),
), ),
const SizedBox(width: 16), if (log.errorMessage != null) ...[
Text( const SizedBox(width: 8),
'大小: ${log.requestSize + log.responseSize} B',
style: TextStyle(
fontSize: 12,
color: widget.theme.secondaryTextColor,
),
),
const Spacer(),
Icon( Icon(
Icons.arrow_forward_ios, Icons.error_outline,
size: 16, size: 12,
color: widget.theme.secondaryTextColor.withValues( color: widget.theme.errorColor,
alpha: 0.6,
),
), ),
], ],
],
),
],
),
),
// 时间
Text(
log.formattedTime.split(' ')[1], // 只显示时间部分
style: TextStyle(
fontSize: 10,
color: widget.theme.secondaryTextColor,
),
),
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;
}
}
} }