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

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

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

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

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

View File

@@ -11,7 +11,7 @@ import '../../components/glass_panel.dart';
import '../../components/neon_glow.dart'; import '../../components/neon_glow.dart';
import '../orders/fund_orders_page.dart'; import '../orders/fund_orders_page.dart';
/// 资产页面 - Material Design 3 风格 /// 资产页面 - 钱包风格
class AssetPage extends StatefulWidget { class AssetPage extends StatefulWidget {
const AssetPage({super.key}); const AssetPage({super.key});
@@ -20,8 +20,6 @@ class AssetPage extends StatefulWidget {
} }
class _AssetPageState extends State<AssetPage> with AutomaticKeepAliveClientMixin { class _AssetPageState extends State<AssetPage> with AutomaticKeepAliveClientMixin {
int _activeTab = 0;
@override @override
bool get wantKeepAlive => true; bool get wantKeepAlive => true;
@@ -54,16 +52,22 @@ class _AssetPageState extends State<AssetPage> with AutomaticKeepAliveClientMixi
physics: const AlwaysScrollableScrollPhysics(), physics: const AlwaysScrollableScrollPhysics(),
padding: AppSpacing.pagePadding, padding: AppSpacing.pagePadding,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
_TabSelector( // 1. 总资产估值卡片
tabs: const ['资金账户', '交易账户'], _TotalAssetCard(overview: provider.overview),
selectedIndex: _activeTab, SizedBox(height: AppSpacing.lg),
onChanged: (index) => setState(() => _activeTab = index),
), // 2. 操作按钮
SizedBox(height: AppSpacing.md), _ActionButtons(provider: provider),
_activeTab == 0 SizedBox(height: AppSpacing.lg),
? _FundAccountCard(provider: provider)
: _TradeAccountCard(holdings: provider.holdings), // 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; final dynamic overview;
const _AssetCard({required this.overview}); const _TotalAssetCard({required this.overview});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@@ -87,7 +91,7 @@ class _AssetCard extends StatelessWidget {
return Container( return Container(
width: double.infinity, width: double.infinity,
padding: EdgeInsets.all(AppSpacing.lg + AppSpacing.sm), padding: EdgeInsets.all(AppSpacing.xl),
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: AppColorScheme.assetCardGradient, gradient: AppColorScheme.assetCardGradient,
borderRadius: BorderRadius.circular(AppRadius.xl), borderRadius: BorderRadius.circular(AppRadius.xl),
@@ -99,275 +103,358 @@ class _AssetCard extends StatelessWidget {
], ],
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
'PORTFOLIO VALUE', '总资产估值',
style: TextStyle( style: TextStyle(
fontSize: 10, fontSize: 12,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w500,
letterSpacing: 0.2, letterSpacing: 0.5,
color: Colors.white.withOpacity(0.7), color: Colors.white.withOpacity(0.7),
), ),
), ),
SizedBox(height: AppSpacing.sm), SizedBox(height: AppSpacing.sm),
Text( Row(
'\$${overview?.totalAsset ?? '0.00'}', crossAxisAlignment: CrossAxisAlignment.end,
style: GoogleFonts.spaceGrotesk( children: [
fontSize: 36, Text(
fontWeight: FontWeight.bold, '\$${overview?.totalAsset ?? '0.00'}',
color: Colors.white, style: GoogleFonts.spaceGrotesk(
), fontSize: 40,
), fontWeight: FontWeight.bold,
SizedBox(height: AppSpacing.md), color: Colors.white,
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,
), ),
SizedBox(width: AppSpacing.xs), ),
Text( SizedBox(width: AppSpacing.sm),
'总盈亏: ${overview?.totalProfit ?? '0.00'} USDT', Padding(
padding: EdgeInsets.only(bottom: 8),
child: Text(
'USDT',
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 14,
color: Colors.white.withOpacity(0.7), color: Colors.white.withOpacity(0.7),
), ),
), ),
], ),
), ],
), ),
], SizedBox(height: AppSpacing.md),
),
);
}
}
/// 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: [
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Container(
'USDT 余额', padding: EdgeInsets.symmetric(
style: TextStyle( horizontal: AppSpacing.sm,
fontSize: 12, vertical: AppSpacing.xs,
color: colorScheme.onSurfaceVariant,
), ),
), decoration: BoxDecoration(
GestureDetector( color: Colors.white.withOpacity(0.15),
onTap: () => Navigator.push( borderRadius: BorderRadius.circular(AppRadius.full),
context,
MaterialPageRoute(builder: (_) => const FundOrdersPage()),
), ),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min,
children: [ children: [
Text(
'充提记录',
style: TextStyle(
color: colorScheme.primary,
fontSize: 12,
),
),
Icon( Icon(
LucideIcons.chevronRight, LucideIcons.trendingUp,
size: 14, color: Colors.white.withOpacity(0.9),
color: colorScheme.primary, 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 { class _ActionButtons extends StatelessWidget {
final List holdings; 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme; final colorScheme = Theme.of(context).colorScheme;
return GlassPanel( return GestureDetector(
padding: AppSpacing.cardPadding, onTap: onTap,
child: Column( child: Container(
crossAxisAlignment: CrossAxisAlignment.start, padding: EdgeInsets.symmetric(vertical: AppSpacing.md),
children: [ decoration: BoxDecoration(
Text( color: colorScheme.surfaceContainerHigh,
'持仓列表', borderRadius: BorderRadius.circular(AppRadius.md),
style: GoogleFonts.spaceGrotesk( border: Border.all(
fontSize: 16, color: colorScheme.outlineVariant.withOpacity(0.2),
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
), ),
SizedBox(height: AppSpacing.md), ),
if (holdings.isEmpty) child: Column(
const _EmptyState(icon: LucideIcons.wallet, message: '暂无持仓') children: [
else Icon(
ListView.separated( icon,
shrinkWrap: true, color: colorScheme.primary,
physics: const NeverScrollableScrollPhysics(), size: 24,
itemCount: holdings.length,
separatorBuilder: (_, __) => Container(
margin: EdgeInsets.only(left: 56),
height: 1,
color: AppColorScheme.glassPanelBorder,
),
itemBuilder: (context, index) => _HoldingItem(holding: holdings[index]),
), ),
], 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 { class _EmptyState extends StatelessWidget {
final IconData icon; final IconData icon;
@@ -401,11 +488,11 @@ class _EmptyState extends StatelessWidget {
} }
} }
/// 持仓 /// 代币
class _HoldingItem extends StatelessWidget { class _TokenItem extends StatelessWidget {
final dynamic holding; final dynamic holding;
const _HoldingItem({required this.holding}); const _TokenItem({required this.holding});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@@ -413,12 +500,12 @@ class _HoldingItem extends StatelessWidget {
final isDark = Theme.of(context).brightness == Brightness.dark; final isDark = Theme.of(context).brightness == Brightness.dark;
return Padding( return Padding(
padding: EdgeInsets.symmetric(vertical: AppSpacing.sm), padding: EdgeInsets.symmetric(vertical: AppSpacing.md),
child: Row( child: Row(
children: [ children: [
Container( Container(
width: 40, width: 44,
height: 40, height: 44,
decoration: BoxDecoration( decoration: BoxDecoration(
color: colorScheme.primary.withOpacity(0.1), color: colorScheme.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(AppRadius.md), borderRadius: BorderRadius.circular(AppRadius.md),
@@ -429,25 +516,50 @@ class _HoldingItem extends StatelessWidget {
style: TextStyle( style: TextStyle(
color: colorScheme.primary, color: colorScheme.primary,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 18,
), ),
), ),
), ),
), ),
SizedBox(width: AppSpacing.sm + AppSpacing.xs), SizedBox(width: AppSpacing.md),
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Row(
holding.coinCode, children: [
style: GoogleFonts.spaceGrotesk( Text(
fontSize: 14, holding.coinCode,
fontWeight: FontWeight.w600, style: GoogleFonts.spaceGrotesk(
color: colorScheme.onSurface, 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( Text(
'数量: ${holding.quantity}', holding.quantity,
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
color: colorScheme.onSurfaceVariant, color: colorScheme.onSurfaceVariant,
@@ -461,11 +573,13 @@ class _HoldingItem extends StatelessWidget {
children: [ children: [
Text( Text(
'${holding.currentValue} USDT', '${holding.currentValue} USDT',
style: TextStyle( style: GoogleFonts.spaceGrotesk(
fontSize: 12, fontSize: 15,
fontWeight: FontWeight.w600,
color: colorScheme.onSurface, color: colorScheme.onSurface,
), ),
), ),
SizedBox(height: AppSpacing.xs),
Text( Text(
holding.formattedProfitRate, holding.formattedProfitRate,
style: TextStyle( style: TextStyle(
@@ -509,7 +623,7 @@ void _showDepositDialog(BuildContext context) {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
'Deposit (充值)', '充币',
style: GoogleFonts.spaceGrotesk( style: GoogleFonts.spaceGrotesk(
fontSize: 24, fontSize: 24,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
@@ -850,7 +964,7 @@ void _showWithdrawDialog(BuildContext context, String? balance) {
), ),
SizedBox(width: AppSpacing.sm), SizedBox(width: AppSpacing.sm),
Text( Text(
'现 (Withdraw)', '',
style: GoogleFonts.spaceGrotesk( style: GoogleFonts.spaceGrotesk(
fontSize: 20, fontSize: 20,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
@@ -912,8 +1026,8 @@ void _showWithdrawDialog(BuildContext context, String? balance) {
ShadInputFormField( ShadInputFormField(
id: 'amount', id: 'amount',
controller: amountController, controller: amountController,
label: const Text('金额'), label: const Text('金额'),
placeholder: const Text('请输入提金额(USDT)'), placeholder: const Text('请输入提金额(USDT)'),
keyboardType: const TextInputType.numberWithOptions(decimal: true), keyboardType: const TextInputType.numberWithOptions(decimal: true),
validator: Validators.amount, validator: Validators.amount,
), ),
@@ -922,8 +1036,8 @@ void _showWithdrawDialog(BuildContext context, String? balance) {
id: 'address', id: 'address',
controller: addressController, controller: addressController,
label: const Text('目标地址'), label: const Text('目标地址'),
placeholder: const Text('请输入提地址'), placeholder: const Text('请输入提地址'),
validator: (v) => Validators.required(v, '地址'), validator: (v) => Validators.required(v, '地址'),
), ),
SizedBox(height: AppSpacing.md), SizedBox(height: AppSpacing.md),
ShadInputFormField( ShadInputFormField(

View File

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