SheetSlice PWA

一个基于 React + TypeScript 的现代 PWA 应用框架，完全支持 iOS 刘海屏和菜单栏颜色适配。

项目特性

✅ React 18 + TypeScript - 现代前端开发体验
✅ Vite 构建 - 极速开发和构建
✅ PWA 支持 - 完整的离线功能和应用安装
✅ iPhone 适配 - 自动适配刘海屏、菜单栏颜色
✅ Service Worker - 自动更新和缓存管理

项目结构

SheetSlice/
├── src/
│   ├── components/        # React 组件
│   ├── contexts/          # React Context（主题管理）
│   ├── utils/             # 工具函数（PWA 相关）
│   ├── App.tsx            # 主应用组件
│   ├── App.css            # 全局样式
│   └── main.tsx           # 应用入口
├── index.html             # HTML 模板（包含 PWA meta 标签）
├── vite.config.ts         # Vite 配置（PWA 插件）
├── tsconfig.json          # TypeScript 配置
├── package.json           # 项目依赖
└── README.md              # 本文件

快速开始

1. 安装依赖

npm install

2. 开发模式

npm run dev

访问 http://localhost:5173

3. 构建生产版本

npm run build

4. 预览生产构建

npm run preview

iPhone 菜单栏颜色适配说明

关键 HTML Meta 标签

<!-- 设置主题色（菜单栏背景） -->
<meta name="theme-color" content="#ffffff" />

<!-- iOS 独立应用模式支持 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 菜单栏样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<!-- Viewport 设置：viewport-fit=cover 让内容延伸到刘海屏 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

Safe Area CSS

/* 使用 CSS safe-area-inset-* 避开刘海屏和菜单栏 */
#root {
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}

运行时更新主题

使用 ThemeContext 动态更新菜单栏颜色：

import { useTheme } from './contexts/ThemeContext'

function MyComponent() {
  const { updateThemeColor } = useTheme()
  
  // 更新为蓝色并设置深色状态栏
  updateThemeColor({ 
    color: '#1e88e5', 
    isDark: true 
  })
}

PWA 功能

Service Worker 自动注册

src/utils/pwa.ts 提供了 Service Worker 的自动注册和更新管理。

离线支持

应用安装后可完全离线运行，所有资源都会被 Workbox 缓存。

应用清单 (manifest.json)

由 vite-plugin-pwa 自动生成，包含应用图标、名称等信息。

后续步骤

等待你提供业务逻辑和示例代码，我会按步骤帮你：

1. 添加具体的页面组件
2. 集成业务逻辑
3. 实现数据管理
4. 优化性能

开发提示

• 使用 useTheme() Hook 获取和更新主题颜色
• 组件应该放在 src/components/ 目录
• 样式可以使用 CSS、CSS Modules 或其他方案
• 使用 TypeScript 获得完整的类型检查

---

准备好接收你的业务逻辑代码了！🚀