update

src/components/CollapsibleToolbar/componets/aiChat.vue

@@ -44,7 +44,7 @@
               </span>
             </button>
 
-            <!-- <button type="button" class="coco-quick-action" v-if="cocoQuickTab === 'page'"
+            <button type="button" class="coco-quick-action" v-if="cocoQuickTab === 'page'"
               @click="sendQuickAction(lang.ssAiChatQuickAction4)">
               <span class="coco-quick-action-copy">
                 <span class="coco-quick-action-title">{{ lang.ssAiChatQuickGenWebTitle }}</span>
@@ -57,7 +57,7 @@
                   <path d="M13 5l7 7-7 7"></path>
                 </svg>
               </span>
-            </button> -->
+            </button>
             <button type="button" class="coco-quick-action" v-if="cocoQuickTab === 'course'"
               @click="sendQuickAction(lang.ssAiChatQuickAction5)">
               <span class="coco-quick-action-copy">
@@ -72,7 +72,7 @@
                 </svg>
               </span>
             </button>
-            <!-- <button type="button" class="coco-quick-action" v-if="cocoQuickTab === 'course'" @click="sendQuickAction(lang.ssBatchInteractiveWeb)">
+            <button type="button" class="coco-quick-action" v-if="cocoQuickTab === 'course'" @click="sendQuickAction(lang.ssBatchInteractiveWeb)">
                 <span class="coco-quick-action-copy">
                     <span class="coco-quick-action-title">{{ lang.ssAiChatQuickBatchGenToolsTitle }}</span>
                     <span class="coco-quick-action-desc">{{ lang.ssAiChatQuickBatchGenToolsDesc }}</span>
@@ -83,7 +83,7 @@
                         <path d="M13 5l7 7-7 7"></path>
                     </svg>
                 </span>
-            </button> -->
+            </button>
           </div>
         </div>
       </div>

src/store/main.ts

@@ -39,6 +39,9 @@ export interface MainState {
   showAIPPTDialog: boolean
   childPageVisible: boolean
   childPageToolsArray: any[]
+  childPageIndex: number
+  userid: string
+  courseTitle: string
 }
 
 const nanoid = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz')
