# 旅行攻略地图转换工具 - 项目概述

## 1. 产品说明文档

### 1.1 产品概述

**产品名称**：路书（Route Note）

**产品定位**：一款将文字旅游攻略转换为直观地图可视化的小程序工具

**核心价值**：帮助用户快速理解旅游攻略路线，提供清晰的地图视图和关键信息提取，优化旅行规划体验

**目标用户**：

- 自助旅行爱好者
- 旅游攻略浏览者
- 旅行规划者

### 1.2 核心功能

**1. 攻略链接解析**

- 支持用户粘贴小红书等平台的攻略链接
- 自动提取文字内容并进行结构化处理

**2. 地图可视化展示**

- 在二维地图上展示行程路线和关键点位
- 使用不同颜色区分多日行程
- 提供景点、餐厅、住宿等不同类型的标记

**3. 文字与地图联动**

- 应用上方地图路线，下方文字攻略
- 点击地图标记，相应文字部分高亮并自动滚动至视图
- 浏览文字时，对应地图点位突出显示

**4. 内容编辑功能**

- 支持用户修正提取不准确的信息
- 允许添加/删除/调整地图点位
- 支持编辑点位详细信息

**5. 行程管理**

- 收藏多个行程计划
- 多日行程规划与管理
- 行程分享功能

### 1.3 产品差异化

- **专注简洁实用**：二维地图展示，清晰直观，性能优先
- **强联动体验**：地图与文字紧密结合，双向互动，界面上方地图路线，下方文字攻略。
- **用户主导**：由用户提供内容源，规避内容合规风险
- **高度可定制**：用户可自由编辑优化提取结果

### 1.4 商业模式

**基础版（免费）**：

- 攻略转换基本功能
- 地图基础可视化
- 有限次数的攻略解析

**高级版（付费）**：

- 更高精度的内容提取（调用大模型）
- 多日复杂行程规划
- 离线地图导出
- 行程PDF生成

**收费方式**：

- 积分制（新用户赠送基础积分）
- 包月/包年订阅
- 单次付费解锁

## 2. 技术架构

### 2.1 技术栈选型

**前端技术**：

- **框架**：Taro 3.x（跨端开发，一套代码多平台运行）
- **UI库**：NutUI（京东风格组件库，适配Taro）
- **状态管理**：Pinia（轻量级状态管理）
- **地图**：高德地图小程序SDK

**后端技术**：

- **框架**：Node.js + Koa2（轻量高效）
- **数据库**：MongoDB（文档型，适合存储半结构化数据）
- **缓存**：Redis（提高响应速度）
- **NLP处理**：自建规则引擎 + 选择性调用大模型API

**部署方案**：

- 腾讯云Serverless（按量计费，降低初期成本）
- 对象存储COS（存储用户生成内容）
- 微信云开发（小程序集成）

### 2.2 系统架构图

```
客户端层
└─ 小程序 (Taro)
   ├─ 页面模块
   │  ├─ 首页/链接输入
   │  ├─ 攻略地图展示
   │  ├─ 内容编辑
   │  └─ 个人中心
   ├─ 组件
   │  ├─ 地图组件
   │  ├─ 文字攻略组件
   │  └─ 编辑器组件
   └─ 状态管理 (Pinia)

API网关层
└─ 统一接口 (Koa2)
   ├─ 用户认证
   ├─ 请求分发
   ├─ 限流控制
   └─ 日志记录

服务层
├─ 用户服务
│  ├─ 注册/登录
│  ├─ 积分管理
│  └─ 订阅管理
├─ 内容处理服务
│  ├─ 链接解析
│  ├─ 文本提取
│  ├─ NLP分析
│  └─ 地点识别
├─ 地图服务
│  ├─ 地理编码
│  ├─ 路线规划
│  └─ POI搜索
└─ 存储服务
   ├─ 攻略管理
   ├─ 用户数据
   └─ 系统配置

数据层
├─ MongoDB (主数据库)
├─ Redis (缓存)
└─ 腾讯云COS (对象存储)
```

