forked from 77media/video-flow
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import FloatingGlassPanel from './FloatingGlassPanel';
|
|
import { ImageWave } from '@/components/ui/ImageWave';
|
|
import { RoleEntity } from '@/app/service/domain/Entities';
|
|
|
|
interface CharacterLibrarySelectorProps {
|
|
isReplaceLibraryOpen: boolean;
|
|
setIsReplaceLibraryOpen: (open: boolean) => void;
|
|
onSelect: (index: number) => void;
|
|
/** 用户角色库数据 */
|
|
userRoleLibrary: RoleEntity[];
|
|
}
|
|
|
|
export function CharacterLibrarySelector({
|
|
isReplaceLibraryOpen,
|
|
setIsReplaceLibraryOpen,
|
|
onSelect,
|
|
userRoleLibrary = []
|
|
}: CharacterLibrarySelectorProps) {
|
|
// 将 RoleEntity[] 转换为图片URL数组
|
|
const imageUrls = userRoleLibrary.map(role => role.imageUrl);
|
|
|
|
// 如果没有数据，显示空状态
|
|
if (userRoleLibrary.length === 0) {
|
|
return (
|
|
<FloatingGlassPanel
|
|
open={isReplaceLibraryOpen}
|
|
width='90vw'
|
|
panel_style={{ background: 'unset', border: 'unset', backdropFilter: 'unset', boxShadow: 'none' }}
|
|
onClose={() => setIsReplaceLibraryOpen(false)}
|
|
>
|
|
<div className="flex items-center justify-center h-64 text-white/50">
|
|
<p>暂无角色库数据</p>
|
|
</div>
|
|
</FloatingGlassPanel>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<FloatingGlassPanel
|
|
open={isReplaceLibraryOpen}
|
|
width='90vw'
|
|
panel_style={{ background: 'unset', border: 'unset', backdropFilter: 'unset', boxShadow: 'none' }}
|
|
onClose={() => setIsReplaceLibraryOpen(false)}
|
|
>
|
|
{/* 内容 */}
|
|
<ImageWave
|
|
images={imageUrls}
|
|
containerWidth="90vw"
|
|
containerHeight="calc(var(--index) * 15)"
|
|
itemWidth="calc(var(--index) * 2)"
|
|
itemHeight="calc(var(--index) * 12)"
|
|
gap="0.1rem"
|
|
autoAnimate={true}
|
|
autoAnimateInterval={100}
|
|
onClick={(index) => {
|
|
onSelect(index);
|
|
}}
|
|
/>
|
|
</FloatingGlassPanel>
|
|
);
|
|
}
|