wip: save file

src/components/IFrame/src/IFrame.vue

@@ -26,9 +26,27 @@ onMounted(() => {
   }, 300)
 })
 
+function sendMessageToIframe(message: any) {
+  console.log('proxy func exec, sendMessageToIframe')
+  if (frameRef.value && frameRef.value.contentWindow) {
+    console.log(`proxy func exec, message send  ${JSON.stringify(message)}`)
+    frameRef.value.contentWindow.postMessage(message, '*')
+  }
+}
+
 defineExpose({
   frameRef,
+  sendMessageToIframe,
 })
+
+// onMounted(() => {
+//   // 监听响应
+//   window.addEventListener('message', (event) => {
+//     // 处理响应
+//     if (event.data)
+//       console.warn(event.data)
+//   })
+// })
 </script>
 
 <template>

src/views/infra/bookmark/index.vue

@@ -14,13 +14,14 @@ import { getConfigKey } from '@/api/infra/config'
 import type { FileDO } from '@/types/axios'
 import { useGlobSetting } from '@/hooks/setting'
 import { getAccessToken } from '@/utils/auth'
+import { extractMethodName } from '@/views/infra/bookmark/logic'
 
 defineOptions({ name: 'BookmarkReplace' })
 const isEmbed = isInIframe()
 const globSetting = useGlobSetting()
 
 const previewUrl = ref<string | undefined>(undefined)
-const frameComponent = ref<{ frameRef: HTMLIFrameElement } | null>(null)
+const iframeRef = ref<InstanceType<typeof IFrame> | null>(null)
 
 const { createMessage } = useMessage()
 
@@ -29,6 +30,8 @@ const wopi_server = ref(undefined)
 
 const editStatus = ref<{ Modified: boolean }>({ Modified: false })
 const currentEditFile = ref<FileDO | undefined>(undefined)
