qconline_web

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

基于 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. 质控结果查询

• ✅ 结果列表查询
• ✅ 统计数据展示
• ✅ 结果筛选

快速开始

安装依赖

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

开发模式

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build

预览生产构建

npm run preview

环境配置

后端API地址

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

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