cx-chat 0.0.1 → 0.0.3

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

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