AUTO_HEIGHT_UPDATE.md•3.42 kB
# 自动高度功能更新
## ✅ 已完成功能
### 🎯 **自动高度计算**
现在卡片可以根据内容自动计算高度，确保展示全量数据而不被截断！
### 🚀 **新增功能**
#### 1. **智能高度计算**
- 📏 根据Markdown内容自动计算所需高度
- 📝 支持所有Markdown元素：标题、段落、列表、代码块、表格、引用等
- 🎨 考虑字体大小、行高、边距等所有样式因素
- ⚙️ 可设置最小高度（默认400px）和最大高度（默认5000px）
#### 2. **前端界面增强**
- ✅ 新增"自动计算高度"复选框（默认开启）
- 📊 显示实际生成的图片尺寸
- 🎛️ 高度限制控制：最小高度和最大高度
- 🔄 智能界面切换：启用自动高度时禁用手动高度输入
#### 3. **API接口升级**
支持新的参数：
```json
{
"markdown": "内容",
"styleId": "样式ID",
"autoHeight": true, // 启用自动高度
"minHeight": 400, // 最小高度
"maxHeight": 5000, // 最大高度
"width": 800,
"height": 1000 // 自动高度时此参数被忽略
}
```
### 🎨 **使用方法**
#### Web界面
1. **默认启用**：打开页面时自动高度已默认开启
2. **内容适配**：输入Markdown内容后，卡片高度自动调整
3. **实时显示**：预览区域显示实际生成的尺寸
4. **手动控制**：可取消勾选切换到手动高度模式
#### API调用
```bash
# 自动高度模式（推荐）
curl -X POST http://localhost:3001/api/preview \
-H "Content-Type: application/json" \
-d '{
"markdown": "# 长内容测试\n\n这是一个很长的内容...",
"styleId": "warm-soft",
"autoHeight": true,
"minHeight": 600,
"maxHeight": 3000
}'
# 手动高度模式
curl -X POST http://localhost:3001/api/preview \
-H "Content-Type: application/json" \
-d '{
"markdown": "# 内容",
"styleId": "warm-soft",
"autoHeight": false,
"height": 1200
}'
```
### 🔧 **技术实现**
#### 智能高度计算算法
1. **预先测量**：使用临时Canvas测量文本尺寸
2. **精确计算**：
- 标题：考虑级别和字体大小
- 段落：文本换行和行高
- 列表：项目符号和缩进
- 代码块：行数和额外边距
- 表格：表头和数据行
- 引用：左边框和缩进
3. **边距处理**：添加上下边距和项目间距
4. **限制应用**：在最小和最大高度范围内
#### 界面交互优化
- 📱 响应式复选框设计
- 🎛️ 动态控件启用/禁用
- 📊 实时尺寸信息显示
- 🔄 智能预设尺寸处理
### 📈 **优势对比**
| 模式 | 内容展示 | 适用场景 | 推荐度 |
|------|----------|----------|---------|
| **自动高度** | ✅ 完整展示 | 长文档、复杂内容 | ⭐⭐⭐⭐⭐ |
| 手动高度 | ⚠️ 可能截断 | 固定尺寸需求 | ⭐⭐⭐ |
### 🎯 **最佳实践**
1. **推荐设置**：
- 自动高度：✅ 开启
- 最小高度：400-600px
- 最大高度：3000-5000px
2. **适用场景**：
- ✅ 学习笔记卡片
- ✅ 技术文档总结
- ✅ 博客内容分享
- ✅ 长篇教程制作
3. **特殊情况**：
- 社交媒体固定尺寸：使用手动高度
- 批量生成统一大小：关闭自动高度
现在你的Markdown转卡片工具能够完美展示任意长度的内容，再也不用担心内容被截断了！🎉