feat: 更新 H5 壳的加载界面；优化进度指示器和背景绘制

lib/main.dart

@@ -319,13 +319,15 @@ class _H5ShellPageState extends State<H5ShellPage> {
           bottom: false,
           child: Stack(
             children: [
-              const Positioned.fill(child: _ShellFallback()),
+              Positioned.fill(child: _ShellFallback(progress: _progress)),
               WebViewWidget(controller: _controller),
               if (_showShellCover)
-                const Positioned.fill(
+                Positioned.fill(
-                  child: IgnorePointer(child: _ShellFallback()),
+                  child: IgnorePointer(
+                    child: _ShellFallback(progress: _progress),
+                  ),
                 ),
-              if (_progress < 100)
+              if (!_showShellCover && _progress < 100)
                 LinearProgressIndicator(
                   value: _progress == 0 ? null : _progress / 100,
                   minHeight: 2,
@@ -385,131 +387,266 @@ class _ErrorPanel extends StatelessWidget {
 }
 
 class _ShellFallback extends StatelessWidget {
-  const _ShellFallback();
+  const _ShellFallback({required this.progress});
+
+  final int progress;
 
   @override
   Widget build(BuildContext context) {
-    return DecoratedBox(
+    final progressValue =
-      decoration: const BoxDecoration(
+        progress <= 0 ? 0.42 : (0.18 + progress.clamp(0, 100) * 0.0074);
-        gradient: LinearGradient(
+
-          begin: Alignment.topCenter,
+    return CustomPaint(
-          end: Alignment.bottomCenter,
+      painter: const _H5LoadingBackgroundPainter(),
-          colors: [
+      child: LayoutBuilder(
-            Color(0xFFE7F4FF),
+        builder: (context, constraints) {
-            _shellBackground,
+          final markSize = (constraints.maxWidth * 0.37).clamp(118.0, 152.0);
-            Colors.white,
+          final contentTop = constraints.maxHeight * 0.29;
-          ],
+          final progressWidth =
-          stops: [0, 0.44, 1],
+              (constraints.maxWidth * 0.28).clamp(104.0, 132.0);
-        ),
+
-      ),
+          return Align(
-      child: Stack(
+            alignment: Alignment.topCenter,
-        children: [
+            child: Padding(
-          const Positioned(
+              padding: EdgeInsets.only(top: contentTop),
-            top: 44,
+              child: Column(
-            right: -72,
+                mainAxisSize: MainAxisSize.min,
-            child: _SoftCircle(size: 190, opacity: 0.42),
+                children: [
-          ),
+                  _ShellMark(size: markSize),
-          const Positioned(
+                  SizedBox(height: markSize * 0.16),
-            top: 210,
+                  const Text(
-            left: -44,
+                    '心有回响',
-            child: _SoftCircle(size: 160, opacity: 0.34),
+                    style: TextStyle(
-          ),
+                      color: _shellAccent,
-          const Positioned(
+                      fontSize: 24,
-            right: -54,
+                      height: 1.2,
-            bottom: 250,
+                      fontWeight: FontWeight.w700,
-            child: _SoftCircle(size: 220, opacity: 0.38),
+                      letterSpacing: 0,
-          ),
+                    ),
-          Center(
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: const [
-                _ShellMark(),
-                SizedBox(height: 26),
-                Text(
-                  '心有回响',
-                  style: TextStyle(
-                    color: _shellAccent,
-                    fontSize: 26,
-                    height: 1.2,
-                    fontWeight: FontWeight.w700,
-                    letterSpacing: 0,
                   ),
-                ),
+                  const SizedBox(height: 8),
-                SizedBox(height: 10),
+                  const Text(
-                Text(
+                    '正在为你唤醒会话',
-                  '正在为你唤醒会话',
+                    style: TextStyle(
-                  style: TextStyle(
+                      color: _shellSubText,
-                    color: _shellSubText,
+                      fontSize: 12,
-                    fontSize: 13,
+                      height: 1.2,
-                    height: 1.2,
+                      letterSpacing: 0,
-                    letterSpacing: 0,
+                    ),
                   ),
-                ),
+                  const SizedBox(height: 30),
-                SizedBox(height: 32),
+                  _H5LoadingProgress(
-                SizedBox(
+                    width: progressWidth,
-                  width: 110,
+                    value: progressValue.clamp(0.18, 0.96),
-                  child: LinearProgressIndicator(
-                    minHeight: 3,
-                    backgroundColor: Color(0xFFDCEEFF),
-                    color: _shellAccent,
                   ),
-                ),
+                ],
-              ],
+              ),
             ),
-          ),
+          );
-        ],
+        },
       ),
     );
   }
 }
 
 class _ShellMark extends StatelessWidget {
-  const _ShellMark();
+  const _ShellMark({required this.size});
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      width: 126,
-      height: 126,
-      decoration: BoxDecoration(
-        shape: BoxShape.circle,
-        gradient: const LinearGradient(
-          begin: Alignment.topLeft,
-          end: Alignment.bottomRight,
-          colors: [Color(0xFFA8DDFF), _shellAccent, Color(0xFF0066E8)],
-        ),
-        boxShadow: [
-          BoxShadow(
-            color: _shellAccent.withValues(alpha: 0.2),
-            blurRadius: 34,
-            offset: const Offset(0, 18),
-          ),
-        ],
-      ),
-      child: const Icon(
-        Icons.check_rounded,
-        color: Colors.white,
-        size: 82,
-      ),
-    );
-  }
-}
-
-class _SoftCircle extends StatelessWidget {
-  const _SoftCircle({required this.size, required this.opacity});
 
   final double size;
-  final double opacity;
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return CustomPaint(
-      width: size,
+      size: Size(size, size * 0.92),
-      height: size,
+      painter: const _BubbleCheckPainter(),
-      decoration: BoxDecoration(
+    );
-        shape: BoxShape.circle,
+  }
-        color: const Color(0xFFBFE4FF).withValues(alpha: opacity),
+}
+
+class _H5LoadingProgress extends StatelessWidget {
+  const _H5LoadingProgress({required this.width, required this.value});
+
+  final double width;
+  final double value;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(99),
+      child: SizedBox(
+        width: width,
+        height: 4,
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            const ColoredBox(color: Color(0xFFDCEEFF)),
+            TweenAnimationBuilder<double>(
+              tween: Tween<double>(end: value),
+              duration: const Duration(milliseconds: 260),
+              curve: Curves.easeOutCubic,
+              builder: (context, animatedValue, _) {
+                return FractionallySizedBox(
+                  alignment: Alignment.centerLeft,
+                  widthFactor: animatedValue,
+                  child: const ColoredBox(color: _shellAccent),
+                );
+              },
+            ),
+          ],
+        ),
       ),
     );
   }
 }
+
+class _H5LoadingBackgroundPainter extends CustomPainter {
+  const _H5LoadingBackgroundPainter();
+
+  static const _sourceSize = Size(1080, 2400);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final scale =
+        (size.width / _sourceSize.width) > (size.height / _sourceSize.height)
+            ? size.width / _sourceSize.width
+            : size.height / _sourceSize.height;
+    final dx = (size.width - _sourceSize.width * scale) / 2;
+    final dy = (size.height - _sourceSize.height * scale) / 2;
+
+    canvas.save();
+    canvas.translate(dx, dy);
+    canvas.scale(scale);
+
+    final pageRect = Offset.zero & _sourceSize;
+    final pagePaint = Paint()
+      ..shader = const LinearGradient(
+        begin: Alignment.topCenter,
+        end: Alignment.bottomCenter,
+        colors: [
+          Color(0xFFE7F4FF),
+          _shellBackground,
+          Colors.white,
+        ],
+        stops: [0, 0.46, 1],
+      ).createShader(pageRect);
+    canvas.drawRect(pageRect, pagePaint);
+
+    final topWave = Path()
+      ..moveTo(0, 0)
+      ..lineTo(1080, 0)
+      ..lineTo(1080, 318)
+      ..cubicTo(920, 246, 780, 246, 660, 318)
+      ..cubicTo(512, 407, 387, 410, 284, 348)
+      ..cubicTo(174, 282, 79, 281, 0, 344)
+      ..close();
+    canvas.drawPath(
+      topWave,
+      Paint()..color = const Color(0xFFDDF1FF).withValues(alpha: 0.68),
+    );
+
+    final bottomWave = Path()
+      ..moveTo(1080, 855)
+      ..lineTo(1080, 2400)
+      ..lineTo(0, 2400)
+      ..lineTo(0, 1942)
+      ..cubicTo(124, 1854, 265, 1834, 423, 1883)
+      ..cubicTo(598, 1937, 744, 1905, 862, 1788)
+      ..cubicTo(934, 1717, 1007, 1678, 1080, 1672)
+      ..close();
+    canvas.drawPath(
+      bottomWave,
+      Paint()..color = const Color(0xFFF4FAFF).withValues(alpha: 0.86),
+    );
+
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(covariant _H5LoadingBackgroundPainter oldDelegate) {
+    return false;
+  }
+}
+
+class _BubbleCheckPainter extends CustomPainter {
+  const _BubbleCheckPainter();
+
+  static const _viewBox = Size(400, 363.33);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final scale =
+        (size.width / _viewBox.width) < (size.height / _viewBox.height)
+            ? size.width / _viewBox.width
+            : size.height / _viewBox.height;
+    final dx = (size.width - _viewBox.width * scale) / 2;
+    final dy = (size.height - _viewBox.height * scale) / 2;
+
+    canvas.save();
+    canvas.translate(dx, dy);
+    canvas.scale(scale);
+
+    final bubble = Path()
+      ..moveTo(200, 0)
+      ..cubicTo(89.54, 0, 0, 81.33, 0, 181.67)
+      ..cubicTo(0, 282, 89.54, 363.33, 200, 363.33)
+      ..cubicTo(237.89, 363.33, 273.32, 353.77, 303.52, 337.16)
+      ..lineTo(386.67, 363.33)
+      ..lineTo(355.95, 290.69)
+      ..cubicTo(383.61, 260.37, 400, 222.36, 400, 181.67)
+      ..cubicTo(400, 81.33, 310.46, 0, 200, 0)
+      ..close();
+
+    final shadowPaint = Paint()
+      ..color = const Color(0xFF026CD5).withValues(alpha: 0.18)
+      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 34);
+    canvas.save();
+    canvas.translate(0, 30);
+    canvas.drawPath(bubble, shadowPaint);
+    canvas.restore();
+
+    final bubblePaint = Paint()
+      ..shader = const LinearGradient(
+        begin: Alignment.topLeft,
+        end: Alignment.bottomRight,
+        colors: [
+          Color(0xFFA8DDFF),
+          _shellAccent,
+          Color(0xFF0066E8),
+        ],
+        stops: [0, 0.48, 1],
+      ).createShader(Offset.zero & _viewBox);
+    canvas.drawPath(bubble, bubblePaint);
+
+    final highlightPaint = Paint()
+      ..shader = LinearGradient(
+        begin: Alignment.topLeft,
+        end: Alignment.bottomRight,
+        colors: [
+          Colors.white.withValues(alpha: 0.38),
+          Colors.white.withValues(alpha: 0),
+        ],
+      ).createShader(Offset.zero & _viewBox);
+    canvas.drawPath(bubble, highlightPaint);
+
+    final check = Path()
+      ..moveTo(101, 163.5)
+      ..lineTo(170.5, 233)
+      ..lineTo(306, 97.5);
+    canvas.drawPath(
+      check,
+      Paint()
+        ..color = Colors.white
+        ..style = PaintingStyle.stroke
+        ..strokeWidth = 58
+        ..strokeCap = StrokeCap.round
+        ..strokeJoin = StrokeJoin.round,
+    );
+
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(covariant _BubbleCheckPainter oldDelegate) {
+    return false;
+  }
+}