From accd569fba6187b678d88a9e17416b222542259c Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Fri, 25 Nov 2022 22:14:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=94=A5=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Theme/index.vue           |  7 +++++-
 src/layout/Header/index.scss             |  3 +++
 src/router/modules/functionPage.ts       |  4 ++--
 src/utils/element.ts                     | 18 ++++++++++++++++
 src/views/login/components/LoginForm.vue | 27 ++++++++++++------------
 5 files changed, 43 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/element.ts

diff --git a/src/components/Theme/index.vue b/src/components/Theme/index.vue
index 7b4910a..b6df865 100644
--- a/src/components/Theme/index.vue
+++ b/src/components/Theme/index.vue
@@ -64,11 +64,13 @@
 
 <script lang="ts" setup>
   import {computed, ref} from 'vue'
-  import SwitchDark from '@/components/SwitchDark/index.vue'
   import {ElMessage} from "element-plus";
+
+  import SwitchDark from '@/components/SwitchDark/index.vue'
   import {PRIMARY_COLOR} from "@/config/index";
   import {useSettingStore} from "@/store/modules/setting"
   import {getDarkColor,getLightColor} from '@/utils/index'
+
   const SettingStore = useSettingStore()
   const layout = ref(SettingStore.themeConfig.mode)
   const showTag = ref(SettingStore.themeConfig.showTag)
@@ -103,9 +105,12 @@
         return
     }
   }
+
+  // 进行配置
   const changeSwitch = (key,val) => {
     SettingStore.setThemeConfig({key, val})
   }
+
   // 修改主题颜色
   const changePrimary = (val)=>{
     if (!val) {
diff --git a/src/layout/Header/index.scss b/src/layout/Header/index.scss
index 24b3602..348f1a6 100644
--- a/src/layout/Header/index.scss
+++ b/src/layout/Header/index.scss
@@ -61,6 +61,9 @@
   .el-menu{
     overflow: hidden;
   }
+  :deep(.el-menu-item){
+    height: 100% !important;
+  }
   .tool-bar-right{
     display: flex;
     justify-content: flex-end;
diff --git a/src/router/modules/functionPage.ts b/src/router/modules/functionPage.ts
index 66d16d1..8977c48 100644
--- a/src/router/modules/functionPage.ts
+++ b/src/router/modules/functionPage.ts
@@ -23,13 +23,13 @@ const functionPageRouter = [{
             path: '404',
             component: () => import('@/views/errorPages/404.vue'),
             name: 'function-404',
-            meta: { title: '404', keepAlive: true , icon: 'MenuIcon'}
+            meta: { title: '404 页面', keepAlive: true , icon: 'MenuIcon'}
         },
         {
             path: '403',
             component: () => import('@/views/errorPages/403.vue'),
             name: 'function-403',
-            meta: { title: '403', keepAlive: true , icon: 'MenuIcon'}
+            meta: { title: '403 页面', keepAlive: true , icon: 'MenuIcon'}
         },
     ]
 }]
diff --git a/src/utils/element.ts b/src/utils/element.ts
new file mode 100644
index 0000000..61de925
--- /dev/null
+++ b/src/utils/element.ts
@@ -0,0 +1,18 @@
+import { ElLoading } from 'element-plus'
+import {
+    Loading
+} from '@element-plus/icons-vue'
+let loading = null
+
+export const openLoading = (options)=>{
+    const text = options.text||'加载中'
+    loading = ElLoading.service({
+        lock: true,
+        text: text,
+        spinner:Loading,
+        background: 'rgba(0, 0, 0, 0.7)',
+    })
+}
+export const closeLoading = () = {
+    loading&&loading()
+}
diff --git a/src/views/login/components/LoginForm.vue b/src/views/login/components/LoginForm.vue
index 4675e46..225f8e4 100644
--- a/src/views/login/components/LoginForm.vue
+++ b/src/views/login/components/LoginForm.vue
@@ -3,7 +3,6 @@
       ref="ruleFormRef"
       :model="ruleForm"
       :rules="rules"
-      label-width="0"
   >
     <el-form-item label="" prop="username">
       <el-input
@@ -18,6 +17,7 @@
         </template>
       </el-input>
     </el-form-item>
+
     <el-form-item label="" prop="password">
       <el-input
           placeholder="请输入密码"
@@ -30,12 +30,13 @@
           <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>
+          <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"
@@ -54,29 +55,29 @@ 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 ruleFormRef = ref<FormInstance>()
 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: 'vue-admin-perfect',
+  username: 'vue-admin',
   password: '123456',
 })
 
+// 显示密码图标
 const showPwd = () => {
-  if (passwordType.value === 'password') {
-    passwordType.value = ''
-  } else {
-    passwordType.value = 'password'
-  }
+  passwordType.value = passwordType.value === 'password'?'':'password'
 }
+
 const submitForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.validate((valid) => {
@@ -84,7 +85,7 @@ const submitForm = (formEl: FormInstance | undefined) => {
       loading.value = true
       // 登录
       setTimeout(async ()=>{
-        await UserStore.login( ruleForm)
+        await UserStore.login(ruleForm)
         await router.push({
           path: '/',
         })