FinAgent 前端进度博客（二）｜登录页

系列说明：本系列按四个主页面加登录页各写一篇进度记录，本文为 第 2 篇：登录页。其余篇目将对应单股分析、分析报告、任务中心。

日期：2026-04-13
模块：frontend → 登录页（LoginPage）

---

负责模块：前端与可视化

本周任务：实现登陆页面两段式流程，背景加入动态背景，表单采用新拟态+毛玻璃+滑动切换。

1. 背景与目标

登录页最初为居中表单 + 空白，功能可用但缺少美感以及产品开场感；且若把背景写在全局 body 上，登录后主界面也会被同一张图铺满，体验不统一。

本次目标：

• 两段式流程：先 开场——大标题动效 +「开始使用」按钮；再进入 表单——登录/注册与账号密码。
• 动态背景：使用 全屏循环视频（src/image 下 mp4，Vite import 打包）+ 渐变暗角蒙版，保证文字对比度。
• 表单视觉：毛玻璃卡片 + 新拟态胶囊 Tab + 双面板 横向滑动切换 登录/注册。
• 工程边界：视频与深色底仅在 .loginWrap 内生效；body 保持浅灰，避免污染已登录的 appShell。

---

2. 页面结构概览

阶段	内容
intro	视频背景、暗角蒙版、可选四角装饰卡（大屏才显示）、徽章、大标题 FinAgent（渐显动画 + 单字母 hover 微交互）、「开始使用」与简短提示
form	毛玻璃卡片：小标题、登录/注册 Tab + 指示器滑动、双表单面板滑动、毛玻璃输入框、主按钮与幽灵辅助按钮

认证逻辑仍走 authApi：loginRequest / registerRequest 后 fetchMe，由父组件 onLoggedIn 写入用户态，与后端 /api/auth/* 一致。

---

3. 实现要点

3.1 状态与流程

• step: 'intro' | 'form'：控制开场与表单切换。
• titleRevealDone：由标题 animationend 触发；在 prefers-reduced-motion 下用 useEffect 直接置为 true，避免按钮永不出现。
• mode: 'login' | 'register'：控制 Tab、滑轨与两套表单；firstFieldRef 在 step === 'form' 时延迟聚焦对应账号输入。

3.2 背景与层级

• <video class="loginVideoBg">：muted loop playsInline autoPlay，pointer-events: none。
• .loginVideoDim：纵向渐变压暗，叠在视频之上。
• 内容：loginIntroMain 等使用较高 z-index，装饰层 loginIntroOrnament 较低；装饰卡在小屏/高度不足时隐藏，避免遮挡主文案。

3.3 样式组织

样式集中在 styles.css，类名以 login* 为前缀（如 loginCardGlass、loginInputGlass、loginNeumorphTabsGlass），与首页 home* 区分，减少全局冲突。

3.4 标题交互

将 FinAgent 拆为单字符 span.loginHeroLetter，hover 时做轻微位移、缩放、旋转与光晕；h1 保留 data-text 供 ::after 做柔和底影，增强在视频上的可读性。

以下是目前阶段展示

---

4. 涉及文件

文件	变更说明
frontend/src/pages/LoginPage.tsx	两段式 intro/form、视频背景、徽章与装饰、标题拆字、毛玻璃表单与滑动 Tab
frontend/src/styles.css	.loginWrap、视频/蒙版、开场与表单毛玻璃、动效与媒体查询
frontend/src/image/*.mp4	登录页循环背景视频资源（体积较大，构建会打入 dist）

---

5. 小结

登录页从「单屏表单」升级为 视频动态背景 + 开场动效 + 毛玻璃表单 + 滑动登录/注册，并在工程上把背景作用域收敛到登录容器，避免影响主应用。下一篇进度博客将聚焦 单股分析页（表单、任务创建与结果展示等）。