@omit-design/preset-mobile 0.1.0

package/PATTERNS.md

@@ -0,0 +1,134 @@
+# omit-design preset-mobile — 设计模式目录
+
+所有业务页面(`design/**/*.tsx`)必须从这里挑一个模式作为骨架,并在文件头标注 `// @pattern: <name>`。
+
+新增模式 → 用 `.claude/skills/add-pattern`。
+
+每个 pattern 都有可复制的 **Template**。`new-design` skill 优先复制对应模板,再替换占位符。
+
+---
+
+## list-view
+
+**用途**:一屏内展示同质条目的集合,每个条目可点击进详情。
+
+**骨架**:
+- `OmHeader` — 标题(含或不含返回)
+- 可选:`OmSearchBar` / tab 条 / 分类胶囊
+- `IonList` 或原生 `div` 包裹一组行(`OmListRow` / `OmCouponCard` / `OmSettingRow` / 自定义卡)
+- 列表空态:`OmEmptyState` 居中提示
+
+**Template**:[./templates/list-view.tmpl.tsx](./templates/list-view.tmpl.tsx)
+
+**何时不用**:条目数 ≤ 3 → 用 `dashboard` 或单独卡片
+
+---
+
+## detail-view
+
+**用途**:从列表跳进的单条详情,通常带主操作按钮。
+
+**骨架**:
+- `OmHeader` + `IonBackButton`(返回上一级)
+- `OmCard`(基本信息)
+- 0~N 个 `OmCard` / 列表分块(关联信息分区)
+- 底部 1 个主操作 `OmButton expand="block"` 或「取消 / 确认」双按钮
+
+**Template**:[./templates/detail-view.tmpl.tsx](./templates/detail-view.tmpl.tsx)
+
+**何时不用**:编辑场景 → 用 `form-view`
+
+---
+
+## form-view
+
+**用途**:新建或编辑一条记录。
+
+**骨架**:
+- `OmHeader` + `IonBackButton`(返回/取消)
+- 一组 `OmInput` / `OmSelect`,按业务分组
+- 内联错误态(红框 + 红色辅助文案)
+- 底部固定 `OmButton expand="block"` 提交
+- 可选:提交结果用 `OmDialog` 弹出
+
+**Template**:[./templates/form-view.tmpl.tsx](./templates/form-view.tmpl.tsx)
+
+---
+
+## sheet-action
+
+**用途**:从底部弹起的操作菜单 / 详情抽屉,避免离开当前上下文。设计稿语境下不走 JS 回调,而是每个 sheet 一张独立稿(同 `dialog-view` 哲学)。
+
+**骨架**:
+- `OmPage padding="none"`
+- `OmSheet title="..." dismissHref="..."` 内部放:
+  - 一组按钮条(菜单形态)
+  - 或纯信息块(明细形态)
+- 关闭行为:点击 scrim / 右上 × / 菜单条任意一项跳转走
+
+**Template**:[./templates/sheet-action.tmpl.tsx](./templates/sheet-action.tmpl.tsx)
+
+**何时不用**:只展示一句提示 + 单按钮 → `dialog-view`;需要录入 → `form-view`
+
+---
+
+## dialog-view
+
+**用途**:把一个"对话框状态"当成一张独立的设计稿。设计稿工具语境下,弹窗不是 JS 回调,而是一张可独立访问的稿 — 每个状态有 URL、侧边目录里可点。
+
+**骨架**:
+- `OmPage padding="none" header={<OmHeader .../>}`(通常复用来源页的 header)
+- 背景层:来源页的 frozen 快照(表单禁用,仅作视觉背景),或纯渐变背景
+- `OmDialog` — icon / title / subtitle + 一个主按钮;按钮通过 `confirmHref` 跳转到下一张稿
+
+**Template**:[./templates/dialog-view.tmpl.tsx](./templates/dialog-view.tmpl.tsx)
+
+**何时不用**:需要输入 / 选项 → 独立 `form-view`;纯操作菜单 → `sheet-action`
+
+---
+
+## welcome-view
+
+**用途**:启动 / 欢迎 / 引导页。品牌 logo + 一句话欢迎语 + 单一主 CTA。不接任何表单。
+
+**骨架**:
+- `OmPage padding="none"` 自己控制留白
+- 品牌头区:LOGO + 品名(可含副标题)
+- 欢迎语:主标题 + 描述
+- 底部单一 `OmButton expand="block"` 主操作
+- 可选:最底部版本号
+
+**Template**:[./templates/welcome-view.tmpl.tsx](./templates/welcome-view.tmpl.tsx)
+
+**何时不用**:带输入 → `form-view`;功能介绍多屏滑动 → 需新增 `onboarding-carousel` 模式
+
+---
+
+## dashboard
+
+**用途**:工作台 / 首页式聚合页 — 顶部状态指标(数字卡)+ 功能宫格入口。
+非 tab 导航、非列表、非表单,而是多入口聚合。
+
+**骨架**:
+- `OmHeader` + 返回
+- 若干 `OmStatCard`(指标区)
+- 3 列 `OmMenuCard` 宫格(主功能入口,可用 `disabled + badge="二期"` 标灰态)
+
+**Template**:[./templates/dashboard.tmpl.tsx](./templates/dashboard.tmpl.tsx)
+
+**何时不用**:单一主操作 → `welcome-view`;扁平列表 → `list-view`
+
+---
+
+## tab-view
+
+**用途**:底部主导航 tab 之一 — 主品牌 header + 主体内容 + 底部 4 个 tab 切换。
+
+**骨架**:
+- `OmAppBar variant="brand"` 顶部品牌标题 + 右上角头像
+- 主体内容(表单 / 列表 / 卡片 / 空态)
+- 底部 `OmTabBar` 多个主 tab
+
+**Template**:[./templates/tab-view.tmpl.tsx](./templates/tab-view.tmpl.tsx)
+
+**何时不用**:无底部 tab 导航(如独立表单页)→ `form-view`

