react-page-review

Context

设计走查或验收时，反馈常落在截图群和口语描述里，缺少与 DOM 结构绑定的批注与可导出报告。

Role & Scope

独立实现并发布 react-page-review；另有姊妹项目 vue-page-review（本页以前者实码为准）。

Approach

• Default UI 与 headless 分层：ReviewTool 可开箱；useElementSelection / useViewportBoxing / useDragResize 可自建 UI。
• antd 可选：default UI 依赖 antd peer，核心 hooks 不绑 UI 框架。
• 导出闭环：localStorage 持久化 + JSON / Markdown / ZIP（含截图）。

Implementation

导出面（src/index.jsx）：ReviewTool、usePageReview、inspector 工具、screenshot helpers、三件 headless hooks。截图基于 html-to-image，打包 jszip。仓库含 examples 与 spec/changes 记录交互迭代（多目标选择、组件树等）。

Outcome

• npm 包可安装；README 提供最小接入示例。
• 同时服务「嵌入现有 React 应用的工具条」与「无 UI 的集成方」。

Learnings

组件库要被采用，peer 边界与 headless 出口比再做一个漂亮 Modal 更重要。