# 移动端与 Capacitor 原生 App 指南

## 一、当前移动端能力

| 维度 | 现状 |
|---|---|
| C 端专用移动页 | `/mobile`（`src/pages/MobilePage.tsx`） |
| C 端默认页响应式 | `/` (ChatPage) <768px 自动收起侧栏 |
| PWA 可安装 | ✅ `public/manifest.webmanifest`（无 SW，避免缓存问题） |
| 安全区 | ✅ `.safe-pt/.safe-pb/.fixed-bottom-safe` 工具类 |
| 触控目标 | ✅ `.tap-target` 工具类（44×44） |
| 防 iOS 输入框放大 | ✅ 全局 input/textarea/select font-size ≥16px |
| 原生能力抽象 | ✅ `src/lib/native/`（拍照/分享/触感/扫码/外链） |
| B 端 Admin 移动适配 | ❌ 桌面优先，不做强制适配 |

## 二、CSS 工具类

```html
<!-- 顶部固定栏避让刘海屏 -->
<header class="fixed top-0 inset-x-0 safe-pt bg-background">...</header>

<!-- 底部固定栏避让 Home Indicator -->
<div class="fixed bottom-0 inset-x-0 fixed-bottom-safe bg-background">...</div>

<!-- 主操作按钮保证可点 -->
<button class="tap-target">Tap me</button>
```

## 三、原生能力调用

**禁止**直接调浏览器 API，统一走 `@/lib/native`：

```ts
import { native } from '@/lib/native';

// 选图（相机或相册）
const file = await native.pickImage({ camera: true });

// 系统分享
await native.share({ title: '商品名', url: 'https://...' });

// 触感反馈
native.haptic('medium');

// 判断是否原生壳
if (native.isNative()) { /* Capacitor 专属逻辑 */ }
```

## 四、接入 Capacitor（未来打包成 iOS/Android App）

### Step 1 — 安装
```bash
npm i -D @capacitor/cli
npm i @capacitor/core @capacitor/ios @capacitor/android
npx cap init 千江B2B app.lovable.38fd7eb5c71740c6bf0031f416321ded
```

### Step 2 — `capacitor.config.ts`
```ts
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
  appId: 'app.lovable.38fd7eb5c71740c6bf0031f416321ded',
  appName: '千江B2B',
  webDir: 'dist',
  server: {
    // 开发热重载（指向你的 Lovable 预览 URL）
    url: 'https://38fd7eb5-c717-40c6-bf00-31f416321ded.lovableproject.com?forceHideBadge=true',
    cleartext: true,
  },
};
export default config;
```

### Step 3 — 替换原生实现
编辑 `src/lib/native/index.ts`，把 `TODO(capacitor)` 处的 Web fallback 换成对应插件：

```ts
// 例：拍照
if (isNative()) {
  const { Camera, CameraResultType } = await import('@capacitor/camera');
  const photo = await Camera.getPhoto({ resultType: CameraResultType.Uri });
  // ...
}
```

业务代码无需任何改动。

### Step 4 — 跑起来
```bash
npm run build
npx cap add ios       # 或 android
npx cap sync
npx cap run ios       # 或 android（需 Xcode / Android Studio）
```

## 五、为什么不用 React Native / Flutter

- 需要重写整个 UI 层（shadcn / Tailwind / GenUI DynamicRenderer 不能复用）
- C 端核心是聊天 + GenUI schema 动态渲染，Web 技术栈天然最优
- Capacitor 一套代码同时产出 H5 + iOS + Android + PWA + 微信 webview
