@pisell/materials 1.0.545 → 1.0.546

package/lib/components/saasLogin/index.less

@@ -0,0 +1,249 @@
+// Saas登录组件样式
+.saas-login-wrapper {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  
+  // 左侧区域
+  .saas-login-bg {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #2563EB 0%, #4F46E5 50%, #7C3AED 100%);
+    position: relative;
+    
+    img {
+      width: auto;
+      height: 471px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  
+  // 右侧区域
+  .saas-login-main {
+    width: 480px;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    overflow-y: auto;
+  }
+}
+
+.saas-login-container {
+  // width: 100%;
+  width: 360px;
+  overflow-x: hidden;
+  // margin: 0 auto;
+  // padding: 24px;
+  text-align: center;
+  // height: 100%;
+  // overflow-y: auto;
+  
+  // Logo样式
+  .saas-login-logo {
+    height: 48px;
+    margin-bottom: 24px;
+    border-radius: 8px;
+
+    &.left {
+      margin-right: auto;
+      margin-left: 0;
+    }
+
+    &.center {
+      margin: 0 auto;
+    }
+
+    &.right {
+      margin-left: auto;
+      margin-right: 0;
+    }
+
+    img {
+      height: 48px;
+      object-fit: contain;
+    }
+  }
+  
+  .saas-login-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #101828;
+    margin-top: 0;
+    margin-bottom: 12px;
+  }
+  
+  .saas-login-subtitle {
+    font-size: 14px;
+    color: #667085;
+    margin-top: 0;
+    margin-bottom: 32px;
+  }
+  
+  .saas-login-tabs {
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    margin-bottom: 32px;
+    border-bottom: 1px solid #E4E7EC;
+    
+    .tab {
+      padding: 12px 24px;
+      cursor: pointer;
+      color: #667085;
+      font-weight: 500;
+      position: relative;
+      
+      &.active {
+        color: #7F56D9;
+        
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: -1px;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background: #7F56D9;
+        }
+      }
+      
+      &:hover {
+        color: #6941C6;
+      }
+    }
+  }
+  
+  // 表单区域样式
+  .saas-login-form {
+    // 表单项标题
+    .form-item-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: #344054;
+      margin-bottom: 6px;
+      text-align: left;
+    }
+
+    // 输入框样式
+    .saas-login-input {
+      height: 44px;
+      border-radius: 8px;
+      border: 1px solid #D0D5DD;
+      background: #FFF;
+      
+      &:hover {
+        border-color: #7F56D9;
+      }
+      
+      &:focus {
+        border-color: #7F56D9;
+        box-shadow: 0 0 0 4px rgba(127, 86, 217, 0.1);
+      }
+
+      &.ant-input-password {
+        padding: 4px 11px;
+        
+        .ant-input {
+          height: 34px;
+        }
+      }
+    }
+
+    // 登录按钮样式
+    .saas-login-button {
+      height: 44px;
+      border-radius: 8px;
+      background: #7F56D9;
+      border: none;
+      font-weight: 500;
+      
+      &:hover {
+        background: #6941C6;
+      }
+      
+      &:focus {
+        background: #7F56D9;
+        box-shadow: 0 0 0 4px rgba(127, 86, 217, 0.1);
+      }
+    }
+    
+    // 社交登录按钮样式
+    .saas-login-social {
+      width: 100%;
+      
+      .saas-login-social-button {
+        height: 44px;
+        border-radius: 8px;
+        
+        &.google {
+          border-color: #D0D5DD;
+          
+          &:hover {
+            background: #F9FAFB;
+          }
+        }
+        
+        &.facebook {
+          border-color: #D0D5DD;
+          
+          &:hover {
+            background: #F9FAFB;
+          }
+        }
+        
+        &.apple {
+          border-color: #D0D5DD;
+          
+          &:hover {
+            background: #F9FAFB;
+          }
+        }
+      }
+    }
+  }
+  
+  // 页脚样式
+  .saas-login-footer {
+    margin-top: 32px;
+    
+    .saas-login-signup {
+      font-size: 14px;
+      color: #667085;
+      margin-bottom: 16px;
+      
+      a {
+        color: #7F56D9;
+        margin-left: 4px;
+        cursor: pointer;
+        
+        &:hover {
+          color: #6941C6;
+        }
+      }
+    }
+    
+    .saas-login-links {
+      display: flex;
+      justify-content: center;
+      gap: 24px;
+      
+      a {
+        font-size: 14px;
+        color: #667085;
+        cursor: pointer;
+        
+        &:hover {
+          color: #101828;
+        }
+      }
+    }
+  }
+} 

package/lib/index.d.ts

@@ -153,3 +153,4 @@ export { default as PisellHeaderProgressBar } from './components/pisellHeaderPro
 export { default as PisellList01 } from './components/pisellList01';
 export { default as PageHeader } from './components/page-header';
 export { default as OrganizationTenantSwitcher } from './components/organizationTenantSwitcher';
+export { default as SaasLogin } from './components/saasLogin';

package/lib/index.js

@@ -149,6 +149,7 @@ __export(src_exports, {
   RecordView: () => import_record_view.default,
   Result: () => import_antd25.Result,
   Row: () => import_antd26.Row,
+  SaasLogin: () => import_saasLogin.default,
   SectionFooters: () => import_section_footers2.default,
   Segmented: () => import_segmented.default,
   Select: () => import_select.default,
@@ -342,6 +343,7 @@ var import_pisellHeaderProgressBar = __toESM(require("./components/pisellHeaderP
 var import_pisellList01 = __toESM(require("./components/pisellList01"));
 var import_page_header = __toESM(require("./components/page-header"));
 var import_organizationTenantSwitcher = __toESM(require("./components/organizationTenantSwitcher"));
+var import_saasLogin = __toESM(require("./components/saasLogin"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Affix,
@@ -464,6 +466,7 @@ var import_organizationTenantSwitcher = __toESM(require("./components/organizati
   RecordView,
   Result,
   Row,
+  SaasLogin,
   SectionFooters,
   Segmented,
   Select,