assist/frontend

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 代码规范

快速开始

安装依赖

cd frontend
npm install

开发模式

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build

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

类型检查

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 进行状态管理：

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

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

国际化

在组件中使用：

<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 调用：

import axios from 'axios'

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

WebSocket 连接

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

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