lanrtop/react-phone-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
a0929de768
react-phone-apps/.blueprint/modules/floor-map.md
lanrtop a0929de768 chore: 初始化项目结构与蓝图 
- 配置 pnpm workspace monorepo 基础结构
- 初始化 .blueprint/ 蓝图：6 个业务模块、21 张任务卡
- 目标：Z Fold 6 折叠屏不动产物品摸底统计 App（React Native + Expo）

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 15:23:39 +09:00

1.7 KiB
Raw Blame History

id name area status
floor-map 楼层地图与标记点管理 rn-app planned

概述

以 SVG/Image 占位图为底图，支持长按添加标记点、点击标记点进入编辑的交互逻辑。标记点坐标以相对比例（0~1）存储，替换真实楼层图时无需修改数据。

任务卡

📋 平面图占位容器与坐标系

  • status: todo
  • complexity: M
  • files: apps/property-survey/src/features/map/FloorMap.tsx
  • depends: survey-app-shell
  • acceptance: 渲染一个带灰色背景的矩形占位区域作为平面图，使用 onLayout 获取实际像素尺寸并转换相对坐标（0~1），容器宽高比固定为 4:3，适配折叠/展开两种宽度

📋 长按手势添加标记点

  • status: todo
  • complexity: M
  • files: apps/property-survey/src/features/map/useMarkerGesture.ts
  • depends: floor-map
  • acceptance: 在平面图区域长按 500ms 后触发，将触点位置转换为相对坐标并调用 insertMarker 写入数据库，新标记点立即在地图上显示，不误触短按事件

📋 标记点图标组件

  • status: todo
  • complexity: M
  • files: apps/property-survey/src/features/map/MapMarker.tsx
  • depends: floor-map
  • acceptance: 在平面图上按相对坐标绝对定位渲染图钉图标，已有物品的标记点显示蓝色图钉 + 物品数量角标，空标记点显示灰色图钉，点击触发 onPress 回调

📋 当前楼层标记点数据加载

  • status: todo
  • complexity: S
  • files: apps/property-survey/src/features/map/MarkerList.tsx
  • depends: floor-map
  • acceptance: 楼层切换时调用 getMarkersByFloor 重新查询，渲染该楼层所有 MapMarker，删除标记点时弹出确认对话框（含级联删除提示）