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

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