Clinical Template Editor

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

🚀 功能特性

• 富文本编辑: 基于 TipTap 的强大富文本编辑功能
• 医疗专用控件: 支持体温单、月经史公式、日期选择、下拉框等医疗专用组件
• 多种模式: 设计模式、表单模式、只读模式
• 模板管理: 完整的模板创建、保存、加载功能
• 变量系统: 支持模板变量和动态数据绑定
• 导出功能: 支持 HTML、PDF、图片等多种格式导出
• 表格支持: 完整的表格编辑功能，支持行高调整、边框设置
• 数学公式: 支持 LaTeX 数学公式编辑和渲染

📦 安装

npm install @hzg0304/clinical-template-editor

🔧 基本使用

import React, { useRef } from 'react';
import { ClinicalTemplateEditor } from '@hzg0304/clinical-template-editor';
import '@hzg0304/clinical-template-editor/dist/index.css';

function App() {
  const editorRef = useRef();

  return (
    <div style={{ height: '100vh' }}>
      <ClinicalTemplateEditor
        ref={editorRef}
        initialVariables={{
          patientName: '张三',
          age: '35',
          gender: '男'
        }}
      />
    </div>
  );
}

export default App;

🎯 API 参考

Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | initialVariables | Record<string, string> | {} | 初始变量值 | | templates | TemplateInfo[] | [] | 模板列表 | | currentTemplateId | string | - | 当前模板ID | | onTemplateChange | (templateId: string) => void | - | 模板切换回调 |

Ref 方法

内容操作

• getContent(format?): 获取编辑器内容
• setContent(content, format?): 设置编辑器内容
• getHtmlWithStyle(): 获取带样式的HTML
• appendHtml(html, options?): 追加HTML内容

模式控制

• getMode(): 获取当前模式
• setMode(mode): 设置编辑器模式 ('readonly' | 'form' | 'design')
• setReadOnly(isReadOnly): 设置只读状态

变量管理

• getVariableValues(): 获取变量值
• setVariableValues(values): 设置变量值
• getTemplateVariables(templateName): 获取模板变量

模板管理

• getTemplateList(): 获取模板列表
• selectTemplate(templateName): 选择模板
• createTemplate(templateData): 创建新模板
• saveTemplate(templateData): 保存模板
• updateTemplate(templateName, templateData): 更新模板
• deleteTemplate(templateName): 删除模板

导出功能

• exportAs(format): 导出为指定格式 ('html' | 'pdf' | 'word')
• showPreview(): 显示预览

🏥 医疗专用功能

体温单组件

// 插入体温单
editorRef.current?.temperatureChart?.initializeChart({
  id: 'temp-chart-1',
  patientName: '张三',
  patientAge: '35',
  patientGender: '男',
  inDate: '2024-01-01',
  outDate: '2024-01-07',
  diagnosis: '感冒',
  department: '内科',
  bedNumber: '001',
  medicalNumber: 'M001',
  days: 7
});

月经史公式

// 插入月经史公式
editorRef.current?.menstruation?.updateFromText(
  '月经史：14(3-5)/(28-30)，LMP：2024-01-01',
  'menstrual-1'
);

表单控件

// 插入输入框
editorRef.current?.control?.insertField('input', 'patient-name', {
  placeholder: '请输入患者姓名',
  bindVariable: 'patientName'
});

// 插入下拉框
editorRef.current?.control?.insertField('dropdown', 'gender', {
  options: { '男': '男', '女': '女' },
  bindVariable: 'gender'
});

🎨 样式定制

组件使用 Tailwind CSS 构建，您可以通过以下方式自定义样式：

/* 自定义编辑器样式 */
.editor-a4-paper {
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 自定义表格样式 */
.ProseMirror table {
  border-collapse: collapse;
}

🔧 开发

# 克隆项目
git clone <repository-url>

# 安装依赖
npm install

# 启动开发服务器
npm start

# 构建组件库
npm run build

# 运行测试
npm test

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 支持

如有问题，请联系：hzg0304

注意: 此组件专为医疗行业设计，包含医疗专用功能和术语。使用前请确保符合相关医疗软件规范和法规要求。