使用Trae工具生成网页版书架和书籍的图形操作界面
直接上图：
以下是我发给AI的提示词(我懒得连接数据库了，所以直接做个html版的案例):
生成一个html网页，网页中循环生成一排排的书架，每排书架上循环放置立起来的书籍，当用户使用鼠标点击书脊时，弹出这本书的简介，使用html、css、JavaScript、jQuery等技术栈，网页中书架的UI整体使用淡紫色。网页背景色使用豆绿色护眼的颜色。生成的所有文件放在电脑的桌面上。
AI生成的源代码如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的书架</title> <!-- 引入 jQuery CDN --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script> <style> /* ========== 全局重置 ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ========== 页面背景：豆绿色护眼 ========== */ body { /* 豆绿色护眼渐变背景 */ background: linear-gradient(135deg, #C7D8A9 0%, #A8C97F 50%, #B4D66D 100%); min-height: 100vh; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; } /* ========== 页面标题 ========== */ .page-title { color: #5D4E6D; font-size: 2.2rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); letter-spacing: 3px; } .page-subtitle { color: #7A6B8A; font-size: 1rem; margin-bottom: 25px; opacity: 0.8; } /* ========== 书架外层容器 ========== */ .bookshelf-container { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 0; /* 排与排之间无间隙，形成整体书架 */ } /* ========== 单排书架 ========== */ .shelf-row { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; /* 书架隔板区域 */ min-height: 200px; padding: 0 20px; background: #D8BFD8; /* 顶板立体感：顶部内阴影模拟厚度 */ box-shadow: inset 0 6px 8px -4px rgba(90, 60, 90, 0.3), inset 0 -2px 3px rgba(255, 255, 255, 0.3); border-bottom: 6px solid #C0A0C0; } /* 书架左侧板 */ .shelf-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(to right, #B89AB8, #D8BFD8); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.15); z-index: 5; } /* 书架右侧板 */ .shelf-row::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(to left, #B89AB8, #D8BFD8); box-shadow: -2px 0 4px rgba(0, 0, 0, 0.15); z-index: 5; } /* 书架底板（隔板） */ .shelf-board { position: absolute; left: 0; right: 0; bottom: -6px; height: 14px; background: linear-gradient(to bottom, #D8BFD8 0%, #C0A0C0 40%, #A88AA8 100%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); z-index: 6; } /* ========== 书籍（书脊）样式 ========== */ .book { position: relative; display: flex; align-items: center; justify-content: center; /* 书脊宽度随机，高度统一 */ width: 42px; min-width: 38px; max-width: 55px; height: 180px; /* 书脊圆角与立体感 */ border-radius: 3px 3px 1px 1px; cursor: pointer; /* 书脊顶部高光 + 底部阴影，模拟立体感 */ box-shadow: inset 2px 0 3px rgba(255, 255, 255, 0.35), inset -2px 0 4px rgba(0, 0, 0, 0.35), 2px 2px 5px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, filter 0.2s ease; z-index: 2; /* 书脊微微倾斜效果 */ transform-origin: bottom center; overflow: hidden; } /* 书脊悬停效果：微微放大、变亮 */ .book:hover { transform: translateY(-12px) scale(1.08); filter: brightness(1.25); z-index: 10; box-shadow: inset 2px 0 3px rgba(255, 255, 255, 0.5), inset -2px 0 4px rgba(0, 0, 0, 0.25), 4px 6px 12px rgba(0, 0, 0, 0.4); } /* 书脊上的装饰条（顶部和底部金色边条） */ .book::before, .book::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: linear-gradient(to right, rgba(218, 165, 32, 0.6), rgba(255, 215, 0, 0.8), rgba(218, 165, 32, 0.6)); } .book::before { top: 10px; } .book::after { bottom: 10px; } /* 书脊文字：竖排 */ .book-title { writing-mode: vertical-rl; text-orientation: upright; font-size: 13px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); letter-spacing: 1px; max-height: 130px; overflow: hidden; text-align: center; padding: 0 2px; user-select: none; line-height: 1.1; } /* ========== 模态框样式 ========== */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 1000; justify-content: center; align-items: center; } .modal-overlay.active { display: flex; } .modal-box { background: linear-gradient(135deg, #F5F0FA 0%, #E6E6FA 100%); border-radius: 12px; width: 90%; max-width: 480px; padding: 0; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4); overflow: hidden; animation: modalIn 0.3s ease; border: 3px solid #D8BFD8; } @keyframes modalIn { from { opacity: 0; transform: scale(0.8) translateY(-30px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* 模态框顶部色带 */ .modal-header { padding: 20px 25px; color: #fff; position: relative; } .modal-header h2 { font-size: 1.4rem; margin-bottom: 6px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .modal-header .modal-author { font-size: 0.95rem; opacity: 0.9; } /* 关闭按钮 */ .modal-close { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.3); color: #fff; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; line-height: 1; } .modal-close:hover { background: rgba(255, 255, 255, 0.6); } /* 模态框正文 */ .modal-body { padding: 22px 25px 28px; } .modal-body .modal-label { font-size: 0.85rem; color: #9B7EBD; font-weight: bold; margin-bottom: 8px; letter-spacing: 1px; } .modal-body .modal-intro { font-size: 0.95rem; color: #4A3B5A; line-height: 1.8; text-indent: 2em; } /* ========== 响应式适配 ========== */ @media (max-width: 768px) { .page-title { font-size: 1.6rem; } .shelf-row { min-height: 160px; padding: 0 14px; } .book { height: 145px; width: 34px; min-width: 30px; max-width: 44px; } .book-title { font-size: 11px; max-height: 100px; } .book::before, .book::after { height: 4px; } .book::before { top: 8px; } .book::after { bottom: 8px; } } @media (max-width: 480px) { .book { height: 120px; width: 28px; min-width: 24px; max-width: 36px; } .book-title { font-size: 9px; max-height: 85px; } .shelf-row { min-height: 135px; padding: 0 10px; } } </style> </head> <body> <!-- 页面标题 --> <h1 class="page-title">📚 我的书架</h1> <p class="page-subtitle">点击任意书脊查看书籍简介</p> <!-- 书架容器（JS动态生成书架排和书籍） --> <div class="bookshelf-container" id="bookshelf"> <!-- 书架内容由jQuery动态生成 --> </div> <!-- 模态框（自定义弹窗） --> <div class="modal-overlay" id="modalOverlay"> <div class="modal-box" id="modalBox"> <div class="modal-header" id="modalHeader"> <button class="modal-close" id="modalClose">×</button> <h2 id="modalTitle"></h2> <span class="modal-author" id="modalAuthor"></span> </div> <div class="modal-body"> <div class="modal-label">内容简介</div> <p class="modal-intro" id="modalIntro"></p> </div> </div> </div> <script> $(function () { // ========== 书籍数据池（44本真实书籍） ========== var bookData = [ { title: "红楼梦", author: "曹雪芹", intro: "中国古典四大名著之一，以贾宝玉、林黛玉、薛宝钗的爱情婚姻悲剧为主线，深刻描写了贾、史、王、薛四大家族的兴衰变化，展现了封建社会的百态人生。", color: "#8B0000" }, { title: "三国演义", author: "罗贯中", intro: "中国古典四大名著之一，描写了东汉末年至西晋初年近百年的历史风云，塑造了曹操、刘备、关羽、诸葛亮等众多鲜明人物形象。", color: "#2F4F4F" }, { title: "西游记", author: "吴承恩", intro: "中国古典四大名著之一，讲述唐僧师徒四人西天取经的故事，充满奇幻色彩，蕴含深刻的人生哲理和社会寓意。", color: "#FF8C00" }, { title: "水浒传", author: "施耐庵", intro: "中国古典四大名著之一，描写北宋末年以宋江为首的一百零八位好汉在梁山聚义的故事，展现了官逼民反的社会现实。", color: "#556B2F" }, { title: "百年孤独", author: "加西亚·马尔克斯", intro: "魔幻现实主义文学代表作，讲述布恩迪亚家族七代人的传奇故事，展现拉丁美洲百年来的兴衰变迁，荣获诺贝尔文学奖。", color: "#4B0082" }, { title: "活着", author: "余华", intro: "讲述农民福贵历经人生苦难的一生，从地主少爷到一无所有，亲人相继离世，却依然坚强活着的故事，是中国当代文学经典。", color: "#696969" }, { title: "围城", author: "钱钟书", intro: "中国现代文学经典，以幽默讽刺的笔调描写知识分子方鸿渐的人生经历，揭示了'城外的人想冲进去，城里的人想逃出来'的人生困境。", color: "#708090" }, { title: "平凡的世界", author: "路遥", intro: "以孙少安、孙少平两兄弟为主线，全景式展现了中国20世纪70年代到80年代城乡社会生活的巨大变迁，荣获茅盾文学奖。", color: "#8B4513" }, { title: "白夜行", author: "东野圭吾", intro: "日本推理小说杰作，讲述两个孩子因一桩命案而命运交织的故事，跨越十九年的爱与犯罪，深刻揭示人性的黑暗与光明。", color: "#1a1a2e" }, { title: "解忧杂货店", author: "东野圭吾", intro: "一家神秘的杂货店，通过书信连接过去与未来，为烦恼的人们解答人生困惑，温暖治愈的故事令人动容。", color: "#2E8B57" }, { title: "追风筝的人", author: "卡勒德·胡赛尼", intro: "讲述阿富汗少年阿米尔与仆人哈桑的友谊与背叛，以及成年后追寻救赎的故事，深刻揭示了忠诚、勇气与救赎的主题。", color: "#CD853F" }, { title: "小王子", author: "圣埃克苏佩里", intro: "法国经典童话，讲述小王子从自己的星球出发，游历各星球的故事，以孩子的视角揭示了成人世界的荒诞与人生的真谛。", color: "#FFD700" }, { title: "1984", author: "乔治·奥威尔", intro: "反乌托邦经典小说，描绘了一个极权主义社会，主人公温斯顿在思想警察的监控下挣扎求存，警示了权力对人性的摧残。", color: "#2F2F2F" }, { title: "三体", author: "刘慈欣", intro: "中国科幻里程碑之作，讲述地球文明与三体文明的接触与对抗，探讨了宇宙社会学与文明存亡的宏大主题，荣获雨果奖。", color: "#191970" }, { title: "球状闪电", author: "刘慈欣", intro: "以球状闪电这一自然现象为线索，展开对量子物理与宇宙本质的探索，兼具硬科幻的严谨与文学的想象力。", color: "#008080" }, { title: "人类简史", author: "尤瓦尔·赫拉利", intro: "从认知革命、农业革命到科学革命，以全新视角梳理人类十万年的发展历程，深刻反思人类文明的成就与代价。", color: "#D2691E" }, { title: "未来简史", author: "尤瓦尔·赫拉利", intro: "探讨人类未来的发展方向，从智人征服世界到智人为神人，思考生物技术与人工智能将如何重塑人类社会。", color: "#8B4513" }, { title: "时间简史", author: "史蒂芬·霍金", intro: "物理学家霍金的科普名著，用通俗语言讲解宇宙起源、黑洞、时间本质等前沿物理概念，激发无数人对宇宙的好奇。", color: "#1C1C1C" }, { title: "明朝那些事", author: "当年明月", intro: "以幽默风趣的笔调讲述明朝三百年历史，从朱元璋开国到崇祯亡国，让严肃历史变得生动有趣，引发全民读史热潮。", color: "#B8860B" }, { title: "万历十五年", author: "黄仁宇", intro: "以大历史观审视明朝万历年间的关键人物与事件，揭示了中国传统社会走向衰落的深层结构性原因。", color: "#DAA520" }, { title: "乡土中国", author: "费孝通", intro: "社会学经典著作，深入分析中国农村社会的'差序格局'、礼治秩序等基本特征，理解中国传统社会结构的必读之作。", color: "#6B8E23" }, { title: "撒哈拉的故事", author: "三毛", intro: "三毛以细腻深情的笔触，记录她在撒哈拉沙漠的生活点滴，充满异域风情与对自由生活的热爱。", color: "#DEB887" }, { title: "梦里花落知多少", author: "三毛", intro: "三毛在丈夫荷西意外去世后创作的散文集，以真挚的笔触书写丧夫之痛与对生命的感悟，感人至深。", color: "#9370DB" }, { title: "倾城之恋", author: "张爱玲", intro: "张爱玲代表作，讲述白流苏与范柳原在香港沦陷时的爱情故事，以冷峻笔调揭示了乱世中人与人之间的算计与温情。", color: "#800080" }, { title: "半生缘", author: "张爱玲", intro: "讲述顾曼桢与沈世钧错过的半生情缘，描绘了旧时代女性命运的无奈与悲凉，是张爱玲最动人的长篇小说之一。", color: "#663399" }, { title: "黄金时代", author: "王小波", intro: "以知青时代为背景，讲述王二与陈清扬的故事，以黑色幽默的笔调表达对自由与理性的追求，是当代文学经典。", color: "#B8860B" }, { title: "沉默的大多数", author: "王小波", intro: "王小波杂文精选集，以睿智幽默的文字评论社会、文化、思想等话题，展现了独立思考与理性精神的力量。", color: "#2F4F4F" }, { title: "挪威的森林", author: "村上春树", intro: "日本畅销小说，以主人公渡边的回忆，讲述青春时代与直子、绿子之间的爱情与迷茫，探讨生与死、孤独与联结。", color: "#228B22" }, { title: "海边的卡夫卡", author: "村上春树", intro: "讲述十五岁少年田村卡夫卡的奇幻旅程，两条叙事线交织，充满隐喻与哲思，是村上春树最具想象力的作品之一。", color: "#4682B4" }, { title: "且听风吟", author: "村上春树", intro: "村上春树处女作，以轻盈的笔调描绘二十岁夏天的青春往事，奠定了其独特的文学风格，荣获群像新人文学奖。", color: "#5F9EA0" }, { title: "皮囊", author: "蔡崇达", intro: "以故乡福建为背景，用质朴深情的文字书写亲情、故土与成长，每一篇都是对生命与灵魂的深刻凝视。", color: "#A0522D" }, { title: "看见", author: "柴静", intro: "央视记者柴静的自传体作品，记录了她十年采访生涯中的重大事件与个人成长，以真诚的目光观察社会与人性。", color: "#778899" }, { title: "南渡北归", author: "岳南", intro: "全景式描写抗战时期中国知识分子的南渡西迁与战后北归，展现大师们的风骨与命运，是一部厚重的人物史诗。", color: "#8B4513" }, { title: "局外人", author: "加缪", intro: "存在主义文学代表作，讲述默尔索在母亲葬礼上冷漠、随后意外杀人被判死刑的故事，揭示世界的荒诞与人的真实。", color: "#2F2F2F" }, { title: "鼠疫", author: "加缪", intro: "以一座被鼠疫封锁的城市为背景，描写不同人物面对灾难时的选择与行动，探讨反抗、团结与人的尊严。", color: "#696969" }, { title: "老人与海", author: "海明威", intro: "讲述老渔夫桑提亚哥在大海上与巨大马林鱼搏斗的故事，'人可以被毁灭但不能被打败'的精神震撼人心，荣获诺贝尔奖。", color: "#006400" }, { title: "了不起的盖茨比", author: "菲茨杰拉德", intro: "美国文学经典，描绘爵士时代盖茨比对旧爱的执著追求与幻灭，深刻揭示美国梦的光华与虚妄。", color: "#FFD700" }, { title: "飘", author: "玛格丽特·米切尔", intro: "以美国南北战争为背景，讲述斯嘉丽·奥哈拉在战火中的坚韧与爱情纠葛，塑造了文学史上最鲜明的女性形象之一。", color: "#8B0000" }, { title: "简爱", author: "夏洛蒂·勃朗特", intro: "英国文学经典，讲述孤女简爱历经磨难追求独立人格与平等爱情的故事，塑造了女性自我觉醒的不朽形象。", color: "#4169E1" }, { title: "傲慢与偏见", author: "简·奥斯汀", intro: "英国文学经典，以伊丽莎白与达西的爱情为主线，用幽默细腻的笔调描绘了19世纪英国乡村社会的婚恋观念。", color: "#DB7093" }, { title: "罪与罚", author: "陀思妥耶夫斯基", intro: "俄国文学巨著，讲述贫困大学生拉斯柯尔尼科夫杀人后的心理挣扎与精神救赎，深刻探讨道德、信仰与人性的主题。", color: "#800000" }, { title: "战争与和平", author: "托尔斯泰", intro: "俄国文学史诗巨著，以拿破仑战争为背景，描绘了俄国贵族家庭的命运与时代洪流，是世界文学最伟大的作品之一。", color: "#556B2F" }, { title: "安娜·卡列尼娜", author: "托尔斯泰", intro: "讲述贵族女子安娜追求爱情却走向悲剧的故事，以广阔的视角展现了19世纪俄国社会的全景，是现实主义文学的巅峰。", color: "#8B008B" }, { title: "基督山伯爵", author: "大仲马", intro: "法国经典复仇小说，讲述爱德蒙·唐泰斯被陷害入狱后越狱复仇的传奇故事，情节跌宕起伏，是通俗文学的典范。", color: "#4B0082" } ]; // ========== 书架配置 ========== var shelfRowCount = 6; // 书架排数 var booksPerRow = 9; // 每排书籍数量 var bookIndex = 0; // 全局书籍索引（循环取用） var $bookshelf = $("#bookshelf"); // ========== 循环生成书架排与书籍 ========== for (var row = 0; row < shelfRowCount; row++) { // 创建一排书架 var $shelfRow = $('<div class="shelf-row"></div>'); // 循环放置书籍 for (var col = 0; col < booksPerRow; col++) { // 从数据池循环取用书籍 var book = bookData[bookIndex % bookData.length]; bookIndex++; // 创建书脊元素 var $book = $('<div class="book"></div>'); // 设置书脊背景色（渐变增强立体感） $book.css({ "background": "linear-gradient(to right, " + shadeColor(book.color, -25) + ", " + book.color + " 15%, " + book.color + " 85%, " + shadeColor(book.color, -40) + ")" }); // 书脊上书名（竖排文字） var $title = $('<div class="book-title"></div>').text(book.title); $book.append($title); // 将书籍数据存入data属性，供点击时读取 $book.data("bookInfo", book); $shelfRow.append($book); } // 添加书架底板 var $board = $('<div class="shelf-board"></div>'); $shelfRow.append($board); $bookshelf.append($shelfRow); } // ========== 辅助函数：调整颜色亮度 ========== function shadeColor(color, percent) { // 将十六进制颜色加深或变亮 var R = parseInt(color.substring(1, 3), 16); var G = parseInt(color.substring(3, 5), 16); var B = parseInt(color.substring(5, 7), 16); R = Math.max(0, Math.min(255, R + (R * percent / 100))); G = Math.max(0, Math.min(255, G + (G * percent / 100))); B = Math.max(0, Math.min(255, B + (B * percent / 100))); return "#" + Math.round(R).toString(16).padStart(2, "0") + Math.round(G).toString(16).padStart(2, "0") + Math.round(B).toString(16).padStart(2, "0"); } // ========== 点击书脊弹出模态框 ========== $(document).on("click", ".book", function () { var bookInfo = $(this).data("bookInfo"); if (!bookInfo) return; // 填充模态框内容 $("#modalTitle").text(bookInfo.title); $("#modalAuthor").text("作者：" + bookInfo.author); $("#modalIntro").text(bookInfo.intro); // 模态框头部背景色使用书籍颜色 $("#modalHeader").css("background", "linear-gradient(135deg, " + shadeColor(bookInfo.color, 10) + ", " + bookInfo.color + ")"); // 显示模态框 $("#modalOverlay").addClass("active"); }); // ========== 关闭模态框 ========== // 点击关闭按钮 $("#modalClose").on("click", function () { $("#modalOverlay").removeClass("active"); }); // 点击遮罩层关闭 $("#modalOverlay").on("click", function (e) { if (e.target === this) { $(this).removeClass("active"); } }); // 按ESC键关闭模态框 $(document).on("keydown", function (e) { if (e.keyCode === 27) { $("#modalOverlay").removeClass("active"); } }); }); </script> </body> </html>
