添加登录

src/views/auth/feishu-callback.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="feishu-callback">
+    <div v-if="loading">正在登录，请稍候...</div>
+    <div v-else-if="error">{{ error }}</div>
+    <div v-else>登录成功，正在跳转...</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/store/modules/user'
+import { UserService } from '@/api/usersApi'
+
+const loading = ref(true)
+const error = ref('')
+const userStore = useUserStore()
+const router = useRouter()
+onMounted(async () => {
+  const urlParams = new URLSearchParams(window.location.search)
+  const code = urlParams.get('code')
+  const state = urlParams.get('state')
+  if (!code) {
+    error.value = '未获取到飞书授权 code'
+    loading.value = false
+    return
+  }
+  try {
+    // 调用后端接口换 token，接口路径请根据实际情况调整
+    const { data } = await UserService.login({
+        feishu_code: code
+    })
+     // 存储token和用户信息
+    userStore.setToken(data.access_token, data.refresh_token, data.expires_in)
+    const userInfo = await UserService.getUserInfo()
+    userStore.setUserInfo(userInfo)
+    userStore.setLoginStatus(true)
+    router.replace('/')
+  } catch (e: any) {
+    error.value = e?.response?.data?.message || '登录失败，请重试'
+    router.replace('/')
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.feishu-callback {
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #333;
+}
+</style> 

src/views/auth/login/index.vue

@@ -27,6 +27,24 @@
             </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" />
@@ -34,85 +52,114 @@
       </div>
       <div class="login-wrap">
         <div class="form">
-          <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)"
+          <!-- 登录方式切换 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>
-              <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 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">
+              <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="handleSubmit"
-                :loading="loading"
+                @click="feishuSubmit"
                 v-ripple
               >
-                {{ $t('login.btnText') }}
+              {{ $t('login.btnText') }}
               </ElButton>
             </div>
-
-            <div class="footer">
-              <p>
-                {{ $t('login.noAccount') }}
-                <RouterLink :to="RoutesAlias.Register">{{ $t('login.register') }}</RouterLink>
-              </p>
+            <div  class="qrcode-login" v-else>
+              <div id="login_container"></div>
+              <p class="qrcode-tip">请使用飞书App扫码登录</p>
             </div>
-          </ElForm>
+            </div>
+            
+          </div>
         </div>
       </div>
     </div>
@@ -130,6 +177,7 @@
   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' })
 
@@ -180,10 +228,14 @@
   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: '',
@@ -198,17 +250,75 @@
 
   const loading = ref(false)
   const { width } = useWindowSize()
-
-  onMounted(() => {
-    setupAccount('super')
-  })
-
-  // 设置账号
-  const setupAccount = (key: AccountKey) => {
-    const selectedAccount = accounts.value.find((account: Account) => account.key === key)
-    formData.account = key
-    formData.username = selectedAccount?.userName ?? ''
-    formData.password = selectedAccount?.password ?? ''
+  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()
+    }
   }
 
   // 登录
@@ -231,18 +341,18 @@
       // 登录请求
       const { username, password } = formData
 
-      const { token, refreshToken } = await UserService.login({
-        userName: username,
+      const {  data } = await UserService.login({
+        account: username,
         password
       })
 
       // 验证token
-      if (!token) {
+      if (!data.access_token) {
         throw new Error('Login failed - no token received')
       }
 
       // 存储token和用户信息
-      userStore.setToken(token, refreshToken)
+      userStore.setToken(data.access_token, data.refresh_token, data.expires_in)
       const userInfo = await UserService.getUserInfo()
       userStore.setUserInfo(userInfo)
       userStore.setLoginStatus(true)
@@ -282,7 +392,9 @@
       })
     }, 150)
   }
-
+  onMounted(() => {
+    getcompanyList()
+  })
   // 切换语言
   const { locale } = useI18n()
 
@@ -291,6 +403,33 @@
     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 })
+      feishulogin()
+      console.log(feishuresponse)
+    } catch (error) { }
+  }
 
   // 切换主题
   import { useTheme } from '@/composables/useTheme'
@@ -304,4 +443,27 @@
 
 <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>

src/views/auth/register/index.vue

@@ -39,7 +39,7 @@
               />
             </ElFormItem>
 
-            <ElFormItem prop="agreement">
+            <!-- <ElFormItem prop="agreement">
               <ElCheckbox v-model="formData.agreement">
                 {{ $t('register.agreeText') }}
                 <router-link
@@ -48,7 +48,7 @@
                   >{{ $t('register.privacyPolicy') }}</router-link
                 >
               </ElCheckbox>
-            </ElFormItem>
+            </ElFormItem> -->
 
             <div style="margin-top: 15px">
               <ElButton
@@ -81,6 +81,7 @@
   import { ElMessage } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import { useI18n } from 'vue-i18n'
+  import { UserService } from '@/api/usersApi'
 
   defineOptions({ name: 'Register' })
 
@@ -150,13 +151,27 @@
     try {
       await formRef.value.validate()
       loading.value = true
+      // 注册请求
+      const { username, password,confirmPassword } = formData
 
-      // 模拟注册请求
-      setTimeout(() => {
-        loading.value = false
+      const { code } = await UserService.register({
+        account: username,
+        password,
+        confirm_password:confirmPassword
+      })
+      // 验证token
+      loading.value = false
+      if (code!= 200) {
+        throw new Error('Login failed - no token received')
+      }else{
         ElMessage.success('注册成功')
         toLogin()
-      }, 1000)
+      }
+      
+      // 模拟注册请求
+      // setTimeout(() => {
+      
+      // }, 1000)
     } catch (error) {
       console.log('验证失败', error)
     }