iven/nj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): 发现页动态化 — DiscoverBloc + API 驱动 + 下拉刷新

Browse Source 
- 新增 DiscoverBloc (LoadData/Refresh) + DiscoverModels 4 个数据类
- DiscoverPage 改为 BlocBuilder 驱动: loading/loaded/error/empty 四态
- 替换全部硬编码占位数据为 API 实时数据
- 添加 RefreshIndicator 下拉刷新
- 离线异常时保留已有数据，友好错误提示
This commit is contained in:
iven
2026-06-07 10:43:23 +08:00
parent 3bc2ca7332
commit a5d2b0409f
5 changed files with 572 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

369
app/lib/features/discover/views/discover_page.dart
View File

@@ -8,8 +8,10 @@
// 5. 达人日记 expert-diaries (纵向列表)
//
// 注意：本页是发现/灵感浏览，区别于 /search（主动搜索）
// 数据来源：GET /diary/discover → DiscoverBloc
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import '../../../core/constants/design_tokens.dart';
@@ -17,48 +19,198 @@ import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_radius.dart';
import '../../../core/theme/app_shadows.dart';
import '../../../core/theme/app_typography.dart';
import '../bloc/discover_bloc.dart';
import '../models/discover_models.dart';
class DiscoverPage extends StatelessWidget {
const DiscoverPage({super.key});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
final bg = isDark ? AppColors.bgDark : AppColors.bgLight;
return Scaffold(
backgroundColor: bg,
backgroundColor: _bgColor(context),
body: SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: DesignTokens.spacing20),
child: RefreshIndicator(
onRefresh: () async {
context.read<DiscoverBloc>().add(const DiscoverRefresh());
// 等待状态变化完成
await context.read<DiscoverBloc>().stream.firstWhere(
(s) => s is DiscoverLoaded || s is DiscoverError,
orElse: () => const DiscoverLoaded(DiscoverData()),
);
},
child: BlocBuilder<DiscoverBloc, DiscoverState>(
builder: (context, state) {
return SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.symmetric(
horizontal: DesignTokens.spacing20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: DesignTokens.spacing12),
_SearchBar(onTap: () => context.push('/search')),
const SizedBox(height: DesignTokens.spacing20),
_buildContent(context, state),
const SizedBox(height: DesignTokens.spacing24),
],
),
);
},
),
),
),
);
}
/// 根据状态构建主要内容
Widget _buildContent(BuildContext context, DiscoverState state) {
return switch (state) {
DiscoverInitial() => _buildLoading(context),
DiscoverLoading() => _buildLoading(context),
DiscoverLoaded(:final data) => _buildLoaded(context, data),
DiscoverError(:final message) => _buildError(context, message),
};
}
/// 加载中状态 — 骨架占位
Widget _buildLoading(BuildContext context) {
return const Column(
children: [
_LoadingSkeleton(height: 140),
SizedBox(height: DesignTokens.spacing24),
_LoadingSkeleton(height: 44),
SizedBox(height: DesignTokens.spacing24),
_LoadingSkeleton(height: 200),
],
);
}
/// 加载成功 — 渲染真实数据
Widget _buildLoaded(BuildContext context, DiscoverData data) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 每日推荐
_InspirationCard(item: data.dailyInspiration),
// 热门话题
if (data.hotTopics.isNotEmpty) ...[
const SizedBox(height: DesignTokens.spacing24),
const _SectionTitle(title: '热门话题'),
const SizedBox(height: DesignTokens.spacing12),
_HotTopicsChips(topics: data.hotTopics),
],
// 精选模板
if (data.featuredTemplates.isNotEmpty) ...[
const SizedBox(height: DesignTokens.spacing24),
const _SectionTitle(title: '精选模板'),
const SizedBox(height: DesignTokens.spacing12),
_FeaturedTemplatesGrid(templates: data.featuredTemplates),
],
// 达人日记
if (data.expertDiaries.isNotEmpty) ...[
const SizedBox(height: DesignTokens.spacing24),
const _SectionTitle(title: '达人日记'),
const SizedBox(height: DesignTokens.spacing12),
_ExpertDiariesList(diaries: data.expertDiaries),
],
// 全部为空时的占位提示
if (data.dailyInspiration == null &&
data.hotTopics.isEmpty &&
data.featuredTemplates.isEmpty &&
data.expertDiaries.isEmpty)
_buildEmptyHint(context),
],
);
}
/// 错误状态
Widget _buildError(BuildContext context, String message) {
return Column(
children: [
const _LoadingSkeleton(height: 140),
const SizedBox(height: DesignTokens.spacing24),
Container(
width: double.infinity,
padding: const EdgeInsets.all(DesignTokens.spacing16),
decoration: BoxDecoration(
color: AppColors.rose.withValues(alpha: 0.1),
borderRadius: AppRadius.mdBorder,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.cloud_off_rounded,
size: 32, color: AppColors.rose),
const SizedBox(height: DesignTokens.spacing8),
Text(message,
style: TextStyle(
fontSize: 13,
color: Theme.of(context).colorScheme.onSurfaceVariant),
textAlign: TextAlign.center),
const SizedBox(height: DesignTokens.spacing12),
_SearchBar(onTap: () => context.push('/search')),
const SizedBox(height: DesignTokens.spacing20),
const _InspirationCard(
title: '今日推荐：图书馆的午后时光',
author: '小暖 · 5月31日',
emoji: '📚',
TextButton.icon(
onPressed: () => context
.read<DiscoverBloc>()
.add(const DiscoverLoadData()),
icon: const Icon(Icons.refresh_rounded, size: 18),
label: const Text('重试'),
),
const SizedBox(height: DesignTokens.spacing24),
_SectionTitle(title: '热门话题'),
const SizedBox(height: DesignTokens.spacing12),
const _HotTopicsChips(),
const SizedBox(height: DesignTokens.spacing24),
_SectionTitle(title: '精选模板'),
const SizedBox(height: DesignTokens.spacing12),
const _FeaturedTemplatesGrid(),
const SizedBox(height: DesignTokens.spacing24),
_SectionTitle(title: '达人日记'),
const SizedBox(height: DesignTokens.spacing12),
const _ExpertDiariesList(),
const SizedBox(height: DesignTokens.spacing24),
],
),
),
],
);
}
/// 空数据提示
Widget _buildEmptyHint(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: DesignTokens.spacing32),
child: Center(
child: Column(
children: [
const Text('✨', style: TextStyle(fontSize: 40)),
const SizedBox(height: DesignTokens.spacing12),
Text('还没有发现内容',
style: TextStyle(
fontSize: 15,
color: Theme.of(context).colorScheme.onSurfaceVariant,
)),
const SizedBox(height: 4),
Text('写下你的第一篇日记，出现在这里吧！',
style: TextStyle(
fontSize: 13,
color: Theme.of(context).colorScheme.onSurfaceVariant
.withValues(alpha: 0.7),
)),
],
),
),
);
}
Color _bgColor(BuildContext context) {
final theme = Theme.of(context);
return theme.brightness == Brightness.dark
? AppColors.bgDark
: AppColors.bgLight;
}
}
/// 加载骨架占位
class _LoadingSkeleton extends StatelessWidget {
const _LoadingSkeleton({required this.height});
final double height;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: height,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest
.withValues(alpha: 0.3),
borderRadius: AppRadius.lgBorder,
),
);
}
@@ -77,7 +229,8 @@ class _SearchBar extends StatelessWidget {
borderRadius: AppRadius.pillBorder,
child: Container(
height: 48,
padding: const EdgeInsets.symmetric(horizontal: DesignTokens.spacing16),
padding:
const EdgeInsets.symmetric(horizontal: DesignTokens.spacing16),
decoration: BoxDecoration(
color: theme.colorScheme.surface,
borderRadius: AppRadius.pillBorder,
@@ -85,7 +238,8 @@ class _SearchBar extends StatelessWidget {
),
child: Row(
children: [
Icon(Icons.search_rounded, size: 20, color: theme.colorScheme.onSurfaceVariant),
Icon(Icons.search_rounded,
size: 20, color: theme.colorScheme.onSurfaceVariant),
const SizedBox(width: DesignTokens.spacing12),
Text(
'搜索日记、模板、话题...',
@@ -103,18 +257,49 @@ class _SearchBar extends StatelessWidget {
/// 2. 每日推荐卡片（渐变背景）
class _InspirationCard extends StatelessWidget {
const _InspirationCard({
required this.title,
required this.author,
required this.emoji,
});
final String title;
final String author;
final String emoji;
const _InspirationCard({required this.item});
final InspirationItem? item;
@override
Widget build(BuildContext context) {
if (item == null) {
// 无推荐日记时的占位卡片
return Container(
width: double.infinity,
padding: const EdgeInsets.all(DesignTokens.spacing20),
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [AppColors.accent, AppColors.tertiary],
),
borderRadius: AppRadius.lgBorder,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('今日推荐',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: Colors.white.withValues(alpha: 0.85),
letterSpacing: 0.5,
)),
const SizedBox(height: DesignTokens.spacing12),
const Text('今天还没有推荐日记',
style: TextStyle(fontSize: 16, color: Colors.white)),
const SizedBox(height: 4),
Text('写下你的日记，可能出现在这里哦 ✨',
style: TextStyle(
fontSize: 12,
color: Colors.white.withValues(alpha: 0.7))),
],
),
);
}
final emoji = DiscoverData.moodToEmoji(item!.mood);
return Container(
width: double.infinity,
padding: const EdgeInsets.all(DesignTokens.spacing20),
@@ -191,17 +376,19 @@ class _InspirationCard extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
item!.title,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.white,
height: 1.25,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 6),
Text(
author,
'${item!.authorName} · ${_formatDate(item!.date)}',
style: TextStyle(
fontSize: 12,
color: Colors.white.withValues(alpha: 0.75),
@@ -218,6 +405,10 @@ class _InspirationCard extends StatelessWidget {
),
);
}
String _formatDate(DateTime date) {
return '${date.month}月${date.day}日';
}
}
class _SectionTitle extends StatelessWidget {
@@ -241,12 +432,8 @@ class _SectionTitle extends StatelessWidget {
/// 3. 热门话题（横向滚动 chips）
class _HotTopicsChips extends StatelessWidget {
const _HotTopicsChips();
static const _topics = [
'#期末备考', '#读书笔记', '#旅行手账', '#美食日记',
'#校园生活', '#自我成长', '#心情日记', '#手写摘抄',
];
const _HotTopicsChips({required this.topics});
final List<TagCount> topics;
@override
Widget build(BuildContext context) {
@@ -255,24 +442,31 @@ class _HotTopicsChips extends StatelessWidget {
height: 44,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: _topics.length,
separatorBuilder: (_, __) => const SizedBox(width: DesignTokens.spacing8),
itemCount: topics.length,
separatorBuilder: (_, __) =>
const SizedBox(width: DesignTokens.spacing8),
itemBuilder: (context, index) {
final isHot = index < 3;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
padding:
const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
decoration: BoxDecoration(
color: isHot ? theme.colorScheme.primary : theme.colorScheme.surface,
color:
isHot ? theme.colorScheme.primary : theme.colorScheme.surface,
borderRadius: AppRadius.pillBorder,
border: isHot ? null : Border.all(color: theme.colorScheme.outlineVariant),
border: isHot
? null
: Border.all(color: theme.colorScheme.outlineVariant),
),
alignment: Alignment.center,
child: Text(
_topics[index],
'#${topics[index].tag}',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: isHot ? theme.colorScheme.onPrimary : theme.colorScheme.onSurface,
color: isHot
? theme.colorScheme.onPrimary
: theme.colorScheme.onSurface,
),
),
);
@@ -284,14 +478,8 @@ class _HotTopicsChips extends StatelessWidget {
/// 4. 精选模板（2 列网格）
class _FeaturedTemplatesGrid extends StatelessWidget {
const _FeaturedTemplatesGrid();
static const _templates = [
('📖', '每日心情日记', '2.3k 人使用', AppColors.secondarySoftLight),
('🎓', '期末复习计划', '1.8k 人使用', AppColors.tertiarySoftLight),
('🌿', '植物观察日记', '956 人使用', AppColors.roseSoftLight),
('✈️', '旅行手账本', '742 人使用', AppColors.secondarySoftLight),
];
const _FeaturedTemplatesGrid({required this.templates});
final List<DiscoverTemplateItem> templates;
@override
Widget build(BuildContext context) {
@@ -304,13 +492,28 @@ class _FeaturedTemplatesGrid extends StatelessWidget {
crossAxisSpacing: DesignTokens.spacing12,
childAspectRatio: 0.85,
),
itemCount: _templates.length,
itemCount: templates.length,
itemBuilder: (context, index) {
final t = _templates[index];
return _TemplateCard(emoji: t.$1, name: t.$2, usage: t.$3, bg: t.$4);
final t = templates[index];
return _TemplateCard(
emoji: t.emoji,
name: t.name,
usage: t.usageText,
bg: _categoryColor(t.category),
);
},
);
}
Color _categoryColor(String? category) {
return switch (category) {
'日常' => AppColors.secondarySoftLight,
'校园' => AppColors.tertiarySoftLight,
'心情' => AppColors.roseSoftLight,
'旅行' => AppColors.secondarySoftLight,
_ => AppColors.secondarySoftLight,
};
}
}
class _TemplateCard extends StatelessWidget {
@@ -368,7 +571,9 @@ class _TemplateCard extends StatelessWidget {
const SizedBox(height: 2),
Text(
usage,
style: TextStyle(fontSize: 11, color: theme.colorScheme.onSurfaceVariant),
style: TextStyle(
fontSize: 11,
color: theme.colorScheme.onSurfaceVariant),
),
],
),
@@ -380,19 +585,14 @@ class _TemplateCard extends StatelessWidget {
/// 5. 达人日记（纵向列表）
class _ExpertDiariesList extends StatelessWidget {
const _ExpertDiariesList();
static const _experts = [
('🌸', '小桃子', '春日漫步手账', '记录春天的每一朵花开...', '342 赞'),
('☕', '咖啡少年', '咖啡馆日记', '今天尝试了一家新店...', '218 赞'),
('📝', '学习达人', '考研倒计时30天', '坚持就是胜利...', '556 赞'),
];
const _ExpertDiariesList({required this.diaries});
final List<ExpertDiaryItem> diaries;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Column(
children: _experts.map((e) {
children: diaries.map((diary) {
return Container(
margin: const EdgeInsets.only(bottom: DesignTokens.spacing12),
padding: const EdgeInsets.all(DesignTokens.spacing16),
@@ -412,7 +612,8 @@ class _ExpertDiariesList extends StatelessWidget {
shape: BoxShape.circle,
),
alignment: Alignment.center,
child: Text(e.$1, style: const TextStyle(fontSize: 20)),
child: Text(diary.authorEmoji,
style: const TextStyle(fontSize: 20)),
),
const SizedBox(width: DesignTokens.spacing12),
Expanded(
@@ -422,7 +623,7 @@ class _ExpertDiariesList extends StatelessWidget {
Row(
children: [
Text(
e.$2,
diary.authorName,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
@@ -432,12 +633,13 @@ class _ExpertDiariesList extends StatelessWidget {
const SizedBox(width: DesignTokens.spacing8),
Text(
'·',
style: TextStyle(color: theme.colorScheme.onSurfaceVariant),
style: TextStyle(
color: theme.colorScheme.onSurfaceVariant),
),
const SizedBox(width: DesignTokens.spacing8),
Expanded(
child: Text(
e.$3,
diary.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
@@ -452,7 +654,9 @@ class _ExpertDiariesList extends StatelessWidget {
),
const SizedBox(height: 4),
Text(
e.$4,
diary.contentPreview.isNotEmpty
? diary.contentPreview
: '...',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
@@ -468,11 +672,14 @@ class _ExpertDiariesList extends StatelessWidget {
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.favorite_rounded, size: 14, color: AppColors.rose),
Icon(Icons.favorite_rounded,
size: 14, color: AppColors.rose),
const SizedBox(width: 4),
Text(
e.$5,
style: TextStyle(fontSize: 11, color: theme.colorScheme.onSurfaceVariant),
diary.likeText,
style: TextStyle(
fontSize: 11,
color: theme.colorScheme.onSurfaceVariant),
),
],
),