Merge branch 'beta'

src/views/Editor/CanvasTool/index2.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="canvas-tool">
     <div class="left-handler">
-      <Popover trigger="click" v-model:value="toolVisible"
-        style="height: 100%;display: flex;align-items: center;" :offset="10" v-if="hasInteractiveTool">
+      <Popover trigger="click" v-model:value="toolVisible" style="height: 100%;display: flex;align-items: center;"
+        :offset="10" v-if="hasInteractiveTool">
         <template #content>
           <div class="popover-item" @click="editContent(45)" v-if="frametype != 45">
             <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -18,17 +18,25 @@
             <span>{{ lang.ssQandA }}</span>
           </div>
         </template>
-        <div class="handler-item" :class="{active: toolVisible}">
+        <div class="handler-item" :class="{ active: toolVisible }">
           <span class="svg-icon">
-            <svg v-if="frametype == 45" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <svg v-if="frametype == 45" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2">
               <circle cx="12" cy="12" r="10" />
               <path d="M12 16v-4m0-4h.01" />
             </svg>
-            <svg v-if="frametype == 15" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <svg v-if="frametype == 15" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2">
               <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
             </svg>
           </span>
           <span>{{ iframeLabel }}</span>
+          <svg t="1776672009773" class="xia-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="4735" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
+            <path
+              d="M562.5 771c-14.3 14.3-33.7 27.5-52 23.5-18.4 3.1-35.7-11.2-50-23.5L18.8 327.3c-22.4-22.4-22.4-59.2 0-81.6s59.2-22.4 81.6 0L511.5 668l412.1-422.3c22.4-22.4 59.2-22.4 81.6 0s22.4 59.2 0 81.6L562.5 771z"
+              p-id="4736" fill="currentColor"></path>
+          </svg>
         </div>
       </Popover>
       <Popover trigger="click" v-model:value="textTypeSelectVisible"
@@ -105,15 +113,8 @@
     </Modal>
 
     <!-- 确认对话框 -->
-    <Modal
-      :visible="confirmDialogVisible"
-      :width="400"
-      :contentStyle="{ borderRadius: '15px' }"
-      :closeButton="false"
-      :closeOnClickMask="false"
-      :closeOnEsc="false"
-      @update:visible="val => confirmDialogVisible = val"
-    >
+    <Modal :visible="confirmDialogVisible" :width="400" :contentStyle="{ borderRadius: '15px' }" :closeButton="false"
+      :closeOnClickMask="false" :closeOnEsc="false" @update:visible="val => confirmDialogVisible = val">
       <div class="clear-confirm">
         <div class="clear-confirm__title">{{ lang.ssConfirmOperation }}</div>
         <div class="clear-confirm__content">
@@ -474,7 +475,7 @@ const editContent = (toolType: number) => {
     padding: 0 15px;
 
     &:not(.disable):hover,
-    &:not(.active):hover{
+    &:not(.active):hover {
       background-color: #f1f1f1;
     }
   }
@@ -511,6 +512,12 @@ const editContent = (toolType: number) => {
       margin-right: 5px;
       display: flex;
     }
+
+    .xia-icon {
+      margin-left: 5px;
+      width: 10px;
+      height: 10px;
+    }
   }
 }
 
@@ -585,7 +592,7 @@ const editContent = (toolType: number) => {
   }
 }
 
-.btn-c{
+.btn-c {
   display: inline-block;
   line-height: 1;
   white-space: nowrap;
@@ -617,6 +624,4 @@ const editContent = (toolType: number) => {
     }
   }
 }
-
-
 </style>

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;

src/views/Student/index.vue

@@ -762,8 +762,8 @@ const calculateSlideSize = () => {
     tempWidth = winHeight2 / viewportRatio.value
   }
   // 检查底部空间
-  if (slideHeight.value - tempHeight < 85) {
-    tempHeight = Math.max(slideHeight.value - 85, 0)
+  if (slideHeight.value - tempHeight < (60 + 65 + 10)) {
+    tempHeight = Math.max(slideHeight.value - (60 + 65 + 10), 0)
     tempWidth = tempHeight > 0 ? tempHeight / viewportRatio.value : 0
   }
   slideWidth2.value = tempWidth