84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import { UnifiedModal } from '../common/UnifiedModal';
|
|
import { formatLayerImageType } from './ImageCanvasGenerationModel';
|
|
import type { CanvasLayer } from './ImageCanvasEditorTypes';
|
|
|
|
export type ImageCanvasMetadataModalViewProps = {
|
|
layer: CanvasLayer | null;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export function ImageCanvasMetadataModalView({
|
|
layer,
|
|
onClose,
|
|
}: ImageCanvasMetadataModalViewProps) {
|
|
return (
|
|
<UnifiedModal
|
|
open={Boolean(layer)}
|
|
title={layer ? `${layer.title}图片信息` : '图片信息'}
|
|
size="sm"
|
|
closeLabel="关闭图片信息"
|
|
onClose={onClose}
|
|
panelClassName="image-canvas-editor__metadata-dialog"
|
|
bodyClassName="image-canvas-editor__metadata-body"
|
|
>
|
|
{layer ? (
|
|
<dl className="image-canvas-editor__metadata-grid">
|
|
<dt>图片类型</dt>
|
|
<dd>{formatLayerImageType(layer)}</dd>
|
|
<dt>生成输入</dt>
|
|
<dd className="image-canvas-editor__metadata-inputs">
|
|
{layer.generationInputs?.fields.length ||
|
|
layer.generationInputs?.references.length ? (
|
|
<>
|
|
{layer.generationInputs.fields.map((field) => (
|
|
<div
|
|
key={`${field.title}-${field.value}`}
|
|
className="image-canvas-editor__metadata-input-field"
|
|
>
|
|
<span className="image-canvas-editor__metadata-input-title">
|
|
{field.title}
|
|
</span>
|
|
<span>{field.value}</span>
|
|
</div>
|
|
))}
|
|
{layer.generationInputs.references.length ? (
|
|
<div className="image-canvas-editor__metadata-reference-list">
|
|
{layer.generationInputs.references.map((reference) => (
|
|
<div
|
|
key={`${reference.title}-${reference.label}-${reference.src}`}
|
|
className="image-canvas-editor__metadata-reference-card"
|
|
>
|
|
<img src={reference.src} alt="" aria-hidden="true" />
|
|
<span className="image-canvas-editor__metadata-reference-copy">
|
|
<span className="image-canvas-editor__metadata-input-title">
|
|
{reference.title}
|
|
</span>
|
|
<span>{reference.label}</span>
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
) : (
|
|
'-'
|
|
)}
|
|
</dd>
|
|
<dt>Model</dt>
|
|
<dd>{layer.model ?? '-'}</dd>
|
|
<dt>Resolution</dt>
|
|
<dd>
|
|
{layer.originalWidth} x {layer.originalHeight} px
|
|
</dd>
|
|
<dt>Provider</dt>
|
|
<dd>{layer.provider ?? '-'}</dd>
|
|
<dt>Task</dt>
|
|
<dd>{layer.taskId ?? '-'}</dd>
|
|
<dt>Object</dt>
|
|
<dd>{layer.objectKey ?? layer.assetObjectId ?? '-'}</dd>
|
|
</dl>
|
|
) : null}
|
|
</UnifiedModal>
|
|
);
|
|
}
|