# medical-ai-platform-frontend
**Repository Path**: zeron2022/medical-ai-platform-frontend
## Basic Information
- **Project Name**: medical-ai-platform-frontend
- **Description**: 医疗问答大模型平台前端，主要是涉及客户端的功能，用户可以根据自身的病情提出问题，从后端获取答案
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-08-08
- **Last Updated**: 2025-08-08
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 医疗问答AI聊天系统 - 前端
## 项目简介
这是一个基于Vue 3开发的医疗问答AI聊天系统前端，与后端配合使用，为用户提供友好的医疗咨询界面。用户可以通过此界面向AI提问医疗健康问题，并获取专业回答。
## 技术栈
- **Vue 3**: 核心框架，使用Composition API
- **TypeScript**: 类型安全的JavaScript超集
- **Vite**: 现代前端构建工具
- **Pinia**: 状态管理
- **Vue Router**: 路由管理
- **Element Plus**: UI组件库
- **Axios**: HTTP请求库
- **SockJS** & **STOMP.js**: WebSocket通信
## 项目结构
```bash
medical-ai-platform-frontend/
├── public/ # 静态资源目录
├── src/ # 源代码目录
│ ├── api/ # API接口定义
│ ├── assets/ # 静态资源
│ │ ├── images/ # 图片资源
│ │ └── styles/ # 全局样式
│ ├── components/ # 公共组件
│ │ ├── chat/ # 聊天相关组件
│ │ ├── common/ # 通用基础组件
│ │ └── medical/ # 医疗相关组件
│ ├── composables/ # 组合式函数
│ ├── layouts/ # 布局组件
│ ├── router/ # 路由配置
│ │ └── index.ts # 路由定义
│ ├── stores/ # Pinia状态管理
│ │ ├── chat.ts # 聊天状态
│ │ └── auth.ts # 认证状态
│ ├── types/ # TypeScript类型定义
│ ├── utils/ # 工具函数
│ │ ├── request.ts # HTTP请求封装
│ │ └── websocket.ts # WebSocket封装
│ ├── views/ # 页面组件
│ │ ├── auth/ # 认证相关页面
│ │ ├── chat/ # 聊天主页面
│ │ ├── history/ # 历史记录页面
│ │ └── profile/ # 个人中心页面
│ ├── App.vue # 根组件
│ └── main.ts # 应用入口
├── index.html # HTML模板
├── tsconfig.json # TypeScript配置
├── vite.config.ts # Vite配置
└── package.json # 项目依赖配置
```
## 主要功能
### 1. 用户认证
- 用户注册
- 用户登录
- JWT令牌管理
### 2. 聊天功能
- 创建新对话
- 发送消息给AI
- 实时接收AI回复
- 聊天界面美观展示
### 3. 历史记录
- 查看历史对话
- 继续历史对话
- 删除历史对话
### 4. 个人中心
- 查看个人信息
- 修改个人设置
## 运行步骤
### 准备工作
1. **安装Node.js**
- 下载安装Node.js 16.0或更高版本
- 确保npm已正确安装
2. **后端服务**
- 确保后端API服务已启动
- 默认后端地址为`http://localhost:8081/api`
### 安装依赖
进入项目目录，执行以下命令安装依赖：
```bash
npm install
```
### 开发环境运行
执行以下命令启动开发服务器：
```bash
npm run dev
```
启动成功后，通常可通过 `http://localhost:3000` 或 `http://localhost:3001` 访问应用。
### 生产环境构建
执行以下命令构建生产环境版本：
```bash
npm run build
```
构建完成后，生成的文件会在`dist`目录中。
## 与后端连接
前端默认通过代理连接到后端API，在`vite.config.ts`中配置：
```typescript
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
},
},
}
```
## 功能说明
### 聊天功能
聊天功能是本应用的核心，实现逻辑如下：
1. 用户发送消息 → 前端通过HTTP请求发送到后端
2. 后端处理请求并调用AI模型
3. AI响应通过WebSocket实时推送给前端
4. 前端接收并展示AI回复
WebSocket连接管理在`src/utils/websocket.ts`中实现，消息状态管理在`src/stores/chat.ts`中。
### 认证功能
用户认证采用JWT方式，流程为：
1. 用户登录 → 获取JWT令牌
2. 令牌存储在localStorage
3. 每次API请求通过请求拦截器自动添加令牌
4. 令牌过期自动跳转到登录页面
## 常见问题
### 1. 连接后端问题
如果无法连接后端，检查：
- 后端服务是否已启动
- `vite.config.ts`中的代理配置是否正确
- 浏览器控制台是否有CORS错误
### 2. WebSocket连接问题
如果WebSocket连接失败，检查：
- 后端WebSocket服务是否已启动
- 用户是否已正确登录
- 网络连接是否正常
### 3. 页面样式问题
如果页面样式异常，检查：
- 是否正确安装了所有依赖包
- 是否有CSS冲突
## 项目扩展
可以考虑以下方向扩展项目功能:
1. 语音输入功能
2. 医疗术语高亮和解释
3. 对话内容导出为PDF
4. 深色模式支持
5. 移动端适配优化
## 最近更新
### 2023年最新更新
#### 1. 修复登录认证系统
我们对认证系统进行了全面修复和优化，解决了注册成功但登录失败的问题：
- **后端修复**：
- 实现了`CustomUserDetailsService`类，用于Spring Security用户认证
- 添加了`DaoAuthenticationProvider` Bean配置，正确连接用户服务与密码编码器
- 完善了JWT令牌的生成和验证流程
- **前端修复**：
- 修正了前端处理响应的数据结构，正确处理嵌套的用户信息
- 优化了`request.ts`中的响应拦截器，保留完整响应结构
- 更新了`auth.ts`中的登录方法，适配后端返回的嵌套数据格式
- **安全增强**：
- 改进了错误处理机制，提供更详细的错误信息
- 增强了异常状态的恢复能力
- 增加了对令牌有效性的验证
现在用户可以顺利完成注册和登录过程，系统稳定性大大提高。
#### 2. 修复输入框实时刷新问题
我们解决了Element Plus输入框在特定情况下不能实时刷新的问题，主要修改内容包括：
- 创建了专用的`inputHelper.ts`工具，提供以下功能：
- `fixInputEvents`：修复输入事件处理，确保视图实时更新
- `fixFormInputs`：为表单中的所有输入元素添加修复
- `InputRefreshDirective`：Vue自定义指令，自动应用输入修复
- `useInputRefreshFix`：组合式函数，可在组件挂载后修复所有输入框
- 改进了`LoginView.vue`和`RegisterView.vue`组件：
- 使用单独的`ref`变量代替嵌套的响应式对象，提高数据绑定的可靠性
- 添加了多种事件监听器(`@update:modelValue`, `@keydown`, `@focus`, `@blur`)确保捕获所有输入事件
- 实现了`forceRefresh`/`forceUpdate`函数，在需要时强制刷新视图
- 注册了全局`v-input-refresh`指令，可用于任何需要输入刷新增强的表单：
```html
```
#### 3. 优化用户认证体验
- 增强了登录和注册页面的表单验证
- 改进了错误信息展示和用户反馈
- 优化了表单提交和响应处理流程
#### 4. 性能优化
- 减少不必要的组件重渲染
- 优化了事件处理机制，提高了输入响应速度
- 改进了DOM监听策略，使用MutationObserver监控动态添加的输入元素
## 使用说明
### 输入刷新增强功能
如果您在开发新表单时遇到输入不实时刷新的问题，可以：
1. 在表单元素上添加`v-input-refresh`指令：
```html
```
2. 或在组件挂载后手动修复表单：
```javascript
import { fixFormInputs } from '@/utils/inputHelper'
onMounted(() => {
const form = document.querySelector('form')
if (form) {
fixFormInputs(form)
}
})
```
3. 对于特别复杂的情况，可以使用组合式函数：
```javascript
import { useInputRefreshFix } from '@/utils/inputHelper'
const { fixAllForms } = useInputRefreshFix()
onMounted(() => {
fixAllForms()
})
```
### 开发建议
开发新表单和输入组件时，建议：
1. 优先使用独立的`ref`变量而非嵌套的响应式对象
2. 为关键输入事件添加多个事件监听器
3. 考虑在复杂表单中实现`forceRefresh`机制
4. 对于中文输入法，特别注意监听`compositionend`事件
```bash
medical-ai-chat/
├── public/ # 静态资源目录
├── src/ # 源代码目录
│ ├── api/ # API接口定义
│ │ └── chat.ts # 聊天相关API
│ ├── assets/ # 静态资源
│ │ ├── images/ # 图片资源
│ │ └── styles/ # 全局样式
│ ├── components/ # 公共组件
│ │ ├── chat/ # 聊天相关组件
│ │ ├── common/ # 通用基础组件
│ │ └── medical/ # 医疗相关组件
│ ├── composables/ # 组合式函数
│ │ └── useVoiceInput.ts # 语音输入功能
│ ├── layouts/ # 布局组件
│ │ ├── MainLayout.vue # 主布局
│ │ └── AuthLayout.vue # 认证页面布局
│ ├── router/ # 路由配置
│ │ └── index.ts # 路由定义
│ ├── stores/ # Pinia状态管理
│ │ ├── chat.ts # 聊天状态
│ │ └── index.ts # Pinia实例
│ ├── types/ # TypeScript类型定义
│ ├── utils/ # 工具函数
│ │ └── request.ts # HTTP请求封装
│ ├── views/ # 页面组件
│ │ ├── auth/ # 认证相关页面
│ │ │ ├── LoginView.vue # 登录页面
│ │ │ └── RegisterView.vue # 注册页面
│ │ ├── chat/ # 聊天主页面
│ │ │ └── ChatView.vue # 聊天界面
│ │ ├── history/ # 历史记录页面
│ │ │ └── HistoryView.vue # 历史记录界面
│ │ ├── home/ # 首页
│ │ │ └── HomeView.vue # 首页界面
│ │ └── profile/ # 个人中心页面
│ │ └── ProfileView.vue # 个人中心界面
│ ├── App.vue # 根组件
│ ├── main.ts # 应用入口
│ └── env.d.ts # 环境变量类型声明
├── .env # 环境变量
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── index.html # HTML模板
├── tsconfig.json # TypeScript配置
├── vite.config.ts # Vite配置
├── package.json # 项目依赖配置
└── README.md # 项目说明文档