refactor 📌 登录代码进行重构

package-lock.json

@@ -25,6 +25,7 @@
         "file-saver": "^2.0.5",
         "fuse.js": "^6.6.2",
         "jszip": "^3.9.1",
+        "lottie-web": "^5.9.6",
         "mavon-editor": "^2.10.4",
         "md-editor-v3": "^1.11.3",
         "nprogress": "^0.2.0",
@@ -4115,6 +4116,11 @@
       "resolved": "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
     },
+    "node_modules/lottie-web": {
+      "version": "5.9.6",
+      "resolved": "https://r.cnpmjs.org/lottie-web/-/lottie-web-5.9.6.tgz",
+      "integrity": "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA=="
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://r2.cnpmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -10469,6 +10475,11 @@
       "resolved": "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
     },
+    "lottie-web": {
+      "version": "5.9.6",
+      "resolved": "https://r.cnpmjs.org/lottie-web/-/lottie-web-5.9.6.tgz",
+      "integrity": "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA=="
+    },
     "lower-case": {
       "version": "2.0.2",
       "resolved": "https://r2.cnpmjs.org/lower-case/-/lower-case-2.0.2.tgz",

src/components/SwitchDark/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-switch
+      @change="switchDark"
+      inline-prompt
+      v-model="themeConfig.isDark"
+      :active-icon="Sunny"
+      :inactive-icon="Moon"
+  />
+</template>
+
+<script setup lang="ts" name="switchDark">
+import { Sunny, Moon } from "@element-plus/icons-vue";
+import {computed, ref} from "vue";
+import {useSettingStore} from "@/store/modules/setting"
+
+const SettingStore = useSettingStore()
+// 设置信息
+const themeConfig = computed(()=>SettingStore.themeConfig)
+
+// 切换暗黑模式
+const switchDark = () => {
+  const body = document.documentElement as HTMLElement;
+  if (themeConfig.value.isDark) body.setAttribute("class", "dark");
+  else body.setAttribute("class", "");
+};
+</script>

src/components/Theme/components/switchDark.vue

@@ -1,26 +0,0 @@
-<template>
-  <el-switch
-      @change="switchDark"
-      inline-prompt
-      v-model="themeConfig.isDark"
-      :active-icon="Sunny"
-      :inactive-icon="Moon"
-  />
-</template>
-
-<script setup lang="ts" name="switchDark">
-  import { Sunny, Moon } from "@element-plus/icons-vue";
-  import {computed, ref} from "vue";
-  import {useSettingStore} from "@/store/modules/setting"
-
-  const SettingStore = useSettingStore()
-  // 设置信息
-  const themeConfig = computed(()=>SettingStore.themeConfig)
-
-  // 切换暗黑模式
-  const switchDark = () => {
-    const body = document.documentElement as HTMLElement;
-    if (themeConfig.value.isDark) body.setAttribute("class", "dark");
-    else body.setAttribute("class", "");
-  };
-</script>

src/components/Theme/index.vue

@@ -64,7 +64,7 @@
 
 <script lang="ts" setup>
   import {computed, ref} from 'vue'
-  import SwitchDark from './components/switchDark.vue'
+  import SwitchDark from '@/components/SwitchDark/index.vue'
   import {ElMessage} from "element-plus";
   import {PRIMARY_COLOR} from "@/config/index";
   import {useSettingStore} from "@/store/modules/setting"

src/styles/element-dark.scss

@@ -132,8 +132,6 @@ html.dark {
     box-sizing: border-box;
     border:var(--zb-border-light);
   }
-
-  // el-drawer__header
   .el-drawer__header {
     span {
       color: var(--el-text-color-primary) !important;
@@ -177,4 +175,18 @@ html.dark {
     color: white!important;
   }
 
+  .login-container {
+    background-color: var(--el-fill-color-extra-light) !important;
+    .login-box {
+      background-color: var(--el-mask-color) !important;
+      .login-form {
+        background-color: var(--el-bg-color) !important;
+        box-shadow: var(--geeker-login-shadow-light) !important;
+        .title {
+          color: var(--el-text-color-primary) !important;
+        }
+      }
+    }
+  }
+
 }

src/utils/validate.ts

@@ -164,6 +164,8 @@ export function verifyEmail(val:string) {
   return regx.test(val)
 }
 
+
+
 /**
  * 验证校验器函数封装
  * @param verifyPhone 验证函数

src/views/home/index.scss

@@ -0,0 +1,77 @@
+.personal {
+  .name {
+    margin-top: 15px;
+    font-size: 24px;
+    font-weight: 500;
+    color: rgb(38, 38, 38);
+  }
+  .description {
+    margin-top: 8px;
+  }
+  .list {
+    margin-top: 18px;
+    line-height: 30px;
+    text-align: left;
+  }
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text {
+  font-size: 14px;
+}
+.grid-content {
+  display: flex;
+  .left {
+    width: 40%;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #2d8cf0;
+  }
+  .right {
+    display: flex;
+    flex-direction: column;
+    padding-left: 20px;
+    justify-content: center;
+    .h2{
+      font-size: 24px;
+      margin-bottom: 10px;
+    }
+  }
+}
+.custom {
+  ::v-deep(.el-card__body) {
+    padding: 0;
+  }
+}
+.item {
+  margin-bottom: 18px;
+}
+
+.box-card {
+  //height: 100%;
+  position: relative;
+  margin-bottom: 10px;
+  width: 100%;
+  .wechat{
+    position: absolute;
+    width: 150px;
+    right: 0;
+    top: 0;
+  }
+}
+.card-item {
+  background: linear-gradient(50deg, #1890ff, #77e19d);
+}
+.home-container{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 16px;
+  box-sizing: border-box;
+}

src/views/home/index.vue

@@ -172,81 +172,5 @@
 </script>
 
 <style scoped lang="scss">
-  .personal {
-    .name {
-      margin-top: 15px;
-      font-size: 24px;
-      font-weight: 500;
-      color: rgb(38, 38, 38);
-    }
-    .description {
-      margin-top: 8px;
-    }
-    .list {
-      margin-top: 18px;
-      line-height: 30px;
-      text-align: left;
-    }
-  }
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .text {
-    font-size: 14px;
-  }
-  .grid-content {
-    display: flex;
-    .left {
-      width: 40%;
-      height: 100px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: #2d8cf0;
-    }
-    .right {
-      display: flex;
-      flex-direction: column;
-      padding-left: 20px;
-      justify-content: center;
-      .h2{
-        font-size: 24px;
-        margin-bottom: 10px;
-      }
-    }
-  }
-  .custom {
-    ::v-deep(.el-card__body) {
-      padding: 0;
-    }
-  }
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .box-card {
-    //height: 100%;
-    position: relative;
-    margin-bottom: 10px;
-    width: 100%;
-    .wechat{
-      position: absolute;
-      width: 150px;
-      right: 0;
-      top: 0;
-    }
-  }
-  .card-item {
-    background: linear-gradient(50deg, #1890ff, #77e19d);
-  }
-  .home-container{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    padding: 16px;
-    box-sizing: border-box;
-  }
+@import "./index";
 </style>

src/views/login/components/LoginForm.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="0"
+  >
+    <el-form-item label="" prop="username">
+      <el-input
+          placeholder="请输入用户名"
+          autoComplete="on"
+          style="position: relative"
+          v-model="ruleForm.username"
+          @keyup.enter.native="submitForm(ruleFormRef)"
+      >
+        <template #prefix>
+          <el-icon class="el-input__icon"><UserFilled /></el-icon>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item label="" prop="password">
+      <el-input
+          placeholder="请输入密码"
+          autoComplete="on"
+          @keyup.enter.native="submitForm(ruleFormRef)"
+          v-model="ruleForm.password"
+          :type="passwordType"
+      >
+        <template #prefix>
+          <el-icon class="el-input__icon"><GoodsFilled /></el-icon>
+        </template>
+        <template #suffix>
+          <div class="show-pwd" @click="showPwd"
+          ><svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+          /></div>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item style="width: 100%">
+      <el-button
+          :loading="loading"
+          class="login-btn"
+          type="primary"
+          @click="submitForm(ruleFormRef)"
+      >登录</el-button
+      >
+    </el-form-item>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { ElNotification } from "element-plus";
+import { useRouter } from 'vue-router'
+import {useUserStore} from "@/store/modules/user"
+import {getTimeState} from '@/utils/index'
+const ruleFormRef = ref<FormInstance>()
+const router = useRouter()
+const UserStore = useUserStore()
+
+const passwordType = ref('password')
+const loading = ref(false)
+const rules = reactive({
+  password: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  username: [{ required: true, message: "请输入密码", trigger: "blur" }],
+})
+// 表单数据
+const ruleForm = reactive({
+  username: 'admin',
+  password: '123456',
+})
+
+const showPwd = () => {
+  if (passwordType.value === 'password') {
+    passwordType.value = ''
+  } else {
+    passwordType.value = 'password'
+  }
+}
+const submitForm = (formEl: FormInstance | undefined) => {
+  loading.value = true
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      // 登录
+      setTimeout(async ()=>{
+        await UserStore.login( ruleForm)
+        await router.push({
+          path: '/',
+        })
+        ElNotification({
+          title: getTimeState(),
+          message: "欢迎登录 Vue Admin Perfect",
+          type: "success",
+          duration: 3000
+        });
+        loading.value = true
+      },1000)
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../index.scss";
+</style>

src/views/login/index.scss

@@ -1,19 +1,49 @@
 $dark_gray: #889aa4;
-:deep(input) {
-  background: transparent;
-  border: 0;
-  color: white;
-  -webkit-appearance: none;
-  border-radius: 0;
-  padding: 12px 5px 12px 15px;
-  height: 47px;
-}
-::v-deep(.el-input__wrapper){
-  background: none;
-}
 .login-box {
-  width: 80%;
-  max-width: 500px;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: white;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .login-left{
+    width: 50%;
+    img{
+      width: 100%;
+      max-width: 900px;
+    }
+  }
+  .login-form{
+    max-width: 480px;
+    width: 50%;
+    padding: 40px;
+    border-radius: 10px;
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    box-sizing: border-box;
+  }
+  .login-title{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 30px;
+    .title{
+      margin: 0;
+      font-size: 30px;
+      white-space: nowrap;
+    }
+    .icon{
+      width: 60px;
+    }
+  }
+  ::v-deep(.el-input__inner){
+    height: 40px;
+  }
+}
+.login-btn{
+  margin-top: 20px;
+  width: 100%; height: 47px
 }
 .show-pwd {
   position: absolute;
@@ -23,25 +53,41 @@ $dark_gray: #889aa4;
   color: $dark_gray;
   cursor: pointer;
   user-select: none;
+  ::v-deep(.svg-icon){
+    vertical-align: 0;
+  }
 }
 .login-container {
-  background-color: #2d3a4b;
-  min-height: 100%;
+  background-color: #f0f2f5;
+  height: 100%;
   width: 100%;
   overflow: hidden;
-  background-size: cover;
   display: flex;
   justify-content: center;
   align-items: center;
-  .login-box-content-right {
-    position: relative;
-    display: inline-block;
-    margin-left: 10px;
-    width: 100%;
-    height: 370px;
-    overflow: hidden;
-    .login-form {
-      margin-top: 20px;
+  padding: 25px 25px;
+  box-sizing: border-box;
+}
+.login-dark{
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+
+
+@media (max-width: 850px){
+  .login-container{
+    padding: 10px;
   }
+  .login-box{
+    .login-form{
+      width: 88%;
+      .title{
+        font-size: 20px;
+      }
+    }
+  }
+  .login-left{
+    display: none;
   }
 }

src/views/login/index.vue

@@ -1,133 +1,24 @@
 <template>
   <div class="login-container">
     <div class="login-box">
-      <!--登录功能-->
-      <div style="color: white; text-align: center; margin-bottom: 15px"
-        >登录系统-密码账号随便填 admin admin</div
-      >
-      <div class="login-box-content-right">
-        <!--login-Form-->
-        <el-form
-          ref="ruleFormRef"
-          :model="ruleForm"
-          :rules="rules"
-          label-width="0"
-        >
-          <el-form-item label="" prop="username">
-            <el-input
-              placeholder="请输入用户名"
-              autoComplete="on"
-              style="position: relative"
-              v-model="ruleForm.username"
-              type="text"
-              @keyup.enter.native="submitForm(ruleFormRef)"
-            >
-              <template #prefix>
-                <el-icon class="el-input__icon"><UserFilled /></el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-          <el-form-item label="" prop="password">
-            <el-input
-              placeholder="请输入密码"
-              autoComplete="on"
-              @keyup.enter.native="submitForm(ruleFormRef)"
-              v-model="ruleForm.password"
-              :type="passwordType"
-            >
-              <template #prefix>
-                <el-icon class="el-input__icon"><GoodsFilled /></el-icon>
-              </template>
-              <template #suffix>
-                <div class="show-pwd" @click="showPwd"
-                  ><svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
-                /></div>
-              </template>
-            </el-input>
-          </el-form-item>
-          <el-form-item style="width: 100%">
-            <el-button
-              type="primary"
-              @click="submitForm(ruleFormRef)"
-              style="width: 100%; height: 47px"
-              >登录</el-button
-            >
-          </el-form-item>
-        </el-form>
+      <SwitchDark class="login-dark"/>
+      <div class="login-left">
+        <img src="@/assets/image/login/side-logo.png" >
+      </div>
+      <div class="login-form">
+        <div class="login-title">
+          <img class="icon" src="@/assets/logo.png" alt="logo" />
+          <h2 class="title">Vue-Admin-Perfect</h2>
+        </div>
+        <LoginForm/>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue'
-  import type { FormInstance } from 'element-plus'
-  import { ElNotification } from "element-plus";
-  import { useRouter } from 'vue-router'
-  import {useUserStore} from "@/store/modules/user"
-  import { ElMessage } from 'element-plus'
-  import {getTimeState} from '@/utils/index'
-
-  const ruleFormRef = ref<FormInstance>()
-  const router = useRouter()
-  const UserStore = useUserStore()
-
-  // 自定义校验规则
-  const validateUsername = (rule: any, value: any, callback: any) => {
-    if (!value) {
-      return callback(new Error('请输入用户名'))
-    }
-    callback()
-  }
-  const validatePass = (rule: any, value: any, callback: any) => {
-    if (value === '') {
-      callback(new Error('请输入密码'))
-    } else {
-      callback()
-    }
-  }
-  const rules = reactive({
-    password: [{ validator: validatePass, trigger: 'blur' }],
-    username: [{ validator: validateUsername, trigger: 'blur' }],
-  })
-
-  // 表单数据
-  const ruleForm = reactive({
-    username: 'admin',
-    password: '123456',
-  })
-
-  const passwordType = ref('password')
-
-  const showPwd = () => {
-    if (passwordType.value === 'password') {
-      passwordType.value = ''
-    } else {
-      passwordType.value = 'password'
-    }
-  }
-
-  const submitForm = (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-    formEl.validate(async (valid) => {
-      if (valid) {
-        // 登录
-        await UserStore.login( ruleForm)
-        router.push({
-          path: '/',
-        })
-        ElNotification({
-          title: getTimeState(),
-          message: "欢迎登录 Vue Admin Perfect",
-          type: "success",
-          duration: 3000
-        });
-      } else {
-        console.log('error submit!')
-        return false
-      }
-    })
-  }
+  import LoginForm from './components/LoginForm.vue'
+  import SwitchDark from '@/components/SwitchDark/index.vue'
 </script>
 <style lang="scss" scoped>
   @import "./index";

yarn.lock

@@ -2562,6 +2562,11 @@
   "resolved" "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz"
   "version" "4.17.21"
 
+"lottie-web@^5.9.6":
+  "integrity" "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA=="
+  "resolved" "https://r.cnpmjs.org/lottie-web/-/lottie-web-5.9.6.tgz"
+  "version" "5.9.6"
+
 "lower-case@^2.0.2":
   "integrity" "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg=="
   "resolved" "https://r2.cnpmjs.org/lower-case/-/lower-case-2.0.2.tgz"