206 lines
5.3 KiB
Dart
206 lines
5.3 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||
import 'package:provider/provider.dart';
|
||
|
||
import '../../../core/theme/app_spacing.dart';
|
||
import '../../../providers/auth_provider.dart';
|
||
import '../main/main_page.dart';
|
||
import 'register_page.dart';
|
||
|
||
class LoginPage extends StatefulWidget {
|
||
const LoginPage({super.key});
|
||
|
||
@override
|
||
State<LoginPage> createState() => _LoginPageState();
|
||
}
|
||
|
||
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);
|
||
|
||
return Scaffold(
|
||
body: Center(
|
||
child: ConstrainedBox(
|
||
constraints: const BoxConstraints(maxWidth: _maxFormWidth),
|
||
child: Padding(
|
||
padding: EdgeInsets.all(AppSpacing.lg),
|
||
child: ShadForm(
|
||
key: formKey,
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||
children: [
|
||
_buildHeader(theme),
|
||
SizedBox(height: AppSpacing.xxl),
|
||
_buildUsernameField(),
|
||
SizedBox(height: AppSpacing.md),
|
||
_buildPasswordField(),
|
||
SizedBox(height: AppSpacing.lg),
|
||
_buildLoginButton(),
|
||
SizedBox(height: AppSpacing.md),
|
||
_buildRegisterLink(theme),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildHeader(ShadThemeData theme) {
|
||
return Column(
|
||
children: [
|
||
Icon(
|
||
LucideIcons.trendingUp,
|
||
size: _logoSize,
|
||
color: theme.colorScheme.primary,
|
||
),
|
||
SizedBox(height: AppSpacing.lg),
|
||
Text(
|
||
'模拟所',
|
||
style: theme.textTheme.h1,
|
||
textAlign: TextAlign.center,
|
||
),
|
||
SizedBox(height: AppSpacing.sm),
|
||
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,让 main.dart 中的 Consumer<AuthProvider> 自动处理页面切换
|
||
// 登录成功后,auth.isLoggedIn 会变为 true,Consumer 会自动显示 MainPage
|
||
}
|
||
|
||
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(),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|