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

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>