615 lines
17 KiB
Dart
615 lines
17 KiB
Dart
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 'kyc_page.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,
|
|
});
|
|
}
|
|
|
|
/// 我的页面 - Material Design 3 风格
|
|
class MinePage extends StatefulWidget {
|
|
const MinePage({super.key});
|
|
|
|
@override
|
|
State<MinePage> createState() => _MinePageState();
|
|
}
|
|
|
|
class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin {
|
|
@override
|
|
bool get wantKeepAlive => true;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
super.build(context);
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
|
|
return Scaffold(
|
|
backgroundColor: colorScheme.background,
|
|
body: Consumer<AuthProvider>(
|
|
builder: (context, auth, _) {
|
|
return SingleChildScrollView(
|
|
padding: AppSpacing.pagePadding,
|
|
child: Column(
|
|
children: [
|
|
_UserCard(user: auth.user),
|
|
SizedBox(height: AppSpacing.md),
|
|
_MenuList(
|
|
onShowComingSoon: _showComingSoon,
|
|
onShowAbout: _showAboutDialog,
|
|
kycStatus: auth.user?.kycStatus ?? 0,
|
|
),
|
|
SizedBox(height: AppSpacing.xl),
|
|
_LogoutButton(onLogout: () => _handleLogout(auth)),
|
|
SizedBox(height: AppSpacing.lg),
|
|
// 版本信息
|
|
Text(
|
|
'System Build v1.0.0-Neo',
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
color: colorScheme.onSurfaceVariant.withOpacity(0.4),
|
|
letterSpacing: 0.3,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
void _showComingSoon(String feature) {
|
|
showShadDialog(
|
|
context: context,
|
|
builder: (context) => ShadDialog.alert(
|
|
title: Row(
|
|
children: [
|
|
Icon(Icons.construction, color: AppColorScheme.warning, size: 20),
|
|
SizedBox(width: AppSpacing.sm),
|
|
const Text('功能开发中'),
|
|
],
|
|
),
|
|
description: Text('$feature功能正在开发中，敬请期待~'),
|
|
actions: [
|
|
ShadButton(
|
|
child: const Text('知道了'),
|
|
onPressed: () => Navigator.of(context).pop(),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
void _showAboutDialog() {
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
showShadDialog(
|
|
context: context,
|
|
builder: (context) => ShadDialog(
|
|
title: Row(
|
|
children: [
|
|
_AppLogo(radius: 20, fontSize: 20),
|
|
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
|
|
const Text('模拟所'),
|
|
],
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'虚拟货币模拟交易平台',
|
|
style: TextStyle(color: colorScheme.onSurfaceVariant),
|
|
),
|
|
SizedBox(height: AppSpacing.md),
|
|
_InfoRow(icon: Icons.code, text: '版本: 1.0.0'),
|
|
SizedBox(height: AppSpacing.sm),
|
|
_InfoRow(icon: Icons.favorite, text: 'Built with Flutter & Material Design 3'),
|
|
],
|
|
),
|
|
actions: [
|
|
ShadButton(
|
|
child: const Text('确定'),
|
|
onPressed: () => Navigator.of(context).pop(),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
void _handleLogout(AuthProvider auth) {
|
|
showShadDialog(
|
|
context: context,
|
|
builder: (ctx) => ShadDialog.alert(
|
|
title: const Text('确认退出'),
|
|
description: const Text('确定要退出登录吗？'),
|
|
actions: [
|
|
ShadButton.outline(
|
|
child: const Text('取消'),
|
|
onPressed: () => Navigator.of(ctx).pop(),
|
|
),
|
|
ShadButton.destructive(
|
|
child: const Text('退出'),
|
|
onPressed: () async {
|
|
Navigator.of(ctx).pop();
|
|
await auth.logout();
|
|
if (ctx.mounted) {
|
|
Navigator.of(ctx).pushAndRemoveUntil(
|
|
MaterialPageRoute(builder: (_) => const LoginPage()),
|
|
(route) => false,
|
|
);
|
|
}
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 用户卡片组件 - Material Design 3 风格
|
|
class _UserCard extends StatelessWidget {
|
|
final dynamic user;
|
|
|
|
const _UserCard({required this.user});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
|
|
return GlassPanel(
|
|
padding: EdgeInsets.all(AppSpacing.lg + AppSpacing.sm),
|
|
child: Row(
|
|
children: [
|
|
// 头像 - 带霓虹边框
|
|
Stack(
|
|
children: [
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: colorScheme.primary.withOpacity(isDark ? 0.15 : 0.08),
|
|
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.up,
|
|
shape: BoxShape.circle,
|
|
border: Border.all(
|
|
color: colorScheme.background,
|
|
width: 2,
|
|
),
|
|
),
|
|
child: Icon(
|
|
Icons.verified,
|
|
size: 14,
|
|
color: colorScheme.onTertiary,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(width: AppSpacing.md + AppSpacing.xs),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
user?.username ?? '未登录',
|
|
style: GoogleFonts.spaceGrotesk(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
),
|
|
SizedBox(height: AppSpacing.sm),
|
|
// 用户等级标签
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.md,
|
|
vertical: AppSpacing.xs,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: colorScheme.primary.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(AppRadius.full),
|
|
border: Border.all(
|
|
color: colorScheme.primary.withOpacity(0.2),
|
|
),
|
|
),
|
|
child: Text(
|
|
'普通用户',
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.w700,
|
|
letterSpacing: 0.2,
|
|
color: colorScheme.primary,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Icon(
|
|
LucideIcons.chevronRight,
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 应用 Logo 组件
|
|
class _AppLogo extends StatelessWidget {
|
|
final double radius;
|
|
final double fontSize;
|
|
final String? text;
|
|
|
|
const _AppLogo({required this.radius, required this.fontSize, this.text});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
|
|
return CircleAvatar(
|
|
radius: radius,
|
|
backgroundColor: colorScheme.primary.withOpacity(0.2),
|
|
child: Text(
|
|
text ?? '₿',
|
|
style: TextStyle(
|
|
fontSize: fontSize,
|
|
color: colorScheme.primary,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 信息行组件
|
|
class _InfoRow extends StatelessWidget {
|
|
final IconData icon;
|
|
final String text;
|
|
|
|
const _InfoRow({required this.icon, required this.text});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
|
|
return Row(
|
|
children: [
|
|
Icon(icon, size: 14, color: colorScheme.onSurfaceVariant),
|
|
SizedBox(width: AppSpacing.sm),
|
|
Text(
|
|
text,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 菜单列表组件 - Glass Panel 风格
|
|
class _MenuList extends StatelessWidget {
|
|
final void Function(String) onShowComingSoon;
|
|
final VoidCallback onShowAbout;
|
|
final int kycStatus;
|
|
|
|
const _MenuList({
|
|
required this.onShowComingSoon,
|
|
required this.onShowAbout,
|
|
required this.kycStatus,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final themeProvider = context.watch<ThemeProvider>();
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
|
|
return GlassPanel(
|
|
padding: EdgeInsets.zero,
|
|
borderRadius: BorderRadius.circular(AppRadius.xxl),
|
|
child: Column(
|
|
children: [
|
|
// 主题切换开关
|
|
_ThemeToggleTile(isDarkMode: themeProvider.isDarkMode),
|
|
_buildDivider(),
|
|
// 菜单项
|
|
..._buildMenuItems(context, colorScheme),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildDivider() {
|
|
return Container(
|
|
margin: EdgeInsets.only(left: 56),
|
|
height: 1,
|
|
color: AppColorScheme.glassPanelBorder,
|
|
);
|
|
}
|
|
|
|
List<Widget> _buildMenuItems(BuildContext context, ColorScheme colorScheme) {
|
|
final items = [
|
|
_MenuItem(
|
|
icon: LucideIcons.userCheck,
|
|
title: '实名认证',
|
|
subtitle: kycStatus == 2
|
|
? '已认证'
|
|
: kycStatus == 1
|
|
? '审核中'
|
|
: '完成实名认证，解锁更多功能',
|
|
iconColor: kycStatus == 2 ? AppColorScheme.up : colorScheme.primary,
|
|
onTap: () {
|
|
if (kycStatus == 2) {
|
|
_showKycStatusDialog(context);
|
|
} else {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(builder: (_) => const KycPage()),
|
|
);
|
|
}
|
|
},
|
|
),
|
|
_MenuItem(
|
|
icon: LucideIcons.shield,
|
|
title: '安全设置',
|
|
subtitle: '密码、二次验证等安全设置',
|
|
iconColor: colorScheme.secondary,
|
|
onTap: () => onShowComingSoon('安全设置'),
|
|
),
|
|
_MenuItem(
|
|
icon: LucideIcons.bell,
|
|
title: '消息通知',
|
|
subtitle: '管理消息推送设置',
|
|
iconColor: AppColorScheme.up,
|
|
onTap: () => onShowComingSoon('消息通知'),
|
|
),
|
|
_MenuItem(
|
|
icon: LucideIcons.settings,
|
|
title: '系统设置',
|
|
subtitle: '主题、语言等偏好设置',
|
|
iconColor: colorScheme.primary,
|
|
onTap: () => onShowComingSoon('系统设置'),
|
|
),
|
|
_MenuItem(
|
|
icon: LucideIcons.info,
|
|
title: '关于我们',
|
|
subtitle: '版本信息与用户协议',
|
|
iconColor: colorScheme.onSurfaceVariant,
|
|
onTap: onShowAbout,
|
|
),
|
|
];
|
|
|
|
return [
|
|
for (var i = 0; i < items.length; i++) ...[
|
|
_MenuItemTile(item: items[i]),
|
|
if (i < items.length - 1) _buildDivider(),
|
|
],
|
|
];
|
|
}
|
|
}
|
|
|
|
void _showKycStatusDialog(BuildContext context) {
|
|
showShadDialog(
|
|
context: context,
|
|
builder: (ctx) => ShadDialog.alert(
|
|
title: Row(
|
|
children: [
|
|
Icon(Icons.check_circle, color: AppColorScheme.up, size: 20),
|
|
SizedBox(width: AppSpacing.sm),
|
|
const Text('实名认证'),
|
|
],
|
|
),
|
|
description: const Text('您的实名认证已通过'),
|
|
actions: [
|
|
ShadButton(
|
|
child: const Text('确定'),
|
|
onPressed: () => Navigator.of(ctx).pop(),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 主题切换组件
|
|
class _ThemeToggleTile extends StatelessWidget {
|
|
final bool isDarkMode;
|
|
|
|
const _ThemeToggleTile({required this.isDarkMode});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
final themeProvider = context.read<ThemeProvider>();
|
|
|
|
return InkWell(
|
|
onTap: () => themeProvider.toggleTheme(),
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.md,
|
|
vertical: AppSpacing.sm + AppSpacing.xs,
|
|
),
|
|
child: Row(
|
|
children: [
|
|
_MenuIcon(
|
|
icon: isDarkMode ? LucideIcons.moon : LucideIcons.sun,
|
|
color: colorScheme.primary,
|
|
),
|
|
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'深色模式',
|
|
style: GoogleFonts.spaceGrotesk(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
),
|
|
SizedBox(height: AppSpacing.xs / 2),
|
|
Text(
|
|
isDarkMode ? '当前：深色主题' : '当前：浅色主题',
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Switch(
|
|
value: isDarkMode,
|
|
onChanged: (_) => themeProvider.toggleTheme(),
|
|
activeTrackColor: colorScheme.primary.withOpacity(0.5),
|
|
activeColor: colorScheme.primary,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 菜单项组件
|
|
class _MenuItemTile extends StatelessWidget {
|
|
final _MenuItem item;
|
|
|
|
const _MenuItemTile({required this.item});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
|
|
return InkWell(
|
|
onTap: item.onTap,
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.md,
|
|
vertical: AppSpacing.sm + AppSpacing.xs,
|
|
),
|
|
child: Row(
|
|
children: [
|
|
_MenuIcon(icon: item.icon, color: item.iconColor),
|
|
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
item.title,
|
|
style: GoogleFonts.spaceGrotesk(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
),
|
|
if (item.subtitle != null) ...[
|
|
SizedBox(height: AppSpacing.xs / 2),
|
|
Text(
|
|
item.subtitle!,
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
Icon(
|
|
LucideIcons.chevronRight,
|
|
size: 18,
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 菜单图标组件 - Material Design 3 风格
|
|
class _MenuIcon extends StatelessWidget {
|
|
final IconData icon;
|
|
final Color? color;
|
|
|
|
const _MenuIcon({required this.icon, this.color});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
final iconColor = color ?? colorScheme.primary;
|
|
|
|
return Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: iconColor.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(AppRadius.md + AppSpacing.xs),
|
|
border: Border.all(
|
|
color: iconColor.withOpacity(0.2),
|
|
),
|
|
),
|
|
child: Icon(icon, size: 20, color: iconColor),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 退出登录按钮 - 带霓虹光效
|
|
class _LogoutButton extends StatelessWidget {
|
|
final VoidCallback onLogout;
|
|
|
|
const _LogoutButton({required this.onLogout});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return NeonButton(
|
|
text: 'Logout Terminal',
|
|
type: NeonButtonType.error,
|
|
icon: Icons.logout,
|
|
onPressed: onLogout,
|
|
width: double.infinity,
|
|
showGlow: true,
|
|
);
|
|
}
|
|
}
|