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

308
flutter_monisuo/lib/ui/pages/mine/mine_page.dart
View File

@@ -1,28 +1,33 @@
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 '../../../providers/auth_provider.dart';
import '../../../providers/theme_provider.dart';
import '../auth/login_page.dart';
import '../../components/glass_panel.dart';
import '../../components/neon_glow.dart';
/// 菜单项数据模型
class _MenuItem {
final IconData icon;
final String title;
final String? subtitle;
final Color? iconColor;
final VoidCallback onTap;
const _MenuItem({
required this.icon,
required this.title,
this.subtitle,
this.iconColor,
required this.onTap,
});
}
/// 我的页面 - 使用 shadcn_ui 现代化设计
/// 我的页面 - Material Design 3 风格
class MinePage extends StatefulWidget {
const MinePage({super.key});
@@ -39,6 +44,7 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
super.build(context);
return Scaffold(
backgroundColor: AppColorScheme.darkBackground,
body: Consumer<AuthProvider>(
builder: (context, auth, _) {
return SingleChildScrollView(
@@ -48,8 +54,18 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
_UserCard(user: auth.user),
SizedBox(height: AppSpacing.md),
_MenuList(onShowComingSoon: _showComingSoon, onShowAbout: _showAboutDialog),
SizedBox(height: AppSpacing.lg),
SizedBox(height: AppSpacing.xl),
_LogoutButton(onLogout: () => _handleLogout(auth)),
SizedBox(height: AppSpacing.lg),
// 版本信息
Text(
'System Build v1.0.0-Neo',
style: TextStyle(
fontSize: 10,
color: AppColorScheme.darkOnSurfaceVariant.withValues(alpha: 0.4),
letterSpacing: 0.3,
),
),
],
),
);
@@ -64,7 +80,7 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
builder: (context) => ShadDialog.alert(
title: Row(
children: [
const Icon(LucideIcons.construction, color: Color(0xFFFF9800), size: 20),
Icon(Icons.construction, color: AppColorScheme.warning, size: 20),
SizedBox(width: AppSpacing.sm),
const Text('功能开发中'),
],
@@ -81,8 +97,6 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
}
void _showAboutDialog() {
final theme = ShadTheme.of(context);
showShadDialog(
context: context,
builder: (context) => ShadDialog(
@@ -97,11 +111,14 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('虚拟货币模拟交易平台', style: theme.textTheme.muted),
Text(
'虚拟货币模拟交易平台',
style: TextStyle(color: AppColorScheme.darkOnSurfaceVariant),
),
SizedBox(height: AppSpacing.md),
_InfoRow(icon: LucideIcons.code, text: '版本: 1.0.0'),
_InfoRow(icon: Icons.code, text: '版本: 1.0.0'),
SizedBox(height: AppSpacing.sm),
const _InfoRow(icon: LucideIcons.heart, text: 'Built with Flutter & shadcn_ui'),
_InfoRow(icon: Icons.favorite, text: 'Built with Flutter & Material Design 3'),
],
),
actions: [
@@ -144,7 +161,7 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
}
}
/// 用户卡片组件
/// 用户卡片组件 - Material Design 3 风格
class _UserCard extends StatelessWidget {
final dynamic user;
@@ -152,34 +169,92 @@ class _UserCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return ShadCard(
return GlassPanel(
padding: EdgeInsets.all(AppSpacing.lg + AppSpacing.sm),
child: Row(
children: [
_AppLogo(radius: 32, fontSize: 24, text: user?.avatarText),
SizedBox(width: AppSpacing.md),
// 头像 - 带霓虹边框
Stack(
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: AppColorScheme.neonGlowPrimary,
blurRadius: 20,
),
],
),
child: _AppLogo(radius: 36, fontSize: 28, text: user?.avatarText),
),
// 验证徽章
Positioned(
bottom: 0,
right: 0,
child: Container(
padding: EdgeInsets.all(4),
decoration: BoxDecoration(
color: AppColorScheme.darkTertiary,
shape: BoxShape.circle,
border: Border.all(
color: AppColorScheme.darkBackground,
width: 2,
),
),
child: Icon(
Icons.verified,
size: 14,
color: AppColorScheme.darkOnTertiary,
),
),
),
],
),
SizedBox(width: AppSpacing.md + AppSpacing.xs),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
user?.username ?? '未登录',
style: theme.textTheme.h3.copyWith(fontWeight: FontWeight.bold),
style: GoogleFonts.spaceGrotesk(
fontSize: 24,
fontWeight: FontWeight.bold,
color: AppColorScheme.darkOnSurface,
),
),
SizedBox(height: AppSpacing.sm - AppSpacing.xs),
ShadBadge(
backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.2),
SizedBox(height: AppSpacing.sm),
// 用户等级标签
Container(
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.xs,
),
decoration: BoxDecoration(
color: AppColorScheme.darkPrimary.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(AppRadius.full),
border: Border.all(
color: AppColorScheme.darkPrimary.withValues(alpha: 0.2),
),
),
child: Text(
'普通用户',
style: TextStyle(fontSize: 12, color: theme.colorScheme.primary),
'NORMAL USER',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
letterSpacing: 0.2,
color: AppColorScheme.darkPrimary,
),
),
),
],
),
),
Icon(LucideIcons.chevronRight, color: theme.colorScheme.mutedForeground),
Icon(
LucideIcons.chevronRight,
color: AppColorScheme.darkOnSurfaceVariant,
),
],
),
);
@@ -196,16 +271,14 @@ class _AppLogo extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return CircleAvatar(
radius: radius,
backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.2),
backgroundColor: AppColorScheme.darkPrimary.withValues(alpha: 0.2),
child: Text(
text ?? '₿',
style: TextStyle(
fontSize: fontSize,
color: theme.colorScheme.primary,
color: AppColorScheme.darkPrimary,
fontWeight: FontWeight.bold,
),
),
@@ -222,19 +295,23 @@ class _InfoRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Row(
children: [
Icon(icon, size: 14, color: theme.colorScheme.mutedForeground),
SizedBox(width: AppSpacing.sm - AppSpacing.xs),
Text(text, style: theme.textTheme.muted.copyWith(fontSize: 12)),
Icon(icon, size: 14, color: AppColorScheme.darkOnSurfaceVariant),
SizedBox(width: AppSpacing.sm),
Text(
text,
style: TextStyle(
fontSize: 12,
color: AppColorScheme.darkOnSurfaceVariant,
),
),
],
);
}
}
/// 菜单列表组件
/// 菜单列表组件 - Glass Panel 风格
class _MenuList extends StatelessWidget {
final void Function(String) onShowComingSoon;
final VoidCallback onShowAbout;
@@ -243,34 +320,75 @@ class _MenuList extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final themeProvider = context.watch<ThemeProvider>();
return ShadCard(
return GlassPanel(
padding: EdgeInsets.zero,
borderRadius: BorderRadius.circular(AppRadius.xxl),
child: Column(
children: [
// 主题切换开关（特殊处理）
// 主题切换开关
_ThemeToggleTile(isDarkMode: themeProvider.isDarkMode),
Divider(color: theme.colorScheme.border, height: 1, indent: 56),
// 普通菜单项
for (var i = 0; i < _buildMenuItems().length; i++) ...[
_MenuItemTile(item: _buildMenuItems()[i]),
if (i < _buildMenuItems().length - 1)
Divider(color: theme.colorScheme.border, height: 1, indent: 56),
],
_buildDivider(),
// 菜单项
..._buildMenuItems(),
],
),
);
}
List<_MenuItem> _buildMenuItems() {
Widget _buildDivider() {
return Container(
margin: EdgeInsets.only(left: 56),
height: 1,
color: AppColorScheme.glassPanelBorder,
);
}
List<Widget> _buildMenuItems() {
final items = [
_MenuItem(
icon: LucideIcons.userCheck,
title: '实名认证',
subtitle: '完成实名认证，解锁更多功能',
iconColor: AppColorScheme.darkPrimary,
onTap: () => onShowComingSoon('实名认证'),
),
_MenuItem(
icon: LucideIcons.shield,
title: '安全设置',
subtitle: '密码、二次验证等安全设置',
iconColor: AppColorScheme.darkSecondary,
onTap: () => onShowComingSoon('安全设置'),
),
_MenuItem(
icon: LucideIcons.bell,
title: '消息通知',
subtitle: '管理消息推送设置',
iconColor: AppColorScheme.darkTertiary,
onTap: () => onShowComingSoon('消息通知'),
),
_MenuItem(
icon: LucideIcons.settings,
title: '系统设置',
subtitle: '主题、语言等偏好设置',
iconColor: AppColorScheme.darkPrimary,
onTap: () => onShowComingSoon('系统设置'),
),
_MenuItem(
icon: LucideIcons.info,
title: '关于我们',
subtitle: '版本信息与用户协议',
iconColor: AppColorScheme.darkOnSurfaceVariant,
onTap: onShowAbout,
),
];
return [
_MenuItem(icon: LucideIcons.userCheck, title: '实名认证', subtitle: '完成实名认证，解锁更多功能', onTap: () => onShowComingSoon('实名认证')),
_MenuItem(icon: LucideIcons.shield, title: '安全设置', subtitle: '密码、二次验证等安全设置', onTap: () => onShowComingSoon('安全设置')),
_MenuItem(icon: LucideIcons.bell, title: '消息通知', subtitle: '管理消息推送设置', onTap: () => onShowComingSoon('消息通知')),
_MenuItem(icon: LucideIcons.settings, title: '系统设置', subtitle: '主题、语言等偏好设置', onTap: () => onShowComingSoon('系统设置')),
_MenuItem(icon: LucideIcons.info, title: '关于我们', subtitle: '版本信息与用户协议', onTap: onShowAbout),
for (var i = 0; i < items.length; i++) ...[
_MenuItemTile(item: items[i]),
if (i < items.length - 1) _buildDivider(),
],
];
}
}
@@ -283,26 +401,41 @@ class _ThemeToggleTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final themeProvider = context.read<ThemeProvider>();
return InkWell(
onTap: () => themeProvider.toggleTheme(),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: AppSpacing.md, vertical: AppSpacing.sm + AppSpacing.xs),
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.sm + AppSpacing.xs,
),
child: Row(
children: [
_MenuIcon(icon: isDarkMode ? LucideIcons.moon : LucideIcons.sun),
_MenuIcon(
icon: isDarkMode ? LucideIcons.moon : LucideIcons.sun,
color: AppColorScheme.darkPrimary,
),
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('深色模式', style: theme.textTheme.small.copyWith(fontWeight: FontWeight.w500)),
Text(
'深色模式',
style: GoogleFonts.spaceGrotesk(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppColorScheme.darkOnSurface,
),
),
SizedBox(height: AppSpacing.xs / 2),
Text(
isDarkMode ? '当前：深色主题' : '当前：浅色主题',
style: theme.textTheme.muted.copyWith(fontSize: 11),
style: TextStyle(
fontSize: 11,
color: AppColorScheme.darkOnSurfaceVariant,
),
),
],
),
@@ -310,8 +443,8 @@ class _ThemeToggleTile extends StatelessWidget {
Switch(
value: isDarkMode,
onChanged: (_) => themeProvider.toggleTheme(),
activeTrackColor: theme.colorScheme.primary.withValues(alpha: 0.5),
activeColor: theme.colorScheme.primary,
activeTrackColor: AppColorScheme.darkPrimary.withValues(alpha: 0.5),
activeColor: AppColorScheme.darkPrimary,
),
],
),
@@ -328,29 +461,47 @@ class _MenuItemTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return InkWell(
onTap: item.onTap,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: AppSpacing.md, vertical: AppSpacing.sm + AppSpacing.xs),
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.sm + AppSpacing.xs,
),
child: Row(
children: [
_MenuIcon(icon: item.icon),
_MenuIcon(icon: item.icon, color: item.iconColor),
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(item.title, style: theme.textTheme.small.copyWith(fontWeight: FontWeight.w500)),
Text(
item.title,
style: GoogleFonts.spaceGrotesk(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppColorScheme.darkOnSurface,
),
),
if (item.subtitle != null) ...[
SizedBox(height: AppSpacing.xs / 2),
Text(item.subtitle!, style: theme.textTheme.muted.copyWith(fontSize: 11)),
Text(
item.subtitle!,
style: TextStyle(
fontSize: 11,
color: AppColorScheme.darkOnSurfaceVariant,
),
),
],
],
),
),
Icon(LucideIcons.chevronRight, size: 18, color: theme.colorScheme.mutedForeground),
Icon(
LucideIcons.chevronRight,
size: 18,
color: AppColorScheme.darkOnSurfaceVariant,
),
],
),
),
@@ -358,29 +509,33 @@ class _MenuItemTile extends StatelessWidget {
}
}
/// 菜单图标组件
/// 菜单图标组件 - Material Design 3 风格
class _MenuIcon extends StatelessWidget {
final IconData icon;
final Color? color;
const _MenuIcon({required this.icon});
const _MenuIcon({required this.icon, this.color});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final iconColor = color ?? AppColorScheme.darkPrimary;
return Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: theme.colorScheme.primary.withValues(alpha: 0.1),
color: iconColor.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(AppRadius.md + AppSpacing.xs),
border: Border.all(
color: iconColor.withValues(alpha: 0.2),
),
),
child: Icon(icon, size: 20, color: theme.colorScheme.primary),
child: Icon(icon, size: 20, color: iconColor),
);
}
}
/// 退出登录按钮
/// 退出登录按钮 - 带霓虹光效
class _LogoutButton extends StatelessWidget {
final VoidCallback onLogout;
@@ -388,20 +543,13 @@ class _LogoutButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
return NeonButton(
text: 'Logout Terminal',
type: NeonButtonType.error,
icon: Icons.logout,
onPressed: onLogout,
width: double.infinity,
height: 48,
child: ShadButton.destructive(
onPressed: onLogout,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(LucideIcons.logOut, size: 18),
SizedBox(width: AppSpacing.sm),
const Text('退出登录', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600)),
],
),
),
showGlow: true,
);
}
}