feat:about account

web/src/components/AccountBg.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="right flex-center">
+    <div class="logo">
+      <img src="@/assets/img/logo.png" alt="" />
+    </div>
+    <div>welcome</div>
+    <footer-bar />
+  </div>
+</template>
+
+<script setup>
+import FooterBar from "@/components/FooterBar.vue";
+</script>
+
+<style lang="stylus" scoped>
+.right{
+  font-size: 40px
+  font-weight: bold
+  color:#fff
+  flex-direction: column
+  background-image url("~@/assets/img/login-bg.png")
+  background-size cover
+  background-position center
+  width: 50%;
+  min-height: 100vh
+  max-height: 100vh
+  background-repeat: no-repeat;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  ::v-deep(.foot-container){
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+    background: none;
+    color: var(--sm-txt);
+    font-size: 12px;
+    text-align: center;
+
+    .footer{
+      a,
+      span{
+        color: var(--text-fff)
+      }
+    }
+  }
+}
+.logo{
+  margin-bottom: 26px;
+  width: 200px
+  height: 200px
+  background: #fff
+  border-radius: 50%
+  img{
+    width: 100%;
+    object-fit: cover;
+    height: 100%;
+  }
+  }
+</style>

web/src/components/AccountTop.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <ThemeChange />
+    <div
+      @click="goBack"
+      class="flex back animate__animated animate__pulse animate__infinite"
+    >
+      <el-icon><ArrowLeftBold /></el-icon
+      >{{ title === "注册" ? "首页" : "返回" }}
+    </div>
+    <div class="title">{{ title }}</div>
+    <div class="smTitle" v-if="title !== '重置密码'">
+      {{ title === "登录" ? "没有账号？" : "已有账号？"
+      }}<span @click="goPageFun" class="text-color-primary sign"
+        >赶紧{{ title === "登录" ? "注册" : "登录" }}</span
+      >
+    </div>
+    <slot></slot>
+    <div class="flex orline" v-if="title !== '重置密码'">
+      <div class="lineor"></div>
+      <span>或</span>
+      <div class="lineor"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ArrowLeftBold } from "@element-plus/icons-vue";
+import ThemeChange from "@/components/ThemeChange.vue";
+import { defineProps } from "vue";
+import { useRouter } from "vue-router";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "登录"
+  },
+  smTitle: { type: String, default: "没有账号？" },
+  goPage: {
+    type: String,
+    default: "/register"
+  }
+});
+
+const router = useRouter();
+const goBack = () => {
+  if (props.title === "注册") {
+    router.push("/");
+  } else {
+    router.go(-1);
+  }
+};
+const goPageFun = () => {
+  if (props.title === "登录") {
+    router.push("/register");
+  } else {
+    router.push("/login");
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+.back{
+   color:var(--sm-txt)
+   font-size: 14px;
+   margin-bottom: 140px
+   margin-top: 18px
+   cursor: pointer
+   .el-icon{
+     margin-right: 6px
+   }
+ }
+ .title{
+   font-size: 36px
+   margin-bottom: 16px
+   color: var(--text-color)
+
+ }
+ .smTitle{
+    color: var(--text-color)
+   font-size: 14px;
+   margin-bottom: 36px
+ }
+ .sign{
+    text-decoration: underline;
+    cursor :pointer
+  }
+  .orline{
+    color:var(--text-secondary)
+    span{
+      font-size: 14px;
+      margin: 0 10px
+
+    }
+    .lineor{
+
+      width: 182px; height: 1px;
+      background: var(--text-secondary)
+    }
+  }
+</style>

web/src/components/FooterBar.vue

@@ -63,6 +63,8 @@ getLicenseInfo()
   width: 100%;
   display flex;
   justify-content center
+  background: var(--theme-bg);
+  margin-top -4px
 
   .footer {
     max-width 400px;

web/src/components/LoginDialog.vue

@@ -1,18 +1,18 @@
 <template>
   <el-dialog
-      class="login-dialog"
-      v-model="showDialog"
-      :close-on-click-modal="true"
-      :show-close="false"
-      :before-close="close"
+    class="login-dialog"
+    v-model="showDialog"
+    :close-on-click-modal="true"
+    :show-close="false"
+    :before-close="close"
   >
-    <template #header="{titleId, titleClass }">
+    <template #header="{ titleId, titleClass }">
       <div class="header">
-        <div class="title" v-if="login">用户登录</div>
+        <div class="title" v-if="login">用户登录-</div>
         <div class="title" v-else>用户注册</div>
         <div class="close-icon">
           <el-icon @click="close">
-            <Close/>
+            <Close />
           </el-icon>
         </div>
       </div>
@@ -21,26 +21,32 @@
     <div class="login-box" v-if="login">
       <el-form :model="data" label-width="120px" class="form">
         <div class="block">
-          <el-input placeholder="账号"
-                    size="large"
-                    v-model="data.username"
-                    autocomplete="off">
+          <el-input
+            placeholder="账号"
+            size="large"
+            v-model="data.username"
+            autocomplete="off"
+          >
             <template #prefix>
               <el-icon>
-                <Iphone/>
+                <Iphone />
               </el-icon>
             </template>
           </el-input>
         </div>
 
         <div class="block">
-          <el-input placeholder="请输入密码(8-16位)"
-                    maxlength="16" size="large"
-                    v-model="data.password" show-password
-                    autocomplete="off">
+          <el-input
+            placeholder="请输入密码(8-16位)"
+            maxlength="16"
+            size="large"
+            v-model="data.password"
+            show-password
+            autocomplete="off"
+          >
             <template #prefix>
               <el-icon>
-                <Lock/>
+                <Lock />
               </el-icon>
             </template>
           </el-input>
@@ -48,7 +54,13 @@
 
         <el-row class="btn-row" :gutter="20">
           <el-col :span="24">
-            <el-button class="login-btn" type="primary" size="large" @click="submitLogin">登录</el-button>
+            <el-button
+              class="login-btn"
+              type="primary"
+              size="large"
+              @click="submitLogin"
+              >登录</el-button
+            >
           </el-col>
         </el-row>
 
@@ -56,9 +68,21 @@
           <el-col :span="12">
             <div class="reg">
               还没有账号？
-              <el-button type="primary" class="forget" size="small" @click="login = false">注册</el-button>
+              <el-button
+                type="primary"
+                class="forget"
+                size="small"
+                @click="login = false"
+                >注册</el-button
+              >
 
-              <el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
+              <el-button
+                type="info"
+                class="forget"
+                size="small"
+                @click="showResetPass = true"
+                >忘记密码？</el-button
+              >
             </div>
           </el-col>
 
@@ -66,7 +90,12 @@
             <div class="c-login" v-if="wechatLoginURL !== ''">
               <div class="text">其他登录方式：</div>
               <div class="login-type">
-                <a class="wechat-login" :href="wechatLoginURL"  @click="setRoute(router.currentRoute.value.path)"><i class="iconfont icon-wechat"></i></a>
+                <a
+                  class="wechat-login"
+                  :href="wechatLoginURL"
+                  @click="setRoute(router.currentRoute.value.path)"
+                  ><i class="iconfont icon-wechat"></i
+                ></a>
               </div>
             </div>
           </el-col>
@@ -79,14 +108,16 @@
         <el-tabs v-model="activeName" class="demo-tabs">
           <el-tab-pane label="手机注册" name="mobile" v-if="enableMobile">
             <div class="block">
-              <el-input placeholder="手机号码"
-                        size="large"
-                        v-model="data.mobile"
-                        maxlength="11"
-                        autocomplete="off">
+              <el-input
+                placeholder="手机号码"
+                size="large"
+                v-model="data.mobile"
+                maxlength="11"
+                autocomplete="off"
+              >
                 <template #prefix>
                   <el-icon>
-                    <Iphone/>
+                    <Iphone />
                   </el-icon>
                 </template>
               </el-input>
@@ -94,32 +125,41 @@
             <div class="block">
               <el-row :gutter="10">
                 <el-col :span="12">
-                  <el-input placeholder="验证码"
-                            size="large" maxlength="30"
-                            v-model="data.code"
-                            autocomplete="off">
+                  <el-input
+                    placeholder="验证码"
+                    size="large"
+                    maxlength="30"
+                    v-model="data.code"
+                    autocomplete="off"
+                  >
                     <template #prefix>
                       <el-icon>
-                        <Checked/>
+                        <Checked />
                       </el-icon>
                     </template>
                   </el-input>
                 </el-col>
                 <el-col :span="12">
-                  <send-msg size="large" :receiver="data.mobile" type="mobile"/>
+                  <send-msg
+                    size="large"
+                    :receiver="data.mobile"
+                    type="mobile"
+                  />
                 </el-col>
               </el-row>
             </div>
           </el-tab-pane>
           <el-tab-pane label="邮箱注册" name="email" v-if="enableEmail">
             <div class="block">
-              <el-input placeholder="邮箱地址"
-                        size="large"
-                        v-model="data.email"
-                        autocomplete="off">
+              <el-input
+                placeholder="邮箱地址"
+                size="large"
+                v-model="data.email"
+                autocomplete="off"
+              >
                 <template #prefix>
                   <el-icon>
-                    <Message/>
+                    <Message />
                   </el-icon>
                 </template>
               </el-input>
@@ -127,32 +167,37 @@
             <div class="block">
               <el-row :gutter="10">
                 <el-col :span="12">
-                  <el-input placeholder="验证码"
-                            size="large" maxlength="30"
-                            v-model="data.code"
-                            autocomplete="off">
+                  <el-input
+                    placeholder="验证码"
+                    size="large"
+                    maxlength="30"
+                    v-model="data.code"
+                    autocomplete="off"
+                  >
                     <template #prefix>
                       <el-icon>
-                        <Checked/>
+                        <Checked />
                       </el-icon>
                     </template>
                   </el-input>
                 </el-col>
                 <el-col :span="12">
-                  <send-msg size="large" :receiver="data.email" type="email"/>
+                  <send-msg size="large" :receiver="data.email" type="email" />
                 </el-col>
               </el-row>
             </div>
           </el-tab-pane>
           <el-tab-pane label="用户名注册" name="username" v-if="enableUser">
             <div class="block">
-              <el-input placeholder="用户名"
-                        size="large"
-                        v-model="data.username"
-                        autocomplete="off">
+              <el-input
+                placeholder="用户名"
+                size="large"
+                v-model="data.username"
+                autocomplete="off"
+              >
                 <template #prefix>
                   <el-icon>
-                    <Iphone/>
+                    <Iphone />
                   </el-icon>
                 </template>
               </el-input>
@@ -161,38 +206,49 @@
         </el-tabs>
 
         <div class="block">
-          <el-input placeholder="请输入密码(8-16位)"
-                    maxlength="16" size="large"
-                    v-model="data.password" show-password
-                    autocomplete="off">
+          <el-input
+            placeholder="请输入密码(8-16位)"
+            maxlength="16"
+            size="large"
+            v-model="data.password"
+            show-password
+            autocomplete="off"
+          >
             <template #prefix>
               <el-icon>
-                <Lock/>
+                <Lock />
               </el-icon>
             </template>
           </el-input>
         </div>
 
         <div class="block">
-          <el-input placeholder="重复密码(8-16位)"
-                    size="large" maxlength="16" v-model="data.repass" show-password
-                    autocomplete="off">
+          <el-input
+            placeholder="重复密码(8-16位)"
+            size="large"
+            maxlength="16"
+            v-model="data.repass"
+            show-password
+            autocomplete="off"
+          >
             <template #prefix>
               <el-icon>
-                <Lock/>
+                <Lock />
               </el-icon>
             </template>
           </el-input>
         </div>
 
         <div class="block">
-          <el-input placeholder="邀请码(可选)"
-                    size="large"
-                    v-model="data.invite_code"
-                    autocomplete="off">
+          <el-input
+            placeholder="邀请码(可选)"
+            size="large"
+            v-model="data.invite_code"
+            autocomplete="off"
+          >
             <template #prefix>
               <el-icon>
-                <Message/>
+                <Message />
               </el-icon>
             </template>
           </el-input>
@@ -200,7 +256,13 @@
 
         <el-row class="btn-row" :gutter="20">
           <el-col :span="12">
-            <el-button class="login-btn" type="primary" size="large" @click="submitRegister">注册</el-button>
+            <el-button
+              class="login-btn"
+              type="primary"
+              size="large"
+              @click="submitRegister"
+              >注册</el-button
+            >
           </el-col>
           <el-col :span="12">
             <div class="text">
@@ -208,7 +270,6 @@
               <el-tag @click="login = true">登录</el-tag>
             </div>
           </el-col>
-
         </el-row>
       </el-form>
 
@@ -224,45 +285,48 @@
 
           <el-col :span="12">
             <div class="wechat-card">
-              <el-image :src="wxImg"/>
+              <el-image :src="wxImg" />
             </div>
           </el-col>
         </el-row>
       </div>
     </div>
 
-    <captcha v-if="enableVerify" @success="submit" ref="captchaRef"/>
+    <captcha v-if="enableVerify" @success="submit" ref="captchaRef" />
 
-    <reset-pass @hide="showResetPass = false" :show="showResetPass"/>
+    <reset-pass @hide="showResetPass = false" :show="showResetPass" />
   </el-dialog>
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from "vue"
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {setUserToken} from "@/store/session";
-import {validateEmail, validateMobile} from "@/utils/validate";
-import {Checked, Close, Iphone, Lock, Message} from "@element-plus/icons-vue";
+import { onMounted, ref, watch } from "vue";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { setUserToken } from "@/store/session";
+import { validateEmail, validateMobile } from "@/utils/validate";
+import { Checked, Close, Iphone, Lock, Message } from "@element-plus/icons-vue";
 import SendMsg from "@/components/SendMsg.vue";
-import {arrayContains} from "@/utils/libs";
-import {getSystemInfo} from "@/store/cache";
+import { arrayContains } from "@/utils/libs";
+import { getSystemInfo } from "@/store/cache";
 import Captcha from "@/components/Captcha.vue";
 import ResetPass from "@/components/ResetPass.vue";
-import {setRoute} from "@/store/system";
-import {useRouter} from "vue-router";
-import {useSharedStore} from "@/store/sharedata";
+import { setRoute } from "@/store/system";
+import { useRouter } from "vue-router";
+import { useSharedStore } from "@/store/sharedata";
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
-  show: Boolean,
+  show: Boolean
 });
-const showDialog = ref(false)
-watch(() => props.show, (newValue) => {
-  showDialog.value = newValue
-})
+const showDialog = ref(false);
+watch(
+  () => props.show,
+  (newValue) => {
+    showDialog.value = newValue;
+  }
+);
 
-const login = ref(true)
+const login = ref(true);
 const data = ref({
   username: process.env.VUE_APP_USER,
   password: process.env.VUE_APP_PASS,
@@ -271,158 +335,169 @@ const data = ref({
   repass: "",
   code: "",
   invite_code: ""
-})
-const enableMobile = ref(false)
-const enableEmail = ref(false)
-const enableUser = ref(false)
-const enableRegister = ref(true)
-const wechatLoginURL = ref('')
-const activeName = ref("")
-const wxImg = ref("/images/wx.png")
-const captchaRef = ref(null)
+});
+const enableMobile = ref(false);
+const enableEmail = ref(false);
+const enableUser = ref(false);
+const enableRegister = ref(true);
+const wechatLoginURL = ref("");
+const activeName = ref("");
+const wxImg = ref("/images/wx.png");
+const captchaRef = ref(null);
 // eslint-disable-next-line no-undef
-const emits = defineEmits(['hide', 'success']);
-const action = ref("login")
-const enableVerify = ref(false)
-const showResetPass = ref(false)
-const router = useRouter()
-const store = useSharedStore()
+const emits = defineEmits(["hide", "success"]);
+const action = ref("login");
+const enableVerify = ref(false);
+const showResetPass = ref(false);
+const router = useRouter();
+const store = useSharedStore();
 // 是否需要验证码，输入一次密码错之后就要验证码
-const needVerify = ref(false)
+const needVerify = ref(false);
 
 onMounted(() => {
-  const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`
-  httpGet("/api/user/clogin?return_url="+returnURL).then(res => {
-    wechatLoginURL.value = res.data.url
-  }).catch(e => {
-    console.log(e.message)
-  })
+  const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`;
+  httpGet("/api/user/clogin?return_url=" + returnURL)
+    .then((res) => {
+      wechatLoginURL.value = res.data.url;
+    })
+    .catch((e) => {
+      console.log(e.message);
+    });
 
-  getSystemInfo().then(res => {
-    if (res.data) {
-      const registerWays = res.data['register_ways']
-      if (arrayContains(registerWays, "username")) {
-        enableUser.value = true
-        activeName.value = 'username'
+  getSystemInfo()
+    .then((res) => {
+      if (res.data) {
+        const registerWays = res.data["register_ways"];
+        if (arrayContains(registerWays, "username")) {
+          enableUser.value = true;
+          activeName.value = "username";
+        }
+        if (arrayContains(registerWays, "email")) {
+          enableEmail.value = true;
+          activeName.value = "email";
+        }
+        if (arrayContains(registerWays, "mobile")) {
+          enableMobile.value = true;
+          activeName.value = "mobile";
+        }
+        // 是否启用注册
+        enableRegister.value = res.data["enabled_register"];
+        // 使用后台上传的客服微信二维码
+        if (res.data["wechat_card_url"] !== "") {
+          wxImg.value = res.data["wechat_card_url"];
+        }
+        enableVerify.value = res.data["enabled_verify"];
       }
-      if (arrayContains(registerWays, "email")) {
-        enableEmail.value = true
-        activeName.value = 'email'
-      }
-      if (arrayContains(registerWays, "mobile")) {
-        enableMobile.value = true
-        activeName.value = 'mobile'
-      }
-      // 是否启用注册
-      enableRegister.value = res.data['enabled_register']
-      // 使用后台上传的客服微信二维码
-      if (res.data['wechat_card_url'] !== '') {
-        wxImg.value = res.data['wechat_card_url']
-      }
-      enableVerify.value = res.data['enabled_verify']
-    }
-  }).catch(e => {
-    ElMessage.error("获取系统配置失败：" + e.message)
-  })
-})
+    })
+    .catch((e) => {
+      ElMessage.error("获取系统配置失败：" + e.message);
+    });
+});
 
 const submit = (verifyData) => {
   if (action.value === "login") {
-      doLogin(verifyData)
+    doLogin(verifyData);
   } else if (action.value === "register") {
-    doRegister(verifyData)
+    doRegister(verifyData);
   }
-}
+};
 
 // 登录操作
 const submitLogin = () => {
-  if (data.value.username === '') {
-    return ElMessage.error('请输入用户名');
+  if (data.value.username === "") {
+    return ElMessage.error("请输入用户名");
   }
-  if (data.value.password === '') {
-    return ElMessage.error('请输入密码');
+  if (data.value.password === "") {
+    return ElMessage.error("请输入密码");
   }
   if (enableVerify.value && needVerify.value) {
-    captchaRef.value.loadCaptcha()
-    action.value = "login"
+    captchaRef.value.loadCaptcha();
+    action.value = "login";
   } else {
-    doLogin({})
+    doLogin({});
   }
-}
+};
 
 const doLogin = (verifyData) => {
-  data.value.key = verifyData.key
-  data.value.dots = verifyData.dots
-  data.value.x = verifyData.x
-  httpPost('/api/user/login', data.value).then((res) => {
-    setUserToken(res.data.token)
-    store.setIsLogin(true)
-    ElMessage.success("登录成功！")
-    emits("hide")
-    emits('success')
-    needVerify.value = false
-  }).catch((e) => {
-    ElMessage.error('登录失败，' + e.message)
-    needVerify.value = true
-  })
-}
+  data.value.key = verifyData.key;
+  data.value.dots = verifyData.dots;
+  data.value.x = verifyData.x;
+  httpPost("/api/user/login", data.value)
+    .then((res) => {
+      setUserToken(res.data.token);
+      store.setIsLogin(true);
+      ElMessage.success("登录成功！");
+      emits("hide");
+      emits("success");
+      needVerify.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("登录失败，" + e.message);
+      needVerify.value = true;
+    });
+};
 
 // 注册操作
 const submitRegister = () => {
-  if (activeName.value === 'username' && data.value.username === '') {
-    return ElMessage.error('请输入用户名');
+  if (activeName.value === "username" && data.value.username === "") {
+    return ElMessage.error("请输入用户名");
   }
 
-  if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
-    return ElMessage.error('请输入合法的手机号');
+  if (activeName.value === "mobile" && !validateMobile(data.value.mobile)) {
+    return ElMessage.error("请输入合法的手机号");
   }
 
-  if (activeName.value === 'email' && !validateEmail(data.value.email)) {
-    return ElMessage.error('请输入合法的邮箱地址');
+  if (activeName.value === "email" && !validateEmail(data.value.email)) {
+    return ElMessage.error("请输入合法的邮箱地址");
   }
 
   if (data.value.password.length < 8) {
-    return ElMessage.error('密码的长度为8-16个字符');
+    return ElMessage.error("密码的长度为8-16个字符");
   }
   if (data.value.repass !== data.value.password) {
-    return ElMessage.error('两次输入密码不一致');
+    return ElMessage.error("两次输入密码不一致");
   }
 
-  if ((activeName.value === 'mobile' || activeName.value === 'email') && data.value.code === '') {
-    return ElMessage.error('请输入验证码');
+  if (
+    (activeName.value === "mobile" || activeName.value === "email") &&
+    data.value.code === ""
+  ) {
+    return ElMessage.error("请输入验证码");
   }
-  if (enableVerify.value && activeName.value === 'username') {
-    captchaRef.value.loadCaptcha()
-    action.value = "register"
+  if (enableVerify.value && activeName.value === "username") {
+    captchaRef.value.loadCaptcha();
+    action.value = "register";
   } else {
-    doRegister({})
+    doRegister({});
   }
-}
+};
 
 const doRegister = (verifyData) => {
-  data.value.key = verifyData.key
-  data.value.dots = verifyData.dots
-  data.value.x = verifyData.x
-  data.value.reg_way = activeName.value
-  httpPost('/api/user/register', data.value).then((res) => {
-    setUserToken(res.data.token)
-    ElMessage.success({
-      "message": "注册成功!",
-      onClose: () => {
-        emits("hide")
-        emits('success')
-      },
-      duration: 1000
+  data.value.key = verifyData.key;
+  data.value.dots = verifyData.dots;
+  data.value.x = verifyData.x;
+  data.value.reg_way = activeName.value;
+  httpPost("/api/user/register", data.value)
+    .then((res) => {
+      setUserToken(res.data.token);
+      ElMessage.success({
+        message: "注册成功!",
+        onClose: () => {
+          emits("hide");
+          emits("success");
+        },
+        duration: 1000
+      });
     })
-  }).catch((e) => {
-    ElMessage.error('注册失败，' + e.message)
-  })
-}
+    .catch((e) => {
+      ElMessage.error("注册失败，" + e.message);
+    });
+};
 
 const close = function () {
-  emits('hide', false)
-  login.value = true
-}
+  emits("hide", false);
+  login.value = true;
+};
 </script>
 
 <style lang="stylus">
@@ -525,4 +600,4 @@ const close = function () {
   }
 
 }
-</style>
+</style>

web/src/components/ResetPass.vue

@@ -1,43 +1,42 @@
 <template>
   <div class="reset-pass">
     <el-dialog
-        v-model="showDialog"
-        :close-on-click-modal="true"
-        width="540px"
-        :before-close="close"
-        :title="title"
-        class="reset-pass-dialog"
+      v-model="showDialog"
+      :close-on-click-modal="true"
+      width="540px"
+      :before-close="close"
+      :title="title"
+      class="reset-pass-dialog"
     >
       <div class="form">
         <el-form :model="form" label-width="80px" label-position="left">
           <el-tabs v-model="form.type" class="demo-tabs">
             <el-tab-pane label="手机号验证" name="mobile">
               <el-form-item label="手机号">
-                <el-input v-model="form.mobile" placeholder="请输入手机号"/>
+                <el-input v-model="form.mobile" placeholder="请输入手机号" />
               </el-form-item>
               <el-form-item label="验证码">
                 <el-row class="code-row">
                   <el-col :span="16">
-                    <el-input v-model="form.code" maxlength="6"/>
+                    <el-input v-model="form.code" maxlength="6" />
                   </el-col>
                   <el-col :span="8" class="send-button">
-                    <send-msg size="" :receiver="form.mobile" type="mobile"/>
+                    <send-msg size="" :receiver="form.mobile" type="mobile" />
                   </el-col>
                 </el-row>
               </el-form-item>
-
             </el-tab-pane>
             <el-tab-pane label="邮箱验证" name="email">
               <el-form-item label="邮箱地址">
-                <el-input v-model="form.email" placeholder="请输入邮箱地址"/>
+                <el-input v-model="form.email" placeholder="请输入邮箱地址" />
               </el-form-item>
               <el-form-item label="验证码">
                 <el-row class="code-row">
                   <el-col :span="16">
-                    <el-input v-model="form.code" maxlength="6"/>
+                    <el-input v-model="form.code" maxlength="6" />
                   </el-col>
                   <el-col :span="8" class="send-button">
-                    <send-msg size="" :receiver="form.email" type="email"/>
+                    <send-msg size="" :receiver="form.email" type="email" />
                   </el-col>
                 </el-row>
               </el-form-item>
@@ -45,19 +44,17 @@
           </el-tabs>
 
           <el-form-item label="新密码">
-            <el-input v-model="form.password" type="password"/>
+            <el-input v-model="form.password" type="password" />
           </el-form-item>
           <el-form-item label="重复密码">
-            <el-input v-model="form.repass" type="password"/>
+            <el-input v-model="form.repass" type="password" />
           </el-form-item>
         </el-form>
       </div>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="save" round>
-            重置密码
-          </el-button>
+          <el-button type="primary" @click="save" round> 重置密码 </el-button>
         </div>
       </template>
     </el-dialog>
@@ -65,11 +62,11 @@
 </template>
 
 <script setup>
-import {computed, ref} from "vue";
+import { computed, ref } from "vue";
 import SendMsg from "@/components/SendMsg.vue";
-import {ElMessage} from "element-plus";
-import {httpPost} from "@/utils/http";
-import {validateEmail, validateMobile} from "@/utils/validate";
+import { ElMessage } from "element-plus";
+import { httpPost } from "@/utils/http";
+import { validateEmail, validateMobile } from "@/utils/validate";
 
 const props = defineProps({
   show: Boolean,
@@ -77,23 +74,23 @@ const props = defineProps({
 });
 
 const showDialog = computed(() => {
-  return props.show
-})
+  return props.show;
+});
 
-const title = ref('重置密码')
+const title = ref("重置密码");
 const form = ref({
-  mobile: '',
-  email: '',
-  type: 'mobile',
-  code: '',
-  password: '',
-  repass: ''
-})
+  mobile: "",
+  email: "",
+  type: "mobile",
+  code: "",
+  password: "",
+  repass: ""
+});
 
