diff --git a/frontend/app/agency/creators/page.tsx b/frontend/app/agency/creators/page.tsx index 5fc8ef0..6e1a162 100644 --- a/frontend/app/agency/creators/page.tsx +++ b/frontend/app/agency/creators/page.tsx @@ -21,7 +21,11 @@ import { ChevronRight, PlusCircle, UserPlus, - AlertCircle + AlertCircle, + MessageSquareText, + Trash2, + FolderPlus, + X } from 'lucide-react' // 任务进度阶段 @@ -65,8 +69,17 @@ interface Creator { trend: 'up' | 'down' | 'stable' joinedAt: string tasks: CreatorTask[] + remark?: string // 备注 } +// 模拟项目列表(用于分配达人) +const mockProjects = [ + { id: 'proj-001', name: 'XX品牌618推广' }, + { id: 'proj-002', name: '口红系列推广' }, + { id: 'proj-003', name: 'XX运动品牌' }, + { id: 'proj-004', name: '护肤品秋季活动' }, +] + // 模拟达人列表 const mockCreators: Creator[] = [ { @@ -158,6 +171,20 @@ export default function AgencyCreatorsPage() { const [creators, setCreators] = useState(mockCreators) const [copiedId, setCopiedId] = useState(null) + // 操作菜单状态 + const [openMenuId, setOpenMenuId] = useState(null) + + // 备注弹窗状态 + const [remarkModal, setRemarkModal] = useState<{ open: boolean; creator: Creator | null }>({ open: false, creator: null }) + const [remarkText, setRemarkText] = useState('') + + // 删除确认弹窗状态 + const [deleteModal, setDeleteModal] = useState<{ open: boolean; creator: Creator | null }>({ open: false, creator: null }) + + // 分配项目弹窗状态 + const [assignModal, setAssignModal] = useState<{ open: boolean; creator: Creator | null }>({ open: false, creator: null }) + const [selectedProject, setSelectedProject] = useState('') + const filteredCreators = creators.filter(creator => creator.name.toLowerCase().includes(searchQuery.toLowerCase()) || creator.creatorId.toLowerCase().includes(searchQuery.toLowerCase()) @@ -227,6 +254,55 @@ export default function AgencyCreatorsPage() { setInviteResult(null) } + // 打开备注弹窗 + const handleOpenRemark = (creator: Creator) => { + setRemarkText(creator.remark || '') + setRemarkModal({ open: true, creator }) + setOpenMenuId(null) + } + + // 保存备注 + const handleSaveRemark = () => { + if (remarkModal.creator) { + setCreators(prev => prev.map(c => + c.id === remarkModal.creator!.id ? { ...c, remark: remarkText } : c + )) + } + setRemarkModal({ open: false, creator: null }) + setRemarkText('') + } + + // 打开删除确认 + const handleOpenDelete = (creator: Creator) => { + setDeleteModal({ open: true, creator }) + setOpenMenuId(null) + } + + // 确认删除 + const handleConfirmDelete = () => { + if (deleteModal.creator) { + setCreators(prev => prev.filter(c => c.id !== deleteModal.creator!.id)) + } + setDeleteModal({ open: false, creator: null }) + } + + // 打开分配项目弹窗 + const handleOpenAssign = (creator: Creator) => { + setSelectedProject('') + setAssignModal({ open: true, creator }) + setOpenMenuId(null) + } + + // 确认分配项目 + const handleConfirmAssign = () => { + if (assignModal.creator && selectedProject) { + const project = mockProjects.find(p => p.id === selectedProject) + alert(`已将达人「${assignModal.creator.name}」分配到项目「${project?.name}」`) + } + setAssignModal({ open: false, creator: null }) + setSelectedProject('') + } + return (
{/* 页面标题 */} @@ -355,7 +431,17 @@ export default function AgencyCreatorsPage() { {creator.avatar}
-
{creator.name}
+
+ {creator.name} + {creator.remark && ( + + 有备注 + + )} +
+ {creator.remark && ( +

{creator.remark}

+ )} {hasActiveTasks && ( +
+ + {/* 下拉菜单 */} + {openMenuId === creator.id && ( +
+ + + +
+ )} +
{/* 展开的任务列表 */} @@ -542,6 +663,123 @@ export default function AgencyCreatorsPage() {
+ + {/* 备注弹窗 */} + { setRemarkModal({ open: false, creator: null }); setRemarkText(''); }} + title={`${remarkModal.creator?.remark ? '编辑' : '添加'}备注 - ${remarkModal.creator?.name}`} + > +
+
+ +