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

fix: 修复UI样式问题

Browse Source 
- 首页：移除盈亏日历，福利中心卡片改为白色背景，查看按钮改为黄色
- 资产页面：余额卡片撑满宽度
- 底部导航栏：移除背景高亮，只保留图标和文字变化
- 行情页面：调整卡片文字大小和柱形图样式
- 交易页面：买入按钮白色文字，卖出按钮红色文字，优化输入框和百分比卡片样式，添加顶部间距
- 全局：移除渐变色，统一使用纯色背景
This commit is contained in:
sion
2026-04-06 11:21:10 +08:00
parent 951d597057
commit 2bc6ff66e1
8 changed files with 65 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
flutter_monisuo/lib/ui/pages/asset/components/balance_card.dart
View File

@@ -26,33 +26,36 @@ class BalanceCard extends StatelessWidget {
? (provider.fundAccount?.balance ?? provider.overview?.fundBalance ?? '0.00')
: _calculateTradeTotal();
return GlassPanel(
padding: const EdgeInsets.all(20),
borderRadius: BorderRadius.circular(AppRadius.lg),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'USDT 余额',
style: AppTextStyles.bodyMedium(context).copyWith(
color: context.colors.onSurfaceVariant,
fontWeight: FontWeight.w400,
return SizedBox(
width: double.infinity, // 确保卡片撑满宽度
child: GlassPanel(
padding: const EdgeInsets.all(20),
borderRadius: BorderRadius.circular(AppRadius.lg),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'USDT 余额',
style: AppTextStyles.bodyMedium(context).copyWith(
color: context.colors.onSurfaceVariant,
fontWeight: FontWeight.w400,
),
),
),
const SizedBox(height: 12),
Text(
_formatBalance(displayBalance),
style: AppTextStyles.numberLarge(context),
),
const SizedBox(height: 12),
Text(
'\u2248 \$${_formatBalance(displayBalance)} USD',
style: AppTextStyles.bodyMedium(context).copyWith(
color: context.appColors.onSurfaceMuted,
fontWeight: FontWeight.w400,
const SizedBox(height: 12),
Text(
_formatBalance(displayBalance),
style: AppTextStyles.numberLarge(context),
),
),
],
const SizedBox(height: 12),
Text(
'\u2248 \$${_formatBalance(displayBalance)} USD',
style: AppTextStyles.bodyMedium(context).copyWith(
color: context.appColors.onSurfaceMuted,
fontWeight: FontWeight.w400,
),
),
],
),
),
);
}

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

