430 lines
14 KiB
Dart
430 lines
14 KiB
Dart
import 'package:flutter/gestures.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||
import 'package:go_router/go_router.dart';
|
||
import 'package:new_learn/core/api/auth/api.dart';
|
||
import 'package:new_learn/core/network/dio_client.dart';
|
||
import 'package:new_learn/core/components/confirm_box.dart';
|
||
|
||
/// ============================================================
|
||
/// 【RegisterPage】注册页 —— 对照 Vue 版 pages/login/register.vue
|
||
///
|
||
/// 一、表单字段（3 个，带校验）：
|
||
/// 账号 6-16 位字母或数字 → /^[a-zA-Z0-9]{6,16}$/
|
||
/// 密码 6-16 位字母或数字 → /^[a-zA-Z0-9]{6,16}$/
|
||
/// 确认密码 必须与密码一致
|
||
///
|
||
/// 二、注册流程：
|
||
/// isFormValid → 协议勾选 → 调 UserApi.register({account, password})
|
||
/// → 成功 Toast "注册成功" → 1 秒后返回登录页
|
||
///
|
||
/// 三、与 Vue 的对应关系：
|
||
/// validateField / validateAll → Flutter 版字段级校验（_validateXxx）
|
||
/// isFormValid computed → Flutter 版 _isFormValid getter
|
||
/// debounce 防重复提交 → Flutter 用 _loading 标记防连点
|
||
/// 密码 MD5 → UserApi.register 内部已处理
|
||
///
|
||
/// 四、UI 风格：
|
||
/// 输入框对齐登录页（灰底 #F9F9F9 + 圆角 24.r），顶部 AppBar 标题"注册账号"。
|
||
/// ============================================================
|
||
|
||
/// 账号/密码校验正则：6-16 位字母或数字（对齐 Vue register.vue 的 validateField）
|
||
final _kAccountRegex = RegExp(r'^[a-zA-Z0-9]{6,16}$');
|
||
|
||
class RegisterPage extends ConsumerStatefulWidget {
|
||
const RegisterPage({super.key});
|
||
|
||
@override
|
||
ConsumerState<RegisterPage> createState() => _RegisterPageState();
|
||
}
|
||
|
||
class _RegisterPageState extends ConsumerState<RegisterPage> {
|
||
// ---------- 表单控制器 ----------
|
||
final TextEditingController _accountController = TextEditingController();
|
||
final TextEditingController _passwordController = TextEditingController();
|
||
final TextEditingController _confirmPasswordController =
|
||
TextEditingController();
|
||
|
||
bool _obscurePassword = true;
|
||
bool _obscureConfirmPassword = true;
|
||
bool _hasAgreed = false;
|
||
bool _loading = false;
|
||
|
||
// ---------- 错误信息（字段级，与 Vue errors 对齐） ----------
|
||
String _accountError = '';
|
||
String _passwordError = '';
|
||
String _confirmPasswordError = '';
|
||
|
||
@override
|
||
void dispose() {
|
||
_accountController.dispose();
|
||
_passwordController.dispose();
|
||
_confirmPasswordController.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
// ==================== 校验（对齐 Vue validateField） ====================
|
||
|
||
String _validateAccount() {
|
||
final v = _accountController.text.trim();
|
||
if (v.isEmpty) return '请填写账号';
|
||
if (!_kAccountRegex.hasMatch(v)) return '6-16 位字母或数字';
|
||
return '';
|
||
}
|
||
|
||
String _validatePassword() {
|
||
final v = _passwordController.text.trim();
|
||
if (v.isEmpty) return '请填写密码';
|
||
if (!_kAccountRegex.hasMatch(v)) return '6-16 位字母或数字';
|
||
// 密码变化时重校验确认密码
|
||
if (_confirmPasswordController.text.isNotEmpty) {
|
||
_confirmPasswordError = _confirmPasswordController.text == v
|
||
? ''
|
||
: '两次输入的密码不一致';
|
||
}
|
||
return '';
|
||
}
|
||
|
||
String _validateConfirmPassword() {
|
||
final v = _confirmPasswordController.text;
|
||
if (v.isEmpty) return '请再次输入密码';
|
||
if (v != _passwordController.text) return '两次输入的密码不一致';
|
||
return '';
|
||
}
|
||
|
||
/// 表单是否完整有效（对齐 Vue isFormValid computed）
|
||
bool get _isFormValid {
|
||
return _kAccountRegex.hasMatch(_accountController.text.trim()) &&
|
||
_kAccountRegex.hasMatch(_passwordController.text.trim()) &&
|
||
_confirmPasswordController.text.isNotEmpty &&
|
||
_confirmPasswordController.text == _passwordController.text;
|
||
}
|
||
|
||
// ==================== 注册逻辑 ====================
|
||
|
||
Future<void> _handleRegister() async {
|
||
if (_loading) return;
|
||
|
||
// 全量校验
|
||
_accountError = _validateAccount();
|
||
_passwordError = _validatePassword();
|
||
_confirmPasswordError = _validateConfirmPassword();
|
||
setState(() {});
|
||
|
||
if (!_isFormValid) return;
|
||
|
||
// 未勾选协议 → 弹确认框（对齐 Vue register.vue 的协议弹窗）
|
||
if (!_hasAgreed) {
|
||
final agreed = await showConfirmBox(
|
||
context,
|
||
title: '用户协议及隐私条款',
|
||
content:
|
||
'感谢您选择AI爱学蝶变！我们非常重视您的个人信息和隐私保护。'
|
||
'为了更好地保障您的个人权益，在您使用我们的产品前请务必审慎阅读'
|
||
'《隐私政策》和《用户协议》内的所有条款。同意并继续开始使用我们的产品和服务！',
|
||
cancelText: '不同意',
|
||
confirmText: '同意并继续',
|
||
);
|
||
if (!agreed || !mounted) return;
|
||
setState(() => _hasAgreed = true);
|
||
}
|
||
|
||
setState(() => _loading = true);
|
||
try {
|
||
await UserApi.register(
|
||
account: _accountController.text.trim(),
|
||
password: _passwordController.text,
|
||
);
|
||
if (!mounted) return;
|
||
_toast('注册成功');
|
||
// 1 秒后回到登录页（context.go 替换当前栈，最稳不依赖 canPop）
|
||
Future<void>.delayed(const Duration(seconds: 1), () {
|
||
if (mounted) context.go('/login');
|
||
});
|
||
} on ApiException catch (e) {
|
||
if (mounted) _toast(e.message);
|
||
} catch (e) {
|
||
if (mounted) _toast('注册失败，请稍后重试');
|
||
} finally {
|
||
if (mounted) setState(() => _loading = false);
|
||
}
|
||
}
|
||
|
||
void _toast(String msg) {
|
||
ScaffoldMessenger.of(context)
|
||
..hideCurrentSnackBar()
|
||
..showSnackBar(
|
||
SnackBar(content: Text(msg), duration: const Duration(seconds: 2)),
|
||
);
|
||
}
|
||
|
||
// ==================== 导航 ====================
|
||
|
||
void _goToAgreement() => context.push('/user-agreement');
|
||
void _goToPrivacy() => context.push('/privacy-policy');
|
||
|
||
// ==================== UI ====================
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
backgroundColor: Colors.white,
|
||
appBar: AppBar(
|
||
backgroundColor: Colors.transparent,
|
||
surfaceTintColor: Colors.transparent,
|
||
elevation: 0,
|
||
title: const Text('注册账号', style: TextStyle(color: Color(0xFF323233))),
|
||
iconTheme: const IconThemeData(color: Color(0xFF323233)),
|
||
leading: IconButton(
|
||
icon: const Icon(Icons.arrow_back),
|
||
onPressed: () =>
|
||
context.canPop() ? context.pop() : context.go('/login'),
|
||
),
|
||
),
|
||
body: SafeArea(
|
||
child: SingleChildScrollView(
|
||
padding: EdgeInsets.symmetric(horizontal: 25.w),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||
children: [
|
||
SizedBox(height: 20.h),
|
||
|
||
// 账号
|
||
_buildField(
|
||
label: '账号',
|
||
controller: _accountController,
|
||
hintText: '请输入您的账号',
|
||
errorText: _accountError,
|
||
onChanged: (_) =>
|
||
setState(() => _accountError = _validateAccount()),
|
||
),
|
||
SizedBox(height: 12.h),
|
||
|
||
// 密码
|
||
_buildField(
|
||
label: '密码',
|
||
controller: _passwordController,
|
||
hintText: '请输入您的密码',
|
||
obscureText: _obscurePassword,
|
||
errorText: _passwordError,
|
||
onChanged: (_) => setState(() {
|
||
_passwordError = _validatePassword();
|
||
}),
|
||
onToggleObscure: () =>
|
||
setState(() => _obscurePassword = !_obscurePassword),
|
||
),
|
||
SizedBox(height: 12.h),
|
||
|
||
// 确认密码
|
||
_buildField(
|
||
label: '确认密码',
|
||
controller: _confirmPasswordController,
|
||
hintText: '请再次输入密码',
|
||
obscureText: _obscureConfirmPassword,
|
||
errorText: _confirmPasswordError,
|
||
onChanged: (_) => setState(
|
||
() => _confirmPasswordError = _validateConfirmPassword(),
|
||
),
|
||
onToggleObscure: () => setState(
|
||
() => _obscureConfirmPassword = !_obscureConfirmPassword,
|
||
),
|
||
),
|
||
|
||
SizedBox(height: 25.h),
|
||
|
||
// 协议勾选
|
||
_buildAgreementRow(),
|
||
|
||
SizedBox(height: 20.h),
|
||
|
||
// 注册按钮
|
||
_buildRegisterButton(),
|
||
|
||
SizedBox(height: 20.h),
|
||
|
||
// 已有账号，去登录
|
||
_buildFooterLink(),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 通用输入字段（带 label + 灰底圆角 + 错误提示）
|
||
Widget _buildField({
|
||
required String label,
|
||
required TextEditingController controller,
|
||
required String hintText,
|
||
required String errorText,
|
||
bool obscureText = false,
|
||
ValueChanged<String>? onChanged,
|
||
VoidCallback? onToggleObscure,
|
||
}) {
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// 输入框容器（灰底 #F9F9F9 + 圆角 24.r，对齐登录页）
|
||
Container(
|
||
height: 48.h,
|
||
padding: EdgeInsets.symmetric(horizontal: 16.w),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xFFF9F9F9),
|
||
borderRadius: BorderRadius.circular(24.r),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
// label 文字（Vue register-page__label 140rpx 宽）
|
||
SizedBox(
|
||
width: 70.w, // 140rpx → .w
|
||
child: Text(
|
||
label,
|
||
style: TextStyle(
|
||
fontSize: 14.sp,
|
||
color: const Color(0xFF323233),
|
||
),
|
||
),
|
||
),
|
||
Expanded(
|
||
child: TextField(
|
||
controller: controller,
|
||
obscureText: obscureText,
|
||
onChanged: onChanged,
|
||
style: TextStyle(
|
||
fontSize: 16.sp,
|
||
color: const Color(0xFF323233),
|
||
),
|
||
decoration: InputDecoration(
|
||
isCollapsed: true,
|
||
border: InputBorder.none,
|
||
hintText: hintText,
|
||
hintStyle: TextStyle(
|
||
fontSize: 14.sp,
|
||
color: const Color(0xFFC0C4CC),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
if (onToggleObscure != null)
|
||
GestureDetector(
|
||
onTap: onToggleObscure,
|
||
child: Icon(
|
||
obscureText
|
||
? Icons.visibility_off_outlined
|
||
: Icons.visibility_outlined,
|
||
color: const Color(0xFFC0C4CC),
|
||
size: 24,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
// 错误提示：固定高度占位，有错误时显示文字，无错误时空白 → 输入框位置不动
|
||
SizedBox(
|
||
height: 22.h,
|
||
child: errorText.isNotEmpty
|
||
? Padding(
|
||
padding: EdgeInsets.only(left: 16.w, top: 6.h),
|
||
child: Text(
|
||
errorText,
|
||
style: TextStyle(
|
||
fontSize: 12.sp,
|
||
color: const Color(0xFFEE0A24),
|
||
),
|
||
),
|
||
)
|
||
: null,
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _buildAgreementRow() {
|
||
return Row(
|
||
crossAxisAlignment: CrossAxisAlignment.center,
|
||
children: [
|
||
InkWell(
|
||
onTap: () => setState(() => _hasAgreed = !_hasAgreed),
|
||
child: Icon(
|
||
_hasAgreed
|
||
? Icons.check_circle_rounded
|
||
: Icons.radio_button_unchecked,
|
||
size: 16.w,
|
||
color: _hasAgreed
|
||
? const Color(0xFF3D7DF5)
|
||
: const Color(0xFFC0C4CC),
|
||
),
|
||
),
|
||
SizedBox(width: 6.w),
|
||
Expanded(
|
||
child: RichText(
|
||
text: TextSpan(
|
||
style: TextStyle(fontSize: 14.sp, color: const Color(0xFF323233)),
|
||
children: [
|
||
const TextSpan(text: '我已阅读并同意'),
|
||
TextSpan(
|
||
text: '《用户协议》',
|
||
style: const TextStyle(color: Color(0xFF3D7DF5)),
|
||
recognizer: TapGestureRecognizer()..onTap = _goToAgreement,
|
||
),
|
||
const TextSpan(text: '和'),
|
||
TextSpan(
|
||
text: '《隐私政策》',
|
||
style: const TextStyle(color: Color(0xFF3D7DF5)),
|
||
recognizer: TapGestureRecognizer()..onTap = _goToPrivacy,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _buildRegisterButton() {
|
||
return SizedBox(
|
||
width: double.infinity,
|
||
height: 48.h,
|
||
child: FilledButton(
|
||
onPressed: _loading ? null : _handleRegister,
|
||
style: FilledButton.styleFrom(
|
||
backgroundColor: const Color(0xFF3D7DF5),
|
||
disabledBackgroundColor: _isFormValid
|
||
? const Color(0xFF3D7DF5).withValues(alpha: 0.6)
|
||
: const Color(0xFFC0C4CC), // 表单无效时整体灰色，对齐 Vue btn--disabled
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(24.r),
|
||
),
|
||
),
|
||
child: _loading
|
||
? SizedBox(
|
||
width: 18.w,
|
||
height: 18.w,
|
||
child: const CircularProgressIndicator(
|
||
strokeWidth: 3,
|
||
color: Colors.white,
|
||
),
|
||
)
|
||
: Text(
|
||
'注册',
|
||
style: TextStyle(fontSize: 18.sp, color: Colors.white),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildFooterLink() {
|
||
return Align(
|
||
alignment: Alignment.centerRight,
|
||
child: GestureDetector(
|
||
onTap: () => context.canPop() ? context.pop() : context.go('/login'),
|
||
child: Text(
|
||
'已有账号，去登录',
|
||
style: TextStyle(fontSize: 14.sp, color: const Color(0xFF3D7DF5)),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|