@@ -77,6 +80,9 @@ export const useMainStore = defineStore('main', {
     showAIPPTDialog: false, // 打开AIPPT创建窗口
     childPageVisible: false, // 打开带选页
     childPageToolsArray: [], // 带选页工具数组
+    childPageIndex: 0, // 带选页当前页面索引
+    userid: '', // 当前用户ID
+    courseTitle: '', // 课程标题
   }),
 
   getters: {
@@ -210,10 +216,16 @@ export const useMainStore = defineStore('main', {
     setAIPPTDialogState(show: boolean) {
       this.showAIPPTDialog = show
     },
-    
-    setChildPageState(show: boolean, tools: any[]) {
+    setChildPageState(show: boolean, tools: any[], pageIndex: number) {
       this.childPageVisible = show
       this.childPageToolsArray = tools
+      this.childPageIndex = pageIndex
+    },
+    setUserid(userid: string) {
+      this.userid = userid
     },
+    setCourseTitle(courseTitle: string) {
+      this.courseTitle = courseTitle
+    }
   },
 })

src/views/Editor/Canvas/ChildPageDisplay.vue

@@ -1,50 +1,59 @@
 <template>
   <div class="child-page-display">
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner"></div>
+      <span class="loading-text">{{ lang.ssAiWait }}</span>
+    </div>
+    
     <div class="child-page-header">
       <div class="header-left">
         <span class="badge">{{ lang.ssWaitSelection }}</span>
         <span class="hint">{{ formatHint(lang.ssWaitSelectionHint, toolsArray.length) }}</span>
       </div>
       <div class="header-right">
-        <button 
-          v-for="(tool, index) in toolsArray" 
-          :key="tool.tool_id" 
-          class="candidate-tag"
-          :class="{ active: selectedToolIndex === index }"
-          @click="selectTool(index)"
-        >
+        <button v-for="(tool, index) in toolsArray" :key="tool.tool_id" class="candidate-tag"
+          :class="{ active: selectedToolIndex === index }" @click="selectTool(index)">
           {{ lang.ssCandidate }} {{ fillDigit(index + 1, 2) }} {{ tool.tool_name }}
         </button>
       </div>
     </div>
-    
+
     <div class="child-page-body">
       <div class="question-area">
-        <iframe src="https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/workPage.html#/setWorkPage?id=30ca7d10-4d09-11f1-9985-005056924926&type=79" frameborder="0"></iframe>
+        <iframe
+          :src="toolsArray[selectedToolIndex]?.url + '&isSet=2' || ''"
+          frameborder="0"></iframe>
       </div>
-      
-      <div class="side-panel">
-        <button class="side-btn primary">{{ lang.ssKeep }}</button>
-        <button class="side-btn secondary">{{ lang.ssDiscard }}</button>
+
+      <div class="side-panel" v-if="!toolsArray[selectedToolIndex].isSet">
+         <button class="side-btn primary" @click="saveTool(toolsArray[selectedToolIndex].url || '', currentToolType, selectedToolIndex)">{{ lang.ssKeep }}</button>
+        <button class="side-btn secondary" @click="discardTool(selectedToolIndex)">{{ lang.ssDiscard }}</button>
         <div class="divider"></div>
-        <button class="side-btn link">{{ lang.ssKeepAll }}</button>
+        <button class="side-btn link" @click="keepAllTools">{{ lang.ssKeepAll }}</button>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { fillDigit } from '@/utils/common'
 import { lang } from '@/main'
+import { useSlidesStore } from '@/store/slides'
+import { chat_no_stream, chat_no_stream2 } from '@/tools/aiChat'
 
+const slidesStore = useSlidesStore()
 const mainStore = useMainStore()
-const { childPageToolsArray } = storeToRefs(mainStore)
+const { childPageToolsArray, userid, courseTitle, childPageIndex } = storeToRefs(mainStore)
+const { setChildPageState } = mainStore
+const { currentSlide, slideIndex } = storeToRefs(slidesStore)
 
 const toolsArray = childPageToolsArray.value
 const selectedToolIndex = ref(0)
+const agentid2 = ref('f86aa63c-b7b7-4d03-9b37-b59f116d36f3')// 生成内容
+const loading = ref(true)
 
 const formatHint = (str: string, count: number) => {
   return str.replace('{0}', String(count))
@@ -55,13 +64,208 @@ const selectTool = (index: number) => {
   console.log('👶 选中工具:', toolsArray[index])
 }
 
-onMounted(() => {
+onMounted(async () => {
   console.log('👶 带选页打开，toolsArray:', toolsArray)
+  const toolsToCreate = toolsArray.filter(t => !t.url)
+  if (toolsToCreate.length === 0) {
+    loading.value = false
+    return
+  }
+  
+  const createPromises = toolsToCreate.map((tool) => {
+    const originalIndex = toolsArray.findIndex(t => t.tool_id === tool.tool_id)
+    return createTool(toolsArray, tool, originalIndex)
+  })
+  
+  await Promise.all(createPromises)
+  loading.value = false
 })
 
-watch(childPageToolsArray, (newVal) => {
+watch(childPageToolsArray, async (newVal) => {
   console.log('👶 带选页 toolsArray 更新:', newVal)
+  const toolsToCreate = newVal.filter(t => !t.url)
+  if (toolsToCreate.length === 0) {
+    loading.value = false
+    return
+  }
+  
+  loading.value = true
+  const createPromises = toolsToCreate.map((tool) => {
+    const originalIndex = newVal.findIndex(t => t.tool_id === tool.tool_id)
+    return createTool(newVal, tool, originalIndex)
+  })
+  
+  await Promise.all(createPromises)
+  loading.value = false
 })
+
+const createTool = async (array: any[], tool: any, index: number) => {
+  let action = ''
+  let type = 0
+  if (tool.tool_id === 'choice') {
+    action = lang.ssAiChatQuickAction1
+    type = 45
+  }
+  else if (tool.tool_id === 'qa') {
+    action = lang.ssAiChatQuickAction2
+    type = 15
+  }
+  else if (tool.tool_id === 'poll') {
+    action = lang.ssAiChatQuickAction6
+    type = 78
+  }
+  else if (tool.tool_id === 'photo') {
+    action = lang.ssAiChatQuickAction7
+    type = 79
+  }
+  
+  const textContents = currentSlide.value?.elements
+    .filter((element: any) => element.type === 'text' || (element.type === 'shape' && element.text && element.text.content))
+    .map((textElement: any) => {
+      if (textElement.type === 'shape') {
+        const tempElement = document.createElement('div')
+        tempElement.innerHTML = textElement.text.content
+        return tempElement.textContent || tempElement.innerText || ''
+      }
+      const tempElement = document.createElement('div')
+      tempElement.innerHTML = textElement.content
+      return tempElement.textContent || tempElement.innerText || ''
+    })
+    .filter(content => content.trim() !== '') || []
+  
+  console.log('textContents', textContents)
+  const prompt = `
+      #课程标题(course_title): ${courseTitle.value || ''}
+      #当前页面内容(current_page_content): ${textContents.length > 0 ? textContents.join('\n') : '无文本内容'}
+      #query: ${action}
+      `
+  const result = chat_no_stream(prompt, agentid2.value, userid.value || '', lang.lang)
+  console.log(result)
+  const content = await result.promise
+  console.log('👶 创建工具:', content)
+
+  let jsonFormat = ''
+  if (tool.tool_id === 'choice') {
+    jsonFormat = `{"testCount":1,"testTitle":"","testJson":[{"id":"7de1fdb4-bec3-4324-8986-4623f838e3d7","type":"2","teststitle":"1+1？","checkList":["1","2","3"],"timuList":[],"answer":[1],"userAnswer":[],"explanation":"解析"}]}`
+  }
+  else if (tool.tool_id === 'qa') {
+    jsonFormat = `{"answerQ":"问题","answer":"","fileList":[],"imageList":[],"evaluationCriteria":"评价标准"}`
+  }
+  else if (tool.tool_id === 'poll') {
+    jsonFormat = `{"testCount":1,"testTitle":"","testJson":[{"id":"7de1fdb4-bec3-4324-8986-4623f838e3d7","type":"2","teststitle":"1+1？","checkList":["1","2","3"],"timuList":[],"answer":[],"userAnswer":[]}]}`
+  }
+  else if (tool.tool_id === 'photo') {
+    jsonFormat = `{"answerQ":"问题","answer":"","fileList":[]}`
+  }
+  
+  const res = await chat_no_stream2([{
+    role: 'user',
+    content: `这是用户输入的内容："${content}",根据用户输入的内容，生成json。输出一个json格式的回复，格式如下：${jsonFormat}。`,
+  }], { type: 'json_object' })
+  
+  console.log(`${tool.tool_name}`, JSON.parse(res))
+  
+  const pageId = await setPageId(type, res)
+  const baseUrl = setUrl()
+  const url = `${baseUrl}/pbl-teacher-table/dist/workPage.html#/setWorkPage?id=${pageId}&type=${type}`
+  array[index].url = url
+  setTool()
+}
+
+const setTool = () => {
+  const slide = currentSlide.value
+  slidesStore.updateSlide({ toolsArray: toolsArray }, slide.id)
+  console.log(slide)
+
+  // 判断所有工具是否都已保留
+  const allToolsSet = toolsArray.every(t => t.isSet)
+  if (allToolsSet) {
+    const slide = currentSlide.value
+    slidesStore.updateSlide({ toolsArray: [] }, slide.id) 
+    setChildPageState(false, [], slideIndex.value || 0)
+  }
+}
+
+const setUrl = () => {
+  let url = 'https://beta.pbl.cocorobo.cn'
+  if (lang.lang === 'cn') {
+    url = 'https://pbl.cocorobo.cn/'
+  }
+  else if (lang.lang === 'hk') {
+    url = 'https://pbl.cocorobo.hk/'
+  }
+  else if (lang.lang === 'en') {
+    url = 'https://pbl.cocorobo.com/'
+  }
+  return url
+}
+
+import { getWorkPageId } from '@/services/course'
+const setPageId = async (tool: any, json: any) => {
+  const res = await getWorkPageId({
+    userid: userid.value || '',
+    type: tool,
+    json: json
+  })
+  return res[0][0].id
+}
+
+import useCreateElement from '@/hooks/useCreateElement'
+import useSlideHandler from '@/hooks/useSlideHandler'
+const { createSlide } = useSlideHandler()
+const { createFrameElement } = useCreateElement()
+
+// 切换页面
+const changeSlideIndex = (index: number) => {
+  mainStore.setActiveElementIdList([])
+
+  if (slideIndex.value === index) return
+  slidesStore.updateSlideIndex(index)
+}
+// 保留工具
+const saveTool = (url: string, type: any, index: number) => {
+  createSlide()
+  createFrameElement(url, type)
+  changeSlideIndex(childPageIndex.value)
+  toolsArray[index].isSet = true
+  setTool()
+}
+
+// 放弃工具
+const discardTool = (index: number) => {
+  toolsArray[index].isSet = true
+  setTool()
+}
+
+// 保留所有工具
+const keepAllTools = () => {
+  toolsArray.forEach(tool => {
+    if (!tool.isSet) {
+      createSlide()
+      createFrameElement(tool.url, getToolType(tool.tool_id))
+      tool.isSet = true
+    }
+  })
+  changeSlideIndex(childPageIndex.value)
+  setTool()
+}
+
+// 判断工具type
+const toolTypeMap: Record<string, number> = {
+  'choice': 45,
+  'qa': 15,
+  'poll': 78,
+  'photo': 79
+}
+
+const currentToolType = computed(() => {
+  const toolId = toolsArray[selectedToolIndex.value]?.tool_id
+  return toolId ? toolTypeMap[toolId] || 0 : 0
+})
+
+const getToolType = (toolId: string) => {
+  return toolTypeMap[toolId] || 0
+}
 </script>
 
 <style lang="scss" scoped>
@@ -84,13 +288,13 @@ watch(childPageToolsArray, (newVal) => {
   align-items: center;
   padding: 7px 20px;
   background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);
-  
+
   .header-left {
     display: flex;
     align-items: center;
     gap: 10px;
   }
-  
+
   .badge {
     background-color: #d97706;
     color: white;
@@ -99,12 +303,12 @@ watch(childPageToolsArray, (newVal) => {
     font-size: 12px;
     font-weight: 600;
   }
-  
+
   .hint {
     color: #78350f;
     font-size: 14px;
   }
-  
+
   .header-right {
     display: flex;
     gap: 8px;
@@ -112,7 +316,7 @@ watch(childPageToolsArray, (newVal) => {
     padding: 5px 10px;
     border-radius: 30px;
   }
-  
+
   .candidate-tag {
     background-color: #d97706;
     color: white;
@@ -124,11 +328,11 @@ watch(childPageToolsArray, (newVal) => {
     cursor: pointer;
     transition: all 0.2s;
     border-radius: 30px;
-    
+
     &:hover {
       background-color: #b45309;
     }
-    
+
     &.active {
       background-color: white;
       color: #d97706;
@@ -159,12 +363,48 @@ watch(childPageToolsArray, (newVal) => {
   }
 }
 
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 251, 235, 0.95);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  z-index: 100;
+}
+
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid #f59e0b;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  color: #d97706;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .side-panel {
   width: 90px;
   display: flex;
   flex-direction: column;
   gap: 12px;
-  
+
   .side-btn {
     padding: 12px 20px;
     border: none;
@@ -173,39 +413,39 @@ watch(childPageToolsArray, (newVal) => {
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s;
-    
+
     &.primary {
       background-color: #f59e0b;
       color: white;
-      
+
       &:hover {
         background-color: #d97706;
       }
     }
-    
+
     &.secondary {
       background-color: white;
       color: #6b7280;
       border: 1px solid #e5e7eb;
-      
+
       &:hover {
         border-color: #f59e0b;
         color: #f59e0b;
       }
     }
-    
+
     &.link {
       background-color: transparent;
       color: #f59e0b;
       text-align: left;
       padding-left: 0;
-      
+
       &:hover {
         text-decoration: underline;
       }
     }
   }
-  
+
   .divider {
     height: 1px;
     background-color: #e5e7eb;

src/views/Editor/CanvasTool/index2.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="canvas-tool">
     <div class="left-handler">
-      <!-- <IconBack class="handler-item" :class="{ 'disable': !canUndo }" v-tooltip="lang.ssUndoTip" @click="undo()"  v-if="!isFrame" />
-      <IconNext class="handler-item" :class="{ 'disable': !canRedo }" v-tooltip="lang.ssRedoTip" @click="redo()"  v-if="!isFrame" /> -->
+      <IconBack class="handler-item" :class="{ 'disable': !canUndo }" v-tooltip="lang.ssUndoTip" @click="undo()"  v-if="!isFrame" />
+      <IconNext class="handler-item" :class="{ 'disable': !canRedo }" v-tooltip="lang.ssRedoTip" @click="redo()"  v-if="!isFrame" />
       <Popover trigger="click" v-model:value="toolVisible" style="height: 100%;display: flex;align-items: center;"
         :offset="10" v-if="hasInteractiveTool">
         <template #content>

src/views/Editor/Thumbnails/ThumbnailChildPage.vue

@@ -36,7 +36,7 @@ const changeSlideIndex = (index: number) => {
 
 const handleClick = () => {
   changeSlideIndex(props.slideIndex || 0)
-  setChildPageState(true, props.toolsArray || [])
+  setChildPageState(true, props.toolsArray || [], props.slideIndex || 0)
 }
 </script>
 

src/views/Editor/Thumbnails/index2.vue

@@ -178,7 +178,7 @@ const changeSlideIndex = (index: number) => {
 
 // 点击缩略图
 const handleClickSlideThumbnail = (e: MouseEvent, index: number) => {
-  mainStore.setChildPageState(false)
+  mainStore.setChildPageState(false, [], index)
   if (editingSectionId.value) return
 
   const isMultiSelected = selectedSlidesIndex.value.length > 1

src/views/Editor/index3.vue

@@ -200,7 +200,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import useGlobalHotkey from '@/hooks/useGlobalHotkey'
@@ -246,6 +246,7 @@ const props = withDefaults(defineProps<Props>(), {
   userid: null,
 })
 
+
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
 const { dialogForExport, showSelectPanel, showSearchPanel, showNotesPanel, showMarkupPanel, showAIPPTDialog } = storeToRefs(mainStore)
@@ -258,7 +259,9 @@ const sidebarCollapsed = ref(false)
 const showCreateCourseDialog = ref(false)
 const isDropdownOpen = ref(false)
 const courseTitle = ref(lang.ssNewCourse)
-
+watch(() => courseTitle.value, (newVal) => {
+  mainStore.setCourseTitle(newVal || '')
+})
 // 课程标题相关
 const editingTitle = ref(false)
 const titleInput = ref<HTMLInputElement | null>(null)
@@ -403,6 +406,7 @@ onMounted(() => {
     showCreateCourseDialog.value = true
   }
   ccourseid.value = props.courseid || ''
+  mainStore.setUserid(props.userid || '')
   // 添加点击外部关闭下拉菜单的事件监听
   document.addEventListener('click', handleClickOutside)
 })