fix(ban): align user center ban notice with adjacent meta info
用户中心页头治理提示与相邻元信息(用户名/邮箱/城市)排版不一致: - 高度不一致:原实现为 badg 胶囊 + 箭头作为 <a> 的内联兄弟节点,箭头 游离在胶囊之外且按基线对齐,整行高度被 pill 撑高; - 字号不一致:badg-sm 的 0.8em 使提示文字小于相邻项的 13px; - 箭头位置:参考主题 zib_get_user_ban_info_link 的箭头位于按钮内部。 现复用 uc-header__meta-item(inline-flex 居中、12px 图标、13px 字号), 与相邻元信息完全同构:状态图标 + 状态文案(c-red/c-yellow)+ 内部箭头; 链接默认色经作用域规则回归行内墨色。契约测试锁定新结构,361 项全通过。
This commit is contained in:
@@ -295,6 +295,11 @@
|
|||||||
opacity: 0.65;
|
opacity: 0.65;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 治理状态提示:与相邻元信息同排版;链接默认色会让箭头/图标偏离行内墨色 */
|
||||||
|
.uc-header__meta .aksrt-user-ban-notice {
|
||||||
|
color: var(--color-ink-3);
|
||||||
|
}
|
||||||
|
|
||||||
.uc-header__actions {
|
.uc-header__actions {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding-top: 68px;
|
padding-top: 68px;
|
||||||
|
|||||||
@@ -95,8 +95,12 @@ function aksrt_get_ban_appeal_page_url(): string
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 治理状态徽章 +「查看详情」入口(用户中心页头,参考主题
|
* 治理状态提示(用户中心页头,参考主题 user_page_header_desc 钩子 /
|
||||||
* user_page_header_desc 钩子 / zib_get_user_ban_info_link 语义)。
|
* zib_get_user_ban_info_link 语义:状态 + 箭头 + 查看入口)。
|
||||||
|
*
|
||||||
|
* 排版复用 uc-header__meta-item(inline-flex 居中、12px 图标、13px 字号),
|
||||||
|
* 与相邻元信息(用户名 / 邮箱 / 城市)高度与字号完全一致;箭头置于提示内部,
|
||||||
|
* 不使用 badg-sm(0.8em 会破坏与相邻项的字号一致性)。
|
||||||
*/
|
*/
|
||||||
function aksrt_get_user_ban_notice_html(int $user_id): string
|
function aksrt_get_user_ban_notice_html(int $user_id): string
|
||||||
{
|
{
|
||||||
@@ -105,15 +109,15 @@ function aksrt_get_user_ban_notice_html(int $user_id): string
|
|||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
$tone = 'banned' === $state['state'] ? 'c-red' : 'c-yellow';
|
$tone = 'banned' === $state['state'] ? 'c-red' : 'c-yellow';
|
||||||
$chip = '<span class="badg badg-sm ' . $tone . '" title="' . esc_attr((string) $state['label']) . '">'
|
$inner = '<i class="fa fas fa-' . esc_attr((string) $state['icon']) . '" aria-hidden="true"></i>'
|
||||||
. '<i class="fa fas fa-' . esc_attr((string) $state['icon']) . ' mr6" aria-hidden="true"></i>'
|
. '<span class="' . $tone . '">' . esc_html((string) $state['label']) . '</span>'
|
||||||
. esc_html((string) $state['label']) . '</span>';
|
. '<i class="fa fas fa-angle-right" aria-hidden="true"></i>';
|
||||||
|
$class = 'uc-header__meta-item aksrt-user-ban-notice';
|
||||||
$link = aksrt_get_ban_appeal_page_url();
|
$link = aksrt_get_ban_appeal_page_url();
|
||||||
if ($link === '') {
|
if ($link === '') {
|
||||||
return $chip;
|
return '<span class="' . $class . '">' . $inner . '</span>';
|
||||||
}
|
}
|
||||||
return '<a class="aksrt-user-ban-notice" href="' . esc_url($link) . '">' . $chip
|
return '<a class="' . $class . '" href="' . esc_url($link) . '" title="' . esc_attr__('查看禁封状态', 'aksrt') . '">' . $inner . '</a>';
|
||||||
. '<i class="fa fas fa-angle-right em09 ml6" aria-hidden="true"></i></a>';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -176,6 +176,13 @@ test('ban prompt surface mirrors the reference theme entry points', () => {
|
|||||||
assert.match(userBanHelper, /function aksrt_get_user_ban_notice_html/)
|
assert.match(userBanHelper, /function aksrt_get_user_ban_notice_html/)
|
||||||
assert.match(userBanHelper, /function aksrt_get_ban_appeal_page_url/)
|
assert.match(userBanHelper, /function aksrt_get_ban_appeal_page_url/)
|
||||||
assert.match(ucHeader, /aksrt_get_user_ban_notice_html/)
|
assert.match(ucHeader, /aksrt_get_user_ban_notice_html/)
|
||||||
|
// 用户中心提示排版与相邻元信息一致:复用 uc-header__meta-item 结构,
|
||||||
|
// 不用 badg-sm(0.8em 破坏字号一致性),箭头置于提示内部。
|
||||||
|
const noticeFn = userBanHelper.slice(userBanHelper.indexOf('function aksrt_get_user_ban_notice_html'))
|
||||||
|
const noticeBody = noticeFn.slice(0, noticeFn.indexOf('\n}'))
|
||||||
|
assert.match(noticeBody, /\$class = 'uc-header__meta-item aksrt-user-ban-notice';/)
|
||||||
|
assert.ok(!noticeBody.includes('badg-sm'), 'user center notice must not use badg-sm (shrinks font vs meta row)')
|
||||||
|
assert.match(noticeBody, /fa-angle-right/)
|
||||||
// 评论拒绝态(参考主题 zib_get_user_ban_nocan_info)。
|
// 评论拒绝态(参考主题 zib_get_user_ban_nocan_info)。
|
||||||
assert.match(userBanHelper, /function aksrt_get_user_ban_nocan_html/)
|
assert.match(userBanHelper, /function aksrt_get_user_ban_nocan_html/)
|
||||||
assert.match(commentsHelper, /aksrt_get_user_ban_nocan_html/)
|
assert.match(commentsHelper, /aksrt_get_user_ban_nocan_html/)
|
||||||
|
|||||||
Reference in New Issue
Block a user