hailin
/
rwadurian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(frontend): 添加全局深色模式支持 

核心改动：
1. app_colors.dart - 添加浅色/深色两套色彩常量和动态颜色获取方法
   - backgroundOf()、surfaceOf()、cardOf() 等方法根据主题返回对应颜色
   - 浅色：#F3F4F6背景、#FFFFFF卡片、#1F2937文字
   - 深色：#111827背景、#1F2937卡片、#E5E7EB文字

2. main.dart - 更新 ThemeData 配置
   - 添加 scaffoldBackgroundColor、appBarTheme、cardTheme 等深色主题配置

3. main_shell.dart - 导航栏支持深色模式
   - 使用 AppColors 动态方法替换硬编码颜色

4. trading_page.dart - 兑换页面支持深色模式
   - 所有卡片、文字颜色使用动态颜色方法
   - 划转弹窗也支持深色模式

5. contribution_page.dart - 贡献值页面开始支持（部分）

后续需要继续更新其他页面以完整支持深色模式切换

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
hailin 2026-01-19 19:08:03 -08:00
parent a47b935bce
commit bbe1754309
5 changed files with 224 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/mining-app/lib/core/constants/app_colors.dart
View File

@ -1,21 +1,82 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class AppColors { class AppColors {
// ==================== 品牌色彩（不随主题变化） ====================
static const Color primary = Color(0xFF22C55E); static const Color primary = Color(0xFF22C55E);
static const Color secondary = Color(0xFF3B82F6); static const Color secondary = Color(0xFF3B82F6);
static const Color background = Color(0xFFF8FAFC);
static const Color surface = Color(0xFFFFFFFF);
static const Color error = Color(0xFFEF4444); static const Color error = Color(0xFFEF4444);
static const Color success = Color(0xFF22C55E); static const Color success = Color(0xFF22C55E);
static const Color warning = Color(0xFFF59E0B); static const Color warning = Color(0xFFF59E0B);
static const Color orange = Color(0xFFFF6B00);
static const Color textPrimary = Color(0xFF1E293B); // 行情色彩
static const Color textSecondary = Color(0xFF64748B); static const Color up = Color(0xFF10B981);
static const Color textMuted = Color(0xFF94A3B8);
static const Color up = Color(0xFF22C55E);
static const Color down = Color(0xFFEF4444); static const Color down = Color(0xFFEF4444);
static const Color border = Color(0xFFE2E8F0); // ==================== 浅色模式色彩 ====================
static const Color divider = Color(0xFFF1F5F9); static const Color _lightBackground = Color(0xFFF3F4F6);
static const Color _lightSurface = Color(0xFFFFFFFF);
static const Color _lightCard = Color(0xFFFFFFFF);
static const Color _lightTextPrimary = Color(0xFF1F2937);
static const Color _lightTextSecondary = Color(0xFF6B7280);
static const Color _lightTextMuted = Color(0xFF9CA3AF);
static const Color _lightBorder = Color(0xFFE5E7EB);
static const Color _lightDivider = Color(0xFFF3F4F6);
// ==================== 深色模式色彩 ====================
static const Color _darkBackground = Color(0xFF111827);
static const Color _darkSurface = Color(0xFF1F2937);
static const Color _darkCard = Color(0xFF1F2937);
static const Color _darkTextPrimary = Color(0xFFE5E7EB);
static const Color _darkTextSecondary = Color(0xFF9CA3AF);
static const Color _darkTextMuted = Color(0xFF6B7280);
static const Color _darkBorder = Color(0xFF374151);
static const Color _darkDivider = Color(0xFF374151);
// ==================== 兼容旧代码的静态常量 ====================
static const Color background = _lightBackground;
static const Color surface = _lightSurface;
static const Color textPrimary = _lightTextPrimary;
static const Color textSecondary = _lightTextSecondary;
static const Color textMuted = _lightTextMuted;
static const Color border = _lightBorder;
static const Color divider = _lightDivider;
// ==================== 动态颜色获取方法 ====================
/// 判断当前是否为深色模式
static bool isDark(BuildContext context) =>
Theme.of(context).brightness == Brightness.dark;
/// 背景色（页面背景）
static Color backgroundOf(BuildContext context) =>
isDark(context) ? _darkBackground : _lightBackground;
/// 表面色（AppBar、导航栏等）
static Color surfaceOf(BuildContext context) =>
isDark(context) ? _darkSurface : _lightSurface;
/// 卡片背景色
static Color cardOf(BuildContext context) =>
isDark(context) ? _darkCard : _lightCard;
/// 主要文字颜色
static Color textPrimaryOf(BuildContext context) =>
isDark(context) ? _darkTextPrimary : _lightTextPrimary;
/// 次要文字颜色
static Color textSecondaryOf(BuildContext context) =>
isDark(context) ? _darkTextSecondary : _lightTextSecondary;
/// 弱化文字颜色
static Color textMutedOf(BuildContext context) =>
isDark(context) ? _darkTextMuted : _lightTextMuted;
/// 边框颜色
static Color borderOf(BuildContext context) =>
isDark(context) ? _darkBorder : _lightBorder;
/// 分割线颜色
static Color dividerOf(BuildContext context) =>
isDark(context) ? _darkDivider : _lightDivider;
} }

