初步模板

Signed-off-by: ChoChoX <xky1922@gmail.com>

src/components/Login.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="login-container">
+    <el-card class="login-card" shadow="always">
+      <template #header>
+        <div class="card-header">
+          <h2>欢迎登录</h2>
+          <p class="subtitle">请输入您的账号信息</p>
+        </div>
+      </template>
+
+      <el-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="rules"
+        label-position="top"
+        @keyup.enter="handleLogin"
+      >
+        <el-form-item label="用户名" prop="username">
+          <el-input
+            v-model="loginForm.username"
+            :prefix-icon="User"
+            clearable
+            placeholder="请输入用户名"
+          />
+        </el-form-item>
+
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="loginForm.password"
+            :prefix-icon="Lock"
+            clearable
+            placeholder="请输入密码"
+            show-password
+            type="password"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
+        </el-form-item>
+
+        <el-form-item class="login-form-button">
+          <el-button
+            :loading="loading"
+            class="login-btn"
+            type="primary"
+            @click="handleLogin"
+          >
+            登 录
+          </el-button>
+        </el-form-item>
+
+      </el-form>
+
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import {reactive, ref} from 'vue'
+import {ElMessage} from 'element-plus'
+import {Lock, User} from '@element-plus/icons-vue'
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
+
+const loginFormRef = ref(null)
+const loading = ref(false)
+
+const loginForm = reactive({
+  username: '',
+  password: '',
+  remember: false,
+})
+
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+  ],
+}
+
+const handleLogin = async () => {
+  if (!loginFormRef.value) return
+  try {
+    await loginFormRef.value.validate()
+    loading.value = true
+    await new Promise((r) => setTimeout(r, 800))
+    ElMessage.success('登录成功（模拟）')
+    router.push('/panel')
+  } catch {
+    // 校验失败，element-plus 会自动显示红色提示
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.login-card {
+  width: 420px;
+  border-radius: 12px;
+  border: none;
+}
+
+.card-header {
+  text-align: center;
+}
+
+.card-header h2 {
+  margin: 0 0 8px;
+  color: #303133;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: #909399;
+}
+
+.login-btn {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  width: 75%;
+}
+</style>