qzl/social-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增 Home Screen 视觉设计 token (背景、工具栏、对话区、输入框等)
- 重构首页布局为浮动式底部输入栈结构
- 新增 HomeBackgroundField、HomeFloatingHeader、HomeAttachmentStrip 组件
- 优化 MessageComposer 视觉样式为悬浮 shell 设计
- 添加相关测试用例
This commit is contained in:
qzl
2026-03-13 17:25:29 +08:00
parent 4c10929498
commit 3273d63b23
10 changed files with 1212 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/features/home/ui/screens/home_screen.dart
+140 -197
View File
@@ -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),
],
),
),
),
),
);
}
}
apps/lib/features/home/ui/widgets/home_attachment_strip.dart
+106
View File
@@ -0,0 +1,106 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart';
const homeAttachmentStripKey = ValueKey('home_attachment_strip');
class HomeAttachmentStrip extends StatelessWidget {
const HomeAttachmentStrip({
super.key,
required this.images,
required this.onRemove,
});
final List<XFile> images;
final ValueChanged<int> onRemove;
@override
Widget build(BuildContext context) {
if (images.isEmpty) {
return const SizedBox.shrink();
}
return Container(
key: homeAttachmentStripKey,
padding: const EdgeInsets.all(AppSpacing.sm),
decoration: BoxDecoration(
color: AppColors.homeAttachmentSurface,
borderRadius: BorderRadius.circular(AppRadius.xl),
border: Border.all(color: AppColors.homeComposerBorder),
),
child: Wrap(
spacing: AppSpacing.sm,
runSpacing: AppSpacing.sm,
children: images.asMap().entries.map((entry) {
return _AttachmentPreviewTile(
image: entry.value,
onRemove: () => onRemove(entry.key),
);
}).toList(),
),
);
}
}
class _AttachmentPreviewTile extends StatelessWidget {
const _AttachmentPreviewTile({required this.image, required this.onRemove});
final XFile image;
final VoidCallback onRemove;
@override
Widget build(BuildContext context) {
const previewExtent = AppSpacing.xxl * 3 + AppSpacing.sm;
return Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(AppRadius.md),
child: Image.file(
File(image.path),
width: previewExtent,
height: previewExtent,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return Container(
width: previewExtent,
height: previewExtent,
color: AppColors.white,
alignment: Alignment.center,
child: const Icon(
LucideIcons.image,
size: AppSpacing.xl,
color: AppColors.slate400,
),
);
},
),
),
Positioned(
top: AppSpacing.xs,
right: AppSpacing.xs,
child: GestureDetector(
onTap: onRemove,
child: Container(
width: AppSpacing.lg + AppSpacing.sm,
height: AppSpacing.lg + AppSpacing.sm,
decoration: const BoxDecoration(
color: AppColors.red500,
shape: BoxShape.circle,
),
child: const Icon(
LucideIcons.x,
size: AppSpacing.md,
color: AppColors.white,
),
),
),
),
],
);
}
}
apps/lib/features/home/ui/widgets/home_background_field.dart
+85
View File
@@ -0,0 +1,85 @@
import 'package:flutter/material.dart';
import '../../../../core/theme/design_tokens.dart';
const homeBackgroundFieldKey = ValueKey('home_background_field');
const homeTopGlowKey = ValueKey('home_top_glow');
const homeBottomGlowKey = ValueKey('home_bottom_glow');
class HomeBackgroundField extends StatelessWidget {
const HomeBackgroundField({super.key});
@override
Widget build(BuildContext context) {
return DecoratedBox(
key: homeBackgroundFieldKey,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [AppColors.homeBackgroundTop, AppColors.homeBackgroundBottom],
),
),
child: const Stack(children: [_HomeTopGlow(), _HomeBottomGlow()]),
);
}
}
class _HomeTopGlow extends StatelessWidget {
const _HomeTopGlow();
@override
Widget build(BuildContext context) {
return Align(
alignment: const Alignment(-0.25, -0.9),
child: IgnorePointer(
child: Container(
key: homeTopGlowKey,
width: AppSpacing.xxl * 10,
height: AppSpacing.xxl * 7,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(AppSpacing.xxl * 3),
color: AppColors.homeBackgroundGlowSoft.withValues(alpha: 0.28),
boxShadow: [
BoxShadow(
color: AppColors.homeBackgroundGlow.withValues(alpha: 0.28),
blurRadius: AppSpacing.xxl * 3,
spreadRadius: AppSpacing.xl,
),
],
),
),
),
);
}
}
class _HomeBottomGlow extends StatelessWidget {
const _HomeBottomGlow();
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.bottomCenter,
child: IgnorePointer(
child: Container(
key: homeBottomGlowKey,
width: double.infinity,
height: AppSpacing.xxl * 6,
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.xl),
decoration: BoxDecoration(
color: AppColors.homeBackgroundGlowSoft.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(AppSpacing.xxl * 2),
boxShadow: [
BoxShadow(
color: AppColors.homeBackgroundGlow.withValues(alpha: 0.12),
blurRadius: AppSpacing.xxl * 2,
spreadRadius: AppSpacing.md,
),
],
),
),
),
);
}
}
apps/lib/features/home/ui/widgets/home_floating_header.dart
+150
View File
@@ -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,
),
),
),
),
],
),
);
}
}