dellevin/MookNote
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

界面优化

Browse Source
This commit is contained in:
DelLevin-Home
2026-07-11 02:12:23 +08:00
parent 2e6e283218
commit 7e2a0bc106
13 changed files with 1045 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
lib/pages/epub_reader/epub_library_page.dart
View File

@@ -27,6 +27,7 @@ class _EpubLibraryPageState extends State<EpubLibraryPage> {
ViewMode _viewMode = UserPrefs().epubViewMode == 1
? ViewMode.compact
: ViewMode.relaxed;
int _sortMode = UserPrefs().epubSortMode;
@override
void initState() {
@@ -36,7 +37,7 @@ class _EpubLibraryPageState extends State<EpubLibraryPage> {
Future<void> _loadBooks() async {
if (mounted) setState(() => _isLoading = true);
final books = await _dao.getAllReaderBooks();
final books = await _dao.getAllReaderBooks(sortMode: _sortMode);
if (mounted) {
setState(() {
_books = books;
@@ -169,6 +170,54 @@ class _EpubLibraryPageState extends State<EpubLibraryPage> {
UserPrefs().setEpubViewMode(_viewMode == ViewMode.compact ? 1 : 0);
}
void _showSortMenu() {
final colors = Theme.of(context).colorScheme;
final options = [
(0, '按更新时间排序', Icons.update),
(1, '按创建时间排序', Icons.calendar_today_outlined),
(2, '按阅读进度排序', Icons.auto_stories_outlined),
(3, '按书名排序', Icons.sort_by_alpha),
];
showModalBottomSheet(
context: context,
backgroundColor: colors.surface,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(16))),
builder: (ctx) => SafeArea(
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(width: 36, height: 4, margin: const EdgeInsets.only(top: 12, bottom: 16),
decoration: BoxDecoration(color: colors.onSurface.withValues(alpha: 0.15), borderRadius: BorderRadius.circular(2))),
Align(alignment: Alignment.centerLeft, child: Padding(padding: const EdgeInsets.symmetric(horizontal: 20),
child: Text('书架排序', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: colors.onSurface)))),
const SizedBox(height: 8),
for (int i = 0; i < options.length; i++) ...[
if (i > 0) Divider(height: 0.5, indent: 20, endIndent: 20, color: colors.outlineVariant),
_sortOption(ctx, options[i].$1, options[i].$2, options[i].$3, colors),
],
const SizedBox(height: 12),
]),
),
);
}
Widget _sortOption(BuildContext ctx, int value, String label, IconData icon, ColorScheme colors) {
final selected = _sortMode == value;
return ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 20),
leading: Container(width: 36, height: 36, decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(10)),
child: Icon(icon, size: 20, color: selected ? colors.primary : colors.onSurface.withValues(alpha: 0.6))),
title: Text(label, style: TextStyle(fontSize: 14, fontWeight: selected ? FontWeight.w600 : FontWeight.w400, color: colors.onSurface)),
trailing: selected ? Icon(Icons.check, size: 20, color: colors.primary) : null,
onTap: () {
Navigator.pop(ctx);
if (_sortMode != value) {
setState(() => _sortMode = value);
UserPrefs().setEpubSortMode(value);
_loadBooks();
}
},
);
}
@override
void dispose() {
_searchCtrl.dispose();
@@ -217,6 +266,10 @@ class _EpubLibraryPageState extends State<EpubLibraryPage> {
),
onPressed: _toggleViewMode,
),
IconButton(
icon: Icon(Icons.sort, size: 20, color: colors.onSurface.withValues(alpha: 0.6)),
onPressed: _showSortMenu,
),
IconButton(
icon: Icon(Icons.add_outlined, size: 20, color: colors.onSurface.withValues(alpha: 0.6)),
onPressed: _pickAndImport,
@@ -314,14 +367,28 @@ class _EpubLibraryPageState extends State<EpubLibraryPage> {
Widget _buildListView(ColorScheme colors) {
return ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 100),
itemCount: _books.length,
itemCount: _filteredBooks.length,
itemBuilder: (context, index) {
final book = _books[index];
final book = _filteredBooks[index];
final title = book['title'] as String? ?? '';
final author = book['author'] as String? ?? '';
final coverPath = book['cover_path'] as String?;
final progress = (book['reading_percentage'] as num?)?.toDouble() ?? 0.0;
// 阅读状态推断
final String statusLabel;
final Color statusColor;
if (progress >= 1.0) {
statusLabel = '已读';
statusColor = const Color(0xFF16A34A);
} else if (progress > 0.0) {
statusLabel = '在读';
statusColor = colors.primary;
} else {
statusLabel = '未读';
statusColor = const Color(0xFFDC2626);
}
return GestureDetector(
onTap: () => _openBook(book),
onLongPress: () => _deleteBook(book),
@@ -333,36 +400,67 @@ class _EpubLibraryPageState extends State<EpubLibraryPage> {
borderRadius: BorderRadius.circular(10),
border: Border.all(color: colors.outlineVariant, width: 0.5),
),
child: Row(
child: Column(
children: [
// 封面
SizedBox(
width: 56, height: 80,
child: _buildCover(coverPath, colors),
Row(
children: [
// 封面
SizedBox(
width: 56, height: 80,
child: _buildCover(coverPath, colors),
),
const SizedBox(width: 14),
// 信息
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, maxLines: 1, overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface)),
if (author.isNotEmpty) ...[
const SizedBox(height: 4),
Text(author, maxLines: 1, overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: colors.onSurface.withValues(alpha: 0.5))),
],
const SizedBox(height: 8),
// 状态标签 + 百分比
Row(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
decoration: BoxDecoration(
color: statusColor.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4),
border: Border.all(color: statusColor.withValues(alpha: 0.25), width: 0.5),
),
child: Text(statusLabel,
style: TextStyle(fontSize: 11, fontWeight: FontWeight.w500, color: statusColor)),
),
if (progress > 0 && progress < 1.0) ...[
const SizedBox(width: 6),
Text('${(progress * 100).toInt()}%',
style: TextStyle(fontSize: 11, fontWeight: FontWeight.w500, color: colors.onSurface.withValues(alpha: 0.5))),
],
],
),
],
),
),
],
),
const SizedBox(width: 14),
// 信息
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, maxLines: 1, overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface)),
if (author.isNotEmpty) ...[
const SizedBox(height: 4),
Text(author, maxLines: 1, overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: colors.onSurface.withValues(alpha: 0.5))),
],
const SizedBox(height: 8),
// 标签
Wrap(spacing: 6, runSpacing: 4, children: [
_buildTag('EPUB', colors),
if (progress > 0) _buildTag('${(progress * 100).toInt()}%', colors),
]),
],
// 进度条
if (progress > 0) ...[
const SizedBox(height: 10),
ClipRRect(
borderRadius: BorderRadius.circular(1.5),
child: LinearProgressIndicator(
value: progress,
minHeight: 3,
backgroundColor: colors.outlineVariant.withValues(alpha: 0.3),
valueColor: AlwaysStoppedAnimation(statusColor),
),
),
),
Icon(Icons.chevron_right, size: 18, color: colors.onSurface.withValues(alpha: 0.25)),
],
],
),
),
@@ -389,15 +487,4 @@ class _EpubLibraryPageState extends State<EpubLibraryPage> {
);
}
Widget _buildTag(String label, ColorScheme colors) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(4),
),
child: Text(label,
style: TextStyle(fontSize: 10, color: colors.onSurface.withValues(alpha: 0.5))),
);
}
}

