优化 编辑器容器高度现在会自动计算了

src/pages/NoteEditorPage.vue

@@ -7,14 +7,14 @@
       <Header v-else ref="headerRef" :onBack="handleCancel" :onAction="handleAction" actionIcon="preview" />
       <section>
         <!-- 顶部信息栏 -->
-        <div class="header-info">
+        <div ref="headerInfoRef" class="header-info">
           <span class="edit-time">{{ formattedTime }}</span>
           <span>|</span>
           <span class="word-count">{{ wordCount }}</span>
         </div>
 
         <!-- 富文本编辑器 -->
-        <div class="editor-container">
+        <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>
@@ -46,9 +46,13 @@ 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 => {
@@ -81,6 +85,9 @@ onMounted(async () => {
   if (noteId.value) {
     await setNoteContent(noteId.value)
   }
+  
+  // 等待DOM更新后计算.note-container的高度
+  calculateNoteContainerHeight()
 })
 
 // 监听noteId变化，确保在编辑器准备好后设置内容
@@ -89,6 +96,8 @@ watch(
   async newNoteId => {
     if (newNoteId) {
       await setNoteContent(newNoteId)
+      // 重新计算.note-container的高度
+      calculateNoteContainerHeight()
     }
   },
   { immediate: true }
@@ -100,6 +109,8 @@ watch(
   async newNotes => {
     if (noteId.value && newNotes.length > 0) {
       await setNoteContent(noteId.value)
+      // 重新计算.note-container的高度
+      calculateNoteContainerHeight()
     }
   },
   { immediate: true }
@@ -127,6 +138,8 @@ watch(
   async newNotes => {
     if (noteId.value && newNotes.length > 0) {
       await setNoteContent(noteId.value)
+      // 重新计算.note-container的高度
+      calculateNoteContainerHeight()
     }
   },
   { immediate: true }
@@ -329,11 +342,19 @@ const setShowAlert = value => {
 // 处理编辑器获得焦点
 const handleEditorFocus = () => {
   isEditorFocus.value = true
+  // 重新计算.note-container的高度
+  nextTick(() => {
+    calculateNoteContainerHeight()
+  })
 }
 
 // 处理编辑器失去焦点
 const handleEditorBlur = () => {
   isEditorFocus.value = false
+  // 重新计算.note-container的高度
+  nextTick(() => {
+    calculateNoteContainerHeight()
+  })
 }
 
 // 处理删除便签
@@ -395,9 +416,70 @@ const handleShare = () => {
   }
 }
 
+// 计算.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>
 
@@ -413,14 +495,10 @@ onBeforeUnmount(async () => {
   }
 }
 
-.editor-container {
+.note-container {
   flex: 1;
-  min-height: 100%;
-  overflow-y: auto;
-  background-color: var(--background-card);
-  &.disabled {
-    pointer-events: none;
-  }
+  overflow-y: scroll;
+  background-color: var(--background);
 }
 
 .rich-text-editor {