@jx3box/jx3box-editor 2.2.0 → 2.2.2

package/assets/css/combo.less

@@ -18,6 +18,18 @@
     }
 }
 
+// .c-combo-content {
+//     .flex;
+// }
+
+// .c-combo-content__left {
+//     width: 60%;
+// }
+
+// .c-combo-content__right {
+//     width: 40%;
+// }
+
 .m-resource-combo {
     .m-combo-list {
         max-height: 230px;
@@ -213,7 +225,7 @@
     }
     // 已选数据
     .m-selected-skills {
-        height: 70px;
+        height: 80px;
         border: 1px solid #ddd;
         padding: 10px;
         .scrollbar();
@@ -293,6 +305,16 @@
                 width: 48px;
             }
 
+            .u-note {
+                .fz(12px);
+                color: #aaa;
+                .db;
+                text-align: center;
+                overflow: hidden;
+                white-space: nowrap;
+                width: 48px;
+            }
+
             .u-mask {
                 .pa;
                 .lt(0);
@@ -309,3 +331,77 @@
         }
     }
 }
+
+.m-pvp-martial {
+    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;
+        justify-content: center;
+        cursor: pointer;
+
+        .u-skill-icon {
+            box-sizing: border-box;
+            border: 2px solid #1a2b22;
+        }
+
+        .u-skill.active {
+            .u-name {
+                color: #a5ffd0;
+                text-shadow: 0 0 3px #2ffbb2;
+            }
+        }
+    }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-editor",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "JX3BOX Article & Editor",
   "main": "index.js",
   "scripts": {

package/service/node.js

@@ -0,0 +1,42 @@
+import { $node, axios } from "@jx3box/jx3box-common/js/https";
+
+function getSkill(query, params) {
+    let condition = isNaN(query) ? "name" : "id";
+    return $node().get(`/skill/${condition}/${query}`, {
+        params: params,
+    }).then(res => {
+        return res.data;
+    }).catch((err) => {
+        console.log(err);
+    });
+}
+
+function getSkillList(params) {
+    return $node().get(`/skill`, {
+        params: params,
+    })
+}
+
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+
+const $oss = axios.create({
+    baseURL: JX3BOX.__dataPath,
+});
+
+function getSkills(params) {
+    return $node().get("/skills", {
+        params: params,
+    });
+}
+
+async function getTalents() {
+    let res = await $oss.get("talent/talents.json");
+    return res.data;
+}
+
+async function getTalents2() {
+    let res = await $oss.get("talent2/talent2.json");
+    return res.data;
+}
+
+export { getSkill, getSkillList, getSkills, getTalents, getTalents2};

package/src/BoxResource.vue

@@ -65,7 +65,7 @@
 							<i class="el-icon-lollipop" style="margin-right: 5px"></i>
 							<b>连招</b>
 						</span>
-						<ComboVue :query="query" ref="combo" :client="comboClient" :strict="strict"></ComboVue>
+						<ComboVue :query="query" ref="combo" :client="comboClient" :strict="strict" :subtype="subtype"></ComboVue>
 					</el-tab-pane>
 					<el-tab-pane label="信纸" name="letter">
 						<span slot="label" class="u-tab-label">
@@ -123,6 +123,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		subtype: {
+			type: String,
+			default: "通用",
+		}
 	},
 	data: function () {
 		return {

package/src/Tinymce.vue

@@ -5,7 +5,7 @@
 		<div class="c-editor-header">
 			<Upload v-if="attachmentEnable" @insert="insertAttachments" />
 			<Resource v-if="resourceEnable" @insert="insertResource" />
-			<BoxResource v-if="resourceEnable" @insert="insertResource" />
+			<BoxResource v-if="resourceEnable" @insert="insertResource" :subtype="subtype" />
 		</div>
 		<Emotion class="c-editor-emotion" @selected="emotionSelected"></Emotion>
 
@@ -37,7 +37,7 @@ Vue.directive("draggable", draggable);
 
 export default {
 	name: "Tinymce",
-	props: ["content", "height", "attachmentEnable", "resourceEnable"],
+	props: ["content", "height", "attachmentEnable", "resourceEnable", "subtype"],
 	data: function () {
 		return {
 			data: this.content,

package/src/components/Combo.vue

@@ -1,96 +1,86 @@
 <template>
-    <div class="m-resource-combo">
-        <div class="m-combo-list">
-            <div v-if="total && done" class="m-resource-count">
-                <i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
-            </div>
-            <ul class="m-resource-list">
-                <li
-                    v-for="(o, i) in skill"
-                    class="u-item"
-                    :key="i"
-                    @click="selectSkill(o, i)"
-                    ref="skill"
-                >
-                    <span class="u-id">ID:{{ o.SkillID }}</span>
-                    <img
-                        class="u-pic"
-                        :title="'IconID:' + o.IconID"
-                        :src="iconURL(o.IconID)"
-                    />
-                    <span class="u-primary">
-                        <span class="u-name">
-                            {{ o.Name }}
-                            <em v-if="o.SkillName">({{ o.SkillName }})</em>
-                        </span>
-                        <span class="u-content">
-                            {{ filterRaw(o.Desc) }}
-                        </span>
-                    </span>
-                </li>
-            </ul>
-            <el-alert
-                v-if="!skill.length && done"
-                title="没有找到相关条目"
-                type="info"
-                show-icon
-            ></el-alert>
+    <div class="c-combo m-resource-combo">
+        <el-tabs v-model="activeName" type="card" class="m-skill-tabs">
+            <el-tab-pane label="门派武学" name="special">
+                <template #label>
+                    <div class="u-tab-label">
+                        <i class="el-icon-s-order"></i>
+                        <b>门派武学</b>
+                    </div>
+                </template>
+            </el-tab-pane>
+            <el-tab-pane label="全部技能" name="all">
+                <template #label>
+                    <div class="u-tab-label">
+                        <i class="el-icon-menu"></i>
+                        <b>全部技能</b>
+                    </div>
+                </template>
+            </el-tab-pane>
+        </el-tabs>
+        <div class="c-combo-content">
+            <div class="m-select-content">
+                <div v-show="activeName === 'all'">
+                    <div v-if="total && done" class="m-resource-count">
+                        <i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
+                    </div>
+                    <ul class="m-resource-list">
+                        <li v-for="(o, i) in skill" class="u-item" :key="i" @click="selectSkill(o, i)" ref="skill">
+                            <span class="u-id">ID:{{ o.SkillID }}</span>
+                            <img class="u-pic" :title="'IconID:' + o.IconID" :src="iconURL(o.IconID)" />
+                            <span class="u-primary">
+                                <span class="u-name">
+                                    {{ o.Name }}
+                                    <em v-if="o.SkillName">({{ o.SkillName }})</em>
+                                </span>
+                                <span class="u-content">
+                                    {{ filterRaw(o.Desc) }}
+                                </span>
+                            </span>
+                        </li>
+                    </ul>
+                    <el-alert v-if="!skill.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
 
-            <template v-if="multipage">
-                <!-- 下一页 -->
-                <el-button
-                    class="m-archive-more"
-                    :class="{ show: hasNextPage }"
-                    type="primary"
-                    icon="el-icon-arrow-down"
-                    @click="appendPage"
-                    >加载更多</el-button
-                >
-                <!-- 分页 -->
-                <el-pagination
-                    class="m-archive-pages"
-                    background
-                    layout="total, prev, pager, next,jumper"
-                    :hide-on-single-page="true"
-                    :page-size="per"
-                    :total="total"
-                    :current-page.sync="page"
-                    @current-change="changePage"
-                ></el-pagination>
-            </template>
+                    <template v-if="multipage">
+                        <!-- 下一页 -->
+                        <el-button class="m-archive-more" :class="{ show: hasNextPage }" type="primary" icon="el-icon-arrow-down" @click="appendPage">加载更多</el-button>
+                        <!-- 分页 -->
+                        <el-pagination
+                            class="m-archive-pages"
+                            background
+                            layout="total, prev, pager, next,jumper"
+                            :hide-on-single-page="true"
+                            :page-size="per"
+                            :total="total"
+                            :current-page.sync="page"
+                            @current-change="changePage"
+                        ></el-pagination>
+                    </template>
 
-            <div class="m-database-tip" v-show="isBlank">
-                ❤ 请输入搜索条件查询
+                    <div class="m-database-tip" v-show="isBlank">❤ 请输入搜索条件查询</div>
+                </div>
+                <skill-martial v-show="activeName === 'special'" :client="client" :subtype="subtype" @selectSkill="selectSkill"></skill-martial>
             </div>
-        </div>
 
-        <el-divider>已选技能</el-divider>
-        <div class="m-selected-skills">
-            <ul class="m-skills-list">
-                <li
-                    v-for="(skill, index) in selected"
-                    :key="index + skill.SkillID"
-                    class="m-skill"
-                    @contextmenu.prevent="(event) => onContextmenu(event, skill)"
-                >
-                    <div class="u-skill" v-if="skill && skill.IconID">
-                        <img
-                            class="u-skill-icon"
-                            :src="iconURL(skill.IconID)"
-                            :alt="skill.IconID"
-                        />
-                        <i class="u-gcd-icon" v-show="skill.WithoutGcd">
-                            <i class="el-icon-time"></i>
-                        </i>
-                        <i
-                            class="u-remove-icon"
-                            title="移除"
-                            @click="removeSelected(index)"
-                            ><i class="el-icon-close"></i
-                        ></i>
-                    </div>
-                </li>
-            </ul>
+            <div class="c-combo-content__right">
+                <!-- 已选技能 -->
+                <el-divider>已选技能</el-divider>
+                <div class="m-selected-skills">
+                    <ul class="m-skills-list">
+                        <li v-for="(skill, index) in selected" :key="index" class="m-skill" @contextmenu.prevent="(event) => onContextmenu(event, skill)">
+                            <div class="u-skill" v-if="skill && skill.IconID">
+                                <img class="u-skill-icon" :src="iconURL(skill.IconID)" :alt="skill.IconID" />
+                                <i class="u-gcd-icon" v-show="skill.WithoutGcd">
+                                    <i class="el-icon-time"></i>
+                                </i>
+                                <span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
+                                <span class="u-note" :title="skill.n">{{ skill.n }}</span>
+                            </div>
+                            <i class="u-remove-icon" title="移除" @click="removeSelected(index)"><i class="el-icon-close"></i></i>
+                        </li>
+                    </ul>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -99,17 +89,30 @@
 import Vue from "vue";
 import { iconLink } from "@jx3box/jx3box-common/js/utils";
 import { getSkill } from "../../service/resource";
+import SkillMartial from "./SkillMartial.vue";
+
 import Sortable from "sortablejs";
 import { cloneDeep } from "lodash";
 
-import LoadScript from 'vue-plugin-load-script';
+import LoadScript from "vue-plugin-load-script";
 Vue.use(LoadScript);
 
-import contextmenu from "vue-contextmenujs"
-Vue.use(contextmenu)
+import contextmenu from "vue-contextmenujs";
+Vue.use(contextmenu);
 export default {
-    name: "Combo",
+    name: "skillDialog",
+    components: {
+        SkillMartial,
+    },
     props: {
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
+        subtype: {
+            type: String,
+            default: "通用",
+        },
         query: {
             type: String,
             default: "",
@@ -123,27 +126,32 @@ export default {
             default: false,
         },
     },
+    model: {
+        prop: "modelValue",
+        event: "update:modelValue",
+    },
     data() {
         return {
+            skill: [],
             done: false,
             per: 10,
             page: 1,
             total: 1,
             pages: 1,
 
+            activeName: "special",
             selected: [],
-            skill: [],
         };
     },
     computed: {
+        hasNextPage: function () {
+            return this.total > 1 && this.page < this.pages;
+        },
         multipage: function () {
             return this.done && this.pages > 1;
         },
         isBlank: function () {
-            return !this.query && !this.skill?.["length"];
-        },
-        hasNextPage: function () {
-            return this.total > 1 && this.page < this.pages;
+            return !this.query && !this.skill["length"];
         },
     },
     mounted() {
@@ -169,10 +177,7 @@ export default {
             getSkill(query, params)
                 .then((data) => {
                     if (!append) this.skill = [];
-                    const list = (data.list || [])?.map((item) => {
-                        item.isSelected = false;
-                        return item;
-                    });
+                    const list = this.transformData(data.list || []);
                     this.pages = data.pages;
                     this.total = data.total;
                     this.skill = this.skill.concat(list);
@@ -182,6 +187,20 @@ export default {
                     this.loading = false;
                 });
         },
+        selectSkill: function (o) {
+            this.selected.push(o);
+        },
+        removeSelected: function (index) {
+            this.selected.splice(index, 1);
+        },
+        submit() {
+            this.$emit("submit", this.selected);
+            this.close();
+            this.selected = [];
+        },
+        close() {
+            this.$emit("update:modelValue", false);
+        },
         iconURL: function (id) {
             return iconLink(id, this.client);
         },
@@ -198,11 +217,11 @@ export default {
         changePage: function (i) {
             this.getData(i);
         },
-        selectSkill: function (o) {
-            this.selected.push(o);
-        },
-        removeSelected: function (index) {
-            this.selected.splice(index, 1);
+        transformData: function (data) {
+            data.forEach((item) => {
+                item.isSelected = false;
+            });
+            return data;
         },
         initSkillSort() {
             const el = document.querySelector(`.m-selected-skills .m-skills-list`);
@@ -226,8 +245,22 @@ 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",
                     },
+                    {
+                        label: "备注",
+                        onClick: () => {
+                            this.$prompt("请输入备注", "备注", {
+                                confirmButtonText: "确定",
+                                cancelButtonText: "取消",
+                                inputValue: skill?.n || "",
+                            })
+                                .then(({ value }) => {
+                                    this.$set(skill, "n", value);
+                                })
+                                .catch(() => {});
+                        },
+                    }
                 ],
                 event,
                 customClass: "custom-class",
@@ -236,17 +269,17 @@ export default {
             });
             return false;
         },
-
         renderVal() {
-            const {selected} = this;
-            let skills_html = ''
-            selected.forEach(item => {
+            const { selected } = this;
+            let skills_html = "";
+            selected.forEach((item) => {
                 const obj = {
-                    gcd: item.WithoutGcd ? 0: 1
-                }
-                skills_html += `<li class="w-skill-combo-item">${item.SkillID},${item.Name},${item.IconID},${JSON.stringify(obj)}</li>`
-            })
-            const html = `<ul class="e-skill-combo w-skill-combo">${skills_html}</ul>`
+                    gcd: item.WithoutGcd ? 0 : 1,
+                };
+                item.n && (obj.n = item.n);
+                skills_html += `<li class="w-skill-combo-item">${item.SkillID},${item.Name},${item.IconID},${JSON.stringify(obj)}</li>`;
+            });
+            const html = `<ul class="e-skill-combo w-skill-combo">${skills_html}</ul>`;
             return html;
         },
     },
@@ -255,4 +288,4 @@ export default {
 
 <style lang="less">
 @import "../../assets/css/combo.less";
-</style>
+</style>

package/src/components/SkillMartial.vue

@@ -0,0 +1,186 @@
+<template>
+    <div class="m-pvp-martial">
+        <div v-for="kungfu in kungfus" :key="kungfu" class="m-martial-skill">
+            <div class="u-title">
+                <span class="u-title-name">{{ showKungfuName(kungfu) }}</span>
+                <img src="../../assets/img/skillset.png" class="u-title-img" alt="" />
+            </div>
+            <div class="m-skills" v-if="kungfusSkills[kungfu]">
+                <div class="m-skill" v-for="(skill, index) in formatSkill(kungfusSkills[kungfu])" :key="index" @click="selectSkill(skill)">
+                    <div class="u-skill" 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" v-if="talentSkills && talentSkills.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 talentSkills" :key="index" @click="selectSkill(skill)">
+                    <div class="u-skill" 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 commonSkills" :key="index" @click="selectSkill(skill)">
+                    <div class="u-skill" 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>
+</template>
+
+<script>
+import xfmap from "@jx3box/jx3box-data/data/xf/xf.json";
+import { getSkills, getTalents } from "../../service/node";
+import kungfumap_std from "@jx3box/jx3box-data/data/martial/kungfu_std.json";
+import kungfumap_origin from "@jx3box/jx3box-data/data/martial/kungfu_origin.json";
+import { flattenDeep, uniqBy } from "lodash";
+import kungfus from "@jx3box/jx3box-data/data/martial/kungfuid.json";
+import { iconLink } from "@jx3box/jx3box-common/js/utils";
+export default {
+    name: "pvp_martial",
+    props: {
+        subtype: {
+            type: String,
+            default: "通用",
+        },
+        client: {
+            type: String,
+            default: "std",
+        },
+    },
+    emits: [],
+    data() {
+        return {
+            talents: [],
+            data: [],
+            loading: false,
+        };
+    },
+    computed: {
+        mountId() {
+            return xfmap[this.subtype]?.id;
+        },
+        skillIds() {
+            return flattenDeep(Object.values(this.kungfumap?.[this.mountId]?.["skills"]));
+        },
+        ids() {
+            return [...this.skillIds, ...this.talentSkillIds, ...this.commonIds].join(",");
+        },
+        kungfumap() {
+            return this.client == "origin" ? kungfumap_origin : kungfumap_std;
+        },
+        params() {
+            return {
+                ids: this.ids,
+                client: this.client,
+            };
+        },
+        // 奇穴id std
+        talentSkillIds() {
+            return flattenDeep(this.mountId && this.talents?.[this.mountId]) || [];
+        },
+        // 手动写死
+        commonIds() {
+            // 后撤、蹑云逐月、扶摇直上、凌霄揽胜、瑶台枕鹤、迎风回浪
+            return [9007, 9003, 9002, 9005, 9006, 9004];
+        },
+        // 门派技能数据
+        kungfusSkills: function () {
+            const obj = {};
+            Object.entries(this.kungfumap[this.mountId]["skills"]).forEach(([key, value]) => {
+                obj[key] = value.map((SkillID) => {
+                    const currentSkill = this.data.find((d) => d.SkillID == SkillID);
+                    return currentSkill;
+                });
+            });
+            return obj;
+        },
+        // 门派技能套路id
+        kungfus: function () {
+            return this.kungfumap[this.mountId]["kungfus"];
+        },
+        talentSkills() {
+            return this.talentSkillIds.map((SkillID) => {
+                const currentSkill = this.data.find((d) => d.SkillID == SkillID);
+                return currentSkill;
+            }).filter(item => item && item.IsPassiveSkill == 0);
+        },
+        commonSkills() {
+            return this.commonIds.map((SkillID) => {
+                const currentSkill = this.data.find((d) => d.SkillID == SkillID);
+                return currentSkill;
+            }).filter(Boolean);
+        }
+    },
+    async mounted() {
+        this.talents = await getTalents();
+        await this.loadSkills();
+    },
+    watch: {
+        mountId: {
+            handler() {
+                this.loadSkills();
+            },
+        },
+    },
+    methods: {
+        iconLink,
+        async loadSkills() {
+            this.loading = true;
+            return getSkills(this.params)
+                .then((res) => {
+                    this.data = uniqBy(res.data, "Name");
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        // 技能套路名称
+        showKungfuName: function (val) {
+            return kungfus[val];
+        },
+        selectSkill(skill) {
+            this.$emit('selectSkill', skill);
+        },
+        formatSkill(arr) {
+            return arr.filter(item => item?.SkillID)
+        }
+    },
+};
+</script>
+
+<style lang="less">
+
+</style>