@jx3box/jx3box-editor 0.8.4 → 0.8.8
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/article.less +4 -1
- package/assets/css/module/buff.less +68 -0
- package/assets/css/module/item.less +0 -16
- package/assets/css/module/jx3_element.less +4 -0
- package/assets/css/module/skill.less +62 -0
- package/assets/css/resource.less +8 -0
- package/assets/data/weapon_type.json +20 -0
- package/assets/js/jx3_element.js +61 -0
- package/package.json +4 -4
- package/public/tinymce.html +2 -1
- package/readme.md +1 -1
- package/service/database.js +4 -4
- package/service/item.js +12 -15
- package/src/Article.vue +64 -19
- package/src/Buff.vue +68 -0
- package/src/Resource.vue +103 -24
- package/src/Skill.vue +68 -0
- package/src/Tinymce.vue +2 -2
- package/assets/css/module/buff_item.less +0 -62
- package/assets/css/module/buff_simple.less +0 -34
- package/assets/js/item.js +0 -41
- package/components/BuffItem.vue +0 -69
- package/src/BuffSimple.vue +0 -114
package/assets/css/article.less
CHANGED
|
@@ -22,4 +22,7 @@
|
|
|
22
22
|
@import 'module/nextpage.less';
|
|
23
23
|
@import 'module/plugin.less';
|
|
24
24
|
@import 'module/latex.less';
|
|
25
|
-
@import 'module/imgpreview.less';
|
|
25
|
+
@import 'module/imgpreview.less';
|
|
26
|
+
@import 'module/jx3_element.less';
|
|
27
|
+
@import 'module/buff.less';
|
|
28
|
+
@import 'module/skill.less';
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
.w-buff {
|
|
2
|
+
padding: 1px;
|
|
3
|
+
border: 1px solid #0f2222;
|
|
4
|
+
.w-buff-wrapper {
|
|
5
|
+
@max-width: 345px;
|
|
6
|
+
@min-width: 200px;
|
|
7
|
+
max-width: @max-width;
|
|
8
|
+
min-width: @min-width;
|
|
9
|
+
padding: 9px 10px 10px;
|
|
10
|
+
background-color: rgba(15, 34, 34, 0.88);
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
display: flex;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.w-buff-icon {
|
|
16
|
+
.size(48px);
|
|
17
|
+
.mr(10px);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.w-buff-content {
|
|
21
|
+
font-weight: normal;
|
|
22
|
+
flex-grow: 1;
|
|
23
|
+
text-shadow: 1px 1px 1px #0f2222;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.w-buff-name {
|
|
27
|
+
color: #ff0;
|
|
28
|
+
.db;
|
|
29
|
+
.fz(13px);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.w-buff-desc {
|
|
33
|
+
color: #ffffff;
|
|
34
|
+
letter-spacing: 0.5px;
|
|
35
|
+
.mb(10px);
|
|
36
|
+
.fz(12px, 20px);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.w-buff-meta {
|
|
40
|
+
.db;
|
|
41
|
+
.fz(12px, 20px);
|
|
42
|
+
color: #f00;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.c-article .e-jx3-buff {
|
|
47
|
+
// img {
|
|
48
|
+
// border: none;
|
|
49
|
+
// margin: 0 5px 0 0;
|
|
50
|
+
// width: 36px;
|
|
51
|
+
// vertical-align: middle;
|
|
52
|
+
// }
|
|
53
|
+
// span {
|
|
54
|
+
// font-size: 14px;
|
|
55
|
+
// line-height: 36px;
|
|
56
|
+
// }
|
|
57
|
+
|
|
58
|
+
&.isBuff {
|
|
59
|
+
color: #37a900;
|
|
60
|
+
}
|
|
61
|
+
&.isDebuff {
|
|
62
|
+
color: #900;
|
|
63
|
+
}
|
|
64
|
+
text-decoration: underline;
|
|
65
|
+
&:hover {
|
|
66
|
+
box-shadow: none !important;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -225,19 +225,3 @@
|
|
|
225
225
|
}
|
|
226
226
|
}
|
|
227
227
|
|
|
228
|
-
// .c-item-popup {
|
|
229
|
-
// position: fixed;
|
|
230
|
-
// .z(99999);
|
|
231
|
-
// }
|
|
232
|
-
|
|
233
|
-
// .c-item-popover {
|
|
234
|
-
// padding: 0;
|
|
235
|
-
// background-color: transparent;
|
|
236
|
-
// box-shadow: none;
|
|
237
|
-
// transform: translateY(-8px);
|
|
238
|
-
// }
|
|
239
|
-
|
|
240
|
-
.c-item-pop{
|
|
241
|
-
position: fixed;
|
|
242
|
-
.z(2000);
|
|
243
|
-
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
.w-skill {
|
|
2
|
+
padding: 1px;
|
|
3
|
+
border: 1px solid #0f2222;
|
|
4
|
+
.w-skill-wrapper {
|
|
5
|
+
@max-width: 345px;
|
|
6
|
+
@min-width: 200px;
|
|
7
|
+
max-width: @max-width;
|
|
8
|
+
min-width: @min-width;
|
|
9
|
+
padding: 9px 10px 10px;
|
|
10
|
+
background-color: rgba(15, 34, 34, 0.88);
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
display: flex;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.w-skill-icon{
|
|
16
|
+
.size(48px);
|
|
17
|
+
.mr(10px);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.w-skill-content{
|
|
21
|
+
font-weight: normal;
|
|
22
|
+
flex-grow: 1;
|
|
23
|
+
text-shadow: 1px 1px 1px #0f2222;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.w-skill-name {
|
|
27
|
+
color: #ff0;
|
|
28
|
+
.db;
|
|
29
|
+
.fz(13px);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.w-skill-desc {
|
|
33
|
+
color: #ffffff;
|
|
34
|
+
letter-spacing:0.5px;
|
|
35
|
+
.mb(10px);
|
|
36
|
+
.fz(12px,20px);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.w-skill-meta{
|
|
40
|
+
.db;.fz(12px,20px);
|
|
41
|
+
color:#f00;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.c-article .e-jx3-skill {
|
|
46
|
+
|
|
47
|
+
// img {
|
|
48
|
+
// border: none;
|
|
49
|
+
// margin: 0 5px 0 0;
|
|
50
|
+
// width: 36px;
|
|
51
|
+
// vertical-align: middle;
|
|
52
|
+
// }
|
|
53
|
+
// span {
|
|
54
|
+
// font-size: 14px;
|
|
55
|
+
// line-height: 36px;
|
|
56
|
+
// }
|
|
57
|
+
|
|
58
|
+
text-decoration: underline;
|
|
59
|
+
&:hover{
|
|
60
|
+
box-shadow: none !important;
|
|
61
|
+
}
|
|
62
|
+
}
|
package/assets/css/resource.less
CHANGED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"0": "棍",
|
|
3
|
+
"1": "长兵",
|
|
4
|
+
"2": "短兵",
|
|
5
|
+
"4": "双兵",
|
|
6
|
+
"5": "笔",
|
|
7
|
+
"6": "投掷",
|
|
8
|
+
"7": "弓弦",
|
|
9
|
+
"9": "重兵",
|
|
10
|
+
"10": "笛",
|
|
11
|
+
"11": "千机匣",
|
|
12
|
+
"12": "弯刀",
|
|
13
|
+
"13": "短棒",
|
|
14
|
+
"14": "刀盾",
|
|
15
|
+
"15": "琴",
|
|
16
|
+
"16": "傲霜刀",
|
|
17
|
+
"17": "伞",
|
|
18
|
+
"18": "链刃",
|
|
19
|
+
"19": "魂灯"
|
|
20
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import $ from "jquery";
|
|
2
|
+
|
|
3
|
+
function renderItem(vm, selector = ".w-jx3-element") {
|
|
4
|
+
|
|
5
|
+
let outer, inner;
|
|
6
|
+
const pop_class = '.w-jx3-element-pop'
|
|
7
|
+
|
|
8
|
+
// 触发时
|
|
9
|
+
$(selector).on("mouseenter", function(e) {
|
|
10
|
+
clearTimeout(outer);
|
|
11
|
+
|
|
12
|
+
// 获取元素数据
|
|
13
|
+
let type = $(e.target).attr("data-type");
|
|
14
|
+
if(type=='item'){
|
|
15
|
+
vm.item.id = $(e.target).attr("data-id");
|
|
16
|
+
vm.item.client = $(e.target).attr("data-client") == 'origin' ? 2 : 1;
|
|
17
|
+
}else{
|
|
18
|
+
vm[type].client = $(e.target).attr("data-client");
|
|
19
|
+
vm[type].id = $(e.target).attr("data-id");
|
|
20
|
+
vm[type].level = $(e.target).attr("data-level");
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// 显示浮层
|
|
24
|
+
$(pop_class).fadeIn();
|
|
25
|
+
vm.jx3_element.type = type
|
|
26
|
+
|
|
27
|
+
// 计算浮层位置
|
|
28
|
+
let self_height = $(pop_class).height();
|
|
29
|
+
let win_height = window.innerHeight;
|
|
30
|
+
let current_y = e.clientY;
|
|
31
|
+
let will_stay_y = e.clientY + 10;
|
|
32
|
+
|
|
33
|
+
if (self_height && win_height - current_y < self_height) {
|
|
34
|
+
will_stay_y =
|
|
35
|
+
current_y - (self_height - (win_height - current_y)) - 100;
|
|
36
|
+
}
|
|
37
|
+
vm.jx3_element.style.left = e.clientX + 10 + "px";
|
|
38
|
+
vm.jx3_element.style.top = will_stay_y + "px";
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
// 移除时
|
|
42
|
+
$(selector).on("mouseleave", function(e) {
|
|
43
|
+
outer = setTimeout(() => {
|
|
44
|
+
$(pop_class).fadeOut();
|
|
45
|
+
}, 380);
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
// POP内停留
|
|
49
|
+
$(pop_class).on("mouseenter", function(e) {
|
|
50
|
+
clearTimeout(outer);
|
|
51
|
+
$(pop_class).fadeIn();
|
|
52
|
+
});
|
|
53
|
+
$(pop_class).on("mouseleave", function(e) {
|
|
54
|
+
clearTimeout(inner);
|
|
55
|
+
inner = setTimeout(() => {
|
|
56
|
+
$(pop_class).fadeOut();
|
|
57
|
+
}, 280);
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export default renderItem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jx3box/jx3box-editor",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.8",
|
|
4
4
|
"description": "JX3BOX Article & Editor",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
"last 2 versions"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@jx3box/jx3box-common": "^6.
|
|
34
|
-
"@jx3box/jx3box-data": "^1.
|
|
33
|
+
"@jx3box/jx3box-common": "^6.7.0",
|
|
34
|
+
"@jx3box/jx3box-data": "^1.7.4",
|
|
35
35
|
"@jx3box/jx3box-emotion": "^1.0.8",
|
|
36
36
|
"@jx3box/jx3box-macro": "^1.0.1",
|
|
37
|
-
"@jx3box/jx3box-talent": "^1.1.
|
|
37
|
+
"@jx3box/jx3box-talent": "^1.1.2",
|
|
38
38
|
"@tinymce/tinymce-vue": "^3.2.2",
|
|
39
39
|
"axios": "^0.19.2",
|
|
40
40
|
"core-js": "^3.6.5",
|
package/public/tinymce.html
CHANGED
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
<meta name="renderer" content="webkit" />
|
|
8
8
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
9
9
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
|
10
|
-
<script src="https://oss.jx3box.com/static/tinymce/tinymce.min.js?v=0.0
|
|
10
|
+
<script src="https://oss.jx3box.com/static/tinymce/tinymce.min.js?v=0.1.0"></script>
|
|
11
|
+
<!-- TODO: -->
|
|
11
12
|
<!-- <script src="http://localhost:5000/tinymce.min.js"></script> -->
|
|
12
13
|
</head>
|
|
13
14
|
<body>
|
package/readme.md
CHANGED
|
@@ -88,7 +88,7 @@ import Tinymce from "@jx3box/jx3box-editor/src/Tinymce.vue";
|
|
|
88
88
|
headers.set("Authorization", "Basic " + btoa(username + ":" + password));
|
|
89
89
|
|
|
90
90
|
// 1.异步加载设置数据，将420改成正确的文章ID
|
|
91
|
-
fetch("https://
|
|
91
|
+
fetch("https://cms.jx3box.com/api/cms/post/420", {
|
|
92
92
|
method: "GET",
|
|
93
93
|
headers: headers,
|
|
94
94
|
credentials: "include",
|
package/service/database.js
CHANGED
|
@@ -76,8 +76,8 @@ function getIcons(query, params) {
|
|
|
76
76
|
});
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
function getBuff(
|
|
80
|
-
return $node().get("/buff/id" + id, {
|
|
79
|
+
function getBuff(client = "std", id, level) {
|
|
80
|
+
return $node().get("/buff/id/" + id, {
|
|
81
81
|
params: {
|
|
82
82
|
client: client,
|
|
83
83
|
level: level,
|
|
@@ -85,8 +85,8 @@ function getBuff(id, client = "std", level) {
|
|
|
85
85
|
});
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
function getSkill(
|
|
89
|
-
return $node().get("/skill/id" + id, {
|
|
88
|
+
function getSkill(client = "std", id, level) {
|
|
89
|
+
return $node().get("/skill/id/" + id, {
|
|
90
90
|
params: {
|
|
91
91
|
client: client,
|
|
92
92
|
level: level,
|
package/service/item.js
CHANGED
|
@@ -1,27 +1,24 @@
|
|
|
1
|
-
import $
|
|
2
|
-
import {__helperUrl} from "@jx3box/jx3box-common/data/jx3box.json";
|
|
3
|
-
import {jx3ClientType} from "@jx3box/jx3box-common/js/utils";
|
|
1
|
+
import {$helper} from "@jx3box/jx3box-common/js/https";
|
|
4
2
|
|
|
5
3
|
// 获取物品
|
|
6
4
|
function get_item(item_id, jx3_client_type = null) {
|
|
7
5
|
if (!item_id) return;
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
url:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
7
|
+
let options = {
|
|
8
|
+
url: `api/item/${item_id}`,
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
if (jx3_client_type !== null) {
|
|
12
|
+
_.set(options, 'headers.JX3-Client-Type', jx3_client_type);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
return $helper()(options);
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
// 获取清单
|
|
20
19
|
function get_plan(plan_id) {
|
|
21
|
-
return $
|
|
22
|
-
url:
|
|
23
|
-
headers: {Accept: "application/prs.helper.v2+json"},
|
|
24
|
-
withCredentials: true,
|
|
20
|
+
return $helper()({
|
|
21
|
+
url: `api/item_plan/${plan_id}`,
|
|
25
22
|
});
|
|
26
23
|
}
|
|
27
24
|
|
package/src/Article.vue
CHANGED
|
@@ -35,8 +35,24 @@
|
|
|
35
35
|
layout="total, prev, pager, next, jumper"
|
|
36
36
|
:total="total"
|
|
37
37
|
></el-pagination>
|
|
38
|
-
<div class="
|
|
39
|
-
<jx3-item
|
|
38
|
+
<div class="w-jx3-element-pop" :style="jx3_element.style">
|
|
39
|
+
<jx3-item
|
|
40
|
+
:item_id="item.id"
|
|
41
|
+
:jx3ClientType="item.client"
|
|
42
|
+
v-show="jx3_element.type == 'item'"
|
|
43
|
+
/>
|
|
44
|
+
<jx3-buff
|
|
45
|
+
:client="buff.client"
|
|
46
|
+
:id="buff.id"
|
|
47
|
+
:level="buff.level"
|
|
48
|
+
v-show="jx3_element.type == 'buff'"
|
|
49
|
+
/>
|
|
50
|
+
<jx3-skill
|
|
51
|
+
:client="skill.client"
|
|
52
|
+
:id="skill.id"
|
|
53
|
+
:level="skill.level"
|
|
54
|
+
v-show="jx3_element.type == 'skill'"
|
|
55
|
+
/>
|
|
40
56
|
</div>
|
|
41
57
|
<!-- <gallery :images="images" :index="gallery_index" @close="index = null"></gallery> -->
|
|
42
58
|
</div>
|
|
@@ -45,15 +61,16 @@
|
|
|
45
61
|
<script>
|
|
46
62
|
import { Pagination, Button, Popover } from "element-ui";
|
|
47
63
|
import "@jx3box/jx3box-common/css/element.css";
|
|
64
|
+
|
|
48
65
|
// 语法高亮
|
|
49
66
|
import Prism from "prismjs";
|
|
67
|
+
|
|
50
68
|
// 相册
|
|
51
69
|
// import gallery from "vue-gallery-slideshow";
|
|
52
|
-
import Vue from
|
|
53
|
-
import hevueImgPreview from
|
|
54
|
-
Vue.use(hevueImgPreview)
|
|
55
|
-
|
|
56
|
-
import Item from "./Item";
|
|
70
|
+
import Vue from "vue";
|
|
71
|
+
import hevueImgPreview from "hevue-img-preview";
|
|
72
|
+
Vue.use(hevueImgPreview);
|
|
73
|
+
|
|
57
74
|
// XSS
|
|
58
75
|
import execFilterXSS from "../assets/js/script";
|
|
59
76
|
// const execFilterXSS = require("xss");
|
|
@@ -74,9 +91,14 @@ import renderMacro from "../assets/js/macro";
|
|
|
74
91
|
import renderTalent from "../assets/js/qixue";
|
|
75
92
|
import renderTalent2 from "../assets/js/talent2";
|
|
76
93
|
import renderKatex from "../assets/js/katex";
|
|
77
|
-
import renderItem from "../assets/js/item";
|
|
78
94
|
// import renderGallery from "../assets/js/gallery";
|
|
79
|
-
import renderImgPreview from "../assets/js/renderImgPreview"
|
|
95
|
+
import renderImgPreview from "../assets/js/renderImgPreview";
|
|
96
|
+
|
|
97
|
+
// 剑三
|
|
98
|
+
import Item from "./Item";
|
|
99
|
+
import Buff from "./Buff";
|
|
100
|
+
import Skill from "./Skill";
|
|
101
|
+
import renderJx3Element from "../assets/js/jx3_element";
|
|
80
102
|
|
|
81
103
|
export default {
|
|
82
104
|
name: "Article",
|
|
@@ -90,20 +112,41 @@ export default {
|
|
|
90
112
|
},
|
|
91
113
|
data: function () {
|
|
92
114
|
return {
|
|
115
|
+
// 作品
|
|
93
116
|
all: false,
|
|
94
117
|
page: 1,
|
|
95
118
|
data: [],
|
|
96
119
|
mode: "",
|
|
97
|
-
|
|
98
|
-
item_id: "",
|
|
99
|
-
item_popover_style: {
|
|
100
|
-
left: 0,
|
|
101
|
-
top: 0,
|
|
102
|
-
},
|
|
103
|
-
item_client : 1,
|
|
120
|
+
|
|
104
121
|
// 画廊
|
|
105
122
|
gallery_index: null,
|
|
106
123
|
images: [],
|
|
124
|
+
|
|
125
|
+
// 物品
|
|
126
|
+
item: {
|
|
127
|
+
id: "",
|
|
128
|
+
client: 1,
|
|
129
|
+
},
|
|
130
|
+
// BUFF
|
|
131
|
+
buff: {
|
|
132
|
+
client: "std",
|
|
133
|
+
id: "",
|
|
134
|
+
level: "",
|
|
135
|
+
},
|
|
136
|
+
// SKILL
|
|
137
|
+
skill: {
|
|
138
|
+
client: "std",
|
|
139
|
+
id: "",
|
|
140
|
+
level: "",
|
|
141
|
+
},
|
|
142
|
+
jx3_element: {
|
|
143
|
+
style: {
|
|
144
|
+
top: 0,
|
|
145
|
+
left: 0,
|
|
146
|
+
display: "none",
|
|
147
|
+
},
|
|
148
|
+
type: "",
|
|
149
|
+
},
|
|
107
150
|
};
|
|
108
151
|
},
|
|
109
152
|
computed: {
|
|
@@ -150,7 +193,7 @@ export default {
|
|
|
150
193
|
renderTalent();
|
|
151
194
|
renderTalent2();
|
|
152
195
|
// 物品
|
|
153
|
-
|
|
196
|
+
renderJx3Element(this);
|
|
154
197
|
},
|
|
155
198
|
doDir: function () {
|
|
156
199
|
// 显示局部
|
|
@@ -202,8 +245,8 @@ export default {
|
|
|
202
245
|
});
|
|
203
246
|
},
|
|
204
247
|
inited: function (viewer) {
|
|
205
|
-
this.$viewer = viewer
|
|
206
|
-
}
|
|
248
|
+
this.$viewer = viewer;
|
|
249
|
+
},
|
|
207
250
|
},
|
|
208
251
|
watch: {
|
|
209
252
|
content: function () {
|
|
@@ -220,6 +263,8 @@ export default {
|
|
|
220
263
|
"el-button": Button,
|
|
221
264
|
// "el-popover": Popover,
|
|
222
265
|
"jx3-item": Item,
|
|
266
|
+
"jx3-buff": Buff,
|
|
267
|
+
"jx3-skill": Skill,
|
|
223
268
|
// "gallery":gallery,
|
|
224
269
|
// VueViewer
|
|
225
270
|
},
|
package/src/Buff.vue
CHANGED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="w-buff" v-if="data">
|
|
3
|
+
<div class="w-buff-wrapper">
|
|
4
|
+
<img class="w-buff-icon" :src="data.IconID | iconLink" :alt="data.Name" />
|
|
5
|
+
<div class="w-buff-content">
|
|
6
|
+
<span class="w-buff-name">{{data.Name}}</span>
|
|
7
|
+
<span class="w-buff-desc">{{data.Desc}}</span>
|
|
8
|
+
<span class="w-buff-meta">ID : {{data.BuffID}}</span>
|
|
9
|
+
<span class="w-buff-meta">Level : {{data.Level}}</span>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script>
|
|
16
|
+
import { getBuff } from "../service/database.js";
|
|
17
|
+
import { iconLink } from "@jx3box/jx3box-common/js/utils";
|
|
18
|
+
export default {
|
|
19
|
+
name: "Buff",
|
|
20
|
+
props: ["client", "id", "level"],
|
|
21
|
+
data: () => ({
|
|
22
|
+
data: null,
|
|
23
|
+
}),
|
|
24
|
+
computed: {
|
|
25
|
+
params: function () {
|
|
26
|
+
return [this.client, this.id, this.level];
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
watch: {
|
|
30
|
+
params: {
|
|
31
|
+
immediate: true,
|
|
32
|
+
deep: true,
|
|
33
|
+
handler(val) {
|
|
34
|
+
if (val) {
|
|
35
|
+
let [client, id, level] = val;
|
|
36
|
+
// 读取本地数据
|
|
37
|
+
const cache = sessionStorage.getItem(
|
|
38
|
+
`buff-${client}-${id}-${level}`
|
|
39
|
+
);
|
|
40
|
+
if (cache) {
|
|
41
|
+
this.data = JSON.parse(cache);
|
|
42
|
+
// 没有缓存则发起请求获取数据
|
|
43
|
+
} else {
|
|
44
|
+
id &&
|
|
45
|
+
getBuff(...this.params).then((res) => {
|
|
46
|
+
let data = res.data?.list?.[0];
|
|
47
|
+
this.data = data;
|
|
48
|
+
|
|
49
|
+
// 将数据放入 sessionStorage
|
|
50
|
+
sessionStorage.setItem(
|
|
51
|
+
`buff-${client}-${id}-${level}`,
|
|
52
|
+
JSON.stringify(data)
|
|
53
|
+
);
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
filters: {
|
|
61
|
+
iconLink,
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
</script>
|
|
65
|
+
|
|
66
|
+
<style scoped lang="less">
|
|
67
|
+
@import "../assets/css/module/buff.less";
|
|
68
|
+
</style>
|
package/src/Resource.vue
CHANGED
|
@@ -13,7 +13,8 @@
|
|
|
13
13
|
<el-radio-button label="std">正式服</el-radio-button>
|
|
14
14
|
<el-radio-button label="origin">怀旧服</el-radio-button>
|
|
15
15
|
</el-radio-group>
|
|
16
|
-
<el-input
|
|
16
|
+
<el-input
|
|
17
|
+
class="u-input"
|
|
17
18
|
placeholder="请输入 ID 或 名称"
|
|
18
19
|
v-model="query"
|
|
19
20
|
@change="search"
|
|
@@ -21,7 +22,12 @@
|
|
|
21
22
|
>
|
|
22
23
|
<template slot="prepend">ID ／名称</template>
|
|
23
24
|
<template slot="append" v-if="isPC">
|
|
24
|
-
<el-switch
|
|
25
|
+
<el-switch
|
|
26
|
+
v-model="strict"
|
|
27
|
+
active-text="精确匹配"
|
|
28
|
+
@change="search"
|
|
29
|
+
title="仅对Buff/Skill有效"
|
|
30
|
+
></el-switch>
|
|
25
31
|
</template>
|
|
26
32
|
</el-input>
|
|
27
33
|
</div>
|
|
@@ -33,22 +39,31 @@
|
|
|
33
39
|
<b>Buff</b>
|
|
34
40
|
<em class="u-count">{{ stat.buff }}</em>
|
|
35
41
|
</span>
|
|
36
|
-
<
|
|
42
|
+
<div v-if="buff.length && done" class="m-resource-count">
|
|
37
43
|
<i class="el-icon-s-data"></i> 共找到
|
|
38
44
|
<b>{{ buff.length }}</b> 条记录
|
|
39
|
-
|
|
45
|
+
<div class="u-mode">
|
|
46
|
+
插入模式：
|
|
47
|
+
<el-radio-group v-model="buff_mode" size="mini" @change="changeMode">
|
|
48
|
+
<el-radio-button label="simple">简版</el-radio-button>
|
|
49
|
+
<el-radio-button label="full">完整版</el-radio-button>
|
|
50
|
+
</el-radio-group>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
40
53
|
<ul class="m-resource-list">
|
|
41
54
|
<li
|
|
42
55
|
v-for="(o, i) in buff"
|
|
43
56
|
class="u-item"
|
|
44
57
|
:key="i"
|
|
45
58
|
:class="{ on: !!o.isSelected }"
|
|
46
|
-
@click="
|
|
59
|
+
@click="selectBuff(o, i)"
|
|
47
60
|
ref="buff"
|
|
48
61
|
>
|
|
49
62
|
<span class="u-id">
|
|
50
63
|
ID:{{ o.BuffID }}
|
|
51
|
-
<span
|
|
64
|
+
<span
|
|
65
|
+
class="u-detach"
|
|
66
|
+
>{{o.DetachType | showDetachType}}</span>
|
|
52
67
|
</span>
|
|
53
68
|
<img
|
|
54
69
|
class="u-pic"
|
|
@@ -77,17 +92,24 @@
|
|
|
77
92
|
<b>技能</b>
|
|
78
93
|
<em class="u-count">{{ stat.skill }}</em>
|
|
79
94
|
</span>
|
|
80
|
-
<
|
|
95
|
+
<div v-if="skill.length && done" class="m-resource-count">
|
|
81
96
|
<i class="el-icon-s-data"></i> 共找到
|
|
82
97
|
<b>{{ skill.length }}</b> 条记录
|
|
83
|
-
|
|
98
|
+
<div class="u-mode">
|
|
99
|
+
插入模式：
|
|
100
|
+
<el-radio-group v-model="skill_mode" size="mini" @change="changeMode">
|
|
101
|
+
<el-radio-button label="simple">简版</el-radio-button>
|
|
102
|
+
<el-radio-button label="full">完整版</el-radio-button>
|
|
103
|
+
</el-radio-group>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
84
106
|
<ul class="m-resource-list">
|
|
85
107
|
<li
|
|
86
108
|
v-for="(o, i) in skill"
|
|
87
109
|
class="u-item"
|
|
88
110
|
:key="i"
|
|
89
111
|
:class="{ on: !!o.isSelected }"
|
|
90
|
-
@click="
|
|
112
|
+
@click="selectSkill(o, i)"
|
|
91
113
|
ref="skill"
|
|
92
114
|
>
|
|
93
115
|
<span class="u-id">ID:{{ o.SkillID }}</span>
|
|
@@ -235,9 +257,15 @@
|
|
|
235
257
|
<script>
|
|
236
258
|
import axios from "axios";
|
|
237
259
|
import { loadResource, loadStat, getIcons } from "../service/database";
|
|
238
|
-
import {
|
|
260
|
+
import {
|
|
261
|
+
__ossRoot,
|
|
262
|
+
__iconPath,
|
|
263
|
+
__Root,
|
|
264
|
+
__OriginRoot,
|
|
265
|
+
} from "@jx3box/jx3box-common/data/jx3box.json";
|
|
239
266
|
import detach_types from "../assets/data/detach_type.json";
|
|
240
267
|
import User from "@jx3box/jx3box-common/js/user";
|
|
268
|
+
import { iconLink } from "@jx3box/jx3box-common/js/utils";
|
|
241
269
|
export default {
|
|
242
270
|
name: "Resource",
|
|
243
271
|
props: [],
|
|
@@ -248,7 +276,7 @@ export default {
|
|
|
248
276
|
type: "buff",
|
|
249
277
|
query: "",
|
|
250
278
|
strict: false,
|
|
251
|
-
client
|
|
279
|
+
client: location.hostname.includes("origin") ? "origin" : "std",
|
|
252
280
|
|
|
253
281
|
skill: [],
|
|
254
282
|
buff: [],
|
|
@@ -275,6 +303,9 @@ export default {
|
|
|
275
303
|
page: 1,
|
|
276
304
|
total: 1,
|
|
277
305
|
pages: 1,
|
|
306
|
+
|
|
307
|
+
buff_mode: "simple",
|
|
308
|
+
skill_mode: "simple",
|
|
278
309
|
};
|
|
279
310
|
},
|
|
280
311
|
computed: {
|
|
@@ -296,9 +327,9 @@ export default {
|
|
|
296
327
|
multipage: function () {
|
|
297
328
|
return this.type !== "icon" && this.done && this.pages > 1;
|
|
298
329
|
},
|
|
299
|
-
iconDir
|
|
300
|
-
return this.client ==
|
|
301
|
-
}
|
|
330
|
+
iconDir: function () {
|
|
331
|
+
return this.client == "origin" ? "origin_icon" : "icon";
|
|
332
|
+
},
|
|
302
333
|
},
|
|
303
334
|
watch: {
|
|
304
335
|
html: function (newval) {
|
|
@@ -316,7 +347,7 @@ export default {
|
|
|
316
347
|
strict: ~~this.strict,
|
|
317
348
|
per: this.per,
|
|
318
349
|
page: page,
|
|
319
|
-
client
|
|
350
|
+
client: this.client,
|
|
320
351
|
};
|
|
321
352
|
|
|
322
353
|
// 图标
|
|
@@ -388,37 +419,85 @@ export default {
|
|
|
388
419
|
});
|
|
389
420
|
return data;
|
|
390
421
|
},
|
|
391
|
-
|
|
422
|
+
changeMode : function (){
|
|
423
|
+
this.resetItems();
|
|
424
|
+
},
|
|
425
|
+
selectBuff: function (o, i) {
|
|
426
|
+
this.resetItems();
|
|
427
|
+
o.isSelected = true;
|
|
428
|
+
if (this.buff_mode == "simple") {
|
|
429
|
+
// <img src="${this.iconURL(
|
|
430
|
+
// o.IconID
|
|
431
|
+
// )}">
|
|
432
|
+
this.html = `<a data-type="buff" class="e-jx3-buff w-jx3-element ${
|
|
433
|
+
o.CanCancel == 1 ? "isBuff" : "isDebuff"
|
|
434
|
+
}" href="${this.getLink(
|
|
435
|
+
"buff",
|
|
436
|
+
this.client,
|
|
437
|
+
o.BuffID,
|
|
438
|
+
o.Level
|
|
439
|
+
)}" data-client="${this.client}" data-id="${
|
|
440
|
+
o.BuffID
|
|
441
|
+
}" data-level="${o.Level}">[${o.Name}]</a>`;
|
|
442
|
+
} else {
|
|
443
|
+
this.html = `<pre data-type="buff" data-id="${
|
|
444
|
+
o.BuffID
|
|
445
|
+
}" class="e-jx3-resource">${
|
|
446
|
+
this.$refs[this.type][i]["innerHTML"]
|
|
447
|
+
}</pre>`;
|
|
448
|
+
}
|
|
449
|
+
},
|
|
450
|
+
selectSkill: function (o, i) {
|
|
392
451
|
this.resetItems();
|
|
393
452
|
o.isSelected = true;
|
|
394
|
-
this.
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
453
|
+
if (this.skill_mode == "simple") {
|
|
454
|
+
this.html = `<a data-type="skill" class="e-jx3-skill w-jx3-element" href="${this.getLink(
|
|
455
|
+
"skill",
|
|
456
|
+
this.client,
|
|
457
|
+
o.SkillID,
|
|
458
|
+
o.Level
|
|
459
|
+
)}" data-client="${this.client}" data-id="${
|
|
460
|
+
o.SkillID
|
|
461
|
+
}" data-level="${o.Level}">[${o.Name}]</a>`;
|
|
462
|
+
} else {
|
|
463
|
+
this.html = `<pre data-type="skill" data-id="${
|
|
464
|
+
o.SkillID
|
|
465
|
+
}" class="e-jx3-resource">${
|
|
466
|
+
this.$refs[this.type][i]["innerHTML"]
|
|
467
|
+
}</pre>`;
|
|
468
|
+
}
|
|
399
469
|
},
|
|
400
470
|
selectItem: function (o, i) {
|
|
401
471
|
this.resetItems();
|
|
402
472
|
o.isSelected = true;
|
|
403
|
-
this.html = `<a class="e-jx3-item e-jx3-item-q${o.Quality}" data-mode="" data-id="${o.id}" data-quality="${o.Quality}" data-client="${this.client}"
|
|
473
|
+
this.html = `<a data-type="item" class="e-jx3-item e-jx3-item-q${o.Quality} w-jx3-element" data-mode="" data-id="${o.id}" data-quality="${o.Quality}" data-client="${this.client}" target="_blank" href="${o.Link}">[${o.Name}]</a>`;
|
|
404
474
|
},
|
|
405
475
|
selectIcon: function (o) {
|
|
406
476
|
this.resetItems();
|
|
407
477
|
o.isSelected = true;
|
|
408
478
|
this.html = `<img class="e-jx3-icon" src="${__iconPath}${this.iconDir}/${o.iconID}.png" alt="${o.iconID}"/>`;
|
|
409
|
-
// console.log(this.html);
|
|
410
479
|
},
|
|
411
480
|
resetItems: function () {
|
|
412
481
|
let data = this[this.type];
|
|
413
482
|
data.forEach((item) => {
|
|
414
483
|
item.isSelected = false;
|
|
415
484
|
});
|
|
485
|
+
this.html = ''
|
|
416
486
|
},
|
|
417
487
|
checkUA: function () {
|
|
418
488
|
this.isPC = window.innerWidth > 720;
|
|
419
489
|
},
|
|
420
490
|
iconURL: function (id) {
|
|
421
|
-
return
|
|
491
|
+
return iconLink(id);
|
|
492
|
+
},
|
|
493
|
+
getLink: function (type, client, id, level) {
|
|
494
|
+
let domain = client == "origin" ? __OriginRoot : __Root;
|
|
495
|
+
return (
|
|
496
|
+
domain +
|
|
497
|
+
"app/database/?type=" +
|
|
498
|
+
type +
|
|
499
|
+
`&query=${id}&level=${level}`
|
|
500
|
+
);
|
|
422
501
|
},
|
|
423
502
|
},
|
|
424
503
|
filters: {
|
package/src/Skill.vue
CHANGED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="w-skill" v-if="data">
|
|
3
|
+
<div class="w-skill-wrapper">
|
|
4
|
+
<img class="w-skill-icon" :src="(data.IconID || 13) | iconLink" :alt="data.Name" />
|
|
5
|
+
<div class="w-skill-content">
|
|
6
|
+
<span class="w-skill-name">{{data.Name}}</span>
|
|
7
|
+
<span class="w-skill-desc">{{data.Desc}}</span>
|
|
8
|
+
<span class="w-skill-meta">ID : {{data.SkillID}}</span>
|
|
9
|
+
<span class="w-skill-meta">Level : {{data.Level}}</span>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script>
|
|
16
|
+
import { getSkill } from "../service/database.js";
|
|
17
|
+
import { iconLink } from "@jx3box/jx3box-common/js/utils";
|
|
18
|
+
export default {
|
|
19
|
+
name: "Skill",
|
|
20
|
+
props: ["client", "id", "level"],
|
|
21
|
+
data: () => ({
|
|
22
|
+
data: null,
|
|
23
|
+
}),
|
|
24
|
+
computed: {
|
|
25
|
+
params: function () {
|
|
26
|
+
return [this.client, this.id, this.level];
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
watch: {
|
|
30
|
+
params: {
|
|
31
|
+
immediate: true,
|
|
32
|
+
deep: true,
|
|
33
|
+
handler(val) {
|
|
34
|
+
if (val) {
|
|
35
|
+
let [client, id, level] = val;
|
|
36
|
+
// 读取本地数据
|
|
37
|
+
const cache = sessionStorage.getItem(
|
|
38
|
+
`skill-${client}-${id}-${level}`
|
|
39
|
+
);
|
|
40
|
+
if (cache) {
|
|
41
|
+
this.data = JSON.parse(cache);
|
|
42
|
+
// 没有缓存则发起请求获取数据
|
|
43
|
+
} else {
|
|
44
|
+
id &&
|
|
45
|
+
getSkill(...this.params).then((res) => {
|
|
46
|
+
let data = res.data?.list?.[0];
|
|
47
|
+
this.data = data;
|
|
48
|
+
|
|
49
|
+
// 将数据放入 sessionStorage
|
|
50
|
+
sessionStorage.setItem(
|
|
51
|
+
`skill-${client}-${id}-${level}`,
|
|
52
|
+
JSON.stringify(data)
|
|
53
|
+
);
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
filters: {
|
|
61
|
+
iconLink,
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
</script>
|
|
65
|
+
|
|
66
|
+
<style scoped lang="less">
|
|
67
|
+
@import "../assets/css/module/skill.less";
|
|
68
|
+
</style>
|
package/src/Tinymce.vue
CHANGED
|
@@ -66,11 +66,11 @@ export default {
|
|
|
66
66
|
"link autolink",
|
|
67
67
|
"hr lists advlist table codeinline codesample checklist foldtext latex",
|
|
68
68
|
"image emoticons media videox macro qixue talent2",
|
|
69
|
-
"autosave code fullscreen wordcount powerpaste pagebreak printpage", // template anchor jx3icon
|
|
69
|
+
"autosave code fullscreen wordcount powerpaste pagebreak printpage pz", // template anchor jx3icon
|
|
70
70
|
],
|
|
71
71
|
toolbar: [
|
|
72
72
|
"undo | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough superscript subscript | link unlink | restoredraft fullscreen code",
|
|
73
|
-
"removeformat | hr alignleft aligncenter alignright alignjustify indent outdent | bullist numlist checklist table blockquote foldtext codeinline codesample latex | emoticons image media videox | macro qixue talent2 pagebreak printpage", // template anchor jx3icon
|
|
73
|
+
"removeformat | hr alignleft aligncenter alignright alignjustify indent outdent | bullist numlist checklist table blockquote foldtext codeinline codesample latex | emoticons image media videox | macro pz qixue talent2 pagebreak printpage", // template anchor jx3icon
|
|
74
74
|
],
|
|
75
75
|
mobile: {
|
|
76
76
|
toolbar_drawer: true,
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
.c-buff {
|
|
2
|
-
@max-width: 345px;
|
|
3
|
-
@field-padding-right: 0px;
|
|
4
|
-
|
|
5
|
-
.pr;
|
|
6
|
-
.dbi;
|
|
7
|
-
padding: 2px;
|
|
8
|
-
font-family: "SimHei", "STHeiti", "Microsoft YaHei";
|
|
9
|
-
|
|
10
|
-
* {
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
ul {
|
|
15
|
-
margin: 0;
|
|
16
|
-
padding: 0;
|
|
17
|
-
list-style: none;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.c-buff-wrapper {
|
|
21
|
-
max-width: @max-width;
|
|
22
|
-
padding: 9px 10px 10px;
|
|
23
|
-
background-color: rgba(15, 34, 34, 0.88);
|
|
24
|
-
// background-color: #0f2222;
|
|
25
|
-
color: #ffffff;
|
|
26
|
-
text-shadow: 1px 1px 1px #0f2222;
|
|
27
|
-
font-weight: normal;
|
|
28
|
-
font-size: 13.6px;
|
|
29
|
-
line-height: 1.5em;
|
|
30
|
-
|
|
31
|
-
&:before {
|
|
32
|
-
content: "";
|
|
33
|
-
.pa;
|
|
34
|
-
top: 0;
|
|
35
|
-
left: 0;
|
|
36
|
-
.w(100%);
|
|
37
|
-
.h(100%);
|
|
38
|
-
border: 1px solid #0f2222;
|
|
39
|
-
box-sizing: border-box;
|
|
40
|
-
pointer-events: none;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.u-title {
|
|
44
|
-
font-weight: normal;
|
|
45
|
-
color: #ff0;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.u-desc {
|
|
49
|
-
padding-right: @field-padding-right;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.u-title,
|
|
53
|
-
.u-desc {
|
|
54
|
-
margin: 0;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.c-buff-pop{
|
|
60
|
-
position: fixed;
|
|
61
|
-
.z(2000);
|
|
62
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
.m-simple-buff {
|
|
2
|
-
.mb(2px);
|
|
3
|
-
padding: 4px 10px 4px 4px;
|
|
4
|
-
line-height: initial;
|
|
5
|
-
font-size: 13px;
|
|
6
|
-
background-color: #0F2222;
|
|
7
|
-
text-shadow: 1px 1px 1px #000000;
|
|
8
|
-
border-radius: 4px;
|
|
9
|
-
overflow: hidden;
|
|
10
|
-
|
|
11
|
-
.m-icon, .u-name {
|
|
12
|
-
.dbi;
|
|
13
|
-
vertical-align: middle;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.m-icon {
|
|
17
|
-
.pr;
|
|
18
|
-
.mr(8px);
|
|
19
|
-
|
|
20
|
-
.u-icon {
|
|
21
|
-
.pr;
|
|
22
|
-
.db;
|
|
23
|
-
.w(24px);
|
|
24
|
-
.h(auto);
|
|
25
|
-
.z(10);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.u-uiid {
|
|
30
|
-
.mt(3px);
|
|
31
|
-
font-size: 12px;
|
|
32
|
-
color: lightgreen;
|
|
33
|
-
}
|
|
34
|
-
}
|
package/assets/js/item.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import $ from "jquery";
|
|
2
|
-
|
|
3
|
-
function renderItem(vm, selector = ".e-jx3-item") {
|
|
4
|
-
let outer, inner;
|
|
5
|
-
$(selector).on("mouseenter", function(e) {
|
|
6
|
-
clearTimeout(outer);
|
|
7
|
-
|
|
8
|
-
vm.item_id = $(e.target).attr("data-id");
|
|
9
|
-
vm.item_client = $(e.target).attr("data-client") == 'origin' ? 2 : 1;
|
|
10
|
-
$(".c-item-pop").fadeIn();
|
|
11
|
-
|
|
12
|
-
let self_height = $(".c-item-pop").height();
|
|
13
|
-
let win_height = window.innerHeight;
|
|
14
|
-
let current_y = e.clientY;
|
|
15
|
-
let will_stay_y = e.clientY + 10;
|
|
16
|
-
|
|
17
|
-
if (self_height && win_height - current_y < self_height) {
|
|
18
|
-
will_stay_y =
|
|
19
|
-
current_y - (self_height - (win_height - current_y)) - 100;
|
|
20
|
-
}
|
|
21
|
-
vm.item_popover_style.left = e.clientX + 10 + "px";
|
|
22
|
-
vm.item_popover_style.top = will_stay_y + "px";
|
|
23
|
-
});
|
|
24
|
-
$(selector).on("mouseleave", function(e) {
|
|
25
|
-
outer = setTimeout(() => {
|
|
26
|
-
$(".c-item-pop").fadeOut();
|
|
27
|
-
}, 380);
|
|
28
|
-
});
|
|
29
|
-
$(".c-item-pop").on("mouseenter", function(e) {
|
|
30
|
-
clearTimeout(outer);
|
|
31
|
-
$(".c-item-pop").fadeIn();
|
|
32
|
-
});
|
|
33
|
-
$(".c-item-pop").on("mouseleave", function(e) {
|
|
34
|
-
clearTimeout(inner);
|
|
35
|
-
inner = setTimeout(() => {
|
|
36
|
-
$(".c-item-pop").fadeOut();
|
|
37
|
-
}, 280);
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export default renderItem;
|
package/components/BuffItem.vue
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div v-if="buffInfo" class="c-buff">
|
|
3
|
-
<div class="c-buff-wrapper">
|
|
4
|
-
<!-- buff 名称 -->
|
|
5
|
-
<h4 class="u-title" v-text="buffInfo.Name"></h4>
|
|
6
|
-
|
|
7
|
-
<!-- buff 描述 -->
|
|
8
|
-
<div class="u-desc" v-text="buffInfo.Desc"></div>
|
|
9
|
-
</div>
|
|
10
|
-
</div>
|
|
11
|
-
</template>
|
|
12
|
-
|
|
13
|
-
<script>
|
|
14
|
-
import { getBuff } from '../service/database.js'
|
|
15
|
-
export default {
|
|
16
|
-
name: 'BuffItem',
|
|
17
|
-
props: ['buff', 'buff_id'],
|
|
18
|
-
data: () => ({
|
|
19
|
-
buffInfo: null
|
|
20
|
-
}),
|
|
21
|
-
watch: {
|
|
22
|
-
'buff': {
|
|
23
|
-
immediate: true,
|
|
24
|
-
handler(val) {
|
|
25
|
-
if (typeof val !== 'undefined') this.buffInfo = val
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
'buff_id': {
|
|
29
|
-
immediate: true,
|
|
30
|
-
handler(val) {
|
|
31
|
-
if (val) {
|
|
32
|
-
// 读取本地数据
|
|
33
|
-
const cache = sessionStorage.getItem(`buff-${val}`)
|
|
34
|
-
const cache_created = sessionStorage.getItem(`buff-${val}-created`)
|
|
35
|
-
|
|
36
|
-
// 检查缓存是否有效
|
|
37
|
-
if (cache && Math.round(new Date() / 1000) - cache_created <= 3600) {
|
|
38
|
-
this.buffInfo = JSON.parse(cache)
|
|
39
|
-
return
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// 没有缓存则发起请求获取数据
|
|
43
|
-
getBuff(val).then(res => {
|
|
44
|
-
const data = res.data
|
|
45
|
-
const [buff] = data.list
|
|
46
|
-
// console.log(data)
|
|
47
|
-
this.buffInfo = buff
|
|
48
|
-
|
|
49
|
-
// 将数据放入 sessionStorage
|
|
50
|
-
sessionStorage.setItem(
|
|
51
|
-
`buff-${buff.BuffID}`,JSON.stringify(buff)
|
|
52
|
-
)
|
|
53
|
-
sessionStorage.setItem(
|
|
54
|
-
`buff-${buff.BuffID}-created`,
|
|
55
|
-
Math.round(new Date() / 1000)
|
|
56
|
-
)
|
|
57
|
-
})
|
|
58
|
-
} else if (typeof this.buff_id !== "undefined") {
|
|
59
|
-
this.buffInfo = null;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
</script>
|
|
66
|
-
|
|
67
|
-
<style lang="less">
|
|
68
|
-
@import '../assets/css/module/buff_item.less';
|
|
69
|
-
</style>
|
package/src/BuffSimple.vue
DELETED
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
<!-- buff浮窗 -->
|
|
2
|
-
<template>
|
|
3
|
-
<el-popover
|
|
4
|
-
v-if="buff"
|
|
5
|
-
placement="right-end"
|
|
6
|
-
popper-class="m-simple-buff-popup"
|
|
7
|
-
width="auto"
|
|
8
|
-
:visible-arrow="false"
|
|
9
|
-
trigger="hover"
|
|
10
|
-
transition="none"
|
|
11
|
-
:close-delay="0"
|
|
12
|
-
v-model="visible"
|
|
13
|
-
@show="buff_id = buff.BuffID"
|
|
14
|
-
>
|
|
15
|
-
<div
|
|
16
|
-
class="m-simple-buff"
|
|
17
|
-
slot="reference"
|
|
18
|
-
@mousedown="visible = false"
|
|
19
|
-
:class="{ onlyIcon: onlyIcon, withName: withName }"
|
|
20
|
-
>
|
|
21
|
-
<div class="m-icon">
|
|
22
|
-
<img
|
|
23
|
-
class="u-icon"
|
|
24
|
-
:src="icon_url(buff.IconID)"
|
|
25
|
-
:alt="`IconID:${buff.IconID}`"
|
|
26
|
-
:style="{ width: iconSize, height: iconSize }"
|
|
27
|
-
/>
|
|
28
|
-
</div>
|
|
29
|
-
<span
|
|
30
|
-
class="u-name"
|
|
31
|
-
v-text="buff.BuffName"
|
|
32
|
-
>
|
|
33
|
-
</span>
|
|
34
|
-
<span class="u-uiid fr" v-text="`ID: ${buff.BuffID}`"></span>
|
|
35
|
-
</div>
|
|
36
|
-
<buff-item :buff_id="buff_id" :jx3-client-type="jx3ClientType"></buff-item>
|
|
37
|
-
</el-popover>
|
|
38
|
-
</template>
|
|
39
|
-
|
|
40
|
-
<script>
|
|
41
|
-
import BuffItem from '../components/BuffItem'
|
|
42
|
-
import icon_url from "../assets/js/item/icon_url.js"
|
|
43
|
-
export default {
|
|
44
|
-
name: 'BuffSimple',
|
|
45
|
-
components: {
|
|
46
|
-
BuffItem
|
|
47
|
-
},
|
|
48
|
-
props: {
|
|
49
|
-
buff: {
|
|
50
|
-
type: Object,
|
|
51
|
-
default: null
|
|
52
|
-
},
|
|
53
|
-
onlyIcon: {
|
|
54
|
-
type: Boolean,
|
|
55
|
-
default: false
|
|
56
|
-
},
|
|
57
|
-
iconSize: {
|
|
58
|
-
type: String,
|
|
59
|
-
default: ''
|
|
60
|
-
},
|
|
61
|
-
withName: {
|
|
62
|
-
type: Boolean,
|
|
63
|
-
default: false
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
data: () => ({
|
|
67
|
-
visible: false,
|
|
68
|
-
buff_id: null
|
|
69
|
-
}),
|
|
70
|
-
methods: {
|
|
71
|
-
icon_url
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
</script>
|
|
75
|
-
|
|
76
|
-
<style lang="less">
|
|
77
|
-
@import '../assets/css/module/buff_simple.less';
|
|
78
|
-
.m-simple-buff-popup {
|
|
79
|
-
min-width: initial;
|
|
80
|
-
padding: 0;
|
|
81
|
-
border: none;
|
|
82
|
-
box-shadow: none;
|
|
83
|
-
background-color: transparent;
|
|
84
|
-
transform: translateY(-10px);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.m-simple-buff {
|
|
88
|
-
&.onlyIcon {
|
|
89
|
-
.dbi;
|
|
90
|
-
padding: 0;
|
|
91
|
-
margin: 0;
|
|
92
|
-
background-color: none;
|
|
93
|
-
.u-name,
|
|
94
|
-
.u-uiid {
|
|
95
|
-
.none !important;
|
|
96
|
-
}
|
|
97
|
-
.m-icon {
|
|
98
|
-
margin: 0 !important;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
&.withName {
|
|
102
|
-
background: none;
|
|
103
|
-
.w(90px);
|
|
104
|
-
.x;
|
|
105
|
-
.u-name {
|
|
106
|
-
.db !important;
|
|
107
|
-
color: #555;
|
|
108
|
-
text-shadow: none;
|
|
109
|
-
.mt(5px);
|
|
110
|
-
.bold;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
</style>
|