prototype_design/src/views/LoginView.vue

<template>
  <div class="bg-gray-200 flex items-center justify-center min-h-screen">
    <form class="bg-white p-8 rounded-lg shadow-md w-96 space-y-4">
      <h2 class="text-2xl font-bold text-gray-800 text-center">登录</h2>
      <div>
        <label for="username" class="block text-gray-600">用户名</label>
        <input id="username" v-model="username" type="text" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-purple-500" />
      </div>
      <div>
        <label for="password" class="block text-gray-600">密码</label>
        <input id="password" v-model="password" type="password" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-purple-500" />
      </div>
      <div class="flex items-center">
        <input id="remember" v-model="remember" type="checkbox" class="mr-2" />
        <label for="remember" class="text-gray-600 text-sm">记住我</label>
      </div>
      <button @click.prevent="login" class="w-full bg-purple-600 text-white font-bold py-2 rounded hover:bg-purple-700">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      remember: false,
    };
  },
  methods: {
    login() {
      // Simple validation
      if (!this.username || !this.password) {
        alert('用户名和密码不能为空');
        return;
      }

      // Dummy login logic
      if (this.username === 'admin' && this.password === 'admin') {
        alert('登录成功');
        // Redirect to home page
        this.$router.push('/');
      } else {
        alert('用户名或密码错误');
      }
    },
  },
};
</script>

<style scoped>
/* Additional styles can be added here if needed */
</style>