rlwj-lab/opsxsql
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全面UI优化 — 5套主题系统 + 设计体系 + 菜单重组 + 页面优化

Browse Source 
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
This commit is contained in:
logan committed 2026-05-27 01:59:08 +08:00
1 parent 4e2df4d3d7
commit 746a000e8a
25 files changed
+7718 -178
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

SQL平台评估与优化/sql_platform_optimization_sec03.md
+393
View File
@@ -0,0 +1,393 @@
## 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 层组件的替换，业务逻辑零改动。