geo/apps/ops-web/src/views/LoginView.vue

<template>
  <div class="ops-login-container">
    <!-- Left Side: Visual / Brand Area -->
    <div class="ops-login-visual">
      <div class="visual-content">
        <div class="brand-logo">
          <div class="logo-icon"></div>
          <span class="logo-text">省心推</span>
        </div>
        <h1 class="visual-title">构建下一代<br />智能内容引擎</h1>
        <p class="visual-desc">
          赋能创作者与运营团队，提供从灵感发现到全网分发的一站式智能解决方案。
        </p>
      </div>
      
      <!-- Abstract Background Decorations -->
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="glass-overlay"></div>
    </div>

    <!-- Right Side: Login Form Area -->
    <div class="ops-login-form-wrapper">
      <div class="ops-login-form-inner">
        <div class="form-header">
          <div class="mobile-logo">
            <div class="logo-icon"></div>
            <span class="logo-text">省心推</span>
          </div>
          <h2 class="form-title">欢迎回来</h2>
          <p class="form-sub">运营管理控制台 · 仅限授权人员登录</p>
        </div>

        <a-form layout="vertical" :model="form" @submit.prevent="onSubmit" class="custom-form">
          <a-form-item label="账号" class="custom-form-item">
            <a-input 
              v-model:value="form.username" 
              placeholder="请输入管理员账号" 
              autocomplete="username" 
              size="large"
              class="custom-input"
            />
          </a-form-item>
          
          <a-form-item label="密码" class="custom-form-item">
            <a-input-password
              v-model:value="form.password"
              placeholder="请输入密码"
              autocomplete="current-password"
              size="large"
              class="custom-input"
            />
          </a-form-item>
          
          <div class="form-actions">
            <a-button type="primary" html-type="submit" block size="large" :loading="loading" class="submit-btn">
              登录系统
            </a-button>
          </div>
        </a-form>

        <transition name="fade">
          <div v-if="errorMessage" class="error-message">
            <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
            {{ errorMessage }}
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { OpsApiError } from "@/lib/http";
import { useAuthStore } from "@/stores/auth";

const router = useRouter();
const route = useRoute();
const auth = useAuthStore();

const form = reactive({ username: "", password: "" });
const loading = ref(false);
const errorMessage = ref<string | null>(null);

async function onSubmit() {
  if (loading.value) return;
  errorMessage.value = null;

  if (!form.username.trim() || !form.password) {
    errorMessage.value = "请输入账号和密码";
    return;
  }

  loading.value = true;
  try {
    await auth.login(form.username.trim(), form.password);
    const redirect =
      typeof route.query.redirect === "string" ? route.query.redirect : "/admin-users";
    void router.replace(redirect);
  } catch (error) {
    if (error instanceof OpsApiError) {
      errorMessage.value = error.detail || error.message;
    } else if (error instanceof Error) {
      errorMessage.value = error.message;
    } else {
      errorMessage.value = "登录失败，请稍后重试";
    }
  } finally {
    loading.value = false;
  }
}
</script>

<style scoped>
/* =========================================================
   Enterprise-Grade Split Screen Layout
   ========================================================= */

.ops-login-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background-color: #ffffff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- Left Side: Visual Branding --- */
.ops-login-visual {
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  color: #ffffff;
  display: none;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .ops-login-visual {
    display: flex;
  }
}

.visual-content {
  position: relative;
  z-index: 10;
  max-width: 480px;
  padding: 0 40px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 64px;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.visual-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
  background: linear-gradient(to right, #ffffff, #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.visual-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #94a3b8;
  font-weight: 400;
}

/* Abstract Background Shapes */
.decoration-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 1;
}

.circle-1 {
  width: 500px;
  height: 500px;
  background-color: rgba(99, 102, 241, 0.25);
  top: -100px;
  left: -100px;
}

.circle-2 {
  width: 600px;
  height: 600px;
  background-color: rgba(139, 92, 246, 0.2);
  bottom: -200px;
  right: -100px;
}

.glass-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.4) 100%);
  z-index: 2;
  pointer-events: none;
}

/* --- Right Side: Login Form --- */
.ops-login-form-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background-color: #ffffff;
}

@media (min-width: 1024px) {
  .ops-login-form-wrapper {
    flex: 0 0 520px;
  }
}

@media (min-width: 1280px) {
  .ops-login-form-wrapper {
    flex: 0 0 640px;
  }
}

.ops-login-form-inner {
  width: 100%;
  max-width: 400px;
}

/* Mobile Logo (only visible when visual side is hidden) */
.mobile-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
}

@media (min-width: 1024px) {
  .mobile-logo {
    display: none;
  }
}

.mobile-logo .logo-icon {
  width: 28px;
  height: 28px;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
}

.mobile-logo .logo-text {
  font-size: 20px;
  color: #0f172a;
}

.form-header {
  margin-bottom: 40px;
}

.form-title {
  font-size: 32px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.form-sub {
  font-size: 15px;
  color: #64748b;
  font-weight: 400;
}

/* Custom Ant Design Form Overrides */
.custom-form {
  margin-bottom: 24px;
}

.custom-form-item {
  margin-bottom: 24px;
}

:deep(.custom-form-item .ant-form-item-label > label) {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  height: auto;
  margin-bottom: 6px;
}

:deep(.custom-input) {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 10px 14px;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
  transition: all 0.2s ease;
}

:deep(.custom-input:hover) {
  border-color: #cbd5e1;
}

:deep(.custom-input:focus), :deep(.custom-input-focused) {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

:deep(.ant-input-password-icon) {
  color: #94a3b8;
}

:deep(.ant-input-password-icon:hover) {
  color: #6366f1;
}

.form-actions {
  margin-top: 32px;
}

.submit-btn {
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
  background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
}

.submit-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

/* Error Message Styling */
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: #fef2f2;
  border-left: 4px solid #ef4444;
  border-radius: 6px;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 500;
}

.error-icon {
  width: 18px;
  height: 18px;
}

/* Transitions */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>