@jx3box/jx3box-editor 1.2.0 → 1.2.4

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.2.0",
+  "version": "1.2.4",
   "description": "JX3BOX Article & Editor",
   "main": "index.js",
   "scripts": {
@@ -41,6 +41,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "csslab": "^4.0.3",
+    "dayjs": "^1.10.7",
     "element-ui": "^2.13.2",
     "hevue-img-preview": "^5.0.0",
     "highlight.js": "^11.3.1",

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/Item.vue

@@ -22,7 +22,7 @@
             <div
                 v-if="parseInt(source.MaxExistTime) > 0"
                 class="u-max-exist-time"
-                v-text="'存在时间：' + second_format(source.MaxExistTime)"
+                v-text="'限时时间：' + showDuration(source.MaxExistTime)"
             ></div>
             <!-- 最大拥有数 -->
             <div
@@ -242,36 +242,53 @@
 
 <script>
 import { get_item } from "../service/item.js";
-import second_format from "../assets/js/item/second_format.js";
+
 import attribute_percent from "../assets/js/item/attribute_percent.js";
 import bind from "../assets/js/item/bind.js";
 import color from "../assets/js/item/color.js";
 import { iconLink } from "@jx3box/jx3box-common/js/utils";
 
+import second_format from "../assets/js/item/second_format.js";
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration'
+dayjs.extend(duration);
+
 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,
+        showDuration : function (val){
+            val = Number(val)
+            return val && dayjs.duration(val).asDays().toFixed(0) + '天';
+        },
         attribute_percent,
         bind,
         color,
@@ -303,7 +320,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;
@@ -326,4 +343,4 @@ export default {
 
 <style lang="less">
 @import "../assets/css/module/item.less";
-</style>
+</style>

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>