成员管理 - 实验室智能台账系�?/title> <link rel="stylesheet" href="/assets/styles/common.css"> </head> <body> <div id="app-header-container"></div> <div class="container" style="padding: 24px; max-width: 1200px; margin: 0 auto; padding-top: calc(var(--header-height, 64px) + 24px);">  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px;"> <div style="display: flex; gap: 10px; align-items: center;"> <button class="btn btn-primary" onclick="openAddModal()">�?添加成员</button> <button class="btn btn-secondary" onclick="showAddBatchModal()">📋 批量添加</button> </div> <div style="display: flex; gap: 10px; align-items: center;"> <input type="search" id="searchInput" class="search-input" style="min-width: 220px;" placeholder="🔍 搜索姓名、手机号..." oninput="handleSearch(this.value)"> <select id="roleFilter" onchange="handleSearch(document.getElementById('searchInput').value)" style="padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary);"> <option value="">全部角色</option> <option value="admin">�?管理�?/option> <option value="teacher">👨‍�?教师</option> <option value="student">👨‍�?学生</option> <option value="visitor">👤 访客</option> </select> </div> </div>  <div id="roleLegend" style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;"> <div style="display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary);"><span style="background: rgba(16,185,129,.15); color: #10b981; padding: 2px 8px; border-radius: 6px; font-size: 0.78rem;">管理�?/span> 全部权限</div> <div style="display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary);"><span style="background: rgba(59,130,246,.15); color: #3b82f6; padding: 2px 8px; border-radius: 6px; font-size: 0.78rem;">教师</span> 可预约、使用、查�?/div> <div style="display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary);"><span style="background: rgba(107,114,128,.15); color: #9ca3af; padding: 2px 8px; border-radius: 6px; font-size: 0.78rem;">学生</span> 可预约、使�?/div> <div style="display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary);"><span style="background: rgba(251,191,36,.15); color: #f59e0b; padding: 2px 8px; border-radius: 6px; font-size: 0.78rem;">访客</span> 仅查�?/div> </div>  <div id="memberList" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;"> <div style="grid-column: 1/-1; text-align: center; padding: 60px; color: var(--text-muted);"> <div style="font-size: 2rem; margin-bottom: 8px;">👥</div> <div>加载�?..</div> </div> </div> </div> <div id="app-footer-container"></div> <div id="app-toast-container"></div>  <div class="modal" id="memberModal"> <div class="modal-content" style="max-width: 560px;"> <div class="modal-header"> <h2 id="modalTitle">添加成员</h2> <button class="modal-close" onclick="closeModal('memberModal')">×</button> </div> <div class="modal-body"> <form id="memberForm"> <input type="hidden" id="memberId"> <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;"> <div class="form-group"> <label class="form-label">姓名 <span class="required">*</span></label> <input type="text" id="mName" class="form-input" required placeholder="真实姓名"> </div> <div class="form-group"> <label class="form-label">角色</label> <select id="mRole" class="form-select"> <option value="student">👨‍�?学生</option> <option value="teacher">👨‍�?教师</option> <option value="admin">�?管理�?/option> <option value="visitor">👤 访客</option> </select> </div> </div> <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;"> <div class="form-group"> <label class="form-label">手机�?/label> <input type="tel" id="mPhone" class="form-input" placeholder="11位手机号"> </div> <div class="form-group"> <label class="form-label">初始密码</label> <input type="text" id="mPassword" class="form-input" placeholder="留空则默�?88888888"> </div> </div> <div class="form-group" style="margin-bottom: 16px;"> <label class="form-label">研究方向 / 实验�?/label> <input type="text" id="mLab" class="form-input" placeholder="如：有机化学实验�?> </div> <div class="form-group"> <label class="form-label">备注</label> <textarea id="mNotes" class="form-textarea" rows="2" placeholder="其他备注信息..."></textarea> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('memberModal')">取消</button> <button class="btn btn-primary" onclick="saveMember()">保存</button> </div> </div> </div>  <div class="modal" id="batchModal"> <div class="modal-content" style="max-width: 600px;"> <div class="modal-header"> <h2>📋 批量添加成员</h2> <button class="modal-close" onclick="closeModal('batchModal')">×</button> </div> <div class="modal-body"> <p style="font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 16px;">每行一个成员，格式�?code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; font-size: 0.82rem;">姓名,手机�?角色</code>，示例：</p> <pre style="background: var(--bg-secondary); border-radius: 8px; padding: 12px; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 16px; overflow-x: auto;">张三,13800138001,student 李四,13800138002,teacher 王五,13800138003,admin</pre> <textarea id="batchInput" class="form-textarea" rows="8" placeholder="请输入批量数据，每行一个成�?.." style="font-family: monospace;"></textarea> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('batchModal')">取消</button> <button class="btn btn-primary" onclick="saveBatchMembers()">批量导入</button> </div> </div> </div>  <div class="modal" id="detailModal"> <div class="modal-content" style="max-width: 480px;"> <div class="modal-header"> <h2 id="detailTitle">成员详情</h2> <button class="modal-close" onclick="closeModal('detailModal')">×</button> </div> <div class="modal-body" id="detailBody">  </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('detailModal')">关闭</button> <button class="btn btn-danger" id="btnDisableMember" onclick="disableMember()">禁用</button> <button class="btn btn-primary" id="btnEditMember" onclick="editCurrentMember()">编辑</button> </div> </div> </div>  <div class="modal" id="resetPwdModal"> <div class="modal-content" style="max-width: 420px;"> <div class="modal-header"> <h2>🔑 找回密码</h2> <button class="modal-close" onclick="closeModal('resetPwdModal')">×</button> </div> <div class="modal-body" style="text-align: center; padding: 32px;"> <div style="font-size: 3rem; margin-bottom: 16px;">🔑</div> <p style="font-size: 1rem; font-weight: 600; margin-bottom: 8px;">验证码：<strong style="color: var(--accent-primary); font-size: 1.5rem;">888888</strong></p> <p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 8px;">测试环境专用验证�?/p> <p style="font-size: 0.82rem; color: var(--text-muted);">输入此验证码即可重置密码</p> <div style="margin-top: 24px;"> <input type="text" id="resetPhone" class="form-input" placeholder="请输入您的手机号" style="margin-bottom: 12px;"> <input type="text" id="resetCode" class="form-input" placeholder="请输入验证码 888888" style="margin-bottom: 12px;"> <input type="password" id="resetNewPwd" class="form-input" placeholder="设置新密码（留空默认 88888888�? style="margin-bottom: 12px;"> <button class="btn btn-primary" style="width: 100%;" onclick="doResetPassword()">确认重置</button> </div> </div> <div class="modal-footer" style="justify-content: center;"> <button class="btn btn-secondary" onclick="closeModal('resetPwdModal')">取消</button> </div> </div> </div> <script src="/core/auth/auth.js"></script> <script src="/core/auth/auth-service.js"></script> <script src="/core/storage.js"></script> <script src="/shared/components.js"></script> <script src="/shared/utils/utils.js"></script> <script src="member.js"></script> <style> .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.9rem; font-family: inherit; box-sizing: border-box; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent-primary); } .form-textarea { resize: vertical; } .form-group { margin-bottom: 16px; } .form-label { display: block; margin-bottom: 6px; font-size: 0.88rem; color: var(--text-secondary); } .form-row { margin-bottom: 16px; } .required { color: var(--accent-danger); } .btn-danger { background: var(--accent-danger); color: white; } .btn-danger:hover { opacity: 0.9; } .member-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; transition: all 0.2s; cursor: pointer; } .member-card:hover { border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .member-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: white; font-weight: 700; flex-shrink: 0; } .detail-info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color); } .detail-info-row:last-child { border-bottom: none; } .detail-info-label { font-size: 0.85rem; color: var(--text-secondary); } .detail-info-value { font-size: 0.9rem; color: var(--text-primary); font-weight: 500; } </style> <script> var _currentDetailMemberId = null; function openAddModal() { var m = document.getElementById('memberModal'); document.getElementById('modalTitle').textContent = '添加成员'; document.getElementById('memberForm').reset(); document.getElementById('memberId').value = ''; if (m) m.classList.add('active'); } function openEditModal(id, data) { var m = document.getElementById('memberModal'); document.getElementById('modalTitle').textContent = '编辑成员'; document.getElementById('memberId').value = id; document.getElementById('mName').value = data.name || ''; document.getElementById('mRole').value = data.role || 'student'; document.getElementById('mPhone').value = data.phone || ''; document.getElementById('mLab').value = data.lab || ''; document.getElementById('mNotes').value = data.notes || ''; document.getElementById('mPassword').value = ''; if (m) m.classList.add('active'); } function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); } function showAddBatchModal() { var m = document.getElementById('batchModal'); document.getElementById('batchInput').value = ''; if (m) m.classList.add('active'); } function showMemberDetail(id, data) { _currentDetailMemberId = id; var m = document.getElementById('detailModal'); var body = document.getElementById('detailBody'); var roleMap = { admin: { text: '�?管理�?, cls: 'role-admin' }, teacher: { text: '👨‍�?教师', cls: 'role-teacher' }, student: { text: '👨‍�?学生', cls: 'role-student' }, visitor: { text: '👤 访客', cls: 'role-guest' } }; var roleInfo = roleMap[data.role] || roleMap.visitor; var initials = (data.name || 'U').substring(0, 2); body.innerHTML = '<div style="text-align: center; margin-bottom: 20px;">' + '<div style="width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: white; font-weight: 700; margin: 0 auto 12px;">' + initials + '</div>' + '<div style="font-size: 1.3rem; font-weight: 600;">' + (data.name || '-') + '</div>' + '<div style="margin-top: 6px;"><span class="user-role ' + roleInfo.cls + '" style="padding: 3px 10px; border-radius: 10px; font-size: 0.82rem;">' + roleInfo.text + '</span></div>' + '</div>' + '<div class="detail-info-row"><span class="detail-info-label">手机�?/span><span class="detail-info-value">' + (data.phone || '-') + '</span></div>' + '<div class="detail-info-row"><span class="detail-info-label">研究方向</span><span class="detail-info-value">' + (data.lab || '-') + '</span></div>' + '<div class="detail-info-row"><span class="detail-info-label">备注</span><span class="detail-info-value">' + (data.notes || '-') + '</span></div>' + '<div class="detail-info-row"><span class="detail-info-label">注册时间</span><span class="detail-info-value">' + (data.createdAt ? new Date(data.createdAt).toLocaleString('zh-CN') : '-') + '</span></div>'; if (m) m.classList.add('active'); } function editCurrentMember() { closeModal('detailModal'); if (_currentDetailMemberId && typeof getMemberById === 'function') { var data = getMemberById(_currentDetailMemberId); if (data) openEditModal(_currentDetailMemberId, data); } } function disableMember() { if (_currentDetailMemberId && typeof deleteMember === 'function') { if (confirm('确定要删除此成员吗？')) { deleteMember(_currentDetailMemberId); closeModal('detailModal'); } } } function handleSearch(q) { if (typeof filterMembers === 'function') { var role = document.getElementById('roleFilter') ? document.getElementById('roleFilter').value : ''; filterMembers(q, role); } } function doResetPassword() { var phone = document.getElementById('resetPhone').value.trim(); var code = document.getElementById('resetCode').value.trim(); var newPwd = document.getElementById('resetNewPwd').value || '88888888'; if (code !== '888888') { toastError('验证码错�?); return; } if (typeof resetMemberPassword === 'function') { resetMemberPassword(phone, newPwd); closeModal('resetPwdModal'); } else { toastSuccess('密码已重置为: ' + newPwd); closeModal('resetPwdModal'); } } // ===== 初始�?===== document.addEventListener('DOMContentLoaded', async function() { await loadStandardLayout(); if (typeof initUserInfo === 'function') initUserInfo(); if (typeof loadMembers === 'function') loadMembers(); window.addEventListener('storage', function(e) { if (e.key === 'currentUser' && typeof initUserInfo === 'function') initUserInfo(); }); }); </script> </body> </html>