@omit-design/preset-mobile 0.2.0 → 0.2.2

package/README.md

@@ -1,29 +1,122 @@
 # @omit-design/preset-mobile
 
-omit-design 的默认移动端 preset:Om* 组件白名单 + `--om-*` token 体系 + Ionic 8 运行时。
+> 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.
 
-## 三条硬规则(由 [@omit-design/eslint-plugin](../eslint-plugin/) 强制)
+[![npm](https://img.shields.io/npm/v/@omit-design/preset-mobile)](https://www.npmjs.com/package/@omit-design/preset-mobile)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](../../LICENSE)
 
-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)
+[简体中文](./README.zh-CN.md)
 
-## 组件清单
+## What it is
 
-21 个 Om* 组件,全部从 `@omit-design/preset-mobile` 导出:
+`preset-mobile` is the canonical preset most omit-design projects use. It provides:
 
-`OmPage` `OmHeader` `OmAppBar` `OmButton` `OmCard` `OmListRow` `OmInput` `OmSelect` `OmDialog` `OmTabBar` `OmNumpad` `OmSearchBar` `OmProductCard` `OmEmptyState` `OmTag` `OmOrderFooter` `OmCouponCard` `OmStatCard` `OmMenuCard` `OmSettingRow` `OmSheet`
+- **21 `Om*` components** — the import whitelist for `design/**/*.tsx`
+- **`--om-*` token system** mapped to Ionic 8 runtime (`--ion-*`)
+- **8 patterns** with copy-paste `.tmpl.tsx` skeletons (consumed by `omit-design new-page`)
 
-详见 [components/index.ts](./components/index.ts)。
+## Three hard rules (enforced by [@omit-design/eslint-plugin](../eslint-plugin/))
 
-## 设计模式
+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.
+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).
+3. **Pattern header.** Every business page must start with `// @pattern: <name>`, where `<name>` is registered in [PATTERNS.md](./PATTERNS.md).
 
-8 个开箱即用的 pattern,每个有可复制的 template:
+## Components (21)
 
-`list-view` `detail-view` `form-view` `sheet-action` `dialog-view` `welcome-view` `dashboard` `tab-view`
+All exported from `@omit-design/preset-mobile`:
 
-详见 [PATTERNS.md](./PATTERNS.md)。
+| Layout | Inputs | Display | Overlays |
+|---|---|---|---|
+| `OmPage` | `OmInput` | `OmCard` | `OmDialog` |
+| `OmHeader` | `OmSelect` | `OmListRow` | `OmSheet` |
+| `OmAppBar` | `OmSearchBar` | `OmStatCard` | |
+| `OmTabBar` | `OmNumpad` | `OmMenuCard` | |
+| | `OmButton` | `OmProductCard` | |
+| | | `OmCouponCard` | |
+| | | `OmSettingRow` | |
+| | | `OmEmptyState` | |
+| | | `OmTag` | |
+| | | `OmOrderFooter` | |
 
-## Token 命名
+Full source list: [components/index.ts](./components/index.ts).
 
