opsxsql/SQL平台评估与优化/sql_platform_optimization_sec03.md

3. 五套专业登录页设计方案

针对现有五个登录页组件（SplitView.tsx、CenteredCard.tsx、SidePanel.tsx、FullImage.tsx、MinimalDark.tsx）"不专业、太 low"的用户反馈，本章提供五套完整的专业级登录页重设计方案。每套方案均基于 React 19 + TypeScript + Tailwind CSS 4 + shadcn/ui + Lucide Icons 技术栈，保留现有的 useLogin 与 useTheme hook 架构，在视觉表现、交互体验与动效层次上实现全面升级。

五套方案分别对应五种截然不同的企业气质：科技互联、金融安全、云端 SaaS、极客代码、创意自然。设计方案遵循"一次一屏"（Single Screen）原则，确保登录流程简洁高效，同时在第一眼传递出强烈的品牌专业感。

---

3.1 方案一「极光科技」— 动态粒子科技风

设计概念与灵感来源

「极光科技」方案的灵感源自现代科技公司的数据可视化美学——深空般的背景中，粒子如数据节点般流动、连接，暗示着数据库节点之间的网络拓扑关系。设计参考了 Vercel、PlanetScale 等现代 DevTools 产品的暗黑登录页风格，将"数据流动"这一抽象概念转化为可感知的视觉语言。深色背景配合冷色调粒子动画，营造出深邃、专注、充满科技张力的第一印象。

适用场景

适合科技互联网公司、数据库工具产品、DevOps 平台、技术驱动型 SaaS 企业。这类企业的用户群体（开发者、DBA、技术人员）对科技感视觉有天然的好感度与信任预期。

视觉规范

元素	规范值	说明
背景渐变	#0a0e27 → #1a1f4b	深邃的深蓝到暗蓝，比纯黑更有空间感
粒子数量	80 个	足够形成视觉密度，不过度抢占注意力
粒子颜色	#3b82f680（半透蓝）	与品牌蓝色系一致，带透明度避免喧宾夺主
连线距离	120px	控制连线密度，确保画面不过于繁杂
卡片背景	rgba(255,255,255,0.03)	极微弱的白色，配合毛玻璃效果
卡片毛玻璃	backdrop-blur: 20px	iOS 风格毛玻璃，现代感强烈
卡片边框	1px solid rgba(255,255,255,0.08)	微妙的发光边框勾勒卡片轮廓
卡片圆角	16px	现代感的较大圆角
卡片内边距	40px 32px	宽裕的内部空间
Logo 底圆	56px，渐变 from #2563eb to #9333ea	渐变圆形底托提升品牌质感
Logo 图标	Shield（Lucide），白色，24px	安全感的盾形图标
品牌名	"DataGuard"，20px，白色，字重 600	清晰的品牌露出
输入框高度	44px	符合现代表单的最佳点击高度
输入框圆角	10px	与卡片圆角协调
输入框聚焦	边框 #3b82f6，外发光 0 0 0 3px rgba(59,130,246,0.15)	蓝色光晕聚焦指示
按钮渐变	from #2563eb to #7c3aed	蓝紫渐变，与现有品牌渐变一致
按钮高度	44px	与输入框等高，视觉对齐
按钮圆角	10px	与输入框统一
辅助链接色	#8b949e，hover #58a6ff	GitHub 风格的灰色链接

动效规范

粒子系统动画：使用 Canvas 2D 实现 60fps 粒子系统。每个粒子以随机速度在画布内移动（速度范围 0.3~0.8px/frame），碰到边界反弹。当两个粒子距离小于 120px 时，绘制连线（线条透明度随距离衰减：opacity = 1 - distance/120 * 0.7）。鼠标位置额外产生一个"引力点"，靠近鼠标的粒子连线距离阈值提升至 180px，形成交互反馈。

卡片入场动画：

@keyframes cardEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* duration: 600ms, easing: cubic-bezier(0.16, 1, 0.3, 1) */

使用 cubic-bezier(0.16, 1, 0.3, 1) 缓动函数——初始阶段快速响应，结尾柔和减速，营造"丝滑吸附"的质感。

