Skip to content

Commit

Permalink
feat(skill panel): 连招数据源 #47
Browse files Browse the repository at this point in the history
  • Loading branch information
@X3ZvaWQ
X3ZvaWQ committed Aug 19, 2024
1 parent 3353abc commit 3a48380
Show file tree
Hide file tree
Showing 10 changed files with 182 additions and 252 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
},
"dependencies": {
"@jx3box/jx3box-common": "^8.3.3",
"@jx3box/jx3box-common-ui": "^8.9.12",
"@jx3box/jx3box-common-ui": "^8.9.16",
"@jx3box/jx3box-data": "^3.6.4",
"@jx3box/jx3box-editor": "^2.2.15",
"@jx3box/jx3box-emotion": "^1.2.8",
Expand Down
114 changes: 0 additions & 114 deletions src/assets/css/wujie_skill.less
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,4 @@
.m-publish-wujie-skill {
.m-pvp-martial {
display: flex;
gap: 10px;

.u-platform-select {
.size(30px, 400px);
display: flex;
flex-direction: column;
gap: 10px;
}

.u-platform-option {
.pointer;
flex-grow: 1;
color: white;
background-color: #1a2b22;
writing-mode: vertical-rl; /* 或者使用 vertical-lr */
text-orientation: upright;
text-align: center;
line-height: 32px;
border-radius: 6px;
transition: all 0.2s;
}

.u-platform-option.is-select {
background-color: #2a9998;
flex-grow: 3;
}

.u-skill-list {
flex-grow: 1;
width: 0;

display: flex;
background: #1a2b22;
padding: 20px;
border-radius: 8px;
flex-direction: column;
.m-martial-skills {
flex: 1;
}
.m-martial-skill {
.u-title {
// 竖体显示
writing-mode: tb-rl;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
}
.u-title-name {
z-index: 1;
color: #fff;
font-size: 12px;
}
.u-title-img {
width: 24px;
height: 71px;
position: absolute;
}
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 20px;
// border: 1px solid rgb(40,107,113);
padding: 4px 0;
position: relative;

.u-name {
display: block;
color: #fff;
font-size: 12px;
text-align: center;
// overflow: hidden;
white-space: nowrap;
width: 48px;
}
}
.m-skills {
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
}

.m-skill {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;

.u-skill-icon {
box-sizing: border-box;
// border: 2px solid #000;
}

.u-skill.is-wujie .u-skill-icon {
border: 2px solid #2a9998;
border-radius: 50%;
width: 52px;
height: 52px;
}

.u-skill.active {
.u-name {
color: #a5ffd0;
text-shadow: 0 0 3px #2ffbb2;
}
}
}
}
}

// 已选数据
.m-selected-skills {
height: 80px;
Expand Down
39 changes: 33 additions & 6 deletions src/components/publish_pvp.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@
<div class="m-macro-box">
<div class="m-macro-talent m-macro-item">
<h5 class="u-title">技巧概述</h5>
<el-input v-model="pvpData.content" placeholder="请在此处输入技巧概述，最多200个字。" type="textarea" show-word-limit maxlength="200" :rows="5"> </el-input>
<el-input
v-model="pvpData.content"
placeholder="请在此处输入技巧概述，最多200个字。"
type="textarea"
show-word-limit
maxlength="200"
:rows="5"
>
</el-input>
</div>
<div class="m-macro-talent m-macro-item" v-if="client != 'origin'">
<!-- <el-input v-model="pvpData.talent" placeholder="奇穴方案编码" @change="checkTalent(pvpData.talent)">
Expand Down Expand Up @@ -35,7 +43,14 @@

<div class="m-macro-talent m-macro-item" v-show="subtype !== '通用'">
<h5 class="u-title">{{ client === "std" ? "奇穴" : "镇派" }}讲解</h5>
<el-input v-model="pvpData.talent_desc" placeholder="输入内容（选填）" type="textarea" show-word-limit maxlength="400" :rows="4">
<el-input
v-model="pvpData.talent_desc"
placeholder="输入内容（选填）"
type="textarea"
show-word-limit
maxlength="400"
:rows="4"
>
</el-input>
</div>
</div>
Expand Down Expand Up @@ -97,7 +112,14 @@
>
</el-form-item>
<el-form-item label="连招说明" class="m-macro-desc">
<el-input v-model="item.desc" type="textarea" maxlength="200" :rows="3" show-word-limit placeholder="连招简要说明（选填）"></el-input>
<el-input
v-model="item.desc"
type="textarea"
maxlength="200"
:rows="3"
show-word-limit
placeholder="连招简要说明（选填）"
></el-input>
</el-form-item>
<div class="m-macro-op">
<el-button
Expand All @@ -115,7 +137,12 @@
</div>
<slot></slot>

<skillDialog v-model="showSkillDialog" @submit="onSubmit" :subtype="subtype"></skillDialog>
<skillDialog
v-model="showSkillDialog"
@submit="onSubmit"
:platform="isWujie ? 'wujie' : 'std'"
:subtype="subtype"
></skillDialog>
</div>
</template>

Expand Down Expand Up @@ -148,7 +175,7 @@ export default {
props: ["data", "client", "subtype", "isWujie"],
components: {
SkillDialog,
"publish-qixue":publish_qixue,
"publish-qixue": publish_qixue,
},
data: function () {
return {
Expand Down Expand Up @@ -302,7 +329,7 @@ export default {
onClick: () => {
this.$set(skill, "WithoutGcd", !skill.WithoutGcd);
},
icon: !skill?.WithoutGcd ? "el-icon-check" : "el-icon-close"
icon: !skill?.WithoutGcd ? "el-icon-check" : "el-icon-close",
},
],
event,
Expand Down
80 changes: 23 additions & 57 deletions src/components/publish_wujie_skill.vue
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,13 @@
<!-- 无界技能弹窗 -->
<template>
<el-dialog :visible="modelValue" @close="onClose" title="添加技能" append-to-body custom-class="m-publish-wujie-skill">
<div class="m-pvp-martial">
<div class="u-skill-list">
<div class="m-martial-skill" v-if="wujie_data.mount.length">
<div class="u-title">
<span class="u-title-name">门派技能</span>
<img src="../assets/img/skillset.png" class="u-title-img" alt="" />
</div>
<div class="m-skills">
<div class="m-skill" v-for="(skill, index) in formatSkill(wujie_data.mount)" :key="index" @click="selectSkill(skill)">
<div class="u-skill is-wujie" v-if="skill && skill.IconID">
<img class="u-skill-icon" :src="iconLink(skill.IconID)" :alt="skill.IconID" />
<span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
</div>
</div>
</div>
</div>
<!-- 通用技能 -->
<div class="m-martial-skill">
<div class="u-title">
<span class="u-title-name">通用技能</span>
<img src="../assets/img/skillset.png" class="u-title-img" alt="" />
</div>
<div class="m-skills">
<div class="m-skill" v-for="(skill, index) in formatSkill(wujie_data.common)" :key="index" @click="selectSkill(skill)">
<div class="u-skill is-wujie" v-if="skill && skill.IconID">
<img class="u-skill-icon" :src="iconLink(skill.IconID)" :alt="skill.IconID" />
<span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
</div>
</div>
</div>
</div>
</div>
</div>

<el-dialog
:visible="modelValue"
@close="onClose"
title="添加技能"
append-to-body
custom-class="m-publish-wujie-skill"
>
<pvp-martial :subtype="subtype" :platform="platform" @selectSkill="selectSkill"></pvp-martial>
<el-divider content-position="left">已选技能</el-divider>
<div class="m-selected-skills">
<ul class="m-skills-list" ref="selectedSkill">
Expand All @@ -43,8 +16,9 @@
<img class="u-skill-icon" :src="iconLink(skill.IconID)" :alt="skill.IconID" />
<span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
</div>
<i class="u-remove-icon" title="移除" @click="removeSelected(index)"><i
class="el-icon-close"></i></i>
<i class="u-remove-icon" title="移除" @click="removeSelected(index)"
><i class="el-icon-close"></i
></i>
</li>
</ul>
</div>
Expand All @@ -57,13 +31,18 @@
</template>

<script>
import PvpMartial from "@/components/pvp_martial.vue";
import { getMobileForceSkillList } from "@/service/node";
import xfmap from "@jx3box/jx3box-data/data/xf/xf.json";
import { iconLink } from "@jx3box/jx3box-common/js/utils";
import Sortable from "sortablejs";
import { cloneDeep, uniqBy } from "lodash";

export default {
name: "publish_wujie_skill",
components: {
PvpMartial,
},
props: {
modelValue: {
type: Boolean,
Expand All @@ -73,6 +52,10 @@ export default {
type: String,
default: "通用",
},
platform: {
type: String,
default: "wujie",
},
},
model: {
prop: "modelValue",
Expand All @@ -92,48 +75,31 @@ export default {
watch: {
modelValue(val) {
if (val) {
this.getSkillList();

this.$nextTick(() => {
this.initSortable();
});
}
},
},
mounted() {
getMobileForceSkillList(0).then((res) => {
this.wujie_data.common = res.data.data?.map((s) => s.skill).filter(Boolean);
});
},
methods: {
iconLink,
onClose() {
this.$emit("change", false);
this.selectedSkills = [];
},
onConfirm() {
const skills = this.selectedSkills?.map(item => {
const skills = this.selectedSkills?.map((item) => {
return {
SkillID: item.SkillID,
Name: item.Name,
IconID: item.IconID,
Level: item.Level,
}
})
};
});
this.$emit("selected", skills);
this.onClose();
},
getSkillList() {
const force_id = xfmap[this.subtype]?.force;
if (!force_id) return;

getMobileForceSkillList(force_id).then((res) => {
this.wujie_data.mount = res.data.data?.map((s) => s.skill).filter(Boolean);
});
},
formatSkill(arr) {
return uniqBy(arr.filter((item) => item?.SkillID), 'IconID');
},
selectSkill(skill) {
if (this.selectedSkills?.length >= this.max) {
this.$message.warning(`最多只能选择${this.max}个技能`);
Expand Down
Loading

0 comments on commit 3a48380

Please sign in to comment.