cx-chat 0.0.1 → 0.0.3

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

@@ -1,698 +0,0 @@
-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>
-  )
-}