From 6195508481b4209aff7573f59a603ac5ee6cb07c Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Fri, 30 Oct 2026 16:42:56 +0800
Subject: [PATCH] feat(admin): move message compose into a header-button dialog

Replace the inline <details> compose card on users.php?page=aksrt_messages
with a primary header button that opens a native <dialog>. NativeUi::header()
gains dialog-type actions via NativeUi::button_dialog(). The dialog reopens
automatically after a failed send.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 assets/css/admin/messages.css           | 71 +++++++++++++++++++++++--
 assets/js/admin-messages.js             | 40 ++++++++++++++
 src/Admin/Native/NativeUi.php           | 16 +++++-
 src/Admin/Native/UsersMenusMessages.php | 57 +++++++++++++++-----
 4 files changed, 163 insertions(+), 21 deletions(-)
 create mode 100644 assets/js/admin-messages.js

diff --git a/assets/css/admin/messages.css b/assets/css/admin/messages.css
index 5a5e0c3a..7aa7f846 100644
--- a/assets/css/admin/messages.css
+++ b/assets/css/admin/messages.css
@@ -1,16 +1,77 @@
 /* 消息管理（users.php?page=aksrt_messages）——仅本页入队。
- * 页面外壳 / 概览 / 折叠卡 / 表单栅格 / 筛选条 / 空状态均走 native-ui.css 的共享类，
- * 本文件只保留消息列表专属样式：收件人模式切换、类型徽章、读取状态、用户单元格、列宽。 */
+ * 页面外壳 / 概览 / 表单栅格 / 筛选条 / 空状态均走 native-ui.css 的共享类，
+ * 本文件只保留本页专属样式：发送弹窗、收件人模式切换、类型徽章、读取状态、用户单元格、列宽。 */
 
 .aksrt-messages-admin__muted { color: var(--an-muted); }
 .aksrt-messages-admin__sub { margin-top: 3px; color: var(--an-muted); font-size: 12px; }
 .aksrt-messages-admin__sub code { padding: 0 4px; font-size: 12px; background: var(--an-bg-soft); }
 
-/* ---- 代发：收件人模式切换（纯 CSS，无 JS 时按所选模式显隐字段） ---- */
+/* ---- 页头按钮：图标与文字居中对齐（<a> 与 <button> 一致） ---- */
+.aksrt-messages-admin .aksrt-native-header__actions .button { display: inline-flex; align-items: center; gap: 4px; }
+.aksrt-messages-admin .aksrt-native-header__actions .button .dashicons { margin: 0; line-height: 1; vertical-align: middle; }
+
+/* ---- 发送系统消息弹窗 ---- */
+.aksrt-msg-dialog {
+	width: min(640px, calc(100vw - 32px));
+	max-height: calc(100vh - 64px);
+	padding: 0;
+	color: var(--an-text-2);
+	background: var(--an-card);
+	border: 0;
+	border-radius: var(--an-radius);
+	box-shadow: 0 12px 48px rgba(15, 23, 42, .18);
+}
+.aksrt-msg-dialog::backdrop { background: rgba(15, 23, 42, .45); }
+.aksrt-msg-dialog__form { display: flex; flex-direction: column; max-height: inherit; margin: 0; }
+.aksrt-msg-dialog__head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 16px 20px;
+	border-bottom: 1px solid var(--an-border-soft);
+}
+.aksrt-msg-dialog .aksrt-msg-dialog__title {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0;
+	color: var(--an-text);
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 1.4;
+}
+.aksrt-msg-dialog__title .dashicons { color: var(--an-primary); }
+.aksrt-msg-dialog__close {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	padding: 0;
+	color: var(--an-muted);
+	background: transparent;
+	border: 0;
+	border-radius: var(--an-radius-sm);
+	cursor: pointer;
+}
+.aksrt-msg-dialog__close:hover,
+.aksrt-msg-dialog__close:focus-visible { color: var(--an-text); background: var(--an-bg-soft); }
+.aksrt-msg-dialog__body { padding: 18px 20px; overflow-y: auto; }
+.aksrt-msg-dialog__note { margin: 14px 0 0; font-size: 12px; }
+.aksrt-msg-dialog__foot {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+	padding: 14px 20px;
+	border-top: 1px solid var(--an-border-soft);
+}
+
+/* ---- 代发：收件人模式切换（纯 CSS，按所选模式显隐字段） ---- */
 .aksrt-messages-admin__modes { display: flex; gap: 16px; margin: 0 0 12px; padding: 0; border: 0; }
 .aksrt-messages-admin__modes legend { float: left; margin-right: 8px; font-weight: 600; }
