<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
   <title>拼豆图纸生成器</title>
   <style>
       * {
           box-sizing: border-box;
       }
       
       body { 
           font-family: 'Segoe UI', sans-serif; 
           background: #e0f7fa; 
           padding: 16px; 
           margin: 0;
           min-height: 100vh;
       }
       
       h1 { 
           color: #006064; 
           text-align: center;
           margin: 0 0 20px 0;
           font-size: 28px;
       }
       
       /* 主布局：桌面端左右并排，手机端上下排列 */
       .main-layout {
           display: flex;
           gap: 20px;
           flex-direction: row;
       }
       
       /* 左侧控制面板 */
       .left-controls {
           background: white;
           padding: 20px;
           border-radius: 20px;
           box-shadow: 0 8px 20px rgba(0,0,0,0.15);
           width: 280px;
           flex-shrink: 0;
           display: flex;
           flex-direction: column;
           gap: 16px;
           font-size: 16px;
       }
       
       .control-group {
           display: flex;
           flex-direction: column;
           gap: 8px;
           background: #f8f9fa;
           padding: 12px;
           border-radius: 15px;
       }
       
       .control-group label {
           font-weight: bold;
           color: #006064;
           font-size: 16px;
       }
       
       .control-group input, 
       .control-group select {
           padding: 10px 12px;
           border: 2px solid #b2ebf2;
           border-radius: 12px;
           font-size: 16px;
           width: 100%;
           box-sizing: border-box;
           background: white;
       }
       
       .toggle-switch {
           display: flex;
           align-items: center;
           gap: 10px;
           cursor: pointer;
           background: #f8f9fa;
           padding: 12px;
           border-radius: 15px;
           font-size: 16px;
           font-weight: 500;
       }
       
       .toggle-switch input {
           width: 22px;
           height: 22px;
           cursor: pointer;
           margin: 0;
       }
       
       .button-group {
           display: flex;
           flex-direction: column;
           gap: 10px;
       }
       
       button { 
           background: #ff6b6b; 
           color: white; 
           border: none; 
           padding: 12px 16px; 
           border-radius: 30px; 
           cursor: pointer; 
           font-size: 18px; 
           font-weight: bold; 
           transition: 0.2s;
           width: 100%;
           letter-spacing: 1px;
       }
       
       button:hover { 
           transform: translateY(-2px); 
           box-shadow: 0 5px 12px rgba(255, 107, 107, 0.4); 
       }
       
       button.download-btn { 
           background: #26a69a; 
       }
       
       /* 图片列表 - 手机优化 */
       .image-list {
           background: white;
           border-radius: 15px;
           padding: 12px;
           margin-top: 10px;
           max-height: 250px;
           overflow-y: auto;
           border: 2px solid #b2ebf2;
       }
       
       .image-list-title {
           font-weight: bold;
           font-size: 16px;
           color: #006064;
           margin-bottom: 10px;
           padding-bottom: 6px;
           border-bottom: 2px solid #e0f7fa;
       }
       
       .image-items {
           display: flex;
           flex-direction: column;
           gap: 8px;
       }
       
       .image-item { 
           display: flex; 
           align-items: center; 
           padding: 10px;
           background: #f8f9fa;
           border-radius: 12px;
           cursor: pointer;
           border: 2px solid transparent;
           transition: all 0.2s ease;
           box-shadow: 0 1px 4px rgba(0,0,0,0.1);
       }
       
       .image-item.active {
           background: #e0f7fa;
           border: 2px solid #006064;
       }
       
       .image-thumb {
           width: 50px;
           height: 50px;
           object-fit: cover;
           margin-right: 12px;
           border-radius: 8px;
           border: 1px solid #fff;
           box-shadow: 0 1px 3px rgba(0,0,0,0.2);
       }
       
       .image-info {
           flex: 1;
           display: flex;
           flex-direction: column;
           gap: 4px;
       }
       
       .image-name { 
           font-size: 14px;
           font-weight: bold;
           color: #006064;
           word-break: break-word;
       }
       
       .image-size {
           font-size: 12px;
           color: #666;
       }
       
       /* 右侧内容区 */
       .right-content {
           flex: 1;
           display: flex;
           flex-direction: column;
           gap: 20px;
           min-width: 0; /* 防止溢出 */
       }
       
       .canvas-wrapper {
           overflow: auto;
           max-width: 100%;
           max-height: 60vh;
           border: 4px solid #fff;
           border-radius: 10px;
           box-shadow: 0 4px 15px rgba(0,0,0,0.2);
           background: #f0f0f0;
           text-align: center;
       }
       
       canvas {
           max-width: 100%;
           height: auto;
           display: block;
           margin: 0 auto;
       }
       
       .stats-panel { 
           background: white; 
           padding: 16px; 
           border-radius: 15px; 
           box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
       }
       
       .stats-panel h3 {
           color: #006064;
           font-size: 20px;
           margin: 0 0 12px 0;
           border-bottom: 2px solid #e0f7fa;
           padding-bottom: 8px;
       }
       
       /* 色卡统计列表 - 网格布局，手机优化 */
       .stats-grid {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
           gap: 10px;
       }
       
       .bead-card { 
           display: flex; 
           align-items: center; 
           padding: 8px 12px;
           background: #f8f9fa;
           border-radius: 40px;
           font-size: 14px; 
           border: 1px solid #e0e0e0;
           transition: all 0.2s ease;
       }
       
       .bead-color-box { 
           width: 28px; 
           height: 28px; 
           border-radius: 50%; 
           border: 1px solid #fff;
           box-shadow: 0 1px 3px rgba(0,0,0,0.2);
           margin-right: 10px; 
           flex-shrink: 0;
       }
       
       .bead-info {
           flex: 1;
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 8px;
       }
       
       .bead-code { 
           font-weight: bold; 
           font-size: 16px;
           color: #006064;
       }
       
       .bead-count { 
           color: #666; 
           font-size: 14px;
           font-weight: 500;
           background: #e0f7fa;
           padding: 2px 8px;
           border-radius: 20px;
           white-space: nowrap;
       }
       
       .stats-total {
           margin-top: 15px;
           border-top: 2px solid #e0f7fa;
           padding-top: 12px;
           font-size: 18px;
           font-weight: bold;
           color: #006064;
           text-align: right;
           grid-column: 1 / -1;
       }
       
       /* 批量状态 */
       .batch-status {
           background: #e8f5e9;
           padding: 8px;
           border-radius: 10px;
           font-size: 14px;
           color: #2e7d32;
           text-align: center;
           display: none;
       }
       
       .batch-status.active {
           display: block;
       }
       
       /* 手机适配：小于768px时改为上下布局 */
       @media (max-width: 768px) {
           body {
               padding: 12px;
           }
           h1 {
               font-size: 24px;
               margin-bottom: 16px;
           }
           .main-layout {
               flex-direction: column;
           }
           .left-controls {
               width: 100%;
               padding: 16px;
               gap: 12px;
           }
           .control-group {
               padding: 10px;
           }
           button {
               padding: 10px 14px;
               font-size: 16px;
           }
           .image-list {
               max-height: 200px;
           }
           .image-thumb {
               width: 40px;
               height: 40px;
           }
           .image-name {
               font-size: 13px;
           }
           .stats-grid {
               grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
               gap: 8px;
           }
           .bead-card {
               padding: 6px 10px;
           }
           .bead-color-box {
               width: 24px;
               height: 24px;
               margin-right: 8px;
           }
           .bead-code {
               font-size: 14px;
           }
           .bead-count {
               font-size: 12px;
               padding: 2px 6px;
           }
           .stats-total {
               font-size: 16px;
           }
       }
       
       /* 小屏幕手机进一步优化 */
       @media (max-width: 480px) {
           .stats-grid {
               grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
           }
           .bead-code {
               font-size: 13px;
           }
       }
   </style>
