CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

我不知道

Browse Source
This commit is contained in:
CrescentLeaf
2025-12-14 00:13:47 +08:00
parent 895ea6e4e1
commit 505e629f30
4 changed files with 122 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/ui/ImageViewer.tsx
View File

@@ -2,18 +2,23 @@ import { Dialog } from 'mdui'
import 'pinch-zoom-element'
import React from "react"
export default function ImageViewer() {
export default function ImageViewer({ ...props }: React.ImgHTMLAttributes<HTMLImageElement>) {
const dialogRef = React.useRef<Dialog>()
return <mdui-dialog ref={dialogRef} fullscreen="fullscreen">
<mdui-button-icon icon="open_in_new"
onclick="window.open(document.querySelector('#image-viewer-dialog-inner > *').src, '_blank')">
<mdui-button-icon icon="open_in_new" onClick={() => window.open(props.src, '_blank')}>
</mdui-button-icon>
<mdui-button-icon icon="close" onClick={() => dialogRef.current!.open = false}>
</mdui-button-icon>
{
// @ts-ignore 注册了这个元素
<pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);"></pinch-zoom>
<pinch-zoom id="image-viewer-dialog-inner" style={{
width: 'var(--whitesilk-window-width)',
height: 'var(--whitesilk-window-height)',
}}>
<img {...props}></img>
{/* @ts-ignore 注册了这个元素 */}
</pinch-zoom>
}
</mdui-dialog>
}