cx-chat 0.0.1

package/src/views/page-system/role/modal/role-permission-assign-panel.tsx

@@ -0,0 +1,916 @@
+import { getUserMenuListAPI } from '@/api/common/auth'
+import { getPermissionListAPI } from '@/api/system/permission'
+import { getRoleDetailAPI } from '@/api/system/role'
+import { useToast } from '@/contexts/ToastContext'
+import { CxCheckbox } from '@cx-ui'
+import { conductCheck } from '@rc-component/tree/lib/utils/conductUtil'
+import { convertDataToEntities } from '@rc-component/tree/lib/utils/treeUtil'
+import { Tree } from 'antd'
+import type { DataNode, TreeProps } from 'antd/es/tree'
+import clsx from 'clsx'
+import {
+    forwardRef,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+    augmentInitialMenuBasePermissionCodes,
+    buildRolePermissionCreateDTO,
+    codesForRowsInMenuSubtree,
+    collectSubtreeMenuIds,
+    comparePermissionRowsForAssign,
+    computePermissionAssignSection,
+    dedupePermissionRows,
+    findFirstLeafId,
+    flattenPermissionsFromMenuTree,
+    getMenuPathFromRoot,
+    inferStrictMenuCheckFromMergedMenuIds,
+    isAssignPermissionChecked,
+    isPermissionRowBuiltin,
+    isPermissionRowMenuLockedBase,
+    mapMenusToTreeData,
+    mapPermissionListResponseToRows,
+    menuPreorderIndexMap,
+    mergeRolePermissionAssignPayloadCodes,
+    nextPermissionCodesForMenuSubtree,
+    normalizeRoleApiListSnapshot,
+    normalizeRoleMenuSnapshot,
+    resolveScrollAnchorForMenuClick,
+    splitPermissionCodeParts,
+    swaggerHttpMethodLeftAccentClass,
+    unwrapMenuTreeResponse,
+    type MenuPermissionSection,
+    type PermissionRow,
+    type RolePermissionAssignPayload,
+} from './role-permission-assign-shared'
+
+export type RolePermissionAssignPanelHandle = {
+  getPayload: () => RolePermissionAssignPayload
+  reset: () => void
+}
+
+type Props = {
+  /** 为 false 时不加载、不渲染（用于新增弹窗未勾选「配置权限」） */
+  active: boolean
+  /** 已有角色 id；不传则视为新建，仅从菜单树构建可选权限、选中为空 */
+  roleId?: string | number | null
+  /**
+   * 外层每次打开「新增」弹窗递增；弹窗已打开时再次点「新增」时 `active` 不变，
+   * 仅靠此 key 变化触发重新 bootstrap（避免 reset 后无请求、树空白）。
+   */
+  bootstrapKey?: number
+  /**
+   * 在 `cx-modal-role-assign`（容器固定视口高度）内传入
+   * `h-full min-h-0 w-full flex-1 overflow-hidden`，根与左右列才能撑满并内部滚动。
+   */
+  maxHeightClass?: string
+  /** 只读模式：禁用所有 checkbox 和交互 */
+  readOnly?: boolean
+}
+
+/** 卡片底色/边框：0 内置、1 基础、2/缺省 扩展 */
+function assignCardShellTone(
+  apiType: number | undefined,
+  selected: boolean,
+): string {
+  const t = apiType ?? 2
+  if (t === 0) {
+    return selected
+      ? 'border border-dashed border-gray-300/95 bg-gray-100/90 text-gray-600 ring-1 ring-gray-200/90 dark:border-gray-600 dark:bg-gray-900/50 dark:text-gray-400 dark:ring-gray-800/80'
+      : 'border border-dashed border-gray-300/85 bg-gray-50/90 text-gray-600 hover:bg-gray-100/95 dark:border-gray-600 dark:bg-gray-900/40 dark:text-gray-400 dark:hover:bg-gray-900/55'
+  }
+  if (t === 1) {
+    // apiType=1 基础类型：使用更明显的背景色
+    return selected
+      ? 'border-indigo-300 bg-indigo-100 ring-1 ring-indigo-200 dark:border-indigo-600 dark:bg-indigo-950/50 dark:ring-indigo-800/60'
+      : 'border-indigo-200 bg-indigo-50/80 hover:bg-indigo-100/90 dark:border-indigo-700 dark:bg-indigo-950/35 dark:hover:bg-indigo-950/50'
+  }
+  return selected
+    ? 'border-blue-200 bg-blue-50 ring-1 ring-blue-100 dark:border-blue-800 dark:bg-blue-900/30 dark:ring-blue-900/50'
+    : 'border-gray-200 bg-white hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700/50'
+}
+
+function assignCodeTitleHoverClass(apiType: number | undefined): string {
+  const t = apiType ?? 2
+  if (t === 0) {
+    return 'text-gray-500 transition-colors dark:text-gray-400'
+  }
+  if (t === 1) {
+    return 'text-gray-900 transition-colors group-hover:text-indigo-700 dark:text-gray-100 dark:group-hover:text-indigo-300'
+  }
+  return 'text-gray-900 transition-colors group-hover:text-blue-600 dark:text-gray-100 dark:group-hover:text-blue-400'
+}
+
+const RolePermissionAssignPanel = forwardRef<
+  RolePermissionAssignPanelHandle,
+  Props
+>(function RolePermissionAssignPanel(
+  {
+    active,
+    bootstrapKey = 0,
+    maxHeightClass,
+    roleId,
+    readOnly = false,
+  },
+  ref,
+) {
+  const { t, i18n } = useTranslation()
+  const { showToast } = useToast()
+  const rightScrollRef = useRef<HTMLDivElement>(null)
+
+  const [loading, setLoading] = useState(false)
+  const [treeData, setTreeData] = useState<any[]>([])
+  const [selectedMenuId, setSelectedMenuId] = useState<React.Key | null>(null)
+  const [checkedMenuKeys, setCheckedMenuKeys] = useState<string[]>([])
+  const [halfCheckedMenuKeys, setHalfCheckedMenuKeys] = useState<string[]>([])
+  const [permissionCodes, setPermissionCodes] = useState<string[]>([])
+  const [allPermissionRows, setAllPermissionRows] = useState<PermissionRow[]>(
+    [],
+  )
+  const [permLoading, setPermLoading] = useState(false)
+  /** 默认不展示内置(apiType=0)；提交仍由 merge 强制并入 */
+  const [showBuiltinInPanel, setShowBuiltinInPanel] = useState(false)
+
+  const idKey = 'id'
+  const childrenKey = 'children'
+
+  const resetLocal = useCallback(() => {
+    setTreeData([])
+    setSelectedMenuId(null)
+    setCheckedMenuKeys([])
+    setHalfCheckedMenuKeys([])
+    setPermissionCodes([])
+    setAllPermissionRows([])
+    setShowBuiltinInPanel(false)
+  }, [])
+
+  const scrollToMenuSection = useCallback((menuId: string) => {
+    const root = rightScrollRef.current
+    if (!root) return
+    const el = root.querySelector(
+      `[data-perm-menu-section="${CSS.escape(menuId)}"]`,
+    )
+    el?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }, [])
+
+  const bootstrap = useCallback(async () => {
+    setLoading(true)
+    setPermLoading(true)
+    try {
+      const rid =
+        roleId !== undefined && roleId !== null && String(roleId).trim() !== ''
+          ? roleId
+          : null
+      const [menuRes, roleDetailRes, listRes] = await Promise.all([
+        getUserMenuListAPI({}),
+        rid != null ? getRoleDetailAPI(rid) : Promise.resolve({ data: {} }),
+        getPermissionListAPI().catch(() => null),
+      ])
+      const menus = unwrapMenuTreeResponse(menuRes)
+      setTreeData(menus)
+
+      const snapMenu = normalizeRoleMenuSnapshot(roleDetailRes)
+      const snapApi = normalizeRoleApiListSnapshot(roleDetailRes)
+
+      const menuNodesForInfer = mapMenusToTreeData(
+        menus,
+        t,
+        i18n.language,
+        idKey,
+        childrenKey,
+      )
+      const mergedMenuIdsForInfer = [
+        ...new Set(
+          [...snapMenu.menuIds, ...snapMenu.halfCheckedMenuIds].map(String),
+        ),
+      ]
+      let initChecked: string[]
+      let initHalf: string[]
+      if (snapMenu.halfCheckedMenuIds.length > 0) {
+        initChecked = snapMenu.menuIds.map(String)
+        initHalf = snapMenu.halfCheckedMenuIds.map(String)
+      } else {
+        const inferred = inferStrictMenuCheckFromMergedMenuIds(
+          menuNodesForInfer,
+          mergedMenuIdsForInfer,
+        )
+        initChecked = inferred.checkedKeys
+        initHalf = inferred.halfCheckedKeys
+      }
+      setCheckedMenuKeys(initChecked)
+      setHalfCheckedMenuKeys(initHalf)
+
+      let fromApi: PermissionRow[] = []
+      if (listRes != null) {
+        try {
+          /** 含 apiType=0（提交时强制并入，右栏不展示） */
+          fromApi = mapPermissionListResponseToRows(listRes)
+        } catch {
+          fromApi = []
+        }
+      }
+      const fromTree = flattenPermissionsFromMenuTree(menus, idKey)
+      const catalog = dedupePermissionRows([
+        ...fromApi,
+        ...fromTree,
+        ...snapMenu.extraPermissionRows,
+        ...snapApi.extraPermissionRows,
+      ])
+      setAllPermissionRows(catalog)
+
+      const codesFromSnap = [
+        ...new Set([
+          ...snapMenu.permissionCodes,
+          ...snapApi.permissionCodes,
+        ]),
+      ]
+      let nextPermissionCodes = codesFromSnap
+      if (snapApi.apiIds.length) {
+        const idSet = new Set(snapApi.apiIds.map(String))
+        const fromIds = catalog
+          .filter((r) => idSet.has(String(r.id)))
+          .map((r) => r.code)
+          .filter(Boolean)
+        nextPermissionCodes = [...new Set([...nextPermissionCodes, ...fromIds])]
+      }
+      setPermissionCodes(
+        augmentInitialMenuBasePermissionCodes(
+          nextPermissionCodes,
+          catalog,
+          [...initChecked, ...initHalf],
+        ),
+      )
+
+      const firstLeaf =
+        findFirstLeafId(menus, idKey, childrenKey) ??
+        (menus[0]?.[idKey] != null ? String(menus[0][idKey]) : null)
+      if (firstLeaf != null) {
+        const sid = String(firstLeaf)
+        setSelectedMenuId(sid)
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => scrollToMenuSection(sid))
+        })
+      }
+    } catch (e: any) {
+      console.log(e?.message || t('common.error'))
+    } finally {
+      setLoading(false)
+      setPermLoading(false)
+    }
+  }, [roleId, scrollToMenuSection, showToast, t])
+
+  useEffect(() => {
+    if (!active) {
+      resetLocal()
+      return
+    }
+    void bootstrap()
+    // 显隐、roleId、bootstrapKey 变化时拉数；bootstrap 稳定，不写入 deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active, bootstrapKey, roleId, resetLocal])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getPayload: (): RolePermissionAssignPayload => {
+        const menuIds = [
+          ...new Set(
+            [...checkedMenuKeys, ...halfCheckedMenuKeys].map((x) => String(x)),
+          ),
+        ]
+        const permissionCodesMerged = mergeRolePermissionAssignPayloadCodes(
+          permissionCodes,
+          allPermissionRows,
+          menuIds,
+        )
+        return {
+          menuIds,
+          permissionCodes: permissionCodesMerged,
+          rolePermissionCreateDTO: buildRolePermissionCreateDTO(
+            menuIds,
+            permissionCodesMerged,
+            allPermissionRows,
+          ),
+        }
+      },
+      reset: () => {
+        resetLocal()
+      },
+    }),
+    [
+      allPermissionRows,
+      checkedMenuKeys,
+      halfCheckedMenuKeys,
+      permissionCodes,
+      resetLocal,
+    ],
+  )
+
+  const menuTreeNodes = useMemo(
+    () =>
+      treeData.length
+        ? mapMenusToTreeData(treeData, t, i18n.language, idKey, childrenKey)
+        : [],
+    [treeData, t, i18n.language],
+  )
+
+  const menuKeyEntities = useMemo(() => {
+    if (!menuTreeNodes.length) return null
+    const { keyEntities } = convertDataToEntities(menuTreeNodes, {
+      fieldNames: { title: 'title', key: 'key', children: 'children' },
+    })
+    return keyEntities
+  }, [menuTreeNodes])
+
+  const panelVisiblePermissionRows = useMemo(
+    () =>
+      showBuiltinInPanel
+        ? allPermissionRows
+        : allPermissionRows.filter((p) => !isPermissionRowBuiltin(p)),
+    [allPermissionRows, showBuiltinInPanel],
+  )
+
+  const menuPermissionSections = useMemo((): MenuPermissionSection[] => {
+    if (!panelVisiblePermissionRows.length) return []
+    const byMenu: Record<string, PermissionRow[]> = {}
+    const unbound: PermissionRow[] = []
+    for (const p of panelVisiblePermissionRows) {
+      const mid = String((p as PermissionRow).menuId || '').trim()
+      if (!mid) {
+        unbound.push(p)
+        continue
+      }
+      if (!byMenu[mid]) byMenu[mid] = []
+      byMenu[mid].push(p)
+    }
+
+    const bucket: Record<
+      string,
+      {
+        meta: MenuPermissionSection
+        rows: PermissionRow[]
+      }
+    > = {}
+
+    const pushPerm = (
+      path: any[] | null,
+      perm: PermissionRow,
+    ) => {
+      const meta = computePermissionAssignSection(
+        path,
+        perm.code,
+        idKey,
+        childrenKey,
+        t,
+        i18n.language,
+      )
+      if (!meta) return
+      if (!bucket[meta.sectionKey]) {
+        bucket[meta.sectionKey] = {
+          meta: {
+            sectionKey: meta.sectionKey,
+            sectionTitle: meta.sectionTitle,
+            anchorMenuId: meta.anchorMenuId,
+            resourceGroups: [],
+          },
+          rows: [],
+        }
+      }
+      bucket[meta.sectionKey].rows.push(perm)
+    }
+
+    for (const menuId of Object.keys(byMenu)) {
+      const path =
+        treeData.length > 0
+          ? getMenuPathFromRoot(treeData, menuId, idKey, childrenKey)
+          : null
+      for (const perm of byMenu[menuId]) {
+        if (!path) {
+          const orphanKey = `__orphan__${menuId}`
+          if (!bucket[orphanKey]) {
+            bucket[orphanKey] = {
+              meta: {
+                sectionKey: orphanKey,
+                sectionTitle: `${t('system.permission.section_unknown_menu')} (${menuId})`,
+                anchorMenuId: menuId,
+                resourceGroups: [],
+              },
+              rows: [],
+            }
+          }
+          bucket[orphanKey].rows.push(perm)
+          continue
+        }
+        pushPerm(path, perm)
+      }
+    }
+
+    for (const perm of unbound) {
+      pushPerm(null, perm)
+    }
+
+    const orderMap =
+      treeData.length > 0
+        ? menuPreorderIndexMap(treeData, idKey, childrenKey)
+        : new Map<string, number>()
+    const sections: MenuPermissionSection[] = Object.values(bucket).map(
+      (b) => ({
+        ...b.meta,
+        resourceGroups: [
+          {
+            resource: b.meta.sectionKey,
+            permissions: [...b.rows].sort(comparePermissionRowsForAssign),
+          },
+        ],
+      }),
+    )
+
+    sections.sort((a, b) => {
+      if (a.sectionKey.startsWith('__orphan__')) return 1
+      if (b.sectionKey.startsWith('__orphan__')) return -1
+      const ia = orderMap.get(a.anchorMenuId) ?? 1_000_000
+      const ib = orderMap.get(b.anchorMenuId) ?? 1_000_000
+      if (ia !== ib) return ia - ib
+      return a.sectionKey.localeCompare(b.sectionKey)
+    })
+
+    return sections
+  }, [panelVisiblePermissionRows, treeData, t, i18n.language])
+
+  const onMenuCheck = useCallback<TreeProps<DataNode>['onCheck']>(
+    (_raw, info) => {
+      if (!menuKeyEntities) return
+
+      const toggledKey = String(info.node.key)
+      const subtreeIds = collectSubtreeMenuIds(
+        treeData,
+        toggledKey,
+        idKey,
+        childrenKey,
+      )
+      const subtreeCodes = codesForRowsInMenuSubtree(
+        allPermissionRows,
+        subtreeIds,
+      )
+      const checkedFlag = info.checked
+
+      let nextChecked: string[]
+      let nextHalf: string[]
+
+      if (checkedFlag === true) {
+        const conducted = conductCheck(
+          [...new Set([...checkedMenuKeys, toggledKey].map(String))],
+          true,
+          menuKeyEntities,
+        )
+        nextChecked = conducted.checkedKeys.map(String)
+        nextHalf = conducted.halfCheckedKeys.map(String)
+      } else if (checkedFlag === false) {
+        const keySet = new Set(checkedMenuKeys.map(String))
+        for (const id of subtreeIds) keySet.delete(id)
+        const halfSet = new Set(halfCheckedMenuKeys.map(String))
+        for (const id of subtreeIds) halfSet.delete(id)
+        const conducted = conductCheck(
+          Array.from(keySet),
+          {
+            checked: false,
+            halfCheckedKeys: Array.from(halfSet),
+          },
+          menuKeyEntities,
+        )
+        nextChecked = conducted.checkedKeys.map(String)
+        nextHalf = conducted.halfCheckedKeys.map(String)
+      } else {
+        const half = (info?.halfCheckedKeys ?? []).map(String)
+        if (Array.isArray(_raw)) {
+          nextChecked = _raw.map(String)
+          nextHalf = half
+        } else {
+          const obj = _raw as {
+            checked?: React.Key[]
+            halfChecked?: React.Key[]
+          }
+          nextChecked = (obj.checked ?? []).map(String)
+          nextHalf = (obj.halfChecked ?? half).map(String)
+        }
+      }
+
+      if (checkedFlag === true || checkedFlag === false) {
+        setPermissionCodes((prev) =>
+          nextPermissionCodesForMenuSubtree(
+            prev,
+            allPermissionRows,
+            subtreeCodes,
+            checkedFlag === true,
+          ),
+        )
+
+        if (checkedFlag === true && subtreeCodes.size > 0) {
+          const scrollId = resolveScrollAnchorForMenuClick(
+            treeData,
+            toggledKey,
+            panelVisiblePermissionRows,
+            idKey,
+            childrenKey,
+          )
+          if (scrollId) {
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => scrollToMenuSection(scrollId))
+            })
+          }
+        }
+      }
+
+      setCheckedMenuKeys(nextChecked)
+      setHalfCheckedMenuKeys(nextHalf)
+    },
+    [
+      menuKeyEntities,
+      checkedMenuKeys,
+      halfCheckedMenuKeys,
+      treeData,
+      allPermissionRows,
+      panelVisiblePermissionRows,
+      scrollToMenuSection,
+      idKey,
+      childrenKey,
+    ],
+  )
+
+  const togglePermissionCode = useCallback(
+    (perm: PermissionRow) => {
+      setPermissionCodes((prev) => {
+        if (isPermissionRowBuiltin(perm)) return prev
+        const menuSet = new Set(
+          [...checkedMenuKeys, ...halfCheckedMenuKeys].map((x) => String(x)),
+        )
+        if (isPermissionRowMenuLockedBase(perm, menuSet)) return prev
+        if (prev.includes('*')) {
+          const allInView = allPermissionRows.map((p) => p.code)
+          const set = new Set(allInView)
+          set.delete(perm.code)
+          return Array.from(set)
+        }
+        if (prev.includes(perm.code)) {
+          return prev.filter((c) => c !== perm.code)
+        }
+        return [...prev, perm.code]
+      })
+    },
+    [allPermissionRows, checkedMenuKeys, halfCheckedMenuKeys],
+  )
+
+  const toggleGroup = useCallback(
+    (groupCodes: string[], allSelected: boolean) => {
+      setPermissionCodes((prev) => {
+        const menuSet = new Set(
+          [...checkedMenuKeys, ...halfCheckedMenuKeys].map((x) => String(x)),
+        )
+        const isLockedCode = (code: string) =>
+          allPermissionRows.some(
+            (r) =>
+              r.code === code &&
+              (isPermissionRowBuiltin(r) ||
+                isPermissionRowMenuLockedBase(r, menuSet)),
+          )
+        if (prev.includes('*')) {
+          const base = new Set(allPermissionRows.map((p) => p.code))
+          if (allSelected) {
+            for (const c of groupCodes) {
+              if (!isLockedCode(c)) base.delete(c)
+            }
+          } else {
+            for (const c of groupCodes) base.add(c)
+          }
+          return Array.from(base)
+        }
+        const set = new Set(prev)
+        if (allSelected) {
+          for (const c of groupCodes) {
+            if (!isLockedCode(c)) set.delete(c)
+          }
+        } else {
+          for (const c of groupCodes) set.add(c)
+        }
+        return Array.from(set)
+      })
+    },
+    [allPermissionRows, checkedMenuKeys, halfCheckedMenuKeys],
+  )
+
+  const checkedKeysForTree = useMemo(
+    () => ({
+      checked: checkedMenuKeys,
+      halfChecked: halfCheckedMenuKeys,
+    }),
+    [checkedMenuKeys, halfCheckedMenuKeys],
+  )
+
+  const menuCheckedHalfSet = useMemo(
+    () =>
+      new Set(
+        [...checkedMenuKeys, ...halfCheckedMenuKeys].map((x) => String(x)),
+      ),
+    [checkedMenuKeys, halfCheckedMenuKeys],
+  )
+
+  if (!active) return null
+
+  const hasLayoutLock = Boolean(maxHeightClass && String(maxHeightClass).trim())
+
+  const rootLayoutClass = clsx(
+    'flex min-h-0 gap-4 overflow-hidden',
+    hasLayoutLock ? clsx(maxHeightClass, 'min-h-0 flex-1') : 'min-h-[280px]',
+  )
+
+  const scrollColClass =
+    'min-h-0 flex-1 basis-0 overflow-y-auto overflow-x-hidden'
+
+  return (
+    <div className={rootLayoutClass}>
+      <div
+        className={clsx(
+          'flex min-w-0 w-72 shrink-0 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800',
+          hasLayoutLock && 'h-full min-h-0',
+        )}>
+        <div className="flex min-h-[44px] shrink-0 items-center border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50">
+          <h2 className="line-clamp-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
+            {t('system.permission.tree_list')}
+          </h2>
+        </div>
+        <div className={clsx(scrollColClass, 'p-2')}>
+          {loading ? (
+            <div className="p-4 text-center text-sm text-gray-500">
+              {t('common.loading')}
+            </div>
+          ) : (
+            <Tree
+              blockNode
+              checkable
+              checkStrictly
+              virtual={false}
+              className={clsx(
+                'text-sm [&_.ant-tree-node-content-wrapper]:rounded-md',
+                readOnly &&
+                  '[&_.ant-tree-checkbox]:pointer-events-none [&_.ant-tree-checkbox]:cursor-default [&_.ant-tree-checkbox]:opacity-50',
+              )}
+              treeData={menuTreeNodes}
+              checkedKeys={checkedKeysForTree}
+              onCheck={readOnly ? undefined : onMenuCheck}
+              defaultExpandAll
+              selectedKeys={
+                selectedMenuId != null && selectedMenuId !== ''
+                  ? [selectedMenuId]
+                  : []
+              }
+              onSelect={(keys) => {
+                if (keys.length > 0) {
+                  const sid = String(keys[0])
+                  setSelectedMenuId(sid)
+                  const anchor = resolveScrollAnchorForMenuClick(
+                    treeData,
+                    sid,
+                    allPermissionRows,
+                    idKey,
+                    childrenKey,
+                  )
+                  if (anchor) {
+                    requestAnimationFrame(() => {
+                      requestAnimationFrame(() =>
+                        scrollToMenuSection(anchor),
+                      )
+                    })
+                  }
+                }
+              }}
+            />
+          )}
+        </div>
+      </div>
+
+      <div
+        className={clsx(
+          'flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/50',
+          hasLayoutLock && 'h-full min-h-0',
+        )}>
+        <div className="flex min-h-[44px] shrink-0 items-center justify-between gap-3 border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50">
+          <h2 className="line-clamp-1 min-w-0 flex-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
+            {t('system.role.permissions_panel_short')}
+          </h2>
+          <div className="flex shrink-0 select-none items-center gap-1.5">
+            <CxCheckbox
+              checked={showBuiltinInPanel}
+              onChange={(checked) => setShowBuiltinInPanel(checked)}
+              className="shrink-0"
+              aria-label={t(
+                'system.permission.assign_panel.show_builtin_permissions',
+              )}
+            />
+            <button
+              type="button"
+              onClick={() =>
+                setShowBuiltinInPanel(!showBuiltinInPanel)
+              }
+              className="whitespace-nowrap text-left text-[11px] font-medium text-gray-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:no-underline dark:text-gray-300">
+              {t('system.permission.assign_panel.show_builtin_permissions')}
+            </button>
+          </div>
+        </div>
+        <div ref={rightScrollRef} className={clsx(scrollColClass, 'p-3')}>
+          {loading || permLoading ? (
+            <p className="py-8 text-center text-sm text-gray-500">
+              {t('common.loading')}
+            </p>
+          ) : allPermissionRows.length === 0 ? (
+            <p className="py-8 text-center text-sm text-gray-500">
+              {t('system.role.no_permissions_available')}
+            </p>
+          ) : menuPermissionSections.length === 0 ? (
+            <p className="py-8 text-center text-sm text-gray-500">
+              {t('system.role.permissions_panel_expand_builtin_hint')}
+            </p>
+          ) : (
+            <div className="space-y-8">
+              {menuPermissionSections.map(
+                ({
+                  sectionKey,
+                  sectionTitle,
+                  anchorMenuId,
+                  resourceGroups,
+                }) => (
+                  <section
+                    key={sectionKey}
+                    data-perm-menu-section={anchorMenuId}
+                    className="scroll-mt-2">
+                    <h2 className="mb-3 border-b border-gray-200 pb-2 text-sm font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-100">
+                      {sectionTitle}
+                    </h2>
+                    <div className="space-y-6">
+                      {resourceGroups.map(
+                        ({ resource, resourceTitle, permissions: perms }) => {
+                        const groupLabel = resourceTitle ?? resource
+                        const groupCodes = perms.map((p) => p.code)
+                        const isAllSelected = perms.every((perm) =>
+                          isAssignPermissionChecked(
+                            permissionCodes,
+                            perm,
+                            menuCheckedHalfSet,
+                          ),
+                        )
+                        const firstParts = splitPermissionCodeParts(
+                          String(perms[0]?.code ?? ''),
+                        )
+                        /** 与「全选」同行：沿用原 h3+蓝点+uppercase 样式，文案为「末冒号前整段」大写；无则回退 groupLabel */
+                        const groupCodeBeforeLastUpper =
+                          firstParts.length >= 2
+                            ? firstParts.slice(0, -1).join(':').toUpperCase()
+                            : ''
+                        const subgroupHeadingText =
+                          groupCodeBeforeLastUpper || groupLabel
+                        const groupAllBuiltin =
+                          perms.length > 0 &&
+                          perms.every((p) => isPermissionRowBuiltin(p))
+                        return (
+                          <div
+                            key={`${sectionKey}-${resource}`}
+                            className="space-y-2">
+                            <div className="flex min-w-0 items-center justify-between gap-2 border-b border-gray-200 py-0.5 pb-2 dark:border-gray-700">
+                              <h3 className="flex min-w-0 flex-1 items-center gap-2 text-[0.8125rem] font-bold uppercase leading-snug tracking-wider text-gray-900 dark:text-gray-100">
+                                <span className="h-2 w-2 shrink-0 rounded-full bg-blue-500" />
+                                <span
+                                  className="min-w-0 truncate"
+                                  title={subgroupHeadingText}>
+                                  {subgroupHeadingText}
+                                </span>
+                              </h3>
+                              {!readOnly && !groupAllBuiltin && (
+                                <button
+                                  type="button"
+                                  onClick={() =>
+                                    toggleGroup(groupCodes, isAllSelected)
+                                  }
+                                  className="shrink-0 text-xs font-medium text-blue-600 transition-all hover:text-blue-700 active:scale-95 dark:text-blue-400 dark:hover:text-blue-300">
+                                  {isAllSelected
+                                    ? t('common.unselect_all', {
+                                        defaultValue: '取消全选',
+                                      })
+                                    : t('common.select_all', {
+                                        defaultValue: '全选',
+                                      })}
+                                </button>
+                              )}
+                            </div>
+                            <div
+                              className="grid gap-2"
+                              style={{
+                                gridTemplateColumns:
+                                  'repeat(auto-fill, minmax(220px, 1fr))',
+                              }}>
+                              {perms.map((perm) => {
+                                const selected = isAssignPermissionChecked(
+                                  permissionCodes,
+                                  perm,
+                                  menuCheckedHalfSet,
+                                )
+                                const permLocked = isPermissionRowMenuLockedBase(
+                                  perm,
+                                  menuCheckedHalfSet,
+                                )
+                                const permBuiltin = isPermissionRowBuiltin(perm)
+                                const permNoToggle = permLocked || permBuiltin
+                                const codeStr = String(perm.code ?? '')
+                                const codeParts = splitPermissionCodeParts(codeStr)
+                                /** 卡片主文案：仅最后一个冒号后的末段，小写 */
+                                const codeAfterLastColon =
+                                  codeParts.length >= 1
+                                    ? String(
+                                        codeParts[codeParts.length - 1] ?? '',
+                                      ).toLowerCase()
+                                    : ''
+                                return (
+                                  <div
+                                    key={`${sectionKey}-${perm.id}`}
+                                    role={readOnly ? undefined : 'button'}
+                                    tabIndex={readOnly ? undefined : 0}
+                                    className={clsx(
+                                      'group flex items-start gap-2 rounded-lg border p-2 shadow-sm transition-all',
+                                      readOnly || permNoToggle
+                                        ? 'cursor-not-allowed'
+                                        : 'cursor-pointer',
+                                      assignCardShellTone(perm.apiType, selected),
+                                      swaggerHttpMethodLeftAccentClass(
+                                        perm.httpMethod,
+                                        perm.apiType,
+                                      ),
+                                    )}
+                                    onClick={() =>
+                                      !readOnly &&
+                                      !permNoToggle &&
+                                      togglePermissionCode(perm)
+                                    }
+                                    onKeyDown={(e) => {
+                                      if (
+                                        !readOnly &&
+                                        !permNoToggle &&
+                                        (e.key === 'Enter' || e.key === ' ')
+                                      ) {
+                                        e.preventDefault()
+                                        togglePermissionCode(perm)
+                                      }
+                                    }}>
+                                    <CxCheckbox
+                                      checked={selected}
+                                      disabled={readOnly || permNoToggle}
+                                      className="mt-0.5"
+                                      aria-label={perm.code}
+                                      onChange={() =>
+                                        !readOnly &&
+                                        !permNoToggle &&
+                                        togglePermissionCode(perm)
+                                      }
+                                    />
+                                    <div className="min-w-0 flex-1">
+                                      <div
+                                        className={clsx(
+                                          'break-all text-xs font-semibold lowercase leading-snug',
+                                          assignCodeTitleHoverClass(perm.apiType),
+                                        )}>
+                                        {codeAfterLastColon || codeStr || '-'}
+                                      </div>
+                                      {(perm.description || perm.name) && (
+                                        <div
+                                          className="mt-0.5 line-clamp-2 text-[11px] leading-relaxed text-gray-500 dark:text-gray-400"
+                                          title={
+                                            perm.description || perm.name
+                                          }>
+                                          {perm.description || perm.name}
+                                        </div>
+                                      )}
+                                    </div>
+                                  </div>
+                                )
+                              })}
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </section>
+                ),
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+})
+
+RolePermissionAssignPanel.displayName = 'RolePermissionAssignPanel'
+
+export default RolePermissionAssignPanel