# TSP智能助手前端

基于 Vue 3 + TypeScript + Element Plus 的现代化前端应用。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - JavaScript 的超集，提供类型安全
- **Element Plus** - Vue 3 组件库
- **Vite** - 快速构建工具
- **Vue Router** - 官方路由管理器
- **Pinia** - 状态管理库
- **Vue I18n** - 国际化解决方案
- **Socket.IO** - 实时通信
- **ECharts** - 数据可视化

## 项目结构

```
frontend/
├── src/
│   ├── components/          # 公共组件
│   │   └── ChatWidget.vue  # 聊天组件
│   ├── views/              # 页面组件
│   │   ├── Dashboard.vue   # 仪表板
│   │   ├── Chat.vue        # 聊天页面
│   │   ├── Alerts.vue      # 预警管理
│   │   ├── AlertRules.vue  # 预警规则
│   │   ├── Knowledge.vue   # 知识库
│   │   ├── FieldMapping.vue # 字段映射
│   │   └── System.vue      # 系统设置
│   ├── stores/             # 状态管理
│   │   ├── useAppStore.ts  # 应用状态
│   │   ├── useChatStore.ts # 聊天状态
│   │   └── useAlertStore.ts # 预警状态
│   ├── router/             # 路由配置
│   ├── i18n/               # 国际化
│   ├── App.vue             # 根组件
│   └── main.ts             # 入口文件
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md
```

## 功能特性

### 🎯 核心功能
- **统一聊天系统** - 支持首页和独立页面的聊天功能
- **预警管理** - 实时预警监控和规则管理
- **知识库管理** - 智能知识库的增删改查
- **字段映射** - 灵活的字段映射配置
- **系统监控** - 系统状态和性能监控

### 🌍 国际化支持
- 支持中文/英文切换
- 完整的国际化文本覆盖
- Element Plus 组件国际化

### 🎨 现代化UI
- 响应式设计，支持移动端
- 暗色/亮色主题切换
- 优雅的动画效果
- 统一的视觉风格

### 🔧 开发体验
- TypeScript 类型安全
- 组件自动导入
- 热重载开发
- ESLint 代码规范

## 快速开始

### 安装依赖

```bash
cd frontend
npm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:3000

### 构建生产版本

```bash
npm run build
```

构建文件将输出到 `../src/web/static/dist`

### 类型检查

```bash
npm run type-check
```

## 开发指南

### 添加新页面

1. 在 `src/views/` 创建新的 Vue 组件
2. 在 `src/router/index.ts` 添加路由配置
3. 在 `src/i18n/locales/` 添加国际化文本
4. 在 `src/layout/index.vue` 添加导航菜单

### 添加新组件

1. 在 `src/components/` 创建组件
2. 使用 TypeScript 定义 props 和 emits
3. 添加必要的样式

### 状态管理

使用 Pinia 进行状态管理：

```typescript
// stores/useExampleStore.ts
import { defineStore } from 'pinia'

export const useExampleStore = defineStore('example', () => {
  const state = ref('')
  
  const action = () => {
    // 状态更新逻辑
  }
  
  return { state, action }
})
```

### 国际化

在组件中使用：

```vue
<template>
  <div>{{ $t('common.save') }}</div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
console.log(t('common.save'))
</script>
```

## API 集成

### HTTP 请求

使用 axios 进行 API 调用：

```typescript
import axios from 'axios'

const response = await axios.get('/api/alerts')
```

### WebSocket 连接

使用 Socket.IO 进行实时通信：

```typescript
import { io } from 'socket.io-client'

const socket = io('ws://localhost:8765')
socket.on('message', (data) => {
  // 处理消息
})
```

## 部署说明

### 开发环境

前端开发服务器运行在端口 3000，通过代理访问后端 API：

- API 请求代理到 `http://localhost:5000`
- WebSocket 代理到 `ws://localhost:8765`

### 生产环境

1. 运行 `npm run build` 构建生产版本
2. 构建文件输出到 `../src/web/static/dist`
3. 后端 Flask 应用会直接提供静态文件服务

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

## 许可证

MIT License