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/api/note_api.dart
+171
View File
@@ -0,0 +1,171 @@
import 'package:dio/dio.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../core/network/api_exception.dart';
import '../core/network/dio_client.dart';
import '../models/note.dart';
final noteApiProvider = Provider<NoteApi>((ref) => NoteApi(ref.watch(dioProvider)));
/// 笔记接口
class NoteApi {
final Dio _dio;
NoteApi(this._dio);
/// 分页列表（不含正文）
///
/// [scope] all / uncategorized / folder；[folderId] 仅在 scope=folder 时有意义，
/// 后端会连同该目录的所有子目录一起查。
Future<NotePage> list({
int page = 1,
int size = 20,
String scope = 'all',
int? folderId,
String sort = 'updated',
String? keyword,
String? tag,
}) async {
try {
final res = await _dio.get('/notes', queryParameters: {
'page': page,
'size': size,
'scope': scope,
'sort': sort,
'folderId': ?folderId,
if (keyword != null && keyword.isNotEmpty) 'keyword': keyword,
if (tag != null && tag.isNotEmpty) 'tag': tag,
});
final data = res.data;
if (data is Map<String, dynamic>) return NotePage.fromJson(data);
return NotePage.empty;
} on DioException catch (e) {
final err = e.error;
throw err is ApiException ? err : ApiException(-1, '笔记列表加载失败');
}
}
/// 目录树
Future<FolderTree> folderTree() async {
try {
final res = await _dio.get('/notes/folders');
final data = res.data;
if (data is Map<String, dynamic>) return FolderTree.fromJson(data);
return FolderTree.empty;
} on DioException catch (e) {
final err = e.error;
throw err is ApiException ? err : ApiException(-1, '目录加载失败');
}
}
/// 把笔记移动到某个目录，[folderId] 为 null 表示移到未分类
Future<void> assignFolder(int noteId, int? folderId) async {
try {
await _dio.put('/notes/$noteId/folder', data: {'folderId': folderId});
} on DioException catch (e) {
final err = e.error;
throw err is ApiException ? err : ApiException(-1, '移动失败');
}
}
/// 详情（含正文）
Future<NoteDetail> detail(int id) async {
try {
final res = await _dio.get('/notes/$id');
return NoteDetail.fromJson(_asMap(res.data));
} on DioException catch (e) {
final err = e.error;
throw err is ApiException ? err : ApiException(-1, '笔记加载失败');
}
}
/// 新建
Future<NoteDetail> create({
required String title,
required String content,
required String tags,
}) async {
try {
final res = await _dio.post('/notes', data: {
'title': title,
'content': content,
'tags': tags,
'isPinned': 0,
});
return NoteDetail.fromJson(_asMap(res.data));
} on DioException catch (e) {
final err = e.error;
throw err is ApiException ? err : ApiException(-1, '笔记保存失败');
}
}
/// 更新
///
/// 后端是部分更新语义：字段传 null 表示不改动，
/// 所以这里只塞需要改的字段，不必回传全部。
Future<NoteDetail> update(
int id, {
String? title,
String? content,
String? tags,
bool? pinned,
}) async {
try {
final res = await _dio.put('/notes/$id', data: {
// `?value` 是 Dart 的空感知元素：值为 null 时整个键值对不写入 map，
// 正好对应后端"字段为 null 表示不改动"的部分更新语义
'title': ?title,
'content': ?content,
'tags': ?tags,
if (pinned != null) 'isPinned': pinned ? 1 : 0,
});
return NoteDetail.fromJson(_asMap(res.data));
} on DioException catch (e) {
final err = e.error;
throw err is ApiException ? err : ApiException(-1, '笔记保存失败');
}
}
/// 删除（后端是逻辑删除）
Future<void> delete(int id) async {
try {
await _dio.delete('/notes/$id');
} on DioException catch (e) {
final err = e.error;
throw err is ApiException ? err : ApiException(-1, '笔记删除失败');
}
}
/// 标签列表，按使用次数排序
Future<List<String>> tags() async {
try {
final res = await _dio.get('/notes/tags');
return asStringListFrom(res.data);
} on DioException catch (e) {
final err = e.error;
throw err is ApiException ? err : ApiException(-1, '标签加载失败');
}
}
Map<String, dynamic> _asMap(Object? data) {
if (data is Map<String, dynamic>) return data;
if (data is Map && data['data'] is Map) {
return Map<String, dynamic>.from(data['data'] as Map);
}
return const {};
}
}
/// 标签接口返回的是裸数组，单独处理一下
List<String> asStringListFrom(Object? data) {
if (data is List) {
return data.map((e) => e?.toString() ?? '').where((e) => e.isNotEmpty).toList();
}
if (data is Map && data['data'] is List) {
return (data['data'] as List)
.map((e) => e?.toString() ?? '')
.where((e) => e.isNotEmpty)
.toList();
}
return const [];
}
lib/core/network/api_env.dart
+18
View File
@@ -29,3 +29,21 @@ String get baseUrl {
if (!kDebugMode) return kProdBaseUrl;
return kLocalBaseUrl;
}
/// 静态资源根地址（去掉 `/api` 后缀）
///
/// 笔记附件由后端以 `/uploads/2026/09/22/xxx.png` 这种相对路径返回，
/// 客户端要拼上 host 才能加载。
String get assetBaseUrl {
const suffix = '/api';
return baseUrl.endsWith(suffix)
? baseUrl.substring(0, baseUrl.length - suffix.length)
: baseUrl;
}
/// 把后端返回的资源地址补成绝对地址（已经是 http(s) 的原样返回）
String resolveAssetUrl(String path) {
if (path.isEmpty) return path;
if (path.startsWith('http://') || path.startsWith('https://')) return path;
return path.startsWith('/') ? '$assetBaseUrl$path' : '$assetBaseUrl/$path';
}
lib/models/json_util.dart
+21
View File
@@ -11,6 +11,18 @@ int asInt(Object? value, {int fallback = 0}) {
return fallback;
}
/// 取可空整数：null / 无法解析都返回 null
///
/// 用于 folderId 这类"没有值"本身有业务含义的字段
/// （null 表示未分类，不能退化成 0）
int? asNullableInt(Object? value) {
if (value == null) return null;
if (value is int) return value;
if (value is num) return value.toInt();
if (value is String) return int.tryParse(value);
return null;
}
double asDouble(Object? value, {double fallback = 0}) {
if (value is double) return value;
if (value is num) return value.toDouble();
@@ -34,3 +46,12 @@ List<Map<String, dynamic>> asMapList(Object? value) {
if (value is! List) return const [];
return value.whereType<Map<String, dynamic>>().toList();
}
/// 取字符串数组（用于标签这类场景），非字符串元素丢弃，空串过滤掉
List<String> asStringList(Object? value) {
if (value is! List) return const [];
return value
.map((e) => e?.toString() ?? '')
.where((e) => e.isNotEmpty)
.toList();
}
lib/models/note.dart
+200
View File
@@ -0,0 +1,200 @@
import 'json_util.dart';
/// 笔记列表项（不含正文）
///
/// 后端列表接口刻意不返回 content —— 一页 20 条正文可能有几 MB，
/// 而这个后端在公网服务器上，列表页只需要摘要。
class NoteListItem {
final int id;
final int? folderId;
final String title;
final String summary;
final List<String> tags;
final bool pinned;
final String updateTime;
const NoteListItem({
required this.id,
required this.folderId,
required this.title,
required this.summary,
required this.tags,
required this.pinned,
required this.updateTime,
});
factory NoteListItem.fromJson(Map<String, dynamic> json) {
return NoteListItem(
id: asInt(json['id']),
folderId: asNullableInt(json['folderId']),
title: asNonEmpty(json['title'], '无标题笔记'),
summary: asString(json['summary']),
tags: asStringList(json['tagList']),
pinned: asInt(json['isPinned']) == 1,
updateTime: formatDateTime(json['updateTime']),
);
}
}
/// 笔记详情（含正文）
class NoteDetail {
final int id;
final int? folderId;
final String title;
final String content;
final List<String> tags;
final bool pinned;
final String createTime;
final String updateTime;
const NoteDetail({
required this.id,
required this.folderId,
required this.title,
required this.content,
required this.tags,
required this.pinned,
required this.createTime,
required this.updateTime,
});
factory NoteDetail.fromJson(Map<String, dynamic> json) {
return NoteDetail(
id: asInt(json['id']),
folderId: asNullableInt(json['folderId']),
title: asNonEmpty(json['title'], '无标题笔记'),
content: asString(json['content']),
tags: asStringList(json['tagList']),
pinned: asInt(json['isPinned']) == 1,
createTime: formatDateTime(json['createTime']),
updateTime: formatDateTime(json['updateTime']),
);
}
}
/// 分页结果
class NotePage {
final List<NoteListItem> items;
final int total;
final bool hasMore;
const NotePage({required this.items, required this.total, required this.hasMore});
static const empty = NotePage(items: [], total: 0, hasMore: false);
factory NotePage.fromJson(Map<String, dynamic> json) {
return NotePage(
items: asMapList(json['list']).map(NoteListItem.fromJson).toList(),
total: asInt(json['total']),
hasMore: json['hasMore'] == true,
);
}
}
/// 目录树节点
class FolderNode {
final int id;
final String name;
final int? parentId;
/// 该目录下的笔记数（**含所有子目录**），和后端列表接口的口径一致
final int noteCount;
final List<FolderNode> children;
const FolderNode({
required this.id,
required this.name,
required this.parentId,
required this.noteCount,
required this.children,
});
factory FolderNode.fromJson(Map<String, dynamic> json) {
return FolderNode(
id: asInt(json['id']),
name: asNonEmpty(json['name'], '未命名'),
parentId: asNullableInt(json['parentId']),
noteCount: asInt(json['noteCount']),
children: asMapList(json['children']).map(FolderNode.fromJson).toList(),
);
}
}
/// 目录树接口的完整返回
class FolderTree {
final List<FolderNode> folders;
final int uncategorizedCount;
final int totalCount;
const FolderTree({
required this.folders,
required this.uncategorizedCount,
required this.totalCount,
});
static const empty = FolderTree(folders: [], uncategorizedCount: 0, totalCount: 0);
factory FolderTree.fromJson(Map<String, dynamic> json) {
return FolderTree(
folders: asMapList(json['folders']).map(FolderNode.fromJson).toList(),
uncategorizedCount: asInt(json['uncategorizedCount']),
totalCount: asInt(json['totalCount']),
);
}
/// 按 id 找节点，用于拼当前目录的面包屑路径
List<FolderNode>? findPath(int id) {
List<FolderNode>? walk(List<FolderNode> nodes, List<FolderNode> trail) {
for (final node in nodes) {
final next = [...trail, node];
if (node.id == id) return next;
final found = walk(node.children, next);
if (found != null) return found;
}
return null;
}
return walk(folders, []);
}
}
/// 当前浏览的位置
///
/// 用三个 scope 对应目录树上的三种节点，而不是用 `folderId == null`
/// 来表达「全部」—— 那样就没法区分「全部」和「未分类」了。
enum NoteScope { all, uncategorized, folder }
class NoteLocation {
final NoteScope scope;
final int? folderId;
final String folderName;
const NoteLocation({
required this.scope,
this.folderId,
this.folderName = '全部',
});
static const all = NoteLocation(scope: NoteScope.all, folderName: '全部');
static const uncategorized =
NoteLocation(scope: NoteScope.uncategorized, folderName: '未分类');
/// 传给后端 list 接口的 scope 参数
String get apiScope {
switch (scope) {
case NoteScope.all:
return 'all';
case NoteScope.uncategorized:
return 'uncategorized';
case NoteScope.folder:
return 'folder';
}
}
}
/// 后端给的是 `yyyy-MM-dd HH:mm:ss`，这里裁成 `yyyy-MM-dd HH:mm`
/// 列表里显示到秒没有意义，还会把卡片撑宽。
String formatDateTime(Object? value) {
final text = asString(value);
return text.length >= 16 ? text.substring(0, 16) : text;
}
lib/pages/login/login_page.dart
+3
View File
@@ -238,6 +238,9 @@ class _LoginPageState extends ConsumerState<LoginPage>
),
],
),
// 圆形容器默认不裁剪子组件，而方图的对角线比圆直径长 ——
// 换成不透明底的方图会从四个角戳出来，这里裁掉。
clipBehavior: Clip.antiAlias,
padding: const EdgeInsets.all(10),
child: Image.asset('assets/images/logo.png', fit: BoxFit.contain),
),
lib/pages/mine/mine_page.dart
+46
View File
@@ -12,6 +12,7 @@ import '../../utils/amount_input_formatter.dart';
import '../../utils/amount_util.dart';
import '../../utils/toast.dart';
import '../../widgets/state_views.dart';
import '../note/note_list_page.dart';
/// 「我的」页面
///
@@ -50,6 +51,8 @@ class MinePage extends ConsumerWidget {
_accountCard(context, ref, accountAsync),
const SizedBox(height: 14),
_budgetCard(context, ref, budgetAsync),
const SizedBox(height: 14),
_notesEntry(context),
const SizedBox(height: 24),
_logoutButton(context),
const SizedBox(height: 90),
@@ -366,6 +369,49 @@ class MinePage extends ConsumerWidget {
);
}
// ---------------- 笔记入口 ----------------
Widget _notesEntry(BuildContext context) {
return GestureDetector(
onTap: () => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => const NoteListPage()),
),
child: Container(
padding: const EdgeInsets.fromLTRB(18, 16, 14, 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
child: Row(
children: [
const Text('📝', style: TextStyle(fontSize: 24)),
const SizedBox(width: 14),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'我的笔记',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Color(0xFF5D4037),
),
),
SizedBox(height: 3),
Text(
'管理 Markdown 文档，随时查看和记录',
style: TextStyle(fontSize: 12.5, color: Color(0xFF8D6E63)),
),
],
),
),
const Icon(Icons.chevron_right, color: Color(0xFFBCAAA4)),
],
),
),
);
}
// ---------------- 修改余额 ----------------
Future<void> _editBalance(BuildContext context, WidgetRef ref, AccountInfo account) async {
final input = await _showAmountDialog(
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)),
),
),
),
),
],
),
),
);
}
}
lib/providers/note_provider.dart
+231
View File
@@ -0,0 +1,231 @@
import 'dart:async';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../api/note_api.dart';
import '../core/network/api_exception.dart';
import '../models/note.dart';
/// 笔记列表页状态
class NoteListState {
final List<NoteListItem> items;
final bool loading; // 首屏 / 刷新 / 切筛选条件
final bool loadingMore; // 上拉加载下一页
final String? error;
final int page; // 已加载到第几页，0 表示还没加载
final bool hasMore;
final int total;
final String keyword;
final String tag;
final String sort; // updated | created | title
final NoteLocation location;
const NoteListState({
this.items = const [],
this.loading = false,
this.loadingMore = false,
this.error,
this.page = 0,
this.hasMore = false,
this.total = 0,
this.keyword = '',
this.tag = '',
this.sort = 'updated',
this.location = NoteLocation.all,
});
/// 真正的一条都没有（不是加载中、也不是出错）
bool get isEmpty => items.isEmpty && !loading && error == null;
/// 是否处于筛选态——决定空状态该显示"还没有笔记"还是"没有匹配结果"
bool get hasFilter => keyword.isNotEmpty || tag.isNotEmpty;
NoteListState copyWith({
List<NoteListItem>? items,
bool? loading,
bool? loadingMore,
Object? error = _sentinel,
int? page,
bool? hasMore,
int? total,
String? keyword,
String? tag,
String? sort,
NoteLocation? location,
}) {
return NoteListState(
items: items ?? this.items,
loading: loading ?? this.loading,
loadingMore: loadingMore ?? this.loadingMore,
error: error == _sentinel ? this.error : error as String?,
page: page ?? this.page,
hasMore: hasMore ?? this.hasMore,
total: total ?? this.total,
keyword: keyword ?? this.keyword,
tag: tag ?? this.tag,
sort: sort ?? this.sort,
location: location ?? this.location,
);
}
static const _sentinel = Object();
}
class NoteListNotifier extends Notifier<NoteListState> {
static const _pageSize = 20;
Timer? _searchDebounce;
@override
NoteListState build() {
ref.onDispose(() => _searchDebounce?.cancel());
// build() 里不能同步读写 state，所以丢到微任务里再发起首次加载
Future.microtask(() => _fetchFirstPage(
keyword: '',
tag: '',
sort: 'updated',
location: NoteLocation.all,
));
return const NoteListState(loading: true);
}
/// 取第一页。参数由调用方传入而不是读 state，
/// 是为了能在 build() 阶段安全调用。
Future<void> _fetchFirstPage({
required String keyword,
required String tag,
required String sort,
required NoteLocation location,
}) async {
try {
final result = await ref.read(noteApiProvider).list(
page: 1,
size: _pageSize,
scope: location.apiScope,
folderId: location.folderId,
sort: sort,
keyword: keyword,
tag: tag,
);
if (!ref.mounted) return;
state = state.copyWith(
items: result.items,
loading: false,
error: null,
page: 1,
hasMore: result.hasMore,
total: result.total,
);
} on ApiException catch (e) {
if (!ref.mounted) return;
state = state.copyWith(loading: false, error: e.message);
} catch (_) {
if (!ref.mounted) return;
state = state.copyWith(loading: false, error: '笔记加载失败');
}
}
/// 下拉刷新 / 详情页改动后刷新。保留当前筛选条件。
Future<void> refresh() async {
state = state.copyWith(loading: true, error: null);
await _fetchFirstPage(
keyword: state.keyword,
tag: state.tag,
sort: state.sort,
location: state.location,
);
}
/// 上拉加载下一页
Future<void> loadMore() async {
if (state.loadingMore || !state.hasMore || state.loading) return;
state = state.copyWith(loadingMore: true);
try {
final next = state.page + 1;
final result = await ref.read(noteApiProvider).list(
page: next,
size: _pageSize,
scope: state.location.apiScope,
folderId: state.location.folderId,
sort: state.sort,
keyword: state.keyword,
tag: state.tag,
);
if (!ref.mounted) return;
state = state.copyWith(
// 用 id 去重：加载过程中如果有笔记被置顶/更新，
// 它可能同时出现在两页里，直接拼接会出现重复卡片
items: _mergeUnique(state.items, result.items),
loadingMore: false,
page: next,
hasMore: result.hasMore,
total: result.total,
);
} catch (_) {
if (!ref.mounted) return;
state = state.copyWith(loadingMore: false);
}
}
List<NoteListItem> _mergeUnique(List<NoteListItem> old, List<NoteListItem> added) {
final seen = old.map((e) => e.id).toSet();
return [...old, ...added.where((e) => !seen.contains(e.id))];
}
/// 搜索关键词。带防抖，避免每敲一个字都打一次接口。
void setKeyword(String keyword) {
if (keyword == state.keyword) return;
state = state.copyWith(keyword: keyword);
_searchDebounce?.cancel();
_searchDebounce = Timer(const Duration(milliseconds: 350), () {
if (!ref.mounted) return;
refresh();
});
}
/// 标签筛选
void setTag(String tag) {
if (tag == state.tag) return;
state = state.copyWith(tag: tag);
refresh();
}
/// 切换浏览的目录
void setLocation(NoteLocation location) {
if (location.scope == state.location.scope &&
location.folderId == state.location.folderId) {
return;
}
state = state.copyWith(location: location);
refresh();
}
/// 切换排序方式
void setSort(String sort) {
if (sort == state.sort) return;
state = state.copyWith(sort: sort);
refresh();
}
}
/// 列表用普通 NotifierProvider（不加 autoDispose）：
/// 从详情页返回时搜索关键词、标签筛选和所在目录都要还在，不能被回收重建。
final noteListProvider =
NotifierProvider<NoteListNotifier, NoteListState>(NoteListNotifier.new);
/// 笔记详情
final noteDetailProvider =
FutureProvider.autoDispose.family<NoteDetail, int>((ref, id) {
return ref.watch(noteApiProvider).detail(id);
});
/// 标签列表
final noteTagsProvider = FutureProvider.autoDispose<List<String>>((ref) {
return ref.watch(noteApiProvider).tags();
});
/// 目录树
final noteFolderTreeProvider = FutureProvider.autoDispose<FolderTree>((ref) {
return ref.watch(noteApiProvider).folderTree();
});