wip: event read

src/api/base/model/uploadModel.ts

@@ -3,3 +3,9 @@ export interface UploadApiResult {
   code: number
   url: string
 }
+
+export interface UploadFullApiResult<T> {
+  msg: string
+  code: number
+  data: T
+}

src/api/base/upload.ts

@@ -1,10 +1,10 @@
 import type { AxiosProgressEvent } from 'axios'
-import type { UploadApiResult } from './model/uploadModel'
+import type { UploadApiResult, UploadFullApiResult } from './model/uploadModel'
 import { defHttp } from '@/utils/http/axios'
-import type { UploadFileParams } from '@/types/axios'
+import type { FileDO, UploadFileParams } from '@/types/axios'
 import { useGlobSetting } from '@/hooks/setting'
 
-const { uploadUrl = '' } = useGlobSetting()
+const { uploadUrl = '', uploadUrlFull } = useGlobSetting()
 
 /**
  * @description: Upload interface
@@ -18,3 +18,12 @@ export function uploadApi(params: UploadFileParams, onUploadProgress: (progressE
     params,
   )
 }
+
+export function uploadOneFile(params: UploadFileParams) {
+  return defHttp.uploadFile<UploadFullApiResult<FileDO>>(
+    {
+      url: uploadUrlFull,
+    },
+    params,
+  )
+}

src/components/IFrame/src/IFrame.vue

@@ -8,6 +8,7 @@ const props = defineProps({
     type: [String, Number],
   },
 })
+
 const loading = ref(true)
 const height = ref<string | number>('')
 const frameRef = ref<null | HTMLIFrameElement>(null)
@@ -25,22 +26,8 @@ onMounted(() => {
   }, 300)
 })
 
-function sendMessageToIframe(message) {
-  if (frameRef.value && frameRef.value.contentWindow)
-    frameRef.value.contentWindow.postMessage(message, '*')
-}
-
 defineExpose({
-  sendMessageToIframe,
-})
-
-onMounted(() => {
-  // 监听响应
-  window.addEventListener('message', (event) => {
-    // 处理响应
-    if (event.data)
-      console.log(event.data)
-  })
+  frameRef,
 })
 </script>
 

src/hooks/setting/index.ts

@@ -26,6 +26,7 @@ export function useGlobSetting(): Readonly<GlobConfig> {
     shortName: VITE_GLOB_APP_SHORT_NAME,
     urlPrefix: VITE_GLOB_API_URL_PREFIX,
     uploadUrl: `${VITE_GLOB_API_URL}/infra/file/upload`,
+    uploadUrlFull: `${VITE_GLOB_API_URL}/infra/file/upload-full`,
     tenantEnable: VITE_GLOB_APP_TENANT_ENABLE,
     captchaEnable: VITE_GLOB_APP_CAPTCHA_ENABLE,
   }

src/logics/initAppConfig.ts

@@ -50,8 +50,8 @@ export function initAppConfigStore() {
   }
 
   // 如果当前界面被当作iframe使用，设置页面全屏显示
-  console.warn(`${isInIframe()}__isInIframe`)
   projCfg.fullContent = isInIframe()
+  projCfg.showSettingButton = !isInIframe()
 
   appStore.setProjectConfig(projCfg)
 

src/settings/projectSetting.ts

@@ -116,7 +116,7 @@ const setting: ProjectConfig = {
   // 多标签
   multiTabsSetting: {
     // 刷新后是否保留已经打开的标签页
-    cache: true,
+    cache: false,
     // 开启
     show: true,
     // 显示图标

src/types/axios.d.ts

@@ -54,3 +54,21 @@ export interface UploadFileParams {
   filename?: string
   [key: string]: any
 }
+
+// 文件完整信息
+export interface FileDO {
+  // 编号，数据库自增
+  id: string
+  // 配置编号 关联 FileConfigDO. getId()
+  configId: string
+  // 原文件名
+  name: string
+  // 路径，即文件名
+  path: string
+  // 访问地址
+  url: string
+  // 文件的 MIME 类型，例如 "application/ octet-stream"
+  type: string
+  // 文件大小
+  size: string
+}

src/types/config.d.ts

@@ -157,6 +157,8 @@ export interface GlobConfig {
   apiUrl: string
   // Upload url
   uploadUrl?: string
+  // Upload url 返回完整文件信息
+  uploadUrlFull?: string
   //  Service interface url prefix
   urlPrefix?: string
   // Project abbreviation

src/utils/file/preview.ts

@@ -4,10 +4,14 @@ import { getAccessToken } from '@/utils/auth'
 /**
  * 获取文件预览地址
  * @param fileId
+ * @param wopi_client
+ * @param wopi_server
  */
