119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
import { UnifiedModal } from '../common/UnifiedModal';
|
|
import type { CanvasLayer } from './ImageCanvasEditorTypes';
|
|
import { formatTaskIdForDisplay } from './ImageCanvasExportModel';
|
|
import {
|
|
formatLayerImageType,
|
|
getEditorImageModelDisplayName,
|
|
} from './ImageCanvasGenerationModel';
|
|
import { formatCanvasDurationMetric } from './ImageCanvasMediaModel';
|
|
|
|
export type ImageCanvasMetadataModalViewProps = {
|
|
layer: CanvasLayer | null;
|
|
onClose: () => void;
|
|
};
|
|
|
|
function formatReferenceType(refType: 'project-resource' | 'asset') {
|
|
return refType === 'project-resource' ? '项目资源' : '素材';
|
|
}
|
|
|
|
function formatLayerDurationForDisplay(layer: CanvasLayer) {
|
|
return formatCanvasDurationMetric(layer.durationSeconds).replace(
|
|
/^时长\s*/u,
|
|
'',
|
|
);
|
|
}
|
|
|
|
export function ImageCanvasMetadataModalView({
|
|
layer,
|
|
onClose,
|
|
}: ImageCanvasMetadataModalViewProps) {
|
|
const mediaLabel =
|
|
layer?.mediaType === 'audio'
|
|
? '音频'
|
|
: layer?.mediaType === 'video'
|
|
? '视频'
|
|
: layer?.mediaType === 'image-sequence'
|
|
? '序列帧'
|
|
: '图片';
|
|
|
|
return (
|
|
<UnifiedModal
|
|
open={Boolean(layer)}
|
|
title={`${mediaLabel}信息`}
|
|
size="sm"
|
|
closeLabel={`关闭${mediaLabel}信息`}
|
|
onClose={onClose}
|
|
panelClassName="image-canvas-editor__metadata-dialog"
|
|
bodyClassName="image-canvas-editor__metadata-body"
|
|
>
|
|
{layer ? (
|
|
<dl className="image-canvas-editor__metadata-grid">
|
|
<dt>{mediaLabel}类型</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.refType}-${reference.refId}`}
|
|
className="image-canvas-editor__metadata-reference-card"
|
|
>
|
|
<span className="image-canvas-editor__metadata-reference-copy">
|
|
<span className="image-canvas-editor__metadata-input-title">
|
|
{reference.title}
|
|
</span>
|
|
<span>{reference.label}</span>
|
|
<span className="image-canvas-editor__metadata-reference-id">
|
|
{formatReferenceType(reference.refType)} ·{' '}
|
|
{reference.refId}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
) : (
|
|
'-'
|
|
)}
|
|
</dd>
|
|
<dt>Model</dt>
|
|
<dd>{layer.model ? getEditorImageModelDisplayName(layer.model) : '-'}</dd>
|
|
{layer.mediaType === 'audio' ? (
|
|
<>
|
|
<dt>时长</dt>
|
|
<dd>
|
|
{formatLayerDurationForDisplay(layer)}
|
|
</dd>
|
|
</>
|
|
) : (
|
|
<>
|
|
<dt>Resolution</dt>
|
|
<dd>
|
|
{layer.originalWidth} x {layer.originalHeight} px
|
|
</dd>
|
|
</>
|
|
)}
|
|
<dt>Task</dt>
|
|
<dd>{formatTaskIdForDisplay(layer.taskId)}</dd>
|
|
</dl>
|
|
) : null}
|
|
</UnifiedModal>
|
|
);
|
|
}
|