# 质控在线管理系统 - 前端项目

基于 Vue 3 + TypeScript + Vite + Element Plus 构建的医学影像质控管理系统前端。

## 技术栈

- **框架**: Vue 3.3.4 (Composition API)
- **构建工具**: Vite 4.4.9
- **语言**: TypeScript 5.2.2
- **UI组件库**: Element Plus 2.3.14
- **状态管理**: Pinia 2.1.6
- **路由**: Vue Router 4.2.4
- **HTTP客户端**: Axios 1.5.0
- **图标**: @element-plus/icons-vue 2.1.0

## 项目结构

```
qconline_web/
├── public/               # 静态资源
├── src/
│   ├── api/             # API接口
│   │   ├── auth.ts      # 认证相关API
│   │   ├── patient.ts   # 患者相关API
│   │   ├── qc.ts        # 质控相关API
│   │   └── system.ts    # 系统相关API
│   ├── assets/          # 资源文件
│   ├── components/      # 公共组件
│   ├── router/          # 路由配置
│   │   └── index.ts
│   ├── stores/          # 状态管理
│   │   ├── index.ts
│   │   └── user.ts      # 用户状态
│   ├── types/           # TypeScript类型定义
│   │   └── index.ts
│   ├── utils/           # 工具函数
│   │   └── request.ts   # Axios封装
│   ├── views/           # 页面组件
│   │   ├── Login.vue    # 登录页
│   │   ├── Layout.vue   # 主布局
│   │   ├── Home.vue     # 首页
│   │   ├── Patient.vue  # 患者查询
│   │   ├── QcTask.vue   # 质控任务管理
│   │   └── QcResult.vue # 质控结果查询
│   ├── App.vue          # 根组件
│   ├── main.ts          # 入口文件
│   └── env.d.ts         # 类型声明
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── README.md
```

## 功能模块

### 1. 用户认证
- ✅ 用户登录
- ✅ 用户登出
- ✅ Token管理
- ✅ 路由守卫

### 2. 患者数据查询
- ✅ 患者列表查询
- ✅ 分页功能
- ✅ 条件筛选

### 3. 质控任务管理
- ✅ 任务列表查询
- ✅ 创建质控任务
- ✅ 任务状态管理
- ✅ 支持预制结果演示

### 4. 质控结果查询
- ✅ 结果列表查询
- ✅ 统计数据展示
- ✅ 结果筛选

## 快速开始

### 安装依赖

```bash
cd /Users/geng/Documents/WebstormProjects/qconline_web
npm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:3000

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 环境配置

### 后端API地址

在 `vite.config.ts` 中配置代理:

```typescript
server: {
  port: 3000,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',  // 后端地址
      changeOrigin: true
    }
  }
}
```

## 开发说明

### API请求

所有API请求都通过 `src/utils/request.ts` 封装的axios实例发送，自动处理：
- Token携带
- 错误处理
- 响应拦截
- 401自动跳转登录

### 状态管理

使用Pinia进行状态管理，目前包含:
- user store: 用户信息、token、登录登出

### 路由守卫

路由守卫自动检查:
- 需要认证的路由是否有token
- 已登录用户访问登录页自动跳转
- 设置页面标题

### 类型安全

全项目使用TypeScript，所有API响应都有完整的类型定义。

## 浏览器支持

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

## 注意事项

1. 首次运行需要先安装依赖: `npm install`
2. 确保后端服务已启动在 http://localhost:8080
3. 默认端口3000，可在vite.config.ts中修改
4. 登录后Token保存在localStorage中
5. 所有表单都有基本的验证

## 已知问题

无

## 更新日志

### v1.0.0 (2025-12-25)
- ✅ 初始版本发布
- ✅ 完成基础框架搭建
- ✅ 实现登录认证
- ✅ 实现患者查询功能
- ✅ 实现质控任务管理
- ✅ 实现质控结果查询

## License

Private