dellevin/MookNote
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.2.7

Browse Source
This commit is contained in:
DelLevin-Home
2026-07-16 03:13:30 +08:00
parent a8842fe91d
commit 1aab6858a7
12 changed files with 1217 additions and 1306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
lib/pages/note/note_add_page.dart
View File

@@ -1,7 +1,5 @@
import 'dart:io';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as p;
@@ -12,7 +10,6 @@ import '../../models/data_models.dart';
import '../../utils/toast_util.dart';
import '../../utils/image_path_helper.dart';
import '../../widgets/fade_in_local_image.dart';
import '../../widgets/tag_side_panel.dart';
import '../../widgets/vditor_editor.dart';
class NoteAddPage extends StatefulWidget {
@@ -125,20 +122,19 @@ class _NoteAddPageState extends State<NoteAddPage> {
}
Widget _buildEditArea(ColorScheme colors) {
final isWin = Platform.isWindows;
return Column(children: [
// 标题输入（Windows: 更大更醒目）
// 标题输入
Container(
padding: EdgeInsets.symmetric(horizontal: isWin ? 48 : 16, vertical: isWin ? 16 : 8),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(border: Border(bottom: BorderSide(color: colors.outlineVariant, width: 0.5))),
child: Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
child: TextField(
controller: _titleCtrl,
maxLines: 1,
style: TextStyle(fontSize: isWin ? 22 : 16, fontWeight: FontWeight.w700, color: colors.onSurface, height: 1.4),
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: colors.onSurface, height: 1.4),
decoration: InputDecoration(
hintText: '添加标题',
hintStyle: TextStyle(fontSize: isWin ? 22 : 16, fontWeight: FontWeight.w700, color: colors.onSurface.withValues(alpha: 0.2), height: 1.4),
hintStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: colors.onSurface.withValues(alpha: 0.2), height: 1.4),
border: InputBorder.none, enabledBorder: InputBorder.none, focusedBorder: InputBorder.none,
isDense: true,
contentPadding: EdgeInsets.zero,
@@ -147,163 +143,29 @@ class _NoteAddPageState extends State<NoteAddPage> {
),
)),
),
// Windows: 标签栏（彩色药丸样式）
if (isWin)
Container(
padding: const EdgeInsets.symmetric(horizontal: 48, vertical: 8),
child: Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
child: Align(
alignment: Alignment.centerLeft,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(mainAxisSize: MainAxisSize.min, children: [
for (int i = 0; i < _tags.length; i++)
Padding(
padding: const EdgeInsets.only(right: 6),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
color: colors.primaryContainer,
borderRadius: BorderRadius.circular(12),
),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Text(_tags[i], style: TextStyle(fontSize: 12, color: colors.onPrimaryContainer, fontWeight: FontWeight.w500)),
const SizedBox(width: 4),
GestureDetector(
onTap: () => setState(() => _tags.removeAt(i)),
child: Icon(Icons.close, size: 12, color: colors.onPrimaryContainer.withValues(alpha: 0.6)),
),
]),
),
),
GestureDetector(
onTap: _showTagPanel,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(color: colors.outline.withValues(alpha: 0.3), width: 1),
),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Icon(Icons.add, size: 14, color: colors.onSurface.withValues(alpha: 0.4)),
const SizedBox(width: 3),
Text('标签', style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.4))),
]),
),
),
]),
),
),
)),
),
// 内容编辑（Windows: 限宽居中）
// 内容编辑
Expanded(
child: isWin
? Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
child: VditorEditor(
key: _vditorKey,
initialContent: _contentCtrl.text,
noteId: _tempId,
isDark: Theme.of(context).brightness == Brightness.dark,
surfaceColor: colors.surface,
onContentChanged: (value) {
_contentCtrl.text = value;
setState(() {});
},
),
))
: TextField(
controller: _contentCtrl,
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.top,
strutStyle: const StrutStyle(forceStrutHeight: true, height: 1.6, fontSize: 14),
style: TextStyle(fontSize: 14, color: colors.onSurface, height: 1.6),
decoration: InputDecoration(
hintText: '使用 Markdown 格式书写...',
hintStyle: TextStyle(fontSize: 14, color: colors.onSurface.withValues(alpha: 0.25), height: 1.6),
border: InputBorder.none, enabledBorder: InputBorder.none, focusedBorder: InputBorder.none,
contentPadding: const EdgeInsets.all(16),
),
onChanged: (_) => setState(() {}),
),
child: VditorEditor(
key: _vditorKey,
initialContent: _contentCtrl.text,
noteId: _tempId,
isDark: Theme.of(context).brightness == Brightness.dark,
surfaceColor: colors.surface,
onContentChanged: (value) {
_contentCtrl.text = value;
setState(() {});
},
),
),
// 图片行
if (_images.isNotEmpty) _buildImageRow(colors),
// 底部标签 + 工具栏（仅非 Windows）
if (!isWin)
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
decoration: BoxDecoration(border: Border(top: BorderSide(color: colors.outlineVariant, width: 0.5))),
child: Column(children: [
// 标签行
Wrap(spacing: 6, runSpacing: 4, children: [
for (int i = 0; i < _tags.length; i++) Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(6)),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Text(_tags[i], style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.6))),
const SizedBox(width: 3),
GestureDetector(
onTap: () => setState(() => _tags.removeAt(i)),
child: Icon(Icons.close, size: 10, color: colors.onSurface.withValues(alpha: 0.3)),
),
]),
),
GestureDetector(
onTap: _showTagPanel,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
border: Border.all(color: colors.onSurface.withValues(alpha: 0.25), width: 1),
),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Icon(Icons.add, size: 12, color: colors.onSurface.withValues(alpha: 0.35)),
const SizedBox(width: 2),
Text('标签', style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.35))),
]),
),
),
]),
const SizedBox(height: 6),
// 工具栏
Row(children: [
Expanded(
child: SingleChildScrollView(scrollDirection: Axis.horizontal, child: Row(children: [
_toolBtn(Icons.title, '标题', _insertHeading),
_toolBtn(Icons.format_bold, '粗体', () => _insertMarkdown('**', '**')),
_toolBtn(Icons.format_italic, '斜体', () => _insertMarkdown('*', '*')),
_toolBtn(Icons.format_strikethrough, '删除线', () => _insertMarkdown('~~', '~~')),
_toolGap(colors),
_toolBtn(Icons.format_list_bulleted, '无序列表', () => _insertMarkdown('- ', '')),
_toolBtn(Icons.format_list_numbered, '有序列表', () => _insertMarkdown('1. ', '')),
_toolBtn(Icons.format_quote, '引用', () => _insertMarkdown('> ', '')),
_toolBtn(Icons.insert_link, '链接', () => _insertMarkdown('[', '](url)')),
_toolGap(colors),
_toolBtn(Icons.code, '行内代码', () => _insertMarkdown('`', '`')),
_toolBtn(Icons.data_object, '代码块', () => _insertMarkdown('```\n', '\n```')),
_toolBtn(Icons.horizontal_rule, '分割线', () => _insertMarkdown('---\n', '')),
_toolGap(colors),
_toolBtn(Icons.add_photo_alternate_outlined, '图片', _pickImage),
])),
),
const SizedBox(width: 8),
Text('${_contentCtrl.text.length} 字',
style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.3))),
]),
]),
),
// Windows: 底部字数（简洁）
if (isWin)
Container(
padding: const EdgeInsets.symmetric(horizontal: 48, vertical: 8),
child: Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
Text('${_contentCtrl.text.length} 字', style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.3))),
]),
)),
),
// 底部字数
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
Text('${_contentCtrl.text.length} 字', style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.3))),
]),
),
]);
}
@@ -400,78 +262,6 @@ class _NoteAddPageState extends State<NoteAddPage> {
);
}
Widget _toolBtn(IconData icon, String tooltip, VoidCallback onTap) {
final colors = Theme.of(context).colorScheme;
return Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(6),
child: Tooltip(
message: tooltip,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
child: Icon(icon, size: 16, color: colors.onSurface.withValues(alpha: 0.6)),
),
),
),
);
}
Widget _toolGap(ColorScheme colors) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 3),
child: SizedBox(height: 12, child: VerticalDivider(width: 0, thickness: 0.5, color: colors.outline)),
);
}
void _insertMarkdown(String left, String right) {
final text = _contentCtrl.text;
final selection = _contentCtrl.selection;
final start = selection.start;
final end = selection.end;
String selectedText = end > start ? text.substring(start, end) : '';
final insertion = '$left$selectedText$right';
_contentCtrl.value = TextEditingValue(
text: text.substring(0, start) + insertion + text.substring(end),
selection: TextSelection.collapsed(
offset: selectedText.isEmpty ? start + left.length : start + left.length + selectedText.length + right.length,
),
);
setState(() {});
}
void _insertHeading() {
final text = _contentCtrl.text;
final selection = _contentCtrl.selection;
final start = selection.start;
int lineStart = start;
while (lineStart > 0 && text[lineStart - 1] != '\n') lineStart--;
int hashCount = 0;
int pos = lineStart;
while (pos < text.length && text[pos] == '#') { hashCount++; pos++; }
if (pos < text.length && text[pos] == ' ') pos++;
if (hashCount > 0 && hashCount < 6) {
hashCount++;
final newPrefix = '${'#' * hashCount} ';
_contentCtrl.value = TextEditingValue(
text: text.substring(0, lineStart) + newPrefix + text.substring(pos),
selection: TextSelection.collapsed(offset: lineStart + newPrefix.length),
);
} else if (hashCount >= 6) {
_contentCtrl.value = TextEditingValue(
text: text.substring(0, lineStart) + text.substring(pos),
selection: TextSelection.collapsed(offset: lineStart),
);
} else {
_contentCtrl.value = TextEditingValue(
text: text.substring(0, lineStart) + '# ' + text.substring(lineStart),
selection: TextSelection.collapsed(offset: lineStart + 2),
);
}
setState(() {});
}
Future<void> _pickImage() async {
try {
final XFile? image = await _picker.pickImage(source: ImageSource.gallery, maxWidth: 1920, maxHeight: 1920, imageQuality: 85);
@@ -487,20 +277,6 @@ class _NoteAddPageState extends State<NoteAddPage> {
}
}
Future<void> _showTagPanel() async {
final provider = context.read<AppProvider>();
final tagRows = await provider.getTags('note_tag');
final allTags = tagRows.map((t) => t['name'] as String).toSet();
for (final note in provider.notes) { allTags.addAll(note.tags); }
if (!mounted) return;
TagSidePanel.show(
context: context,
selectedTags: List.from(_tags),
allAvailableTags: allTags.toList()..sort(),
onTagsChanged: (newTags) => setState(() => _tags = newTags),
);
}
MarkdownStyleSheet _buildMarkdownStyleSheet(ColorScheme colors) {
return MarkdownStyleSheet(
h1: TextStyle(fontSize: 24, fontWeight: FontWeight.w600, color: colors.onSurface, height: 1.4),
@@ -538,7 +314,7 @@ class _NoteAddPageState extends State<NoteAddPage> {
Future<void> _save() async {
final title = _titleCtrl.text.trim();
String content;
if (Platform.isWindows && _vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
if (_vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
content = (await _vditorKey.currentState!.getValue()).trim();
} else {
content = _contentCtrl.text.trim();
@@ -587,9 +363,4 @@ class _NoteAddPageState extends State<NoteAddPage> {
}
}
static List<String> _collectUnique(List<List<String>> lists) {
final s = <String>{};
for (final l in lists) { s.addAll(l); }
return s.toList()..sort();
}
}

311
lib/pages/note/note_detail_page.dart
View File

@@ -5,14 +5,12 @@ import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import 'package:provider/provider.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as p;
import 'package:uuid/uuid.dart';
import '../../providers/app_provider.dart';
import '../../widgets/fade_in_local_image.dart';
import '../../models/data_models.dart';
import '../../utils/toast_util.dart';
import '../../utils/image_path_helper.dart';
import '../../utils/responsive.dart';
import '../../widgets/tag_side_panel.dart';
import '../../widgets/vditor_editor.dart';
import 'note_share_page.dart';
@@ -79,7 +77,7 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
Future<void> _autoSave() async {
String content;
if (Platform.isWindows && _vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
if (_vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
content = (await _vditorKey.currentState!.getValue()).trim();
} else {
content = _contentCtrl.text.trim();
@@ -107,7 +105,7 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
_autoSaveTimer?.cancel();
final title = _titleCtrl.text.trim();
String content;
if (Platform.isWindows && _vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
if (_vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
content = (await _vditorKey.currentState!.getValue()).trim();
} else {
content = _contentCtrl.text.trim();
@@ -153,13 +151,9 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
)
: null,
titleSpacing: 0,
title: Text(
note.title.isNotEmpty
? note.title
: _truncateContent(note.content),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
title: note.title.isNotEmpty
? Text(note.title, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: colors.onSurface))
: null,
),
body: Stack(
children: [
@@ -215,16 +209,27 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
),
Expanded(
child: Markdown(
data: note.content,
styleSheet: _buildMarkdownStyleSheet(colors),
child: ListView(
padding: const EdgeInsets.all(16),
// ignore: deprecated_member_use
imageBuilder: (uri, title, alt) => _buildMarkdownImage(uri, note),
children: [
// Markdown 正文
Markdown(
data: note.content,
styleSheet: _buildMarkdownStyleSheet(colors),
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
// ignore: deprecated_member_use
imageBuilder: (uri, title, alt) => _buildMarkdownImage(uri, note),
),
// 附加图片（不在 markdown 中的独立图片）
if (note.images.isNotEmpty) ...[
const SizedBox(height: 16),
_buildInlineImageGrid(note.images),
],
],
),
),
if (note.images.isNotEmpty) _buildImageRow(note.images),
],
),
@@ -435,173 +440,55 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
}
Widget _buildEditArea(ColorScheme colors, Note note) {
final isWin = Platform.isWindows;
return Column(children: [
// 标题输入（Windows: 更大更醒目）
// 标题输入
Container(
padding: EdgeInsets.symmetric(horizontal: isWin ? 48 : 16, vertical: isWin ? 16 : 8),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(border: Border(bottom: BorderSide(color: colors.outlineVariant, width: 0.5))),
child: Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
child: TextField(controller: _titleCtrl, maxLines: 1,
style: TextStyle(fontSize: isWin ? 22 : 16, fontWeight: FontWeight.w700, color: colors.onSurface, height: 1.4),
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: colors.onSurface, height: 1.4),
decoration: InputDecoration(hintText: '添加标题',
hintStyle: TextStyle(fontSize: isWin ? 22 : 16, fontWeight: FontWeight.w700, color: colors.onSurface.withValues(alpha: 0.2), height: 1.4),
hintStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: colors.onSurface.withValues(alpha: 0.2), height: 1.4),
border: InputBorder.none, enabledBorder: InputBorder.none, focusedBorder: InputBorder.none, isDense: true, contentPadding: EdgeInsets.zero),
onChanged: (_) => setState(() {})),
)),
),
// Windows: 标签栏（彩色药丸样式）
if (isWin)
Container(
padding: const EdgeInsets.symmetric(horizontal: 48, vertical: 8),
child: Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
child: Align(
alignment: Alignment.centerLeft,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(mainAxisSize: MainAxisSize.min, children: [
for (int i = 0; i < _editTags.length; i++)
Padding(
padding: const EdgeInsets.only(right: 6),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
color: colors.primaryContainer,
borderRadius: BorderRadius.circular(12),
),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Text(_editTags[i], style: TextStyle(fontSize: 12, color: colors.onPrimaryContainer, fontWeight: FontWeight.w500)),
const SizedBox(width: 4),
GestureDetector(
onTap: () => setState(() => _editTags.removeAt(i)),
child: Icon(Icons.close, size: 12, color: colors.onPrimaryContainer.withValues(alpha: 0.6)),
),
]),
),
),
GestureDetector(
onTap: _showEditTagPanel,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(color: colors.outline.withValues(alpha: 0.3), width: 1),
),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Icon(Icons.add, size: 14, color: colors.onSurface.withValues(alpha: 0.4)),
const SizedBox(width: 3),
Text('标签', style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.4))),
]),
),
),
]),
),
),
)),
),
// 内容编辑（Windows: 限宽居中）
// 内容编辑
Expanded(
child: isWin
? Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
child: VditorEditor(
key: _vditorKey,
initialContent: _contentCtrl.text,
noteId: widget.note.id,
isDark: Theme.of(context).brightness == Brightness.dark,
surfaceColor: colors.surface,
onContentChanged: (value) {
_contentCtrl.text = value;
_onContentChanged();
},
),
))
: TextField(controller: _contentCtrl, maxLines: null, expands: true,
textAlignVertical: TextAlignVertical.top,
strutStyle: const StrutStyle(forceStrutHeight: true, height: 1.6, fontSize: 14),
style: TextStyle(fontSize: 14, color: colors.onSurface, height: 1.6),
decoration: InputDecoration(hintText: '使用 Markdown 格式书写...',
hintStyle: TextStyle(fontSize: 14, color: colors.onSurface.withValues(alpha: 0.25), height: 1.6),
border: InputBorder.none, enabledBorder: InputBorder.none, focusedBorder: InputBorder.none,
contentPadding: const EdgeInsets.all(16)),
onChanged: (_) => _onContentChanged()),
child: VditorEditor(
key: _vditorKey,
initialContent: _contentCtrl.text,
noteId: widget.note.id,
isDark: Theme.of(context).brightness == Brightness.dark,
surfaceColor: colors.surface,
onContentChanged: (value) {
_contentCtrl.text = value;
_onContentChanged();
},
),
),
// 图片网格
if (_editImages.isNotEmpty) _buildEditImageGrid(colors),
// 底部标签 + 字数 + 工具栏（仅非 Windows）
if (!isWin)
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
decoration: BoxDecoration(border: Border(top: BorderSide(color: colors.outlineVariant, width: 0.5))),
child: Column(children: [
// 标签行
Wrap(spacing: 6, runSpacing: 4, children: [
for (int i = 0; i < _editTags.length; i++) Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(6)),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Text(_editTags[i], style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.6))),
const SizedBox(width: 3),
GestureDetector(onTap: () => setState(() => _editTags.removeAt(i)),
child: Icon(Icons.close, size: 10, color: colors.onSurface.withValues(alpha: 0.3))),
])),
GestureDetector(onTap: _showEditTagPanel,
child: Container(padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(6),
border: Border.all(color: colors.onSurface.withValues(alpha: 0.25), width: 1)),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Icon(Icons.add, size: 12, color: colors.onSurface.withValues(alpha: 0.35)),
const SizedBox(width: 2),
Text('标签', style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.35))),
]))),
]),
const SizedBox(height: 6),
// 工具栏
Row(children: [
Expanded(child: SingleChildScrollView(scrollDirection: Axis.horizontal, child: Row(children: [
_editToolBtn(Icons.title, '标题', _insertHeading),
_editToolBtn(Icons.format_bold, '粗体', () => _insertMarkdown('**', '**')),
_editToolBtn(Icons.format_italic, '斜体', () => _insertMarkdown('*', '*')),
_editToolBtn(Icons.format_strikethrough, '删除线', () => _insertMarkdown('~~', '~~')),
_editToolGap(colors),
_editToolBtn(Icons.format_list_bulleted, '无序列表', () => _insertMarkdown('- ', '')),
_editToolBtn(Icons.format_list_numbered, '有序列表', () => _insertMarkdown('1. ', '')),
_editToolBtn(Icons.format_quote, '引用', () => _insertMarkdown('> ', '')),
_editToolBtn(Icons.insert_link, '链接', () => _insertMarkdown('[', '](url)')),
_editToolGap(colors),
_editToolBtn(Icons.code, '行内代码', () => _insertMarkdown('`', '`')),
_editToolBtn(Icons.data_object, '代码块', () => _insertMarkdown('```\n', '\n```')),
_editToolBtn(Icons.horizontal_rule, '分割线', () => _insertMarkdown('---\n', '')),
_editToolGap(colors),
_editToolBtn(Icons.add_photo_alternate_outlined, '图片', _pickEditImage),
]))),
const SizedBox(width: 8),
Text('${_contentCtrl.text.length} 字', style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.3))),
]),
]),
),
// Windows: 底部字数（简洁）
if (isWin)
Container(
padding: const EdgeInsets.symmetric(horizontal: 48, vertical: 8),
child: Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
Text('${_contentCtrl.text.length} 字', style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.3))),
]),
)),
),
// 底部字数
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
Text('${_contentCtrl.text.length} 字', style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.3))),
]),
),
]);
}
Widget _buildPreviewArea(ColorScheme colors, Note note) {
final isWin = Platform.isWindows;
return ListView(
padding: EdgeInsets.symmetric(vertical: isWin ? 32 : 24),
padding: const EdgeInsets.symmetric(vertical: 24),
children: [
Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
child: Padding(padding: EdgeInsets.symmetric(horizontal: isWin ? 48 : 24),
child: Padding(padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
if (_titleCtrl.text.isNotEmpty) ...[
Text(_titleCtrl.text, style: TextStyle(fontSize: isWin ? 28 : 24, fontWeight: FontWeight.w700, color: colors.onSurface, height: 1.3)),
Text(_titleCtrl.text, style: TextStyle(fontSize: 24, fontWeight: FontWeight.w700, color: colors.onSurface, height: 1.3)),
const SizedBox(height: 12),
],
// 标签
@@ -640,64 +527,6 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
);
}
Widget _editToolBtn(IconData icon, String tooltip, VoidCallback onTap) {
final colors = Theme.of(context).colorScheme;
return Material(color: Colors.transparent,
child: InkWell(onTap: onTap, borderRadius: BorderRadius.circular(6),
child: Tooltip(message: tooltip,
child: Padding(padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
child: Icon(icon, size: 16, color: colors.onSurface.withValues(alpha: 0.6))))));
}
Widget _editToolGap(ColorScheme colors) {
return Padding(padding: const EdgeInsets.symmetric(horizontal: 3),
child: SizedBox(height: 12, child: VerticalDivider(width: 0, thickness: 0.5, color: colors.outline)));
}
void _insertMarkdown(String left, String right) {
final text = _contentCtrl.text;
final selection = _contentCtrl.selection;
final start = selection.start;
final end = selection.end;
String selectedText = end > start ? text.substring(start, end) : '';
final insertion = '$left$selectedText$right';
_contentCtrl.value = TextEditingValue(
text: text.substring(0, start) + insertion + text.substring(end),
selection: TextSelection.collapsed(
offset: selectedText.isEmpty ? start + left.length : start + left.length + selectedText.length + right.length,
),
);
_onContentChanged();
}
void _insertHeading() {
final text = _contentCtrl.text;
final selection = _contentCtrl.selection;
final start = selection.start;
int lineStart = start;
while (lineStart > 0 && text[lineStart - 1] != '\n') lineStart--;
int hashCount = 0;
int pos = lineStart;
while (pos < text.length && text[pos] == '#') { hashCount++; pos++; }
if (pos < text.length && text[pos] == ' ') pos++;
if (hashCount > 0 && hashCount < 6) {
hashCount++;
final newPrefix = '${'#' * hashCount} ';
_contentCtrl.value = TextEditingValue(
text: text.substring(0, lineStart) + newPrefix + text.substring(pos),
selection: TextSelection.collapsed(offset: lineStart + newPrefix.length));
} else if (hashCount >= 6) {
_contentCtrl.value = TextEditingValue(
text: text.substring(0, lineStart) + text.substring(pos),
selection: TextSelection.collapsed(offset: lineStart));
} else {
_contentCtrl.value = TextEditingValue(
text: text.substring(0, lineStart) + '# ' + text.substring(lineStart),
selection: TextSelection.collapsed(offset: lineStart + 2));
}
_onContentChanged();
}
Future<void> _pickEditImage() async {
try {
final XFile? image = await _picker.pickImage(source: ImageSource.gallery, maxWidth: 1920, maxHeight: 1920, imageQuality: 85);
@@ -714,17 +543,6 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
}
}
Future<void> _showEditTagPanel() async {
final provider = context.read<AppProvider>();
final tagRows = await provider.getTags('note_tag');
final allTags = tagRows.map((t) => t['name'] as String).toSet();
for (final note in provider.notes) { allTags.addAll(note.tags); }
if (!mounted) return;
TagSidePanel.show(context: context, selectedTags: List.from(_editTags),
allAvailableTags: allTags.toList()..sort(),
onTagsChanged: (newTags) => setState(() => _editTags = newTags));
}
Widget _buildEditImageGrid(ColorScheme colors) {
return Container(
padding: const EdgeInsets.fromLTRB(16, 6, 16, 0),
@@ -783,6 +601,37 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
);
}
/// 内嵌图片网格（移动端正文后展示）
Widget _buildInlineImageGrid(List<String> images) {
final colors = Theme.of(context).colorScheme;
return Wrap(
spacing: 8,
runSpacing: 8,
children: images.map((path) {
return GestureDetector(
onTap: () => _showImagePreview(images, images.indexOf(path)),
child: Container(
width: (MediaQuery.of(context).size.width - 48) / 3,
height: (MediaQuery.of(context).size.width - 48) / 3,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(color: colors.outlineVariant, width: 0.5),
),
clipBehavior: Clip.antiAlias,
child: FadeInLocalImage(
path: path,
fit: BoxFit.cover,
errorWidget: Container(
color: colors.surfaceContainerHighest,
child: Icon(Icons.broken_image_outlined, size: 20, color: colors.onSurface.withValues(alpha: 0.25)),
),
),
),
);
}).toList(),
);
}
Widget _buildImageRow(List<String> images) {
final colors = Theme.of(context).colorScheme;
return Container(

273
lib/pages/note/note_form_page.dart
View File

@@ -4,7 +4,6 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as p;
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import '../../providers/app_provider.dart';
import 'package:uuid/uuid.dart';
import '../../models/data_models.dart';
@@ -12,6 +11,7 @@ import '../../utils/toast_util.dart';
import '../../utils/image_path_helper.dart';
import '../../widgets/fade_in_local_image.dart';
import '../../widgets/tag_side_panel.dart';
import '../../widgets/vditor_editor.dart';
/// 添加/编辑笔记页面 - 极简书写界面
class NoteFormPage extends StatefulWidget {
@@ -32,11 +32,13 @@ class _NoteFormPageState extends State<NoteFormPage> {
bool _isEditing = false;
final ImagePicker _picker = ImagePicker();
String? _tempNoteId; // 新建模式时使用的临时笔记ID
String _editorMode = 'edit'; // 'edit' | 'preview'
Timer? _autoSaveTimer;
Timer? _saveStatusTimer;
String _saveStatus = ''; // '', 'saved'
Note? _savedNote; // 新建模式首次自动保存后的笔记引用
final _vditorKey = GlobalKey<VditorEditorState>();
final _scrollController = ScrollController();
bool _editorTouched = false;
static const _weekdays = ['一', '二', '三', '四', '五', '六', '日'];
@@ -51,6 +53,9 @@ class _NoteFormPageState extends State<NoteFormPage> {
_tags = note != null ? List.from(note.tags) : [];
_images = note != null ? List.from(note.images) : [];
_isEditing = note != null;
if (!_isEditing) {
_tempNoteId = const Uuid().v4();
}
_titleController.addListener(_onTextChanged);
_contentController.addListener(_onTextChanged);
}
@@ -72,7 +77,12 @@ class _NoteFormPageState extends State<NoteFormPage> {
}
Future<void> _autoSave() async {
final content = _contentController.text.trim();
String content;
if (_vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
content = (await _vditorKey.currentState!.getValue()).trim();
} else {
content = _contentController.text.trim();
}
final title = _titleController.text.trim();
if (title.isEmpty && content.isEmpty) return;
@@ -157,13 +167,22 @@ class _NoteFormPageState extends State<NoteFormPage> {
// 可滚动内容
Expanded(
child: CustomScrollView(
controller: _scrollController,
physics: _editorTouched ? const NeverScrollableScrollPhysics() : null,
slivers: [
// 标题行（点击编辑）
SliverToBoxAdapter(child: _buildTitleInput(colors)),
// 编辑区域 — 固定高度
// 编辑区域 — 高度随内容撑开，触摸时禁用外层滚动
SliverToBoxAdapter(
child: SizedBox(height: contentH, child: _buildContentArea()),
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: contentH),
child: GestureDetector(
onTapDown: (_) => setState(() => _editorTouched = true),
onTapUp: (_) => setState(() => _editorTouched = false),
onTapCancel: () => setState(() => _editorTouched = false),
child: _buildEditor(),
)),
),
// 图片 + 标签 + 字数 — 随内容撑开
@@ -256,31 +275,7 @@ class _NoteFormPageState extends State<NoteFormPage> {
);
}
/// 在光标处插入 Markdown 语法，光标自动放到正确位置
void _insertMarkdown(String left, String right) {
final text = _contentController.text;
final selection = _contentController.selection;
final start = selection.start;
final end = selection.end;
String selectedText = '';
if (end > start) {
selectedText = text.substring(start, end);
}
final insertion = '$left$selectedText$right';
// 原子更新：一次性设置 text 和 selection，避免分步操作导致光标跳动
_contentController.value = TextEditingValue(
text: text.substring(0, start) + insertion + text.substring(end),
selection: TextSelection.collapsed(
offset: selectedText.isEmpty
? start + left.length
: start + left.length + selectedText.length + right.length,
),
);
}
/// 现代极简底部工具栏
/// 底部浮动工具栏
Widget _buildFloatingToolbar() {
final colors = Theme.of(context).colorScheme;
return Container(
@@ -313,12 +308,15 @@ class _NoteFormPageState extends State<NoteFormPage> {
_toolGap(),
_toolBtn(Icons.format_list_bulleted, '无序列表', () => _insertMarkdown('- ', '')),
_toolBtn(Icons.format_list_numbered, '有序列表', () => _insertMarkdown('1. ', '')),
_toolBtn(Icons.check_box_outlined, '待办', () => _insertMarkdown('- [ ] ', '')),
_toolBtn(Icons.format_quote, '引用', () => _insertMarkdown('> ', '')),
_toolBtn(Icons.insert_link, '链接', () => _insertMarkdown('[', '](url)')),
_toolGap(),
_toolBtn(Icons.code, '行内代码', () => _insertMarkdown('`', '`')),
_toolBtn(Icons.data_object, '代码块', () => _insertMarkdown('```\n', '\n```')),
_toolBtn(Icons.horizontal_rule, '分割线', () => _insertMarkdown('---\n', '')),
_toolGap(),
_toolBtn(Icons.add_photo_alternate_outlined, '图片', _pickImage),
],
),
),
@@ -357,194 +355,38 @@ class _NoteFormPageState extends State<NoteFormPage> {
);
}
Widget _modeSwitch(IconData icon, String mode) {
final colors = Theme.of(context).colorScheme;
final active = _editorMode == mode;
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () => setState(() => _editorMode = mode),
borderRadius: BorderRadius.circular(8),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 6),
decoration: BoxDecoration(
color: active ? colors.primary : Colors.transparent,
borderRadius: BorderRadius.circular(8),
),
child: Icon(
icon,
size: 18,
color: active ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.35),
),
),
),
);
/// 在光标处插入 Markdown 语法（通过 VditorEditor）
void _insertMarkdown(String left, String right) {
final vditor = _vditorKey.currentState;
if (vditor != null && vditor.isReady) {
vditor.insertValue(left + right);
}
}
/// 插入标题（在当前行首插入 # ，如果已有则升级 ## → ### → ####）
/// 插入标题（通过 VditorEditor）
void _insertHeading() {
final text = _contentController.text;
final selection = _contentController.selection;
final start = selection.start;
// 找到当前行起始位置
int lineStart = start;
while (lineStart > 0 && text[lineStart - 1] != '\n') {
lineStart--;
}
// 计算当前行的 # 前缀
int hashCount = 0;
int pos = lineStart;
while (pos < text.length && text[pos] == '#') {
hashCount++;
pos++;
}
// 跳过 # 后的空格
if (pos < text.length && text[pos] == ' ') pos++;
String newPrefix;
int cursorOffset;
if (hashCount > 0 && hashCount < 6) {
// 升级标题级别
hashCount++;
newPrefix = '${'#' * hashCount} ';
cursorOffset = newPrefix.length;
// 替换旧前缀
_contentController.value = TextEditingValue(
text: text.substring(0, lineStart) + newPrefix + text.substring(pos),
selection: TextSelection.collapsed(offset: lineStart + cursorOffset),
);
} else if (hashCount >= 6) {
// 已经是 H6，重置为普通文本
_contentController.value = TextEditingValue(
text: text.substring(0, lineStart) + text.substring(pos),
selection: TextSelection.collapsed(offset: lineStart),
);
} else {
// 没有 # 前缀，添加 H1
newPrefix = '# ';
_contentController.value = TextEditingValue(
text: text.substring(0, lineStart) + newPrefix + text.substring(lineStart),
selection: TextSelection.collapsed(offset: lineStart + 2),
);
final vditor = _vditorKey.currentState;
if (vditor != null && vditor.isReady) {
vditor.insertValue('# ');
}
}
/// 根据 _editorMode 构建内容区域
Widget _buildContentArea() {
switch (_editorMode) {
case 'preview':
return _buildPreview();
case 'edit':
default:
return _buildEditor();
}
}
/// 编辑器
/// 编辑器 — 使用 VditorEditor 替代原来的 TextField
Widget _buildEditor() {
final colors = Theme.of(context).colorScheme;
return TextField(
controller: _contentController,
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.top,
strutStyle: const StrutStyle(
forceStrutHeight: true,
height: 1.6,
fontSize: 14,
),
style: TextStyle(
fontSize: 14,
color: colors.onSurface,
height: 1.6,
),
decoration: InputDecoration(
hintText: '使用 Markdown 格式书写...',
hintStyle: TextStyle(
fontSize: 14,
color: colors.onSurface.withValues(alpha: 0.25),
height: 1.6,
),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
contentPadding: const EdgeInsets.all(16),
),
return VditorEditor(
key: _vditorKey,
initialContent: _contentController.text,
noteId: _isEditing && widget.note != null ? widget.note!.id : (_tempNoteId ?? ''),
isDark: Theme.of(context).brightness == Brightness.dark,
surfaceColor: colors.surface,
onContentChanged: (value) {
_contentController.text = value;
_onTextChanged();
},
);
}
/// 实时 Markdown 预览（点击回到编辑）
Widget _buildPreview() {
final colors = Theme.of(context).colorScheme;
final text = _contentController.text;
return GestureDetector(
onTap: () => setState(() => _editorMode = 'edit'),
behavior: HitTestBehavior.opaque,
child: Container(
color: colors.surfaceContainerHigh,
child: text.isEmpty
? Center(
child: Text(
'预览区域',
style: TextStyle(
fontSize: 14,
color: colors.onSurface.withValues(alpha: 0.25),
),
),
)
: Markdown(
data: text,
selectable: true,
padding: const EdgeInsets.all(16),
styleSheet: MarkdownStyleSheet(
h1: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w600,
color: colors.onSurface,
height: 1.4,
),
h2: TextStyle(
fontSize: 19,
fontWeight: FontWeight.w600,
color: colors.onSurface,
height: 1.4,
),
h3: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: colors.onSurface,
height: 1.4,
),
p: TextStyle(
fontSize: 15,
color: colors.onSurface.withValues(alpha: 0.75),
height: 1.7,
),
code: TextStyle(
fontSize: 14,
color: colors.onSurface,
backgroundColor: colors.outlineVariant,
),
codeblockDecoration: BoxDecoration(
color: colors.outlineVariant,
borderRadius: BorderRadius.circular(6),
),
blockquote: TextStyle(
fontSize: 15,
color: colors.onSurface.withValues(alpha: 0.6),
),
blockquoteDecoration: BoxDecoration(
border: Border(
left: BorderSide(color: colors.onSurface.withValues(alpha: 0.25), width: 3),
),
),
),
),
));
}
/// 标签 chips 行（右侧展示）
Widget _buildTagChips() {
return Wrap(
@@ -631,10 +473,10 @@ class _NoteFormPageState extends State<NoteFormPage> {
child: TextField(
controller: _titleController,
maxLines: 1,
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: colors.onSurface),
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: colors.onSurface),
decoration: InputDecoration(
hintText: '添加标题',
hintStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: colors.onSurface.withValues(alpha: 0.2)),
hintStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: colors.onSurface.withValues(alpha: 0.2)),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
@@ -665,7 +507,12 @@ class _NoteFormPageState extends State<NoteFormPage> {
Future<void> _saveNote() async {
_autoSaveTimer?.cancel();
final content = _contentController.text.trim();
String content;
if (_vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
content = (await _vditorKey.currentState!.getValue()).trim();
} else {
content = _contentController.text.trim();
}
final title = _titleController.text.trim();
if (title.isEmpty && content.isEmpty) {
@@ -679,7 +526,7 @@ class _NoteFormPageState extends State<NoteFormPage> {
if (_isEditing && widget.note != null) {
// 更新现有笔记（编辑已有笔记）
final updatedNote = widget.note!.copyWith(
title: _titleController.text.trim(),
title: title,
content: content,
tags: _tags,
images: _images,
@@ -689,7 +536,7 @@ class _NoteFormPageState extends State<NoteFormPage> {
} else if (_savedNote != null) {
// 自动保存过的新笔记，更新它
final updatedNote = _savedNote!.copyWith(
title: _titleController.text.trim(),
title: title,
content: content,
tags: _tags,
images: _images,
@@ -709,8 +556,6 @@ class _NoteFormPageState extends State<NoteFormPage> {
finalImages = await _moveImagesToNewId(oldNoteId, newNoteId);
}
final title = _titleController.text.trim();
final newNote = Note(
id: noteId,
title: title,