feat: 初始化收支管理系统

frontend/src/views/Login.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+// 登录页面组件：提供用户名/密码表单，验证后跳转至首页
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useMessage, NCard, NForm, NFormItem, NInput, NButton, NSpace } from 'naive-ui'
+import { login } from '../api/user'
+import { useUserStore } from '../store/user'
+
+const router = useRouter()
+const message = useMessage() // 消息提示工具
+const userStore = useUserStore() // 用户状态管理
+
+// 登录表单数据
+const form = ref({
+  username: '',
+  password: '',
+})
+const loading = ref(false) // 登录按钮加载状态
+
+/** 处理登录操作：校验表单 -> 调用登录接口 -> 保存 token -> 跳转首页 */
+async function handleLogin() {
+  if (!form.value.username || !form.value.password) {
+    message.warning('请填写用户名和密码')
+    return
+  }
+  loading.value = true
+  try {
+    const res: any = await login(form.value)
+    userStore.setToken(res.data.token) // 保存 token
+    userStore.setUserInfo(res.data.user.nickname, res.data.user.id) // 保存用户信息
+    message.success('登录成功')
+    router.push('/dashboard') // 跳转到统计面板
+  } catch (e: any) {
+    message.error(e.message || '登录失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="login-container">
+    <NCard title="收支管理系统 - 登录" style="width: 400px" :bordered="true">
+      <NForm>
+        <NFormItem label="用户名">
+          <NInput v-model:value="form.username" placeholder="请输入用户名" @keyup.enter="handleLogin" />
+        </NFormItem>
+        <NFormItem label="密码">
+          <NInput v-model:value="form.password" type="password" show-password-on="click" placeholder="请输入密码" @keyup.enter="handleLogin" />
+        </NFormItem>
+        <NSpace vertical>
+          <NButton type="primary" block :loading="loading" @click="handleLogin">登录</NButton>
+          <NButton text type="info" @click="router.push('/register')">没有账号？去注册</NButton>
+        </NSpace>
+      </NForm>
+    </NCard>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+</style>