3dbc6f0ff5
- 标记点角标从物品数量改为按楼层顺序编号，角标背景色跟随标记颜色 - FoldableLayout 改为绝对定位叠加布局，移除 LayoutAnimation（解决 Android 地图渲染空白及卡顿） - PhotoPicker 拆分为拍照/选图两个独立按钮；选图改用 expo-document-picker 绕过三星 Photo Picker 崩溃问题 - AndroidManifest 移除手动 FileProvider 声明（改由 Expo 插件自动注入） - 同步更新蓝图文档：新增 category-management 模块、补全各模块已完成任务卡 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
45 lines
3.2 KiB
Markdown
45 lines
3.2 KiB
Markdown
---
|
||
id: photo-capture
|
||
name: 照片采集与管理
|
||
area: rn-app
|
||
status: done
|
||
---
|
||
|
||
## 概述
|
||
|
||
调用设备摄像头或相册为物品条目添加多张照片，照片存储到 App 专属目录，路径写入 SQLite photos 表。支持 Android 13+ 权限模型（CAMERA + READ_MEDIA_IMAGES + FileProvider）。
|
||
|
||
## 任务卡
|
||
|
||
### ✅ 摄像头调用与照片存储
|
||
- status: done
|
||
- complexity: M
|
||
- files: apps/property-survey/src/features/photo/usePhotoCapture.ts, apps/property-survey/src/features/photo/PhotoPicker.tsx
|
||
- depends: local-data-layer
|
||
- acceptance: 使用 expo-image-picker（MediaType.Images，已从废弃的 MediaTypeOptions 迁移）；「拍照」和「从相册选择」两种入口；Alert 关闭后延迟 300ms 启动，避免与系统权限弹窗冲突；照片复制到 App 专属目录（expo-file-system）；调用 insertPhoto 写入数据库；有权限检查
|
||
|
||
### ✅ Android 权限与 FileProvider 配置
|
||
- status: done
|
||
- complexity: S
|
||
- files: apps/property-survey/android/app/src/main/AndroidManifest.xml, apps/property-survey/android/app/src/main/res/xml/file_paths.xml, apps/property-survey/app.json
|
||
- acceptance: AndroidManifest 声明 CAMERA + READ_MEDIA_IMAGES 权限（兼容 Android 13+）；配置 FileProvider（android:authorities="${applicationId}.provider"）支持相机临时文件 URI；app.json 中 expo-image-picker 插件配置中文权限说明
|
||
|
||
### ✅ 照片网格预览与删除（物品表单内）
|
||
- status: done
|
||
- complexity: M
|
||
- files: apps/property-survey/src/features/photo/PhotoGrid.tsx
|
||
- depends: photo-capture
|
||
- acceptance: 3 列网格展示已添加的照片缩略图；点击照片全屏预览（FlatList + pagingEnabled + getItemLayout，使用 useWindowDimensions 实时宽度计算每页偏移）；全屏预览顶部有「保存到相册」按钮（expo-media-library，保存后显示"已保存"提示）；长按照片显示「删除」确认弹窗，删除时同步调用 deletePhoto（含文件系统删除）；末尾显示「+」按钮触发 PhotoPicker
|
||
|
||
### ✅ 查看模式照片面板（MarkerPhotoPanel）
|
||
- status: done
|
||
- complexity: M
|
||
- files: apps/property-survey/src/features/photo/MarkerPhotoPanel.tsx
|
||
- depends: photo-capture
|
||
- acceptance: 查看模式下右侧面板；按物品分组展示照片缩略图（4 列网格 + 物品名标题）；点击缩略图全屏 Modal 预览；Modal 为非透明全屏黑底（解决 Android transparent Modal 仅覆盖父容器的问题）；单张显示 + onTouchStart/End 手势滑动切换（≥50px 触发）+ 左右箭头按钮；计数器实时同步
|
||
|
||
## 决策记录
|
||
|
||
- **照片预览放弃 ScrollView/FlatList pagingEnabled**：在 Android 上 `transparent` Modal 的渲染范围被限制在父组件（右侧 260px 面板）内而非全屏，导致 `pagingEnabled` 页宽与实际视口不匹配，两张照片始终并排显示。尝试多种宽度测量方案（`SCREEN_W` 静态值、`onLayout` 动态测量、`useWindowDimensions`）均无效。最终改为单张显示 + 原生 Touch 事件手势，彻底绕开分页宽度问题。
|
||
- **Modal 去掉 `transparent` prop**：`transparent={true}` 在 Android 上使 Modal 继承父容器的渲染上下文（右侧面板），只遮盖面板区域而非全屏。改为非透明 Modal + 黑色背景，强制创建独立原生全屏窗口。
|