You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1070 lines
44 KiB
1070 lines
44 KiB
import 'dart:io';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import '../controllers/agent_controller.dart';
|
|
import '../controllers/message_action_controller.dart';
|
|
import 'message_bubble.dart';
|
|
import '../widgets/full_screen_editor.dart';
|
|
import '../widgets/sound_bar_widget.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
|
|
class AgentView extends StatefulWidget {
|
|
const AgentView({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
State<AgentView> createState() => _AgentViewState();
|
|
}
|
|
|
|
class _AgentViewState extends State<AgentView> with WidgetsBindingObserver {
|
|
late AgentController controller;
|
|
late MessageActionController messageActionController;
|
|
double _keyboardHeight = 0;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
controller = Get.find<AgentController>();
|
|
messageActionController = Get.find<MessageActionController>();
|
|
WidgetsBinding.instance.addObserver(this);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
WidgetsBinding.instance.removeObserver(this);
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
void didChangeMetrics() {
|
|
super.didChangeMetrics();
|
|
final bottomInset = View.of(context).viewInsets.bottom;
|
|
final newKeyboardHeight = bottomInset / View.of(context).devicePixelRatio;
|
|
|
|
if (_keyboardHeight != newKeyboardHeight) {
|
|
_keyboardHeight = newKeyboardHeight;
|
|
// 更新键盘可见状态
|
|
controller.updateKeyboardVisibility(_keyboardHeight > 0);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final theme = Theme.of(context);
|
|
final primaryColor = theme.primaryColor;
|
|
final backgroundColor = theme.scaffoldBackgroundColor;
|
|
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
|
|
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
elevation: 1,
|
|
backgroundColor: backgroundColor,
|
|
leading: IconButton(
|
|
icon: Icon(Icons.arrow_back_ios,
|
|
color: isDarkMode ? Colors.white : Colors.black87, size: 20),
|
|
onPressed: () => Get.back(),
|
|
),
|
|
titleSpacing: 0,
|
|
title: Row(
|
|
children: [
|
|
Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: primaryColor,
|
|
borderRadius: BorderRadius.circular(20),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.1),
|
|
blurRadius: 3,
|
|
offset: const Offset(0, 1),
|
|
),
|
|
],
|
|
),
|
|
child: const Icon(
|
|
Icons.smart_toy_outlined,
|
|
color: Colors.white,
|
|
size: 22,
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'小言'.tr,
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: isDarkMode ? Colors.white : Colors.black87,
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
Container(
|
|
width: 6,
|
|
height: 6,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.green,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
'在线'.tr,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.green,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
actions: [
|
|
// TTS开关
|
|
Obx(() => IconButton(
|
|
icon: Icon(
|
|
controller.isTtsEnabled.value
|
|
? Icons.volume_up
|
|
: Icons.volume_off,
|
|
color: controller.isTtsEnabled.value
|
|
? primaryColor
|
|
: isDarkMode
|
|
? Colors.grey[400]
|
|
: Colors.grey,
|
|
),
|
|
onPressed: () => controller.toggleTts(),
|
|
)),
|
|
|
|
// 更多选项
|
|
Container(
|
|
width: 34,
|
|
height: 34,
|
|
margin: const EdgeInsets.only(right: 8),
|
|
decoration: BoxDecoration(
|
|
color:
|
|
isDarkMode ? Colors.white.withOpacity(0.1) : Colors.grey[100],
|
|
shape: BoxShape.circle,
|
|
boxShadow: [
|
|
if (!isDarkMode)
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.05),
|
|
blurRadius: 2,
|
|
spreadRadius: 0.5,
|
|
),
|
|
],
|
|
),
|
|
child: PopupMenuButton(
|
|
icon: Icon(Icons.more_vert,
|
|
color: isDarkMode ? Colors.white : Colors.black87, size: 20),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
color: isDarkMode ? Colors.grey[800] : Colors.white,
|
|
itemBuilder: (context) => [
|
|
PopupMenuItem(
|
|
child: Row(
|
|
children: [
|
|
Icon(Icons.delete_outline, color: primaryColor, size: 20),
|
|
const SizedBox(width: 8),
|
|
Text('清除聊天记录'.tr, style: TextStyle(fontSize: 14)),
|
|
],
|
|
),
|
|
onTap: () => Future.delayed(
|
|
const Duration(milliseconds: 100),
|
|
() => controller.clearChat(),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
body: Stack(
|
|
children: [
|
|
// 主要聊天界面
|
|
Column(
|
|
children: [
|
|
// 聊天内容
|
|
Expanded(
|
|
child: Obx(
|
|
() => Align(
|
|
alignment: Alignment.topCenter,
|
|
child: ListView.builder(
|
|
controller: controller.scrollController,
|
|
shrinkWrap: true,
|
|
reverse: true,
|
|
padding:
|
|
const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
|
|
itemCount: controller.messages.length,
|
|
itemBuilder: (context, index) {
|
|
final message = controller
|
|
.messages[controller.messages.length - 1 - index];
|
|
return Padding(
|
|
padding: const EdgeInsets.only(bottom: 8),
|
|
child: GestureDetector(
|
|
onLongPressStart: (LongPressStartDetails details) {
|
|
messageActionController.onLongPressMessage(
|
|
context, isDarkMode, details, message);
|
|
},
|
|
child: MessageBubble(
|
|
isUser: message.isUser,
|
|
message: message.text,
|
|
timestamp: message.timestamp,
|
|
isRecognizing: message.isRecognizing,
|
|
hasImage: message.hasImage,
|
|
imagePath: message.imagePath,
|
|
meta: message.meta,
|
|
),
|
|
));
|
|
},
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// 输入区域
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
|
decoration: BoxDecoration(
|
|
color: backgroundColor,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.06),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, -1),
|
|
),
|
|
],
|
|
border: Border(
|
|
top: BorderSide(
|
|
color: Colors.grey.withOpacity(0.15),
|
|
width: 1,
|
|
),
|
|
),
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// 图片预览区域 - 仅在图片输入模式下显示
|
|
Obx(() {
|
|
if (controller.isImageInputActive.value &&
|
|
controller.selectedImagePath.value != null) {
|
|
return Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// 图片预览和关闭按钮
|
|
Stack(
|
|
children: [
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(12),
|
|
child: Image.file(
|
|
File(controller.selectedImagePath.value!),
|
|
height: 150,
|
|
width: double.infinity,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 8,
|
|
right: 8,
|
|
child: GestureDetector(
|
|
onTap: () => controller.clearImageInput(),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(4),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withOpacity(0.6),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: const Icon(
|
|
Icons.close,
|
|
color: Colors.white,
|
|
size: 16,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
// 预设提示选项
|
|
const SizedBox(height: 12),
|
|
SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: [
|
|
_buildPromptChip(
|
|
context: context,
|
|
label: '总结图片内容'.tr,
|
|
onTap: () => controller.summarizeImage(),
|
|
),
|
|
const SizedBox(width: 8),
|
|
_buildPromptChip(
|
|
context: context,
|
|
label: '抽取图像文字'.tr,
|
|
onTap: () => controller.extractTextFromImage(),
|
|
),
|
|
const SizedBox(width: 8),
|
|
_buildPromptChip(
|
|
context: context,
|
|
label: '翻译图像文字'.tr,
|
|
onTap: () => controller.translateImageText(),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
],
|
|
);
|
|
} else {
|
|
return const SizedBox.shrink();
|
|
}
|
|
}),
|
|
|
|
// 输入控件区域 - 包含输入行和展开的选项
|
|
Column(
|
|
children: [
|
|
// 输入控件行 - 使用IntrinsicHeight确保按钮与输入框底部对齐
|
|
IntrinsicHeight(
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.end, // 所有元素底部对齐
|
|
children: [
|
|
// 键盘/语音切换按钮
|
|
Obx(() {
|
|
final isTextMode = controller.isTextInputMode.value;
|
|
return GestureDetector(
|
|
onTap: () {
|
|
controller.toggleInputMode();
|
|
},
|
|
child: Container(
|
|
width: 44,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color: isDarkMode
|
|
? Colors.grey[800]
|
|
: Colors.grey[200],
|
|
borderRadius: BorderRadius.circular(22),
|
|
),
|
|
child: Icon(
|
|
isTextMode ? Icons.mic_none : Icons.keyboard,
|
|
color: isDarkMode
|
|
? Colors.grey[300]
|
|
: Colors.grey[700],
|
|
size: 22,
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
|
|
const SizedBox(width: 8),
|
|
|
|
// 文本输入框或语音波形图
|
|
Expanded(
|
|
child: Obx(() {
|
|
final isTextMode =
|
|
controller.isTextInputMode.value;
|
|
|
|
if (isTextMode) {
|
|
// 文本输入模式 - 限制最大高度并只向上扩展
|
|
return Container(
|
|
constraints: const BoxConstraints(
|
|
minHeight: 44, // 最小高度
|
|
maxHeight: 120, // 最大高度限制，防止挤压按钮
|
|
),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16),
|
|
decoration: BoxDecoration(
|
|
color: isDarkMode
|
|
? Colors.grey[800]
|
|
: Colors.grey[200],
|
|
borderRadius: BorderRadius.circular(22),
|
|
border: Border.all(
|
|
color: isDarkMode
|
|
? Colors.grey[
|
|
800]! // 修改: 从 Colors.grey[700] 改为 Colors.grey[800]
|
|
: Colors.grey.withOpacity(0.1),
|
|
width: 1.0,
|
|
),
|
|
),
|
|
child: Row(
|
|
crossAxisAlignment:
|
|
CrossAxisAlignment.end, // 对齐到底部，实现向上扩展
|
|
children: [
|
|
Expanded(
|
|
child: Obx(() {
|
|
// 图片模式下使用更高的输入框
|
|
final isImageActive = controller
|
|
.isImageInputActive.value;
|
|
|
|
return TextField(
|
|
controller:
|
|
controller.textController,
|
|
maxLines: isImageActive
|
|
? 3
|
|
: 5, // 设置合理的最大行数
|
|
minLines: isImageActive ? 2 : 1,
|
|
keyboardType: TextInputType
|
|
.multiline, // 启用多行键盘
|
|
textInputAction: TextInputAction
|
|
.newline, // 支持回车换行
|
|
onTap: () {
|
|
// 当点击输入框时，如果'+'选项已展开，则收缩
|
|
if (controller
|
|
.isPlusOptionsExpanded
|
|
.value) {
|
|
controller
|
|
.collapsePlusOptions();
|
|
}
|
|
},
|
|
style: TextStyle(
|
|
fontSize: 15,
|
|
color: isDarkMode
|
|
? Colors.white
|
|
: Colors.grey[800],
|
|
),
|
|
decoration: InputDecoration(
|
|
hintText: isImageActive
|
|
? '添加对图片的问题或描述...'
|
|
: '输入消息...',
|
|
hintStyle: TextStyle(
|
|
color: Colors.grey[500],
|
|
fontSize: 15,
|
|
),
|
|
filled: false,
|
|
border: InputBorder.none,
|
|
focusedBorder: OutlineInputBorder(
|
|
borderSide: BorderSide(
|
|
color: isDarkMode
|
|
? Colors.grey[800]!
|
|
: Colors.grey[200]!,
|
|
width: 1.0,
|
|
),
|
|
),
|
|
contentPadding:
|
|
EdgeInsets.symmetric(
|
|
vertical: isImageActive
|
|
? 12
|
|
: 8), // 调整垂直内边距
|
|
),
|
|
onSubmitted: (_) =>
|
|
controller.sendMessage(),
|
|
);
|
|
}),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
} else {
|
|
// 语音输入模式 - 按住说话模式
|
|
return GestureDetector(
|
|
onLongPressStart: (_) {
|
|
// 开始按住说话
|
|
controller.startPushToTalk();
|
|
},
|
|
onLongPressEnd: (_) {
|
|
// 结束按住说话
|
|
controller.endPushToTalk();
|
|
},
|
|
onLongPressCancel: () {
|
|
// 取消按住说话
|
|
controller.endPushToTalk();
|
|
},
|
|
child: Obx(() {
|
|
final isPushToTalkActive = controller.isPushToTalkActive.value;
|
|
final isListening = controller.isListening.value;
|
|
|
|
return Container(
|
|
height: 50,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16),
|
|
decoration: BoxDecoration(
|
|
color: isPushToTalkActive
|
|
? (isDarkMode ? Colors.blue[900] : Colors.blue[100])
|
|
: (isDarkMode ? Colors.grey[800] : Colors.grey[200]),
|
|
borderRadius: BorderRadius.circular(22),
|
|
border: Border.all(
|
|
color: isPushToTalkActive
|
|
? Colors.blue
|
|
: (isDarkMode
|
|
? Colors.grey[800]!
|
|
: Colors.grey.withOpacity(0.1)),
|
|
width: isPushToTalkActive ? 2.0 : 1.0,
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
// 语音波形图 - 只在按住时显示
|
|
if (isPushToTalkActive) ...[
|
|
const AgentSoundBarsWidget(),
|
|
const Spacer(),
|
|
],
|
|
|
|
// 状态文字和图标
|
|
Expanded(
|
|
child: Row(
|
|
mainAxisAlignment: isPushToTalkActive
|
|
? MainAxisAlignment.end
|
|
: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
isPushToTalkActive ? Icons.mic : Icons.mic_none,
|
|
size: 16,
|
|
color: isPushToTalkActive
|
|
? Colors.blue
|
|
: Colors.grey[500],
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
isPushToTalkActive
|
|
? '正在录音...'
|
|
: '按住说话',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
color: isPushToTalkActive
|
|
? Colors.blue
|
|
: Colors.grey[600],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}),
|
|
);
|
|
}
|
|
}),
|
|
),
|
|
|
|
const SizedBox(width: 8),
|
|
|
|
// 动态按钮区域：展开按钮 + 发送按钮 或 图片选择按钮
|
|
Obx(() {
|
|
final hasText = controller.hasTextInput.value;
|
|
final hasImage =
|
|
controller.isImageInputActive.value;
|
|
final shouldShowSend = hasText || hasImage;
|
|
final shouldShowExpand =
|
|
controller.shouldShowExpandButton.value;
|
|
|
|
if (shouldShowSend) {
|
|
// 显示发送按钮（可能还有展开按钮）
|
|
return Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// 展开按钮（在发送按钮上方）
|
|
if (shouldShowExpand && hasText)
|
|
Padding(
|
|
padding:
|
|
const EdgeInsets.only(bottom: 40),
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
// 打开底部弹出编辑模式
|
|
controller.openFullScreenEdit();
|
|
showModalBottomSheet(
|
|
context: context,
|
|
isScrollControlled: true,
|
|
backgroundColor: Colors.transparent,
|
|
builder: (context) =>
|
|
const FullScreenEditor(),
|
|
).then((_) {
|
|
// 弹出页关闭时的回调
|
|
controller.closeFullScreenEdit();
|
|
});
|
|
},
|
|
child: Container(
|
|
width: 32,
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
color: isDarkMode
|
|
? Colors.grey[700]
|
|
: Colors.grey[300],
|
|
borderRadius:
|
|
BorderRadius.circular(16),
|
|
),
|
|
child: Icon(
|
|
Icons.expand_less,
|
|
color: isDarkMode
|
|
? Colors.grey[300]
|
|
: Colors.grey[700],
|
|
size: 20,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// 发送按钮
|
|
GestureDetector(
|
|
onTap: () => controller.sendMessage(),
|
|
child: Container(
|
|
width: 44,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color: primaryColor,
|
|
borderRadius: BorderRadius.circular(22),
|
|
),
|
|
child: const Icon(
|
|
Icons.send,
|
|
color: Colors.white,
|
|
size: 22,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
} else {
|
|
// 显示'+'选择按钮
|
|
return Obx(() {
|
|
final isExpanded =
|
|
controller.isPlusOptionsExpanded.value;
|
|
return GestureDetector(
|
|
onTap: () {
|
|
controller.togglePlusOptions();
|
|
},
|
|
child: Container(
|
|
width: 44,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color: isDarkMode
|
|
? Colors.grey[800]
|
|
: Colors.grey[200],
|
|
borderRadius: BorderRadius.circular(22),
|
|
),
|
|
child: Icon(
|
|
isExpanded ? Icons.close : Icons.add,
|
|
color: isDarkMode
|
|
? Colors.grey[300]
|
|
: Colors.grey[700],
|
|
size: 22,
|
|
),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
}),
|
|
],
|
|
),
|
|
),
|
|
|
|
// 展开的'+'选择选项
|
|
Obx(() {
|
|
final isExpanded =
|
|
controller.isPlusOptionsExpanded.value;
|
|
return AnimatedContainer(
|
|
duration: const Duration(milliseconds: 300),
|
|
curve: Curves.easeInOut,
|
|
height: isExpanded ? 120.h : 0, // 调整高度以适应按钮尺寸
|
|
child: isExpanded
|
|
? Container(
|
|
margin: EdgeInsets.only(top: 8.h),
|
|
padding: EdgeInsets.symmetric(horizontal:16.w), // 添加左右边距
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 改为均匀分布
|
|
children: [
|
|
// 相机按钮
|
|
_buildPlusOptionButton(
|
|
context: context,
|
|
icon: Icons.camera_alt,
|
|
label: '拍照',
|
|
onTap: () async {
|
|
//controller.collapsePlusOptions();
|
|
await controller.takePhoto();
|
|
},
|
|
isDarkMode: isDarkMode,
|
|
),
|
|
// 相册按钮
|
|
_buildPlusOptionButton(
|
|
context: context,
|
|
icon: Icons.photo_library,
|
|
label: '相册',
|
|
onTap: () async {
|
|
//controller.collapsePlusOptions();
|
|
await controller.pickImage();
|
|
},
|
|
isDarkMode: isDarkMode,
|
|
),
|
|
// 文件按钮（预留位置）
|
|
// _buildPlusOptionButton(
|
|
// context: context,
|
|
// icon: Icons.folder,
|
|
// label: '文件',
|
|
// onTap: () {
|
|
// //controller.collapsePlusOptions();
|
|
// // TODO: 实现文件选择功能
|
|
// },
|
|
// isDarkMode: isDarkMode,
|
|
// ),
|
|
// 通话按钮
|
|
_buildPlusOptionButton(
|
|
context: context,
|
|
icon: Icons.phone,
|
|
label: '打电话',
|
|
onTap: () {
|
|
// 启动打电话模式
|
|
controller.startPhoneCall();
|
|
},
|
|
isDarkMode: isDarkMode,
|
|
),
|
|
],
|
|
),
|
|
)
|
|
: const SizedBox.shrink(),
|
|
);
|
|
}),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
// 打电话模式覆盖层
|
|
Obx(() {
|
|
if (controller.isPhoneCallMode.value) {
|
|
return _buildPhoneCallOverlay(context, isDarkMode);
|
|
}
|
|
return const SizedBox.shrink();
|
|
}),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 构建提示选项芯片
|
|
Widget _buildPromptChip({
|
|
required BuildContext context,
|
|
required String label,
|
|
required VoidCallback onTap,
|
|
}) {
|
|
final theme = Theme.of(context);
|
|
final primaryColor = theme.primaryColor;
|
|
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: primaryColor.withOpacity(0.08),
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(
|
|
color: primaryColor.withOpacity(0.2),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
color: primaryColor,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
|
|
|
|
// 构建"+"号展开选项按钮
|
|
Widget _buildPlusOptionButton({
|
|
required BuildContext context,
|
|
required IconData icon,
|
|
required String label,
|
|
required VoidCallback onTap,
|
|
required bool isDarkMode,
|
|
}) {
|
|
final primaryColor = Theme.of(context).primaryColor;
|
|
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: SizedBox(
|
|
// 调整为一行四个按钮的宽度，考虑屏幕宽度和间距
|
|
width: (1.sw - 100.w) / 4, // 屏幕宽度减去左右边距，除以4个按钮
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
// 正方形图标容器 - 增大尺寸
|
|
Container(
|
|
width: 50.w, // 调整为44.w以适应布局
|
|
height: 50.w, // 调整为44.w以适应布局
|
|
decoration: BoxDecoration(
|
|
color: isDarkMode ? Colors.grey[800] : Colors.grey[100],
|
|
borderRadius: BorderRadius.circular(12.r), // 调整为10.r
|
|
border: Border.all(
|
|
color: isDarkMode ? Colors.grey[700]! : Colors.grey[300]!,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Icon(
|
|
icon,
|
|
color: primaryColor,
|
|
size: 20.sp, // 调整为18.sp
|
|
),
|
|
),
|
|
SizedBox(height: 4.h), // 调整为3.h
|
|
// 文字标签
|
|
Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontSize: 10.sp, // 调整为9.sp
|
|
color: isDarkMode ? Colors.grey[300] : Colors.grey[700],
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// 构建打电话模式覆盖层
|
|
Widget _buildPhoneCallOverlay(BuildContext context, bool isDarkMode) {
|
|
return Container(
|
|
color: isDarkMode ? Colors.black : Colors.white,
|
|
child: SafeArea(
|
|
child: Column(
|
|
children: [
|
|
// 顶部标题栏
|
|
_buildPhoneCallHeader(isDarkMode),
|
|
|
|
// 中间音频可视化区域
|
|
Expanded(
|
|
child: _buildPhoneCallVisualization(isDarkMode),
|
|
),
|
|
|
|
// 底部控制按钮
|
|
_buildPhoneCallControls(isDarkMode),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// 构建打电话模式标题栏
|
|
Widget _buildPhoneCallHeader(bool isDarkMode) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
|
child: Row(
|
|
children: [
|
|
// 返回按钮
|
|
GestureDetector(
|
|
onTap: () => controller.endPhoneCall(),
|
|
child: Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: isDarkMode ? Colors.grey[800] : Colors.grey[200],
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Icon(
|
|
Icons.arrow_back,
|
|
color: isDarkMode ? Colors.white : Colors.black,
|
|
size: 20,
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(width: 16),
|
|
|
|
// 标题
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'AI语音通话',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
color: isDarkMode ? Colors.white : Colors.black,
|
|
),
|
|
),
|
|
Obx(() {
|
|
final status = controller.isListening.value
|
|
? '正在通话中...'
|
|
: controller.isSpeaking.value
|
|
? 'AI正在回复...'
|
|
: '等待开始...';
|
|
return Text(
|
|
status,
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
|
|
),
|
|
);
|
|
}),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// 构建打电话模式音频可视化
|
|
Widget _buildPhoneCallVisualization(bool isDarkMode) {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
// 音频可视化圆圈
|
|
Obx(() {
|
|
final isActive = controller.isListening.value || controller.isSpeaking.value;
|
|
return AnimatedContainer(
|
|
duration: const Duration(milliseconds: 300),
|
|
width: isActive ? 200 : 160,
|
|
height: isActive ? 200 : 160,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: isDarkMode
|
|
? Colors.blue[900]?.withOpacity(0.3)
|
|
: Colors.blue[100],
|
|
border: Border.all(
|
|
color: Colors.blue,
|
|
width: isActive ? 3 : 2,
|
|
),
|
|
),
|
|
child: Icon(
|
|
Icons.phone,
|
|
size: isActive ? 80 : 60,
|
|
color: Colors.blue,
|
|
),
|
|
);
|
|
}),
|
|
|
|
const SizedBox(height: 32),
|
|
|
|
// 状态文字
|
|
Obx(() {
|
|
String statusText = '点击开始通话';
|
|
if (controller.isListening.value) {
|
|
statusText = '正在听您说话...';
|
|
} else if (controller.isSpeaking.value) {
|
|
statusText = 'AI正在回复...';
|
|
} else if (controller.isProcessing.value) {
|
|
statusText = '正在处理...';
|
|
}
|
|
|
|
return Text(
|
|
statusText,
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
color: isDarkMode ? Colors.grey[300] : Colors.grey[700],
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
);
|
|
}),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// 构建打电话模式控制按钮
|
|
Widget _buildPhoneCallControls(bool isDarkMode) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 24),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: [
|
|
// 静音按钮
|
|
Obx(() => _buildPhoneControlButton(
|
|
icon: controller.isTtsEnabled.value ? Icons.volume_up : Icons.volume_off,
|
|
onTap: () => controller.toggleTts(),
|
|
isDarkMode: isDarkMode,
|
|
isActive: controller.isTtsEnabled.value,
|
|
)),
|
|
|
|
// 主要通话按钮
|
|
Obx(() {
|
|
final isActive = controller.isListening.value;
|
|
return GestureDetector(
|
|
onTap: () {
|
|
if (isActive) {
|
|
controller.stopVoiceInput();
|
|
} else {
|
|
controller.startVoiceInput();
|
|
}
|
|
},
|
|
child: Container(
|
|
width: 80,
|
|
height: 80,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: isActive ? Colors.red : Colors.green,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: (isActive ? Colors.red : Colors.green).withOpacity(0.3),
|
|
blurRadius: 12,
|
|
spreadRadius: 2,
|
|
),
|
|
],
|
|
),
|
|
child: Icon(
|
|
isActive ? Icons.call_end : Icons.call,
|
|
color: Colors.white,
|
|
size: 36,
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
|
|
// 结束通话按钮
|
|
_buildPhoneControlButton(
|
|
icon: Icons.call_end,
|
|
onTap: () => controller.endPhoneCall(),
|
|
isDarkMode: isDarkMode,
|
|
isActive: false,
|
|
backgroundColor: Colors.red,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// 构建打电话控制按钮
|
|
Widget _buildPhoneControlButton({
|
|
required IconData icon,
|
|
required VoidCallback onTap,
|
|
required bool isDarkMode,
|
|
required bool isActive,
|
|
Color? backgroundColor,
|
|
}) {
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: Container(
|
|
width: 56,
|
|
height: 56,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: backgroundColor ?? (isDarkMode ? Colors.grey[800] : Colors.grey[200]),
|
|
border: isActive ? Border.all(color: Colors.blue, width: 2) : null,
|
|
),
|
|
child: Icon(
|
|
icon,
|
|
color: backgroundColor != null
|
|
? Colors.white
|
|
: (isDarkMode ? Colors.white : Colors.black),
|
|
size: 24,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|