-`--om-color-*` `--om-spacing-*` `--om-radius-*` `--om-font-size-*` `--om-shadow-*` 详见 [theme/variables.css](./theme/variables.css)。
+## Patterns (8)
+
+Each pattern ships:
+- A documented section in [PATTERNS.md](./PATTERNS.md)
+- A copy-paste `.tmpl.tsx` template
+
+| Pattern | Use for |
+|---|---|
+| `dashboard` | Stat cards + entry tiles (cafe POS home, admin overview) |
+| `list-view` | Vertical list with filter / search |
+| `detail-view` | Single record with sections (order, product, member) |
+| `form-view` | Input-heavy edit / create forms |
+| `dialog-view` | Modal with title + body + actions |
+| `sheet-action` | Bottom sheet for quick actions |
+| `tab-view` | Top-tab segmented content |
+| `welcome-view` | First-launch / onboarding |
+
+Generate a new page from a pattern:
+```bash
+npx omit-design new-page list-view design/orders/list
+# → design/orders/list.tsx with the list-view skeleton
+```
+
+## Token naming
+
+| Family | Examples |
+|---|---|
+| `--om-color-*` | `--om-color-primary`, `--om-color-text`, `--om-color-text-muted` |
+| `--om-spacing-*` | `--om-spacing-xs` (4) … `--om-spacing-xxl` (32) |
+| `--om-radius-*` | `--om-radius-sm`, `--om-radius-md`, `--om-radius-lg` |
+| `--om-font-size-*` | `--om-font-size-sm`, `--om-font-size-md`, `--om-font-size-lg` |
+| `--om-shadow-*` | `--om-shadow-sm`, `--om-shadow-md` |
+
+Defaults defined in [theme/variables.css](./theme/variables.css). Override in your project's CSS:
+
+```css
+:root {
+  --om-color-primary: #ff6b00;
+  --om-radius-md: 8px;
+}
+```
+
+Or use the in-browser theme editor at `/workspace/:projectId/theme-editor` (writes back to your `preset/theme.css`).
+
+## Install
+
+```bash
+npm install @omit-design/preset-mobile @omit-design/engine @ionic/react ionicons
+```
+
+Required peers: `@omit-design/engine ^0.2.0`, `@ionic/react ^8`, `ionicons ^7 || ^8`, `react ^19`, `react-router-dom ^6`.
+
+## Usage
+
+```tsx
+// design/main/welcome.tsx
+// @pattern: welcome-view
+export const meta = {
+  name: "Welcome",
+  pattern: "welcome-view",
+  description: "First-launch screen",
+} as const;
+
+import { OmButton, OmPage } from "@omit-design/preset-mobile";
+
+export default function Welcome() {
+  return (
+    <OmPage padding="none">
+      <div style={{ padding: "var(--om-spacing-xl)" }}>
+        <h1>Hello</h1>
+        <OmButton expand="block">Continue</OmButton>
+      </div>
+    </OmPage>
+  );
+}
+```
+
+## License
+
+[MIT](../../LICENSE)

package/README.zh-CN.md

