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

lib/pages/auth/auth_view.dart

@@ -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),
           ),
         ),
       ],