perf: Optimize user login

ui/src/views/chat/index.vue

@@ -24,6 +24,7 @@ const {
 } = route as any
 
 const currentTemplate = computed(() => {
+  console.log(common.isMobile())
   let modeName = ''
   if (chatUser.application) {
     if (!mode || mode === 'pc') {

ui/src/views/chat/user-login/components/LoginContainer.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="login-form-container">
-    <div class="login-title">
-      <div class="logo text-center">
-        <LogoFull height="45px" />
-      </div>
-      <div class="sub-title text-center" v-if="subTitle">
-        <el-text type="info">{{ subTitle }}</el-text>
-      </div>
-    </div>
-    <el-card class="login-card">
-      <slot></slot>
-    </el-card>
-  </div>
-</template>
-<script setup lang="ts">
-defineProps({
-  title: String,
-  subTitle: String
-})
-</script>
-<style lang="scss" scoped>
-.login-form-container {
-  width: 480px;
-
-  .login-title {
-    margin-bottom: 32px;
-    .sub-title {
-      font-size: 16px;
-    }
-  }
-  .login-card {
-    border-radius: 8px;
-    padding: 18px;
-  }
-}
-</style>

ui/src/views/chat/user-login/components/LoginLayout.vue

@@ -1,108 +0,0 @@
-<template>
-  <div class="login-warp flex-center">
-    <div class="login-container w-full h-full">
-      <el-row class="container w-full h-full">
-        <el-col :xs="0" :sm="0" :md="10" :lg="10" :xl="10" class="left-container">
-          <div class="login-image" :style="{ backgroundImage: `url(${loginImage})` }"></div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="right-container flex-center">
-          <el-dropdown trigger="click" type="primary" class="lang" v-if="lang">
-            <template #dropdown>
-              <el-dropdown-menu style="width: 180px">
-                <el-dropdown-item
-                  v-for="(lang, index) in langList"
-                  :key="index"
-                  :value="lang.value"
-                  @click="changeLang(lang.value)"
-                  class="flex-between"
-                >
-                  <span :class="lang.value === chatUser.getLanguage() ? 'primary' : ''">{{
-                    lang.label
-                  }}</span>
-
-                  <el-icon
-                    :class="lang.value === chatUser.getLanguage() ? 'primary' : ''"
-                    v-if="lang.value === chatUser.getLanguage()"
-                  >
-                    <Check />
-                  </el-icon>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-            <el-button>
-              {{ currentLanguage }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
-            </el-button>
-          </el-dropdown>
-          <slot></slot>
-        </el-col>
-      </el-row>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed } from 'vue'
-import { getThemeImg } from '@/utils/theme'
-import useStore from '@/stores'
-import { useLocalStorage } from '@vueuse/core'
-import { langList, localeConfigKey, getBrowserLang } from '@/locales/index'
-defineProps({
-  lang: {
-    type: Boolean,
-    default: true,
-  },
-})
-const { chatUser, theme } = useStore()
-
-const changeLang = (lang: string) => {
-  useLocalStorage(localeConfigKey, getBrowserLang()).value = lang
-  window.location.reload()
-}
-
-const currentLanguage = computed(() => {
-  return langList.value?.filter((v: any) => v.value === chatUser.getLanguage())?.[0]?.label
-})
-
-const fileURL = computed(() => {
-  if (theme.themeInfo?.loginImage) {
-    if (typeof theme.themeInfo?.loginImage === 'string') {
-      return theme.themeInfo?.loginImage
-    } else {
-      return URL.createObjectURL(theme.themeInfo?.loginImage)
-    }
-  } else {
-    return ''
-  }
-})
-
-const loginImage = computed(() => {
-  if (theme.themeInfo?.loginImage) {
-    return `${fileURL.value}`
-  } else {
-    const imgName = getThemeImg(theme.themeInfo?.theme)
-    const imgPath = `${window.MaxKB.prefix}/theme/${imgName}.jpg`
-    const imageUrl = new URL(imgPath, import.meta.url).href
-    return imageUrl
-  }
-})
-</script>
-<style lang="scss" scoped>
-.login-warp {
-  height: 100vh;
-
-  .login-image {
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-  }
-  .right-container {
-    position: relative;
-    .lang {
-      position: absolute;
-      right: 20px;
-      top: 20px;
-    }
-  }
-}
-</style>

ui/src/views/chat/user-login/index.vue

@@ -1,179 +1,209 @@
 <template>
   <UserLoginLayout v-if="!loading" v-loading="loading">
-    <LoginContainer v-if="chatUser.chat_profile?.authentication_type == 'password'">
-      <template #logo>
-        <div class="flex-center">
-          <el-avatar
-            v-if="isAppIcon(chatUser.chat_profile?.icon)"
-            shape="square"
-            :size="32"
-            class="mr-8"
-            style="background: none"
-          >
-            <img :src="chatUser.chat_profile?.icon" alt=""/>
-          </el-avatar>
-          <LogoIcon v-else height="32px" class="mr-8"/>
-          <h4>{{ chatUser.chat_profile?.application_name }}</h4>
-        </div>
-      </template>
-      <PasswordAuth></PasswordAuth>
-    </LoginContainer>
-
-    <LoginContainer v-else>
-      <template #logo>
-        <div class="flex-center">
-          <el-avatar
-            v-if="isAppIcon(chatUser.chat_profile?.icon)"
-            shape="square"
-            :size="32"
-            class="mr-8"
-            style="background: none"
-          >
-            <img :src="chatUser.chat_profile?.icon" alt=""/>
-          </el-avatar>
-          <LogoIcon v-else height="32px" class="mr-8"/>
-          <h4>{{ chatUser.chat_profile?.application_name }}</h4>
-        </div>
-      </template>
-      <h2 class="mb-24" v-if="!showQrCodeTab && (loginMode === 'LDAP' || loginMode === 'LOCAL')">
-        {{ loginMode == 'LOCAL' ? $t('views.login.title') : loginMode }}
-      </h2>
-      <div v-if="!showQrCodeTab && (loginMode === 'LDAP' || loginMode === 'LOCAL')">
-        <el-form
-          class="login-form"
-          :rules="rules"
-          :model="loginForm"
-          ref="loginFormRef"
-          @keyup.enter="loginHandle"
+    <div class="user-login-container p-24">
+      <div v-if="isPc" class="flex-center" style="margin-bottom: 32px">
+        <el-avatar
+          v-if="isAppIcon(chatUser.chat_profile?.icon)"
+          shape="square"
+          :size="32"
+          class="mr-8"
+          style="background: none"
         >
-          <div class="mb-24">
-            <el-form-item prop="username">
-              <el-input
-                size="large"
-                class="input-item"
-                v-model="loginForm.username"
-                :placeholder="$t('views.login.loginForm.username.placeholder')"
+          <img :src="chatUser.chat_profile?.icon" alt="" />
+        </el-avatar>
+        <LogoIcon v-else height="32px" class="mr-8" />
+        <h1>{{ chatUser.chat_profile?.application_name }}</h1>
+      </div>
+      <!-- 移动端头部标题-->
+      <div v-else class="user-login__header">
+        <div class="flex-between">
+          <div class="flex align-center">
+            <div class="mr-12 ml-16 flex">
+              <el-avatar
+                v-if="isAppIcon(chatUser.chat_profile?.icon)"
+                shape="square"
+                :size="32"
+                style="background: none"
               >
-              </el-input>
-            </el-form-item>
+                <img :src="chatUser.chat_profile?.icon" alt="" />
+              </el-avatar>
+              <LogoIcon v-else height="32px" />
+            </div>
+
+            <h4
+              class="ellipsis"
+              style="max-width: 270px"
+              :title="chatUser.chat_profile?.application_name"
+            >
+              {{ chatUser.chat_profile?.application_name }}
+            </h4>
           </div>
-          <div class="mb-24">
-            <el-form-item prop="password">
-              <el-input
-                type="password"
-                size="large"
-                class="input-item"
-                v-model="loginForm.password"
-                :placeholder="$t('views.login.loginForm.password.placeholder')"
-                show-password
-              >
-              </el-input>
-            </el-form-item>
-          </div>
-          <div class="mb-24" v-if="loginMode !== 'LDAP'">
-            <el-form-item prop="captcha">
-              <div class="flex-between w-full">
+        </div>
+      </div>
+
+      <el-card class="login-card" v-if="chatUser.chat_profile?.authentication_type == 'password'">
+        <h2 class="mb-24">
+          {{ $t('views.applicationOverview.appInfo.LimitDialog.authenticationValue') }}
+        </h2>
+        <PasswordAuth></PasswordAuth>
+      </el-card>
+
+      <el-card class="login-card" v-else>
+        <h2 class="mb-24" v-if="!showQrCodeTab && (loginMode === 'LDAP' || loginMode === 'LOCAL')">
+          {{ loginMode == 'LOCAL' ? $t('views.login.title') : loginMode }}
+        </h2>
+        <div v-if="!showQrCodeTab && (loginMode === 'LDAP' || loginMode === 'LOCAL')">
+          <el-form
+            class="login-form"
+            :rules="rules"
+            :model="loginForm"
+            ref="loginFormRef"
+            @keyup.enter="loginHandle"
+          >
+            <div class="mb-24">
+              <el-form-item prop="username">
                 <el-input
                   size="large"
                   class="input-item"
-                  v-model="loginForm.captcha"
-                  :placeholder="$t('views.login.loginForm.captcha.placeholder')"
+                  v-model="loginForm.username"
+                  :placeholder="$t('views.login.loginForm.username.placeholder')"
                 >
                 </el-input>
+              </el-form-item>
+            </div>
+            <div class="mb-24">
+              <el-form-item prop="password">
+                <el-input
+                  type="password"
+                  size="large"
+                  class="input-item"
+                  v-model="loginForm.password"
+                  :placeholder="$t('views.login.loginForm.password.placeholder')"
+                  show-password
+                >
+                </el-input>
+              </el-form-item>
+            </div>
+            <div class="mb-24" v-if="loginMode !== 'LDAP'">
+              <el-form-item prop="captcha">
+                <div class="flex-between w-full">
+                  <el-input
+                    size="large"
+                    class="input-item"
+                    v-model="loginForm.captcha"
+                    :placeholder="$t('views.login.loginForm.captcha.placeholder')"
+                  >
+                  </el-input>
 
-                <img
-                  :src="identifyCode"
-                  alt=""
-                  height="38"
-                  class="ml-8 cursor border border-r-6"
-                  @click="makeCode"
-                />
-              </div>
-            </el-form-item>
-          </div>
-        </el-form>
+                  <img
+                    :src="identifyCode"
+                    alt=""
+                    height="38"
+                    class="ml-8 cursor border border-r-6"
+                    @click="makeCode"
+                  />
+                </div>
+              </el-form-item>
+            </div>
+          </el-form>
 
-        <el-button
-          size="large"
-          type="primary"
-          class="w-full"
-          @click="loginHandle"
-          :loading="loading"
-        >
-          {{ $t('views.login.buttons.login') }}
-        </el-button>
-      </div>
-      <div v-if="showQrCodeTab">
-        <QrCodeTab :tabs="orgOptions"/>
-      </div>
-      <div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1">
-        <span>{{ $t('views.login.moreMethod') }}</span>
-      </div>
-      <div class="text-center mt-16">
-        <template v-for="item in modeList">
           <el-button
-            v-if="item !== 'LOCAL' && loginMode !== item && item !== 'QR_CODE'"
-            circle
-            :key="item"
-            class="login-button-circle color-secondary"
-            @click="changeMode(item)"
+            size="large"
+            type="primary"
+            class="w-full"
+            @click="loginHandle"
+            :loading="loading"
           >
-            <span
-              :style="{
-                'font-size': item === 'OAUTH2' ? '8px' : '10px',
-                color: theme.themeInfo?.theme,
-              }"
-            >{{ item }}</span
+            {{ $t('views.login.buttons.login') }}
+          </el-button>
+        </div>
+        <div v-if="showQrCodeTab">
+          <QrCodeTab :tabs="orgOptions" />
+        </div>
+        <div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1">
+          <span>{{ $t('views.login.moreMethod') }}</span>
+        </div>
+        <div class="text-center mt-16">
+          <template v-for="item in modeList">
+            <el-button
+              v-if="item !== 'LOCAL' && loginMode !== item && item !== 'QR_CODE'"
+              circle
+              :key="item"
+              class="login-button-circle color-secondary"
+              @click="changeMode(item)"
             >
-          </el-button>
-          <el-button
-            v-if="item === 'QR_CODE' && loginMode !== item"
-            circle
-            :key="item"
-            class="login-button-circle color-secondary"
-            @click="changeMode('QR_CODE')"
-          >
-            <img src="@/assets/icon_qr_outlined.svg" width="25px"/>
-          </el-button>
-          <el-button
-            v-if="item === 'LOCAL' && loginMode != 'LOCAL'"
-            circle
-            :key="item"
-            class="login-button-circle color-secondary"
-            style="font-size: 24px"
-            icon="UserFilled"
-            @click="changeMode('LOCAL')"
-          />
-        </template>
-      </div>
-    </LoginContainer>
+              <span
+                :style="{
+                  'font-size': item === 'OAUTH2' ? '8px' : '10px',
+                  color: theme.themeInfo?.theme,
+                }"
+                >{{ item }}</span
+              >
+            </el-button>
+            <el-button
+              v-if="item === 'QR_CODE' && loginMode !== item"
+              circle
+              :key="item"
+              class="login-button-circle color-secondary"
+              @click="changeMode('QR_CODE')"
+            >
+              <img src="@/assets/icon_qr_outlined.svg" width="25px" />
+            </el-button>
+            <el-button
+              v-if="item === 'LOCAL' && loginMode != 'LOCAL'"
+              circle
+              :key="item"
+              class="login-button-circle color-secondary"
+              style="font-size: 24px"
+              icon="UserFilled"
+              @click="changeMode('LOCAL')"
+            />
+          </template>
+        </div>
+      </el-card>
+    </div>
   </UserLoginLayout>
 </template>
 <script setup lang="ts">
-import {onMounted, ref, onBeforeMount} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
-import type {FormInstance, FormRules} from 'element-plus'
-import type {LoginRequest} from '@/api/type/login'
-import LoginContainer from '@/layout/login-layout/LoginContainer.vue'
+import { onMounted, ref, onBeforeMount, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { LoginRequest } from '@/api/type/login'
 import UserLoginLayout from '@/layout/login-layout/UserLoginLayout.vue'
 import loginApi from '@/api/chat/chat.ts'
-import {t, getBrowserLang} from '@/locales'
+import { t } from '@/locales'
+import useResize from '@/layout/hooks/useResize'
 import useStore from '@/stores'
-import {useI18n} from 'vue-i18n'
+import { useI18n } from 'vue-i18n'
 import QrCodeTab from '@/views/chat/user-login/scanCompinents/QrCodeTab.vue'
-import {MsgConfirm, MsgError} from '@/utils/message.ts'
+import { MsgConfirm, MsgError } from '@/utils/message.ts'
 import PasswordAuth from '@/views/chat/auth/component/password.vue'
-import {isAppIcon} from '@/utils/common'
-
+import { isAppIcon } from '@/utils/common'
+useResize()
 const router = useRouter()
-const {theme, chatUser} = useStore()
-const {locale} = useI18n({useScope: 'global'})
+
+const { theme, chatUser, common } = useStore()
+const { locale } = useI18n({ useScope: 'global' })
 const loading = ref<boolean>(false)
 const route = useRoute()
 const identifyCode = ref<string>('')
 const {
-  params: {accessToken},
+  params: { accessToken },
+  query: { mode },
 } = route as any
+
+const isPc = computed(() => {
+  console.log(common.isMobile())
+  let modeName = ''
+  if (!mode || mode === 'pc') {
+    modeName = common.isMobile() ? 'mobile' : 'pc'
+  } else {
+    modeName = mode
+  }
+  console.log(modeName)
+  return modeName === 'pc'
+})
+
 const loginFormRef = ref<FormInstance>()
 const loginForm = ref<LoginRequest>({
   username: '',
@@ -211,7 +241,7 @@ const loginHandle = () => {
       chatUser.ldapLogin(loginForm.value).then((ok) => {
         router.push({
           name: 'chat',
-          params: {accessToken: chatUser.accessToken},
+          params: { accessToken: chatUser.accessToken },
           query: route.query,
         })
       })
@@ -219,7 +249,7 @@ const loginHandle = () => {
       chatUser.login(loginForm.value).then((ok) => {
         router.push({
           name: 'chat',
-          params: {accessToken: chatUser.accessToken},
+          params: { accessToken: chatUser.accessToken },
           query: route.query,
         })
       })
@@ -300,8 +330,7 @@ function redirectAuth(authType: string, needMessage: boolean = false) {
         .then(() => {
           window.location.href = url
         })
-        .catch(() => {
-        })
+        .catch(() => {})
     } else {
       console.log('url', url)
       window.location.href = url
@@ -343,7 +372,9 @@ onBeforeMount(() => {
     }
     // 这里的modeList 是oauth2 cas ldap oidc 这四个 还会有 lark wecom dingtalk
     // 获取到的 modeList中除'CAS', 'OIDC', 'OAuth2' LOCAL之外的登录方式
-    QrList.value = modeList.value.filter((item) => !['CAS', 'OIDC', 'OAuth2', 'LOCAL', 'LDAP'].includes(item))
+    QrList.value = modeList.value.filter(
+      (item) => !['CAS', 'OIDC', 'OAuth2', 'LOCAL', 'LDAP'].includes(item),
+    )
     // modeList需要去掉lark wecom dingtalk
     modeList.value = modeList.value.filter((item) => !['lark', 'wecom', 'dingtalk'].includes(item))
     if (QrList.value.length > 0) {
@@ -364,6 +395,26 @@ onBeforeMount(() => {
 })
 </script>
 <style lang="scss" scoped>
+.user-login {
+  &__header {
+    background: var(--app-header-bg-color);
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+}
+.user-login-container {
+  width: 480px;
+  .login-card {
+    padding: 18px;
+  }
+}
 .login-gradient-divider {
   position: relative;
   text-align: center;