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

- 新增 Home Screen 视觉设计 token (背景、工具栏、对话区、输入框等)
- 重构首页布局为浮动式底部输入栈结构
- 新增 HomeBackgroundField、HomeFloatingHeader、HomeAttachmentStrip 组件
- 优化 MessageComposer 视觉样式为悬浮 shell 设计
- 添加相关测试用例

apps/lib/features/home/ui/screens/home_screen.dart

@@ -19,12 +19,13 @@ import '../../../../shared/widgets/message_composer.dart';
 import '../../../../shared/widgets/toast/toast.dart';
 import '../../../../shared/widgets/toast/toast_type.dart';
 import 'home_sheet.dart';
+import '../widgets/home_attachment_strip.dart';
+import '../widgets/home_background_field.dart';
+import '../widgets/home_floating_header.dart';
 
 /// 布局常量
-const _headerHeight = 60.0;
 const _defaultPadding = 20.0;
 const _itemSpacing = 16.0;
-const _inputPadding = 16.0;
 const _iconSize = 24.0;
 const _messagePaddingH = 13.0;
 const _messagePaddingV = 9.0;
@@ -38,6 +39,11 @@ const _transcribingStrokeWidth = 2.0;
 const _attachmentPreviewSize = 88.0;
 const _attachmentPreviewRadius = 10.0;
 const _attachmentPreviewGap = 8.0;
+const _bottomStackReservedHeight = 140.0;
+
+const homeConversationStageKey = ValueKey('home_conversation_stage');
+const homeBottomInputStackKey = ValueKey('home_bottom_input_stack');
+const homeEmptyStateAmbientKey = ValueKey('home_empty_state_ambient');
 
 /// 颜色常量
 const _chatBgColor = AppColors.slate50;
@@ -49,6 +55,7 @@ class HomeScreen extends StatefulWidget {
   final Future<void> Function(String transcript)? onAutoSendTranscript;
   final ChatBloc? chatBloc;
   final bool autoLoadHistory;
+  final List<XFile> initialSelectedImages;
 
   const HomeScreen({
     super.key,
@@ -57,6 +64,7 @@ class HomeScreen extends StatefulWidget {
     this.onAutoSendTranscript,
     this.chatBloc,
     this.autoLoadHistory = true,
+    this.initialSelectedImages = const [],
   });
 
   @override
@@ -96,6 +104,7 @@ class _HomeScreenState extends State<HomeScreen>
       vsync: this,
       duration: const Duration(milliseconds: _rippleDurationMs),
     );
+    _selectedImages.addAll(widget.initialSelectedImages);
     if (widget.autoLoadHistory) {
       _chatBloc.loadHistory();
     }
@@ -158,14 +167,15 @@ class _HomeScreenState extends State<HomeScreen>
             body: SafeArea(
               child: Stack(
                 children: [
+                  const Positioned.fill(child: HomeBackgroundField()),
                   Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
                       _buildHeader(context),
                       Expanded(child: _buildChatArea(context, state)),
-                      _buildImagePreview(),
-                      _buildInputContainer(context, state),
                     ],
                   ),
+                  _buildBottomInputStack(context, state),
                   if (_isRecording) _buildRecordingGestureOverlay(),
                 ],
               ),
@@ -177,80 +187,11 @@ class _HomeScreenState extends State<HomeScreen>
   }
 
   Widget _buildHeader(BuildContext context) {
-    return SizedBox(
-      height: _headerHeight,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: _defaultPadding),
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: [
-            IconButton(
-              icon: const Icon(
-                LucideIcons.settings,
-                size: _iconSize,
-                color: AppColors.slate900,
-              ),
-              onPressed: () => context.push('/settings'),
-            ),
-            Row(
-              children: [
-                IconButton(
-                  icon: const Icon(
-                    LucideIcons.calendar,
-                    size: _iconSize,
-                    color: AppColors.slate900,
-                  ),
-                  onPressed: () => context.push('/calendar/dayweek?from=home'),
-                ),
-                const SizedBox(width: _itemSpacing),
-                IconButton(
-                  icon: Stack(
-                    clipBehavior: Clip.none,
-                    children: [
-                      const Icon(
-                        LucideIcons.messageSquare,
-                        size: _iconSize,
-                        color: AppColors.slate900,
-                      ),
-                      if (_unreadCount > 0)
-                        Positioned(
-                          right: -4,
-                          top: -4,
-                          child: Container(
-                            padding: const EdgeInsets.symmetric(
-                              horizontal: 4,
-                              vertical: 2,
-                            ),
-                            decoration: BoxDecoration(
-                              color: AppColors.red500,
-                              borderRadius: BorderRadius.circular(8),
-                            ),
-                            constraints: const BoxConstraints(
-                              minWidth: 16,
-                              minHeight: 16,
-                            ),
-                            child: Text(
-                              _unreadCount > 99
-                                  ? '99+'
-                                  : _unreadCount.toString(),
-                              style: const TextStyle(
-                                fontSize: 10,
-                                fontWeight: FontWeight.w600,
-                                color: AppColors.white,
-                              ),
-                              textAlign: TextAlign.center,
-                            ),
-                          ),
-                        ),
-                    ],
-                  ),
-                  onPressed: () => context.push('/messages/invites'),
-                ),
-              ],
-            ),
-          ],
-        ),
-      ),
+    return HomeFloatingHeader(
+      unreadCount: _unreadCount,
+      onTapSettings: () => context.push('/settings'),
+      onTapCalendar: () => context.push('/calendar/dayweek?from=home'),
+      onTapMessages: () => context.push('/messages/invites'),
     );
   }
 
