Browse Source

style: 优化编辑器工具栏标题区排版

何文松 4 weeks ago
parent
commit
660bb243d1
1 changed files with 32 additions and 18 deletions
  1. 32 18
      frontend/vue-demo/src/views/Editor.vue

+ 32 - 18
frontend/vue-demo/src/views/Editor.vue

@@ -3,15 +3,18 @@
     <!-- 工具栏 -->
     <div class="editor-toolbar">
       <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
-      <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>
+      <el-divider direction="vertical" />
+      <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>
-      <span class="save-status" v-if="saved">✓ 已保存</span>
       <div class="toolbar-right">
         <el-button 
           :icon="Refresh" 
@@ -1375,14 +1378,22 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   padding: 0 16px;
-  gap: 16px;
+  gap: 12px;
   flex-shrink: 0;
+  
+  .title-section {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+  }
 
   .title-input-wrapper {
     position: relative;
     display: inline-block;
-    min-width: 120px;
-    max-width: 400px;
+    min-width: 150px;
+    max-width: 500px;
     
     .title-input {
       width: 100%;
@@ -1390,6 +1401,7 @@ onUnmounted(() => {
       :deep(.el-input__wrapper) {
         box-shadow: none;
         background: transparent;
+        border-radius: 6px;
 
         &:hover, &.is-focus {
           background: var(--bg);
@@ -1397,8 +1409,8 @@ onUnmounted(() => {
       }
       
       :deep(.el-input__inner) {
-        font-size: 15px;
-        font-weight: 500;
+        font-size: 16px;
+        font-weight: 600;
       }
     }
     
@@ -1406,23 +1418,25 @@ onUnmounted(() => {
       position: absolute;
       visibility: hidden;
       white-space: nowrap;
-      font-size: 15px;
-      font-weight: 500;
-      padding: 0 11px; // 与 el-input 内边距一致
+      font-size: 16px;
+      font-weight: 600;
+      padding: 0 11px;
       pointer-events: none;
     }
   }
 
   .save-status {
     color: var(--success);
-    font-size: 13px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0.8;
   }
 
   .toolbar-right {
-    margin-left: auto;
     display: flex;
     gap: 8px;
     align-items: center;
+    flex-shrink: 0;
   }
 }