feat: 3D 化身帧轮播客户端（frames_url 轮播 + 空值降级静态图）

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

lib/features/profile/avatar_provider.dart

@@ -7,6 +7,7 @@ class AvatarState {
   final int bodyTemplateId;
   final int skinToneIndex;
   final String glbUrl;
+  final String framesUrl;
   final String buildStatus; // pending / processing / done / failed
   final String error;
 
@@ -15,6 +16,7 @@ class AvatarState {
     this.bodyTemplateId = 0,
     this.skinToneIndex = 0,
     this.glbUrl = '',
+    this.framesUrl = '',
     this.buildStatus = '',
     this.error = '',
   });
@@ -35,6 +37,7 @@ class AvatarNotifier extends AsyncNotifier<AvatarState> {
         bodyTemplateId: (data['body_template_id'] as num?)?.toInt() ?? 0,
         skinToneIndex: (data['skin_tone_index'] as num?)?.toInt() ?? 0,
         glbUrl: data['glb_url'] as String? ?? '',
+        framesUrl: data['frames_url'] as String? ?? '',
         buildStatus: data['build_status'] as String? ?? '',
         error: data['error'] as String? ?? '',
       );

lib/features/profile/avatar_viewer_page.dart

@@ -23,6 +23,7 @@ class AvatarViewerPage extends ConsumerWidget {
           children: [
             AvatarViewer(
               glbUrl: a.glbUrl,
+              framesUrl: a.framesUrl,
               title: '我的 3D 化身',
               subtitle: a.built
                   ? '脸型模板 ${a.faceTemplateId} · 体型模板 ${a.bodyTemplateId} · 肤色 ${a.skinToneIndex}'

lib/shared/widgets/avatar_viewer.dart

@@ -1,32 +1,108 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 
-/// 3D 化身查看组件（MVP 占位实现）
+import '../../core/config/app_config.dart';
+
+/// 3D 化身查看组件
 ///
-/// v2 接入真实 3D 渲染的方式：
-/// 1. 服务端提供预烘焙 GLB 资产（/workspace/templates/avatar_f{face}_b{body}_s{skin}.glb）
-/// 2. pubspec 引入 three_dart ^0.0.16 + three_dart_jsm ^0.0.10 + flutter_gl ^0.0.20
-///    （注意 flutter_gl 0.0.21 在 Flutter 3.44 下无法编译，需锁 0.0.20）
-/// 3. 用 flutter_gl 初始化 GL 上下文 + GLTFLoader 加载 GLB + 自动旋转渲染，
-///    参考 three_dart 0.0.16 的 example/lib/webgl_loader_glb.dart
-class AvatarViewer extends StatelessWidget {
+/// 服务端预渲染帧序列（36 帧绕 Y 轴旋转 PNG）轮播模拟 3D；
+/// framesUrl 为空时降级为静态占位。
+class AvatarViewer extends StatefulWidget {
   final String? glbUrl;
+  final String? framesUrl;
   final String title;
   final String subtitle;
   final double height;
 
   const AvatarViewer({
     super.key,
-    required this.glbUrl,
+    this.glbUrl,
+    this.framesUrl,
     required this.title,
     required this.subtitle,
     this.height = 360,
   });
 
+  @override
+  State<AvatarViewer> createState() => _AvatarViewerState();
+}
+
+class _AvatarViewerState extends State<AvatarViewer> {
+  static const int _frameCount = 36;
+
+  Timer? _timer;
+  int _frame = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.framesUrl != null && widget.framesUrl!.isNotEmpty) {
+      _timer = Timer.periodic(const Duration(milliseconds: 120), (_) {
+        setState(() => _frame = (_frame + 1) % _frameCount);
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _timer?.cancel();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
+    final framesUrl = widget.framesUrl;
+    if (framesUrl != null && framesUrl.isNotEmpty) {
+      final frameUrl = AppConfig.resolveUrl(
+          '$framesUrl/frame_${_frame.toString().padLeft(3, '0')}.png');
+      final scheme = Theme.of(context).colorScheme;
+      return Container(
+        height: widget.height,
+        width: double.infinity,
+        clipBehavior: Clip.antiAlias,
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [
+              scheme.primaryContainer,
+              scheme.primary.withValues(alpha: 0.3),
+            ],
+          ),
+          borderRadius: BorderRadius.circular(16),
+        ),
+        child: Stack(
+          alignment: Alignment.bottomCenter,
+          children: [
+            Positioned.fill(
+              child: Image.network(
+                frameUrl,
+                fit: BoxFit.contain,
+                errorBuilder: (_, _, _) => _placeholder(context),
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(bottom: 10),
+              child: Text(
+                widget.subtitle,
+                style: const TextStyle(
+                    color: Colors.white, fontSize: 12, shadows: [
+                  Shadow(color: Colors.black45, blurRadius: 4),
+                ]),
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+    return _placeholder(context);
+  }
+
+  Widget _placeholder(BuildContext context) {
     final scheme = Theme.of(context).colorScheme;
     return Container(
-      height: height,
+      height: widget.height,
       width: double.infinity,
       decoration: BoxDecoration(
         gradient: LinearGradient(
@@ -44,14 +120,14 @@ class AvatarViewer extends StatelessWidget {
         children: [
           Icon(Icons.accessibility_new, size: 72, color: scheme.primary),
           const SizedBox(height: 12),
-          Text(title,
-              style:
-                  const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
+          Text(widget.title,
+              style: const TextStyle(
+                  fontSize: 16, fontWeight: FontWeight.bold)),
           const SizedBox(height: 4),
           Padding(
             padding: const EdgeInsets.symmetric(horizontal: 24),
             child: Text(
-              subtitle.isEmpty ? '3D 渲染接入中（v2）' : subtitle,
+              widget.subtitle.isEmpty ? '3D 渲染服务未就绪' : widget.subtitle,
               textAlign: TextAlign.center,
               style: const TextStyle(color: Colors.grey, fontSize: 12),
             ),