@omit-design/preset-mobile 0.1.0

package/components/OmSelect.tsx

@@ -0,0 +1,47 @@
+import { IonItem, IonLabel, IonSelect, IonSelectOption } from "@ionic/react";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-select.css";
+
+export interface OmSelectOption {
+  label: string;
+  value: string;
+}
+
+interface OmSelectProps {
+  label: string;
+  value?: string;
+  options: OmSelectOption[];
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  /** Ionic 弹出样式；默认 action-sheet，移动端更贴 iOS */
+  interfaceType?: "alert" | "action-sheet" | "popover";
+}
+
+export function OmSelect({
+  label,
+  value,
+  options,
+  placeholder,
+  onChange,
+  interfaceType = "action-sheet",
+}: OmSelectProps) {
+  return (
+    <div className="om-select">
+      <IonItem {...inspectAttrs("OmSelect", { spacing: "md" })}>
+        <IonLabel position="stacked">{label}</IonLabel>
+        <IonSelect
+          interface={interfaceType}
+          value={value}
+          placeholder={placeholder}
+          onIonChange={(e) => onChange?.(e.detail.value)}
+        >
+          {options.map((o) => (
+            <IonSelectOption key={o.value} value={o.value}>
+              {o.label}
+            </IonSelectOption>
+          ))}
+        </IonSelect>
+      </IonItem>
+    </div>
+  );
+}

package/components/OmSettingRow.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode } from "react";
+import { IonIcon, IonToggle } from "@ionic/react";
+import { chevronForward } from "ionicons/icons";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-setting-row.css";
+
+type OmSettingKind =
+  | {
+      kind: "toggle";
+      enabled: boolean;
+      onToggle?: (next: boolean) => void;
+    }
+  | {
+      kind: "navigate";
+      onClick?: () => void;
+      href?: string;
+    }
+  | {
+      kind: "value";
+      value: ReactNode;
+      onClick?: () => void;
+    };
+
+interface OmSettingRowBaseProps {
+  label: string;
+  description?: string;
+  /** 左侧图标（可选） */
+  icon?: string;
+}
+
+type OmSettingRowProps = OmSettingRowBaseProps & OmSettingKind;
+
+/**
+ * 设置项单行 —— 三种形态：toggle / navigate / value。
+ * 用于 workstation / settings 设置页，列表语义统一。
+ */
+export function OmSettingRow(props: OmSettingRowProps) {
+  const { label, description, icon } = props;
+  const interactive = props.kind !== "toggle";
+  const onClick =
+    props.kind === "navigate" || props.kind === "value" ? props.onClick : undefined;
+
+  const inspect = inspectAttrs("OmSettingRow", { bg: "background", spacing: "lg" });
+  const className = `om-setting-row${interactive ? " pos-setting-row--interactive" : ""}`;
+
+  const inner = (
+    <>
+      {icon && (
+        <div className="om-setting-row__icon" aria-hidden>
+          <IonIcon icon={icon} />
+        </div>
+      )}
+      <div className="om-setting-row__body">
+        <span className="om-setting-row__label">{label}</span>
+        {description && <span className="om-setting-row__desc">{description}</span>}
+      </div>
+      <div className="om-setting-row__right">
+        {props.kind === "toggle" && (
+          <IonToggle
+            checked={props.enabled}
+            onIonChange={(e) => props.onToggle?.(e.detail.checked)}
+            aria-label={label}
+          />
+        )}
+        {props.kind === "value" && (
+          <>
+            <span className="om-setting-row__value">{props.value}</span>
+            <IonIcon icon={chevronForward} className="om-setting-row__chevron" aria-hidden />
+          </>
+        )}
+        {props.kind === "navigate" && (
+          <IonIcon icon={chevronForward} className="om-setting-row__chevron" aria-hidden />
+        )}
+      </div>
+    </>
+  );
+
+  if (props.kind === "navigate" && props.href) {
+    return (
+      <a className={className} href={props.href} {...inspect}>
+        {inner}
+      </a>
+    );
+  }
+
+  return interactive ? (
+    <button type="button" className={className} onClick={onClick} {...inspect}>
+      {inner}
+    </button>
+  ) : (
+    <div className={className} {...inspect}>
+      {inner}
+    </div>
+  );
+}

