用 AI 做个旅行规划工具:前端基本框架

这是【用 AI 做个旅行规划工具】系列的第14篇文章。在上篇文章里，我们讲到切换到了“小项目模式”，以确保前端项目能够一步步完整地开发出来。这篇文章就给大家介绍一下，在我精心调试下，这个前端页面大概是什么样子的。

相关文章：用 AI 做个旅行规划工具：一览全局版

效果截图

这是目前的系统截图，目前左侧是方案列表，右侧是时间轴，还有两个浮动 Panel，分别是目的地和方案详情。

目前页面效果不如原型版完整美观，但是原型版所有的代码都在同一个文件里，而这一版的技术架构则是一个分层分块结构清晰的软件项目。

时间与地点

对于旅行规划工具而言，最核心的就是确定时间和地点。这也是本版本称为“基本框架”的原因，因为只把时间与地点的编辑功能做了出来。

在地点方面，采用手动输入的方式，支持添加多个不同的目的地。在时间方面，则提供了一个可拖拽的时间轴，用户可以直接在页面上拖动调整时间。

方案详情框

界面上还有一个“方案详情”框。其中，标题和摘要是可编辑的。下方有一段 JSON 代码，目前是用于调试的；等后续做得差不多了，这个调试框会被转换成一个详细的文本展示区域，内容会更清晰易读。

事件驱动

目前只完成了这个小的功能片段，但正如前面所说，它承担的是“输入”的角色。后续如果想要展示对应的天气、交通等信息，就可以在此基础上增加不同的信息展示面板。

基于我们之前的设计理念，各个面板之间不会直接通信，而是通过事件机制来驱动。当用户修改了时间或地点，整个页面会以事件广播的方式，将变更后的方案信息推送给各个面板。各个面板再根据自身的职责，分别展示相应的信息。

比如，天气面板可以根据地点和时间来展示相应的天气情况；交通面板则可以根据目的地和时间，展示不同的交通状况。

地图点选功能的设计

刚才提到，目的地的输入目前是靠手动完成的。实际上，在设计上，地图上的地点是可以直接点选的。点选地图上的某个位置后，可以将其添加到目的地列表中。不过，这个功能目前还没有实现，因为它涉及第三方接口的调用。在搭建第一版框架时，我暂时没有处理这部分。

当前状态与数据存储

目前这个版本还存在一些 Bug，不过作为基础框架，我觉得已经基本成型了。核心的时间和状态更新机制已经建立起来，后续在调试各个信息模块时，由于架构上各模块相互独立、互不影响，可以逐步完善。

当然，这个版本还没有接入后端。大家可以看到右上角有一个“local storage”的标签，目前的保存操作是将数据存储在浏览器的本地存储中。在设计上，无论是本地存储还是未来的远程存储接口，都遵循同一套接口规范，所以后续替换起来应该不会太复杂。

下一步计划

接下来的计划是先把页面上的 Bug 修一修，然后考虑将地图或天气功能接入进来，它们都需要接入第三方 API，相比其他数据，它们可能更容易接入一些。