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

fix: 修复推荐码文字可见性和统一恢复账号页面设计 

向导页修复：
- 推荐码输入文字改为金黄色(#FFD700)，与白色底边框形成对比

恢复账号页面重构：
- 背景改为白色，与手机号注册等页面保持一致
- 添加标准 AppBar，标题居中显示"恢复账号"
- 输入框改为完全透明底部边框设计，与外部容器无感融合
- 文字颜色与底色反色：深灰色(#333333)
- 登录按钮改为金色背景(#D4A84B) + 白色文字
- 更新所有颜色以适配白色背景主题
- "立即注册"文字改为金色

🤖 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:29:03 -08:00
parent 3be10493a0
commit 6b0194089a
2 changed files with 125 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -610,7 +610,7 @@ class _WelcomePageContentState extends ConsumerState<_WelcomePageContent> {
), ),
style: TextStyle( style: TextStyle(
fontSize: 17.sp, fontSize: 17.sp,
color: Colors.white, color: const Color(0xFFFFD700),
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
letterSpacing: 0.5, letterSpacing: 0.5,
), ),

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

@ -128,105 +128,74 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
body: Container( backgroundColor: Colors.white,
decoration: const BoxDecoration( appBar: AppBar(
gradient: LinearGradient( backgroundColor: Colors.white,
begin: Alignment.topLeft, elevation: 0,
end: Alignment.bottomRight, leading: IconButton(
colors: [ icon: const Icon(Icons.arrow_back_ios, color: Color(0xFF333333)),
Color(0xFFD4A84B), onPressed: () => context.pop(),
Color(0xFFB8860B), ),
Color(0xFFD4A84B), title: Text(
], '恢复账号',
stops: [0.0, 0.5, 1.0], style: TextStyle(
fontSize: 18.sp,
fontWeight: FontWeight.w600,
color: const Color(0xFF333333),
), ),
), ),
centerTitle: true,
),
body: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: SafeArea( child: SafeArea(
child: Column( child: Padding(
children: [ padding: EdgeInsets.symmetric(horizontal: 24.w),
// 顶部导航栏 child: Column(
_buildAppBar(), crossAxisAlignment: CrossAxisAlignment.start,
// 表单内容 children: [
Expanded( SizedBox(height: 32.h),
child: SingleChildScrollView( // 标题
padding: EdgeInsets.symmetric(horizontal: 24.w), Text(
child: Column( '手机号+密码登录',
crossAxisAlignment: CrossAxisAlignment.start, style: TextStyle(
children: [ fontSize: 24.sp,
SizedBox(height: 60.h), fontWeight: FontWeight.w700,
// 标题 - 居中显示 color: const Color(0xFF333333),
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(),
],
), ),
), ),
), SizedBox(height: 8.h),
], Text(
), '输入您的手机号和密码',
), style: TextStyle(
), fontSize: 14.sp,
); color: const Color(0xFF999999),
} ),
),
/// 构建顶部导航栏 SizedBox(height: 32.h),
Widget _buildAppBar() { // 手机号输入框
return Container( _buildPhoneInput(),
height: 56.h, SizedBox(height: 16.h),
padding: EdgeInsets.symmetric(horizontal: 16.w), // 密码输入框
child: Row( _buildPasswordInput(),
children: [ // 错误提示
GestureDetector( if (_errorMessage != null) ...[
onTap: () => context.pop(), SizedBox(height: 16.h),
child: Container( _buildErrorMessage(),
width: 40.w, ],
height: 40.w, SizedBox(height: 32.h),
decoration: BoxDecoration( // 登录按钮
color: Colors.white.withValues(alpha: 0.25), _buildLoginButton(),
borderRadius: BorderRadius.circular(12.r), SizedBox(height: 24.h),
), // 分割线和提示
child: Icon( _buildDivider(),
Icons.arrow_back, SizedBox(height: 24.h),
color: Colors.white, // 注册提示
size: 20.sp, _buildRegisterHint(),
), ],
), ),
), ),
], ),
), ),
); );
} }
@ -240,18 +209,19 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
'手机号', '手机号',
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Colors.white.withValues(alpha: 0.95), color: const Color(0xFF666666),
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
), ),
SizedBox(height: 8.h), SizedBox(height: 8.h),
Container( Container(
padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 0),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.2), border: Border(
borderRadius: BorderRadius.circular(12.r), bottom: BorderSide(
border: Border.all( color: const Color(0xFFE0E0E0),
color: Colors.white.withValues(alpha: 0.4), width: 1,
width: 1.5, ),
), ),
), ),
child: TextField( child: TextField(
@ -264,24 +234,18 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
], ],
style: TextStyle( style: TextStyle(
fontSize: 16.sp, fontSize: 16.sp,
color: Colors.white, color: const Color(0xFF333333),
fontWeight: FontWeight.w500,
), ),
decoration: InputDecoration( decoration: InputDecoration(
hintText: '请输入手机号', hintText: '请输入手机号',
hintStyle: TextStyle( hintStyle: TextStyle(
fontSize: 16.sp, fontSize: 16.sp,
color: Colors.white.withValues(alpha: 0.5), color: const Color(0xFFCCCCCC),
), ),
border: InputBorder.none, border: InputBorder.none,
contentPadding: EdgeInsets.symmetric( isDense: false,
horizontal: 16.w, contentPadding: EdgeInsets.zero,
vertical: 14.h,
),
prefixIcon: Icon(
Icons.phone_android,
color: Colors.white.withValues(alpha: 0.8),
size: 20.sp,
),
), ),
onChanged: (_) { onChanged: (_) {
if (_errorMessage != null) { if (_errorMessage != null) {
@ -303,45 +267,53 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
'密码', '密码',
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Colors.white.withValues(alpha: 0.95), color: const Color(0xFF666666),
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
), ),
SizedBox(height: 8.h), SizedBox(height: 8.h),
Container( Container(
padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 0),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.2), border: Border(
borderRadius: BorderRadius.circular(12.r), bottom: BorderSide(
border: Border.all( color: const Color(0xFFE0E0E0),
color: Colors.white.withValues(alpha: 0.4), width: 1,
width: 1.5, ),
), ),
), ),
child: TextField( child: Row(
controller: _passwordController, children: [
focusNode: _passwordFocusNode, Expanded(
obscureText: _obscurePassword, child: TextField(
style: TextStyle( controller: _passwordController,
fontSize: 16.sp, focusNode: _passwordFocusNode,
color: Colors.white, obscureText: _obscurePassword,
), style: TextStyle(
decoration: InputDecoration( fontSize: 16.sp,
hintText: '请输入密码', color: const Color(0xFF333333),
hintStyle: TextStyle( fontWeight: FontWeight.w500,
fontSize: 16.sp, ),
color: Colors.white.withValues(alpha: 0.5), 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( GestureDetector(
horizontal: 16.w,
vertical: 14.h,
),
prefixIcon: Icon(
Icons.lock_outline,
color: Colors.white.withValues(alpha: 0.8),
size: 20.sp,
),
suffixIcon: GestureDetector(
onTap: () { onTap: () {
setState(() { setState(() {
_obscurePassword = !_obscurePassword; _obscurePassword = !_obscurePassword;
@ -349,17 +321,11 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
}, },
child: Icon( child: Icon(
_obscurePassword ? Icons.visibility_off : Icons.visibility, _obscurePassword ? Icons.visibility_off : Icons.visibility,
color: Colors.white.withValues(alpha: 0.8), color: const Color(0xFF999999),
size: 20.sp, size: 20.sp,
), ),
), ),
), ],
onChanged: (_) {
if (_errorMessage != null) {
setState(() => _errorMessage = null);
}
},
onSubmitted: (_) => _login(),
), ),
), ),
], ],
@ -413,14 +379,13 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
onPressed: canLogin ? _login : null, onPressed: canLogin ? _login : null,
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: canLogin backgroundColor: canLogin
? Colors.white ? const Color(0xFFD4A84B)
: Colors.white.withValues(alpha: 0.3), : const Color(0xFFE0E0E0),
disabledBackgroundColor: Colors.white.withValues(alpha: 0.3), disabledBackgroundColor: const Color(0xFFE0E0E0),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.r), borderRadius: BorderRadius.circular(12.r),
), ),
elevation: canLogin ? 4 : 0, elevation: 0,
shadowColor: Colors.black.withValues(alpha: 0.3),
), ),
child: _isLoggingIn child: _isLoggingIn
? SizedBox( ? SizedBox(
@ -428,7 +393,7 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
height: 20.h, height: 20.h,
child: const CircularProgressIndicator( child: const CircularProgressIndicator(
strokeWidth: 2, strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(Color(0xFFB8860B)), valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
), ),
) )
: Text( : Text(
@ -436,7 +401,7 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
style: TextStyle( style: TextStyle(
fontSize: 16.sp, fontSize: 16.sp,
fontWeight: FontWeight.w700, 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<PhoneLoginPage> {
children: [ children: [
Expanded( Expanded(
child: Divider( child: Divider(
color: Colors.white.withValues(alpha: 0.4), color: const Color(0xFFE0E0E0),
thickness: 1, thickness: 1,
), ),
), ),
@ -459,14 +424,14 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
'或', '或',
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Colors.white.withValues(alpha: 0.7), color: const Color(0xFF999999),
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
), ),
), ),
), ),
Expanded( Expanded(
child: Divider( child: Divider(
color: Colors.white.withValues(alpha: 0.4), color: const Color(0xFFE0E0E0),
thickness: 1, thickness: 1,
), ),
), ),
@ -484,7 +449,7 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
'还没有账号？', '还没有账号？',
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Colors.white.withValues(alpha: 0.8), color: const Color(0xFF999999),
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
), ),
), ),
@ -498,10 +463,8 @@ class _PhoneLoginPageState extends ConsumerState<PhoneLoginPage> {
'立即注册', '立即注册',
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Colors.white, color: const Color(0xFFD4A84B),
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
decorationColor: Colors.white,
), ),
), ),
), ),