geo/apps/desktop-client/src/renderer/views/LoginView.vue

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { useDesktopSession } from "../composables/useDesktopSession";

const { apiBaseURL, error, pending, setApiBaseURL, login } = useDesktopSession();

const showServerSettings = ref(false);
const rememberPassword = ref(!!localStorage.getItem("geo_rankly_saved_password"));

const form = reactive({
  apiBaseURL: apiBaseURL.value,
  email: localStorage.getItem("geo_rankly_saved_email") || "",
  password: localStorage.getItem("geo_rankly_saved_password") || "",
});

async function submitLogin() {
  if (rememberPassword.value) {
    localStorage.setItem("geo_rankly_saved_email", form.email);
    localStorage.setItem("geo_rankly_saved_password", form.password);
  } else {
    localStorage.removeItem("geo_rankly_saved_email");
    localStorage.removeItem("geo_rankly_saved_password");
  }

  setApiBaseURL(form.apiBaseURL);
  await login({
    email: form.email,
    password: form.password,
  });
}
</script>

<template>
  <section class="login-shell">
    <div class="bg-layer">
      <div class="orb orb-1"></div>
      <div class="orb orb-2"></div>
      <div class="orb orb-3"></div>
      <div class="grid-overlay"></div>
    </div>

    <div class="auth-wrapper">
      <div class="auth-card">
        <header class="brand-header">
          <div class="brand-logo">
            <span class="brand-core"></span>
          </div>
          <h2>登录 GEO Rankly</h2>
          <p>登录租户账号，绑定专属客户端环境</p>
        </header>

        <form class="login-form" @submit.prevent="submitLogin">
          <label class="field">
            <span>邮箱 / 账号</span>
            <input
              v-model.trim="form.email"
              type="email"
              autocomplete="username"
              placeholder="you@company.com"
              required
            />
          </label>

          <label class="field">
            <span>密码</span>
            <input
              v-model="form.password"
              type="password"
              autocomplete="current-password"
              placeholder="请输入密码"
              required
            />
          </label>

          <div class="remember-row">
            <label class="checkbox-label">
              <input type="checkbox" v-model="rememberPassword" />
              <span>记住账号和密码</span>
            </label>
          </div>

          <button type="submit" class="submit-button" :disabled="pending">
            {{ pending ? "验证中..." : "登 录" }}
          </button>
        </form>

        <div class="advanced-section">
          <a
            v-if="!showServerSettings"
            class="toggle-link"
            @click="showServerSettings = true"
          >
            服务器选项
          </a>
          <div v-else class="advanced-fields">
            <label class="field subtle-field">
              <span>网关 API 地址</span>
              <input
                v-model.trim="form.apiBaseURL"
                type="text"
                placeholder="http://localhost:8080"
                spellcheck="false"
              />
            </label>
          </div>
        </div>

        <p v-if="error" class="error-text">{{ error }}</p>
      </div>

      <footer class="login-footer">
        <p>GEO Rankly Desktop Environment</p>
      </footer>
    </div>
  </section>
</template>

<style scoped>
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: #f7f9fc;
  padding: 24px;
}

.bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  animation: float 20s infinite ease-in-out alternate;
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(22, 119, 255, 0.4), rgba(22, 119, 255, 0));
  top: -200px;
  left: -200px;
  animation-delay: 0s;
}

.orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.3), rgba(20, 184, 166, 0));
  bottom: -150px;
  right: -100px;
  animation-duration: 25s;
  animation-delay: -5s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0));
  top: 50%;
  left: 60%;
  animation-duration: 22s;
  animation-delay: -10s;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
}

@keyframes float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(5%, 10%) scale(1.05);
  }
  100% {
    transform: translate(-10%, -5%) scale(0.95);
  }
}

.auth-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 40px 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.brand-header {
  text-align: center;
  margin-bottom: 32px;
}

.brand-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f0f7ff;
  border: 1px solid #bae0ff;
}

.brand-core {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1677ff;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.2);
}

.brand-header h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.02em;
}

.brand-header p {
  margin: 0;
  color: #8c8c8c;
  font-size: 13px;
}

.login-form {
  display: grid;
  gap: 20px;
}

.field {
  display: grid;
  gap: 6px;
}

.field span {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
}

.field input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(217, 217, 217, 0.8);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #1a1a1a;
  font-size: 14px;
  transition: all 0.2s;
  outline: none;
}

.field input:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
}

.field input::placeholder {
  color: #bfbfbf;
}

.remember-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: -6px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #1677ff;
}

.checkbox-label span {
  font-size: 13px;
  color: #595959;
}

.submit-button {
  margin-top: 8px;
  height: 40px;
  background: #1677ff;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.submit-button:hover:not(:disabled) {
  background: #4096ff;
}

.submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.advanced-section {
  margin-top: 24px;
  text-align: center;
}

.toggle-link {
  color: #8c8c8c;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s;
}

.toggle-link:hover {
  color: #1677ff;
}

.advanced-fields {
  text-align: left;
  padding-top: 16px;
  border-top: 1px dashed #e6edf5;
  animation: fade-in 0.3s ease;
}

.subtle-field span {
  color: #8c8c8c;
  font-weight: 400;
}

.subtle-field input {
  background: #fafafb;
}

.error-text {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: 6px;
  color: #ff4d4f;
  font-size: 13px;
  text-align: center;
}

.login-footer {
  margin-top: 32px;
  text-align: center;
}

.login-footer p {
  margin: 0;
  color: #8c8c8c;
  font-size: 12px;
  letter-spacing: 0.05em;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>