@hzg0304/clinical-template-editor/README.md

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

# ClinicalTemplateEditor

[![React](https://img.shields.io/badge/React-18%2B-blue.svg)](https://reactjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-4.9%2B-blue.svg)](https://www.typescriptlang.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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

## ✨ 主要特性

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

## 🚀 快速开始

### 安装

```bash
npm install @hzg0304/clinical-template-editor@2.0.1
# 或
yarn add @hzg0304/clinical-template-editor@2.0.1
```

### 基本使用

```tsx
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>
  );
}
```

## 📖 主要功能

### 编辑模式切换

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

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

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

### 变量数据绑定

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

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

### 文件数据导入

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

### 专业医疗组件

```tsx
// 月经史公式
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: '内科'
});
```

## 🛠️ 高级功能

### 模板管理

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

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

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

### 数据持久化

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

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

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

### 打印和导出

```tsx
// 预览
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+）

## 📚 文档和示例

- [完整API文档](./docs/api.md)
- [组件使用指南](./docs/guide.md)
- [在线示例](https://example.com/clinical-editor-demo)
- [常见问题](./docs/faq.md)

## 🎯 应用场景

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

## 📸 截图预览

### 设计模式
![设计模式](./docs/images/design-mode.png)

### 表单模式
![表单模式](./docs/images/form-mode.png)

### 预览效果
![预览效果](./docs/images/preview.png)

## 🤝 贡献指南

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

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

### 开发环境搭建

```bash
# 克隆项目
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 文档](./docs/faq.md)。

## 📄 许可证

本项目采用 MIT 许可证。详情请参阅 [LICENSE](./LICENSE) 文件。

## 🔗 相关链接

- [项目主页](https://github.com/your-username/clinical-template-editor)
- [问题报告](https://github.com/your-username/clinical-template-editor/issues)
- [讨论区](https://github.com/your-username/clinical-template-editor/discussions)
- [更新日志](https://github.com/your-username/clinical-template-editor/releases)

## 💬 技术支持

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

- 📧 Email: support@clinical-editor.com
- 💬 QQ群: 123456789
- 🐛 GitHub Issues: [提交问题](https://github.com/your-username/clinical-template-editor/issues)
- 📖 文档: [在线文档](https://docs.clinical-editor.com)

## 🌟 致谢

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

特别感谢以下开源项目：
- [TipTap](https://tiptap.dev/) - 强大的富文本编辑器框架
- [React](https://reactjs.org/) - 用户界面构建库
- [Lucide React](https://lucide.dev/) - 美观的图标库
- [KaTeX](https://katex.org/) - 数学公式渲染引擎

---

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

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