@jx3box/jx3box-editor 1.1.9 → 1.2.3

package/assets/css/module/buff.less

@@ -14,7 +14,9 @@
 
     .w-buff-icon {
         .size(48px);
-        .mr(10px);
+        border:none;
+        padding:0;
+        margin:0 10px 0 0;
     }
 
     .w-buff-content {

package/assets/css/module/item.less

@@ -85,10 +85,13 @@
         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;
+        
+        *{
+            font-weight: normal;
+            font-size: 13.6px;
+            line-height: 1.5em;
+            text-shadow: 1px 1px 1px #0f2222;
+        }
 
         &:before {
             content: "";

package/assets/css/module/npc.less

@@ -4,23 +4,19 @@
     .w-npc-wrapper {
         @min-width: 200px;
         min-width: @min-width;
-        padding: 9px 10px 10px;
         background-color: rgba(15, 34, 34, 0.88);
         box-sizing: border-box;
         display: flex;
 
-        div {
-            margin: 2px 0;
-        }
 
         .w-npc-content {
             box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-            margin-bottom: 10px;
-            padding: 10px;
             .r(4px);
             .clearfix;
             .fz(13px);
             color: #e7e7e7;
+            margin:0;
+            padding:5px 15px 10px 15px;
         }
 
         .u-icon {
@@ -45,7 +41,7 @@
 
         .u-id {
             .pa;
-            .rt(22px,28px);
+            .rt(15px,10px);
             .pointer;
             color: #5df9eb;
         }

package/assets/css/module/skill.less

@@ -14,7 +14,9 @@
 
     .w-skill-icon{
         .size(48px);
-        .mr(10px);
+        border:none;
+        padding:0;
+        margin:0 10px 0 0;
     }
 
     .w-skill-content{

package/assets/css/resource.less

@@ -29,18 +29,19 @@
 
         .u-item {
             .db;
-            border: 1px solid @border-hr;
+            border: 2px solid @border-hr;
             background: #fafbfc;
             margin-bottom: 10px;
             padding: 10px 10px 10px 70px;
             min-height: 60px;
-            .r(3px);
+            .r(6px);
             &:hover {
                 background-color: #e7f9ff;
             }
             &.on {
                 border-color: #34d058;
                 background-color: #fff;
+                box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
                 // &:hover{
                 //     border:1px dashed #ddd;
                 //     background-color:#eee;
@@ -95,7 +96,7 @@
             .mb(5px);
             .db;
 
-            .u-map, .u-life, {
+            .u-map, .u-life {
                 .mr(20px)
             }
         }

package/package.json

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

package/service/item.js

@@ -1,14 +1,15 @@
 import { $helper } from "@jx3box/jx3box-common/js/https";
 
 // 获取物品
-function get_item(item_id, client_id) {
+function get_item(item_id, client) {
     if (!item_id) return;
-
     let options = {
-        url: `api/item/${item_id}`,
+        url: `/api/item/${item_id}`,
+        params : {
+            client
+        }
     };
-
-    return $helper({ mute: true,client_id : client_id })(options);
+    return $helper({ mute: true })(options);
 }
 
 // 获取清单

package/src/Article.vue

@@ -53,6 +53,7 @@
                 :level="skill.level"
                 v-show="jx3_element.type == 'skill'"
             />
+            <jx3-npc :client="npc.client" :id="npc.id" v-show="jx3_element.type === 'npc'" />
         </div>
         <!-- <gallery :images="images" :index="gallery_index" @close="index = null"></gallery> -->
     </div>
@@ -96,6 +97,7 @@ import renderPzIframe from '../assets/js/pz_iframe'
 import Item from "./Item";
 import Buff from "./Buff";
 import Skill from "./Skill";
+import Npc from "./Npc";
 import renderJx3Element from "../assets/js/jx3_element";
 
 export default {
@@ -137,6 +139,12 @@ export default {
                 id: "",
                 level: "",
             },
+            // NPC
+            npc : {
+                client : 'std',
+                id : '',
+            },
+            // COMMON
             jx3_element: {
                 style: {
                     top: 0,
@@ -265,6 +273,7 @@ export default {
         "jx3-item": Item,
         "jx3-buff": Buff,
         "jx3-skill": Skill,
+        "jx3-npc": Npc,
         // "gallery":gallery,
         // VueViewer
     },

package/src/Item.vue

@@ -250,26 +250,34 @@ import { iconLink } from "@jx3box/jx3box-common/js/utils";
 
 export default {
     name: "Item",
-    props: ["item", "item_id", "jx3ClientType"],
+    props: ["item", "item_id", "jx3ClientType","client"],
     data() {
         return {
             source: null,
         };
     },
     computed : {
+        // 兼容旧版传值
+        env_client_id : function (){
+            return location.href.includes('origin') ? 2 : 1  
+        },
         client_id : function (){
-            return  this.jx3ClientType || 1
+            return  this.jx3ClientType || this.env_client_id
+        },
+        client_by_id : function (){
+            return  this.client_id == 1 ? 'std' : 'origin'
         },
-        client : function (){
-            return this.client_id == 1 ? 'std' : 'origin'
+        // 新版传值
+        final_client : function (){
+            return this.client || this.client_by_id
         },
         cache_key : function (){
-            return `item-${this.client}-${this.item_id}`  
+            return `item-${this.final_client}-${this.item_id}`  
         },
     },
     methods: {
         iconLink : function (id){
-            return iconLink(id,this.client)
+            return iconLink(id,this.final_client)
         },
         second_format,
         attribute_percent,
@@ -303,7 +311,7 @@ export default {
 
                     // 服务端拉取
                     }else{
-                        get_item(this.item_id, this.client_id).then((res) => {
+                        get_item(this.item_id, this.final_client).then((res) => {
                             let data = res.data;
                             if (data.code === 200) {
                                 let item = data.data.item;

package/src/Resource.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="c-resource">
         <!-- 上传触发按钮 -->
-        <el-button class="u-switch" type="primary" @click="openDialog" :disabled="!enable"> <img class="u-icon" svg-inline src="../assets/img/jx3.svg" />剑三资源 </el-button>
+        <el-button class="u-switch" type="primary" @click="openDialog" :disabled="!enable"> <img class="u-icon" svg-inline src="../assets/img/jx3.svg" />插入资源 </el-button>
 
         <!-- 弹出界面 -->
         <el-dialog class="c-large-dialog" title="剑三数据库" :visible.sync="dialogVisible">
@@ -97,15 +97,19 @@
                             <i class="el-icon-s-data"></i> 共找到 <b>{{ item.length }}</b> 条记录
                         </p>
                         <ul class="m-resource-list" v-if="item.length">
-                            <li v-for="(o, i) in item" :key="i" class="u-item" :class="{ on: o.isSelected }" @click="selectItem(o, i)" ref="item">
-                                <span class="u-id">ID:{{ o.id }}</span>
-                                <img class="u-pic" :title="'IconID:' + o.IconID" :src="iconURL(o.IconID)" />
-                                <span class="u-name">{{ o.Name }}</span>
-                                <span class="u-content" v-html="o.DescHtml"></span>
-                                <span class="u-remark">
-                                    {{ o.Requirement }}
-                                </span>
-                            </li>
+                            <el-popover popper-class="m-item-pop" :visible-arrow="false" trigger="hover" placement="left" v-for="(o, i) in item" :key="i">
+                                <li slot="reference" class="u-item" :class="{ on: o.isSelected }" @click="selectItem(o, i)" ref="item">
+                                    <span class="u-id">ID:{{ o.id }}</span>
+                                    <img class="u-pic" :title="'IconID:' + o.IconID" :src="iconURL(o.IconID)" />
+                                    <span class="u-name">{{ o.Name }}</span>
+                                    <span class="u-content" v-html="o.DescHtml"></span>
+                                    <span class="u-remark">
+                                        {{ o.Requirement }}
+                                    </span>
+                                </li>
+
+                                <jx3-item :item_id="o.id"></jx3-item>
+                            </el-popover>
                         </ul>
                         <el-alert v-if="!item.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
                     </el-tab-pane>
@@ -193,12 +197,11 @@
 </template>
 
 <script>
-import axios from "axios";
 import { loadResource, loadStat, getIcons } from "../service/database";
 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";
+import { iconLink,getLink } from "@jx3box/jx3box-common/js/utils";
+import Item from './Item.vue';
 export default {
     name: "Resource",
     props: {
@@ -369,7 +372,7 @@ export default {
                 // <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(
+                this.html = `<a data-type="buff" class="e-jx3-buff w-jx3-element ${o.CanCancel == 1 ? "isBuff" : "isDebuff"}" href="${this.getDbLink(
                     "buff",
                     this.client,
                     o.BuffID,
@@ -383,7 +386,7 @@ export default {
             this.resetItems();
             o.isSelected = true;
             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="${
+                this.html = `<a data-type="skill" class="e-jx3-skill w-jx3-element" href="${this.getDbLink("skill", this.client, o.SkillID, o.Level)}" data-client="${this.client}" data-id="${
                     o.SkillID
                 }" data-level="${o.Level}">[${o.Name}]</a>`;
             } else {
@@ -393,7 +396,7 @@ export default {
         selectItem: function(o, i) {
             this.resetItems();
             o.isSelected = true;
-            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>`;
+            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="${this.getLink('item', o.id)}">[${o.Name}]</a>`;
         },
         selectIcon: function(o) {
             this.resetItems();
@@ -403,7 +406,7 @@ export default {
         selectNpc: function (o, i){
             this.resetItems()
             o.isSelected = true
-            this.html = `<a data-type="npc" class="e-jx3-npc w-jx3-element" data-mode="" data-id="${o.ID}"  data-client="${this.client}" target="_blank" href="${this.getLink("npc", this.client, o.ID, '')}">[${o.Name}]</a>`
+            this.html = `<a data-type="npc" class="e-jx3-npc w-jx3-element" data-mode="" data-id="${o.ID}"  data-client="${this.client}" target="_blank" href="${this.getDbLink("npc", this.client, o.ID, '')}">[${o.Name}]</a>`
         },
         resetItems: function() {
             let data = this[this.type];
@@ -418,10 +421,14 @@ export default {
         iconURL: function(id) {
             return iconLink(id, this.client);
         },
-        getLink: function(type, client, id, level) {
+        getDbLink: function(type, client, id, level) {
             let domain = client == "origin" ? __OriginRoot : __Root;
             return domain + "app/database/?type=" + type + `&query=${id}&level=${level}`;
         },
+        getLink : function (type,id){
+            let domain = this.client == "origin" ? __OriginRoot : __Root;
+            return domain + getLink(type,id).slice(1)
+        },
 
         // 杂项
         // ==============================
@@ -450,10 +457,18 @@ export default {
     created: function() {
         this.checkUA();
     },
-    components: {},
+    components: {
+        'jx3-item': Item
+    },
 };
 </script>
 
 <style lang="less">
 @import "../assets/css/resource.less";
+
+.m-item-pop {
+    padding: 0 !important;
+    background: none !important;
+    border: none;
+}
 </style>