qzl/social-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(apps): 重构 UI 架构为 presentation 层并新增 l10n 国际化支持

Browse Source
This commit is contained in:
qzl
2026-03-27 14:05:03 +08:00
parent b1f0eb8921
commit c592cc7854
178 changed files with 10748 additions and 5764 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/features/auth/presentation/cubits/login_cubit.dart
+7 -4
View File
@@ -3,10 +3,11 @@ import 'dart:async';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:formz/formz.dart';
import 'package:equatable/equatable.dart';
import '../../../../core/api/api_exception.dart';
import '../../../../core/network/api_exception.dart';
import '../../../../core/l10n/l10n.dart';
import '../../data/auth_repository.dart';
import '../../data/models/auth_response.dart';
import '../../../../core/form_inputs/form_inputs.dart';
import '../../../../shared/forms/inputs.dart';
class LoginState extends Equatable {
static const defaultDialCode = '+86';
@@ -121,7 +122,7 @@ class LoginCubit extends Cubit<LoginState> {
Future<bool> sendCode() async {
if (!state.phone.isValid) {
emit(state.copyWith(errorMessage: '请输入有效手机号'));
emit(state.copyWith(errorMessage: L10n.current.authInvalidPhone));
return false;
}
if (!state.canSendCode) {
@@ -152,7 +153,9 @@ class LoginCubit extends Cubit<LoginState> {
if (isClosed) {
return false;
}
final message = e is ApiException ? e.message : '验证码发送失败';
final message = e is ApiException
? e.message
: L10n.current.authSendCodeFailed;
emit(state.copyWith(isSendingCode: false, errorMessage: message));
return false;
}
apps/lib/features/auth/presentation/screens/auth_boot_screen.dart
+20
View File
@@ -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,
),
),
),
);
}
}
apps/lib/features/auth/presentation/screens/login_screen.dart
+316
View File
@@ -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(),
],
);
},
),
],
),
),
),
),
);
},
),
);
}
}
apps/lib/features/auth/presentation/widgets/auth_field.dart
+88
View File
@@ -0,0 +1,88 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../../../../core/theme/design_tokens.dart';
class AuthField extends StatelessWidget {
const AuthField({
super.key,
this.label,
required this.hint,
required this.controller,
this.keyboardType,
this.obscureText = false,
this.suffixIcon,
this.onChanged,
this.prefix,
this.inputFormatters,
});
final String? label;
final String hint;
final TextEditingController controller;
final TextInputType? keyboardType;
final bool obscureText;
final Widget? suffixIcon;
final ValueChanged<String>? onChanged;
final Widget? prefix;
final List<TextInputFormatter>? inputFormatters;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (label != null) ...[
Text(
label!,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: AppColors.slate700,
),
),
SizedBox(height: AppSpacing.sm),
],
Semantics(
label: label,
textField: true,
child: TextField(
controller: controller,
keyboardType: keyboardType,
obscureText: obscureText,
onChanged: onChanged,
inputFormatters: inputFormatters,
style: const TextStyle(fontSize: 16, color: AppColors.slate900),
decoration: InputDecoration(
hintText: hint,
hintStyle: const TextStyle(
fontSize: 15,
color: AppColors.slate400,
),
filled: true,
fillColor: AppColors.authInputBackground,
contentPadding: const EdgeInsets.symmetric(
horizontal: AppSpacing.lg,
vertical: AppSpacing.lg,
),
prefixIcon: prefix,
suffixIcon: suffixIcon,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.lg),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.lg),
borderSide: const BorderSide(color: AppColors.authInputBorder),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.lg),
borderSide: const BorderSide(color: AppColors.authInputFocus),
),
),
),
),
],
);
}
}
apps/lib/features/auth/presentation/widgets/auth_page_scaffold.dart
+328
View File
@@ -0,0 +1,328 @@
import 'package:flutter/material.dart';
import '../../../../core/theme/design_tokens.dart';
class AuthPageScaffold extends StatelessWidget {
const AuthPageScaffold({
super.key,
required this.mainContent,
this.footer,
this.mainContentKey,
this.footerKey,
this.resizeOnKeyboard = true,
});
final Widget mainContent;
final Widget? footer;
final Key? mainContentKey;
final Key? footerKey;
final bool resizeOnKeyboard;
@override
Widget build(BuildContext context) {
final keyboardInset = MediaQuery.viewInsetsOf(context).bottom;
return Scaffold(
backgroundColor: AppColors.authBackgroundBottom,
resizeToAvoidBottomInset: resizeOnKeyboard,
body: DecoratedBox(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
AppColors.authBackgroundTop,
AppColors.authBackgroundBottom,
],
),
),
child: Stack(
children: [
const _AuthBackgroundOrbs(),
SafeArea(
maintainBottomViewPadding: !resizeOnKeyboard,
child: LayoutBuilder(
builder: (context, constraints) {
if (!resizeOnKeyboard) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.lg,
),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
KeyedSubtree(
key: mainContentKey,
child: mainContent,
),
if (footer != null) ...[
SizedBox(height: AppSpacing.md),
KeyedSubtree(key: footerKey, child: footer!),
],
],
),
),
);
}
return SingleChildScrollView(
keyboardDismissBehavior:
ScrollViewKeyboardDismissBehavior.onDrag,
padding: EdgeInsets.fromLTRB(
AppSpacing.lg,
AppSpacing.md,
AppSpacing.lg,
keyboardInset + AppSpacing.md,
),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
KeyedSubtree(
key: mainContentKey,
child: mainContent,
),
if (footer != null) ...[
SizedBox(height: AppSpacing.md),
KeyedSubtree(key: footerKey, child: footer!),
],
],
),
),
),
);
},
),
),
],
),
),
);
}
}
class AuthHeroHeader extends StatelessWidget {
const AuthHeroHeader({
super.key,
this.title,
this.subtitle,
this.showBrand = false,
});
final String? title;
final String? subtitle;
final bool showBrand;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (showBrand) ...[
Container(
width: 88,
height: 88,
decoration: BoxDecoration(
color: AppColors.appIconRing,
borderRadius: BorderRadius.circular(AppRadius.full),
border: Border.all(color: AppColors.appIconBorder),
boxShadow: [
BoxShadow(
color: AppColors.blue300.withValues(alpha: 0.28),
blurRadius: 30,
offset: const Offset(0, 16),
),
],
),
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(AppRadius.full),
child: Image.asset(
'assets/images/logo.png',
width: 88,
height: 88,
fit: BoxFit.cover,
),
),
),
),
SizedBox(height: AppSpacing.lg),
const Text(
'linksy',
style: TextStyle(
fontFamily: 'Playfair Display',
fontSize: 34,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
color: AppColors.appTitle,
letterSpacing: 0.4,
),
),
],
if (title != null) ...[
if (showBrand) SizedBox(height: AppSpacing.lg),
Text(
title!,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
letterSpacing: -0.2,
),
),
],
if (subtitle != null) ...[
SizedBox(height: AppSpacing.sm),
Text(
subtitle!,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 14,
height: 1.45,
color: AppColors.authLinkMuted,
),
),
],
],
);
}
}
class AuthSurfaceCard extends StatelessWidget {
const AuthSurfaceCard({super.key, required this.child});
final Widget child;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(AppSpacing.xl),
decoration: BoxDecoration(
color: AppColors.authCardBackground,
borderRadius: BorderRadius.circular(AppRadius.xxl),
border: Border.all(color: AppColors.authCardBorder),
boxShadow: [
BoxShadow(
color: AppColors.blue200.withValues(alpha: 0.18),
blurRadius: 34,
offset: const Offset(0, 18),
),
BoxShadow(
color: AppColors.slate900.withValues(alpha: 0.06),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: child,
);
}
}
class AuthSection extends StatelessWidget {
const AuthSection({
super.key,
this.title,
this.description,
required this.child,
});
final String? title;
final String? description;
final Widget child;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (title != null) ...[
Text(
title!,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.slate800,
),
),
if (description != null) ...[
SizedBox(height: AppSpacing.xs),
Text(
description!,
style: const TextStyle(
fontSize: 13,
height: 1.4,
color: AppColors.authLinkMuted,
),
),
],
SizedBox(height: AppSpacing.md),
],
child,
],
);
}
}
class _AuthBackgroundOrbs extends StatelessWidget {
const _AuthBackgroundOrbs();
@override
Widget build(BuildContext context) {
return IgnorePointer(
child: Stack(
children: [
Positioned(
top: -72,
left: -38,
child: _Orb(
size: 168,
color: AppColors.authBackgroundOrb.withValues(alpha: 0.42),
),
),
Positioned(
top: 108,
right: -32,
child: _Orb(
size: 120,
color: AppColors.blue100.withValues(alpha: 0.32),
),
),
Positioned(
bottom: 36,
left: 24,
child: _Orb(
size: 92,
color: AppColors.blue50.withValues(alpha: 0.7),
),
),
],
),
);
}
}
class _Orb extends StatelessWidget {
const _Orb({required this.size, required this.color});
final double size;
final Color color;
@override
Widget build(BuildContext context) {
return Container(
width: size,
height: size,
decoration: BoxDecoration(shape: BoxShape.circle, color: color),
);
}
}
apps/lib/features/auth/presentation/widgets/password_field.dart
+54
View File
@@ -0,0 +1,54 @@
import 'package:flutter/material.dart';
import '../../../../core/l10n/l10n.dart';
import '../../../../core/theme/design_tokens.dart';
import 'auth_field.dart';
class PasswordField extends StatefulWidget {
const PasswordField({
super.key,
required this.controller,
this.label,
required this.hint,
this.onChanged,
});
final TextEditingController controller;
final String? label;
final String hint;
final ValueChanged<String>? onChanged;
@override
State<PasswordField> createState() => _PasswordFieldState();
}
class _PasswordFieldState extends State<PasswordField> {
bool _obscured = true;
void _toggleVisibility() {
setState(() {
_obscured = !_obscured;
});
}
@override
Widget build(BuildContext context) {
return AuthField(
label: widget.label,
hint: widget.hint,
controller: widget.controller,
obscureText: _obscured,
onChanged: widget.onChanged,
suffixIcon: IconButton(
onPressed: _toggleVisibility,
tooltip: _obscured
? context.l10n.authShowPassword
: context.l10n.authHidePassword,
icon: Icon(
_obscured ? Icons.visibility_off_rounded : Icons.visibility_rounded,
color: AppColors.authInputIcon,
),
),
);
}
}