[项目实训博客-TravelMind途灵] 4 地图界面的优化以及将通过api获取车票信息封装成函数以便于agent调用-CSDN博客

本文链接：https://blog.csdn.net/Conceal__/article/details/147641215

本阶段进行的工作包括对地图界面的优化以及将通过api获取车票信息封装成函数以便于agent调用获取信息。

一、通过api获取车票的信息并将其封装成函数以便于agent的调用

通过调用火车票查询API获取数据。它接收日期、出发站和到达站作为参数，使用axios发送HTTP请求，并添加必要的认证头信息。返回的列车数据经过格式化处理，包括车次、起止站、发车/到达时间、历时和座位余票情况（如二等座、一等座等）之后用错误处理机制，能够区分HTTP错误、无响应错误和请求配置错误等情况，以便于处理运行时可能出现的错误。

示例调用：

二、添加并优化agent等待时的交互

添加并优化输入信息后agent等待界面，以改善用户等待agent回复时的体验。

三、优化地图功能按钮等交互

优化了地图功能按钮的交互以及悬浮的功能显示。

.toggle-button {
  padding: 8px 18px;
  background-color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #1f1f1f;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.toggle-button:hover {
  background-color: #f0f0f0;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.toggle-button:active {
  transform: scale(0.97);
}

/* 包裹按钮的定位容器 */
.tooltip-wrapper {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 999;
}

/* 提示文字样式 */
.tooltip-text {
  position: absolute;
  top: 50%;
  left: 110%;
  transform: translateY(-50%);
  background-color: rgba(50, 50, 50, 0.9);
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}

.tooltip-wrapper:hover .tooltip-text {
  opacity: 1;
}