@jx3box/jx3box-ui 0.0.1

package/src/editor/components/Combo.vue

@@ -0,0 +1,259 @@
+<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>
+
+            <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"
+                    v-model:current-page="page"
+                    @current-change="changePage"
+                ></el-pagination>
+            </template>
+
+            <div class="m-database-tip" v-show="isBlank">
+                ❤ 请输入搜索条件查询
+            </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>
+    </div>
+</template>
+
+<script>
+import Vue from "vue";
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { iconLink } = utilModule;
+import { getSkill } from "../../service/resource";
+import Sortable from "sortablejs";
+import { cloneDeep } from "lodash";
+
+import LoadScript from 'vue-plugin-load-script';
+Vue.use(LoadScript);
+
+import contextmenu from "vue-contextmenujs"
+Vue.use(contextmenu)
+export default {
+    name: "ComboComponent",
+    props: {
+        query: {
+            type: String,
+            default: "",
+        },
+        client: {
+            type: String,
+            default: "std",
+        },
+        strict: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            done: false,
+            per: 10,
+            page: 1,
+            total: 1,
+            pages: 1,
+
+            selected: [],
+            skill: [],
+        };
+    },
+    computed: {
+        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;
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initSkillSort();
+        });
+    },
+    methods: {
+        getData(page = 1, append = false) {
+            if (!this.query) return;
+
+            this.loading = true;
+            this.per = 10;
+            this.done = false;
+            let query = this.query;
+            let params = {
+                strict: ~~this.strict,
+                per: this.per,
+                page: page,
+                client: this.client,
+            };
+
+            getSkill(query, params)
+                .then((data) => {
+                    if (!append) this.skill = [];
+                    const list = (data.list || [])?.map((item) => {
+                        item.isSelected = false;
+                        return item;
+                    });
+                    this.pages = data.pages;
+                    this.total = data.total;
+                    this.skill = this.skill.concat(list);
+                })
+                .finally(() => {
+                    this.done = true;
+                    this.loading = false;
+                });
+        },
+        iconURL: function (id) {
+            return iconLink(id, this.client);
+        },
+        filterRaw: function (str) {
+            return str && str.replace(/\\n/g, "\n");
+        },
+        search: function () {
+            this.page = 1;
+            this.getData();
+        },
+        appendPage: function () {
+            this.getData(++this.page, true);
+        },
+        changePage: function (i) {
+            this.getData(i);
+        },
+        selectSkill: function (o) {
+            this.selected.push(o);
+        },
+        removeSelected: function (index) {
+            this.selected.splice(index, 1);
+        },
+        initSkillSort() {
+            const el = document.querySelector(`.m-selected-skills .m-skills-list`);
+            if (!el) return;
+            const _this = this;
+            Sortable.create(el, {
+                animation: 200,
+                onEnd({ newIndex, oldIndex }) {
+                    const newSkills = cloneDeep(_this.selected);
+                    const [removed] = newSkills.splice(oldIndex, 1);
+                    newSkills.splice(newIndex, 0, removed);
+                    _this.selected = newSkills;
+                },
+            });
+        },
+        onContextmenu(event, skill) {
+            this.$contextmenu({
+                items: [
+                    {
+                        label: !skill?.WithoutGcd ? "设置为无GCD技能" : "设置为有GCD技能",
+                        onClick: () => {
+                            this.$set(skill, "WithoutGcd", !skill.WithoutGcd);
+                        },
+                        icon: !skill?.WithoutGcd ? "el-icon-check" : "el-icon-close"
+                    },
+                ],
+                event,
+                customClass: "custom-class",
+                zIndex: 99999,
+                minWidth: 200,
+            });
+            return false;
+        },
+
+        renderVal() {
+            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>`
+            return html;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../../assets/css/editor/combo.less";
+</style>

package/src/editor/components/Equip.vue

@@ -0,0 +1,299 @@
+<template>
+    <div class="c-equip" v-if="plan">
+        <div
+            class="u-equip"
+            :class="'u-equip-' + label"
+            v-for="(item, label) in equip"
+            :key="label"
+        >
+            <jx3-item-simple
+                :item="item"
+                :onlyIcon="true"
+                iconSize="56px"
+                :withName="true"
+            />
+        </div>
+        <div class="u-info">
+            <div class="u-title">{{ plan.title }}</div>
+            <a class="u-author" :href="userpage" target="_blank">
+                <img :src="avatar" class="u-author-avatar" />
+                <span class="u-author-name">{{ plan.user_nickname }}</span>
+            </a>
+            <div class="u-time">
+                <i class="el-icon-date"></i>
+                {{ showTime((plan.updated * 1000)) }}
+            </div>
+            <div class="u-desc">{{ plan.description }}</div>
+            <div class="u-qrcodebox">
+                <QRcode :href="link" :s="120" v="static" />
+            </div>
+        </div>
+        <div class="u-misc">
+            <a class="u-logo" :href="link" target="_blank">
+                <img svg-inline src="../../../assets/img/editor/jx3box.svg" />
+                <span>配装ID:{{ plan.id }}</span>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+import EquipPosition from "../../../service/enum/EquipPosition";
+import ItemSimple from "./ItemSimple.vue";
+import * as utilModule from "@jx3box/jx3box-common/js/utils.js";
+const { authorLink } = utilModule;
+import QRcode from "@jx3box/jx3box-common-ui/src/interact/QRcode.vue";
+import { showTime } from "@jx3box/jx3box-common/js/moment.js";
+import { get_plan } from "../../../service/item.js";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+const { __Root } = JX3BOX;
+export default {
+    name: "EquipComponent",
+    props: ["data", "id"],
+    data: function() {
+        return {
+            plan_data: "",
+        };
+    },
+    computed: {
+        plan: function() {
+            return this.id ? this.plan_data : this.data;
+        },
+        equip: function() {
+            return {
+                weapon_1: this.plan.relation_items[
+                    EquipPosition.MELEE_WEAPON
+                ][0],
+                weapon_2: this.plan.relation_items[
+                    EquipPosition.RANGE_WEAPON
+                ][0],
+                cap: this.plan.relation_items[EquipPosition.HELM][0],
+                cloth: this.plan.relation_items[EquipPosition.CHEST][0],
+                belt: this.plan.relation_items[EquipPosition.WAIST][0],
+                wrist: this.plan.relation_items[EquipPosition.BANGLE][0],
+                trousers: this.plan.relation_items[EquipPosition.PANTS][0],
+                shoes: this.plan.relation_items[EquipPosition.BOOTS][0],
+                necklace: this.plan.relation_items[EquipPosition.AMULET][0],
+                pendant: this.plan.relation_items[EquipPosition.PENDANT][0],
+                ring_1: this.plan.relation_items[EquipPosition.RING_1][0],
+                ring_2: this.plan.relation_items[EquipPosition.RING_2][0],
+            };
+        },
+        avatar: function() {
+            return this.plan ? this.plan.user_avatar : "";
+        },
+        username: function() {
+            return this.plan ? this.plan.user_nickname : "";
+        },
+        uid: function() {
+            return this.plan ? this.plan.user_id : "";
+        },
+        userpage: function() {
+            return this.uid ? authorLink(this.uid) : "";
+        },
+        link: function() {
+            return this.plan ? __Root + `item/#/plan_view/${this.plan.id}` : "";
+        },
+    },
+    methods: {
+        showTime,
+    },
+    mounted: function() {
+        if (this.id) {
+            get_plan(this.id).then((res) => {
+                this.plan_data = res.data.data.plan;
+            });
+        }
+    },
+    components: {
+        "jx3-item-simple": ItemSimple,
+        QRcode,
+    },
+};
+</script>
+
+<style lang="less">
+.c-equip {
+    .dbi;
+    .size(500px, 750px);
+    background-color: @bg-black;
+    border: 6px solid #444;
+    .r(6px);
+
+    .u-info {
+        .mt(20px);
+        .w(280px);
+        .auto(x);
+        .x;
+    }
+    .u-title {
+        .nobreak;
+        .fz(1rem, 2);
+        .bold;
+        color: #fff;
+    }
+
+    .u-author {
+        // .pa;.lt(50%);
+        // transform: translate3d(-50%,-50%,0);
+        img {
+            .r(2px);
+            .size(20px);
+            .y;
+        }
+        img {
+            .mr(5px);
+        }
+        span {
+            .fz(13px, 2.5);
+            color: #ccc;
+        }
+    }
+
+    .u-desc {
+        .mt(10px);
+        color: #ccc;
+        font-size: 13px;
+        line-height: 1.8;
+        .break(10);
+        .h(240px);
+        white-space: pre-wrap;
+        text-align: left;
+        background: #2b2e31;
+        padding: 10px;
+        box-sizing: border-box;
+    }
+
+    .u-time {
+        // .x(right);
+        color: #999;
+        .fz(12px);
+        // .mt(5px);
+    }
+
+    .u-qrcodebox {
+        .mt(60px);
+        .w(140px);
+        .auto(x);
+
+        .w-qrcode-static {
+            .u-txt {
+                .mt(10px);
+                color: #999;
+                .fz(12px, 16px);
+            }
+            svg {
+                fill: #999;
+                .size(16px);
+                .y(-4px);
+            }
+            .u-pic {
+                padding: 10px 8px 8px 8px;
+                border-radius: 2px;
+            }
+        }
+    }
+
+    .pr;
+    .u-equip {
+        .pa;
+        .u-name {
+            .none;
+        }
+        .u-uiid {
+            .none;
+        }
+    }
+
+    .u-equip-weapon_1 {
+        .lt(170px, 630px);
+    }
+    .u-equip-weapon_2 {
+        .lt(240px, 630px);
+    }
+
+    .u-equip-cap {
+        .lt(12px, 90px);
+    }
+
+    .u-equip-cloth {
+        .lt(12px, 270px);
+    }
+
+    .u-equip-belt {
+        .lt(12px, 450px);
+    }
+
+    .u-equip-wrist {
+        .lt(400px, 90px);
+    }
+
+    .u-equip-trousers {
+        .lt(400px, 180px);
+    }
+
+    .u-equip-shoes {
+        .lt(400px, 270px);
+    }
+
+    .u-equip-necklace {
+        .lt(400px, 360px);
+    }
+
+    .u-equip-pendant {
+        .lt(400px, 450px);
+    }
+
+    .u-equip-ring_1 {
+        .lt(400px, 540px);
+    }
+
+    .u-equip-ring_2 {
+        .lt(400px, 630px);
+    }
+
+    .u-misc {
+        .pa;
+        .lt(30px, 630px);
+    }
+
+    .u-logo {
+        .db;
+        svg,
+        span {
+            transition: 0.2s ease-in-out;
+        }
+        svg {
+            .size(56px);
+            fill: #fff;
+        }
+        span {
+            .db;
+            color: #fff;
+            font-family: Consolas;
+            .fz(12px);
+            // .bold;
+        }
+        &:hover {
+            span {
+                color: #0cf;
+            }
+            svg {
+                fill: #0cf;
+            }
+        }
+    }
+
+    .u-meta {
+        // .mt(5px);
+        .fz(12px);
+        .db;
+        // color:#1bbfe0;
+        color: #fff;
+        // &:hover{
+        //     color:#ff0;
+        // }
+        // .pa;.lb(20px,20px);
+    }
+}
+</style>