feat: enhance server card layout and add logo display functionality (#804)

lib/view/page/server/detail/view.dart

@@ -12,7 +12,6 @@ import 'package:server_box/data/model/server/battery.dart';
 import 'package:server_box/data/model/server/cpu.dart';
 import 'package:server_box/data/model/server/disk.dart';
 import 'package:server_box/data/model/server/disk_smart.dart';
-import 'package:server_box/data/model/server/dist.dart';
 import 'package:server_box/data/model/server/net_speed.dart';
 import 'package:server_box/data/model/server/nvdia.dart';
 import 'package:server_box/data/model/server/sensors.dart';
@@ -22,6 +21,8 @@ import 'package:server_box/data/model/server/system.dart';
 import 'package:server_box/data/res/store.dart';
 import 'package:server_box/view/page/pve.dart';
 import 'package:server_box/view/page/server/edit.dart';
+import 'package:server_box/view/page/server/logo.dart';
+
 import 'package:server_box/view/widget/server_func_btns.dart';
 
 part 'misc.dart';
@@ -132,20 +133,15 @@ class _ServerDetailPageState extends State<ServerDetailPage> with SingleTickerPr
   }
 
   Widget? _buildLogo(Server si) {
-    var logoUrl = si.spi.custom?.logoUrl ?? _settings.serverLogoUrl.fetch().selfNotEmptyOrNull;
-    if (logoUrl == null) return null;
-
-    final dist = si.status.more[StatusCmdType.sys]?.dist;
-    if (dist != null) {
-      logoUrl = logoUrl.replaceFirst('{DIST}', dist.name);
-    }
-    logoUrl = logoUrl.replaceFirst('{BRIGHT}', context.isDark ? 'dark' : 'light');
+    final logoUrl = si.getLogoUrl(context);
 
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 13),
       child: LayoutBuilder(
         builder: (_, cons) {
-          if (logoUrl == null) return UIs.placeholder;
+          if (logoUrl == null) {
+            return UIs.placeholder;
+          }
           return ExtendedImage.network(
             logoUrl,
             cache: true,
@@ -700,10 +696,9 @@ class _ServerDetailPageState extends State<ServerDetailPage> with SingleTickerPr
       child: MarkdownBody(
         data: '- $markdown',
         selectable: true,
-        styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)).copyWith(
-          p: UIs.text13Grey,
-          h2: UIs.text15,
-        ),
+        styleSheet: MarkdownStyleSheet.fromTheme(
+          Theme.of(context),
+        ).copyWith(p: UIs.text13Grey, h2: UIs.text15),
       ),
       actions: Btnx.oks,
     );

lib/view/page/server/logo.dart

@@ -0,0 +1,21 @@
+import 'package:fl_lib/fl_lib.dart';
+import 'package:flutter/material.dart';
+import 'package:server_box/data/model/app/shell_func.dart';
+import 'package:server_box/data/model/server/dist.dart';
+import 'package:server_box/data/model/server/server.dart';
+import 'package:server_box/data/res/store.dart';
+
+extension LogoExt on Server {
+  String? getLogoUrl(BuildContext context) {
+    var logoUrl = spi.custom?.logoUrl ?? Stores.setting.serverLogoUrl.fetch().selfNotEmptyOrNull;
+    if (logoUrl == null) {
+      return null;
+    }
+    final dist = status.more[StatusCmdType.sys]?.dist;
+    if (dist != null) {
+      logoUrl = logoUrl.replaceFirst('{DIST}', dist.name);
+    }
+    logoUrl = logoUrl.replaceFirst('{BRIGHT}', context.isDark ? 'dark' : 'light');
+    return logoUrl;
+  }
+}

lib/view/page/server/tab/content.dart

@@ -2,18 +2,41 @@ part of 'tab.dart';
 
 extension on _ServerPageState {
   Widget _buildServerCardTitle(Server s) {
+    const width = 16.0, height = 16.0;
+
+    final logoUrl = s.getLogoUrl(context);
+    if (logoUrl == null) {
+      return const SizedBox(width: width, height: height);
+    }
+
     return Padding(
       padding: const EdgeInsets.only(left: 7, right: 13),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          LayoutBuilder(
-            builder: (_, cons) {
-              return ConstrainedBox(
-                constraints: BoxConstraints(maxWidth: cons.maxWidth / 2.3),
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              SizedBox(
+                width: width,
+                height: height,
+                child: ExtendedImage.network(
+                  logoUrl,
+                  cache: true,
+                  fit: BoxFit.contain,
+                  loadStateChanged: (state) {
+                    if (state.extendedImageLoadState == LoadState.failed) {
+                      return const SizedBox(width: width, height: height);
+                    }
+                    return null;
+                  },
+                ),
+              ),
+              const SizedBox(width: 6),
+              Flexible(
                 child: Text(s.spi.name, style: UIs.text13Bold, maxLines: 1, overflow: TextOverflow.ellipsis),
-              );
-            },
+              ),
+            ],
           ),
           const Icon(Icons.keyboard_arrow_right, size: 17, color: Colors.grey),
           const Spacer(),

lib/view/page/server/tab/tab.dart

@@ -3,6 +3,7 @@
 import 'dart:async';
 import 'dart:math' as math;
 
+import 'package:extended_image/extended_image.dart';
 import 'package:fl_lib/fl_lib.dart';
 import 'package:flutter/material.dart';
 import 'package:icons_plus/icons_plus.dart';
@@ -20,6 +21,7 @@ import 'package:server_box/data/res/build_data.dart';
 import 'package:server_box/data/res/store.dart';
 import 'package:server_box/view/page/server/detail/view.dart';
 import 'package:server_box/view/page/server/edit.dart';
+import 'package:server_box/view/page/server/logo.dart';
 import 'package:server_box/view/page/setting/entry.dart';
 import 'package:server_box/view/widget/percent_circle.dart';
 import 'package:server_box/view/widget/server_func_btns.dart';