niuma-ui 1.0.0 → 1.0.2

package/src/components/table/RsTableBody.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts" generic="T extends import('../table-utils').RsTableRowData">
+/**
+ * RsTable 表体视图：通过 ViewContext inject 取状态（多表互不串扰）。
+ * 行级 v-memo 保留，避免抽离后丢失细粒度跳过渲染。
+ */
+import { isTableRowDisabled, resolveEntryKey } from '../table-utils'
+import type { RsTableRowEntry } from '../table-utils'
+import RsTableBodyRow from './RsTableBodyRow.vue'
+import { useRsTableView } from './rs-table-view-context'
+
+const view = useRsTableView<T>()
+
+type RowEntry = Extract<RsTableRowEntry<T>, { type: 'row' }>
+
+function editingColKeyFor(entry: RowEntry): string | null {
+  const key = view.rowKeyFor(entry)
+  return view.editingCell?.rowKey === key ? view.editingCell.colKey : null
+}
+
+function focusColKeyFor(entry: RowEntry): string | null {
+  const key = view.rowKeyFor(entry)
+  return view.focusCell?.rowKey === key ? view.focusCell.colKey : null
+}
+
+function memoEditingDraft(entry: RowEntry): string {
+  return view.editingCell?.rowKey === view.rowKeyFor(entry) ? view.editingDraft : ''
+}
+</script>
+
+<template>
+  <tbody
+    @pointerover.passive="view.onBodyPointerOver($event)"
+    @pointerout.passive="view.onBodyPointerOut($event)"
+  >
+    <tr v-if="view.loading">
+      <td class="rs-table__empty" :colspan="view.bodyColspan">
+        <div class="rs-table__empty-content" :style="view.emptyContentStyle">
+          {{ view.bodyLabels.loading }}
+        </div>
+      </td>
+    </tr>
+    <tr v-else-if="!view.hasData">
+      <td class="rs-table__empty" :colspan="view.bodyColspan">
+        <div class="rs-table__empty-content" :style="view.emptyContentStyle">
+          <slot name="empty">{{ view.bodyLabels.empty }}</slot>
+        </div>
+      </td>
+    </tr>
+    <template v-else>
+      <tr
+        v-if="view.virtualScrollEnabled && view.virtualSlice.paddingTop > 0"
+        class="rs-table__virtual-pad"
+      >
+        <td :colspan="view.bodyColspan" :style="{ height: `${view.virtualSlice.paddingTop}px` }" />
+      </tr>
+      <template
+        v-for="entry in view.visibleEntries"
+        :key="resolveEntryKey(entry, view.rowKey)"
+      >
+        <tr v-if="entry.type === 'group'" class="rs-table__group-row">
+          <td class="rs-table__group-cell" :colspan="view.bodyColspan">
+            <slot name="group" :key="entry.key" :label="entry.label">
+              {{ entry.label }}
+            </slot>
+          </td>
+        </tr>
+        <tr v-else-if="entry.type === 'expand'" class="rs-table__expand-row">
+          <td class="rs-table__expand-cell" :colspan="view.bodyColspan">
+            <slot name="expand" :row="entry.row" :index="entry.rowIndex" />
+          </td>
+        </tr>
+        <RsTableBodyRow
+          v-else
+          v-memo="[
+            view.rowKeyFor(entry),
+            entry.row,
+            view.isRowSelected(entry),
+            view.isRowIndeterminate(entry),
+            view.isRowExpanded(entry),
+            view.isHighlighted(view.rowKeyFor(entry)),
+            view.rowEditPending(entry),
+            view.stagedMapSize,
+            memoEditingDraft(entry),
+            view.activeEditCellKey,
+            view.activeFocusCellKey,
+            view.activeErrorMapSize,
+            view.activeValidatingMapSize,
+            view.dragRowKeys.join(','),
+            view.dropRowTargetKey,
+            view.dropRowPosition,
+            view.columnPadLeft,
+            view.columnPadRight,
+            view.treeDepthOf(entry),
+            view.canExpandRow(entry),
+            view.treeLoadingKeySet.has(view.rowKeyFor(entry)),
+            view.visibleDataColumns.map((c) => c.key).join('\0'),
+            view.instanceId,
+          ]"
+          :row="entry.row"
+          :row-index="entry.rowIndex"
+          :row-key="view.rowKeyFor(entry)"
+          :columns="view.visibleDataColumns"
+          :column-pad-left="view.columnPadLeft"
+          :column-pad-right="view.columnPadRight"
+          :column-td-class-map="view.columnTdClassMap"
+          :column-style-map="view.columnStyleMap"
+          :show-row-drag-handle="view.showRowDragHandle"
+          :expandable="view.detailExpandable"
+          :tree-mode="view.treeMode"
+          :tree-depth="view.treeDepthOf(entry)"
+          :tree-has-children="view.canExpandRow(entry)"
+          :tree-indent="view.treeIndentPx"
+          :tree-column-key="view.treeExpandColumnKey"
+          :tree-loading="view.treeLoadingKeySet.has(view.rowKeyFor(entry))"
+          :selectable="view.showSelectColumn"
+          :show-index="view.showIndexColumn"
+          :show-edit-gutter="view.showEditGutterColumn"
+          :striped="view.striped"
+          :selection-type="view.selectionType"
+          :is-radio-selection="view.isRadioSelection"
+          :table-editable="view.editable"
+          :edit-trigger="view.editTrigger"
+          :row-commit="view.rowCommit"
+          :allow-null="view.allowNull"
+          :focus-mode="view.editFocusMode"
+          :null-label="view.nullLabel"
+          :show-row-status="view.showRowStatusColumn"
+          :selected="view.isRowSelected(entry)"
+          :indeterminate="view.isRowIndeterminate(entry)"
+          :highlighted="view.isHighlighted(view.rowKeyFor(entry))"
+          :expanded="view.isRowExpanded(entry)"
+          :disabled="isTableRowDisabled(entry.row)"
+          :row-drag-by-row="view.isRowDragByRow(entry)"
+          :dragging="view.isRowDragging(entry)"
+          :drop-target="view.isRowDropTarget(entry)"
+          :drop-position="view.isRowDropTarget(entry) ? view.dropRowPosition : null"
+          :drag-lead-style="view.dragLeadStyle"
+          :expand-lead-style="view.expandLeadStyle"
+          :select-lead-style="view.selectLeadStyle"
+          :index-lead-style="view.indexLeadStyle"
+          :gutter-lead-style="view.gutterLeadStyle"
+          :can-expand="view.canExpandRow(entry)"
+          :can-select="view.canSelectRow(entry)"
+          :row-edit-pending="view.rowEditPending(entry)"
+          :row-dirty="view.isRowDirty(view.rowKeyFor(entry))"
+          :show-gutter-rollback="view.rowCommit || view.isExternalRowPending(entry)"
+          :editing-col-key="editingColKeyFor(entry)"
+          :focus-col-key="focusColKeyFor(entry)"
+          :has-column-slot="view.hasColumnSlot"
+          :has-edit-slot="view.hasEditSlot"
+          :cell-tooltip-enabled="view.cellTooltipEnabled"
+          :cell-tooltip-mode="view.cellTooltipMode"
+          :cell-tooltip-text="view.cellTooltipText"
+          :cell-tooltip-fallback-title="view.cellTooltipFallbackTitle"
+          :get-cell-draft="view.getCellDraft"
+          :is-cell-dirty="view.isCellDirty"
+          :get-cell-error="view.getCellError"
+          :is-cell-validating="view.isCellValidating"
+          :drag-row-label="view.bodyLabels.dragRow"
+          :expand-row-label="view.bodyLabels.expandRow"
+          :collapse-row-label="view.bodyLabels.collapseRow"
+          :select-row-label="view.bodyLabels.selectRow"
+          :row-commit-label="view.bodyLabels.rowCommit"
+          :row-rollback-label="view.bodyLabels.rowRollback"
+          :gutter-commit-hint="view.bodyLabels.gutterCommit"
+          @click="view.onRowClick(entry, $event)"
+          @mousedown="view.onRowSelectMouseDown($event)"
+          @cell-click="(colKey, event) => view.onCellClick(entry, colKey, event)"
+          @cell-dblclick="(colKey, event) => view.onCellDblclick(entry, colKey, event)"
+          @cell-contextmenu="(colKey, event) => view.onCellContextmenu(entry, colKey, event)"
+          @dblclick="view.onRowDblclick(entry, $event)"
+          @contextmenu="view.onRowContextmenu(entry, $event)"
+          @dragover="view.onRowDragOver(entry, $event)"
+          @dragleave="view.onRowDragLeave($event)"
+          @drop="view.onRowDrop(entry, $event)"
+          @row-drag-start="view.onRowDragStart(entry, $event)"
+          @row-drag-end="view.onRowDragEnd()"
+          @toggle-expand="view.onToggleExpand(entry)"
+          @toggle-select="view.onToggleSelect(entry)"
+          @cell-start-edit="view.onCellStartEdit(entry, $event)"
+          @cell-commit="(colKey, value) => view.onCellCommit(entry, colKey, value)"
+          @cell-cancel="view.onCellCancel(entry, $event)"
+          @cell-update-draft="(colKey, value) => view.onCellUpdateDraft(entry, colKey, value)"
+          @cell-navigate="(colKey, direction) => view.onCellNavigate(entry, colKey, direction)"
+          @row-commit="view.onRowCommit(entry)"
+          @row-rollback="view.onRowRollback(entry)"
+          @gutter-commit="view.onGutterCommit(entry)"
+        >
+          <template v-for="column in view.visibleDataColumns" #[column.key]="slotProps">
+            <slot :name="column.key" v-bind="slotProps" />
+          </template>
+          <template
+            v-for="column in view.visibleDataColumns"
+            :key="`edit-${column.key}`"
+            #[`edit-${column.key}`]="slotProps"
+          >
+            <slot :name="`edit-${column.key}`" v-bind="slotProps" />
+          </template>
+        </RsTableBodyRow>
+      </template>
+      <tr
+        v-if="view.virtualScrollEnabled && view.virtualSlice.paddingBottom > 0"
+        class="rs-table__virtual-pad"
+      >
+        <td
+          :colspan="view.bodyColspan"
+          :style="{ height: `${view.virtualSlice.paddingBottom}px` }"
+        />
+      </tr>
+      <tr v-if="view.infinite && view.loadingMore">
+        <td class="rs-table__empty rs-table__empty--more" :colspan="view.bodyColspan">
+          {{ view.bodyLabels.loadingMore }}
+        </td>
+      </tr>
+    </template>
+  </tbody>
+</template>

