★ FEATURED ARTICLE 前端企业应用【免费下载链接】hospitalrun-frontendFrontend for HospitalRun项目地址https://gitcode.com/gh_mirrors/ho/hospitalrun-frontend点击查看免费下载本文以 HospitalRun 前端仓库hospitalrun/frontend当前版本 2.0.0-alpha.7的 CHANGELOG.md 为骨架逐条还原 1.0.0 到 2.0.0-alpha.7 期间的架构演进、破坏性变更与工程化实践并结合src/、couchdb/、scripts/等目录的真实源码帮助读者理解这套「React Redux Toolkit PouchDB/CouchDB」医院信息系统前端的核心模块、数据层原理与开发工作流。一、CHANGELOG 是什么一份可追溯的工程史CHANGELOG.md 采用 standard-version 中的commitlint/config-conventional强制校验。日志把每次发版拆分为Features新功能如患者模块、预约、检验Lab、用药Medication、影像Imaging、事件Incident等Bug Fixes缺陷修复多数附带 GitHub issue 编号如closes #2292⚠ BREAKING CHANGES破坏性变更是升级时最需要关注的段落CI / Performance Improvements / chore工程与基础设施类变更。从 package.json 可以看到当前版本号为2.0.0-alpha.7与日志最新条目一致standard-version作为 devDependency 存在配合 commitizennpm run commit与 husky 的 pre-commit / commit-msg 钩子构成了「规范提交 → 自动生成 changelog → 自动打 tag」的完整链路。日志中typo in changelog.md的修复记录也说明它是一份被持续维护、逐字校对过的文档。二、2.0.0 系列的破坏性变更升级前必读日志中共有三处明确标注的 BREAKING CHANGES理解它们能避免升级后功能异常1. 移除基于 CouchDB 实例的登录alpha.6* **login:** removed login connected with CouchDB instance这是 2.0.0-alpha.6 最重要的变更前端不再直接依赖 CouchDB 实例账号体系完成登录。从源码看登录逻辑集中在 src/user/user-slice.tsloginaction 通过remoteDb.logIn(username, password)PouchDB Authentication 插件完成鉴权并在失败时区分「必填字段缺失」与error.status 401账号或密码错误两类错误登录成功后通过remoteDb.getUser()读取用户元数据givenName、familyName并写入 Redux 状态getCurrentSession用于恢复会话logout调用remoteDb.logOut()后清空状态。2. 患者 friendlyId 不再回填alpha.3* **patients:** Any patient saved with friendly id will no longer map friendly id to the patient object, thus not displaying it in the UI or have it available for search从 alpha.3 起前端不再把 friendlyId友好编号映射回患者对象界面与搜索都不再依赖它。取而代之的是随机生成的 codesrc/patients/util/patient-util.ts 中getPatientCode从患者对象读取code字段src/shared/util/generateCode.ts 用shortid生成形如P-xxxxxxx的代码src/shared/db/PatientRepository.ts 的save()在落库前先调用generateCode(P)生成患者编号搜索时同时匹配data.fullName正则、忽略大小写与data.code精确匹配。3. 组件库接口变更与 Node 版本底线alpha.1* **frontend:** update components package changing some interfaces * This module no longer supports Node.js 0.10日志同时记录了 Node.js 0.10 支持被移除chore以及hospitalrun/components组件库接口更新。此外 alpha.7 将 CI 从 Node v12 LTS 迁移到Node v14 LTS因此本地开发与 CI 构建应使用 Node 14 及以上的 LTS 环境。三、数据层演进从简单 PouchDB 客户端到关系型仓储alpha.1 的 init 阶段日志逐步揭示了数据层的搭建轨迹creates a very simple pouchdb client→creates a generic repository class and refactors patient db→add saveOrUpdate function in repositories→adds remote couchdb。这些在源码中都有完整对应1. 关系型 PouchDB 与 schema 定义src/shared/config/pouchdb.ts 通过PouchDB.plugin(...)挂载了 5 个插件插件用途pouchdb-quick-search快速全文搜索pouchdb-adapter-memory测试环境内存适配器relational-pouch关系型数据建模belongsTo / hasManypouchdb-findMongoDB 风格 find 查询pouchdb-authentication登录/会话管理同时定义了schemapatient与appointment、lab、medication、imaging之间存在hasMany/belongsTo关系这解释了日志中「imaging 与 visit 关联」「diagnosis 与 visit 关联」等数据建模类特性为何能直接通过rel.findHasMany(appointment, patient, patientId)见 PatientRepository.ts实现。2. 环境区分测试内存库 vs 远程 CouchDB同一文件中NODE_ENV test时创建skip_setup: true的内存库否则连接${process.env.REACT_APP_HOSPITALRUN_API}/hospitalrun并通过localDb.sync(serverDb, { live: true, retry: true })开启本地与远端 CouchDB 的实时双向同步——这正是日志 alpha.4「network-status 离线工作提示」得以成立的基础本地库离线可用联网后自动同步。3. 通用仓储类 Repositorysrc/shared/db/Repository.ts 是日志「creates a generic repository class」的直接成果提供find(id)按关系型 id 查询findAll(sort)按_id正则限定文档类型并为排序字段动态创建 PouchDB 索引避免 find 缺索引报错search(criteria)$and组合类型正则与业务条件save(entity)剥离id/rev后用uuidv4()生成新 id并写入createdAt/updatedAt对应日志 alpha.3「add created date and last updated date」saveOrUpdate(entity)先查再改不存在则走savedelete(entity)。四、核心业务模块的时间线一张功能演进地图把日志按模块归类可以得到项目 2.0 的功能全景1. 患者模块贯穿全程迭代最密集alpha.1创建/查看患者、按 fullName 与 friendlyId 搜索、模糊搜索fuzzy search、近似年龄、添加与显示关联人related persons、患者标签页tabs、fullName扁平化存储alpha.2患者视图新增「预约」标签页条件渲染 familyName 与 suffixalpha.3新增就诊visit概念雏形、诊断标签页、患者笔记notes、多联系方式phone/email/address、表单校验与错误反馈、随机 code 取代序列号对应generateCode、预约/编辑预约/删除预约完整闭环alpha.4分页与排序见下文、新增预约按钮、按状态过滤检验单、网络状态提示alpha.5过敏点击查看#2224、重复患者预警#2187逻辑见 src/patients/util/is-possible-duplicate-patient.ts比较 givenName/familyName/sex/dateOfBirth 四元组、血型信息#2190、患者护理计划 care plan 与护理目标 care goal#2360、就诊功能#2251、无患者空状态#2235alpha.6患者信息面板ImportantPatientInfosrc/patients/view/ImportantPatientInfo.tsx。2. 检验Lab与用药Medication模块alpha.1 就位alpha.3 加入「请求/查看检验单」、按requestedOn排序ViewLabs.tsxalpha.4 增加检验状态过滤#2033、Lab code#2040、requestBy字段#2082alpha.5 支持检验单多条备注#2325、完成检验的成功提示与「successfully completed」文案修复#2295。3. 事件Incident模块与可视化alpha.3 起新增报告事件、查看事件、事件路由与过滤#2087alpha.4 支持按状态过滤、加载中状态#2085alpha.5 加入「解决事件」能力#2222实现见 src/incidents/hooks/useResolveIncident.tsx将status置为resolved并写入resolvedOn同一版本引入CSV 导出#2292基于json2csv对事件表格做数据过滤后下载引入事件可视化visualize新增viewIncidentWidgets权限见 Permissions.ts、路由/incidents/visualize见 pageMap.tsx以及 VisualizeIncidents.tsx——该组件用useIncidents({ status: IncidentFilter.reported })拉取已上报事件按reportedOn的月份累加进monthlyIncidents状态数组最终渲染 12 个月的LineGraph折线图。4. 影像Imaging模块alpha.5 新增#2250、#2249 与 medications 同期并在 alpha.6 将影像与就诊关联#2309。模块包含请求页 NewImagingRequest.tsx、搜索表格 ImagingRequestTable.tsx 与校验工具 validate-imaging-request.ts。5. 预约Scheduling与编辑预约alpha.1 建立日历展示与创建alpha.2 在患者视图加入预约标签页alpha.3 实现编辑预约#1770 相关、删除预约、Walk Up改为Walk Inalpha.6 重构编辑预约流程EditAppointment.tsx并新增 hook 测试。五、工程化实践测试、i18n 与代码质量门禁1. 测试体系从 matchMediaMock 到 react-hooks 测试日志中的大量added tests、fix ... test条目反映出测试先行文化。测试基础设施包括src/mocks/matchMediaMock.js 解决 jsdom 缺少matchMedia的问题src/setupTests.js 统一注入 mockssrc/tests/test-utils/use-query.util.tsx 与 use-mutation.util.ts 封装 react-query 测试工具各业务模块均配套 hooks 测试如usePatient、useResolveIncident、useLab与组件测试*.test.tsxstandardize mock store setup in tests#2075、standardized react router imports#2067等条目表明测试代码也经历了规范化重构。运行方式见 package.jsonnpm run test:ci使用cross-env CItrue、jest-environment-jsdom-sixteen与--maxWorkers2npm run lint覆盖src/**与scripts/check-translations/**。2. 国际化多语言资源与翻译完整性检查i18n 是日志中出现频率最高的主题之一演进脉络为alpha.1 引入国际化 → alpha.3 重组翻译资源、修复大量缺失 key → alpha.4 新增意大利语#2035、翻译缺失检查脚本#1919→ alpha.5 新增俄语patient/actions/incidents/scheduling→ 后续补全中文zhCN等语言。当前 src/shared/locales/index.ts 注册了12 种语言Italian、Arabic、German、English (American)、Spanish、French、Indonesian、Japanese、Portuguese、Russian、Turkish、Chinese。国际化配置见 src/shared/config/i18n.tsfallbackLng: en、通过i18next-browser-languagedetector自动检测语言。翻译完整性由 scripts/check-translations/index.ts 保证以enEnglish为基准语言递归遍历其他 11 种语言的 key 树缺少 key 时输出橙色警告The key ... is not present ...发现「基准语言是对象、对照语言是字符串」的结构错位时输出橙色警告若找不到英文资源则直接process.exit(1)报错退出。该脚本通过 npm scripts 深度集成start、test前都会先执行translation:check由tsc -p scripts/tsconfig.json编译后运行并在运行前后自动清理编译产物remove-compiled-translations确保任何一次启动或测试都先通过翻译完整性检查。3. ESLint no-console 与依赖治理alpha.5 的eslint rule no-console added#2307说明项目对console使用有严格约束scripts/check-translations/index.ts头部显式/* eslint-disable no-console */即为佐证moment通过 package.json 的resolutions字段锁定到 2.24.0临时规避上游 issuealpha.6 的react-hooks/exhaustive-deps相关修复保证 hooks 依赖数组的规范性。六、开发环境CouchDB 一键初始化与本地部署日志 alpha.5 加入「init 与 cleanup CouchDB 脚本」alpha.4 修复了 CouchDB 认证弹窗问题#2256涉及local.ini与nginx.confalpha.6 为脚本补充 Windows 版本。这一整套开发环境脚本位于 couchdb/ 目录1. 启动 / 清理脚本couchdb/couchdb-init.shLinux/macOS与 couchdb-init.batWindows执行docker-compose up --build -d启动开发库couchdb/couchdb-cleanup.sh及 .bat执行docker-compose down -v --rmi all --remove-orphans彻底清理容器、卷与镜像。2. docker-compose 与数据库初始化docker-compose.yml 定义了couchdb暴露 5984 端口默认账号admin/password与dbinit两个服务。dbinit在 CouchDB 启动 5 秒后依次执行创建_global_changes库设置_users/_security创建hospitalrun数据库partitionedfalse配置库安全角色创建演示用户org.couchdb.user:username含metadata.givenName/familyName。3. CORS 与认证弹窗规避couchdb/local.ini开启single_node、CORSorigins *、credentials true并将默认的WWW-Authenticate: Basic realmadministrator替换为Other realmappnginx.conf生产 Nginx 在 401 响应时同样用more_set_headers覆盖WWW-Authenticate头。这一对配置正是日志中「couchdb auth popup」系列修复#2256的落地成果通过替换 WWW-Authenticate 头避免浏览器在访问 PouchDB/CouchDB 时弹出原生认证对话框转而由前端表单接管登录。七、用户体验与交互细节的持续打磨日志中的大量小条目体现了对 UX 的细致打磨部分可在源码中直接验证网络状态提示alpha.4#2109useNetworkStatus.ts 监听window的online/offline事件NetworkStatusMessage.tsx 离线时显示红色横幅恢复在线后绿色横幅在 4000ms 内淡出面包屑导航alpha.3#1770breadcrumbs-slice.ts 中addBreadcrumbs会对面包屑按location.length升序排序Breadcrumbs.tsx 渲染时最后一项高亮为 active 且不可点击侧边栏权限控制alpha.4#2110Sidebar.tsx 中「新增/列表」子菜单项按permissions.includes(...)条件渲染如WritePatients控制「New Patient」、ViewIncidentWidgets控制「Visualize」入口alpha.3 的「sidebar collapsible」特性由sidebarCollapsedRedux 状态驱动折叠时宽度变为 56px导航栏alpha.4 增加汉堡菜单移动端、下拉分隔线、sticky 样式#2057alpha.5 移除导航栏搜索框#2237、在「quick add」中加入图标#2220、显示当前登录用户名currentlySignedInAs见 Navbar.tsx分页与排序alpha.4#1969/#1967PageComponent.tsx 提供 25/50/100/200/All 五种页大小与上一页/下一页按钮PageRequest.ts 定义number/size/nextPageInfo/previousPageInfo结构排序则在 Repository.findAll 中通过动态建索引 data.field的 Mongo-style find 实现日期选择器alpha.4 增加年份下拉#2060DatePickerWithLabelFormGroup.tsx 的showYearDropdown属性、放大尺寸#2056alpha.5 为出生日期设置最大日期#2002。八、从日志到源码一个可复用的研究方法HospitalRun 前端的 CHANGELOG 之所以值得细读是因为每条记录都能在仓库中找到可验证的实现锚点CHANGELOG 条目版本源码证据关系型仓储重构alpha.1Repository.ts pouchdb.ts schema随机 code 取代序列alpha.3generateCode.ts PatientRepository.savecreated/updated 时间戳alpha.3Repository.save/saveOrUpdate事件 CSV 导出alpha.5#2292json2csv依赖package.json 事件表格组件事件可视化alpha.5VisualizeIncidents.tsx viewIncidentWidgets权限重复患者预警alpha.5#2187is-possible-duplicate-patient.ts翻译检查脚本alpha.4#1919scripts/check-translations/index.tsCouchDB 初始化脚本alpha.5couchdb-init.sh docker-compose.yml认证弹窗修复alpha.4#2256couchdb/local.ini nginx.conf对读者而言这套「版本日志 → 提交/issue → 源码实现」的追踪方法可以快速定位某个能力是什么时候引入的、为什么引入、底层又是如何实现的也便于在升级到 2.0.0-alpha.x 系列时提前评估破坏性变更的影响面。九、小结与升级建议纵观 CHANGELOGHospitalRun 前端 2.0 系列的演进主线清晰数据层从简单 PouchDB 客户端走向关系型建模 通用仓储 远端 CouchDB 实时同步业务域从患者单一模块扩展为患者/预约/检验/用药/影像/事件六大模块并逐步补齐编辑、删除、过滤、排序、分页与可视化工程质量通过 translation check 门禁、commitlint/standard-version 规范提交、覆盖各模块的 jest 测试持续加固体验细节网络状态、面包屑、权限化侧边栏、快捷操作在多语言与离线场景下不断完善。升级到最新 2.0.0-alpha.7 前请重点关注三处破坏性变更CouchDB 登录已被移除、患者 friendlyId 不再回填改用code字段、组件库接口与 Node 版本要求CI 已迁移至 Node 14 LTS。本地开发推荐按 couchdb/ 目录脚本一键起停 CouchDB 环境再以npm start启动前端配合npm run test:ci与npm run lint验证改动质量。赞分享前端企业应用【免费下载链接】hospitalrun-frontendFrontend for HospitalRun项目地址https://gitcode.com/gh_mirrors/ho/hospitalrun-frontend点击查看免费下载相关推荐m-cli 版本演进与 2.0 破坏性变更全解读从 CHANGELOG 到源码实现m cli 版本演进与 2.0 破坏性变更全解读从 CHANGELOG 到源码实现 本文以 m cli 官方 CHANGELOG.md https://linuv 0.12 变更全解读懂 CHANGELOG 中的破坏性变更、特性固化与性能演进uv 0.12 变更全解读懂 CHANGELOG 中的破坏性变更、特性固化与性能演进 uv 的 CHANGELOG.md https://link.gitco包管理器开发工具CLIvue-chartjs 版本演进全解析从 CHANGELOG 读懂 API 变迁、破坏性变更与迁移路径vue chartjs 版本演进全解析从 CHANGELOG 读懂 API 变迁、破坏性变更与迁移路径 导读 本文以仓库 CHANGELOG.md http前端数据可视化UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
