admin/src/components/login-backdrop.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef } from 'react'
+
+/** 登录页背景：青蓝粒子网络（呼应 logo 的节点网络），纯 canvas 无依赖 */
+export function LoginBackdrop() {
+  const ref = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = ref.current
+    if (!canvas) return
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    const reduce = window.matchMedia(
+      '(prefers-reduced-motion: reduce)',
+    ).matches
+    const dpr = Math.min(window.devicePixelRatio || 1, 2)
+    let w = 0
+    let h = 0
+    let raf = 0
+    const dots: { x: number; y: number; vx: number; vy: number }[] = []
+
+    const resize = () => {
+      w = canvas.clientWidth
+      h = canvas.clientHeight
+      canvas.width = w * dpr
+      canvas.height = h * dpr
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    }
+
+    const init = () => {
+      dots.length = 0
+      const n = Math.min(64, Math.floor((w * h) / 16000))
+      for (let i = 0; i < n; i++) {
+        dots.push({
+          x: Math.random() * w,
+          y: Math.random() * h,
+          vx: (Math.random() - 0.5) * 0.28,
+          vy: (Math.random() - 0.5) * 0.28,
+        })
+      }
+    }
+
+    const frame = () => {
+      ctx.clearRect(0, 0, w, h)
+      for (const p of dots) {
+        p.x += p.vx
+        p.y += p.vy
+        if (p.x < 0 || p.x > w) p.vx *= -1
+        if (p.y < 0 || p.y > h) p.vy *= -1
+      }
+      for (let i = 0; i < dots.length; i++) {
+        for (let j = i + 1; j < dots.length; j++) {
+          const a = dots[i]
+          const b = dots[j]
+          const d = Math.hypot(a.x - b.x, a.y - b.y)
+          if (d < 130) {
+            ctx.strokeStyle = `rgba(56,189,248,${(1 - d / 130) * 0.16})`
+            ctx.lineWidth = 1
+            ctx.beginPath()
+            ctx.moveTo(a.x, a.y)
+            ctx.lineTo(b.x, b.y)
+            ctx.stroke()
+          }
+        }
+      }
+      for (const p of dots) {
+        ctx.fillStyle = 'rgba(56,189,248,0.55)'
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
+        ctx.fill()
+      }
+      if (!reduce) raf = requestAnimationFrame(frame)
+    }
+
+    const onResize = () => {
+      resize()
+      init()
+    }
+
+    resize()
+    init()
+    frame()
+    window.addEventListener('resize', onResize)
+    return () => {
+      cancelAnimationFrame(raf)
+      window.removeEventListener('resize', onResize)
+    }
+  }, [])
+
+  return (
+    <canvas
+      ref={ref}
+      aria-hidden="true"
+      className="absolute inset-0 h-full w-full"
+    />
+  )
+}

admin/src/pages/login.tsx

@@ -1,13 +1,15 @@
 import { useState, type FormEvent } from 'react'
 import { Navigate, useNavigate } from 'react-router-dom'
+import { Eye, EyeOff, Loader2 } from 'lucide-react'
 import { getToken } from '@/api/client'
 import { login } from '@/api/auth'
