gridsum-vue3-pc 1.0.0

package/template/base/src/views/Login.vue

@@ -0,0 +1,1252 @@
+<template>
+  <div class="login-page">
+    <div class="login-card">
+      <div class="left-panel">
+        <div class="logo">
+          <img src="/logo.svg" width="28" height="28" alt="logo" />
+          <span>{{ title }}</span>
+        </div>
+        <div class="characters-wrapper">
+          <div class="characters-scene" id="characters-scene">
+            <div class="character char-purple" id="char-purple" ref="purpleRef">
+              <div class="eyes" id="purple-eyes" style="left:45px;top:40px;gap:28px">
+                <div class="eyeball" id="purple-eye-l" style="width:18px;height:18px">
+                  <div class="pupil" id="purple-pupil-l" style="width:7px;height:7px"></div>
+                </div>
+                <div class="eyeball" id="purple-eye-r" style="width:18px;height:18px">
+                  <div class="pupil" id="purple-pupil-r" style="width:7px;height:7px"></div>
+                </div>
+              </div>
+            </div>
+            <div class="character char-black" id="char-black" ref="blackRef">
+              <div class="eyes" id="black-eyes" style="left:26px;top:32px;gap:20px">
+                <div class="eyeball" id="black-eye-l" style="width:16px;height:16px">
+                  <div class="pupil" id="black-pupil-l" style="width:6px;height:6px"></div>
+                </div>
+                <div class="eyeball" id="black-eye-r" style="width:16px;height:16px">
+                  <div class="pupil" id="black-pupil-r" style="width:6px;height:6px"></div>
+                </div>
+              </div>
+            </div>
+            <div class="character char-orange" id="char-orange" ref="orangeRef">
+              <div class="eyes" id="orange-eyes" style="left:82px;top:90px;gap:28px">
+                <div class="bare-pupil" id="orange-pupil-l"></div>
+                <div class="bare-pupil" id="orange-pupil-r"></div>
+              </div>
+              <div class="orange-mouth" id="orange-mouth" style="left:90px;top:120px"></div>
+            </div>
+            <div class="character char-yellow" id="char-yellow" ref="yellowRef">
+              <div class="eyes" id="yellow-eyes" style="left:52px;top:40px;gap:20px">
+                <div class="bare-pupil" id="yellow-pupil-l"></div>
+                <div class="bare-pupil" id="yellow-pupil-r"></div>
+              </div>
+              <div class="yellow-mouth" id="yellow-mouth" style="left:40px;top:88px"></div>
+            </div>
+          </div>
+        </div>
+        <div class="footer-links">
+          <a href="#">Privacy Policy</a>
+          <a href="#">Terms of Service</a>
+          <a href="#">Contact</a>
+        </div>
+      </div>
+      <div class="right-panel">
+        <div class="toolbar">
+          <LanguageSwitch />
+          <el-tooltip :content="isDark ? $t('layout.lightMode') : $t('layout.darkMode')" placement="bottom">
+            <el-button text class="toolbar-btn" @click="toggleDark">
+              <el-icon><Moon v-if="!isDark" /><Sunny v-else /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
+        <div class="form-container" :class="{ shake: shaking }">
+          <div class="sparkle-icon">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 2L13.5 9H10.5L12 2Z" />
+              <path d="M12 22L10.5 15H13.5L12 22Z" />
+              <path d="M2 12L9 10.5V13.5L2 12Z" />
+              <path d="M22 12L15 13.5V10.5L22 12Z" />
+            </svg>
+          </div>
+          <div class="form-header">
+            <h1>{{ title }}</h1>
+            <p>{{ $t('user.welcome') }}</p>
+          </div>
+          <el-form
+            ref="formRef"
+            :model="form"
+            :rules="rules"
+            @submit.prevent="handleLogin"
+            class="login-form"
+          >
+            <el-form-item prop="username">
+              <el-input
+                v-model="form.username"
+                :placeholder="$t('user.usernamePlaceholder')"
+                size="large"
+                :prefix-icon="User"
+                :disabled="cooldown > 0"
+                autocomplete="username"
+                clearable
+                id="email-input"
+                @focus="onEmailFocus"
+                @blur="onEmailBlur"
+                @input="updateCharacters"
+              />
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                v-model="form.password"
+                :type="showPassword ? 'text' : 'password'"
+                :placeholder="$t('user.passwordPlaceholder')"
+                size="large"
+                :prefix-icon="Lock"
+                :disabled="cooldown > 0"
+                autocomplete="current-password"
+                id="password-input"
+                @focus="onPasswordFocus"
+                @blur="onPasswordBlur"
+                @input="updateCharacters"
+              >
+                <template #suffix>
+                  <span class="toggle-password" @click="togglePassword" id="toggle-password">
+                    <svg
+                      v-if="!showPassword"
+                      width="20" height="20" viewBox="0 0 24 24"
+                      fill="none" stroke="currentColor" stroke-width="2"
+                      stroke-linecap="round" stroke-linejoin="round"
+                    >
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx="12" cy="12" r="3" />
+                    </svg>
+                    <svg
+                      v-else
+                      width="20" height="20" viewBox="0 0 24 24"
+                      fill="none" stroke="currentColor" stroke-width="2"
+                      stroke-linecap="round" stroke-linejoin="round"
+                    >
+                      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                      <line x1="1" y1="1" x2="23" y2="23" />
+                    </svg>
+                  </span>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="captcha" v-if="showCaptcha">
+              <div class="captcha-row">
+                <el-input
+                  v-model="form.captcha"
+                  :placeholder="$t('user.captchaPlaceholder')"
+                  size="large"
+                  style="flex:1"
+                />
+                <div class="captcha-box" @click="generateCaptcha" v-html="captchaSvg" />
+              </div>
+            </el-form-item>
+            <el-form-item>
+              <el-checkbox v-model="rememberMe">{{ $t('user.rememberMe') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                size="large"
+                :loading="loading"
+                :disabled="cooldown > 0"
+                native-type="submit"
+                class="login-btn"
+              >
+                {{ cooldown > 0 ? `${$t('user.retryAfter')} ${cooldown}s` : loading ? $t('user.loggingIn') : $t('user.loginBtn') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <div class="form-actions">
+            <span class="demo-hint">{{ $t('user.demoHint') }}</span>
+            <el-button text size="small" @click="resetForm" class="reset-btn">
+              {{ $t('user.resetForm') }}
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ElMessage } from 'element-plus';
+import { User, Lock, Moon, Sunny } from '@element-plus/icons-vue';
+import { useUserStore } from '@/store/modules/user';
+import { login } from '@/services/user';
+import LanguageSwitch from '@/components/LanguageSwitch.vue';
+import type { FormInstance, FormRules } from 'element-plus';
+
+const router = useRouter();
+const userStore = useUserStore();
+const { t } = useI18n();
+const title = import.meta.env.VITE_APP_TITLE || 'Vue3 PC Template';
+const REMEMBER_KEY = 'remembered_user';
+
+const formRef = ref<FormInstance>();
+
+const form = reactive({
+  username: '',
+  password: '',
+  captcha: '',
+});
+
+const rules: FormRules = {
+  username: [
+    { required: true, message: () => t('user.requiredUsername'), trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: () => t('user.requiredPassword'), trigger: 'blur' },
+    { min: 3, message: () => t('user.passwordTooShort'), trigger: 'blur' },
+  ],
+  captcha: [
+    { required: true, message: () => t('user.requiredCaptcha'), trigger: 'blur' },
+  ],
+};
+
+const loading = ref(false);
+const rememberMe = ref(false);
+const showCaptcha = ref(false);
+const captchaText = ref('');
+const captchaSvg = ref('');
+const shaking = ref(false);
+const cooldown = ref(0);
+const showPassword = ref(false);
+const isDark = ref(false);
+let failCount = 0;
+
+const toggleDark = () => {
+  isDark.value = !isDark.value;
+  document.documentElement.classList.toggle('dark', isDark.value);
+  localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
+};
+
+// Character animation state
+const purpleRef = ref<HTMLElement>();
+const blackRef = ref<HTMLElement>();
+const orangeRef = ref<HTMLElement>();
+const yellowRef = ref<HTMLElement>();
+
+let mouseX = 0;
+let mouseY = 0;
+let isTyping = false;
+let isLookingAtEachOther = false;
+let isPurpleBlinking = false;
+let isBlackBlinking = false;
+let isPurplePeeking = false;
+let isPasswordFocused = false;
+let isLoginError = false;
+let typingTimer: ReturnType<typeof setTimeout> | null = null;
+let errorRecoverTimer: ReturnType<typeof setTimeout> | null = null;
+let peekTimer: ReturnType<typeof setTimeout> | null = null;
+
+const generateCaptcha = () => {
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+  const text = Array.from({ length: 4 }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
+  captchaText.value = text;
+
+  const colors = ['#667eea', '#764ba2', '#e74c3c', '#2ecc71', '#f39c12'];
+  const noise = Array.from({ length: 3 }, () => {
+    const p = () => Math.random();
+    return `<line x1="${p() * 120}" y1="${p() * 40}" x2="${p() * 120}" y2="${p() * 40}" stroke="${colors[Math.floor(Math.random() * colors.length)]}" stroke-width="1" opacity="0.4"/>`;
+  }).join('');
+  const dots = Array.from({ length: 20 }, () =>
+    `<circle cx="${Math.random() * 120}" cy="${Math.random() * 40}" r="1.5" fill="${colors[Math.floor(Math.random() * colors.length)]}" opacity="0.5"/>`
+  ).join('');
+  const letters = text.split('').map((c, i) => `<tspan fill="${colors[i % colors.length]}">${c}</tspan>`).join('');
+
+  const isDarkMode = document.documentElement.classList.contains('dark');
+  const bgFill = isDarkMode ? '#1a1a2e' : '#f0f2f5';
+  const textFill = isDarkMode ? '#e8e8f0' : '#333';
+  captchaSvg.value = `<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40">
+    <rect width="120" height="40" fill="${bgFill}" rx="4"/>${noise}${dots}
+    <text x="60" y="28" text-anchor="middle" font-size="20" font-weight="bold" font-family="Arial" fill="${textFill}" letter-spacing="4">${letters}</text>
+  </svg>`;
+};
+
+const startCooldown = () => {
+  cooldown.value = 15;
+  const timer = setInterval(() => {
+    cooldown.value--;
+    if (cooldown.value <= 0) {
+      clearInterval(timer);
+    }
+  }, 1000);
+};
+
+const triggerShake = () => {
+  shaking.value = true;
+  setTimeout(() => { shaking.value = false; }, 500);
+};
+
+const handleLogin = async () => {
+  const valid = await formRef.value?.validate().catch(() => false);
+  if (!valid) return;
+
+  if (showCaptcha.value && form.captcha.toUpperCase() !== captchaText.value) {
+    ElMessage.error(t('user.captchaError'));
+    generateCaptcha();
+    form.captcha = '';
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const res = await login(form.username, form.password);
+    userStore.setUserInfo(res.data);
+    if (rememberMe.value) {
+      localStorage.setItem(REMEMBER_KEY, JSON.stringify({ username: form.username }));
+    } else {
+      localStorage.removeItem(REMEMBER_KEY);
+    }
+    ElMessage.success(t('user.loginSuccess'));
+    router.push('/');
+  } catch (err: any) {
+    triggerLoginError();
+    triggerShake();
+    failCount++;
+    if (failCount >= 3) {
+      showCaptcha.value = true;
+      generateCaptcha();
+    }
+    if (failCount >= 5) {
+      startCooldown();
+    }
+    ElMessage.error(err?.response?.data?.message || err?.message || t('user.loginFail'));
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetForm = () => {
+  formRef.value?.resetFields();
+  form.captcha = '';
+  failCount = 0;
+  showCaptcha.value = false;
+  cooldown.value = 0;
+};
+
+// ============= CHARACTER ANIMATION =============
+
+const $ = (id: string) => document.getElementById(id) as HTMLElement;
+
+const calcPosition = (el: HTMLElement) => {
+  const rect = el.getBoundingClientRect();
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top + rect.height / 3;
+  const dx = mouseX - cx;
+  const dy = mouseY - cy;
+  const faceX = Math.max(-15, Math.min(15, dx / 20));
+  const faceY = Math.max(-10, Math.min(10, dy / 30));
+  const bodySkew = Math.max(-6, Math.min(6, -dx / 120));
+  return { faceX, faceY, bodySkew };
+};
+
+const calcPupilOffset = (el: HTMLElement, maxDist: number) => {
+  const rect = el.getBoundingClientRect();
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top + rect.height / 2;
+  const dx = mouseX - cx;
+  const dy = mouseY - cy;
+  const dist = Math.min(Math.sqrt(dx * dx + dy * dy), maxDist);
+  const angle = Math.atan2(dy, dx);
+  return { x: Math.cos(angle) * dist, y: Math.sin(angle) * dist };
+};
+
+const updateCharacters = () => {
+  const purple = $('char-purple');
+  const black = $('char-black');
+  const orange = $('char-orange');
+  const yellow = $('char-yellow');
+
+  const purplePos = calcPosition(purple);
+  const blackPos = calcPosition(black);
+  const orangePos = calcPosition(orange);
+  const yellowPos = calcPosition(yellow);
+
+  const pwdLen = form.password.length;
+  const isShowingPwd = pwdLen > 0 && showPassword.value;
+  const isLookingAway = isPasswordFocused && !showPassword.value;
+
+  // ---- Purple body ----
+  if (isShowingPwd) {
+    purple.style.transform = 'skewX(0deg)';
+    purple.style.height = '370px';
+  } else if (isLookingAway) {
+    purple.style.transform = 'skewX(-14deg) translateX(-20px)';
+    purple.style.height = '410px';
+  } else if (isTyping) {
+    purple.style.transform = `skewX(${(purplePos.bodySkew || 0) - 12}deg) translateX(40px)`;
+    purple.style.height = '410px';
+  } else {
+    purple.style.transform = `skewX(${purplePos.bodySkew}deg)`;
+    purple.style.height = '370px';
+  }
+
+  // Purple eyes
+  const purpleEyes = $('purple-eyes');
+  const purpleEyeL = $('purple-eye-l');
+  const purpleEyeR = $('purple-eye-r');
+  const purplePupilL = $('purple-pupil-l');
+  const purplePupilR = $('purple-pupil-r');
+
+  purpleEyeL.style.height = isPurpleBlinking ? '2px' : '18px';
+  purpleEyeR.style.height = isPurpleBlinking ? '2px' : '18px';
+
+  if (isLoginError) {
+    purpleEyes.style.left = '30px';
+    purpleEyes.style.top = '55px';
+    purplePupilL.style.transform = 'translate(-3px, 4px)';
+    purplePupilR.style.transform = 'translate(-3px, 4px)';
+  } else if (isLookingAway) {
+    purpleEyes.style.left = '20px';
+    purpleEyes.style.top = '25px';
+    purplePupilL.style.transform = 'translate(-5px, -5px)';
+    purplePupilR.style.transform = 'translate(-5px, -5px)';
+  } else if (isShowingPwd) {
+    purpleEyes.style.left = '20px';
+    purpleEyes.style.top = '35px';
+    const px = isPurplePeeking ? 4 : -4;
+    const py = isPurplePeeking ? 5 : -4;
+    purplePupilL.style.transform = `translate(${px}px, ${py}px)`;
+    purplePupilR.style.transform = `translate(${px}px, ${py}px)`;
+  } else if (isLookingAtEachOther) {
+    purpleEyes.style.left = '55px';
+    purpleEyes.style.top = '65px';
+    purplePupilL.style.transform = 'translate(3px, 4px)';
+    purplePupilR.style.transform = 'translate(3px, 4px)';
+  } else {
+    purpleEyes.style.left = 45 + purplePos.faceX + 'px';
+    purpleEyes.style.top = 40 + purplePos.faceY + 'px';
+    const po = calcPupilOffset(purpleEyeL, 5);
+    purplePupilL.style.transform = `translate(${po.x}px, ${po.y}px)`;
+    purplePupilR.style.transform = `translate(${po.x}px, ${po.y}px)`;
+  }
+
+  // ---- Black body ----
+  if (isShowingPwd) {
+    black.style.transform = 'skewX(0deg)';
+  } else if (isLookingAway) {
+    black.style.transform = 'skewX(12deg) translateX(-10px)';
+  } else if (isLookingAtEachOther) {
+    black.style.transform = `skewX(${(blackPos.bodySkew || 0) * 1.5 + 10}deg) translateX(20px)`;
+  } else if (isTyping) {
+    black.style.transform = `skewX(${(blackPos.bodySkew || 0) * 1.5}deg)`;
+  } else {
+    black.style.transform = `skewX(${blackPos.bodySkew}deg)`;
+  }
+
+  // Black eyes
+  const blackEyes = $('black-eyes');
+  const blackEyeL = $('black-eye-l');
+  const blackEyeR = $('black-eye-r');
+  const blackPupilL = $('black-pupil-l');
+  const blackPupilR = $('black-pupil-r');
+
+  blackEyeL.style.height = isBlackBlinking ? '2px' : '16px';
+  blackEyeR.style.height = isBlackBlinking ? '2px' : '16px';
+
+  if (isLoginError) {
+    blackEyes.style.left = '15px';
+    blackEyes.style.top = '40px';
+    blackPupilL.style.transform = 'translate(-3px, 4px)';
+    blackPupilR.style.transform = 'translate(-3px, 4px)';
+  } else if (isLookingAway) {
+    blackEyes.style.left = '10px';
+    blackEyes.style.top = '20px';
+    blackPupilL.style.transform = 'translate(-4px, -5px)';
+    blackPupilR.style.transform = 'translate(-4px, -5px)';
+  } else if (isShowingPwd) {
+    blackEyes.style.left = '10px';
+    blackEyes.style.top = '28px';
+    blackPupilL.style.transform = 'translate(-4px, -4px)';
+    blackPupilR.style.transform = 'translate(-4px, -4px)';
+  } else if (isLookingAtEachOther) {
+    blackEyes.style.left = '32px';
+    blackEyes.style.top = '12px';
+    blackPupilL.style.transform = 'translate(0px, -4px)';
+    blackPupilR.style.transform = 'translate(0px, -4px)';
+  } else {
+    blackEyes.style.left = 26 + blackPos.faceX + 'px';
+    blackEyes.style.top = 32 + blackPos.faceY + 'px';
+    const bo = calcPupilOffset(blackEyeL, 4);
+    blackPupilL.style.transform = `translate(${bo.x}px, ${bo.y}px)`;
+    blackPupilR.style.transform = `translate(${bo.x}px, ${bo.y}px)`;
+  }
+
+  // ---- Orange body ----
+  if (isShowingPwd) {
+    orange.style.transform = 'skewX(0deg)';
+  } else {
+    orange.style.transform = `skewX(${orangePos.bodySkew}deg)`;
+  }
+
+  const orangeEyes = $('orange-eyes');
+  const orangePupilL = $('orange-pupil-l');
+  const orangePupilR = $('orange-pupil-r');
+  const orangeMouth = $('orange-mouth');
+
+  if (isLoginError) {
+    orangeMouth.style.left = 80 + orangePos.faceX + 'px';
+    orangeMouth.style.top = '130px';
+    orangeEyes.style.left = '60px';
+    orangeEyes.style.top = '95px';
+    orangePupilL.style.transform = 'translate(-3px, 4px)';
+    orangePupilR.style.transform = 'translate(-3px, 4px)';
+  } else if (isLookingAway) {
+    orangeEyes.style.left = '50px';
+    orangeEyes.style.top = '75px';
+    orangePupilL.style.transform = 'translate(-5px, -5px)';
+    orangePupilR.style.transform = 'translate(-5px, -5px)';
+  } else if (isShowingPwd) {
+    orangeEyes.style.left = '50px';
+    orangeEyes.style.top = '85px';
+    orangePupilL.style.transform = 'translate(-5px, -4px)';
+    orangePupilR.style.transform = 'translate(-5px, -4px)';
+  } else {
+    orangeEyes.style.left = 82 + orangePos.faceX + 'px';
+    orangeEyes.style.top = 90 + orangePos.faceY + 'px';
+    const oo = calcPupilOffset(orangePupilL, 5);
+    orangePupilL.style.transform = `translate(${oo.x}px, ${oo.y}px)`;
+    orangePupilR.style.transform = `translate(${oo.x}px, ${oo.y}px)`;
+  }
+
+  // ---- Yellow body ----
+  if (isShowingPwd) {
+    yellow.style.transform = 'skewX(0deg)';
+  } else {
+    yellow.style.transform = `skewX(${yellowPos.bodySkew}deg)`;
+  }
+
+  const yellowEyes = $('yellow-eyes');
+  const yellowPupilL = $('yellow-pupil-l');
+  const yellowPupilR = $('yellow-pupil-r');
+  const yellowMouth = $('yellow-mouth');
+
+  if (isLoginError) {
+    yellowEyes.style.left = '35px';
+    yellowEyes.style.top = '45px';
+    yellowPupilL.style.transform = 'translate(-3px, 4px)';
+    yellowPupilR.style.transform = 'translate(-3px, 4px)';
+    yellowMouth.style.left = '30px';
+    yellowMouth.style.top = '92px';
+    yellowMouth.style.transform = 'rotate(-8deg)';
+  } else if (isLookingAway) {
+    yellowEyes.style.left = '20px';
+    yellowEyes.style.top = '30px';
+    yellowPupilL.style.transform = 'translate(-5px, -5px)';
+    yellowPupilR.style.transform = 'translate(-5px, -5px)';
+    yellowMouth.style.left = '15px';
+    yellowMouth.style.top = '78px';
+    yellowMouth.style.transform = 'rotate(0deg)';
+  } else if (isShowingPwd) {
+    yellowEyes.style.left = '20px';
+    yellowEyes.style.top = '35px';
+    yellowPupilL.style.transform = 'translate(-5px, -4px)';
+    yellowPupilR.style.transform = 'translate(-5px, -4px)';
+    yellowMouth.style.left = '10px';
+    yellowMouth.style.top = '88px';
+    yellowMouth.style.transform = 'rotate(0deg)';
+  } else {
+    yellowEyes.style.left = 52 + yellowPos.faceX + 'px';
+    yellowEyes.style.top = 40 + yellowPos.faceY + 'px';
+    const yo = calcPupilOffset(yellowPupilL, 5);
+    yellowPupilL.style.transform = `translate(${yo.x}px, ${yo.y}px)`;
+    yellowPupilR.style.transform = `translate(${yo.x}px, ${yo.y}px)`;
+    yellowMouth.style.left = 40 + yellowPos.faceX + 'px';
+    yellowMouth.style.top = 88 + yellowPos.faceY + 'px';
+    yellowMouth.style.transform = 'rotate(0deg)';
+  }
+};
+
+// ---- Event handlers ----
+const onEmailFocus = () => {
+  isTyping = true;
+  isLookingAtEachOther = true;
+  if (typingTimer) clearTimeout(typingTimer);
+  typingTimer = setTimeout(() => {
+    isLookingAtEachOther = false;
+    updateCharacters();
+  }, 800);
+  updateCharacters();
+};
+
+const onEmailBlur = () => {
+  isTyping = false;
+  isLookingAtEachOther = false;
+  updateCharacters();
+};
+
+const onPasswordFocus = () => {
+  isPasswordFocused = true;
+  updateCharacters();
+};
+
+const onPasswordBlur = () => {
+  isPasswordFocused = false;
+  updateCharacters();
+};
+
+const togglePassword = () => {
+  showPassword.value = !showPassword.value;
+  updateCharacters();
+  if (showPassword.value) schedulePeek();
+};
+
+// ---- Blinking ----
+const scheduleBlinkPurple = () => {
+  const timer = setTimeout(() => {
+    isPurpleBlinking = true;
+    updateCharacters();
+    setTimeout(() => {
+      isPurpleBlinking = false;
+      updateCharacters();
+      scheduleBlinkPurple();
+    }, 150);
+  }, Math.random() * 4000 + 3000);
+  blinkTimers.add(timer);
+};
+
+const scheduleBlinkBlack = () => {
+  const timer = setTimeout(() => {
+    isBlackBlinking = true;
+    updateCharacters();
+    setTimeout(() => {
+      isBlackBlinking = false;
+      updateCharacters();
+      scheduleBlinkBlack();
+    }, 150);
+  }, Math.random() * 4000 + 3000);
+  blinkTimers.add(timer);
+};
+
+// ---- Peeking ----
+const schedulePeek = () => {
+  if (form.password.length > 0 && showPassword.value) {
+    if (peekTimer) clearTimeout(peekTimer);
+    peekTimer = setTimeout(() => {
+      if (form.password.length > 0 && showPassword.value) {
+        isPurplePeeking = true;
+        updateCharacters();
+        setTimeout(() => {
+          isPurplePeeking = false;
+          updateCharacters();
+          schedulePeek();
+        }, 800);
+      }
+    }, Math.random() * 3000 + 2000);
+  }
+};
+
+// ---- Error ----
+const shakeIds = [
+  'purple-eyes', 'black-eyes', 'orange-eyes', 'yellow-eyes',
+  'yellow-mouth', 'orange-mouth',
+];
+
+const triggerLoginError = () => {
+  if (errorRecoverTimer) {
+    clearTimeout(errorRecoverTimer);
+    errorRecoverTimer = null;
+  }
+
+  const shakeEls = shakeIds.map(id => $(id));
+  shakeEls.forEach(el => el.classList.remove('shake-head'));
+  void document.body.offsetHeight;
+
+  isLoginError = true;
+  isPasswordFocused = false;
+  updateCharacters();
+
+  $('orange-mouth').classList.add('visible');
+
+  setTimeout(() => {
+    shakeEls.forEach(el => el.classList.add('shake-head'));
+  }, 350);
+
+  errorRecoverTimer = setTimeout(() => {
+    isLoginError = false;
+    errorRecoverTimer = null;
+    $('orange-mouth').classList.remove('visible');
+    shakeEls.forEach(el => el.classList.remove('shake-head'));
+    updateCharacters();
+  }, 2500);
+};
+
+// ---- Mouse tracking ----
+const handleMouseMove = (e: MouseEvent) => {
+  mouseX = e.clientX;
+  mouseY = e.clientY;
+  if (!isTyping && !isLoginError) updateCharacters();
+};
+
+const blinkTimers = new Set<ReturnType<typeof setTimeout>>();
+
+onMounted(() => {
+  document.addEventListener('mousemove', handleMouseMove);
+  scheduleBlinkPurple();
+  scheduleBlinkBlack();
+  updateCharacters();
+
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme === 'dark') {
+    isDark.value = true;
+    document.documentElement.classList.add('dark');
+  }
+
+  const remembered = localStorage.getItem(REMEMBER_KEY);
+  if (remembered) {
+    try {
+      const data = JSON.parse(remembered);
+      form.username = data.username;
+      rememberMe.value = true;
+    } catch {
+      // ignore
+    }
+  }
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove);
+  blinkTimers.forEach(t => clearTimeout(t));
+  blinkTimers.clear();
+  if (typingTimer) clearTimeout(typingTimer);
+  if (errorRecoverTimer) clearTimeout(errorRecoverTimer);
+  if (peekTimer) clearTimeout(peekTimer);
+});
+</script>
+
+<style scoped>
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+  position: relative;
+  overflow: hidden;
+  padding: 24px;
+}
+
+.login-page::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(ellipse at 20% 50%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
+              radial-gradient(ellipse at 80% 50%, rgba(118, 75, 162, 0.15) 0%, transparent 50%);
+  animation: bgShift 15s ease-in-out infinite alternate;
+}
+
+@keyframes bgShift {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  100% { transform: translate(-2%, 2%) rotate(3deg); }
+}
+
+.login-card {
+  display: flex;
+  width: 1120px;
+  max-width: 100%;
+  height: 620px;
+  max-height: 90vh;
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  position: relative;
+  z-index: 1;
+}
+
+/* ========= Left Panel ========= */
+.left-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: linear-gradient(135deg, #d4d0dc 0%, #c8c4d0 50%, #bbb7c5 100%);
+  padding: 40px 48px;
+  overflow: hidden;
+  width: 580px;
+  flex-shrink: 0;
+}
+
+.left-panel .logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  z-index: 10;
+  position: relative;
+}
+
+
+
+.sparkle-icon {
+  color: #1a1a2e;
+}
+
+html.dark .sparkle-icon {
+  color: #e8e8f0;
+}
+
+.characters-wrapper {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: 420px;
+}
+
+.characters-scene {
+  position: relative;
+  width: 480px;
+  height: 360px;
+  background: linear-gradient(135deg, #d4d0dc 0%, #c8c4d0 50%, #bbb7c5 100%);
+}
+
+.character {
+  position: absolute;
+  bottom: 0;
+  transition: all 0.7s ease-in-out;
+  transform-origin: bottom center;
+}
+
+.char-purple {
+  left: 88px;
+  width: 170px;
+  height: 370px;
+  background: #6c3ff5;
+  border-radius: 10px 10px 0 0;
+  z-index: 1;
+}
+
+.char-black {
+  left: 248px;
+  width: 115px;
+  height: 290px;
+  background: #2d2d2d;
+  border-radius: 8px 8px 0 0;
+  z-index: 2;
+}
+
+.char-orange {
+  left: 28px;
+  width: 230px;
+  height: 191px;
+  bottom: -1px;
+  background: #ff9b6b;
+  border-radius: 115px 115px 0 0;
+  z-index: 3;
+}
+
+.char-yellow {
+  left: 318px;
+  width: 135px;
+  height: 216px;
+  bottom: -1px;
+  background: #e8d754;
+  border-radius: 68px 68px 0 0;
+  z-index: 4;
+}
+
+.eyes {
+  position: absolute;
+  display: flex;
+  transition: all 0.7s ease-in-out;
+}
+
+.eyeball {
+  border-radius: 50%;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: height 0.15s ease;
+  overflow: hidden;
+}
+
+.pupil {
+  border-radius: 50%;
+  background: #2d2d2d;
+  transition: transform 0.1s ease-out;
+}
+
+.bare-pupil {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #2d2d2d;
+  transition: transform 0.7s ease-in-out;
+}
+
+.yellow-mouth {
+  position: absolute;
+  width: 50px;
+  height: 4px;
+  background: #2d2d2d;
+  border-radius: 2px;
+  transition: all 0.7s ease-in-out;
+}
+
+.orange-mouth {
+  position: absolute;
+  width: 28px;
+  height: 14px;
+  border: 3px solid #2d2d2d;
+  border-top: none;
+  border-radius: 0 0 14px 14px;
+  opacity: 0;
+  transition: all 0.7s ease-in-out;
+}
+
+.orange-mouth.visible {
+  opacity: 1;
+}
+
+@keyframes shakeHead {
+  0%, 100% { translate: 0 0; }
+  10% { translate: -9px 0; }
+  20% { translate: 7px 0; }
+  30% { translate: -6px 0; }
+  40% { translate: 5px 0; }
+  50% { translate: -4px 0; }
+  60% { translate: 3px 0; }
+  70% { translate: -2px 0; }
+  80% { translate: 1px 0; }
+  90% { translate: -0.5px 0; }
+}
+
+.eyes.shake-head,
+.yellow-mouth.shake-head,
+.orange-mouth.shake-head {
+  animation: shakeHead 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+.left-panel::after {
+  content: '';
+  position: absolute;
+  top: 20%;
+  right: 15%;
+  width: 260px;
+  height: 260px;
+  background: rgba(180, 170, 200, 0.25);
+  border-radius: 50%;
+  filter: blur(80px);
+}
+
+.left-panel::before {
+  content: '';
+  position: absolute;
+  bottom: 15%;
+  left: 10%;
+  width: 350px;
+  height: 350px;
+  background: rgba(200, 195, 210, 0.2);
+  border-radius: 50%;
+  filter: blur(100px);
+}
+
+.footer-links {
+  display: flex;
+  gap: 28px;
+  font-size: 13px;
+  color: rgba(80, 70, 90, 0.7);
+  z-index: 10;
+  position: relative;
+}
+
+.footer-links a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.footer-links a:hover {
+  color: #333;
+}
+
+/* ========= Right Panel ========= */
+.right-panel {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  padding: 40px;
+  transition: background 0.3s;
+  position: relative;
+}
+
+.form-container {
+  width: 100%;
+  max-width: 400px;
+}
+
+.sparkle-icon {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.sparkle-icon svg {
+  width: 32px;
+  height: 32px;
+}
+
+.form-header {
+  text-align: center;
+  margin-bottom: 36px;
+}
+
+.form-header h1 {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1a1a2e;
+  letter-spacing: -0.5px;
+  margin: 0 0 6px;
+}
+
+.form-header p {
+  font-size: 14px;
+  color: #909399;
+  margin: 0;
+}
+
+.login-form :deep(.el-form-item) {
+  margin-bottom: 22px;
+}
+
+.login-form :deep(.el-input__wrapper) {
+  padding: 4px 12px;
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px #dcdfe6 inset;
+  transition: box-shadow 0.25s;
+}
+
+.login-form :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.4) inset;
+}
+
+.login-form :deep(.el-input__inner) {
+  height: 38px;
+}
+
+.login-form :deep(.el-input__inner:-webkit-autofill) {
+  box-shadow: 0 0 0 1000px #fff inset !important;
+  -webkit-text-fill-color: #606266 !important;
+  caret-color: #606266 !important;
+}
+
+html.dark .login-form :deep(.el-input__inner:-webkit-autofill) {
+  box-shadow: 0 0 0 1000px #1a1a2e inset !important;
+  -webkit-text-fill-color: #e8e8f0 !important;
+  caret-color: #e8e8f0 !important;
+}
+
+.toggle-password {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  color: #909399;
+  transition: color 0.2s;
+}
+
+.toggle-password:hover {
+  color: #667eea;
+}
+
+.captcha-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  width: 100%;
+}
+
+.captcha-box {
+  width: 120px;
+  height: 40px;
+  cursor: pointer;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  border: 1px solid #e8e8e8;
+  transition: opacity 0.2s;
+}
+
+.captcha-box:hover {
+  opacity: 0.75;
+}
+
+.login-btn {
+  width: 100%;
+  height: 48px;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  transition: all 0.3s;
+  margin-top: 4px;
+}
+
+.login-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
+}
+
+.form-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin-top: 24px;
+}
+
+.demo-hint {
+  font-size: 12px;
+  color: #909399;
+}
+
+.reset-btn {
+  font-size: 12px;
+}
+
+/* ========= Toolbar ========= */
+.toolbar {
+  position: absolute;
+  top: 16px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 20;
+}
+
+.toolbar-btn {
+  padding: 6px 8px;
+  border-radius: 8px;
+  color: #606266;
+  font-size: 16px;
+  transition: all 0.2s;
+}
+
+.toolbar-btn:hover {
+  color: #409eff;
+  background: rgba(64, 158, 255, 0.06);
+}
+
+.shake {
+  animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
+  20%, 40%, 60%, 80% { transform: translateX(6px); }
+}
+
+/* ========= Dark Mode ========= */
+html.dark .right-panel {
+  background: #1a1a2e;
+}
+
+html.dark .form-header h1 {
+  color: #e8e8f0;
+}
+
+html.dark .form-header p {
+  color: #8b949e;
+}
+
+html.dark .toggle-password {
+  color: #8b949e;
+}
+
+html.dark .captcha-box {
+  border-color: #3d3d5c;
+}
+
+html.dark .login-form :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px #3d3d5c inset;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+html.dark .login-form :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.5) inset;
+}
+
+html.dark .login-form :deep(.el-input__inner) {
+  color: #e8e8f0;
+}
+
+html.dark .demo-hint {
+  color: #666;
+}
+
+html.dark .left-panel {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0c29 100%);
+}
+
+html.dark .left-panel::after {
+  background: rgba(60, 50, 100, 0.25);
+}
+
+html.dark .left-panel::before {
+  background: rgba(40, 35, 80, 0.2);
+}
+
+html.dark .characters-scene {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0c29 100%);
+}
+
+html.dark .footer-links {
+  color: rgba(200, 200, 220, 0.4);
+}
+
+html.dark .footer-links a:hover {
+  color: #aaa;
+}
+
+html.dark .toolbar-btn {
+  color: #8b949e;
+}
+
+html.dark .toolbar-btn:hover {
+  color: #58a6ff;
+  background: rgba(88, 166, 255, 0.1);
+}
+
+html.dark .login-form :deep(.el-checkbox__label) {
+  color: #8b949e;
+}
+
+/* ========= Responsive ========= */
+@media (max-width: 900px) {
+  .login-card {
+    flex-direction: column;
+    height: auto;
+    max-height: none;
+    border-radius: 16px;
+  }
+
+  .left-panel {
+    display: none;
+  }
+
+  .right-panel {
+    padding: 36px 28px;
+  }
+}
+</style>