```json
{
"summary

```json
{
"summary": "已准备好文件预览区，上传文件后将会在此显示转换后的HTML效果。支持实时编辑和样式调整",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"space-y-6\">\n <!-- 上传区域 -->\n <div class=\"border-2 border-dashed border-gray-300 rounded-lg p-6 text-center bg-gray-50\">\n <div class=\"mx-auto w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-blue-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n </svg>\n </div>\n <label class=\"cursor-pointer bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors inline-block\">\n 选择文件\n <input type=\"file\" class=\"hidden\" id=\"fileInput\">\n </label>\n </div>\n\n <!-- 预览区域 -->\n <div class=\"border border-gray-200 rounded-lg overflow-hidden\">\n <div class=\"bg-gray-100 px-4 py-3 border-b border-gray-200 flex justify-between items-center\">\n <h3 class=\"font-medium text-gray-700\">HTML预览</h3>\n <span class=\"text-xs text-gray-500\">实时渲染</span>\n </div>\n <div id=\"previewContainer\" class=\"bg-white p-6 min-h-40\">\n <p class=\"text-gray-400 italic text-center py-8\">文件转换后的HTML将显示在这里</p>\n </div>\n </div>\n</div>\n\n<script>\n document.getElementById('fileInput').addEventListener('change', function(e) {\n const file = e.target.files[0];\n if (file) {\n // 这里应该是文件解析逻辑的占位符\n document.getElementById('previewContainer').innerHTML = \n `<div class=\"p-4 border border-blue-200 bg-blue-50 rounded\">\n <p class=\"font-medium text-blue-800\">${file.name} 已加载</p>\n <p class=\"text-sm text-gray-600 mt-1\">文件大小: ${(file.size/1024).toFixed(2)} KB</p>\n <p class=\"text-sm text-gray-600\">类型: ${file.type || '未知'}</p>\n </div>`;\n }\n });\n</script>"
},
"next": [
"实现PDF解析",
"添加文本处理",
"支持图片预览",
"增加样式切换",
"优化加载动画"
]
}
```