package/README.md

@@ -0,0 +1,29 @@
+# @omit-design/preset-mobile
+
+omit-design 的默认移动端 preset:Om* 组件白名单 + `--om-*` token 体系 + Ionic 8 运行时。
+
+## 三条硬规则(由 [@omit-design/eslint-plugin](../eslint-plugin/) 强制)
+
+1. **Token 优先**:所有颜色、间距、字号、圆角、阴影必须走 token,**禁止字面量**(`#FF6B00`、`12px`、`16px` 等都不允许出现在业务代码里)
+2. **组件白名单**:业务页面(`design/**`)只能 import `@omit-design/preset-mobile`,**禁止**直接 import `@ionic/react`(例外:`IonList` / `IonBackButton` / `IonIcon`,仅做排版/图标宿主)
+3. **模式标注**:每个业务页面文件头第一行必须是 `// @pattern: <name>`,name 必须存在于 [PATTERNS.md](./PATTERNS.md)
+
+## 组件清单
+
+21 个 Om* 组件,全部从 `@omit-design/preset-mobile` 导出:
+
+`OmPage` `OmHeader` `OmAppBar` `OmButton` `OmCard` `OmListRow` `OmInput` `OmSelect` `OmDialog` `OmTabBar` `OmNumpad` `OmSearchBar` `OmProductCard` `OmEmptyState` `OmTag` `OmOrderFooter` `OmCouponCard` `OmStatCard` `OmMenuCard` `OmSettingRow` `OmSheet`
+
+详见 [components/index.ts](./components/index.ts)。
+
+## 设计模式
+
+8 个开箱即用的 pattern,每个有可复制的 template:
+
+`list-view` `detail-view` `form-view` `sheet-action` `dialog-view` `welcome-view` `dashboard` `tab-view`
+
+详见 [PATTERNS.md](./PATTERNS.md)。
+
+## Token 命名
+
+`--om-color-*` `--om-spacing-*` `--om-radius-*` `--om-font-size-*` `--om-shadow-*` 详见 [theme/variables.css](./theme/variables.css)。

