# MyAgent-front

**Repository Path**: MayLight/MyAgent-front

## Basic Information

- **Project Name**: MyAgent-front
- **Description**: 测试少时诵诗书所所所所所所所撒所所所所所所所所撒
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-11
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Agent Chat 前端

基于 Vue 3 + JavaScript + Tailwind CSS + Element Plus 的聊天界面。

## 功能特性

- ✅ 流式聊天响应（实时显示AI回复）
- ✅ 响应式设计（支持PC和移动端）
- ✅ 消息历史记录
- ✅ 错误处理和重试
- ✅ 打字机效果
- ✅ 自动滚动到底部
- ✅ ArcGIS 地图集成（使用天地图作为底图，支持地图展示和操作）
- ✅ 路由导航（聊天页面和地图页面切换）

## 技术栈

- **Vue 3** - 渐进式JavaScript框架
- **Vite** - 快速的前端构建工具
- **Tailwind CSS** - 实用优先的CSS框架
- **Element Plus** - Vue 3组件库
- **Axios** - HTTP客户端
- **Vue Router** - Vue.js 官方路由管理器
- **esri-loader** - ArcGIS API for JavaScript 异步加载工具
- **ArcGIS API 3.32** - Esri 地图服务 API

## 安装和运行

### 1. 安装依赖

```bash
cd frontend
npm install
```

### 2. 配置API地址

创建 `.env` 文件（可选，默认使用 `http://localhost:8001`）：

```env
VITE_API_BASE_URL=http://localhost:8001
```

### 3. 启动开发服务器

```bash
npm run dev
```

前端将在 `http://localhost:3000` 启动。

### 4. 构建生产版本

```bash
npm run build
```

构建文件将输出到 `dist` 目录。

## 项目结构

```
frontend/
├── src/
│   ├── components/      # Vue组件
│   │   ├── ChatContainer.vue    # 聊天容器（主组件）
│   │   ├── MessageList.vue      # 消息列表
│   │   ├── MessageItem.vue      # 单条消息
│   │   ├── InputArea.vue        # 输入区域
│   │   └── MapContainer.vue     # 地图容器组件
│   ├── views/           # 页面视图
│   │   ├── ChatPage.vue         # 聊天页面
│   │   └── MapPage.vue          # 地图页面
│   ├── map/             # 地图相关模块
│   │   ├── config.js            # 地图配置文件
│   │   └── init.js              # 地图初始化类
│   ├── router/          # 路由配置
│   │   └── index.js             # 路由定义
│   ├── services/        # API服务
│   │   └── api.js       # API调用封装
│   ├── utils/           # 工具函数
│   │   ├── constants.js # 常量配置
│   │   └── index.js     # 通用工具函数
│   ├── App.vue          # 根组件
│   ├── main.js          # 入口文件
│   └── style.css        # 全局样式
├── index.html           # HTML模板
├── package.json         # 项目配置
├── vite.config.js       # Vite配置
└── tailwind.config.js   # Tailwind配置
```

## 使用说明

1. 确保后端API服务器已启动（`python api.py`）
2. 启动前端开发服务器（`npm run dev`）
3. 在浏览器中打开 `http://localhost:3000`
4. 开始与Agent对话或查看地图

### 页面导航

- **聊天页面** (`/`)：默认页面，用于与Agent对话
- **地图页面** (`/map`)：显示ArcGIS地图，可以通过聊天页面右上角的"查看地图"按钮进入

## 功能说明

### 发送消息
- 在输入框中输入消息
- 点击"发送"按钮或按 `Enter` 键发送
- 按 `Shift + Enter` 换行

### 流式响应
- AI回复会实时显示（打字机效果）
- 支持长文本流式输出

### 错误处理
- 如果请求失败，会显示错误提示
- 点击"重试"按钮可以重新发送最后一条消息

### 清空对话
- 点击右上角的"清空对话"按钮可以清除所有消息

## 响应式设计

- **PC端（≥768px）**：居中布局，最大宽度1200px
- **移动端（<768px）**：全屏布局，优化触摸体验

## 开发说明

### 修改API地址

在 `src/utils/constants.js` 中修改 `API_BASE_URL`，或通过环境变量 `VITE_API_BASE_URL` 配置。

### 自定义样式

使用 Tailwind CSS 类名进行样式定制，或修改 `src/style.css` 添加全局样式。

### 添加新功能

- 新组件放在 `src/components/` 目录
- API调用放在 `src/services/api.js`
- 工具函数放在 `src/utils/` 目录
- 新页面放在 `src/views/` 目录，并在 `src/router/index.js` 中配置路由

