@omit-design/preset-mobile 0.1.0

package/components/om-tag.css

@@ -0,0 +1,51 @@
+/* OmTag —— chip / badge / 标签 */
+
+.om-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--om-spacing-xs);
+  border-radius: var(--om-radius-sm);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.om-tag--sm {
+  font-size: var(--om-font-size-xs);
+  padding: 2px var(--om-spacing-sm);
+  height: 20px;
+}
+
+.om-tag--md {
+  font-size: var(--om-font-size-sm);
+  padding: 4px var(--om-spacing-sm);
+  height: 24px;
+}
+
+/* 颜色通过 data-color 映射到对应 token 色。
+   solid：深色填充 + 反色文字；soft：浅色底 + token 色文字；outline：透明底 + 描边。 */
+.om-tag--solid[data-color="primary"] { background: var(--ion-color-primary); color: var(--ion-color-primary-contrast); }
+.om-tag--solid[data-color="success"] { background: var(--ion-color-success); color: var(--ion-color-success-contrast); }
+.om-tag--solid[data-color="warning"] { background: var(--ion-color-warning); color: var(--ion-color-warning-contrast); }
+.om-tag--solid[data-color="danger"]  { background: var(--ion-color-danger);  color: var(--ion-color-danger-contrast); }
+.om-tag--solid[data-color="tertiary"]{ background: var(--ion-color-tertiary); color: var(--ion-color-tertiary-contrast); }
+.om-tag--solid[data-color="medium"]  { background: var(--ion-color-medium);  color: var(--ion-color-medium-contrast); }
+
+.om-tag--soft[data-color="primary"]  { background: var(--om-surface-primary-soft); color: var(--ion-color-primary); }
+.om-tag--soft[data-color="success"]  { background: rgba(var(--ion-color-success-rgb),  0.12); color: var(--ion-color-success); }
+.om-tag--soft[data-color="warning"]  { background: rgba(var(--ion-color-warning-rgb),  0.12); color: var(--ion-color-warning); }
+.om-tag--soft[data-color="danger"]   { background: rgba(var(--ion-color-danger-rgb),   0.12); color: var(--ion-color-danger); }
+.om-tag--soft[data-color="tertiary"] { background: rgba(var(--ion-color-tertiary-rgb), 0.12); color: var(--ion-color-tertiary); }
+.om-tag--soft[data-color="medium"]   { background: var(--ion-color-light); color: var(--ion-color-medium-shade); }
+
+.om-tag--outline {
+  background: transparent;
+  border: 1px solid currentColor;
+}
+.om-tag--outline[data-color="primary"]  { color: var(--ion-color-primary); }
+.om-tag--outline[data-color="success"]  { color: var(--ion-color-success); }
+.om-tag--outline[data-color="warning"]  { color: var(--ion-color-warning); }
+.om-tag--outline[data-color="danger"]   { color: var(--ion-color-danger); }
+.om-tag--outline[data-color="tertiary"] { color: var(--ion-color-tertiary); }
+.om-tag--outline[data-color="medium"]   { color: var(--ion-color-medium-shade); }

package/index.ts

@@ -0,0 +1,14 @@
+/**
+ * preset-mobile barrel — 业务稿 / App 入口通过单次 `import "@omit-design/preset-mobile"`
+ * 就能拿到组件白名单 + 注入 token CSS + Ionic 运行时。
+ *
+ * CSS import 是故意的 side effect:preset 自包含,engine mount 时不需要关心
+ * "哪些 CSS 要注入"。
+ */
+
+// Token 变量（side-effect）
+import "./theme/variables.css";
+
+export * from "./components";
+export { presetMobileManifest } from "./preset.manifest";
+export { presetMobileManifest as default } from "./preset.manifest";

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@omit-design/preset-mobile",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Mobile design preset for omit-design: Om* whitelist components, --om-* / --ion-* token map, Ionic 8 runtime.",
+  "main": "./index.ts",
+  "sideEffects": [
+    "*.css",
+    "./index.ts"
+  ],
+  "exports": {
+    ".": "./index.ts",
+    "./components": "./components/index.ts",
+    "./tokens": "./tokens/index.ts",
+    "./preset.manifest": "./preset.manifest.ts",
+    "./theme/variables.css": "./theme/variables.css",
+    "./templates/*": "./templates/*",
+    "./PATTERNS.md": "./PATTERNS.md"
+  },
+  "files": [
+    "index.ts",
+    "components",
+    "tokens",
+    "theme",
+    "templates",
+    "preset.manifest.ts",
+    "catalog.tsx",
+    "PATTERNS.md",
+    "README.md"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leefanv/omit-design.git",
+    "directory": "packages/preset-mobile"
+  },
+  "homepage": "https://github.com/leefanv/omit-design/tree/main/packages/preset-mobile#readme",
+  "bugs": "https://github.com/leefanv/omit-design/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@ionic/react": "^8",
+    "ionicons": "^7 || ^8",
+    "react": "^19",
+    "react-router-dom": "^6"
+  }
+}

