@pisell/private-materials 6.6.2 → 6.7.2

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

@@ -0,0 +1,1002 @@
+/**
+ * 登录注册 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;
+  
+  /* 在弹窗模式下不需要额外的底部内边距，因为使用 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(--theme-color, #7f56d9);
+      background: var(--theme-color, #7f56d9);
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+      font-size: 16px;
+      font-weight: 600;
+      color: #ffffff;
+
+      &:hover:not(:disabled) {
+        background: #6941c6;
+        border-color: #6941c6;
+      }
+
+      &:focus {
+        background: var(--theme-color, #7f56d9);
+        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);
+      }
+
+      &: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-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;
+//     }
+//   }
+// }
+
+// 加载状态优化
+.pisell-lowcode-btn-loading-icon {
+  .anticon {
+    color: #ffffff !important;
+  }
+}
+
+// 切换认证方式按钮
+.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;
+  } 
+}