【Code With SOLO】旅途智行 TripMind - 旅游数据分析与智能行程规划助手

SOLO挑战赛专区
1

【Code With SOLO】旅途智行 TripMind - 旅游数据分析与智能行程规划助手

摘要

本项目基于 React + TypeScript + Vite 开发了一款旅游数据分析与智能行程规划助手，整合小红书、抖音、大众点评等多平台数据，通过 AI 算法为用户生成个性化的旅行路线。借助 SOLO 的代码生成和架构设计能力，大幅加速了开发效率，最终产出一个可直接运行的完整 Web 应用。

背景

我是是一名后端开发者，平时主要Java和python，对数据可视化接触较少。前一阵子五一和对象出去旅游，发现做攻略是个很令人纠结的事 —— 要翻遍小红书、抖音、大众点评无数篇攻略，要比较各种路线的优劣，还要考虑交通、住宿、景点热度等等因素，整个过程非常耗时耗力。

所以有了这个想法：能不能做一个工具，把这些平台的数据整合起来，自动分析景点的热度、评价、标签，然后根据用户偏好智能生成行程？预期开发周期是 1-2 周，但希望借助 SOLO 压缩到几天内完成。

实践过程

1. 任务拆解

拿到这个需求后，我先让 SOLO 帮我做了一个整体的技术架构规划：

Prompt 示例：

我需要用 React + TypeScript 开发一个旅游数据分析与行程规划助手，请帮我拆解需要实现的核心模块，并给出技术实现建议：

  1. 数据结构设计（城市、景点、评价等）

  2. 多平台数据整合方案（小红书、抖音、大众点评）

  3. 数据可视化组件如何设计

  4. 智能行程生成算法思路

  5. 用户偏好系统设计

SOLO 输出： 帮我梳理出以下模块：

  • SearchPanel - 城市搜索与多城市选择

  • AnalysisPanel - 数据分析面板（景点热度、评价分析、标签云）

  • ItineraryPanel - 智能行程生成与展示

  • 类型定义 - CityData、HotSpot、Review、ItineraryItem 等

  • 工具函数 - itineraryGenerator（行程生成逻辑）

2. 核心代码生成

对于每个模块，我让 SOLO 逐个实现，并针对细节问题持续追问优化。

示例 - 城市数据类型定义：

export interface CityData {
  name: string;
  description: string;
  hotSpots: HotSpot[];
  reviews: Review[];
  tags: Tag[];
  transport: TransportInfo;
  hotels: Hotel[];
  bestSeason: string;
  tips: string[];
}
​
export interface HotSpot {
  id: string;
  name: string;
  description: string;
  score: number;
  bestTime: string;
  duration: number;
  tags: string[];
  images: string[];
  position: { lat: number; lng: number };
}
​
export interface Review {
  id: string;
  source: 'xiaohongshu' | 'douyin' | 'dianping';
  content: string;
  rating: number;
  date: string;
  author: string;
  images: string[];
  sentiment: 'positive' | 'neutral' | 'negative';
}

示例 - 行程生成逻辑：

const generateDaySchedule = (
  cityData: CityData,
  dayIndex: number,
  totalDays: number,
  globalDay: number
): DaySchedule => {
  const items: ItineraryItem[] = [];
  let currentHour = isFirstDay ? 6 : 7;
​
  // 生成时间线：起床 -> 早餐 -> 景点1 -> 午餐 -> 景点2 -> ... -> 晚餐 -> 酒店
  items.push({ time: '06:30', type: 'wake', title: '起床' });
  items.push({ time: '07:00', type: 'meal', title: '早餐' });
​
  // 根据热度排序选择景点
  const spotsToVisit = cityData.hotSpots.slice(0, 3);
​
  spotsToVisit.forEach((spot) => {
    // 添加交通安排
    items.push({
      type: 'transport',
      title: `前往${spot.name}`,
      transport: { type: '地铁', duration: '15分钟', price: '5元' }
    });
    // 添加景点游览
    items.push({
      type: 'spot',
      title: spot.name,
      description: `${spot.description} | 建议游览${spot.duration}小时`,
      duration: spot.duration * 60,
    });
  });
​
  return { day: globalDay, city: cityData.name, items, hotel };
};

