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