-import { LogoMark } from '@/components/logo'
+import { LoginBackdrop } from '@/components/login-backdrop'
 
 export default function LoginPage() {
   const navigate = useNavigate()
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
+  const [showPwd, setShowPwd] = useState(false)
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
 
@@ -15,6 +17,10 @@ export default function LoginPage() {
 
   const onSubmit = async (e: FormEvent) => {
     e.preventDefault()
+    if (!username || !password) {
+      setError('请输入用户名和密码')
+      return
+    }
     setError('')
     setLoading(true)
     try {
@@ -27,58 +33,139 @@ export default function LoginPage() {
     }
   }
 
-  return (
+  const fieldCls =
-    <div className="flex min-h-screen items-center justify-center px-6">
+    'h-11 w-full rounded-xl border border-white/10 bg-white/5 px-3.5 text-[14px] text-white outline-none transition-colors placeholder:text-white/25 focus:border-[#38bdf8]/60 focus:bg-white/[0.08]'
-      <form
-        onSubmit={onSubmit}
-        className="w-full max-w-[360px] rounded-xl border border-hairline bg-surface p-8"
-      >
-        <p className="mb-1 flex items-center gap-2 font-mono text-[13px] font-semibold">
-          <LogoMark size={22} />
-          sundynix <em className="not-italic text-accent">admin</em>
-        </p>
-        <h1 className="mb-6 text-[20px] font-[650] tracking-[-0.01em]">
-          登录内容管理
-        </h1>
 
-        <label className="mb-4 block">
+  return (
-          <span className="mb-1.5 block text-[13px] text-ink-2">用户名</span>
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#0b1117] p-6">
+      <LoginBackdrop />
+
+      {/* 品牌光晕（呼应 logo 青→蓝→紫） */}
+      <div className="pointer-events-none absolute -left-32 -top-24 h-[420px] w-[420px] rounded-full bg-[#22d3ee]/12 blur-[110px]" />
+      <div className="pointer-events-none absolute -bottom-28 -right-24 h-[420px] w-[420px] rounded-full bg-[#9333ea]/12 blur-[110px]" />
+
+      <div className="relative z-10 grid w-full max-w-[880px] overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] shadow-2xl backdrop-blur-xl lg:grid-cols-2">
+        {/* 左：品牌区 */}
+        <div className="relative hidden flex-col justify-between p-10 lg:flex">
+          <div className="flex items-center gap-2.5">
+            <img
+              src={`${import.meta.env.BASE_URL}logo-mark.webp`}
+              alt=""
+              width={34}
+              height={34}
+              style={{ borderRadius: '22%' }}
+            />
+            <span className="font-mono text-[15px] font-semibold text-white">
+              sundynix <em className="not-italic text-[#38bdf8]">admin</em>
+            </span>
+          </div>
+
+          <div>
+            <h2 className="text-[27px] font-semibold leading-snug tracking-tight text-white">
+              事件驱动的
+              <br />
+              AI Agent 工作台
+            </h2>
+            <p className="mt-3 text-[14px] text-white/45">内容管理控制台</p>
+          </div>
+
+          <div className="font-mono text-[11px] tracking-wide text-white/25">
+            © 2026 SUNDYNIX AGENTIX
+          </div>
+        </div>
+
+        {/* 右：表单区 */}
+        <div className="flex flex-col justify-center bg-white/[0.02] px-8 py-12 sm:px-10">
+          {/* 移动端 logo */}
+          <div className="mb-8 flex items-center gap-2.5 lg:hidden">
+            <img
+              src={`${import.meta.env.BASE_URL}logo-mark.webp`}
+              alt=""
+              width={30}
+              height={30}
+              style={{ borderRadius: '22%' }}
+            />
+            <span className="font-mono text-[14px] font-semibold text-white">
+              sundynix <em className="not-italic text-[#38bdf8]">admin</em>
+            </span>
+          </div>
+
+          <h1 className="text-[22px] font-semibold tracking-tight text-white">
+            欢迎回来
+          </h1>
+          <p className="mt-1.5 text-[13.5px] text-white/45">
+            登录内容管理控制台
+          </p>
+
+          <form onSubmit={onSubmit} className="mt-8 space-y-4">
+            {error && (
+              <div className="flex items-center gap-2 rounded-xl border border-red-400/30 bg-red-500/10 px-3.5 py-2.5 text-[13px] text-red-300">
+                <span className="size-1.5 rounded-full bg-red-400" />
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label className="mb-1.5 block text-[13px] text-white/55">
+                用户名
+              </label>
               <input
                 type="text"
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
                 autoComplete="username"
-            required
+                disabled={loading}
-            className="w-full rounded-lg border border-hairline-strong bg-ground px-3.5 py-2 text-[14.5px] outline-none transition-colors focus:border-accent"
+                placeholder="管理员账号"
+                className={fieldCls}
               />
-        </label>
+            </div>
 
-        <label className="mb-5 block">
+            <div>
-          <span className="mb-1.5 block text-[13px] text-ink-2">密码</span>
+              <label className="mb-1.5 block text-[13px] text-white/55">
+                密码
+              </label>
+              <div className="relative">
                 <input
-            type="password"
+                  type={showPwd ? 'text' : 'password'}
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   autoComplete="current-password"
-            required
+                  disabled={loading}
-            className="w-full rounded-lg border border-hairline-strong bg-ground px-3.5 py-2 text-[14.5px] outline-none transition-colors focus:border-accent"
+                  placeholder="••••••••"
+                  className={`${fieldCls} pr-11`}
                 />
-        </label>
+                <button
-
+                  type="button"
-        {error && (
+                  onClick={() => setShowPwd((v) => !v)}
-          <p className="mb-4 text-[13px] text-red-600 dark:text-red-400">
+                  tabIndex={-1}
-            {error}
+                  aria-label={showPwd ? '隐藏密码' : '显示密码'}
-          </p>
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-white/35 transition-colors hover:text-white/70"
+                >
+                  {showPwd ? (
+                    <Eye className="size-[18px]" />
+                  ) : (
+                    <EyeOff className="size-[18px]" />
                   )}
+                </button>
+              </div>
+            </div>
 
             <button
               type="submit"
               disabled={loading}
-          className="w-full rounded-lg bg-accent py-2.5 text-[14.5px] font-medium text-ground transition-opacity hover:opacity-90 disabled:opacity-60"
+              className="mt-2 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#22d3ee] to-[#3b82f6] text-[14.5px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60"
             >
-          {loading ? '登录中…' : '登录'}
+              {loading ? (
+                <>
+                  <Loader2 className="size-[18px] animate-spin" /> 登录中…
+                </>
+              ) : (
+                '登录'
+              )}
             </button>
           </form>
         </div>
+      </div>
+    </div>
   )
 }