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 >= 16npm >= 8react = 16.14.0react-dom = 16.14.0antd = 4.24.12less
- [ ] 国际化
- [ ] 主题切换
- [ ] 代码补全：支持TS
LayoutTemplateNotificationCenter-
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>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 | 点击查看所有回调 |