@jx3box/jx3box-editor 1.6.9 → 1.7.0
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 +1 -1
- package/src/components/Author.vue +165 -75
package/package.json
CHANGED
|
@@ -1,26 +1,70 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="w-author" v-loading="loading">
|
|
3
|
-
<div
|
|
3
|
+
<div
|
|
4
|
+
class="w-author-wrapper el-popover"
|
|
5
|
+
v-if="data"
|
|
6
|
+
:style="{ backgroundImage: bg }"
|
|
7
|
+
>
|
|
4
8
|
<div class="u-author">
|
|
5
|
-
<Avatar
|
|
9
|
+
<Avatar
|
|
10
|
+
class="u-avatar"
|
|
11
|
+
:uid="uid"
|
|
12
|
+
:url="data.user_avatar"
|
|
13
|
+
:size="68"
|
|
14
|
+
:frame="data.user_avatar_frame"
|
|
15
|
+
/>
|
|
6
16
|
<div class="u-info">
|
|
7
17
|
<a class="u-name" :href="authorLink(uid)" target="_blank">
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
18
|
+
<el-tooltip
|
|
19
|
+
class="item"
|
|
20
|
+
effect="dark"
|
|
21
|
+
content="签约作者"
|
|
22
|
+
placement="top"
|
|
23
|
+
v-if="isSuperAuthor"
|
|
24
|
+
>
|
|
25
|
+
<a
|
|
26
|
+
class="u-superauthor"
|
|
27
|
+
href="/dashboard/cooperation"
|
|
28
|
+
target="_blank"
|
|
29
|
+
>
|
|
30
|
+
<img
|
|
31
|
+
:src="super_author_icon"
|
|
32
|
+
alt="superauthor"
|
|
33
|
+
/>
|
|
12
34
|
</a>
|
|
13
35
|
</el-tooltip>
|
|
36
|
+
<span class="u-displayname" :title="data.display_name">{{
|
|
37
|
+
data.display_name || "未知"
|
|
38
|
+
}}</span>
|
|
14
39
|
</a>
|
|
15
40
|
<div class="u-extend">
|
|
16
41
|
<el-tooltip class="item" effect="dark" placement="top">
|
|
17
42
|
<div slot="content">
|
|
18
|
-
<span class="u-tips"
|
|
43
|
+
<span class="u-tips"
|
|
44
|
+
>经验值：{{ data.experience }}</span
|
|
45
|
+
>
|
|
19
46
|
</div>
|
|
20
|
-
<span
|
|
47
|
+
<span
|
|
48
|
+
class="u-level"
|
|
49
|
+
:class="'lv-' + level"
|
|
50
|
+
:style="{
|
|
51
|
+
backgroundColor: showLevelColor(level),
|
|
52
|
+
}"
|
|
53
|
+
>Lv.{{ level }}</span
|
|
54
|
+
>
|
|
21
55
|
</el-tooltip>
|
|
22
|
-
<el-tooltip
|
|
23
|
-
|
|
56
|
+
<el-tooltip
|
|
57
|
+
class="item"
|
|
58
|
+
effect="dark"
|
|
59
|
+
:content="vipTypeTitle"
|
|
60
|
+
placement="top"
|
|
61
|
+
v-if="isVip"
|
|
62
|
+
>
|
|
63
|
+
<a
|
|
64
|
+
class="u-vip"
|
|
65
|
+
href="/vip/premium?from=sidebar_author"
|
|
66
|
+
target="_blank"
|
|
67
|
+
>
|
|
24
68
|
<i class="i-icon-vip on">{{ vipType }}</i>
|
|
25
69
|
</a>
|
|
26
70
|
</el-tooltip>
|
|
@@ -33,9 +77,20 @@
|
|
|
33
77
|
</div>
|
|
34
78
|
</div>
|
|
35
79
|
<div class="u-teams" v-if="teams && teams.length">
|
|
36
|
-
<a
|
|
37
|
-
|
|
38
|
-
|
|
80
|
+
<a
|
|
81
|
+
class="u-team"
|
|
82
|
+
v-for="(item, i) in teams"
|
|
83
|
+
:key="i"
|
|
84
|
+
:href="teamLink(item.team_id)"
|
|
85
|
+
target="_blank"
|
|
86
|
+
>
|
|
87
|
+
<img
|
|
88
|
+
class="u-team-logo"
|
|
89
|
+
:src="showTeamLogo(item.team_logo)"
|
|
90
|
+
/>
|
|
91
|
+
<span class="u-team-name"
|
|
92
|
+
>{{ item.team_name }}@{{ item.team_server }}</span
|
|
93
|
+
>
|
|
39
94
|
</a>
|
|
40
95
|
</div>
|
|
41
96
|
</div>
|
|
@@ -43,19 +98,31 @@
|
|
|
43
98
|
</template>
|
|
44
99
|
|
|
45
100
|
<script>
|
|
46
|
-
import {
|
|
47
|
-
|
|
101
|
+
import {
|
|
102
|
+
authorLink,
|
|
103
|
+
getLink,
|
|
104
|
+
getThumbnail,
|
|
105
|
+
} from "@jx3box/jx3box-common/js/utils";
|
|
106
|
+
import {
|
|
107
|
+
getUserInfo,
|
|
108
|
+
getUserMedals,
|
|
109
|
+
getUserPublicTeams,
|
|
110
|
+
} from "../../service/author";
|
|
48
111
|
import { getDecoration } from "../../service/cms";
|
|
49
|
-
import {
|
|
112
|
+
import {
|
|
113
|
+
__server,
|
|
114
|
+
__imgPath,
|
|
115
|
+
__userLevelColor,
|
|
116
|
+
} from "@jx3box/jx3box-common/data/jx3box.json";
|
|
50
117
|
import User from "@jx3box/jx3box-common/js/user";
|
|
51
118
|
import { __userLevel } from "@jx3box/jx3box-common/data/jx3box.json";
|
|
52
|
-
import Avatar from "./Avatar.vue"
|
|
53
|
-
import medal from "./medal.vue"
|
|
119
|
+
import Avatar from "./Avatar.vue";
|
|
120
|
+
import medal from "./medal.vue";
|
|
54
121
|
export default {
|
|
55
122
|
name: "Author",
|
|
56
123
|
components: {
|
|
57
124
|
medal,
|
|
58
|
-
Avatar
|
|
125
|
+
Avatar,
|
|
59
126
|
},
|
|
60
127
|
props: ["uid"],
|
|
61
128
|
data: () => ({
|
|
@@ -63,116 +130,132 @@ export default {
|
|
|
63
130
|
medals: [],
|
|
64
131
|
teams: [],
|
|
65
132
|
loading: false,
|
|
66
|
-
bg:
|
|
133
|
+
bg: "",
|
|
67
134
|
}),
|
|
68
135
|
computed: {
|
|
69
|
-
super_author_icon: function() {
|
|
136
|
+
super_author_icon: function () {
|
|
70
137
|
return __imgPath + "image/user/" + "superauthor.svg";
|
|
71
138
|
},
|
|
72
|
-
isVip: function (){
|
|
73
|
-
return this.data?.is_pro || this.data?.is_pre
|
|
139
|
+
isVip: function () {
|
|
140
|
+
return this.data?.is_pro || this.data?.is_pre;
|
|
74
141
|
},
|
|
75
|
-
vipTypeTitle: function() {
|
|
142
|
+
vipTypeTitle: function () {
|
|
76
143
|
return this.data?.is_pro ? "专业版会员" : "高级版会员";
|
|
77
144
|
},
|
|
78
|
-
vipType: function() {
|
|
145
|
+
vipType: function () {
|
|
79
146
|
return this.data?.is_pro ? "PRO" : "PRE";
|
|
80
147
|
},
|
|
81
|
-
level: function() {
|
|
148
|
+
level: function () {
|
|
82
149
|
return User.getLevel(this.data && this.data.experience);
|
|
83
150
|
},
|
|
84
|
-
hasTrophy: function() {
|
|
151
|
+
hasTrophy: function () {
|
|
85
152
|
return this.medals.length;
|
|
86
153
|
},
|
|
87
|
-
isSuperAuthor: function() {
|
|
154
|
+
isSuperAuthor: function () {
|
|
88
155
|
return !!this.data?.sign;
|
|
89
156
|
},
|
|
90
157
|
},
|
|
91
158
|
watch: {
|
|
92
159
|
uid: {
|
|
93
160
|
immediate: true,
|
|
94
|
-
handler
|
|
161
|
+
handler(val) {
|
|
95
162
|
if (val) {
|
|
96
|
-
this.loadData()
|
|
97
|
-
this.getDecoration()
|
|
163
|
+
this.loadData();
|
|
164
|
+
this.getDecoration();
|
|
98
165
|
}
|
|
99
|
-
}
|
|
100
|
-
}
|
|
166
|
+
},
|
|
167
|
+
},
|
|
101
168
|
},
|
|
102
169
|
methods: {
|
|
103
|
-
loadData: function() {
|
|
104
|
-
const promises = [
|
|
170
|
+
loadData: function () {
|
|
171
|
+
const promises = [
|
|
172
|
+
getUserInfo(this.uid),
|
|
173
|
+
getUserMedals(this.uid),
|
|
174
|
+
getUserPublicTeams(this.uid),
|
|
175
|
+
];
|
|
105
176
|
this.loading = true;
|
|
106
|
-
Promise.all(promises).then(res => {
|
|
177
|
+
Promise.all(promises).then((res) => {
|
|
107
178
|
this.data = res[0];
|
|
108
179
|
this.medals = res[1];
|
|
109
180
|
this.teams = res[2];
|
|
110
181
|
this.loading = false;
|
|
111
182
|
});
|
|
112
183
|
},
|
|
113
|
-
loadUserInfo: function (){
|
|
114
|
-
return getUserInfo(this.uid)
|
|
115
|
-
.
|
|
116
|
-
|
|
117
|
-
})
|
|
184
|
+
loadUserInfo: function () {
|
|
185
|
+
return getUserInfo(this.uid).then((data) => {
|
|
186
|
+
this.data = data;
|
|
187
|
+
});
|
|
118
188
|
},
|
|
119
|
-
loadMedals: function() {
|
|
189
|
+
loadMedals: function () {
|
|
120
190
|
return getUserMedals(this.uid).then((data) => {
|
|
121
191
|
this.medals = data;
|
|
122
192
|
});
|
|
123
193
|
},
|
|
124
|
-
loadTeams: function() {
|
|
194
|
+
loadTeams: function () {
|
|
125
195
|
return getUserPublicTeams(this.uid).then((data) => {
|
|
126
196
|
this.teams = data && data.slice(0, 5);
|
|
127
197
|
});
|
|
128
198
|
},
|
|
129
|
-
getDecoration(){
|
|
130
|
-
let decoration_atcard=sessionStorage.getItem(
|
|
131
|
-
|
|
132
|
-
|
|
199
|
+
getDecoration() {
|
|
200
|
+
let decoration_atcard = sessionStorage.getItem(
|
|
201
|
+
"decoration_atcard" + this.uid
|
|
202
|
+
);
|
|
203
|
+
if (decoration_atcard == "no") {
|
|
204
|
+
this.bg = "";
|
|
133
205
|
return;
|
|
134
206
|
}
|
|
135
207
|
//已有缓存，读取解析
|
|
136
|
-
if(decoration_atcard){
|
|
137
|
-
this.setDecoration(JSON.parse(decoration_atcard))
|
|
208
|
+
if (decoration_atcard) {
|
|
209
|
+
this.setDecoration(JSON.parse(decoration_atcard));
|
|
138
210
|
return;
|
|
139
211
|
}
|
|
140
|
-
getDecoration({using:1,user_id:this.uid,type:
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
212
|
+
getDecoration({ using: 1, user_id: this.uid, type: "atcard" }).then(
|
|
213
|
+
(data) => {
|
|
214
|
+
let res = data.data.data;
|
|
215
|
+
if (res.length == 0) {
|
|
216
|
+
//空 则为无主题，不再加载接口，界面设No
|
|
217
|
+
sessionStorage.setItem(
|
|
218
|
+
"decoration_atcard" + this.uid,
|
|
219
|
+
"no"
|
|
220
|
+
);
|
|
221
|
+
this.bg = "";
|
|
222
|
+
return;
|
|
223
|
+
}
|
|
224
|
+
sessionStorage.setItem(
|
|
225
|
+
"decoration_atcard" + this.uid,
|
|
226
|
+
JSON.stringify(res[0])
|
|
227
|
+
);
|
|
228
|
+
this.setDecoration(res[0]);
|
|
147
229
|
}
|
|
148
|
-
|
|
149
|
-
this.setDecoration(res[0])
|
|
150
|
-
})
|
|
230
|
+
);
|
|
151
231
|
},
|
|
152
|
-
setDecoration(decoration_sidebar){
|
|
153
|
-
this.bg = `url(${this.showDecoration(
|
|
232
|
+
setDecoration(decoration_sidebar) {
|
|
233
|
+
this.bg = `url(${this.showDecoration(
|
|
234
|
+
decoration_sidebar.val,
|
|
235
|
+
decoration_sidebar.type
|
|
236
|
+
)})`;
|
|
154
237
|
},
|
|
155
|
-
showMedalIcon: function(val) {
|
|
238
|
+
showMedalIcon: function (val) {
|
|
156
239
|
return __imgPath + "image/medals/user/" + val + ".gif";
|
|
157
240
|
},
|
|
158
|
-
showMedalDesc: function(item) {
|
|
241
|
+
showMedalDesc: function (item) {
|
|
159
242
|
return item.medal_desc || medal_map[item.medal];
|
|
160
243
|
},
|
|
161
|
-
teamLink: function(team_id) {
|
|
244
|
+
teamLink: function (team_id) {
|
|
162
245
|
return getLink("org", team_id);
|
|
163
246
|
},
|
|
164
|
-
showTeamLogo: function(val) {
|
|
247
|
+
showTeamLogo: function (val) {
|
|
165
248
|
return getThumbnail(val, 96);
|
|
166
249
|
},
|
|
167
|
-
showLevelColor:function (level){
|
|
168
|
-
return __userLevelColor[level]
|
|
250
|
+
showLevelColor: function (level) {
|
|
251
|
+
return __userLevelColor[level];
|
|
169
252
|
},
|
|
170
|
-
showDecoration:function(val,type){
|
|
253
|
+
showDecoration: function (val, type) {
|
|
171
254
|
return __imgPath + `decoration/images/${val}/${type}.png`;
|
|
172
255
|
},
|
|
173
|
-
authorLink
|
|
174
|
-
}
|
|
175
|
-
}
|
|
256
|
+
authorLink,
|
|
257
|
+
},
|
|
258
|
+
};
|
|
176
259
|
</script>
|
|
177
260
|
|
|
178
261
|
<style lang="less">
|
|
@@ -183,8 +266,8 @@ export default {
|
|
|
183
266
|
background-repeat: no-repeat;
|
|
184
267
|
background-position: top right;
|
|
185
268
|
background-size: 100% auto;
|
|
186
|
-
.u-author{
|
|
187
|
-
padding:5px 0 15px 5px;
|
|
269
|
+
.u-author {
|
|
270
|
+
padding: 5px 0 15px 5px;
|
|
188
271
|
}
|
|
189
272
|
.u-avatar {
|
|
190
273
|
.fl;
|
|
@@ -192,8 +275,8 @@ export default {
|
|
|
192
275
|
}
|
|
193
276
|
img {
|
|
194
277
|
border: none;
|
|
195
|
-
margin:0;
|
|
196
|
-
padding:0;
|
|
278
|
+
margin: 0;
|
|
279
|
+
padding: 0;
|
|
197
280
|
}
|
|
198
281
|
a {
|
|
199
282
|
.lh(28px);
|
|
@@ -203,6 +286,13 @@ export default {
|
|
|
203
286
|
box-shadow: none;
|
|
204
287
|
}
|
|
205
288
|
}
|
|
289
|
+
.u-displayname {
|
|
290
|
+
.fz(15px);
|
|
291
|
+
.nobreak;
|
|
292
|
+
max-width: 200px;
|
|
293
|
+
color: @color;
|
|
294
|
+
.bold;
|
|
295
|
+
}
|
|
206
296
|
}
|
|
207
297
|
}
|
|
208
298
|
</style>
|