智能旅游助手是一个基于大语言模型的 Web 端出行规划应用。用户在首页选择目的地城市(内置近 40 个热门城市)、输入预算与出行天数,一键生成个性化行程方案:行程方案页按天展示上午/下午/晚上三时段的景点安排,提供住宿、餐饮、交通、门票、其他五类预算明细,并给出出行贴士与注意事项;还可携带城市上下文一键跳转 AI 对话,继续追问目的地信息。AI 对话页内置常用快捷问题,回答以打字机方式流式输出,支持随时停止生成。“我的”页面提供应用介绍。整体覆盖行前规划到行中咨询的完整出行场景。
项目采用 Vue 3 + Vite 构建,使用 Composition API 组织页面逻辑,Vue Router 管理首页、行程方案、AI 对话、我的四个页面并按需懒加载,Vant UI 还原移动端交互(NavBar、Picker、Collapse、Toast、Loading、Empty 等)。行程规划通过 Axios 封装(统一请求/响应拦截器)调用后端 POST /api/travel/recommend,前端完成表单校验(预算大于 100 元、天数 1–30 天),SpotItem 与 BudgetTable 组件分别渲染景点条目与预算明细。AI 对话基于 SSE 流式传输:使用 fetch + ReadableStream 读取响应体,TextDecoder 增量解码,按行解析 data: 消息协议,配合 AbortController 支持中途停止生成,ChatBubble 组件逐字渲染实现打字机效果。后端由 Node.js/Express 提供 recommend 与 chat 两个接口,对接大模型完成行程生成与智能问答。