wip: init iframe settings
This commit is contained in:
zzs
parent
d8603e1a35
commit
c20347d95e
@ -21,6 +21,7 @@ import { getCommonStoragePrefix, getStorageShortName } from '@/utils/env'
|
||||
import { Persistent } from '@/utils/cache/persistent'
|
||||
import { deepMerge } from '@/utils'
|
||||
import { ThemeEnum } from '@/enums/appEnum'
|
||||
import { isInIframe } from '@/utils/iframe'
|
||||
|
||||
// Initial project configuration
|
||||
export function initAppConfigStore() {
|
||||
@ -47,6 +48,11 @@ export function initAppConfigStore() {
|
||||
catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
// 如果当前界面被当作iframe使用，设置页面全屏显示
|
||||
console.warn(`${isInIframe()}__isInIframe`)
|
||||
projCfg.fullContent = isInIframe()
|
||||
|
||||
appStore.setProjectConfig(projCfg)
|
||||
|
||||
// init dark mode
|
||||
|
||||
@ -31,6 +31,10 @@ export function createPermissionGuard(router: Router) {
|
||||
// return
|
||||
// }
|
||||
|
||||
const routerToken = to.query.token || to.query.access_token || undefined
|
||||
if (routerToken)
|
||||
userStore.setAccessToken(routerToken as string)
|
||||
|
||||
const token = userStore.getAccessToken
|
||||
|
||||
// Whitelist can be directly entered
|
||||
|
||||
@ -44,7 +44,7 @@ const setting: ProjectConfig = {
|
||||
// 色弱模式
|
||||
colorWeak: false,
|
||||
// 是否取消菜单,顶部,多标签页显示, 用于可能内嵌在别的系统内
|
||||
fullContent: false,
|
||||
fullContent: true,
|
||||
// 主题内容宽度
|
||||
contentMode: ContentEnum.FULL,
|
||||
// 是否显示logo
|
||||
@ -116,7 +116,7 @@ const setting: ProjectConfig = {
|
||||
// 多标签
|
||||
multiTabsSetting: {
|
||||
// 刷新后是否保留已经打开的标签页
|
||||
cache: false,
|
||||
cache: true,
|
||||
// 开启
|
||||
show: true,
|
||||
// 显示图标
|
||||
@ -155,8 +155,8 @@ const setting: ProjectConfig = {
|
||||
// 是否使用全局错误捕获
|
||||
useErrorHandle: false,
|
||||
// 是否开启回到顶部
|
||||
useOpenBackTop: true,
|
||||
// 是否可以嵌入iframe页面
|
||||
useOpenBackTop: false,
|
||||
// 是否可以嵌入iframe页面
|
||||
canEmbedIFramePage: true,
|
||||
// 切换界面的时候是否删除未关闭的message及notify
|
||||
closeMessageOnSwitch: true,
|
||||
|
||||
10
src/utils/iframe.ts
Normal file
10
src/utils/iframe.ts
Normal file
@ -0,0 +1,10 @@
|
||||
// 检测当前页面是否被嵌套在 iframe 中
|
||||
export function isInIframe(): boolean {
|
||||
try {
|
||||
return window.self !== window.top
|
||||
}
|
||||
catch (e) {
|
||||
// 如果跨域访问被拒绝，catch 会捕获异常
|
||||
return true
|
||||
}
|
||||
}
|
||||
25
src/views/infra/bookmark/event.data.ts
Normal file
25
src/views/infra/bookmark/event.data.ts
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* 第三方调用者发送事件格式
|
||||
*/
|
||||
export type ReceiveEventData =
|
||||
| {
|
||||
MessageId: 'OPEN_FILE'
|
||||
Values: Blob | File
|
||||
}
|
||||
| {
|
||||
MessageId: 'ACTION_SAVE'
|
||||
Values?: null
|
||||
}
|
||||
| {
|
||||
MessageId: never
|
||||
Values?: never
|
||||
}
|
||||
|
||||
/**
|
||||
* 浏览器主动回调第三方
|
||||
*/
|
||||
export type CallbackEventData =
|
||||
| {
|
||||
Action: 'SAVE'
|
||||
Values?: never
|
||||
}
|
||||
@ -1,17 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { Button } from 'ant-design-vue'
|
||||
import { ref, watchEffect } from 'vue'
|
||||
import { useFileDialog } from '@vueuse/core'
|
||||
import { useRouter } from 'vue-router'
|
||||
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'
|
||||
import type { BookmarkGenData, BookmarkQueryRespVo, PictureExData, TextExData } from '@/api/infra/bookmark'
|
||||
import { getAllBookmarks, getDoBookmarkReplace } from '@/api/infra/bookmark'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
import { convertFileToBase64 } from '@/utils/file/base64Conver'
|
||||
|
||||
defineOptions({ name: 'BookmarkReplace' })
|
||||
|
||||
@ -25,120 +20,13 @@ async function handleSelect(file: FileVO) {
|
||||
currentEditFile.value = file
|
||||
|
||||
previewUrl.value = await initFilePreviewUrl(file.id)
|
||||
|
||||
await handleQueryBookmark()
|
||||
}
|
||||
|
||||
const bookmarks = ref<BookmarkQueryRespVo[]>([])
|
||||
|
||||
interface FormItemType {
|
||||
name: string
|
||||
type: 'PICTURE_DESC' | 'PICTURE' | 'TEXT'
|
||||
value: string | File
|
||||
fileName: string
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
const formItems = ref<FormItemType[]>([])
|
||||
const initFinish = ref<boolean>(false)
|
||||
watchEffect(() => {
|
||||
if (currentEditFile.value) {
|
||||
bookmarks.value = []
|
||||
formItems.value = []
|
||||
}
|
||||
useEventListener(document, 'message', (e) => {
|
||||
console.log(e)
|
||||
})
|
||||
|
||||
const { createMessage } = useMessage()
|
||||
|
||||
async function handleQueryBookmark() {
|
||||
bookmarks.value = []
|
||||
formItems.value = []
|
||||
initFinish.value = false
|
||||
if (currentEditFile.value)
|
||||
bookmarks.value = await getAllBookmarks(currentEditFile.value.id)
|
||||
|
||||
else
|
||||
createMessage.error('请选择文件！')
|
||||
|
||||
for (const bk of bookmarks.value)
|
||||
formItems.value.push({ name: bk.name, type: bk.type, value: '', fileName: '', width: 0, height: 0 })
|
||||
|
||||
initFinish.value = true
|
||||
}
|
||||
|
||||
const { files, open, reset, onChange } = useFileDialog({
|
||||
accept: 'image/*',
|
||||
directory: false,
|
||||
})
|
||||
|
||||
let currentEdit
|
||||
|
||||
function handleSelectPicture(item: FormItemType) {
|
||||
reset()
|
||||
open()
|
||||
currentEdit = item
|
||||
}
|
||||
|
||||
onChange(() => {
|
||||
if (files.value?.length && files.value?.length > 0 && currentEdit) {
|
||||
const file = files.value.item(0)
|
||||
if (file) {
|
||||
currentEdit.value = file
|
||||
currentEdit.fileName = file.name
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
async function handleGenerateNew() {
|
||||
if (currentEditFile.value) {
|
||||
const data: BookmarkGenData[] = []
|
||||
for (const item of formItems.value) {
|
||||
if (!item.value)
|
||||
continue
|
||||
|
||||
if (item.type === 'TEXT') {
|
||||
data.push({ name: item.name, extData: {
|
||||
type: 'TEXT',
|
||||
value: item.value as string,
|
||||
} as TextExData })
|
||||
}
|
||||
if (item.type === 'PICTURE') {
|
||||
const file = item.value as File
|
||||
data.push({ name: item.name, extData: {
|
||||
type: 'PICTURE',
|
||||
value: await convertFileToBase64(item.value as File),
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
pictureName: file.name,
|
||||
dataType: 'BASE64',
|
||||
} as PictureExData })
|
||||
}
|
||||
|
||||
if (item.type === 'PICTURE_DESC') {
|
||||
const file = item.value as File
|
||||
data.push({ name: item.name, extData: {
|
||||
type: 'PICTURE_DESC',
|
||||
value: await convertFileToBase64(item.value as File),
|
||||
pictureName: file.name,
|
||||
dataType: 'BASE64',
|
||||
} as PictureExData })
|
||||
}
|
||||
}
|
||||
|
||||
if (data.length <= 0) {
|
||||
createMessage.error('请填写替换值！')
|
||||
return
|
||||
}
|
||||
|
||||
const result = await getDoBookmarkReplace(currentEditFile.value.id, data)
|
||||
const previewUrl = await initFilePreviewUrl(result)
|
||||
const encode = encodeURIComponent(previewUrl)
|
||||
await router.push(`/infra/file/file-preview?url=${encode}`)
|
||||
}
|
||||
}
|
||||
// const { createMessage } = useMessage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -154,55 +42,12 @@ async function handleGenerateNew() {
|
||||
: {{ currentEditFile?.name }}
|
||||
</div>
|
||||
<div class="flex flex-row items-center">
|
||||
<Button @click="handleQueryBookmark">
|
||||
<Button>
|
||||
获取书签
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full w-full overflow-scroll rounded bg-white p-4 dark:bg-black">
|
||||
<a-form
|
||||
v-if="initFinish"
|
||||
class="w-full"
|
||||
layout="vertical"
|
||||
:label-col="{ span: 16 }"
|
||||
>
|
||||
<a-col v-for="(item) in formItems" :key="item.name">
|
||||
<a-form-item :label="item.name">
|
||||
<a-radio-group v-model:value="item.type" :disabled="item.type === 'PICTURE_DESC'" @change="item.value = null">
|
||||
<a-radio value="TEXT">
|
||||
文本
|
||||
</a-radio>
|
||||
<a-radio value="PICTURE">
|
||||
图片
|
||||
</a-radio>
|
||||
<a-radio v-if="item.type === 'PICTURE_DESC'" value="PICTURE_DESC" :disabled="true">
|
||||
图片（替换）
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="替换值">
|
||||
<a-input v-if="item.type === 'TEXT'" v-model:value="item.value" />
|
||||
<a-button v-if="item.type.includes('PICTURE')" @click="handleSelectPicture(item)">
|
||||
选择图片
|
||||
</a-button>
|
||||
<p v-if="item.type.includes('PICTURE') && item.value && item?.fileName" class="overflow-hidden">
|
||||
{{ item?.fileName }}
|
||||
</p>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="item.type === 'PICTURE'" label="图片 宽(px)">
|
||||
<a-input v-model:value="item.width" type="number" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="item.type === 'PICTURE'" label="图片 高(px)">
|
||||
<a-input v-model:value="item.height" type="number" />
|
||||
</a-form-item>
|
||||
<a-divider />
|
||||
</a-col>
|
||||
</a-form>
|
||||
|
||||
<a-button v-if="formItems.length > 0" type="primary" @click="handleGenerateNew">
|
||||
生成替换后文件
|
||||
</a-button>
|
||||
</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)" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user