# 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 # 或手动合并文件 ``` --- ## 设计亮点 ### 极光之境 (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 通过 `