```json
{
"summary

```json
{
"summary": "已创建包含多张校园卡片的组件，展示不同功能卡片（学生卡、图书馆卡、消费卡），采用网格布局适配响应式设计",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"container mx-auto p-4\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-6 text-center\">我的校园卡片</h2>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <!-- 学生卡 -->\n <div class=\"bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 border-solid hover:shadow-xl transition-shadow\">\n <div class=\"bg-blue-600 p-4 text-white\">\n <div class=\"flex items-center justify-between\">\n <h3 class=\"text-lg font-bold\">学生证</h3>\n <span class=\"text-xs bg-blue-800 px-2 py-1 rounded-full\">主卡</span>\n </div>\n <p class=\"text-blue-100 text-sm mt-1\">身份认证 · 门禁通行</p>\n </div>\n \n <div class=\"p-4\">\n <div class=\"flex items-center space-x-3\">\n <img src=\"/assets/images/avatar/02.jpeg\" alt=\"学生头像\" class=\"w-12 h-12 rounded-full border-2 border-blue-500 border-solid\">\n <div>\n <h4 class=\"font-semibold text-gray-800\">李四</h4>\n <p class=\"text-xs text-gray-600\">学号: 2024123457</p>\n </div>\n </div>\n \n <div class=\"mt-4 grid grid-cols-2 gap-2\">\n <div class=\"bg-blue-50 p-2 rounded\">\n <p class=\"text-xs text-gray-500\">学院</p>\n <p class=\"text-sm font-medium text-blue-700\">电子信息</p>\n </div>\n <div class=\"bg-green-50 p-2 rounded\">\n <p class=\"text-xs text-gray-500\">年级</p>\n <p class=\"text-sm font-medium text-green-700\">2024级</p>\n </div>\n </div>\n \n <div class=\"mt-4 pt-3 border-t border-gray-100 border-solid\">\n <button class=\"w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg text-sm font-medium transition-colors\">\n 查看详细信息\n </button>\n </div>\n </div>\n </div>\n\n <!-- 图书馆卡 -->\n <div class=\"bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 border-solid hover:shadow-xl transition-shadow\">\n <div class=\"bg-green-600 p-4 text-white\">\n <div class=\"flex items-center justify-between\">\n <h3 class=\"text-lg font-bold\">借阅证</h3>\n <span class=\"text-xs bg-green-800 px-2 py-1 rounded-full\">正常</span>\n </div>\n <p class=\"text-green-100 text-sm mt-1\">图书借阅 · 自习预约</p>\n </div>\n \n <div class=\"p-4\">\n <div class=\"text-center mb-4\">\n <div class=\"w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto\">\n <svg class=\"w-8 h-8 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"></path>\n </svg>\n </div>\n </div>\n \n <div class=\"space-y-2\">\n <div class=\"flex justify-between text-sm\">\n <span class=\"text-gray-600\">当前借阅</span>\n <span class=\"font-medium text-green-700\">5本</span>\n </div>\n <div class=\"flex justify-between text-sm\">\n <span class=\"text-gray-600\">逾期记录</span>\n <span class=\"font-medium text-red-600\">0次</span>\n </div>\n <div class=\"flex justify-between text-sm\">\n <span class=\"text-gray-600\">信用积分</span>\n <span class=\"font-medium text-blue-600\">98分</span>\n </div>\n </div>\n \n <div class=\"mt-4 pt-3 border-t border-gray-100 border-solid\">\n <button class=\"w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg text-sm font-medium transition-colors\">\n 预约座位\n </button>\n </div>\n </div>\n </div>\n\n <!-- 消费卡 -->\n <div class=\"bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 border-solid hover:shadow-xl transition-shadow\">\n <div class=\"bg-purple-600 p-4 text-white\">\n <div class=\"flex items-center justify-between\">\n <h3 class=\"text-lg font-bold\">校园消费卡</h3>\n <span class=\"text-xs bg-purple-800 px-2 py-1 rounded-full\">在线</span>\n </div>\n <p class=\"text-purple-100 text-sm mt-1\">食堂消费 · 超市购物</p>\n </div>\n \n <div class=\"p-4\">\n <div class=\"text-center mb-4\">\n <div class=\"text-2xl font-bold text-purple-700\">¥256.80</div>\n <p class=\"text-xs text-gray-500 mt-1\">当前余额</p>\n </div>\n \n <div class=\"space-y-2 text-sm\">\n <div class=\"flex justify-between\">\n <span class=\"text-gray-600\">今日消费</span>\n <span class=\"font-medium\">¥28.50</span>\n </div>\n <div class=\"flex justify-between\">\n <span class=\"text-gray-600\">本月消费</span>\n <span class=\"font-medium\">¥324.20</span>\n </div>\n <div class=\"flex justify-between\">\n <span class=\"text-gray-600\">优惠券</span>\n <span class=\"font-medium text-red-500\">3张</span>\n </div>\n </div>\n \n <div class=\"mt-4 pt-3 border-t border-gray-100 border-solid\">\n <div class=\"grid grid-cols-2 gap-2\">\n <button class=\"bg-purple-600 hover:bg-purple-700 text-white py-2 px-3 rounded text-xs font-medium transition-colors\">\n 快速充值\n </button>\n <button class=\"bg-gray-600 hover:bg-gray-700 text-white py-2 px-3 rounded text-xs font-medium transition-colors\">\n 消费记录\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"mt-8 text-center\">\n <button class=\"inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6v6m0 0v6m0-6h6m-6 0H6\"></path>\n </svg>\n 添加新卡片\n </button>\n </div>\n</div>"
},
"next": ["添加卡片切换动画", "集成卡片管理功能", "添加余额预警", "支持卡片排序", "添加搜索筛选"]
}
```