输入框聚焦：边框颜色过渡 200ms ease，外发光同步渐显，给用户明确的焦点反馈。

按钮 Hover：transform: translateY(-1px) 微上移，box-shadow 从 0 4px 12px rgba(37,99,235,0.25) 增强为 0 8px 24px rgba(37,99,235,0.35)，过渡 200ms ease。

错误状态 Shake 动画：

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}
/* duration: 300ms, 执行 1 次，同时边框变为 #ef4444 */

代码实现要点

1. 粒子系统：使用 useRef<HTMLCanvasElement> 获取 Canvas 上下文，在 useEffect 中初始化粒子数组并启动 requestAnimationFrame 动画循环。粒子系统封装为独立的 ParticleBackground.tsx 组件，通过 props 接收 particleCount、connectionDistance、color 等参数。

2. 卡片结构：使用 Card（shadcn/ui）作为容器，外层包裹 div 设置 backdrop-blur-xl bg-white/[0.03] border border-white/[0.08] 实现毛玻璃效果。

3. 表单组件：Input 和 Button 直接使用 shadcn/ui 组件，通过 Tailwind 的 className 覆盖默认样式。输入框聚焦外发光使用 focus:ring-[3px] focus:ring-blue-500/15 focus:border-blue-500。

4. 状态管理：继续使用现有的 useLogin hook（username / password / loading / error），错误触发时通过条件类名绑定 shake 动画。

---

3.2 方案二「企业金融」— 银行级安全可信风

设计概念与灵感来源

金融类产品的登录页第一要务是传递"安全感"。「企业金融」方案借鉴了招商银行企业网银、Stripe Dashboard 以及 Bloomberg Terminal 的视觉语言——通过深沉的蓝色调、严谨的版式分割、明确的信任标识，在瞬间建立起用户对系统的信任。左右分屏的布局本身就是一种力量感的表达：左侧沉稳的品牌展示，右侧聚焦的表单操作，信息层级清晰，符合金融用户"高效、安全、专业"的心理预期。

适用场景

金融、银行、保险、证券、支付等强监管行业企业。用户群体包括金融从业者、企业财务人员、风控人员，他们对安全标识（SSL、加密、审计）高度敏感。

视觉规范

