cx-chat 0.0.1

package/src/components/table-view/select-table-view.tsx

@@ -0,0 +1,1094 @@
+import { Form } from 'antd'
+import clsx from 'clsx'
+import React, {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { flushSync } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+
+import { keysEqual } from '@/components/common/lite-table'
+import Pagination from '@/components/common/pagination'
+import { CxButton, CxCheckbox, CxEmptyState, CxRadio, CxTable, CxTooltip } from '@cx-ui'
+import { SearchArea } from './components/search-area'
+import {
+  TABLE_VIEW_DEFAULT_PAGE_SIZE_OPTIONS,
+  TABLE_VIEW_TREE_DEFAULTS,
+  type ListRenderContext,
+  type SearchButtonSize,
+  type SearchField,
+  type SelectTableViewProps,
+  type TreeConfig,
+  type TreeContext,
+} from './components/table-view.types'
+import { normalizeTreeAPIResult } from './components/tree-api-normalize'
+import { TreeSidebar } from './components/tree-sidebar'
+
+const isDev = import.meta.env.DEV
+
+function collectAllTreeNodeKeys(
+  nodes: any[] | undefined,
+  idKey: string,
+  childrenKey: string,
+): (string | number)[] {
+  const keys: (string | number)[] = []
+  const walk = (list: any[]) => {
+    for (const n of list) {
+      const id = n?.[idKey]
+      if (id !== undefined && id !== null) keys.push(id)
+      const children = n?.[childrenKey]
+      if (Array.isArray(children) && children.length) walk(children)
+    }
+  }
+  if (Array.isArray(nodes)) walk(nodes)
+  return keys
+}
+
+function normalizeSearchValuesByFields(
+  values: Record<string, any>,
+  searchFields: SearchField[] | undefined,
+) {
+  const next: Record<string, any> = { ...values }
+  const fields = searchFields ?? []
+  for (const field of fields) {
+    if (field.type !== 'dateRange') continue
+    const startKey = field.rangeStartProp || `${field.prop}Start`
+    const endKey = field.rangeEndProp || `${field.prop}End`
+    const format = field.format || 'YYYY-MM-DD HH:mm:ss'
+    const range = values[field.prop]
+    if (Array.isArray(range) && range[0] && range[1]) {
+      if (field.showTime) {
+        next[startKey] = range[0].format(format)
+        next[endKey] = range[1].format(format)
+      } else {
+        next[startKey] = range[0].startOf('day').format(format)
+        next[endKey] = range[1].endOf('day').format(format)
+      }
+    } else {
+      next[startKey] = undefined
+      next[endKey] = undefined
+    }
+  }
+  return next
+}
+
+/**
+ * 无 ListPageView 顶栏，仅搜索 + 表格（+ 可选左侧树）。
+ * 数据与请求与 `createSelectTableConfig` / `createListPageConfig` + `ListPageView` 同源，便于弹框内「选用户」等复用同一套 tableAPI / searchFields。
+ * 单选：行点击始终选中该行（不二次点击取消）；多选：行点击在已选/未选之间切换。
+ */
+export default function SelectTableView({
+  className,
+  columns,
+  defaultValue = null,
+  expectTree = false,
+  layout = 'vertical',
+  leftWidth,
+  noPadding = false,
+  onChange,
+  pageConfig,
+  removeSelectedLabelKey = 'selectTable.remove_selected',
+  rowKey = 'id',
+  searchAreaExtra,
+  searchSlot,
+  selectedPanelTitleKey = 'selectTable.selected_panel',
+  selectedPanelColumns,
+  showSelectedPanel = true,
+  treeCheckable = false,
+  treeCheckedKeys,
+  onTreeCheck,
+  treeRenderLabel,
+  selectionMode,
+  value,
+}: SelectTableViewProps) {
+  const { t } = useTranslation()
+  const singleRadioName = `select-table-view-single-${useId()}`
+  const [form] = Form.useForm()
+
+  const isSingle = selectionMode === 'single'
+  const isMultiple = selectionMode === 'multiple'
+  const isNone = selectionMode === 'none'
+  const isControlled = value !== undefined && typeof onChange === 'function'
+
+  const [innerSingle, setInnerSingle] = useState<any | null>(() =>
+    isSingle ? (defaultValue as any) ?? null : null,
+  )
+  const [innerMulti, setInnerMulti] = useState<any[]>(() =>
+    !isSingle && Array.isArray(defaultValue) ? [...defaultValue] : [],
+  )
+
+  const selectedSingle = isSingle
+    ? isControlled
+      ? (value as any) ?? null
+      : innerSingle
+    : null
+  const selectedMulti = !isSingle
+    ? isControlled
+      ? Array.isArray(value)
+        ? value
+        : []
+      : innerMulti
+    : []
+
+  const setSelectedSingle = useCallback(
+    (next: any | null) => {
+      if (!isControlled) setInnerSingle(next)
+      onChange?.(next)
+    },
+    [isControlled, onChange],
+  )
+
+  const setSelectedMulti = useCallback(
+    (next: any[]) => {
+      if (!isControlled) setInnerMulti(next)
+      onChange?.(next)
+    },
+    [isControlled, onChange],
+  )
+
+  /** 多选：下方列表待批量移除的勾选 */
+  const [bottomCheckedKeys, setBottomCheckedKeys] = useState<Set<string>>(
+    () => new Set(),
+  )
+
+  const {
+    fetchTableData,
+    handleReset,
+    handleSearch,
+    handleTableChange,
+    pageInfo = {},
+    pageSizeOptions: pageSizeOptionsFromConfig,
+    paginationData,
+    patchSearchAndRefresh,
+    replaceSearchAndRefresh,
+    searchFields,
+    searchFormData,
+    setSearchFormData,
+    table: tableConfig = {},
+    tableData,
+    tree,
+    treeAPI,
+    treeReloadSignal = 0,
+  } = pageConfig
+
+  const pageSizeOptions =
+    pageSizeOptionsFromConfig?.length
+      ? pageSizeOptionsFromConfig
+      : [...TABLE_VIEW_DEFAULT_PAGE_SIZE_OPTIONS]
+
+  const table = tableConfig || {}
+  const tableScrollX =
+    table.scrollX === false ? undefined : ((table.scrollX ?? 'max-content') as any)
+  const searchButtonSize: SearchButtonSize =
+    pageInfo.searchButtonSize ?? 'default'
+
+  const hasTree = !!(treeAPI || tree)
+  const mergedTree: TreeConfig | undefined = useMemo(() => {
+    if (!hasTree) return undefined
+    return {
+      ...TABLE_VIEW_TREE_DEFAULTS,
+      ...tree,
+      title: tree?.title ?? pageInfo.title,
+    }
+  }, [hasTree, tree, pageInfo.title])
+
+  useEffect(() => {
+    if (expectTree && !treeAPI && isDev) {
+      console.warn(
+        '[SelectTableView] expectTree 为 true 但 pageConfig 未配置 treeAPI',
+      )
+    }
+  }, [expectTree, treeAPI])
+
+  const [treeData, setTreeData] = useState<any[]>([])
+  const [treeDataLoaded, setTreeDataLoaded] = useState(!hasTree)
+  const [expandedKeys, setExpandedKeys] = useState<Set<string | number>>(
+    new Set(),
+  )
+  const [selectedKey, setSelectedKey] = useState<string | number | null>(null)
+
+  const idKey = mergedTree?.fieldNames?.id ?? 'id'
+  const childrenKey = mergedTree?.fieldNames?.children ?? 'children'
+  const searchField = mergedTree?.searchField ?? 'id'
+  const autoSearch = mergedTree?.autoSearch ?? true
+  const unselectText = mergedTree?.unselectText ?? 'common.unselect_tree'
+
+  useEffect(() => {
+    if (!treeAPI) {
+      setTreeDataLoaded(true)
+      return
+    }
+    let mounted = true
+    setTreeDataLoaded(false)
+    treeAPI()
+      .then((raw) => {
+        if (!mounted) return
+        setTreeData(normalizeTreeAPIResult(raw))
+        setTreeDataLoaded(true)
+      })
+      .catch((err) => {
+        if (!mounted) return
+        console.error('[SelectTableView] Tree fetch error:', err)
+        setTreeDataLoaded(true)
+      })
+    return () => {
+      mounted = false
+    }
+  }, [treeAPI, hasTree, treeReloadSignal])
+
+  useEffect(() => {
+    if (!mergedTree?.defaultExpandAll || !treeData.length) return
+    setExpandedKeys(
+      new Set(collectAllTreeNodeKeys(treeData, idKey, childrenKey)),
+    )
+  }, [treeData, mergedTree?.defaultExpandAll, idKey, childrenKey])
+
+  const findNodeByKey = useCallback(
+    (nodes: any[], key: any): any | null => {
+      for (const n of nodes) {
+        if (n[idKey] === key) return n
+        const children = n[childrenKey]
+        if (Array.isArray(children)) {
+          const found = findNodeByKey(children, key)
+          if (found) return found
+        }
+      }
+      return null
+    },
+    [idKey, childrenKey],
+  )
+
+  const toggleTreeExpand = useCallback((key: any, e?: React.MouseEvent) => {
+    if (e) e.stopPropagation()
+    setExpandedKeys((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }, [])
+
+  const handleTreeSelect = useCallback(
+    (key: any) => {
+      const formSnap = normalizeSearchValuesByFields(
+        form.getFieldsValue(true),
+        searchFields ?? [],
+      )
+      const mergedBase = { ...(searchFormData || {}), ...formSnap }
+
+      if (key == null) {
+        setSelectedKey(null)
+        mergedTree?.onSelect?.(null)
+        if (!mergedTree?.searchField) return
+        const next = { ...mergedBase }
+        delete next[searchField]
+        if (replaceSearchAndRefresh && autoSearch) {
+          replaceSearchAndRefresh(next)
+        } else if (setSearchFormData) {
+          flushSync(() => {
+            setSearchFormData(next)
+          })
+          if (autoSearch) handleSearch()
+        }
+        return
+      }
+
+      setSelectedKey(key)
+      const node = findNodeByKey(treeData, key)
+      if (!node) return
+      mergedTree?.onSelect?.(node)
+      if (!mergedTree?.searchField) return
+      const full = { ...mergedBase, [searchField]: node[idKey] }
+      if (patchSearchAndRefresh && autoSearch) {
+        patchSearchAndRefresh(full)
+      } else if (setSearchFormData) {
+        flushSync(() => {
+          setSearchFormData(full)
+        })
+        if (autoSearch) handleSearch()
+      }
+    },
+    [
+      treeData,
+      findNodeByKey,
+      form,
+      mergedTree,
+      searchField,
+      idKey,
+      autoSearch,
+      patchSearchAndRefresh,
+      replaceSearchAndRefresh,
+      searchFields,
+      searchFormData,
+      setSearchFormData,
+      handleSearch,
+    ],
+  )
+
+  useEffect(() => {
+    if (mergedTree?.defaultSelectRoot === false) return
+    if (!treeDataLoaded || treeData.length === 0) return
+    if (selectedKey != null) return
+    const root = treeData[0]
+    const key = root?.[idKey]
+    if (key === undefined || key === null) return
+    handleTreeSelect(key)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 树就绪且无选中时一次
+  }, [
+    mergedTree?.defaultSelectRoot,
+    treeDataLoaded,
+    treeData,
+    idKey,
+    selectedKey,
+    handleTreeSelect,
+  ])
+
+  const selectedNode =
+    selectedKey != null ? findNodeByKey(treeData, selectedKey) : null
+  const treeCtx: TreeContext | undefined = mergedTree
+    ? { selectedKey, selectedNode, treeData, treeDataLoaded }
+    : undefined
+
+  React.useEffect(() => {
+    if (pageConfig) {
+      ;(pageConfig as any).treeContext = treeCtx
+    }
+  }, [treeCtx, pageConfig])
+
+  useLayoutEffect(() => {
+    form.setFieldsValue(
+      normalizeSearchValuesByFields(searchFormData || {}, searchFields),
+    )
+  }, [form, searchFields, searchFormData])
+
+  const applySearchFromForm = () => {
+    const vals = form.getFieldsValue(true)
+    let normalizedVals = normalizeSearchValuesByFields(vals, searchFields)
+    const treeListSearchKey =
+      mergedTree?.searchField ??
+      (treeAPI ? TABLE_VIEW_TREE_DEFAULTS.searchField : undefined)
+    if (
+      treeListSearchKey &&
+      searchFormData &&
+      Object.prototype.hasOwnProperty.call(searchFormData, treeListSearchKey)
+    ) {
+      normalizedVals = {
+        ...normalizedVals,
+        [treeListSearchKey]: searchFormData[treeListSearchKey],
+      }
+    }
+    flushSync(() => {
+      setSearchFormData?.(normalizedVals)
+    })
+    handleSearch()
+  }
+
+  const onReset = () => {
+    handleReset()
+  }
+
+  const renderCell = (col: any, record: any, rowIndex: number) => {
+    const fieldKey = col.dataIndex ?? col.key
+    if (col.render) {
+      return col.render(record[fieldKey], record, rowIndex)
+    }
+    const raw = record[fieldKey]
+    if (col.ellipsis) {
+      const s = raw != null && raw !== '' ? String(raw) : '-'
+      const inner = (
+        <div className="min-w-0 max-w-full overflow-hidden">
+          <span className="block truncate">{s}</span>
+        </div>
+      )
+      if (s === '-') return inner
+      const placement = col.ellipsisTooltipPlacement ?? 'right'
+      const tw = col.ellipsisTooltipWidth
+      const maxW =
+        tw == null || tw === ''
+          ? '300px'
+          : typeof tw === 'number'
+            ? `${tw}px`
+            : String(tw)
+      return (
+        <CxTooltip
+          placement={placement}
+          styles={{
+            root: { maxWidth: maxW },
+          }}
+          title={
+            <div
+              className="max-h-[50vh] overflow-y-auto whitespace-pre-wrap break-words text-left"
+              style={{ maxWidth: maxW }}
+            >
+              {s}
+            </div>
+          }
+        >
+          {inner}
+        </CxTooltip>
+      )
+    }
+    return raw
+  }
+
+  const listCtxBase: ListRenderContext = {
+    columns: columns ?? [],
+    renderCell,
+    tableData,
+    t,
+    tree: treeCtx,
+  }
+
+  const showListArea =
+    !mergedTree ||
+    !!selectedKey ||
+    mergedTree?.sameNodeReselect === 'deselect'
+  const showNoDataEmpty = showListArea && paginationData.total === 0
+
+  const searchAreaExtraNode =
+    searchAreaExtra == null || searchAreaExtra === false
+      ? null
+      : typeof searchAreaExtra === 'function'
+        ? (searchAreaExtra as (ctx: any) => React.ReactNode)({
+            tree: treeCtx,
+            searchButtonSize,
+          })
+        : searchAreaExtra
+
+  const singleColumns = useMemo(() => {
+    if (!isSingle) return columns
+    const selectCol = {
+      key: '__select',
+      title: '',
+      width: 48,
+      render: (_: unknown, data: any) => {
+        const k = data?.[rowKey]
+        const sel =
+          selectedSingle &&
+          keysEqual(selectedSingle?.[rowKey], k)
+        return (
+          <CxRadio
+            name={singleRadioName}
+            checked={!!sel}
+            onClick={(e) => e.stopPropagation()}
+            onChange={() => setSelectedSingle(data)}
+          />
+        )
+      },
+    }
+    return [selectCol, ...columns] as any[]
+  }, [isSingle, columns, rowKey, selectedSingle, setSelectedSingle, t])
+
+  // selectionMode 为 'none' 时，不添加选择列
+  const displayColumns = isNone ? columns : singleColumns
+
+  const toggleMultiTop = useCallback(
+    (record: any) => {
+      const k = record?.[rowKey]
+      const exists = selectedMulti.some((r) =>
+        keysEqual(r?.[rowKey], k),
+      )
+      if (exists) {
+        setSelectedMulti(selectedMulti.filter((r) => !keysEqual(r?.[rowKey], k)))
+      } else {
+        setSelectedMulti([...selectedMulti, record])
+      }
+    },
+    [rowKey, selectedMulti, setSelectedMulti],
+  )
+
+  /** 多选：全选/取消全选当前页（仅影响上方列表当前 tableData） */
+  const toggleMultiSelectAllCurrentPage = useCallback(
+    (checked: boolean) => {
+      if (!Array.isArray(tableData) || tableData.length === 0) return
+      if (!checked) {
+        setSelectedMulti(
+          selectedMulti.filter(
+            (r) =>
+              !tableData.some((row) => keysEqual(row?.[rowKey], r?.[rowKey])),
+          ),
+        )
+        return
+      }
+
+      const next = [...selectedMulti]
+      for (const row of tableData) {
+        const k = row?.[rowKey]
+        const exists = next.some((r) => keysEqual(r?.[rowKey], k))
+        if (!exists) next.push(row)
+      }
+      setSelectedMulti(next)
+    },
+    [rowKey, selectedMulti, setSelectedMulti, tableData],
+  )
+
+  /** 单选：每次点击行都是选中该行（同一条再点仍为选中，不取消） */
+  const selectSingleRow = useCallback(
+    (record: any) => {
+      setSelectedSingle(record)
+    },
+    [setSelectedSingle],
+  )
+
+  const bottomToggleCheck = useCallback((record: any) => {
+    const k = String(record?.[rowKey])
+    setBottomCheckedKeys((prev) => {
+      const next = new Set(prev)
+      if (next.has(k)) next.delete(k)
+      else next.add(k)
+      return next
+    })
+  }, [rowKey])
+
+  /** 已选择区：全选/取消全选（用于批量移除的勾选） */
+  const toggleBottomSelectAll = useCallback((checked: boolean) => {
+    if (!checked) {
+      setBottomCheckedKeys(new Set())
+      return
+    }
+    setBottomCheckedKeys(
+      new Set(selectedMulti.map((r) => String(r?.[rowKey]))),
+    )
+  }, [rowKey, selectedMulti])
+
+  const removeBottomChecked = useCallback(() => {
+    if (bottomCheckedKeys.size === 0) return
+    const next = selectedMulti.filter(
+      (r) => !bottomCheckedKeys.has(String(r?.[rowKey])),
+    )
+    setSelectedMulti(next)
+    setBottomCheckedKeys(new Set())
+  }, [bottomCheckedKeys, rowKey, selectedMulti, setSelectedMulti])
+
+  const multiBottomColumns = useMemo(() => {
+    const bottomBase = (selectedPanelColumns?.length ? selectedPanelColumns : columns) as any[]
+    const bottomAllChecked =
+      selectedMulti.length > 0 &&
+      selectedMulti.every((r) => bottomCheckedKeys.has(String(r?.[rowKey])))
+    const checkCol = {
+      key: '__chk',
+      title: (
+        <div className="flex items-center justify-center">
+          <CxCheckbox
+            checked={bottomAllChecked}
+            size="md"
+            aria-label={t('selectTable.select_all')}
+            onChange={(checked) => toggleBottomSelectAll(checked)}
+          />
+        </div>
+      ),
+      width: 44,
+      onHeaderCell: () => ({ className: 'cx-table__select-col' }),
+      onCell: () => ({ className: 'cx-table__select-col' }),
+      render: (_: unknown, data: any) => {
+        const k = String(data?.[rowKey])
+        return (
+          <div className="flex items-center justify-center">
+            <CxCheckbox
+              checked={bottomCheckedKeys.has(k)}
+              size="md"
+              aria-label={t('selectTable.mark_remove')}
+              onChange={() => bottomToggleCheck(data)}
+            />
+          </div>
+        )
+      },
+    }
+    return [checkCol, ...(bottomBase ?? [])] as any[]
+  }, [
+    selectedPanelColumns,
+    columns,
+    rowKey,
+    selectedMulti,
+    bottomCheckedKeys,
+    bottomToggleCheck,
+    toggleBottomSelectAll,
+    t,
+  ])
+
+  /** 多选：上方列表首列复选框，与行点击一致；点选框时阻止冒泡避免与行点击重复触发 */
+  const multiTopColumns = useMemo(() => {
+    const pageAllSelected =
+      Array.isArray(tableData) &&
+      tableData.length > 0 &&
+      tableData.every((row) =>
+        selectedMulti.some((r) => keysEqual(r?.[rowKey], row?.[rowKey])),
+      )
+    const checkCol = {
+      key: '__select',
+      title: (
+        <div className="flex items-center justify-center">
+          <CxCheckbox
+            checked={pageAllSelected}
+            size="md"
+            aria-label={t('selectTable.select_all')}
+            onChange={(checked) => toggleMultiSelectAllCurrentPage(checked)}
+          />
+        </div>
+      ),
+      width: 48,
+      onHeaderCell: () => ({ className: 'cx-table__select-col' }),
+      onCell: () => ({ className: 'cx-table__select-col' }),
+      render: (_: unknown, data: any) => {
+        const k = data?.[rowKey]
+        const sel = selectedMulti.some((r) =>
+          keysEqual(r?.[rowKey], k),
+        )
+        return (
+          <div className="flex items-center justify-center">
+            <CxCheckbox
+              checked={sel}
+              size="md"
+              aria-label={t('selectTable.select_row')}
+              onChange={() => toggleMultiTop(data)}
+            />
+          </div>
+        )
+      },
+    }
+    return [checkCol, ...columns] as any[]
+  }, [
+    columns,
+    rowKey,
+    selectedMulti,
+    t,
+    tableData,
+    toggleMultiTop,
+    toggleMultiSelectAllCurrentPage,
+  ])
+
+  const multiListCtx: ListRenderContext = {
+    ...listCtxBase,
+    columns: multiBottomColumns,
+    tableData: selectedMulti,
+  }
+
+  /** 多选：上方列表上下文，带复选框 */
+  const multiTopListCtx: ListRenderContext = {
+    ...listCtxBase,
+    columns: multiTopColumns,
+  }
+
+  const singleListCtx: ListRenderContext = {
+    ...listCtxBase,
+    columns: displayColumns,
+  }
+
+  return (
+    <div
+      className={clsx(
+        'select-table flex min-h-0 h-full w-full min-w-0 flex-col',
+        mergedTree ? 'select-table-tree' : '',
+        isMultiple ? 'select-table-multiple' : '',
+        className,
+      )}>
+      <div
+        className={clsx(
+          'flex min-h-0 w-full flex-1 flex-col',
+          noPadding ? '' : 'p-5 pb-px',
+          mergedTree && 'flex-row gap-4 items-stretch',
+        )}>
+      {mergedTree ? (
+        <div className="select-table-sidebar">
+          <TreeSidebar
+            expandedKeys={expandedKeys}
+            onSelect={handleTreeSelect}
+            onToggleExpand={toggleTreeExpand}
+            selectedKey={selectedKey}
+            tree={mergedTree}
+            treeData={treeData}
+            checkable={treeCheckable}
+            checkedKeys={treeCheckedKeys}
+            onCheck={onTreeCheck}
+            renderLabel={treeRenderLabel}
+          />
+        </div>
+      ) : null}
+      <div
+        className={clsx(
+          mergedTree ? 'flex-1 min-w-0 h-full' : 'w-full',
+          'flex flex-col min-h-0',
+          // 外层纵向滚动会带动整张表，antd 表头固定依赖表体独立滚动
+          mergedTree ? 'overflow-hidden' : '',
+          isSingle || layout === 'horizontal' ? 'h-full' : '',
+          'select-table-view-right',
+        )}>
+        {isSingle ? (
+          <div className="flex min-h-[320px] flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            {searchSlot ? (
+              searchSlot
+            ) : ((mergedTree &&
+                (selectedKey != null ||
+                  mergedTree?.sameNodeReselect === 'deselect')) ||
+                !mergedTree) &&
+              searchFields &&
+              searchFields.length > 0 ? (
+              <SearchArea
+                extra={searchAreaExtraNode}
+                forceHorizontal
+                form={form}
+                listTitle={pageInfo.listTitle}
+                onReset={onReset}
+                onSearch={applySearchFromForm}
+                searchButtonSize={searchButtonSize}
+                searchFields={searchFields}
+                searchFormData={searchFormData}
+                total={paginationData.total}
+              />
+            ) : null}
+            <>
+              <div className="relative min-h-0 flex-1 overflow-hidden">
+                {pageConfig.loading && (
+                  <div className="absolute inset-0 z-[1] flex items-center justify-center bg-white/50 text-sm text-gray-500 dark:bg-gray-900/40">
+                    {t('common.loading')}
+                  </div>
+                )}
+                {showListArea && (!showNoDataEmpty || tableData.length) ? (
+                  <div
+                    className={clsx(
+                      'min-h-0 flex-1 min-w-0 h-full',
+                      tableScrollX ? 'overflow-x-auto' : 'overflow-x-hidden',
+                    )}>
+                    <CxTable
+                      size="small"
+                      className="h-full"
+                      autoScrollY
+                      minScrollY={160}
+                      sticky
+                      dataSource={tableData}
+                      rowKey={rowKey}
+                      // 透传列配置，避免丢失 minWidth/ellipsis/fixed/onCell 等属性
+                      columns={(singleListCtx.columns ?? []).map((col: any) => ({
+                        ...col,
+                        key: col.key ?? col.dataIndex,
+                        dataIndex: col.dataIndex ?? col.key,
+                        title:
+                          typeof col.title === 'string'
+                            ? (col.title ? t(col.title) : '')
+                            : col.title,
+                        render: (_: unknown, record: any, rowIndex: number) =>
+                          renderCell(col, record, rowIndex),
+                      }))}
+                      onRow={(record: any) => ({
+                        onClick: isNone ? undefined : () => selectSingleRow(record),
+                      })}
+                      rowClassName={(record: any) => {
+                        if (isNone) return ''
+                        return selectedSingle &&
+                        keysEqual(
+                          record?.[rowKey],
+                          selectedSingle?.[rowKey],
+                        )
+                          ? 'bg-blue-50 dark:bg-blue-900/20'
+                          : ''
+                      }}
+                      tableLayout={tableScrollX ? 'auto' : 'fixed'}
+                      scroll={tableScrollX ? ({ x: tableScrollX } as any) : undefined}
+                    />
+                  </div>
+                ) : null}
+                {mergedTree &&
+                  selectedKey == null &&
+                  mergedTree?.sameNodeReselect !== 'deselect' ? (
+                  <CxEmptyState message={t(unselectText)} />
+                ) : null}
+                {showNoDataEmpty && !tableData.length && (
+                  <CxEmptyState message={t('common.no_data')} />
+                )}
+              </div>
+              {table.showPagination !== false && paginationData.total > 0 && (
+                <div className="shrink-0 border-t border-gray-200 px-3 py-3 dark:border-gray-700">
+                  <Pagination
+                    onPageChange={(page) => {
+                      handleTableChange({
+                        current: page,
+                        pageSize: paginationData.pageSize,
+                      })
+                    }}
+                    onPageSizeChange={(size) => {
+                      handleTableChange({
+                        current: paginationData.page,
+                        pageSize: size,
+                      })
+                    }}
+                    page={paginationData.page}
+                    pageSize={paginationData.pageSize}
+                    pageSizeOptions={pageSizeOptions}
+                    showSizeChanger
+                    total={paginationData.total}
+                    zeroIndexed={false}
+                  />
+                </div>
+              )}
+            </>
+          </div>
+        ) : (
+          <div className={clsx(
+            "flex min-h-0 flex-1 gap-4",
+            layout === 'horizontal' ? 'flex-row h-full' : 'flex-col'
+          )}>
+            {/* 左侧：搜索区 + 列表 */}
+            <div
+              className="flex flex-col min-w-0 h-full"
+              style={{
+                width: layout === 'horizontal' ? (typeof leftWidth === 'number' ? `${leftWidth}px` : leftWidth || '50%') : undefined,
+                flex: layout === 'horizontal' ? 'none' : 1,
+              }}
+            >
+              <div className="flex h-full shrink-0 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+              {searchSlot ? (
+                <div className="shrink-0 border-b border-gray-200 dark:border-gray-700">
+                  {searchSlot}
+                </div>
+              ) : ((mergedTree &&
+                  (selectedKey != null ||
+                    mergedTree?.sameNodeReselect === 'deselect')) ||
+                  !mergedTree) &&
+                searchFields &&
+                searchFields.length > 0 ? (
+                <SearchArea
+                  extra={searchAreaExtraNode}
+                forceHorizontal
+                  form={form}
+                  listTitle={pageInfo.listTitle}
+                  onReset={onReset}
+                  onSearch={applySearchFromForm}
+                  searchButtonSize={searchButtonSize}
+                  searchFields={searchFields}
+                  searchFormData={searchFormData}
+                  total={paginationData.total}
+                />
+              ) : null}
+              <div className="relative min-h-0 flex-1 overflow-hidden">
+                {pageConfig.loading && (
+                  <div className="absolute inset-0 z-[1] flex items-center justify-center bg-white/50 text-sm dark:bg-gray-900/40">
+                    {t('common.loading')}
+                  </div>
+                )}
+                {showListArea && (!showNoDataEmpty || tableData.length) ? (
+                  <div
+                    className={clsx(
+                      'min-h-0 flex-1 min-w-0 h-full',
+                      tableScrollX ? 'overflow-x-auto' : 'overflow-x-hidden',
+                    )}>
+                    <CxTable
+                      size="small"
+                      className="h-full"
+                      autoScrollY
+                      minScrollY={isNone ? 160 : 400}
+                      sticky
+                      dataSource={tableData}
+                      rowKey={rowKey}
+                      // 透传列配置，避免丢失 minWidth/ellipsis/fixed/onCell 等属性
+                      columns={((isMultiple ? multiTopListCtx.columns : singleListCtx.columns) ?? []).map((col: any) => ({
+                        ...col,
+                        key: col.key ?? col.dataIndex,
+                        dataIndex: col.dataIndex ?? col.key,
+                        title:
+                          typeof col.title === 'string'
+                            ? (col.title ? t(col.title) : '')
+                            : col.title,
+                        render: (_: unknown, record: any, rowIndex: number) =>
+                          renderCell(col, record, rowIndex),
+                      }))}
+                      onRow={
+                        isMultiple
+                          ? (record: any) => ({
+                              onClick: () => toggleMultiTop(record),
+                            })
+                          : isSingle
+                            ? (record: any) => ({
+                                onClick: () => selectSingleRow(record),
+                              })
+                            : undefined
+                      }
+                      rowClassName={
+                        isMultiple
+                          ? (record: any) =>
+                              selectedMulti.some((r) =>
+                                keysEqual(r?.[rowKey], record?.[rowKey]),
+                              )
+                                ? 'bg-blue-50 dark:bg-blue-900/20'
+                                : ''
+                          : undefined
+                      }
+                      tableLayout={tableScrollX ? 'auto' : 'fixed'}
+                      scroll={tableScrollX ? ({ x: tableScrollX } as any) : undefined}
+                    />
+                  </div>
+                ) : null}
+                {mergedTree &&
+                  selectedKey == null &&
+                  mergedTree?.sameNodeReselect !== 'deselect' ? (
+                  <CxEmptyState message={t(unselectText)} />
+                ) : null}
+                {showNoDataEmpty && !tableData.length && (
+                  <CxEmptyState message={t('common.no_data')} />
+                )}
+              </div>
+              {table.showPagination !== false && paginationData.total > 0 && (
+                <div className="shrink-0 border-t border-gray-200 px-3 py-4 dark:border-gray-700">
+                  <Pagination
+                    onPageChange={(page) => {
+                      handleTableChange({
+                        current: page,
+                        pageSize: paginationData.pageSize,
+                      })
+                    }}
+                    onPageSizeChange={(size) => {
+                      handleTableChange({
+                        current: paginationData.page,
+                        pageSize: size,
+                      })
+                    }}
+                    page={paginationData.page}
+                    pageSize={paginationData.pageSize}
+                    pageSizeOptions={pageSizeOptions}
+                    showSizeChanger
+                    total={paginationData.total}
+                    zeroIndexed={false}
+                  />
+                </div>
+              )}
+            </div>
+            </div>
+
+            {/* 右侧：已选列表（仅横向布局且非none模式） */}
+            {showSelectedPanel && layout === 'horizontal' && !isNone && (
+              <div className="flex-1 min-w-0 flex flex-col h-full">
+                <div className="flex flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                  <div className="shrink-0 border-b border-gray-100 px-3 py-2 dark:border-gray-700">
+                    <div className="flex items-center justify-between gap-2">
+                      <h4 className="min-w-0 text-sm font-medium text-gray-600 dark:text-gray-300">
+                        {t(selectedPanelTitleKey)}{' '}
+                        <span className="text-gray-400">({selectedMulti.length})</span>
+                      </h4>
+                      <CxButton
+                        type="default"
+                        size="small"
+                        disabled={bottomCheckedKeys.size === 0}
+                        onClick={removeBottomChecked}>
+                        {t(removeSelectedLabelKey)}
+                      </CxButton>
+                    </div>
+                  </div>
+                  <div
+                    className={clsx(
+                      'min-h-0 flex-1 overflow-y-auto',
+                      tableScrollX ? 'overflow-x-auto' : 'overflow-x-hidden',
+                    )}>
+                    {selectedMulti.length === 0 ? (
+                      <div className="px-3 py-8 text-center text-sm text-gray-400">
+                        {t('selectTable.empty_selected')}
+                      </div>
+                    ) : (
+                      <CxTable
+                        size="small"
+                        className="h-full"
+                        autoScrollY
+                        minScrollY={80}
+                        sticky
+                        dataSource={selectedMulti}
+                        rowKey={rowKey}
+                        // 透传列配置，避免丢失 minWidth/ellipsis/fixed/onCell 等属性
+                        columns={(multiListCtx.columns ?? []).map((col: any) => ({
+                          ...col,
+                          key: col.key ?? col.dataIndex,
+                          dataIndex: col.dataIndex ?? col.key,
+                          title:
+                            typeof col.title === 'string'
+                              ? (col.title ? t(col.title) : '')
+                              : col.title,
+                          render: (_: unknown, record: any, rowIndex: number) =>
+                            renderCell(col, record, rowIndex),
+                        }))}
+                        onRow={(record: any) => ({
+                          onClick: () => bottomToggleCheck(record),
+                        })}
+                        rowClassName={(record: any) =>
+                          bottomCheckedKeys.has(String(record?.[rowKey]))
+                            ? 'bg-amber-50 dark:bg-amber-900/20'
+                            : ''
+                        }
+                        tableLayout={tableScrollX ? 'auto' : 'fixed'}
+                        scroll={tableScrollX ? ({ x: tableScrollX } as any) : undefined}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        {/* 纵向布局：已选面板放在右侧列内，避免与左侧树同属最外层横向 flex 时变成第三列 */}
+        {showSelectedPanel && !isSingle && !isNone && layout === 'vertical' && (
+          <div className="mt-3 flex h-[520px] min-h-[520px] shrink-0 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div className="shrink-0 border-b border-gray-100 px-3 py-2 dark:border-gray-700">
+              <div className="flex items-center justify-between gap-2">
+                <h4 className="min-w-0 text-sm font-medium text-gray-600 dark:text-gray-300">
+                  {t(selectedPanelTitleKey)}{' '}
+                  <span className="text-gray-400">({selectedMulti.length})</span>
+                </h4>
+                <CxButton
+                  type="default"
+                  size="small"
+                  disabled={bottomCheckedKeys.size === 0}
+                  onClick={removeBottomChecked}>
+                  {t(removeSelectedLabelKey)}
+                </CxButton>
+              </div>
+            </div>
+            <div
+              className={clsx(
+                'min-h-0 flex-1 overflow-y-auto',
+                tableScrollX ? 'overflow-x-auto' : 'overflow-x-hidden',
+              )}>
+              {selectedMulti.length === 0 ? (
+                <div className="px-3 py-8 text-center text-sm text-gray-400">
+                  {t('selectTable.empty_selected')}
+                </div>
+              ) : (
+                <CxTable
+                  size="small"
+                  className="h-full"
+                  autoScrollY
+                  minScrollY={80}
+                  sticky
+                  dataSource={selectedMulti}
+                  rowKey={rowKey}
+                  // 透传列配置，避免丢失 minWidth/ellipsis/fixed/onCell 等属性
+                  columns={(multiListCtx.columns ?? []).map((col: any) => ({
+                    ...col,
+                    key: col.key ?? col.dataIndex,
+                    dataIndex: col.dataIndex ?? col.key,
+                    title:
+                      typeof col.title === 'string'
+                        ? (col.title ? t(col.title) : '')
+                        : col.title,
+                    render: (_: unknown, record: any, rowIndex: number) =>
+                      renderCell(col, record, rowIndex),
+                  }))}
+                  onRow={(record: any) => ({
+                    onClick: () => bottomToggleCheck(record),
+                  })}
+                  rowClassName={(record: any) =>
+                    bottomCheckedKeys.has(String(record?.[rowKey]))
+                      ? 'bg-amber-50 dark:bg-amber-900/20'
+                      : ''
+                  }
+                  tableLayout={tableScrollX ? 'auto' : 'fixed'}
+                  scroll={tableScrollX ? ({ x: tableScrollX } as any) : undefined}
+                />
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      </div>
+    </div>
+  )
+}