package/components/OmSheet.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import { IonIcon } from "@ionic/react";
+import { closeOutline } from "ionicons/icons";
+import { useNavigate } from "react-router-dom";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-sheet.css";
+
+interface OmSheetProps {
+  /** 顶部标题（可选；传 null 则不展示 title bar） */
+  title?: ReactNode;
+  children: ReactNode;
+  /** 关闭：点击 scrim 或右上角 × —— 默认 navigate(-1) */
+  onDismiss?: () => void;
+  /** 关闭后的跳转路由（和 onDismiss 二选一） */
+  dismissHref?: string;
+  /** sheet 高度策略：auto（内容自适应）/ tall（70% 视口） */
+  size?: "auto" | "tall";
+}
+
+/**
+ * 底部抽屉 sheet —— 从下往上弹出的内容面板。
+ * 用于：优惠详情、快捷操作菜单、行内动作列表。
+ * 作为独立"弹窗稿"时，放在 OmPage 里叠一层（参考 dialog-view 的做法）。
+ */
+export function OmSheet({ title, children, onDismiss, dismissHref, size = "auto" }: OmSheetProps) {
+  const navigate = useNavigate();
+  const dismiss = () => {
+    if (onDismiss) return onDismiss();
+    if (dismissHref) return navigate(dismissHref);
+    navigate(-1);
+  };
+
+  return (
+    <div className="om-sheet" {...inspectAttrs("OmSheet", { bg: "background", radius: "xl" })}>
+      <div className="om-sheet__scrim" aria-hidden onClick={dismiss} />
+      <div className={`pos-sheet__panel pos-sheet__panel--${size}`} role="dialog">
+        {title && (
+          <div className="om-sheet__head">
+            <span className="om-sheet__title">{title}</span>
+            <button className="om-sheet__close" type="button" onClick={dismiss} aria-label="关闭">
+              <IonIcon icon={closeOutline} />
+            </button>
+          </div>
+        )}
+        <div className="om-sheet__body">{children}</div>
+      </div>
+    </div>
+  );
+}

package/components/OmStatCard.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-stat-card.css";
+
+interface OmStatCardProps {
+  label: string;
+  /** 大号数字 —— 可传格式化好的字符串（"¥12,480.50"） */
+  value: string;
+  /** 右上角辅助 slot（如「月份」小字） */
+  meta?: ReactNode;
+  /** 副标题（如单位、对比） */
+  caption?: string;
+}
+
+/**
+ * 统计数字卡 —— 用于工作台营收 / 客单等核心指标展示。
+ * 单一职责：标签 + 大号数字 + 可选副标题 / meta。
+ */
+export function OmStatCard({ label, value, meta, caption }: OmStatCardProps) {
+  return (
+    <div className="om-stat" {...inspectAttrs("OmStatCard", { bg: "background", radius: "lg", shadow: "sm" })}>
+      <div className="om-stat__head">
+        <span className="om-stat__label">{label}</span>
+        {meta && <span className="om-stat__meta">{meta}</span>}
+      </div>
+      <div className="om-stat__value">{value}</div>
+      {caption && <div className="om-stat__caption">{caption}</div>}
+    </div>
+  );
+}

package/components/OmTabBar.tsx

@@ -0,0 +1,26 @@
+import { IonIcon, IonLabel, IonTabBar, IonTabButton } from "@ionic/react";
+import { inspectAttrs } from "./inspect-attrs";
+
+export interface OmTabItem {
+  tab: string;
+  href: string;
+  label: string;
+  icon: string;
+}
+
+interface OmTabBarProps {
+  items: OmTabItem[];
+}
+
+export function OmTabBar({ items }: OmTabBarProps) {
+  return (
+    <IonTabBar slot="bottom" {...inspectAttrs("OmTabBar", { bg: "background" })}>
+      {items.map((item) => (
+        <IonTabButton key={item.tab} tab={item.tab} href={item.href}>
+          <IonIcon icon={item.icon} aria-hidden="true" />
+          <IonLabel>{item.label}</IonLabel>
+        </IonTabButton>
+      ))}
+    </IonTabBar>
+  );
+}