元素	规范值	说明
左侧背景	#0c1a3c → #1a365d	深蓝渐变，传递权威与稳重
左侧宽度	60%	大面积品牌展示区
右侧背景	#f8fafc	极浅灰白，与左侧形成清晰分割
右侧宽度	40%	聚焦的表单操作区
品牌 Logo	白色 Shield 图标 + "DataGuard"	居中偏上布局
Slogan	"安全的数据库变更管理"，18px，#94a3b8	简洁定位标语
信任指标	3 个：SSL 加密、权限隔离、审计追踪	带 CheckCircle 图标的列表
信任指标图标	CheckCircle2（Lucide），#22c55e	绿色对勾传递"已验证"
信任指标文字	#cbd5e1，14px	柔和的说明文字
右侧卡片	白色背景，圆角 16px	干净的表单容器
卡片阴影	0 4px 24px rgba(0,0,0,0.08)	微妙的浮起感
卡片内边距	48px 40px	金融级宽裕间距
登录标题	"欢迎回来"，24px，#0f172a，字重 700	亲切的问候
输入框样式	底部边框（Underline Input）	类似 Material Design 的底线输入
输入框高度	48px	稍大以凸显重要感
输入框边框	默认 border-b-2 border-slate-200，聚焦 border-[#1a365d]	底线聚焦变深蓝
按钮背景	#1a365d	沉稳深蓝，呼应左侧
按钮高度	48px	与输入框等高
按钮圆角	8px	相对克制的圆角，体现严谨
安全提示	"🔒 您的连接已加密保护"，12px，#64748b	明确的安全信号

动效规范

左右面板载入：页面加载时，左侧面板从左侧滑入（translateX(-40px) → 0，400ms ease-out），右侧面板从右侧同步滑入（translateX(40px) → 0，400ms ease-out，延迟 50ms）。两侧同时汇聚中间，隐喻"安全通道的建立"。

信任指标依次淡入：3 个信任指标在左侧面板就位后依次显示，每个间隔 150ms：

.trust-item:nth-child(1) { animation-delay: 200ms; }
.trust-item:nth-child(2) { animation-delay: 350ms; }
.trust-item:nth-child(3) { animation-delay: 500ms; }
/* 统一动画: opacity 0→1, translateX(-10px)→0, 300ms ease-out */

按钮 Hover：背景色从 #1a365d 平滑过渡为 #122a4a（加深 10%），同时增加 box-shadow: 0 4px 16px rgba(12,26,60,0.2)，过渡 200ms ease。

输入框聚焦：底部边框从 #e2e8f0 变为 #1a365d，宽度有微妙的"延展"效果（使用 scaleX 从 0→1 配合 transform-origin: left），200ms ease。

代码实现要点

1. 分屏布局：使用 CSS Grid grid-cols-[60%_40%] 或 Flex flex-[60] / flex-[40] 实现左右分割。移动端（< 1024px）切换为上下布局，左侧折叠为顶部横幅。

2. 底线输入框：不使用 shadcn/ui 默认的边框输入框，而是自定义 div 包裹 <input>，通过 border-b-2 + bg-transparent 实现底线样式，聚焦时切换 border-color。

3. 信任指标列表：封装为 TrustIndicators 子组件，接收指标数组渲染，配合 setTimeout 或 CSS animation-delay 实现依次淡入。

4. 安全提示：底部固定位置，使用 flex items-center gap-2 布局，锁图标使用 Lucide Lock 组件。

---

3.3 方案三「云端数据」— 云计算 SaaS 风

设计概念与灵感来源

云计算和 SaaS 产品的登录页追求的是"轻盈、开放、无门槛"。「云端数据」方案汲取了 Snowflake、Figma、Notion 等现代 SaaS 产品的登录体验——明亮的浅色调、友好的圆角语言、丰富的 SSO 集成选项，向用户传递"即开即用"的产品气质。右上角的装饰性云朵图案是对"云端"概念的直接呼应，但处理为低对比度的纹理，避免过度具象化。

适用场景

云服务商、SaaS 产品、互联网协作工具、中台系统、B2B 软件公司。用户群体包括产品经理、技术团队、普通企业用户，他们期望登录流程简单快捷，SSO 支持是加分项。

视觉规范

元素	规范值	说明
背景渐变	#f0f4f8 → #e2e8f0	柔和的天空感浅灰蓝渐变
装饰云朵	SVG 路径，右上角，opacity: 0.3	微妙的云端意象，不干扰主体
卡片背景	#ffffff 纯白	干净、明亮的中心焦点
卡片圆角	20px	SaaS 产品偏爱的友好大圆角
卡片阴影	0 8px 32px rgba(148,163,184,0.15)	柔和的悬浮阴影
卡片宽度	420px	适中宽度，聚焦表单
卡片内边距	48px 40px	宽裕的内部空间
顶部品牌区	40px 圆角矩形图标 + "SQL-Platform"	清晰的身份标识
品牌图标背景	from #0ea5e9 to #2563eb	天蓝到蓝的渐变，呼应云端主题
副标题	"数据库变更管理平台"，14px，#64748b	产品定位说明
输入框背景	#f8fafc	极浅灰底，区别于卡片白
输入框圆角	12px	圆角输入，友好感
输入框边框	默认无边框，聚焦 1px solid #3b82f6	最小化视觉噪音
输入框高度	46px	略大于标准，易于点击
按钮渐变	from #0ea5e9 to #2563eb	天空蓝到标准蓝
按钮圆角	12px	与输入框统一
按钮高度	46px	与输入框等高对齐
分隔线	"或使用以下方式登录"，13px，#94a3b8	经典的 SSO 分隔
SSO 图标	企业微信/钉钉/飞书，40px 圆形按钮	图标化登录选项
SSO 按钮背景	#f1f5f9，hover #e2e8f0	灰色底，不与主按钮竞争

动效规范

卡片入场：从上方轻柔落下，同时伴随微妙的缩放——opacity 0→1、translateY(-16px)→0、scale(0.98)→1，500ms cubic-bezier(0.34, 1.56, 0.64, 1)。使用弹性缓动函数（overshoot easing），营造 SaaS 产品特有的"活泼弹动感"。

输入框聚焦：无边框输入框在聚焦时，背景色从 #f8fafc 微妙提亮至 #ffffff，同时蓝色边框从 opacity 0 渐显至 opacity 1，过渡 150ms ease。

按钮 Hover：translateY(-2px) 上浮，box-shadow 增强，同时渐变产生微妙的位置偏移（使用 background-position 动画），200ms ease。

SSO 图标 Hover：圆形背景从 #f1f5f9 变为 #e2e8f0，图标 scale(1.1)，150ms ease。

装饰云朵：缓慢的水平飘移动画（translateX(0) → translateX(20px) → translateX(0)，20s ease-in-out infinite），赋予页面呼吸感。

代码实现要点

1. 卡片弹性动画：使用 Tailwind 的 animate-in 配合自定义 CSS keyframe 实现弹性入场。或使用 Framer Motion（如项目已引入）的 initial/animate props 配合 type: "spring", stiffness: 200, damping: 15 实现物理弹性效果。

2. 无边框输入框：shadcn/ui 的 Input 组件默认有边框，需通过 border-0 bg-slate-50 focus:bg-white focus:ring-1 focus:ring-blue-500 覆盖样式。

3. SSO 按钮组：使用 Flex 布局 flex gap-3 justify-center，每个 SSO 按钮为 button 元素包裹品牌 SVG 图标。考虑到不同企业的 SSO 需求，SSO 区域应封装为 SSOProviders 组件，通过配置数组动态渲染。

4. 云朵装饰：将云朵 SVG 设为 position: absolute; top: -50px; right: -30px; pointer-events: none;，确保不影响交互。

---

3.4 方案四「极简矩阵」— 开发者极客风

设计概念与灵感来源

对于面向开发者的工具平台，过于" polished "的设计反而可能显得不够硬核。「极简矩阵」方案致敬了《黑客帝国》的数字雨（Matrix Rain）以及终端命令行的纯粹美学，将登录页转化为一个"进入系统"的仪式。纯黑背景上绿色字符如雨般落下，输入框如同终端命令行，每一个交互细节都在告诉用户："这是一个为技术人员打造的严肃工具。"

适用场景

技术团队、开发者工具、DevOps 平台、开源项目、CLI/GUI 混合产品。用户群体是开发者、SRE、运维工程师，他们对终端界面有亲切感，极客风格的 UI 反而能唤起"同道中人"的认同感。

视觉规范

元素	规范值	说明
背景色	#000000 纯黑	终端/命令行的经典底色
字符雨颜色	#22c55e（绿色），#16a34a（深绿）	双色调绿色增加层次
字符集	大小写字母 + 数字 + 日文片假名	Matrix 经典字符集
字符密度	比原版 Matrix 减少 40%	不过度干扰登录表单的可读性
字符下落速度	2~6 px/frame 随机	自然的不规则雨效
卡片背景	rgba(0,0,0,0.85)	高透明度黑底，字符隐约可见
卡片边框	1px solid rgba(34,197,94,0.3)	绿色发光边框，终端窗口感
卡片圆角	4px	极小圆角，锐利的技术感
标题字体	JetBrains Mono，22px，#22c55e	等宽字体是终端的灵魂
标题文字	> sql-platform login	命令行风格的标题
副标题	"请输入您的凭据以继续"，13px，#4ade80	浅绿说明文字
输入框背景	#0a0a0a	深黑，区别于卡片
输入框边框	1px solid rgba(34,197,94,0.25)	微弱绿边
输入框圆角	4px	锐利
输入框字体	JetBrains Mono，14px	打字机般的输入体验
输入框文字色	#22c55e	绿色输入文字
Placeholder	#374151（深灰）	低调提示
输入框聚焦	边框变为 rgba(34,197,94,0.6)	明亮的绿色边框
按钮背景	#22c55e	醒目绿色
按钮文字	#000000，JetBrains Mono，字重 600	黑底绿字，高对比
按钮圆角	4px	锐利风格统一
光标	自定义绿色闪烁光标	2px 宽竖线，每 530ms 闪烁
底部版本号	"v2.4.1 — build 20240815"，11px，#374151	开发者熟悉的版本信息

动效规范

字符雨动画：使用 Canvas 2D 实现。初始化多列字符，每列以随机速度向下滚动。每个字符有随机的生命周期——新字符高亮（#4ade80），旧字符渐暗（#15803d → #166534），超出画布底部后重置到顶部。字符雨在登录卡片后方运行，使用 z-index 分层。

卡片入场：模拟终端启动——先显示 > sql-platform login_（带闪烁光标），停顿 300ms 后表单元素逐行"打印"出现。每个元素使用 opacity 0→1，间隔 80ms，模拟打字机效果。

输入框聚焦：边框绿色亮度提升（opacity 0.25 → 0.6），同时产生微弱的绿色外发光 0 0 8px rgba(34,197,94,0.15)，150ms ease。

按钮 Hover：背景色从 #22c55e 变为 #4ade80（更亮），同时按钮产生 box-shadow: 0 0 16px rgba(34,197,94,0.3) 绿光晕染，150ms ease。

光标闪烁：

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/* animation: blink 1.06s step-end infinite */

使用 step-end 时序函数实现硬切闪烁，更接近真实终端光标。

错误状态：终端风格的错误提示——输入框边框变为 #ef4444，下方显示红色文字 [ERROR] 用户名或密码不正确，字体 JetBrains Mono，12px。无 shake 动画，用冷静的错误信息替代。

代码实现要点

1. 字符雨 Canvas：独立的 MatrixRain.tsx 组件。核心逻辑：创建 columns 数组，每列跟踪当前字符和 y 坐标。在 requestAnimationFrame 循环中，以半透明黑色 (rgba(0,0,0,0.05)) 覆盖画布而非完全清除，形成字符拖尾效果。字符从预定义字符集中随机选取。

2. 等宽字体：通过 Google Fonts 或本地引入 JetBrains Mono。Tailwind 配置中添加 fontFamily: { mono: ['JetBrains Mono', 'monospace'] }。

3. 打字机入场：使用自定义 hook useTypewriterEffect，控制子元素依次显示。或直接使用 setTimeout 链实现简单的延迟序列。

4. 终端光标：使用一个 span 元素（w-[2px] h-[1.2em] bg-green-500 inline-block）配合 CSS 动画实现闪烁。可封装为 TerminalCursor 小组件。

5. 密码输入：密码框仍使用 type="password"，但自定义样式使圆点/星号也呈现绿色（通过 color: #22c55e 和 caret-color: #22c55e）。

---

3.5 方案五「自然流动」— 有机渐变自然风

设计概念与灵感来源

并非所有企业都喜欢冷峻的科技风。「自然流动」方案面向创意公司、设计团队和文化企业，从自然界的极光、晨曦、水波中汲取配色灵感。三个巨大的模糊色块在背景中缓慢漂移、交叠，产生不断变化的有机渐变——这种"活着的"背景打破了登录页的单调，将等待时间转化为一种视觉享受。设计参考了 Linear、Arc Browser 等产品的有机渐变美学，以及 Blobs 设计趋势。

适用场景

创意设计公司、数字营销机构、文化传媒企业、生活方式品牌、内部创意工具。用户群体包括设计师、创意总监、市场人员，他们对视觉美感有较高要求，偏好温暖、有情感的界面。

视觉规范

元素	规范值	说明
背景底色	#0f0e1a	深紫黑，衬托前景彩色光晕
渐变圆 1	#f472b6（粉色），直径 600px，blur 120px	左上区域
渐变圆 2	#a78bfa（紫色），直径 500px，blur 120px	右侧中部
渐变圆 3	#60a5fa（蓝色），直径 550px，blur 120px	底部中央
模糊方式	CSS filter: blur(120px) 或 SVG feGaussianBlur	产生柔和的色块融合
卡片背景	rgba(255,255,255,0.1)	半透明白
卡片毛玻璃	backdrop-blur: 24px	更强的模糊，突出背后的色彩流动
卡片圆角	24px	有机的大圆角
卡片边框	1px solid rgba(255,255,255,0.15)	半透明白色边框
卡片内边距	48px 40px	宽裕的空间
品牌图标	64px 大圆角矩形，border-radius: 20px	渐变背景 from #f472b6 to #a78bfa
品牌名	"DataGuard"，22px，白色，字重 600	居中展示
品牌标语	"数据之美，流动不息"，14px，rgba(255,255,255,0.6)	诗意化标语
输入框背景	rgba(255,255,255,0.08)	毛玻璃输入
输入框边框	1px solid rgba(255,255,255,0.12)	微妙的边框
输入框圆角	14px	圆润
输入框高度	46px	舒适点击高度
输入框文字	白色，rgba(255,255,255,0.9)	高对比度
输入框聚焦	边框变为 rgba(255,255,255,0.4)	白色高亮
按钮背景	#ffffff	白色主按钮
按钮文字	#0f0e1a，字重 600	深色文字
按钮圆角	12px	现代圆角
按钮高度	46px	与输入框等高
卡片外光晕	box-shadow: 0 0 80px rgba(167,139,250,0.15)	微妙的紫色光晕包裹卡片

动效规范

渐变圆漂移：三个彩色模糊圆以不同的速度和轨迹缓慢移动，形成不断变化的背景：

• 粉圆：translate 在 (0,0) → (30px,-20px) → (-20px,30px) → (0,0) 之间循环，15s ease-in-out infinite
• 紫圆：translate 在 (0,0) → (-25px,25px) → (20px,-15px) → (0,0)，18s ease-in-out infinite
• 蓝圆：translate 在 (0,0) → (20px,20px) → (-30px,-10px) → (0,0)，12s ease-in-out infinite

三个圆的运动周期互质（15s/18s/12s），确保组合图案永不重复。

卡片入场：opacity 0→1、translateY(24px)→0、scale(0.96)→1，700ms cubic-bezier(0.22, 1, 0.36, 1)。较长的时间和柔和的缓动，配合背景的流动感，营造"浮出水面"的诗意体验。

输入框聚焦：边框透明度提升，同时产生微弱的白色外发光 0 0 0 3px rgba(255,255,255,0.08)，200ms ease。

按钮 Hover：scale(1.02) 微放大（而非上移，更柔和），box-shadow 增强为 0 8px 24px rgba(255,255,255,0.2)，过渡 200ms ease。白色按钮在暗色背景下产生"发光"效果。

光晕脉动：卡片外层的紫色光晕以 4s ease-in-out infinite 的节奏在 opacity 0.1 ↔ 0.2 之间呼吸，赋予页面生命力。

代码实现要点

1. SVG 渐变网格：使用绝对定位的 div 元素包裹三个 div（每个设置 border-radius: 50%、filter: blur(120px)、对应背景色），通过 CSS @keyframes 分别控制 transform 动画。或使用 SVG <circle> 配合 <filter><feGaussianBlur> 实现同样的模糊色块效果。

2. 强毛玻璃卡片：backdrop-blur-2xl bg-white/10 border border-white/15 rounded-3xl shadow-[0_0_80px_rgba(167,139,250,0.15)]。注意 backdrop-blur 需要浏览器支持，可考虑添加 -webkit-backdrop-blur 前缀。

3. 白色主按钮：在深色背景下，白色按钮天然具有高对比度。Hover 效果避免使用 translateY（上移动效偏科技感），改用 scale(1.02)（更柔和、有机）。

4. 性能优化：blur(120px) 大模糊是 GPU 密集型操作。建议使用 will-change: transform 提示浏览器优化，同时确保动画元素使用 transform 而非 top/left 属性。在低性能设备上可通过 @media (prefers-reduced-motion: reduce) 关闭背景动画。

---

3.6 各方案组件设计要点（对比表）

设计维度	方案一「极光科技」	方案二「企业金融」	方案三「云端数据」	方案四「极简矩阵」	方案五「自然流动」
布局结构	居中卡片 + 全屏粒子背景	左右分屏 60:40	居中卡片 + 浅色背景	居中卡片 + 全屏字符雨	居中卡片 + 动态渐变背景
背景实现	Canvas 2D 粒子系统	CSS 渐变 + 纯色分割	CSS 渐变 + SVG 装饰	Canvas 2D Matrix Rain	SVG/CSS 模糊渐变圆
卡片材质	毛玻璃 backdrop-blur: 20px	纯白实色	纯白实色	半透明黑 rgba(0,0,0,0.85)	强毛玻璃 backdrop-blur: 24px
卡片圆角	16px	16px	20px	4px（锐利）	24px（最大）
卡片边框	1px solid rgba(255,255,255,0.08)	无	无	1px solid rgba(34,197,94,0.3)	1px solid rgba(255,255,255,0.15)
主色调	蓝 #2563eb + 紫 #7c3aed	深蓝 #1a365d	天蓝 #0ea5e9	绿 #22c55e	粉 #f472b6 + 紫 #a78bfa + 蓝 #60a5fa
背景色	#0a0e27 → #1a1f4b	左 #0c1a3c 右 #f8fafc	#f0f4f8 → #e2e8f0	#000000	#0f0e1a
输入框样式	标准边框式	底部底线式	无边框 + 灰底	等宽字体 + 绿边框	毛玻璃半透明
按钮样式	渐变蓝紫	纯色深蓝	渐变天蓝	纯色绿	纯白
按钮圆角	10px	8px	12px	4px	12px
字体选择	系统默认 sans-serif	系统默认 sans-serif	系统默认 sans-serif	JetBrains Mono 等宽	系统默认 sans-serif
SSO 支持	无	无	有（企业微信/钉钉/飞书）	无	无
安全标识	Shield 图标暗示	SSL/权限/审计 明确列出	无	版本号信息	无
品牌展示	渐变圆 + Shield 图标	左侧大面积品牌区	顶部品牌图标	终端命令行风格	大圆角渐变图标
移动端适配	卡片全宽 + 边距	上下布局折叠	卡片全宽	卡片全宽	卡片全宽

3.7 各方案动效设计规范（汇总表）

动效维度	方案一「极光科技」	方案二「企业金融」	方案三「云端数据」	方案四「极简矩阵」	方案五「自然流动」
背景动画	粒子连线 60fps	无	云朵缓慢水平漂移	字符雨下落	三圆渐变漂移
入场动画	卡片淡入+上移 600ms	左右滑入 400ms	弹性下落 500ms	打字机逐行 80ms/行	柔和浮现 700ms
入场缓动	cubic-bezier(0.16,1,0.3,1)	ease-out	cubic-bezier(0.34,1.56,0.64,1)	step-end 风格	cubic-bezier(0.22,1,0.36,1)
输入框聚焦	蓝边框+光晕 200ms	底线延展 200ms	背景提亮+边框渐显 150ms	绿边框亮度提升 150ms	白边框透明度提升 200ms
按钮 Hover	上移 1px + 阴影增强	背景加深 + 阴影	上移 2px + 渐变偏移	绿光晕染 + 背景变亮	缩放 1.02 + 白影
错误反馈	Shake 抖动 300ms	边框变红 + 提示文字	边框变红 + 弹性抖动	红色终端错误信息	边框变红 + 光晕转红
特殊交互	鼠标粒子引力	信任指标依次淡入	SSO 图标放大	光标闪烁	光晕呼吸脉动
动画性能	requestAnimationFrame	CSS 过渡	CSS 过渡/Framer Motion	requestAnimationFrame	CSS transform + will-change
减弱动效	保留静态粒子	无需处理	保留静态布局	保留静态字符背景	保留静态模糊色块

---

方案选型建议

五套方案并非"五选一"的关系，而是为不同的部署场景提供针对性选择：

• 对外技术产品（如数据库管理工具、开发者平台）→ 方案一「极光科技」或方案四「极简矩阵」
• 金融/政企客户私有化部署 → 方案二「企业金融」
• SaaS 订阅产品/云端服务 → 方案三「云端数据」
• 创意团队/设计公司内部系统 → 方案五「自然流动」

建议在系统设置中提供登录页主题切换功能，允许管理员根据企业 VI 选择合适的方案，或在不同的子域名/入口自动匹配不同风格（如 dev.dataguard.com 使用极客风，finance.dataguard.com 使用金融风）。所有方案共享 useLogin 和 useTheme hook，切换主题仅涉及 UI 层组件的替换，业务逻辑零改动。