fix: 增加剪贴板粘贴图片
This commit is contained in:
parent
47e3d298bc
commit
1aa2a29ae5
|
|
@ -50,11 +50,41 @@ export const BgPaddingMultiSelect: React.FC<BgPaddingMultiSelectProps> = ({ valu
|
||||||
onChange(newArr);
|
onChange(newArr);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 处理从剪贴板读取图片
|
||||||
|
const handlePasteFromClipboard = async () => {
|
||||||
|
if (!navigator.clipboard || !navigator.clipboard.read) {
|
||||||
|
alert('当前浏览器不支持剪贴板图片读取');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const items = await navigator.clipboard.read();
|
||||||
|
for (const item of items) {
|
||||||
|
for (const type of item.types) {
|
||||||
|
if (type.startsWith('image/')) {
|
||||||
|
const blob = await item.getType(type);
|
||||||
|
const file = new File([blob], `clipboard-image-${Date.now()}.png`, { type: blob.type });
|
||||||
|
const newItem = { file, text: file.name.replace(/\.[^.]+$/, '') };
|
||||||
|
onChange([...value, newItem]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
alert('剪贴板中没有图片');
|
||||||
|
} catch (err) {
|
||||||
|
alert('读取剪贴板图片失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn('space-y-4 flex flex-col gap-2', className)}>
|
<div className={cn('space-y-4 flex flex-col gap-2', className)}>
|
||||||
|
<div className='flex gap-2'>
|
||||||
<Button type='button' onClick={handleAddClick} variant='outline'>
|
<Button type='button' onClick={handleAddClick} variant='outline'>
|
||||||
添加图片
|
本地选择图片
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button type='button' onClick={handlePasteFromClipboard} variant='outline'>
|
||||||
|
从剪贴板读取
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
<Input type='file' accept='image/*' multiple ref={fileInputRef} style={{ display: 'none' }} onChange={handleFilesChange} />
|
<Input type='file' accept='image/*' multiple ref={fileInputRef} style={{ display: 'none' }} onChange={handleFilesChange} />
|
||||||
<div className='space-y-6'>
|
<div className='space-y-6'>
|
||||||
{value.map((item, idx) => (
|
{value.map((item, idx) => (
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from 'react';
|
import React from 'react';
|
||||||
import { Button } from '../ui/button';
|
import { Button } from '../ui/button';
|
||||||
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
|
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
|
||||||
import { X } from 'lucide-react';
|
import { X } from 'lucide-react';
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@ import ClothingCard from './components/ClothingCard';
|
||||||
import {
|
import {
|
||||||
api,
|
api,
|
||||||
type Body_async_cloud_change_bg_v3_api_v3_cloud_batch_change_bg_post,
|
type Body_async_cloud_change_bg_v3_api_v3_cloud_batch_change_bg_post,
|
||||||
type Body_async_cloud_gen_images_v3_api_v3_cloud_batch_edit_images_post,
|
|
||||||
type Body_local_cloud_async_change_bg_api_v2_cloud_batch_change_bg_post,
|
type Body_local_cloud_async_change_bg_api_v2_cloud_batch_change_bg_post,
|
||||||
} from '@/api';
|
} from '@/api';
|
||||||
import { type BgPaddingMultiValue } from '@/components/block/BgPaddingMultiSelect';
|
import { type BgPaddingMultiValue } from '@/components/block/BgPaddingMultiSelect';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue