qzl/social-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化前端 UI 与交互体验

Browse Source
This commit is contained in:
qzl
2026-03-16 19:04:54 +08:00
parent 5a34616287
commit d3783522e6
16 changed files with 524 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/features/settings/ui/screens/account_screen.dart
+142 -183
View File
@@ -2,102 +2,46 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import '../../../../core/theme/design_tokens.dart';
import '../../../../shared/widgets/app_pressable.dart';
import '../../../../shared/widgets/toast/toast.dart';
import '../../../../shared/widgets/toast/toast_type.dart';
import '../../../auth/presentation/bloc/auth_bloc.dart';
import '../../../auth/presentation/bloc/auth_event.dart';
import '../../../auth/presentation/bloc/auth_state.dart';
import '../../../../shared/widgets/app_button.dart';
import '../widgets/account_section_card.dart';
import '../widgets/account_surface_scaffold.dart';
class AccountScreen extends StatelessWidget {
const AccountScreen({super.key});
static const double _menuItemHeight = AppSpacing.xl * 2 + AppSpacing.md;
static const double _menuItemHorizontalPadding = AppSpacing.md;
static const double _menuIconSize = 20;
static const double _menuChevronSize = 18;
@override
Widget build(BuildContext context) {
return AccountSurfaceScaffold(
title: '我的账户',
subtitle: '管理资料信息与账户安全',
title: '账户',
subtitle: null,
compactHeaderTitle: true,
onBack: () => context.pop(),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_buildProfileHero(context),
const SizedBox(height: AppSpacing.lg),
_buildMenuCard(context),
const SizedBox(height: AppSpacing.lg),
_buildSecurityCard(context),
],
children: [_buildListSurface(context)],
),
);
}
Widget _buildProfileHero(BuildContext context) {
final authState = context.watch<AuthBloc>().state;
final email = authState is AuthAuthenticated ? authState.user.email : '';
final identity = email.isEmpty ? '当前登录账户' : email;
final badge = email.isEmpty ? 'A' : email.characters.first.toUpperCase();
Widget _buildListSurface(BuildContext context) {
return AccountSectionCard(
title: '账户概览',
description: '查看当前账户状态与基础身份信息',
backgroundColor: AppColors.surfaceInfoLight,
borderColor: AppColors.borderQuaternary,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.circular(AppRadius.full),
border: Border.all(color: AppColors.borderQuaternary),
),
child: Center(
child: Text(
badge,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
color: AppColors.blue600,
),
),
),
),
const SizedBox(width: AppSpacing.md),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
identity,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: AppSpacing.xs),
const Text(
'账户状态正常，可安全管理资料与密码',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
color: AppColors.slate500,
),
),
],
),
),
],
backgroundColor: AppColors.white,
borderColor: AppColors.borderSecondary,
contentPadding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.sm,
),
);
}
Widget _buildMenuCard(BuildContext context) {
return AccountSectionCard(
title: '账户信息',
description: '编辑公开资料和登录信息',
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
@@ -112,52 +56,15 @@ class AccountScreen extends StatelessWidget {
title: '修改密码',
onTap: () => context.push('/change-password'),
),
],
),
);
}
Widget _buildSecurityCard(BuildContext context) {
return AccountSectionCard(
title: '安全与会话',
description: '若为公共设备，请及时退出登录',
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.sm,
),
decoration: BoxDecoration(
color: AppColors.surfaceSecondary,
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(color: AppColors.borderSecondary),
),
child: const Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.shield_outlined,
size: 16,
color: AppColors.slate500,
),
SizedBox(width: AppSpacing.xs),
Expanded(
child: Text(
'退出后需要重新登录才能继续使用。',
style: TextStyle(
fontSize: 12,
color: AppColors.slate500,
fontWeight: FontWeight.w500,
),
),
),
],
),
_buildDivider(),
_buildMenuItem(
icon: Icons.logout,
title: '退出登录',
titleColor: AppColors.feedbackErrorText,
iconColor: AppColors.feedbackErrorIcon,
trailingColor: AppColors.feedbackErrorIcon,
onTap: () => _showLogoutSheet(context),
),
const SizedBox(height: AppSpacing.md),
_buildLogoutButton(context),
],
),
);
@@ -167,13 +74,19 @@ class AccountScreen extends StatelessWidget {
required IconData icon,
required String title,
required VoidCallback onTap,
Color titleColor = AppColors.slate900,
Color iconColor = AppColors.slate500,
Color trailingColor = AppColors.slate400,
}) {
return GestureDetector(
return AppPressable(
onTap: onTap,
behavior: HitTestBehavior.opaque,
borderRadius: BorderRadius.circular(AppRadius.md),
child: Container(
height: AppSpacing.xxl,
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
constraints: const BoxConstraints(minHeight: _menuItemHeight),
padding: const EdgeInsets.symmetric(
horizontal: _menuItemHorizontalPadding,
vertical: AppSpacing.sm,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -181,22 +94,25 @@ class AccountScreen extends StatelessWidget {
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(icon, size: 20, color: AppColors.slate500),
SizedBox(
width: _menuIconSize,
child: Icon(icon, size: _menuIconSize, color: iconColor),
),
const SizedBox(width: AppSpacing.md),
Text(
title,
style: const TextStyle(
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: AppColors.slate900,
fontWeight: FontWeight.w600,
color: titleColor,
),
),
],
),
const Icon(
Icon(
Icons.chevron_right,
size: 18,
color: AppColors.slate400,
size: _menuChevronSize,
color: trailingColor,
),
],
),
@@ -207,65 +123,108 @@ class AccountScreen extends StatelessWidget {
Widget _buildDivider() {
return Container(
height: 1,
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
margin: const EdgeInsets.only(
left: _menuItemHorizontalPadding + _menuIconSize + AppSpacing.md,
right: _menuItemHorizontalPadding,
),
color: AppColors.borderTertiary,
);
}
Widget _buildLogoutButton(BuildContext context) {
return GestureDetector(
onTap: () => _showLogoutDialog(context),
child: Container(
width: double.infinity,
height: 52,
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.circular(AppRadius.lg),
border: Border.all(color: AppColors.feedbackErrorBorder),
),
child: const Center(
child: Text(
'退出登录',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppColors.feedbackErrorText,
),
),
),
),
);
}
void _showLogoutDialog(BuildContext context) {
showDialog(
void _showLogoutSheet(BuildContext context) {
showModalBottomSheet<void>(
context: context,
builder: (dialogContext) => AlertDialog(
title: const Text('退出登录'),
content: const Text('确定要退出当前账户吗？'),
actions: [
TextButton(
onPressed: () => Navigator.of(dialogContext).pop(),
child: const Text('取消'),
backgroundColor: Colors.transparent,
isScrollControlled: true,
builder: (sheetContext) => SafeArea(
top: false,
child: Container(
margin: const EdgeInsets.fromLTRB(
AppSpacing.md,
AppSpacing.none,
AppSpacing.md,
AppSpacing.md,
),
TextButton(
onPressed: () async {
Navigator.of(dialogContext).pop();
final authBloc = context.read<AuthBloc>();
authBloc.add(AuthLoggedOut());
await authBloc.stream.firstWhere(
(state) => state is AuthUnauthenticated,
);
if (context.mounted) {
context.go('/');
}
},
child: const Text(
'退出',
style: TextStyle(color: AppColors.feedbackErrorText),
),
padding: const EdgeInsets.all(AppSpacing.lg),
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.circular(AppRadius.xl),
border: Border.all(color: AppColors.borderSecondary),
),
],
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text(
'退出登录',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
textAlign: TextAlign.center,
),
const SizedBox(height: AppSpacing.xs),
const Text(
'确定退出当前账户吗？',
style: TextStyle(fontSize: 14, color: AppColors.slate500),
textAlign: TextAlign.center,
),
const SizedBox(height: AppSpacing.lg),
SizedBox(
height: 52,
child: GestureDetector(
onTap: () async {
Navigator.of(sheetContext).pop();
final authBloc = context.read<AuthBloc>();
authBloc.add(AuthLoggedOut());
try {
await authBloc.stream
.firstWhere((state) => state is AuthUnauthenticated)
.timeout(const Duration(seconds: 5));
} catch (_) {
if (context.mounted) {
Toast.show(
context,
'退出失败，请稍后重试',
type: ToastType.error,
);
}
return;
}
if (context.mounted) {
context.go('/');
}
},
child: Container(
decoration: BoxDecoration(
color: AppColors.feedbackErrorIcon,
borderRadius: BorderRadius.circular(AppRadius.full),
),
alignment: Alignment.center,
child: const Text(
'确认退出',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: AppColors.white,
),
),
),
),
),
const SizedBox(height: AppSpacing.sm),
SizedBox(
height: 52,
child: AppButton(
text: '取消',
isOutlined: true,
onPressed: () => Navigator.of(sheetContext).pop(),
),
),
],
),
),
),
);
}
apps/lib/features/settings/ui/screens/change_password_screen.dart
+18 -51
View File
@@ -5,7 +5,6 @@ import 'package:go_router/go_router.dart';
import '../../../../core/theme/design_tokens.dart';
import '../../../../core/di/injection.dart';
import '../../../../shared/widgets/app_button.dart';
import '../../../../shared/widgets/banner/app_banner.dart';
import '../../../../shared/widgets/fixed_length_code_input.dart';
import '../../../../shared/widgets/toast/toast.dart';
import '../../../../shared/widgets/toast/toast_type.dart';
@@ -98,7 +97,7 @@ class __ChangePasswordViewState extends State<_ChangePasswordView> {
},
child: AccountSurfaceScaffold(
title: '修改密码',
subtitle: '通过邮箱验证码安全更新你的登录密码',
subtitle: '通过邮箱验证码修改密码',
onBack: () => context.pop(),
body: _buildForm(),
footer: BlocBuilder<ResetPasswordCubit, ResetPasswordState>(
@@ -131,8 +130,7 @@ class __ChangePasswordViewState extends State<_ChangePasswordView> {
Widget _buildEmailSection(ResetPasswordState state, String userEmail) {
return AccountSectionCard(
title: '第 1 步：验证邮箱',
description: '先向登录邮箱发送验证码，再进行密码设置',
title: '发送验证码',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -209,33 +207,17 @@ class __ChangePasswordViewState extends State<_ChangePasswordView> {
bool passwordHasError,
bool confirmHasError,
) {
if (!state.codeSent) {
return const SizedBox.shrink();
}
return AccountSectionCard(
title: '第 2 步：输入验证码并设置新密码',
description: '验证码有效后，确认新密码即可完成修改',
backgroundColor: state.codeSent
? AppColors.white
: AppColors.surfaceTertiary,
borderColor: state.codeSent
? AppColors.borderSecondary
: AppColors.borderTertiary,
title: '设置新密码',
backgroundColor: AppColors.white,
borderColor: AppColors.borderSecondary,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (!state.codeSent)
const AppBanner(
title: '请先发送验证码',
message: '完成邮箱验证后，可继续设置新密码。',
type: ToastType.info,
),
if (state.codeSent)
AppBanner(
title: '验证码已发送',
message: state.resendCountdown > 0
? '如未收到，可在 ${state.resendCountdown} 秒后重新发送。'
: '若未收到邮件，可重新发送验证码。',
type: ToastType.info,
),
const SizedBox(height: AppSpacing.lg),
const Text(
'验证码',
style: TextStyle(
@@ -372,31 +354,16 @@ class __ChangePasswordViewState extends State<_ChangePasswordView> {
Widget _buildSubmitButton(ResetPasswordState state) {
final isLoading = state.status == FormzSubmissionStatus.inProgress;
final isDisabled = isLoading || !state.canSubmit;
final isDisabled = isLoading || !state.codeSent || !state.canSubmit;
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
if (!state.codeSent)
const Text(
'完成验证码验证后可提交密码修改',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: AppColors.slate500,
),
),
if (!state.codeSent) const SizedBox(height: AppSpacing.sm),
SizedBox(
width: double.infinity,
height: 52,
child: AppButton(
text: '确认修改',
onPressed: isDisabled ? null : _handleSubmit,
isLoading: isLoading,
),
),
],
return SizedBox(
width: double.infinity,
height: 52,
child: AppButton(
text: '确认修改',
onPressed: isDisabled ? null : _handleSubmit,
isLoading: isLoading,
),
);
}
}
apps/lib/features/settings/ui/screens/edit_profile_screen.dart
+1 -72
View File
@@ -121,7 +121,7 @@ class _EditProfileScreenState extends State<EditProfileScreen> {
Widget build(BuildContext context) {
return AccountSurfaceScaffold(
title: '编辑资料',
subtitle: '完善公开信息，让好友更容易认识你',
subtitle: '编辑账户资料',
onBack: () => context.pop(),
body: _isLoading
? const Center(
@@ -130,8 +130,6 @@ class _EditProfileScreenState extends State<EditProfileScreen> {
: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_buildProfileSummarySection(),
const SizedBox(height: AppSpacing.lg),
_buildBasicInfoSection(),
const SizedBox(height: AppSpacing.lg),
_buildBioSection(),
@@ -149,77 +147,9 @@ class _EditProfileScreenState extends State<EditProfileScreen> {
);
}
Widget _buildProfileSummarySection() {
final username = _user?.username ?? '未设置用户名';
final email = _user?.email;
return AccountSectionCard(
title: '资料概览',
description: '展示你的公开身份信息',
backgroundColor: AppColors.white,
borderColor: AppColors.borderSecondary,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 64,
height: 64,
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [AppColors.blue100, AppColors.surfaceInfoLight],
),
borderRadius: BorderRadius.circular(AppRadius.full),
border: Border.all(color: AppColors.borderQuaternary),
),
child: const Icon(
Icons.person,
size: 28,
color: AppColors.blue600,
),
),
const SizedBox(width: AppSpacing.lg),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
username,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: AppSpacing.xs),
Text(
email ?? '邮箱未绑定',
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
color: AppColors.slate500,
),
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
],
),
);
}
Widget _buildBasicInfoSection() {
return AccountSectionCard(
title: '基础信息',
description: '用户名会在个人资料和社交场景中展示',
backgroundColor: AppColors.white,
borderColor: AppColors.borderSecondary,
child: Column(
@@ -248,7 +178,6 @@ class _EditProfileScreenState extends State<EditProfileScreen> {
Widget _buildBioSection() {
return AccountSectionCard(
title: '个人简介',
description: '一句话介绍自己，帮助他人快速了解你',
backgroundColor: AppColors.white,
borderColor: AppColors.borderSecondary,
child: Column(