From 3be10493a0f39b7754089af85ec6cafbbbaabf66 Mon Sep 17 00:00:00 2001 From: hailin Date: Sun, 21 Dec 2025 03:10:40 -0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=90=91?= =?UTF-8?q?=E5=AF=BC=E9=A1=B5=E6=8E=A8=E8=8D=90=E7=A0=81=E8=BE=93=E5=85=A5?= =?UTF-8?q?=E6=A1=86=E5=92=8C=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 向导页优化： - 推荐码输入框改为透明底部边框设计，更好融入背景 - 增大输入框高度和字体大小，提升可读性 - 扫码图标改为白色，尺寸加大至 28sp - 输入文字改为白色，与背景形成对比 恢复账号页面改版： - 标题改为"恢复账号"并居中显示 - 移除副标题，界面更简洁 - 背景改为金色渐变，与 App 整体风格一致 - 登录按钮改为白色背景+深金色文字 - 优化所有输入框和文字颜色以适配金色背景 - "立即注册"文字改为白色带下划线 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- .../auth/presentation/pages/guide_page.dart | 36 +++--- .../presentation/pages/phone_login_page.dart | 106 ++++++++++-------- 2 files changed, 74 insertions(+), 68 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 ae2a20ca..6e422a39 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 @@ -584,13 +584,13 @@ class _WelcomePageContentState extends ConsumerState<_WelcomePageContent> { children: [ // 推荐码输入框 - 支持手动输入和扫码 Container( - padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 16.w), + padding: EdgeInsets.symmetric(vertical: 16.h, horizontal: 4.w), decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.9), // 改为更不透明的背景 - borderRadius: BorderRadius.circular(12.r), - border: Border.all( - color: const Color(0xFF4CAF50), // 绿色边框 - width: 1.5, + border: Border( + bottom: BorderSide( + color: Colors.white.withValues(alpha: 0.8), + width: 2, + ), ), ), child: Row( @@ -601,33 +601,31 @@ class _WelcomePageContentState extends ConsumerState<_WelcomePageContent> { decoration: InputDecoration( hintText: '请输入推荐码或点击右侧扫码', hintStyle: TextStyle( - fontSize: 15.sp, - color: Colors.grey[500], // 改为灰色提示文字 + fontSize: 16.sp, + color: Colors.white.withValues(alpha: 0.6), ), border: InputBorder.none, - isDense: true, - contentPadding: EdgeInsets.zero, + isDense: false, + contentPadding: EdgeInsets.symmetric(vertical: 4.h), ), style: TextStyle( - fontSize: 16.sp, - color: Colors.black, // 黑色文字，与底色反色 - fontWeight: FontWeight.w500, + fontSize: 17.sp, + color: Colors.white, + fontWeight: FontWeight.w600, + letterSpacing: 0.5, ), ), ), + SizedBox(width: 16.w), // 扫码按钮 GestureDetector( onTap: _openQrScanner, child: Container( padding: EdgeInsets.all(8.w), - decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(8.r), - ), child: Icon( Icons.qr_code_scanner, - size: 20.sp, - color: Colors.black, + size: 28.sp, + color: Colors.white, ), ), ), 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 91d9116c..abf77a7f 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 @@ -131,12 +131,14 @@ class _PhoneLoginPageState extends ConsumerState { body: Container( decoration: const BoxDecoration( gradient: LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, + begin: Alignment.topLeft, + end: Alignment.bottomRight, colors: [ - Color(0xFF1A1A2E), - Color(0xFF16213E), + Color(0xFFD4A84B), + Color(0xFFB8860B), + Color(0xFFD4A84B), ], + stops: [0.0, 0.5, 1.0], ), ), child: SafeArea( @@ -151,22 +153,23 @@ class _PhoneLoginPageState extends ConsumerState { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - SizedBox(height: 40.h), - // 标题 - Text( - '手机号+密码登录', - style: TextStyle( - fontSize: 32.sp, - fontWeight: FontWeight.bold, - color: Colors.white, - ), - ), - SizedBox(height: 8.h), - Text( - '输入您的手机号和密码', - style: TextStyle( - fontSize: 16.sp, - color: Colors.white.withOpacity(0.6), + 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), @@ -213,7 +216,7 @@ class _PhoneLoginPageState extends ConsumerState { width: 40.w, height: 40.w, decoration: BoxDecoration( - color: Colors.white.withOpacity(0.1), + color: Colors.white.withValues(alpha: 0.25), borderRadius: BorderRadius.circular(12.r), ), child: Icon( @@ -237,18 +240,18 @@ class _PhoneLoginPageState extends ConsumerState { '手机号', style: TextStyle( fontSize: 14.sp, - color: Colors.white.withOpacity(0.8), - fontWeight: FontWeight.w500, + color: Colors.white.withValues(alpha: 0.95), + fontWeight: FontWeight.w600, ), ), SizedBox(height: 8.h), Container( decoration: BoxDecoration( - color: Colors.white.withOpacity(0.1), + color: Colors.white.withValues(alpha: 0.2), borderRadius: BorderRadius.circular(12.r), border: Border.all( - color: Colors.white.withOpacity(0.2), - width: 1, + color: Colors.white.withValues(alpha: 0.4), + width: 1.5, ), ), child: TextField( @@ -267,7 +270,7 @@ class _PhoneLoginPageState extends ConsumerState { hintText: '请输入手机号', hintStyle: TextStyle( fontSize: 16.sp, - color: Colors.white.withOpacity(0.4), + color: Colors.white.withValues(alpha: 0.5), ), border: InputBorder.none, contentPadding: EdgeInsets.symmetric( @@ -276,7 +279,7 @@ class _PhoneLoginPageState extends ConsumerState { ), prefixIcon: Icon( Icons.phone_android, - color: Colors.white.withOpacity(0.6), + color: Colors.white.withValues(alpha: 0.8), size: 20.sp, ), ), @@ -300,18 +303,18 @@ class _PhoneLoginPageState extends ConsumerState { '密码', style: TextStyle( fontSize: 14.sp, - color: Colors.white.withOpacity(0.8), - fontWeight: FontWeight.w500, + color: Colors.white.withValues(alpha: 0.95), + fontWeight: FontWeight.w600, ), ), SizedBox(height: 8.h), Container( decoration: BoxDecoration( - color: Colors.white.withOpacity(0.1), + color: Colors.white.withValues(alpha: 0.2), borderRadius: BorderRadius.circular(12.r), border: Border.all( - color: Colors.white.withOpacity(0.2), - width: 1, + color: Colors.white.withValues(alpha: 0.4), + width: 1.5, ), ), child: TextField( @@ -326,7 +329,7 @@ class _PhoneLoginPageState extends ConsumerState { hintText: '请输入密码', hintStyle: TextStyle( fontSize: 16.sp, - color: Colors.white.withOpacity(0.4), + color: Colors.white.withValues(alpha: 0.5), ), border: InputBorder.none, contentPadding: EdgeInsets.symmetric( @@ -335,7 +338,7 @@ class _PhoneLoginPageState extends ConsumerState { ), prefixIcon: Icon( Icons.lock_outline, - color: Colors.white.withOpacity(0.6), + color: Colors.white.withValues(alpha: 0.8), size: 20.sp, ), suffixIcon: GestureDetector( @@ -346,7 +349,7 @@ class _PhoneLoginPageState extends ConsumerState { }, child: Icon( _obscurePassword ? Icons.visibility_off : Icons.visibility, - color: Colors.white.withOpacity(0.6), + color: Colors.white.withValues(alpha: 0.8), size: 20.sp, ), ), @@ -410,13 +413,14 @@ class _PhoneLoginPageState extends ConsumerState { onPressed: canLogin ? _login : null, style: ElevatedButton.styleFrom( backgroundColor: canLogin - ? const Color(0xFFD4AF37) - : Colors.white.withOpacity(0.2), - disabledBackgroundColor: Colors.white.withOpacity(0.2), + ? Colors.white + : Colors.white.withValues(alpha: 0.3), + disabledBackgroundColor: Colors.white.withValues(alpha: 0.3), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12.r), ), - elevation: 0, + elevation: canLogin ? 4 : 0, + shadowColor: Colors.black.withValues(alpha: 0.3), ), child: _isLoggingIn ? SizedBox( @@ -424,15 +428,15 @@ class _PhoneLoginPageState extends ConsumerState { height: 20.h, child: const CircularProgressIndicator( strokeWidth: 2, - valueColor: AlwaysStoppedAnimation(Colors.white), + valueColor: AlwaysStoppedAnimation(Color(0xFFB8860B)), ), ) : Text( '登录', style: TextStyle( fontSize: 16.sp, - fontWeight: FontWeight.w600, - color: canLogin ? Colors.white : Colors.white.withOpacity(0.4), + fontWeight: FontWeight.w700, + color: canLogin ? const Color(0xFFB8860B) : Colors.white.withValues(alpha: 0.5), ), ), ), @@ -445,7 +449,7 @@ class _PhoneLoginPageState extends ConsumerState { children: [ Expanded( child: Divider( - color: Colors.white.withOpacity(0.2), + color: Colors.white.withValues(alpha: 0.4), thickness: 1, ), ), @@ -455,13 +459,14 @@ class _PhoneLoginPageState extends ConsumerState { '或', style: TextStyle( fontSize: 14.sp, - color: Colors.white.withOpacity(0.5), + color: Colors.white.withValues(alpha: 0.7), + fontWeight: FontWeight.w500, ), ), ), Expanded( child: Divider( - color: Colors.white.withOpacity(0.2), + color: Colors.white.withValues(alpha: 0.4), thickness: 1, ), ), @@ -479,7 +484,8 @@ class _PhoneLoginPageState extends ConsumerState { '还没有账号？', style: TextStyle( fontSize: 14.sp, - color: Colors.white.withOpacity(0.6), + color: Colors.white.withValues(alpha: 0.8), + fontWeight: FontWeight.w500, ), ), SizedBox(width: 4.w), @@ -492,8 +498,10 @@ class _PhoneLoginPageState extends ConsumerState { '立即注册', style: TextStyle( fontSize: 14.sp, - color: const Color(0xFFD4AF37), - fontWeight: FontWeight.w600, + color: Colors.white, + fontWeight: FontWeight.w700, + decoration: TextDecoration.underline, + decorationColor: Colors.white, ), ), ),