14
frontend/mining-app/lib/main.dart
View File

@ -58,34 +58,48 @@ class _MiningAppState extends ConsumerState<MiningApp> {
seedColor: AppColors.primary, seedColor: AppColors.primary,
brightness: Brightness.light, brightness: Brightness.light,
), ),
scaffoldBackgroundColor: AppColors.background,
useMaterial3: true, useMaterial3: true,
appBarTheme: const AppBarTheme( appBarTheme: const AppBarTheme(
centerTitle: true, centerTitle: true,
elevation: 0, elevation: 0,
backgroundColor: AppColors.surface,
foregroundColor: AppColors.textPrimary,
), ),
cardTheme: const CardThemeData( cardTheme: const CardThemeData(
elevation: 2, elevation: 2,
color: AppColors.surface,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(12)), borderRadius: BorderRadius.all(Radius.circular(12)),
), ),
), ),
dividerTheme: const DividerThemeData(
color: AppColors.divider,
),
), ),
darkTheme: ThemeData( darkTheme: ThemeData(
colorScheme: ColorScheme.fromSeed( colorScheme: ColorScheme.fromSeed(
seedColor: AppColors.primary, seedColor: AppColors.primary,
brightness: Brightness.dark, brightness: Brightness.dark,
), ),
scaffoldBackgroundColor: const Color(0xFF111827),
useMaterial3: true, useMaterial3: true,
appBarTheme: const AppBarTheme( appBarTheme: const AppBarTheme(
centerTitle: true, centerTitle: true,
elevation: 0, elevation: 0,
backgroundColor: Color(0xFF1F2937),
foregroundColor: Color(0xFFE5E7EB),
), ),
cardTheme: const CardThemeData( cardTheme: const CardThemeData(
elevation: 2, elevation: 2,
color: Color(0xFF1F2937),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(12)), borderRadius: BorderRadius.all(Radius.circular(12)),
), ),
), ),
dividerTheme: const DividerThemeData(
color: Color(0xFF374151),
),
), ),
routerConfig: router, routerConfig: router,
); );

12
frontend/mining-app/lib/presentation/pages/contribution/contribution_page.dart
View File

