{
"summary": "作为Level 3高级UI设计师，已创建极致优化的水平排列下拉菜单组

{
"summary": "作为Level 3高级UI设计师，已创建极致优化的水平排列下拉菜单组件，采用现代化玻璃拟态设计、流畅的交互动画、智能色彩系统和精致的视觉细节，完美适配各种导航场景",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl border border-white/20 p-8 min-w-max transform transition-all duration-300 ease-out hover:shadow-2xl\">\n <div class=\"flex items-center justify-between mb-6\">\n <h2 class=\"text-xl font-bold text-gray-800 flex items-center space-x-2\">\n <div class=\"w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center\">\n <svg class=\"w-4 h-4 text-white\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z\"/>\n </svg>\n </div>\n <span class=\"bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent\">示例库</span>\n </h2>\n <div class=\"w-2 h-2 bg-green-400 rounded-full animate-pulse\"></div>\n </div>\n \n <div class=\"flex space-x-8\">\n <!-- 首页部分 -->\n <div class=\"min-w-[200px]\">\n <h3 class=\"text-sm font-semibold text-gray-700 mb-4 flex items-center space-x-2 group\">\n <div class=\"w-6 h-6 bg-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-200 transition-colors duration-300\">\n <svg class=\"w-3 h-3 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\"/>\n </svg>\n </div>\n <span class=\"text-gray-600 group-hover:text-blue-600 transition-colors duration-300\">首页</span>\n </h3>\n <div class=\"grid grid-cols-1 gap-1\">\n <a href=\"/home\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-blue-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-blue-600 transition-colors duration-200\">经典布局</span>\n </a>\n <a href=\"/home-v2\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-blue-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-blue-600 transition-colors duration-200\">服务介绍</span>\n </a>\n <a href=\"/home-v3\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-blue-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-blue-600 transition-colors duration-200\">应用推广</span>\n </a>\n <a href=\"/home-v4\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-blue-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-blue-600 transition-colors duration-200\">应用介绍</span>\n </a>\n <a href=\"/home-v5\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-blue-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-blue-600 transition-colors duration-200\">在线课程</span>\n </a>\n </div>\n </div>\n\n <!-- 分隔竖线 -->\n <div class=\"w-px bg-gradient-to-b from-transparent via-gray-200 to-transparent\"></div>\n\n <!-- 问答部分 -->\n <div class=\"min-w-[120px]\">\n <h3 class=\"text-sm font-semibold text-gray-700 mb-4 flex items-center space-x-2 group\">\n <div class=\"w-6 h-6 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-200 transition-colors duration-300\">\n <svg class=\"w-3 h-3 text-green-600\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z\"/>\n </svg>\n </div>\n <span class=\"text-gray-600 group-hover:text-green-600 transition-colors duration-300\">问答</span>\n </h3>\n <a href=\"/questions\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-green-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-green-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-green-600 transition-colors duration-200\">问答</span>\n </a>\n </div>\n\n <!-- 分隔竖线 -->\n <div class=\"w-px bg-gradient-to-b from-transparent via-gray-200 to-transparent\"></div>\n\n <!-- 自定义组件部分 -->\n <div class=\"min-w-[150px]\">\n <h3 class=\"text-sm font-semibold text-gray-700 mb-4 flex items-center space-x-2 group\">\n <div class=\"w-6 h-6 bg-purple-100 rounded-lg flex items-center justify-center group-hover:bg-purple-200 transition-colors duration-300\">\n <svg class=\"w-3 h-3 text-purple-600\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z\"/>\n </svg>\n </div>\n <span class=\"text-gray-600 group-hover:text-purple-600 transition-colors duration-300\">自定义组件</span>\n </h3>\n <div class=\"space-y-1\">\n <a href=\"/sample/card-tailwind\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-purple-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-purple-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-purple-600 transition-colors duration-200\">普通卡片</span>\n </a>\n <a href=\"/sample/blog-card\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-purple-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-purple-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-purple-600 transition-colors duration-200\">博客卡片</span>\n </a>\n </div>\n </div>\n\n <!-- 分隔竖线 -->\n <div class=\"w-px bg-gradient-to-b from-transparent via-gray-200 to-transparent\"></div>\n\n <!-- 列表页部分 -->\n <div class=\"min-w-[150px]\">\n <h3 class=\"text-sm font-semibold text-gray-700 mb-4 flex items-center space-x-2 group\">\n <div class=\"w-6 h-6 bg-orange-100 rounded-lg flex items-center justify-center group-hover:bg-orange-200 transition-colors duration-300\">\n <svg class=\"w-3 h-3 text-orange-600\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9 2a1 1 0 000 2h2a1 1 0 100-2H9z\"/>\n <path fill-rule=\"evenodd\" d=\"M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z\" clip-rule=\"evenodd\"/>\n </svg>\n </div>\n <span class=\"text-gray-600 group-hover:text-orange-600 transition-colors duration-300\">列表页</span>\n </h3>\n <div class=\"space-y-1\">\n <a href=\"/sample/view-list\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-orange-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-orange-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-orange-600 transition-colors duration-200\">视图列表</span>\n </a>\n <a href=\"/blog\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-orange-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-orange-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-orange-600 transition-colors duration-200\">博客列表</span>\n </a>\n <a href=\"/sample/tailwind-card-list\" class=\"group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 hover:bg-orange-50 hover:scale-105 transform\">\n <div class=\"w-1 h-1 bg-orange-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n <span class=\"text-sm text-gray-700 group-hover:text-orange-600 transition-colors duration-200\">Tailwind 卡片列表</span>\n </a>\n </div>\n </div>\n </div>\n</div>"
},
"next": ["添加滚动动画效果", "优化移动端折叠", "添加搜索过滤功能", "实现拖拽排序", "添加主题切换"]
}