You've already forked SmartisanNote.Remake
Merge pull request 'future' (#14) from future into main
Reviewed-on: yuantao/SmartisanNote.Remake#14
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,440 +1,518 @@
|
||||
<template>
|
||||
<ion-page>
|
||||
<div class="container">
|
||||
<!-- 头部：编辑模式 -->
|
||||
<Header v-if="isEditorFocus" :onBack="handleCancel" :onAction="handleAction" actionIcon="edit" />
|
||||
<!-- 头部：预览模式 -->
|
||||
<Header v-else ref="headerRef" :onBack="handleCancel" :onAction="handleAction" actionIcon="preview" />
|
||||
<section>
|
||||
<!-- 顶部信息栏 -->
|
||||
<div class="header-info">
|
||||
<span class="edit-time">{{ formattedTime }}</span>
|
||||
<span>|</span>
|
||||
<span class="word-count">{{ wordCount }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 富文本编辑器 -->
|
||||
<div class="editor-container">
|
||||
<RichTextEditor ref="editorRef" :modelValue="content" @update:modelValue="handleContentChange" @focus="handleEditorFocus" @blur="handleEditorBlur" class="rich-text-editor" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, nextTick, watch, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAppStore } from '../stores/useAppStore'
|
||||
import Header from '../components/Header.vue'
|
||||
import RichTextEditor from '../components/RichTextEditor.vue'
|
||||
import { formatNoteEditorDate } from '../utils/dateUtils'
|
||||
import { IonPage } from '@ionic/vue'
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
// 为了保持向后兼容性，我们也支持noteId属性
|
||||
// 通过计算属性确保无论使用id还是noteId都能正确获取便签ID
|
||||
const noteId = computed(() => props.id || props.noteId)
|
||||
|
||||
const store = useAppStore()
|
||||
const router = useRouter()
|
||||
const editorRef = ref(null)
|
||||
const headerRef = ref(null)
|
||||
// 是否聚焦编辑器
|
||||
const isEditorFocus = ref(false)
|
||||
|
||||
// 设置便签内容的函数
|
||||
// 用于在编辑器中加载指定便签的内容
|
||||
const setNoteContent = async noteId => {
|
||||
// 确保store数据已加载，如果便签列表为空则先加载数据
|
||||
if (store.notes.length === 0) {
|
||||
await store.loadData()
|
||||
}
|
||||
|
||||
// 从store中查找指定ID的便签
|
||||
const note = store.notes.find(n => n.id === noteId)
|
||||
|
||||
// 确保编辑器已经初始化完成
|
||||
await nextTick()
|
||||
|
||||
if (note) {
|
||||
// 无论editorRef是否可用，都先设置content的值作为备份
|
||||
content.value = note.content || ''
|
||||
// 如果editorRef可用，直接设置编辑器内容
|
||||
if (editorRef.value) {
|
||||
editorRef.value.setContent(note.content || '')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载初始数据
|
||||
onMounted(async () => {
|
||||
await store.loadData()
|
||||
|
||||
// 如果是编辑现有便签，在组件挂载后设置内容
|
||||
if (noteId.value) {
|
||||
await setNoteContent(noteId.value)
|
||||
}
|
||||
})
|
||||
|
||||
// 监听noteId变化，确保在编辑器准备好后设置内容
|
||||
watch(
|
||||
noteId,
|
||||
async newNoteId => {
|
||||
if (newNoteId) {
|
||||
await setNoteContent(newNoteId)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 监听store变化，确保在store加载后设置内容
|
||||
watch(
|
||||
() => store.notes,
|
||||
async newNotes => {
|
||||
if (noteId.value && newNotes.length > 0) {
|
||||
await setNoteContent(noteId.value)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 检查是否正在编辑现有便签
|
||||
// 如果noteId存在则表示是编辑模式，否则是新建模式
|
||||
const isEditing = !!noteId.value
|
||||
const existingNote = isEditing ? store.notes.find(n => n.id === noteId.value) : null
|
||||
|
||||
// 初始化内容状态，如果是编辑现有便签则使用便签内容，否则为空字符串
|
||||
const content = ref(existingNote?.content || '')
|
||||
|
||||
// 当组件挂载时，确保编辑器初始化为空内容（针对新建便签）
|
||||
onMounted(() => {
|
||||
if (!isEditing && editorRef.value) {
|
||||
console.log('Initializing editor for new note')
|
||||
editorRef.value.setContent('')
|
||||
}
|
||||
})
|
||||
|
||||
// 监听store变化，确保在store加载后设置内容
|
||||
watch(
|
||||
() => store.notes,
|
||||
async newNotes => {
|
||||
if (noteId.value && newNotes.length > 0) {
|
||||
await setNoteContent(noteId.value)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
const showAlert = ref(false)
|
||||
|
||||
// 防抖函数
|
||||
// 用于避免函数在短时间内被频繁调用，提高性能
|
||||
const debounce = (func, delay) => {
|
||||
let timeoutId
|
||||
return function (...args) {
|
||||
clearTimeout(timeoutId)
|
||||
timeoutId = setTimeout(() => func.apply(this, args), delay)
|
||||
}
|
||||
}
|
||||
|
||||
// 防抖处理内容变化
|
||||
// 延迟300ms更新内容，避免用户输入时频繁触发更新
|
||||
const debouncedHandleContentChange = debounce(newContent => {
|
||||
content.value = newContent
|
||||
}, 300)
|
||||
|
||||
// 监听编辑器内容变化
|
||||
// 当编辑器内容发生变化时调用此函数
|
||||
const handleContentChange = newContent => {
|
||||
debouncedHandleContentChange(newContent)
|
||||
}
|
||||
|
||||
// 计算属性 - 格式化时间显示
|
||||
// 如果是编辑现有便签则显示便签的更新时间，否则显示当前时间
|
||||
const formattedTime = computed(() => {
|
||||
if (existingNote?.updatedAt) {
|
||||
return formatNoteEditorDate(existingNote.updatedAt)
|
||||
}
|
||||
return formatNoteEditorDate(new Date())
|
||||
})
|
||||
|
||||
// 计算属性 - 计算字数
|
||||
// 移除HTML标签后计算纯文本字数
|
||||
const wordCount = computed(() => {
|
||||
// 使用正则表达式移除HTML标签，只保留纯文本内容
|
||||
const textContent = content.value.replace(/<[^>]*>/g, '')
|
||||
return textContent.length || 0
|
||||
})
|
||||
|
||||
// 处理保存
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// 获取编辑器中的实际内容
|
||||
const editorContent = editorRef.value ? editorRef.value.getContent() : content.value
|
||||
|
||||
// 检查内容是否为空
|
||||
if (isContentEmpty(editorContent)) {
|
||||
// 如果是编辑模式且内容为空，则删除便签
|
||||
if (isEditing && existingNote) {
|
||||
await store.deleteNote(noteId.value)
|
||||
console.log('空便签已删除')
|
||||
// 删除后返回便签列表页面
|
||||
router.push('/notes')
|
||||
return
|
||||
}
|
||||
} else if (isEditing && existingNote) {
|
||||
// 更新现有便签
|
||||
await store.updateNote(noteId.value, {
|
||||
content: editorContent,
|
||||
})
|
||||
console.log('便签已保存')
|
||||
} else {
|
||||
// 创建新便签
|
||||
await store.addNote({
|
||||
content: editorContent,
|
||||
isStarred: false,
|
||||
})
|
||||
console.log('新便签已创建')
|
||||
}
|
||||
|
||||
// 保存后切换到预览模式（失去编辑器焦点）
|
||||
isEditorFocus.value = false
|
||||
} catch (error) {
|
||||
// In a full implementation, show an alert or toast
|
||||
console.log('Save error: Failed to save note. Please try again.')
|
||||
}
|
||||
}
|
||||
|
||||
// 检查内容是否为空（无实质性内容）
|
||||
const isContentEmpty = content => {
|
||||
if (!content) return true
|
||||
|
||||
// 检查是否包含图片元素
|
||||
const hasImages = /<img[^>]*>|<div[^>]*class="[^"]*editor-image[^"]*"[^>]*>/.test(content)
|
||||
if (hasImages) return false
|
||||
|
||||
// 移除HTML标签和空白字符后检查是否为空
|
||||
const plainText = content.replace(/<[^>]*>/g, '').trim()
|
||||
if (plainText === '') return true
|
||||
|
||||
// 检查是否只有空的HTML元素
|
||||
const strippedContent = content
|
||||
.replace(/\s+/g, '')
|
||||
.replace(/<br>/g, '')
|
||||
.replace(/<br\/>/g, '')
|
||||
if (strippedContent === '<p></p>' || strippedContent === '<div></div>' || strippedContent === '') return true
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
// 自动保存便签（仅在非主动保存操作时调用）
|
||||
const autoSaveNote = async () => {
|
||||
try {
|
||||
// 获取编辑器中的实际内容
|
||||
const editorContent = editorRef.value ? editorRef.value.getContent() : content.value
|
||||
|
||||
if (isEditing && existingNote) {
|
||||
// 检查内容是否为空，如果为空则删除便签
|
||||
if (isContentEmpty(editorContent)) {
|
||||
// 删除便签
|
||||
await store.deleteNote(noteId.value)
|
||||
console.log('空便签已自动删除')
|
||||
} else if (editorContent !== (existingNote?.content || '')) {
|
||||
// 更新现有便签（仅当内容有变化时）
|
||||
await store.updateNote(noteId.value, {
|
||||
content: editorContent,
|
||||
})
|
||||
console.log('便签已自动保存')
|
||||
}
|
||||
} else if (!isContentEmpty(editorContent)) {
|
||||
// 创建新便签（仅当有内容时）
|
||||
// 检查是否已经存在相同内容的便签以避免重复创建
|
||||
const existingNotes = store.notes.filter(n => n.content === editorContent && !n.isDeleted)
|
||||
if (existingNotes.length === 0) {
|
||||
await store.addNote({
|
||||
content: editorContent,
|
||||
isStarred: false,
|
||||
})
|
||||
console.log('新便签已自动保存')
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('自动保存失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = async () => {
|
||||
// 自动保存便签
|
||||
await autoSaveNote()
|
||||
|
||||
// 直接导航回便签列表页面，因为已经处理了保存或删除逻辑
|
||||
router.push('/notes')
|
||||
}
|
||||
|
||||
// 处理创建（用于新建便签）
|
||||
const handleCreate = async () => {
|
||||
try {
|
||||
// 获取编辑器中的实际内容
|
||||
const editorContent = editorRef.value ? editorRef.value.getContent() : content.value
|
||||
|
||||
// 只有当有内容时才创建新便签
|
||||
if (!isContentEmpty(editorContent)) {
|
||||
await store.addNote({
|
||||
content: editorContent,
|
||||
isStarred: false,
|
||||
})
|
||||
console.log('新便签已创建')
|
||||
}
|
||||
|
||||
// 创建后切换到预览模式（失去编辑器焦点）
|
||||
isEditorFocus.value = false
|
||||
} catch (error) {
|
||||
// In a full implementation, show an alert or toast
|
||||
console.log('Create error: Failed to create note. Please try again.')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理Header组件的操作按钮点击事件
|
||||
const handleAction = actionType => {
|
||||
if (actionType === 'save') {
|
||||
handleSave()
|
||||
} else if (actionType === 'create') {
|
||||
handleCreate()
|
||||
} else if (actionType === 'insertImage') {
|
||||
// 插入图片功能
|
||||
if (editorRef.value) {
|
||||
// 通过editorRef调用RichTextEditor组件的方法来插入图片
|
||||
editorRef.value.insertImage()
|
||||
}
|
||||
} else if (actionType === 'delete') {
|
||||
// 删除便签
|
||||
handleDelete()
|
||||
} else if (actionType === 'share') {
|
||||
// 分享便签
|
||||
handleShare()
|
||||
}
|
||||
}
|
||||
|
||||
const setShowAlert = value => {
|
||||
showAlert.value = value
|
||||
}
|
||||
|
||||
// 处理编辑器获得焦点
|
||||
const handleEditorFocus = () => {
|
||||
isEditorFocus.value = true
|
||||
}
|
||||
|
||||
// 处理编辑器失去焦点
|
||||
const handleEditorBlur = () => {
|
||||
isEditorFocus.value = false
|
||||
}
|
||||
|
||||
// 处理删除便签
|
||||
const handleDelete = async () => {
|
||||
if (isEditing && existingNote) {
|
||||
// 播放删除按钮动画
|
||||
if (headerRef.value && headerRef.value.playDeleteAnimation) {
|
||||
headerRef.value.playDeleteAnimation()
|
||||
}
|
||||
|
||||
// 等待动画播放完成后再执行删除操作
|
||||
// 15帧 * 50ms = 750ms，再加上一些缓冲时间
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
// 删除便签
|
||||
await store.deleteNote(noteId.value)
|
||||
console.log('便签已删除')
|
||||
// 返回便签列表页面
|
||||
router.push('/notes')
|
||||
} catch (error) {
|
||||
console.error('删除便签失败:', error)
|
||||
}
|
||||
}, 800) // 等待约800ms让动画播放完成
|
||||
}
|
||||
}
|
||||
|
||||
// 处理分享便签
|
||||
const handleShare = () => {
|
||||
// 获取编辑器中的实际内容
|
||||
const editorContent = editorRef.value ? editorRef.value.getContent() : content.value
|
||||
|
||||
// 移除HTML标签，获取纯文本内容用于分享
|
||||
const plainText = editorContent.replace(/<[^>]*>/g, '').trim()
|
||||
|
||||
if (plainText) {
|
||||
// 在实际应用中，这里会调用设备的分享功能
|
||||
// 为了演示，我们使用Web Share API（如果支持）
|
||||
if (navigator.share) {
|
||||
navigator
|
||||
.share({
|
||||
title: '分享便签',
|
||||
text: plainText,
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('分享取消或失败:', error)
|
||||
})
|
||||
} else {
|
||||
// 如果不支持Web Share API，可以复制到剪贴板
|
||||
navigator.clipboard
|
||||
.writeText(plainText)
|
||||
.then(() => {
|
||||
console.log('内容已复制到剪贴板')
|
||||
// 在实际应用中，这里会显示一个提示消息
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('复制失败:', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 在组件卸载前自动保存或删除
|
||||
onBeforeUnmount(async () => {
|
||||
await autoSaveNote()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: var(--background);
|
||||
section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
flex: 1;
|
||||
min-height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: var(--background-card);
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-text-editor {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 0.625rem;
|
||||
padding: 1rem 1rem 0.7rem 1rem;
|
||||
background-color: var(--background-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<ion-page>
|
||||
<div class="container">
|
||||
<!-- 头部：编辑模式 -->
|
||||
<Header v-if="isEditorFocus" :onBack="handleCancel" :onAction="handleAction" actionIcon="edit" />
|
||||
<!-- 头部：预览模式 -->
|
||||
<Header v-else ref="headerRef" :onBack="handleCancel" :onAction="handleAction" actionIcon="preview" />
|
||||
<section>
|
||||
<!-- 顶部信息栏 -->
|
||||
<div ref="headerInfoRef" class="header-info">
|
||||
<span class="edit-time">{{ formattedTime }}</span>
|
||||
<span>|</span>
|
||||
<span class="word-count">{{ wordCount }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 富文本编辑器 -->
|
||||
<div class="note-container" :style="{ height: noteContainerHeight }">
|
||||
<RichTextEditor ref="editorRef" :modelValue="content" @update:modelValue="handleContentChange" @focus="handleEditorFocus" @blur="handleEditorBlur" class="rich-text-editor" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, nextTick, watch, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAppStore } from '../stores/useAppStore'
|
||||
import Header from '../components/Header.vue'
|
||||
import RichTextEditor from '../components/RichTextEditor.vue'
|
||||
import { formatNoteEditorDate } from '../utils/dateUtils'
|
||||
import { IonPage } from '@ionic/vue'
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
// 为了保持向后兼容性，我们也支持noteId属性
|
||||
// 通过计算属性确保无论使用id还是noteId都能正确获取便签ID
|
||||
const noteId = computed(() => props.id || props.noteId)
|
||||
|
||||
const store = useAppStore()
|
||||
const router = useRouter()
|
||||
const editorRef = ref(null)
|
||||
const headerRef = ref(null)
|
||||
const headerInfoRef = ref(null)
|
||||
// 是否聚焦编辑器
|
||||
const isEditorFocus = ref(false)
|
||||
|
||||
// 计算.note-container的高度
|
||||
const noteContainerHeight = ref('100vh')
|
||||
|
||||
// 设置便签内容的函数
|
||||
// 用于在编辑器中加载指定便签的内容
|
||||
const setNoteContent = async noteId => {
|
||||
// 确保store数据已加载，如果便签列表为空则先加载数据
|
||||
if (store.notes.length === 0) {
|
||||
await store.loadData()
|
||||
}
|
||||
|
||||
// 从store中查找指定ID的便签
|
||||
const note = store.notes.find(n => n.id === noteId)
|
||||
|
||||
// 确保编辑器已经初始化完成
|
||||
await nextTick()
|
||||
|
||||
if (note) {
|
||||
// 无论editorRef是否可用，都先设置content的值作为备份
|
||||
content.value = note.content || ''
|
||||
// 如果editorRef可用，直接设置编辑器内容
|
||||
if (editorRef.value) {
|
||||
editorRef.value.setContent(note.content || '')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载初始数据
|
||||
onMounted(async () => {
|
||||
await store.loadData()
|
||||
|
||||
// 如果是编辑现有便签，在组件挂载后设置内容
|
||||
if (noteId.value) {
|
||||
await setNoteContent(noteId.value)
|
||||
}
|
||||
|
||||
// 等待DOM更新后计算.note-container的高度
|
||||
calculateNoteContainerHeight()
|
||||
})
|
||||
|
||||
// 监听noteId变化，确保在编辑器准备好后设置内容
|
||||
watch(
|
||||
noteId,
|
||||
async newNoteId => {
|
||||
if (newNoteId) {
|
||||
await setNoteContent(newNoteId)
|
||||
// 重新计算.note-container的高度
|
||||
calculateNoteContainerHeight()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 监听store变化，确保在store加载后设置内容
|
||||
watch(
|
||||
() => store.notes,
|
||||
async newNotes => {
|
||||
if (noteId.value && newNotes.length > 0) {
|
||||
await setNoteContent(noteId.value)
|
||||
// 重新计算.note-container的高度
|
||||
calculateNoteContainerHeight()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 检查是否正在编辑现有便签
|
||||
// 如果noteId存在则表示是编辑模式，否则是新建模式
|
||||
const isEditing = !!noteId.value
|
||||
const existingNote = isEditing ? store.notes.find(n => n.id === noteId.value) : null
|
||||
|
||||
// 初始化内容状态，如果是编辑现有便签则使用便签内容，否则为空字符串
|
||||
const content = ref(existingNote?.content || '')
|
||||
|
||||
// 当组件挂载时，确保编辑器初始化为空内容（针对新建便签）
|
||||
onMounted(() => {
|
||||
if (!isEditing && editorRef.value) {
|
||||
console.log('Initializing editor for new note')
|
||||
editorRef.value.setContent('')
|
||||
}
|
||||
})
|
||||
|
||||
// 监听store变化，确保在store加载后设置内容
|
||||
watch(
|
||||
() => store.notes,
|
||||
async newNotes => {
|
||||
if (noteId.value && newNotes.length > 0) {
|
||||
await setNoteContent(noteId.value)
|
||||
// 重新计算.note-container的高度
|
||||
calculateNoteContainerHeight()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
const showAlert = ref(false)
|
||||
|
||||
// 防抖函数
|
||||
// 用于避免函数在短时间内被频繁调用，提高性能
|
||||
const debounce = (func, delay) => {
|
||||
let timeoutId
|
||||
return function (...args) {
|
||||
clearTimeout(timeoutId)
|
||||
timeoutId = setTimeout(() => func.apply(this, args), delay)
|
||||
}
|
||||
}
|
||||
|
||||
// 防抖处理内容变化
|
||||
// 延迟300ms更新内容，避免用户输入时频繁触发更新
|
||||
const debouncedHandleContentChange = debounce(newContent => {
|
||||
content.value = newContent
|
||||
}, 300)
|
||||
|
||||
// 监听编辑器内容变化
|
||||
// 当编辑器内容发生变化时调用此函数
|
||||
const handleContentChange = newContent => {
|
||||
debouncedHandleContentChange(newContent)
|
||||
}
|
||||
|
||||
// 计算属性 - 格式化时间显示
|
||||
// 如果是编辑现有便签则显示便签的更新时间，否则显示当前时间
|
||||
const formattedTime = computed(() => {
|
||||
if (existingNote?.updatedAt) {
|
||||
return formatNoteEditorDate(existingNote.updatedAt)
|
||||
}
|
||||
return formatNoteEditorDate(new Date())
|
||||
})
|
||||
|
||||
// 计算属性 - 计算字数
|
||||
// 移除HTML标签后计算纯文本字数
|
||||
const wordCount = computed(() => {
|
||||
// 使用正则表达式移除HTML标签，只保留纯文本内容
|
||||
const textContent = content.value.replace(/<[^>]*>/g, '')
|
||||
return textContent.length || 0
|
||||
})
|
||||
|
||||
// 处理保存
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// 获取编辑器中的实际内容
|
||||
const editorContent = editorRef.value ? editorRef.value.getContent() : content.value
|
||||
|
||||
// 检查内容是否为空
|
||||
if (isContentEmpty(editorContent)) {
|
||||
// 如果是编辑模式且内容为空，则删除便签
|
||||
if (isEditing && existingNote) {
|
||||
await store.deleteNote(noteId.value)
|
||||
console.log('空便签已删除')
|
||||
// 删除后返回便签列表页面
|
||||
router.push('/notes')
|
||||
return
|
||||
}
|
||||
} else if (isEditing && existingNote) {
|
||||
// 更新现有便签
|
||||
await store.updateNote(noteId.value, {
|
||||
content: editorContent,
|
||||
})
|
||||
console.log('便签已保存')
|
||||
} else {
|
||||
// 创建新便签
|
||||
await store.addNote({
|
||||
content: editorContent,
|
||||
isStarred: false,
|
||||
})
|
||||
console.log('新便签已创建')
|
||||
}
|
||||
|
||||
// 保存后切换到预览模式（失去编辑器焦点）
|
||||
isEditorFocus.value = false
|
||||
} catch (error) {
|
||||
// In a full implementation, show an alert or toast
|
||||
console.log('Save error: Failed to save note. Please try again.')
|
||||
}
|
||||
}
|
||||
|
||||
// 检查内容是否为空（无实质性内容）
|
||||
const isContentEmpty = content => {
|
||||
if (!content) return true
|
||||
|
||||
// 检查是否包含图片元素
|
||||
const hasImages = /<img[^>]*>|<div[^>]*class="[^"]*editor-image[^"]*"[^>]*>/.test(content)
|
||||
if (hasImages) return false
|
||||
|
||||
// 移除HTML标签和空白字符后检查是否为空
|
||||
const plainText = content.replace(/<[^>]*>/g, '').trim()
|
||||
if (plainText === '') return true
|
||||
|
||||
// 检查是否只有空的HTML元素
|
||||
const strippedContent = content
|
||||
.replace(/\s+/g, '')
|
||||
.replace(/<br>/g, '')
|
||||
.replace(/<br\/>/g, '')
|
||||
if (strippedContent === '<p></p>' || strippedContent === '<div></div>' || strippedContent === '') return true
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
// 自动保存便签（仅在非主动保存操作时调用）
|
||||
const autoSaveNote = async () => {
|
||||
try {
|
||||
// 获取编辑器中的实际内容
|
||||
const editorContent = editorRef.value ? editorRef.value.getContent() : content.value
|
||||
|
||||
if (isEditing && existingNote) {
|
||||
// 检查内容是否为空，如果为空则删除便签
|
||||
if (isContentEmpty(editorContent)) {
|
||||
// 删除便签
|
||||
await store.deleteNote(noteId.value)
|
||||
console.log('空便签已自动删除')
|
||||
} else if (editorContent !== (existingNote?.content || '')) {
|
||||
// 更新现有便签（仅当内容有变化时）
|
||||
await store.updateNote(noteId.value, {
|
||||
content: editorContent,
|
||||
})
|
||||
console.log('便签已自动保存')
|
||||
}
|
||||
} else if (!isContentEmpty(editorContent)) {
|
||||
// 创建新便签（仅当有内容时）
|
||||
// 检查是否已经存在相同内容的便签以避免重复创建
|
||||
const existingNotes = store.notes.filter(n => n.content === editorContent && !n.isDeleted)
|
||||
if (existingNotes.length === 0) {
|
||||
await store.addNote({
|
||||
content: editorContent,
|
||||
isStarred: false,
|
||||
})
|
||||
console.log('新便签已自动保存')
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('自动保存失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = async () => {
|
||||
// 自动保存便签
|
||||
await autoSaveNote()
|
||||
|
||||
// 直接导航回便签列表页面，因为已经处理了保存或删除逻辑
|
||||
router.push('/notes')
|
||||
}
|
||||
|
||||
// 处理创建（用于新建便签）
|
||||
const handleCreate = async () => {
|
||||
try {
|
||||
// 获取编辑器中的实际内容
|
||||
const editorContent = editorRef.value ? editorRef.value.getContent() : content.value
|
||||
|
||||
// 只有当有内容时才创建新便签
|
||||
if (!isContentEmpty(editorContent)) {
|
||||
await store.addNote({
|
||||
content: editorContent,
|
||||
isStarred: false,
|
||||
})
|
||||
console.log('新便签已创建')
|
||||
}
|
||||
|
||||
// 创建后切换到预览模式（失去编辑器焦点）
|
||||
isEditorFocus.value = false
|
||||
} catch (error) {
|
||||
// In a full implementation, show an alert or toast
|
||||
console.log('Create error: Failed to create note. Please try again.')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理Header组件的操作按钮点击事件
|
||||
const handleAction = actionType => {
|
||||
if (actionType === 'save') {
|
||||
handleSave()
|
||||
} else if (actionType === 'create') {
|
||||
handleCreate()
|
||||
} else if (actionType === 'insertImage') {
|
||||
// 插入图片功能
|
||||
if (editorRef.value) {
|
||||
// 通过editorRef调用RichTextEditor组件的方法来插入图片
|
||||
editorRef.value.insertImage()
|
||||
}
|
||||
} else if (actionType === 'delete') {
|
||||
// 删除便签
|
||||
handleDelete()
|
||||
} else if (actionType === 'share') {
|
||||
// 分享便签
|
||||
handleShare()
|
||||
}
|
||||
}
|
||||
|
||||
const setShowAlert = value => {
|
||||
showAlert.value = value
|
||||
}
|
||||
|
||||
// 处理编辑器获得焦点
|
||||
const handleEditorFocus = () => {
|
||||
isEditorFocus.value = true
|
||||
// 重新计算.note-container的高度
|
||||
nextTick(() => {
|
||||
calculateNoteContainerHeight()
|
||||
})
|
||||
}
|
||||
|
||||
// 处理编辑器失去焦点
|
||||
const handleEditorBlur = () => {
|
||||
isEditorFocus.value = false
|
||||
// 重新计算.note-container的高度
|
||||
nextTick(() => {
|
||||
calculateNoteContainerHeight()
|
||||
})
|
||||
}
|
||||
|
||||
// 处理删除便签
|
||||
const handleDelete = async () => {
|
||||
if (isEditing && existingNote) {
|
||||
// 播放删除按钮动画
|
||||
if (headerRef.value && headerRef.value.playDeleteAnimation) {
|
||||
headerRef.value.playDeleteAnimation()
|
||||
}
|
||||
|
||||
// 等待动画播放完成后再执行删除操作
|
||||
// 15帧 * 50ms = 750ms，再加上一些缓冲时间
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
// 删除便签
|
||||
await store.deleteNote(noteId.value)
|
||||
console.log('便签已删除')
|
||||
// 返回便签列表页面
|
||||
router.push('/notes')
|
||||
} catch (error) {
|
||||
console.error('删除便签失败:', error)
|
||||
}
|
||||
}, 800) // 等待约800ms让动画播放完成
|
||||
}
|
||||
}
|
||||
|
||||
// 处理分享便签
|
||||
const handleShare = () => {
|
||||
// 获取编辑器中的实际内容
|
||||
const editorContent = editorRef.value ? editorRef.value.getContent() : content.value
|
||||
|
||||
// 移除HTML标签，获取纯文本内容用于分享
|
||||
const plainText = editorContent.replace(/<[^>]*>/g, '').trim()
|
||||
|
||||
if (plainText) {
|
||||
// 在实际应用中，这里会调用设备的分享功能
|
||||
// 为了演示，我们使用Web Share API（如果支持）
|
||||
if (navigator.share) {
|
||||
navigator
|
||||
.share({
|
||||
title: '分享便签',
|
||||
text: plainText,
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('分享取消或失败:', error)
|
||||
})
|
||||
} else {
|
||||
// 如果不支持Web Share API，可以复制到剪贴板
|
||||
navigator.clipboard
|
||||
.writeText(plainText)
|
||||
.then(() => {
|
||||
console.log('内容已复制到剪贴板')
|
||||
// 在实际应用中，这里会显示一个提示消息
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('复制失败:', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 计算.note-container的高度
|
||||
const calculateNoteContainerHeight = () => {
|
||||
nextTick(() => {
|
||||
let headerHeight = 0
|
||||
let headerInfoHeight = 0
|
||||
|
||||
// 获取Header组件的高度
|
||||
if (headerRef.value?.$el) {
|
||||
headerHeight = headerRef.value.$el.offsetHeight || 0
|
||||
} else {
|
||||
// 如果headerRef不可用，尝试查找Header组件的DOM元素
|
||||
const headerElement = document.querySelector('.component')
|
||||
headerHeight = headerElement ? headerElement.offsetHeight : 100 // 默认高度
|
||||
}
|
||||
|
||||
// 获取.header-info的高度
|
||||
if (headerInfoRef.value) {
|
||||
headerInfoHeight = headerInfoRef.value.offsetHeight || 0
|
||||
} else {
|
||||
// 如果headerInfoRef不可用，获取.header-info的默认高度
|
||||
const headerInfoElement = document.querySelector('.header-info')
|
||||
headerInfoHeight = headerInfoElement ? headerInfoElement.offsetHeight : 40 // 默认高度
|
||||
}
|
||||
|
||||
// 计算剩余高度 (屏幕高度 - Header高度 - HeaderInfo高度)
|
||||
const totalHeaderHeight = headerHeight + headerInfoHeight
|
||||
const screenHeight = window.innerHeight
|
||||
const newHeight = screenHeight - totalHeaderHeight
|
||||
|
||||
// 设置.note-container的高度
|
||||
noteContainerHeight.value = `${newHeight}px`
|
||||
})
|
||||
}
|
||||
|
||||
// 在组件挂载后和内容变化时重新计算高度
|
||||
onMounted(() => {
|
||||
// 等待DOM更新后再计算高度
|
||||
nextTick(() => {
|
||||
calculateNoteContainerHeight()
|
||||
})
|
||||
|
||||
// 监听窗口大小变化事件
|
||||
window.addEventListener('resize', calculateNoteContainerHeight)
|
||||
})
|
||||
|
||||
// 监听编辑器焦点变化，重新计算高度
|
||||
watch(isEditorFocus, () => {
|
||||
nextTick(() => {
|
||||
calculateNoteContainerHeight()
|
||||
})
|
||||
})
|
||||
|
||||
// 监听内容变化，重新计算高度（当内容变化可能导致header-info高度变化时）
|
||||
watch(content, () => {
|
||||
nextTick(() => {
|
||||
calculateNoteContainerHeight()
|
||||
})
|
||||
})
|
||||
|
||||
// 在组件卸载前自动保存或删除
|
||||
onBeforeUnmount(async () => {
|
||||
await autoSaveNote()
|
||||
// 移除窗口大小变化事件监听器
|
||||
window.removeEventListener('resize', calculateNoteContainerHeight)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: var(--background);
|
||||
section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.note-container {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.rich-text-editor {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 0.625rem;
|
||||
padding: 1rem 1rem 0.7rem 1rem;
|
||||
background-color: var(--background-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -101,23 +101,7 @@ export const useAppStore = defineStore('app', {
|
||||
|
||||
// Mock folders - 使用固定的日期值
|
||||
// 预设的文件夹示例数据
|
||||
const mockFolders = [
|
||||
{
|
||||
id: 'folder1',
|
||||
name: '工作',
|
||||
createdAt: '2025-10-12T10:00:00.000Z',
|
||||
},
|
||||
{
|
||||
id: 'folder2',
|
||||
name: '个人',
|
||||
createdAt: '2025-10-12T10:00:00.000Z',
|
||||
},
|
||||
{
|
||||
id: 'folder3',
|
||||
name: '学习',
|
||||
createdAt: '2025-10-12T10:00:00.000Z',
|
||||
},
|
||||
]
|
||||
const mockFolders = []
|
||||
|
||||
// Mock settings
|
||||
// 预设的设置示例数据
|
||||
|
||||
Reference in New Issue
Block a user