lanrtop/react-phone-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
cea2a5d208
react-phone-apps/.blueprint/modules/survey-app-shell.md
lanrtop cea2a5d208 feat: 表单保存优化、照片保存相册及布局性能改进 
- 物品表单底部新增冻结保存按钮，保存成功显示 Toast 提示
- 照片全屏预览时支持一键保存到本地相册（expo-media-library ~16.0.0）
- 左侧标记点列表侧栏宽度从 120 调整为 160
- FoldableLayout 改用 LayoutAnimation 替代 JS 线程宽度动画，修复 Android 地图渲染空白及卡顿问题
- 修复 ImagePicker 废弃 API MediaTypeOptions.Images → MediaType.Images

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-10 00:12:42 +09:00

2.5 KiB
Raw Blame History

id name area status
survey-app-shell 应用外壳与折叠屏布局 rn-app done

概述

React Native (Expo SDK 52 + Expo Router) 应用骨架，实现 Z Fold 6 折叠/展开双形态布局切换。折叠时单栏显示，展开时左侧地图 + 右侧表单双栏并排。

任务卡

🔵 Expo 应用骨架初始化

  • status: done
  • complexity: M
  • files: apps/property-survey/app.json, apps/property-survey/package.json, apps/property-survey/app/_layout.tsx, apps/property-survey/app/index.tsx, apps/property-survey/app/summary.tsx
  • depends: local-data-layer
  • acceptance: pnpm --filter property-survey start 能在 Expo Go 或开发构建中启动，底部导航可在「登记」和「汇总」两个页面间切换，SQLite 数据库在启动时完成初始化

🔵 折叠屏状态感知 Hook

  • status: done
  • complexity: S
  • files: apps/property-survey/src/layout/useFoldState.ts
  • acceptance: useFoldState 返回 { isUnfolded: boolean, windowWidth: number }，以 720px 为断点区分折叠/展开状态，useWindowDimensions 变化时自动更新，在模拟器宽度调整时可观察到状态切换

🔵 双栏/单栏自适应布局容器

  • status: done
  • complexity: M
  • files: apps/property-survey/src/layout/FoldableLayout.tsx
  • depends: survey-app-shell
  • acceptance: 展开时渲染左右两栏（左侧 flexGrow:1 地图区，右侧 380px 详情区），折叠时只渲染左侧（地图全屏），接受 left 和 right 两个 ReactNode 插槽

🔵 楼层切换标签组件

  • status: done
  • complexity: S
  • files: apps/property-survey/src/layout/FloorTabs.tsx
  • depends: survey-app-shell
  • acceptance: 显示 1F / 2F / 3F 三个标签，选中项高亮，onChange 回调传出当前楼层数字（1/2/3），组件宽度自适应容器

✅ 查看/编辑模式切换

  • status: done
  • complexity: S
  • files: apps/property-survey/app/index.tsx
  • depends: survey-app-shell
  • acceptance: 顶栏左侧显示「查看 | 编辑」分段控件；查看模式下右侧面板渲染 MarkerPhotoPanel，编辑模式下渲染 ItemFormSheet；折叠屏底部抽屉同步随模式切换；默认为编辑模式

✅ 查看模式照片面板

  • status: done
  • complexity: M
  • files: apps/property-survey/src/features/photo/MarkerPhotoPanel.tsx
  • depends: photo-capture
  • acceptance: 展开屏内联右侧面板，折叠屏底部抽屉；按物品分组展示照片缩略图（3列网格），含物品名小标题；点击缩略图全屏预览，左右箭头切换；无照片物品显示「暂无照片」占位；无选中标记时面板为空白引导