@pisell/private-materials 3.4.68 → 3.4.69

package/lib/pro/Login2.0/index.less

@@ -1,1009 +1,1009 @@
-/**
- * 登录注册 2.0 组件样式
- * 基于 Figma 设计，总宽 360px
- */
-
-.login2-container {
-  position: relative; /* 为 LegalTerms 组件提供定位基准 */
-  width: 100%;
-  max-width: 360px;
-  min-width: 280px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  
-  /* 默认底部内边距 */
-  padding-bottom: 24px;
-
-  // 加载状态优化
-  .pisell-lowcode-btn-loading-icon {
-    .anticon {
-      color: #ffffff !important;
-    }
-  }
-
-  
-  /* 在弹窗模式下不需要额外的底部内边距，因为使用 sticky 定位 */
-  .pisell-lowcode-modal-body & {
-    padding-top: 24px;
-    padding-bottom: 24px;
-  }
-
-
-  .login2-header{
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-
-    .login2-header-top{
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-
-    .login2-header-bottom{
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-  }
-
-  // Logo 样式
-  .login2-logo {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0;
-
-    &.left {
-      justify-content: flex-start;
-    }
-
-    &.center {
-      justify-content: center;
-    }
-
-    &.right {
-      justify-content: flex-end;
-    }
-
-    img {
-      object-fit: contain;
-    }
-  }
-
-  // 标题样式
-  .login2-title {
-    font-size: 20px;
-    font-weight: 500;
-    line-height: 30px;
-    color: #101828;
-    margin-bottom: 0;
-  }
-
-  // 副标题样式
-  .login2-subtitle {
-    color: #101828;
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 32px;
-    margin-bottom: 0;
-  }
-
-  // 描述样式
-  .login2-desc {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
-    color: #475467;
-    word-wrap: break-word;
-    margin: 0;
-  }
-
-  // 标签页样式
-  .login2-tabs {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-    margin-bottom: 32px;
-    border-bottom: 1px solid #eaecf0;
-
-    .tab {
-      flex: 1;
-      text-align: center;
-      padding: 12px 16px;
-      font-size: 14px;
-      font-weight: 600;
-      line-height: 20px;
-      color: #667085;
-      cursor: pointer;
-      position: relative;
-      transition: all 0.2s;
-
-      &.active {
-        color: var(--theme-color, #7f56d9);
-
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: -1px;
-          left: 0;
-          right: 0;
-          height: 2px;
-          background: var(--theme-color, #7f56d9);
-        }
-      }
-
-      &:hover:not(.active) {
-        color: #344054;
-      }
-    }
-  }
-
-  // 内容区域
-  .login2-content {
-    width: 100%;
-    padding-bottom: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-
-  // 表单样式
-  .login2-form {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-
-    .pisell-lowcode-form-item {
-      margin-bottom: 0;
-    }
-
-    .pisell-lowcode-form-item-label {
-      padding-bottom: 0;
-
-      > label {
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 20px;
-        color: #344054;
-
-        &::before {
-          display: none !important;
-        }
-      }
-    }
-
-    // 输入框样式
-    .login2-input {
-      height: 44px;
-      border-radius: 8px;
-      border: 1px solid #d0d5dd;
-      background: #ffffff;
-      font-size: 16px;
-      padding: 10px 14px;
-      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-
-      &:hover {
-        border-color: var(--theme-color, #7f56d9);
-      }
-
-      &:focus,
-      &.pisell-lowcode-input-focused {
-        border-color: var(--theme-color, #7f56d9);
-        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-          0px 0px 0px 4px rgba(127, 86, 217, 0.1);
-      }
-
-      &::placeholder {
-        color: #98a2b3;
-        font-size: 16px;
-      }
-
-      // 密码输入框
-      &.pisell-lowcode-input-password {
-        padding: 10px 14px;
-
-        .pisell-lowcode-input {
-          height: auto;
-          padding: 0;
-          font-size: 16px;
-        }
-
-        .pisell-lowcode-input-suffix {
-          color: #667085;
-        }
-      }
-    }
-
-    // 验证方式选择器
-    .verification-method-selector {
-      display: flex;
-      gap: 8px;
-      margin-bottom: 20px;
-
-      .method-option {
-        flex: 1;
-        text-align: center;
-        padding: 8px 12px;
-        border: 1px solid #d0d5dd;
-        border-radius: 8px;
-        font-size: 14px;
-        font-weight: 500;
-        color: #344054;
-        cursor: pointer;
-        transition: all 0.2s;
-
-        &:hover {
-          border-color: var(--theme-color, #7f56d9);
-          color: var(--theme-color, #7f56d9);
-        }
-
-        &.active {
-          border-color: var(--theme-color, #7f56d9);
-          background: rgba(127, 86, 217, 0.05);
-          color: var(--theme-color, #7f56d9);
-        }
-      }
-    }
-
-    // 验证码输入框
-    .verification-code-input {
-      display: flex;
-      gap: 8px;
-
-      .pisell-lowcode-input-wrapper {
-        flex: 1;
-      }
-
-      .send-code-button {
-        height: 44px;
-        padding: 10px 16px;
-        border-radius: 8px;
-        border: 1px solid #d0d5dd;
-        background: #ffffff;
-        font-size: 14px;
-        font-weight: 600;
-        color: var(--theme-color, #7f56d9);
-        white-space: nowrap;
-
-        &:hover:not(:disabled) {
-          border-color: var(--theme-color, #7f56d9);
-          background: rgba(127, 86, 217, 0.05);
-        }
-
-        &:disabled {
-          color: #98a2b3;
-          border-color: #eaecf0;
-          background: #f9fafb;
-          cursor: not-allowed;
-        }
-      }
-    }
-
-    // 表单底部
-    .login2-form-footer {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .pisell-lowcode-checkbox-wrapper {
-        font-size: 14px;
-        font-weight: 500;
-        color: #344054;
-
-        .pisell-lowcode-checkbox {
-          .pisell-lowcode-checkbox-inner {
-            width: 16px;
-            height: 16px;
-            border-radius: 4px;
-            border-color: #d0d5dd;
-          }
-
-          &.pisell-lowcode-checkbox-checked {
-            .pisell-lowcode-checkbox-inner {
-              background-color: var(--theme-color, #7f56d9);
-              border-color: var(--theme-color, #7f56d9);
-            }
-          }
-        }
-      }
-
-      .forgot-password {
-        font-size: 14px;
-        font-weight: 600;
-        color: var(--theme-color, #7f56d9);
-        cursor: pointer;
-
-        &:hover {
-          color: #6941c6;
-        }
-      }
-    }
-
-    // 提交按钮
-    .login2-submit-button {
-      height: 44px;
-      border-radius: 8px;
-      border: 1px solid var(--custom-button-bg-color, var(--theme-color, #7f56d9));
-      background: var(--custom-button-bg-color, var(--theme-color, #7f56d9));
-      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--custom-button-text-color, #ffffff);
-
-      &:hover:not(:disabled) {
-        background: var(--custom-button-bg-color, #6941c6);
-        border-color: var(--custom-button-bg-color, #6941c6);
-      }
-
-      &:focus {
-        background: var(--custom-button-bg-color, var(--theme-color, #7f56d9));
-        border-color: var(--custom-button-bg-color, var(--theme-color, #7f56d9));
-        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-          0px 0px 0px 4px rgba(127, 86, 217, 0.1);
-      }
-
-      &:disabled {
-        background: #f2f4f7;
-        border-color: #f2f4f7;
-        color: #98a2b3;
-      }
-    }
-  }
-
-  .divider {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0;
-
-    &::before,
-    &::after {
-      content: '';
-      flex: 1;
-      height: 1px;
-      background: #eaecf0;
-    }
-
-    span {
-      padding: 0 12px;
-      font-size: 14px;
-      font-weight: 500;
-      color: #98a2b3;
-    }
-  }
-
-  // OAuth 区域
-  .oauth-section {
-    margin-top: 0;
-
-    .oauth-buttons-container{
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      width: 100%;
-
-      .pisell-lowcode-btn-icon, .ant-btn-icon {
-        margin-right: 0!important;
-      }
-    
-      .oauth-icon{
-        margin-right: 0!important;
-        font-size: 24px;
-      }
-    }
-
-    .oauth-button {
-      height: 44px;
-      border-radius: 8px;
-      border: 1px solid #d0d5dd;
-      // background: #ffffff;
-      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-      font-size: 16px;
-      font-weight: 600;
-      color: #344054;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 12px;
-
-      .anticon {
-        font-size: 24px;
-      }
-
-      &:hover {
-        background: #f9fafb;
-        border-color: #d0d5dd;
-        color: #344054;
-      }
-
-      &.google {
-        .anticon {
-          color: #db4437;
-        }
-      }
-
-      &.facebook {
-        .anticon {
-          color: #1877f2;
-        }
-      }
-
-      &.apple {
-        .anticon {
-          color: #000000;
-        }
-      }
-     
-    }
-  }
-
-  // 底部链接
-  .login2-footer {
-    margin-top: 32px;
-    text-align: center;
-
-    .footer-text {
-      font-size: 14px;
-      font-weight: 400;
-      color: #475467;
-      margin: 0;
-
-      a {
-        font-weight: 600;
-        color: var(--theme-color, #7f56d9);
-        cursor: pointer;
-        margin-left: 4px;
-
-        &:hover {
-          color: #6941c6;
-        }
-      }
-    }
-  }
-}
-
-.register2-container{
-  gap: 32px;
-  padding-bottom: 0;
-  .login-lm-drawer-popover & {
-    padding-bottom: 100px;
-  }
-    // 加载状态优化
-  .pisell-lowcode-btn-loading-icon {
-    .anticon {
-      color: #ffffff !important;
-    }
-  }
-
-}
-
-// 错误提示样式优化
-.pisell-lowcode-form-item-explain-error, .ant-form-item-explain-error {
-  font-size: 14px;
-  color: #f04438;
-  margin-top: 0;
-  text-align: left;
-  margin-bottom: 0;
-}
-
-// 修复错误消息切换时的高度闪动问题
-// 方案：通过固定容器高度和绝对定位，避免多条错误消息同时存在导致的高度变化
-// .login2-form {
-//   .pisell-lowcode-form-item-explain,
-//   .ant-form-item-explain {
-//     // 错误消息容器使用固定高度，避免切换时高度闪动
-//     &-connected {
-//       // 使用最小高度保证单行时不闪动，同时允许根据内容自适应高度
-//       min-height: 22px;
-//       position: relative;
-//       // 平滑过渡
-//       transition: min-height 0.2s ease;
-//     }
-    
-//     // 单个错误消息项默认参与文档流，隐藏时再脱离布局，避免高度闪动
-//     .pisell-lowcode-form-show-help-item,
-//     .ant-form-item-explain-error {
-//       position: relative;
-//       min-height: 22px;
-//       line-height: 22px;
-      
-//       // 隐藏状态（淡出中）时不参与布局计算
-//       &[style*="opacity: 0"][style*="height: 0px"],
-//       &[style*="height: 0px"][style*="opacity: 0"] {
-//         position: absolute;
-//         top: 0;
-//         left: 0;
-//         right: 0;
-//         pointer-events: none;
-//         z-index: 0;
-//       }
-      
-//       // 显示状态时在上层
-//       &[style*="opacity: 1"],
-//       &:not([style*="opacity: 0"]):not([style*="height: 0px"]) {
-//         z-index: 1;
-//       }
-//     }
-//   }
-  
-//   // 如果没有错误消息，容器应该可以隐藏（通过 Ant Design 的默认行为）
-//   // 但这里我们确保有错误消息时容器高度固定
-//   .pisell-lowcode-form-item:not(.pisell-lowcode-form-item-has-error) {
-//     .pisell-lowcode-form-item-explain-connected {
-//       min-height: 0;
-//     }
-//   }
-// }
-// 切换认证方式按钮
-.login2-switch-button {
-  margin-top: 0;
-  height: 44px;
-  border: 1px solid #d0d5dd;
-  border-radius: 8px;
-  font-size: 16px;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    sans-serif;
-  font-weight: 600;
-  color: #344054;
-  background: #ffffff;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  .pisell-lowcode-btn-icon {
-    margin-right: 0!important;
-    font-size: 24px;
-  }
-  svg {
-    flex-shrink: 0;
-  }
-
-  &:hover {
-    border-color: #98a2b3;
-    background: #f9fafb;
-    color: #344054;
-  }
-
-  &:active {
-    border-color: #667085;
-    background: #f2f4f7;
-    color: #344054;
-  }
-
-  &:focus {
-    border-color: var(--theme-color, #7f56d9);
-    box-shadow: 0px 0px 0px 4px rgba(127, 86, 217, 0.12);
-    color: #344054;
-  }
-}
-
-// 底部文案样式
-.login2-footer-text {
-  margin-top: 0;
-  text-align: center;
-  font-size: 14px;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    sans-serif;
-  font-weight: 400;
-  line-height: 20px;
-  color: #475467;
-
-  .login2-link {
-    color: var(--theme-color, #7f56d9);
-    font-weight: 600;
-    cursor: pointer;
-    text-decoration: none;
-    transition: all 0.2s ease;
-
-    &:hover {
-      opacity: 0.8;
-      text-decoration: underline;
-    }
-
-    &:active {
-      opacity: 0.6;
-    }
-  }
-}
-
-// ================ 新增样式 ================
-
-// 验证码输入组
-.login2-container .verification-code-input-group {
-  display: flex;
-  gap: 8px;
-
-  .login2-input {
-    flex: 1;
-  }
-
-  .send-code-button {
-    height: 44px;
-    padding: 10px 16px;
-    border-radius: 8px;
-    border: 1px solid #d0d5dd;
-    background: #ffffff;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--theme-color, #7f56d9);
-    white-space: nowrap;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-
-    &:hover:not(:disabled) {
-      border-color: var(--theme-color, #7f56d9);
-      background: rgba(127, 86, 217, 0.05);
-    }
-
-    &:disabled {
-      color: #98a2b3;
-      border-color: #eaecf0;
-      background: #f9fafb;
-      cursor: not-allowed;
-    }
-  }
-}
-
-// 表单底部
-.login2-container .login2-form-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .login2-link {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--theme-color, #7f56d9);
-    cursor: pointer;
-    text-decoration: none;
-
-    &:hover {
-      color: #6941c6;
-      text-decoration: underline;
-    }
-  }
-}
-
-// 分隔符
-.login2-container .login2-divider {
-  display: flex;
-  align-items: center;
-  margin: 0;
-
-  &::before,
-  &::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: #eaecf0;
-  }
-
-  &::before {
-    margin-right: 12px;
-  }
-
-  &::after {
-    margin-left: 12px;
-  }
-
-  font-size: 14px;
-  font-weight: 500;
-  color: #98a2b3;
-}
-
-// 切换选项区域
-.login2-container .login2-switch-groups {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.login2-container .login2-switch-options {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .login2-switch-option-button {
-    width: 100%;
-    height: 44px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid #d0d5dd;
-    border-radius: 8px;
-    background: #ffffff;
-    color: #344054;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-    padding: 0 16px;
-    position: relative; // 为角标定位提供基准
-
-    .option-icon {
-      font-size: 18px;
-      flex-shrink: 0;
-      margin-right: 12px;
-    }
-
-    // Iconfont 组件样式
-    .anticon {
-      font-size: 24px;
-      flex-shrink: 0;
-      margin-right: 12px;
-    }
-
-    .option-text {
-      flex-shrink: 0;
-    }
-
-    // 上次登录角标样式
-    .last-login-badge {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      color: #B42318;
-      background: #FEE4E2;
-      border-top-left-radius: 8px;
-      border-bottom-right-radius: 8px;
-      font-size: 10px;
-      font-weight: 500;
-      line-height: 1;
-      padding: 2px 6px;
-      white-space: nowrap;
-      z-index: 1;
-      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.1);
-    }
-
-    &:hover {
-      border-color: #98a2b3;
-      background: #f9fafb;
-    }
-
-    &:active {
-      border-color: #667085;
-      background: #f2f4f7;
-    }
-
-    &:focus {
-      border-color: var(--theme-color, #7f56d9);
-      box-shadow: 0px 0px 0px 4px rgba(127, 86, 217, 0.12);
-    }
-  }
-}
-
-// OAuth 按钮
-.login2-container .login2-oauth-button {
-  height: 44px;
-  border: 1px solid #d0d5dd;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #344054;
-  font-size: 16px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  transition: all 0.2s ease;
-  position: relative; // 为角标定位提供基准
-
-  .oauth-icon {
-    font-size: 24px;
-    font-weight: 700;
-    flex-shrink: 0;
-  }
-
-  // Iconfont 组件样式
-  .anticon {
-    font-size: 24px;
-    flex-shrink: 0;
-  }
-
-  // 上次登录角标样式
-  .last-login-badge {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    color: #B42318;
-    background: #FEE4E2;
-    border-top-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    font-size: 10px;
-    font-weight: 500;
-    line-height: 1;
-    padding: 2px 6px;
-    white-space: nowrap;
-    z-index: 1;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.1);
-  }
-
-  &:hover {
-    border-color: #98a2b3;
-    background: #f9fafb;
-    color: #344054;
-  }
-
-  &:active {
-    border-color: #667085;
-    background: #f2f4f7;
-  }
-
-  &:focus {
-    border-color: var(--theme-color, #7f56d9);
-    box-shadow: 0px 0px 0px 4px rgba(127, 86, 217, 0.12);
-  }
-  span {
-    margin-left: 0px !important;
-  }
-}
-
-// 分步骤登录 - 账号显示
-.login2-container .login2-account-display {
-  height: 44px;
-  padding: 10px 14px;
-  border-radius: 8px;
-  border: 1px solid #d0d5dd;
-  background: #f9fafb;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  color: #344054;
-  display: flex;
-  align-items: center;
-  cursor: default;
-}
-
-// Back 按钮
-.login2-container .login2-back-button {
-  height: 44px;
-  border: 1px solid #d0d5dd;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #344054;
-  font-size: 16px;
-  font-weight: 600;
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-
-  &:hover {
-    border-color: #98a2b3;
-    background: #f9fafb;
-    color: #344054;
-  }
-
-  &:active {
-    border-color: #667085;
-    background: #f2f4f7;
-  }
-
-  &:focus {
-    border-color: #d0d5dd;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  }
-}
-
-// PhoneInput 组件样式（无边框，因为组件内部已有边框）
-.login2-phone-input {
-  // PhoneInput 组件内部已有完整的边框样式，这里不需要额外样式
-}
-
-// PhoneInput 组件的 Form.Item 样式修复
-.phone-input-form-item {
-  .ant-form-item-control-input {
-    .ant-form-item-control-input-content {
-      // 移除 Ant Design 默认的输入框边框，因为 PhoneInput 组件内部已有边框
-      .ant-input {
-        border: none !important;
-        box-shadow: none !important;
-
-        &:hover,
-        &:focus,
-        &:focus-within {
-          border: none !important;
-          box-shadow: none !important;
-        }
-      }
-    }
-  }
-
-  // 邮件链接验证页面样式
-  .login2-email-link-verifying,
-  .login2-email-link-error {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 400px;
-
-    .verifying-content,
-    .error-content {
-      text-align: center;
-      max-width: 300px;
-
-      .verifying-icon,
-      .error-icon {
-        margin-bottom: 24px;
-        font-size: 48px;
-
-        .anticon {
-          color: var(--theme-color, #7f56d9);
-        }
-      }
-
-      .error-icon .anticon {
-        color: #f04438;
-      }
-
-      .verifying-title,
-      .error-title {
-        font-size: 24px;
-        font-weight: 600;
-        line-height: 32px;
-        color: #101828;
-        margin-bottom: 8px;
-      }
-
-      .verifying-desc,
-      .error-desc {
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 24px;
-        color: #475467;
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-.login2-error-main-button {
-  margin-top: 32px !important;
-}
-
-/* 切换到注册的提示样式 */
-.login2-register-prompt {
-  margin-top: 0;
-  text-align: center;
-  font-size: 14px;
-  color: #666;
-  
-  .register-prompt-text {
-    margin-right: 4px;
-  }
-  
-  .register-prompt-link {
-    background: none;
-    border: none;
-    color: var(--theme-color, #7F56D9);
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    text-decoration: none;
-    padding: 0;
-    
-    &:hover {
-      text-decoration: underline;
-    }
-    
-    &:focus {
-      outline: none;
-    }
-  }
-}
-
-
-.login2-account-show-text-edit {
-  font-size: 14px;
-  color: #475467;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .login2-account-show-text-edit-icon {
-    margin-left: 10px;
-    font-size: 20px;
-    cursor: pointer;
-    color: #7F56D9;
-  } 
+/**
+ * 登录注册 2.0 组件样式
+ * 基于 Figma 设计，总宽 360px
+ */
+
+.login2-container {
+  position: relative; /* 为 LegalTerms 组件提供定位基准 */
+  width: 100%;
+  max-width: 360px;
+  min-width: 280px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  
+  /* 默认底部内边距 */
+  padding-bottom: 24px;
+
+  // 加载状态优化
+  .pisell-lowcode-btn-loading-icon {
+    .anticon {
+      color: #ffffff !important;
+    }
+  }
+
+  
+  /* 在弹窗模式下不需要额外的底部内边距，因为使用 sticky 定位 */
+  .pisell-lowcode-modal-body & {
+    padding-top: 24px;
+    padding-bottom: 24px;
+  }
+
+
+  .login2-header{
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .login2-header-top{
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .login2-header-bottom{
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
+
+  // Logo 样式
+  .login2-logo {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0;
+
+    &.left {
+      justify-content: flex-start;
+    }
+
+    &.center {
+      justify-content: center;
+    }
+
+    &.right {
+      justify-content: flex-end;
+    }
+
+    img {
+      object-fit: contain;
+    }
+  }
+
+  // 标题样式
+  .login2-title {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 30px;
+    color: #101828;
+    margin-bottom: 0;
+  }
+
+  // 副标题样式
+  .login2-subtitle {
+    color: #101828;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 32px;
+    margin-bottom: 0;
+  }
+
+  // 描述样式
+  .login2-desc {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    color: #475467;
+    word-wrap: break-word;
+    margin: 0;
+  }
+
+  // 标签页样式
+  .login2-tabs {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 32px;
+    border-bottom: 1px solid #eaecf0;
+
+    .tab {
+      flex: 1;
+      text-align: center;
+      padding: 12px 16px;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+      color: #667085;
+      cursor: pointer;
+      position: relative;
+      transition: all 0.2s;
+
+      &.active {
+        color: var(--theme-color, #7f56d9);
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: -1px;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background: var(--theme-color, #7f56d9);
+        }
+      }
+
+      &:hover:not(.active) {
+        color: #344054;
+      }
+    }
+  }
+
+  // 内容区域
+  .login2-content {
+    width: 100%;
+    padding-bottom: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  // 表单样式
+  .login2-form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .pisell-lowcode-form-item {
+      margin-bottom: 0;
+    }
+
+    .pisell-lowcode-form-item-label {
+      padding-bottom: 0;
+
+      > label {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        color: #344054;
+
+        &::before {
+          display: none !important;
+        }
+      }
+    }
+
+    // 输入框样式
+    .login2-input {
+      height: 44px;
+      border-radius: 8px;
+      border: 1px solid #d0d5dd;
+      background: #ffffff;
+      font-size: 16px;
+      padding: 10px 14px;
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+
+      &:hover {
+        border-color: var(--theme-color, #7f56d9);
+      }
+
+      &:focus,
+      &.pisell-lowcode-input-focused {
+        border-color: var(--theme-color, #7f56d9);
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+          0px 0px 0px 4px rgba(127, 86, 217, 0.1);
+      }
+
+      &::placeholder {
+        color: #98a2b3;
+        font-size: 16px;
+      }
+
+      // 密码输入框
+      &.pisell-lowcode-input-password {
+        padding: 10px 14px;
+
+        .pisell-lowcode-input {
+          height: auto;
+          padding: 0;
+          font-size: 16px;
+        }
+
+        .pisell-lowcode-input-suffix {
+          color: #667085;
+        }
+      }
+    }
+
+    // 验证方式选择器
+    .verification-method-selector {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 20px;
+
+      .method-option {
+        flex: 1;
+        text-align: center;
+        padding: 8px 12px;
+        border: 1px solid #d0d5dd;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #344054;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+          border-color: var(--theme-color, #7f56d9);
+          color: var(--theme-color, #7f56d9);
+        }
+
+        &.active {
+          border-color: var(--theme-color, #7f56d9);
+          background: rgba(127, 86, 217, 0.05);
+          color: var(--theme-color, #7f56d9);
+        }
+      }
+    }
+
+    // 验证码输入框
+    .verification-code-input {
+      display: flex;
+      gap: 8px;
+
+      .pisell-lowcode-input-wrapper {
+        flex: 1;
+      }
+
+      .send-code-button {
+        height: 44px;
+        padding: 10px 16px;
+        border-radius: 8px;
+        border: 1px solid #d0d5dd;
+        background: #ffffff;
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--theme-color, #7f56d9);
+        white-space: nowrap;
+
+        &:hover:not(:disabled) {
+          border-color: var(--theme-color, #7f56d9);
+          background: rgba(127, 86, 217, 0.05);
+        }
+
+        &:disabled {
+          color: #98a2b3;
+          border-color: #eaecf0;
+          background: #f9fafb;
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    // 表单底部
+    .login2-form-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .pisell-lowcode-checkbox-wrapper {
+        font-size: 14px;
+        font-weight: 500;
+        color: #344054;
+
+        .pisell-lowcode-checkbox {
+          .pisell-lowcode-checkbox-inner {
+            width: 16px;
+            height: 16px;
+            border-radius: 4px;
+            border-color: #d0d5dd;
+          }
+
+          &.pisell-lowcode-checkbox-checked {
+            .pisell-lowcode-checkbox-inner {
+              background-color: var(--theme-color, #7f56d9);
+              border-color: var(--theme-color, #7f56d9);
+            }
+          }
+        }
+      }
+
+      .forgot-password {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--theme-color, #7f56d9);
+        cursor: pointer;
+
+        &:hover {
+          color: #6941c6;
+        }
+      }
+    }
+
+    // 提交按钮
+    .login2-submit-button {
+      height: 44px;
+      border-radius: 8px;
+      border: 1px solid var(--custom-button-bg-color, var(--theme-color, #7f56d9));
+      background: var(--custom-button-bg-color, var(--theme-color, #7f56d9));
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--custom-button-text-color, #ffffff);
+
+      &:hover:not(:disabled) {
+        background: var(--custom-button-bg-color, #6941c6);
+        border-color: var(--custom-button-bg-color, #6941c6);
+      }
+
+      &:focus {
+        background: var(--custom-button-bg-color, var(--theme-color, #7f56d9));
+        border-color: var(--custom-button-bg-color, var(--theme-color, #7f56d9));
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+          0px 0px 0px 4px rgba(127, 86, 217, 0.1);
+      }
+
+      &:disabled {
+        background: #f2f4f7;
+        border-color: #f2f4f7;
+        color: #98a2b3;
+      }
+    }
+  }
+
+  .divider {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0;
+
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: #eaecf0;
+    }
+
+    span {
+      padding: 0 12px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #98a2b3;
+    }
+  }
+
+  // OAuth 区域
+  .oauth-section {
+    margin-top: 0;
+
+    .oauth-buttons-container{
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      width: 100%;
+
+      .pisell-lowcode-btn-icon, .ant-btn-icon {
+        margin-right: 0!important;
+      }
+    
+      .oauth-icon{
+        margin-right: 0!important;
+        font-size: 24px;
+      }
+    }
+
+    .oauth-button {
+      height: 44px;
+      border-radius: 8px;
+      border: 1px solid #d0d5dd;
+      // background: #ffffff;
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+      font-size: 16px;
+      font-weight: 600;
+      color: #344054;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+
+      .anticon {
+        font-size: 24px;
+      }
+
+      &:hover {
+        background: #f9fafb;
+        border-color: #d0d5dd;
+        color: #344054;
+      }
+
+      &.google {
+        .anticon {
+          color: #db4437;
+        }
+      }
+
+      &.facebook {
+        .anticon {
+          color: #1877f2;
+        }
+      }
+
+      &.apple {
+        .anticon {
+          color: #000000;
+        }
+      }
+     
+    }
+  }
+
+  // 底部链接
+  .login2-footer {
+    margin-top: 32px;
+    text-align: center;
+
+    .footer-text {
+      font-size: 14px;
+      font-weight: 400;
+      color: #475467;
+      margin: 0;
+
+      a {
+        font-weight: 600;
+        color: var(--theme-color, #7f56d9);
+        cursor: pointer;
+        margin-left: 4px;
+
+        &:hover {
+          color: #6941c6;
+        }
+      }
+    }
+  }
+}
+
+.register2-container{
+  gap: 32px;
+  padding-bottom: 0;
+  .login-lm-drawer-popover & {
+    padding-bottom: 100px;
+  }
+    // 加载状态优化
+  .pisell-lowcode-btn-loading-icon {
+    .anticon {
+      color: #ffffff !important;
+    }
+  }
+
+}
+
+// 错误提示样式优化
+.pisell-lowcode-form-item-explain-error, .ant-form-item-explain-error {
+  font-size: 14px;
+  color: #f04438;
+  margin-top: 0;
+  text-align: left;
+  margin-bottom: 0;
+}
+
+// 修复错误消息切换时的高度闪动问题
+// 方案：通过固定容器高度和绝对定位，避免多条错误消息同时存在导致的高度变化
+// .login2-form {
+//   .pisell-lowcode-form-item-explain,
+//   .ant-form-item-explain {
+//     // 错误消息容器使用固定高度，避免切换时高度闪动
+//     &-connected {
+//       // 使用最小高度保证单行时不闪动，同时允许根据内容自适应高度
+//       min-height: 22px;
+//       position: relative;
+//       // 平滑过渡
+//       transition: min-height 0.2s ease;
+//     }
+    
+//     // 单个错误消息项默认参与文档流，隐藏时再脱离布局，避免高度闪动
+//     .pisell-lowcode-form-show-help-item,
+//     .ant-form-item-explain-error {
+//       position: relative;
+//       min-height: 22px;
+//       line-height: 22px;
+      
+//       // 隐藏状态（淡出中）时不参与布局计算
+//       &[style*="opacity: 0"][style*="height: 0px"],
+//       &[style*="height: 0px"][style*="opacity: 0"] {
+//         position: absolute;
+//         top: 0;
+//         left: 0;
+//         right: 0;
+//         pointer-events: none;
+//         z-index: 0;
+//       }
+      
+//       // 显示状态时在上层
+//       &[style*="opacity: 1"],
+//       &:not([style*="opacity: 0"]):not([style*="height: 0px"]) {
+//         z-index: 1;
+//       }
+//     }
+//   }
+  
+//   // 如果没有错误消息，容器应该可以隐藏（通过 Ant Design 的默认行为）
+//   // 但这里我们确保有错误消息时容器高度固定
+//   .pisell-lowcode-form-item:not(.pisell-lowcode-form-item-has-error) {
+//     .pisell-lowcode-form-item-explain-connected {
+//       min-height: 0;
+//     }
+//   }
+// }
+// 切换认证方式按钮
+.login2-switch-button {
+  margin-top: 0;
+  height: 44px;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  font-size: 16px;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  font-weight: 600;
+  color: #344054;
+  background: #ffffff;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  .pisell-lowcode-btn-icon {
+    margin-right: 0!important;
+    font-size: 24px;
+  }
+  svg {
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    border-color: #98a2b3;
+    background: #f9fafb;
+    color: #344054;
+  }
+
+  &:active {
+    border-color: #667085;
+    background: #f2f4f7;
+    color: #344054;
+  }
+
+  &:focus {
+    border-color: var(--theme-color, #7f56d9);
+    box-shadow: 0px 0px 0px 4px rgba(127, 86, 217, 0.12);
+    color: #344054;
+  }
+}
+
+// 底部文案样式
+.login2-footer-text {
+  margin-top: 0;
+  text-align: center;
+  font-size: 14px;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  color: #475467;
+
+  .login2-link {
+    color: var(--theme-color, #7f56d9);
+    font-weight: 600;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+      text-decoration: underline;
+    }
+
+    &:active {
+      opacity: 0.6;
+    }
+  }
+}
+
+// ================ 新增样式 ================
+
+// 验证码输入组
+.login2-container .verification-code-input-group {
+  display: flex;
+  gap: 8px;
+
+  .login2-input {
+    flex: 1;
+  }
+
+  .send-code-button {
+    height: 44px;
+    padding: 10px 16px;
+    border-radius: 8px;
+    border: 1px solid #d0d5dd;
+    background: #ffffff;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--theme-color, #7f56d9);
+    white-space: nowrap;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+
+    &:hover:not(:disabled) {
+      border-color: var(--theme-color, #7f56d9);
+      background: rgba(127, 86, 217, 0.05);
+    }
+
+    &:disabled {
+      color: #98a2b3;
+      border-color: #eaecf0;
+      background: #f9fafb;
+      cursor: not-allowed;
+    }
+  }
+}
+
+// 表单底部
+.login2-container .login2-form-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .login2-link {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--theme-color, #7f56d9);
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      color: #6941c6;
+      text-decoration: underline;
+    }
+  }
+}
+
+// 分隔符
+.login2-container .login2-divider {
+  display: flex;
+  align-items: center;
+  margin: 0;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #eaecf0;
+  }
+
+  &::before {
+    margin-right: 12px;
+  }
+
+  &::after {
+    margin-left: 12px;
+  }
+
+  font-size: 14px;
+  font-weight: 500;
+  color: #98a2b3;
+}
+
+// 切换选项区域
+.login2-container .login2-switch-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.login2-container .login2-switch-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .login2-switch-option-button {
+    width: 100%;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #ffffff;
+    color: #344054;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    padding: 0 16px;
+    position: relative; // 为角标定位提供基准
+
+    .option-icon {
+      font-size: 18px;
+      flex-shrink: 0;
+      margin-right: 12px;
+    }
+
+    // Iconfont 组件样式
+    .anticon {
+      font-size: 24px;
+      flex-shrink: 0;
+      margin-right: 12px;
+    }
+
+    .option-text {
+      flex-shrink: 0;
+    }
+
+    // 上次登录角标样式
+    .last-login-badge {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      color: #B42318;
+      background: #FEE4E2;
+      border-top-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+      font-size: 10px;
+      font-weight: 500;
+      line-height: 1;
+      padding: 2px 6px;
+      white-space: nowrap;
+      z-index: 1;
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.1);
+    }
+
+    &:hover {
+      border-color: #98a2b3;
+      background: #f9fafb;
+    }
+
+    &:active {
+      border-color: #667085;
+      background: #f2f4f7;
+    }
+
+    &:focus {
+      border-color: var(--theme-color, #7f56d9);
+      box-shadow: 0px 0px 0px 4px rgba(127, 86, 217, 0.12);
+    }
+  }
+}
+
+// OAuth 按钮
+.login2-container .login2-oauth-button {
+  height: 44px;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #344054;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  transition: all 0.2s ease;
+  position: relative; // 为角标定位提供基准
+
+  .oauth-icon {
+    font-size: 24px;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
+  // Iconfont 组件样式
+  .anticon {
+    font-size: 24px;
+    flex-shrink: 0;
+  }
+
+  // 上次登录角标样式
+  .last-login-badge {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    color: #B42318;
+    background: #FEE4E2;
+    border-top-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1;
+    padding: 2px 6px;
+    white-space: nowrap;
+    z-index: 1;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.1);
+  }
+
+  &:hover {
+    border-color: #98a2b3;
+    background: #f9fafb;
+    color: #344054;
+  }
+
+  &:active {
+    border-color: #667085;
+    background: #f2f4f7;
+  }
+
+  &:focus {
+    border-color: var(--theme-color, #7f56d9);
+    box-shadow: 0px 0px 0px 4px rgba(127, 86, 217, 0.12);
+  }
+  span {
+    margin-left: 0px !important;
+  }
+}
+
+// 分步骤登录 - 账号显示
+.login2-container .login2-account-display {
+  height: 44px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid #d0d5dd;
+  background: #f9fafb;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #344054;
+  display: flex;
+  align-items: center;
+  cursor: default;
+}
+
+// Back 按钮
+.login2-container .login2-back-button {
+  height: 44px;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #344054;
+  font-size: 16px;
+  font-weight: 600;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+
+  &:hover {
+    border-color: #98a2b3;
+    background: #f9fafb;
+    color: #344054;
+  }
+
+  &:active {
+    border-color: #667085;
+    background: #f2f4f7;
+  }
+
+  &:focus {
+    border-color: #d0d5dd;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+}
+
+// PhoneInput 组件样式（无边框，因为组件内部已有边框）
+.login2-phone-input {
+  // PhoneInput 组件内部已有完整的边框样式，这里不需要额外样式
+}
+
+// PhoneInput 组件的 Form.Item 样式修复
+.phone-input-form-item {
+  .ant-form-item-control-input {
+    .ant-form-item-control-input-content {
+      // 移除 Ant Design 默认的输入框边框，因为 PhoneInput 组件内部已有边框
+      .ant-input {
+        border: none !important;
+        box-shadow: none !important;
+
+        &:hover,
+        &:focus,
+        &:focus-within {
+          border: none !important;
+          box-shadow: none !important;
+        }
+      }
+    }
+  }
+
+  // 邮件链接验证页面样式
+  .login2-email-link-verifying,
+  .login2-email-link-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+
+    .verifying-content,
+    .error-content {
+      text-align: center;
+      max-width: 300px;
+
+      .verifying-icon,
+      .error-icon {
+        margin-bottom: 24px;
+        font-size: 48px;
+
+        .anticon {
+          color: var(--theme-color, #7f56d9);
+        }
+      }
+
+      .error-icon .anticon {
+        color: #f04438;
+      }
+
+      .verifying-title,
+      .error-title {
+        font-size: 24px;
+        font-weight: 600;
+        line-height: 32px;
+        color: #101828;
+        margin-bottom: 8px;
+      }
+
+      .verifying-desc,
+      .error-desc {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        color: #475467;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+.login2-error-main-button {
+  margin-top: 32px !important;
+}
+
+/* 切换到注册的提示样式 */
+.login2-register-prompt {
+  margin-top: 0;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  
+  .register-prompt-text {
+    margin-right: 4px;
+  }
+  
+  .register-prompt-link {
+    background: none;
+    border: none;
+    color: var(--theme-color, #7F56D9);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+    padding: 0;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+
+.login2-account-show-text-edit {
+  font-size: 14px;
+  color: #475467;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .login2-account-show-text-edit-icon {
+    margin-left: 10px;
+    font-size: 20px;
+    cursor: pointer;
+    color: #7F56D9;
+  } 
 }