510 lines
21 KiB
Dart
510 lines
21 KiB
Dart
|
import 'dart:typed_data';
|
|||
|
|
|
|||
|
|
import 'package:flutter/material.dart';
|
|||
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|||
|
|
|
|||
|
|
import '../../providers/auth_provider.dart';
|
|||
|
|
import '../../app/theme.dart';
|
|||
|
|
import '../../services/auth_service.dart';
|
|||
|
|
import '../../utils/constants.dart';
|
|||
|
|
import '../../utils/credential_storage.dart';
|
|||
|
|
import '../../utils/i10n.dart';
|
|||
|
|
import '../../config/app_config.dart';
|
|||
|
|
import '../../widgets/cloud_card.dart';
|
|||
|
|
|
|||
|
|
/// 登录页。
|
|||
|
|
class LoginPage extends ConsumerStatefulWidget {
|
|||
|
|
const LoginPage({super.key});
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
ConsumerState<LoginPage> createState() => _LoginPageState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _LoginPageState extends ConsumerState<LoginPage> {
|
|||
|
|
final _formKey = GlobalKey<FormState>();
|
|||
|
|
final _accountController = TextEditingController();
|
|||
|
|
final _passwordController = TextEditingController();
|
|||
|
|
final _captchaController = TextEditingController();
|
|||
|
|
bool _obscurePassword = true;
|
|||
|
|
|
|||
|
|
/// 是否记住密码。
|
|||
|
|
bool _rememberPassword = false;
|
|||
|
|
|
|||
|
|
/// 当前验证码图片数据。
|
|||
|
|
Uint8List? _captchaBytes;
|
|||
|
|
|
|||
|
|
/// 当前验证码 UUID，登录时必须原样回传。
|
|||
|
|
String _captchaUuid = '';
|
|||
|
|
|
|||
|
|
/// 是否正在加载验证码。
|
|||
|
|
bool _captchaLoading = false;
|
|||
|
|
|
|||
|
|
/// 验证码加载/刷新错误提示。
|
|||
|
|
String? _captchaError;
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void initState() {
|
|||
|
|
super.initState();
|
|||
|
|
_safeLoadSavedCredentials();
|
|||
|
|
if (AppConfig.enableCaptcha) {
|
|||
|
|
_safeRefreshCaptcha();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 加载已保存的账号密码（如果之前勾选了「记住密码」）。
|
|||
|
|
///
|
|||
|
|
/// 包一层 try-catch：release 模式下任何同步/异步异常都不应让登录页崩成灰屏。
|
|||
|
|
void _safeLoadSavedCredentials() {
|
|||
|
|
try {
|
|||
|
|
_loadSavedCredentials();
|
|||
|
|
} catch (_) {
|
|||
|
|
// 读取本地凭据失败时使用空表单，不阻塞登录。
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 验证码加载包一层 try-catch，失败时通过 _refreshCaptcha 内部的 catch 兜底。
|
|||
|
|
void _safeRefreshCaptcha() {
|
|||
|
|
try {
|
|||
|
|
_refreshCaptcha();
|
|||
|
|
} catch (_) {
|
|||
|
|
// 极端情况下同步抛错，确保页面仍可渲染。
|
|||
|
|
if (mounted) {
|
|||
|
|
setState(() {
|
|||
|
|
_captchaError = '验证码加载失败，请重试';
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 加载已保存的账号密码（如果之前勾选了「记住密码」）。
|
|||
|
|
void _loadSavedCredentials() {
|
|||
|
|
final cs = CredentialStorage.instance;
|
|||
|
|
if (cs.rememberPassword) {
|
|||
|
|
_rememberPassword = true;
|
|||
|
|
_accountController.text = cs.savedAccount ?? '';
|
|||
|
|
_passwordController.text = cs.savedPassword ?? '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void dispose() {
|
|||
|
|
_accountController.dispose();
|
|||
|
|
_passwordController.dispose();
|
|||
|
|
_captchaController.dispose();
|
|||
|
|
super.dispose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _refreshCaptcha() async {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
setState(() {
|
|||
|
|
_captchaLoading = true;
|
|||
|
|
_captchaError = null;
|
|||
|
|
});
|
|||
|
|
try {
|
|||
|
|
final captcha = await AuthService().fetchCaptcha();
|
|||
|
|
if (!mounted) return;
|
|||
|
|
setState(() {
|
|||
|
|
_captchaUuid = captcha.uuid;
|
|||
|
|
_captchaBytes = Uint8List.fromList(captcha.imageBytes);
|
|||
|
|
_captchaLoading = false;
|
|||
|
|
});
|
|||
|
|
} on AuthException catch (e) {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
setState(() {
|
|||
|
|
_captchaError = e.message;
|
|||
|
|
_captchaLoading = false;
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
setState(() {
|
|||
|
|
_captchaError = '验证码加载失败，点击重试';
|
|||
|
|
_captchaLoading = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _submit() async {
|
|||
|
|
if (!(_formKey.currentState?.validate() ?? false)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
final success = await ref.read(authProvider.notifier).login(
|
|||
|
|
account: _accountController.text.trim(),
|
|||
|
|
password: _passwordController.text,
|
|||
|
|
captcha: _captchaController.text.trim(),
|
|||
|
|
uuid: _captchaUuid,
|
|||
|
|
rememberPassword: _rememberPassword,
|
|||
|
|
);
|
|||
|
|
if (!success && mounted && AppConfig.enableCaptcha) {
|
|||
|
|
// 登录失败后刷新验证码，并清空输入。
|
|||
|
|
_captchaController.clear();
|
|||
|
|
await _refreshCaptcha();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
final t = AppLocalizations.of(context);
|
|||
|
|
final authState = ref.watch(authProvider);
|
|||
|
|
// 跟随主题：原有硬编码深色是为了规避 M3 动态取色；现改为显式 ColorScheme，
|
|||
|
|
// 直接取 token，浅色模式即为暖白品牌主场（与 logo 橙白一致）。
|
|||
|
|
final scheme = Theme.of(context).colorScheme;
|
|||
|
|
final inputFillColor = scheme.surfaceContainerHighest;
|
|||
|
|
final inputBorderColor = scheme.outline;
|
|||
|
|
final inputTextColor = scheme.onSurface;
|
|||
|
|
final inputLabelColor = scheme.onSurfaceVariant;
|
|||
|
|
final cardColor = scheme.surfaceContainerLow;
|
|||
|
|
|
|||
|
|
return Scaffold(
|
|||
|
|
backgroundColor: scheme.surface,
|
|||
|
|
body: Container(
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
// 浅色模式铺 logo 橙→金渐变（品牌渗透）；深色模式保持暖黑 surface。
|
|||
|
|
gradient: scheme.brightness == Brightness.light
|
|||
|
|
? AppBrand.cloudGradient
|
|||
|
|
: null,
|
|||
|
|
color: scheme.brightness == Brightness.light ? null : scheme.surface,
|
|||
|
|
),
|
|||
|
|
child: SafeArea(
|
|||
|
|
child: Center(
|
|||
|
|
child: SingleChildScrollView(
|
|||
|
|
padding: const EdgeInsets.all(24),
|
|||
|
|
child: ConstrainedBox(
|
|||
|
|
constraints: const BoxConstraints(maxWidth: 420),
|
|||
|
|
child: Card(
|
|||
|
|
color: cardColor,
|
|||
|
|
elevation: 4,
|
|||
|
|
shape: RoundedRectangleBorder(
|
|||
|
|
borderRadius: BorderRadius.circular(16),
|
|||
|
|
),
|
|||
|
|
child: Padding(
|
|||
|
|
padding: const EdgeInsets.all(24),
|
|||
|
|
child: Form(
|
|||
|
|
key: _formKey,
|
|||
|
|
child: Column(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|||
|
|
children: [
|
|||
|
|
Image.asset(
|
|||
|
|
'assets/images/logo.png',
|
|||
|
|
width: 112,
|
|||
|
|
height: 112,
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
CloudCard(
|
|||
|
|
child: Row(
|
|||
|
|
children: [
|
|||
|
|
const Icon(Icons.cloud, size: 36),
|
|||
|
|
const SizedBox(width: 14),
|
|||
|
|
Expanded(
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Text(
|
|||
|
|
AppConstants.appName,
|
|||
|
|
style: const TextStyle(
|
|||
|
|
fontSize: 20,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 4),
|
|||
|
|
Text(
|
|||
|
|
t.appSubtitle,
|
|||
|
|
style: const TextStyle(fontSize: 13),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 32),
|
|||
|
|
TextFormField(
|
|||
|
|
controller: _accountController,
|
|||
|
|
style: TextStyle(color: inputTextColor),
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: '账号',
|
|||
|
|
labelStyle: TextStyle(color: inputLabelColor),
|
|||
|
|
prefixIconColor: inputLabelColor,
|
|||
|
|
filled: true,
|
|||
|
|
fillColor: inputFillColor,
|
|||
|
|
border: OutlineInputBorder(
|
|||
|
|
borderSide: BorderSide(color: inputBorderColor),
|
|||
|
|
),
|
|||
|
|
enabledBorder: OutlineInputBorder(
|
|||
|
|
borderSide: BorderSide(color: inputBorderColor),
|
|||
|
|
),
|
|||
|
|
focusedBorder: OutlineInputBorder(
|
|||
|
|
borderSide: BorderSide(color: scheme.primary),
|
|||
|
|
),
|
|||
|
|
prefixIcon: const Icon(Icons.person_outline),
|
|||
|
|
),
|
|||
|
|
validator: (value) =>
|
|||
|
|
(value == null || value.trim().isEmpty)
|
|||
|
|
? '请输入账号'
|
|||
|
|
: null,
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
TextFormField(
|
|||
|
|
controller: _passwordController,
|
|||
|
|
obscureText: _obscurePassword,
|
|||
|
|
style: TextStyle(color: inputTextColor),
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: '密码',
|
|||
|
|
labelStyle: TextStyle(color: inputLabelColor),
|
|||
|
|
prefixIconColor: inputLabelColor,
|
|||
|
|
suffixIconColor: inputLabelColor,
|
|||
|
|
filled: true,
|
|||
|
|
fillColor: inputFillColor,
|
|||
|
|
border: OutlineInputBorder(
|
|||
|
|
borderSide: BorderSide(color: inputBorderColor),
|
|||
|
|
),
|
|||
|
|
enabledBorder: OutlineInputBorder(
|
|||
|
|
borderSide: BorderSide(color: inputBorderColor),
|
|||
|
|
),
|
|||
|
|
focusedBorder: OutlineInputBorder(
|
|||
|
|
borderSide: BorderSide(color: scheme.primary),
|
|||
|
|
),
|
|||
|
|
prefixIcon: const Icon(Icons.lock_outline),
|
|||
|
|
suffixIcon: IconButton(
|
|||
|
|
icon: Icon(
|
|||
|
|
_obscurePassword
|
|||
|
|
? Icons.visibility_off
|
|||
|
|
: Icons.visibility,
|
|||
|
|
color: inputLabelColor,
|
|||
|
|
),
|
|||
|
|
onPressed: () => setState(
|
|||
|
|
() => _obscurePassword = !_obscurePassword,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
validator: (value) =>
|
|||
|
|
(value == null || value.isEmpty) ? '请输入密码' : null,
|
|||
|
|
onFieldSubmitted: (_) => _submit(),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
if (AppConfig.enableCaptcha) ...[
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
// 验证码区域
|
|||
|
|
Row(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
flex: 5,
|
|||
|
|
child: TextFormField(
|
|||
|
|
controller: _captchaController,
|
|||
|
|
style: TextStyle(color: inputTextColor),
|
|||
|
|
decoration: InputDecoration(
|
|||
|
|
labelText: '验证码',
|
|||
|
|
labelStyle:
|
|||
|
|
TextStyle(color: inputLabelColor),
|
|||
|
|
prefixIconColor: inputLabelColor,
|
|||
|
|
filled: true,
|
|||
|
|
fillColor: inputFillColor,
|
|||
|
|
border: OutlineInputBorder(
|
|||
|
|
borderSide:
|
|||
|
|
BorderSide(color: inputBorderColor),
|
|||
|
|
),
|
|||
|
|
enabledBorder: OutlineInputBorder(
|
|||
|
|
borderSide:
|
|||
|
|
BorderSide(color: inputBorderColor),
|
|||
|
|
),
|
|||
|
|
focusedBorder: OutlineInputBorder(
|
|||
|
|
borderSide:
|
|||
|
|
BorderSide(color: scheme.primary),
|
|||
|
|
),
|
|||
|
|
prefixIcon: const Icon(Icons.security_outlined),
|
|||
|
|
),
|
|||
|
|
textInputAction: TextInputAction.done,
|
|||
|
|
validator: (value) =>
|
|||
|
|
(value == null || value.trim().isEmpty)
|
|||
|
|
? '请输入验证码'
|
|||
|
|
: null,
|
|||
|
|
onFieldSubmitted: (_) => _submit(),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 12),
|
|||
|
|
Expanded(
|
|||
|
|
flex: 3,
|
|||
|
|
child: SizedBox(
|
|||
|
|
height: 52,
|
|||
|
|
child: InkWell(
|
|||
|
|
onTap: _captchaLoading
|
|||
|
|
? null
|
|||
|
|
: _refreshCaptcha,
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
child: Container(
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: inputFillColor,
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
border: Border.all(
|
|||
|
|
color: inputBorderColor,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
alignment: Alignment.center,
|
|||
|
|
child: _buildCaptchaImage(),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
if (_captchaError != null) ...[
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
Text(
|
|||
|
|
_captchaError!,
|
|||
|
|
style: TextStyle(
|
|||
|
|
color: scheme.error,
|
|||
|
|
fontSize: 12,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
],
|
|||
|
|
if (authState.errorMessage != null) ...[
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
Text(
|
|||
|
|
authState.errorMessage!,
|
|||
|
|
style: TextStyle(
|
|||
|
|
color: scheme.error,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
// 记住密码
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Checkbox(
|
|||
|
|
value: _rememberPassword,
|
|||
|
|
onChanged: (v) => setState(
|
|||
|
|
() => _rememberPassword = v ?? false,
|
|||
|
|
),
|
|||
|
|
fillColor: WidgetStateProperty.resolveWith(
|
|||
|
|
(states) => states.contains(WidgetState.selected)
|
|||
|
|
? scheme.primary
|
|||
|
|
: inputBorderColor,
|
|||
|
|
),
|
|||
|
|
checkColor: scheme.onPrimary,
|
|||
|
|
),
|
|||
|
|
GestureDetector(
|
|||
|
|
onTap: () => setState(
|
|||
|
|
() => _rememberPassword = !_rememberPassword,
|
|||
|
|
),
|
|||
|
|
child: Text(
|
|||
|
|
'记住密码',
|
|||
|
|
style: TextStyle(color: inputTextColor),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 12),
|
|||
|
|
FilledButton(
|
|||
|
|
onPressed: authState.isLoading ? null : _submit,
|
|||
|
|
style: FilledButton.styleFrom(
|
|||
|
|
backgroundColor: scheme.primary,
|
|||
|
|
foregroundColor: scheme.onPrimary,
|
|||
|
|
disabledBackgroundColor:
|
|||
|
|
scheme.onSurface.withOpacity(0.12),
|
|||
|
|
padding: const EdgeInsets.symmetric(vertical: 16),
|
|||
|
|
),
|
|||
|
|
child: authState.isLoading
|
|||
|
|
? SizedBox(
|
|||
|
|
width: 20,
|
|||
|
|
height: 20,
|
|||
|
|
child: CircularProgressIndicator(
|
|||
|
|
strokeWidth: 2,
|
|||
|
|
color: scheme.onPrimary,
|
|||
|
|
),
|
|||
|
|
)
|
|||
|
|
: const Text('登 录'),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
// 仅 mock 模式显示演示账号；真实模式下提示无意义
|
|||
|
|
if (AppConstants.useMock)
|
|||
|
|
Text(
|
|||
|
|
'演示账号：${AppConstants.mockAccount} / '
|
|||
|
|
'${AppConstants.mockPassword}',
|
|||
|
|
textAlign: TextAlign.center,
|
|||
|
|
style: TextStyle(
|
|||
|
|
color: scheme.onSurfaceVariant, fontSize: 12),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 8),
|
|||
|
|
Text(
|
|||
|
|
'v6-fix68',
|
|||
|
|
textAlign: TextAlign.center,
|
|||
|
|
style: TextStyle(
|
|||
|
|
color: scheme.onSurfaceVariant.withOpacity(0.5),
|
|||
|
|
fontSize: 10),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildCaptchaImage() {
|
|||
|
|
if (_captchaLoading) {
|
|||
|
|
return const SizedBox(
|
|||
|
|
width: 18,
|
|||
|
|
height: 18,
|
|||
|
|
child: CircularProgressIndicator(strokeWidth: 2),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
final bytes = _captchaBytes;
|
|||
|
|
if (bytes != null && bytes.isNotEmpty) {
|
|||
|
|
return ClipRRect(
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
child: Image.memory(
|
|||
|
|
bytes,
|
|||
|
|
fit: BoxFit.contain,
|
|||
|
|
width: double.infinity,
|
|||
|
|
height: double.infinity,
|
|||
|
|
errorBuilder: (context, error, stackTrace) {
|
|||
|
|
return const Column(
|
|||
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|||
|
|
children: [
|
|||
|
|
Icon(
|
|||
|
|
Icons.broken_image_outlined,
|
|||
|
|
size: 20,
|
|||
|
|
color: Color(0xFFB0B0B0),
|
|||
|
|
),
|
|||
|
|
SizedBox(height: 2),
|
|||
|
|
Text(
|
|||
|
|
'点击刷新',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 10,
|
|||
|
|
color: Color(0xFFB0B0B0),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return const Column(
|
|||
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|||
|
|
children: [
|
|||
|
|
Icon(
|
|||
|
|
Icons.refresh,
|
|||
|
|
size: 20,
|
|||
|
|
color: Color(0xFFB0B0B0),
|
|||
|
|
),
|
|||
|
|
SizedBox(height: 2),
|
|||
|
|
Text(
|
|||
|
|
'点击刷新',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 10,
|
|||
|
|
color: Color(0xFFB0B0B0),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|