@jx3box/jx3box-editor 1.2.8 → 1.2.9

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.
@@ -8,4 +8,12 @@
8
8
  //border: 1px solid #d2d2d2;
9
9
  vertical-align: middle;
10
10
  }
11
+
12
+ .e-jx3-emotion {
13
+ .size(80px, 80px);
14
+ .mr(10px);
15
+ box-shadow: 0 0 1px inset rgba(0, 0, 0, 0.2);
16
+ //border: 1px solid #d2d2d2;
17
+ vertical-align: middle;
18
+ }
11
19
  }
@@ -178,6 +178,14 @@
178
178
  margin-bottom: 10px;
179
179
  border-radius: 6px;
180
180
  }
181
+
182
+ .e-jx3-emotion {
183
+ .size(80px, 80px);
184
+ .mr(10px);
185
+ box-shadow: 0 0 1px inset rgba(0, 0, 0, 0.2);
186
+ //border: 1px solid #d2d2d2;
187
+ vertical-align: middle;
188
+ }
181
189
  }
182
190
  }
183
191
 
@@ -6,20 +6,22 @@ function renderItem(vm, selector = ".w-jx3-element") {
6
6
  const pop_class = '.w-jx3-element-pop'
7
7
 
8
8
  // 触发时
9
- $(selector).on("mouseenter", function(e) {
9
+ $(selector).on("mouseenter", function (e) {
10
10
  clearTimeout(outer);
11
11
 
12
12
  // 获取元素数据
13
13
  let type = $(e.target).attr("data-type");
14
- if(type=='item'){
14
+ if (type == 'item') {
15
15
  vm.item.id = $(e.target).attr("data-id");
16
16
  vm.item.client = $(e.target).attr("data-client") == 'origin' ? 2 : 1;
17
- }else{
17
+ } else if (type === 'author') {
18
+ vm.author.id = $(e.target).attr("data-id");
19
+ } else {
18
20
  vm[type].client = $(e.target).attr("data-client");
19
21
  vm[type].id = $(e.target).attr("data-id");
20
22
  vm[type].level = $(e.target).attr("data-level");
21
23
  }
22
-
24
+
23
25
  // 显示浮层
24
26
  $(pop_class).fadeIn();
25
27
  vm.jx3_element.type = type
@@ -39,18 +41,18 @@ function renderItem(vm, selector = ".w-jx3-element") {
39
41
  });
40
42
 
41
43
  // 移除时
42
- $(selector).on("mouseleave", function(e) {
44
+ $(selector).on("mouseleave", function (e) {
43
45
  outer = setTimeout(() => {
44
46
  $(pop_class).fadeOut();
45
47
  }, 380);
46
48
  });
47
49
 
48
50
  // POP内停留
49
- $(pop_class).on("mouseenter", function(e) {
51
+ $(pop_class).on("mouseenter", function (e) {
50
52
  clearTimeout(outer);
51
53
  $(pop_class).fadeIn();
52
54
  });
53
- $(pop_class).on("mouseleave", function(e) {
55
+ $(pop_class).on("mouseleave", function (e) {
54
56
  clearTimeout(inner);
55
57
  inner = setTimeout(() => {
56
58
  $(pop_class).fadeOut();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jx3box/jx3box-editor",
3
- "version": "1.2.8",
3
+ "version": "1.2.9",
4
4
  "description": "JX3BOX Article & Editor",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -0,0 +1,34 @@
1
+ import { $next, $cms } from "@jx3box/jx3box-common/js/https";
2
+
3
+ function getUserMedals(uid) {
4
+ return $next({ mute: true })
5
+ .get("/api/user/" + uid + "/medals")
6
+ .then((res) => {
7
+ return res.data.data;
8
+ });
9
+ }
10
+
11
+ function getUserInfo(uid) {
12
+ return $cms({ mute: true })
13
+ .get(`/api/cms/user/${uid}/info`)
14
+ .then((res) => {
15
+ return res.data.data;
16
+ });
17
+ }
18
+
19
+ function getUserPublicTeams(uid) {
20
+ return $team({ mute: true }).get(`/api/team/relation/public`, {
21
+ params: {
22
+ uid: uid,
23
+ },
24
+ }).then((res) => {
25
+ return res.data.data;
26
+ });
27
+ }
28
+
29
+
30
+ export {
31
+ getUserMedals,
32
+ getUserInfo,
33
+ getUserPublicTeams,
34
+ }
package/service/cms.js CHANGED
@@ -4,4 +4,18 @@ function uploadFile(data) {
4
4
  return $cms().post(`/api/cms/upload`, data);
5
5
  }
6
6
 
7
- export { uploadFile };
7
+ // 获取用户列表
8
+ function loadAuthors(params){
9
+ return $cms().get(`/api/cms/user/list`, {
10
+ params: params
11
+ });
12
+ }
13
+
14
+ // 获取表情列表
15
+ function loadEmotions(params){
16
+ return $cms().get(`/api/cms/post/emotions`, {
17
+ params: params
18
+ });
19
+ }
20
+
21
+ export { uploadFile, loadAuthors, loadEmotions };
package/src/Article.vue CHANGED
@@ -54,6 +54,7 @@
54
54
  v-show="jx3_element.type == 'skill'"
55
55
  />
56
56
  <jx3-npc :client="npc.client" :id="npc.id" v-show="jx3_element.type === 'npc'" />
57
+ <jx3-author :uid="author.id" v-show="jx3_element.type === 'author'" />
57
58
  </div>
58
59
  <!-- <gallery :images="images" :index="gallery_index" @close="index = null"></gallery> -->
59
60
  </div>
@@ -98,6 +99,7 @@ import Item from "./Item";
98
99
  import Buff from "./Buff";
99
100
  import Skill from "./Skill";
100
101
  import Npc from "./Npc";
102
+ import Author from "./Author";
101
103
  import renderJx3Element from "../assets/js/jx3_element";
102
104
 
103
105
  export default {
@@ -144,6 +146,9 @@ export default {
144
146
  client : 'std',
145
147
  id : '',
146
148
  },
149
+ author: {
150
+ id: '',
151
+ },
147
152
  // COMMON
148
153
  jx3_element: {
149
154
  style: {
@@ -274,6 +279,7 @@ export default {
274
279
  "jx3-buff": Buff,
275
280
  "jx3-skill": Skill,
276
281
  "jx3-npc": Npc,
282
+ "jx3-author": Author,
277
283
  // "gallery":gallery,
278
284
  // VueViewer
279
285
  },
package/src/Author.vue ADDED
@@ -0,0 +1,56 @@
1
+ <template>
2
+ <div class="w-author">
3
+ <div class="w-skill-wrapper">
4
+ 1
5
+ </div>
6
+ </div>
7
+ </template>
8
+
9
+ <script>
10
+ import { getUserInfo, getUserMedals, getUserPublicTeams } from "../service/author";
11
+ import medal from "./components/medal.vue"
12
+ export default {
13
+ name: "Author",
14
+ components: {
15
+ // medal,
16
+ },
17
+ props: ["uid"],
18
+ data: () => ({
19
+ data: null,
20
+ medals: [],
21
+ teams: [],
22
+ }),
23
+ methods: {
24
+ loadData: function() {
25
+ return getUserInfo(this.uid)
26
+ .then((data) => {
27
+ this.data = data;
28
+ })
29
+ .then(() => {
30
+ this.loadMedals();
31
+ this.loadTeams();
32
+ });
33
+ },
34
+ loadMedals: function() {
35
+ getUserMedals(this.uid).then((data) => {
36
+ this.medals = data;
37
+ });
38
+ },
39
+ loadTeams: function() {
40
+ getUserPublicTeams(this.uid).then((data) => {
41
+ this.teams = data && data.slice(0, 5);
42
+ });
43
+ },
44
+
45
+ showMedalIcon: function(val) {
46
+ return __imgPath + "image/medals/user/" + val + ".gif";
47
+ },
48
+ showMedalDesc: function(item) {
49
+ return item.medal_desc || medal_map[item.medal];
50
+ },
51
+ showTeamLogo: function(val) {
52
+ return getThumbnail(val, 96);
53
+ },
54
+ }
55
+ }
56
+ </script>
package/src/Resource.vue CHANGED
@@ -21,13 +21,13 @@
21
21
 
22
22
  <el-tabs class="m-database-tabs" v-model="type" type="card" @tab-click="changeType">
23
23
  <el-tab-pane label="Buff" name="buff">
24
- <span slot="label">
24
+ <span slot="label" class="u-tab-label">
25
25
  <img class="u-icon" svg-inline src="../assets/img/buff.svg" />
26
26
  <b>Buff</b>
27
27
  <em class="u-count">{{ stat.buff }}</em>
28
28
  </span>
29
- <div v-if="buff.length && done" class="m-resource-count">
30
- <i class="el-icon-s-data"></i> 共找到 <b>{{ buff.length }}</b> 条记录
29
+ <div v-if="total && done" class="m-resource-count">
30
+ <i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
31
31
  <div class="u-mode">
32
32
  插入模式:
33
33
  <el-radio-group v-model="buff_mode" size="mini" @change="changeMode">
@@ -55,13 +55,13 @@
55
55
  <el-alert v-if="!buff.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
56
56
  </el-tab-pane>
57
57
  <el-tab-pane label="技能" name="skill">
58
- <span slot="label">
58
+ <span slot="label" class="u-tab-label">
59
59
  <img class="u-icon" svg-inline src="../assets/img/skill.svg" />
60
60
  <b>技能</b>
61
61
  <em class="u-count">{{ stat.skill }}</em>
62
62
  </span>
63
- <div v-if="skill.length && done" class="m-resource-count">
64
- <i class="el-icon-s-data"></i> 共找到 <b>{{ skill.length }}</b> 条记录
63
+ <div v-if="total && done" class="m-resource-count">
64
+ <i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
65
65
  <div class="u-mode">
66
66
  插入模式:
67
67
  <el-radio-group v-model="skill_mode" size="mini" @change="changeMode">
@@ -88,13 +88,13 @@
88
88
  <el-alert v-if="!skill.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
89
89
  </el-tab-pane>
90
90
  <el-tab-pane label="物品" name="item">
91
- <span slot="label">
91
+ <span slot="label" class="u-tab-label">
92
92
  <img class="u-icon" svg-inline src="../assets/img/item.svg" />
93
93
  <b>物品</b>
94
94
  <em class="u-count">{{ stat.item }}</em>
95
95
  </span>
96
- <p v-if="item.length && done" class="m-resource-count">
97
- <i class="el-icon-s-data"></i> 共找到 <b>{{ item.length }}</b> 条记录
96
+ <p v-if="total && done" class="m-resource-count">
97
+ <i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
98
98
  </p>
99
99
  <ul class="m-resource-list" v-if="item.length">
100
100
  <el-popover popper-class="m-item-pop" :visible-arrow="false" trigger="hover" placement="left" v-for="(o, i) in item" :key="i">
@@ -114,13 +114,13 @@
114
114
  <el-alert v-if="!item.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
115
115
  </el-tab-pane>
116
116
  <el-tab-pane label="Npc" name="npc">
117
- <span slot="label">
117
+ <span slot="label" class="u-tab-label">
118
118
  <img class="u-icon" svg-inline src="../assets/img/npc/skull.svg" />
119
119
  <b>Npc</b>
120
120
  <em class="u-count">{{ stat.npc }}</em>
121
121
  </span>
122
- <p v-if="npc.length && done" class="m-resource-count">
123
- <i class="el-icon-s-data"></i> 共找到 <b>{{ npc.length }}</b> 条记录
122
+ <p v-if="total && done" class="m-resource-count">
123
+ <i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
124
124
  </p>
125
125
  <ul class="m-resource-list" v-if="npc.length">
126
126
  <li v-for="(o, i) in npc" :key="i" class="u-item" :class="{ on: o.isSelected }" @click="selectNpc(o, i)" ref="item">
@@ -143,7 +143,7 @@
143
143
  <el-alert v-if="!npc.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
144
144
  </el-tab-pane>
145
145
  <el-tab-pane label="图标" name="icon">
146
- <span slot="label">
146
+ <span slot="label" class="u-tab-label">
147
147
  <img class="u-icon" svg-inline src="../assets/img/icons.svg" />
148
148
  <b>图标</b>
149
149
  <em class="u-count">{{ stat.icon }}</em>
@@ -164,6 +164,48 @@
164
164
  </ul>
165
165
  <el-alert v-if="!icon.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
166
166
  </el-tab-pane>
167
+ <el-tab-pane label="魔盒用户" name="authors">
168
+ <span slot="label" class="u-tab-label">
169
+ <i class="el-icon-s-custom"></i>
170
+ <b>魔盒用户</b>
171
+ </span>
172
+ <p v-if="total && done" class="m-resource-count">
173
+ <i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
174
+ </p>
175
+ <ul class="m-resource-list">
176
+ <li v-for="(o, i) in authors" class="u-item" :key="i" :class="{ on: !!o.isSelected }" @click="selectAuthor(o, i)" ref="author">
177
+ <span class="u-id">ID:{{ o.ID }}</span>
178
+ <img class="u-pic" :title="'AuthorID:' + o.display_name" :src="userAvatar(o.user_avatar)" />
179
+ <span class="u-primary">
180
+ <span class="u-name">
181
+ {{ o.display_name }}
182
+ </span>
183
+ </span>
184
+ </li>
185
+ </ul>
186
+ <el-alert v-if="!authors.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
187
+ </el-tab-pane>
188
+ <el-tab-pane label="表情" name="emotions">
189
+ <span slot="label" class="u-tab-label">
190
+ <i class="el-icon-sugar"></i>
191
+ <b>表情</b>
192
+ </span>
193
+ <p v-if="total && done" class="m-resource-count">
194
+ <i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
195
+ </p>
196
+ <ul class="m-resource-iconlist">
197
+ <li v-for="(o, i) in emotions" class="u-item" :key="i" :class="{ on: !!o.isSelected }" @click="selectEmotion(o)" ref="emotion">
198
+ <!-- <el-tooltip
199
+ effect="dark"
200
+ :content="o.Name || query"
201
+ placement="top"
202
+ >-->
203
+ <img class="e-jx3-emotion" :src="userAvatar(o.url)" :alt="query" />
204
+ <!-- </el-tooltip> -->
205
+ </li>
206
+ </ul>
207
+ <el-alert v-if="!emotions.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
208
+ </el-tab-pane>
167
209
  </el-tabs>
168
210
 
169
211
  <template v-if="multipage">
@@ -198,9 +240,10 @@
198
240
 
199
241
  <script>
200
242
  import { loadResource, loadStat, getIcons } from "../service/database";
243
+ import { loadAuthors, loadEmotions } from "../service/cms";
201
244
  import { __ossRoot, __iconPath, __Root, __OriginRoot } from "@jx3box/jx3box-common/data/jx3box.json";
202
245
  import detach_types from "../assets/data/detach_type.json";
203
- import { iconLink,getLink } from "@jx3box/jx3box-common/js/utils";
246
+ import { iconLink, getLink, showAvatar } from "@jx3box/jx3box-common/js/utils";
204
247
  import Item from './Item.vue';
205
248
  export default {
206
249
  name: "Resource",
@@ -225,6 +268,8 @@ export default {
225
268
  item: [],
226
269
  icon: [],
227
270
  npc: [],
271
+ authors: [],
272
+ emotions: [],
228
273
 
229
274
  stat: {
230
275
  skill: 0,
@@ -284,6 +329,7 @@ export default {
284
329
  if (!this.query) return;
285
330
 
286
331
  this.loading = true;
332
+ this.per = 10;
287
333
  this.done = false;
288
334
  let query = this.query;
289
335
  let params = {
@@ -316,8 +362,45 @@ export default {
316
362
  this.loading = false;
317
363
  }
318
364
 
319
- // 非图标
365
+ } else if (this.type === 'authors') {
366
+ params = {
367
+ ...params,
368
+ name: query,
369
+ }
370
+ loadAuthors(params)
371
+ .then((res) => {
372
+ if (!append) this.authors = [];
373
+ let list = this.transformData(res.data.data.list)
374
+ this.authors = this.authors.concat(list);
375
+ this.pages = res.data.data.pages;
376
+ this.total = res.data.data.total;
377
+ })
378
+ .finally(() => {
379
+ this.done = true;
380
+ this.loading = false;
381
+ });
382
+
383
+ } else if (this.type === 'emotions') {
384
+ this.per = 30;
385
+ params = {
386
+ per: this.per,
387
+ page: page,
388
+ search: query,
389
+ }
390
+ loadEmotions(params)
391
+ .then((res) => {
392
+ if (!append) this.emotions = [];
393
+ let list = this.transformData(res.data.data.list)
394
+ this.emotions = this.emotions.concat(list);
395
+ this.pages = res.data.data.pages;
396
+ this.total = res.data.data.total;
397
+ })
398
+ .finally(() => {
399
+ this.done = true;
400
+ this.loading = false;
401
+ });
320
402
  } else {
403
+ // 非图标
321
404
  loadResource(this.type, query, params)
322
405
  .then((data) => {
323
406
  if (!append) this[this.type] = [];
@@ -327,7 +410,7 @@ export default {
327
410
  this.pages = data.last_page;
328
411
  this.total = data.total;
329
412
  } else {
330
- list = this.transformData(data.list);
413
+ list = this.transformData(data.list || []);
331
414
  this.pages = data.pages;
332
415
  this.total = data.total;
333
416
  }
@@ -407,7 +490,17 @@ export default {
407
490
  selectNpc: function (o, i){
408
491
  this.resetItems()
409
492
  o.isSelected = true
410
- this.html = `<a data-type="npc" class="e-jx3-npc w-jx3-element" data-mode="" data-id="${o.ID}" data-client="${this.client}" target="_blank" href="${this.getDbLink("npc", this.client, o.ID, '')}">[${o.Name}]</a>`
493
+ this.html = `<a data-type="npc" class="e-jx3-npc w-jx3-element" data-mode="" data-id="${o.ID}" data-client="${this.client}" target="_blank" href="${this.getDbLink("npc", this.client, o.ID, '')}">${o.Name}]</a>`
494
+ },
495
+ selectAuthor: function (o, i){
496
+ this.resetItems();
497
+ o.isSelected = true;
498
+ this.html = `<a data-type="author" class="e-jx3-author w-jx3-element" data-mode="" data-id="${o.ID}" target="_blank" href="/author/${o.ID}">【${o.display_name}】</a>`
499
+ },
500
+ selectEmotion: function (o){
501
+ this.resetItems();
502
+ o.isSelected = true;
503
+ this.html = `<img class="e-jx3-emotion" style="width:80px;" src="${o.url}" alt="${o.id}"/>`
411
504
  },
412
505
  resetItems: function() {
413
506
  let data = this[this.type];
@@ -430,6 +523,9 @@ export default {
430
523
  let domain = this.client == "origin" ? __OriginRoot : __Root;
431
524
  return domain + getLink(type,id).slice(1)
432
525
  },
526
+ userAvatar: function(url) {
527
+ return showAvatar(url);
528
+ },
433
529
 
434
530
  // 杂项
435
531
  // ==============================
@@ -0,0 +1,43 @@
1
+ <template>
2
+ <div class="m-medal">
3
+ <a :href="medalLink(item)" target="_blank" class="u-medal" v-for="item in medals" :key="item.id" :title="item.medal_desc">
4
+ <img class="u-medal-img" :src="showIcon(item.medal)">
5
+ </a>
6
+ </div>
7
+ </template>
8
+
9
+ <script>
10
+ import { getMedalLink } from '@jx3box/jx3box-common/js/utils'
11
+ export default {
12
+ name: 'author_medal',
13
+ props: {
14
+ medals: {
15
+ type: Array,
16
+ default: () => [], // [{ rank_id, medal_desc, medal }]
17
+ },
18
+ showIcon: {
19
+ type: Function,
20
+ default: () => true,
21
+ }
22
+ },
23
+ methods: {
24
+
25
+ medalLink({ rank_id, medal_type = 'rank' }) {
26
+ return getMedalLink(rank_id, medal_type)
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+
32
+ <style lang="less">
33
+ .m-medal {
34
+ display: flex;
35
+ .u-medal {
36
+ cursor: pointer;
37
+ .u-medal-img {
38
+ width: 20px;
39
+ height: 20px;
40
+ }
41
+ }
42
+ }
43
+ </style>