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(),
),
),
],
),
),
),
);
}