Files
monisuo/flutter_monisuo/lib/ui/pages/home/home_page.dart
sion ffac6fc267 refactor: 将前端从 uni-app x 重构为 Flutter
变更内容:
- 删除 uni-app x 项目 (app/ 目录)
- 新增 Flutter 项目 (flutter_monisuo/ 目录)
- 新增部署脚本 (deploy/ 目录)

Flutter 项目功能:
- 用户登录/注册
- 首页资产概览
- 行情币种列表
- 交易买卖操作
- 资产账户管理
- 充值/提现/划转
- 深色主题
- JWT Token 认证

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-22 00:21:21 +08:00

443 lines
13 KiB
Dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../../core/constants/app_colors.dart';
import '../../../providers/asset_provider.dart';
import '../../../providers/auth_provider.dart';
import '../asset/asset_page.dart';
import '../trade/trade_page.dart';
/// 首页
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
_loadData();
});
}
void _loadData() {
final assetProvider = context.read<AssetProvider>();
assetProvider.loadOverview();
assetProvider.loadTradeAccount();
}
@override
Widget build(BuildContext context) {
super.build(context);
return Scaffold(
backgroundColor: AppColors.background,
body: Consumer<AssetProvider>(
builder: (context, provider, _) {
return RefreshIndicator(
onRefresh: () => provider.refreshAll(),
color: AppColors.primary,
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 8),
_buildHeader(),
const SizedBox(height: 20),
_buildAssetCard(provider),
const SizedBox(height: 16),
_buildQuickActions(),
const SizedBox(height: 24),
_buildHoldings(provider),
],
),
),
);
},
),
);
}
Widget _buildHeader() {
return Consumer<AuthProvider>(
builder: (context, auth, _) {
final user = auth.user;
return Row(
children: [
CircleAvatar(
radius: 20,
backgroundColor: AppColors.primary.withOpacity(0.2),
child: Text(
user?.avatarText ?? 'U',
style: const TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'你好,${user?.username ?? '用户'}',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
),
),
const SizedBox(height: 2),
const Text(
'欢迎来到模拟所',
style: TextStyle(
fontSize: 12,
color: AppColors.textSecondary,
),
),
],
),
),
],
);
},
);
}
Widget _buildAssetCard(AssetProvider provider) {
final overview = provider.overview;
return Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [AppColors.primary, AppColors.primaryDark],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'总资产(USDT)',
style: TextStyle(
fontSize: 14,
color: Colors.white70,
),
),
const SizedBox(height: 8),
Text(
overview?.totalAsset ?? '0.00',
style: const TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_buildAssetItem('资金账户', overview?.fundBalance ?? '0.00'),
_buildAssetItem('交易账户', overview?.tradeBalance ?? '0.00'),
],
),
],
),
);
}
Widget _buildAssetItem(String label, String value) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: const TextStyle(fontSize: 12, color: Colors.white70),
),
const SizedBox(height: 4),
Text(
value,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
],
);
}
Widget _buildQuickActions() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColors.cardBackground,
borderRadius: BorderRadius.circular(16),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildActionItem('', '充值', AppColors.success, () => _showDeposit()),
_buildActionItem('', '提现', AppColors.warning, () => _showWithdraw()),
_buildActionItem('', '划转', AppColors.primary, () => _showTransfer()),
_buildActionItem('', '交易', AppColors.info, () => _navigateToTrade()),
],
),
);
}
Widget _buildActionItem(String icon, String text, Color color, VoidCallback onTap) {
return GestureDetector(
onTap: onTap,
child: Column(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: color.withOpacity(0.15),
shape: BoxShape.circle,
),
child: Center(
child: Text(
icon,
style: TextStyle(
fontSize: 18,
color: color,
fontWeight: FontWeight.bold,
),
),
),
),
const SizedBox(height: 8),
Text(
text,
style: const TextStyle(
fontSize: 12,
color: AppColors.textPrimary,
),
),
],
),
);
}
Widget _buildHoldings(AssetProvider provider) {
final holdings = provider.holdings;
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColors.cardBackground,
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'我的持仓',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
),
),
Icon(
Icons.chevron_right,
color: AppColors.textSecondary,
size: 20,
),
],
),
const SizedBox(height: 16),
if (holdings.isEmpty)
const Center(
child: Padding(
padding: EdgeInsets.all(32),
child: Column(
children: [
Icon(
Icons.account_balance_wallet_outlined,
size: 48,
color: AppColors.textHint,
),
SizedBox(height: 12),
Text(
'暂无持仓',
style: TextStyle(
color: AppColors.textSecondary,
fontSize: 14,
),
),
SizedBox(height: 4),
Text(
'快去交易吧~',
style: TextStyle(
color: AppColors.textHint,
fontSize: 12,
),
),
],
),
),
)
else
ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: holdings.length > 5 ? 5 : holdings.length,
separatorBuilder: (_, __) => const Divider(color: AppColors.border),
itemBuilder: (context, index) {
final holding = holdings[index];
return _buildHoldingItem(holding);
},
),
],
),
);
}
Widget _buildHoldingItem(holding) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: AppColors.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(18),
),
child: Center(
child: Text(
holding.coinCode.substring(0, 1),
style: const TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.bold,
),
),
),
),
const SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
holding.coinCode,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
),
),
Text(
holding.quantity,
style: const TextStyle(
fontSize: 12,
color: AppColors.textSecondary,
),
),
],
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'${holding.currentValue} USDT',
style: const TextStyle(
color: AppColors.textPrimary,
fontWeight: FontWeight.w500,
),
),
Text(
holding.formattedProfitRate,
style: TextStyle(
color: holding.isProfit ? AppColors.up : AppColors.down,
fontSize: 12,
),
),
],
),
],
),
);
}
void _showDeposit() {
// 显示充值弹窗
_showActionDialog('充值', '请输入充值金额(USDT)', (amount) {
context.read<AssetProvider>().deposit(amount: amount);
});
}
void _showWithdraw() {
// 显示提现弹窗
_showActionDialog('提现', '请输入提现金额(USDT)', (amount) {
context.read<AssetProvider>().withdraw(amount: amount);
});
}
void _showTransfer() {
// 显示划转弹窗
_showActionDialog('划转', '请输入划转金额(USDT)', (amount) {
context.read<AssetProvider>().transfer(direction: 1, amount: amount);
});
}
void _showActionDialog(String title, String hint, Function(String) onSubmit) {
final controller = TextEditingController();
showDialog(
context: context,
builder: (context) => AlertDialog(
backgroundColor: AppColors.cardBackground,
title: Text(title, style: const TextStyle(color: AppColors.textPrimary)),
content: TextField(
controller: controller,
keyboardType: const TextInputType.numberWithOptions(decimal: true),
style: const TextStyle(color: AppColors.textPrimary),
decoration: InputDecoration(
hintText: hint,
hintStyle: const TextStyle(color: AppColors.textHint),
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('取消'),
),
TextButton(
onPressed: () {
onSubmit(controller.text);
Navigator.pop(context);
},
child: const Text('确认'),
),
],
),
);
}
void _navigateToTrade() {
// 切换到交易页
}
}