package/src/components/table/RsTableBodyRow.vue

@@ -18,6 +18,13 @@ defineProps<{
   columnStyleMap: Map<string, Record<string, string> | undefined>
   showRowDragHandle: boolean
   expandable: boolean
+  /** 树表模式：在指定数据列内缩进展开 */
+  treeMode?: boolean
+  treeDepth?: number
+  treeHasChildren?: boolean
+  treeIndent?: number
+  treeColumnKey?: string | null
+  treeLoading?: boolean
   selectable: boolean
   showIndex: boolean
   showEditGutter: boolean
@@ -34,6 +41,8 @@ defineProps<{
   selected: boolean
   highlighted: boolean
   expanded: boolean
+  /** 树级联半选 */
+  indeterminate?: boolean
   disabled: boolean
   rowDragByRow: boolean
   dragging: boolean
@@ -99,7 +108,9 @@ const emit = defineEmits<{
 
 <template>
   <tr
+    role="row"
     class="rs-table__row"
+    :data-row-key="rowKey"
     :class="{
       'rs-table__row--selected': selected,
       'rs-table__row--highlighted': highlighted && !selected,
@@ -157,12 +168,19 @@ const emit = defineEmits<{
       :style="selectLeadStyle"
       @click.stop
     >
-      <label class="rs-table__checkbox" :class="{ 'rs-table__checkbox--checked': selected }">
+      <label
+        class="rs-table__checkbox"
+        :class="{
+          'rs-table__checkbox--checked': selected,
+          'rs-table__checkbox--indeterminate': indeterminate && !selected,
+        }"
+      >
         <input
           :type="selectionType"
           class="rs-table__checkbox-input"
           :name="isRadioSelection ? 'rs-table-radio' : undefined"
           :checked="selected"
+          :indeterminate="Boolean(indeterminate && !selected)"
           :disabled="!canSelect"
           :aria-label="selectRowLabel"
           @change="emit('toggleSelect')"
@@ -218,7 +236,9 @@ const emit = defineEmits<{
     <td
       v-for="column in columns"
       :key="column.key"
+      role="gridcell"
       class="rs-table__td rs-table__td--data"
+      :data-col-key="column.key"
       :class="[
         columnTdClassMap.get(column.key),
         {
@@ -226,10 +246,12 @@ const emit = defineEmits<{
           'rs-table__td--editing': editingColKey === column.key,
           'rs-table__td--focused': focusColKey === column.key && editingColKey !== column.key,
           'rs-table__td--invalid': !!getCellError(rowKey, column.key),
+          'rs-table__td--tree': treeMode && treeColumnKey === column.key,
         },
       ]"
       :style="columnStyleMap.get(column.key)"
       :draggable="rowDragByRow"
+      :tabindex="focusColKey === column.key && editingColKey !== column.key ? 0 : -1"
       :aria-selected="focusColKey === column.key || editingColKey === column.key ? 'true' : undefined"
       @click.stop="emit('cellClick', column.key, $event)"
       @dblclick.stop="emit('cellDblclick', column.key, $event)"
@@ -237,7 +259,74 @@ const emit = defineEmits<{
       @dragstart="rowDragByRow ? emit('rowDragStart', $event) : undefined"
       @dragend="rowDragByRow ? emit('rowDragEnd') : undefined"
     >
+      <div
+        v-if="treeMode && treeColumnKey === column.key"
+        class="rs-table__tree-cell"
+        :style="{ paddingInlineStart: `${(treeDepth ?? 0) * (treeIndent ?? 20)}px` }"
+      >
+        <button
+          v-if="treeHasChildren"
+          type="button"
+          class="rs-table__expand-btn rs-table__tree-toggle"
+          :class="{
+            'rs-table__expand-btn--expanded': expanded,
+            'rs-table__tree-toggle--loading': treeLoading,
+          }"
+          :disabled="treeLoading"
+          :aria-label="expanded ? collapseRowLabel : expandRowLabel"
+          @click.stop="emit('toggleExpand')"
+        >
+          ›
+        </button>
+        <span
+          v-else
+          class="rs-table__tree-leaf"
+          aria-hidden="true"
+        />
+        <span
+          :class="[
+            'rs-table__tree-content',
+            { 'rs-table__cell-tip': cellTooltipEnabled(column, rowIndex) },
+            { 'rs-table__cell-tip--editing': editingColKey === column.key },
+          ]"
+          :data-rs-table-tip-mode="cellTooltipEnabled(column, rowIndex) ? cellTooltipMode(column, rowIndex) : undefined"
+          :data-rs-table-tip-text="cellTooltipText(column, row, rowIndex)"
+          :title="getCellError(rowKey, column.key) || cellTooltipFallbackTitle(column, row, rowIndex)"
+        >
+          <RsTableCell
+            :column="column"
+            :row="row"
+            :row-index="rowIndex"
+            :row-key="rowKey"
+            :table-editable="tableEditable"
+            :editing="editingColKey === column.key"
+            :dirty="isCellDirty(rowKey, column.key)"
+            :focused="focusColKey === column.key"
+            :draft="getCellDraft(rowKey, column.key)"
+            :has-custom-slot="hasColumnSlot(column.key)"
+            :has-edit-slot="hasEditSlot(column.key)"
+            :edit-trigger="editTrigger"
+            :row-commit="rowCommit"
+            :allow-null="allowNull"
+            :focus-mode="focusMode"
+            :null-label="nullLabel"
+            :error-message="getCellError(rowKey, column.key) ?? null"
+            :validating="isCellValidating(rowKey, column.key)"
+            @start-edit="emit('cellStartEdit', column.key)"
+            @commit="emit('cellCommit', column.key, $event)"
+            @cancel="emit('cellCancel', column.key)"
+            @update-draft="emit('cellUpdateDraft', column.key, $event)"
+            @navigate="emit('cellNavigate', column.key, $event)"
+          >
+            <slot :name="column.key" :row="row" :column="column" :index="rowIndex" />
+            <template v-if="hasEditSlot(column.key)" #editor="scope">
+              <slot :name="`edit-${column.key}`" v-bind="scope" />
+            </template>
+          </RsTableCell>
+        </span>
+      </div>
       <span
+        v-else
         :class="[
           { 'rs-table__cell-tip': cellTooltipEnabled(column, rowIndex) },
           { 'rs-table__cell-tip--editing': editingColKey === column.key },

package/src/components/table/RsTableColGroup.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts" generic="T extends import('../table-utils').RsTableRowData">
+import { useRsTableView } from './rs-table-view-context'
+
+const view = useRsTableView<T>()
+</script>
+
+<template>
+  <colgroup v-if="view.useFixedColumnLayout">
+    <col v-if="view.showRowDragHandle" :style="{ width: `${view.prefixWidths.drag}px` }">
+    <col v-if="view.detailExpandable" :style="{ width: `${view.prefixWidths.expand}px` }">
+    <col v-if="view.showSelectColumn" :style="{ width: `${view.prefixWidths.select}px` }">
+    <col
+      v-if="view.showEditGutterColumn"
+      data-col-key="gutter"
+      :style="{ width: `${view.resolvedGutterWidth}px` }"
+    >
+    <col
+      v-else-if="view.showIndexColumn"
+      :style="{ width: `${view.resolvedIndexWidth}px` }"
+    >
+    <col v-if="view.showRowStatusColumn" :style="{ width: `${view.prefixWidths.status}px` }">
+    <col
+      v-if="view.columnPadLeft > 0"
+      class="rs-table__col-pad"
+      :style="{ width: `${view.columnPadLeft}px` }"
+    >
+    <col
+      v-for="column in view.visibleDataColumns"
+      :key="column.key"
+      :data-col-key="column.key"
+      :style="{
+        width: `${view.resolvedDataColumnWidth(column.key, column.width ?? column.minWidth)}px`,
+      }"
+    >
+    <col
+      v-if="view.columnPadRight > 0"
+      class="rs-table__col-pad"
+      :style="{ width: `${view.columnPadRight}px` }"
+    >
+  </colgroup>
+</template>

package/src/components/table/RsTableHeader.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts" generic="T extends import('../table-utils').RsTableRowData">
+import RsIcon from '../RsIcon.vue'
+import RsTableHeaderFilter from './RsTableHeaderFilter.vue'
+import { useRsTableView } from './rs-table-view-context'
+
+const view = useRsTableView<T>()
+</script>
+
+<template>
+  <thead
+    class="rs-table__head"
+    @pointerover.passive="view.onHeaderPointerOver($event)"
+    @pointerout.passive="view.onHeaderPointerOut($event)"
+  >
+    <tr role="row">
+      <th
+        v-if="view.showRowDragHandle"
+        role="columnheader"
+        class="rs-table__th rs-table__th--drag"
+        :style="view.dragLeadHeaderStyle"
+      />
+      <th
+        v-if="view.detailExpandable"
+        role="columnheader"
+        class="rs-table__th rs-table__th--expand"
+        :style="view.expandLeadHeaderStyle"
+      />
+      <th
+        v-if="view.showSelectColumn"
+        role="columnheader"
+        class="rs-table__th rs-table__th--selection"
+        :style="view.selectLeadHeaderStyle"
+      >
+        <label
+          v-if="!view.isRadioSelection"
+          class="rs-table__checkbox"
+          :class="{
+            'rs-table__checkbox--checked': view.selectAllState === 'checked',
+            'rs-table__checkbox--indeterminate': view.selectAllState === 'indeterminate',
+          }"
+        >
+          <input
+            type="checkbox"
+            class="rs-table__checkbox-input"
+            :checked="view.selectAllState === 'checked'"
+            :aria-label="view.headerLabels.selectAll"
+            @change="view.onToggleSelectAll()"
+          >
+          <span class="rs-table__checkbox-box" aria-hidden="true" />
+        </label>
+      </th>
+      <th
+        v-if="view.showEditGutterColumn"
+        role="columnheader"
+        class="rs-table__th rs-table__th--gutter rs-table__cell--center"
+        :style="view.gutterLeadHeaderStyle"
+      />
+      <th
+        v-else-if="view.showIndexColumn"
+        role="columnheader"
+        class="rs-table__th rs-table__th--index rs-table__cell--center"
+        :style="view.indexLeadHeaderStyle"
+      >
+        {{ view.headerLabels.index }}
+      </th>
+      <th
+        v-if="view.showRowStatusColumn"
+        role="columnheader"
+        class="rs-table__th rs-table__th--status rs-table__cell--center"
+      >
+        {{ view.headerLabels.rowStatus }}
+      </th>
+      <th
+        v-if="view.columnPadLeft > 0"
+        role="presentation"
+        class="rs-table__th rs-table__col-pad"
+        :style="{ width: `${view.columnPadLeft}px`, minWidth: `${view.columnPadLeft}px` }"
+      />
+      <th
+        v-for="column in view.visibleDataColumns"
+        :key="column.key"
+        role="columnheader"
+        :data-col-key="column.key"
+        class="rs-table__th"
+        :class="[
+          `rs-table__cell--${column.align ?? 'left'}`,
+          { 'rs-table__th--sortable': column.sortable },
+          { 'rs-table__th--filterable': column.filterable },
+          { 'rs-table__cell--fixed': column.fixed },
+          { 'rs-table__th--dragging': view.dragColumnKey === column.key },
+          { 'rs-table__th--drop-target': view.dropColumnKey === column.key },
+        ]"
+        :style="view.columnHeaderStyleMap.get(column.key)"
+        @dragover="view.onColumnDragOver(column.key, $event)"
+        @drop="view.onColumnDrop(column.key, $event)"
+      >
+        <span
+          v-if="view.columnDraggable"
+          class="rs-table__column-drag-handle"
+          draggable="true"
+          :aria-label="view.headerLabels.dragColumn"
+          @click.stop
+          @dragstart.stop="view.onColumnDragStart(column.key, $event)"
+          @dragend.stop="view.onColumnDragEnd()"
+        />
+        <slot :name="`header-${column.key}`" :column="column">
+          <span
+            v-if="column.headerTip"
+            class="rs-table__th-label rs-table__th-label--tip"
+            :data-rs-table-header-tip="column.headerTip"
+          >{{ column.title }}</span>
+          <span v-else class="rs-table__th-label">{{ column.title }}</span>
+        </slot>
+        <span v-if="column.filterable || column.sortable" class="rs-table__header-actions">
+          <RsTableHeaderFilter
+            v-if="column.filterable"
+            :model-value="view.columnFilterValue(column.key)"
+            :column-title="column.title"
+            :filter-label="view.headerLabels.filterColumn"
+            :placeholder="view.headerLabels.filterPlaceholder"
+            :clear-label="view.headerLabels.filterClear"
+            :apply-label="view.headerLabels.filterApply"
+            :active="view.isColumnFilterActive(view.columnFiltersState, column.key)"
+            @update:model-value="view.updateColumnFilter(column.key, $event)"
+          />
+          <button
+            v-if="column.sortable"
+            type="button"
+            class="rs-table__sort"
+            :class="{ 'rs-table__sort--active': !!view.sortOrderFor(column.key) }"
+            :title="column.title"
+            :aria-label="column.title"
+            @click.stop="view.onHeaderClick(column)"
+          >
+            <RsIcon :name="view.sortIconName(column.key)" size="sm" />
+            <span
+              v-if="view.multiSort && view.sortPriorityFor(column.key) > 1"
+              class="rs-table__sort-priority"
+            >
+              {{ view.sortPriorityFor(column.key) }}
+            </span>
+          </button>
+        </span>
+        <span
+          v-if="view.resizable"
+          class="rs-table__resize-handle"
+          @mousedown.stop="view.onResizeStart(column.key, $event)"
+          @click.stop
+        />
+      </th>
+      <th
+        v-if="view.columnPadRight > 0"
+        class="rs-table__th rs-table__col-pad"
+        :style="{ width: `${view.columnPadRight}px`, minWidth: `${view.columnPadRight}px` }"
+      />
+    </tr>
+  </thead>
+</template>