-const emits = defineEmits(['hide']);
+const emits = defineEmits(["hide"]);
 
 const save = () => {
-  if (form.value.code === '') {
+  if (form.value.code === "") {
     return ElMessage.error("请输入验证码");
   }
   if (form.value.password.length < 8) {
@@ -103,18 +100,22 @@ const save = () => {
     return ElMessage.error("两次输入密码不一致");
   }
 
-  httpPost('/api/user/resetPass', form.value).then(() => {
-    ElMessage.success({
-      message: '重置密码成功', duration: 1000, onClose: () => emits('hide', false)
+  httpPost("/api/user/resetPass", form.value)
+    .then(() => {
+      ElMessage.success({
+        message: "重置密码成功",
+        duration: 1000,
+        onClose: () => emits("hide", false)
+      });
     })
-  }).catch(e => {
-    ElMessage.error("重置密码失败：" + e.message);
-  })
-}
+    .catch((e) => {
+      ElMessage.error("重置密码失败：" + e.message);
+    });
+};
 
 const close = function () {
-  emits('hide', false);
-}
+  emits("hide", false);
+};
 </script>
 
 <style lang="stylus">
@@ -140,5 +141,4 @@ const close = function () {
     }
   }
 }
-
-</style>
+</style>

web/src/components/SendMsg.vue

