feat(admin): upgrade message management and broadcast interactions
Add message details, per-row actions, selection-aware bulk controls and confirmation dialogs. Merge filters into the list card and link overview statistics to the matching views with site-timezone today filtering. Improve the compose dialog with Unicode character counters, recipient mode segments, role counts and explicit broadcast confirmation verified against the resolved role and recipient count on submission. Split rendering into focused sibling traits and cover rendering, handlers and UI interactions. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed
1 parent
6195508481
commit
fe3ef82718
9 files changed
+1242
-422
No files matched your search
@@ -1,79 +1,20 @@
|
||||
/* 消息管理（users.php?page=aksrt_messages）——仅本页入队。
|
||||
* 页面外壳 / 概览 / 表单栅格 / 筛选条 / 空状态均走 native-ui.css 的共享类，
|
||||
* 本文件只保留本页专属样式：发送弹窗、收件人模式切换、类型徽章、读取状态、用户单元格、列宽。 */
|
||||
|
||||
/* 消息管理原生页。共享卡片 / 表单 / 筛选沿用 native-ui.css 的 --an-* 令牌。 */
|
||||
.aksrt-messages-admin [hidden] { display: none; }
|
||||
.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); }
|
||||
|
||||
/* ---- 页头按钮：图标与文字居中对齐（<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-messages-admin .aksrt-native-stat:focus-visible { outline: 2px solid var(--an-primary); outline-offset: 2px; }
|
||||
|
||||
/* ---- 发送系统消息弹窗 ---- */
|
||||
.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: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__toolbar { padding: 14px 20px; border-bottom: 1px solid var(--an-border-soft); }
|
||||
.aksrt-messages-admin__toolbar .subsubsub { margin: 0 0 12px; }
|
||||
.aksrt-messages-admin__toolbar .aksrt-native-filters { margin: 0; }
|
||||
.aksrt-messages-admin__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; }
|
||||
.aksrt-messages-admin__selection { margin-right: auto; color: var(--an-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
|
||||
.aksrt-messages-admin .button:disabled,
|
||||
.aksrt-messages-admin .button:disabled:hover { color: var(--an-muted) !important; background: var(--an-bg-soft) !important; border-color: var(--an-border-soft) !important; cursor: not-allowed; }
|
||||
.aksrt-messages-admin__danger.button { color: var(--an-danger); border-color: var(--an-danger); }
|
||||
.aksrt-messages-admin__danger.button:hover,
|
||||
.aksrt-messages-admin__danger.button:focus { color: #fff; background: var(--an-danger); border-color: var(--an-danger); }
|
||||
@@ -84,12 +25,16 @@
|
||||
.aksrt-messages-admin__table .column-read { width: 8%; }
|
||||
.aksrt-messages-admin__table .column-time { width: 14%; }
|
||||
.aksrt-messages-admin__table td { vertical-align: middle; }
|
||||
.aksrt-messages-admin__table .row-title { word-break: break-word; }
|
||||
.aksrt-messages-admin__table .row-title { display: inline; padding: 0; font-weight: 600; text-align: left; word-break: break-word; line-height: 1.5; }
|
||||
.aksrt-messages-admin__table tr.is-unread .row-title { font-weight: 700; }
|
||||
.aksrt-messages-admin__table tr.is-unread > th:first-child { box-shadow: inset 3px 0 0 var(--an-primary); }
|
||||
.aksrt-messages-admin__table tr.is-selected > td,
|
||||
.aksrt-messages-admin__table tr.is-selected > th { background: var(--an-primary-soft); }
|
||||
.aksrt-messages-admin__desc { margin-top: 3px; color: var(--an-text-2); word-break: break-word; }
|
||||
.aksrt-msg-row-actions { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
|
||||
.aksrt-msg-row-actions button { padding: 0; font-size: 12px; text-decoration: none; }
|
||||
|
||||
/* 类型徽章（可点击筛选，按类型着色） */
|
||||
/* 类型徽章（可点击筛选） */
|
||||
.aksrt-msg-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -109,19 +54,80 @@
|
||||
.aksrt-msg-badge.is-success { --aksrt-msg-tone: #00a32a; }
|
||||
.aksrt-msg-badge.is-danger { --aksrt-msg-tone: var(--an-danger); }
|
||||
.aksrt-msg-badge.is-social { --aksrt-msg-tone: #8c5bd0; }
|
||||
|
||||
/* 读取状态（带阅读时间 title 提示） */
|
||||
.aksrt-msg-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
|
||||
.aksrt-msg-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
|
||||
.aksrt-msg-state.is-unread { color: var(--an-primary); font-weight: 600; }
|
||||
.aksrt-msg-state.is-read { color: var(--an-muted); }
|
||||
|
||||
/* 用户单元格（点击按该用户筛选） */
|
||||
.aksrt-msg-user { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; text-decoration: none; }
|
||||
.aksrt-msg-user img { flex: none; border-radius: 50%; }
|
||||
.aksrt-msg-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* ---- 发送 / 详情 / 二次确认共用弹窗 ---- */
|
||||
html.aksrt-msg-modal-open { overflow: hidden; }
|
||||
.aksrt-msg-dialog {
|
||||
width: min(640px, calc(100vw - 32px));
|
||||
max-height: calc(100vh - 64px);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
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--confirm { width: min(440px, calc(100vw - 32px)); }
|
||||
.aksrt-msg-dialog__frame { display: flex; flex-direction: column; max-height: inherit; margin: 0; }
|
||||
.aksrt-msg-dialog__head {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
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 { flex-shrink: 0; color: var(--an-primary); }
|
||||
.aksrt-msg-dialog__close { display: inline-flex; flex-shrink: 0; 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 { min-height: 0; padding: 18px 20px; overflow-y: auto; overscroll-behavior: contain; }
|
||||
.aksrt-msg-dialog__note { margin: 14px 0 0; font-size: 12px; }
|
||||
.aksrt-msg-dialog__foot { display: flex; flex-shrink: 0; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--an-border-soft); }
|
||||
.aksrt-msg-dialog .aksrt-native-form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
|
||||
.aksrt-msg-dialog--confirm .aksrt-msg-dialog__body p { margin: 0; line-height: 1.8; }
|
||||
|
||||
/* 分段单选：保留键盘语义，隐藏 WP 默认勾选标记。 */
|
||||
.aksrt-msg-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
|
||||
.aksrt-msg-modes legend { margin-bottom: 8px; padding: 0; }
|
||||
.aksrt-msg-mode { position: relative; cursor: pointer; }
|
||||
.aksrt-msg-mode input[type="radio"] { position: absolute; width: 1px; height: 1px; min-width: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; opacity: 0; appearance: none; }
|
||||
.aksrt-msg-mode > span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; color: var(--an-text-2); border: 1px solid var(--an-border); border-radius: var(--an-radius-sm); }
|
||||
.aksrt-msg-mode input:checked + span { color: var(--an-primary); background: var(--an-primary-soft); border-color: var(--an-primary); font-weight: 600; }
|
||||
.aksrt-msg-mode:hover > span { border-color: var(--an-primary); }
|
||||
.aksrt-msg-mode input:focus-visible + span { outline: 2px solid var(--an-primary); outline-offset: 2px; }
|
||||
.aksrt-msg-counter { align-self: flex-end; color: var(--an-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
|
||||
.aksrt-msg-counter.is-over { color: var(--an-danger); font-weight: 600; }
|
||||
|
||||
/* 详情原样展示纯文本，保留换行，不插入消息中的 HTML。 */
|
||||
.aksrt-msg-detail__title { margin: 0 0 16px; color: var(--an-text); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
|
||||
.aksrt-msg-detail__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 14px; background: var(--an-bg-soft); border-radius: var(--an-radius-sm); }
|
||||
.aksrt-msg-detail__meta dt { color: var(--an-muted); font-size: 12px; }
|
||||
.aksrt-msg-detail__meta dd { margin: 4px 0 0; overflow-wrap: anywhere; }
|
||||
.aksrt-msg-detail__content { line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
|
||||
.aksrt-msg-detail__link { display: block; margin-top: 16px; overflow-wrap: anywhere; }
|
||||
|
||||
@media (max-width: 782px) {
|
||||
.aksrt-messages-admin__toolbar,
|
||||
.aksrt-messages-admin__bulk { padding: 12px 14px; }
|
||||
.aksrt-messages-admin__table .column-type,
|
||||
.aksrt-messages-admin__table .column-read { display: none; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.aksrt-msg-dialog { max-height: calc(100dvh - 32px); }
|
||||
.aksrt-msg-dialog__head,
|
||||
.aksrt-msg-dialog__body,
|
||||
.aksrt-msg-dialog__foot { padding-left: 14px; padding-right: 14px; }
|
||||
.aksrt-msg-detail__meta { grid-template-columns: 1fr; }
|
||||
}
|
||||
Reference in new issue
Block a user