hailin
/
rwadurian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 优化向导页推荐码输入框和恢复账号页面设计 

向导页优化：
- 推荐码输入框改为透明底部边框设计，更好融入背景
- 增大输入框高度和字体大小，提升可读性
- 扫码图标改为白色，尺寸加大至 28sp
- 输入文字改为白色，与背景形成对比

恢复账号页面改版：
- 标题改为"恢复账号"并居中显示
- 移除副标题，界面更简洁
- 背景改为金色渐变，与 App 整体风格一致
- 登录按钮改为白色背景+深金色文字
- 优化所有输入框和文字颜色以适配金色背景
- "立即注册"文字改为白色带下划线

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
hailin 2025-12-21 03:10:40 -08:00
parent eee8f38ea6
commit 3be10493a0
2 changed files with 74 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/mobile-app/lib/features/auth/presentation/pages/guide_page.dart
View File

@ -584,13 +584,13 @@ class _WelcomePageContentState extends ConsumerState<_WelcomePageContent> {
children: [ children: [
// 推荐码输入框 - 支持手动输入和扫码 // 推荐码输入框 - 支持手动输入和扫码
Container( Container(
padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 16.w), padding: EdgeInsets.symmetric(vertical: 16.h, horizontal: 4.w),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.9), // 改为更不透明的背景 border: Border(
borderRadius: BorderRadius.circular(12.r), bottom: BorderSide(
border: Border.all( color: Colors.white.withValues(alpha: 0.8),
color: const Color(0xFF4CAF50), // 绿色边框 width: 2,
width: 1.5, ),
), ),
), ),
child: Row( child: Row(
@ -601,33 +601,31 @@ class _WelcomePageContentState extends ConsumerState<_WelcomePageContent> {
decoration: InputDecoration( decoration: InputDecoration(
hintText: '请输入推荐码或点击右侧扫码', hintText: '请输入推荐码或点击右侧扫码',
hintStyle: TextStyle( hintStyle: TextStyle(
fontSize: 15.sp, fontSize: 16.sp,
color: Colors.grey[500], // 改为灰色提示文字 color: Colors.white.withValues(alpha: 0.6),
), ),
border: InputBorder.none, border: InputBorder.none,
isDense: true, isDense: false,
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.symmetric(vertical: 4.h),
), ),
style: TextStyle( style: TextStyle(
fontSize: 16.sp, fontSize: 17.sp,
color: Colors.black, // 黑色文字，与底色反色 color: Colors.white,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w600,
letterSpacing: 0.5,
), ),
), ),
), ),
SizedBox(width: 16.w),
// 扫码按钮 // 扫码按钮
GestureDetector( GestureDetector(
onTap: _openQrScanner, onTap: _openQrScanner,
child: Container( child: Container(
padding: EdgeInsets.all(8.w), padding: EdgeInsets.all(8.w),
decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(8.r),
),
child: Icon( child: Icon(
Icons.qr_code_scanner, Icons.qr_code_scanner,
size: 20.sp, size: 28.sp,
color: Colors.black, color: Colors.white,
), ),
), ),
), ),

106
frontend/mobile-app/lib/features/auth/presentation/pages/phone_login_page.dart
View File

