feat(apps): 重构 UI 架构为 presentation 层并新增 l10n 国际化支持
This commit is contained in:
qzl
@@ -0,0 +1,20 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AuthBootScreen extends StatelessWidget {
|
||||
const AuthBootScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFFEFF8FF),
|
||||
body: SafeArea(
|
||||
child: Center(
|
||||
child: Image.asset(
|
||||
'assets/branding/assistant_octopus_foreground.png',
|
||||
width: 260,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,316 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:formz/formz.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../../../../app/di/injection.dart';
|
||||
import '../../../../app/router/app_routes.dart';
|
||||
import '../../../../core/l10n/l10n.dart';
|
||||
import '../../../../core/theme/design_tokens.dart';
|
||||
import '../../../../shared/widgets/app_button.dart';
|
||||
import '../../../../shared/widgets/banner/app_banner.dart';
|
||||
import '../../../../shared/widgets/confirm_sheet.dart';
|
||||
import '../../../../shared/widgets/link_button.dart';
|
||||
import '../../../../shared/widgets/phone_prefix_selector.dart';
|
||||
import '../../../../shared/widgets/toast/toast_type.dart';
|
||||
import '../../data/auth_repository.dart';
|
||||
import '../../presentation/bloc/auth_bloc.dart';
|
||||
import '../../presentation/bloc/auth_event.dart';
|
||||
import '../../presentation/cubits/login_cubit.dart';
|
||||
import '../widgets/auth_field.dart';
|
||||
import '../widgets/auth_page_scaffold.dart';
|
||||
|
||||
class LoginScreen extends StatelessWidget {
|
||||
const LoginScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return BlocProvider(
|
||||
create: (context) => LoginCubit(sl<AuthRepository>()),
|
||||
child: const LoginView(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class LoginView extends StatefulWidget {
|
||||
const LoginView({super.key});
|
||||
|
||||
@override
|
||||
State<LoginView> createState() => _LoginViewState();
|
||||
}
|
||||
|
||||
class _LoginViewState extends State<LoginView> {
|
||||
static const _dialCodes = <String>['+86', '+1', '+44', '+81', '+65'];
|
||||
|
||||
final _phoneController = TextEditingController();
|
||||
final _codeController = TextEditingController();
|
||||
bool _agreedToTerms = false;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_phoneController.dispose();
|
||||
_codeController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _handleLogin() async {
|
||||
if (!_agreedToTerms) {
|
||||
final confirmed = await _showAgreementDialog();
|
||||
if (!confirmed || !mounted) return;
|
||||
setState(() => _agreedToTerms = true);
|
||||
}
|
||||
|
||||
final cubit = context.read<LoginCubit>();
|
||||
cubit.phoneChanged(_phoneController.text);
|
||||
cubit.codeChanged(_codeController.text);
|
||||
|
||||
if (!cubit.state.isValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
final response = await cubit.submit();
|
||||
if (response != null && mounted) {
|
||||
context.read<AuthBloc>().add(AuthLoggedIn(user: response.user));
|
||||
context.go(AppRoutes.homeMain);
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _handleSendCode() async {
|
||||
final cubit = context.read<LoginCubit>();
|
||||
cubit.phoneChanged(_phoneController.text);
|
||||
final sent = await cubit.sendCode();
|
||||
if (!mounted || !sent) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
Future<bool> _showAgreementDialog() async {
|
||||
final l10n = context.l10n;
|
||||
return await showConfirmSheet(
|
||||
context,
|
||||
title: l10n.authAgreementTitle,
|
||||
message: l10n.authAgreementMessage,
|
||||
confirmText: l10n.commonConfirm,
|
||||
cancelText: l10n.commonCancel,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAgreementCheckbox() {
|
||||
return Center(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Semantics(
|
||||
label: context.l10n.authAgreementSemantics,
|
||||
checked: _agreedToTerms,
|
||||
button: true,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||||
onTap: () => setState(() => _agreedToTerms = !_agreedToTerms),
|
||||
child: SizedBox(
|
||||
width: 44,
|
||||
height: 44,
|
||||
child: Center(
|
||||
child: Container(
|
||||
width: 20,
|
||||
height: 20,
|
||||
margin: const EdgeInsets.only(right: AppSpacing.sm),
|
||||
decoration: BoxDecoration(
|
||||
color: _agreedToTerms
|
||||
? AppColors.blue600
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
border: Border.all(
|
||||
color: _agreedToTerms
|
||||
? AppColors.blue600
|
||||
: AppColors.slate400,
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
child: _agreedToTerms
|
||||
? const Icon(
|
||||
Icons.check,
|
||||
size: 14,
|
||||
color: AppColors.white,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
RichText(
|
||||
text: TextSpan(
|
||||
style: const TextStyle(fontSize: 13, color: AppColors.slate600),
|
||||
children: [
|
||||
TextSpan(text: context.l10n.authAgreementPrefix),
|
||||
TextSpan(
|
||||
text: context.l10n.authAgreementTerms,
|
||||
style: const TextStyle(
|
||||
color: AppColors.blue600,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
),
|
||||
TextSpan(text: context.l10n.authAgreementAnd),
|
||||
TextSpan(
|
||||
text: context.l10n.authAgreementPrivacy,
|
||||
style: const TextStyle(
|
||||
color: AppColors.blue600,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AuthPageScaffold(
|
||||
resizeOnKeyboard: false,
|
||||
mainContentKey: const Key('login_main_content'),
|
||||
mainContent: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final bottomInset = MediaQuery.of(context).viewInsets.bottom;
|
||||
final minContentHeight = constraints.hasBoundedHeight
|
||||
? constraints.maxHeight
|
||||
: AppSpacing.none;
|
||||
return SingleChildScrollView(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
AppSpacing.lg,
|
||||
0,
|
||||
AppSpacing.lg,
|
||||
bottomInset + AppSpacing.lg,
|
||||
),
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(minHeight: minContentHeight),
|
||||
child: Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 320),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
const AuthHeroHeader(showBrand: true),
|
||||
SizedBox(height: AppSpacing.xxl),
|
||||
BlocBuilder<LoginCubit, LoginState>(
|
||||
builder: (context, state) {
|
||||
final fieldError = state.phone.displayError != null
|
||||
? state.phone.error
|
||||
: state.code.displayError != null
|
||||
? state.code.error
|
||||
: null;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
AuthSection(
|
||||
child: Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
AuthField(
|
||||
hint: context.l10n.authPhoneHint,
|
||||
controller: _phoneController,
|
||||
onChanged: (value) {
|
||||
context.read<LoginCubit>().phoneChanged(
|
||||
value,
|
||||
);
|
||||
},
|
||||
keyboardType: TextInputType.phone,
|
||||
prefix: PhonePrefixSelector(
|
||||
value: state.dialCode,
|
||||
items: _dialCodes,
|
||||
onChanged: (value) {
|
||||
context
|
||||
.read<LoginCubit>()
|
||||
.dialCodeChanged(value);
|
||||
},
|
||||
),
|
||||
inputFormatters: [
|
||||
FilteringTextInputFormatter.digitsOnly,
|
||||
LengthLimitingTextInputFormatter(14),
|
||||
],
|
||||
),
|
||||
SizedBox(height: AppSpacing.lg),
|
||||
AuthField(
|
||||
hint: context.l10n.authCodeHint,
|
||||
controller: _codeController,
|
||||
onChanged: (value) {
|
||||
context.read<LoginCubit>().codeChanged(
|
||||
value,
|
||||
);
|
||||
},
|
||||
keyboardType: TextInputType.number,
|
||||
inputFormatters: [
|
||||
FilteringTextInputFormatter.digitsOnly,
|
||||
LengthLimitingTextInputFormatter(6),
|
||||
],
|
||||
suffixIcon: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
right: AppSpacing.md,
|
||||
),
|
||||
child: LinkButton(
|
||||
text: state.resendCooldownSeconds > 0
|
||||
? '${state.resendCooldownSeconds}s'
|
||||
: context.l10n.authSendCode,
|
||||
onTap: state.canSendCode
|
||||
? _handleSendCode
|
||||
: null,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (state.errorMessage != null ||
|
||||
fieldError != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: AppSpacing.md,
|
||||
),
|
||||
child: AppBanner(
|
||||
message:
|
||||
state.errorMessage ?? fieldError!,
|
||||
type: state.errorMessage != null
|
||||
? ToastType.error
|
||||
: ToastType.warning,
|
||||
title: state.errorMessage != null
|
||||
? context.l10n.authLoginFailed
|
||||
: context.l10n.authCheckInput,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
SizedBox(height: AppSpacing.xxl),
|
||||
AppButton(
|
||||
text: context.l10n.authLoginOrRegister,
|
||||
onPressed:
|
||||
state.status ==
|
||||
FormzSubmissionStatus.inProgress
|
||||
? null
|
||||
: _handleLogin,
|
||||
isLoading:
|
||||
state.status ==
|
||||
FormzSubmissionStatus.inProgress,
|
||||
),
|
||||
SizedBox(height: AppSpacing.xxl * 2),
|
||||
_buildAgreementCheckbox(),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user