rlwj-lab/opsxsql
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1aa729b61b512e787f777f3aeb53e1f9748822a4
opsxsql/SQL平台评估与优化/sql_platform_optimization_sec03.md
T
logan 746a000e8a feat: 全面UI优化 — 5套主题系统 + 设计体系 + 菜单重组 + 页面优化 
1. 主题系统扩展 (5套主题)
   - ocean-deep(深海蓝) / light-professional(明亮白) / midnight-purple(午夜紫)
   - pine-green(松林绿) / orange-vitality(活力橙)
   - useTheme hook 重写支持5主题 + 向后兼容
   - AppearanceSettings 5主题预览卡片

2. 设计体系 (index.css)
   - 按钮系统: dg-btn-primary/secondary/ghost/danger + 尺寸变体
   - 徽章系统: dg-badge-* (8色)
   - 卡片/表格: dg-card-section, dg-table-row, dg-table-header
   - 状态点: dg-status-dot-* (4色)
   - 动效关键帧: slideInLeft, scaleIn

3. 菜单重组 (menu.ts)
   - 5分组: 概览/数据源/工单/权限/系统
   - 6个图标更新: Code2/FileEdit/ShieldCheck/FolderLock/ScrollText/Timer
   - 新增 permission 权限码字段

4. Layout 侧边栏增强
   - 左侧渐变指示条 + 发光效果
   - hover 微动画 + 图标变色
   - 面包屑导航头部
   - 主题切换循环5主题

5. 核心页面优化
   - TicketsPage: 设计系统类 + 颜色对齐
   - QueriesPage: 去Card依赖 + dg-table/dg-btn统一
   - Breadcrumb组件 + useBreadcrumb hook
2026-05-27 01:59:08 +08:00

394 lines
28 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
## 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，形成交互反馈。
**卡片入场动画**：
```css
@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 动画**：
```css
@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`：
```css
.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`。
**光标闪烁**：
```css
@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 层组件的替换，业务逻辑零改动。
Reference in new issue View Git Blame Copy Permalink