迁移房间后台表单事件

This commit is contained in:
2026-04-25 13:25:27 +08:00
parent 4751a5578e
commit 4815d201f6
3 changed files with 96 additions and 12 deletions
+89
View File
@@ -0,0 +1,89 @@
// 房间后台管理页事件代理,替代 Blade 内联显示/隐藏和删除确认逻辑。
let adminRoomControlsBound = false;
/**
* 读取新增房间表单容器。
*
* @returns {HTMLElement|null}
*/
function getCreateRoomForm() {
const formPanel = document.getElementById("create-room-form");
return formPanel instanceof HTMLElement ? formPanel : null;
}
/**
* 切换新增房间表单显示状态。
*
* @returns {void}
*/
function toggleCreateRoomForm() {
getCreateRoomForm()?.classList.toggle("hidden");
}
/**
* 关闭新增房间表单。
*
* @returns {void}
*/
function closeCreateRoomForm() {
getCreateRoomForm()?.classList.add("hidden");
}
/**
* 校验错误回显时自动展开新增房间表单。
*
* @returns {void}
*/
function openCreateRoomFormWhenInvalid() {
const formPanel = getCreateRoomForm();
if (formPanel?.hasAttribute("data-room-create-open")) {
formPanel.classList.remove("hidden");
}
}
/**
* 绑定房间管理页操作。
*
* @returns {void}
*/
export function bindAdminRoomControls() {
if (adminRoomControlsBound || typeof document === "undefined") {
return;
}
adminRoomControlsBound = true;
openCreateRoomFormWhenInvalid();
document.addEventListener("click", (event) => {
if (!(event.target instanceof Element)) {
return;
}
const toggleButton = event.target.closest("[data-room-create-toggle]");
if (toggleButton) {
event.preventDefault();
toggleCreateRoomForm();
return;
}
const closeButton = event.target.closest("[data-room-create-close]");
if (closeButton) {
event.preventDefault();
closeCreateRoomForm();
}
});
document.addEventListener("submit", (event) => {
if (!(event.target instanceof HTMLFormElement)) {
return;
}
const confirmMessage = event.target.getAttribute("data-room-delete-confirm");
if (confirmMessage && !window.confirm(confirmMessage)) {
event.preventDefault();
}
});
}
+2
View File
@@ -2,10 +2,12 @@ import './bootstrap';
import { bindAdminAutoactControls } from './admin/autoact.js';
import { bindAdminFishingEventsControls } from './admin/fishing-events.js';
import { bindAdminGameConfigControls } from './admin/game-configs.js';
import { bindAdminRoomControls } from './admin/rooms.js';
import { bindAdminSignInRulesControls } from './admin/sign-in-rules.js';
// 后台共用入口只注册轻量事件代理,具体页面通过 data-* 属性决定是否响应。
bindAdminAutoactControls();
bindAdminFishingEventsControls();
bindAdminGameConfigControls();
bindAdminRoomControls();
bindAdminSignInRulesControls();
+5 -12
View File
@@ -11,7 +11,7 @@
</div>
{{-- 新增房间按钮 --}}
@if (auth()->id() === 1)
<button onclick="document.getElementById('create-room-form').classList.toggle('hidden')"
<button type="button" data-room-create-toggle
class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-bold hover:bg-indigo-700 transition shadow-sm">
+ 新增房间
</button>
@@ -20,7 +20,8 @@
{{-- 新增房间表单(默认隐藏) --}}
@if (auth()->id() === 1)
<div id="create-room-form" class="hidden border-b border-gray-200 bg-indigo-50 p-6">
<div id="create-room-form" class="hidden border-b border-gray-200 bg-indigo-50 p-6"
@if ($errors->any()) data-room-create-open @endif>
<h3 class="text-sm font-bold text-indigo-800 mb-4"> 创建新房间</h3>
<form action="{{ route('admin.rooms.store') }}" method="POST">
@csrf
@@ -67,7 +68,7 @@
class="px-5 py-2 bg-indigo-600 text-white rounded-md font-bold hover:bg-indigo-700 shadow-sm transition text-sm">
确认创建
</button>
<button type="button" onclick="document.getElementById('create-room-form').classList.add('hidden')"
<button type="button" data-room-create-close
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md font-bold hover:bg-gray-300 transition text-sm">
取消
</button>
@@ -75,14 +76,6 @@
</form>
</div>
@endif
{{-- 新增房间表单展开时自动滚到顶部校验错误 --}}
@if ($errors->any())
<script>
document.getElementById('create-room-form').classList.remove('hidden');
</script>
@endif
<div class="p-6">
<div class="space-y-4">
@foreach ($rooms as $room)
@@ -169,7 +162,7 @@
@unless ($room->room_keep)
<form action="{{ route('admin.rooms.destroy', $room->id) }}" method="POST"
class="inline"
onsubmit="return confirm('确定要删除房间「{{ $room->room_name }}」吗?此操作不可撤销!')">
data-room-delete-confirm="确定要删除房间「{{ $room->room_name }}」吗?此操作不可撤销!">
@csrf
@method('DELETE')
<button type="submit"