新增用户注册功能

frontend/src/views/Login.vue

@@ -9,7 +9,7 @@
       <el-card class="login-card">
         <div class="login-header">
           <h2 class="form-title">用户登录</h2>
-          <p class="form-desc">请输入您的账号与密码以访问系统</p>
+          <p class="form-desc">请输入邮箱与密码登录，未激活账号将无法登录</p>
         </div>
 
         <el-form 
@@ -19,11 +19,11 @@
           label-position="top"
           @keyup.enter.native="onSubmit"
         >
-          <el-form-item label="用户名" prop="username">
+          <el-form-item label="邮箱" prop="email">
             <el-input 
-              v-model="form.username" 
-              placeholder="请输入用户名"
-              autocomplete="username"
+              v-model="form.email" 
+              placeholder="请输入邮箱"
+              autocomplete="email"
             />
           </el-form-item>
           <el-form-item label="密码" prop="password">
@@ -37,6 +37,7 @@
           </el-form-item>
           
           <div class="form-footer">
+            <el-checkbox v-model="form.remember">记住账号密码</el-checkbox>
             <el-button 
               type="primary" 
               :loading="loading" 
@@ -45,6 +46,9 @@
             >
               登 录
             </el-button>
+            <div class="link-row">
+              <RouterLink to="/register">没有账号？注册</RouterLink>
+            </div>
           </div>
         </el-form>
       </el-card>
@@ -57,40 +61,60 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import type { FormInstance, FormRules } from "element-plus";
+import { ElCheckbox, ElMessage, type FormInstance, type FormRules } from "element-plus";
 import { useAuthStore } from "../store/auth";
+import { getCachedCredential, setCachedCredential, clearCachedCredential } from "../utils/auth";
 
 const auth = useAuthStore();
 const router = useRouter();
 
 const formRef = ref<FormInstance>();
 const form = reactive({
-  username: "",
+  email: "",
   password: "",
+  remember: false,
 });
 
 const rules: FormRules<typeof form> = {
-  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  email: [
+    { required: true, message: "请输入邮箱", trigger: "blur" },
+    { type: "email", message: "邮箱格式不正确", trigger: "blur" },
+  ],
   password: [{ required: true, message: "请输入密码", trigger: "blur" }],
 };
 
 const loading = ref(false);
 
+onMounted(() => {
+  const cached = getCachedCredential();
+  if (cached) {
+    form.email = cached.email;
+    form.password = cached.password;
+    form.remember = true;
+  }
+});
+
 const onSubmit = async () => {
   if (!formRef.value) return;
-  await formRef.value.validate(async (valid) => {
-    if (!valid) return;
-    loading.value = true;
-    try {
-      await auth.login(form.username, form.password);
-      await auth.fetchMe();
-      router.push("/");
-    } finally {
-      loading.value = false;
+  const valid = await formRef.value.validate();
+  if (!valid) return;
+  loading.value = true;
+  try {
+    await auth.login(form.email, form.password);
+    if (form.remember) {
+      setCachedCredential(form.email, form.password);
+    } else {
+      clearCachedCredential();
     }
-  });
+    router.push("/");
+  } catch (error: any) {
+    const detail = error?.response?.data?.detail || error?.response?.data?.message;
+    ElMessage.error(detail || "邮箱或密码错误");
+  } finally {
+    loading.value = false;
+  }
 };
 </script>
 
@@ -169,6 +193,14 @@ const onSubmit = async () => {
   font-size: 16px;
   margin-top: 16px;
 }
+.link-row {
+  margin-top: 12px;
+  text-align: center;
+}
+.link-row a {
+  color: var(--ctms-primary);
+  font-size: 14px;
+}
 
 .login-footer {
   text-align: center;