Преглед изворни кода

feat(交互工具): 添加编辑工具按钮并优化交互工具处理逻辑

添加画布工具栏中的编辑工具按钮,当幻灯片包含交互工具时显示
优化交互工具处理逻辑,支持刷新iframe内容或更新URL时间戳
lsc пре 2 дана
родитељ
комит
2c129baf3b
2 измењених фајлова са 50 додато и 4 уклоњено
  1. 29 3
      src/components/CollapsibleToolbar/index.vue
  2. 21 1
      src/views/Editor/CanvasTool/index.vue

+ 29 - 3
src/components/CollapsibleToolbar/index.vue

@@ -126,8 +126,10 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
 import useCreateElement from '@/hooks/useCreateElement'
 import useSlideHandler from '@/hooks/useSlideHandler'
+import { useSlidesStore } from '@/store'
 
 interface ContentItem {
   tool?: number
@@ -150,6 +152,9 @@ const isCollapsed = ref(props.defaultCollapsed)
 const activeSubmenu = ref<string | null>(null)
 const contentList = ref<ContentItem[]>([])
 
+const slidesStore = useSlidesStore()
+const { currentSlide } = storeToRefs(slidesStore)
+
 const { createFrameElement } = useCreateElement()
 const { createSlide } = useSlideHandler()
 
@@ -217,10 +222,31 @@ const insertContent = (item: ContentItem) => {
   createFrameElement(item.url, item.tool)
 }
 
-const addContent = (data: ContentItem) => {
+const addContent = (data: ContentItem, type: number) => {
   // contentList.value.push(data)
-  createSlide()
-  insertContent(data)
+  if (type === 2) {
+    const elements = currentSlide.value?.elements || []
+    const frameElement = elements.find((el: any) => el.type === 'frame' && (el.toolType === 45 || el.toolType === 15))
+    if (frameElement) {
+      try {
+        const iframe = document.querySelector(`[data-element-id="${frameElement.id}"] iframe`) as HTMLIFrameElement
+        if (iframe && iframe.contentWindow) {
+          iframe.contentWindow.location.reload()
+        }
+      }
+      catch (error) {
+        slidesStore.updateElement({
+          id: frameElement.id,
+          props: { url: frameElement.url + (frameElement.url.includes('?') ? '&' : '?') + '_t=' + Date.now() }
+        })
+      }
+
+    }
+  }
+  else {
+    createSlide()
+    insertContent(data)
+  }
 }
 
 Object.assign(window, { addContent, loadContentList })

+ 21 - 1
src/views/Editor/CanvasTool/index.vue

@@ -94,6 +94,7 @@
     </div>
 
     <div class="right-handler">
+      <div v-if="hasInteractiveTool" class="handler-item viewport-size edit-tool-btn" @click="editTool">编辑工具</div>
       <IconMinus class="handler-item viewport-size" v-tooltip="'画布缩小(Ctrl + -)'" @click="scaleCanvas('-')" />
       <Popover trigger="click" v-model:value="canvasScaleVisible">
         <template #content>
@@ -126,7 +127,7 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSnapshotStore } from '@/store'
+import { useMainStore, useSnapshotStore, useSlidesStore } from '@/store'
 import { getImageDataURL } from '@/utils/image'
 import type { ShapePoolItem } from '@/configs/shapes'
 import type { LinePoolItem } from '@/configs/lines'
@@ -148,8 +149,10 @@ import Popover from '@/components/Popover.vue'
 import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
 
 const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
 const { creatingElement, creatingCustomShape, showSelectPanel, showSearchPanel, showNotesPanel } = storeToRefs(mainStore)
 const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
+const { currentSlide } = storeToRefs(slidesStore)
 
 const getInitialViewMode = () => {
   const urlParams = new URLSearchParams(window.location.search)
@@ -166,6 +169,23 @@ const getInitialViewMode = () => {
 
 const viewMode = computed(() => getInitialViewMode())
 
+const hasInteractiveTool = computed(() => {
+  const elements = currentSlide.value?.elements || []
+  return elements.some((el: any) => el.type === 'frame' && (el.toolType === 45 || el.toolType === 15))
+})
+
+const editTool = () => {
+  const elements = currentSlide.value?.elements || []
+  const frameElement = elements.find((el: any) => el.type === 'frame' && (el.toolType === 45 || el.toolType === 15))
+  if (frameElement) {
+    interface ParentWindowWithToolList extends Window {
+      toolBtn?: (action: number, id: string) => void;
+    }
+    const parentWindow = window.parent as ParentWindowWithToolList
+    parentWindow?.toolBtn?.(0, frameElement.id || '')
+  }
+}
+
 const { redo, undo } = useHistorySnapshot()
 
 const {