Merge pull request #11066 from dataease/pr@dev-v2@perf_ldap_login_page

perf(X-Pack): LDAP 登录方式页面优化

core/core-frontend/src/assets/svg/logo_ldap.svg

@@ -0,0 +1,14 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="logo_cas">
+<g id="logo_cas_2">
+<mask id="mask0_3028_68898" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="30" height="30">
+<circle id="Ellipse 130" cx="16" cy="16" r="15" fill="white"/>
+</mask>
+<g mask="url(#mask0_3028_68898)">
+<g id="CAS">
+<path d="M3.03105 12.86H4.11105V19.07H8.04106V20H3.03105V12.86ZM8.93926 12.86H11.5393C12.6893 12.86 13.5593 13.18 14.1593 13.83C14.7193 14.43 14.9993 15.3 14.9993 16.43C14.9993 17.55 14.7093 18.42 14.1393 19.04C13.5393 19.68 12.6693 20 11.5193 20H8.93926V12.86ZM10.0293 13.79V19.07H11.3193C12.2193 19.07 12.8893 18.85 13.3093 18.42C13.7193 17.99 13.9293 17.33 13.9293 16.43C13.9293 15.51 13.7193 14.85 13.3193 14.43C12.8993 14 12.2393 13.79 11.3393 13.79H10.0293ZM18.1572 12.86H19.3972L22.1472 20H20.9772L20.3072 18.16H17.2372L16.5672 20H15.4072L18.1572 12.86ZM17.5672 17.26H19.9772L18.7972 14.03H18.7572L17.5672 17.26ZM22.8455 12.86H25.8055C27.5055 12.86 28.3555 13.58 28.3555 15.03C28.3555 16.49 27.4955 17.22 25.7855 17.22H23.9355V20H22.8455V12.86ZM23.9355 13.79V16.29H25.7155C26.2555 16.29 26.6455 16.19 26.8955 15.99C27.1355 15.79 27.2655 15.47 27.2655 15.03C27.2655 14.59 27.1355 14.27 26.8855 14.09C26.6355 13.89 26.2455 13.79 25.7155 13.79H23.9355Z" fill="#3370FF"/>
+</g>
+</g>
+</g>
+</g>
+</svg>

core/core-frontend/src/components/icon-custom/src/Icon.vue

@@ -477,6 +477,7 @@ import lock_other_open from '@/assets/svg/lock_other_open.svg'
 import log from '@/assets/svg/log.svg'
 import logo from '@/assets/svg/logo.svg'
 import logo_cas from '@/assets/svg/logo_cas.svg'
+import logo_ldap from '@/assets/svg/logo_ldap.svg'
 import logo_dingtalk from '@/assets/svg/logo_dingtalk.svg'
 import logo_lark from '@/assets/svg/logo_lark.svg'
 import logo_oauth from '@/assets/svg/logo_oauth.svg'
