@pisell/private-materials 3.4.68 → 3.4.69

package/lowcode/login2/CONFIG.md

@@ -1,447 +1,447 @@
-# Login2 配置说明
-
-## 必填配置
-
-### loginMethods（登录方式列表）
-
-**必填**，数组类型，数组顺序决定显示顺序，第一项为默认登录方式。
-
-#### 邮箱登录
-
-```json
-{
-  "type": "email",
-  "verificationMethods": ["password", "verification_code"],
-  "stepByStep": false
-}
-```
-
-**参数说明：**
-- `type`: `"email"` （必填）
-- `verificationMethods`: 验证方式数组，第一项为默认方式
-  - `"password"` - 密码登录
-  - `"verification_code"` - 验证码登录
-  - 可以只配置一种：`["password"]` 或 `["verification_code"]`
-  - 配置多种时，用户可以在界面下方的 "OR" 区域切换验证方式
-  - 例如：`["password", "verification_code"]` 默认显示密码登录，下方显示"Email code to xxx"切换按钮
-- `stepByStep`: 是否分步骤登录（仅对密码登录有效）
-  - `true` - 先输入邮箱，再输入密码
-  - `false` - 邮箱和密码在同一页面（默认）
-
-#### 手机登录
-
-```json
-{
-  "type": "phone",
-  "verificationMethods": ["verification_code", "password"],
-  "stepByStep": false
-}
-```
-
-**参数说明：**
-- `type`: `"phone"` （必填）
-- `verificationMethods`: 验证方式数组，第一项为默认方式
-  - `"password"` - 密码登录
-  - `"verification_code"` - 验证码登录
-  - 可以只配置一种：`["verification_code"]` 或 `["password"]`
-  - 配置多种时，用户可以在界面下方的 "OR" 区域切换验证方式
-  - 例如：`["verification_code", "password"]` 默认显示验证码登录，下方显示"Password login"切换按钮
-- `stepByStep`: 是否分步骤登录（仅对密码登录有效）
-
-#### Google 登录
-
-```json
-{
-  "type": "google",
-  "clientId": "your-google-client-id"
-}
-```
-
-**参数说明：**
-- `type`: `"google"` （必填）
-- `clientId`: Google Client ID（可选）
-
-#### Facebook 登录
-
-```json
-{
-  "type": "facebook",
-  "appId": "your-facebook-app-id"
-}
-```
-
-**参数说明：**
-- `type`: `"facebook"` （必填）
-- `appId`: Facebook App ID（可选）
-
-#### Apple 登录
-
-```json
-{
-  "type": "apple",
-  "clientId": "your-apple-client-id"
-}
-```
-
-**参数说明：**
-- `type`: `"apple"` （必填）
-- `clientId`: Apple Client ID（可选）
-
-## 可选配置
-
-### ui（UI 配置）
-
-#### logo
-
-```json
-{
-  "show": true,
-  "url": "https://your-logo.png",
-  "position": "center"
-}
-```
-
-#### title（标题）
-
-```json
-{
-  "show": true,
-  "text": "Welcome back",
-  "align": "center"
-}
-```
-
-#### subtitle（副标题）
-
-```json
-{
-  "show": true,
-  "text": "Log in to your account",
-  "align": "center"
-}
-```
-
-#### desc（描述）
-
-```json
-{
-  "show": true,
-  "text": "Welcome back! Please enter your details.",
-  "align": "center"
-}
-```
-
-#### formLabels（表单标签）
-
-```json
-{
-  "email": {
-    "show": true,
-    "text": "Email"
-  },
-  "phone": {
-    "show": true,
-    "text": "Phone Number"
-  },
-  "password": {
-    "show": true,
-    "text": "Password"
-  },
-  "verificationCode": {
-    "show": true,
-    "text": "Verification Code"
-  }
-}
-```
-
-#### themeColor（主题色）
-
-```json
-"#7F56D9"
-```
-
-### channel（渠道标识）
-
-字符串类型，用于区分不同来源的登录请求。
-
-## 验证方式切换说明
-
-当为邮箱或手机配置多个验证方式时（例如：`verificationMethods: ["password", "verification_code"]`），用户界面会出现以下变化：
-
-### 默认显示
-
-- **第一个验证方式**会作为默认显示
-- 例如：`["password", "verification_code"]` → 默认显示密码输入框
-
-### OR 分隔线
-
-- 主表单下方会显示一条 "OR" 分隔线
-
-### 切换选项
-
-- OR 下方会显示其他验证方式的切换按钮
-- 邮箱验证码：显示 "Email code to xxx@example.com"
-- 手机验证码：显示 "SMS code to 138****8000"
-- 密码登录：显示 "Password login"
-
-### 实际效果
-
-**配置：**
-```json
-{
-  "type": "email",
-  "verificationMethods": ["password", "verification_code"]
-}
-```
-
-**界面显示：**
-```
-┌─────────────────────────┐
-│ Email Input             │
-│ Password Input          │
-│ [Remember me] [Forgot?] │
-│ [Log in Button]         │
-├─────────────────────────┤
-│         OR              │
-├─────────────────────────┤
-│ 📧 Email code to u***@  │ ← 点击切换到验证码登录
-└─────────────────────────┘
-```
-
-点击后切换为：
-```
-┌─────────────────────────┐
-│ Email Input             │
-│ Verification Code Input │
-│ [Log in Button]         │
-├─────────────────────────┤
-│         OR              │
-├─────────────────────────┤
-│ 🔑 Password login       │ ← 点击切换回密码登录
-└─────────────────────────┘
-```
-
-## 完整配置示例
-
-### 示例 1：邮箱密码登录 + Google
-
-```json
-{
-  "config": {
-    "loginMethods": [
-      {
-        "type": "email",
-        "verificationMethods": ["password"],
-        "stepByStep": false
-      },
-      {
-        "type": "google",
-        "clientId": "your-client-id"
-      }
-    ],
-    "ui": {
-      "title": {
-        "show": true,
-        "text": "Welcome back",
-        "align": "center"
-      },
-      "subtitle": {
-        "show": true,
-        "text": "Log in to your account",
-        "align": "center"
-      },
-      "themeColor": "#7F56D9"
-    }
-  }
-}
-```
-
-### 示例 2：邮箱分步骤登录 + 多种方式
-
-```json
-{
-  "config": {
-    "loginMethods": [
-      {
-        "type": "email",
-        "verificationMethods": ["password", "verification_code"],
-        "stepByStep": true
-      },
-      {
-        "type": "google",
-        "clientId": "xxx"
-      },
-      {
-        "type": "facebook",
-        "appId": "xxx"
-      },
-      {
-        "type": "phone",
-        "verificationMethods": ["verification_code"]
-      }
-    ],
-    "ui": {
-      "themeColor": "#7F56D9"
-    },
-    "channel": "web"
-  }
-}
-```
-
-### 示例 3：纯第三方登录
-
-```json
-{
-  "config": {
-    "loginMethods": [
-      {
-        "type": "google",
-        "clientId": "xxx"
-      },
-      {
-        "type": "apple",
-        "clientId": "xxx"
-      },
-      {
-        "type": "facebook",
-        "appId": "xxx"
-      }
-    ]
-  }
-}
-```
-
-### 示例 4：邮箱验证码 + 密码（可切换）
-
-```json
-{
-  "config": {
-    "loginMethods": [
-      {
-        "type": "email",
-        "verificationMethods": ["verification_code", "password"]
-      }
-    ],
-    "ui": {
-      "title": {
-        "show": true,
-        "text": "Welcome back",
-        "align": "center"
-      }
-    }
-  }
-}
-```
-
-**说明：**
-- 默认显示验证码登录
-- 用户可以点击 "Password login" 切换到密码登录
-- 密码登录时可以点击 "Email code to xxx" 切换回验证码
-
-### 示例 5：纯密码登录（无切换）
-
-```json
-{
-  "config": {
-    "loginMethods": [
-      {
-        "type": "email",
-        "verificationMethods": ["password"]
-      }
-    ]
-  }
-}
-```
-
-**说明：**
-- 只显示密码登录
-- 不显示 OR 分隔线
-- 无其他验证方式切换选项
-
-### 示例 6：纯验证码登录（无切换）
-
-```json
-{
-  "config": {
-    "loginMethods": [
-      {
-        "type": "phone",
-        "verificationMethods": ["verification_code"]
-      }
-    ]
-  }
-}
-```
-
-**说明：**
-- 只显示手机验证码登录
-- 不显示 OR 分隔线
-- 无其他验证方式切换选项
-
-## 事件回调
-
-### onLogin
-
-登录回调，参数：`(data, method, channel)`
-
-```javascript
-function(data, method, channel) {
-  console.log('Login:', data, method, channel);
-  // data = { account, password, verification_code, remember_me }
-  // method = 'email' | 'phone'
-  // channel = 'web' (如果配置了)
-}
-```
-
-### onOAuthLogin
-
-三方登录回调，参数：`(provider, channel)`
-
-```javascript
-function(provider, channel) {
-  console.log('OAuth login:', provider, channel);
-  // provider = 'google' | 'facebook' | 'apple'
-}
-```
-
-### onSendVerificationCode
-
-发送验证码回调，参数：`(account, type, channel)`
-
-```javascript
-function(account, type, channel) {
-  console.log('Send code to:', account, type);
-  // account = 用户输入的邮箱或手机号
-  // type = 'email' | 'phone'
-}
-```
-
-### onForgotPassword
-
-忘记密码回调，参数：`(account, channel)`
-
-```javascript
-function(account, channel) {
-  console.log('Forgot password:', account);
-  // account = 用户输入的邮箱或手机号
-}
-```
-
-### onClose
-
-关闭组件回调
-
-```javascript
-function() {
-  console.log('Close login modal');
-}
-```
-
-## 注意事项
-
-1. **loginMethods 必填**：至少需要配置一种登录方式
-2. **顺序很重要**：数组第一项为默认登录方式
-3. **分步骤登录**：仅对密码登录有效，验证码登录始终为单步
-4. **验证方式顺序**：`verificationMethods` 数组第一项为默认验证方式
-5. **Client ID/App ID**：使用第三方登录时需要提供对应的 ID
-
+# Login2 配置说明
+
+## 必填配置
+
+### loginMethods（登录方式列表）
+
+**必填**，数组类型，数组顺序决定显示顺序，第一项为默认登录方式。
+
+#### 邮箱登录
+
+```json
+{
+  "type": "email",
+  "verificationMethods": ["password", "verification_code"],
+  "stepByStep": false
+}
+```
+
+**参数说明：**
+- `type`: `"email"` （必填）
+- `verificationMethods`: 验证方式数组，第一项为默认方式
+  - `"password"` - 密码登录
+  - `"verification_code"` - 验证码登录
+  - 可以只配置一种：`["password"]` 或 `["verification_code"]`
+  - 配置多种时，用户可以在界面下方的 "OR" 区域切换验证方式
+  - 例如：`["password", "verification_code"]` 默认显示密码登录，下方显示"Email code to xxx"切换按钮
+- `stepByStep`: 是否分步骤登录（仅对密码登录有效）
+  - `true` - 先输入邮箱，再输入密码
+  - `false` - 邮箱和密码在同一页面（默认）
+
+#### 手机登录
+
+```json
+{
+  "type": "phone",
+  "verificationMethods": ["verification_code", "password"],
+  "stepByStep": false
+}
+```
+
+**参数说明：**
+- `type`: `"phone"` （必填）
+- `verificationMethods`: 验证方式数组，第一项为默认方式
+  - `"password"` - 密码登录
+  - `"verification_code"` - 验证码登录
+  - 可以只配置一种：`["verification_code"]` 或 `["password"]`
+  - 配置多种时，用户可以在界面下方的 "OR" 区域切换验证方式
+  - 例如：`["verification_code", "password"]` 默认显示验证码登录，下方显示"Password login"切换按钮
+- `stepByStep`: 是否分步骤登录（仅对密码登录有效）
+
+#### Google 登录
+
+```json
+{
+  "type": "google",
+  "clientId": "your-google-client-id"
+}
+```
+
+**参数说明：**
+- `type`: `"google"` （必填）
+- `clientId`: Google Client ID（可选）
+
+#### Facebook 登录
+
+```json
+{
+  "type": "facebook",
+  "appId": "your-facebook-app-id"
+}
+```
+
+**参数说明：**
+- `type`: `"facebook"` （必填）
+- `appId`: Facebook App ID（可选）
+
+#### Apple 登录
+
+```json
+{
+  "type": "apple",
+  "clientId": "your-apple-client-id"
+}
+```
+
+**参数说明：**
+- `type`: `"apple"` （必填）
+- `clientId`: Apple Client ID（可选）
+
+## 可选配置
+
+### ui（UI 配置）
+
+#### logo
+
+```json
+{
+  "show": true,
+  "url": "https://your-logo.png",
+  "position": "center"
+}
+```
+
+#### title（标题）
+
+```json
+{
+  "show": true,
+  "text": "Welcome back",
+  "align": "center"
+}
+```
+
+#### subtitle（副标题）
+
+```json
+{
+  "show": true,
+  "text": "Log in to your account",
+  "align": "center"
+}
+```
+
+#### desc（描述）
+
+```json
+{
+  "show": true,
+  "text": "Welcome back! Please enter your details.",
+  "align": "center"
+}
+```
+
+#### formLabels（表单标签）
+
+```json
+{
+  "email": {
+    "show": true,
+    "text": "Email"
+  },
+  "phone": {
+    "show": true,
+    "text": "Phone Number"
+  },
+  "password": {
+    "show": true,
+    "text": "Password"
+  },
+  "verificationCode": {
+    "show": true,
+    "text": "Verification Code"
+  }
+}
+```
+
+#### themeColor（主题色）
+
+```json
+"#7F56D9"
+```
+
+### channel（渠道标识）
+
+字符串类型，用于区分不同来源的登录请求。
+
+## 验证方式切换说明
+
+当为邮箱或手机配置多个验证方式时（例如：`verificationMethods: ["password", "verification_code"]`），用户界面会出现以下变化：
+
+### 默认显示
+
+- **第一个验证方式**会作为默认显示
+- 例如：`["password", "verification_code"]` → 默认显示密码输入框
+
+### OR 分隔线
+
+- 主表单下方会显示一条 "OR" 分隔线
+
+### 切换选项
+
+- OR 下方会显示其他验证方式的切换按钮
+- 邮箱验证码：显示 "Email code to xxx@example.com"
+- 手机验证码：显示 "SMS code to 138****8000"
+- 密码登录：显示 "Password login"
+
+### 实际效果
+
+**配置：**
+```json
+{
+  "type": "email",
+  "verificationMethods": ["password", "verification_code"]
+}
+```
+
+**界面显示：**
+```
+┌─────────────────────────┐
+│ Email Input             │
+│ Password Input          │
+│ [Remember me] [Forgot?] │
+│ [Log in Button]         │
+├─────────────────────────┤
+│         OR              │
+├─────────────────────────┤
+│ 📧 Email code to u***@  │ ← 点击切换到验证码登录
+└─────────────────────────┘
+```
+
+点击后切换为：
+```
+┌─────────────────────────┐
+│ Email Input             │
+│ Verification Code Input │
+│ [Log in Button]         │
+├─────────────────────────┤
+│         OR              │
+├─────────────────────────┤
+│ 🔑 Password login       │ ← 点击切换回密码登录
+└─────────────────────────┘
+```
+
+## 完整配置示例
+
+### 示例 1：邮箱密码登录 + Google
+
+```json
+{
+  "config": {
+    "loginMethods": [
+      {
+        "type": "email",
+        "verificationMethods": ["password"],
+        "stepByStep": false
+      },
+      {
+        "type": "google",
+        "clientId": "your-client-id"
+      }
+    ],
+    "ui": {
+      "title": {
+        "show": true,
+        "text": "Welcome back",
+        "align": "center"
+      },
+      "subtitle": {
+        "show": true,
+        "text": "Log in to your account",
+        "align": "center"
+      },
+      "themeColor": "#7F56D9"
+    }
+  }
+}
+```
+
+### 示例 2：邮箱分步骤登录 + 多种方式
+
+```json
+{
+  "config": {
+    "loginMethods": [
+      {
+        "type": "email",
+        "verificationMethods": ["password", "verification_code"],
+        "stepByStep": true
+      },
+      {
+        "type": "google",
+        "clientId": "xxx"
+      },
+      {
+        "type": "facebook",
+        "appId": "xxx"
+      },
+      {
+        "type": "phone",
+        "verificationMethods": ["verification_code"]
+      }
+    ],
+    "ui": {
+      "themeColor": "#7F56D9"
+    },
+    "channel": "web"
+  }
+}
+```
+
+### 示例 3：纯第三方登录
+
+```json
+{
+  "config": {
+    "loginMethods": [
+      {
+        "type": "google",
+        "clientId": "xxx"
+      },
+      {
+        "type": "apple",
+        "clientId": "xxx"
+      },
+      {
+        "type": "facebook",
+        "appId": "xxx"
+      }
+    ]
+  }
+}
+```
+
+### 示例 4：邮箱验证码 + 密码（可切换）
+
+```json
+{
+  "config": {
+    "loginMethods": [
+      {
+        "type": "email",
+        "verificationMethods": ["verification_code", "password"]
+      }
+    ],
+    "ui": {
+      "title": {
+        "show": true,
+        "text": "Welcome back",
+        "align": "center"
+      }
+    }
+  }
+}
+```
+
+**说明：**
+- 默认显示验证码登录
+- 用户可以点击 "Password login" 切换到密码登录
+- 密码登录时可以点击 "Email code to xxx" 切换回验证码
+
+### 示例 5：纯密码登录（无切换）
+
+```json
+{
+  "config": {
+    "loginMethods": [
+      {
+        "type": "email",
+        "verificationMethods": ["password"]
+      }
+    ]
+  }
+}
+```
+
+**说明：**
+- 只显示密码登录
+- 不显示 OR 分隔线
+- 无其他验证方式切换选项
+
+### 示例 6：纯验证码登录（无切换）
+
+```json
+{
+  "config": {
+    "loginMethods": [
+      {
+        "type": "phone",
+        "verificationMethods": ["verification_code"]
+      }
+    ]
+  }
+}
+```
+
+**说明：**
+- 只显示手机验证码登录
+- 不显示 OR 分隔线
+- 无其他验证方式切换选项
+
+## 事件回调
+
+### onLogin
+
+登录回调，参数：`(data, method, channel)`
+
+```javascript
+function(data, method, channel) {
+  console.log('Login:', data, method, channel);
+  // data = { account, password, verification_code, remember_me }
+  // method = 'email' | 'phone'
+  // channel = 'web' (如果配置了)
+}
+```
+
+### onOAuthLogin
+
+三方登录回调，参数：`(provider, channel)`
+
+```javascript
+function(provider, channel) {
+  console.log('OAuth login:', provider, channel);
+  // provider = 'google' | 'facebook' | 'apple'
+}
+```
+
+### onSendVerificationCode
+
+发送验证码回调，参数：`(account, type, channel)`
+
+```javascript
+function(account, type, channel) {
+  console.log('Send code to:', account, type);
+  // account = 用户输入的邮箱或手机号
+  // type = 'email' | 'phone'
+}
+```
+
+### onForgotPassword
+
+忘记密码回调，参数：`(account, channel)`
+
+```javascript
+function(account, channel) {
+  console.log('Forgot password:', account);
+  // account = 用户输入的邮箱或手机号
+}
+```
+
+### onClose
+
+关闭组件回调
+
+```javascript
+function() {
+  console.log('Close login modal');
+}
+```
+
+## 注意事项
+
+1. **loginMethods 必填**：至少需要配置一种登录方式
+2. **顺序很重要**：数组第一项为默认登录方式
+3. **分步骤登录**：仅对密码登录有效，验证码登录始终为单步
+4. **验证方式顺序**：`verificationMethods` 数组第一项为默认验证方式
+5. **Client ID/App ID**：使用第三方登录时需要提供对应的 ID
+