@teamix/pro-dashboard

ProDashboard - 工作台组件

ProDashboard 为了解决工作台的操作体验一致性，并将通用逻辑进行内部封装，减少业务开发工作台的成本。

何时使用

主要用于工作台页面，搭配微模块进行使用。

属性名	描述	类型	必填	默认值
info	头部的自定义区域	ReactNode	是
bg	头部背景图url，推荐高度96px	string	是
intl	用于国际化的对象，至少包含get方法	Object	否
baseUrl	和加载的模块资源地址进行拼接	string	否
timestamp	会在加载的模块资源地址后加查询参数，实现缓存更新	string	否
workbenchConfig	获取组件所需完整数据接口配置，初始时也需返回第一个tab下的数据	TWorkbenchConfig	是
manageConfig	管理模块弹窗卡片保存接口配置	TManageConfig	否
layoutConfig	保存布局接口配置	TSaveLayoutConfig	否
saveTabItemConfig	保存tab修改接口配置，暂未透出	TSaveTabItemConfig	否
gridLayoutProps	透传给gridLayout的属性，1.1.0版本添加。详见https://web.npm.alibaba-inc.com/package/react-grid-layout	any	否

CommonRequestConfig

interface CommonRequestConfig {
  /** 请求地址 */
  url: string;
  /** 请求方法 */
  method?:
    | 'get'
    | 'GET'
    | 'delete'
    | 'DELETE'
    | 'head'
    | 'HEAD'
    | 'options'
    | 'OPTIONS'
    | 'post'
    | 'POST'
    | 'put'
    | 'PUT'
    | 'patch'
    | 'PATCH'
    | 'purge'
    | 'PURGE'
    | 'link'
    | 'LINK'
    | 'unlink'
    | 'UNLINK';
  /** 请求参数 */
  params?: any;
  /** 请求参数。同时支持两种类型的参数，会自动根据请求方法做转换 */
  data?: any;
  /** 扩展参数，会经过上下文处理，扩展到数据请求的参数中。
   * 相当于执行 Objec.assign({}, extendParams, params)。
   * 支持数组模式 extendParams = ['{{location}}', '{{fields}}']
   */
  extendParams?: any;
  /** 请求前处理函数
   * 如果返回 false 或者 Promise<false>，则停止发送请求。
   * 如果返回 true 或者 Promise<true>，则正常发送请求。
   * 如果返回其他对象，则正常发送请求，并把返回的对象放到接下来请求处理的上下文中。
   */
  beforeRequest?: (context?: any) => MaybePromise<boolean | object>;
  /** 请求成功后的消息，如有配置，会弹出成功提示 */
  successMsg?: string;
  /** 请求失败后的消息，如有配置，会弹出失败提示 */
  errorMsg?: string;
  /** 请求参数格式化函数，支持上下文类型 */
  formatParams?: CommonRequestFormatter;
  /** 请求返回内容格式化函数，支持上下文类型 */
  formatResult?: CommonRequestFormatter;
  /** 请求成功后的回调函数，支持使用上下文 */
  onSuccess?: string | ((res: any, context?: any) => any);
  /** 请求失败后的回调函数，支持使用上下文 */
  onError?: string | ((error: any, context?: any) => any);
  /** 请求成功后的跳转链接 */
  link?: LinkPath;
}

ICube

单个卡片的数据

interface ICube {
  id: string;
  url: string[]; // 卡片内需要加载的资源链接
  title: string; // 卡片标题
  img: string; // 卡片缩列图
  checked: boolean; // 卡片是否选中
  disabled: boolean; // 卡片是否禁用
  permission?: boolean; // 卡片是否有权限
  props?: any; // 卡片支持的API透传
}

ITabItem

单个tab项的数据

interface ITabItem {
  defaultTab: boolean; // 是否是预置tab项
  id: string;
  name: string; // tab项标题文案
  cubeList: ICube[]; // tab项卡片列表
  layout: string; // tab项卡片布局
  extra?: any; // 其他一些数据项
}

ITab

整体数据

interface ITab {
  tabs: Array<Pick<ITabItem, 'id' | 'name'>>;
  viewTab: ITabItem;
}

TWorkbenchConfig

获取组件所需完整数据接口配置

type TWorkbenchConfig = Pick<
  CommonRequestConfig,
  'url' | 'method' | 'data' | 'params' | 'formatParams' | 'formatResult'
>

TManageConfig

管理模块弹窗卡片保存接口配置

type TManageConfig = Pick<
  CommonRequestConfig,
  | 'url'
  | 'method'
  | 'data'
  | 'params'
  | 'formatParams'
  | 'formatResult'
  | 'successMsg'
  | 'errorMsg'
  | 'onSuccess'
  | 'onError'
>

TSaveLayoutConfig

保存布局接口配置

type TSaveLayoutConfig = Pick<
  CommonRequestConfig,
  | 'url'
  | 'method'
  | 'data'
  | 'params'
  | 'formatParams'
  | 'formatResult'
  | 'successMsg'
  | 'errorMsg'
  | 'onSuccess'
  | 'onError'
>

TSaveTabItemConfig

保存tab修改接口配置

type TSaveTabItemConfig = Pick<
  CommonRequestConfig,
  | 'url'
  | 'method'
  | 'data'
  | 'params'
  | 'formatParams'
  | 'formatResult'
  | 'successMsg'
  | 'errorMsg'
  | 'onSuccess'
  | 'onError'
>