feat: 登录页面

components.d.ts

@@ -14,9 +14,13 @@ declare module 'vue' {
     CardItem: typeof import('./src/components/home/CardItem.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']

src/components/home/header.vue

@@ -26,7 +26,7 @@
       <div class="hidden lg:flex items-center gap-3">
         <div class="flex items-center gap-3">
           <a class="text-[#606266] cursor-pointer">控制台</a>
-          <el-button type="primary" class="bg-[#0050b3]!"
+          <el-button type="primary" class="bg-[#0050b3]!" @click="login"
             >登录 / 注册</el-button
           >
         </div>
@@ -77,6 +77,12 @@ const drawer = ref(false);
 const goHome = () => {
   router.push({ path: "/" });
 };
+
+const login = () => {
+  router.push({
+    path: "/login",
+  });
+};
 </script>
 
 <style scoped></style>

src/router/index.ts

@@ -8,6 +8,7 @@ import Home from "@/views/index.vue";
 import Management from "@/views/management.vue";
 import Command from "@/views/command.vue";
 import ChatBI from "@/views/chatbi.vue";
+import Login from "@/views/login.vue";
 
 const routes: RouteRecordRaw[] = [
   {
@@ -15,6 +16,11 @@ const routes: RouteRecordRaw[] = [
     name: "Home",
     component: Home,
   },
+  {
+    path: "/login",
+    name: "Login",
+    component: Login,
+  },
   {
     path: "/management",
     name: "Management",

src/views/index.vue

@@ -3,7 +3,7 @@
     <Header />
 
     <!-- Hero with video background -->
-    <section class="relative w-full h-[56vh] md:h-[70vh] overflow-hidden">
+    <section class="relative w-full h-[56vh] md:h-[70vh] overflow-hidden mt-15">
       <video
         class="absolute inset-0 w-full h-full object-cover"
         :src="bgVideo"

src/views/login.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="min-h-screen grid grid-cols-1 lg:grid-cols-2">
+    <!-- Left visual area -->
+    <div class="relative hidden lg:block">
+      <img
+        src="/src/assets/images/1.jpg"
+        alt="visual"
+        class="absolute inset-0 w-full h-full object-cover"
+      />
+      <div class="absolute inset-0 bg-black/20"></div>
+      <div class="relative z-10 p-6 flex items-start">
+        <div class="flex items-center gap-3">
+          <img :src="logo" alt="logo" class="h-9" />
+          <span class="text-white text-lg font-semibold">智慧经营平台</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right login form -->
+    <div class="flex items-center justify-center p-6">
+      <div class="w-full max-w-[420px]">
+        <h1 class="text-2xl font-bold text-center mb-8">登录</h1>
+
+        <el-form
+          :model="form"
+          :rules="rules"
+          ref="formRef"
+          label-position="top"
+        >
+          <el-form-item prop="username">
+            <el-input v-model="form.username" placeholder="请输入用户名" />
+          </el-form-item>
+
+          <el-form-item prop="password">
+            <el-input
+              v-model="form.password"
+              type="password"
+              placeholder="请输入密码"
+              show-password
+            />
+          </el-form-item>
+
+          <div class="flex items-center justify-between mb-3">
+            <el-checkbox v-model="form.remember">记住我</el-checkbox>
+            <a class="text-[#409EFF] text-sm cursor-pointer">忘记密码?</a>
+          </div>
+
+          <el-button
+            type="primary"
+            class="w-full"
+            :loading="loading"
+            @click="onSubmit"
+            >登录</el-button
+          >
+          <el-button class="w-full mt-3" @click="qrLogin"
+            >钉钉扫码登录</el-button
+          >
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
+import logo from "@/assets/images/logo.png";
+
+type LoginForm = {
+  username: string;
+  password: string;
+  remember: boolean;
+};
+
+const form = reactive<LoginForm>({
+  username: "",
+  password: "",
+  remember: false,
+});
+const formRef = ref();
+const loading = ref(false);
+
+const rules = {
+  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+};
+
+const onSubmit = async () => {
+  await formRef.value?.validate(async (valid: boolean) => {
+    if (!valid) return;
+    loading.value = true;
+    try {
+      // TODO: 调用登录接口
+      await new Promise((r) => setTimeout(r, 800));
+      ElMessage.success("登录成功");
+    } finally {
+      loading.value = false;
+    }
+  });
+};
+
+const qrLogin = () => {
+  ElMessage.info("请接入钉钉扫码登录");
+};
+</script>