perf: 优化笔记预览渲染性能与UI样式

biji-qianduan/src/components/HomePage.vue

@@ -552,18 +552,29 @@ const handleResize = () => {
   }
 };
 
+// 使用防抖优化 Vditor 渲染
+let renderTimeout = null;
+let lastRenderedId = null;
+
 watch([selectedFile, showEditor], ([newFile, newShowEditor]) => {
   if (newFile && !newShowEditor) {
-    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' }
-        });
-      }
-    });
+    // 如果同一个文件已经渲染过，跳过
+    if (lastRenderedId === newFile.id) 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 防抖
   }
 }, { deep: true });