@@ -262,67 +203,74 @@ class _HomeScreenState extends State<HomeScreen>
       return const Center(child: CircularProgressIndicator());
     }
 
-    if (state.items.isEmpty) {
-      return Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          const Expanded(
-            child: Center(
-              child: Text(
-                '开始对话吧',
-                style: TextStyle(fontSize: 16, color: AppColors.slate400),
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(
+        _defaultPadding,
+        0,
+        _defaultPadding,
+        _bottomStackReservedHeight,
+      ),
+      child: KeyedSubtree(
+        key: homeConversationStageKey,
+        child: Stack(
+          children: [
+            if (state.items.isEmpty)
+              const Positioned.fill(child: _HomeEmptyStateAmbient())
+            else
+              Positioned.fill(
+                child: RefreshIndicator(
+                  onRefresh: () => _onRefresh(context),
+                  child: ListView.builder(
+                    controller: _scrollController,
+                    physics: const AlwaysScrollableScrollPhysics(),
+                    padding: const EdgeInsets.only(top: AppSpacing.sm),
+                    itemCount:
+                        state.items.length + (state.hasEarlierHistory ? 1 : 0),
+                    itemBuilder: (context, index) {
+                      if (index == 0 && state.hasEarlierHistory) {
+                        return _buildLoadMoreButton(
+                          context,
+                          state.isLoadingHistory,
+                        );
+                      }
+
+                      final itemIndex = state.hasEarlierHistory
+                          ? index - 1
+                          : index;
+                      final item = state.items[itemIndex];
+
+                      final showDateDivider =
+                          itemIndex == 0 ||
+                          !_isSameDay(
+                            state.items[itemIndex - 1].timestamp,
+                            item.timestamp,
+                          );
+
+                      return Column(
+                        crossAxisAlignment: CrossAxisAlignment.stretch,
+                        children: [
+                          if (showDateDivider)
+                            _buildDateDivider(item.timestamp),
+                          Padding(
+                            padding: const EdgeInsets.only(
+                              bottom: _itemSpacing,
+                            ),
+                            child: _buildChatItem(item),
+                          ),
+                        ],
+                      );
+                    },
+                  ),
+                ),
               ),
-            ),
-          ),
-          if (showWaitingIndicator)
-            _buildWaitingIndicator(currentStage: state.currentStage),
-        ],
-      );
-    }
-
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: [
-        Expanded(
-          child: RefreshIndicator(
-            onRefresh: () => _onRefresh(context),
-            child: ListView.builder(
-              controller: _scrollController,
-              physics: const AlwaysScrollableScrollPhysics(),
-              padding: const EdgeInsets.all(_defaultPadding),
-              itemCount: state.items.length + (state.hasEarlierHistory ? 1 : 0),
-              itemBuilder: (context, index) {
-                if (index == 0 && state.hasEarlierHistory) {
-                  return _buildLoadMoreButton(context, state.isLoadingHistory);
-                }
-
-                final itemIndex = state.hasEarlierHistory ? index - 1 : index;
-                final item = state.items[itemIndex];
-
-                final showDateDivider =
-                    itemIndex == 0 ||
-                    !_isSameDay(
-                      state.items[itemIndex - 1].timestamp,
-                      item.timestamp,
-                    );
-
-                return Column(
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  children: [
-                    if (showDateDivider) _buildDateDivider(item.timestamp),
-                    Padding(
-                      padding: const EdgeInsets.only(bottom: _itemSpacing),
-                      child: _buildChatItem(item),
-                    ),
-                  ],
-                );
-              },
-            ),
-          ),
+            if (showWaitingIndicator)
+              Align(
+                alignment: Alignment.bottomLeft,
+                child: _buildWaitingIndicator(currentStage: state.currentStage),
+              ),
+          ],
         ),
-        if (showWaitingIndicator)
-          _buildWaitingIndicator(currentStage: state.currentStage),
-      ],
+      ),
     );
   }
 
@@ -351,7 +299,7 @@ class _HomeScreenState extends State<HomeScreen>
               color: AppColors.blue600,
             ),
           ),
