@omit-design/preset-mobile 0.1.0

package/components/om-input.css

@@ -0,0 +1,43 @@
+/* OmInput — 与 Figma M3 "outlined text field" 对齐。
+   标签在外、描边框、圆角 md。错误态整条红框 + 底部红色 Note。 */
+
+.om-input {
+  --input-border-color: var(--ion-color-medium-tint);
+}
+
+.om-input--error {
+  --input-border-color: var(--ion-color-danger);
+}
+
+.om-input ion-item {
+  --background: transparent;
+  --border-color: transparent;
+  --padding-start: 0;
+  --inner-padding-end: 0;
+  --min-height: 0;
+}
+
+.om-input ion-label {
+  --color: var(--ion-color-dark);
+  font-size: var(--om-font-size-md) !important;
+  margin-bottom: var(--om-spacing-xs) !important;
+}
+
+.om-input ion-input {
+  --padding-start: var(--om-spacing-md) !important;
+  --padding-end: var(--om-spacing-md) !important;
+  --padding-top: var(--om-spacing-md) !important;
+  --padding-bottom: var(--om-spacing-md) !important;
+  border: 1px solid var(--input-border-color);
+  border-radius: var(--om-radius-md);
+  background: var(--ion-background-color);
+  font-size: var(--om-font-size-md);
+  min-height: 56px;
+}
+
+.om-input ion-note {
+  display: block;
+  margin-top: var(--om-spacing-xs);
+  padding-left: var(--om-spacing-lg);
+  font-size: var(--om-font-size-xs);
+}

package/components/om-menu-card.css

@@ -0,0 +1,68 @@
+/* OmMenuCard —— 工作台宫格卡 */
+
+.om-menu {
+  appearance: none;
+  text-decoration: none;
+  border: none;
+  background: var(--ion-background-color);
+  border-radius: var(--om-radius-lg);
+  padding: var(--om-spacing-lg);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--om-spacing-md);
+  box-shadow: var(--om-shadow-sm);
+  min-height: calc(var(--om-control-height-xl) * 2);
+  cursor: pointer;
+  color: var(--ion-color-dark);
+  position: relative;
+  text-align: left;
+}
+
+.om-menu:active {
+  background: var(--om-surface-primary-softest);
+}
+
+.om-menu--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.om-menu__icon {
+  width: var(--om-control-height-md);
+  height: var(--om-control-height-md);
+  border-radius: var(--om-radius-md);
+  background: var(--om-surface-primary-soft);
+  color: var(--ion-color-primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.om-menu__icon ion-icon {
+  font-size: var(--om-icon-size-lg);
+}
+
+.om-menu__label {
+  font-size: var(--om-font-size-md);
+  color: var(--ion-color-dark);
+  font-weight: 500;
+}
+
+.om-menu__badge {
+  position: absolute;
+  top: var(--om-spacing-sm);
+  right: var(--om-spacing-sm);
+  min-width: var(--om-spacing-lg);
+  height: var(--om-spacing-lg);
+  padding: 0 var(--om-spacing-xs);
+  border-radius: var(--om-radius-full);
+  background: var(--ion-color-danger);
+  color: var(--ion-color-danger-contrast);
+  font-size: var(--om-font-size-xs);
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}

package/components/om-numpad.css

@@ -0,0 +1,49 @@
+/* OmNumpad —— 3×4 数字键盘。 */
+
+.om-numpad {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--om-spacing-sm);
+  width: 100%;
+}
+
+.om-numpad__key {
+  appearance: none;
+  border: none;
+  background: var(--ion-background-color);
+  border-radius: var(--om-radius-md);
+  height: var(--om-control-height-xl);
+  font-size: var(--om-font-size-xl);
+  font-weight: 500;
+  color: var(--ion-color-dark);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--om-shadow-sm);
+  min-height: var(--om-touch-comfortable);
+  transition: background 0.12s ease;
+}
+
+.om-numpad__key:active {
+  background: var(--ion-color-light);
+}
+
+.om-numpad__key--ghost {
+  background: transparent;
+  box-shadow: none;
+  color: var(--ion-color-medium-shade);
+  font-size: var(--om-font-size-md);
+}
+
+.om-numpad__key--clear {
+  background: var(--ion-color-light);
+  color: var(--ion-color-dark);
+  font-size: var(--om-font-size-md);
+  box-shadow: none;
+}
+
+.om-numpad__spacer {
+  display: block;
+  height: var(--om-control-height-xl);
+}

package/components/om-order-footer.css

