feat(theme): update color scheme with new Slate theme and improved surface hierarchy
Updated the app's color scheme to implement a new "Slate" theme with refined dark and light variants. Changed background colors from #0A0E14 to #0B1120 for dark mode and updated surface layer colors to follow Material Design 3 specifications. Modified text colors and outline variants for better contrast and accessibility. Updated font sizes in transaction details screen from 11px to 12px for improved readability.
This commit is contained in:
108
flutter_monisuo/lib/ui/pages/home/header_bar.dart
Normal file
108
flutter_monisuo/lib/ui/pages/home/header_bar.dart
Normal file
@@ -0,0 +1,108 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import '../../../providers/auth_provider.dart';
|
||||
|
||||
/// 首页顶栏 - Logo + 搜索/通知/头像
|
||||
class HeaderBar extends StatelessWidget {
|
||||
const HeaderBar({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
// Logo
|
||||
Text(
|
||||
'MONISUO',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 1,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
// Search button
|
||||
_IconButton(
|
||||
icon: LucideIcons.search,
|
||||
colorScheme: colorScheme,
|
||||
onTap: () {},
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
// Bell button
|
||||
_IconButton(
|
||||
icon: LucideIcons.bell,
|
||||
colorScheme: colorScheme,
|
||||
onTap: () {},
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
// Avatar
|
||||
Consumer<AuthProvider>(
|
||||
builder: (context, auth, _) {
|
||||
final username = auth.user?.username ?? '';
|
||||
final initial = username.isNotEmpty ? username[0].toUpperCase() : '?';
|
||||
return Container(
|
||||
width: 32,
|
||||
height: 32,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.primary,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
initial,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _IconButton extends StatelessWidget {
|
||||
const _IconButton({
|
||||
required this.icon,
|
||||
required this.colorScheme,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final ColorScheme colorScheme;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
width: 32,
|
||||
height: 32,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerHigh,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: Icon(
|
||||
icon,
|
||||
size: 16,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -18,6 +18,9 @@ import '../../components/glass_panel.dart';
|
||||
import '../../components/neon_glow.dart';
|
||||
import '../main/main_page.dart';
|
||||
import '../mine/welfare_center_page.dart';
|
||||
import 'header_bar.dart';
|
||||
import 'quick_actions_row.dart';
|
||||
import 'hot_coins_section.dart';
|
||||
|
||||
/// 首页
|
||||
class HomePage extends StatefulWidget {
|
||||
@@ -102,8 +105,8 @@ class _HomePageState extends State<HomePage>
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 问候
|
||||
_GreetingSection(),
|
||||
// Header
|
||||
HeaderBar(),
|
||||
SizedBox(height: AppSpacing.md),
|
||||
// 资产卡片（含总盈利 + 可折叠盈亏日历）
|
||||
_AssetCard(
|
||||
@@ -111,6 +114,15 @@ class _HomePageState extends State<HomePage>
|
||||
onDeposit: _showDeposit,
|
||||
),
|
||||
SizedBox(height: AppSpacing.md),
|
||||
// 快捷操作栏
|
||||
QuickActionsRow(
|
||||
onDeposit: _showDeposit,
|
||||
onWithdraw: () => _navigateToAssetPage(),
|
||||
onTransfer: () => _navigateToAssetPage(),
|
||||
onProfit: () {},
|
||||
onBills: () => _navigateToAssetPage(),
|
||||
),
|
||||
SizedBox(height: AppSpacing.md),
|
||||
// 福利中心入口卡片
|
||||
_WelfareCard(
|
||||
totalClaimable: _totalClaimable,
|
||||
@@ -120,6 +132,9 @@ class _HomePageState extends State<HomePage>
|
||||
),
|
||||
),
|
||||
SizedBox(height: AppSpacing.lg),
|
||||
// 热门币种
|
||||
HotCoinsSection(),
|
||||
SizedBox(height: AppSpacing.lg),
|
||||
// 持仓
|
||||
_HoldingsSection(holdings: provider.holdings),
|
||||
],
|
||||
@@ -416,40 +431,7 @@ class _HomePageState extends State<HomePage>
|
||||
}
|
||||
}
|
||||
|
||||
/// 问候区域
|
||||
class _GreetingSection extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Consumer<AuthProvider>(
|
||||
builder: (context, auth, _) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'欢迎回来，',
|
||||
style: TextStyle(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
SizedBox(height: AppSpacing.xs),
|
||||
Text(
|
||||
auth.user?.username ?? '用户',
|
||||
style: TextStyle(
|
||||
color: colorScheme.onSurface,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Header 栏：品牌名 + 搜索/通知/头像
|
||||
/// 资产卡片（含总盈利 + 可折叠盈亏日历）
|
||||
class _AssetCard extends StatefulWidget {
|
||||
final AssetOverview? overview;
|
||||
|
||||
199
flutter_monisuo/lib/ui/pages/home/hot_coins_section.dart
Normal file
199
flutter_monisuo/lib/ui/pages/home/hot_coins_section.dart
Normal file
@@ -0,0 +1,199 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import '../../../core/theme/app_color_scheme.dart';
|
||||
import '../../../core/theme/app_spacing.dart';
|
||||
|
||||
/// 首页热门币种区块
|
||||
class HotCoinsSection extends StatelessWidget {
|
||||
const HotCoinsSection({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
// Title row
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'热门币种',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'更多',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
// Card
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainer,
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant,
|
||||
width: 1,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(AppRadius.xl),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_CoinRow(
|
||||
symbol: 'BTC',
|
||||
pair: 'BTC/USDT',
|
||||
fullName: 'Bitcoin',
|
||||
price: '68,432.50',
|
||||
change: '+2.35%',
|
||||
isUp: true,
|
||||
colorScheme: colorScheme,
|
||||
isDark: isDark,
|
||||
),
|
||||
Divider(
|
||||
height: 1,
|
||||
thickness: 1,
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.15),
|
||||
),
|
||||
_CoinRow(
|
||||
symbol: 'ETH',
|
||||
pair: 'ETH/USDT',
|
||||
fullName: 'Ethereum',
|
||||
price: '3,856.20',
|
||||
change: '+1.82%',
|
||||
isUp: true,
|
||||
colorScheme: colorScheme,
|
||||
isDark: isDark,
|
||||
),
|
||||
Divider(
|
||||
height: 1,
|
||||
thickness: 1,
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.15),
|
||||
),
|
||||
_CoinRow(
|
||||
symbol: 'SOL',
|
||||
pair: 'SOL/USDT',
|
||||
fullName: 'Solana',
|
||||
price: '178.65',
|
||||
change: '-0.94%',
|
||||
isUp: false,
|
||||
colorScheme: colorScheme,
|
||||
isDark: isDark,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CoinRow extends StatelessWidget {
|
||||
const _CoinRow({
|
||||
required this.symbol,
|
||||
required this.pair,
|
||||
required this.fullName,
|
||||
required this.price,
|
||||
required this.change,
|
||||
required this.isUp,
|
||||
required this.colorScheme,
|
||||
required this.isDark,
|
||||
});
|
||||
|
||||
final String symbol;
|
||||
final String pair;
|
||||
final String fullName;
|
||||
final String price;
|
||||
final String change;
|
||||
final bool isUp;
|
||||
final ColorScheme colorScheme;
|
||||
final bool isDark;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final changeColor = isUp
|
||||
? AppColorScheme.getUpColor(isDark)
|
||||
: AppColorScheme.down;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// Left: avatar + name
|
||||
Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 18,
|
||||
backgroundColor: colorScheme.primary.withValues(alpha: 0.1),
|
||||
child: Text(
|
||||
symbol,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
pair,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
fullName,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
// Right: price + change
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
price,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
change,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: changeColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
124
flutter_monisuo/lib/ui/pages/home/quick_actions_row.dart
Normal file
124
flutter_monisuo/lib/ui/pages/home/quick_actions_row.dart
Normal file
@@ -0,0 +1,124 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import '../../../core/theme/app_spacing.dart';
|
||||
|
||||
/// 首页快捷操作栏 - 充值/提现/划转/盈亏/账单
|
||||
class QuickActionsRow extends StatelessWidget {
|
||||
const QuickActionsRow({
|
||||
super.key,
|
||||
this.onDeposit,
|
||||
this.onWithdraw,
|
||||
this.onTransfer,
|
||||
this.onProfit,
|
||||
this.onBills,
|
||||
});
|
||||
|
||||
final VoidCallback? onDeposit;
|
||||
final VoidCallback? onWithdraw;
|
||||
final VoidCallback? onTransfer;
|
||||
final VoidCallback? onProfit;
|
||||
final VoidCallback? onBills;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainer,
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant,
|
||||
width: 1,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(AppRadius.xl),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
_ActionItem(
|
||||
icon: LucideIcons.arrowUpRight,
|
||||
label: '充值',
|
||||
colorScheme: colorScheme,
|
||||
onTap: onDeposit,
|
||||
),
|
||||
_ActionItem(
|
||||
icon: LucideIcons.arrowDownLeft,
|
||||
label: '提现',
|
||||
colorScheme: colorScheme,
|
||||
onTap: onWithdraw,
|
||||
),
|
||||
_ActionItem(
|
||||
icon: LucideIcons.repeat,
|
||||
label: '划转',
|
||||
colorScheme: colorScheme,
|
||||
onTap: onTransfer,
|
||||
),
|
||||
_ActionItem(
|
||||
icon: LucideIcons.chartPie,
|
||||
label: '盈亏',
|
||||
colorScheme: colorScheme,
|
||||
onTap: onProfit,
|
||||
),
|
||||
_ActionItem(
|
||||
icon: LucideIcons.fileText,
|
||||
label: '账单',
|
||||
colorScheme: colorScheme,
|
||||
onTap: onBills,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ActionItem extends StatelessWidget {
|
||||
const _ActionItem({
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.colorScheme,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final ColorScheme colorScheme;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerHigh,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: Icon(
|
||||
icon,
|
||||
size: 18,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
label,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user