package/catalog.tsx

@@ -0,0 +1,365 @@
+/**
+ * preset-mobile 组件目录 —— 主题编辑器 WYSIWYG 预览用。
+ * 这个文件不受 ESLint whitelist 约束(属于 preset,不是业务稿)。
+ */
+
+import { cartOutline, gridOutline, personOutline } from "ionicons/icons";
+import type { CatalogGroup } from "@omit-design/engine/registry";
+import {
+  OmButton,
+  OmCard,
+  OmTag,
+  OmListRow,
+  OmInput,
+  OmSearchBar,
+  OmStatCard,
+  OmProductCard,
+  OmMenuCard,
+  OmTabBar,
+  OmEmptyState,
+  OmSettingRow,
+  OmOrderFooter,
+  OmCouponCard,
+} from "./components";
+
+export const catalog: CatalogGroup[] = [
+  // ─── 基础 ────────────────────────────────────────────────────────────────
+  {
+    id: "foundation",
+    label: "基础",
+    icon: "🎨",
+    items: [
+      {
+        id: "colors",
+        name: "颜色 / Colors",
+        description: "当前主题的语义色",
+        render: () => (
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+            {[
+              { key: "primary",   cssVar: "--ion-color-primary"   },
+              { key: "secondary", cssVar: "--ion-color-secondary" },
+              { key: "success",   cssVar: "--ion-color-success"   },
+              { key: "warning",   cssVar: "--ion-color-warning"   },
+              { key: "danger",    cssVar: "--ion-color-danger"    },
+              { key: "dark",      cssVar: "--ion-color-dark"      },
+              { key: "medium",    cssVar: "--ion-color-medium"    },
+              { key: "light",     cssVar: "--ion-color-light"     },
+            ].map((c) => (
+              <div key={c.key} style={{ textAlign: "center" }}>
+                <div
+                  style={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: "var(--om-radius-full)",
+                    background: `var(${c.cssVar})`,
+                    border: "1px solid rgba(0,0,0,0.1)",
+                    marginBottom: 4,
+                  }}
+                />
+                <div style={{ fontSize: 10, color: "#999" }}>{c.key}</div>
+              </div>
+            ))}
+          </div>
+        ),
+      },
+      {
+        id: "spacing",
+        name: "间距 / Spacing",
+        description: "spacing token 视觉参考",
+        render: () => (
+          <div style={{ display: "flex", flexDirection: "column", gap: 6, width: "100%" }}>
+            {[
+              { key: "xs", cssVar: "--om-spacing-xs" },
+              { key: "sm", cssVar: "--om-spacing-sm" },
+              { key: "md", cssVar: "--om-spacing-md" },
+              { key: "lg", cssVar: "--om-spacing-lg" },
+              { key: "xl", cssVar: "--om-spacing-xl" },
+              { key: "2xl", cssVar: "--om-spacing-2xl" },
+            ].map((s) => (
+              <div key={s.key} style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <div
+                  style={{
+                    height: 12,
+                    width: `var(${s.cssVar})`,
+                    minWidth: `var(${s.cssVar})`,
+                    background: "var(--ion-color-primary)",
+                    borderRadius: 2,
+                    opacity: 0.7,
+                  }}
+                />
+                <span style={{ fontSize: 11, color: "#999" }}>{s.key}</span>
+              </div>
+            ))}
+          </div>
+        ),
+      },
+    ],
+  },
+
+  // ─── 按钮 ────────────────────────────────────────────────────────────────
+  {
+    id: "button",
+    label: "按钮",
+    icon: "🔲",
+    items: [
+      {
+        id: "button-variants",
+        name: "OmButton",
+        description: "solid / outline / clear × 颜色",
+        render: () => (
+          <div style={{ display: "flex", flexDirection: "column", gap: 8, width: "100%" }}>
+            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+              <OmButton color="primary">Primary</OmButton>
+              <OmButton color="primary" variant="outline">Outline</OmButton>
+              <OmButton color="primary" variant="clear">Clear</OmButton>
+            </div>
+            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+              <OmButton color="secondary">Secondary</OmButton>
+              <OmButton color="danger">Danger</OmButton>
+              <OmButton color="primary" disabled>Disabled</OmButton>
+            </div>
+            <OmButton color="primary" expand="block">Block 按钮</OmButton>
+          </div>
+        ),
+      },
+    ],
+  },
+
+  // ─── 输入 ────────────────────────────────────────────────────────────────
+  {
+    id: "input",
+    label: "输入",
+    icon: "✏️",
+    items: [
+      {
+        id: "input-basic",
+        name: "OmInput",
+        description: "文本输入框（正常 + 错误态）",
+        render: () => (
+          <div style={{ display: "flex", flexDirection: "column", gap: 8, width: "100%" }}>
+            <OmInput label="商品名称" placeholder="请输入商品名称" />
+            <OmInput label="价格" placeholder="0.00" type="number" />
+            <OmInput label="手机号" value="138****8888" errorText="格式不正确" />
+          </div>
+        ),
+      },
+      {
+        id: "search-bar",
+        name: "OmSearchBar",
+        description: "圆角胶囊搜索框",
+        render: () => (
+          <div style={{ width: "100%" }}>
+            <OmSearchBar placeholder="搜索商品名称…" />
+          </div>
+        ),
+      },
+    ],
+  },
+
+  // ─── 卡片 ────────────────────────────────────────────────────────────────
+  {
+    id: "card",
+    label: "卡片",
+    icon: "🃏",
+    items: [
+      {
+        id: "card-basic",
+        name: "OmCard",
+        description: "通用内容卡片",
+        render: () => (
+          <OmCard title="今日营业额" subtitle="含 2 笔待支付">
+            <div style={{ fontSize: 28, fontWeight: 700, color: "var(--ion-color-primary)" }}>
+              ¥ 12,480.50
+            </div>
+          </OmCard>
+        ),
+      },
+      {
+        id: "stat-card",
+        name: "OmStatCard",
+        description: "核心数字指标卡",
+        render: () => (
+          <div style={{ display: "flex", gap: 8, width: "100%" }}>
+            <OmStatCard label="今日订单" value="128" caption="+12 较昨日" />
+            <OmStatCard label="客单价" value="¥97.5" caption="↑ 3.2%" />
+          </div>
+        ),
+      },
+      {
+        id: "product-card",
+        name: "OmProductCard",
+        description: "商品卡（含加购按钮）",
+        render: () => (
+          <OmProductCard
+            name="奥利奥饼干 256g"
+            sku="SKU-001"
+            price={12.5}
+            unit="件"
+            stock={208}
+          />
+        ),
+      },
+      {
+        id: "menu-card",
+        name: "OmMenuCard",
+        description: "宫格快捷入口卡",
+        render: () => (
+          <div style={{ display: "flex", gap: 8 }}>
+            <OmMenuCard icon={cartOutline} label="收银" />
+            <OmMenuCard icon={personOutline} label="会员" />
+            <OmMenuCard icon={gridOutline} label="商品" badge={3} />
+          </div>
+        ),
+      },
+      {
+        id: "coupon-card",
+        name: "OmCouponCard",
+        description: "优惠券 / 奖励卡片",
+        render: () => (
+          <div style={{ display: "flex", flexDirection: "column", gap: 8, width: "100%" }}>
+            <OmCouponCard
+              valueLabel="¥20"
+              unitLabel="代金券"
+              title="满 100 减 20"
+              condition="全场通用"
+              expireDate="2026-12-31"
+            />
+            <OmCouponCard
+              valueLabel="8.5"
+              unitLabel="折"
+              title="85折优惠"
+              selected
+            />
+          </div>
+        ),
+      },
+    ],
+  },
+
+  // ─── 列表 ────────────────────────────────────────────────────────────────
+  {
+    id: "list",
+    label: "列表",
+    icon: "📋",
+    items: [
+      {
+        id: "list-row",
+        name: "OmListRow",
+        description: "通用列表行（左右 slot）",
+        render: () => (
+          <div style={{ width: "100%" }}>
+            <OmListRow title="桌号 A01" detail="2人 · 30 min" trailing="已点" />
+            <OmListRow title="会员手机号" trailing="138****8888" />
+            <OmListRow title="收银员" trailing="张三" />
+          </div>
+        ),
+      },
+      {
+        id: "setting-row",
+        name: "OmSettingRow",
+        description: "设置行（toggle / navigate）",
+        render: () => (
+          <div style={{ width: "100%" }}>
+            <OmSettingRow label="打印小票" kind="toggle" enabled={true} />
+            <OmSettingRow label="结账方式" kind="navigate" />
+            <OmSettingRow label="声音提示" kind="toggle" enabled={false} description="结账完成时播放提示音" />
+          </div>
+        ),
+      },
+    ],
+  },
+
+  // ─── 标签 ────────────────────────────────────────────────────────────────
+  {
+    id: "badge",
+    label: "标签",
+    icon: "🏷️",
+    items: [
+      {
+        id: "tag-colors",
+        name: "OmTag",
+        description: "状态标签 —— 语义色",
+        render: () => (
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+            <OmTag color="primary">已完成</OmTag>
+            <OmTag color="secondary">进行中</OmTag>
+            <OmTag color="success">已支付</OmTag>
+            <OmTag color="warning">待处理</OmTag>
+            <OmTag color="danger">已取消</OmTag>
+            <OmTag color="medium">草稿</OmTag>
+          </div>
+        ),
+      },
+    ],
+  },
+
+  // ─── 导航 ────────────────────────────────────────────────────────────────
+  {
+    id: "nav",
+    label: "导航",
+    icon: "🧭",
+    items: [
+      {
+        id: "tab-bar",
+        name: "OmTabBar",
+        description: "底部 Tab 导航条",
+        render: () => (
+          <div style={{ width: "100%" }}>
+            <OmTabBar
+              items={[
+                { tab: "sales",      href: "#", label: "销售",  icon: cartOutline   },
+                { tab: "workstation", href: "#", label: "工作台", icon: gridOutline   },
+                { tab: "member",     href: "#", label: "会员",  icon: personOutline },
+              ]}
+            />
+          </div>
+        ),
+      },
+    ],
+  },
+
+  // ─── 操作 ────────────────────────────────────────────────────────────────
+  {
+    id: "action",
+    label: "操作",
+    icon: "⚡",
+    items: [
+      {
+        id: "order-footer",
+        name: "OmOrderFooter",
+        description: "购物车 / 结账底部操作栏",
+        render: () => (
+          <div style={{ width: "100%" }}>
+            <OmOrderFooter
+              primaryAmount="¥128.50"
+              ctaLabel="结算 (3)"
+              cartCount={3}
+              layout="amount-split"
+            />
+          </div>
+        ),
+      },
+    ],
+  },
+
+  // ─── 空态 ────────────────────────────────────────────────────────────────
+  {
+    id: "empty",
+    label: "空态",
+    icon: "🫙",
+    items: [
+      {
+        id: "empty-state",
+        name: "OmEmptyState",
+        description: "无数据 / 搜索结果为空",
+        render: () => (
+          <OmEmptyState
+            icon="🔍"
+            title="没有找到商品"
+            description="请尝试其他关键词"
+          />
+        ),
+      },
+    ],
+  },
+];

