boke-devops 0.0.30 → 0.0.38
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/package.json +14 -11
- package/packages/boke-devops-vue/package-lock.json +15276 -3531
- package/packages/boke-devops-vue/package.json +60 -58
- package/packages/boke-devops-vue/src/Provider/Provider.vue +6 -0
- package/packages/boke-devops-vue/src/Provider/store.ts +7 -2
- package/packages/boke-devops-vue/src/{AegisUser → UserAvatar}/__tests__/__snapshots__/Avatar.test.js.snap +63 -60
- package/packages/boke-devops-vue/src/{AegisUser/store.ts → UserAvatar/avatar.store.ts} +10 -1
- package/packages/boke-devops-vue/src/UserAvatar/user-avatar-card.vue +188 -0
- package/packages/boke-devops-vue/src/{AegisUser → UserAvatar}/user-avatar-group.vue +2 -2
- package/packages/boke-devops-vue/src/{AegisUser → UserAvatar}/user-avatar.vue +79 -68
- package/packages/boke-devops-vue/src/{AegisUser → UserSelect}/multiple-user-select.vue +13 -22
- package/packages/boke-devops-vue/src/index.ts +22 -22
- package/packages/boke-devops-vue/src/utils/encode.ts +132 -0
- package/packages/boke-devops-vue/types/Provider/store.d.ts +4 -0
- package/packages/boke-devops-vue/types/UserAvatar/avatar.store.d.ts +9 -0
- package/packages/boke-devops-vue/types/UserAvatar/encode.d.ts +1 -0
- package/packages/boke-devops-vue/types/UserAvatar/user-avatar-card.vue.d.ts +24 -0
- package/packages/boke-devops-vue/types/UserAvatar/user-avatar-group.vue.d.ts +44 -0
- package/packages/boke-devops-vue/types/UserAvatar/user-avatar.vue.d.ts +207 -0
- package/packages/boke-devops-vue/types/UserSelect/multiple-user-select.vue.d.ts +106 -0
- package/packages/boke-devops-vue/types/index.d.ts +10 -8
- package/packages/boke-devops-vue/vite.config.ts +29 -29
- package/packages/boke-docs/.dumirc.ts +3 -2
- package/packages/boke-docs/docs/components/Avatar/__test__/__snapshots__/user_avatar.test.js.snap +255 -0
- package/packages/boke-docs/docs/components/Avatar/__test__/user_avatar.test.js +18 -0
- package/packages/boke-docs/docs/components/Avatar/demo/normal.vue +1 -0
- package/packages/boke-docs/docs/components/Avatar/index.md +18 -0
- package/packages/boke-docs/docs/components/AvatarGroup/__test__/__snapshots__/user_avatar.test.js.snap +174 -0
- package/packages/boke-docs/docs/components/AvatarGroup/__test__/user_avatar.test.js +18 -0
- package/packages/boke-docs/docs/components/AvatarGroup/demo/normal.vue +36 -0
- package/packages/boke-docs/docs/components/AvatarGroup/demo/with_provider.vue +59 -0
- package/packages/boke-docs/docs/components/AvatarGroup/index.md +28 -0
- package/packages/boke-docs/docs/components/UserSelect/__test__/__snapshots__/user_select.test.js.snap +347 -0
- package/packages/boke-docs/docs/components/UserSelect/__test__/user_select.test.js +18 -0
- package/packages/boke-docs/docs/components/UserSelect/demo/normal.vue +14 -0
- package/packages/boke-docs/docs/components/UserSelect/index.md +29 -2
- package/packages/boke-docs/node_modules/.cache/logger/umi.log +14 -0
- package/packages/boke-docs/package.json +1 -1
- package/packages/boke-docs/public/logo.png +0 -0
- package/packages/boke-js-bridge/package.json +2 -2
- package/test-setup-env.js +52 -0
- package/vitest.config.js +6 -1
- package/packages/boke-devops-vue/demo/App.vue +0 -62
- package/packages/boke-devops-vue/demo/main.ts +0 -7
- /package/packages/boke-devops-vue/src/{AegisUser → UserAvatar}/__tests__/Avatar.test.js +0 -0
- /package/packages/boke-devops-vue/src/{style/variables.less → utils/style.global.less} +0 -0
@@ -0,0 +1,18 @@
|
|
1
|
+
import UserAvatar from '../demo/normal.vue'
|
2
|
+
import UserAvatarWith_provider from '../demo/with_provider.vue'
|
3
|
+
import { mount, VueWrapper } from '@vue/test-utils';
|
4
|
+
import { describe, expect, it, vi, test, } from 'vitest';
|
5
|
+
|
6
|
+
test('user avatar is normal', async () => {
|
7
|
+
const wrapper = mount(UserAvatar, {
|
8
|
+
},
|
9
|
+
);
|
10
|
+
expect(wrapper.element).toMatchSnapshot() // 匹配快照
|
11
|
+
})
|
12
|
+
|
13
|
+
test('with provider', async () => {
|
14
|
+
const wrapper = mount(UserAvatarWith_provider, {
|
15
|
+
}
|
16
|
+
)
|
17
|
+
expect(wrapper.element).toMatchSnapshot() // 匹配快照
|
18
|
+
})
|
@@ -8,3 +8,21 @@
|
|
8
8
|
<code src="./demo/with_provider.vue"></code>
|
9
9
|
|
10
10
|
### Props
|
11
|
+
| 属性名 | 类型 | 必填 | 默认值 | 描述 |
|
12
|
+
| ------------ | ------------------- | ----- | --------- | ------------------------------------------------------------ |
|
13
|
+
| size | Number, String | 否 | 28 | 头像尺寸,可以是数字或字符串。 |
|
14
|
+
| hidePopover | Boolean | 否 | false | 是否隐藏气泡框(popover)。 |
|
15
|
+
| onlyIcon | Boolean | 否 | false | 是否只显示头像图标,不显示其他内容。 |
|
16
|
+
| onlyName | Boolean | 否 | false | 是否只显示用户名,不显示其他信息。 |
|
17
|
+
| linkType | 不限类型 | 否 | "primary" | 链接类型,用于决定用户名称显示的样式或链接类型。 |
|
18
|
+
| data | 不限类型 | 否 | null | 用户数据,用于显示头像、用户名等信息。 |
|
19
|
+
| shape | String | 否 | "circle" | 头像形状,可以是"circle"(圆形)或其他支持的形状。 |
|
20
|
+
| insidePopover| Boolean | 否 | false | 是否在气泡框内部显示。 |
|
21
|
+
| noID | Boolean | 否 | false | 是否隐藏用户ID。 |
|
22
|
+
| noDialogDetail| Boolean | 否 | false | 是否隐藏对话框详细信息。 |
|
23
|
+
| tag | Boolean | 否 | false | 是否显示标签样式。 |
|
24
|
+
| closable | Boolean | 否 | false | 是否可关闭。 |
|
25
|
+
| color | String | 否 | "" | 头像或标签的颜色。 |
|
26
|
+
| disabled | Boolean | 否 | false | 是否禁用。 |
|
27
|
+
| suffix | String | 否 | "" | 后缀文本,显示在头像或标签之后。 |
|
28
|
+
| is_highlight | Function | 否 | () => false| 一个函数,用于确定头像或标签是否高亮显示的条件。 |
|
@@ -0,0 +1,174 @@
|
|
1
|
+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
2
|
+
|
3
|
+
exports[`user avatar is normal 1`] = `
|
4
|
+
<div>
|
5
|
+
|
6
|
+
<div
|
7
|
+
data-v-46dce084=""
|
8
|
+
style="display: inline-flex;"
|
9
|
+
>
|
10
|
+
<div
|
11
|
+
class="ant-avatar-group css-dev-only-do-not-override-16pw25h"
|
12
|
+
data-v-46dce084=""
|
13
|
+
>
|
14
|
+
|
15
|
+
<span
|
16
|
+
class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-16pw25h"
|
17
|
+
data-v-46dce084=""
|
18
|
+
>
|
19
|
+
<img
|
20
|
+
src="https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp"
|
21
|
+
/>
|
22
|
+
</span>
|
23
|
+
<span
|
24
|
+
class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-16pw25h"
|
25
|
+
data-v-46dce084=""
|
26
|
+
>
|
27
|
+
<img
|
28
|
+
src="https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp"
|
29
|
+
/>
|
30
|
+
</span>
|
31
|
+
<span
|
32
|
+
class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-16pw25h"
|
33
|
+
data-v-46dce084=""
|
34
|
+
>
|
35
|
+
<img
|
36
|
+
src="https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp"
|
37
|
+
/>
|
38
|
+
</span>
|
39
|
+
|
40
|
+
</div>
|
41
|
+
</div>
|
42
|
+
<!---->
|
43
|
+
|
44
|
+
</div>
|
45
|
+
`;
|
46
|
+
|
47
|
+
exports[`with provider 1`] = `
|
48
|
+
<div>
|
49
|
+
<h4>
|
50
|
+
Inside of Provider
|
51
|
+
</h4>
|
52
|
+
|
53
|
+
<div
|
54
|
+
data-v-7871c292=""
|
55
|
+
style="display: inline-flex;"
|
56
|
+
>
|
57
|
+
<span
|
58
|
+
class="ant-tag css-dev-only-do-not-override-16pw25h ant-tag-default boke-useravator-wrapper is_tag is_highlight"
|
59
|
+
data-v-7871c292=""
|
60
|
+
style="padding: 2px 12px 2px 2px; border-radius: 50px;"
|
61
|
+
>
|
62
|
+
|
63
|
+
<div
|
64
|
+
class="left-icon"
|
65
|
+
data-v-7871c292=""
|
66
|
+
>
|
67
|
+
|
68
|
+
<span
|
69
|
+
class="avator-icon ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-16pw25h"
|
70
|
+
data-v-7871c292=""
|
71
|
+
style="width: 28px; height: 28px; line-height: 28px; font-size: 18px;"
|
72
|
+
>
|
73
|
+
<img
|
74
|
+
src="https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp"
|
75
|
+
/>
|
76
|
+
</span>
|
77
|
+
<!---->
|
78
|
+
|
79
|
+
</div>
|
80
|
+
|
81
|
+
|
82
|
+
<div
|
83
|
+
class="label"
|
84
|
+
data-v-7871c292=""
|
85
|
+
>
|
86
|
+
<span
|
87
|
+
class="realname"
|
88
|
+
data-v-7871c292=""
|
89
|
+
>
|
90
|
+
Julone-new
|
91
|
+
</span>
|
92
|
+
<span
|
93
|
+
class="id"
|
94
|
+
data-v-7871c292=""
|
95
|
+
>
|
96
|
+
<span
|
97
|
+
data-v-7871c292=""
|
98
|
+
>
|
99
|
+
运维部
|
100
|
+
</span>
|
101
|
+
</span>
|
102
|
+
</div>
|
103
|
+
<!--v-if-->
|
104
|
+
<!--v-if-->
|
105
|
+
|
106
|
+
|
107
|
+
|
108
|
+
<!---->
|
109
|
+
</span>
|
110
|
+
</div>
|
111
|
+
|
112
|
+
<h4>
|
113
|
+
Out of Provider
|
114
|
+
</h4>
|
115
|
+
<div
|
116
|
+
data-v-7871c292=""
|
117
|
+
style="display: inline-flex;"
|
118
|
+
>
|
119
|
+
<span
|
120
|
+
class="ant-tag css-dev-only-do-not-override-16pw25h ant-tag-default boke-useravator-wrapper is_tag"
|
121
|
+
data-v-7871c292=""
|
122
|
+
style="padding: 2px 12px 2px 2px; border-radius: 50px;"
|
123
|
+
>
|
124
|
+
|
125
|
+
<div
|
126
|
+
class="left-icon"
|
127
|
+
data-v-7871c292=""
|
128
|
+
>
|
129
|
+
|
130
|
+
<span
|
131
|
+
class="avator-icon ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-16pw25h"
|
132
|
+
data-v-7871c292=""
|
133
|
+
style="width: 28px; height: 28px; line-height: 28px; font-size: 18px;"
|
134
|
+
>
|
135
|
+
<img
|
136
|
+
src="https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp"
|
137
|
+
/>
|
138
|
+
</span>
|
139
|
+
<!---->
|
140
|
+
|
141
|
+
</div>
|
142
|
+
|
143
|
+
|
144
|
+
<div
|
145
|
+
class="label"
|
146
|
+
data-v-7871c292=""
|
147
|
+
>
|
148
|
+
<span
|
149
|
+
class="realname"
|
150
|
+
data-v-7871c292=""
|
151
|
+
>
|
152
|
+
Julone
|
153
|
+
</span>
|
154
|
+
<span
|
155
|
+
class="id"
|
156
|
+
data-v-7871c292=""
|
157
|
+
>
|
158
|
+
<span
|
159
|
+
data-v-7871c292=""
|
160
|
+
>
|
161
|
+
运维部
|
162
|
+
</span>
|
163
|
+
</span>
|
164
|
+
</div>
|
165
|
+
<!--v-if-->
|
166
|
+
<!--v-if-->
|
167
|
+
|
168
|
+
|
169
|
+
|
170
|
+
<!---->
|
171
|
+
</span>
|
172
|
+
</div>
|
173
|
+
</div>
|
174
|
+
`;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import UserAvatar from '../demo/normal.vue'
|
2
|
+
import UserAvatarWith_provider from '../demo/with_provider.vue'
|
3
|
+
import { mount, VueWrapper } from '@vue/test-utils';
|
4
|
+
import { describe, expect, it, vi, test, } from 'vitest';
|
5
|
+
|
6
|
+
test('user avatar is normal', async () => {
|
7
|
+
const wrapper = mount(UserAvatar, {
|
8
|
+
},
|
9
|
+
);
|
10
|
+
expect(wrapper.element).toMatchSnapshot() // 匹配快照
|
11
|
+
})
|
12
|
+
|
13
|
+
test('with provider', async () => {
|
14
|
+
const wrapper = mount(UserAvatarWith_provider, {
|
15
|
+
}
|
16
|
+
)
|
17
|
+
expect(wrapper.element).toMatchSnapshot() // 匹配快照
|
18
|
+
})
|
@@ -0,0 +1,36 @@
|
|
1
|
+
<template>
|
2
|
+
<div>
|
3
|
+
<BokeUserAvatarGroup
|
4
|
+
tag
|
5
|
+
:data="data"
|
6
|
+
></BokeUserAvatarGroup>
|
7
|
+
|
8
|
+
</div>
|
9
|
+
|
10
|
+
</template>
|
11
|
+
|
12
|
+
<script setup>
|
13
|
+
|
14
|
+
import {BokeProvider, BokeUserAvatarGroup} from '@devops/boke-devops-vue';
|
15
|
+
|
16
|
+
const data = [
|
17
|
+
{
|
18
|
+
name: 'Julone', // Yes
|
19
|
+
cmdb_name: "Julone-new", // No
|
20
|
+
dept_name: '运维部',
|
21
|
+
avatar: 'https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp'
|
22
|
+
},
|
23
|
+
{
|
24
|
+
name: 'Julone2', // Yes
|
25
|
+
cmdb_name: "Julone-new", // No
|
26
|
+
dept_name: '运维部',
|
27
|
+
avatar: 'https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp'
|
28
|
+
},
|
29
|
+
{
|
30
|
+
name: 'Julone3', // Yes
|
31
|
+
cmdb_name: "Julone-new", // No
|
32
|
+
dept_name: '运维部',
|
33
|
+
avatar: 'https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp'
|
34
|
+
}
|
35
|
+
]
|
36
|
+
</script>
|
@@ -0,0 +1,59 @@
|
|
1
|
+
<template>
|
2
|
+
<div>
|
3
|
+
<h4>Inside of Provider</h4>
|
4
|
+
<BokeProvider :globalConfig="globalConfig" :globalState="globalState">
|
5
|
+
<BokeUserAvatar
|
6
|
+
tag
|
7
|
+
:data="data"
|
8
|
+
></BokeUserAvatar>
|
9
|
+
</BokeProvider>
|
10
|
+
<h4>Out of Provider</h4>
|
11
|
+
<BokeUserAvatar
|
12
|
+
tag
|
13
|
+
:data="data"
|
14
|
+
></BokeUserAvatar>
|
15
|
+
<h4>In of Drawer</h4>
|
16
|
+
<el-button type="primary" style="margin-left: 16px" @click="drawer = true">
|
17
|
+
open
|
18
|
+
</el-button>
|
19
|
+
|
20
|
+
<el-drawer v-model="drawer" title="I am the title" :with-header="false">
|
21
|
+
<span>Hi there!</span>
|
22
|
+
<BokeUserAvatar
|
23
|
+
tag
|
24
|
+
:data="data"
|
25
|
+
></BokeUserAvatar>
|
26
|
+
</el-drawer>
|
27
|
+
|
28
|
+
</div>
|
29
|
+
</template>
|
30
|
+
|
31
|
+
<script setup>
|
32
|
+
|
33
|
+
import {BokeProvider, BokeUserAvatar} from '@devops/boke-devops-vue';
|
34
|
+
import { ref } from 'vue';
|
35
|
+
import {ElButton, ElDrawer} from "element-plus"
|
36
|
+
const drawer = ref(false)
|
37
|
+
|
38
|
+
const globalConfig = {
|
39
|
+
avatar: {
|
40
|
+
user_name: "cmdb_name"
|
41
|
+
},
|
42
|
+
avatarCard: {
|
43
|
+
enabled: false,
|
44
|
+
api_url: "/"
|
45
|
+
}
|
46
|
+
}
|
47
|
+
const globalState = {
|
48
|
+
global_always_avatar_is_hihglight: userinfo=>{ // 是否高亮Avatar
|
49
|
+
return true
|
50
|
+
}
|
51
|
+
}
|
52
|
+
const data = {
|
53
|
+
name: 'Julone', // 原先的, 失效
|
54
|
+
cmdb_name: "Julone-new", // 生效!
|
55
|
+
dept_name: '运维部',
|
56
|
+
user_id: 1,
|
57
|
+
avatar: 'https://s1-imfile.feishucdn.com/static-resource/v1/v3_009p_b3b75461-971a-41e0-ac58-f755d34ef05g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp'
|
58
|
+
}
|
59
|
+
</script>
|
@@ -0,0 +1,28 @@
|
|
1
|
+
# 用户头像组
|
2
|
+
|
3
|
+
## 正常使用
|
4
|
+
|
5
|
+
<code src="./demo/normal.vue"></code>
|
6
|
+
|
7
|
+
## 全局修改 - keyname
|
8
|
+
<code src="./demo/with_provider.vue"></code>
|
9
|
+
|
10
|
+
### Props
|
11
|
+
| 属性名 | 类型 | 必填 | 默认值 | 描述 |
|
12
|
+
| ------------ | ------------------- | ----- | --------- | ------------------------------------------------------------ |
|
13
|
+
| size | Number, String | 否 | 28 | 头像尺寸,可以是数字或字符串。 |
|
14
|
+
| hidePopover | Boolean | 否 | false | 是否隐藏气泡框(popover)。 |
|
15
|
+
| onlyIcon | Boolean | 否 | false | 是否只显示头像图标,不显示其他内容。 |
|
16
|
+
| onlyName | Boolean | 否 | false | 是否只显示用户名,不显示其他信息。 |
|
17
|
+
| linkType | 不限类型 | 否 | "primary" | 链接类型,用于决定用户名称显示的样式或链接类型。 |
|
18
|
+
| data | 不限类型 | 否 | null | 用户数据,用于显示头像、用户名等信息。 |
|
19
|
+
| shape | String | 否 | "circle" | 头像形状,可以是"circle"(圆形)或其他支持的形状。 |
|
20
|
+
| insidePopover| Boolean | 否 | false | 是否在气泡框内部显示。 |
|
21
|
+
| noID | Boolean | 否 | false | 是否隐藏用户ID。 |
|
22
|
+
| noDialogDetail| Boolean | 否 | false | 是否隐藏对话框详细信息。 |
|
23
|
+
| tag | Boolean | 否 | false | 是否显示标签样式。 |
|
24
|
+
| closable | Boolean | 否 | false | 是否可关闭。 |
|
25
|
+
| color | String | 否 | "" | 头像或标签的颜色。 |
|
26
|
+
| disabled | Boolean | 否 | false | 是否禁用。 |
|
27
|
+
| suffix | String | 否 | "" | 后缀文本,显示在头像或标签之后。 |
|
28
|
+
| is_highlight | Function | 否 | () => false| 一个函数,用于确定头像或标签是否高亮显示的条件。 |
|