fix(user-center): match the reference meta pills on the profile header card
The username and e-mail entries under the profile header rendered as plain grey text on a solid icon. The reference makes each one a bordered pill that copies its own value on click, drawn with the outline glyphs. Both entries now carry `.but` plus `data-clipboard-tag` / `data-clipboard-text` so the existing frontend clipboard runtime (assets/js/runtime/libs/clipboard.js) picks them up and toasts "用户名已复制". Icons move from `fas` to `far`, which is the FA5 equivalent of the reference's `fa-user-o` / `fa-envelope-o`. Geometry follows `.author-header .user-identity > .but/.badg` exactly: padding 2px 6px, margin 5px 6px 0 0, 12px type, 1.4 line height, and the meta row gets the reference's 520px max width. medal.css already carried its own approximation of this pill (2px 8px 2px 0, .3em .6em, 1.44) for the medal entry; it now uses the same numbers so the two entries line up. The base rule lives in layout.css rather than medal.css because the medal module is only enqueued when badges are enabled, and the header must keep its shape either way. Verification: rendered the real header through a PHP stub and measured the computed styles in the browser — padding 2px 6px, margin 5px 6px 0 0, 12px / 16.8px, 23px tall, both entries carrying the right clipboard payload. Added user-center-header-meta-contract.test.cjs to pin the markup and geometry; 864 widget/navigation tests pass.
This commit is contained in:
kate522 committed
1 parent
6d01e7489a
commit
7d78a33a9d
4 files changed
+82
-14
No files matched your search
@@ -11,8 +11,9 @@
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
margin: 2px 8px 2px 0;
|
||||
padding: .3em .6em;
|
||||
/* 参考主题 .author-header .user-identity > .but/.badg：5px 6px 0 0 + 1.4 行高 */
|
||||
margin: 5px 6px 0 0;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid var(--color-line-soft, var(--main-border-color, rgba(136, 136, 136, .18)));
|
||||
border-radius: var(--mini-radius, 4px);
|
||||
background: var(--surface-2, rgba(136, 136, 136, .1));
|
||||
@@ -20,7 +21,7 @@
|
||||
color: var(--muted-2-color, var(--color-ink-3));
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
line-height: 1.44;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.jio-medal-entry {
|
||||
|
||||
@@ -269,24 +269,43 @@
|
||||
.uc-header__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
max-width: 520px;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.uc-header__meta .jio-ip-geo-badge {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
/* Reference geometry: every meta entry is a pill — 12px type, 2px/6px padding,
|
||||
* 5px 6px 0 0 spacing, 1.4 line height (same numbers as .author-header
|
||||
* .user-identity > .but/.badg). Declared here so the header keeps its shape even
|
||||
* when the medal module is not enqueued. */
|
||||
.uc-header__meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
margin: 5px 6px 0 0;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid var(--color-line-soft, var(--main-border-color, rgba(136, 136, 136, .18)));
|
||||
border-radius: var(--mini-radius, 4px);
|
||||
background: var(--surface-2, rgba(136, 136, 136, .1));
|
||||
color: var(--color-ink-3);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uc-header__meta-item i {
|
||||
font-size: 12px;
|
||||
opacity: 0.65;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.uc-header__meta .jio-ip-geo-badge {
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
margin: 5px 6px 0 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 治理状态提示：与相邻元信息同排版；链接默认色会让箭头/图标偏离行内墨色 */
|
||||
|
||||
@@ -56,12 +56,12 @@ extract($context, EXTR_SKIP); // phpcs:ignore WordPress.PHP.DontExtract.extract_
|
||||
<?php if (function_exists('jio_render_user_medal_entry')) : ?>
|
||||
<?php echo jio_render_user_medal_entry((int) $user_id, 'user-center', true); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
<?php endif; ?>
|
||||
<span class="uc-header__meta-item" title="<?php esc_attr_e('用户名', 'jio'); ?>">
|
||||
<i class="fa fas fa-user" aria-hidden="true"></i> <?php echo esc_html($target_user->user_login); ?>
|
||||
<span class="uc-header__meta-item but" data-clipboard-tag="<?php esc_attr_e('用户名', 'jio'); ?>" data-clipboard-text="<?php echo esc_attr($target_user->user_login); ?>" title="<?php esc_attr_e('点击复制用户名', 'jio'); ?>">
|
||||
<i class="fa far fa-user" aria-hidden="true"></i><?php echo esc_html($target_user->user_login); ?>
|
||||
</span>
|
||||
<?php if ($target_user->user_email) : ?>
|
||||
<span class="uc-header__meta-item" title="<?php esc_attr_e('邮箱', 'jio'); ?>">
|
||||
<i class="fa fas fa-envelope" aria-hidden="true"></i> <?php echo esc_html($target_user->user_email); ?>
|
||||
<span class="uc-header__meta-item but" data-clipboard-tag="<?php esc_attr_e('邮箱', 'jio'); ?>" data-clipboard-text="<?php echo esc_attr($target_user->user_email); ?>" title="<?php esc_attr_e('点击复制邮箱', 'jio'); ?>">
|
||||
<i class="fa far fa-envelope" aria-hidden="true"></i><?php echo esc_html($target_user->user_email); ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* 用户中心顶部资料卡的元信息契约（参考主题 1:1）。
|
||||
*
|
||||
* 硬约束：
|
||||
* 1) 用户名 / 邮箱是「胶囊」条目：.but 外壳 + data-clipboard-* 点击复制，
|
||||
* 与参考主题 .author-header .user-identity > .but 同形。
|
||||
* 2) 图标使用描边字形（far fa-user / far fa-envelope），不是实心 fas。
|
||||
* 3) 几何参数与参考一致：padding 2px 6px、margin 5px 6px 0 0、字号 12px、
|
||||
* 行高 1.4；这套规则由 layout.css 自持，不依赖 medal.css 是否入队。
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
const test = require('node:test');
|
||||
|
||||
const root = path.resolve(__dirname, '..', '..');
|
||||
const read = (file) => fs.readFileSync(path.join(root, file), 'utf8');
|
||||
|
||||
test('用户中心元信息是参考主题的可复制胶囊条目', () => {
|
||||
const header = read('inc/helpers/user-center-renderers/profile-header.php');
|
||||
|
||||
assert.match(header, /class="uc-header__meta-item but"\s+data-clipboard-tag=/);
|
||||
assert.match(header, /data-clipboard-text="<\?php echo esc_attr\(\$target_user->user_login\); \?>"/);
|
||||
assert.match(header, /data-clipboard-text="<\?php echo esc_attr\(\$target_user->user_email\); \?>"/);
|
||||
|
||||
// 描边字形，与参考的 fa-user-o / fa-envelope-o 等价（FA5 用 far 表示）。
|
||||
assert.match(header, /fa far fa-user/);
|
||||
assert.match(header, /fa far fa-envelope/);
|
||||
assert.doesNotMatch(header, /fa fas fa-user"|fa fas fa-envelope"/);
|
||||
});
|
||||
|
||||
test('元信息胶囊的几何参数与参考主题一致', () => {
|
||||
const layout = read('assets/css/routes/profile/layout.css');
|
||||
|
||||
const block = layout.slice(
|
||||
layout.indexOf('.uc-header__meta-item {'),
|
||||
layout.indexOf('.uc-header__meta-item {') + 700,
|
||||
);
|
||||
assert.match(block, /padding:\s*2px 6px;/);
|
||||
assert.match(block, /margin:\s*5px 6px 0 0;/);
|
||||
assert.match(block, /font-size:\s*12px;/);
|
||||
assert.match(block, /line-height:\s*1\.4;/);
|
||||
|
||||
// 版式由 layout.css 自持，medal 模块未入队时形态不变。
|
||||
assert.match(layout, /\.uc-header__meta-item \{/);
|
||||
});
|
||||
Reference in new issue
Block a user