+
+const isPostMessageRead = ref<boolean>(false)
 onMounted(async () => {
   wopi_client.value = await getConfigKey('wopi_client_addr')
   wopi_server.value = await getConfigKey('wopi_server_ip_addr')
@@ -47,25 +50,41 @@ onMounted(async () => {
     if (typeof e.data === 'object')
       data = e.data
 
+    if (!data)
+      return
+
     const ActionId = data.ActionId
     const MessageId = data.MessageId
 
     // 第三方调用发送的Event
     switch (ActionId) {
-      case 'OPEN_FILE':
-        await handleFileBinary(e)
+      case 'OpenFile':
+        await handleFileBinary(data)
+        break
+      case 'QueryAllWithJSON':
+        proxyQueryBookmark()
+        break
+      case 'ReplaceWithJSON':
+        proxyReplaceWithJSON(data)
+        break
+      case 'SaveFile':
+        handleSaveFile()
         break
     }
-    console.warn(`MessageId:${MessageId}`)
     // WOPI Client发送消息
     switch (MessageId) {
       // 更新文档是否被编辑
       case 'Doc_ModifiedStatus':
-        handleUpdateModifiedStatus(e)
+        handleUpdateModifiedStatus(data)
         break
-      // 用户执行了保存报错
+      // 用户执行了保存操作
       case 'UI_Save':
-        console.warn('UI_Save')
+        handleUserSaveOp()
+        break
+      case 'CallPythonScript-Result':
+        handlePythonScriptCallBack(data)
+        break
+      case 'Action_Save_Resp':
         handleUserSaveOp()
         break
     }
@@ -76,18 +95,16 @@ onMounted(async () => {
  * 更新是否编辑状态
  * 保存后会更新是否编辑为否，正常编辑后会更新是否编辑为是
  * 用于区分是否要向第三方发送保存文件的回调
- * @param e
+ * @param data
  */
-function handleUpdateModifiedStatus(e: MessageEvent) {
-  editStatus.value.Modified = JSON.parse(e.data).Values.Modified
+function handleUpdateModifiedStatus(data: any) {
+  editStatus.value.Modified = data.Values.Modified
 }
 
 let pollingInterval: NodeJS.Timeout | null = null
 let lastCallTime: number | null = null
 
 async function handleUserSaveOp() {
-  console.warn('handleUserSaveOp')
-
   // 情况 1: 如果当前状态未修改，直接发送消息
   if (!editStatus.value.Modified) {
     // 下载文件并发送
@@ -136,8 +153,6 @@ function cleanup() {
  * 下载当前编辑的文件，发送给调用者
  */
 async function downloadAndSendCurrentEditFile() {
-  console.warn('downloadAndSendCurrentEditFile')
-
   if (!currentEditFile.value)
     return
   try {
@@ -157,12 +172,12 @@ async function downloadAndSendCurrentEditFile() {
     const arrayBuffer: ArrayBuffer = response.data
 
     sendMessageToCaller({
-      ActionId: 'SAVE_FILE',
+      ActionId: 'SaveFile',
       Payload: {
         name: currentEditFile.value.name,
         buffer: arrayBuffer,
       },
-    })
+    }, true)
   }
   catch (error) {
     console.error('文件下载失败:', error)
@@ -173,10 +188,10 @@ async function downloadAndSendCurrentEditFile() {
 
 /**
  * 第三方上传文件
- * @param e
+ * @param data
  */
-async function handleFileBinary(e: MessageEvent) {
-  const { name, type, buffer } = e.data.Payload
+async function handleFileBinary(data: any) {
+  const { name, type, buffer } = data.Payload
   const blob = new Blob([buffer], { type })
   const uploadResult = await uploadOneFile({
     filename: name,
@@ -186,30 +201,55 @@ async function handleFileBinary(e: MessageEvent) {
   previewUrl.value = await initFilePreviewUrl(currentEditFile.value.id, wopi_client.value, wopi_server.value)
 }
 
+/**
+ * 第三方调用，查询所有书签
+ */
+function proxyQueryBookmark() {
+  sendMessageToWopiClient({
+    MessageId: 'CallPythonScript',
+    SendTime: Date.now(),
+    ScriptFile: 'BookmarkOP.py',
+    Function: 'QueryAllWithJSON',
+  })
+}
+
+/**
+ * 第三方调用，书签替换
+ * @param data
+ */
+function proxyReplaceWithJSON(data: any) {
+  sendMessageToWopiClient({
+    MessageId: 'CallPythonScript',
+    SendTime: Date.now(),
+    ScriptFile: 'BookmarkOP.py',
+    Function: 'ReplaceWithJSON',
+    Values: {
+      params: {
+        type: 'string',
+        value: JSON.stringify(data.Payload),
+      },
+    },
+  })
+}
+
 /**
  * 发送消息给WopiClient
  * 用于执行书签相关操作
  */
-// function sendMessageToWopiClient(data: any) {
-//   if (!frameComponent.value?.frameRef.contentWindow)
-//     createMessage.error('WOPI Client iframe 未就绪')
-//   try {
-//     frameComponent.value?.frameRef.contentWindow?.postMessage(data, '*')
-//   }
-//   catch (e) {
-//     console.error(e)
-//     createMessage.error(`消息发送失败，查看控制台日志！`)
-//   }
-// }
-
-/**
- * 发送消息给第三方调用者
- * 用于转发部分WopiClient回调
- */
-function sendMessageToCaller(data: any) {
+function sendMessageToWopiClient(data: any) {
   try {
-    const targetWindow = window.parent
-    targetWindow.postMessage(data, '*')
+    if (!isPostMessageRead.value) {
+      console.log('Host准备好！')
+      iframeRef.value?.sendMessageToIframe(JSON.stringify({
+        MessageId: 'Host_PostmessageReady',
+        SendTime: Date.now(),
+      }))
+      isPostMessageRead.value = true
+    }
+
+    iframeRef.value?.sendMessageToIframe(JSON.stringify(data))
+    console.log('已向WOPI_Client发送消息')
+    console.log(JSON.stringify(data))
   }
   catch (e) {
     console.error(e)
@@ -217,6 +257,73 @@ function sendMessageToCaller(data: any) {
   }
 }
 
+/**
+ * 发送消息给第三方调用者
+ * 用于转发部分WopiClient回调
+ */
+function sendMessageToCaller(data: any, ignore: boolean = false) {
+  try {
+    const targetWindow = window.parent
+
+    if (ignore) {
+      targetWindow.postMessage(data, '*')
+      return
+    }
+
+    if (typeof data === 'string')
+      targetWindow.postMessage(data, '*')
+
+    if (typeof data === 'object')
+      targetWindow.postMessage(JSON.stringify(data), '*')
+  }
+  catch (e) {
+    console.error(e)
+    createMessage.error(`消息发送失败，查看控制台日志！`)
+  }
+}
+
+/**
+ * Python脚本执行回调
+ * @param data
+ */
+function handlePythonScriptCallBack(data: any) {
+  const Values = data.Values
+  const success = Values.success as boolean
+  const commandName = Values.commandName
+  if (success) {
+    const jsonData = JSON.parse(Values.result.value)
+    sendMessageToCaller({
+      ActionId: extractMethodName(commandName),
+      Success: success,
+      Payload: jsonData,
+      Message: null,
+    })
+  }
+  else {
+    console.error(data)
+    createMessage.error(`执行Python脚本失败: ${data.Values.result.value}`)
+
+    sendMessageToCaller({
+      ActionId: extractMethodName(commandName),
+      Success: success,
+      Payload: null,
+      Message: data.Values.result.value,
+    })
+  }
+}
+
+function handleSaveFile() {
+  sendMessageToWopiClient({
+    MessageId: 'Action_Save',
+    Values: {
+      DontTerminateEdit: true,
+      DontSaveIfUnmodified: false,
+      Notify: true,
+      ExtendedData: '',
+    },
+  })
+}
+
 function logEvent(e: MessageEvent) {
   console.log('=============receive message start=======')
   console.log(e.data)
@@ -229,7 +336,7 @@ function logEvent(e: MessageEvent) {
     <div class="flex flex-col" :class="{ 'p-2 pt-4': !isEmbed }">
       <div class="w-full flex flex-row" :class="{ 'h-[calc(100vh)]': isEmbed, 'h-[calc(100vh-105px)]': !isEmbed }">
         <div class="w-full flex flex-row bg-white dark:bg-black">
-          <i-frame v-if="previewUrl" ref="frameComponent" class="w-full bg-white dark:bg-black" :src="previewUrl" :height="isEmbed ? 'calc(100vh)' : 'calc(100vh) - 105px'" />
+          <i-frame v-if="previewUrl" ref="iframeRef" class="w-full bg-white dark:bg-black" :src="previewUrl" :height="isEmbed ? 'calc(100vh)' : 'calc(100vh) - 105px'" />
         </div>
       </div>
     </div>

src/views/infra/bookmark/logic.ts

@@ -0,0 +1,22 @@
+/**
+ * 从字符串中获取方法名
+ * vnd.sun.star.script:BookmarkOP.py$QueryAllWithJSON?language=Python&location=share
+ * @param input
+ */
+export function extractMethodName(input: string): string | null {
+  // 查找最后一个 $ 的位置
+  const dollarIndex = input.lastIndexOf('$')
+  if (dollarIndex === -1)
+    return null
+
+  // 截取 $ 之后的部分
+  const afterDollar = input.slice(dollarIndex + 1)
+
+  // 查找参数分隔符 ?
+  const questionMarkIndex = afterDollar.indexOf('?')
+
+  // 返回方法名部分
+  return questionMarkIndex === -1
+    ? afterDollar
+    : afterDollar.substring(0, questionMarkIndex)
+}