'use client'; import { useEffect, useMemo, useState } from 'react'; import { Plus, Pencil, Trash2, X, ChevronRight, FolderOpen, Settings, Search } from 'lucide-react'; import { useMemberStore } from '@/stores/useMemberStore'; import { useAuthStore } from '@/stores/useAuthStore'; import { generatePassword, generateUsernameFromName } from '@/lib/members'; import type { Member, Department, PasswordRule } from '@/lib/members'; import { isSystemAdminMember } from '@/lib/member-system'; import { filterMembersForList, getDisplayedAccountPassword, resolveLatestEditingMember } from '@/lib/member-list'; import { RouteGuard } from '@/components/auth/Guard'; export default function MembersPage() { return ( ); } function MembersPageContent() { const { departments, members, roles, passwordRule, fetchMembers, updatePasswordRule, createDepartment, updateDepartment, deleteDepartment, createMember, updateMember, deleteMember } = useMemberStore(); const currentUser = useAuthStore((s) => s.user); const refreshUser = useAuthStore((s) => s.refreshUser); const [activeDeptId, setActiveDeptId] = useState(null); const [nameKeyword, setNameKeyword] = useState(''); const [showMemberModal, setShowMemberModal] = useState(false); const [editingMember, setEditingMember] = useState(null); const [showDeptModal, setShowDeptModal] = useState(false); const [editingDept, setEditingDept] = useState(null); const [expandedDepts, setExpandedDepts] = useState>(new Set(['dept-2'])); const [showPwdRuleModal, setShowPwdRuleModal] = useState(false); useEffect(() => { fetchMembers(); }, [fetchMembers]); const topDepts = useMemo(() => departments.filter((d) => !d.parentId).sort((a, b) => a.order - b.order), [departments]); const childDepts = (parentId: string) => departments.filter((d) => d.parentId === parentId).sort((a, b) => a.order - b.order); const filteredMembers = useMemo(() => { return filterMembersForList({ members, departments, activeDeptId, nameKeyword }); }, [members, departments, activeDeptId, nameKeyword]); const latestEditingMember = useMemo( () => resolveLatestEditingMember(editingMember, members), [editingMember, members], ); const activeDeptName = activeDeptId ? departments.find((d) => d.id === activeDeptId)?.name ?? '全部' : '全部成员'; const roleName = (roleId: string) => roles.find((r) => r.id === roleId)?.name ?? '-'; const toggleExpand = (id: string) => { setExpandedDepts((prev) => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; }); }; return (
{/* Left: Departments */}
部门
{/* All */} {/* Tree */} {topDepts.map((dept) => { const children = childDepts(dept.id); const expanded = expandedDepts.has(dept.id); const count = members.filter((m) => m.departmentId === dept.id || children.some((c) => c.id === m.departmentId)).length; return (
{children.length > 0 && ( )} {children.length === 0 && } setActiveDeptId(dept.id)} className="flex-1">{dept.name} {count}
{expanded && children.map((child) => { const childCount = members.filter((m) => m.departmentId === child.id).length; return (
setActiveDeptId(child.id)} className={`group flex items-center pl-9 pr-4 py-2 text-[12px] cursor-pointer transition-colors ${activeDeptId === child.id ? 'bg-[var(--accent-soft)] text-[var(--accent)] font-medium' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'}`} > {child.name} {childCount}
); })}
); })}
{/* Right: Member list */}

{activeDeptName}

