54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { Empty, Space, Tag, Typography } from 'antd';
|
|
import type { PrivatePortraitProject } from '../../../types';
|
|
|
|
const { Text } = Typography;
|
|
|
|
interface Props {
|
|
items: PrivatePortraitProject[];
|
|
selectedId?: string | null;
|
|
onSelect: (project: PrivatePortraitProject) => void;
|
|
}
|
|
|
|
const PrivatePortraitProjectList: React.FC<Props> = ({ items, selectedId, onSelect }) => {
|
|
if (!items.length) return <Empty description="暂无项目组" />;
|
|
return (
|
|
<Space orientation="vertical" style={{ width: '100%' }} size={10}>
|
|
{items.map((project) => {
|
|
const active = selectedId === project.id;
|
|
return (
|
|
<div
|
|
key={project.id}
|
|
onClick={() => onSelect(project)}
|
|
style={{
|
|
padding: 14,
|
|
borderRadius: 14,
|
|
cursor: 'pointer',
|
|
border: active ? '1px solid #8b5cf6' : '1px solid #e2e8f0',
|
|
background: active ? '#f5f3ff' : '#fff',
|
|
}}
|
|
>
|
|
<Space style={{ width: '100%', justifyContent: 'space-between' }} align="start">
|
|
<div style={{ minWidth: 0 }}>
|
|
<Text strong ellipsis style={{ display: 'block' }}>{project.name}</Text>
|
|
{project.description && <Text type="secondary" ellipsis style={{ display: 'block', fontSize: 12 }}>{project.description}</Text>}
|
|
</div>
|
|
{/* <Tag color={project.status === 'active' ? 'green' : 'processing'}>
|
|
{project.status === 'active' ? '可用' : project.status}
|
|
</Tag> */}
|
|
</Space>
|
|
<Space wrap size={4} style={{ marginTop: 10 }}>
|
|
<Tag>总 {project.assetCount || 0}</Tag>
|
|
<Tag color="green">图 {project.imageAssetCount || 0}</Tag>
|
|
<Tag color="blue">视频 {project.videoAssetCount || 0}</Tag>
|
|
{/* <Tag color="success">Active {project.activeAssetCount || 0}</Tag> */}
|
|
</Space>
|
|
</div>
|
|
);
|
|
})}
|
|
</Space>
|
|
);
|
|
};
|
|
|
|
export default PrivatePortraitProjectList;
|