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,
),
),
),
)),
),
);
}

1
lib/pages/movies/movie_form_page.dart
View File

@@ -893,6 +893,7 @@ class _MovieFormPageState extends State<MovieFormPage> {
('综艺', 'variety'),
('纪录片', 'documentary'),
('微短剧', 'short'),
('其他', 'other'),
];
/// 构建状态选项

75
lib/pages/movies/movie_tab_page.dart
View File

@@ -4,6 +4,7 @@ import '../../models/data_models.dart';
import '../../providers/app_provider.dart';
import '../../utils/user_prefs.dart';
import '../../widgets/movie_status_bar.dart';
import '../../widgets/movie_category_bar.dart';
import '../../widgets/movie_list_item.dart';
import '../../widgets/animated_star_rating.dart';
import '../../widgets/shimmer_skeleton.dart';
@@ -34,6 +35,8 @@ class _MovieTabPageState extends State<MovieTabPage> {
int _lastEditRefreshCounter = 0;
int _prevMovieCount = -1;
int _prevLayoutStyle = -1;
int _prevCategoryIndex = -1;
int _prevDisplayMode = -1;
double _swipeOffset = 0.0; // 当前拖动偏移量（用于左右滑动切换状态）
static const _statusMap = {0: 'watched', 1: 'watching', 2: 'want_to_watch'};
@@ -72,6 +75,8 @@ class _MovieTabPageState extends State<MovieTabPage> {
// 仅在数据或布局实际变化时刷新列表，避免底部导航栏显隐等UI变化误触发重载
final statusChanged = provider.movieStatusIndex != _lastStatusIndex;
final layoutChanged = provider.movieLayoutStyle != _prevLayoutStyle;
final categoryChanged = provider.movieCategoryIndex != _prevCategoryIndex;
final displayModeChanged = provider.movieDisplayMode != _prevDisplayMode;
final countChanged = provider.movies.length != _prevMovieCount;
final editRefreshed = provider.editRefreshCounter > _lastEditRefreshCounter;
if (editRefreshed && provider.lastEditedItemId != null) {
@@ -88,8 +93,10 @@ class _MovieTabPageState extends State<MovieTabPage> {
}
return;
}
if (statusChanged || layoutChanged || countChanged || editRefreshed) {
if (statusChanged || layoutChanged || categoryChanged || displayModeChanged || countChanged || editRefreshed) {
_prevLayoutStyle = provider.movieLayoutStyle;
_prevCategoryIndex = provider.movieCategoryIndex;
_prevDisplayMode = provider.movieDisplayMode;
_prevMovieCount = provider.movies.length;
_loadFirst();
}
@@ -107,14 +114,29 @@ class _MovieTabPageState extends State<MovieTabPage> {
Future<void> _loadFirst() async {
final provider = context.read<AppProvider>();
final isWallMode = provider.movieWallMode;
final isCategoryMode = provider.movieDisplayMode == 1;
final statusIdx = provider.movieStatusIndex;
final categoryIdx = provider.movieCategoryIndex;
_lastStatusIndex = statusIdx;
_initialized = true;
// 影视墙模式：不筛选状态，使用用户选择的排序（默认创建时间）
final status = isWallMode ? null : (_statusMap[statusIdx] ?? 'watched');
// 影视墙模式：不筛选状态和分类
// 分类模式：按分类筛选
// 观看状态模式：按状态筛选
String? status;
String? category;
if (isWallMode) {
status = null;
category = null;
} else if (isCategoryMode) {
status = null;
category = MovieCategoryBar.categoryValue(categoryIdx);
} else {
status = _statusMap[statusIdx] ?? 'watched';
category = null;
}
final sortMode = UserPrefs().movieSortMode;
setState(() { _isLoading = true; _offset = 0; _hasMore = true; });
final list = await provider.loadMoviesPaged(status: status, offset: 0, sortMode: sortMode);
final list = await provider.loadMoviesPaged(status: status, category: category, offset: 0, sortMode: sortMode);
if (!mounted) return;
setState(() {
_items.clear();
@@ -130,9 +152,21 @@ class _MovieTabPageState extends State<MovieTabPage> {
setState(() => _isLoading = true);
final provider = context.read<AppProvider>();
final isWallMode = provider.movieWallMode;
final status = isWallMode ? null : (_statusMap[provider.movieStatusIndex] ?? 'watched');
final isCategoryMode = provider.movieDisplayMode == 1;
String? status;
String? category;
if (isWallMode) {
status = null;
category = null;
} else if (isCategoryMode) {
status = null;
category = MovieCategoryBar.categoryValue(provider.movieCategoryIndex);
} else {
status = _statusMap[provider.movieStatusIndex] ?? 'watched';
category = null;
}
final sortMode = UserPrefs().movieSortMode;
final list = await provider.loadMoviesPaged(status: status, offset: _offset, sortMode: sortMode);
final list = await provider.loadMoviesPaged(status: status, category: category, offset: _offset, sortMode: sortMode);
if (!mounted) return;
setState(() {
_items.addAll(list);
@@ -165,7 +199,10 @@ class _MovieTabPageState extends State<MovieTabPage> {
final masterContent = Column(
children: [
if (!isWallMode) const MovieStatusBar(),
if (!isWallMode)
provider.movieDisplayMode == 1
? const MovieCategoryBar()
: const MovieStatusBar(),
Expanded(child: _buildBody(context)),
],
);
@@ -212,7 +249,7 @@ class _MovieTabPageState extends State<MovieTabPage> {
);
}();
// 用 GestureDetector 包裹，左右滑动切换状态（用 Transform 而非 AnimatedContainer padding 避免负数崩溃）
// 用 GestureDetector 包裹，左右滑动切换状态/分类
return GestureDetector(
onHorizontalDragStart: (_) => _swipeOffset = 0.0,
onHorizontalDragUpdate: (details) => setState(() => _swipeOffset += details.primaryDelta ?? 0),
@@ -223,10 +260,17 @@ class _MovieTabPageState extends State<MovieTabPage> {
return;
}
final direction = (velocity ?? 0) > 0 ? -1 : 1; // 右滑→上一个，左滑→下一个
final currentIndex = provider.movieStatusIndex;
final newIndex = (currentIndex + direction + 3) % 3;
setState(() => _swipeOffset = 0.0);
provider.setMovieStatusIndex(newIndex);
if (provider.movieDisplayMode == 1) {
// 分类模式
final count = MovieCategoryBar.count;
final newIndex = (provider.movieCategoryIndex + direction + count) % count;
provider.setMovieCategoryIndex(newIndex);
} else {
// 观看状态模式
final newIndex = (provider.movieStatusIndex + direction + 3) % 3;
provider.setMovieStatusIndex(newIndex);
}
},
child: TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: _swipeOffset.clamp(-100.0, 100.0)),
@@ -492,13 +536,18 @@ class _MovieTabPageState extends State<MovieTabPage> {
final colors = Theme.of(context).colorScheme;
final provider = context.read<AppProvider>();
final isWallMode = provider.movieWallMode;
final statusText = isWallMode ? '' : ['已看', '在看', '想看'][statusIndex];
final isCategoryMode = provider.movieDisplayMode == 1;
final emptyText = isWallMode
? '暂无影片'
: isCategoryMode
? '暂无${MovieCategoryBar.categoryLabel(provider.movieCategoryIndex)}'
: '暂无${['已看', '在看', '想看'][statusIndex]}的影片';
return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Container(width: 80, height: 80,
decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(20)),
child: Icon(Icons.movie_outlined, size: 40, color: colors.onSurface.withValues(alpha: 0.25))),
const SizedBox(height: 20),
Text(isWallMode ? '暂无影片' : '暂无$statusText的影片', style: TextStyle(fontSize: 16, color: colors.onSurface.withValues(alpha: 0.4))),
Text(emptyText, style: TextStyle(fontSize: 16, color: colors.onSurface.withValues(alpha: 0.4))),
]));
}
}

12
lib/pages/profile/feature_settings_page.dart
View File

@@ -29,6 +29,7 @@ class _FeatureSettingsPageState extends State<FeatureSettingsPage> {
bool _showTags = true;
bool _showMdReader = true;
bool _showEpub = true;
bool _showQuickActions = true;
@override
void initState() {
@@ -52,6 +53,7 @@ class _FeatureSettingsPageState extends State<FeatureSettingsPage> {
_showTags = _userPrefs.showSidebarTags;
_showMdReader = _userPrefs.showSidebarMdReader;
_showEpub = _userPrefs.showSidebarEpub;
_showQuickActions = _userPrefs.showSidebarQuickActions;
});
}
@@ -204,6 +206,16 @@ class _FeatureSettingsPageState extends State<FeatureSettingsPage> {
await _userPrefs.setShowSidebarRecent(v);
setState(() => _showRecent = v);
}),
Divider(
height: 0.5,
indent: 24,
endIndent: 24,
color: colors.outlineVariant),
_buildSwitchItem(Icons.bolt_outlined, '快捷操作', '快速新建笔记/影视/导入EPUB', _showQuickActions,
(v) async {
await _userPrefs.setShowSidebarQuickActions(v);
setState(() => _showQuickActions = v);
}),
Divider(
height: 0.5,
indent: 24,

532
lib/pages/profile/layout_settings_page.dart
View File

@@ -17,6 +17,7 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
int _bookLayout = 0;
int _gameLayout = 0;
bool _movieWallMode = false;
int _movieDisplayMode = 0;
bool _bookshelfMode = false;
bool _gameWallMode = false;
@@ -28,6 +29,7 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
_bookLayout = _userPrefs.bookLayoutStyle;
_gameLayout = _userPrefs.gameLayoutStyle;
_movieWallMode = _userPrefs.movieWallMode;
_movieDisplayMode = _userPrefs.movieDisplayMode;
_bookshelfMode = _userPrefs.bookshelfMode;
_gameWallMode = _userPrefs.gameWallMode;
}
@@ -39,181 +41,342 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
backgroundColor: colors.surface,
appBar: AppBar(title: const Text('布局设置')),
body: ListView(
padding: const EdgeInsets.symmetric(vertical: 16),
padding: const EdgeInsets.fromLTRB(16, 16, 16, 32),
children: [
// ── 影视 ──
_buildCategoryHeader(Icons.movie_outlined, '影视', colors.primary),
_buildWallSwitch(
icon: Icons.wallpaper_outlined,
title: '影视墙模式',
subtitle: '显示全部影片，不区分状态',
value: _movieWallMode,
onChanged: (v) => _setWallMode('movie', v),
_buildCategoryTile(
icon: Icons.movie_outlined,
title: '影视',
color: colors.primary,
subtitle: _movieSubtitle,
onTap: _showMovieSheet,
),
_buildLayoutSelector(
selected: _movieLayout,
options: [
(0, Icons.grid_view_outlined, '海报网格'),
(1, Icons.view_list_outlined, '列表'),
(2, Icons.crop_landscape_outlined, '大图卡片'),
],
onChanged: (v) => _setLayout('movie', v),
_buildCategoryTile(
icon: Icons.menu_book_outlined,
title: '阅读',
color: colors.primary,
subtitle: _bookSubtitle,
onTap: _showBookSheet,
),
const SizedBox(height: 8),
Divider(
height: 1,
indent: 16,
endIndent: 16,
color: colors.outlineVariant.withValues(alpha: 0.5)),
const SizedBox(height: 8),
// ── 阅读 ──
_buildCategoryHeader(Icons.menu_book_outlined, '阅读', colors.primary),
_buildWallSwitch(
icon: Icons.auto_stories_outlined,
title: '书架模式',
subtitle: '显示全部书籍，不区分状态',
value: _bookshelfMode,
onChanged: (v) => _setWallMode('book', v),
_buildCategoryTile(
icon: Icons.note_outlined,
title: '笔记',
color: colors.primary,
subtitle: _noteSubtitle,
onTap: _showNoteSheet,
),
_buildLayoutSelector(
selected: _bookLayout,
options: [
(0, Icons.grid_view_outlined, '海报网格'),
(1, Icons.view_list_outlined, '列表'),
],
onChanged: (v) => _setLayout('book', v),
),
const SizedBox(height: 8),
Divider(
height: 1,
indent: 16,
endIndent: 16,
color: colors.outlineVariant.withValues(alpha: 0.5)),
const SizedBox(height: 8),
// ── 笔记 ──
_buildCategoryHeader(Icons.note_outlined, '笔记', colors.primary),
_buildLayoutSelector(
selected: _noteLayout,
options: [
(0, Icons.view_list_outlined, '列表'),
(1, Icons.grid_view_outlined, '瀑布流'),
(2, Icons.timeline_outlined, '时间线'),
],
onChanged: (v) => _setLayout('note', v),
),
const SizedBox(height: 8),
Divider(
height: 1,
indent: 16,
endIndent: 16,
color: colors.outlineVariant.withValues(alpha: 0.5)),
const SizedBox(height: 8),
// ── 游戏 ──
_buildCategoryHeader(Icons.sports_esports_outlined, '游戏', colors.primary),
_buildWallSwitch(
icon: Icons.wallpaper_outlined,
title: '游戏墙模式',
subtitle: '显示全部游戏，不区分状态',
value: _gameWallMode,
onChanged: (v) => _setWallMode('game', v),
),
_buildLayoutSelector(
selected: _gameLayout,
options: [
(0, Icons.grid_view_outlined, '海报网格'),
(1, Icons.view_list_outlined, '列表'),
(2, Icons.crop_landscape_outlined, '大图卡片'),
],
onChanged: (v) => _setLayout('game', v),
_buildCategoryTile(
icon: Icons.sports_esports_outlined,
title: '游戏',
color: colors.primary,
subtitle: _gameSubtitle,
onTap: _showGameSheet,
),
],
),
);
}
Widget _buildCategoryHeader(IconData icon, String title, Color color) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 12),
child: Row(
children: [
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: color.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, size: 16, color: color),
),
const SizedBox(width: 10),
Text(title,
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w700, color: color)),
],
),
);
String get _movieSubtitle {
final parts = <String>[];
if (_movieWallMode) {
parts.add('影视墙');
} else {
parts.add(_movieDisplayMode == 1 ? '分类状态' : '观看状态');
}
parts.add(['海报网格', '列表', '大图卡片'][_movieLayout]);
return parts.join(' · ');
}
Widget _buildWallSwitch({
String get _bookSubtitle {
final parts = <String>[];
if (_bookshelfMode) parts.add('书架模式');
parts.add(['海报网格', '列表'][_bookLayout]);
return parts.join(' · ');
}
String get _noteSubtitle => ['列表', '瀑布流', '时间线'][_noteLayout];
String get _gameSubtitle {
final parts = <String>[];
if (_gameWallMode) parts.add('游戏墙');
parts.add(['海报网格', '列表', '大图卡片'][_gameLayout]);
return parts.join(' · ');
}
// ─── 分类行 ──────────────────────────────────────────────────────
Widget _buildCategoryTile({
required IconData icon,
required String title,
required Color color,
required String subtitle,
required VoidCallback onTap,
}) {
final colors = Theme.of(context).colorScheme;
return Container(
margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: colors.surfaceContainerHigh,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: colors.outlineVariant.withValues(alpha: 0.5), width: 0.5),
),
child: InkWell(
borderRadius: BorderRadius.circular(14),
onTap: onTap,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 14, 12, 14),
child: Row(
children: [
Container(
width: 36, height: 36,
decoration: BoxDecoration(
color: color.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(10),
),
child: Icon(icon, size: 20, color: color),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface)),
const SizedBox(height: 2),
Text(subtitle, style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.45))),
],
),
),
Icon(Icons.chevron_right, size: 18, color: colors.onSurface.withValues(alpha: 0.25)),
],
),
),
),
);
}
// ─── 弹窗内组件 ──────────────────────────────────────────────────
Widget _sheetSwitchRow({
required String title,
required String subtitle,
required bool value,
required ValueChanged<bool> onChanged,
required ColorScheme colors,
}) {
final colors = Theme.of(context).colorScheme;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
decoration: BoxDecoration(
color: colors.surfaceContainerHighest.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: colors.primary.withValues(alpha: 0.08),
borderRadius: BorderRadius.circular(10),
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: colors.onSurface)),
const SizedBox(height: 2),
Text(subtitle, style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.45))),
],
),
),
Switch(value: value, onChanged: onChanged, activeThumbColor: colors.primary),
],
),
);
}
Widget _sheetOptionRow({
required String label,
required int selected,
required List<(int, IconData, String)> options,
required ValueChanged<int> onChanged,
required ColorScheme colors,
}) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 6),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(label, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: colors.onSurface.withValues(alpha: 0.6))),
const SizedBox(width: 12),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: options.map((opt) {
final isSelected = selected == opt.$1;
return Padding(
padding: const EdgeInsets.only(left: 6),
child: GestureDetector(
onTap: () => onChanged(opt.$1),
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
decoration: BoxDecoration(
color: isSelected ? colors.primary : colors.surface,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: isSelected ? colors.primary : colors.outlineVariant.withValues(alpha: 0.7),
width: isSelected ? 0 : 0.5,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(opt.$2, size: 14, color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.5)),
const SizedBox(width: 4),
Text(opt.$3,
style: TextStyle(
fontSize: 11,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.5),
)),
],
),
),
),
);
}).toList(),
),
),
],
),
);
}
Widget _sheetDivider(ColorScheme colors) {
return Divider(height: 1, indent: 20, endIndent: 20, color: colors.outlineVariant.withValues(alpha: 0.4));
}
// ─── 弹窗 ────────────────────────────────────────────────────────
void _showMovieSheet() {
final colors = Theme.of(context).colorScheme;
showModalBottomSheet(
context: context,
backgroundColor: colors.surface,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(16))),
builder: (ctx) => StatefulBuilder(
builder: (ctx, setSheetState) => SafeArea(
child: Column(mainAxisSize: MainAxisSize.min, children: [
_sheetHandle(colors),
_sheetTitle('影视布局', colors),
_sheetSwitchRow(
title: '影视墙模式', subtitle: '显示全部影片，不区分状态',
value: _movieWallMode, onChanged: (v) { _setWallMode('movie', v); setSheetState(() {}); }, colors: colors,
),
if (!_movieWallMode) ...[
_sheetDivider(colors),
_sheetOptionRow(
label: '显示模式', selected: _movieDisplayMode,
options: const [(0, Icons.check_circle_outline, '观看状态'), (1, Icons.category_outlined, '分类状态')],
onChanged: (v) { _setDisplayMode('movie', v); setSheetState(() {}); }, colors: colors,
),
child: Icon(icon,
size: 20, color: colors.primary.withValues(alpha: 0.8)),
],
_sheetDivider(colors),
_sheetOptionRow(
label: '布局样式', selected: _movieLayout,
options: const [(0, Icons.grid_view_outlined, '海报网格'), (1, Icons.view_list_outlined, '列表'), (2, Icons.crop_landscape_outlined, '大图卡片')],
onChanged: (v) { _setLayout('movie', v); setSheetState(() {}); }, colors: colors,
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: colors.onSurface)),
const SizedBox(height: 2),
Text(subtitle,
style: TextStyle(
fontSize: 12,
color: colors.onSurface.withValues(alpha: 0.5))),
],
),
),
Switch(
value: value,
onChanged: onChanged,
activeThumbColor: colors.primary,
),
],
const SizedBox(height: 16),
]),
),
),
);
}
void _showBookSheet() {
final colors = Theme.of(context).colorScheme;
showModalBottomSheet(
context: context,
backgroundColor: colors.surface,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(16))),
builder: (ctx) => StatefulBuilder(
builder: (ctx, setSheetState) => SafeArea(
child: Column(mainAxisSize: MainAxisSize.min, children: [
_sheetHandle(colors),
_sheetTitle('阅读布局', colors),
_sheetSwitchRow(
title: '书架模式', subtitle: '显示全部书籍，不区分状态',
value: _bookshelfMode, onChanged: (v) { _setWallMode('book', v); setSheetState(() {}); }, colors: colors,
),
_sheetDivider(colors),
_sheetOptionRow(
label: '布局样式', selected: _bookLayout,
options: const [(0, Icons.grid_view_outlined, '海报网格'), (1, Icons.view_list_outlined, '列表')],
onChanged: (v) { _setLayout('book', v); setSheetState(() {}); }, colors: colors,
),
const SizedBox(height: 16),
]),
),
),
);
}
void _showNoteSheet() {
final colors = Theme.of(context).colorScheme;
showModalBottomSheet(
context: context,
backgroundColor: colors.surface,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(16))),
builder: (ctx) => StatefulBuilder(
builder: (ctx, setSheetState) => SafeArea(
child: Column(mainAxisSize: MainAxisSize.min, children: [
_sheetHandle(colors),
_sheetTitle('笔记布局', colors),
_sheetOptionRow(
label: '布局样式', selected: _noteLayout,
options: const [(0, Icons.view_list_outlined, '列表'), (1, Icons.grid_view_outlined, '瀑布流'), (2, Icons.timeline_outlined, '时间线')],
onChanged: (v) { _setLayout('note', v); setSheetState(() {}); }, colors: colors,
),
const SizedBox(height: 16),
]),
),
),
);
}
void _showGameSheet() {
final colors = Theme.of(context).colorScheme;
showModalBottomSheet(
context: context,
backgroundColor: colors.surface,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(16))),
builder: (ctx) => StatefulBuilder(
builder: (ctx, setSheetState) => SafeArea(
child: Column(mainAxisSize: MainAxisSize.min, children: [
_sheetHandle(colors),
_sheetTitle('游戏布局', colors),
_sheetSwitchRow(
title: '游戏墙模式', subtitle: '显示全部游戏，不区分状态',
value: _gameWallMode, onChanged: (v) { _setWallMode('game', v); setSheetState(() {}); }, colors: colors,
),
_sheetDivider(colors),
_sheetOptionRow(
label: '布局样式', selected: _gameLayout,
options: const [(0, Icons.grid_view_outlined, '海报网格'), (1, Icons.view_list_outlined, '列表'), (2, Icons.crop_landscape_outlined, '大图卡片')],
onChanged: (v) { _setLayout('game', v); setSheetState(() {}); }, colors: colors,
),
const SizedBox(height: 16),
]),
),
),
);
}
Widget _sheetHandle(ColorScheme colors) {
return Container(width: 36, height: 4, margin: const EdgeInsets.only(top: 12, bottom: 8),
decoration: BoxDecoration(color: colors.onSurface.withValues(alpha: 0.15), borderRadius: BorderRadius.circular(2)));
}
Widget _sheetTitle(String title, ColorScheme colors) {
return Padding(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 12),
child: Align(alignment: Alignment.centerLeft,
child: Text(title, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: colors.onSurface))),
);
}
// ─── 状态更新 ──────────────────────────────────────────────────
void _setWallMode(String type, bool value) async {
switch (type) {
case 'movie':
@@ -231,6 +394,15 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
}
}
void _setDisplayMode(String type, int value) async {
switch (type) {
case 'movie':
await _userPrefs.setMovieDisplayMode(value);
setState(() => _movieDisplayMode = value);
if (mounted) context.read<AppProvider>().setMovieDisplayMode(value);
}
}
void _setLayout(String type, int value) async {
switch (type) {
case 'note':
@@ -249,66 +421,4 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
if (mounted) context.read<AppProvider>().setGameLayoutStyle(value);
}
}
Widget _buildLayoutSelector({
required int selected,
required List<(int, IconData, String)> options,
required ValueChanged<int> onChanged,
}) {
final colors = Theme.of(context).colorScheme;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
child: Row(
children: options.map((opt) {
final isSelected = selected == opt.$1;
return Expanded(
child: GestureDetector(
onTap: () => onChanged(opt.$1),
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
margin: const EdgeInsets.symmetric(horizontal: 4),
padding: const EdgeInsets.symmetric(vertical: 14),
decoration: BoxDecoration(
color: isSelected
? colors.primary
: colors.surfaceContainerHighest.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isSelected
? colors.primary
: colors.outlineVariant.withValues(alpha: 0.5),
width: isSelected ? 0 : 0.5,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
opt.$2,
size: 22,
color: isSelected
? colors.onPrimary
: colors.onSurface.withValues(alpha: 0.5),
),
const SizedBox(height: 6),
Text(
opt.$3,
style: TextStyle(
fontSize: 12,
fontWeight:
isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected
? colors.onPrimary
: colors.onSurface.withValues(alpha: 0.5),
),
),
],
),
),
),
);
}).toList(),
),
);
}
}