Skip to content

Commit 713cd8f

Browse files
LZS911LZS911
authored
Merge pull request #770 from actiontech/chore/dms-kit-docs
Chore/dms kit docs
2 parents 99d2ecb + 2012feb commit 713cd8f

File tree

252 files changed

+8058
-19753
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

252 files changed

+8058
-19753
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/.dumirc.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ export default defineConfig({
3434
`html, body {
3535
background: transparent;
3636
}`,
37+
// 在base中引入了less文件，其他包括antd reset.css包含box-sizing: border-box，这里需要再重置一下
38+
// 不然组件在demo中会有一些样式问题
39+
`*, *::before, *::after {
40+
box-sizing: border-box;
41+
}`,
3742
`.dumi-default-toc {
3843
display: none !important;
3944
}

‎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-
```

‎packages/dms-kit/src/components/ActionButton/README.md‎

Lines changed: 74 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,80 @@
11
---
2-
title: 对一些常见的带有其他功能按钮的封装
3-
category: business
2+
group:
3+
title: 业务组件
4+
order: 3
45
---
56

6-
## Example
7+
# ActionButton 操作按钮
78

8-
```
9-
TODO
9+
基于 BasicButton 封装，提供确认框、提示框等常见功能的按钮组件。
1010

11-
暂时先与 shared 中的 ActionButton 共存，此版本为移除了 link 相关功能的版本。主要为了解除与 react router 的耦合。
11+
## 何时使用
1212

13-
base、sqle 中仍然先使用 shared 中的版本，后续进行迁移并调整 link 功能的实现。
14-
```
13+
- 需要在按钮点击时显示确认框
14+
- 需要为禁用的按钮显示提示信息
15+
- 需要批量渲染多个操作按钮
16+
17+
## 代码演示
18+
19+
### 基础用法
20+
21+
<code src="./demo/basic.tsx"></code>
22+
23+
### 按钮组
24+
25+
<code src="./demo/group.tsx"></code>
26+
27+
## API
28+
29+
### ActionButton
30+
31+
ActionButton 基于 BasicButton 封装，继承所有 BasicButton 属性。
32+
33+
#### 通用属性
34+
35+
| 参数 | 说明 | 类型 | 默认值 | 必填 |
36+
| --- | --- | --- | --- | --- |
37+
| text | 按钮文本 | `ReactNode` | - | - |
38+
| actionType | 按钮类型 | `'confirm' \| 'tooltip'` | - | - |
39+
40+
#### actionType='confirm' 时
41+
42+
| 参数 | 说明 | 类型 | 默认值 | 必填 |
43+
| --- | --- | --- | --- | --- |
44+
| confirm | 确认框配置 | `PopconfirmProps` | - | ✅ |
45+
46+
#### actionType='tooltip' 时
47+
48+
| 参数 | 说明 | 类型 | 默认值 | 必填 |
49+
| --- | --- | --- | --- | --- |
50+
| tooltip | 提示框配置 | `BasicTooltipProps` | - | ✅ |
51+
52+
### ActionButtonGroup
53+
54+
| 参数 | 说明 | 类型 | 默认值 | 必填 |
55+
| --- | --- | --- | --- | --- |
56+
| actions | 按钮配置数组 | `Array<ActionButtonProps & { key: Key }>` | - | ✅ |
57+
58+
继承 Ant Design Space 的所有其他属性（如 `size`、`direction` 等）。
59+
60+
## 组件特点
61+
62+
1. **统一样式规范** → 自动应用项目主题系统的样式
63+
2. **确认框支持** → actionType='confirm' 时显示确认弹窗
64+
3. **提示框支持** → actionType='tooltip' 时显示提示信息
65+
4. **批量渲染** → ActionButtonGroup 支持批量渲染多个按钮
66+
5. **完全兼容** → 继承 BasicButton 和 Space 所有功能
67+
68+
## 注意事项
69+
70+
1. 组件需要包裹在 `ConfigProvider` 中确保主题正常工作
71+
2. `actionType='confirm'` 时，`confirm` 属性为必填
72+
3. `actionType='tooltip'` 时，`tooltip` 属性为必填
73+
4. ActionButtonGroup 中的每个按钮必须提供唯一的 `key`
74+
75+
## 最佳实践
76+
77+
1. **删除操作**：使用 `actionType='confirm'` 和 `danger` 属性
78+
2. **禁用按钮**：配合 `actionType='tooltip'` 说明禁用原因
79+
3. **按钮组**：使用 ActionButtonGroup 统一管理表格或列表的操作按钮
80+
4. **确认文案**：为重要操作提供清晰的确认文案

‎packages/dms-kit/src/components/ActionButton/demo/basic.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react';
2+
import { ActionButton, ConfigProvider } from '@actiontech/dms-kit';
3+
import { Space, Typography } from 'antd';
4+
import { CloseCircleOutlined, SearchOutlined } from '@actiontech/icons';
5+
6+
const { Text } = Typography;
7+
8+
const ActionButtonBasicDemo = () => {
9+
const handleEdit = () => {
10+
console.log('编辑操作');
11+
};
12+
13+
const handleDelete = () => {
14+
console.log('删除操作');
15+
};
16+
17+
return (
18+
<ConfigProvider>
19+
<Space direction="vertical" size="large" style={{ width: '100%' }}>
20+
<div>
21+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
22+
普通按钮：
23+
</Text>
24+
<Space>
25+
<ActionButton type="primary" text="主要按钮" onClick={handleEdit} />
26+
<ActionButton text="次要按钮" onClick={handleEdit} />
27+
<ActionButton type="link" text="链接按钮" onClick={handleEdit} />
28+
</Space>
29+
</div>
30+
31+
<div>
32+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
33+
确认按钮（actionType='confirm'）：
34+
</Text>
35+
<Space>
36+
<ActionButton
37+
actionType="confirm"
38+
danger
39+
text="删除"
40+
icon={<CloseCircleOutlined />}
41+
confirm={{
42+
title: '确定要删除这条记录吗？',
43+
onConfirm: handleDelete
44+
}}
45+
/>
46+
<ActionButton
47+
actionType="confirm"
48+
text="重置"
49+
confirm={{
50+
title: '确定要重置所有配置吗？此操作不可恢复',
51+
onConfirm: () => console.log('重置操作')
52+
}}
53+
/>
54+
</Space>
55+
</div>
56+
57+
<div>
58+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
59+
提示按钮（actionType='tooltip'）：
60+
</Text>
61+
<Space>
62+
<ActionButton
63+
actionType="tooltip"
64+
text="搜索"
65+
icon={<SearchOutlined />}
66+
disabled
67+
tooltip={{
68+
title: '没有搜索权限'
69+
}}
70+
/>
71+
<ActionButton
72+
actionType="tooltip"
73+
text="导出"
74+
disabled
75+
tooltip={{
76+
title: '数据加载中，请稍后再试'
77+
}}
78+
/>
79+
</Space>
80+
</div>
81+
</Space>
82+
</ConfigProvider>
83+
);
84+
};
85+
86+
export default ActionButtonBasicDemo;

‎packages/dms-kit/src/components/ActionButton/demo/group.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from 'react';
2+
import { ActionButtonGroup, ConfigProvider } from '@actiontech/dms-kit';
3+
import { Space, Typography } from 'antd';
4+
import {
5+
SearchOutlined,
6+
CloseCircleOutlined,
7+
CheckCircleOutlined
8+
} from '@actiontech/icons';
9+
10+
const { Text } = Typography;
11+
12+
const ActionButtonGroupDemo = () => {
13+
const handleEdit = () => {
14+
console.log('编辑');
15+
};
16+
17+
const handleDelete = () => {
18+
console.log('删除');
19+
};
20+
21+
const handleCopy = () => {
22+
console.log('复制');
23+
};
24+
25+
const actions = [
26+
{
27+
key: 'edit',
28+
text: '查看',
29+
icon: <SearchOutlined />,
30+
onClick: handleEdit
31+
},
32+
{
33+
key: 'copy',
34+
text: '通过',
35+
icon: <CheckCircleOutlined />,
36+
onClick: handleCopy
37+
},
38+
{
39+
key: 'delete',
40+
actionType: 'confirm' as const,
41+
text: '拒绝',
42+
icon: <CloseCircleOutlined />,
43+
danger: true,
44+
confirm: {
45+
title: '确定要拒绝这条记录吗？',
46+
onConfirm: handleDelete
47+
}
48+
}
49+
];
50+
51+
const disabledActions = [
52+
{
53+
key: 'edit',
54+
actionType: 'tooltip' as const,
55+
text: '查看',
56+
icon: <SearchOutlined />,
57+
disabled: true,
58+
tooltip: {
59+
title: '没有查看权限'
60+
}
61+
},
62+
{
63+
key: 'delete',
64+
actionType: 'tooltip' as const,
65+
text: '拒绝',
66+
icon: <CloseCircleOutlined />,
67+
disabled: true,
68+
tooltip: {
69+
title: '没有拒绝权限'
70+
}
71+
}
72+
];
73+
74+
return (
75+
<ConfigProvider>
76+
<Space direction="vertical" size="large" style={{ width: '100%' }}>
77+
<div>
78+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
79+
操作按钮组：
80+
</Text>
81+
<ActionButtonGroup actions={actions} />
82+
</div>
83+
84+
<div>
85+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
86+
禁用状态（带 Tooltip）：
87+
</Text>
88+
<ActionButtonGroup actions={disabledActions} />
89+
</div>
90+
91+
<div>
92+
<Text strong style={{ display: 'block', marginBottom: 8 }}>
93+
自定义间距：
94+
</Text>
95+
<ActionButtonGroup actions={actions} size="large" />
96+
</div>
97+
</Space>
98+
</ConfigProvider>
99+
);
100+
};
101+
102+
export default ActionButtonGroupDemo;

0 commit comments

Comments
 (0)