```json
{
"summary

```json
{
"summary": "为流程化设计组件添加了动态进度指示器，增强操作引导性",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"py-16 bg-white\">\n <div class=\"container mx-auto px-4 relative\">\n <!-- 进度控制条 -->\n <div class=\"flex justify-center mb-12\">\n <div class=\"bg-gray-100 rounded-full p-1 max-w-md w-full\">\n <div class=\"flex justify-between relative\">\n <!-- 进度条轨迹 -->\n <div class=\"absolute top-1/2 left-0 right-0 h-1 bg-gray-200 transform -translate-y-1/2 z-0\"></div>\n <!-- 进度条填充 -->\n <div class=\"absolute top-1/2 left-0 h-1 bg-blue-600 transform -translate-y-1/2 z-10 transition-all duration-500\" style=\"width: 25%\"></div>\n \n <!-- 步骤指示点 -->\n <button class=\"w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center z-20 transform hover:scale-125 transition-all\">\n <span class=\"text-xs font-bold\">1</span>\n </button>\n <button class=\"w-8 h-8 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center z-20 transform hover:scale-110 transition-all\">\n <span class=\"text-xs font-bold\">2</span>\n </button>\n <button class=\"w-8 h-8 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center z-20 transform hover:scale-110 transition-all\">\n <span class=\"text-xs font-bold\">3</span>\n </button>\n <button class=\"w-8 h-8 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center z-20 transform hover:scale-110 transition-all\">\n <span class=\"text-xs font-bold\">4</span>\n </button>\n </div>\n </div>\n </div>\n\n <!-- 流程步骤 -->\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10\">\n <!-- 步骤1 -->\n <div class=\"flex flex-col items-center p-8 rounded-xl border-2 border-solid border-blue-500 shadow-lg bg-blue-50\">\n <div class=\"w-16 h-16 flex items-center justify-center rounded-full bg-blue-600 text-white mb-6 shadow-lg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n </div>\n <div class=\"text-center\">\n <div class=\"text-sm font-bold text-blue-600 mb-2\">当前步骤</div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">需求分析</h3>\n <p class=\"text-gray-600\">解析原始需求文档</p>\n </div>\n </div>\n \n <!-- 步骤2 -->\n <div class=\"flex flex-col items-center p-8 rounded-xl border border-solid border-gray-200 shadow-md bg-white opacity-90\">\n <div class=\"w-16 h-16 flex items-center justify-center rounded-full bg-gray-100 text-gray-500 mb-6 shadow-md\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2\" />\n </svg>\n </div>\n <div class=\"text-center\">\n <div class=\"text-sm font-bold text-gray-500 mb-2\">待完成</div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">用例生成</h3>\n <p class=\"text-gray-600\">智能匹配相似用例</p>\n </div>\n </div>\n \n <!-- 步骤3 -->\n <div class=\"flex flex-col items-center p-8 rounded-xl border border-solid border-gray-200 shadow-md bg-white opacity-80\">\n <div class=\"w-16 h-16 flex items-center justify-center rounded-full bg-gray-100 text-gray-500 mb-6 shadow-md\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\" />\n </svg>\n </div>\n <div class=\"text-center\">\n <div class=\"text-sm font-bold text-gray-500 mb-2\">待完成</div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">用例优化</h3>\n <p class=\"text-gray-600\">人工校验与调整</p>\n </div>\n </div>\n \n <!-- 步骤4 -->\n <div class=\"flex flex-col items-center p-8 rounded-xl border border-solid border-gray-200 shadow-md bg-white opacity-70\">\n <div class=\"w-16 h-16 flex items-center justify-center rounded-full bg-gray-100 text-gray-500 mb-6 shadow-md\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\" />\n </svg>\n </div>\n <div class=\"text-center\">\n <div class=\"text-sm font-bold text-gray-500 mb-2\">待完成</div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">关联管理</h3>\n <p class=\"text-gray-600\">建立需求-用例映射</p>\n </div>\n </div>\n </div>\n </div>\n</div>"
},
"next": [
"添加交互JS",
"点击切换步骤",
"进度条动画",
"完成状态图标",
"添加说明文字"
]
}
```