From aa9a9318f5f963917a10f2682ff5b9e3ede70d1d Mon Sep 17 00:00:00 2001
From: lkddi <lkddi@163.com>
Date: Fri, 27 Feb 2026 16:47:03 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=9A=E5=B0=86=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E7=BC=96=E8=BE=91=E7=94=A8=E6=88=B7=20AJAX=20?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=96=B9=E6=B3=95=E7=A7=BB=E5=85=A5=20Alpine?=
 =?UTF-8?q?=20data=20=E7=BB=84=E4=BB=B6=E5=86=85=E9=83=A8=EF=BC=8C?=
 =?UTF-8?q?=E5=BD=BB=E5=BA=95=E8=A7=A3=E5=86=B3=E4=BD=9C=E7=94=A8=E5=9F=9F?=
 =?UTF-8?q?=E5=92=8C=E6=95=B0=E6=8D=AE=E8=8E=B7=E5=8F=96=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/views/admin/users/index.blade.php | 89 +++++++++++----------
 1 file changed, 48 insertions(+), 41 deletions(-)

diff --git a/resources/views/admin/users/index.blade.php b/resources/views/admin/users/index.blade.php
index 91cf82b..4e1225d 100644
--- a/resources/views/admin/users/index.blade.php
+++ b/resources/views/admin/users/index.blade.php
@@ -8,7 +8,7 @@
         // 管理员级别 = 最高等级 + 1，后台编辑最高可设到管理员级别
         $adminLevel = (int) \App\Models\Sysparam::getValue('maxlevel', '15') + 1;
     @endphp
-    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-6" x-data="{ showEditModal: false, editingUser: {}, adminLevel: {{ $adminLevel }}, editToast: false, editToastOk: true, editToastMsg: '', editSaving: false }">
+    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-6" x-data="userEditor()">
         <div class="p-6 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
             <form action="{{ route('admin.users.index') }}" method="GET" class="flex gap-2">
                 <input type="text" name="username" value="{{ request('username') }}" placeholder="搜索用户名..."
@@ -168,7 +168,7 @@
                         class="mb-4 px-4 py-2 border-l-4 rounded text-sm font-bold" x-text="editToastMsg">
                     </div>
 
-                    <form @submit.prevent="submitEditUser($el, $data)" method="POST">
+                    <form @submit.prevent="submitEditUser($el)" method="POST">
                         @csrf @method('PUT')
 
                         <div class="grid grid-cols-2 gap-4">
@@ -281,50 +281,57 @@
     </div>
 
     <script>
-        /**
-         * 用户编辑弹窗 AJAX 提交
-         * 避免传统表单导致 302 重定向，改为 fetch 就地显示结果
-         * @param {HTMLFormElement} form Alpine $el（表单元素）
-         * @param {object}          data Alpine $data（组件数据，直接传入避免 querySelector 查找失败）
-         */
-        async function submitEditUser(form, data) {
-            data.editSaving = true;
-            data.editToast = false;
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('userEditor', () => ({
+                showEditModal: false,
+                editingUser: {},
+                adminLevel: {{ $adminLevel }},
+                editToast: false,
+                editToastOk: true,
+                editToastMsg: '',
+                editSaving: false,
 
-            const formEl = form.querySelector('form') ?? form;
-            const formData = new FormData(formEl);
-            // Laravel 路由为 PUT，fetch 需通过 _method 伪造方法
-            formData.append('_method', 'PUT');
+                async submitEditUser(formEl) {
+                    this.editSaving = true;
+                    this.editToast = false;
 
-            try {
-                const res = await fetch(data.editingUser.requestUrl, {
-                    method: 'POST',
-                    headers: {
-                        'Accept': 'application/json',
-                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
-                    },
-                    body: formData,
-                });
-                const json = await res.json();
+                    const formData = new FormData(formEl);
+                    formData.append('_method', 'PUT'); // 必须带有伪造方法给 Laravel
 
-                data.editToastOk = json.status === 'success';
-                data.editToastMsg = json.message || (json.status === 'success' ? '保存成功！' : '保存失败');
-                data.editToast = true;
+                    try {
+                        const res = await fetch(this.editingUser.requestUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Accept': 'application/json',
+                                'X-CSRF-TOKEN': document.querySelector(
+                                        'meta[name="csrf-token"]')
+                                    .content,
+                            },
+                            body: formData,
+                        });
+                        const json = await res.json();
 
-                // 成功后 1.5 秒关闭弹窗
-                if (json.status === 'success') {
-                    setTimeout(() => {
-                        data.showEditModal = false;
-                    }, 1500);
+                        this.editToastOk = json.status === 'success';
+                        this.editToastMsg = json.message || (json.status === 'success' ? '保存成功！' :
+                            '保存失败');
+                        this.editToast = true;
+
+                        if (json.status === 'success') {
+                            setTimeout(() => {
+                                this.showEditModal = false;
+                            }, 1500);
+                        }
+                    } catch (e) {
+                        this.editToastOk = false;
+                        this.editToastMsg = '网络请求异常，请检查连接后重试。';
+                        this.editToast = true;
+                        console.error('Edit User Request Failed:', e); // 输出详细报错方便调试
+                    }
+
+                    this.editSaving = false;
                 }
-            } catch (e) {
-                data.editToastOk = false;
-                data.editToastMsg = '网络异常，请检查连接后重试。';
-                data.editToast = true;
-            }
-
-            data.editSaving = false;
-        }
+            }));
+        });
     </script>
 
 @endsection