name: '@gzbapp/components'

@gzbapp/components 是严格根据 SAPP UI 规范定制的一套组件库，主要用于工作宝应用前台。 SAPP UI 规范定制2.0-更新于2023-05

特点

• 组件高度自治, 业务解耦
• 支持深色模式
• 适配移动端和桌面端
• 支持多语言

安装

$ yarn add @gzbapp/components

因为 @gzbapp/components SAPP 开发套件的一部分，也可以通过 @gzbapp/packages 安装:

$ yarn add @gzbapp/packages

配置

以 @gdjiami/cli 为例, package.json 配置如下:

{
  // ...
  "jm": {
    "importPlugin": [
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      },
      {
        "libraryName": "@gzbapp/components",
        "libraryDirectory": "es",
        "style": "css"
      }
    ]
  }
}

我们使用了和 antd 一样的源代码组织结构，通过 babel-import-plugin 来实现按需导入代码和样式。

基本用法

初始化多语言

@gzbapp/components 依赖于 @gzbapp/i18n 来实现多语言，所以在入口处，需要进行多语言初始化:

/**
 * App entry
 */
import ready from '@gzbapp/runtime'
import i18n, { initial, addAppBundles, AvailableLanguge } from '@gzbapp/i18n'
import { I18n } from '@gzbapp/components'

import React from 'react'
import ReactDOM from 'react-dom'
import App from '~/containers/App'

ready().then(async () => {
  if (window.GZBSupport) {
    // 初始化 i18n
    await initial({
      supportBackend: true,
      backendName: 'demo',
    })

    // 加载组件库多语言
    await I18n.initial()

    // 本地多语言
    addAppBundles({
      [AvailableLanguge.zh]: {
        hello: '你好',
      },
      [AvailableLanguge.tw]: {
        hello: '你好',
      },
      [AvailableLanguge.en]: {
        hello: 'hello',
      },
    })

    ReactDOM.render(<App />, document.getElementById('root'), () => {
      console.log('首次渲染完成, 耗时 ', performance.now() + ' ms')
    })
  }
})

组件使用

用法和 Antd 一样，具体组件用法见组件 API。

import React from 'react'
import { ScrollView, Button } from '@gzbapp/components'

export default function ButtonDemo() {
  return (
    <ScrollView className="jm-bg-main">
      <div className="jm-btns">
        <Button>hello</Button>
        <Button loading>hello</Button>
        <Button loading danger>
          hello
        </Button>
      </div>
      <Button type="block">hello</Button>
      <Button type="block" danger>
        hello
      </Button>
      <Button type="rounded">hello</Button>
      <Button type="rounded" disabled>
        hello
      </Button>
      <Button type="rounded" danger>
        hello
      </Button>
      <Button type="rounded" danger loading>
        hello
      </Button>
    </ScrollView>
  )
}

因为导入语句会经过 babel-import-plugin 处理, 最终编译结果为:

import ScrollView from '@gzbapp/components/es/scroll-view'
import '@gzbapp/components/es/scroll-view/style/css'
import Button from '@gzbapp/components/es/button'
import '@gzbapp/components/es/button/style/css'

所以说 import-plugin 的配置非常重要，它可以确保按需导入样式和组件。

Typescript 类型

所有组件的 Typescript 类型声明都定义在导出变量 T 中, 例如你可以通过下面的代码导入 Avatar 组件的 AvatarProps

import { T } from '@gzbapp/components'

export interface MyProps extends T.Avatar.AvatarProps {}

SAPP UI 规范定制2.0 更新记录

1. app-layout组件封装完成(20230706)