feat(flutter): add auth module with router and screens

- Add app_router.dart with auth routes (login, register) - Update main.dart with MaterialApp.router - Add 5 auth screens: - LoginEmailScreen with email validation - LoginPasswordScreen with password visibility toggle - LoginCodeScreen with verification code input - RegisterScreen with step indicator - RegisterStep2Screen with password/code/invite inputs
2026-02-25 10:57:43 +08:00
parent 8c0b0a25c3
commit 4fb90de1f5
7 changed files with 1016 additions and 0 deletions
@@ -0,0 +1,170 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import '../../../../core/theme/design_tokens.dart';
+import '../../../../shared/widgets/app_button.dart';
+import '../../../../shared/widgets/warning_banner.dart';
+import '../../../../shared/utils/validators.dart';
+
+class LoginEmailScreen extends StatefulWidget {
+  const LoginEmailScreen({super.key});
+
+  @override
+  State<LoginEmailScreen> createState() => _LoginEmailScreenState();
+}
+
+class _LoginEmailScreenState extends State<LoginEmailScreen> {
+  final _emailController = TextEditingController();
+  bool _showWarning = false;
+  String _warningMessage = '';
+
+  @override
+  void dispose() {
+    _emailController.dispose();
+    super.dispose();
+  }
+
+  void _handleContinue() {
+    final error = Validators.email(_emailController.text);
+    if (error != null) {
+      setState(() {
+        _showWarning = true;
+        _warningMessage = error;
+      });
+      return;
+    }
+    setState(() {
+      _showWarning = false;
+    });
+    context.push('/login/password');
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: AppColors.background,
+      body: SafeArea(
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 24),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Expanded(
+                child: Center(
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      _buildAppIcon(),
+                      const SizedBox(height: 24),
+                      _buildAppTitle(),
+                      const SizedBox(height: 32),
+                      _buildFormContainer(),
+                    ],
+                  ),
+                ),
+              ),
+              _buildFooter(),
+              const SizedBox(height: 24),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAppIcon() {
+    return Container(
+      width: 104,
+      height: 104,
+      decoration: BoxDecoration(
+        color: AppColors.appIconRing,
+        borderRadius: BorderRadius.circular(52),
+        border: Border.all(color: AppColors.appIconBorder, width: 1),
+      ),
+      child: Center(
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(38),
+          child: Image.asset(
+            'assets/images/logo.png',
+            width: 76,
+            height: 76,
+            fit: BoxFit.cover,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAppTitle() {
+    return const Text(
+      'linksy',
+      style: TextStyle(
+        fontFamily: 'Playfair Display',
+        fontSize: 34,
+        fontWeight: FontWeight.w700,
+        fontStyle: FontStyle.italic,
+        color: AppColors.appTitle,
+        letterSpacing: 0.5,
+      ),
+    );
+  }
+
+  Widget _buildFormContainer() {
+    return SizedBox(
+      width: 327,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const Text(
+                '邮箱',
+                style: TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w500,
+                  color: AppColors.foreground,
+                ),
+              ),
+              const SizedBox(height: 6),
+              TextField(
+                controller: _emailController,
+                keyboardType: TextInputType.emailAddress,
+                decoration: const InputDecoration(hintText: '请输入邮箱'),
+              ),
+            ],
+          ),
+          const SizedBox(height: 12),
+          WarningBanner(message: _warningMessage, visible: _showWarning),
+          const SizedBox(height: 16),
+          AppButton(text: '继续', onPressed: _handleContinue),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildFooter() {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        GestureDetector(
+          onTap: () => context.push('/register'),
+          child: const Text(
+            '还没有账号？去注册',
+            style: TextStyle(
+              fontSize: 14,
+              fontWeight: FontWeight.w500,
+              color: AppColors.slate500,
+            ),
+          ),
+        ),
+        const SizedBox(height: 12),
+        const Text(
+          '隐私政策 | 服务条款',
+          style: TextStyle(fontSize: 12, color: AppColors.slate400),
+        ),
+      ],
+    );
+  }
+}