@jx3box/jx3box-editor 0.8.3 → 0.8.7

package/assets/css/article.less

@@ -22,4 +22,7 @@
 @import 'module/nextpage.less';
 @import 'module/plugin.less';
 @import 'module/latex.less';
-@import 'module/imgpreview.less';
+@import 'module/imgpreview.less';
+@import 'module/jx3_element.less';
+@import 'module/buff.less';
+@import 'module/skill.less';

package/assets/css/module/buff.less

@@ -0,0 +1,68 @@
+.w-buff {
+    padding: 1px;
+    border: 1px solid #0f2222;
+    .w-buff-wrapper {
+        @max-width: 345px;
+        @min-width: 200px;
+        max-width: @max-width;
+        min-width: @min-width;
+        padding: 9px 10px 10px;
+        background-color: rgba(15, 34, 34, 0.88);
+        box-sizing: border-box;
+        display: flex;
+    }
+
+    .w-buff-icon {
+        .size(48px);
+        .mr(10px);
+    }
+
+    .w-buff-content {
+        font-weight: normal;
+        flex-grow: 1;
+        text-shadow: 1px 1px 1px #0f2222;
+    }
+
+    .w-buff-name {
+        color: #ff0;
+        .db;
+        .fz(13px);
+    }
+
+    .w-buff-desc {
+        color: #ffffff;
+        letter-spacing: 0.5px;
+        .mb(10px);
+        .fz(12px, 20px);
+    }
+
+    .w-buff-meta {
+        .db;
+        .fz(12px, 20px);
+        color: #f00;
+    }
+}
+
+.c-article .e-jx3-buff {
+    // img {
+    //     border: none;
+    //     margin: 0 5px 0 0;
+    //     width: 36px;
+    //     vertical-align: middle;
+    // }
+    // span {
+    //     font-size: 14px;
+    //     line-height: 36px;
+    // }
+
+    &.isBuff {
+        color: #37a900;
+    }
+    &.isDebuff {
+        color: #900;
+    }
+    text-decoration: underline;
+    &:hover {
+        box-shadow: none !important;
+    }
+}

package/assets/css/module/item.less

@@ -225,19 +225,3 @@
     }
 }
 
-// .c-item-popup {
-//     position: fixed;
-//     .z(99999);
-// }
-
-// .c-item-popover {
-//     padding: 0;
-//     background-color: transparent;
-//     box-shadow: none;
-//     transform: translateY(-8px);
-// }
-
-.c-item-pop{
-    position: fixed;
-    .z(2000);
-}

package/assets/css/module/jx3_element.less

@@ -0,0 +1,4 @@
+.w-jx3-element-pop{
+    position: fixed;
+    .z(2000);
+}

package/assets/css/module/skill.less

@@ -0,0 +1,62 @@
+.w-skill {
+    padding: 1px;
+    border: 1px solid #0f2222;
+    .w-skill-wrapper {
+        @max-width: 345px;
+        @min-width: 200px;
+        max-width: @max-width;
+        min-width: @min-width;
+        padding: 9px 10px 10px;
+        background-color: rgba(15, 34, 34, 0.88);
+        box-sizing: border-box;
+        display: flex;
+    }
+
+    .w-skill-icon{
+        .size(48px);
+        .mr(10px);
+    }
+
+    .w-skill-content{
+        font-weight: normal;
+        flex-grow: 1;
+        text-shadow: 1px 1px 1px #0f2222;
+    }
+
+    .w-skill-name {
+        color: #ff0;
+        .db;
+        .fz(13px);
+    }
+
+    .w-skill-desc {
+        color: #ffffff;
+        letter-spacing:0.5px;
+        .mb(10px);
+        .fz(12px,20px);
+    }
+
+    .w-skill-meta{
+        .db;.fz(12px,20px);
+        color:#f00;
+    }
+}
+
+.c-article .e-jx3-skill {
+
+    // img {
+    //     border: none;
+    //     margin: 0 5px 0 0;
+    //     width: 36px;
+    //     vertical-align: middle;
+    // }
+    // span {
+    //     font-size: 14px;
+    //     line-height: 36px;
+    // }
+
+    text-decoration: underline;
+    &:hover{
+        box-shadow: none !important;
+    }
+}

package/assets/css/resource.less

