界面完善

This commit is contained in:
DelLevin-Home
2026-06-20 21:32:23 +08:00
parent e193c294af
commit a84d4c03e8
11 changed files with 1241 additions and 287 deletions

View File

@@ -10,6 +10,7 @@ import '../../widgets/fade_in_local_image.dart';
import '../../models/data_models.dart';
import '../../utils/toast_util.dart';
import '../../utils/image_path_helper.dart';
import '../../widgets/genre_selector_page.dart';
/// 添加/编辑书籍页面 - 紧凑双行布局设计
class BookFormPage extends StatefulWidget {
@@ -266,13 +267,18 @@ class _BookFormPageState extends State<BookFormPage> {
final tags = await provider.getTags('book_genre', excludeHidden: true);
final existingNames = tags.map((t) => t['name'] as String).toList();
if (mounted) {
_showMultiValueDialog(
title: '添加类型',
initialValues: _genres,
hint: '如:小说、历史、传记',
existingTags: existingNames,
onConfirm: (values) => setState(() => _genres = values),
final result = await Navigator.push<List<String>>(
context,
MaterialPageRoute(
builder: (_) => GenreSelectorPage(
title: '选择类型',
existingTags: existingNames,
initialSelected: _genres,
hint: '如:小说、历史、传记',
),
),
);
if (result != null) setState(() => _genres = result);
}
},
),
@@ -314,15 +320,9 @@ class _BookFormPageState extends State<BookFormPage> {
label: '书籍简介',
value: _summaryController.text,
icon: Icons.description_outlined,
height: 120,
height: 160,
scrollable: true,
onTap: () => _showTextInputDialog(
title: '书籍简介',
initialValue: _summaryController.text,
hint: '写下书籍简介...',
maxLines: 8,
onConfirm: (value) => setState(() => _summaryController.text = value),
),
onTap: () => _editSummary(),
),
),
],
@@ -715,6 +715,7 @@ class _BookFormPageState extends State<BookFormPage> {
/// 构建星星评分(支持手动输入)
Widget _buildStarRating() {
final colors = Theme.of(context).colorScheme;
final hasRating = _ratingController.text.isNotEmpty;
return Row(
children: [
Text(
@@ -727,6 +728,14 @@ class _BookFormPageState extends State<BookFormPage> {
const SizedBox(width: 12),
// 手动输入框
_buildRatingInputField(),
// 清除按钮
if (hasRating) ...[
const SizedBox(width: 8),
GestureDetector(
onTap: () => setState(() => _ratingController.clear()),
child: Icon(Icons.close, size: 16, color: colors.onSurface.withValues(alpha: 0.35)),
),
],
],
);
}
@@ -1429,6 +1438,19 @@ class _BookFormPageState extends State<BookFormPage> {
return null;
}
/// 全屏编辑书籍简介
Future<void> _editSummary() async {
final result = await Navigator.push<String>(
context,
MaterialPageRoute(
builder: (_) => _SummaryEditorPage(initialText: _summaryController.text),
),
);
if (result != null) {
setState(() => _summaryController.text = result);
}
}
/// 显示文本输入对话框
Future<void> _showTextInputDialog({
required String title,
@@ -1522,7 +1544,6 @@ class _TextInputDialogState extends State<_TextInputDialog> {
content: TextField(
controller: controller,
maxLines: widget.maxLines,
autofocus: true,
style: TextStyle(fontSize: 15, color: colors.onSurface),
decoration: InputDecoration(
hintText: widget.hint,
@@ -1664,6 +1685,7 @@ class _MultiValueDialogState extends State<_MultiValueDialog> {
spacing: 8,
runSpacing: 8,
children: values.map((v) {
final display = v.length > 8 ? '${v.substring(0, 8)}...' : v;
return Container(
padding: const EdgeInsets.only(left: 12, right: 6, top: 7, bottom: 7),
decoration: BoxDecoration(
@@ -1674,7 +1696,7 @@ class _MultiValueDialogState extends State<_MultiValueDialog> {
mainAxisSize: MainAxisSize.min,
children: [
Text(
v,
display,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
@@ -1718,6 +1740,7 @@ class _MultiValueDialogState extends State<_MultiValueDialog> {
spacing: 8,
runSpacing: 8,
children: availableTags.map((tag) {
final display = tag.length > 8 ? '${tag.substring(0, 8)}...' : tag;
return GestureDetector(
onTap: () {
setState(() => values.add(tag));
@@ -1738,7 +1761,7 @@ class _MultiValueDialogState extends State<_MultiValueDialog> {
Icon(Icons.add, size: 14, color: colors.onSurface.withValues(alpha: 0.4)),
const SizedBox(width: 4),
Text(
tag,
display,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
@@ -1827,3 +1850,61 @@ class _MultiValueDialogState extends State<_MultiValueDialog> {
);
}
}
/// 书籍简介全屏编辑页
class _SummaryEditorPage extends StatefulWidget {
final String initialText;
const _SummaryEditorPage({required this.initialText});
@override
State<_SummaryEditorPage> createState() => _SummaryEditorPageState();
}
class _SummaryEditorPageState extends State<_SummaryEditorPage> {
late final TextEditingController _controller;
@override
void initState() {
super.initState();
_controller = TextEditingController(text: widget.initialText);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return Scaffold(
backgroundColor: colors.surface,
appBar: AppBar(
title: const Text('书籍简介'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, _controller.text.trim()),
child: Text('完成', style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w600, color: colors.primary,
)),
),
const SizedBox(width: 8),
],
),
body: TextField(
controller: _controller,
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.top,
style: TextStyle(fontSize: 15, color: colors.onSurface, height: 1.6),
decoration: InputDecoration(
hintText: '写下书籍简介...',
hintStyle: TextStyle(color: colors.onSurface.withValues(alpha: 0.3)),
contentPadding: const EdgeInsets.all(20),
border: InputBorder.none,
),
),
);
}
}

View File

@@ -10,6 +10,7 @@ import '../../widgets/fade_in_local_image.dart';
import '../../models/data_models.dart';
import '../../utils/toast_util.dart';
import '../../utils/image_path_helper.dart';
import '../../widgets/genre_selector_page.dart';
/// 添加/编辑影视页面 - 紧凑双行布局设计
class MovieFormPage extends StatefulWidget {
@@ -542,13 +543,18 @@ class _MovieFormPageState extends State<MovieFormPage> {
final tags = await provider.getTags('movie_genre', excludeHidden: true);
final existingNames = tags.map((t) => t['name'] as String).toList();
if (mounted) {
_showMultiValueDialog(
title: '添加类型',
initialValues: _genres,
hint: '如:剧情、科幻、悬疑',
existingTags: existingNames,
onConfirm: (values) => setState(() => _genres = values),
final result = await Navigator.push<List<String>>(
context,
MaterialPageRoute(
builder: (_) => GenreSelectorPage(
title: '选择类型',
existingTags: existingNames,
initialSelected: _genres,
hint: '如:剧情、科幻、悬疑',
),
),
);
if (result != null) setState(() => _genres = result);
}
},
),
@@ -606,15 +612,9 @@ class _MovieFormPageState extends State<MovieFormPage> {
label: '剧情简介',
value: _summaryController.text,
icon: Icons.description_outlined,
height: 120,
height: 160,
scrollable: true,
onTap: () => _showTextInputDialog(
title: '剧情简介',
initialValue: _summaryController.text,
hint: '写下剧情简介...',
maxLines: 8,
onConfirm: (value) => setState(() => _summaryController.text = value),
),
onTap: () => _editSummary(),
),
),
],
@@ -733,6 +733,19 @@ class _MovieFormPageState extends State<MovieFormPage> {
);
}
/// 全屏编辑剧情简介
Future<void> _editSummary() async {
final result = await Navigator.push<String>(
context,
MaterialPageRoute(
builder: (_) => _SummaryEditorPage(initialText: _summaryController.text),
),
);
if (result != null) {
setState(() => _summaryController.text = result);
}
}
/// 显示文本输入对话框
Future<void> _showTextInputDialog({
required String title,
@@ -1252,6 +1265,7 @@ class _MovieFormPageState extends State<MovieFormPage> {
/// 构建星星评分(支持手动输入)
Widget _buildStarRating() {
final colors = Theme.of(context).colorScheme;
final hasRating = _ratingController.text.isNotEmpty;
return Row(
children: [
Text(
@@ -1264,6 +1278,14 @@ class _MovieFormPageState extends State<MovieFormPage> {
const SizedBox(width: 12),
// 手动输入框
_buildRatingInputField(),
// 清除按钮
if (hasRating) ...[
const SizedBox(width: 8),
GestureDetector(
onTap: () => setState(() => _ratingController.clear()),
child: Icon(Icons.close, size: 16, color: colors.onSurface.withValues(alpha: 0.35)),
),
],
],
);
}
@@ -2096,6 +2118,7 @@ class _MultiValueDialogState extends State<_MultiValueDialog> {
spacing: 8,
runSpacing: 8,
children: values.map((v) {
final display = v.length > 8 ? '${v.substring(0, 8)}...' : v;
return Container(
padding: const EdgeInsets.only(left: 12, right: 6, top: 7, bottom: 7),
decoration: BoxDecoration(
@@ -2106,7 +2129,7 @@ class _MultiValueDialogState extends State<_MultiValueDialog> {
mainAxisSize: MainAxisSize.min,
children: [
Text(
v,
display,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
@@ -2150,6 +2173,7 @@ class _MultiValueDialogState extends State<_MultiValueDialog> {
spacing: 8,
runSpacing: 8,
children: availableTags.map((tag) {
final display = tag.length > 8 ? '${tag.substring(0, 8)}...' : tag;
return GestureDetector(
onTap: () {
setState(() => values.add(tag));
@@ -2170,7 +2194,7 @@ class _MultiValueDialogState extends State<_MultiValueDialog> {
Icon(Icons.add, size: 14, color: colors.onSurface.withValues(alpha: 0.4)),
const SizedBox(width: 4),
Text(
tag,
display,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
@@ -2306,7 +2330,6 @@ class _TextInputDialogState extends State<_TextInputDialog> {
content: TextField(
controller: controller,
maxLines: widget.maxLines,
autofocus: true,
style: TextStyle(fontSize: 15, color: colors.onSurface),
decoration: InputDecoration(
hintText: widget.hint,
@@ -2344,3 +2367,61 @@ class _TextInputDialogState extends State<_TextInputDialog> {
);
}
}
/// 剧情简介全屏编辑页
class _SummaryEditorPage extends StatefulWidget {
final String initialText;
const _SummaryEditorPage({required this.initialText});
@override
State<_SummaryEditorPage> createState() => _SummaryEditorPageState();
}
class _SummaryEditorPageState extends State<_SummaryEditorPage> {
late final TextEditingController _controller;
@override
void initState() {
super.initState();
_controller = TextEditingController(text: widget.initialText);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return Scaffold(
backgroundColor: colors.surface,
appBar: AppBar(
title: const Text('剧情简介'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, _controller.text.trim()),
child: Text('完成', style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w600, color: colors.primary,
)),
),
const SizedBox(width: 8),
],
),
body: TextField(
controller: _controller,
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.top,
style: TextStyle(fontSize: 15, color: colors.onSurface, height: 1.6),
decoration: InputDecoration(
hintText: '写下剧情简介...',
hintStyle: TextStyle(color: colors.onSurface.withValues(alpha: 0.3)),
contentPadding: const EdgeInsets.all(20),
border: InputBorder.none,
),
),
);
}
}

View File

@@ -232,9 +232,9 @@ class _MovieTabPageState extends State<MovieTabPage> {
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(movie.title, maxLines: 1, overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface)),
if (movie.alternateTitles.isNotEmpty) ...[
...[
const SizedBox(height: 3),
Text(movie.alternateTitles.take(2).join(''), maxLines: 1, overflow: TextOverflow.ellipsis,
Text(_buildSubtitle(movie), maxLines: 1, overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.35))),
],
const SizedBox(height: 6),
@@ -248,6 +248,14 @@ class _MovieTabPageState extends State<MovieTabPage> {
);
}
String _buildSubtitle(Movie movie) {
final parts = <String>[];
if (movie.directors.isNotEmpty) parts.add(movie.directors.first);
if (movie.actors.isNotEmpty) parts.add(movie.actors.take(2).join(''));
if (movie.genres.isNotEmpty) parts.add(movie.genres.take(2).join(''));
return parts.join(' · ');
}
void _showDeleteDialog(BuildContext context, Movie movie) {
final colors = Theme.of(context).colorScheme;
showDialog(

View File

@@ -8,6 +8,7 @@ import 'package:webview_flutter/webview_flutter.dart';
import '../models/data_models.dart';
import '../providers/app_provider.dart';
import '../utils/user_prefs.dart';
import '../utils/theme/app_theme.dart';
import '../utils/toast_util.dart';
import 'recycle_bin_page.dart';
import 'sync/backup_page.dart';
@@ -704,6 +705,8 @@ class _SettingsPageState extends State<SettingsPage> {
Divider(height: 0.5, indent: 24, endIndent: 24, color: colors.outlineVariant),
_buildThemeModeSelector(),
Divider(height: 0.5, indent: 24, endIndent: 24, color: colors.outlineVariant),
_buildColorSchemeSelector(),
Divider(height: 0.5, indent: 24, endIndent: 24, color: colors.outlineVariant),
_buildSectionHeader('其他设置'),
_buildSwitchItem(
icon: Icons.swipe_vertical_outlined,
@@ -781,22 +784,32 @@ class _SettingsPageState extends State<SettingsPage> {
backgroundColor: Colors.transparent,
builder: (ctx) => Container(
decoration: BoxDecoration(color: colors.surface, borderRadius: const BorderRadius.vertical(top: Radius.circular(16))),
padding: const EdgeInsets.symmetric(vertical: 12),
padding: const EdgeInsets.only(bottom: 12),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(width: 36, height: 4, decoration: BoxDecoration(color: colors.onSurface.withValues(alpha: 0.15), borderRadius: BorderRadius.circular(2))),
const SizedBox(height: 20),
Align(alignment: Alignment.centerLeft, child: Padding(padding: const EdgeInsets.symmetric(horizontal: 24), child: Text('主题模式', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: colors.onSurface)))),
const SizedBox(height: 16),
for (int i = 0; i < _themeModeLabels.length; i++)
ListTile(
leading: Container(width: 36, height: 36, decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(10)), child: Icon(_themeModeIcons[i], color: colors.onSurface.withValues(alpha: 0.6))),
title: Text(_themeModeLabels[i], style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: colors.onSurface)),
trailing: _themeMode == i ? Icon(Icons.check, color: colors.onSurface, size: 20) : null,
onTap: () async { await _setThemeMode(i); Navigator.pop(ctx); },
),
Container(width: 36, height: 4, margin: const EdgeInsets.only(top: 12, bottom: 12),
decoration: BoxDecoration(color: colors.onSurface.withValues(alpha: 0.15), borderRadius: BorderRadius.circular(2))),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Align(alignment: Alignment.centerLeft, child: Text('主题模式', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: colors.onSurface))),
),
const SizedBox(height: 8),
for (int i = 0; i < _themeModeLabels.length; i++)
InkWell(
onTap: () async { await _setThemeMode(i); Navigator.pop(ctx); },
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 10),
child: Row(
children: [
Icon(_themeModeIcons[i], size: 18, color: colors.onSurface.withValues(alpha: 0.6)),
const SizedBox(width: 12),
Expanded(child: Text(_themeModeLabels[i], style: TextStyle(fontSize: 13, color: colors.onSurface))),
if (_themeMode == i) Icon(Icons.check, color: colors.onSurface, size: 18),
],
),
),
),
],
),
),
@@ -816,6 +829,88 @@ class _SettingsPageState extends State<SettingsPage> {
}
}
Widget _buildColorSchemeSelector() {
final colors = Theme.of(context).colorScheme;
final provider = context.watch<AppProvider>();
final currentIndex = provider.colorSchemeIndex;
return InkWell(
onTap: () => _showColorSchemePicker(),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
children: [
Container(width: 36, height: 36, decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(10)),
child: Icon(Icons.palette_outlined, color: colors.onSurface.withValues(alpha: 0.6), size: 18)),
const SizedBox(width: 12),
Expanded(
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text('配色方案', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: colors.onSurface)),
const SizedBox(height: 2),
Text(AppTheme.colorSchemeNames[currentIndex], style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.4))),
]),
),
Icon(Icons.chevron_right, color: colors.onSurface.withValues(alpha: 0.25), size: 20),
],
),
),
);
}
void _showColorSchemePicker() {
final colors = Theme.of(context).colorScheme;
final provider = context.read<AppProvider>();
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: (ctx) => Container(
decoration: BoxDecoration(color: colors.surface, borderRadius: const BorderRadius.vertical(top: Radius.circular(16))),
padding: const EdgeInsets.only(bottom: 20),
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))),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Align(alignment: Alignment.centerLeft, child: Text('配色方案', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: colors.onSurface))),
),
const SizedBox(height: 12),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, mainAxisSpacing: 10, crossAxisSpacing: 10, childAspectRatio: 2.2),
itemCount: AppTheme.seedColors.length,
itemBuilder: (_, i) {
final selected = provider.colorSchemeIndex == i;
return GestureDetector(
onTap: () { provider.setColorScheme(i); Navigator.pop(ctx); },
child: Container(
decoration: BoxDecoration(
color: selected ? AppTheme.seedColors[i].withValues(alpha: 0.12) : colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: selected ? AppTheme.seedColors[i] : Colors.transparent, width: 1.5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(width: 14, height: 14, decoration: BoxDecoration(color: AppTheme.seedColors[i], shape: BoxShape.circle)),
const SizedBox(width: 8),
Text(AppTheme.colorSchemeNames[i], style: TextStyle(fontSize: 13, fontWeight: selected ? FontWeight.w600 : FontWeight.w400, color: colors.onSurface)),
],
),
),
);
},
),
),
],
),
),
);
}
Widget _buildSwitchItem({required IconData icon, required String title, required String subtitle, required bool value, required ValueChanged<bool> onChanged}) {
final colors = Theme.of(context).colorScheme;
return InkWell(

File diff suppressed because it is too large Load Diff