diff --git a/frontend/src/components/login/AuroraView.tsx b/frontend/src/components/login/AuroraView.tsx
new file mode 100644
index 0000000..8c53ad6
--- /dev/null
+++ b/frontend/src/components/login/AuroraView.tsx
@@ -0,0 +1,429 @@
+import React from 'react';
+import { useLogin } from '@/hooks/useLogin';
+
+/* ──────────────── 极光之境 · 登录组件 ──────────────── */
+
+const KEYFRAMES = `
+@keyframes aurora-drift-1 {
+  0%   { transform: translate(-30%, -10%) rotate(-12deg) scaleX(1.2); opacity: 0.35; }
+  25%  { transform: translate(-10%, 5%) rotate(-8deg) scaleX(1.5); opacity: 0.5; }
+  50%  { transform: translate(10%, -5%) rotate(-14deg) scaleX(1.3); opacity: 0.4; }
+  75%  { transform: translate(-5%, 10%) rotate(-10deg) scaleX(1.6); opacity: 0.55; }
+  100% { transform: translate(-30%, -10%) rotate(-12deg) scaleX(1.2); opacity: 0.35; }
+}
+
+@keyframes aurora-drift-2 {
+  0%   { transform: translate(20%, 15%) rotate(8deg) scaleX(1.3); opacity: 0.25; }
+  30%  { transform: translate(-10%, -5%) rotate(12deg) scaleX(1.6); opacity: 0.45; }
+  60%  { transform: translate(5%, 10%) rotate(6deg) scaleX(1.4); opacity: 0.35; }
+  100% { transform: translate(20%, 15%) rotate(8deg) scaleX(1.3); opacity: 0.25; }
+}
+
+@keyframes aurora-drift-3 {
+  0%   { transform: translate(-15%, 25%) rotate(-5deg) scaleX(1.5); opacity: 0.3; }
+  33%  { transform: translate(15%, 5%) rotate(-9deg) scaleX(1.8); opacity: 0.5; }
+  66%  { transform: translate(0%, 20%) rotate(-3deg) scaleX(1.4); opacity: 0.4; }
+  100% { transform: translate(-15%, 25%) rotate(-5deg) scaleX(1.5); opacity: 0.3; }
+}
+
+@keyframes aurora-drift-4 {
+  0%   { transform: translate(10%, -15%) rotate(15deg) scaleX(1.4); opacity: 0.2; }
+  40%  { transform: translate(-20%, 0%) rotate(10deg) scaleX(1.7); opacity: 0.4; }
+  80%  { transform: translate(0%, 8%) rotate(18deg) scaleX(1.5); opacity: 0.3; }
+  100% { transform: translate(10%, -15%) rotate(15deg) scaleX(1.4); opacity: 0.2; }
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.15; transform: scale(0.8); }
+  50%      { opacity: 0.9; transform: scale(1.2); }
+}
+
+@keyframes float-card {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-6px); }
+}
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.15), 0 0 60px rgba(5, 150, 105, 0.08); }
+  50%      { box-shadow: 0 0 30px rgba(124, 58, 237, 0.25), 0 0 80px rgba(5, 150, 105, 0.15); }
+}
+`;
+
+/* ──────────────── 星星数据 ──────────────── */
+const STARS = [
+  { left: '8%', top: '5%', size: 2, delay: 0, duration: 3 },
+  { left: '18%', top: '15%', size: 1.5, delay: 0.7, duration: 4 },
+  { left: '5%', top: '35%', size: 1, delay: 1.2, duration: 2.5 },
+  { left: '25%', top: '8%', size: 2.5, delay: 0.3, duration: 3.5 },
+  { left: '75%', top: '6%', size: 1.5, delay: 1.5, duration: 4.5 },
+  { left: '88%', top: '12%', size: 2, delay: 0.5, duration: 3 },
+  { left: '92%', top: '30%', size: 1, delay: 2, duration: 2.8 },
+  { left: '82%', top: '45%', size: 1.5, delay: 0.9, duration: 3.8 },
+  { left: '68%', top: '18%', size: 1, delay: 1.8, duration: 2.2 },
+  { left: '38%', top: '3%', size: 2, delay: 0.2, duration: 4 },
+  { left: '55%', top: '10%', size: 1.5, delay: 1.1, duration: 3.2 },
+  { left: '45%', top: '22%', size: 1, delay: 0.6, duration: 2.6 },
+  { left: '12%', top: '55%', size: 1, delay: 1.6, duration: 3.6 },
+  { left: '95%', top: '55%', size: 1.5, delay: 0.4, duration: 2.4 },
+  { left: '60%', top: '30%', size: 1, delay: 2.2, duration: 4.2 },
+];
+
+export default function AuroraView(): JSX.Element {
+  const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
+
+  return (
+    <>
+      <style>{KEYFRAMES}</style>
+
+      {/* ═══════════════ 全屏背景容器 ═══════════════ */}
+      <div
+        style={{
+          position: 'relative',
+          minHeight: '100vh',
+          width: '100%',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          background: 'linear-gradient(180deg, #050810 0%, #0a0e1a 30%, #0d1425 60%, #080c14 100%)',
+        }}
+      >
+        {/* ────────── 极光光带 1：紫罗兰色 ────────── */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '15%',
+            left: '10%',
+            width: '80%',
+            height: '35%',
+            background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.6) 0%, rgba(124, 58, 237, 0.3) 40%, transparent 80%)',
+            filter: 'blur(60px)',
+            borderRadius: '50%',
+            animation: 'aurora-drift-1 18s ease-in-out infinite',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* ────────── 极光光带 2：翠绿色 ────────── */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '25%',
+            left: '20%',
+            width: '75%',
+            height: '30%',
+            background: 'linear-gradient(120deg, rgba(16, 185, 129, 0.5) 0%, rgba(5, 150, 105, 0.25) 50%, transparent 90%)',
+            filter: 'blur(70px)',
+            borderRadius: '50%',
+            animation: 'aurora-drift-2 22s ease-in-out infinite',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* ────────── 极光光带 3：青蓝色 ────────── */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '35%',
+            left: '5%',
+            width: '70%',
+            height: '28%',
+            background: 'linear-gradient(145deg, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.15) 45%, transparent 85%)',
+            filter: 'blur(55px)',
+            borderRadius: '50%',
+            animation: 'aurora-drift-3 20s ease-in-out infinite',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* ────────── 极光光带 4：紫绿混合 ────────── */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '10%',
+            left: '30%',
+            width: '65%',
+            height: '40%',
+            background: 'linear-gradient(100deg, rgba(124, 58, 237, 0.35) 0%, rgba(16, 185, 129, 0.2) 50%, rgba(6, 182, 212, 0.15) 100%)',
+            filter: 'blur(75px)',
+            borderRadius: '50%',
+            animation: 'aurora-drift-4 25s ease-in-out infinite',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* ────────── 星光点缀 ────────── */}
+        {STARS.map((star, i) => (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: star.left,
+              top: star.top,
+              width: star.size,
+              height: star.size,
+              borderRadius: '50%',
+              background: '#fff',
+              boxShadow: `0 0 ${star.size * 2}px rgba(255,255,255,0.5)`,
+              animation: `twinkle ${star.duration}s ease-in-out ${star.delay}s infinite`,
+              pointerEvents: 'none',
+            }}
+          />
+        ))}
+
+        {/* ═══════════════ 登录卡片 ═══════════════ */}
+        <div
+          style={{
+            position: 'relative',
+            zIndex: 10,
+            width: '100%',
+            maxWidth: 400,
+            margin: '0 20px',
+            padding: '44px 36px',
+            borderRadius: 20,
+            background: 'rgba(8, 12, 25, 0.65)',
+            backdropFilter: 'blur(24px)',
+            WebkitBackdropFilter: 'blur(24px)',
+            border: '1px solid rgba(255,255,255,0.06)',
+            boxShadow: '0 0 0 1px rgba(255,255,255,0.04), 0 20px 60px rgba(0,0,0,0.4)',
+            animation: 'float-card 8s ease-in-out infinite, pulse-glow 6s ease-in-out infinite',
+          }}
+        >
+          {/* ──────── 品牌区域 ──────── */}
+          <div style={{ textAlign: 'center', marginBottom: 32 }}>
+            {/* Logo */}
+            <div
+              style={{
+                width: 44,
+                height: 44,
+                borderRadius: 12,
+                background: 'linear-gradient(135deg, #7c3aed 0%, #059669 100%)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                margin: '0 auto 16px',
+                boxShadow: '0 4px 20px rgba(124, 58, 237, 0.3), 0 2px 10px rgba(5, 150, 105, 0.2)',
+              }}
+            >
+              <svg
+                width={22}
+                height={22}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <ellipse cx="12" cy="5" rx="9" ry="3" />
+                <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+                <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+              </svg>
+            </div>
+
+            {/* 标题 */}
+            <h1
+              style={{
+                fontSize: 22,
+                fontWeight: 600,
+                color: '#fff',
+                margin: '0 0 6px',
+                letterSpacing: 0.5,
+              }}
+            >
+              SQL审核平台
+            </h1>
+
+            {/* 副标题 */}
+            <p
+              style={{
+                fontSize: 14,
+                color: 'rgba(255,255,255,0.4)',
+                margin: 0,
+                letterSpacing: 0.3,
+              }}
+            >
+              企业级数据库审核与合规管理
+            </p>
+          </div>
+
+          {/* ──────── 表单区域 ──────── */}
+          <form onSubmit={handleLogin} noValidate>
+            {/* 错误提示 */}
+            {error && (
+              <div
+                style={{
+                  marginBottom: 16,
+                  padding: '10px 14px',
+                  borderRadius: 10,
+                  background: 'rgba(239, 68, 68, 0.12)',
+                  border: '1px solid rgba(239, 68, 68, 0.2)',
+                  color: '#f87171',
+                  fontSize: 13,
+                  textAlign: 'center',
+                }}
+              >
+                {error}
+              </div>
+            )}
+
+            {/* 用户名输入框 */}
+            <div style={{ marginBottom: 14 }}>
+              <input
+                type="text"
+                placeholder="用户名"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                disabled={loading}
+                autoComplete="username"
+                style={{
+                  width: '100%',
+                  height: 46,
+                  padding: '0 16px',
+                  borderRadius: 10,
+                  background: 'rgba(255,255,255,0.05)',
+                  border: '1px solid rgba(255,255,255,0.08)',
+                  color: '#fff',
+                  fontSize: 14,
+                  outline: 'none',
+                  boxSizing: 'border-box',
+                  transition: 'border-color 0.25s ease, box-shadow 0.25s ease',
+                  fontFamily: 'inherit',
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(124, 58, 237, 0.4)';
+                  e.currentTarget.style.boxShadow = '0 0 0 3px rgba(124, 58, 237, 0.08)';
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
+                  e.currentTarget.style.boxShadow = 'none';
+                }}
+              />
+            </div>
+
+            {/* 密码输入框 */}
+            <div style={{ marginBottom: 20 }}>
+              <input
+                type="password"
+                placeholder="密码"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={loading}
+                autoComplete="current-password"
+                style={{
+                  width: '100%',
+                  height: 46,
+                  padding: '0 16px',
+                  borderRadius: 10,
+                  background: 'rgba(255,255,255,0.05)',
+                  border: '1px solid rgba(255,255,255,0.08)',
+                  color: '#fff',
+                  fontSize: 14,
+                  outline: 'none',
+                  boxSizing: 'border-box',
+                  transition: 'border-color 0.25s ease, box-shadow 0.25s ease',
+                  fontFamily: 'inherit',
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(124, 58, 237, 0.4)';
+                  e.currentTarget.style.boxShadow = '0 0 0 3px rgba(124, 58, 237, 0.08)';
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
+                  e.currentTarget.style.boxShadow = 'none';
+                }}
+              />
+            </div>
+
+            {/* 登录按钮 */}
+            <button
+              type="submit"
+              disabled={!username || !password || loading}
+              style={{
+                width: '100%',
+                height: 46,
+                borderRadius: 12,
+                border: 'none',
+                background: 'linear-gradient(135deg, #7c3aed 0%, #059669 100%)',
+                color: '#fff',
+                fontSize: 15,
+                fontWeight: 500,
+                cursor: !username || !password || loading ? 'not-allowed' : 'pointer',
+                opacity: !username || !password ? 0.55 : 1,
+                transition: 'all 0.3s ease',
+                fontFamily: 'inherit',
+                letterSpacing: 0.5,
+                position: 'relative',
+                overflow: 'hidden',
+              }}
+              onMouseEnter={(e) => {
+                if (username && password && !loading) {
+                  e.currentTarget.style.transform = 'translateY(-2px)';
+                  e.currentTarget.style.boxShadow = '0 8px 30px rgba(124, 58, 237, 0.35), 0 4px 15px rgba(5, 150, 105, 0.25)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = 'translateY(0)';
+                e.currentTarget.style.boxShadow = 'none';
+              }}
+            >
+              {loading ? (
+                <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
+                  <span
+                    style={{
+                      display: 'inline-block',
+                      width: 16,
+                      height: 16,
+                      border: '2px solid rgba(255,255,255,0.3)',
+                      borderTopColor: '#fff',
+                      borderRadius: '50%',
+                      animation: 'spin 0.8s linear infinite',
+                    }}
+                  />
+                  登录中...
+                </span>
+              ) : (
+                '登 录'
+              )}
+            </button>
+          </form>
+
+          {/* ──────── 版权信息 ──────── */}
+          <div
+            style={{
+              marginTop: 28,
+              textAlign: 'center',
+              fontSize: 12,
+              color: 'rgba(255,255,255,0.2)',
+              letterSpacing: 0.3,
+            }}
+          >
+            © 2025 SQL审核平台
+          </div>
+        </div>
+
+        {/* ──────── 底部辉光装饰 ──────── */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '-20%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: '120%',
+            height: '50%',
+            background: 'radial-gradient(ellipse at center, rgba(124, 58, 237, 0.08) 0%, rgba(5, 150, 105, 0.05) 30%, transparent 70%)',
+            pointerEvents: 'none',
+          }}
+        />
+      </div>
+
+      {/* 全局旋转动画 */}
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </>
+  );
+}
diff --git a/frontend/src/components/login/CosmosView.tsx b/frontend/src/components/login/CosmosView.tsx
new file mode 100644
index 0000000..09329f6
--- /dev/null
+++ b/frontend/src/components/login/CosmosView.tsx
@@ -0,0 +1,547 @@
+import React, { useMemo } from 'react';
+import { useLogin } from '@/hooks/useLogin';
+
+/* ── 动画关键帧 ── */
+const KEYFRAMES = `
+@keyframes star-twinkle {
+  0%, 100% { opacity: 0.3; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
+
+@keyframes meteor-fly {
+  0% { transform: translateX(0) translateY(0) rotate(-45deg); opacity: 1; }
+  100% { transform: translateX(600px) translateY(600px) rotate(-45deg); opacity: 0; }
+}
+
+@keyframes planet-rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes float-particle {
+  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.4; }
+  25% { transform: translateY(-20px) translateX(10px); opacity: 0.8; }
+  50% { transform: translateY(-40px) translateX(-5px); opacity: 0.5; }
+  75% { transform: translateY(-20px) translateX(15px); opacity: 0.9; }
+}
+
+@keyframes nebula-drift {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, -20px) scale(1.05); }
+  66% { transform: translate(-20px, 15px) scale(0.95); }
+}
+
+@keyframes card-glow {
+  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 24px 80px rgba(0,0,0,0.5), 0 0 60px rgba(79,70,229,0.08); }
+  50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 24px 80px rgba(0,0,0,0.5), 0 0 80px rgba(139,92,246,0.12); }
+}
+
+@keyframes shooting-star {
+  0% { transform: translateX(0) translateY(0) rotate(-35deg) scaleX(1); opacity: 1; }
+  70% { opacity: 0.6; }
+  100% { transform: translateX(500px) translateY(500px) rotate(-35deg) scaleX(0.5); opacity: 0; }
+}
+`;
+
+/* ── 类型 ── */
+interface Star {
+  id: number;
+  x: number;
+  y: number;
+  size: number;
+  opacity: number;
+  color: string;
+  twinkle: boolean;
+  delay: number;
+  duration: number;
+}
+
+interface Particle {
+  id: number;
+  x: number;
+  y: number;
+  size: number;
+  delay: number;
+  duration: number;
+}
+
+/* ── 组件 ── */
+export default function CosmosView(): JSX.Element {
+  const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
+
+  /* 生成静态星星数据 */
+  const stars = useMemo<Star[]>(() => {
+    const colors = ['#ffffff', '#dbeafe', '#e0e7ff', '#f3e8ff', '#ede9fe'];
+    return Array.from({ length: 45 }, (_, i) => ({
+      id: i,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      size: Math.random() * 2.5 + 0.5,
+      opacity: Math.random() * 0.7 + 0.3,
+      color: colors[Math.floor(Math.random() * colors.length)],
+      twinkle: Math.random() > 0.4,
+      delay: Math.random() * 5,
+      duration: Math.random() * 2 + 1.5,
+    }));
+  }, []);
+
+  /* 生成漂浮粒子数据 */
+  const particles = useMemo<Particle[]>(() => {
+    return Array.from({ length: 15 }, (_, i) => ({
+      id: i,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      size: Math.random() * 2 + 1,
+      delay: Math.random() * 6,
+      duration: Math.random() * 4 + 4,
+    }));
+  }, []);
+
+  /* 输入框基础样式 */
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    height: 48,
+    padding: '0 16px',
+    background: 'rgba(255,255,255,0.05)',
+    border: '1px solid rgba(255,255,255,0.08)',
+    borderRadius: 12,
+    color: '#fff',
+    fontSize: 14,
+    outline: 'none',
+    transition: 'all 0.25s ease',
+    boxSizing: 'border-box',
+  };
+
+  const isFormValid = username.length > 0 && password.length > 0;
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: '100%',
+        minHeight: '100vh',
+        overflow: 'hidden',
+        background: '#030508',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif",
+      }}
+    >
+      <style>{KEYFRAMES}</style>
+
+      {/* ── 星云色块 ── */}
+      <div
+        style={{
+          position: 'absolute',
+          top: '-10%',
+          left: '-15%',
+          width: '60%',
+          height: '60%',
+          background: 'radial-gradient(circle, rgba(59,130,246,0.15), transparent 70%)',
+          borderRadius: '50%',
+          filter: 'blur(100px)',
+          animation: 'nebula-drift 20s ease-in-out infinite',
+          pointerEvents: 'none',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '-15%',
+          right: '-10%',
+          width: '55%',
+          height: '55%',
+          background: 'radial-gradient(circle, rgba(139,92,246,0.12), transparent 70%)',
+          borderRadius: '50%',
+          filter: 'blur(100px)',
+          animation: 'nebula-drift 25s ease-in-out infinite reverse',
+          pointerEvents: 'none',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          top: '30%',
+          right: '25%',
+          width: '35%',
+          height: '35%',
+          background: 'radial-gradient(circle, rgba(236,72,153,0.08), transparent 70%)',
+          borderRadius: '50%',
+          filter: 'blur(100px)',
+          animation: 'nebula-drift 18s ease-in-out infinite 3s',
+          pointerEvents: 'none',
+        }}
+      />
+
+      {/* ── 星星层 ── */}
+      {stars.map((star) => (
+        <div
+          key={star.id}
+          style={{
+            position: 'absolute',
+            left: `${star.x}%`,
+            top: `${star.y}%`,
+            width: star.size,
+            height: star.size,
+            borderRadius: '50%',
+            background: star.color,
+            opacity: star.twinkle ? undefined : star.opacity,
+            boxShadow: `0 0 ${star.size * 2}px ${star.color}`,
+            animation: star.twinkle
+              ? `star-twinkle ${star.duration}s ease-in-out infinite ${star.delay}s`
+              : 'none',
+            pointerEvents: 'none',
+          }}
+        />
+      ))}
+
+      {/* ── 流星 ── */}
+      <div
+        style={{
+          position: 'absolute',
+          top: '8%',
+          left: '5%',
+          width: 120,
+          height: 2,
+          background: 'linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0))',
+          borderRadius: '0 50% 50% 0',
+          transform: 'rotate(-45deg)',
+          animation: 'meteor-fly 4s ease-out infinite 2s',
+          pointerEvents: 'none',
+          filter: 'blur(0.5px)',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          top: '15%',
+          left: '25%',
+          width: 80,
+          height: 1.5,
+          background: 'linear-gradient(90deg, rgba(200,220,255,0.8), rgba(255,255,255,0))',
+          borderRadius: '0 50% 50% 0',
+          transform: 'rotate(-35deg)',
+          animation: 'shooting-star 5s ease-out infinite 7s',
+          pointerEvents: 'none',
+          filter: 'blur(0.3px)',
+        }}
+      />
+
+      {/* ── 漂浮粒子星尘 ── */}
+      {particles.map((p) => (
+        <div
+          key={`p-${p.id}`}
+          style={{
+            position: 'absolute',
+            left: `${p.x}%`,
+            top: `${p.y}%`,
+            width: p.size,
+            height: p.size,
+            borderRadius: '50%',
+            background: 'rgba(200, 210, 255, 0.5)',
+            boxShadow: '0 0 4px rgba(200,210,255,0.3)',
+            animation: `float-particle ${p.duration}s ease-in-out infinite ${p.delay}s`,
+            pointerEvents: 'none',
+          }}
+        />
+      ))}
+
+      {/* ── 行星装饰（左下角） ── */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '8%',
+          left: '5%',
+          width: 100,
+          height: 100,
+          animation: 'planet-rotate 60s linear infinite',
+          pointerEvents: 'none',
+        }}
+      >
+        {/* 行星本体 */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 40,
+            height: 40,
+            borderRadius: '50%',
+            background: 'radial-gradient(circle at 35% 35%, rgba(100,149,237,0.9), rgba(65,45,120,0.8), rgba(30,20,60,0.95))',
+            boxShadow: 'inset -8px -8px 20px rgba(0,0,0,0.5), 0 0 20px rgba(100,149,237,0.2)',
+          }}
+        />
+        {/* 行星光环 */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotateX(75deg) rotateY(15deg)',
+            width: 72,
+            height: 72,
+            borderRadius: '50%',
+            border: '2px solid rgba(180,180,255,0.25)',
+            boxShadow: '0 0 8px rgba(180,180,255,0.15)',
+          }}
+        />
+        {/* 内环 */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotateX(75deg) rotateY(15deg)',
+            width: 56,
+            height: 56,
+            borderRadius: '50%',
+            border: '1px solid rgba(200,200,255,0.12)',
+          }}
+        />
+      </div>
+
+      {/* ── 小行星（右上角装饰） ── */}
+      <div
+        style={{
+          position: 'absolute',
+          top: '12%',
+          right: '12%',
+          width: 24,
+          height: 24,
+          borderRadius: '50%',
+          background: 'radial-gradient(circle at 40% 40%, rgba(236,200,160,0.7), rgba(160,120,80,0.5))',
+          boxShadow: 'inset -4px -4px 10px rgba(0,0,0,0.4), 0 0 15px rgba(236,200,160,0.15)',
+          animation: 'float-particle 10s ease-in-out infinite',
+          pointerEvents: 'none',
+        }}
+      />
+
+      {/* ── 登录卡片 ── */}
+      <div
+        style={{
+          position: 'relative',
+          zIndex: 10,
+          marginLeft: '18vw',
+          maxWidth: 400,
+          width: '100%',
+          padding: '48px 36px',
+          background: 'rgba(5, 8, 16, 0.75)',
+          backdropFilter: 'blur(30px)',
+          WebkitBackdropFilter: 'blur(30px)',
+          borderRadius: 24,
+          border: '1px solid rgba(255,255,255,0.05)',
+          animation: 'card-glow 6s ease-in-out infinite',
+          boxSizing: 'border-box',
+        }}
+      >
+        {/* 品牌区域 */}
+        <div style={{ textAlign: 'center', marginBottom: 36 }}>
+          {/* Logo */}
+          <div
+            style={{
+              width: 44,
+              height: 44,
+              borderRadius: 14,
+              background: 'linear-gradient(135deg, #1e3a8a, #7c3aed)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              margin: '0 auto 16px',
+              boxShadow: '0 4px 20px rgba(79,70,229,0.3), inset 0 1px 0 rgba(255,255,255,0.15)',
+            }}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <ellipse cx="12" cy="5" rx="9" ry="3" />
+              <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+              <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+            </svg>
+          </div>
+          <h1
+            style={{
+              fontSize: 22,
+              fontWeight: 700,
+              color: '#fff',
+              margin: '0 0 8px',
+              letterSpacing: '0.5px',
+            }}
+          >
+            SQL审核平台
+          </h1>
+          <p
+            style={{
+              fontSize: 13,
+              color: 'rgba(255,255,255,0.4)',
+              margin: 0,
+              letterSpacing: '0.3px',
+            }}
+          >
+            企业级数据库审核与合规管理
+          </p>
+        </div>
+
+        {/* 表单区域 */}
+        <form onSubmit={handleLogin}>
+          {/* 用户名 */}
+          <div style={{ marginBottom: 16 }}>
+            <label
+              style={{
+                display: 'block',
+                fontSize: 12,
+                fontWeight: 500,
+                color: 'rgba(255,255,255,0.5)',
+                marginBottom: 6,
+                letterSpacing: '0.3px',
+              }}
+            >
+              用户名
+            </label>
+            <input
+              type="text"
+              placeholder="请输入用户名"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              style={inputStyle}
+              onFocus={(e) => {
+                e.currentTarget.style.borderColor = 'rgba(139,92,246,0.4)';
+                e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+              }}
+              onBlur={(e) => {
+                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
+                e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
+              }}
+            />
+          </div>
+
+          {/* 密码 */}
+          <div style={{ marginBottom: 24 }}>
+            <label
+              style={{
+                display: 'block',
+                fontSize: 12,
+                fontWeight: 500,
+                color: 'rgba(255,255,255,0.5)',
+                marginBottom: 6,
+                letterSpacing: '0.3px',
+              }}
+            >
+              密码
+            </label>
+            <input
+              type="password"
+              placeholder="请输入密码"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              style={inputStyle}
+              onFocus={(e) => {
+                e.currentTarget.style.borderColor = 'rgba(139,92,246,0.4)';
+                e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+              }}
+              onBlur={(e) => {
+                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
+                e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
+              }}
+            />
+          </div>
+
+          {/* 登录按钮 */}
+          <button
+            type="submit"
+            disabled={!isFormValid || loading}
+            style={{
+              width: '100%',
+              height: 48,
+              borderRadius: 12,
+              border: 'none',
+              background: isFormValid
+                ? 'linear-gradient(135deg, #4f46e5, #8b5cf6)'
+                : 'rgba(255,255,255,0.08)',
+              color: isFormValid ? '#fff' : 'rgba(255,255,255,0.3)',
+              fontSize: 15,
+              fontWeight: 600,
+              cursor: isFormValid && !loading ? 'pointer' : 'not-allowed',
+              transition: 'all 0.3s ease',
+              position: 'relative',
+              overflow: 'hidden',
+              letterSpacing: '0.5px',
+              boxShadow: isFormValid
+                ? '0 4px 20px rgba(79,70,229,0.35), inset 0 1px 0 rgba(255,255,255,0.15)'
+                : 'none',
+            }}
+            onMouseEnter={(e) => {
+              if (isFormValid && !loading) {
+                e.currentTarget.style.transform = 'translateY(-2px)';
+                e.currentTarget.style.boxShadow = '0 8px 30px rgba(79,70,229,0.45), inset 0 1px 0 rgba(255,255,255,0.2)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = 'translateY(0)';
+              e.currentTarget.style.boxShadow = isFormValid
+                ? '0 4px 20px rgba(79,46,229,0.35), inset 0 1px 0 rgba(255,255,255,0.15)'
+                : 'none';
+            }}
+          >
+            {loading ? (
+              <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    width: 16,
+                    height: 16,
+                    border: '2px solid rgba(255,255,255,0.3)',
+                    borderTopColor: '#fff',
+                    borderRadius: '50%',
+                    animation: 'spin 0.8s linear infinite',
+                  }}
+                />
+                登录中...
+              </span>
+            ) : (
+              '登 录'
+            )}
+          </button>
+
+          {/* 错误提示 */}
+          {error && (
+            <div
+              style={{
+                marginTop: 14,
+                padding: '10px 14px',
+                borderRadius: 10,
+                background: 'rgba(239,68,68,0.1)',
+                border: '1px solid rgba(239,68,68,0.15)',
+                color: '#f87171',
+                fontSize: 13,
+                textAlign: 'center',
+              }}
+            >
+              {error}
+            </div>
+          )}
+        </form>
+
+        {/* 底部版权 */}
+        <p
+          style={{
+            marginTop: 28,
+            textAlign: 'center',
+            fontSize: 11,
+            color: 'rgba(255,255,255,0.2)',
+            letterSpacing: '0.3px',
+          }}
+        >
+          &copy; 2025 SQL审核平台 — 企业级数据库安全合规
+        </p>
+      </div>
+
+      {/* 全局旋转动画补充 */}
+      <style>{`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/frontend/src/components/login/GradientMeshView.tsx b/frontend/src/components/login/GradientMeshView.tsx
new file mode 100644
index 0000000..96779a9
--- /dev/null
+++ b/frontend/src/components/login/GradientMeshView.tsx
@@ -0,0 +1,362 @@
+import React, { useState } from 'react';
+import { useLogin } from '@/hooks/useLogin';
+
+/* ------------------------------------------------------------------ */
+/*  KEYFRAMES                                                          */
+/* ------------------------------------------------------------------ */
+const KEYFRAMES = `
+@keyframes mesh-drift-1 {
+  0%, 100% { transform: translate(0, 0); }
+  50%      { transform: translate(30px, 20px); }
+}
+@keyframes mesh-drift-2 {
+  0%, 100% { transform: translate(0, 0); }
+  50%      { transform: translate(-25px, -30px); }
+}
+@keyframes mesh-drift-3 {
+  0%, 100% { transform: translate(0, 0); }
+  50%      { transform: translate(20px, -25px); }
+}
+@keyframes mesh-drift-4 {
+  0%, 100% { transform: translate(0, 0); }
+  50%      { transform: translate(-30px, 20px); }
+}
+@keyframes mesh-drift-5 {
+  0%, 100% { transform: translate(0, 0); }
+  50%      { transform: translate(25px, 30px); }
+}
+@keyframes card-glow {
+  0%, 100% { opacity: 0.4; }
+  50%      { opacity: 0.7; }
+}
+@keyframes input-glow-pulse {
+  0%, 100% { opacity: 0.3; }
+  50%      { opacity: 0.6; }
+}
+`;
+
+/* ------------------------------------------------------------------ */
+/*  COMPONENT                                                          */
+/* ------------------------------------------------------------------ */
+export default function GradientMeshView(): React.JSX.Element {
+  const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
+  const [focusedField, setFocusedField] = useState<string | null>(null);
+  const [hoverBtn, setHoverBtn] = useState(false);
+
+  const isReady = username.trim().length > 0 && password.trim().length > 0;
+
+  /* ---- gradient mesh blobs ---- */
+  const blobs: React.CSSProperties[] = [
+    {
+      position: 'fixed', top: '-100px', left: '-100px',
+      width: '600px', height: '600px',
+      background: 'radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 70%)',
+      filter: 'blur(80px)', pointerEvents: 'none',
+      animation: 'mesh-drift-1 12s ease-in-out infinite',
+    },
+    {
+      position: 'fixed', bottom: '-80px', right: '-80px',
+      width: '500px', height: '500px',
+      background: 'radial-gradient(circle, rgba(244, 63, 94, 0.2), transparent 70%)',
+      filter: 'blur(90px)', pointerEvents: 'none',
+      animation: 'mesh-drift-2 10s ease-in-out infinite',
+    },
+    {
+      position: 'fixed', top: '40%', right: '10%',
+      width: '400px', height: '400px',
+      background: 'radial-gradient(circle, rgba(16, 185, 129, 0.15), transparent 70%)',
+      filter: 'blur(100px)', pointerEvents: 'none',
+      animation: 'mesh-drift-3 14s ease-in-out infinite',
+    },
+    {
+      position: 'fixed', bottom: '5%', left: '5%',
+      width: '450px', height: '450px',
+      background: 'radial-gradient(circle, rgba(245, 158, 11, 0.1), transparent 70%)',
+      filter: 'blur(85px)', pointerEvents: 'none',
+      animation: 'mesh-drift-4 11s ease-in-out infinite',
+    },
+    {
+      position: 'fixed', top: '-50px', right: '20%',
+      width: '550px', height: '550px',
+      background: 'radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%)',
+      filter: 'blur(95px)', pointerEvents: 'none',
+      animation: 'mesh-drift-5 13s ease-in-out infinite',
+    },
+  ];
+
+  /* ---- input base style ---- */
+  const inputBase: React.CSSProperties = {
+    width: '100%',
+    background: 'rgba(255,255,255,0.04)',
+    border: '1px solid rgba(255,255,255,0.06)',
+    borderRadius: 12,
+    padding: '14px 18px',
+    color: '#fff',
+    fontSize: 15,
+    outline: 'none',
+    transition: 'all 0.25s ease',
+    boxSizing: 'border-box',
+  };
+
+  const getInputStyle = (field: string): React.CSSProperties => ({
+    ...inputBase,
+    borderColor: focusedField === field ? 'rgba(99,102,241,0.5)' : 'rgba(255,255,255,0.06)',
+    background: focusedField === field ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.04)',
+  });
+
+  /* ---- card top accent line ---- */
+  const topAccent: React.CSSProperties = {
+    position: 'absolute',
+    top: 0, left: 24, right: 24,
+    height: 2,
+    borderRadius: 1,
+    background: 'linear-gradient(90deg, #6366f1, #f43f5e, #10b981)',
+    opacity: 0.6,
+  };
+
+  /* ---- subtle glow inside card bottom ---- */
+  const innerGlow: React.CSSProperties = {
+    position: 'absolute',
+    bottom: -60, left: '50%',
+    transform: 'translateX(-50%)',
+    width: '70%', height: 120,
+    background: 'radial-gradient(ellipse, rgba(99,102,241,0.08), transparent 70%)',
+    filter: 'blur(40px)',
+    pointerEvents: 'none',
+    animation: 'card-glow 8s ease-in-out infinite',
+  };
+
+  return (
+    <>
+      <style>{KEYFRAMES}</style>
+
+      {/* =====================  ROOT CONTAINER  ===================== */}
+      <div
+        style={{
+          minHeight: '100vh',
+          width: '100%',
+          position: 'relative',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: '#0a0a0f',
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        }}
+      >
+        {/* ---- gradient mesh blobs ---- */}
+        {blobs.map((b, i) => (
+          <div key={i} style={b} />
+        ))}
+
+        {/* ---- subtle dot-grid texture ---- */}
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            pointerEvents: 'none',
+            opacity: 0.03,
+            backgroundImage:
+              'radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px)',
+            backgroundSize: '24px 24px',
+          }}
+        />
+
+        {/* =====================  LOGIN CARD  ===================== */}
+        <div
+          style={{
+            position: 'relative',
+            width: '100%',
+            maxWidth: 400,
+            margin: '0 20px',
+            background: 'rgba(255, 255, 255, 0.03)',
+            backdropFilter: 'blur(40px) saturate(180%)',
+            WebkitBackdropFilter: 'blur(40px) saturate(180%)',
+            border: '1px solid rgba(255, 255, 255, 0.08)',
+            borderRadius: 24,
+            padding: '48px 36px',
+            boxShadow:
+              '0 0 0 1px rgba(255,255,255,0.04), 0 25px 50px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05)',
+            zIndex: 10,
+          }}
+        >
+          {/* top accent line */}
+          <div style={topAccent} />
+
+          {/* inner glow */}
+          <div style={innerGlow} />
+
+          {/* ---- brand ---- */}
+          <div style={{ textAlign: 'center', marginBottom: 36 }}>
+            {/* Logo */}
+            <div
+              style={{
+                width: 48,
+                height: 48,
+                borderRadius: 16,
+                background: 'linear-gradient(135deg, #6366f1, #f43f5e)',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: 20,
+                boxShadow: '0 8px 24px rgba(99,102,241,0.25)',
+              }}
+            >
+              <svg
+                width={20}
+                height={20}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <ellipse cx="12" cy="5" rx="9" ry="3" />
+                <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+                <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+              </svg>
+            </div>
+
+            <h1
+              style={{
+                color: '#fff',
+                fontSize: 24,
+                fontWeight: 700,
+                letterSpacing: '-0.5px',
+                margin: '0 0 8px 0',
+              }}
+            >
+              SQL审核平台
+            </h1>
+            <p
+              style={{
+                color: 'rgba(255,255,255,0.35)',
+                fontSize: 14,
+                letterSpacing: '0.3px',
+                margin: 0,
+              }}
+            >
+              企业级数据库审核与合规管理
+            </p>
+          </div>
+
+          {/* ---- form ---- */}
+          <form
+            onSubmit={handleLogin}
+            style={{ display: 'flex', flexDirection: 'column', gap: 14 }}
+          >
+            {/* username */}
+            <div style={{ position: 'relative' }}>
+              <input
+                type="text"
+                placeholder="用户名"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                onFocus={() => setFocusedField('username')}
+                onBlur={() => setFocusedField(null)}
+                style={getInputStyle('username')}
+                autoComplete="username"
+              />
+              {focusedField === 'username' && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    inset: -1,
+                    borderRadius: 13,
+                    background: 'radial-gradient(ellipse at center, rgba(99,102,241,0.12), transparent 70%)',
+                    filter: 'blur(8px)',
+                    pointerEvents: 'none',
+                    animation: 'input-glow-pulse 3s ease-in-out infinite',
+                  }}
+                />
+              )}
+            </div>
+
+            {/* password */}
+            <div style={{ position: 'relative' }}>
+              <input
+                type="password"
+                placeholder="密码"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                onFocus={() => setFocusedField('password')}
+                onBlur={() => setFocusedField(null)}
+                style={getInputStyle('password')}
+                autoComplete="current-password"
+              />
+              {focusedField === 'password' && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    inset: -1,
+                    borderRadius: 13,
+                    background: 'radial-gradient(ellipse at center, rgba(99,102,241,0.12), transparent 70%)',
+                    filter: 'blur(8px)',
+                    pointerEvents: 'none',
+                    animation: 'input-glow-pulse 3s ease-in-out infinite',
+                  }}
+                />
+              )}
+            </div>
+
+            {/* error */}
+            {error && (
+              <div
+                style={{
+                  background: 'rgba(239,68,68,0.08)',
+                  color: '#f87171',
+                  borderRadius: 10,
+                  padding: '10px 14px',
+                  fontSize: 13,
+                }}
+              >
+                {error}
+              </div>
+            )}
+
+            {/* submit */}
+            <button
+              type="submit"
+              disabled={!isReady || loading}
+              onMouseEnter={() => setHoverBtn(true)}
+              onMouseLeave={() => setHoverBtn(false)}
+              style={{
+                width: '100%',
+                marginTop: 4,
+                padding: '14px 24px',
+                borderRadius: 12,
+                border: 'none',
+                fontSize: 15,
+                fontWeight: 600,
+                color: '#fff',
+                cursor: isReady && !loading ? 'pointer' : 'not-allowed',
+                opacity: isReady ? 1 : 0.5,
+                background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%)',
+                boxShadow: hoverBtn && isReady && !loading
+                  ? '0 8px 32px rgba(99,102,241,0.45)'
+                  : '0 4px 20px rgba(99,102,241,0.3)',
+                transform: hoverBtn && isReady && !loading ? 'translateY(-1px)' : 'translateY(0)',
+                transition: 'all 0.25s ease',
+              }}
+            >
+              {loading ? '登录中...' : '登录'}
+            </button>
+          </form>
+
+          {/* ---- copyright ---- */}
+          <p
+            style={{
+              textAlign: 'center',
+              color: 'rgba(255,255,255,0.2)',
+              fontSize: 12,
+              margin: '28px 0 0 0',
+            }}
+          >
+            &copy; 2025 SQL审核平台
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/components/login/InkWashView.tsx b/frontend/src/components/login/InkWashView.tsx
new file mode 100644
index 0000000..0f9a84b
--- /dev/null
+++ b/frontend/src/components/login/InkWashView.tsx
@@ -0,0 +1,479 @@
+import React from 'react';
+import { useLogin } from '@/hooks/useLogin';
+
+/* ------------------------------------------------------------------ */
+/*  KEYFRAMES                                                          */
+/* ------------------------------------------------------------------ */
+const KEYFRAMES = `
+@keyframes ink-spread {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.45;
+  }
+  50% {
+    transform: scale(1.15);
+    opacity: 0.6;
+  }
+}
+
+@keyframes mist-flow {
+  0% {
+    transform: translateX(-8%);
+  }
+  50% {
+    transform: translateX(4%);
+  }
+  100% {
+    transform: translateX(-8%);
+  }
+}
+
+@keyframes gold-shimmer {
+  0%, 100% {
+    opacity: 0.35;
+    transform: scaleX(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scaleX(1.06);
+  }
+}
+`;
+
+/* ------------------------------------------------------------------ */
+/*  Component                                                          */
+/* ------------------------------------------------------------------ */
+export default function InkWashView(): JSX.Element {
+  const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
+
+  return (
+    <>
+      <style>{KEYFRAMES}</style>
+
+      {/* ===================== 全屏容器 ===================== */}
+      <div
+        style={{
+          minHeight: '100vh',
+          position: 'relative',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: '#f5f0e8',
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
+        }}
+      >
+        {/* ────────── 水墨晕染装饰 ────────── */}
+        {/* 左上角淡墨点 */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '-8%',
+            left: '-6%',
+            width: '50vw',
+            height: '50vh',
+            borderRadius: '50%',
+            background: 'radial-gradient(ellipse, rgba(160, 150, 135, 0.25) 0%, transparent 70%)',
+            filter: 'blur(80px)',
+            animation: 'ink-spread 10s ease-in-out infinite',
+            pointerEvents: 'none',
+          }}
+        />
+        {/* 右下角浓墨点 */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '-10%',
+            right: '-8%',
+            width: '55vw',
+            height: '55vh',
+            borderRadius: '50%',
+            background: 'radial-gradient(ellipse, rgba(80, 72, 60, 0.35) 0%, transparent 70%)',
+            filter: 'blur(90px)',
+            animation: 'ink-spread 14s ease-in-out infinite reverse',
+            pointerEvents: 'none',
+          }}
+        />
+        {/* 中央偏上淡淡墨痕 */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '18%',
+            left: '35%',
+            width: '30vw',
+            height: '20vh',
+            borderRadius: '50%',
+            background: 'radial-gradient(ellipse, rgba(140, 130, 115, 0.15) 0%, transparent 70%)',
+            filter: 'blur(70px)',
+            animation: 'ink-spread 12s ease-in-out infinite 2s',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* ────────── 远山轮廓 ────────── */}
+        {/* 最远山 */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: '40%',
+            background: 'linear-gradient(to top, rgba(180, 175, 165, 0.4) 0%, transparent 60%)',
+            borderRadius: '50% 50% 0 0 / 80px 80px 0 0',
+            pointerEvents: 'none',
+          }}
+        />
+        {/* 中山 */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: '-10%',
+            right: '-5%',
+            height: '25%',
+            background: 'linear-gradient(to top, rgba(120, 115, 108, 0.5) 0%, transparent 50%)',
+            borderRadius: '40% 60% 0 0 / 60px 50px 0 0',
+            pointerEvents: 'none',
+          }}
+        />
+        {/* 近山 */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: '-15%',
+            right: '-15%',
+            height: '15%',
+            background: 'linear-gradient(to top, rgba(60, 58, 52, 0.6) 0%, transparent 40%)',
+            borderRadius: '60% 40% 0 0 / 40px 30px 0 0',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* ────────── 雾气效果 ────────── */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '8%',
+            left: 0,
+            right: 0,
+            height: '22%',
+            background: 'linear-gradient(to top, rgba(245, 240, 232, 0.85) 0%, rgba(245, 240, 232, 0.3) 50%, transparent 100%)',
+            animation: 'mist-flow 18s ease-in-out infinite',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* ────────── 金色点缀线（水面微光） ────────── */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '12%',
+            left: '20%',
+            width: '25%',
+            height: '1px',
+            background: '#c9a96e',
+            opacity: 0.35,
+            animation: 'gold-shimmer 6s ease-in-out infinite',
+            pointerEvents: 'none',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '15%',
+            right: '18%',
+            width: '18%',
+            height: '1px',
+            background: '#c9a96e',
+            opacity: 0.3,
+            animation: 'gold-shimmer 8s ease-in-out infinite 1.5s',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* ────────── 竖排 SQL 背景装饰 ────────── */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '12%',
+            right: '8%',
+            writingMode: 'vertical-rl',
+            fontSize: 72,
+            fontWeight: 700,
+            color: 'rgba(45, 42, 36, 0.04)',
+            letterSpacing: 12,
+            userSelect: 'none',
+            pointerEvents: 'none',
+            fontFamily: 'Georgia, "Times New Roman", serif',
+          }}
+        >
+          SQL
+        </div>
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '18%',
+            left: '6%',
+            writingMode: 'vertical-rl',
+            fontSize: 56,
+            fontWeight: 700,
+            color: 'rgba(45, 42, 36, 0.03)',
+            letterSpacing: 8,
+            userSelect: 'none',
+            pointerEvents: 'none',
+            fontFamily: 'Georgia, "Times New Roman", serif',
+          }}
+        >
+          AUDIT
+        </div>
+
+        {/* ===================== 登录卡片 ===================== */}
+        <div
+          style={{
+            position: 'relative',
+            zIndex: 10,
+            width: '100%',
+            maxWidth: 380,
+            margin: '0 20px',
+            marginTop: '-6vh',
+            background: 'rgba(255, 253, 248, 0.85)',
+            backdropFilter: 'blur(16px)',
+            WebkitBackdropFilter: 'blur(16px)',
+            border: '1px solid rgba(201, 169, 110, 0.2)',
+            borderRadius: 16,
+            padding: '44px 36px',
+            boxShadow: '0 4px 30px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.8)',
+          }}
+        >
+          {/* ──── 品牌区域 ──── */}
+          <div style={{ textAlign: 'center', marginBottom: 32 }}>
+            {/* Logo */}
+            <div
+              style={{
+                width: 44,
+                height: 44,
+                borderRadius: 10,
+                background: 'linear-gradient(135deg, #3a362e, #1f1d19)',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: 18,
+                boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
+              }}
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#c9a96e"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <ellipse cx="12" cy="5" rx="9" ry="3" />
+                <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+                <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+              </svg>
+            </div>
+
+            {/* 标题 */}
+            <h1
+              style={{
+                fontSize: 22,
+                fontWeight: 600,
+                color: '#2d2a24',
+                margin: '0 0 6px',
+                letterSpacing: 1,
+              }}
+            >
+              SQL审核平台
+            </h1>
+
+            {/* 副标题 */}
+            <p
+              style={{
+                fontSize: 13,
+                color: '#8a8478',
+                margin: 0,
+                letterSpacing: 0.5,
+              }}
+            >
+              企业级数据库审核与合规管理
+            </p>
+          </div>
+
+          {/* ──── 中国风细线装饰（上方） ──── */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24, gap: 8 }}>
+            <div style={{ width: 32, height: 1, background: 'linear-gradient(to left, #c9a96e, transparent)' }} />
+            <div style={{ width: 4, height: 4, borderRadius: '50%', background: '#c9a96e', opacity: 0.5 }} />
+            <div style={{ width: 32, height: 1, background: 'linear-gradient(to right, #c9a96e, transparent)' }} />
+          </div>
+
+          {/* ──── 表单 ──── */}
+          <form onSubmit={handleLogin}>
+            {/* 用户名 */}
+            <div style={{ marginBottom: 16 }}>
+              <label
+                style={{
+                  display: 'block',
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: '#5a5448',
+                  marginBottom: 6,
+                }}
+              >
+                用户名
+              </label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="请输入用户名"
+                style={{
+                  width: '100%',
+                  height: 44,
+                  padding: '0 14px',
+                  fontSize: 14,
+                  borderRadius: 10,
+                  outline: 'none',
+                  boxSizing: 'border-box',
+                  transition: 'border-color 0.3s, box-shadow 0.3s',
+                  background: '#faf8f4',
+                  border: '1px solid #e5e0d5',
+                  color: '#2d2a24',
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.borderColor = '#c9a96e';
+                  e.currentTarget.style.boxShadow = '0 0 0 3px rgba(201, 169, 110, 0.12)';
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.borderColor = '#e5e0d5';
+                  e.currentTarget.style.boxShadow = 'none';
+                }}
+              />
+            </div>
+
+            {/* 密码 */}
+            <div style={{ marginBottom: 20 }}>
+              <label
+                style={{
+                  display: 'block',
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: '#5a5448',
+                  marginBottom: 6,
+                }}
+              >
+                密码
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="请输入密码"
+                style={{
+                  width: '100%',
+                  height: 44,
+                  padding: '0 14px',
+                  fontSize: 14,
+                  borderRadius: 10,
+                  outline: 'none',
+                  boxSizing: 'border-box',
+                  transition: 'border-color 0.3s, box-shadow 0.3s',
+                  background: '#faf8f4',
+                  border: '1px solid #e5e0d5',
+                  color: '#2d2a24',
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.borderColor = '#c9a96e';
+                  e.currentTarget.style.boxShadow = '0 0 0 3px rgba(201, 169, 110, 0.12)';
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.borderColor = '#e5e0d5';
+                  e.currentTarget.style.boxShadow = 'none';
+                }}
+              />
+            </div>
+
+            {/* 错误提示 */}
+            {error && (
+              <div
+                style={{
+                  marginBottom: 16,
+                  padding: '10px 14px',
+                  borderRadius: 8,
+                  background: '#fef2f2',
+                  color: '#dc2626',
+                  fontSize: 13,
+                  lineHeight: 1.5,
+                }}
+              >
+                {error}
+              </div>
+            )}
+
+            {/* 登录按钮 */}
+            <button
+              type="submit"
+              disabled={!username || !password || loading}
+              style={{
+                width: '100%',
+                height: 46,
+                fontSize: 15,
+                fontWeight: 500,
+                color: '#fff',
+                border: 'none',
+                borderRadius: 10,
+                cursor: !username || !password || loading ? 'not-allowed' : 'pointer',
+                opacity: !username || !password || loading ? 0.65 : 1,
+                background: 'linear-gradient(135deg, #2d2a24, #4a453d)',
+                transition: 'all 0.3s ease',
+                letterSpacing: 1,
+                position: 'relative',
+                overflow: 'hidden',
+              }}
+              onMouseEnter={(e) => {
+                if (username && password && !loading) {
+                  e.currentTarget.style.background = 'linear-gradient(135deg, #3a362e, #5a554d)';
+                  e.currentTarget.style.transform = 'translateY(-1px)';
+                  e.currentTarget.style.boxShadow = '0 4px 16px rgba(45, 42, 36, 0.25)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'linear-gradient(135deg, #2d2a24, #4a453d)';
+                e.currentTarget.style.transform = 'translateY(0)';
+                e.currentTarget.style.boxShadow = 'none';
+              }}
+            >
+              {loading ? '登录中...' : '登 录'}
+            </button>
+          </form>
+
+          {/* ──── 中国风细线装饰（下方） ──── */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 24, gap: 8 }}>
+            <div style={{ width: 24, height: 1, background: 'linear-gradient(to left, #c9a96e, transparent)' }} />
+            <div style={{ width: 3, height: 3, borderRadius: '50%', background: '#c9a96e', opacity: 0.4 }} />
+            <div style={{ width: 24, height: 1, background: 'linear-gradient(to right, #c9a96e, transparent)' }} />
+          </div>
+
+          {/* ──── 版权信息 ──── */}
+          <p
+            style={{
+              textAlign: 'center',
+              fontSize: 12,
+              color: '#a09a8e',
+              marginTop: 20,
+              marginBottom: 0,
+              letterSpacing: 0.3,
+            }}
+          >
+            &copy; SQL Audit Platform. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/components/login/NeonCityView.tsx b/frontend/src/components/login/NeonCityView.tsx
new file mode 100644
index 0000000..754f22a
--- /dev/null
+++ b/frontend/src/components/login/NeonCityView.tsx
@@ -0,0 +1,505 @@
+import React from 'react';
+import { useLogin } from '@/hooks/useLogin';
+
+const KEYFRAMES = `
+@keyframes neon-pulse {
+  0%, 100% { opacity: 0.6; box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; }
+  50% { opacity: 1; box-shadow: 0 0 20px currentColor, 0 0 40px currentColor, 0 0 80px currentColor; }
+}
+
+@keyframes neon-flicker {
+  0%, 100% { opacity: 1; }
+  3% { opacity: 0.4; }
+  6% { opacity: 1; }
+  7% { opacity: 0.2; }
+  8% { opacity: 1; }
+  92% { opacity: 1; }
+  93% { opacity: 0.3; }
+  94% { opacity: 1; }
+}
+
+@keyframes rain-fall {
+  0% { transform: translateY(-100vh) translateX(0); opacity: 0; }
+  10% { opacity: 0.6; }
+  90% { opacity: 0.6; }
+  100% { transform: translateY(100vh) translateX(20px); opacity: 0; }
+}
+
+@keyframes grid-move {
+  0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
+  100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
+}
+
+@keyframes city-breathe {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.02); }
+}
+
+@keyframes neon-glow-text {
+  0%, 100% { text-shadow: 0 0 10px rgba(236, 72, 153, 0.5), 0 0 20px rgba(236, 72, 153, 0.3); }
+  50% { text-shadow: 0 0 20px rgba(236, 72, 153, 0.8), 0 0 40px rgba(236, 72, 153, 0.5); }
+}
+`;
+
+// Building data: [width, heightPercent, leftPercent, glowColor]
+const BUILDINGS: [number, number, number, string][] = [
+  [40, 18, 0, 'rgba(236, 72, 153, 0.4)'],
+  [55, 28, 4, 'rgba(168, 85, 247, 0.35)'],
+  [35, 15, 9, 'rgba(6, 182, 212, 0.3)'],
+  [70, 35, 12, 'rgba(236, 72, 153, 0.45)'],
+  [45, 22, 19, 'rgba(168, 85, 247, 0.4)'],
+  [50, 30, 23, 'rgba(6, 182, 212, 0.35)'],
+  [30, 16, 28, 'rgba(236, 72, 153, 0.3)'],
+  [80, 38, 31, 'rgba(168, 85, 247, 0.5)'],
+  [42, 20, 39, 'rgba(6, 182, 212, 0.4)'],
+  [60, 32, 43, 'rgba(236, 72, 153, 0.45)'],
+  [38, 17, 49, 'rgba(168, 85, 247, 0.3)'],
+  [75, 36, 52, 'rgba(6, 182, 212, 0.5)'],
+  [48, 25, 60, 'rgba(236, 72, 153, 0.4)'],
+  [55, 30, 65, 'rgba(168, 85, 247, 0.45)'],
+  [33, 14, 70, 'rgba(6, 182, 212, 0.3)'],
+  [85, 40, 73, 'rgba(236, 72, 153, 0.5)'],
+  [44, 21, 82, 'rgba(168, 85, 247, 0.4)'],
+  [58, 33, 86, 'rgba(6, 182, 212, 0.45)'],
+  [36, 16, 92, 'rgba(236, 72, 153, 0.35)'],
+  [50, 27, 95, 'rgba(168, 85, 247, 0.4)'],
+];
+
+// Neon tube data: [topPercent, color, animationDelay, animationDuration]
+const NEON_TUBES: [number, string, string, string][] = [
+  [22, '#ec4899', '0s', '3s'],
+  [38, '#06b6d4', '1s', '4s'],
+  [52, '#a855f7', '2s', '3.5s'],
+];
+
+// Rain drop data: [leftPercent, delay, duration]
+const RAIN_DROPS: [number, string, string][] = [
+  [5, '0s', '1.5s'],
+  [15, '0.3s', '1.8s'],
+  [25, '0.7s', '1.3s'],
+  [35, '0.2s', '1.6s'],
+  [45, '0.9s', '1.4s'],
+  [55, '0.5s', '1.7s'],
+  [65, '0.1s', '1.5s'],
+  [75, '0.8s', '1.9s'],
+  [85, '0.4s', '1.3s'],
+  [95, '0.6s', '1.6s'],
+  [10, '1.1s', '1.4s'],
+  [30, '1.3s', '1.7s'],
+  [50, '1.0s', '1.5s'],
+  [70, '1.5s', '1.8s'],
+  [90, '1.2s', '1.4s'],
+  [20, '0.15s', '2.0s'],
+  [40, '0.85s', '1.35s'],
+  [60, '1.25s', '1.65s'],
+  [80, '0.45s', '1.75s'],
+  [8, '0.95s', '1.55s'],
+];
+
+export default function NeonCityView(): JSX.Element {
+  const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
+
+  return (
+    <>
+      <style>{KEYFRAMES}</style>
+      <div
+        style={{
+          minHeight: '100vh',
+          position: 'relative',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: 'linear-gradient(180deg, #0a0418 0%, #1a0b2e 40%, #0d0718 100%)',
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        }}
+      >
+        {/* Grid floor background */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '-60%',
+            left: '-50%',
+            width: '200%',
+            height: '100%',
+            backgroundImage:
+              'linear-gradient(rgba(236, 72, 153, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 182, 212, 0.04) 1px, transparent 1px)',
+            backgroundSize: '60px 60px',
+            animation: 'grid-move 8s linear infinite',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* Neon tubes */}
+        {NEON_TUBES.map(([top, color, delay, duration], i) => (
+          <div
+            key={`neon-${i}`}
+            style={{
+              position: 'absolute',
+              top: `${top}%`,
+              left: '5%',
+              right: '5%',
+              height: '2px',
+              background: color,
+              color: color,
+              boxShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 40px ${color}`,
+              animation: `neon-pulse ${duration} ease-in-out infinite ${delay}, neon-flicker ${duration} ease-in-out infinite ${delay}`,
+              borderRadius: '1px',
+              pointerEvents: 'none',
+              zIndex: 1,
+            }}
+          />
+        ))}
+
+        {/* City skyline buildings */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: '40%',
+            animation: 'city-breathe 6s ease-in-out infinite',
+            pointerEvents: 'none',
+            zIndex: 2,
+          }}
+        >
+          {BUILDINGS.map(([width, heightPct, leftPct, glowColor], i) => (
+            <div
+              key={`building-${i}`}
+              style={{
+                position: 'absolute',
+                bottom: 0,
+                left: `${leftPct}%`,
+                width: `${width}px`,
+                height: `${heightPct}%`,
+                background: 'rgba(5, 3, 15, 0.9)',
+                borderRadius: '2px 2px 0 0',
+                boxShadow: `0 -2px 10px ${glowColor}`,
+              }}
+            />
+          ))}
+        </div>
+
+        {/* Rain drops */}
+        {RAIN_DROPS.map(([left, delay, duration], i) => (
+          <div
+            key={`rain-${i}`}
+            style={{
+              position: 'absolute',
+              left: `${left}%`,
+              top: 0,
+              width: '1px',
+              height: '25px',
+              background: 'linear-gradient(180deg, transparent, rgba(6, 182, 212, 0.3))',
+              animation: `rain-fall ${duration} linear infinite ${delay}`,
+              pointerEvents: 'none',
+              zIndex: 3,
+            }}
+          />
+        ))}
+
+        {/* Fog layer */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: '35%',
+            background: 'linear-gradient(180deg, transparent 0%, rgba(10, 4, 24, 0.6) 50%, rgba(10, 4, 24, 0.85) 100%)',
+            pointerEvents: 'none',
+            zIndex: 4,
+          }}
+        />
+
+        {/* Top glow */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '-10%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: '600px',
+            height: '300px',
+            background: 'radial-gradient(ellipse, rgba(168, 85, 247, 0.12) 0%, transparent 70%)',
+            pointerEvents: 'none',
+            zIndex: 0,
+          }}
+        />
+
+        {/* Login card */}
+        <div
+          style={{
+            position: 'relative',
+            zIndex: 10,
+            width: '100%',
+            maxWidth: 400,
+            margin: '0 20px',
+            background: 'rgba(10, 5, 25, 0.8)',
+            backdropFilter: 'blur(20px)',
+            WebkitBackdropFilter: 'blur(20px)',
+            border: '1px solid rgba(236, 72, 153, 0.2)',
+            borderRadius: 16,
+            padding: '44px 36px',
+            boxShadow: '0 0 20px rgba(236, 72, 153, 0.1), 0 8px 40px rgba(0,0,0,0.5)',
+            overflow: 'hidden',
+          }}
+        >
+          {/* Top neon line decoration */}
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              height: '2px',
+              background: 'linear-gradient(90deg, #ec4899, #06b6d4, #a855f7, #ec4899)',
+              backgroundSize: '200% 100%',
+              animation: 'neon-pulse 3s ease-in-out infinite',
+            }}
+          />
+
+          {/* Brand area */}
+          <div style={{ textAlign: 'center', marginBottom: 32 }}>
+            {/* Logo */}
+            <div
+              style={{
+                width: 44,
+                height: 44,
+                borderRadius: 12,
+                background: 'linear-gradient(135deg, #ec4899, #06b6d4)',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: 20,
+                boxShadow: '0 0 15px rgba(236, 72, 153, 0.5), 0 0 30px rgba(6, 182, 212, 0.3)',
+              }}
+            >
+              <svg
+                width="22"
+                height="22"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <ellipse cx="12" cy="5" rx="9" ry="3" />
+                <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+                <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+              </svg>
+            </div>
+
+            {/* Title */}
+            <h1
+              style={{
+                fontSize: 24,
+                fontWeight: 700,
+                color: '#fff',
+                margin: '0 0 8px',
+                letterSpacing: '0.5px',
+                animation: 'neon-glow-text 3s ease-in-out infinite',
+              }}
+            >
+              SQL审核平台
+            </h1>
+
+            {/* Subtitle */}
+            <p
+              style={{
+                fontSize: 14,
+                color: 'rgba(6, 182, 212, 0.8)',
+                margin: 0,
+                letterSpacing: '0.3px',
+              }}
+            >
+              企业级数据库审核与合规管理
+            </p>
+          </div>
+
+          {/* Login form */}
+          <form onSubmit={handleLogin}>
+            {/* Username input */}
+            <div style={{ marginBottom: 18 }}>
+              <label
+                htmlFor="username"
+                style={{
+                  display: 'block',
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: 'rgba(255,255,255,0.7)',
+                  marginBottom: 8,
+                  letterSpacing: '0.3px',
+                }}
+              >
+                用户名
+              </label>
+              <input
+                id="username"
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="请输入用户名"
+                autoComplete="username"
+                style={{
+                  width: '100%',
+                  height: 46,
+                  padding: '0 16px',
+                  fontSize: 14,
+                  color: '#fff',
+                  background: 'rgba(255,255,255,0.05)',
+                  border: '1px solid rgba(255,255,255,0.08)',
+                  borderRadius: 10,
+                  outline: 'none',
+                  boxSizing: 'border-box',
+                  transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(236, 72, 153, 0.6)';
+                  e.currentTarget.style.boxShadow = '0 0 10px rgba(236, 72, 153, 0.2)';
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
+                  e.currentTarget.style.boxShadow = 'none';
+                }}
+              />
+            </div>
+
+            {/* Password input */}
+            <div style={{ marginBottom: 24 }}>
+              <label
+                htmlFor="password"
+                style={{
+                  display: 'block',
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: 'rgba(255,255,255,0.7)',
+                  marginBottom: 8,
+                  letterSpacing: '0.3px',
+                }}
+              >
+                密码
+              </label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="请输入密码"
+                autoComplete="current-password"
+                style={{
+                  width: '100%',
+                  height: 46,
+                  padding: '0 16px',
+                  fontSize: 14,
+                  color: '#fff',
+                  background: 'rgba(255,255,255,0.05)',
+                  border: '1px solid rgba(255,255,255,0.08)',
+                  borderRadius: 10,
+                  outline: 'none',
+                  boxSizing: 'border-box',
+                  transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(6, 182, 212, 0.6)';
+                  e.currentTarget.style.boxShadow = '0 0 10px rgba(6, 182, 212, 0.2)';
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
+                  e.currentTarget.style.boxShadow = 'none';
+                }}
+              />
+            </div>
+
+            {/* Error message */}
+            {error && (
+              <div
+                style={{
+                  marginBottom: 16,
+                  padding: '10px 14px',
+                  borderRadius: 8,
+                  background: 'rgba(239, 68, 68, 0.1)',
+                  border: '1px solid rgba(239, 68, 68, 0.2)',
+                  color: '#f87171',
+                  fontSize: 13,
+                  textShadow: '0 0 8px rgba(239, 68, 68, 0.4)',
+                  animation: 'neon-flicker 0.5s ease-in-out',
+                }}
+              >
+                {error}
+              </div>
+            )}
+
+            {/* Login button */}
+            <button
+              type="submit"
+              disabled={!username || !password || loading}
+              style={{
+                width: '100%',
+                height: 48,
+                fontSize: 15,
+                fontWeight: 600,
+                color: '#fff',
+                background: 'linear-gradient(135deg, #ec4899, #06b6d4)',
+                border: 'none',
+                borderRadius: 10,
+                cursor: !username || !password || loading ? 'not-allowed' : 'pointer',
+                opacity: !username || !password ? 0.6 : 1,
+                boxShadow: '0 0 15px rgba(236, 72, 153, 0.4)',
+                transition: 'all 0.3s ease',
+                letterSpacing: '0.5px',
+              }}
+              onMouseEnter={(e) => {
+                if (username && password && !loading) {
+                  e.currentTarget.style.boxShadow = '0 0 25px rgba(236, 72, 153, 0.6), 0 0 40px rgba(6, 182, 212, 0.3)';
+                  e.currentTarget.style.transform = 'translateY(-1px)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.boxShadow = '0 0 15px rgba(236, 72, 153, 0.4)';
+                e.currentTarget.style.transform = 'translateY(0)';
+              }}
+            >
+              {loading ? (
+                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{ animation: 'spin 1s linear infinite' }}
+                  >
+                    <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+                    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                  </svg>
+                  登录中...
+                </span>
+              ) : (
+                '登 录'
+              )}
+            </button>
+          </form>
+
+          {/* Copyright */}
+          <p
+            style={{
+              textAlign: 'center',
+              fontSize: 12,
+              color: 'rgba(255,255,255,0.25)',
+              marginTop: 28,
+              marginBottom: 0,
+            }}
+          >
+            © SQL审核平台 · 安全合规的数据库管理
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/pages/AppearanceSettings.tsx b/frontend/src/pages/AppearanceSettings.tsx
index f79a511..80b11b9 100644
--- a/frontend/src/pages/AppearanceSettings.tsx
+++ b/frontend/src/pages/AppearanceSettings.tsx
@@ -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 */}
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 515bf46..3b08226 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -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() {