@@ -1136,6 +1137,7 @@ const iconMap = {
   log: log,
   logo: logo,
   logo_cas: logo_cas,
+  logo_ldap: logo_ldap,
   logo_dingtalk: logo_dingtalk,
   logo_lark: logo_lark,
   logo_oauth: logo_oauth,

core/core-frontend/src/views/login/index.vue

@@ -77,10 +77,6 @@ const rules = reactive<FormRules>({
 })
 
 const activeName = ref('simple')
-const handleClick = tab => {
-  const param = { methodName: 'tabSwicther', args: tab }
-  xpackLoginHandler?.value.invokeMethod(param)
-}
 
 const getCurLocation = () => {
   let queryRedirectPath = '/workbranch/index'
@@ -149,11 +145,6 @@ const ldapValidate = callback => {
 const ldapFeedback = () => {
   duringLogin.value = false
 }
-const activeType = ref('account')
-const tablePaneList = ref([{ title: '普通登录', name: 'simple' }])
-const xpackLoaded = info => {
-  tablePaneList.value.push(info)
-}
 const xpackLoadFail = ref(false)
 const loadingText = ref('登录中...')
 const loginContainer = ref()
@@ -229,6 +220,9 @@ const loadArrearance = () => {
     }
   }
 }
+const switchTab = (name: string) => {
+  activeName.value = name || 'simple'
+}
 onMounted(async () => {
   loadArrearance()
   if (!checkPlatform()) {
@@ -240,22 +234,22 @@ onMounted(async () => {
     }
     if (res.data && !adminLogin) {
       if (res.data === 1) {
-        activeName.value = 'LDAP'
+        activeName.value = 'ldap'
         preheat.value = false
       } else {
         loadingText.value = '加载中...'
         document.getElementsByClassName('ed-loading-text')?.length &&
           (document.getElementsByClassName('ed-loading-text')[0]['innerText'] = loadingText.value)
-        nextTick(() => {
-          const param = { methodName: 'ssoLogin', args: res.data }
-          const timer = setInterval(() => {
-            if (xpackLoginHandler?.value.invokeMethod) {
-              xpackLoginHandler?.value.invokeMethod(param)
-              clearInterval(timer)
-            }
-          }, 1000)
-        })
       }
+      nextTick(() => {
+        const param = { methodName: 'ssoLogin', args: res.data }
+        const timer = setInterval(() => {
+          if (xpackLoginHandler?.value.invokeMethod) {
+            xpackLoginHandler?.value.invokeMethod(param)
+            clearInterval(timer)
+          }
+        }, 1000)
+      })
     } else {
       preheat.value = false
     }
@@ -321,16 +315,44 @@ onMounted(async () => {
               {{ slogan || '欢迎使用 DataEase 数据可视化分析工具' }}
             </div>
             <div class="login-form">
-              <el-tabs v-model="activeName" @tab-click="handleClick" class="default-login-tabs">
-                <template v-if="activeType === 'account'">
-                  <el-tab-pane
-                    v-for="item in tablePaneList"
-                    :key="item.name"
-                    :label="item.title"
-                    :name="item.name"
-                  ></el-tab-pane>
-                </template>
-              </el-tabs>
+              <div class="default-login-tabs" v-if="activeName === 'simple'">
+                <div class="login-form-title">
+                  <span>账号登录</span>
+                </div>
+                <el-form-item class="login-form-item" prop="username">
+                  <el-input
+                    v-model="state.loginForm.username"
+                    :placeholder="t('common.account') + '/' + t('commons.email')"
+                    autofocus
+                  />
+                </el-form-item>
+                <el-form-item prop="password">
+                  <CustomPassword
+                    v-model="state.loginForm.password"
+                    :placeholder="t('common.pwd')"
+                    show-password
+                    maxlength="30"
+                    show-word-limit
+                    autocomplete="new-password"
+                    @keypress.enter="handleLogin"
+                  />
+                </el-form-item>
+                <div class="login-btn">
+                  <el-button
+                    type="primary"
+                    class="submit"
+                    size="default"
+                    :disabled="duringLogin"
+                    @click="handleLogin"
+                  >
+                    {{ t('login.btn') }}
+                  </el-button>
+                  <div v-if="showDempTips" class="demo-tips">
+                    <span>{{ demoTips }}</span>
+                  </div>
+                </div>
+              </div>
+
               <XpackComponent
                 class="default-login-tabs"
                 :active-name="activeName"
@@ -340,47 +362,10 @@ onMounted(async () => {
                 jsname="L2NvbXBvbmVudC9sb2dpbi9MZGFw"
               />
 
-              <template v-if="activeName === 'simple'">
-                <div class="default-login-tabs">
-                  <el-form-item class="login-form-item" prop="username">
-                    <el-input
-                      v-model="state.loginForm.username"
-                      :placeholder="t('common.account') + '/' + t('commons.email')"
-                      autofocus
-                    />
-                  </el-form-item>
-                  <el-form-item prop="password">
-                    <CustomPassword
-                      v-model="state.loginForm.password"
-                      :placeholder="t('common.pwd')"
-                      show-password
-                      maxlength="30"
-                      show-word-limit
-                      autocomplete="new-password"
-                      @keypress.enter="handleLogin"
-                    />
-                  </el-form-item>
-                  <div class="login-btn">
-                    <el-button
-                      type="primary"
-                      class="submit"
-                      size="default"
-                      :disabled="duringLogin"
-                      @click="handleLogin"
-                    >
-                      {{ t('login.btn') }}
-                    </el-button>
-                    <div v-if="showDempTips" class="demo-tips">
-                      <span>{{ demoTips }}</span>
-                    </div>
-                  </div>
-                </div>
-              </template>
-
               <XpackComponent
                 ref="xpackLoginHandler"
                 jsname="L2NvbXBvbmVudC9sb2dpbi9IYW5kbGVy"
-                @loaded="xpackLoaded"
+                @switch-tab="switchTab"
               />
               <XpackComponent
                 ref="xpackInvalidPwd"
@@ -514,6 +499,15 @@ onMounted(async () => {
     .ed-form-item--default {
       margin-bottom: 24px;
     }
+    .login-form-title {
+      margin-top: 20px;
+      color: #1f2329;
+      font-family: PingFang SC;
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 28px;
+      text-align: left;
+    }
   }
 
   :deep(.ed-divider__text) {

de-xpack

@@ -1 +1 @@
-Subproject commit 9e4727d171d17d42856698920218350a862dcf95
+Subproject commit 295abc47496173b716e5072859adefaf603ffb1d