@pisell/private-materials 6.6.3 → 6.6.5

package/lowcode/login2/meta.ts

@@ -0,0 +1,560 @@
+import { ComponentMetadata } from '@alilc/lowcode-types';
+import snippets from './snippets';
+
+const Login2Meta: ComponentMetadata = {
+  componentName: 'Login2',
+  title: '登录 2.0',
+  docUrl: '',
+  screenshot: '',
+  category: '表单',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/private-materials',
+    version: '1.0.0',
+    exportName: 'Login2',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [],
+  configure: {
+    props: [
+      {
+        title: {
+          label: '登录方式配置',
+        },
+        type: 'group',
+        display: 'block',
+        items: [
+          {
+            name: 'config.loginMethods',
+            title: { label: '登录方式列表' },
+            propType: 'array',
+            isRequired: true,
+            description: '数组顺序决定显示顺序，第一项为默认登录方式',
+            setter: {
+              componentName: 'ArraySetter',
+              props: {
+                itemSetter: {
+                  componentName: 'ObjectSetter',
+                  props: {
+                    config: {
+                      items: [
+                        {
+                          name: 'type',
+                          title: '登录方式类型',
+                          setter: {
+                            componentName: 'SelectSetter',
+                            props: {
+                              options: [
+                                { label: '邮箱', value: 'email' },
+                                { label: '手机', value: 'phone' },
+                                { label: 'Google', value: 'google' },
+                                { label: 'Facebook', value: 'facebook' },
+                                { label: 'Apple', value: 'apple' },
+                                { label: '游客', value: 'guest' },
+                              ],
+                            },
+                          },
+                          isRequired: true,
+                        },
+                        {
+                          name: 'verificationMethods',
+                          title: '验证方式（邮箱/手机）',
+                          description: '仅对邮箱/手机登录有效，第一项为默认方式',
+                          setter: {
+                            componentName: 'ArraySetter',
+                            props: {
+                              itemSetter: {
+                                componentName: 'SelectSetter',
+                                props: {
+                                  options: [
+                                    { label: '密码', value: 'password' },
+                                    { label: '验证码', value: 'verification_code' },
+                                  ],
+                                },
+                              },
+                            },
+                          },
+                        },
+                        {
+                          name: 'stepByStep',
+                          title: '分步骤登录（密码）',
+                          description: '启用后，密码登录将分为两步：先输入账号，再输入密码',
+                          setter: 'BoolSetter',
+                          defaultValue: false,
+                        },
+                        {
+                          name: 'clientId',
+                          title: 'Client ID（三方登录）',
+                          description: 'Google/Apple 的 Client ID',
+                          setter: 'StringSetter',
+                        },
+                        {
+                          name: 'appId',
+                          title: 'App ID（Facebook）',
+                          description: 'Facebook 的 App ID',
+                          setter: 'StringSetter',
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          label: 'UI 配置',
+        },
+        type: 'group',
+        display: 'block',
+        items: [
+          {
+            name: 'config.ui.logo',
+            title: { label: 'Logo' },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'show',
+                      title: '显示 Logo',
+                      setter: 'BoolSetter',
+                      defaultValue: true,
+                    },
+                    {
+                      name: 'url',
+                      title: 'Logo 图片',
+                      setter: 'ImageSetter',
+                    },
+                    {
+                      name: 'position',
+                      title: '位置',
+                      setter: {
+                        componentName: 'RadioGroupSetter',
+                        props: {
+                          options: [
+                            { label: '居左', value: 'left' },
+                            { label: '居中', value: 'center' },
+                            { label: '居右', value: 'right' },
+                          ],
+                        },
+                      },
+                      defaultValue: 'center',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+          {
+            name: 'config.ui.title',
+            title: { label: '欢迎语' },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'show',
+                      title: '显示',
+                      setter: 'BoolSetter',
+                      defaultValue: true,
+                    },
+                    {
+                      name: 'text',
+                      title: '文案',
+                      setter: 'PisellI18nSetter',
+                    },
+                    {
+                      name: 'align',
+                      title: '对齐方式',
+                      setter: {
+                        componentName: 'RadioGroupSetter',
+                        props: {
+                          options: [
+                            { label: '居左', value: 'left' },
+                            { label: '居中', value: 'center' },
+                            { label: '居右', value: 'right' },
+                          ],
+                        },
+                      },
+                      defaultValue: 'center',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+          {
+            name: 'config.ui.subtitle',
+            title: { label: '标题' },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'show',
+                      title: '显示',
+                      setter: 'BoolSetter',
+                      defaultValue: true,
+                    },
+                    {
+                      name: 'text',
+                      title: '文案',
+                      setter: 'PisellI18nSetter',
+                    },
+                    {
+                      name: 'align',
+                      title: '对齐方式',
+                      setter: {
+                        componentName: 'RadioGroupSetter',
+                        props: {
+                          options: [
+                            { label: '居左', value: 'left' },
+                            { label: '居中', value: 'center' },
+                            { label: '居右', value: 'right' },
+                          ],
+                        },
+                      },
+                      defaultValue: 'center',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+          {
+            name: 'config.ui.desc',
+            title: { label: '副标题' },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'show',
+                      title: '显示',
+                      setter: 'BoolSetter',
+                      defaultValue: false,
+                    },
+                    {
+                      name: 'text',
+                      title: '文案',
+                      setter: 'PisellI18nSetter',
+                      defaultValue: 'Welcome back! Please enter your details.',
+                    },
+                    {
+                      name: 'align',
+                      title: '对齐方式',
+                      setter: {
+                        componentName: 'RadioGroupSetter',
+                        props: {
+                          options: [
+                            { label: '居左', value: 'left' },
+                            { label: '居中', value: 'center' },
+                            { label: '居右', value: 'right' },
+                          ],
+                        },
+                      },
+                      defaultValue: 'center',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+          {
+            name: 'config.ui.formLabels',
+            title: { label: '表单标签配置' },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'email',
+                      title: '邮箱标签',
+                      setter: {
+                        componentName: 'ObjectSetter',
+                        props: {
+                          config: {
+                            items: [
+                              {
+                                name: 'show',
+                                title: '显示标签',
+                                setter: 'BoolSetter',
+                                defaultValue: true,
+                              },
+                              {
+                                name: 'text',
+                                title: '标签文案',
+                                setter: 'PisellI18nSetter',
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    },
+                    {
+                      name: 'phone',
+                      title: '手机标签',
+                      setter: {
+                        componentName: 'ObjectSetter',
+                        props: {
+                          config: {
+                            items: [
+                              {
+                                name: 'show',
+                                title: '显示标签',
+                                setter: 'BoolSetter',
+                                defaultValue: true,
+                              },
+                              {
+                                name: 'text',
+                                title: '标签文案',
+                                setter: 'PisellI18nSetter',
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    },
+                    {
+                      name: 'password',
+                      title: '密码标签',
+                      setter: {
+                        componentName: 'ObjectSetter',
+                        props: {
+                          config: {
+                            items: [
+                              {
+                                name: 'show',
+                                title: '显示标签',
+                                setter: 'BoolSetter',
+                                defaultValue: true,
+                              },
+                              {
+                                name: 'text',
+                                title: '标签文案',
+                                setter: 'PisellI18nSetter',
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    },
+                    {
+                      name: 'verificationCode',
+                      title: '验证码标签',
+                      setter: {
+                        componentName: 'ObjectSetter',
+                        props: {
+                          config: {
+                            items: [
+                              {
+                                name: 'show',
+                                title: '显示标签',
+                                setter: 'BoolSetter',
+                                defaultValue: true,
+                              },
+                              {
+                                name: 'text',
+                                title: '标签文案',
+                                setter: 'PisellI18nSetter',
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          },
+          {
+            name: 'config.ui.themeColor',
+            title: { label: '主题色' },
+            propType: 'string',
+            defaultValue: '#7F56D9',
+            setter: 'ColorSetter',
+          },
+        ],
+      },
+      {
+        title: {
+          label: '其他配置',
+        },
+        type: 'group',
+        display: 'block',
+        items: [
+          {
+            name: 'config.channel',
+            title: { label: '渠道标识' },
+            propType: 'string',
+            setter: 'StringSetter',
+            description: '用于区分不同来源的登录请求',
+          },
+          {
+            name: 'config.legalTerms',
+            title: { label: '法律条款设置' },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'enabled',
+                      title: '启用法律条款',
+                      setter: 'BoolSetter',
+                      defaultValue: false,
+                      description: '是否在页面底部显示法律条款',
+                    },
+                    {
+                      name: 'terms',
+                      title: '法律条款列表',
+                      propType: 'array',
+                      setter: {
+                        componentName: 'ArraySetter',
+                        props: {
+                          itemSetter: {
+                            componentName: 'ObjectSetter',
+                            props: {
+                              config: {
+                                items: [
+                                  {
+                                    name: 'name',
+                                    title: '条款名称',
+                                    propType: 'string',
+                                    setter: 'StringSetter',
+                                    isRequired: true,
+                                    description: '如：服务条款、隐私协议',
+                                  },
+                                  {
+                                    name: 'url',
+                                    title: '条款链接',
+                                    propType: 'string',
+                                    setter: 'StringSetter',
+                                    isRequired: true,
+                                    description: '条款文档的完整URL',
+                                  },
+                                ],
+                              },
+                            },
+                          },
+                        },
+                      },
+                      description: '配置需要显示的法律条款',
+                    },
+                    {
+                      name: 'textTemplate',
+                      title: '文本模板',
+                      propType: 'string',
+                      setter: 'StringSetter',
+                      description: '自定义显示文本，使用 {terms} 占位符表示条款链接',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+          {
+            name: 'visible',
+            title: { label: '显示组件' },
+            propType: 'bool',
+            defaultValue: true,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'className',
+            title: { label: '自定义类名' },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+        ],
+      },
+      {
+        title: {
+          label: '邮件链接验证',
+        },
+        type: 'group',
+        display: 'block',
+        items: [
+          {
+            name: 'config.emailLinkVerification',
+            title: { label: '邮件链接验证模式' },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'enabled',
+                      title: '启用验证模式',
+                      setter: 'BoolSetter',
+                      defaultValue: false,
+                      description: '从邮件链接跳转过来时启用此模式（用于重置密码）',
+                    },
+                    {
+                      name: 'code',
+                      title: '验证码',
+                      setter: 'StringSetter',
+                      description: '从 URL 参数中获取的 code（如：602ec2dc2ab8954b2b7bc63a5d920662）',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onLogin',
+          description: '登录回调，参数：(data: LoginFormData, method: AuthMethodType, channel?: string)',
+        },
+        {
+          name: 'onOAuthLogin',
+          description: '三方登录回调，参数：(provider: "google" | "facebook" | "apple", channel?: string)',
+        },
+        {
+          name: 'onSendVerificationCode',
+          description: '发送验证码回调，参数：(account: string, type: "email" | "phone", channel?: string)',
+        },
+        {
+          name: 'onForgotPassword',
+          description: '忘记密码回调，参数：(account: string, channel?: string)',
+        },
+        {
+          name: 'onClose',
+          description: '关闭组件回调',
+        },
+      ],
+    },
+    component: {
+      isContainer: false,
+    },
+  },
+};
+
+export default {
+  ...Login2Meta,
+  snippets,
+};
+

package/lowcode/login2/snippets.ts

@@ -0,0 +1,124 @@
+import { IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '登录 2.0',
+    screenshot: '',
+    schema: {
+      componentName: 'Login2',
+      props: {
+        config: {
+          loginMethods: [
+            {
+              type: 'email',
+              verificationMethods: ['password', 'verification_code'],
+              stepByStep: false,
+            },
+            {
+              type: 'google',
+              clientId: '',
+            },
+            {
+              type: 'facebook',
+              appId: '',
+            },
+            {
+              type: 'guest',
+            },
+          ],
+          ui: {
+            title: {
+              show: true,
+              text: 'Welcome back',
+              align: 'center',
+            },
+            subtitle: {
+              show: true,
+              text: 'Log in to your account',
+              align: 'center',
+            },
+            desc: {
+              show: true,
+              text: 'Welcome back! Please enter your details.',
+              align: 'center',
+            },
+            themeColor: '#7F56D9',
+          },
+          legalTerms: {
+            enabled: true,
+            terms: [
+              {
+                name: '服务条款',
+                url: 'https://example.com/terms',
+              },
+              {
+                name: '隐私协议',
+                url: 'https://example.com/privacy',
+              },
+            ],
+            textTemplate: '登录即代表同意 {terms}',
+          },
+        },
+        visible: true,
+      },
+    },
+  },
+  {
+    title: '登录 2.0（分步骤）',
+    screenshot: '',
+    schema: {
+      componentName: 'Login2',
+      props: {
+        config: {
+          loginMethods: [
+            {
+              type: 'email',
+              verificationMethods: ['password', 'verification_code'],
+              stepByStep: true,
+            },
+            {
+              type: 'google',
+              clientId: '',
+            },
+          ],
+          ui: {
+            title: {
+              show: true,
+              text: 'Welcome back',
+              align: 'center',
+            },
+            subtitle: {
+              show: true,
+              text: 'Log in to your account',
+              align: 'center',
+            },
+            desc: {
+              show: true,
+              text: 'Welcome back! Please enter your details.',
+              align: 'center',
+            },
+            themeColor: '#7F56D9',
+          },
+          legalTerms: {
+            enabled: true,
+            terms: [
+              {
+                name: '服务条款',
+                url: 'https://example.com/terms',
+              },
+              {
+                name: '隐私协议',
+                url: 'https://example.com/privacy',
+              },
+            ],
+            textTemplate: '登录即代表同意 {terms}',
+          },
+        },
+        visible: true,
+      },
+    },
+  },
+];
+
+export default snippets;
+