### 2.3 数据流程

1. **攻略解析流程**：
    
    - 用户输入链接 → 后端抓取内容 → 文本分析 → 地点识别 → 地理编码 → 结构化数据返回 → 前端展示
2. **用户交互流程**：
    
    - 地图点击 → 获取点位ID → 查找对应文本段 → 滚动到指定位置 → 高亮显示
3. **数据存储流程**：
    
    - 用户提交保存 → 数据序列化 → 权限验证 → 存储到MongoDB → 返回确认

### 2.4 API设计（核心接口）

```
API前缀: /api/v1

用户相关:
- POST /user/login        # 登录
- GET  /user/profile      # 获取用户信息
- POST /user/points/add   # 增加积分

内容解析:
- POST /parse/link        # 解析攻略链接
- POST /parse/text        # 解析纯文本

地图服务:
- POST /map/geocode       # 地点转坐标
- GET  /map/poi           # POI搜索
- POST /map/route         # 路线规划

行程管理:
- GET  /trips             # 获取行程列表
- POST /trips             # 创建行程
- GET  /trips/:id         # 获取行程详情
- PUT  /trips/:id         # 更新行程
- DEL  /trips/:id         # 删除行程
```

## 3. 需求文档

### 3.1 功能需求

#### 3.1.1 用户管理模块

|需求ID|需求描述|优先级|
|---|---|---|
|UR-001|用户微信一键登录|高|
|UR-002|用户信息展示和编辑|中|
|UR-003|积分余额查询和充值|中|
|UR-004|会员订阅与管理|低|

#### 3.1.2 攻略解析模块

|需求ID|需求描述|优先级|
|---|---|---|
|PR-001|支持小红书链接输入和解析|高|
|PR-002|支持攻略文本直接输入|高|
|PR-003|支持攻略截图识别(OCR)|低|
|PR-004|结构化提取关键信息（地点、时间、交通等）|高|
|PR-005|准确识别攻略中的地理位置信息|高|
|PR-006|多种识别模式选择（基础/高级）|中|

#### 3.1.3 地图可视化模块

|需求ID|需求描述|优先级|
|---|---|---|
|MP-001|在二维地图上标注识别出的地点|高|
|MP-002|按时序自动连接路线|高|
|MP-003|不同类型地点使用不同图标标注|中|
|MP-004|支持多日行程不同颜色区分|中|
|MP-005|地图缩放、平移等基本操作|高|
|MP-006|点击地图标记显示详细信息|高|

#### 3.1.4 文字攻略展示模块

|需求ID|需求描述|优先级|
|---|---|---|
|TX-001|显示原始攻略文字内容|高|
|TX-002|点击地图标记时，对应文字部分高亮并自动滚动|高|
|TX-003|滚动至文字部分时，对应地图标记突出显示|中|
|TX-004|支持文字搜索功能|低|

#### 3.1.5 编辑与优化模块

|需求ID|需求描述|优先级|
|---|---|---|
|ED-001|支持用户添加/删除/移动地图标记|高|
|ED-002|支持编辑每个标记点的详细信息|高|
|ED-003|支持修改路线连接顺序|中|
|ED-004|支持添加自定义备注和提醒|中|
|ED-005|支持编辑后的内容保存|高|

#### 3.1.6 行程管理模块

|需求ID|需求描述|优先级|
|---|---|---|
|TR-001|行程保存功能|高|
|TR-002|行程列表查看|高|
|TR-003|行程分享功能（生成分享卡片）|中|
|TR-004|导出行程（PDF/图片格式）|低|
|TR-005|多设备同步行程数据|低|

### 3.2 非功能需求

#### 3.2.1 性能需求

|需求ID|需求描述|优先级|
|---|---|---|
|PF-001|攻略解析响应时间不超过3秒|高|
|PF-002|地图加载时间不超过2秒|高|
|PF-003|小程序包大小控制在2MB以内|中|
|PF-004|支持并发用户100人以上|中|

