Browse Source

refactor(usage): 重构使用统计模块的视图和导航结构

- 将导航栏配置提取为常量并集中管理颜色配置
- 优化底部导航栏的响应式设计和动画效果
- 统一各统计页面的积分卡片显示位置和样式
- 移除翻译统计页中多余的积分行
- 将AI聊天页面标题改为英文
newdev_shunjiawei
lxm 11 months ago
parent
commit
6d60daef82
  1. 29
      lib/modules/usage/views/aichat_stats_view.dart
  2. 147
      lib/modules/usage/views/meeting_stats_view.dart
  3. 18
      lib/modules/usage/views/translation_stats_view.dart
  4. 102
      lib/modules/usage/views/usage_view.dart

29
lib/modules/usage/views/aichat_stats_view.dart

@ -22,14 +22,18 @@ class AiChatStatsView extends GetView<AiChatStatsController> {
PreferredSizeWidget _buildAppBar(bool isDarkMode) { PreferredSizeWidget _buildAppBar(bool isDarkMode) {
return AppBar( return AppBar(
leading: IconButton( leading: IconButton(
icon: Icon(Icons.arrow_back_ios, color: isDarkMode ? Colors.white : Colors.black, size: 20.sp), icon: Icon(Icons.arrow_back_ios,
color: isDarkMode ? Colors.white : Colors.black, size: 20.sp),
onPressed: () => Get.back(), onPressed: () => Get.back(),
), ),
backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.white, backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.white,
elevation: 0.5, elevation: 0.5,
title: Text( title: Text(
'AI聊天', 'AI chat',
style: TextStyle(fontSize: 17.sp, fontWeight: FontWeight.w600, color: isDarkMode ? Colors.white : Colors.black), style: TextStyle(
fontSize: 17.sp,
fontWeight: FontWeight.w600,
color: isDarkMode ? Colors.white : Colors.black),
), ),
centerTitle: true, centerTitle: true,
); );
@ -47,22 +51,32 @@ class AiChatStatsView extends GetView<AiChatStatsController> {
color: isDarkMode ? AppColors.cardBackground : Colors.white, color: isDarkMode ? AppColors.cardBackground : Colors.white,
borderRadius: BorderRadius.circular(12.r), borderRadius: BorderRadius.circular(12.r),
boxShadow: [ boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 10, offset: const Offset(0, 2)), BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 2)),
], ],
), ),
child: Row( child: Row(
children: [ children: [
Icon(Icons.chat_bubble_outline, color: AppColors.primary, size: 20.sp), Icon(Icons.chat_bubble_outline,
color: AppColors.primary, size: 20.sp),
SizedBox(width: 8.w), SizedBox(width: 8.w),
Expanded( Expanded(
child: Text( child: Text(
'AI聊天积分', 'AI聊天积分',
style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600, color: isDarkMode ? Colors.white : Colors.black), style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w600,
color: isDarkMode ? Colors.white : Colors.black),
), ),
), ),
Text( Text(
'${u.aichatintegral}/${u.aichattotalintegral}', '${u.aichatintegral}/${u.aichattotalintegral}',
style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600, color: isDarkMode ? Colors.white : Colors.black), style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w600,
color: isDarkMode ? Colors.white : Colors.black),
), ),
], ],
), ),
@ -71,4 +85,3 @@ class AiChatStatsView extends GetView<AiChatStatsController> {
}); });
} }
} }

147
lib/modules/usage/views/meeting_stats_view.dart

