sdk-coral-enterprise v1.0.32

SDK-Coral-Enterprise

企业服务组件，包括

• 用户登录、用户注册
• 团队 (机构、企业) 创建
• 加入团队
• 邀请加入
• 团队详情
• 团队列表
• 团队成员管理
• 账号/昵称设置指引
• 解散团队
• 移交团队

使用介绍

用户登录、用户注册

import React from 'react';
import { Button, message } from 'tdesign-react/esm';
import { ServiceLogin } from 'sdk-coral-account';

const Demo = () => {
    const [visible, setVisible] = React.useState(false);
    return (
        <>
            <Button onClick={() => setVisible(true)}>点击登录</Button>
            
            <ServiceLogin
                visible={visible}
                appid={''}          // 业务 ID
                onClose={() => {   // 点击取消按钮
                    setVisible(false)
                }}
                onSuccess={() => {  // 登录成功回调，此时业务域的用户 cookie 已种下
                    message.success(`账户登录成功`);
                    setVisible(false);
                }}     
            />
        </>
    )
}

团队 (机构、企业) 创建

import React from 'react';
import { Button, message } from 'tdesign-react/esm';
import { ServiceOrgCreate } from 'sdk-coral-account';

const Demo = () => {
    const [visible, setVisible] = React.useState(false);
    return (
        <>
            <Button onClick={() => setVisible(true)}>点击创建团队</Button>

            <ServiceOrgCreate
                visible={visible}
                width={800}
                appid={''}        // 业务 ID
                onCancel={() => { // 点击取消按钮
                    setVisible(false)
                }}
                onError={(msg) => { // 保存失败回调： msg 错误信息
                    message.error(msg)
                }}
                onSuccess={(orgInfo, addMemberMethod) => { 
                    // 保存成功回调： orgInfo 为团队相关信息 addMemberMethod: 已选择的添加成员的方式
                    message.success(`创建成功! 团队ID：${orgInfo.teamId}， 团队名称：${orgInfo.name}`);
                    setVisible(false)
                }}
            />
        </>
    )
}

加入团队

import React from 'react';
import { ServiceOrgInvitePage } from 'sdk-coral-account';

const Demo = () => {
    return (
        <>
            <ServiceOrgInvitePage
                mode='normal'
                visible={true}
                inviteToken=""
                appid=""
                onSuccess={() => message.success('加入成功')}
            />
        </>
    )
}

邀请加入（添加人员）

import React from 'react';
import { Button } from 'tdesign-react/esm';
import { ServiceOrgInviteLink } from 'sdk-coral-account';

const Demo = () => {
    const [visible, setVisible] = React.useState(false);
    return (
        <>
            <Button onClick={() => setVisible(true)}>添加人员</Button>
            <ServiceOrgInviteLink
                appid=""
                teamId=""
                visible={visible}
                onClose={() => setVisible(false)}
            />
        </>
    )
}

团队成员管理

import React from 'react';
import { Button } from 'tdesign-react/esm';
import { ServiceOrgMembers } from 'sdk-coral-account';

const Demo = () => {
    const [visible, setVisible] = React.useState(false);
    return (
        <>
            <Button onClick={() => setVisible(true)}>成员管理</Button>
            <ServiceOrgMembers
                appid=""
                teamId=""
                visible={visible}
                onClose={() => setVisible(false)}
            />
        </>
    )
}

查看团队详情

import React from 'react';
import { Button } from 'tdesign-react/esm';
import { ServiceOrgDetail } from 'sdk-coral-account';

const Demo = () => {
    const [visible, setVisible] = React.useState(false);
    return (
        <>
            <Button onClick={() => setVisible(true)}>查看团队详情</Button>
            <ServiceOrgDetail
                appid=''
                visible={visible}
                width={980}
                teamId=""
                onClose={() => setVisible(false)}
            />
        </>
    )
}

查看团队列表

import React from 'react';
import { Button } from 'tdesign-react/esm';
import { ServiceOrgList } from 'sdk-coral-account';

const Demo = () => {
    const [visible, setVisible] = React.useState(false);
    return (
        <>
            <Button onClick={() => setVisible(true)}>查看团队列表</Button>
            <ServiceOrgList
                visible={visible}
                appid=''
                onEnter={(teamId) => {
                    setTeamId(teamId); // 返回当前选中团队ID
                }}
            />
        </>
    )
}

账号设置指引

import React from 'react';
import { ServiceAccountSettingGuide } from 'sdk-coral-account';

const Demo = () => {
    return (
        <ServiceAccountSettingGuide
            visible={true}
            appid=''
            onConfirm={() => {
                // 点击「立即设置」
            }}
            onCancel={() => {
                // 点击「稍后设置」
            }}
            onClose={() => {
                // 点击关闭弹窗按钮
            }}
            onChangeRemind={(checked: boolean) => {
                // 「不再提醒」复选框 onChange 事件回调
            }}
        />
    )
}

解散团队

import React from 'react';
import { ServiceOrgRemove } from 'sdk-coral-account';

const Demo = () => {
    const [visible, setVisible] = React.useState(false);
    return (
        <ServiceOrgRemove
            appid=''
            visible={visible}
            teamId=""
            onClose={() => setVisible(false)}
            onSuccess={() => {
                // 解散成功
            }}
            onError={() => {
                // 解散失败
            }}
        />
    )
}

移交团队

import React from 'react';
import { ServiceOrgTransfer } from 'sdk-coral-account';

const Demo = () => {
    const [visible, setVisible] = React.useState(false);
    return (
        <ServiceOrgTransfer
            appid=''
            visible={visible}
            teamId=""
            onClose={() => setVisible(false)}
            onSuccess={() => {
                // 移交成功
            }}
            onError={() => {
                // 移交失败
            }}
        />
    )
}