{
"summary": "作为高级UI设计师，已将组件优化为适合下拉菜单的精美样式，采用卡片悬

{
"summary": "作为高级UI设计师，已将组件优化为适合下拉菜单的精美样式，采用卡片悬浮效果、渐变背景、精致图标和微交互动画，提升整体视觉层次和用户体验",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"bg-white rounded-xl shadow-xl border border-gray-100 p-6 min-w-[280px] backdrop-blur-sm bg-opacity-95\">\n <h2 class=\"text-lg font-semibold text-gray-800 mb-4 flex items-center\">\n <svg class=\"w-5 h-5 text-blue-500 mr-2\" 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 示例库\n </h2>\n \n <div class=\"space-y-4\">\n <!-- 首页部分 -->\n <div>\n <h3 class=\"text-sm font-medium text-gray-600 mb-3 flex items-center\">\n <svg class=\"w-4 h-4 text-blue-400 mr-2\" 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 首页\n </h3>\n <div class=\"grid grid-cols-2 gap-2\">\n <a href=\"/home\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 经典布局\n </a>\n <a href=\"/home-v2\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 服务介绍\n </a>\n <a href=\"/home-v3\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 应用推广\n </a>\n <a href=\"/home-v4\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 应用介绍\n </a>\n <a href=\"/home-v5\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 在线课程\n </a>\n <a href=\"/home-v6\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 医疗科技\n </a>\n <a href=\"/home-v7\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n Sass 服务\n </a>\n <a href=\"/home-v8\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 应用市场\n </a>\n <a href=\"/home-v9\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 艺术科学\n </a>\n <a href=\"/home-v10\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n App 应用\n </a>\n <a href=\"/home-v11\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 客户故事\n </a>\n <a href=\"/home-v12\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 工作室\n </a>\n <a href=\"/home-v13\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 现代商业\n </a>\n <a href=\"/home-v14\" class=\"text-sm text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out\">\n 生活家居\n </a>\n </div>\n </div>\n\n <!-- 分隔线 -->\n <div class=\"border-t border-gray-100 my-4\"></div>\n\n <!-- 问答部分 -->\n <div>\n <h3 class=\"text-sm font-medium text-gray-600 mb-3 flex items-center\">\n <svg class=\"w-4 h-4 text-green-400 mr-2\" 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 问答\n </h3>\n <a href=\"/questions\" class=\"text-sm text-gray-700 hover:text-green-600 hover:bg-green-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out block\">\n 问答\n </a>\n </div>\n\n <!-- 分隔线 -->\n <div class=\"border-t border-gray-100 my-4\"></div>\n\n <!-- 自定义组件部分 -->\n <div>\n <h3 class=\"text-sm font-medium text-gray-600 mb-3 flex items-center\">\n <svg class=\"w-4 h-4 text-purple-400 mr-2\" 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 自定义组件\n </h3>\n <div class=\"space-y-1\">\n <a href=\"/sample/card-tailwind\" class=\"text-sm text-gray-700 hover:text-purple-600 hover:bg-purple-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out block\">\n 普通卡片\n </a>\n <a href=\"/sample/blog-card\" class=\"text-sm text-gray-700 hover:text-purple-600 hover:bg-purple-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out block\">\n 博客卡片\n </a>\n </div>\n </div>\n\n <!-- 分隔线 -->\n <div class=\"border-t border-gray-100 my-4\"></div>\n\n <!-- 列表页部分 -->\n <div>\n <h3 class=\"text-sm font-medium text-gray-600 mb-3 flex items-center\">\n <svg class=\"w-4 h-4 text-orange-400 mr-2\" 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 列表页\n </h3>\n <div class=\"space-y-1\">\n <a href=\"/sample/view-list\" class=\"text-sm text-gray-700 hover:text-orange-600 hover:bg-orange-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out block\">\n 视图列表\n </a>\n <a href=\"/blog\" class=\"text-sm text-gray-700 hover:text-orange-600 hover:bg-orange-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out block\">\n 博客列表\n </a>\n <a href=\"/sample/tailwind-card-list\" class=\"text-sm text-gray-700 hover:text-orange-600 hover:bg-orange-50 rounded-md px-3 py-2 transition-all duration-200 ease-in-out block\">\n Tailwind 卡片列表\n </a>\n </div>\n </div>\n </div>\n</div>"
},
"next": ["添加悬停缩放效果", "优化图标动画", "调整阴影深度", "添加淡入淡出", "优化响应式断点"]
}