package/components/OmAppBar.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+import { IonIcon } from "@ionic/react";
+import { storefront } from "ionicons/icons";
+import { inspectAttrs } from "./inspect-attrs";
+import "./om-app-bar.css";
+
+interface BrandVariantProps {
+  variant: "brand";
+  brandTitle: string;
+  /** 右侧按钮组（IonIcon 按钮等） */
+  right?: ReactNode;
+  /** 右侧头像 slot（圆形） */
+  avatar?: ReactNode;
+}
+
+interface StoreVariantProps {
+  variant?: "store";
+  /** 门店名 + 门店编码：e.g. "文庙后街店（01001-029）" */
+  storeTitle: string;
+  /** 银台描述：e.g. "银台（0048）" */
+  tillTitle: string;
+  /** 右侧按钮组（扫码 / 更多） */
+  right?: ReactNode;
+}
+
+type OmAppBarProps = BrandVariantProps | StoreVariantProps;
+
+/**
+ * POS 应用级 header。
+ * - `variant="store"` —— 销售主页：显示门店 + 银台 + 右侧图标区。
+ * - `variant="brand"` —— 商户中心：显示品牌 logo 文案 + 右侧头像/按钮。
+ *
+ * 作为 `<OmPage header={...}>` 的传参，与 IonContent 同级，不随内容滚动。
+ */
+export function OmAppBar(props: OmAppBarProps) {
+  if (props.variant === "brand") {
+    const { brandTitle, right, avatar } = props;
+    return (
+      <div className="om-app-bar pos-app-bar--brand" {...inspectAttrs("OmAppBar", { bg: "background", spacing: "lg" })}>
+        <div className="om-app-bar__brand">
+          <IonIcon icon={storefront} color="primary" className="om-app-bar__brand-icon" aria-hidden />
+          <span className="om-app-bar__brand-title">{brandTitle}</span>
+        </div>
+        <div className="om-app-bar__right">
+          {right}
+          {avatar && <div className="om-app-bar__avatar">{avatar}</div>}
+        </div>
+      </div>
+    );
+  }
+
+  const { storeTitle, tillTitle, right } = props;
+  return (
+    <div className="om-app-bar pos-app-bar--store" {...inspectAttrs("OmAppBar", { bg: "background", spacing: "lg" })}>
+      <div className="om-app-bar__info">
+        <p className="om-app-bar__info-primary">{storeTitle}</p>
+        <p className="om-app-bar__info-secondary">{tillTitle}</p>
+      </div>
+      <div className="om-app-bar__divider" aria-hidden />
+      <div className="om-app-bar__right">{right}</div>
+    </div>
+  );
+}