3. 组件实现

景点热度图表组件：

const hotSpotsData = cityData.hotSpots.map(spot => ({
  name: spot.name.length > 6 ? spot.name.slice(0, 6) + '...' : spot.name,
  score: spot.score,
  fullName: spot.name,
}));
​
return (
  <ResponsiveContainer width="100%" height="100%">
    <BarChart data={hotSpotsData} layout="vertical">
      <XAxis type="number" domain={[0, 100]} hide />
      <YAxis type="category" dataKey="name" width={80} tick={{ fontSize: 12 }} />
      <Tooltip content={...} />
      <Bar dataKey="score" fill="#10B981" radius={[0, 8, 8, 0]} />
    </BarChart>
  </ResponsiveContainer>
);

评价情感分析饼图：

const sentimentData = [
  { name: '好评', value: reviews.filter(r => r.sentiment === 'positive').length, color: '#10B981' },
  { name: '中评', value: reviews.filter(r => r.sentiment === 'neutral').length, color: '#F59E0B' },
  { name: '差评', value: reviews.filter(r => r.sentiment === 'negative').length, color: '#EF4444' },
];
​
// 环形饼图展示
<PieChart>
  <Pie data={sentimentData} cx="50%" cy="50%" innerRadius={50} outerRadius={80} />
</PieChart>

4. 踩坑记录

坑1：状态管理混乱

初始方案把所有状态都放在 App.tsx，通过 props 层层传递，导致组件层级很深，props drilling 问题严重。

解决：使用 React Hooks（useState）管理本地状态，将相关状态就近管理，减少不必要的 props 传递。

坑2：行程生成算法不够智能

初始方案只是简单按顺序排列景点，没有考虑地理位置、交通时间、游玩时长等因素。

解决：引入时间线推进机制，根据每个景点的建议游览时长动态计算下一站的开始时间，并随机插入交通时间模拟真实规划。

坑3：数据可视化图表响应式

在不同屏幕尺寸下，图表可能显示不全或者留白太多。

解决：使用 Recharts 的 ResponsiveContainer 组件，设置为 100% 宽高自适应容器。

成果展示

在线试玩： 本地部署运行 npm run dev

截图展示：

image
image1920×911 81.2 KB

image
image1920×911 128 KB

image
image1920×911 138 KB

image
image1920×911 107 KB

功能特色

功能 说明
多平台数据整合 整合小红书、抖音、大众点评的景点评论和评分
景点热度分析 基于评分和评论数量计算景点热度排行
情感分析 自动分析评价情感（好评/中评/差评）
热门标签提取 从评论中提取高频关键词生成标签云
多城市联游 支持添加多个城市，设置各自游玩天数
智能行程生成 根据景点热度、交通、时间自动规划每日行程
出行偏好设置 支持情侣/亲子/独自/闺蜜等人群，预算可选
一键复制行程 生成后可复制为文本格式方便分享

技术栈

  • 框架：React 18 + TypeScript

  • 构建工具：Vite

  • 样式：Tailwind CSS

  • 图表：Recharts

  • 图标：Lucide React

  • 字体：Noto Sans SC + Noto Serif SC

效果与总结

提效数据：

  • 原本预估 2 周的开发周期，实际用 SOLO 辅助编程，4 天完成核心功能

  • 重复性代码（如类型定义、组件模板）通过批量生成节省约 50% 时间

  • SOLO 在流程中的价值：

    • 快速生成基础代码框架，减少 Boilerplate

    • 提供架构建议和设计模式参考

    • 帮忙调试和优化代码问题

可复用方法：

  1. 先让 SOLO 做架构规划，再逐步细化实现

  2. 对复杂逻辑先手写伪代码，再让 SOLO 转换成实际代码

  3. 遇到报错直接贴给 SOLO 分析，定位速度快

后续优化方向：

  • 接入真实 API 获取社交媒体数据

  • 增加地图展示功能（景点地理位置可视化）

  • 支持用户自定义行程（拖拽调整顺序）

  • 增加AI对话功能，让用户用自然语言修改行程

  • 添加分享编辑功能，用户可以对结果进行分享调整

2

有代码仓库吗？

1 个赞
3

没有 目前只在我本地

1 个赞