-          SizedBox(width: 8),
+          SizedBox(width: AppSpacing.sm),
           Text(
             label,
             style: TextStyle(fontSize: 14, color: AppColors.slate500),
@@ -591,7 +539,7 @@ class _HomeScreenState extends State<HomeScreen>
         mainAxisSize: MainAxisSize.min,
         children: [
           Icon(statusIcon, size: 16, color: statusColor),
-          const SizedBox(width: 8),
+          const SizedBox(width: AppSpacing.sm),
           Text(
             item.toolName,
             style: const TextStyle(
@@ -600,11 +548,11 @@ class _HomeScreenState extends State<HomeScreen>
               color: AppColors.slate700,
             ),
           ),
-          const SizedBox(width: 8),
+          const SizedBox(width: AppSpacing.sm),
           Text(statusText, style: TextStyle(fontSize: 12, color: statusColor)),
           if (item.toolName == 'front.navigate_to_route' &&
               item.status == ToolCallStatus.pending) ...[
-            const SizedBox(width: 8),
+            const SizedBox(width: AppSpacing.sm),
             GestureDetector(
               onTap: () => _chatBloc.approveToolCall(item.callId),
               child: Container(
@@ -629,62 +577,28 @@ class _HomeScreenState extends State<HomeScreen>
     return UiSchemaRenderer.render(item.uiCard);
   }
 
-  Widget _buildImagePreview() {
-    if (_selectedImages.isEmpty) {
-      return const SizedBox.shrink();
-    }
-
-    return Padding(
-      padding: const EdgeInsets.only(
-        left: _inputPadding,
-        right: _inputPadding,
-        bottom: AppSpacing.sm,
-      ),
-      child: Wrap(
-        spacing: AppSpacing.sm,
-        runSpacing: AppSpacing.sm,
-        children: _selectedImages.asMap().entries.map((entry) {
-          final index = entry.key;
-          final image = entry.value;
-          return _buildImageThumbnail(image, index);
-        }).toList(),
-      ),
-    );
-  }
-
-  Widget _buildImageThumbnail(XFile image, int index) {
-    return Stack(
-      children: [
-        ClipRRect(
-          borderRadius: BorderRadius.circular(AppRadius.md),
-          child: Image.file(
-            File(image.path),
-            width: 80,
-            height: 80,
-            fit: BoxFit.cover,
+  Widget _buildBottomInputStack(BuildContext context, ChatState state) {
+    return Align(
+      alignment: Alignment.bottomCenter,
+      child: Padding(
+        padding: const EdgeInsets.all(AppSpacing.lg),
+        child: KeyedSubtree(
+          key: homeBottomInputStackKey,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              HomeAttachmentStrip(
+                images: _selectedImages,
+                onRemove: _removeImage,
+              ),
+              if (_selectedImages.isNotEmpty)
+                const SizedBox(height: AppSpacing.sm),
+              _buildInputContainer(context, state),
+            ],
           ),
         ),
-        Positioned(
-          top: 4,
-          right: 4,
-          child: GestureDetector(
-            onTap: () => _removeImage(index),
-            child: Container(
-              width: 24,
-              height: 24,
-              decoration: const BoxDecoration(
-                color: AppColors.red500,
-                shape: BoxShape.circle,
-              ),
-              child: const Icon(
-                LucideIcons.x,
-                size: 14,
-                color: AppColors.white,
-              ),
-            ),
-          ),
-        ),
-      ],
+      ),
     );
   }
 
@@ -698,8 +612,7 @@ class _HomeScreenState extends State<HomeScreen>
     final isWaitingAgent =
         state.isWaitingFirstToken || state.isStreaming || state.isCancelling;
     return Container(
-      padding: const EdgeInsets.all(AppSpacing.lg),
-      color: _chatBgColor,
+      padding: EdgeInsets.zero,
       child: MessageComposer(
         mode: _isHoldToSpeakMode
             ? MessageComposerMode.holdToSpeak
@@ -1103,3 +1016,33 @@ class _HomeScreenState extends State<HomeScreen>
     );
   }
 }
+
+class _HomeEmptyStateAmbient extends StatelessWidget {
+  const _HomeEmptyStateAmbient();
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: IgnorePointer(
+        child: Container(
+          key: homeEmptyStateAmbientKey,
+          width: double.infinity,
+          height: AppSpacing.xxl * 6,
+          margin: const EdgeInsets.symmetric(horizontal: AppSpacing.xxl),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(AppSpacing.xxl * 2),
+            gradient: LinearGradient(
+              begin: Alignment.centerLeft,
+              end: Alignment.centerRight,
+              colors: [
+                AppColors.homeBackgroundGlowSoft.withValues(alpha: 0.12),
+                AppColors.homeBackgroundGlow.withValues(alpha: 0.08),
+                AppColors.homeBackgroundGlowSoft.withValues(alpha: 0.12),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}