generated from dellevin/template
666 lines
20 KiB
Dart
666 lines
20 KiB
Dart
import 'dart:io';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_markdown/flutter_markdown.dart';
|
|
import 'package:image_picker/image_picker.dart';
|
|
import 'package:provider/provider.dart';
|
|
import 'package:path/path.dart' as p;
|
|
import '../../providers/app_provider.dart';
|
|
import '../../models/data_models.dart';
|
|
import '../../utils/toast_util.dart';
|
|
import '../../utils/image_path_helper.dart';
|
|
import '../../widgets/markdown_editing_controller.dart';
|
|
|
|
/// Typora 风格 Markdown 编辑器
|
|
/// 所见即所得，输入 # 标题自动渲染，**粗体** 自动加粗等
|
|
class NoteFormPage extends StatefulWidget {
|
|
final Note? note;
|
|
|
|
const NoteFormPage({super.key, this.note});
|
|
|
|
@override
|
|
State<NoteFormPage> createState() => _NoteFormPageState();
|
|
}
|
|
|
|
class _NoteFormPageState extends State<NoteFormPage> {
|
|
late MarkdownEditingController _contentController;
|
|
late TextEditingController _titleController;
|
|
late DateTime _createdAt;
|
|
List<String> _images = [];
|
|
final ImagePicker _picker = ImagePicker();
|
|
bool _isPreviewMode = false;
|
|
late final ScrollController _scrollController;
|
|
late final FocusNode _contentFocusNode;
|
|
|
|
bool get _isNewNote => widget.note == null;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
final note = widget.note;
|
|
_createdAt = note?.createdAt ?? DateTime.now();
|
|
_images = note != null ? List.from(note.images) : [];
|
|
_titleController = TextEditingController(text: note?.title ?? '');
|
|
_contentController = MarkdownEditingController(text: note?.content ?? '');
|
|
_scrollController = ScrollController();
|
|
_contentFocusNode = FocusNode();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_contentController.dispose();
|
|
_titleController.dispose();
|
|
_scrollController.dispose();
|
|
_contentFocusNode.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.white,
|
|
resizeToAvoidBottomInset: true,
|
|
appBar: AppBar(
|
|
elevation: 0,
|
|
backgroundColor: Colors.white,
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.arrow_back, color: Color(0xFF333333)),
|
|
onPressed: () => Navigator.pop(context),
|
|
),
|
|
actions: [
|
|
// 预览/编辑切换
|
|
IconButton(
|
|
icon: Icon(
|
|
_isPreviewMode ? Icons.edit_outlined : Icons.visibility_outlined,
|
|
color: const Color(0xFF333333),
|
|
),
|
|
onPressed: () => setState(() => _isPreviewMode = !_isPreviewMode),
|
|
),
|
|
// 保存
|
|
IconButton(
|
|
icon: const Icon(Icons.check, color: Color(0xFF333333)),
|
|
onPressed: _saveNote,
|
|
),
|
|
],
|
|
),
|
|
body: Column(
|
|
children: [
|
|
// 标题输入
|
|
_buildTitleField(),
|
|
const Divider(height: 1, color: Color(0xFFF0F0F0)),
|
|
|
|
// 内容区域
|
|
Expanded(
|
|
child: _isPreviewMode ? _buildPreview() : _buildEditor(),
|
|
),
|
|
|
|
// 图片区域
|
|
if (_images.isNotEmpty) _buildImageSection(),
|
|
|
|
// 底部工具栏 - 键盘弹出时自动上移
|
|
if (!_isPreviewMode) _buildMarkdownToolbarContent(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// ==================== 标题输入 ====================
|
|
|
|
/// 构建标题输入框
|
|
Widget _buildTitleField() {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
child: TextField(
|
|
controller: _titleController,
|
|
style: const TextStyle(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.w600,
|
|
color: Color(0xFF1A1A1A),
|
|
height: 1.4,
|
|
),
|
|
decoration: const InputDecoration(
|
|
hintText: '笔记标题',
|
|
hintStyle: TextStyle(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.w600,
|
|
color: Color(0xFFCCCCCC),
|
|
),
|
|
border: InputBorder.none,
|
|
contentPadding: EdgeInsets.zero,
|
|
),
|
|
maxLines: 1,
|
|
),
|
|
);
|
|
}
|
|
|
|
// ==================== Markdown 快捷工具栏 ====================
|
|
|
|
/// 构建 Markdown 快捷工具栏
|
|
Widget _buildMarkdownToolbarContent() {
|
|
return Container(
|
|
height: 48,
|
|
color: const Color(0xFFF5F5F5),
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 4),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// 文本格式
|
|
_buildToolbarButton(Icons.format_bold, '粗体', _insertBold),
|
|
_buildToolbarButton(Icons.format_italic, '斜体', _insertItalic),
|
|
_buildToolbarButton(Icons.format_strikethrough, '删除线', _insertStrikethrough),
|
|
_buildToolbarDivider(),
|
|
// 段落
|
|
_buildToolbarButton(Icons.title, '标题', () => _insertHeader(1)),
|
|
_buildToolbarButton(Icons.format_quote, '引用', _insertQuote),
|
|
_buildToolbarButton(Icons.code, '代码块', _insertCodeBlock),
|
|
_buildToolbarButton(Icons.horizontal_rule, '分割线', _insertDivider),
|
|
_buildToolbarDivider(),
|
|
// 列表
|
|
_buildToolbarButton(Icons.format_list_bulleted, '无序列表', _insertUnorderedList),
|
|
_buildToolbarButton(Icons.format_list_numbered, '有序列表', _insertOrderedList),
|
|
_buildToolbarDivider(),
|
|
// 插入
|
|
_buildToolbarButton(Icons.link, '链接', _insertLink),
|
|
_buildToolbarButton(Icons.image, '图片', _pickImage),
|
|
_buildToolbarButton(Icons.calendar_today, '日期', _insertDate),
|
|
_buildToolbarButton(Icons.access_time, '时间', _insertTime),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建工具栏分隔线
|
|
Widget _buildToolbarDivider() {
|
|
return Container(
|
|
width: 1,
|
|
height: 20,
|
|
margin: const EdgeInsets.symmetric(horizontal: 4),
|
|
color: const Color(0xFFDCDCDC),
|
|
);
|
|
}
|
|
|
|
/// 构建工具栏按钮
|
|
Widget _buildToolbarButton(IconData icon, String tooltip, VoidCallback onPressed) {
|
|
return Tooltip(
|
|
message: tooltip,
|
|
child: Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
onTap: onPressed,
|
|
borderRadius: BorderRadius.circular(4),
|
|
splashColor: const Color(0x1F000000),
|
|
child: Container(
|
|
width: 40,
|
|
height: 40,
|
|
alignment: Alignment.center,
|
|
child: Icon(
|
|
icon,
|
|
size: 20,
|
|
color: const Color(0xFF666666),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ==================== 编辑器主体 ====================
|
|
|
|
/// 构建编辑器主体 - 使用 MarkdownEditingController 实现所见即所得
|
|
Widget _buildEditor() {
|
|
return TextField(
|
|
controller: _contentController,
|
|
scrollController: _scrollController,
|
|
focusNode: _contentFocusNode,
|
|
style: const TextStyle(
|
|
fontSize: 16,
|
|
color: Color(0xFF333333),
|
|
height: 1.8,
|
|
),
|
|
decoration: const InputDecoration(
|
|
hintText: '开始书写 Markdown...\n'
|
|
'支持 # 标题、**粗体**、*斜体*、\`代码\` 等',
|
|
hintStyle: TextStyle(
|
|
fontSize: 16,
|
|
color: Color(0xFFCCCCCC),
|
|
height: 1.8,
|
|
),
|
|
border: InputBorder.none,
|
|
contentPadding: EdgeInsets.all(16),
|
|
),
|
|
maxLines: null,
|
|
expands: true,
|
|
textAlignVertical: TextAlignVertical.top,
|
|
keyboardType: TextInputType.multiline,
|
|
);
|
|
}
|
|
|
|
// ==================== 预览区域 ====================
|
|
|
|
/// 构建预览区域
|
|
Widget _buildPreview() {
|
|
return SingleChildScrollView(
|
|
controller: _scrollController,
|
|
padding: const EdgeInsets.all(16),
|
|
child: MarkdownBody(
|
|
data: _contentController.text.isEmpty
|
|
? '*预览区域 - 开始输入 Markdown 内容...*'
|
|
: _contentController.text,
|
|
styleSheet: _buildMarkdownStyleSheet(),
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建 Markdown 样式表
|
|
MarkdownStyleSheet _buildMarkdownStyleSheet() {
|
|
return MarkdownStyleSheet(
|
|
h1: const TextStyle(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.w600,
|
|
color: Color(0xFF1A1A1A),
|
|
height: 1.4,
|
|
),
|
|
h2: const TextStyle(
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w600,
|
|
color: Color(0xFF1A1A1A),
|
|
height: 1.4,
|
|
),
|
|
h3: const TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
color: Color(0xFF1A1A1A),
|
|
height: 1.4,
|
|
),
|
|
h4: const TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
color: Color(0xFF1A1A1A),
|
|
height: 1.4,
|
|
),
|
|
p: const TextStyle(
|
|
fontSize: 15,
|
|
color: Color(0xFF333333),
|
|
height: 1.8,
|
|
),
|
|
code: const TextStyle(
|
|
fontSize: 14,
|
|
color: Color(0xFF1A1A1A),
|
|
backgroundColor: Color(0xFFF5F5F5),
|
|
fontFamily: 'monospace',
|
|
),
|
|
codeblockDecoration: BoxDecoration(
|
|
color: const Color(0xFFF8F8F8),
|
|
border: Border.all(color: const Color(0xFFE5E5E5)),
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
codeblockPadding: const EdgeInsets.all(12),
|
|
blockquote: const TextStyle(
|
|
fontSize: 15,
|
|
color: Color(0xFF666666),
|
|
fontStyle: FontStyle.italic,
|
|
height: 1.8,
|
|
),
|
|
blockquoteDecoration: const BoxDecoration(
|
|
border: Border(left: BorderSide(color: Color(0xFF999999), width: 4)),
|
|
),
|
|
blockquotePadding: const EdgeInsets.only(left: 12, top: 4, bottom: 4),
|
|
listBullet: const TextStyle(
|
|
fontSize: 15,
|
|
color: Color(0xFF1A1A1A),
|
|
),
|
|
listIndent: 24,
|
|
a: const TextStyle(
|
|
fontSize: 15,
|
|
color: Color(0xFF4A90D9),
|
|
decoration: TextDecoration.underline,
|
|
),
|
|
tableHead: const TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
color: Color(0xFF1A1A1A),
|
|
),
|
|
tableBody: const TextStyle(
|
|
fontSize: 14,
|
|
color: Color(0xFF333333),
|
|
),
|
|
tableBorder: TableBorder.all(
|
|
color: const Color(0xFFE5E5E5),
|
|
width: 0.5,
|
|
),
|
|
tableColumnWidth: const FlexColumnWidth(),
|
|
tableCellsDecoration: const BoxDecoration(
|
|
color: Colors.white,
|
|
),
|
|
tablePadding: const EdgeInsets.all(8),
|
|
strong: const TextStyle(
|
|
fontWeight: FontWeight.w600,
|
|
color: Color(0xFF1A1A1A),
|
|
),
|
|
em: const TextStyle(
|
|
fontStyle: FontStyle.italic,
|
|
color: Color(0xFF333333),
|
|
),
|
|
del: const TextStyle(
|
|
decoration: TextDecoration.lineThrough,
|
|
color: Color(0xFF999999),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ==================== 图片区域 ====================
|
|
|
|
/// 构建图片区域
|
|
Widget _buildImageSection() {
|
|
return Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: const BoxDecoration(
|
|
color: Color(0xFFFAFAFA),
|
|
border: Border(
|
|
top: BorderSide(color: Color(0xFFE8E8E8), width: 0.5),
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'附件图片',
|
|
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Color(0xFF666666)),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Wrap(
|
|
spacing: 8,
|
|
runSpacing: 8,
|
|
children: _images.map((path) => _buildImageItem(path)).toList(),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 构建单个图片项
|
|
Widget _buildImageItem(String imagePath) {
|
|
return Stack(
|
|
children: [
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: Image.file(
|
|
File(imagePath),
|
|
width: 80,
|
|
height: 80,
|
|
fit: BoxFit.cover,
|
|
errorBuilder: (context, error, stackTrace) {
|
|
return Container(
|
|
width: 80,
|
|
height: 80,
|
|
color: const Color(0xFFF5F5F5),
|
|
child: const Icon(Icons.broken_image, size: 24, color: Color(0xFFCCCCCC)),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 2,
|
|
right: 2,
|
|
child: GestureDetector(
|
|
onTap: () => setState(() => _images.remove(imagePath)),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(2),
|
|
decoration: const BoxDecoration(color: Colors.black54, shape: BoxShape.circle),
|
|
child: const Icon(Icons.close, size: 12, color: Colors.white),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
/// 构建添加图片的浮动按钮
|
|
|
|
// ==================== 图片选择 ====================
|
|
|
|
/// 选择图片
|
|
Future<void> _pickImage() async {
|
|
try {
|
|
final XFile? pickedFile = await _picker.pickImage(
|
|
source: ImageSource.gallery,
|
|
maxWidth: 1200,
|
|
maxHeight: 1200,
|
|
imageQuality: 85,
|
|
);
|
|
|
|
if (pickedFile != null) {
|
|
final fileName = 'note_${DateTime.now().millisecondsSinceEpoch}.jpg';
|
|
final noteId = widget.note?.id ?? DateTime.now().millisecondsSinceEpoch.toString();
|
|
|
|
final targetPath = await ImagePathHelper.instance.getNoteImagePath(noteId, fileName);
|
|
await ImagePathHelper.instance.ensureDirExists(p.dirname(targetPath));
|
|
|
|
await File(pickedFile.path).copy(targetPath);
|
|
|
|
setState(() => _images.add(targetPath));
|
|
|
|
// 在 Markdown 内容中插入图片链接
|
|
_insertImageLink(targetPath, fileName);
|
|
}
|
|
} catch (e) {
|
|
if (mounted) {
|
|
ToastUtil.show(context, '选择图片失败: $e');
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==================== Markdown 快捷插入 ====================
|
|
|
|
/// 在光标位置插入文本
|
|
void _insertText(String text, {String? wrapPrefix, String? wrapSuffix}) {
|
|
final currentText = _contentController.text;
|
|
final selection = _contentController.selection;
|
|
final start = selection.start;
|
|
final end = selection.end;
|
|
|
|
if (start < 0 || end < 0) {
|
|
// 没有焦点，直接追加到末尾
|
|
if (wrapPrefix != null) {
|
|
final suffix = wrapSuffix ?? wrapPrefix;
|
|
final newText = '$wrapPrefix$text$suffix';
|
|
_contentController.text = currentText + newText;
|
|
_contentController.selection = TextSelection.collapsed(offset: _contentController.text.length);
|
|
} else {
|
|
_contentController.text = currentText + text;
|
|
_contentController.selection = TextSelection.collapsed(offset: _contentController.text.length);
|
|
}
|
|
_contentFocusNode.requestFocus();
|
|
return;
|
|
}
|
|
|
|
final before = currentText.substring(0, start);
|
|
final selected = start < end ? currentText.substring(start, end) : null;
|
|
final after = currentText.substring(end);
|
|
|
|
if (wrapPrefix != null) {
|
|
final suffix = wrapSuffix ?? wrapPrefix;
|
|
final content = selected ?? text;
|
|
final newText = '$before$wrapPrefix$content$suffix$after';
|
|
_contentController.text = newText;
|
|
final cursorOffset = before.length + wrapPrefix.length + content.length + suffix.length;
|
|
_contentController.selection = TextSelection.collapsed(offset: cursorOffset);
|
|
} else {
|
|
_contentController.text = '$before$text$after';
|
|
_contentController.selection = TextSelection.collapsed(offset: before.length + text.length);
|
|
}
|
|
// 重新请求焦点，确保键盘弹出且光标位置正确
|
|
_contentFocusNode.requestFocus();
|
|
}
|
|
|
|
/// 插入粗体
|
|
void _insertBold() {
|
|
_insertText('粗体', wrapPrefix: '**', wrapSuffix: '**');
|
|
}
|
|
|
|
/// 插入斜体
|
|
void _insertItalic() {
|
|
_insertText('斜体', wrapPrefix: '*', wrapSuffix: '*');
|
|
}
|
|
|
|
/// 插入删除线
|
|
void _insertStrikethrough() {
|
|
_insertText('删除线', wrapPrefix: '~~', wrapSuffix: '~~');
|
|
}
|
|
|
|
/// 插入标题
|
|
void _insertHeader(int level) {
|
|
final prefix = '#' * level + ' ';
|
|
_insertText('$prefix标题\n', wrapPrefix: null);
|
|
}
|
|
|
|
/// 插入引用
|
|
void _insertQuote() {
|
|
_insertText('> 引用内容\n', wrapPrefix: null);
|
|
}
|
|
|
|
/// 插入日期
|
|
void _insertDate() {
|
|
final now = DateTime.now();
|
|
final date = '${now.year}-${now.month.toString().padLeft(2, '0')}-${now.day.toString().padLeft(2, '0')}';
|
|
_insertText(date);
|
|
}
|
|
|
|
/// 插入时间
|
|
void _insertTime() {
|
|
final now = DateTime.now();
|
|
final time = '${now.hour.toString().padLeft(2, '0')}:${now.minute.toString().padLeft(2, '0')}';
|
|
_insertText(time);
|
|
}
|
|
|
|
/// 插入无序列表
|
|
void _insertUnorderedList() {
|
|
_insertText('- 列表项\n', wrapPrefix: null);
|
|
}
|
|
|
|
/// 插入有序列表
|
|
void _insertOrderedList() {
|
|
_insertText('1. 列表项\n', wrapPrefix: null);
|
|
}
|
|
|
|
/// 插入行内代码
|
|
void _insertInlineCode() {
|
|
_insertText('code', wrapPrefix: '`', wrapSuffix: '`');
|
|
}
|
|
|
|
/// 插入代码块
|
|
void _insertCodeBlock() {
|
|
final currentText = _contentController.text;
|
|
final selection = _contentController.selection;
|
|
final start = selection.start;
|
|
final before = start < 0 ? currentText : currentText.substring(0, start);
|
|
final after = start < 0 ? '' : currentText.substring(start);
|
|
|
|
const codeBlock = '\n```\n// 代码块\n```\n';
|
|
_contentController.text = '$before$codeBlock$after';
|
|
_contentController.selection = TextSelection.collapsed(
|
|
offset: before.length + codeBlock.length - 5,
|
|
);
|
|
}
|
|
|
|
/// 插入链接
|
|
void _insertLink() {
|
|
_insertText('[链接文本](https://example.com)', wrapPrefix: null);
|
|
}
|
|
|
|
/// 插入分割线
|
|
void _insertDivider() {
|
|
_insertText('\n---\n', wrapPrefix: null);
|
|
}
|
|
|
|
/// 插入图片链接
|
|
void _insertImageLink(String path, String fileName) {
|
|
final imageMarkdown = '\n';
|
|
final currentText = _contentController.text;
|
|
final selection = _contentController.selection;
|
|
final start = selection.start;
|
|
|
|
if (start >= 0) {
|
|
final before = currentText.substring(0, start);
|
|
final after = currentText.substring(start);
|
|
_contentController.text = '$before\n$imageMarkdown$after';
|
|
_contentController.selection = TextSelection.collapsed(
|
|
offset: before.length + imageMarkdown.length + 1,
|
|
);
|
|
} else {
|
|
_contentController.text = '$currentText\n$imageMarkdown';
|
|
}
|
|
}
|
|
|
|
// ==================== 保存笔记 ====================
|
|
|
|
/// 保存笔记
|
|
Future<void> _saveNote() async {
|
|
final title = _titleController.text.trim();
|
|
final content = _contentController.text.trim();
|
|
|
|
if (content.isEmpty && title.isEmpty) {
|
|
ToastUtil.show(context, '笔记内容不能为空');
|
|
return;
|
|
}
|
|
|
|
// 自动提取标签
|
|
final tags = _extractTags('$title\n$content');
|
|
|
|
final now = DateTime.now();
|
|
|
|
if (!_isNewNote) {
|
|
final updatedNote = widget.note!.copyWith(
|
|
title: title.isEmpty ? widget.note!.title : title,
|
|
content: content,
|
|
contentType: 'markdown',
|
|
tags: tags.isEmpty ? widget.note!.tags : tags,
|
|
images: _images,
|
|
updatedAt: now,
|
|
);
|
|
await context.read<AppProvider>().updateNote(updatedNote);
|
|
} else {
|
|
final noteId = now.millisecondsSinceEpoch.toString();
|
|
final newNote = Note(
|
|
id: noteId,
|
|
title: title.isEmpty ? '无标题笔记' : title,
|
|
content: content,
|
|
contentType: 'markdown',
|
|
tags: tags,
|
|
images: _images,
|
|
createdAt: _createdAt,
|
|
updatedAt: now,
|
|
);
|
|
await context.read<AppProvider>().addNote(newNote);
|
|
}
|
|
|
|
if (!mounted) return;
|
|
|
|
ToastUtil.show(context, _isNewNote ? '添加成功' : '保存成功');
|
|
await context.read<AppProvider>().loadNotes();
|
|
|
|
if (!mounted) return;
|
|
Navigator.pop(context);
|
|
}
|
|
|
|
/// 从内容中提取标签
|
|
List<String> _extractTags(String content) {
|
|
final tags = <String>{};
|
|
final regex = RegExp(r'#(\w+)');
|
|
final matches = regex.allMatches(content);
|
|
|
|
for (final match in matches) {
|
|
final tag = match.group(1);
|
|
if (tag != null && tag.isNotEmpty) {
|
|
tags.add(tag);
|
|
}
|
|
}
|
|
|
|
return tags.toList();
|
|
}
|
|
}
|