@jx3box/jx3box-editor 2.1.9 → 2.2.1
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/assets/css/combo.less +97 -1
- package/assets/css/tinymce/combo.less +10 -0
- package/assets/img/skillset.png +0 -0
- package/assets/js/combo.js +4 -4
- package/package.json +5 -5
- package/service/node.js +42 -0
- package/src/components/Combo.vue +150 -117
- package/src/components/SkillMartial.vue +186 -0
package/assets/css/combo.less
CHANGED
|
@@ -18,6 +18,18 @@
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
// .c-combo-content {
|
|
22
|
+
// .flex;
|
|
23
|
+
// }
|
|
24
|
+
|
|
25
|
+
// .c-combo-content__left {
|
|
26
|
+
// width: 60%;
|
|
27
|
+
// }
|
|
28
|
+
|
|
29
|
+
// .c-combo-content__right {
|
|
30
|
+
// width: 40%;
|
|
31
|
+
// }
|
|
32
|
+
|
|
21
33
|
.m-resource-combo {
|
|
22
34
|
.m-combo-list {
|
|
23
35
|
max-height: 230px;
|
|
@@ -213,7 +225,7 @@
|
|
|
213
225
|
}
|
|
214
226
|
// 已选数据
|
|
215
227
|
.m-selected-skills {
|
|
216
|
-
height:
|
|
228
|
+
height: 80px;
|
|
217
229
|
border: 1px solid #ddd;
|
|
218
230
|
padding: 10px;
|
|
219
231
|
.scrollbar();
|
|
@@ -293,6 +305,16 @@
|
|
|
293
305
|
width: 48px;
|
|
294
306
|
}
|
|
295
307
|
|
|
308
|
+
.u-note {
|
|
309
|
+
.fz(12px);
|
|
310
|
+
color: #aaa;
|
|
311
|
+
.db;
|
|
312
|
+
text-align: center;
|
|
313
|
+
overflow: hidden;
|
|
314
|
+
white-space: nowrap;
|
|
315
|
+
width: 48px;
|
|
316
|
+
}
|
|
317
|
+
|
|
296
318
|
.u-mask {
|
|
297
319
|
.pa;
|
|
298
320
|
.lt(0);
|
|
@@ -309,3 +331,77 @@
|
|
|
309
331
|
}
|
|
310
332
|
}
|
|
311
333
|
}
|
|
334
|
+
|
|
335
|
+
.m-pvp-martial {
|
|
336
|
+
display: flex;
|
|
337
|
+
background: #1a2b22;
|
|
338
|
+
padding: 20px;
|
|
339
|
+
border-radius: 8px;
|
|
340
|
+
flex-direction: column;
|
|
341
|
+
.m-martial-skills {
|
|
342
|
+
flex: 1;
|
|
343
|
+
}
|
|
344
|
+
.m-martial-skill {
|
|
345
|
+
.u-title {
|
|
346
|
+
// 竖体显示
|
|
347
|
+
writing-mode: tb-rl;
|
|
348
|
+
letter-spacing: 1px;
|
|
349
|
+
display: flex;
|
|
350
|
+
align-items: center;
|
|
351
|
+
justify-content: center;
|
|
352
|
+
}
|
|
353
|
+
.u-title-name {
|
|
354
|
+
z-index: 1;
|
|
355
|
+
color: #fff;
|
|
356
|
+
font-size: 12px;
|
|
357
|
+
}
|
|
358
|
+
.u-title-img {
|
|
359
|
+
width: 24px;
|
|
360
|
+
height: 71px;
|
|
361
|
+
position: absolute;
|
|
362
|
+
}
|
|
363
|
+
margin-bottom: 20px;
|
|
364
|
+
display: flex;
|
|
365
|
+
align-items: center;
|
|
366
|
+
gap: 20px;
|
|
367
|
+
// border: 1px solid rgb(40,107,113);
|
|
368
|
+
padding: 4px 0;
|
|
369
|
+
position: relative;
|
|
370
|
+
|
|
371
|
+
.u-name {
|
|
372
|
+
display: block;
|
|
373
|
+
color: #fff;
|
|
374
|
+
font-size: 12px;
|
|
375
|
+
text-align: center;
|
|
376
|
+
overflow: hidden;
|
|
377
|
+
white-space: nowrap;
|
|
378
|
+
width: 48px;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
.m-skills {
|
|
382
|
+
display: flex;
|
|
383
|
+
gap: 20px;
|
|
384
|
+
flex-wrap: wrap;
|
|
385
|
+
align-items: center;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.m-skill {
|
|
389
|
+
position: relative;
|
|
390
|
+
display: flex;
|
|
391
|
+
justify-content: center;
|
|
392
|
+
cursor: pointer;
|
|
393
|
+
|
|
394
|
+
.u-skill-icon {
|
|
395
|
+
box-sizing: border-box;
|
|
396
|
+
border: 2px solid #1a2b22;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.u-skill.active {
|
|
400
|
+
.u-name {
|
|
401
|
+
color: #a5ffd0;
|
|
402
|
+
text-shadow: 0 0 3px #2ffbb2;
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
}
|
|
@@ -56,6 +56,16 @@
|
|
|
56
56
|
white-space: pre-wrap;
|
|
57
57
|
text-align: center;
|
|
58
58
|
}
|
|
59
|
+
|
|
60
|
+
.u-skill-note {
|
|
61
|
+
.fz(12px,1);
|
|
62
|
+
width: 56px;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
text-overflow: clip;
|
|
65
|
+
white-space: pre-wrap;
|
|
66
|
+
text-align: center;
|
|
67
|
+
margin-bottom: 5px;
|
|
68
|
+
}
|
|
59
69
|
}
|
|
60
70
|
}
|
|
61
71
|
.c-article-editor {
|
|
Binary file
|
package/assets/js/combo.js
CHANGED
|
@@ -9,13 +9,12 @@ function renderCombo(selector = ".e-skill-combo") {
|
|
|
9
9
|
|
|
10
10
|
let children = $(this).children();
|
|
11
11
|
|
|
12
|
-
console.log(children)
|
|
13
|
-
|
|
14
12
|
children.each(function (i, ele) {
|
|
15
13
|
let url = $(this).text();
|
|
16
14
|
|
|
17
|
-
// extend = {gcd: 0}
|
|
18
|
-
const [id, name, icon, extend] = url.split(
|
|
15
|
+
// extend = {gcd: 0, note: "炖鸡"}
|
|
16
|
+
const [id, name, icon, extend] = url.split(/,(?![^{]*\})/);
|
|
17
|
+
|
|
19
18
|
// 去除左右花括号
|
|
20
19
|
|
|
21
20
|
const _extend = extend ? JSON.parse(extend) : null;
|
|
@@ -25,6 +24,7 @@ function renderCombo(selector = ".e-skill-combo") {
|
|
|
25
24
|
<span class="w-skill-combo-item">
|
|
26
25
|
<img class="u-skill-icon" src="${iconLink(icon)}" alt="${icon}" title="${name}" />
|
|
27
26
|
<span class="u-skill-name" title="${name}">${name}</span>
|
|
27
|
+
<span class="u-skill-note" title="${_extend && _extend.n}" style="color:${_extend&&_extend.c}">${_extend && _extend.n || ''}</span>
|
|
28
28
|
<i class="u-gcd-icon ${_extend && _extend.gcd == 0 ? 'is-show' : ''}" title="无GCD技能">
|
|
29
29
|
<i class="el-icon-time"></i>
|
|
30
30
|
</i>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jx3box/jx3box-editor",
|
|
3
|
-
"version": "2.1
|
|
3
|
+
"version": "2.2.1",
|
|
4
4
|
"description": "JX3BOX Article & Editor",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"last 2 versions"
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@jx3box/jx3box-common": "^
|
|
36
|
-
"@jx3box/jx3box-data": "^3.
|
|
37
|
-
"@jx3box/jx3box-emotion": "^1.
|
|
35
|
+
"@jx3box/jx3box-common": "^8.2.18",
|
|
36
|
+
"@jx3box/jx3box-data": "^3.5.8",
|
|
37
|
+
"@jx3box/jx3box-emotion": "^1.2.8",
|
|
38
38
|
"@jx3box/jx3box-macro": "^1.0.1",
|
|
39
|
-
"@jx3box/jx3box-talent": "^1.
|
|
39
|
+
"@jx3box/jx3box-talent": "^1.2.7",
|
|
40
40
|
"@jx3box/markdown": "^0.1.5",
|
|
41
41
|
"@tinymce/tinymce-vue": "^3.2.2",
|
|
42
42
|
"axios": "^0.19.2",
|
package/service/node.js
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { $node, axios } from "@jx3box/jx3box-common/js/https";
|
|
2
|
+
|
|
3
|
+
function getSkill(query, params) {
|
|
4
|
+
let condition = isNaN(query) ? "name" : "id";
|
|
5
|
+
return $node().get(`/skill/${condition}/${query}`, {
|
|
6
|
+
params: params,
|
|
7
|
+
}).then(res => {
|
|
8
|
+
return res.data;
|
|
9
|
+
}).catch((err) => {
|
|
10
|
+
console.log(err);
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function getSkillList(params) {
|
|
15
|
+
return $node().get(`/skill`, {
|
|
16
|
+
params: params,
|
|
17
|
+
})
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
|
|
21
|
+
|
|
22
|
+
const $oss = axios.create({
|
|
23
|
+
baseURL: JX3BOX.__dataPath,
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
function getSkills(params) {
|
|
27
|
+
return $node().get("/skills", {
|
|
28
|
+
params: params,
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
async function getTalents() {
|
|
33
|
+
let res = await $oss.get("talent/talents.json");
|
|
34
|
+
return res.data;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
async function getTalents2() {
|
|
38
|
+
let res = await $oss.get("talent2/talent2.json");
|
|
39
|
+
return res.data;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export { getSkill, getSkillList, getSkills, getTalents, getTalents2};
|
package/src/components/Combo.vue
CHANGED
|
@@ -1,96 +1,86 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="m-resource-combo">
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
</
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
2
|
+
<div class="c-combo m-resource-combo">
|
|
3
|
+
<el-tabs v-model="activeName" type="card" class="m-skill-tabs">
|
|
4
|
+
<el-tab-pane label="门派武学" name="special">
|
|
5
|
+
<template #label>
|
|
6
|
+
<div class="u-tab-label">
|
|
7
|
+
<i class="el-icon-s-order"></i>
|
|
8
|
+
<b>门派武学</b>
|
|
9
|
+
</div>
|
|
10
|
+
</template>
|
|
11
|
+
</el-tab-pane>
|
|
12
|
+
<el-tab-pane label="全部技能" name="all">
|
|
13
|
+
<template #label>
|
|
14
|
+
<div class="u-tab-label">
|
|
15
|
+
<i class="el-icon-menu"></i>
|
|
16
|
+
<b>全部技能</b>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
</el-tab-pane>
|
|
20
|
+
</el-tabs>
|
|
21
|
+
<div class="c-combo-content">
|
|
22
|
+
<div class="m-select-content">
|
|
23
|
+
<div v-show="activeName === 'all'">
|
|
24
|
+
<div v-if="total && done" class="m-resource-count">
|
|
25
|
+
<i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
|
|
26
|
+
</div>
|
|
27
|
+
<ul class="m-resource-list">
|
|
28
|
+
<li v-for="(o, i) in skill" class="u-item" :key="i" @click="selectSkill(o, i)" ref="skill">
|
|
29
|
+
<span class="u-id">ID:{{ o.SkillID }}</span>
|
|
30
|
+
<img class="u-pic" :title="'IconID:' + o.IconID" :src="iconURL(o.IconID)" />
|
|
31
|
+
<span class="u-primary">
|
|
32
|
+
<span class="u-name">
|
|
33
|
+
{{ o.Name }}
|
|
34
|
+
<em v-if="o.SkillName">({{ o.SkillName }})</em>
|
|
35
|
+
</span>
|
|
36
|
+
<span class="u-content">
|
|
37
|
+
{{ filterRaw(o.Desc) }}
|
|
38
|
+
</span>
|
|
39
|
+
</span>
|
|
40
|
+
</li>
|
|
41
|
+
</ul>
|
|
42
|
+
<el-alert v-if="!skill.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
|
|
38
43
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
:hide-on-single-page="true"
|
|
55
|
-
:page-size="per"
|
|
56
|
-
:total="total"
|
|
57
|
-
:current-page.sync="page"
|
|
58
|
-
@current-change="changePage"
|
|
59
|
-
></el-pagination>
|
|
60
|
-
</template>
|
|
44
|
+
<template v-if="multipage">
|
|
45
|
+
<!-- 下一页 -->
|
|
46
|
+
<el-button class="m-archive-more" :class="{ show: hasNextPage }" type="primary" icon="el-icon-arrow-down" @click="appendPage">加载更多</el-button>
|
|
47
|
+
<!-- 分页 -->
|
|
48
|
+
<el-pagination
|
|
49
|
+
class="m-archive-pages"
|
|
50
|
+
background
|
|
51
|
+
layout="total, prev, pager, next,jumper"
|
|
52
|
+
:hide-on-single-page="true"
|
|
53
|
+
:page-size="per"
|
|
54
|
+
:total="total"
|
|
55
|
+
:current-page.sync="page"
|
|
56
|
+
@current-change="changePage"
|
|
57
|
+
></el-pagination>
|
|
58
|
+
</template>
|
|
61
59
|
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
<div class="m-database-tip" v-show="isBlank">❤ 请输入搜索条件查询</div>
|
|
61
|
+
</div>
|
|
62
|
+
<skill-martial v-show="activeName === 'special'" :client="client" :subtype="subtype" @selectSkill="selectSkill"></skill-martial>
|
|
64
63
|
</div>
|
|
65
|
-
</div>
|
|
66
64
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
class="u-remove-icon"
|
|
87
|
-
title="移除"
|
|
88
|
-
@click="removeSelected(index)"
|
|
89
|
-
><i class="el-icon-close"></i
|
|
90
|
-
></i>
|
|
91
|
-
</div>
|
|
92
|
-
</li>
|
|
93
|
-
</ul>
|
|
65
|
+
<div class="c-combo-content__right">
|
|
66
|
+
<!-- 已选技能 -->
|
|
67
|
+
<el-divider>已选技能</el-divider>
|
|
68
|
+
<div class="m-selected-skills">
|
|
69
|
+
<ul class="m-skills-list">
|
|
70
|
+
<li v-for="(skill, index) in selected" :key="index" class="m-skill" @contextmenu.prevent="(event) => onContextmenu(event, skill)">
|
|
71
|
+
<div class="u-skill" v-if="skill && skill.IconID">
|
|
72
|
+
<img class="u-skill-icon" :src="iconURL(skill.IconID)" :alt="skill.IconID" />
|
|
73
|
+
<i class="u-gcd-icon" v-show="skill.WithoutGcd">
|
|
74
|
+
<i class="el-icon-time"></i>
|
|
75
|
+
</i>
|
|
76
|
+
<span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
|
|
77
|
+
<span class="u-note" :title="skill.n">{{ skill.n }}</span>
|
|
78
|
+
</div>
|
|
79
|
+
<i class="u-remove-icon" title="移除" @click="removeSelected(index)"><i class="el-icon-close"></i></i>
|
|
80
|
+
</li>
|
|
81
|
+
</ul>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
94
84
|
</div>
|
|
95
85
|
</div>
|
|
96
86
|
</template>
|
|
@@ -99,17 +89,30 @@
|
|
|
99
89
|
import Vue from "vue";
|
|
100
90
|
import { iconLink } from "@jx3box/jx3box-common/js/utils";
|
|
101
91
|
import { getSkill } from "../../service/resource";
|
|
92
|
+
import SkillMartial from "./SkillMartial.vue";
|
|
93
|
+
|
|
102
94
|
import Sortable from "sortablejs";
|
|
103
95
|
import { cloneDeep } from "lodash";
|
|
104
96
|
|
|
105
|
-
import LoadScript from
|
|
97
|
+
import LoadScript from "vue-plugin-load-script";
|
|
106
98
|
Vue.use(LoadScript);
|
|
107
99
|
|
|
108
|
-
import contextmenu from "vue-contextmenujs"
|
|
109
|
-
Vue.use(contextmenu)
|
|
100
|
+
import contextmenu from "vue-contextmenujs";
|
|
101
|
+
Vue.use(contextmenu);
|
|
110
102
|
export default {
|
|
111
|
-
name: "
|
|
103
|
+
name: "skillDialog",
|
|
104
|
+
components: {
|
|
105
|
+
SkillMartial,
|
|
106
|
+
},
|
|
112
107
|
props: {
|
|
108
|
+
modelValue: {
|
|
109
|
+
type: Boolean,
|
|
110
|
+
default: false,
|
|
111
|
+
},
|
|
112
|
+
subtype: {
|
|
113
|
+
type: String,
|
|
114
|
+
default: "通用",
|
|
115
|
+
},
|
|
113
116
|
query: {
|
|
114
117
|
type: String,
|
|
115
118
|
default: "",
|
|
@@ -123,27 +126,32 @@ export default {
|
|
|
123
126
|
default: false,
|
|
124
127
|
},
|
|
125
128
|
},
|
|
129
|
+
model: {
|
|
130
|
+
prop: "modelValue",
|
|
131
|
+
event: "update:modelValue",
|
|
132
|
+
},
|
|
126
133
|
data() {
|
|
127
134
|
return {
|
|
135
|
+
skill: [],
|
|
128
136
|
done: false,
|
|
129
137
|
per: 10,
|
|
130
138
|
page: 1,
|
|
131
139
|
total: 1,
|
|
132
140
|
pages: 1,
|
|
133
141
|
|
|
142
|
+
activeName: "special",
|
|
134
143
|
selected: [],
|
|
135
|
-
skill: [],
|
|
136
144
|
};
|
|
137
145
|
},
|
|
138
146
|
computed: {
|
|
147
|
+
hasNextPage: function () {
|
|
148
|
+
return this.total > 1 && this.page < this.pages;
|
|
149
|
+
},
|
|
139
150
|
multipage: function () {
|
|
140
151
|
return this.done && this.pages > 1;
|
|
141
152
|
},
|
|
142
153
|
isBlank: function () {
|
|
143
|
-
return !this.query && !this.skill
|
|
144
|
-
},
|
|
145
|
-
hasNextPage: function () {
|
|
146
|
-
return this.total > 1 && this.page < this.pages;
|
|
154
|
+
return !this.query && !this.skill["length"];
|
|
147
155
|
},
|
|
148
156
|
},
|
|
149
157
|
mounted() {
|
|
@@ -169,10 +177,7 @@ export default {
|
|
|
169
177
|
getSkill(query, params)
|
|
170
178
|
.then((data) => {
|
|
171
179
|
if (!append) this.skill = [];
|
|
172
|
-
const list = (data.list || [])
|
|
173
|
-
item.isSelected = false;
|
|
174
|
-
return item;
|
|
175
|
-
});
|
|
180
|
+
const list = this.transformData(data.list || []);
|
|
176
181
|
this.pages = data.pages;
|
|
177
182
|
this.total = data.total;
|
|
178
183
|
this.skill = this.skill.concat(list);
|
|
@@ -182,6 +187,20 @@ export default {
|
|
|
182
187
|
this.loading = false;
|
|
183
188
|
});
|
|
184
189
|
},
|
|
190
|
+
selectSkill: function (o) {
|
|
191
|
+
this.selected.push(o);
|
|
192
|
+
},
|
|
193
|
+
removeSelected: function (index) {
|
|
194
|
+
this.selected.splice(index, 1);
|
|
195
|
+
},
|
|
196
|
+
submit() {
|
|
197
|
+
this.$emit("submit", this.selected);
|
|
198
|
+
this.close();
|
|
199
|
+
this.selected = [];
|
|
200
|
+
},
|
|
201
|
+
close() {
|
|
202
|
+
this.$emit("update:modelValue", false);
|
|
203
|
+
},
|
|
185
204
|
iconURL: function (id) {
|
|
186
205
|
return iconLink(id, this.client);
|
|
187
206
|
},
|
|
@@ -198,11 +217,11 @@ export default {
|
|
|
198
217
|
changePage: function (i) {
|
|
199
218
|
this.getData(i);
|
|
200
219
|
},
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
220
|
+
transformData: function (data) {
|
|
221
|
+
data.forEach((item) => {
|
|
222
|
+
item.isSelected = false;
|
|
223
|
+
});
|
|
224
|
+
return data;
|
|
206
225
|
},
|
|
207
226
|
initSkillSort() {
|
|
208
227
|
const el = document.querySelector(`.m-selected-skills .m-skills-list`);
|
|
@@ -226,8 +245,22 @@ export default {
|
|
|
226
245
|
onClick: () => {
|
|
227
246
|
this.$set(skill, "WithoutGcd", !skill.WithoutGcd);
|
|
228
247
|
},
|
|
229
|
-
icon: !skill?.WithoutGcd ? "el-icon-check" : "el-icon-close"
|
|
248
|
+
icon: !skill?.WithoutGcd ? "el-icon-check" : "el-icon-close",
|
|
230
249
|
},
|
|
250
|
+
{
|
|
251
|
+
label: "备注",
|
|
252
|
+
onClick: () => {
|
|
253
|
+
this.$prompt("请输入备注", "备注", {
|
|
254
|
+
confirmButtonText: "确定",
|
|
255
|
+
cancelButtonText: "取消",
|
|
256
|
+
inputValue: skill?.n || "",
|
|
257
|
+
})
|
|
258
|
+
.then(({ value }) => {
|
|
259
|
+
this.$set(skill, "n", value);
|
|
260
|
+
})
|
|
261
|
+
.catch(() => {});
|
|
262
|
+
},
|
|
263
|
+
}
|
|
231
264
|
],
|
|
232
265
|
event,
|
|
233
266
|
customClass: "custom-class",
|
|
@@ -236,17 +269,17 @@ export default {
|
|
|
236
269
|
});
|
|
237
270
|
return false;
|
|
238
271
|
},
|
|
239
|
-
|
|
240
272
|
renderVal() {
|
|
241
|
-
const {selected} = this;
|
|
242
|
-
let skills_html =
|
|
243
|
-
selected.forEach(item => {
|
|
273
|
+
const { selected } = this;
|
|
274
|
+
let skills_html = "";
|
|
275
|
+
selected.forEach((item) => {
|
|
244
276
|
const obj = {
|
|
245
|
-
gcd: item.WithoutGcd ? 0: 1
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
277
|
+
gcd: item.WithoutGcd ? 0 : 1,
|
|
278
|
+
};
|
|
279
|
+
item.n && (obj.n = item.n);
|
|
280
|
+
skills_html += `<li class="w-skill-combo-item">${item.SkillID},${item.Name},${item.IconID},${JSON.stringify(obj)}</li>`;
|
|
281
|
+
});
|
|
282
|
+
const html = `<ul class="e-skill-combo w-skill-combo">${skills_html}</ul>`;
|
|
250
283
|
return html;
|
|
251
284
|
},
|
|
252
285
|
},
|
|
@@ -255,4 +288,4 @@ export default {
|
|
|
255
288
|
|
|
256
289
|
<style lang="less">
|
|
257
290
|
@import "../../assets/css/combo.less";
|
|
258
|
-
</style>
|
|
291
|
+
</style>
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="m-pvp-martial">
|
|
3
|
+
<div v-for="kungfu in kungfus" :key="kungfu" class="m-martial-skill">
|
|
4
|
+
<div class="u-title">
|
|
5
|
+
<span class="u-title-name">{{ showKungfuName(kungfu) }}</span>
|
|
6
|
+
<img src="../../assets/img/skillset.png" class="u-title-img" alt="" />
|
|
7
|
+
</div>
|
|
8
|
+
<div class="m-skills" v-if="kungfusSkills[kungfu]">
|
|
9
|
+
<div class="m-skill" v-for="(skill, index) in formatSkill(kungfusSkills[kungfu])" :key="index" @click="selectSkill(skill)">
|
|
10
|
+
<div class="u-skill" v-if="skill && skill.IconID">
|
|
11
|
+
<img
|
|
12
|
+
class="u-skill-icon"
|
|
13
|
+
:src="iconLink(skill.IconID)"
|
|
14
|
+
:alt="skill.IconID"
|
|
15
|
+
/>
|
|
16
|
+
<span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
<!-- 奇穴技能 -->
|
|
22
|
+
<div class="m-martial-skill" v-if="talentSkills && talentSkills.length">
|
|
23
|
+
<div class="u-title">
|
|
24
|
+
<span class="u-title-name">奇穴技能</span>
|
|
25
|
+
<img src="../../assets/img/skillset.png" class="u-title-img" alt="" />
|
|
26
|
+
</div>
|
|
27
|
+
<div class="m-skills">
|
|
28
|
+
<div class="m-skill" v-for="(skill, index) in talentSkills" :key="index" @click="selectSkill(skill)">
|
|
29
|
+
<div class="u-skill" v-if="skill && skill.IconID">
|
|
30
|
+
<img
|
|
31
|
+
class="u-skill-icon"
|
|
32
|
+
:src="iconLink(skill.IconID)"
|
|
33
|
+
:alt="skill.IconID"
|
|
34
|
+
/>
|
|
35
|
+
<span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<!-- 江湖轻功 -->
|
|
42
|
+
<div class="m-martial-skill">
|
|
43
|
+
<div class="u-title">
|
|
44
|
+
<span class="u-title-name">江湖轻功</span>
|
|
45
|
+
<img src="../../assets/img/skillset.png" class="u-title-img" alt="" />
|
|
46
|
+
</div>
|
|
47
|
+
<div class="m-skills">
|
|
48
|
+
<div class="m-skill" v-for="(skill, index) in commonSkills" :key="index" @click="selectSkill(skill)">
|
|
49
|
+
<div class="u-skill" v-if="skill && skill.IconID">
|
|
50
|
+
<img
|
|
51
|
+
class="u-skill-icon"
|
|
52
|
+
:src="iconLink(skill.IconID)"
|
|
53
|
+
:alt="skill.IconID"
|
|
54
|
+
/>
|
|
55
|
+
<span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</template>
|
|
62
|
+
|
|
63
|
+
<script>
|
|
64
|
+
import xfmap from "@jx3box/jx3box-data/data/xf/xf.json";
|
|
65
|
+
import { getSkills, getTalents } from "../../service/node";
|
|
66
|
+
import kungfumap_std from "@jx3box/jx3box-data/data/martial/kungfu_std.json";
|
|
67
|
+
import kungfumap_origin from "@jx3box/jx3box-data/data/martial/kungfu_origin.json";
|
|
68
|
+
import { flattenDeep, uniqBy } from "lodash";
|
|
69
|
+
import kungfus from "@jx3box/jx3box-data/data/martial/kungfuid.json";
|
|
70
|
+
import { iconLink } from "@jx3box/jx3box-common/js/utils";
|
|
71
|
+
export default {
|
|
72
|
+
name: "pvp_martial",
|
|
73
|
+
props: {
|
|
74
|
+
subtype: {
|
|
75
|
+
type: String,
|
|
76
|
+
default: "通用",
|
|
77
|
+
},
|
|
78
|
+
client: {
|
|
79
|
+
type: String,
|
|
80
|
+
default: "std",
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
emits: [],
|
|
84
|
+
data() {
|
|
85
|
+
return {
|
|
86
|
+
talents: [],
|
|
87
|
+
data: [],
|
|
88
|
+
loading: false,
|
|
89
|
+
};
|
|
90
|
+
},
|
|
91
|
+
computed: {
|
|
92
|
+
mountId() {
|
|
93
|
+
return xfmap[this.subtype]?.id;
|
|
94
|
+
},
|
|
95
|
+
skillIds() {
|
|
96
|
+
return flattenDeep(Object.values(this.kungfumap?.[this.mountId]?.["skills"]));
|
|
97
|
+
},
|
|
98
|
+
ids() {
|
|
99
|
+
return [...this.skillIds, ...this.talentSkillIds, ...this.commonIds].join(",");
|
|
100
|
+
},
|
|
101
|
+
kungfumap() {
|
|
102
|
+
return this.client == "origin" ? kungfumap_origin : kungfumap_std;
|
|
103
|
+
},
|
|
104
|
+
params() {
|
|
105
|
+
return {
|
|
106
|
+
ids: this.ids,
|
|
107
|
+
client: this.client,
|
|
108
|
+
};
|
|
109
|
+
},
|
|
110
|
+
// 奇穴id std
|
|
111
|
+
talentSkillIds() {
|
|
112
|
+
return flattenDeep(this.mountId && this.talents?.[this.mountId]) || [];
|
|
113
|
+
},
|
|
114
|
+
// 手动写死
|
|
115
|
+
commonIds() {
|
|
116
|
+
// 后撤、蹑云逐月、扶摇直上、凌霄揽胜、瑶台枕鹤、迎风回浪
|
|
117
|
+
return [9007, 9003, 9002, 9005, 9006, 9004];
|
|
118
|
+
},
|
|
119
|
+
// 门派技能数据
|
|
120
|
+
kungfusSkills: function () {
|
|
121
|
+
const obj = {};
|
|
122
|
+
Object.entries(this.kungfumap[this.mountId]["skills"]).forEach(([key, value]) => {
|
|
123
|
+
obj[key] = value.map((SkillID) => {
|
|
124
|
+
const currentSkill = this.data.find((d) => d.SkillID == SkillID);
|
|
125
|
+
return currentSkill;
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
return obj;
|
|
129
|
+
},
|
|
130
|
+
// 门派技能套路id
|
|
131
|
+
kungfus: function () {
|
|
132
|
+
return this.kungfumap[this.mountId]["kungfus"];
|
|
133
|
+
},
|
|
134
|
+
talentSkills() {
|
|
135
|
+
return this.talentSkillIds.map((SkillID) => {
|
|
136
|
+
const currentSkill = this.data.find((d) => d.SkillID == SkillID);
|
|
137
|
+
return currentSkill;
|
|
138
|
+
}).filter(item => item && item.IsPassiveSkill == 0);
|
|
139
|
+
},
|
|
140
|
+
commonSkills() {
|
|
141
|
+
return this.commonIds.map((SkillID) => {
|
|
142
|
+
const currentSkill = this.data.find((d) => d.SkillID == SkillID);
|
|
143
|
+
return currentSkill;
|
|
144
|
+
}).filter(Boolean);
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
async mounted() {
|
|
148
|
+
this.talents = await getTalents();
|
|
149
|
+
await this.loadSkills();
|
|
150
|
+
},
|
|
151
|
+
watch: {
|
|
152
|
+
mountId: {
|
|
153
|
+
handler() {
|
|
154
|
+
this.loadSkills();
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
methods: {
|
|
159
|
+
iconLink,
|
|
160
|
+
async loadSkills() {
|
|
161
|
+
this.loading = true;
|
|
162
|
+
return getSkills(this.params)
|
|
163
|
+
.then((res) => {
|
|
164
|
+
this.data = uniqBy(res.data, "Name");
|
|
165
|
+
})
|
|
166
|
+
.finally(() => {
|
|
167
|
+
this.loading = false;
|
|
168
|
+
});
|
|
169
|
+
},
|
|
170
|
+
// 技能套路名称
|
|
171
|
+
showKungfuName: function (val) {
|
|
172
|
+
return kungfus[val];
|
|
173
|
+
},
|
|
174
|
+
selectSkill(skill) {
|
|
175
|
+
this.$emit('selectSkill', skill);
|
|
176
|
+
},
|
|
177
|
+
formatSkill(arr) {
|
|
178
|
+
return arr.filter(item => item?.SkillID)
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
};
|
|
182
|
+
</script>
|
|
183
|
+
|
|
184
|
+
<style lang="less">
|
|
185
|
+
|
|
186
|
+
</style>
|