@jx3box/jx3box-editor 2.2.21 → 2.2.22

package/assets/css/module/item.less

@@ -109,6 +109,12 @@
             font-weight: normal;
         }
 
+        .u-label-icon {
+            transform: scale(1.1);
+            width: 14px;
+            vertical-align: text-bottom;
+        }
+
         .u-desc {
             padding-right: @field-padding-right;
         }
@@ -118,6 +124,12 @@
             margin: 0;
         }
 
+        .u-spec-attribute.u-value::before {
+            content: "·";
+            .bold;
+            .u-orange;
+        }
+
         .u-orange {
             color: #ffa500;
         }

package/assets/js/item/bind.js

@@ -6,11 +6,11 @@
 export default (BindType) => {
     switch (BindType) {
         case 1:
-            return '不绑定';
+            return '可交易';
         case 2:
-            return '装备后绑定';
+            return '装备前可交易';
         case 3 :
-            return '拾取后绑定';
+            return '不可交易';
         default:
             return '未知'
     }

package/jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    },
+    "exclude": ["node_modules"]
+}

package/package.json

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

package/service/item.js

@@ -1,7 +1,7 @@
 import { $node, $cms } from "@jx3box/jx3box-common/js/https";
 
 // 获取物品
-function get_item(item_id, client) {
+function get_item(item_id, client = 'std') {
     if (!item_id) return;
 
     return $node().get(`/resource/${client}/item_merged.${item_id}`);

package/src/Item.vue

@@ -5,99 +5,194 @@
         :class="{
             'c-item-equipment': source.AucGenre >= 1 && source.AucGenre <= 4,
             'c-item-furniture': source.AucGenre == 21,
-        }"
-    >
+        }">
         <div class="c-item-wrapper">
             <!-- 精炼等级 -->
             <div v-if="source.MaxStrengthLevel" class="u-max-strength-level">
-                <span v-text="`精炼等级：0 / ${source.MaxStrengthLevel}`"></span>
+                <span
+                    v-text="`精炼等级：0 / ${source.MaxStrengthLevel}`"></span>
             </div>
             <!-- 物品名称 -->
-            <div class="u-title" :style="{ color: color(source.Quality) }" v-text="source.Name"></div>
+            <div
+                class="u-title"
+                :style="{ color: color(source.Quality) }"
+                v-text="source.Name"></div>
+            <!-- 装备类型 -->
+            <div class="u-usage" v-if="show_equip_usage">
+                <template v-if="source.EquipUsage == 1">
+                    <img
+                        class="u-label-icon"
+                        src="../assets/img/item/pve.png"
+                        alt="" />
+                    <span>秘境挑战</span>
+                </template>
+                <template v-if="source.EquipUsage == 2">
+                    <img
+                        class="u-label-icon"
+                        src="../assets/img/item/pvp.png"
+                        alt="" />
+                    <span>竞技对抗</span>
+                </template>
+                <template v-if="source.EquipUsage == 3">
+                    <img
+                        class="u-label-icon"
+                        src="../assets/img/item/pvx.png"
+                        alt="" />
+                    <span>休闲</span>
+                </template>
+            </div>
             <!-- 绑定状态 -->
-            <div v-if="source.BindType > 1" class="u-bind" v-text="bind(source.BindType)"></div>
+            <div
+                v-if="source.BindType > 1"
+                class="u-bind"
+                v-text="bind(source.BindType)"></div>
             <!-- 唯一 -->
-            <div v-if="parseInt(source.MaxExistAmount) === 1" class="unique" v-text="'唯一'"></div>
+            <div
+                v-if="parseInt(source.MaxExistAmount) === 1"
+                class="unique"
+                v-text="'唯一'"></div>
             <!-- 存在时间 -->
             <div
                 v-if="parseInt(source.MaxExistTime) > 0"
                 class="u-max-exist-time"
-                v-text="'限时时间：' + showDuration(source.MaxExistTime)"
-            ></div>
+                v-text="'限时时间：' + showDuration(source.MaxExistTime)"></div>
             <!-- 最大拥有数 -->
             <div
                 v-if="parseInt(source.MaxExistAmount) > 1"
                 class="u-max-exist-amount"
-                v-text="'最大拥有数：' + source.MaxExistAmount"
-            ></div>
+                v-text="'最大拥有数：' + source.MaxExistAmount"></div>
             <!-- 武器类别 -->
