迁移用户编辑弹窗脚本

2026-04-25 13:39:08 +08:00
parent 35cbfedeb7
commit e876e76ec7
3 changed files with 74 additions and 53 deletions
@@ -0,0 +1,73 @@
+// 用户后台编辑 Alpine 组件，负责编辑弹窗提交、状态提示和保存中状态。
+
+/**
+ * 读取 CSRF 令牌，供用户编辑 AJAX 请求使用。
+ *
+ * @returns {string}
+ */
+function getCsrfToken() {
+    return document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ?? "";
+}
+
+/**
+ * 注册用户编辑弹窗组件。
+ *
+ * @returns {void}
+ */
+function registerUserEditorComponent() {
+    document.addEventListener("alpine:init", () => {
+        window.Alpine.data("userEditor", () => ({
+            showEditModal: false,
+            editingUser: {},
+            editToast: false,
+            editToastOk: true,
+            editToastMsg: "",
+            editSaving: false,
+
+            /**
+             * 提交用户编辑表单，并用弹窗内提示反馈保存结果。
+             *
+             * @param {HTMLFormElement} formEl
+             * @returns {Promise<void>}
+             */
+            async submitEditUser(formEl) {
+                this.editSaving = true;
+                this.editToast = false;
+
+                const formData = new FormData(formEl);
+                formData.append("_method", "PUT");
+
+                try {
+                    const response = await fetch(this.editingUser.requestUrl, {
+                        method: "POST",
+                        headers: {
+                            Accept: "application/json",
+                            "X-CSRF-TOKEN": getCsrfToken(),
+                        },
+                        body: formData,
+                    });
+                    const json = await response.json();
+
+                    this.editToastOk = json.status === "success";
+                    this.editToastMsg = json.message || (json.status === "success" ? "保存成功！" : "保存失败");
+                    this.editToast = true;
+
+                    if (json.status === "success") {
+                        window.setTimeout(() => {
+                            this.showEditModal = false;
+                        }, 1500);
+                    }
+                } catch (error) {
+                    this.editToastOk = false;
+                    this.editToastMsg = "网络请求异常，请检查连接后重试。";
+                    this.editToast = true;
+                    console.error("Edit User Request Failed:", error);
+                } finally {
+                    this.editSaving = false;
+                }
+            },
+        }));
+    });
+}
+
+registerUserEditorComponent();