创建项目，前端模拟

Vue/frontend/src/views/Login.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="login-box">
+    <h2>系统登录</h2>
+    <input v-model="form.username" placeholder="用户名" />
+    <input v-model="form.password" type="password" placeholder="密码" />
+    <button @click="handleLogin">登录</button>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '../stores/user'
+import axios from '../api/request' // 导入我们封装的 request
+
+const router = useRouter()
+const userStore = useUserStore()
+const form = reactive({ username: '', password: '' })
+
+const handleLogin = async () => {
+  try {
+    // 这里暂时模拟后端返回，等您Flask写好了把下面注释解开
+    /*
+    const res = await axios.post('/login', form)
+    userStore.login(res.data) // res.data 包含 token, username, role
+    */
+
+    // --- 模拟数据开始 ---
+    if(form.username) {
+      userStore.login({
+        token: 'fake-jwt-token-123',
+        username: form.username,
+        role: form.username === 'admin' ? 'admin' : 'engineer'
+      })
+      router.push('/dashboard')
+    }
+    // --- 模拟数据结束 ---
+
+  } catch (error) {
+    alert('登录失败')
+  }
+}
+</script>
+
+<style scoped>
+.login-box { width: 300px; margin: 100px auto; display: flex; flex-direction: column; gap: 10px; }
+</style>