generated from dellevin/template
449 lines
15 KiB
Dart
449 lines
15 KiB
Dart
import 'dart:async';
|
|
import 'dart:convert';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_quill/flutter_quill.dart' as quill;
|
|
import 'package:provider/provider.dart';
|
|
import '../../providers/note_plus_provider.dart';
|
|
import '../../utils/toast_util.dart';
|
|
|
|
/// Note Plus 编辑页
|
|
class NotePlusFormPage extends StatefulWidget {
|
|
final String documentId;
|
|
|
|
const NotePlusFormPage({super.key, required this.documentId});
|
|
|
|
@override
|
|
State<NotePlusFormPage> createState() => _NotePlusFormPageState();
|
|
}
|
|
|
|
class _NotePlusFormPageState extends State<NotePlusFormPage> {
|
|
final _titleController = TextEditingController();
|
|
final _titleFocus = FocusNode();
|
|
final _scrollController = ScrollController();
|
|
final _editorFocus = FocusNode();
|
|
quill.QuillController? _controller;
|
|
bool _isInitialized = false;
|
|
Timer? _autoSaveTimer;
|
|
int _charCount = 0;
|
|
|
|
@override
|
|
void dispose() {
|
|
_autoSaveTimer?.cancel();
|
|
_titleController.dispose();
|
|
_titleFocus.dispose();
|
|
_scrollController.dispose();
|
|
_editorFocus.dispose();
|
|
_controller?.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
// ─── 初始化 ─────────────────────────────────────
|
|
|
|
void _initDocument(NotePlusProvider provider) {
|
|
if (_isInitialized) return;
|
|
_isInitialized = true;
|
|
|
|
provider.loadDocumentById(widget.documentId).then((_) {
|
|
if (!mounted || provider.currentDocument == null) return;
|
|
|
|
_titleController.text = provider.currentDocument!.title;
|
|
|
|
quill.Document doc;
|
|
final raw = provider.currentDocument!.blocksJson;
|
|
if (raw != null && raw.isNotEmpty && raw.startsWith('[')) {
|
|
try {
|
|
final parsed = jsonDecode(raw) as List;
|
|
if (parsed.isNotEmpty &&
|
|
parsed.first is Map &&
|
|
(parsed.first as Map).containsKey('insert')) {
|
|
doc = quill.Document.fromJson(parsed);
|
|
} else {
|
|
doc = quill.Document();
|
|
}
|
|
} catch (_) {
|
|
doc = quill.Document();
|
|
}
|
|
} else {
|
|
doc = quill.Document();
|
|
}
|
|
|
|
setState(() {
|
|
_controller = quill.QuillController(
|
|
document: doc,
|
|
selection: const TextSelection.collapsed(offset: 0),
|
|
);
|
|
_controller!.addListener(_onDocChanged);
|
|
_charCount = _controller!.document.length - 1; // 去掉末尾 \n
|
|
});
|
|
});
|
|
}
|
|
|
|
// ─── 文档变化监听 ─────────────────────────────────
|
|
|
|
void _onDocChanged() {
|
|
if (_controller == null) return;
|
|
final newCount = _controller!.document.length - 1;
|
|
if (newCount != _charCount) {
|
|
setState(() => _charCount = newCount);
|
|
}
|
|
// 自动保存（防抖 2 秒）
|
|
_autoSaveTimer?.cancel();
|
|
_autoSaveTimer = Timer(const Duration(seconds: 2), () {
|
|
if (mounted) _autoSave();
|
|
});
|
|
}
|
|
|
|
void _autoSave() {
|
|
final provider = context.read<NotePlusProvider>();
|
|
if (_controller == null) return;
|
|
provider.setTitle(_titleController.text);
|
|
final deltaJson = jsonEncode(_controller!.document.toDelta().toJson());
|
|
provider.saveDocument(deltaJson: deltaJson);
|
|
}
|
|
|
|
void _save(NotePlusProvider provider) async {
|
|
_autoSaveTimer?.cancel();
|
|
if (_controller == null) return;
|
|
provider.setTitle(_titleController.text);
|
|
final deltaJson = jsonEncode(_controller!.document.toDelta().toJson());
|
|
await provider.saveDocument(deltaJson: deltaJson);
|
|
if (mounted) ToastUtil.show(context, '已保存');
|
|
}
|
|
|
|
// ─── 构建 ─────────────────────────────────────
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colors = Theme.of(context).colorScheme;
|
|
|
|
return Consumer<NotePlusProvider>(
|
|
builder: (context, provider, _) {
|
|
_initDocument(provider);
|
|
|
|
return PopScope(
|
|
canPop: !provider.isDirty,
|
|
onPopInvokedWithResult: (didPop, _) {
|
|
if (!didPop && provider.isDirty) {
|
|
_showSaveDialog(provider);
|
|
} else {
|
|
_autoSave(); // 退出时自动保存
|
|
}
|
|
},
|
|
child: Scaffold(
|
|
backgroundColor: colors.surface,
|
|
appBar: _buildAppBar(provider, colors),
|
|
body: _controller == null
|
|
? const Center(child: CircularProgressIndicator())
|
|
: GestureDetector(
|
|
// 点击空白区域聚焦编辑器
|
|
onTap: () => _editorFocus.requestFocus(),
|
|
behavior: HitTestBehavior.translucent,
|
|
child: Column(
|
|
children: [
|
|
// 标题区
|
|
_buildTitleArea(colors),
|
|
// 分隔线
|
|
Divider(height: 1, color: colors.outlineVariant.withValues(alpha: 0.3)),
|
|
// 编辑器
|
|
Expanded(child: _buildEditor(colors)),
|
|
// 工具栏
|
|
_buildToolbar(colors),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
// ─── AppBar ─────────────────────────────────────
|
|
|
|
PreferredSizeWidget _buildAppBar(NotePlusProvider provider, ColorScheme colors) {
|
|
return AppBar(
|
|
backgroundColor: colors.surface,
|
|
surfaceTintColor: Colors.transparent,
|
|
elevation: 0,
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.arrow_back, size: 22),
|
|
onPressed: () {
|
|
_autoSave();
|
|
Navigator.pop(context);
|
|
},
|
|
),
|
|
title: Text(
|
|
'$_charCount 字',
|
|
style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.35)),
|
|
),
|
|
centerTitle: true,
|
|
actions: [
|
|
// 未保存指示
|
|
if (provider.isDirty)
|
|
Padding(
|
|
padding: const EdgeInsets.only(right: 4),
|
|
child: Center(
|
|
child: Container(
|
|
width: 6, height: 6,
|
|
decoration: BoxDecoration(color: colors.error, shape: BoxShape.circle),
|
|
),
|
|
),
|
|
),
|
|
IconButton(
|
|
icon: const Icon(Icons.undo, size: 20),
|
|
onPressed: _controller != null ? () => _controller!.undo() : null,
|
|
tooltip: '撤销',
|
|
),
|
|
IconButton(
|
|
icon: const Icon(Icons.redo, size: 20),
|
|
onPressed: _controller != null ? () => _controller!.redo() : null,
|
|
tooltip: '重做',
|
|
),
|
|
IconButton(
|
|
icon: Icon(Icons.check, size: 22, color: colors.primary),
|
|
onPressed: () => _save(provider),
|
|
tooltip: '保存',
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
// ─── 标题区 ─────────────────────────────────────
|
|
|
|
Widget _buildTitleArea(ColorScheme colors) {
|
|
return Padding(
|
|
padding: const EdgeInsets.fromLTRB(20, 16, 20, 8),
|
|
child: TextField(
|
|
controller: _titleController,
|
|
focusNode: _titleFocus,
|
|
style: TextStyle(
|
|
fontSize: 28,
|
|
fontWeight: FontWeight.w600,
|
|
color: colors.onSurface,
|
|
height: 1.3,
|
|
),
|
|
decoration: InputDecoration(
|
|
hintText: '输入标题...',
|
|
hintStyle: TextStyle(
|
|
fontSize: 28,
|
|
fontWeight: FontWeight.w600,
|
|
color: colors.onSurface.withValues(alpha: 0.15),
|
|
),
|
|
border: InputBorder.none,
|
|
contentPadding: EdgeInsets.zero,
|
|
isDense: true,
|
|
),
|
|
onChanged: (_) => context.read<NotePlusProvider>().setTitle(_titleController.text),
|
|
textInputAction: TextInputAction.next,
|
|
onSubmitted: (_) => _editorFocus.requestFocus(),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ─── 编辑器 ─────────────────────────────────────
|
|
|
|
Widget _buildEditor(ColorScheme colors) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12),
|
|
child: TextSelectionTheme(
|
|
data: TextSelectionThemeData(
|
|
selectionColor: colors.primary.withValues(alpha: 0.12),
|
|
selectionHandleColor: colors.primary,
|
|
cursorColor: colors.primary,
|
|
),
|
|
child: quill.QuillEditor.basic(
|
|
controller: _controller!,
|
|
focusNode: _editorFocus,
|
|
scrollController: _scrollController,
|
|
config: const quill.QuillEditorConfig(
|
|
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
|
|
autoFocus: false,
|
|
expands: true,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ─── 工具栏 ─────────────────────────────────────
|
|
|
|
Widget _buildToolbar(ColorScheme colors) {
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
color: colors.surface,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withValues(alpha: 0.04),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, -2),
|
|
),
|
|
],
|
|
),
|
|
padding: const EdgeInsets.fromLTRB(12, 6, 12, 6),
|
|
child: SafeArea(
|
|
top: false,
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: colors.surfaceContainerHighest,
|
|
borderRadius: BorderRadius.circular(14),
|
|
),
|
|
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 3),
|
|
child: quill.QuillSimpleToolbar(
|
|
controller: _controller!,
|
|
config: quill.QuillSimpleToolbarConfig(
|
|
multiRowsDisplay: false,
|
|
color: Colors.transparent,
|
|
toolbarSize: 30,
|
|
buttonOptions: const quill.QuillSimpleToolbarButtonOptions(
|
|
base: quill.QuillToolbarBaseButtonOptions(iconSize: 17),
|
|
),
|
|
showBoldButton: true,
|
|
showItalicButton: true,
|
|
showUnderLineButton: true,
|
|
showStrikeThrough: true,
|
|
showHeaderStyle: false,
|
|
showListBullets: true,
|
|
showListNumbers: true,
|
|
showListCheck: true,
|
|
showCodeBlock: true,
|
|
showQuote: true,
|
|
showInlineCode: true,
|
|
showUndo: false,
|
|
showRedo: false,
|
|
showLink: false,
|
|
showSearchButton: false,
|
|
showFontSize: false,
|
|
showFontFamily: false,
|
|
showColorButton: false,
|
|
showBackgroundColorButton: false,
|
|
showClearFormat: false,
|
|
showAlignmentButtons: false,
|
|
showDirection: false,
|
|
showIndent: false,
|
|
showSubscript: false,
|
|
showSuperscript: false,
|
|
customButtons: [
|
|
quill.QuillToolbarCustomButtonOptions(
|
|
icon: const Icon(Icons.text_fields, size: 17, color: Color(0xFF555555)),
|
|
onPressed: () => _showHeaderPicker(colors),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ─── 标题选择 ─────────────────────────────────
|
|
|
|
void _showHeaderPicker(ColorScheme colors) {
|
|
final current = _controller?.getSelectionStyle().attributes ?? {};
|
|
final currentHeader = current['header']?.value;
|
|
|
|
showModalBottomSheet(
|
|
context: context,
|
|
backgroundColor: Colors.transparent,
|
|
builder: (ctx) => Container(
|
|
margin: const EdgeInsets.fromLTRB(16, 0, 16, 16),
|
|
decoration: BoxDecoration(
|
|
color: colors.surface,
|
|
borderRadius: BorderRadius.circular(14),
|
|
boxShadow: [
|
|
BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 20),
|
|
],
|
|
),
|
|
child: SafeArea(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// 拖拽指示条
|
|
Container(
|
|
width: 36, height: 4,
|
|
margin: const EdgeInsets.only(top: 10, bottom: 8),
|
|
decoration: BoxDecoration(
|
|
color: colors.onSurface.withValues(alpha: 0.12),
|
|
borderRadius: BorderRadius.circular(2),
|
|
),
|
|
),
|
|
_headerOption('正文', null, currentHeader == null, colors),
|
|
_headerOption('标题 1', 1, currentHeader == 1, colors),
|
|
_headerOption('标题 2', 2, currentHeader == 2, colors),
|
|
_headerOption('标题 3', 3, currentHeader == 3, colors),
|
|
const SizedBox(height: 8),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _headerOption(String label, int? level, bool isActive, ColorScheme colors) {
|
|
final sizes = {null: 15.0, 1: 22.0, 2: 18.0, 3: 15.0};
|
|
return InkWell(
|
|
onTap: () {
|
|
Navigator.pop(context);
|
|
if (_controller == null) return;
|
|
if (level == null) {
|
|
_controller!.formatSelection(quill.Attribute.header);
|
|
} else {
|
|
_controller!.formatSelection(quill.Attribute.clone(quill.Attribute.header, level));
|
|
}
|
|
},
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: Text(label, style: TextStyle(
|
|
fontSize: sizes[level] ?? 15,
|
|
fontWeight: level == null ? FontWeight.w400 : FontWeight.w600,
|
|
color: isActive ? colors.primary : colors.onSurface,
|
|
)),
|
|
),
|
|
if (isActive)
|
|
Icon(Icons.check, size: 18, color: colors.primary),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ─── 保存对话框 ─────────────────────────────────
|
|
|
|
void _showSaveDialog(NotePlusProvider provider) {
|
|
final colors = Theme.of(context).colorScheme;
|
|
showDialog(
|
|
context: context,
|
|
builder: (ctx) => AlertDialog(
|
|
backgroundColor: colors.surface,
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
|
|
title: Text('未保存的更改',
|
|
style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600,
|
|
color: colors.onSurface)),
|
|
content: Text('是否保存当前文档？',
|
|
style: TextStyle(fontSize: 14,
|
|
color: colors.onSurface.withValues(alpha: 0.6))),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () { Navigator.pop(ctx); Navigator.pop(context); },
|
|
child: Text('不保存', style: TextStyle(color: colors.error)),
|
|
),
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(ctx),
|
|
child: Text('取消',
|
|
style: TextStyle(color: colors.onSurface.withValues(alpha: 0.6))),
|
|
),
|
|
ElevatedButton(
|
|
onPressed: () { Navigator.pop(ctx); _save(provider); Navigator.pop(context); },
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: colors.primary, foregroundColor: colors.onPrimary,
|
|
elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
|
),
|
|
child: const Text('保存'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|