Explorar el Código

refactor(editor): 将工具栏合并到编辑器标题栏中

- 移除顶部独立的 editor-toolbar
- 将标题输入、保存状态、视图切换、操作按钮全部集成到 editor-title-bar
- 布局为:左侧标题 + 中间视图切换 + 右侧操作按钮
- 调整样式适配新布局
何文松 hace 3 semanas
padre
commit
aa7434bbdd
Se han modificado 1 ficheros con 126 adiciones y 183 borrados
  1. 126 183
      frontend/vue-demo/src/views/Editor.vue

+ 126 - 183
frontend/vue-demo/src/views/Editor.vue

@@ -1,34 +1,5 @@
 <template>
   <div class="editor-page">
-    <!-- 工具栏:仅在选中文档时显示 -->
-    <div class="editor-toolbar" v-if="hasActiveDocument">
-      <div class="title-section">
-        <div class="title-input-wrapper" :style="{ width: titleInputWidth + 'px' }">
-          <el-input
-            v-model="reportTitle"
-            class="title-input"
-            placeholder="请输入报告标题"
-          />
-          <span class="title-measure" ref="titleMeasure">{{ reportTitle || '请输入报告标题' }}</span>
-        </div>
-        <span class="save-status" v-if="saved">✓ 已保存</span>
-      </div>
-      <div class="toolbar-right">
-        <el-button 
-          :icon="Refresh" 
-          :loading="regenerating"
-          @click="handleRegenerateBlocks"
-          title="重新生成文档结构"
-        >
-          重新生成
-        </el-button>
-        <el-button :icon="Clock">版本</el-button>
-        <el-button :icon="Share">分享</el-button>
-        <el-divider direction="vertical" />
-        <el-button type="primary" :icon="Check" @click="handleSave">保存</el-button>
-      </div>
-    </div>
-
     <!-- 主体 -->
     <div class="editor-body">
       <!-- 左侧面板 -->
@@ -237,13 +208,43 @@
         <!-- 编辑器:有选中文档时显示 -->
         <template v-else>
           <div class="editor-title-bar">
+            <!-- 左侧:标题和保存状态 -->
+            <div class="title-section">
+              <div class="title-input-wrapper" :style="{ width: titleInputWidth + 'px' }">
+                <el-input
+                  v-model="reportTitle"
+                  class="title-input"
+                  placeholder="请输入报告标题"
+                />
+                <span class="title-measure" ref="titleMeasure">{{ reportTitle || '请输入报告标题' }}</span>
+              </div>
+              <span class="save-status" v-if="saved">✓ 已保存</span>
+            </div>
+            
+            <!-- 中间:视图切换 -->
             <div class="view-toggle">
               <el-radio-group v-model="viewMode" size="small">
                 <el-radio-button value="edit">📝 编辑</el-radio-button>
                 <el-radio-button value="preview">👁 预览</el-radio-button>
               </el-radio-group>
             </div>
-            <el-button :icon="Share" circle @click="showGraphModal = true" title="知识图谱" />
+            
+            <!-- 右侧:操作按钮 -->
+            <div class="toolbar-actions">
+              <el-button 
+                size="small"
+                :icon="Refresh" 
+                :loading="regenerating"
+                @click="handleRegenerateBlocks"
+                title="重新生成文档结构"
+              >
+                重新生成
+              </el-button>
+              <el-button size="small" :icon="Clock" title="版本历史">版本</el-button>
+              <el-button size="small" :icon="Share" circle @click="showGraphModal = true" title="知识图谱" />
+              <el-divider direction="vertical" />
+              <el-button size="small" type="primary" :icon="Check" @click="handleSave">保存</el-button>
+            </div>
           </div>
 
           <div class="editor-scroll" ref="editorRef">