@@ -1,21 +1,28 @@
 <template>
   <el-container class="send-verify-code">
-    <el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="sendMsg" plain>
+    <el-button
+      type="primary"
+      class="btn-normal"
+      :size="props.size"
+      :disabled="!canSend"
+      @click="sendMsg"
+      plain
+    >
       {{ btnText }}
     </el-button>
 
-    <captcha @success="doSendMsg" ref="captchaRef"/>
+    <captcha @success="doSendMsg" ref="captchaRef" />
   </el-container>
 </template>
 
 <script setup>
 // 发送短信验证码组件
-import {ref} from "vue";
-import {validateEmail, validateMobile} from "@/utils/validate";
-import {httpPost} from "@/utils/http";
-import {showMessageError, showMessageOK} from "@/utils/dialog";
+import { ref } from "vue";
+import { validateEmail, validateMobile } from "@/utils/validate";
+import { httpPost } from "@/utils/http";
+import { showMessageError, showMessageOK } from "@/utils/dialog";
 import Captcha from "@/components/Captcha.vue";
-import {getSystemInfo} from "@/store/cache";
+import { getSystemInfo } from "@/store/cache";
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -23,58 +30,65 @@ const props = defineProps({
   size: String,
   type: {
     type: String,
-    default: 'mobile'
+    default: "mobile"
   }
 });