-            <div v-if="source.AucGenre == 1" class="u-weapon-type-label">近身武器</div>
-            <div v-if="source.AucGenre == 2" class="u-weapon-type-label">远程武器</div>
+            <div v-if="source.AucGenre == 1" class="u-weapon-type-label"
+                >武器</div
+            >
+            <div v-if="source.AucGenre == 2" class="u-weapon-type-label"
+                >暗器</div
+            >
             <!-- 物品类型文案 -->
-            <div v-if="source.TypeLabel" class="u-type-label" v-text="source.TypeLabel"></div>
+            <div
+                v-if="source.TypeLabel"
+                class="u-type-label"
+                v-text="source.TypeLabel"></div>
             <!-- 装备属性 -->
-            <div class="u-attributes" v-if="source.attributes && source.attributes.length">
+            <div
+                class="u-attributes"
+                v-if="source.attributes && source.attributes.length">
                 <div
-                    v-for="(attribute, key) in source.attributes"
+                    v-for="(attribute, key) in common_attributes"
                     :key="key"
                     class="u-field"
-                    :class="[`u-${attribute.color}`]"
-                >
+                    :class="[`u-${attribute.color}`]">
                     <span
                         v-if="
                             attribute.type == 'atMeleeWeaponAttackSpeedBase' ||
-                                attribute.type == 'atRangeWeaponAttackSpeedBase'
+                            attribute.type == 'atRangeWeaponAttackSpeedBase'
                         "
                         class="u-value u-speed"
-                        v-text="attribute.label"
-                    ></span>
+                        v-text="attribute.label"></span>
                     <span
                         v-else-if="attribute.type == 'atHorseAttribute'"
-                        class="u-value u-horse-attribute"
-                    >
+                        class="u-value u-horse-attribute">
                         <img
                             v-if="attribute.icon_id > 0"
                             class="u-horse-icon"
-                            :src="iconLink(attribute.icon_id)"
-                        />
-                        <div class="u-horse-desc" v-html="attribute.label"></div>
+                            :src="iconLink(attribute.icon_id)" />
+                        <div
+                            class="u-horse-desc"
+                            v-html="attribute.label"></div>
                     </span>
                     <span v-else class="u-value">
                         <game-text :text="attribute.label"></game-text>
-                        <!-- <span
-                            class="u-yellow"
-                            v-text="
-                                attribute_percent(
-                                    attribute.type,
-                                    attribute.value
-                                )
-                            "
-                        ></span>-->
                     </span>
                 </div>
+                <template v-if="orange_std_attribute.length > 0">
+                    <div class="u-spec-attribute-title u-yellow">
+                        <img
+                            class="u-label-icon"
+                            src="../assets/img/item/std.png" />
+                        <span>特殊属性效果</span>
+                    </div>
+                    <div
+                        class="u-value u-spec-attribute"
+                        v-for="(attribute, key) in orange_std_attribute"
+                        :key="key">
+                        <game-text :text="attribute.label"></game-text>
+                    </div>
+                </template>
+                <template v-if="orange_wujie_attribute.length > 0">
+                    <div class="u-spec-attribute-title u-yellow">
+                        <img
+                            class="u-label-icon"
+                            src="../assets/img/item/wujie.png" />
+                        <span>特殊属性效果</span>
+                    </div>
+                    <div
+                        class="u-value u-spec-attribute"
+                        v-for="(attribute, key) in orange_wujie_attribute"
+                        :key="key">
+                        <game-text :text="attribute.label"></game-text>
+                    </div>
+                    <div class="u-value u-spec-attribute u-orange"
+                        >属性效果双端一致</div
+                    >
+                </template>
             </div>
             <!-- 家具属性 -->
-            <div class="u-furniture-attributes" v-if="source.furniture_attributes">
-                <div class="u-field u-green" v-if="source.furniture_attributes.view">
-                    <span class="u-value" v-text="`观赏提高${source.furniture_attributes.view}`"></span>
+            <div
+                class="u-furniture-attributes"
+                v-if="source.furniture_attributes">
+                <div
+                    class="u-field u-green"
+                    v-if="source.furniture_attributes.view">
+                    <span
+                        class="u-value"
+                        v-text="
+                            `观赏提高${source.furniture_attributes.view}`
+                        "></span>
                 </div>
-                <div class="u-field u-green" v-if="source.furniture_attributes.practical">
-                    <span class="u-value" v-text="`实用提高${source.furniture_attributes.practical}`"></span>
+                <div
+                    class="u-field u-green"
+                    v-if="source.furniture_attributes.practical">
+                    <span
+                        class="u-value"
+                        v-text="
+                            `实用提高${source.furniture_attributes.practical}`
+                        "></span>
                 </div>