@ -3,6 +3,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import '../../../core/theme/app_colors.dart'; import '../../../core/theme/app_colors.dart';
import '../controllers/meeting_stats_controller.dart'; import '../controllers/meeting_stats_controller.dart';
import '../../../data/models/user_Info.dart';
class MeetingStatsView extends GetView<MeetingStatsController> { class MeetingStatsView extends GetView<MeetingStatsController> {
const MeetingStatsView({Key? key}) : super(key: key); const MeetingStatsView({Key? key}) : super(key: key);
@ -23,19 +24,24 @@ class MeetingStatsView extends GetView<MeetingStatsController> {
PreferredSizeWidget _buildAppBar(bool isDarkMode) { PreferredSizeWidget _buildAppBar(bool isDarkMode) {
return AppBar( return AppBar(
leading: IconButton( leading: IconButton(
icon: Icon(Icons.arrow_back_ios, color: isDarkMode ? Colors.white : Colors.black, size: 20.sp), icon: Icon(Icons.arrow_back_ios,
color: isDarkMode ? Colors.white : Colors.black, size: 20.sp),
onPressed: () => Get.back(), onPressed: () => Get.back(),
), ),
backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.white, backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.white,
elevation: 0.5, elevation: 0.5,
title: Text( title: Text(
'会议统计', '会议统计',
style: TextStyle(fontSize: 17.sp, fontWeight: FontWeight.w600, color: isDarkMode ? Colors.white : Colors.black), style: TextStyle(
fontSize: 17.sp,
fontWeight: FontWeight.w600,
color: isDarkMode ? Colors.white : Colors.black),
), ),
centerTitle: true, centerTitle: true,
actions: [ actions: [
IconButton( IconButton(
icon: Icon(Icons.refresh, color: isDarkMode ? Colors.white : Colors.black), icon: Icon(Icons.refresh,
color: isDarkMode ? Colors.white : Colors.black),
onPressed: controller.refreshData, onPressed: controller.refreshData,
), ),
], ],
@ -51,6 +57,8 @@ class MeetingStatsView extends GetView<MeetingStatsController> {
padding: EdgeInsets.all(16.w), padding: EdgeInsets.all(16.w),
child: Column( child: Column(
children: [ children: [
_buildIntegralCard(isDarkMode),
SizedBox(height: 16.h),
_buildOverviewCard(isDarkMode), _buildOverviewCard(isDarkMode),
], ],
), ),
@ -67,7 +75,10 @@ class MeetingStatsView extends GetView<MeetingStatsController> {
color: isDarkMode ? AppColors.cardBackground : Colors.white, color: isDarkMode ? AppColors.cardBackground : Colors.white,
borderRadius: BorderRadius.circular(12.r), borderRadius: BorderRadius.circular(12.r),
boxShadow: [ boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 10, offset: const Offset(0, 2)), BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 2)),
], ],
), ),
child: Obx(() => Row( child: Obx(() => Row(
@ -99,7 +110,9 @@ class MeetingStatsView extends GetView<MeetingStatsController> {
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400, fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
color: isSelected ? Colors.white : (isDarkMode ? Colors.white70 : Colors.black54), color: isSelected
? Colors.white
: (isDarkMode ? Colors.white70 : Colors.black54),
), ),
), ),
), ),
@ -115,7 +128,10 @@ class MeetingStatsView extends GetView<MeetingStatsController> {
color: isDarkMode ? AppColors.cardBackground : Colors.white, color: isDarkMode ? AppColors.cardBackground : Colors.white,
borderRadius: BorderRadius.circular(12.r), borderRadius: BorderRadius.circular(12.r),
boxShadow: [ boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 10, offset: const Offset(0, 2)), BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 2)),
], ],
), ),
child: Column( child: Column(
@ -127,22 +143,45 @@ class MeetingStatsView extends GetView<MeetingStatsController> {
SizedBox(width: 8.w), SizedBox(width: 8.w),
Obx(() => Text( Obx(() => Text(
'${controller.selectedTimeRange.value}概览', '${controller.selectedTimeRange.value}概览',
style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600, color: isDarkMode ? Colors.white : Colors.black), style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w600,
color: isDarkMode ? Colors.white : Colors.black),
)), )),
], ],
), ),
SizedBox(height: 16.h), SizedBox(height: 16.h),
Row( Row(
children: [ children: [
Expanded(child: _buildStatItem('ASR调用次数', controller.formatNumber(stats.allAsrCalls), Icons.api, isDarkMode)), Expanded(
Expanded(child: _buildStatItem('音频总时长', controller.formatDuration(stats.allAudioSeconds), Icons.mic, isDarkMode)), child: _buildStatItem(
'ASR调用次数',
controller.formatNumber(stats.allAsrCalls),
Icons.api,
isDarkMode)),
Expanded(
child: _buildStatItem(
'音频总时长',
controller.formatDuration(stats.allAudioSeconds),
Icons.mic,
isDarkMode)),
], ],
), ),
SizedBox(height: 12.h), SizedBox(height: 12.h),
Row( Row(
children: [ children: [
Expanded(child: _buildStatItem('音频文件大小', controller.formatBytes(stats.allAudioFileBytes), Icons.folder, isDarkMode)), Expanded(
Expanded(child: _buildStatItem('转写字节', controller.formatNumber(stats.allTranscriptBytes), Icons.text_snippet, isDarkMode)), child: _buildStatItem(
'音频文件大小',
controller.formatBytes(stats.allAudioFileBytes),
Icons.folder,
isDarkMode)),
Expanded(
child: _buildStatItem(
'转写字节',
controller.formatNumber(stats.allTranscriptBytes),
Icons.text_snippet,
isDarkMode)),
], ],
), ),
], ],
@ -150,22 +189,100 @@ class MeetingStatsView extends GetView<MeetingStatsController> {
); );
} }
Widget _buildStatItem(String label, String value, IconData icon, bool isDarkMode) { Widget _buildStatItem(
String label, String value, IconData icon, bool isDarkMode) {
return Column( return Column(
children: [ children: [
Icon(icon, color: AppColors.primary, size: 24.sp), Icon(icon, color: AppColors.primary, size: 24.sp),
SizedBox(height: 8.h), SizedBox(height: 8.h),
Text( Text(
value, value,
style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold, color: isDarkMode ? Colors.white : Colors.black), style: TextStyle(
fontSize: 18.sp,
fontWeight: FontWeight.bold,
color: isDarkMode ? Colors.white : Colors.black),
), ),
SizedBox(height: 4.h), SizedBox(height: 4.h),
Text( Text(
label, label,
style: TextStyle(fontSize: 12.sp, color: isDarkMode ? Colors.white70 : Colors.black54), style: TextStyle(
fontSize: 12.sp,
color: isDarkMode ? Colors.white70 : Colors.black54),
), ),
], ],
); );
} }
}
Widget _buildIntegralCard(bool isDarkMode) {
return Container(
padding: EdgeInsets.all(16.w),
decoration: BoxDecoration(
color: isDarkMode ? AppColors.cardBackground : Colors.white,
borderRadius: BorderRadius.circular(12.r),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Icons.stacked_line_chart,
color: AppColors.primary, size: 20.sp),
SizedBox(width: 8.w),
Text(
'积分统计',
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w600,
color: isDarkMode ? Colors.white : Colors.black,
),
),
],
),
SizedBox(height: 16.h),
Obx(() {
final _ = User.refreshTick.value;
final u = User.instance;
return _buildIntegralRow(
'会议',
'${controller.formatNumber(u.meetintegral)}/${controller.formatNumber(u.meettotalintegral)}',
Icons.people,
isDarkMode,
);
}),
],
),
);
}
Widget _buildIntegralRow(
String label, String value, IconData icon, bool isDarkMode) {
return Row(
children: [
Icon(icon, color: AppColors.primary, size: 18.sp),
SizedBox(width: 12.w),
Expanded(
child: Text(
label,
style: TextStyle(
fontSize: 14.sp,
color: isDarkMode ? Colors.white : Colors.black),
),
),
Text(
value,
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w600,
color: isDarkMode ? Colors.white : Colors.black),
),
],
);
}
}

