'use client'; import { useEffect, useState } from 'react'; import { Plus, Pencil, Trash2, X, Shield } from 'lucide-react'; import { useMemberStore } from '@/stores/useMemberStore'; import type { RoleItem } from '@/lib/members'; export default function RolesPage() { const { roles, fetchMembers, createRole, updateRole, deleteRole } = useMemberStore(); const [showModal, setShowModal] = useState(false); const [editing, setEditing] = useState(null); useEffect(() => { fetchMembers(); }, [fetchMembers]); return (

角色管理

{roles.length}

{roles.map((role) => (

{role.name} {role.isSystem && ( 系统 )}

{role.description && (

{role.description}

)}

{!role.isSystem && (

)}

))}

{/* Modal */} {showModal && ( setShowModal(false)} onSubmit={(data) => { if (editing) updateRole(editing.id, data); else createRole(data); setShowModal(false); }} /> )}

); } function RoleModal({ initial, onClose, onSubmit }: { initial: RoleItem | null; onClose: () => void; onSubmit: (data: { name: string; description?: string }) => void; }) { const [name, setName] = useState(initial?.name ?? ''); const [description, setDescription] = useState(initial?.description ?? ''); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!name.trim()) return; onSubmit({ name: name.trim(), description: description.trim() || undefined }); }; return (

e.stopPropagation()}>

{initial ? '编辑角色' : '新建角色'}

); }