React 到 Phoenix LiveView 移植指南
复刻请求的 React 界面，同时与目标应用的架构集成。将源界面作为视觉和行为参考；当目标应用有明确要求且与源不同时，遵循目标要求。通过代码发现约定，而不是假设使用了某个 React 框架、CSS 系统、组件库或 Phoenix 版本。
确定范围与约定
- 阅读两个项目中适用的仓库说明和相关文档。定位 React 入口点、目标应用以及请求的路由或组件。项目可能位于不同的仓库，也可能共享一个工作区。
- 检查清单文件和现有实现，以识别样式、组件、字体、主题、资源、路由、认证、数据访问和 JavaScript 集成。在创建新的路由、组件或钩子之前，先检查是否存在现有的路由、部分移植、组件或钩子。
- 将范围限定在分配的界面和所需的行为上。静态原型不需要新的后端功能；功能性迁移则需要真实的集成或明确披露的差距。
- 尊重用户的测试和工具权限。源代码检查、参考检查、预览准备、自动化测试和浏览器 QA 是不同的活动；不要假设所有操作都已获得授权。
1. 检查源项目
阅读 css-extraction.md。追踪页面、视觉上重要的子元素、样式、组件变体、资源和状态逻辑。确定：
- 布局、响应式规则、排版、主题、图像和动画。
- 库默认值、本地覆盖、条件属性和 CSS 级联之后的有效样式。
- 导航、表单、覆盖层、加载、权限、变更、持久化和恢复路径（在范围内）。
记录一份简洁的迁移映射表：源组件 → 目标组件，源数据/操作 → 目标上下文/事件，源令牌 → 目标等效物。将观察到的行为与假设和未解决的运行时值区分开。
如果是分析请求，给出发现结果并停止。如果是授权的实现，简要说明重要的差距或偏离并继续。仅当未解决的选择会实质性改变范围、行为或保真度时才提问；对于常规的转换决策，不需要单独的确认。
2. 在 Phoenix 中实现
阅读 liveview-conventions.md。复用目标组件、布局、上下文、授权、令牌、资源和钩子，以复刻所需的结果。
- 翻译渲染输出和行为，而不是机械地翻译 React 语法或组件名称。
- 保留视觉值、响应式规则、状态和语义。在没有充分理由的情况下，不要替换为大致相似的字体、图标、组件或动画。
- 一致地应用明确的目标要求，并解释可见的偏离。切勿将另一个项目的字体限制、存储提供商、路由结构或命名带入移植中。
- 将服务器拥有的状态保留在 LiveView 和上下文中；使用 CSS 或现有的客户端机制处理本地视觉行为。仅为需要它们的浏览器功能添加 Hooks。
- 完成适用的加载、空、验证、待定、成功、失败、重试、权限和恢复状态。在失败时保留用户输入，并防止重复操作破坏数据。
3. 审查与交接
对照迁移映射表审查更改，包括响应式/主题变体、授权、事件处理、可访问性和生命周期清理。检查所需的资源和引用的组件是否存在。
仅在允许时使用项目验证命令和运行时工具。如果允许，准备实时预览。切勿仅凭源代码检查就声称运行时、视觉或测试验证。
简要交接：移植了什么、重要的偏离、模拟或缺失的集成、执行或省略的验证、以及用户应该测试的状态。如果依赖项阻止了完成，具体说明它，并在范围内完成独立的工作。