# item-front

**Repository Path**: M_sh/item-front

## Basic Information

- **Project Name**: item-front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-25
- **Last Updated**: 2025-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 农业数据查询助手

这是一个基于React的农业数据查询聊天界面，支持流式响应显示。

## 功能特性

- 🌾 农业数据智能查询
- 💬 实时流式响应显示
- 📊 分阶段数据处理展示
- 📱 响应式设计，支持移动端
- 🎯 意图识别 → 结构化提取 → 数据检索的完整流程
- 🔍 指标项悬浮提示框，显示详细的表格和字段信息

## 技术栈

- React 18
- CSS3 (渐变背景、毛玻璃效果)
- Fetch API (流式数据处理)
- Server-Sent Events 支持

## 安装和运行

1. 安装依赖：
```bash
npm install
```

2. 启动开发服务器：
```bash
npm start
```

3. 打开浏览器访问 http://localhost:3002

### 端口配置

要修改端口号，只需编辑根目录的 `.env` 文件：
```
PORT=3000
```
修改后重启应用即可生效。

**注意：** 如果设置的端口被占用，React会自动选择下一个可用端口。详细排查方法请查看 `PORT_TROUBLESHOOTING.md`

## 后端接口说明

接口地址：`http://172.20.0.89:8080/item-query/chat/stream`

请求格式：
```json
{
  "session_id": "31116767-931d-4a43-9958-f807b8eecf53",
  "interrupt_feedback": "",
  "query": "白菜",
  "type": "node_object"
}
```

响应格式（流式）：
1. 意图识别：`{"node": "意图识别", "data": {"result": "查询白菜"}, "timestamp": "2025-09-25 15:06:26"}`
2. 结构化提取：`{"node": "结构化提取", "data": {"items": ["白菜"], "indicators": [], "time": [], "address": "贵州省"}, "timestamp": "2025-09-25 15:06:28"}`
3. 指标检索：`{"node": "指标检索", "data": {"itemVOList": [...], "addressVOList": [...]}, "timestamp": "2025-09-25 15:06:28"}`

## 项目结构

```
src/
├── App.js          # 主应用组件
├── App.css         # 样式文件
├── index.js        # 入口文件
└── index.css       # 全局样式
test-chat.html      # 测试页面
```

## 核心功能

### 流式数据处理
- 使用 Fetch API 的 ReadableStream 处理流式响应
- 实时显示处理进度和结果
- 支持错误处理和重连
- 自动生成UUID格式的会话ID

### 界面设计
- 仿照现代聊天应用的UI设计
- 支持多种消息类型展示
- 响应式布局适配不同屏幕尺寸
- 三个处理节点的可视化展示

### 数据展示
- 意图识别结果展示
- 结构化数据可视化（统计项、指标、时间、地区）
- 检索结果格式化显示
- 指标项网格布局，显示相似度
- 悬浮提示框显示表格名称和字段列表

### 交互功能
- 支持Enter键发送消息
- 鼠标悬停显示详细信息
- 实时流式数据更新
- 加载状态指示

## 使用说明

1. 在输入框中输入查询内容，例如："白菜"、"玉米产量"等
2. 点击发送按钮或按Enter键发送查询
3. 系统会依次显示三个处理阶段：
   - 🎯 意图识别：理解用户查询意图
   - 🔍 结构化提取：提取关键信息（统计项、指标、时间、地区）
   - 📊 指标检索：返回匹配的指标项目
4. 在指标检索结果中，鼠标悬停在指标项上可查看详细的表格和字段信息

## 测试

打开 `test-chat.html` 文件可以进行功能测试，包括：
- API连接测试
- 流式数据接收测试
- 界面预览

## 注意事项

- 确保后端服务 `http://172.20.0.89:8080` 可访问
- 如果遇到CORS问题，需要在后端配置允许跨域访问
- 建议使用现代浏览器以获得最佳体验

## 项目重构

项目已经重构为模块化架构，具体结构请查看 `PROJECT_STRUCTURE.md`

### 重构后的优势

- 🏗️ **模块化架构**: 组件、Hook、服务层分离
- 🔧 **易于扩展**: 新功能可以独立开发和测试
- 📦 **代码复用**: 通用逻辑封装为Hook和工具函数
- 🧪 **便于测试**: 每个模块都可以独立测试
- 📚 **清晰结构**: 代码组织更加清晰，便于维护

### 主要模块

- `components/`: UI组件，负责渲染和交互
- `hooks/`: 自定义Hook，封装业务逻辑
- `services/`: API服务，处理数据请求
- `utils/`: 工具函数，提供通用功能
- `config/`: 配置文件，管理常量和配置

## 当前状态

✅ 应用已成功重构并运行在 http://localhost:3001
✅ 模块化架构完成，便于后期扩展
✅ 所有核心功能正常工作
✅ 代码结构清晰，易于维护
✅ 添加了详细的扩展指南