@omit-design/preset-mobile 0.1.0

package/components/OmCouponCard.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import { IonIcon } from "@ionic/react";
+import { checkmark } from "ionicons/icons";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-coupon-card.css";
+
+interface OmCouponCardProps {
+  /** 面额 label，如 "¥50" / "8.5" / "15% OFF" */
+  valueLabel: string;
+  /** 单位 label，如 "代金券" / "折"。省略则只显示面额 */
+  unitLabel?: string;
+  title: string;
+  /** 次要文本：使用门槛说明 */
+  condition?: string;
+  /** 有效期文案 */
+  expireDate?: string;
+  /** 选中态 —— 蓝描边 + 右侧 check 圆 */
+  selected?: boolean;
+  /** 右侧自定义 slot（替换默认 radio），如 rewards 页把 condition 挪到这里作为 tag */
+  trailing?: ReactNode;
+  onClick?: () => void;
+}
+
+/**
+ * 优惠券 / 奖励卡 —— 左侧徽章（面额）+ 中部标题 + 右侧单选圆。
+ * 点击整张卡即选中；`selected` 控制高亮。
+ */
+export function OmCouponCard({
+  valueLabel,
+  unitLabel,
+  title,
+  condition,
+  expireDate,
+  selected,
+  trailing,
+  onClick,
+}: OmCouponCardProps) {
+  const interactive = !!onClick;
+  const className = `om-coupon${selected ? " pos-coupon--selected" : ""}`;
+
+  const inner = (
+    <>
+      <div className="om-coupon__badge">
+        <span className="om-coupon__badge-value">{valueLabel}</span>
+        {unitLabel && <span className="om-coupon__badge-unit">{unitLabel}</span>}
+      </div>
+      <div className="om-coupon__body">
+        <p className="om-coupon__title">{title}</p>
+        {condition && <p className="om-coupon__condition">{condition}</p>}
+        {expireDate && <p className="om-coupon__expire">⏳ {expireDate}</p>}
+      </div>
+      {trailing ?? (
+        <div className="om-coupon__radio" aria-hidden>
+          {selected && <IonIcon icon={checkmark} />}
+        </div>
+      )}
+    </>
+  );
+
+  const inspect = inspectAttrs("OmCouponCard", { bg: "background", radius: "md", spacing: "md" });
+
+  return interactive ? (
+    <button type="button" className={className} onClick={onClick} {...inspect}>
+      {inner}
+    </button>
+  ) : (
+    <div className={className} {...inspect}>
+      {inner}
+    </div>
+  );
+}

