dev

domain-web/src/views/auth/LoginView.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="login-shell">
+    <div class="login-panel">
+      <div class="hero">
+        <span class="eyebrow">domainCheck</span>
+        <h1>轻量 Web 管理后台</h1>
+        <p>这一版先承接系统设置、导入、检测控制、筛选、导出和日志诊断。</p>
+      </div>
+      <PageCard title="登录" description="当前为第一期可用版本，默认账号密码均为 admin。">
+        <el-form :model="form" @submit.prevent="submit">
+          <el-form-item label="账号">
+            <el-input v-model="form.username" placeholder="请输入账号" />
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password />
+          </el-form-item>
+          <el-button type="primary" class="submit" @click="submit">进入后台</el-button>
+        </el-form>
+      </PageCard>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import PageCard from "@/components/PageCard.vue";
+import { authApi } from "@/api/modules";
+import { useAuthStore } from "@/stores/auth";
+
+const router = useRouter();
+const authStore = useAuthStore();
+
+const form = reactive({
+  username: "admin",
+  password: "admin"
+});
+
+const submit = async () => {
+  try {
+    const { data } = await authApi.login(form);
+    authStore.setToken(data.access_token);
+    authStore.setUser(data.user);
+    ElMessage.success("登录成功");
+    router.push("/dashboard");
+  } catch (error: any) {
+    ElMessage.error(error?.message || "登录失败，请确认账号密码和 API 服务状态。");
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.login-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 32px;
+}
+
+.login-panel {
+  width: min(920px, 100%);
+  display: grid;
+  grid-template-columns: 1.15fr 0.95fr;
+  gap: 24px;
+  align-items: stretch;
+}
+
+.hero {
+  background: linear-gradient(145deg, #1d4ed8, #0f172a);
+  color: white;
+  border-radius: 24px;
+  padding: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.eyebrow {
+  display: inline-flex;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  width: fit-content;
+  margin-bottom: 16px;
+}
+
+.hero h1 {
+  margin: 0;
+  font-size: 34px;
+  line-height: 1.15;
+}
+
+.hero p {
+  margin: 16px 0 0;
+  color: rgba(255, 255, 255, 0.86);
+  line-height: 1.7;
+}
+
+.submit {
+  width: 100%;
+}
+
+@media (max-width: 960px) {
+  .login-panel {
+    grid-template-columns: 1fr;
+  }
+}
+</style>