Ver Fonte

feat(editor): 添加文档和目录加载状态提示

- 编辑区加载文档时显示 "正在加载文档..." 遮罩
- 目录面板加载时显示 "加载目录中..." 遮罩
- 使用 Element Plus 的 v-loading 指令
- 优化加载过程中的用户体验
何文松 há 3 semanas atrás
pai
commit
18e351a600
1 ficheiros alterados com 7 adições e 3 exclusões
  1. 7 3
      frontend/vue-demo/src/views/Editor.vue

+ 7 - 3
frontend/vue-demo/src/views/Editor.vue

@@ -157,7 +157,7 @@
         </div>
 
         <!-- 目录面板 -->
-        <div class="panel-body toc-panel" v-show="leftPanelTab === 'toc'">
+        <div class="panel-body toc-panel" v-show="leftPanelTab === 'toc'" v-loading="loadingToc" element-loading-text="加载目录中...">
           <div class="toc-list" v-if="tocItems && tocItems.length > 0">
             <div 
               v-for="(item, index) in tocItems" 
@@ -170,7 +170,7 @@
               <span class="toc-text">{{ item.title || item.text }}</span>
             </div>
           </div>
-          <div class="toc-empty" v-else>
+          <div class="toc-empty" v-else-if="!loadingToc">
             <div class="empty-icon">📑</div>
             <div class="empty-text">暂无目录</div>
             <div class="empty-hint">文档解析后将自动生成目录</div>
@@ -239,7 +239,7 @@
             </div>
           </div>
 
-          <div class="editor-scroll" ref="editorRef">
+          <div class="editor-scroll" ref="editorRef" v-loading="loading" element-loading-text="正在加载文档...">
             <div
               class="editor-content"
               contenteditable="true"
@@ -1038,15 +1038,19 @@ const blocks = ref([])
 
 // 目录数据(从 API 获取)
 const tocItems = ref([])
+const loadingToc = ref(false)
 
 // 加载文档目录
 async function loadToc(documentId) {
+  loadingToc.value = true
   try {
     const items = await documentApi.getToc(documentId)
     tocItems.value = items || []
   } catch (error) {
     console.warn('获取文档目录失败:', error)
     tocItems.value = []
+  } finally {
+    loadingToc.value = false
   }
 }