fix(mobile-next): 按 B-91 收口 Android 通话视觉打回项

呼出/通话中按钮、计时器、底色、60s 未接与进出场动效对齐视觉规范。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>

mobile-next/openim_live/lib/src/live_client.dart

@@ -5,6 +5,7 @@ import 'package:rxdart/rxdart.dart';
 import 'package:wakelock_plus/wakelock_plus.dart';
 
 import 'pages/single/room.dart';
+import 'widgets/call_page_host.dart';
 
 enum CallType { audio, video }
 
@@ -61,6 +62,8 @@ class OpenIMLiveClient implements RTCBridge {
   }
 
   static OverlayEntry? _holder;
+  static GlobalKey<CallPageHostState>? _hostKey;
+  bool _closing = false;
 
   bool isBusy = false;
 
@@ -81,13 +84,25 @@ class OpenIMLiveClient implements RTCBridge {
   }
 
   close() {
+    if (_closing) return;
+    _closing = true;
+    final host = _hostKey?.currentState;
+    if (host == null) {
+      _removeHolder();
+      return;
+    }
+    host.dismiss().whenComplete(_removeHolder);
+  }
+
+  void _removeHolder() {
     if (_holder != null) {
       _holder?.remove();
       _holder = null;
     }
+    _hostKey = null;
     isBusy = false;
     currentRoomID = null;
-    // The next line disables the wakelock again.
+    _closing = false;
     WakelockPlus.disable();
   }
 
