kangwan/20260512-skg-tk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto-save 2026-05-15 19:02 (~5)

Browse Source
This commit is contained in:
kang
2026-05-15 19:02:43 +08:00
parent dd27cdd337
commit 334b89d697
5 changed files with 68 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/app/globals.css
View File

@@ -246,7 +246,7 @@
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.68);
}
.login-page--oasis .login-creative-stage {
min-height: 310px;
min-height: 400px;
margin-top: auto;
}
.login-page--oasis .login-creative-caption {
@@ -265,21 +265,25 @@
}
.login-page--oasis .login-dynamic-dock {
left: 0;
bottom: 138px;
bottom: 104px;
width: min(430px, 54%);
border-color: rgba(140, 180, 120, 0.12);
background: rgba(10, 18, 10, 0.55);
padding: 18px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(16px);
}
.login-page--oasis .login-dynamic-dock__label {
margin-bottom: 12px;
color: rgba(224, 210, 128, 0.78);
}
.login-page--oasis .login-dynamic-dock .login-character-stage {
min-height: 240px;
border-color: rgba(255, 255, 255, 0.1);
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
rgba(255, 255, 255, 0.06);
rgba(255, 255, 255, 0.045);
background-size: 22px 22px, 22px 22px, auto;
}
.login-page--oasis .login-dynamic-dock .login-character-stage::after {
@@ -288,6 +292,9 @@
.login-page--oasis .login-dynamic-dock .login-stage-grid {
border-color: rgba(255, 255, 255, 0.1);
}
.login-page--oasis .login-dynamic-dock .login-characters-container {
transform: translateX(-50%) scale(0.54);
}
.login-page--oasis .login-studio-chip {
border-color: rgba(140, 180, 120, 0.14);
background: rgba(10, 18, 10, 0.55);
@@ -297,8 +304,8 @@
}
.login-page--oasis .login-studio-chip--visual {
right: auto;
left: 310px;
top: 172px;
left: min(470px, 58%);
top: 176px;
}
.login-page--oasis .login-premium-metrics {
border-color: rgba(140, 180, 120, 0.12);
@@ -320,7 +327,7 @@
border-radius: 16px;
background: rgba(10, 18, 10, 0.55);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
padding: 36px 28px;
padding: 28px 24px;
backdrop-filter: blur(16px);
transition: border-color 0.4s, background 0.4s;
}
@@ -1076,11 +1083,11 @@
linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.2) 48%, rgba(0, 0, 0, 0.82));
}
.login-page--oasis .login-oasis-hero {
min-height: 650px;
min-height: 740px;
padding: 24px 20px;
}
.login-page--oasis .login-auth-panel {
padding: 28px 20px;
padding: 24px 18px;
}
.login-page--oasis .login-wordmark__logo {
font-size: 24px;
@@ -1108,7 +1115,7 @@
min-height: 340px;
}
.login-page--oasis .login-creative-stage {
min-height: 360px;
min-height: 450px;
}
.login-creative-orbit {
right: -20%;
@@ -1120,8 +1127,8 @@
width: 48%;
}
.login-page--oasis .login-creative-caption {
bottom: 42px;
width: 48%;
bottom: 38px;
width: 58%;
}
.login-creative-caption b {
font-size: 22px;
@@ -1133,8 +1140,9 @@
padding: 10px;
}
.login-page--oasis .login-dynamic-dock {
bottom: 142px;
width: 210px;
bottom: 112px;
width: min(100%, 330px);
padding: 14px;
}
.login-dynamic-dock .login-character-stage {
min-height: 94px;
@@ -1142,6 +1150,12 @@
.login-dynamic-dock .login-characters-container {
transform: translateX(-50%) scale(0.22);
}
.login-page--oasis .login-dynamic-dock .login-character-stage {
min-height: 190px;
}
.login-page--oasis .login-dynamic-dock .login-characters-container {
transform: translateX(-50%) scale(0.42);
}
.login-studio-chip {
font-size: 12px;
}
@@ -1152,7 +1166,7 @@
.login-page--oasis .login-studio-chip--visual {
left: auto;
right: 0;
top: 112px;
top: 118px;
}
.login-studio-chip--review {
display: none;

22
web/app/login/page.tsx
View File

@@ -90,7 +90,7 @@ export default function LoginPage() {
<OasisCanvas />
<div className="login-oasis-shade" />
<div className="relative z-10 mx-auto flex min-h-[calc(100vh-3rem)] w-full max-w-7xl items-center">
<div className="grid w-full gap-5 lg:grid-cols-[minmax(0,1.28fr)_minmax(320px,380px)] lg:items-center">
<div className="grid w-full gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(300px,340px)] lg:items-center">
<section className="login-hero login-oasis-hero order-2 relative min-h-[540px] overflow-hidden p-1 text-white sm:p-2 lg:order-1 lg:min-h-[620px]">
<div className="relative z-10 flex h-full flex-col">
<div className="flex flex-wrap items-center justify-between gap-4">
@@ -140,20 +140,20 @@ export default function LoginPage() {
</div>
</section>
<section className="login-auth-panel order-1 flex min-h-[390px] items-center rounded-[8px] p-5 sm:p-8 lg:order-2 lg:min-h-[460px]">
<section className="login-auth-panel order-1 flex items-center rounded-[8px] p-5 sm:p-6 lg:order-2 lg:p-6">
<form className="w-full" onSubmit={onSubmit}>
<div className="mb-6">
<div className="login-auth-icon mb-4 inline-flex h-10 w-10 items-center justify-center rounded-[8px] text-white">
<div className="mb-5">
<div className="login-auth-icon mb-3 inline-flex h-9 w-9 items-center justify-center rounded-[8px] text-white">
<LockKeyhole className="h-5 w-5" />
</div>
<h2 className="text-2xl font-semibold text-white">身份验证</h2>
<h2 className="text-xl font-semibold text-white">身份验证</h2>
<p className="mt-2 text-sm leading-6 text-white/55">验证后进入内容生产环境</p>
</div>
<div className="space-y-4">
<div className="space-y-3">
<label className="block">
<span className="mb-2 block text-sm font-medium text-white/70">访问账号</span>
<span className="flex h-12 items-center gap-3 rounded-[8px] border border-white/10 bg-black/25 px-3 text-white transition focus-within:border-[#d6b36a] focus-within:bg-black/35 focus-within:ring-2 focus-within:ring-[#d6b36a]/25">
<span className="flex h-11 items-center gap-3 rounded-[8px] border border-white/10 bg-black/25 px-3 text-white transition focus-within:border-[#d6b36a] focus-within:bg-black/35 focus-within:ring-2 focus-within:ring-[#d6b36a]/25">
<UserRound className="h-4 w-4 text-white/45" />
<input
className="h-full min-w-0 flex-1 bg-transparent text-base text-white outline-none placeholder:text-white/30"
@@ -173,7 +173,7 @@ export default function LoginPage() {
<label className="block">
<span className="mb-2 block text-sm font-medium text-white/70">访问密钥</span>
<span className="flex h-12 items-center gap-3 rounded-[8px] border border-white/10 bg-black/25 px-3 text-white transition focus-within:border-[#d6b36a] focus-within:bg-black/35 focus-within:ring-2 focus-within:ring-[#d6b36a]/25">
<span className="flex h-11 items-center gap-3 rounded-[8px] border border-white/10 bg-black/25 px-3 text-white transition focus-within:border-[#d6b36a] focus-within:bg-black/35 focus-within:ring-2 focus-within:ring-[#d6b36a]/25">
<LockKeyhole className="h-4 w-4 text-white/45" />
<input
className="h-full min-w-0 flex-1 bg-transparent text-base text-white outline-none placeholder:text-white/30"
@@ -203,7 +203,7 @@ export default function LoginPage() {
</label>
</div>
<div className="mt-4 flex items-center justify-between gap-4">
<div className="mt-3 flex items-center justify-between gap-4">
<label className="flex cursor-pointer items-center gap-2 text-sm text-white/60">
<input
className="h-4 w-4 rounded border-white/20 bg-black/30 accent-[#c89b3c]"
@@ -217,7 +217,7 @@ export default function LoginPage() {
<span className="text-xs text-white/35">marketing.skg.com</span>
</div>
<div className="mt-5 min-h-11" aria-live="polite">
<div className="mt-4 min-h-9" aria-live="polite">
{error ? (
<div className="flex items-start gap-2 rounded-[8px] border border-red-400/30 bg-red-500/10 px-3 py-2 text-sm text-red-100">
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
@@ -232,7 +232,7 @@ export default function LoginPage() {
</div>
<button
className="mt-2 flex h-12 w-full items-center justify-center gap-2 rounded-[8px] bg-white px-4 text-base font-semibold text-black shadow-xl shadow-black/25 transition hover:bg-[#f5efe3] focus:outline-none focus:ring-2 focus:ring-[#d6b36a]/60 disabled:cursor-wait disabled:opacity-70"
className="mt-1 flex h-11 w-full items-center justify-center gap-2 rounded-[8px] bg-white px-4 text-base font-semibold text-black shadow-xl shadow-black/25 transition hover:bg-[#f5efe3] focus:outline-none focus:ring-2 focus:ring-[#d6b36a]/60 disabled:cursor-wait disabled:opacity-70"
type="submit"
disabled={disabled}
>

10
web/components/login/oasis-canvas.tsx
View File

@@ -22,11 +22,13 @@ export function OasisCanvas() {
const onPointerMove = (event: PointerEvent) => sendPointer("pointermove", event)
const onPointerLeave = () => sendPointer("pointerleave")
window.addEventListener("pointermove", onPointerMove)
window.addEventListener("pointerleave", onPointerLeave)
const listenerOptions = { capture: true, passive: true }
window.addEventListener("pointermove", onPointerMove, listenerOptions)
window.addEventListener("pointerleave", onPointerLeave, listenerOptions)
return () => {
window.removeEventListener("pointermove", onPointerMove)
window.removeEventListener("pointerleave", onPointerLeave)
window.removeEventListener("pointermove", onPointerMove, listenerOptions)
window.removeEventListener("pointerleave", onPointerLeave, listenerOptions)
}
}, [])