sion
658f49e280
## 样式主题重点优化 ### 颜色映射（注重主题一致性） - mutedForeground → onSurfaceVariant - border → outline - card → surfaceContainer - destructive → error - 保留所有 AppColorScheme 自定义颜色 ### 文本样式映射 - theme.textTheme.h1/muted/large → AppTextStyles.xxx(context) - 统一使用项目定义的文本样式系统 ### 组件替换（20个文件） - ShadApp → MaterialApp（移除 ShadThemeData） - ShadButton → ElevatedButton/OutlinedButton - ShadDialog → AlertDialog - ShadInputFormField → MaterialInput - ShadSelect → DropdownButtonFormField - ShadCard → Card - showShadDialog → showDialog ### 依赖变更 - 移除：shadcn_ui: ^0.52.1 - 添加：lucide_icons_flutter: ^2.0.0 ### 业务逻辑保护 ✅ 所有 onPressed/onChanged/validator 回调保持不变 ✅ 所有 controller/focusNode 数据绑定保持不变 ✅ 所有布局结构（Column/Row/Padding）保持不变 ✅ 仅替换 UI 组件层，业务逻辑完全保留
310 lines
10 KiB
Dart
310 lines
10 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||
import 'package:provider/provider.dart';
|
||
import '../../../core/theme/app_spacing.dart';
|
||
import '../../../core/theme/app_theme_extension.dart';
|
||
import '../../../data/models/coin.dart';
|
||
import '../../../providers/market_provider.dart';
|
||
import '../../../providers/asset_provider.dart';
|
||
import '../../../data/services/trade_service.dart';
|
||
import '../../components/neon_glow.dart';
|
||
import 'components/coin_selector.dart';
|
||
import 'components/price_card.dart';
|
||
import 'components/placeholder_card.dart';
|
||
import 'components/trade_form_card.dart';
|
||
import 'components/trade_button.dart';
|
||
import 'components/confirm_dialog.dart';
|
||
|
||
/// 交易頁面
|
||
///
|
||
/// 設計稿 Trade 頁面，佈局結構：
|
||
/// - 幣種選擇器卡片（Coin Selector Card）
|
||
/// - 價格卡片（Price Card）：大號價格 + 漲跌幅徽章 + 副標題
|
||
/// - 買入/賣出切換（Buy/Sell Toggle）
|
||
/// - 交易表單卡片（Trade Form Card）：金額輸入 + 快捷比例 + 計算數量
|
||
/// - CTA 買入/賣出按鈕（Buy/Sell Button）
|
||
class TradePage extends StatefulWidget {
|
||
final String? initialCoinCode;
|
||
|
||
const TradePage({super.key, this.initialCoinCode});
|
||
|
||
@override
|
||
State<TradePage> createState() => _TradePageState();
|
||
}
|
||
|
||
class _TradePageState extends State<TradePage>
|
||
with AutomaticKeepAliveClientMixin {
|
||
int _tradeType = 0; // 0=買入, 1=賣出
|
||
Coin? _selectedCoin;
|
||
final _amountController = TextEditingController();
|
||
bool _isSubmitting = false;
|
||
|
||
@override
|
||
bool get wantKeepAlive => true;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
WidgetsBinding.instance.addPostFrameCallback((_) => _loadData());
|
||
}
|
||
|
||
void _loadData() {
|
||
final marketProvider = context.read<MarketProvider>();
|
||
marketProvider.loadCoins().then((_) {
|
||
if (widget.initialCoinCode != null && _selectedCoin == null) {
|
||
final coins = marketProvider.allCoins;
|
||
final coin = coins.firstWhere(
|
||
(c) =>
|
||
c.code.toUpperCase() == widget.initialCoinCode!.toUpperCase(),
|
||
orElse: () =>
|
||
coins.isNotEmpty ? coins.first : throw Exception('No coins'),
|
||
);
|
||
if (mounted) setState(() => _selectedCoin = coin);
|
||
}
|
||
});
|
||
context.read<AssetProvider>().refreshAll(force: true);
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_amountController.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
/// 獲取交易賬戶中 USDT 可用餘額
|
||
String get _availableUsdt {
|
||
final holdings = context.read<AssetProvider>().holdings;
|
||
final usdt = holdings.where((h) => h.coinCode == 'USDT').firstOrNull;
|
||
return usdt?.quantity ?? '0';
|
||
}
|
||
|
||
/// 獲取交易賬戶中當前幣種的持倉數量
|
||
String get _availableCoinQty {
|
||
if (_selectedCoin == null) return '0';
|
||
final holdings = context.read<AssetProvider>().holdings;
|
||
final pos = holdings
|
||
.where((h) => h.coinCode == _selectedCoin!.code)
|
||
.firstOrNull;
|
||
return pos?.quantity ?? '0';
|
||
}
|
||
|
||
/// 計算可買入/賣出的最大 USDT 金額
|
||
String get _maxAmount {
|
||
if (_selectedCoin == null) return '0';
|
||
final price = _selectedCoin!.price;
|
||
if (price <= 0) return '0';
|
||
|
||
if (_tradeType == 0) {
|
||
return _availableUsdt;
|
||
} else {
|
||
// 賣出：qty * price 截斷到2位
|
||
final qty = double.tryParse(_availableCoinQty) ?? 0;
|
||
return ((qty * price * 100).truncateToDouble() / 100).toStringAsFixed(2);
|
||
}
|
||
}
|
||
|
||
/// 計算數量（向下截斷到4位小數，確保 price * quantity <= amount）
|
||
String get _calculatedQuantity {
|
||
final amount = double.tryParse(_amountController.text) ?? 0;
|
||
final price = _selectedCoin?.price ?? 0;
|
||
if (price <= 0 || amount <= 0) return '0';
|
||
// 使用與後端一致的截斷邏輯：先算原始數量，截斷到4位，再回算金額確保不超
|
||
final rawQty = amount / price;
|
||
final truncatedQty = (rawQty * 10000).truncateToDouble() / 10000;
|
||
// 回算：roundedPrice * truncatedQty，確保不超過 amount
|
||
final roundedPrice = (price * 100).truncateToDouble() / 100;
|
||
if (roundedPrice * truncatedQty > amount) {
|
||
// 回退一個最小單位（0.0001）
|
||
return (truncatedQty - 0.0001).toStringAsFixed(4);
|
||
}
|
||
return truncatedQty.toStringAsFixed(4);
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
super.build(context);
|
||
|
||
return Scaffold(
|
||
backgroundColor: Theme.of(context).colorScheme.surface,
|
||
body: Consumer2<MarketProvider, AssetProvider>(
|
||
builder: (context, market, asset, _) {
|
||
return SafeArea(
|
||
child: SingleChildScrollView(
|
||
padding: const EdgeInsets.fromLTRB(
|
||
AppSpacing.md, AppSpacing.md, AppSpacing.md, AppSpacing.xl + AppSpacing.sm, // 添加頂部間距
|
||
),
|
||
child: Column(
|
||
children: [
|
||
// 幣種選擇器卡片
|
||
CoinSelector(
|
||
selectedCoin: _selectedCoin,
|
||
coins: market.allCoins
|
||
.where((c) =>
|
||
c.code != 'USDT' &&
|
||
c.code != 'BTC' &&
|
||
c.code != 'ETH')
|
||
.toList(),
|
||
onCoinSelected: (coin) {
|
||
setState(() {
|
||
_selectedCoin = coin;
|
||
_amountController.clear();
|
||
});
|
||
},
|
||
),
|
||
const SizedBox(height: AppSpacing.md),
|
||
|
||
// 價格卡片
|
||
if (_selectedCoin != null)
|
||
PriceCard(coin: _selectedCoin!)
|
||
else
|
||
PlaceholderCard(
|
||
message: '請先選擇交易幣種',
|
||
),
|
||
const SizedBox(height: AppSpacing.md),
|
||
|
||
// 交易表單卡片（內含買入/賣出切換 + 表單）
|
||
TradeFormCard(
|
||
tradeType: _tradeType,
|
||
selectedCoin: _selectedCoin,
|
||
amountController: _amountController,
|
||
availableUsdt: _availableUsdt,
|
||
availableCoinQty: _availableCoinQty,
|
||
calculatedQuantity: _calculatedQuantity,
|
||
maxAmount: _maxAmount,
|
||
onTradeTypeChanged: (type) => setState(() {
|
||
_tradeType = type;
|
||
_amountController.clear();
|
||
}),
|
||
onAmountChanged: () => setState(() {}),
|
||
onFillPercent: (pct) => _fillPercent(pct),
|
||
),
|
||
const SizedBox(height: AppSpacing.md),
|
||
|
||
// CTA 買入/賣出按鈕
|
||
SizedBox(
|
||
width: double.infinity,
|
||
height: 48,
|
||
child: TradeButton(
|
||
isBuy: _tradeType == 0,
|
||
coinCode: _selectedCoin?.code,
|
||
enabled: _canTrade() && !_isSubmitting,
|
||
isLoading: _isSubmitting,
|
||
onPressed: _executeTrade,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
},
|
||
),
|
||
);
|
||
}
|
||
|
||
bool _canTrade() {
|
||
if (_selectedCoin == null) return false;
|
||
final amount = double.tryParse(_amountController.text) ?? 0;
|
||
if (amount <= 0) return false;
|
||
// 買入時校驗不超過可用USDT
|
||
if (_tradeType == 0) {
|
||
final available = double.tryParse(_availableUsdt) ?? 0;
|
||
if (amount > available) return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
void _fillPercent(double pct) {
|
||
final max = double.tryParse(_maxAmount) ?? 0;
|
||
final value = max * pct;
|
||
|
||
if (_tradeType == 0) {
|
||
// 買入：向下截斷到2位小數
|
||
_amountController.text =
|
||
((value * 100).truncateToDouble() / 100).toStringAsFixed(2);
|
||
} else {
|
||
// 賣出：_maxAmount 已是 qty*price 的四捨五入值，直接截斷
|
||
_amountController.text =
|
||
((value * 100).truncateToDouble() / 100).toStringAsFixed(2);
|
||
}
|
||
setState(() {});
|
||
}
|
||
|
||
void _executeTrade() async {
|
||
final isBuy = _tradeType == 0;
|
||
final amount = _amountController.text;
|
||
final quantity = _calculatedQuantity;
|
||
final price = _selectedCoin!.price.toStringAsFixed(2);
|
||
final coinCode = _selectedCoin!.code;
|
||
|
||
final confirmed = await showDialog<bool>(
|
||
context: context,
|
||
builder: (ctx) => ConfirmDialog(
|
||
isBuy: isBuy,
|
||
coinCode: coinCode,
|
||
price: price,
|
||
quantity: quantity,
|
||
amount: amount,
|
||
),
|
||
);
|
||
|
||
if (confirmed != true) return;
|
||
|
||
setState(() => _isSubmitting = true);
|
||
|
||
try {
|
||
final tradeService = context.read<TradeService>();
|
||
final response = isBuy
|
||
? await tradeService.buy(
|
||
coinCode: coinCode, price: price, quantity: quantity)
|
||
: await tradeService.sell(
|
||
coinCode: coinCode, price: price, quantity: quantity);
|
||
|
||
if (!mounted) return;
|
||
|
||
if (response.success) {
|
||
_amountController.clear();
|
||
// 刷新資產數據
|
||
context.read<AssetProvider>().refreshAll(force: true);
|
||
_showResultDialog(true, '${isBuy ? '買入' : '賣出'}成功',
|
||
'$quantity $coinCode @ $price USDT');
|
||
} else {
|
||
_showResultDialog(false, '交易失敗', response.message ?? '請稍後重試');
|
||
}
|
||
} catch (e) {
|
||
if (mounted) {
|
||
_showResultDialog(false, '交易失敗', e.toString());
|
||
}
|
||
} finally {
|
||
if (mounted) setState(() => _isSubmitting = false);
|
||
}
|
||
}
|
||
|
||
void _showResultDialog(bool success, String title, String message) {
|
||
showDialog(
|
||
context: context,
|
||
builder: (ctx) => AlertDialog(
|
||
title: Row(
|
||
children: [
|
||
NeonIcon(
|
||
icon: success ? Icons.check_circle : Icons.error,
|
||
color: success
|
||
? ctx.appColors.up
|
||
: Theme.of(ctx).colorScheme.error,
|
||
size: 24,
|
||
),
|
||
SizedBox(width: AppSpacing.sm),
|
||
Text(title),
|
||
],
|
||
),
|
||
content: Text(message),
|
||
actions: [
|
||
TextButton(
|
||
child: const Text('確定'),
|
||
onPressed: () => Navigator.of(ctx).pop(),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|