sion/monisuo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重新设计资产页面，去掉首页Tab

Browse Source 
主要修改:
1. main_page.dart - 底部导航栏
   - 移除首页Tab
   - 保留4个Tab: 行情、交易、资产、我的

2. asset_page.dart - 资产页面重新设计
   - 顶部: 总资产估值卡片（显示总资产和今日收益）
   - 中间: 4个操作按钮（充币、提币、划转、赚币）
   - 下方: 资产组合（3个卡片：资金账户、交易账户、赚币）
   - 底部: 代币列表（显示持仓详情）

设计风格:
- 采用钱包应用风格
- 卡片式布局
- 玻璃拟态效果
- 响应式设计

优化:
- 数据加载更可靠（fallback机制）
- 强制刷新数据
- 更清晰的信息层级
- 更好的用户体验
This commit is contained in:
sion
2026-03-24 18:00:07 +08:00
parent f0af05e366
commit f69f05c569
2 changed files with 377 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

640
flutter_monisuo/lib/ui/pages/asset/asset_page.dart
View File

@@ -11,7 +11,7 @@ import '../../components/glass_panel.dart';
import '../../components/neon_glow.dart';
import '../orders/fund_orders_page.dart';
/// 资产页面 - Material Design 3 风格
/// 资产页面 - 钱包风格
class AssetPage extends StatefulWidget {
const AssetPage({super.key});
@@ -20,8 +20,6 @@ class AssetPage extends StatefulWidget {
}
class _AssetPageState extends State<AssetPage> with AutomaticKeepAliveClientMixin {
int _activeTab = 0;
@override
bool get wantKeepAlive => true;
@@ -54,16 +52,22 @@ class _AssetPageState extends State<AssetPage> with AutomaticKeepAliveClientMixi
physics: const AlwaysScrollableScrollPhysics(),
padding: AppSpacing.pagePadding,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_TabSelector(
tabs: const ['资金账户', '交易账户'],
selectedIndex: _activeTab,
onChanged: (index) => setState(() => _activeTab = index),
),
SizedBox(height: AppSpacing.md),
_activeTab == 0
? _FundAccountCard(provider: provider)
: _TradeAccountCard(holdings: provider.holdings),
// 1. 总资产估值卡片
_TotalAssetCard(overview: provider.overview),
SizedBox(height: AppSpacing.lg),
// 2. 操作按钮
_ActionButtons(provider: provider),
SizedBox(height: AppSpacing.lg),
// 3. 资产组合
_AssetComposition(provider: provider),
SizedBox(height: AppSpacing.lg),
// 4. 代币列表
_TokenList(holdings: provider.holdings),
],
),
),
@@ -74,11 +78,11 @@ class _AssetPageState extends State<AssetPage> with AutomaticKeepAliveClientMixi
}
}
/// 资产总览卡片 - Material Design 3 风格
class _AssetCard extends StatelessWidget {
/// 总资产估值卡片
class _TotalAssetCard extends StatelessWidget {
final dynamic overview;
const _AssetCard({required this.overview});
const _TotalAssetCard({required this.overview});
@override
Widget build(BuildContext context) {
@@ -87,7 +91,7 @@ class _AssetCard extends StatelessWidget {
return Container(
width: double.infinity,
padding: EdgeInsets.all(AppSpacing.lg + AppSpacing.sm),
padding: EdgeInsets.all(AppSpacing.xl),
decoration: BoxDecoration(
gradient: AppColorScheme.assetCardGradient,
borderRadius: BorderRadius.circular(AppRadius.xl),
@@ -99,275 +103,358 @@ class _AssetCard extends StatelessWidget {
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'PORTFOLIO VALUE',
'总资产估值',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
letterSpacing: 0.2,
fontSize: 12,
fontWeight: FontWeight.w500,
letterSpacing: 0.5,
color: Colors.white.withOpacity(0.7),
),
),
SizedBox(height: AppSpacing.sm),
Text(
'\$${overview?.totalAsset ?? '0.00'}',
style: GoogleFonts.spaceGrotesk(
fontSize: 36,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: AppSpacing.md),
Container(
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.xs + AppSpacing.xs,
),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(AppRadius.full),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
LucideIcons.trendingUp,
color: Colors.white.withOpacity(0.7),
size: 14,
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$${overview?.totalAsset ?? '0.00'}',
style: GoogleFonts.spaceGrotesk(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.white,
),
SizedBox(width: AppSpacing.xs),
Text(
'总盈亏: ${overview?.totalProfit ?? '0.00'} USDT',
),
SizedBox(width: AppSpacing.sm),
Padding(
padding: EdgeInsets.only(bottom: 8),
child: Text(
'USDT',
style: TextStyle(
fontSize: 12,
fontSize: 14,
color: Colors.white.withOpacity(0.7),
),
),
],
),
),
],
),
],
),
);
}
}
/// Tab 选择器 - Material Design 3 风格
class _TabSelector extends StatelessWidget {
final List<String> tabs;
final int selectedIndex;
final ValueChanged<int> onChanged;
const _TabSelector({
required this.tabs,
required this.selectedIndex,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final isDark = Theme.of(context).brightness == Brightness.dark;
return Container(
padding: EdgeInsets.all(AppSpacing.xs),
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(AppRadius.lg),
),
child: Row(
children: tabs.asMap().entries.map((entry) {
final index = entry.key;
final label = entry.value;
final isSelected = index == selectedIndex;
return Expanded(
child: GestureDetector(
onTap: () => onChanged(index),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: EdgeInsets.symmetric(vertical: AppSpacing.sm + AppSpacing.xs),
decoration: BoxDecoration(
color: isSelected ? colorScheme.primary : Colors.transparent,
borderRadius: BorderRadius.circular(AppRadius.md),
boxShadow: isSelected
? [
BoxShadow(
color: colorScheme.primary.withOpacity(isDark ? 0.15 : 0.08),
blurRadius: 10,
),
]
: null,
),
child: Center(
child: Text(
label,
style: TextStyle(
color: isSelected ? colorScheme.onPrimary : colorScheme.onSurfaceVariant,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
),
),
),
),
),
);
}).toList(),
),
);
}
}
/// 资金账户卡片 - Glass Panel 风格
class _FundAccountCard extends StatelessWidget {
final AssetProvider provider;
const _FundAccountCard({required this.provider});
@override
Widget build(BuildContext context) {
final fund = provider.fundAccount;
final overview = provider.overview;
final colorScheme = Theme.of(context).colorScheme;
// 优先使用fund数据，如果为null则使用overview的fundBalance
final displayBalance = fund?.balance ?? overview?.fundBalance ?? '0.00';
return GlassPanel(
padding: EdgeInsets.all(AppSpacing.lg + AppSpacing.xs),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: AppSpacing.md),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'USDT 余额',
style: TextStyle(
fontSize: 12,
color: colorScheme.onSurfaceVariant,
Container(
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.sm,
vertical: AppSpacing.xs,
),
),
GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => const FundOrdersPage()),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.15),
borderRadius: BorderRadius.circular(AppRadius.full),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'充提记录',
style: TextStyle(
color: colorScheme.primary,
fontSize: 12,
),
),
Icon(
LucideIcons.chevronRight,
size: 14,
color: colorScheme.primary,
LucideIcons.trendingUp,
color: Colors.white.withOpacity(0.9),
size: 12,
),
SizedBox(width: AppSpacing.xs),
Text(
'今日收益: ${overview?.totalProfit ?? '0.00'} USDT',
style: TextStyle(
fontSize: 11,
color: Colors.white.withOpacity(0.9),
),
),
],
),
),
],
),
SizedBox(height: AppSpacing.sm),
Text(
displayBalance,
style: GoogleFonts.spaceGrotesk(
fontSize: 28,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
SizedBox(height: AppSpacing.lg),
Row(
children: [
Expanded(
child: NeonButton(
text: '充值',
type: NeonButtonType.tertiary,
icon: Icons.add,
onPressed: () => _showDepositDialog(context),
height: 44,
showGlow: false,
),
),
SizedBox(width: AppSpacing.sm),
Expanded(
child: NeonButton(
text: '提现',
type: NeonButtonType.secondary,
icon: Icons.remove,
onPressed: () => _showWithdrawDialog(context, fund?.balance),
height: 44,
showGlow: false,
),
),
SizedBox(width: AppSpacing.sm),
Expanded(
child: NeonButton(
text: '划转',
type: NeonButtonType.outline,
icon: Icons.swap_horiz,
onPressed: () => _showTransferDialog(context),
height: 44,
showGlow: false,
),
),
],
),
],
),
);
}
}
/// 交易账户卡片 - Glass Panel 风格
class _TradeAccountCard extends StatelessWidget {
final List holdings;
/// 操作按钮
class _ActionButtons extends StatelessWidget {
final AssetProvider provider;
const _TradeAccountCard({required this.holdings});
const _ActionButtons({required this.provider});
@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: _ActionButton(
icon: LucideIcons.download,
label: '充币',
onTap: () => _showDepositDialog(context),
),
),
SizedBox(width: AppSpacing.sm),
Expanded(
child: _ActionButton(
icon: LucideIcons.upload,
label: '提币',
onTap: () => _showWithdrawDialog(context, provider.fundAccount?.balance),
),
),
SizedBox(width: AppSpacing.sm),
Expanded(
child: _ActionButton(
icon: LucideIcons.arrowLeftRight,
label: '划转',
onTap: () => _showTransferDialog(context),
),
),
SizedBox(width: AppSpacing.sm),
Expanded(
child: _ActionButton(
icon: LucideIcons.coins,
label: '赚币',
onTap: () {
// TODO: 赚币功能
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('赚币功能开发中')),
);
},
),
),
],
);
}
}
/// 操作按钮项
class _ActionButton extends StatelessWidget {
final IconData icon;
final String label;
final VoidCallback onTap;
const _ActionButton({
required this.icon,
required this.label,
required this.onTap,
});
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return GlassPanel(
padding: AppSpacing.cardPadding,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'持仓列表',
style: GoogleFonts.spaceGrotesk(
fontSize: 16,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
return GestureDetector(
onTap: onTap,
child: Container(
padding: EdgeInsets.symmetric(vertical: AppSpacing.md),
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHigh,
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(
color: colorScheme.outlineVariant.withOpacity(0.2),
),
SizedBox(height: AppSpacing.md),
if (holdings.isEmpty)
const _EmptyState(icon: LucideIcons.wallet, message: '暂无持仓')
else
ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: holdings.length,
separatorBuilder: (_, __) => Container(
margin: EdgeInsets.only(left: 56),
height: 1,
color: AppColorScheme.glassPanelBorder,
),
itemBuilder: (context, index) => _HoldingItem(holding: holdings[index]),
),
child: Column(
children: [
Icon(
icon,
color: colorScheme.primary,
size: 24,
),
],
SizedBox(height: AppSpacing.xs),
Text(
label,
style: TextStyle(
fontSize: 12,
color: colorScheme.onSurface,
fontWeight: FontWeight.w500,
),
),
],
),
),
);
}
}
/// 资产组合
class _AssetComposition extends StatelessWidget {
final AssetProvider provider;
const _AssetComposition({required this.provider});
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final fund = provider.fundAccount;
final overview = provider.overview;
final fundBalance = fund?.balance ?? overview?.fundBalance ?? '0.00';
final tradeBalance = overview?.tradeBalance ?? '0';
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'资产组合',
style: GoogleFonts.spaceGrotesk(
fontSize: 16,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
SizedBox(height: AppSpacing.md),
Row(
children: [
Expanded(
child: _AssetCard(
icon: LucideIcons.wallet,
title: '资金账户',
amount: '\$$fundBalance',
onTap: () {},
),
),
SizedBox(width: AppSpacing.sm),
Expanded(
child: _AssetCard(
icon: LucideIcons.lineChart,
title: '交易账户',
amount: '\$$tradeBalance',
onTap: () {},
),
),
SizedBox(width: AppSpacing.sm),
Expanded(
child: _AssetCard(
icon: LucideIcons.coins,
title: '赚币',
amount: '\$0',
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('赚币功能开发中')),
);
},
),
),
],
),
],
);
}
}
/// 资产卡片
class _AssetCard extends StatelessWidget {
final IconData icon;
final String title;
final String amount;
final VoidCallback onTap;
const _AssetCard({
required this.icon,
required this.title,
required this.amount,
required this.onTap,
});
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return GestureDetector(
onTap: onTap,
child: Container(
padding: EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHigh,
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(
color: colorScheme.outlineVariant.withOpacity(0.2),
),
),
child: Column(
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: colorScheme.primary.withOpacity(0.1),
shape: BoxShape.circle,
),
child: Center(
child: Icon(
icon,
color: colorScheme.primary,
size: 20,
),
),
),
SizedBox(height: AppSpacing.sm),
Text(
title,
style: TextStyle(
fontSize: 11,
color: colorScheme.onSurfaceVariant,
),
),
SizedBox(height: AppSpacing.xs),
Text(
amount,
style: GoogleFonts.spaceGrotesk(
fontSize: 14,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
],
),
),
);
}
}
/// 代币列表
class _TokenList extends StatelessWidget {
final List holdings;
const _TokenList({required this.holdings});
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'代币列表',
style: GoogleFonts.spaceGrotesk(
fontSize: 16,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
SizedBox(height: AppSpacing.md),
if (holdings.isEmpty)
_EmptyState(icon: LucideIcons.wallet, message: '暂无持仓')
else
ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: holdings.length,
separatorBuilder: (_, __) => Divider(
height: 1,
color: colorScheme.outlineVariant.withOpacity(0.2),
),
itemBuilder: (context, index) => _TokenItem(holding: holdings[index]),
),
],
);
}
}
/// 空状态
class _EmptyState extends StatelessWidget {
final IconData icon;
@@ -401,11 +488,11 @@ class _EmptyState extends StatelessWidget {
}
}
/// 持仓项
class _HoldingItem extends StatelessWidget {
/// 代币项
class _TokenItem extends StatelessWidget {
final dynamic holding;
const _HoldingItem({required this.holding});
const _TokenItem({required this.holding});
@override
Widget build(BuildContext context) {
@@ -413,12 +500,12 @@ class _HoldingItem extends StatelessWidget {
final isDark = Theme.of(context).brightness == Brightness.dark;
return Padding(
padding: EdgeInsets.symmetric(vertical: AppSpacing.sm),
padding: EdgeInsets.symmetric(vertical: AppSpacing.md),
child: Row(
children: [
Container(
width: 40,
height: 40,
width: 44,
height: 44,
decoration: BoxDecoration(
color: colorScheme.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(AppRadius.md),
@@ -429,25 +516,50 @@ class _HoldingItem extends StatelessWidget {
style: TextStyle(
color: colorScheme.primary,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
),
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
SizedBox(width: AppSpacing.md),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
holding.coinCode,
style: GoogleFonts.spaceGrotesk(
fontSize: 14,
fontWeight: FontWeight.w600,
color: colorScheme.onSurface,
),
Row(
children: [
Text(
holding.coinCode,
style: GoogleFonts.spaceGrotesk(
fontSize: 15,
fontWeight: FontWeight.w600,
color: colorScheme.onSurface,
),
),
SizedBox(width: AppSpacing.sm),
Container(
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.xs,
vertical: 2,
),
decoration: BoxDecoration(
color: AppColorScheme.getUpColor(isDark).withOpacity(0.1),
borderRadius: BorderRadius.circular(AppRadius.xs),
),
child: Text(
'+5.2%',
style: TextStyle(
fontSize: 10,
color: AppColorScheme.getUpColor(isDark),
fontWeight: FontWeight.w600,
),
),
),
],
),
SizedBox(height: AppSpacing.xs),
Text(
'数量: ${holding.quantity}',
holding.quantity,
style: TextStyle(
fontSize: 12,
color: colorScheme.onSurfaceVariant,
@@ -461,11 +573,13 @@ class _HoldingItem extends StatelessWidget {
children: [
Text(
'${holding.currentValue} USDT',
style: TextStyle(
fontSize: 12,
style: GoogleFonts.spaceGrotesk(
fontSize: 15,
fontWeight: FontWeight.w600,
color: colorScheme.onSurface,
),
),
SizedBox(height: AppSpacing.xs),
Text(
holding.formattedProfitRate,
style: TextStyle(
@@ -509,7 +623,7 @@ void _showDepositDialog(BuildContext context) {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Deposit (充值)',
'充币',
style: GoogleFonts.spaceGrotesk(
fontSize: 24,
fontWeight: FontWeight.bold,
@@ -850,7 +964,7 @@ void _showWithdrawDialog(BuildContext context, String? balance) {
),
SizedBox(width: AppSpacing.sm),
Text(
'提现 (Withdraw)',
'提币',
style: GoogleFonts.spaceGrotesk(
fontSize: 20,
fontWeight: FontWeight.bold,
@@ -912,8 +1026,8 @@ void _showWithdrawDialog(BuildContext context, String? balance) {
ShadInputFormField(
id: 'amount',
controller: amountController,
label: const Text('提现金额'),
placeholder: const Text('请输入提现金额(USDT)'),
label: const Text('提币金额'),
placeholder: const Text('请输入提币金额(USDT)'),
keyboardType: const TextInputType.numberWithOptions(decimal: true),
validator: Validators.amount,
),
@@ -922,8 +1036,8 @@ void _showWithdrawDialog(BuildContext context, String? balance) {
id: 'address',
controller: addressController,
label: const Text('目标地址'),
placeholder: const Text('请输入提现地址'),
validator: (v) => Validators.required(v, '提现地址'),
placeholder: const Text('请输入提币地址'),
validator: (v) => Validators.required(v, '提币地址'),
),
SizedBox(height: AppSpacing.md),
ShadInputFormField(

1
flutter_monisuo/lib/ui/pages/main/main_page.dart
View File

@@ -32,7 +32,6 @@ class _MainPageState extends State<MainPage> {
final Set<int> _loadedPages = {0};
static final _navItems = [
_NavItem(label: '首页', icon: LucideIcons.house, page: const HomePage()),
_NavItem(label: '行情', icon: LucideIcons.trendingUp, page: const MarketPage()),
_NavItem(label: '交易', icon: LucideIcons.arrowLeftRight, page: const TradePage()),
_NavItem(label: '资产', icon: LucideIcons.wallet, page: const AssetPage()),