fix(report): unify the frontend report entry and modal

- enqueue report.js on singular pages too: the single meta box and
  comment report buttons rendered without their script handler, so
  clicking the report item did nothing
- align the report runtime default with the admin schema and the
  reference theme (user_report_s default true) so the public user
  home cover menu shows the report entry
- rebuild report.js on top of AksrtModalRuntime following the
  reference theme modal format: red warning header, preset reason
  badges with an other-reason textarea, violation link field, detail
  description and a cancel/submit footer; submit goes through the
  unified /report/submit endpoint
- keep report inside the comment three-dot dropdown and enrich the
  payload (target name/avatar) for the modal; inject configured
  report categories via aksrtData.reportCategories
- update the report contract test accordingly
This commit is contained in:
2026-09-20 13:40:05 +08:00
parent 381256ed59
commit 7c730b83d6
9 changed files with 249 additions and 112 deletions
+5
View File
@@ -2504,6 +2504,11 @@ main.container,
--bs-gutter-y: 0;
}
/* Header multifunc icon cards must align with the main content edges:
* the global .container is padding-free at >=992px (dual-column float
* math), so the card container gets no extra gutter either. The
* <=991.98px media rule below restores 15px for every .container. */
/* Header multifunc icon cards: pin typography baseline so cards render
* identically on all pages. .px12-sm is only defined globally in
* legacy-utilities.css, which is @import'd by the single-post aggregator;
+193 -103
View File
@@ -1,7 +1,9 @@
/**
* AKSRT Report — 前台举报提交
* AKSRT Report — 前台统一举报弹窗
*
* 监听 [data-aksrt-report] 按钮点击,弹出举报表单并提交。
* 监听 [data-aksrt-report] 点击,弹出对齐参考主题格式的举报弹窗:
* 红色警示头 + 举报原因徽章(含“其它原因”)+ 违规链接 + 详细描述 + 取消/确认提交。
* 提交走 REST /aksrt/v1/report/submit(user/comment/post 三类目标统一入口)。
*
* @package AKSRT
*/
@@ -14,130 +16,218 @@
var raw = d.apiUrl || d.restUrl || d.rest_url || '/index.php?rest_route=/aksrt/v1';
return String(raw).replace(/\/$/, '');
})();
var NONCE = (window.aksrtData && window.aksrtData.restNonce) || '';
var NONCE = (window.aksrtData && window.aksrtData.restNonce) || '';
var TARGET_TITLES = {
user: '举报用户',
post: '举报文章',
comment: '举报评论',
};
function getReportCategories() {
// Default categories; can be overridden by server-rendered config
if (window.aksrtReportCategories && Array.isArray(window.aksrtReportCategories)) {
return window.aksrtReportCategories;
// 预置原因:后台“用户&互动 → 禁封/举报”配置(aksrtData.reportCategories)。
var list = window.aksrtData && window.aksrtData.reportCategories;
if (Array.isArray(list)) {
var items = list
.map(function (cat) {
return {
slug: String((cat && (cat.slug || cat.value)) || ''),
label: String((cat && (cat.label || cat.name)) || ''),
};
})
.filter(function (cat) { return cat.slug !== '' && cat.label !== ''; });
if (items.length) return items;
}
return [
{ value: 'spam', label: '垃圾信息' },
{ value: 'abuse', label: '人身攻击' },
{ value: 'copyright', label: '版权投诉' },
{ value: 'other', label: '其他' },
{ slug: 'spam', label: '垃圾信息' },
{ slug: 'abuse', label: '人身攻击' },
{ slug: 'copyright', label: '版权投诉' },
];
}
function createReportModal(data) {
// Remove existing modal if any
var existing = document.getElementById('aksrt-report-modal');
if (existing) existing.remove();
function escapeHtml(value) {
return String(value == null ? '' : value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
function buildReportModalHtml(data) {
var categories = getReportCategories();
var title = TARGET_TITLES[data.target_type] || '举报不良信息';
var overlay = document.createElement('div');
overlay.id = 'aksrt-report-modal';
overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;';
var html = '';
var modal = document.createElement('div');
modal.style.cssText = 'background:#fff;border-radius:8px;padding:24px;max-width:420px;width:90%;box-shadow:0 4px 20px rgba(0,0,0,0.15);';
// 弹窗头:参考主题红色警示样式。
html += '<div class="flex jsb ac mb10">';
html += '<b class="flex ac c-red em12"><span class="toggle-radius mr10 c-red"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></span>' + escapeHtml(title) + '</b>';
html += '<button type="button" class="aksrt-modal-runtime__close" data-aksrt-modal-close aria-label="关闭">&times;</button>';
html += '</div>';
var title = document.createElement('h3');
title.textContent = '提交举报';
title.style.cssText = 'margin:0 0 16px;font-size:16px;font-weight:600;';
modal.appendChild(title);
html += '<form class="aksrt-report-form">';
html += '<div class="scroll-y mini-scrollbar max-vh7">';
// Category select
var catLabel = document.createElement('label');
catLabel.textContent = '举报分类';
catLabel.style.cssText = 'display:block;margin-bottom:4px;font-size:13px;color:#555;';
modal.appendChild(catLabel);
// 被举报对象(头像 + 名称),由服务端渲染进 data-aksrt-report。
if (data.target_avatar || data.target_name) {
html += '<div class="flex ac mb10">';
if (data.target_avatar) {
html += '<img class="avatar-mini mr6" src="' + escapeHtml(data.target_avatar) + '" alt="">';
}
html += '<b>' + escapeHtml(data.target_name || '') + '</b>';
html += '</div>';
}
var catSelect = document.createElement('select');
catSelect.style.cssText = 'width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;margin-bottom:12px;';
// 举报原因(徽章单选,含“其它原因”)。
html += '<div class="mb20">';
html += '<div class="em09 muted-2-color mb6">举报原因</div>';
html += '<div class="aksrt-report-reasons">';
categories.forEach(function (cat) {
var opt = document.createElement('option');
opt.value = cat.value;
opt.textContent = cat.label;
catSelect.appendChild(opt);
html += '<button type="button" class="mr6 mb6 badg p2-10 pointer" data-report-reason="' + escapeHtml(cat.slug) + '">' + escapeHtml(cat.label) + '</button>';
});
modal.appendChild(catSelect);
html += '<button type="button" class="mr6 mb6 badg p2-10 pointer" data-report-reason="other">其它原因</button>';
html += '</div>';
html += '<div class="aksrt-report-other mt6" hidden>';
html += '<textarea class="form-control" name="reason_other" rows="2" placeholder="请填写举报原因"></textarea>';
html += '</div>';
html += '</div>';
// Reason textarea
var reasonLabel = document.createElement('label');
reasonLabel.textContent = '举报原因';
reasonLabel.style.cssText = 'display:block;margin-bottom:4px;font-size:13px;color:#555;';
modal.appendChild(reasonLabel);
// 违规链接。
html += '<div class="mb20">';
html += '<div class="em09 muted-2-color mb6">违规链接</div>';
html += '<input type="url" class="form-control" name="report_url" placeholder="请输入违规链接(选填)">';
html += '</div>';
var reasonInput = document.createElement('textarea');
reasonInput.placeholder = '请详细描述举报原因…';
reasonInput.style.cssText = 'width:100%;height:80px;padding:8px;border:1px solid #ddd;border-radius:4px;resize:vertical;margin-bottom:16px;box-sizing:border-box;';
modal.appendChild(reasonInput);
// 详细描述。
html += '<div class="mb20">';
html += '<div class="em09 muted-2-color mb6">详细描述</div>';
html += '<textarea class="form-control" name="report_desc" rows="3" placeholder="请详细描述违规事项"></textarea>';
html += '</div>';
// Buttons
var btnRow = document.createElement('div');
btnRow.style.cssText = 'display:flex;gap:8px;justify-content:flex-end;';
html += '</div>';
var cancelBtn = document.createElement('button');
cancelBtn.type = 'button';
cancelBtn.textContent = '取消';
cancelBtn.style.cssText = 'padding:8px 16px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;';
cancelBtn.onclick = function () { overlay.remove(); };
btnRow.appendChild(cancelBtn);
// 底栏:参考主题 but-average modal-buts 双按钮。
html += '<div class="but-average modal-buts">';
html += '<button type="button" class="but" data-aksrt-modal-close>取消</button>';
html += '<button type="button" class="but c-blue" data-aksrt-report-submit><i class="fa fa-check" aria-hidden="true"></i>确认提交</button>';
html += '</div>';
html += '</form>';
var submitBtn = document.createElement('button');
submitBtn.type = 'button';
submitBtn.textContent = '提交举报';
submitBtn.style.cssText = 'padding:8px 16px;border:none;border-radius:4px;background:#e74c3c;color:#fff;cursor:pointer;';
submitBtn.onclick = function () {
var reason = reasonInput.value.trim();
if (!reason) {
reasonInput.style.borderColor = '#e74c3c';
reasonInput.focus();
return html;
}
function selectedReason(shell) {
var active = shell.querySelector('[data-report-reason].is-active');
return active ? active.getAttribute('data-report-reason') : '';
}
function submitReport(session, data, shell) {
var form = shell.querySelector('.aksrt-report-form');
if (!form) return;
var submitBtn = form.querySelector('[data-aksrt-report-submit]');
var descInput = form.querySelector('[name="report_desc"]');
var otherInput = form.querySelector('[name="reason_other"]');
var urlInput = form.querySelector('[name="report_url"]');
var slug = selectedReason(shell);
var reason = (descInput && descInput.value || '').trim();
var other = (otherInput && otherInput.value || '').trim();
if (!slug && !reason) {
notyf('请选择或输入举报原因', 'danger');
return;
}
// “其它原因”时以自定义文本为举报原因。
if (slug === 'other') {
slug = '';
reason = other || reason;
}
if (!reason) {
// 徽章已选但没有描述时,将徽章文案作为举报原因(参考主题同款语义)。
var activeBtn = shell.querySelector('[data-report-reason].is-active');
reason = activeBtn ? (activeBtn.textContent || '').trim() : '';
}
var link = (urlInput && urlInput.value || '').trim();
if (link) {
reason += (reason ? '\n' : '') + '违规链接:' + link;
}
if (!reason) {
notyf('请选择或输入举报原因', 'danger');
return;
}
submitBtn.disabled = true;
notyf('正在提交举报…', 'load', 3000, 'aksrt-report-submit');
window.fetch(API_ROOT + '/report/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-WP-Nonce': NONCE,
},
body: JSON.stringify({
target_type: data.target_type,
target_id: data.target_id,
category: slug,
reason: reason,
}),
})
.then(function (res) { return res.json(); })
.then(function (result) {
if (result && result.success) {
window.AksrtModalRuntime.close('submit');
notyf(result.message || '举报已提交,我们会尽快处理', 'success');
} else {
submitBtn.disabled = false;
notyf((result && result.message) || '举报提交失败', 'danger');
}
})
.catch(function () {
submitBtn.disabled = false;
notyf('网络错误,请重试', 'danger');
})
.then(function () {
var toast = document.getElementById('aksrt-report-submit');
if (toast) toast.remove();
});
}
function openReportModal(data) {
if (!window.AksrtModalRuntime || typeof window.AksrtModalRuntime.open !== 'function') {
notyf('举报组件加载失败,请刷新页面后重试', 'danger');
return;
}
var shell = window.AksrtModalRuntime.open({
html: buildReportModalHtml(data),
className: 'aksrt-report-modal modal-mini',
kind: 'report',
mobileBottom: true,
});
shell.addEventListener('click', function (event) {
var chip = event.target.closest('[data-report-reason]');
if (chip) {
event.preventDefault();
var wasActive = chip.classList.contains('is-active');
shell.querySelectorAll('[data-report-reason].is-active').forEach(function (el) {
el.classList.remove('is-active');
});
if (!wasActive) chip.classList.add('is-active');
var otherBox = shell.querySelector('.aksrt-report-other');
if (otherBox) otherBox.hidden = chip.getAttribute('data-report-reason') !== 'other' || wasActive;
return;
}
submitBtn.disabled = true;
submitBtn.textContent = '提交中…';
fetch(API_ROOT + '/report/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-WP-Nonce': NONCE,
},
body: JSON.stringify({
target_type: data.target_type,
target_id: data.target_id,
category: catSelect.value,
reason: reason,
}),
})
.then(function (res) { return res.json(); })
.then(function (result) {
overlay.remove();
if (result.success) {
notyf(result.message || '举报已提交');
} else {
notyf(result.message || '提交失败', 'danger');
}
})
.catch(function () {
submitBtn.disabled = false;
submitBtn.textContent = '提交举报';
notyf('网络错误,请重试', 'danger');
});
};
btnRow.appendChild(submitBtn);
modal.appendChild(btnRow);
overlay.appendChild(modal);
overlay.addEventListener('click', function (e) {
if (e.target === overlay) overlay.remove();
var submitBtn = event.target.closest('[data-aksrt-report-submit]');
if (submitBtn) {
event.preventDefault();
submitReport({ target_type: data.target_type, target_id: data.target_id }, data, shell);
}
});
document.body.appendChild(overlay);
reasonInput.focus();
}
function initReportButtons() {
@@ -151,7 +241,7 @@
try {
var data = JSON.parse(btn.getAttribute('data-aksrt-report'));
if (data && data.target_type && data.target_id) {
createReportModal(data);
openReportModal(data);
}
} catch {
// invalid data attribute
+6 -1
View File
@@ -137,7 +137,12 @@ if (!function_exists('aksrt_get_single_meta_box')) :
}
$more .= '<button type="button" class="post-drop-meta__item" data-share-copy data-share-url="' . esc_url((string) $permalink) . '"><i class="fa fas fa-link" aria-hidden="true"></i><span>' . esc_html__('复制链接', 'aksrt') . '</span></button>';
if (is_user_logged_in()) {
$more .= '<button type="button" class="post-drop-meta__item" data-aksrt-report=\'{"target_type":"post","target_id":' . (int) $post_id . '}\'><i class="fa fas fa-flag" aria-hidden="true"></i><span>' . esc_html__('举报', 'aksrt') . '</span></button>';
$report_payload = wp_json_encode([
'target_type' => 'post',
'target_id' => (int) $post_id,
'target_name' => get_the_title($post_id),
]);
$more .= '<button type="button" class="post-drop-meta__item" data-aksrt-report="' . esc_attr((string) $report_payload) . '"><i class="fa fas fa-flag" aria-hidden="true"></i><span>' . esc_html__('举报', 'aksrt') . '</span></button>';
} else {
$more .= '<a href="' . esc_url($login_url) . '" class="post-drop-meta__item"><i class="fa fas fa-flag" aria-hidden="true"></i><span>' . esc_html__('登录后举报', 'aksrt') . '</span></a>';
}
+10 -1
View File
@@ -147,6 +147,8 @@ if (!function_exists('aksrt_get_comment_report_html')) :
/**
* 评论举报入口 — 登录用户可举报他人评论(前台走 report.js 的 data-aksrt-report 契约)。
*
* 举报位于“回复”右侧三点下拉菜单内(参考主题同位置)。
*
* @param WP_Comment $comment Comment.
* @return string
*/
@@ -169,7 +171,14 @@ if (!function_exists('aksrt_get_comment_report_html')) :
return '';
}
return '<li><a class="comment-report-link" href="javascript:;" data-aksrt-report=\'{"target_type":"comment","target_id":' . (int) $comment->comment_ID . '}\'><i class="fa fas fa-flag mr10 fa-fw" aria-hidden="true"></i><text>' . esc_html__('举报', 'aksrt') . '</text></a></li>';
$report_payload = wp_json_encode([
'target_type' => 'comment',
'target_id' => (int) $comment->comment_ID,
'target_name' => get_comment_author($comment),
'target_avatar' => get_avatar_url((int) $comment->user_id > 0 ? (int) $comment->user_id : 0, ['size' => 40]) ?: '',
]);
return '<li><a class="comment-report-link" href="javascript:;" data-aksrt-report="' . esc_attr((string) $report_payload) . '"><i class="fa fa-exclamation-triangle mr10 fa-fw c-red" aria-hidden="true"></i>' . esc_html__('举报', 'aksrt') . '</a></li>';
}
endif;
+6 -3
View File
@@ -277,9 +277,9 @@ trait ScriptsPart1b {
// 评论区样式由上方 is_singular 统一入口按 needs_comments 加载。
}
// 用户中心 / 公开主页:路由专属 CSS
if ($is_profile_page) {
// 举报脚本(用户主页和个人中心均需要)
// 举报脚本:举报入口渲染于文章页 meta 菜单、评论区与用户主页/个人中心,
// 因此 singular 页面与 profile 路由都需要加载(文章页举报按钮此前无脚本支撑)。
if (is_singular() || $is_profile_page) {
$report_js_path = get_template_directory() . '/assets/js/report.js';
if (file_exists($report_js_path)) {
wp_enqueue_script(
@@ -290,7 +290,10 @@ trait ScriptsPart1b {
true
);
}
}
// 用户中心 / 公开主页:路由专属 CSS
if ($is_profile_page) {
// 关注脚本已在全局栈注册(ScriptsPart1c),data-aksrt-follow 按钮
// 也渲染于文章页作者栏与各处用户卡片,不能仅限本路由加载。
+8
View File
@@ -487,6 +487,14 @@ trait ScriptsPart1c {
'restUrl' => esc_url_raw(rest_url('aksrt/v1')),
// Alias used by modal-auth / follow / report (same value as restUrl).
'apiUrl' => esc_url_raw(rest_url('aksrt/v1')),
// 举报弹窗预置原因(report.js 徽章选择数据源)。
'reportCategories' => (function () {
if (!class_exists('\AKSRT\Settings\Settings')) {
return [];
}
$report = \AKSRT\Settings\Settings::get_user_identity_settings()['report'] ?? [];
return is_array($report['categories'] ?? null) ? array_values($report['categories']) : [];
})(),
'stickyEnabled' => class_exists('\AKSRT\Settings\Settings') ? !empty(\AKSRT\Settings\Settings::get_post_list_style_settings()['sticky_s']) : true,
'stickyPages' => class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_post_list_style_settings()['sticky_s'] : ['home', 'cat'],
'badgeShow' => class_exists('\AKSRT\Settings\Settings') ? !empty(\AKSRT\Settings\Settings::get_post_list_style_settings()['list_badge_show']) : true,
+4 -2
View File
@@ -173,7 +173,8 @@ class UserRuntime {
}, $medal['items_by_slug'])),
],
'report' => [
'enabled' => (bool) ($settings['user_report_s'] ?? $settings['user_report_enabled'] ?? false),
// 默认开启:对齐后台 schema default true 与参考主题 _pz('user_report_s', true)。
'enabled' => (bool) ($settings['user_report_s'] ?? $settings['user_report_enabled'] ?? true),
'public_entry' => !isset($settings['user_report_public_entry']) || !empty($settings['user_report_public_entry']),
'public_notice' => !isset($settings['user_report_public_notice']) || !empty($settings['user_report_public_notice']),
'ban_notice_text' => $ban_notice_text !== '' ? $ban_notice_text : __('当前账号处于限制状态,部分互动能力已关闭。', 'aksrt'),
@@ -252,7 +253,8 @@ class UserRuntime {
public static function report_settings(): array {
$settings = Settings::get_all();
return [
'enabled' => (bool) ($settings['user_report_s'] ?? $settings['user_report_enabled'] ?? false),
// 默认开启:对齐后台 schema default true 与参考主题 _pz('user_report_s', true)。
'enabled' => (bool) ($settings['user_report_s'] ?? $settings['user_report_enabled'] ?? true),
'public_entry' => !isset($settings['user_report_public_entry']) || !empty($settings['user_report_public_entry']),
'public_notice' => !isset($settings['user_report_public_notice']) || !empty($settings['user_report_public_notice']),
'ban_notice_text' => sanitize_text_field((string) ($settings['user_report_ban_notice_text'] ?? '')),
+10 -1
View File
@@ -80,7 +80,16 @@ $unread_count = $is_own ? aksrt_get_user_unread_notification_count($user_id) : 0
<div class="aksrt-cover-menu__panel" role="menu" hidden>
<?php if ($has_more_details) : ?><button type="button" role="menuitem" data-aksrt-profile-details><i class="fa fas fa-address-card" aria-hidden="true"></i><?php esc_html_e('更多资料', 'aksrt'); ?></button><?php endif; ?>
<?php if ($show_report && !$is_own) : ?>
<?php if (is_user_logged_in()) : ?><button type="button" role="menuitem" data-aksrt-report='{"target_type":"user","target_id":<?php echo (int) $user_id; ?>}'><i class="fa fas fa-flag" aria-hidden="true"></i><?php esc_html_e('举报用户', 'aksrt'); ?></button>
<?php
// 统一举报契约:report.js 弹窗展示被举报对象(头像 + 名称)。
$report_payload = [
'target_type' => 'user',
'target_id' => $user_id,
'target_name' => $user->display_name,
'target_avatar' => get_avatar_url($user_id, ['size' => 40]),
];
?>
<?php if (is_user_logged_in()) : ?><button type="button" role="menuitem" data-aksrt-report="<?php echo esc_attr(wp_json_encode($report_payload)); ?>"><i class="fa fas fa-flag" aria-hidden="true"></i><?php esc_html_e('举报用户', 'aksrt'); ?></button>
<?php else : ?><a role="menuitem" href="<?php echo esc_url(aksrt_get_login_url($home_url)); ?>"><i class="fa fas fa-flag" aria-hidden="true"></i><?php esc_html_e('举报用户', 'aksrt'); ?></a><?php endif; ?>
<?php endif; ?>
</div>
@@ -170,10 +170,16 @@ test('native ban page mirrors the reference theme layout', () => {
})
test('comments expose a report entry for other users when reporting is enabled', () => {
assert.match(commentItem, /data-aksrt-report=\\?'\{"target_type":"comment","target_id":/)
// 举报位于“回复”右侧三点下拉菜单内(参考主题同位置),载荷走 wp_json_encode。
assert.match(commentItem, /data-aksrt-report="/)
assert.match(commentItem, /function aksrt_get_comment_report_html/)
assert.match(commentItem, /comment-report-link/)
assert.match(commentItem, /report'\]\['enabled'\]/)
assert.match(commentItem, /\$author_id === \$reporter_id/)
// 下拉菜单(置顶/编辑/批准/删除 + 举报)包含举报项。
assert.match(commentItem, /function aksrt_get_comments_action_dropdown_html[\s\S]*?\$lists \.= aksrt_get_comment_report_html/)
// 举报不作为 comt-meta 独立按钮直接渲染。
assert.doesNotMatch(commentItem, /\$report\s*=\s*aksrt_get_comment_report_html\(\$comment\)/)
})
test('uninstall cleans up every ban/report meta key written by the theme', () => {