cruldra
cace658ac1
双击 profile 值单元格改为打开富编辑弹窗：多行 textarea + Ctrl+V 粘贴截图， ⌘/Ctrl+Enter 或点遮罩保存、Esc 取消。值仍是单个字符串，图片存磁盘 （内容寻址 sha1 命名，去重），值里只留 markdown 引用，不撑大 profiles.json。 折叠单元格显示首行 + 含图时加 🖼 徽标。key/列头仍走原内联输入。 - 抽公用 lib/imagePaste：同步探测(preventDefault) + 异步读取，新建工单改用它、行为不变 - 新增扩展侧 profileAssets handler：存图(image/* 校验)/读图(挡路径穿越) - 新增 useProfileAssets(requestId 关联并发) 与 ProfileCellEditor 弹窗 - 消息两侧同步 profile-asset/save|load|saved|loaded
63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
/**
|
|
* 剪贴板图片提取的公用件，供「新建工单」与 profile 值编辑器共享。
|
|
*
|
|
* 刻意拆成「同步探测」+「异步读取」两步：粘贴的默认行为（把二进制当乱码文本插入）
|
|
* 必须在事件处理里同步 `preventDefault` 才拦得住，而读文件是异步的。所以调用方先用
|
|
* `getPastedImageFiles` 同步拿到图片文件、立刻 preventDefault，再 await `readClipboardImages`。
|
|
*/
|
|
|
|
export interface PastedImage {
|
|
/** e.g. "image/png" */
|
|
mediaType: string
|
|
/** 裸 base64（不含 `data:...;base64,` 前缀） */
|
|
base64: string
|
|
/** `data:...;base64,...` 形式，供 `<img src>` 直接预览 */
|
|
previewDataUrl: string
|
|
}
|
|
|
|
/** 同步从粘贴事件里挑出所有 image/* 文件；无图返回空数组（调用方据此决定是否 preventDefault）。 */
|
|
export function getPastedImageFiles(e: React.ClipboardEvent): File[] {
|
|
const items = e.clipboardData?.items
|
|
if (!items)
|
|
return []
|
|
const files: File[] = []
|
|
for (const item of items) {
|
|
if (item.kind === 'file' && item.type.startsWith('image/')) {
|
|
const f = item.getAsFile()
|
|
if (f)
|
|
files.push(f)
|
|
}
|
|
}
|
|
return files
|
|
}
|
|
|
|
/** 把单个图片文件读成 base64 + data URL；读失败回 null。 */
|
|
export function readClipboardImage(file: File): Promise<PastedImage | null> {
|
|
return new Promise((resolve) => {
|
|
const reader = new FileReader()
|
|
reader.onload = () => {
|
|
const result = reader.result
|
|
if (typeof result !== 'string') {
|
|
resolve(null)
|
|
return
|
|
}
|
|
// result 形如 "data:image/png;base64,iVBORw0K..."
|
|
const commaIdx = result.indexOf(',')
|
|
const header = commaIdx > 0 ? result.slice(0, commaIdx) : ''
|
|
const base64 = commaIdx > 0 ? result.slice(commaIdx + 1) : ''
|
|
const mediaMatch = header.match(/^data:([^;]+);base64$/)
|
|
const mediaType = mediaMatch ? mediaMatch[1] : file.type || 'image/png'
|
|
resolve({ mediaType, base64, previewDataUrl: result })
|
|
}
|
|
reader.onerror = () => resolve(null)
|
|
reader.readAsDataURL(file)
|
|
})
|
|
}
|
|
|
|
/** 批量读取，丢弃读失败的项。 */
|
|
export function readClipboardImages(files: File[]): Promise<PastedImage[]> {
|
|
return Promise.all(files.map(readClipboardImage)).then(
|
|
arr => arr.filter((p): p is PastedImage => p !== null),
|
|
)
|
|
}
|