package/components/OmButton.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { IonButton } from "@ionic/react";
+import { inspectAttrs } from "./inspect-attrs";
+import type { ColorTokenName } from "../tokens";
+
+type OmButtonVariant = "solid" | "outline" | "clear";
+type OmButtonSize = "small" | "default" | "large";
+
+interface OmButtonProps {
+  children: ReactNode;
+  variant?: OmButtonVariant;
+  size?: OmButtonSize;
+  color?: ColorTokenName;
+  expand?: "block" | "full";
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export function OmButton({
+  children,
+  variant = "solid",
+  size = "default",
+  color = "primary",
+  expand,
+  disabled,
+  onClick,
+}: OmButtonProps) {
+  return (
+    <IonButton
+      fill={variant === "solid" ? "solid" : variant === "outline" ? "outline" : "clear"}
+      size={size}
+      color={color}
+      expand={expand}
+      disabled={disabled}
+      onClick={onClick}
+      {...inspectAttrs("OmButton", { color, radius: "md" })}
+    >
+      {children}
+    </IonButton>
+  );
+}

package/components/OmCard.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from "@ionic/react";
+import { inspectAttrs } from "./inspect-attrs";
+
+interface OmCardProps {
+  title?: string;
+  subtitle?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+}
+
+export function OmCard({ title, subtitle, children, onClick }: OmCardProps) {
+  return (
+    <IonCard
+      button={!!onClick}
+      onClick={onClick}
+      {...inspectAttrs("OmCard", { bg: "background", radius: "lg", shadow: "md" })}
+    >
+      {(title || subtitle) && (
+        <IonCardHeader>
+          {subtitle && <IonCardSubtitle>{subtitle}</IonCardSubtitle>}
+          {title && <IonCardTitle>{title}</IonCardTitle>}
+        </IonCardHeader>
+      )}
+      {children && <IonCardContent>{children}</IonCardContent>}
+    </IonCard>
+  );
+}