出发前保存

src/views/ILogin.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="auth-container">
+    <div class="auth-box">
+      <h2>{{ isLogin ? "登录你的账户" : "创建新账户" }}</h2>
+
+      <form @submit.prevent="handleSubmit">
+        <div v-if="isLogin" class="form-group">
+          <label>用户名或邮箱</label>
+          <input v-model="username" type="text" required />
+        </div>
+
+        <div v-if="isLogin" class="form-group">
+          <label>密码</label>
+          <input v-model="password" type="password" required />
+        </div>
+
+        <!-- 注册时额外字段 -->
+        <!-- <div v-if="!isLogin" class="form-group">
+          <label>确认密码</label>
+          <input v-model="confirmPassword" type="password" required />
+        </div> -->
+
+        <button type="submit" class="btn-primary">
+          {{ isLogin ? "登录" : "注册" }}
+        </button>
+
+      </form>
+
+      <p class="switch-mode">
+        {{ isLogin ? "没有账户？" : "已有账户？" }}
+        <a href="#" @click.prevent="isLogin = !isLogin">
+          {{ isLogin ? "注册" : "登录" }}
+        </a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { connection, reconnectWithToken } from '@/network/signalr'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+
+
+const isLogin = ref(true);
+const username = ref("");
+const password = ref("");
+const confirmPassword = ref("");
+const router = useRouter()
+
+const userStore = useUserStore()
+
+async function RegisterRequest() {
+  const result = await connection.invoke("Register")
+    .catch(err => console.error("注册请求失败:", err));
+  if (result.Success) {
+    isLogin.value = true; // 注册成功后切换到登录界面
+    console.log("注册成功:", result.Username); // 这里result.message实际上是成功信息
+    await LoginRequest(result.Username, result.Password); // 注册成功后自动登录
+    return
+  }
+  console.error("注册失败:", result.Success); // 这里result.message实际上是错误信息
+}
+
+async function LoginRequest(username, password) {
+  // 登录请求，获取访问令牌和刷新令牌
+  const ua = navigator.userAgent // 获取用户代理字符串
+
+  const platform = navigator.platform // 获取平台信息
+  console.log("ua:", ua, "platform:", platform)
+  const result = await connection.invoke("LoginAuthentication", username, password, ua + platform)
+    .catch(err => console.error("登录请求失败:", err));
+  if (result.Success) {
+    localStorage.setItem("accessToken", result.AccessToken);
+    localStorage.setItem("refreshToken", result.RefreshToken);
+    console.log("登录成功:", result.AccessToken, "=========", result.RefreshToken);
+    userStore.setUser(result);
+    await reconnectWithToken();
+    router.push("/"); // 登录成功后跳转到主界面 隐藏登录注册界面
+    return
+  }
+  console.error("登录失败:", "用户名或密码错误!"); // 这里result.message实际上是错误信息
+}
+
+function handleSubmit() {
+  if (!isLogin.value && password.value !== confirmPassword.value) {
+    alert("两次密码不一致！");
+    return;
+  }
+  if (isLogin.value) {
+    LoginRequest(username.value, password.value);
+  } else {
+    RegisterRequest(username.value, password.value);
+  }
+}
+
+
+</script>
+
+<style scoped>
+.auth-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #f3f2f1;
+}
+
+.auth-box {
+  background: #fff;
+  padding: 2rem;
+  width: 350px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+h2 {
+  margin-bottom: 1.5rem;
+  color: #0078d4;
+  /* 微软蓝 */
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-weight: 500;
+}
+
+input {
+  width: 100%;
+  padding: 0.6rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.btn-primary {
+  width: 100%;
+  padding: 0.8rem;
+  background: #0078d4;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background: #005a9e;
+}
+
+.switch-mode {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.switch-mode a {
+  color: #0078d4;
+  text-decoration: none;
+  font-weight: 500;
+}
+</style>