-                <div class="u-field u-green" v-if="source.furniture_attributes.hard">
-                    <span class="u-value" v-text="`坚固提高${source.furniture_attributes.hard}`"></span>
+                <div
+                    class="u-field u-green"
+                    v-if="source.furniture_attributes.hard">
+                    <span
+                        class="u-value"
+                        v-text="
+                            `坚固提高${source.furniture_attributes.hard}`
+                        "></span>
                 </div>
-                <div class="u-field u-green" v-if="source.furniture_attributes.geomantic">
-                    <span class="u-value" v-text="`风水提高${source.furniture_attributes.geomantic}`"></span>
+                <div
+                    class="u-field u-green"
+                    v-if="source.furniture_attributes.geomantic">
+                    <span
+                        class="u-value"
+                        v-text="
+                            `风水提高${source.furniture_attributes.geomantic}`
+                        "></span>
                 </div>
-                <div class="u-field u-green" v-if="source.furniture_attributes.interesting">
-                    <span class="u-value" v-text="`趣味提高${source.furniture_attributes.interesting}`"></span>
+                <div
+                    class="u-field u-green"
+                    v-if="source.furniture_attributes.interesting">
+                    <span
+                        class="u-value"
+                        v-text="
+                            `趣味提高${source.furniture_attributes.interesting}`
+                        "></span>
                 </div>
             </div>
             <!-- 镶嵌 -->
             <ul v-if="source.Diamonds" class="u-diamonds u-gray">
                 <!-- 五行石 -->
-                <li class="u-diamond" v-for="(label, key) in source.Diamonds" :key="key">
+                <li
+                    class="u-diamond"
+                    v-for="(label, key) in source.Diamonds"
+                    :key="key">
                     <span class="u-square"></span>
                     <span class="u-text" v-text="`镶嵌孔：${label}`"></span>
                 </li>
@@ -111,38 +206,36 @@
             <div
                 v-if="source.Requires && source.Requires[7]"
                 class="u-require-sex"
-                v-text="source.Requires[7]"
-            ></div>
+                v-text="source.Requires[7]"></div>
             <!-- 需要门派 -->
             <div
                 v-if="source.Requires && source.Requires[6]"
                 class="u-require-school"
-                v-text="source.Requires[6]"
-            ></div>
+                v-text="source.Requires[6]"></div>
             <!-- 需要等级 -->
             <div
                 v-if="source.Requires && source.Requires[5]"
                 class="u-require-level"
-                v-text="source.Requires[5]"
-            ></div>
+                v-text="source.Requires[5]"></div>
             <!-- 需要阵营 -->
             <div
                 v-if="source.Requires && source.Requires[100]"
                 class="u-require-camp"
-                v-text="source.Requires[100]"
-            ></div>
+                v-text="source.Requires[100]"></div>
             <!-- 需求宅邸等级 -->
             <div
                 v-if="source.Requires && source.Requires[101]"
                 class="u-require-homeland-level"
-                v-text="source.Requires[101]"
-            ></div>
+                v-text="source.Requires[101]"></div>
             <!-- 最大耐久度 -->
             <div
-                v-if="source.AucGenre >= 1 && source.AucGenre <= 3 && source.MaxDurability"
+                v-if="
+                    source.AucGenre >= 1 &&
+                    source.AucGenre <= 3 &&
+                    source.MaxDurability
+                "
                 class="u-max-durability"
-                v-text="'最大耐久度' + source.MaxDurability"
-            ></div>
+                v-text="'最大耐久度' + source.MaxDurability"></div>
             <!-- 套装信息 -->
             <div v-if="source.Set" class="u-set">
                 <br />
@@ -150,94 +243,119 @@
                     class="u-yellow"
                     v-text="
                         `${source.Set.name}(1/${source.Set.siblings.length})`
-                    "
-                ></div>
+                    "></div>
                 <ul class="u-set-siblings u-gray">
                     <li
                         v-for="(sibling, key) in source.Set.siblings"
                         :key="key"
-                        v-text="sibling"
-                        :class="{ 'u-yellow': sibling == source.Name }"
-                    ></li>
+                        :class="{
+                            'u-yellow':
+                                sibling == source.Name ||
+                                sibling?.includes(source.Name),
+                        }">
+                        {{
+                            sibling
+                                .split("/")
+                                .map(s => s.trim())
+                                .sort((a, b) => a.localeCompare(b))
+                                .join(" / ")
+                        }}</li
+                    >
                 </ul>
                 <br />
                 <ul class="u-set-attributes u-gray">
                     <li
                         v-for="(attribute, key) in source.Set.attributes"
