@gmfe/table-x 2.14.30-beta.0 → 2.14.30-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/table-x",
-  "version": "2.14.30-beta.0",
+  "version": "2.14.30-beta.1",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gmfe#readme",

package/src/base/td.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { getColumnStyle } from '../util'
+import { getColumnStyle } from '@gmfe/table-x/src/util'
 import PropTypes from 'prop-types'
 import React from 'react'
 

package/src/base/tr.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
-import Td from './td'
+import Td from '@gmfe/table-x/src/base/td'
 
 const Tr = ({
   row,
@@ -10,7 +10,7 @@ const Tr = ({
   style,
   totalWidth,
   isTrDisable,
-  isTrHighlight,
+  isTrHighlight
 }) => {
   const props = {
     ...row.getRowProps(),

package/src/hoc/two_level_header_table_x/flatten_helper.js

@@ -11,13 +11,13 @@ export function flattenColumnsForSelectAndDiy(columns) {
   const flattened = []
   columns.forEach(column => {
     if (column.subColumns && column.subColumns.length > 0) {
-      // 如果有 subColumns，将子列展开，并添加父级信息
       column.subColumns.forEach(subCol => {
+        const { fixed: _subColFixed, ...subColWithoutFixed } = subCol
         flattened.push({
-          ...subCol,
+          ...subColWithoutFixed,
           parentKey: column.id || column.Header, // 父级标识
-          parentHeader: column.Header, // 父级表头文本
-          parentFixed: column.fixed // 父级 fixed 属性
+          parentHeader: column.Header,
+          parentFixed: column.fixed
         })
       })
     } else {

package/src/hoc/two_level_header_table_x/rebuild_helper.js

@@ -18,11 +18,6 @@ export function rebuildNestedColumnsFromFlat(flatColumns) {
     TABLE_X_EXPAND_ID
   ]
 
-  // 特殊列（select、diy）放在最前面
-  const specialCols = flatColumns.filter(col =>
-    specialColumnIds.includes(col.id)
-  )
-  nested.push(...specialCols)
   // 普通列（排除特殊列）
   const normalCols = flatColumns.filter(
     col => !specialColumnIds.includes(col.id)
@@ -45,14 +40,18 @@ export function rebuildNestedColumnsFromFlat(flatColumns) {
       const {
         parentKey: _p,
         parentHeader: _h,
-        parentFixed: _f,
+        parentFixed: parentFixedValue,
         ...colWithoutParent
       } = col
-      groupMap.get(col.parentKey).subCols.push(colWithoutParent)
+      const { fixed: _subColFixed, ...colWithoutFixed } = colWithoutParent
+      groupMap.get(col.parentKey).subCols.push({
+        ...colWithoutFixed,
+        fixed: parentFixedValue
+      })
     }
   })
 
-  // 再次遍历：按 flatColumns 的顺序输出
+  // 再次遍历：按 flatColumns 的顺序输出普通列
   const processedGroups = new Set()
 
   normalCols.forEach(col => {
@@ -81,5 +80,13 @@ export function rebuildNestedColumnsFromFlat(flatColumns) {
     }
   })
 
+  // 特殊列（select、diy、expand）必须放在最后
+  // 从 flatColumns 中提取特殊列，保持它们在 flatColumns 中的相对顺序
+  const specialCols = flatColumns.filter(col =>
+    specialColumnIds.includes(col.id)
+  )
+  // 确保特殊列在最后
+  nested.push(...specialCols)
+
   return nested
 }

package/src/hoc/two_level_header_table_x/table_x.js

@@ -5,7 +5,7 @@ import { Empty, Loading, afterScroll, __DEFAULT_COLUMN } from '../../util'
 import classNames from 'classnames'
 import _ from 'lodash'
 import TwoLevelTHead from './thead'
-import Tr from '../../base/tr'
+import Tr from './tr'
 import { rebuildNestedColumnsFromFlat } from './rebuild_helper'
 import { transformColumnsForTwoLevel } from './transform_helper'
 
@@ -23,7 +23,7 @@ const defaultColumn = __DEFAULT_COLUMN
  *   3. 使用 TwoLevelTHead 渲染两级表头
  */
 const TwoLevelTableX = ({
-  columns, // 处理后的扁平 columns
+  columns,
   data,
   loading,
   SubComponent,
@@ -35,22 +35,18 @@ const TwoLevelTableX = ({
   isTrHighlight = () => false,
   ...rest
 }) => {
-  // 步骤1: 根据扁平化的 columns 重建嵌套结构
   const rebuiltColumns = useMemo(() => {
     return rebuildNestedColumnsFromFlat(columns)
   }, [columns])
 
-  // 步骤2: 转换为 react-table 格式
   const { transformedColumns, firstLevelHeaders } = useMemo(() => {
     return transformColumnsForTwoLevel(rebuiltColumns)
   }, [rebuiltColumns])
 
-  // 步骤3: 过滤隐藏的列（与原 TableX 逻辑一致）
   const visibleColumns = useMemo(() => {
     return transformedColumns.filter(c => c.show !== false)
   }, [transformedColumns])
 
-  // 步骤4: 使用 react-table 处理列和数据（与原 TableX 逻辑一致）
   const {
     getTableProps,
     headerGroups,
@@ -63,7 +59,6 @@ const TwoLevelTableX = ({
     defaultColumn
   })
 
-  // 步骤5: 计算总宽度（与原 TableX 逻辑完全一致）
   let totalWidth = 0
   if (rows[0] && rows[0].cells.length > 0) {
     prepareRow(rows[0])
@@ -71,8 +66,6 @@ const TwoLevelTableX = ({
     totalWidth = last.totalLeft + last.totalWidth
   }
 
-  // 步骤6: 准备 table props
-  // 注意：对于 display: table，minWidth 可能不会自动扩展，需要同时设置 width: 100% 来撑满容器
   const gtp = getTableProps()
   const tableStyle =
     totalWidth > 0
@@ -146,7 +139,7 @@ const TwoLevelTableX = ({
           )}
         </tbody>
       </table>
-      {loading && <Loading />}
+      {loading && <Loading style={{ marginTop: '92px' }} />}
       {!loading && data.length === 0 && <Empty />}
     </div>
   )

package/src/hoc/two_level_header_table_x/td.js

@@ -0,0 +1,60 @@
+import classNames from 'classnames'
+import { getColumnStyle } from '../../util'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+// cell.render('Cell') 是一个react组件,如果这个组件return undefined,那就就会报错
+// 这里是为了兼容 cell.render('Cell') 返回undefined的情况
+class TdCatchErr extends React.Component {
+  componentDidCatch(error, errorInfo) {
+    console.warn(error)
+    console.warn(errorInfo.componentStack)
+  }
+
+  render() {
+    return this.props.children
+  }
+}
+
+const Td = ({ cell, totalWidth }) => {
+  const cp = cell.getCellProps()
+  const { tdClassName } = cell.column
+  const tdProps = {
+    ...cp,
+    className: classNames('gm-table-x-td', tdClassName, {
+      'gm-table-x-fixed-left': cell.column.fixed === 'left',
+      'gm-table-x-fixed-right': cell.column.fixed === 'right'
+    }),
+    style: {
+      ...cp.style,
+      ...getColumnStyle(cell.column)
+    }
+  }
+
+  if (cell.column.fixed === 'left') {
+    // 用到 fixed，可以利用 totalLeft
+    tdProps.style.left = cell.column.totalLeft
+  } else if (cell.column.fixed === 'right') {
+    tdProps.style.right =
+      totalWidth - cell.column.totalLeft - cell.column.totalWidth
+  }
+
+  // 如果 Cell 返回 undefined，转换为 null（null 不会报错，undefined 会）
+  const cellContent = cell.render('Cell')
+  const safeCellContent = cellContent === undefined ? null : cellContent
+
+  return (
+    <td {...tdProps}>
+      <TdCatchErr>{safeCellContent}</TdCatchErr>
+    </td>
+  )
+}
+
+Td.whyDidYouRender = true
+
+Td.propTypes = {
+  cell: PropTypes.object.isRequired,
+  totalWidth: PropTypes.number.isRequired
+}
+
+export default React.memo(Td)

package/src/hoc/two_level_header_table_x/thead.js

@@ -11,12 +11,6 @@ import { getColumnStyle, SortHeader } from '../../util'
  * - 第二行：二级表头（只有有子列的一级表头才显示）
  */
 const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
-  // react-table 的 headerGroups 结构：
-  // - 当 columns 有嵌套结构时：headerGroups[0] 是第一级（分组），headerGroups[1] 是第二级（实际列）
-  // - 当 columns 没有嵌套时：headerGroups 只有一行，就是实际列
-  // 重要：当混合嵌套列和单列时，headerGroups[0] 只包含有 columns 的分组列，不包含单列
-  // 单列只会在 headerGroups[1] 中出现
-
   const hasNestedHeaders = headerGroups.length > 1
   const firstLevelGroup = hasNestedHeaders ? headerGroups[0] : null
   const secondLevelGroup = hasNestedHeaders ? headerGroups[1] : headerGroups[0]
@@ -34,14 +28,6 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
         secondLevelIndex + subColumnCount
       )
 
-      // 计算总宽度（所有子列的宽度之和）
-      let totalSubWidth = 0
-      subColumns.forEach(subCol => {
-        const style = getColumnStyle(subCol)
-        const width = parseFloat(style.width) || subCol.totalWidth || 0
-        totalSubWidth += width
-      })
-
       // 获取对应的第一级分组列对象
       const groupColumn = firstLevelGroup
         ? firstLevelGroup.headers.find(col => {
@@ -53,21 +39,26 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
           }) || firstLevelGroup.headers[idx]
         : null
 
+      // 计算分组列的总宽度（所有子列的宽度之和）
+      let totalSubWidth = 0
+      subColumns.forEach(subCol => {
+        const style = getColumnStyle(subCol)
+        const width = parseFloat(style.width) || subCol.totalWidth || 0
+        totalSubWidth += width
+      })
+
       firstLevelCells.push({
         type: 'group',
         header: firstLevelHeader,
         colSpan: subColumnCount,
         subColumns: subColumns,
-        totalWidth: totalSubWidth,
+        totalWidth: totalSubWidth, // 添加总宽度
         column: groupColumn,
         secondLevelStartIndex: secondLevelIndex
       })
 
       secondLevelIndex += subColumnCount
     } else {
-      // 没有子列：占两行（rowspan=2）
-      // 重要：当混合嵌套列和单列时，react-table 会将单列同时放在 firstLevelGroup 和 secondLevelGroup 中
-      // 我们需要从 firstLevelGroup 中获取单列的列对象（如果存在），否则从 secondLevelGroup 获取
       let singleColumn = null
 
       // 优先从 firstLevelGroup 中查找单列（用于 getHeaderProps 等）
@@ -106,17 +97,10 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
       {/* 第一级表头行 */}
       <tr className='gm-table-x-tr gm-table-x-tr-first-level'>
         {firstLevelCells.map((cell, idx) => {
-          const {
-            column,
-            header,
-            colSpan,
-            rowSpan,
-            type,
-            totalWidth: cellTotalWidth
-          } = cell
+          const { column, header, colSpan, rowSpan, type } = cell
 
           // 对于分组列，使用分组列对象；对于单列，使用单列对象
-          const headerColumn = column || cell.column
+          const headerColumn = column
           const hp = headerColumn ? headerColumn.getHeaderProps() : {}
           const { thClassName, style } = headerColumn || {}
 
@@ -126,11 +110,6 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
             ...style
           }
 
-          // 处理固定列（需要先定义，因为在设置宽度时需要用到）
-          // 重要：只有明确设置了 fixed 的列才会被固定
-          // 对于分组列，直接使用 header.fixed（一级表头的原始 fixed 状态）
-          // 对于单列，使用 headerColumn.fixed（react-table 处理后的状态）或 header.fixed
-          // 关键：不要从 headerColumn 推断 fixed 状态，因为 headerColumn 可能是 react-table 处理后的对象
           const fixed =
             type === 'group'
               ? header.fixed // 分组列直接使用 header.fixed，不 fallback 到 headerColumn
@@ -138,22 +117,13 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
               ? headerColumn.fixed
               : header.fixed
 
-          // 如果是分组列，使用 colSpan 时不需要手动设置宽度（由浏览器自动计算）
-          // 但我们需要移除 flex 相关的样式，因为使用 table-cell 时 flex 不起作用
+          // 判断是否是最后一列（通过检查是否是 firstLevelCells 的最后一个元素）
+          const isLastCell = idx === firstLevelCells.length - 1
+
           if (type === 'group') {
-            // 移除 flex 相关样式，只保留 width 和 maxWidth（如果需要）
-            // 对于 table-layout: fixed，我们需要确保分组列的宽度正确设置
-            // colSpan 会自动处理宽度，但为了确保固定列的宽度不被压缩，我们显式设置宽度
-            const { flex, ...restStyle } = cellStyle
+            const { flex, width, minWidth, maxWidth, ...restStyle } = cellStyle
             cellStyle = restStyle
-
-            // 如果有固定列，显式设置宽度以确保不被压缩
-            if (fixed === 'left' || fixed === 'right') {
-              cellStyle.width = `${cellTotalWidth}px`
-              cellStyle.minWidth = `${cellTotalWidth}px`
-            }
           } else if (headerColumn) {
-            // 对于单列，也需要移除 flex，使用 width
             const columnStyle = getColumnStyle(headerColumn)
             const { flex, ...restColumnStyle } = columnStyle
             cellStyle = {
@@ -169,10 +139,7 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
               }
             }
           }
-          // 只有当 fixed 明确为 'left' 或 'right' 时才设置 left/right 和添加 fixed 类
-          // 这样确保只有明确设置了 fixed 的列才会被固定
           if (fixed === 'left') {
-            // 对于分组列，使用第一个子列的 totalLeft
             if (
               type === 'group' &&
               cell.subColumns &&
@@ -190,25 +157,26 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
               cell.subColumns.length > 0
             ) {
               const lastSubCol = cell.subColumns[cell.subColumns.length - 1]
-              cellStyle.right =
-                totalWidth - lastSubCol.totalLeft - lastSubCol.totalWidth
+              // 如果是最后一列，直接设置 right: 0
+              if (isLastCell) {
+                cellStyle.right = 0
+              } else {
+                cellStyle.right =
+                  totalWidth - lastSubCol.totalLeft - lastSubCol.totalWidth
+              }
             } else if (headerColumn) {
-              cellStyle.right =
-                totalWidth - headerColumn.totalLeft - headerColumn.totalWidth
+              // 如果是最后一列，直接设置 right: 0
+              if (isLastCell) {
+                cellStyle.right = 0
+              } else {
+                cellStyle.right =
+                  totalWidth - headerColumn.totalLeft - headerColumn.totalWidth
+              }
             }
           }
-          // 注意：如果 fixed 是 undefined 或其他值，不应该设置 left/right，也不应该添加 fixed 类
-
-          // 确保我们的 colSpan 和 rowSpan 优先级最高，不会被 hp 中的值覆盖
           const { colSpan: hpColSpan, rowSpan: hpRowSpan, ...restHp } = hp || {}
-
-          // 确保 rowSpan 和 colSpan 是数字类型（不是字符串）
           const finalRowSpan =
-            rowSpan !== undefined
-              ? Number(rowSpan)
-              : hpRowSpan !== undefined
-              ? Number(hpRowSpan)
-              : undefined
+            rowSpan !== undefined ? Number(rowSpan) : undefined
           const finalColSpan =
             colSpan !== undefined
               ? Number(colSpan)
@@ -274,19 +242,12 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
               return false
             })
 
-            // 如果是单列（rowspan=2），这一行不渲染（已经被第一行占用）
             if (
               correspondingFirstLevel &&
               correspondingFirstLevel.type === 'single'
             ) {
               return null
             }
-
-            // 为第二级表头添加特殊类名，以便在 CSS 中覆盖样式
-            // 重要：二级表头的 fixed 状态应该从对应的一级表头继承
-            // 只有当对应的一级表头设置了 fixed 时，二级表头才应该固定
-            // 注意：column.fixed 已经在 transformColumnsForTwoLevel 中根据一级表头的 fixed 状态设置了
-            // 所以我们直接使用 column.fixed 即可，不需要再次从 firstLevelHeader 继承
             return (
               <Th
                 key={idx}

package/src/hoc/two_level_header_table_x/tr.js

@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import Td from './td'
+
+const Tr = ({
+  row,
+  SubComponent,
+  keyField,
+  style,
+  totalWidth,
+  isTrDisable,
+  isTrHighlight
+}) => {
+  const props = {
+    ...row.getRowProps(),
+    style,
+    className: classNames('gm-table-x-tr', {
+      'gm-table-x-tr-disable': isTrDisable(row.original, row.index),
+      'gm-table-x-tr-highlight': isTrHighlight(row.original, row.index),
+      'gm-table-x-tr-odd': row.index % 2 === 0,
+      'gm-table-x-tr-even': row.index % 2 !== 0
+    })
+  }
+
+  // 目前视为了 sortable 用。值可能是 undefined，keyField 没作用的情况
+  const dataId = row.original[keyField]
+
+  return (
+    <>
+      <tr data-id={dataId} {...props}>
+        {row.cells.map((cell, cellIndex) => (
+          <Td key={cellIndex} cell={cell} totalWidth={totalWidth} />
+        ))}
+      </tr>
+      {SubComponent && SubComponent(row)}
+    </>
+  )
+}
+
+Tr.whyDidYouRender = true
+
+Tr.propTypes = {
+  row: PropTypes.object.isRequired,
+  SubComponent: PropTypes.func,
+  keyField: PropTypes.string.isRequired,
+  style: PropTypes.object.isRequired,
+  totalWidth: PropTypes.number.isRequired,
+  isTrDisable: PropTypes.func,
+  isTrHighlight: PropTypes.func
+}
+
+export default React.memo(Tr)

package/src/hoc/two_level_header_table_x/transform_helper.js

@@ -13,12 +13,15 @@ function validateSubColumnsFixed(column) {
   }
 
   const subColumns = column.subColumns
+  // 重要：二级分类的 fixed 应该与一级分类保持一致
+  // 所以验证时，所有子列应该使用一级表头的 fixed（column.fixed）
+  const expectedFixed = column.fixed !== undefined ? column.fixed : undefined
   const fixedStates = subColumns.map(subCol => {
-    return subCol.fixed !== undefined ? subCol.fixed : column.fixed
+    // 子列的 fixed 应该与一级表头一致，如果有不一致的，记录实际的 fixed 用于检查
+    return subCol.fixed !== undefined ? subCol.fixed : expectedFixed
   })
 
-  const firstFixed = fixedStates[0]
-  const allSame = fixedStates.every(fixed => fixed === firstFixed)
+  const allSame = fixedStates.every(fixed => fixed === expectedFixed)
 
   if (!allSame) {
     return {
@@ -46,19 +49,20 @@ export function transformColumnsForTwoLevel(columns) {
     TABLE_X_EXPAND_ID
   ]
 
-  columns.forEach((column, index) => {
-    // 特殊列（由其他 HOC 添加）直接添加，不进行转换
+  // 分离普通列和特殊列
+  const normalColumns = []
+  const specialColumns = []
+
+  columns.forEach(column => {
     if (specialColumnIds.includes(column.id)) {
-      transformedColumns.push(column)
-      firstLevelHeaders.push({
-        ...column,
-        hasSubColumns: false,
-        subColumnCount: 1,
-        isSpecialColumn: true
-      })
-      return
+      specialColumns.push(column)
+    } else {
+      normalColumns.push(column)
     }
+  })
 
+  // 先处理普通列
+  normalColumns.forEach((column, index) => {
     if (column.subColumns && column.subColumns.length > 0) {
       // 过滤可见的子列
       const visibleSubCols = column.subColumns.filter(
@@ -91,23 +95,23 @@ export function transformColumnsForTwoLevel(columns) {
         subColumnCount: visibleSubCols.length // 使用可见子列的数量
       })
 
-      // 确定统一的 fixed 状态（使用可见的子列）
-      const unifiedFixed =
-        visibleSubCols[0]?.fixed !== undefined
-          ? visibleSubCols[0].fixed
-          : column.fixed !== undefined
-          ? column.fixed
-          : undefined
+      // 确定统一的 fixed 状态
+      // 重要：只使用一级表头的 fixed 属性，二级分类的 fixed 应该与一级分类保持一致
+      const unifiedFixed = column.fixed !== undefined ? column.fixed : undefined
 
       // 转换为 react-table 的嵌套结构（只使用可见的子列）
       transformedColumns.push({
         Header: column.Header,
         id: column.id || `group_${transformedColumns.length}`,
         fixed: unifiedFixed,
-        columns: visibleSubCols.map(subCol => ({
-          ...subCol,
-          fixed: subCol.fixed !== undefined ? subCol.fixed : unifiedFixed
-        }))
+        columns: visibleSubCols.map(subCol => {
+          // 移除子列自己的 fixed 属性，强制使用一级表头的 fixed
+          const { fixed: _subColFixed, ...subColWithoutFixed } = subCol
+          return {
+            ...subColWithoutFixed,
+            fixed: unifiedFixed // 二级分类的 fixed 与一级分类保持一致
+          }
+        })
       })
     } else {
       // 没有 subColumns，直接添加（会占两行）
@@ -121,5 +125,25 @@ export function transformColumnsForTwoLevel(columns) {
     }
   })
 
+  // 最后处理特殊列（select、diy、expand）放在最后
+  // 注意：移除特殊列的 fixed 属性，让它们按数组顺序显示在最后（不固定）
+  // 如果用户需要特殊列固定在右边，可以手动设置 fixed: 'right'
+  specialColumns.forEach(column => {
+    const { fixed, ...columnWithoutFixed } = column
+    const adjustedColumn = {
+      ...columnWithoutFixed,
+      // 特殊列应该在最后，移除 fixed: 'left'，让它们按数组顺序显示
+      // 如果需要固定在右边，可以改为 fixed: 'right'
+      fixed: fixed === 'left' ? undefined : fixed
+    }
+    transformedColumns.push(adjustedColumn)
+    firstLevelHeaders.push({
+      ...adjustedColumn,
+      hasSubColumns: false,
+      subColumnCount: 1,
+      isSpecialColumn: true
+    })
+  })
+
   return { transformedColumns, firstLevelHeaders }
 }

package/src/hoc/two_level_header_table_x.js

@@ -13,18 +13,16 @@ import { flattenColumnsForSelectAndDiy } from './two_level_header_table_x/flatte
  *   )
  * )
  *
- * 注意：内部 Component（TwoLevelTableX）只需要接收 columns prop（已扁平化，包含 parentKey、parentHeader、parentFixed）
+ * 注意：当存在一级表头相同的列时，在column配置中加id标识区分，避免混乱
  */
 function twoLevelHeaderTableXHOC(Component) {
   const TwoLevelHeaderTableXWrapper = props => {
     const { columns: originalColumns, ...rest } = props
 
-    // 扁平化 columns（用于 select 和 diy 处理，每个 subColumn 会添加 parentKey、parentHeader、parentFixed）
     const flattenedColumns = useMemo(() => {
       return flattenColumnsForSelectAndDiy(originalColumns)
     }, [originalColumns])
 
-    // 传递给内部 Component
     return <Component {...rest} columns={flattenedColumns} />
   }
 

package/src/index.less

@@ -21,28 +21,63 @@
 
     // 当有两级表头时，表格需要使用表格布局来支持 rowspan
     &.gm-table-x-table-two-level {
-      display: table !important; // 使用表格布局以支持 rowspan
-      // 固定列的宽度保护
-      .gm-table-x-th,
-      .gm-table-x-td {
-        &.gm-table-x-fixed-left,
-        &.gm-table-x-fixed-right {
-          box-sizing: border-box;
-        }
-      }
-
+      display: table !important;
       .gm-table-x-tbody {
         display: table-row-group !important;
         .gm-table-x-tr {
           display: table-row !important;
+          height: 60px;
           .gm-table-x-td {
             display: table-cell !important;
-            // 移除 flex 相关样式
             flex: none !important;
             flex-grow: unset !important;
             flex-shrink: unset !important;
             flex-basis: unset !important;
             box-sizing: border-box;
+            padding: 8px;
+            white-space: normal;
+            word-wrap: break-word;
+            word-break: break-all;
+            vertical-align: middle;
+            text-align: center;
+            &:first-child {
+              padding-left: 20px;
+            }
+            &:last-child {
+              padding-right: 20px;
+            }
+            &.gm-table-x-icon-column {
+              padding-right: 5px;
+              padding-left: 5px;
+              .gm-table-x-icon.gm-popover-active {
+                color: @brand-primary;
+              }
+            }
+            img {
+              max-width: 100%;
+              max-height: 60px;
+              object-fit: contain;
+              vertical-align: middle;
+              display: block;
+              margin: 0 auto;
+            }
+
+            // 保持与原版 TableX 一致的 expand 样式
+            .gm-table-x-expand {
+              font-size: 14px;
+              padding-top: 2px;
+            }
+
+            // 二级表头的固定列边框处理（使用 inset box-shadow 创建边框，确保滚动时边框始终可见）
+            &.gm-table-x-fixed-left {
+              border-right: none !important;
+              box-shadow: inset -1px 0 0 0 @gm-table-x-border-color;
+            }
+
+            &.gm-table-x-fixed-right {
+              border-left: none !important;
+              box-shadow: inset 1px 0 0 0 @gm-table-x-border-color;
+            }
           }
         }
       }
@@ -120,23 +155,27 @@
         .gm-table-x-th-first-level {
           // 第一级表头样式
           display: table-cell !important;
-          border: 1px solid #d8dee7 !important;
-          border-bottom: 2px solid #d8dee7 !important;
+          border: none !important;
           vertical-align: middle;
           text-align: center;
           padding: 8px;
           flex: none !important;
           // 确保固定列有背景色，这样边框才能正确显示
           background: @gm-table-x-header-bg !important;
-          // 固定列样式：和普通表格保持一致
-          &.gm-table-x-fixed-left {
-            background: @gm-table-x-header-bg !important;
-            border-right: 1px solid @gm-table-x-border-color !important;
-          }
-
-          &.gm-table-x-fixed-right {
-            background: @gm-table-x-header-bg !important;
-            border-left: 1px solid @gm-table-x-border-color !important;
+          position: relative;
+
+          // 使用伪元素创建所有边框
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid #d8dee7;
+            border-bottom-width: 2px;
+            pointer-events: none;
+            z-index: 1;
           }
         }
       }
@@ -146,8 +185,7 @@
         .gm-table-x-th-second-level {
           // 第二级表头样式
           display: table-cell !important;
-          border: 1px solid #d8dee7 !important;
-          border-top: none !important;
+          border: none !important;
           vertical-align: middle;
           text-align: center;
           padding: 8px;
@@ -158,14 +196,20 @@
           box-sizing: border-box;
           // 确保固定列有背景色，这样边框才能正确显示
           background: @gm-table-x-header-bg !important;
-          // 固定列样式：和普通表格保持一致
-          &.gm-table-x-fixed-left {
-            background: @gm-table-x-header-bg !important;
-            border-right: 1px solid @gm-table-x-border-color !important;
-          }
-          &.gm-table-x-fixed-right {
-            background: @gm-table-x-header-bg !important;
-            border-left: 1px solid @gm-table-x-border-color !important;
+          position: relative;
+
+          // 使用伪元素创建所有边框（除了顶部，因为顶部由一级表头的底部边框覆盖）
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid #d8dee7;
+            border-top: none;
+            pointer-events: none;
+            z-index: 1;
           }
         }
       }
@@ -302,13 +346,30 @@
         position: sticky !important;
         z-index: 1;
       }
+    }
 
+    // 表头固定列需要更高的 z-index
+    .gm-table-x-th {
+      &.gm-table-x-fixed-left,
+      &.gm-table-x-fixed-right {
+        z-index: 11 !important;
+      }
+    }
+
+    // tbody 单元格固定列使用 inset box-shadow
+    .gm-table-x-td {
       &.gm-table-x-fixed-left {
-        border-right: 1px solid @gm-table-x-border-color !important;
+        border-right: none !important;
+        // 使用 box-shadow 创建边框，确保在滚动时边框始终可见
+        // inset box-shadow 会创建内部阴影，不会随内容滚动
+        box-shadow: inset -1px 0 0 0 @gm-table-x-border-color !important;
       }
 
       &.gm-table-x-fixed-right {
-        border-left: 1px solid @gm-table-x-border-color !important;
+        border-left: none !important;
+        // 使用 box-shadow 创建边框，确保在滚动时边框始终可见
+        // inset box-shadow 会创建内部阴影，不会随内容滚动
+        box-shadow: inset 1px 0 0 0 @gm-table-x-border-color !important;
       }
     }
   }

package/src/util/index.js

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types'
 import _ from 'lodash'
 import SVGEmpty from '../../svg/empty.svg'
 import { Flex, EVENT_TYPE } from '@gmfe/react'
-import BatchActionBar from './batch_action_bar'
-import SortHeader from './sort_header'
+import BatchActionBar from '@gmfe/table-x/src/util/batch_action_bar'
+import SortHeader from '@gmfe/table-x/src/util/sort_header'
 import {
   OperationHeader,
   OperationDelete,
@@ -15,8 +15,8 @@ import {
   OperationCell,
   OperationRowEdit,
   OperationIconTip
-} from './operation'
-import { EditButton, EditOperation } from './edit'
+} from '@gmfe/table-x/src/util/operation'
+import { EditButton, EditOperation } from '@gmfe/table-x/src/util/edit'
 
 const TABLE_X_SELECT_ID = 'table_x_select_id'
 const TABLE_X_EXPAND_ID = 'table_x_expand_id'
@@ -83,12 +83,14 @@ const Empty = () => {
   )
 }
 
-const Loading = () => {
+const Loading = ({ style, ...rest }) => {
   return (
     <Mask
       style={{
-        backgroundColor: 'rgba(255,255,255,0.8)'
+        backgroundColor: 'rgba(255,255,255,0.8)',
+        ...style
       }}
+      {...rest}
     >
       {getLocale('加载数据中...')}
     </Mask>