@ -131,12 +131,14 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
body: Container( body: Container(
decoration: const BoxDecoration( decoration: const BoxDecoration(
gradient: LinearGradient( gradient: LinearGradient(
begin: Alignment.topCenter, begin: Alignment.topLeft,
end: Alignment.bottomCenter, end: Alignment.bottomRight,
colors: [ colors: [
Color(0xFF1A1A2E), Color(0xFFD4A84B),
Color(0xFF16213E), Color(0xFFB8860B),
Color(0xFFD4A84B),
], ],
stops: [0.0, 0.5, 1.0],
), ),
), ),
child: SafeArea( child: SafeArea(
@ -151,22 +153,23 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
SizedBox(height: 40.h), SizedBox(height: 60.h),
// 标题 // 标题 - 居中显示
Text( Center(
'手机号+密码登录', child: Text(
style: TextStyle( '恢复账号',
fontSize: 32.sp, style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 32.sp,
color: Colors.white, fontWeight: FontWeight.bold,
), color: Colors.white,
), shadows: [
SizedBox(height: 8.h), Shadow(
Text( color: Colors.black.withValues(alpha: 0.3),
'输入您的手机号和密码', blurRadius: 8,
style: TextStyle( offset: const Offset(0, 2),
fontSize: 16.sp, ),
color: Colors.white.withOpacity(0.6), ],
),
), ),
), ),
SizedBox(height: 48.h), SizedBox(height: 48.h),
@ -213,7 +216,7 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
width: 40.w, width: 40.w,
height: 40.w, height: 40.w,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1), color: Colors.white.withValues(alpha: 0.25),
borderRadius: BorderRadius.circular(12.r), borderRadius: BorderRadius.circular(12.r),
), ),
child: Icon( child: Icon(
@ -237,18 +240,18 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
'手机号', '手机号',
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Colors.white.withOpacity(0.8), color: Colors.white.withValues(alpha: 0.95),
fontWeight: FontWeight.w500, fontWeight: FontWeight.w600,
), ),
), ),
SizedBox(height: 8.h), SizedBox(height: 8.h),
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1), color: Colors.white.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(12.r), borderRadius: BorderRadius.circular(12.r),
border: Border.all( border: Border.all(
color: Colors.white.withOpacity(0.2), color: Colors.white.withValues(alpha: 0.4),
width: 1, width: 1.5,
), ),
), ),
child: TextField( child: TextField(
@ -267,7 +270,7 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
hintText: '请输入手机号', hintText: '请输入手机号',
hintStyle: TextStyle( hintStyle: TextStyle(
fontSize: 16.sp, fontSize: 16.sp,
color: Colors.white.withOpacity(0.4), color: Colors.white.withValues(alpha: 0.5),
), ),
border: InputBorder.none, border: InputBorder.none,
contentPadding: EdgeInsets.symmetric( contentPadding: EdgeInsets.symmetric(
@ -276,7 +279,7 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
), ),
prefixIcon: Icon( prefixIcon: Icon(
Icons.phone_android, Icons.phone_android,
color: Colors.white.withOpacity(0.6), color: Colors.white.withValues(alpha: 0.8),
size: 20.sp, size: 20.sp,
), ),
), ),
@ -300,18 +303,18 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
'密码', '密码',
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Colors.white.withOpacity(0.8), color: Colors.white.withValues(alpha: 0.95),
fontWeight: FontWeight.w500, fontWeight: FontWeight.w600,
), ),
), ),
SizedBox(height: 8.h), SizedBox(height: 8.h),
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1), color: Colors.white.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(12.r), borderRadius: BorderRadius.circular(12.r),
border: Border.all( border: Border.all(
color: Colors.white.withOpacity(0.2), color: Colors.white.withValues(alpha: 0.4),
width: 1, width: 1.5,
), ),
), ),
child: TextField( child: TextField(
@ -326,7 +329,7 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
hintText: '请输入密码', hintText: '请输入密码',
hintStyle: TextStyle( hintStyle: TextStyle(
fontSize: 16.sp, fontSize: 16.sp,
color: Colors.white.withOpacity(0.4), color: Colors.white.withValues(alpha: 0.5),
), ),
border: InputBorder.none, border: InputBorder.none,
contentPadding: EdgeInsets.symmetric( contentPadding: EdgeInsets.symmetric(
@ -335,7 +338,7 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
), ),
prefixIcon: Icon( prefixIcon: Icon(
Icons.lock_outline, Icons.lock_outline,
color: Colors.white.withOpacity(0.6), color: Colors.white.withValues(alpha: 0.8),
size: 20.sp, size: 20.sp,
), ),
suffixIcon: GestureDetector( suffixIcon: GestureDetector(
@ -346,7 +349,7 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
}, },
child: Icon( child: Icon(
_obscurePassword ? Icons.visibility_off : Icons.visibility, _obscurePassword ? Icons.visibility_off : Icons.visibility,
color: Colors.white.withOpacity(0.6), color: Colors.white.withValues(alpha: 0.8),
size: 20.sp, size: 20.sp,
), ),
), ),
@ -410,13 +413,14 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
onPressed: canLogin ? _login : null, onPressed: canLogin ? _login : null,
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: canLogin backgroundColor: canLogin
? const Color(0xFFD4AF37) ? Colors.white
: Colors.white.withOpacity(0.2), : Colors.white.withValues(alpha: 0.3),
disabledBackgroundColor: Colors.white.withOpacity(0.2), disabledBackgroundColor: Colors.white.withValues(alpha: 0.3),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.r), borderRadius: BorderRadius.circular(12.r),
), ),
elevation: 0, elevation: canLogin ? 4 : 0,
shadowColor: Colors.black.withValues(alpha: 0.3),
), ),
child: _isLoggingIn child: _isLoggingIn
? SizedBox( ? SizedBox(
@ -424,15 +428,15 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
height: 20.h, height: 20.h,
child: const CircularProgressIndicator( child: const CircularProgressIndicator(
strokeWidth: 2, strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(Colors.white), valueColor: AlwaysStoppedAnimation<Color>(Color(0xFFB8860B)),
), ),
) )
: Text( : Text(
'登录', '登录',
style: TextStyle( style: TextStyle(
fontSize: 16.sp, fontSize: 16.sp,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w700,
color: canLogin ? Colors.white : Colors.white.withOpacity(0.4), color: canLogin ? const Color(0xFFB8860B) : Colors.white.withValues(alpha: 0.5),
), ),
), ),
), ),
@ -445,7 +449,7 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
children: [ children: [
Expanded( Expanded(
child: Divider( child: Divider(
color: Colors.white.withOpacity(0.2), color: Colors.white.withValues(alpha: 0.4),
thickness: 1, thickness: 1,
), ),
), ),
@ -455,13 +459,14 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
'或', '或',
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Colors.white.withOpacity(0.5), color: Colors.white.withValues(alpha: 0.7),
fontWeight: FontWeight.w500,
), ),
), ),
), ),
Expanded( Expanded(
child: Divider( child: Divider(
color: Colors.white.withOpacity(0.2), color: Colors.white.withValues(alpha: 0.4),
thickness: 1, thickness: 1,
), ),
), ),
@ -479,7 +484,8 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
'还没有账号？', '还没有账号？',
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Colors.white.withOpacity(0.6), color: Colors.white.withValues(alpha: 0.8),
fontWeight: FontWeight.w500,
), ),
), ),
SizedBox(width: 4.w), SizedBox(width: 4.w),
@ -492,8 +498,10 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
'立即注册', '立即注册',
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: const Color(0xFFD4AF37), color: Colors.white,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
decorationColor: Colors.white,
), ),
), ),
), ),