package/components/OmTag.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { inspectAttrs } from "./inspect-attrs";
+import type { ColorTokenName } from "../tokens";
+import "./om-tag.css";
+
+interface OmTagProps {
+  children: ReactNode;
+  color?: ColorTokenName;
+  /** 视觉：solid 填充色、soft 浅色底、outline 描边 */
+  variant?: "solid" | "soft" | "outline";
+  size?: "sm" | "md";
+}
+
+/**
+ * 小尺寸的 chip / badge / 标签。
+ * 用于：门槛标签（"无门槛"）、VIP 级别、状态徽章。
+ */
+export function OmTag({ children, color = "primary", variant = "soft", size = "sm" }: OmTagProps) {
+  return (
+    <span
+      className={`pos-tag pos-tag--${variant} pos-tag--${size}`}
+      data-color={color}
+      {...inspectAttrs("OmTag", { color, radius: "sm", fontSize: "xs" })}
+    >
+      {children}
+    </span>
+  );
+}

package/components/index.ts

@@ -0,0 +1,30 @@
+/**
+ * preset-mobile 组件白名单 — 业务页面（design/**）唯一允许 import 的来源。
+ *
+ * **不要**在业务页面里 `import from '@ionic/react'`,
+ * 如果发现某个移动端模式 Om* 没覆盖到,先来这里加封装。
+ */
+
+export { OmPage } from "./OmPage";
+export { OmHeader } from "./OmHeader";
+export { OmAppBar } from "./OmAppBar";
+export { OmButton } from "./OmButton";
+export { OmCard } from "./OmCard";
+export { OmListRow } from "./OmListRow";
+export { OmInput } from "./OmInput";
+export { OmSelect } from "./OmSelect";
+export type { OmSelectOption } from "./OmSelect";
+export { OmDialog } from "./OmDialog";
+export { OmTabBar } from "./OmTabBar";
+export type { OmTabItem } from "./OmTabBar";
+export { OmNumpad } from "./OmNumpad";
+export { OmSearchBar } from "./OmSearchBar";
+export { OmProductCard } from "./OmProductCard";
+export { OmEmptyState } from "./OmEmptyState";
+export { OmTag } from "./OmTag";
+export { OmOrderFooter } from "./OmOrderFooter";
+export { OmCouponCard } from "./OmCouponCard";
+export { OmStatCard } from "./OmStatCard";
+export { OmMenuCard } from "./OmMenuCard";
+export { OmSettingRow } from "./OmSettingRow";
+export { OmSheet } from "./OmSheet";

package/components/inspect-attrs.ts

@@ -0,0 +1,34 @@
+import type { ColorTokenName, SpacingTokenName, RadiusTokenName, FontSizeTokenName, ShadowTokenName } from "../tokens";
+
+export type TokenRefs = {
+  color?: ColorTokenName;
+  bg?: ColorTokenName;
+  spacing?: SpacingTokenName | SpacingTokenName[];
+  radius?: RadiusTokenName;
+  fontSize?: FontSizeTokenName;
+  shadow?: ShadowTokenName;
+};
+
+/**
+ * Inspect 用：把组件用到的 token 编码到 data-omit-tokens 属性，
+ * 运行时由 packages/engine/src/inspect 读取并展示「token 名」而不是字面量值。
+ */
+export function inspectAttrs(component: string, tokens?: TokenRefs) {
+  const attrs: Record<string, string> = {
+    "data-omit-component": component,
+  };
+  if (tokens) {
+    const flat: string[] = [];
+    if (tokens.color) flat.push(`color:${tokens.color}`);
+    if (tokens.bg) flat.push(`bg:${tokens.bg}`);
+    if (tokens.spacing) {
+      const arr = Array.isArray(tokens.spacing) ? tokens.spacing : [tokens.spacing];
+      flat.push(`spacing:${arr.join(",")}`);
+    }
+    if (tokens.radius) flat.push(`radius:${tokens.radius}`);
+    if (tokens.fontSize) flat.push(`fontSize:${tokens.fontSize}`);
+    if (tokens.shadow) flat.push(`shadow:${tokens.shadow}`);
+    if (flat.length) attrs["data-omit-tokens"] = flat.join("|");
+  }
+  return attrs;
+}

