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:
co-authored by
Claude Opus 4.8
parent
352f99d479
commit
ec573151d2
@@ -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>
|
||||
{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>
|
||||
</>
|
||||
) : (
|
||||
<div className="hero">
|
||||
<h1>AI 全流程<br /><span className="h">短剧化</span>带货生成</h1>
|
||||
<p>商品 → AI 脚本 → 故事板 → Seedance 视频片段 → 一键导出 9:16 ≤60s 成片。</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="hero">
|
||||
{mode === "register" ? (
|
||||
<>
|
||||
<h1>开通团队,<br />拍出第一条 <span className="h">带货短剧</span></h1>
|
||||
<p>1-2 小时,从一张商品图,到一条能卖货的短剧。</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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,9 +431,7 @@ 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">
|
||||
<div className="auth-submit-zone">
|
||||
{loginProgress && !error && (
|
||||
<div className="login-progress" role="status" aria-live="polite">
|
||||
<span className="login-progress-spinner" aria-hidden="true"></span>
|
||||
@@ -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>
|
||||
@@ -472,7 +454,9 @@ export function AuthScreen({
|
||||
<div className="switch-row">
|
||||
还没账号? <a href="/register" onClick={(event) => { event.preventDefault(); switchMode("register"); }}>注册团队 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
{toast && (
|
||||
<div className="toast show" role="status" aria-live="polite">
|
||||
|
||||
Reference in New Issue
Block a user