451 lines
30 KiB
TypeScript
451 lines
30 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
import {
|
|
api, type AccountProfile, type ManagedAccountRecord, type PermissionDescriptor, type RoleRecord, type UserRoleAssignmentPreview, type UserRoleView,
|
|
} from '../api'
|
|
import { useStore } from '../store'
|
|
import { Collapsible, Icon } from '@ui'
|
|
import { cellKind, hasSystemAction } from './RolePermissionsPanel'
|
|
import {
|
|
ROLE_PERMISSION_STATES, categoryActions, permissionCategories, stateToValue, valueToState,
|
|
type RolePermissionStateName, type RolePermissionValue,
|
|
} from '../rolePermissions'
|
|
import {
|
|
accountLabel, accountName, clearSelection, copyAssignRequest, createSelection, duplicateNames, isSelected, memberAssignments,
|
|
pageSelectionState, previewAllowsAssign, previewTransition, refreshStateVersions, roleColumnLabel, roleSourceValues, sameNameHint,
|
|
selectPage, selectionCounts, selectionSummary, staleUserIds, toggleOne, type MemberSelection,
|
|
} from '../roleMembers'
|
|
|
|
const emptyProfile = (): AccountProfile => ({ name: '', phone: '', email: '', staffNo: '', department: '', notes: '' })
|
|
const fields: { key: keyof AccountProfile; label: string }[] = [
|
|
{ key: 'name', label: '姓名' }, { key: 'phone', label: '电话' }, { key: 'email', label: '邮箱' },
|
|
{ key: 'staffNo', label: '工号' }, { key: 'department', label: '部门' }, { key: 'notes', label: '备注' },
|
|
]
|
|
|
|
export const credentialLabel = (account: Pick<ManagedAccountRecord, 'initializationState' | 'passwordSet'>) =>
|
|
account.initializationState === 'pending' ? '待可信 owner 初始化' : account.passwordSet ? '已设置密码' : '未设置密码'
|
|
|
|
function ProfileInputs({ profile, onChange, prefix }: { profile: AccountProfile; onChange: (value: AccountProfile) => void; prefix: string }) {
|
|
return <div className="ad-create">{fields.map(field => <div className="ad-row" key={field.key}>
|
|
<label className="lg-label" htmlFor={`${prefix}-${field.key}`}>{field.label}（可空）</label>
|
|
<input id={`${prefix}-${field.key}`} className="lg-input" value={profile[field.key]}
|
|
onChange={event => onChange({ ...profile, [field.key]: event.target.value })} />
|
|
</div>)}</div>
|
|
}
|
|
|
|
export function AccountUsersPanel() {
|
|
const me = useStore(state => state.me)
|
|
const allowed = (action: string) => !!me?.isAdmin || hasSystemAction(me?.systemActions, action)
|
|
const canViewRoles = allowed('system.roles.view')
|
|
const canAssignRoles = canViewRoles && allowed('system.roles.assign')
|
|
const canViewGrants = allowed('system.permissions.view')
|
|
const canManageGrants = canViewGrants && allowed('system.permissions.manage')
|
|
const canCopyRole = canAssignRoles && canManageGrants && allowed('system.roles.manage')
|
|
const [accounts, setAccounts] = useState<ManagedAccountRecord[] | null>(null)
|
|
const [selection, setSelection] = useState<MemberSelection>(createSelection)
|
|
const [known, setKnown] = useState<Record<string, ManagedAccountRecord>>({})
|
|
const [batchOpen, setBatchOpen] = useState(false)
|
|
const [batchRoleId, setBatchRoleId] = useState('')
|
|
const [batchPreview, setBatchPreview] = useState<UserRoleAssignmentPreview[] | null>(null)
|
|
const [copyName, setCopyName] = useState('')
|
|
const [copyDescription, setCopyDescription] = useState('')
|
|
const [copyValues, setCopyValues] = useState<Record<string, RolePermissionValue>>({})
|
|
const [selected, setSelected] = useState<ManagedAccountRecord | null>(null)
|
|
const [roleView, setRoleView] = useState<UserRoleView | null>(null)
|
|
const [fullSourceRole, setFullSourceRole] = useState<RoleRecord | null>(null)
|
|
const [sourceRoleError, setSourceRoleError] = useState('')
|
|
const [roles, setRoles] = useState<RoleRecord[]>([])
|
|
const [roleQuery, setRoleQuery] = useState('')
|
|
const [roleCursor, setRoleCursor] = useState('')
|
|
const [roleTrail, setRoleTrail] = useState<string[]>([])
|
|
const [nextRoleCursor, setNextRoleCursor] = useState('')
|
|
const [roleLoading, setRoleLoading] = useState(false)
|
|
const [catalog, setCatalog] = useState<PermissionDescriptor[]>([])
|
|
const [grants, setGrants] = useState<string[]>([])
|
|
const [authorityEpoch, setAuthorityEpoch] = useState(0)
|
|
const [draft, setDraft] = useState<AccountProfile>(emptyProfile)
|
|
const [newOwner, setNewOwner] = useState('')
|
|
const [newProfile, setNewProfile] = useState<AccountProfile>(emptyProfile)
|
|
const [query, setQuery] = useState('')
|
|
const [mode, setMode] = useState<'exact' | 'fuzzy'>('fuzzy')
|
|
const [field, setField] = useState('default')
|
|
const [status, setStatus] = useState<'all' | 'enabled' | 'disabled'>('all')
|
|
const [cursor, setCursor] = useState('')
|
|
const [trail, setTrail] = useState<string[]>([])
|
|
const [nextCursor, setNextCursor] = useState('')
|
|
const [selectedRoleId, setSelectedRoleId] = useState('')
|
|
const [busy, setBusy] = useState(false)
|
|
const [notice, setNotice] = useState('')
|
|
const [err, setErr] = useState('')
|
|
const sequence = useRef(0)
|
|
const roleSequence = useRef(0)
|
|
const batchSequence = useRef(0)
|
|
const pageIds = (accounts ?? []).map(account => account.userId)
|
|
const pageState = pageSelectionState(selection, pageIds)
|
|
const counts = selectionCounts(selection, pageIds)
|
|
const duplicates = duplicateNames(accounts ?? [])
|
|
const batchReady = !!batchPreview && previewAllowsAssign(batchPreview, selection.ids)
|
|
const batchStale = batchPreview ? staleUserIds(batchPreview) : []
|
|
|
|
const search = async (pageCursor = cursor, afterWrite = false) => {
|
|
const request = ++sequence.current
|
|
try {
|
|
const page = await api.searchAdminUsers({ query: query.trim(), mode, status,
|
|
fields: field === 'default' ? ['owner', 'name', 'userId'] : [field], cursor: pageCursor, limit: 20 })
|
|
if (request !== sequence.current) return
|
|
setAccounts(page.accounts ?? []); setNextCursor(page.nextCursor ?? '')
|
|
setKnown(current => ({ ...current, ...Object.fromEntries((page.accounts ?? []).map(account => [account.userId, account])) }))
|
|
} catch (error) {
|
|
if (request === sequence.current) setErr(afterWrite ? `操作已完成，但用户列表暂未刷新：${String(error)}` : String(error))
|
|
}
|
|
}
|
|
const resetPaging = () => { setCursor(''); setTrail([]) }
|
|
|
|
useEffect(() => {
|
|
const timer = window.setTimeout(() => { void search() }, 180)
|
|
return () => { window.clearTimeout(timer); sequence.current++ }
|
|
}, [query, mode, field, status, cursor])
|
|
|
|
const open = async (account: ManagedAccountRecord) => {
|
|
const request = ++sequence.current
|
|
roleSequence.current++
|
|
setRoleQuery(''); setRoleCursor(''); setRoleTrail([]); setNextRoleCursor(''); setRoleLoading(false)
|
|
setSelected(null); setRoleView(null); setErr(''); setNotice('')
|
|
setCopyName(''); setCopyDescription(''); setCopyValues({}); setFullSourceRole(null); setSourceRoleError('')
|
|
const detailResult = await Promise.allSettled([api.adminGetUser(account.userId)])
|
|
if (request !== sequence.current) return
|
|
if (detailResult[0].status === 'rejected') { setErr(String(detailResult[0].reason)); return }
|
|
const detail = detailResult[0].value
|
|
setSelected(detail); setDraft(detail.profile)
|
|
const [roleResult, catalogResult, grantsResult] = await Promise.allSettled([
|
|
canViewRoles ? api.getUserRole(account.userId) : Promise.resolve(null),
|
|
canViewGrants ? api.permissionCatalog() : Promise.resolve(null),
|
|
canViewGrants ? api.getSystemGrants(account.userId) : Promise.resolve(null),
|
|
])
|
|
if (request !== sequence.current) return
|
|
if (roleResult.status === 'fulfilled' && roleResult.value) {
|
|
const currentRole = roleResult.value as UserRoleView
|
|
setRoleView(currentRole); setSelectedRoleId(currentRole.role?.roleId ?? '')
|
|
if (canCopyRole && currentRole.role) {
|
|
void api.getRole(currentRole.role.roleId).then(role => {
|
|
if (request !== sequence.current) return
|
|
if (Array.isArray(role?.permissions)) setFullSourceRole(role)
|
|
else setSourceRoleError('源角色权限读取不完整，暂不能复制，请重新打开用户')
|
|
}).catch(error => { if (request === sequence.current) setSourceRoleError(`读取源角色权限失败：${String(error)}`) })
|
|
}
|
|
} else { setRoleView(null); setSelectedRoleId('') }
|
|
if (catalogResult.status === 'fulfilled' && catalogResult.value) setCatalog(catalogResult.value)
|
|
else setCatalog([])
|
|
if (grantsResult.status === 'fulfilled' && grantsResult.value) {
|
|
setGrants(grantsResult.value.actions ?? []); setAuthorityEpoch(grantsResult.value.authorityEpoch)
|
|
} else { setGrants([]); setAuthorityEpoch(0) }
|
|
}
|
|
|
|
useEffect(() => {
|
|
if ((!selected && !batchOpen) || !canViewRoles) { setRoles([]); setRoleLoading(false); return }
|
|
const request = ++roleSequence.current
|
|
setRoleLoading(true); setNextRoleCursor('')
|
|
const timer = window.setTimeout(() => {
|
|
void api.listRoles({ query: roleQuery.trim(), mode: 'fuzzy', status: 'enabled', cursor: roleCursor, limit: 50 })
|
|
.then(page => {
|
|
if (request !== roleSequence.current) return
|
|
setRoles(page.roles ?? []); setNextRoleCursor(page.nextCursor ?? ''); setRoleLoading(false)
|
|
})
|
|
.catch(error => { if (request === roleSequence.current) { setErr(String(error)); setRoleLoading(false) } })
|
|
}, 180)
|
|
return () => { window.clearTimeout(timer) }
|
|
}, [selected?.userId, batchOpen, roleQuery, roleCursor, canViewRoles])
|
|
|
|
// 写入成功会推进目录版本，旧页游标随之失效：从第一页重读，刷新失败不改写成功结果。
|
|
const refreshFirst = async () => {
|
|
resetPaging(); setNextCursor('')
|
|
await search('', true)
|
|
}
|
|
|
|
const create = async () => {
|
|
if (!newOwner.trim()) return
|
|
setBusy(true); setErr(''); setNotice('')
|
|
try {
|
|
const account = await api.createManagedUser(newOwner.trim(), newProfile)
|
|
setNewOwner(''); setNewProfile(emptyProfile())
|
|
await open(account)
|
|
setNotice(`已创建 ${account.owner}；账号资料可空，角色另行分配`)
|
|
await refreshFirst()
|
|
} catch (error) { setErr(String(error).includes('409') ? '登录名已存在' : String(error)) }
|
|
finally { setBusy(false) }
|
|
}
|
|
|
|
const saveProfile = async () => {
|
|
if (!selected) return
|
|
const patch: Partial<AccountProfile> = {}
|
|
for (const item of fields) if (draft[item.key] !== selected.profile[item.key]) patch[item.key] = draft[item.key]
|
|
if (!Object.keys(patch).length) { setNotice('资料没有变化'); return }
|
|
setBusy(true); setErr(''); setNotice('')
|
|
try {
|
|
const updated = await api.adminPatchProfile(selected.userId, selected.profileVersion, patch)
|
|
setSelected(updated); setDraft(updated.profile); await refreshFirst(); setNotice('用户资料已保存')
|
|
} catch (error) { setErr(String(error).includes('409') ? '资料版本冲突，请重新打开用户' : String(error)) }
|
|
finally { setBusy(false) }
|
|
}
|
|
|
|
const assignRole = async () => {
|
|
if (!selected || !selectedRoleId) return
|
|
setBusy(true); setErr(''); setNotice('')
|
|
try {
|
|
await api.assignUserRole(selected.userId, selectedRoleId, selected.stateVersion, crypto.randomUUID())
|
|
await open(selected); await refreshFirst(); setNotice('用户角色已替换')
|
|
} catch (error) { setErr(String(error).includes('409') ? '用户状态已变化，请重新打开用户' : String(error)) }
|
|
finally { setBusy(false) }
|
|
}
|
|
|
|
const saveGrants = async () => {
|
|
if (!selected) return
|
|
setBusy(true); setErr(''); setNotice('')
|
|
try {
|
|
const result = await api.replaceSystemGrants(selected.userId, grants, authorityEpoch, crypto.randomUUID())
|
|
setAuthorityEpoch(result.authorityEpoch); setNotice('系统权限已保存')
|
|
} catch (error) { setErr(String(error).includes('final permission manager') ? '不能撤销最后一个有效权限管理者' : String(error)) }
|
|
finally { setBusy(false) }
|
|
}
|
|
|
|
const toggleState = async () => {
|
|
if (!selected) return
|
|
setBusy(true); setErr(''); setNotice('')
|
|
try {
|
|
const updated = await api.adminSetUserEnabled(selected.userId, selected.stateVersion, !selected.enabled)
|
|
setSelected(updated); setNotice(updated.enabled ? '账号已启用；旧会话和 Key 不会恢复' : '账号已停用，旧会话、Key 与进行中的恢复提案已撤销')
|
|
await refreshFirst()
|
|
} catch (error) { setErr(String(error).includes('409') ? '状态版本或最后管理员保护发生冲突，请重新打开用户' : String(error)) }
|
|
finally { setBusy(false) }
|
|
}
|
|
|
|
// 选择集合一旦变化，旧预览不再对应提交集合，必须重新预览。
|
|
const changeSelection = (next: MemberSelection) => {
|
|
batchSequence.current++
|
|
setSelection(next); setBatchPreview(null)
|
|
}
|
|
|
|
const openBatch = () => {
|
|
roleSequence.current++
|
|
setRoleQuery(''); setRoleCursor(''); setRoleTrail([]); setNextRoleCursor('')
|
|
setBatchRoleId(''); setBatchPreview(null); setBatchOpen(true); setErr(''); setNotice('')
|
|
}
|
|
|
|
const closeBatch = () => {
|
|
batchSequence.current++
|
|
setBatchOpen(false); setBatchRoleId(''); setBatchPreview(null)
|
|
}
|
|
|
|
const previewBatch = async (roleId: string, versions = known) => {
|
|
const request = ++batchSequence.current
|
|
setBatchRoleId(roleId); setBatchPreview(null); setErr(''); setNotice('')
|
|
if (!roleId) return
|
|
setBusy(true)
|
|
try {
|
|
const assignments = memberAssignments(selection.ids, roleId,
|
|
Object.fromEntries(Object.values(versions).map(account => [account.userId, account.stateVersion])))
|
|
const previews = await api.previewUserRoleAssignments(assignments)
|
|
if (request === batchSequence.current) setBatchPreview(previews)
|
|
} catch (error) { if (request === batchSequence.current) setErr(error instanceof Error ? error.message : String(error)) }
|
|
finally { setBusy(false) }
|
|
}
|
|
|
|
const refreshBatchVersions = async () => {
|
|
if (!batchPreview) return
|
|
setBusy(true); setErr('')
|
|
try {
|
|
const fresh = { ...known, ...await refreshStateVersions(api, staleUserIds(batchPreview)) }
|
|
setKnown(fresh)
|
|
await previewBatch(batchRoleId, fresh)
|
|
} catch (error) { setErr(String(error)); setBusy(false) }
|
|
}
|
|
|
|
const confirmBatch = async () => {
|
|
if (!batchPreview || !previewAllowsAssign(batchPreview, selection.ids)) return
|
|
const roleName = batchPreview[0]?.targetRoleName ?? ''
|
|
setBusy(true); setErr(''); setNotice('')
|
|
try {
|
|
const assignments = memberAssignments(selection.ids, batchRoleId,
|
|
Object.fromEntries(Object.values(known).map(account => [account.userId, account.stateVersion])))
|
|
const result = await api.assignUserRolesBatch(assignments, crypto.randomUUID())
|
|
changeSelection(clearSelection()); closeBatch()
|
|
await refreshFirst()
|
|
setNotice(`已为 ${result.bindings?.length ?? assignments.length} 人分配角色「${roleName}」`)
|
|
} catch (error) {
|
|
setBatchPreview(null)
|
|
setErr(String(error).includes('409') ? '部分用户状态或目标角色已变化，整批均未写入；选择已保留，请重新预览后再确认' : `整批均未写入：${String(error)}`)
|
|
} finally { setBusy(false) }
|
|
}
|
|
|
|
const copyAndAssign = async () => {
|
|
const source = fullSourceRole
|
|
if (!selected || !source) return
|
|
setErr(''); setNotice('')
|
|
let request
|
|
try {
|
|
request = copyAssignRequest({ idempotencyKey: crypto.randomUUID(), source, name: copyName, description: copyDescription, catalog,
|
|
values: { ...roleSourceValues(source, catalog), ...copyValues }, users: [{ userId: selected.userId, stateVersion: selected.stateVersion }] })
|
|
} catch (error) { setErr(error instanceof Error ? error.message : String(error)); return }
|
|
setBusy(true)
|
|
try {
|
|
const result = await api.createRoleCopyAndAssign(request)
|
|
await open(selected); await refreshFirst()
|
|
setNotice(`已创建新角色「${result.role.name}」并分配给 ${accountLabel(selected)}；新角色独立维护，不再随原角色「${source.name}」更新`)
|
|
} catch (error) {
|
|
setErr(String(error).includes('409') ? '新角色名称已存在，或源角色/用户状态已变化；草稿已保留，请重新打开用户核对后重试' : String(error))
|
|
} finally { setBusy(false) }
|
|
}
|
|
|
|
const roleSearch = () => <div className="ad-row">
|
|
<input className="lg-input" aria-label="搜索可分配角色" placeholder="搜索有效角色" value={roleQuery}
|
|
onChange={event => { setRoleQuery(event.target.value); setRoleCursor(''); setRoleTrail([]); setNextRoleCursor(''); setRoleLoading(true) }} />
|
|
<button className="ad-mini" disabled={roleLoading || !roleTrail.length} onClick={() => { setRoleCursor(roleTrail[roleTrail.length - 1]); setRoleTrail(roleTrail.slice(0, -1)) }}>上一页角色</button>
|
|
<button className="ad-mini" disabled={roleLoading || !nextRoleCursor} onClick={() => { setRoleTrail([...roleTrail, roleCursor]); setRoleCursor(nextRoleCursor) }}>下一页角色</button>
|
|
</div>
|
|
|
|
const copyForm = (source: RoleRecord) => {
|
|
const baseline = roleSourceValues(source, catalog)
|
|
const valueOf = (actionId: string) => copyValues[actionId] ?? baseline[actionId]
|
|
const adjusted = Object.keys(baseline).filter(actionId => {
|
|
const value = valueOf(actionId)
|
|
return value.allowed !== baseline[actionId].allowed || value.capAllowed !== baseline[actionId].capAllowed
|
|
}).length
|
|
const setValue = (actionId: string, value: RolePermissionValue) => setCopyValues(current => ({ ...current, [actionId]: value }))
|
|
return <div className="au-copy">
|
|
<p className="ad-hint">以「{source.name}」的当前权限为起点创建新角色，并把 {accountLabel(selected!)} 换绑到新角色。新角色独立维护，不再随原角色更新。</p>
|
|
<div className="ad-row">
|
|
<input className="lg-input" aria-label="新角色名称（必填）" placeholder="新角色名称（必填）" value={copyName} disabled={busy} onChange={event => setCopyName(event.target.value)} />
|
|
<input className="lg-input" aria-label="新角色描述" placeholder="描述（可空）" value={copyDescription} disabled={busy} onChange={event => setCopyDescription(event.target.value)} />
|
|
</div>
|
|
{permissionCategories(catalog).map(category => <fieldset className="au-copy-group" key={category}>
|
|
<legend>{category}</legend>
|
|
{categoryActions(catalog, category).map(item => {
|
|
const value = valueOf(item.actionId)
|
|
const changed = value.allowed !== baseline[item.actionId].allowed || value.capAllowed !== baseline[item.actionId].capAllowed
|
|
const label = `新角色 ${item.label}`
|
|
return <div className="au-copy-row" key={item.actionId}>
|
|
<span title={item.description}>{item.label}</span>
|
|
{cellKind(item) === 'toggle'
|
|
? <select className="rp-state" aria-label={label} value={value.allowed ? 'on' : 'off'} disabled={busy}
|
|
onChange={event => setValue(item.actionId, stateToValue(event.target.value === 'on' ? 'default' : 'denied'))}>
|
|
<option value="off">不允许</option><option value="on">允许</option>
|
|
</select>
|
|
: <select className="rp-state" aria-label={label} value={valueToState(value)} disabled={busy}
|
|
onChange={event => setValue(item.actionId, stateToValue(event.target.value as RolePermissionStateName))}>
|
|
{ROLE_PERMISSION_STATES.map(option => <option key={option.state} value={option.state}>{option.label}</option>)}
|
|
</select>}
|
|
{changed && <span className="rp-cell-flag">已调整</span>}
|
|
</div>
|
|
})}
|
|
</fieldset>)}
|
|
<div className="ad-row">
|
|
<span className="ad-hint au-grow">相对「{source.name}」调整 {adjusted} 项</span>
|
|
<button className="lg-submit ad-create-btn" disabled={busy || !copyName.trim()} onClick={() => void copyAndAssign()}>确认复制并分配</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
const batchPanel = () => <section className="rp-preview au-batch" aria-label={`为选中的 ${counts.count} 人分配角色`}>
|
|
<div className="rp-preview-head">
|
|
<strong>为选中的 {counts.count} 人分配角色</strong>
|
|
<button className="ad-mini" disabled={busy} onClick={closeBatch}>收起</button>
|
|
</div>
|
|
{roleSearch()}
|
|
<select className="lg-input" aria-label="批量分配的目标角色" value={batchRoleId} disabled={busy || roleLoading} onChange={event => void previewBatch(event.target.value)}>
|
|
<option value="">请选择目标角色</option>
|
|
{batchRoleId && !roles.some(role => role.roleId === batchRoleId) && <option value={batchRoleId}>{batchPreview?.[0]?.targetRoleName ?? '已选角色'}</option>}
|
|
{roles.map(role => <option key={role.roleId} value={role.roleId}>{role.name}</option>)}
|
|
</select>
|
|
{batchPreview && <ul className="au-preview-list">{batchPreview.map(item => <li key={item.userId}>
|
|
<span>{accountLabel(item)}</span><span className="ad-dim">{previewTransition(item)}</span>
|
|
{item.error && <span className="rp-conflict"><Icon name="alert" size={12} />{item.error}</span>}
|
|
{!item.error && !item.stateMatches && <span className="rp-conflict"><Icon name="alert" size={12} />用户状态已变化</span>}
|
|
</li>)}</ul>}
|
|
{batchPreview && !batchReady && <p className="rp-conflict" role="alert"><Icon name="alert" size={12} />存在停用、版本变化或角色无效的用户，处理后才能确认分配</p>}
|
|
<div className="ad-row">
|
|
{batchStale.length > 0 && <button className="ad-mini" disabled={busy} onClick={() => void refreshBatchVersions()}>刷新 {batchStale.length} 人的状态并重新预览</button>}
|
|
{batchRoleId && !batchPreview && <button className="ad-mini" disabled={busy} onClick={() => void previewBatch(batchRoleId)}>重新预览</button>}
|
|
<button className="lg-submit ad-create-btn" disabled={busy || !batchReady} onClick={() => void confirmBatch()}>确认分配</button>
|
|
</div>
|
|
</section>
|
|
|
|
if (!allowed('system.users.view')) return <p className="ad-hint">当前账号没有查看用户的系统权限</p>
|
|
return <div>
|
|
{allowed('system.users.create') && <div className="ad-create">
|
|
<div className="ad-row"><input className="lg-input" aria-label="新用户登录名" placeholder="登录名" value={newOwner} onChange={event => setNewOwner(event.target.value)} />
|
|
<button className="lg-submit ad-create-btn" disabled={busy || !newOwner.trim()} onClick={create}>创建用户</button></div>
|
|
<Collapsible id="new-user-profile" trigger="可选资料：姓名、电话、邮箱、工号、部门、备注">
|
|
<ProfileInputs profile={newProfile} onChange={setNewProfile} prefix="new-user" />
|
|
</Collapsible>
|
|
</div>}
|
|
{notice && <div className="ad-notice" role="status"><Icon name="check" size={14} />{notice}</div>}
|
|
{err && <div className="lg-err" role="alert"><Icon name="alert" size={14} />{err}</div>}
|
|
{selected ? <div className="rp-editor">
|
|
<div className="ad-row"><button className="ad-mini" onClick={() => { sequence.current++; setSelected(null) }}>返回列表</button>
|
|
<b>{selected.owner}</b><span className="ad-dim ad-mono">{selected.userId}</span></div>
|
|
<p className="ad-hint">{selected.enabled ? '有效账号' : '停用账号'} · {credentialLabel(selected)} · 资料版本 {selected.profileVersion} · 当前角色 {canViewRoles ? (roleView?.role?.name ?? '未分配') : '无角色查看权限'}</p>
|
|
{selected.initializationState === 'pending' && <p className="ad-hint">交给可信 owner 的初始化定位：userId <span className="ad-mono">{selected.userId}</span> · 状态版本 {selected.stateVersion} · 代数 {selected.initializationGeneration}。凭据只经保护文件交付。</p>}
|
|
{allowed('system.users.edit') && <Collapsible id={`user-profile-${selected.userId}`} trigger="编辑可选资料">
|
|
<ProfileInputs profile={draft} onChange={setDraft} prefix="user-profile" />
|
|
<button className="lg-submit ad-create-btn" disabled={busy} onClick={saveProfile}>保存资料</button>
|
|
</Collapsible>}
|
|
<div className="ad-row">
|
|
{canAssignRoles && <><select className="lg-input" aria-label="用户生效角色" value={selectedRoleId} onChange={event => setSelectedRoleId(event.target.value)}>
|
|
<option value="">请选择角色</option>{roles.map(role => <option key={role.roleId} value={role.roleId}>{role.name}</option>)}
|
|
</select><button className="ad-mini" disabled={busy || !selectedRoleId || selectedRoleId === roleView?.role?.roleId} onClick={assignRole}>替换角色</button></>}
|
|
{allowed('system.users.disable') && <button className="ad-mini" disabled={busy} onClick={toggleState}>{selected.enabled ? '停用账号' : '启用账号'}</button>}
|
|
</div>
|
|
{canAssignRoles && roleSearch()}
|
|
{canCopyRole && roleView?.role && catalog.length > 0 && <Collapsible id={`copy-role-${selected.userId}`} trigger="复制角色并分配…">
|
|
{fullSourceRole ? copyForm(fullSourceRole)
|
|
: sourceRoleError ? <p className="lg-err" role="alert"><Icon name="alert" size={14} />{sourceRoleError}</p>
|
|
: <p className="ad-hint">正在读取源角色权限…</p>}
|
|
</Collapsible>}
|
|
{canViewGrants && <Collapsible id={`system-grants-${selected.userId}`} trigger="明确系统权限">
|
|
<div className="rp-grants">{catalog.filter(item => item.scope === 'system').map(item => <label className="ad-check" key={item.actionId}>
|
|
<input type="checkbox" checked={grants.includes(item.actionId)} disabled={!canManageGrants || busy} onChange={event => setGrants(current => event.target.checked
|
|
? [...new Set([...current, item.actionId])] : current.filter(value => value !== item.actionId))} />{item.label}<span className="ad-dim ad-mono">{item.actionId}</span>
|
|
</label>)}</div>
|
|
{canManageGrants && <button className="lg-submit ad-create-btn" disabled={busy} onClick={saveGrants}>保存系统权限</button>}
|
|
</Collapsible>}
|
|
{!canViewGrants && allowed('system.permissions.manage') && <p className="ad-hint">需要同时具备系统权限查看权，才能安全编辑现有授权</p>}
|
|
</div> : <>
|
|
<div className="ad-row rp-filters">
|
|
<input className="lg-input" aria-label="搜索用户" placeholder="搜索用户资料" value={query} onChange={event => { setQuery(event.target.value); resetPaging() }} />
|
|
<select className="lg-input" aria-label="用户匹配方式" value={mode} onChange={event => { setMode(event.target.value as typeof mode); resetPaging() }}><option value="fuzzy">模糊匹配</option><option value="exact">精确匹配</option></select>
|
|
<select className="lg-input" aria-label="用户搜索字段" value={field} onChange={event => { setField(event.target.value); resetPaging() }}>
|
|
<option value="default">账号／姓名／ID</option><option value="owner">登录名</option><option value="name">姓名</option><option value="userId">userId</option>
|
|
<option value="phone">电话</option><option value="email">邮箱</option><option value="staffNo">工号</option><option value="department">部门</option><option value="notes">备注</option>
|
|
</select>
|
|
<select className="lg-input" aria-label="用户状态" value={status} onChange={event => { setStatus(event.target.value as typeof status); resetPaging() }}><option value="all">全部状态</option><option value="enabled">有效</option><option value="disabled">停用</option></select>
|
|
</div>
|
|
{sameNameHint(accounts ?? []) && <p className="ad-hint">{sameNameHint(accounts ?? [])}</p>}
|
|
<table className="ad-table"><thead><tr>
|
|
<th className="au-select-col"><input type="checkbox" aria-label="全选本页用户" checked={pageState === 'all'} disabled={busy || !pageIds.length}
|
|
ref={element => { if (element) element.indeterminate = pageState === 'some' }}
|
|
onChange={event => changeSelection(selectPage(selection, pageIds, event.target.checked))} /></th>
|
|
<th>姓名与账号</th><th>工号</th><th>当前角色</th><th>系统身份</th><th>状态</th><th>首次凭据</th><th></th></tr></thead>
|
|
<tbody>{(accounts ?? []).map(account => <tr key={account.userId}>
|
|
<td className="au-select-col"><input type="checkbox" aria-label={`选择 ${accountLabel(account)}`} checked={isSelected(selection, account.userId)} disabled={busy}
|
|
onChange={event => changeSelection(toggleOne(selection, account.userId, event.target.checked))} /></td>
|
|
<td><div className="au-name-cell"><span>{accountName(account)}</span>
|
|
{account.profile.name.trim() && <span className="ad-dim ad-mono">{account.owner}</span>}
|
|
{duplicates.has(account.profile.name.trim()) && <span className="au-same-name">同名 · 按账号辨识</span>}</div></td>
|
|
<td>{account.profile.staffNo || '—'}</td><td>{roleColumnLabel(canViewRoles ? account.role : undefined)}</td>
|
|
<td>{account.isAdmin ? '系统管理员' : '普通账号'}</td><td>{account.enabled ? '有效' : '停用'}</td>
|
|
<td>{credentialLabel(account)}</td><td><button className="ad-mini" onClick={() => open(account)}>查看与管理</button></td></tr>)}
|
|
{accounts !== null && accounts.length === 0 && <tr><td colSpan={8} className="ad-dim">没有匹配用户</td></tr>}
|
|
{accounts === null && <tr><td colSpan={8} className="ad-dim">加载中…</td></tr>}</tbody></table>
|
|
<div className="ad-row"><button className="ad-mini" disabled={!trail.length} onClick={() => { setCursor(trail[trail.length - 1]); setTrail(trail.slice(0, -1)) }}>上一页</button>
|
|
<button className="ad-mini" disabled={!nextCursor} onClick={() => { setTrail([...trail, cursor]); setCursor(nextCursor) }}>下一页</button></div>
|
|
<Collapsible open={batchOpen && canAssignRoles && counts.count > 0} onToggle={value => { if (!value) closeBatch() }}>
|
|
{batchPanel()}
|
|
</Collapsible>
|
|
{counts.count > 0 && <div className="rp-savebar" role="region" aria-label="已选用户">
|
|
<span className="rp-savebar-summary" aria-live="polite">{selectionSummary(counts)}</span>
|
|
<button className="ad-mini" disabled={busy} onClick={() => { changeSelection(clearSelection()); closeBatch() }}>清空选择</button>
|
|
{canAssignRoles && <button className="ad-mini" disabled={busy} aria-expanded={batchOpen} onClick={batchOpen ? closeBatch : openBatch}>为选中的 {counts.count} 人分配角色</button>}
|
|
</div>}
|
|
</>}
|
|
</div>
|
|
}
|