@omit-design/preset-mobile 0.1.1 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +108 -15
- package/README.zh-CN.md +123 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,29 +1,122 @@
|
|
|
1
1
|
# @omit-design/preset-mobile
|
|
2
2
|
|
|
3
|
-
omit-design
|
|
3
|
+
> Default mobile preset for [omit-design](https://github.com/leefanv/omit-design): `Om*` whitelist components, `--om-*` token system, Ionic 8 runtime, and 8 ready-to-use patterns with copy-paste templates.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/@omit-design/preset-mobile)
|
|
6
|
+
[](../../LICENSE)
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
2. **组件白名单**:业务页面(`design/**`)只能 import `@omit-design/preset-mobile`,**禁止**直接 import `@ionic/react`(例外:`IonList` / `IonBackButton` / `IonIcon`,仅做排版/图标宿主)
|
|
9
|
-
3. **模式标注**:每个业务页面文件头第一行必须是 `// @pattern: <name>`,name 必须存在于 [PATTERNS.md](./PATTERNS.md)
|
|
8
|
+
[简体中文](./README.zh-CN.md)
|
|
10
9
|
|
|
11
|
-
##
|
|
10
|
+
## What it is
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
`preset-mobile` is the canonical preset most omit-design projects use. It provides:
|
|
14
13
|
|
|
15
|
-
|
|
14
|
+
- **21 `Om*` components** — the import whitelist for `design/**/*.tsx`
|
|
15
|
+
- **`--om-*` token system** mapped to Ionic 8 runtime (`--ion-*`)
|
|
16
|
+
- **8 patterns** with copy-paste `.tmpl.tsx` skeletons (consumed by `omit-design new-page`)
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
## Three hard rules (enforced by [@omit-design/eslint-plugin](../eslint-plugin/))
|
|
18
19
|
|
|
19
|
-
|
|
20
|
+
1. **Tokens only.** All colors / spacing / font sizes / radii / shadows must go through tokens. Raw literals (`#FF6B00`, `12px`, `16px`, etc.) are forbidden in business code.
|
|
21
|
+
2. **Whitelist imports.** Business pages (under `design/**`) can only import from `@omit-design/preset-mobile`. Direct `@ionic/react` imports are forbidden — exceptions: `IonList`, `IonBackButton`, `IonIcon` (layout / icon hosts only).
|
|
22
|
+
3. **Pattern header.** Every business page must start with `// @pattern: <name>`, where `<name>` is registered in [PATTERNS.md](./PATTERNS.md).
|
|
20
23
|
|
|
21
|
-
|
|
24
|
+
## Components (21)
|
|
22
25
|
|
|
23
|
-
|
|
26
|
+
All exported from `@omit-design/preset-mobile`:
|
|
24
27
|
|
|
25
|
-
|
|
28
|
+
| Layout | Inputs | Display | Overlays |
|
|
29
|
+
|---|---|---|---|
|
|
30
|
+
| `OmPage` | `OmInput` | `OmCard` | `OmDialog` |
|
|
31
|
+
| `OmHeader` | `OmSelect` | `OmListRow` | `OmSheet` |
|
|
32
|
+
| `OmAppBar` | `OmSearchBar` | `OmStatCard` | |
|
|
33
|
+
| `OmTabBar` | `OmNumpad` | `OmMenuCard` | |
|
|
34
|
+
| | `OmButton` | `OmProductCard` | |
|
|
35
|
+
| | | `OmCouponCard` | |
|
|
36
|
+
| | | `OmSettingRow` | |
|
|
37
|
+
| | | `OmEmptyState` | |
|
|
38
|
+
| | | `OmTag` | |
|
|
39
|
+
| | | `OmOrderFooter` | |
|
|
26
40
|
|
|
27
|
-
|
|
41
|
+
Full source list: [components/index.ts](./components/index.ts).
|
|
28
42
|
|
|
29
|
-
|
|
43
|
+
## Patterns (8)
|
|
44
|
+
|
|
45
|
+
Each pattern ships:
|
|
46
|
+
- A documented section in [PATTERNS.md](./PATTERNS.md)
|
|
47
|
+
- A copy-paste `.tmpl.tsx` template
|
|
48
|
+
|
|
49
|
+
| Pattern | Use for |
|
|
50
|
+
|---|---|
|
|
51
|
+
| `dashboard` | Stat cards + entry tiles (cafe POS home, admin overview) |
|
|
52
|
+
| `list-view` | Vertical list with filter / search |
|
|
53
|
+
| `detail-view` | Single record with sections (order, product, member) |
|
|
54
|
+
| `form-view` | Input-heavy edit / create forms |
|
|
55
|
+
| `dialog-view` | Modal with title + body + actions |
|
|
56
|
+
| `sheet-action` | Bottom sheet for quick actions |
|
|
57
|
+
| `tab-view` | Top-tab segmented content |
|
|
58
|
+
| `welcome-view` | First-launch / onboarding |
|
|
59
|
+
|
|
60
|
+
Generate a new page from a pattern:
|
|
61
|
+
```bash
|
|
62
|
+
npx omit-design new-page list-view design/orders/list
|
|
63
|
+
# → design/orders/list.tsx with the list-view skeleton
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Token naming
|
|
67
|
+
|
|
68
|
+
| Family | Examples |
|
|
69
|
+
|---|---|
|
|
70
|
+
| `--om-color-*` | `--om-color-primary`, `--om-color-text`, `--om-color-text-muted` |
|
|
71
|
+
| `--om-spacing-*` | `--om-spacing-xs` (4) … `--om-spacing-xxl` (32) |
|
|
72
|
+
| `--om-radius-*` | `--om-radius-sm`, `--om-radius-md`, `--om-radius-lg` |
|
|
73
|
+
| `--om-font-size-*` | `--om-font-size-sm`, `--om-font-size-md`, `--om-font-size-lg` |
|
|
74
|
+
| `--om-shadow-*` | `--om-shadow-sm`, `--om-shadow-md` |
|
|
75
|
+
|
|
76
|
+
Defaults defined in [theme/variables.css](./theme/variables.css). Override in your project's CSS:
|
|
77
|
+
|
|
78
|
+
```css
|
|
79
|
+
:root {
|
|
80
|
+
--om-color-primary: #ff6b00;
|
|
81
|
+
--om-radius-md: 8px;
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Or use the in-browser theme editor at `/workspace/:projectId/theme-editor` (writes back to your `preset/theme.css`).
|
|
86
|
+
|
|
87
|
+
## Install
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
npm install @omit-design/preset-mobile @omit-design/engine @ionic/react ionicons
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
Required peers: `@omit-design/engine ^0.2.0`, `@ionic/react ^8`, `ionicons ^7 || ^8`, `react ^19`, `react-router-dom ^6`.
|
|
94
|
+
|
|
95
|
+
## Usage
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
// design/main/welcome.tsx
|
|
99
|
+
// @pattern: welcome-view
|
|
100
|
+
export const meta = {
|
|
101
|
+
name: "Welcome",
|
|
102
|
+
pattern: "welcome-view",
|
|
103
|
+
description: "First-launch screen",
|
|
104
|
+
} as const;
|
|
105
|
+
|
|
106
|
+
import { OmButton, OmPage } from "@omit-design/preset-mobile";
|
|
107
|
+
|
|
108
|
+
export default function Welcome() {
|
|
109
|
+
return (
|
|
110
|
+
<OmPage padding="none">
|
|
111
|
+
<div style={{ padding: "var(--om-spacing-xl)" }}>
|
|
112
|
+
<h1>Hello</h1>
|
|
113
|
+
<OmButton expand="block">Continue</OmButton>
|
|
114
|
+
</div>
|
|
115
|
+
</OmPage>
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## License
|
|
121
|
+
|
|
122
|
+
[MIT](../../LICENSE)
|
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# @omit-design/preset-mobile
|
|
2
|
+
|
|
3
|
+
> [omit-design](https://github.com/leefanv/omit-design) 的默认移动端 preset：`Om*` 组件白名单 + `--om-*` token 体系 + Ionic 8 运行时 + 8 个开箱即用 pattern 与对应模板。
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@omit-design/preset-mobile)
|
|
6
|
+
[](../../LICENSE)
|
|
7
|
+
|
|
8
|
+
[English](./README.md)
|
|
9
|
+
|
|
10
|
+
## 这是什么
|
|
11
|
+
|
|
12
|
+
`preset-mobile` 是 omit-design 项目默认用的 preset，提供：
|
|
13
|
+
|
|
14
|
+
- **21 个 `Om*` 组件** — `design/**/*.tsx` 的 import 白名单
|
|
15
|
+
- **`--om-*` token 体系**，映射到 Ionic 8 运行时（`--ion-*`）
|
|
16
|
+
- **8 个 pattern** + 对应的 `.tmpl.tsx` 模板（`omit-design new-page` 消费）
|
|
17
|
+
|
|
18
|
+
## 三条硬规则（由 [@omit-design/eslint-plugin](../eslint-plugin/) 强制）
|
|
19
|
+
|
|
20
|
+
1. **Token 优先**：所有颜色、间距、字号、圆角、阴影必须走 token，**禁止字面量**（`#FF6B00`、`12px`、`16px` 等都不允许出现在业务代码里）。
|
|
21
|
+
2. **组件白名单**：业务页面（`design/**`）只能 import `@omit-design/preset-mobile`，**禁止**直接 import `@ionic/react`（例外：`IonList` / `IonBackButton` / `IonIcon`，仅做排版/图标宿主）。
|
|
22
|
+
3. **模式标注**：每个业务页面文件头第一行必须是 `// @pattern: <name>`，`<name>` 必须在 [PATTERNS.md](./PATTERNS.md) 里登记。
|
|
23
|
+
|
|
24
|
+
## 组件清单（21 个）
|
|
25
|
+
|
|
26
|
+
全部从 `@omit-design/preset-mobile` 导出：
|
|
27
|
+
|
|
28
|
+
| 布局 | 输入 | 展示 | 浮层 |
|
|
29
|
+
|---|---|---|---|
|
|
30
|
+
| `OmPage` | `OmInput` | `OmCard` | `OmDialog` |
|
|
31
|
+
| `OmHeader` | `OmSelect` | `OmListRow` | `OmSheet` |
|
|
32
|
+
| `OmAppBar` | `OmSearchBar` | `OmStatCard` | |
|
|
33
|
+
| `OmTabBar` | `OmNumpad` | `OmMenuCard` | |
|
|
34
|
+
| | `OmButton` | `OmProductCard` | |
|
|
35
|
+
| | | `OmCouponCard` | |
|
|
36
|
+
| | | `OmSettingRow` | |
|
|
37
|
+
| | | `OmEmptyState` | |
|
|
38
|
+
| | | `OmTag` | |
|
|
39
|
+
| | | `OmOrderFooter` | |
|
|
40
|
+
|
|
41
|
+
完整列表：[components/index.ts](./components/index.ts)。
|
|
42
|
+
|
|
43
|
+
## Patterns（8 个）
|
|
44
|
+
|
|
45
|
+
每个 pattern 自带：
|
|
46
|
+
- [PATTERNS.md](./PATTERNS.md) 里一段文档
|
|
47
|
+
- 一份可复制的 `.tmpl.tsx` 模板
|
|
48
|
+
|
|
49
|
+
| Pattern | 适用场景 |
|
|
50
|
+
|---|---|
|
|
51
|
+
| `dashboard` | 统计卡 + 入口磁贴（咖啡店 POS 首页、admin 总览） |
|
|
52
|
+
| `list-view` | 带筛选 / 搜索的纵向列表 |
|
|
53
|
+
| `detail-view` | 单条记录详情（订单、商品、会员） |
|
|
54
|
+
| `form-view` | 输入密集的编辑 / 创建表单 |
|
|
55
|
+
| `dialog-view` | 标题 + 内容 + 操作按钮的模态 |
|
|
56
|
+
| `sheet-action` | 底部弹起的快捷操作 |
|
|
57
|
+
| `tab-view` | 顶部分段切换 |
|
|
58
|
+
| `welcome-view` | 首启 / 引导页 |
|
|
59
|
+
|
|
60
|
+
从 pattern 生成新页面：
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
npx omit-design new-page list-view design/orders/list
|
|
64
|
+
# → design/orders/list.tsx 已含 list-view 骨架
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Token 命名
|
|
68
|
+
|
|
69
|
+
| 类别 | 例子 |
|
|
70
|
+
|---|---|
|
|
71
|
+
| `--om-color-*` | `--om-color-primary` / `--om-color-text` / `--om-color-text-muted` |
|
|
72
|
+
| `--om-spacing-*` | `--om-spacing-xs` (4) … `--om-spacing-xxl` (32) |
|
|
73
|
+
| `--om-radius-*` | `--om-radius-sm` / `--om-radius-md` / `--om-radius-lg` |
|
|
74
|
+
| `--om-font-size-*` | `--om-font-size-sm` / `--om-font-size-md` / `--om-font-size-lg` |
|
|
75
|
+
| `--om-shadow-*` | `--om-shadow-sm` / `--om-shadow-md` |
|
|
76
|
+
|
|
77
|
+
默认值在 [theme/variables.css](./theme/variables.css)。在项目 CSS 里覆盖：
|
|
78
|
+
|
|
79
|
+
```css
|
|
80
|
+
:root {
|
|
81
|
+
--om-color-primary: #ff6b00;
|
|
82
|
+
--om-radius-md: 8px;
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
或用浏览器内的主题编辑器（`/workspace/:projectId/theme-editor`），编辑后写回项目的 `preset/theme.css`。
|
|
87
|
+
|
|
88
|
+
## 安装
|
|
89
|
+
|
|
90
|
+
```bash
|
|
91
|
+
npm install @omit-design/preset-mobile @omit-design/engine @ionic/react ionicons
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
peer 依赖：`@omit-design/engine ^0.2.0`、`@ionic/react ^8`、`ionicons ^7 || ^8`、`react ^19`、`react-router-dom ^6`。
|
|
95
|
+
|
|
96
|
+
## 用例
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
// design/main/welcome.tsx
|
|
100
|
+
// @pattern: welcome-view
|
|
101
|
+
export const meta = {
|
|
102
|
+
name: "欢迎",
|
|
103
|
+
pattern: "welcome-view",
|
|
104
|
+
description: "首启页",
|
|
105
|
+
} as const;
|
|
106
|
+
|
|
107
|
+
import { OmButton, OmPage } from "@omit-design/preset-mobile";
|
|
108
|
+
|
|
109
|
+
export default function Welcome() {
|
|
110
|
+
return (
|
|
111
|
+
<OmPage padding="none">
|
|
112
|
+
<div style={{ padding: "var(--om-spacing-xl)" }}>
|
|
113
|
+
<h1>你好</h1>
|
|
114
|
+
<OmButton expand="block">开始</OmButton>
|
|
115
|
+
</div>
|
|
116
|
+
</OmPage>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## 许可
|
|
122
|
+
|
|
123
|
+
[MIT](../../LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omit-design/preset-mobile",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Mobile design preset for omit-design: Om* whitelist components, --om-* / --ion-* token map, Ionic 8 runtime.",
|
|
6
6
|
"main": "./index.ts",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@ionic/react": "^8",
|
|
44
|
-
"@omit-design/engine": "^0.
|
|
44
|
+
"@omit-design/engine": "^0.2.0",
|
|
45
45
|
"ionicons": "^7 || ^8",
|
|
46
46
|
"react": "^19",
|
|
47
47
|
"react-router-dom": "^6"
|