clinical-template-editor-hzg/README.md

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

# Clinical Template Editor

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

## 🚀 功能特性

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

## 📦 安装

```bash
npm install @hzg0304/clinical-template-editor
```

## 🔧 基本使用

```jsx
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()`: 显示预览

## 🏥 医疗专用功能

### 体温单组件
```jsx
// 插入体温单
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
});
```

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

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

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

## 🎨 样式定制

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

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

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

## 🔧 开发

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

# 安装依赖
npm install

# 启动开发服务器
npm start

# 构建组件库
npm run build

# 运行测试
npm test
```

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 支持

如有问题，请联系：hzg0304

---

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