MediScreen

MediScreen 项目说明

本项目基于 @umijs/max 与 Ant Design 构建，为药房运营数据展示的可视化大屏。下文说明包含环境依赖、开发调试、构建部署以及常见问题，方便新的接手人快速上手。

环境要求

• Node.js：推荐 18.x LTS（至少 16.x）
• 包管理器：建议使用 npm（仓库已附带 package-lock.json，如需使用 yarn 请保持版本一致）
• 操作系统：macOS / Linux / Windows（需具备基础的 Git 与终端环境）

快速开始

1. 安装依赖

   npm install
   

   安装过程中会自动执行 umi setup（来自 postinstall），用于初始化 Umi 所需的插件和类型。

2. 本地开发

   npm run dev
   

   默认在 http://localhost:8000 提供热更新开发服务。

3. 接口配置

   • 所有数据请求通过 src/utils/request.ts 中封装的 umi-request 发送，目标网关请在对应文件或 .env/.umirc.ts 中调整。
   • 如需切换后端地址，可在 .umirc.ts 的 proxy 或 define 配置里自定义常量。

构建与部署

• 构建生产包

  npm run build
  

  构建结果会输出到 dist/（默认 .gitignore 已忽略）。将 dist 目录部署到任一静态资源服务器（Nginx、OSS 等）即可。

• 部署注意事项

  • 确保目标环境存在与后端接口一致的域名或反向代理设置。
  • 若依赖自定义字体文件（src/assets），部署时需一并保留。

项目结构速览

• src/pages/index：药房首页大屏（包含业务逻辑、接口请求与样式）
• src/pages/fenfa：设备信息页
• src/components：复用图表、进度条、动画等 UI 组件
• src/utils/request.ts：请求封装及全局拦截
• config/ + .umirc.ts：Umi 配置（路由、构建、代理等）

常见问题

• 依赖安装失败：确认 Node 版本满足要求并清理本地缓存 npm cache clean --force 再重试。
• 接口请求报错：检查后端地址、网络连通性以及本地 proxy 设置。
• 构建产物显示异常：确保部署的静态资源服务器开启 gzip 与正确的 Content-Type，并清除浏览器缓存。

如需二次开发，建议先阅读 src/pages/index/index.tsx 了解数据流，再结合组件目录梳理复用能力，尽量提取可复用逻辑、避免重复代码。