@tuya-sat/sdf-main-sdk NPM

@tuya-sat/sdf-main-sdk

涂鸦 SaaS 开发框架的主应用 SDK，核心逻辑有开发框架团队维护并保障稳定性。业务方只需要基于此 SDK，进行要少量的业务开发，就可以定制符合自己业务诉求的主应用

如何使用

快速初始化主应用项目

# 创建项目 `saas-main-app`
npx @tuya-sat/create-micro-app@latest saas-main-app -t main

配置调试 SaaS 打开 ./micro.config.js，配置需要调试的 saas 域名。如下：

module.exports = {
  debuggerConfig: {
    target: 'https://<my-first-saas-host>', // SaaS 域名
    isMainApp: true,
  }
}

启动项目

yarn start

功能介绍

Hooks

hooks 的定义和功能如下，将 hooks 存放到 ./src/hooks 目录下，sdk 会读取并加载

interface IHooks {
  /**
   * 功能：SaaS 页面渲染前钩子，主应用生命周期中最早的钩子
   */
  enterAppHook?: () => void;

  httpHook?: {
    /**
     * 功能：请求前拦截处理。可以在此处添加自定义的请求头
     * 示例：
     * ```
     *  before: (req) => {
     *    req.headers && (req.headers["abc"] = "sdf-main-sdk");
     *  }
     * ```
     */
    before?: (req) => void;
		
    /**
     * 功能：响应拦截处理。可以在这里统一格式化数据
     * 示例：
     * ```
     *  after: (data) => {
     *    // ....数据格式化逻辑
     *    return data;
     *  }
     * ```
     */
    after?: (data) => any;
  };

  /**
   * 功能：未登录时，对 SaaS 信息拦截处理
   */
  unLoginSaaSHook?: (saas: any) => Promise<any>;

  /**
   * 功能：登录成功后，对 SaaS 信息拦截处理
   */
  loginedSaaSHook?: (saasInfo: any) => Promise<any>;
}

页面 UI 配置

相关的配置，是以 props 属性的方式透传到组件内。具体配置项与使用方法如下

1. 登录页

类型定义

interface LoginPageProps {
  extra?: {
    // 标题
    TitleSolt?: React.FC<{ logo: string; title: string }>;

    // 背景图	
    BgSlot?: React.FC<{ bg: string }>;

    // 三要素
    ClauseSlot?: React.FC;

    // 右上角导航
    ExtraNavSlot?: React.FC;
  };
  customStyle?: {
    // 自定义表单样式
    formStyle?: React.CSSProperties;
  };
}

示例

// ./src/pages/login/index.tsx
import { LoginPage } from "@tuya-sat/sdf-main-sdk";

export default (props: LoginPageProps) => {
  return <LoginPage {...props} />
}

2. 忘记密码页

类型定义

interface ForgetPageProps {
  extra?: {
    // 背景图	
    BgSlot?: React.FC<{ bg: string }>;
  };
  customStyle?: {
	// 自定义表单样式
    formStyle?: React.CSSProperties;
  };
}

示例

// ./src/pages/forget/index.tsx
import { ForgetPage } from "@tuya-sat/sdf-main-sdk";

export default (props: ForgetPageProps) => {
  return <ForgetPage {...props} />
}

3. 注册页

类型定义

interface RegisterPageProps {
  extra?: {
    // 背景图	
    BgSlot?: React.FC<{ bg: string }>;
  };
  customStyle?: {
    // 自定义表单样式
    formStyle?: React.CSSProperties;
  };
}

示例

// ./src/pages/register/index.tsx
import { RegisterPage } from "@tuya-sat/sdf-main-sdk";

export default (props: RegisterPageProps) => {
  return <RegisterPage {...props} />
}

4. 设置页

类型定义

interface SettingPageProps {
  extra?: {
    beforeSlot?: React.FC;
    afterSlot?: React.FC;
  };
}

示例

// ./src/pages/setting/index.tsx
import { SettingPage } from "@tuya-sat/sdf-main-sdk";

export default (props: RegisterPageProps) => {
  return <SettingPage {...props} />
}

头部自定义配置

类型定义

type NavProps = {
  extra?: {
    // 自定义logo、标题
    LogoTitleSlot?: FC<{ title?: string; logo?: string }>;
    // 自定义右上角导航
    HeaderNavSlot?: FC;
    BeforeHeaderNavSlot?: FC;
    AfterHeaderNavSlot?: FC;
    // 自定义用户信息
    UserSlot?: FC;
    // 自定义 app 二维码下载
    QrcodeSlot?: FC;
  };
  hooks?: {
    modify?: (dmenus: Dmenus) => Dmenus;
    customUserRoles?: () => Promise<{
      role_code: string;
      role_name: string;
    }[]>;
  };
};

示例

// ./src/nav/index.tsx
import { MNav } from "@tuya-sat/sdf-main-sdk";

export default (props: NavProps) => {
  return <SettingPage {...props} />
}

多语言

如果新增了自定义组件，那其多语言需要存放到 ./src/lang 目录下，并且在组件内部需要引用 sdk 暴露的 i18n 方法进行翻译。如下：