@manohub/ui 0.10.5 → 1.0.0

package/dist/styles/components/table.css

@@ -1,504 +1,504 @@
-/**
- * Table —— 表格（表头/行/单元格类型 + 行态四档 + 固定表头与列 + 批量栏与合计行）。
- *
- * 出处（**两套来源在关键几何上一致**，故此处没有取舍余地）：
- * - `@aihub/theme` 的 `src/components/table.css`：表头 **34** / 行 **30** / 字号 13 / 勾选列 40 /
- *   省略号 150 / 拖拽线 3×40 / 合计行 40；
- * - 设计稿《MH后台-0911》：表头 **34**（`0:3962` 1160×34）/ 行 **30**（`0:3956`–`0:3961` 919×30，
- *   节距 31 = 30 + 1px 线）/ 表头底 `#f1f2f5`（= `--ui-base-200`）/ 行线 `#e6e6e6`
- *   （每行 `DROP_SHADOW(0,1,b0,#e6e6e6)`）/ 外框 `#e6e6e6 @1` / 选中行底 `#dbe9ff`
- *   （= `--ui-primary-subtle`）。
- *
- * ⚠️ 改前这里写的是 44 / 46 —— 与上面两套来源**都不符**，是历史遗留值（文件头注释一直写着 34/30，
- * 是代码没跟上），本轮已归位。
- *
- * **单元格左右内距保持 16（`--ui-space-4`）**：设计稿里可量的只有「勾选框距表左 20」这一处，
- * 而它量的是**内容盒**、不是单元格盒（勾选列 40 宽 + 居中时内容盒落在 13 处），无法唯一反推内距，
- * 故不作推测性改动。勾选列宽 `40` 也不动，理由同此。
- *
- * 行态：表头底 `--ui-base-200` + 字 `--ui-base-content-muted` + 中粗 / 外框 1px `--ui-base-300` /
- * 斑马与禁用 `--ui-base-200` / 滑过 `--ui-primary-weak` / 选中 `--ui-primary-subtle`（**只底色**）。
- *
- * 四条必须照做的**结构**决定（做错就与规范不是一回事）：
- *
- * 1. **边框模型**：默认是**外框**（画在 `.mh-table` 上）+ 表头下分割线 + 每行底线（末行去线），
- *    故 `border-collapse: separate` + `border-spacing: 0` —— 圆角只有在 separate 下才渲染得出来；
- *    `--borderless` 才切回 `collapse` 并去掉外框。
- *    **三条线之外的边一律显式清零**（`border: 0` 写在 `th` / `td` / `tr` 上，不是冗余）：特异性只在
- *    **同一个属性**上分胜负，宿主给单元格或行下的整圈边框（典型是 markdown 正文的
- *    `.vp-doc th, .vp-doc td { border: 1px solid }`、`.vp-doc tr { border-top: ... }`）不会被本件
- *    "没写的边"顶掉，结果就是与表外框叠成 2px、行交界处叠成 2px、还多出列分隔线。
- * 2. **斑马纹是显式类**（`.is-striped`）而非 `:nth-child(even)`：表里可以插分组行，`nth-child` 会整表错位
- *    —— 这是规范里唯一允许"用类代替结构选择器"的豁免。
- * 3. **行选中由行内的选择控件驱动**（`tr:has(.mh-table__col-check input:checked)`）：这样零 JS 也能选中；
- *    组件态给 `[data-state='selected']`，静态档给 `.is-selected` —— 三源等价。
- *    勾选列复用 `Checkbox` **组件**（不在表格里手写原生 input）：该件内部才是真实 `<input type="checkbox">`，
- *    故 `:has(...)` 这条路径照旧成立；`Checkbox` 的框体带 `data-state`（checked / indeterminate），
- *    半选与选中都走它自己的样式数据，表格这边不再画方块。
- *    **选择器必须限定在勾选列内**（`.mh-table__col-check`，勾选列单元格自带的类）：不限列时，
- *    功能列里任何「内部本来就是 checkbox」的件都会命中 —— `Switch` 的内部正是 `<input type="checkbox">`，
- *    于是「启用」这类**功能值**会把整行点亮。功能值与行选择语义不同，视觉必须分开（否则一张表里
- *    开关一开就整行变色，且用户无从判断那到底表示什么）。
- * 4. **固定列必须自带底**（`background: var(--ui-base-100)`）：它是 sticky 的，不遮挡就会被滚过的单元格透出。
- *
- * **不做**：排序与列宽拖拽的**算法**（规范只给了 `↕` 字形与 3×40 拖拽线这两处视觉），也不做空态/加载态
- * （规范表格里没有这两个样张 —— 三态归 `QueryState`）。
- */
-.mh-table-wrapper {
-  overflow: auto;
-}
-/* `--fill` 档把外框从表移交给包裹层（表自己不再画框，改由包裹层画满高框） */
-.mh-table-wrapper:has(> .mh-table--fill) {
-  border: 1px solid var(--ui-table-border);
-  border-radius: var(--ui-table-radius);
-}
-.mh-table-scroll {
-  max-height: var(--ui-table-scroll-height); /* 规范样张 132（实际用按需覆盖） */
-  overflow: auto;
-}
-
-/* 几何只挂在 `<table>` 上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会给包裹层加边框与圆角 */
-.mh-table {
-  width: 100%;
-  border: 1px solid var(--ui-table-border);
-  border-collapse: separate; /* 圆角需要 separate（见文件头第 1 条） */
-  border-spacing: 0;
-  border-radius: var(--ui-table-radius);
-  font-size: var(--ui-table-font-size);
-  color: var(--ui-table-text);
-  background: var(--ui-base-100);
-}
-/* 无框档：去外框并切回 collapse（不再需要圆角） */
-.mh-table--borderless {
-  border: none;
-  border-collapse: collapse;
-  border-radius: 0;
-}
-/* 满高档：外框交包裹层，去掉自己的圆角（否则内外两层圆角会露缝） */
-.mh-table--fill {
-  border: none;
-  border-radius: 0;
-}
-/* 紧凑档（`size="sm"`）：三档 30 / 38 / 46 里的最小档，嵌在卡片 / 面板里的表格用它 */
-.mh-table--xs {
-  --ui-table-head-height: 30px;
-  --ui-table-row-height: 30px;
-}
-/* 窄屏下的最小宽（触发横向滚动，而不是把列压扁） */
-.mh-table--wide {
-  min-width: 620px;
-}
-
-/* ===== 固定布局档（`layout="fixed"`）=====
- * 列宽由 `<colgroup>` 下发（与档位无关），本档只把布局算法换成 `fixed`：
- * 列宽从此**受声明约束、不再被内容撑破** ⇒ 长文本不会把表格撑得比容器还宽，
- * 于是「百分比 / 数字权重」可以「吃满容器 + 严格按比例」。
- *
- * 调用方要知道的：表体**默认不换行**（nowrap + 省略号，见下条）；要换行的列显式标 `wrap: true`。 */
-.mh-table--fixed {
-  table-layout: fixed;
-}
-/* `fixed` 档表体默认**不换行**（nowrap + 省略号）。两条依据：
- * ① 列宽已被 `<colgroup>` 钉死，换行救不回内容，只会把行高顶高（`td` 的 `height` 只是**下限**）；
- * ② 换行必然伴随**从字符间断字** —— 实测序号列窄到装不下两位数时，旧的 `overflow-wrap: anywhere`
- *    把 `10` 拆成 `1` / `0` 两行，行高 30 → **49**。
- * 于是「换行」改成**列级主动选择**：`TableColumn.wrap: true`（见 `.mh-table__cell-wrap`）。
- * ⚠️ **只在本档翻默认**：`auto` 档的列宽由内容计算，td 默认 nowrap 会让长文本列不再靠换行收敛、
- * 表格更容易撑破容器 —— 与本档「表头裁切只加在 fixed」同一条判据（见上一条注释）。 */
-.mh-table--fixed tbody td {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* 前导列（勾选 / 展开）在 auto 下靠内容把 40px 的「建议宽」撑出去；fixed 下是硬宽，
-   而 `thead th` / `tbody td` 的标准左右内距各 16px ⇒ 可用内容只有 40 − 32 = 8px，
-   装不下 16px 的勾选框（实测该列溢出 19px，还会被上面的 `overflow: hidden` 裁掉）。
-   故本档把前导列的内距清零，靠既有的 `text-align: center` 居中。 */
-.mh-table--fixed .mh-table__col-check,
-.mh-table--fixed .mh-table__col-expand {
-  padding: 0;
-}
-
-/* ===== 表头 =====
- * `border: 0` **不是冗余**：本件只画「表外框 + 表头分割线 + 每行底线」三条，其余边必须显式清零。
- * 特异性和平局只发生在**同一个属性**上 —— 本件只声明 `border-bottom` 时，宿主给单元格下的整圈边框
- * （典型：markdown 正文的 `.vp-doc th, .vp-doc td { border: 1px solid }`）不会被任何组件声明顶掉，
- * 于是单元格四边各来一条：与表外框叠成 2px、每行交界处上一行底线 + 本行顶线叠成 2px，还凭空多出列分隔线。
- * 这三条不是「装饰」而是边框模型的一部分，故与 `border-bottom` 写在同一规则里（0-1-2 压过 `.vp-doc th` 0-1-1）。 */
-.mh-table thead th {
-  height: var(--ui-table-head-height);
-  padding: 0 var(--ui-table-padding-x);
-  border: 0;
-  border-bottom: 1px solid var(--ui-table-border);
-  background: var(--ui-table-head-bg);
-  color: var(--ui-table-head-text);
-  font-weight: var(--ui-weight-medium);
-  text-align: left;
-  white-space: nowrap;
-}
-.mh-table thead th:hover,
-.mh-table thead th.is-hover {
-  background: var(--ui-table-head-bg-hover);
-}
-/* 固定档下表头也要裁切：列宽已被 colgroup 钉死，长表头文字会**溢出到相邻列**
-   （实测溢出 97px），必须靠这两条收住。`white-space: nowrap` 上面已有。
-   ⚠️ 只在本档加 —— auto 档下表头参与列宽计算，加裁切会改动老页面的列宽分配。 */
-.mh-table--fixed thead th {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-/* 多级表头的组头：下边线不加（组头跨列，加线会切断视觉分组） */
-.mh-table thead th.mh-table__th-group {
-  border-bottom: 1px solid var(--ui-table-head-divider);
-  text-align: center;
-}
-
-/* ===== 行 =====
- * 行自身不画线（行线在单元格底边上）：同样显式清零，挡住宿主给 `tr` 加的顶线（会与本件行底线叠成双线）。 */
-.mh-table thead tr,
-.mh-table tbody tr {
-  border: 0;
-}
-/* 单元格的边框模型：**全清零 + 只留底线**（理由同表头处：宿主给 `th` / `td` 下的整圈边框只靠
- * 特异性挡不住未声明的三边，会让行线与表外框全部叠成双线）。 */
-.mh-table tbody td {
-  height: var(--ui-table-row-height);
-  padding: var(--ui-space-1) var(--ui-table-padding-x);
-  border: 0;
-  border-bottom: 1px solid var(--ui-table-border);
-  line-height: var(--ui-table-line-height);
-  vertical-align: middle;
-}
-.mh-table tbody tr:last-child td {
-  border-bottom: none;
-}
-/* 行态顺序即优先级：斑马 → 滑过 → 选中 → 禁用（禁用压住一切，故放最后） */
-.mh-table tbody tr.is-striped td {
-  background: var(--ui-table-row-alt);
-}
-.mh-table tbody tr:hover td,
-.mh-table tbody tr.is-hover td {
-  background: var(--ui-table-row-hover);
-}
-/* 选中态**只有底色**：规范样张里那条 2px 主色下沿（Au01）已去掉 ——
-   行线只由单元格底边提供，选中行不再额外压一条线（`box-shadow: inset 0 -2px` 会盖住底边线，
-   看起来像"两行线叠在一起"）。要恢复下沿就加回 inset 阴影 + 对应令牌。
-   第三条路径限定在勾选列内（见文件头第 3 条）：不限列会被功能列的 Switch 命中。 */
-.mh-table tbody tr.is-selected td,
-.mh-table tbody tr[data-state='selected'] td,
-.mh-table tbody tr:has(.mh-table__col-check input:checked) td {
-  background: var(--ui-table-row-selected);
-}
-.mh-table tbody tr.is-disabled td,
-.mh-table tbody tr[aria-disabled='true'] td {
-  background: var(--ui-table-row-disabled);
-  color: var(--ui-base-content-subtle);
-}
-
-/* 分组行：整行一条、不可选、字重中粗 */
-.mh-table tbody tr.mh-table__group-row td {
-  height: var(--ui-table-row-height);
-  background: var(--ui-table-head-bg);
-  color: var(--ui-table-head-text);
-  font-weight: var(--ui-weight-medium);
-}
-
-/* 树行：子行首列缩进（与树的缩进同一口径） */
-.mh-table tbody tr.mh-table__row--child td:first-child {
-  padding-left: var(--ui-table-tree-indent);
-}
-.mh-table__tree-caret {
-  display: inline-flex;
-  width: var(--ui-font-icon); /* 常规图标档（改前无声明、掉到 `<svg>` 默认 16） */
-  height: var(--ui-font-icon);
-  margin-right: var(--ui-space-1);
-  color: var(--ui-base-content-subtle);
-  transition: transform 0.15s ease;
-}
-.mh-table__tree-caret--open {
-  transform: rotate(-90deg);
-}
-
-/* ===== 列 ===== */
-/* 勾选列：只负责「多宽 + 居中」——`Checkbox` 组件是 inline-flex，靠格子的 text-align 居中；
-   方块尺寸 / 圆角 / 三态配色全归 `checkbox.css`（表格不再给这一列任何选中态样式） */
-.mh-table__col-check {
-  width: var(--ui-table-col-check);
-  text-align: center;
-}
-.mh-table__col-actions {
-  text-align: right;
-}
-
-/* ⚠️ **表头要把对齐重声明一遍**：上面这几条与 `.mh-table__cell-center` / `.mh-table__cell-amount`
- * 都只有 **0-1-0**，而 `.mh-table thead th { text-align: left }` 是 **0-1-1** ⇒ 表头被强拉成左对齐、
- * 与表体不齐：勾选框应居中却贴左（实测表头左留白 0 / 右留白 26，与表体错位 13px）、
- * 右对齐列的标题应靠右却被拉到左边。
- * 只用补 `text-align` —— `thead th` 没声明过其它会被这些类覆盖的属性（宽度/内距不冲突）。
- * 写法沿用 `th.mh-table__th-group`（组头居中）那条既有先例。 */
-.mh-table thead th.mh-table__col-check,
-.mh-table thead th.mh-table__cell-center {
-  text-align: center;
-}
-.mh-table thead th.mh-table__col-actions {
-  text-align: right;
-}
-/* `--sticky-col`：首列钉住（必须自带底，见文件头第 4 条） */
-.mh-table--sticky-col thead th:first-child,
-.mh-table--sticky-col tbody td:first-child {
-  position: sticky;
-  left: 0;
-  z-index: 1;
-  background: var(--ui-base-100);
-}
-.mh-table--sticky-col thead th:first-child {
-  z-index: 2; /* 表头既钉顶又钉左，压住表头其余列 */
-  background: var(--ui-table-head-bg);
-}
-/* `--sticky-head`：表头钉顶。
- * ⚠️ 选择器必须带 `tr`（0-1-3）：文件后段「拖拽线的定位上下文」那条
- * `.mh-table thead th { position: relative }` 是 **0-1-2**，与不写 `tr` 的写法**同特异性且在后**
- * ⇒ 会把 `position: sticky` 覆盖掉，`stickyHead` 静默失效（0.6.0 起就存在，0.9.0 复核仍在）。
- * `sticky` 同样是定位元素，照样给表头里的拖拽线当包含块，故加 `tr` 不损失原能力。 */
-.mh-table--sticky-head thead tr th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-/* ===== 单元格类型 ===== */
-.mh-table__cell-center {
-  text-align: center;
-}
-.mh-table__cell-amount {
-  text-align: right;
-  font-variant-numeric: tabular-nums; /* 金额对齐靠等宽数字，不靠右对齐就够 */
-}
-.mh-table__cell-link {
-  color: var(--ui-table-link);
-  text-decoration: none;
-  cursor: pointer;
-}
-.mh-table__cell-link:hover {
-  text-decoration: underline;
-}
-/* 列级**放开换行**（列定义里 `wrap: true` 时下发，只作用于表体 `td`；表头始终 nowrap）。
- * 缺省不换行在面文件的 `.mh-table--fixed tbody td` 里 —— 本档才翻默认，故这里同时把
- * 「换行三件套」与 `overflow-wrap` 兜底一并给回：换来的是「长文本列自己决定换行」。
- * ⚠️ 选择器必须带 `td`（0-1-3）：`.mh-table--fixed tbody td` 是 **0-1-2**，
- * 单个类（0-1-0）压不过它（同 §表头对齐那条的先例）。 */
-.mh-table tbody td.mh-table__cell-wrap {
-  white-space: normal;
-  overflow: visible;
-  text-overflow: clip;
-  overflow-wrap: anywhere;
-}
-.mh-table__cell-icon {
-  display: inline-flex;
-  align-items: center;
-  margin-right: var(--ui-space-1);
-  color: var(--ui-base-content-muted);
-}
-.mh-table__cell-main {
-  display: block;
-}
-.mh-table__cell-sub {
-  display: block;
-  color: var(--ui-base-content-muted);
-}
-/* 必填列的表头加星号（只在表头，不在单元格） */
-.mh-table th.mh-table__cell-required::before {
-  content: '*';
-  margin-right: var(--ui-space-1);
-  color: var(--ui-error);
-}
-
-/* 状态点（语义四档） */
-.mh-table__status-dot {
-  display: inline-block;
-  width: var(--ui-table-status-dot);
-  height: var(--ui-table-status-dot);
-  margin-right: var(--ui-space-1);
-  border-radius: var(--ui-radius-full);
-  background: var(--ui-base-400);
-  vertical-align: middle;
-}
-.mh-table__status-dot--info {
-  background: var(--ui-info);
-}
-.mh-table__status-dot--success {
-  background: var(--ui-success);
-}
-.mh-table__status-dot--warning {
-  background: var(--ui-warning);
-}
-.mh-table__status-dot--error {
-  background: var(--ui-error);
-}
-
-/* ===== 表头操作：排序按钮与列宽拖拽线 ===== */
-.mh-table__sort {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  margin-left: var(--ui-space-1);
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--ui-base-content-subtle);
-  cursor: pointer;
-}
-.mh-table__sort--active {
-  color: var(--ui-primary);
-}
-/* 槽位尺寸：常规图标一律取全局图标档（**不写 `.mh-table__sort-icon`** —— 那是只作朝向锚点的结构类，
-   面上为排序指示写规则会被契约拦下，见下方注释） */
-.mh-table__sort > svg {
-  width: var(--ui-font-icon);
-  height: var(--ui-font-icon);
-}
-/* 排序朝向：**方位在字形里**（升序 `chevron-up` / 降序与未排序 `chevron-down`，未排走浅色、已排随
-   `.mh-table__sort--active` 主色）—— 本层零 `transform`，不走"把别的图标旋转 90° 冒充上下"的老路
-   （包内硬约束）。`mh-table__sort-icon` 与 `--asc` / `--desc` 只作**状态锚点**（消费方与用例按它们定位
-   当前朝向），面上无声明，登记在测试契约的结构锚点台账里。 */
-.mh-table__drag-line {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  width: var(--ui-table-drag-line-width);
-  height: var(--ui-table-drag-line-height);
-  background: var(--ui-table-drag-line);
-  transform: translateY(-50%);
-  cursor: col-resize;
-}
-/* 拖拽线要定在表头单元格右缘，故表头格需要定位上下文 */
-.mh-table thead th {
-  position: relative;
-}
-
-/* ===== 批量栏（选中若干行后出现在表格上方） ===== */
-.mh-table__batch {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  height: var(--ui-table-batch-height);
-  padding: 0 var(--ui-table-padding-x);
-  background: var(--ui-table-head-bg);
-  color: var(--ui-table-head-text);
-}
-.mh-table__batch-count {
-  margin-left: auto;
-  color: var(--ui-primary);
-}
-
-/* ===== 合计行（当页合计） ===== */
-.mh-table__summary {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-4);
-  height: var(--ui-table-summary-height);
-  padding: 0 var(--ui-table-padding-x);
-  border-radius: var(--ui-table-radius);
-  background: var(--ui-warning-weak); /* 规范 Au07 暖底渐变，本仓取警示弱底 */
-}
-.mh-table__summary-label {
-  color: var(--ui-table-head-text);
-}
-.mh-table__summary-value {
-  font-size: var(--ui-font-body);
-  font-weight: var(--ui-weight-medium);
-  color: var(--ui-warning); /* 规范 #ff6c29 */
-}
-
-/* ===== 尺寸档：大号（详情页 / 展示型表格）—— 三档 30 / 38 / 46 里的最大档 ===== */
-.mh-table--lg {
-  --ui-table-head-height: 46px;
-  --ui-table-row-height: 46px;
-  --ui-table-padding-x: var(--ui-space-6);
-}
-
-/* ===== 加载态 =====
- * 盖一层浅罩而不是换骨架行：行高不塌，表格不会在加载前后跳动（跳动比没骨架更刺眼）。 */
-.mh-table-wrapper {
-  position: relative;
-}
-.mh-table__loading {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 80px;
-  background: var(--ui-mask-light);
-}
-.mh-table__spinner {
-  width: 24px;
-  height: 24px;
-  border: 2px solid var(--ui-primary);
-  border-top-color: transparent;
-  border-radius: var(--ui-radius-full);
-  animation: mh-table-spin 0.8s linear infinite;
-}
-@keyframes mh-table-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ===== 空态（表格内的空数据行；要插画与操作按钮就用 empty 插槽） ===== */
-.mh-table__empty {
-  height: 120px;
-  text-align: center;
-  color: var(--ui-base-content-muted);
-}
-.mh-table__empty-row:hover td {
-  background: transparent;
-}
-
-/* ===== 可点行（onRow 给了 onClick 才挂） ===== */
-.mh-table tbody tr.is-clickable {
-  cursor: pointer;
-}
-
-/* ===== 展开行 ===== */
-.mh-table__col-expand {
-  width: 40px;
-  text-align: center;
-}
-.mh-table__expand {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: none;
-  border-radius: var(--ui-radius-sm);
-  background: transparent;
-  color: var(--ui-base-content-muted);
-  cursor: pointer;
-}
-.mh-table__expand:hover {
-  background: var(--ui-base-200);
-  color: var(--ui-base-content);
-}
-/* 展开时箭头转 180 度：同一个下箭头字形，不另画一个上箭头 */
-.mh-table__expand-icon {
-  width: var(--ui-font-icon); /* 常规图标档 */
-  height: var(--ui-font-icon);
-  transition: transform 0.15s ease;
-}
-.mh-table__expand[aria-expanded='true'] .mh-table__expand-icon {
-  transform: rotate(180deg);
-}
-.mh-table__expand-row > td {
-  padding: var(--ui-space-4) var(--ui-table-padding-x);
-  background: var(--ui-base-200);
-}
-
-/* ===== 分页条（贴在表格下方、右对齐；分页件自身的面归 pagination.css） ===== */
-.mh-table__pagination {
-  display: flex;
-  justify-content: flex-end;
-  padding: var(--ui-space-4) 0 0;
-}
+/**
+ * Table —— 表格（表头/行/单元格类型 + 行态四档 + 固定表头与列 + 批量栏与合计行）。
+ *
+ * 出处（**两套来源在关键几何上一致**，故此处没有取舍余地）：
+ * - `@aihub/theme` 的 `src/components/table.css`：表头 **34** / 行 **30** / 字号 13 / 勾选列 40 /
+ *   省略号 150 / 拖拽线 3×40 / 合计行 40；
+ * - 设计稿《MH后台-0911》：表头 **34**（`0:3962` 1160×34）/ 行 **30**（`0:3956`–`0:3961` 919×30，
+ *   节距 31 = 30 + 1px 线）/ 表头底 `#f1f2f5`（= `--ui-base-200`）/ 行线 `#e6e6e6`
+ *   （每行 `DROP_SHADOW(0,1,b0,#e6e6e6)`）/ 外框 `#e6e6e6 @1` / 选中行底 `#dbe9ff`
+ *   （= `--ui-primary-subtle`）。
+ *
+ * ⚠️ 改前这里写的是 44 / 46 —— 与上面两套来源**都不符**，是历史遗留值（文件头注释一直写着 34/30，
+ * 是代码没跟上），本轮已归位。
+ *
+ * **单元格左右内距保持 16（`--ui-space-4`）**：设计稿里可量的只有「勾选框距表左 20」这一处，
+ * 而它量的是**内容盒**、不是单元格盒（勾选列 40 宽 + 居中时内容盒落在 13 处），无法唯一反推内距，
+ * 故不作推测性改动。勾选列宽 `40` 也不动，理由同此。
+ *
+ * 行态：表头底 `--ui-base-200` + 字 `--ui-base-content-muted` + 中粗 / 外框 1px `--ui-base-300` /
+ * 斑马与禁用 `--ui-base-200` / 滑过 `--ui-primary-weak` / 选中 `--ui-primary-subtle`（**只底色**）。
+ *
+ * 四条必须照做的**结构**决定（做错就与规范不是一回事）：
+ *
+ * 1. **边框模型**：默认是**外框**（画在 `.mh-table` 上）+ 表头下分割线 + 每行底线（末行去线），
+ *    故 `border-collapse: separate` + `border-spacing: 0` —— 圆角只有在 separate 下才渲染得出来；
+ *    `--borderless` 才切回 `collapse` 并去掉外框。
+ *    **三条线之外的边一律显式清零**（`border: 0` 写在 `th` / `td` / `tr` 上，不是冗余）：特异性只在
+ *    **同一个属性**上分胜负，宿主给单元格或行下的整圈边框（典型是 markdown 正文的
+ *    `.vp-doc th, .vp-doc td { border: 1px solid }`、`.vp-doc tr { border-top: ... }`）不会被本件
+ *    "没写的边"顶掉，结果就是与表外框叠成 2px、行交界处叠成 2px、还多出列分隔线。
+ * 2. **斑马纹是显式类**（`.is-striped`）而非 `:nth-child(even)`：表里可以插分组行，`nth-child` 会整表错位
+ *    —— 这是规范里唯一允许"用类代替结构选择器"的豁免。
+ * 3. **行选中由行内的选择控件驱动**（`tr:has(.mh-table__col-check input:checked)`）：这样零 JS 也能选中；
+ *    组件态给 `[data-state='selected']`，静态档给 `.is-selected` —— 三源等价。
+ *    勾选列复用 `Checkbox` **组件**（不在表格里手写原生 input）：该件内部才是真实 `<input type="checkbox">`，
+ *    故 `:has(...)` 这条路径照旧成立；`Checkbox` 的框体带 `data-state`（checked / indeterminate），
+ *    半选与选中都走它自己的样式数据，表格这边不再画方块。
+ *    **选择器必须限定在勾选列内**（`.mh-table__col-check`，勾选列单元格自带的类）：不限列时，
+ *    功能列里任何「内部本来就是 checkbox」的件都会命中 —— `Switch` 的内部正是 `<input type="checkbox">`，
+ *    于是「启用」这类**功能值**会把整行点亮。功能值与行选择语义不同，视觉必须分开（否则一张表里
+ *    开关一开就整行变色，且用户无从判断那到底表示什么）。
+ * 4. **固定列必须自带底**（`background: var(--ui-base-100)`）：它是 sticky 的，不遮挡就会被滚过的单元格透出。
+ *
+ * **不做**：排序与列宽拖拽的**算法**（规范只给了 `↕` 字形与 3×40 拖拽线这两处视觉），也不做空态/加载态
+ * （规范表格里没有这两个样张 —— 三态归 `QueryState`）。
+ */
+.mh-table-wrapper {
+  overflow: auto;
+}
+/* `--fill` 档把外框从表移交给包裹层（表自己不再画框，改由包裹层画满高框） */
+.mh-table-wrapper:has(> .mh-table--fill) {
+  border: 1px solid var(--ui-table-border);
+  border-radius: var(--ui-table-radius);
+}
+.mh-table-scroll {
+  max-height: var(--ui-table-scroll-height); /* 规范样张 132（实际用按需覆盖） */
+  overflow: auto;
+}
+
+/* 几何只挂在 `<table>` 上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会给包裹层加边框与圆角 */
+.mh-table {
+  width: 100%;
+  border: 1px solid var(--ui-table-border);
+  border-collapse: separate; /* 圆角需要 separate（见文件头第 1 条） */
+  border-spacing: 0;
+  border-radius: var(--ui-table-radius);
+  font-size: var(--ui-table-font-size);
+  color: var(--ui-table-text);
+  background: var(--ui-base-100);
+}
+/* 无框档：去外框并切回 collapse（不再需要圆角） */
+.mh-table--borderless {
+  border: none;
+  border-collapse: collapse;
+  border-radius: 0;
+}
+/* 满高档：外框交包裹层，去掉自己的圆角（否则内外两层圆角会露缝） */
+.mh-table--fill {
+  border: none;
+  border-radius: 0;
+}
+/* 紧凑档（`size="sm"`）：三档 30 / 38 / 46 里的最小档，嵌在卡片 / 面板里的表格用它 */
+.mh-table--xs {
+  --ui-table-head-height: 30px;
+  --ui-table-row-height: 30px;
+}
+/* 窄屏下的最小宽（触发横向滚动，而不是把列压扁） */
+.mh-table--wide {
+  min-width: 620px;
+}
+
+/* ===== 固定布局档（`layout="fixed"`）=====
+ * 列宽由 `<colgroup>` 下发（与档位无关），本档只把布局算法换成 `fixed`：
+ * 列宽从此**受声明约束、不再被内容撑破** ⇒ 长文本不会把表格撑得比容器还宽，
+ * 于是「百分比 / 数字权重」可以「吃满容器 + 严格按比例」。
+ *
+ * 调用方要知道的：表体**默认不换行**（nowrap + 省略号，见下条）；要换行的列显式标 `wrap: true`。 */
+.mh-table--fixed {
+  table-layout: fixed;
+}
+/* `fixed` 档表体默认**不换行**（nowrap + 省略号）。两条依据：
+ * ① 列宽已被 `<colgroup>` 钉死，换行救不回内容，只会把行高顶高（`td` 的 `height` 只是**下限**）；
+ * ② 换行必然伴随**从字符间断字** —— 实测序号列窄到装不下两位数时，旧的 `overflow-wrap: anywhere`
+ *    把 `10` 拆成 `1` / `0` 两行，行高 30 → **49**。
+ * 于是「换行」改成**列级主动选择**：`TableColumn.wrap: true`（见 `.mh-table__cell-wrap`）。
+ * ⚠️ **只在本档翻默认**：`auto` 档的列宽由内容计算，td 默认 nowrap 会让长文本列不再靠换行收敛、
+ * 表格更容易撑破容器 —— 与本档「表头裁切只加在 fixed」同一条判据（见上一条注释）。 */
+.mh-table--fixed tbody td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 前导列（勾选 / 展开）在 auto 下靠内容把 40px 的「建议宽」撑出去；fixed 下是硬宽，
+   而 `thead th` / `tbody td` 的标准左右内距各 16px ⇒ 可用内容只有 40 − 32 = 8px，
+   装不下 16px 的勾选框（实测该列溢出 19px，还会被上面的 `overflow: hidden` 裁掉）。
+   故本档把前导列的内距清零，靠既有的 `text-align: center` 居中。 */
+.mh-table--fixed .mh-table__col-check,
+.mh-table--fixed .mh-table__col-expand {
+  padding: 0;
+}
+
+/* ===== 表头 =====
+ * `border: 0` **不是冗余**：本件只画「表外框 + 表头分割线 + 每行底线」三条，其余边必须显式清零。
+ * 特异性和平局只发生在**同一个属性**上 —— 本件只声明 `border-bottom` 时，宿主给单元格下的整圈边框
+ * （典型：markdown 正文的 `.vp-doc th, .vp-doc td { border: 1px solid }`）不会被任何组件声明顶掉，
+ * 于是单元格四边各来一条：与表外框叠成 2px、每行交界处上一行底线 + 本行顶线叠成 2px，还凭空多出列分隔线。
+ * 这三条不是「装饰」而是边框模型的一部分，故与 `border-bottom` 写在同一规则里（0-1-2 压过 `.vp-doc th` 0-1-1）。 */
+.mh-table thead th {
+  height: var(--ui-table-head-height);
+  padding: 0 var(--ui-table-padding-x);
+  border: 0;
+  border-bottom: 1px solid var(--ui-table-border);
+  background: var(--ui-table-head-bg);
+  color: var(--ui-table-head-text);
+  font-weight: var(--ui-weight-medium);
+  text-align: left;
+  white-space: nowrap;
+}
+.mh-table thead th:hover,
+.mh-table thead th.is-hover {
+  background: var(--ui-table-head-bg-hover);
+}
+/* 固定档下表头也要裁切：列宽已被 colgroup 钉死，长表头文字会**溢出到相邻列**
+   （实测溢出 97px），必须靠这两条收住。`white-space: nowrap` 上面已有。
+   ⚠️ 只在本档加 —— auto 档下表头参与列宽计算，加裁切会改动老页面的列宽分配。 */
+.mh-table--fixed thead th {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* 多级表头的组头：下边线不加（组头跨列，加线会切断视觉分组） */
+.mh-table thead th.mh-table__th-group {
+  border-bottom: 1px solid var(--ui-table-head-divider);
+  text-align: center;
+}
+
+/* ===== 行 =====
+ * 行自身不画线（行线在单元格底边上）：同样显式清零，挡住宿主给 `tr` 加的顶线（会与本件行底线叠成双线）。 */
+.mh-table thead tr,
+.mh-table tbody tr {
+  border: 0;
+}
+/* 单元格的边框模型：**全清零 + 只留底线**（理由同表头处：宿主给 `th` / `td` 下的整圈边框只靠
+ * 特异性挡不住未声明的三边，会让行线与表外框全部叠成双线）。 */
+.mh-table tbody td {
+  height: var(--ui-table-row-height);
+  padding: var(--ui-space-1) var(--ui-table-padding-x);
+  border: 0;
+  border-bottom: 1px solid var(--ui-table-border);
+  line-height: var(--ui-table-line-height);
+  vertical-align: middle;
+}
+.mh-table tbody tr:last-child td {
+  border-bottom: none;
+}
+/* 行态顺序即优先级：斑马 → 滑过 → 选中 → 禁用（禁用压住一切，故放最后） */
+.mh-table tbody tr.is-striped td {
+  background: var(--ui-table-row-alt);
+}
+.mh-table tbody tr:hover td,
+.mh-table tbody tr.is-hover td {
+  background: var(--ui-table-row-hover);
+}
+/* 选中态**只有底色**：规范样张里那条 2px 主色下沿（Au01）已去掉 ——
+   行线只由单元格底边提供，选中行不再额外压一条线（`box-shadow: inset 0 -2px` 会盖住底边线，
+   看起来像"两行线叠在一起"）。要恢复下沿就加回 inset 阴影 + 对应令牌。
+   第三条路径限定在勾选列内（见文件头第 3 条）：不限列会被功能列的 Switch 命中。 */
+.mh-table tbody tr.is-selected td,
+.mh-table tbody tr[data-state='selected'] td,
+.mh-table tbody tr:has(.mh-table__col-check input:checked) td {
+  background: var(--ui-table-row-selected);
+}
+.mh-table tbody tr.is-disabled td,
+.mh-table tbody tr[aria-disabled='true'] td {
+  background: var(--ui-table-row-disabled);
+  color: var(--ui-base-content-subtle);
+}
+
+/* 分组行：整行一条、不可选、字重中粗 */
+.mh-table tbody tr.mh-table__group-row td {
+  height: var(--ui-table-row-height);
+  background: var(--ui-table-head-bg);
+  color: var(--ui-table-head-text);
+  font-weight: var(--ui-weight-medium);
+}
+
+/* 树行：子行首列缩进（与树的缩进同一口径） */
+.mh-table tbody tr.mh-table__row--child td:first-child {
+  padding-left: var(--ui-table-tree-indent);
+}
+.mh-table__tree-caret {
+  display: inline-flex;
+  width: var(--ui-font-icon); /* 常规图标档（改前无声明、掉到 `<svg>` 默认 16） */
+  height: var(--ui-font-icon);
+  margin-right: var(--ui-space-1);
+  color: var(--ui-base-content-subtle);
+  transition: transform 0.15s ease;
+}
+.mh-table__tree-caret--open {
+  transform: rotate(-90deg);
+}
+
+/* ===== 列 ===== */
+/* 勾选列：只负责「多宽 + 居中」——`Checkbox` 组件是 inline-flex，靠格子的 text-align 居中；
+   方块尺寸 / 圆角 / 三态配色全归 `checkbox.css`（表格不再给这一列任何选中态样式） */
+.mh-table__col-check {
+  width: var(--ui-table-col-check);
+  text-align: center;
+}
+.mh-table__col-actions {
+  text-align: right;
+}
+
+/* ⚠️ **表头要把对齐重声明一遍**：上面这几条与 `.mh-table__cell-center` / `.mh-table__cell-amount`
+ * 都只有 **0-1-0**，而 `.mh-table thead th { text-align: left }` 是 **0-1-1** ⇒ 表头被强拉成左对齐、
+ * 与表体不齐：勾选框应居中却贴左（实测表头左留白 0 / 右留白 26，与表体错位 13px）、
+ * 右对齐列的标题应靠右却被拉到左边。
+ * 只用补 `text-align` —— `thead th` 没声明过其它会被这些类覆盖的属性（宽度/内距不冲突）。
+ * 写法沿用 `th.mh-table__th-group`（组头居中）那条既有先例。 */
+.mh-table thead th.mh-table__col-check,
+.mh-table thead th.mh-table__cell-center {
+  text-align: center;
+}
+.mh-table thead th.mh-table__col-actions {
+  text-align: right;
+}
+/* `--sticky-col`：首列钉住（必须自带底，见文件头第 4 条） */
+.mh-table--sticky-col thead th:first-child,
+.mh-table--sticky-col tbody td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--ui-base-100);
+}
+.mh-table--sticky-col thead th:first-child {
+  z-index: 2; /* 表头既钉顶又钉左，压住表头其余列 */
+  background: var(--ui-table-head-bg);
+}
+/* `--sticky-head`：表头钉顶。
+ * ⚠️ 选择器必须带 `tr`（0-1-3）：文件后段「拖拽线的定位上下文」那条
+ * `.mh-table thead th { position: relative }` 是 **0-1-2**，与不写 `tr` 的写法**同特异性且在后**
+ * ⇒ 会把 `position: sticky` 覆盖掉，`stickyHead` 静默失效（0.6.0 起就存在，0.9.0 复核仍在）。
+ * `sticky` 同样是定位元素，照样给表头里的拖拽线当包含块，故加 `tr` 不损失原能力。 */
+.mh-table--sticky-head thead tr th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+/* ===== 单元格类型 ===== */
+.mh-table__cell-center {
+  text-align: center;
+}
+.mh-table__cell-amount {
+  text-align: right;
+  font-variant-numeric: tabular-nums; /* 金额对齐靠等宽数字，不靠右对齐就够 */
+}
+.mh-table__cell-link {
+  color: var(--ui-table-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.mh-table__cell-link:hover {
+  text-decoration: underline;
+}
+/* 列级**放开换行**（列定义里 `wrap: true` 时下发，只作用于表体 `td`；表头始终 nowrap）。
+ * 缺省不换行在面文件的 `.mh-table--fixed tbody td` 里 —— 本档才翻默认，故这里同时把
+ * 「换行三件套」与 `overflow-wrap` 兜底一并给回：换来的是「长文本列自己决定换行」。
+ * ⚠️ 选择器必须带 `td`（0-1-3）：`.mh-table--fixed tbody td` 是 **0-1-2**，
+ * 单个类（0-1-0）压不过它（同 §表头对齐那条的先例）。 */
+.mh-table tbody td.mh-table__cell-wrap {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  overflow-wrap: anywhere;
+}
+.mh-table__cell-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: var(--ui-space-1);
+  color: var(--ui-base-content-muted);
+}
+.mh-table__cell-main {
+  display: block;
+}
+.mh-table__cell-sub {
+  display: block;
+  color: var(--ui-base-content-muted);
+}
+/* 必填列的表头加星号（只在表头，不在单元格） */
+.mh-table th.mh-table__cell-required::before {
+  content: '*';
+  margin-right: var(--ui-space-1);
+  color: var(--ui-error);
+}
+
+/* 状态点（语义四档） */
+.mh-table__status-dot {
+  display: inline-block;
+  width: var(--ui-table-status-dot);
+  height: var(--ui-table-status-dot);
+  margin-right: var(--ui-space-1);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-base-400);
+  vertical-align: middle;
+}
+.mh-table__status-dot--info {
+  background: var(--ui-info);
+}
+.mh-table__status-dot--success {
+  background: var(--ui-success);
+}
+.mh-table__status-dot--warning {
+  background: var(--ui-warning);
+}
+.mh-table__status-dot--error {
+  background: var(--ui-error);
+}
+
+/* ===== 表头操作：排序按钮与列宽拖拽线 ===== */
+.mh-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: var(--ui-space-1);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ui-base-content-subtle);
+  cursor: pointer;
+}
+.mh-table__sort--active {
+  color: var(--ui-primary);
+}
+/* 槽位尺寸：常规图标一律取全局图标档（**不写 `.mh-table__sort-icon`** —— 那是只作朝向锚点的结构类，
+   面上为排序指示写规则会被契约拦下，见下方注释） */
+.mh-table__sort > svg {
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+/* 排序朝向：**方位在字形里**（升序 `chevron-up` / 降序与未排序 `chevron-down`，未排走浅色、已排随
+   `.mh-table__sort--active` 主色）—— 本层零 `transform`，不走"把别的图标旋转 90° 冒充上下"的老路
+   （包内硬约束）。`mh-table__sort-icon` 与 `--asc` / `--desc` 只作**状态锚点**（消费方与用例按它们定位
+   当前朝向），面上无声明，登记在测试契约的结构锚点台账里。 */
+.mh-table__drag-line {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: var(--ui-table-drag-line-width);
+  height: var(--ui-table-drag-line-height);
+  background: var(--ui-table-drag-line);
+  transform: translateY(-50%);
+  cursor: col-resize;
+}
+/* 拖拽线要定在表头单元格右缘，故表头格需要定位上下文 */
+.mh-table thead th {
+  position: relative;
+}
+
+/* ===== 批量栏（选中若干行后出现在表格上方） ===== */
+.mh-table__batch {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  height: var(--ui-table-batch-height);
+  padding: 0 var(--ui-table-padding-x);
+  background: var(--ui-table-head-bg);
+  color: var(--ui-table-head-text);
+}
+.mh-table__batch-count {
+  margin-left: auto;
+  color: var(--ui-primary);
+}
+
+/* ===== 合计行（当页合计） ===== */
+.mh-table__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-4);
+  height: var(--ui-table-summary-height);
+  padding: 0 var(--ui-table-padding-x);
+  border-radius: var(--ui-table-radius);
+  background: var(--ui-warning-weak); /* 规范 Au07 暖底渐变，本仓取警示弱底 */
+}
+.mh-table__summary-label {
+  color: var(--ui-table-head-text);
+}
+.mh-table__summary-value {
+  font-size: var(--ui-font-body);
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-warning); /* 规范 #ff6c29 */
+}
+
+/* ===== 尺寸档：大号（详情页 / 展示型表格）—— 三档 30 / 38 / 46 里的最大档 ===== */
+.mh-table--lg {
+  --ui-table-head-height: 46px;
+  --ui-table-row-height: 46px;
+  --ui-table-padding-x: var(--ui-space-6);
+}
+
+/* ===== 加载态 =====
+ * 盖一层浅罩而不是换骨架行：行高不塌，表格不会在加载前后跳动（跳动比没骨架更刺眼）。 */
+.mh-table-wrapper {
+  position: relative;
+}
+.mh-table__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 80px;
+  background: var(--ui-mask-light);
+}
+.mh-table__spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--ui-primary);
+  border-top-color: transparent;
+  border-radius: var(--ui-radius-full);
+  animation: mh-table-spin 0.8s linear infinite;
+}
+@keyframes mh-table-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ===== 空态（表格内的空数据行；要插画与操作按钮就用 empty 插槽） ===== */
+.mh-table__empty {
+  height: 120px;
+  text-align: center;
+  color: var(--ui-base-content-muted);
+}
+.mh-table__empty-row:hover td {
+  background: transparent;
+}
+
+/* ===== 可点行（onRow 给了 onClick 才挂） ===== */
+.mh-table tbody tr.is-clickable {
+  cursor: pointer;
+}
+
+/* ===== 展开行 ===== */
+.mh-table__col-expand {
+  width: 40px;
+  text-align: center;
+}
+.mh-table__expand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-radius-sm);
+  background: transparent;
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+}
+.mh-table__expand:hover {
+  background: var(--ui-base-200);
+  color: var(--ui-base-content);
+}
+/* 展开时箭头转 180 度：同一个下箭头字形，不另画一个上箭头 */
+.mh-table__expand-icon {
+  width: var(--ui-font-icon); /* 常规图标档 */
+  height: var(--ui-font-icon);
+  transition: transform 0.15s ease;
+}
+.mh-table__expand[aria-expanded='true'] .mh-table__expand-icon {
+  transform: rotate(180deg);
+}
+.mh-table__expand-row > td {
+  padding: var(--ui-space-4) var(--ui-table-padding-x);
+  background: var(--ui-base-200);
+}
+
+/* ===== 分页条（贴在表格下方、右对齐；分页件自身的面归 pagination.css） ===== */
+.mh-table__pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--ui-space-4) 0 0;
+}