{filteredMembers.length}
setNameKeyword(e.target.value)} placeholder="搜索姓名" className="h-8 w-44 rounded-lg border border-[var(--line)] bg-[var(--bg)] pl-8 pr-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none" />
{filteredMembers.length === 0 ? (

暂无成员

) : (
{filteredMembers.map((m) => ( ))}
姓名 用户名 角色 部门 企业邮箱 操作
{m.name} {m.username ?? '-'} {roleName(m.roleId)} {departments.find((d) => d.id === m.departmentId)?.name ?? '-'} {m.email}
{!isSystemAdminMember(m) && ( )} {isSystemAdminMember(m) && ( 系统账号 )}
)}
{/* Member Modal */} {showMemberModal && ( m.username ?? '')} defaultDeptId={activeDeptId} passwordRule={passwordRule} onClose={() => setShowMemberModal(false)} onSubmit={(data) => { if (editingMember) { updateMember(editingMember.id, data); if (editingMember.id === currentUser?.id) void refreshUser(); } else { createMember(data as any); } setShowMemberModal(false); }} /> )} {/* Department Modal */} {showDeptModal && ( setShowDeptModal(false)} onSubmit={(data) => { if (editingDept) updateDepartment(editingDept.id, data); else createDepartment(data as any); setShowDeptModal(false); }} /> )} {/* Password Rule Modal */} {showPwdRuleModal && ( setShowPwdRuleModal(false)} onSave={(rule) => { updatePasswordRule(rule); setShowPwdRuleModal(false); }} /> )}
); } function MemberModal({ initial, departments, roles, existingUsernames, defaultDeptId, passwordRule, onClose, onSubmit }: { initial: Member | null; departments: Department[]; roles: { id: string; name: string }[]; existingUsernames: string[]; defaultDeptId: string | null; passwordRule: PasswordRule; onClose: () => void; onSubmit: (data: any) => void; }) { const [name, setName] = useState(initial?.name ?? ''); const [departmentId, setDepartmentId] = useState(initial?.departmentId ?? defaultDeptId ?? ''); const [roleId, setRoleId] = useState(initial?.roleId ?? ''); const [email, setEmail] = useState(initial?.email ?? ''); const [generatedPassword] = useState(() => generatePassword(passwordRule)); const password = getDisplayedAccountPassword(initial, generatedPassword); const isSystemMember = initial ? isSystemAdminMember(initial) : false; const usernamePreview = initial ? (initial.username || generateUsernameFromName(initial.name, existingUsernames)) : (name.trim() ? generateUsernameFromName(name, existingUsernames) : ''); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!name.trim() || !departmentId || !roleId) return; const data: Partial = { name: name.trim(), departmentId, roleId, email: email.trim(), password }; if (!initial) { data.username = usernamePreview; data.phone = ''; } onSubmit(data); }; return (
e.stopPropagation()}>

{initial ? '编辑成员' : '新建成员'}

{isSystemMember && (
系统内置超级管理员账号不可删除，姓名、部门、角色固定。
)}
setName(e.target.value)} required disabled={isSystemMember} placeholder="请输入姓名" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none disabled:bg-zinc-50 disabled:text-[var(--ink-soft)]" />
{usernamePreview || '输入姓名后自动生成'} {!initial && ( 自动生成 )}
setEmail(e.target.value)} placeholder="name@company.com" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
{password} {!initial && ( 自动生成 )}
); } function DeptModal({ initial, departments, onClose, onSubmit }: { initial: Department | null; departments: Department[]; onClose: () => void; onSubmit: (data: any) => void; }) { const [name, setName] = useState(initial?.name ?? ''); const [parentId, setParentId] = useState(initial?.parentId ?? ''); const topDepts = departments.filter((d) => !d.parentId); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!name.trim()) return; onSubmit({ name: name.trim(), parentId: parentId || undefined, order: departments.length + 1 }); }; return (
e.stopPropagation()}>

{initial ? '编辑部门' : '新建部门'}

setName(e.target.value)} required placeholder="请输入部门名称" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
); } function PasswordRuleModal({ rule, onClose, onSave }: { rule: PasswordRule; onClose: () => void; onSave: (rule: PasswordRule) => void; }) { const [prefix, setPrefix] = useState(rule.prefix); const [length, setLength] = useState(rule.length); const [includeUppercase, setIncludeUppercase] = useState(rule.includeUppercase); const [includeLowercase, setIncludeLowercase] = useState(rule.includeLowercase); const [includeNumbers, setIncludeNumbers] = useState(rule.includeNumbers); const [includeSpecial, setIncludeSpecial] = useState(rule.includeSpecial); const currentRule: PasswordRule = { prefix, length, includeUppercase, includeLowercase, includeNumbers, includeSpecial }; const preview = generatePassword(currentRule); return (
e.stopPropagation()}>

账号密码规则设置

setPrefix(e.target.value)} placeholder="如 Ftb" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
setLength(Number(e.target.value))} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
{preview}
); }