package/preset.manifest.ts

@@ -0,0 +1,62 @@
+/**
+ * preset-mobile manifest — engine 通过这个对象决定怎么对待 mobile 项目。
+ * 见 [../engine/src/preset/types.ts](../engine/src/preset/types.ts) 里的 PresetManifest 接口注释。
+ */
+
+import type { PresetManifest } from "@omit-design/engine/preset";
+import { baseline } from "./theme/baseline";
+
+export const presetMobileManifest: PresetManifest = {
+  name: "mobile",
+  displayName: "Mobile (Ionic)",
+  componentPrefix: "Om",
+  attributeName: "data-omit-component",
+  tokenPrefixes: {
+    color: "--ion-color-",
+    spacing: "--om-spacing-",
+    radius: "--om-radius-",
+    font: "--om-font-size-",
+    shadow: "--om-shadow-",
+  },
+  canvas: {
+    default: { width: 390, height: 844 },
+    presets: [
+      { label: "iPhone 14", width: 390, height: 844 },
+      { label: "iPhone 14 Pro Max", width: 430, height: 932 },
+      { label: "iPhone SE", width: 375, height: 667 },
+      { label: "iPhone 12 mini", width: 360, height: 780 },
+      { label: "Pixel 7", width: 412, height: 915 },
+      { label: "Galaxy S20", width: 360, height: 800 },
+      { label: "iPad mini", width: 744, height: 1133 },
+    ],
+    chrome: "mobile",
+  },
+  requiresIonic: true,
+  a11ySelectors: {
+    clickable: [
+      "button",
+      "a",
+      "[role='button']",
+      "input",
+      "ion-button",
+      "ion-item[button]",
+      "[data-omit-component='OmButton']",
+      "[data-omit-component='OmListRow']",
+    ],
+  },
+  semanticColors: [
+    "primary",
+    "secondary",
+    "tertiary",
+    "success",
+    "warning",
+    "danger",
+    "dark",
+    "medium",
+    "light",
+  ],
+  themeBaseline: {
+    colors: { ...baseline.colors },
+    spacing: { ...baseline.spacing },
+  },
+};

package/templates/dashboard.tmpl.tsx

@@ -0,0 +1,90 @@
+// @pattern: dashboard
+// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
+//   1. 替换 meta + hero 文案
+//   2. STATS / TILES 换成真实 mock import
+//   3. 给 TILES 加合适 ionicons + href
+
+export const meta = {
+  name: "TODO 工作台",
+  pattern: "dashboard",
+  description: "TODO 一句话描述",
+  source: "prd",
+} as const;
+
+import { IonBackButton } from "@ionic/react";
+import {
+  appsOutline,
+  cashOutline,
+  receiptOutline,
+} from "ionicons/icons";
+import {
+  OmHeader,
+  OmMenuCard,
+  OmPage,
+  OmStatCard,
+} from "@omit-design/preset-mobile";
+
+interface Stat {
+  label: string;
+  value: string;
+  caption?: string;
+}
+
+interface Tile {
+  id: string;
+  icon: string;
+  label: string;
+  href?: string;
+  disabled?: boolean;
+  badge?: string;
+}
+
+// TODO: 替换为真实 mock import
+const STATS: Stat[] = [
+  { label: "今日营收", value: "¥0.00", caption: "含已结金额" },
+  { label: "客单量", value: "0", caption: "单数" },
+];
+
+const TILES: Tile[] = [
+  { id: "pos", icon: cashOutline, label: "POS", href: "/designs/TODO" },
+  { id: "orders", icon: receiptOutline, label: "订单", href: "/designs/TODO" },
+];
+
+export function TodoDashboardPage() {
+  return (
+    <OmPage
+      padding="lg"
+      header={
+        <OmHeader
+          title="TODO 工作台"
+          start={<IonBackButton defaultHref="/designs/TODO-from" />}
+        />
+      }
+    >
+      <div>
+        {STATS.map((s) => (
+          <OmStatCard
+            key={s.label}
+            label={s.label}
+            value={s.value}
+            caption={s.caption}
+          />
+        ))}
+      </div>
+
+      <div>
+        {TILES.map((t) => (
+          <OmMenuCard
+            key={t.id}
+            icon={t.icon ?? appsOutline}
+            label={t.label}
+            href={t.href}
+            disabled={t.disabled}
+            badge={t.badge}
+          />
+        ))}
+      </div>
+    </OmPage>
+  );
+}
+export default TodoDashboardPage;

