fix(auth): 登录页修按钮丢失 + 黑块等高 + 品牌文案重梳(去流程罗列)

用户反馈登录页:① 登录按钮不见了 ② 左黑块比右栏矮一截 ③ 左侧铺一堆生成流程/
失败不扣费,杂、不像品牌门面。

- 按钮丢失:.auth-submit-zone(按钮+SSO+切换)原是 .auth-form 的兄弟节点,登录态被当成
  flex 第三列挤出、被 overflow 裁掉 → 移进 .auth-form 表单内,按钮恢复。
- 黑块矮:.auth-brand 基础规则带 height:100%,而登录/注册 wrap 是 height:auto,百分比高
  解析不出 → 黑块退回内容高、退出 stretch。删掉 height:100%,靠 align-self:stretch 拉等高。
- 文案:删 VALUE_POINTS 四条功能罗列 + 流程箭头 p,登录/注册统一干净品牌短句
  (「让每件商品都有自己的带货短剧」/「开通团队,拍出第一条带货短剧」),守 design.md 克制调性。

实测:黑块=表单=600px 等高;登录按钮+SSO 显示正常。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
seaislee1209
2026-06-19 19:14:26 +08:00
co-authored by Claude Opus 4.8
parent 352f99d479
commit ec573151d2
2 changed files with 18 additions and 35 deletions
+11 -27
View File
@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from "react";
import type { FormEvent } from "react";
import {
ArrowRight,
Check,
Eye,
EyeOff,
Info,
@@ -37,13 +36,6 @@ type RegisterErrors = {
agree?: string;
};
const VALUE_POINTS: { strong: string; rest: string }[] = [
{ strong: "5 阶段流水线", rest: "脚本 → 资产 → 故事板 → 视频片段 → 拼接导出" },
{ strong: "失败不扣费", rest: "任务仅在用户通过时扣费,失败 / 超时 / 重跑一律不扣" },
{ strong: "团队 + 角色 + 四层额度", rest: "超管 / 团管 / 成员,日 / 月 + 团队 / 总四层防超支" },
{ strong: "跨项目资产库", rest: "主播 / 场景 / 商品图沉淀复用,不重复生成" }
];
export function AuthScreen({
initialMode,
onModeChange,
@@ -213,27 +205,19 @@ export function AuthScreen({
<aside className="auth-brand">
<div className="logo"><img className="logo-img" src="/assets/logo-dark.png" alt="Airshelf" /></div>
<div className="tag">// SHORT-VIDEO COMMERCE PLATFORM</div>
<div className="hero">
{mode === "register" ? (
<>
<div className="hero hero-top">
<h1><br /> <span className="h">AI </span> </h1>
<p> / 1-2 </p>
</div>
<div className="val-list">
{VALUE_POINTS.map((item) => (
<div className="val-item" key={item.strong}>
<span className="ic-v"><Check size={12} strokeWidth={2.2} aria-hidden="true" /></span>
<span className="txt-v"><b>{item.strong}</b> · {item.rest}</span>
</div>
))}
</div>
<h1><br /> <span className="h"></span></h1>
<p>1-2 </p>
</>
) : (
<div className="hero">
<h1>AI <br /><span className="h"></span></h1>
<p> AI Seedance 9:16 60s </p>
</div>
<>
<h1><br /><span className="h"></span></h1>
<p> </p>
</>
)}
</div>
<div className="foot"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></div>
</aside>
);
@@ -447,8 +431,6 @@ export function AuthScreen({
<label><input type="checkbox" checked={remember} onChange={(event) => setRemember(event.target.checked)} /> 7 </label>
<a href="#" onClick={(event) => { event.preventDefault(); showToast("重置密码", "请联系团队超管重置你的登录密码"); }}>?</a>
</div>
</form>
</section>
<div className="auth-submit-zone">
{loginProgress && !error && (
<div className="login-progress" role="status" aria-live="polite">
@@ -457,7 +439,7 @@ export function AuthScreen({
</div>
)}
{error && <div className="form-error" role="alert">{error}</div>}
<button className="btn-cta" type="button" form="login-form" disabled={busy} onClick={() => { void submitLogin(); }}>
<button className="btn-cta" type="submit" disabled={busy}>
{busy ? "登录中" : "登录"}
</button>
<div className="divider"><span className="line"></span><span className="txt">OR</span><span className="line"></span></div>
@@ -473,6 +455,8 @@ export function AuthScreen({
? <a href="/register" onClick={(event) => { event.preventDefault(); switchMode("register"); }}> </a>
</div>
</div>
</form>
</section>
</div>
{toast && (
<div className="toast show" role="status" aria-live="polite">
-1
View File
@@ -747,7 +747,6 @@ nav button svg { width: 14px; height: 14px; color: var(--ink-3); }
width: calc(100% - 420px);
align-self: stretch;
box-sizing: border-box;
height: 100%;
min-height: 0;
position: relative;
overflow: hidden;