feat: 重构 Home Screen 视觉设计与消息输入组件

- 新增 Home Screen 视觉设计 token (背景、工具栏、对话区、输入框等) - 重构首页布局为浮动式底部输入栈结构 - 新增 HomeBackgroundField、HomeFloatingHeader、HomeAttachmentStrip 组件 - 优化 MessageComposer 视觉样式为悬浮 shell 设计 - 添加相关测试用例
2026-03-13 17:25:29 +08:00
parent 4c10929498
commit 3273d63b23
10 changed files with 1212 additions and 259 deletions
@@ -0,0 +1,150 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons/lucide_icons.dart';
+
+import '../../../../core/theme/design_tokens.dart';
+
+const homeFloatingHeaderKey = ValueKey('home_floating_header');
+
+class HomeFloatingHeader extends StatelessWidget {
+  const HomeFloatingHeader({
+    super.key,
+    required this.unreadCount,
+    required this.onTapSettings,
+    required this.onTapCalendar,
+    required this.onTapMessages,
+  });
+
+  final int unreadCount;
+  final VoidCallback onTapSettings;
+  final VoidCallback onTapCalendar;
+  final VoidCallback onTapMessages;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(
+        AppSpacing.lg,
+        AppSpacing.sm,
+        AppSpacing.lg,
+        AppSpacing.md,
+      ),
+      child: Container(
+        key: homeFloatingHeaderKey,
+        padding: const EdgeInsets.symmetric(
+          horizontal: AppSpacing.sm,
+          vertical: AppSpacing.xs,
+        ),
+        decoration: BoxDecoration(
+          color: AppColors.homeToolbarSurface,
+          borderRadius: BorderRadius.circular(AppRadius.full),
+          border: Border.all(color: AppColors.homeToolbarBorder),
+          boxShadow: const [
+            BoxShadow(
+              color: AppColors.white,
+              blurRadius: AppRadius.md,
+              offset: Offset(0, -(AppSpacing.xs / 2)),
+            ),
+            BoxShadow(
+              color: AppColors.slate200,
+              blurRadius: AppRadius.lg,
+              offset: Offset(0, AppSpacing.sm - (AppSpacing.xs / 2)),
+            ),
+          ],
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            _HeaderIconButton(
+              icon: LucideIcons.settings,
+              onPressed: onTapSettings,
+            ),
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                _HeaderIconButton(
+                  icon: LucideIcons.calendar,
+                  onPressed: onTapCalendar,
+                ),
+                const SizedBox(width: AppSpacing.sm),
+                _MessagesButton(
+                  unreadCount: unreadCount,
+                  onPressed: onTapMessages,
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _HeaderIconButton extends StatelessWidget {
+  const _HeaderIconButton({required this.icon, required this.onPressed});
+
+  final IconData icon;
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      visualDensity: VisualDensity.compact,
+      onPressed: onPressed,
+      icon: Icon(icon, size: AppSpacing.xxl, color: AppColors.slate900),
+    );
+  }
+}
+
+class _MessagesButton extends StatelessWidget {
+  const _MessagesButton({required this.unreadCount, required this.onPressed});
+
+  final int unreadCount;
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      visualDensity: VisualDensity.compact,
+      onPressed: onPressed,
+      icon: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          const Icon(
+            LucideIcons.messageSquare,
+            size: AppSpacing.xxl,
+            color: AppColors.slate900,
+          ),
+          if (unreadCount > 0)
+            Positioned(
+              right: -AppSpacing.xs,
+              top: -AppSpacing.xs,
+              child: Container(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: AppSpacing.xs,
+                  vertical: AppSpacing.xs / 2,
+                ),
+                decoration: BoxDecoration(
+                  color: AppColors.red500,
+                  borderRadius: BorderRadius.circular(AppSpacing.sm),
+                ),
+                constraints: const BoxConstraints(
+                  minWidth: AppSpacing.lg,
+                  minHeight: AppSpacing.lg,
+                ),
+                child: Text(
+                  unreadCount > 99 ? '99+' : unreadCount.toString(),
+                  textAlign: TextAlign.center,
+                  style: const TextStyle(
+                    fontSize: AppSpacing.sm + (AppSpacing.xs / 2),
+                    fontWeight: FontWeight.w600,
+                    color: AppColors.white,
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}