feat: add admin login

frontend/admin/src/App.vue

@@ -1,10 +1,12 @@
 <script setup>
+import { useAuthStore } from '@/stores/auth';
 import Button from 'primevue/button';
 import Menubar from 'primevue/menubar';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
+const authStore = useAuthStore();
 
 const navItems = ref([
     {
@@ -39,10 +41,18 @@ const navItems = ref([
     }
 ]);
 
+const handleLogout = () => {
+    authStore.logout();
+    router.push('/login');
+};
 </script>
 
 <template>
-    <div class="flex flex-col min-h-screen">
+    <div v-if="!authStore.isAuthenticated">
+        <router-view />
+    </div>
+
+    <div v-else class="flex flex-col min-h-screen">
         <header class="sticky top-0 z-50 shadow-md">
             <Menubar :model="navItems" class="!rounded-none">
                 <template #start>
@@ -51,7 +61,7 @@ const navItems = ref([
                     </div>
                 </template>
                 <template #end>
-                    <Button label="Logout" icon="pi pi-power-off" severity="secondary" text />
+                    <Button label="Logout" icon="pi pi-power-off" severity="secondary" text @click="handleLogout" />
                 </template>
             </Menubar>
         </header>

frontend/admin/src/api/authService.js

@@ -0,0 +1,7 @@
+import { http } from '@/utils/http';
+
+export const authService = {
+    login(username, password) {
+        return http.post('/admin/auth/login', { username, password });
+    },
+};

frontend/admin/src/main.js

@@ -1,4 +1,5 @@
 import Aura from '@primeuix/themes/aura';
+import { createPinia } from 'pinia';
 import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
 import ToastService from 'primevue/toastservice';
@@ -20,7 +21,13 @@ if (typeof import.meta !== 'undefined') {
 }
 console.log('=============================');
 
+
 const app = createApp(App)
+
+
+const pinia = createPinia()
+app.use(pinia);
+
 app.use(router);
 app.use(PrimeVue, {
     theme: {

frontend/admin/src/pages/LoginPage.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { useAuthStore } from '@/stores/auth';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import InputText from 'primevue/inputtext';
+import Password from 'primevue/password';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const authStore = useAuthStore();
+
+const username = ref('');
+const password = ref('');
+const loading = ref(false);
+const errorMessage = ref('');
+
+const handleLogin = async () => {
+    loading.value = true;
+    errorMessage.value = '';
+
+    try {
+        await authStore.login(username.value, password.value);
+        router.push('/');
+    } catch (error) {
+        errorMessage.value = error.message || '登录失败';
+    } finally {
+        loading.value = false;
+    }
+};
+</script>
+
+<template>
+    <div class="min-h-screen bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-md w-full space-y-8">
+            <Card class="mt-8 bg-white shadow-lg">
+                <template #content>
+                    <div class="space-y-6">
+                        <div class="flex flex-col gap-2">
+                            <label for="username" class="text-sm font-medium text-gray-700">用户名</label>
+                            <InputText id="username" v-model="username" class="appearance-none relative block w-full"
+                                placeholder="请输入用户名" @keyup.enter="handleLogin" />
+                        </div>
+
+                        <div class="flex flex-col gap-2">
+                            <label for="password" class="text-sm font-medium text-gray-700">密码</label>
+                            <Password id="password" v-model="password" class="w-full" placeholder="请输入密码" toggleMask
+                                :feedback="false" @keyup.enter="handleLogin" />
+                        </div>
+
+                        <div v-if="errorMessage" class="text-red-500 text-sm text-center">
+                            {{ errorMessage }}
+                        </div>
+
+                        <Button label="登录" @click="handleLogin" :loading="loading" class="w-full p-button-primary"
+                            :class="{ 'p-disabled': loading }" />
+                    </div>
+                </template>
+            </Card>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+:deep(.p-password input) {
+    width: 100%;
+}
+
+:deep(.p-inputtext) {
+    padding: 0.75rem 1rem;
+}
+</style>

frontend/admin/src/router.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
+import { useAuthStore } from './stores/auth';
 
 // Define your routes here
 const routes = [
@@ -44,6 +45,12 @@ const routes = [
         path: '/orders',
         name: 'Orders',
         component: () => import('./pages/OrderPage.vue'),
+    },
+    {
+        path: '/login',
+        name: 'Login',
+        component: () => import('./pages/LoginPage.vue'),
+        meta: { requiresAuth: false }
     }
 ];
 
@@ -53,3 +60,14 @@ export const router = createRouter({
     history: createWebHashHistory(),
     routes
 });
+
+// Add navigation guard
+router.beforeEach((to, from, next) => {
+    const authStore = useAuthStore();
+
+    if (to.meta.requiresAuth !== false && !authStore.isAuthenticated) {
+        next('/login');
+    } else {
+        next();
+    }
+});

frontend/admin/src/router/index.js

@@ -0,0 +1,33 @@
+import { useAuthStore } from '@/stores/authStore';
+import { createRouter, createWebHistory } from 'vue-router';
+
+// ...existing code...
+
+// Add login route
+const routes = [
+    {
+        path: '/login',
+        name: 'Login',
+        component: () => import('@/pages/LoginPage.vue'),
+        meta: { requiresAuth: false }
+    },
+    // ...existing routes...
+];
+
+// Add navigation guard
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+router.beforeEach((to, from, next) => {
+    const authStore = useAuthStore();
+
+    if (to.meta.requiresAuth !== false && !authStore.isAuthenticated) {
+        next('/login');
+    } else {
+        next();
+    }
+});
+
+export default router;

frontend/admin/src/stores/auth.js

@@ -0,0 +1,31 @@
+import { authService } from '@/api/authService';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+export const useAuthStore = defineStore('auth', () => {
+    const token = ref(localStorage.getItem('token'));
+    const user = ref(null);
+
+    const isAuthenticated = computed(() => !!token.value);
+
+    async function login(username, password) {
+        const { data } = await authService.login(username, password);
+        token.value = data.token;
+        user.value = data.user;
+        localStorage.setItem('token', data.token);
+    }
+
+    function logout() {
+        token.value = null;
+        user.value = null;
+        localStorage.removeItem('token');
+    }
+
+    return {
+        token,
+        user,
+        isAuthenticated,
+        login,
+        logout
+    };
+});

frontend/admin/src/utils/http.js

@@ -0,0 +1,27 @@
+import { router } from '@/router';
+import { useAuthStore } from '@/stores/auth';
+import axios from 'axios';
+
+export const http = axios.create({
+    baseURL: import.meta.env.VITE_API_BASE_URL,
+});
+
+http.interceptors.request.use((config) => {
+    const authStore = useAuthStore();
+    if (authStore.token) {
+        config.headers.Authorization = `Bearer ${authStore.token}`;
+    }
+    return config;
+});
+
+http.interceptors.response.use(
+    (response) => response,
+    (error) => {
+        if (error.response?.status === 401) {
+            const authStore = useAuthStore();
+            authStore.logout();
+            router.push('/login');
+        }
+        return Promise.reject(error);
+    }
+);