45公会黑历史展�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; } body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #1a1a2e 100%); min-height: 100vh; padding: 20px; color: #e8eef5; position: relative; overflow-x: hidden; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 80%, rgba(100, 181, 246, 0.1) 0%, transparent 40%), radial-gradient(circle at 80% 20%, rgba(240, 98, 146, 0.08) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(162, 155, 254, 0.05) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* 星星装饰 */ .star { position: fixed; width: 3px; height: 3px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; pointer-events: none; z-index: 0; animation: twinkle 3s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } .container { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .header { text-align: center; margin-bottom: 35px; padding: 30px 25px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; border: 1px solid rgba(255, 255, 255, 0.1); } .header h1 { font-size: 28px; color: #c0c6ff; margin-bottom: 12px; text-shadow: 0 0 30px rgba(192, 198, 255, 0.4); letter-spacing: 2px; } .header p { font-size: 14px; color: #94a3b8; line-height: 1.6; } .btn, .save-sort-btn { background: linear-gradient(135deg, #6366f1, #4f46e5); border: none; color: white; padding: 11px 24px; border-radius: 24px; font-size: 14px; cursor: pointer; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); white-space: nowrap; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .btn:hover, .save-sort-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); } .btn:hover::before { left: 100%; } .btn { display: inline-block; margin: 0; } .history-card { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); border-radius: 18px; padding: 22px; margin-bottom: 18px; display: flex; gap: 18px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease; } .history-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; border-color: rgba(192, 198, 255, 0.2); } .history-image { flex-shrink: 0; width: 160px; } .history-content { flex: 1; } .history-protagonist { font-size: 20px; font-weight: 600; color: #c0c6ff; margin-bottom: 10px; text-shadow: 0 0 15px rgba(192, 198, 255, 0.3); } .history-description { font-size: 14px; color: #a1aec0; line-height: 1.7; margin-bottom: 16px; } .history-actions { display: flex; gap: 10px; } .edit-btn { background: linear-gradient(135deg, #06b6d4, #0891b2); border: none; color: white; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: all 0.3s ease; box-shadow: 0 3px 10px rgba(6, 182, 212, 0.3); } .edit-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(6, 182, 212, 0.4); } .delete-btn { background: linear-gradient(135deg, #f43f5e, #e11d48); border: none; color: white; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: all 0.3s ease; box-shadow: 0 3px 10px rgba(244, 63, 94, 0.3); } .delete-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(244, 63, 94, 0.4); } .empty-state { text-align: center; padding: 80px 20px; color: #64748b; } .empty-state p { font-size: 19px; margin-bottom: 12px; } .empty-state small { font-size: 14px; } .form-container { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); border-radius: 18px; padding: 28px; margin-top: 28px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; border: 1px solid rgba(255, 255, 255, 0.08); } .form-title { font-size: 20px; font-weight: 600; color: #c0c6ff; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-size: 14px; color: #6b7280; } .form-group input, .form-group textarea { width: 100%; padding: 13px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; background: rgba(0, 0, 0, 0.2); color: #e8eef5; font-size: 14px; outline: none; transition: all 0.3s ease; } .form-group input:focus, .form-group textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); } .form-group textarea { min-height: 100px; resize: vertical; } .form-group ::placeholder { color: #9ca3af; } .submit-btn { background: linear-gradient(135deg, #6366f1, #4f46e5); border: none; color: white; padding: 14px 40px; border-radius: 28px; font-size: 15px; cursor: pointer; width: 100%; margin-top: 20px; box-shadow: 0 4px 18px rgba(99, 102, 241, 0.35); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; } .submit-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99, 102, 241, 0.45); } .submit-btn:hover::before { left: 100%; } .submit-btn:disabled { opacity: 0.5; cursor: not-allowed; } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); } .modal-content { background: rgba(26, 26, 46, 0.95); backdrop-filter: blur(20px); margin: 12% auto; padding: 28px; border-radius: 20px; width: 90%; max-width: 480px; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; border: 1px solid rgba(255, 255, 255, 0.1); } .modal-close { color: #9ca3af; float: right; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } .modal-close:hover { color: #374151; } .modal-buttons { display: flex; gap: 10px; margin-top: 20px; } .modal-buttons button { flex: 1; padding: 12px; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; } .cancel-btn { background: #9ca3af; color: white; } .confirm-btn { background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); transition: all 0.3s ease; } .confirm-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); } .delete-btn-modal { background: linear-gradient(135deg, #f43f5e, #e11d48); color: white; box-shadow: 0 4px 15px rgba(244, 63, 94, 0.3); transition: all 0.3s ease; } .delete-btn-modal:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(244, 63, 94, 0.4); } .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: #374151; color: white; padding: 15px 30px; border-radius: 12px; font-size: 14px; z-index: 2000; opacity: 0; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 12px; } .preview-grid img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; } .preview-grid .image-item { position: relative; } .preview-grid .remove-btn { position: absolute; top: -8px; right: -8px; background: #ef4444; color: white; border: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 14px; font-weight: bold; } .loading-container { text-align: center; padding: 40px; } .spinner { width: 40px; height: 40px; border: 4px solid rgba(52, 211, 153, 0.2); border-top-color: #34d399; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { color: #9ca3af; } .admin-toggle { position: fixed; bottom: 25px; right: 25px; width: 50px; height: 50px; background: linear-gradient(135deg, #64748b, #475569); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); font-size: 20px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; border: 1px solid rgba(255, 255, 255, 0.1); } .admin-toggle:hover { transform: scale(1.12); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4); } .admin-toggle.admin-mode { background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 6px 25px rgba(99, 102, 241, 0.4); } .admin-badge { position: fixed; top: 25px; right: 25px; background: linear-gradient(135deg, #6366f1, #4f46e5); padding: 6px 16px; border-radius: 20px; font-size: 12px; display: none; z-index: 1000; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); color: white; border: 1px solid rgba(255, 255, 255, 0.15); } .admin-mode .admin-badge { display: block; } /* 排序按钮样式 */ .sort-buttons { display: none; gap: 8px; flex-direction: column; align-items: center; justify-content: center; } .admin-mode .sort-buttons { display: flex; } .move-btn { width: 40px; height: 40px; border: none; border-radius: 12px; background: linear-gradient(135deg, rgba(52, 211, 153, 0.15), rgba(52, 211, 153, 0.08)); color: #34d399; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .move-btn:hover { background: linear-gradient(135deg, rgba(52, 211, 153, 0.3), rgba(52, 211, 153, 0.18)); transform: scale(1.1); } .move-btn:active { transform: scale(0.95); } .move-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; } .sort-hint { background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(52, 211, 153, 0.03)); border: 1px solid rgba(52, 211, 153, 0.2); border-radius: 16px; padding: 14px 18px; margin-bottom: 20px; color: #059669; font-size: 14px; display: none; animation: pulse 2s ease-in-out infinite; } .admin-mode .sort-hint { display: flex; align-items: center; gap: 10px; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* 保存排序按钮 */ .save-sort-btn { background: linear-gradient(135deg, #10b981, #059669); border: none; color: white; padding: 12px 30px; border-radius: 25px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; display: none; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25); } .save-sort-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35); } /* 操作按钮区域 */ .action-buttons { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 20px; } /* 只在管理员模式下显示保存排序按钮 */ .save-sort-btn { display: none; } .admin-mode .save-sort-btn { display: inline-block; } .save-sort-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* 美化按钮样式 */ .btn, .save-sort-btn { position: relative; overflow: hidden; } .btn::before, .save-sort-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s ease; } .btn:hover::before, .save-sort-btn:hover::before { left: 100%; } /* 美化卡片 */ .history-card { transition: all 0.3s ease; } .history-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(16,185,129,0.15); } /* 移动端优�?*/ @media (max-width: 600px) { .header { padding: 20px; } .header h1 { font-size: 24px; } .sort-hint { padding: 10px 12px; font-size: 13px; } .move-btn { width: 36px; height: 36px; font-size: 16px; } .action-buttons { flex-direction: column; } .action-buttons button { width: 100%; } } /* 返回按钮样式 */ .back-btn-container { margin-top: 35px; margin-bottom: 25px; text-align: center; } .back-btn { display: inline-block; text-decoration: none; padding: 13px 30px; border-radius: 24px; background: rgba(255, 255, 255, 0.08); color: #a1aec0; font-size: 14px; font-weight: 600; letter-spacing: 1px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); transition: all 0.3s ease; } .back-btn:hover { background: rgba(99, 102, 241, 0.2); color: #c0c6ff; transform: translateY(-2px); border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.2); box-shadow: 0 8px 20px rgba(52, 211, 153, 0.15); } </style> </head> <body>  <div id="stars-container"></div> <div class="admin-badge">🔧 管理模式</div> <div class="admin-toggle" id="admin-toggle">👑</div> <div class="container"> <div class="header"> <h1>🏰 45公会黑历史展�?/h1> <p>纯属娱乐，如有不适请联系馆长 @突突�?删除或修改�?/p> <p style="font-size: 12px; color: #999; margin-top: 4px;">黑历史系统版本A1.006 2026�?�?2�?9:55:48</p> </div>  <div class="sort-hint"> <span>💡</span> <span>使用 ↑↓ 按钮调整顺序，调整后点击"保存排序"</span> </div>  <div class="action-buttons"> <button class="save-sort-btn" id="saveSortBtn" onclick="saveSortOrder()">💾 保存排序</button> <button class="btn" id="add-btn">📝 添加新黑历史</button> </div> <div id="history-list"> <div class="loading-container"> <div class="spinner"></div> <div class="loading-text">数据加载�?..</div> </div> </div>  <div class="modal" id="add-modal"> <div class="modal-content"> <span class="modal-close" onclick="closeAddModal()">×</span> <div class="form-title">📝 提交黑历�?/div> <form id="history-form"> <div class="form-group"> <label>主角名字 *</label> <input type="text" id="protagonist" placeholder="请输入主角名�? required> </div> <div class="form-group"> <label>图片（可添加多张�?/label> <p style="color: #9ca3af; margin-bottom: 8px; font-size: 13px;"> 推荐图床�? <a href="https://www.superbed.cn/" target="_blank" style="color: #34d399; text-decoration: none;">Superbed</a> </p> <div style="display: flex; gap: 10px;"> <input type="text" id="image-url" placeholder="请输入图片链接，按回车或点击添加" style="width: 100%;"> <button type="button" onclick="addCurrentImage()" style="background: linear-gradient(135deg, #6ee7b7, #34d399); border: none; color: white; padding: 0 20px; border-radius: 8px; cursor: pointer; white-space: nowrap;"> 添加 </button> </div> <div id="preview-grid" class="preview-grid"></div> </div> <div class="form-group"> <label>事件描述 *</label> <textarea id="description" placeholder="请详细描述事�? required></textarea> </div> <button type="submit" class="submit-btn" id="submit-btn">确认上传</button> </form> </div> </div>  <div class="modal" id="edit-modal"> <div class="modal-content"> <span class="modal-close" onclick="closeEditModal()">×</span> <div class="form-title">✏️ 编辑黑历�?/div> <form id="edit-form"> <input type="hidden" id="edit-id"> <div class="form-group"> <label>主角名字 *</label> <input type="text" id="edit-protagonist" required> </div> <div class="form-group"> <label>图片（可添加多张�?/label> <p style="color: #9ca3af; margin-bottom: 8px; font-size: 13px;"> 推荐图床�? <a href="https://www.superbed.cn/" target="_blank" style="color: #34d399; text-decoration: none;">Superbed</a> </p> <div style="display: flex; gap: 10px;"> <input type="text" id="edit-image-url" placeholder="请输入图片链接，按回车或点击添加" style="width: 100%;"> <button type="button" onclick="addEditImage()" style="background: linear-gradient(135deg, #6ee7b7, #34d399); border: none; color: white; padding: 0 20px; border-radius: 8px; cursor: pointer; white-space: nowrap;"> 添加 </button> </div> <div id="edit-preview-grid" class="preview-grid"></div> </div> <div class="form-group"> <label>事件描述 *</label> <textarea id="edit-description" required></textarea> </div> <div class="modal-buttons"> <button type="button" class="cancel-btn" onclick="closeEditModal()">取消</button> <button type="submit" class="confirm-btn">确认保存</button> </div> </form> </div> </div>  <div class="modal" id="delete-modal"> <div class="modal-content"> <div class="form-title">🗑�?确认删除</div> <p style="margin-bottom: 20px;">确定要删除这条黑历史吗？</p> <div class="modal-buttons"> <button type="button" class="cancel-btn" onclick="closeDeleteModal()">取消</button> <button type="button" class="delete-btn-modal" onclick="confirmDelete()">确认删除</button> </div> </div> </div>  <div class="modal" id="image-modal"> <span class="modal-close" onclick="closeImageModal()">×</span> <div class="modal-content" style="max-width: 95vw; max-height: 95vh; padding: 10px; position: relative; background: rgba(0,0,0,0.95);">  <div id="prev-btn" onclick="prevImage()" style="position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(52,211,153,0.8); border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; color: white; z-index: 10;"> �? </div>  <div style="display: flex; justify-content: center; align-items: center; padding: 0 50px;"> <img id="modal-img" style="max-width: 100%; max-height: 80vh; border-radius: 12px; object-fit: contain; margin: 0 auto;"> </div>  <div id="next-btn" onclick="nextImage()" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(52,211,153,0.8); border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; color: white; z-index: 10;"> �? </div>  <div id="gallery-count" style="text-align: center; color: white; margin-top: 15px; font-size: 16px;"></div> </div> </div>  <div class="modal" id="password-modal"> <div class="modal-content" style="max-width: 400px;"> <span class="modal-close" onclick="closePasswordModal()">×</span> <div class="form-title">🔐 管理模式验证</div> <form id="password-form"> <div class="form-group"> <label>请输入密�?/label> <input type="password" id="admin-password" placeholder="请输入管理密�? required> </div> <div class="modal-buttons"> <button type="button" class="cancel-btn" onclick="closePasswordModal()">取消</button> <button type="submit" class="confirm-btn">确认</button> </div> </form> </div> </div>  <div class="back-btn-container"> <a href="index.html" class="back-btn">�?返回花札物语</a> </div> </div> <div class="toast" id="toast"></div> <script> let isAdmin = false; let deleteId = null; let currentImages = []; let editImages = []; let currentData = []; // 当前显示的数�? const STORAGE_KEY = 'dark_history_data'; const ADMIN_PASSWORD = '777'; // 可以在这里修改密�? // 加载数据 async function loadHistory() { const container = document.getElementById('history-list'); const addBtn = document.getElementById('add-btn'); container.innerHTML = ` <div class="loading-container"> <div class="spinner"></div> <div class="loading-text">数据加载�?..</div> </div> `; currentData = await loadData(); renderHistory(currentData); // 控制添加按钮显示 addBtn.style.display = isAdmin ? 'block' : 'none'; } // 移动项目 window.moveItem = function(index, direction) { const newIndex = index + direction; if (newIndex < 0 || newIndex >= currentData.length) { return; } // 交换位置 const temp = currentData[index]; currentData[index] = currentData[newIndex]; currentData[newIndex] = temp; // 重新渲染 renderHistory(currentData); } // 保存排序 window.saveSortOrder = async function() { const saveBtn = document.getElementById('saveSortBtn'); saveBtn.disabled = true; saveBtn.textContent = '保存�?..'; try { const ids = currentData.map(item => item.id); const response = await fetch('/api/dark-history/sort', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids }) }); const result = await response.json(); if (result.success) { showToast('�?排序保存成功�?); } else { showToast('�?保存失败，请重试'); } } catch (error) { console.error('保存排序失败:', error); showToast('�?网络错误，请重试'); } finally { saveBtn.disabled = false; saveBtn.textContent = '💾 保存排序'; } } // 从服务器加载数据 async function loadData() { try { const response = await fetch('/api/dark-history', { cache: 'no-store' }); return await response.json(); } catch (error) { console.error('加载数据失败:', error); return getDefaultData(); } } // 默认测试数据 function getDefaultData() { return [ { id: 1717362000000, protagonist: '测试用户', eventTime: '2024-06-03', images: [ 'https://pic1.imgdb.cn/item/6a2054f39ecef7401786f662.png' ], description: '这是一条测试数据，用于展示黑历史功能。点击下方图片可以查看大图！', uploader: '系统管理�?, timestamp: '2024/6/3 10:00:00' } ]; } // 保存数据到localStorage function saveData(data) { localStorage.setItem(STORAGE_KEY, JSON.stringify(data, null, 2)); } // 渲染历史列表 function renderHistory(historyList) { const container = document.getElementById('history-list'); if (historyList.length === 0) { container.innerHTML = ` <div class="empty-state"> <p>暂无黑历�?/p> <small>${isAdmin ? '快来添加第一条吧�? : ''}</small> </div> `; return; } container.innerHTML = historyList.map((item, index) => { // 兼容两种数据结构 let images = []; if (item.images && Array.isArray(item.images)) { images = item.images; } else if (item.screenshot) { images = [item.screenshot]; } // 根据图片数量调整布局 let gridLayout = ''; if (images.length === 1) { // 单张图片占满 gridLayout = ` <img loading="lazy" src="${images[0]}" alt="截图" style="width: 100%; height: 180px; object-fit: cover; border-radius: 12px; cursor: pointer;" onclick="openImageGallery(${JSON.stringify(images).replace(/"/g, '"')}, 0)"> `; } else if (images.length === 2) { // 两张图片并排 gridLayout = ` <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%;"> ${images.map((url, imgIndex) => ` <img loading="lazy" src="${url}" alt="截图 ${imgIndex + 1}" style="width: 100%; height: 120px; object-fit: cover; border-radius: 12px; cursor: pointer;" onclick="openImageGallery(${JSON.stringify(images).replace(/"/g, '"')}, ${imgIndex})"> `).join('')} </div> `; } else if (images.length >= 3) { // 三张及以上，九宫格风�? const showCount = Math.min(images.length, 9); gridLayout = ` <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%;"> ${images.slice(0, showCount).map((url, imgIndex) => { // 如果超过9张，最后一张显示数�? if (imgIndex === 8 && images.length > 9) { return ` <div style="position: relative; width: 100%; height: 80px; border-radius: 8px; overflow: hidden; cursor: pointer;" onclick="openImageGallery(${JSON.stringify(images).replace(/"/g, '"')}, ${imgIndex})"> <img loading="lazy" src="${url}" style="width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4);"> <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; font-weight: bold;"> +${images.length - 9} </div> </div> `; } else if (imgIndex === 3 && images.length === 4) { // 4张图时，�?张占2个位�? return ` <img loading="lazy" src="${url}" alt="截图 ${imgIndex + 1}" style="width: 100%; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; grid-column: span 2;" onclick="openImageGallery(${JSON.stringify(images).replace(/"/g, '"')}, ${imgIndex})"> `; } return ` <img loading="lazy" src="${url}" alt="截图 ${imgIndex + 1}" style="width: 100%; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer;" onclick="openImageGallery(${JSON.stringify(images).replace(/"/g, '"')}, ${imgIndex})"> `; }).join('')} </div> `; } return ` <div class="history-card" data-id="${item.id}" data-index="${index}"> ${isAdmin ? ` <div class="sort-buttons"> <button class="move-btn" onclick="moveItem(${index}, -1)" ${index === 0 ? 'disabled' : ''}>�?/button> <button class="move-btn" onclick="moveItem(${index}, 1)" ${index === historyList.length - 1 ? 'disabled' : ''}>�?/button> </div> ` : ''} <div class="history-image"> ${images.length > 0 ? gridLayout : ` <div style="width: 160px; height: 160px; background: rgba(255, 255, 255, 0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #888;"> 暂无截图 </div> `} </div> <div class="history-content"> <div class="history-protagonist">${escapeHtml(item.protagonist)}</div> <div class="history-description">${escapeHtml(item.description)}</div> ${images.length > 0 ? `<div style="font-size: 12px; color: #ff6b6b; margin-top: 8px;">📷 ${images.length} 张照�?/div>` : ''} ${isAdmin ? ` <div class="history-actions"> <button class="edit-btn" onclick="openEditModal(${item.id})">编辑</button> <button class="delete-btn" onclick="openDeleteModal(${item.id})">删除</button> </div> ` : ''} </div> </div> `; }).join(''); } // 转义HTML function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // 打开添加模态框 window.openAddModal = function() { if (!isAdmin) { showToast('�?需要管理权限！'); return; } currentImages = []; document.getElementById('preview-grid').innerHTML = ''; document.getElementById('history-form').reset(); document.getElementById('add-modal').style.display = 'flex'; }; // 关闭添加模态框 window.closeAddModal = function() { document.getElementById('add-modal').style.display = 'none'; currentImages = []; }; // 打开编辑模态框 window.openEditModal = async function(id) { if (!isAdmin) { showToast('�?需要管理权限！'); return; } const data = await loadData(); const item = data.find(h => h.id === id); if (item) { document.getElementById('edit-id').value = item.id; document.getElementById('edit-protagonist').value = item.protagonist; document.getElementById('edit-description').value = item.description; // 兼容两种数据结构 editImages = item.images && Array.isArray(item.images) ? [...item.images] : (item.screenshot ? [item.screenshot] : []); renderEditPreviewGrid(); document.getElementById('edit-modal').style.display = 'flex'; } }; // 关闭编辑模态框 window.closeEditModal = function() { document.getElementById('edit-modal').style.display = 'none'; editImages = []; }; // 打开删除模态框 window.openDeleteModal = function(id) { if (!isAdmin) { showToast('�?需要管理权限！'); return; } deleteId = id; document.getElementById('delete-modal').style.display = 'flex'; }; // 关闭删除模态框 window.closeDeleteModal = function() { deleteId = null; document.getElementById('delete-modal').style.display = 'none'; }; // 确认删除 window.confirmDelete = async function() { if (!isAdmin || !deleteId) return; const deleteBtn = document.querySelector('#delete-modal .delete-btn-modal'); deleteBtn.disabled = true; deleteBtn.textContent = '删除�?..'; try { const response = await fetch('/api/dark-history/' + deleteId, { method: 'DELETE' }); const result = await response.json(); if (result.success) { showToast('�?删除成功�?); closeDeleteModal(); loadHistory(); } else { showToast('�?删除失败'); } } catch (error) { showToast('�?网络错误'); } finally { deleteBtn.disabled = false; deleteBtn.textContent = '确认删除'; } }; let galleryImages = []; let galleryIndex = 0; // 打开图片画廊 window.openImageGallery = function(images, startIndex) { galleryImages = images; galleryIndex = startIndex; renderGallery(); document.getElementById('image-modal').style.display = 'flex'; }; // 渲染画廊 function renderGallery() { document.getElementById('modal-img').src = galleryImages[galleryIndex]; document.getElementById('gallery-count').textContent = `${galleryIndex + 1} / ${galleryImages.length}`; // 显示/隐藏左右按钮 document.getElementById('prev-btn').style.display = galleryIndex > 0 ? 'flex' : 'none'; document.getElementById('next-btn').style.display = galleryIndex < galleryImages.length - 1 ? 'flex' : 'none'; } // 上一�? window.prevImage = function() { if (galleryIndex > 0) { galleryIndex--; renderGallery(); } }; // 下一�? window.nextImage = function() { if (galleryIndex < galleryImages.length - 1) { galleryIndex++; renderGallery(); } }; // 关闭图片查看 window.closeImageModal = function() { document.getElementById('image-modal').style.display = 'none'; galleryImages = []; galleryIndex = 0; }; // 显示提示 function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 3000); } // 添加当前输入的图�? window.addCurrentImage = function() { const input = document.getElementById('image-url'); const url = input.value.trim(); if (url) { currentImages.push(url); renderPreviewGrid(); input.value = ''; showToast('�?图片已添�?); } else { showToast('�?请输入图片链�?); } }; // 渲染预览网格 function renderPreviewGrid() { const grid = document.getElementById('preview-grid'); grid.innerHTML = currentImages.map((url, index) => ` <div class="image-item"> <img src="${url}" loading="lazy"> <button class="remove-btn" onclick="removeImage(${index})">×</button> </div> `).join(''); } // 渲染编辑预览网格 function renderEditPreviewGrid() { const grid = document.getElementById('edit-preview-grid'); grid.innerHTML = editImages.map((url, index) => ` <div class="image-item"> <img src="${url}" loading="lazy"> <button class="remove-btn" onclick="removeEditImage(${index})">×</button> </div> `).join(''); } // 添加编辑表单的图�? window.addEditImage = function() { const input = document.getElementById('edit-image-url'); const url = input.value.trim(); if (url) { editImages.push(url); renderEditPreviewGrid(); input.value = ''; showToast('�?图片已添�?); } else { showToast('�?请输入图片链�?); } }; // 删除图片 window.removeImage = function(index) { currentImages.splice(index, 1); renderPreviewGrid(); }; window.removeEditImage = function(index) { editImages.splice(index, 1); renderEditPreviewGrid(); }; // 打开密码验证 window.openPasswordModal = function() { document.getElementById('admin-password').value = ''; document.getElementById('password-modal').style.display = 'flex'; }; // 关闭密码验证 window.closePasswordModal = function() { document.getElementById('password-modal').style.display = 'none'; }; // 键盘事件监听 document.addEventListener('keydown', function(e) { if (document.getElementById('image-modal').style.display === 'flex') { if (e.key === 'ArrowLeft') { prevImage(); } else if (e.key === 'ArrowRight') { nextImage(); } else if (e.key === 'Escape') { closeImageModal(); } } }); // 生成星星装饰 function createStars() { const container = document.getElementById('stars-container'); const starCount = 50; for (let i = 0; i < starCount; i++) { const star = document.createElement('div'); star.className = 'star'; star.style.left = Math.random() * 100 + 'vw'; star.style.top = Math.random() * 100 + 'vh'; star.style.width = (Math.random() * 3 + 1) + 'px'; star.style.height = star.style.width; star.style.animationDelay = Math.random() * 3 + 's'; star.style.animationDuration = (Math.random() * 2 + 2) + 's'; container.appendChild(star); } } // 监听事件 document.addEventListener('DOMContentLoaded', function() { createStars(); loadHistory(); // 管理模式切换 - 先弹出密码框 document.getElementById('admin-toggle').addEventListener('click', function() { if (isAdmin) { // 已经是管理员，直接退�? isAdmin = false; document.body.classList.remove('admin-mode'); this.classList.remove('admin-mode'); loadHistory(); showToast('👤 已退出管理模�?); } else { // 非管理员，弹出密码框 openPasswordModal(); } }); // 添加按钮 document.getElementById('add-btn').addEventListener('click', openAddModal); // 密码验证提交 document.getElementById('password-form').addEventListener('submit', function(e) { e.preventDefault(); const password = document.getElementById('admin-password').value; if (password === ADMIN_PASSWORD) { isAdmin = true; document.body.classList.add('admin-mode'); document.getElementById('admin-toggle').classList.add('admin-mode'); closePasswordModal(); loadHistory(); showToast('🎉 管理模式已开�?); } else { showToast('�?密码错误�?); } }); // 添加图片URL document.getElementById('image-url').addEventListener('keypress', function(e) { if (e.key === 'Enter') { const url = e.target.value.trim(); if (url) { currentImages.push(url); renderPreviewGrid(); e.target.value = ''; } } }); // 编辑图片URL document.getElementById('edit-image-url').addEventListener('keypress', function(e) { if (e.key === 'Enter') { const url = e.target.value.trim(); if (url) { editImages.push(url); renderEditPreviewGrid(); e.target.value = ''; } } }); // 提交表单 document.getElementById('history-form').addEventListener('submit', async function(e) { e.preventDefault(); if (!isAdmin) { showToast('�?需要管理权限！'); return; } const submitBtn = document.getElementById('submit-btn'); submitBtn.disabled = true; submitBtn.textContent = '上传�?..'; const newItem = { protagonist: document.getElementById('protagonist').value, eventTime: new Date().toISOString().split('T')[0], images: [...currentImages], screenshot: currentImages.length > 0 ? currentImages[0] : '', // 兼容旧数据结�? description: document.getElementById('description').value, uploader: '匿名用户' }; try { const response = await fetch('/api/dark-history', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newItem) }); const result = await response.json(); if (result.success) { showToast('�?上传成功�?); closeAddModal(); loadHistory(); } else { showToast('�?上传失败，请重试'); } } catch (error) { showToast('�?网络错误，请重试'); } finally { submitBtn.disabled = false; submitBtn.textContent = '确认上传'; } }); // 编辑表单 document.getElementById('edit-form').addEventListener('submit', async function(e) { e.preventDefault(); if (!isAdmin) { showToast('�?需要管理权限！'); return; } const id = parseInt(document.getElementById('edit-id').value); const editConfirmBtn = document.querySelector('#edit-modal .confirm-btn'); editConfirmBtn.disabled = true; editConfirmBtn.textContent = '保存�?..'; const updateItem = { protagonist: document.getElementById('edit-protagonist').value, images: [...editImages], screenshot: editImages.length > 0 ? editImages[0] : '', description: document.getElementById('edit-description').value }; try { const response = await fetch('/api/dark-history/' + id, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(updateItem) }); const result = await response.json(); if (result.success) { showToast('�?保存成功�?); closeEditModal(); loadHistory(); } else { showToast('�?保存失败，请重试'); } } catch (error) { showToast('�?网络错误，请重试'); } finally { editConfirmBtn.disabled = false; editConfirmBtn.textContent = '确认保存'; } }); // 点击模态框外部关闭 document.getElementById('image-modal').addEventListener('click', function(e) { if (e.target === this) closeImageModal(); }); document.getElementById('edit-modal').addEventListener('click', function(e) { if (e.target === this) closeEditModal(); }); document.getElementById('delete-modal').addEventListener('click', function(e) { if (e.target === this) closeDeleteModal(); }); document.getElementById('add-modal').addEventListener('click', function(e) { if (e.target === this) closeAddModal(); }); document.getElementById('password-modal').addEventListener('click', function(e) { if (e.target === this) closePasswordModal(); }); }); </script> <script src="footer.js"></script> </body> </html>