fix: 重构login页

src/views/login/login.vue

@@ -1,35 +1,39 @@
 <template>
-  <div class="login-container" :style="{ backgroundImage: `url(${configs.loginBg})` }">
+  <div class="login-container" :style="{ backgroundImage: `url(${configs.loginBg || '/web-common-resource/img/bg_login.png'})` }">
-    <div class="login-logo">
+    <div class="login-content">
-      <img :src="configs.loginLogo" alt="" />
+      <!-- 左侧蓝色面板 -->
+      <div class="left-panel">
+        <span class="title-text">多云管理平台</span>
       </div>
-    <div class="login-center">
+
-      <div class="desc-content">
+      <!-- 右侧白色登录表单 -->
-        <span class="desc-title">{{ configs.promotionalTitle }}</span>
+      <div class="right-panel">
-        <span class="desc-remark">{{ configs.promotionalContent }}</span>
+        <div class="right-panel-content">
-      </div>
+          <div class="login-title">欢迎登录</div>
-      <el-form :model="loginForm" ref="loginFormRef" label-position="left" label-width="0px" class="card-box login-form" @keyup.enter.native="handleLogin" status-icon>
+          <el-form :model="loginForm" ref="loginFormRef" label-position="top" class="login-form" @keyup.enter.native="handleLogin" status-icon>
-        <div class="login-title">账号登录</div>
             <basic-form-item class="login-form-item" prop="account" validate="required" required-message="请输入用户名">
-          <el-input v-model="loginForm.account" autoComplete="on" placeholder="登录账户" prefix-icon="el-icon-user"> </el-input>
+              <el-input v-model="loginForm.account" autoComplete="on" placeholder="登录账户" prefix-icon="el-icon-user" size="large" />
             </basic-form-item>
+
             <el-tooltip v-model="capsTooltip" content="大写锁定已打开" placement="right" manual>
               <basic-form-item class="login-form-item" prop="password" validate="required" required-message="请输入密码">
-            <el-input name="password" prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="密码" show-password @blur="capsTooltip = false" @keyup.native="checkCapslock"> </el-input>
+                <el-input name="password" prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="密码" show-password @blur="capsTooltip = false" @keyup.native="checkCapslock" size="large" />
               </basic-form-item>
             </el-tooltip>
-        <basic-form-item class="login-form-item">
+
-          <div class="operate-region">
+            <div class="form-options">
-            <span class="remember">
+              <div class="remember-password">
                 <el-switch v-model="remember"></el-switch>
                 <span class="m-l-xs">记住密码</span>
-            </span>
-            <a :href="`mailto:${configs.helpInformationLink}`" type="text" class="text-info pull-right help-info" :title="configs.helpInformationContent">{{ configs.helpInformationContent }}</a>
               </div>
-        </basic-form-item>
+              <a :href="`mailto:${configs.helpInformationLink}`" class="help-link">{{ configs.helpInformationContent || '获取帮助' }}</a>
-        <el-button class="login-btn" type="primary" size="medium" :loading="loading" @click="handleLogin"> 登录 </el-button>
+            </div>
+
+            <el-button class="login-btn" type="primary" size="large" :loading="loading" @click="handleLogin">登录</el-button>
           </el-form>
         </div>
+      </div>
+    </div>
     <div class="copyright-info">{{ configs.copyrightInformation }}</div>
   </div>
 </template>
