feat: 优化
This commit is contained in:
@@ -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,
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user