@manohub/ui 0.6.0

package/dist/services/toast.js

@@ -0,0 +1,74 @@
+import { reactive, createApp, defineComponent, h } from "vue";
+import { ToastCompound, Toast } from "../components/toast/index.js";
+import { createHostContainer, onHostReset } from "./base.js";
+const DEFAULT_DURATION = 3e3;
+const MAX_VISIBLE = 5;
+const items = reactive([]);
+let seq = 0;
+let app = null;
+let container = null;
+const ToastServiceView = defineComponent({
+  name: "ToastServiceView",
+  setup() {
+    return () => h(ToastCompound.Stack, {}, {
+      default: () => items.map(
+        (item) => h(Toast, {
+          key: item.id,
+          tone: item.tone,
+          text: item.text,
+          duration: item.duration,
+          closable: item.closable,
+          action: item.action?.text,
+          onAction: () => item.action?.onClick(),
+          onClose: () => remove(item.id)
+        })
+      )
+    });
+  }
+});
+function ensureApp() {
+  if (app) return;
+  container = createHostContainer();
+  app = createApp(ToastServiceView);
+  app.mount(container);
+}
+function disposeApp() {
+  app?.unmount();
+  app = null;
+  container?.remove();
+  container = null;
+}
+function remove(id) {
+  const index = items.findIndex((item) => item.id === id);
+  if (index >= 0) items.splice(index, 1);
+  if (!items.length) {
+    void Promise.resolve().then(() => {
+      if (!items.length) disposeApp();
+    });
+  }
+}
+function toast(tone, text, options = {}) {
+  ensureApp();
+  const id = seq += 1;
+  const duration = options.duration ?? DEFAULT_DURATION;
+  items.push({
+    id,
+    tone,
+    text,
+    duration,
+    action: options.action,
+    /* 常驻提示缺省给关闭位：没有它用户就只剩刷新页面这一条路 */
+    closable: options.closable ?? duration === 0
+  });
+  while (items.length > MAX_VISIBLE) items.shift();
+  return { close: () => remove(id) };
+}
+function clearToasts() {
+  items.splice(0, items.length);
+  disposeApp();
+}
+onHostReset(() => clearToasts());
+export {
+  clearToasts,
+  toast
+};

package/dist/styles/components/avatar.css

@@ -0,0 +1,128 @@
+/**
+ * Avatar —— 头像（四档尺寸 / 文字 / 图标 / 占位 / 方角 / 带框 / 计数 / 头像组 / 角标）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/avatar.css` 与 `src/components/avatar.css`
+ * （实测四档 24 / 36 / 60 / 80；字母底色取主色；角标高 20 白描边）。
+ *
+ * 两条来自规范的硬结论，改前先读：
+ * 1. **圆形裁切归图片自身，容器不裁**：角上的角标（`__badge`）与徽章（`__chip`）是绝对定位件，
+ *    容器若带 `overflow: hidden`，会沿圆弧把它们各切掉一半（实测反馈）。故容器 `overflow: visible`，
+ *    图片用 `border-radius: inherit` 跟着形态自裁。
+ * 2. **头像组靠负边距堆叠**（`.mh-avatar-group`），每个头像带 2px 的底描边把相邻项隔开。
+ */
+.mh-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex-shrink: 0;
+  overflow: visible; /* 见文件头第 1 条：裁切归图片 */
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-base-400); /* Ne04 占位底 */
+  color: var(--ui-base-100); /* 占位前景 */
+}
+
+/* 图片：撑满 + 跟随形态自裁（否则去掉容器 overflow 后长宽不符的图会外溢） */
+.mh-avatar > img {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+}
+
+/* ===== 尺寸四档 ===== */
+.mh-avatar--sm {
+  width: var(--ui-avatar-size-sm);
+  height: var(--ui-avatar-size-sm);
+  font-size: var(--ui-font-caption);
+}
+.mh-avatar--md {
+  width: var(--ui-avatar-size-md);
+  height: var(--ui-avatar-size-md);
+  font-size: var(--ui-font-caption);
+}
+.mh-avatar--lg {
+  width: var(--ui-avatar-size-lg);
+  height: var(--ui-avatar-size-lg);
+  font-size: var(--ui-font-title);
+}
+.mh-avatar--xl {
+  width: var(--ui-avatar-size-xl);
+  height: var(--ui-avatar-size-xl);
+  font-size: var(--ui-font-display);
+}
+
+/* ===== 内容形态 ===== */
+/* 文字头像：底取主色（业务要按人名哈希换色时给 `.mh-avatar--letter` 覆盖 background 即可） */
+.mh-avatar--letter {
+  background: var(--ui-primary);
+}
+/* 图标头像：图标由 @manohub/icon 渲染，这里只给尺寸档 */
+.mh-avatar--icon {
+  color: var(--ui-base-100);
+}
+/* 占位：虚线框 + 说明字 */
+.mh-avatar--placeholder {
+  border: 1px dashed var(--ui-base-300);
+  background: var(--ui-base-100);
+  color: var(--ui-base-content-subtle);
+  font-size: var(--ui-font-caption);
+}
+/* 方角（商业图像）：圆角矩形 */
+.mh-avatar--square {
+  border-radius: var(--ui-radius-control);
+}
+/* 带框：靠阴影画出 2px 底环（不占布局，避免与角标抢位） */
+.mh-avatar--framed {
+  box-shadow: 0 0 0 2px var(--ui-base-100), var(--ui-shadow-card);
+}
+/* 计数档（头像组末位的「+N」） */
+.mh-avatar--count {
+  background: var(--ui-base-200);
+  color: var(--ui-base-content-muted);
+  font-size: var(--ui-font-caption);
+}
+
+/* ===== 角上外挂件（见文件头第 1 条：容器不裁，故它们不会被切）===== */
+.mh-avatar__badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ui-avatar-badge-size);
+  height: var(--ui-avatar-badge-size);
+  padding: 0 var(--ui-space-1);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-error); /* 红底（规范 Badge 专页实测） */
+  border: 2px solid var(--ui-base-100); /* 白描边 */
+  color: var(--ui-error-content);
+  font-size: var(--ui-font-caption);
+}
+.mh-avatar__chip {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary);
+  border: 2px solid var(--ui-base-100);
+  cursor: pointer;
+}
+
+/* ===== 头像组：负边距堆叠，靠 2px 底描边分隔 ===== */
+.mh-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.mh-avatar-group .mh-avatar {
+  border: 2px solid var(--ui-base-100);
+}
+.mh-avatar-group .mh-avatar + .mh-avatar {
+  margin-left: calc(-1 * var(--ui-avatar-gap));
+}

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

