- 配置 pnpm workspace monorepo 基础结构 - 初始化 .blueprint/ 蓝图:6 个业务模块、21 张任务卡 - 目标:Z Fold 6 折叠屏不动产物品摸底统计 App(React Native + Expo) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
40 lines
1.8 KiB
Markdown
40 lines
1.8 KiB
Markdown
---
|
||
id: survey-app-shell
|
||
name: 应用外壳与折叠屏布局
|
||
area: rn-app
|
||
status: planned
|
||
---
|
||
|
||
## 概述
|
||
|
||
React Native (Expo SDK 52 + Expo Router) 应用骨架,实现 Z Fold 6 折叠/展开双形态布局切换。折叠时单栏显示,展开时左侧地图 + 右侧表单双栏并排。
|
||
|
||
## 任务卡
|
||
|
||
### 📋 Expo 应用骨架初始化
|
||
- status: todo
|
||
- 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: todo
|
||
- complexity: S
|
||
- files: apps/property-survey/src/layout/useFoldState.ts
|
||
- acceptance: useFoldState 返回 `{ isUnfolded: boolean, windowWidth: number }`,以 720px 为断点区分折叠/展开状态,useWindowDimensions 变化时自动更新,在模拟器宽度调整时可观察到状态切换
|
||
|
||
### 📋 双栏/单栏自适应布局容器
|
||
- status: todo
|
||
- complexity: M
|
||
- files: apps/property-survey/src/layout/FoldableLayout.tsx
|
||
- depends: survey-app-shell
|
||
- acceptance: 展开时渲染左右两栏(左侧 flexGrow:1 地图区,右侧 380px 详情区),折叠时只渲染左侧(地图全屏),接受 `left` 和 `right` 两个 ReactNode 插槽
|
||
|
||
### 📋 楼层切换标签组件
|
||
- status: todo
|
||
- complexity: S
|
||
- files: apps/property-survey/src/layout/FloorTabs.tsx
|
||
- depends: survey-app-shell
|
||
- acceptance: 显示 1F / 2F / 3F 三个标签,选中项高亮,onChange 回调传出当前楼层数字(1/2/3),组件宽度自适应容器
|