package/templates/detail-view.tmpl.tsx

@@ -0,0 +1,60 @@
+// @pattern: detail-view
+// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
+//   1. 替换 meta + 字段
+//   2. 把 RECORD 换成真实 mock import
+//   3. 调整 IonBackButton 的 defaultHref
+//   4. 主操作改成业务跳转
+
+export const meta = {
+  name: "TODO 详情页名",
+  pattern: "detail-view",
+  description: "TODO 一句话描述",
+  source: "prd",
+} as const;
+
+import { IonBackButton } from "@ionic/react";
+import {
+  OmButton,
+  OmCard,
+  OmHeader,
+  OmPage,
+} from "@omit-design/preset-mobile";
+
+interface Record {
+  id: string;
+  title: string;
+  amount: number;
+  status: string;
+}
+
+// TODO: 替换为真实 mock import
+const RECORD: Record = {
+  id: "TODO",
+  title: "示例标题",
+  amount: 0,
+  status: "TODO 状态",
+};
+
+export function TodoDetailPage() {
+  return (
+    <OmPage
+      padding="lg"
+      header={
+        <OmHeader
+          title="TODO 详情"
+          start={<IonBackButton defaultHref="/designs/TODO" />}
+        />
+      }
+    >
+      <OmCard title={RECORD.title} subtitle={`#${RECORD.id}`}>
+        <p>金额:¥{RECORD.amount.toFixed(2)}</p>
+        <p>状态:{RECORD.status}</p>
+      </OmCard>
+
+      {/* TODO: 关联信息分块 —— 增加更多 OmCard */}
+
+      <OmButton expand="block">主操作</OmButton>
+    </OmPage>
+  );
+}
+export default TodoDetailPage;

package/templates/dialog-view.tmpl.tsx

@@ -0,0 +1,34 @@
+// @pattern: dialog-view
+// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
+//   1. 替换 meta
+//   2. icon 用合适的 ionicons
+//   3. cancelHref / confirmHref 指向真实路由
+//   4. iconColor / confirmColor 按场景设(danger / warning / success / primary)
+
+export const meta = {
+  name: "TODO 对话框",
+  pattern: "dialog-view",
+  description: "TODO 一句话描述",
+  source: "prd",
+} as const;
+
+import { informationCircleOutline } from "ionicons/icons";
+import { OmDialog, OmPage } from "@omit-design/preset-mobile";
+
+export function TodoDialogPage() {
+  return (
+    <OmPage padding="none">
+      <OmDialog
+        icon={informationCircleOutline}
+        iconColor="primary"
+        title="TODO 标题"
+        subtitle="TODO 副标题描述。"
+        cancelText="取消"
+        cancelHref="/designs/TODO-from"
+        confirmText="确认"
+        confirmHref="/designs/TODO-next"
+      />
+    </OmPage>
+  );
+}
+export default TodoDialogPage;

package/templates/form-view.tmpl.tsx

