搴т綅鎺掑竷鍣?/title> <style> *{box-sizing:border-box} html,body{min-height:100%} body{margin:0;background:linear-gradient(145deg,#eef6ff,#f8fbff);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif} button,input{font:inherit} .page{min-height:100vh;display:grid;place-items:center;padding:10px} .plan-shell{width:min(540px,calc(100vw - 20px));aspect-ratio:540/1045;position:relative} .plan{position:absolute;left:0;top:0;width:540px;height:1045px;transform-origin:top left;background:#fff;overflow:hidden;box-shadow:0 20px 55px rgba(40,75,120,.12)} .wall{position:absolute;z-index:10;background:#243b67} .wall-left{left:0;top:0;width:27px;height:1045px} .wall-top{left:0;top:0;width:538px;height:27px} .wall-middle{left:0;top:504px;width:515px;height:27px} .wall-bottom{left:0;top:1018px;width:538px;height:27px} .desk{position:absolute;left:58px;width:462px;background:#92c8f4} .desk.double{height:216px} .desk.single{left:60px;width:463px;height:107px} .double.top{top:90px} .single.top{top:360px} .double.bottom{top:584px} .single.bottom{top:853px} .divider{position:absolute;z-index:2;background:#fff;pointer-events:none} .double .divider.v1{left:114px;top:0;width:3px;height:216px} .double .divider.v2{left:230px;top:0;width:3px;height:216px} .double .divider.v3{left:346px;top:0;width:3px;height:216px} .double .divider.h{left:0;top:106px;width:462px;height:3px} .single .divider.v1{left:114px;top:0;width:3px;height:107px} .single .divider.v2{left:231px;top:0;width:3px;height:107px} .single .divider.v3{left:347px;top:0;width:3px;height:107px} .notch{position:absolute;z-index:3;width:152px;height:66px;background:#fff} .notch.left{left:39px} .notch.right{left:272px} .double .notch.upper{top:0;border-radius:0 0 16px 16px} .double .notch.lower{bottom:0;border-radius:16px 16px 0 0} .single .notch{bottom:0;border-radius:16px 16px 0 0} .seat{position:absolute;z-index:5;width:56px;height:56px;padding:5px;border:3px solid #fff;border-radius:50%;background:linear-gradient(145deg,#7567e8,#4e67d8);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:700;line-height:1.08;letter-spacing:0;cursor:pointer;overflow:hidden;white-space:normal;word-break:break-all;box-shadow:0 5px 13px rgba(72,86,190,.3);transition:transform .14s ease,filter .14s ease} .seat:empty:after{content:"+";font-size:20px;font-weight:400;color:rgba(255,255,255,.9)} .seat-hole{border-color:transparent;background:transparent;box-shadow:none;cursor:default;pointer-events:none} .seat-hole:empty:after{content:none} .seat:hover{transform:scale(1.08);filter:brightness(1.06)} .seat:active{transform:scale(.95)} .notch .seat:nth-child(1){left:5px} .notch .seat:nth-child(2){right:5px} .double .upper .seat{top:3px} .double .lower .seat{top:6px} .single .seat{top:6px} .shade{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:rgba(25,45,85,.2);backdrop-filter:blur(5px)} .form{position:relative;width:min(290px,100%);padding:30px 18px 18px;border-radius:12px;background:#fff;box-shadow:0 22px 55px rgba(34,58,105,.22)} .form input{width:100%;padding:12px;border:1px solid #c7d5e8;border-radius:7px;outline:0;color:#243b67;font-size:15px} .form input:focus{border-color:#6571e0;box-shadow:0 0 0 4px rgba(101,113,224,.11)} .ok{width:100%;margin-top:10px;padding:11px;border:0;border-radius:7px;background:#5e6bdd;color:#fff;font-weight:700;cursor:pointer} .ok:disabled{opacity:.5} .close{position:absolute;right:7px;top:5px;width:28px;height:28px;border:0;background:transparent;color:#8190aa;font-size:22px;cursor:pointer} .hidden{display:none} @media(prefers-reduced-motion:reduce){*{transition:none!important}} </style> <style> .random-btn{position:fixed;z-index:15;right:18px;bottom:18px;border:0;border-radius:999px;padding:11px 17px;background:#243b67;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(36,59,103,.24)} .random-form{position:relative;width:min(380px,100%);padding:28px 20px 20px;border-radius:14px;background:#fff;box-shadow:0 22px 55px rgba(34,58,105,.22)} .random-form h2{margin:0 0 7px;color:#243b67;font-size:18px} .random-form p{margin:0 0 12px;color:#8190aa;font-size:11px;line-height:1.55} .random-form textarea{width:100%;min-height:170px;resize:vertical;padding:12px;border:1px solid #c7d5e8;border-radius:8px;outline:0;color:#243b67;line-height:1.6;font:inherit} .random-form textarea:focus{border-color:#6571e0;box-shadow:0 0 0 4px rgba(101,113,224,.11)} .random-error{min-height:18px;margin-top:6px;color:#d34b62;font-size:11px} .random-form .ok{margin-top:4px} </style> </head> <body> <main class="page"> <div class="plan-shell" id="shell"> <div class="plan" id="plan"> <div class="wall wall-left"></div> <div class="wall wall-top"></div> <div class="wall wall-middle"></div> <div class="wall wall-bottom"></div> <div id="desks"></div> </div> </div> </main> <button type="button" class="random-btn" id="randomBtn">闅忔満鎺掍綅</button> <div class="shade hidden" id="shade"> <form class="form" id="form"> <button type="button" class="close" id="close" aria-label="鍏抽棴">脳</button> <input id="name" maxlength="8" placeholder="璇疯緭鍏ュ鍚?> <button class="ok" id="ok">纭畾</button> </form> </div> <div class="shade hidden" id="randomShade"> <form class="random-form" id="randomForm"> <button type="button" class="close" id="randomClose" aria-label="鍏抽棴">脳</button> <h2>闅忔満鎺掍綅</h2> <p>姣忚鍙娇鐢ㄩ€楀彿鎴栨崲琛屽垎闅斿鍚嶏紝鎸夊綋鍓嶅彲鐢ㄥ骇浣嶆暟鎺掑骇銆?/p> <textarea id="listInput" placeholder="寮犱笁鏉庡洓鐜嬩簲"></textarea> <div class="random-error" id="randomError"></div> <button class="ok">寮€濮嬮殢鏈烘帓浣?/button> </form> </div> <script> const shell=document.getElementById('shell'); const plan=document.getElementById('plan'); const desks=document.getElementById('desks'); const shade=document.getElementById('shade'); const nameInput=document.getElementById('name'); const ok=document.getElementById('ok'); let names = {}; let current = 0; const deletedSeats = new Set([9]); const isActiveSeat = id => !deletedSeats.has(id); const activeSeatIds = () => Array.from({length: 24}, (_, i) => i + 1).filter(isActiveSeat); const seatButton = id => { const b = document.createElement('button'); b.type = 'button'; b.className = 'seat'; b.textContent = names[id] || ''; b.title = names[id] || '鐐瑰嚮缂栬緫濮撳悕'; b.setAttribute('aria-label', names[id] || '鐐瑰嚮缂栬緫濮撳悕'); b.onclick = () => { current = id; nameInput.value = names[id] || ''; shade.classList.remove('hidden'); setTimeout(() => nameInput.focus(), 0); }; return b; }; const emptySeat = () => { const b = document.createElement('span'); b.className = 'seat seat-hole'; return b; }; function notch(classes, ids) { const n = document.createElement('div'); n.className = 'notch ' + classes; ids.forEach(id => { n.append(isActiveSeat(id) ? seatButton(id) : emptySeat()); }); return n; } function doubleDesk(classes, start) { const d = document.createElement('div'); d.className = 'desk double ' + classes; d.innerHTML = '<i class="divider v1"></i><i class="divider v2"></i><i class="divider v3"></i><i class="divider h"></i>'; d.append( notch('left upper', [start, start + 1]), notch('right upper', [start + 2, start + 3]), notch('left lower', [start + 4, start + 5]), notch('right lower', [start + 6, start + 7]) ); return d; } function singleDesk(classes, start) { const d = document.createElement('div'); d.className = 'desk single ' + classes; d.innerHTML = '<i class="divider v1"></i><i class="divider v2"></i><i class="divider v3"></i>'; d.append( notch('left', [start, start + 1]), notch('right', [start + 2, start + 3]) ); return d; } function draw() { desks.innerHTML = ''; desks.append( doubleDesk('top', 1), singleDesk('top', 9), doubleDesk('bottom', 13), singleDesk('bottom', 21) ); } function fit() { const scale = shell.clientWidth / 540; plan.style.transform = `scale(${scale})`; shell.style.height = 1045 * scale + 'px'; } async function refresh() { try { const response = await fetch('/api/seats', { cache: 'no-store' }); if (!response.ok) return; const data = await response.json(); names = Object.fromEntries( data.seats .filter(seat => isActiveSeat(seat.id)) .map(seat => [seat.id, seat.name]) ); draw(); } catch {} } document.getElementById('form').onsubmit = async e => { e.preventDefault(); if (!current) return; const value = nameInput.value.trim(); ok.disabled = true; try { const response = await fetch( `/api/seats/${current}`, value ? { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: value }) } : { method: 'DELETE' } ); if (!response.ok) return; if (value) names[current] = value; else delete names[current]; shade.classList.add('hidden'); draw(); } finally { ok.disabled = false; } }; document.getElementById('close').onclick = () => shade.classList.add('hidden'); shade.onmousedown = e => { if (e.target === shade) shade.classList.add('hidden'); }; window.addEventListener('resize', fit); draw(); fit(); refresh(); setInterval(refresh, 10000); </script> <script> const rosterKey = 'seat-random-roster-v1'; const randomShade = document.getElementById('randomShade'); const listInput = document.getElementById('listInput'); const randomError = document.getElementById('randomError'); document.getElementById('randomBtn').onclick = () => { let roster = []; try { roster = JSON.parse(localStorage.getItem(rosterKey) || '[]'); } catch {} Object.values(names).filter(Boolean).forEach(person => { if (!roster.includes(person)) roster.push(person); }); localStorage.setItem(rosterKey, JSON.stringify(roster)); listInput.value = roster.join('\n'); randomError.textContent = ''; randomShade.classList.remove('hidden'); setTimeout(() => listInput.focus(), 0); }; document.getElementById('randomClose').onclick = () => randomShade.classList.add('hidden'); randomShade.onmousedown = e => { if (e.target === randomShade) randomShade.classList.add('hidden'); }; document.getElementById('randomForm').onsubmit = async e => { e.preventDefault(); const roster = listInput.value .split(/[,\n]/) .map(v => v.trim()) .filter(Boolean); const seatIds = activeSeatIds(); if (roster.length > seatIds.length) { randomError.textContent = '名单人数最多 ' + seatIds.length + ' 人'; return; } localStorage.setItem(rosterKey, JSON.stringify(roster)); const shuffled = [...roster]; for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; } const submitButton = e.currentTarget.querySelector('.ok'); submitButton.disabled = true; try { const results = await Promise.all( seatIds.map((seatId, index) => { const person = shuffled[index]; return fetch( `/api/seats/${seatId}`, person ? { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: person }) } : { method: 'DELETE' } ); }) ); if (results.some(response => !response.ok)) { randomError.textContent = 'Save failed, please retry'; return; } names = {}; seatIds.forEach((seatId, index) => { if (shuffled[index]) names[seatId] = shuffled[index]; }); randomShade.classList.add('hidden'); draw(); } finally { submitButton.disabled = false; } }; </script> </body> </html>