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

feat: 登录页扩展至10种风格 — 新增极光之境/星际漫游/水墨山水/霓虹都市/渐变网格

Browse Source 
- 新增 AuroraView.tsx: 4条极光光带+15星光+毛玻璃卡片
- 新增 CosmosView.tsx: 3星云+45颗星星+2流星+行星装饰
- 新增 InkWashView.tsx: 三层远山+水墨晕染+金色点缀+亮色表单
- 新增 NeonCityView.tsx: 城市剪影+霓虹灯管+雨滴+赛博朋克风格
- 新增 GradientMeshView.tsx: 5渐变光晕+点阵纹理+呼吸动画
- LoginPage.tsx: LoginStyle类型扩展10种+映射+选项
- AppearanceSettings.tsx: 预览颜色+缩略图10种
This commit is contained in:
logan committed 2026-05-27 17:52:34 +08:00
1 parent 872c204e80
commit bf5c077b5b
7 files changed
+2433 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/pages/AppearanceSettings.tsx
+94
View File
@@ -12,6 +12,11 @@ const LOGIN_PREVIEW_COLORS: Record<LoginStyle, { bg: string; accent: string; lab
sidepanel: { bg: 'linear-gradient(180deg, #020810 0%, #062030 100%)', accent: '#06b6d4', label: '深海鲸歌' },
fullimage: { bg: '#0d1117', accent: '#6366f1', label: 'GitHub/AWS' },
minimal: { bg: 'linear-gradient(160deg, #0a0a1a 0%, #0f0a2a 40%, #150825 70%, #0a0a1a 100%)', accent: '#ec4899', label: 'Premium Dark' },
aurora: { bg: 'linear-gradient(180deg, #050810 0%, #0a0e1a 30%, #0d1425 60%, #080c14 100%)', accent: '#10b981', label: '极光之境' },
cosmos: { bg: '#030508', accent: '#8b5cf6', label: '星际漫游' },
inkwash: { bg: 'linear-gradient(180deg, #f5f0e8 0%, #ebe4d6 100%)', accent: '#c9a96e', label: '水墨山水' },
neoncity: { bg: 'linear-gradient(180deg, #0a0418 0%, #1a0b2e 40%, #0d0718 100%)', accent: '#ec4899', label: '霓虹都市' },
gradientmesh: { bg: '#0a0a0f', accent: '#6366f1', label: '渐变网格' },
};
export default function AppearanceSettings() {
@@ -234,6 +239,95 @@ export default function AppearanceSettings() {
</div>
</div>
)}
{opt.id === 'aurora' && (
<div className="absolute inset-0" style={{ background: 'linear-gradient(180deg, #050810 0%, #0a0e1a 30%, #0d1425 60%, #080c14 100%)' }}>
<div className="absolute" style={{ top: '20%', left: '-10%', width: '120%', height: '25%', background: 'linear-gradient(90deg, transparent, rgba(124,58,237,0.25), rgba(16,185,129,0.2), transparent)', borderRadius: '50%', filter: 'blur(10px)', transform: 'rotate(-5deg)' }} />
<div className="absolute" style={{ top: '35%', left: '-5%', width: '110%', height: '20%', background: 'linear-gradient(90deg, transparent, rgba(6,182,212,0.2), rgba(168,85,247,0.15), transparent)', borderRadius: '50%', filter: 'blur(8px)', transform: 'rotate(3deg)' }} />
{[15, 30, 55, 75].map(t => (
<div key={t} className="absolute rounded-full" style={{ width: 2, height: 2, background: 'rgba(255,255,255,0.6)', top: `${t}%`, left: `${20 + t}%`, boxShadow: '0 0 3px rgba(255,255,255,0.4)' }} />
))}
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-3/4 rounded-md p-1.5 flex flex-col items-center gap-0.5" style={{ background: 'rgba(8,12,25,0.6)', border: '1px solid rgba(255,255,255,0.06)', backdropFilter: 'blur(4px)' }}>
<div className="w-3 h-1 rounded-sm" style={{ background: 'rgba(16,185,129,0.5)' }} />
<div className="w-5 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.12)' }} />
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
<div className="w-full h-1 rounded-sm mt-0.5" style={{ background: 'linear-gradient(90deg, #7c3aed, #059669)', opacity: 0.5 }} />
</div>
</div>
</div>
)}
{opt.id === 'cosmos' && (
<div className="absolute inset-0" style={{ background: '#030508' }}>
<div className="absolute" style={{ top: '10%', left: '10%', width: '50%', height: '50%', background: 'radial-gradient(circle, rgba(59,130,246,0.15), transparent 70%)', filter: 'blur(8px)' }} />
<div className="absolute" style={{ bottom: '10%', right: '5%', width: '45%', height: '45%', background: 'radial-gradient(circle, rgba(139,92,246,0.12), transparent 70%)', filter: 'blur(8px)' }} />
{[10, 25, 40, 60, 80].map(t => (
<div key={t} className="absolute rounded-full" style={{ width: t % 3 === 0 ? 2.5 : 1.5, height: t % 3 === 0 ? 2.5 : 1.5, background: t % 2 === 0 ? 'rgba(147,197,253,0.8)' : '#fff', top: `${t}%`, left: `${15 + t * 0.8}%`, boxShadow: '0 0 3px rgba(255,255,255,0.3)' }} />
))}
<div className="absolute" style={{ top: '5%', right: '20%', width: '20%', height: 1, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent)', transform: 'rotate(-25deg)' }} />
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-3/4 rounded-md p-1.5 flex flex-col items-center gap-0.5" style={{ background: 'rgba(5,8,16,0.7)', border: '1px solid rgba(255,255,255,0.05)', backdropFilter: 'blur(4px)' }}>
<div className="w-3 h-1 rounded-sm" style={{ background: 'rgba(139,92,246,0.5)' }} />
<div className="w-5 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.12)' }} />
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
<div className="w-full h-1 rounded-sm mt-0.5" style={{ background: 'linear-gradient(90deg, #4f46e5, #8b5cf6)', opacity: 0.5 }} />
</div>
</div>
</div>
)}
{opt.id === 'inkwash' && (
<div className="absolute inset-0" style={{ background: 'linear-gradient(180deg, #f5f0e8 0%, #ebe4d6 100%)' }}>
<div className="absolute bottom-0 left-0 right-0" style={{ height: '35%', background: 'linear-gradient(to top, rgba(180,175,165,0.5) 0%, transparent 60%)', borderRadius: '50% 50% 0 0 / 20% 20% 0 0' }} />
<div className="absolute bottom-0 left-0 right-0" style={{ height: '20%', background: 'linear-gradient(to top, rgba(120,115,108,0.5) 0%, transparent 50%)', borderRadius: '50% 50% 0 0 / 30% 30% 0 0' }} />
<div className="absolute" style={{ top: '5%', left: '5%', width: '30%', height: '25%', background: 'radial-gradient(circle, rgba(60,58,52,0.08), transparent 70%)', filter: 'blur(8px)' }} />
<div className="absolute bottom-[30%] left-[10%] right-[10%] h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(201,169,110,0.4), transparent)' }} />
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-3/4 rounded-md p-1.5 flex flex-col items-center gap-0.5" style={{ background: 'rgba(255,253,248,0.85)', border: '1px solid rgba(201,169,110,0.2)', backdropFilter: 'blur(4px)' }}>
<div className="w-3 h-1 rounded-sm" style={{ background: 'rgba(45,42,36,0.5)' }} />
<div className="w-5 h-0.5 rounded-sm" style={{ background: 'rgba(138,132,120,0.4)' }} />
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(45,42,36,0.06)' }} />
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(45,42,36,0.06)' }} />
<div className="w-full h-1 rounded-sm mt-0.5" style={{ background: 'linear-gradient(90deg, #2d2a24, #4a453d)', opacity: 0.5 }} />
</div>
</div>
</div>
)}
{opt.id === 'neoncity' && (
<div className="absolute inset-0" style={{ background: 'linear-gradient(180deg, #0a0418 0%, #1a0b2e 40%, #0d0718 100%)' }}>
<div className="absolute" style={{ top: '25%', left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(236,72,153,0.4), transparent)', boxShadow: '0 0 4px rgba(236,72,153,0.3)' }} />
<div className="absolute" style={{ top: '50%', left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(6,182,212,0.3), transparent)', boxShadow: '0 0 4px rgba(6,182,212,0.2)' }} />
{[10, 25, 40, 55, 70, 85].map((l, i) => (
<div key={i} className="absolute bottom-0" style={{ left: `${l}%`, width: `${8 + i * 3}px`, height: `${20 + (i % 3) * 12}%`, background: 'rgba(5,3,15,0.9)' }} />
))}
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-3/4 rounded-md p-1.5 flex flex-col items-center gap-0.5" style={{ background: 'rgba(10,5,25,0.8)', border: '1px solid rgba(236,72,153,0.2)', backdropFilter: 'blur(4px)' }}>
<div className="w-3 h-1 rounded-sm" style={{ background: 'rgba(236,72,153,0.5)' }} />
<div className="w-5 h-0.5 rounded-sm" style={{ background: 'rgba(6,182,212,0.3)' }} />
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
<div className="w-full h-1 rounded-sm mt-0.5" style={{ background: 'linear-gradient(90deg, #ec4899, #06b6d4)', opacity: 0.5 }} />
</div>
</div>
</div>
)}
{opt.id === 'gradientmesh' && (
<div className="absolute inset-0" style={{ background: '#0a0a0f' }}>
<div className="absolute" style={{ top: '-20%', left: '-15%', width: '60%', height: '60%', background: 'radial-gradient(circle, rgba(99,102,241,0.2), transparent 70%)', filter: 'blur(10px)' }} />
<div className="absolute" style={{ bottom: '-15%', right: '-10%', width: '55%', height: '55%', background: 'radial-gradient(circle, rgba(244,63,94,0.15), transparent 70%)', filter: 'blur(10px)' }} />
<div className="absolute" style={{ top: '30%', right: '10%', width: '35%', height: '35%', background: 'radial-gradient(circle, rgba(16,185,129,0.1), transparent 70%)', filter: 'blur(8px)' }} />
<div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.04) 0.5px, transparent 0.5px)', backgroundSize: '14px 14px' }} />
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-3/4 rounded-md p-1.5 flex flex-col items-center gap-0.5" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', backdropFilter: 'blur(4px)' }}>
<div className="w-3 h-1 rounded-sm" style={{ background: 'rgba(99,102,241,0.5)' }} />
<div className="w-5 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.12)' }} />
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
<div className="w-full h-1 rounded-sm mt-0.5" style={{ background: 'linear-gradient(90deg, #6366f1, #ec4899)', opacity: 0.5 }} />
</div>
</div>
</div>
)}
</div>
{/* Active check mark */}
frontend/src/pages/LoginPage.tsx
+17 -2
View File
@@ -4,8 +4,13 @@ import CenteredCard from '@/components/login/CenteredCard';
import SidePanel from '@/components/login/SidePanel';
import FullImage from '@/components/login/FullImage';
import MinimalDark from '@/components/login/MinimalDark';
import AuroraView from '@/components/login/AuroraView';
import CosmosView from '@/components/login/CosmosView';
import InkWashView from '@/components/login/InkWashView';
import NeonCityView from '@/components/login/NeonCityView';
import GradientMeshView from '@/components/login/GradientMeshView';
export type LoginStyle = 'split' | 'centered' | 'sidepanel' | 'fullimage' | 'minimal';
export type LoginStyle = 'split' | 'centered' | 'sidepanel' | 'fullimage' | 'minimal' | 'aurora' | 'cosmos' | 'inkwash' | 'neoncity' | 'gradientmesh';
const LOGIN_STYLES: Record<LoginStyle, React.ComponentType> = {
split: SplitView,
@@ -13,14 +18,24 @@ const LOGIN_STYLES: Record<LoginStyle, React.ComponentType> = {
sidepanel: SidePanel,
fullimage: FullImage,
minimal: MinimalDark,
aurora: AuroraView,
cosmos: CosmosView,
inkwash: InkWashView,
neoncity: NeonCityView,
gradientmesh: GradientMeshView,
};
export const LOGIN_STYLE_OPTIONS: { id: LoginStyle; name: string; desc: string }[] = [
{ id: 'split', name: '经典分屏', desc: '发光网格晶格，Tron 科技感' },
{ id: 'split', name: '经典分屏', desc: '左黑右白，晶格科技感' },
{ id: 'centered', name: '居中卡片', desc: '黎明光柱，金色晨曦氛围' },
{ id: 'sidepanel', name: '侧边面板', desc: '深海波浪，生物发光粒子' },
{ id: 'fullimage', name: '全屏背景', desc: '科技背景，毛玻璃卡片' },
{ id: 'minimal', name: '深蓝紫曲线', desc: '优雅暗黑，粉紫流动曲线' },
{ id: 'aurora', name: '极光之境', desc: '北极光动态渐变，紫绿流光' },
{ id: 'cosmos', name: '星际漫游', desc: '深邃星空星云，银白粒子' },
{ id: 'inkwash', name: '水墨山水', desc: '东方水墨意境，动态墨痕' },
{ id: 'neoncity', name: '霓虹都市', desc: '赛博朋克城市，彩色霓虹' },
{ id: 'gradientmesh', name: '渐变网格', desc: '柔和渐变网格，现代呼吸感' },
];
export default function LoginPage() {