feat(PPTFrameElement): 添加isDone属性并优化iframe处理逻辑

添加isDone属性到PPTFrameElement接口以跟踪iframe加载状态
修改processIframeLinks函数，简化iframe处理逻辑
优化BaseFrameElement.vue中的代码格式和脚本注入逻辑

src/types/slides.ts

@@ -649,7 +649,8 @@ export interface PPTFrameElement extends PPTBaseElement {
   type: 'frame'
   url: string
   isHTML?: boolean,
-  toolType?: number
+  toolType?: number,
+  isDone?: boolean,
 }
 
 export type PPTElement = PPTTextElement | PPTImageElement | PPTShapeElement | PPTLineElement | PPTChartElement | PPTTableElement | PPTLatexElement | PPTVideoElement | PPTAudioElement | PPTFrameElement

src/views/Student/index.vue

@@ -1457,7 +1457,8 @@ const processIframeLinks = async () => {
               // 检查是否是iframe元素
               if (element.type === ElementTypes.FRAME && element.url) {
                 const { element: updatedElement, hasIframe: updatedHasIframe } = await elementDone(element, slideIndex)
-                hasIframe = updatedHasIframe
+                // hasIframe = updatedHasIframe
+                hasIframe = true
                 console.log('更新后的iframe元素:', updatedElement)
                 return {
                   ...updatedElement,

src/views/components/element/FrameElement/BaseFrameElement.vue

@@ -96,11 +96,11 @@
   </div>
 </template>
   
-  <script lang="ts" setup>
-import type { PropType } from "vue";
-import type { PPTFrameElement } from "@/types/slides";
-import { lang } from "@/main";
-import { ref, watch, nextTick } from "vue";
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { PPTFrameElement } from '@/types/slides'
+import { lang } from '@/main'
+import { ref, watch, nextTick } from 'vue'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -120,10 +120,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
 // 用于强制刷新iframe的key
-const iframeKey = ref(0);
+const iframeKey = ref(0)
 
 // 监听elementInfo.url的变化
 watch(
@@ -131,89 +131,90 @@ watch(
   (newUrl, oldUrl) => {
     if (newUrl !== oldUrl) {
       // 通过改变key来强制刷新iframe
-      iframeKey.value++;
+      iframeKey.value++
     }
   }
-);
+)
 
 
 
 const width = computed(() => {
-  return props.elementInfo.width * props.scale;
+  return props.elementInfo.width * props.scale
 })
 
 const height = computed(() => {
-  return props.elementInfo.height * props.scale;
+  return props.elementInfo.height * props.scale
 })
 
 const left = computed(() => {
-  return props.elementInfo.left * props.scale;
+  return props.elementInfo.left * props.scale
 })
 
 const top = computed(() => {
-  return props.elementInfo.top * props.scale;
+  return props.elementInfo.top * props.scale
 })
 
 
 // 获取类型标签
 const getTypeLabel = (type: number): string => {
   const typeMap: Record<number, keyof typeof lang> = {
-    45: "ssChoiceQ",
-    15: "ssEssayQ",
-    72: "ssAIApp",
-    73: "ssH5Page",
-    74: "ssVideo",
-    75: lang.lang == "cn" ? "ssBiliVideo" : "ssYouTube",
-    76: "ssCreateSpace",
-  };
-  const key = typeMap[type];
-  return (key ? lang[key] : lang.ssUnknown) as string;
-};
+    45: 'ssChoiceQ',
+    15: 'ssEssayQ',
+    72: 'ssAIApp',
+    73: 'ssH5Page',
+    74: 'ssVideo',
+    75: lang.lang == 'cn' ? 'ssBiliVideo' : 'ssYouTube',
+    76: 'ssCreateSpace',
+  }
+  const key = typeMap[type]
+  return (key ? lang[key] : lang.ssUnknown) as string
+}
 
 // 处理iframe加载完成事件
 const handleIframeLoad = async (event: Event) => {
-  const iframe = event.target as HTMLIFrameElement;
+  const iframe = event.target as HTMLIFrameElement
 
   try {
     // 等待iframe完全加载
-    await nextTick();
+    await nextTick()
     setTimeout(async () => {
       // 检查iframe是否可访问（同源检查）
       if (iframe.contentWindow && iframe.contentDocument) {
-        const iframeDoc = iframe.contentDocument;
+        const iframeDoc = iframe.contentDocument
         const iframeHead =
-          iframeDoc.head || iframeDoc.getElementsByTagName("head")[0];
+          iframeDoc.head || iframeDoc.getElementsByTagName('head')[0]
 
         if (iframeHead) {
           // 使用动态导入获取JS文件内容
           const jsFiles = [
             {
-              id: "aws-sdk",
-              importPath: () => import("./aws-sdk-2.235.1.min.js?raw"),
+              id: 'aws-sdk',
+              importPath: () => import('./aws-sdk-2.235.1.min.js?raw'),
             },
             {
-              id: "jquery",
-              importPath: () => import("./jquery-3.6.0.min.js?raw"),
+              id: 'jquery',
+              importPath: () => import('./jquery-3.6.0.min.js?raw'),
             },
-            { id: "jietu", importPath: () => import("./jietu.js?raw") },
-          ];
+            { id: 'jietu', importPath: () => import('./jietu.js?raw') },
+          ]
 
           for (const jsFile of jsFiles) {
             try {
               // 检查是否已经注入过
               if (!iframeDoc.getElementById(jsFile.id)) {
-                const jsModule = await jsFile.importPath();
-                const jsContent = jsModule.default || jsModule;
+                const jsModule = await jsFile.importPath()
+                const jsContent = jsModule.default || jsModule
 
-                const scriptElement = iframeDoc.createElement("script");
-                scriptElement.id = jsFile.id;
-                scriptElement.textContent = jsContent;
-                iframeHead.appendChild(scriptElement);
+                const scriptElement = iframeDoc.createElement('script')
+                scriptElement.id = jsFile.id
+                scriptElement.textContent = jsContent
+                iframeHead.appendChild(scriptElement)
 
-                console.log(`已注入 ${jsFile.id} 到iframe中`);
+                console.log(`已注入 ${jsFile.id} 到iframe中`)
               }
-            } catch (fetchError) {
-              console.error(`获取 ${jsFile.id} 失败:`, fetchError);
+            }
+            catch (fetchError) {
+              console.error(`获取 ${jsFile.id} 失败:`, fetchError)
             }
           }
 
@@ -222,19 +223,22 @@ const handleIframeLoad = async (event: Event) => {
             iframe.contentWindow.eval(`
                 console.log('iframe中的JS环境已准备就绪');
                 // 这里可以添加一些初始化代码
-              `);
-          } catch (evalError) {
-            console.warn("无法在iframe中执行代码:", evalError);
+              `)
+          }
+          catch (evalError) {
+            console.warn('无法在iframe中执行代码:', evalError)
           }
         }
-      } else {
-        console.warn("无法访问iframe内容，可能是跨域限制");
       }
-    }, 1000);
-  } catch (error) {
-    console.error("注入JS到iframe失败:", error);
+      else {
+        console.warn('无法访问iframe内容，可能是跨域限制')
+      }
+    }, 1000)
   }
-};
+  catch (error) {
+    console.error('注入JS到iframe失败:', error)
+  }
+}
 </script>
   
   <style lang="scss" scoped>