@ -12,13 +12,9 @@ import '../../widgets/shimmer_loading.dart';
class ContributionPage extends ConsumerWidget { class ContributionPage extends ConsumerWidget {
const ContributionPage({super.key}); const ContributionPage({super.key});
// 设计色彩 // 品牌色彩（不随主题变化）
static const Color _orange = Color(0xFFFF6B00); static const Color _orange = AppColors.orange;
static const Color _green = Color(0xFF22C55E); static const Color _green = AppColors.primary;
static const Color _grayText = Color(0xFF6B7280);
static const Color _darkText = Color(0xFF1F2937);
static const Color _bgGray = Color(0xFFF3F4F6);
static const Color _lightGray = Color(0xFFF9FAFB);
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
@ -41,7 +37,7 @@ class ContributionPage extends ConsumerWidget {
final sharePoolBalance = sharePoolAsync.valueOrNull; final sharePoolBalance = sharePoolAsync.valueOrNull;
return Scaffold( return Scaffold(
backgroundColor: const Color(0xFFF5F5F5), backgroundColor: AppColors.backgroundOf(context),
body: SafeArea( body: SafeArea(
bottom: false, bottom: false,
child: RefreshIndicator( child: RefreshIndicator(

235
frontend/mining-app/lib/presentation/pages/trading/trading_page.dart
View File

@ -24,15 +24,10 @@ class TradingPage extends ConsumerStatefulWidget {
} }
class _TradingPageState extends ConsumerState<TradingPage> { class _TradingPageState extends ConsumerState<TradingPage> {
// 设计色彩 // 品牌色彩（不随主题变化）
static const Color _orange = Color(0xFFFF6B00); static const Color _orange = AppColors.orange;
static const Color _green = Color(0xFF10B981); static const Color _green = AppColors.up;
static const Color _red = Color(0xFFEF4444); static const Color _red = AppColors.down;
static const Color _grayText = Color(0xFF6B7280);
static const Color _darkText = Color(0xFF1F2937);
static const Color _bgGray = Color(0xFFF3F4F6);
static const Color _lightGray = Color(0xFFF9FAFB);
static const Color _borderGray = Color(0xFFE5E7EB);
// 状态 // 状态
int _selectedTab = 1; // 0: 买入, 1: 卖出 int _selectedTab = 1; // 0: 买入, 1: 卖出
@ -76,7 +71,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
} }
return Scaffold( return Scaffold(
backgroundColor: const Color(0xFFF5F5F5), backgroundColor: AppColors.backgroundOf(context),
body: SafeArea( body: SafeArea(
bottom: false, bottom: false,
child: RefreshIndicator( child: RefreshIndicator(
@ -112,15 +107,15 @@ class _TradingPageState extends ConsumerState<TradingPage> {
Widget _buildAppBar() { Widget _buildAppBar() {
return Container( return Container(
color: _bgGray.withValues(alpha: 0.9), color: AppColors.surfaceOf(context),
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12), padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
child: const Center( child: Center(
child: Text( child: Text(
'积分股交易', '积分股交易',
style: TextStyle( style: TextStyle(
fontSize: 18, fontSize: 18,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Color(0xFF111827), color: AppColors.textPrimaryOf(context),
), ),
), ),
), ),
@ -142,18 +137,18 @@ class _TradingPageState extends ConsumerState<TradingPage> {
margin: const EdgeInsets.all(16), margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(20), padding: const EdgeInsets.all(20),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: AppColors.cardOf(context),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text( Text(
'当前积分股价格', '当前积分股价格',
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: _grayText, color: AppColors.textSecondaryOf(context),
), ),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
@ -210,7 +205,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
return Container( return Container(
margin: const EdgeInsets.symmetric(horizontal: 16), margin: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: AppColors.cardOf(context),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
), ),
child: klinesAsync.isLoading child: klinesAsync.isLoading
@ -242,11 +237,15 @@ class _TradingPageState extends ConsumerState<TradingPage> {
return _buildErrorCard('市场数据加载失败'); return _buildErrorCard('市场数据加载失败');
} }
final bgGray = AppColors.backgroundOf(context);
final darkText = AppColors.textPrimaryOf(context);
final grayText = AppColors.textSecondaryOf(context);
return Container( return Container(
margin: const EdgeInsets.all(16), margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(20), padding: const EdgeInsets.all(20),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: AppColors.cardOf(context),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
), ),
child: Column( child: Column(
@ -263,12 +262,12 @@ class _TradingPageState extends ConsumerState<TradingPage> {
), ),
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
const Text( Text(
'市场数据', '市场数据',
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: _darkText, color: darkText,
), ),
), ),
], ],
@ -282,7 +281,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
_orange, _orange,
isLoading, isLoading,
), ),
Container(width: 1, height: 24, color: _bgGray), Container(width: 1, height: 24, color: bgGray),
const SizedBox(width: 16), const SizedBox(width: 16),
_buildMarketDataItem( _buildMarketDataItem(
'流通池', '流通池',
@ -293,7 +292,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
], ],
), ),
const SizedBox(height: 24), const SizedBox(height: 24),
Container(height: 1, color: _bgGray), Container(height: 1, color: bgGray),
const SizedBox(height: 24), const SizedBox(height: 24),
Row( Row(
children: [ children: [
@ -303,7 +302,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
_orange, _orange,
isLoading, isLoading,
), ),
Container(width: 1, height: 24, color: _bgGray), Container(width: 1, height: 24, color: bgGray),
const SizedBox(width: 16), const SizedBox(width: 16),
_buildMarketDataItem( _buildMarketDataItem(
'黑洞销毁量', '黑洞销毁量',
@ -323,7 +322,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text(label, style: const TextStyle(fontSize: 12, color: _grayText)), Text(label, style: TextStyle(fontSize: 12, color: AppColors.textSecondaryOf(context))),
const SizedBox(height: 4), const SizedBox(height: 4),
DataText( DataText(
data: value, data: value,
@ -377,18 +376,21 @@ class _TradingPageState extends ConsumerState<TradingPage> {
}); });
} }
final grayText = AppColors.textSecondaryOf(context);
final bgGray = AppColors.backgroundOf(context);
return Container( return Container(
margin: const EdgeInsets.symmetric(horizontal: 16), margin: const EdgeInsets.symmetric(horizontal: 16),
padding: const EdgeInsets.all(20), padding: const EdgeInsets.all(20),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: AppColors.cardOf(context),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
), ),
child: Column( child: Column(
children: [ children: [
Container( Container(
decoration: const BoxDecoration( decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: _bgGray)), border: Border(bottom: BorderSide(color: bgGray)),
), ),
child: Row( child: Row(
children: [ children: [
@ -415,8 +417,8 @@ class _TradingPageState extends ConsumerState<TradingPage> {
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: buyEnabled color: buyEnabled
? (_selectedTab == 0 ? _orange : _grayText) ? (_selectedTab == 0 ? _orange : grayText)
: _grayText.withValues(alpha: 0.5), : grayText.withValues(alpha: 0.5),
), ),
), ),
if (!buyEnabled) ...[ if (!buyEnabled) ...[
@ -424,14 +426,14 @@ class _TradingPageState extends ConsumerState<TradingPage> {
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1), padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _grayText.withValues(alpha: 0.1), color: grayText.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4), borderRadius: BorderRadius.circular(4),
), ),
child: Text( child: Text(
'待开启', '待开启',
style: TextStyle( style: TextStyle(
fontSize: 10, fontSize: 10,
color: _grayText.withValues(alpha: 0.7), color: grayText.withValues(alpha: 0.7),
), ),
), ),
), ),
@ -460,7 +462,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: _selectedTab == 1 ? _orange : _grayText, color: _selectedTab == 1 ? _orange : grayText,
), ),
), ),
), ),
@ -479,15 +481,15 @@ class _TradingPageState extends ConsumerState<TradingPage> {
Icon( Icon(
Icons.lock_outline, Icons.lock_outline,
size: 48, size: 48,
color: _grayText.withValues(alpha: 0.5), color: grayText.withValues(alpha: 0.5),
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
const Text( Text(
'买入功能待开启', '买入功能待开启',
style: TextStyle( style: TextStyle(
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: _grayText, color: grayText,
), ),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
@ -495,7 +497,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
'买入功能暂未开放，请耐心等待', '买入功能暂未开放，请耐心等待',
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
color: _grayText.withValues(alpha: 0.7), color: grayText.withValues(alpha: 0.7),
), ),
), ),
], ],
@ -514,9 +516,9 @@ class _TradingPageState extends ConsumerState<TradingPage> {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
const Text( Text(
'可用积分值', '可用积分值',
style: TextStyle(fontSize: 12, color: _grayText), style: TextStyle(fontSize: 12, color: grayText),
), ),
Text( Text(
formatAmount(availableCash), formatAmount(availableCash),
@ -540,9 +542,9 @@ class _TradingPageState extends ConsumerState<TradingPage> {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
const Text( Text(
'可用积分股', '可用积分股',
style: TextStyle(fontSize: 12, color: _grayText), style: TextStyle(fontSize: 12, color: grayText),
), ),
Text( Text(
formatAmount(tradingShareBalance), formatAmount(tradingShareBalance),
@ -592,7 +594,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
Container( Container(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _bgGray, color: bgGray,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
), ),
child: Row( child: Row(
@ -600,7 +602,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
children: [ children: [
Text( Text(
_selectedTab == 0 ? '预计支出' : '预计获得', _selectedTab == 0 ? '预计支出' : '预计获得',
style: const TextStyle(fontSize: 12, color: _grayText), style: TextStyle(fontSize: 12, color: grayText),
), ),
Text( Text(
_calculateEstimate(), _calculateEstimate(),
@ -620,12 +622,12 @@ class _TradingPageState extends ConsumerState<TradingPage> {
padding: const EdgeInsets.symmetric(horizontal: 4), padding: const EdgeInsets.symmetric(horizontal: 4),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [ children: [
Text( Text(
'交易手续费', '交易手续费',
style: TextStyle(fontSize: 12, color: _grayText), style: TextStyle(fontSize: 12, color: grayText),
), ),
Text( const Text(
'10% 进入积分股池', '10% 进入积分股池',
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
@ -649,9 +651,9 @@ class _TradingPageState extends ConsumerState<TradingPage> {
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
), ),
), ),
child: Text( child: const Text(
_selectedTab == 0 ? '买入积分股' : '卖出积分股', '确认交易',
style: const TextStyle( style: TextStyle(
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.white, color: Colors.white,
@ -674,22 +676,25 @@ class _TradingPageState extends ConsumerState<TradingPage> {
String? availableCashForBuy, String? availableCashForBuy,
String currentPrice, String currentPrice,
) { ) {
final grayText = AppColors.textSecondaryOf(context);
final bgGray = AppColors.backgroundOf(context);
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
label, label,
style: const TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: _grayText, color: grayText,
), ),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
Container( Container(
height: 44, height: 44,
decoration: BoxDecoration( decoration: BoxDecoration(
color: _bgGray, color: bgGray,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
), ),
child: Row( child: Row(
@ -700,9 +705,9 @@ class _TradingPageState extends ConsumerState<TradingPage> {
keyboardType: const TextInputType.numberWithOptions(decimal: true), keyboardType: const TextInputType.numberWithOptions(decimal: true),
decoration: InputDecoration( decoration: InputDecoration(
hintText: hint, hintText: hint,
hintStyle: const TextStyle( hintStyle: TextStyle(
fontSize: 14, fontSize: 14,
color: Color(0xFF9CA3AF), color: grayText,
), ),
border: InputBorder.none, border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(horizontal: 16), contentPadding: const EdgeInsets.symmetric(horizontal: 16),
@ -744,7 +749,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
), ),
), ),
), ),
Text(suffix, style: const TextStyle(fontSize: 12, color: _grayText)), Text(suffix, style: TextStyle(fontSize: 12, color: grayText)),
const SizedBox(width: 12), const SizedBox(width: 12),
], ],
), ),
@ -760,22 +765,26 @@ class _TradingPageState extends ConsumerState<TradingPage> {
String suffix, { String suffix, {
bool readOnly = false, bool readOnly = false,
}) { }) {
final grayText = AppColors.textSecondaryOf(context);
final darkText = AppColors.textPrimaryOf(context);
final bgGray = AppColors.backgroundOf(context);
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
label, label,
style: const TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: _grayText, color: grayText,
), ),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
Container( Container(
height: 44, height: 44,
decoration: BoxDecoration( decoration: BoxDecoration(
color: readOnly ? _bgGray.withOpacity(0.7) : _bgGray, color: readOnly ? bgGray.withOpacity(0.7) : bgGray,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
), ),
child: Row( child: Row(
@ -788,20 +797,20 @@ class _TradingPageState extends ConsumerState<TradingPage> {
keyboardType: const TextInputType.numberWithOptions(decimal: true), keyboardType: const TextInputType.numberWithOptions(decimal: true),
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
color: readOnly ? _grayText : _darkText, color: readOnly ? grayText : darkText,
), ),
decoration: InputDecoration( decoration: InputDecoration(
hintText: hint, hintText: hint,
hintStyle: const TextStyle( hintStyle: TextStyle(
fontSize: 14, fontSize: 14,
color: Color(0xFF9CA3AF), color: grayText,
), ),
border: InputBorder.none, border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(horizontal: 16), contentPadding: const EdgeInsets.symmetric(horizontal: 16),
), ),
), ),
), ),
Text(suffix, style: const TextStyle(fontSize: 12, color: _grayText)), Text(suffix, style: TextStyle(fontSize: 12, color: grayText)),
const SizedBox(width: 12), const SizedBox(width: 12),
], ],
), ),
@ -843,12 +852,14 @@ class _TradingPageState extends ConsumerState<TradingPage> {
final isLoading = ordersAsync.isLoading; final isLoading = ordersAsync.isLoading;
final ordersPage = ordersAsync.valueOrNull; final ordersPage = ordersAsync.valueOrNull;
final orders = ordersPage?.data ?? []; final orders = ordersPage?.data ?? [];
final darkText = AppColors.textPrimaryOf(context);
final grayText = AppColors.textSecondaryOf(context);
return Container( return Container(
margin: const EdgeInsets.all(16), margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(20), padding: const EdgeInsets.all(20),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: AppColors.cardOf(context),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
), ),
child: Column( child: Column(
@ -856,12 +867,12 @@ class _TradingPageState extends ConsumerState<TradingPage> {
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
const Text( Text(
'我的挂单', '我的挂单',
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: _darkText, color: darkText,
), ),
), ),
GestureDetector( GestureDetector(
@ -886,11 +897,11 @@ class _TradingPageState extends ConsumerState<TradingPage> {
), ),
) )
else if (orders.isEmpty) else if (orders.isEmpty)
const Padding( Padding(
padding: EdgeInsets.symmetric(vertical: 20), padding: const EdgeInsets.symmetric(vertical: 20),
child: Text( child: Text(
'暂无挂单', '暂无挂单',
style: TextStyle(fontSize: 14, color: _grayText), style: TextStyle(fontSize: 14, color: grayText),
), ),
) )
else else
@ -909,6 +920,10 @@ class _TradingPageState extends ConsumerState<TradingPage> {
final isSell = order.isSell; final isSell = order.isSell;
final dateFormat = DateFormat('MM/dd HH:mm'); final dateFormat = DateFormat('MM/dd HH:mm');
final formattedDate = dateFormat.format(order.createdAt); final formattedDate = dateFormat.format(order.createdAt);
final darkText = AppColors.textPrimaryOf(context);
final grayText = AppColors.textSecondaryOf(context);
final bgGray = AppColors.backgroundOf(context);
final cardBg = AppColors.cardOf(context);
String statusText; String statusText;
switch (order.status) { switch (order.status) {
@ -929,9 +944,9 @@ class _TradingPageState extends ConsumerState<TradingPage> {
return Container( return Container(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _lightGray, color: cardBg,
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
border: Border.all(color: _bgGray), border: Border.all(color: bgGray),
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -959,10 +974,10 @@ class _TradingPageState extends ConsumerState<TradingPage> {
const SizedBox(width: 8), const SizedBox(width: 8),
Text( Text(
formatPrice(order.price), formatPrice(order.price),
style: const TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: _darkText, color: darkText,
), ),
), ),
], ],
@ -970,7 +985,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
const SizedBox(height: 4), const SizedBox(height: 4),
Text( Text(
formattedDate, formattedDate,
style: const TextStyle(fontSize: 12, color: _grayText), style: TextStyle(fontSize: 12, color: grayText),
), ),
], ],
), ),
@ -979,10 +994,10 @@ class _TradingPageState extends ConsumerState<TradingPage> {
children: [ children: [
Text( Text(
'${formatCompact(order.quantity)} 股', '${formatCompact(order.quantity)} 股',
style: const TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: _darkText, color: darkText,
), ),
), ),
const SizedBox(height: 4), const SizedBox(height: 4),
@ -1009,7 +1024,7 @@ class _TradingPageState extends ConsumerState<TradingPage> {
margin: const EdgeInsets.all(16), margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(32), padding: const EdgeInsets.all(32),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: AppColors.cardOf(context),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
), ),
child: Center( child: Center(
@ -1091,11 +1106,11 @@ class _TradingPageState extends ConsumerState<TradingPage> {
), ),
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
const Text( Text(
'注意: 卖出积分股将扣除10%进入积分股池，此操作不可撤销。', '注意: 卖出积分股将扣除10%进入积分股池，此操作不可撤销。',
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
color: _grayText, color: AppColors.textSecondaryOf(context),
), ),
), ),
], ],
@ -1212,11 +1227,8 @@ class _TransferBottomSheet extends ConsumerStatefulWidget {
} }
class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> { class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
static const Color _orange = Color(0xFFFF6B00); static const Color _orange = AppColors.orange;
static const Color _grayText = Color(0xFF6B7280); static const Color _green = AppColors.up;
static const Color _darkText = Color(0xFF1F2937);
static const Color _bgGray = Color(0xFFF3F4F6);
static const Color _green = Color(0xFF10B981);
// 0: 从挖矿划入交易, 1: 从交易划出到挖矿 // 0: 从挖矿划入交易, 1: 从交易划出到挖矿
int _direction = 0; int _direction = 0;
@ -1235,13 +1247,18 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final cardBg = AppColors.cardOf(context);
final darkText = AppColors.textPrimaryOf(context);
final grayText = AppColors.textSecondaryOf(context);
final bgGray = AppColors.backgroundOf(context);
return Container( return Container(
padding: EdgeInsets.only( padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom, bottom: MediaQuery.of(context).viewInsets.bottom,
), ),
decoration: const BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: cardBg,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)), borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
), ),
child: SafeArea( child: SafeArea(
child: Padding( child: Padding(
@ -1254,17 +1271,17 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
const Text( Text(
'积分股划转', '积分股划转',
style: TextStyle( style: TextStyle(
fontSize: 18, fontSize: 18,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: _darkText, color: darkText,
), ),
), ),
GestureDetector( GestureDetector(
onTap: () => Navigator.pop(context), onTap: () => Navigator.pop(context),
child: const Icon(Icons.close, color: _grayText), child: Icon(Icons.close, color: grayText),
), ),
], ],
), ),
@ -1274,7 +1291,7 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
Container( Container(
padding: const EdgeInsets.all(4), padding: const EdgeInsets.all(4),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _bgGray, color: bgGray,
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
child: Row( child: Row(
@ -1288,7 +1305,7 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
child: Container( child: Container(
padding: const EdgeInsets.symmetric(vertical: 10), padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _direction == 0 ? Colors.white : Colors.transparent, color: _direction == 0 ? AppColors.cardOf(context) : Colors.transparent,
borderRadius: BorderRadius.circular(6), borderRadius: BorderRadius.circular(6),
boxShadow: _direction == 0 boxShadow: _direction == 0
? [BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 4)] ? [BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 4)]
@ -1300,7 +1317,7 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
style: TextStyle( style: TextStyle(
fontSize: 13, fontSize: 13,
fontWeight: _direction == 0 ? FontWeight.bold : FontWeight.normal, fontWeight: _direction == 0 ? FontWeight.bold : FontWeight.normal,
color: _direction == 0 ? _orange : _grayText, color: _direction == 0 ? _orange : grayText,
), ),
), ),
), ),
@ -1315,7 +1332,7 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
child: Container( child: Container(
padding: const EdgeInsets.symmetric(vertical: 10), padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _direction == 1 ? Colors.white : Colors.transparent, color: _direction == 1 ? AppColors.cardOf(context) : Colors.transparent,
borderRadius: BorderRadius.circular(6), borderRadius: BorderRadius.circular(6),
boxShadow: _direction == 1 boxShadow: _direction == 1
? [BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 4)] ? [BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 4)]
@ -1327,7 +1344,7 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
style: TextStyle( style: TextStyle(
fontSize: 13, fontSize: 13,
fontWeight: _direction == 1 ? FontWeight.bold : FontWeight.normal, fontWeight: _direction == 1 ? FontWeight.bold : FontWeight.normal,
color: _direction == 1 ? _orange : _grayText, color: _direction == 1 ? _orange : grayText,
), ),
), ),
), ),
@ -1342,7 +1359,7 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
Container( Container(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _bgGray, color: bgGray,
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
child: Row( child: Row(
@ -1353,15 +1370,15 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
children: [ children: [
Text( Text(
_direction == 0 ? '挖矿账户' : '交易账户', _direction == 0 ? '挖矿账户' : '交易账户',
style: const TextStyle(fontSize: 12, color: _grayText), style: TextStyle(fontSize: 12, color: grayText),
), ),
const SizedBox(height: 4), const SizedBox(height: 4),
Text( Text(
formatAmount(_direction == 0 ? widget.miningBalance : widget.tradingBalance), formatAmount(_direction == 0 ? widget.miningBalance : widget.tradingBalance),
style: const TextStyle( style: TextStyle(
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: _darkText, color: darkText,
), ),
), ),
], ],
@ -1374,15 +1391,15 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
children: [ children: [
Text( Text(
_direction == 0 ? '交易账户' : '挖矿账户', _direction == 0 ? '交易账户' : '挖矿账户',
style: const TextStyle(fontSize: 12, color: _grayText), style: TextStyle(fontSize: 12, color: grayText),
), ),
const SizedBox(height: 4), const SizedBox(height: 4),
Text( Text(
formatAmount(_direction == 0 ? widget.tradingBalance : widget.miningBalance), formatAmount(_direction == 0 ? widget.tradingBalance : widget.miningBalance),
style: const TextStyle( style: TextStyle(
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: _darkText, color: darkText,
), ),
), ),
], ],
@ -1394,14 +1411,14 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
const SizedBox(height: 20), const SizedBox(height: 20),
// 数量输入 // 数量输入
const Text( Text(
'划转数量', '划转数量',
style: TextStyle(fontSize: 14, color: _darkText), style: TextStyle(fontSize: 14, color: darkText),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all(color: _bgGray), border: Border.all(color: bgGray),
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
child: Row( child: Row(
@ -1410,11 +1427,11 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
child: TextField( child: TextField(
controller: _amountController, controller: _amountController,
keyboardType: const TextInputType.numberWithOptions(decimal: true), keyboardType: const TextInputType.numberWithOptions(decimal: true),
decoration: const InputDecoration( decoration: InputDecoration(
hintText: '请输入划转数量', hintText: '请输入划转数量',
hintStyle: TextStyle(color: _grayText, fontSize: 14), hintStyle: TextStyle(color: grayText, fontSize: 14),
border: InputBorder.none, border: InputBorder.none,
contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 14), contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
), ),
), ),
), ),
@ -1445,15 +1462,15 @@ class _TransferBottomSheetState extends ConsumerState<_TransferBottomSheet> {
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
'可用: ${formatAmount(_availableBalance)} 积分股', '可用: ${formatAmount(_availableBalance)} 积分股',
style: const TextStyle(fontSize: 12, color: _grayText), style: TextStyle(fontSize: 12, color: grayText),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
const Text( Text(
'提示: 最低划转数量为 0.01 积分股', '提示: 最低划转数量为 0.01 积分股',
style: TextStyle(fontSize: 12, color: _grayText), style: TextStyle(fontSize: 12, color: grayText),
), ),
GestureDetector( GestureDetector(
onTap: () { onTap: () {

18
frontend/mining-app/lib/presentation/widgets/main_shell.dart
View File

@ -1,26 +1,27 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import '../../core/router/routes.dart'; import '../../core/router/routes.dart';
import '../../core/constants/app_colors.dart';
class MainShell extends StatelessWidget { class MainShell extends StatelessWidget {
final Widget child; final Widget child;
const MainShell({super.key, required this.child}); const MainShell({super.key, required this.child});
// 设计色彩
static const Color _orange = Color(0xFFFF6B00);
static const Color _grayText = Color(0xFF9CA3AF);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isDark = AppColors.isDark(context);
return Scaffold( return Scaffold(
body: child, body: child,
bottomNavigationBar: Container( bottomNavigationBar: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: AppColors.cardOf(context),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.black.withOpacity(0.05), color: isDark
? Colors.black.withOpacity(0.3)
: Colors.black.withOpacity(0.05),
blurRadius: 10, blurRadius: 10,
offset: const Offset(0, -2), offset: const Offset(0, -2),
), ),
@ -79,6 +80,7 @@ class MainShell extends StatelessWidget {
}) { }) {
final currentIndex = _calculateSelectedIndex(context); final currentIndex = _calculateSelectedIndex(context);
final isSelected = currentIndex == index; final isSelected = currentIndex == index;
final inactiveColor = AppColors.textMutedOf(context);
return GestureDetector( return GestureDetector(
onTap: () => _onItemTapped(index, context), onTap: () => _onItemTapped(index, context),
@ -91,7 +93,7 @@ class MainShell extends StatelessWidget {
Icon( Icon(
isSelected ? activeIcon : icon, isSelected ? activeIcon : icon,
size: 24, size: 24,
color: isSelected ? _orange : _grayText, color: isSelected ? AppColors.orange : inactiveColor,
), ),
const SizedBox(height: 4), const SizedBox(height: 4),
Text( Text(
@ -99,7 +101,7 @@ class MainShell extends StatelessWidget {
style: TextStyle( style: TextStyle(
fontSize: 11, fontSize: 11,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400, fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
color: isSelected ? _orange : _grayText, color: isSelected ? AppColors.orange : inactiveColor,
), ),
), ),
], ],