@@ -12,6 +12,14 @@
 
     .m-resource-count {
         .mt(0);
+        .mb(10px);
+
+        .lh(28px);
+
+        .pr;
+        .u-mode{
+            .pa;.rt(0);
+        }
     }
 
     .m-resource-list {

package/assets/data/weapon_type.json

@@ -0,0 +1,20 @@
+{
+    "0": "棍",
+    "1": "长兵",
+    "2": "短兵",
+    "4": "双兵",
+    "5": "笔",
+    "6": "投掷",
+    "7": "弓弦",
+    "9": "重兵",
+    "10": "笛",
+    "11": "千机匣",
+    "12": "弯刀",
+    "13": "短棒",
+    "14": "刀盾",
+    "15": "琴",
+    "16": "傲霜刀",
+    "17": "伞",
+    "18": "链刃",
+    "19": "魂灯"
+}

package/assets/js/jx3_element.js

@@ -0,0 +1,61 @@
+import $ from "jquery";
+
+function renderItem(vm, selector = ".w-jx3-element") {
+
+    let outer, inner;
+    const pop_class = '.w-jx3-element-pop'
+
+    // 触发时
+    $(selector).on("mouseenter", function(e) {
+        clearTimeout(outer);
+
+        // 获取元素数据
+        let type = $(e.target).attr("data-type");
+        if(type=='item'){
+            vm.item.id = $(e.target).attr("data-id");
+            vm.item.client = $(e.target).attr("data-client") == 'origin' ? 2 : 1;
+        }else{
+            vm[type].client = $(e.target).attr("data-client");
+            vm[type].id = $(e.target).attr("data-id");
+            vm[type].level = $(e.target).attr("data-level");
+        }
+       
+        // 显示浮层
+        $(pop_class).fadeIn();
+        vm.jx3_element.type = type
+
+        // 计算浮层位置
+        let self_height = $(pop_class).height();
+        let win_height = window.innerHeight;
+        let current_y = e.clientY;
+        let will_stay_y = e.clientY + 10;
+
+        if (self_height && win_height - current_y < self_height) {
+            will_stay_y =
+                current_y - (self_height - (win_height - current_y)) - 100;
+        }
+        vm.jx3_element.style.left = e.clientX + 10 + "px";
+        vm.jx3_element.style.top = will_stay_y + "px";
+    });
+
+    // 移除时
+    $(selector).on("mouseleave", function(e) {
+        outer = setTimeout(() => {
+            $(pop_class).fadeOut();
+        }, 380);
+    });
+
+    // POP内停留
+    $(pop_class).on("mouseenter", function(e) {
+        clearTimeout(outer);
+        $(pop_class).fadeIn();
+    });
+    $(pop_class).on("mouseleave", function(e) {
+        clearTimeout(inner);
+        inner = setTimeout(() => {
+            $(pop_class).fadeOut();
+        }, 280);
+    });
+}
+
+export default renderItem;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "0.8.3",
+    "version": "0.8.7",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {
@@ -30,8 +30,8 @@
         "last 2 versions"
     ],
     "dependencies": {
-        "@jx3box/jx3box-common": "^6.6.5",
-        "@jx3box/jx3box-data": "^1.6.2",
+        "@jx3box/jx3box-common": "^6.6.9",
+        "@jx3box/jx3box-data": "^1.6.5",
         "@jx3box/jx3box-emotion": "^1.0.8",
         "@jx3box/jx3box-macro": "^1.0.1",
         "@jx3box/jx3box-talent": "^1.1.0",

package/service/database.js

@@ -76,8 +76,8 @@ function getIcons(query, params) {
         });
 }
 
