134 lines
5.1 KiB
Markdown
134 lines
5.1 KiB
Markdown
# SQL审核平台 — 登录页主题扩展交付文档
|
||
|
||
## 变更概要
|
||
|
||
将系统原有的 **5个登录页主题** 扩展至 **10个高级登录主题**，涵盖科技感、自然风、东方美学、赛博朋克、现代极简等多种视觉风格。
|
||
|
||
---
|
||
|
||
## 10个登录页主题一览
|
||
|
||
| # | 风格ID | 名称 | 视觉风格 | 状态 |
|
||
|---|--------|------|----------|------|
|
||
| 1 | `split` | 经典分屏 | 发光网格晶格，Tron科技感 | 原有 |
|
||
| 2 | `centered` | 居中卡片 | 黎明光柱，金色晨曦氛围 | 原有 |
|
||
| 3 | `sidepanel` | 侧边面板 | 深海波浪，生物发光粒子 | 原有 |
|
||
| 4 | `fullimage` | 全屏背景 | 星空+毛玻璃卡片 | 原有 |
|
||
| 5 | `minimal` | 深蓝紫曲线 | 优雅暗黑，粉紫流动曲线 | 原有 |
|
||
| 6 | `aurora` | **极光之境** | 北极光动态渐变，紫绿流光 | **新增** |
|
||
| 7 | `cosmos` | **星际漫游** | 深邃星空星云，银白粒子 | **新增** |
|
||
| 8 | `inkwash` | **水墨山水** | 东方水墨意境，动态墨痕 | **新增** |
|
||
| 9 | `neoncity` | **霓虹都市** | 赛博朋克城市，彩色霓虹 | **新增** |
|
||
| 10 | `gradientmesh` | **渐变网格** | 柔和渐变网格，现代呼吸感 | **新增** |
|
||
|
||
---
|
||
|
||
## 新增文件（5个）
|
||
|
||
```
|
||
frontend/src/components/login/
|
||
├── AuroraView.tsx # 极光之境 — 4条极光光带+星光+毛玻璃卡片
|
||
├── CosmosView.tsx # 星际漫游 — 星云+45颗星星+流星+行星
|
||
├── InkWashView.tsx # 水墨山水 — 三层远山+水墨晕染+金色点缀
|
||
├── NeonCityView.tsx # 霓虹都市 — 城市剪影+霓虹灯管+雨滴效果
|
||
└── GradientMeshView.tsx # 渐变网格 — 5个渐变光晕+点阵纹理+呼吸动画
|
||
```
|
||
|
||
---
|
||
|
||
## 修改文件（2个）
|
||
|
||
### 1. frontend/src/pages/LoginPage.tsx
|
||
- 新增5个组件导入
|
||
- 扩展 `LoginStyle` union type: 添加 `'aurora' | 'cosmos' | 'inkwash' | 'neoncity' | 'gradientmesh'`
|
||
- 扩展 `LOGIN_STYLES` 映射: 注册5个新组件
|
||
- 扩展 `LOGIN_STYLE_OPTIONS` 数组: 添加5个新选项（名称+描述）
|
||
|
||
### 2. frontend/src/pages/AppearanceSettings.tsx
|
||
- 扩展 `LOGIN_PREVIEW_COLORS`: 添加5个新风格的预览背景色、强调色、标签
|
||
- 添加5个新风格的迷你预览JSX（在设置页面的预览卡片中显示）
|
||
|
||
---
|
||
|
||
## 后端兼容性
|
||
|
||
**后端无需任何修改。** 现有API已完全兼容：
|
||
|
||
- `GET /api/v1/public/login-style` — 返回 `{ login_style: string }`，前端已支持10种值
|
||
- `GET/PUT /api/v1/user/preferences` — 用户偏好读写，login_style 字段支持任意字符串
|
||
- `SystemSetting` 表 — key=login_style 的存储逻辑无需变更
|
||
|
||
---
|
||
|
||
## 部署步骤
|
||
|
||
### 方式一：直接复制文件（推荐）
|
||
|
||
```bash
|
||
# 1. 将5个新组件复制到项目中
|
||
cp frontend/src/components/login/AuroraView.tsx <你的项目>/frontend/src/components/login/
|
||
cp frontend/src/components/login/CosmosView.tsx <你的项目>/frontend/src/components/login/
|
||
cp frontend/src/components/login/InkWashView.tsx <你的项目>/frontend/src/components/login/
|
||
cp frontend/src/components/login/NeonCityView.tsx <你的项目>/frontend/src/components/login/
|
||
cp frontend/src/components/login/GradientMeshView.tsx <你的项目>/frontend/src/components/login/
|
||
|
||
# 2. 用提供的文件替换修改的文件
|
||
cp frontend/src/pages/LoginPage.tsx <你的项目>/frontend/src/pages/
|
||
cp frontend/src/pages/AppearanceSettings.tsx <你的项目>/frontend/src/pages/
|
||
|
||
# 3. 启动开发服务器验证
|
||
cd <你的项目>/frontend && npm run dev
|
||
```
|
||
|
||
### 方式二：Git 合并
|
||
|
||
```bash
|
||
cd <你的项目>
|
||
git remote add design-patch /mnt/agents/output/sql-platform
|
||
git fetch design-patch
|
||
git cherry-pick <commit-hash> # 或手动合并文件
|
||
```
|
||
|
||
---
|
||
|
||
## 设计亮点
|
||
|
||
### 极光之境 (AuroraView)
|
||
- 4条不同颜色的极光光带（紫罗兰、翠绿、青蓝、紫绿混合）
|
||
- 每条光带有独特的 @keyframes 飘动动画（18-25秒周期）
|
||
- 15颗闪烁星光点缀，卡片带呼吸辉光
|
||
|
||
### 星际漫游 (CosmosView)
|
||
- 3个大型星云色块（蓝/紫/粉），带缓慢漂移动画
|
||
- 45颗星星（不同大小、颜色、闪烁节奏）
|
||
- 2条流星拖尾效果 + 带光环行星装饰
|
||
|
||
### 水墨山水 (InkWashView)
|
||
- 三层远山轮廓（不同透明度渐变+曲线borderRadius）
|
||
- 水墨晕染效果（模糊径向渐变模拟墨迹扩散）
|
||
- 金色点缀线 + 竖排"SQL/AUDIT"背景装饰
|
||
- **亮色主题**表单设计，与其他暗色主题形成对比
|
||
|
||
### 霓虹都市 (NeonCityView)
|
||
- 15-20栋城市建筑剪影，顶部带彩色霓虹glow
|
||
- 3条水平霓虹灯管（粉/青/紫），带脉动+闪烁动画
|
||
- 雨滴效果 + 透视网格地面
|
||
- 赛博朋克风格表单，粉色霓虹边框
|
||
|
||
### 渐变网格 (GradientMeshView)
|
||
- 5个大型彩色光晕圆形（靛蓝/玫瑰/翠绿/琥珀/紫），带呼吸漂移
|
||
- 淡点阵纹理覆盖层
|
||
- 高质量毛玻璃卡片（blur(40px) saturate(180%)）
|
||
- 三色彩渐变登录按钮
|
||
|
||
---
|
||
|
||
## 技术规范
|
||
|
||
- **框架**: React + TypeScript
|
||
- **样式**: 全内联 style 属性，无 CSS 文件依赖
|
||
- **动画**: CSS @keyframes 通过 `<style>` 标签注入
|
||
- **Hook**: 统一使用 `useLogin` hook 处理登录逻辑
|
||
- **文案**: 全中文化
|
||
- **类型**: TypeScript 类型安全，默认导出组件
|