@@ -40,6 +44,7 @@ import { login } from 'services/system'
 import { setLoginData } from './tools'
 import { reactive, toRefs, ref, computed } from '@vue/composition-api'
 export default {
+  name: 'LoginPage',
   setup(props, context) {
     const state = reactive({
       remember: false,
@@ -118,7 +123,7 @@ export default {
           state.capsTooltip = false
         }
       }
-      if (key === 'CapsLock' && this.capsTooltip === true) {
+      if (key === 'CapsLock' && state.capsTooltip === true) {
         state.capsTooltip = false
       }
     }
@@ -134,98 +139,212 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 .login-container {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  position: relative;
   background: url('/web-common-resource/img/bg_login.png') #2d3a4b no-repeat;
   background-size: cover;
-  .login-logo {
+  .login-content {
-    padding: 5px 40px;
-    img {
-      height: 40px;
-    }
-  }
-  .login-center {
     display: flex;
-    flex: 1;
+    position: absolute;
-    justify-content: space-around;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 1200px;
+    z-index: 1;
     align-items: center;
-    .desc-content {
+    justify-content: center;
-      color: #fff;
+    min-height: 600px;
+
+    // 左侧蓝色面板
+    .left-panel {
+      flex: 1;
+      height: 100%;
+      min-height: 700px;
+      background: rgba(4, 121, 231, 0.463); // 半透明蓝色
       display: flex;
-      flex-direction: column;
+      align-items: center;
-      margin-top: -150x;
+      justify-content: center;
-      width: 600px;
+      // backdrop-filter: blur(1px);
-      .desc-title {
+      padding: 60px 50px;
+
+      .title-text {
+        width: 80%;
+        font-size: 28px;
         font-weight: 700;
-        font-style: normal;
-        font-size: 38px;
-        color: #ffffff;
-        margin-bottom: 56px;
-      }
-      .desc-remark {
-        line-height: 40px;
-        font-weight: 400;
-        font-style: normal;
-        font-size: 22px;
         color: #ffffff;
+        position: absolute;
+        top: 5%;
+        left: 5%;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       }
     }
-    .login-form {
+
-      box-sizing: border-box;
+    // 右侧白色面板
-      width: 462px;
+    .right-panel {
-      padding: 50px 30px;
+      flex: 1;
-      background: #fff;
+      height: 100%;
-      text-align: center;
+      background: #ffffff;
-      font-size: 17px;
-      .login-title {
-        font-size: 32px;
-        color: #333;
-        margin-bottom: 50px;
-      }
-      .operate-region {
       display: flex;
       align-items: center;
-        .remember {
+      justify-content: center;
-          flex: 1;
+      padding: 60px 50px;
+      .right-panel-content {
+        width: 83%;
+        min-height: 580px;
+      }
+      .login-title {
+        font-size: 30px;
+        font-weight: 600;
+        color: #1890ff;
+        text-align: center;
+        margin-bottom: 40px;
         text-align: left;
+        line-height: 130px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       }
-      }
+
-      .login-btn {
+      .login-form {
-        margin-top: 20px;
-        padding: 17px 20px;
         width: 100%;
+        max-width: 400px;
+
+        // 用户类型选择器
+        .user-type-selector {
+          display: flex;
+          margin-bottom: 30px;
+          background: #f5f5f5;
+          border-radius: 8px;
+          padding: 4px;
+          gap: 4px;
+
+          .type-item {
+            flex: 1;
+            text-align: center;
+            padding: 12px 20px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 16px;
+            color: #666;
+            background: transparent;
+
+            &:hover {
+              background: rgba(24, 144, 255, 0.1);
             }
-      .help-info {
+
-        max-width: 130px;
+            &.active {
-        overflow: hidden;
+              background: #595959;
-        text-overflow: ellipsis;
+              color: #ffffff;
-        white-space: nowrap;
+              font-weight: 500;
             }
+          }
+        }
+
         .login-form-item {
-        margin-bottom: 20px;
+          margin-bottom: 24px;
-        ::v-deep {
+
-          .el-input--prefix .el-input__inner {
+          ::v-deep(.el-form-item__label) {
+            padding-bottom: 8px;
+            font-size: 14px;
+            color: #333;
+            font-weight: 500;
+          }
+
+          ::v-deep(.el-input__wrapper) {
+            min-height: 48px;
+            border-radius: 4px;
+
+            .el-input__inner {
+              height: 48px;
+              line-height: 48px;
+              font-size: 14px;
+            }
+
+            &:hover {
+              box-shadow: 0 0 0 1px #40a9ff inset;
+            }
+
+            &.is-focus {
+              box-shadow: 0 0 0 1px #1890ff inset;
+            }
+          }
+
+          ::v-deep(.el-input--prefix .el-input__inner) {
             padding-left: 50px;
           }
-          .el-input__prefix {
+
+          ::v-deep(.el-input__prefix) {
             font-size: 20px;
             padding: 0 10px;
           }
-          .el-input__inner {
+        }
-            height: 60px;
+
-            line-height: 60px;
+        .form-options {
-          }
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 30px;
+
+          .remember-password {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            color: #666;
+
+            .m-l-xs {
+              margin-left: 8px;
+            }
+
+            ::v-deep(.el-switch) {
+              .el-switch__label {
+                font-size: 14px;
+                color: #666;
+              }
+            }
+          }
+
+          .help-link {
+            color: #1890ff;
+            font-size: 14px;
+            text-decoration: none;
+            cursor: pointer;
+
+            &:hover {
+              color: #40a9ff;
+              text-decoration: underline;
+            }
+          }
+        }
+
+        .login-btn {
+          width: 100%;
+          height: 48px;
+          font-size: 16px;
+          font-weight: 500;
+          border-radius: 4px;
         }
       }
     }
   }
+
   .copyright-info {
+    width: 100%;
     padding: 10px 0;
     text-align: center;
     background: rgba(10, 37, 68, 0.6);
     color: #bbbbbb;
+    position: fixed;
+    z-index: 1;
+    font-size: 12px;
+    bottom: 0;
   }
 }
 </style>

src/views/login/loginOld.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="login-container" :style="{ backgroundImage: `url(${configs.loginBg})` }">
+    <div class="login-logo">
+      <img :src="configs.loginLogo" alt="" />
+    </div>
+    <div class="login-center">
+      <div class="desc-content">
+        <span class="desc-title">{{ configs.promotionalTitle }}</span>
+        <span class="desc-remark">{{ configs.promotionalContent }}</span>
+      </div>
+      <el-form :model="loginForm" ref="loginFormRef" label-position="left" label-width="0px" class="card-box login-form" @keyup.enter.native="handleLogin" status-icon>
+        <div class="login-title">账号登录</div>
+        <basic-form-item class="login-form-item" prop="account" validate="required" required-message="请输入用户名">
+          <el-input v-model="loginForm.account" autoComplete="on" placeholder="登录账户" prefix-icon="el-icon-user"> </el-input>
+        </basic-form-item>
+        <el-tooltip v-model="capsTooltip" content="大写锁定已打开" placement="right" manual>
+          <basic-form-item class="login-form-item" prop="password" validate="required" required-message="请输入密码">
+            <el-input name="password" prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="密码" show-password @blur="capsTooltip = false" @keyup.native="checkCapslock"> </el-input>
+          </basic-form-item>
+        </el-tooltip>
+        <basic-form-item class="login-form-item">
+          <div class="operate-region">
+            <span class="remember">
+              <el-switch v-model="remember"></el-switch>
+              <span class="m-l-xs">记住密码</span>
+            </span>
+            <a :href="`mailto:${configs.helpInformationLink}`" type="text" class="text-info pull-right help-info" :title="configs.helpInformationContent">{{ configs.helpInformationContent }}</a>
+          </div>
+        </basic-form-item>
+        <el-button class="login-btn" type="primary" size="medium" :loading="loading" @click="handleLogin"> 登录 </el-button>
+      </el-form>
+    </div>
+    <div class="copyright-info">{{ configs.copyrightInformation }}</div>
+  </div>
+</template>
+
+<script>
+import crypto from 'utils/crypto.js'
+import { login } from 'services/system'
+import { setLoginData } from './tools'
+import { reactive, toRefs, ref, computed } from '@vue/composition-api'
+export default {
+  setup(props, context) {
+    const state = reactive({
+      remember: false,
+      loginForm: {
+        account: '',
+        password: ''
+      },
+      loading: false,
+      capsTooltip: false
+    })
+    const configs = computed(() => context.root.$store.getters.pageConfig)
+    const loginFormRef = ref(null)
+    const init = () => {
+      const local = localStorage.getItem('cmcLoginData')
+      if (local) {
+        const obj = JSON.parse(local)
+        state.loginForm.account = obj.account
+        state.loginForm.password = crypto.decrypt(obj.password)
+        state.remember = true
+      }
+    }
+    init()
+    function goLogin(data) {
+      // const callback = this.$route.query.callback
+      // if (callback) {
+      //   location.href = `${this.ssoUrl}/upmsapi/sso/redirect?token=${data.token}&redirect=${callback}`
+      //   return
+      // }
+      setLoginData(data)
+      if (state.remember) {
+        const obj = {
+          account: state.loginForm.account,
+          password: crypto.encrypt(state.loginForm.password)
+        }
+        localStorage.setItem('cmcLoginData', JSON.stringify(obj))
+      } else {
+        localStorage.removeItem('cmcLoginData')
+      }
+      let path = '/task/dashboard'
+      const { $route, $router } = context.root
+      const redirect = $route.query.redirect
+      if (redirect) {
+        path = redirect.split('/#')[1]
+      }
+      $router.replace(path)
+      localStorage.removeItem('lockData')
+    }
+
+    function handleLogin() {
+      loginFormRef.value.validate(valid => {
+        if (valid) {
+          state.loading = true
+          const { account, password } = state.loginForm
+          login({
+            account,
+            password: crypto.encrypt(password),
+            isManager: true
+          })
+            .then(data => {
+              if (data.success) {
+                goLogin(data.data)
+              }
+            })
+            .finally(() => {
+              state.loading = false
+            })
+        }
+      })
+    }
+
+    function checkCapslock({ shiftKey, key } = {}) {
+      if (key && key.length === 1) {
+        if ((shiftKey && key >= 'a' && key <= 'z') || (!shiftKey && key >= 'A' && key <= 'Z')) {
+          state.capsTooltip = true
+        } else {
+          state.capsTooltip = false
+        }
+      }
+      if (key === 'CapsLock' && this.capsTooltip === true) {
+        state.capsTooltip = false
+      }
+    }
+    return {
+      ...toRefs(state),
+      configs,
+      loginFormRef,
+      handleLogin,
+      checkCapslock
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.login-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: url('/web-common-resource/img/bg_login.png') #2d3a4b no-repeat;
+  background-size: cover;
+  .login-logo {
+    padding: 5px 40px;
+    img {
+      height: 40px;
+    }
+  }
+  .login-center {
+    display: flex;
+    flex: 1;
+    justify-content: space-around;
+    align-items: center;
+    .desc-content {
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+      margin-top: -150x;
+      width: 600px;
+      .desc-title {
+        font-weight: 700;
+        font-style: normal;
+        font-size: 38px;
+        color: #ffffff;
+        margin-bottom: 56px;
+      }
+      .desc-remark {
+        line-height: 40px;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 22px;
+        color: #ffffff;
+      }
+    }
+    .login-form {
+      box-sizing: border-box;
+      width: 462px;
+      padding: 50px 30px;
+      background: #fff;
+      text-align: center;
+      font-size: 17px;
+      .login-title {
+        font-size: 32px;
+        color: #333;
+        margin-bottom: 50px;
+      }
+      .operate-region {
+        display: flex;
+        align-items: center;
+        .remember {
+          flex: 1;
+          text-align: left;
+        }
+      }
+      .login-btn {
+        margin-top: 20px;
+        padding: 17px 20px;
+        width: 100%;
+      }
+      .help-info {
+        max-width: 130px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .login-form-item {
+        margin-bottom: 20px;
+        ::v-deep {
+          .el-input--prefix .el-input__inner {
+            padding-left: 50px;
+          }
+          .el-input__prefix {
+            font-size: 20px;
+            padding: 0 10px;
+          }
+          .el-input__inner {
+            height: 60px;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+  }
+  .copyright-info {
+    padding: 10px 0;
+    text-align: center;
+    background: rgba(10, 37, 68, 0.6);
+    color: #bbbbbb;
+  }
+}
+</style>