@mingfuyun/star-allinone 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +324 -103
- package/dist/components/BaseModal/index.d.ts +7 -7
- package/dist/components/BaseModal/index.d.ts.map +1 -1
- package/dist/components/Cron/index.d.ts.map +1 -1
- package/dist/components/CustomDrawer/index.d.ts +3 -1
- package/dist/components/CustomDrawer/index.d.ts.map +1 -1
- package/dist/components/ErrorBoundary/index.d.ts +8 -0
- package/dist/components/ErrorBoundary/index.d.ts.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.LICENSE.txt +0 -24
- package/dist/styles.css +38 -1
- package/package.json +1 -1
- package/dist/components/CommonTable/MFProTable.d.ts +0 -7
- package/dist/components/CommonTable/MFProTable.d.ts.map +0 -1
- package/dist/components/CommonTable/components/TableActions/index.d.ts +0 -17
- package/dist/components/CommonTable/components/TableActions/index.d.ts.map +0 -1
- package/dist/components/CommonTable/components/WithPermission/index.d.ts +0 -8
- package/dist/components/CommonTable/components/WithPermission/index.d.ts.map +0 -1
- package/dist/components/CommonTable/type.d.ts +0 -188
- package/dist/components/CommonTable/type.d.ts.map +0 -1
- package/dist/components/CommonTable/useAuthFilter.d.ts +0 -7
- package/dist/components/CommonTable/useAuthFilter.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,18 +1,15 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @mingfuyun/star-allinone
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
[](https://badge.fury.io/js/%40mfy%2Fallinone-components)
|
|
6
|
-
[](https://opensource.org/licenses/MIT)
|
|
3
|
+
星系运维前端能力包 - 包含Cron表达式生成器等实用组件
|
|
7
4
|
|
|
8
5
|
## 📦 安装
|
|
9
6
|
|
|
10
7
|
```bash
|
|
11
|
-
npm install @
|
|
8
|
+
npm install @mingfuyun/star-allinone
|
|
12
9
|
# 或
|
|
13
|
-
yarn add @
|
|
10
|
+
yarn add @mingfuyun/star-allinone
|
|
14
11
|
# 或
|
|
15
|
-
pnpm add @
|
|
12
|
+
pnpm add @mingfuyun/star-allinone
|
|
16
13
|
```
|
|
17
14
|
|
|
18
15
|
## 🚀 快速开始
|
|
@@ -21,16 +18,16 @@ pnpm add @mfy/allinone-components
|
|
|
21
18
|
|
|
22
19
|
```tsx
|
|
23
20
|
import React from 'react';
|
|
24
|
-
import { Cron,
|
|
25
|
-
import '@
|
|
21
|
+
import { Cron, CustomDrawer } from '@mingfuyun/star-allinone';
|
|
22
|
+
import '@mingfuyun/star-allinone/dist/styles.css';
|
|
26
23
|
|
|
27
24
|
function App() {
|
|
28
25
|
return (
|
|
29
26
|
<div>
|
|
30
27
|
<Cron cronExpression="0 0 12 * * ?" />
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
<CustomDrawer open={true} title="示例" onClose={() => {}}>
|
|
29
|
+
内容
|
|
30
|
+
</CustomDrawer>
|
|
34
31
|
</div>
|
|
35
32
|
);
|
|
36
33
|
}
|
|
@@ -39,30 +36,55 @@ function App() {
|
|
|
39
36
|
### 按需引入
|
|
40
37
|
|
|
41
38
|
```tsx
|
|
42
|
-
|
|
43
|
-
import '@
|
|
39
|
+
// 引入单个组件
|
|
40
|
+
import { Cron } from '@mingfuyun/star-allinone';
|
|
41
|
+
import '@mingfuyun/star-allinone/dist/styles.css';
|
|
42
|
+
|
|
43
|
+
// 引入多个组件
|
|
44
|
+
import { Cron, CustomDrawer, HocModal } from '@mingfuyun/star-allinone';
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### 单独引入组件
|
|
48
|
+
|
|
49
|
+
如果某些组件未在主入口导出,可以直接从组件路径引入:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
// BaseModal
|
|
53
|
+
import BaseModal from '@mingfuyun/star-allinone/components/BaseModal';
|
|
54
|
+
|
|
55
|
+
// ErrorBoundary
|
|
56
|
+
import ErrorBoundary from '@mingfuyun/star-allinone/components/ErrorBoundary';
|
|
44
57
|
```
|
|
45
58
|
|
|
46
59
|
## 📚 组件文档
|
|
47
60
|
|
|
48
61
|
### Cron 表达式生成器
|
|
49
62
|
|
|
50
|
-
一个功能强大的Cron
|
|
63
|
+
一个功能强大的Cron表达式可视化生成器组件,支持通过Tab页切换配置分钟、小时、日、月、周,并提供实时预览和验证功能。
|
|
51
64
|
|
|
52
65
|
#### 基础用法
|
|
53
66
|
|
|
54
67
|
```tsx
|
|
55
68
|
import React, { useRef } from 'react';
|
|
56
|
-
import { Cron } from '@
|
|
69
|
+
import { Cron } from '@mingfuyun/star-allinone';
|
|
57
70
|
|
|
58
71
|
function CronExample() {
|
|
59
|
-
const cronRef = useRef();
|
|
72
|
+
const cronRef = useRef<any>();
|
|
60
73
|
|
|
61
74
|
const handleGetCron = () => {
|
|
62
75
|
const cronExpression = cronRef.current?.refGetCron();
|
|
63
76
|
console.log('Cron表达式:', cronExpression);
|
|
64
77
|
};
|
|
65
78
|
|
|
79
|
+
const handleReset = () => {
|
|
80
|
+
cronRef.current?.resetCronState();
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
const handleGetStatus = () => {
|
|
84
|
+
const status = cronRef.current?.getValidateStatus();
|
|
85
|
+
console.log('验证状态:', status); // 'success' | 'error' | undefined
|
|
86
|
+
};
|
|
87
|
+
|
|
66
88
|
return (
|
|
67
89
|
<div>
|
|
68
90
|
<Cron
|
|
@@ -70,64 +92,219 @@ function CronExample() {
|
|
|
70
92
|
cronExpression="0 0 12 * * ?"
|
|
71
93
|
/>
|
|
72
94
|
<button onClick={handleGetCron}>获取Cron表达式</button>
|
|
95
|
+
<button onClick={handleReset}>重置</button>
|
|
96
|
+
<button onClick={handleGetStatus}>获取验证状态</button>
|
|
73
97
|
</div>
|
|
74
98
|
);
|
|
75
99
|
}
|
|
76
100
|
```
|
|
77
101
|
|
|
102
|
+
#### 功能特性
|
|
103
|
+
|
|
104
|
+
- ✅ 支持5种时间维度配置:分钟、小时、日、月、周
|
|
105
|
+
- ✅ 支持4种执行模式:每分/时/日/月/周执行、周期执行、循环执行、指定时间执行
|
|
106
|
+
- ✅ 实时预览Cron表达式
|
|
107
|
+
- ✅ 自动验证Cron表达式有效性
|
|
108
|
+
- ✅ 支持通过props传入初始Cron表达式进行回显
|
|
109
|
+
- ✅ 支持通过ref调用方法获取表达式、重置状态、获取验证状态
|
|
110
|
+
|
|
78
111
|
#### API
|
|
79
112
|
|
|
80
113
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
81
114
|
|------|------|------|--------|
|
|
82
|
-
| cronExpression | 初始Cron
|
|
115
|
+
| cronExpression | 初始Cron表达式(5位格式:分钟 小时 日 月 周) | string | - |
|
|
83
116
|
|
|
84
|
-
#### 方法
|
|
117
|
+
#### Ref 方法
|
|
85
118
|
|
|
86
119
|
通过ref可以调用以下方法:
|
|
87
120
|
|
|
88
121
|
| 方法名 | 说明 | 返回值 |
|
|
89
122
|
|--------|------|--------|
|
|
90
|
-
| refGetCron |
|
|
91
|
-
| resetCronState |
|
|
92
|
-
| getValidateStatus |
|
|
123
|
+
| refGetCron | 获取当前生成的Cron表达式 | string |
|
|
124
|
+
| resetCronState | 重置组件状态到初始值 | void |
|
|
125
|
+
| getValidateStatus | 获取Cron表达式验证状态 | 'success' \| 'error' \| undefined |
|
|
93
126
|
|
|
94
|
-
|
|
127
|
+
#### 使用示例
|
|
95
128
|
|
|
96
|
-
|
|
129
|
+
```tsx
|
|
130
|
+
// 示例1: 每天12点执行
|
|
131
|
+
<Cron cronExpression="0 12 * * *" />
|
|
132
|
+
|
|
133
|
+
// 示例2: 每5分钟执行一次
|
|
134
|
+
<Cron cronExpression="*/5 * * * *" />
|
|
135
|
+
|
|
136
|
+
// 示例3: 每周一到周五的9点执行
|
|
137
|
+
<Cron cronExpression="0 9 * * 2-6" />
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### BaseModal 基础模态框
|
|
141
|
+
|
|
142
|
+
基于Antd Modal封装的模态框组件,提供统一的样式和默认配置。
|
|
143
|
+
|
|
144
|
+
#### 基础用法
|
|
97
145
|
|
|
98
146
|
```tsx
|
|
99
|
-
import {
|
|
147
|
+
import React, { useState } from 'react';
|
|
148
|
+
import BaseModal from '@mingfuyun/star-allinone/components/BaseModal';
|
|
100
149
|
|
|
101
150
|
function ModalExample() {
|
|
102
151
|
const [visible, setVisible] = useState(false);
|
|
103
152
|
|
|
153
|
+
const handleOk = () => {
|
|
154
|
+
console.log('确定');
|
|
155
|
+
setVisible(false);
|
|
156
|
+
};
|
|
157
|
+
|
|
104
158
|
return (
|
|
105
|
-
<
|
|
159
|
+
<BaseModal
|
|
106
160
|
visible={visible}
|
|
107
|
-
onCancel={() => setVisible(false)}
|
|
108
161
|
title="示例模态框"
|
|
162
|
+
onOk={handleOk}
|
|
163
|
+
onCancel={() => setVisible(false)}
|
|
164
|
+
width={600}
|
|
109
165
|
>
|
|
110
166
|
<p>模态框内容</p>
|
|
111
|
-
</
|
|
167
|
+
</BaseModal>
|
|
168
|
+
);
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
#### API
|
|
173
|
+
|
|
174
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
175
|
+
|------|------|------|--------|
|
|
176
|
+
| title | 标题 | string \| ReactNode | - |
|
|
177
|
+
| visible | 是否显示 | boolean | - |
|
|
178
|
+
| onOk | 确定回调 | () => void | - |
|
|
179
|
+
| onCancel | 取消回调 | () => void | - |
|
|
180
|
+
| children | 内容 | ReactNode | - |
|
|
181
|
+
| width | 宽度 | number | 320 |
|
|
182
|
+
| afterClose | 关闭后的回调 | () => void | - |
|
|
183
|
+
| okText | 确定按钮文字 | string | "确定" |
|
|
184
|
+
| cancelText | 取消按钮文字 | string | "取消" |
|
|
185
|
+
| confirmLoading | 确定按钮loading状态 | boolean | false |
|
|
186
|
+
| footer | 底部内容,设置为null时不显示 | ReactNode \| null | undefined |
|
|
187
|
+
| wrapClassName | 外层容器的类名 | string | "" |
|
|
188
|
+
| className | Modal的类名 | string | "" |
|
|
189
|
+
| keyboard | 是否支持ESC关闭 | boolean | true |
|
|
190
|
+
| maskClosable | 点击蒙层是否关闭 | boolean | true |
|
|
191
|
+
| mask | 是否显示遮罩 | boolean | true |
|
|
192
|
+
| getContainer | 指定Modal挂载的HTML节点 | () => HTMLElement | - |
|
|
193
|
+
| closable | 是否显示右上角关闭按钮 | boolean | true |
|
|
194
|
+
| destroyOnClose | 关闭时销毁Modal里的子元素 | boolean | true |
|
|
195
|
+
| closeIcon | 自定义关闭图标 | ReactNode | - |
|
|
196
|
+
|
|
197
|
+
**注意**: 组件默认居中显示(centered),关闭时自动销毁内容(destroyOnClose)。
|
|
198
|
+
|
|
199
|
+
### HocModal 高阶模态框
|
|
200
|
+
|
|
201
|
+
高阶组件(HOC),用于将任意组件包装成具有Modal功能的组件,通过ref控制显示和隐藏。
|
|
202
|
+
|
|
203
|
+
#### 基础用法
|
|
204
|
+
|
|
205
|
+
```tsx
|
|
206
|
+
import React, { useRef } from 'react';
|
|
207
|
+
import { HocModal } from '@mingfuyun/star-allinone';
|
|
208
|
+
import BaseModal from '@mingfuyun/star-allinone/components/BaseModal';
|
|
209
|
+
|
|
210
|
+
// 定义你的内容组件
|
|
211
|
+
function MyContent({ visible, handleCancel, ...props }: any) {
|
|
212
|
+
return (
|
|
213
|
+
<BaseModal
|
|
214
|
+
visible={visible}
|
|
215
|
+
onCancel={handleCancel}
|
|
216
|
+
title="通过HOC包装的Modal"
|
|
217
|
+
>
|
|
218
|
+
<p>这是通过HocModal包装的内容</p>
|
|
219
|
+
<p>接收到的props: {JSON.stringify(props)}</p>
|
|
220
|
+
</BaseModal>
|
|
221
|
+
);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
// 使用HOC包装组件
|
|
225
|
+
const WrappedModal = HocModal(MyContent);
|
|
226
|
+
|
|
227
|
+
function App() {
|
|
228
|
+
const modalRef = useRef<any>();
|
|
229
|
+
|
|
230
|
+
const handleShow = () => {
|
|
231
|
+
// 通过ref调用show方法,可以传入参数
|
|
232
|
+
modalRef.current?.show({
|
|
233
|
+
userId: 123,
|
|
234
|
+
userName: '张三'
|
|
235
|
+
});
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
const handleHide = () => {
|
|
239
|
+
modalRef.current?.hide();
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
return (
|
|
243
|
+
<div>
|
|
244
|
+
<button onClick={handleShow}>显示Modal</button>
|
|
245
|
+
<button onClick={handleHide}>隐藏Modal</button>
|
|
246
|
+
<WrappedModal ref={modalRef} />
|
|
247
|
+
</div>
|
|
112
248
|
);
|
|
113
249
|
}
|
|
114
250
|
```
|
|
115
251
|
|
|
252
|
+
#### 工作原理
|
|
253
|
+
|
|
254
|
+
HocModal会将你的组件包装,并注入以下props:
|
|
255
|
+
- `visible`: boolean - Modal的显示状态
|
|
256
|
+
- `handleCancel`: () => void - 关闭Modal的函数
|
|
257
|
+
|
|
258
|
+
通过ref可以调用:
|
|
259
|
+
- `show(args)`: 显示Modal,可以传入参数,参数会作为props传递给被包装的组件
|
|
260
|
+
- `hide()`: 隐藏Modal
|
|
261
|
+
|
|
262
|
+
#### 使用场景
|
|
263
|
+
|
|
264
|
+
适用于需要动态控制显示/隐藏,并且需要传递参数的Modal场景。
|
|
265
|
+
|
|
266
|
+
#### ⚠️ 常见错误
|
|
267
|
+
|
|
268
|
+
**错误用法**:
|
|
269
|
+
```tsx
|
|
270
|
+
// ❌ 错误:HocModal 是一个高阶组件,不能直接作为组件使用
|
|
271
|
+
<HocModal />
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
**正确用法**:
|
|
275
|
+
```tsx
|
|
276
|
+
// ✅ 正确:先使用 HocModal 包装你的组件
|
|
277
|
+
const WrappedModal = HocModal(MyContent);
|
|
278
|
+
<WrappedModal ref={modalRef} />
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
**注意**:`HocModal` 是一个函数,接受一个组件作为参数,返回一个新的包装组件。不能直接作为 React 组件使用。
|
|
282
|
+
|
|
116
283
|
### CustomDrawer 自定义抽屉
|
|
117
284
|
|
|
118
|
-
基于Antd Drawer
|
|
285
|
+
基于Antd Drawer的增强组件,提供统一的样式和默认配置,支持自定义底部操作栏。
|
|
286
|
+
|
|
287
|
+
#### 基础用法
|
|
119
288
|
|
|
120
289
|
```tsx
|
|
121
|
-
import {
|
|
290
|
+
import React, { useState } from 'react';
|
|
291
|
+
import { CustomDrawer } from '@mingfuyun/star-allinone';
|
|
122
292
|
|
|
123
293
|
function DrawerExample() {
|
|
124
|
-
const [
|
|
294
|
+
const [open, setOpen] = useState(false);
|
|
295
|
+
|
|
296
|
+
const handleConfirm = () => {
|
|
297
|
+
console.log('确定');
|
|
298
|
+
setOpen(false);
|
|
299
|
+
};
|
|
125
300
|
|
|
126
301
|
return (
|
|
127
302
|
<CustomDrawer
|
|
128
|
-
|
|
129
|
-
onClose={() => setVisible(false)}
|
|
303
|
+
open={open}
|
|
130
304
|
title="示例抽屉"
|
|
305
|
+
onClose={() => setOpen(false)}
|
|
306
|
+
onConfirm={handleConfirm}
|
|
307
|
+
width={600}
|
|
131
308
|
>
|
|
132
309
|
<p>抽屉内容</p>
|
|
133
310
|
</CustomDrawer>
|
|
@@ -135,94 +312,135 @@ function DrawerExample() {
|
|
|
135
312
|
}
|
|
136
313
|
```
|
|
137
314
|
|
|
138
|
-
|
|
315
|
+
#### API
|
|
316
|
+
|
|
317
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
318
|
+
|------|------|------|--------|
|
|
319
|
+
| title | 标题 | string | - |
|
|
320
|
+
| open | 是否显示 | boolean | - |
|
|
321
|
+
| onClose | 关闭回调 | () => void | - |
|
|
322
|
+
| onConfirm | 确定回调 | () => void | - |
|
|
323
|
+
| width | 宽度 | number \| string | - |
|
|
324
|
+
| closable | 是否显示关闭按钮 | boolean | true |
|
|
325
|
+
| cancelText | 取消按钮文字 | string | "取消" |
|
|
326
|
+
| okText | 确定按钮文字 | string | "确定" |
|
|
327
|
+
| children | 内容 | ReactNode | - |
|
|
328
|
+
| className | 自定义类名 | string | - |
|
|
329
|
+
| footer | 自定义底部内容,设置为null时不显示 | ReactNode \| null | undefined |
|
|
330
|
+
| extra | 标题右侧额外内容 | ReactNode | null |
|
|
139
331
|
|
|
140
|
-
|
|
332
|
+
**注意**: 组件默认从右侧滑出(placement="right"),标题左对齐。
|
|
333
|
+
|
|
334
|
+
### ErrorBoundary 错误边界
|
|
335
|
+
|
|
336
|
+
React错误边界组件,用于捕获子组件树中的JavaScript错误,并显示友好的错误提示页面。支持捕获同步错误和异步错误(包括Promise rejection和全局错误)。
|
|
337
|
+
|
|
338
|
+
#### 基础用法
|
|
141
339
|
|
|
142
340
|
```tsx
|
|
143
|
-
import
|
|
144
|
-
|
|
145
|
-
function TableExample() {
|
|
146
|
-
const columns = [
|
|
147
|
-
{
|
|
148
|
-
title: '姓名',
|
|
149
|
-
dataIndex: 'name',
|
|
150
|
-
key: 'name',
|
|
151
|
-
},
|
|
152
|
-
{
|
|
153
|
-
title: '年龄',
|
|
154
|
-
dataIndex: 'age',
|
|
155
|
-
key: 'age',
|
|
156
|
-
},
|
|
157
|
-
];
|
|
341
|
+
import React from 'react';
|
|
342
|
+
import ErrorBoundary from '@mingfuyun/star-allinone/components/ErrorBoundary';
|
|
158
343
|
|
|
344
|
+
function App() {
|
|
159
345
|
return (
|
|
160
|
-
<
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
success: true,
|
|
167
|
-
total: 0,
|
|
168
|
-
};
|
|
169
|
-
}}
|
|
170
|
-
/>
|
|
346
|
+
<ErrorBoundary onError={(error, errorInfo) => {
|
|
347
|
+
console.error('捕获到错误:', error, errorInfo);
|
|
348
|
+
// 可以在这里上报错误到监控系统
|
|
349
|
+
}}>
|
|
350
|
+
<YourApp />
|
|
351
|
+
</ErrorBoundary>
|
|
171
352
|
);
|
|
172
353
|
}
|
|
173
354
|
```
|
|
174
355
|
|
|
175
|
-
|
|
356
|
+
#### API
|
|
176
357
|
|
|
177
|
-
|
|
358
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
359
|
+
|------|------|------|--------|
|
|
360
|
+
| children | 子组件 | ReactNode | - |
|
|
361
|
+
| onError | 错误回调函数 | (error: Error, errorInfo: any) => void | - |
|
|
362
|
+
|
|
363
|
+
#### 功能特性
|
|
364
|
+
|
|
365
|
+
- ✅ 捕获组件渲染、生命周期方法中的错误
|
|
366
|
+
- ✅ 捕获未处理的Promise rejection
|
|
367
|
+
- ✅ 捕获全局JavaScript错误
|
|
368
|
+
- ✅ 显示友好的错误提示页面
|
|
369
|
+
- ✅ 提供刷新页面按钮
|
|
370
|
+
- ✅ 支持自定义错误处理回调
|
|
371
|
+
|
|
372
|
+
#### 使用示例
|
|
178
373
|
|
|
179
374
|
```tsx
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
//
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
// 节流函数
|
|
205
|
-
const throttledFn = throttle((value) => {
|
|
206
|
-
console.log(value);
|
|
207
|
-
}, 1000);
|
|
375
|
+
// 包裹整个应用
|
|
376
|
+
function App() {
|
|
377
|
+
return (
|
|
378
|
+
<ErrorBoundary onError={(error, errorInfo) => {
|
|
379
|
+
// 上报错误到监控系统
|
|
380
|
+
reportError(error, errorInfo);
|
|
381
|
+
}}>
|
|
382
|
+
<Router>
|
|
383
|
+
<Routes>
|
|
384
|
+
{/* 你的路由 */}
|
|
385
|
+
</Routes>
|
|
386
|
+
</Router>
|
|
387
|
+
</ErrorBoundary>
|
|
388
|
+
);
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
// 包裹特定组件
|
|
392
|
+
function Page() {
|
|
393
|
+
return (
|
|
394
|
+
<ErrorBoundary>
|
|
395
|
+
<UnstableComponent />
|
|
396
|
+
</ErrorBoundary>
|
|
397
|
+
);
|
|
398
|
+
}
|
|
208
399
|
```
|
|
209
400
|
|
|
210
401
|
## 🎨 样式定制
|
|
211
402
|
|
|
212
|
-
组件库使用CSS Modules,支持样式定制:
|
|
403
|
+
组件库使用Less和CSS Modules,支持样式定制:
|
|
404
|
+
|
|
405
|
+
### Cron组件样式
|
|
213
406
|
|
|
214
407
|
```css
|
|
215
408
|
/* 自定义Cron组件样式 */
|
|
216
409
|
.cronCom {
|
|
217
410
|
/* 你的自定义样式 */
|
|
218
411
|
}
|
|
412
|
+
|
|
413
|
+
.cronPreview {
|
|
414
|
+
/* 预览区域样式 */
|
|
415
|
+
}
|
|
416
|
+
```
|
|
417
|
+
|
|
418
|
+
### BaseModal样式
|
|
419
|
+
|
|
420
|
+
组件会自动添加 `base-modal` 类名到 `wrapClassName`,可以通过该类名自定义样式:
|
|
421
|
+
|
|
422
|
+
```css
|
|
423
|
+
.base-modal {
|
|
424
|
+
/* 自定义Modal外层容器样式 */
|
|
425
|
+
}
|
|
426
|
+
```
|
|
427
|
+
|
|
428
|
+
### CustomDrawer样式
|
|
429
|
+
|
|
430
|
+
组件会自动添加 `custom-footer` 类名到底部操作栏,可以通过该类名自定义样式:
|
|
431
|
+
|
|
432
|
+
```css
|
|
433
|
+
.custom-footer {
|
|
434
|
+
/* 自定义底部操作栏样式 */
|
|
435
|
+
}
|
|
219
436
|
```
|
|
220
437
|
|
|
221
438
|
## 📋 依赖要求
|
|
222
439
|
|
|
223
|
-
- React >=
|
|
224
|
-
- React-DOM >=
|
|
225
|
-
- Antd >= 5.
|
|
440
|
+
- React >= 19.1.1
|
|
441
|
+
- React-DOM >= 19.1.1
|
|
442
|
+
- Antd >= 5.27.3
|
|
443
|
+
- cron-validator >= 1.4.0 (用于Cron表达式验证)
|
|
226
444
|
|
|
227
445
|
## 🔧 开发
|
|
228
446
|
|
|
@@ -245,15 +463,18 @@ npm run dev
|
|
|
245
463
|
# 构建生产版本
|
|
246
464
|
npm run build
|
|
247
465
|
|
|
248
|
-
#
|
|
249
|
-
npm run
|
|
466
|
+
# 清理构建产物
|
|
467
|
+
npm run clean
|
|
250
468
|
```
|
|
251
469
|
|
|
252
470
|
### 发布
|
|
253
471
|
|
|
254
472
|
```bash
|
|
255
|
-
# 发布到npm
|
|
256
|
-
npm run publish
|
|
473
|
+
# 发布到npm(生产环境)
|
|
474
|
+
npm run publish
|
|
475
|
+
|
|
476
|
+
# 发布到npm(开发环境)
|
|
477
|
+
npm run publish:dev
|
|
257
478
|
```
|
|
258
479
|
|
|
259
480
|
## 📄 许可证
|
|
@@ -268,10 +489,10 @@ MIT License
|
|
|
268
489
|
|
|
269
490
|
如有问题,请通过以下方式联系:
|
|
270
491
|
|
|
271
|
-
- 提交Issue: [
|
|
272
|
-
-
|
|
492
|
+
- 提交Issue: [Codeup Issues](https://codeup.aliyun.com/61762c5110204867ecfd5ca4/cmdb/star-allinone/issues)
|
|
493
|
+
- 项目地址: [Codeup Repository](https://codeup.aliyun.com/61762c5110204867ecfd5ca4/cmdb/star-allinone)
|
|
273
494
|
|
|
274
495
|
---
|
|
275
496
|
|
|
276
|
-
Made with ❤️ by
|
|
497
|
+
Made with ❤️ by 星系运维团队
|
|
277
498
|
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./index.less";
|
|
3
3
|
interface IBaseModal {
|
|
4
|
-
title?: string | ReactNode;
|
|
4
|
+
title?: string | React.ReactNode;
|
|
5
5
|
visible?: boolean;
|
|
6
6
|
onOk?: () => void;
|
|
7
7
|
onCancel?: () => void;
|
|
8
|
-
children: ReactNode;
|
|
8
|
+
children: React.ReactNode;
|
|
9
9
|
width?: number;
|
|
10
10
|
afterClose?: () => void;
|
|
11
11
|
okText?: string;
|
|
12
12
|
cancelText?: string;
|
|
13
13
|
confirmLoading?: boolean;
|
|
14
|
-
footer?: ReactNode | null;
|
|
14
|
+
footer?: React.ReactNode | null;
|
|
15
15
|
wrapClassName?: string;
|
|
16
16
|
className?: string;
|
|
17
17
|
keyboard?: boolean;
|
|
@@ -20,8 +20,8 @@ interface IBaseModal {
|
|
|
20
20
|
getContainer?: () => HTMLElement;
|
|
21
21
|
closable?: boolean;
|
|
22
22
|
destroyOnClose?: boolean;
|
|
23
|
-
closeIcon?: ReactNode;
|
|
23
|
+
closeIcon?: React.ReactNode;
|
|
24
24
|
}
|
|
25
|
-
declare const _default:
|
|
25
|
+
declare const _default: React.NamedExoticComponent<IBaseModal>;
|
|
26
26
|
export default _default;
|
|
27
27
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/BaseModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/BaseModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,WAAW,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;;AAmDD,wBAAqC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Cron/index.tsx"],"names":[],"mappings":";oBAsCuC,MAAM;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Cron/index.tsx"],"names":[],"mappings":";oBAsCuC,MAAM;;AAkxB7C,wBAAgC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./index.less";
|
|
2
3
|
interface CustomDrawerProps {
|
|
3
4
|
title: string;
|
|
4
5
|
open: boolean;
|
|
@@ -11,6 +12,7 @@ interface CustomDrawerProps {
|
|
|
11
12
|
okText?: string;
|
|
12
13
|
className?: string;
|
|
13
14
|
footer?: React.ReactNode;
|
|
15
|
+
extra?: React.ReactNode;
|
|
14
16
|
}
|
|
15
17
|
declare const CustomDrawer: React.FC<CustomDrawerProps>;
|
|
16
18
|
export default CustomDrawer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/CustomDrawer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/CustomDrawer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAEtB,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyC7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
interface ErrorBoundaryProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
onError?: (error: Error, errorInfo: any) => void;
|
|
5
|
+
}
|
|
6
|
+
export default function ErrorBoundary({ children, onError, }: ErrorBoundaryProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ErrorBoundary/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AACpE,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;CAClD;AAQD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,EACR,OAAO,GACR,EAAE,kBAAkB,2CAgFpB"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { default as Cron } from './components/Cron';
|
|
2
2
|
export { default as HocModal } from './components/HocModal';
|
|
3
3
|
export { default as CustomDrawer } from './components/CustomDrawer';
|
|
4
|
-
export { default as
|
|
4
|
+
export { default as ErrorBoundary } from './components/ErrorBoundary';
|
|
5
|
+
export { default as BaseModal } from './components/BaseModal';
|
|
5
6
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
|