@@ -0,0 +1,121 @@
+/* OmOrderFooter —— 销售主页 / 购物车底部结算栏 */
+
+.om-order-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--om-spacing-sm);
+  padding: var(--om-spacing-sm) var(--om-spacing-md);
+  background: var(--ion-background-color);
+  border-top: 1px solid var(--ion-color-light);
+  /* control-xl + 少量内边距，比标准 tab bar 略高 */
+  min-height: calc(var(--om-control-height-xl) + var(--om-spacing-sm));
+}
+
+.om-order-footer__cart {
+  position: relative;
+  appearance: none;
+  border: none;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--om-control-height-sm);
+  height: var(--om-control-height-sm);
+  flex: 0 0 auto;
+  color: var(--ion-color-dark);
+  cursor: pointer;
+}
+
+.om-order-footer__cart ion-icon {
+  font-size: var(--om-icon-size-lg);
+}
+
+.om-order-footer__badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  min-width: var(--om-spacing-lg);
+  height: var(--om-spacing-lg);
+  padding: 0 var(--om-spacing-xs);
+  border-radius: var(--om-radius-full);
+  background: var(--ion-color-danger);
+  color: var(--ion-color-danger-contrast);
+  font-size: var(--om-font-size-xs);
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.om-order-footer__discount {
+  appearance: none;
+  border: none;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--om-spacing-xs);
+  flex: 1 1 auto;
+  min-width: 0;
+  cursor: pointer;
+  text-align: left;
+}
+
+.om-order-footer__discount-amount {
+  font-size: var(--om-font-size-md);
+  color: var(--ion-color-dark);
+  font-weight: 600;
+}
+
+.om-order-footer__discount-label {
+  font-size: var(--om-font-size-xs);
+  color: var(--ion-color-medium);
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.om-order-footer__discount-label ion-icon {
+  font-size: var(--om-font-size-sm);
+}
+
+.om-order-footer__cta {
+  appearance: none;
+  border: none;
+  background: var(--ion-color-primary);
+  color: var(--ion-color-primary-contrast);
+  border-radius: var(--om-radius-md);
+  height: var(--om-control-height-md);
+  padding: 0 var(--om-spacing-xl);
+  font-size: var(--om-font-size-lg);
+  font-weight: 600;
+  cursor: pointer;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.om-order-footer__cta:active {
+  background: var(--ion-color-primary-shade);
+}
+
+.om-order-footer__cta--compact {
+  padding: 0 var(--om-spacing-lg);
+  height: var(--om-control-height-sm);
+  font-size: var(--om-font-size-md);
+}
+
+.om-order-footer__split {
+  display: flex;
+  align-items: center;
+  gap: var(--om-spacing-md);
+  margin-left: auto;
+}
+
+.om-order-footer__amount {
+  font-size: var(--om-font-size-lg);
+  font-weight: 700;
+  color: var(--ion-color-dark);
+}

package/components/om-page.css

@@ -0,0 +1,43 @@
+/*
+ * OmPage padding utility —— 通过 IonContent 的 --padding-* 变量生效。
+ * 属于设计系统（业务设计稿侧），使用 --om-spacing-* token。
+ */
+
+/* 移动端设计稿里不需要显示滚动条（真机上看不到），Ionic 在桌面浏览器里默认会展示 */
+ion-content::part(scroll) {
+  scrollbar-width: none;
+}
+ion-content::part(scroll)::-webkit-scrollbar {
+  display: none;
+}
+
+.om-page-pad-none {
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+}
+.om-page-pad-sm {
+  --padding-start: var(--om-spacing-sm);
+  --padding-end: var(--om-spacing-sm);
+  --padding-top: var(--om-spacing-sm);
+  --padding-bottom: var(--om-spacing-sm);
+}
+.om-page-pad-md {
+  --padding-start: var(--om-spacing-md);
+  --padding-end: var(--om-spacing-md);
+  --padding-top: var(--om-spacing-md);
+  --padding-bottom: var(--om-spacing-md);
+}
+.om-page-pad-lg {
+  --padding-start: var(--om-spacing-lg);
+  --padding-end: var(--om-spacing-lg);
+  --padding-top: var(--om-spacing-lg);
+  --padding-bottom: var(--om-spacing-lg);
+}
+.om-page-pad-xl {
+  --padding-start: var(--om-spacing-xl);
+  --padding-end: var(--om-spacing-xl);
+  --padding-top: var(--om-spacing-xl);
+  --padding-bottom: var(--om-spacing-xl);
+}

package/components/om-product-card.css

@@ -0,0 +1,124 @@
+/* OmProductCard —— 商品行卡片 */
+
+.om-product {
+  display: flex;
+  gap: var(--om-spacing-md);
+  background: var(--ion-background-color);
+  border-radius: var(--om-radius-md);
+  padding: var(--om-spacing-md);
+  box-shadow: var(--om-shadow-sm);
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.om-product__image {
+  flex: 0 0 auto;
+  /* 80×80 固定缩略图尺寸（Figma 规格），= control-xl + spacing-xl */
+  width: calc(var(--om-control-height-xl) + var(--om-spacing-xl));
+  height: calc(var(--om-control-height-xl) + var(--om-spacing-xl));
+  border-radius: var(--om-radius-md);
+  background: var(--ion-color-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.om-product__emoji {
+  font-size: var(--om-icon-size-hero);
+  line-height: 1;
+}
+
+.om-product__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-sm);
+}
+
+.om-product__titles {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-xs);
+}
+
+.om-product__name {
+  margin: 0;
+  font-size: var(--om-font-size-md);
+  color: var(--ion-color-dark);
+  line-height: 1.25;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.om-product__sku {
+  margin: 0;
+  font-size: var(--om-font-size-xs);
+  color: var(--ion-color-medium);
+}
+
+.om-product__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--om-spacing-sm);
+}
+
+.om-product__price-group {
+  display: flex;
+  align-items: baseline;
+  gap: var(--om-spacing-xs);
+  flex-wrap: wrap;
+}
+
+.om-product__price {
+  color: var(--ion-color-dark);
+  font-weight: 700;
+}
+
+.om-product__price-sign {
+  font-size: var(--om-font-size-sm);
+}
+
+.om-product__price-value {
+  font-size: var(--om-font-size-md);
+}
+
+.om-product__unit {
+  font-size: var(--om-font-size-xs);
+  color: var(--ion-color-medium);
+}
+
+.om-product__stock {
+  font-size: var(--om-font-size-xs);
+  color: var(--ion-color-medium);
+  opacity: 0.7;
+}
+
+.om-product__add {
+  appearance: none;
+  border: none;
+  background: var(--om-surface-primary-soft);
+  color: var(--ion-color-primary);
+  border-radius: var(--om-radius-md);
+  /* 36×36 的加购按钮（比 control-sm=40 小一号，刚好容在卡片右下角） */
+  width: calc(var(--om-control-height-sm) - var(--om-spacing-xs));
+  height: calc(var(--om-control-height-sm) - var(--om-spacing-xs));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+
+.om-product__add:active {
+  background: rgba(var(--ion-color-primary-rgb), 0.24);
+}
+
+.om-product__add ion-icon {
+  font-size: var(--om-icon-size-md);
+}

package/components/om-search-bar.css

@@ -0,0 +1,39 @@
+/* OmSearchBar —— 圆角胶囊搜索输入 */
+
+.om-search-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--om-spacing-sm);
+  background: var(--ion-background-color);
+  border: 1px solid var(--ion-color-light);
+  border-radius: var(--om-radius-full);
+  padding: 0 var(--om-spacing-md);
+  height: var(--om-control-height-sm);
+  width: 100%;
+}
+
+.om-search-bar__icon {
+  font-size: var(--om-font-size-md);
+  color: var(--ion-color-medium);
+  flex: 0 0 auto;
+}
+
+.om-search-bar__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: var(--om-font-size-sm);
+  color: var(--ion-color-dark);
+}
+
+.om-search-bar__input::placeholder {
+  color: var(--ion-color-medium);
+}
+
+.om-search-bar__trailing {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}

