212 lines
4.3 KiB
Markdown
212 lines
4.3 KiB
Markdown
# 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
|