From 11f7f7c829e405cf208d4651d9e2f7417e5b603d Mon Sep 17 00:00:00 2001
From: yuantao <user@example.com>
Date: Mon, 3 Nov 2025 10:17:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=AE=B9=E5=99=A8=E9=AB=98=E5=BA=A6=E7=8E=B0=E5=9C=A8?=
 =?UTF-8?q?=E4=BC=9A=E8=87=AA=E5=8A=A8=E8=AE=A1=E7=AE=97=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/NoteEditorPage.vue | 958 +++++++++++++++++++----------------
 1 file changed, 518 insertions(+), 440 deletions(-)

diff --git a/src/pages/NoteEditorPage.vue b/src/pages/NoteEditorPage.vue
index e11325c..680b951 100644
--- a/src/pages/NoteEditorPage.vue
+++ b/src/pages/NoteEditorPage.vue
@@ -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>