#### 3.2.2 安全需求

|需求ID|需求描述|优先级|
|---|---|---|
|SC-001|用户数据加密存储|高|
|SC-002|防止恶意攻击和非法调用API|高|
|SC-003|合规的用户授权和隐私政策|高|

#### 3.2.3 可用性需求

|需求ID|需求描述|优先级|
|---|---|---|
|US-001|界面设计简洁直观，操作流程不超过3步|高|
|US-002|提供使用引导和帮助说明|中|
|US-003|适配不同尺寸的移动设备|高|
|US-004|支持离线查看已保存的行程|中|

### 3.3 技术实现详细说明

#### 3.3.1 Taro框架实现方案

选择Taro 3.x的理由：

- 支持React语法，开发效率高
- 一套代码可同时适配微信小程序、H5、App等多平台
- 生态完善，组件丰富
- 社区活跃，易于解决问题

实现结构：

```
src/
├─ pages/             # 页面目录
│  ├─ index/          # 首页
│  ├─ parse/          # 攻略解析页
│  ├─ map/            # 地图展示页
│  ├─ edit/           # 编辑页面
│  └─ user/           # 用户中心
├─ components/        # 组件目录
│  ├─ MapView/        # 地图组件
│  ├─ TextViewer/     # 文字查看组件
│  ├─ PointEditor/    # 点位编辑组件
│  └─ RouteViewer/    # 路线展示组件
├─ services/          # 服务
│  ├─ api.js          # API接口封装
│  ├─ parse.js        # 解析服务
│  └─ map.js          # 地图服务
├─ store/             # 状态管理
│  ├─ user.js         # 用户状态
│  ├─ trip.js         # 行程状态
│  └─ ui.js           # UI状态
├─ utils/             # 工具函数
├─ app.config.js      # 应用配置
├─ app.js             # 应用入口
└─ index.html         # H5入口
```

#### 3.3.2 NLP实现方案

采用分层处理策略：

1. **基础层（规则引擎）**：
    
    - 正则表达式识别常见格式（"第X天"、"XX点出发"等）
    - 关键词匹配（景点名称、时间表达）
    - 文本分段和上下文关联
2. **增强层（轻量级模型）**：
    
    - 使用轻量级命名实体识别(NER)模型
    - 地点、时间、交通工具等实体提取
    - 部署在服务端，按需调用
3. **高级层（大模型API）**：
    
    - 调用大模型API处理复杂文本
    - 提取隐含关系和上下文信息
    - 作为付费功能，用户选择性使用

#### 3.3.3 地图实现方案

基于高德地图小程序SDK：

1. **地图初始化**：
    
    - 根据提取点位自动计算合适的缩放级别和中心点
    - 预加载地图资源提高响应速度
2. **标记点位处理**：
    
    - 自定义Marker组件展示不同类型的点位
    - 点击事件绑定和信息窗体优化
    - 动画效果增强用户体验
3. **路线绘制**：
    
    - 使用Polyline连接点位
    - 不同日期使用不同颜色区分
    - 支持虚线表示不确定路线
4. **地图与文本联动**：
    
    - 建立地图点位与文本段落索引关系
    - 使用ScrollView组件控制文本滚动
    - 监听滚动事件实现双向联动

#### 3.3.4 数据库设计

**User集合**：

```json
{
  "_id": "用户ID",
  "openid": "微信openid",
  "nickName": "用户昵称",
  "avatarUrl": "头像URL",
  "points": 100,           // 积分
  "membership": {          // 会员信息
    "level": "free",       // free, premium
    "expireDate": "2023-12-31"
  },
  "createdAt": "2023-01-01T00:00:00Z",
  "lastLoginAt": "2023-01-01T00:00:00Z"
}
```

**Trip集合**：

