fix(utils): 修复wujie环境下剪贴板功能兼容性问题

修改clipboardImage方法以支持wujie微前端环境,使用主应用的navigator.clipboard对象
同时优化canvas图片绘制参数,确保图片缩放正确
This commit is contained in:
Phoenix 2025-06-09 14:46:33 +08:00
parent 628894a254
commit 5340461a7e
3 changed files with 12 additions and 7 deletions

View File

@ -68,6 +68,11 @@ export function clipboard(text, callback) {
}
export async function clipboardImage(src, callback) {
// 在wujie环境下使用主应用的clipboard
const clipboardObj = window.__POWERED_BY_WUJIE__
? window.parent.navigator.clipboard
: navigator.clipboard
const { state } = await navigator.permissions.query({
name: 'clipboard-write'
})
@ -80,7 +85,7 @@ export async function clipboardImage(src, callback) {
// navigator.clipboard.write 仅支持 png 图片
if (blob.type == 'image/png') {
await navigator.clipboard.write([
await clipboardObj.write([
new ClipboardItem({
[blob.type]: blob
})
@ -99,13 +104,13 @@ export async function clipboardImage(src, callback) {
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0)
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
canvas.toBlob(
(blob) => {
const data = [new ClipboardItem({ [blob.type]: blob })]
navigator.clipboard
clipboardObj
.write(data)
.then(() => {
callback()

View File

@ -124,7 +124,7 @@ const onCopyText = (data: ITalkRecord) => {
return clipboard(htmlDecode(data.extra.content), () => useMessage.success('复制成功'))
}
}
console.log('data.extra?.url',data.extra?.url)
if (data.extra?.url) {
return clipboardImage(data.extra.url, () => {
useMessage.success('复制成功')

View File

@ -46,9 +46,9 @@ export default defineConfig(({ mode }) => {
vueJsx({}),
compressPlugin(),
UnoCSS(),
vueDevTools({
launchEditor: 'trae',
})
// vueDevTools({
// launchEditor: 'trae',
// })
],
define: {
__APP_ENV__: env.APP_ENV