Просмотр исходного кода

feat(Editor): 添加与父窗口的交互功能并优化课程处理

- 实现与父窗口的通信方法,包括保存、删除、复制课程等操作
- 添加课程标题变更时通知父窗口的功能
- 优化课程加载逻辑,增加课程详情获取方法
- 移除预览按钮并添加课程ID显示条件
- 在iframe链接中添加layout参数
lsc 19 часов назад
Родитель
Сommit
d807473088
2 измененных файлов с 38 добавлено и 9 удалено
  1. 36 7
      src/views/Editor/index3.vue
  2. 2 2
      src/views/Student/index.vue

+ 36 - 7
src/views/Editor/index3.vue

@@ -63,7 +63,7 @@
                 </g>
               </svg>
               另存为副本</div>
-            <div class="dropdown-item danger" @click="handleDelete"><svg width="24" height="24" viewBox="0 0 24 24"
+            <div class="dropdown-item danger" @click="handleDelete" v-show="ccourseid"><svg width="24" height="24" viewBox="0 0 24 24"
                 fill="none" xmlns="http://www.w3.org/2000/svg">
                 <g>
                   <g id="Frame" clip-path="url(#clip0_446_5972)">
@@ -88,7 +88,7 @@
         <!-- 课程标题和保存状态 -->
         <div class="header-center">
           <div class="course-title-container">
-            <input v-if="editingTitle" v-model="courseTitle" class="course-title-input" @blur="editingTitle = false"
+            <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" />
             <span v-else class="course-title" @click="startEditingTitle">{{ courseTitle || '未命名课程' }}</span>
           </div>
@@ -101,7 +101,7 @@
 
       <!-- 操作按钮 -->
       <div class="header-right">
-        <button class="action-btn preview-btn" @click="handlePreview">
+        <!-- <button class="action-btn preview-btn" @click="handlePreview">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g id="Component 1">
               <path id="Vector"
@@ -114,7 +114,7 @@
           </svg>
 
           预览
-        </button>
+        </button> -->
         <button class="action-btn preview-btn" @click="handleSave">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g id="Component 1">
@@ -146,7 +146,7 @@
       <div class="layout-content-center">
         <CanvasTool class="center-top" />
         <Canvas class="center-body" :style="{ height: `calc(100% - ${remarkHeight + 40}px  - 120px)` }"
-          :courseid="props.courseid" @course-loaded="handleCourseLoaded" />
+          :courseid="props.courseid" @course-loaded="handleCourseLoaded"  ref="canvas"/>
         <!-- <Remark
           class="center-bottom" 
           v-model:height="remarkHeight" 
@@ -201,9 +201,16 @@ import AIPPTDialog from './AIPPTDialog.vue'
 import Modal from '@/components/Modal.vue'
 import CollapsibleToolbar from '@/components/CollapsibleToolbar/index.vue'
 import CreateCourseDialog from '@/components/CreateCourseDialog.vue'
+import api from '@/api'
+import { last } from 'lodash'
 
 interface ParentWindowWithToolList extends Window {
-  // goBack?: () => void;
+  lastSteps?: () => void;
+  setCouresTitle?: (title: string) => void;
+  save?: () => void;
+  copyCourse?: () => void;
+  deleteCourse?: () => void;
+  publishCourse?: () => void;
 }
 const parentWindow = window.parent as ParentWindowWithToolList
 
@@ -219,6 +226,7 @@ const mainStore = useMainStore()
 const { dialogForExport, showSelectPanel, showSearchPanel, showNotesPanel, showMarkupPanel, showAIPPTDialog } = storeToRefs(mainStore)
 const closeExportDialog = () => mainStore.setDialogForExport('')
 const closeAIPPTDialog = () => mainStore.setAIPPTDialogState(false)
+const ccourseid = ref('')
 
 const remarkHeight = ref(0)
 const sidebarCollapsed = ref(false)
@@ -250,6 +258,7 @@ const handleBackToList = () => {
   isDropdownOpen.value = false
   // 导航回课程列表
   console.log('导航回课程列表')
+  parentWindow.lastSteps?.()
 }
 
 const handleSettings = () => {
@@ -262,12 +271,18 @@ const handleSaveAsCopy = () => {
   isDropdownOpen.value = false
   // 另存为副本
   console.log('另存为副本')
+  parentWindow.copyCourse?.()
 }
 
 const handleDelete = () => {
   isDropdownOpen.value = false
   // 删除课程
   console.log('删除课程')
+  parentWindow.deleteCourse?.()
+}
+
+const changeCourse = () => {
+  parentWindow.setCouresTitle?.(courseTitle.value)
 }
 
 const handleToolbarToggle = (collapsed: boolean) => {
@@ -277,6 +292,7 @@ const handleToolbarToggle = (collapsed: boolean) => {
 const handleCourseLoaded = (data: any) => {
   console.log('课程数据已加载:', data)
   courseTitle.value = data.title || '新建课程'
+  lastSaveTime.value = data.utime || ''
 }
 
 const handlePreview = () => {
@@ -285,11 +301,13 @@ const handlePreview = () => {
 
 const handleSave = () => {
   console.log('保存课程')
-  lastSaveTime.value = new Date().toLocaleString()
+  // lastSaveTime.value = new Date().toLocaleString()
+  parentWindow.save?.()
 }
 
 const handlePublish = () => {
   console.log('发布课程')
+  parentWindow.publishCourse?.()
 }
 
 const closeCreateCourseDialog = () => {
@@ -308,10 +326,21 @@ const handleCreateCourseSelect = (option: string) => {
   }
 }
 
+const getCourseDetail = async (courseid: string) => {
+  console.log('获取课程详情:', courseid)
+  ccourseid.value = courseid
+  const res = await api.getCourseDetail(courseid)
+  console.log(res)
+  handleCourseLoaded(res[0][0])
+}
+
+Object.assign(window, { getCourseDetail })
+
 onMounted(() => {
   if (!props.courseid) {
     showCreateCourseDialog.value = true
   }
+  ccourseid.value = props.courseid || ''
   // 添加点击外部关闭下拉菜单的事件监听
   document.addEventListener('click', handleClickOutside)
 })

+ 2 - 2
src/views/Student/index.vue

@@ -1395,11 +1395,11 @@ const processIframeLinks = async () => {
                     let newHash = hashPart
                     if (newHash.includes('?')) {
                       // 如果hash中已经有查询参数,添加&
-                      newHash += `&courseid=${props.courseid || ''}`
+                      newHash += `&courseid=${props.courseid || ''}&layout=laptop`
                     } 
                     else {
                       // 如果hash中没有查询参数,添加?
-                      newHash += `?courseid=${props.courseid || ''}`
+                      newHash += `?courseid=${props.courseid || ''}&layout=laptop`
                     }
 
                     // 构建新的URL