package/components/om-select.css

@@ -0,0 +1,28 @@
+/* OmSelect — 与 OmInput 视觉保持一致的下拉选择。 */
+
+.om-select ion-item {
+  --background: transparent;
+  --border-color: transparent;
+  --padding-start: 0;
+  --inner-padding-end: 0;
+  --min-height: 0;
+}
+
+.om-select ion-label {
+  --color: var(--ion-color-dark);
+  font-size: var(--om-font-size-md) !important;
+  margin-bottom: var(--om-spacing-xs) !important;
+}
+
+.om-select ion-select {
+  --padding-start: var(--om-spacing-md);
+  --padding-end: var(--om-spacing-md);
+  --padding-top: var(--om-spacing-md);
+  --padding-bottom: var(--om-spacing-md);
+  border: 1px solid var(--ion-color-medium-tint);
+  border-radius: var(--om-radius-md);
+  background: var(--ion-background-color);
+  font-size: var(--om-font-size-md);
+  min-height: 56px;
+  color: var(--ion-color-dark);
+}

package/components/om-setting-row.css

@@ -0,0 +1,82 @@
+/* OmSettingRow —— 设置行，toggle/navigate/value 三种形态共享布局 */
+
+.om-setting-row {
+  appearance: none;
+  text-decoration: none;
+  border: none;
+  background: var(--ion-background-color);
+  display: flex;
+  align-items: center;
+  gap: var(--om-spacing-md);
+  padding: var(--om-spacing-lg);
+  width: 100%;
+  text-align: left;
+  color: inherit;
+  min-height: var(--om-control-height-xl);
+  border-bottom: 1px solid var(--ion-color-light);
+}
+
+.om-setting-row:last-child {
+  border-bottom: none;
+}
+
+.om-setting-row--interactive {
+  cursor: pointer;
+}
+
+.om-setting-row--interactive:active {
+  background: var(--om-surface-primary-softest);
+}
+
+.om-setting-row__icon {
+  width: var(--om-control-height-sm);
+  height: var(--om-control-height-sm);
+  border-radius: var(--om-radius-md);
+  background: var(--om-surface-primary-soft);
+  color: var(--ion-color-primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.om-setting-row__icon ion-icon {
+  font-size: var(--om-icon-size-md);
+}
+
+.om-setting-row__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-xs);
+}
+
+.om-setting-row__label {
+  font-size: var(--om-font-size-md);
+  color: var(--ion-color-dark);
+}
+
+.om-setting-row__desc {
+  font-size: var(--om-font-size-xs);
+  color: var(--ion-color-medium);
+  line-height: 1.4;
+}
+
+.om-setting-row__right {
+  display: flex;
+  align-items: center;
+  gap: var(--om-spacing-sm);
+  flex: 0 0 auto;
+  color: var(--ion-color-medium-shade);
+}
+
+.om-setting-row__value {
+  font-size: var(--om-font-size-sm);
+  color: var(--ion-color-medium-shade);
+}
+
+.om-setting-row__chevron {
+  font-size: var(--om-icon-size-sm);
+  color: var(--ion-color-medium);
+}

