@jx3box/jx3box-ui 0.0.1

package/src/editor/components/ItemSimple.vue

@@ -0,0 +1,134 @@
+<template>
+    <el-popover
+        v-if="item && !noPop"
+        placement="right-end"
+        popper-class="m-simple-item-popup"
+        width="auto"
+        :visible-arrow="false"
+        trigger="hover"
+        transition="none"
+        :close-delay="0"
+        v-model="visible"
+        :effect="effect || 'light'"
+        @show="item_id = item.id"
+    >
+        <template #reference>
+            <div class="m-simple-item" @mousedown="visible = false" :class="{ onlyIcon: onlyIcon, withName: withName }">
+                <div class="m-icon">
+                    <div
+                        class="u-border"
+                        :style="{
+                            backgroundImage: item_border(item),
+                            opacity: item.Quality == 5 ? 0.9 : 1,
+                        }"
+                    ></div>
+                    <div class="u-border-quest" :style="{ backgroundImage: item_border_quest(item) }"></div>
+                    <img
+                        class="u-icon"
+                        :src="icon_url(item.IconID)"
+                        :alt="`IconID:${item.IconID}`"
+                        :style="{ width: iconSize, height: iconSize }"
+                    />
+                </div>
+                <span class="u-name" :style="{ color: item_color(item.Quality) }" v-text="item.Name"></span>
+                <span class="u-uiid fr" v-text="`ID: ${item.id}`"></span>
+            </div>
+        </template>
+        <jx3-item :item_id="item_id" :jx3-client-type="jx3ClientType" />
+    </el-popover>
+    <div
+        class="m-simple-item"
+        v-if="item && noPop"
+        @mousedown="visible = false"
+        :class="{ onlyIcon: onlyIcon, withName: withName }"
+    >
+        <div class="m-icon">
+            <div
+                class="u-border"
+                :style="{
+                    backgroundImage: item_border(item),
+                    opacity: item.Quality == 5 ? 0.9 : 1,
+                }"
+            ></div>
+            <div class="u-border-quest" :style="{ backgroundImage: item_border_quest(item) }"></div>
+            <img
+                class="u-icon"
+                :src="icon_url(item.IconID)"
+                :alt="`IconID:${item.IconID}`"
+                :style="{ width: iconSize, height: iconSize }"
+            />
+        </div>
+        <span class="u-name" :style="{ color: item_color(item.Quality) }" v-text="item.Name"></span>
+        <span class="u-uiid fr" v-text="`ID: ${item.id}`"></span>
+    </div>
+</template>
+
+<script>
+import Item from "./Item.vue";
+import icon_url from "../../../assets/js/item/icon_url.js";
+import item_color from "../../../assets/js/item/color.js";
+import item_border from "../../../assets/js/item/border.js";
+import item_border_quest from "../../../assets/js/item/border_quest.js";
+
+export default {
+    name: "ItemSimple",
+    props: ["item", "onlyIcon", "iconSize", "withName", "jx3ClientType", "effect", "noPop"],
+    data() {
+        return { visible: false, item_id: null };
+    },
+    methods: {
+        icon_url,
+        item_color,
+        item_border,
+        item_border_quest,
+    },
+    components: {
+        "jx3-item": Item,
+    },
+};
+</script>
+
+<style lang="less">
+.m-simple-item-popup {
+    min-width: initial;
+    padding: 0;
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    transform: translateY(-10px);
+}
+
+.m-simple-item {
+    .u-border {
+        background-repeat: no-repeat;
+    }
+    &.onlyIcon {
+        .dbi;
+        padding: 0;
+        margin: 0;
+        background-color: none;
+        .u-name,
+        .u-uiid {
+            .none !important;
+        }
+        .m-icon {
+            margin: 0 !important;
+        }
+    }
+    &.withName {
+        background: none;
+        .w(90px);
+        .x;
+        .u-name {
+            .db !important;
+            color: #555;
+            text-shadow: none;
+            .mt(5px);
+            .bold;
+        }
+    }
+}
+</style>
+<style lang="less">
+@import "../../../assets/css/module/item_simple.less";
+</style>

