@pointcloud/pcloud-components 0.1.26 → 0.1.27
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 +337 -337
- package/dist/esm/ContextMenu/index.less +1 -13
- package/dist/umd/pcloud-components.min.css +1 -1
- package/package.json +108 -107
package/README.md
CHANGED
|
@@ -1,337 +1,337 @@
|
|
|
1
|
-
# pcloud-components
|
|
2
|
-
|
|
3
|
-
>)  ?style=flat&logo=antdesign>)  ?style=flat&logo=webcomponentsdotorg>) ?style=flat>)
|
|
4
|
-
|
|
5
|
-
pcloud-components 是一套基于 Antd v4.24.16+ React v17 开发的业务组件库。
|
|
6
|
-
该项目已经发布到 Npm 仓库，可以直接使用, 点击[pcloud-components 地址](https://www.npmjs.com/package/@pointcloud/pcloud-components)访问。
|
|
7
|
-
|
|
8
|
-
## 项目初始化
|
|
9
|
-
|
|
10
|
-
```
|
|
11
|
-
// 拉取项目代码
|
|
12
|
-
示例:
|
|
13
|
-
git clone ssh://git@192.168.101.96:8092/pointcloud_frontend/basiclibrary/pcloud-components.git
|
|
14
|
-
|
|
15
|
-
// 安装依赖
|
|
16
|
-
cd pcloud-components
|
|
17
|
-
|
|
18
|
-
npm install
|
|
19
|
-
or
|
|
20
|
-
pnpm install
|
|
21
|
-
or
|
|
22
|
-
yarn install
|
|
23
|
-
|
|
24
|
-
// 启动项目
|
|
25
|
-
npm start or npm run dev
|
|
26
|
-
pnpm start or pnpm dev
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## 推荐环境
|
|
30
|
-
|
|
31
|
-
```
|
|
32
|
-
node >= 16.20.0
|
|
33
|
-
pnpm >= 8.15.9
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
## 项目结构
|
|
37
|
-
|
|
38
|
-
```
|
|
39
|
-
📁pcloud-components
|
|
40
|
-
├─ 📁.dumi # api站点相关目录，例如全局样式、全局脚本、站点主题、自定义组件等
|
|
41
|
-
│ ├─ 📁tmp # dumi运行时目录
|
|
42
|
-
│ └─ 📄global.less # 全局样式
|
|
43
|
-
├─ 📁.husky # 代码提交相关配置
|
|
44
|
-
├─ 📁docker # docker部署相关文件
|
|
45
|
-
│ └─ 📄nginx.conf # nginx配置
|
|
46
|
-
├─ 📁scripts # 全局脚本目录
|
|
47
|
-
│ ├─ 📄clean-tmp.js # 清除.dumi目录下自动生成的tmp目录
|
|
48
|
-
│ └─ 📄source-replace-loader.js # 用于解决第三方主题antd版本冲突的webpack loader
|
|
49
|
-
├─ 📁docs # 文档目录，适用于普通文档生成路由，详见dumi官方介绍
|
|
50
|
-
│ ├─ 📁components # 组件库页面的文档
|
|
51
|
-
│ ├─ 📄guide.zh-CN.md # 指南页面的文档
|
|
52
|
-
│ └─ 📄index.zh-CN.md # 首页页面的文档
|
|
53
|
-
├─ 📁public # 站点的静态资源目录
|
|
54
|
-
├─ 📁src # 组件目录
|
|
55
|
-
│ ├─ 📁DCascader # 组件1
|
|
56
|
-
│ ├─ 📁DForm # 组件2
|
|
57
|
-
│ ...... # 组件n
|
|
58
|
-
│ └─ 📄index.ts # 组件导出配置
|
|
59
|
-
├─ 📄.dumirc.ts # dumi 的配置文件
|
|
60
|
-
├─ 📄.fatherrc.ts # father 的配置文件，用于组件库打包
|
|
61
|
-
├─ 📄.eslintrc.js # eslint插件配置
|
|
62
|
-
├─ 📄.release-it.js # release-it配置
|
|
63
|
-
├─ 📄.prettierrc.js # prettier插件配置
|
|
64
|
-
├─ 📄.stylelintrc # stylelint插件配置
|
|
65
|
-
└─ 📄tsconfig.json # ts相关配置
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
## 组件开发指南
|
|
69
|
-
|
|
70
|
-
##### 组件的基本结构
|
|
71
|
-
|
|
72
|
-
```
|
|
73
|
-
📁src # 组件目录
|
|
74
|
-
├─ 📁DCascader # 组件根目录
|
|
75
|
-
│ ├─ 📄index.less # 组件样式文件
|
|
76
|
-
│ ├─ 📄index.tsx # 组件入口文件
|
|
77
|
-
│ ├─ 📄index.zh-CN.md # 组件文档
|
|
78
|
-
│ └─ 📁demos # 组件示例目录
|
|
79
|
-
│ ├─ 📄basicDemo.tsx
|
|
80
|
-
│ ├─ 📄loadChildrenDemo.tsx
|
|
81
|
-
│ └─ 📄loadingDemo.tsx
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
一个组件的基本结构如上图所示，为保持组件风格一致，开发时应当尽量遵循以下规则:
|
|
85
|
-
|
|
86
|
-
- 组件根目录以驼峰命名
|
|
87
|
-
- 编写组件时应尽可能提供相应的 ts 类型定义
|
|
88
|
-
- 组件样式如果较为复杂，应当进行合理拆分，并添加一个 styles 目录对其进行统一管理
|
|
89
|
-
- 组件样式请尽量不要使用`模块化`引入方式，否则使用者很难进行样式覆盖
|
|
90
|
-
- 组件示例应当统一放置在 demos 目录下，示例中尽量不要存放体积过大的静态文件，如果有，应当在 public/mock 目录下新建相应的文件进行存放
|
|
91
|
-
|
|
92
|
-
##### 组件的编写
|
|
93
|
-
|
|
94
|
-
```
|
|
95
|
-
import React from 'react';
|
|
96
|
-
import { Cascader } from 'antd';
|
|
97
|
-
|
|
98
|
-
import './index.less'; // 引入样式
|
|
99
|
-
// import styles from './index.modules.less'; // 不推荐的形式，会导致使用者难以覆盖样式
|
|
100
|
-
|
|
101
|
-
export type DCascaderProps = any // ts类型定义
|
|
102
|
-
|
|
103
|
-
// 组件主体结构
|
|
104
|
-
function InternalCascader(props: DCascaderProps, ref: React.Ref<CascaderRef>) {
|
|
105
|
-
return <div>DCascader组件</div>
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// 组件导出
|
|
109
|
-
const DCascader = forwardRef(InternalCascader);
|
|
110
|
-
export default DCascader;
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
##### 组件的导出
|
|
114
|
-
|
|
115
|
-
所有组件都需要在 src/index.tsx 下进行导出，导出时应当导出组件必要的入口文件及相关的 ts 类型定义
|
|
116
|
-
|
|
117
|
-
```javascriptj
|
|
118
|
-
export type { DCascaderProps } from './DCascader';
|
|
119
|
-
export { default as DCascader } from './DCascader';
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
##### 组件示例的编写
|
|
123
|
-
|
|
124
|
-
```javascripta
|
|
125
|
-
import { useEffect, useState } from 'react';
|
|
126
|
-
// 使用当前组件库的别名路径而不是相对路径
|
|
127
|
-
import { DCascader } from '@pointcloud/pcloud-components'; // 正确示例
|
|
128
|
-
// import DCascader from '../index'; // 错误示例
|
|
129
|
-
const getRegionData = () => {
|
|
130
|
-
return new Promise<{ provinceList: any[]; cityList: any[]; countyList: any[] }>((resolve) => {
|
|
131
|
-
async function exec() {
|
|
132
|
-
// 体积较大的静态资源文件从public/mock下引入
|
|
133
|
-
const bodyProvince = await fetch('/mock/dcascader/china_region_province.json');
|
|
134
|
-
const provinceList = await bodyProvince.json();
|
|
135
|
-
const bodyCity = await fetch('/mock/dcascader/china_region_city.json');
|
|
136
|
-
const cityList = await bodyCity.json();
|
|
137
|
-
const bodyCounty = await fetch('/mock/dcascader/china_region_county.json');
|
|
138
|
-
const countyList = await bodyCounty.json();
|
|
139
|
-
resolve({ provinceList, cityList, countyList });
|
|
140
|
-
}
|
|
141
|
-
exec();
|
|
142
|
-
});
|
|
143
|
-
};
|
|
144
|
-
|
|
145
|
-
export default function BasicDemo() {
|
|
146
|
-
const [regionData, setRegionData] = useState<{
|
|
147
|
-
provinceList: any[];
|
|
148
|
-
cityList: any[];
|
|
149
|
-
countyList: any[];
|
|
150
|
-
}>({ provinceList: [], cityList: [], countyList: [] });
|
|
151
|
-
|
|
152
|
-
const getOptionsAsync = (value, option): Promise<Array<{ value: string; label: string }>> => {
|
|
153
|
-
return new Promise((resolve) => {
|
|
154
|
-
const { provinceList, cityList, countyList } = regionData;
|
|
155
|
-
let options;
|
|
156
|
-
if (option) {
|
|
157
|
-
const listMap = { province: cityList, city: countyList };
|
|
158
|
-
const codeMap = { province: 'provinceCode', city: 'cityCode' };
|
|
159
|
-
const { level, code } = option;
|
|
160
|
-
const list = listMap[level]?.filter((item) => item[codeMap[level]] === code);
|
|
161
|
-
options = list?.map((item) => ({
|
|
162
|
-
...item,
|
|
163
|
-
value: item.code,
|
|
164
|
-
label: item.name,
|
|
165
|
-
isLeaf: item.level === 'county',
|
|
166
|
-
}));
|
|
167
|
-
} else {
|
|
168
|
-
options = provinceList.map((item) => ({
|
|
169
|
-
...item,
|
|
170
|
-
label: item.name,
|
|
171
|
-
value: item.code,
|
|
172
|
-
isLeaf: false,
|
|
173
|
-
}));
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
resolve(options);
|
|
177
|
-
});
|
|
178
|
-
};
|
|
179
|
-
|
|
180
|
-
const onChange = (values, options) => {
|
|
181
|
-
console.log(values, options);
|
|
182
|
-
};
|
|
183
|
-
|
|
184
|
-
useEffect(() => {
|
|
185
|
-
getRegionData().then((res) => setRegionData(res));
|
|
186
|
-
}, []);
|
|
187
|
-
|
|
188
|
-
return <DCascader options={getOptionsAsync} showSearch onChange={onChange} />;
|
|
189
|
-
}
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
##### 组件文档的编写
|
|
193
|
-
|
|
194
|
-
组件文档使用 markdown 格式编写， 所有 Markdown 配置均以 FrontMatter 的形式配置在 Markdown 文件顶端，具体用法请参照 dumi 官方介绍， 对于开发的组件，应至少包含以下结构：
|
|
195
|
-
|
|
196
|
-
- 组件介绍（一个二级标题,包含组件的基本说明）
|
|
197
|
-
- 组件示例（若干二级标题，每个标题代表一个示例）
|
|
198
|
-
- API 文档（一个二级标题，命名为 API，以表格形式列出所有可用的 api）
|
|
199
|
-
|
|
200
|
-
```
|
|
201
|
-
---
|
|
202
|
-
title: DCascader
|
|
203
|
-
description: 基于 antd 4.24.10 Cascader 的二次封装组件
|
|
204
|
-
tocDepth: 2
|
|
205
|
-
nav:
|
|
206
|
-
title: 组件
|
|
207
|
-
path: /components
|
|
208
|
-
group:
|
|
209
|
-
title: 表单
|
|
210
|
-
---
|
|
211
|
-
|
|
212
|
-
## 组件特性
|
|
213
|
-
|
|
214
|
-
- options、loadData 均支持传入异步函数，在 From 表单组件中使用更方便
|
|
215
|
-
- 加载选项列表时可以显示加载中效果
|
|
216
|
-
- 本地搜索时默认匹配 label 字段
|
|
217
|
-
- 文本框与下拉面板同宽
|
|
218
|
-
|
|
219
|
-
## 基础用法
|
|
220
|
-
|
|
221
|
-
<code src="./demos/basicDemo.tsx" title="示例标题" description="示例说明"></code>
|
|
222
|
-
|
|
223
|
-
## 动态加载子级列表
|
|
224
|
-
|
|
225
|
-
<code src="./demos/loadChildrenDemo.tsx" title="示例标题" description="示例说明"></code>
|
|
226
|
-
|
|
227
|
-
## 显示加载中
|
|
228
|
-
|
|
229
|
-
<code src="./demos/loadingDemo.tsx" title="示例标题" description="示例说明"></code>
|
|
230
|
-
|
|
231
|
-
## API
|
|
232
|
-
|
|
233
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
234
|
-
| :-- | :-- | :-- | :---- | :--- |
|
|
235
|
-
| api1 | api1说明 | api1类型 | api1默认值 | api1版本 |
|
|
236
|
-
| api2 | api2说明 | api2类型 | api2默认值 | api2版本 |
|
|
237
|
-
| api3 | api3说明 | api3类型 | api3默认值 | api3版本 |
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
## 代码风格及提交规范
|
|
241
|
-
|
|
242
|
-
##### vscode 插件
|
|
243
|
-
|
|
244
|
-
为保证团队风格的一致，推荐在编辑器中安装以下插件，项目中已包含相应插件的配置，如无必要，请勿修改配置
|
|
245
|
-
|
|
246
|
-
| 插件名称 | 插件说明 |
|
|
247
|
-
| --------- | ---------------- |
|
|
248
|
-
| ESLint | js 代码检查工具 |
|
|
249
|
-
| Stylelint | css 样式检查工具 |
|
|
250
|
-
| Prettier | 代码格式化工具 |
|
|
251
|
-
| GitLens | 代码提交插件 |
|
|
252
|
-
|
|
253
|
-
##### 代码检查与格式化
|
|
254
|
-
|
|
255
|
-
由于项目已经包含 husky，每次提交前都会自动进行 lint 检查及代码格式化，如果检查不通过则会拒绝提交。代码提交时应当确保已经消除了所有 lint 错误，并尽量处理 lint 警告。lint 检查也可以手动执行，命令如下：
|
|
256
|
-
|
|
257
|
-
```
|
|
258
|
-
npm run lint // 同时检查js与css
|
|
259
|
-
|
|
260
|
-
npm run lint:es // 只检查js
|
|
261
|
-
|
|
262
|
-
npm run lint:css // 只检查css
|
|
263
|
-
|
|
264
|
-
npm run prettier // 执行代码格式化
|
|
265
|
-
|
|
266
|
-
npm run doctor // 执行依赖检查
|
|
267
|
-
|
|
268
|
-
```
|
|
269
|
-
|
|
270
|
-
##### git 提交
|
|
271
|
-
|
|
272
|
-
本项目使用 husky 方案来规范 代码的提交,提交代码时请尽量遵循以下约定
|
|
273
|
-
|
|
274
|
-
| 提交类型 | 类型说明 |
|
|
275
|
-
| -------- | ---------------------------------------------------------------------------- |
|
|
276
|
-
| feat | 新增功能 |
|
|
277
|
-
| fix | bug 修复 |
|
|
278
|
-
| docs | 文档更新 |
|
|
279
|
-
| style | 不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等) |
|
|
280
|
-
| refactor | 重构代码(既没有新增功能，也没有修复 bug) |
|
|
281
|
-
| perf | 性能优化 |
|
|
282
|
-
| test | 新增测试用例或是更新现有测试 |
|
|
283
|
-
| build | 主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交 |
|
|
284
|
-
| ci | 主要目的是修改项目集成流程(例如 Travis，Jenkins，GitLab CI，Circle 等)的提交 |
|
|
285
|
-
| chore | 不属于以上类型的其他类型(日常事务) |
|
|
286
|
-
| revert | 回滚某个更早之前的提交 |
|
|
287
|
-
|
|
288
|
-
```
|
|
289
|
-
git commit -m <type>[optional scope]: <description> // 提交格式
|
|
290
|
-
|
|
291
|
-
git commit -m "fix: 修复bug" // type后的冒号和空格不可省略，description不能以大写字母开头
|
|
292
|
-
```
|
|
293
|
-
|
|
294
|
-
详细规则请前往[commitlint](https://github.com/conventional-changelog/commitlint/blob/master/docs/reference-rules.md)官方文档查看
|
|
295
|
-
|
|
296
|
-
## 调试与发布
|
|
297
|
-
|
|
298
|
-
##### 在测试项目中调试
|
|
299
|
-
|
|
300
|
-
1. 在当前项目中通过 link 命令将当前包链接到全局
|
|
301
|
-
|
|
302
|
-
```
|
|
303
|
-
cd pui-components
|
|
304
|
-
npm link // 将当前包链接到全局
|
|
305
|
-
// npm unlink // 调试完成后解除链接
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
2. 在测试项目中链接当前包
|
|
309
|
-
|
|
310
|
-
```
|
|
311
|
-
cd test-project
|
|
312
|
-
npm link @pointcloud/pcloud-components
|
|
313
|
-
// npm unlink --no-save package && npm install // 调试完成后解除链接
|
|
314
|
-
```
|
|
315
|
-
|
|
316
|
-
3. docker 推送镜像
|
|
317
|
-
|
|
318
|
-
```
|
|
319
|
-
// 推送镜像之前需要先登录,并修改package.json-->scripts中对应docker的配置
|
|
320
|
-
npm run push
|
|
321
|
-
```
|
|
322
|
-
|
|
323
|
-
##### 发布项目
|
|
324
|
-
|
|
325
|
-
1. 前置工作
|
|
326
|
-
|
|
327
|
-
- 执行 `npm whoami` 查看当前用户是否已经登录，如果未登录则执行 `npm login`
|
|
328
|
-
|
|
329
|
-
- 检查 `package.json` 中的 NPM 包名及 `publishConfig` 是否符合预期
|
|
330
|
-
|
|
331
|
-
2. release 发布
|
|
332
|
-
|
|
333
|
-
使用 release-it 可以根据 [release-it 配置](https://github.com/release-it/release-it/blob/main/config/release-it.json) 自动完成发布前的准备工作，包括：更新版本号、生成 tag 、更新 changelog、git 提交及推送远程仓库、npm 发布等
|
|
334
|
-
|
|
335
|
-
```
|
|
336
|
-
npm run release
|
|
337
|
-
```
|
|
1
|
+
# pcloud-components
|
|
2
|
+
|
|
3
|
+
>)  ?style=flat&logo=antdesign>)  ?style=flat&logo=webcomponentsdotorg>) ?style=flat>)
|
|
4
|
+
|
|
5
|
+
pcloud-components 是一套基于 Antd v4.24.16+ React v17 开发的业务组件库。
|
|
6
|
+
该项目已经发布到 Npm 仓库，可以直接使用, 点击[pcloud-components 地址](https://www.npmjs.com/package/@pointcloud/pcloud-components)访问。
|
|
7
|
+
|
|
8
|
+
## 项目初始化
|
|
9
|
+
|
|
10
|
+
```
|
|
11
|
+
// 拉取项目代码
|
|
12
|
+
示例:
|
|
13
|
+
git clone ssh://git@192.168.101.96:8092/pointcloud_frontend/basiclibrary/pcloud-components.git
|
|
14
|
+
|
|
15
|
+
// 安装依赖
|
|
16
|
+
cd pcloud-components
|
|
17
|
+
|
|
18
|
+
npm install
|
|
19
|
+
or
|
|
20
|
+
pnpm install
|
|
21
|
+
or
|
|
22
|
+
yarn install
|
|
23
|
+
|
|
24
|
+
// 启动项目
|
|
25
|
+
npm start or npm run dev
|
|
26
|
+
pnpm start or pnpm dev
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## 推荐环境
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
node >= 16.20.0
|
|
33
|
+
pnpm >= 8.15.9
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## 项目结构
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
📁pcloud-components
|
|
40
|
+
├─ 📁.dumi # api站点相关目录，例如全局样式、全局脚本、站点主题、自定义组件等
|
|
41
|
+
│ ├─ 📁tmp # dumi运行时目录
|
|
42
|
+
│ └─ 📄global.less # 全局样式
|
|
43
|
+
├─ 📁.husky # 代码提交相关配置
|
|
44
|
+
├─ 📁docker # docker部署相关文件
|
|
45
|
+
│ └─ 📄nginx.conf # nginx配置
|
|
46
|
+
├─ 📁scripts # 全局脚本目录
|
|
47
|
+
│ ├─ 📄clean-tmp.js # 清除.dumi目录下自动生成的tmp目录
|
|
48
|
+
│ └─ 📄source-replace-loader.js # 用于解决第三方主题antd版本冲突的webpack loader
|
|
49
|
+
├─ 📁docs # 文档目录，适用于普通文档生成路由，详见dumi官方介绍
|
|
50
|
+
│ ├─ 📁components # 组件库页面的文档
|
|
51
|
+
│ ├─ 📄guide.zh-CN.md # 指南页面的文档
|
|
52
|
+
│ └─ 📄index.zh-CN.md # 首页页面的文档
|
|
53
|
+
├─ 📁public # 站点的静态资源目录
|
|
54
|
+
├─ 📁src # 组件目录
|
|
55
|
+
│ ├─ 📁DCascader # 组件1
|
|
56
|
+
│ ├─ 📁DForm # 组件2
|
|
57
|
+
│ ...... # 组件n
|
|
58
|
+
│ └─ 📄index.ts # 组件导出配置
|
|
59
|
+
├─ 📄.dumirc.ts # dumi 的配置文件
|
|
60
|
+
├─ 📄.fatherrc.ts # father 的配置文件，用于组件库打包
|
|
61
|
+
├─ 📄.eslintrc.js # eslint插件配置
|
|
62
|
+
├─ 📄.release-it.js # release-it配置
|
|
63
|
+
├─ 📄.prettierrc.js # prettier插件配置
|
|
64
|
+
├─ 📄.stylelintrc # stylelint插件配置
|
|
65
|
+
└─ 📄tsconfig.json # ts相关配置
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## 组件开发指南
|
|
69
|
+
|
|
70
|
+
##### 组件的基本结构
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
📁src # 组件目录
|
|
74
|
+
├─ 📁DCascader # 组件根目录
|
|
75
|
+
│ ├─ 📄index.less # 组件样式文件
|
|
76
|
+
│ ├─ 📄index.tsx # 组件入口文件
|
|
77
|
+
│ ├─ 📄index.zh-CN.md # 组件文档
|
|
78
|
+
│ └─ 📁demos # 组件示例目录
|
|
79
|
+
│ ├─ 📄basicDemo.tsx
|
|
80
|
+
│ ├─ 📄loadChildrenDemo.tsx
|
|
81
|
+
│ └─ 📄loadingDemo.tsx
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
一个组件的基本结构如上图所示，为保持组件风格一致，开发时应当尽量遵循以下规则:
|
|
85
|
+
|
|
86
|
+
- 组件根目录以驼峰命名
|
|
87
|
+
- 编写组件时应尽可能提供相应的 ts 类型定义
|
|
88
|
+
- 组件样式如果较为复杂，应当进行合理拆分，并添加一个 styles 目录对其进行统一管理
|
|
89
|
+
- 组件样式请尽量不要使用`模块化`引入方式，否则使用者很难进行样式覆盖
|
|
90
|
+
- 组件示例应当统一放置在 demos 目录下，示例中尽量不要存放体积过大的静态文件，如果有，应当在 public/mock 目录下新建相应的文件进行存放
|
|
91
|
+
|
|
92
|
+
##### 组件的编写
|
|
93
|
+
|
|
94
|
+
```
|
|
95
|
+
import React from 'react';
|
|
96
|
+
import { Cascader } from 'antd';
|
|
97
|
+
|
|
98
|
+
import './index.less'; // 引入样式
|
|
99
|
+
// import styles from './index.modules.less'; // 不推荐的形式，会导致使用者难以覆盖样式
|
|
100
|
+
|
|
101
|
+
export type DCascaderProps = any // ts类型定义
|
|
102
|
+
|
|
103
|
+
// 组件主体结构
|
|
104
|
+
function InternalCascader(props: DCascaderProps, ref: React.Ref<CascaderRef>) {
|
|
105
|
+
return <div>DCascader组件</div>
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// 组件导出
|
|
109
|
+
const DCascader = forwardRef(InternalCascader);
|
|
110
|
+
export default DCascader;
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
##### 组件的导出
|
|
114
|
+
|
|
115
|
+
所有组件都需要在 src/index.tsx 下进行导出，导出时应当导出组件必要的入口文件及相关的 ts 类型定义
|
|
116
|
+
|
|
117
|
+
```javascriptj
|
|
118
|
+
export type { DCascaderProps } from './DCascader';
|
|
119
|
+
export { default as DCascader } from './DCascader';
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
##### 组件示例的编写
|
|
123
|
+
|
|
124
|
+
```javascripta
|
|
125
|
+
import { useEffect, useState } from 'react';
|
|
126
|
+
// 使用当前组件库的别名路径而不是相对路径
|
|
127
|
+
import { DCascader } from '@pointcloud/pcloud-components'; // 正确示例
|
|
128
|
+
// import DCascader from '../index'; // 错误示例
|
|
129
|
+
const getRegionData = () => {
|
|
130
|
+
return new Promise<{ provinceList: any[]; cityList: any[]; countyList: any[] }>((resolve) => {
|
|
131
|
+
async function exec() {
|
|
132
|
+
// 体积较大的静态资源文件从public/mock下引入
|
|
133
|
+
const bodyProvince = await fetch('/mock/dcascader/china_region_province.json');
|
|
134
|
+
const provinceList = await bodyProvince.json();
|
|
135
|
+
const bodyCity = await fetch('/mock/dcascader/china_region_city.json');
|
|
136
|
+
const cityList = await bodyCity.json();
|
|
137
|
+
const bodyCounty = await fetch('/mock/dcascader/china_region_county.json');
|
|
138
|
+
const countyList = await bodyCounty.json();
|
|
139
|
+
resolve({ provinceList, cityList, countyList });
|
|
140
|
+
}
|
|
141
|
+
exec();
|
|
142
|
+
});
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
export default function BasicDemo() {
|
|
146
|
+
const [regionData, setRegionData] = useState<{
|
|
147
|
+
provinceList: any[];
|
|
148
|
+
cityList: any[];
|
|
149
|
+
countyList: any[];
|
|
150
|
+
}>({ provinceList: [], cityList: [], countyList: [] });
|
|
151
|
+
|
|
152
|
+
const getOptionsAsync = (value, option): Promise<Array<{ value: string; label: string }>> => {
|
|
153
|
+
return new Promise((resolve) => {
|
|
154
|
+
const { provinceList, cityList, countyList } = regionData;
|
|
155
|
+
let options;
|
|
156
|
+
if (option) {
|
|
157
|
+
const listMap = { province: cityList, city: countyList };
|
|
158
|
+
const codeMap = { province: 'provinceCode', city: 'cityCode' };
|
|
159
|
+
const { level, code } = option;
|
|
160
|
+
const list = listMap[level]?.filter((item) => item[codeMap[level]] === code);
|
|
161
|
+
options = list?.map((item) => ({
|
|
162
|
+
...item,
|
|
163
|
+
value: item.code,
|
|
164
|
+
label: item.name,
|
|
165
|
+
isLeaf: item.level === 'county',
|
|
166
|
+
}));
|
|
167
|
+
} else {
|
|
168
|
+
options = provinceList.map((item) => ({
|
|
169
|
+
...item,
|
|
170
|
+
label: item.name,
|
|
171
|
+
value: item.code,
|
|
172
|
+
isLeaf: false,
|
|
173
|
+
}));
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
resolve(options);
|
|
177
|
+
});
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
const onChange = (values, options) => {
|
|
181
|
+
console.log(values, options);
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
useEffect(() => {
|
|
185
|
+
getRegionData().then((res) => setRegionData(res));
|
|
186
|
+
}, []);
|
|
187
|
+
|
|
188
|
+
return <DCascader options={getOptionsAsync} showSearch onChange={onChange} />;
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
##### 组件文档的编写
|
|
193
|
+
|
|
194
|
+
组件文档使用 markdown 格式编写， 所有 Markdown 配置均以 FrontMatter 的形式配置在 Markdown 文件顶端，具体用法请参照 dumi 官方介绍， 对于开发的组件，应至少包含以下结构：
|
|
195
|
+
|
|
196
|
+
- 组件介绍（一个二级标题,包含组件的基本说明）
|
|
197
|
+
- 组件示例（若干二级标题，每个标题代表一个示例）
|
|
198
|
+
- API 文档（一个二级标题，命名为 API，以表格形式列出所有可用的 api）
|
|
199
|
+
|
|
200
|
+
```
|
|
201
|
+
---
|
|
202
|
+
title: DCascader
|
|
203
|
+
description: 基于 antd 4.24.10 Cascader 的二次封装组件
|
|
204
|
+
tocDepth: 2
|
|
205
|
+
nav:
|
|
206
|
+
title: 组件
|
|
207
|
+
path: /components
|
|
208
|
+
group:
|
|
209
|
+
title: 表单
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
## 组件特性
|
|
213
|
+
|
|
214
|
+
- options、loadData 均支持传入异步函数，在 From 表单组件中使用更方便
|
|
215
|
+
- 加载选项列表时可以显示加载中效果
|
|
216
|
+
- 本地搜索时默认匹配 label 字段
|
|
217
|
+
- 文本框与下拉面板同宽
|
|
218
|
+
|
|
219
|
+
## 基础用法
|
|
220
|
+
|
|
221
|
+
<code src="./demos/basicDemo.tsx" title="示例标题" description="示例说明"></code>
|
|
222
|
+
|
|
223
|
+
## 动态加载子级列表
|
|
224
|
+
|
|
225
|
+
<code src="./demos/loadChildrenDemo.tsx" title="示例标题" description="示例说明"></code>
|
|
226
|
+
|
|
227
|
+
## 显示加载中
|
|
228
|
+
|
|
229
|
+
<code src="./demos/loadingDemo.tsx" title="示例标题" description="示例说明"></code>
|
|
230
|
+
|
|
231
|
+
## API
|
|
232
|
+
|
|
233
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
234
|
+
| :-- | :-- | :-- | :---- | :--- |
|
|
235
|
+
| api1 | api1说明 | api1类型 | api1默认值 | api1版本 |
|
|
236
|
+
| api2 | api2说明 | api2类型 | api2默认值 | api2版本 |
|
|
237
|
+
| api3 | api3说明 | api3类型 | api3默认值 | api3版本 |
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
## 代码风格及提交规范
|
|
241
|
+
|
|
242
|
+
##### vscode 插件
|
|
243
|
+
|
|
244
|
+
为保证团队风格的一致，推荐在编辑器中安装以下插件，项目中已包含相应插件的配置，如无必要，请勿修改配置
|
|
245
|
+
|
|
246
|
+
| 插件名称 | 插件说明 |
|
|
247
|
+
| --------- | ---------------- |
|
|
248
|
+
| ESLint | js 代码检查工具 |
|
|
249
|
+
| Stylelint | css 样式检查工具 |
|
|
250
|
+
| Prettier | 代码格式化工具 |
|
|
251
|
+
| GitLens | 代码提交插件 |
|
|
252
|
+
|
|
253
|
+
##### 代码检查与格式化
|
|
254
|
+
|
|
255
|
+
由于项目已经包含 husky，每次提交前都会自动进行 lint 检查及代码格式化，如果检查不通过则会拒绝提交。代码提交时应当确保已经消除了所有 lint 错误，并尽量处理 lint 警告。lint 检查也可以手动执行，命令如下：
|
|
256
|
+
|
|
257
|
+
```
|
|
258
|
+
npm run lint // 同时检查js与css
|
|
259
|
+
|
|
260
|
+
npm run lint:es // 只检查js
|
|
261
|
+
|
|
262
|
+
npm run lint:css // 只检查css
|
|
263
|
+
|
|
264
|
+
npm run prettier // 执行代码格式化
|
|
265
|
+
|
|
266
|
+
npm run doctor // 执行依赖检查
|
|
267
|
+
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
##### git 提交
|
|
271
|
+
|
|
272
|
+
本项目使用 husky 方案来规范 代码的提交,提交代码时请尽量遵循以下约定
|
|
273
|
+
|
|
274
|
+
| 提交类型 | 类型说明 |
|
|
275
|
+
| -------- | ---------------------------------------------------------------------------- |
|
|
276
|
+
| feat | 新增功能 |
|
|
277
|
+
| fix | bug 修复 |
|
|
278
|
+
| docs | 文档更新 |
|
|
279
|
+
| style | 不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等) |
|
|
280
|
+
| refactor | 重构代码(既没有新增功能，也没有修复 bug) |
|
|
281
|
+
| perf | 性能优化 |
|
|
282
|
+
| test | 新增测试用例或是更新现有测试 |
|
|
283
|
+
| build | 主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交 |
|
|
284
|
+
| ci | 主要目的是修改项目集成流程(例如 Travis，Jenkins，GitLab CI，Circle 等)的提交 |
|
|
285
|
+
| chore | 不属于以上类型的其他类型(日常事务) |
|
|
286
|
+
| revert | 回滚某个更早之前的提交 |
|
|
287
|
+
|
|
288
|
+
```
|
|
289
|
+
git commit -m <type>[optional scope]: <description> // 提交格式
|
|
290
|
+
|
|
291
|
+
git commit -m "fix: 修复bug" // type后的冒号和空格不可省略，description不能以大写字母开头
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
详细规则请前往[commitlint](https://github.com/conventional-changelog/commitlint/blob/master/docs/reference-rules.md)官方文档查看
|
|
295
|
+
|
|
296
|
+
## 调试与发布
|
|
297
|
+
|
|
298
|
+
##### 在测试项目中调试
|
|
299
|
+
|
|
300
|
+
1. 在当前项目中通过 link 命令将当前包链接到全局
|
|
301
|
+
|
|
302
|
+
```
|
|
303
|
+
cd pui-components
|
|
304
|
+
npm link // 将当前包链接到全局
|
|
305
|
+
// npm unlink // 调试完成后解除链接
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
2. 在测试项目中链接当前包
|
|
309
|
+
|
|
310
|
+
```
|
|
311
|
+
cd test-project
|
|
312
|
+
npm link @pointcloud/pcloud-components
|
|
313
|
+
// npm unlink --no-save package && npm install // 调试完成后解除链接
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
3. docker 推送镜像
|
|
317
|
+
|
|
318
|
+
```
|
|
319
|
+
// 推送镜像之前需要先登录,并修改package.json-->scripts中对应docker的配置
|
|
320
|
+
npm run push
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
##### 发布项目
|
|
324
|
+
|
|
325
|
+
1. 前置工作
|
|
326
|
+
|
|
327
|
+
- 执行 `npm whoami` 查看当前用户是否已经登录，如果未登录则执行 `npm login`
|
|
328
|
+
|
|
329
|
+
- 检查 `package.json` 中的 NPM 包名及 `publishConfig` 是否符合预期
|
|
330
|
+
|
|
331
|
+
2. release 发布
|
|
332
|
+
|
|
333
|
+
使用 release-it 可以根据 [release-it 配置](https://github.com/release-it/release-it/blob/main/config/release-it.json) 自动完成发布前的准备工作，包括：更新版本号、生成 tag 、更新 changelog、git 提交及推送远程仓库、npm 发布等
|
|
334
|
+
|
|
335
|
+
```
|
|
336
|
+
npm run release
|
|
337
|
+
```
|
|
@@ -5,18 +5,6 @@
|
|
|
5
5
|
@context-menu-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
6
6
|
@border-radius-base: 1px;
|
|
7
7
|
|
|
8
|
-
@keyframes contextmenu-show {
|
|
9
|
-
0% {
|
|
10
|
-
opacity: 0;
|
|
11
|
-
transform: scale(0.8);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
100% {
|
|
15
|
-
opacity: 1;
|
|
16
|
-
transform: scale(1);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
8
|
.@{prefix}-context-menu {
|
|
21
9
|
background: @context-menu-bg;
|
|
22
10
|
border-radius: @border-radius-base;
|
|
@@ -27,7 +15,7 @@
|
|
|
27
15
|
opacity: 0;
|
|
28
16
|
transform: scale(0.8);
|
|
29
17
|
transform-origin: top left;
|
|
30
|
-
animation:
|
|
18
|
+
animation: contextmenu-show 0.2s ease-out forwards;
|
|
31
19
|
|
|
32
20
|
&-item {
|
|
33
21
|
padding: 5px 12px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pui-label-value{display:inline-flex}.pui-label-value span:first-child{max-width:120px;padding-right:4px;white-space:nowrap}.pui-label-value span:last-child{flex:1 1}.pui-label-value span:last-child.no-wrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pui-search-filter{align-items:center;background-color:#fff;margin-top:10px;width:100%}.pui-search-filter span.ant-collapse-header-text{cursor:auto!important;display:inline-block;width:100%}.pui-search-filter .ant-collapse-content-box{padding:0}.pui-search-filter .search-header{display:flex;width:100%}.pui-search-filter .search-header .left{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:no-wrap}.pui-search-filter .search-header .left :global .ant-radio-wrapper:first-child{border-left:1px solid #d9d9d9;border-radius:5px 0 0 5px}.pui-search-filter .search-header .left :global .ant-radio-wrapper:last-child{border-radius:0 5px 5px 0}.pui-search-filter .search-header .left :global .ant-radio-wrapper{border:1px solid #d9d9d9;border-left-color:#fff;margin-right:0;padding:4px 6px}.pui-search-filter .search-header .left :global .ant-radio-wrapper .ant-radio{display:none}.pui-search-filter .search-header .left :global .ant-radio-wrapper:hover{color:#1890ff}.pui-search-filter .search-header .left :global .ant-radio-wrapper-checked{background:#fff;border:1px solid #1890ff;border-left:1px solid #1890ff!important;color:#1890ff;z-index:1}.pui-search-filter .search-header .right{display:flex;justify-content:center}.pui-search-filter .search-header .right .input{border-radius:4px;width:200px}.pui-search-filter .search-header .right .button{background-color:#ff7e00;border-radius:4px;color:#fff;margin-left:10px}.pui-search-filter .search-header .right .button:active,.pui-search-filter .search-header .right .button:focus,.pui-search-filter .search-header .right .button:hover{border-color:transparent}.pui-search-filter .search-header .right .button .icon{margin-left:8px;transition:transform .4s}.pui-search-filter .search-header .right .button .icon.down{transform:rotate(180deg)}.pui-search-filter .search-header .right .button .icon.up{transform:rotate(0deg)}.pui-search-filter .title{align-items:center;border-bottom:1px solid #f0f0f0;display:flex;font-weight:700;margin:0 10px;padding-bottom:10px}.pui-search-filter .title span.icon{background-color:#ff7e00;border-radius:2px;height:16px;margin-right:6px;width:4px}.pui-search-filter .search-content .filter-row{display:flex;flex-wrap:wrap;padding:10px;width:100%}.pui-search-filter .search-content .filter-col{height:30px;line-height:30px;margin-bottom:10px}.pui-search-filter .search-content .filter-col .ant-picker{width:100%}.pui-search-filter .search-content .search-btn{justify-content:center}.pui-search-filter .search-content .search-btn>button{margin:0 5px}.pui-error-boundary{align-items:center;background-color:#dd7f7f;border-radius:10px;display:flex;flex-direction:column;justify-content:center;margin:20px;padding:15px;width:auto}.pui-error-boundary .error-text{margin-top:20px}.pui-error-boundary .error-refresh{background-color:#4593ef;border-radius:5px;color:#fff;cursor:pointer;font-weight:700;height:40px;line-height:40px;text-align:center;width:140px}.pui-error-boundary .errorDetiles .detilesLink{color:blue}.pui-error-boundary .errorDetiles .errordetails{background-color:#ccc6be;border:1px solid #777;border-radius:5px;color:#777;font-size:80%;padding:10px}.pui-picture-card{display:inline-block;padding:10px;transition:box-shadow .3s linear}.pui-picture-card .info{margin-top:10px}.pui-picture-card-bordered{border:1px solid rgba(0,0,0,.06)}.pui-picture-card-hoverable:hover{border-color:transparent;box-shadow:0 1px 2px -2px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.12),0 5px 12px 4px rgba(0,0,0,.09);cursor:pointer}.pui-picture-card.horizontal{display:flex;justify-content:space-around}.pui-loading .mask{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:100000}.pui-loading .loading{background:#fff;border-radius:10px;box-shadow:3px 3px 3px rgba(0,0,0,.2);padding:20px;z-index:100001}.pui-loading .loading,.pui-nodata{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.pui-nodata .not-data-image{display:block;height:100px}.pui-nodata .no-data-text{color:#000;display:inline-block;font-size:14px;font-weight:400;margin-top:5px;opacity:.65;text-align:center;width:100%}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar{height:8px;width:8px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.5);border-radius:8px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-track{border-radius:2px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-corner{background-color:#f1f1f1}.pui-tree-select-dropdown .ant-select-tree-node-content-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pui-tree-select-dropdown .ant-select-tree-node-content-wrapper .ant-select-tree-title{overflow:hidden}.pui-upload .preview .ant-upload-list-item-actions a[target=_blank][rel="noopener noreferrer"]{opacity:1!important;pointer-events:auto!important}.pui-upload .ant-upload-list.ant-upload-list-picture-card .ant-upload-span .ant-upload-list-item-thumbnail{height:46px}.pui-upload .ant-upload-list.ant-upload-list-picture-card .ant-upload-span .ant-upload-list-item-name{display:inline;display:initial;position:absolute}.pui-table .ant-spin-container,.pui-table .ant-spin-nested-loading,.pui-table .ant-table,.pui-table .ant-table-container{height:100%;width:100%}.pui-table .ant-table-body{max-height:calc(100% - 56px);max-width:100%;min-height:calc(100% - 56px);min-width:100%;overflow-y:auto!important;position:absolute}.pui-table .ant-table-body .ant-table-tbody>tr>td.ant-table-cell.d-table-cell-wrap{white-space:normal}.pui-table .ant-table-body::-webkit-scrollbar{height:8px;width:4px}.pui-table .ant-table-body::-webkit-scrollbar-thumb{background-color:#0084ff}.pui-table .ant-table-body::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:2px}.pui-table .ant-table-body::-webkit-scrollbar-corner{background-color:#f1f1f1}.pui-table .ant-spin-nested-loading>div>.ant-spin{max-height:none}.pui-table .ant-pagination-total-text span{color:#40a9ff;font-weight:700}.pui-table.height-on-page .ant-table{height:calc(100% - 56px)}.pui-ip-address{border:1px solid #d9d9d9;border-radius:2px;display:inline-block;transition:all .3s}.pui-ip-address.small{height:24px}.pui-ip-address.large{padding:6.5px 10px}.pui-ip-address.middle{padding:4px 10px}.pui-ip-address.disabled{background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;color:rgba(0,0,0,.25);cursor:not-allowed;opacity:1}.pui-ip-address.disabled:hover{border-color:#d9d9d9}.pui-ip-address:hover{border-color:#4d90ff}.pui-ip-address:focus-within{border-color:#40a9ff;box-shadow:0 0 0 2px rgba(24,144,255,.2)}.pui-ip-address input{font-feature-settings:"tnum","tnum";background:none;border:none;box-sizing:border-box;color:#000000d9;display:inline-block;font-size:14px;font-variant:tabular-nums;line-height:1.5715;margin:0;outline:0;padding:0;position:relative;text-align:center}.pui-ip-address input[disabled]{color:inherit;cursor:not-allowed}.pui-ip-address input[type=number]{appearance:textfield}.pui-ip-address input[type=number]::-webkit-inner-spin-button,.pui-ip-address input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.pui-form .form-wrapper>.ant-form-item{margin-bottom:24px;margin-right:0;min-height:32px}.pui-form .ant-input-number,.pui-form .ant-picker{width:100%}.pui-form.ant-form-horizontal .form-wrapper>.ant-form-item:last-child,.pui-form.ant-form-vertical .form-wrapper>.ant-form-item:last-child{margin-bottom:0}.pui-form.ant-form-horizontal .ant-form-item-label{min-width:80px}.pui-form.ant-form-inline .form-wrapper,.pui-form.ant-form-inline.inlineVertical .form-wrapper{align-items:flex-end;display:flex;flex:1 1;flex-wrap:wrap;height:min-content}.pui-form.ant-form-inline .form-wrapper>.ant-form-item,.pui-form.ant-form-inline.inlineVertical .form-wrapper>.ant-form-item{padding-right:16px}.pui-form.ant-form-inline.inlineVertical .ant-form-item-row{flex-direction:column}.pui-form.ant-form-inline.inlineVertical .ant-form-item-row .ant-form-item-label{text-align:left}.pui-form.ant-form-inline.inlineVertical .grid-row{flex:1 1}.pui-modal-container .ant-modal-wrap .ant-modal{height:100%;max-width:none}.pui-modal-container .ant-modal-wrap .ant-modal .ant-modal-content{height:100%;width:100%}.pui-absolute-modal-container .ant-modal-wrap{position:fixed}.pui-relative-modal-container .ant-modal-wrap{position:absolute}.pui-color-picker .sketch-picker{box-shadow:none!important;padding:0!important}.trigger{border:5px solid #fff;border-radius:2px;box-shadow:0 0 2px #000;cursor:pointer;display:inline-block;height:26px;width:60px}.pui-infinite-scroll-wrapper .ant-list .ant-row{margin-right:0!important}.scroll-container{overflow-x:hidden;overflow-y:auto;position:relative}.scroll-container .backtop{right:50px}.scroll-container .up{background:#007aff;border-radius:3px;color:#fff;text-align:center}.toolbar{background-color:rgba(0,0,0,.5);color:#fff;justify-content:center}.toolbar,.toolbar button{align-items:center;display:flex}.toolbar button{background-color:transparent;border-width:0;cursor:pointer}.toolbar button:hover{background-color:#0074d9}.toolbar .icon>path{fill:#fff}.pui-signature-pad{align-items:center;display:flex;flex-direction:column;justify-content:center;position:relative}.pui-signature-pad-canvas{border:1px solid #d9d9d9;border-radius:4px}.pui-signature-pad-toolbar{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;text-align:center}.pui-signature-pad-button{background-color:#fff;border:1px solid #1677ff;border-radius:4px;color:#1677ff;cursor:pointer;height:32px;min-width:64px;padding:4px 16px;transition:all .3s}.pui-signature-pad-button:hover{background-color:#f0f5ff}.pui-signature-pad-button:last-child{background-color:#1677ff;color:#fff}.pui-signature-pad-button:last-child:hover{background-color:#4096ff}.pui-context-menu{animation:contextMenuShow .2s ease-out forwards;background:#fff;border:1px solid #f0f0f0;border-radius:1px;box-shadow:0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05);min-width:120px;opacity:0;padding:4px 0;transform:scale(.8);transform-origin:top left}.pui-context-menu-item{align-items:center;color:rgba(0,0,0,.88);cursor:pointer;display:flex;gap:8px;padding:5px 12px;transition:all .3s;-ms-user-select:none;user-select:none}.pui-context-menu-item:hover{background:rgba(0,0,0,.04)}.pui-context-menu-item-disabled{color:rgba(0,0,0,.25);cursor:not-allowed}.pui-context-menu-item-disabled:hover{background:none}.pui-context-menu-item-divider{background:#f0f0f0;height:1px;margin:4px 0}@keyframes contextmenu-show{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
|
|
1
|
+
.pui-label-value{display:inline-flex}.pui-label-value span:first-child{max-width:120px;padding-right:4px;white-space:nowrap}.pui-label-value span:last-child{flex:1 1}.pui-label-value span:last-child.no-wrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pui-search-filter{align-items:center;background-color:#fff;margin-top:10px;width:100%}.pui-search-filter span.ant-collapse-header-text{cursor:auto!important;display:inline-block;width:100%}.pui-search-filter .ant-collapse-content-box{padding:0}.pui-search-filter .search-header{display:flex;width:100%}.pui-search-filter .search-header .left{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:no-wrap}.pui-search-filter .search-header .left :global .ant-radio-wrapper:first-child{border-left:1px solid #d9d9d9;border-radius:5px 0 0 5px}.pui-search-filter .search-header .left :global .ant-radio-wrapper:last-child{border-radius:0 5px 5px 0}.pui-search-filter .search-header .left :global .ant-radio-wrapper{border:1px solid #d9d9d9;border-left-color:#fff;margin-right:0;padding:4px 6px}.pui-search-filter .search-header .left :global .ant-radio-wrapper .ant-radio{display:none}.pui-search-filter .search-header .left :global .ant-radio-wrapper:hover{color:#1890ff}.pui-search-filter .search-header .left :global .ant-radio-wrapper-checked{background:#fff;border:1px solid #1890ff;border-left:1px solid #1890ff!important;color:#1890ff;z-index:1}.pui-search-filter .search-header .right{display:flex;justify-content:center}.pui-search-filter .search-header .right .input{border-radius:4px;width:200px}.pui-search-filter .search-header .right .button{background-color:#ff7e00;border-radius:4px;color:#fff;margin-left:10px}.pui-search-filter .search-header .right .button:active,.pui-search-filter .search-header .right .button:focus,.pui-search-filter .search-header .right .button:hover{border-color:transparent}.pui-search-filter .search-header .right .button .icon{margin-left:8px;transition:transform .4s}.pui-search-filter .search-header .right .button .icon.down{transform:rotate(180deg)}.pui-search-filter .search-header .right .button .icon.up{transform:rotate(0deg)}.pui-search-filter .title{align-items:center;border-bottom:1px solid #f0f0f0;display:flex;font-weight:700;margin:0 10px;padding-bottom:10px}.pui-search-filter .title span.icon{background-color:#ff7e00;border-radius:2px;height:16px;margin-right:6px;width:4px}.pui-search-filter .search-content .filter-row{display:flex;flex-wrap:wrap;padding:10px;width:100%}.pui-search-filter .search-content .filter-col{height:30px;line-height:30px;margin-bottom:10px}.pui-search-filter .search-content .filter-col .ant-picker{width:100%}.pui-search-filter .search-content .search-btn{justify-content:center}.pui-search-filter .search-content .search-btn>button{margin:0 5px}.pui-error-boundary{align-items:center;background-color:#dd7f7f;border-radius:10px;display:flex;flex-direction:column;justify-content:center;margin:20px;padding:15px;width:auto}.pui-error-boundary .error-text{margin-top:20px}.pui-error-boundary .error-refresh{background-color:#4593ef;border-radius:5px;color:#fff;cursor:pointer;font-weight:700;height:40px;line-height:40px;text-align:center;width:140px}.pui-error-boundary .errorDetiles .detilesLink{color:blue}.pui-error-boundary .errorDetiles .errordetails{background-color:#ccc6be;border:1px solid #777;border-radius:5px;color:#777;font-size:80%;padding:10px}.pui-picture-card{display:inline-block;padding:10px;transition:box-shadow .3s linear}.pui-picture-card .info{margin-top:10px}.pui-picture-card-bordered{border:1px solid rgba(0,0,0,.06)}.pui-picture-card-hoverable:hover{border-color:transparent;box-shadow:0 1px 2px -2px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.12),0 5px 12px 4px rgba(0,0,0,.09);cursor:pointer}.pui-picture-card.horizontal{display:flex;justify-content:space-around}.pui-loading .mask{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:100000}.pui-loading .loading{background:#fff;border-radius:10px;box-shadow:3px 3px 3px rgba(0,0,0,.2);padding:20px;z-index:100001}.pui-loading .loading,.pui-nodata{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.pui-nodata .not-data-image{display:block;height:100px}.pui-nodata .no-data-text{color:#000;display:inline-block;font-size:14px;font-weight:400;margin-top:5px;opacity:.65;text-align:center;width:100%}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar{height:8px;width:8px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.5);border-radius:8px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-track{border-radius:2px}.pui-cascader-dropdown .ant-cascader-menu::-webkit-scrollbar-corner{background-color:#f1f1f1}.pui-tree-select-dropdown .ant-select-tree-node-content-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pui-tree-select-dropdown .ant-select-tree-node-content-wrapper .ant-select-tree-title{overflow:hidden}.pui-upload .preview .ant-upload-list-item-actions a[target=_blank][rel="noopener noreferrer"]{opacity:1!important;pointer-events:auto!important}.pui-upload .ant-upload-list.ant-upload-list-picture-card .ant-upload-span .ant-upload-list-item-thumbnail{height:46px}.pui-upload .ant-upload-list.ant-upload-list-picture-card .ant-upload-span .ant-upload-list-item-name{display:inline;display:initial;position:absolute}.pui-table .ant-spin-container,.pui-table .ant-spin-nested-loading,.pui-table .ant-table,.pui-table .ant-table-container{height:100%;width:100%}.pui-table .ant-table-body{max-height:calc(100% - 56px);max-width:100%;min-height:calc(100% - 56px);min-width:100%;overflow-y:auto!important;position:absolute}.pui-table .ant-table-body .ant-table-tbody>tr>td.ant-table-cell.d-table-cell-wrap{white-space:normal}.pui-table .ant-table-body::-webkit-scrollbar{height:8px;width:4px}.pui-table .ant-table-body::-webkit-scrollbar-thumb{background-color:#0084ff}.pui-table .ant-table-body::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:2px}.pui-table .ant-table-body::-webkit-scrollbar-corner{background-color:#f1f1f1}.pui-table .ant-spin-nested-loading>div>.ant-spin{max-height:none}.pui-table .ant-pagination-total-text span{color:#40a9ff;font-weight:700}.pui-table.height-on-page .ant-table{height:calc(100% - 56px)}.pui-ip-address{border:1px solid #d9d9d9;border-radius:2px;display:inline-block;transition:all .3s}.pui-ip-address.small{height:24px}.pui-ip-address.large{padding:6.5px 10px}.pui-ip-address.middle{padding:4px 10px}.pui-ip-address.disabled{background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;color:rgba(0,0,0,.25);cursor:not-allowed;opacity:1}.pui-ip-address.disabled:hover{border-color:#d9d9d9}.pui-ip-address:hover{border-color:#4d90ff}.pui-ip-address:focus-within{border-color:#40a9ff;box-shadow:0 0 0 2px rgba(24,144,255,.2)}.pui-ip-address input{font-feature-settings:"tnum","tnum";background:none;border:none;box-sizing:border-box;color:#000000d9;display:inline-block;font-size:14px;font-variant:tabular-nums;line-height:1.5715;margin:0;outline:0;padding:0;position:relative;text-align:center}.pui-ip-address input[disabled]{color:inherit;cursor:not-allowed}.pui-ip-address input[type=number]{appearance:textfield}.pui-ip-address input[type=number]::-webkit-inner-spin-button,.pui-ip-address input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.pui-form .form-wrapper>.ant-form-item{margin-bottom:24px;margin-right:0;min-height:32px}.pui-form .ant-input-number,.pui-form .ant-picker{width:100%}.pui-form.ant-form-horizontal .form-wrapper>.ant-form-item:last-child,.pui-form.ant-form-vertical .form-wrapper>.ant-form-item:last-child{margin-bottom:0}.pui-form.ant-form-horizontal .ant-form-item-label{min-width:80px}.pui-form.ant-form-inline .form-wrapper,.pui-form.ant-form-inline.inlineVertical .form-wrapper{align-items:flex-end;display:flex;flex:1 1;flex-wrap:wrap;height:min-content}.pui-form.ant-form-inline .form-wrapper>.ant-form-item,.pui-form.ant-form-inline.inlineVertical .form-wrapper>.ant-form-item{padding-right:16px}.pui-form.ant-form-inline.inlineVertical .ant-form-item-row{flex-direction:column}.pui-form.ant-form-inline.inlineVertical .ant-form-item-row .ant-form-item-label{text-align:left}.pui-form.ant-form-inline.inlineVertical .grid-row{flex:1 1}.pui-modal-container .ant-modal-wrap .ant-modal{height:100%;max-width:none}.pui-modal-container .ant-modal-wrap .ant-modal .ant-modal-content{height:100%;width:100%}.pui-absolute-modal-container .ant-modal-wrap{position:fixed}.pui-relative-modal-container .ant-modal-wrap{position:absolute}.pui-color-picker .sketch-picker{box-shadow:none!important;padding:0!important}.trigger{border:5px solid #fff;border-radius:2px;box-shadow:0 0 2px #000;cursor:pointer;display:inline-block;height:26px;width:60px}.pui-infinite-scroll-wrapper .ant-list .ant-row{margin-right:0!important}.scroll-container{overflow-x:hidden;overflow-y:auto;position:relative}.scroll-container .backtop{right:50px}.scroll-container .up{background:#007aff;border-radius:3px;color:#fff;text-align:center}.toolbar{background-color:rgba(0,0,0,.5);color:#fff;justify-content:center}.toolbar,.toolbar button{align-items:center;display:flex}.toolbar button{background-color:transparent;border-width:0;cursor:pointer}.toolbar button:hover{background-color:#0074d9}.toolbar .icon>path{fill:#fff}.pui-signature-pad{align-items:center;display:flex;flex-direction:column;justify-content:center;position:relative}.pui-signature-pad-canvas{border:1px solid #d9d9d9;border-radius:4px}.pui-signature-pad-toolbar{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;text-align:center}.pui-signature-pad-button{background-color:#fff;border:1px solid #1677ff;border-radius:4px;color:#1677ff;cursor:pointer;height:32px;min-width:64px;padding:4px 16px;transition:all .3s}.pui-signature-pad-button:hover{background-color:#f0f5ff}.pui-signature-pad-button:last-child{background-color:#1677ff;color:#fff}.pui-signature-pad-button:last-child:hover{background-color:#4096ff}.pui-context-menu{animation:contextmenu-show .2s ease-out forwards;background:#fff;border:1px solid #f0f0f0;border-radius:1px;box-shadow:0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05);min-width:120px;opacity:0;padding:4px 0;transform:scale(.8);transform-origin:top left}.pui-context-menu-item{align-items:center;color:rgba(0,0,0,.88);cursor:pointer;display:flex;gap:8px;padding:5px 12px;transition:all .3s;-ms-user-select:none;user-select:none}.pui-context-menu-item:hover{background:rgba(0,0,0,.04)}.pui-context-menu-item-disabled{color:rgba(0,0,0,.25);cursor:not-allowed}.pui-context-menu-item-disabled:hover{background:none}.pui-context-menu-item-divider{background:#f0f0f0;height:1px;margin:4px 0}@keyframes contextmenu-show{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
|
package/package.json
CHANGED
|
@@ -1,107 +1,108 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@pointcloud/pcloud-components",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"private": false,
|
|
5
|
-
"description": "pointcloud react 组件库",
|
|
6
|
-
"keywords": [
|
|
7
|
-
"pointcloud",
|
|
8
|
-
"react",
|
|
9
|
-
"components",
|
|
10
|
-
"ui"
|
|
11
|
-
],
|
|
12
|
-
"license": "MIT",
|
|
13
|
-
"author": "frankdong",
|
|
14
|
-
"module": "dist/esm/index.js",
|
|
15
|
-
"typings": "dist/esm/index.d.ts",
|
|
16
|
-
"files": [
|
|
17
|
-
"dist"
|
|
18
|
-
],
|
|
19
|
-
"scripts": {
|
|
20
|
-
"build": "father build",
|
|
21
|
-
"build:watch": "father dev",
|
|
22
|
-
"clean": "node scripts/clean-
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"docker:build
|
|
26
|
-
"docker:
|
|
27
|
-
"docker:
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"lint
|
|
32
|
-
"lint:
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
"
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
"
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
"@
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"react-
|
|
69
|
-
"react-
|
|
70
|
-
"react-
|
|
71
|
-
"
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
"@commitlint/
|
|
76
|
-
"@
|
|
77
|
-
"@
|
|
78
|
-
"@types/react
|
|
79
|
-
"@types/
|
|
80
|
-
"@
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
"prettier
|
|
88
|
-
"prettier-plugin-
|
|
89
|
-
"
|
|
90
|
-
"react
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
"react
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
"
|
|
101
|
-
"
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
"
|
|
106
|
-
|
|
107
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@pointcloud/pcloud-components",
|
|
3
|
+
"version": "0.1.27",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "pointcloud react 组件库",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"pointcloud",
|
|
8
|
+
"react",
|
|
9
|
+
"components",
|
|
10
|
+
"ui"
|
|
11
|
+
],
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"author": "frankdong",
|
|
14
|
+
"module": "dist/esm/index.js",
|
|
15
|
+
"typings": "dist/esm/index.d.ts",
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "father build",
|
|
21
|
+
"build:watch": "father dev",
|
|
22
|
+
"clean:docs": "node scripts/clean-dir.js docs-dist",
|
|
23
|
+
"clean:tmp": "node scripts/clean-dir.js tmp",
|
|
24
|
+
"dev": "dumi dev",
|
|
25
|
+
"docker:build": "docker build -f Dockerfile -t Harbor地址/仓库名称/镜像名称:latest ./",
|
|
26
|
+
"docker:build:arm64": "docker buildx build --platform=linux/arm64 -f Dockerfile -t Harbor地址/仓库名称/镜像名称:latest ./",
|
|
27
|
+
"docker:delete": "docker rmi Harbor地址/仓库名称/镜像名称:latest",
|
|
28
|
+
"docker:push": "npm run docs:build && npm run docker:build && docker push Harbor地址/仓库名称/镜像名称:latest && npm run docker:delete",
|
|
29
|
+
"docs:build": "npm run clean:docs && dumi build",
|
|
30
|
+
"doctor": "father doctor",
|
|
31
|
+
"lint": "npm run lint:es && npm run lint:css",
|
|
32
|
+
"lint:css": "stylelint \"{src,config,docs,scripts,.dumi/theme}/**/*.{css,less}\"",
|
|
33
|
+
"lint:es": "eslint \"{src,config,docs,scripts,.dumi/theme}/**/*.{js,jsx,ts,tsx}\"",
|
|
34
|
+
"prepare": "husky install && dumi setup",
|
|
35
|
+
"prepublishOnly": "father doctor && npm run lint && npm run build",
|
|
36
|
+
"prettier": "prettier -c --write \"{src,config,docs,scripts,.dumi/theme}/**\"",
|
|
37
|
+
"release": "release-it --ci",
|
|
38
|
+
"start": "npm run clean:tmp && npm run dev"
|
|
39
|
+
},
|
|
40
|
+
"commitlint": {
|
|
41
|
+
"extends": [
|
|
42
|
+
"@commitlint/config-conventional"
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
"lint-staged": {
|
|
46
|
+
"*.{md,json}": [
|
|
47
|
+
"prettier --write --no-error-on-unmatched-pattern"
|
|
48
|
+
],
|
|
49
|
+
"*.{css,less}": [
|
|
50
|
+
"stylelint --fix",
|
|
51
|
+
"prettier --write"
|
|
52
|
+
],
|
|
53
|
+
"*.{js,jsx}": [
|
|
54
|
+
"eslint --fix",
|
|
55
|
+
"prettier --write"
|
|
56
|
+
],
|
|
57
|
+
"*.{ts,tsx}": [
|
|
58
|
+
"eslint --fix",
|
|
59
|
+
"prettier --parser=typescript --write"
|
|
60
|
+
]
|
|
61
|
+
},
|
|
62
|
+
"dependencies": {
|
|
63
|
+
"@ant-design/icons": "^4.8.3",
|
|
64
|
+
"@babel/runtime": "7.21.0",
|
|
65
|
+
"antd": "4.24.16",
|
|
66
|
+
"classnames": "^2.3.2",
|
|
67
|
+
"cropperjs": "^2.0.0",
|
|
68
|
+
"react-color": "^2.19.3",
|
|
69
|
+
"react-countup": "^6.5.0",
|
|
70
|
+
"react-infinite-scroll-component": "^6.1.0",
|
|
71
|
+
"react-rnd": "^10.5.2",
|
|
72
|
+
"wordcloud": "^1.2.3"
|
|
73
|
+
},
|
|
74
|
+
"devDependencies": {
|
|
75
|
+
"@commitlint/cli": "^17.1.2",
|
|
76
|
+
"@commitlint/config-conventional": "^17.1.0",
|
|
77
|
+
"@release-it/conventional-changelog": "^7.0.0",
|
|
78
|
+
"@types/react": "^17.0.2",
|
|
79
|
+
"@types/react-dom": "^17.0.2",
|
|
80
|
+
"@types/wordcloud": "^1.2.2",
|
|
81
|
+
"@umijs/lint": "^4.0.0",
|
|
82
|
+
"dumi": "^2.4.13",
|
|
83
|
+
"eslint": "^8.23.0",
|
|
84
|
+
"father": "4.1.0",
|
|
85
|
+
"husky": "^8.0.1",
|
|
86
|
+
"lint-staged": "13.0.3",
|
|
87
|
+
"prettier": "2.7.1",
|
|
88
|
+
"prettier-plugin-organize-imports": "3.0.0",
|
|
89
|
+
"prettier-plugin-packagejson": "2.2.18",
|
|
90
|
+
"react": "^17.0.2",
|
|
91
|
+
"react-dom": "^17.0.2",
|
|
92
|
+
"release-it": "^16.1.2",
|
|
93
|
+
"stylelint": "^14.9.1"
|
|
94
|
+
},
|
|
95
|
+
"peerDependencies": {
|
|
96
|
+
"react": ">=17.0.2",
|
|
97
|
+
"react-dom": ">=17.0.2"
|
|
98
|
+
},
|
|
99
|
+
"engines": {
|
|
100
|
+
"node": ">=16.20.0",
|
|
101
|
+
"npm": ">=8.19.4",
|
|
102
|
+
"pnpm": ">=8.15.9"
|
|
103
|
+
},
|
|
104
|
+
"publishConfig": {
|
|
105
|
+
"access": "public",
|
|
106
|
+
"registry": "https://registry.npmjs.org/"
|
|
107
|
+
}
|
|
108
|
+
}
|