Skip to content

Commit 2012feb

Browse files
committed
[docs](ActiontechTable): Adjust docs
1 parent 194b3ce commit 2012feb

File tree

11 files changed

+2091
-58
lines changed

11 files changed

+2091
-58
lines changed

.prettierignore

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
11
*.snap
2-
*.md
3-
**/demo/**
4-
**/demos/**
2+
*.md

packages/dms-kit/docs/components.md

Lines changed: 26 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -12,61 +12,39 @@ dms-kit 是一个基于 Ant Design 封装的业务组件库,提供统一的样
1212

1313
```bash
1414
npm 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

Comments
 (0)