@manohub/ui 0.6.0

package/dist/styles/components/table.css

@@ -0,0 +1,439 @@
+/**
+ * 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(input:checked)`）：这样零 JS 也能选中；
+ *    组件态给 `[data-state='selected']`，静态档给 `.is-selected` —— 三源等价。
+ *    勾选列复用 `Checkbox` **组件**（不在表格里手写原生 input）：该件内部才是真实 `<input type="checkbox">`，
+ *    故 `:has(input:checked)` 这条路径照旧成立；`Checkbox` 的框体带 `data-state`（checked / indeterminate），
+ *    半选与选中都走它自己的样式数据，表格这边不再画方块。
+ * 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;
+}
+/* 紧凑档 */
+.mh-table--xs {
+  --ui-table-head-height: 36px;
+  --ui-table-row-height: 38px;
+}
+/* 窄屏下的最小宽（触发横向滚动，而不是把列压扁） */
+.mh-table--wide {
+  min-width: 620px;
+}
+
+/* ===== 表头 =====
+ * `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);
+}
+/* 多级表头的组头：下边线不加（组头跨列，加线会切断视觉分组） */
+.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 阴影 + 对应令牌。 */
+.mh-table tbody tr.is-selected td,
+.mh-table tbody tr[data-state='selected'] td,
+.mh-table tbody tr:has(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;
+}
+/* `--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`：表头钉顶 */
+.mh-table--sticky-head thead 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;
+}
+.mh-table__cell-ellipsis {
+  max-width: var(--ui-table-ellipsis);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.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 */
+}
+
+/* ===== 尺寸档：大号（详情页 / 展示型表格） ===== */
+.mh-table--lg {
+  --ui-table-head-height: 52px;
+  --ui-table-row-height: 56px;
+  --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;
+}

package/dist/styles/components/table.tokens.css

@@ -0,0 +1,41 @@
+/**
+ * 批量栏 `.mh-table__batch` 是包裹层的子元素（与 `<table>` 同级）—— 令牌锚在容器上，
+ * 批量栏的高度 / 内距 / 底色照样取得到
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出：这些是**基础值**，锚在 `[data-manohub-ui]`（跨包唯一作用域锚，
+ * 由入口层无条件写在应用容器上）—— 任何落在容器里的分件都取得到值，不再依赖
+ * 「声明在某个组件根类上」这条脆弱假设。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（拆开会让档位失效）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-table-font-size: var(--ui-font-caption);
+  --ui-table-head-height: 34px; /* 设计 1160×34 */
+  --ui-table-row-height: 30px; /* 设计 919×30，节距 31 */
+  --ui-table-line-height: var(--ui-line-caption); /* 单元格行高 = 正文档的 13px 配对（default 20 / farris 18） */
+  --ui-table-head-bg: var(--ui-base-200); /* 设计 #f1f2f5 */
+  --ui-table-head-text: var(--ui-base-content-muted);
+  --ui-table-head-bg-hover: var(--ui-primary-weak);
+  --ui-table-head-divider: var(--ui-base-300);
+  --ui-table-head-divider-width: 0 1px 0 0; /* 多级表头里列与列的分隔 */
+  --ui-table-text: var(--ui-base-content);
+  --ui-table-border: var(--ui-base-300);
+  --ui-table-radius: var(--ui-radius-md); /* 容器档：设计为 7（两档之间），按「表格是容器」取 md 并登记偏差 */
+  --ui-table-row-alt: var(--ui-base-200);
+  --ui-table-row-hover: var(--ui-primary-weak);
+  --ui-table-row-selected: var(--ui-primary-subtle); /* 设计 #dbe9ff；与滑过档分家（改前两者同值 ⇒ 滑过与选中不可辨） */
+  --ui-table-row-disabled: var(--ui-base-200);
+  --ui-table-link: var(--ui-primary);
+  --ui-table-padding-x: var(--ui-space-4); /* 单元格左右内距 16 */
+  --ui-table-col-check: 40px;
+  --ui-table-ellipsis: 150px;
+  --ui-table-drag-line: var(--ui-primary);
+  --ui-table-drag-line-width: 3px;
+  --ui-table-drag-line-height: 40px;
+  --ui-table-status-dot: 6px;
+  --ui-table-summary-height: 40px;
+  --ui-table-batch-height: 34px;
+  --ui-table-tree-indent: 38px;
+  --ui-table-scroll-height: 132px; /* 规范样张值 */
+}