update

src/views/Editor/index3.vue

@@ -107,8 +107,10 @@
         <div class="header-center">
           <div class="course-title-container">
             <input v-if="editingTitle" @change="changeCourse" v-model="courseTitle" class="course-title-input" @blur="editingTitle = false"
-              @keyup.enter="editingTitle = false" @input="isSaved = false" ref="titleInput" />
+              @keyup.enter="editingTitle = false" @input="handleTitleInput" ref="titleInput" />
             <span v-else class="course-title" @click="startEditingTitle">{{ courseTitle || lang.ssUnnamedCourse }}</span>
+            <!-- 用于测量文字宽度的隐藏元素 -->
+            <div class="title-width-measure" ref="titleWidthMeasure">{{ courseTitle || lang.ssUnnamedCourse }}</div>
           </div>
           <div class="save-status">
             <span v-if="lastSaveTime" class="last-save-time">{{ lang.ssLastSaveTime }}{{ lastSaveTime }}</span>
@@ -260,6 +262,7 @@ const courseTitle = ref(lang.ssNewCourse)
 // 课程标题相关
 const editingTitle = ref(false)
 const titleInput = ref<HTMLInputElement | null>(null)
+const titleWidthMeasure = ref<HTMLDivElement | null>(null)
 
 // 保存状态相关
 const isSaved = ref(true)
@@ -271,9 +274,29 @@ const toggleDropdown = () => {
 
 const startEditingTitle = () => {
   editingTitle.value = true
-  // 在下一个渲染周期聚焦输入框
+  // 在下一个渲染周期聚焦输入框并设置宽度
   setTimeout(() => {
     titleInput.value?.focus()
+    // 初始化输入框宽度
+    if (titleWidthMeasure.value && titleInput.value) {
+      const textWidth = titleWidthMeasure.value.offsetWidth
+      const newWidth = Math.max(80, Math.min(200, textWidth))
+      titleInput.value.style.width = `${newWidth}px`
+    }
+  }, 0)
+}
+
+const handleTitleInput = () => {
+  isSaved.value = false
+  // 在下一个渲染周期计算宽度
+  setTimeout(() => {
+    if (titleWidthMeasure.value && titleInput.value) {
+      // 计算文字宽度
+      const textWidth = titleWidthMeasure.value.offsetWidth
+      // 设置输入框宽度，最小80px，最大200px
+      const newWidth = Math.max(80, Math.min(200, textWidth)) // 加20px作为缓冲区
+      titleInput.value.style.width = `${newWidth}px`
+    }
   }, 0)
 }
 
@@ -525,18 +548,33 @@ usePasteEvent()
   font-size: 16px;
   font-weight: 600;
   color: #333;
-  border: 2px solid #3681FC;
+  border: 2px solid #f89a3d;
   border-radius: 4px;
   padding: 4px 8px;
   outline: none;
-  width: 200px;
+  min-width: 80px; /* 约4个中文字符的宽度 */
+  max-width: 200px;
   transition: border-color 0.2s;
+  background-color: #fff8f0;
+  display: inline-block;
+  white-space: nowrap;
 
   &:focus {
-    border-color: #1e60d0;
+    border-color: #f89a3d;
   }
 }
 
+/* 用于测量文字宽度的隐藏元素 */
+.title-width-measure {
+  position: absolute;
+  visibility: hidden;
+  white-space: nowrap;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 4px 8px;
+  font-family: inherit;
+}
+
 .save-status {
   font-size: 12px;
   color: #666;