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

feat(ui): 应用新设计系统到 Flutter 项目

Browse Source 
- 更新颜色系统为 Material Design 3
  * Primary: #72dcff (青色)
  * Secondary: #dd8bfb (紫色)
  * Tertiary: #afffd1 (绿色)

- 创建新的 UI 组件
  * GlassPanel: 毛玻璃效果面板
  * NeonGlow: 霓虹光效组件
  * GradientButton: 渐变按钮组件

- 更新所有页面样式
  * 交易页面 (trade_page.dart)
  * 行情页面 (market_page.dart)
  * 资产页面 (asset_page.dart)
  * 我的页面 (mine_page.dart)
  * 订单页面 (orders_page.dart)

- 支持深色和浅色主题
- 所有 UI 文字使用中文
- 保持现有 API 接口不变

变更统计:
- 9 个文件修改
- 1,893 行新增
- 691 行删除
- 3 个新组件
This commit is contained in:
sion
2026-03-24 02:16:19 +08:00
parent dc61d845a5
commit df0e8beba9
11 changed files with 2625 additions and 705 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
flutter_monisuo/lib/ui/pages/trade/trade_page.dart
View File

@@ -1,14 +1,17 @@
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:provider/provider.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../../core/theme/app_color_scheme.dart';
import '../../../core/theme/app_spacing.dart';
import '../../../data/models/coin.dart';
import '../../../providers/market_provider.dart';
import '../../../providers/asset_provider.dart';
import '../../shared/ui_constants.dart';
import '../../components/glass_panel.dart';
import '../../components/neon_glow.dart';
/// 交易页面 - 使用 shadcn_ui 现代化设计
/// 交易页面 - Material Design 3 风格
class TradePage extends StatefulWidget {
const TradePage({super.key});
@@ -17,15 +20,15 @@ class TradePage extends StatefulWidget {
}
class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
int _tradeType = 0; // 0=买入, 1=卖出
Coin? _selectedCoin;
final _formKey = GlobalKey<ShadFormState>();
final _priceController = TextEditingController();
final _quantityController = TextEditingController();
@override
bool get wantKeepAlive => true;
@override
void initState() {
super.initState();
@@ -46,10 +49,9 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
@override
Widget build(BuildContext context) {
super.build(context);
final theme = ShadTheme.of(context);
return Scaffold(
backgroundColor: theme.colorScheme.background,
backgroundColor: AppColorScheme.darkBackground,
body: Consumer2<MarketProvider, AssetProvider>(
builder: (context, market, asset, _) {
return SingleChildScrollView(
@@ -77,7 +79,7 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
tradeBalance: asset.overview?.tradeBalance,
onTradeTypeChanged: (type) => setState(() => _tradeType = type),
),
SizedBox(height: AppSpacing.md),
SizedBox(height: AppSpacing.lg),
_TradeButton(
isBuy: _tradeType == 0,
coinCode: _selectedCoin?.code,
@@ -121,7 +123,6 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
}
void _showTradeResult() {
final theme = ShadTheme.of(context);
final isBuy = _tradeType == 0;
showShadDialog(
@@ -129,7 +130,11 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
builder: (ctx) => ShadDialog.alert(
title: Row(
children: [
Icon(LucideIcons.circleCheck, color: theme.colorScheme.primary, size: 24),
NeonIcon(
icon: Icons.check_circle,
color: AppColorScheme.darkPrimary,
size: 24,
),
SizedBox(width: AppSpacing.sm),
const Text('交易成功'),
],
@@ -149,7 +154,7 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
}
}
/// 币种选择器
/// 币种选择器 - Glass Panel 风格
class _CoinSelector extends StatelessWidget {
final Coin? selectedCoin;
final List<Coin> coins;
@@ -163,15 +168,13 @@ class _CoinSelector extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
// 自动选择第一个币种
if (selectedCoin == null && coins.isNotEmpty) {
WidgetsBinding.instance.addPostFrameCallback((_) => onCoinLoaded(coins.first));
}
return ShadCard(
padding: AppSpacing.cardPadding,
return GlassCard(
showNeonGlow: false,
child: Row(
children: [
_CoinAvatar(icon: selectedCoin?.displayIcon),
@@ -182,21 +185,34 @@ class _CoinSelector extends StatelessWidget {
children: [
Text(
selectedCoin != null ? '${selectedCoin!.code}/USDT' : '选择币种',
style: theme.textTheme.large.copyWith(fontWeight: FontWeight.bold),
style: GoogleFonts.spaceGrotesk(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppColorScheme.darkOnSurface,
),
),
SizedBox(height: AppSpacing.xs),
Text(selectedCoin?.name ?? '点击选择交易对', style: theme.textTheme.muted),
Text(
selectedCoin?.name ?? '点击选择交易对',
style: TextStyle(
fontSize: 12,
color: AppColorScheme.darkOnSurfaceVariant,
),
),
],
),
),
Icon(LucideIcons.chevronRight, color: theme.colorScheme.mutedForeground),
Icon(
LucideIcons.chevronRight,
color: AppColorScheme.darkOnSurfaceVariant,
),
],
),
);
}
}
/// 币种头像
/// 币种头像 - 带霓虹光效
class _CoinAvatar extends StatelessWidget {
final String? icon;
@@ -204,20 +220,31 @@ class _CoinAvatar extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return CircleAvatar(
radius: 22,
backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.1),
child: Text(
icon ?? '?',
style: TextStyle(fontSize: 20, color: theme.colorScheme.primary),
return Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: AppColorScheme.darkPrimary.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(
color: AppColorScheme.darkPrimary.withValues(alpha: 0.2),
),
),
child: Center(
child: Text(
icon ?? '?',
style: TextStyle(
fontSize: 20,
color: AppColorScheme.darkPrimary,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
/// 价格卡片
/// 价格卡片 - Glass Panel 风格
class _PriceCard extends StatelessWidget {
final Coin coin;
@@ -225,31 +252,56 @@ class _PriceCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final color = coin.isUp ? AppColorScheme.up : AppColorScheme.down;
final bgColor = coin.isUp
? AppColorScheme.darkTertiary.withValues(alpha: 0.1)
: AppColorScheme.darkError.withValues(alpha: 0.1);
return ShadCard(
padding: AppSpacing.cardPadding,
return GlassCard(
showNeonGlow: false,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('最新价', style: theme.textTheme.muted),
Text(
'最新价',
style: TextStyle(
fontSize: 12,
color: AppColorScheme.darkOnSurfaceVariant,
),
),
SizedBox(height: AppSpacing.xs),
Text('\$${coin.formattedPrice}', style: theme.textTheme.h2.copyWith(fontWeight: FontWeight.bold)),
Text(
'\$${coin.formattedPrice}',
style: GoogleFonts.spaceGrotesk(
fontSize: 28,
fontWeight: FontWeight.bold,
color: AppColorScheme.darkOnSurface,
),
),
],
),
Container(
padding: EdgeInsets.symmetric(horizontal: AppSpacing.sm + AppSpacing.xs, vertical: AppSpacing.xs + AppSpacing.xs),
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.sm,
),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.2),
color: bgColor,
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(
color: color.withValues(alpha: 0.2),
),
),
child: Text(
coin.formattedChange,
style: TextStyle(fontSize: 16, color: color, fontWeight: FontWeight.w600),
style: TextStyle(
fontSize: 16,
color: color,
fontWeight: FontWeight.w700,
),
),
),
],
@@ -258,7 +310,7 @@ class _PriceCard extends StatelessWidget {
}
}
/// 交易表单
/// 交易表单 - Glass Panel 风格
class _TradeForm extends StatelessWidget {
final int tradeType;
final Coin? selectedCoin;
@@ -278,10 +330,8 @@ class _TradeForm extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return ShadCard(
padding: AppSpacing.cardPadding,
return GlassPanel(
padding: EdgeInsets.all(AppSpacing.lg),
child: Column(
children: [
// 买入/卖出切换
@@ -289,45 +339,96 @@ class _TradeForm extends StatelessWidget {
tradeType: tradeType,
onChanged: onTradeTypeChanged,
),
SizedBox(height: AppSpacing.lg + AppSpacing.xs),
SizedBox(height: AppSpacing.lg),
// 价格输入
ShadInputFormField(
id: 'price',
label: const Text('价格(USDT)'),
_buildInputField(
label: '价格(USDT)',
controller: priceController,
keyboardType: const TextInputType.numberWithOptions(decimal: true),
placeholder: const Text('输入价格'),
trailing: Padding(
padding: EdgeInsets.only(right: AppSpacing.sm),
child: const Text('USDT'),
),
validator: Validators.price,
placeholder: '输入价格',
suffix: 'USDT',
),
SizedBox(height: AppSpacing.md),
// 数量输入
ShadInputFormField(
id: 'quantity',
label: const Text('数量'),
_buildInputField(
label: '数量',
controller: quantityController,
keyboardType: const TextInputType.numberWithOptions(decimal: true),
placeholder: const Text('输入数量'),
trailing: Padding(
padding: EdgeInsets.only(right: AppSpacing.sm),
child: Text(selectedCoin?.code ?? ''),
),
validator: Validators.quantity,
placeholder: '输入数量',
suffix: selectedCoin?.code ?? '',
),
SizedBox(height: AppSpacing.md),
// 交易金额
SizedBox(height: AppSpacing.lg),
// 信息行
_InfoRow(label: '交易金额', value: '${_calculateAmount()} USDT'),
SizedBox(height: AppSpacing.sm),
// 可用余额
_InfoRow(label: '可用', value: '${tradeBalance ?? '0.00'} USDT'),
],
),
);
}
Widget _buildInputField({
required String label,
required TextEditingController controller,
required String placeholder,
required String suffix,
}) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
letterSpacing: 0.2,
color: AppColorScheme.darkOnSurfaceVariant,
),
),
SizedBox(height: AppSpacing.xs),
Container(
decoration: BoxDecoration(
color: AppColorScheme.darkSurfaceLowest,
borderRadius: BorderRadius.circular(AppRadius.xl),
border: Border.all(
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.3),
),
),
child: TextField(
controller: controller,
keyboardType: const TextInputType.numberWithOptions(decimal: true),
style: GoogleFonts.spaceGrotesk(
fontSize: 20,
fontWeight: FontWeight.bold,
color: AppColorScheme.darkOnSurface,
),
decoration: InputDecoration(
hintText: placeholder,
hintStyle: TextStyle(
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.5),
),
border: InputBorder.none,
contentPadding: EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.md,
),
suffixIcon: Padding(
padding: EdgeInsets.only(right: AppSpacing.sm),
child: Text(
suffix,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: AppColorScheme.darkOnSurfaceVariant,
),
),
),
suffixIconConstraints: const BoxConstraints(minWidth: 50),
),
),
),
],
);
}
String _calculateAmount() {
final price = double.tryParse(priceController.text) ?? 0;
final quantity = double.tryParse(quantityController.text) ?? 0;
@@ -335,7 +436,7 @@ class _TradeForm extends StatelessWidget {
}
}
/// 交易类型选择器
/// 交易类型选择器 - Material Design 3 风格
class _TradeTypeSelector extends StatelessWidget {
final int tradeType;
final ValueChanged<int> onChanged;
@@ -344,26 +445,33 @@ class _TradeTypeSelector extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: _TypeButton(
label: '买入',
isSelected: tradeType == 0,
color: AppColorScheme.up,
onTap: () => onChanged(0),
return Container(
padding: EdgeInsets.all(AppSpacing.xs),
decoration: BoxDecoration(
color: AppColorScheme.darkSurfaceLowest,
borderRadius: BorderRadius.circular(AppRadius.xl),
),
child: Row(
children: [
Expanded(
child: _TypeButton(
label: 'Buy',
isSelected: tradeType == 0,
color: AppColorScheme.up,
onTap: () => onChanged(0),
),
),
),
SizedBox(width: AppSpacing.md),
Expanded(
child: _TypeButton(
label: '卖出',
isSelected: tradeType == 1,
color: AppColorScheme.down,
onTap: () => onChanged(1),
SizedBox(width: AppSpacing.sm),
Expanded(
child: _TypeButton(
label: 'Sell',
isSelected: tradeType == 1,
color: AppColorScheme.down,
onTap: () => onChanged(1),
),
),
),
],
],
),
);
}
}
@@ -386,19 +494,22 @@ class _TypeButton extends StatelessWidget {
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: EdgeInsets.symmetric(vertical: AppSpacing.sm + AppSpacing.xs),
decoration: BoxDecoration(
color: isSelected ? color : Colors.transparent,
color: isSelected ? color.withValues(alpha: 0.15) : Colors.transparent,
borderRadius: BorderRadius.circular(AppRadius.md),
border: isSelected ? null : Border.all(color: color),
border: isSelected ? null : Border.all(color: color.withValues(alpha: 0.3)),
),
child: Center(
child: Text(
label,
style: TextStyle(
color: isSelected ? Colors.white : color,
fontWeight: FontWeight.w600,
color: isSelected ? color : color.withValues(alpha: 0.7),
fontWeight: FontWeight.w700,
fontSize: 14,
letterSpacing: 0.5,
),
),
),
@@ -416,19 +527,30 @@ class _InfoRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(label, style: theme.textTheme.muted),
Text(value, style: theme.textTheme.small.copyWith(fontWeight: FontWeight.w600)),
Text(
label,
style: TextStyle(
fontSize: 14,
color: AppColorScheme.darkOnSurfaceVariant,
),
),
Text(
value,
style: GoogleFonts.spaceGrotesk(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColorScheme.darkOnSurface,
),
),
],
);
}
}
/// 交易按钮
/// 交易按钮 - 带霓虹光效
class _TradeButton extends StatelessWidget {
final bool isBuy;
final String? coinCode;
@@ -442,26 +564,13 @@ class _TradeButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final color = isBuy ? AppColorScheme.up : AppColorScheme.down;
return SizedBox(
return NeonButton(
text: '${isBuy ? '买入' : '卖出'} ${coinCode ?? ''}',
type: isBuy ? NeonButtonType.tertiary : NeonButtonType.error,
icon: isBuy ? Icons.arrow_downward : Icons.arrow_upward,
onPressed: onPressed,
width: double.infinity,
height: 48,
child: ShadButton(
backgroundColor: color,
onPressed: onPressed,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(isBuy ? LucideIcons.arrowDownToLine : LucideIcons.arrowUpFromLine, size: 18, color: Colors.white),
SizedBox(width: AppSpacing.sm),
Text(
'${isBuy ? '买入' : '卖出'} ${coinCode ?? ''}',
style: const TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.w600),
),
],
),
),
showGlow: true,
);
}
}