package/components/om-app-bar.css

@@ -0,0 +1,83 @@
+/* OmAppBar —— POS 应用 header（非表单页的 header）。
+   与 OmHeader（标准标题栏）区分：OmAppBar 是信息密度更高的 app shell 级 header。 */
+
+.om-app-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--om-spacing-md);
+  padding: var(--om-spacing-sm) var(--om-spacing-lg);
+  background: var(--ion-background-color);
+  min-height: var(--om-control-height-xl);
+  border-bottom: 1px solid var(--ion-color-light);
+}
+
+.om-app-bar--store .om-app-bar__info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-xs);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.om-app-bar__info-primary {
+  margin: 0;
+  font-size: var(--om-font-size-sm);
+  color: var(--ion-color-dark);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.om-app-bar__info-secondary {
+  margin: 0;
+  font-size: var(--om-font-size-sm);
+  color: var(--ion-color-dark);
+  font-weight: 500;
+}
+
+.om-app-bar__divider {
+  width: 1px;
+  height: var(--om-spacing-2xl);
+  background: var(--ion-color-light);
+}
+
+.om-app-bar__right {
+  display: flex;
+  align-items: center;
+  gap: var(--om-spacing-sm);
+}
+
+/* brand 变体（商户中心） */
+.om-app-bar--brand {
+  justify-content: space-between;
+}
+
+.om-app-bar__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--om-spacing-sm);
+}
+
+.om-app-bar__brand-icon {
+  font-size: var(--om-icon-size-lg);
+}
+
+.om-app-bar__brand-title {
+  font-size: var(--om-font-size-md);
+  font-weight: 500;
+  color: var(--ion-color-dark);
+}
+
+.om-app-bar__avatar {
+  width: var(--om-spacing-2xl);
+  height: var(--om-spacing-2xl);
+  border-radius: var(--om-radius-full);
+  background: var(--ion-color-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-size: var(--om-font-size-sm);
+  color: var(--ion-color-medium);
+}

package/components/om-coupon-card.css

@@ -0,0 +1,107 @@
+/* OmCouponCard —— 优惠券 / 奖励卡（会员详情 & 奖励确认两处复用） */
+
+.om-coupon {
+  display: flex;
+  gap: var(--om-spacing-md);
+  padding: var(--om-spacing-md);
+  background: var(--ion-background-color);
+  border-radius: var(--om-radius-md);
+  border: 1px solid transparent;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  appearance: none;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+button.om-coupon {
+  cursor: pointer;
+}
+
+.om-coupon--selected {
+  border-color: var(--ion-color-primary);
+  background: var(--om-surface-primary-softest);
+}
+
+.om-coupon__badge {
+  flex: 0 0 auto;
+  width: 72px;
+  min-height: var(--om-control-height-md);
+  text-align: center;
+  border-radius: var(--om-radius-sm);
+  padding: var(--om-spacing-sm);
+  background: var(--ion-color-light);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--om-spacing-xs);
+}
+
+.om-coupon--selected .om-coupon__badge {
+  background: var(--om-surface-primary-soft);
+}
+
+.om-coupon__badge-value {
+  display: block;
+  font-size: var(--om-font-size-lg);
+  font-weight: 700;
+  color: var(--ion-color-dark);
+  line-height: 1;
+}
+
+.om-coupon--selected .om-coupon__badge-value {
+  color: var(--ion-color-primary);
+}
+
+.om-coupon__badge-unit {
+  display: block;
+  font-size: var(--om-font-size-xs);
+  color: var(--ion-color-medium);
+}
+
+.om-coupon__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-xs);
+}
+
+.om-coupon__title {
+  margin: 0;
+  font-size: var(--om-font-size-sm);
+  color: var(--ion-color-dark);
+  font-weight: 500;
+}
+
+.om-coupon__condition,
+.om-coupon__expire {
+  margin: 0;
+  font-size: var(--om-font-size-xs);
+  color: var(--ion-color-medium);
+}
+
+.om-coupon__radio {
+  flex: 0 0 auto;
+  width: var(--om-spacing-xl);
+  height: var(--om-spacing-xl);
+  border-radius: var(--om-radius-full);
+  border: 1px solid var(--ion-color-light-shade);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: transparent;
+}
+
+.om-coupon--selected .om-coupon__radio {
+  background: var(--ion-color-primary);
+  border-color: var(--ion-color-primary);
+  color: var(--ion-color-primary-contrast);
+}
+
+.om-coupon__radio ion-icon {
+  font-size: var(--om-icon-size-sm);
+}

