perf: 优化数据库连接与笔记预览加载性能

biji-qianduan/src/components/HomePage.vue

@@ -366,10 +366,17 @@ const previewFile = async (file) => {
     selectedFile.value = null;
     return;
   }
+  // 先立即显示预览页（加载状态），让用户感知到响应
+  selectedFile.value = { ...file, content: '', isLoading: true };
+  showEditor.value = false;
+
+  // 异步加载内容
   try {
     const content = await Preview(file.id) || '';
-    selectedFile.value = { ...file, content };
-    showEditor.value = false;
+    // 内容加载完成后更新
+    if (selectedFile.value && selectedFile.value.id === file.id) {
+      selectedFile.value = { ...file, content, isLoading: false };
+    }
   } catch (error) {
     ElMessage.error('获取笔记内容失败: ' + error.message);
     selectedFile.value = null;
@@ -552,29 +559,27 @@ const handleResize = () => {
   }
 };
 
-// 使用防抖优化 Vditor 渲染
-let renderTimeout = null;
-let lastRenderedId = null;
+// Vditor 渲染优化
+let lastRenderedKey = null;
 
 watch([selectedFile, showEditor], ([newFile, newShowEditor]) => {
   if (newFile && !newShowEditor) {
-    // 如果同一个文件已经渲染过，跳过
-    if (lastRenderedId === newFile.id) return;
+    // 使用文件ID+内容长度作为渲染标识，内容变化时重新渲染
+    const renderKey = `${newFile.id}-${newFile.content?.length || 0}`;
+    if (lastRenderedKey === renderKey) return;
     
-    clearTimeout(renderTimeout);
-    renderTimeout = setTimeout(() => {
-      nextTick(() => {
-        const previewElement = document.querySelector('.markdown-preview');
-        if (previewElement) {
-          const contentToRender = (newFile.isPrivate === 1 && !userStore.isLoggedIn) ? privateNoteContent : newFile.content;
-          Vditor.preview(previewElement, contentToRender || '', {
-            mode: 'light',
-            hljs: { enable: true, style: 'github' }
-          });
-          lastRenderedId = newFile.id;
-        }
-      });
-    }, 50); // 50ms 防抖
+    // 使用 requestAnimationFrame 确保流畅渲染
+    requestAnimationFrame(() => {
+      const previewElement = document.querySelector('.markdown-preview');
+      if (previewElement) {
+        const contentToRender = (newFile.isPrivate === 1 && !userStore.isLoggedIn) ? privateNoteContent : newFile.content;
+        Vditor.preview(previewElement, contentToRender || '', {
+          mode: 'light',
+          hljs: { enable: true, style: 'github' }
+        });
+        lastRenderedKey = renderKey;
+      }
+    });
   }
 }, { deep: true });
 

biji-qianduan/src/components/home/NotePreview.vue

@@ -41,11 +41,16 @@
     <div :key="file.id" class="markdown-preview">
       <!-- Content is rendered by Vditor.preview in the parent -->
     </div>
+    <!-- 加载状态遮罩 -->
+    <div v-if="file.isLoading" class="content-loading">
+      <el-icon class="loading-icon is-loading"><Loading /></el-icon>
+      <span class="loading-text">内容加载中...</span>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { Lock, Edit, Delete, ArrowDown, Back } from '@element-plus/icons-vue';
+import { Lock, Edit, Delete, ArrowDown, Back, Loading } from '@element-plus/icons-vue';
 
 const props = defineProps({
   file: {
@@ -76,6 +81,7 @@ const handleExport = (format) => {
   display: flex;
   flex-direction: column;
   height: 100%;
+  position: relative;
 }
 
 .preview-header {
@@ -159,4 +165,26 @@ const handleExport = (format) => {
 .markdown-preview::-webkit-scrollbar-thumb:hover {
   background-color: #909399;
 }
+
+/* 加载状态 */
+.content-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  color: var(--el-color-primary);
+}
+
+.loading-icon {
+  font-size: 32px;
+}
+
+.loading-text {
+  font-size: 14px;
+  color: var(--text-color-secondary);
+}
 </style>