@@ -118,9 +133,10 @@ class OpenIMLiveClient implements RTCBridge {
     Function(dynamic error, dynamic stack)? onError,
     Function()? onClose,
     Function()? onRoomDisconnected,
+    Future Function()? onInviteTimeout,
   }) {
     if (isBusy) return;
-    // close();
+    _closing = false;
     isBusy = true;
     currentRoomID = roomID;
     this.onTapHangup = onTapHangup;
@@ -128,30 +144,35 @@ class OpenIMLiveClient implements RTCBridge {
     FocusScope.of(ctx).requestFocus(FocusNode());
 
     if (callObj == CallObj.single) {
+      _hostKey = GlobalKey<CallPageHostState>();
       _holder = OverlayEntry(
-          builder: (context) => SingleRoomView(
-                callType: callType,
-                initState: initState,
-                callEventSubject: callEventSubject,
-                roomID: roomID,
-                userID: initState == CallState.call ? inviteeUserIDList.first : inviterUserID,
-                onDial: onDialSingle,
-                onTapCancel: onTapCancel,
-                onTapHangup: onTapHangup,
-                onTapReject: onTapReject,
-                onTapPickup: onTapPickup,
-                onSyncUserInfo: onSyncUserInfo,
-                autoPickup: autoPickup,
-                onBindRoomID: (roomID) => currentRoomID = roomID,
-                onWaitingAccept: onWaitingAccept,
-                onBusyLine: onBusyLine,
-                onStartCalling: onStartCalling,
-                onError: onError,
-                onRoomDisconnected: onRoomDisconnected,
-                onClose: () {
-                  onClose?.call();
-                  close();
-                },
+          builder: (context) => CallPageHost(
+                key: _hostKey,
+                child: SingleRoomView(
+                  callType: callType,
+                  initState: initState,
+                  callEventSubject: callEventSubject,
+                  roomID: roomID,
+                  userID: initState == CallState.call ? inviteeUserIDList.first : inviterUserID,
+                  onDial: onDialSingle,
+                  onTapCancel: onTapCancel,
+                  onTapHangup: onTapHangup,
+                  onTapReject: onTapReject,
+                  onTapPickup: onTapPickup,
+                  onSyncUserInfo: onSyncUserInfo,
+                  autoPickup: autoPickup,
+                  onBindRoomID: (roomID) => currentRoomID = roomID,
+                  onWaitingAccept: onWaitingAccept,
+                  onBusyLine: onBusyLine,
+                  onStartCalling: onStartCalling,
+                  onError: onError,
+                  onRoomDisconnected: onRoomDisconnected,
+                  onInviteTimeout: onInviteTimeout,
+                  onClose: () {
+                    onClose?.call();
+                    close();
+                  },
+                ),
               ));
     } else {}
 

mobile-next/openim_live/lib/src/live_controller.dart

@@ -10,6 +10,7 @@ import 'package:just_audio/just_audio.dart';
 import 'package:openim_common/openim_common.dart';
 import 'package:rxdart/rxdart.dart';
 import 'package:uuid/uuid.dart';
+import 'package:vibration/vibration.dart';
 
 import '../openim_live.dart';
 
@@ -53,12 +54,11 @@ mixin OpenIMLive {
 
   final _ring = 'assets/audio/live_ring.wav';
   final _audioPlayer = AudioPlayer(
-    // Handle audio_session events ourselves for the purpose of this demo.
     handleInterruptions: false,
-    // androidApplyAudioAttributes: false,
-    // handleAudioSessionActivation: false,
   );
 
+  Timer? _incomingVibrateTimer;
+
   bool get isBusy => OpenIMLiveClient().isBusy;
 
   onCloseLive() {
@@ -94,7 +94,7 @@ mixin OpenIMLive {
         (event) async {
           _beCalledEvent = null;
           if (event.state == CallState.beCalled) {
-            _playSound();
+            _playSound(vibrate: true);
             final mediaType = event.data.invitation!.mediaType;
             final sessionType = event.data.invitation!.sessionType;
             final callType = mediaType == 'audio' ? CallType.audio : CallType.video;
@@ -135,6 +135,7 @@ mixin OpenIMLive {
               onError: onError,
               onRoomDisconnected: () => onRoomDisconnected(event.data),
               onStartCalling: onLiveConnected,
+              onInviteTimeout: () => _onInviteTimeout(event.data),
               onClose: () {
                 _stopSound();
                 onLiveSessionClosed();
@@ -195,7 +196,7 @@ mixin OpenIMLive {
         inviterUserID: inviterUserID,
         inviteeUserIDList: inviteeUserIDList,
         roomID: roomID ?? groupID ?? const Uuid().v4(),
-        timeout: 30,
+        timeout: Styles.callInviteTimeout.inSeconds,
         mediaType: mediaType,
         sessionType: sessionType,
         platformID: IMUtils.getPlatform(),
@@ -233,6 +234,7 @@ mixin OpenIMLive {
       },
       onError: onError,
       onRoomDisconnected: () => onRoomDisconnected(signal),
+      onInviteTimeout: () => _onInviteTimeout(signal),
       onClose: () {
         _stopSound();
         onLiveSessionClosed();
@@ -242,7 +244,6 @@ mixin OpenIMLive {
 
   onError(error, stack) {
     Logger.print('onError=====> $error $stack');
-    OpenIMLiveClient().close();
     _stopSound();
     if (error is PlatformException) {
       if (int.parse(error.code) == SDKErrorCode.hasBeenBlocked) {
@@ -250,7 +251,7 @@ mixin OpenIMLive {
         return;
       }
     }
-    IMViews.showToast(StrRes.networkError);
+    IMViews.showToast(StrRes.callNetworkInterrupted);
   }
 
   onRoomDisconnected(SignalingInfo signalingInfo) {}
@@ -332,12 +333,20 @@ mixin OpenIMLive {
     OpenIM.iMManager.messageManager.sendMessage(
         message: message,
         offlinePushInfo: OfflinePushInfo(),
-        userID: signaling.invitation!.inviterUserID,
+        userID: signaling.invitation!.inviterUserID == OpenIM.iMManager.userID
+            ? signaling.invitation!.inviteeUserIDList!.first
+            : signaling.invitation!.inviterUserID,
         isOnlineOnly: true);
 
     return true;
   }
 
+  Future<void> _onInviteTimeout(SignalingInfo signaling) async {
+    _stopSound();
+    insertSignalingMessageSubject.add(CallEvent(CallState.timeout, signaling));
+    await onTimeoutCancelled(signaling);
+  }
+
   onTapHangup(SignalingInfo signaling, int duration, bool isPositive) async {
     if (isPositive) {
       final data = {'customType': CustomMessageType.callingHungup, 'data': signaling.invitation!.toJson()};
@@ -388,16 +397,44 @@ mixin OpenIMLive {
     return list;
   }
 
-  void _playSound() async {
+  void _playSound({bool vibrate = false}) async {
     if (!_audioPlayer.playerState.playing) {
       _audioPlayer.setAsset(_ring, package: 'openim_common');
       _audioPlayer.setLoopMode(LoopMode.one);
       _audioPlayer.setVolume(1.0);
       _audioPlayer.play();
     }
+    if (vibrate) {
+      _startIncomingVibrate();
+    }
+  }
+
+  void _startIncomingVibrate() {
+    _stopIncomingVibrate();
+    _pulseVibrate();
+    _incomingVibrateTimer = Timer.periodic(Styles.callVibrate, (_) => _pulseVibrate());
+  }
+
+  void _stopIncomingVibrate() {
+    _incomingVibrateTimer?.cancel();
+    _incomingVibrateTimer = null;
+    try {
+      Vibration.cancel();
+    } catch (_) {}
+  }
+
+  Future<void> _pulseVibrate() async {
+    try {
+      if (await Vibration.hasVibrator() == true) {
+        await Vibration.vibrate(duration: 200);
+        return;
+      }
+    } catch (_) {}
+    HapticFeedback.vibrate();
   }
 
   void _stopSound() async {
+    _stopIncomingVibrate();
     if (_audioPlayer.playerState.playing) {
       _audioPlayer.stop();
     }

mobile-next/openim_live/lib/src/pages/single/room.dart

@@ -31,6 +31,7 @@ class SingleRoomView extends SignalView {
     super.onSyncUserInfo,
     super.onError,
     super.onRoomDisconnected,
+    super.onInviteTimeout,
   });
 
   @override
@@ -64,13 +65,13 @@ class _SingleRoomViewState extends SignalState<SingleRoomView> {
     final token = certificate.token;
     if (url == null || url.isEmpty || token == null || token.isEmpty) {
       widget.onError?.call(StateError('missing livekit credential'), StackTrace.current);
-      widget.onClose?.call();
+      onNetworkInterrupted();
       return;
     }
     final busyLineUsers = certificate.busyLineUserIDList ?? [];
     if (busyLineUsers.isNotEmpty) {
       widget.onBusyLine?.call();
-      widget.onClose?.call();
+      await beginEnding(CallState.cancel);
       return;
     }
     try {
@@ -109,6 +110,7 @@ class _SingleRoomViewState extends SignalState<SingleRoomView> {
       });
     } catch (error, stackTrace) {
       widget.onError?.call(error, stackTrace);
+      onNetworkInterrupted();
     }
   }
 
@@ -117,7 +119,7 @@ class _SingleRoomViewState extends SignalState<SingleRoomView> {
       Logger.print('Room disconnected: reason => ${event.reason}');
       WidgetsBindingCompatible.instance?.addPostFrameCallback((_) {
         widget.onRoomDisconnected?.call();
-        widget.onClose?.call();
+        onNetworkInterrupted();
       });
     })
     ..on<RoomAttemptReconnectEvent>((event) {

mobile-next/openim_live/lib/src/pages/single/widgets/call_state.dart

@@ -36,6 +36,7 @@ abstract class SignalView extends StatefulWidget {
     this.onStartCalling,
     this.onError,
     this.onRoomDisconnected,
+    this.onInviteTimeout,
   }) : super(key: key);
   final CallType callType;
   final CallState initState;
@@ -56,6 +57,7 @@ abstract class SignalView extends StatefulWidget {
   final Function()? onRoomDisconnected;
   final Function(dynamic error, dynamic stack)? onError;
   final Future<UserInfo?> Function(String userID)? onSyncUserInfo;
+  final Future Function()? onInviteTimeout;
 }
 
 abstract class SignalState<T extends SignalView> extends State<T> {
@@ -71,6 +73,8 @@ abstract class SignalState<T extends SignalView> extends State<T> {
   bool enabledMicrophone = true;
   bool enabledSpeaker = true;
   Timer? _inviteTimeout;
+  bool _ending = false;
+  bool _closed = false;
 
   ParticipantTrack? remoteParticipantTrack;
   ParticipantTrack? localParticipantTrack;
@@ -109,9 +113,8 @@ abstract class SignalState<T extends SignalView> extends State<T> {
   ///  某些信令通过liveKit的监听
   _onStateDidUpdate(CallEvent event) {
     Logger.print("CallEvent : 当前：$callState  收到：$event");
-    if (!mounted) return;
+    if (!mounted || _ending) return;
 
-    // ui 状态只有 呼叫，被呼叫，通话中，连接中
     if (event.state == CallState.call ||
         event.state == CallState.beCalled ||
         event.state == CallState.connecting ||
@@ -119,21 +122,23 @@ abstract class SignalState<T extends SignalView> extends State<T> {
       callStateSubject.add(event.state);
     }
 
-    if (event.state == CallState.beRejected || event.state == CallState.beCanceled) {
-      _cancelInviteTimeout();
-      widget.onClose?.call();
+    if (event.state == CallState.beRejected) {
+      beginEnding(CallState.beRejected, toast: StrRes.rejectedByCaller);
+    } else if (event.state == CallState.beCanceled) {
+      beginEnding(CallState.beCanceled);
     } else if (event.state == CallState.otherReject || event.state == CallState.otherAccepted) {
       if (existParticipants()) {
         return;
       }
-      _cancelInviteTimeout();
-      widget.onClose?.call();
       IMViews.showToast(sprintf(StrRes.otherCallHandle, [event.state == CallState.otherReject ? StrRes.rejectCall : StrRes.accept]));
+      beginEnding(event.state);
     } else if (event.state == CallState.timeout) {
-      _cancelInviteTimeout();
-      widget.onClose?.call();
+      beginEnding(CallState.timeout);
+    } else if (event.state == CallState.beHangup) {
+      beginEnding(CallState.beHangup);
+    } else if (event.state == CallState.networkError) {
+      beginEnding(CallState.networkError, toast: StrRes.callNetworkInterrupted);
     } else if (event.state == CallState.beAccepted) {
-      // 邀请对象比发起对象提前进入房间
       if (null != remoteParticipantTrack) {
         onParticipantConnected();
       }
@@ -147,6 +152,7 @@ abstract class SignalState<T extends SignalView> extends State<T> {
   }
 
   onParticipantDisconnected() {
+    if (_ending) return;
     onTapHangup(false);
   }
 
@@ -187,18 +193,25 @@ abstract class SignalState<T extends SignalView> extends State<T> {
 
   /// [isPositive] 人为挂断行为
   onTapHangup(bool isPositive) async {
-    _cancelInviteTimeout();
-    await widget.onTapHangup?.call(duration, isPositive).whenComplete(() => /*isPositive ? {} : */ widget.onClose?.call());
+    if (_ending) return;
+    await widget.onTapHangup?.call(duration, isPositive);
+    await beginEnding(CallState.hangup);
   }
 
   onTapCancel() async {
-    _cancelInviteTimeout();
-    await widget.onTapCancel?.call().whenComplete(() => widget.onClose?.call());
+    if (_ending) return;
+    await widget.onTapCancel?.call();
+    await beginEnding(CallState.cancel);
   }
 
   onTapReject() async {
-    _cancelInviteTimeout();
-    await widget.onTapReject?.call().whenComplete(() => widget.onClose?.call());
+    if (_ending) return;
+    await widget.onTapReject?.call();
+    await beginEnding(CallState.reject);
+  }
+
+  onNetworkInterrupted() {
+    beginEnding(CallState.networkError, toast: StrRes.callNetworkInterrupted);
   }
 
   onTapMinimize() {
@@ -251,14 +264,17 @@ abstract class SignalState<T extends SignalView> extends State<T> {
       return;
     }
     _inviteTimeout?.cancel();
-    _inviteTimeout = Timer(const Duration(seconds: 30), () async {
-      if (!mounted) return;
+    _inviteTimeout = Timer(Styles.callInviteTimeout, () async {
+      if (!mounted || _ending) return;
       if (callState == CallState.calling) return;
-      if (widget.initState == CallState.call) {
-        await onTapCancel();
+      if (widget.onInviteTimeout != null) {
+        await widget.onInviteTimeout!.call();
+      } else if (widget.initState == CallState.call) {
+        await widget.onTapCancel?.call();
       } else {
-        await onTapReject();
+        await widget.onTapReject?.call();
       }
+      await beginEnding(CallState.timeout);
     });
   }
 
@@ -267,6 +283,31 @@ abstract class SignalState<T extends SignalView> extends State<T> {
     _inviteTimeout = null;
   }
 
+  Future<void> beginEnding(CallState endState, {String? toast}) async {
+    if (_ending || _closed) return;
+    _ending = true;
+    _cancelInviteTimeout();
+    if (!mounted) {
+      _finishClose();
+      return;
+    }
+    callState = endState;
+    if (!callStateSubject.isClosed) {
+      callStateSubject.add(endState);
+    }
+    if (toast != null && toast.isNotEmpty) {
+      IMViews.showToast(toast);
+    }
+    await Future<void>.delayed(Styles.callEndHold);
+    _finishClose();
+  }
+
+  void _finishClose() {
+    if (_closed) return;
+    _closed = true;
+    widget.onClose?.call();
+  }
+
   @override
   Widget build(BuildContext context) => Stack(
         children: [
@@ -276,7 +317,7 @@ abstract class SignalState<T extends SignalView> extends State<T> {
             duration: const Duration(milliseconds: 200),
             onEnd: () {},
             child: Container(
-              color: Styles.c_000000,
+              color: Styles.c_callBg,
               child: Stack(
                 children: [
                   // ImageRes.liveBg.toImage

mobile-next/openim_live/lib/src/pages/single/widgets/controls.dart

@@ -3,7 +3,6 @@ import 'dart:async';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_openim_sdk/flutter_openim_sdk.dart';
-import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:flutter_webrtc/flutter_webrtc.dart';
 import 'package:livekit_client/livekit_client.dart';
 import 'package:openim_common/openim_common.dart';
@@ -153,6 +152,7 @@ class _ControlsViewState extends State<ControlsView> {
       } else {
         await _disableAudio();
       }
+      if (mounted) setState(() {});
     });
 
     // if (null != _participant) {
@@ -233,127 +233,168 @@ class _ControlsViewState extends State<ControlsView> {
     // }
   }
 
-  @override
-  Widget build(BuildContext context) => SafeArea(
-        child: Stack(
-          children: [
-            Positioned(
-              left: 16.w,
-              top: 7.h,
-              child: ImageRes.liveClose.toImage
-                ..width = 30.w
-                ..height = 30.h
-                ..onTap = widget.onMinimize,
-            ),
-            if (null != _participant)
-              Positioned(
-                right: 16.w,
-                top: 7.h,
-                child: Visibility(
-                  visible: isVideo,
-                  child: Row(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      (_participant!.isCameraEnabled() ? ImageRes.liveCameraOff : ImageRes.liveCameraOn).toImage
-                        ..width = 30.w
-                        ..height = 30.h
-                        ..onTap = (_participant!.isCameraEnabled() ? _disableVideo : _enableVideo),
-                      16.horizontalSpace,
-                      ImageRes.liveSwitchCamera.toImage
-                        ..width = 30.w
-                        ..height = 30.h
-                        ..onTap = _toggleCamera,
-                    ],
-                  ),
-                ),
-              ),
-            if (null != widget.userInfo)
-              Positioned(
-                top: 166.h,
-                width: 1.sw,
-                child: _userInfoView,
-              ),
-            Positioned(
-              bottom: 32.h,
-              width: 1.sw,
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: _buttonGroup,
-              ),
-            ),
-            Positioned(
-              bottom: 156.h,
-              width: 1.sw,
-              child: Center(child: _videoCallingDurationView),
-            ),
-            if (_callState == CallState.connecting) const LiveLoadingView(),
-          ],
-        ),
-      );
+  bool get _isEnding =>
+      _callState == CallState.hangup ||
+      _callState == CallState.beHangup ||
+      _callState == CallState.cancel ||
+      _callState == CallState.beCanceled ||
+      _callState == CallState.timeout ||
+      _callState == CallState.beRejected ||
+      _callState == CallState.reject ||
+      _callState == CallState.networkError;
 
-  List<Widget> get _buttonGroup {
-    if (_callState == CallState.call || _callState == CallState.connecting && widget.initState == CallState.call) {
-      return [
-        LiveButton.microphone(on: _enabledMicrophone, onTap: _toggleAudio),
-        LiveButton.cancel(onTap: widget.onCancel),
-        LiveButton.speaker(on: _enabledSpeaker, onTap: _toggleSpeaker),
-      ];
-    } else if (_callState == CallState.beCalled || _callState == CallState.connecting && widget.initState == CallState.beCalled) {
-      return [
-        LiveButton.reject(onTap: widget.onReject),
-        LiveButton.pickUp(onTap: widget.onPickUp),
-      ];
-    } else if (_callState == CallState.calling) {
-      return [
-        LiveButton.microphone(on: _enabledMicrophone, onTap: _toggleAudio),
-        LiveButton.hungUp(onTap: () => widget.onHangUp?.call(true)),
-        LiveButton.speaker(on: _enabledSpeaker, onTap: _toggleSpeaker),
-      ];
+  @override
+  Widget build(BuildContext context) {
+    final topInset = MediaQuery.of(context).padding.top;
+    return Stack(
+      children: [
+        Positioned(
+          left: 16,
+          top: topInset + 8,
+          child: SizedBox(
+            width: Styles.callMinimizeHit,
+            height: Styles.callMinimizeHit,
+            child: IconButton(
+              padding: EdgeInsets.zero,
+              icon: Icon(Icons.keyboard_arrow_down, color: Styles.c_FFFFFF, size: Styles.callIconSize),
+              onPressed: widget.onMinimize,
+            ),
+          ),
+        ),
+        if (null != _participant && isVideo)
+          Positioned(
+            right: 16,
+            top: topInset + 8,
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                IconButton(
+                  icon: Icon(
+                    _participant!.isCameraEnabled() ? Icons.videocam_off_outlined : Icons.videocam_outlined,
+                    color: Styles.c_FFFFFF,
+                    size: Styles.callIconSize,
+                  ),
+                  onPressed: _participant!.isCameraEnabled() ? _disableVideo : _enableVideo,
+                ),
+                IconButton(
+                  icon: Icon(Icons.cameraswitch_outlined, color: Styles.c_FFFFFF, size: Styles.callIconSize),
+                  onPressed: _toggleCamera,
+                ),
+              ],
+            ),
+          ),
+        Positioned.fill(child: _infoColumn),
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 32 + MediaQuery.of(context).padding.bottom,
+          child: _buttonArea,
+        ),
+        if (_callState == CallState.connecting) const LiveLoadingView(),
+      ],
+    );
+  }
+
+  Widget get _infoColumn {
+    final nickname = widget.userInfo == null
+        ? ''
+        : (IMUtils.emptyStrToNull(widget.userInfo!.remark) ?? widget.userInfo!.nickname ?? '');
+    final faceURL = widget.userInfo?.faceURL;
+    return Column(
+      children: [
+        SizedBox(height: Styles.callNameTop),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16),
+          child: Text(
+            nickname,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: Styles.ts_callName,
+          ),
+        ),
+        const SizedBox(height: 8),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16),
+          child: Text(
+            _statusText,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: isCalling && !isVideo ? Styles.ts_callTimer : Styles.ts_callStatus,
+          ),
+        ),
+        const SizedBox(height: 32),
+        AvatarView(
+          width: Styles.callAvatar,
+          height: Styles.callAvatar,
+          text: nickname,
+          url: faceURL,
+          borderRadius: BorderRadius.circular(Styles.callAvatar * 0.18),
+        ),
+      ],
+    );
+  }
+
+  String get _statusText {
+    if (_callState == CallState.call) {
+      return isVideo ? StrRes.waitingVideoCallHint : StrRes.waitingVoiceCallHint;
     }
-    return [];
+    if (_callState == CallState.beCalled) {
+      return isVideo ? StrRes.invitedVideoCallHint : StrRes.invitedVoiceCallHint;
+    }
+    if (_callState == CallState.connecting) {
+      return StrRes.connecting;
+    }
+    if (_callState == CallState.networkError) {
+      return StrRes.callNetworkInterrupted;
+    }
+    if (_callState == CallState.beRejected || _callState == CallState.reject) {
+      return StrRes.rejectedByCaller;
+    }
+    if (_isEnding) {
+      return StrRes.callEnded;
+    }
+    if (isCalling) {
+      return _callingDurationStr;
+    }
+    return '';
+  }
+
+  Widget get _buttonArea {
+    if (_callState == CallState.call ||
+        (_callState == CallState.connecting && widget.initState == CallState.call)) {
+      return Center(child: LiveButton.cancel(onTap: widget.onCancel));
+    }
+    if (_callState == CallState.beCalled) {
+      return Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          LiveButton.reject(onTap: widget.onReject),
+          SizedBox(width: Styles.callIncomingGap),
+          LiveButton.pickUp(onTap: widget.onPickUp),
+        ],
+      );
+    }
+    if (_callState == CallState.calling) {
+      return Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              LiveButton.mute(muted: !_enabledMicrophone, onTap: _toggleAudio),
+              const SizedBox(width: 48),
+              LiveButton.handsFree(on: _enabledSpeaker, onTap: _toggleSpeaker),
+            ],
+          ),
+          const SizedBox(height: 32),
+          LiveButton.hungUp(onTap: () => widget.onHangUp?.call(true)),
+        ],
+      );
+    }
+    return const SizedBox.shrink();
   }
 
   bool get isVideo => widget.callType == CallType.video;
 
   bool get isCalling => _callState == CallState.calling;
-
-  Widget get _videoCallingDurationView => Visibility(
-        visible: isVideo && isCalling,
-        child: _callingDurationStr.toText..style = Styles.ts_FFFFFF_opacity70_17sp,
-      );
-
-  Widget get _userInfoView {
-    String text;
-    if (_callState == CallState.call) {
-      text = isVideo ? StrRes.waitingVideoCallHint : StrRes.waitingVoiceCallHint;
-    } else if (_callState == CallState.beCalled) {
-      text = isVideo ? StrRes.invitedVideoCallHint : StrRes.invitedVoiceCallHint;
-    } else if (_callState == CallState.connecting) {
-      text = StrRes.connecting;
-    } else {
-      text = isVideo ? '' : _callingDurationStr;
-    }
-
-    String? nickname = IMUtils.emptyStrToNull(widget.userInfo!.remark) ?? widget.userInfo!.nickname;
-    String? faceURL = widget.userInfo!.faceURL;
-
-    return Visibility(
-      visible: !(isVideo && isCalling),
-      child: Column(
-        children: [
-          AvatarView(width: 70.w, height: 70.h, text: nickname, url: faceURL),
-          10.verticalSpace,
-          (nickname ?? '').toText..style = Styles.ts_FFFFFF_20sp_medium,
-          10.verticalSpace,
-          Padding(
-            padding: EdgeInsets.symmetric(horizontal: 12.w),
-            child: text.toText
-              ..style = Styles.ts_FFFFFF_opacity70_17sp
-              ..maxLines = 1
-              ..overflow = TextOverflow.ellipsis,
-          ),
-        ],
-      ),
-    );
-  }
 }

mobile-next/openim_live/lib/src/widgets/call_page_host.dart

@@ -0,0 +1,72 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:openim_common/openim_common.dart';
+
+/// 通话页进出：250ms 自下而上滑入 ease-out，不可打断。
+class CallPageHost extends StatefulWidget {
+  const CallPageHost({
+    Key? key,
+    required this.child,
+  }) : super(key: key);
+
+  final Widget child;
+
+  @override
+  CallPageHostState createState() => CallPageHostState();
+}
+
+class CallPageHostState extends State<CallPageHost> with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+  Completer<void>? _dismissing;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: Styles.callPageMotion,
+    );
+    _controller.forward();
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _controller.duration = Styles.motionOf(context, Styles.callPageMotion);
+  }
+
+  Future<void> dismiss() {
+    if (_dismissing != null) return _dismissing!.future;
+    _dismissing = Completer<void>();
+    final future = _controller.status == AnimationStatus.dismissed
+        ? Future<void>.value()
+        : _controller.reverse();
+    future.whenComplete(() {
+      if (_dismissing?.isCompleted == false) {
+        _dismissing!.complete();
+      }
+    });
+    return _dismissing!.future;
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SlideTransition(
+      position: Tween<Offset>(
+        begin: const Offset(0, 1),
+        end: Offset.zero,
+      ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut)),
+      child: Material(
+        color: Styles.c_callBg,
+        child: widget.child,
+      ),
+    );
+  }
+}

mobile-next/openim_live/lib/src/widgets/live_button.dart

@@ -1,67 +1,119 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:openim_common/openim_common.dart';
 
+/// 通话页圆形按钮：Token 色圆底 + 线性图标，禁止位图 PNG。
 class LiveButton extends StatelessWidget {
   const LiveButton({
     Key? key,
-    required this.text,
     required this.icon,
+    required this.size,
+    required this.background,
+    required this.iconColor,
+    this.text,
     this.onTap,
   }) : super(key: key);
-  final String text;
-  final String icon;
+
+  final IconData icon;
+  final double size;
+  final Color background;
+  final Color iconColor;
+  final String? text;
   final Function()? onTap;
 
   @override
   Widget build(BuildContext context) {
+    final button = Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: onTap,
+        customBorder: const CircleBorder(),
+        child: Ink(
+          width: size,
+          height: size,
+          decoration: BoxDecoration(
+            color: background,
+            shape: BoxShape.circle,
+          ),
+          child: Icon(
+            icon,
+            size: Styles.callIconSize,
+            color: iconColor,
+          ),
+        ),
+      ),
+    );
+    if (text == null || text!.isEmpty) return button;
     return Column(
+      mainAxisSize: MainAxisSize.min,
       children: [
-        icon.toImage
-          ..width = 62.w
-          ..height = 62.h
-          ..onTap = onTap,
-        10.verticalSpace,
-        text.toText..style = Styles.ts_FFFFFF_opacity70_14sp,
+        button,
+        const SizedBox(height: 8),
+        Text(text!, style: Styles.ts_callStatus),
       ],
     );
   }
 
-  LiveButton.microphone({
-    super.key,
-    this.onTap,
-    bool on = true,
-  })  : text = StrRes.microphone,
-        icon = on ? ImageRes.liveMicOn : ImageRes.liveMicOff;
+  static Color get _danger => Styles.c_FF381F;
 
-  LiveButton.speaker({
+  static Color get _success => Styles.c_18E875;
+
+  static Color get _white => Styles.c_FFFFFF;
+
+  static Color get _dark => Styles.c_0C1C33;
+
+  LiveButton.mute({
     super.key,
     this.onTap,
-    bool on = true,
-  })  : text = StrRes.speaker,
-        icon = on ? ImageRes.liveSpeakerOn : ImageRes.liveSpeakerOff;
+    bool muted = false,
+  })  : text = StrRes.callMute,
+        icon = muted ? Icons.mic_off_outlined : Icons.mic_none_outlined,
+        size = Styles.callSecondaryBtn,
+        background = muted ? _white : Styles.c_callSecondaryBg,
+        iconColor = muted ? _dark : _white;
+
+  LiveButton.handsFree({
+    super.key,
+    this.onTap,
+    bool on = false,
+  })  : text = StrRes.callHandsFree,
+        icon = Icons.volume_up_outlined,
+        size = Styles.callSecondaryBtn,
+        background = on ? _white : Styles.c_callSecondaryBg,
+        iconColor = on ? _dark : _white;
 
   LiveButton.hungUp({
     super.key,
     this.onTap,
   })  : text = StrRes.hangUp,
-        icon = ImageRes.liveHangUp;
+        icon = Icons.call_end,
+        size = Styles.callPrimaryBtn,
+        background = _danger,
+        iconColor = _white;
 
   LiveButton.reject({
     super.key,
     this.onTap,
   })  : text = StrRes.reject,
-        icon = ImageRes.liveHangUp;
+        icon = Icons.call_end,
+        size = Styles.callPrimaryBtn,
+        background = _danger,
+        iconColor = _white;
 
   LiveButton.cancel({
     super.key,
     this.onTap,
   })  : text = StrRes.cancel,
-        icon = ImageRes.liveHangUp;
+        icon = Icons.call_end,
+        size = Styles.callPrimaryBtn,
+        background = _danger,
+        iconColor = _white;
 
   LiveButton.pickUp({
     super.key,
     this.onTap,
   })  : text = StrRes.pickUp,
-        icon = ImageRes.livePicUp;
+        icon = Icons.phone_outlined,
+        size = Styles.callPrimaryBtn,
+        background = _success,
+        iconColor = _white;
 }