wip: load file and replace
This commit is contained in:
zzs
parent
68c77b35d7
commit
e502cf6881
@ -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>
|
||||
|
||||
@ -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,27 +50,37 @@ 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
|
||||
}
|
||||
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
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -76,18 +89,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 +147,6 @@ function cleanup() {
|
||||
* 下载当前编辑的文件，发送给调用者
|
||||
*/
|
||||
async function downloadAndSendCurrentEditFile() {
|
||||
console.warn('downloadAndSendCurrentEditFile')
|
||||
|
||||
if (!currentEditFile.value)
|
||||
return
|
||||
try {
|
||||
@ -173,10 +182,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,21 +195,61 @@ 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(`消息发送失败，查看控制台日志！`)
|
||||
// }
|
||||
// }
|
||||
function sendMessageToWopiClient(data: any) {
|
||||
try {
|
||||
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)
|
||||
createMessage.error(`消息发送失败，查看控制台日志！`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送消息给第三方调用者
|
||||
@ -209,7 +258,11 @@ async function handleFileBinary(e: MessageEvent) {
|
||||
function sendMessageToCaller(data: any) {
|
||||
try {
|
||||
const targetWindow = window.parent
|
||||
targetWindow.postMessage(data, '*')
|
||||
if (typeof data === 'string')
|
||||
targetWindow.postMessage(data, '*')
|
||||
|
||||
if (typeof data === 'object')
|
||||
targetWindow.postMessage(JSON.stringify(data), '*')
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e)
|
||||
@ -217,6 +270,27 @@ function sendMessageToCaller(data: any) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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),
|
||||
Payload: jsonData,
|
||||
})
|
||||
}
|
||||
else {
|
||||
console.error(data)
|
||||
createMessage.error(`执行Python脚本失败: ${data.Values.result.value}`)
|
||||
}
|
||||
}
|
||||
|
||||
function logEvent(e: MessageEvent) {
|
||||
console.log('=============receive message start=======')
|
||||
console.log(e.data)
|
||||
@ -229,7 +303,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>
|
||||
|
||||
22
src/views/infra/bookmark/logic.ts
Normal file
22
src/views/infra/bookmark/logic.ts
Normal file
@ -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)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user