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

feat(ui): 优化所有页面使用现代设计系统

Browse Source 
- 使用 AppSpacing 替换硬编码间距
- 使用 AppRadius 替换硬编码圆角
- 使用 withValues(alpha:) 替换 withOpacity
- 优化 login_page, home_page, market_page, trade_page, asset_page, mine_page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
sion
2026-03-23 15:37:59 +08:00
parent 51b2f30a1b
commit b40c9f8360
7 changed files with 172 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:provider/provider.dart';
import '../../../core/constants/app_colors.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';
@@ -52,7 +54,7 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
body: Consumer2<MarketProvider, AssetProvider>(
builder: (context, market, asset, _) {
return SingleChildScrollView(
padding: const EdgeInsets.all(16),
padding: AppSpacing.pagePadding,
child: ShadForm(
key: _formKey,
child: Column(
@@ -65,9 +67,9 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
_priceController.text = coin.formattedPrice;
},
),
const SizedBox(height: 16),
SizedBox(height: AppSpacing.md),
if (_selectedCoin != null) _PriceCard(coin: _selectedCoin!),
const SizedBox(height: 16),
SizedBox(height: AppSpacing.md),
_TradeForm(
tradeType: _tradeType,
selectedCoin: _selectedCoin,
@@ -76,7 +78,7 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
tradeBalance: asset.overview?.tradeBalance,
onTradeTypeChanged: (type) => setState(() => _tradeType = type),
),
const SizedBox(height: 16),
SizedBox(height: AppSpacing.md),
_TradeButton(
isBuy: _tradeType == 0,
coinCode: _selectedCoin?.code,
@@ -129,7 +131,7 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
title: Row(
children: [
Icon(LucideIcons.circleCheck, color: theme.colorScheme.primary, size: 24),
const SizedBox(width: 8),
SizedBox(width: AppSpacing.sm),
const Text('交易成功'),
],
),
@@ -170,11 +172,11 @@ class _CoinSelector extends StatelessWidget {
}
return ShadCard(
padding: const EdgeInsets.all(16),
padding: AppSpacing.cardPadding,
child: Row(
children: [
_CoinAvatar(icon: selectedCoin?.displayIcon),
const SizedBox(width: 12),
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -183,7 +185,7 @@ class _CoinSelector extends StatelessWidget {
selectedCoin != null ? '${selectedCoin!.code}/USDT' : '选择币种',
style: theme.textTheme.large.copyWith(fontWeight: FontWeight.bold),
),
const SizedBox(height: 4),
SizedBox(height: AppSpacing.xs),
Text(selectedCoin?.name ?? '点击选择交易对', style: theme.textTheme.muted),
],
),
@@ -225,10 +227,10 @@ class _PriceCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final color = coin.isUp ? AppColors.up : AppColors.down;
final color = coin.isUp ? AppColorScheme.up : AppColorScheme.down;
return ShadCard(
padding: const EdgeInsets.all(16),
padding: AppSpacing.cardPadding,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@@ -236,15 +238,15 @@ class _PriceCard extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('最新价', style: theme.textTheme.muted),
const SizedBox(height: 4),
SizedBox(height: AppSpacing.xs),
Text('\$${coin.formattedPrice}', style: theme.textTheme.h2.copyWith(fontWeight: FontWeight.bold)),
],
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
padding: EdgeInsets.symmetric(horizontal: AppSpacing.sm + AppSpacing.xs, vertical: AppSpacing.xs + AppSpacing.xs),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(AppRadius.md),
),
child: Text(
coin.formattedChange,
@@ -280,7 +282,7 @@ class _TradeForm extends StatelessWidget {
final theme = ShadTheme.of(context);
return ShadCard(
padding: const EdgeInsets.all(16),
padding: AppSpacing.cardPadding,
child: Column(
children: [
// 买入/卖出切换
@@ -288,7 +290,7 @@ class _TradeForm extends StatelessWidget {
tradeType: tradeType,
onChanged: onTradeTypeChanged,
),
const SizedBox(height: 20),
SizedBox(height: AppSpacing.lg + AppSpacing.xs),
// 价格输入
ShadInputFormField(
id: 'price',
@@ -296,13 +298,13 @@ class _TradeForm extends StatelessWidget {
controller: priceController,
keyboardType: const TextInputType.numberWithOptions(decimal: true),
placeholder: const Text('输入价格'),
trailing: const Padding(
padding: EdgeInsets.only(right: 8),
child: Text('USDT'),
trailing: Padding(
padding: EdgeInsets.only(right: AppSpacing.sm),
child: const Text('USDT'),
),
validator: Validators.price,
),
const SizedBox(height: 12),
SizedBox(height: AppSpacing.md),
// 数量输入
ShadInputFormField(
id: 'quantity',
@@ -311,15 +313,15 @@ class _TradeForm extends StatelessWidget {
keyboardType: const TextInputType.numberWithOptions(decimal: true),
placeholder: const Text('输入数量'),
trailing: Padding(
padding: const EdgeInsets.only(right: 8),
padding: EdgeInsets.only(right: AppSpacing.sm),
child: Text(selectedCoin?.code ?? ''),
),
validator: Validators.quantity,
),
const SizedBox(height: 16),
SizedBox(height: AppSpacing.md),
// 交易金额
_InfoRow(label: '交易金额', value: '${_calculateAmount()} USDT'),
const SizedBox(height: 8),
SizedBox(height: AppSpacing.sm),
// 可用余额
_InfoRow(label: '可用', value: '${tradeBalance ?? '0.00'} USDT'),
],
@@ -349,16 +351,16 @@ class _TradeTypeSelector extends StatelessWidget {
child: _TypeButton(
label: '买入',
isSelected: tradeType == 0,
color: AppColors.up,
color: AppColorScheme.up,
onTap: () => onChanged(0),
),
),
const SizedBox(width: 16),
SizedBox(width: AppSpacing.md),
Expanded(
child: _TypeButton(
label: '卖出',
isSelected: tradeType == 1,
color: AppColors.down,
color: AppColorScheme.down,
onTap: () => onChanged(1),
),
),
@@ -386,10 +388,10 @@ class _TypeButton extends StatelessWidget {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12),
padding: EdgeInsets.symmetric(vertical: AppSpacing.sm + AppSpacing.xs),
decoration: BoxDecoration(
color: isSelected ? color : Colors.transparent,
borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(AppRadius.md),
border: isSelected ? null : Border.all(color: color),
),
child: Center(
@@ -441,7 +443,7 @@ class _TradeButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final color = isBuy ? AppColors.up : AppColors.down;
final color = isBuy ? AppColorScheme.up : AppColorScheme.down;
return SizedBox(
width: double.infinity,
@@ -453,7 +455,7 @@ class _TradeButton extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(isBuy ? LucideIcons.arrowDownToLine : LucideIcons.arrowUpFromLine, size: 18, color: Colors.white),
const SizedBox(width: 8),
SizedBox(width: AppSpacing.sm),
Text(
'${isBuy ? '买入' : '卖出'} ${coinCode ?? ''}',
style: const TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.w600),