</head>
<body>
 
   <h1>豆之的拼豆图纸生成器</h1>
   
   <div class="main-layout">
       <!-- 左侧控制面板 -->
       <div class="left-controls">
           <div class="control-group">
               <label>📁 选择图片 (可多选)</label>
               <input type="file" id="upload" accept="image/*" multiple>
               <div style="font-size: 12px; color: #666;">支持批量上传多张图片</div>
           </div>
           
           <!-- 图片列表 -->
           <div id="imageList" class="image-list" style="display: none;">
               <div class="image-list-title">📸 已上传图片</div>
               <div id="imageItems" class="image-items"></div>
           </div>
           
           <div class="control-group">
               <label>📏 宽度 (豆子数)</label>
               <input type="number" id="widthSet" value="35" min="5" max="200">
           </div>

           <div class="control-group">
               <label>📐 高度 (豆子数)</label>
               <input type="number" id="heightSet" value="35" min="5" max="200">
           </div>

           <div class="control-group">
               <label>🎨 使用色数</label>
               <select id="colorCountSelect">
                   <option value="221">全部 221色</option>
                   <option value="144">144色</option>
                   <option value="96">96色</option>
                   <option value="72" selected>72色</option>
               </select>
           </div>
 
           <label class="toggle-switch" title="开启后颜色更鲜艳，平滑皮肤，适合人像">
               <input type="checkbox" id="cartoonMode" checked>
               <span>✨ 开启Q版滤镜</span>
           </label>
 
           <div class="button-group">
               <button onclick="generatePattern()">🎯 生成当前图纸</button>
               <button class="download-btn" onclick="downloadAllImages()">📥 批量下载所有</button>
           </div>
           
           <div class="batch-status" id="batchStatus">
               批量处理中: <span id="batchProgress">0/0</span>
           </div>
           
           <div style="font-size: 13px; color: #666; text-align: center;">
               ⚡ 每5格黑色辅助线 | 点击图片可切换
           </div>
       </div>
       
       <!-- 右侧内容区 -->
       <div class="right-content">
           <div class="canvas-wrapper">
               <canvas id="patternCanvas"></canvas>
           </div>
           
           <div class="stats-panel">
               <h3>🎨 豆子色卡统计</h3>
               <div id="statsList" class="stats-grid">请先生成图纸...</div>
           </div>
       </div>
   </div>
 
