n20-project-component 1.0.3 → 1.0.5

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.en.md ADDED
@@ -0,0 +1,36 @@
1
+ # k13-07_G6公共产品包前端
2
+
3
+ #### Description
4
+ G6公共产品包前端代码
5
+
6
+ #### Software Architecture
7
+ Software architecture description
8
+
9
+ #### Installation
10
+
11
+ 1. xxxx
12
+ 2. xxxx
13
+ 3. xxxx
14
+
15
+ #### Instructions
16
+
17
+ 1. xxxx
18
+ 2. xxxx
19
+ 3. xxxx
20
+
21
+ #### Contribution
22
+
23
+ 1. Fork the repository
24
+ 2. Create Feat_xxx branch
25
+ 3. Commit your code
26
+ 4. Create Pull Request
27
+
28
+
29
+ #### Gitee Feature
30
+
31
+ 1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
32
+ 2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
33
+ 3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
34
+ 4. The most valuable open source project [GVP](https://gitee.com/gvp)
35
+ 5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
36
+ 6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
package/README.md CHANGED
@@ -1,137 +1,111 @@
1
- # n20-project-component
2
-
3
- PC 端 Vue 2 + Element UI 通用组件库,公司内部项目复用。
4
-
5
- ## 组件列表
6
-
7
- | 组件 | 说明 | 状态 |
8
- |------|------|------|
9
- | N20CopyText | 点击复制文本,弹出「已复制」反馈 | 已完成 |
10
- | N20FloatingToolbar | 选中文字后浮现操作工具条 | 🔲 待开发 |
11
- | N20FrequentWords | 常用词输入,自动记录到本地缓存 | 🔲 待开发 |
12
- | N20BatchInput | 批量输入,粘贴自动拆分为多个标签 | 已完成 |
13
-
14
- ---
15
-
16
- ## 发布
17
-
18
- ### 前置条件
19
-
20
- - Node 14+
21
- - npm 账号([注册地址](https://www.npmjs.com/signup))
22
- - npm 账号需开启 2FA 或创建 Granular Access Token
23
-
24
- ### 构建
25
-
26
- ```bash
27
- npm run build
28
- ```
29
-
30
- 构建产物在 `dist/` 目录下:
31
-
32
- ```
33
- dist/
34
- ├── n20-project-component.umd.min.js # UMD 压缩版
35
- ├── n20-project-component.umd.js # UMD 开发版
36
- ├── n20-project-component.common.js # CommonJS
37
- └── n20-project-component.css # 样式文件
38
- ```
39
-
40
- ### 发布到 npm
41
-
42
- ```bash
43
- # 首次使用先登录
44
- npm login
45
-
46
- # 发布(需要 2FA 验证码)
47
- npm publish --otp=你的6位验证码
48
- ```
49
-
50
- 如果用 Access Token 方式发布:
51
-
52
- ```bash
53
- npm publish --access public --//registry.npmjs.org/:_authToken=你的token
54
- ```
55
-
56
- ### 更新版本
57
-
58
- ```bash
59
- # 补丁版本 1.0.0 → 1.0.1
60
- npm version patch
61
-
62
- # 次版本 1.0.0 → 1.1.0
63
- npm version minor
64
-
65
- # 主版本 1.0.0 → 2.0.0
66
- npm version major
67
-
68
- # 然后发布
69
- npm publish --otp=验证码
70
- ```
71
-
72
- ---
73
-
74
- ## 安装
75
-
76
- ```bash
77
- npm install n20-project-component
78
- ```
79
-
80
- ---
81
-
82
- ## 使用
83
-
84
- ### 全量引入
85
-
86
- `main.js` 中:
87
-
88
- ```javascript
89
- import Vue from 'vue'
90
- import N20Components from 'n20-project-component'
91
- import 'n20-project-component/dist/n20-project-component.css'
92
-
93
- Vue.use(N20Components)
94
- ```
95
-
96
- 之后在任意 `.vue` 文件中直接使用:
97
-
98
- ```vue
99
- <N20CopyText text="BILL-2024-001">BILL-2024-001</N20CopyText>
100
- ```
101
-
102
- ### 按需引入
103
-
104
- ```javascript
105
- import { N20CopyText } from 'n20-project-component'
106
- import 'n20-project-component/dist/n20-project-component.css'
107
-
108
- // 全局注册
109
- Vue.component('N20CopyText', N20CopyText)
110
-
111
- // 或在组件内局部注册
112
- export default {
113
- components: { N20CopyText }
114
- }
115
- ```
116
-
117
- ---
118
-
119
- ## 本地开发
120
-
121
- ```bash
122
- # 安装依赖
123
- npm install
124
-
125
- # 启动开发调试(examples 目录)
126
- npm run dev
127
-
128
- # 构建
129
- npm run build
130
- ```
131
-
132
- 新增组件步骤:
133
-
134
- 1. 在 `src/components/` 下创建组件目录和 `index.vue`
135
- 2. 在 `src/index.js` 中导入并注册
136
- 3. 在 `examples/App.vue` 中添加使用示例
137
- 4. `npm run dev` 调试验证
1
+ # n20-project-component
2
+
3
+ PC 端 Vue 2 + Element UI 通用组件库,用于公司内部项目复用。
4
+
5
+ ## 组件列表
6
+
7
+ | 组件 | 说明 | 状态 |
8
+ |------|------|------|
9
+ | N20CopyText | 点击复制文本,弹出已复制反馈 | 已完成 |
10
+ | N20FloatingToolbar | 选中文字后浮现操作工具条 | 已完成 |
11
+ | N20BatchInput | 批量输入,粘贴自动拆分并写回逗号分隔字符串 | 已完成 |
12
+ | N20FrequentWords | 常用词输入,自动记录到本地缓存 | 待开发 |
13
+
14
+ ## 安装
15
+
16
+ ```bash
17
+ npm install n20-project-component
18
+ ```
19
+
20
+ ## 使用
21
+
22
+ ### 全量引入
23
+
24
+ `main.js` 中:
25
+
26
+ ```javascript
27
+ import Vue from 'vue'
28
+ import N20Components from 'n20-project-component'
29
+ import 'n20-project-component/dist/n20-project-component.css'
30
+
31
+ Vue.use(N20Components)
32
+ ```
33
+
34
+ ### 按需引入
35
+
36
+ ```javascript
37
+ import Vue from 'vue'
38
+ import {
39
+ N20CopyText,
40
+ N20FloatingToolbar,
41
+ N20BatchInput,
42
+ } from 'n20-project-component'
43
+ import 'n20-project-component/dist/n20-project-component.css'
44
+
45
+ Vue.component('N20CopyText', N20CopyText)
46
+ Vue.component('N20FloatingToolbar', N20FloatingToolbar)
47
+ Vue.component('N20BatchInput', N20BatchInput)
48
+ ```
49
+
50
+ ## 组件示例
51
+
52
+ ### N20CopyText
53
+
54
+ ```vue
55
+ <N20CopyText text="BILL-2024-001">BILL-2024-001</N20CopyText>
56
+ ```
57
+
58
+ ### N20FloatingToolbar
59
+
60
+ ```vue
61
+ <N20FloatingToolbar
62
+ :actions="[
63
+ { label: '复制', command: 'copy' },
64
+ { label: '搜索', command: 'search' }
65
+ ]"
66
+ @action="handleToolbarAction"
67
+ >
68
+ <div>这里是可选中文本区域</div>
69
+ </N20FloatingToolbar>
70
+ ```
71
+
72
+ ### N20BatchInput
73
+
74
+ ```vue
75
+ <N20BatchInput
76
+ v-model="batchValue"
77
+ :max="100"
78
+ placeholder="点击输入批量数据"
79
+ />
80
+ ```
81
+
82
+ 说明:
83
+ - 触发方式为输入框右侧编辑图标或点击输入框。
84
+ - 支持从 Excel 粘贴,按换行、Tab、英文逗号、中文逗号拆分。
85
+ - 超出最大条数时禁止确认。
86
+ - 确认后通过 `v-model` 回写逗号分隔字符串。
87
+
88
+ ## 本地开发
89
+
90
+ ```bash
91
+ # 安装依赖
92
+ npm install
93
+
94
+ # 启动示例调试
95
+ npm run dev
96
+
97
+ # 构建组件库
98
+ npm run build
99
+ ```
100
+
101
+ ## 构建产物
102
+
103
+ 构建后产物位于 `dist/`:
104
+
105
+ ```text
106
+ dist/
107
+ ├── n20-project-component.umd.min.js
108
+ ├── n20-project-component.umd.js
109
+ ├── n20-project-component.common.js
110
+ └── n20-project-component.css
111
+ ```
@@ -0,0 +1,8 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <title>页面</title>
4
+ <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5
+ <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="20" height="20"></rect>
6
+ <path d="M16.6914062,5.63867188 C16.8085938,5.75585938 16.875,5.9140625 16.875,6.08007812 L16.875,18.125 C16.875,18.4707031 16.5957031,18.75 16.25,18.75 L3.75,18.75 C3.40429688,18.75 3.125,18.4707031 3.125,18.125 L3.125,1.875 C3.125,1.52929688 3.40429688,1.25 3.75,1.25 L12.0449219,1.25 C12.2109375,1.25 12.3710938,1.31640625 12.4882813,1.43359375 L16.6914062,5.63867188 Z M15.4335938,6.3671875 L11.7578125,2.69140625 L11.7578125,6.3671875 L15.4335938,6.3671875 Z M6.25,9.4140625 C6.16370551,9.4140625 6.09375,9.48401801 6.09375,9.5703125 L6.09375,10.5078125 C6.09375,10.594107 6.16370551,10.6640625 6.25,10.6640625 L13.75,10.6640625 C13.8362945,10.6640625 13.90625,10.594107 13.90625,10.5078125 L13.90625,9.5703125 C13.90625,9.48401801 13.8362945,9.4140625 13.75,9.4140625 L6.25,9.4140625 Z M6.25,12.0703125 C6.16370551,12.0703125 6.09375,12.140268 6.09375,12.2265625 L6.09375,13.1640625 C6.09375,13.250357 6.16370551,13.3203125 6.25,13.3203125 L9.84375,13.3203125 C9.93004449,13.3203125 10,13.250357 10,13.1640625 L10,12.2265625 C10,12.140268 9.93004449,12.0703125 9.84375,12.0703125 L6.25,12.0703125 Z" id="形状" fill="#1677FF" fill-rule="nonzero"></path>
7
+ </g>
8
+ </svg>
@@ -0,0 +1,9 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <title>文件</title>
4
+ <g id="文件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5
+ <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="20" height="20"></rect>
6
+ <rect id="矩形" fill="#FFBF00" opacity="0.300000012" x="3" y="4" width="14" height="11"></rect>
7
+ <path d="M17.1875,5.828125 L10.1757812,5.828125 L7.88476562,3.63671875 C7.85546875,3.609375 7.81640625,3.59375 7.77734375,3.59375 L2.8125,3.59375 C2.46679688,3.59375 2.1875,3.87304688 2.1875,4.21875 L2.1875,15.78125 C2.1875,16.1269531 2.46679688,16.40625 2.8125,16.40625 L17.1875,16.40625 C17.5332031,16.40625 17.8125,16.1269531 17.8125,15.78125 L17.8125,6.453125 C17.8125,6.10742188 17.5332031,5.828125 17.1875,5.828125 Z" id="路径" fill="#FFBF00" fill-rule="nonzero"></path>
8
+ </g>
9
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8.66626 7.33398H14.6663V8.66699H8.66626V14.667H7.33325V8.66699H1.33325V7.33398H7.33325V1.33398H8.66626V7.33398Z" fill="#4E5969"/>
3
+ </svg>