让AI给我生成人体构造图然后在人体图上添加标注。直接上图在人体结构图上直接双击就可以编辑文字文字的颜色可以自定义。以下是我发送给AI的提示词(我懒得连接数据库了直接做成一个html网页版的案例)生成一个html网页网页中生成一个人体的身体图当用户使用鼠标双击身体上任何一个部位时可以编辑文字并且可以自定义文字的颜色这个功能主要是让医生可以形象生动的记录病人的身体某个部位的生病情况请使用html、css、JavaScript、jQuery等技术栈网页中身体图整体使用淡紫色。网页背景色使用豆绿色护眼的颜色。生成的所有文件放在电脑的桌面上。以下是AI生成的源代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title病历体格检查记录/title !-- 引入jQuery CDN -- script srchttps://code.jquery.com/jquery-3.7.1.min.js/script !-- 引入html2canvas用于导出截图 -- script srchttps://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js/script style /* 全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, 微软雅黑, sans-serif; /* 豆绿色护眼背景 */ background-color: #C7D8A9; color: #333; min-height: 100vh; } /* 顶部标题栏 */ .header { text-align: center; padding: 20px; background: linear-gradient(135deg, #D8BFD8, #E6E6FA); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .header h1 { font-size: 28px; color: #5a3a7a; letter-spacing: 3px; } .header p { font-size: 14px; color: #777; margin-top: 6px; } /* 主内容区 */ .main-container { display: flex; gap: 20px; padding: 20px; max-width: 1200px; margin: 0 auto; align-items: flex-start; } /* 身体图区域 */ .body-area { flex: 1; position: relative; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 20px; display: flex; justify-content: center; align-items: flex-start; } .body-svg-wrapper { position: relative; display: inline-block; /* SVG缩放容器 */ } .body-svg-wrapper svg { display: block; width: 400px; height: auto; max-width: 100%; } /* SVG身体部位样式 */ .body-part { fill: #DDA0DD; stroke: #9370DB; stroke-width: 2; cursor: pointer; transition: fill 0.2s ease; } .body-part:hover { fill: #D8BFD8; } /* 标注文字层绝对定位覆盖在SVG上 */ .annotation-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .annotation-item { position: absolute; pointer-events: auto; cursor: move; font-size: 13px; font-weight: bold; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.85); white-space: nowrap; user-select: none; border: 1px solid rgba(0,0,0,0.1); z-index: 10; } .annotation-item .del-btn { display: inline-block; margin-left: 4px; color: #ccc; cursor: pointer; font-size: 14px; } .annotation-item .del-btn:hover { color: #ff4444; } /* 标注列表面板 */ .panel { width: 300px; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 16px; flex-shrink: 0; } .panel h2 { font-size: 18px; color: #5a3a7a; margin-bottom: 12px; border-bottom: 2px solid #E6E6FA; padding-bottom: 8px; } .annotation-list { max-height: 500px; overflow-y: auto; } .annotation-list-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border-radius: 6px; background: #F8F0FC; border-left: 4px solid #DDA0DD; font-size: 13px; transition: background 0.2s; cursor: pointer; } .annotation-list-item:hover { background: #F0E0F8; } .annotation-list-item .part-name { font-weight: bold; color: #5a3a7a; min-width: 50px; } .annotation-list-item .text-preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .annotation-list-item .list-del-btn { color: #aaa; cursor: pointer; font-size: 16px; } .annotation-list-item .list-del-btn:hover { color: #ff4444; } .empty-tip { color: #bbb; text-align: center; padding: 20px; font-size: 14px; } /* 按钮区域 */ .btn-area { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; transition: opacity 0.2s, transform 0.1s; } .btn:hover { opacity: 0.85; } .btn:active { transform: scale(0.96); } .btn-clear { background: #E6788C; color: #fff; } .btn-export { background: #87B86D; color: #fff; } /* 编辑弹窗 */ .edit-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1000; justify-content: center; align-items: center; } .edit-modal-overlay.active { display: flex; } .edit-modal { background: #fff; border-radius: 12px; padding: 24px; width: 400px; max-width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.3); animation: modalIn 0.2s ease; } keyframes modalIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .edit-modal h3 { color: #5a3a7a; margin-bottom: 16px; font-size: 18px; } .edit-modal label { display: block; font-size: 14px; color: #666; margin-bottom: 6px; } .edit-modal textarea { width: 100%; height: 80px; border: 2px solid #E6E6FA; border-radius: 8px; padding: 8px 12px; font-size: 14px; font-family: inherit; resize: vertical; margin-bottom: 16px; } .edit-modal textarea:focus { outline: none; border-color: #DDA0DD; } .color-picker-area { margin-bottom: 16px; } .color-picker-area input[typecolor] { width: 50px; height: 36px; border: 2px solid #E6E6FA; border-radius: 6px; cursor: pointer; vertical-align: middle; } .color-picker-area .color-label { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 14px; color: #666; } .preset-colors { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; } .preset-color { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.15s; } .preset-color:hover { transform: scale(1.15); } .modal-btn-area { display: flex; gap: 10px; justify-content: flex-end; } .modal-btn { padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; transition: opacity 0.2s; } .modal-btn:hover { opacity: 0.85; } .modal-btn-confirm { background: #9370DB; color: #fff; } .modal-btn-cancel { background: #e0e0e0; color: #666; } /* 响应式适配 */ media (max-width: 768px) { .main-container { flex-direction: column; } .panel { width: 100%; } .body-svg-wrapper svg { width: 300px; } .header h1 { font-size: 22px; } } /* 提示文字 */ .tip-bar { text-align: center; padding: 8px; background: rgba(255,255,255,0.6); border-radius: 6px; margin-bottom: 12px; font-size: 13px; color: #5a7a3a; } /* Toast提示 */ .toast { display: none; position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: rgba(90,58,122,0.9); color: #fff; padding: 10px 24px; border-radius: 8px; font-size: 14px; z-index: 2000; animation: toastIn 0.3s ease; } keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /style /head body !-- 顶部标题 -- div classheader h1病历体格检查记录/h1 p双击身体部位添加标注 · 拖动文字微调位置/p /div !-- 主内容区 -- div classmain-container !-- 身体图区域 -- div classbody-area div div classtip-bar提示双击身体部位可添加检查记录/div div classbody-svg-wrapper idbodyWrapper !-- SVG人体轮廓图正面视图 -- svg viewBox0 0 400 860 xmlnshttp://www.w3.org/2000/svg idbodySvg !-- 左臂 -- path classbody-part>越努力越幸运与诸君共勉。