@@ -0,0 +1,24 @@
+/**
+ * avatar —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `avatar.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（只服务本件；跨件令牌才进 theme/） */
+  --ui-avatar-size-sm: 24px;
+  --ui-avatar-size-md: 36px;
+  --ui-avatar-size-lg: 60px;
+  --ui-avatar-size-xl: 80px;
+  --ui-avatar-badge-size: 20px; /* 角标高 20，宽按位数撑开 */
+  --ui-avatar-gap: 10px; /* 堆叠重叠量（组件可用 gap 覆盖） */
+}

package/dist/styles/components/badge.css

@@ -0,0 +1,237 @@
+/**
+ * Badge（徽标 / 标签）。
+ *
+ * 依据：@aihub/theme 的 components/badge.css（徽标高 20 / 胶囊）与 components/tag.css（标签片几何）。
+ */
+
+/* ===== Badge（徽标 / 标签）=====
+   批次 5 前 4 个应用各自手搓徽标，这里按设计稿收敛为 tone × shape × size × dot 的正交组合。
+   每个 tone 先铺一组局部变量（前景 / 底色 / 描边 / 圆点），形态类只决定「用哪几个变量」。 */
+
+.mh-badge {
+  --mh-badge-fg: var(--ui-base-content);
+  --mh-badge-bg: transparent;
+  --mh-badge-border: transparent;
+  --mh-badge-dot: var(--ui-base-content-subtle);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  font-size: var(--ui-font-caption);
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--mh-badge-fg);
+  background: var(--mh-badge-bg);
+  border-color: var(--mh-badge-border);
+}
+
+/* 尺寸档的圆角吃**体量档**（`xs` / `sm`），不吃容器档 `md` —— 容器档一改（卡片圆角调整）
+   徽标会跟着变，那是两件无关的事。20 档有设计实证（表格内标签 r3），24 档无实证、按体量就近升一档。 */
+.mh-badge--sm {
+  height: 20px;
+  padding: 0 6px;
+  min-width: 36px;
+  border-radius: var(--ui-radius-xs);
+}
+
+.mh-badge--md {
+  height: 24px;
+  padding: 0 8px;
+  border-radius: var(--ui-radius-sm);
+}
+
+.mh-badge--default {
+  --mh-badge-fg: var(--ui-base-content);
+  --mh-badge-dot: var(--ui-base-content-subtle);
+}
+
+.mh-badge--primary {
+  --mh-badge-fg: var(--ui-primary);
+  --mh-badge-bg: var(--ui-primary-weak);
+  --mh-badge-border: var(--ui-primary);
+  --mh-badge-dot: var(--ui-primary);
+}
+
+.mh-badge--info {
+  --mh-badge-fg: var(--ui-info);
+  --mh-badge-bg: var(--ui-info-weak);
+  --mh-badge-border: var(--ui-info);
+  --mh-badge-dot: var(--ui-info);
+}
+
+.mh-badge--success {
+  --mh-badge-fg: var(--ui-success);
+  --mh-badge-bg: var(--ui-success-weak);
+  --mh-badge-border: var(--ui-success);
+  --mh-badge-dot: var(--ui-success);
+}
+
+.mh-badge--warning {
+  --mh-badge-fg: var(--ui-warning);
+  --mh-badge-bg: var(--ui-warning-weak);
+  --mh-badge-border: var(--ui-warning);
+  --mh-badge-dot: var(--ui-warning);
+}
+
+.mh-badge--error {
+  --mh-badge-fg: var(--ui-error);
+  --mh-badge-bg: var(--ui-error-weak);
+  --mh-badge-border: var(--ui-error);
+  --mh-badge-dot: var(--ui-error);
+}
+
+/* 浅底标签：只取浅底 + 同色文字（无描边） */
+
+.mh-badge--soft {
+  background: var(--mh-badge-bg);
+  border-color: transparent;
+}
+
+.mh-badge--soft.mh-badge--default {
+  --mh-badge-bg: var(--ui-base-50);
+  --mh-badge-fg: var(--ui-base-content-muted);
+}
+
+.mh-badge--soft.mh-badge--primary {
+  --mh-badge-bg: var(--ui-primary-subtle);
+}
+
+/* 描边：浅底 + 同色描边；default 退化为白底 + 中性描边 + 正文色（状态胶囊） */
+
+.mh-badge--outline {
+  background: var(--mh-badge-bg);
+  border-color: var(--mh-badge-border);
+}
+
+.mh-badge--outline.mh-badge--default {
+  --mh-badge-bg: var(--ui-base-100);
+  --mh-badge-border: var(--ui-base-300);
+  --mh-badge-fg: var(--ui-base-content);
+}
+
+/* 无底无框：靠圆点表达状态；成功 / 中性用正文色，错误用危险色 */
+
+.mh-badge--plain {
+  background: transparent;
+  border-color: transparent;
+}
+
+.mh-badge--plain.mh-badge--default {
+  --mh-badge-fg: var(--ui-base-content-muted);
+}
+
+.mh-badge--plain.mh-badge--success {
+  --mh-badge-fg: var(--ui-base-content);
+}
+
+.mh-badge--plain.mh-badge--error {
+  --mh-badge-fg: var(--ui-error);
+}
+
+.mh-badge__dot {
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-radius: var(--ui-radius-full);
+}
+
+.mh-badge--dot-filled .mh-badge__dot {
+  background: var(--mh-badge-dot);
+}
+
+.mh-badge--dot-ring .mh-badge__dot {
+  box-sizing: border-box;
+  border: 2px solid var(--mh-badge-dot);
+  background: var(--ui-base-100);
+}
+
+/* ===== 数字角标（count）=====
+ * 一份面覆盖两种用法：**独立显示**（无子元素）时它就是一枚胶囊；
+ * **包裹子元素**时容器转 `relative`、角标脱流钉在右上角（`:has()` 判别，不需要第二套 DOM）。 */
+.mh-badge--count {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.mh-badge__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  /* 白圈：钉在头像 / 图标上时与底色分离（没有它，角标会像长在图标里的一块） */
+  border: 2px solid var(--ui-base-100);
+  border-radius: var(--ui-radius-full);
+  font-size: 12px;
+  font-weight: var(--ui-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  /* 缺省即「危险红」：数字角标表达的是「有未读 / 有异常」，与主流库同口径 */
+  background: var(--ui-error);
+  color: var(--ui-error-content);
+}
+
+/* 包裹态：角标脱流钉右上角（`translate(50%, -50%)` 让它挂在内容的角上而不是压进去） */
+.mh-badge--count:has(> :not(.mh-badge__count)) > .mh-badge__count {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+/* 角标的 tone：实色底 + 反白字（与内容徽标的浅底同色字不同 —— 角标要够跳） */
+.mh-badge__count.mh-badge--primary {
+  background: var(--ui-primary);
+  color: var(--ui-primary-content);
+}
+.mh-badge__count.mh-badge--info {
+  background: var(--ui-info);
+  color: var(--ui-info-content);
+}
+.mh-badge__count.mh-badge--success {
+  background: var(--ui-success);
+  color: var(--ui-success-content);
+}
+.mh-badge__count.mh-badge--warning {
+  background: var(--ui-warning);
+  color: var(--ui-warning-content);
+}
+.mh-badge__count.mh-badge--default {
+  background: var(--ui-base-content);
+  color: var(--ui-base-100);
+}
+
+/* ===== 状态点 + 文字（`● 已完成`）=====
+ * 最轻的状态表达：无底无框，只有一个点与一行字；点色复用 tone 的 `--mh-badge-dot`。 */
+.mh-badge--status {
+  --mh-badge-dot: var(--ui-base-content-subtle);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+  white-space: nowrap;
+}
+
+.mh-badge__status-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--ui-radius-full);
+  background: var(--mh-badge-dot);
+}
+
+/* `processing`（映射到 primary）加点呼吸：静态点读不出「正在进行」 */
+.mh-badge--status.mh-badge--primary .mh-badge__status-dot {
+  animation: mh-badge-pulse 1.6s ease-in-out infinite;
+}
+@keyframes mh-badge-pulse {
+  50% {
+    opacity: 0.3;
+  }
+}