Initial commit: first version of project

src/views/admin/login.vue

@@ -0,0 +1,112 @@
+<!-- src/views/Login.vue -->
+<template>
+  <div class="login-container">
+    <div class="login-form">
+      <h2>用户登录</h2>
+      <a-form :model="formState" :rules="rules" @finish="handleLogin">
+        <a-form-item name="username">
+          <a-input v-model:value="formState.username" placeholder="请输入用户名" size="large">
+            <template #prefix>
+              <UserOutlined />
+            </template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item name="password">
+          <a-input-password v-model:value="formState.password" placeholder="请输入密码" size="large">
+            <template #prefix>
+              <LockOutlined />
+            </template>
+          </a-input-password>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button type="primary" html-type="submit" size="large" block :loading="loading">
+            登录
+          </a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+import { useUserStore } from '@/stores/user'
+import { http } from '@/utils/axios';
+
+interface FormState {
+  username: string
+  password: string
+}
+
+const router = useRouter()
+const userStore = useUserStore()
+
+const formState = ref<FormState>({
+  username: '',
+  password: ''
+})
+
+const loading = ref(false)
+
+const rules = {
+  username: [{ required: true, message: '请输入用户名' }],
+  password: [{ required: true, message: '请输入密码' }]
+}
+
+const handleLogin = async (values: FormState) => {
+  loading.value = true
+  const params = { data: values.username, pwd: values.password };
+  http.post('/perm/login', params).then(res => {
+    console.log(res.data);
+    if (res.data.code === '0') {
+      message.success('登录成功')
+      window.sessionStorage.setItem('token', res.data.data.token);
+      console.log(res.data.data.token, 'hahah', window.sessionStorage.getItem('token'));
+      router.push('/admin')//跳转到管理端首页
+    } else {
+      message.error(res.data.message)
+    }
+  })
+  // try {
+  //   await userStore.login({
+  //     username: values.username,
+  //     password: values.password
+  //   })
+  //   message.success('登录成功')
+  //   router.push('/admin')//跳转到管理端首页
+  // } catch (error) {
+  //   message.error('登录失败，请检查用户名和密码')
+  // } finally {
+  //   loading.value = false
+  // }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #f0f2f5;
+}
+
+.login-form {
+  width: 360px;
+  padding: 36px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.login-form h2 {
+  text-align: center;
+  margin-bottom: 24px;
+  color: #1890ff;
+}
+</style>