example/lib/pages/demo_page.dart

@@ -288,6 +288,7 @@ class _DemoPageState extends State<DemoPage> {
                     style: TextStyle(
                       fontSize: 12,
                       color: Colors.grey[600],
+                      fontFamily: 'monospace',
                     ),
                     overflow: TextOverflow.ellipsis,
                   ),

example/lib/pages/dio_demo_page.dart

@@ -145,6 +145,7 @@ class _DioDemoPageState extends State<DioDemoPage> {
               child: const Text(
                 'dependencies:\n  dio: ^5.3.0',
                 style: TextStyle(
+                  fontFamily: 'monospace',
                   fontSize: 13,
                 ),
               ),
@@ -210,6 +211,7 @@ dio.interceptors.add(YxNetInspectorDioInterceptor());
 // 现在所有通过这个 Dio 实例的请求都会被自动记录
 final response = await dio.get('https://api.example.com/users');''',
                 style: TextStyle(
+                  fontFamily: 'monospace',
                   fontSize: 12,
                   height: 1.4,
                 ),

example/pubspec.lock

@@ -238,7 +238,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.0.2"
+    version: "1.0.0"
 sdks:
   dart: ">=3.7.0-0 <4.0.0"
   flutter: ">=3.18.0-18.0.pre.54"

lib/src/models/network_log_entry.dart

@@ -102,8 +102,8 @@ class NetworkLogEntry {
   String get formattedDuration {
     if (duration == null) return '未知';
     final ms = duration!.inMilliseconds;
-    if (ms < 1000) return '${ms} ms';
+    if (ms < 1000) return '${ms}毫秒';
-    return '${(ms / 1000).toStringAsFixed(1)} s';
+    return '${(ms / 1000).toStringAsFixed(1)}秒';
   }
 
   /// 获取显示URL（隐藏主机名简化显示）
@@ -116,15 +116,6 @@ class NetworkLogEntry {
     }
   }
 
-  String get hostUrl {
-    try {
-      final uri = Uri.parse(url);
-      return '${uri.host}';
-    } catch (e) {
-      return url;
-    }
-  }
-
   /// 创建副本并更新字段
   NetworkLogEntry copyWith({
     String? id,

lib/src/widgets/inspector_panel.dart

@@ -103,17 +103,15 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
         }
 
         if (_isFullScreen) {
-          // 全屏模式 - 考虑状态栏高度
+          // 全屏模式
           return Material(
             color: Colors.black.withValues(alpha: 0.5),
-            child: SafeArea(
             child: Container(
               width: MediaQuery.of(context).size.width,
-                height: double.infinity,
+              height: MediaQuery.of(context).size.height,
               color: widget.theme.backgroundColor,
               child: content,
             ),
-            ),
           );
         } else {
           // 对话框模式
@@ -135,7 +133,43 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
   }
 
   Widget _buildDetailHeader() {
-    final actions = [
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: widget.theme.primaryColor,
+        borderRadius: _isFullScreen
+            ? BorderRadius.zero
+            : const BorderRadius.only(
+                topLeft: Radius.circular(16),
+                topRight: Radius.circular(16),
+              ),
+      ),
+      child: Row(
+        children: [
+          IconButton(
+            onPressed: _hideLogDetail,
+            icon: const Icon(
+              Icons.arrow_back,
+              color: Colors.white,
+            ),
+            tooltip: '返回列表',
+          ),
+          const SizedBox(width: 8),
+          const Icon(
+            Icons.article_outlined,
+            color: Colors.white,
+            size: 24,
+          ),
+          const SizedBox(width: 8),
+          const Text(
+            '请求详情',
+            style: TextStyle(
+              color: Colors.white,
+              fontSize: 18,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+          const Spacer(),
           IconButton(
             onPressed: () => _copyLogDetails(_selectedLog!),
             icon: const Icon(
@@ -163,25 +197,13 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
             ),
             tooltip: '关闭',
           ),
-    ];
+        ],
+      ),
+    );
+  }
 
-    return _isFullScreen
+  Widget _buildHeader() {
-        ? AppBar(
+    return Container(
-            title: Text('请求详情'),
-            backgroundColor: widget.theme.primaryColor,
-            foregroundColor: Colors.white,
-            // excludeHeaderSemantics: false
-            leading: IconButton(
-              onPressed: _hideLogDetail,
-              icon: const Icon(
-                Icons.arrow_back,
-                color: Colors.white,
-              ),
-            ),
-            centerTitle: false,
-            actions: actions,
-          )
-        : Container(
       padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
         color: widget.theme.primaryColor,
@@ -194,16 +216,10 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
       ),
       child: Row(
         children: [
-                IconButton(
+          const Icon(Icons.network_check, color: Colors.white, size: 24),
-                  onPressed: _hideLogDetail,
+          const SizedBox(width: 8),
-                  icon: const Icon(
-                    Icons.arrow_back,
-                    color: Colors.white,
-                  ),
-                  tooltip: '返回列表',
-                ),
           const Text(
-                  '请求详情',
+            '网络检查器',
             style: TextStyle(
               color: Colors.white,
               fontSize: 18,
@@ -211,14 +227,6 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
             ),
           ),
           const Spacer(),
-                ...actions
-              ],
-            ),
-          );
-  }
-
-  Widget _buildHeader() {
-    final actions = [
           IconButton(
             onPressed: () {
               setState(() {
@@ -242,40 +250,6 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
             onPressed: widget.onClose,
             icon: const Icon(Icons.close, color: Colors.white),
           ),
-    ];
-    return _isFullScreen
-        ? AppBar(
-            title: Text('网络检查器'),
-            backgroundColor: widget.theme.primaryColor,
-            foregroundColor: Colors.white,
-            centerTitle: false,
-            actions: actions,
-          )
-        : Container(
-            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
-            decoration: BoxDecoration(
-              color: widget.theme.primaryColor,
-              borderRadius: _isFullScreen
-                  ? BorderRadius.zero
-                  : const BorderRadius.only(
-                      topLeft: Radius.circular(16),
-                      topRight: Radius.circular(16),
-                    ),
-            ),
-            child: Row(
-              children: [
-                const Icon(Icons.network_check, color: Colors.white, size: 24),
-                const SizedBox(width: 8),
-                const Text(
-                  '网络检查器',
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 18,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const Spacer(),
-                ...actions
         ],
       ),
     );
@@ -455,6 +429,35 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
           padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
           child: Row(
             children: [
+              // 状态指示器
+              Container(
+                width: 6,
+                height: 6,
+                decoration: BoxDecoration(
+                  color: log.statusColor,
+                  shape: BoxShape.circle,
+                ),
+              ),
+              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(
@@ -473,39 +476,8 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
                     const SizedBox(height: 2),
                     Row(
                       children: [
-                        // 状态指示器
-                        Container(
-                          width: 6,
-                          height: 6,
-                          decoration: BoxDecoration(
-                            color: log.statusColor,
-                            shape: BoxShape.circle,
-                          ),
-                        ),
-                        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),
-
                         Text(
-                          '${log.statusCode ?? "?"}   ${log.formattedDuration}',
+                          '${log.statusCode ?? "?"} • ${log.formattedDuration}',
                           style: TextStyle(
                             fontSize: 11,
                             color: log.statusColor,
@@ -520,7 +492,12 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
                             color: widget.theme.errorColor,
                           ),
                         ],
-                        Spacer(),
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+
               // 时间
               Text(
                 log.formattedTime.contains(' ')
@@ -531,10 +508,11 @@ class _YxInspectorPanelState extends State<YxInspectorPanel> {
                   color: widget.theme.secondaryTextColor,
                 ),
               ),
-                      ],
+              const SizedBox(width: 4),
-                    ),
+              Icon(
-                  ],
+                Icons.chevron_right,
-                ),
+                size: 16,
+                color: widget.theme.secondaryTextColor.withValues(alpha: 0.5),
               ),
             ],
           ),

lib/src/widgets/log_detail_page.dart

@@ -122,7 +122,6 @@ class YxLogDetailPage extends StatelessWidget {
               ],
             ),
             const SizedBox(height: 16),
-            _buildInfoRow('HOST', log.hostUrl, isUrl: true),
             _buildInfoRow('URL', log.displayUrl, isUrl: true),
             if (log.requestData != null) ...[
               const SizedBox(height: 8),
@@ -145,6 +144,7 @@ class YxLogDetailPage extends StatelessWidget {
                   _formatRequestBody(log.requestData),
                   style: TextStyle(
                     fontSize: 12,
+                    fontFamily: 'monospace',
                     color: theme.textColor,
                   ),
                 ),
@@ -199,6 +199,7 @@ class YxLogDetailPage extends StatelessWidget {
                   log.responseData.toString(),
                   style: TextStyle(
                     fontSize: 12,
+                    fontFamily: 'monospace',
                     color: theme.textColor,
                   ),
                 ),
@@ -256,6 +257,7 @@ class YxLogDetailPage extends StatelessWidget {
                 style: TextStyle(
                   color: theme.errorColor,
                   fontSize: 14,
+                  fontFamily: 'monospace',
                 ),
               ),
             ),
@@ -351,6 +353,7 @@ class YxLogDetailPage extends StatelessWidget {
                     value,
                     style: TextStyle(
                       fontSize: 12,
+                      fontFamily: 'monospace',
                       color: theme.primaryColor,
                     ),
                   )

pubspec.yaml

@@ -1,6 +1,6 @@
 name: yx_net_inspector
 description: A powerful network inspector with floating debug ball for Flutter apps. Monitor HTTP requests, responses, and debug network issues in real-time.
-version: 1.0.3
+version: 1.0.2
 homepage: https://github.com/your-username/yx_net_inspector
 
 environment: