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>
This commit is contained in:
kate522andClaude Fable 5 committed
1 parent
8f1bbf2411
commit
6195508481
4 files changed
+163
-21
No files matched your search
@@ -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); }
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
})();
|
||||
@@ -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>';
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
* 统计卡
|
||||
* ----------------------------------------------------------------*/
|
||||
|
||||
@@ -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 */
|
||||
|
||||
Reference in new issue
Block a user