generated from dellevin/template
447 lines
18 KiB
Dart
447 lines
18 KiB
Dart
import 'dart:io';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
|
|
import 'package:image_picker/image_picker.dart';
|
|
import 'package:path/path.dart' as p;
|
|
import 'package:provider/provider.dart';
|
|
import 'package:uuid/uuid.dart';
|
|
import '../../providers/app_provider.dart';
|
|
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 {
|
|
final VoidCallback? onCancel;
|
|
const NoteAddPage({super.key, this.onCancel});
|
|
|
|
@override
|
|
State<NoteAddPage> createState() => _NoteAddPageState();
|
|
}
|
|
|
|
class _NoteAddPageState extends State<NoteAddPage> {
|
|
final ImagePicker _picker = ImagePicker();
|
|
late TextEditingController _titleCtrl;
|
|
late TextEditingController _contentCtrl;
|
|
List<String> _tags = [];
|
|
List<String> _images = [];
|
|
String _editMode = 'edit'; // 'edit' | 'preview'
|
|
late String _tempId;
|
|
final _vditorKey = GlobalKey<VditorEditorState>();
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_tempId = const Uuid().v4();
|
|
_titleCtrl = TextEditingController();
|
|
_contentCtrl = TextEditingController();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_titleCtrl.dispose();
|
|
_contentCtrl.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colors = Theme.of(context).colorScheme;
|
|
return Scaffold(
|
|
backgroundColor: colors.surface,
|
|
body: Column(
|
|
children: [
|
|
// 顶栏
|
|
Container(
|
|
height: 52,
|
|
decoration: BoxDecoration(
|
|
color: colors.surface,
|
|
border: Border(bottom: BorderSide(color: colors.outlineVariant, width: 0.5)),
|
|
),
|
|
child: Row(children: [
|
|
const SizedBox(width: 8),
|
|
IconButton(
|
|
icon: Icon(Icons.close, color: colors.onSurface, size: 18),
|
|
onPressed: () => widget.onCancel?.call(),
|
|
),
|
|
Expanded(
|
|
child: Text('添加笔记',
|
|
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onSurface.withValues(alpha: 0.6))),
|
|
),
|
|
// 编辑/预览切换
|
|
Container(
|
|
padding: const EdgeInsets.all(2),
|
|
decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(6)),
|
|
child: Row(mainAxisSize: MainAxisSize.min, children: [
|
|
_editModeChip(Icons.edit_outlined, '编辑', 'edit', colors),
|
|
_editModeChip(Icons.visibility_outlined, '预览', 'preview', colors),
|
|
]),
|
|
),
|
|
const SizedBox(width: 12),
|
|
FilledButton.icon(
|
|
onPressed: _save,
|
|
icon: const Icon(Icons.check, size: 16),
|
|
label: const Text('保存'),
|
|
style: FilledButton.styleFrom(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
|
|
),
|
|
),
|
|
const SizedBox(width: 16),
|
|
]),
|
|
),
|
|
// 主体
|
|
Expanded(
|
|
child: _editMode == 'edit' ? _buildEditArea(colors) : _buildPreviewArea(colors),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _editModeChip(IconData icon, String label, String mode, ColorScheme colors) {
|
|
final active = _editMode == mode;
|
|
return GestureDetector(
|
|
onTap: () => setState(() => _editMode = mode),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
|
|
decoration: BoxDecoration(
|
|
color: active ? colors.surface : Colors.transparent,
|
|
borderRadius: BorderRadius.circular(4),
|
|
boxShadow: active ? [BoxShadow(color: colors.onSurface.withValues(alpha: 0.03), blurRadius: 2)] : null,
|
|
),
|
|
child: Row(mainAxisSize: MainAxisSize.min, children: [
|
|
Icon(icon, size: 14, color: active ? colors.onSurface : colors.onSurface.withValues(alpha: 0.4)),
|
|
const SizedBox(width: 4),
|
|
Text(label, style: TextStyle(fontSize: 12, fontWeight: active ? FontWeight.w500 : FontWeight.normal,
|
|
color: active ? colors.onSurface : colors.onSurface.withValues(alpha: 0.4))),
|
|
]),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildEditArea(ColorScheme colors) {
|
|
return Column(children: [
|
|
// 标题输入
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
child: Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
|
|
child: TextField(
|
|
controller: _titleCtrl,
|
|
maxLines: 1,
|
|
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: colors.onSurface, height: 1.4),
|
|
decoration: InputDecoration(
|
|
hintText: '添加标题',
|
|
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(() {}),
|
|
),
|
|
)),
|
|
),
|
|
// 标签行 — 标题下面，靠左
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
|
|
child: Center(child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 720),
|
|
child: Align(alignment: Alignment.centerLeft, child: _buildTagRow(colors)),
|
|
)),
|
|
),
|
|
// 内容编辑
|
|
Expanded(
|
|
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),
|
|
// 底部字数
|
|
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 _buildTagRow(ColorScheme colors) {
|
|
return Wrap(
|
|
spacing: 6,
|
|
runSpacing: 4,
|
|
children: [
|
|
for (final tag in _tags)
|
|
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(tag, style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.6))),
|
|
const SizedBox(width: 3),
|
|
GestureDetector(
|
|
onTap: () => setState(() => _tags.remove(tag)),
|
|
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))),
|
|
]),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
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);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildPreviewArea(ColorScheme colors) {
|
|
return ListView(
|
|
padding: const EdgeInsets.all(24),
|
|
children: [
|
|
if (_titleCtrl.text.isNotEmpty) ...[
|
|
Text(_titleCtrl.text,
|
|
style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600, color: colors.onSurface, height: 1.3)),
|
|
const SizedBox(height: 16),
|
|
],
|
|
// 标签
|
|
if (_tags.isNotEmpty) ...[
|
|
Wrap(spacing: 6, runSpacing: 4, children: [
|
|
for (final tag in _tags)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
|
|
decoration: BoxDecoration(
|
|
color: colors.primaryContainer,
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Text(tag, style: TextStyle(fontSize: 12, color: colors.onPrimaryContainer, fontWeight: FontWeight.w500)),
|
|
),
|
|
]),
|
|
const SizedBox(height: 20),
|
|
],
|
|
Markdown(
|
|
data: _contentCtrl.text,
|
|
styleSheet: _buildMarkdownStyleSheet(colors),
|
|
padding: EdgeInsets.zero,
|
|
shrinkWrap: true,
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
),
|
|
if (_images.isNotEmpty) ...[
|
|
const SizedBox(height: 16),
|
|
_buildPreviewImageRow(colors),
|
|
],
|
|
const SizedBox(height: 48),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildImageRow(ColorScheme colors) {
|
|
return Container(
|
|
padding: const EdgeInsets.fromLTRB(16, 6, 16, 0),
|
|
height: 72,
|
|
child: ListView.separated(
|
|
scrollDirection: Axis.horizontal,
|
|
itemCount: _images.length + 1,
|
|
separatorBuilder: (_, __) => const SizedBox(width: 6),
|
|
itemBuilder: (ctx, i) {
|
|
if (i < _images.length) {
|
|
return Stack(children: [
|
|
Container(
|
|
width: 56, height: 56,
|
|
decoration: BoxDecoration(borderRadius: BorderRadius.circular(6), border: Border.all(color: colors.outlineVariant, width: 0.5)),
|
|
clipBehavior: Clip.antiAlias,
|
|
child: FadeInLocalImage(path: _images[i], fit: BoxFit.cover),
|
|
),
|
|
Positioned(top: -4, right: -4,
|
|
child: GestureDetector(
|
|
onTap: () => setState(() => _images.removeAt(i)),
|
|
child: Container(width: 16, height: 16,
|
|
decoration: BoxDecoration(color: colors.surface, shape: BoxShape.circle, border: Border.all(color: colors.outline)),
|
|
child: Icon(Icons.close, size: 10, color: colors.onSurface.withValues(alpha: 0.5))),
|
|
),
|
|
),
|
|
]);
|
|
}
|
|
return InkWell(
|
|
onTap: _pickImage,
|
|
child: Container(width: 56, height: 56,
|
|
decoration: BoxDecoration(borderRadius: BorderRadius.circular(6), color: colors.surfaceContainerHighest,
|
|
border: Border.all(color: colors.outlineVariant)),
|
|
child: Icon(Icons.add_photo_alternate_outlined, size: 20, color: colors.onSurface.withValues(alpha: 0.3))),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPreviewImageRow(ColorScheme colors) {
|
|
return SizedBox(
|
|
height: 80,
|
|
child: ListView.separated(
|
|
scrollDirection: Axis.horizontal,
|
|
itemCount: _images.length,
|
|
separatorBuilder: (_, __) => const SizedBox(width: 8),
|
|
itemBuilder: (context, index) {
|
|
return Container(
|
|
width: 64, height: 64,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(color: colors.outlineVariant, width: 0.5),
|
|
),
|
|
clipBehavior: Clip.antiAlias,
|
|
child: FadeInLocalImage(
|
|
path: _images[index],
|
|
fit: BoxFit.cover,
|
|
errorWidget: Container(
|
|
color: colors.surfaceContainerHighest,
|
|
child: Icon(Icons.broken_image_outlined, size: 20, color: colors.onSurface.withValues(alpha: 0.25)),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Future<void> _pickImage() async {
|
|
try {
|
|
final XFile? image = await _picker.pickImage(source: ImageSource.gallery, maxWidth: 1920, maxHeight: 1920, imageQuality: 85);
|
|
if (image == null) return;
|
|
final fileName = '${DateTime.now().millisecondsSinceEpoch}.jpg';
|
|
final targetDir = await ImagePathHelper.instance.getNoteImagesDir(_tempId);
|
|
await ImagePathHelper.instance.ensureDirExists(targetDir);
|
|
final targetPath = p.join(targetDir, fileName);
|
|
await File(image.path).copy(targetPath);
|
|
if (mounted) setState(() => _images.add(targetPath));
|
|
} catch (e) {
|
|
if (mounted) ToastUtil.show(context, '选择图片失败: $e');
|
|
}
|
|
}
|
|
|
|
MarkdownStyleSheet _buildMarkdownStyleSheet(ColorScheme colors) {
|
|
return MarkdownStyleSheet(
|
|
h1: TextStyle(fontSize: 24, fontWeight: FontWeight.w600, color: colors.onSurface, height: 1.4),
|
|
h2: TextStyle(fontSize: 20, fontWeight: FontWeight.w600, color: colors.onSurface, height: 1.4),
|
|
h3: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: colors.onSurface, height: 1.4),
|
|
h4: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: colors.onSurface, height: 1.4),
|
|
p: TextStyle(fontSize: 15, color: colors.onSurface.withValues(alpha: 0.75), height: 1.8),
|
|
code: TextStyle(fontSize: 14, color: colors.onSurface, backgroundColor: colors.surfaceContainerHighest, fontFamily: 'monospace'),
|
|
codeblockDecoration: BoxDecoration(
|
|
color: colors.surfaceContainerHigh,
|
|
border: Border.all(color: colors.outline),
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
codeblockPadding: const EdgeInsets.all(12),
|
|
blockquote: TextStyle(fontSize: 15, color: colors.onSurface.withValues(alpha: 0.6), fontStyle: FontStyle.italic, height: 1.8),
|
|
blockquoteDecoration: BoxDecoration(
|
|
border: Border(left: BorderSide(color: colors.onSurface.withValues(alpha: 0.4), width: 4)),
|
|
),
|
|
blockquotePadding: const EdgeInsets.only(left: 12, top: 4, bottom: 4),
|
|
listBullet: TextStyle(fontSize: 15, color: colors.onSurface),
|
|
listIndent: 24,
|
|
a: const TextStyle(fontSize: 15, color: Color(0xFF4A90D9), decoration: TextDecoration.underline),
|
|
tableHead: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: colors.onSurface),
|
|
tableBody: TextStyle(fontSize: 14, color: colors.onSurface.withValues(alpha: 0.75)),
|
|
tableBorder: TableBorder.all(color: colors.outline, width: 0.5),
|
|
tableColumnWidth: const FlexColumnWidth(),
|
|
tableCellsDecoration: BoxDecoration(color: colors.surface),
|
|
tablePadding: const EdgeInsets.all(8),
|
|
strong: TextStyle(fontWeight: FontWeight.w600, color: colors.onSurface),
|
|
em: TextStyle(fontStyle: FontStyle.italic, color: colors.onSurface.withValues(alpha: 0.75)),
|
|
del: TextStyle(decoration: TextDecoration.lineThrough, color: colors.onSurface.withValues(alpha: 0.4)),
|
|
);
|
|
}
|
|
|
|
Future<void> _save() async {
|
|
final title = _titleCtrl.text.trim();
|
|
String content;
|
|
if (_vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
|
|
content = (await _vditorKey.currentState!.getValue()).trim();
|
|
} else {
|
|
content = _contentCtrl.text.trim();
|
|
}
|
|
if (title.isEmpty && content.isEmpty) {
|
|
ToastUtil.show(context, '标题或内容不能为空');
|
|
return;
|
|
}
|
|
try {
|
|
final noteId = const Uuid().v4();
|
|
// 移动图片从临时目录到正式目录
|
|
List<String> finalImages = [];
|
|
if (_images.isNotEmpty) {
|
|
final newDir = await ImagePathHelper.instance.getNoteImagesDir(noteId);
|
|
for (final imgPath in _images) {
|
|
final normalized = imgPath.replaceAll('\\', '/');
|
|
if (normalized.contains('/notes/${_tempId}/')) {
|
|
final fileName = p.basename(imgPath);
|
|
final newPath = p.join(newDir, fileName);
|
|
await ImagePathHelper.instance.ensureDirExists(newDir);
|
|
final src = File(imgPath);
|
|
if (await src.exists()) { await src.rename(newPath); finalImages.add(newPath); }
|
|
} else {
|
|
finalImages.add(imgPath);
|
|
}
|
|
}
|
|
// 清理临时目录
|
|
try { await ImagePathHelper.instance.deleteNoteImages(_tempId); } catch (_) {}
|
|
}
|
|
final note = Note(
|
|
id: noteId,
|
|
title: title,
|
|
content: content,
|
|
tags: _tags,
|
|
images: finalImages.isNotEmpty ? finalImages : _images,
|
|
createdAt: DateTime.now(),
|
|
updatedAt: DateTime.now(),
|
|
);
|
|
await context.read<AppProvider>().addNote(note);
|
|
await context.read<AppProvider>().loadNotes();
|
|
if (!mounted) return;
|
|
context.read<AppProvider>().finishAdding();
|
|
ToastUtil.show(context, '添加成功');
|
|
} catch (e) {
|
|
if (mounted) ToastUtil.show(context, '保存失败: $e');
|
|
}
|
|
}
|
|
|
|
}
|