Forráskód Böngészése

style: 编辑器标题输入框改为动态宽度

何文松 4 hete
szülő
commit
08f1b6d66d
1 módosított fájl, 50 hozzáadás és 13 törlés
  1. 50 13
      frontend/vue-demo/src/views/Editor.vue

+ 50 - 13
frontend/vue-demo/src/views/Editor.vue

@@ -3,11 +3,14 @@
     <!-- 工具栏 -->
     <div class="editor-toolbar">
       <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
-      <el-input
-        v-model="reportTitle"
-        class="title-input"
-        placeholder="请输入报告标题"
-      />
+      <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 class="toolbar-right">
         <el-button 
@@ -311,7 +314,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import {
   ArrowLeft, Clock, Share, Check, Plus, Delete, Connection, Refresh
@@ -326,12 +329,24 @@ const templateStore = useTemplateStore()
 
 const templateId = route.params.templateId
 const reportTitle = ref('')
+const titleMeasure = ref(null)
+const titleInputWidth = ref(120)
 const viewMode = ref('edit')
 const saved = ref(true)
 const editorRef = ref(null)
 const loading = ref(false)
 const regenerating = ref(false)
 
+// 动态计算标题输入框宽度
+watch(reportTitle, () => {
+  nextTick(() => {
+    if (titleMeasure.value) {
+      const measuredWidth = titleMeasure.value.offsetWidth + 30 // 额外边距
+      titleInputWidth.value = Math.max(120, Math.min(400, measuredWidth))
+    }
+  })
+})
+
 // 来源文件(从 API 获取)
 const sourceFiles = ref([])
 const selectedFile = ref(null)
@@ -1364,17 +1379,39 @@ onUnmounted(() => {
   gap: 16px;
   flex-shrink: 0;
 
-  .title-input {
-    width: 300px;
+  .title-input-wrapper {
+    position: relative;
+    display: inline-block;
+    min-width: 120px;
+    max-width: 400px;
+    
+    .title-input {
+      width: 100%;
 
-    :deep(.el-input__wrapper) {
-      box-shadow: none;
-      background: transparent;
+      :deep(.el-input__wrapper) {
+        box-shadow: none;
+        background: transparent;
 
-      &:hover {
-        background: var(--bg);
+        &:hover, &.is-focus {
+          background: var(--bg);
+        }
+      }
+      
+      :deep(.el-input__inner) {
+        font-size: 15px;
+        font-weight: 500;
       }
     }
+    
+    .title-measure {
+      position: absolute;
+      visibility: hidden;
+      white-space: nowrap;
+      font-size: 15px;
+      font-weight: 500;
+      padding: 0 11px; // 与 el-input 内边距一致
+      pointer-events: none;
+    }
   }
 
   .save-status {