优化代码

src/views/ActivateEmail.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="activate-email">
+        <div class="activate-email-content">
+            您的邮箱{{ user.email }},尚未激活，请在您的邮箱中点击激活链接激活您的账号。
+        </div>
+        <div class="activate-email-btn" @click="sendActivateEmail">
+            重发激活邮件
+        </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref, // 响应式基础
+  watch, // 侦听器
+  onMounted, // 组件挂载完成后执行
+  onUpdated, // 组件更新后执行
+  onUnmounted, // 组件销毁前执行
+} from "vue";
+import {getPromiseStorage} from '@/utils/storage.js';
+import {resendEmail} from "@/api/account";
+import { useRouter } from 'vue-router';
+import { ElMessage } from "element-plus";
+const router = useRouter();
+const refname = ref('');
+
+function sendActivateEmail() {
+    resendEmail({
+        mailAddress:user.value.email,
+        type:1
+    }).then(res => {
+        ElMessage.success('激活邮件已发送，请注意查收。');
+        router.push('/');
+    }).catch(err => {
+        ElMessage.error('激活邮件发送失败，请稍后再试。');
+    })
+}
+
+
+
+watch(refname, async (newQuestion, oldQuestion) => {
+  // 变化后执行
+});
+const user = ref({});
+onMounted(() => {
+    getPromiseStorage('user').then(res => {
+        console.log(res);
+      user.value = res;
+    });
+});
+onUpdated(() => {
+  // 组件更新后执行
+});
+onUnmounted(() => {
+  // 组件销毁前执行
+});
+</script>
+
+<style scoped>
+.activate-email{
+    padding: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: url(@/assets/bg.png);
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.activate-email-content{
+    font-size: 30px;
+    color: #4FCACD;
+    font-weight: bold;
+}
+.activate-email-btn{
+    background-color: #4FCACD;
+    color: #fff;
+    font-size: 20px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 50px;
+}
+.activate-email-btn:hover{
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+    transform: scale(1.08);
+    opacity: 0.8;
+}
+.activate-email-btn:active{
+    transition: all 0.1s ease;
+    transform: scale(0.95) !important;
+}
+</style>

src/views/HomeView.vue

@@ -25,7 +25,7 @@
             size="large"
             class="input-text"
             v-model="refEmail"
-            placeholder="请输入邮箱"
+            placeholder="请输入邮箱或用户名"
           />
         </div>
         <div class="input-Password">
@@ -64,6 +64,7 @@ import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import { tokenStore, UserStore } from '@/stores/notice'
 import { setStorage , getStorage } from '@/utils/storage.js';
+import { goEasyLink } from '@/utils/goeasy.js';
 const router = useRouter();
 const refname = ref("");
 const refEmail = ref(""); // 邮箱
@@ -74,29 +75,42 @@ const token = tokenStore()
 const user = UserStore()
 // 登录
 function EmailLogin() {
-  // 邮箱验证
-  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-  if (!emailRegex.test(refEmail.value)) {
-    ElMessage.error("请输入有效的邮箱地址");
-    return;
-  }
+  // // 邮箱验证
+  // const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  // if (!emailRegex.test(refEmail.value)) {
+  //   ElMessage.error("请输入有效的邮箱地址");
+  //   return;
+  // }
   // 密码验证
   const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/;
   if (!passwordRegex.test(refpassword.value)) {
     ElMessage.error("密码必须包含大小写字母和数字，长度6-16位");
     return;
   }
+  const loading = ElLoading.service({
+    lock: true,
+    text: "登录中.....",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
 
   login({
-    email: refEmail.value,
+    userNameOrEmail: refEmail.value,
+    // email: refEmail.value,
     password: refpassword.value,
   }).then((res) => {
     console.log(res);
     token.setToken(res.token);
     setStorage("token", res.token);
+    setStorage("email", refEmail.value);
+    setStorage("password", refpassword.value);
     user.setUser(res);
     setStorage("user", res);
-    router.push("/nav");
+    // otp/getopt 调用
+    goEasyLink().then(() => {
+      loading.close();
+      router.push("/nav");
+    });
+
   });
 }
 // 登录切换
@@ -145,6 +159,8 @@ watch(refname, async (newQuestion, oldQuestion) => {
 });
 
 onMounted(() => {
+  refEmail.value = getStorage("email");
+  refpassword.value = getStorage("password");
   // 初始化获取二维码
   fetchQrcode();
   // 设置每两分钟轮询一次
@@ -164,7 +180,7 @@ onUnmounted(() => {
   margin: 0;
   width: 100vw;
   height: 100vh;
-  background-image: url(../assets/bg.png);
+  background-image: url(@/assets/bg.png);
   background-size: 100% 100%;
   display: flex;
   flex-direction: column;

src/views/emailRegistration.vue

@@ -17,6 +17,9 @@
       <div class="Email">
         <el-input type="text" size="large" class="input-item" v-model="Email" placeholder="请输入邮箱" />
       </div>
+      <div class="Email">
+        <el-input type="text" size="large" class="input-item" v-model="userName" placeholder="请输入用户名" @blur="userNameBlur"/>
+      </div>
       <div class="Password">
         <el-input type="Password" size="large" class="input-item" v-model="Password" show-password placeholder="请输入密码" />
         <text class="password-tip">您的密码必须包含大小字母和数字，长度在6-16位之间</text>
@@ -26,7 +29,7 @@
       </div>
       <div class="btn">
          <div class="Return" @click="Return">返回</div>
-         <div class="nextStep"@click="nextStep">下一步</div>
+         <div class="nextStep" @click="nextStep" >下一步</div>
       </div>
     </div>
     <!-- 完成注册 -->
@@ -43,7 +46,7 @@
 </template>
 
 <script setup>
-import { register,checkStatus,resendEmail} from "@/api/account"; // 导入登录接口
+import { register,checkStatus,resendEmail,checkUsername} from "@/api/account"; // 导入登录接口
 import { tokenStore, UserStore } from '@/stores/notice'
 import { setStorage , getStorage } from '@/utils/storage.js';
 import {
@@ -58,12 +61,36 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const active = ref(0);// 当前步骤
 const Email = ref("");// 邮箱
+const userName = ref("");// 用户名
 const Password = ref("");// 密码
 const ConfirmPassword = ref("");// 确认密码
 const token = tokenStore()
 const user = UserStore()
+const userNamebtn = ref(false)
+// 用户名失去焦点
+function userNameBlur() {
+  if (userName.value.length < 6 || userName.value.length > 16 || userName.value == '' || userName.value == null) {
+    ElMessage.error('用户名长度不能小于2，不能大于16,不能为空');
+    return;
+  }
+  checkUsername({ userName: userName.value }).then(res => {
+    if (res==false) {
+      ElMessage.error('用户名已存在');
+      userNamebtn.value = false
+      return;
+    } else {
+    ElMessage.success('用户名可用');
+    userNamebtn.value = true
+    }
+  })
+}
 //下一步
 function nextStep() {
+  //用户名验证
+  if (userNamebtn.value == false) {
+    ElMessage.error('用户名已存在');
+    return;
+  }
   // 邮箱验证
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
   if (!emailRegex.test(Email.value)) {
@@ -78,12 +105,18 @@ function nextStep() {
     return;
   }
 
+  //用户名验证
+  if (userName.value.length < 6 || userName.value.length > 16 || userName.value == '' || userName.value == null) {
+    ElMessage.error('用户名长度不能小于2，不能大于16,不能为空');
+    return;
+  }
+
   // 确认密码验证
   if (Password.value !== ConfirmPassword.value) {
     ElMessage.error('两次输入的密码不一致');
     return;
   }
-  register({password: Password.value, email: Email.value, nickName: '用户' + Math.floor(Math.random() * 1000000),headerIcon:'181754562968_.pic_hd.jpg'}).then(res => {
+  register({ userName: userName.value,password: Password.value, email: Email.value, nickName: '用户' + Math.floor(Math.random() * 1000000),headerIcon:'181754562968_.pic_hd.jpg'}).then(res => {
     active.value = active.value + 1;
     check(res.id);
     token.setToken(res.token);
@@ -195,14 +228,14 @@ onUnmounted(() => {
     opacity: 0.8;
 }
 .Email{
-  margin-top: 70px;
+  margin-top: 30px;
   width: 90%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .Password{
-  margin-top: 50px;
+  margin-top: 30px;
   width: 90%;
   display: flex;
   flex-direction: column;
@@ -210,7 +243,7 @@ onUnmounted(() => {
   align-items: center;
 }
 .ConfirmPassword{
-  margin-top: 50px;
+  margin-top: 30px;
   width: 90%;
   display: flex;
   flex-direction: column;

src/views/hosts/Forum.vue

@@ -89,6 +89,6 @@ onUnmounted(() => {
 }
 .card-body{
   color: #333333;
-  font-size: 24px;
+  font-size: 16px;
 }
 </style>

src/views/hosts/pk.vue

@@ -645,6 +645,10 @@ onUnmounted(() => {
   background-size: 100% 100%;
   transition: all 0.4s ease;
 }
+.search:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
 .search:hover {
   transform: scale(1.2);
   opacity: 0.8;
@@ -653,6 +657,10 @@ onUnmounted(() => {
   transform: scale(1.2);
   opacity: 0.8;
 }
+.primary:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
 .infinite-list {
   width: 100%;
   height: 100%;