二维码风格调整器 - 实验室智能台�?/title> <style> :root { --bg-primary: #0a0f1c; --bg-secondary: #111827; --bg-tertiary: #1f2937; --bg-card: #1a2332; --bg-card-hover: #243044; --bg-input: #0d1520; --text-primary: #f0f4f8; --text-secondary: #a0aec0; --text-muted: #718096; --text-inverse: #0a0f1c; --accent-primary: #3b82f6; --accent-primary-hover: #2563eb; --accent-secondary: #10b981; --accent-danger: #ef4444; --border-color: #2d3748; --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5); } * { margin:0; padding:0; box-sizing:border-box; } body { font-family:'Noto Sans SC','Microsoft YaHei',sans-serif; background:var(--bg-primary); color:var(--text-primary); line-height:1.6; transition:background .3s,color .3s; } .header { background:var(--bg-card); padding:20px 24px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100; } .header h1 { font-size:1.5rem; font-weight:600; } .header-info { display:flex; gap:12px; align-items:center; } .header-badge { display: inline-flex; align-items: center; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.85rem; color: var(--text-secondary); } .back-btn { padding:8px 16px; background:var(--bg-secondary); color:var(--text-primary); text-decoration:none; border-radius:6px; font-size:0.9rem; transition:all 0.2s; border:1px solid var(--border-color); cursor:pointer; } .back-btn:hover { background:var(--bg-tertiary); } .customizer-container { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1400px; margin:0 auto; padding:24px; } @media (max-width:768px){ .customizer-container{ grid-template-columns:1fr; } } .control-panel { background:var(--bg-card); border-radius:12px; padding:24px; border:1px solid var(--border-color); max-height:90vh; overflow-y:auto; } .control-panel::-webkit-scrollbar { width:8px; } .control-panel::-webkit-scrollbar-track { background:var(--bg-secondary); border-radius:4px; } .control-panel::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:4px; } .preview-panel { background:var(--bg-card); border-radius:12px; padding:24px; border:1px solid var(--border-color); display:flex; flex-direction:column; align-items:center; position:sticky; top:100px; height:fit-content; } .section { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--border-color); } .section:last-child { border-bottom:none; } .section-title { font-size:1.1rem; font-weight:600; margin-bottom:16px; color:var(--text-primary); display:flex; align-items:center; gap:8px; } .control-item { margin-bottom:20px; } .control-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:0.9rem; color:var(--text-secondary); } .control-value { font-weight:600; color:var(--accent-primary); } .slider { width:100%; height:6px; border-radius:3px; background:var(--bg-tertiary); outline:none; -webkit-appearance:none; } .slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent-primary); cursor:pointer; transition:all 0.2s; } .slider::-webkit-slider-thumb:hover { background:var(--accent-primary-hover); transform:scale(1.2); } .toggle-switch { position:relative; display:inline-block; width:50px; height:26px; } .toggle-switch input { opacity:0; width:0; height:0; } .toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:var(--bg-tertiary); transition:0.3s; border-radius:26px; } .toggle-slider:before { position:absolute; content:""; height:20px; width:20px; left:3px; bottom:3px; background-color:white; transition:0.3s; border-radius:50%; } input:checked+.toggle-slider { background-color:var(--accent-primary); } input:checked+.toggle-slider:before { transform:translateX(24px); } .text-input { width:100%; padding:10px; background:var(--bg-input); border:1px solid var(--border-color); border-radius:8px; color:var(--text-primary); font-size:0.9rem; font-family:inherit; } .text-input:focus { outline:none; border-color:var(--accent-primary); } .color-picker-wrapper { display:flex; gap:12px; align-items:center; } .color-input { width:60px; height:40px; border:2px solid var(--border-color); border-radius:8px; cursor:pointer; transition:all 0.2s; } .color-input:hover { border-color:var(--accent-primary); } .color-hex { font-family:monospace; font-size:0.9rem; color:var(--text-secondary); } .center-content-tabs { display:flex; gap:8px; margin-bottom:16px; } .center-tab { flex:1; padding:10px; background:var(--bg-secondary); border:2px solid var(--border-color); border-radius:8px; cursor:pointer; transition:all 0.2s; text-align:center; font-size:0.85rem; color:var(--text-primary); } .center-tab:hover { border-color:var(--accent-primary); background:var(--bg-card-hover); } .center-tab.active { border-color:var(--accent-primary); background:var(--accent-primary); color:var(--text-inverse); font-weight:600; } .center-content-panel { display:none; padding:12px; background:var(--bg-secondary); border-radius:8px; margin-top:12px; } .center-content-panel.active { display:block; } .template-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:12px; } .template-btn { padding:12px; background:var(--bg-secondary); border:2px solid var(--border-color); border-radius:8px; cursor:pointer; transition:all 0.2s; text-align:center; font-size:0.85rem; color:var(--text-primary); } .template-btn:hover { border-color:var(--accent-primary); background:var(--bg-card-hover); } .template-btn.active { border-color:var(--accent-primary); background:var(--accent-primary); color:var(--text-inverse); font-weight:600; } .preview-canvas-wrapper { background:#ffffff; padding:20px; border-radius:12px; box-shadow:var(--shadow-lg); margin-bottom:20px; } #previewCanvas { display:block; max-width:100%; height:auto; cursor:default; } .preview-info { text-align:center; color:var(--text-secondary); font-size:0.85rem; margin-top:12px; padding:8px; background:var(--bg-secondary); border-radius:6px; } .action-buttons { display:flex; flex-direction:column; gap:12px; width:100%; margin-top:20px; } .btn { padding:12px; border-radius:8px; font-weight:600; transition:all 0.2s; cursor:pointer; border:none; font-size:0.9rem; } .btn-full { width:100%; } .btn-primary { background:var(--accent-primary); color:white; } .btn-primary:hover { background:var(--accent-primary-hover); } .btn-success { background:var(--accent-secondary); color:white; } .btn-success:hover { opacity:0.9; } .btn-secondary { background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border-color); } .btn-secondary:hover { background:var(--bg-tertiary); } .btn-sm { padding:6px 12px; font-size:0.85rem; } .btn:disabled { opacity:0.5; cursor:not-allowed; } .font-select { width:100%; padding:10px; background:var(--bg-input); border:1px solid var(--border-color); border-radius:8px; color:var(--text-primary); font-size:0.9rem; } .hint-text { font-size:0.8rem; color:var(--text-muted); margin-top:4px; } .logo-upload { display:flex; align-items:center; gap:12px; margin-top:8px; } .logo-preview { width:60px; height:60px; border:2px solid var(--border-color); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bg-secondary); } .logo-preview img { max-width:100%; max-height:100%; object-fit:contain; } .align-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; } .align-label { font-size:0.85rem; color:var(--text-secondary); margin-bottom:4px; } .toast { position:fixed; bottom:24px; right:24px; background:var(--bg-card); color:var(--text-primary); padding:16px 24px; border-radius:8px; border-left:4px solid var(--accent-primary); box-shadow:var(--shadow-lg); transform:translateX(400px); transition:transform 0.3s ease; z-index:10000; max-width:400px; } .toast.show { transform:translateX(0); } .toast.error { border-left-color:var(--accent-danger); } .mode-tab{padding:8px 20px;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;font-size:.85rem;transition:all .2s;} .mode-tab:first-child{border-radius:6px 0 0 6px;} .mode-tab:last-child{border-radius:0 6px 6px 0;border-left:none;} .mode-tab:hover{background:var(--bg-card-hover);} .mode-tab.active{background:var(--accent-primary);color:white;font-weight:600;} </style> <script src="/config/themes.js"></script> <script src="/core/services/theme-service.js"></script> </head> <body> <header class="header"><div style="display:flex;align-items:center;gap:12px;max-width:1400px;margin:0 auto;"><h1>📱 二维码风格调整器</h1> <div class="mode-tabs" style="margin-left:20px;"> <button class="mode-tab active" id="modeSingle" onclick="setMode('single')">🕐 单个</button> <button class="mode-tab" id="modeBatch" onclick="setMode('batch')">📦 批量</button> </div> <div class="header-info" style="margin-left:auto;"> <span id="memberName" class="header-badge">未登�?/span> <span id="memberStatus" class="header-badge">游客</span> <button id="themeToggleBtn" class="back-btn" type="button">🌓 主题</button> <a id="loginBtn" href="/login.html?redirect=/modules/qrcode/qr-customizer.html" class="back-btn" style="display:inline-flex;">🔑 登录</a> <a href="/modules/settings/settings.html" class="back-btn">�?系统设置</a> <a href="/index.html" class="back-btn">�?返回首页</a> </div></div></header> <div class="customizer-container">  <div class="control-panel" id="controlPanel">  <div id="singleModePanel"> <div class="section"> <div class="section-title">🕐 二维码中心显�?/div> <div class="center-content-tabs"> <button class="center-tab" data-type="device">🔬 设备名称</button> <button class="center-tab active" data-type="logo">🖼�?Logo</button> <button class="center-tab" data-type="text">✏️ 自定义文�?/button> </div> <div class="center-content-panel" data-panel="device"> <div style="background:var(--bg-tertiary);padding:12px;border-radius:6px;font-size:0.85rem;margin-bottom:12px;color:var(--text-secondary);">💡 仪器→仪器名 · 试剂→编�?· 冰箱→冰箱名</div> <div class="control-item"><div class="control-label"><span>文字大小</span><span class="control-value" id="deviceTextSizeValue">13px</span></div><input type="range" class="slider" id="deviceTextSizeSlider" min="10" max="20" step="1" value="13"></div> </div> <div class="center-content-panel active" data-panel="logo"> <div class="control-item"><div class="control-label"><span>Logo大小</span><span class="control-value" id="centerLogoSizeValue">60px</span></div><input type="range" class="slider" id="centerLogoSizeSlider" min="40" max="100" step="5" value="60"></div> <div class="control-item"><div class="control-label"><span>上传Logo</span></div><div class="logo-upload"><div class="logo-preview" id="centerLogoPreview"><span style="font-size:2rem">🖼�?/span></div><input type="file" id="centerLogoUpload" accept="image/*" style="display:none"><button class="btn btn-sm btn-secondary" onclick="document.getElementById('centerLogoUpload').click()">📂 上传图片</button></div></div> </div> <div class="center-content-panel" data-panel="text"> <div class="control-item"><div class="control-label"><span>文字</span></div><input type="text" class="text-input" id="centerCustomText" value="实验�? maxlength="4"></div> <div class="control-item"><div class="control-label"><span>大小</span><span class="control-value" id="centerTextSizeValue">13px</span></div><input type="range" class="slider" id="centerTextSizeSlider" min="10" max="20" step="1" value="13"></div> <div class="control-item"><div class="control-label"><span>颜色</span></div><div class="color-picker-wrapper"><input type="color" class="color-input" id="centerTextColor" value="#000000"><span class="color-hex" id="centerTextColorHex">#000000</span></div></div> </div> </div> <div class="section"> <div class="section-title">🖼�?角落Logo</div> <div class="control-item"><div class="control-label"><span>显示</span><label class="toggle-switch"><input type="checkbox" id="showCornerLogo"><span class="toggle-slider"></span></label></div></div> <div id="cornerLogoControls" style="display:none;"> <div class="control-item"><div class="control-label"><span>大小</span><span class="control-value" id="cornerLogoSizeValue">50px</span></div><input type="range" class="slider" id="cornerLogoSizeSlider" min="30" max="80" step="5" value="50"></div> <div class="control-item"><div class="control-label"><span>上传</span></div><div class="logo-upload"><div class="logo-preview" id="cornerLogoPreview"><span style="font-size:1.8rem">🖼�?/span></div><input type="file" id="cornerLogoUpload" accept="image/*" style="display:none"><button class="btn btn-sm btn-secondary" onclick="document.getElementById('cornerLogoUpload').click()">📂 上传图片</button></div> <p class="hint-text">支持 PNG/JPG 格式，建议使用透明背景 Logo</p> <p class="hint-text">在二维码角落显示 Logo</p> </div> </div> </div> <div class="section"> <div class="section-title">🔗 目标链接</div> <div class="control-item"> <label class="control-label">二维码扫码地址</label> <input type="url" class="text-input" id="targetUrlInput" placeholder="https://..."> <div style="margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;"> <select class="text-input" id="linkTypeSelect" style="flex:2;min-width:80px;"> <option value="instrument">仪器</option><option value="reagent">试剂</option><option value="consumable">耗材</option><option value="freezer">冰箱</option><option value="plant">植物</option> </select> <input type="text" class="text-input" id="linkIdInput" placeholder="ID" style="flex:2;min-width:70px;"> <input type="text" class="text-input" id="linkNameInput" placeholder="名称" style="flex:2;min-width:70px;"> </div> <div style="margin-top:6px;display:flex;gap:6px;"> <button class="btn btn-sm btn-primary" style="flex:1;" onclick="buildUrl()">🔗 构建链接</button> <button class="btn btn-sm btn-secondary" onclick="readUrlFromParams()">📥 读取URL参数</button> </div> </div> </div> <div class="section"> <div class="section-title">✏️ 文字内容</div> <div class="control-item"><div class="control-label"><span>顶部标题</span></div><input type="text" class="text-input" id="brandNameCN" value="广西民族大学"></div> <div class="control-item"><div class="control-label"><span>顶部副标�?/span></div><input type="text" class="text-input" id="brandNameEN" value="Guangxi Minzu University"></div> <div class="control-item"><div class="control-label"><span>底部标题</span></div><input type="text" class="text-input" id="bottomTitle" value="实验室智能台账系�?></div> <div class="control-item"><div class="control-label"><span>底部副标�?/span></div><input type="text" class="text-input" id="bottomSubtitle" value="Lab Management System"></div> </div> <div class="section"> <div class="section-title">🎨 文字格式</div> <div class="control-item"><div class="control-label"><span>字体</span></div><select class="font-select" id="fontSelect"><option value="Noto Sans SC">思源黑体</option><option value="Microsoft YaHei">微软雅黑</option><option value="SimHei">黑体</option><option value="SimSun">宋体</option><option value="KaiTi">楷体</option><option value="Arial">Arial</option></select></div> <div class="control-item"><div class="control-label"><span>中文字号</span><span class="control-value" id="brandSizeValue">18px</span></div><input type="range" class="slider" id="brandSizeSlider" min="12" max="28" step="1" value="18"></div> <div class="control-item"><div class="control-label"><span>英文字号</span><span class="control-value" id="brandEnSizeValue">12px</span></div><input type="range" class="slider" id="brandEnSizeSlider" min="10" max="20" step="1" value="12"></div> <div class="control-item"><div class="control-label"><span>标题字号</span><span class="control-value" id="titleSizeValue">18px</span></div><input type="range" class="slider" id="titleSizeSlider" min="14" max="28" step="1" value="18"></div> <div class="control-item"><div class="control-label"><span>副标题字�?/span><span class="control-value" id="subtitleSizeValue">12px</span></div><input type="range" class="slider" id="subtitleSizeSlider" min="10" max="18" step="1" value="12"></div> <div class="control-item"><div class="control-label"><span>字体粗细</span></div><select class="font-select" id="fontWeight"><option value="normal">正常</option><option value="500">中等</option><option value="600" selected>半粗</option><option value="bold">粗体</option></select></div> </div> <div class="section"> <div class="section-title">📐 尺寸</div> <div class="control-item"><div class="control-label"><span>画布�?/span><span class="control-value" id="widthValue">420px</span></div><input type="range" class="slider" id="widthSlider" min="280" max="600" step="20" value="420"></div> <div class="control-item"><div class="control-label"><span>画布�?/span><span class="control-value" id="heightValue">520px</span></div><input type="range" class="slider" id="heightSlider" min="360" max="720" step="20" value="520"></div> <div class="control-item"><div class="control-label"><span>二维码大�?/span><span class="control-value" id="qrSizeValue">320px</span></div><input type="range" class="slider" id="qrSizeSlider" min="200" max="480" step="20" value="320"></div> </div> <div class="section"> <div class="section-title">🎨 颜色</div> <div class="control-item"><div class="control-label"><span>背景</span></div><div class="color-picker-wrapper"><input type="color" class="color-input" id="bgColor" value="#ffffff"><span class="color-hex" id="bgColorHex">#ffffff</span></div></div> <div class="control-item"><div class="control-label"><span>文字</span></div><div class="color-picker-wrapper"><input type="color" class="color-input" id="textColor" value="#000000"><span class="color-hex" id="textColorHex">#000000</span></div></div> <div class="control-item"><div class="control-label"><span>二维�?/span></div><div class="color-picker-wrapper"><input type="color" class="color-input" id="qrColor" value="#000000"><span class="color-hex" id="qrColorHex">#000000</span></div></div> </div> <div class="section"> <div class="section-title">📥 模板</div> <div class="template-grid"> <button class="template-btn active" data-template="default">默认</button> <button class="template-btn" data-template="instrument">仪器</button> <button class="template-btn" data-template="reagent">试剂</button> <button class="template-btn" data-template="dangerous">危化�?/button> <button class="template-btn" data-template="freezer">冰箱</button> <button class="template-btn" data-template="plant">植物</button> <button class="template-btn" data-template="compact">紧凑</button> </div> </div> </div>  <div id="batchModePanel" style="display:none;"> <div class="section"> <div class="section-title">📦 选择数据类型（可多选）</div> <div id="typeCheckboxList" style="background:var(--bg-secondary);border-radius:8px;padding:12px;max-height:300px;overflow-y:auto;"> <label style="display:flex;align-items:center;padding:10px;cursor:pointer;border-radius:6px;" onmouseover="this.style.background='var(--bg-primary)'" onmouseout="this.style.background='transparent'"> <input type="checkbox" value="instrument" onchange="updateTypeSelection()" style="margin-right:12px;width:18px;height:18px;cursor:pointer;"> <span style="font-size:1rem;"><span style="font-size:1.3rem;">🔬</span> 仪器设备</span> </label> <label style="display:flex;align-items:center;padding:10px;cursor:pointer;border-radius:6px;" onmouseover="this.style.background='var(--bg-primary)'" onmouseout="this.style.background='transparent'"> <input type="checkbox" value="reagent" onchange="updateTypeSelection()" style="margin-right:12px;width:18px;height:18px;cursor:pointer;"> <span style="font-size:1rem;"><span style="font-size:1.3rem;">🧪</span> 试剂</span> </label> <label style="display:flex;align-items:center;padding:10px;cursor:pointer;border-radius:6px;" onmouseover="this.style.background='var(--bg-primary)'" onmouseout="this.style.background='transparent'"> <input type="checkbox" value="consumable" onchange="updateTypeSelection()" style="margin-right:12px;width:18px;height:18px;cursor:pointer;"> <span style="font-size:1rem;"><span style="font-size:1.3rem;">📦</span> 耗材</span> </label> <label style="display:flex;align-items:center;padding:10px;cursor:pointer;border-radius:6px;" onmouseover="this.style.background='var(--bg-primary)'" onmouseout="this.style.background='transparent'"> <input type="checkbox" value="freezer" onchange="updateTypeSelection()" style="margin-right:12px;width:18px;height:18px;cursor:pointer;"> <span style="font-size:1rem;"><span style="font-size:1.3rem;">🧊</span> 冰箱</span> </label> <label style="display:flex;align-items:center;padding:10px;cursor:pointer;border-radius:6px;" onmouseover="this.style.background='var(--bg-primary)'" onmouseout="this.style.background='transparent'"> <input type="checkbox" value="plant" onchange="updateTypeSelection()" style="margin-right:12px;width:18px;height:18px;cursor:pointer;"> <span style="font-size:1rem;"><span style="font-size:1.3rem;">🌱</span> 植物培养�?/span> </label> </div> <div style="display:flex;gap:8px;margin-top:8px;"> <button class="btn btn-sm btn-secondary" style="flex:1;" onclick="selectAllTypes()">�?全�?/button> <button class="btn btn-sm btn-secondary" style="flex:1;" onclick="clearAllTypes()">�?清除</button> </div> <div data-source-section style="margin-top:16px;"> <div class="control-item"> <div class="control-label">数据来源</div> <select class="font-select" id="batchDataSource" onchange="onBatchSourceChange()"> <option value="database">📨 从数据库加载</option> <option value="manual">✏️ 手动选择</option> <option value="excel">📦 上传 Excel</option> </select> </div> <div id="batchManualPanel" style="display:none;margin-top:10px;"> <div style="max-height:300px;overflow-y:auto;background:var(--bg-tertiary);border-radius:8px;padding:10px;margin-bottom:10px;" id="itemCheckboxList"> <p style="text-align:center;color:var(--text-muted);padding:20px;font-size:.85rem;">请先选择类型并加载数�?/p> </div> <div style="display:flex;gap:8px;"> <button class="btn btn-sm btn-secondary" style="flex:1;" onclick="selectAll()">�?全选项</button> <button class="btn btn-sm btn-secondary" style="flex:1;" onclick="selectNone()">🔄 取消全�?/button> </div> </div> <div id="batchExcelPanel" style="display:none;margin-top:10px;"> <div style="border:2px dashed var(--border-color);border-radius:8px;padding:24px;text-align:center;cursor:pointer;margin-bottom:10px;" onclick="document.getElementById('batchExcelInput').click()"> <div style="font-size:2rem;margin-bottom:8px;">📨</div> <p style="font-size:.9rem;color:var(--text-secondary);">点击上传 Excel 文件</p> </div> <input type="file" id="batchExcelInput" accept=".xlsx,.xls" style="display:none;"> <button class="btn btn-sm btn-secondary" onclick="downloadBatchTemplate()">📫 下载模板</button> </div> <button class="btn btn-primary btn-full" style="margin-top:12px;" onclick="loadBatchData()" id="btnLoadBatch" disabled>📜 加载数据</button> <div id="batchStats" style="display:none;margin-top:12px;padding:12px;background:var(--bg-tertiary);border-radius:8px;"> <div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span style="color:var(--text-secondary);font-size:.85rem;">共加�?/span><strong id="statLoaded">0</strong></div> <div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span style="color:var(--text-secondary);font-size:.85rem;">已选择</span><strong id="statSelected">0</strong></div> <div style="display:flex;justify-content:space-between;"><span style="color:var(--text-secondary);font-size:.85rem;">类型</span><strong id="statTypes">0 �?/strong></div> </div> </div> </div> <div class="section"> <div class="section-title">🧵 命名规则</div> <div class="control-item"> <input type="text" class="text-input" id="batchNamingPattern" value="{type}_{name}_{id}"> <div class="hint-text">可用: <code>{type}</code> <code>{name}</code> <code>{id}</code> <code>{model}</code> <code>{location}</code> <code>{index}</code></div> </div> </div> <div class="section"> <button class="btn btn-success btn-full" id="btnGenerateBatch" onclick="generateBatch()" disabled>📦 批量生成并下�?ZIP</button> <div id="batchProgress" style="display:none;margin-top:12px;"> <div style="width:100%;height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden;"><div id="batchProgressBar" style="height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));width:0%;transition:width .3s;"></div></div> <p id="batchProgressText" style="text-align:center;font-size:.82rem;color:var(--text-secondary);margin-top:6px;">准备�?..</p> </div> </div> </div> </div>  <div class="preview-panel"> <h3 style="margin-bottom:16px;">实时预览</h3> <div class="preview-canvas-wrapper"><canvas id="previewCanvas"></canvas></div> <div class="preview-info">💡 点击文字或图片可拖动调整位置</div>  <div style="width:100%;margin-top:16px;padding:16px;background:var(--bg-secondary);border-radius:8px;"> <h4 style="margin-bottom:12px;font-size:0.9rem;">�?快速对�?/h4> <div style="margin-bottom:12px;"> <div class="align-label">顶部标题</div> <div style="display:flex;gap:6px;"> <button class="btn btn-sm btn-secondary" style="flex:1;" onclick="alignElement('brandCN','left')">�?/button> <button class="btn btn-sm btn-secondary" style="flex:1;" onclick="alignElement('brandCN','center')">�?/button> <button class="btn btn-sm btn-secondary" style="flex:1;" onclick="alignElement('brandCN','right')">�?/button> <button class="btn btn-sm btn-secondary" onclick="alignElement('brandCN','reset')">�?/button> </div> </div> <div style="margin-bottom:12px;"> <div class="align-label">底部标题</div> <div style="display:flex;gap:6px;"> <button class="btn btn-sm btn-secondary" style="flex:1;" onclick="alignElement('bottomTitle','left')">�?/button> <button class="btn btn-sm btn-secondary" style="flex:1;" onclick="alignElement('bottomTitle','center')">�?/button> <button class="btn btn-sm btn-secondary" style="flex:1;" onclick="alignElement('bottomTitle','right')">�?/button> <button class="btn btn-sm btn-secondary" onclick="alignElement('bottomTitle','reset')">�?/button> </div> </div> <div> <div class="align-label">角落Logo快速定�?/div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;"> <button class="btn btn-sm btn-secondary" onclick="alignElement('cornerLogo','top-left')">↖️ 左上</button> <button class="btn btn-sm btn-secondary" onclick="alignElement('cornerLogo','top-right')">↗️ 右上</button> <button class="btn btn-sm btn-secondary" onclick="alignElement('cornerLogo','bottom-left')">↙️ 左下</button> <button class="btn btn-sm btn-secondary" onclick="alignElement('cornerLogo','bottom-right')">↘️ 右下</button> </div> </div> </div> <div class="action-buttons"> <button class="btn btn-primary btn-full" onclick="downloadQRCode()">�?下载二维�?/button> <button class="btn btn-success btn-full" onclick="saveConfig()">�?保存并应用到全局</button> <button class="btn btn-secondary btn-full" onclick="resetConfig()">�?恢复默认设置</button> </div> </div> </div> <div class="toast" id="toast"></div> <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script> <script> function toast(m,t){var e=document.getElementById('toast');e.textContent=m;e.className='toast show'+(t==='error'?' error':'');setTimeout(function(){e.classList.remove('show')},3000);} /* ===== 权限控制 ===== */ function getCurrentUser(){ try{ var k=['lablog_current_user','lablog_user','currentUser']; for(var i=0;i<k.length;i++){var u=localStorage.getItem(k[i]);if(u)return JSON.parse(u);} return null; }catch(e){return null;} } function isAdminUser(user) { if (!user) return false; return user.role==='admin'||user.role==='管理�?||user.isSuper===true||user.isAdmin===true; } function applyUserHeader(){ var user=getCurrentUser(); var nameEl=document.getElementById('memberName'); var statusEl=document.getElementById('memberStatus'); var loginBtn=document.getElementById('loginBtn'); if(!user){ nameEl.textContent='未登�?; statusEl.textContent='游客'; statusEl.style.color='var(--text-muted)'; if(loginBtn)loginBtn.style.display='inline-flex'; return false; } nameEl.textContent=user.name||user.username||'用户'; var roleText='',roleColor=''; if(isAdminUser(user)){roleText='�?管理�?;roleColor='var(--accent-secondary)';} else if(user.role==='teacher'||user.role==='教师'){roleText='👨‍�?教师';roleColor='var(--text-secondary)';} else if(user.role==='student'||user.role==='学生'){roleText='👨‍�?学生';roleColor='var(--text-secondary)';} else{roleText='普通成�?;roleColor='var(--text-secondary)';} statusEl.textContent=roleText; statusEl.style.color=roleColor; if(loginBtn)loginBtn.style.display='none'; return isAdminUser(user); } function ensureAdminAccess() { var user = getCurrentUser(); if (!isAdminUser(user)) { toast('仅管理员可使用二维码功能', 'error'); return false; } return true; } function disableQRCodeActions(){ var btns=document.querySelectorAll('.action-buttons .btn'); btns.forEach(function(b){b.disabled=true;b.style.opacity='0.5';b.style.cursor='not-allowed';if(!b.textContent.includes('仅管理员'))b.textContent=b.textContent+' (仅管理员)';}); var cp=document.querySelector('.control-panel'); if(cp){ var n=document.createElement('div'); n.style.cssText='background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:8px;padding:16px;margin-bottom:24px;text-align:center;'; n.innerHTML='<p style="color:var(--accent-danger);font-weight:600;margin-bottom:8px;">⚠️ 权限不足</p><p style="color:var(--text-secondary);font-size:0.9rem;">二维码生成和导出功能仅限管理员使�?/p><a href="/login.html?redirect=/modules/qrcode/qr-customizer.html" style="display:inline-block;margin-top:12px;padding:8px 16px;background:var(--accent-primary);color:white;text-decoration:none;border-radius:6px;font-size:0.9rem;">登录管理员账�?/a>'; cp.insertBefore(n,cp.firstChild); } } /* ===== 主题切换 ===== */ function setupThemeToggle(){ var btn=document.getElementById('themeToggleBtn'); if(!btn)return; btn.addEventListener('click',function(e){ e.stopPropagation(); var panel=document.getElementById('themeQuickPanel'); if(!panel){createThemeQuickPanel();panel=document.getElementById('themeQuickPanel');} panel.style.display=panel.style.display==='none'?'block':'none'; }); document.addEventListener('click',function(e){var p=document.getElementById('themeQuickPanel');if(p&&!btn.contains(e.target)&&!p.contains(e.target))p.style.display='none';}); var saved=localStorage.getItem('lablog_theme'); if(saved&&window.Themes&&window.Themes[saved]){ if(window.themeService)themeService.setTheme(saved); var t=window.Themes[saved]; btn.textContent=t.icon+' '+t.name; } } function createThemeQuickPanel(){ if(!window.Themes)return; var panel=document.createElement('div'); panel.id='themeQuickPanel'; panel.style.cssText='position:fixed;top:70px;right:220px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:16px;z-index:1000;box-shadow:var(--shadow-lg);width:340px;display:none;'; var html='<div style="font-size:.9rem;font-weight:600;margin-bottom:12px;">🎨 选择主题</div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">'; var themes=Object.values(window.Themes); var current=themeService?themeService.getCurrentTheme():window.DEFAULT_THEME; themes.forEach(function(t){ var active=t.id===current?' style="border-color:var(--accent-primary);background:var(--accent-primary-light);"':''; html+='<div class="theme-mini" data-theme="'+t.id+'" onclick="selectQTheme(\''+t.id+'\')"'+active+' style="display:flex;align-items:center;gap:8px;padding:8px 10px;border:2px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s;font-size:.82rem;">'; html+='<span>'+t.icon+'</span><span>'+t.name+'</span>'; if(active)html+='<span style="margin-left:auto;color:var(--accent-primary);">�?/span>'; html+='</div>'; }); html+='</div>'; panel.innerHTML=html; document.body.appendChild(panel); } function selectQTheme(id){ if(!window.Themes||!window.Themes[id])return; if(window.themeService)themeService.setTheme(id); var t=window.Themes[id]; var btn=document.getElementById('themeToggleBtn'); if(btn)btn.textContent=t.icon+' '+t.name; document.querySelectorAll('#themeQuickPanel .theme-mini').forEach(function(el){ el.style.borderColor='var(--border-color)'; el.style.background='transparent'; var ck=el.querySelector('.theme-check'); if(ck)ck.remove(); if(el.dataset.theme===id){ el.style.borderColor='var(--accent-primary)'; el.style.background='var(--accent-primary-light)'; var s=document.createElement('span');s.style.cssText='margin-left:auto;color:var(--accent-primary);';s.textContent='�?;s.className='theme-check';el.appendChild(s); } }); toast('已切换为 '+t.name); } /* ===== 配置 ===== */ var config={ targetUrl:'https://lablog-4f6.pages.dev', centerDisplayMode:'logo', deviceTextSize:13, deviceTextX:null, deviceTextY:null, centerLogoSize:60, centerLogoImage:null, centerLogoX:null, centerLogoY:null, centerCustomText:'实验�?, centerTextSize:13, centerTextColor:'#000000', centerTextX:null, centerTextY:null, showCornerLogo:false, cornerLogoSize:50, cornerLogoImage:null, cornerLogoX:40, cornerLogoY:40, brandCNX:null, brandCNY:35, brandENX:null, brandENY:55, bottomTitleX:null, bottomTitleY:null, bottomSubtitleX:null, bottomSubtitleY:null, brandNameCN:'广西民族大学', brandNameEN:'Guangxi Minzu University', bottomTitle:'实验室智能台账系�?, bottomSubtitle:'Lab Management System', fontFamily:'Noto Sans SC', brandSize:18, brandEnSize:12, titleSize:18, subtitleSize:12, fontWeight:'600', width:420, height:520, qrSize:320, bgColor:'#ffffff', textColor:'#000000', qrColor:'#000000', template:'default' }; var DEFAULTS=JSON.parse(JSON.stringify(config)); var isDragging=false,dragTarget=null,dragStartX=0,dragStartY=0; var templates={ default:{}, instrument:{bgColor:'#f0f7ff',textColor:'#1e3a8a',qrColor:'#1e3a8a'}, reagent:{bgColor:'#fff7ed',textColor:'#7c2d12',qrColor:'#7c2d12'}, dangerous:{bgColor:'#fef2f2',textColor:'#7f1d1d',qrColor:'#7f1d1d'}, freezer:{bgColor:'#ecfeff',textColor:'#164e63',qrColor:'#164e63'}, plant:{bgColor:'#f0fdf4',textColor:'#14532d',qrColor:'#14532d'}, compact:{width:280,height:360,qrSize:200} }; function updVals(){ document.getElementById('deviceTextSizeValue').textContent=config.deviceTextSize+'px'; document.getElementById('centerLogoSizeValue').textContent=config.centerLogoSize+'px'; document.getElementById('centerTextSizeValue').textContent=config.centerTextSize+'px'; document.getElementById('centerTextColorHex').textContent=config.centerTextColor; document.getElementById('cornerLogoSizeValue').textContent=config.cornerLogoSize+'px'; document.getElementById('brandSizeValue').textContent=config.brandSize+'px'; document.getElementById('brandEnSizeValue').textContent=config.brandEnSize+'px'; document.getElementById('titleSizeValue').textContent=config.titleSize+'px'; document.getElementById('subtitleSizeValue').textContent=config.subtitleSize+'px'; document.getElementById('widthValue').textContent=config.width+'px'; document.getElementById('heightValue').textContent=config.height+'px'; document.getElementById('qrSizeValue').textContent=config.qrSize+'px'; document.getElementById('bgColorHex').textContent=config.bgColor; document.getElementById('textColorHex').textContent=config.textColor; document.getElementById('qrColorHex').textContent=config.qrColor; } function applyUI(){ document.querySelectorAll('.center-tab').forEach(function(t){t.classList.toggle('active',t.dataset.type===config.centerDisplayMode);}); document.querySelectorAll('.center-content-panel').forEach(function(p){p.classList.toggle('active',p.dataset.panel===config.centerDisplayMode);}); document.getElementById('deviceTextSizeSlider').value=config.deviceTextSize; document.getElementById('centerLogoSizeSlider').value=config.centerLogoSize; document.getElementById('centerCustomText').value=config.centerCustomText; document.getElementById('centerTextSizeSlider').value=config.centerTextSize; document.getElementById('centerTextColor').value=config.centerTextColor; document.getElementById('showCornerLogo').checked=config.showCornerLogo; document.getElementById('cornerLogoControls').style.display=config.showCornerLogo?'block':'none'; document.getElementById('cornerLogoSizeSlider').value=config.cornerLogoSize; document.getElementById('brandNameCN').value=config.brandNameCN; document.getElementById('brandNameEN').value=config.brandNameEN; document.getElementById('bottomTitle').value=config.bottomTitle; document.getElementById('bottomSubtitle').value=config.bottomSubtitle; document.getElementById('fontSelect').value=config.fontFamily; document.getElementById('brandSizeSlider').value=config.brandSize; document.getElementById('brandEnSizeSlider').value=config.brandEnSize; document.getElementById('titleSizeSlider').value=config.titleSize; document.getElementById('subtitleSizeSlider').value=config.subtitleSize; document.getElementById('fontWeight').value=config.fontWeight; document.getElementById('widthSlider').value=config.width; document.getElementById('heightSlider').value=config.height; document.getElementById('qrSizeSlider').value=config.qrSize; document.getElementById('bgColor').value=config.bgColor; document.getElementById('textColor').value=config.textColor; document.getElementById('qrColor').value=config.qrColor; document.querySelectorAll('.template-btn').forEach(function(b){b.classList.toggle('active',b.dataset.template===config.template);}); updVals(); } function loadSaved(){ try{ var s=localStorage.getItem('qr_custom_config'); if(!s)return; var p=JSON.parse(s); config={...config,...p}; if(p.centerLogoImageData){ var img=new Image(); img.onload=function(){ config.centerLogoImage=img; var el=document.getElementById('centerLogoPreview');el.innerHTML=''; var d=document.createElement('img');d.src=p.centerLogoImageData;el.appendChild(d); if(!p.cornerLogoImageData){applyUI();renderPreview();} }; img.src=p.centerLogoImageData; } if(p.cornerLogoImageData){ var img2=new Image(); img2.onload=function(){ config.cornerLogoImage=img2; var el=document.getElementById('cornerLogoPreview');el.innerHTML=''; var d=document.createElement('img');d.src=p.cornerLogoImageData;el.appendChild(d); applyUI();renderPreview(); }; img2.src=p.cornerLogoImageData; } if(!p.centerLogoImageData&&!p.cornerLogoImageData) {applyUI();renderPreview();} document.getElementById('targetUrlInput').value=config.targetUrl||''; }catch(e){console.error(e)} } function setupEvents(){ document.querySelectorAll('.center-tab').forEach(function(tab){ tab.addEventListener('click',function(){ document.querySelectorAll('.center-tab').forEach(function(t){t.classList.remove('active');}); tab.classList.add('active'); document.querySelectorAll('.center-content-panel').forEach(function(p){p.classList.remove('active');}); config.centerDisplayMode=tab.dataset.type; document.querySelector('[data-panel="'+config.centerDisplayMode+'"]').classList.add('active'); renderPreview(); }); }); document.getElementById('deviceTextSizeSlider').addEventListener('input',function(e){config.deviceTextSize=+e.target.value;updVals();renderPreview();}); document.getElementById('centerLogoSizeSlider').addEventListener('input',function(e){config.centerLogoSize=+e.target.value;updVals();renderPreview();}); document.getElementById('centerLogoUpload').addEventListener('change',function(e){ var f=e.target.files[0];if(!f)return; var r=new FileReader(); r.onload=function(ev){ var img=new Image(); img.onload=function(){config.centerLogoImage=img;document.getElementById('centerLogoPreview').innerHTML='';var d=document.createElement('img');d.src=ev.target.result;document.getElementById('centerLogoPreview').appendChild(d);renderPreview();toast('Logo已上�?);}; img.src=ev.target.result; }; r.readAsDataURL(f); }); document.getElementById('centerCustomText').addEventListener('input',function(e){config.centerCustomText=e.target.value;renderPreview();}); document.getElementById('centerTextSizeSlider').addEventListener('input',function(e){config.centerTextSize=+e.target.value;updVals();renderPreview();}); document.getElementById('centerTextColor').addEventListener('input',function(e){config.centerTextColor=e.target.value;document.getElementById('centerTextColorHex').textContent=e.target.value;renderPreview();}); document.getElementById('showCornerLogo').addEventListener('change',function(e){config.showCornerLogo=e.target.checked;document.getElementById('cornerLogoControls').style.display=e.target.checked?'block':'none';renderPreview();}); document.getElementById('cornerLogoSizeSlider').addEventListener('input',function(e){config.cornerLogoSize=+e.target.value;updVals();renderPreview();}); document.getElementById('cornerLogoUpload').addEventListener('change',function(e){ var f=e.target.files[0];if(!f)return; var r=new FileReader(); r.onload=function(ev){ var img=new Image(); img.onload=function(){config.cornerLogoImage=img;document.getElementById('cornerLogoPreview').innerHTML='';var d=document.createElement('img');d.src=ev.target.result;document.getElementById('cornerLogoPreview').appendChild(d);renderPreview();toast('角落Logo已上�?);}; img.src=ev.target.result; }; r.readAsDataURL(f); }); document.getElementById('targetUrlInput').addEventListener('input',function(e){config.targetUrl=e.target.value;renderPreview();}); ['brandNameCN','brandNameEN','bottomTitle','bottomSubtitle'].forEach(function(id){document.getElementById(id).addEventListener('input',function(e){config[e.target.id]=e.target.value;renderPreview();});}); document.getElementById('fontSelect').addEventListener('change',function(e){config.fontFamily=e.target.value;renderPreview();}); document.getElementById('fontWeight').addEventListener('change',function(e){config.fontWeight=e.target.value;renderPreview();}); ['brandSize','brandEnSize','titleSize','subtitleSize','width','height','qrSize'].forEach(function(k){var el=document.getElementById(k+'Slider');if(el)el.addEventListener('input',function(e){config[k]=+e.target.value;updVals();renderPreview();});}); ['bgColor','textColor','qrColor'].forEach(function(k){var el=document.getElementById(k);if(el)el.addEventListener('input',function(e){config[k]=e.target.value;document.getElementById(k+'Hex').textContent=e.target.value;renderPreview();});}); document.querySelectorAll('.template-btn').forEach(function(b){ b.addEventListener('click',function(){ document.querySelectorAll('.template-btn').forEach(function(x){x.classList.remove('active');}); b.classList.add('active'); var t=b.dataset.template;config.template=t; if(templates[t]){Object.assign(config,templates[t]);applyUI();} renderPreview(); }); }); var canvas=document.getElementById('previewCanvas'); canvas.addEventListener('mousedown',function(e){onCanvasMouseDown(e);}); canvas.addEventListener('mousemove',function(e){onCanvasMouseMove(e);}); canvas.addEventListener('mouseup',function(e){onCanvasMouseUp(e);}); canvas.addEventListener('mouseleave',function(e){onCanvasMouseUp(e);}); } function isInBounds(x,y,text,tx,ty,fs){ var canvas=document.getElementById('previewCanvas'); var ctx=canvas.getContext('2d'); ctx.font=config.fontWeight+' '+fs+'px "'+config.fontFamily+'"'; var w=ctx.measureText(text).width; return x>=tx-w/2-10&&x<=tx+w/2+10&&y>=ty-fs*0.75&&y<=ty+fs*0.75; } function detectElement(x,y){ if(config.showCornerLogo){ var lx=config.cornerLogoX||40,ly=config.cornerLogoY||40,ls=config.cornerLogoSize; if(Math.sqrt((x-lx)*(x-lx)+(y-ly)*(y-ly))<ls/2+10) return{type:'cornerLogo'}; } var cx=config.brandCNX||config.width/2,cy=config.brandCNY||35; if(isInBounds(x,y,config.brandNameCN,cx,cy,config.brandSize)) return{type:'brandCN'}; var ex=config.brandENX||config.width/2,ey=config.brandENY||55; if(isInBounds(x,y,config.brandNameEN,ex,ey,config.brandEnSize)) return{type:'brandEN'}; var qrY=80, qcX=config.width/2, qcY=qrY+config.qrSize/2; var br=config.centerDisplayMode==='logo'?config.centerLogoSize/2+8:50; if(Math.sqrt((x-qcX)*(x-qcX)+(y-qcY)*(y-qcY))<br) return{type:'center',mode:config.centerDisplayMode}; var by=qrY+config.qrSize+50; var btx=config.bottomTitleX||config.width/2,bty=config.bottomTitleY||by; if(isInBounds(x,y,config.bottomTitle,btx,bty,config.titleSize)) return{type:'bottomTitle'}; if(config.bottomSubtitle){ var bsx=config.bottomSubtitleX||config.width/2,bsy=config.bottomSubtitleY||(by+config.titleSize+5); if(isInBounds(x,y,config.bottomSubtitle,bsx,bsy,config.subtitleSize)) return{type:'bottomSubtitle'}; } return null; } function onCanvasMouseDown(e){ var canvas=e.target; var rect=canvas.getBoundingClientRect(); var x=(e.clientX-rect.left)*(canvas.width/rect.width),y=(e.clientY-rect.top)*(canvas.height/rect.height); dragTarget=detectElement(x,y); if(dragTarget){isDragging=true;dragStartX=x;dragStartY=y;canvas.style.cursor='grabbing';} } function onCanvasMouseMove(e){ var canvas=e.target; var rect=canvas.getBoundingClientRect(); var x=(e.clientX-rect.left)*(canvas.width/rect.width),y=(e.clientY-rect.top)*(canvas.height/rect.height); if(isDragging&&dragTarget){ var dx=x-dragStartX,dy=y-dragStartY; switch(dragTarget.type){ case'cornerLogo': config.cornerLogoX=(config.cornerLogoX||40)+dx;config.cornerLogoY=(config.cornerLogoY||40)+dy; config.cornerLogoX=Math.max(30,Math.min(config.width-30,config.cornerLogoX)); config.cornerLogoY=Math.max(30,Math.min(config.height-30,config.cornerLogoY)); break; case'brandCN':config.brandCNX=(config.brandCNX||config.width/2)+dx;config.brandCNY=(config.brandCNY||35)+dy;break; case'brandEN':config.brandENX=(config.brandENX||config.width/2)+dx;config.brandENY=(config.brandENY||55)+dy;break; case'center': if(dragTarget.mode==='logo'){config.centerLogoX=(config.centerLogoX||0)+dx;config.centerLogoY=(config.centerLogoY||0)+dy;} else if(dragTarget.mode==='device'){config.deviceTextX=(config.deviceTextX||0)+dx;config.deviceTextY=(config.deviceTextY||0)+dy;} else{config.centerTextX=(config.centerTextX||0)+dx;config.centerTextY=(config.centerTextY||0)+dy;} break; case'bottomTitle':config.bottomTitleX=(config.bottomTitleX||config.width/2)+dx;config.bottomTitleY=(config.bottomTitleY||80+config.qrSize+50)+dy;break; case'bottomSubtitle':config.bottomSubtitleX=(config.bottomSubtitleX||config.width/2)+dx;config.bottomSubtitleY=(config.bottomSubtitleY||80+config.qrSize+50+config.titleSize+5)+dy;break; } dragStartX=x;dragStartY=y; renderPreview(); }else{ canvas.style.cursor=detectElement(x,y)?'grab':'default'; } } function onCanvasMouseUp(e){ if(isDragging){isDragging=false;dragTarget=null;e.target.style.cursor='default';} } function renderPreview(){ var qrY=80; config.targetUrl=document.getElementById('targetUrlInput').value || config.targetUrl; config.brandNameCN=document.getElementById('brandNameCN').value; config.brandNameEN=document.getElementById('brandNameEN').value; config.bottomTitle=document.getElementById('bottomTitle').value; config.bottomSubtitle=document.getElementById('bottomSubtitle').value; config.fontFamily=document.getElementById('fontSelect').value; config.fontWeight=document.getElementById('fontWeight').value; config.brandSize=+document.getElementById('brandSizeSlider').value; config.brandEnSize=+document.getElementById('brandEnSizeSlider').value; config.titleSize=+document.getElementById('titleSizeSlider').value; config.subtitleSize=+document.getElementById('subtitleSizeSlider').value; config.width=+document.getElementById('widthSlider').value; config.height=+document.getElementById('heightSlider').value; config.qrSize=+document.getElementById('qrSizeSlider').value; config.bgColor=document.getElementById('bgColor').value; config.textColor=document.getElementById('textColor').value; config.qrColor=document.getElementById('qrColor').value; config.centerLogoSize=+document.getElementById('centerLogoSizeSlider').value; config.centerCustomText=document.getElementById('centerCustomText').value; config.centerTextSize=+document.getElementById('centerTextSizeSlider').value; config.centerTextColor=document.getElementById('centerTextColor').value; config.showCornerLogo=document.getElementById('showCornerLogo').checked; config.cornerLogoSize=+document.getElementById('cornerLogoSizeSlider').value; config.deviceTextSize=+document.getElementById('deviceTextSizeSlider').value; var canvas=document.getElementById('previewCanvas'); var ctx=canvas.getContext('2d'); canvas.width=config.width; canvas.height=config.height; ctx.fillStyle=config.bgColor; ctx.fillRect(0,0,config.width,config.height); var cx=config.width/2; ctx.textAlign='center';ctx.textBaseline='top'; var bcx=config.brandCNX||cx; ctx.fillStyle=config.textColor; ctx.font=config.fontWeight+' '+config.brandSize+'px "'+config.fontFamily+'"'; ctx.fillText(config.brandNameCN,bcx,config.brandCNY||35); var bex=config.brandENX||cx; ctx.fillStyle=config.textColor+'aa'; ctx.font=config.fontWeight+' '+config.brandEnSize+'px "'+config.fontFamily+'"'; ctx.fillText(config.brandNameEN,bex,config.brandENY||55); var qrX=(config.width-config.qrSize)/2; var qr=qrcode(0,'H');qr.addData(config.targetUrl || 'https://lablog-4f6.pages.dev');qr.make(); var m=qr.getModuleCount(),cs=config.qrSize/m; ctx.fillStyle='#ffffff'; ctx.fillRect(qrX-5,qrY-5,config.qrSize+10,config.qrSize+10); for(var r=0;r<m;r++)for(var c=0;c<m;c++){if(qr.isDark(r,c)){ctx.fillStyle=config.qrColor;ctx.fillRect(qrX+c*cs,qrY+r*cs,cs,cs);}} var qcX=cx+(config.centerDisplayMode==='logo'?(config.centerLogoX||0):(config.centerDisplayMode==='device'?(config.deviceTextX||0):(config.centerTextX||0))); var qcY=qrY+config.qrSize/2+(config.centerDisplayMode==='logo'?(config.centerLogoY||0):(config.centerDisplayMode==='device'?(config.deviceTextY||0):(config.centerTextY||0))); var br=config.centerDisplayMode==='logo'?config.centerLogoSize/2+8:50; ctx.fillStyle='#ffffff';ctx.beginPath();ctx.arc(qcX,qcY,br,0,Math.PI*2);ctx.fill(); if(config.centerDisplayMode==='device'){ ctx.fillStyle=config.textColor; ctx.font='bold '+config.deviceTextSize+'px "'+config.fontFamily+'"'; ctx.textAlign='center';ctx.textBaseline='middle'; var dt='设备名称'; if(dt.length>4){var h=Math.ceil(dt.length/2);ctx.fillText(dt.substring(0,h),qcX,qcY-8);ctx.fillText(dt.substring(h),qcX,qcY+8);} else ctx.fillText(dt,qcX,qcY); } else if(config.centerDisplayMode==='logo'){ if(config.centerLogoImage&&config.centerLogoImage.complete&&config.centerLogoImage.naturalWidth>0){ var ls=config.centerLogoSize; ctx.save();ctx.beginPath();ctx.arc(qcX,qcY,ls/2,0,Math.PI*2);ctx.clip(); ctx.drawImage(config.centerLogoImage,qcX-ls/2,qcY-ls/2,ls,ls);ctx.restore(); } else { ctx.font=Math.floor(config.centerLogoSize*0.8)+'px Arial'; ctx.textAlign='center';ctx.textBaseline='middle'; ctx.fillText('🖼�?,qcX,qcY); } } else { ctx.fillStyle=config.centerTextColor; ctx.font='bold '+config.centerTextSize+'px "'+config.fontFamily+'"'; ctx.textAlign='center';ctx.textBaseline='middle'; var ct=config.centerCustomText||'示例'; if(ct.length>4){var h=Math.ceil(ct.length/2);ctx.fillText(ct.substring(0,h),qcX,qcY-8);ctx.fillText(ct.substring(h),qcX,qcY+8);} else ctx.fillText(ct,qcX,qcY); } if(config.showCornerLogo){ var lx=config.cornerLogoX||40,ly=config.cornerLogoY||40,ls2=config.cornerLogoSize; ctx.save();ctx.shadowColor='rgba(0,0,0,0.2)';ctx.shadowBlur=10;ctx.shadowOffsetX=0;ctx.shadowOffsetY=2; ctx.fillStyle='rgba(255,255,255,0.95)';ctx.beginPath();ctx.arc(lx,ly,ls2/2+5,0,Math.PI*2);ctx.fill(); ctx.restore(); if(config.cornerLogoImage&&config.cornerLogoImage.complete&&config.cornerLogoImage.naturalWidth>0){ ctx.drawImage(config.cornerLogoImage,lx-ls2/2,ly-ls2/2,ls2,ls2); } else { ctx.font=Math.floor(ls2*0.8)+'px Arial';ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText('🖼�?,lx,ly); } } ctx.strokeStyle=config.textColor+'33';ctx.lineWidth=1; ctx.beginPath();ctx.moveTo(20,qrY+config.qrSize+20);ctx.lineTo(config.width-20,qrY+config.qrSize+20);ctx.stroke(); var by=qrY+config.qrSize+50; var btx=config.bottomTitleX||cx,bty=config.bottomTitleY||by; ctx.fillStyle=config.textColor; ctx.font=config.fontWeight+' '+config.titleSize+'px "'+config.fontFamily+'"'; ctx.textAlign='center';ctx.textBaseline='top'; ctx.fillText(config.bottomTitle,btx,bty); if(config.bottomSubtitle){ var bsx=config.bottomSubtitleX||cx,bsy=config.bottomSubtitleY||(by+config.titleSize+5); ctx.fillStyle=config.textColor+'99'; ctx.font=config.fontWeight+' '+config.subtitleSize+'px "'+config.fontFamily+'"'; ctx.fillText(config.bottomSubtitle,bsx,bsy); } } function buildUrl(){ var type=document.getElementById('linkTypeSelect').value; var id=document.getElementById('linkIdInput').value.trim(); var name=document.getElementById('linkNameInput').value.trim(); if(!id){toast('请输入ID','error');return;} var base=window.location.origin; var path='';if(type==='instrument')path='/modules/instrument/detail.html?id='+id; else if(type==='reagent')path='/modules/reagent/detail.html?id='+id; else if(type==='consumable')path='/modules/consumable/detail.html?id='+id; else if(type==='freezer')path='/modules/freezer/detail.html?id='+id; else if(type==='plant')path='/modules/plant/detail.html?id='+id; var url=base+path; document.getElementById('targetUrlInput').value=url; config.targetUrl=url; if(name){document.getElementById('bottomTitle').value=name;config.bottomTitle=name;} renderPreview();toast('�?链接已生�?); } function testUrl(){ if(!config.targetUrl){toast('请先生成链接','error');return;} window.open(config.targetUrl,'_blank'); } function readUrlFromParams(){ var p=new URLSearchParams(window.location.search); var type=p.get('type')||'instrument'; var id=p.get('id')||''; var name=p.get('name')||''; if(id){document.getElementById('linkIdInput').value=id;} if(name){document.getElementById('linkNameInput').value=name;} document.getElementById('linkTypeSelect').value=type; buildUrl(); } function downloadQRCode(){ if (!ensureAdminAccess()) return; var c=document.getElementById('previewCanvas'); var ts=new Date().toISOString().slice(0,19).replace(/[:.]/g,'-'); var a=document.createElement('a');a.download='二维码_'+config.brandNameCN+'_'+ts+'.png';a.href=c.toDataURL('image/png');a.click(); toast('�?二维码已下载'); } function saveConfig(){ if (!ensureAdminAccess()) return; try{ var s={};for(var k in config)s[k]=config[k]; s.centerLogoImage=undefined;s.cornerLogoImage=undefined; if(config.centerLogoImage){ var c=document.createElement('canvas');c.width=config.centerLogoImage.width;c.height=config.centerLogoImage.height; c.getContext('2d').drawImage(config.centerLogoImage,0,0);s.centerLogoImageData=c.toDataURL('image/png'); } if(config.cornerLogoImage){ var c=document.createElement('canvas');c.width=config.cornerLogoImage.width;c.height=config.cornerLogoImage.height; c.getContext('2d').drawImage(config.cornerLogoImage,0,0);s.cornerLogoImageData=c.toDataURL('image/png'); } localStorage.setItem('qr_custom_config',JSON.stringify(s)); toast('�?配置已保�?); }catch(e){toast('�?保存失败�?+e.message,'error')} } function resetConfig(){ if(!confirm('确定恢复默认�?))return; localStorage.removeItem('qr_custom_config'); config=JSON.parse(JSON.stringify(DEFAULTS)); document.getElementById('centerLogoPreview').innerHTML='<span style="font-size:2rem">🖼�?/span>'; document.getElementById('cornerLogoPreview').innerHTML='<span style="font-size:1.8rem">🖼�?/span>'; applyUI(); document.querySelectorAll('.template-btn').forEach(function(b){b.classList.remove('active');}); document.querySelector('.template-btn[data-template="default"]').classList.add('active'); renderPreview();toast('已恢复默�?); } function alignElement(el,align){ var cx=config.width/2; switch(el){ case'brandCN': if(align==='left')config.brandCNX=60; else if(align==='center')config.brandCNX=cx; else if(align==='right')config.brandCNX=config.width-60; else{config.brandCNX=null;config.brandCNY=35;} break; case'bottomTitle': if(align==='left')config.bottomTitleX=60; else if(align==='center')config.bottomTitleX=cx; else if(align==='right')config.bottomTitleX=config.width-60; else{config.bottomTitleX=null;config.bottomTitleY=null;} break; case'cornerLogo': if(align==='top-left'){config.cornerLogoX=40;config.cornerLogoY=40;} else if(align==='top-right'){config.cornerLogoX=config.width-40;config.cornerLogoY=40;} else if(align==='bottom-left'){config.cornerLogoX=40;config.cornerLogoY=config.height-40;} else{config.cornerLogoX=config.width-40;config.cornerLogoY=config.height-40;} break; } renderPreview();toast('�?已对�?); } /* ===== 批量模式 ===== */ var batchData = []; var selectedBatchItems = []; var selectedTypes = []; var typeConfig = { instrument:{name:'仪器设备',icon:'🔬',key:'instruments_data',dataPath:'instruments',detailPath:'/modules/instrument/detail.html'}, reagent:{name:'试剂',icon:'🧪',key:'reagents_v2_data',dataPath:'reagents',detailPath:'/modules/reagent/detail.html'}, consumable:{name:'耗材',icon:'📦',key:'consumables_data',dataPath:'items',detailPath:'/modules/consumable/detail.html'}, freezer:{name:'冰箱',icon:'🧊',key:'fridges_data',dataPath:'devices',detailPath:'/modules/freezer/detail.html'}, plant:{name:'植物培养�?,icon:'🌱',key:'plant_v2_data',dataPath:'racks',detailPath:'/modules/plant/detail.html'} }; function setMode(mode){ var singleEl=document.getElementById('singleModePanel'); var batchEl=document.getElementById('batchModePanel'); var singleTab=document.getElementById('modeSingle'); var batchTab=document.getElementById('modeBatch'); if(mode==='batch'){ singleEl.style.display='none'; batchEl.style.display='block'; singleTab.style.background='var(--bg-primary)'; singleTab.style.color='var(--text-secondary)'; batchTab.style.background='var(--bg-secondary)'; batchTab.style.color='var(--text-primary)'; var p=new URLSearchParams(window.location.search); var t=p.get('type'); if(t&&typeConfig[t]){ var cb=document.querySelector('#typeCheckboxList input[value="'+t+'"]'); if(cb){cb.checked=true;updateTypeSelection();} } } else { singleEl.style.display='block'; batchEl.style.display='none'; singleTab.style.background='var(--bg-secondary)'; singleTab.style.color='var(--text-primary)'; batchTab.style.background='var(--bg-primary)'; batchTab.style.color='var(--text-secondary)'; } } window.updateTypeSelection = function(){ var cbs=document.querySelectorAll('#typeCheckboxList input[type="checkbox"]'); selectedTypes=Array.from(cbs).filter(function(cb){return cb.checked;}).map(function(cb){return cb.value;}); batchData=[];selectedBatchItems=[];updateBatchUI(); document.getElementById('btnGenerateBatch').disabled=true; document.getElementById('btnLoadBatch').disabled=selectedTypes.length===0; }; window.selectAllTypes = function(){ document.querySelectorAll('#typeCheckboxList input[type="checkbox"]').forEach(function(cb){cb.checked=true;}); updateTypeSelection(); if(selectedTypes.length) toast('�?已全�?,'success'); }; window.clearAllTypes = function(){ document.querySelectorAll('#typeCheckboxList input[type="checkbox"]').forEach(function(cb){cb.checked=false;}); updateTypeSelection(); }; window.onBatchSourceChange = function(){ var src=document.getElementById('batchDataSource').value; document.getElementById('batchManualPanel').style.display=src==='manual'?'block':'none'; document.getElementById('batchExcelPanel').style.display=src==='excel'?'block':'none'; }; function updateBatchUI(){ document.getElementById('statLoaded').textContent=batchData.length; document.getElementById('statSelected').textContent=selectedBatchItems.length; document.getElementById('statTypes').textContent=selectedTypes.length+' �?; } window.loadBatchData = async function(){ if (!ensureAdminAccess()) return; if(!selectedTypes.length){toast('请先选择数据类型','error');return;} var src=document.getElementById('batchDataSource').value; batchData=[]; try{ for(var ti=0;ti<selectedTypes.length;ti++){ var type=selectedTypes[ti]; var cfg=typeConfig[type];if(!cfg) continue; var dataStr=localStorage.getItem(cfg.key); if(dataStr){ var data=JSON.parse(dataStr); var items=cfg.dataPath.split('.').reduce(function(o,k){return o&&o[k];},data)||data[cfg.dataPath]||[]; items=items.map(function(item){item._type=type;item._typeName=cfg.name;item._typeIcon=cfg.icon;item._urlPath=cfg.detailPath;return item;}); batchData=batchData.concat(items); } } if(!batchData.length){toast('未找到数�?,'error');return;} if(src==='manual'){renderBatchCheckboxList();}else{selectedBatchItems=batchData.slice();updateBatchUI();document.getElementById('btnGenerateBatch').disabled=false;} document.getElementById('batchStats').style.display='block'; toast('�?已加�?'+batchData.length+' �?,'success'); }catch(e){toast('加载失败','error');console.error(e);} }; function renderBatchCheckboxList(){ var container=document.getElementById('itemCheckboxList'); if(!batchData.length){container.innerHTML='<p style="text-align:center;color:var(--text-secondary);padding:20px;">暂无数据</p>';return;} var groups={}; batchData.forEach(function(item){ var t=item._type||'other'; if(!groups[t]) groups[t]=[]; groups[t].push(item); }); var html=''; Object.keys(groups).forEach(function(type){ var cfg=typeConfig[type]; html+='<div style="margin-bottom:10px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:var(--bg-tertiary);border-radius:6px;margin-bottom:4px;"><strong>'+(cfg?cfg.icon:'📋')+' '+(cfg?cfg.name:type)+'</strong><span style="color:var(--text-muted);font-size:.8rem;">'+groups[type].length+' �?/span></div>'; groups[type].forEach(function(item){ html+='<label style="display:flex;align-items:center;padding:6px 8px;cursor:pointer;border-radius:4px;transition:background .15s;" onmouseover="this.style.background=\'var(--bg-primary)\'" onmouseout="this.style.background=\'transparent\'"><input type="checkbox" class="batch-item-cb" data-idx="'+batchData.indexOf(item)+'" onchange="updateBatchSelection()" style="margin-right:8px;"><span style="font-size:.85rem;">'+(item.name||item.id||'�?)+'</span></label>'; }); html+='</div>'; }); container.innerHTML=html; } window.updateBatchSelection = function(){ selectedBatchItems=[]; document.querySelectorAll('.batch-item-cb:checked').forEach(function(cb){ var idx=parseInt(cb.dataset.idx); if(batchData[idx]) selectedBatchItems.push(batchData[idx]); }); updateBatchUI(); document.getElementById('btnGenerateBatch').disabled=selectedBatchItems.length===0; }; window.selectAll = function(){ document.querySelectorAll('.batch-item-cb').forEach(function(cb){cb.checked=true;}); updateBatchSelection(); }; window.selectNone = function(){ document.querySelectorAll('.batch-item-cb').forEach(function(cb){cb.checked=false;}); updateBatchSelection(); }; document.addEventListener('DOMContentLoaded',function(){ var el=document.getElementById('batchExcelInput'); if(el) el.addEventListener('change',async function(e){ if (!ensureAdminAccess()) return; var file=e.target.files[0];if(!file) return; if(typeof XLSX==='undefined'){toast('SheetJS 未加�?,'error');return;} try{ var buf=await file.arrayBuffer();var wb=XLSX.read(buf);var ws=wb.Sheets[wb.SheetNames[0]];var rows=XLSX.utils.sheet_to_json(ws); batchData=rows.map(function(r,i){return{id:r.id||r.ID||('item_'+i),name:r.name||r.名称||'',model:r.model||r.型号||'',location:r.location||r.位置||'',_type:r.类型||selectedTypes[0]||'instrument',_typeName:r.类型名称||'导入数据',_typeIcon:'📦',_urlPath:typeConfig[selectedTypes[0]]?typeConfig[selectedTypes[0]].detailPath:'/modules/instrument/detail.html'};}); selectedBatchItems=batchData.slice();updateBatchUI();document.getElementById('batchStats').style.display='block';document.getElementById('btnGenerateBatch').disabled=false;toast('�?导入 '+batchData.length+' �?,'success'); }catch(e){toast('文件解析失败','error');console.error(e);} }); }); window.downloadBatchTemplate = function(){ if(typeof XLSX==='undefined'){toast('SheetJS 未加�?,'error');return;} var wb=XLSX.utils.book_new(); var ws=XLSX.utils.aoa_to_sheet([['id','name','model','location','type'],['001','示例仪器','型号A','31-101','instrument'],['002','示例试剂','CAS-1234','1F-A01','reagent']]); XLSX.utils.book_append_sheet(wb,ws,'模板'); XLSX.writeFile(wb,'批量二维码导入模�?xlsx'); toast('�?模板已下�?); }; window.generateBatch = async function(){ if (!ensureAdminAccess()) return; if(!selectedBatchItems.length){toast('请选择要生成的数据','error');return;} var pattern=document.getElementById('batchNamingPattern').value||'{type}_{name}_{id}'; var btn=document.getElementById('btnGenerateBatch'); var progress=document.getElementById('batchProgress'); var bar=document.getElementById('batchProgressBar'); var txt=document.getElementById('batchProgressText'); btn.disabled=true;progress.style.display='block';bar.style.width='0%';txt.textContent='准备�?..'; try{ var zip=new JSZip();var total=selectedBatchItems.length; for(var i=0;i<total;i++){ var item=selectedBatchItems[i];var pct=Math.round(((i+1)/total)*100); bar.style.width=pct+'%';txt.textContent='生成�?'+(i+1)+'/'+total+' ('+pct+'%)'; var id=item.id||'item_'+i;var cfg=typeConfig[item._type]||typeConfig['instrument']; var url=window.location.origin+cfg.detailPath+'?id='+id; var tempDiv=document.createElement('div');tempDiv.style.display='none';document.body.appendChild(tempDiv); var qr2=qrcode(0,'H'); qr2.addData(url); qr2.make(); var m=qr2.getModuleCount(); var size=300,cs=size/m; var tc=document.createElement('canvas');tc.width=size;tc.height=size; var tctx=tc.getContext('2d'); tctx.fillStyle='#ffffff';tctx.fillRect(0,0,size,size); tctx.fillStyle='#000000'; for(var r=0;r<m;r++){for(var c=0;c<m;c++){if(qr2.isDark(r,c)){tctx.fillRect(c*cs,r*cs,cs,cs);}}} var blob=await new Promise(function(resolve){tc.toBlob(function(b){resolve(b);},'image/png');}); document.body.removeChild(tempDiv); if(blob){ var name=(item.name||item.id).replace(/[<>:"\/\\|?*]/g,'_'); var filename=pattern.replace('{type}',item._typeName).replace('{name}',name).replace('{id}',id).replace('{model}',(item.model||'').replace(/[<>:"\/\\|?*]/g,'_')).replace('{location}',(item.location||'').replace(/[<>:"\/\\|?*]/g,'_')).replace('{index}',String(i+1).padStart(3,'0'))+'.png'; zip.file((item._typeName||'其他')+'/'+filename,blob); } document.body.removeChild(tempDiv); } txt.textContent='正在打包...'; var zipBlob=await zip.generateAsync({type:'blob'}); var link=document.createElement('a');link.href=URL.createObjectURL(zipBlob);link.download='批量二维码_'+selectedTypes.length+'种类型_'+total+'个_'+Date.now()+'.zip';link.click(); bar.style.width='100%';txt.textContent='�?生成完成！共 '+total+' 个二维码';toast('�?批量生成成功�?,'success'); setTimeout(function(){progress.style.display='none';bar.style.width='0%';},3000); }catch(e){console.error(e);toast('生成失败:'+e.message,'error');txt.textContent='�?生成失败';}finally{btn.disabled=false;} }; function sleep(ms){return new Promise(function(r){setTimeout(r,ms);});} /* ===== 入口增强 ===== */ document.addEventListener('DOMContentLoaded',function(){ // ===== 调试模式（Ctrl+D 切换�?==== var debugMode=localStorage.getItem('qr_debug_mode')==='true'; document.addEventListener('keydown',function(e){ if(e.ctrlKey&&e.key==='d'){ e.preventDefault(); debugMode=!debugMode; localStorage.setItem('qr_debug_mode',debugMode); toast(debugMode?'🐛 调试模式已开�?:'�?调试模式已关�?); if(debugMode){console.log('配置:',config);} } }); setupThemeToggle(); var isAdmin=applyUserHeader(); if(!isAdmin){ disableQRCodeActions(); toast('⚠️ 仅管理员可使用二维码生成功能','error'); return; } loadSaved(); setupEvents(); renderPreview(); var p=new URLSearchParams(window.location.search); if(p.get('mode')==='batch'){ setMode('batch'); } }); </script> </body> </html>