-export async function initFilePreviewUrl(fileId: string | number): Promise<string> {
-  const wopi_client = await getConfigKey('wopi_client_addr')
-  const wopi_server = await getConfigKey('wopi_server_ip_addr')
+export async function initFilePreviewUrl(fileId: string | number, wopi_client?: string | undefined, wopi_server?: string | undefined): Promise<string> {
+  if (!wopi_client || !wopi_server) {
+    wopi_client = await getConfigKey('wopi_client_addr')
+    wopi_server = await getConfigKey('wopi_server_ip_addr')
+  }
   const wopi = `${wopi_server}/admin-api/infra/file/preview/wopi/files/${fileId}?access_token=${getAccessToken()}`
   return `${wopi_client}?lang=zh-cn&WOPISrc=${encodeURIComponent(wopi)}`
 }

src/views/infra/bookmark/index.vue

@@ -1,60 +1,70 @@
 <script setup lang="ts">
-import { Button } from 'ant-design-vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { IFrame } from '@/components/IFrame'
-import { FileSelectModal } from '@/components/FileSelect'
-import { useModal } from '@/components/Modal'
-import type { FileVO } from '@/api/infra/file'
+
+import { isInIframe } from '@/utils/iframe'
+
+// import { useMessage } from '@/hooks/web/useMessage'
+import { uploadOneFile } from '@/api/base/upload'
 import { initFilePreviewUrl } from '@/utils/file/preview'
 
+import { getConfigKey } from '@/api/infra/config'
+
 defineOptions({ name: 'BookmarkReplace' })
+const isEmbed = isInIframe()
 
 const previewUrl = ref<string | undefined>(undefined)
 
-const [registerModal, { openModal }] = useModal()
+// const { createMessage } = useMessage()
 
-const currentEditFile = ref<FileVO | undefined>(undefined)
+const wopi_client = ref(undefined)
+const wopi_server = ref(undefined)
 
-async function handleSelect(file: FileVO) {
-  currentEditFile.value = file
+onMounted(async () => {
+  wopi_client.value = await getConfigKey('wopi_client_addr')
+  wopi_server.value = await getConfigKey('wopi_server_ip_addr')
 
-  previewUrl.value = await initFilePreviewUrl(file.id)
-}
+  useEventListener(window, 'message', async (e: MessageEvent) => {
+    logEvent(e)
+    const ActionId = e.data.ActionId
 
-useEventListener(document, 'message', (e) => {
-  console.log(e)
+    // 第三方调用发送的Event
+    switch (ActionId) {
+      case 'FILE_BINARY':
+        await handleFileBinary(e)
+        break
+    }
+  })
 })
 
-// const { createMessage } = useMessage()
+async function handleFileBinary(e: MessageEvent) {
+  const { name, type, buffer } = e.data.Payload
+  const blob = new Blob([buffer], { type })
+  const uploadResult = await uploadOneFile({
+    filename: name,
+    file: new File([blob], name, { type }),
+  })
+  const fileId = uploadResult.data.data.id
+  previewUrl.value = await initFilePreviewUrl(fileId, wopi_client.value, wopi_server.value)
+}
+
+function logEvent(e: MessageEvent) {
+  console.log('=============receive message start=======')
+  console.log(e.data)
+  console.log(e.origin)
+  console.log('=============receive message end==========')
+}
 </script>
 
 <template>
   <div>
-    <div class="flex flex-col p-2 pt-4">
-      <div class="h-[calc(100vh-105px)] w-full flex flex-row">
-        <div class="mr-2 h-full w-25% flex flex-col">
-          <div class="mb-2 flex flex-row items-center justify-between rounded bg-white px-2 py-2 dark:bg-black">
-            <div class="flex flex-row items-center">
-              <Button type="primary" class="mr-2" @click="openModal()">
-                选择文件
-              </Button>
-              : {{ currentEditFile?.name }}
-            </div>
-            <div class="flex flex-row items-center">
-              <Button>
-                获取书签
-              </Button>
-            </div>
-          </div>
-          <div class="h-full w-full overflow-scroll rounded bg-white p-4 dark:bg-black" />
-        </div>
-        <div class="w-75% flex flex-row bg-white dark:bg-black">
-          <i-frame v-if="previewUrl" class="w-full bg-white dark:bg-black" :src="previewUrl" height="calc(100vh - 105px)" />
+    <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" class="w-full bg-white dark:bg-black" :src="previewUrl" :height="isEmbed ? 'calc(100vh)' : 'calc(100vh) - 105px'" />
         </div>
       </div>
     </div>
-
-    <FileSelectModal v-bind="$attrs" @register="registerModal" @select="handleSelect" />
   </div>
 </template>