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

youhua

Browse Source
This commit is contained in:
sion
2026-03-23 00:08:19 +08:00
parent ca33e0d3c5
commit 2fdd842b89
11 changed files with 1196 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
flutter_monisuo/lib/ui/pages/auth/login_page.dart
View File

@@ -3,6 +3,7 @@ import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:provider/provider.dart';
import '../../../providers/auth_provider.dart';
import '../main/main_page.dart';
import 'register_page.dart';
class LoginPage extends StatefulWidget {
@@ -15,6 +16,10 @@ class LoginPage extends StatefulWidget {
class _LoginPageState extends State<LoginPage> {
final formKey = GlobalKey<ShadFormState>();
static const _maxFormWidth = 400.0;
static const _logoSize = 64.0;
static const _loadingIndicatorSize = 16.0;
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
@@ -22,7 +27,7 @@ class _LoginPageState extends State<LoginPage> {
return Scaffold(
body: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 400),
constraints: const BoxConstraints(maxWidth: _maxFormWidth),
child: Padding(
padding: const EdgeInsets.all(24),
child: ShadForm(
@@ -31,135 +36,15 @@ class _LoginPageState extends State<LoginPage> {
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Logo 和标题
Icon(
LucideIcons.trendingUp,
size: 64,
color: theme.colorScheme.primary,
),
const SizedBox(height: 24),
Text(
'模拟所',
style: theme.textTheme.h1,
textAlign: TextAlign.center,
),
const SizedBox(height: 8),
Text(
'虚拟货币模拟交易平台',
style: theme.textTheme.muted,
textAlign: TextAlign.center,
),
_buildHeader(theme),
const SizedBox(height: 48),
// 用户名输入
ShadInputFormField(
id: 'username',
label: const Text('用户名'),
placeholder: const Text('请输入用户名'),
leading: const Icon(LucideIcons.user),
validator: (value) {
if (value == null || value.isEmpty) {
return '请输入用户名';
}
if (value.length < 3) {
return '用户名至少 3 个字符';
}
return null;
},
),
_buildUsernameField(),
const SizedBox(height: 16),
// 密码输入
ShadInputFormField(
id: 'password',
label: const Text('密码'),
placeholder: const Text('请输入密码'),
obscureText: true,
leading: const Icon(LucideIcons.lock),
validator: (value) {
if (value == null || value.isEmpty) {
return '请输入密码';
}
if (value.length < 6) {
return '密码至少 6 个字符';
}
return null;
},
),
_buildPasswordField(),
const SizedBox(height: 24),
// 登录按钮
Consumer<AuthProvider>(
builder: (context, auth, _) {
return ShadButton(
onPressed: auth.isLoading
? null
: () async {
if (formKey.currentState!.saveAndValidate()) {
final values = formKey.currentState!.value;
final response = await auth.login(
values['username'],
values['password'],
);
// 登录成功后，Provider 会自动更新状态
// MaterialApp 的 Consumer 会自动切换到 MainPage
if (!response.success && mounted) {
// 只在失败时显示错误
showShadDialog(
context: context,
builder: (context) => ShadDialog.alert(
title: const Text('登录失败'),
description: Text(
response.message ?? '用户名或密码错误',
),
actions: [
ShadButton(
child: const Text('确定'),
onPressed: () =>
Navigator.of(context).pop(),
),
],
),
);
}
}
},
child: auth.isLoading
? const SizedBox.square(
dimension: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
),
)
: const Text('登录'),
);
},
),
_buildLoginButton(),
const SizedBox(height: 16),
// 注册链接
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'还没有账号？',
style: theme.textTheme.muted,
),
ShadButton.link(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RegisterPage(),
),
);
},
child: const Text('立即注册'),
),
],
),
_buildRegisterLink(theme),
],
),
),
@@ -168,4 +53,154 @@ class _LoginPageState extends State<LoginPage> {
),
);
}
Widget _buildHeader(ShadThemeData theme) {
return Column(
children: [
Icon(
LucideIcons.trendingUp,
size: _logoSize,
color: theme.colorScheme.primary,
),
const SizedBox(height: 24),
Text(
'模拟所',
style: theme.textTheme.h1,
textAlign: TextAlign.center,
),
const SizedBox(height: 8),
Text(
'虚拟货币模拟交易平台',
style: theme.textTheme.muted,
textAlign: TextAlign.center,
),
],
);
}
Widget _buildUsernameField() {
return ShadInputFormField(
id: 'username',
label: const Text('用户名'),
placeholder: const Text('请输入用户名'),
leading: const Icon(LucideIcons.user),
validator: _validateUsername,
);
}
Widget _buildPasswordField() {
return ShadInputFormField(
id: 'password',
label: const Text('密码'),
placeholder: const Text('请输入密码'),
obscureText: true,
leading: const Icon(LucideIcons.lock),
validator: _validatePassword,
);
}
Widget _buildLoginButton() {
return Consumer<AuthProvider>(
builder: (context, auth, _) {
return ShadButton(
onPressed: auth.isLoading ? null : () => _handleLogin(auth),
child: auth.isLoading
? const SizedBox.square(
dimension: _loadingIndicatorSize,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
),
)
: const Text('登录'),
);
},
);
}
Widget _buildRegisterLink(ShadThemeData theme) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'还没有账号？',
style: theme.textTheme.muted,
),
ShadButton.link(
onPressed: _navigateToRegister,
child: const Text('立即注册'),
),
],
);
}
// Validators
String? _validateUsername(String? value) {
if (value == null || value.isEmpty) {
return '请输入用户名';
}
if (value.length < 3) {
return '用户名至少 3 个字符';
}
return null;
}
String? _validatePassword(String? value) {
if (value == null || value.isEmpty) {
return '请输入密码';
}
if (value.length < 6) {
return '密码至少 6 个字符';
}
return null;
}
// Actions
Future<void> _handleLogin(AuthProvider auth) async {
if (!formKey.currentState!.saveAndValidate()) return;
final values = formKey.currentState!.value;
final response = await auth.login(
values['username'],
values['password'],
);
if (!mounted) return;
if (response.success) {
_navigateToMainPage();
} else {
_showErrorDialog(response.message ?? '用户名或密码错误');
}
}
void _navigateToMainPage() {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (_) => const MainPage()),
(route) => false,
);
}
void _navigateToRegister() {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const RegisterPage()),
);
}
void _showErrorDialog(String message) {
showShadDialog(
context: context,
builder: (context) => ShadDialog.alert(
title: const Text('登录失败'),
description: Text(message),
actions: [
ShadButton(
child: const Text('确定'),
onPressed: () => Navigator.of(context).pop(),
),
],
),
);
}
}

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

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:provider/provider.dart';
import '../../../providers/auth_provider.dart';
import '../auth/login_page.dart';
/// 我的页面 - 使用 shadcn_ui 现代化设计
class MinePage extends StatefulWidget {
@@ -275,8 +276,14 @@ class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin
onPressed: () async {
Navigator.of(context).pop();
await auth.logout();
// 登出成功，直接导航到登录页
if (context.mounted) {
Navigator.pushReplacementNamed(context, '/login');
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(
builder: (_) => const LoginPage(),
),
(route) => false,
);
}
},
),