@@ -12,61 +12,39 @@ dms-kit 是一个基于 Ant Design 封装的业务组件库,提供统一的样
1212
1313``` bash
1414npm install @actiontech/dms-kit
15+ # 或
16+ yarn add @actiontech/dms-kit
17+ # 或
18+ pnpm add @actiontech/dms-kit
1519```
1620
17- ### 基础用法
21+ ## 组件特点
1822
19- ``` tsx
20- import React from ' react' ;
21- import { ConfigProvider , BasicButton , BasicInput , BasicSelect } from ' @actiontech/dms-kit' ;
23+ 1 . ** 统一样式** : 基于 Ant Design 封装,保持设计一致性
24+ 2 . ** TypeScript** : 完整的类型定义,提供良好的开发体验
25+ 3 . ** 主题系统** : 支持亮色/暗色主题切换和自定义
26+ 4 . ** 国际化** : 内置中英文语言包,支持扩展
27+ 5 . ** 业务封装** : 针对常见业务场景提供开箱即用的解决方案
2228
23- const App = () => (
24- <ConfigProvider >
25- <BasicButton type = " primary" >按钮</BasicButton >
26- <BasicInput placeholder = " 请输入内容" />
27- <BasicSelect
28- placeholder = " 请选择"
29- options = { [
30- { label: ' 选项1' , value: ' 1' },
31- { label: ' 选项2' , value: ' 2' }
32- ]}
33- />
34- </ConfigProvider >
35- );
29+ ## 使用注意事项
3630
37- export default App ;
38- ```
39-
40- ## 定制主题
31+ 1 . ** 必须使用 ConfigProvider** :所有组件都需要包裹在 ConfigProvider 中才能正常工作
32+ 2 . ** 版本兼容** :确保 React 版本 >= 17,Ant Design 版本与组件库匹配
33+ 3 . ** 按需引入** :建议使用按需引入方式,减少打包体积
34+ 4 . ** 类型支持** :使用 TypeScript 开发时,组件会提供完整的类型提示
35+ 5 . ** 样式覆盖** :如需自定义样式,建议通过主题系统或 CSS Modules 实现
4136
42- 所有组件都支持主题系统,可通过 ` ConfigProvider ` 的 ` theme ` 和 ` themeData ` 属性进行配置。例如切换深色主题:
37+ ## 最佳实践
4338
44- ```
45- import React from 'react';
46- import { ConfigProvider, SupportTheme } from '@actiontech/dms-kit';
39+ 1 . ** 统一封装** :在项目入口统一配置 ConfigProvider,包括主题、语言等
40+ 2 . ** 类型安全** :充分利用 TypeScript 类型定义,避免运行时错误
41+ 3 . ** 样式隔离** :避免直接修改组件样式,优先使用主题系统
42+ 4 . ** 组件复用** :对于重复使用的业务场景,基于基础组件二次封装
43+ 5 . ** 性能优化** :合理使用懒加载组件,避免不必要的渲染
4744
48- const App = () => (
49- <ConfigProvider theme={SupportTheme.DARK}>
50- {/* 你的应用 */}
51- </ConfigProvider>
52- );
53-
54- export default App;
55- ```
56-
57- ## 国际化
58-
59- 组件库内置中英文语言包,可通过 ` ConfigProvider ` 的 ` language ` 和 ` resources ` 属性进行切换和扩展。例如切换英文:
60-
61- ```
62- import React from 'react';
63- import { ConfigProvider, SupportLanguage } from '@actiontech/dms-kit';
45+ ## 相关资源
6446
65- const App = () => (
66- <ConfigProvider language={SupportLanguage.enUS}>
67- {/* 你的应用 */}
68- </ConfigProvider>
69- );
47+ - [ Ant Design 官方文档] ( https://ant.design/components/overview-cn )
48+ - [ React 官方文档] ( https://react.dev/ )
49+ - [ TypeScript 官方文档] ( https://www.typescriptlang.org/ )
7050
71- export default App;
72- ```
0 commit comments