leefer/tongxunruanjian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

feat(mobile-next): 补齐语音未听红点、录音浮层与 50-60s 时限

Browse Source 
按 B-187 打回修复 4.3/4.4 阻塞项，输入框与按住说话改用 searchBg。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
编码工程师
2026-08-20 04:22:06 +08:00
co-authored by Cursor multica-agent
parent e40ece184b
commit 15d7f1935e
14 changed files with 233 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile-next/lib/company/brand/apply_official_styles.dart
+13
View File
@@ -17,7 +17,12 @@ void applyOfficialStylesFromTokens() {
Styles.c_F4F5F7 = AppColors.chatBg;
Styles.c_F8F9FA = AppColors.pageBg;
Styles.c_F0F2F6 = AppColors.chatBg;
Styles.c_F2F3F5 = AppColors.searchBg;
Styles.c_F2F8FF = AppColors.primaryActive;
Styles.durationOverlay = AppDuration.overlay;
Styles.durationOverlaySwitch = AppDuration.overlaySwitch;
Styles.reduceMotion = AppMotion.reduce;
Styles.motionOf = AppMotion.of;
Styles.c_18E875 = AppColors.success;
Styles.c_FFB300 = AppColors.warning;
Styles.c_6085B1 = AppColors.avatarGray;
@@ -91,10 +96,18 @@ void applyOfficialStylesFromTokens() {
color: AppColors.danger,
fontSize: AppFont.body,
);
Styles.ts_FF381F_12sp = TextStyle(
color: AppColors.danger,
fontSize: AppFont.small,
);
Styles.ts_FF381F_10sp = TextStyle(
color: AppColors.danger,
fontSize: AppFont.small,
);
Styles.ts_FFB300_12sp = TextStyle(
color: AppColors.warning,
fontSize: AppFont.small,
);
Styles.ts_6085B1_17sp_medium = TextStyle(
color: AppColors.avatarGray,
fontSize: AppFont.body,
mobile-next/lib/pages/chat/chat_view.dart
+2
View File
@@ -195,7 +195,9 @@ class ChatPage extends StatelessWidget {
soundUrl: soundElem.sourceUrl,
duration: soundElem.duration,
isPlaying: logic.isPlaySound(message),
isUnread: !isISend && message.isRead == false,
),
false,
);
}
}
mobile-next/openim_common/lib/src/res/lang/en_US.dart
+2
View File
@@ -535,6 +535,8 @@ const Map<String, String> en_US = {
"nWeek": "%s weeks",
"nMonth": "%s months",
"talkTooShort": "Talk too short",
"remainingRecordSeconds": "%s seconds left",
"autoSendMaxVoiceDuration": "Reached the 60-second limit, sent automatically",
'quoteContentBeRevoked': 'Quote content be revoked',
'tapTooShort': 'Tap too short',
'createGroupTips': 'The group name cannot exceed 16 characters',
mobile-next/openim_common/lib/src/res/lang/zh_CN.dart
+2
View File
@@ -535,6 +535,8 @@ const Map<String, String> zh_CN = {
"nWeek": "%s周",
"nMonth": "%s个月",
"talkTooShort": "说话时间太短",
"remainingRecordSeconds": "还可说 %s 秒",
"autoSendMaxVoiceDuration": "已达最长 60 秒，已自动发送",
'quoteContentBeRevoked': '引用内容已被删除',
'tapTooShort': '点击时间太短',
'createGroupTips': '群名称不能超过16个字符',
mobile-next/openim_common/lib/src/res/strings.dart
+4
View File
@@ -1090,6 +1090,10 @@ class StrRes {
static String get talkTooShort => 'talkTooShort'.tr;
static String get remainingRecordSeconds => 'remainingRecordSeconds'.tr;
static String get autoSendMaxVoiceDuration => 'autoSendMaxVoiceDuration'.tr;
static String get quoteContentBeRevoked => 'quoteContentBeRevoked'.tr;
static String get tapTooShort => 'tapTooShort'.tr;
mobile-next/openim_common/lib/src/res/styles.dart
+16
View File
@@ -12,7 +12,18 @@ class Styles {
static Color c_FFFFFF = const Color(0xFFFFFFFF); // 警告色
static Color c_18E875 = const Color(0xFF18E875); // 在线
static Color c_F0F2F6 = const Color(0xFFF0F2F6); // 聊天页底部
static Color c_F2F3F5 = const Color(0xFFF2F3F5); // 搜索/输入框底 searchBg
static Color c_000000 = const Color(0xFF000000); //
static Duration durationOverlay = const Duration(milliseconds: 150);
static Duration durationOverlaySwitch = const Duration(milliseconds: 100);
static bool Function(BuildContext) reduceMotion =
(BuildContext context) => MediaQuery.maybeOf(context)?.disableAnimations ?? false;
static Duration Function(BuildContext, Duration) motionOf =
(BuildContext context, Duration normal) => reduceMotion(context) ? Duration.zero : normal;
static Color c_92B3E0 = const Color(0xFF92B3E0);
static Color c_F2F8FF = const Color(0xFFF2F8FF); // 同步成功背景色
static Color c_F8F9FA = const Color(0xFFF8F9FA); // 默认背景
@@ -264,6 +275,11 @@ class Styles {
fontSize: 10.sp,
);
static TextStyle ts_FFB300_12sp = TextStyle(
color: c_FFB300,
fontSize: 12.sp,
);
static TextStyle ts_6085B1_17sp_medium = TextStyle(
color: c_6085B1,
fontSize: 17.sp,
mobile-next/openim_common/lib/src/widgets/chat/chat_input_box.dart
+1 -1
View File
@@ -204,7 +204,7 @@ class _ChatInputBoxState extends State<ChatInputBox> /*with TickerProviderStateM
constraints: const BoxConstraints(minHeight: 40),
margin: EdgeInsets.only(top: 8.h, bottom: _showQuoteView ? 4.h : 8.h),
decoration: BoxDecoration(
color: Styles.c_F0F2F6,
color: Styles.c_F2F3F5,
borderRadius: BorderRadius.circular(8.r),
),
child: ChatTextField(
mobile-next/openim_common/lib/src/widgets/chat/chat_item_view.dart
+2 -1
View File
@@ -251,7 +251,7 @@ class _ChatItemViewState extends State<ChatItemView> {
message: _message,
);
} else if (_message.isVoiceType) {
isBubbleBg = true;
isBubbleBg = false;
final sound = _message.soundElem;
child = ChatVoiceView(
isISend: _isISend,
@@ -259,6 +259,7 @@ class _ChatItemViewState extends State<ChatItemView> {
soundUrl: sound?.sourceUrl,
duration: sound?.duration,
isPlaying: widget.isPlayingSound,
isUnread: !_isISend && _message.isRead == false,
);
} else if (_message.isVideoType) {
child = widget.mediaItemBuilder?.call(context, _message) ??
mobile-next/openim_common/lib/src/widgets/chat/chat_voice_read_status_view.dart
+2 -3
View File
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:openim_common/openim_common.dart';
class ChatVoiceReadStatusView extends StatelessWidget {
@@ -7,8 +6,8 @@ class ChatVoiceReadStatusView extends StatelessWidget {
@override
Widget build(BuildContext context) => Container(
width: 6.w,
height: 6.w,
width: 8,
height: 8,
decoration: BoxDecoration(
color: Styles.c_FF381F,
shape: BoxShape.circle,
mobile-next/openim_common/lib/src/widgets/chat/chat_voice_record_bar.dart
+1 -1
View File
@@ -107,7 +107,7 @@ class _ChatVoiceRecordBarState extends State<ChatVoiceRecordBar> {
alignment: Alignment.center,
decoration: BoxDecoration(
color: widget.speakBarColor ??
(_pressing ? Styles.c_F2F8FF : Styles.c_F0F2F6),
(_pressing ? Styles.c_F2F8FF : Styles.c_F2F3F5),
borderRadius: BorderRadius.circular(8.r),
),
child: Text(
mobile-next/openim_common/lib/src/widgets/chat/chat_voice_record_layout.dart
+98 -44
View File
@@ -5,6 +5,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:lottie/lottie.dart';
import 'package:openim_common/openim_common.dart';
import 'package:rxdart/rxdart.dart';
import 'package:sprintf/sprintf.dart';
typedef SpeakViewChildBuilder = Widget Function(ChatVoiceRecordBar recordBar);
@@ -36,9 +37,12 @@ class _ChatVoiceRecordLayoutState extends State<ChatVoiceRecordLayout> {
bool _showVoiceRecordView = false;
RecordBarStatus _status = RecordBarStatus.holdTalk;
bool _isCancelSend = false;
bool _autoSendByLimit = false;
void _completed(int sec, String path) {
if (_isCancelSend) {
final autoSend = _autoSendByLimit;
_autoSendByLimit = false;
if (_isCancelSend && !autoSend) {
File(path).delete();
_status = RecordBarStatus.holdTalk;
_isCancelSend = false;
@@ -48,6 +52,9 @@ class _ChatVoiceRecordLayoutState extends State<ChatVoiceRecordLayout> {
IMViews.showToast(StrRes.talkTooShort);
} else {
widget.onCompleted?.call(sec, path);
if (autoSend) {
IMViews.showToast(StrRes.autoSendMaxVoiceDuration);
}
}
}
}
@@ -83,6 +90,8 @@ class _ChatVoiceRecordLayoutState extends State<ChatVoiceRecordLayout> {
},
onLongPressStart: (details) {
setState(() {
_autoSendByLimit = false;
_isCancelSend = false;
_showVoiceRecordView = true;
});
},
@@ -93,61 +102,106 @@ class _ChatVoiceRecordLayoutState extends State<ChatVoiceRecordLayout> {
return Stack(
children: [
widget.builder(_createSpeakBar),
Visibility(
visible: _showVoiceRecordView,
child: ChatRecordVoiceView(
onCompleted: _completed,
onInterrupt: () {
setState(() {
_interruptSub.add(true);
_showVoiceRecordView = false;
});
},
builder: (_, sec) => Material(
color: Colors.transparent,
child: Center(
child: AnimatedContainer(
duration: const Duration(milliseconds: 100),
curve: Curves.easeOut,
width: 160.w,
height: 140.h,
padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 12.h),
decoration: BoxDecoration(
color: _isCancelSend
? Styles.c_FF381F_opacity70
: Styles.c_000000_opacity70,
borderRadius: BorderRadius.circular(12.r),
),
child: Column(
children: [
IMUtils.seconds2HMS(sec).toText
..style = Styles.ts_FFFFFF_12sp,
Expanded(
child: _isCancelSend
? Icon(Icons.delete_outline,
size: 48.w, color: Styles.c_FFFFFF)
: _lottieAnimWidget,
),
(_isCancelSend
? StrRes.liftFingerToCancelSend
: StrRes.releaseToSendSwipeUpToCancel)
.toText
..style = Styles.ts_FFFFFF_12sp
..maxLines = 1,
],
if (_showVoiceRecordView)
_VoiceRecordOverlayFade(
child: ChatRecordVoiceView(
maxRecordSec: widget.maxRecordSec,
onCompleted: _completed,
onInterrupt: () {
if (_autoSendByLimit) return;
_autoSendByLimit = true;
setState(() {
_interruptSub.add(true);
_showVoiceRecordView = false;
});
},
builder: (_, sec) => Material(
color: Colors.transparent,
child: Center(
child: AnimatedContainer(
duration: Styles.motionOf(context, Styles.durationOverlaySwitch),
curve: Curves.easeOut,
width: 160.w,
height: 140.h,
padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 12.h),
decoration: BoxDecoration(
color: Styles.c_000000_opacity70,
borderRadius: BorderRadius.circular(12.r),
),
child: Column(
children: [
_timerText(sec),
Expanded(
child: _isCancelSend
? Icon(Icons.delete_outline,
size: 48.w, color: Styles.c_FF381F)
: _lottieAnimWidget,
),
(_isCancelSend
? StrRes.liftFingerToCancelSend
: StrRes.releaseToSendSwipeUpToCancel)
.toText
..style = _isCancelSend
? Styles.ts_FF381F_12sp
: Styles.ts_FFFFFF_12sp
..maxLines = 1,
],
),
),
),
),
),
),
),
],
);
}
Widget _timerText(int sec) {
final remaining = widget.maxRecordSec - sec;
final nearLimit = sec >= widget.maxRecordSec - 10 && remaining > 0;
final text = nearLimit
? sprintf(StrRes.remainingRecordSeconds, [remaining])
: IMUtils.seconds2HMS(sec);
return text.toText
..style = nearLimit ? Styles.ts_FFB300_12sp : Styles.ts_FFFFFF_12sp;
}
Widget get _lottieAnimWidget => Lottie.asset(
'assets/anim/voice_record.json',
fit: BoxFit.contain,
package: 'openim_common',
);
}
class _VoiceRecordOverlayFade extends StatefulWidget {
const _VoiceRecordOverlayFade({required this.child});
final Widget child;
@override
State<_VoiceRecordOverlayFade> createState() => _VoiceRecordOverlayFadeState();
}
class _VoiceRecordOverlayFadeState extends State<_VoiceRecordOverlayFade> {
double _opacity = 0;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
setState(() => _opacity = 1);
});
}
@override
Widget build(BuildContext context) {
final reduce = Styles.reduceMotion(context);
return AnimatedOpacity(
opacity: reduce ? 1 : _opacity,
duration: Styles.motionOf(context, Styles.durationOverlay),
curve: Curves.easeOut,
child: widget.child,
);
}
}
mobile-next/openim_common/lib/src/widgets/chat/chat_voice_record_view.dart
+44 -15
View File
@@ -24,11 +24,13 @@ class ChatRecordVoiceView extends StatefulWidget {
class _ChatRecordVoiceViewState extends State<ChatRecordVoiceView> {
static const _dir = "voice";
static const _ext = ".m4a";
late String _path;
String? _path;
int _startTimestamp = 0;
final _audioRecorder = AudioRecorder();
Timer? _timer;
int _duration = 0;
bool _interrupted = false;
bool _completed = false;
static int _now() => DateTime.now().millisecondsSinceEpoch;
@@ -37,16 +39,28 @@ class _ChatRecordVoiceViewState extends State<ChatRecordVoiceView> {
(() async {
if (await _audioRecorder.hasPermission()) {
_path = '${await IMUtils.createTempDir(dir: _dir)}/${_now()}$_ext';
await _audioRecorder.start(RecordConfig(), path: _path);
await _audioRecorder.start(RecordConfig(), path: _path!);
if (!mounted) {
await _audioRecorder.stop();
return;
}
_startTimestamp = _now();
_timer?.cancel();
_timer = null;
_timer = Timer.periodic(const Duration(seconds: 1), (timer) async {
_timer = Timer.periodic(const Duration(seconds: 1), (timer) {
if (!mounted) {
timer.cancel();
return;
}
final duration = ((_now() - _startTimestamp) ~/ 1000);
if (duration >= widget.maxRecordSec) {
timer.cancel();
_timer = null;
_duration = duration;
_interruptByLimit();
return;
}
setState(() {
_duration = ((_now() - _startTimestamp) ~/ 1000);
if (_duration >= widget.maxRecordSec) {
widget.onInterrupt?.call();
}
_duration = duration;
});
});
}
@@ -54,17 +68,32 @@ class _ChatRecordVoiceViewState extends State<ChatRecordVoiceView> {
super.initState();
}
@override
void dispose() {
(() async {
_timer?.cancel();
_timer = null;
void _interruptByLimit() {
if (_interrupted) return;
_interrupted = true;
widget.onInterrupt?.call();
}
Future<void> _stopAndComplete() async {
if (_completed) return;
_completed = true;
_timer?.cancel();
_timer = null;
try {
if (await _audioRecorder.isRecording()) {
await _audioRecorder.stop();
}
widget.onCompleted?.call(_duration, _path);
})();
} catch (_) {}
final path = _path;
if (path == null) return;
widget.onCompleted?.call(_duration, path);
}
@override
void dispose() {
_timer?.cancel();
_timer = null;
unawaited(_stopAndComplete());
super.dispose();
}
mobile-next/openim_common/lib/src/widgets/chat/chat_voice_view.dart
+18 -3
View File
@@ -8,6 +8,7 @@ class ChatVoiceView extends StatelessWidget {
final String? soundUrl;
final int? duration;
final bool isPlaying;
final bool isUnread;
const ChatVoiceView({
Key? key,
@@ -16,6 +17,7 @@ class ChatVoiceView extends StatelessWidget {
this.soundUrl,
this.duration,
this.isPlaying = false,
this.isUnread = false,
}) : super(key: key);
double get _bubbleWidth {
@@ -56,9 +58,22 @@ class ChatVoiceView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
width: _bubbleWidth,
child: _buildVoiceAnimView(),
final bubble = ChatBubble(
bubbleType: isISend ? BubbleType.send : BubbleType.receiver,
child: SizedBox(
width: _bubbleWidth,
child: _buildVoiceAnimView(),
),
);
if (!isUnread) return bubble;
return Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
bubble,
8.horizontalSpace,
const ChatVoiceReadStatusView(),
],
);
}
}