@lambo-design/login-form 1.0.0-beta.4 → 1.0.0-beta.41

package/index.js

@@ -1,7 +1,9 @@
 import LamboLoginForm from './src/login-form';
 import LamboLoginPage from './src/login-page';
+import LoginFormQr from './src/login-qr';
 export default LamboLoginForm;
 export {
     LamboLoginForm,
-    LamboLoginPage
+    LamboLoginPage,
+    LoginFormQr
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/login-form",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.41",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -9,9 +9,16 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {
-    "@lambo-design/core": "^4.7.1-beta.39",
-    "@lambo-design/shared": "^1.0.0-beta.18"
+  "devDependencies": {
+    "@lambo-design/core": "^4.7.1-beta.180",
+    "@lambo-design/shared": "^1.0.0-beta.364"
   },
-  "scripts": {}
+  "scripts": {
+    "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
 }

package/src/login-form.vue

@@ -1,34 +1,75 @@
 <template>
   <Form ref="loginForm" class="lambo-login-form"
-        :model="form" :rules="rules"
+        :model="form" :rules="rules" :label-width="0"
         @keydown.enter.native="handleSubmit">
     <FormItem prop="userName">
-      <Input v-model="form.userName" placeholder="请输入用户名">
+      <Input v-model="form.userName" :placeholder="t('login-form.box.form-user-name')">
         <span slot="prepend">
           <Icon :size="16" type="ios-person"></Icon>
         </span>
       </Input>
     </FormItem>
     <FormItem prop="password">
-      <Input v-model="form.password" placeholder="请输入密码" type="password">
+      <Input v-model="form.password" password :placeholder="t('login-form.box.form-user-pas')" type="password">
         <span slot="prepend">
           <Icon :size="14" type="md-lock"></Icon>
         </span>
       </Input>
     </FormItem>
-    <FormItem prop="validCode">
-      <Input v-model="form.validCode" class="captcha" placeholder="请输入验证码">
+    <FormItem prop="validCode" class="captcha-container" v-if="captchaMethod === t('login-form.other.captcha-method-image')">
+      <Input v-model="form.validCode" class="captcha" :placeholder="t('login-form.box.form-user-valid-code')">
         <template slot="prepend">
-          <img class="prefix" src="./styles/images/captcha.svg">
+          <img class="prefix" src="@/assets/images/captcha.svg">
         </template>
       </Input>
       <div class="Imgbox"><img :src="captchaUrl" class="captchaImg" @click="getCaptcha"></div>
     </FormItem>
+    <FormItem prop="validCode" v-if="captchaMethod === t('login-form.other.captcha-method-sms')">
+      <Input
+          search
+          :enter-button="ValidNumText"
+          :placeholder="t('login-form.box.form-user-sms-code')"
+          v-model="form.validCode"
+          @on-search="getVaildCode">
+        <template slot="prepend">
+          <img class="prefix" src="@/assets/images/captcha.svg">
+        </template>
+      </Input>
+    </FormItem>
+    <FormItem prop="validCode" v-if="captchaMethod === t('login-form.other.captcha-method-mail')">
+      <Input
+          search
+          :enter-button="ValidNumText"
+          :placeholder="t('login-form.box.form-user-mail-code')"
+          v-model="form.validCode"
+          @on-search="getVaildCode">
+        <template slot="prepend">
+          <img class="prefix" src="@/assets/images/captcha.svg">
+        </template>
+      </Input>
+    </FormItem>
+    <FormItem v-if="captchaMethod === t('login-form.other.captcha-method-slide-image')">
+      <Button long :disabled="isDisabled" @click="showSlideVerify">{{ buttonText }}</Button>
+    </FormItem>
+    <FormItem v-if="captchaMethod === '文字点选' || captchaMethod === '语序点选' || captchaMethod === '旋转验证码'">
+      <Button long :disabled="isDisabled" @click="showWordClickVerify">{{ buttonText }}</Button>
+    </FormItem>
+    <FormItem v-if="captchaMethod === t('login-form.other.captcha-method-message-center') && channelDataList.length > 0 && channelDataList.length !== 1">
+      <span class="login-method-label">请选择登录验证方式</span>
+      <ButtonGroup style="display: flex;">
+        <Button v-for="channel in channelDataList"
+                :key="channel.channelName" long :type="selectedLoginMethod === channel.channelName ? 'primary' : 'default'"
+                @click="selectLoginMethod(channel.channelName)">{{ channel.channelName }}
+        </Button>
+      </ButtonGroup>
+    </FormItem>
     <FormItem>
-      <Checkbox v-model="rememberMe"><span class="remember">记住用户名</span></Checkbox>
+      <Checkbox v-if="showRememberMe === '1'" v-model="rememberMe"><span class="remember">{{ t('login-form.box.form-remember') }}</span></Checkbox>
+      <label v-if="showForgetPassword === '1'" style="float: right;"><router-link to="/forgetPasswordForget">{{ t('login-form.box.form-forget') }}</router-link></label>
     </FormItem>
     <FormItem>
-      <Button :loading="loading" long type="primary" @click="handleSubmit">登录</Button>
+      <Button v-if="!isNeedBind" long type="primary" @click="handleSubmit">{{ t('login-form.box.form-login') }}</Button>
+      <Button v-else long type="primary" @click="handleSubmit">{{ t('login-form.box.form-rule-bind') }}</Button>
     </FormItem>
   </Form>
 </template>
@@ -37,31 +78,40 @@ import config from "@lambo-design/shared/config/config";
 import {getLocalStorage, removeLocalStorage, setLocalStorage} from "@lambo-design/shared/utils/platform";
 import {guid} from "@lambo-design/shared/utils/number";
 import crypto from "@lambo-design/shared/utils/crypto"
+import ajax from "@lambo-design/shared/utils/ajax";
+import Locale from "@lambo-design/core/src/mixins/locale";
 
 export default {
   name: 'LoginForm',
+  mixins: [Locale],
+  components:{
+  },
   props: {
     userNameRules: {
       type: Array,
-      default: () => {
+      default: function() {
         return [
-          {required: true, message: '账号不能为空', trigger: 'blur'}
+          {required: true, message: this.$t('login-form.box.form-rule-user-name'), trigger: 'blur'}
         ]
       }
     },
+    isNeedBind:{
+      type: Boolean,
+      default: false
+    },
     passwordRules: {
       type: Array,
-      default: () => {
+      default: function() {
         return [
-          {required: true, message: '密码不能为空', trigger: 'blur'}
+          {required: true, message: this.$t('login-form.box.form-rule-user-pas'), trigger: 'blur'}
         ]
       }
     },
     validCodeRules: {
       type: Array,
-      default: () => {
+      default: function() {
         return [
-          {required: true, message: '验证码不能为空', trigger: 'blur'}
+          {required: true, message: this.$t('login-form.box.form-rule-valid-code'), trigger: 'blur'}
         ]
       }
     },
@@ -76,17 +126,47 @@ export default {
     pasCryptor: {
       type: String,
       default: 'sm3'
+    },
+    captchaMethod:{type: String},
+    showForgetPassword:{type: String},
+    showRememberMe:{
+      type: String,
+      default: '1'
+    },
+    passwordRetrievalMethod:{type: Array},
+    smConfigId:{type: String},
+    templateId:{type: String},
+    mailConfigId:{type: String},
+    isSlideVerify:{type: Boolean},
+    isWordClickVerify:{type: Boolean},
+    buttonText: {type:String}, // 初始按钮文本
+    isDisabled: {type:Boolean},
+    channelDataList:{
+      type: Array,
     }
   },
   data() {
     return {
+      ValidNumText: this.t('login-form.other.get-valid-code'),
+      selectedLoginMethod: null,
       form: {
         userName: '',
         password: '',
         validCode: ''
       },
       rememberMe: false,
-      validCodeId: ''
+      validCodeId: '',
+      countDown: 60,
+      countDownNum: 60,
+    }
+  },
+  watch: {
+    // 监听channelDataList，当有数据时设置默认选中
+    channelDataList(newVal) {
+      if (newVal && newVal.length > 0 && !this.selectedLoginMethod) {
+        this.selectedLoginMethod = newVal[0].channelName;
+        this.$emit('login-method-change', this.selectedLoginMethod);
+      }
     }
   },
   computed: {
@@ -112,6 +192,11 @@ export default {
     }
   },
   methods: {
+    //添加切换选中逻辑
+    selectLoginMethod(method) {
+      this.selectedLoginMethod = method;
+      this.$emit('login-method-change', this.selectedLoginMethod);
+    },
     getCryptorPassword(password, validCode , cryptoMethod) {
       return crypto.encrypt(
           crypto.encrypt(password, cryptoMethod, true) + validCode,
@@ -119,9 +204,136 @@ export default {
           false
       )
     },
+    getVaildCode() {
+      let self = this;
+      if (self.ValidNumText == self.t('login-form.other.get-valid-code')) {
+        self.ValidNumText = self.countDown + self.t('login-form.other.get-valid-code-later');
+        self.clock = window.setInterval(() => {
+          self.countDown--;
+          self.ValidNumText = self.countDown + self.t('login-form.other.get-valid-code-later');
+          if (self.countDown <= 0) {
+            window.clearInterval(self.clock);
+            self.ValidNumText = self.t('login-form.other.get-valid-code');
+            self.countDown = self.countDownNum;
+          }
+        }, 1000);
+        let param
+        let url
+        if(self.captchaMethod === self.t('login-form.other.captcha-method-mail')){
+          url = config.upmsServerContext + "/anon/user/sendMailForLogin"
+          param = {
+            userId: self.form.userName,
+            //mailAddress: self.form.mailAddress
+            validCodeId: self.validCodeId,
+            mailConfigId: self.mailConfigId
+          };
+        }
+        if(self.captchaMethod === self.t('login-form.other.captcha-method-sms')){
+          url = config.upmsServerContext + "/anon/user/sendSmsForLogin"
+          param = {
+            userId: self.form.userName,
+            //phoneNumber: self.form.phoneNumber
+            validCodeId: self.validCodeId,
+            smConfigId: self.smConfigId,
+            templateId: self.templateId
+          }
+        }
+        if (self.form.userName && self.form.userName.trim().length > 0){
+          ajax
+              .post(url, param)
+              .then(function(resp) {
+                    if (resp.data.code == 200) {
+                      self.$Message.success({
+                        content: self.t('login-form.other.send-success'),})
+                    } else {
+                      self.$Message.error(resp.data.data);
+                      window.clearInterval(self.clock);
+                      self.ValidNumText = self.t('login-form.other.get-valid-code');
+                      self.countDown = self.countDownNum;
+                    }
+                  }
+              );
+        }else{
+          self.$Message.error(self.t('login-form.box.form-user-name'));
+          window.clearInterval(self.clock);
+          self.ValidNumText = self.t('login-form.other.get-valid-code');
+          self.countDown = self.countDownNum;
+        }
+      }
+    },
+    showSlideVerify(){
+      if (this.form.userName && this.form.userName.trim().length > 0){
+        let params = {
+          userName: this.form.userName,
+          password: this.form.password,
+          validCodeInput: this.form.validCode,
+          validCodeId: this.validCodeId
+        }
+        if (this.pasCryptor) {
+          params.pasCryptor = this.pasCryptor;
+          params.pasEncode = this.getCryptorPassword(this.form.password,this.form.validCode,this.pasCryptor);
+        } else {
+          params.pasMd5 = this.getCryptorPassword(this.form.password,this.form.validCode,'md5');
+          params.pasSm3 = this.getCryptorPassword(this.form.password,this.form.validCode,'sm3');
+        }
+        this.$emit('show-slide-verify', true,params)
+
+        this.setLocalUserId(this.form.userName)
+        if (this.rememberMe == true) {
+          this.setLocalStorage(this.form.userName)
+        }
+        if (this.rememberMe == false) {
+          this.clearLocalStorage();
+        }
+      }else{
+        this.$Message.error(this.t('login-form.box.form-user-name'));
+      }
+    },
+    showWordClickVerify(){
+      if (this.form.userName && this.form.userName.trim().length > 0){
+        let params = {
+          userName: this.form.userName,
+          password: this.form.password,
+          validCodeInput: this.form.validCode,
+          validCodeId: this.validCodeId
+        }
+        if (this.pasCryptor) {
+          params.pasCryptor = this.pasCryptor;
+          params.pasEncode = this.getCryptorPassword(this.form.password,this.form.validCode,this.pasCryptor);
+        } else {
+          params.pasMd5 = this.getCryptorPassword(this.form.password,this.form.validCode,'md5');
+          params.pasSm3 = this.getCryptorPassword(this.form.password,this.form.validCode,'sm3');
+        }
+        this.$emit('show-word-click-verify', true, params, this.captchaMethod)
+
+        this.setLocalUserId(this.form.userName)
+        if (this.rememberMe == true) {
+          this.setLocalStorage(this.form.userName)
+        }
+        if (this.rememberMe == false) {
+          this.clearLocalStorage();
+        }
+      }else{
+        this.$Message.error(this.t('login-form.box.form-user-name'));
+      }
+    },
     handleSubmit() {
       this.$refs.loginForm.validate((valid) => {
-        if (valid) {
+        if (this.captchaMethod === this.t('login-form.other.captcha-method-message-center') && !this.selectedLoginMethod) {
+          this.$Message.error(this.t('login-form.box.form-rule-choose-verify-method'));
+          return
+        }
+        if(valid && this.captchaMethod == this.t('login-form.other.captcha-method-slide-image')
+            && !this.isSlideVerify){
+          this.$Message.error(this.t('login-form.box.form-rule-click-login'));
+        }
+        const isWordClickMethod = this.captchaMethod === '文字点选' || this.captchaMethod === '语序点选' || this.captchaMethod === '旋转验证码'
+        if(valid && isWordClickMethod && !this.isWordClickVerify){
+          this.$Message.error(this.t('login-form.box.form-rule-click-login'));
+        }
+        if (valid && ((this.captchaMethod == this.t('login-form.other.captcha-method-slide-image')
+            && this.isSlideVerify) || (isWordClickMethod && this.isWordClickVerify)
+            || (!isWordClickMethod && this.captchaMethod != this.t('login-form.other.captcha-method-slide-image')))) {
           let params = {
             userName: this.form.userName,
             password: this.form.password,
@@ -136,6 +348,7 @@ export default {
             params.pasSm3 = this.getCryptorPassword(this.form.password,this.form.validCode,'sm3');
           }
           this.$emit('on-success-valid', params)
+          this.setLocalUserId(this.form.userName)
           if (this.rememberMe == true) {
             this.setLocalStorage(this.form.userName)
           }
@@ -154,6 +367,9 @@ export default {
     setLocalStorage(name) {
       setLocalStorage("username", name);
     },
+    setLocalUserId(name){
+      setLocalStorage('userId',name)
+    },
     clearLocalStorage() {
       removeLocalStorage("username");
     }
@@ -161,9 +377,14 @@ export default {
   mounted() {
     this.getCaptcha();
     this.getLocalStorage();
+    // 新增：初始化时检查 channelDataList
+    if (this.channelDataList && this.channelDataList.length > 0 && !this.selectedLoginMethod) {
+      this.selectedLoginMethod = this.channelDataList[0].channelName;
+      this.$emit('login-method-change', this.selectedLoginMethod);
+    }
   }
 }
 </script>
 <style lang="less">
-@import 'styles/css/login-form';
+ @import 'styles/css/login-form';
 </style>

package/src/login-page.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="lambo-login" :style="backGroundStyle">
     <div class="lambo-login-con" :style="formStyle">
-      <Card :bordered="false" icon="log-in" title="欢迎登录">
+      <Card :bordered="false" icon="log-in" :title="t('login-page.box.welcome-login')">
         <div class="lambo-form-con">
           <LamboLoginForm ref="login" :loading="formLoading"
                           :captcha-img-url="formCaptchaImgUrl"
@@ -15,9 +15,11 @@
 
 <script>
 import LamboLoginForm from './login-form'
+import Locale from "@lambo-design/core/src/mixins/locale";
 
 export default {
   name: 'LamboLoginPage',
+  mixins: [Locale],
   components: {
     LamboLoginForm
   },

package/src/login-qr.vue

@@ -0,0 +1,559 @@
+<template>
+  <div class="lambo-login-qrcode" :class="wxQrClass">
+    <!-- 二维码加载状态 -->
+    <div v-if="loading" class="qrcode-loading">
+      <Icon type="ios-loading" size="24" spin></Icon>
+      <span>{{ t('login-form.other.loading') }}</span>
+    </div>
+    <!-- 二维码显示区域 -->
+    <div class="qrcode-img-wrapper">
+      <!-- 企业微信登录 -->
+      <div v-if="currentLoginType === 'wechat'" class="qrcode-item">
+        <div id="ww_login"></div>
+      </div>
+      <!-- 钉钉登录 -->
+      <div v-if="currentLoginType === 'dingtalk'" class="qrcode-item">
+        <div id="dingtalk_login"></div>
+      </div>
+    </div>
+    <div class="login-type-switch">
+      <img
+          v-if="isWx"
+          class="switch-item"
+          :src="wxImg"
+          :class="{ active: currentLoginType === 'wechat' }"
+          @click="switchLoginType('wechat')"
+          alt="企微登录"
+      >
+      <img
+          v-if="isDd"
+          class="switch-item"
+          :src="ddImg"
+          :class="{ active: currentLoginType === 'dingtalk' }"
+          @click="switchLoginType('dingtalk')"
+          alt="钉钉登录"
+      >
+    </div>
+    <!--    <div class="qrcode-refresh">
+          <Icon type="ios-refresh" size="16" @click="refreshWeChatQrCode"></Icon>
+          <span>{{ t('login-form.other.refresh-qrcode') }}</span>
+        </div>-->
+  </div>
+</template>
+<script>
+import Locale from "@lambo-design/core/src/mixins/locale";
+import ajax from '@lambo-design/shared/utils/ajax';
+import config from "@lambo-design/shared/config/config";
+import _ from 'lodash'
+import wxImg from './styles/images/wx-img.png'
+import ddImg from './styles/images/dd-img.png'
+export default {
+  name: 'LoginFormQr',
+  mixins: [Locale],
+  components: {
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    qrType:{
+      type: Array,
+      default: ['0','1']
+    },
+    // 企业微信登录模式: 'saas' (SaaS版) 或 'private' (私有化版)
+    wxLoginMode: {
+      type: String,
+      default: 'saas',
+      validator: (value) => ['saas', 'private'].includes(value)
+    },
+    // 私有化版本配置（当 wxLoginMode 为 'private' 时使用）
+    privateWxConfig: {
+      type: Object,
+      default: () => ({
+        appId: '',
+        agentId: '',
+        redirectUri: '',
+        sdkUrl: ''
+      })
+    }
+  },
+  data() {
+    return {
+      bindToken:'',
+      ddClientId: '',
+      wwLoginInstance: null,
+      dingTalkLoginInstance: null,
+      currentLoginType: '',
+      LoginConfig: {},
+      wxImg,
+      ddImg
+    }
+  },
+  computed:{
+    isWx(){
+      return _.some(this.qrType, (item) => item ==='0');
+    },
+    isDd(){
+      return _.some(this.qrType, (item) => item ==='1');
+    },
+    wxQrClass() {
+      return this.wxLoginMode === 'private' ? 'wx-private' : 'wx-saas'
+    }
+  },
+  mounted() {
+    this.currentLoginType = this.qrType.includes('0') ? 'wechat' : 'dingtalk';
+    this.initLoginInstance();
+  },
+  beforeDestroy() {
+    this.destroyWwLogin();
+    this.destroyDingTalkLogin();
+  },
+  methods: {
+    loadWxWorkSdk() {
+      return new Promise((resolve) => {
+        if (typeof ww !== 'undefined' || typeof WwLogin !== 'undefined') {
+          resolve();
+          return;
+        }
+        const script = document.createElement('script');
+        // 根据登录模式选择不同的SDK
+        if (this.wxLoginMode === 'private') {
+          // 私有化版本SDK，优先使用传入的地址
+          script.src = this.privateWxConfig.sdkUrl;
+        } else {
+          // SaaS版本SDK
+          script.src = 'https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-2.3.3.js';
+        }
+        script.onload = resolve;
+        document.head.appendChild(script);
+      });
+    },
+    // 加载钉钉SDK - 改写成Promise写法
+    loadDingTalkSdk() {
+      return new Promise((resolve) => {
+        if (typeof window.DTFrameLogin !== 'undefined') {
+          console.log('钉钉SDK已存在，直接使用');
+          resolve();
+          return;
+        }
+        console.log('开始加载钉钉登录脚本...');
+        const script = document.createElement('script');
+        script.src = 'https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js';
+        script.onload = () => {
+          console.log('钉钉登录脚本加载成功');
+          resolve();
+        };
+        document.head.appendChild(script);
+      });
+    },
+    async initWwLogin() {
+      // 确保容器存在且实例未创建
+      if (!document.getElementById('ww_login') || this.wwLoginInstance) {
+        return;
+      }
+
+      if (this.wxLoginMode === 'private') {
+        // 私有化版本初始化
+        await this.initPrivateWwLogin();
+      } else {
+        // SaaS版本初始化
+        await this.initSaasWwLogin();
+      }
+    },
+
+    // 私有化版本企业微信登录初始化
+    async initPrivateWwLogin() {
+      try {
+        this.wwLoginInstance = window.WwLogin({
+          "id": "ww_login",
+          "appid": this.privateWxConfig.appId,
+          "agentid": this.privateWxConfig.agentId,
+          "redirect_uri": this.privateWxConfig.redirectUri,
+          "state": 'state_' + Date.now(),
+          "href": ""
+        });
+        console.log('✅ 私有化企业微信登录组件初始化成功');
+      } catch (error) {
+        console.error('❌ 初始化私有化企业微信登录组件失败：', error);
+      }
+    },
+
+    // SaaS版本企业微信登录初始化
+    async initSaasWwLogin() {
+      let appId;
+      let agentId;
+      let res = await ajax.get(config.authServerContext + '/sso/wxcp/getWxInfo');
+      if (res.data.code === 1) {
+        appId = res.data.data.appId;
+        agentId = res.data.data.agentId;
+      }
+      this.LoginConfig = {
+        login_type: 'CorpApp',
+        appid: appId,
+        agentid: agentId,
+        redirect_uri: window.location.origin + config.authServerContext +'/sso/wxcp/getCode',
+        state: 'state_' + Date.now(),
+        redirect_type: 'callback',
+        quick_login: false,
+        panel_size:'small'
+      };
+      try {
+        this.wwLoginInstance = ww.createWWLoginPanel({
+          el: '#ww_login',
+          params: this.LoginConfig,
+          onLoginSuccess: this.handleLoginSuccess,
+          onLoginFail: this.handleLoginFail
+        });
+        console.log('✅ SaaS企业微信登录组件初始化成功');
+      } catch (error) {
+        console.error('❌ 初始化SaaS企业微信登录组件失败：', error);
+      }
+    },
+    handleLoginSuccess({ code }) {
+      console.log('获取到授权码 code：', code);
+      ajax.get(config.authServerContext+'/sso/wxcp/getCode?code='+code +'&state='+this.LoginConfig.state+'&corpId='+this.LoginConfig.appid+'&agentId='+this.LoginConfig.agentid)
+          .then(response => {
+            if(response.data.code === 1){
+              let token = response.data.token;
+              if (!token) {
+                this.$Message.error('登录失败,token为空');
+                return;
+              }
+              this.$emit('login-success', { token });
+            }else if(response.data.code === 119){
+              this.$emit('need-bind', {bindToken: response.data.token ,bindType:'wx'});
+            }else {
+              this.$Message.error(response.data.msg);
+            }
+          }).catch(e => {
+        console.error(e);
+        this.$Message.error('登录失败');
+      });
+    },
+    handleLoginFail(err) {
+      console.error('扫码登录失败：', err);
+      // 可以根据 err.errCode 给用户友好提示
+      this.$Message.error(err);
+    },
+    destroyWwLogin() {
+      if (this.wwLoginInstance) {
+        const container = document.getElementById('ww_login');
+        if (container) {
+          container.innerHTML = ''; // 清空容器
+        }
+        this.wwLoginInstance = null;
+        console.log('企业微信登录实例已销毁');
+      }
+
+    },
+    destroyDingTalkLogin() {
+      const container = document.getElementById('dingtalk_login');
+      if (container) {
+        container.innerHTML = '';
+      }
+
+      this.dingTalkLoginInstance = null;
+      console.log('钉钉登录实例已销毁');
+    },
+
+    async initDingTalkLogin() {
+      const container = document.getElementById('dingtalk_login');
+      if (!container || this.dingTalkLoginInstance) {
+        console.error('容器不存在或实例已创建');
+        return;
+      }
+
+      try {
+        console.log('开始初始化钉钉登录组件...');
+        let res = await ajax.get(config.authServerContext + '/sso/dd/getClientId')
+        if (res && res.data && res.data.code === 1) {
+          this.ddClientId = res.data.data;
+        }
+        // 获取完整的URL地址
+        const fullUrl = window.location.origin+'/ibp/homeIndex';
+
+        container.innerHTML = '';
+        this.dingTalkLoginInstance = window.DTFrameLogin(
+            {
+              id: 'dingtalk_login',
+              width: 260,
+              height: 260, // 正方形二维码更美观
+            },
+            {
+              redirect_uri: encodeURIComponent(fullUrl),
+              client_id: this.ddClientId,
+              scope: 'openid',
+              response_type: 'code',
+              state: '1',
+              prompt: 'consent',
+            },
+            (loginResult) => {
+              console.log('钉钉登录成功，结果：', loginResult);
+              const {redirectUrl, authCode, state } = loginResult;
+              if (authCode) {
+                this.handleDingTalkLoginSuccess(redirectUrl, authCode, state);
+              } else {
+                console.error('钉钉登录成功但未返回authCode');
+                this.$Message.error('钉钉登录失败：未获取到授权码');
+              }
+            },
+            (errors) => {
+              console.error('钉钉登录失败：', errors);
+              this.$Message.error(`钉钉登录失败: ${errors}`);
+            }
+        );
+
+        console.log('✅ 钉钉登录组件初始化成功，实例：', this.dingTalkLoginInstance);
+      } catch (error) {
+        console.error('❌ 初始化钉钉登录组件失败：', error);
+        console.error('错误详情：', error.stack);
+        this.$Message.error('初始化钉钉登录组件失败，请刷新页面重试');
+      }
+    },
+    handleDingTalkLoginSuccess(redirectUrl, authCode, state) {
+      const urlParams = new URLSearchParams(window.location.search);
+      const redirect_uri = urlParams.get('redirect_uri');
+      const finalRedirectUrl = redirect_uri ? decodeURIComponent(redirect_uri) : (window.location.origin + '/ibp/homeIndex');
+
+      ajax.get(config.authServerContext + '/sso/dd/ddLogin?code=' + authCode + '&redirect_uri=' + encodeURIComponent(finalRedirectUrl)).then((resp) => {
+        if (resp.data.code === 1) {
+          let token = resp.data.data;
+          if (!token) {
+            this.$Message.error('登录失败,token为空');
+            return;
+          }
+          this.$emit('login-success', {token});
+        } else if (resp.data.code === 119) {
+          this.$emit('need-bind', {bindToken: resp.data.data, bindType: 'dd'});
+        } else {
+          this.$Message.error(resp.data.msg);
+        }
+      }).catch(e => {
+        console.error(e);
+        this.$Message.error('登录失败');
+      });
+    },
+
+
+    initLoginInstance() {
+      // 先销毁所有实例
+      this.destroyAllInstances();
+
+      // 根据当前登录类型初始化
+      if (this.currentLoginType === 'wechat') {
+        this.loadWxWorkSdk().then(() => {
+          this.initWwLogin();
+        });
+      } else if (this.currentLoginType === 'dingtalk') {
+        // 使用新的Promise方法加载钉钉SDK
+        this.loadDingTalkSdk().then(() => {
+          this.initDingTalkLogin();
+        });
+      }
+    },
+
+    // 销毁所有实例
+    destroyAllInstances() {
+      this.destroyWwLogin();
+      this.destroyDingTalkLogin();
+    },
+
+    // 切换登录类型
+    switchLoginType(type) {
+      if (this.currentLoginType !== type) {
+        this.currentLoginType = type;
+        this.initLoginInstance();
+      }
+    },
+
+    // handleBind({ userName, password, validCodeInput, validCodeId, bindToken }) {
+    //   const self = this;
+    //   console.log("跳转绑定")
+    //   return new Promise((resolve, reject) => {
+    //     ajax.post(config.authServerContext+'/sso/wxcp/bindAndLogin', {
+    //       bindToken:bindToken,
+    //       mmrm: userName,
+    //       mcmm: password,
+    //       validCodeId: validCodeId,
+    //       validCodeInput: validCodeInput
+    //     }).then(response => {
+    //       if (response.data.code === 1) {
+    //         self.$Message.success('绑定成功');
+    //         window.location.href = response.data.data;
+    //       } else {
+    //         self.$Message.error(response.data.message || '绑定失败');
+    //         reject(new Error(response.data.message || '绑定失败'));
+    //       }
+    //     }).catch(e => {
+    //       console.error(e);
+    //       self.$Message.error('绑定失败');
+    //       reject(e);
+    //     });
+    //   });
+    // },
+//     initQrCode(){
+// // 初始化登录组件
+//        const fullUrl = "http://37fe3689.r9.cpolar.cn/ibp-auth-server/sso/wxcp/getCode";
+//       const wwLogin = ww.createWWLoginPanel({
+//         el: '#ww_login',
+//         params: {
+//           login_type: 'CorpApp',
+//           appid: 'ww107f970a51840bcc',
+//           agentid: '1000006',
+//           redirect_uri: fullUrl,
+//           panel_size: 'small',
+//           state: 'login_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9),
+//           redirect_type: 'callback',
+//         },
+//         onCheckWeComLogin({ isWeComLogin }) {
+//           console.log(isWeComLogin)
+//         },
+//         onLoginSuccess({ code }) {
+//           console.log({ code })
+//           // 发送登录成功事件，传递code给父组件
+//           this.$emit('login-success', { code })
+//         },
+//         onLoginFail(err) {
+//           console.log(err)
+//           // 发送登录失败事件
+//           this.$emit('login-fail', err)
+//         },
+//       })
+//     },
+  }
+}
+</script>
+<style scoped>
+.lambo-login-qrcode {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  text-align: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+.qrcode-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: #00000073;
+}
+
+.qrcode-img-wrapper {
+  height: 260px !important;
+  min-height: 260px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+
+.qrcode-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 10px;
+}
+
+/* 登录类型切换样式 */
+.login-type-switch {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 15px;
+  border-radius: 4px;
+  background-color: transparent; /* 去掉灰色背景 */
+  padding: 0; /* 移除内边距 */
+  width: fit-content;
+  margin: 0px auto 15px; /* 向上平移10px */
+}
+
+.switch-item {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  cursor: pointer;
+  transition: all 0.3s;
+  user-select: none;
+  margin: 0 10px;
+  border: 2px solid transparent;
+}
+
+.switch-item.active {
+  border-color: #1890ff;
+  box-shadow: none;
+}
+
+
+/* 企业微信登录组件容器 */
+.wx-saas {
+  #ww_login {
+    width: 100% !important;
+    max-width: 220px !important;
+    margin: 0 auto !important;
+    display: block !important;
+  }
+  .lambo-login-qrcode ::v-deep #ww_login iframe,
+  .qrcode-img-wrapper ::v-deep iframe {
+    position: relative;
+    top: -60px !important;
+    height: 360px !important;
+    border: none !important;
+    width: 100% !important;
+    overflow: hidden !important;
+  }
+}
+.wx-private {
+  #ww_login {
+    width: 100% !important;
+    margin: 0 auto !important;
+    display: block !important;
+  }
+  .lambo-login-qrcode ::v-deep #ww_login iframe,
+  .qrcode-img-wrapper ::v-deep iframe {
+    position: relative;
+    top: 25px !important;
+    height: 400px !important;
+    border: none !important;
+    width: 100% !important;
+    overflow: hidden !important;
+  }
+
+  .qrcode-img-wrapper {
+    height: 400px !important;
+    min-height: 260px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
+    position: relative;
+  }
+}
+/* 钉钉登录组件容器 */
+#dingtalk_login {
+  width: 100% !important;
+  max-width: 260px !important;
+  height: 260px !important;
+  margin: 0 auto !important;
+  display: block !important;
+  overflow: hidden;
+}
+
+/* 钉钉iframe样式 - 减少上方留白 */
+.lambo-login-qrcode ::v-deep #dingtalk_login iframe,
+.qrcode-img-wrapper ::v-deep iframe {
+  position: relative;
+  top: -60px !important;
+  height: 360px !important;
+  border: none !important;
+  width: 100% !important;
+  overflow: hidden !important;
+}
+</style>

package/src/styles/css/login-form.less

@@ -1,3 +1,10 @@
+.login-method-label {
+  font-family: Source Han Sans CN;
+  color: #333333;
+  opacity: 0.4;
+  display: block;
+  margin-bottom: 8px;
+}
 .lambo-login-form {
   .ivu-input-group-prepend {
     .prefix {
@@ -5,15 +12,23 @@
       height: 13px;
     }
   }
+  .captcha-container {
+    .ivu-form-item-content {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      align-items: center;
+    }
+  }
   .captcha {
     width: calc(100% - 100px);
   }
   .Imgbox {
     width: 90px;
-    height: 33px;
-    float: right;
-    padding: 2px;
-    margin-top: -33px;
+    height: var(--input-height-base, 33px);
+    //float: right;
+    padding: 1px;
+    //margin-top: -33px;
     background-color: #f8f8f9;
     .captchaImg {
       width: 100%;