refactor: improve formatting and consistency in index.vue

This commit is contained in:
wxg0103 2025-07-04 14:09:36 +08:00
parent ea085a3832
commit bc0b1fb209

View File

@ -79,7 +79,7 @@
</div> </div>
</div> </div>
<div v-if="showQrCodeTab"> <div v-if="showQrCodeTab">
<QrCodeTab :tabs="orgOptions" /> <QrCodeTab :tabs="orgOptions"/>
</div> </div>
<div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1"> <div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1">
<span>{{ $t('views.login.moreMethod') }}</span> <span>{{ $t('views.login.moreMethod') }}</span>
@ -98,7 +98,7 @@
'font-size': item === 'OAUTH2' ? '8px' : '10px', 'font-size': item === 'OAUTH2' ? '8px' : '10px',
color: theme.themeInfo?.theme, color: theme.themeInfo?.theme,
}" }"
>{{ item }}</span >{{ item }}</span
> >
</el-button> </el-button>
<el-button <el-button
@ -108,7 +108,7 @@
class="login-button-circle color-secondary" class="login-button-circle color-secondary"
@click="changeMode('QR_CODE')" @click="changeMode('QR_CODE')"
> >
<img src="@/assets/scan/icon_qr_outlined.svg" width="25px" /> <img src="@/assets/scan/icon_qr_outlined.svg" width="25px"/>
</el-button> </el-button>
<el-button <el-button
v-if="item === '' && loginMode !== ''" v-if="item === '' && loginMode !== ''"
@ -125,25 +125,27 @@
</login-layout> </login-layout>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, onBeforeMount } from 'vue' import {onMounted, ref, onBeforeMount} from 'vue'
import { useRoute, useRouter } from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus' import type {FormInstance, FormRules} from 'element-plus'
import type { LoginRequest } from '@/api/type/login' import type {LoginRequest} from '@/api/type/login'
import LoginContainer from '@/layout/login-layout/LoginContainer.vue' import LoginContainer from '@/layout/login-layout/LoginContainer.vue'
import LoginLayout from '@/layout/login-layout/LoginLayout.vue' import LoginLayout from '@/layout/login-layout/LoginLayout.vue'
import loginApi from '@/api/user/login' import loginApi from '@/api/user/login'
import authApi from '@/api/system-settings/auth-setting' import authApi from '@/api/system-settings/auth-setting'
import { t, getBrowserLang } from '@/locales' import {t, getBrowserLang} from '@/locales'
import useStore from '@/stores' import useStore from '@/stores'
import { useI18n } from 'vue-i18n' import {useI18n} from 'vue-i18n'
import QrCodeTab from '@/views/login/scanCompinents/QrCodeTab.vue' import QrCodeTab from '@/views/login/scanCompinents/QrCodeTab.vue'
import { MsgConfirm, MsgError } from '@/utils/message.ts' import {MsgConfirm, MsgError} from '@/utils/message.ts'
import * as dd from 'dingtalk-jsapi' import * as dd from 'dingtalk-jsapi'
import { loadScript } from '@/utils/common' import {loadScript} from '@/utils/common'
import {hasPermission} from "@/utils/permission";
import {RoleConst} from "@/utils/permission/data.ts";
const router = useRouter() const router = useRouter()
const { login, user, theme } = useStore() const {login, user, theme} = useStore()
const { locale } = useI18n({ useScope: 'global' }) const {locale} = useI18n({useScope: 'global'})
const loading = ref<boolean>(false) const loading = ref<boolean>(false)
const identifyCode = ref<string>('') const identifyCode = ref<string>('')
@ -184,13 +186,18 @@ const loginHandle = () => {
if (loginMode.value === 'LDAP') { if (loginMode.value === 'LDAP') {
login.asyncLdapLogin(loginForm.value, loading).then(() => { login.asyncLdapLogin(loginForm.value, loading).then(() => {
locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US' locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
router.push({ name: 'home' }) router.push({name: 'home'})
}) })
} else { } else {
login.asyncLogin(loginForm.value, loading).then(() => { login.asyncLogin(loginForm.value, loading).then(() => {
locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US' locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
localStorage.setItem('workspace_id', 'default') localStorage.setItem('workspace_id', 'default')
router.push({ name: 'home' }) if (hasPermission([RoleConst.ADMIN, RoleConst.EXTENDS_ADMIN], 'OR')) {
router.push({name: 'user'})
} else {
router.push({name: 'home'})
}
}) })
} }
}) })
@ -273,7 +280,8 @@ function redirectAuth(authType: string) {
window.location.href = url window.location.href = url
} }
}) })
.catch(() => {}) .catch(() => {
})
}) })
} }
@ -348,10 +356,10 @@ onMounted(() => {
const handleDingTalk = () => { const handleDingTalk = () => {
const code = params.get('corpId') const code = params.get('corpId')
if (code) { if (code) {
dd.runtime.permission.requestAuthCode({ corpId: code }).then((res) => { dd.runtime.permission.requestAuthCode({corpId: code}).then((res) => {
console.log('DingTalk client request success:', res) console.log('DingTalk client request success:', res)
login.dingOauth2Callback(res.code).then(() => { login.dingOauth2Callback(res.code).then(() => {
router.push({ name: 'home' }) router.push({name: 'home'})
}) })
}) })
} }
@ -364,7 +372,7 @@ onMounted(() => {
appId: appId, appId: appId,
success: (res: any) => { success: (res: any) => {
login.larkCallback(res.code).then(() => { login.larkCallback(res.code).then(() => {
router.push({ name: 'home' }) router.push({name: 'home'})
}) })
}, },
fail: (error: any) => { fail: (error: any) => {
@ -384,11 +392,11 @@ onMounted(() => {
scopeList: [], scopeList: [],
success: (res: any) => { success: (res: any) => {
login.larkCallback(res.code).then(() => { login.larkCallback(res.code).then(() => {
router.push({ name: 'home' }) router.push({name: 'home'})
}) })
}, },
fail: (error: any) => { fail: (error: any) => {
const { errno } = error const {errno} = error
if (errno === 103) { if (errno === 103) {
callRequestAuthCode() callRequestAuthCode()
} }