-                        :key="key"
-                    >
-                        <span>{{`[${key}]`}}</span>
-                        <game-text :client="client" :text="attribute" :ignore-color="true"></game-text>
+                        :key="key">
+                        <span>{{ `[${key}]` }}</span>
+                        <game-text
+                            :client="client"
+                            :text="attribute"
+                            :ignore-color="true"></game-text>
                     </li>
                 </ul>
                 <br />
             </div>
             <!-- 图片 -->
             <div class="u-image-url" v-if="source.ImageUrl">
-                <img :src="source.ImageUrl" @error.once="source.ImageUrl=null" />
+                <img
+                    :src="source.ImageUrl"
+                    @error.once="source.ImageUrl = null" />
             </div>
             <!-- 描述 -->
-            <p 
-                v-if="source.Desc"
-                class="u-desc u-yellow">
+            <p v-if="source.Desc" class="u-desc u-yellow">
                 <game-text :client="client" :text="source.Desc"></game-text>
             </p>
             <!-- 五彩石属性 -->
-            <p v-if="source.WuCaiHtml" class="u-desc" v-html="source.WuCaiHtml"></p>
+            <p
+                v-if="source.WuCaiHtml"
+                class="u-desc"
+                v-html="source.WuCaiHtml"></p>
             <!-- 品质等级 -->
-            <div v-if="source.Level" class="u-level u-yellow" v-text="'品质等级' + source.Level"></div>
+            <div
+                v-if="source.Level"
+                class="u-level u-yellow"
+                v-text="'品质等级' + source.Level"></div>
             <!-- 装备分数 -->
             <div
-                v-if="source.EquipmentRating"
+                v-if="Number(source.EquipmentRating)"
                 class="u-equipment-rating u-orange"
-                v-text="'装备分数' + source.EquipmentRating"
-            ></div>
+                v-text="'装备分数' + source.EquipmentRating"></div>
             <!-- 推荐门派心法 -->
             <div
                 v-if="source.Recommend"
                 class="u-equipment-recommend"
-                v-text="'推荐门派：' + source.Recommend"
-            ></div>
+                v-text="'推荐门派：' + source.Recommend"></div>
             <!-- 冷却时间 -->
             <div
                 v-if="source.CoolDown"
                 class="u-equipment-recommend"
-                v-text="'使用间隔' + second_format(source.CoolDown)"
-            ></div>
+                v-text="'使用间隔' + second_format(source.CoolDown)"></div>
             <!-- 外观名称 -->
-            <div v-if="source.Appearance" class="u-appearance" v-text="'外观名称：' + source.Appearance"></div>
+            <div
+                v-if="source.Appearance"
+                class="u-appearance"
+                v-text="'外观名称：' + source.Appearance"></div>
             <!-- 可收集门派 -->
             <div
                 v-if="source.CanExterior"
                 class="u-can-exterior"
-                v-text="'外观：' + source.CanExterior"
-            ></div>
+                v-text="'外观：' + source.CanExterior"></div>
             <!-- 储物箱共享 -->
             <div
                 v-if="
                     source.CanShared &&
-                        !(source.AucGenre >= 1 && source.AucGenre <= 4)
+                    !(source.AucGenre >= 1 && source.AucGenre <= 4)
                 "
                 class="u-can-shared"
-            >该物品可以放入账号储物箱共享。</div>
+                >该物品可以放入账号储物箱共享。</div
+            >
             <div
                 v-if="
                     source.CanShared &&
-                        source.AucGenre >= 1 &&
-                        source.AucGenre <= 4
+                    source.AucGenre >= 1 &&
+                    source.AucGenre <= 4
                 "
                 class="u-can-shared"
-            >该装备未精炼、镶嵌、附魔、穿戴前可以放入账号储物箱共享。</div>
+                >该装备未精炼、镶嵌、附魔、穿戴前可以放入账号储物箱共享。</div
+            >
             <!-- 家具可交互可缩放 -->
             <div v-if="source.furniture_attributes" class="u-furniture-can">
                 <span v-if="source.furniture_attributes.interact">可交互</span>
                 <span
                     v-if="source.furniture_attributes.scale_range"
-                    v-text="`可缩放(${source.furniture_attributes.scale_range.replace(';',' - ')}倍)`"
-                ></span>
+                    v-text="
+                        `可缩放(${source.furniture_attributes.scale_range.replace(
+                            ';',
+                            ' - '
+                        )}倍)`
+                    "></span>
             </div>
             <!-- 物品来源 -->
