video-script-admin/src/views/LoginView.vue

<template>
  <div
    style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top, #dbeafe, #0f172a)"
  >
    <div style="display: grid; grid-template-columns: 1.2fr 420px; width: 1080px; max-width: 92vw; overflow: hidden; border-radius: 28px; background: #fff">
      <div style="padding: 56px; background: linear-gradient(160deg, #0f172a, #1d4ed8); color: #fff">
        <div style="font-size: 42px; font-weight: 800; line-height: 1.15">视频脚本<br />管理平台</div>
        <p style="margin-top: 18px; color: rgba(255,255,255,0.8); line-height: 1.8">
          用于管理登录、组织架构、菜单权限，以及视频链接拆解任务。
        </p>
      </div>
      <div style="padding: 56px 42px">
        <div style="font-size: 28px; font-weight: 700; margin-bottom: 24px">登录</div>
        <el-form :model="form" @submit.prevent>
          <el-form-item>
            <el-input v-model="form.username" placeholder="用户名" size="large" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password" placeholder="密码" show-password size="large" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="large" style="width: 100%" @click="handleLogin">进入系统</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useAuthStore } from "../stores/auth";

const router = useRouter();
const authStore = useAuthStore();
const form = reactive({
  username: "",
  password: "",
});

const handleLogin = async () => {
  if (!form.username || !form.password) {
    ElMessage.warning("请输入用户名和密码");
    return;
  }
  await authStore.login(form);
  router.push("/dashboard");
};
</script>