18
lib/modules/usage/views/translation_stats_view.dart

@ -95,13 +95,13 @@ class TranslationStatsView extends GetView<TranslationStatsController> {
padding: EdgeInsets.all(16.w), padding: EdgeInsets.all(16.w),
child: Column( child: Column(
children: [ children: [
_buildIntegralCard(isDarkMode),
SizedBox(height: 16.h),
if (controller.selectedTabIndex.value == 0) if (controller.selectedTabIndex.value == 0)
_buildRealtimeStatsCard(isDarkMode), _buildRealtimeStatsCard(isDarkMode),
SizedBox(height: 16.h), SizedBox(height: 16.h),
_buildOverviewCard(isDarkMode), _buildOverviewCard(isDarkMode),
SizedBox(height: 16.h), SizedBox(height: 16.h),
_buildIntegralCard(isDarkMode),
SizedBox(height: 16.h),
_buildApiCallsCard(isDarkMode), _buildApiCallsCard(isDarkMode),
SizedBox(height: 16.h), SizedBox(height: 16.h),
_buildDataVolumeCard(isDarkMode), _buildDataVolumeCard(isDarkMode),
@ -465,26 +465,12 @@ class TranslationStatsView extends GetView<TranslationStatsController> {
final u = User.instance; final u = User.instance;
return Column( return Column(
children: [ children: [
_buildIntegralRow(
'AI聊天',
'${controller.formatNumber(u.aichatintegral)}/${controller.formatNumber(u.aichattotalintegral)}',
Icons.chat_bubble_outline,
isDarkMode,
),
SizedBox(height: 12.h),
_buildIntegralRow( _buildIntegralRow(
'翻译', '翻译',
'${controller.formatNumber(u.tradeintegral)}/${controller.formatNumber(u.tradetotalintegral)}', '${controller.formatNumber(u.tradeintegral)}/${controller.formatNumber(u.tradetotalintegral)}',
Icons.translate, Icons.translate,
isDarkMode, isDarkMode,
), ),
SizedBox(height: 12.h),
_buildIntegralRow(
'会议',
'${controller.formatNumber(u.meetintegral)}/${controller.formatNumber(u.meettotalintegral)}',
Icons.groups,
isDarkMode,
),
], ],
); );
}), }),

102
lib/modules/usage/views/usage_view.dart

@ -7,6 +7,21 @@ import '../controllers/usage_controller.dart';
class UsageView extends GetView<UsageController> { class UsageView extends GetView<UsageController> {
const UsageView({super.key}); const UsageView({super.key});
// 1. 将导航栏配置提取为常量,提高可维护性
static const _navItems = [
_NavItem(Icons.chat_bubble_outline, 'AI chat'),
_NavItem(Icons.translate, 'interpretation'),
_NavItem(Icons.people, 'meeting'),
];
// 2. 颜色配置集中管理
Color _getBgColor(bool isDark) =>
isDark ? Colors.black : const Color(0xFFF9FAFB);
Color _getUnselectedColor(bool isDark) =>
isDark ? Colors.grey[500]! : const Color(0xFF6B7280);
Color _getSelectedColor(bool isDark) =>
isDark ? Colors.blue[200]! : const Color(0xFF3B82F6);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isDarkMode = Theme.of(context).brightness == Brightness.dark; final isDarkMode = Theme.of(context).brightness == Brightness.dark;
@ -19,36 +34,69 @@ class UsageView extends GetView<UsageController> {
children: controller.pageList, children: controller.pageList,
), ),
bottomNavigationBar: Obx( bottomNavigationBar: Obx(
() => BottomNavigationBar( () {
items: [ final currentIndex = controller.pageIndex.value;
BottomNavigationBarItem(
icon: const Icon(Icons.chat_bubble_outline), return Container(
label: 'AI聊天', decoration: BoxDecoration(
), border: Border(
BottomNavigationBarItem( top: BorderSide(
icon: const Icon(Icons.translate), color: isDarkMode ? Colors.grey[800]! : Colors.grey[200]!,
label: 'interpretation'.tr, width: 0.5,
)),
), ),
BottomNavigationBarItem( // 3. 添加安全区域适配(针对刘海屏)
icon: const Icon(Icons.groups), child: BottomNavigationBar(
label: 'meeting'.tr, // 4. 使用生成的导航项
items: _navItems
.map((item) => BottomNavigationBarItem(
icon: Icon(item.icon),
activeIcon: Icon(item.icon,
color: _getSelectedColor(isDarkMode)), // 5. 激活态图标
label: item.label.tr, // 统一处理国际化
))
.toList(),
backgroundColor: _getBgColor(isDarkMode),
currentIndex: currentIndex,
unselectedItemColor: _getUnselectedColor(isDarkMode),
selectedItemColor: _getSelectedColor(isDarkMode),
unselectedFontSize: 10.sp,
selectedFontSize: 10.sp,
// 6. 添加动画过渡效果
onTap: (index) => _onItemTapped(index, currentIndex),
type: BottomNavigationBarType.fixed,
// 7. 增加图标和文字的间距
iconSize: 22.w, // 响应式图标尺寸
selectedLabelStyle: TextStyle(height: 1.5), // 文字垂直间距
unselectedLabelStyle: TextStyle(height: 1.5),
), ),
], );
backgroundColor: isDarkMode ? Colors.black : const Color(0xFFF9FAFB), },
currentIndex: controller.pageIndex.value,
unselectedItemColor:
isDarkMode ? Colors.grey[500] : const Color(0xFF6B7280),
selectedItemColor: const Color(0xFF3B82F6),
unselectedFontSize: 10.sp,
selectedFontSize: 10.sp,
onTap: (int index) {
if (index == controller.pageIndex.value) return;
controller.pageIndex.value = index;
controller.pageController.jumpToPage(index);
},
type: BottomNavigationBarType.fixed,
),
), ),
); );
} }
// 9. 抽离点击逻辑
void _onItemTapped(int index, int currentIndex) {
if (index == currentIndex) return;
// 10. 添加页面切换动画
controller.pageController.animateToPage(
index,
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
controller.pageIndex.value = index;
}
}
// 11. 使用数据类管理导航项配置
class _NavItem {
final IconData icon;
final String label;
const _NavItem(this.icon, this.label);
} }

Loading…
Cancel
Save