优化代码

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>