@jx3box/jx3box-editor 2.2.5 → 2.2.7
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 +15 -0
- package/assets/css/tinymce/combo.less +16 -0
- package/assets/js/combo.js +5 -3
- package/package.json +1 -1
- package/src/BoxResource.vue +7 -7
- package/src/components/Combo.vue +113 -27
package/assets/css/combo.less
CHANGED
|
@@ -273,6 +273,9 @@
|
|
|
273
273
|
background-color:#f00;
|
|
274
274
|
}
|
|
275
275
|
}
|
|
276
|
+
.u-remove-icon_small {
|
|
277
|
+
right: 0;
|
|
278
|
+
}
|
|
276
279
|
|
|
277
280
|
.u-gcd-icon {
|
|
278
281
|
.pa;
|
|
@@ -296,6 +299,13 @@
|
|
|
296
299
|
.size(48px, 48px);
|
|
297
300
|
}
|
|
298
301
|
|
|
302
|
+
.u-sill-icon_large {
|
|
303
|
+
.size(48px, 48px);
|
|
304
|
+
}
|
|
305
|
+
.u-skill-icon_small {
|
|
306
|
+
.size(42px, 42px);
|
|
307
|
+
}
|
|
308
|
+
|
|
299
309
|
.u-name {
|
|
300
310
|
display: block;
|
|
301
311
|
font-size: 12px;
|
|
@@ -305,6 +315,11 @@
|
|
|
305
315
|
width: 48px;
|
|
306
316
|
}
|
|
307
317
|
|
|
318
|
+
.u-name_underline {
|
|
319
|
+
text-decoration: underline;
|
|
320
|
+
text-underline-offset: 2px;
|
|
321
|
+
}
|
|
322
|
+
|
|
308
323
|
.u-note {
|
|
309
324
|
.fz(12px);
|
|
310
325
|
color: #aaa;
|
|
@@ -26,6 +26,17 @@
|
|
|
26
26
|
padding: 0;
|
|
27
27
|
margin: 0;
|
|
28
28
|
}
|
|
29
|
+
.u-skill-icon {
|
|
30
|
+
.size(48px);
|
|
31
|
+
.x;
|
|
32
|
+
.flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.u-skill-icon_small {
|
|
38
|
+
.size(42px);
|
|
39
|
+
}
|
|
29
40
|
|
|
30
41
|
.u-gcd-icon {
|
|
31
42
|
.pa;
|
|
@@ -57,6 +68,11 @@
|
|
|
57
68
|
text-align: center;
|
|
58
69
|
}
|
|
59
70
|
|
|
71
|
+
.u-skill-name_underline {
|
|
72
|
+
text-decoration: underline;
|
|
73
|
+
text-underline-offset: 3px;
|
|
74
|
+
}
|
|
75
|
+
|
|
60
76
|
.u-skill-note {
|
|
61
77
|
.fz(12px,1);
|
|
62
78
|
width: 56px;
|
package/assets/js/combo.js
CHANGED
|
@@ -16,13 +16,15 @@ function renderCombo(selector = ".e-skill-combo") {
|
|
|
16
16
|
const [id, name, icon, extend] = url.split(/,(?![^{]*\})/);
|
|
17
17
|
|
|
18
18
|
const _extend = extend ? JSON.parse(extend) : {};
|
|
19
|
-
const { gcd, n = '', c, fz=12, fw='normal',client='std' } = _extend;
|
|
19
|
+
const { gcd, n = '', c, fz=12, fw='normal',client='std',iconSize='large',underline=0 } = _extend;
|
|
20
20
|
|
|
21
21
|
// 渲染
|
|
22
22
|
let code = `
|
|
23
23
|
<span class="w-skill-combo-item">
|
|
24
|
-
<
|
|
25
|
-
|
|
24
|
+
<span class="u-skill-icon w-jx3-element">
|
|
25
|
+
<img class="u-skill-icon_${iconSize}" src="${iconLink(icon)}" alt="${icon}" data-type="skill" data-id="${id}" data-client="${client}" />
|
|
26
|
+
</span>
|
|
27
|
+
<span class="u-skill-name u-skill-name_underline" title="${name}">${name}</span>
|
|
26
28
|
<span class="u-skill-note" title="${n}" style="color:${c};font-size:${fz}px;font-weight:${fw}">${n}</span>
|
|
27
29
|
<i class="u-gcd-icon ${gcd == 0 ? 'is-show' : ''}" title="无GCD技能">
|
|
28
30
|
<i class="el-icon-time"></i>
|
package/package.json
CHANGED
package/src/BoxResource.vue
CHANGED
|
@@ -45,6 +45,13 @@
|
|
|
45
45
|
</ul>
|
|
46
46
|
<el-alert v-if="!authors.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
|
|
47
47
|
</el-tab-pane>
|
|
48
|
+
<el-tab-pane label="连招" name="combo">
|
|
49
|
+
<span slot="label" class="u-tab-label">
|
|
50
|
+
<i class="el-icon-lollipop" style="margin-right: 5px"></i>
|
|
51
|
+
<b>连招</b>
|
|
52
|
+
</span>
|
|
53
|
+
<ComboVue :query="query" ref="combo" :client="comboClient" :strict="strict" :subtype="subtype"></ComboVue>
|
|
54
|
+
</el-tab-pane>
|
|
48
55
|
<el-tab-pane label="剑三趣图" name="emotions">
|
|
49
56
|
<span slot="label" class="u-tab-label">
|
|
50
57
|
<i class="el-icon-sugar" style="margin-right: 5px"></i>
|
|
@@ -60,13 +67,6 @@
|
|
|
60
67
|
</ul>
|
|
61
68
|
<el-alert v-if="!emotions.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
|
|
62
69
|
</el-tab-pane>
|
|
63
|
-
<el-tab-pane label="连招" name="combo">
|
|
64
|
-
<span slot="label" class="u-tab-label">
|
|
65
|
-
<i class="el-icon-lollipop" style="margin-right: 5px"></i>
|
|
66
|
-
<b>连招</b>
|
|
67
|
-
</span>
|
|
68
|
-
<ComboVue :query="query" ref="combo" :client="comboClient" :strict="strict" :subtype="subtype"></ComboVue>
|
|
69
|
-
</el-tab-pane>
|
|
70
70
|
<el-tab-pane label="信纸" name="letter">
|
|
71
71
|
<span slot="label" class="u-tab-label">
|
|
72
72
|
<i class="el-icon-coffee-cup" style="margin-right: 5px"></i>
|
package/src/components/Combo.vue
CHANGED
|
@@ -71,19 +71,45 @@
|
|
|
71
71
|
<ul class="m-skills-list">
|
|
72
72
|
<li v-for="(skill, index) in selected" :key="skill.SkillID + '' + index" class="m-skill" @contextmenu.prevent="(event) => onContextmenu(event, skill)">
|
|
73
73
|
<div class="u-skill" v-if="skill && skill.IconID">
|
|
74
|
-
<img class="u-skill-icon" :src="iconURL(skill.IconID)" :alt="skill.IconID" />
|
|
74
|
+
<img class="u-skill-icon" :class="skill.iconSize ? `u-skill-icon_${skill.iconSize}` : ''" :src="iconURL(skill.IconID)" :alt="skill.IconID" />
|
|
75
75
|
<i class="u-gcd-icon" v-show="skill.WithoutGcd">
|
|
76
76
|
<i class="el-icon-time"></i>
|
|
77
77
|
</i>
|
|
78
|
-
<span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
|
|
79
|
-
<span class="u-note" :title="skill.n">{{ skill.n }}</span>
|
|
78
|
+
<span class="u-name" :class="{ 'u-name_underline': skill.underline }" :title="skill.Name">{{ skill.Name }}</span>
|
|
79
|
+
<span class="u-note" :title="skill.n" :style="itemStyle(skill)">{{ skill.n }}</span>
|
|
80
80
|
</div>
|
|
81
|
-
<i class="u-remove-icon" title="移除" @click="removeSelected(index)"><i class="el-icon-close"></i></i>
|
|
81
|
+
<i class="u-remove-icon" :class="skill.iconSize ? `u-remove-icon_${skill.iconSize}` : ''" title="移除" @click="removeSelected(index)"><i class="el-icon-close"></i></i>
|
|
82
82
|
</li>
|
|
83
83
|
</ul>
|
|
84
84
|
</div>
|
|
85
85
|
</div>
|
|
86
86
|
</div>
|
|
87
|
+
<el-dialog :visible.sync="showRemark" width="600px" append-to-body v-draggable class="c-large-dialog" title="设置备注">
|
|
88
|
+
<el-form label-position="left" label-width="80px">
|
|
89
|
+
<el-form-item label="备注">
|
|
90
|
+
<el-input placeholder="输入备注" v-model="form.n"></el-input>
|
|
91
|
+
</el-form-item>
|
|
92
|
+
<el-form-item label="文字颜色">
|
|
93
|
+
<el-color-picker v-model="form.c" :predefine="predefineColors" show-alpha></el-color-picker>
|
|
94
|
+
</el-form-item>
|
|
95
|
+
<el-form-item label="文字大小">
|
|
96
|
+
<el-input v-model="form.fz"></el-input>
|
|
97
|
+
</el-form-item>
|
|
98
|
+
<el-form-item label="文字粗细">
|
|
99
|
+
<el-select v-model="form.fw">
|
|
100
|
+
<el-option v-for="i in 9" :key="i" :value="i * 100" :label="i * 100"></el-option>
|
|
101
|
+
</el-select>
|
|
102
|
+
</el-form-item>
|
|
103
|
+
<el-form-item label="预览">
|
|
104
|
+
<span :style="nStyle">{{ form.n || '示例文字' }}</span>
|
|
105
|
+
</el-form-item>
|
|
106
|
+
</el-form>
|
|
107
|
+
<span slot="footer" class="dialog-footer">
|
|
108
|
+
<el-button @click="showRemark = false">取 消</el-button>
|
|
109
|
+
<el-button type="primary" @click="confirm">确 定
|
|
110
|
+
</el-button>
|
|
111
|
+
</span>
|
|
112
|
+
</el-dialog>
|
|
87
113
|
</div>
|
|
88
114
|
</template>
|
|
89
115
|
|
|
@@ -94,7 +120,7 @@ import { getSkill } from "../../service/resource";
|
|
|
94
120
|
import SkillMartial from "./SkillMartial.vue";
|
|
95
121
|
|
|
96
122
|
import Sortable from "sortablejs";
|
|
97
|
-
import { cloneDeep } from "lodash";
|
|
123
|
+
import { cloneDeep, pick } from "lodash";
|
|
98
124
|
|
|
99
125
|
import LoadScript from "vue-plugin-load-script";
|
|
100
126
|
Vue.use(LoadScript);
|
|
@@ -145,17 +171,34 @@ export default {
|
|
|
145
171
|
selected: [],
|
|
146
172
|
|
|
147
173
|
sort: false,
|
|
174
|
+
|
|
175
|
+
form: {
|
|
176
|
+
n: "",
|
|
177
|
+
c: "",
|
|
178
|
+
fz: "14",
|
|
179
|
+
fw: "500"
|
|
180
|
+
},
|
|
181
|
+
showRemark: false,
|
|
182
|
+
currentSkill: {},
|
|
183
|
+
|
|
184
|
+
predefineColors: [
|
|
185
|
+
'#ff4500',
|
|
186
|
+
'#ff8c00',
|
|
187
|
+
'#ffd700',
|
|
188
|
+
'#90ee90',
|
|
189
|
+
'#00ced1',
|
|
190
|
+
'#1e90ff',
|
|
191
|
+
'#c71585',
|
|
192
|
+
'rgba(255, 69, 0, 0.68)',
|
|
193
|
+
'rgb(255, 120, 0)',
|
|
194
|
+
'hsv(51, 100, 98)',
|
|
195
|
+
'hsva(120, 40, 94, 0.5)',
|
|
196
|
+
'hsl(181, 100%, 37%)',
|
|
197
|
+
'hsla(209, 100%, 56%, 0.73)',
|
|
198
|
+
'#c7158577',
|
|
199
|
+
]
|
|
148
200
|
};
|
|
149
201
|
},
|
|
150
|
-
// watch: {
|
|
151
|
-
// sort: function (val) {
|
|
152
|
-
// if (val) {
|
|
153
|
-
// this.$nextTick(() => {
|
|
154
|
-
// this.initSkillSort();
|
|
155
|
-
// });
|
|
156
|
-
// }
|
|
157
|
-
// },
|
|
158
|
-
// },
|
|
159
202
|
computed: {
|
|
160
203
|
hasNextPage: function () {
|
|
161
204
|
return this.total > 1 && this.page < this.pages;
|
|
@@ -166,6 +209,13 @@ export default {
|
|
|
166
209
|
isBlank: function () {
|
|
167
210
|
return !this.query && !this.skill["length"];
|
|
168
211
|
},
|
|
212
|
+
nStyle() {
|
|
213
|
+
return pick({
|
|
214
|
+
color: this.form.c,
|
|
215
|
+
fontSize: (this.form.fz || 12) + 'px',
|
|
216
|
+
fontWeight: this.form.fw
|
|
217
|
+
}, ['color','fontSize','fontWeight'])
|
|
218
|
+
}
|
|
169
219
|
},
|
|
170
220
|
mounted() {
|
|
171
221
|
this.$nextTick(() => {
|
|
@@ -261,22 +311,34 @@ export default {
|
|
|
261
311
|
},
|
|
262
312
|
icon: !skill?.WithoutGcd ? "el-icon-check" : "el-icon-close",
|
|
263
313
|
},
|
|
314
|
+
{
|
|
315
|
+
label: "图标大小",
|
|
316
|
+
children: [
|
|
317
|
+
{
|
|
318
|
+
label: "小",
|
|
319
|
+
onClick: () => {
|
|
320
|
+
this.$set(skill, "iconSize", "small");
|
|
321
|
+
},
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
label: "大",
|
|
325
|
+
onClick: () => {
|
|
326
|
+
this.$set(skill, "iconSize", "large");
|
|
327
|
+
},
|
|
328
|
+
},
|
|
329
|
+
],
|
|
330
|
+
},
|
|
331
|
+
{
|
|
332
|
+
label: skill.underline ? "取消下划线" : "设置下划线",
|
|
333
|
+
onClick: () => {
|
|
334
|
+
this.$set(skill, "underline", !skill.underline);
|
|
335
|
+
},
|
|
336
|
+
},
|
|
264
337
|
{
|
|
265
338
|
label: "备注",
|
|
266
339
|
onClick: () => {
|
|
267
|
-
this
|
|
268
|
-
|
|
269
|
-
cancelButtonText: "取消",
|
|
270
|
-
inputValue: skill?.n || "",
|
|
271
|
-
// 最长4个字
|
|
272
|
-
inputValidator: (value) => {
|
|
273
|
-
return value.length <= 4;
|
|
274
|
-
},
|
|
275
|
-
})
|
|
276
|
-
.then(({ value }) => {
|
|
277
|
-
this.$set(skill, "n", value);
|
|
278
|
-
})
|
|
279
|
-
.catch(() => {});
|
|
340
|
+
this.showRemark = true;
|
|
341
|
+
this.currentSkill = skill
|
|
280
342
|
},
|
|
281
343
|
}
|
|
282
344
|
],
|
|
@@ -293,14 +355,38 @@ export default {
|
|
|
293
355
|
selected.forEach((item) => {
|
|
294
356
|
const obj = {
|
|
295
357
|
gcd: item.WithoutGcd ? 0 : 1,
|
|
358
|
+
underline: item.underline ? 1 : 0,
|
|
296
359
|
};
|
|
297
360
|
item.n && (obj.n = item.n);
|
|
361
|
+
item.c && (obj.c = item.c);
|
|
362
|
+
item.fz && (obj.fz = item.fz);
|
|
363
|
+
item.fw && (obj.fw = item.fw);
|
|
364
|
+
item.iconSize && (obj.iconSize = item.iconSize);
|
|
365
|
+
item.underline && (obj.underline = item.underline);
|
|
366
|
+
|
|
298
367
|
item.client = this.client;
|
|
299
368
|
skills_html += `<li class="w-skill-combo-item">${item.SkillID},${item.Name},${item.IconID},${JSON.stringify(obj)}</li>`;
|
|
300
369
|
});
|
|
301
370
|
const html = `<ul class="e-skill-combo w-skill-combo">${skills_html}</ul>`;
|
|
302
371
|
return html;
|
|
303
372
|
},
|
|
373
|
+
confirm() {
|
|
374
|
+
if (this.form.n) {
|
|
375
|
+
this.$set(this.currentSkill, 'n', this.form.n);
|
|
376
|
+
this.$set(this.currentSkill, 'c', this.form.c);
|
|
377
|
+
this.$set(this.currentSkill, 'fz', this.form.fz);
|
|
378
|
+
this.$set(this.currentSkill, 'fw', this.form.fw);
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
this.showRemark = false
|
|
382
|
+
},
|
|
383
|
+
itemStyle(item) {
|
|
384
|
+
return pick({
|
|
385
|
+
color: item.c,
|
|
386
|
+
fontSize: (item.fz || 12) + 'px',
|
|
387
|
+
fontWeight: item.fw
|
|
388
|
+
}, ['color','fontSize','fontWeight'])
|
|
389
|
+
}
|
|
304
390
|
},
|
|
305
391
|
};
|
|
306
392
|
</script>
|