<script>
   (function() {
       // === 完整的色卡数据库 (保持不变) ===
       const fullBeadPalette = [
           { id: 'A03', rgb: [252, 255, 146] }, { id: 'A04', rgb: [247, 236, 92] }, { id: 'A06', rgb: [253, 169, 81] }, { id: 'A07', rgb: [250, 140, 79] }, { id: 'A10', rgb: [244, 126, 56] }, { id: 'A11', rgb: [254, 219, 153] }, { id: 'A13', rgb: [254, 198, 103] }, { id: 'B03', rgb: [161, 245, 134] }, { id: 'B05', rgb: [57, 225, 88] }, { id: 'B07', rgb: [62, 174, 124] }, { id: 'B08', rgb: [29, 155, 84] }, { id: 'B10', rgb: [154, 209, 186] }, { id: 'B12', rgb: [26, 110, 61] }, { id: 'B14', rgb: [171, 232, 79] }, { id: 'B17', rgb: [158, 179, 62] }, { id: 'B18', rgb: [230, 237, 79] }, { id: 'B19', rgb: [38, 183, 142] }, { id: 'B20', rgb: [203, 236, 207] }, { id: 'C02', rgb: [171, 248, 254] }, { id: 'C03', rgb: [26, 224, 247] }, { id: 'C05', rgb: [6, 170, 223] }, { id: 'C06', rgb: [84, 167, 233] }, { id: 'C07', rgb: [57, 119, 202] }, { id: 'C08', rgb: [15, 82, 189] }, { id: 'C10', rgb: [60, 188, 227] }, { id: 'C11', rgb: [42, 222, 211] }, { id: 'C13', rgb: [205, 231, 254] }, { id: 'C16', rgb: [24, 88, 162] }, { id: 'D02', rgb: [134, 141, 211] }, { id: 'D03', rgb: [53, 84, 175] }, { id: 'D06', rgb: [179, 123, 220] }, { id: 'D07', rgb: [135, 88, 169] }, { id: 'D08', rgb: [227, 210, 254] }, { id: 'D09', rgb: [213, 185, 244] }, { id: 'D11', rgb: [190, 185, 226] }, { id: 'D12', rgb: [220, 153, 206] }, { id: 'D13', rgb: [181, 3, 141] }, { id: 'D14', rgb: [134, 41, 147] }, { id: 'D15', rgb: [47, 31, 140] }, { id: 'D16', rgb: [226, 228, 240] }, { id: 'D18', rgb: [154, 100, 184] }, { id: 'D19', rgb: [216, 194, 217] }, { id: 'D20', rgb: [154, 53, 173] }, { id: 'D21', rgb: [148, 5, 149] }, { id: 'E01', rgb: [246, 212, 203] }, { id: 'E02', rgb: [252, 193, 221] }, { id: 'E03', rgb: [246, 189, 232] }, { id: 'E04', rgb: [232, 100, 158] }, { id: 'E05', rgb: [240, 86, 159] }, { id: 'E07', rgb: [197, 54, 116] }, { id: 'E08', rgb: [253, 219, 233] }, { id: 'E12', rgb: [246, 147, 191] }, { id: 'E13', rgb: [181, 1, 106] }, { id: 'F05', rgb: [225, 3, 40] }, { id: 'F07', rgb: [145, 25, 50] }, { id: 'F08', rgb: [187, 1, 38] }, { id: 'F10', rgb: [135, 70, 40] }, { id: 'F13', rgb: [244, 92, 69] }, { id: 'G01', rgb: [255, 228, 211] }, { id: 'G02', rgb: [252, 198, 172] }, { id: 'G03', rgb: [241, 196, 165] }, { id: 'G05', rgb: [231, 179, 78] }, { id: 'G07', rgb: [152, 92, 58] }, { id: 'G08', rgb: [113, 61, 47] }, { id: 'G09', rgb: [228, 182, 133] }, { id: 'G13', rgb: [178, 113, 75] }, { id: 'H01', rgb: [255, 255, 255] }, { id: 'H02', rgb: [251, 251, 251] }, { id: 'H03', rgb: [180, 180, 180] }, { id: 'H04', rgb: [135, 135, 135] }, { id: 'H05', rgb: [70, 70, 72] }, { id: 'H07', rgb: [1, 1, 1] },
           { id: 'A14', rgb: [247, 88, 66] }, { id: 'D05', rgb: [179, 78, 198] }, { id: 'E06', rgb: [235, 65, 114] }, { id: 'E09', rgb: [227, 118, 199] }, { id: 'E10', rgb: [209, 59, 149] }, { id: 'E11', rgb: [247, 218, 212] }, { id: 'E14', rgb: [250, 212, 191] }, { id: 'E15', rgb: [245, 201, 202] }, { id: 'F01', rgb: [254, 147, 129] }, { id: 'F02', rgb: [246, 61, 75] }, { id: 'F03', rgb: [238, 78, 62] }, { id: 'F04', rgb: [251, 42, 64] }, { id: 'F06', rgb: [145, 54, 53] }, { id: 'F09', rgb: [224, 103, 122] }, { id: 'F11', rgb: [89, 35, 35] }, { id: 'F12', rgb: [243, 83, 107] }, { id: 'F14', rgb: [252, 173, 178] }, { id: 'G14', rgb: [139, 104, 76] }, { id: 'G17', rgb: [119, 84, 78] }, { id: 'H06', rgb: [44, 44, 44] }, { id: 'M05', rgb: [209, 204, 175] }, { id: 'M06', rgb: [176, 170, 134] }, { id: 'M09', rgb: [166, 136, 98] }, { id: 'M12', rgb: [100, 74, 81] },
           { id: 'A01', rgb: [250, 245, 205] }, { id: 'A02', rgb: [252, 254, 214] }, { id: 'A05', rgb: [240, 216, 58] }, { id: 'A08', rgb: [251, 218, 77] }, { id: 'A09', rgb: [247, 157, 95] }, { id: 'A12', rgb: [253, 162, 118] }, { id: 'A15', rgb: [251, 246, 94] }, { id: 'B01', rgb: [223, 241, 59] }, { id: 'B02', rgb: [100, 243, 67] }, { id: 'B04', rgb: [95, 223, 52] }, { id: 'B06', rgb: [100, 224, 164] }, { id: 'B11', rgb: [98, 112, 50] }, { id: 'B13', rgb: [200, 232, 125] }, { id: 'B15', rgb: [48, 83, 53] }, { id: 'B16', rgb: [192, 237, 79] }, { id: 'C01', rgb: [240, 254, 228] }, { id: 'C04', rgb: [68, 205, 251] }, { id: 'C09', rgb: [51, 73, 195] }, { id: 'C14', rgb: [213, 252, 247] }, { id: 'C15', rgb: [33, 197, 196] }, { id: 'C17', rgb: [2, 209, 243] }, { id: 'D01', rgb: [172, 183, 239] }, { id: 'D17', rgb: [199, 211, 249] }, { id: 'G04', rgb: [220, 179, 135] }, { id: 'G06', rgb: [227, 160, 20] }, { id: 'G10', rgb: [218, 140, 66] }, { id: 'G11', rgb: [218, 200, 152] }, { id: 'G12', rgb: [254, 201, 147] }, { id: 'G15', rgb: [246, 248, 227] }, { id: 'G16', rgb: [242, 216, 193] }, { id: 'H08', rgb: [231, 214, 220] }, { id: 'H09', rgb: [239, 237, 238] }, { id: 'H10', rgb: [235, 235, 235] }, { id: 'H11', rgb: [205, 205, 205] }, { id: 'H12', rgb: [253, 246, 238] }, { id: 'H13', rgb: [244, 239, 209] }, { id: 'H14', rgb: [206, 215, 212] }, { id: 'M01', rgb: [187, 198, 182] }, { id: 'M02', rgb: [144, 153, 148] }, { id: 'M03', rgb: [105, 126, 128] }, { id: 'M04', rgb: [224, 212, 188] }, { id: 'M07', rgb: [176, 167, 150] }, { id: 'M08', rgb: [174, 127, 130] }, { id: 'M10', rgb: [196, 179, 187] }, { id: 'M11', rgb: [158, 117, 146] }, { id: 'M13', rgb: [199, 146, 102] }, { id: 'M14', rgb: [194, 116, 100] }, { id: 'M15', rgb: [116, 125, 122] },
           { id: 'A16', rgb: [254, 255, 151] }, { id: 'A17', rgb: [253, 225, 115] }, { id: 'A18', rgb: [252, 191, 128] }, { id: 'A19', rgb: [253, 126, 119] }, { id: 'A20', rgb: [249, 214, 110] }, { id: 'A21', rgb: [250, 227, 147] }, { id: 'A22', rgb: [237, 248, 120] }, { id: 'A23', rgb: [228, 200, 186] }, { id: 'A24', rgb: [243, 246, 169] }, { id: 'A25', rgb: [255, 215, 133] }, { id: 'A26', rgb: [255, 199, 52] }, { id: 'B21', rgb: [24, 97, 106] }, { id: 'B22', rgb: [10, 66, 65] }, { id: 'B23', rgb: [52, 59, 26] }, { id: 'B24', rgb: [232, 250, 166] }, { id: 'B25', rgb: [78, 132, 109] }, { id: 'B26', rgb: [144, 124, 53] }, { id: 'B27', rgb: [208, 224, 175] }, { id: 'B28', rgb: [158, 229, 187] }, { id: 'B29', rgb: [198, 223, 95] }, { id: 'B30', rgb: [227, 251, 177] }, { id: 'B31', rgb: [180, 230, 145] }, { id: 'B32', rgb: [146, 176, 96] }, { id: 'C12', rgb: [30, 51, 78] }, { id: 'C18', rgb: [33, 50, 68] }, { id: 'C19', rgb: [24, 134, 157] }, { id: 'C20', rgb: [26, 112, 169] }, { id: 'C21', rgb: [188, 221, 252] }, { id: 'C22', rgb: [107, 177, 187] }, { id: 'C23', rgb: [200, 226, 253] }, { id: 'C24', rgb: [126, 197, 249] }, { id: 'C25', rgb: [169, 232, 224] }, { id: 'C26', rgb: [66, 173, 207] }, { id: 'C27', rgb: [208, 222, 249] }, { id: 'C28', rgb: [189, 206, 232] }, { id: 'C29', rgb: [54, 74, 137] }, { id: 'D22', rgb: [56, 56, 154] }, { id: 'D23', rgb: [234, 219, 248] }, { id: 'D24', rgb: [118, 138, 225] }, { id: 'D25', rgb: [73, 80, 194] }, { id: 'D26', rgb: [214, 198, 235] }, { id: 'E16', rgb: [251, 244, 236] }, { id: 'E17', rgb: [247, 227, 236] }, { id: 'E18', rgb: [249, 200, 219] }, { id: 'E19', rgb: [246, 187, 209] }, { id: 'E20', rgb: [215, 198, 206] }, { id: 'E21', rgb: [192, 157, 164] }, { id: 'E22', rgb: [179, 140, 159] }, { id: 'E23', rgb: [147, 125, 138] }, { id: 'E24', rgb: [222, 190, 129] }, { id: 'F15', rgb: [213, 5, 39] }, { id: 'F16', rgb: [248, 192, 169] }, { id: 'F17', rgb: [232, 155, 125] }, { id: 'F18', rgb: [208, 127, 74] }, { id: 'F19', rgb: [190, 69, 74] }, { id: 'F20', rgb: [198, 148, 149] }, { id: 'F21', rgb: [242, 184, 198] }, { id: 'F22', rgb: [247, 195, 208] }, { id: 'F23', rgb: [237, 128, 108] }, { id: 'F24', rgb: [224, 157, 175] }, { id: 'F25', rgb: [232, 72, 84] }, { id: 'G18', rgb: [255, 227, 213] }, { id: 'G19', rgb: [221, 125, 65] }, { id: 'G20', rgb: [165, 69, 47] }, { id: 'G21', rgb: [179, 133, 97] }, { id: 'H15', rgb: [154, 166, 166] }, { id: 'H16', rgb: [27, 18, 19] }, { id: 'H17', rgb: [240, 238, 239] }, { id: 'H18', rgb: [252, 255, 246] }, { id: 'H19', rgb: [242, 238, 229] }, { id: 'H20', rgb: [150, 160, 159] }, { id: 'H21', rgb: [248, 251, 230] }, { id: 'H22', rgb: [202, 202, 210] }, { id: 'H23', rgb: [155, 156, 148] }
       ];
       
       const CELL_SIZE = 35;
       const MARGIN = 45;
       
       let activePalette = fullBeadPalette;
       let currentBeadStats = null;
       let imageFiles = [];
       let currentImageIndex = 0;
       
       // 辅助函数
       function getColorDistance(c1, c2) {
           return Math.hypot(c1[0]-c2[0], c1[1]-c2[1], c1[2]-c2[2]);
       }
       
       function findClosestBead(r, g, b) {
           let minDist = Infinity;
           let closest = activePalette[0];
           for (let bead of activePalette) {
               let dist = getColorDistance([r, g, b], bead.rgb);
               if (dist < minDist) { minDist = dist; closest = bead; }
           }
           return closest;
       }
       
       function getContrastColor(r, g, b) {
           const luminance = (r * 299 + g * 587 + b * 114) / 1000;
           return luminance >= 128 ? '#000000' : '#ffffff';
       }
       
       function renderStats(counts) {
           const list = document.getElementById('statsList');
           list.innerHTML = '';
           const sorted = Object.keys(counts).map(k => ({id:k, ...counts[k]})).sort((a,b)=>b.count-a.count);
           if (sorted.length === 0) { list.innerHTML = '无数据'; return; }
           let total = 0;
           sorted.forEach(item => {
               total += item.count;
               const card = document.createElement('div');
               card.className = 'bead-card';
               card.innerHTML = `
                   <div class="bead-color-box" style="background:rgb(${item.rgb})"></div>
                   <div class="bead-info">
                       <span class="bead-code">${item.id}</span>
                       <span class="bead-count">${item.count}</span>
                   </div>
               `;
               list.appendChild(card);
           });
           const totalDiv = document.createElement('div');
           totalDiv.className = 'stats-total';
           totalDiv.innerHTML = `总计: ${total} 颗豆`;
           list.appendChild(totalDiv);
       }
       
       // 更新图片列表（无裁剪状态）
       function updateImageList() {
           const imageListDiv = document.getElementById('imageList');
           const imageItemsDiv = document.getElementById('imageItems');
           if (imageFiles.length > 0) {
               imageListDiv.style.display = 'block';
               imageItemsDiv.innerHTML = '';
               imageFiles.forEach((file, index) => {
                   const item = document.createElement('div');
                   item.className = `image-item ${index === currentImageIndex ? 'active' : ''}`;
                   item.onclick = () => switchToImage(index);
                   const thumb = document.createElement('img');
                   thumb.className = 'image-thumb';
                   const reader = new FileReader();
                   reader.onload = (e) => { thumb.src = e.target.result; };
                   reader.readAsDataURL(file);
                   const infoDiv = document.createElement('div');
                   infoDiv.className = 'image-info';
                   const name = document.createElement('span');
                   name.className = 'image-name';
                   name.textContent = file.name.length > 30 ? file.name.substring(0, 30) + '...' : file.name;
                   const size = document.createElement('span');
                   size.className = 'image-size';
                   size.textContent = (file.size / 1024).toFixed(1) + ' KB';
                   infoDiv.appendChild(name);
                   infoDiv.appendChild(size);
                   item.appendChild(thumb);
                   item.appendChild(infoDiv);
                   imageItemsDiv.appendChild(item);
               });
           } else {
               imageListDiv.style.display = 'none';
           }
       }
       
       function switchToImage(index) {
           if (index >= 0 && index < imageFiles.length) {
               currentImageIndex = index;
               updateImageList();
               generatePattern(); // 自动生成当前图片的图纸
           }
       }
       
       // 核心生成图纸函数
       function generateFromFile(file, targetWidth, targetHeight, isCartoonMode) {
           const reader = new FileReader();
           reader.onload = function(e) {
               const img = new Image();
               img.onload = function() {
                   processImage(img, targetWidth, targetHeight, isCartoonMode);
               };
               img.src = e.target.result;
           };
           reader.readAsDataURL(file);
       }
       
       function processImage(img, targetWidth, targetHeight, isCartoonMode) {
           const canvas = document.getElementById('patternCanvas');
           const ctx = canvas.getContext('2d');
           
           const tempCanvas = document.createElement('canvas');
           const tempCtx = tempCanvas.getContext('2d');
           
           const scale = Math.min(targetWidth / img.width, targetHeight / img.height);
           const cols = targetWidth;
           const rows = targetHeight;
           
           tempCanvas.width = cols;
           tempCanvas.height = rows;
           
           if (isCartoonMode) {
               tempCtx.filter = 'saturate(1.8) contrast(1.2) brightness(1.1)';
           }
           
           const drawWidth = img.width * scale;
           const drawHeight = img.height * scale;
           const offsetX = (cols - drawWidth) / 2;
           const offsetY = (rows - drawHeight) / 2;
           
           tempCtx.fillStyle = '#ffffff';
           tempCtx.fillRect(0, 0, cols, rows);
           tempCtx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
           tempCtx.filter = 'none';
           
           const imgData = tempCtx.getImageData(0, 0, cols, rows).data;
           
           canvas.width = cols * CELL_SIZE + MARGIN * 2;
           canvas.height = rows * CELL_SIZE + MARGIN * 2;
           
           let beadCounts = {};
           
           ctx.fillStyle = '#f0f0f0';
           ctx.fillRect(0, 0, canvas.width, canvas.height);
           ctx.fillStyle = '#ffffff';
           ctx.fillRect(MARGIN, MARGIN, cols * CELL_SIZE, rows * CELL_SIZE);
           
           // 绘制颜色格子
           for (let y = 0; y < rows; y++) {
               for (let x = 0; x < cols; x++) {
                   const i = (y * cols + x) * 4;
                   const r = imgData[i], g = imgData[i+1], b = imgData[i+2], a = imgData[i+3];
                   if (a < 50) continue;
                   const bead = findClosestBead(r, g, b);
                   if (!beadCounts[bead.id]) beadCounts[bead.id] = { count: 0, rgb: bead.rgb };
                   beadCounts[bead.id].count++;
                   ctx.fillStyle = `rgb(${bead.rgb.join(',')})`;
                   ctx.fillRect(MARGIN + x * CELL_SIZE, MARGIN + y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
               }
           }
           
           // 细网格线
           ctx.strokeStyle = 'rgba(0,0,0,0.15)';
           ctx.lineWidth = 0.8;
           for (let i = 0; i <= cols; i++) {
               ctx.beginPath();
               ctx.moveTo(MARGIN + i * CELL_SIZE, MARGIN);
               ctx.lineTo(MARGIN + i * CELL_SIZE, MARGIN + rows * CELL_SIZE);
               ctx.stroke();
           }
           for (let i = 0; i <= rows; i++) {
               ctx.beginPath();
               ctx.moveTo(MARGIN, MARGIN + i * CELL_SIZE);
               ctx.lineTo(MARGIN + cols * CELL_SIZE, MARGIN + i * CELL_SIZE);
               ctx.stroke();
           }
           
           // 加粗黑色辅助线（每5格）
           ctx.strokeStyle = '#000000';
           ctx.lineWidth = 2.5;
           for (let i = 0; i <= cols; i += 5) {
               ctx.beginPath();
               ctx.moveTo(MARGIN + i * CELL_SIZE, MARGIN);
               ctx.lineTo(MARGIN + i * CELL_SIZE, MARGIN + rows * CELL_SIZE);
               ctx.stroke();
           }
           for (let i = 0; i <= rows; i += 5) {
               ctx.beginPath();
               ctx.moveTo(MARGIN, MARGIN + i * CELL_SIZE);
               ctx.lineTo(MARGIN + cols * CELL_SIZE, MARGIN + i * CELL_SIZE);
               ctx.stroke();
           }
           
           // 标注颜色代码
           ctx.font = 'bold 14px "Segoe UI", Arial, sans-serif';
           ctx.textAlign = 'center';
           ctx.textBaseline = 'middle';
           for (let y = 0; y < rows; y++) {
               for (let x = 0; x < cols; x++) {
                   const i = (y * cols + x) * 4;
                   const r = imgData[i], g = imgData[i+1], b = imgData[i+2], a = imgData[i+3];
                   if (a < 50) continue;
                   const bead = findClosestBead(r, g, b);
                   ctx.fillStyle = getContrastColor(bead.rgb[0], bead.rgb[1], bead.rgb[2]);
                   ctx.shadowColor = 'rgba(0,0,0,0.3)';
                   ctx.shadowBlur = 2;
                   ctx.shadowOffsetX = 1;
                   ctx.shadowOffsetY = 1;
                   ctx.fillText(bead.id, MARGIN + x * CELL_SIZE + CELL_SIZE/2, MARGIN + y * CELL_SIZE + CELL_SIZE/2);
                   ctx.shadowColor = 'transparent';
               }
           }
           
           // 坐标数字
           ctx.fillStyle = '#006064';
           ctx.font = 'bold 18px "Segoe UI", Arial, sans-serif';
           ctx.textAlign = 'center';
           ctx.textBaseline = 'middle';
           ctx.shadowColor = 'rgba(255,255,255,0.8)';
           ctx.shadowBlur = 3;
           ctx.shadowOffsetX = 1;
           ctx.shadowOffsetY = 1;
           for (let x = 0; x < cols; x++) {
               ctx.fillText((x+1).toString(), MARGIN + x*CELL_SIZE + CELL_SIZE/2, MARGIN/2);
               ctx.fillText((x+1).toString(), MARGIN + x*CELL_SIZE + CELL_SIZE/2, canvas.height - MARGIN/2);
           }
           for (let y = 0; y < rows; y++) {
               ctx.fillText((y+1).toString(), MARGIN/2, MARGIN + y*CELL_SIZE + CELL_SIZE/2);
               ctx.fillText((y+1).toString(), canvas.width - MARGIN/2, MARGIN + y*CELL_SIZE + CELL_SIZE/2);
           }
           ctx.shadowColor = 'transparent';
           
           ctx.font = 'bold 16px "Segoe UI", Arial, sans-serif';
           ctx.fillStyle = '#006064';
           ctx.textAlign = 'left';
           ctx.fillText('X→', 5, 25);
           ctx.fillText('Y↓', 5, 45);
           
           currentBeadStats = beadCounts;
           renderStats(beadCounts);
       }
       
       // 生成当前图片的图纸
       window.generatePattern = function() {
           if (!imageFiles.length) {
               alert('请先上传图片！');
               return;
           }
           const file = imageFiles[currentImageIndex];
           if (!file) return;
           const width = parseInt(document.getElementById('widthSet').value);
           const height = parseInt(document.getElementById('heightSet').value);
           const cartoon = document.getElementById('cartoonMode').checked;
           const selectEl = document.getElementById('colorCountSelect');
           let maxColors = parseInt(selectEl.value, 10);
           if (isNaN(maxColors) || maxColors <= 0) maxColors = fullBeadPalette.length;
           activePalette = fullBeadPalette.slice(0, maxColors);
           generateFromFile(file, width, height, cartoon);
       };
       
       // 批量下载所有图片（无裁剪）
       window.downloadAllImages = async function() {
           if (imageFiles.length === 0) {
               alert('请先上传图片！');
               return;
           }
           const width = parseInt(document.getElementById('widthSet').value);
           const height = parseInt(document.getElementById('heightSet').value);
           const cartoon = document.getElementById('cartoonMode').checked;
           const selectEl = document.getElementById('colorCountSelect');
           let maxColors = parseInt(selectEl.value, 10);
           if (isNaN(maxColors) || maxColors <= 0) maxColors = fullBeadPalette.length;
           activePalette = fullBeadPalette.slice(0, maxColors);
           
           const batchStatus = document.getElementById('batchStatus');
           const batchProgress = document.getElementById('batchProgress');
           batchStatus.classList.add('active');
           
           const JSZip = window.JSZip;
           if (!JSZip) {
               alert('请先引入JSZip库！');
               batchStatus.classList.remove('active');
               return;
           }
           const zip = new JSZip();
           const imgFolder = zip.folder('拼豆图纸');
           
           for (let i = 0; i < imageFiles.length; i++) {
               batchProgress.innerText = `${i+1}/${imageFiles.length}`;
               const file = imageFiles[i];
               const img = await loadImage(file);
               const canvas = await generateImageForDownload(img, width, height, cartoon);
               const fileName = `拼豆图纸_${file.name.replace(/\.[^/.]+$/, '')}.png`;
               const dataURL = canvas.toDataURL('image/png');
               imgFolder.file(fileName, dataURL.split(',')[1], { base64: true });
           }
           const content = await zip.generateAsync({ type: 'blob' });
           const link = document.createElement('a');
           link.href = URL.createObjectURL(content);
           link.download = '拼豆图纸合集.zip';
           link.click();
           batchStatus.classList.remove('active');
       };
       
       function loadImage(file) {
           return new Promise((resolve) => {
               const reader = new FileReader();
               reader.onload = (e) => {
                   const img = new Image();
                   img.onload = () => resolve(img);
                   img.src = e.target.result;
               };
               reader.readAsDataURL(file);
           });
       }
       
       function generateImageForDownload(img, targetWidth, targetHeight, isCartoonMode) {
           return new Promise((resolve) => {
               const canvas = document.createElement('canvas');
               const ctx = canvas.getContext('2d');
               const tempCanvas = document.createElement('canvas');
               const tempCtx = tempCanvas.getContext('2d');
               
               const scale = Math.min(targetWidth / img.width, targetHeight / img.height);
               const cols = targetWidth;
               const rows = targetHeight;
               
               tempCanvas.width = cols;
               tempCanvas.height = rows;
               if (isCartoonMode) tempCtx.filter = 'saturate(1.8) contrast(1.2) brightness(1.1)';
               const drawWidth = img.width * scale;
               const drawHeight = img.height * scale;
               const offsetX = (cols - drawWidth) / 2;
               const offsetY = (rows - drawHeight) / 2;
               tempCtx.fillStyle = '#ffffff';
               tempCtx.fillRect(0, 0, cols, rows);
               tempCtx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
               tempCtx.filter = 'none';
               const imgData = tempCtx.getImageData(0, 0, cols, rows).data;
               
               // 统计颜色
               let beadCounts = {};
               for (let y = 0; y < rows; y++) {
                   for (let x = 0; x < cols; x++) {
                       const i = (y * cols + x) * 4;
                       const r = imgData[i], g = imgData[i+1], b = imgData[i+2], a = imgData[i+3];
                       if (a < 50) continue;
                       const bead = findClosestBead(r, g, b);
                       if (!beadCounts[bead.id]) beadCounts[bead.id] = { count: 0, rgb: bead.rgb };
                       beadCounts[bead.id].count++;
                   }
               }
               const items = Object.keys(beadCounts).map(id => ({ id, rgb: beadCounts[id].rgb, count: beadCounts[id].count })).sort((a,b)=>b.count-a.count);
               const totalBeads = items.reduce((acc,cur)=>acc+cur.count,0);
               
               const marginStats = 15;
               const titleFontSize = 20;
               const rowHeight = 32;
               let cols2 = Math.max(1, Math.floor((cols * CELL_SIZE) / 200));
               cols2 = Math.min(6, cols2);
               const rowsNeeded = Math.ceil(items.length / cols2);
               const bottomStatsHeight = marginStats*2 + titleFontSize + 8 + rowsNeeded * rowHeight + 40;
               
               canvas.width = cols * CELL_SIZE + MARGIN * 2;
               canvas.height = rows * CELL_SIZE + MARGIN * 2 + bottomStatsHeight;
               
               // 绘制图纸（和processImage类似但略去注释）
               ctx.fillStyle = '#f0f0f0';
               ctx.fillRect(0, 0, canvas.width, canvas.height);
               ctx.fillStyle = '#ffffff';
               ctx.fillRect(MARGIN, MARGIN, cols * CELL_SIZE, rows * CELL_SIZE);
               for (let y = 0; y < rows; y++) {
                   for (let x = 0; x < cols; x++) {
                       const i = (y * cols + x) * 4;
                       const r = imgData[i], g = imgData[i+1], b = imgData[i+2], a = imgData[i+3];
                       if (a < 50) continue;
                       const bead = findClosestBead(r, g, b);
                       ctx.fillStyle = `rgb(${bead.rgb.join(',')})`;
                       ctx.fillRect(MARGIN + x*CELL_SIZE, MARGIN + y*CELL_SIZE, CELL_SIZE, CELL_SIZE);
                   }
               }
               // 网格线
               ctx.strokeStyle = 'rgba(0,0,0,0.15)';
               ctx.lineWidth = 0.8;
               for (let i=0;i<=cols;i++) { ctx.beginPath(); ctx.moveTo(MARGIN+i*CELL_SIZE, MARGIN); ctx.lineTo(MARGIN+i*CELL_SIZE, MARGIN+rows*CELL_SIZE); ctx.stroke(); }
               for (let i=0;i<=rows;i++) { ctx.beginPath(); ctx.moveTo(MARGIN, MARGIN+i*CELL_SIZE); ctx.lineTo(MARGIN+cols*CELL_SIZE, MARGIN+i*CELL_SIZE); ctx.stroke(); }
               ctx.strokeStyle = '#000000';
               ctx.lineWidth = 2.5;
               for (let i=0;i<=cols;i+=5) { ctx.beginPath(); ctx.moveTo(MARGIN+i*CELL_SIZE, MARGIN); ctx.lineTo(MARGIN+i*CELL_SIZE, MARGIN+rows*CELL_SIZE); ctx.stroke(); }
               for (let i=0;i<=rows;i+=5) { ctx.beginPath(); ctx.moveTo(MARGIN, MARGIN+i*CELL_SIZE); ctx.lineTo(MARGIN+cols*CELL_SIZE, MARGIN+i*CELL_SIZE); ctx.stroke(); }
               // 颜色代码
               ctx.font = 'bold 14px "Segoe UI", Arial, sans-serif';
               ctx.textAlign = 'center';
               ctx.textBaseline = 'middle';
               for (let y=0;y<rows;y++) {
                   for (let x=0;x<cols;x++) {
                       const i = (y*cols+x)*4;
                       const r=imgData[i],g=imgData[i+1],b=imgData[i+2],a=imgData[i+3];
                       if (a<50) continue;
                       const bead = findClosestBead(r,g,b);
                       ctx.fillStyle = getContrastColor(bead.rgb[0], bead.rgb[1], bead.rgb[2]);
                       ctx.shadowColor = 'rgba(0,0,0,0.3)';
                       ctx.shadowBlur = 2;
                       ctx.fillText(bead.id, MARGIN+x*CELL_SIZE+CELL_SIZE/2, MARGIN+y*CELL_SIZE+CELL_SIZE/2);
                       ctx.shadowColor = 'transparent';
                   }
               }
               // 坐标
               ctx.fillStyle = '#006064';
               ctx.font = 'bold 18px "Segoe UI", Arial, sans-serif';
               ctx.shadowColor = 'rgba(255,255,255,0.8)';
               ctx.shadowBlur = 3;
               for (let x=0;x<cols;x++) {
                   ctx.fillText((x+1).toString(), MARGIN+x*CELL_SIZE+CELL_SIZE/2, MARGIN/2);
                   ctx.fillText((x+1).toString(), MARGIN+x*CELL_SIZE+CELL_SIZE/2, MARGIN+rows*CELL_SIZE+MARGIN/2);
               }
               for (let y=0;y<rows;y++) {
                   ctx.fillText((y+1).toString(), MARGIN/2, MARGIN+y*CELL_SIZE+CELL_SIZE/2);
                   ctx.fillText((y+1).toString(), MARGIN+cols*CELL_SIZE+MARGIN/2, MARGIN+y*CELL_SIZE+CELL_SIZE/2);
               }
               ctx.shadowColor = 'transparent';
               ctx.font = 'bold 16px "Segoe UI", Arial, sans-serif';
               ctx.fillStyle = '#006064';
               ctx.textAlign = 'left';
               ctx.fillText('X→', 5, 25);
               ctx.fillText('Y↓', 5, 45);
               
               // 绘制色号统计
               const statsY = rows * CELL_SIZE + MARGIN * 2;
               ctx.fillStyle = '#ffffff';
               ctx.fillRect(0, statsY, canvas.width, bottomStatsHeight);
               ctx.fillStyle = '#222';
               ctx.font = `bold ${titleFontSize}px 'Segoe UI', sans-serif`;
               ctx.textAlign = 'left';
               ctx.textBaseline = 'top';
               ctx.fillText('📊 用豆色号及数量', marginStats, statsY + marginStats);
               ctx.font = '16px "Segoe UI", sans-serif';
               ctx.textBaseline = 'middle';
               const effectiveColWidth = canvas.width / cols2;
               for (let i=0;i<items.length;i++) {
                   const item = items[i];
                   const col = i % cols2;
                   const row = Math.floor(i / cols2);
                   const xStart = marginStats + col * effectiveColWidth;
                   const yBase = statsY + marginStats + titleFontSize + 12 + row * rowHeight;
                   ctx.beginPath();
                   ctx.arc(xStart+12, yBase, 10, 0, 2*Math.PI);
                   ctx.fillStyle = `rgb(${item.rgb.join(',')})`;
                   ctx.fill();
                   ctx.strokeStyle = '#aaa';
                   ctx.lineWidth = 1.2;
                   ctx.stroke();
                   ctx.fillStyle = '#000';
                   ctx.textAlign = 'left';
                   ctx.fillText(`${item.id} x${item.count}`, xStart+30, yBase);
               }
               ctx.font = 'bold 18px "Segoe UI", sans-serif';
               ctx.fillStyle = '#006064';
               ctx.fillText(`✨ 总计: ${totalBeads} 颗豆`, marginStats, statsY + bottomStatsHeight - marginStats);
               ctx.strokeStyle = '#ccc';
               ctx.lineWidth = 2;
               ctx.beginPath();
               ctx.moveTo(0, statsY);
               ctx.lineTo(canvas.width, statsY);
               ctx.stroke();
               
               resolve(canvas);
           });
       }
       
       // 文件上传事件
       document.getElementById('upload').addEventListener('change', function(e) {
           if (this.files && this.files.length > 0) {
               imageFiles = Array.from(this.files);
               currentImageIndex = 0;
               updateImageList();
               generatePattern(); // 自动生成第一张图纸
           } else {
               imageFiles = [];
               updateImageList();
           }
       });
   })();
</script>
<!-- 引入JSZip用于批量下载 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
</body>
</html>