'优化登陆页面'

src/views/login/index.vue

@@ -1,85 +1,35 @@
 <template>
-  <div class="login-container">
+  <div class="login-page">
-    <el-form
+    <div class="login-card">
-      ref="loginFormRef"
+      <div class="login-card__header">
-      :model="loginForm"
+        <h1 class="login-card__title"> <img src="http://localhost:3078/src/assets/logo.png" alt="" style="margin-right: 10px;"> 皮肤检测仪管理平台</h1>
-      :rules="loginRules"
-      class="login-form"
-      auto-complete="on"
-      label-position="left"
-    >
-      <div class="title-container">
-        <h3 class="title">Anjie - {{ $t('login.title') }}</h3>
-        <!-- <lang-select class="set-language" /> -->
       </div>
 
-      <el-form-item prop="name">
+      <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="off"
-        <span class="svg-container">
+        label-position="top" @submit.prevent>
-        </span>
+        <el-form-item prop="username" :label="$t('login.username')">
-        <el-input
+          <el-input v-model="loginForm.username" :placeholder="$t('login.username')" name="username" type="text"
-          ref="name"
+            tabindex="1" :prefix-icon="User" autocomplete="off" maxlength="20" size="large" clearable />
-          v-model="loginForm.username"
-          :placeholder="$t('login.username')"
-          name="name"
-          type="text"
-          tabindex="1"
-          :prefix-icon="User"
-          autocomplete="off"
-          maxlength="20"
-        />
-      </el-form-item>
-
-      <el-tooltip
-        :disabled="capslockTooltipDisabled"
-        content="Caps lock is On"
-        placement="right"
-      >
-        <el-form-item prop="pwd">
-          <span class="svg-container">
-          </span>
-          <el-input
-            ref="passwordRef"
-            :key="passwordType"
-            v-model="loginForm.password"
-            :type="passwordType"
-            placeholder="Password"
-            name="pwd"
-            :prefix-icon="Lock"
-            tabindex="2"
-            autocomplete="new-password"
-            @keyup="checkCapslock"
-            @blur="capslockTooltipDisabled = true"
-            @keyup.enter="handleLogin"
-            show-password
-            maxlength="20"
-          />
-          <span class="show-pwd" @click="showPwd">
-          </span>
         </el-form-item>
-      </el-tooltip>
-        <div>
-          <el-text class="mx-1">默认账号:</el-text>
-        <el-text class="mx-1" type="primary">admin</el-text>
-        </div>
-        <div>
-          <el-text class="mx-1">默认密码:</el-text>
-          <el-text class="mx-1" type="primary">123456</el-text>
-        </div>
-        <div>
-          此环境为demo环境，请不要修改admin账号的密码
-        </div>
-      <el-button
-        size="default"
-        :loading="loading"
-        type="primary"
-        style="width: 100%; margin-bottom: 30px"
-        @click.prevent="handleLogin"
-        >{{ $t('login.login') }}
-      </el-button>
 
-    </el-form>
+        <el-tooltip :disabled="capslockTooltipDisabled" content="大写锁定已开启" placement="right">
+          <el-form-item prop="password" :label="$t('login.password')">
+            <el-input ref="passwordRef" v-model="loginForm.password" type="password" :placeholder="$t('login.password')"
+              name="password" :prefix-icon="Lock" tabindex="2" autocomplete="new-password" show-password maxlength="20"
+              size="large" @keyup="checkCapslock" @blur="capslockTooltipDisabled = true" @keyup.enter="handleLogin" />
+          </el-form-item>
+        </el-tooltip>
 
-    <div v-if="showCopyright == true" class="copyright">
+
+
+        <el-button class="login-submit" size="large" type="primary" :loading="loading" native-type="submit"
+          @click.prevent="handleLogin">
+          {{ $t('login.login') }}
+        </el-button>
+      </el-form>
+    </div>
+
+    <div v-if="showCopyright" class="login-footer">
       <p>{{ $t('login.copyright') }}</p>
       <p>{{ $t('login.icp') }}</p>
     </div>
@@ -87,51 +37,49 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, toRefs, watch, nextTick } from 'vue';
+import { onMounted, reactive, ref, toRefs, watch } from 'vue';
 
-// 组件依赖
+import { ElForm } from 'element-plus';
-import { ElForm, ElInput } from 'element-plus';
 import router from '@/router';
-import { User, Lock} from '@element-plus/icons-vue';
+import { User, Lock } from '@element-plus/icons-vue';
 
-// 状态管理依赖
 import useStore from '@/store';
 
-// API依赖
+import { useRoute, type LocationQueryRaw } from 'vue-router';
-import { useRoute } from 'vue-router';
 import { LoginFormData } from '@/types/api/system/login';
 
-const { user} = useStore();
+const { user } = useStore();
 const route = useRoute();
 
