cx-chat 0.0.1 → 0.0.3

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

@@ -1,916 +0,0 @@
-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