From 6b0194089a596cfc67cd0a1630b84f42a11bf482 Mon Sep 17 00:00:00 2001 From: hailin Date: Sun, 21 Dec 2025 03:29:03 -0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=8E=A8=E8=8D=90?= =?UTF-8?q?=E7=A0=81=E6=96=87=E5=AD=97=E5=8F=AF=E8=A7=81=E6=80=A7=E5=92=8C?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=81=A2=E5=A4=8D=E8=B4=A6=E5=8F=B7=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 向导页修复： - 推荐码输入文字改为金黄色(#FFD700)，与白色底边框形成对比 恢复账号页面重构： - 背景改为白色，与手机号注册等页面保持一致 - 添加标准 AppBar，标题居中显示"恢复账号" - 输入框改为完全透明底部边框设计，与外部容器无感融合 - 文字颜色与底色反色：深灰色(#333333) - 登录按钮改为金色背景(#D4A84B) + 白色文字 - 更新所有颜色以适配白色背景主题 - "立即注册"文字改为金色 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- .../auth/presentation/pages/guide_page.dart | 2 +- .../presentation/pages/phone_login_page.dart | 285 ++++++++---------- 2 files changed, 125 insertions(+), 162 deletions(-) diff --git a/frontend/mobile-app/lib/features/auth/presentation/pages/guide_page.dart b/frontend/mobile-app/lib/features/auth/presentation/pages/guide_page.dart index 6e422a39..42a44e91 100644 --- a/frontend/mobile-app/lib/features/auth/presentation/pages/guide_page.dart +++ b/frontend/mobile-app/lib/features/auth/presentation/pages/guide_page.dart @@ -610,7 +610,7 @@ class _WelcomePageContentState extends ConsumerState<_WelcomePageContent> { ), style: TextStyle( fontSize: 17.sp, - color: Colors.white, + color: const Color(0xFFFFD700), fontWeight: FontWeight.w600, letterSpacing: 0.5, ), diff --git a/frontend/mobile-app/lib/features/auth/presentation/pages/phone_login_page.dart b/frontend/mobile-app/lib/features/auth/presentation/pages/phone_login_page.dart index abf77a7f..f4c2d9fd 100644 --- a/frontend/mobile-app/lib/features/auth/presentation/pages/phone_login_page.dart +++ b/frontend/mobile-app/lib/features/auth/presentation/pages/phone_login_page.dart @@ -128,105 +128,74 @@ class _PhoneLoginPageState extends ConsumerState { @override Widget build(BuildContext context) { return Scaffold( - body: Container( - decoration: const BoxDecoration( - gradient: LinearGradient( - begin: Alignment.topLeft, - end: Alignment.bottomRight, - colors: [ - Color(0xFFD4A84B), - Color(0xFFB8860B), - Color(0xFFD4A84B), - ], - stops: [0.0, 0.5, 1.0], + backgroundColor: Colors.white, + appBar: AppBar( + backgroundColor: Colors.white, + elevation: 0, + leading: IconButton( + icon: const Icon(Icons.arrow_back_ios, color: Color(0xFF333333)), + onPressed: () => context.pop(), + ), + title: Text( + '恢复账号', + style: TextStyle( + fontSize: 18.sp, + fontWeight: FontWeight.w600, + color: const Color(0xFF333333), ), ), + centerTitle: true, + ), + body: GestureDetector( + onTap: () => FocusScope.of(context).unfocus(), child: SafeArea( - child: Column( - children: [ - // 顶部导航栏 - _buildAppBar(), - // 表单内容 - Expanded( - child: SingleChildScrollView( - padding: EdgeInsets.symmetric(horizontal: 24.w), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox(height: 60.h), - // 标题 - 居中显示 - Center( - child: Text( - '恢复账号', - style: TextStyle( - fontSize: 32.sp, - fontWeight: FontWeight.bold, - color: Colors.white, - shadows: [ - Shadow( - color: Colors.black.withValues(alpha: 0.3), - blurRadius: 8, - offset: const Offset(0, 2), - ), - ], - ), - ), - ), - SizedBox(height: 48.h), - // 手机号输入框 - _buildPhoneInput(), - SizedBox(height: 16.h), - // 密码输入框 - _buildPasswordInput(), - // 错误提示 - if (_errorMessage != null) ...[ - SizedBox(height: 16.h), - _buildErrorMessage(), - ], - SizedBox(height: 32.h), - // 登录按钮 - _buildLoginButton(), - SizedBox(height: 24.h), - // 分割线和提示 - _buildDivider(), - SizedBox(height: 24.h), - // 注册提示 - _buildRegisterHint(), - ], + child: Padding( + padding: EdgeInsets.symmetric(horizontal: 24.w), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(height: 32.h), + // 标题 + Text( + '手机号+密码登录', + style: TextStyle( + fontSize: 24.sp, + fontWeight: FontWeight.w700, + color: const Color(0xFF333333), ), ), - ), - ], - ), - ), - ), - ); - } - - /// 构建顶部导航栏 - Widget _buildAppBar() { - return Container( - height: 56.h, - padding: EdgeInsets.symmetric(horizontal: 16.w), - child: Row( - children: [ - GestureDetector( - onTap: () => context.pop(), - child: Container( - width: 40.w, - height: 40.w, - decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.25), - borderRadius: BorderRadius.circular(12.r), - ), - child: Icon( - Icons.arrow_back, - color: Colors.white, - size: 20.sp, - ), + SizedBox(height: 8.h), + Text( + '输入您的手机号和密码', + style: TextStyle( + fontSize: 14.sp, + color: const Color(0xFF999999), + ), + ), + SizedBox(height: 32.h), + // 手机号输入框 + _buildPhoneInput(), + SizedBox(height: 16.h), + // 密码输入框 + _buildPasswordInput(), + // 错误提示 + if (_errorMessage != null) ...[ + SizedBox(height: 16.h), + _buildErrorMessage(), + ], + SizedBox(height: 32.h), + // 登录按钮 + _buildLoginButton(), + SizedBox(height: 24.h), + // 分割线和提示 + _buildDivider(), + SizedBox(height: 24.h), + // 注册提示 + _buildRegisterHint(), + ], ), ), - ], + ), ), ); } @@ -240,18 +209,19 @@ class _PhoneLoginPageState extends ConsumerState { '手机号', style: TextStyle( fontSize: 14.sp, - color: Colors.white.withValues(alpha: 0.95), + color: const Color(0xFF666666), fontWeight: FontWeight.w600, ), ), SizedBox(height: 8.h), Container( + padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 0), decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(12.r), - border: Border.all( - color: Colors.white.withValues(alpha: 0.4), - width: 1.5, + border: Border( + bottom: BorderSide( + color: const Color(0xFFE0E0E0), + width: 1, + ), ), ), child: TextField( @@ -264,24 +234,18 @@ class _PhoneLoginPageState extends ConsumerState { ], style: TextStyle( fontSize: 16.sp, - color: Colors.white, + color: const Color(0xFF333333), + fontWeight: FontWeight.w500, ), decoration: InputDecoration( hintText: '请输入手机号', hintStyle: TextStyle( fontSize: 16.sp, - color: Colors.white.withValues(alpha: 0.5), + color: const Color(0xFFCCCCCC), ), border: InputBorder.none, - contentPadding: EdgeInsets.symmetric( - horizontal: 16.w, - vertical: 14.h, - ), - prefixIcon: Icon( - Icons.phone_android, - color: Colors.white.withValues(alpha: 0.8), - size: 20.sp, - ), + isDense: false, + contentPadding: EdgeInsets.zero, ), onChanged: (_) { if (_errorMessage != null) { @@ -303,45 +267,53 @@ class _PhoneLoginPageState extends ConsumerState { '密码', style: TextStyle( fontSize: 14.sp, - color: Colors.white.withValues(alpha: 0.95), + color: const Color(0xFF666666), fontWeight: FontWeight.w600, ), ), SizedBox(height: 8.h), Container( + padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 0), decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(12.r), - border: Border.all( - color: Colors.white.withValues(alpha: 0.4), - width: 1.5, + border: Border( + bottom: BorderSide( + color: const Color(0xFFE0E0E0), + width: 1, + ), ), ), - child: TextField( - controller: _passwordController, - focusNode: _passwordFocusNode, - obscureText: _obscurePassword, - style: TextStyle( - fontSize: 16.sp, - color: Colors.white, - ), - decoration: InputDecoration( - hintText: '请输入密码', - hintStyle: TextStyle( - fontSize: 16.sp, - color: Colors.white.withValues(alpha: 0.5), + child: Row( + children: [ + Expanded( + child: TextField( + controller: _passwordController, + focusNode: _passwordFocusNode, + obscureText: _obscurePassword, + style: TextStyle( + fontSize: 16.sp, + color: const Color(0xFF333333), + fontWeight: FontWeight.w500, + ), + decoration: InputDecoration( + hintText: '请输入密码', + hintStyle: TextStyle( + fontSize: 16.sp, + color: const Color(0xFFCCCCCC), + ), + border: InputBorder.none, + isDense: false, + contentPadding: EdgeInsets.zero, + ), + onChanged: (_) { + if (_errorMessage != null) { + setState(() => _errorMessage = null); + } + }, + onSubmitted: (_) => _login(), + ), ), - border: InputBorder.none, - contentPadding: EdgeInsets.symmetric( - horizontal: 16.w, - vertical: 14.h, - ), - prefixIcon: Icon( - Icons.lock_outline, - color: Colors.white.withValues(alpha: 0.8), - size: 20.sp, - ), - suffixIcon: GestureDetector( + // 密码可见性切换按钮 + GestureDetector( onTap: () { setState(() { _obscurePassword = !_obscurePassword; @@ -349,17 +321,11 @@ class _PhoneLoginPageState extends ConsumerState { }, child: Icon( _obscurePassword ? Icons.visibility_off : Icons.visibility, - color: Colors.white.withValues(alpha: 0.8), + color: const Color(0xFF999999), size: 20.sp, ), ), - ), - onChanged: (_) { - if (_errorMessage != null) { - setState(() => _errorMessage = null); - } - }, - onSubmitted: (_) => _login(), + ], ), ), ], @@ -413,14 +379,13 @@ class _PhoneLoginPageState extends ConsumerState { onPressed: canLogin ? _login : null, style: ElevatedButton.styleFrom( backgroundColor: canLogin - ? Colors.white - : Colors.white.withValues(alpha: 0.3), - disabledBackgroundColor: Colors.white.withValues(alpha: 0.3), + ? const Color(0xFFD4A84B) + : const Color(0xFFE0E0E0), + disabledBackgroundColor: const Color(0xFFE0E0E0), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12.r), ), - elevation: canLogin ? 4 : 0, - shadowColor: Colors.black.withValues(alpha: 0.3), + elevation: 0, ), child: _isLoggingIn ? SizedBox( @@ -428,7 +393,7 @@ class _PhoneLoginPageState extends ConsumerState { height: 20.h, child: const CircularProgressIndicator( strokeWidth: 2, - valueColor: AlwaysStoppedAnimation(Color(0xFFB8860B)), + valueColor: AlwaysStoppedAnimation(Colors.white), ), ) : Text( @@ -436,7 +401,7 @@ class _PhoneLoginPageState extends ConsumerState { style: TextStyle( fontSize: 16.sp, fontWeight: FontWeight.w700, - color: canLogin ? const Color(0xFFB8860B) : Colors.white.withValues(alpha: 0.5), + color: canLogin ? Colors.white : const Color(0xFFCCCCCC), ), ), ), @@ -449,7 +414,7 @@ class _PhoneLoginPageState extends ConsumerState { children: [ Expanded( child: Divider( - color: Colors.white.withValues(alpha: 0.4), + color: const Color(0xFFE0E0E0), thickness: 1, ), ), @@ -459,14 +424,14 @@ class _PhoneLoginPageState extends ConsumerState { '或', style: TextStyle( fontSize: 14.sp, - color: Colors.white.withValues(alpha: 0.7), + color: const Color(0xFF999999), fontWeight: FontWeight.w500, ), ), ), Expanded( child: Divider( - color: Colors.white.withValues(alpha: 0.4), + color: const Color(0xFFE0E0E0), thickness: 1, ), ), @@ -484,7 +449,7 @@ class _PhoneLoginPageState extends ConsumerState { '还没有账号？', style: TextStyle( fontSize: 14.sp, - color: Colors.white.withValues(alpha: 0.8), + color: const Color(0xFF999999), fontWeight: FontWeight.w500, ), ), @@ -498,10 +463,8 @@ class _PhoneLoginPageState extends ConsumerState { '立即注册', style: TextStyle( fontSize: 14.sp, - color: Colors.white, + color: const Color(0xFFD4A84B), fontWeight: FontWeight.w700, - decoration: TextDecoration.underline, - decorationColor: Colors.white, ), ), ),