admin-2025-02-16 03:54:11

components.d.ts

@@ -7,6 +7,11 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AButton: typeof import('ant-design-vue/es')['Button']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/router/index.js

@@ -1,17 +1,23 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '../views/HomeView.vue';
+import LoginView from '../views/LoginView.vue';
 
 const routes = [
   {
     path: '/',
     name: 'home',
     component: HomeView
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginView
   }
-]
+];
 
 const router = createRouter({
   history: createWebHashHistory(location.pathname),
   routes
-})
+});
 
-export default router
+export default router;

src/views/HomeView.vue

@@ -1,13 +1,29 @@
 <template>
   <div class="home">
     <h2>欢迎使用Prototype Design, 请您根据您的需要设计您的Prototype</h2>
+    <a-button type="primary" @click="goToLogin">Go To Login</a-button>
   </div>
 </template>
 
 <script>
+import { useRouter } from 'vue-router';
 
-export default {}
+export default {
+  name: 'HomeView',
+  setup() {
+    const router = useRouter();
+
+    const goToLogin = () => {
+      router.push('/login');
+    };
+
+    return {
+      goToLogin
+    };
+  }
+}
 </script>
+
 <style>
 .home {
   height: 100vh;
@@ -15,5 +31,8 @@ export default {}
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
 }
 </style>

src/views/LoginView.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="login">
+    <a-form
+      :model="formState"
+      :rules="rules"
+      @submit.prevent="handleSubmit"
+    >
+      <a-form-item label="Username" prop="username">
+        <a-input v-model:value="formState.username" placeholder="Enter your username" />
+      </a-form-item>
+      <a-form-item label="Password" prop="password">
+        <a-input-password v-model:value="formState.password" placeholder="Enter your password" />
+      </a-form-item>
+      <a-button type="primary" html-type="submit">Submit</a-button>
+    </a-form>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+
+const formState = reactive({
+  username: '',
+  password: ''
+});
+
+const rules = {
+  username: [
+    { required: true, message: 'Please input your username', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: 'Please input your password', trigger: 'blur' },
+  ]
+};
+
+const handleSubmit = () => {
+  // Handle form submission logic here
+  console.log('Form submitted:', formState);
+};
+</script>