-.aksrt-messages-admin__compose form:has(input[name="recipient_mode"][value="users"]:checked) .is-role,
-.aksrt-messages-admin__compose form:has(input[name="recipient_mode"][value="role"]:checked) .is-users { display: none; }
+.aksrt-messages-admin__compose:has(input[name="recipient_mode"][value="users"]:checked) .is-role,
+.aksrt-messages-admin__compose:has(input[name="recipient_mode"][value="role"]:checked) .is-users { display: none; }
 
 /* ---- 列表 ---- */
 .aksrt-messages-admin__danger.button { color: var(--an-danger); border-color: var(--an-danger); }
diff --git a/assets/js/admin-messages.js b/assets/js/admin-messages.js
new file mode 100644
index 00000000..bc953673
--- /dev/null
+++ b/assets/js/admin-messages.js
@@ -0,0 +1,40 @@
+/**
+ * 消息管理后台页（users.php?page=aksrt_messages）的「发送系统消息」弹窗。
+ * - 页头按钮 [data-aksrt-dialog-open] 打开对应 <dialog>；
+ * - 关闭按钮 / 点击遮罩关闭；发送失败回跳时（data-aksrt-dialog-autoopen）自动打开；
+ * - 提交后禁用发送按钮防重复提交。
+ * 标记由 src/Admin/Native/UsersMenusMessages.php 与 NativeUi::button_dialog() 输出。
+ */
+(function () {
+  'use strict';
+
+  document.querySelectorAll('[data-aksrt-dialog-open]').forEach(function (button) {
+    var dialog = document.getElementById(button.getAttribute('data-aksrt-dialog-open'));
+    if (!dialog || typeof dialog.showModal !== 'function') {
+      button.hidden = true;
+      return;
+    }
+    var form = dialog.querySelector('form');
+    var submit = dialog.querySelector('[data-aksrt-dialog-submit]');
+
+    function open() {
+      if (submit) submit.disabled = false;
+      dialog.showModal();
+      var first = dialog.querySelector('textarea:not([disabled]), input:not([type="hidden"]):not([type="radio"])');
+      if (first) first.focus();
+    }
+
+    button.addEventListener('click', open);
+    dialog.querySelectorAll('[data-aksrt-dialog-close]').forEach(function (close) {
+      close.addEventListener('click', function () { dialog.close(); });
+    });
+    // 点击遮罩（dialog 自身而非内容区）关闭。
+    dialog.addEventListener('click', function (event) {
+      if (event.target === dialog) dialog.close();
+    });
+    if (form && submit) {
+      form.addEventListener('submit', function () { submit.disabled = true; });
+    }
+    if (dialog.hasAttribute('data-aksrt-dialog-autoopen')) open();
+  });
+})();
diff --git a/src/Admin/Native/NativeUi.php b/src/Admin/Native/NativeUi.php
index 881451a1..4cb0416a 100644
--- a/src/Admin/Native/NativeUi.php
+++ b/src/Admin/Native/NativeUi.php
@@ -81,7 +81,9 @@ final class NativeUi {
     /**
      * 页头：图标 + 标题 + 说明 + 右侧操作。
      *
-     * @param array<int, array{label:string,url:string,primary?:bool,icon?:string}> $actions
+     * 带 dialog 键的动作渲染为打开对应 <dialog id> 的按钮（由页面脚本绑定），否则渲染为链接。
+     *
+     * @param array<int, array{label:string,url?:string,dialog?:string,primary?:bool,icon?:string}> $actions
      */
     public static function header(string $title, string $description = '', string $icon = '', array $actions = []): void {
         echo '<div class="aksrt-native-header"><div class="aksrt-native-header__main">';
@@ -98,7 +100,9 @@ final class NativeUi {
         if ($actions !== []) {
             echo '<div class="aksrt-native-header__actions">';
             foreach ($actions as $action) {
-                echo self::button_link($action['label'], $action['url'], !empty($action['primary']), (string) ($action['icon'] ?? ''));
+                echo isset($action['dialog'])
+                    ? self::button_dialog($action['label'], (string) $action['dialog'], !empty($action['primary']), (string) ($action['icon'] ?? ''))
+                    : self::button_link($action['label'], (string) $action['url'], !empty($action['primary']), (string) ($action['icon'] ?? ''));
             }
             echo '</div>';
         }
@@ -113,6 +117,14 @@ final class NativeUi {
         return '<a class="' . esc_attr($class) . '" href="' . esc_url($url) . '">' . $icon_html . esc_html($label) . '</a>';
     }
 
+    /** 打开页面内 <dialog id="$dialog_id"> 的按钮；点击行为由页面脚本按 data-aksrt-dialog-open 绑定。 */
+    public static function button_dialog(string $label, string $dialog_id, bool $primary = false, string $icon = ''): string {
+        $class = $primary ? 'button button-primary' : 'button';
+        $icon_html = $icon !== '' ? '<span class="dashicons ' . esc_attr($icon) . '" aria-hidden="true"></span>' : '';
+        return '<button type="button" class="' . esc_attr($class) . '" data-aksrt-dialog-open="' . esc_attr($dialog_id) . '" aria-haspopup="dialog" aria-controls="' . esc_attr($dialog_id) . '">'
+            . $icon_html . esc_html($label) . '</button>';
+    }
+
     /* ------------------------------------------------------------------
      * 统计卡
      * ----------------------------------------------------------------*/
diff --git a/src/Admin/Native/UsersMenusMessages.php b/src/Admin/Native/UsersMenusMessages.php
index 319836ad..2643727d 100644
--- a/src/Admin/Native/UsersMenusMessages.php
+++ b/src/Admin/Native/UsersMenusMessages.php
@@ -2,7 +2,7 @@
 /**
  * 消息管理后台页（users.php → aksrt_messages）。
  *
- * 单页承载：概览卡片 + 代发系统消息（折叠卡片，按用户列表或角色投递）+ 已读状态视图
+ * 单页承载：概览卡片 + 代发系统消息（页头按钮打开弹窗，按用户列表或角色投递）+ 已读状态视图
  * + 类型 / 收件人 / 关键词筛选 + 全站通知列表（批量标记已读 / 删除）+ 共享分页条。
  * 查询与写操作在 AKSRT\Messages\NotificationAdminQuery / AdminBroadcast，这里只做页面与路由。
  *
@@ -20,15 +20,20 @@ defined('ABSPATH') || exit;
 trait UsersMenusMessages {
 
     private const MESSAGE_PAGE_SLUG = 'aksrt_messages';
+    private const MESSAGE_COMPOSE_ID = 'aksrt-msg-compose';
 
-    /** 页面专属样式，只在本页入队。 */
+    /** 页面专属样式与弹窗脚本，只在本页入队。 */
     public function enqueue_message_assets(string $hook): void {
         if ($hook !== 'users_page_' . self::MESSAGE_PAGE_SLUG) {
             return;
         }
         $css = '/assets/css/admin/messages.css';
+        $js = '/assets/js/admin-messages.js';
         if (is_file(AKSRT_DIR . $css)) {
-            wp_enqueue_style('aksrt-admin-messages', AKSRT_URI . $css, [], (string) filemtime(AKSRT_DIR . $css));
+            wp_enqueue_style('aksrt-admin-messages', AKSRT_URI . $css, [NativeUi::STYLE_HANDLE], (string) filemtime(AKSRT_DIR . $css));
+        }
+        if (is_file(AKSRT_DIR . $js)) {
+            wp_enqueue_script('aksrt-admin-messages', AKSRT_URI . $js, [], (string) filemtime(AKSRT_DIR . $js), true);
         }
     }
 
@@ -42,11 +47,19 @@ trait UsersMenusMessages {
             __('消息管理', 'aksrt'),
             '',
             'dashicons-email-alt',
-            [[
-                'label' => __('通知配置', 'aksrt'),
-                'url'   => admin_url('admin.php?page=aksrt-settings#/users/notifications'),
-                'icon'  => 'dashicons-admin-generic',
-            ]]
+            [
+                [
+                    'label'   => __('发送系统消息', 'aksrt'),
+                    'dialog'  => self::MESSAGE_COMPOSE_ID,
+                    'icon'    => 'dashicons-megaphone',
+                    'primary' => true,
+                ],
+                [
+                    'label' => __('通知配置', 'aksrt'),
+                    'url'   => admin_url('admin.php?page=aksrt-settings#/users/notifications'),
+                    'icon'  => 'dashicons-admin-generic',
+                ],
+            ]
         );
         $this->render_message_notices();
 
@@ -209,14 +222,28 @@ trait UsersMenusMessages {
     }
 
     private function render_message_compose(): void {
+        // 发送失败回跳时自动重新打开弹窗，便于修正后再发。
         $open = sanitize_key((string) wp_unslash($_GET['aksrt_msg'] ?? '')) === 'send_failed';
 
-        echo '<details class="aksrt-native-collapse aksrt-messages-admin__compose"' . ($open ? ' open' : '') . '>';
-        echo '<summary><span class="dashicons dashicons-megaphone" aria-hidden="true"></span>' . esc_html__('发送系统消息', 'aksrt') . '</summary>';
-        echo '<form method="post" action="' . esc_url(admin_url('admin-post.php')) . '">';
+        printf(
+            '<dialog class="aksrt-msg-dialog" id="%s" aria-labelledby="%s-title"%s>',
+            esc_attr(self::MESSAGE_COMPOSE_ID),
+            esc_attr(self::MESSAGE_COMPOSE_ID),
+            $open ? ' data-aksrt-dialog-autoopen' : ''
+        );
+        echo '<form method="post" action="' . esc_url(admin_url('admin-post.php')) . '" class="aksrt-msg-dialog__form aksrt-messages-admin__compose">';
         echo '<input type="hidden" name="action" value="aksrt_users_send_message" />';
         wp_nonce_field('aksrt_users_send_message');
 
+        printf(
+            '<header class="aksrt-msg-dialog__head"><h2 id="%s-title" class="aksrt-msg-dialog__title"><span class="dashicons dashicons-megaphone" aria-hidden="true"></span>%s</h2>'
+            . '<button type="button" class="aksrt-msg-dialog__close" data-aksrt-dialog-close aria-label="%s"><span class="dashicons dashicons-no-alt" aria-hidden="true"></span></button></header>',
+            esc_attr(self::MESSAGE_COMPOSE_ID),
+            esc_html__('发送系统消息', 'aksrt'),
+            esc_attr__('关闭', 'aksrt')
+        );
+        echo '<div class="aksrt-msg-dialog__body">';
+
         echo '<fieldset class="aksrt-messages-admin__modes"><legend>' . esc_html__('收件人', 'aksrt') . '</legend>';
         printf(
             '<label><input type="radio" name="recipient_mode" value="users" checked /> %s</label>',
@@ -256,12 +283,14 @@ trait UsersMenusMessages {
             (int) AdminBroadcast::CONTENT_MAX
         );
         echo '</div>';
+        echo '<p class="aksrt-native-muted aksrt-msg-dialog__note">' . esc_html__('以「系统通知」类型逐人投递；邮件 / 公众号提醒按通知配置同步触发。', 'aksrt') . '</p>';
+        echo '</div>';
         printf(
-            '<div class="aksrt-native-form-foot"><span class="aksrt-native-muted">%s</span><button type="submit" class="button button-primary">%s</button></div>',
-            esc_html__('以「系统通知」类型逐人投递；邮件 / 公众号提醒按通知配置同步触发。', 'aksrt'),
+            '<footer class="aksrt-msg-dialog__foot"><button type="button" class="button" data-aksrt-dialog-close>%s</button><button type="submit" class="button button-primary" data-aksrt-dialog-submit>%s</button></footer>',
+            esc_html__('取消', 'aksrt'),
             esc_html__('发送', 'aksrt')
         );
-        echo '</form></details>';
+        echo '</form></dialog>';
     }
 
     /** @param array{all:int,unread:int,read:int} $counts */