-const btnText = ref('发送验证码')
-const canSend = ref(true)
-const captchaRef = ref(null)
-const enableVerify = ref(false)
+const btnText = ref("发送验证码");
+const canSend = ref(true);
+const captchaRef = ref(null);
+const enableVerify = ref(false);
 
-getSystemInfo().then(res => {
-  enableVerify.value = res.data['enabled_verify']
-})
+getSystemInfo().then((res) => {
+  enableVerify.value = res.data["enabled_verify"];
+});
 
 const sendMsg = () => {
-  if (!validateMobile(props.receiver) && props.type === 'mobile') {
-    return showMessageError("请输入合法的手机号")
+  if (!validateMobile(props.receiver) && props.type === "mobile") {
+    return showMessageError("请输入合法的手机号");
   }
-  if (!validateEmail(props.receiver) && props.type === 'email') {
-    return showMessageError("请输入合法的邮箱地址")
+  if (!validateEmail(props.receiver) && props.type === "email") {
+    return showMessageError("请输入合法的邮箱地址");
   }
-  
+
   if (enableVerify.value) {
-    captchaRef.value.loadCaptcha()
+    captchaRef.value.loadCaptcha();
   } else {
-    doSendMsg({})
+    doSendMsg({});
   }
-}
+};
 
 const doSendMsg = (data) => {
   if (!canSend.value) {
-    return
+    return;
   }
 
-  canSend.value = false
-  httpPost('/api/sms/code', {receiver: props.receiver, key: data.key, dots: data.dots, x:data.x}).then(() => {
-    showMessageOK('验证码发送成功')
-    let time = 60
-    btnText.value = time
-    const handler = setInterval(() => {
-      time = time - 1
-      if (time <= 0) {
-        clearInterval(handler)
-        btnText.value = '重新发送'
-        canSend.value = true
-      } else {
-        btnText.value = time
-      }
-    }, 1000)
-  }).catch(e => {
-    canSend.value = true
-    showMessageError('验证码发送失败：' + e.message)
+  canSend.value = false;
+  httpPost("/api/sms/code", {
+    receiver: props.receiver,
+    key: data.key,
+    dots: data.dots,
+    x: data.x
   })
-}
+    .then(() => {
+      showMessageOK("验证码发送成功");
+      let time = 60;
+      btnText.value = time;
+      const handler = setInterval(() => {
+        time = time - 1;
+        if (time <= 0) {
+          clearInterval(handler);
+          btnText.value = "重新发送";
+          canSend.value = true;
+        } else {
+          btnText.value = time;
+        }
+      }, 1000);
+    })
+    .catch((e) => {
+      canSend.value = true;
+      showMessageError("验证码发送失败：" + e.message);
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -84,4 +98,4 @@ const doSendMsg = (data) => {
     width: 100%;
   }
 }
-</style>
+</style>

web/src/components/ThemeChange.vue

@@ -27,18 +27,19 @@ onMounted(() => {
 <style lang="stylus" scoped>
 @import '@/assets/iconfont/iconfont.css'
 .theme-box{
+  z-index :111
   position: fixed;
   right: 40px;
   bottom: 262px;
   cursor: pointer;
-  background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 50%;
   width 35px;
   height: 35px;
   line-height: 35px;
   text-align: center;
-  background-color: rgb(146, 147, 148);
+  // background-color: rgb(146, 147, 148);
+  background: linear-gradient(135deg, rgba(134, 140, 255, 1) 0%, rgba(67, 24, 255, 1) 100%);
 
   transition: all 0.3s ease;
   &:hover{