package/components/OmDialog.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from "react";
+import { IonIcon } from "@ionic/react";
+import { useNavigate } from "react-router-dom";
+import { inspectAttrs } from "./inspect-attrs";
+import { OmButton } from "./OmButton";
+import type { ColorTokenName } from "../tokens";
+import "./om-dialog.css";
+
+interface OmDialogProps {
+  /** 顶部图标（ionicons 名） */
+  icon?: string;
+  iconColor?: ColorTokenName;
+  title: string;
+  subtitle?: string;
+  /** 主按钮文案，默认"知道了" */
+  confirmText?: string;
+  /** 主按钮颜色 */
+  confirmColor?: ColorTokenName;
+  /** 主按钮跳转目标（确定流向 —— 跟 confirmHref 互斥，设计稿首选这个以保持 URL 语义） */
+  confirmHref?: string;
+  /** 主按钮回调（与 confirmHref 二选一；回调式适合纯状态弹窗） */
+  onConfirm?: () => void;
+  /** 取消按钮 —— 传入任何一个（cancelHref / onCancel / cancelText）都会启用 */
+  cancelText?: string;
+  cancelHref?: string;
+  onCancel?: () => void;
+  /** 自定义主体 —— 代替 subtitle，塞更复杂内容（比如金额详情） */
+  body?: ReactNode;
+  /** 覆盖整个 actions 区 —— 少数场景需要 3 个以上按钮 */
+  actions?: ReactNode;
+}
+
+/**
+ * 状态对话框 / 确认对话框 —— 全屏 scrim + 居中卡片。
+ * 默认 1 按钮；传入 cancelText/cancelHref/onCancel 任一个就切成 2 按钮（左取消右确认）。
+ */
+export function OmDialog({
+  icon,
+  iconColor = "primary",
+  title,
+  subtitle,
+  confirmText = "知道了",
+  confirmColor = "primary",
+  confirmHref,
+  onConfirm,
+  cancelText,
+  cancelHref,
+  onCancel,
+  body,
+  actions,
+}: OmDialogProps) {
+  const navigate = useNavigate();
+  const hasCancel = !!cancelText || !!cancelHref || !!onCancel;
+
+  const handleConfirm = () => {
+    if (onConfirm) return onConfirm();
+    if (confirmHref) navigate(confirmHref);
+  };
+  const handleCancel = () => {
+    if (onCancel) return onCancel();
+    if (cancelHref) navigate(cancelHref);
+    else navigate(-1);
+  };
+
+  return (
+    <div className="om-dialog" {...inspectAttrs("OmDialog", { radius: "xl", bg: "background" })}>
+      <div className="om-dialog__scrim" aria-hidden="true" />
+      <div className="om-dialog__card" role="dialog" aria-labelledby="pos-dialog-title">
+        {icon && (
+          <div className="om-dialog__icon">
+            <IonIcon icon={icon} color={iconColor} />
+          </div>
+        )}
+        <h2 className="om-dialog__title" id="pos-dialog-title">
+          {title}
+        </h2>
+        {subtitle && <p className="om-dialog__subtitle">{subtitle}</p>}
+        {body && <div className="om-dialog__body">{body}</div>}
+        <div className={`pos-dialog__actions ${hasCancel ? "pos-dialog__actions--two" : ""}`}>
+          {actions ?? (
+            <>
+              {hasCancel && (
+                <OmButton variant="outline" color="medium" onClick={handleCancel}>
+                  {cancelText ?? "取消"}
+                </OmButton>
+              )}
+              <OmButton color={confirmColor} onClick={handleConfirm}>
+                {confirmText}
+              </OmButton>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/OmEmptyState.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { IonIcon } from "@ionic/react";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-empty-state.css";
+
+interface OmEmptyStateProps {
+  /** 大图标（ionicons） —— 显示在圆形浅色背景内 */
+  icon?: string;
+  title: string;
+  description?: string;
+  /** 主操作 + 次要操作（1~2 个 OmButton 传入） */
+  actions?: ReactNode;
+}
+
+/**
+ * 空状态 —— 列表 / 搜索 / 会员查无结果。
+ * 圆形 icon + 标题 + 描述 + actions。
+ */
+export function OmEmptyState({ icon, title, description, actions }: OmEmptyStateProps) {
+  return (
+    <div className="om-empty" {...inspectAttrs("OmEmptyState", { bg: "background", spacing: "xl" })}>
+      {icon && (
+        <div className="om-empty__icon" aria-hidden>
+          <IonIcon icon={icon} color="medium" />
+        </div>
+      )}
+      <h2 className="om-empty__title">{title}</h2>
+      {description && <p className="om-empty__desc">{description}</p>}
+      {actions && <div className="om-empty__actions">{actions}</div>}
+    </div>
+  );
+}

package/components/OmHeader.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { IonButtons, IonHeader, IonTitle, IonToolbar } from "@ionic/react";
+import { inspectAttrs } from "./inspect-attrs";
+
+interface OmHeaderProps {
+  title: string;
+  start?: ReactNode;
+  end?: ReactNode;
+}
+
+export function OmHeader({ title, start, end }: OmHeaderProps) {
+  return (
+    <IonHeader {...inspectAttrs("OmHeader", { bg: "background" })}>
+      <IonToolbar>
+        {start && <IonButtons slot="start">{start}</IonButtons>}
+        <IonTitle>{title}</IonTitle>
+        {end && <IonButtons slot="end">{end}</IonButtons>}
+      </IonToolbar>
+    </IonHeader>
+  );
+}

package/components/OmInput.tsx

@@ -0,0 +1,38 @@
+import { IonInput, IonItem, IonLabel, IonNote } from "@ionic/react";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-input.css";
+
+interface OmInputProps {
+  label: string;
+  value?: string;
+  placeholder?: string;
+  type?: "text" | "number" | "tel" | "email" | "password";
+  onChange?: (value: string) => void;
+  /** 内联错误文案；有值时整项进入错误态（红框 + 红色辅助文本） */
+  errorText?: string;
+}
+
+export function OmInput({
+  label,
+  value,
+  placeholder,
+  type = "text",
+  onChange,
+  errorText,
+}: OmInputProps) {
+  const hasError = !!errorText;
+  return (
+    <div className={hasError ? "pos-input pos-input--error" : "pos-input"}>
+      <IonItem {...inspectAttrs("OmInput", { spacing: "md" })}>
+        <IonLabel position="stacked">{label}</IonLabel>
+        <IonInput
+          type={type}
+          value={value}
+          placeholder={placeholder}
+          onIonInput={(e) => onChange?.(e.detail.value ?? "")}
+        />
+      </IonItem>
+      {hasError && <IonNote color="danger">{errorText}</IonNote>}
+    </div>
+  );
+}

package/components/OmListRow.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { IonItem, IonLabel, IonNote } from "@ionic/react";
+import { inspectAttrs } from "./inspect-attrs";
+
+interface OmListRowProps {
+  title: string;
+  detail?: string;
+  trailing?: ReactNode;
+  leading?: ReactNode;
+  onClick?: () => void;
+  href?: string;
+}
+
+export function OmListRow({ title, detail, trailing, leading, onClick, href }: OmListRowProps) {
+  return (
+    <IonItem
+      button={!!onClick || !!href}
+      onClick={onClick}
+      routerLink={href}
+      {...inspectAttrs("OmListRow", { spacing: "lg" })}
+    >
+      {leading}
+      <IonLabel>
+        <h2>{title}</h2>
+        {detail && <p>{detail}</p>}
+      </IonLabel>
+      {trailing && <IonNote slot="end">{trailing}</IonNote>}
+    </IonItem>
+  );
+}

package/components/OmMenuCard.tsx

@@ -0,0 +1,47 @@
+import { IonIcon } from "@ionic/react";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-menu-card.css";
+
+interface OmMenuCardProps {
+  /** ionicons 图标 */
+  icon: string;
+  label: string;
+  /** 右上角 badge（数字 / 短 token） */
+  badge?: string | number;
+  /** 整卡禁用态（二期 / 灰态） */
+  disabled?: boolean;
+  /** 点击或路由 */
+  href?: string;
+  onClick?: () => void;
+}
+
+/**
+ * 工作台宫格入口卡 —— 左上 icon chip + 下方 label + 右上可选 badge。
+ * 设计意图：所有 workstation 主入口视觉统一，disabled 态清晰区分二期。
+ */
+export function OmMenuCard({ icon, label, badge, disabled, href, onClick }: OmMenuCardProps) {
+  const className = `om-menu${disabled ? " pos-menu--disabled" : ""}`;
+  const inspect = inspectAttrs("OmMenuCard", { bg: "background", radius: "lg", shadow: "sm", spacing: "md" });
+  const body = (
+    <>
+      <div className="om-menu__icon" aria-hidden>
+        <IonIcon icon={icon} />
+      </div>
+      <span className="om-menu__label">{label}</span>
+      {typeof badge !== "undefined" && <span className="om-menu__badge">{badge}</span>}
+    </>
+  );
+
+  if (href && !disabled) {
+    return (
+      <a className={className} href={href} {...inspect}>
+        {body}
+      </a>
+    );
+  }
+  return (
+    <button type="button" className={className} disabled={disabled} onClick={onClick} {...inspect}>
+      {body}
+    </button>
+  );
+}

package/components/OmNumpad.tsx

@@ -0,0 +1,82 @@
+import { IonIcon } from "@ionic/react";
+import { backspaceOutline } from "ionicons/icons";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-numpad.css";
+
+interface OmNumpadProps {
+  /** 按键回调：数字（"0"~"9"）、"." 或 "abc" */
+  onKey?: (key: string) => void;
+  /** 退格 */
+  onBackspace?: () => void;
+  /** 清空（"清空" 按钮） */
+  onClear?: () => void;
+  /** 左下角：支持 "abc" 切换字母输入（登录密码数字键盘） 或 "." 小数点（金额） */
+  leftSlot?: "abc" | "dot" | "none";
+  /** 右下角退格（默认 true） */
+  showBackspace?: boolean;
+  /** 是否显示「清空」按钮替换右下角（会员登录页） */
+  clearMode?: boolean;
+}
+
+const KEYS: string[] = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
+/**
+ * 通用数字键盘（4 列 / 3 行 + 底排）—— 用于：
+ * - 登录页 "密码数字输入"（左下 "abc" 可切换字母键盘）
+ * - 会员登录 "手机号输入"（左下 "0"、右下 "清空"）
+ * - 金额输入（左下 "."）
+ */
+export function OmNumpad({
+  onKey,
+  onBackspace,
+  onClear,
+  leftSlot = "none",
+  showBackspace = true,
+  clearMode = false,
+}: OmNumpadProps) {
+  return (
+    <div className="om-numpad" {...inspectAttrs("OmNumpad", { bg: "light", radius: "md", spacing: "sm" })}>
+      {KEYS.map((k) => (
+        <button key={k} className="om-numpad__key" type="button" onClick={() => onKey?.(k)}>
+          {k}
+        </button>
+      ))}
+
+      {/* 左下角 */}
+      {leftSlot === "abc" && (
+        <button className="om-numpad__key pos-numpad__key--ghost" type="button" onClick={() => onKey?.("abc")}>
+          abc
+        </button>
+      )}
+      {leftSlot === "dot" && (
+        <button className="om-numpad__key" type="button" onClick={() => onKey?.(".")}>
+          .
+        </button>
+      )}
+      {leftSlot === "none" && <span className="om-numpad__spacer" aria-hidden />}
+
+      {/* 中间 0 */}
+      <button className="om-numpad__key" type="button" onClick={() => onKey?.("0")}>
+        0
+      </button>
+
+      {/* 右下角 */}
+      {clearMode ? (
+        <button className="om-numpad__key pos-numpad__key--clear" type="button" onClick={() => onClear?.()}>
+          清空
+        </button>
+      ) : showBackspace ? (
+        <button
+          className="om-numpad__key pos-numpad__key--ghost"
+          type="button"
+          onClick={() => onBackspace?.()}
+          aria-label="退格"
+        >
+          <IonIcon icon={backspaceOutline} />
+        </button>
+      ) : (
+        <span className="om-numpad__spacer" aria-hidden />
+      )}
+    </div>
+  );
+}

package/components/OmOrderFooter.tsx

@@ -0,0 +1,78 @@
+import { IonIcon } from "@ionic/react";
+import { cartOutline, chevronForward } from "ionicons/icons";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-order-footer.css";
+
+interface OmOrderFooterProps {
+  /** 购物车计数（badge）；0 / undefined 不展示 badge */
+  cartCount?: number;
+  /** 主要金额文案："¥999.00" / "¥68.00" */
+  primaryAmount: string;
+  /** 右侧 CTA 文案，如 "结算" / "¥999.00"（稿里两种 pattern） */
+  ctaLabel?: string;
+  /** 副信息："-¥124.00 优惠明细 >" */
+  discountLabel?: string;
+  /** 副信息 tap */
+  onDiscountClick?: () => void;
+  /** CTA tap */
+  onCta?: () => void;
+  onCartClick?: () => void;
+  /** 控制 CTA 文案与主金额的关系：
+   * - "split" ：左主金额 + 右 CTA 按钮（如销售主页的 ¥999.00 按钮本身） */
+  layout?: "amount-in-cta" | "amount-split";
+}
+
+/**
+ * 销售主页 / 购物车底部栏。
+ * 左：购物车图标 + badge + 可选优惠明细行；右：金额 CTA 按钮。
+ * 通过 `<OmPage>` 下的 absolute 定位，不跟随滚动。
+ */
+export function OmOrderFooter({
+  cartCount,
+  primaryAmount,
+  ctaLabel,
+  discountLabel,
+  onDiscountClick,
+  onCta,
+  onCartClick,
+  layout = "amount-in-cta",
+}: OmOrderFooterProps) {
+  return (
+    <div className="om-order-footer" {...inspectAttrs("OmOrderFooter", { bg: "background", spacing: "md" })}>
+      <button
+        className="om-order-footer__cart"
+        type="button"
+        onClick={onCartClick}
+        aria-label="购物车"
+      >
+        <IonIcon icon={cartOutline} />
+        {typeof cartCount === "number" && cartCount > 0 && (
+          <span className="om-order-footer__badge">{cartCount > 99 ? "99+" : cartCount}</span>
+        )}
+      </button>
+
+      {discountLabel && (
+        <button className="om-order-footer__discount" type="button" onClick={onDiscountClick}>
+          <span className="om-order-footer__discount-amount">{discountLabel}</span>
+          <span className="om-order-footer__discount-label">
+            优惠明细
+            <IonIcon icon={chevronForward} aria-hidden />
+          </span>
+        </button>
+      )}
+
+      {layout === "amount-in-cta" ? (
+        <button className="om-order-footer__cta" type="button" onClick={onCta}>
+          {ctaLabel ?? primaryAmount}
+        </button>
+      ) : (
+        <div className="om-order-footer__split">
+          <span className="om-order-footer__amount">{primaryAmount}</span>
+          <button className="om-order-footer__cta pos-order-footer__cta--compact" type="button" onClick={onCta}>
+            {ctaLabel}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/OmPage.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { IonContent, IonPage } from "@ionic/react";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-page.css";
+
+interface OmPageProps {
+  children: ReactNode;
+  /** 顶部固定 header（通常是 `<OmHeader />`）。传入后会作为 IonPage 直接子渲染，
+   * 从而与 IonContent 同级 —— header 不参与滚动。 */
+  header?: ReactNode;
+  /** 主体内边距 token（默认 lg） */
+  padding?: "none" | "sm" | "md" | "lg" | "xl";
+}
+
+const PADDING_CLASS = {
+  none: "pos-page-pad-none",
+  sm: "pos-page-pad-sm",
+  md: "pos-page-pad-md",
+  lg: "pos-page-pad-lg",
+  xl: "pos-page-pad-xl",
+};
+
+export function OmPage({ children, header, padding = "lg" }: OmPageProps) {
+  return (
+    <IonPage {...inspectAttrs("OmPage")}>
+      {header}
+      <IonContent className={PADDING_CLASS[padding]}>{children}</IonContent>
+    </IonPage>
+  );
+}

package/components/OmProductCard.tsx

@@ -0,0 +1,75 @@
+import { IonIcon } from "@ionic/react";
+import { add } from "ionicons/icons";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-product-card.css";
+
+interface OmProductCardProps {
+  /** 图片 emoji / 占位文字 */
+  emoji?: string;
+  name: string;
+  sku: string;
+  /** 单价（元） */
+  price: number;
+  /** 单位：瓶/盒/件 */
+  unit: string;
+  /** 可售库存 */
+  stock: number;
+  onAdd?: () => void;
+  onClick?: () => void;
+}
+
+/**
+ * 商品卡（销售主页 / 搜索结果）。
+ * 左侧 80×80 图，右侧名称 + SKU + 价格 + 库存，右下角 "加购" FAB。
+ */
+export function OmProductCard({
+  emoji,
+  name,
+  sku,
+  price,
+  unit,
+  stock,
+  onAdd,
+  onClick,
+}: OmProductCardProps) {
+  return (
+    <div
+      className="om-product"
+      onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      {...inspectAttrs("OmProductCard", { bg: "background", radius: "md", shadow: "sm", spacing: "md" })}
+    >
+      <div className="om-product__image" aria-hidden>
+        {emoji && <span className="om-product__emoji">{emoji}</span>}
+      </div>
+      <div className="om-product__body">
+        <div className="om-product__titles">
+          <p className="om-product__name">{name}</p>
+          <p className="om-product__sku">{sku}</p>
+        </div>
+        <div className="om-product__foot">
+          <div className="om-product__price-group">
+            <span className="om-product__price">
+              <span className="om-product__price-sign">￥</span>
+              <span className="om-product__price-value">{price.toFixed(2)}</span>
+            </span>
+            <span className="om-product__unit">/{unit}</span>
+            <span className="om-product__stock">库存{stock}</span>
+          </div>
+          <button
+            className="om-product__add"
+            type="button"
+            aria-label={`加购 ${name}`}
+            onClick={(e) => {
+              e.stopPropagation();
+              onAdd?.();
+            }}
+          >
+            <IonIcon icon={add} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/OmSearchBar.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import { IonIcon } from "@ionic/react";
+import { searchOutline } from "ionicons/icons";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-search-bar.css";
+
+interface OmSearchBarProps {
+  value?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  onFocus?: () => void;
+  /** 右侧附加元素（如过滤 / 取消按钮） */
+  trailing?: ReactNode;
+  /** 只读视觉（列表页用来做"跳到搜索页"的入口） */
+  readOnly?: boolean;
+  onClick?: () => void;
+}
+
+/**
+ * POS 搜索输入框 —— 圆角胶囊 + 左放大镜 + 可选右侧 slot。
+ * 既作为真实输入（搜索页 focus 态），也作为入口（列表页 readOnly + onClick 跳转）。
+ */
+export function OmSearchBar({
+  value,
+  placeholder = "搜索",
+  onChange,
+  onFocus,
+  trailing,
+  readOnly,
+  onClick,
+}: OmSearchBarProps) {
+  return (
+    <div
+      className="om-search-bar"
+      onClick={onClick}
+      {...inspectAttrs("OmSearchBar", { bg: "background", radius: "full", spacing: "md" })}
+    >
+      <IonIcon icon={searchOutline} className="om-search-bar__icon" aria-hidden />
+      <input
+        className="om-search-bar__input"
+        type="search"
+        value={value ?? ""}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        onChange={(e) => onChange?.(e.target.value)}
+        onFocus={onFocus}
+      />
+      {trailing && <div className="om-search-bar__trailing">{trailing}</div>}
+    </div>
+  );
+}