kate522
7d78a33a9d
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.
49 lines
2.1 KiB
JavaScript
49 lines
2.1 KiB
JavaScript
/**
|
|
* 用户中心顶部资料卡的元信息契约（参考主题 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 \{/);
|
|
});
|