# MediScreen 项目说明 本项目基于 `@umijs/max` 与 `Ant Design` 构建,为药房运营数据展示的可视化大屏。下文说明包含环境依赖、开发调试、构建部署以及常见问题,方便新的接手人快速上手。 ## 环境要求 - Node.js:推荐 18.x LTS(至少 16.x) - 包管理器:建议使用 `npm`(仓库已附带 `package-lock.json`,如需使用 `yarn` 请保持版本一致) - 操作系统:macOS / Linux / Windows(需具备基础的 Git 与终端环境) ## 快速开始 1. **安装依赖** ```bash npm install ``` 安装过程中会自动执行 `umi setup`(来自 `postinstall`),用于初始化 Umi 所需的插件和类型。 2. **本地开发** ```bash npm run dev ``` 默认在 `http://localhost:8000` 提供热更新开发服务。 3. **接口配置** - 所有数据请求通过 `src/utils/request.ts` 中封装的 `umi-request` 发送,目标网关请在对应文件或 `.env`/`.umirc.ts` 中调整。 - 如需切换后端地址,可在 `.umirc.ts` 的 `proxy` 或 `define` 配置里自定义常量。 ## 构建与部署 - **构建生产包** ```bash 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` 了解数据流,再结合组件目录梳理复用能力,尽量提取可复用逻辑、避免重复代码。