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 = ''; String _searchKeyword = '';
bool _showOnlyErrors = false; bool _showOnlyErrors = false;
bool _isFullScreen = false; bool _isFullScreen = false;
// 页面导航状态 // 页面导航状态
NetworkLogEntry? _selectedLog; NetworkLogEntry? _selectedLog;
bool _showDetailPage = false; bool _showDetailPage = false;
@ -73,7 +73,7 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
listenable: widget.controller, listenable: widget.controller,
builder: (context, child) { builder: (context, child) {
Widget content; Widget content;
if (_showDetailPage && _selectedLog != null) { if (_showDetailPage && _selectedLog != null) {
// 显示详情页面 // 显示详情页面
content = Column( content = Column(
@ -246,77 +246,89 @@ 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),
Expanded( Text(
child: _buildStatItem( '错误: $errorRequests',
'失败', style: TextStyle(
stats['errorRequests'].toString(), fontSize: 14,
Icons.error, color: widget.theme.errorColor,
widget.theme.errorColor, fontWeight: FontWeight.w600,
),
), ),
), ] else ...[
Expanded( Icon(
child: _buildStatItem( Icons.check_circle_outline,
'成功率', size: 16,
stats['successRate'], color: widget.theme.successColor,
Icons.percent, ),
widget.theme.warningColor, 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() { 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),
color: widget.theme.cardColor, 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( 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: [ children: [
// 第一行：方法、状态、时间 // 状态指示器
Row( Container(
children: [ width: 6,
Container( height: 6,
width: 8, decoration: BoxDecoration(
height: 8, color: log.statusColor,
decoration: BoxDecoration( shape: BoxShape.circle,
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,
),
),
],
), ),
const SizedBox(height: 8), const SizedBox(width: 8),
// 第二行：URL
// 方法标签
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( Text(
log.displayUrl, log.formattedTime.split(' ')[1], // 只显示时间部分
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 10,
color: widget.theme.secondaryTextColor, color: widget.theme.secondaryTextColor,
), ),
maxLines: 2,
overflow: TextOverflow.ellipsis,
), ),
const SizedBox(height: 8), const SizedBox(width: 4),
// 第三行：耗时和大小 Icon(
Row( Icons.chevron_right,
children: [ size: 16,
Text( color: widget.theme.secondaryTextColor.withValues(alpha: 0.5),
'耗时: ${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,
),
),
],
), ),
], ],
), ),
@ -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;
}
}
} }