Polish health app UI

This commit is contained in:
MingNian
2026-06-26 14:37:17 +08:00
parent 86c7957144
commit df37076c46
46 changed files with 717 additions and 514 deletions

View File

@@ -4,6 +4,7 @@ import '../core/app_colors.dart';
import '../core/navigation_provider.dart';
import '../providers/auth_provider.dart';
import '../providers/data_providers.dart';
import 'drawer_shell.dart';
class HealthDrawer extends ConsumerWidget {
const HealthDrawer({super.key});
@@ -13,37 +14,25 @@ class HealthDrawer extends ConsumerWidget {
final auth = ref.watch(authProvider);
final latestHealth = ref.watch(latestHealthProvider);
return Drawer(
width: MediaQuery.of(context).size.width * 0.9,
backgroundColor: Colors.transparent,
elevation: 0,
child: DecoratedBox(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF87CEEB), Color(0xFFFFFFFF)],
stops: [0.0, 0.35],
),
),
child: SafeArea(
child: CustomScrollView(
physics: const BouncingScrollPhysics(),
slivers: [
SliverPadding(
padding: const EdgeInsets.fromLTRB(18, 18, 18, 24),
sliver: SliverList.list(
children: [
_AccountHeader(user: auth.user, ref: ref),
const SizedBox(height: 18),
_HealthDashboard(latestHealth: latestHealth, ref: ref),
const SizedBox(height: 18),
_NavigationSection(ref: ref),
],
),
return DrawerShell(
widthFactor: 0.9,
child: SafeArea(
child: CustomScrollView(
physics: const BouncingScrollPhysics(),
slivers: [
SliverPadding(
padding: const EdgeInsets.fromLTRB(18, 18, 18, 24),
sliver: SliverList.list(
children: [
_AccountHeader(user: auth.user, ref: ref),
const SizedBox(height: 18),
_HealthDashboard(latestHealth: latestHealth, ref: ref),
const SizedBox(height: 18),
_NavigationSection(ref: ref),
],
),
],
),
),
],
),
),
);
@@ -75,12 +64,12 @@ class _AccountHeader extends StatelessWidget {
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
border: Border.all(color: const Color(0xFFE9EEF5)),
border: Border.all(color: Colors.white, width: 2),
boxShadow: [
BoxShadow(
color: const Color(0xFF101828).withValues(alpha: 0.06),
blurRadius: 14,
offset: const Offset(0, 6),
color: const Color(0xFF7C5CFF).withValues(alpha: 0.16),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
@@ -152,9 +141,9 @@ class _HealthDashboard extends StatelessWidget {
),
titleColor: Colors.white,
backgroundGradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF89F7FE), Color(0xFF66A6FF)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFF60A5FA), Color(0xFF8B5CF6), Color(0xFFF472B6)],
),
child: latestHealth.when(
data: (data) => _DashboardMetrics(data: data, ref: ref),
@@ -282,7 +271,11 @@ class _MetricTile extends StatelessWidget {
if (info.unit != null)
Text(
info.unit!,
style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Color(0xE0FFFFFF)),
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: Color(0xE0FFFFFF),
),
),
const SizedBox(height: 2),
Text(
@@ -311,7 +304,7 @@ class _NavigationSection extends StatelessWidget {
icon: Icons.folder_shared_rounded,
title: '档案',
route: 'healthArchive',
colors: const [Color(0xFF6EE7B7), Color(0xFF14B8A6)],
colors: const [Color(0xFF93C5FD), Color(0xFF60A5FA)],
),
_NavItem(
icon: Icons.description_rounded,
@@ -329,13 +322,13 @@ class _NavigationSection extends StatelessWidget {
icon: Icons.restaurant_rounded,
title: '饮食',
route: 'dietRecords',
colors: const [Color(0xFFFED7AA), Color(0xFFFDBA74)],
colors: const [Color(0xFFFBCFE8), Color(0xFFF472B6)],
),
_NavItem(
icon: Icons.calendar_month_rounded,
title: '日历',
route: 'calendar',
colors: const [Color(0xFFA7F3D0), Color(0xFF86EFAC)],
colors: const [Color(0xFFC4B5FD), Color(0xFF8B5CF6)],
),
_NavItem(
icon: Icons.event_available_rounded,
@@ -354,9 +347,9 @@ class _NavigationSection extends StatelessWidget {
return _Panel(
title: '功能入口',
backgroundGradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFFEAF4FB), Color(0xFFF4F9FD)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFAFFFFFF), Color(0xF5EFF6FF)],
),
child: GridView.builder(
itemCount: items.length,
@@ -394,13 +387,13 @@ class _NavTile extends StatelessWidget {
};
List<Color> get _colors => switch (item.route) {
'healthArchive' => const [Color(0xFF34D399), Color(0xFF059669)],
'healthArchive' => const [Color(0xFF93C5FD), Color(0xFF60A5FA)],
'reports' => const [Color(0xFF60A5FA), Color(0xFF2563EB)],
'medications' => const [Color(0xFFA78BFA), Color(0xFF7C3AED)],
'dietRecords' => const [Color(0xFFF6D365), Color(0xFFF97316)],
'calendar' => const [Color(0xFF34D399), Color(0xFF059669)],
'dietRecords' => const [Color(0xFFFBCFE8), Color(0xFFF472B6)],
'calendar' => const [Color(0xFFC4B5FD), Color(0xFF8B5CF6)],
'followups' => const [Color(0xFFF472B6), Color(0xFFDB2777)],
'exercisePlan' => const [Color(0xFF22D3EE), Color(0xFF0891B2)],
'exercisePlan' => const [Color(0xFF7DD3FC), Color(0xFF60A5FA)],
_ => item.colors,
};
@@ -413,7 +406,8 @@ class _NavTile extends StatelessWidget {
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.white, width: 1.2),
border: Border.all(color: AppColors.borderLight, width: 1.1),
boxShadow: AppColors.cardShadowLight,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
@@ -479,7 +473,10 @@ class _Panel extends StatelessWidget {
],
),
borderRadius: BorderRadius.circular(28),
border: Border.all(color: Colors.white, width: 1.4),
border: Border.all(
color: Colors.white.withValues(alpha: 0.82),
width: 1.2,
),
boxShadow: [
BoxShadow(
color: const Color(0xFF6D5DF6).withValues(alpha: 0.08),