@@ -2,7 +2,6 @@ import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:bot_toast/bot_toast.dart';
import 'package:provider/provider.dart';
import '../../../core/theme/app_theme.dart';
import '../../../core/theme/app_color_scheme.dart';
@@ -11,7 +10,6 @@ import '../../../core/theme/app_theme_extension.dart';
import '../../../core/utils/toast_utils.dart';
import '../../../core/event/app_event_bus.dart';
import '../../../data/models/account_models.dart';
import '../../../data/services/asset_service.dart';
import '../../../data/services/bonus_service.dart';
import '../../../providers/asset_provider.dart';
import '../../components/glass_panel.dart';
@@ -421,106 +419,27 @@ class _HomePageState extends State<HomePage>
}
/// Header 栏：品牌名 + 搜索/通知/头像
/// 资产卡片（含总盈利 + 可折叠盈亏日历）
class _AssetCard extends StatefulWidget {
/// 资产卡片（含总盈利）
class _AssetCard extends StatelessWidget {
final AssetOverview? overview;
final VoidCallback onDeposit;
const _AssetCard({required this.overview, required this.onDeposit});
@override
State<_AssetCard> createState() => _AssetCardState();
}
class _AssetCardState extends State<_AssetCard> {
late DateTime _currentMonth;
Map<String, dynamic>? _profitData;
bool _isLoadingCalendar = false;
@override
void initState() {
super.initState();
_currentMonth = DateTime.now();
WidgetsBinding.instance.addPostFrameCallback((_) => _loadProfit());
}
double get _totalProfit {
final v = widget.overview?.totalProfit;
final v = overview?.totalProfit;
if (v == null) return 0;
return double.tryParse(v) ?? 0;
}
Future<void> _loadProfit() async {
setState(() => _isLoadingCalendar = true);
try {
final assetService = context.read<AssetService>();
final response = await assetService.getDailyProfit(
year: _currentMonth.year,
month: _currentMonth.month,
);
if (mounted) {
setState(() {
_profitData = response.data;
_isLoadingCalendar = false;
});
}
} catch (_) {
if (mounted) setState(() => _isLoadingCalendar = false);
}
}
void _previousMonth() {
setState(() {
_currentMonth = DateTime(_currentMonth.year, _currentMonth.month - 1);
});
_loadProfit();
}
void _nextMonth() {
setState(() {
_currentMonth = DateTime(_currentMonth.year, _currentMonth.month + 1);
});
_loadProfit();
}
double? _getDayProfit(int day) {
if (_profitData == null) return null;
final daily = _profitData!['daily'] as Map<String, dynamic>?;
if (daily == null) return null;
final dateStr = '${_currentMonth.year}-${_currentMonth.month.toString().padLeft(2, '0')}-${day.toString().padLeft(2, '0')}';
final value = daily[dateStr];
if (value == null) return null;
return (value is num) ? value.toDouble() : double.tryParse(value.toString());
}
double get _monthProfit {
if (_profitData == null) return 0;
final value = _profitData!['totalProfit'];
if (value == null) return 0;
return (value is num) ? value.toDouble() : double.tryParse(value.toString()) ?? 0;
}
double? get _todayProfit {
if (_profitData == null) return null;
final daily = _profitData!['daily'] as Map<String, dynamic>?;
if (daily == null) return null;
final now = DateTime.now();
final todayKey = '${now.year}-${now.month.toString().padLeft(2, '0')}-${now.day.toString().padLeft(2, '0')}';
final value = daily[todayKey];
if (value == null) return null;
return (value is num) ? value.toDouble() : double.tryParse(value.toString());
}
@override
Widget build(BuildContext context) {
final upColor = context.appColors.up;
final downColor = context.appColors.down;
final isProfit = _totalProfit >= 0;
final todayProfit = _todayProfit;
final isTodayProfit = (todayProfit ?? 0) >= 0;
// 总资产
final totalAsset = widget.overview?.totalAsset ?? '0.00';
final totalAsset = overview?.totalAsset ?? '0.00';
final displayAsset = _formatAsset(totalAsset);
return GlassPanel(
@@ -538,7 +457,7 @@ class _AssetCardState extends State<_AssetCard> {
style: AppTextStyles.bodyLarge(context), // 13px
),
GestureDetector(
onTap: widget.onDeposit,
onTap: onDeposit,
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 10,
@@ -584,7 +503,7 @@ class _AssetCardState extends State<_AssetCard> {
Expanded(
child: _ProfitStatCard(
label: '今日盈亏',
value: _todayProfit,
value: null, // 移除日历后不显示今日盈亏
upColor: upColor,
downColor: downColor,
onTap: () => Navigator.push(
@@ -609,216 +528,11 @@ class _AssetCardState extends State<_AssetCard> {
),
],
),
// 盈利日历
_buildCalendarSection(context),
],
),
);
}
Widget _buildCalendarSection(BuildContext context) {
final now = DateTime.now();
final isCurrentMonth = _currentMonth.year == now.year && _currentMonth.month == now.month;
final firstDayOfMonth = DateTime(_currentMonth.year, _currentMonth.month, 1);
final daysInMonth = DateTime(_currentMonth.year, _currentMonth.month + 1, 0).day;
final startWeekday = firstDayOfMonth.weekday;
final upColor = context.appColors.up;
final downColor = context.appColors.down;
return Column(
mainAxisSize: MainAxisSize.min,
children: [
// 分隔线
Padding(
padding: EdgeInsets.symmetric(vertical: AppSpacing.md),
child: Divider(color: context.appColors.ghostBorder, height: 1),
),
// 月份导航行
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: _previousMonth,
child: Container(
padding: EdgeInsets.all(AppSpacing.xs + 1),
decoration: BoxDecoration(
color: context.colors.surfaceContainerHigh,
borderRadius: BorderRadius.circular(AppRadius.sm),
),
child: Icon(LucideIcons.chevronLeft, size: 16, color: context.colors.onSurfaceVariant),
),
),
Column(
children: [
Text(
'${_currentMonth.year}年${_currentMonth.month}月',
style: AppTextStyles.headlineMedium(context).copyWith(
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 2),
if (!_isLoadingCalendar && _profitData != null)
Text(
'月度盈亏: ${_monthProfit >= 0 ? '+' : ''}${_monthProfit.toStringAsFixed(2)}',
style: AppTextStyles.bodySmall(context).copyWith(
fontWeight: FontWeight.w600,
color: _monthProfit >= 0 ? upColor : downColor,
),
),
],
),
GestureDetector(
onTap: isCurrentMonth ? null : _nextMonth,
child: Container(
padding: EdgeInsets.all(AppSpacing.xs + 1),
decoration: BoxDecoration(
color: isCurrentMonth
? context.colors.surfaceContainerHigh.withValues(alpha: 0.5)
: context.colors.surfaceContainerHigh,
borderRadius: BorderRadius.circular(AppRadius.sm),
),
child: Icon(
LucideIcons.chevronRight,
size: 16,
color: isCurrentMonth
? context.colors.onSurfaceVariant.withValues(alpha: 0.4)
: context.colors.onSurfaceVariant,
),
),
),
],
),
SizedBox(height: AppSpacing.sm),
// 星期标题
Row(
children: ['一', '二', '三', '四', '五', '六', '日'].map((d) {
return Expanded(
child: Center(
child: Text(
d,
style: AppTextStyles.bodySmall(context).copyWith(
fontWeight: FontWeight.w500,
color: context.colors.onSurfaceVariant.withValues(alpha: 0.6),
),
),
),
);
}).toList(),
),
SizedBox(height: AppSpacing.xs),
// 日历网格
if (_isLoadingCalendar)
Padding(
padding: EdgeInsets.symmetric(vertical: AppSpacing.lg),
child: SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
strokeWidth: 2,
color: context.colors.primary,
),
),
)
else
..._buildCalendarGrid(
startWeekday, daysInMonth, now, isCurrentMonth,
),
],
);
}
List<Widget> _buildCalendarGrid(
int startWeekday,
int daysInMonth,
DateTime now,
bool isCurrentMonth,
) {
final upColor = context.appColors.up;
final downColor = context.appColors.down;
final List<Widget> rows = [];
List<Widget> cells = [];
for (int i = 1; i < startWeekday; i++) {
cells.add(const Expanded(child: SizedBox.shrink()));
}
for (int day = 1; day <= daysInMonth; day++) {
final profit = _getDayProfit(day);
final isToday = isCurrentMonth && day == now.day;
final hasProfit = profit != null && profit != 0;
cells.add(
Expanded(
child: AspectRatio(
aspectRatio: 1,
child: Container(
margin: EdgeInsets.all(1),
decoration: BoxDecoration(
color: isToday
? context.colors.primary.withValues(alpha: 0.12)
: hasProfit
? (profit! > 0
? upColor.withValues(alpha: 0.08)
: downColor.withValues(alpha: 0.08))
: Colors.transparent,
borderRadius: BorderRadius.circular(AppRadius.sm),
border: isToday
? Border.all(color: context.colors.primary.withValues(alpha: 0.4), width: 1)
: null,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'$day',
style: AppTextStyles.bodySmall(context).copyWith(
fontSize: 10,
fontWeight: isToday ? FontWeight.bold : FontWeight.w400,
color: isToday
? context.colors.primary
: context.colors.onSurface,
),
),
if (hasProfit) ...[
SizedBox(height: 1),
Text(
'${profit! > 0 ? '+' : ''}${profit.abs() < 10 ? profit.toStringAsFixed(2) : profit.toStringAsFixed(1)}',
style: TextStyle(
fontSize: 7,
fontWeight: FontWeight.w600,
color: profit > 0 ? upColor : downColor,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
],
),
),
),
),
);
if (cells.length == 7) {
rows.add(Row(children: cells));
cells = [];
}
}
if (cells.isNotEmpty) {
while (cells.length < 7) {
cells.add(const Expanded(child: SizedBox.shrink()));
}
rows.add(Row(children: cells));
}
return rows;
}
String _formatAsset(String value) {
final d = double.tryParse(value) ?? 0.0;
return d.toStringAsFixed(2);
@@ -840,16 +554,9 @@ class _WelfareCard extends StatelessWidget {
width: double.infinity,
padding: EdgeInsets.all(AppSpacing.lg),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
context.colors.primary.withValues(alpha: 0.15),
context.colors.secondary.withValues(alpha: 0.1),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
color: context.colors.surface, // 白色背景（跟随主题）
borderRadius: BorderRadius.circular(AppRadius.xl),
border: Border.all(color: context.colors.primary.withValues(alpha: 0.2)),
border: Border.all(color: context.colors.outlineVariant.withValues(alpha: 0.2)),
),
child: Row(
children: [
@@ -889,14 +596,14 @@ class _WelfareCard extends StatelessWidget {
],
),
),
// 右侧按钮
// 右侧按钮 - 黄色背景
Container(
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.sm,
),
decoration: BoxDecoration(
gradient: context.appColors.ctaGradient,
color: const Color(0xFFF59E0B), // 黄色背景
borderRadius: BorderRadius.circular(AppRadius.full),
),
child: Row(
@@ -923,7 +630,7 @@ class _WelfareCard extends StatelessWidget {
'查看',
style: AppTextStyles.headlineSmall(context).copyWith(
fontWeight: FontWeight.w700,
color: context.colors.onPrimary,
color: Colors.white, // 白色文字
),
),
],

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

@@ -142,15 +142,17 @@ class _BottomNavBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final isDark = Theme.of(context).brightness == Brightness.dark;
// Light: #FFFFFF, Dark: #0F172A
final backgroundColor = isDark ? const Color(0xFF0F172A) : const Color(0xFFFFFFFF);
return Container(
decoration: BoxDecoration(
color: colorScheme.surfaceContainerLow,
color: backgroundColor,
borderRadius: BorderRadius.vertical(top: Radius.circular(AppRadius.xxl + AppSpacing.sm)),
border: Border(
top: BorderSide(
color: colorScheme.outlineVariant.withValues(alpha: 0.15),
color: Theme.of(context).colorScheme.outlineVariant.withValues(alpha: 0.15),
),
),
),
@@ -193,15 +195,8 @@ class _NavItemWidget extends StatelessWidget {
return GestureDetector(
onTap: onTap,
behavior: HitTestBehavior.opaque,
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: AppSpacing.md, vertical: AppSpacing.sm),
decoration: isSelected
? BoxDecoration(
color: colorScheme.primary.withValues(alpha: 0.1),
borderRadius: AppRadius.radiusMd,
)
: null,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [

15
flutter_monisuo/lib/ui/pages/market/market_page.dart
View File

@@ -222,7 +222,7 @@ class _FeaturedCard extends StatelessWidget {
children: [
Text(
'${coin.code}/USDT',
style: AppTextStyles.headlineMedium(context),
style: AppTextStyles.labelLarge(context), // 缩小文字
),
Container(
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs + 2, vertical: 2),
@@ -234,6 +234,7 @@ class _FeaturedCard extends StatelessWidget {
coin.formattedChange,
style: AppTextStyles.labelSmall(context).copyWith(
color: changeColor,
fontSize: 10, // 缩小文字
),
),
),
@@ -242,12 +243,14 @@ class _FeaturedCard extends StatelessWidget {
// 第二行：价格
Text(
'\$${_formatFeaturedPrice(coin)}',
style: AppTextStyles.displayMedium(context),
style: AppTextStyles.headlineLarge(context).copyWith( // 缩小文字
fontWeight: FontWeight.bold,
),
),
// 第三行：币种全名
Text(
coin.name,
style: AppTextStyles.bodyMedium(context).copyWith(
style: AppTextStyles.bodySmall(context).copyWith( // 缩小文字
color: context.colors.onSurfaceVariant,
),
),
@@ -307,7 +310,7 @@ class _MiniBarChart extends StatelessWidget {
children: heights.map((h) {
return Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 1.5),
padding: const EdgeInsets.only(left: 2), // 增加间距
child: Container(
height: h,
decoration: BoxDecoration(
@@ -323,8 +326,8 @@ class _MiniBarChart extends StatelessWidget {
List<double> _generateHeights() {
final random = Random(seed);
final base = 8.0;
final range = 16.0;
final base = 6.0; // 降低基础高度
final range = 12.0; // 降低范围
return List.generate(6, (_) => base + random.nextDouble() * range);
}
}

2
flutter_monisuo/lib/ui/pages/trade/components/amount_input.dart
View File

@@ -63,7 +63,7 @@ class _AmountInputState extends State<AmountInput> {
Container(
height: 48,
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest.withOpacity(0.3),
color: colorScheme.surfaceContainerHighest.withOpacity(0.5), // 调整透明度
borderRadius: BorderRadius.circular(AppRadius.md),
),
child: TextField(

12
flutter_monisuo/lib/ui/pages/trade/components/trade_button.dart
View File

@@ -5,7 +5,7 @@ import '../../../../core/theme/app_theme.dart';
/// 交易按钮组件
///
/// CTA 买入/卖出按钮。profit-green底 / sell-red底，圆角lg，高48，白字16px bold。
/// CTA 买入/卖出按钮。profit-green底 / sell-red底，圆角lg，高48，买入白字/卖出红字16px bold。
class TradeButton extends StatelessWidget {
final bool isBuy;
final String? coinCode;
@@ -27,6 +27,10 @@ class TradeButton extends StatelessWidget {
final colorScheme = Theme.of(context).colorScheme;
final fillColor =
isBuy ? AppColorScheme.buyButtonFill : AppColorScheme.sellButtonFill;
// 买入按钮文字为白色，卖出按钮文字为红色
final textColor = isBuy
? Colors.white
: (enabled ? AppColorScheme.sellButtonFill : colorScheme.onSurface.withOpacity(0.3));
return GestureDetector(
onTap: enabled ? onPressed : null,
@@ -39,19 +43,19 @@ class TradeButton extends StatelessWidget {
),
child: Center(
child: isLoading
? const SizedBox(
? SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
color: AppColorScheme.darkOnPrimary,
color: isBuy ? Colors.white : AppColorScheme.sellButtonFill,
),
)
: Text(
'${isBuy ? '买入' : '卖出'} ${coinCode ?? ""}',
style: AppTextStyles.headlineLarge(context).copyWith(
color: enabled
? AppColorScheme.darkOnPrimary
? textColor
: colorScheme.onSurface.withOpacity(0.3),
),
),

2
flutter_monisuo/lib/ui/pages/trade/components/trade_form_card.dart
View File

@@ -207,7 +207,7 @@ class TradeFormCard extends StatelessWidget {
child: Container(
height: 32,
decoration: BoxDecoration(
color: context.colors.surfaceContainerHighest, // 移除 0.5 透明度
color: context.colors.surfaceContainerHighest.withOpacity(0.5), // 更柔和的颜色
borderRadius: BorderRadius.circular(AppRadius.sm),
),
child: Center(

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

@@ -121,7 +121,7 @@ class _TradePageState extends State<TradePage>
return SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(
AppSpacing.md, 0, AppSpacing.md, AppSpacing.xl + AppSpacing.sm,
AppSpacing.md, AppSpacing.md, AppSpacing.md, AppSpacing.xl + AppSpacing.sm, // 添加顶部间距
),
child: Column(
children: [