Initial commit

2026-05-12 17:51:53 +08:00
commit b564ca4797
55 changed files with 6407 additions and 0 deletions
@@ -0,0 +1,140 @@
+<template>
+  <div class="login-page">
+    <div class="login-bg">
+      <div class="orb orb-1"></div>
+      <div class="orb orb-2"></div>
+    </div>
+    <div class="login-card">
+      <div class="login-header">
+        <span class="login-logo">⚡</span>
+        <h1 class="login-title">SmartUp</h1>
+        <p class="login-subtitle">API 上游管理与 Webhook 通知系统</p>
+      </div>
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-position="top"
+        @submit.prevent="handleLogin"
+      >
+        <el-form-item label="邮箱" prop="email">
+          <el-input
+            v-model="form.email"
+            placeholder="admin@example.com"
+            size="large"
+            prefix-icon="Message"
+            autocomplete="email"
+          />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="form.password"
+            type="password"
+            placeholder="••••••••"
+            size="large"
+            prefix-icon="Lock"
+            show-password
+            autocomplete="current-password"
+            @keyup.enter="handleLogin"
+          />
+        </el-form-item>
+        <el-button
+          type="primary"
+          size="large"
+          style="width:100%;margin-top:8px"
+          :loading="loading"
+          @click="handleLogin"
+        >
+          登录
+        </el-button>
+        <p v-if="errorMsg" class="login-error">{{ errorMsg }}</p>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { authApi } from '@/api'
+import type { FormInstance } from 'element-plus'
+
+const router = useRouter()
+const auth = useAuthStore()
+const formRef = ref<FormInstance>()
+const loading = ref(false)
+const errorMsg = ref('')
+
+const form = ref({ email: '', password: '' })
+const rules = {
+  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+}
+
+async function handleLogin() {
+  const valid = await formRef.value?.validate().catch(() => false)
+  if (!valid) return
+  loading.value = true
+  errorMsg.value = ''
+  try {
+    const res = await authApi.login(form.value.email, form.value.password)
+    auth.setToken(res.data.access_token, form.value.email)
+    router.push('/upstreams')
+  } catch (e: any) {
+    errorMsg.value = e.response?.data?.detail || '登录失败，请检查账号密码'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-base);
+  position: relative;
+  overflow: hidden;
+}
+
+.login-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.25;
+}
+.orb-1 { width: 400px; height: 400px; background: #6366f1; top: -100px; left: -100px; }
+.orb-2 { width: 300px; height: 300px; background: #818cf8; bottom: -80px; right: -80px; }
+
+.login-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 40px 36px;
+  width: 380px;
+  position: relative;
+  z-index: 1;
+  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
+}
+
+.login-header { text-align: center; margin-bottom: 32px; }
+.login-logo { font-size: 36px; display: block; margin-bottom: 8px; }
+.login-title {
+  font-size: 24px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #6366f1, #818cf8);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 6px;
+}
+.login-subtitle { font-size: 13px; color: var(--text-muted); }
+.login-error { color: var(--color-danger); font-size: 13px; text-align: center; margin-top: 12px; }
+</style>