Aqroid/Aq-Accounting-Flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增笔记功能 图标更新

Browse Source
This commit is contained in:
Aqroid
2026-09-23 14:20:23 +08:00
parent a6e02ccbf3
commit e4cdfbc42f
34 changed files with 2511 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pages/note/folder_picker_sheet.dart
+249
View File
@@ -0,0 +1,249 @@
import 'package:flutter/material.dart';
import '../../models/note.dart';
/// 目录选择面板
///
/// 从底部弹出，展示「全部 / 未分类 / 目录树」三层结构。
/// 选中后 pop 出对应的 [NoteLocation]；直接关掉则返回 null。
class FolderPickerSheet extends StatefulWidget {
const FolderPickerSheet({
super.key,
required this.tree,
required this.current,
this.title = '选择目录',
this.showAll = true,
});
final FolderTree tree;
final NoteLocation current;
final String title;
/// 是否显示「全部」这一项。
/// 给笔记选目标目录时要关掉 —— 「全部」不是一个能存放笔记的位置。
final bool showAll;
/// 弹出面板的便捷方法
static Future<NoteLocation?> show(
BuildContext context, {
required FolderTree tree,
required NoteLocation current,
String title = '选择目录',
bool showAll = true,
}) {
return showModalBottomSheet<NoteLocation>(
context: context,
backgroundColor: Colors.white,
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (_) => FolderPickerSheet(
tree: tree,
current: current,
title: title,
showAll: showAll,
),
);
}
@override
State<FolderPickerSheet> createState() => _FolderPickerSheetState();
}
class _FolderPickerSheetState extends State<FolderPickerSheet> {
final Set<int> _expanded = {};
@override
void initState() {
super.initState();
// 默认展开当前所在目录的所有上级，用户一眼能看到自己在哪
if (widget.current.scope == NoteScope.folder && widget.current.folderId != null) {
final path = widget.tree.findPath(widget.current.folderId!);
if (path != null) {
for (final node in path) {
_expanded.add(node.id);
}
}
}
}
bool _isCurrent(NoteScope scope, int? folderId) {
if (widget.current.scope != scope) return false;
if (scope != NoteScope.folder) return true;
return widget.current.folderId == folderId;
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.75,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 10),
Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: const Color(0xFFE0D6CC),
borderRadius: BorderRadius.circular(2),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 14, 20, 6),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
widget.title,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xFF5D4037),
),
),
),
),
Flexible(
child: ListView(
shrinkWrap: true,
padding: const EdgeInsets.fromLTRB(12, 4, 12, 20),
children: [
if (widget.showAll)
_row(
icon: '📚',
name: '全部',
count: widget.tree.totalCount,
depth: 0,
selected: _isCurrent(NoteScope.all, null),
onTap: () => Navigator.pop(context, NoteLocation.all),
),
_row(
icon: '📥',
name: '未分类',
count: widget.tree.uncategorizedCount,
depth: 0,
selected: _isCurrent(NoteScope.uncategorized, null),
onTap: () => Navigator.pop(context, NoteLocation.uncategorized),
),
if (widget.tree.folders.isNotEmpty)
const Padding(
padding: EdgeInsets.fromLTRB(8, 12, 8, 4),
child: Divider(height: 1, color: Color(0xFFF0E6D8)),
),
...widget.tree.folders.map((n) => _buildNode(n, 0)),
],
),
),
],
),
),
);
}
/// 递归渲染目录节点
Widget _buildNode(FolderNode node, int depth) {
final hasChildren = node.children.isNotEmpty;
final open = _expanded.contains(node.id);
return Column(
mainAxisSize: MainAxisSize.min,
children: [
_row(
icon: (open && hasChildren) ? '📂' : '📁',
name: node.name,
count: node.noteCount,
depth: depth,
selected: _isCurrent(NoteScope.folder, node.id),
trailing: hasChildren
? GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
setState(() {
if (open) {
_expanded.remove(node.id);
} else {
_expanded.add(node.id);
}
});
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 8),
child: AnimatedRotation(
turns: open ? 0.25 : 0,
duration: const Duration(milliseconds: 150),
child: const Icon(
Icons.chevron_right,
size: 18,
color: Color(0xFFBCAAA4),
),
),
),
)
: null,
onTap: () => Navigator.pop(
context,
NoteLocation(
scope: NoteScope.folder,
folderId: node.id,
folderName: node.name,
),
),
),
if (open && hasChildren)
...node.children.map((c) => _buildNode(c, depth + 1)),
],
);
}
Widget _row({
required String icon,
required String name,
required int count,
required int depth,
required bool selected,
required VoidCallback onTap,
Widget? trailing,
}) {
return Padding(
padding: EdgeInsets.only(left: depth * 18.0),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(10),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
decoration: BoxDecoration(
color: selected ? const Color(0xFFFFF3E6) : null,
borderRadius: BorderRadius.circular(10),
),
child: Row(
children: [
Text(icon, style: const TextStyle(fontSize: 15)),
const SizedBox(width: 10),
Expanded(
child: Text(
name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14.5,
fontWeight: selected ? FontWeight.w600 : FontWeight.normal,
color: selected ? const Color(0xFFC8956E) : const Color(0xFF5D4037),
),
),
),
Text(
'$count',
style: const TextStyle(fontSize: 12, color: Color(0xFFBCAAA4)),
),
?trailing,
],
),
),
),
);
}
}
lib/pages/note/note_detail_page.dart
+401
View File
@@ -0,0 +1,401 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../api/note_api.dart';
import '../../core/network/api_env.dart';
import '../../core/network/api_exception.dart';
import '../../models/note.dart';
import '../../providers/note_provider.dart';
import '../../utils/toast.dart';
import '../../widgets/state_views.dart';
import 'folder_picker_sheet.dart';
import 'note_edit_page.dart';
/// 笔记详情页（Markdown 渲染，可编辑 / 置顶 / 删除）
class NoteDetailPage extends ConsumerWidget {
const NoteDetailPage({super.key, required this.noteId});
final int noteId;
@override
Widget build(BuildContext context, WidgetRef ref) {
final detailAsync = ref.watch(noteDetailProvider(noteId));
return Scaffold(
appBar: AppBar(
title: const Text('笔记'),
actions: [
detailAsync.maybeWhen(
data: (note) => IconButton(
tooltip: '编辑',
icon: const Icon(Icons.edit_outlined),
onPressed: () => _openEditor(context, ref, note),
),
orElse: () => const SizedBox.shrink(),
),
detailAsync.maybeWhen(
data: (note) => PopupMenuButton<String>(
icon: const Icon(Icons.more_vert),
onSelected: (value) {
if (value == 'pin') {
_togglePin(context, ref, note);
} else if (value == 'move') {
_moveTo(context, ref, note);
} else if (value == 'delete') {
_confirmDelete(context, ref, note);
}
},
itemBuilder: (_) => [
PopupMenuItem(
value: 'pin',
child: Text(note.pinned ? '取消置顶' : '置顶'),
),
const PopupMenuItem(
value: 'move',
child: Text('移动到…'),
),
const PopupMenuItem(
value: 'delete',
child: Text('删除', style: TextStyle(color: Color(0xFFD32F2F))),
),
],
),
orElse: () => const SizedBox.shrink(),
),
],
),
body: detailAsync.when(
loading: () => const Center(child: LoadingView(tip: '笔记加载中...')),
error: (e, _) => Center(
child: ErrorView(
message: asApiException(e).message,
onRetry: () => ref.invalidate(noteDetailProvider(noteId)),
),
),
data: (note) => _content(context, note),
),
);
}
Widget _content(BuildContext context, NoteDetail note) {
return SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(20, 18, 20, 40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
note.title,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
height: 1.35,
color: Color(0xFF3E2723),
),
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Text(
'更新于 ${note.updateTime}',
style: const TextStyle(fontSize: 12, color: Color(0xFFBCAAA4)),
),
),
],
),
if (note.tags.isNotEmpty) ...[
const SizedBox(height: 10),
Wrap(
spacing: 6,
runSpacing: 6,
children: note.tags.map((t) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 3),
decoration: BoxDecoration(
color: const Color(0xFFFFF3E6),
borderRadius: BorderRadius.circular(8),
),
child: Text(
t,
style: const TextStyle(fontSize: 12, color: Color(0xFFC8956E)),
),
);
}).toList(),
),
],
const SizedBox(height: 16),
const Divider(height: 1, color: Color(0xFFF0E6D8)),
const SizedBox(height: 16),
if (note.content.trim().isEmpty)
const Padding(
padding: EdgeInsets.symmetric(vertical: 30),
child: Center(
child: Text(
'（空笔记）',
style: TextStyle(fontSize: 14, color: Color(0xFFBCAAA4)),
),
),
)
else
MarkdownBody(
data: note.content,
// 允许长按选中复制
selectable: true,
styleSheet: _styleSheet(context),
onTapLink: (text, href, title) => _showLink(context, href),
imageBuilder: (uri, title, alt) => _image(uri),
),
],
),
);
}
MarkdownStyleSheet _styleSheet(BuildContext context) {
final base = MarkdownStyleSheet.fromTheme(Theme.of(context));
return base.copyWith(
p: const TextStyle(fontSize: 15, height: 1.75, color: Color(0xFF3E2723)),
h1: const TextStyle(
fontSize: 21,
fontWeight: FontWeight.bold,
height: 1.5,
color: Color(0xFF3E2723),
),
h2: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
height: 1.5,
color: Color(0xFF3E2723),
),
h3: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
height: 1.5,
color: Color(0xFF3E2723),
),
a: const TextStyle(
fontSize: 15,
color: Color(0xFFC8956E),
decoration: TextDecoration.underline,
),
code: const TextStyle(
fontSize: 13.5,
fontFamily: 'monospace',
backgroundColor: Color(0xFFF5EFE8),
color: Color(0xFFB4654A),
),
codeblockDecoration: BoxDecoration(
color: const Color(0xFFF7F3EE),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: const Color(0xFFEDE3D8)),
),
blockquoteDecoration: const BoxDecoration(
border: Border(left: BorderSide(color: Color(0xFFC8956E), width: 3)),
),
blockquotePadding: const EdgeInsets.fromLTRB(12, 4, 0, 4),
listBullet: const TextStyle(fontSize: 15, color: Color(0xFFC8956E)),
tableBorder: TableBorder.all(color: const Color(0xFFEDE3D8), width: 1),
tableHead: const TextStyle(fontWeight: FontWeight.bold, color: Color(0xFF5D4037)),
tableCellsPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
);
}
/// 笔记里的图片是 `/uploads/xxx` 相对路径，要补上 host 才能加载
Widget _image(Uri uri) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
resolveAssetUrl(uri.toString()),
fit: BoxFit.contain,
loadingBuilder: (context, child, progress) {
if (progress == null) return child;
return const Padding(
padding: EdgeInsets.symmetric(vertical: 24),
child: Center(
child: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(strokeWidth: 2, color: Color(0xFFC8956E)),
),
),
);
},
errorBuilder: (_, _, _) => Container(
padding: const EdgeInsets.symmetric(vertical: 18),
alignment: Alignment.center,
decoration: BoxDecoration(
color: const Color(0xFFF7F3EE),
borderRadius: BorderRadius.circular(10),
),
child: const Text(
'🖼 图片加载失败',
style: TextStyle(fontSize: 13, color: Color(0xFFBCAAA4)),
),
),
),
),
);
}
/// 没有引入 url_launcher，这里给出地址让用户自己复制，
/// 比静默无反应体验好，也不用为打开链接单独加一个依赖。
void _showLink(BuildContext context, String? href) {
if (href == null || href.isEmpty) return;
showModalBottomSheet<void>(
context: context,
backgroundColor: Colors.white,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(18)),
),
builder: (sheetContext) => SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 16),
const Text('链接地址', style: TextStyle(fontSize: 15, color: Color(0xFF5D4037))),
const SizedBox(height: 12),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: SelectableText(
resolveAssetUrl(href),
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 13, color: Color(0xFF8D6E63)),
),
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () => Navigator.pop(sheetContext),
child: const Text('关闭', style: TextStyle(color: Color(0xFF8D6E63))),
),
FilledButton(
onPressed: () {
Clipboard.setData(ClipboardData(text: resolveAssetUrl(href)));
Navigator.pop(sheetContext);
showToast(context, '✅ 已复制链接');
},
style: FilledButton.styleFrom(backgroundColor: const Color(0xFFC8956E)),
child: const Text('复制'),
),
],
),
const SizedBox(height: 12),
],
),
),
);
}
// ---------------- 操作 ----------------
Future<void> _openEditor(BuildContext context, WidgetRef ref, NoteDetail note) async {
final changed = await Navigator.of(context).push<bool>(
MaterialPageRoute(builder: (_) => NoteEditPage(noteId: note.id)),
);
if (changed == true) {
ref.invalidate(noteDetailProvider(noteId));
await ref.read(noteListProvider.notifier).refresh();
ref.invalidate(noteTagsProvider);
ref.invalidate(noteFolderTreeProvider);
}
}
/// 把笔记移动到别的目录
Future<void> _moveTo(BuildContext context, WidgetRef ref, NoteDetail note) async {
FolderTree tree;
try {
tree = await ref.read(noteFolderTreeProvider.future);
} catch (_) {
tree = FolderTree.empty;
}
if (!context.mounted) return;
// 当前所在位置（用于面板里高亮）
final NoteLocation current;
if (note.folderId == null) {
current = NoteLocation.uncategorized;
} else {
final path = tree.findPath(note.folderId!);
current = NoteLocation(
scope: NoteScope.folder,
folderId: note.folderId,
folderName: (path != null && path.isNotEmpty) ? path.last.name : '目录',
);
}
final picked = await FolderPickerSheet.show(
context,
tree: tree,
current: current,
title: '移动到',
// 「全部」不是能存放笔记的位置，给笔记选目录时不该出现
showAll: false,
);
if (picked == null || !context.mounted) return;
final targetId = picked.scope == NoteScope.folder ? picked.folderId : null;
if (targetId == note.folderId) return;
try {
await ref.read(noteApiProvider).assignFolder(note.id, targetId);
ref.invalidate(noteDetailProvider(noteId));
await ref.read(noteListProvider.notifier).refresh();
ref.invalidate(noteFolderTreeProvider); // 两个目录的笔记数都变了
if (context.mounted) {
showToast(context, targetId == null ? '已移到未分类' : '已移动到「${picked.folderName}」');
}
} on ApiException catch (e) {
if (context.mounted) showToast(context, e.message, error: true);
}
}
Future<void> _togglePin(BuildContext context, WidgetRef ref, NoteDetail note) async {
try {
await ref.read(noteApiProvider).update(note.id, pinned: !note.pinned);
ref.invalidate(noteDetailProvider(noteId));
await ref.read(noteListProvider.notifier).refresh();
if (context.mounted) showToast(context, note.pinned ? '已取消置顶' : '📌 已置顶');
} on ApiException catch (e) {
if (context.mounted) showToast(context, e.message, error: true);
}
}
Future<void> _confirmDelete(BuildContext context, WidgetRef ref, NoteDetail note) async {
final confirmed = await showDialog<bool>(
context: context,
builder: (dialogContext) => AlertDialog(
title: const Text('删除笔记'),
content: Text('确定删除「${note.title}」？'),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
actions: [
TextButton(
onPressed: () => Navigator.pop(dialogContext, false),
child: const Text('取消', style: TextStyle(color: Color(0xFF8D6E63))),
),
TextButton(
onPressed: () => Navigator.pop(dialogContext, true),
child: const Text('删除', style: TextStyle(color: Color(0xFFD32F2F))),
),
],
),
);
if (confirmed != true) return;
try {
await ref.read(noteApiProvider).delete(note.id);
await ref.read(noteListProvider.notifier).refresh();
ref.invalidate(noteTagsProvider);
ref.invalidate(noteFolderTreeProvider);
if (context.mounted) {
showToast(context, '已删除');
Navigator.of(context).pop();
}
} on ApiException catch (e) {
if (context.mounted) showToast(context, e.message, error: true);
}
}
}
lib/pages/note/note_edit_page.dart
+279
View File
@@ -0,0 +1,279 @@
import 'package:flutter/material.dart';
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../api/note_api.dart';
import '../../core/network/api_exception.dart';
import '../../utils/toast.dart';
import '../../widgets/state_views.dart';
/// 笔记编辑页
///
/// [noteId] 为 null 时是新建，否则是编辑已有笔记。
/// 保存成功会 pop(true)，上一页据此刷新数据。
///
/// 这里用 StatefulWidget + TextEditingController 管理表单，
/// 而不是像账单编辑页那样走 Notifier —— 后者需要额外的 revision
/// 字段来同步受控输入框，对纯文本编辑没有必要。
class NoteEditPage extends ConsumerStatefulWidget {
const NoteEditPage({super.key, this.noteId});
final int? noteId;
bool get isCreate => noteId == null;
@override
ConsumerState<NoteEditPage> createState() => _NoteEditPageState();
}
class _NoteEditPageState extends ConsumerState<NoteEditPage> {
final _titleController = TextEditingController();
final _tagsController = TextEditingController();
final _contentController = TextEditingController();
bool _loading = false;
bool _saving = false;
bool _preview = false;
String? _loadError;
/// 是否已经成功保存过——用于「返回时提示未保存」的判断
bool _saved = false;
@override
void initState() {
super.initState();
if (!widget.isCreate) _load();
}
@override
void dispose() {
_titleController.dispose();
_tagsController.dispose();
_contentController.dispose();
super.dispose();
}
Future<void> _load() async {
setState(() {
_loading = true;
_loadError = null;
});
try {
final note = await ref.read(noteApiProvider).detail(widget.noteId!);
if (!mounted) return;
_titleController.text = note.title;
_tagsController.text = note.tags.join(',');
_contentController.text = note.content;
setState(() => _loading = false);
} on ApiException catch (e) {
if (!mounted) return;
setState(() {
_loading = false;
_loadError = e.message;
});
} catch (_) {
if (!mounted) return;
setState(() {
_loading = false;
_loadError = '笔记加载失败';
});
}
}
bool get _dirty =>
!_saved &&
(_titleController.text.isNotEmpty ||
_tagsController.text.isNotEmpty ||
_contentController.text.isNotEmpty);
Future<void> _save() async {
final title = _titleController.text.trim();
final tags = _tagsController.text.trim();
final content = _contentController.text;
if (title.isEmpty && content.trim().isEmpty) {
showToast(context, '标题和内容不能同时为空', error: true);
return;
}
setState(() => _saving = true);
try {
final api = ref.read(noteApiProvider);
if (widget.isCreate) {
await api.create(title: title, content: content, tags: tags);
} else {
await api.update(widget.noteId!, title: title, content: content, tags: tags);
}
if (!mounted) return;
_saved = true;
showToast(context, '✅ 已保存');
Navigator.of(context).pop(true);
} on ApiException catch (e) {
if (mounted) showToast(context, e.message, error: true);
} catch (_) {
if (mounted) showToast(context, '保存失败，请重试', error: true);
} finally {
if (mounted) setState(() => _saving = false);
}
}
Future<void> _confirmDiscard() async {
final leave = await showDialog<bool>(
context: context,
builder: (dialogContext) => AlertDialog(
title: const Text('放弃编辑？'),
content: const Text('当前改动还没有保存，返回将丢失。'),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
actions: [
TextButton(
onPressed: () => Navigator.pop(dialogContext, false),
child: const Text('继续编辑', style: TextStyle(color: Color(0xFF8D6E63))),
),
TextButton(
onPressed: () => Navigator.pop(dialogContext, true),
child: const Text('放弃', style: TextStyle(color: Color(0xFFD32F2F))),
),
],
),
);
if (leave == true && mounted) Navigator.of(context).pop(false);
}
@override
Widget build(BuildContext context) {
return PopScope(
canPop: !_dirty,
onPopInvokedWithResult: (didPop, _) {
if (!didPop) _confirmDiscard();
},
child: Scaffold(
appBar: AppBar(
title: Text(widget.isCreate ? '新建笔记' : '编辑笔记'),
actions: [
IconButton(
tooltip: _preview ? '继续编辑' : '预览',
icon: Icon(_preview ? Icons.edit_outlined : Icons.visibility_outlined),
onPressed: _loading ? null : () => setState(() => _preview = !_preview),
),
Padding(
padding: const EdgeInsets.only(right: 8),
child: TextButton(
onPressed: (_saving || _loading) ? null : _save,
child: _saving
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Color(0xFFC8956E),
),
)
: const Text(
'保存',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Color(0xFFC8956E),
),
),
),
),
],
),
body: _body(),
),
);
}
Widget _body() {
if (_loading) return const Center(child: LoadingView(tip: '笔记加载中...'));
if (_loadError != null) {
return Center(
child: ErrorView(message: _loadError!, onRetry: _load),
);
}
if (_preview) return _previewBody();
return ListView(
padding: const EdgeInsets.fromLTRB(20, 16, 20, 40),
children: [
TextField(
controller: _titleController,
style: const TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Color(0xFF3E2723),
),
decoration: const InputDecoration(
hintText: '标题（留空则自动取正文首行）',
hintStyle: TextStyle(fontSize: 17, color: Color(0xFFD7CCC8)),
border: InputBorder.none,
),
),
const Divider(height: 20, color: Color(0xFFF0E6D8)),
TextField(
controller: _tagsController,
style: const TextStyle(fontSize: 14, color: Color(0xFF5D4037)),
decoration: const InputDecoration(
hintText: '标签，用逗号分隔，例如：工作,服务器',
hintStyle: TextStyle(fontSize: 13.5, color: Color(0xFFD7CCC8)),
prefixIcon: Icon(Icons.label_outline, size: 18, color: Color(0xFFBCAAA4)),
prefixIconConstraints: BoxConstraints(minWidth: 34),
border: InputBorder.none,
),
),
const Divider(height: 20, color: Color(0xFFF0E6D8)),
TextField(
controller: _contentController,
maxLines: null,
minLines: 16,
keyboardType: TextInputType.multiline,
textAlignVertical: TextAlignVertical.top,
style: const TextStyle(fontSize: 15, height: 1.7, color: Color(0xFF3E2723)),
decoration: const InputDecoration(
hintText: '正文，支持 Markdown…',
hintStyle: TextStyle(fontSize: 15, color: Color(0xFFD7CCC8)),
border: InputBorder.none,
),
),
],
);
}
Widget _previewBody() {
final content = _contentController.text;
if (content.trim().isEmpty) {
return const Center(
child: EmptyView(icon: '📄', title: '还没有内容', tip: '切回编辑模式写点什么吧'),
);
}
final base = MarkdownStyleSheet.fromTheme(Theme.of(context));
return SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(20, 18, 20, 40),
child: MarkdownBody(
data: content,
selectable: true,
styleSheet: base.copyWith(
p: const TextStyle(fontSize: 15, height: 1.75, color: Color(0xFF3E2723)),
h1: const TextStyle(fontSize: 21, fontWeight: FontWeight.bold, color: Color(0xFF3E2723)),
h2: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Color(0xFF3E2723)),
h3: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xFF3E2723)),
code: const TextStyle(
fontSize: 13.5,
fontFamily: 'monospace',
backgroundColor: Color(0xFFF5EFE8),
color: Color(0xFFB4654A),
),
codeblockDecoration: BoxDecoration(
color: const Color(0xFFF7F3EE),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: const Color(0xFFEDE3D8)),
),
),
),
);
}
}
lib/pages/note/note_list_page.dart
+588
View File
@@ -0,0 +1,588 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../api/note_api.dart';
import '../../core/network/api_exception.dart';
import '../../models/note.dart';
import '../../providers/note_provider.dart';
import '../../utils/toast.dart';
import '../../widgets/state_views.dart';
import 'folder_picker_sheet.dart';
import 'note_detail_page.dart';
/// 笔记列表页
///
/// 列表数据在后端是分页返回的，这里用滚动到底部自动加载下一页，
/// 配合下拉刷新与 350ms 防抖的搜索框。
class NoteListPage extends ConsumerStatefulWidget {
const NoteListPage({super.key});
@override
ConsumerState<NoteListPage> createState() => _NoteListPageState();
}
class _NoteListPageState extends ConsumerState<NoteListPage> {
final _scrollController = ScrollController();
final _searchController = TextEditingController();
bool _searching = false;
@override
void initState() {
super.initState();
_scrollController.addListener(_onScroll);
}
@override
void dispose() {
_scrollController.removeListener(_onScroll);
_scrollController.dispose();
_searchController.dispose();
super.dispose();
}
/// 距底部还有 300px 就开始加载，避免用户看到明显的"卡一下"
void _onScroll() {
if (!_scrollController.hasClients) return;
final position = _scrollController.position;
if (position.pixels >= position.maxScrollExtent - 300) {
ref.read(noteListProvider.notifier).loadMore();
}
}
void _toggleSearch() {
setState(() {
_searching = !_searching;
if (!_searching) {
_searchController.clear();
ref.read(noteListProvider.notifier).setKeyword('');
}
});
}
@override
Widget build(BuildContext context) {
final state = ref.watch(noteListProvider);
// Riverpod 3 的 AsyncValue 只有 value（可空），没有 valueOrNull
final tree = ref.watch(noteFolderTreeProvider).value;
return Scaffold(
appBar: AppBar(
title: _searching
? TextField(
controller: _searchController,
autofocus: true,
decoration: const InputDecoration(
hintText: '搜索标题和正文…',
border: InputBorder.none,
hintStyle: TextStyle(fontSize: 15, color: Color(0xFFBCAAA4)),
),
style: const TextStyle(fontSize: 15, color: Color(0xFF5D4037)),
onChanged: (v) => ref.read(noteListProvider.notifier).setKeyword(v),
)
: const Text('我的笔记'),
actions: [
IconButton(
tooltip: '排序',
icon: const Icon(Icons.sort),
onPressed: _pickSort,
),
IconButton(
tooltip: _searching ? '关闭搜索' : '搜索',
icon: Icon(_searching ? Icons.close : Icons.search),
onPressed: _toggleSearch,
),
],
),
body: Column(
children: [
_folderBar(state, tree),
_tagBar(),
Expanded(child: _body(state)),
],
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _quickCapture,
backgroundColor: const Color(0xFFC8956E),
foregroundColor: Colors.white,
icon: const Icon(Icons.edit_outlined),
label: const Text('快速记录'),
),
);
}
// ---------------- 当前目录条 ----------------
Widget _folderBar(NoteListState state, FolderTree? tree) {
return Material(
color: Colors.white,
child: InkWell(
onTap: _pickLocation,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 11, 12, 11),
child: Row(
children: [
const Icon(Icons.folder_outlined, size: 18, color: Color(0xFFC8956E)),
const SizedBox(width: 8),
Expanded(
child: Text(
_pathText(state.location, tree),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Color(0xFF5D4037),
),
),
),
Text(
'${state.total} 篇',
style: const TextStyle(fontSize: 12, color: Color(0xFFBCAAA4)),
),
const Icon(Icons.expand_more, size: 18, color: Color(0xFFBCAAA4)),
],
),
),
),
);
}
/// 拼出「全部 › 工作 › 服务器」这样的路径
String _pathText(NoteLocation location, FolderTree? tree) {
if (location.scope == NoteScope.all) return '全部';
if (location.scope == NoteScope.uncategorized) return '全部 › 未分类';
final path = tree?.findPath(location.folderId!);
if (path == null || path.isEmpty) return '全部 › ${location.folderName}';
return ['全部', ...path.map((e) => e.name)].join(' › ');
}
Future<void> _pickLocation() async {
FolderTree tree;
try {
tree = await ref.read(noteFolderTreeProvider.future);
} catch (_) {
tree = FolderTree.empty;
}
if (!mounted) return;
final current = ref.read(noteListProvider).location;
final picked = await FolderPickerSheet.show(context, tree: tree, current: current);
if (picked == null) return;
ref.read(noteListProvider.notifier).setLocation(picked);
}
// ---------------- 排序 ----------------
Future<void> _pickSort() async {
final current = ref.read(noteListProvider).sort;
final picked = await showModalBottomSheet<String>(
context: context,
backgroundColor: Colors.white,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (sheetContext) => SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 16),
const Text(
'排序方式',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Color(0xFF5D4037),
),
),
const SizedBox(height: 6),
_sortOption(sheetContext, 'updated', '最近更新', current),
_sortOption(sheetContext, 'created', '创建时间', current),
_sortOption(sheetContext, 'title', '标题', current),
const SizedBox(height: 16),
],
),
),
);
if (picked == null) return;
ref.read(noteListProvider.notifier).setSort(picked);
}
Widget _sortOption(BuildContext sheetContext, String value, String label, String current) {
final selected = value == current;
return ListTile(
dense: true,
leading: Icon(
selected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
size: 20,
color: selected ? const Color(0xFFC8956E) : const Color(0xFFBCAAA4),
),
title: Text(
label,
style: TextStyle(
fontSize: 14.5,
fontWeight: selected ? FontWeight.w600 : FontWeight.normal,
color: selected ? const Color(0xFFC8956E) : const Color(0xFF5D4037),
),
),
onTap: () => Navigator.pop(sheetContext, value),
);
}
// ---------------- 标签筛选栏 ----------------
Widget _tagBar() {
final tagsAsync = ref.watch(noteTagsProvider);
final selected = ref.watch(noteListProvider).tag;
return tagsAsync.maybeWhen(
// 标签加载失败或为空时不占位，避免空出一条白带
data: (tags) {
if (tags.isEmpty) return const SizedBox.shrink();
return Container(
height: 46,
color: Colors.white,
child: ListView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 7),
children: [
_tagChip('全部', selected.isEmpty, () {
ref.read(noteListProvider.notifier).setTag('');
}),
...tags.map((t) => _tagChip(t, selected == t, () {
ref.read(noteListProvider.notifier).setTag(t);
})),
],
),
);
},
orElse: () => const SizedBox.shrink(),
);
}
Widget _tagChip(String label, bool active, VoidCallback onTap) {
return Padding(
padding: const EdgeInsets.only(right: 8),
child: GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
decoration: BoxDecoration(
color: active ? const Color(0xFFC8956E) : const Color(0xFFFFF3E6),
borderRadius: BorderRadius.circular(14),
),
child: Text(
label,
style: TextStyle(
fontSize: 13,
color: active ? Colors.white : const Color(0xFF8D6E63),
fontWeight: active ? FontWeight.w600 : FontWeight.normal,
),
),
),
),
);
}
// ---------------- 主体 ----------------
Widget _body(NoteListState state) {
if (state.loading && state.items.isEmpty) {
return const Center(child: LoadingView(tip: '笔记加载中...'));
}
if (state.error != null && state.items.isEmpty) {
return Center(
child: ErrorView(
message: state.error!,
onRetry: () => ref.read(noteListProvider.notifier).refresh(),
),
);
}
if (state.isEmpty) {
return RefreshIndicator(
color: const Color(0xFFC8956E),
onRefresh: () => ref.read(noteListProvider.notifier).refresh(),
child: ListView(
physics: const AlwaysScrollableScrollPhysics(),
children: [
SizedBox(height: MediaQuery.of(context).size.height * 0.18),
EmptyView(
icon: state.hasFilter ? '🔍' : '📝',
title: state.hasFilter ? '没有匹配的笔记' : '还没有笔记',
tip: state.hasFilter
? '换个关键词或标签试试'
: '点右下角「快速记录」，\n或在电脑上打开后台管理批量导入',
),
],
),
);
}
return RefreshIndicator(
color: const Color(0xFFC8956E),
onRefresh: () => ref.read(noteListProvider.notifier).refresh(),
child: ListView.builder(
controller: _scrollController,
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.fromLTRB(12, 12, 12, 90),
itemCount: state.items.length + 1,
itemBuilder: (context, index) {
if (index == state.items.length) return _footer(state);
return _noteCard(state.items[index]);
},
),
);
}
Widget _footer(NoteListState state) {
if (state.loadingMore) {
return const Padding(
padding: EdgeInsets.symmetric(vertical: 18),
child: Center(
child: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(strokeWidth: 2.2, color: Color(0xFFC8956E)),
),
),
);
}
if (!state.hasMore) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 18),
child: Center(
child: Text(
'共 ${state.total} 篇',
style: const TextStyle(fontSize: 12, color: Color(0xFFBCAAA4)),
),
),
);
}
return const SizedBox(height: 18);
}
Widget _noteCard(NoteListItem note) {
return GestureDetector(
onTap: () => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => NoteDetailPage(noteId: note.id)),
),
child: Container(
margin: const EdgeInsets.only(bottom: 10),
padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
border: note.pinned
? Border.all(color: const Color(0xFFC8956E), width: 1.2)
: null,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
if (note.pinned) ...[
const Text('📌', style: TextStyle(fontSize: 13)),
const SizedBox(width: 4),
],
Expanded(
child: Text(
note.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 15.5,
fontWeight: FontWeight.w600,
color: Color(0xFF5D4037),
),
),
),
],
),
if (note.summary.isNotEmpty) ...[
const SizedBox(height: 6),
Text(
note.summary,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontSize: 13, height: 1.5, color: Color(0xFF8D6E63)),
),
],
const SizedBox(height: 10),
Row(
children: [
...note.tags.take(3).map((t) => _miniTag(t)),
if (note.tags.length > 3)
Text(
'+${note.tags.length - 3}',
style: const TextStyle(fontSize: 11, color: Color(0xFFBCAAA4)),
),
const Spacer(),
Text(
note.updateTime,
style: const TextStyle(fontSize: 11.5, color: Color(0xFFBCAAA4)),
),
],
),
],
),
),
);
}
Widget _miniTag(String tag) {
return Container(
margin: const EdgeInsets.only(right: 6),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: const Color(0xFFFFF3E6),
borderRadius: BorderRadius.circular(6),
),
child: Text(tag, style: const TextStyle(fontSize: 11, color: Color(0xFFC8956E))),
);
}
// ---------------- 快速记录 ----------------
Future<void> _quickCapture() async {
final location = ref.read(noteListProvider).location;
final targetLabel =
location.scope == NoteScope.folder ? location.folderName : '未分类';
final content = await showModalBottomSheet<String>(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (_) => _QuickCaptureSheet(targetLabel: targetLabel),
);
if (content == null || content.trim().isEmpty) return;
try {
final api = ref.read(noteApiProvider);
// 标题传空串，由后端取正文首行 —— 手机上多填一个标题会打断记录节奏
final created = await api.create(title: '', content: content, tags: '');
// 记到当前所在目录里；停在「全部」或「未分类」时保持未分类
final location = ref.read(noteListProvider).location;
if (location.scope == NoteScope.folder && location.folderId != null) {
await api.assignFolder(created.id, location.folderId);
}
await ref.read(noteListProvider.notifier).refresh();
ref.invalidate(noteTagsProvider);
ref.invalidate(noteFolderTreeProvider); // 目录上的笔记数变了
if (mounted) showToast(context, '✅ 已记录');
} on ApiException catch (e) {
if (mounted) showToast(context, e.message, error: true);
} catch (_) {
if (mounted) showToast(context, '保存失败，请重试', error: true);
}
}
}
/// 快速记录面板：全屏高度的纯文本输入，不填标题
class _QuickCaptureSheet extends StatefulWidget {
const _QuickCaptureSheet({required this.targetLabel});
/// 保存到哪个目录，仅用于提示文案
final String targetLabel;
@override
State<_QuickCaptureSheet> createState() => _QuickCaptureSheetState();
}
class _QuickCaptureSheetState extends State<_QuickCaptureSheet> {
final _controller = TextEditingController();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final bottomInset = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: EdgeInsets.only(bottom: bottomInset),
child: Container(
height: MediaQuery.of(context).size.height * 0.75,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
child: Column(
children: [
const SizedBox(height: 10),
Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: const Color(0xFFE0D6CC),
borderRadius: BorderRadius.circular(2),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 12, 12, 4),
child: Row(
children: [
const Text(
'快速记录',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xFF5D4037),
),
),
const Spacer(),
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('取消', style: TextStyle(color: Color(0xFF8D6E63))),
),
FilledButton(
onPressed: () => Navigator.pop(context, _controller.text),
style: FilledButton.styleFrom(
backgroundColor: const Color(0xFFC8956E),
padding: const EdgeInsets.symmetric(horizontal: 20),
),
child: const Text('保存'),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'第一行会作为标题，支持 Markdown，保存到「${widget.targetLabel}」',
style: const TextStyle(fontSize: 12, color: Color(0xFFBCAAA4)),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 10, 20, 16),
child: TextField(
controller: _controller,
autofocus: true,
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.top,
keyboardType: TextInputType.multiline,
style: const TextStyle(fontSize: 15, height: 1.6, color: Color(0xFF3E2723)),
decoration: const InputDecoration(
hintText: '想到什么就写下来…',
border: InputBorder.none,
hintStyle: TextStyle(color: Color(0xFFD7CCC8)),
),
),
),
),
],
),
),
);
}
}