web-view-antd/src/views/infra/bookmark/index.vue

<script setup lang="ts">
import { Button } from 'ant-design-vue'
import { 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 { initFilePreviewUrl } from '@/utils/file/preview'

defineOptions({ name: 'BookmarkReplace' })

const previewUrl = ref<string | undefined>(undefined)

const [registerModal, { openModal }] = useModal()

const currentEditFile = ref<FileVO | undefined>(undefined)

async function handleSelect(file: FileVO) {
  currentEditFile.value = file

  previewUrl.value = await initFilePreviewUrl(file.id)
}

useEventListener(document, 'message', (e) => {
  console.log(e)
})

// const { createMessage } = useMessage()
</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>
      </div>
    </div>

    <FileSelectModal v-bind="$attrs" @register="registerModal" @select="handleSelect" />
  </div>
</template>