@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/table/Table.svelte

@@ -15,7 +15,7 @@
   后代部分选中父行半选 indeterminate），true=父子独立(向后兼容)。联动 {checked,half} 经 core
   conductRows/toggleRowCheck 纯函数据整棵可见行树派生 (红线 #2)；内部存叶子级 base，
   onChange 回传含父行的完整 checked 集；半选写 input.indeterminate 复用 attachment (红线 #3)。
-  行虚拟滚动：virtualized=true 时 .cd-table-wrap 自身纵向滚动(固定 height)，thead sticky 固定顶部，
+  行虚拟滚动：virtualized=true 时 .cd-table-body 自身纵向滚动(固定 height)，thead sticky 固定顶部，
   tbody 仅渲染视口内行切片(复用 core fixedRange 算可见区间)，首尾各一个 padding spacer tr 撑出
   未渲染行总高(保持原生 <table>/<tr>/<td> 语义与 a11y)。scrollTop 命令式 scroll 回调 + rAF 节流写入
   本地 $state，可见区间纯 $derived render 期只读(红线 #2/#3)。virtualized 与 pagination 互斥(虚拟时
@@ -35,14 +35,23 @@
     fixedRange,
     useLiveAnnouncer,
     useId,
+    createResizeDrag,
     type RowKey,
     type SortState,
     type FlatRow,
+    type ResizeDragController,
   } from '@chenzy-design/core';
   import { tick } from 'svelte';
   import type { Snippet } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import { Pagination } from '../pagination/index.js';
+  import {
+    IconCaretup,
+    IconCaretdown,
+    IconFilter,
+    IconChevronRight,
+    IconTreeTriangleRight,
+  } from '@chenzy-design/icons';
   import { floating } from '../_floating/use-floating.js';
   import { useDismiss } from '@chenzy-design/core';
   import { useLocale } from '../locale-provider/index.js';
@@ -112,8 +121,26 @@
     indentSize: indentSizeProp = 20,
     groupBy,
     renderGroupSection,
+    clickGroupedRowToExpand = false,
+    defaultExpandAllGroupRows,
+    expandAllGroupRows,
+    onGroupExpandChange,
+    onGroupedRow,
     titleSnippet,
     footerSnippet,
+    renderPagination,
+    expandIcon,
+    hideExpandedColumn = true,
+    rowSpanHover = false,
+    headerStyle,
+    direction = 'ltr',
+    title,
+    footer,
+    childrenRecordName,
+    class: className,
+    style,
+    components,
+    getVirtualizedListRef,
   }: {
     columns?: ColumnDef<T>[];
     dataSource?: T[];
@@ -187,9 +214,9 @@
     /** 筛选浮层挂载容器，默认跟随触发按钮 */
     getPopupContainer?: () => HTMLElement;
     /** 行级事件与属性（返回 onClick/onDoubleClick/className/style） */
-    onRow?: (record: T, index: number) => { onClick?: (e: MouseEvent) => void; onDoubleClick?: (e: MouseEvent) => void; className?: string; style?: string };
+    onRow?: (record: T, index: number, rowStatus?: { disabled?: boolean; selected?: boolean }) => { onClick?: (e: MouseEvent) => void; onDoubleClick?: (e: MouseEvent) => void; onMouseEnter?: (e: MouseEvent) => void; onMouseLeave?: (e: MouseEvent) => void; className?: string; style?: string };
     /** 表头行级事件与属性 */
-    onHeaderRow?: (columns: ColumnDef<T>[], index: number) => { onClick?: (e: MouseEvent) => void; className?: string; style?: string };
+    onHeaderRow?: (columns: ColumnDef<T>[], index: number) => { onClick?: (e: MouseEvent) => void; onMouseEnter?: (e: MouseEvent) => void; onMouseLeave?: (e: MouseEvent) => void; className?: string; style?: string };
     /** 点击行体时触发展开/收起，默认 false */
     expandRowByClick?: boolean;
     /** 展开图标列固定方向 */
@@ -202,12 +229,81 @@
     groupBy?: string | ((record: T) => string);
     /** 自定义分组标题渲染 */
     renderGroupSection?: Snippet<[{ groupKey: string; group: T[] }]>;
+    /** 点击分组标题行时折叠/展开该组内的数据行，默认 false（groupBy 时生效） */
+    clickGroupedRowToExpand?: boolean;
+    /** 非受控：初始默认展开全部分组。缺省（未配置任一分组展开 props）时向后兼容为全展开；
+     *  显式传 false 则初始全部折叠。动态加载数据时不生效。 */
+    defaultExpandAllGroupRows?: boolean;
+    /** 受控：为 true 展开全部分组、false 折叠全部分组。受控时不回写，仅经 onGroupExpandChange 通知（红线 #1） */
+    expandAllGroupRows?: boolean;
+    /** 分组展开/收起变化回调（点击分组标题行触发），回传当前展开的分组 key 集合 */
+    onGroupExpandChange?: (info: { groupKey: string; expanded: boolean; expandedGroupKeys: string[] }) => void;
+    /** 分组标题行的自定义属性回调（类似 onRow，仅作用于分组头行），返回值合并进分组头行 tr。groupBy 时生效 */
+    onGroupedRow?: (group: T[], index: number) => { onClick?: (e: MouseEvent) => void; onDoubleClick?: (e: MouseEvent) => void; onMouseEnter?: (e: MouseEvent) => void; onMouseLeave?: (e: MouseEvent) => void; className?: string; style?: string };
     /** 表格顶部标题区域 */
     titleSnippet?: Snippet;
     /** 表格底部内容区域（接收 currentData） */
     footerSnippet?: Snippet<[{ currentData: T[] }]>;
+    /**
+     * 自定义分页器渲染，替换内置 Pagination UI。入参含分页状态与翻页回调（调用 onChange(page) 触发内部翻页，
+     * 受控 current 仍不回写，红线 #1）。仅在 paginationEnabled 且有数据时消费。
+     */
+    renderPagination?: Snippet<[{ total: number; currentPage: number; pageSize: number; onChange: (page: number) => void }]>;
+    /**
+     * 自定义展开行的展开/收起图标（替换默认三角）。入参 { expanded, record }。
+     * 仅在 expandable 展开列生效（树形行的展开三角另有渲染，不受此影响）。
+     */
+    expandIcon?: Snippet<[{ expanded: boolean; record: T }]>;
+    /**
+     * 展开按钮是否与首列文案渲染在同一单元格。默认 true（并入首列，对齐 Semi）；
+     * 传 false 时展开按钮单独作为一列渲染（首列前的独立 expand 列）。仅 expandable 时生效。
+     */
+    hideExpandedColumn?: boolean;
+    /** 合并单元格（column.render 返回 rowSpan）时 hover 是否高亮整个合并区。默认 false */
+    rowSpanHover?: boolean;
+    /** 表头单元格（所有 th，含 fixed 表头）的自定义内联样式。字符串或键值对象 */
+    headerStyle?: string | Record<string, string>;
+    /** RTL/LTR 方向，默认 ltr（对齐 Semi direction） */
+    direction?: 'ltr' | 'rtl';
+    /** 表格标题（字符串；富内容用 titleSnippet） */
+    title?: string;
+    /** 表格尾部（字符串；富内容用 footerSnippet） */
+    footer?: string;
+    /** 树形 dataSource 中子级字段名，默认 'children'（对齐 Semi childrenRecordName；tree.childrenColumnName 优先） */
+    childrenRecordName?: string;
+    /** 最外层 .cd-table-wrapper 自定义样式名（对齐 Semi className） */
+    class?: string;
+    /** 最外层 .cd-table-wrapper 内联样式（对齐 Semi style） */
+    style?: string;
+    /**
+     * 覆盖组成元素的 tag 名（对齐 Semi components）。Svelte 侧以标签名字符串生效，
+     * 经 <svelte:element> 渲染，内部 class/role/事件仍注入。缺省用原生
+     * table/thead/tbody/tr/th/td。常见用法：body.row='div' 配合拖拽库。
+     */
+    components?: {
+      table?: string;
+      header?: { wrapper?: string; row?: string; cell?: string };
+      body?: { wrapper?: string; row?: string; cell?: string };
+    };
+    /**
+     * 返回虚拟化滚动控制句柄（对齐 Semi getVirtualizedListRef）。仅 virtualized 时有效。
+     * 句柄含 scrollTo(offset) 与 scrollToItem(index)，命令式驱动表体滚动。
+     */
+    getVirtualizedListRef?: (ref: {
+      scrollTo: (offset: number) => void;
+      scrollToItem: (index: number) => void;
+    }) => void;
   } = $props();
 
+  // 解析各槽位 tag，缺省回退原生（对齐 Semi DEFAULT_COMPONENTS）。
+  const tagTable = $derived(components?.table ?? 'table');
+  const tagThead = $derived(components?.header?.wrapper ?? 'thead');
+  const tagTbody = $derived(components?.body?.wrapper ?? 'tbody');
+  const tagHeaderRow = $derived(components?.header?.row ?? 'tr');
+  const tagHeaderCell = $derived(components?.header?.cell ?? 'th');
+  const tagBodyRow = $derived(components?.body?.row ?? 'tr');
+  const tagBodyCell = $derived(components?.body?.cell ?? 'td');
+
   const loc = useLocale();
   // 单例 live region（polite）：排序结果播报给屏幕阅读器（命令式写入在事件回调，红线 #3）。
   const announcer = useLiveAnnouncer();
@@ -219,6 +315,59 @@
   const colKeyOf = (col: ColumnDef<T>, index: number): string =>
     col.key ?? col.dataIndex ?? String(index);
 
+  // --- 表头合并（column.children）：叶子列驱动 body/ColGroup/固定列，父列只作表头分组 ---
+  // 无 children 时 leafColumns 与 columns 等价（零行为变化）。
+  function flattenLeaves(cols: ColumnDef<T>[]): ColumnDef<T>[] {
+    const out: ColumnDef<T>[] = [];
+    for (const c of cols) {
+      if (c.children && c.children.length > 0) out.push(...flattenLeaves(c.children));
+      else out.push(c);
+    }
+    return out;
+  }
+  const leafColumns = $derived(flattenLeaves(columns));
+  const hasHeaderMerge = $derived(columns.some((c) => c.children && c.children.length > 0));
+
+  function leafCount(col: ColumnDef<T>): number {
+    if (!col.children || col.children.length === 0) return 1;
+    return col.children.reduce((s, c) => s + leafCount(c), 0);
+  }
+  const headerDepth = $derived.by(() => {
+    const depth = (col: ColumnDef<T>): number =>
+      col.children && col.children.length > 0 ? 1 + Math.max(...col.children.map(depth)) : 1;
+    return columns.length ? Math.max(...columns.map(depth)) : 1;
+  });
+  interface HeaderCell {
+    col: ColumnDef<T>;
+    colSpan: number;
+    rowSpan: number;
+    leafIndex: number; // 叶子格：其在 leafColumns 的下标；父分组格：-1
+    isLeaf: boolean;
+  }
+  // 二维表头：rows[r] 是第 r 行的表头格序列。叶子列 rowSpan 纵向合并到底行。
+  const headerRows = $derived.by<HeaderCell[][]>(() => {
+    const depth = headerDepth;
+    const rows: HeaderCell[][] = Array.from({ length: depth }, () => []);
+    const walk = (col: ColumnDef<T>, rowIndex: number, startLeaf: number): void => {
+      if (!col.children || col.children.length === 0) {
+        rows[rowIndex]?.push({ col, colSpan: 1, rowSpan: depth - rowIndex, leafIndex: startLeaf, isLeaf: true });
+      } else {
+        rows[rowIndex]?.push({ col, colSpan: leafCount(col), rowSpan: 1, leafIndex: -1, isLeaf: false });
+        let childLeaf = startLeaf;
+        for (const child of col.children) {
+          walk(child, rowIndex + 1, childLeaf);
+          childLeaf += leafCount(child);
+        }
+      }
+    };
+    let cursor = 0;
+    for (const col of columns) {
+      walk(col, 0, cursor);
+      cursor += leafCount(col);
+    }
+    return rows;
+  });
+
   // --- 列宽拖拽：本地覆盖宽度 (colKey → px)，不写回 columns prop (红线 #1) ---
   const MIN_COL_WIDTH = 40;
   const widthOverrides = new SvelteMap<string, number>();
@@ -234,9 +383,11 @@
     return col.width;
   }
 