```json
{
  "_id": "行程ID",
  "userId": "用户ID",
  "title": "行程标题",
  "source": "内容来源",
  "sourceUrl": "原始链接",
  "days": 3,              // 行程天数
  "createdAt": "2023-01-01T00:00:00Z",
  "updatedAt": "2023-01-01T00:00:00Z",
  "isPublic": false,      // 是否公开
  "viewCount": 0,         // 查看次数
  "content": {            // 结构化内容
    "rawText": "原始文本",
    "points": [           // 地点数组
      {
        "id": "p1",
        "name": "地点名称",
        "type": "scenic", // scenic, food, hotel, transport
        "coordinate": [116.123, 39.456],
        "day": 1,         // 第几天
        "order": 1,       // 当天顺序
        "description": "描述信息",
        "tips": "提示信息",
        "startTime": "09:00",
        "duration": 120,   // 停留时间(分钟)
        "textSegmentIds": ["seg1", "seg2"]
      }
      // 更多地点...
    ],
    "routes": [           // 路线数组
      {
        "from": "p1",
        "to": "p2",
        "transport": "bus",
        "duration": 30,    // 时间(分钟)
        "distance": 5,     // 距离(公里)
        "description": "乘坐10路公交"
      }
      // 更多路线...
    ],
    "textSegments": [     // 文本段落
      {
        "id": "seg1",
        "content": "文本内容",
        "position": 0,     // 在原文中的位置
        "relatedPointIds": ["p1"]
      }
      // 更多文本段...
    ]
  }
}
```

### 3.4 迭代计划

#### 第一阶段 (MVP )

- 核心功能实现：链接解析、基础地图展示
- 重点区域：成都及周边川西地区支持
- 基础用户系统

#### 第二阶段

- 增强NLP能力，提高提取准确率
- 完善编辑功能和用户体验
- 积分系统与付费功能
- 扩大支持地区范围

#### 第三阶段 

- 社区功能：用户分享、点评
- 多平台支持：H5版本
- 更多数据源支持
- 高级分析功能

## 4. UI设计规范

### 4.1 色彩系统

**主色调**：

- 主色：#3B7FFF (蓝色) - 代表旅行、探索
- 辅助色：#FFB443 (橙色) - 代表活力、温暖
- 背景色：#F8FAFC (淡灰) - 清爽、不干扰内容

**功能色**：

- 成功：#36B37E
- 警告：#FFAB00
- 错误：#FF5630
- 链接：#0065FF

### 4.2 字体系统

- 主标题：18px, 粗体
- 副标题：16px, 半粗体
- 正文：14px, 常规
- 辅助文本：12px, 常规
- 图标文本：10px, 常规

### 4.3 交互设计

- 点击反馈：轻微缩放+高亮效果
- 加载状态：简洁的骨架屏+进度指示
- 转场动画：自然流畅，duration控制在300ms内
- 手势操作：支持地图常见手势（缩放、平移）

### 4.4 关键页面原型

1. **首页**：
    
    - 顶部导航栏（Logo + 用户头像）
    - 输入框（粘贴链接）+ 解析按钮
    - 最近行程卡片列表
    - 底部导航栏
2. **地图展示页**：
    
    - 顶部：行程标题 + 编辑按钮
    - 中部：地图视图（占40%高度）
    - 底部：可滑动文字攻略（占60%高度）
    - 右下角：功能浮动按钮（保存、分享）
3. **编辑页面**：
    
    - 顶部：编辑工具栏
    - 中部：地图+地点列表双视图
    - 底部：确认/取消按钮
4. **用户中心**：
    
    - 用户信息卡片
    - 我的行程列表
    - 积分/会员信息
    - 设置选项

---

这份详细的项目概述提供了路书小程序从产品定位、技术架构到具体需求的全面规划。使用Taro框架可以确保跨平台兼容性，同时保持开发效率。在实现过程中，建议采用迭代式开发，先推出MVP验证市场需求，再逐步完善功能和用户体验。