@hzg0304/clinical-template-editor

v2.5.0

Published

7 months ago

一个基于 React 和 TipTap 构建的临床模板编辑器组件，专为医疗行业设计

Downloads

0High
0Medium
0Low

hzg0304

react editor clinical medical template tiptap rich-text healthcare hospital typescript

ClinicalTemplateEditor

一个功能丰富的临床医疗模板编辑器组件，专为医疗行业设计，支持病历模板设计、表单填写和数据管理。

✨ 主要特性

🎨 三种编辑模式：设计模式、表单模式、只读模式
📝 富文本编辑：完整的文本格式化功能
🔧 智能表单控件：输入框、下拉框、单选框、多选框、日期选择器
🩺 专业医疗组件：月经史公式、体温单图表
📊 数据绑定：变量系统和数据导入导出
🎯 模板管理：模板创建、保存、加载和删除
🖨️ 打印支持：预览和自定义打印选项
💾 数据持久化：本地存储和记录管理
🔍 实时预览：所见即所得的预览功能
📱 响应式设计：支持不同屏幕尺寸

🚀 快速开始

安装

npm install @hzg0304/[email protected]
# 或
yarn add @hzg0304/[email protected]

基本使用

import React, { useRef } from 'react';
import ClinicalTemplateEditor, { ClinicalTemplateEditorRef } from 'clinical-template-editor';

function App() {
  const editorRef = useRef<ClinicalTemplateEditorRef>(null);

  const handleSaveTemplate = async () => {
    const success = await editorRef.current?.saveTemplate({
      name: '我的病历模板',
      type: '自定义模板',
      description: '用于门诊病历记录'
    });
    console.log('保存结果:', success);
  };

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <ClinicalTemplateEditor
        ref={editorRef}
        initialVariables={{
          '患者姓名': '',
          '年龄': '',
          '性别': ''
        }}
      />
      <button onClick={handleSaveTemplate}>保存模板</button>
    </div>
  );
}

📖 主要功能

编辑模式切换

// 设计模式 - 完整编辑功能
editorRef.current?.setMode('design');

// 表单模式 - 只能编辑表单控件
editorRef.current?.setMode('form');

// 只读模式 - 不可编辑
editorRef.current?.setMode('readonly');

变量数据绑定

// 设置变量值
editorRef.current?.setVariableValues({
  '患者姓名': '张三',
  '年龄': '35岁',
  '性别': '男',
  '主诉': '发热3天'
});

// 获取变量值
const variables = editorRef.current?.getVariableValues();

文件数据导入

// 从JSON文件导入数据
const handleFileImport = async (file: File) => {
  await editorRef.current?.bindDataFromFile(file);
};

专业医疗组件

// 月经史公式
editorRef.current?.menstruation?.updateFromText(
  '14岁初潮，28-30天/3-7天，末次月经2024-01-15，量中等，色正常'
);

// 体温单图表
editorRef.current?.temperatureChart?.initializeChart({
  id: 'chart1',
  patientName: '张三',
  inDate: '2024-01-01',
  outDate: '2024-01-07',
  diagnosis: '感冒',
  department: '内科'
});

🛠️ 高级功能

模板管理

// 创建模板
await editorRef.current?.createTemplate({
  name: '新模板',
  type: '病历模板',
  description: '模板描述',
  variables: ['患者姓名', '年龄', '性别']
});

// 获取模板列表
const templates = editorRef.current?.getTemplateList();

// 选择模板
await editorRef.current?.selectTemplate('入院记录模板');

数据持久化

// 保存记录
editorRef.current?.saveRecord();

// 加载记录
await editorRef.current?.loadRecord('record123');

// 获取保存的记录
const records = editorRef.current?.getSavedRecords();

打印和导出

// 预览
editorRef.current?.showPreview();

// 打印
editorRef.current?.print();

// 带选项打印
editorRef.current?.printWithOptions({
  pageSize: 'A4',
  orientation: 'portrait',
  includeHeader: true
});

// 导出HTML
const html = editorRef.current?.getHtmlWithStyle();

📋 支持的表单控件

| 控件类型 | 功能描述 | 使用场景 | |---------|----------|----------| | 输入框 | 单行/多行文本输入 | 姓名、地址、病史描述 | | 下拉框 | 单选下拉列表 | 性别、科室、诊断选择 | | 单选框组 | 单选按钮组 | 是/否选择、等级选择 | | 多选框组 | 多选按钮组 | 症状选择、既往史 | | 日期选择器 | 日期时间选择 | 入院日期、手术时间 | | 月经史公式 | 专业月经史记录 | 妇科病历 | | 体温单 | 体温监测图表 | 住院体温记录 |

🔧 开发环境要求

React 18+
TypeScript 4.9+
现代浏览器（Chrome 80+, Firefox 75+, Safari 13+, Edge 80+）

📚 文档和示例

🎯 应用场景

电子病历系统：病历模板设计和填写
医院信息系统：标准化医疗文档
诊所管理系统：门诊记录和处方
医疗表单系统：各类医疗表单设计
临床数据收集：结构化数据录入

📸 截图预览

设计模式

表单模式

预览效果

🤝 贡献指南

我们欢迎所有形式的贡献！请按照以下步骤：

Fork 项目
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打开 Pull Request

开发环境搭建

# 克隆项目
git clone https://github.com/your-username/clinical-template-editor.git

# 安装依赖
npm install

# 启动开发服务器
npm start

# 运行测试
npm test

# 构建项目
npm run build

📝 更新日志

v1.0.0 (2024-01-15)

🎉 初始版本发布
✨ 支持三种编辑模式
🔧 完整的表单控件支持
🩺 专业医疗组件
📊 数据绑定和导入导出
🎨 模板管理系统
🖨️ 打印和预览功能

v1.0.1 (2024-01-20)

🐛 修复表单模式下的编辑限制
💡 改进月经史公式解析
🔧 优化体温单图表性能
📚 完善API文档

🆘 常见问题

Q: 如何在表单模式下限制编辑区域？

A: 表单模式会自动限制编辑区域为表单控件内部，普通文本区域不可编辑。

Q: 如何导入外部数据？

A: 使用 bindDataFromFile() 方法导入JSON格式的数据文件。

Q: 如何自定义打印样式？

A: 使用 printWithOptions() 方法设置页面大小、方向、边距等选项。

Q: 如何处理大量数据的性能问题？

A: 建议使用分页加载，避免频繁的变量更新，在设计模式下编辑完成后再切换到表单模式。

更多问题请查看 FAQ 文档。

📄 许可证

本项目采用 MIT 许可证。详情请参阅 LICENSE 文件。

🔗 相关链接

💬 技术支持

如有任何问题或建议，请通过以下方式联系我们：

📧 Email: [email protected]
💬 QQ群: 123456789
🐛 GitHub Issues: 提交问题
📖 文档: 在线文档

🌟 致谢

感谢所有为这个项目做出贡献的开发者和用户！

特别感谢以下开源项目：

TipTap - 强大的富文本编辑器框架
React - 用户界面构建库
Lucide React - 美观的图标库
KaTeX - 数学公式渲染引擎

⭐ 如果这个项目对你有帮助，请给我们一个 Star！

🚀 让我们一起构建更好的医疗软件！