-            <div v-if="source.GetType" class="u-get-type" v-text="`物品来源：${source.GetType}`"></div>
+            <div
+                v-if="source.GetType"
+                class="u-get-type"
+                v-text="`物品来源：${source.GetType}`"></div>
         </div>
     </div>
 </template>
@@ -253,24 +371,24 @@ 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'
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
 dayjs.extend(duration);
 
 export default {
     name: "Item",
     props: {
         item: {
-            type: Object
+            type: Object,
         },
         item_id: {
-            type: String
+            type: String,
         },
         client: {
-            type: String
+            type: String,
         },
         jx3ClientType: {
-            type: Number
+            type: Number,
         },
     },
     data() {
@@ -279,35 +397,59 @@ export default {
         };
     },
     components: {
-        GameText
+        GameText,
     },
-    computed : {
+    computed: {
         // 兼容旧版传值
-        env_client_id : function (){
-            return location.href.includes('origin') ? 2 : 1  
+        env_client_id: function () {
+            return location.href.includes("origin") ? 2 : 1;
         },
-        client_id : function (){
-            return  this.jx3ClientType || this.env_client_id
+        client_id: function () {
+            return this.jx3ClientType || this.env_client_id;
         },
-        client_by_id : function (){
-            return  this.client_id == 1 ? 'std' : 'origin'
+        client_by_id: function () {
+            return this.client_id == 1 ? "std" : "origin";
         },
         // 新版传值
-        final_client : function (){
-            return this.client || this.client_by_id
+        final_client: function () {
+            return this.client || this.client_by_id;
+        },
+        cache_key: function () {
+            return `item-${this.final_client}-${this.item_id}`;
+        },
+        // 是否展示装备类型
+        show_equip_usage() {
+            if (Number(this.source?.AucGenre) === 1 && this.source.Quality > 4)
+                return false;
+            if ([1, 2, 3].includes(Number(this.source?.AucGenre))) return true;
+            if (this.source?.AucGenre == 4 && this.source?.AucSubType < 4)
+                return true;
+            return false;
+        },
+        common_attributes() {
+            return this.source?.attributes?.filter(
+                item => item.color != "orange"
+            );
+        },
+        orange_std_attribute() {
+            return this.source?.attributes?.filter(
+                item => item.color == "orange" && !item.is_mobile
+            );
         },
-        cache_key : function (){
-            return `item-${this.final_client}-${this.item_id}`  
+        orange_wujie_attribute() {
+            return this.source?.attributes?.filter(
+                item => item.color == "orange" && item.is_mobile
+            );
         },
     },
     methods: {
-        iconLink : function (id){
-            return iconLink(id,this.final_client)
+        iconLink: function (id) {
+            return iconLink(id, this.final_client);
         },
         second_format,
-        showDuration : function (val){
-            val = Number(val)
-            return val && dayjs.duration(val).asDays().toFixed(0) + '天';
+        showDuration: function (val) {
+            val = Number(val);
+            return val && dayjs.duration(val).asDays().toFixed(0) + "天";
         },
         attribute_percent,
         bind,
@@ -331,23 +473,26 @@ export default {
                     let _cache = sessionStorage.getItem(this.cache_key);
 
                     // 本地读取缓存
-                    if(_cache){
-                        try{
-                            this.source = JSON.parse(_cache)
-                        }catch(e){
-                            console.log(e,'[Item]无法解析本地缓存')
+                    if (_cache) {
+                        try {
+                            this.source = JSON.parse(_cache);
+                        } catch (e) {
+                            console.log(e, "[Item]无法解析本地缓存");
                         }
 
-                    // 服务端拉取
-                    }else{
-                        get_item(this.item_id, this.final_client).then((res) => {
+                        // 服务端拉取
+                    } else {
+                        get_item(this.item_id, this.final_client).then(res => {
                             let item = res.data;
-                            let isValidItem = JSON.stringify(item) !== "{}"
-                            if(isValidItem){
-                                this.source = item
-                                sessionStorage.setItem(this.cache_key,JSON.stringify(this.source));
-                            }else{
-                                this.source = null
+                            let isValidItem = JSON.stringify(item) !== "{}";
+                            if (isValidItem) {
+                                this.source = item;
+                                sessionStorage.setItem(
+                                    this.cache_key,
+                                    JSON.stringify(this.source)
+                                );
+                            } else {
+                                this.source = null;
                             }
                         });
                     }
@@ -360,4 +505,4 @@ export default {
 
 <style lang="less">
 @import "../assets/css/module/item.less";
-</style>
+</style>