145
lib/pages/epub_reader/widgets/book_grid_item.dart
View File

@@ -41,7 +41,6 @@ class BookGridItem extends StatelessWidget {
final colors = Theme.of(context).colorScheme;
final title = book['title'] as String? ?? '';
final author = book['author'] as String? ?? '';
final progress = _readingProgress;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -60,30 +59,8 @@ class BookGridItem extends StatelessWidget {
),
clipBehavior: Clip.antiAlias,
child: _buildCoverStack(context, fit: StackFit.expand, extras: [
// 底部渐变背景 + 进度条
if (progress > 0)
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 12,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.transparent, Colors.black54],
),
),
alignment: Alignment.bottomCenter,
child: LinearProgressIndicator(
value: progress,
minHeight: 2.5,
backgroundColor: Colors.white24,
valueColor: const AlwaysStoppedAnimation(Colors.white70),
),
),
),
// 阅读状态角标
_buildStatusBadge(context),
]),
),
),
@@ -114,15 +91,17 @@ class BookGridItem extends StatelessWidget {
);
}
/// Compact: cover only, title gradient overlay + progress badge.
/// Compact: cover only, title + author gradient overlay + progress badge.
Widget _buildCompact(BuildContext context) {
final title = book['title'] as String? ?? '';
final author = book['author'] as String? ?? '';
return _buildCoverStack(
context,
fit: StackFit.expand,
extras: [
// Bottom gradient + title
// 阅读状态角标
_buildStatusBadge(context),
Positioned(
bottom: 0,
left: 0,
@@ -132,7 +111,7 @@ class BookGridItem extends StatelessWidget {
bottom: Radius.circular(6),
),
child: Container(
padding: const EdgeInsets.fromLTRB(6, 32, 6, 6),
padding: const EdgeInsets.fromLTRB(6, 24, 6, 6),
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
@@ -140,27 +119,43 @@ class BookGridItem extends StatelessWidget {
colors: [Colors.transparent, Colors.black87],
),
),
child: Text(
title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Colors.white,
fontWeight: FontWeight.w500,
shadows: [
const Shadow(
color: Colors.black54,
blurRadius: 2.0,
offset: Offset(0, 1.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Colors.white,
fontWeight: FontWeight.w500,
shadows: [
const Shadow(
color: Colors.black54,
blurRadius: 2.0,
offset: Offset(0, 1.0),
),
],
),
),
if (author.isNotEmpty) ...[
const SizedBox(height: 1),
Text(
author,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 9,
color: Colors.white.withValues(alpha: 0.7),
),
),
],
),
],
),
),
),
),
// Progress badge (top-right)
_buildProgressBadge(context),
],
);
}
@@ -198,42 +193,62 @@ class BookGridItem extends StatelessWidget {
}
Widget _buildPlaceholder(BuildContext context) {
final colors = Theme.of(context).colorScheme;
final title = book['title'] as String? ?? '';
final initial = title.isNotEmpty ? title.substring(0, 1) : '';
return Container(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
color: colors.surfaceContainerHighest,
child: Center(
child: Icon(
Icons.auto_stories_outlined,
size: 36,
color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.2),
),
child: initial.isNotEmpty
? Text(initial,
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w600,
color: colors.onSurface.withValues(alpha: 0.2),
))
: Icon(
Icons.auto_stories_outlined,
size: 36,
color: colors.onSurface.withValues(alpha: 0.2),
),
),
);
}
// ─── badge helpers ────────────────────────────────────────────────────────
/// Progress badge (compact mode).
Widget _buildProgressBadge(BuildContext context) {
/// 阅读状态角标（左上角，含百分比）
Widget _buildStatusBadge(BuildContext context) {
final colors = Theme.of(context).colorScheme;
final progress = _readingProgress;
if (progress <= 0) return const SizedBox.shrink();
final String label;
final Color color;
if (progress >= 1.0) {
label = '已读';
color = const Color(0xFF16A34A);
} else if (progress > 0.0) {
label = '在读 ${(progress * 100).toInt()}%';
color = colors.primary;
} else {
label = '未读';
color = const Color(0xFFDC2626);
}
return Positioned(
top: 8,
right: 8,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
color: Theme.of(context).colorScheme.shadow.withValues(alpha: 0.8),
child: Text(
'${(progress * 100).toStringAsFixed(0)}%',
top: 6,
left: 6,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.85),
borderRadius: BorderRadius.circular(4),
),
child: Text(label,
style: const TextStyle(
color: Colors.white,
fontSize: 10,
fontSize: 9,
fontWeight: FontWeight.w600,
),
),
),
)),
),
);
}