package/components/om-sheet.css

@@ -0,0 +1,73 @@
+/* OmSheet —— 底部抽屉 */
+
+.om-sheet {
+  position: absolute;
+  inset: 0;
+  z-index: 12;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.om-sheet__scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--om-overlay-scrim);
+}
+
+.om-sheet__panel {
+  position: relative;
+  background: var(--ion-background-color);
+  border-top-left-radius: var(--om-radius-xl);
+  border-top-right-radius: var(--om-radius-xl);
+  box-shadow: var(--om-shadow-lg);
+  max-height: 85%;
+  display: flex;
+  flex-direction: column;
+  animation: pos-sheet-in 0.2s ease-out;
+}
+
+.om-sheet__panel--tall {
+  min-height: 70%;
+}
+
+@keyframes pos-sheet-in {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+.om-sheet__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--om-spacing-lg);
+  border-bottom: 1px solid var(--ion-color-light);
+}
+
+.om-sheet__title {
+  font-size: var(--om-font-size-md);
+  font-weight: 600;
+  color: var(--ion-color-dark);
+}
+
+.om-sheet__close {
+  appearance: none;
+  border: none;
+  background: transparent;
+  width: var(--om-control-height-sm);
+  height: var(--om-control-height-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ion-color-medium);
+  cursor: pointer;
+}
+
+.om-sheet__close ion-icon {
+  font-size: var(--om-icon-size-md);
+}
+
+.om-sheet__body {
+  overflow-y: auto;
+  padding: var(--om-spacing-lg);
+}

package/components/om-stat-card.css

@@ -0,0 +1,40 @@
+/* OmStatCard —— 工作台数字指标卡 */
+
+.om-stat {
+  background: var(--ion-background-color);
+  border-radius: var(--om-radius-lg);
+  padding: var(--om-spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-xs);
+  box-shadow: var(--om-shadow-sm);
+}
+
+.om-stat__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--om-spacing-sm);
+}
+
+.om-stat__label {
+  font-size: var(--om-font-size-sm);
+  color: var(--ion-color-medium-shade);
+}
+
+.om-stat__meta {
+  font-size: var(--om-font-size-xs);
+  color: var(--ion-color-medium);
+}
+
+.om-stat__value {
+  font-size: var(--om-font-size-2xl);
+  font-weight: 700;
+  color: var(--ion-color-dark);
+  line-height: 1.15;
+}
+
+.om-stat__caption {
+  font-size: var(--om-font-size-xs);
+  color: var(--ion-color-medium);
+}