粘贴中介发来的租房描述，AI 自动解析定位，在地图上一眼对比所有房源的通勤时间。
纯前端单文件应用，适合快速本地使用、Fork 二次开发。
- AI 一键解析：粘贴任意格式的租房文字，自动提取地址、价格、面积、装修、宠物、车位等结构化信息
- 地图可视化：所有房源标注在高德地图上，支持平移/缩放手势
- 多目的地通勤：配置公司、学校等多个通勤地址，自动计算驾车/公交/步行/骑行耗时
- 晚高峰回程：驾车通勤支持「目的地→家」反向路线 + 实时路况
- 排序筛选：按价格、面积、通勤时间升降序排列；按宠物友好、有车位、星标筛选
- 星标收藏：一键星标心仪房源，支持单独筛选查看
- 编辑 & 删除：随时修改已添加的房源信息
- 本地优先 + 云同步可选：默认本地使用；配置 Supabase 后可长期存储并跨平台查看
- 平台代付模式：配置 Supabase 并登录后，AI 解析与地理编码/通勤可经 Edge Function 代理，无需在前端保存 LLM / 高德 Web 服务 Key
git clone https://github.com/leonfighting-py/RentMap.git
cd RentMap
open index.html # macOS
# 或直接双击 index.html 文件# Python 3
python3 -m http.server 8080
# 然后访问 http://localhost:8080将 index.html 拖到 Netlify Drop，即可获得公开访问链接。
RentMap 支持两种 API 调用模式，可在宿主「设置 → AI 文字解析」中切换（配置 Supabase 后默认 platform）。
| 模式 | 适用场景 | LLM 解析 | 地理编码 / 通勤 | 地图 JS Key |
|---|---|---|---|---|
| platform（默认，上线推荐） | 已配置 Supabase 并登录 | Edge parse-listing |
Edge geocode / commute |
仍需 Web JS Key 画地图（或等 P4 代理） |
| byok（高级 / 开发） | 本地离线、自备配额 | 浏览器直连 Zenmux | 浏览器直连高德 REST | localStorage 中的 Key |
正式部署时，地图 Web 服务 Key、LLM Key 等敏感凭证应配置在 Supabase Edge Functions Secrets，由服务端代理调用，不要写入前端或提交到仓库。普通用户登录后无需自备 Key。
BYOK（在设置中自行填写 Key）仅适用于本地开发或高级用户；清单见 supabase/secrets.md，配置步骤见 supabase/README.md。
React 地图路径（src/maps/）不含 securityJsCode；仅使用公开 JS Key 或 serviceHost 代理（P4 待落地）。
用于地图展示、地址定位、路线规划
- 注册 高德开放平台 账号
- 创建应用 → 添加 Key，选择 Web端 (JS API)
- 获取 JS API Key 和对应的安全密钥
- 在应用的「Key 管理」中，将你的域名（或
localhost）加入白名单
📖 详细申请教程
用于将租房文字自动解析为结构化字段。platform 模式下无需配置，登录后走 Edge 代理；BYOK 模式需在设置中填写 Key。
- 访问 Zenmux 注册账号
- 获取免费 API Key
- 本应用使用
google/gemma-3-12b-it模型，费用极低
用于邮箱验证码登录、长期存储、跨设备查看
- 创建 Supabase 项目
- 执行
supabase/schema.sql - 在控制台启用邮箱 OTP 登录
- 复制
Project URL和anon public key - 在应用设置中填入这两个值
详细步骤见 supabase/README.md
业务数据继续存放在现有 Supabase Postgres（properties / destinations / sync_tombstones），Web 与小程序共用同一套表与 RLS。小程序阶段只换登录入口（微信 OAuth → Edge 桥接 Supabase session）与地图渲染器（WechatNativeAdapter），不另开微信云开发业务库。详见 supabase/wechat-phase2.md 与设计文档 docs/plans/2026-07-19-map-surface-and-secret-proxy-design.md。
- 配置 Key / 登录：platform 模式需配置 Supabase 并邮箱登录；BYOK 模式在设置中填写高德 Key 和 Zenmux Key
- 设置目的地：在设置中添加公司/学校等通勤目的地
- 添加房源：点击「添加房源」，粘贴中介发来的描述文字，点击「AI 解析并定位」
- 确认信息：检查解析结果，确认后房源自动显示在地图上并计算通勤时间
- 对比筛选：使用排序和筛选功能快速找出最合适的房源
| 技术 | 用途 |
|---|---|
原生 HTML/CSS/JS（index.html 宿主） |
主找房路径，可直接打开 |
| Vite + React + motion | React 壳 / 对比页 / 地图 Tab（npm run dev） |
lib/ 纯函数 |
筛选、导出导入、转义、演示数据（可单测） |
| 高德地图 JS API 2.0 | 地图、Geocoding、路线规划、POI 搜索 |
| Zenmux API | 调用 LLM 解析租房文字 |
| Tailwind CSS CDN | 宿主样式辅助 |
| localStorage | 本地缓存与离线兜底 |
| Supabase Auth + Postgres + Edge Functions | 账号、云端数据、跨平台同步、LLM/地理编码代理 |
RentMap/
├── index.html # 主应用（过渡宿主，可直接打开）
├── index-react.html # React 壳入口（npm run dev）
├── sync-utils.js
├── lib/ # 可测纯逻辑
├── src/ # Vite + React 新 UI
├── tests/
├── docs/plans/
└── supabase/
| 入口 | 命令 / 文件 | 用途 |
|---|---|---|
| 新版 React UI | npm run dev → 打开 Vite 提示的 index-react.html |
设计系统样板：列表 / 详情 / 对比 / 地图 Tab |
| 宿主（完整能力） | 直接打开 index.html 或静态服务器 |
地图、添加、通勤计算、云同步 |
地图 Tab 说明： React 侧通过 MapSurface（AmapWebAdapter）渲染钉点。若本地未配置高德 JS Key，会显示空状态并引导打开宿主地图（支持 ?focus=<propId> 深链）。完整通勤与添加流程仍在宿主。
新版列表读取与宿主相同的 localStorage（rm_props / rm_dests）。无数据时可在列表空状态点「载入演示数据」。
npm install
npm test
npm run dev- 数据导出 / 导入（JSON）
- 移动端响应式布局（列表/地图 Tab）
- 跨设备数据同步（Supabase 可选接入）
- 对比篮（宿主 + React 对比页）
- 粘贴原文落库
- 云同步冲突暂停策略
- 通勤顶栏视图维度
- 价格/通勤/状态筛选 + 详情 Sheet
- 决策字段：状态 / 评分 / 标签
- 演示数据一键载入
- 增量同步（dirty upsert + 本地/云端 tombstone）
- 房源分享卡片生成
- 共享常量单源（lib/constants → gen ESM
.mjs）+ smoke 冒烟 - 云端 sync_tombstones（跨设备删除一致性）
- Playwright E2E（宿主冒烟：
npm run test:e2e） - React 设计系统样板（列表 + 详情 Sheet）
- 地图 Tab 接入（
MapSurface+ 无 Key 降级；添加流仍在宿主） - 平台代付：Edge
parse-listing/geocode/commute+ 宿主 platform 默认 -
_AMapService安全代理（P4） - 微信小程序对接（P5；存储仍用 Supabase）
| 已落地 | 待后续 |
|---|---|
| P1–P3：Edge 代理、MapSurface、React 地图 Tab、platform 默认模式 | P4：_AMapService 代理，生产关闭 BYOK 默认入口 |
| 宿主高德 Logo/版权信息恢复可见（协议合规） | P5：微信小程序 + WechatNativeAdapter + 微信登录桥 |
设计细节见 docs/plans/2026-07-19-map-surface-and-secret-proxy-design.md。
MIT License © 2025 leonfighting-py