@@ -0,0 +1,52 @@
+// @pattern: form-view
+// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
+//   1. 替换 meta + 字段
+//   2. 调整 useState 初始值与字段标签
+//   3. 提交按钮 navigate 到下一张稿
+//   4. IonBackButton defaultHref 改成上一级
+
+export const meta = {
+  name: "TODO 表单页名",
+  pattern: "form-view",
+  description: "TODO 一句话描述",
+  source: "prd",
+} as const;
+
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { IonBackButton } from "@ionic/react";
+import {
+  OmButton,
+  OmHeader,
+  OmInput,
+  OmPage,
+} from "@omit-design/preset-mobile";
+
+export function TodoFormPage() {
+  const navigate = useNavigate();
+  const [field1, setField1] = useState("");
+  const [field2, setField2] = useState("");
+
+  return (
+    <OmPage
+      padding="lg"
+      header={
+        <OmHeader
+          title="TODO 表单"
+          start={<IonBackButton defaultHref="/designs/TODO" />}
+        />
+      }
+    >
+      <OmInput label="字段一" value={field1} onChange={setField1} />
+      <OmInput label="字段二" value={field2} onChange={setField2} />
+
+      <OmButton
+        expand="block"
+        onClick={() => navigate("/designs/TODO-next")}
+      >
+        提交
+      </OmButton>
+    </OmPage>
+  );
+}
+export default TodoFormPage;

package/templates/list-view.tmpl.tsx

@@ -0,0 +1,58 @@
+// @pattern: list-view
+// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
+//   1. 替换 meta.name / description
+//   2. 把 ITEMS 换成真实 mock import
+//   3. 替换 IonBackButton 的 defaultHref
+//   4. 调整空态文案
+
+export const meta = {
+  name: "TODO 列表页名",
+  pattern: "list-view",
+  description: "TODO 一句话描述",
+  source: "prd",
+} as const;
+
+import { IonBackButton, IonList } from "@ionic/react";
+import {
+  OmEmptyState,
+  OmHeader,
+  OmListRow,
+  OmPage,
+} from "@omit-design/preset-mobile";
+
+interface Item {
+  id: string;
+  title: string;
+  detail?: string;
+}
+
+// TODO: 替换为 import { items } from ""./mock/<group>" 相对路径";
+const ITEMS: Item[] = [
+  { id: "1", title: "示例条目 1", detail: "副信息" },
+  { id: "2", title: "示例条目 2" },
+];
+
+export function TodoListPage() {
+  return (
+    <OmPage
+      padding="none"
+      header={
+        <OmHeader
+          title="TODO 标题"
+          start={<IonBackButton defaultHref="/designs/TODO" />}
+        />
+      }
+    >
+      {ITEMS.length === 0 ? (
+        <OmEmptyState title="暂无数据" description="TODO 空态描述" />
+      ) : (
+        <IonList lines="none">
+          {ITEMS.map((it) => (
+            <OmListRow key={it.id} title={it.title} detail={it.detail} />
+          ))}
+        </IonList>
+      )}
+    </OmPage>
+  );
+}
+export default TodoListPage;

package/templates/sheet-action.tmpl.tsx

@@ -0,0 +1,52 @@
+// @pattern: sheet-action
+// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
+//   1. 替换 meta
+//   2. 替换 ITEMS 为业务菜单项
+//   3. dismissHref 改成来源页路径
+
+export const meta = {
+  name: "TODO 操作菜单",
+  pattern: "sheet-action",
+  description: "TODO 一句话描述",
+  source: "prd",
+} as const;
+
+import { useNavigate } from "react-router-dom";
+import { IonIcon } from "@ionic/react";
+import { ellipsisHorizontalOutline } from "ionicons/icons";
+import { OmPage, OmSheet } from "@omit-design/preset-mobile";
+
+interface MenuItem {
+  label: string;
+  icon: string;
+  href: string;
+  danger?: boolean;
+}
+
+const ITEMS: MenuItem[] = [
+  { label: "TODO 项一", icon: ellipsisHorizontalOutline, href: "/designs/TODO" },
+  { label: "TODO 项二", icon: ellipsisHorizontalOutline, href: "/designs/TODO" },
+];
+
+export function TodoSheetActionPage() {
+  const navigate = useNavigate();
+  return (
+    <OmPage padding="none">
+      <OmSheet title="TODO 标题" dismissHref="/designs/TODO-from">
+        <div>
+          {ITEMS.map((it) => (
+            <button
+              key={it.label}
+              type="button"
+              onClick={() => navigate(it.href)}
+            >
+              <IonIcon icon={it.icon} />
+              {it.label}
+            </button>
+          ))}
+        </div>
+      </OmSheet>
+    </OmPage>
+  );
+}
+export default TodoSheetActionPage;

package/templates/tab-view.tmpl.tsx

