kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(report): align the report modal with the reference theme 1:1

Browse Source 
- read preset reasons from the real source (ban_preset_reason via
  UserRuntime::ban_settings); the previous injection read a
  nonexistent report.categories key, so backend reasons never showed
- rebuild the modal on the reference markup contract: edit-header
  warning header, reason chips toggling the reference .active class
  (focus color), other-reason textarea, violation link, description,
  but-average modal-buts footer
- add image evidence upload gated by user_report_img_s: new
  /report/upload-image route reusing the comment upload handler with
  its own permission, preview/remove UI, up to 3 images appended to
  the report content
- render the backend report notice (user_report_desc, sanitized HTML)
  inside the modal
- widen the dialog to the reference 600px desktop geometry and share
  the form-upload preview styles with the order review modal
- extend the report contract test accordingly
This commit is contained in:
kate522 committed 2026-09-20 14:20:09 +08:00
1 parent 913958820c
commit 7a80297a56
7 files changed
+329 -91
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/js/report.js
+181 -66
View File
@@ -1,9 +1,12 @@
/**
* AKSRT Report — 前台统一举报弹窗
*
* 监听 [data-aksrt-report] 点击，弹出对齐参考主题格式的举报弹窗：
* 红色警示头 + 举报原因徽章（含“其它原因”）+ 违规链接 + 详细描述 + 取消/确认提交。
* 提交走 REST /aksrt/v1/report/submit（user/comment/post 三类目标统一入口）。
* 监听 [data-aksrt-report] 点击，弹出对齐参考主题的举报弹窗（像素级同构）：
* edit-header 红色警示头 + 举报原因徽章（active 状态走 .active.badg 焦点色）
* + 违规链接 + 详细描述 + 图片举证（后台开启 user_report_img_s 时）
* + 举报说明（后台 user_report_desc，支持 HTML）+ but-average modal-buts 底栏。
* 提交走 REST /aksrt/v1/report/submit（user/comment/post 三类目标统一入口），
* 举证图片走 /aksrt/v1/report/upload-image（最多 3 张，URL 拼入举报内容）。
*
* @package AKSRT
*/
@@ -24,27 +27,41 @@
comment: '举报评论',
};
var MAX_IMAGES = 3;
function getReportCategories() {
// 预置原因：后台“用户&互动 → 禁封/举报”配置（aksrtData.reportCategories）。
// 预置原因：后台“用户&互动 → 禁封/举报 → 预置原因”（ban_preset_reason，
// 由 UserRuntime::ban_settings 解析，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)) || ''),
name: String((cat && (cat.name || cat.label || cat.t)) || ''),
};
})
.filter(function (cat) { return cat.slug !== '' && cat.label !== ''; });
.filter(function (cat) { return cat.slug !== '' && cat.name !== ''; });
if (items.length) return items;
}
return [
{ slug: 'spam', label: '垃圾信息' },
{ slug: 'abuse', label: '人身攻击' },
{ slug: 'copyright', label: '版权投诉' },
{ slug: 'spam', name: '垃圾信息' },
{ slug: 'abuse', name: '人身攻击' },
{ slug: 'copyright', name: '版权投诉' },
];
}
function reportDescHtml() {
// 举报说明：后台富文本（服务端已 wp_kses_post），直接注入。
var d = window.aksrtData && window.aksrtData.report;
return (d && typeof d.desc === 'string') ? d.desc : '';
}
function imgUploadEnabled() {
var d = window.aksrtData && window.aksrtData.report;
return !!(d && d.imgEnabled);
}
function escapeHtml(value) {
return String(value == null ? '' : value)
.replace(/&/g, '&')
@@ -60,35 +77,35 @@
var html = '';
// 弹窗头：参考主题红色警示样式。
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>';
// 弹窗头：参考主题 edit-header 同构（关闭钮 + 红色警示徽标 + 标题）。
html += '<div class="mb10 edit-header touch">';
html += '<button type="button" class="close" data-aksrt-modal-close aria-label="关闭"><i class="fa fa-times" aria-hidden="true"></i></button>';
html += '<b class="flex ac c-red"><span class="toggle-radius mr10 c-red"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></span>' + escapeHtml(title) + '</b>';
html += '</div>';
html += '<form class="aksrt-report-form">';
html += '<form class="aksrt-report-form dependency-box">';
html += '<div class="scroll-y mini-scrollbar max-vh7">';
html += '<div class="mt10 mb20">';
// 被举报对象（头像 + 名称），由服务端渲染进 data-aksrt-report。
if (data.target_avatar || data.target_name) {
html += '<div class="flex ac mb10">';
html += '<div class="flex ac mb6">';
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>';
}
// 举报原因（徽章单选，含“其它原因”）。
html += '<div class="mb20">';
html += '<div class="em09 muted-2-color mb6">举报原因</div>';
html += '<div class="aksrt-report-reasons">';
categories.forEach(function (cat) {
html += '<button type="button" class="mr6 mb6 badg p2-10 pointer" data-report-reason="' + escapeHtml(cat.slug) + '">' + escapeHtml(cat.label) + '</button>';
});
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>';
// 举报原因（徽章单选，active 走参考主题焦点色；含“其它原因”展开自定义文本）。
html += '<div class="form-radio mb20 form-but-radio">';
html += '<div class="em09 muted-2-color mb6">举报原因</div>';
categories.forEach(function (cat) {
html += '<span class="mr6 mb6 badg p2-10 pointer" data-aksrt-report-reason="' + escapeHtml(cat.name) + '" data-reason-slug="' + escapeHtml(cat.slug) + '">' + escapeHtml(cat.name) + '</span>';
});
html += '<span class="mr6 mb6 badg p2-10 pointer" data-aksrt-report-reason="other">其它原因</span>';
html += '<div class="aksrt-report-other mb20" style="display: none;">';
html += '<textarea class="form-control" name="reason_other" rows="2" placeholder="请填写举报原因"></textarea>';
html += '</div>';
html += '</div>';
@@ -96,15 +113,32 @@
// 违规链接。
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 += '<input type="text" class="form-control" name="report_url" placeholder="请输入违规链接">';
html += '</div>';
// 详细描述。
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 += '<textarea class="form-control" name="report_desc" rows="2" placeholder="请详细描述违规事项"></textarea>';
html += '</div>';
// 图片举证（后台 user_report_img_s 开启时渲染，最多 3 张）。
if (imgUploadEnabled()) {
html += '<div class="form-upload mb10">';
html += '<div class="em09 muted-2-color mb6">添加图片举证</div>';
html += '<div class="preview">';
html += '<div class="add" data-aksrt-report-add role="button" aria-label="添加图片举证"></div>';
html += '</div>';
html += '<input class="hide" type="file" accept="image/gif,image/jpeg,image/jpg,image/png" data-aksrt-report-file>';
html += '</div>';
}
// 举报说明（后台 user_report_desc，支持 HTML）。
var desc = reportDescHtml();
if (desc) {
html += '<div class="em09 padding-h10 muted-box mb10">' + desc + '</div>';
}
html += '</div>';
// 底栏：参考主题 but-average modal-buts 双按钮。
@@ -118,11 +152,67 @@
}
function selectedReason(shell) {
var active = shell.querySelector('[data-report-reason].is-active');
return active ? active.getAttribute('data-report-reason') : '';
var active = shell.querySelector('[data-aksrt-report-reason].active');
if (!active) return { label: '', slug: '' };
return {
label: active.getAttribute('data-aksrt-report-reason') || '',
slug: active.getAttribute('data-reason-slug') || '',
};
}
function submitReport(session, data, shell) {
function collectImages(shell) {
return Array.prototype.map.call(
shell.querySelectorAll('.preview .preview-item img'),
function (img) { return img.getAttribute('src') || ''; }
).filter(function (url) { return url !== ''; });
}
function uploadImage(shell, file) {
var preview = shell.querySelector('.form-upload .preview');
if (!preview) return Promise.resolve();
var existing = shell.querySelectorAll('.preview .preview-item').length;
if (existing + collectImages(shell).length >= MAX_IMAGES) {
notyf('最多上传 ' + MAX_IMAGES + ' 张图片', 'danger');
return Promise.resolve();
}
var body = new FormData();
body.append('image', file);
return window.fetch(API_ROOT + '/report/upload-image', {
method: 'POST',
headers: { 'X-WP-Nonce': NONCE },
body: body,
})
.then(function (res) { return res.json(); })
.then(function (result) {
var url = result && result.success && result.data && result.data.url;
if (!url) {
notyf((result && result.message) || '图片上传失败', 'danger');
return;
}
var item = document.createElement('div');
item.className = 'preview-item';
var img = document.createElement('img');
img.src = url;
img.alt = '';
var remove = document.createElement('button');
remove.type = 'button';
remove.className = 'remove';
remove.setAttribute('aria-label', '删除图片');
remove.innerHTML = '&times;';
remove.addEventListener('click', function () { item.remove(); });
item.appendChild(img);
item.appendChild(remove);
preview.insertBefore(item, preview.querySelector('.add'));
})
.catch(function () {
notyf('图片上传失败，请重试', 'danger');
});
}
function submitReport(data, shell) {
var form = shell.querySelector('.aksrt-report-form');
if (!form) return;
@@ -131,33 +221,31 @@
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 selected = selectedReason(shell);
var other = (otherInput && otherInput.value || '').trim();
if (!slug && !reason) {
if (!selected.label && !other) {
notyf('请选择或输入举报原因', 'danger');
return;
}
// “其它原因”时以自定义文本为举报原因。
if (slug === 'other') {
slug = '';
reason = other || reason;
}
// “其它原因”以自定义文本为举报原因；预置徽章取徽章文案（参考主题同语义）。
var reason = selected.label === 'other' || !selected.label ? other : selected.label;
var slug = selected.label && selected.label !== 'other' ? selected.slug : '';
if (!reason) {
// 徽章已选但没有描述时，将徽章文案作为举报原因（参考主题同款语义）。
var activeBtn = shell.querySelector('[data-report-reason].is-active');
reason = activeBtn ? (activeBtn.textContent || '').trim() : '';
notyf('请填写举报原因', 'danger');
return;
}
var link = (urlInput && urlInput.value || '').trim();
if (link) {
reason += (reason ? '\n' : '') + '违规链接：' + link;
}
if (!reason) {
notyf('请选择或输入举报原因', 'danger');
return;
var images = collectImages(shell);
if (images.length) {
reason += '\n图片举证：';
images.forEach(function (url) { reason += '\n' + url; });
}
submitBtn.disabled = true;
@@ -196,6 +284,48 @@
});
}
function bindReportModal(shell) {
shell.addEventListener('click', function (event) {
// 原因徽章：单选 active（参考主题 .active.badg 焦点色），其它原因展开文本框。
// 参考主题行为：重复点击已选徽章保持选中（先全清再激活），不做反选。
var chip = event.target.closest('[data-aksrt-report-reason]');
if (chip) {
event.preventDefault();
shell.querySelectorAll('[data-aksrt-report-reason].active').forEach(function (el) {
el.classList.remove('active');
});
chip.classList.add('active');
var otherBox = shell.querySelector('.aksrt-report-other');
if (otherBox) otherBox.style.display = chip.getAttribute('data-aksrt-report-reason') === 'other' ? '' : 'none';
return;
}
// 图片举证：点击加号或预览补位触发文件选择。
var addBtn = event.target.closest('[data-aksrt-report-add]');
if (addBtn) {
event.preventDefault();
var fileInput = shell.querySelector('[data-aksrt-report-file]');
if (fileInput) fileInput.click();
return;
}
var submitBtn = event.target.closest('[data-aksrt-report-submit]');
if (submitBtn) {
event.preventDefault();
submitReport(shell.getAttribute('data-aksrt-report-target') ? JSON.parse(shell.getAttribute('data-aksrt-report-target')) : {}, shell);
}
});
shell.addEventListener('change', function (event) {
var fileInput = event.target.closest('[data-aksrt-report-file]');
if (!fileInput || !fileInput.files || !fileInput.files.length) return;
Array.prototype.forEach.call(fileInput.files, function (file) {
uploadImage(shell, file);
});
fileInput.value = '';
});
}
function openReportModal(data) {
if (!window.AksrtModalRuntime || typeof window.AksrtModalRuntime.open !== 'function') {
notyf('举报组件加载失败，请刷新页面后重试', 'danger');
@@ -204,30 +334,15 @@
var shell = window.AksrtModalRuntime.open({
html: buildReportModalHtml(data),
className: 'aksrt-report-modal modal-mini',
className: 'aksrt-report-modal',
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;
}
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);
}
});
shell.setAttribute('data-aksrt-report-target', JSON.stringify({
target_type: data.target_type,
target_id: data.target_id,
}));
bindReportModal(shell);
}
function initReportButtons() {