4. 首页配置

4.1. 关联sk

在前端 app.tsx 中关联所有字典的 sk，举例：

this.anClient.getSks((sks) => {
                      Object.assign(Protocol.sk, sks);
                      console.log(sks);
              }, this.errorCtx);

              Protocol.sk.xvec = 'x.cube.vec';
              Protocol.sk.cbbOrg = 'org.all';
              Protocol.sk.cbbRole = 'roles';
              Protocol.sk.cbbMyClass = 'north.my-class';

在后端 dataset.xml 配置字典的 sk，举例：

<c>
  <sk>org.all</sk>
  <mysql>select orgId value, orgName text from a_orgs</mysql>
</c>

提示

配置好关联后，前端就可以使用 Protocol.sk.cbbOrg 来获取 <sk>org.all</sk>的查询结果了

4.2. 全局变量

在首页 app.tsx 中配置全局变量，使所有子节点都可以直接访问，举例：

<AnContext.Provider value={{
        ssInf: undefined,
        pageOrigin: window ? window.origin : 'localhost',
        servId: this.state.servId,
        servs: this.props.servs,
        anClient: this.anClient, // as typeof SessionClient | Inseclient,
        uiHelper: this.anReact,
        hasError: this.state.hasError,
        iparent: this.props.iparent,
        ihome: this.props.iportal || 'portal.html',
        error: this.errorCtx,
}}>

</AnContext.Provider>

提示

子节点需要先设置 Comp.contextType = AnContext；然后再使用 this.context 访问全局变量

4.3. 主题样式

在主题文件 styles.tsx 中配置统一的样式，举例：

export const JsampleTheme = responsiveFontSizes(createTheme({
  palette: {
    primary: {
      light: "#fff",
      main: "rgb(23, 105, 170)",
      dark: "#000"
    },
    secondary: {
      main: "#f44336"
    }
  },
  breakpoints: {
    values: {
      xs: 200,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920
    }
  },
}));

参数解析：
1、palette为调色板，主要有五种类型：Primary、Secondary、Error、Warning、Info、Success
2、breakpoints为断点，xs表示超小屏、sm表示小屏、md表示中屏、lg表示大屏、xl表示超大屏
3、breakpoints默认单位为px，（md:960 表示屏幕宽度在 960px~1280px 之间为中屏）
4、可以设置组件在不同的断点区域所占的宽度不同，比如在lg大屏时宽度为33%，sm小屏时宽度为100%

提示

4.4. 图标样式

在主题文件 styles.tsx 中定义统一的图标样式，举例：

export const JsampleIcons = {
Add   : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <AddBox {...props} ref={ref} />),
Check : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <Check {...props} ref={ref} />),
Clear : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <DeleteOutline {...props} ref={ref} />),
Close : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <Close {...props} ref={ref} />),
Edit  : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <SaveAlt {...props} ref={ref} />),
Filter: forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <LastPage {...props} ref={ref} />),
NextPage : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <ChevronRight {...props} ref={ref} />),
DetailPanel : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef<SVGSVGElement>((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch : forwardRef<SVGSVGElement>((props, ref) => <Clear {...props} ref={ref} />),
ViewColumn  : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <ViewColumn {...props} ref={ref} />),
ItemCollapse: forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <FormatLineSpacingIcon {...props} ref={ref} />),
Search      : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <Search {...props} ref={ref} />),
SortArrow   : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <Remove {...props} ref={ref} />),
Worksheet   : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <GridOnIcon {...props} ref={ref} />),
ListAdd : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <PlaylistAddIcon {...props} ref={ref} />),
Star    : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <StarBorder {...props} ref={ref} />),
Up      : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <ArrowUpwardIcon  {...props} ref={ref} />),
Down    : forwardRef<SVGSVGElement, {onClick?: any} & DefaultComponentProps<any>>((props, ref) => <ArrowDownwardIcon {...props} ref={ref} />)
};

提示

定义的图标都是透明背景，可以自定义颜色。