{
"summary": "已创建一个现代化响应式表单组件，包含姓名、手机号、职业选择和婚姻状况

{
"summary": "已创建一个现代化响应式表单组件，包含姓名、手机号、职业选择和婚姻状况单选按钮组，采用TailwindCSS设计，具有良好的交互状态和无障碍访问支持",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"max-w-md mx-auto p-6 bg-white rounded-lg shadow-md\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-6 text-center\">个人信息表单</h2>\n \n <form class=\"space-y-4\">\n <!-- 姓名输入 -->\n <div>\n <label for=\"name\" class=\"block text-sm font-medium text-gray-700 mb-1\">姓名</label>\n <input type=\"text\" id=\"name\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors\" placeholder=\"请输入您的姓名\">\n </div>\n \n <!-- 手机号输入 -->\n <div>\n <label for=\"phone\" class=\"block text-sm font-medium text-gray-700 mb-1\">手机号</label>\n <input type=\"tel\" id=\"phone\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors\" placeholder=\"请输入您的手机号码\">\n </div>\n \n <!-- 职业选择 -->\n <div>\n <label for=\"occupation\" class=\"block text-sm font-medium text-gray-700 mb-1\">职业</label>\n <select id=\"occupation\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors\">\n <option value=\"\">请选择职业</option>\n <option value=\"student\">学生</option>\n <option value=\"teacher\">教师</option>\n <option value=\"engineer\">工程师</option>\n <option value=\"doctor\">医生</option>\n <option value=\"other\">其他</option>\n </select>\n </div>\n \n <!-- 婚姻状况 -->\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">婚姻状况</label>\n <div class=\"flex space-x-4\">\n <label class=\"inline-flex items-center\">\n <input type=\"radio\" name=\"marital-status\" value=\"single\" class=\"text-blue-600 focus:ring-blue-500\">\n <span class=\"ml-2 text-gray-700\">未婚</span>\n </label>\n <label class=\"inline-flex items-center\">\n <input type=\"radio\" name=\"marital-status\" value=\"married\" class=\"text-blue-600 focus:ring-blue-500\">\n <span class=\"ml-2 text-gray-700\">已婚</span>\n </label>\n </div>\n </div>\n \n <!-- 提交按钮 -->\n <button type=\"submit\" class=\"w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors\">\n 提交信息\n </button>\n </form>\n</div>"
},
"next": ["添加表单验证", "添加成功提交反馈", "添加加载状态", "添加错误提示", "添加重置按钮"]
}