feat: 实现登录功能，包括用户名和密码输入、表单验证及错误处理

frontend/portal/src/router/index.js

@@ -61,7 +61,7 @@ const router = createRouter({
             ]
         },
 
-        { path: '/auth/login', name: 'login', component: TitlePage, meta: { title: '登录' } },
+        { path: '/auth/login', name: 'login', component: () => import('@/views/pages/auth/Login.vue'), meta: { title: '登录' } },
         { path: '/auth/register', name: 'register', component: () => import('@/views/pages/auth/Register.vue'), meta: { title: '注册' } },
         { path: '/auth/forgot-password', name: 'forgotPassword', component: TitlePage, meta: { title: '忘记密码' } },
         { path: '/auth/verify', name: 'verify', component: TitlePage, meta: { title: '验证（邮箱/手机）' } },

frontend/portal/src/service/auth.js

@@ -1,6 +1,16 @@
 import { requestJson } from './apiClient';
 import { setTokenAndLoadMe } from './session';
 
+export async function login({ username, password }) {
+    const data = await requestJson('/v1/auth/login', {
+        method: 'POST',
+        body: { username, password }
+    });
+    const token = data?.token ?? '';
+    if (token) await setTokenAndLoadMe(token);
+    return token;
+}
+
 export async function register({ username, password, confirmPassword, verifyCode }) {
     const data = await requestJson('/v1/auth/register', {
         method: 'POST',

frontend/portal/src/views/pages/auth/Login.vue

@@ -1,10 +1,78 @@
 <script setup>
 import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
-import { ref } from 'vue';
+import { login } from '@/service/auth';
+import { useToast } from 'primevue/usetoast';
+import { computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
-const email = ref('');
+const toast = useToast();
+const router = useRouter();
+const route = useRoute();
+
+const username = ref('');
 const password = ref('');
-const checked = ref(false);
+const rememberMe = ref(true);
+
+const isSubmitting = ref(false);
+
+const redirectTo = computed(() => {
+    const raw = route.query?.redirect;
+    if (typeof raw !== 'string' || !raw.startsWith('/')) return '/';
+    return raw;
+});
+
+function explainLoginError(err) {
+    const payload = err?.payload;
+    const message = String(payload?.message || err?.message || '').trim();
+    const code = payload?.code;
+    const id = payload?.id;
+
+    if (err?.status === 401 || code === 1209) {
+        return { summary: '登录失败', detail: '用户名或密码不正确，请重试。' };
+    }
+    if (err?.status === 400) {
+        return { summary: '登录信息有误', detail: message || '请检查输入后重试。' };
+    }
+    if (err?.status === 0 || err?.status === undefined) {
+        return { summary: '网络开小差了', detail: '请检查网络连接后重试。' };
+    }
+    if (err?.status >= 500) {
+        return { summary: '服务器忙，请稍后再试', detail: id ? `错误编号：${id}` : '请稍后重试，或联系管理员。' };
+    }
+    return { summary: '登录失败', detail: message || (id ? `错误编号：${id}` : '请稍后重试。') };
+}
+
+async function submit() {
+    if (isSubmitting.value) return;
+    if (!username.value.trim() || !password.value) {
+        toast.add({ severity: 'warn', summary: '请完善信息', detail: '请输入用户名和密码', life: 2500 });
+        return;
+    }
+
+    try {
+        isSubmitting.value = true;
+        await login({ username: username.value.trim(), password: password.value });
+
+        if (rememberMe.value) {
+            localStorage.setItem('portal_remember_username', username.value.trim());
+        } else {
+            localStorage.removeItem('portal_remember_username');
+        }
+
+        toast.add({ severity: 'success', summary: '登录成功', detail: '欢迎回来', life: 1500 });
+        await router.push(redirectTo.value);
+    } catch (err) {
+        const tip = explainLoginError(err);
+        toast.add({ severity: 'error', summary: tip.summary, detail: tip.detail, life: 3500 });
+    } finally {
+        isSubmitting.value = false;
+    }
+}
+
+const rememberedUsername = (localStorage.getItem('portal_remember_username') ?? '').trim();
+if (rememberedUsername) {
+    username.value = rememberedUsername;
+}
 </script>
 
 <template>
@@ -31,25 +99,50 @@ const checked = ref(false);
                                 />
                             </g>
                         </svg>
-                        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome to PrimeLand!</div>
-                        <span class="text-muted-color font-medium">Sign in to continue</span>
+                        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-2">登录</div>
+                        <span class="text-muted-color font-medium">欢迎回来</span>
                     </div>
 
                     <div>
-                        <label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
-                        <InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" v-model="email" />
+                        <label for="username" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">用户名</label>
+                        <InputText
+                            id="username"
+                            v-model="username"
+                            type="text"
+                            size="large"
+                            placeholder="请输入用户名"
+                            class="w-full md:w-[30rem] text-xl py-3 mb-6"
+                            autocomplete="username"
+                        />
 
-                        <label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
-                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid :feedback="false"></Password>
+                        <label for="password" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">密码</label>
+                        <Password
+                            id="password"
+                            v-model="password"
+                            size="large"
+                            placeholder="请输入密码"
+                            :toggleMask="true"
+                            class="mb-4"
+                            fluid
+                            :feedback="false"
+                            inputClass="text-xl py-3"
+                            autocomplete="current-password"
+                            @keyup.enter="submit"
+                        />
 
                         <div class="flex items-center justify-between mt-2 mb-8 gap-8">
                             <div class="flex items-center">
-                                <Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
-                                <label for="rememberme1">Remember me</label>
+                                <Checkbox v-model="rememberMe" id="rememberme" binary class="mr-2"></Checkbox>
+                                <label for="rememberme">记住用户名</label>
                             </div>
-                            <span class="font-medium no-underline ml-2 text-right cursor-pointer text-primary">Forgot password?</span>
+                            <router-link class="font-medium no-underline ml-2 text-right cursor-pointer text-primary" to="/auth/forgot-password">忘记密码？</router-link>
+                        </div>
+                        <Button :loading="isSubmitting" label="登录" size="large" class="w-full" @click="submit" />
+
+                        <div class="flex items-center justify-center gap-2 text-sm mt-6">
+                            <span class="text-muted-color">还没有账号？</span>
+                            <router-link class="text-primary font-medium" to="/auth/register">去注册</router-link>
                         </div>
-                        <Button label="Sign In" class="w-full" as="router-link" to="/"></Button>
                     </div>
                 </div>
             </div>