本项目已添加 PWA (Progressive Web App) 支持，使应用可以像原生应用一样安装到设备上，并提供离线访问功能。

为了完成 PWA 配置，您需要创建以下图标文件并放置在 public 目录中：

1. pwa-192x192.png - 192x192 像素的 PNG 图标
2. pwa-512x512.png - 512x512 像素的 PNG 图标
3. favicon.ico - 网站图标
4. apple-touch-icon.png - 180x180 像素的 PNG 图标，用于 iOS 设备
5. masked-icon.svg - SVG 格式的图标，用于某些平台的自适应图标

1. 访问 PWA Asset Generator 或 Real Favicon Generator
2. 上传一个高分辨率的图像（至少 512x512 像素）
3. 生成所需的图标文件
4. 下载并放置在 public 目录中

如果您有 Photoshop、Illustrator 或 Figma 等设计工具，可以创建不同尺寸的图标：

1. 创建一个 512x512 像素的画布
2. 设计您的图标
3. 导出为不同尺寸的 PNG 文件
4. 为 Apple 设备创建特定的图标

将所有生成的图标文件放在项目的 public 目录中：

public/
  ├── favicon.ico
  ├── apple-touch-icon.png
  ├── masked-icon.svg
  ├── pwa-192x192.png
  └── pwa-512x512.png

完成图标添加后，您可以测试 PWA 功能：

1. 运行构建命令：npm run build
2. 预览构建结果：npm run preview
3. 在 Chrome 浏览器中打开预览 URL
4. 打开开发者工具，切换到 "Application" 标签
5. 在左侧面板中查看 "Service Workers" 和 "Manifest" 部分，确认它们已正确配置

当用户访问您的网站时，如果 PWA 配置正确，浏览器会显示"安装"选项，允许用户将应用添加到主屏幕。

• 确保所有图标都具有透明背景（除非您特意设计了背景）
• 图标应该是方形的，内容居中
• 测试在不同设备上的显示效果