package/src/components/table/RsTableSummaryRow.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts" generic="T extends import('../table-utils').RsTableRowData">
+/**
+ * 表格 footer 汇总行：按列渲染 summaryCells.text。
+ *
+ * 前缀列（拖拽/展开/选择/序号等）用 colspan 占位，与表体列对齐；
+ * padLeft / padRight 对齐列虚拟滚动的左右垫片。
+ */
+import type { RsTableColumn } from '../table-utils'
+import type { RsTableSummaryCell } from './table-summary-utils'
+
+defineProps<{
+  /** 与表体一致的展示列（通常为 displayColumns） */
+  columns: RsTableColumn<T>[]
+  /** 与 columns 按 key 对应的汇总单元格 */
+  cells: RsTableSummaryCell[]
+  /** 前缀列占位 colspan（拖拽/展开/选择/序号/状态等） */
+  prefixColspan?: number
+  /** 列虚拟左侧垫片宽度（px） */
+  padLeft?: number
+  /** 列虚拟右侧垫片宽度（px） */
+  padRight?: number
+}>()
+</script>
+
+<template>
+  <tr class="rs-table__summary-row">
+    <td
+      v-if="(prefixColspan ?? 0) > 0"
+      class="rs-table__summary-cell rs-table__summary-cell--prefix"
+      :colspan="prefixColspan"
+    />
+    <td
+      v-if="(padLeft ?? 0) > 0"
+      class="rs-table__summary-cell rs-table__summary-cell--pad"
+      :style="{ width: `${padLeft}px`, minWidth: `${padLeft}px` }"
+    />
+    <td
+      v-for="column in columns"
+      :key="column.key"
+      class="rs-table__summary-cell"
+      :class="column.align ? `rs-table__summary-cell--${column.align}` : undefined"
+      :data-col-key="column.key"
+    >
+      {{ cells.find((c) => c.key === column.key)?.text ?? '' }}
+    </td>
+    <td
+      v-if="(padRight ?? 0) > 0"
+      class="rs-table__summary-cell rs-table__summary-cell--pad"
+      :style="{ width: `${padRight}px`, minWidth: `${padRight}px` }"
+    />
+  </tr>
+</template>