业务组件库

目录结构

ngiq-ui-component
├── package.json
├── prettier.config.cjs
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.tsx                             # 不会被打包，可用于本地调试组件
│   ├── assets
│   │   └── react.svg
│   ├── components                          # 会被打包构建，存放组件的目录
│   │   ├── date-picker                     # 组件名
│   │   │   ├── date-picker.tsx             # 组件实现
│   │   │   └── index.ts                    # ts类型申明
│   │   ├── xxx
│   │   │   ├── xxx.tsx
│   │   │   └── xxx.ts
│   │   └── index.ts                        # 打包入口文件，组件的引用集合
│   ├── index.css
│   ├── main.tsx                            # 不会被打包，可用于本地调试
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

项目环境要求

• node >= 16
• npm >= 8
• react = 16.14.0
• react-dom = 16.14.0
• antd = 4.24.12
• less

基本能力

• [ ] 国际化
• [ ] 主题切换
• [ ] 代码补全：支持TS

组件

• LayoutTemplate
• NotificationCenter
• NotificationList ...

使用方式

基础配置

• 组件库依赖less，对应的vite配置为

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        math: 'always',
        relativeUrls: true,
        javascriptEnabled: true,
      },
    },
  },
});

• main.tsx引入less文件

import ReactDOM from 'react-dom';
import 'ngiq-ui-component/dist/style/theme.less';

import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

全部配置

需要使用国际化、动态主题色切换的能力时，可参考

import { NGConfigProvider } from 'ngiq-ui-component';
import enUS from 'antd/es/locale/en_US';
import zhCN from 'antd/es/locale/zh_CN';

const [locale, setLocal] = useState(zhCN);

const changeIntl = () => {
  locale === enUS ? setLocal(zhCN) : setLocal(enUS)
}

const changeTheme = () => {
  // antd v4的动态主题切换能力有限，仅支持5类颜色配置
  // 暂不适用NGConfigProvider.config，通过复写less变量更灵活、强大
  NGConfigProvider.config({
    theme: {
      primaryColor: '#25b864',
      errorColor: '#ff4d4f',
      warningColor: '#faad14',
      successColor: '#52c41a',
      infoColor: '#1890ff',
    }
  })
}

<NGConfigProvider locale={locale}>
  <button onClick={changeIntl}>切换国际化</button>
  <button onClick={changeTheme}>切换主题</button>
  <!-- 被NGConfigProvider包裹的ngiq-ui-component组件具备切换国际化、主题的能力 -->
  <!-- <NGNotificationCenter notifications={notifications} badgeProps={{ count: 6 }} iconProps={{ style: { fontSize: '20px' } }} popoverProps={{placement: 'rightTop'}}/> -->
</NGConfigProvider>

NotificationCenter

import { NGNotificationCenter } from 'ngiq-ui-component';

<NGNotificationCenter
  notifications={notifications}
  badgeProps={{ count: 5 }}
  iconProps={{ style: { fontSize: '20px' } }}
  popoverProps={{ placement: 'rightTop' }}
  onClickNotification={onClickNotification}
  onClickViewAll={onClickViewAll}
/>

| Props | Description | | ----------- | ----------- | | notifications | 消息列表数据源 | | badgeProps | 支持全量badge属性 | | iconProps | 支持全量icon属性 | | popoverProps | 支持全量popover属性 | | onClickNotification | 点击单条消息回调，回调参数为消息对象 | | onClickViewAll | 点击查看所有回调 |