## 地图功能说明

### ArcGIS 地图集成 - 天地图版本

本项目集成了 ArcGIS API for JavaScript 3.32 版本，使用天地图作为底图服务，支持地图展示和基本操作。

#### 配置文件

地图配置位于 `src/map/config.js`，可以修改以下配置：

- **loadConfig.url**：ArcGIS API 加载地址
  - 默认使用 ArcGIS Online CDN：`https://js.arcgis.com/3.32/init.js`
  - 如果使用本地部署的 API，修改为本地地址，例如：`http://localhost:3000/arcgis-3.32/init.js`

- **tiandituConfig.type**：天地图类型
  - `'vec'`：矢量地图（带标注）- 默认
  - `'img'`：影像地图（带标注）
  - `'ter'`：地形地图（带标注）
  - `'vec_none'`：矢量地图（无标注）
  - `'img_none'`：影像地图（无标注）
  - `'ter_none'`：地形地图（无标注）

- **tiandituConfig.token**：天地图 Token（可选）
  - 普通使用不需要 Token
  - 如果需要高并发访问，建议申请 Token
  - 申请地址：https://lbs.tianditu.gov.cn/server/MapService.html

- **tiandituConfig.showLabel**：是否显示标注图层
  - `true`：显示标注（默认）
  - `false`：不显示标注
  - 注意：如果 `type` 包含 `_none`，此选项无效

- **startExtent**：地图初始化显示范围 `[xmin, ymin, xmax, ymax]`
  - 默认使用中国山东省的坐标范围
  - 可以根据需要修改为其他地区

- **zoom**：地图初始缩放级别（默认：10）
- **maxZoom**：地图最大缩放级别（默认：18）
- **minZoom**：地图最小缩放级别（默认：3）

#### 使用方法

1. **基本使用**：
   ```javascript
   import ArcGIS from './map/init.js'
   const map = new ArcGIS()
   map.init('map') // 'map' 是地图容器的 DOM 元素 ID
   ```

2. **添加图层**：
   ```javascript
   // 添加单个图层
   map.addLayer(layer)
   
   // 批量添加图层
   map.addLayer([layer1, layer2], [0, 1])
   ```

3. **移除图层**：
   ```javascript
   // 移除单个图层
   map.removeLayer(layer)
   
   // 批量移除图层
   map.removeLayer([layer1, layer2])
   ```

4. **设置地图中心点**：
   ```javascript
   map.setCenter(经度, 纬度, 缩放级别)
   ```

5. **设置地图范围**：
   ```javascript
   map.setExtent([xmin, ymin, xmax, ymax])
   ```

#### 本地部署 ArcGIS API（可选）

如果需要在本地部署 ArcGIS API（开发环境推荐）：

1. 下载 ArcGIS API for JavaScript 3.32 版本
2. 将 API 文件部署到本地服务器（例如：`http://localhost:3000/arcgis-3.32/`）
3. 修改 `src/map/config.js` 中的 `loadConfig.url` 为本地地址

#### 天地图服务说明

- **服务类型**：天地图是中国的官方地图服务，提供矢量、影像、地形等多种地图类型
- **坐标系**：使用 WGS84 坐标系（EPSG:4326）
- **服务地址**：`https://t{s}.tianditu.gov.cn/DataServer`
- **服务器编号**：支持 0-7 共 8 个服务器，自动负载均衡
- **Token 申请**：普通使用不需要 Token，高并发访问建议申请
  - 申请地址：https://lbs.tianditu.gov.cn/server/MapService.html
  - 申请后，在 `config.js` 中配置 `tiandituConfig.token`

#### 切换地图类型

修改 `src/map/config.js` 中的 `tiandituConfig.type` 即可切换地图类型：

```javascript
// 矢量地图（带标注）
tiandituConfig: {
  type: 'vec',
  showLabel: true,
}

// 影像地图（带标注）
tiandituConfig: {
  type: 'img',
  showLabel: true,
}

// 地形地图（无标注）
tiandituConfig: {
  type: 'ter_none',
  showLabel: false,
}
```

#### 注意事项

1. **网络连接**：使用 ArcGIS Online CDN 需要网络连接，如果网络不稳定，建议使用本地部署
2. **API 密钥**：某些 ArcGIS Online 服务可能需要 API 密钥，请根据实际情况配置
3. **坐标系**：默认使用 WGS84 坐标系（wkid: 4326），如果使用其他坐标系，需要相应调整
4. **性能优化**：地图加载是异步的，建议在地图加载完成后再进行其他操作