feat(HEL-240): 按确认样图还原桌面登录页左右骨架
把登录门户改回确认稿的品牌行、中下部主标题、底部行情标签和 K 线背景，并让超宽屏按比例展开左栏。 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
总工
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
541fb48c1c
commit
f905b44675
@@ -374,10 +374,10 @@
|
||||
}
|
||||
],
|
||||
"css_layers": [
|
||||
"/shared/tokens.css?v=20260829-1",
|
||||
"/shared/tokens.css?v=20260829-hel240",
|
||||
"/shared/base.css?v=20260806-1",
|
||||
"/shared/shell.css?v=20260829-hel237",
|
||||
"/shared/auth.css?v=20260829-hel237",
|
||||
"/shared/auth.css?v=20260829-hel240",
|
||||
"/shared/components/controls.css?v=20260829-hel237",
|
||||
"/shared/components/navigation.css?v=20260820-1",
|
||||
"/shared/components/cards.css?v=20260820-1",
|
||||
@@ -465,7 +465,7 @@
|
||||
},
|
||||
{
|
||||
"path": "frontend/index.html",
|
||||
"bytes": 48248,
|
||||
"bytes": 48253,
|
||||
"lines": 664
|
||||
},
|
||||
{
|
||||
|
||||
+2
-2
@@ -34,10 +34,10 @@
|
||||
document.documentElement.style.colorScheme = theme;
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="/shared/tokens.css?v=20260829-1">
|
||||
<link rel="stylesheet" href="/shared/tokens.css?v=20260829-hel240">
|
||||
<link rel="stylesheet" href="/shared/base.css?v=20260806-1">
|
||||
<link rel="stylesheet" href="/shared/shell.css?v=20260829-hel237">
|
||||
<link rel="stylesheet" href="/shared/auth.css?v=20260829-hel237">
|
||||
<link rel="stylesheet" href="/shared/auth.css?v=20260829-hel240">
|
||||
<link rel="stylesheet" href="/shared/components/controls.css?v=20260829-hel237">
|
||||
<link rel="stylesheet" href="/shared/components/navigation.css?v=20260820-1">
|
||||
<link rel="stylesheet" href="/shared/components/cards.css?v=20260820-1">
|
||||
|
||||
@@ -19,18 +19,51 @@
|
||||
document.documentElement.style.colorScheme = theme;
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="/shared/tokens.css?v=20260829-1">
|
||||
<link rel="stylesheet" href="/shared/tokens.css?v=20260829-hel240">
|
||||
<link rel="stylesheet" href="/shared/base.css?v=20260806-1">
|
||||
<link rel="stylesheet" href="/shared/auth.css?v=20260829-1">
|
||||
<link rel="stylesheet" href="/shared/auth.css?v=20260829-hel240">
|
||||
<link rel="stylesheet" href="/shared/components/controls.css?v=20260820-2">
|
||||
</head>
|
||||
<body class="login-portal">
|
||||
<button id="loginThemeToggle" class="login-theme-toggle" type="button">🌙 夜间</button>
|
||||
<aside class="login-brand" aria-hidden="true">
|
||||
<div class="login-brand-header">
|
||||
<div class="login-brand-mark"><span class="login-brand-glyph">复</span></div>
|
||||
<div class="login-brand-identity">
|
||||
<p class="login-brand-name">小白复盘</p>
|
||||
<p class="login-brand-subtitle">A股个人复盘工作台</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-brand-copy">
|
||||
<p class="login-brand-kicker">收盘之后 · 复盘开始</p>
|
||||
<h1 class="login-brand-title">小白复盘</h1>
|
||||
<p class="login-brand-lead">看懂情绪周期，把复盘变成下一次的先手。</p>
|
||||
<h1 class="login-brand-title">看懂情绪周期，把复盘变成下一次的先手。</h1>
|
||||
<p class="login-brand-lead">情绪周期、涨停梯队、主题轮动、竞价、龙虎榜、人气榜、交易复盘，集中在一个安静的复盘空间。</p>
|
||||
</div>
|
||||
<div class="login-brand-market">
|
||||
<svg class="login-brand-chart" viewBox="0 0 480 168" focusable="false">
|
||||
<defs>
|
||||
<linearGradient id="loginChartFade" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stop-color="#d7e4ff" stop-opacity="0.18"></stop>
|
||||
<stop offset="100%" stop-color="#d7e4ff" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path class="login-chart-area" d="M8 118 C 52 108, 78 96, 112 102 S 168 128, 204 112 S 268 78, 312 86 S 372 118, 428 92 L 472 84 L 472 168 L 8 168 Z"></path>
|
||||
<g class="login-candles">
|
||||
<g class="is-up" transform="translate(36 0)"><line x1="8" y1="58" x2="8" y2="128"></line><rect x="2" y="72" width="12" height="40"></rect></g>
|
||||
<g class="is-down" transform="translate(68 0)"><line x1="8" y1="64" x2="8" y2="132"></line><rect x="2" y="86" width="12" height="28"></rect></g>
|
||||
<g class="is-up" transform="translate(100 0)"><line x1="8" y1="48" x2="8" y2="118"></line><rect x="2" y="60" width="12" height="44"></rect></g>
|
||||
<g class="is-down" transform="translate(132 0)"><line x1="8" y1="70" x2="8" y2="136"></line><rect x="2" y="92" width="12" height="26"></rect></g>
|
||||
<g class="is-up" transform="translate(164 0)"><line x1="8" y1="42" x2="8" y2="110"></line><rect x="2" y="54" width="12" height="38"></rect></g>
|
||||
<g class="is-up" transform="translate(196 0)"><line x1="8" y1="36" x2="8" y2="98"></line><rect x="2" y="48" width="12" height="32"></rect></g>
|
||||
<g class="is-down" transform="translate(228 0)"><line x1="8" y1="58" x2="8" y2="128"></line><rect x="2" y="78" width="12" height="36"></rect></g>
|
||||
<g class="is-up" transform="translate(260 0)"><line x1="8" y1="40" x2="8" y2="104"></line><rect x="2" y="52" width="12" height="36"></rect></g>
|
||||
<g class="is-down" transform="translate(292 0)"><line x1="8" y1="66" x2="8" y2="134"></line><rect x="2" y="88" width="12" height="30"></rect></g>
|
||||
<g class="is-up" transform="translate(324 0)"><line x1="8" y1="44" x2="8" y2="112"></line><rect x="2" y="58" width="12" height="40"></rect></g>
|
||||
<g class="is-down" transform="translate(356 0)"><line x1="8" y1="72" x2="8" y2="138"></line><rect x="2" y="96" width="12" height="24"></rect></g>
|
||||
<g class="is-up" transform="translate(388 0)"><line x1="8" y1="38" x2="8" y2="108"></line><rect x="2" y="50" width="12" height="42"></rect></g>
|
||||
<g class="is-up" transform="translate(420 0)"><line x1="8" y1="32" x2="8" y2="96"></line><rect x="2" y="44" width="12" height="34"></rect></g>
|
||||
</g>
|
||||
<path class="login-chart-line" d="M8 118 C 52 108, 78 96, 112 102 S 168 128, 204 112 S 268 78, 312 86 S 372 118, 428 92 L 472 84"></path>
|
||||
</svg>
|
||||
<dl class="login-brand-stats">
|
||||
<div class="login-stat">
|
||||
<dt>市场情绪</dt>
|
||||
@@ -44,16 +77,19 @@
|
||||
<dt>跌停</dt>
|
||||
<dd>4</dd>
|
||||
</div>
|
||||
<div class="login-stat">
|
||||
<div class="login-stat login-stat-wide">
|
||||
<dt>两市成交</dt>
|
||||
<dd>1.02万亿</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<p class="login-brand-disclaimer">股市有风险，投资需谨慎 · 本工具仅供个人复盘学习使用</p>
|
||||
</aside>
|
||||
<main class="login-stage">
|
||||
<button id="loginThemeToggle" class="login-theme-toggle" type="button">🌙 夜间</button>
|
||||
<section class="login-card" id="loginCard" aria-live="polite"></section>
|
||||
</main>
|
||||
<script src="/shared/api.js?v=20260803-2"></script>
|
||||
<script src="/login/page.js?v=20260829-1"></script>
|
||||
<script src="/login/page.js?v=20260829-hel240"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+66
-19
@@ -13,6 +13,8 @@
|
||||
loading: false,
|
||||
confirmingId: null,
|
||||
error: "",
|
||||
username: "",
|
||||
password: "",
|
||||
};
|
||||
|
||||
function escapeHtml(value) {
|
||||
@@ -52,9 +54,27 @@
|
||||
state.error = message || "";
|
||||
}
|
||||
|
||||
function membershipLabel(account) {
|
||||
if (account.role === "admin") return account.membership?.subscribed ? "管理员 · 会员" : "管理员";
|
||||
return account.membership?.subscribed ? "会员" : "普通用户";
|
||||
function formatLastUsed(value) {
|
||||
if (!value) return "";
|
||||
const parsed = new Date(value);
|
||||
if (Number.isNaN(parsed.getTime())) return "";
|
||||
const now = new Date();
|
||||
const hh = String(parsed.getHours()).padStart(2, "0");
|
||||
const mm = String(parsed.getMinutes()).padStart(2, "0");
|
||||
if (parsed.toDateString() === now.toDateString()) return `今天 ${hh}:${mm}`;
|
||||
const yesterday = new Date(now);
|
||||
yesterday.setDate(now.getDate() - 1);
|
||||
if (parsed.toDateString() === yesterday.toDateString()) return `昨天 ${hh}:${mm}`;
|
||||
return `${parsed.getMonth() + 1}月${parsed.getDate()}日`;
|
||||
}
|
||||
|
||||
function chipsFor(account, current) {
|
||||
const chips = [];
|
||||
if (current) chips.push('<span class="login-chip login-chip-current">当前</span>');
|
||||
if (account.role === "admin") chips.push('<span class="login-chip">管理员</span>');
|
||||
if (account.membership?.subscribed) chips.push('<span class="login-chip login-chip-member">会员</span>');
|
||||
else if (account.role !== "admin") chips.push('<span class="login-chip">普通用户</span>');
|
||||
return chips.join("");
|
||||
}
|
||||
|
||||
function enterApp() {
|
||||
@@ -66,34 +86,43 @@
|
||||
const registering = state.mode === "register";
|
||||
const submitLabel = options.submitLabel
|
||||
|| (state.loading ? "正在登录..." : registering ? "注册并进入" : options.add ? "添加并进入" : "登录");
|
||||
const lead = options.lead;
|
||||
const hint = options.hint;
|
||||
const invalid = state.error ? " is-invalid" : "";
|
||||
return [
|
||||
options.back
|
||||
? '<button class="login-back" type="button" data-login-action="picker">返回账号列表</button>'
|
||||
: "",
|
||||
`<h2 class="login-card-title">${escapeHtml(options.title)}</h2>`,
|
||||
`<p class="login-card-lead">${escapeHtml(options.lead)}</p>`,
|
||||
`<p class="login-card-lead">${escapeHtml(lead)}</p>`,
|
||||
'<div class="login-tabs" role="tablist">',
|
||||
`<button class="login-tab${state.mode === "login" ? " is-active" : ""}" type="button" data-auth-mode="login">登录</button>`,
|
||||
`<button class="login-tab${state.mode === "register" ? " is-active" : ""}" type="button" data-auth-mode="register">注册</button>`,
|
||||
"</div>",
|
||||
'<form class="login-form" id="loginForm">',
|
||||
'<label class="form-field"><span>账号名</span><input id="loginUsername" type="text" minlength="3" maxlength="30" autocomplete="username" required></label>',
|
||||
`<label class="form-field"><span>密码</span><input id="loginPassword" type="password" minlength="8" maxlength="128" autocomplete="${registering ? "new-password" : "current-password"}" required></label>`,
|
||||
`<label class="form-field"><span>账号名</span><input id="loginUsername" type="text" minlength="3" maxlength="30" autocomplete="username" placeholder="请输入账号名" value="${escapeHtml(state.username)}" required></label>`,
|
||||
`<label class="form-field"><span>密码</span><input id="loginPassword" class="${invalid.trim()}" type="password" minlength="8" maxlength="128" autocomplete="${registering ? "new-password" : "current-password"}" placeholder="请输入密码" value="${escapeHtml(state.password)}" required></label>`,
|
||||
`<label class="form-field" id="loginConfirmField"${registering ? "" : " hidden"}><span>确认密码</span><input id="loginPasswordConfirm" type="password" minlength="8" maxlength="128" autocomplete="new-password"${registering ? " required" : ""}></label>`,
|
||||
state.error ? `<p class="login-error">${escapeHtml(state.error)}</p>` : '<p class="login-error" hidden></p>',
|
||||
`<button class="button primary login-submit" type="submit"${state.loading ? " disabled" : ""}>`,
|
||||
state.loading ? '<span class="login-spinner" aria-hidden="true"></span>' : "",
|
||||
`<span>${escapeHtml(submitLabel)}</span></button>`,
|
||||
"</form>",
|
||||
'<p class="login-hint">密码连续输错 5 次将锁定 10 分钟。还没有账号？切换到「注册」创建。</p>',
|
||||
`<p class="login-hint">${escapeHtml(hint)}</p>`,
|
||||
].join("");
|
||||
}
|
||||
|
||||
function accountRow(account) {
|
||||
const current = Number(account.user_id) === Number(state.currentUserId);
|
||||
const confirming = Number(state.confirmingId) === Number(account.user_id);
|
||||
const classes = `login-account-row${current ? " is-current" : ""}${confirming ? " is-confirming" : ""}`;
|
||||
if (state.view === "manage" && confirming) {
|
||||
const managing = state.view === "manage";
|
||||
const classes = [
|
||||
"login-account-row",
|
||||
current ? "is-current" : "",
|
||||
confirming ? "is-confirming" : "",
|
||||
!managing && !current ? "is-switchable" : "",
|
||||
].filter(Boolean).join(" ");
|
||||
if (managing && confirming) {
|
||||
return [
|
||||
`<div class="${classes}" data-user-id="${account.user_id}">`,
|
||||
`<p class="login-confirm-copy">移除「${escapeHtml(account.username)}」的本机记录？</p>`,
|
||||
@@ -103,16 +132,24 @@
|
||||
"</div></div>",
|
||||
].join("");
|
||||
}
|
||||
const action = state.view === "manage"
|
||||
? `<button class="login-account-remove" type="button" data-confirm-id="${account.user_id}">移除</button>`
|
||||
const glyph = escapeHtml(String(account.username || "账").slice(0, 1));
|
||||
const tone = Number(account.user_id || 0) % 4;
|
||||
const used = formatLastUsed(account.last_used_at);
|
||||
const action = managing
|
||||
? `<button class="login-account-remove" type="button" data-confirm-id="${account.user_id}" aria-label="移除 ${escapeHtml(account.username)}"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6 2h4l.5 1H14v1H2V3h3.5L6 2zm1 4v6H6V6h1zm3 0v6H9V6h1zM3.5 5H13l-.7 8.2A1.5 1.5 0 0 1 10.81 14H5.19a1.5 1.5 0 0 1-1.49-1.8L3.5 5z"></path></svg></button>`
|
||||
: current
|
||||
? '<span class="login-account-check" aria-hidden="true">✓</span>'
|
||||
: `<button class="login-account-enter" type="button" data-switch-id="${account.user_id}">进入</button>`;
|
||||
: "";
|
||||
const switchAttr = !managing && !current ? ` data-switch-id="${account.user_id}"` : "";
|
||||
return [
|
||||
`<div class="${classes}" data-user-id="${account.user_id}">`,
|
||||
`<div class="${classes}" data-user-id="${account.user_id}"${switchAttr}>`,
|
||||
`<span class="login-avatar tone-${tone}" aria-hidden="true">${glyph}</span>`,
|
||||
'<div class="login-account-meta">',
|
||||
'<div class="login-account-name">',
|
||||
`<strong>${escapeHtml(account.username)}</strong>`,
|
||||
`<span>${escapeHtml(membershipLabel(account))}${current ? " · 当前" : ""}</span>`,
|
||||
chipsFor(account, current),
|
||||
"</div>",
|
||||
used ? `<span class="login-account-used">上次登录 ${escapeHtml(used)}</span>` : "",
|
||||
"</div>",
|
||||
action,
|
||||
"</div>",
|
||||
@@ -124,9 +161,11 @@
|
||||
const managing = state.view === "manage";
|
||||
return [
|
||||
`<h2 class="login-card-title">${managing ? "管理账号记录" : "选择账号"}</h2>`,
|
||||
`<p class="login-card-lead">这台电脑已记录 ${count} 个账号，可直接进入，无需再次输入密码。</p>`,
|
||||
`<p class="login-card-lead">${managing
|
||||
? "移除只删除这台电脑上的登录记录，不会注销账号"
|
||||
: `这台电脑已记录 ${count} 个账号，点选即可进入，无需再次输入密码。`}</p>`,
|
||||
managing
|
||||
? '<button class="login-manage" type="button" data-login-action="picker">完成</button>'
|
||||
? '<div class="login-manage-toolbar"><p class="login-manage-hint">点击右侧图标移除对应记录</p><button class="login-manage-done" type="button" data-login-action="picker">完成</button></div>'
|
||||
: "",
|
||||
`<div class="login-account-list">${state.accounts.map(accountRow).join("")}</div>`,
|
||||
managing
|
||||
@@ -136,7 +175,9 @@
|
||||
? ""
|
||||
: '<button class="login-manage" type="button" data-login-action="manage">管理已记录的账号</button>',
|
||||
state.error ? `<p class="login-error">${escapeHtml(state.error)}</p>` : "",
|
||||
'<p class="login-privacy"><span class="login-lock" aria-hidden="true">🔒</span>账号记录仅保存在这台电脑的浏览器中</p>',
|
||||
managing
|
||||
? '<p class="login-privacy"><span class="login-lock" aria-hidden="true">🔒</span>移除后再次登录该账号需重新输入密码</p>'
|
||||
: '<p class="login-privacy"><span class="login-lock" aria-hidden="true">🔒</span>账号记录仅保存在这台电脑的浏览器中</p>',
|
||||
].join("");
|
||||
}
|
||||
|
||||
@@ -145,7 +186,10 @@
|
||||
if (state.view === "first" || state.view === "add") {
|
||||
card.innerHTML = formMarkup({
|
||||
title: state.view === "add" ? "添加账号" : "欢迎回来",
|
||||
lead: "登录后进入你的复盘空间",
|
||||
lead: state.view === "add" ? "登录另一个账号，添加后可随时一键切换" : "登录后进入你的复盘空间",
|
||||
hint: state.view === "add"
|
||||
? "添加后账号会保存在这台电脑，方便随时切换。"
|
||||
: "密码连续输错 5 次将锁定 10 分钟。还没有账号？切换到「注册」创建。",
|
||||
add: state.view === "add",
|
||||
back: state.view === "add",
|
||||
});
|
||||
@@ -185,7 +229,8 @@
|
||||
button.addEventListener("click", () => switchAccount(Number(button.dataset.switchId)));
|
||||
});
|
||||
card.querySelectorAll("[data-confirm-id]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
button.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
state.confirmingId = Number(button.dataset.confirmId);
|
||||
render();
|
||||
});
|
||||
@@ -212,6 +257,8 @@
|
||||
event.preventDefault();
|
||||
const username = document.querySelector("#loginUsername").value.trim();
|
||||
const password = document.querySelector("#loginPassword").value;
|
||||
state.username = username;
|
||||
state.password = password;
|
||||
if (state.mode === "register" && password !== document.querySelector("#loginPasswordConfirm").value) {
|
||||
setError("两次输入的密码不一致。");
|
||||
render();
|
||||
|
||||
+390
-67
@@ -1694,6 +1694,7 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.login-portal {
|
||||
min-height: 100vh;
|
||||
|
||||
@@ -1704,8 +1705,20 @@ button.account-role-badge:focus-visible {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.login-stage {
|
||||
position: relative;
|
||||
|
||||
flex: 1 1 auto;
|
||||
|
||||
display: grid;
|
||||
|
||||
place-items: center;
|
||||
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
.login-theme-toggle {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
@@ -1731,81 +1744,221 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.login-brand {
|
||||
width: clamp(420px, 34vw, 560px);
|
||||
position: relative;
|
||||
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
|
||||
padding: 44px 48px 36px;
|
||||
flex-direction: column;
|
||||
|
||||
width: var(--login-brand-share);
|
||||
|
||||
min-width: var(--login-brand-min);
|
||||
|
||||
max-width: var(--login-brand-cap);
|
||||
|
||||
flex: 0 0 var(--login-brand-share);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
padding: var(--login-brand-pad);
|
||||
|
||||
background: var(--login-brand-gradient);
|
||||
|
||||
color: #f4f7ff;
|
||||
}
|
||||
|
||||
.login-brand-header {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.login-brand-mark {
|
||||
display: flex;
|
||||
|
||||
flex: 0 0 var(--login-brand-mark-size);
|
||||
|
||||
align-items: center;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
width: 56px;
|
||||
width: var(--login-brand-mark-size);
|
||||
|
||||
height: 56px;
|
||||
height: var(--login-brand-mark-size);
|
||||
|
||||
border-radius: 16px;
|
||||
border-radius: 12px;
|
||||
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.login-brand-glyph {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.login-brand-identity {
|
||||
display: grid;
|
||||
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.login-brand-name {
|
||||
margin: 0;
|
||||
|
||||
font-size: var(--login-brand-name-size);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.login-brand-subtitle {
|
||||
margin: 0;
|
||||
|
||||
font-size: var(--font-size-caption);
|
||||
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.login-brand-copy {
|
||||
display: flex;
|
||||
|
||||
flex: 1 1 auto;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: flex-end;
|
||||
|
||||
padding: 24px 0 20px;
|
||||
}
|
||||
|
||||
.login-brand-kicker {
|
||||
margin: 28px 0 8px;
|
||||
display: inline-flex;
|
||||
|
||||
align-self: flex-start;
|
||||
|
||||
margin: 0 0 14px;
|
||||
|
||||
padding: 4px 10px;
|
||||
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
|
||||
border-radius: 999px;
|
||||
|
||||
font-size: var(--font-size-caption);
|
||||
|
||||
letter-spacing: 0.08em;
|
||||
|
||||
opacity: 0.78;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.login-brand-title {
|
||||
margin: 0;
|
||||
|
||||
font-size: 36px;
|
||||
max-width: 12.4em;
|
||||
|
||||
font-size: var(--login-hero-size);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.login-brand-lead {
|
||||
margin: 12px 0 0;
|
||||
|
||||
max-width: 18em;
|
||||
max-width: 28em;
|
||||
|
||||
font-size: var(--font-size-body);
|
||||
font-size: var(--font-size-label);
|
||||
|
||||
line-height: 1.7;
|
||||
|
||||
opacity: 0.86;
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.login-brand-market {
|
||||
position: relative;
|
||||
|
||||
min-height: 168px;
|
||||
}
|
||||
|
||||
.login-brand-chart {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
|
||||
height: 168px;
|
||||
}
|
||||
|
||||
.login-chart-area {
|
||||
fill: url(#loginChartFade);
|
||||
}
|
||||
|
||||
.login-chart-line {
|
||||
fill: none;
|
||||
|
||||
stroke: var(--login-trend-line);
|
||||
|
||||
stroke-width: 2;
|
||||
|
||||
stroke-linecap: round;
|
||||
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.login-candles line {
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.login-candles .is-up line,
|
||||
.login-candles .is-up rect {
|
||||
fill: var(--login-candle-up);
|
||||
|
||||
stroke: var(--login-candle-up);
|
||||
}
|
||||
|
||||
.login-candles .is-down line,
|
||||
.login-candles .is-down rect {
|
||||
fill: var(--login-candle-down);
|
||||
|
||||
stroke: var(--login-candle-down);
|
||||
}
|
||||
|
||||
.login-brand-stats {
|
||||
display: grid;
|
||||
position: absolute;
|
||||
|
||||
grid-template-columns: 1fr 1fr;
|
||||
right: 0;
|
||||
|
||||
gap: 16px 20px;
|
||||
bottom: 18px;
|
||||
|
||||
margin: 40px 0 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
gap: 8px;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-stat {
|
||||
display: flex;
|
||||
|
||||
align-items: baseline;
|
||||
|
||||
gap: 6px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
padding: 6px 10px;
|
||||
|
||||
border-radius: 999px;
|
||||
|
||||
background: var(--login-stat-chip-bg);
|
||||
}
|
||||
|
||||
.login-stat dt {
|
||||
@@ -1815,37 +1968,49 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.login-stat dd {
|
||||
margin: 4px 0 0;
|
||||
margin: 0;
|
||||
|
||||
font-size: 20px;
|
||||
font-size: var(--font-size-body);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.login-stat:nth-child(1) dd {
|
||||
color: #f0b45a;
|
||||
}
|
||||
|
||||
.login-stat:nth-child(2) dd {
|
||||
color: var(--login-candle-up);
|
||||
}
|
||||
|
||||
.login-stat:nth-child(3) dd {
|
||||
color: var(--login-candle-down);
|
||||
}
|
||||
|
||||
.login-stat-tag {
|
||||
margin-left: 6px;
|
||||
margin-left: 4px;
|
||||
|
||||
font-size: var(--font-size-caption);
|
||||
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
|
||||
.login-stage {
|
||||
flex: 1 1 auto;
|
||||
.login-brand-disclaimer {
|
||||
margin: 12px 0 0;
|
||||
|
||||
display: grid;
|
||||
font-size: var(--font-size-aux);
|
||||
|
||||
place-items: center;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
padding: 48px 24px;
|
||||
opacity: 0.48;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 400px;
|
||||
width: var(--login-card-width);
|
||||
|
||||
max-width: calc(100vw - 48px);
|
||||
|
||||
padding: 32px;
|
||||
padding: var(--login-card-pad);
|
||||
|
||||
border: 1px solid var(--border-strong);
|
||||
|
||||
@@ -1865,7 +2030,7 @@ button.account-role-badge:focus-visible {
|
||||
.login-card-title {
|
||||
margin: 0;
|
||||
|
||||
font-size: 22px;
|
||||
font-size: var(--login-card-title-size);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
@@ -1920,16 +2085,14 @@ button.account-role-badge:focus-visible {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-portal .form-field input {
|
||||
height: 38px;
|
||||
.login-portal .form-field input.is-invalid {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.login-submit {
|
||||
width: 100%;
|
||||
|
||||
height: 40px;
|
||||
|
||||
min-height: 40px;
|
||||
min-height: var(--login-submit-height);
|
||||
}
|
||||
|
||||
.login-spinner {
|
||||
@@ -1988,10 +2151,7 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.login-back,
|
||||
.login-add,
|
||||
.login-manage,
|
||||
.login-account-enter,
|
||||
.login-account-remove {
|
||||
.login-manage {
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
@@ -2010,15 +2170,27 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.login-portal .login-add {
|
||||
display: block;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
min-height: 40px;
|
||||
min-height: 44px;
|
||||
|
||||
margin-top: 8px;
|
||||
margin-top: 12px;
|
||||
|
||||
text-align: left;
|
||||
border: 1px dashed var(--border-strong);
|
||||
|
||||
border-radius: var(--size-radius-md);
|
||||
|
||||
background: transparent;
|
||||
|
||||
color: var(--action);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-portal .login-manage {
|
||||
@@ -2026,33 +2198,67 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
width: 100%;
|
||||
|
||||
min-height: 40px;
|
||||
min-height: 36px;
|
||||
|
||||
margin-top: 8px;
|
||||
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
|
||||
text-align: center;
|
||||
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.login-account-list {
|
||||
display: grid;
|
||||
|
||||
gap: 8px;
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-account-row {
|
||||
.login-manage-toolbar {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
min-height: 58px;
|
||||
gap: 12px;
|
||||
|
||||
padding: 0 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.login-manage-hint {
|
||||
margin: 0;
|
||||
|
||||
color: var(--text-tertiary);
|
||||
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.login-manage-done {
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
|
||||
color: var(--action);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-account-list {
|
||||
display: grid;
|
||||
|
||||
gap: 10px;
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-account-row {
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
|
||||
align-items: center;
|
||||
|
||||
gap: 12px;
|
||||
|
||||
min-height: var(--login-account-row-min);
|
||||
|
||||
padding: 10px 14px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
|
||||
@@ -2061,6 +2267,10 @@ button.account-role-badge:focus-visible {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.login-account-row.is-switchable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-account-row.is-current {
|
||||
border-color: var(--action);
|
||||
}
|
||||
@@ -2068,33 +2278,135 @@ button.account-role-badge:focus-visible {
|
||||
.login-account-row.is-confirming {
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
|
||||
gap: 10px;
|
||||
|
||||
padding: 12px 14px;
|
||||
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.login-avatar {
|
||||
display: grid;
|
||||
|
||||
place-items: center;
|
||||
|
||||
width: var(--login-account-avatar);
|
||||
|
||||
height: var(--login-account-avatar);
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
color: #fff;
|
||||
|
||||
font-size: var(--font-size-body);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.login-avatar.tone-0 {
|
||||
background: var(--action);
|
||||
}
|
||||
|
||||
.login-avatar.tone-1 {
|
||||
background: var(--market-up);
|
||||
}
|
||||
|
||||
.login-avatar.tone-2 {
|
||||
background: var(--market-down);
|
||||
}
|
||||
|
||||
.login-avatar.tone-3 {
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
.login-account-meta {
|
||||
display: grid;
|
||||
|
||||
gap: 2px;
|
||||
gap: 4px;
|
||||
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.login-account-name {
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-items: center;
|
||||
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.login-account-meta strong {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.login-account-meta span {
|
||||
.login-account-used {
|
||||
color: var(--text-tertiary);
|
||||
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.login-chip {
|
||||
display: inline-flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
min-height: 18px;
|
||||
|
||||
padding: 0 6px;
|
||||
|
||||
border-radius: 999px;
|
||||
|
||||
background: var(--surface-muted);
|
||||
|
||||
color: var(--text-secondary);
|
||||
|
||||
font-size: var(--font-size-aux);
|
||||
}
|
||||
|
||||
.login-chip-current {
|
||||
background: var(--action-soft);
|
||||
|
||||
color: var(--action);
|
||||
}
|
||||
|
||||
.login-chip-member {
|
||||
background: var(--warning-soft);
|
||||
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.login-account-check {
|
||||
color: var(--action);
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login-account-remove {
|
||||
display: grid;
|
||||
|
||||
place-items: center;
|
||||
|
||||
width: 28px;
|
||||
|
||||
height: 28px;
|
||||
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
|
||||
color: var(--text-tertiary);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-account-remove:hover {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.login-confirm-copy {
|
||||
margin: 0;
|
||||
|
||||
@@ -2107,6 +2419,18 @@ button.account-role-badge:focus-visible {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (min-width: 1921px) {
|
||||
.login-brand {
|
||||
width: var(--login-brand-wide-share);
|
||||
|
||||
min-width: var(--login-brand-cap);
|
||||
|
||||
max-width: none;
|
||||
|
||||
flex-basis: var(--login-brand-wide-share);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.login-portal {
|
||||
flex-direction: column;
|
||||
@@ -2115,22 +2439,21 @@ button.account-role-badge:focus-visible {
|
||||
.login-brand {
|
||||
width: 100%;
|
||||
|
||||
min-width: 0;
|
||||
|
||||
max-width: none;
|
||||
|
||||
flex-basis: auto;
|
||||
|
||||
padding: 20px 20px 16px;
|
||||
}
|
||||
|
||||
.login-brand-lead,
|
||||
.login-brand-stats {
|
||||
.login-brand-copy,
|
||||
.login-brand-market,
|
||||
.login-brand-disclaimer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-brand-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.login-brand-kicker {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.login-stage {
|
||||
padding: 28px 16px 40px;
|
||||
}
|
||||
|
||||
@@ -147,6 +147,24 @@
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 220ms;
|
||||
--login-brand-gradient: linear-gradient(165deg, #0c1e4a, #16307c, #2153cc);
|
||||
--login-brand-share: 34%;
|
||||
--login-brand-min: 420px;
|
||||
--login-brand-cap: 560px;
|
||||
--login-brand-wide-share: 29.2%;
|
||||
--login-brand-pad: 36px 40px 24px;
|
||||
--login-brand-mark-size: 44px;
|
||||
--login-brand-name-size: 16px;
|
||||
--login-hero-size: 28px;
|
||||
--login-card-width: 408px;
|
||||
--login-card-pad: 32px;
|
||||
--login-card-title-size: 22px;
|
||||
--login-account-row-min: 72px;
|
||||
--login-account-avatar: 40px;
|
||||
--login-submit-height: 40px;
|
||||
--login-stat-chip-bg: rgba(8, 12, 24, 0.48);
|
||||
--login-candle-up: #e07078;
|
||||
--login-candle-down: #3db88a;
|
||||
--login-trend-line: rgba(244, 247, 255, 0.88);
|
||||
|
||||
--font-size-aux: 11.5px;
|
||||
--font-size-caption: 12.5px;
|
||||
@@ -516,6 +534,10 @@
|
||||
--warning-line-strong: #66502d;
|
||||
--control-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||||
--login-brand-gradient: linear-gradient(165deg, #080c18, #0e1730, #14224a);
|
||||
--login-stat-chip-bg: rgba(6, 8, 16, 0.58);
|
||||
--login-candle-up: #f06d73;
|
||||
--login-candle-down: #43bc8a;
|
||||
--login-trend-line: rgba(232, 236, 244, 0.9);
|
||||
--dialog-backdrop: var(--backdrop);
|
||||
--ladder-level-1: #2d2426;
|
||||
--ladder-level-2: #2b2822;
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
const { test, expect } = require("@playwright/test");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
const SHOT_DIR = path.resolve(__dirname, "../../../verify-shots");
|
||||
fs.mkdirSync(SHOT_DIR, { recursive: true });
|
||||
|
||||
function loginPayload(user) {
|
||||
return {
|
||||
@@ -54,6 +59,15 @@ async function mockLoginPortal(page, options = {}) {
|
||||
return;
|
||||
}
|
||||
if ((url.pathname === "/api/auth/login" || url.pathname === "/api/auth/register") && method === "POST") {
|
||||
if (options.loginDelay) await new Promise((resolve) => setTimeout(resolve, options.loginDelay));
|
||||
if (options.loginFails) {
|
||||
await route.fulfill({
|
||||
status: 401,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ error: "账号名或密码不正确，请重新输入。" }),
|
||||
});
|
||||
return;
|
||||
}
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
@@ -149,3 +163,128 @@ test("managing accounts removes a local record after inline confirmation", async
|
||||
await expect(page.locator(".login-account-row")).toHaveCount(1);
|
||||
await expect(page.locator(".login-account-row")).toContainText("alpha_user");
|
||||
});
|
||||
|
||||
async function assertConfirmedSkeleton(page, { width, height }) {
|
||||
await expect(page.locator(".login-brand-title")).toHaveText("看懂情绪周期，把复盘变成下一次的先手。");
|
||||
await expect(page.locator(".login-brand-header")).toBeVisible();
|
||||
await expect(page.locator(".login-brand-chart")).toBeVisible();
|
||||
await expect(page.locator(".login-brand-stats")).toBeVisible();
|
||||
await expect(page.locator(".login-brand-kicker")).toHaveText("收盘之后 · 复盘开始");
|
||||
const brand = await page.locator(".login-brand").boundingBox();
|
||||
const header = await page.locator(".login-brand-header").boundingBox();
|
||||
const mark = await page.locator(".login-brand-mark").boundingBox();
|
||||
const name = await page.locator(".login-brand-name").boundingBox();
|
||||
const title = await page.locator(".login-brand-title").boundingBox();
|
||||
const stats = await page.locator(".login-brand-stats").boundingBox();
|
||||
const chart = await page.locator(".login-brand-chart").boundingBox();
|
||||
const card = await page.locator(".login-card").boundingBox();
|
||||
expect(brand).toBeTruthy();
|
||||
expect(header.y - brand.y).toBeLessThan(48);
|
||||
expect(Math.abs(mark.y - name.y)).toBeLessThan(16);
|
||||
expect(title.y).toBeGreaterThan(height * 0.28);
|
||||
expect(title.y).toBeLessThan(height * 0.72);
|
||||
expect(stats.y).toBeGreaterThan(height * 0.55);
|
||||
expect(chart.height).toBeGreaterThan(80);
|
||||
expect(card.width).toBeGreaterThan(380);
|
||||
expect(card.width).toBeLessThan(450);
|
||||
if (width === 1440) {
|
||||
expect(brand.width).toBeGreaterThan(470);
|
||||
expect(brand.width).toBeLessThan(520);
|
||||
} else if (width === 1920) {
|
||||
expect(brand.width).toBeGreaterThan(540);
|
||||
expect(brand.width).toBeLessThan(580);
|
||||
} else {
|
||||
expect(brand.width).toBeGreaterThan(560);
|
||||
}
|
||||
}
|
||||
|
||||
async function openPortal(page, { theme, width, height, accounts, currentUserId, loginFails, loginDelay }) {
|
||||
await page.addInitScript((nextTheme) => {
|
||||
localStorage.setItem("xiaobaiTheme", nextTheme);
|
||||
}, theme);
|
||||
await page.setViewportSize({ width, height });
|
||||
await mockLoginPortal(page, { accounts, currentUserId, loginFails, loginDelay });
|
||||
await page.goto("/login/");
|
||||
}
|
||||
|
||||
for (const theme of ["light", "dark"]) {
|
||||
for (const [width, height] of [[1440, 900], [1920, 1080]]) {
|
||||
test(`confirmed skeleton ${theme} ${width}x${height}`, async ({ page }) => {
|
||||
await openPortal(page, { theme, width, height, accounts: [] });
|
||||
await assertConfirmedSkeleton(page, { width, height });
|
||||
await expect(page.locator("#loginThemeToggle")).toHaveText(theme === "dark" ? "☀ 日间" : "🌙 夜间");
|
||||
await page.screenshot({ path: path.join(SHOT_DIR, `first-${theme}-${width}.png`), fullPage: true });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
test("ultrawide keeps the left brand from collapsing into a strip", async ({ page }) => {
|
||||
await openPortal(page, { theme: "dark", width: 2560, height: 1080, accounts: [] });
|
||||
await assertConfirmedSkeleton(page, { width: 2560, height: 1080 });
|
||||
});
|
||||
|
||||
test("picker add remove error and loading share the same desktop skeleton", async ({ page }) => {
|
||||
const accounts = SAVED_ACCOUNTS.map((item) => ({ ...item }));
|
||||
await openPortal(page, {
|
||||
theme: "dark",
|
||||
width: 1440,
|
||||
height: 900,
|
||||
accounts,
|
||||
currentUserId: 1,
|
||||
});
|
||||
await assertConfirmedSkeleton(page, { width: 1440, height: 900 });
|
||||
await expect(page.locator(".login-card-title")).toHaveText("选择账号");
|
||||
await expect(page.locator(".login-avatar")).toHaveCount(2);
|
||||
await expect(page.locator(".login-add")).toBeVisible();
|
||||
await page.screenshot({ path: path.join(SHOT_DIR, "picker-dark-1440.png"), fullPage: true });
|
||||
|
||||
await page.locator('[data-login-action="add"]').click();
|
||||
await expect(page.locator(".login-card-title")).toHaveText("添加账号");
|
||||
await assertConfirmedSkeleton(page, { width: 1440, height: 900 });
|
||||
await page.screenshot({ path: path.join(SHOT_DIR, "add-dark-1440.png"), fullPage: true });
|
||||
|
||||
await page.locator('[data-login-action="picker"]').click();
|
||||
await page.locator('[data-login-action="manage"]').click();
|
||||
await expect(page.locator(".login-card-title")).toHaveText("管理账号记录");
|
||||
await page.locator('[data-confirm-id="2"]').click();
|
||||
await expect(page.locator(".login-confirm-copy")).toContainText("beta_user");
|
||||
await page.screenshot({ path: path.join(SHOT_DIR, "remove-dark-1440.png"), fullPage: true });
|
||||
});
|
||||
|
||||
test("login failure and loading keep the confirmed first-login skeleton", async ({ page }) => {
|
||||
await openPortal(page, {
|
||||
theme: "light",
|
||||
width: 1440,
|
||||
height: 900,
|
||||
accounts: [],
|
||||
loginFails: true,
|
||||
});
|
||||
await page.locator("#loginUsername").fill("baiqizhi");
|
||||
await page.locator("#loginPassword").fill("wrong-password");
|
||||
await page.locator(".login-submit").click();
|
||||
await expect(page.locator(".login-error")).toContainText("账号名或密码不正确");
|
||||
await expect(page.locator("#loginPassword")).toHaveClass(/is-invalid/);
|
||||
await assertConfirmedSkeleton(page, { width: 1440, height: 900 });
|
||||
await page.screenshot({ path: path.join(SHOT_DIR, "error-light-1440.png"), fullPage: true });
|
||||
});
|
||||
|
||||
test("loading button appears on the confirmed first-login skeleton", async ({ page }) => {
|
||||
await openPortal(page, {
|
||||
theme: "dark",
|
||||
width: 1440,
|
||||
height: 900,
|
||||
accounts: [],
|
||||
loginDelay: 2500,
|
||||
});
|
||||
await page.evaluate(() => {
|
||||
window.location.replace = () => {};
|
||||
});
|
||||
await page.locator("#loginUsername").fill("baiqizhi");
|
||||
await page.locator("#loginPassword").fill("password12");
|
||||
const submit = page.locator(".login-submit").click();
|
||||
await expect(page.locator(".login-submit")).toContainText("正在登录...");
|
||||
await expect(page.locator(".login-spinner")).toBeVisible();
|
||||
await assertConfirmedSkeleton(page, { width: 1440, height: 900 });
|
||||
await page.screenshot({ path: path.join(SHOT_DIR, "loading-dark-1440.png"), fullPage: true });
|
||||
await submit;
|
||||
});
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
from __future__ import annotations
|
||||
|
||||
import unittest
|
||||
from pathlib import Path
|
||||
|
||||
|
||||
ROOT = Path(__file__).resolve().parents[1]
|
||||
LOGIN = (ROOT / "frontend" / "login" / "index.html").read_text(encoding="utf-8")
|
||||
LOGIN_JS = (ROOT / "frontend" / "login" / "page.js").read_text(encoding="utf-8")
|
||||
AUTH = (ROOT / "frontend" / "shared" / "auth.css").read_text(encoding="utf-8")
|
||||
TOKENS = (ROOT / "frontend" / "shared" / "tokens.css").read_text(encoding="utf-8")
|
||||
|
||||
|
||||
class LoginPortalContractTests(unittest.TestCase):
|
||||
def test_confirmed_brand_skeleton_is_in_markup(self) -> None:
|
||||
for needle in (
|
||||
'class="login-brand-header"',
|
||||
'class="login-brand-name"',
|
||||
"A股个人复盘工作台",
|
||||
'class="login-brand-kicker"',
|
||||
"看懂情绪周期，把复盘变成下一次的先手。",
|
||||
'class="login-brand-chart"',
|
||||
'class="login-brand-stats"',
|
||||
"股市有风险，投资需谨慎",
|
||||
'id="loginThemeToggle"',
|
||||
'id="loginCard"',
|
||||
):
|
||||
self.assertIn(needle, LOGIN)
|
||||
|
||||
def test_login_tokens_own_the_confirmed_layout_metrics(self) -> None:
|
||||
for needle in (
|
||||
"--login-brand-share: 34%;",
|
||||
"--login-brand-cap: 560px;",
|
||||
"--login-brand-wide-share: 29.2%;",
|
||||
"--login-card-width: 408px;",
|
||||
"--login-hero-size: 28px;",
|
||||
"--login-account-row-min: 72px;",
|
||||
):
|
||||
self.assertIn(needle, TOKENS)
|
||||
self.assertIn("width: var(--login-brand-share);", AUTH)
|
||||
self.assertIn("width: var(--login-card-width);", AUTH)
|
||||
self.assertIn("justify-content: flex-end;", AUTH)
|
||||
|
||||
def test_portal_keeps_account_switch_and_theme_hooks(self) -> None:
|
||||
self.assertIn("data-switch-id", LOGIN_JS)
|
||||
self.assertIn('data-login-action="manage"', LOGIN_JS)
|
||||
self.assertIn('data-login-action="add"', LOGIN_JS)
|
||||
self.assertIn("xiaobaiTheme", LOGIN_JS)
|
||||
self.assertNotIn("内网个人版", LOGIN)
|
||||
self.assertNotIn("192.168.200.11", LOGIN)
|
||||
self.assertNotIn("/api/heaven", LOGIN_JS)
|
||||
Reference in New Issue
Block a user