package/src/editor/components/Medal.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="m-medal">
+        <a :href="medalLink(item)" target="_blank" class="u-medal" v-for="item in medals" :key="item.id" :title="item.medal_desc">
+            <img class="u-medal-img" :src="showIcon(item.medal)">
+        </a>
+    </div>
+</template>
+
+<script>
+import { getMedalLink } from '@jx3box/jx3box-common/js/utils'
+export default {
+    name: 'MedalComponent',
+    props: {
+        medals: {
+            type: Array,
+            default: () => [], // [{ rank_id, medal_desc, medal }]
+        },
+        showIcon: {
+            type: Function,
+            default: () => true,
+        }
+    },
+    methods: {
+
+        medalLink({ rank_id, medal_type = 'rank' }) {
+            return getMedalLink(rank_id, medal_type)
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.m-medal {
+    display: flex;
+    .u-medal {
+        cursor: pointer;
+        .u-medal-img {
+            width: 20px;
+            height: 20px;
+        }
+    }
+}
+</style>

package/src/editor/components/Npc.vue

@@ -0,0 +1,215 @@
+<template>
+    <div class="w-npc" v-if="data">
+        <div class="w-npc-wrapper">
+            <div class="w-npc-content">
+                <div class="u-npc">
+                    <div class="u-title">
+                        <span class="u-name">{{ data.Name }}</span>
+                        <span class="u-name-add">
+                            <span v-if="data.Title || data.Level">&lt;</span>
+                            <span class="u-nick" v-if="data.Title">
+                                {{ data.Title }}
+                            </span>
+                            <span v-if="data.Title && data.Level">·</span>
+                            <b class="u-level" v-if="data.Level">{{ data.Level }}</b>
+                            <span v-if="data.Title || data.Level">&gt;</span>
+                        </span>
+                        <div class="u-base">
+                            <span class="u-atmap" v-if="data.MapName">
+                                {{ data.MapName }}
+                            </span>
+                            <span class="u-intensity" v-if="data.Intensity">
+                                强度
+                                {{ data.Intensity }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="u-primary">
+                        <div class="u-life">
+                            <img class="u-descicon u-descicon-life" svg-inline src="../../../assets/img/npc/energy.svg" />
+                            <b>血量</b>
+                            <em>MaxLife</em>
+                            <strong>{{ data.MaxLife }}</strong>
+                        </div>
+                        <div class="u-mana">
+                            <img class="u-descicon u-descicon-mana" svg-inline src="../../../assets/img/npc/energy.svg" />
+                            <b>内力</b>
+                            <em>MaxMana</em>
+                            <strong>{{ data.MaxMana }}</strong>
+                        </div>
+                        <div class="u-touch" v-if="data.TouchRange">
+                            <img class="u-descicon u-descicon-touch" svg-inline src="../../../assets/img/npc/radar.svg" />
+                            <b>范围</b>
+                            <em>TouchRange</em>
+                            <strong>{{ data.TouchRange }}</strong>
+                        </div>
+                        <div class="u-sense" v-if="data.Sense">
+                            <img class="u-descicon u-descicon-sense" svg-inline src="../../../assets/img/npc/sight.svg" />
+                            <b>识破</b>
+                            <em>Sense</em>
+                            <strong>{{ data.Sense }}</strong>
+                        </div>
+                        <div class="u-dodge" v-if="data.Dodge">
+                            <img class="u-descicon u-descicon-dodge" svg-inline src="../../../assets/img/npc/miss.svg" />
+                            <b>闪避</b>
+                            <em>Dodge</em>
+                            <strong>{{ data.Dodge }}</strong>
+                        </div>
+                        <div class="u-dodge" v-if="data.Parry">
+                            <img class="u-descicon u-descicon-dodge" svg-inline src="../../../assets/img/npc/miss.svg" />
+                            <b>招架</b>
+                            <em>Parry</em>
+                            <strong>{{ data.ParryValue }}</strong>
+                        </div>
+                        <div class="u-shield">
+                            <img class="u-descicon u-descicon-shield" svg-inline src="../../../assets/img/npc/shield.svg" />
+                            <b>防御</b>
+                            <em>Shield</em>
+                            <span class="u-sitem">
+                                外功防御
+                                <em>PhysicsShieldBase</em>
+                                <span class="u-value">{{ ~~data.PhysicsShieldBase }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                混元防御
+                                <em>NeutralMagicDefence</em>
+                                <span class="u-value">{{ ~~data.NeutralMagicDefence }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阳性防御
+                                <em>SolarMagicDefence</em>
+                                <span class="u-value">{{ ~~data.SolarMagicDefence }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阴性防御
+                                <em>LunarMagicDefence</em>
+                                <span class="u-value">{{ ~~data.LunarMagicDefence }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                毒性防御
+                                <em>PoisonMagicDefence</em>
+                                <span class="u-value">{{ ~~data.PoisonMagicDefence }}</span>
+                            </span>
+                        </div>
+                        <div class="u-critical">
+                            <img class="u-descicon u-descicon-attack" svg-inline src="../../../assets/img/npc/attack.svg" />
+                            <b>会心</b>
+                            <em>Critical</em>
+                            <span class="u-sitem">
+                                外功会心
+                                <em>PhysicsCriticalStrike</em>
+                                <span class="u-value">{{ ~~data.PhysicsCriticalStrike }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                混元会心
+                                <em>NeutralCriticalStrike</em>
+                                <span class="u-value">{{ ~~data.NeutralCriticalStrike }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阳性会心
+                                <em>SolarCriticalStrike</em>
+                                <span class="u-value">{{ ~~data.SolarCriticalStrike }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阴性会心
+                                <em>LunarCriticalStrike</em>
+                                <span class="u-value">{{ ~~data.LunarCriticalStrike }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                毒性会心
+                                <em>PoisonCriticalStrike</em>
+                                <span class="u-value">{{ ~~data.PoisonCriticalStrike }}</span>
+                            </span>
+                        </div>
+                        <div class="u-attack">
+                            <img class="u-descicon u-descicon-attack" svg-inline src="../../../assets/img/npc/target.svg" />
+                            <b>命中</b>
+                            <em>Attack</em>
+                            <span class="u-sitem">
+                                外功命中
+                                <em>PhysicsAttackHit</em>
+                                <span class="u-value">{{ ~~data.PhysicsAttackHit }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                混元命中
+                                <em>NeutralMagicHit</em>
+                                <span class="u-value">{{ ~~data.NeutralMagicHit }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阳性命中
+                                <em>SolarMagicHit</em>
+                                <span class="u-value">{{ ~~data.SolarMagicHit }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阴性命中
+                                <em>LunarMagicHit</em>
+                                <span class="u-value">{{ ~~data.LunarMagicHit }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                毒性命中
+                                <em>PoisonMagicHit</em>
+                                <span class="u-value">{{ ~~data.PoisonMagicHit }}</span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="u-id">
+                        ID : {{id}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getNpc } from "../../../service/database.js";
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { iconLink } = utilModule;
+export default {
+    name: "NpcComponent",
+    props: ["client", "id"],
+    data: () => ({
+        data: null,
+    }),
+    computed: {
+        params: function() {
+            return [this.client, this.id];
+        },
+    },
+    watch: {
+        params: {
+            immediate: true,
+            deep: true,
+            handler(val) {
+                if (val) {
+                    let [client, id] = val;
+                    // 读取本地数据
+                    const cache = sessionStorage.getItem(`npc-${client}-${id}`);
+                    if (cache) {
+                        this.data = JSON.parse(cache);
+                        // 没有缓存则发起请求获取数据
+                    } else {
+                        id &&
+                            getNpc(...this.params).then((res) => {
+                                let data = res.data?.list?.[0];
+                                this.data = data;
+
+                                // 将数据放入 sessionStorage
+                                sessionStorage.setItem(`npc-${client}-${id}`, JSON.stringify(data));
+                            });
+                    }
+                }
+            },
+        },
+    },
+    methods: {
+        iconLink: function(id) {
+            return iconLink(id, this.client);
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../../assets/css/module/npc.less";
+</style>

package/src/editor/components/PostAuthor.vue

@@ -0,0 +1,102 @@
+<!--
+ * @Author: iRuxu
+ * @Date: 2022-07-17 00:13:35
+ * @LastEditTime: 2022-07-17 00:40:25
+ * @Description:
+-->
+<template>
+    <div class="w-author w-author__post" v-loading="loading">
+        <div class="w-author-wrapper el-popover" v-if="data">
+            <div class="u-meta">
+                <span class="u-meta-label">作者</span>
+                <span class="u-meta-value">
+                    <a class="u-user" :href="authorLink(data.user_id)" target="_blank">
+                        <Avatar class="u-user-avatar" :uid="data.user_id" :url="data.user_info.user_avatar" :size="32" />
+                        <span class="u-user-name">{{ data.user_info.display_name }}</span>
+                    </a>
+                </span>
+            </div>
+            <div class="u-meta">
+                <div class="u-meta-label">更新</div>
+                <div class="u-meta-value">
+                    {{ formatTime(data.created_at) }}
+                </div>
+            </div>
+            <div class="u-meta">
+                <div class="u-meta-label">信息</div>
+                <div class="u-meta-value">{{ data.desc }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { authorLink } = utilModule;
+import { getEmotion } from "../../../service/author";
+import dayjs from "dayjs";
+import Avatar from "./Avatar.vue";
+export default {
+    name: "PostAuthor",
+    components: {
+        Avatar,
+    },
+    props: ["id"],
+    data: () => ({
+        data: null,
+        loading: false,
+    }),
+    computed: {},
+    watch: {
+        id: {
+            immediate: true,
+            handler(val) {
+                if (val) {
+                    this.loadData();
+                }
+            },
+        },
+    },
+    methods: {
+        authorLink,
+        loadData() {
+            this.loading = true;
+            getEmotion(this.id).then((res) => {
+                this.data = res.data.data;
+                this.loading = false;
+            });
+        },
+        formatTime(val) {
+            return (val && dayjs(val).format("YYYY-MM-DD HH:mm:ss")) || "";
+        },
+    },
+};
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/css/module/author.less";
+.w-author {
+    .u-meta {
+        display: flex;
+        align-items: center;
+        .fz(12px,24px);
+        .h(24px);
+        .mb(5px);
+    }
+    .u-meta-label {
+        .mr(10px);
+        background-color: @bg-gray;
+        padding: 0 8px;
+        .r(2px);
+    }
+    .u-meta-value,
+    .u-user {
+        display: flex;
+        align-items: center;
+    }
+    .u-user-avatar {
+        .size(24px);
+        .mr(5px);
+    }
+}
+</style>

package/src/editor/components/Skill.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="w-skill" v-if="data">
+        <div class="w-skill-wrapper">
+            <img class="w-skill-icon" :src="iconLink(data.IconID || 13)" :alt="data.Name" />
+            <div class="w-skill-content">
+                <span class="w-skill-name">{{data.Name}}</span>
+                <span class="w-skill-desc">{{data.Desc}}</span>
+                <span class="w-skill-meta">ID : {{data.SkillID}}</span>
+                <span class="w-skill-meta">Level : {{data.Level}}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getSkill } from "../../../service/database.js";
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { iconLink } = utilModule;
+export default {
+    name: "SkillComponent",
+    props: ["client", "id", "level"],
+    data: () => ({
+        data: null,
+    }),
+    computed: {
+        params: function () {
+            return [this.client, this.id, this.level];
+        },
+    },
+    watch: {
+        params: {
+            immediate: true,
+            deep: true,
+            handler(val) {
+                if (val) {
+                    let [client, id, level] = val;
+                    // 读取本地数据
+                    const cache = sessionStorage.getItem(
+                        `skill-${client}-${id}-${level}`
+                    );
+                    if (cache) {
+                        this.data = JSON.parse(cache);
+                        // 没有缓存则发起请求获取数据
+                    } else {
+                        id &&
+                            getSkill(...this.params).then((res) => {
+                                let data = res.data?.list?.[0];
+                                this.data = data;
+
+                                // 将数据放入 sessionStorage
+                                sessionStorage.setItem(
+                                    `skill-${client}-${id}-${level}`,
+                                    JSON.stringify(data)
+                                );
+                            });
+                    }
+                }
+            },
+        },
+    },
+    methods : {
+        iconLink : function (id){
+            return iconLink(id,this.client)
+        }
+    }
+};
+</script>
+
+<style lang="less">
+@import "../../../assets/css/module/skill.less";
+</style>

package/src/filters/clientBy.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="w-filter-client">
+        <ul>
+            <li class="u-client" :class="{on: client == ''}" @click="filter('')" v-if="clients">
+                全部
+            </li>
+            <li
+                class="u-client"
+                :class="{ on: client == value }"
+                v-for="(label, value) in computedClients"
+                :key="value"
+                @click="filter(value)"
+            >
+                {{ label }}
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+const clients = {
+    all: "全端",
+    std: "剑三",
+    origin: "缘起",
+};
+export default {
+    name: "clientBy",
+    emits: ["filter"],
+    props: ["type", "clients", "showWujie"],
+    data: function () {
+        return {
+            client: this.type || "",
+        };
+    },
+    computed: {
+        computedClients: function () {
+            if (this.showWujie) {
+                return Object.assign({}, this.clients || clients, {
+                    wujie: "无界",
+                });
+            }
+            return clients;
+        },
+    },
+    methods: {
+        filter: function (val) {
+            this.client = val;
+            this.$emit("filter", { type: "client", val: val });
+            this.$forceUpdate();
+        },
+    },
+    mounted: function () {
+        const client = location.href.includes("origin") ? "origin" : "std";
+        if (client) {
+            this.client = client;
+            this.filter(this.client);
+        }
+    },
+};
+</script>
+
+<style lang="less">
+.w-filter-client {
+    font-size: 0;
+    ul,
+    li {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    ul {
+        .clearfix;
+        .dbi;
+        background-color: @bg-gray;
+        border: 1px solid #eee;
+        .r(3px);
+        overflow: hidden;
+    }
+    li {
+        padding: 5px 10px;
+        .fl;
+        .fz(12px);
+        border-right: 1px solid #eee;
+        &:last-child {
+            border-right: none;
+        }
+        .pointer;
+
+        &.on {
+            background-color: @color-link;
+            color: #fff;
+            border-color: darken(@color-link, 5%);
+        }
+    }
+}
+</style>