-  // 列头拖拽：命令式管理指针几何 (红线 #3)。
-  // pointerdown 一次性把起始宽度 / clientX 存普通变量，document 上手动绑定
-  // pointermove / pointerup，结束时解绑。绝不用响应式 attachment 读几何。
+  // 列头拖拽：收敛到 core 通用拖拽原语 createResizeDrag，命令式管理指针几何
+  // (红线 #3)。pointerdown 时以当前列 colKey / 起始宽度构建一次性拖拽实例，
+  // 由原语在 document 上绑定 pointermove/pointerup 并在结束/卸载时解绑；
+  // 绝不用响应式 attachment 读几何。
+  let activeDrag: ResizeDragController | null = null;
   function startResize(event: PointerEvent, col: ColumnDef<T>, index: number) {
     event.preventDefault();
     event.stopPropagation();
@@ -246,33 +397,31 @@
     const ov = widthOverrides.get(colKey);
     const startWidth =
       ov ?? (typeof col.width === 'number' ? col.width : (th?.getBoundingClientRect().width ?? MIN_COL_WIDTH));
-    const startX = event.clientX;
 
-    resizingKey = colKey;
-
-    const onMove = (e: PointerEvent) => {
-      const next = Math.max(MIN_COL_WIDTH, Math.round(startWidth + (e.clientX - startX)));
-      widthOverrides.set(colKey, next);
-    };
-    const onUp = () => {
-      document.removeEventListener('pointermove', onMove);
-      document.removeEventListener('pointerup', onUp);
-      activeMove = null;
-      activeUp = null;
-      resizingKey = null;
-    };
-    activeMove = onMove;
-    activeUp = onUp;
-    document.addEventListener('pointermove', onMove);
-    document.addEventListener('pointerup', onUp);
+    activeDrag?.destroy();
+    const drag = createResizeDrag({
+      axis: 'x',
+      getStart: () => ({ width: startWidth }),
+      // 单数 min 作用于 x 轴：等价 Math.max(MIN_COL_WIDTH, ...)，原语内部再 Math.round
+      min: MIN_COL_WIDTH,
+      onStart: () => {
+        resizingKey = colKey;
+      },
+      onMove: (s) => {
+        widthOverrides.set(colKey, s.width);
+      },
+      onEnd: () => {
+        resizingKey = null;
+        activeDrag = null;
+      },
+    });
+    activeDrag = drag;
+    drag.start(event, 'right');
   }
 
-  // 卸载兜底：若拖拽未结束就卸载，清掉可能遗留的全局监听 (红线 #3)。
-  let activeMove: ((e: PointerEvent) => void) | null = null;
-  let activeUp: (() => void) | null = null;
+  // 卸载兜底：若拖拽未结束就卸载，销毁拖拽实例清掉可能遗留的全局监听 (红线 #3)。
   $effect(() => () => {
-    if (activeMove) document.removeEventListener('pointermove', activeMove);
-    if (activeUp) document.removeEventListener('pointerup', activeUp);
+    activeDrag?.destroy();
   });
 
   // --- 排序：受控 sortState 不回写 (红线 #1) ---
