@jx3box/jx3box-ui 2.0.4 → 2.0.6

package/src/editor/components/Combo.vue

@@ -1,259 +0,0 @@
-<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

@@ -1,299 +0,0 @@
-<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>