package/components/om-dialog.css

@@ -0,0 +1,81 @@
+/* OmDialog —— 独立一张稿的对话框形态：全屏 scrim + 居中卡片。
+   不使用 IonModal —— 作为 dialog-view pattern，本身就是一个页面的主体。 */
+
+.om-dialog {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--om-spacing-xl);
+  z-index: 10;
+}
+
+.om-dialog__scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--om-overlay-scrim);
+}
+
+.om-dialog__card {
+  position: relative;
+  background: var(--ion-background-color);
+  border-radius: var(--om-radius-xl);
+  padding: var(--om-spacing-xl) var(--om-spacing-lg) var(--om-spacing-lg);
+  width: 100%;
+  max-width: 334px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--om-spacing-lg);
+  text-align: center;
+  box-shadow: var(--om-shadow-lg);
+}
+
+.om-dialog__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  line-height: 1;
+}
+.om-dialog__icon ion-icon {
+  font-size: 64px;
+}
+
+.om-dialog__title {
+  margin: 0;
+  font-size: var(--om-font-size-lg);
+  font-weight: 600;
+  color: var(--ion-color-dark);
+}
+
+.om-dialog__subtitle {
+  margin: 0;
+  font-size: var(--om-font-size-sm);
+  color: var(--ion-color-medium);
+}
+
+.om-dialog__actions {
+  width: 100%;
+  margin-top: var(--om-spacing-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-sm);
+}
+.om-dialog__actions--two {
+  flex-direction: row;
+}
+.om-dialog__actions--two ion-button {
+  flex: 1 1 0;
+}
+.om-dialog__actions ion-button {
+  --border-radius: var(--om-radius-md);
+  height: var(--om-control-height-xl);
+  font-size: var(--om-font-size-lg);
+  font-weight: 600;
+}
+.om-dialog__body {
+  width: 100%;
+}

package/components/om-empty-state.css

@@ -0,0 +1,55 @@
+/* OmEmptyState —— 空态面板 */
+
+.om-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--om-spacing-lg);
+  padding: var(--om-spacing-xl) var(--om-spacing-lg);
+  text-align: center;
+}
+
+.om-empty__icon {
+  /* 64×64 = 两倍 spacing-2xl，画报级占位大小 */
+  width: calc(var(--om-spacing-2xl) * 2);
+  height: calc(var(--om-spacing-2xl) * 2);
+  border-radius: var(--om-radius-full);
+  background: var(--ion-color-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.om-empty__icon ion-icon {
+  font-size: var(--om-icon-size-xl);
+}
+
+.om-empty__title {
+  margin: 0;
+  font-size: var(--om-font-size-md);
+  font-weight: 500;
+  color: var(--ion-color-dark);
+}
+
+.om-empty__desc {
+  margin: 0;
+  font-size: var(--om-font-size-sm);
+  color: var(--ion-color-medium);
+  max-width: 280px;
+  line-height: 1.5;
+}
+
+.om-empty__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--om-spacing-sm);
+  width: 100%;
+  max-width: 240px;
+  margin-top: var(--om-spacing-sm);
+}
+
+.om-empty__actions ion-button {
+  width: 100%;
+}