@@ -283,8 +432,8 @@
   );
   function initSort(): SortState {
     // Check for per-column defaultSortOrder
-    for (let i = 0; i < columns.length; i++) {
-      const col = columns[i] as ColumnDef<T>;
+    for (let i = 0; i < leafColumns.length; i++) {
+      const col = leafColumns[i] as ColumnDef<T>;
       if (col.defaultSortOrder != null) {
         return { key: colKeyOf(col, i), order: col.defaultSortOrder };
       }
@@ -333,7 +482,7 @@
   }
   // 筛选变化：单列 onFilterChange + 聚合 onChange。dataIndex 优先列 dataIndex，回退 colKey。
   function emitFilterChange(colKey: string, values: (string | number)[]) {
-    const col = columns.find((c, i) => colKeyOf(c, i) === colKey);
+    const col = leafColumns.find((c, i) => colKeyOf(c, i) === colKey);
     onFilterChange?.({ dataIndex: col?.dataIndex ?? colKey, values });
     emitChange('filter');
   }
@@ -367,8 +516,8 @@
   const processed = $derived.by(() => {
     let data = [...dataSource];
     // 列筛选（多列 AND）
-    for (let i = 0; i < columns.length; i++) {
-      const col = columns[i] as ColumnDef<T>;
+    for (let i = 0; i < leafColumns.length; i++) {
+      const col = leafColumns[i] as ColumnDef<T>;
       const ck = colKeyOf(col, i);
       if (isEffectivelyFiltered(col, ck)) {
         const selected = effectiveFilterValues(col, ck);
@@ -387,7 +536,7 @@
     const { key, order } = currentSort;
     if (key && order) {
       let target: ColumnDef<T> | undefined;
-      columns.forEach((col, i) => {
+      leafColumns.forEach((col, i) => {
         if (colKeyOf(col, i) === key) target = col;
       });
       if (target && target.sorter) {
@@ -425,6 +574,14 @@
   );
 
   const total = $derived(processed.length);
+  // 分页 range 文案（对齐 Semi Table pageText：显示第 X 条-第 Y 条，共 N 条）。
+  const pageRangeText = $derived(
+    loc().t('Table.pageText', {
+      currentStart: total === 0 ? 0 : (currentPage - 1) * pageSize + 1,
+      currentEnd: Math.min(currentPage * pageSize, total),
+      total,
+    }),
+  );
   const visibleRows = $derived(
     paginationEnabled ? paginate(processed, currentPage, pageSize) : processed,
   );
@@ -450,7 +607,7 @@
   // 受控 tree.expandedRowKeys 不回写，仅 onExpand 通知 (红线 #1)。
   const treeEnabled = $derived(tree !== undefined && tree !== false);
   const treeOpts = $derived<TreeTable>(typeof tree === 'object' ? tree : {});
-  const childrenColumnName = $derived(treeOpts.childrenColumnName ?? 'children');
+  const childrenColumnName = $derived(treeOpts.childrenColumnName ?? childrenRecordName ?? 'children');
   const indentSize = $derived(treeOpts.indentSize ?? indentSizeProp);
 
   function getChildren(record: T): T[] | undefined {
@@ -534,6 +691,8 @@
   // 仅依赖本地 $state，render 期只读不读 DOM（红线 #2）。
   const VIRTUAL_OVERSCAN = 4;
   let scrollEl = $state<HTMLDivElement | null>(null);
+  // 最外层 wrapper 引用（scrollToFirstRowOnChange 无 scroll.y 时滚入视口）
+  let wrapperEl = $state<HTMLDivElement | null>(null);
   // 仅由 scroll 回调写入的本地 scrollTop，render 期只读。
   let scrollTop = $state(0);
   // rAF 节流句柄（非响应式）。
@@ -543,6 +702,22 @@
 
   const vRowHeight = $derived(rowHeight > 0 ? rowHeight : 48);
   const vTotalHeight = $derived(displayRows.length * vRowHeight);
+
+  // getVirtualizedListRef：virtualized 时把滚动控制句柄回传给使用方（对齐 Semi）。
+  // scrollTo(offset) 直接设 scrollTop；scrollToItem(index) 按行高换算偏移。命令式，非响应式读。
+  $effect(() => {
+    if (!virtualized || !scrollEl || !getVirtualizedListRef) return;
+    const el = scrollEl;
+    const rowH = vRowHeight;
+    getVirtualizedListRef({
+      scrollTo: (offset: number) => {
+        el.scrollTop = offset;
+      },
+      scrollToItem: (index: number) => {
+        el.scrollTop = index * rowH;
+      },
+    });
+  });
   const vRange = $derived(
     virtualized
       ? fixedRange(scrollTop, height, vRowHeight, displayRows.length, VIRTUAL_OVERSCAN)
@@ -638,10 +813,21 @@
 
   const hasSelection = $derived(rowSelection !== undefined);
   const hasExpand = $derived(expandable !== undefined);
+  // 展开按钮是否占独立前置列：hideExpandedColumn=false 时独立成列；默认 true 并入首列（对齐 Semi）。
+  const expandAsColumn = $derived(hasExpand && hideExpandedColumn === false);
   const colSpan = $derived(
-    columns.length + (hasSelection ? 1 : 0) + (hasExpand ? 1 : 0),
+    leafColumns.length + (hasSelection ? 1 : 0) + (expandAsColumn ? 1 : 0),
   );
 
+  // 表头行内联 style：headerStyle 支持字符串或键值对象，统一序列化为 style 字符串。
+  const headerStyleStr = $derived.by(() => {
+    if (headerStyle == null) return undefined;
+    if (typeof headerStyle === 'string') return headerStyle;
+    return Object.entries(headerStyle)
+      .map(([k, v]) => `${k}:${v}`)
+      .join(';');
+  });
+
   // --- 展开行：受控 expandedRowKeys 不回写 (红线 #1) ---
   const isExpandControlled = $derived(expandable?.expandedRowKeys !== undefined);
   let innerExpanded = $state<RowKey[]>(initExpanded());
@@ -825,7 +1011,7 @@
   const gridId = useId('cd-table-grid');
   // 网格列扁平表：前置 expand/selection 占位列 + 数据列（纯函数 buildGridCols）。
   const gridCols = $derived<GridCol[]>(
-    buildGridCols({ hasExpand, hasSelection, dataColumnCount: columns.length }),
+    buildGridCols({ hasExpand: expandAsColumn, hasSelection, dataColumnCount: leafColumns.length }),
   );
   const gridColCount = $derived(gridCols.length);
   // 总行数（含表头行）= aria-rowcount，虚拟化时为逻辑总数而非渲染数（spec §6）。
@@ -952,7 +1138,7 @@
     const cell = gridEl?.querySelector<HTMLElement>(`#${cssEscape(cellId(focusRow, focusCol))}`);
     if (!cell) return false;
     const focusable = cell.querySelector<HTMLElement>(
-      'button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]):not(.cd-table__cell)',
+      'button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]):not(.cd-table-row-cell)',
     );
     if (!focusable) return false;
     cellInteractive = true;
@@ -993,7 +1179,7 @@
   // 当前各列筛选选中值（colKey → values[]），仅含非空筛选列。
   function snapshotFilters(): Record<string, (string | number)[]> {
     const out: Record<string, (string | number)[]> = {};
-    columns.forEach((col, i) => {
+    leafColumns.forEach((col, i) => {
       const ck = colKeyOf(col, i);
       const vals = filterState.get(ck);
       if (vals && vals.size > 0) out[ck] = [...vals];
@@ -1016,6 +1202,18 @@
       sorter: sorterOverride ?? currentSort,
       extra: { action },
     });
+    maybeScrollToFirstRow();
+  }
+
+  // scroll.scrollToFirstRowOnChange：分页/排序/筛选变化后滚到表格顶部（对齐 Semi）。
+  // scroll.y 时重置表体内部滚动到顶；否则把表格滚入视口顶部。命令式写 DOM，非响应式。
+  function maybeScrollToFirstRow() {
+    if (!scroll?.scrollToFirstRowOnChange) return;
+    if (scroll.y != null && scrollEl) {
+      scrollEl.scrollTop = 0;
+    } else if (wrapperEl) {
+      wrapperEl.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }
   }
 
   // --- 排序点击 ---
@@ -1078,17 +1276,30 @@
     if (w === undefined) return undefined;
     return typeof w === 'number' ? `width:${w}px` : `width:${w}`;
   }
+  // ColGroup <col> 宽度：对齐 Semi（width + minWidth 同值），无宽则不设。
+  function colGroupStyle(col: ColumnDef<T>, index: number): string | undefined {
+    const w = resolveWidth(col, index);
+    if (w === undefined) return undefined;
+    const v = typeof w === 'number' ? `${w}px` : w;
+    return `width:${v};min-width:${v}`;
+  }
+  // 选择列宽度：rowSelection.columnWidth 优先，否则 Semi 默认 48px（对齐 LEADING_W）。
+  const selectionColWidth = $derived(
+    typeof rowSelection?.columnWidth === 'number'
+      ? rowSelection.columnWidth
+      : 48,
+  );
 
   // --- 固定列：纯 CSS sticky + 逐列像素偏移计算 ---
-  // selection / expand 前置列宽（与 CSS .cd-table__cell--selection/--expand 对齐）
+  // selection / expand 前置列宽（与 CSS .cd-table-column-selection/--expand 对齐）
   const LEADING_W = 48;
   // 前置 leading 列（expand + selection）的总宽，作为 left 固定列偏移基数
-  const leadingWidth = $derived((hasExpand ? LEADING_W : 0) + (hasSelection ? LEADING_W : 0));
-  const hasFixed = $derived(columns.some((c) => c.fixed));
+  const leadingWidth = $derived((expandAsColumn ? LEADING_W : 0) + (hasSelection ? LEADING_W : 0));
+  const hasFixed = $derived(leafColumns.some((c) => c.fixed));
   // 固定列时 table 的最小总宽（列宽和 + 前置列），撑过容器以触发横滚
   const totalMinWidth = $derived(
     leadingWidth +
-      columns.reduce((sum, c, i) => {
+      leafColumns.reduce((sum, c, i) => {
         const w = resolveWidth(c, i);
         return sum + (typeof w === 'number' ? w : 120);
       }, 0),
@@ -1104,8 +1315,8 @@
   const fixedLeftOffsets = $derived.by(() => {
     const out: (number | null)[] = [];
     let acc = leadingWidth;
-    for (let i = 0; i < columns.length; i++) {
-      const col = columns[i] as ColumnDef<T>;
+    for (let i = 0; i < leafColumns.length; i++) {
+      const col = leafColumns[i] as ColumnDef<T>;
       if (col.fixed === 'left') {
         out.push(acc);
         acc += colNumWidth(col, i);
@@ -1117,10 +1328,10 @@
   });
   // 每个数据列的 right 偏移（右固定列）：之后所有右固定列宽之和
   const fixedRightOffsets = $derived.by(() => {
-    const out: (number | null)[] = new Array(columns.length).fill(null);
+    const out: (number | null)[] = new Array(leafColumns.length).fill(null);
     let acc = 0;
-    for (let i = columns.length - 1; i >= 0; i--) {
-      const col = columns[i] as ColumnDef<T>;
+    for (let i = leafColumns.length - 1; i >= 0; i--) {
+      const col = leafColumns[i] as ColumnDef<T>;
       if (col.fixed === 'right') {
         out[i] = acc;
         acc += colNumWidth(col, i);
@@ -1131,12 +1342,12 @@
   // 最后一个左固定列 / 第一个右固定列索引（用于阴影边界）
   const lastLeftFixed = $derived.by(() => {
     let idx = -1;
-    columns.forEach((c, i) => {
+    leafColumns.forEach((c, i) => {
       if (c.fixed === 'left') idx = i;
     });
     return idx;
   });
-  const firstRightFixed = $derived(columns.findIndex((c) => c.fixed === 'right'));
+  const firstRightFixed = $derived(leafColumns.findIndex((c) => c.fixed === 'right'));
 
   // 组合某数据列的 sticky 行内样式（含宽度）
   function cellStyle(col: ColumnDef<T>, i: number): string | undefined {
@@ -1152,10 +1363,10 @@
 
   function fixedCellClass(i: number): string {
     if (fixedLeftOffsets[i] != null) {
-      return `cd-table__cell--fixed cd-table__cell--fixed-left${i === lastLeftFixed ? ' cd-table__cell--fixed-left-last' : ''}`;
+      return `cd-table-cell-fixed cd-table-cell-fixed-left${i === lastLeftFixed ? ' cd-table-cell-fixed-left-last' : ''}`;
     }
     if (fixedRightOffsets[i] != null) {
-      return `cd-table__cell--fixed cd-table__cell--fixed-right${i === firstRightFixed ? ' cd-table__cell--fixed-right-first' : ''}`;
+      return `cd-table-cell-fixed cd-table-cell-fixed-right${i === firstRightFixed ? ' cd-table-cell-fixed-right-first' : ''}`;
     }
     return '';
   }
@@ -1163,10 +1374,24 @@
   // 前置 leading 列在存在左固定列时也需 sticky 锁定在最左
   function leadingStyle(slot: 'expand' | 'selection'): string | undefined {
     if (!hasFixed || lastLeftFixed < 0) return undefined;
-    const offset = slot === 'expand' ? 0 : hasExpand ? LEADING_W : 0;
+    const offset = slot === 'expand' ? 0 : expandAsColumn ? LEADING_W : 0;
     return `position:sticky;inset-inline-start:${offset}px`;
   }
-  const leadingFixedClass = $derived(hasFixed && lastLeftFixed >= 0 ? 'cd-table__cell--fixed cd-table__cell--fixed-left' : '');
+  const leadingFixedClass = $derived(hasFixed && lastLeftFixed >= 0 ? 'cd-table-cell-fixed cd-table-cell-fixed-left' : '');
+
+  // 单元格 style 合并：把 onCell 返回的自定义 style 追加到该 td 已有的 sticky/宽度 style 之后。
+  function mergeCellStyle(base: string | undefined, extra: string | undefined): string | undefined {
+    if (!extra) return base;
+    if (!base) return extra;
+    return `${base};${extra}`;
+  }
+
+  // 表头单元格 style 合并：把 headerStyle（应用到所有 th）追加到该 th 已有的 sticky/宽度 style 之后。
+  function mergeHeaderStyle(base: string | undefined): string | undefined {
+    if (!headerStyleStr) return base;
+    if (!base) return headerStyleStr;
+    return `${base};${headerStyleStr}`;
+  }
 
   // --- 半选 indeterminate：用 attachment 命令式写具体 input 元素属性。
   //     仅读派生布尔值并写 DOM，不读几何，写属性不触发响应式，无循环风险 (不违反红线 #3)。
@@ -1179,10 +1404,11 @@
   const cls = $derived(
     [
       'cd-table',
-      `cd-table--${size}`,
-      bordered && 'cd-table--bordered',
-      stripe && 'cd-table--stripe',
-      hasFixed && 'cd-table--fixed',
+      `cd-table-${size}`,
+      bordered && 'cd-table-bordered',
+      stripe && 'cd-table-stripe',
+      hasFixed && 'cd-table-fixed',
+      rowSpanHover && 'cd-table-row-span-hover',
     ]
       .filter(Boolean)
       .join(' '),
@@ -1236,66 +1462,139 @@
     }
     return parts.length ? parts.join(';') : undefined;
   });
-  const selectionFixedClass = $derived(rowSelection?.fixed ? 'cd-table__cell--fixed cd-table__cell--fixed-left' : '');
+  const selectionFixedClass = $derived(rowSelection?.fixed ? 'cd-table-cell-fixed cd-table-cell-fixed-left' : '');
 
   // --- groupBy: build grouped display rows ---
-  type GroupRow = { type: 'group'; groupKey: string; group: T[] };
+  type GroupRow = { type: 'group'; groupKey: string; group: T[]; expanded: boolean; groupIndex: number };
   type DataDisplayRow = FlatRow<T> & { type: 'data' };
   type RenderRow = DataDisplayRow | GroupRow;
 
-  const groupedDisplayRows = $derived.by<RenderRow[]>(() => {
-    if (!groupBy) {
-      return displayRows.map((r) => ({ ...r, type: 'data' as const }));
-    }
-    const getGroupKey = (record: T): string => {
-      if (typeof groupBy === 'function') return groupBy(record);
-      return String(record[groupBy as string] ?? '');
-    };
-    // Build ordered group buckets (only top-level rows are grouped)
-    const groupOrder: string[] = [];
-    const groupMap = new Map<string, T[]>();
+  const isGrouped = $derived(groupBy !== undefined);
+
+  const groupKeyOf = (record: T): string => {
+    if (typeof groupBy === 'function') return groupBy(record);
+    return String(record[groupBy as string] ?? '');
+  };
+
+  // 有序分组桶：仅顶层行参与分组。纯 $derived（红线 #2）。
+  const groupBuckets = $derived.by<{ order: string[]; map: Map<string, T[]> }>(() => {
+    const order: string[] = [];
+    const map = new Map<string, T[]>();
+    if (!groupBy) return { order, map };
     for (const row of displayRows) {
       if (row.level === 0) {
-        const gk = getGroupKey(row.record);
-        if (!groupMap.has(gk)) {
-          groupOrder.push(gk);
-          groupMap.set(gk, []);
+        const gk = groupKeyOf(row.record);
+        if (!map.has(gk)) {
+          order.push(gk);
+          map.set(gk, []);
         }
-        groupMap.get(gk)!.push(row.record);
+        map.get(gk)!.push(row.record);
       }
     }
+    return { order, map };
+  });
+
+  // --- 可折叠分组：受控 expandAllGroupRows 不回写，仅经 onGroupExpandChange 通知 (红线 #1) ---
+  // 受控（expandAllGroupRows 定义）时展开态由该值统一决定（true 全展/false 全折）。
+  // 非受控时仅记录「用户显式切换过的分组 → 展开态」，未切换的分组回退到默认值：
+  // defaultExpandAllGroupRows 显式 false → 默认折叠；缺省(undefined)或 true → 默认展开
+  // （向后兼容既有「分组头+组内行都显示」）。默认值纯 $derived、不落地为 $state，
+  // 故数据变化产生的新分组自动继承默认展开态，无需 effect seed（红线 #2）。
+  const isGroupExpandControlled = $derived(expandAllGroupRows !== undefined);
+  const groupDefaultExpanded = $derived(defaultExpandAllGroupRows !== false);
+  // 用户显式覆盖：groupKey → 展开态（未在此表中的分组用 groupDefaultExpanded）。
+  const groupOverrides = new SvelteMap<string, boolean>();
+
+  // 某分组是否展开：受控看 expandAllGroupRows，非受控看覆盖表 → 默认值。
+  const isGroupExpanded = (groupKey: string): boolean => {
+    if (isGroupExpandControlled) return expandAllGroupRows === true;
+    return groupOverrides.get(groupKey) ?? groupDefaultExpanded;
+  };
+
+  function toggleGroupExpand(groupKey: string) {
+    const willExpand = !isGroupExpanded(groupKey);
+    if (!isGroupExpandControlled) {
+      groupOverrides.set(groupKey, willExpand);
+      const expandedKeys = groupBuckets.order.filter((gk) => isGroupExpanded(gk));
+      onGroupExpandChange?.({ groupKey, expanded: willExpand, expandedGroupKeys: expandedKeys });
+    } else {
+      // 受控：不回写，仅通知（回传「若操作生效」后的期望集合，由消费方决定）
+      const expandedKeys = expandAllGroupRows === true ? groupBuckets.order.slice() : [];
+      onGroupExpandChange?.({ groupKey, expanded: willExpand, expandedGroupKeys: expandedKeys });
+    }
+  }
+
+  const groupedDisplayRows = $derived.by<RenderRow[]>(() => {
+    if (!groupBy) {
+      return displayRows.map((r) => ({ ...r, type: 'data' as const }));
+    }
+    const { order, map } = groupBuckets;
     const result: RenderRow[] = [];
-    for (const gk of groupOrder) {
-      const group = groupMap.get(gk)!;
-      result.push({ type: 'group', groupKey: gk, group });
+    let groupIndex = 0;
+    for (const gk of order) {
+      const group = map.get(gk)!;
+      const expanded = isGroupExpanded(gk);
+      result.push({ type: 'group', groupKey: gk, group, expanded, groupIndex: groupIndex++ });
+      // 折叠的分组只渲染分组头，不铺开组内数据行。
+      if (!expanded) continue;
       // Include all displayRows belonging to this group (incl. tree children)
       let inGroup = false;
       for (const row of displayRows) {
         if (row.level === 0) {
-          inGroup = getGroupKey(row.record) === gk;
+          inGroup = groupKeyOf(row.record) === gk;
         }
         if (inGroup) result.push({ ...row, type: 'data' as const });
       }
     }
     return result;
   });
-
-  // For render purposes when no groupBy: cast displayRows to RenderRow[]
-  const isGrouped = $derived(groupBy !== undefined);
 </script>
 
-{#if titleSnippet}
-  <div class="cd-table__title-area">
-    {@render titleSnippet()}
-  </div>
-{/if}
+<!-- 展开按钮：expandIcon 自定义图标覆盖默认三角。gridTab 为 grid 模式下的 roving tabindex（非 grid 时传 undefined）。 -->
+{#snippet expandButton(record: T, key: RowKey, gridTab: number | undefined)}
+  <button
+    type="button"
+    class="cd-table-expand-icon"
+    class:cd-table-expandedIcon-show={expandedSet.has(key)}
+    aria-expanded={expandedSet.has(key)}
+    aria-label={expandedSet.has(key) ? loc().t('Table.collapseRow') : loc().t('Table.expandRow')}
+    tabindex={gridTab}
+    onclick={(e) => {
+      e.stopPropagation();
+      toggleExpand(record);
+    }}
+  >
+    {#if expandIcon}
+      {@render expandIcon({ expanded: expandedSet.has(key), record })}
+    {:else}
+      <IconChevronRight size="small" aria-hidden="true" />
+    {/if}
+  </button>
+{/snippet}
+
+<!-- 最外层 .semi-table-wrapper（含方向 ltr/rtl），对齐 Semi 分层 -->
 <div
-  class="cd-table-wrap"
-  class:cd-table-wrap--virtual={virtualized}
-  class:cd-table-wrap--scroll-body={scrollBody}
-  bind:this={scrollEl}
-  style={scrollWrapStyle}
+  class="cd-table-wrapper cd-table-wrapper-{direction} {className ?? ''}"
+  class:cd-table-wrapper-rtl={direction === 'rtl'}
+  data-column-fixed={hasFixed ? 'true' : undefined}
+  dir={direction}
+  {style}
+  bind:this={wrapperEl}
 >
+  {#if titleSnippet || title}
+    <div class="cd-table-title">
+      {#if titleSnippet}{@render titleSnippet()}{:else}{title}{/if}
+    </div>
+  {/if}
+  <!-- .semi-table-container：承载 body + footer -->
+  <div class="cd-table-container">
+    <div
+      class="cd-table-body"
+      class:cd-table-body-virtual={virtualized}
+      class:cd-table-body-scroll={scrollBody}
+      bind:this={scrollEl}
+      style={scrollWrapStyle}
+    >
   <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
   <!-- role=grid 是交互容器；tabindex=-1 仅作虚拟化焦点回收落点，不进 Tab 序列 -->
   <table
@@ -1309,26 +1608,43 @@
     tabindex={gridEnabled ? -1 : undefined}
     onkeydown={gridEnabled ? onGridKeydown : undefined}
   >
+    <!-- ColGroup：对齐 Semi，每列一个 <col>，selection/expand 列带对应 class -->
+    <colgroup class="cd-table-colgroup">
+      {#if expandAsColumn}
+        <col class="cd-table-column-expand" style="width:{LEADING_W}px" />
+      {/if}
+      {#if hasSelection}
+        <col class="cd-table-column-selection" style="width:{selectionColWidth}px" />
+      {/if}
+      {#each leafColumns as col, i (colKeyOf(col, i))}
+        <col class={col.className} style={colGroupStyle(col, i)} />
+      {/each}
+    </colgroup>
     {#if showHeader}
       {@const headerRowProps = onHeaderRow ? onHeaderRow(columns, 0) : undefined}
-    <thead
-      class="cd-table__head"
-      class:cd-table__head--sticky={isStickyHead}
+    <svelte:element
+      this={tagThead}
+      class="cd-table-thead"
+      class:cd-table-thead-sticky={isStickyHead}
       style={isStickyHead && stickyOffset > 0 ? `top:${stickyOffset}px` : undefined}
     >
-      <tr
+      <svelte:element
+        this={tagHeaderRow}
         role={gridEnabled ? 'row' : undefined}
         aria-rowindex={gridEnabled ? 1 : undefined}
-        class={headerRowProps?.className ?? undefined}
+        class="cd-table-row {headerRowProps?.className ?? ''}"
         style={headerRowProps?.style ?? undefined}
         onclick={headerRowProps?.onClick ?? undefined}
+        onmouseenter={headerRowProps?.onMouseEnter ?? undefined}
+        onmouseleave={headerRowProps?.onMouseLeave ?? undefined}
       >
-        {#if hasExpand}
+        {#if expandAsColumn}
           {@const gc = 0}
           <th
-            class="cd-table__cell cd-table__cell--expand {leadingFixedClass}"
+            rowspan={hasHeaderMerge ? headerDepth : undefined}
+            class="cd-table-row-head cd-table-column-expand {leadingFixedClass}"
             scope="col"
-            style={leadingStyle('expand')}
+            style={mergeHeaderStyle(leadingStyle('expand'))}
             role={gridEnabled ? 'columnheader' : undefined}
             id={gridEnabled ? cellId(-1, gc) : undefined}
             tabindex={rovingTabindex(-1, gc)}
@@ -1337,13 +1653,14 @@
           ></th>
         {/if}
         {#if hasSelection}
-          {@const gc = hasExpand ? 1 : 0}
+          {@const gc = expandAsColumn ? 1 : 0}
           {@const isRadio = rowSelection?.type === 'radio'}
           {@const showSelectAll = !isRadio && !rowSelection?.hideSelectAll}
           <th
-            class="cd-table__cell cd-table__cell--selection {selectionFixedClass || leadingFixedClass}"
+            rowspan={hasHeaderMerge ? headerDepth : undefined}
+            class="cd-table-row-head cd-table-column-selection {selectionFixedClass || leadingFixedClass}"
             scope="col"
-            style={selectionColStyle ?? leadingStyle('selection')}
+            style={mergeHeaderStyle(selectionColStyle ?? leadingStyle('selection'))}
             role={gridEnabled ? 'columnheader' : undefined}
             id={gridEnabled ? cellId(-1, gc) : undefined}
             tabindex={rovingTabindex(-1, gc)}
@@ -1351,32 +1668,73 @@
             onfocusin={gridEnabled ? () => syncFocusCoord(-1, gc) : undefined}
           >
             {#if showSelectAll}
-              <input
-                type="checkbox"
-                class="cd-table__checkbox"
-                aria-label={loc().t('Table.selectAll')}
-                checked={headerSelect.checked}
-                tabindex={childTabindex(-1, gc)}
-                {@attach indeterminate(headerSelect.indeterminate)}
-                onchange={onToggleAll}
-              />
+              <span class="cd-table-selection-wrap">
+                <input
+                  type="checkbox"
+                  class="cd-table-selection-checkbox"
+                  aria-label={loc().t('Table.selectAll')}
+                  checked={headerSelect.checked}
+                  tabindex={childTabindex(-1, gc)}
+                  {@attach indeterminate(headerSelect.indeterminate)}
+                  onchange={onToggleAll}
+                />
+              </span>
             {/if}
           </th>
         {/if}
-        {#each columns as col, i (colKeyOf(col, i))}
-          {@const gc = (hasExpand ? 1 : 0) + (hasSelection ? 1 : 0) + i}
+        {#if !hasHeaderMerge}
+          {#each leafColumns as col, i (colKeyOf(col, i))}
+            {@render leafHeaderCell(col, i, 1)}
+          {/each}
+        {:else}
+          <!-- 合并模式首行：expand/selection th 已 rowspan 跨满，其后接 headerRows[0] -->
+          {#each headerRows[0] ?? [] as hc (hc.isLeaf ? colKeyOf(hc.col, hc.leafIndex) : `g-${hc.col.title}-${hc.leafIndex}`)}
+            {@render headerMergeCell(hc)}
+          {/each}
+        {/if}
+      </svelte:element>
+      {#if hasHeaderMerge}
+        {#each headerRows.slice(1) as hrow, ri (ri)}
+          <tr class="cd-table-row">
+            {#each hrow as hc (hc.isLeaf ? colKeyOf(hc.col, hc.leafIndex) : `g-${hc.col.title}-${hc.leafIndex}`)}
+              {@render headerMergeCell(hc)}
+            {/each}
+          </tr>
+        {/each}
+      {/if}
+    </svelte:element>
+    {/if}
+    {#snippet headerMergeCell(hc: HeaderCell)}
+      {#if hc.isLeaf}
+        {@render leafHeaderCell(hc.col, hc.leafIndex, hc.rowSpan)}
+      {:else}
+        <th
+          class="cd-table-row-head cd-table-align-{alignOf(hc.col)}"
+          class:cd-table-row-cell-ellipsis={hc.col.ellipsis}
+          scope="colgroup"
+          colspan={hc.colSpan}
+          role={gridEnabled ? 'columnheader' : undefined}
+          style={mergeHeaderStyle(undefined)}
+        >
+          <span class="cd-table-row-head-title">{hc.col.title}</span>
+        </th>
+      {/if}
+    {/snippet}
+    {#snippet leafHeaderCell(col: ColumnDef<T>, i: number, thRowSpan: number)}
+          {@const gc = (expandAsColumn ? 1 : 0) + (hasSelection ? 1 : 0) + i}
           {@const sortable = !!col.sorter}
           {@const colKey = colKeyOf(col, i)}
           {@const hasFilter = !!col.filters && col.filters.length > 0}
           {@const resizable = !!col.resizable}
           <th
-            class="cd-table__cell cd-table__cell--head cd-table__cell--{alignOf(col)} {fixedCellClass(i)}"
-            class:cd-table__cell--ellipsis={col.ellipsis}
-            class:cd-table__cell--has-filter={hasFilter}
-            class:cd-table__cell--resizable={resizable}
-            class:cd-table__cell--resizing={resizingKey === colKey}
+            rowspan={thRowSpan > 1 ? thRowSpan : undefined}
+            class="cd-table-row-head cd-table-align-{alignOf(col)} {fixedCellClass(i)}"
+            class:cd-table-row-cell-ellipsis={col.ellipsis}
+            class:cd-table-row-head-has-filter={hasFilter}
+            class:cd-table-row-head-resizable={resizable}
+            class:resizing={resizingKey === colKey}
             scope="col"
-            style={cellStyle(col, i)}
+            style={mergeHeaderStyle(cellStyle(col, i))}
             aria-sort={sortable ? ariaSortFor(col, i) : undefined}
             role={gridEnabled ? 'columnheader' : undefined}
             id={gridEnabled ? cellId(-1, gc) : undefined}
@@ -1388,43 +1746,29 @@
               {@const order = col.sortOrder !== undefined ? col.sortOrder : (currentSort.key === colKeyOf(col, i) ? currentSort.order : null)}
               <button
                 type="button"
-                class="cd-table__sort-btn"
+                class="cd-table-column-sorter-wrapper"
                 tabindex={childTabindex(-1, gc)}
                 onclick={() => onSort(col, i)}
               >
-                <span class="cd-table__title">{col.title}</span>
-                <span class="cd-table__sort-icons" aria-hidden="true">
-                  <svg
-                    class="cd-table__sort-up"
-                    class:cd-table__sort--active={order === 'ascend'}
-                    viewBox="0 0 8 5"
-                    width="8"
-                    height="5"
-                    focusable="false"
-                  >
-                    <path fill="currentColor" d="M4 0l4 5H0z" />
-                  </svg>
-                  <svg
-                    class="cd-table__sort-down"
-                    class:cd-table__sort--active={order === 'descend'}
-                    viewBox="0 0 8 5"
-                    width="8"
-                    height="5"
-                    focusable="false"
-                  >
-                    <path fill="currentColor" d="M4 5L0 0h8z" />
-                  </svg>
+                <span class="cd-table-row-head-title">{col.title}</span>
+                <span class="cd-table-column-sorter" aria-hidden="true">
+                  <span class="cd-table-column-sorter-up" class:on={order === 'ascend'}>
+                    <IconCaretup size="small" />
+                  </span>
+                  <span class="cd-table-column-sorter-down" class:on={order === 'descend'}>
+                    <IconCaretdown size="small" />
+                  </span>
                 </span>
               </button>
             {:else}
-              <span class="cd-table__title">{col.title}</span>
+              <span class="cd-table-row-head-title">{col.title}</span>
             {/if}
 
             {#if hasFilter}
               <button
                 type="button"
-                class="cd-table__filter-btn"
-                class:cd-table__filter-btn--active={isEffectivelyFiltered(col, colKey)}
+                class="cd-table-column-filter"
+                class:on={isEffectivelyFiltered(col, colKey)}
                 aria-label={loc().t('Table.filter')}
                 aria-expanded={openFilterKey === colKey}
                 tabindex={childTabindex(-1, gc)}
@@ -1434,21 +1778,19 @@
                   openFilterKey = openFilterKey === colKey ? null : colKey;
                 }}
               >
-                <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false">
-                  <path fill="currentColor" d="M2 3h12l-4.5 5.5V13L6.5 11V8.5L2 3Z" />
-                </svg>
+                <IconFilter size="small" aria-hidden="true" />
               </button>
               {#if openFilterKey === colKey && filterTriggers[colKey]}
                 {@const filterMultiple = col.filterMultiple !== false}
                 <div
-                  class="cd-table__filter-panel"
+                  class="cd-table-column-filter-dropdown"
                   use:floating={{ trigger: filterTriggers[colKey], placement: 'bottomEnd', autoAdjust: true, offset: 4, getContainer: getPopupContainer }}
                   bind:this={filterPanelEl}
                 >
-                  <ul class="cd-table__filter-list">
+                  <ul class="cd-table-column-filter-list">
                     {#each col.filters ?? [] as f (f.value)}
-                      <li class="cd-table__filter-option">
-                        <label class="cd-table__filter-label">
+                      <li class="cd-table-column-filter-item">
+                        <label class="cd-table-column-filter-label">
                           {#if filterMultiple}
                             <input
                               type="checkbox"
@@ -1471,11 +1813,11 @@
                       </li>
                     {/each}
                   </ul>
-                  <div class="cd-table__filter-actions">
-                    <button type="button" class="cd-table__filter-reset" onclick={() => resetFilter(colKey)}>
+                  <div class="cd-table-column-filter-actions">
+                    <button type="button" class="cd-table-column-filter-reset" onclick={() => resetFilter(colKey)}>
                       {loc().t('Table.filterReset')}
                     </button>
-                    <button type="button" class="cd-table__filter-confirm" onclick={() => (openFilterKey = null)}>
+                    <button type="button" class="cd-table-column-filter-confirm" onclick={() => (openFilterKey = null)}>
                       {loc().t('Table.filterConfirm')}
                     </button>
                   </div>
@@ -1485,7 +1827,7 @@
 
             {#if resizable}
               <span
-                class="cd-table__resize-handle"
+                class="react-resizable-handle"
                 role="separator"
                 aria-orientation="vertical"
                 aria-label={loc().t('Table.resizeColumn')}
@@ -1494,15 +1836,12 @@
               ></span>
             {/if}
           </th>
-        {/each}
-      </tr>
-    </thead>
-    {/if}
-    <tbody class="cd-table__body">
+    {/snippet}
+    <svelte:element this={tagTbody} class="cd-table-tbody">
       {#if visibleRows.length === 0}
-        <tr class="cd-table__row cd-table__row--empty" role={gridEnabled ? 'row' : undefined}>
+        <tr class="cd-table-row cd-table-row-placeholder" role={gridEnabled ? 'row' : undefined}>
           <td
-            class="cd-table__cell cd-table__cell--empty"
+            class="cd-table-row-cell cd-table-placeholder"
             colspan={colSpan}
             role={gridEnabled ? 'gridcell' : undefined}
             aria-colindex={gridEnabled ? 1 : undefined}
@@ -1515,8 +1854,44 @@
           {#each groupedDisplayRows as groupRow (groupRow.type === 'group' ? `__group__${(groupRow as GroupRow).groupKey}` : (groupRow as DataDisplayRow).key)}
             {#if groupRow.type === 'group'}
               {@const gRow = groupRow as GroupRow}
-              <tr class="cd-table__row cd-table__row--group-header" role={gridEnabled ? 'row' : undefined}>
-                <td class="cd-table__cell cd-table__cell--group-header" colspan={colSpan}>
+              {@const groupedRowProps = onGroupedRow ? onGroupedRow(gRow.group, gRow.groupIndex) : undefined}
+              <tr
+                class="cd-table-row cd-table-row-section {groupedRowProps?.className ?? ''}"
+                class:cd-table-row-section-clickable={clickGroupedRowToExpand}
+                role={gridEnabled ? 'row' : undefined}
+                style={groupedRowProps?.style ?? undefined}
+                ondblclick={groupedRowProps?.onDoubleClick ?? undefined}
+                onmouseenter={groupedRowProps?.onMouseEnter ?? undefined}
+                onmouseleave={groupedRowProps?.onMouseLeave ?? undefined}
+              >
+                <td
+                  class="cd-table-row-cell cd-table-row-cell-section"
+                  colspan={colSpan}
+                  role={clickGroupedRowToExpand ? 'button' : undefined}
+                  tabindex={clickGroupedRowToExpand ? 0 : undefined}
+                  aria-expanded={clickGroupedRowToExpand ? gRow.expanded : undefined}
+                  onclick={(e) => {
+                    if (clickGroupedRowToExpand) toggleGroupExpand(gRow.groupKey);
+                    groupedRowProps?.onClick?.(e);
+                  }}
+                  onkeydown={clickGroupedRowToExpand
+                    ? (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          toggleGroupExpand(gRow.groupKey);
+                        }
+                      }
+                    : undefined}
+                >
+                  {#if clickGroupedRowToExpand}
+                    <span
+                      class="cd-table-expand-icon"
+                      class:cd-table-expandedIcon-show={gRow.expanded}
+                      aria-hidden="true"
+                    >
+                      <IconChevronRight size="small" aria-hidden="true" />
+                    </span>
+                  {/if}
                   {#if renderGroupSection}
                     {@render renderGroupSection({ groupKey: gRow.groupKey, group: gRow.group })}
                   {:else}
@@ -1535,13 +1910,13 @@
               {@const rowDisabled = disabledSet.has(key)}
               {@const extra = rowClassName ? rowClassName(record, index) : ''}
               {@const clickable = !!onRowClick || expandRowByClick}
-              {@const rowProps = onRow ? onRow(record, index) : undefined}
-              <tr
-                class="cd-table__row {extra} {rowProps?.className ?? ''}"
-                class:cd-table__row--selected={selected}
-                class:cd-table__row--stripe={stripe && index % 2 === 1}
-                class:cd-table__row--clickable={clickable}
-                class:cd-table__row--child={treeEnabled && row.level > 0}
+              {@const rowProps = onRow ? onRow(record, index, { disabled: rowDisabled, selected }) : undefined}
+              <svelte:element this={tagBodyRow}
+                class="cd-table-row {extra} {rowProps?.className ?? ''}"
+                class:cd-table-row-selected={selected}
+                class:cd-table-row-stripe={stripe && index % 2 === 1}
+                class:cd-table-row-clickable={clickable}
+                class:cd-table-row-child={treeEnabled && row.level > 0}
                 role={gridEnabled ? 'row' : undefined}
                 style={rowProps?.style ?? undefined}
                 onclick={(e) => {
@@ -1551,41 +1926,32 @@
                   if (rowProps?.onClick) rowProps.onClick(e);
                 }}
                 ondblclick={rowProps?.onDoubleClick ?? undefined}
+                onmouseenter={rowProps?.onMouseEnter ?? undefined}
+                onmouseleave={rowProps?.onMouseLeave ?? undefined}
               >
-                {#if hasExpand}
-                  {@const gc = 0}
+                {#if expandAsColumn}
                   <td
-                    class="cd-table__cell cd-table__cell--expand {leadingFixedClass}"
+                    class="cd-table-row-cell cd-table-column-expand {leadingFixedClass}"
                     style={leadingStyle('expand')}
                     role={gridEnabled ? 'gridcell' : undefined}
                   >
                     {#if canExpand(record)}
-                      <button
-                        type="button"
-                        class="cd-table__expand-btn"
-                        class:cd-table__expand-btn--open={expandedSet.has(key)}
-                        aria-expanded={expandedSet.has(key)}
-                        aria-label={expandedSet.has(key) ? loc().t('Table.collapseRow') : loc().t('Table.expandRow')}
-                        onclick={(e) => { e.stopPropagation(); toggleExpand(record); }}
-                      >
-                        <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false">
-                          <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 4l4 4-4 4" />
-                        </svg>
-                      </button>
+                      {@render expandButton(record, key, undefined)}
                     {/if}
                   </td>
                 {/if}
                 {#if hasSelection}
                   {@const isRadio = rowSelection?.type === 'radio'}
                   <td
-                    class="cd-table__cell cd-table__cell--selection {selectionFixedClass || leadingFixedClass}"
+                    class="cd-table-row-cell cd-table-column-selection {selectionFixedClass || leadingFixedClass}"
                     style={selectionColStyle ?? leadingStyle('selection')}
                     role={gridEnabled ? 'gridcell' : undefined}
                   >
+                    <span class="cd-table-selection-wrap" class:cd-table-selection-disabled={rowDisabled}>
                     {#if isRadio}
                       <input
                         type="radio"
-                        class="cd-table__checkbox"
+                        class="cd-table-selection-checkbox"
                         aria-label={loc().t('Table.selectRow')}
                         checked={selected}
                         disabled={rowDisabled}
@@ -1595,7 +1961,7 @@
                     {:else}
                       <input
                         type="checkbox"
-                        class="cd-table__checkbox"
+                        class="cd-table-selection-checkbox"
                         aria-label={loc().t('Table.selectRow')}
                         checked={selected}
                         disabled={rowDisabled}
@@ -1604,52 +1970,71 @@
                         onchange={() => onToggleRow(record)}
                       />
                     {/if}
+                    </span>
                   </td>
                 {/if}
-                {#each columns as col, i (colKeyOf(col, i))}
+                {#each leafColumns as col, i (colKeyOf(col, i))}
                   {@const value = cellValue(col, record)}
                   <td
-                    class="cd-table__cell cd-table__cell--{alignOf(col)} {fixedCellClass(i)}"
-                    class:cd-table__cell--ellipsis={col.ellipsis}
+                    class="cd-table-row-cell cd-table-align-{alignOf(col)} {fixedCellClass(i)}"
+                    class:cd-table-row-cell-ellipsis={col.ellipsis}
                     style={cellStyle(col, i)}
                   >
-                    {#if treeEnabled && i === 0}
-                      <span class="cd-table__tree-indent" style="inline-size:{row.level * indentSize}px" aria-hidden="true"></span>
-                      {#if row.hasChildren}
-                        <button
-                          type="button"
-                          class="cd-table__tree-toggle"
-                          class:cd-table__tree-toggle--open={treeExpandedSet.has(key)}
-                          aria-expanded={treeExpandedSet.has(key)}
-                          aria-label={treeExpandedSet.has(key) ? loc().t('Table.collapseRow') : loc().t('Table.expandRow')}
-                          onclick={(e) => { e.stopPropagation(); toggleTreeExpand(record); }}
-                        >
-                          <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false">
-                            <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 4l4 4-4 4" />
-                          </svg>
-                        </button>
-                      {:else}
-                        <span class="cd-table__tree-toggle cd-table__tree-toggle--placeholder" aria-hidden="true"></span>
+                    {#snippet gExpandMaterial()}
+                      {#if hasExpand && !expandAsColumn && i === 0}
+                        <span class="cd-table-expand-icon-cell">
+                          {#if canExpand(record)}
+                            {@render expandButton(record, key, undefined)}
+                          {:else}
+                            <span class="cd-table-expand-icon cd-table-expand-icon-placeholder" aria-hidden="true"></span>
+                          {/if}
+                        </span>
                       {/if}
-                    {/if}
-                    {#if col.render}
-                      {@render col.render({ value, record, index })}
+                      {#if treeEnabled && i === 0}
+                        {#if row.hasChildren}
+                          <button
+                            type="button"
+                            class="cd-table-expand-icon"
+                            class:cd-table-expandedIcon-show={treeExpandedSet.has(key)}
+                            aria-expanded={treeExpandedSet.has(key)}
+                            aria-label={treeExpandedSet.has(key) ? loc().t('Table.collapseRow') : loc().t('Table.expandRow')}
+                            onclick={(e) => { e.stopPropagation(); toggleTreeExpand(record); }}
+                          >
+                            <IconTreeTriangleRight size="small" aria-hidden="true" />
+                          </button>
+                        {:else}
+                          <span class="cd-table-expand-icon cd-table-expand-icon-placeholder" aria-hidden="true"></span>
+                        {/if}
+                      {/if}
+                    {/snippet}
+                    {#snippet gIndentMaterial()}
+                      {#if treeEnabled && i === 0}
+                        <span class="cd-table-row-indent" style="inline-size:{row.level * indentSize}px" aria-hidden="true"></span>
+                      {/if}
+                    {/snippet}
+                    {#if col.useFullRender && col.render}
+                      {@render col.render({ value, record, index, expandIcon: gExpandMaterial, indentText: gIndentMaterial })}
                     {:else}
-                      {cellText(value)}
+                      {#if i === 0}{@render gIndentMaterial()}{@render gExpandMaterial()}{/if}
+                      {#if col.render}
+                        {@render col.render({ value, record, index })}
+                      {:else}
+                        {cellText(value)}
+                      {/if}
                     {/if}
                   </td>
                 {/each}
-              </tr>
+              </svelte:element>
               {#if hasExpand && canExpand(record)}
                 {#if keepDOM}
-                  <tr class="cd-table__row cd-table__row--expanded" role={gridEnabled ? 'row' : undefined} style={expandedSet.has(key) ? undefined : 'display:none'}>
-                    <td class="cd-table__cell cd-table__cell--expanded-content" colspan={colSpan} role={gridEnabled ? 'gridcell' : undefined} aria-colindex={gridEnabled ? 1 : undefined}>
+                  <tr class="cd-table-row cd-table-row-expand" role={gridEnabled ? 'row' : undefined} style={expandedSet.has(key) ? undefined : 'display:none'}>
+                    <td class="cd-table-row-cell cd-table-row-cell-expanded-content" colspan={colSpan} role={gridEnabled ? 'gridcell' : undefined} aria-colindex={gridEnabled ? 1 : undefined}>
                       {@render expandable!.expandedRowRender({ record, index })}
                     </td>
                   </tr>
                 {:else if expandedSet.has(key)}
-                  <tr class="cd-table__row cd-table__row--expanded" role={gridEnabled ? 'row' : undefined}>
-                    <td class="cd-table__cell cd-table__cell--expanded-content" colspan={colSpan} role={gridEnabled ? 'gridcell' : undefined} aria-colindex={gridEnabled ? 1 : undefined}>
+                  <tr class="cd-table-row cd-table-row-expand" role={gridEnabled ? 'row' : undefined}>
+                    <td class="cd-table-row-cell cd-table-row-cell-expanded-content" colspan={colSpan} role={gridEnabled ? 'gridcell' : undefined} aria-colindex={gridEnabled ? 1 : undefined}>
                       {@render expandable!.expandedRowRender({ record, index })}
                     </td>
                   </tr>
@@ -1659,7 +2044,7 @@
           {/each}
         {:else}
         {#if virtualized && vTopPad > 0}
-          <tr class="cd-table__row cd-table__row--spacer" aria-hidden="true">
+          <tr class="cd-table-row cd-table-row-spacer" aria-hidden="true">
             <td colspan={colSpan} style="block-size:{vTopPad}px; padding:0; border:0"></td>
           </tr>
         {/if}
@@ -1673,13 +2058,13 @@
           {@const rowDisabled = disabledSet.has(key)}
           {@const extra = rowClassName ? rowClassName(record, index) : ''}
           {@const clickable = !!onRowClick || expandRowByClick}
-          {@const rowProps = onRow ? onRow(record, index) : undefined}
-          <tr
-            class="cd-table__row {extra} {rowProps?.className ?? ''}"
-            class:cd-table__row--selected={selected}
-            class:cd-table__row--stripe={stripe && index % 2 === 1}
-            class:cd-table__row--clickable={clickable}
-            class:cd-table__row--child={treeEnabled && row.level > 0}
+          {@const rowProps = onRow ? onRow(record, index, { disabled: rowDisabled, selected }) : undefined}
+          <svelte:element this={tagBodyRow}
+            class="cd-table-row {extra} {rowProps?.className ?? ''}"
+            class:cd-table-row-selected={selected}
+            class:cd-table-row-stripe={stripe && index % 2 === 1}
+            class:cd-table-row-clickable={clickable}
+            class:cd-table-row-child={treeEnabled && row.level > 0}
             role={gridEnabled ? 'row' : undefined}
             aria-rowindex={gridEnabled ? gridRow + 2 : undefined}
             aria-selected={gridEnabled && hasSelection ? selected : undefined}
@@ -1691,11 +2076,13 @@
               if (rowProps?.onClick) rowProps.onClick(e);
             }}
             ondblclick={rowProps?.onDoubleClick ?? undefined}
+            onmouseenter={rowProps?.onMouseEnter ?? undefined}
+            onmouseleave={rowProps?.onMouseLeave ?? undefined}
           >
-            {#if hasExpand}
+            {#if expandAsColumn}
               {@const gc = 0}
               <td
-                class="cd-table__cell cd-table__cell--expand {leadingFixedClass}"
+                class="cd-table-row-cell cd-table-column-expand {leadingFixedClass}"
                 style={leadingStyle('expand')}
                 role={gridEnabled ? 'gridcell' : undefined}
                 id={gridEnabled ? cellId(gridRow, gc) : undefined}
@@ -1704,30 +2091,15 @@
                 onfocusin={gridEnabled ? () => syncFocusCoord(gridRow, gc) : undefined}
               >
                 {#if canExpand(record)}
-                  <button
-                    type="button"
-                    class="cd-table__expand-btn"
-                    class:cd-table__expand-btn--open={expandedSet.has(key)}
-                    aria-expanded={expandedSet.has(key)}
-                    aria-label={expandedSet.has(key) ? loc().t('Table.collapseRow') : loc().t('Table.expandRow')}
-                    tabindex={childTabindex(gridRow, gc)}
-                    onclick={(e) => {
-                      e.stopPropagation();
-                      toggleExpand(record);
-                    }}
-                  >
-                    <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false">
-                      <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 4l4 4-4 4" />
-                    </svg>
-                  </button>
+                  {@render expandButton(record, key, childTabindex(gridRow, gc))}
                 {/if}
               </td>
             {/if}
             {#if hasSelection}
-              {@const gc = hasExpand ? 1 : 0}
+              {@const gc = expandAsColumn ? 1 : 0}
               {@const isRadio = rowSelection?.type === 'radio'}
               <td
-                class="cd-table__cell cd-table__cell--selection {selectionFixedClass || leadingFixedClass}"
+                class="cd-table-row-cell cd-table-column-selection {selectionFixedClass || leadingFixedClass}"
                 style={selectionColStyle ?? leadingStyle('selection')}
                 role={gridEnabled ? 'gridcell' : undefined}
                 id={gridEnabled ? cellId(gridRow, gc) : undefined}
@@ -1735,10 +2107,11 @@
                 aria-colindex={gridEnabled ? gc + 1 : undefined}
                 onfocusin={gridEnabled ? () => syncFocusCoord(gridRow, gc) : undefined}
               >
+                <span class="cd-table-selection-wrap" class:cd-table-selection-disabled={rowDisabled}>
                 {#if isRadio}
                   <input
                     type="radio"
-                    class="cd-table__checkbox"
+                    class="cd-table-selection-checkbox"
                     aria-label={loc().t('Table.selectRow')}
                     checked={selected}
                     disabled={rowDisabled}
@@ -1749,7 +2122,7 @@
                 {:else}
                   <input
                     type="checkbox"
-                    class="cd-table__checkbox"
+                    class="cd-table-selection-checkbox"
                     aria-label={loc().t('Table.selectRow')}
                     checked={selected}
                     disabled={rowDisabled}
@@ -1759,62 +2132,87 @@
                     onchange={() => onToggleRow(record)}
                   />
                 {/if}
+                </span>
               </td>
             {/if}
-            {#each columns as col, i (colKeyOf(col, i))}
+            {#each leafColumns as col, i (colKeyOf(col, i))}
               {@const value = cellValue(col, record)}
-              {@const gc = (hasExpand ? 1 : 0) + (hasSelection ? 1 : 0) + i}
-              {@const isRowHeader = gridEnabled && i === 0 && !hasSelection && !hasExpand}
+              {@const gc = (expandAsColumn ? 1 : 0) + (hasSelection ? 1 : 0) + i}
+              {@const isRowHeader = gridEnabled && i === 0 && !hasSelection && !expandAsColumn}
+              {@const cellProps = col.onCell ? col.onCell(record, index) : undefined}
+              {#if !(cellProps && (cellProps.colSpan === 0 || cellProps.rowSpan === 0))}
               <td
-                class="cd-table__cell cd-table__cell--{alignOf(col)} {fixedCellClass(i)}"
-                class:cd-table__cell--ellipsis={col.ellipsis}
-                style={cellStyle(col, i)}
+                class="cd-table-row-cell cd-table-align-{alignOf(col)} {fixedCellClass(i)} {cellProps?.className ?? ''}"
+                class:cd-table-row-cell-ellipsis={col.ellipsis}
+                colspan={cellProps?.colSpan}
+                rowspan={cellProps?.rowSpan}
+                style={mergeCellStyle(cellStyle(col, i), cellProps?.style)}
                 role={gridEnabled ? (isRowHeader ? 'rowheader' : 'gridcell') : undefined}
                 id={gridEnabled ? cellId(gridRow, gc) : undefined}
                 tabindex={rovingTabindex(gridRow, gc)}
                 aria-colindex={gridEnabled ? gc + 1 : undefined}
                 onfocusin={gridEnabled ? () => syncFocusCoord(gridRow, gc) : undefined}
               >
-                {#if treeEnabled && i === 0}
-                  <span class="cd-table__tree-indent" style="inline-size:{row.level * indentSize}px" aria-hidden="true"></span>
-                  {#if row.hasChildren}
-                    <button
-                      type="button"
-                      class="cd-table__tree-toggle"
-                      class:cd-table__tree-toggle--open={treeExpandedSet.has(key)}
-                      aria-expanded={treeExpandedSet.has(key)}
-                      aria-label={treeExpandedSet.has(key) ? loc().t('Table.collapseRow') : loc().t('Table.expandRow')}
-                      tabindex={childTabindex(gridRow, gc)}
-                      onclick={(e) => {
-                        e.stopPropagation();
-                        toggleTreeExpand(record);
-                      }}
-                    >
-                      <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false">
-                        <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 4l4 4-4 4" />
-                      </svg>
-                    </button>
-                  {:else}
-                    <span class="cd-table__tree-toggle cd-table__tree-toggle--placeholder" aria-hidden="true"></span>
+                <!-- 展开图标 / 树形三角 / 缩进物料：useFullRender 时不自动前置，改注入 render 供自行摆放 -->
+                {#snippet cellExpandMaterial()}
+                  {#if hasExpand && !expandAsColumn && i === 0}
+                    <span class="cd-table-expand-icon-cell">
+                      {#if canExpand(record)}
+                        {@render expandButton(record, key, childTabindex(gridRow, gc))}
+                      {:else}
+                        <span class="cd-table-expand-icon cd-table-expand-icon-placeholder" aria-hidden="true"></span>
+                      {/if}
+                    </span>
                   {/if}
-                {/if}
-                {#if col.render}
-                  {@render col.render({ value, record, index })}
+                  {#if treeEnabled && i === 0}
+                    {#if row.hasChildren}
+                      <button
+                        type="button"
+                        class="cd-table-expand-icon"
+                        class:cd-table-expandedIcon-show={treeExpandedSet.has(key)}
+                        aria-expanded={treeExpandedSet.has(key)}
+                        aria-label={treeExpandedSet.has(key) ? loc().t('Table.collapseRow') : loc().t('Table.expandRow')}
+                        tabindex={childTabindex(gridRow, gc)}
+                        onclick={(e) => {
+                          e.stopPropagation();
+                          toggleTreeExpand(record);
+                        }}
+                      >
+                        <IconTreeTriangleRight size="small" aria-hidden="true" />
+                      </button>
+                    {:else}
+                      <span class="cd-table-expand-icon cd-table-expand-icon-placeholder" aria-hidden="true"></span>
+                    {/if}
+                  {/if}
+                {/snippet}
+                {#snippet cellIndentMaterial()}
+                  {#if treeEnabled && i === 0}
+                    <span class="cd-table-row-indent" style="inline-size:{row.level * indentSize}px" aria-hidden="true"></span>
+                  {/if}
+                {/snippet}
+                {#if col.useFullRender && col.render}
+                  {@render col.render({ value, record, index, expandIcon: cellExpandMaterial, indentText: cellIndentMaterial })}
                 {:else}
-                  {cellText(value)}
+                  {#if i === 0}{@render cellIndentMaterial()}{@render cellExpandMaterial()}{/if}
+                  {#if col.render}
+                    {@render col.render({ value, record, index })}
+                  {:else}
+                    {cellText(value)}
+                  {/if}
                 {/if}
               </td>
+              {/if}
             {/each}
-          </tr>
+          </svelte:element>
           {#if hasExpand && canExpand(record)}
             {#if keepDOM}
               <tr
-                class="cd-table__row cd-table__row--expanded"
+                class="cd-table-row cd-table-row-expand"
                 role={gridEnabled ? 'row' : undefined}
                 style={expandedSet.has(key) ? undefined : 'display:none'}
               >
                 <td
-                  class="cd-table__cell cd-table__cell--expanded-content"
+                  class="cd-table-row-cell cd-table-row-cell-expanded-content"
                   colspan={colSpan}
                   role={gridEnabled ? 'gridcell' : undefined}
                   aria-colindex={gridEnabled ? 1 : undefined}
@@ -1823,9 +2221,9 @@
                 </td>
               </tr>
             {:else if expandedSet.has(key)}
-              <tr class="cd-table__row cd-table__row--expanded" role={gridEnabled ? 'row' : undefined}>
+              <tr class="cd-table-row cd-table-row-expand" role={gridEnabled ? 'row' : undefined}>
                 <td
-                  class="cd-table__cell cd-table__cell--expanded-content"
+                  class="cd-table-row-cell cd-table-row-cell-expanded-content"
                   colspan={colSpan}
                   role={gridEnabled ? 'gridcell' : undefined}
                   aria-colindex={gridEnabled ? 1 : undefined}
@@ -1837,345 +2235,390 @@
           {/if}
         {/each}
         {#if virtualized && vBottomPad > 0}
-          <tr class="cd-table__row cd-table__row--spacer" aria-hidden="true">
+          <tr class="cd-table-row cd-table-row-spacer" aria-hidden="true">
             <td colspan={colSpan} style="block-size:{vBottomPad}px; padding:0; border:0"></td>
           </tr>
         {/if}
         {/if}
       {/if}
-    </tbody>
+    </svelte:element>
   </table>
-
-  {#if paginationEnabled && total > 0}
-    <div class="cd-table__pagination">
-      <Pagination
-        {total}
-        currentPage={currentPage}
-        {pageSize}
-        size={size === 'large' ? 'default' : size}
-        onChange={onPageChange}
-      />
+      {#if loading}
+        <div class="cd-table-loading" aria-hidden="true">
+          <span class="cd-table-spinner"></span>
+        </div>
+      {/if}
     </div>
-  {/if}
+    <!-- footer 在 .cd-table-container 内、body 之后（对齐 Semi） -->
+    {#if footerSnippet || footer}
+      <div class="cd-table-footer">
+        {#if footerSnippet}{@render footerSnippet({ currentData: visibleRows })}{:else}{footer}{/if}
+      </div>
+    {/if}
+  </div>
 
-  {#if loading}
-    <div class="cd-table__loading" aria-hidden="true">
-      <span class="cd-table__spinner"></span>
-    </div>
+  {#if paginationEnabled && total > 0}
+    {#if renderPagination}
+      {@render renderPagination({ total, currentPage, pageSize, onChange: onPageChange })}
+    {:else}
+      <!-- 对齐 Semi Table 分页：左侧 range 文案（显示第 X-Y 条，共 N 条）+ 右侧 default 页码按钮。
+           表格 size（行高密度）不影响分页器，故分页固定 default 尺寸（不透传表格 size）。 -->
+      <div class="cd-table-pagination-outer">
+        <span class="cd-table-pagination-total">{pageRangeText}</span>
+        <Pagination
+          {total}
+          currentPage={currentPage}
+          {pageSize}
+          size="default"
+          onChange={onPageChange}
+        />
+      </div>
+    {/if}
   {/if}
 </div>
-
-{#if footerSnippet}
-  <div class="cd-table__footer">
-    {@render footerSnippet({ currentData: visibleRows })}
-  </div>
-{/if}
+<!-- /.cd-table-wrapper -->
 
 <style>
-  .cd-table-wrap {
+  /* ===== 严格对齐 Semi Design table.scss —— 消费 Semi 全名 token ===== */
+
+  /* 最外层容器：.semi-table-wrapper */
+  .cd-table-wrapper {
     position: relative;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
     inline-size: 100%;
-    overflow-x: auto;
+    color: var(--cd-color-table-text-default);
+    font-size: var(--cd-font-table-base-fontsize);
   }
 
-  /* 行虚拟滚动：容器自身纵向滚动，表头 sticky 固定于顶部 */
-  .cd-table-wrap--virtual {
-    overflow: auto;
+  /* body 滚动容器：.semi-table-body（横向 + 纵向滚动区） */
+  .cd-table-body {
+    position: relative;
+    inline-size: 100%;
+    box-sizing: border-box;
+    overflow-x: auto;
   }
-  /* 非虚拟化的可滚动表体（onScroll/onReachBottom）：约束高度纵向滚动，表头 sticky */
-  .cd-table-wrap--scroll-body {
+  .cd-table-body-virtual,
+  .cd-table-body-scroll {
     overflow: auto;
   }
-  .cd-table__head--sticky th {
+
+  /* 吸顶表头：thead sticky */
+  .cd-table-thead-sticky th {
     position: sticky;
     inset-block-start: 0;
-    /* 高于固定列单元格(z-index:3)，确保横向固定列表头不盖过纵向 sticky 表头 */
-    z-index: 5;
+    z-index: calc(var(--cd-z-table-fixed-column) + 1);
   }
-  /* spacer 占位行无内容、无交互，仅撑高 */
-  .cd-table__row--spacer:hover {
+  .cd-table-row-spacer:hover {
     background: transparent;
   }
 
+  /* 表格本体：.semi-table */
   .cd-table {
     inline-size: 100%;
-    border-collapse: collapse;
-    background: var(--cd-table-bg);
-    color: var(--cd-table-cell-text);
-    border-radius: var(--cd-table-radius);
-    font-size: var(--cd-font-size-body);
-  }
-  /* 固定列：用 fixed 布局让列宽精确生效，min-width 撑过容器以触发横滚 */
-  .cd-table--fixed {
+    text-align: left;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: inherit;
+    display: table;
+    background: var(--cd-color-table-bg-default);
+  }
+  /* fixed 布局：固定列 / 列宽精确 */
+  .cd-table-fixed {
     inline-size: auto;
     min-inline-size: 100%;
     table-layout: fixed;
   }
 
-  .cd-table__cell {
-    padding-block: var(--cd-table-cell-padding-y);
-    padding-inline: var(--cd-table-cell-padding-x);
+  /* ===== 表头 thead ===== */
+  .cd-table-thead > .cd-table-row > .cd-table-row-head {
+    background-color: var(--cd-color-table-th-bg-default);
+    color: var(--cd-color-table-th-text-default);
+    font-weight: var(--cd-font-weight-bold, 600);
     text-align: left;
     vertical-align: middle;
-    border-block-end: 1px solid var(--cd-table-border-color);
-  }
-  .cd-table--small .cd-table__cell {
-    padding-block: var(--cd-table-cell-padding-y-small);
-  }
-  .cd-table--large .cd-table__cell {
-    padding-block: var(--cd-table-cell-padding-y-large);
-  }
-
-  .cd-table__cell--head {
-    color: var(--cd-table-header-text);
-    background: var(--cd-table-header-bg);
-    font-weight: 600;
-  }
-  .cd-table__head th {
-    background: var(--cd-table-header-bg);
-    color: var(--cd-table-header-text);
-    font-weight: 600;
+    overflow-wrap: break-word;
+    position: relative;
+    padding-inline: var(--cd-spacing-table-row-head-paddingx);
+    padding-block: var(--cd-spacing-table-row-head-paddingy);
+    border-block-end: var(--cd-width-table-header-border) var(--cd-border-table-base-borderstyle) var(--cd-color-table-th-border-default);
   }
-
-  .cd-table__cell--center {
-    text-align: center;
+  /* 点击排序表头：clickSort */
+  .cd-table-row-head-clicksort {
+    cursor: pointer;
   }
-  .cd-table__cell--right {
-    text-align: right;
+  .cd-table-row-head-clicksort:hover {
+    background-image: linear-gradient(0deg, var(--cd-color-table-th-clicksort-bg-hover), var(--cd-color-table-th-clicksort-bg-hover));
+    background-color: var(--cd-color-table-cell-bg-hover);
   }
-  .cd-table__cell--selection {
-    inline-size: 48px;
+  .cd-table-row-head.cd-table-column-selection {
     text-align: center;
-    white-space: nowrap;
   }
-  .cd-table__cell--expand {
-    inline-size: 48px;
+  .cd-table-row-head-ellipsis,
+  .cd-table-row-head-ellipsis .cd-table-row-head-title {
+    overflow: hidden;
     white-space: nowrap;
-    text-align: center;
-  }
-  .cd-table__expand-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--cd-color-text-2);
-    cursor: pointer;
-    transition: transform var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+    text-overflow: ellipsis;
   }
-  .cd-table__expand-btn:hover {
-    color: var(--cd-color-text-0);
+
+  /* ===== 表体 tbody ===== */
+  .cd-table-tbody {
+    display: table-row-group;
   }
-  .cd-table__expand-btn:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-border-radius-small);
+  .cd-table-tbody > .cd-table-row {
+    display: table-row;
+    background-color: var(--cd-color-table-body-bg-default);
   }
-  .cd-table__expand-btn--open {
-    transform: rotate(90deg);
+  .cd-table-tbody > .cd-table-row > .cd-table-row-cell {
+    display: table-cell;
+    overflow-wrap: break-word;
+    border-inline: none;
+    border-block-end: var(--cd-width-table-base-border) var(--cd-border-table-base-borderstyle) var(--cd-color-table-border-default);
+    padding: var(--cd-spacing-table-tbody-rowcell-padding);
+    box-sizing: border-box;
+    position: relative;
+    vertical-align: middle;
   }
-  .cd-table__cell--expanded-content {
-    padding: var(--cd-table-cell-padding, var(--cd-spacing-base-tight));
-    background: var(--cd-color-fill-0);
+  /* 尺寸档：middle / small 单元格纵向内边距 */
+  .cd-table-middle .cd-table-tbody > .cd-table-row > .cd-table-row-cell {
+    padding-block: var(--cd-spacing-table-middle-paddingy);
   }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-table__expand-btn {
-      transition: none;
-    }
+  .cd-table-small .cd-table-tbody > .cd-table-row > .cd-table-row-cell {
+    padding-block: var(--cd-spacing-table-small-paddingy);
   }
-  .cd-table__cell--ellipsis {
-    max-inline-size: 0;
+  .cd-table-row-cell-ellipsis {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  /* --- 树形数据：缩进 + 展开三角 --- */
-  .cd-table__tree-indent {
-    display: inline-block;
-    vertical-align: middle;
+  /* 行 hover：Semi 用 background-image+background-color 双层（fill-0 半透 + bg-0 兜底） */
+  .cd-table-tbody > .cd-table-row:hover > .cd-table-row-cell,
+  .cd-table-tbody > .cd-table-row-hovered > .cd-table-row-cell {
+    background-image: linear-gradient(0deg, var(--cd-color-table-body-bg-hover), var(--cd-color-table-body-bg-hover));
+    background-color: var(--cd-color-table-cell-bg-hover);
   }
-  .cd-table__tree-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: 16px;
-    block-size: 16px;
-    margin-inline-end: var(--cd-spacing-extra-tight);
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--cd-color-text-2);
-    cursor: pointer;
-    vertical-align: middle;
-    transition: transform var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+  /* 固定列 hover：底色保持 body-default，避免透出横滚内容 */
+  .cd-table-tbody > .cd-table-row:hover > .cd-table-cell-fixed-left,
+  .cd-table-tbody > .cd-table-row:hover > .cd-table-cell-fixed-right,
+  .cd-table-tbody > .cd-table-row-hovered > .cd-table-cell-fixed-left,
+  .cd-table-tbody > .cd-table-row-hovered > .cd-table-cell-fixed-right {
+    background-image: linear-gradient(0deg, var(--cd-color-table-body-bg-hover), var(--cd-color-table-body-bg-hover));
+    background-color: var(--cd-color-table-body-bg-default);
   }
-  .cd-table__tree-toggle:hover {
-    color: var(--cd-color-text-0);
-  }
-  .cd-table__tree-toggle:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-border-radius-small);
+
+  /* 对齐 */
+  .cd-table-align-center {
+    text-align: center;
   }
-  .cd-table__tree-toggle--open {
-    transform: rotate(90deg);
+  .cd-table-align-right {
+    text-align: right;
   }
-  .cd-table__tree-toggle--placeholder {
-    cursor: default;
+
+  /* 选择列 / 展开列固定宽度（对齐 Semi $width-table_column_selection = 48px） */
+  .cd-table-column-selection,
+  .cd-table-column-expand {
+    inline-size: var(--cd-width-table-column-selection);
+    text-align: center;
+    white-space: nowrap;
   }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-table__tree-toggle {
-      transition: none;
-    }
+
+  /* 斑马纹（chenzy-design 扩展；Semi 靠 demo onRow className 实现，此处保留组件级开关） */
+  .cd-table-stripe .cd-table-tbody > .cd-table-row-stripe > .cd-table-row-cell {
+    background-color: var(--cd-color-table-selection-bg-default);
   }
 
-  /* --- 固定列：sticky 单元格需不透明背景，避免透出横滚内容 --- */
-  .cd-table__cell--fixed {
-    z-index: 2;
-    background: var(--cd-table-bg);
+  /* 选中行 */
+  .cd-table-tbody > .cd-table-row-selected > .cd-table-row-cell {
+    background-color: var(--cd-color-primary-light-default);
   }
-  .cd-table__head .cd-table__cell--fixed {
-    z-index: 3;
-    background: var(--cd-table-header-bg);
+  .cd-table-row-clickable {
+    cursor: pointer;
   }
-  /* 固定列随行态变色：hover / stripe / selected 时同步背景 */
-  .cd-table__row:hover .cd-table__cell--fixed {
-    background: var(--cd-table-row-hover-bg);
+
+  /* ===== 展开行 / 分组行 ===== */
+  .cd-table-tbody > .cd-table-row-expand > .cd-table-row-cell {
+    background-color: var(--cd-color-table-row-expanded-bg-default);
   }
-  .cd-table__row--stripe .cd-table__cell--fixed {
-    background: var(--cd-table-row-stripe-bg);
+  .cd-table-row-cell-expanded-content {
+    padding-inline: var(--cd-spacing-table-expand-row-paddingleft) var(--cd-spacing-table-expand-row-paddingright);
+    padding-block: var(--cd-spacing-table-expand-row-paddingtop) var(--cd-spacing-table-expand-row-paddingbottom);
+    background-color: var(--cd-color-table-row-expanded-bg-default);
   }
-  .cd-table__row--selected .cd-table__cell--fixed,
-  .cd-table__row--selected:hover .cd-table__cell--fixed {
-    background: var(--cd-table-row-selected-bg);
+  .cd-table-row-hidden {
+    display: none;
   }
-  /* 边界阴影：最后一个左固定列右侧、第一个右固定列左侧 */
-  .cd-table__cell--fixed-left-last::after,
-  .cd-table__cell--fixed-right-first::after {
-    content: '';
-    position: absolute;
-    inset-block: 0;
-    inline-size: 6px;
-    pointer-events: none;
+
+  /* 分组表头行 .semi-table-row-section */
+  .cd-table-tbody > .cd-table-row-section > .cd-table-row-cell {
+    background-color: var(--cd-color-table-selection-bg-default);
+    border-block-end: var(--cd-width-table-base-border) var(--cd-border-table-base-borderstyle) var(--cd-color-table-border-default);
   }
-  .cd-table__cell--fixed-left-last {
-    position: sticky;
+  .cd-table-tbody > .cd-table-row-section > .cd-table-row-cell:not(.cd-table-column-selection) {
+    padding: var(--cd-spacing-table-tbody-rowselection-rowcell-notselection-paddingy) var(--cd-spacing-table-tbody-rowselection-rowcell-notselection-paddingx);
   }
-  .cd-table__cell--fixed-left-last::after {
-    inset-inline-end: -6px;
-    background: linear-gradient(
-      to right,
-      var(--cd-table-fixed-shadow, rgba(0, 0, 0, 0.12)),
-      transparent
-    );
+  .cd-table-section-inner {
+    display: inline-flex;
+    align-items: center;
   }
-  .cd-table__cell--fixed-right-first::after {
-    inset-inline-start: -6px;
-    background: linear-gradient(
-      to left,
-      var(--cd-table-fixed-shadow, rgba(0, 0, 0, 0.12)),
-      transparent
-    );
+  .cd-table-row-section-clickable .cd-table-row-cell-section {
+    cursor: pointer;
+    user-select: none;
   }
-  /* sticky cell 需相对定位以承载 ::after 阴影 */
-  .cd-table__cell--fixed {
-    position: sticky;
+  .cd-table-row-cell-section:focus-visible {
+    outline: 2px solid var(--cd-focus-ring, currentColor);
+    outline-offset: -2px;
   }
 
-  .cd-table--bordered .cd-table__cell {
-    border-inline-end: 1px solid var(--cd-table-border-color);
+  /* ===== 固定列：sticky + 边界阴影 ===== */
+  .cd-table-cell-fixed-left,
+  .cd-table-cell-fixed-right {
+    z-index: var(--cd-z-table-fixed-column);
+    position: sticky;
+    background-color: var(--cd-color-table-bg-default);
   }
-  .cd-table--bordered .cd-table__cell:first-child {
-    border-inline-start: 1px solid var(--cd-table-border-color);
+  .cd-table-thead > .cd-table-row > .cd-table-cell-fixed-left,
+  .cd-table-thead > .cd-table-row > .cd-table-cell-fixed-right {
+    background-color: var(--cd-color-table-th-bg-default);
   }
-  .cd-table--bordered .cd-table__head th {
-    border-block-start: 1px solid var(--cd-table-border-color);
+  .cd-table-cell-fixed-left-last {
+    border-inline-end: var(--cd-width-table-cell-fixed-left-last) solid var(--cd-color-table-shadow-border-default);
+    box-shadow: var(--cd-shadow-table-right);
   }
-
-  .cd-table__row--stripe {
-    background: var(--cd-table-row-stripe-bg);
+  .cd-table-cell-fixed-right-first {
+    border-inline-start: var(--cd-width-table-cell-fixed-right-first) solid var(--cd-color-table-shadow-border-default);
+    box-shadow: var(--cd-shadow-table-left);
   }
-  .cd-table__row:hover {
-    background: var(--cd-table-row-hover-bg);
+  /* 横滚到边隐藏对应阴影 */
+  .cd-table-scroll-position-left .cd-table-cell-fixed-left-last {
+    box-shadow: none;
   }
-  .cd-table__row--selected,
-  .cd-table__row--selected:hover {
-    background: var(--cd-table-row-selected-bg);
+  .cd-table-scroll-position-right .cd-table-cell-fixed-right-first {
+    box-shadow: none;
   }
-  .cd-table__row--clickable {
-    cursor: pointer;
+
+  /* ===== 带边框 bordered ===== */
+  .cd-table-bordered > .cd-table-container {
+    border: var(--cd-width-table-base-border) var(--cd-border-table-base-borderstyle) var(--cd-color-table-border-default);
+    border-inline-end: 0;
+    border-block-end: 0;
+  }
+  .cd-table-bordered .cd-table-thead > .cd-table-row > .cd-table-row-head,
+  .cd-table-bordered .cd-table-tbody > .cd-table-row > .cd-table-row-cell {
+    border-inline-end: var(--cd-width-table-base-border) var(--cd-border-table-base-borderstyle) var(--cd-color-table-border-default);
   }
 
-  .cd-table__cell--empty {
-    padding-block: var(--cd-spacing-loose, 32px);
-    color: var(--cd-table-empty-color);
+  /* ===== 空数据占位 .semi-table-placeholder ===== */
+  .cd-table-placeholder {
+    padding: var(--cd-spacing-table-paddingy) var(--cd-spacing-table-paddingx);
+    color: var(--cd-color-table-placeholder-text-default);
+    font-size: var(--cd-font-table-base-fontsize);
     text-align: center;
+    background: var(--cd-color-table-pl-bg-default);
+    border-block-end: var(--cd-width-table-base-border) var(--cd-border-table-base-borderstyle) var(--cd-color-table-border-default);
   }
 
-  /* --- 列筛选 --- */
-  .cd-table__cell--has-filter {
-    position: relative;
-  }
-  .cd-table__filter-btn {
+  /* ===== 排序 ColumnSorter ===== */
+  .cd-table-column-sorter-wrapper {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    margin-inline-start: var(--cd-spacing-extra-tight);
-    padding: 2px;
-    border: none;
-    background: transparent;
-    color: var(--cd-table-sort-icon-color);
+    gap: var(--cd-spacing-table-column-sorter-marginleft);
+    overflow: hidden;
     cursor: pointer;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    font-weight: var(--cd-font-weight-bold, 600);
+    background: none;
+    border: none;
+  }
+  .cd-table-column-sorter-wrapper:focus-visible {
+    outline: none;
+    box-shadow: var(--cd-focus-ring);
     border-radius: var(--cd-border-radius-small);
+  }
+  .cd-table-column-sorter {
+    display: inline-block;
+    inline-size: var(--cd-width-table-column-sorter-icon);
+    block-size: var(--cd-height-table-column-sorter-icon);
     vertical-align: middle;
+    text-align: center;
+  }
+  .cd-table-column-sorter-up,
+  .cd-table-column-sorter-down {
+    display: block;
+    block-size: 0;
+    color: var(--cd-color-table-sorter-text-default);
   }
-  .cd-table__filter-btn:hover {
-    color: var(--cd-color-text-0);
+  .cd-table-column-sorter-up.on,
+  .cd-table-column-sorter-down.on {
+    color: var(--cd-color-table-sorter-on-text-default);
   }
-  .cd-table__filter-btn--active {
-    color: var(--cd-color-primary);
+  .cd-table-column-sorter-up :global(svg),
+  .cd-table-column-sorter-down :global(svg) {
+    inline-size: var(--cd-width-table-column-sorter-icon);
+    block-size: var(--cd-height-table-column-sorter-icon);
   }
-  .cd-table__filter-btn:focus-visible {
+
+  /* ===== 列筛选 ColumnFilter ===== */
+  .cd-table-column-filter {
+    margin-inline-start: var(--cd-spacing-table-column-filter-marginleft);
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--cd-color-table-filter-text-default);
+    padding: 0;
+    border: none;
+    background: transparent;
+  }
+  .cd-table-column-filter :global(svg) {
+    inline-size: var(--cd-width-table-column-filter-icon);
+    block-size: var(--cd-height-table-column-filter-icon);
+  }
+  .cd-table-column-filter.on {
+    color: var(--cd-color-table-filter-on-text-default);
+  }
+  .cd-table-column-filter:focus-visible {
     outline: none;
     box-shadow: var(--cd-focus-ring);
   }
-  .cd-table__filter-panel {
-    z-index: var(--cd-select-dropdown-z, 1050);
+  /* 筛选下拉面板 .semi-table-column-filter-dropdown */
+  .cd-table-column-filter-dropdown {
+    z-index: var(--cd-z-dropdown, 1060);
     min-inline-size: 10rem;
     padding-block: var(--cd-spacing-extra-tight);
-    background: var(--cd-select-dropdown-bg, var(--cd-color-bg-0, #fff));
-    border-radius: var(--cd-select-dropdown-radius, 6px);
-    box-shadow: var(--cd-select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
-    font-weight: 400;
+    background: var(--cd-color-bg-3, #fff);
+    border-radius: var(--cd-border-radius-medium, 6px);
+    box-shadow: var(--cd-shadow-elevated, 0 4px 12px rgba(0, 0, 0, 0.12));
+    font-weight: var(--cd-font-weight-regular, 400);
   }
-  .cd-table__filter-list {
+  .cd-table-column-filter-list {
     margin: 0;
     padding: 0;
     list-style: none;
-    max-block-size: 14rem;
+    max-block-size: var(--cd-height-table-column-filter-dropdown);
     overflow-y: auto;
   }
-  .cd-table__filter-label {
+  .cd-table-column-filter-label {
     display: flex;
     align-items: center;
     gap: var(--cd-spacing-tight);
     padding: var(--cd-spacing-extra-tight) var(--cd-spacing-base-tight);
     cursor: pointer;
   }
-  .cd-table__filter-label:hover {
-    background: var(--cd-table-row-hover-bg);
+  .cd-table-column-filter-label:hover {
+    background: var(--cd-color-table-body-bg-hover);
   }
-  .cd-table__filter-actions {
+  .cd-table-column-filter-actions {
     display: flex;
     justify-content: space-between;
     gap: var(--cd-spacing-tight);
     padding: var(--cd-spacing-extra-tight) var(--cd-spacing-base-tight);
-    border-block-start: 1px solid var(--cd-table-border-color);
+    border-block-start: var(--cd-width-table-base-border) var(--cd-border-table-base-borderstyle) var(--cd-color-table-border-default);
   }
-  .cd-table__filter-reset,
-  .cd-table__filter-confirm {
+  .cd-table-column-filter-reset,
+  .cd-table-column-filter-confirm {
     padding: 0;
     border: none;
     background: transparent;
@@ -2183,104 +2626,147 @@
     font-size: var(--cd-font-size-small);
     cursor: pointer;
   }
-  .cd-table__filter-reset {
-    color: var(--cd-color-text-2);
+  .cd-table-column-filter-reset {
+    color: var(--cd-color-table-filter-text-default);
   }
-  .cd-table__filter-confirm {
-    color: var(--cd-color-primary);
+  .cd-table-column-filter-confirm {
+    color: var(--cd-color-table-filter-on-text-default);
   }
 
-  /* --- 列宽拖拽手柄 --- */
-  .cd-table__cell--resizable {
+  /* ===== 列宽拖拽手柄 .react-resizable-handle ===== */
+  .cd-table-row-head-resizable {
     position: relative;
   }
-  .cd-table__resize-handle {
+  .react-resizable-handle {
     position: absolute;
-    inset-block: 0;
-    inset-inline-end: 0;
-    inline-size: 8px;
+    inline-size: var(--cd-width-table-react-resizable-handle);
+    block-size: calc(100% - var(--cd-spacing-table-resizable-offset-y) * 2);
+    inset-block-end: var(--cd-spacing-table-resizable-bottom);
+    inset-inline-end: var(--cd-spacing-table-react-resizable-handle-right);
     cursor: col-resize;
-    /* 提到固定列阴影/内容之上，确保可命中 */
-    z-index: 4;
+    z-index: 0;
     touch-action: none;
     user-select: none;
+    background-color: var(--cd-color-table-border-default);
   }
-  .cd-table__resize-handle::after {
-    content: '';
-    position: absolute;
-    inset-block: 25%;
-    inset-inline-end: 3px;
-    inline-size: 2px;
-    background: transparent;
-    transition: background var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-table__resize-handle:hover::after,
-  .cd-table__cell--resizing .cd-table__resize-handle::after {
-    background: var(--cd-color-primary);
+  .react-resizable-handle:hover {
+    background-color: var(--cd-color-table-resizer-bg-default);
   }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-table__resize-handle::after {
-      transition: none;
-    }
+  /* 拖拽中列：resizing 标示线 */
+  .resizing.cd-table-row-head,
+  .resizing.cd-table-row-cell {
+    border-inline-end: var(--cd-width-table-resizer-border) solid var(--cd-color-table-resizer-bg-default);
   }
 
-  .cd-table__sort-btn {
+  /* ===== 行选择 checkbox 包裹 .semi-table-selection-wrap ===== */
+  .cd-table-selection-wrap {
     display: inline-flex;
-    align-items: center;
-    gap: var(--cd-spacing-extra-tight);
-    padding: 0;
-    color: inherit;
-    font: inherit;
-    font-weight: 600;
-    background: none;
-    border: none;
+    vertical-align: bottom;
+  }
+  .cd-table-selection-disabled {
+    cursor: not-allowed;
+  }
+  .cd-table-selection-checkbox {
     cursor: pointer;
+    accent-color: var(--cd-color-primary);
   }
-  .cd-table__sort-btn:focus-visible {
+  .cd-table-selection-checkbox:disabled {
+    cursor: not-allowed;
+  }
+  .cd-table-selection-checkbox:focus-visible {
     outline: none;
     box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-small, 4px);
   }
 
-  .cd-table__sort-icons {
+  /* ===== 展开图标 .semi-table-expand-icon ===== */
+  .cd-table-expand-icon {
     display: inline-flex;
-    flex-direction: column;
-    gap: 1px;
-    color: var(--cd-table-sort-icon-color);
-  }
-  .cd-table__sort--active {
-    color: var(--cd-table-sort-active-color);
-  }
-
-  .cd-table__checkbox {
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    position: relative;
     cursor: pointer;
-    accent-color: var(--cd-color-primary);
+    padding: 0;
+    border: none;
+    vertical-align: middle;
+    background: var(--cd-color-table-expanded-bg-default);
+    color: var(--cd-color-table-expanded-icon-default);
+    margin-inline-end: var(--cd-spacing-table-expand-icon-marginright);
+    transition: transform 150ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
   }
-  .cd-table__checkbox:disabled {
-    cursor: not-allowed;
+  .cd-table-expand-icon:hover {
+    color: var(--cd-color-table-text-default);
   }
-  .cd-table__checkbox:focus-visible {
+  .cd-table-expand-icon:focus-visible {
     outline: none;
     box-shadow: var(--cd-focus-ring);
+    border-radius: var(--cd-border-radius-small);
+  }
+  /* 旋转态：展开 90°（对齐 Semi -expandedIcon-show/-hide） */
+  .cd-table-expandedIcon-show {
+    transform: rotate(90deg);
+  }
+  .cd-table-expandedIcon-hide {
+    transform: rotate(0deg);
+  }
+  .cd-table-expand-icon-placeholder {
+    inline-size: 16px;
+    block-size: 16px;
+    background: transparent;
+    pointer-events: none;
+    cursor: default;
+  }
+  /* 展开按钮并入首列（hideExpandedColumn）内联包裹 */
+  .cd-table-expand-icon-cell {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+  }
+  /* 树形缩进占位 */
+  .cd-table-row-indent {
+    display: inline-block;
+    vertical-align: middle;
   }
 
-  .cd-table__pagination {
+  /* ===== 分页器 .semi-table-pagination-outer ===== */
+  .cd-table-pagination-outer {
     display: flex;
-    justify-content: flex-end;
-    margin-block-start: var(--cd-spacing-base-tight);
+    justify-content: space-between;
+    align-items: center;
+    min-block-size: var(--cd-height-table-pagination-outer-min);
+    color: var(--cd-color-table-page-text-default);
+  }
+  /* 分页左侧 range 文案（显示第 X-Y 条，共 N 条），对齐 Semi 灰色说明文字。 */
+  .cd-table-pagination-total {
+    color: var(--cd-color-table-page-text-default);
+    font-size: var(--cd-font-size-regular, 14px);
+  }
+
+  /* ===== 标题 / footer ===== */
+  .cd-table-title {
+    position: relative;
+    padding-block: var(--cd-spacing-table-title-paddingy);
+    padding-inline: var(--cd-spacing-table-title-paddingx);
+  }
+  .cd-table-footer {
+    background-color: var(--cd-color-table-footer-bg-default);
+    padding: var(--cd-spacing-table-footer-padding);
+    margin: 0;
+    position: relative;
   }
 
-  .cd-table__loading {
+  /* ===== 加载态遮罩 ===== */
+  .cd-table-loading {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--cd-table-loading-mask);
+    background: var(--cd-color-table-bg-default);
     opacity: 0.6;
   }
-
-  .cd-table__spinner {
+  .cd-table-spinner {
     inline-size: 28px;
     block-size: 28px;
     border: 3px solid var(--cd-color-fill-1, rgba(0, 0, 0, 0.1));
@@ -2288,7 +2774,6 @@
     border-radius: 50%;
     animation: cd-table-spin 0.8s linear infinite;
   }
-
   @keyframes cd-table-spin {
     to {
       transform: rotate(360deg);
@@ -2296,32 +2781,12 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .cd-table__spinner {
+    .cd-table-spinner {
       animation: none;
     }
-    .cd-table__sort-up,
-    .cd-table__sort-down {
+    .cd-table-expand-icon,
+    .react-resizable-handle {
       transition: none;
     }
   }
-
-  /* --- 分组标题行 --- */
-  .cd-table__row--group-header {
-    background: var(--cd-table-header-bg);
-  }
-  .cd-table__cell--group-header {
-    padding-block: var(--cd-table-cell-padding-y);
-    padding-inline: var(--cd-table-cell-padding-x);
-    font-weight: 600;
-    color: var(--cd-table-header-text);
-    border-block-end: 1px solid var(--cd-table-border-color);
-  }
-
-  /* --- 表格顶部标题/底部区域 --- */
-  .cd-table__title-area {
-    margin-block-end: var(--cd-spacing-tight, 8px);
-  }
-  .cd-table__footer {
-    margin-block-start: var(--cd-spacing-base-tight, 12px);
-  }
 </style>