jianghaifeng/ReelShort
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(flutter): 优化登录页与底部导航

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-17 16:11:01 +08:00
1 parent e52d81881c
commit e609e3ad8d
12 files changed
+702 -189
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/l10n/app_en.arb
+3
View File
@@ -253,6 +253,7 @@
"authSignInTitle": "Welcome back",
"authSignUpTitle": "Create your account",
"authSubtitle": "Sign in with your email and password.",
"authBrandTagline": "Short dramas made for Indonesia",
"authEmailLabel": "Email",
"authPasswordLabel": "Password",
"authPasswordHint": "At least 8 characters, letters and numbers",
@@ -267,6 +268,8 @@
"authGateTitle": "Sign in to continue",
"authGateMessage": "Watch history, favorites, comments and downloads need an account.",
"authGateAction": "Sign In",
"showPassword": "Show password",
"hidePassword": "Hide password",
"cancel": "Not now",
"noEpisodesYet": "No playable episodes yet.",
"networkError": "Network is unreachable. Please check your connection and retry.",
lib/l10n/app_id.arb
+3
View File
@@ -253,6 +253,7 @@
"authSignInTitle": "Selamat datang kembali",
"authSignUpTitle": "Buat akun kamu",
"authSubtitle": "Masuk dengan email dan kata sandi.",
"authBrandTagline": "Drama pendek untuk Indonesia",
"authEmailLabel": "Email",
"authPasswordLabel": "Kata sandi",
"authPasswordHint": "Minimal 8 karakter, berisi huruf dan angka",
@@ -267,6 +268,8 @@
"authGateTitle": "Masuk untuk melanjutkan",
"authGateMessage": "Riwayat tontonan, favorit, komentar, dan unduhan perlu akun.",
"authGateAction": "Masuk",
"showPassword": "Tampilkan kata sandi",
"hidePassword": "Sembunyikan kata sandi",
"cancel": "Nanti saja",
"noEpisodesYet": "Belum ada episode yang bisa diputar.",
"networkError": "Jaringan tidak tersedia. Periksa koneksi lalu coba lagi.",
lib/l10n/app_localizations.dart
+18
View File
@@ -1234,6 +1234,12 @@ abstract class AppLocalizations {
/// **'Sign in with your email and password.'**
String get authSubtitle;
/// No description provided for @authBrandTagline.
///
/// In en, this message translates to:
/// **'Short dramas made for Indonesia'**
String get authBrandTagline;
/// No description provided for @authEmailLabel.
///
/// In en, this message translates to:
@@ -1318,6 +1324,18 @@ abstract class AppLocalizations {
/// **'Sign In'**
String get authGateAction;
/// No description provided for @showPassword.
///
/// In en, this message translates to:
/// **'Show password'**
String get showPassword;
/// No description provided for @hidePassword.
///
/// In en, this message translates to:
/// **'Hide password'**
String get hidePassword;
/// No description provided for @cancel.
///
/// In en, this message translates to:
lib/l10n/app_localizations_en.dart
+9
View File
@@ -602,6 +602,9 @@ class AppLocalizationsEn extends AppLocalizations {
@override
String get authSubtitle => 'Sign in with your email and password.';
@override
String get authBrandTagline => 'Short dramas made for Indonesia';
@override
String get authEmailLabel => 'Email';
@@ -645,6 +648,12 @@ class AppLocalizationsEn extends AppLocalizations {
@override
String get authGateAction => 'Sign In';
@override
String get showPassword => 'Show password';
@override
String get hidePassword => 'Hide password';
@override
String get cancel => 'Not now';
lib/l10n/app_localizations_id.dart
+9
View File
@@ -604,6 +604,9 @@ class AppLocalizationsId extends AppLocalizations {
@override
String get authSubtitle => 'Masuk dengan email dan kata sandi.';
@override
String get authBrandTagline => 'Drama pendek untuk Indonesia';
@override
String get authEmailLabel => 'Email';
@@ -647,6 +650,12 @@ class AppLocalizationsId extends AppLocalizations {
@override
String get authGateAction => 'Masuk';
@override
String get showPassword => 'Tampilkan kata sandi';
@override
String get hidePassword => 'Sembunyikan kata sandi';
@override
String get cancel => 'Nanti saja';
lib/l10n/app_localizations_zh.dart
+9
View File
@@ -593,6 +593,9 @@ class AppLocalizationsZh extends AppLocalizations {
@override
String get authSubtitle => '用邮箱和密码登录。';
@override
String get authBrandTagline => '为印尼市场打造的短剧体验';
@override
String get authEmailLabel => '邮箱';
@@ -635,6 +638,12 @@ class AppLocalizationsZh extends AppLocalizations {
@override
String get authGateAction => '去登录';
@override
String get showPassword => '显示密码';
@override
String get hidePassword => '隐藏密码';
@override
String get cancel => '暂不';
lib/l10n/app_zh.arb
+3
View File
@@ -215,6 +215,7 @@
"authSignInTitle": "欢迎回来",
"authSignUpTitle": "创建账号",
"authSubtitle": "用邮箱和密码登录。",
"authBrandTagline": "为印尼市场打造的短剧体验",
"authEmailLabel": "邮箱",
"authPasswordLabel": "密码",
"authPasswordHint": "至少 8 位，需包含字母和数字",
@@ -229,6 +230,8 @@
"authGateTitle": "登录后可继续",
"authGateMessage": "观看记录、收藏、评论和下载需要登录。",
"authGateAction": "去登录",
"showPassword": "显示密码",
"hidePassword": "隐藏密码",
"cancel": "暂不",
"noEpisodesYet": "还没有可播放的剧集。",
"networkError": "网络异常，请检查网络后重试。",
lib/pages/auth/auth_view.dart
+239 -133
View File
@@ -1,3 +1,5 @@
// Author: fruit.com.cn
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
@@ -8,9 +10,9 @@ import '../../core/theme/app_theme.dart';
import '../../l10n/app_localizations.dart';
import 'auth_logic.dart';
const double _minTapTarget = 44;
/// 登录 / 注册页：邮箱 + 密码。
///
/// 风格沿用 FruitShorts 现有页面（深色卡片 + 圆角 + 主色蓝），不另起一套视觉。
class AuthPage extends StatefulWidget {
const AuthPage({super.key, this.signUpMode = false});
@@ -22,11 +24,29 @@ class AuthPage extends StatefulWidget {
class _AuthPageState extends State<AuthPage> {
late AuthLogic _logic;
late final TextEditingController _emailController;
late final TextEditingController _passwordController;
late final FocusNode _emailFocus;
late final FocusNode _passwordFocus;
bool _obscurePassword = true;
@override
void initState() {
super.initState();
_logic = AuthLogic(signUpMode: widget.signUpMode);
_emailController = TextEditingController();
_passwordController = TextEditingController();
_emailFocus = FocusNode(debugLabel: 'auth-email-focus');
_passwordFocus = FocusNode(debugLabel: 'auth-password-focus');
}
@override
void dispose() {
_emailController.dispose();
_passwordController.dispose();
_emailFocus.dispose();
_passwordFocus.dispose();
super.dispose();
}
String _errorText(AppLocalizations l10n, AuthFieldError error) {
@@ -51,6 +71,7 @@ class _AuthPageState extends State<AuthPage> {
setState(() => _logic.errorMessage = _errorText(l10n, invalid));
return;
}
FocusScope.of(context).unfocus();
setState(() {
_logic.busy = true;
_logic.errorMessage = null;
@@ -71,7 +92,6 @@ class _AuthPageState extends State<AuthPage> {
if (!mounted) return;
Navigator.of(context).maybePop();
} on ApiException catch (error) {
// 后端文案已经是可直接展示的中文/印尼语提示，错误码不外露
setState(() => _logic.errorMessage = error.message);
} catch (_) {
setState(() => _logic.errorMessage = l10n.authNetworkError);
@@ -86,158 +106,244 @@ class _AuthPageState extends State<AuthPage> {
return Theme(
data: AppTheme.dark(),
child: Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: AppColors.ink,
appBar: AppBar(
backgroundColor: AppColors.ink,
elevation: 0,
foregroundColor: Colors.white,
foregroundColor: AppColors.onPrimary,
title: Text(_logic.signUpMode ? l10n.signUp : l10n.signIn),
),
body: SafeArea(
child: ListView(
padding: const EdgeInsets.fromLTRB(20, 12, 20, 28),
children: [
Text(
_logic.signUpMode ? l10n.authSignUpTitle : l10n.authSignInTitle,
style: const TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.w800,
),
child: AutofillGroup(
child: ListView(
key: const Key('auth-scroll'),
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
padding: EdgeInsets.fromLTRB(
20,
12,
20,
28 + MediaQuery.viewInsetsOf(context).bottom,
),
const SizedBox(height: 6),
Text(
l10n.authSubtitle,
style: const TextStyle(color: AppColors.muted, fontSize: 13),
),
const SizedBox(height: 22),
_field(
label: l10n.authEmailLabel,
hint: 'name@example.com',
keyboardType: TextInputType.emailAddress,
onChanged: (value) => _logic.email = value,
autofocus: true,
),
const SizedBox(height: 14),
_field(
label: l10n.authPasswordLabel,
hint: l10n.authPasswordHint,
obscure: true,
onChanged: (value) => _logic.password = value,
),
if (_logic.errorMessage != null) ...[
const SizedBox(height: 12),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Icon(
Icons.error_outline,
color: Color(0xFFFF6B6B),
size: 16,
),
const SizedBox(width: 6),
Expanded(
child: Text(
_logic.errorMessage!,
style: const TextStyle(
color: Color(0xFFFF6B6B),
fontSize: 13,
),
),
),
],
),
],
const SizedBox(height: 22),
SizedBox(
height: 48,
child: FilledButton(
style: FilledButton.styleFrom(
backgroundColor: AppColors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
),
onPressed: _logic.busy ? null : _submit,
child: _logic.busy
? const SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
),
)
: Text(
_logic.signUpMode ? l10n.signUp : l10n.signIn,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
),
const SizedBox(height: 14),
TextButton(
onPressed: _logic.busy
? null
: () => setState(() => _logic.toggleMode()),
child: Text(
children: [
_AuthBrand(tagline: l10n.authBrandTagline),
const SizedBox(height: 26),
Text(
_logic.signUpMode
? l10n.authSwitchToSignIn
: l10n.authSwitchToSignUp,
? l10n.authSignUpTitle
: l10n.authSignInTitle,
style: const TextStyle(
color: AppColors.blueSoft,
fontSize: 13,
color: AppColors.onPrimary,
fontSize: 24,
fontWeight: FontWeight.w800,
),
),
),
],
const SizedBox(height: 6),
Text(
l10n.authSubtitle,
style: const TextStyle(color: AppColors.muted, fontSize: 13),
),
const SizedBox(height: 22),
_emailField(l10n),
const SizedBox(height: 14),
_passwordField(l10n),
if (_logic.errorMessage != null) ...[
const SizedBox(height: 12),
_AuthError(message: _logic.errorMessage!),
],
const SizedBox(height: 22),
_submitButton(l10n),
const SizedBox(height: 10),
_switchModeButton(l10n),
],
),
),
),
),
);
}
Widget _field({
required String label,
required String hint,
required ValueChanged<String> onChanged,
bool obscure = false,
bool autofocus = false,
TextInputType? keyboardType,
}) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: const TextStyle(
Widget _emailField(AppLocalizations l10n) => _field(
child: TextField(
key: const Key('auth-email'),
controller: _emailController,
focusNode: _emailFocus,
enabled: !_logic.busy,
autofocus: true,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
autofillHints: const [AutofillHints.email],
onChanged: (value) => _logic.email = value,
onSubmitted: (_) => _passwordFocus.requestFocus(),
style: const TextStyle(color: AppColors.onPrimary, fontSize: 15),
decoration: _decoration(l10n.authEmailLabel, 'name@example.com'),
),
);
Widget _passwordField(AppLocalizations l10n) => _field(
child: TextField(
key: const Key('auth-password'),
controller: _passwordController,
focusNode: _passwordFocus,
enabled: !_logic.busy,
obscureText: _obscurePassword,
keyboardType: TextInputType.visiblePassword,
textInputAction: TextInputAction.done,
autofillHints: const [AutofillHints.password],
onChanged: (value) => _logic.password = value,
onSubmitted: (_) => _submit(),
style: const TextStyle(color: AppColors.onPrimary, fontSize: 15),
decoration: _decoration(
l10n.authPasswordLabel,
l10n.authPasswordHint,
suffix: IconButton(
key: const Key('auth-password-visibility'),
constraints: const BoxConstraints.tightFor(
width: _minTapTarget,
height: _minTapTarget,
),
tooltip: _obscurePassword ? l10n.showPassword : l10n.hidePassword,
onPressed: _logic.busy
? null
: () => setState(() => _obscurePassword = !_obscurePassword),
icon: Icon(
_obscurePassword
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
color: AppColors.muted,
fontSize: 12,
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 6),
TextField(
autofocus: autofocus,
obscureText: obscure,
keyboardType: keyboardType,
onChanged: onChanged,
style: const TextStyle(color: Colors.white, fontSize: 15),
decoration: InputDecoration(
hintText: hint,
hintStyle: const TextStyle(color: Color(0xFF6C7280), fontSize: 14),
filled: true,
fillColor: AppColors.card,
contentPadding: const EdgeInsets.symmetric(
horizontal: 14,
vertical: 14,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
),
);
Widget _field({required Widget child}) =>
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [child]);
InputDecoration _decoration(String label, String hint, {Widget? suffix}) {
final scheme = Theme.of(context).colorScheme;
return InputDecoration(
labelText: label,
hintText: hint,
hintStyle: TextStyle(color: scheme.onSurfaceVariant, fontSize: 14),
suffixIcon: suffix,
filled: true,
fillColor: AppColors.card,
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 17),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: scheme.primary, width: 1.5),
),
);
}
Widget _submitButton(AppLocalizations l10n) => SizedBox(
height: 50,
child: FilledButton(
key: const Key('auth-submit'),
onPressed: _logic.busy ? null : _submit,
style: FilledButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
),
child: _logic.busy
? const SizedBox.square(
dimension: 18,
child: CircularProgressIndicator(
strokeWidth: 2,
color: AppColors.onPrimary,
),
)
: Text(
_logic.signUpMode ? l10n.signUp : l10n.signIn,
style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w700),
),
),
);
Widget _switchModeButton(AppLocalizations l10n) => TextButton(
key: const Key('auth-switch-mode'),
style: TextButton.styleFrom(
minimumSize: const Size(0, _minTapTarget),
foregroundColor: AppColors.blueSoft,
),
onPressed: _logic.busy ? null : () => setState(() => _logic.toggleMode()),
child: Text(
_logic.signUpMode ? l10n.authSwitchToSignIn : l10n.authSwitchToSignUp,
style: const TextStyle(fontSize: 13),
),
);
}
class _AuthBrand extends StatelessWidget {
const _AuthBrand({required this.tagline});
final String tagline;
@override
Widget build(BuildContext context) {
return Row(
children: [
Container(
width: 48,
height: 48,
decoration: const BoxDecoration(
color: AppColors.blue,
shape: BoxShape.circle,
),
child: const Icon(
Icons.play_arrow_rounded,
color: AppColors.onPrimary,
size: 30,
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
AppLocalizations.of(context)!.appName,
style: const TextStyle(
color: AppColors.onPrimary,
fontSize: 20,
fontWeight: FontWeight.w800,
),
),
const SizedBox(height: 2),
Text(
tagline,
style: const TextStyle(color: AppColors.blueSoft, fontSize: 12),
),
],
),
),
],
);
}
}
class _AuthError extends StatelessWidget {
const _AuthError({required this.message});
final String message;
@override
Widget build(BuildContext context) {
final color = Theme.of(context).colorScheme.error;
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.error_outline, color: color, size: 18),
const SizedBox(width: 6),
Expanded(
child: Text(
message,
key: const Key('auth-error'),
style: TextStyle(color: color, fontSize: 13),
),
),
],
lib/pages/home/home_view.dart
+51 -35
View File
@@ -118,7 +118,7 @@ class _HomeTabsState extends State<_HomeTabs> {
},
child: Scaffold(
key: logic.scaffoldKey,
backgroundColor: const Color(0xFF0B0C10),
backgroundColor: AppColors.ink,
drawer: HomeQuickDrawer(
drama: logic.currentDrama,
onOpenSeries: () => logic.openCurrentSeries(context),
@@ -183,12 +183,17 @@ class _HomeTabsState extends State<_HomeTabs> {
? null
: SafeArea(
top: false,
minimum: const EdgeInsets.only(bottom: 2),
child: Container(
key: const Key('home-tabs-bar'),
height: 63,
decoration: const BoxDecoration(
color: Color(0xFF0D0D11),
border: Border(top: BorderSide(color: Color(0xFF242329))),
height: 64,
decoration: BoxDecoration(
color: AppColors.bar,
border: Border(
top: BorderSide(
color: Theme.of(context).colorScheme.outlineVariant,
),
),
),
child: Row(
children: [
@@ -250,37 +255,48 @@ class _TabButton extends StatelessWidget {
@override
Widget build(BuildContext context) => Expanded(
child: InkWell(
onTap: onTap,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 3),
decoration: selected
? BoxDecoration(
color: AppColors.bluePressed,
borderRadius: BorderRadius.circular(14),
)
: null,
child: Icon(
selected ? selectedIcon : icon,
size: 20,
color: selected ? Colors.white : AppColors.muted,
),
child: Semantics(
button: true,
selected: selected,
label: label,
child: InkWell(
onTap: onTap,
child: ConstrainedBox(
constraints: const BoxConstraints(minHeight: 48),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedContainer(
duration: const Duration(milliseconds: 160),
curve: Curves.easeOut,
padding: const EdgeInsets.symmetric(
horizontal: 14,
vertical: 3,
),
decoration: BoxDecoration(
color: selected ? AppColors.bluePressed : null,
borderRadius: BorderRadius.circular(14),
),
child: Icon(
selected ? selectedIcon : icon,
size: 22,
color: selected ? AppColors.onPrimary : AppColors.muted,
),
),
const SizedBox(height: 2),
Text(
label,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 10,
fontWeight: selected ? FontWeight.w700 : FontWeight.w500,
color: selected ? AppColors.blueSoft : AppColors.muted,
),
),
],
),
const SizedBox(height: 2),
Text(
label,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 10,
fontWeight: selected ? FontWeight.w700 : FontWeight.w500,
color: selected ? AppColors.blueSoft : AppColors.muted,
),
),
],
),
),
),
);