Add role and permission configuration views

Why: Administrators and delegated system managers need focused role, user, and permission controls with search, filters, single-role editing, and a matrix view.

Evidence: Frontend 280 tests, production build, paired UI 163 tests, and design guards passed.

Impact: Replaces the RDM role panel with Backend role authority and adds optional user profiles, unique role assignment, and explicit system-grant editing.

Refs: Focused role and permission system task 7

src/api.ts

@@ -26,6 +26,12 @@ export interface UserRoleBinding {
   assignedBy: string; assignedAt: string; userStateVersion: number; authorityEpoch: number
 }
 export interface UserRoleView { binding?: UserRoleBinding; role?: RoleRecord }
+export interface AccountProfile { name: string; phone: string; email: string; staffNo: string; department: string; notes: string }
+export interface AccountRecord {
+  userId: string; owner: string; profile: AccountProfile; profileVersion: number; enabled: boolean; stateVersion: number
+  isAdmin: boolean; passwordSet: boolean; initializationState: string; initializationGeneration: number; createdAt?: string
+}
+export interface AccountSearchPage { accounts: AccountRecord[]; nextCursor?: string; directoryVersion: string }
 
 async function checked(res: Response): Promise<Response> {
   if (!res.ok) {
@@ -70,6 +76,7 @@ export const api = {
 	replaceSystemGrants: (userId: string, actions: string[], expectedAuthorityEpoch: number, idempotencyKey: string) =>
 	  auth.fetch(`${BASE}/api/admin/users/${encodeURIComponent(userId)}/system-grants`, { method: 'PUT', headers: { 'Content-Type': 'application/json' },
 	    body: JSON.stringify({ actions, expectedAuthorityEpoch, idempotencyKey }) }).then(r => json<{ receiptId: string; authorityEpoch: number }>(r)),
+	explainSystemAction: (action: string) => auth.fetch(`${BASE}/api/authz/explain?action=${encodeURIComponent(action)}`).then(r => json<{ allowed: boolean; actionId: string; source?: string; reason?: string; authorityEpoch: number }>(r)),
   listProjects: () => auth.fetch(`${BASE}/api/projects`).then(r => json<Project[]>(r)),
   createProject: (name: string) => auth.fetch(`${BASE}/api/projects`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name }) }).then(r => json<Project>(r)),
   renameProject: (id: string, name: string) => auth.fetch(`${BASE}/api/projects/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name }) }).then(r => json<Project>(r)),
@@ -89,7 +96,7 @@ export const api = {
   projectSurfaces: (projectId: string) => auth.fetch(`${BASE}/api/projects/${projectId}/surfaces`).then(r => json<SurfaceMeta[]>(r)),
   /** 单页权威快照（含 identity + spec），供列表水合与预览渲染。 */
   surfaceGet: (id: string) => auth.fetch(`${BASE}/api/surfaces/${id}`).then(r => json<SurfaceSnapshot>(r)),
-  me: () => auth.fetch(`${BASE}/api/me`).then(r => json<{ owner: string; name: string; auth: boolean; authVia?: string; sessionScope?: string; isAdmin?: boolean; mustChangePassword?: boolean; passwordSet?: boolean }>(r)),
+  me: () => auth.fetch(`${BASE}/api/me`).then(r => json<{ owner: string; name: string; auth: boolean; authVia?: string; sessionScope?: string; isAdmin?: boolean; mustChangePassword?: boolean; passwordSet?: boolean; systemActions?: string[] }>(r)),
   // ---- 认证与会话（管理员发放制，R2）----
   login: (owner: string, password: string) => auth.fetch(`${BASE}/api/auth/login`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ owner, password }) }).then(async r => {
     if (!r.ok) throw new Error(`${r.status}: ${await r.text()}`)
@@ -116,6 +123,16 @@ export const api = {
   }),
   listAdminUsers: () => auth.fetch(`${BASE}/api/admin/users`).then(r => json<{ owner: string; name: string; isAdmin: boolean; mustChangePassword: boolean; hasPassword: boolean; passwordSetAt?: string; createdAt: string }[]>(r)),
   createAdminUser: (owner: string, name: string, password: string, isAdmin: boolean) => auth.fetch(`${BASE}/api/admin/users`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ owner, name, password, isAdmin }) }).then(r => json<{ owner: string; mustChangePassword: boolean }>(r)),
+  searchAdminUsers: (request: { query: string; mode: 'exact' | 'fuzzy'; status: 'all' | 'enabled' | 'disabled'; fields: string[]; cursor?: string; limit?: number }) => {
+    const params = new URLSearchParams({ query: request.query, mode: request.mode, status: request.status,
+      fields: request.fields.join(','), limit: String(request.limit ?? 20) })
+    if (request.cursor) params.set('cursor', request.cursor)
+    return auth.fetch(`${BASE}/api/admin/users/search?${params}`).then(r => json<AccountSearchPage>(r))
+  },
+  createManagedUser: (owner: string, profile: Partial<AccountProfile>) => auth.fetch(`${BASE}/api/admin/users`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ owner, profile }) }).then(r => json<AccountRecord>(r)),
+  adminGetUser: (userId: string) => auth.fetch(`${BASE}/api/admin/users/${encodeURIComponent(userId)}`).then(r => json<AccountRecord>(r)),
+  adminPatchProfile: (userId: string, expectedProfileVersion: number, patch: Partial<AccountProfile>) => auth.fetch(`${BASE}/api/admin/users/${encodeURIComponent(userId)}/profile`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ expectedProfileVersion, patch }) }).then(r => json<AccountRecord>(r)),
+  adminSetUserEnabled: (userId: string, expectedStateVersion: number, enabled: boolean) => auth.fetch(`${BASE}/api/admin/users/${encodeURIComponent(userId)}/state`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ expectedStateVersion, enabled }) }).then(r => json<AccountRecord>(r)),
   // ---- 管理员：一次性登录 Key（忘记密码恢复主入口；旧"直接重置密码"接口退出常规 UI）----
   adminIssueLoginKey: (owner: string, ttlMinutes?: number) => auth.fetch(`${BASE}/api/admin/users/${encodeURIComponent(owner)}/login-keys`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ purpose: 'recover', ...(ttlMinutes ? { ttlMinutes } : {}) }) }).then(r => json<{ id: string; owner: string; purpose: string; status: string; expiresAt: string; key: string }>(r)),
   adminListLoginKeys: (owner: string) => auth.fetch(`${BASE}/api/admin/users/${encodeURIComponent(owner)}/login-keys`).then(r => json<{ keys: { id: string; owner: string; purpose: string; status: string; expiresAt: string; createdAt: string; createdBy?: string }[] }>(r)).then(d => d.keys ?? []),

src/components/AccountUsersPanel.tsx

@@ -0,0 +1,193 @@
+import { useEffect, useRef, useState } from 'react'
+import {
+  api, type AccountProfile, type AccountRecord, type PermissionDescriptor, type RoleRecord, type UserRoleView,
+} from '../api'
+import { useStore } from '../store'
+import { Collapsible, Icon } from '@ui'
+import { hasSystemAction } from './RolePermissionsPanel'
+
+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: '备注' },
+]
+
+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 [accounts, setAccounts] = useState<AccountRecord[] | null>(null)
+  const [selected, setSelected] = useState<AccountRecord | null>(null)
+  const [roleView, setRoleView] = useState<UserRoleView | null>(null)
+  const [roles, setRoles] = useState<RoleRecord[]>([])
+  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 search = async (pageCursor = cursor) => {
+    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 ?? '')
+    } catch (error) { if (request === sequence.current) setErr(String(error)) }
+  }
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => { void search() }, 180)
+    return () => { window.clearTimeout(timer); sequence.current++ }
+  }, [query, mode, field, status, cursor])
+
+  const open = async (account: AccountRecord) => {
+    const request = ++sequence.current
+    setSelected(null); setRoleView(null); setErr(''); setNotice('')
+    try {
+      const tasks: Promise<unknown>[] = [api.adminGetUser(account.userId), api.getUserRole(account.userId), api.listRoles({ status: 'enabled', limit: 100 })]
+      if (allowed('system.permissions.view')) tasks.push(api.permissionCatalog(), api.getSystemGrants(account.userId))
+      const result = await Promise.all(tasks)
+      if (request !== sequence.current) return
+      const detail = result[0] as AccountRecord
+      const currentRole = result[1] as UserRoleView
+      setSelected(detail); setDraft(detail.profile); setRoleView(currentRole)
+      setSelectedRoleId(currentRole.role?.roleId ?? '')
+      setRoles((result[2] as { roles: RoleRecord[] }).roles ?? [])
+      if (result.length > 3) {
+        setCatalog(result[3] as PermissionDescriptor[])
+        const system = result[4] as { actions: string[]; authorityEpoch: number }
+        setGrants(system.actions ?? []); setAuthorityEpoch(system.authorityEpoch)
+      } else { setCatalog([]); setGrants([]); setAuthorityEpoch(0) }
+    } catch (error) { if (request === sequence.current) setErr(String(error)) }
+  }
+
+  const refreshFirst = async () => {
+    setCursor(''); setTrail([]); setNextCursor('')
+    await search('')
+  }
+
+  const create = async () => {
+    if (!newOwner.trim()) return
+    setBusy(true); setErr(''); setNotice('')
+    try {
+      const account = await api.createManagedUser(newOwner.trim(), newProfile)
+      setNewOwner(''); setNewProfile(emptyProfile())
+      await refreshFirst(); await open(account)
+      setNotice(`已创建 ${account.owner}；账号资料可空，角色另行分配`)
+    } 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); await refreshFirst(); setNotice(updated.enabled ? '账号已启用' : '账号已停用')
+    } catch (error) { setErr(String(error)) } finally { setBusy(false) }
+  }
+
+  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"><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 ? '有效账号' : '停用账号'} · 当前角色 {roleView?.role?.name ?? '未分配'}</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">
+        {allowed('system.roles.assign') && <><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>
+      {allowed('system.permissions.manage') && <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)} 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>
+        <button className="lg-submit ad-create-btn" disabled={busy} onClick={saveGrants}>保存系统权限</button>
+      </Collapsible>}
+    </div> : <>
+      <div className="ad-row rp-filters">
+        <input className="lg-input" aria-label="搜索用户" placeholder="搜索用户资料" value={query} onChange={event => { setQuery(event.target.value); setCursor(''); setTrail([]) }} />
+        <select className="lg-input" aria-label="用户匹配方式" value={mode} onChange={event => setMode(event.target.value as typeof mode)}><option value="fuzzy">模糊匹配</option><option value="exact">精确匹配</option></select>
+        <select className="lg-input" aria-label="用户搜索字段" value={field} onChange={event => setField(event.target.value)}>
+          <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)}><option value="all">全部状态</option><option value="enabled">有效</option><option value="disabled">停用</option></select>
+      </div>
+      <table className="ad-table"><thead><tr><th>登录名</th><th>姓名</th><th>工号</th><th>状态</th><th></th></tr></thead>
+        <tbody>{(accounts ?? []).map(account => <tr key={account.userId}><td className="ad-mono">{account.owner}</td><td>{account.profile.name || '—'}</td>
+          <td>{account.profile.staffNo || '—'}</td><td>{account.enabled ? '有效' : '停用'}</td><td><button className="ad-mini" onClick={() => open(account)}>查看与管理</button></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>
+    </>}
+  </div>
+}

src/components/AdminZone.tsx

@@ -7,9 +7,10 @@
 import { useState } from 'react'
 import { store, useStore } from '../store'
 import { EmptyState, Icon, type IconName } from '@ui'
-import { UsersPanel, ProfilesSection, PluginsSection, PluginWorkspacesPanel, SystemSettingsPanel } from './adminSections'
+import { ProfilesSection, PluginsSection, PluginWorkspacesPanel, SystemSettingsPanel } from './adminSections'
 import { RdmAuditWorkspace } from './RdmAuditWorkspace'
-import { RdmRolesPanel } from './adminRdmSections'
+import { AccountUsersPanel } from './AccountUsersPanel'
+import { RolePermissionsPanel, hasSystemAction } from './RolePermissionsPanel'
 import type { AdminZoneSection } from '../api'
 
 interface AdminSectionDef {
@@ -17,6 +18,8 @@ interface AdminSectionDef {
   label: string
   icon: IconName
   desc: string
+  requiredAction?: string
+  rootOnly?: boolean
   /** 懒渲染：进入分区才挂载（每个面板自带数据加载）。 */
   render: () => React.ReactNode
 }
@@ -27,14 +30,13 @@ function ProfilesPanelWrapper() {
 }
 
 const SECTIONS: AdminSectionDef[] = [
-  { key: 'users', label: '用户管理', icon: 'users', desc: '建号、发放初始密码、重置密码（管理员发放制）', render: () => <UsersPanel /> },
-  // U6/KTD5：RDM 专业角色管理——命令面齐备（rdmRolesAvailable）才显示；普通基座零暴露。
-  { key: 'rdm-roles', label: 'RDM 角色权限', icon: 'shield', desc: '专业角色：动作默认/上限、账号绑定、停用（仅管理员）', render: () => <RdmRolesPanel /> },
-  { key: 'profiles', label: '智能体画像', icon: 'bot', desc: '系统级画像：系统提示、工具允许/确认/拒绝清单', render: () => <ProfilesPanelWrapper /> },
+  { key: 'users', label: '用户管理', icon: 'users', desc: '可选资料、账号状态、唯一生效角色与明确系统权限', requiredAction: 'system.users.view', render: () => <AccountUsersPanel /> },
+  { key: 'roles', label: '角色与权限', icon: 'shield', desc: '职位角色、默认权限与上限；支持单角色和角色矩阵配置', requiredAction: 'system.roles.view', render: () => <RolePermissionsPanel /> },
+  { key: 'profiles', label: '智能体画像', icon: 'bot', desc: '系统级画像：系统提示、工具允许/确认/拒绝清单', rootOnly: true, render: () => <ProfilesPanelWrapper /> },
   // P2 受管：模型/密钥/Tavily/遥测/运行基础设施的唯一写入面（Backend PR 188 系统设置 API）。
-  { key: 'system-settings', label: '模型与服务配置', icon: 'settings', desc: '系统受管项：模型、密钥、Tavily、遥测与运行基础设施（仅管理员）', render: () => <SystemSettingsPanel /> },
-  { key: 'plugins', label: '插件管理', icon: 'puzzle', desc: '已装载插件清单与热重载（装卸不影响核心）', render: () => <PluginsSection /> },
-  { key: 'workspaces', label: '插件工作区', icon: 'grid', desc: '插件声明面板与服务端声明工作区', render: () => <PluginWorkspacesPanel /> },
+  { key: 'system-settings', label: '模型与服务配置', icon: 'settings', desc: '系统受管项：模型、密钥、Tavily、遥测与运行基础设施（仅管理员）', rootOnly: true, render: () => <SystemSettingsPanel /> },
+  { key: 'plugins', label: '插件管理', icon: 'puzzle', desc: '已装载插件清单与热重载（装卸不影响核心）', rootOnly: true, render: () => <PluginsSection /> },
+  { key: 'workspaces', label: '插件工作区', icon: 'grid', desc: '插件声明面板与服务端声明工作区', rootOnly: true, render: () => <PluginWorkspacesPanel /> },
 ]
 
 /** 声明分区 → 内置分区组件（按声明 ID 映射；AdminZone 不硬编码领域逻辑）。 */
@@ -62,14 +64,15 @@ function DeclaredSection({ section }: { section: AdminZoneSection }) {
 export function AdminZone() {
   const me = useStore(s => s.me)
   const declared = useStore(s => s.adminSections)
-  const rdmRolesAvailable = useStore(s => s.rdmRolesAvailable)
   const [sectionKey, setSectionKey] = useState('users')
   const isAdmin = !!me?.isAdmin
+  const systemActions = me?.systemActions ?? []
+  const canOpenSystem = isAdmin || systemActions.length > 0
   // 门控：基座系统分区仅 isAdmin（纵深防御与菜单层一致）；声明分区对全部
   // 认证主体开放（区内能力由组件命令面判定）。两者皆无时不渲染。
-  if (!isAdmin && declared.length === 0) return null
+  if (!canOpenSystem && declared.length === 0) return null
   const sections: AdminSectionDef[] = [
-    ...(isAdmin ? SECTIONS.filter(s => s.key !== 'rdm-roles' || rdmRolesAvailable) : []),
+    ...SECTIONS.filter(section => section.rootOnly ? isAdmin : isAdmin || hasSystemAction(systemActions, section.requiredAction ?? '')),
     ...declared.map(s => ({
       key: `decl:${s.id}`, label: s.title, icon: declaredIcon(s.icon),
       desc: s.desc || '插件声明的管理分区（区内数据能力由插件命令面判定）',
@@ -86,7 +89,7 @@ export function AdminZone() {
           <Icon name="chevron-down" size={14} /> 返回工作台
         </button>
         <span className="az-title">系统管理</span>
-        <span className="az-sub">{isAdmin ? '仅管理员可见' : '按插件声明开放'} · 变更即时生效</span>
+        <span className="az-sub">{isAdmin ? '根管理员' : '按系统权限开放'} · 角色与权限由服务端判定</span>
         <span style={{ flex: 1 }} />
         <span className="az-tenant">{me?.owner ?? ''}</span>
       </div>

src/components/RolePermissionsPanel.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { api, type PermissionDescriptor, type RoleRecord } from '../api'
+import {
+  createRolePermissionDraft, updateRolePermission, validateRolePermissionDraft, visiblePatch,
+  type RolePermissionDraft, type RolePermissionValue,
+} from '../rolePermissions'
+import { Collapsible, Icon } from '@ui'
+
+export function filterRoles(
+  roles: RoleRecord[], query: string, mode: 'exact' | 'fuzzy', status: 'all' | 'enabled' | 'disabled',
+): RoleRecord[] {
+  const normalized = query.trim().toLocaleLowerCase()
+  return roles.filter(role => {
+    if (status === 'enabled' && !role.enabled) return false
+    if (status === 'disabled' && role.enabled) return false
+    if (!normalized) return true
+    const fields = [role.name, role.description, role.roleId].map(value => value.toLocaleLowerCase())
+    return mode === 'exact' ? fields.some(value => value === normalized) : fields.some(value => value.includes(normalized))
+  })
+}
+
+export function groupPermissionPage(catalog: PermissionDescriptor[], group: string, page: number, size: number): PermissionDescriptor[] {
+  const grouped = catalog.filter(item => !group || item.group === group)
+  return grouped.slice(page * size, page * size + size)
+}
+
+export function shouldAcceptRoleResponse(activeSequence: number, responseSequence: number): boolean {
+  return activeSequence === responseSequence
+}
+
+export function hasSystemAction(actions: string[] | undefined, action: string): boolean {
+  return actions?.includes(action) ?? false
+}
+
+function roleValues(role: RoleRecord, catalog: PermissionDescriptor[]): Record<string, RolePermissionValue> {
+  const existing = new Map(role.permissions.map(item => [item.actionId, item]))
+  return Object.fromEntries(catalog.filter(item => !item.protected).map(item => {
+    const value = existing.get(item.actionId)
+    return [item.actionId, { allowed: value?.allowed ?? false, capAllowed: value?.capAllowed ?? false }]
+  }))
+}
+
+function roleValue(role: RoleRecord, actionId: string): RolePermissionValue {
+  const value = role.permissions.find(item => item.actionId === actionId)
+  return { allowed: value?.allowed ?? false, capAllowed: value?.capAllowed ?? false }
+}
+
+export function RolePermissionsPanel() {
+  const [roles, setRoles] = useState<RoleRecord[] | null>(null)
+  const [catalog, setCatalog] = useState<PermissionDescriptor[]>([])
+  const [selectedId, setSelectedId] = useState('')
+  const [draft, setDraft] = useState<RolePermissionDraft | null>(null)
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [query, setQuery] = useState('')
+  const [mode, setMode] = useState<'exact' | 'fuzzy'>('fuzzy')
+  const [status, setStatus] = useState<'all' | 'enabled' | 'disabled'>('all')
+  const [group, setGroup] = useState('')
+  const [page, setPage] = useState(0)
+  const [view, setView] = useState<'single' | 'matrix'>('single')
+  const [newName, setNewName] = useState('')
+  const [newDescription, setNewDescription] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [notice, setNotice] = useState('')
+  const [err, setErr] = useState('')
+  const requestSequence = useRef(0)
+
+  const selected = roles?.find(role => role.roleId === selectedId) ?? null
+  const groups = useMemo(() => [...new Set(catalog.map(item => item.group))], [catalog])
+  const filtered = useMemo(() => filterRoles(roles ?? [], query, mode, status), [roles, query, mode, status])
+  const pageItems = useMemo(() => groupPermissionPage(catalog, group, page, 6), [catalog, group, page])
+  const editablePageItems = pageItems.filter(item => !item.protected)
+  const changes = draft ? visiblePatch(draft, catalog.filter(item => !item.protected).map(item => item.actionId)) : []
+
+  const load = async () => {
+    const sequence = ++requestSequence.current
+    setErr('')
+    try {
+      const [rolePage, descriptors] = await Promise.all([
+        api.listRoles({ limit: 100 }), api.permissionCatalog(),
+      ])
+      if (!shouldAcceptRoleResponse(requestSequence.current, sequence)) return
+      setRoles(rolePage.roles ?? [])
+      setCatalog(descriptors)
+      const nextSelected = rolePage.roles.find(role => role.roleId === selectedId) ?? rolePage.roles[0] ?? null
+      if (nextSelected) selectRole(nextSelected, descriptors, sequence)
+      else { setSelectedId(''); setDraft(null) }
+    } catch (error) {
+      if (shouldAcceptRoleResponse(requestSequence.current, sequence)) setErr(String(error))
+    }
+  }
+
+  const selectRole = (role: RoleRecord, descriptors = catalog, sequence?: number) => {
+    const nextSequence = sequence ?? ++requestSequence.current
+    if (!shouldAcceptRoleResponse(requestSequence.current, nextSequence)) return
+    setSelectedId(role.roleId)
+    setName(role.name)
+    setDescription(role.description)
+    setDraft(createRolePermissionDraft(roleValues(role, descriptors), nextSequence))
+    setNotice('')
+    setErr('')
+  }
+
+  useEffect(() => { void load(); return () => { requestSequence.current++ } }, [])
+
+  const create = async () => {
+    if (!newName.trim()) return
+    setBusy(true); setErr(''); setNotice('')
+    try {
+      const role = await api.createRole(newName.trim(), newDescription.trim())
+      setNewName(''); setNewDescription('')
+      await load()
+      setNotice(`已创建角色 ${role.name}`)
+    } catch (error) { setErr(String(error)) } finally { setBusy(false) }
+  }
+
+  const saveMetadata = async () => {
+    if (!selected) return
+    setBusy(true); setErr(''); setNotice('')
+    try {
+      await api.patchRole(selected.roleId, selected.roleVersion, { name: name.trim(), description: description.trim() })
+      await load(); setNotice('角色资料已保存')
+    } catch (error) { setErr(String(error).includes('409') ? '角色已被其他操作修改，请刷新后重试' : String(error)) }
+    finally { setBusy(false) }
+  }
+
+  const setEnabled = async () => {
+    if (!selected) return
+    setBusy(true); setErr(''); setNotice('')
+    try {
+      await api.patchRole(selected.roleId, selected.roleVersion, { enabled: !selected.enabled })
+      await load(); setNotice(selected.enabled ? '角色已停用，现有绑定不再授予权限' : '角色已启用')
+    } catch (error) { setErr(String(error)) } finally { setBusy(false) }
+  }
+
+  const savePermissions = async () => {
+    if (!selected || !draft) return
+    const invalid = validateRolePermissionDraft(draft)
+    if (invalid) { setErr(`${invalid.actionId} 的默认权限不能超过角色上限`); return }
+    const full = Object.entries(draft.values).map(([actionId, value]) => ({ actionId, ...value }))
+    setBusy(true); setErr(''); setNotice('')
+    try {
+      await api.replaceRolePermissions(selected.roleId, selected.roleVersion, full, crypto.randomUUID())
+      await load(); setNotice('角色权限已保存')
+    } catch (error) { setErr(String(error).includes('409') ? '权限版本冲突，草稿已保留，请核对后重试' : String(error)) }
+    finally { setBusy(false) }
+  }
+
+  const editValue = (actionId: string, field: 'allowed' | 'capAllowed', checked: boolean) => {
+    if (!draft) return
+    const current = draft.values[actionId] ?? { allowed: false, capAllowed: false }
+    const value = field === 'allowed'
+      ? { allowed: checked, capAllowed: checked ? true : current.capAllowed }
+      : { allowed: checked ? current.allowed : false, capAllowed: checked }
+    setDraft(updateRolePermission(draft, actionId, value))
+  }
+
+  const matrix = () => <div className="rp-matrix-wrap">
+    <table className="ad-table rp-matrix">
+      <thead><tr><th>角色</th>{pageItems.map(item => <th key={item.actionId}>{item.label}</th>)}</tr></thead>
+      <tbody>{filtered.map(role => <tr key={role.roleId} className={role.roleId === selectedId ? 'rp-selected' : ''}>
+        <td><button className="ad-mini" onClick={() => selectRole(role)}>{role.name}</button><span className="ad-dim"> · {role.bindingCount} 人</span></td>
+        {pageItems.map(item => {
+          const value = role.roleId === selectedId && draft ? draft.values[item.actionId] : roleValue(role, item.actionId)
+          return <td key={item.actionId}>
+            {item.protected ? <span className="ad-dim">系统授权</span> : <label className="ad-check">
+              <input type="checkbox" aria-label={`${role.name} ${item.label}`} checked={value?.allowed ?? false}
+                disabled={busy || role.roleId !== selectedId} onChange={event => editValue(item.actionId, 'allowed', event.target.checked)} />允许
+            </label>}
+          </td>
+        })}
+      </tr>)}</tbody>
+    </table>
+  </div>
+
+  return <div className="rp-panel">
+    <div className="ad-create">
+      <div className="ad-row">
+        <input className="lg-input" aria-label="新角色名称" placeholder="角色名称" value={newName} onChange={event => setNewName(event.target.value)} />
+        <input className="lg-input" aria-label="新角色描述" placeholder="描述（可空）" value={newDescription} onChange={event => setNewDescription(event.target.value)} />
+        <button className="lg-submit ad-create-btn" disabled={busy || !newName.trim()} onClick={create}>创建角色</button>
+      </div>
+    </div>
+    <Collapsible id="role-permission-filters" trigger="搜索与过滤">
+      <div className="ad-row rp-filters">
+        <input className="lg-input" aria-label="搜索角色" placeholder="角色名称、描述或 ID" value={query} onChange={event => setQuery(event.target.value)} />
+        <select className="lg-input" aria-label="角色匹配方式" value={mode} onChange={event => setMode(event.target.value as typeof mode)}>
+          <option value="fuzzy">模糊匹配</option><option value="exact">精确匹配</option>
+        </select>
+        <select className="lg-input" aria-label="角色状态" value={status} onChange={event => setStatus(event.target.value as typeof status)}>
+          <option value="all">全部状态</option><option value="enabled">启用</option><option value="disabled">停用</option>
+        </select>
+        <select className="lg-input" aria-label="权限分组" value={group} onChange={event => { setGroup(event.target.value); setPage(0) }}>
+          <option value="">全部权限</option>{groups.map(value => <option key={value}>{value}</option>)}
+        </select>
+      </div>
+    </Collapsible>
+    <div className="ad-row rp-view-toggle">
+      <button className={`ad-mini ${view === 'single' ? 'on' : ''}`} onClick={() => setView('single')}>单角色配置</button>
+      <button className={`ad-mini ${view === 'matrix' ? 'on' : ''}`} onClick={() => setView('matrix')}>角色矩阵</button>
+      <button className="ad-mini" disabled={page === 0} onClick={() => setPage(value => value - 1)}>上一组</button>
+      <button className="ad-mini" disabled={(page + 1) * 6 >= catalog.filter(item => !group || item.group === group).length} onClick={() => setPage(value => value + 1)}>下一组</button>
+    </div>
+    {notice && <div className="ad-notice"><Icon name="check" size={14} />{notice}</div>}
+    {err && <div className="lg-err" role="alert"><Icon name="alert" size={14} />{err}</div>}
+    {view === 'matrix' ? matrix() : <div className="rp-single">
+      <aside className="rp-role-list">
+        {(filtered).map(role => <button key={role.roleId} className={`az-nav-item ${role.roleId === selectedId ? 'on' : ''}`} onClick={() => selectRole(role)}>
+          <span>{role.name}</span><span className="ad-dim">{role.bindingCount} 人</span>
+        </button>)}
+      </aside>
+      <section className="rp-editor">
+        {selected && draft ? <>
+          <div className="ad-row">
+            <input className="lg-input" aria-label="角色名称" value={name} onChange={event => setName(event.target.value)} />
+            <input className="lg-input" aria-label="角色描述" value={description} onChange={event => setDescription(event.target.value)} />
+            <button className="ad-mini" disabled={busy} onClick={saveMetadata}>保存资料</button>
+            <button className="ad-mini" disabled={busy} onClick={setEnabled}>{selected.enabled ? '停用角色' : '启用角色'}</button>
+          </div>
+          <table className="ad-table"><thead><tr><th>权限</th><th>默认允许</th><th>角色上限</th><th>说明</th></tr></thead>
+            <tbody>{pageItems.map(item => {
+              const value = draft.values[item.actionId] ?? { allowed: false, capAllowed: false }
+              return <tr key={item.actionId}><td>{item.label}<div className="ad-dim ad-mono">{item.actionId}</div></td>
+                <td><input type="checkbox" aria-label={`${item.label} 默认允许`} checked={value.allowed} disabled={busy || item.protected}
+                  onChange={event => editValue(item.actionId, 'allowed', event.target.checked)} /></td>
+                <td><input type="checkbox" aria-label={`${item.label} 角色上限`} checked={value.capAllowed} disabled={busy || item.protected}
+                  onChange={event => editValue(item.actionId, 'capAllowed', event.target.checked)} /></td>
+                <td className="ad-dim">{item.protected ? '受保护系统授权，不能由普通角色授予' : item.description}</td></tr>
+            })}</tbody></table>
+          <Collapsible id={`role-diff-${selected.roleId}`} trigger={`变更预览（${changes.length}）`}>
+            {changes.length === 0 ? <p className="ad-hint">没有权限变化</p> : <ul className="rp-diff">{changes.map(change =>
+              <li key={change.actionId}><span className="ad-mono">{change.actionId}</span>：默认 {change.allowed ? '允许' : '拒绝'}，上限 {change.capAllowed ? '允许' : '拒绝'}</li>)}</ul>}
+          </Collapsible>
+          <button className="lg-submit ad-create-btn" disabled={busy || changes.length === 0 || editablePageItems.length === 0} onClick={savePermissions}>保存权限</button>
+        </> : <p className="ad-hint">请选择角色</p>}
+      </section>
+    </div>}
+  </div>
+}

src/components/TaskSidebar.tsx

@@ -279,7 +279,7 @@ export function TaskSidebar({ onCollapse = store.toggleLeft, onConversationOpen,
         <MenuItem icon="sun" onClick={() => { store.setUI({ theme: 'light' }); setMenu(null) }}>浅色主题{theme === 'light' ? ' · 当前' : ''}</MenuItem>
         <MenuItem onClick={() => { store.setUI({ theme: 'molv' }); setMenu(null) }}>墨绿主题{theme === 'molv' ? ' · 当前' : ''}</MenuItem>
         <MenuItem onClick={() => { store.setUI({ theme: 'system' }); setMenu(null) }}>跟随系统{theme === 'system' ? ' · 当前' : ''}</MenuItem>
-        {(me?.isAdmin || adminSections.length > 0) && <MenuItem icon="shield" onClick={() => { store.setUI({ adminZoneOpen: true }); setMenu(null) }}>系统管理…</MenuItem>}
+        {(me?.isAdmin || (me?.systemActions?.length ?? 0) > 0 || adminSections.length > 0) && <MenuItem icon="shield" onClick={() => { store.setUI({ adminZoneOpen: true }); setMenu(null) }}>系统管理…</MenuItem>}
         {me?.auth && <>
           <div className="tsb-menu-div" />
           <MenuItem danger icon="logout" onClick={() => { api.logout().catch(() => undefined); auth.logout() }}>退出登录</MenuItem>

src/store.ts

@@ -88,7 +88,7 @@ export interface UIState {
   projectSettingsId: string | null
 }
 
-export interface Me { owner: string; name: string; auth: boolean; isAdmin?: boolean; mustChangePassword?: boolean }
+export interface Me { owner: string; name: string; auth: boolean; isAdmin?: boolean; mustChangePassword?: boolean; systemActions?: string[] }
 
 interface AppState {
   contextObs: Record<string, ContextObs>

src/styles.css

@@ -517,6 +517,27 @@ button { font-family: inherit; font-size: inherit; color: inherit; }
 .ad-table th { text-align: left; font-weight: 600; color: var(--text-dim); font-size: var(--fs-ui-sm); padding: 8px; border-bottom: 1px solid var(--border); }
 .ad-table td { padding: 9px 8px; border-bottom: 1px solid var(--border-soft); }
 .ad-table tr:last-child td { border-bottom: none; }
+.rp-panel { display: flex; flex-direction: column; gap: 12px; }
+.rp-filters .lg-input { min-width: 140px; }
+.rp-view-toggle { justify-content: flex-end; }
+.rp-view-toggle .ad-mini.on { background: var(--bg-active); color: var(--text); }
+.rp-single { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 16px; align-items: start; }
+.rp-role-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg-panel); }
+.rp-role-list .az-nav-item { justify-content: space-between; width: 100%; }
+.rp-editor { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
+.rp-matrix-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); }
+.rp-matrix { min-width: 760px; }
+.rp-matrix th:first-child, .rp-matrix td:first-child { position: sticky; left: 0; background: var(--bg-panel); z-index: 1; }
+.rp-matrix tr.rp-selected td { background: var(--bg-active); }
+.rp-matrix tr.rp-selected td:first-child { background: var(--bg-active); }
+.rp-diff { margin: 0; padding-left: 20px; color: var(--text-dim); font-size: var(--fs-ui-sm); }
+.rp-grants { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin-bottom: 12px; }
+.rp-grants .ad-check { align-items: flex-start; padding: 8px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg-raised); }
+.rp-grants .ad-mono { margin-left: auto; }
+@media (max-width: 820px) {
+  .rp-single { grid-template-columns: 1fr; }
+  .rp-role-list { max-height: 220px; overflow-y: auto; }
+}
 .ad-mono { font-family: var(--mono); font-size: var(--fs-ui-sm); }
 .ad-dim { color: var(--text-dim); }
 .ad-chip { font-size: var(--fs-ui-xs); border-radius: var(--radius-xs); padding: 2px 7px; font-weight: 700; letter-spacing: .5px; background: var(--bg-hover); color: var(--text-dim); }

test/role-permissions-ui.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import type { PermissionDescriptor, RoleRecord } from '../src/api'
+import {
+  filterRoles, groupPermissionPage, hasSystemAction, shouldAcceptRoleResponse,
+} from '../src/components/RolePermissionsPanel'
+
+const roles: RoleRecord[] = [
+  { roleId: 'role_engineer', name: '软件工程师', description: '研发', enabled: true, roleVersion: 1, bindingCount: 2, permissions: [] },
+  { roleId: 'role_reviewer', name: '审核工程师', description: '质量', enabled: false, roleVersion: 1, bindingCount: 1, permissions: [] },
+]
+
+const catalog: PermissionDescriptor[] = [
+  { actionId: 'project.create', label: '创建项目', description: '', group: '项目入口', scope: 'system', protected: false },
+  { actionId: 'document.read', label: '读取文档', description: '', group: '文档动作', scope: 'project', protected: false },
+  { actionId: 'document.author', label: '编制文档', description: '', group: '文档动作', scope: 'project', protected: false },
+]
+
+describe('role permission UI helpers', () => {
+  it('combines exact or fuzzy search with the role status filter', () => {
+    expect(filterRoles(roles, '软件工程师', 'exact', 'enabled').map(role => role.roleId)).toEqual(['role_engineer'])
+    expect(filterRoles(roles, '工程师', 'fuzzy', 'all').map(role => role.roleId)).toEqual(['role_engineer', 'role_reviewer'])
+    expect(filterRoles(roles, '', 'fuzzy', 'disabled').map(role => role.roleId)).toEqual(['role_reviewer'])
+  })
+
+  it('groups and pages matrix columns without changing their stable action IDs', () => {
+    expect(groupPermissionPage(catalog, '文档动作', 0, 1).map(item => item.actionId)).toEqual(['document.read'])
+    expect(groupPermissionPage(catalog, '文档动作', 1, 1).map(item => item.actionId)).toEqual(['document.author'])
+  })
+
+  it('drops late results and checks explicit system actions', () => {
+    expect(shouldAcceptRoleResponse(4, 3)).toBe(false)
+    expect(shouldAcceptRoleResponse(4, 4)).toBe(true)
+    expect(hasSystemAction(['system.roles.view'], 'system.roles.view')).toBe(true)
+    expect(hasSystemAction(['system.roles.view'], 'system.permissions.manage')).toBe(false)
+  })
+})