@manohub/ui 0.6.0

package/dist/styles/components/pagination.css

@@ -0,0 +1,297 @@
+/**
+ * Pagination —— 分页条（总数文案 + 每页条数 + 页码窗口 + 翻页箭头 + 空态 + 简单档）。
+ *
+ * 出处：设计稿《MH后台-0911》的分页器（`0:4047` 466×28：页码项 **28×28 / r6 / 白底 / 边 `#e6e6e6`**、
+ * 选中页码底 `#eff5ff`、条数选择器 `0:4092` 28×28 r6）与 `@aihub/theme` 的 `src/components/pagination.css`
+ * （圆角控件档 / 字号 13 / 组间 12 / 页码间 4 / 省略号 subtle）。
+ * ⚠️ 设计给 **28**、规范给 **26**、改前本件取 32 —— 三者都不同；本轮按设计取 28（规范值登记为偏差）。
+ *
+ * **顺序是一维右对齐流**：`共 N 条，` → `每页 N 条 ▾` → `‹ 1 … 10 11 12 … 50 ›`。别把总数额外搬到左侧。
+ *
+ * **不做跳页输入框**：规范里没有「跳至第 N 页」的样张（重写者若需要须自行定位置），本仓按"不做规范没演示的"
+ * 处理 —— 要保持族谱齐全的判据就该守在规范有标记示例的范围内，而不是替规范发明控件。
+ *
+ * **页码项三源等价**（本仓通例）：原生 `:has(> input:checked)` / 组件下发 `[data-state='selected']` /
+ * 静态档 `.is-selected` 指向同一份声明 —— 原生态给零 JS 用法（原生 radio 互斥 + ← → 换页），组件态给 v-model。
+ *
+ * 翻页箭头用**两个字形**（上一页 `chevron-left` / 下一页 `chevron-right`），本层不转向：方位由字形自表达
+ * （包内硬约束：不得靠 `transform: rotate()` 把别的图标转成方位，`back` 只作"返回"语义）。条数选择器的
+ * 折叠指示走操作层 `.mh-popup-caret`（展开时翻向），与本层同样零自画折线。
+ */
+
+/* 几何只挂在页码条上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会把空态也排成右对齐的行 */
+.mh-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ui-pagination-gap);
+  font-size: var(--ui-pagination-font-size);
+  color: var(--ui-pagination-text);
+}
+/* 外框档：规范只给了「1px 描边 + 控件圆角」，内距本仓定为横 12、竖不额外加（项高即条高） */
+.mh-pagination--boxed {
+  padding: 0 var(--ui-space-4);
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-pagination-item-radius);
+}
+
+/* ===== 总数文案 / 空态 / 简单档 ===== */
+.mh-pagination__total {
+  white-space: nowrap;
+}
+.mh-pagination__empty {
+  color: var(--ui-pagination-ellipsis);
+}
+.mh-pagination__plain {
+  white-space: nowrap;
+}
+
+/* ===== 每页条数选择器（触发器：文字 + 转向箭头） =====
+   面板是「操作层 + 本件皮肤」的组合写法：`class="mh-popup mh-pagination__panel"` ——
+   开合 / Esc / 点外部关闭 / 顶层渲染 / 定位档归 `styles/operations/popup.css`，面（底 / 圆角 / 内距 / 阴影）归本件。 */
+.mh-pagination__size {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+.mh-pagination__size:hover,
+.mh-pagination__size[data-state='hover'] {
+  color: var(--ui-pagination-border-hover);
+}
+.mh-pagination__size[data-state='active'] {
+  color: var(--ui-pagination-text-active);
+}
+.mh-pagination__size:disabled {
+  color: var(--ui-base-content-subtle);
+  cursor: not-allowed;
+}
+
+/* 面板皮肤：**组件自渲染的菜单必须自带面** —— 操作层把 popover 的 UA 装饰（含 `background`）归零成
+   `transparent`，只挂 `.mh-popup` 的面板会整个透出底下的表格（实测踩坑，就是这条缺失造成的）。
+   只给面，不碰开合与定位（那些归操作层）。 */
+.mh-pagination__panel {
+  padding: var(--ui-space-1) 0;
+  border-radius: var(--ui-radius-control); /* 控件圆角档（与选择器面板同档） */
+  background: var(--ui-base-100);
+  box-shadow: var(--ui-shadow-popover); /* 条数选择器是锚定浮层，不是居中浮层 */
+}
+
+/* 菜单里的单选项：本件是**单选组**（原生 radio，箭头键可选），与选择器的 listbox 面板不是一回事，故不复用其皮肤 */
+.mh-pagination__size-option {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  padding: var(--ui-space-1) var(--ui-space-3);
+  border-radius: var(--ui-radius-sm);
+  font-size: var(--ui-pagination-font-size);
+  color: var(--ui-pagination-text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.mh-pagination__size-option:hover {
+  background: var(--ui-pagination-bg-selected);
+}
+.mh-pagination__size-option input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  appearance: none;
+  pointer-events: none;
+}
+.mh-pagination__size-option:has(input:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* ===== 页码行 ===== */
+.mh-pagination__pages {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-pagination-page-gap);
+}
+
+.mh-pagination__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--ui-pagination-item-size);
+  height: var(--ui-pagination-item-size);
+  padding: 0 var(--ui-space-1);
+  border: 1px solid transparent;
+  border-radius: var(--ui-pagination-item-radius);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--ui-pagination-font-size);
+  color: var(--ui-pagination-text);
+  cursor: pointer;
+  transition-property: background-color, border-color, color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+/* 滑过 / 按下：只描边转色（底仍透明，规范如此） */
+.mh-pagination__btn:hover,
+.mh-pagination__btn.is-hover {
+  border-color: var(--ui-pagination-border-hover);
+}
+.mh-pagination__btn:active,
+.mh-pagination__btn.is-active {
+  border-color: var(--ui-pagination-border-active);
+}
+/* 选中：淡底 + 主色描边 + 主色字 + 中粗（三源等价） */
+.mh-pagination__btn.is-selected,
+.mh-pagination__btn[data-state='selected'],
+.mh-pagination__btn:has(> input:checked) {
+  border-color: var(--ui-pagination-border-active);
+  background: var(--ui-pagination-bg-selected);
+  color: var(--ui-pagination-text-active);
+  font-weight: var(--ui-weight-medium);
+}
+.mh-pagination__btn:disabled {
+  color: var(--ui-base-content-subtle);
+  cursor: not-allowed;
+}
+.mh-pagination__btn:disabled:hover {
+  border-color: transparent;
+}
+
+/* 省略号：不可点、字距拉开（规范 2px） */
+.mh-pagination__btn--ellipsis {
+  color: var(--ui-pagination-ellipsis);
+  letter-spacing: 2px;
+  cursor: default;
+}
+.mh-pagination__btn--ellipsis:hover {
+  border-color: transparent;
+}
+
+/* 翻页箭头：**朝向在字形里**（上一页 `chevron-left` / 下一页 `chevron-right`），本层只给颜色 ——
+   整段零 `transform`，不走"把别的图标转成方位"的老路（包内硬约束）。
+   `--prev` / `--next` 保留为**状态钩子**（消费方与测试按它们定位两端的箭头按钮），不再承载转向。 */
+.mh-pagination__btn--arrow {
+  color: var(--ui-pagination-arrow);
+}
+
+/* 槽位尺寸：**常规图标一律取全局图标档**（`--ui-font-icon`）—— 翻页箭头与条数选择器的折叠箭头
+   改前无声明、掉到 `<svg>` 的默认 16，本层不另定数值（字形由 `@manohub/icon` 给）。 */
+.mh-pagination__btn--arrow > svg,
+.mh-pagination__size > svg {
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+
+/* ===== 外框档内的三态：不描边、不落底，只靠**文字变色** =====
+   判据：boxed 档自己已经画了一圈外框，框内再来一圈描边（滑过/按下/选中）或一块淡底（选中）就是双重勾线，
+   故框内的态一律收敛成「文字色」这一种手段 —— 滑过转浅主色（复用描边档的滑过色 `#529dff`）、按下与选中
+   转主色。中粗**不在此重复声明**：基类选中规则已给 `--ui-weight-medium`，这里只覆盖 border/底/字色三件，
+   旧口径（主色字 + 中粗）完整保留。
+   两处排除都是必须的：`--ellipsis`（省略号与按钮共用基类，但它不可点、只该保持浅色）与 `:disabled`
+   （不可点的箭头不该被悬停染成主色）；排除项包在 `:where()` 里，使其**不抬特异性** —— 这样三条覆盖同为
+   0-3-0，靠源序让「选中」压住「悬停」（悬停已选中的项仍显示选中色，与非 boxed 档一致）。
+   三源等价（原生 `:has(> input:checked)` / 组件 `[data-state='selected']` / 静态 `.is-selected`）一并覆盖。 */
+.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)):hover,
+.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)).is-hover {
+  border-color: transparent;
+  color: var(--ui-pagination-border-hover);
+}
+.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)):active,
+.mh-pagination--boxed .mh-pagination__btn:not(:where(.mh-pagination__btn--ellipsis, :disabled)).is-active {
+  border-color: transparent;
+  color: var(--ui-pagination-border-active);
+}
+.mh-pagination--boxed .mh-pagination__btn.is-selected,
+.mh-pagination--boxed .mh-pagination__btn[data-state='selected'],
+.mh-pagination--boxed .mh-pagination__btn:has(> input:checked) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--ui-pagination-text-active);
+}
+
+/* 原生态的开关（同名 radio）隐身但可聚焦：零 JS 用法下选中态由 `:has(> input:checked)` 驱动 */
+.mh-pagination__btn > input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  appearance: none;
+  pointer-events: none;
+}
+
+/* 键盘焦点环画在可见项上（原生态的开关是隐身的） */
+.mh-pagination__btn:focus-visible,
+.mh-pagination__btn:has(> input:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* ===== 尺寸档（只覆盖令牌）=====
+   标准档 28 拿的是设计实测值，故两档以它为中心各让 4px（24 / 32），而不是继续引用控件三档
+   （24 / 32 / 40 —— 那样标准档就落不到 28 上）。 */
+.mh-pagination--sm {
+  --ui-pagination-item-size: 24px;
+  --ui-pagination-font-size: var(--ui-font-caption);
+}
+.mh-pagination--lg {
+  --ui-pagination-item-size: 32px;
+  --ui-pagination-font-size: var(--ui-font-body);
+}
+
+/* ===== 跳页（showQuickJumper） ===== */
+.mh-pagination__jump {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  font-size: var(--ui-pagination-font-size);
+  color: var(--ui-pagination-text);
+}
+.mh-pagination__jump-input {
+  width: 56px;
+  height: var(--ui-pagination-item-size);
+  padding: 0 var(--ui-space-2);
+  border: 1px solid var(--ui-base-400);
+  border-radius: var(--ui-pagination-item-radius);
+  background: var(--ui-base-100);
+  font-family: inherit;
+  font-size: var(--ui-pagination-font-size);
+  color: var(--ui-base-content);
+  text-align: center;
+  outline: none;
+  /* 数字输入的上下箭头在 56px 宽里会挤掉数字，直接收掉 */
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.mh-pagination__jump-input::-webkit-outer-spin-button,
+.mh-pagination__jump-input::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+.mh-pagination__jump-input:hover {
+  border-color: var(--ui-pagination-border-hover);
+}
+.mh-pagination__jump-input:focus {
+  border-color: var(--ui-pagination-border-active);
+  box-shadow: 0 0 0 2px var(--ui-primary-weak);
+}
+.mh-pagination__jump-input:disabled {
+  background: var(--ui-base-200);
+  border-color: var(--ui-base-300);
+  color: var(--ui-base-content-subtle);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * pagination —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `pagination.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 空态是**独立根节点**（无数据时不渲染页码区）—— 令牌锚在容器上，它照样取得到 */
+  /* 单件令牌 */
+  /* 页码方块 28（设计实测）：它是「页码格」，体量由数字字号 + 内距决定，不属控件三档 */
+  --ui-pagination-item-size: 28px;
+  --ui-pagination-item-radius: var(--ui-radius-control);
+  --ui-pagination-font-size: var(--ui-font-caption);
+  --ui-pagination-text: var(--ui-base-content);
+  --ui-pagination-gap: var(--ui-space-3); /* 组间 12 */
+  --ui-pagination-page-gap: var(--ui-space-1); /* 页码间 4 */
+  --ui-pagination-bg-selected: var(--ui-primary-weak); /* 规范 #e9f3ff */
+  --ui-pagination-text-active: var(--ui-primary); /* 规范 #2a87ff */
+  --ui-pagination-border-hover: var(--ui-primary-hover); /* 规范 #529dff */
+  --ui-pagination-border-active: var(--ui-primary); /* 规范 #0e6ded → 本仓主色档（主题无更深一档） */
+  --ui-pagination-arrow: var(--ui-base-content);
+  --ui-pagination-ellipsis: var(--ui-base-content-subtle); /* 规范 Te07 */
+}

package/dist/styles/components/panel.css

@@ -0,0 +1,77 @@
+/**
+ * Panel（区域容器，**无框契约**：分区感只由 Header 下方 1px 分隔线提供）。
+ *
+ * 依据：@aihub/theme 的 components/card.css（分区手法）+ base/spacing.css（头高与内距档）。
+ */
+
+/* ===== Panel（区域容器，无框）=====
+   无框契约：面板自身不写描边 / 圆角 / 阴影 / 独立底色 / 单侧边框，
+   分区感只由 Header 下方 1px 分隔线提供（与 .mh-page__header 同一手法）；
+   两栏之间的竖直分隔线由 Page.Split 提供；卡片外观由内容件承载（表格用 Table.framed）。
+
+   滚动归属：Header 固定（flex-shrink:0），Body 承担**区域内**滚动（overflow:auto）。
+   Split 两栏因此让出滚动（overflow:hidden），避免同栏两层滚动容器。 */
+
+.mh-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.mh-panel__header {
+  flex-shrink: 0;
+  height: var(--ui-header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-3);
+}
+
+.mh-panel__header-title {
+  font-size: var(--ui-font-heading);
+  font-weight: var(--ui-weight-semibold);
+  color: var(--ui-base-content);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 右侧组：toolbar（本区域筛选）在左、actions（本区域操作）在右，内部间距锁死 */
+
+.mh-panel__header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-width: 0;
+}
+
+.mh-panel__header-toolbar,
+.mh-panel__header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+
+.mh-panel__body {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+/* 面板页脚：区域内**常驻**控件（本区域表格的分页条等），不随内容滚动。
+   与 Header 同款 flex-shrink:0；不加边框（面板无框契约只管分区感由 Header 下边线提供），
+   左右内距与 Body 对齐，让分页条与表格左右边缘齐平。 */
+
+.mh-panel__footer {
+  flex-shrink: 0;
+}
+
+/* 标题位收任意节点（`title` 插槽可放图标 / 计数 / 状态点），故按行内弹性排布 */
+.mh-panel__header-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-width: 0;
+}

package/dist/styles/components/query-state.css

@@ -0,0 +1,88 @@
+/**
+ * QueryState —— 三态（loading / empty / error）容器。
+ *
+ * 依据：@aihub/theme 的 components/empty.css（空态图形与文案层级）与 components/skeleton.css（shimmer 微光）。
+ */
+
+/**
+ * 本面只含组件自身的类与骨架屏动画。
+ * 允许的视觉声明集中在组件面；应用侧 CSS 只写布局。
+ */
+
+/* ===== 骨架屏 =====
+   微光（动画 + 色值）的**唯一来源是 `./skeleton.css`（Skeleton）**：
+   本文件不再自带一份 —— 两处各写一份必然漂（时长/色值改一处漏一处，
+   同一屏会出现两种呼吸节奏）。这里只保留三态容器自己的排布（`.mh-state-skeletons`）。 */
+
+/* ===== 三态（QueryState）=====
+   构成顺序固定：**插画 → 主文案 → 副文案 → 操作区**（整块垂直居中）。
+   留白节奏同控制台空态一档：插画下 16、标题下 4、副文案下 16；文案层级用字号 + 字重 + 灰度拉开，
+   不靠多色分隔 —— 状态块是页面的「静默区」，视觉噪音要低。 */
+
+.mh-state {
+  height: 100%;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ui-space-6);
+  text-align: center;
+}
+
+.mh-state-title {
+  font-size: var(--ui-font-heading);
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-base-content);
+  margin: 0;
+}
+
+.mh-state-description {
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-subtle);
+  max-width: 420px;
+  word-break: break-word;
+  margin: var(--ui-space-1) 0 0;
+}
+
+/* 操作区：默认一颗主按钮；用 actions 插槽时可放多颗（横向排列） */
+
+.mh-state-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-2);
+  margin-top: var(--ui-space-4);
+}
+
+.mh-state-skeletons {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-3);
+}
+
+/* ===== 插画壳 =====
+   内建插画是**设计交付的 SVG 原样注入**（见 `utils/state-illustration.ts`：结构 / 坐标 / 固定色值 /
+   `id` / `<title>` 全保留），面里因此只有外壳这一件事：壳宽（264 = 设计画布宽）、窄容器里按比例收缩、
+   与下方文案的间距，以及把设计稿写死 `264 × 246` 的画布拉成「随壳自适应」。
+   同理，插画**不跟随主题**（图里是设计终值色，不走 `--ui-*`）——这是「原样引用」的取舍。
+   `illustration` 属性给的图片地址复用同一个壳（`<img>` 自带比例，不需要第二条规则）。 */
+
+.mh-state-illustration {
+  display: inline-block;
+  width: 264px;
+  max-width: 70%;
+  height: auto;
+  margin-bottom: var(--ui-space-4);
+}
+
+/* 设计画布写死的 `width="264px" height="246px"` 是表现属性，CSS 优先 —— 这里把它拉成
+   「宽随壳、高按 264 : 246 等比」，设计稿本身一个字节没改（改属性才是动设计稿） */
+
+.mh-state-illustration > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}