@@ -0,0 +1,123 @@
+# @omit-design/preset-mobile
+
+> [omit-design](https://github.com/leefanv/omit-design) 的默认移动端 preset：`Om*` 组件白名单 + `--om-*` token 体系 + Ionic 8 运行时 + 8 个开箱即用 pattern 与对应模板。
+
+[![npm](https://img.shields.io/npm/v/@omit-design/preset-mobile)](https://www.npmjs.com/package/@omit-design/preset-mobile)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](../../LICENSE)
+
+[English](./README.md)
+
+## 这是什么
+
+`preset-mobile` 是 omit-design 项目默认用的 preset，提供：
+
+- **21 个 `Om*` 组件** — `design/**/*.tsx` 的 import 白名单
+- **`--om-*` token 体系**，映射到 Ionic 8 运行时（`--ion-*`）
+- **8 个 pattern** + 对应的 `.tmpl.tsx` 模板（`omit-design new-page` 消费）
+
+## 三条硬规则（由 [@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 个）
+
+全部从 `@omit-design/preset-mobile` 导出：
+
+| 布局 | 输入 | 展示 | 浮层 |
+|---|---|---|---|
+| `OmPage` | `OmInput` | `OmCard` | `OmDialog` |
+| `OmHeader` | `OmSelect` | `OmListRow` | `OmSheet` |
+| `OmAppBar` | `OmSearchBar` | `OmStatCard` | |
+| `OmTabBar` | `OmNumpad` | `OmMenuCard` | |
+| | `OmButton` | `OmProductCard` | |
+| | | `OmCouponCard` | |
+| | | `OmSettingRow` | |
+| | | `OmEmptyState` | |
+| | | `OmTag` | |
+| | | `OmOrderFooter` | |
+
+完整列表：[components/index.ts](./components/index.ts)。
+
+## Patterns（8 个）
+
+每个 pattern 自带：
+- [PATTERNS.md](./PATTERNS.md) 里一段文档
+- 一份可复制的 `.tmpl.tsx` 模板
+
+| Pattern | 适用场景 |
+|---|---|
+| `dashboard` | 统计卡 + 入口磁贴（咖啡店 POS 首页、admin 总览） |
+| `list-view` | 带筛选 / 搜索的纵向列表 |
+| `detail-view` | 单条记录详情（订单、商品、会员） |
+| `form-view` | 输入密集的编辑 / 创建表单 |
+| `dialog-view` | 标题 + 内容 + 操作按钮的模态 |
+| `sheet-action` | 底部弹起的快捷操作 |
+| `tab-view` | 顶部分段切换 |
+| `welcome-view` | 首启 / 引导页 |
+
+从 pattern 生成新页面：
+
+```bash
+npx omit-design new-page list-view design/orders/list
+# → design/orders/list.tsx 已含 list-view 骨架
+```
+
+## Token 命名
+
+| 类别 | 例子 |
+|---|---|
+| `--om-color-*` | `--om-color-primary` / `--om-color-text` / `--om-color-text-muted` |
+| `--om-spacing-*` | `--om-spacing-xs` (4) … `--om-spacing-xxl` (32) |
+| `--om-radius-*` | `--om-radius-sm` / `--om-radius-md` / `--om-radius-lg` |
+| `--om-font-size-*` | `--om-font-size-sm` / `--om-font-size-md` / `--om-font-size-lg` |
+| `--om-shadow-*` | `--om-shadow-sm` / `--om-shadow-md` |
+
+默认值在 [theme/variables.css](./theme/variables.css)。在项目 CSS 里覆盖：
+
+```css
+:root {
+  --om-color-primary: #ff6b00;
+  --om-radius-md: 8px;
+}
+```
+
+或用浏览器内的主题编辑器（`/workspace/:projectId/theme-editor`），编辑后写回项目的 `preset/theme.css`。
+
+## 安装
+
+```bash
+npm install @omit-design/preset-mobile @omit-design/engine @ionic/react ionicons
+```
+
+peer 依赖：`@omit-design/engine ^0.2.0`、`@ionic/react ^8`、`ionicons ^7 || ^8`、`react ^19`、`react-router-dom ^6`。
+
+## 用例
+
+```tsx
+// design/main/welcome.tsx
+// @pattern: welcome-view
+export const meta = {
+  name: "欢迎",
+  pattern: "welcome-view",
+  description: "首启页",
+} as const;
+
+import { OmButton, OmPage } from "@omit-design/preset-mobile";
+
+export default function Welcome() {
+  return (
+    <OmPage padding="none">
+      <div style={{ padding: "var(--om-spacing-xl)" }}>
+        <h1>你好</h1>
+        <OmButton expand="block">开始</OmButton>
+      </div>
+    </OmPage>
+  );
+}
+```
+
+## 许可
+
+[MIT](../../LICENSE)

package/components/OmDialog.tsx

@@ -39,7 +39,7 @@ export function OmDialog({
   iconColor = "primary",
   title,
   subtitle,
-  confirmText = "知道了",
+  confirmText = "OK",
   confirmColor = "primary",
   confirmHref,
   onConfirm,
@@ -81,7 +81,7 @@ export function OmDialog({
             <>
               {hasCancel && (
                 <OmButton variant="outline" color="medium" onClick={handleCancel}>
-                  {cancelText ?? "取消"}
+                  {cancelText ?? "Cancel"}
                 </OmButton>
               )}
               <OmButton color={confirmColor} onClick={handleConfirm}>

package/components/OmNumpad.tsx

@@ -63,14 +63,14 @@ export function OmNumpad({
       {/* 右下角 */}
       {clearMode ? (
         <button className="om-numpad__key pos-numpad__key--clear" type="button" onClick={() => onClear?.()}>
-          清空
+          Clear
         </button>
       ) : showBackspace ? (
         <button
           className="om-numpad__key pos-numpad__key--ghost"
           type="button"
           onClick={() => onBackspace?.()}
-          aria-label="退格"
+          aria-label="Backspace"
         >
           <IonIcon icon={backspaceOutline} />
         </button>

package/components/OmOrderFooter.tsx

@@ -43,7 +43,7 @@ export function OmOrderFooter({
         className="om-order-footer__cart"
         type="button"
         onClick={onCartClick}
-        aria-label="购物车"
+        aria-label="Cart"
       >
         <IonIcon icon={cartOutline} />
         {typeof cartCount === "number" && cartCount > 0 && (
@@ -55,7 +55,7 @@ export function OmOrderFooter({
         <button className="om-order-footer__discount" type="button" onClick={onDiscountClick}>
           <span className="om-order-footer__discount-amount">{discountLabel}</span>
           <span className="om-order-footer__discount-label">
-            优惠明细
+            Discount details
             <IonIcon icon={chevronForward} aria-hidden />
           </span>
         </button>

package/components/OmProductCard.tsx

@@ -55,12 +55,12 @@ export function OmProductCard({
               <span className="om-product__price-value">{price.toFixed(2)}</span>
             </span>
             <span className="om-product__unit">/{unit}</span>
-            <span className="om-product__stock">库存{stock}</span>
+            <span className="om-product__stock">Stock {stock}</span>
           </div>
           <button
             className="om-product__add"
             type="button"
-            aria-label={`加购 ${name}`}
+            aria-label={`Add ${name}`}
             onClick={(e) => {
               e.stopPropagation();
               onAdd?.();

package/components/OmSearchBar.tsx

@@ -22,7 +22,7 @@ interface OmSearchBarProps {
  */
 export function OmSearchBar({
   value,
-  placeholder = "搜索",
+  placeholder = "Search",
   onChange,
   onFocus,
   trailing,

package/components/OmSheet.tsx

@@ -37,7 +37,7 @@ export function OmSheet({ title, children, onDismiss, dismissHref, size = "auto"
         {title && (
           <div className="om-sheet__head">
             <span className="om-sheet__title">{title}</span>
-            <button className="om-sheet__close" type="button" onClick={dismiss} aria-label="关闭">
+            <button className="om-sheet__close" type="button" onClick={dismiss} aria-label="Close">
               <IonIcon icon={closeOutline} />
             </button>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omit-design/preset-mobile",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "Mobile design preset for omit-design: Om* whitelist components, --om-* / --ion-* token map, Ionic 8 runtime.",
   "main": "./index.ts",

package/templates/dashboard.tmpl.tsx

@@ -5,9 +5,9 @@
 //   3. 给 TILES 加合适 ionicons + href
 
 export const meta = {
-  name: "TODO 工作台",
+  name: "TODO Dashboard",
   pattern: "dashboard",
-  description: "TODO 一句话描述",
+  description: "TODO one-line description",
   source: "prd",
 } as const;
 
@@ -41,13 +41,13 @@ interface Tile {
 
 // TODO: 替换为真实 mock import
 const STATS: Stat[] = [
-  { label: "今日营收", value: "¥0.00", caption: "含已结金额" },
-  { label: "客单量", value: "0", caption: "单数" },
+  { label: "Today's revenue", value: "$0.00", caption: "Includes settled amount" },
+  { label: "Order count", value: "0", caption: "orders" },
 ];
 
 const TILES: Tile[] = [
   { id: "pos", icon: cashOutline, label: "POS", href: "/designs/TODO" },
-  { id: "orders", icon: receiptOutline, label: "订单", href: "/designs/TODO" },
+  { id: "orders", icon: receiptOutline, label: "Orders", href: "/designs/TODO" },
 ];
 
 export function TodoDashboardPage() {
@@ -56,7 +56,7 @@ export function TodoDashboardPage() {
       padding="lg"
       header={
         <OmHeader
-          title="TODO 工作台"
+          title="TODO Dashboard"
           start={<IonBackButton defaultHref="/designs/TODO-from" />}
         />
       }

package/templates/detail-view.tmpl.tsx

@@ -6,9 +6,9 @@
 //   4. 主操作改成业务跳转
 
 export const meta = {
-  name: "TODO 详情页名",
+  name: "TODO Detail page",
   pattern: "detail-view",
-  description: "TODO 一句话描述",
+  description: "TODO one-line description",
   source: "prd",
 } as const;
 
@@ -30,9 +30,9 @@ interface Record {
 // TODO: 替换为真实 mock import
 const RECORD: Record = {
   id: "TODO",
-  title: "示例标题",
+  title: "Sample title",
   amount: 0,
-  status: "TODO 状态",
+  status: "TODO status",
 };
 
 export function TodoDetailPage() {
@@ -41,19 +41,19 @@ export function TodoDetailPage() {
       padding="lg"
       header={
         <OmHeader
-          title="TODO 详情"
+          title="TODO Detail"
           start={<IonBackButton defaultHref="/designs/TODO" />}
         />
       }
     >
       <OmCard title={RECORD.title} subtitle={`#${RECORD.id}`}>
-        <p>金额:¥{RECORD.amount.toFixed(2)}</p>
-        <p>状态:{RECORD.status}</p>
+        <p>Amount: ${RECORD.amount.toFixed(2)}</p>
+        <p>Status: {RECORD.status}</p>
       </OmCard>
 
       {/* TODO: 关联信息分块 —— 增加更多 OmCard */}
 
-      <OmButton expand="block">主操作</OmButton>
+      <OmButton expand="block">Primary action</OmButton>
     </OmPage>
   );
 }

package/templates/dialog-view.tmpl.tsx

@@ -6,9 +6,9 @@
 //   4. iconColor / confirmColor 按场景设(danger / warning / success / primary)
 
 export const meta = {
-  name: "TODO 对话框",
+  name: "TODO Dialog",
   pattern: "dialog-view",
-  description: "TODO 一句话描述",
+  description: "TODO one-line description",
   source: "prd",
 } as const;
 
@@ -21,11 +21,11 @@ export function TodoDialogPage() {
       <OmDialog
         icon={informationCircleOutline}
         iconColor="primary"
-        title="TODO 标题"
-        subtitle="TODO 副标题描述。"
-        cancelText="取消"
+        title="TODO Title"
+        subtitle="TODO subtitle description."
+        cancelText="Cancel"
         cancelHref="/designs/TODO-from"
-        confirmText="确认"
+        confirmText="Confirm"
         confirmHref="/designs/TODO-next"
       />
     </OmPage>

package/templates/form-view.tmpl.tsx

@@ -6,9 +6,9 @@
 //   4. IonBackButton defaultHref 改成上一级
 
 export const meta = {
-  name: "TODO 表单页名",
+  name: "TODO Form page",
   pattern: "form-view",
-  description: "TODO 一句话描述",
+  description: "TODO one-line description",
   source: "prd",
 } as const;
 
@@ -32,19 +32,19 @@ export function TodoFormPage() {
       padding="lg"
       header={
         <OmHeader
-          title="TODO 表单"
+          title="TODO Form"
           start={<IonBackButton defaultHref="/designs/TODO" />}
         />
       }
     >
-      <OmInput label="字段一" value={field1} onChange={setField1} />
-      <OmInput label="字段二" value={field2} onChange={setField2} />
+      <OmInput label="Field one" value={field1} onChange={setField1} />
+      <OmInput label="Field two" value={field2} onChange={setField2} />
 
       <OmButton
         expand="block"
         onClick={() => navigate("/designs/TODO-next")}
       >
-        提交
+        Submit
       </OmButton>
     </OmPage>
   );

package/templates/list-view.tmpl.tsx

@@ -6,9 +6,9 @@
 //   4. 调整空态文案
 
 export const meta = {
-  name: "TODO 列表页名",
+  name: "TODO List page",
   pattern: "list-view",
-  description: "TODO 一句话描述",
+  description: "TODO one-line description",
   source: "prd",
 } as const;
 
@@ -28,8 +28,8 @@ interface Item {
 
 // TODO: 替换为 import { items } from ""./mock/<group>" 相对路径";
 const ITEMS: Item[] = [
-  { id: "1", title: "示例条目 1", detail: "副信息" },
-  { id: "2", title: "示例条目 2" },
+  { id: "1", title: "Sample item 1", detail: "Subinfo" },
+  { id: "2", title: "Sample item 2" },
 ];
 
 export function TodoListPage() {
@@ -38,13 +38,13 @@ export function TodoListPage() {
       padding="none"
       header={
         <OmHeader
-          title="TODO 标题"
+          title="TODO Title"
           start={<IonBackButton defaultHref="/designs/TODO" />}
         />
       }
     >
       {ITEMS.length === 0 ? (
-        <OmEmptyState title="暂无数据" description="TODO 空态描述" />
+        <OmEmptyState title="No data" description="TODO empty-state description" />
       ) : (
         <IonList lines="none">
           {ITEMS.map((it) => (

package/templates/sheet-action.tmpl.tsx

@@ -5,9 +5,9 @@
 //   3. dismissHref 改成来源页路径
 
 export const meta = {
-  name: "TODO 操作菜单",
+  name: "TODO Action menu",
   pattern: "sheet-action",
-  description: "TODO 一句话描述",
+  description: "TODO one-line description",
   source: "prd",
 } as const;
 
@@ -24,15 +24,15 @@ interface MenuItem {
 }
 
 const ITEMS: MenuItem[] = [
-  { label: "TODO 项一", icon: ellipsisHorizontalOutline, href: "/designs/TODO" },
-  { label: "TODO 项二", icon: ellipsisHorizontalOutline, href: "/designs/TODO" },
+  { label: "TODO Item one", icon: ellipsisHorizontalOutline, href: "/designs/TODO" },
+  { label: "TODO Item two", icon: ellipsisHorizontalOutline, href: "/designs/TODO" },
 ];
 
 export function TodoSheetActionPage() {
   const navigate = useNavigate();
   return (
     <OmPage padding="none">
-      <OmSheet title="TODO 标题" dismissHref="/designs/TODO-from">
+      <OmSheet title="TODO Title" dismissHref="/designs/TODO-from">
         <div>
           {ITEMS.map((it) => (
             <button

package/templates/tab-view.tmpl.tsx

@@ -8,9 +8,9 @@
 // 本 template 展示扁平结构,首批落地后可重构为 shell。
 
 export const meta = {
-  name: "TODO Tab 页",
+  name: "TODO Tab page",
   pattern: "tab-view",
-  description: "TODO 一句话描述",
+  description: "TODO one-line description",
   source: "prd",
 } as const;
 
@@ -28,21 +28,21 @@ import {
 } 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 },
+  { tab: "stored", href: "/designs/TODO-stored", label: "Stored", icon: cubeOutline },
+  { tab: "orders", href: "/designs/TODO-orders", label: "Orders", icon: receiptOutline },
+  { tab: "member", href: "/designs/TODO-member", label: "Members", icon: peopleOutline },
+  { tab: "settings", href: "/designs/TODO-settings", label: "Settings", icon: settingsOutline },
 ];
 
 export function TodoTabPage() {
   return (
     <OmPage
       padding="lg"
-      header={<OmAppBar variant="brand" brandTitle="TODO 品牌" />}
+      header={<OmAppBar variant="brand" brandTitle="TODO Brand" />}
     >
       <div>
         {/* TODO: 主体内容 —— 表单 / 列表 / 空态 */}
-        <h1>TODO Tab 页主体</h1>
+        <h1>TODO Tab page body</h1>
       </div>
       <OmTabBar items={TABS} />
     </OmPage>

package/templates/welcome-view.tmpl.tsx

@@ -6,9 +6,9 @@
 //   4. tagline / version 走 mock 或常量
 
 export const meta = {
-  name: "TODO 欢迎页",
+  name: "TODO Welcome page",
   pattern: "welcome-view",
-  description: "TODO 一句话描述",
+  description: "TODO one-line description",
   source: "prd",
 } as const;
 
@@ -23,14 +23,14 @@ export function TodoWelcomePage() {
       {/* TODO: 替换为品牌 logo 组件 */}
       <div>
         <h1>Welcome</h1>
-        <p>TODO 欢迎语</p>
+        <p>TODO welcome message</p>
       </div>
 
       <OmButton
         expand="block"
         onClick={() => navigate("/designs/TODO-next")}
       >
-        开始
+        Get started
       </OmButton>
     </OmPage>
   );