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,8 +1,7 @@
 <template>
   <UserLoginLayout v-if="!loading" v-loading="loading">
-    <LoginContainer v-if="chatUser.chat_profile?.authentication_type == 'password'">
-      <template #logo>
-        <div class="flex-center">
+    <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"
@@ -13,28 +12,43 @@
           <img :src="chatUser.chat_profile?.icon" alt="" />
         </el-avatar>
         <LogoIcon v-else height="32px" class="mr-8" />
-          <h4>{{ chatUser.chat_profile?.application_name }}</h4>
+        <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"
+              >
+                <img :src="chatUser.chat_profile?.icon" alt="" />
+              </el-avatar>
+              <LogoIcon v-else height="32px" />
             </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"
+            <h4
+              class="ellipsis"
+              style="max-width: 270px"
+              :title="chatUser.chat_profile?.application_name"
             >
-            <img :src="chatUser.chat_profile?.icon" alt=""/>
-          </el-avatar>
-          <LogoIcon v-else height="32px" class="mr-8"/>
-          <h4>{{ chatUser.chat_profile?.application_name }}</h4>
+              {{ chatUser.chat_profile?.application_name }}
+            </h4>
           </div>
-      </template>
+        </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>
@@ -146,34 +160,50 @@
             />
           </template>
         </div>
-    </LoginContainer>
+      </el-card>
+    </div>
   </UserLoginLayout>
 </template>
 <script setup lang="ts">
-import {onMounted, ref, onBeforeMount} from '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 LoginContainer from '@/layout/login-layout/LoginContainer.vue'
 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 QrCodeTab from '@/views/chat/user-login/scanCompinents/QrCodeTab.vue'
 import { MsgConfirm, MsgError } from '@/utils/message.ts'
 import PasswordAuth from '@/views/chat/auth/component/password.vue'
 import { isAppIcon } from '@/utils/common'
-
+useResize()
 const router = useRouter()
-const {theme, chatUser} = useStore()
+
+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 },
+  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: '',
@@ -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;