-function getBuff(id, client = "std", level) {
-    return $node().get("/buff/id" + id, {
+function getBuff(client = "std", id, level) {
+    return $node().get("/buff/id/" + id, {
         params: {
             client: client,
             level: level,
@@ -85,8 +85,8 @@ function getBuff(id, client = "std", level) {
     });
 }
 
-function getSkill(id, client = "origin", level) {
-    return $node().get("/skill/id" + id, {
+function getSkill(client = "std", id, level) {
+    return $node().get("/skill/id/" + id, {
         params: {
             client: client,
             level: level,

package/service/item.js

@@ -1,26 +1,25 @@
-import $http from "axios";
-import { __helperUrl } from "@jx3box/jx3box-common/data/jx3box.json";
+import {$helper} from "@jx3box/jx3box-common/js/https";
 
 // 获取物品
-function get_item(item_id, jx3_client_type = 1) {
+function get_item(item_id, jx3_client_type = null) {
     if (!item_id) return;
-    return $http({
-        url: `${__helperUrl}api/item/${item_id}`,
-        headers: {
-            Accept: "application/prs.helper.v2+json",
-            "JX3-Client-Type": jx3_client_type,
-        },
-        withCredentials: true,
-    });
+
+    let options = {
+        url: `api/item/${item_id}`,
+    };
+
+    if (jx3_client_type !== null) {
+        _.set(options, 'headers.JX3-Client-Type', jx3_client_type);
+    }
+
+    return $helper()(options);
 }
 
 // 获取清单
 function get_plan(plan_id) {
-    return $http({
-        url: `${__helperUrl}api/item_plan/${plan_id}`,
-        headers: { Accept: "application/prs.helper.v2+json" },
-        withCredentials: true,
+    return $helper()({
+        url: `api/item_plan/${plan_id}`,
     });
 }
 
-export { get_item, get_plan };
+export {get_item, get_plan};

package/src/Article.vue

@@ -35,8 +35,24 @@
             layout="total, prev, pager, next, jumper"
             :total="total"
         ></el-pagination>
-        <div class="c-item-pop" :style="item_popover_style">
-            <jx3-item :item_id="item_id" :jx3ClientType="item_client" />
+        <div class="w-jx3-element-pop" :style="jx3_element.style">
+            <jx3-item
+                :item_id="item.id"
+                :jx3ClientType="item.client"
+                v-show="jx3_element.type == 'item'"
+            />
+            <jx3-buff
+                :client="buff.client"
+                :id="buff.id"
+                :level="buff.level"
+                v-show="jx3_element.type == 'buff'"
+            />
+            <jx3-skill
+                :client="skill.client"
+                :id="skill.id"
+                :level="skill.level"
+                v-show="jx3_element.type == 'skill'"
+            />
         </div>
         <!-- <gallery :images="images" :index="gallery_index" @close="index = null"></gallery> -->
     </div>
@@ -45,15 +61,16 @@
 <script>
 import { Pagination, Button, Popover } from "element-ui";
 import "@jx3box/jx3box-common/css/element.css";
+
 // 语法高亮
 import Prism from "prismjs";
+
 // 相册
 // import gallery from "vue-gallery-slideshow";
-import Vue from 'vue'
-import hevueImgPreview from 'hevue-img-preview'
-Vue.use(hevueImgPreview)
-// 剑三物品
-import Item from "./Item";
+import Vue from "vue";
+import hevueImgPreview from "hevue-img-preview";
+Vue.use(hevueImgPreview);
+
 // XSS
 import execFilterXSS from "../assets/js/script";
 // const execFilterXSS = require("xss");
@@ -74,9 +91,14 @@ import renderMacro from "../assets/js/macro";
 import renderTalent from "../assets/js/qixue";
 import renderTalent2 from "../assets/js/talent2";
 import renderKatex from "../assets/js/katex";
-import renderItem from "../assets/js/item";
 // import renderGallery from "../assets/js/gallery";
-import renderImgPreview from "../assets/js/renderImgPreview"
+import renderImgPreview from "../assets/js/renderImgPreview";
+
+// 剑三
+import Item from "./Item";
+import Buff from "./Buff";
+import Skill from "./Skill";
+import renderJx3Element from "../assets/js/jx3_element";
 
 export default {
     name: "Article",
@@ -90,20 +112,41 @@ export default {
     },
     data: function () {
         return {
+            // 作品
             all: false,
             page: 1,
             data: [],
             mode: "",
-            // 物品
-            item_id: "",
-            item_popover_style: {
-                left: 0,
-                top: 0,
-            },
-            item_client : 1,
+
             // 画廊
             gallery_index: null,
             images: [],
+
+            // 物品
+            item: {
+                id: "",
+                client: 1,
+            },
+            // BUFF
+            buff: {
+                client: "std",
+                id: "",
+                level: "",
+            },
+            // SKILL
+            skill: {
+                client: "std",
+                id: "",
+                level: "",
+            },
+            jx3_element: {
+                style: {
+                    top: 0,
+                    left: 0,
+                    display: "none",
+                },
+                type: "",
+            },
         };
     },
     computed: {
@@ -150,7 +193,7 @@ export default {
             renderTalent();
             renderTalent2();
             // 物品
-            renderItem(this);
+            renderJx3Element(this);
         },
         doDir: function () {
             // 显示局部
@@ -202,8 +245,8 @@ export default {
             });
         },
         inited: function (viewer) {
-            this.$viewer = viewer
-        }
+            this.$viewer = viewer;
+        },
     },
     watch: {
         content: function () {
@@ -220,6 +263,8 @@ export default {
         "el-button": Button,
         // "el-popover": Popover,
         "jx3-item": Item,
+        "jx3-buff": Buff,
+        "jx3-skill": Skill,
         // "gallery":gallery,
         // VueViewer
     },

package/src/Buff.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="w-buff" v-if="data">
+        <div class="w-buff-wrapper">
+            <img class="w-buff-icon" :src="data.IconID | iconLink" :alt="data.Name" />
+            <div class="w-buff-content">
+                <span class="w-buff-name">{{data.Name}}</span>
+                <span class="w-buff-desc">{{data.Desc}}</span>
+                <span class="w-buff-meta">ID : {{data.BuffID}}</span>
+                <span class="w-buff-meta">Level : {{data.Level}}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getBuff } from "../service/database.js";
+import { iconLink } from "@jx3box/jx3box-common/js/utils";
+export default {
+    name: "Buff",
+    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(
+                        `buff-${client}-${id}-${level}`
+                    );
+                    if (cache) {
+                        this.data = JSON.parse(cache);
+                        // 没有缓存则发起请求获取数据
+                    } else {
+                        id &&
+                            getBuff(...this.params).then((res) => {
+                                let data = res.data?.list?.[0];
+                                this.data = data;
+
+                                // 将数据放入 sessionStorage
+                                sessionStorage.setItem(
+                                    `buff-${client}-${id}-${level}`,
+                                    JSON.stringify(data)
+                                );
+                            });
+                    }
+                }
+            },
+        },
+    },
+    filters: {
+        iconLink,
+    },
+};
+</script>
+
+<style scoped lang="less">
+@import "../assets/css/module/buff.less";
+</style>

package/src/Item.vue

@@ -278,38 +278,28 @@ export default {
             handler() {
                 if (this.item_id) {
                     // 提取本地数据
-                    let cache = sessionStorage.getItem(`item-${this.item_id}`);
-                    let cache_created = sessionStorage.getItem(
-                        `item-${this.item_id}-created`
-                    );
+                    let cacheName = `item-${this.jx3ClientType}-${this.item_id}`;
+                    let cache = sessionStorage.getItem(cacheName);
+                    let createdCacheName = `${cacheName}-created`;
+                    let createdCache = sessionStorage.getItem(createdCacheName);
                     // 查看是否存在缓存
                     if (
                         (cache === false || cache) &&
-                        Math.round(new Date() / 1000) - cache_created <= 3600
+                        Math.round(new Date() / 1000) - createdCache <= 3600
                     ) {
-                        this.source =
-                            cache === false ? null : JSON.parse(cache);
+                        this.source = cache === false ? null : JSON.parse(cache);
                         return;
                     }
 
                     // 没有缓存则发起请求获取
-                    get_item(this.item_id,this.jx3ClientType).then((res) => {
+                    get_item(this.item_id, this.jx3ClientType).then((res) => {
                         let data = res.data;
                         if (data.code === 200) {
                             let item = data.data.item;
-                            this.source =
-                                JSON.stringify(item) !== "{}" ? item : null;
+                            this.source = JSON.stringify(item) !== "{}" ? item : null;
                             // 记录本地数据
-                            sessionStorage.setItem(
-                                `item-${this.source.id}`,
-                                this.source
-                                    ? JSON.stringify(this.source)
-                                    : false
-                            );
-                            sessionStorage.setItem(
-                                `item-${this.source.id}-created`,
-                                Math.round(new Date() / 1000)
-                            );
+                            sessionStorage.setItem(cacheName, this.source ? JSON.stringify(this.source) : false);
+                            sessionStorage.setItem(createdCacheName, Math.round(new Date() / 1000));
                         }
                     });
                 } else if (typeof this.item_id !== "undefined") {

package/src/Resource.vue

@@ -13,7 +13,8 @@
                         <el-radio-button label="std">正式服</el-radio-button>
                         <el-radio-button label="origin">怀旧服</el-radio-button>
                     </el-radio-group>
-                    <el-input class="u-input"
+                    <el-input
+                        class="u-input"
                         placeholder="请输入 ID 或 名称"
                         v-model="query"
                         @change="search"
@@ -21,7 +22,12 @@
                     >
                         <template slot="prepend">ID ／名称</template>
                         <template slot="append" v-if="isPC">
-                            <el-switch v-model="strict" active-text="精确匹配" @change="search" title="仅对Buff/Skill有效"></el-switch>
+                            <el-switch
+                                v-model="strict"
+                                active-text="精确匹配"
+                                @change="search"
+                                title="仅对Buff/Skill有效"
+                            ></el-switch>
                         </template>
                     </el-input>
                 </div>
@@ -33,22 +39,31 @@
                             <b>Buff</b>
                             <em class="u-count">{{ stat.buff }}</em>
                         </span>
-                        <p v-if="buff.length && done" class="m-resource-count">
+                        <div v-if="buff.length && done" class="m-resource-count">
                             <i class="el-icon-s-data"></i> 共找到
                             <b>{{ buff.length }}</b> 条记录
-                        </p>
+                            <div class="u-mode">
+                                插入模式：
+                                <el-radio-group v-model="buff_mode" size="mini" @change="changeMode">
+                                    <el-radio-button label="simple">简版</el-radio-button>
+                                    <el-radio-button label="full">完整版</el-radio-button>
+                                </el-radio-group>
+                            </div>
+                        </div>
                         <ul class="m-resource-list">
                             <li
                                 v-for="(o, i) in buff"
                                 class="u-item"
                                 :key="i"
                                 :class="{ on: !!o.isSelected }"
-                                @click="selectCommon('buff', o, i)"
+                                @click="selectBuff(o, i)"
                                 ref="buff"
                             >
                                 <span class="u-id">
                                     ID:{{ o.BuffID }}
-                                    <span class="u-detach">{{o.DetachType | showDetachType}}</span>
+                                    <span
+                                        class="u-detach"
+                                    >{{o.DetachType | showDetachType}}</span>
                                 </span>
                                 <img
                                     class="u-pic"
@@ -77,17 +92,24 @@
                             <b>技能</b>
                             <em class="u-count">{{ stat.skill }}</em>
                         </span>
-                        <p v-if="skill.length && done" class="m-resource-count">
+                        <div v-if="skill.length && done" class="m-resource-count">
                             <i class="el-icon-s-data"></i> 共找到
                             <b>{{ skill.length }}</b> 条记录
-                        </p>
+                            <div class="u-mode">
+                                插入模式：
+                                <el-radio-group v-model="skill_mode" size="mini" @change="changeMode">
+                                    <el-radio-button label="simple">简版</el-radio-button>
+                                    <el-radio-button label="full">完整版</el-radio-button>
+                                </el-radio-group>
+                            </div>
+                        </div>
                         <ul class="m-resource-list">
                             <li
                                 v-for="(o, i) in skill"
                                 class="u-item"
                                 :key="i"
                                 :class="{ on: !!o.isSelected }"
-                                @click="selectCommon('skill', o, i)"
+                                @click="selectSkill(o, i)"
                                 ref="skill"
                             >
                                 <span class="u-id">ID:{{ o.SkillID }}</span>
@@ -235,9 +257,15 @@
 <script>
 import axios from "axios";
 import { loadResource, loadStat, getIcons } from "../service/database";
-import { __ossRoot, __iconPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import {
+    __ossRoot,
+    __iconPath,
+    __Root,
+    __OriginRoot,
+} from "@jx3box/jx3box-common/data/jx3box.json";
 import detach_types from "../assets/data/detach_type.json";
 import User from "@jx3box/jx3box-common/js/user";
+import { iconLink } from "@jx3box/jx3box-common/js/utils";
 export default {
     name: "Resource",
     props: [],
@@ -248,7 +276,7 @@ export default {
             type: "buff",
             query: "",
             strict: false,
-            client : location.hostname.includes('origin') ? 'origin' : 'std',
+            client: location.hostname.includes("origin") ? "origin" : "std",
 
             skill: [],
             buff: [],
@@ -275,6 +303,9 @@ export default {
             page: 1,
             total: 1,
             pages: 1,
+
+            buff_mode: "simple",
+            skill_mode: "simple",
         };
     },
     computed: {
@@ -296,9 +327,9 @@ export default {
         multipage: function () {
             return this.type !== "icon" && this.done && this.pages > 1;
         },
-        iconDir : function (){
-            return this.client == 'origin' ? 'origin_icon' : 'icon'
-        }
+        iconDir: function () {
+            return this.client == "origin" ? "origin_icon" : "icon";
+        },
     },
     watch: {
         html: function (newval) {
@@ -316,7 +347,7 @@ export default {
                 strict: ~~this.strict,
                 per: this.per,
                 page: page,
-                client : this.client
+                client: this.client,
             };
 
             // 图标
@@ -388,37 +419,85 @@ export default {
             });
             return data;
         },
-        selectCommon: function (type, o, i) {
+        changeMode : function (){
+            this.resetItems();
+        },
+        selectBuff: function (o, i) {
+            this.resetItems();
+            o.isSelected = true;
+            if (this.buff_mode == "simple") {
+                // <img src="${this.iconURL(
+                //     o.IconID
+                // )}">
+                this.html = `<a data-type="buff" class="e-jx3-buff w-jx3-element ${
+                    o.CanCancel == 1 ? "isBuff" : "isDebuff"
+                }" href="${this.getLink(
+                    "buff",
+                    this.client,
+                    o.BuffID,
+                    o.Level
+                )}" data-client="${this.client}" data-id="${
+                    o.BuffID
+                }" data-level="${o.Level}">[${o.Name}]</a>`;
+            } else {
+                this.html = `<pre data-type="buff" data-id="${
+                    o.BuffID
+                }" class="e-jx3-resource">${
+                    this.$refs[this.type][i]["innerHTML"]
+                }</pre>`;
+            }
+        },
+        selectSkill: function (o, i) {
             this.resetItems();
             o.isSelected = true;
-            this.html = `<pre data-type="${type}" data-id="${
-                o.id
-            }" class="e-jx3-resource">${
-                this.$refs[this.type][i]["innerHTML"]
-            }</pre>`;
+            if (this.skill_mode == "simple") {
+                this.html = `<a data-type="skill" class="e-jx3-skill w-jx3-element" href="${this.getLink(
+                    "skill",
+                    this.client,
+                    o.SkillID,
+                    o.Level
+                )}" data-client="${this.client}" data-id="${
+                    o.SkillID
+                }" data-level="${o.Level}">[${o.Name}]</a>`;
+            } else {
+                this.html = `<pre data-type="skill" data-id="${
+                    o.SkillID
+                }" class="e-jx3-resource">${
+                    this.$refs[this.type][i]["innerHTML"]
+                }</pre>`;
+            }
         },
         selectItem: function (o, i) {
             this.resetItems();
             o.isSelected = true;
-            this.html = `<a class="e-jx3-item e-jx3-item-q${o.Quality}" data-mode="" data-id="${o.id}" data-quality="${o.Quality}" data-client="${this.client}" data-name="" data-desc="" data-level="${o.Level}" target="_blank" href="${o.Link}">[${o.Name}]</a>`;
+            this.html = `<a data-type="item" class="e-jx3-item e-jx3-item-q${o.Quality} w-jx3-element" data-mode="" data-id="${o.id}" data-quality="${o.Quality}" data-client="${this.client}" target="_blank" href="${o.Link}">[${o.Name}]</a>`;
         },
         selectIcon: function (o) {
             this.resetItems();
             o.isSelected = true;
             this.html = `<img class="e-jx3-icon" src="${__iconPath}${this.iconDir}/${o.iconID}.png" alt="${o.iconID}"/>`;
-            // console.log(this.html);
         },
         resetItems: function () {
             let data = this[this.type];
             data.forEach((item) => {
                 item.isSelected = false;
             });
+            this.html = ''
         },
         checkUA: function () {
             this.isPC = window.innerWidth > 720;
         },
         iconURL: function (id) {
-            return __iconPath + this.iconDir + "/" + id + ".png";
+            return iconLink(id);
+        },
+        getLink: function (type, client, id, level) {
+            let domain = client == "origin" ? __OriginRoot : __Root;
+            return (
+                domain +
+                "app/database/?type=" +
+                type +
+                `&query=${id}&level=${level}`
+            );
         },
     },
     filters: {

package/src/Skill.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="w-skill" v-if="data">
+        <div class="w-skill-wrapper">
+            <img class="w-skill-icon" :src="(data.IconID || 13) | iconLink" :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 { iconLink } from "@jx3box/jx3box-common/js/utils";
+export default {
+    name: "Skill",
+    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)
+                                );
+                            });
+                    }
+                }
+            },
+        },
+    },
+    filters: {
+        iconLink,
+    },
+};
+</script>
+
+<style scoped lang="less">
+@import "../assets/css/module/skill.less";
+</style>

package/assets/css/module/buff_item.less

@@ -1,62 +0,0 @@
-.c-buff {
-  @max-width: 345px;
-  @field-padding-right: 0px;
-
-  .pr;
-  .dbi;
-  padding: 2px;
-  font-family: "SimHei", "STHeiti", "Microsoft YaHei";
-
-  * {
-      box-sizing: border-box;
-  }
-
-  ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-  }
-
-  .c-buff-wrapper {
-      max-width: @max-width;
-      padding: 9px 10px 10px;
-      background-color: rgba(15, 34, 34, 0.88);
-      // background-color: #0f2222;
-      color: #ffffff;
-      text-shadow: 1px 1px 1px #0f2222;
-      font-weight: normal;
-      font-size: 13.6px;
-      line-height: 1.5em;
-
-      &:before {
-          content: "";
-          .pa;
-          top: 0;
-          left: 0;
-          .w(100%);
-          .h(100%);
-          border: 1px solid #0f2222;
-          box-sizing: border-box;
-          pointer-events: none;
-      }
-
-      .u-title {
-          font-weight: normal;
-          color: #ff0;
-      }
-
-      .u-desc {
-          padding-right: @field-padding-right;
-      }
-
-      .u-title,
-      .u-desc {
-          margin: 0;
-      }
-  }
-}
-
-.c-buff-pop{
-  position: fixed;
-  .z(2000);
-}

package/assets/css/module/buff_simple.less

@@ -1,34 +0,0 @@
-.m-simple-buff {
-  .mb(2px);
-  padding: 4px 10px 4px 4px;
-  line-height: initial;
-  font-size: 13px;
-  background-color: #0F2222;
-  text-shadow: 1px 1px 1px #000000;
-  border-radius: 4px;
-  overflow: hidden;
-
-  .m-icon, .u-name {
-    .dbi;
-    vertical-align: middle;
-  }
-
-  .m-icon {
-    .pr;
-    .mr(8px);
-
-    .u-icon {
-      .pr;
-      .db;
-      .w(24px);
-      .h(auto);
-      .z(10);
-    }
-  }
-
-  .u-uiid {
-    .mt(3px);
-    font-size: 12px;
-    color: lightgreen;
-  }
-}

package/assets/js/item.js

@@ -1,41 +0,0 @@
-import $ from "jquery";
-
-function renderItem(vm, selector = ".e-jx3-item") {
-    let outer, inner;
-    $(selector).on("mouseenter", function(e) {
-        clearTimeout(outer);
-
-        vm.item_id = $(e.target).attr("data-id");
-        vm.item_client = $(e.target).attr("data-client") == 'origin' ? 2 : 1;
-        $(".c-item-pop").fadeIn();
-
-        let self_height = $(".c-item-pop").height();
-        let win_height = window.innerHeight;
-        let current_y = e.clientY;
-        let will_stay_y = e.clientY + 10;
-
-        if (self_height && win_height - current_y < self_height) {
-            will_stay_y =
-                current_y - (self_height - (win_height - current_y)) - 100;
-        }
-        vm.item_popover_style.left = e.clientX + 10 + "px";
-        vm.item_popover_style.top = will_stay_y + "px";
-    });
-    $(selector).on("mouseleave", function(e) {
-        outer = setTimeout(() => {
-            $(".c-item-pop").fadeOut();
-        }, 380);
-    });
-    $(".c-item-pop").on("mouseenter", function(e) {
-        clearTimeout(outer);
-        $(".c-item-pop").fadeIn();
-    });
-    $(".c-item-pop").on("mouseleave", function(e) {
-        clearTimeout(inner);
-        inner = setTimeout(() => {
-            $(".c-item-pop").fadeOut();
-        }, 280);
-    });
-}
-
-export default renderItem;

package/components/BuffItem.vue

@@ -1,69 +0,0 @@
-<template>
-    <div v-if="buffInfo" class="c-buff">
-        <div class="c-buff-wrapper">
-            <!-- buff 名称 -->
-            <h4 class="u-title" v-text="buffInfo.Name"></h4>
-
-            <!-- buff 描述 -->
-            <div class="u-desc" v-text="buffInfo.Desc"></div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { getBuff } from '../service/database.js'
-export default {
-    name: 'BuffItem',
-    props: ['buff', 'buff_id'],
-    data: () => ({
-        buffInfo: null
-    }),
-    watch: {
-        'buff': {
-            immediate: true,
-            handler(val) {
-                if (typeof val !== 'undefined') this.buffInfo = val
-            }
-        },
-        'buff_id': {
-            immediate: true,
-            handler(val) {
-                if (val) {
-                    // 读取本地数据
-                    const cache = sessionStorage.getItem(`buff-${val}`)
-                    const cache_created = sessionStorage.getItem(`buff-${val}-created`)
-
-                    // 检查缓存是否有效
-                    if (cache && Math.round(new Date() / 1000) - cache_created <= 3600) {
-                        this.buffInfo = JSON.parse(cache)
-                        return
-                    }
-
-                    // 没有缓存则发起请求获取数据
-                    getBuff(val).then(res => {
-                        const data = res.data
-                        const [buff] = data.list
-                        // console.log(data)
-                        this.buffInfo = buff
-
-                        // 将数据放入 sessionStorage
-                        sessionStorage.setItem(
-                            `buff-${buff.BuffID}`,JSON.stringify(buff)
-                        )
-                        sessionStorage.setItem(
-                            `buff-${buff.BuffID}-created`,
-                            Math.round(new Date() / 1000)
-                        )
-                    })
-                } else if (typeof this.buff_id !== "undefined") {
-                    this.buffInfo = null;
-                }
-            }
-        }
-    }
-}
-</script>
-
-<style lang="less">
-@import '../assets/css/module/buff_item.less';
-</style>

package/src/BuffSimple.vue

@@ -1,114 +0,0 @@
-<!-- buff浮窗 -->
-<template>
-    <el-popover
-        v-if="buff"
-        placement="right-end"
-        popper-class="m-simple-buff-popup"
-        width="auto"
-        :visible-arrow="false"
-        trigger="hover"
-        transition="none"
-        :close-delay="0"
-        v-model="visible"
-        @show="buff_id = buff.BuffID"
-    >
-        <div
-            class="m-simple-buff"
-            slot="reference"
-            @mousedown="visible = false"
-            :class="{ onlyIcon: onlyIcon, withName: withName }"
-        >
-            <div class="m-icon">
-                <img
-                    class="u-icon"
-                    :src="icon_url(buff.IconID)"
-                    :alt="`IconID:${buff.IconID}`"
-                    :style="{ width: iconSize, height: iconSize }"
-                />
-            </div>
-            <span
-                class="u-name"
-                v-text="buff.BuffName"
-            >    
-            </span>
-            <span class="u-uiid fr" v-text="`ID: ${buff.BuffID}`"></span>
-        </div>
-        <buff-item :buff_id="buff_id" :jx3-client-type="jx3ClientType"></buff-item>
-    </el-popover>
-</template>
-
-<script>
-import BuffItem from '../components/BuffItem'
-import icon_url from "../assets/js/item/icon_url.js"
-export default {
-    name: 'BuffSimple',
-    components: {
-        BuffItem
-    },
-    props: {
-        buff: {
-            type: Object,
-            default: null
-        },
-        onlyIcon: {
-            type: Boolean,
-            default: false
-        },
-        iconSize: {
-            type: String,
-            default: ''
-        },
-        withName: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data: () => ({
-        visible: false,
-        buff_id: null
-    }),
-    methods: {
-        icon_url
-    }
-}
-</script>
-
-<style lang="less">
-@import '../assets/css/module/buff_simple.less';
-.m-simple-buff-popup {
-    min-width: initial;
-    padding: 0;
-    border: none;
-    box-shadow: none;
-    background-color: transparent;
-    transform: translateY(-10px);
-}
-
-.m-simple-buff {
-    &.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>