-const loginFormRef = ref(ElForm);
+const loginFormRef = ref<InstanceType<typeof ElForm>>();
-const passwordRef = ref(ElInput);
+const passwordRef = ref();
 
 const state = reactive({
   redirect: '',
   loginForm: {
-    username: 'develop',
+    username: '',
-    password: '123456',
+    password: '',
   } as LoginFormData,
   loginRules: {
-    username: [{ required: true, trigger: 'blur' }],
+    username: [
+      { required: true, message: '请输入用户名', trigger: 'blur' },
+    ],
     password: [
-      { required: true, trigger: 'blur', validator: validatePassword },
+      { required: true, validator: validatePassword, trigger: 'blur' },
     ],
   },
   loading: false,
-  passwordType: 'password',
-  captchaBase64: '',
-  // 大写提示禁用
   capslockTooltipDisabled: true,
-  otherQuery: {},
+  otherQuery: {} as LocationQueryRaw,
   clientHeight: document.documentElement.clientHeight,
   showCopyright: true,
 });
 
-function validatePassword(rule: any, value: any, callback: any) {
+function validatePassword(_rule: unknown, value: string, callback: (e?: Error) => void) {
-  if (value.length < 6) {
+  if (!value) {
-    callback(new Error('The password can not be less than 6 digits'));
+    callback(new Error('请输入密码'));
+  } else if (value.length < 6) {
+    callback(new Error('密码长度不能少于 6 位'));
   } else {
     callback();
   }
@@ -141,44 +89,31 @@ const {
   loginForm,
   loginRules,
   loading,
-  passwordType,
   capslockTooltipDisabled,
   showCopyright,
 } = toRefs(state);
 
-function checkCapslock(e: any) {
+function checkCapslock(e: KeyboardEvent) {
   const { key } = e;
   state.capslockTooltipDisabled =
-    key && key.length === 1 && key >= 'A' && key <= 'Z';
+    !(key && key.length === 1 && key >= 'A' && key <= 'Z');
-}
-
-function showPwd() {
-  if (state.passwordType === 'password') {
-    state.passwordType = '';
-  } else {
-    state.passwordType = 'password';
-  }
-  nextTick(() => {
-    passwordRef.value.focus();
-  });
 }
 
 function handleLogin() {
-  loginFormRef.value.validate((valid: boolean) => {
+  loginFormRef.value?.validate((valid: boolean) => {
-    if (valid) {
+    if (!valid) {
-      state.loading = true;
+      return;
-      user
-        .login(state.loginForm)
-        .then(() => {
-          router.push({ path: state.redirect || '/', query: state.otherQuery });
-          state.loading = false;
-        })
-        .catch(() => {
-          state.loading = false;
-        });
-    } else {
-      return false;
     }
+    state.loading = true;
+    user
+      .login(state.loginForm)
+      .then(() => {
+        router.push({ path: state.redirect || '/', query: state.otherQuery });
+        state.loading = false;
+      })
+      .catch(() => {
+        state.loading = false;
+      });
   });
 }
 
@@ -187,22 +122,20 @@ watch(
   () => {
     const query = route.query;
     if (query) {
-      state.redirect = query.redirect as string;
+      state.redirect = (query.redirect as string) || '';
       state.otherQuery = getOtherQuery(query);
     }
   },
-  {
+  { immediate: true }
-    immediate: true,
-  }
 );
 
-function getOtherQuery(query: any) {
+function getOtherQuery(query: LocationQueryRaw): LocationQueryRaw {
-  return Object.keys(query).reduce((acc: any, cur: any) => {
+  return Object.keys(query).reduce((acc: LocationQueryRaw, cur: string) => {
     if (cur !== 'redirect') {
       acc[cur] = query[cur];
     }
     return acc;
-  }, {});
+  }, {} as LocationQueryRaw);
 }
 
 onMounted(() => {
@@ -216,150 +149,142 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
-/* 修复input 背景不协调 和光标变色 */
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-$bg: #283443;
-$light_gray: #fff;
-$cursor: #fff;
-
-/* reset element-ui css */
-.login-container {
-  .title-container {
-    position: relative;
-
-    .title {
-      font-size: 26px;
-      color: $light_gray;
-      margin: 0px auto 40px auto;
-      text-align: center;
-      font-weight: bold;
-    }
-
-    .set-language {
-      color: #fff;
-      position: absolute;
-      top: 3px;
-      font-size: 18px;
-      right: 0px;
-      cursor: pointer;
-    }
-  }
-
-  .el-input {
-    display: inline-block;
-    height: 36px;
-    width: 85%;
-    .el-input__wrapper {
-      padding: 0;
-      background: transparent;
-      box-shadow: none;
-      width: 100%;
-      .el-input__inner {
-        background: transparent;
-        border: 0px;
-        -webkit-appearance: none;
-        border-radius: 0px;
-        color: $light_gray;
-        height: 36px;
-        caret-color: $cursor;
-
-        &:-webkit-autofill {
-          box-shadow: 0 0 0px 1000px $bg inset !important;
-          -webkit-text-fill-color: $cursor !important;
-        }
-      }
-    }
-  }
-
-  .el-input__inner {
-    &:hover {
-      border-color: var(--el-input-hover-border, var(--el-border-color-hover));
-      box-shadow: none;
-    }
-
-    box-shadow: none;
-  }
-
-  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    color: #454545;
-  }
-
-  .copyright {
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    font-size: 12px;
-    text-align: center;
-    color: #cccccc;
-  }
-}
-</style>
-
 <style lang="scss" scoped>
-$bg: #2d3a4b;
+$card-bg: #ffffff;
-$dark_gray: #889aa4;
+$page-bg-top: #e3edf5;
-$light_gray: #eee;
+$page-bg-bottom: #ebf1f6;
+$text-main: #303133;
+$text-secondary: #606266;
 
-.login-container {
+.login-page {
-  min-height: 100%;
+  min-height: 100vh;
   width: 100%;
-  background-color: $bg;
+  display: flex;
-  overflow: hidden;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 20px 80px;
+  box-sizing: border-box;
+  background: linear-gradient(165deg, $page-bg-top 0%, $page-bg-bottom 45%, #dde8f2 100%);
+  position: relative;
+  overflow: auto;
+}
 
-  .login-form {
+.login-card {
-    position: relative;
+  width: 100%;
-    width: 520px;
+  max-width: 420px;
-    max-width: 100%;
+  padding: 40px 40px 36px;
-    padding: 160px 35px 0;
+  background: $card-bg;
-    margin: 0 auto;
+  border-radius: 16px;
-    overflow: hidden;
+  box-shadow:
+    0 4px 24px rgba(15, 35, 52, 0.08),
+    0 1px 3px rgba(15, 35, 52, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+.login-card__header {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.login-card__title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+  color: $text-main;
+  letter-spacing: 0.02em;
+}
+
+.login-card__subtitle {
+  margin: 10px 0 0;
+  font-size: 14px;
+  color: $text-secondary;
+  font-weight: 400;
+}
+
+.login-form {
+  :deep(.el-form-item__label) {
+    color: $text-secondary;
+    font-size: 13px;
+    margin-bottom: 6px;
   }
 
-  .tips {
+  :deep(.el-input__wrapper) {
-    font-size: 14px;
+    border-radius: 10px;
-    color: #fff;
+    box-shadow: 0 0 0 1px #dcdfe6 inset;
-    margin-bottom: 10px;
+    transition: box-shadow 0.2s ease;
 
-    span {
+    &:hover {
-      &:first-of-type {
+      box-shadow: 0 0 0 1px #c0c4cc inset;
-        margin-right: 16px;
+    }
-      }
+
+    &.is-focus {
+      box-shadow: 0 0 0 1px var(--el-color-primary) inset;
     }
   }
+}
 
-  .svg-container {
+.login-hint {
-    padding: 5px 10px;
+  margin: 8px 0 24px;
-    color: $dark_gray;
+  padding: 12px 14px;
-    vertical-align: middle;
+  font-size: 12px;
-    width: 10px;
+  line-height: 1.6;
-    display: inline-block;
+  color: $text-secondary;
-  }
+  background: #f4f8fc;
+  border-radius: 10px;
+  border: 1px solid #e4ebf2;
 
-  .title-container {
+  p {
-    position: relative;
+    margin: 0 0 6px;
 
-    .title {
+    &:last-child {
-      font-size: 26px;
+      margin-bottom: 0;
-      color: $light_gray;
-      margin: 0px auto 40px auto;
-      text-align: center;
-      font-weight: bold;
     }
   }
+}
 
-  .show-pwd {
+.login-hint__label {
-    position: absolute;
+  color: #909399;
-    right: 10px;
+  margin-right: 6px;
-    top: 7px;
+}
-    font-size: 16px;
+
-    color: $dark_gray;
+.login-hint__value {
-    cursor: pointer;
+  color: var(--el-color-primary);
-    user-select: none;
+  font-weight: 500;
+}
+
+.login-hint__note {
+  margin-top: 8px !important;
+  padding-top: 8px;
+  border-top: 1px dashed #dce4ed;
+  color: #909399;
+  font-size: 11px;
+}
+
+.login-submit {
+  width: 100%;
+  height: 44px;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 10px;
+  letter-spacing: 0.12em;
+}
+
+.login-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 16px;
+  text-align: center;
+  font-size: 12px;
+  color: #909399;
+
+  p {
+    margin: 4px 0;
   }
 }
 </style>