日记本应用 (Diary App)

一个基于 React Native + Expo 构建的跨平台日记本应用，支持 iOS、Android、Web 和 macOS。

最新更新（v0.1.0）

• ✅ 新建/编辑页保存按钮已上移到标题下方，网页端首屏可见
• ✅ 新建页布局已压缩，上方元信息区域占用空间显著降低
• ✅ 修复网页端标题前异常前缀显示问题
• ✅ E2E 自动化测试升级为跨浏览器验收（Chromium / Firefox / WebKit）
• ✅ Playwright 报告增强：HTML 报告 + JSON 报告 + 汇总通过率 + 失败截图/视频/Trace

功能特点

核心功能

• 📝 创建、编辑、删除日记
• 📋 日记列表浏览
• 🔄 下拉刷新
• 💾 本地数据持久化存储
• 📱 响应式设计，支持多平台

高级功能

• 😊 心情记录（8 种心情选项）
• 📂 分类管理
• 🏷️ 标签管理
• 🔍 搜索和筛选
• 📊 统计功能（年度统计、写作时间分布）
• 🌤️ 天气选择（8 种天气选项）
• 📍 位置获取
• 📌 置顶功能
• ❤️ 收藏功能
• 🔒 私密日记
• 📷 图片上传
• 🌙 深色模式（支持自动切换）

测试状态

测试类型	用例数	通过率
E2E 测试	36	100% ✅

PWA 支持

Web 端支持 PWA（渐进式 Web 应用）功能：

• 📦 manifest.json - Web 应用清单
• 🔧 Service Worker - 离线缓存支持
• 📲 可安装为独立应用
• 🌐 离线访问能力

项目结构

diary-app/
├── src/
│   ├── screens/
│   │   ├── DiaryList.tsx    # 日记列表页面
│   │   └── EditScreen.tsx   # 编辑/创建日记页面
│   ├── types/
│   │   └── index.ts         # TypeScript 类型定义
│   └── utils/
│       └── storage.ts       # 本地存储工具
├── App.tsx                  # 主应用入口
├── app.json                 # Expo 配置
└── package.json             # 依赖配置

快速开始

安装依赖

cd diary-app
npm install

运行应用

# Web 端
npm run web

# iOS (需要 macOS)
npm run ios

# Android
npm run android

# macOS 桌面端 (需要配置)
npx expo run:macos

技术栈

• 框架: React Native + Expo
• 语言: TypeScript
• 导航: React Navigation 7
• 存储: AsyncStorage
• 日期处理: date-fns
• 图标: @expo/vector-icons (Ionicons)
• 图表: react-native-chart-kit
• 图片: expo-image-picker
• 位置: expo-location

测试

运行 E2E 测试

npx playwright test

测试报告

测试完成后可以查看 HTML 报告：

npx playwright show-report

测试覆盖

• ✅ 用户认证（登录/注册/登出）
• ✅ 日记 CRUD（创建/编辑/删除）
• ✅ 搜索筛选
• ✅ 心情分类
• ✅ 收藏功能
• ✅ 统计功能
• ✅ 天气选择
• ✅ 位置获取
• ✅ 置顶功能
• ✅ 图片上传
• ✅ 深色模式
• ✅ 统计增强（年度统计/写作时间分布）

多平台支持

平台	状态	命令
iOS	✅	npm run ios
Android	✅	npm run android
Web	✅	npm run web
macOS	✅	npx expo run:macos

注意事项

1. 运行 iOS/macOS 需要 macOS 系统和 Xcode
2. 运行 Android 需要 Android Studio 和模拟器/真机
3. Web 端可以直接在浏览器中运行