art-design/src/views/auth/login/index.vue

<template>
  <div class="login">
    <LoginLeftView></LoginLeftView>

    <div class="right-wrap">
      <div class="top-right-wrap">
        <div class="btn theme-btn" @click="toggleTheme">
          <i class="iconfont-sys">
            {{ isDark ? '&#xe6b5;' : '&#xe725;' }}
          </i>
        </div>
        <ElDropdown @command="changeLanguage" popper-class="langDropDownStyle">
          <div class="btn language-btn">
            <i class="iconfont-sys icon-language">&#xe611;</i>
          </div>
          <template #dropdown>
            <ElDropdownMenu>
              <div v-for="lang in languageOptions" :key="lang.value" class="lang-btn-item">
                <ElDropdownItem
                  :command="lang.value"
                  :class="{ 'is-selected': locale === lang.value }"
                >
                  <span class="menu-txt">{{ lang.label }}</span>
                  <i v-if="locale === lang.value" class="iconfont-sys icon-check">&#xe621;</i>
                </ElDropdownItem>
              </div>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
        <ElDropdown @command="changeCompany" popper-class="langDropDownStyle">
          <div class="btn language-btn">
            <i class="iconfont-sys icon-language">&#xe8af;</i>公司
          </div>
          <template #dropdown>
            <ElDropdownMenu>
              <div v-for="cany in companyList" :key="cany.id" class="lang-btn-item">
                <ElDropdownItem
                  :command="cany.id"
                  :class="{ 'is-selected': companyid === cany.value }"
                >
                  <span class="menu-txt">{{ cany.name }}</span>
                  <i v-if="companyid === cany.id" class="iconfont-sys icon-check">&#xe621;</i>
                </ElDropdownItem>
              </div>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </div>
      <div class="header">
        <ArtLogo class="icon" />
        <h1>{{ systemName }}</h1>
      </div>
      <div class="login-wrap">
        <div class="form">
          <!-- 登录方式切换 tab -->
          <div class="login-type-tabs">
            <span :class="{active: activeLoginType === 'password'}" @click="activeLoginType = 'password'">账号密码登录</span>
            <span :class="{active: activeLoginType === 'qrcode'}" @click="activeLoginType = 'qrcode'">飞书登录</span>
          </div>
          <div v-if="activeLoginType === 'password'">
            <!-- 原有账号密码登录表单内容 -->
            <!-- <h3 class="title">{{ $t('login.title') }}</h3> -->
            <!-- <p class="sub-title">{{ $t('login.subTitle') }}</p> -->
            <ElForm
              ref="formRef"
              :model="formData"
              :rules="rules"
              @keyup.enter="handleSubmit"
              style="margin-top: 25px"
            >
              <!-- <ElFormItem prop="account">
                <ElSelect v-model="formData.account" @change="setupAccount" class="account-select">
                  <ElOption
                    v-for="account in accounts"
                    :key="account.key"
                    :label="account.label"
                    :value="account.key"
                  >
                    <span>{{ account.label }}</span>
                  </ElOption>
                </ElSelect>
              </ElFormItem> -->
              <ElFormItem prop="username">
                <ElInput :placeholder="$t('login.placeholder[0]')" v-model.trim="formData.username" />
              </ElFormItem>
              <ElFormItem prop="password">
                <ElInput
                  :placeholder="$t('login.placeholder[1]')"
                  v-model.trim="formData.password"
                  type="password"
                  radius="8px"
                  autocomplete="off"
                  show-password
                />
              </ElFormItem>
              <div class="drag-verify">
                <div class="drag-verify-content" :class="{ error: !isPassing && isClickPass }">
                  <ArtDragVerify
                    ref="dragVerify"
                    v-model:value="isPassing"
                    :width="width < 500 ? 328 : 438"
                    :text="$t('login.sliderText')"
                    textColor="var(--art-gray-800)"
                    :successText="$t('login.sliderSuccessText')"
                    :progressBarBg="getCssVar('--el-color-primary')"
                    background="var(--art-gray-200)"
                    handlerBg="var(--art-main-bg-color)"
                  />
                </div>
                <p class="error-text" :class="{ 'show-error-text': !isPassing && isClickPass }">{{
                  $t('login.placeholder[2]')
                }}</p>
              </div>

              <div class="forget-password">
                <ElCheckbox v-model="formData.rememberPassword">{{
                  $t('login.rememberPwd')
                }}</ElCheckbox>
                <!-- <RouterLink :to="RoutesAlias.ForgetPassword">{{ $t('login.forgetPwd') }}</RouterLink> -->
              </div>

              <div style="margin-top: 30px">
                <ElButton
                  class="login-btn"
                  type="primary"
                  @click="handleSubmit"
                  :loading="loading"
                  v-ripple
                >
                  {{ $t('login.btnText') }}
                </ElButton>
              </div>

              <div class="footer">
                <p>
                  {{ $t('login.noAccount') }}
                  <RouterLink :to="RoutesAlias.Register">{{ $t('login.register') }}</RouterLink>
                </p>
              </div>
            </ElForm>
          </div>
          <div v-else>
            <div  class="qrcode-login"  v-if="!iscompany">请先选择公司</div>
            <div v-else>
              <div  class="qrcode-login" v-if="isInFeishu" >
              <img class="left-bg" src="@imgs/login/feishu.png" />
              <ElButton
                class="login-btn"
                type="primary"
                @click="feishuSubmit"
                v-ripple
              >
              {{ $t('login.btnText') }}
              </ElButton>
            </div>
            <div  class="qrcode-login" v-else>
              <div id="login_container"></div>
              <p class="qrcode-tip">请使用飞书App扫码登录</p>
            </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import AppConfig from '@/config'
  import { RoutesAlias } from '@/router/routesAlias'
  import { ElNotification, ElMessage } from 'element-plus'
  import { useUserStore } from '@/store/modules/user'
  import { HOME_PAGE } from '@/router/routesAlias'
  import { getCssVar } from '@/utils/ui'
  import { languageOptions } from '@/locales'
  import { LanguageEnum, SystemThemeEnum } from '@/enums/appEnum'
  import { useI18n } from 'vue-i18n'
  import { HttpError } from '@/utils/http/error'
  import { onMounted, ref, watch, nextTick } from 'vue'

  defineOptions({ name: 'Login' })

  const { t } = useI18n()
  import { useSettingStore } from '@/store/modules/setting'
  import type { FormInstance, FormRules } from 'element-plus'

  type AccountKey = 'super' | 'admin' | 'user'

  export interface Account {
    key: AccountKey
    label: string
    userName: string
    password: string
    roles: string[]
  }

  const accounts = computed<Account[]>(() => [
    {
      key: 'super',
      label: t('login.roles.super'),
      userName: 'Super',
      password: '123456',
      roles: ['R_SUPER']
    },
    {
      key: 'admin',
      label: t('login.roles.admin'),
      userName: 'Admin',
      password: '123456',
      roles: ['R_ADMIN']
    },
    {
      key: 'user',
      label: t('login.roles.user'),
      userName: 'User',
      password: '123456',
      roles: ['R_USER']
    }
  ])

  const settingStore = useSettingStore()
  const { isDark, systemThemeType } = storeToRefs(settingStore)

  const dragVerify = ref()

  const userStore = useUserStore()
  const router = useRouter()
  const isPassing = ref(false)
  const isClickPass = ref(false)
  const activeLoginType = ref<'password' | 'qrcode'>('qrcode')
  const isInFeishu = /Lark|Feishu/i.test(navigator.userAgent);
  // const isInFeishu = true;
  const systemName = AppConfig.systemInfo.name
  const formRef = ref<FormInstance>()
  const companyid = ref('')
  const iscompany = ref(false)  
  const feishuresponse=ref()
  const formData = reactive({
    account: '',
    username: '',
    password: '',
    rememberPassword: true
  })

  const rules = computed<FormRules>(() => ({
    username: [{ required: true, message: t('login.placeholder[0]'), trigger: 'blur' }],
    password: [{ required: true, message: t('login.placeholder[1]'), trigger: 'blur' }]
  }))

  const loading = ref(false)
  const { width } = useWindowSize()
  const feishulogin = async () => {
    userStore.setLoginType('feishu')
    if (isInFeishu) {
      
      // 飞书特定的逻辑
    } else {
      // 普通浏览器的逻辑
      await nextTick()
      // 等待 SDK 加载
      const waitForQRLogin = () =>
        new Promise<void>((resolve) => {
          const check = () => {
            // @ts-ignore
            if (window.QRLogin) resolve()
            else setTimeout(check, 100)
          }
          check()
        })
      await waitForQRLogin()
      // @ts-ignore
      const container = document.getElementById('login_container')
      if (container) container.innerHTML = ''
      // @ts-ignore
      // 飞书二维码登录参数（请替换为你的实际参数）
      const fclient_id = feishuresponse.value?.app_id
      const redirect_uri = feishuresponse.value?.r_url
      const state = feishuresponse.value?.state
      const feishuGotoUrl = 'https://passport.feishu.cn/suite/passport/oauth/authorize?client_id='+fclient_id+'&redirect_uri='+redirect_uri+'&response_type=code&state='+state;
      // @ts-ignore
      const QRLoginObj = window.QRLogin({
        id: 'login_container',
        goto: feishuGotoUrl,
        width: '250',
        height: '250',
        style: 'width:350px;height:350px;border:none'
      })
      const handleMessage = function (event: MessageEvent) {
        if (QRLoginObj.matchOrigin(event.origin) && QRLoginObj.matchData(event.data)) {
          const loginTmpCode = event.data.tmp_code
          window.location.href = `${feishuGotoUrl}&tmp_code=${loginTmpCode}`
        }
      }
      window.addEventListener('message', handleMessage, false)
    }
  }
   watch(
    (activeLoginType as import('vue').Ref<string>),
    async (val) => {
      if (val === 'qrcode') {
        userStore.setLoginType('feishu')
        if(companyid.value!=''){
          feishulogin()
        }
      }else{
        userStore.setLoginType('upwd')
      }
    },
    { immediate: true }
  )
  //飞书登录
   const feishuSubmit = async () => {
    try {
      const { auth_url } = await UserService.getfeishuscope()
        window.location.href = auth_url
    } catch (error) {
      ElMessage.error('登录失败，请稍后重试')
    } finally {
      resetDragVerify()
    }
  }

  // 登录
  const handleSubmit = async () => {
    if (!formRef.value) return

    try {
      // 表单验证
      const valid = await formRef.value.validate()
      if (!valid) return

      // 拖拽验证
      if (!isPassing.value) {
        isClickPass.value = true
        return
      }

      loading.value = true

      // 登录请求
      const { username, password } = formData

      const {  data } = await UserService.login({
        account: username,
        password
      })

      // 验证token
      if (!data.access_token) {
        throw new Error('Login failed - no token received')
      }

      // 存储token和用户信息
      userStore.setToken(data.access_token, data.refresh_token, data.expires_in)
      const userInfo = await UserService.getUserInfo()
      userStore.setUserInfo(userInfo)
      userStore.setLoginStatus(true)

      // 登录成功处理
      showLoginSuccessNotice()
      router.push(HOME_PAGE)
    } catch (error) {
      // 处理 HttpError
      if (error instanceof HttpError) {
        // console.log(error.code)
      } else {
        // 处理非 HttpError
        ElMessage.error('登录失败，请稍后重试')
        console.error('[Login] Unexpected error:', error)
      }
    } finally {
      loading.value = false
      resetDragVerify()
    }
  }

  // 重置拖拽验证
  const resetDragVerify = () => {
    dragVerify.value.reset()
  }

  // 登录成功提示
  const showLoginSuccessNotice = () => {
    setTimeout(() => {
      ElNotification({
        title: t('login.success.title'),
        type: 'success',
        duration: 2500,
        zIndex: 10000,
        message: `${t('login.success.message')}, ${systemName}!`
      })
    }, 150)
  }
  onMounted(() => {
    getcompanyList()
  })
  // 切换语言
  const { locale } = useI18n()

  const changeLanguage = (lang: LanguageEnum) => {
    if (locale.value === lang) return
    locale.value = lang
    userStore.setLanguage(lang)
  }
  //获取公司 getCompanyList
  const companyList = ref<any>()
  const getcompanyList = async () => {
    try {
      // 这里调用获取品牌列表的接口
      const response = await UserService.getCompanyList()
      companyList.value = response || []
    } catch (error) { }
  }
  //切换公司
  
  const changeCompany = (company: any) => {
    if (companyid.value === company) return
    const companyt = companyList.value.find((c: any) => c.id === company)
    companyid.value = company
    iscompany.value = company
    userStore.setCompany(company,companyt?.abbr)
    getfeishuAppList()
  }
  const getfeishuAppList = async () => {
    try {
      // 这里调用获取品牌列表的接口
      feishuresponse.value = await UserService.getfeishuAppList({ corp_id: companyid.value })
      if(activeLoginType.value=='qrcode'){
        feishulogin()
      }
      console.log(feishuresponse)
    } catch (error) { }
  }

  // 切换主题
  import { useTheme } from '@/composables/useTheme'
  import { UserService } from '@/api/usersApi'

  const toggleTheme = () => {
    let { LIGHT, DARK } = SystemThemeEnum
    useTheme().switchThemeStyles(systemThemeType.value === LIGHT ? DARK : LIGHT)
  }
</script>

<style lang="scss" scoped>
  @use './index';
  .login-type-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    span {
      padding: 8px 24px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      &.active {
        color: #409eff;
        border-bottom: 2px solid #409eff;
      }
    }
  }
  .qrcode-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    .qrcode-tip {
      margin-top: 16px;
      color: #888;
    }
  }
</style>