feat: 添加消息中心及顶栏未读角标功能

新增消息中心页面,实现未读消息轮询与展示
为各 Tab 页面顶栏添加通知图标及未读数角标
新增通知 API 接口与未读数状态管理
实现消息标记已读、全部已读及下拉刷新功能
This commit is contained in:
andyesfly committed 2026-10-06 13:16:55 +08:00
1 parent 66013ee069
commit 7ad604ff8b
9 files changed
+575 -5

No files matched your search

+44 -1
View File
@@ -26,6 +26,7 @@ class XTopBar extends StatelessWidget {
String trailingIcon = 'notification',
Color trailingColor = AppColors.onSurfaceVariant,
VoidCallback? onTrailingTap,
int trailingBadge = 0,
}) {
return XTopBar._(
title: title,
@@ -46,7 +47,18 @@ class XTopBar extends StatelessWidget {
trailing: GestureDetector(
onTap: onTrailingTap,
behavior: HitTestBehavior.opaque,
child: XIcon(trailingIcon, size: 22, color: trailingColor),
child: Stack(
clipBehavior: Clip.none,
children: [
XIcon(trailingIcon, size: 22, color: trailingColor),
if (trailingBadge > 0)
Positioned(
top: -6,
right: -8,
child: _TrailingBadge(count: trailingBadge),
),
],
),
),
titleStyle: AppTypography.headlineMdMobile,
titleAlign: TextAlign.left,
@@ -135,4 +147,35 @@ class XTopBar extends StatelessWidget {
),
);
}
}
/// 顶栏图标右上角的未读角标:红底白字胶囊,超过 99 显示 `99+`。
class _TrailingBadge extends StatelessWidget {
const _TrailingBadge({required this.count});
final int count;
@override
Widget build(BuildContext context) {
return Container(
constraints: const BoxConstraints(minWidth: 16),
height: 16,
padding: const EdgeInsets.symmetric(horizontal: 4),
alignment: Alignment.center,
decoration: BoxDecoration(
color: AppColors.statusError,
borderRadius: BorderRadius.circular(9999),
border: Border.all(color: AppColors.surface, width: 1.5),
),
child: Text(
count > 99 ? '99+' : '$count',
style: const TextStyle(
fontSize: 10,
height: 1,
fontWeight: FontWeight.w700,
color: AppColors.surface,
),
),
);
}
}