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 '../pages/admin/admin_home_page.dart' show adminPageProvider;
import '../providers/auth_provider.dart';
import 'drawer_shell.dart';
class AdminDrawer extends ConsumerWidget {
const AdminDrawer({super.key});
@@ -12,100 +13,99 @@ class AdminDrawer extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final currentPage = ref.watch(adminPageProvider);
return Drawer(
width: MediaQuery.of(context).size.width * 0.8,
child: Container(
decoration: const BoxDecoration(gradient: AppColors.drawerGradient),
child: SafeArea(
child: Column(
children: [
Container(
margin: const EdgeInsets.all(14),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: AppColors.softGlassGradient,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColors.borderLight),
boxShadow: AppColors.cardShadow,
return DrawerShell(
child: SafeArea(
child: Column(
children: [
Container(
margin: const EdgeInsets.all(14),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.88),
borderRadius: BorderRadius.circular(22),
border: Border.all(
color: Colors.white.withValues(alpha: 0.86),
width: 1.2,
),
child: Row(
children: [
Container(
width: 52,
height: 52,
decoration: BoxDecoration(
gradient: AppColors.primaryGradient,
borderRadius: BorderRadius.circular(18),
boxShadow: AppColors.buttonShadow,
),
child: const Icon(
Icons.admin_panel_settings,
size: 28,
color: Colors.white,
),
boxShadow: AppColors.cardShadowLight,
),
child: Row(
children: [
Container(
width: 56,
height: 56,
decoration: BoxDecoration(
gradient: AppColors.doctorGradient,
borderRadius: BorderRadius.circular(20),
boxShadow: AppColors.buttonShadow,
),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'系统管理员',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w800,
color: AppColors.textPrimary,
),
),
SizedBox(height: 3),
Text(
'医生与患者管理',
style: TextStyle(
fontSize: 12,
color: AppColors.textSecondary,
),
),
],
),
child: const Icon(
Icons.admin_panel_settings,
size: 28,
color: Colors.white,
),
],
),
),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'系统管理员',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w800,
color: AppColors.textPrimary,
),
),
SizedBox(height: 3),
Text(
'医生与患者管理',
style: TextStyle(
fontSize: 12,
color: AppColors.textSecondary,
),
),
],
),
),
],
),
const SizedBox(height: 8),
_MenuItem(
icon: Icons.local_hospital,
label: '医生管理',
selected: currentPage == 'doctors',
onTap: () {
Navigator.pop(context);
ref.read(adminPageProvider.notifier).set('doctors');
},
),
_MenuItem(
icon: Icons.people_outline,
label: '患者列表',
selected: currentPage == 'patients',
onTap: () {
Navigator.pop(context);
ref.read(adminPageProvider.notifier).set('patients');
},
),
const Spacer(),
const Divider(height: 1, color: AppColors.divider),
const SizedBox(height: 8),
_MenuItem(
icon: Icons.logout,
label: '退出登录',
danger: true,
onTap: () async {
Navigator.pop(context);
await ref.read(authProvider.notifier).logout();
goRoute(ref, 'login');
},
),
const SizedBox(height: 16),
],
),
),
const SizedBox(height: 8),
_MenuItem(
icon: Icons.local_hospital,
label: '医生管理',
selected: currentPage == 'doctors',
onTap: () {
Navigator.pop(context);
ref.read(adminPageProvider.notifier).set('doctors');
},
),
_MenuItem(
icon: Icons.people_outline,
label: '患者列表',
selected: currentPage == 'patients',
onTap: () {
Navigator.pop(context);
ref.read(adminPageProvider.notifier).set('patients');
},
),
const Spacer(),
const Divider(height: 1, color: AppColors.divider),
const SizedBox(height: 8),
_MenuItem(
icon: Icons.logout,
label: '退出登录',
danger: true,
onTap: () async {
Navigator.pop(context);
await ref.read(authProvider.notifier).logout();
goRoute(ref, 'login');
},
),
const SizedBox(height: 16),
],
),
),
);
@@ -131,7 +131,7 @@ class _MenuItem extends StatelessWidget {
final color = danger
? AppColors.error
: selected
? AppColors.primary
? const Color(0xFF7C5CFF)
: AppColors.textPrimary;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
@@ -145,13 +145,14 @@ class _MenuItem extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
decoration: BoxDecoration(
gradient: selected
? AppColors.primaryGradient
? AppColors.doctorGradient
: AppColors.surfaceGradient,
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: selected
? AppColors.primaryLight
? Colors.white.withValues(alpha: 0.80)
: AppColors.borderLight,
width: 1.1,
),
boxShadow: selected
? AppColors.buttonShadow

View File

@@ -4,6 +4,7 @@ import '../core/app_colors.dart';
import '../core/navigation_provider.dart';
import '../providers/auth_provider.dart';
import '../pages/doctor/doctor_home_page.dart' show doctorPageProvider;
import 'drawer_shell.dart';
class DoctorDrawer extends ConsumerWidget {
const DoctorDrawer({super.key});
@@ -14,94 +15,90 @@ class DoctorDrawer extends ConsumerWidget {
final currentPage = ref.watch(doctorPageProvider);
final name = auth.user?.name ?? '医生';
return Drawer(
width: MediaQuery.of(context).size.width * 0.8,
child: Container(
decoration: const BoxDecoration(gradient: AppColors.drawerGradient),
child: SafeArea(
child: Column(
children: [
_DrawerHeader(
name: name,
subtitle: '点击完善医生信息',
icon: Icons.medical_services_outlined,
onTap: () {
Navigator.pop(context);
pushRoute(ref, 'doctorProfile');
},
),
const SizedBox(height: 8),
_DrawerItem(
icon: Icons.dashboard_outlined,
label: '工作台',
selected: currentPage == 'dashboard',
onTap: () {
Navigator.pop(context);
ref.read(doctorPageProvider.notifier).set('dashboard');
},
),
_DrawerItem(
icon: Icons.people_outline,
label: '患者管理',
selected: currentPage == 'patients',
onTap: () {
Navigator.pop(context);
ref.read(doctorPageProvider.notifier).set('patients');
},
),
_DrawerItem(
icon: Icons.chat_outlined,
label: '问诊列表',
selected: currentPage == 'consultations',
onTap: () {
Navigator.pop(context);
ref.read(doctorPageProvider.notifier).set('consultations');
},
),
_DrawerItem(
icon: Icons.description_outlined,
label: '报告审核',
selected: currentPage == 'reports',
onTap: () {
Navigator.pop(context);
ref.read(doctorPageProvider.notifier).set('reports');
},
),
_DrawerItem(
icon: Icons.event_note_outlined,
label: '复查随访',
selected: currentPage == 'followups',
onTap: () {
Navigator.pop(context);
ref.read(doctorPageProvider.notifier).set('followups');
},
),
const Spacer(),
const Divider(height: 1, color: AppColors.divider),
const SizedBox(height: 8),
_DrawerItem(
icon: Icons.settings_outlined,
label: '设置',
selected: false,
onTap: () {
Navigator.pop(context);
pushRoute(ref, 'doctorSettings');
},
),
_DrawerItem(
icon: Icons.logout,
label: '退出登录',
selected: false,
danger: true,
onTap: () async {
Navigator.pop(context);
await ref.read(authProvider.notifier).logout();
goRoute(ref, 'login');
},
),
const SizedBox(height: 16),
],
),
return DrawerShell(
child: SafeArea(
child: Column(
children: [
_DrawerHeader(
name: name,
subtitle: '点击完善医生信息',
icon: Icons.medical_services_outlined,
onTap: () {
Navigator.pop(context);
pushRoute(ref, 'doctorProfile');
},
),
const SizedBox(height: 8),
_DrawerItem(
icon: Icons.dashboard_outlined,
label: '工作台',
selected: currentPage == 'dashboard',
onTap: () {
Navigator.pop(context);
ref.read(doctorPageProvider.notifier).set('dashboard');
},
),
_DrawerItem(
icon: Icons.people_outline,
label: '患者管理',
selected: currentPage == 'patients',
onTap: () {
Navigator.pop(context);
ref.read(doctorPageProvider.notifier).set('patients');
},
),
_DrawerItem(
icon: Icons.chat_outlined,
label: '问诊列表',
selected: currentPage == 'consultations',
onTap: () {
Navigator.pop(context);
ref.read(doctorPageProvider.notifier).set('consultations');
},
),
_DrawerItem(
icon: Icons.description_outlined,
label: '报告审核',
selected: currentPage == 'reports',
onTap: () {
Navigator.pop(context);
ref.read(doctorPageProvider.notifier).set('reports');
},
),
_DrawerItem(
icon: Icons.event_note_outlined,
label: '复查随访',
selected: currentPage == 'followups',
onTap: () {
Navigator.pop(context);
ref.read(doctorPageProvider.notifier).set('followups');
},
),
const Spacer(),
const Divider(height: 1, color: AppColors.divider),
const SizedBox(height: 8),
_DrawerItem(
icon: Icons.settings_outlined,
label: '设置',
selected: false,
onTap: () {
Navigator.pop(context);
pushRoute(ref, 'doctorSettings');
},
),
_DrawerItem(
icon: Icons.logout,
label: '退出登录',
selected: false,
danger: true,
onTap: () async {
Navigator.pop(context);
await ref.read(authProvider.notifier).logout();
goRoute(ref, 'login');
},
),
const SizedBox(height: 16),
],
),
),
);
@@ -126,10 +123,13 @@ class _DrawerHeader extends StatelessWidget {
margin: const EdgeInsets.all(14),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: AppColors.softGlassGradient,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColors.borderLight),
boxShadow: AppColors.cardShadow,
color: Colors.white.withValues(alpha: 0.88),
borderRadius: BorderRadius.circular(22),
border: Border.all(
color: Colors.white.withValues(alpha: 0.86),
width: 1.2,
),
boxShadow: AppColors.cardShadowLight,
),
child: InkWell(
onTap: onTap,
@@ -137,11 +137,11 @@ class _DrawerHeader extends StatelessWidget {
child: Row(
children: [
Container(
width: 52,
height: 52,
width: 56,
height: 56,
decoration: BoxDecoration(
gradient: AppColors.doctorGradient,
borderRadius: BorderRadius.circular(18),
borderRadius: BorderRadius.circular(20),
boxShadow: AppColors.buttonShadow,
),
child: Icon(icon, color: Colors.white, size: 26),
@@ -198,7 +198,7 @@ class _DrawerItem extends StatelessWidget {
final color = danger
? AppColors.error
: selected
? AppColors.primary
? const Color(0xFF7C5CFF)
: AppColors.textPrimary;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
@@ -212,13 +212,14 @@ class _DrawerItem extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
decoration: BoxDecoration(
gradient: selected
? AppColors.primaryGradient
? AppColors.doctorGradient
: AppColors.surfaceGradient,
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: selected
? AppColors.primaryLight
? Colors.white.withValues(alpha: 0.80)
: AppColors.borderLight,
width: 1.1,
),
boxShadow: selected
? AppColors.buttonShadow

View File

@@ -0,0 +1,48 @@
import 'package:flutter/material.dart';
class DrawerShell extends StatelessWidget {
final double widthFactor;
final Widget child;
const DrawerShell({super.key, required this.child, this.widthFactor = 0.84});
@override
Widget build(BuildContext context) {
return Drawer(
width: MediaQuery.of(context).size.width * widthFactor,
backgroundColor: Colors.transparent,
elevation: 0,
child: ClipRRect(
borderRadius: const BorderRadius.horizontal(right: Radius.circular(28)),
child: Stack(
children: [
Positioned.fill(
child: Image.asset(
'assets/branding/drawer_background_v1.png',
fit: BoxFit.cover,
alignment: Alignment.centerLeft,
),
),
Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.white.withValues(alpha: 0.12),
Colors.white.withValues(alpha: 0.42),
Colors.white.withValues(alpha: 0.72),
],
stops: const [0.0, 0.48, 1.0],
),
),
),
),
child,
],
),
),
);
}
}

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),