@@ -2576,115 +2577,6 @@ onUnmounted(() => {
   background: var(--bg);
 }
 
-// ==========================================
-// 工具栏 - V2 风格
-// ==========================================
-.editor-toolbar {
-  height: 56px;
-  background: var(--white);
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  gap: 16px;
-  flex-shrink: 0;
-  
-  .title-section {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .title-input-wrapper {
-    position: relative;
-    display: inline-block;
-    min-width: 200px;
-    max-width: 400px;
-    
-    .title-input {
-      width: 100%;
-
-      :deep(.el-input__wrapper) {
-        box-shadow: none;
-        background: transparent;
-        border-radius: var(--radius-sm);
-        padding: 0 12px;
-
-        &:hover {
-          background: var(--bg);
-        }
-        
-        &.is-focus {
-          background: var(--white);
-          box-shadow: 0 0 0 2px var(--primary-light);
-        }
-      }
-      
-      :deep(.el-input__inner) {
-        font-size: 15px;
-        font-weight: 600;
-        color: var(--text-1);
-      }
-    }
-    
-    .title-measure {
-      position: absolute;
-      visibility: hidden;
-      white-space: nowrap;
-      font-size: 15px;
-      font-weight: 600;
-      padding: 0 12px;
-      pointer-events: none;
-    }
-  }
-
-  .save-status {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    color: var(--success);
-    font-size: 13px;
-    white-space: nowrap;
-  }
-
-  .toolbar-right {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    flex-shrink: 0;
-    
-    :deep(.el-button) {
-      border-radius: var(--radius-sm);
-      font-size: 13px;
-      
-      &:not(.el-button--primary) {
-        border-color: var(--border);
-        
-        &:hover {
-          border-color: var(--primary);
-          color: var(--primary);
-          background: var(--primary-light);
-        }
-      }
-      
-      &.el-button--primary {
-        background: var(--primary-gradient);
-        border: none;
-        
-        &:hover {
-          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
-        }
-      }
-    }
-    
-    :deep(.el-divider--vertical) {
-      height: 24px;
-      margin: 0 4px;
-    }
-  }
-}
 
 .editor-body {
   flex: 1;
@@ -3350,74 +3242,125 @@ onUnmounted(() => {
   }
 
   // ==========================================
-  // 编辑器标题栏 - V2 风格
+  // 编辑器标题栏 - V2 风格(集成工具栏)
   // ==========================================
   .editor-title-bar {
-    padding: 16px 24px;
+    padding: 12px 20px;
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 12px;
+    gap: 16px;
     background: var(--white);
+    flex-shrink: 0;
     
-    .editor-main-title {
-      font-size: 18px;
-      font-weight: 600;
+    // 左侧:标题和保存状态
+    .title-section {
+      display: flex;
+      align-items: center;
+      gap: 10px;
       flex: 1;
-      cursor: pointer;
-      transition: color 0.2s;
+      min-width: 0;
+    }
+
+    .title-input-wrapper {
+      position: relative;
+      display: inline-block;
+      min-width: 150px;
+      max-width: 300px;
       
-      &:hover {
-        color: var(--primary);
+      .title-input {
+        width: 100%;
+
+        :deep(.el-input__wrapper) {
+          box-shadow: none;
+          background: transparent;
+          border-radius: var(--radius-sm);
+          padding: 0 8px;
+
+          &:hover {
+            background: var(--bg);
+          }
+          
+          &.is-focus {
+            background: var(--white);
+            box-shadow: 0 0 0 2px var(--primary-light);
+          }
+        }
+        
+        :deep(.el-input__inner) {
+          font-size: 15px;
+          font-weight: 600;
+          color: var(--text-1);
+        }
+      }
+      
+      .title-measure {
+        position: absolute;
+        visibility: hidden;
+        white-space: nowrap;
+        font-size: 15px;
+        font-weight: 600;
+        padding: 0 8px;
+        pointer-events: none;
       }
     }
-    
-    .report-status {
-      display: inline-block;
-      padding: 0 8px;
-      height: 24px;
-      line-height: 24px;
-      background: var(--primary-light);
-      color: var(--primary);
-      border-radius: 4px;
+
+    .save-status {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--success);
       font-size: 12px;
-      font-weight: 600;
+      white-space: nowrap;
     }
     
+    // 中间:视图切换
     .view-toggle {
       display: flex;
       align-items: center;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      overflow: hidden;
       
-      .view-btn {
-        padding: 8px 16px;
-        border: none;
-        background: var(--white);
-        font-size: 13px;
-        cursor: pointer;
-        color: var(--text-2);
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        transition: all 0.2s;
-        
-        &:first-child {
-          border-right: 1px solid var(--border);
+      :deep(.el-radio-group) {
+        .el-radio-button__inner {
+          padding: 6px 12px;
+          font-size: 12px;
         }
+      }
+    }
+    
+    // 右侧:操作按钮
+    .toolbar-actions {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-shrink: 0;
+      
+      :deep(.el-button) {
+        border-radius: var(--radius-sm);
         
-        &:hover {
-          background: var(--bg);
+        &:not(.el-button--primary) {
+          border-color: var(--border);
+          
+          &:hover {
+            border-color: var(--primary);
+            color: var(--primary);
+            background: var(--primary-light);
+          }
         }
         
-        &.active {
-          background: var(--primary-light);
-          color: var(--primary);
-          font-weight: 500;
+        &.el-button--primary {
+          background: var(--primary-gradient);
+          border: none;
+          
+          &:hover {
+            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+          }
         }
       }
+      
+      :deep(.el-divider--vertical) {
+        height: 20px;
+        margin: 0 4px;
+      }
     }
   }