cx-chat 0.0.1

package/src/views/page-menus/model-metadata/role/modal/role-permission-assign-panel.tsx

@@ -0,0 +1,698 @@
+import { CxCheckbox, CxInput, CxSkeleton } from '@cx-ui'
+import { Spin } from 'antd'
+import clsx from 'clsx'
+import type { TFunction } from 'i18next'
+import React, {
+  memo,
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useTransition,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+
+export function colKey(metadataId: string, tableId: string, columnId: string) {
+  return `${metadataId}::${tableId}::${columnId}`
+}
+
+/** 提交与勾选态仅用后端表 id（id / tableId），不用 schema+表名占位 */
+function tableIdForPermission(tb: any) {
+  return String(tb?.id ?? tb?.tableId ?? '').trim()
+}
+
+/** 列表卡片 React key：优先表 id，否则用 schema+表名避免冲突 */
+function tableCardDomKey(tb: any) {
+  const id = tableIdForPermission(tb)
+  if (id) return id
+  return `${tb?.tableSchema ?? ''}::${tb?.tableName ?? ''}` || 'table'
+}
+
+/** 提交与勾选态仅用后端列 id（id / columnId），不用列名占位 */
+function columnIdForPermission(col: any) {
+  return String(col?.id ?? col?.columnId ?? '').trim()
+}
+
+function collectColKeysForTables(metadataId: string, tables: any[]): string[] {
+  const keys: string[] = []
+  for (const tb of tables || []) {
+    const tid = tableIdForPermission(tb)
+    if (!tid) continue
+    for (const col of tb.columns || []) {
+      const cid = columnIdForPermission(col)
+      if (!cid) continue
+      keys.push(colKey(metadataId, tid, cid))
+    }
+  }
+  return keys
+}
+
+function clearMetaKeys(prev: Record<string, boolean>, metaId: string) {
+  const prefix = `${metaId}::`
+  const toRemove: string[] = []
+  for (const k of Object.keys(prev)) {
+    if (k.startsWith(prefix)) toRemove.push(k)
+  }
+  if (!toRemove.length) return prev
+  const next = { ...prev }
+  for (const k of toRemove) delete next[k]
+  return next
+}
+
+function mergeKeysTrue(prev: Record<string, boolean>, keys: string[]) {
+  if (!keys.length) return prev
+  for (const k of keys) {
+    if (!prev[k]) {
+      const next = { ...prev }
+      for (const kk of keys) next[kk] = true
+      return next
+    }
+  }
+  return prev
+}
+
+/** 左侧跨多库全选等超大批量：走 startTransition */
+const SELECT_BULK_THRESHOLD = 160
+/** 单库内全选/清库/整表勾选：列数常介于几十～几百，仍易卡主线程，阈值要明显低于左侧 */
+const SINGLE_META_BULK_KEYS = 40
+
+type RolePermissionTableCardProps = {
+  tb: any
+  mid: string
+  /** 列勾选展示用（useDeferredValue 传入），与表头「全选」态解耦，减轻全选尖峰 */
+  fieldSelected: Record<string, boolean>
+  tableHeaderChecked: boolean
+  tableHeaderIndeterminate: boolean
+  toggleTable: (metadataId: string, tableId: string, columns: any[], checked: boolean) => void
+  toggleCol: (k: string, checked: boolean) => void
+  t: TFunction
+}
+
+const RolePermissionTableCard = memo(function RolePermissionTableCard({
+  tb,
+  mid,
+  fieldSelected,
+  tableHeaderChecked,
+  tableHeaderIndeterminate,
+  toggleTable,
+  toggleCol,
+  t,
+}: RolePermissionTableCardProps) {
+  const tid = tableIdForPermission(tb)
+  const cols = Array.isArray(tb.columns) ? tb.columns : []
+  const tState = { checked: tableHeaderChecked, indeterminate: tableHeaderIndeterminate }
+  const tableLabel = [tb.tableSchema, tb.tableName].filter(Boolean).join('.') || tid || '-'
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-3 shadow-sm [content-visibility:auto] dark:border-gray-600 dark:bg-gray-800">
+      <div className="mb-2 flex flex-wrap items-start justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <div className="font-medium text-gray-900 dark:text-gray-100">{tableLabel}</div>
+          {tb.tableComment ? (
+            <div className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{tb.tableComment}</div>
+          ) : null}
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <CxCheckbox
+            checked={tState.checked}
+            disabled={!tid}
+            onChange={(checked) => toggleTable(mid, tid, cols, checked)}
+            aria-label={t('menus.model_metadata.role.select_all_table')}
+          />
+          <span className="text-sm text-gray-700 dark:text-gray-200">
+            {t('menus.model_metadata.role.select_all_table')}
+          </span>
+        </div>
+      </div>
+      {!tid ? (
+        <div className="rounded-md bg-amber-50 px-2 py-2 text-xs text-amber-900 dark:bg-amber-950/40 dark:text-amber-100">
+          {t('menus.model_metadata.role.role_permission_table_missing_id')}
+        </div>
+      ) : (
+        <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))' }}>
+          {cols.map((col: any) => {
+            const cid = columnIdForPermission(col)
+            if (!cid) return null
+            const k = colKey(mid, tid, cid)
+            const cname = col.columnName ?? cid
+            const comment = col.commentText ?? col.columnComment ?? ''
+            return (
+              <label
+                key={k}
+                className="flex cursor-pointer items-start gap-2 rounded-md border border-gray-100 bg-gray-50/80 p-2 dark:border-gray-600 dark:bg-gray-900/40"
+              >
+                <CxCheckbox
+                  checked={!!fieldSelected[k]}
+                  onChange={(checked) => toggleCol(k, checked)}
+                  className="mt-0.5"
+                  aria-label={cname}
+                />
+                <span className="min-w-0 flex-1 text-sm">
+                  <span className="font-medium text-gray-900 dark:text-gray-100">{cname}</span>
+                  {comment ? (
+                    <span className="mt-0.5 block text-xs text-gray-500 dark:text-gray-400">{comment}</span>
+                  ) : null}
+                </span>
+              </label>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+})
+
+type Props = {
+  active: boolean
+  /** 外层每次打开递增，用于在弹窗不关的情况下强制重拉左侧列表与右侧 schema */
+  bootstrapKey?: number
+  maxHeightClass?: string
+  /** 以 metadataId 为 key，避免切换时反复 find */
+  metadataById: Record<string, any>
+  metadataOrder: string[]
+  listLoading: boolean
+  selected: Record<string, boolean>
+  onSelectedChange: (next: Record<string, boolean> | ((prev: Record<string, boolean>) => Record<string, boolean>)) => void
+}
+
+export default function RolePermissionAssignPanel({
+  active,
+  bootstrapKey = 0,
+  maxHeightClass,
+  metadataById,
+  metadataOrder,
+  listLoading,
+  selected,
+  onSelectedChange,
+}: Props) {
+  const { t } = useTranslation()
+  const [leftFilter, setLeftFilter] = useState('')
+  const [activeMetadataId, setActiveMetadataId] = useState<string | null>(null)
+  const [leftBulkBusy, setLeftBulkBusy] = useState(false)
+  /** 仅用于「当前库 + 大批量改 selected」：pending 时卸载右侧字段树，等同左侧勾选非当前库时未挂载那些列 */
+  const [isRightFieldsBulkPending, startRightFieldsBulk] = useTransition()
+
+  const schemaByMetaId = useMemo(() => {
+    const next: Record<string, any[]> = {}
+    for (const id of metadataOrder) {
+      const tables = metadataById[id]?.tables
+      if (Array.isArray(tables)) next[id] = tables
+    }
+    return next
+  }, [metadataOrder, metadataById])
+
+  const metadataRowsView = useMemo(() => {
+    return metadataOrder.map((id) => {
+      const b = metadataById[id]
+      if (!b) return null
+      return { ...b, id, metadataId: id }
+    })
+  }, [metadataOrder, metadataById])
+
+  const filteredMetadataRows = useMemo(() => {
+    const rows = metadataRowsView.filter(Boolean) as any[]
+    const q = leftFilter.trim().toLowerCase()
+    if (!q) return rows
+    return rows.filter((row) => {
+      const blob = [row.subject, row.databaseName, row.dbType]
+        .map((x) => String(x ?? ''))
+        .join(' ')
+        .toLowerCase()
+      return blob.includes(q)
+    })
+  }, [metadataRowsView, leftFilter])
+
+  const activeRow = useMemo(() => {
+    if (!activeMetadataId) return null
+    const b = metadataById[activeMetadataId]
+    if (!b) return null
+    return { ...b, id: activeMetadataId, metadataId: activeMetadataId }
+  }, [metadataById, activeMetadataId])
+
+  const itemTables = useMemo(() => {
+    if (!activeMetadataId) return []
+    const t = schemaByMetaId[activeMetadataId]
+    return Array.isArray(t) ? t : []
+  }, [activeMetadataId, schemaByMetaId])
+
+  useEffect(() => {
+    if (!active) {
+      setLeftFilter('')
+      setLeftBulkBusy(false)
+      setActiveMetadataId(null)
+      return
+    }
+    setLeftFilter('')
+    setLeftBulkBusy(false)
+  }, [active, bootstrapKey])
+
+  useEffect(() => {
+    if (!active || !metadataOrder.length) {
+      setActiveMetadataId(null)
+      return
+    }
+    const firstId = metadataOrder[0]
+    if (firstId == null || String(firstId).trim() === '') {
+      setActiveMetadataId(null)
+      return
+    }
+    setActiveMetadataId((cur) => {
+      if (cur != null && metadataById[cur] != null && metadataOrder.includes(cur)) return cur
+      return String(firstId)
+    })
+  }, [active, bootstrapKey, metadataOrder, metadataById])
+
+  useEffect(() => {
+    if (!active || !filteredMetadataRows.length) return
+    if (!filteredMetadataRows.some((r) => String(r?.id) === activeMetadataId)) {
+      setActiveMetadataId(String(filteredMetadataRows[0].id))
+    }
+  }, [active, filteredMetadataRows, activeMetadataId])
+
+  const getTablesForMeta = useCallback(
+    (metaId: string) => {
+      const t = schemaByMetaId[metaId]
+      return Array.isArray(t) ? t : []
+    },
+    [schemaByMetaId],
+  )
+
+  const selectAllForMetaWithTables = useCallback(
+    (metaId: string, tables: any[]) => {
+      const keys = collectColKeysForTables(metaId, tables)
+      if (!keys.length) return
+      const run = () => onSelectedChange((prev) => mergeKeysTrue(prev, keys))
+      const cur = activeMetadataId != null ? String(activeMetadataId) : ''
+      if (cur && metaId === cur) startRightFieldsBulk(run)
+      else startTransition(run)
+    },
+    [onSelectedChange, activeMetadataId],
+  )
+
+  const clearMeta = useCallback(
+    (metaId: string) => {
+      const prefix = `${metaId}::`
+      let n = 0
+      for (const k of Object.keys(selected)) {
+        if (k.startsWith(prefix)) n += 1
+      }
+      const run = () => onSelectedChange((prev) => clearMetaKeys(prev, metaId))
+      const cur = activeMetadataId != null ? String(activeMetadataId) : ''
+      if (cur && metaId === cur && n > 8) startRightFieldsBulk(run)
+      else if (n > 8) startTransition(run)
+      else run()
+    },
+    [onSelectedChange, selected, activeMetadataId],
+  )
+
+  const handleLeftMetaToggle = useCallback(
+    (metaId: string, checked: boolean) => {
+      if (!checked) {
+        clearMeta(metaId)
+        return
+      }
+      const tables = getTablesForMeta(metaId)
+      selectAllForMetaWithTables(metaId, tables)
+    },
+    [clearMeta, getTablesForMeta, selectAllForMetaWithTables],
+  )
+
+  const isMetaFullySelected = useCallback(
+    (metaId: string) => {
+      const tables = schemaByMetaId[metaId]
+      if (!tables?.length) return false
+      const keys = collectColKeysForTables(metaId, tables)
+      if (!keys.length) return false
+      return keys.every((k) => selected[k])
+    },
+    [schemaByMetaId, selected],
+  )
+
+  const leftListAllSelected = useMemo(() => {
+    if (!filteredMetadataRows.length) return false
+    for (const row of filteredMetadataRows) {
+      const id = String(row?.id ?? '')
+      if (!id) return false
+      if (!isMetaFullySelected(id)) return false
+    }
+    return true
+  }, [filteredMetadataRows, isMetaFullySelected])
+
+  const handleLeftListSelectAll = useCallback(
+    (checked: boolean) => {
+      if (!filteredMetadataRows.length) return
+      if (!checked) {
+        const idSet = new Set(
+          filteredMetadataRows.map((r) => String(r?.id ?? '')).filter(Boolean),
+        )
+        let n = 0
+        for (const k of Object.keys(selected)) {
+          const i1 = k.indexOf('::')
+          if (i1 < 0) continue
+          if (idSet.has(k.slice(0, i1))) n += 1
+        }
+        const run = () =>
+          onSelectedChange((prev) => {
+            let next = { ...prev }
+            for (const id of idSet) {
+              next = clearMetaKeys(next, id)
+            }
+            return next
+          })
+        const cur = activeMetadataId != null ? String(activeMetadataId) : ''
+        const touchesCurrentClear = Boolean(cur && idSet.has(cur))
+        if (touchesCurrentClear && n > SINGLE_META_BULK_KEYS) startRightFieldsBulk(run)
+        else if (n > SELECT_BULK_THRESHOLD) startTransition(run)
+        else run()
+        return
+      }
+      setLeftBulkBusy(true)
+      try {
+        const keysToAdd: string[] = []
+        for (const row of filteredMetadataRows) {
+          const id = String(row?.id ?? '')
+          if (!id) continue
+          keysToAdd.push(...collectColKeysForTables(id, getTablesForMeta(id)))
+        }
+        const run = () => onSelectedChange((prev) => mergeKeysTrue(prev, keysToAdd))
+        const cur = activeMetadataId != null ? String(activeMetadataId) : ''
+        const touchesCurrent =
+          Boolean(cur) && keysToAdd.some((k) => k.startsWith(`${cur}::`))
+        if (touchesCurrent && keysToAdd.length > SINGLE_META_BULK_KEYS) startRightFieldsBulk(run)
+        else if (keysToAdd.length > SELECT_BULK_THRESHOLD) startTransition(run)
+        else run()
+      } finally {
+        setLeftBulkBusy(false)
+      }
+    },
+    [filteredMetadataRows, getTablesForMeta, onSelectedChange, selected, activeMetadataId],
+  )
+
+  const toggleCol = useCallback(
+    (k: string, checked: boolean) => {
+      onSelectedChange((prev) => ({ ...prev, [k]: checked }))
+    },
+    [onSelectedChange],
+  )
+
+  const tableCheckboxState = useCallback(
+    (metadataId: string, tableId: string, columns: any[]) => {
+      if (!String(metadataId ?? '').trim() || !String(tableId ?? '').trim()) {
+        return { checked: false, indeterminate: false }
+      }
+      const keys: string[] = []
+      for (const col of columns || []) {
+        const cid = columnIdForPermission(col)
+        if (!cid) continue
+        keys.push(colKey(metadataId, tableId, cid))
+      }
+      if (!keys.length) return { checked: false, indeterminate: false }
+      let on = 0
+      for (const k of keys) {
+        if (selected[k]) on += 1
+      }
+      return {
+        checked: on === keys.length && keys.length > 0,
+        indeterminate: on > 0 && on < keys.length,
+      }
+    },
+    [selected],
+  )
+
+  const toggleTable = useCallback(
+    (metadataId: string, tableId: string, columns: any[], checked: boolean) => {
+      if (!String(metadataId ?? '').trim() || !String(tableId ?? '').trim()) return
+      const cols = columns || []
+      const run = () =>
+        onSelectedChange((prev) => {
+          const next = { ...prev }
+          for (const col of cols) {
+            const cid = columnIdForPermission(col)
+            if (!cid) continue
+            next[colKey(metadataId, tableId, cid)] = checked
+          }
+          return next
+        })
+      const cur = activeMetadataId != null ? String(activeMetadataId) : ''
+      if (cur && metadataId === cur && cols.length > SINGLE_META_BULK_KEYS) startRightFieldsBulk(run)
+      else if (cols.length > SINGLE_META_BULK_KEYS) startTransition(run)
+      else run()
+    },
+    [onSelectedChange, activeMetadataId],
+  )
+
+  const mid = activeMetadataId ?? ''
+
+  /** 右侧字段区展示用：与 transition 批量更新配合，把海量 Checkbox 的提交拆到多帧 */
+  const fieldSelected = useDeferredValue(selected)
+
+  const rightAllSelected = useMemo(() => {
+    if (!mid || !itemTables.length) return false
+    const keys = collectColKeysForTables(mid, itemTables)
+    if (!keys.length) return false
+    return keys.every((k) => selected[k])
+  }, [mid, itemTables, selected])
+
+  const fieldsScrollRef = useRef<HTMLDivElement>(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'
+
+  if (!active) return null
+
+  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 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('menus.model_metadata.role.role_permission_metadata_list')}
+          </h2>
+          {!listLoading && metadataOrder.length > 0 && filteredMetadataRows.length > 0 ? (
+            <div className="flex shrink-0 select-none items-center gap-1.5">
+              {leftBulkBusy ? (
+                <Spin size="small" />
+              ) : (
+                <>
+                  <CxCheckbox
+                    checked={leftListAllSelected}
+                    onChange={(c) => handleLeftListSelectAll(c)}
+                    className="shrink-0"
+                    aria-label={t('menus.model_metadata.role.role_permission_select_all')}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => handleLeftListSelectAll(!leftListAllSelected)}
+                    className="whitespace-nowrap text-left text-[11px] font-medium text-gray-600 underline-offset-2 hover:underline dark:text-gray-300"
+                  >
+                    {t('menus.model_metadata.role.role_permission_select_all')}
+                  </button>
+                </>
+              )}
+            </div>
+          ) : null}
+        </div>
+        <div className="shrink-0 border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+          <CxInput
+            allowClear
+            disabled={listLoading}
+            value={leftFilter}
+            onChange={(e) => setLeftFilter(e.target.value)}
+            placeholder={t('menus.model_metadata.role.role_permission_filter_placeholder')}
+            className="w-full"
+          />
+        </div>
+        <div className={clsx(scrollColClass, 'p-2')}>
+          {listLoading ? (
+            <ul className="space-y-2 px-1 py-1">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <li key={i}>
+                  <CxSkeleton
+                    active
+                    avatar={{ size: 20, shape: 'square' }}
+                    paragraph={{ rows: 2, width: ['92%', '65%'] }}
+                    title={false}
+                  />
+                </li>
+              ))}
+            </ul>
+          ) : metadataOrder.length === 0 ? (
+            <p className="px-2 py-6 text-center text-sm text-gray-500">{t('menus.model_metadata.role.role_permission_no_metadata')}</p>
+          ) : filteredMetadataRows.length === 0 ? (
+            <p className="px-2 py-6 text-center text-sm text-gray-500">{t('common.no_data')}</p>
+          ) : (
+            <ul className="space-y-1">
+              {filteredMetadataRows.map((row) => {
+                const id = String(row?.id ?? '')
+                const isActive = id === activeMetadataId
+                return (
+                  <li key={id || JSON.stringify(row)}>
+                    <div
+                      className={clsx(
+                        'flex w-full items-stretch overflow-hidden rounded-lg border text-left text-sm transition-colors',
+                        isActive
+                          ? 'border-blue-300 bg-blue-50 text-blue-900 dark:border-blue-700 dark:bg-blue-950/40 dark:text-blue-100'
+                          : 'border-transparent bg-transparent text-gray-800 dark:text-gray-100',
+                      )}
+                    >
+                      <div
+                        className="flex shrink-0 items-center px-2 py-2"
+                        onClick={(e) => e.stopPropagation()}
+                        onKeyDown={(e) => e.stopPropagation()}
+                        role="presentation"
+                      >
+                        {leftBulkBusy ? (
+                          <Spin size="small" />
+                        ) : (
+                          <CxCheckbox
+                            checked={isMetaFullySelected(id)}
+                            onChange={(c) => handleLeftMetaToggle(id, c)}
+                            aria-label={String(row.subject ?? id)}
+                          />
+                        )}
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => id && setActiveMetadataId(id)}
+                        className={clsx(
+                          'min-w-0 flex-1 px-2 py-2 text-left hover:bg-gray-100/80 dark:hover:bg-gray-700/50',
+                          isActive && 'hover:bg-blue-100/80 dark:hover:bg-blue-950/60',
+                        )}
+                      >
+                        <div className="line-clamp-2 font-medium">{row.subject ?? id}</div>
+                        <div className="mt-0.5 line-clamp-1 text-xs text-gray-500 dark:text-gray-400">
+                          {(row.databaseName ?? '-') + ' / ' + (row.dbType ?? '-')}
+                        </div>
+                      </button>
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </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-2 min-w-0 flex-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
+            {t('menus.model_metadata.role.role_permission_fields_panel')}
+            {activeRow?.subject ? ` — ${activeRow.subject}` : ''}
+          </h2>
+          {mid && itemTables.length > 0 ? (
+            <div className="flex shrink-0 select-none items-center gap-1.5">
+              <CxCheckbox
+                checked={rightAllSelected}
+                onChange={(c) => {
+                  if (c) selectAllForMetaWithTables(mid, itemTables)
+                  else clearMeta(mid)
+                }}
+                className="shrink-0"
+                aria-label={t('menus.model_metadata.role.role_permission_select_all')}
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  if (rightAllSelected) clearMeta(mid)
+                  else selectAllForMetaWithTables(mid, itemTables)
+                }}
+                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('menus.model_metadata.role.role_permission_select_all')}
+              </button>
+            </div>
+          ) : null}
+        </div>
+        <div
+          ref={fieldsScrollRef}
+          className={clsx(scrollColClass, 'relative p-3')}
+          aria-busy={listLoading || isRightFieldsBulkPending || undefined}
+        >
+          {listLoading ? (
+            <div className="space-y-4">
+              {[0, 1].map((block) => (
+                <div
+                  key={block}
+                  className="rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-600 dark:bg-gray-800"
+                >
+                  <CxSkeleton active title={{ width: `${48 + block * 8}%` }} paragraph={{ rows: 1, width: '100%' }} />
+                  <div
+                    className="mt-3 grid gap-2"
+                    style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))' }}
+                  >
+                    {Array.from({ length: 6 }).map((_, cell) => (
+                      <CxSkeleton
+                        key={cell}
+                        active
+                        title={false}
+                        paragraph={{ rows: 2, width: ['100%', '72%'] }}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : !mid ? (
+            <p className="py-8 text-center text-sm text-gray-500">{t('common.no_data')}</p>
+          ) : itemTables.length === 0 ? (
+            <p className="py-8 text-center text-sm text-gray-500">{t('menus.model_metadata.role.role_permission_schema_empty')}</p>
+          ) : (
+            <>
+              <section
+                className={clsx(
+                  'space-y-4 transition-opacity duration-150',
+                  isRightFieldsBulkPending && 'pointer-events-none opacity-50',
+                )}
+              >
+                {(isRightFieldsBulkPending ? itemTables.slice(0, 1) : itemTables).map((tb: any) => {
+                  const tid = tableIdForPermission(tb)
+                  const cols = Array.isArray(tb.columns) ? tb.columns : []
+                  const tState = tid
+                    ? tableCheckboxState(mid, tid, cols)
+                    : { checked: false, indeterminate: false }
+                  return (
+                    <RolePermissionTableCard
+                      key={`${mid}::${tableCardDomKey(tb)}`}
+                      tb={tb}
+                      mid={mid}
+                      fieldSelected={fieldSelected}
+                      tableHeaderChecked={tState.checked}
+                      tableHeaderIndeterminate={tState.indeterminate}
+                      toggleTable={toggleTable}
+                      toggleCol={toggleCol}
+                      t={t}
+                    />
+                  )
+                })}
+              </section>
+              {isRightFieldsBulkPending ? (
+                <div className="pointer-events-none absolute inset-0 z-[1] flex flex-col items-center justify-center gap-2 bg-white/50 backdrop-blur-[2px] dark:bg-gray-950/45">
+                  <Spin size="large" />
+                  <p className="max-w-[240px] px-4 text-center text-xs leading-relaxed text-gray-700 dark:text-gray-200">
+                    {t('common.loading')}
+                  </p>
+                </div>
+              ) : null}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}