TripStar Frontend

TripStar 多智能体旅行规划系统的 Vue 3 前端

TripStar Frontend 是 TripStar 的独立 Web 客户端。它提供自主规划和指定小红书笔记规划两个入口，通过 WebSocket 展示多 Agent 工作流进度，并将生成结果呈现为每日行程、真实地图路线、景点图片、预算与知识图谱。

• 前端 GitHub：LeeFly-cn/TripStar-Frontend
• 后端 GitHub：LeeFly-cn/TripStar-Java
• 后端 Gitee：haigoya_admin/trip-star-java
• 社区：LinuxDo

项目预览

双模式规划入口

行程概览	每日行程
景点地图与真实路线	预算明细

功能

• 自主规划：输入目的地、日期、交通、住宿偏好和补充要求生成旅行攻略。
• 指定笔记规划：输入一个或多个小红书链接、分享口令或攻略正文，由多模态模型识别文字与图片内容。
• 实时进度：展示小红书研究、高德 POI、天气、酒店餐饮、行程生成和质检等阶段。
• 地图路线：按天展示景点顺序、路线规划、景点卡片和 1-1、1-2 等行程标记。
• 攻略结果：展示每日安排、酒店、三餐、费用、注意事项和景点图片。
• 知识图谱：可视化城市、景点、住宿、餐饮与行程之间的关系。
• 攻略导出：将完整结果导出为便于保存和分享的长图。
• 运行时配置：在页面中配置后端地址、小红书 Cookie、高德 Key 和模型参数。
• 国际化：支持简体中文、英文和日文。

技术栈

• Vue 3 + TypeScript
• Vite 6
• Ant Design Vue
• 高德地图 JS API 2.0
• ECharts
• Axios
• Vue Router + Vue I18n

环境要求

• Node.js 20+
• npm 10+
• 已启动的 TripStar Java 后端

本地启动

npm install
cp .env.example .env
npm run dev

Windows PowerShell 可以使用：

Copy-Item .env.example .env
npm run dev

默认访问地址：http://localhost:5173

环境变量

# Java 后端地址
VITE_API_BASE_URL=http://localhost:8080

# 高德 Web 服务 API Key
VITE_AMAP_WEB_KEY=your_amap_web_service_key_here

# 高德 Web 端 JS API Key
VITE_AMAP_WEB_JS_KEY=your_amap_web_js_key_here

# 高德 JS API 2.0 安全密钥
VITE_AMAP_SECURITY_JS_CODE=your_amap_security_js_code_here

高德地图需要同时配置 Web 端 JS API Key 和安全密钥。Web 服务 API Key 主要由后端调用 POI、天气、酒店和餐饮接口。

构建

npm run build

构建产物位于 dist/。

后端接口

前端主要使用以下接口：

接口	用途
POST /api/trips	提交自主规划任务
POST /api/trips/xhs-notes	提交指定笔记规划任务
GET /api/trips/{taskId}	查询任务状态和最终结果
GET /api/trips/{taskId}/events	接收任务进度事件
GET /api/settings	读取运行时配置
PUT /api/settings	更新运行时配置
GET /api/poi/photo	获取景点图片

接口字段和服务端配置请查看 TripStar Java README。

项目结构

src/
├── components/       # 导航、表单和通用组件
├── i18n/             # 中文、英文和日文文案
├── router/           # 页面路由
├── services/         # 后端 API 与运行时配置
├── styles/           # 全局样式
├── types/            # TypeScript 数据结构
└── views/            # 首页、生成进度和结果页

许可证

本项目使用 GPL-2.0 License。