@@ -0,0 +1,51 @@
+// @pattern: tab-view
+// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
+//   1. 替换 meta + 品牌文案
+//   2. 主体内容替换为业务(列表/表单/空态)
+//   3. TABS 列表通常项目级常量 —— 抽到 shell 文件复用更好
+//
+// 注:tab-view 通常由 MemberShell 等 shell 文件统一管理 OmTabBar。
+// 本 template 展示扁平结构,首批落地后可重构为 shell。
+
+export const meta = {
+  name: "TODO Tab 页",
+  pattern: "tab-view",
+  description: "TODO 一句话描述",
+  source: "prd",
+} as const;
+
+import {
+  cubeOutline,
+  peopleOutline,
+  receiptOutline,
+  settingsOutline,
+} from "ionicons/icons";
+import {
+  OmAppBar,
+  OmPage,
+  OmTabBar,
+  type OmTabItem,
+} from "@omit-design/preset-mobile";
+
+const TABS: OmTabItem[] = [
+  { tab: "stored", href: "/designs/TODO-stored", label: "寄存", icon: cubeOutline },
+  { tab: "orders", href: "/designs/TODO-orders", label: "订单", icon: receiptOutline },
+  { tab: "member", href: "/designs/TODO-member", label: "会员", icon: peopleOutline },
+  { tab: "settings", href: "/designs/TODO-settings", label: "设置", icon: settingsOutline },
+];
+
+export function TodoTabPage() {
+  return (
+    <OmPage
+      padding="lg"
+      header={<OmAppBar variant="brand" brandTitle="TODO 品牌" />}
+    >
+      <div>
+        {/* TODO: 主体内容 —— 表单 / 列表 / 空态 */}
+        <h1>TODO Tab 页主体</h1>
+      </div>
+      <OmTabBar items={TABS} />
+    </OmPage>
+  );
+}
+export default TodoTabPage;

package/templates/welcome-view.tmpl.tsx

@@ -0,0 +1,38 @@
+// @pattern: welcome-view
+// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
+//   1. 替换 meta
+//   2. 接入真实品牌 logo 组件(可选)
+//   3. CTA navigate 到下一张稿
+//   4. tagline / version 走 mock 或常量
+
+export const meta = {
+  name: "TODO 欢迎页",
+  pattern: "welcome-view",
+  description: "TODO 一句话描述",
+  source: "prd",
+} as const;
+
+import { useNavigate } from "react-router-dom";
+import { OmButton, OmPage } from "@omit-design/preset-mobile";
+
+export function TodoWelcomePage() {
+  const navigate = useNavigate();
+
+  return (
+    <OmPage padding="none">
+      {/* TODO: 替换为品牌 logo 组件 */}
+      <div>
+        <h1>Welcome</h1>
+        <p>TODO 欢迎语</p>
+      </div>
+
+      <OmButton
+        expand="block"
+        onClick={() => navigate("/designs/TODO-next")}
+      >
+        开始
+      </OmButton>
+    </OmPage>
+  );
+}
+export default TodoWelcomePage;

package/theme/baseline.ts

@@ -0,0 +1,32 @@
+/**
+ * preset-mobile theme baseline —— theme editor 用这个值作 published 基准。
+ * 历史名 `lightPreset`，2026-04-25 重命名为 baseline 与 desktop 对齐；
+ * 老符号 `lightPreset` 仍 re-export 兼容（[presets/light.ts](./presets/light.ts)）。
+ *
+ * ⚠️ 改 [variables.css](./variables.css) 时同步改这里，否则 baseline 偏移。
+ * 改完 bump engine/theme-editor/store.ts 里的 `version`。
+ */
+export const baseline = {
+  name: "Default Light",
+  colors: {
+    primary: "#0d8ce9",
+    secondary: "#00cfff",
+    tertiary: "#e56e35",
+    success: "#22c55e",
+    warning: "#e56e35",
+    danger: "#da342e",
+    dark: "#1f2024",
+    medium: "#90909a",
+    light: "#dbd9e0",
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px",
+    "2xl": "32px",
+  },
+} as const;
+
+export type MobileThemeBaseline = typeof baseline;

package/theme/presets/light.ts

@@ -0,0 +1,8 @@
+/**
+ * @deprecated 用 [../baseline.ts](../baseline.ts) 的 `baseline` 代替，与 desktop 对齐命名。
+ * 留作向后兼容（旧 import 路径仍生效）。
+ */
+import { baseline } from "../baseline";
+
+export const lightPreset = baseline;
+export type ThemePreset = typeof baseline;