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

feat: 优化

Browse Source
This commit is contained in:
sion123
2026-03-23 23:19:51 +08:00
parent 1a575eee6e
commit 019374df36
4 changed files with 719 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

752
flutter_monisuo/lib/ui/pages/home/home_page.dart
View File

@@ -1,14 +1,15 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:provider/provider.dart';
import 'package:flutter_animate/flutter_animate.dart';
import '../../../core/theme/app_color_scheme.dart';
import '../../../core/theme/app_spacing.dart';
import '../../../data/models/account_models.dart';
import '../../../providers/asset_provider.dart';
import '../../../providers/auth_provider.dart';
import '../../shared/ui_constants.dart';
/// 首页 - 使用 shadcn_ui 现代化设计
/// 首页 - "The Kinetic Vault" 设计风格
class HomePage extends StatefulWidget {
const HomePage({super.key});
@@ -35,34 +36,40 @@ class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin
@override
Widget build(BuildContext context) {
super.build(context);
final theme = ShadTheme.of(context);
return Scaffold(
backgroundColor: theme.colorScheme.background,
backgroundColor: AppColorScheme.darkBackground,
body: Consumer<AssetProvider>(
builder: (context, provider, _) {
return RefreshIndicator(
onRefresh: () => provider.refreshAll(force: true),
color: theme.colorScheme.primary,
color: AppColorScheme.darkPrimary,
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
padding: AppSpacing.pagePadding,
padding: const EdgeInsets.fromLTRB(24, 8, 24, 100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: AppSpacing.sm),
_Header(),
SizedBox(height: AppSpacing.lg + AppSpacing.sm),
_AssetOverviewCard(overview: provider.overview),
SizedBox(height: AppSpacing.md),
_QuickActions(
// 用户问候
_GreetingSection().animate().fadeIn(duration: 300.ms).slideX(begin: -0.1, end: 0),
const SizedBox(height: 16),
// 玻璃拟态余额卡片
_GlassBalanceCard(overview: provider.overview)
.animate()
.fadeIn(duration: 400.ms, delay: 100.ms)
.slideY(begin: 0.1, end: 0),
const SizedBox(height: 24),
// 快捷操作
_QuickActionsGrid(
onDeposit: _showDeposit,
onWithdraw: _showWithdraw,
onTransfer: _showTransfer,
onTrade: _navigateToTrade,
),
SizedBox(height: AppSpacing.lg),
_HoldingsList(holdings: provider.holdings),
).animate().fadeIn(duration: 500.ms, delay: 200.ms),
const SizedBox(height: 32),
// 持仓部分
_HoldingsSection(holdings: provider.holdings)
.animate()
.fadeIn(duration: 500.ms, delay: 300.ms),
],
),
),
@@ -138,7 +145,7 @@ class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin
context.read<AssetProvider>().transfer(direction: 1, amount: amount);
});
void _showAmountDialog(String title, Function(String) onSubmit) {
void _showAmountDialog(String title, void Function(String) onSubmit) {
final controller = TextEditingController();
final formKey = GlobalKey<ShadFormState>();
@@ -171,187 +178,500 @@ class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin
),
);
}
void _navigateToTrade() {
// 切换到交易页 - 通过 MainController
}
}
/// 头部组件
class _Header extends StatelessWidget {
/// 用户问候区域
class _GreetingSection extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Consumer<AuthProvider>(
builder: (context, auth, _) {
final user = auth.user;
return Row(
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_Avatar(text: user?.avatarText),
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'你好，${user?.username ?? '用户'}',
style: theme.textTheme.large.copyWith(fontWeight: FontWeight.bold),
),
SizedBox(height: AppSpacing.xs),
Text('欢迎来到模拟所', style: theme.textTheme.muted),
],
Text(
'Welcome back,',
style: TextStyle(
color: AppColorScheme.darkOnSurfaceVariant,
fontSize: 14,
letterSpacing: 0.5,
),
),
const SizedBox(height: 4),
Text(
'Hello, ${auth.user?.username ?? 'User'}',
style: const TextStyle(
color: AppColorScheme.darkOnSurface,
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
],
).animate().fadeIn(duration: 300.ms).slideX(begin: -0.1, end: 0);
);
},
);
}
}
/// 头像组件
class _Avatar extends StatelessWidget {
final String? text;
/// 玻璃拟态余额卡片
class _GlassBalanceCard extends StatelessWidget {
final AssetOverview? overview;
const _Avatar({this.text});
const _GlassBalanceCard({required this.overview});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return CircleAvatar(
radius: 20,
backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.2),
child: Text(
text ?? 'U',
style: TextStyle(color: theme.colorScheme.primary, fontWeight: FontWeight.bold),
return Container(
width: double.infinity,
padding: const EdgeInsets.all(32),
decoration: BoxDecoration(
color: AppColorScheme.darkSurfaceBright.withValues(alpha: 0.4),
borderRadius: BorderRadius.circular(32),
border: Border.all(
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.1),
),
),
child: Stack(
children: [
// 装饰性发光 - 右上
Positioned(
top: -48,
right: -48,
child: Container(
width: 128,
height: 128,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColorScheme.darkPrimary.withValues(alpha: 0.2),
),
),
),
// 装饰性发光 - 左下
Positioned(
bottom: -48,
left: -48,
child: Container(
width: 128,
height: 128,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColorScheme.darkSecondary.withValues(alpha: 0.1),
),
),
),
// 内容
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 总余额标签
Row(
children: [
Text(
'TOTAL BALANCE',
style: TextStyle(
color: AppColorScheme.darkOnSurfaceVariant,
fontSize: 11,
letterSpacing: 2,
fontWeight: FontWeight.w500,
),
),
const SizedBox(width: 8),
Icon(
LucideIcons.eye,
color: AppColorScheme.darkOnSurfaceVariant,
size: 14,
),
],
),
const SizedBox(height: 8),
// 余额数值
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
overview?.totalAsset ?? '0.00',
style: const TextStyle(
color: AppColorScheme.darkOnSurface,
fontWeight: FontWeight.w900,
fontSize: 48,
letterSpacing: -2,
),
),
const SizedBox(width: 8),
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Text(
'USDT',
style: TextStyle(
color: AppColorScheme.darkPrimary,
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
],
),
const SizedBox(height: 16),
// 今日盈亏
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: AppColorScheme.up.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
LucideIcons.trendingUp,
color: AppColorScheme.up,
size: 16,
),
const SizedBox(width: 4),
Text(
'+0.00%',
style: TextStyle(
color: AppColorScheme.up,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
const SizedBox(width: 8),
Text(
"Today's PNL",
style: TextStyle(
color: AppColorScheme.darkOnSurfaceVariant,
fontSize: 12,
),
),
],
),
),
],
),
],
),
);
}
}
/// 资产总览卡片
class _AssetOverviewCard extends StatelessWidget {
final dynamic overview;
/// 快捷操作网格
class _QuickActionsGrid extends StatelessWidget {
final VoidCallback onDeposit;
final VoidCallback onWithdraw;
final VoidCallback onTransfer;
const _AssetOverviewCard({required this.overview});
const _QuickActionsGrid({
required this.onDeposit,
required this.onWithdraw,
required this.onTransfer,
});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Container(
width: double.infinity,
padding: EdgeInsets.all(AppSpacing.lg + AppSpacing.sm),
decoration: BoxDecoration(
gradient: AppColorScheme.assetCardGradient,
borderRadius: BorderRadius.circular(AppRadius.xl),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('总资产(USDT)', style: theme.textTheme.small.copyWith(color: Colors.white70)),
SizedBox(height: AppSpacing.sm),
Text(
overview?.totalAsset ?? '0.00',
style: theme.textTheme.h2.copyWith(color: Colors.white, fontWeight: FontWeight.bold),
),
SizedBox(height: AppSpacing.lg + AppSpacing.sm),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_AssetItem(label: '资金账户', value: overview?.fundBalance ?? '0.00'),
_AssetItem(label: '交易账户', value: overview?.tradeBalance ?? '0.00'),
],
),
],
),
).animate().fadeIn(duration: 400.ms).slideY(begin: 0.1, end: 0);
}
}
/// 资产项
class _AssetItem extends StatelessWidget {
final String label;
final String value;
const _AssetItem({required this.label, required this.value});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(label, style: const TextStyle(fontSize: 12, color: Colors.white70)),
SizedBox(height: AppSpacing.xs),
Text(value, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: Colors.white)),
_QuickActionBtn(
icon: LucideIcons.plusCircle,
label: '充值',
color: AppColorScheme.darkPrimary,
onTap: onDeposit,
),
_QuickActionBtn(
icon: LucideIcons.wallet,
label: '提现',
color: AppColorScheme.darkSecondary,
onTap: onWithdraw,
),
_QuickActionBtn(
icon: LucideIcons.arrowRightLeft,
label: '划转',
color: AppColorScheme.up,
onTap: onTransfer,
),
_QuickActionBtn(
icon: LucideIcons.lineChart,
label: '交易',
color: AppColorScheme.darkPrimary,
onTap: () {
// TODO: 实现跳转到交易页面的功能
},
),
],
);
}
}
/// 快捷操作
class _QuickActions extends StatelessWidget {
final VoidCallback onDeposit;
final VoidCallback onWithdraw;
final VoidCallback onTransfer;
final VoidCallback onTrade;
const _QuickActions({
required this.onDeposit,
required this.onWithdraw,
required this.onTransfer,
required this.onTrade,
});
@override
Widget build(BuildContext context) {
return ShadCard(
padding: AppSpacing.cardPadding,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_ActionButton(icon: LucideIcons.arrowDownToLine, text: '充值', color: AppColorScheme.success, onTap: onDeposit),
_ActionButton(icon: LucideIcons.arrowUpFromLine, text: '提现', color: AppColorScheme.warning, onTap: onWithdraw),
_ActionButton(icon: LucideIcons.arrowRightLeft, text: '划转', color: AppColorScheme.info, onTap: onTransfer),
_ActionButton(icon: LucideIcons.trendingUp, text: '交易', color: AppColorScheme.info, onTap: onTrade),
],
),
).animate().fadeIn(duration: 500.ms, delay: 100.ms);
}
}
/// 操作按钮
class _ActionButton extends StatelessWidget {
/// 快捷操作按钮
class _QuickActionBtn extends StatefulWidget {
final IconData icon;
final String text;
final String label;
final Color color;
final VoidCallback onTap;
const _ActionButton({
const _QuickActionBtn({
required this.icon,
required this.text,
required this.label,
required this.color,
required this.onTap,
});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
State<_QuickActionBtn> createState() => _QuickActionBtnState();
}
class _QuickActionBtnState extends State<_QuickActionBtn> {
bool _isPressed = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
onTap: widget.onTap,
onTapDown: (_) => setState(() => _isPressed = true),
onTapUp: (_) => setState(() => _isPressed = false),
onTapCancel: () => setState(() => _isPressed = false),
child: Column(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(color: color.withValues(alpha: 0.15), shape: BoxShape.circle),
child: Icon(icon, color: color, size: 22),
AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 56,
height: 56,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColorScheme.darkSurfaceHigh,
border: Border.all(
color: widget.color.withValues(alpha: 0.2),
),
boxShadow: _isPressed
? [
BoxShadow(
color: widget.color.withValues(alpha: 0.4),
blurRadius: 20,
spreadRadius: 0,
),
]
: null,
),
child: Icon(
widget.icon,
color: widget.color,
size: 24,
),
),
const SizedBox(height: 8),
Text(
widget.label,
style: TextStyle(
color: AppColorScheme.darkOnSurfaceVariant,
fontSize: 11,
fontWeight: FontWeight.w500,
),
),
],
),
);
}
}
/// 持仓部分
class _HoldingsSection extends StatelessWidget {
final List<AccountTrade> holdings;
const _HoldingsSection({required this.holdings});
@override
Widget build(BuildContext context) {
return Column(
children: [
// 标题行
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'我的持仓',
style: TextStyle(
color: AppColorScheme.darkOnSurface,
fontWeight: FontWeight.bold,
fontSize: 18,
letterSpacing: -0.5,
),
),
TextButton(
onPressed: () {},
style: TextButton.styleFrom(
foregroundColor: AppColorScheme.darkPrimary,
padding: const EdgeInsets.symmetric(horizontal: 8),
),
child: Row(
children: [
const Text(
'Assets Detail',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
),
const SizedBox(width: 4),
Icon(
LucideIcons.chevronRight,
size: 16,
color: AppColorScheme.darkPrimary,
),
],
),
),
],
),
const SizedBox(height: 16),
// 持仓内容
holdings.isEmpty ? const _EmptyHoldings() : _HoldingsList(holdings: holdings),
],
);
}
}
/// 空持仓状态
class _EmptyHoldings extends StatelessWidget {
const _EmptyHoldings();
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 48, horizontal: 24),
decoration: BoxDecoration(
color: AppColorScheme.darkSurfaceLow.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(40),
border: Border.all(
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.1),
),
),
child: Column(
children: [
// 3D 钱包图标
SizedBox(
width: 128,
height: 128,
child: Stack(
children: [
// 背景模糊效果
Positioned.fill(
child: Transform.rotate(
angle: 0.2,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
gradient: LinearGradient(
colors: [
AppColorScheme.darkPrimary.withValues(alpha: 0.2),
AppColorScheme.darkSecondary.withValues(alpha: 0.2),
],
),
),
),
),
),
// 主钱包图标
Positioned.fill(
child: Center(
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: AppColorScheme.darkSurfaceHighest,
borderRadius: BorderRadius.circular(24),
border: Border.all(
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.2),
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.3),
blurRadius: 24,
offset: const Offset(0, 8),
),
],
),
child: Icon(
LucideIcons.wallet,
color: AppColorScheme.darkPrimary,
size: 40,
),
),
),
),
// 代币图标
Positioned(
top: 8,
right: 16,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColorScheme.up.withValues(alpha: 0.2),
border: Border.all(
color: AppColorScheme.up.withValues(alpha: 0.3),
),
),
child: Icon(
LucideIcons.coins,
color: AppColorScheme.up,
size: 20,
),
),
),
],
),
),
const SizedBox(height: 24),
const Text(
'No holdings yet.',
style: TextStyle(
color: AppColorScheme.darkOnSurface,
fontWeight: FontWeight.w600,
fontSize: 16,
),
),
const SizedBox(height: 8),
Text(
'暂无持仓，快去交易吧~',
style: TextStyle(
color: AppColorScheme.darkOnSurfaceVariant,
fontSize: 14,
),
),
const SizedBox(height: 32),
// 开始交易按钮
Container(
decoration: BoxDecoration(
gradient: AppColorScheme.darkCtaGradient,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: AppColorScheme.darkPrimary.withValues(alpha: 0.3),
blurRadius: 30,
offset: const Offset(0, 10),
),
],
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
borderRadius: BorderRadius.circular(12),
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 16),
child: Text(
'Start Trading',
style: TextStyle(
color: AppColorScheme.darkBackground,
fontWeight: FontWeight.w900,
fontSize: 16,
letterSpacing: -0.5,
),
),
),
),
),
),
SizedBox(height: AppSpacing.sm),
Text(text, style: TextStyle(fontSize: 12, color: theme.colorScheme.foreground)),
],
),
);
@@ -360,97 +680,51 @@ class _ActionButton extends StatelessWidget {
/// 持仓列表
class _HoldingsList extends StatelessWidget {
final List<dynamic> holdings;
final List<AccountTrade> holdings;
const _HoldingsList({required this.holdings});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return ShadCard(
padding: AppSpacing.cardPadding,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('我的持仓', style: theme.textTheme.large.copyWith(fontWeight: FontWeight.bold)),
Icon(LucideIcons.chevronRight, color: theme.colorScheme.mutedForeground, size: 20),
],
),
SizedBox(height: AppSpacing.md),
if (holdings.isEmpty)
_EmptyHoldings()
else
_HoldingsListView(holdings: holdings),
],
),
).animate().fadeIn(duration: 500.ms, delay: 200.ms);
}
}
/// 空持仓提示
class _EmptyHoldings extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Center(
child: Padding(
padding: EdgeInsets.all(AppSpacing.xl),
child: Column(
children: [
Icon(LucideIcons.wallet, size: 48, color: theme.colorScheme.mutedForeground),
SizedBox(height: AppSpacing.sm + AppSpacing.xs),
Text('暂无持仓', style: theme.textTheme.muted),
SizedBox(height: AppSpacing.xs),
Text('快去交易吧~', style: theme.textTheme.muted.copyWith(fontSize: 12)),
],
),
),
);
}
}
/// 持仓列表视图
class _HoldingsListView extends StatelessWidget {
final List<dynamic> holdings;
const _HoldingsListView({required this.holdings});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final displayHoldings = holdings.length > 5 ? holdings.sublist(0, 5) : holdings;
return ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: displayHoldings.length,
separatorBuilder: (_, __) => Divider(color: theme.colorScheme.border, height: 1),
itemBuilder: (context, index) {
return _HoldingItem(holding: displayHoldings[index])
.animate()
.fadeIn(delay: Duration(milliseconds: 50 * index));
},
return Container(
decoration: BoxDecoration(
color: AppColorScheme.darkSurface.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(24),
border: Border.all(
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.1),
),
),
child: ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
padding: const EdgeInsets.all(16),
itemCount: displayHoldings.length,
separatorBuilder: (_, __) => Divider(
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.1),
height: 1,
),
itemBuilder: (context, index) {
return _HoldingItem(holding: displayHoldings[index])
.animate()
.fadeIn(delay: Duration(milliseconds: 50 * index));
},
),
);
}
}
/// 持仓项
class _HoldingItem extends StatelessWidget {
final dynamic holding;
final AccountTrade holding;
const _HoldingItem({required this.holding});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Padding(
padding: EdgeInsets.symmetric(vertical: AppSpacing.sm),
padding: const EdgeInsets.symmetric(vertical: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@@ -458,18 +732,34 @@ class _HoldingItem extends StatelessWidget {
children: [
CircleAvatar(
radius: 18,
backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.1),
backgroundColor: AppColorScheme.darkPrimary.withValues(alpha: 0.1),
child: Text(
holding.coinCode.substring(0, 1),
style: TextStyle(color: theme.colorScheme.primary, fontWeight: FontWeight.bold),
style: const TextStyle(
color: AppColorScheme.darkPrimary,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
const SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(holding.coinCode, style: theme.textTheme.large.copyWith(fontWeight: FontWeight.bold)),
Text(holding.quantity, style: theme.textTheme.muted),
Text(
holding.coinCode,
style: const TextStyle(
color: AppColorScheme.darkOnSurface,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
Text(
holding.quantity,
style: TextStyle(
color: AppColorScheme.darkOnSurfaceVariant,
fontSize: 12,
),
),
],
),
],
@@ -477,12 +767,20 @@ class _HoldingItem extends StatelessWidget {
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('${holding.currentValue} USDT', style: theme.textTheme.small.copyWith(fontWeight: FontWeight.w500)),
Text(
'${holding.currentValue} USDT',
style: const TextStyle(
color: AppColorScheme.darkOnSurface,
fontWeight: FontWeight.w500,
fontSize: 14,
),
),
Text(
holding.formattedProfitRate,
style: TextStyle(
color: holding.isProfit ? AppColorScheme.up : AppColorScheme.down,
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
],

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

@@ -1,5 +1,9 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:provider/provider.dart';
import '../../../core/theme/app_color_scheme.dart';
import '../../../providers/auth_provider.dart';
import '../home/home_page.dart';
import '../market/market_page.dart';
import '../trade/trade_page.dart';
@@ -15,7 +19,7 @@ class _NavItem {
const _NavItem({required this.label, required this.icon, required this.page});
}
/// 主页面（使用 shadcn_ui 风格）
/// 主页面 - "The Kinetic Vault" 设计风格
class MainPage extends StatefulWidget {
const MainPage({super.key});
@@ -27,12 +31,12 @@ class _MainPageState extends State<MainPage> {
int _currentIndex = 0;
final Set<int> _loadedPages = {0};
static const _navItems = [
_NavItem(label: '首页', icon: LucideIcons.house, page: HomePage()),
_NavItem(label: '行情', icon: LucideIcons.trendingUp, page: MarketPage()),
_NavItem(label: '交易', icon: LucideIcons.arrowLeftRight, page: TradePage()),
_NavItem(label: '资产', icon: LucideIcons.wallet, page: AssetPage()),
_NavItem(label: '我的', icon: LucideIcons.user, page: MinePage()),
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()),
_NavItem(label: '我的', icon: LucideIcons.user, page: const MinePage()),
];
void _onTabChanged(int index) {
@@ -44,13 +48,21 @@ class _MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Scaffold(
body: LazyIndexedStack(
index: _currentIndex,
loadedIndexes: _loadedPages,
children: _navItems.map((item) => item.page).toList(),
backgroundColor: AppColorScheme.darkBackground,
body: Column(
children: [
// 公共顶部导航栏
const _TopAppBar(),
// 页面内容
Expanded(
child: LazyIndexedStack(
index: _currentIndex,
loadedIndexes: _loadedPages,
children: _navItems.map((item) => item.page).toList(),
),
),
],
),
bottomNavigationBar: _BottomNavBar(
items: _navItems,
@@ -61,7 +73,121 @@ class _MainPageState extends State<MainPage> {
}
}
/// 底部导航栏
/// 顶部导航栏 - 玻璃拟态效果
class _TopAppBar extends StatelessWidget {
const _TopAppBar();
@override
Widget build(BuildContext context) {
return Container(
height: 64,
decoration: BoxDecoration(
color: AppColorScheme.darkSurfaceBright.withValues(alpha: 0.4),
boxShadow: [
BoxShadow(
color: AppColorScheme.darkPrimary.withValues(alpha: 0.06),
blurRadius: 64,
offset: const Offset(0, 32),
),
],
),
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 24, sigmaY: 24),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// 左侧头像和标题
Consumer<AuthProvider>(
builder: (context, auth, _) {
return Row(
children: [
// 头像
Container(
width: 32,
height: 32,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.2),
),
),
child: CircleAvatar(
backgroundColor: AppColorScheme.darkSurfaceHigh,
child: Text(
auth.user?.avatarText ?? 'U',
style: const TextStyle(
color: AppColorScheme.darkPrimary,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
),
),
const SizedBox(width: 12),
// 标题
const Text(
'The Kinetic Vault',
style: TextStyle(
color: AppColorScheme.darkPrimary,
fontWeight: FontWeight.w900,
letterSpacing: -0.5,
fontSize: 16,
),
),
],
);
},
),
// 右侧操作按钮
Row(
children: [
_IconBtn(
icon: LucideIcons.search,
onTap: () {},
),
const SizedBox(width: 8),
_IconBtn(
icon: LucideIcons.bell,
onTap: () {},
),
],
),
],
),
),
),
),
);
}
}
/// 图标按钮
class _IconBtn extends StatelessWidget {
final IconData icon;
final VoidCallback onTap;
const _IconBtn({required this.icon, required this.onTap});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(8),
child: Icon(
icon,
color: AppColorScheme.darkOnSurfaceVariant,
size: 22,
),
),
);
}
}
/// 底部导航栏 - "The Kinetic Vault" 设计风格
class _BottomNavBar extends StatelessWidget {
final List<_NavItem> items;
final int currentIndex;
@@ -75,25 +201,41 @@ class _BottomNavBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Container(
decoration: BoxDecoration(
color: theme.colorScheme.background,
border: Border(top: BorderSide(color: theme.colorScheme.border)),
color: AppColorScheme.darkSurfaceLow.withValues(alpha: 0.8),
borderRadius: const BorderRadius.vertical(top: Radius.circular(32)),
border: Border(
top: BorderSide(
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.15),
),
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.5),
blurRadius: 40,
offset: const Offset(0, -10),
),
],
),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: items.asMap().entries.map((entry) {
return _NavItemWidget(
item: entry.value,
isSelected: entry.key == currentIndex,
onTap: () => onTap(entry.key),
);
}).toList(),
child: ClipRRect(
borderRadius: const BorderRadius.vertical(top: Radius.circular(32)),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: items.asMap().entries.map((entry) {
return _NavItemWidget(
item: entry.value,
isSelected: entry.key == currentIndex,
onTap: () => onTap(entry.key),
);
}).toList(),
),
),
),
),
),
@@ -115,28 +257,31 @@ class _NavItemWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final color = isSelected ? theme.colorScheme.primary : theme.colorScheme.mutedForeground;
final color = isSelected ? AppColorScheme.darkPrimary : AppColorScheme.darkOnSurfaceVariant;
return GestureDetector(
onTap: onTap,
behavior: HitTestBehavior.opaque,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(item.icon, color: color, size: 24),
const SizedBox(height: 4),
Text(
item.label,
style: TextStyle(
fontSize: 12,
color: color,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
),
),
],
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
padding: const EdgeInsets.all(12),
decoration: isSelected
? BoxDecoration(
color: AppColorScheme.darkPrimary.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: AppColorScheme.darkPrimary.withValues(alpha: 0.3),
blurRadius: 15,
spreadRadius: 0,
),
],
)
: null,
child: Icon(
item.icon,
color: color,
size: 24,
),
),
);