@jx3box/jx3box-ui 0.0.1

package/src/editor/components/GameText.vue

@@ -0,0 +1,242 @@
+<!--
+ * @Author: X3ZvaWQ
+ * @Date: 2022-08-20 20:23:57
+ * @LastEditors: X3ZvaWQ
+ * @LastEditTime: 2022-08-24 22:32:56
+ * @Description: 用于渲染游戏内Text标签的文本
+-->
+<template>
+    <span v-html="html"></span>
+</template>
+
+<script>
+import { extractTextContent, getLink, iconLink } from "@jx3box/jx3box-common/js/utils";
+import { getResource as getResourceFromNode } from "../../../service/resource";
+import { escape } from "lodash";
+
+export default {
+    name: "GameText",
+    props: {
+        text: {
+            type: String,
+            default: "",
+        },
+        ignoreColor: {
+            type: Boolean,
+            default: false,
+        },
+        client: {
+            type: String,
+            default: "std",
+        },
+    },
+    data: function () {
+        return {
+            html: "",
+        };
+    },
+    methods: {
+        /**
+         * 渲染某一个单独的Text标签成Span或链接
+         * @param {*} school_id
+         * @returns
+         */
+        renderItemHtml: function (item) {
+            let content = item.text;
+            let style = ``;
+            let link = null;
+            content = content.replace(/\\n/g, "<br />").replace(/\\/g, "");
+            if ([item.r, item.g, item.b].every((v) => v != undefined && v > 0)) {
+                style = `color: rgb(${item.r}, ${item.g}, ${item.b});`;
+            } else if (item.font != undefined && item.font != 100) {
+                const fonts = require("../../../assets/data/game_font.json");
+                for (let color in fonts) {
+                    if (fonts[color].includes(item.font)) {
+                        style = `color: ${color};`;
+                        break;
+                    }
+                }
+            }
+            if (item.name == "iteminfolink" && item.script) {
+                let item_type = item.script?.match(/this\.dwTabType=(\d+)/i)?.[1];
+                let item_index = item.script?.match(/this\.dwIndex=(\d+)/i)?.[1];
+                if (item_type && item_index) {
+                    let item_id = `${item_type}_${item_index}`;
+                    link = getLink("item", item_id);
+                }
+            }
+            if (this.ignoreColor) {
+                style = "";
+            }
+            if (link) {
+                return `<a style="${style} text-decoration: none;" target="_blank" href="${link}">${content}</a>`;
+            } else {
+                return `<span style="${style}">${content}</span>`;
+            }
+        },
+        /**
+         * 将image标签转换为HTML标签
+         */
+        renderImageHtml: function (Text) {
+            // <image>path="fromiconid" frame=1241 w=29 h=29 </image>
+            let matches = Text.match(/<image>(.*?)<\/image>/gims);
+            if (!matches) return Text;
+            for (let match of matches) {
+                let icon_id = match.match(/frame=(\d+)/i)?.[1];
+                let w = parseInt(match.match(/w=(\d+)/i)?.[1]) / 1.12;
+                let h = parseInt(match.match(/h=(\d+)/i)?.[1]) / 1.12;
+                let src = iconLink(icon_id, this.client);
+                let html = `<img src="${src}" style="width: ${w}px; height: ${h}px; margin-bottom: -5px" />`;
+                Text = Text.replace(match, html);
+            }
+            return Text;
+        },
+        /**
+         * 将一段游戏内文本转换为Html
+         * @param {Object[]} texts 标签对象
+         */
+        renderTextHtml: function (Text) {
+            let result = Text;
+            result = this.renderImageHtml(result);
+            const matches = Text.match(/<Text>(.*?)<\/text>/gims);
+            if (!matches) return Text;
+            for (let match of matches) {
+                let text = extractTextContent(match);
+                let html = this.renderItemHtml(text[0]);
+                result = result.replace(match, html);
+            }
+            return result;
+        },
+        /**
+         * 获取形如<BUFF 110 1 desc>, <ENCHANT 100>的资源字段并转换
+         */
+        renderBuffResource: async function () {
+            const matches = this.html?.match(/<BUFF (\d+) (\d+) (.*?)>/gim);
+            if (!matches) return;
+            let resourceKeys = [];
+            let replaceMap = {};
+            //先统计需要的资源，减少请求数量
+            for (let match of matches) {
+                let [token, id, level, type] = match.match(/<BUFF (\d+) (\d+) (.*?)>/i);
+                resourceKeys.push(`${id}_${level}`);
+                if (level != 0) resourceKeys.push(`${id}_0`);
+                replaceMap[token] = [id, level, type];
+            }
+            await this.getAllResources("buff", resourceKeys, this.client);
+            for (let replace in replaceMap) {
+                let [id, level, type] = replaceMap[replace];
+                // 持续时间
+                if (type === "time") {
+                    let interval;
+                    let buff = this.getResource("buff", id, level);
+                    if (buff["Interval"]) interval = buff["Interval"];
+                    else interval = this.getResource("buff", id, 0)["Interval"];
+                    if (!interval) {
+                        console.log(replace, escape(replace));
+                        this.html = this.html.replace(replace, escape(replace));
+                        continue;
+                    }
+                    let time = interval / 16;
+                    if (time > 60) {
+                        time = Math.floor(time / 60) + "分钟";
+                    } else {
+                        time = time + "秒";
+                    }
+                    this.html = this.html.replace(replace, escape(time));
+                    continue;
+                }
+                // buff描述
+                if (type === "desc") {
+                    let buff = this.getResource("buff", id, level);
+                    let desc = buff["Desc"];
+                    if (!desc) desc = this.getResource("buff", id, 0)["Desc"];
+                    if (!desc) {
+                        this.html = this.html.replace(replace, escape(replace));
+                        continue;
+                    }
+                    // buff的描述里面可能会混着一些buff的属性啥的
+                    let _matches = desc.match(/<BUFF ([0-9a-zA-Z]+)>/gi);
+                    if (_matches) {
+                        for (let _m of _matches) {
+                            // eslint-disable-next-line no-unused-vars
+                            let [_, _attr] = _m.match(/<BUFF ([0-9a-zA-Z]+)>/i);
+                            for (let i = 1; i < 15; i++) {
+                                if (buff[`BeginAttrib${i}`] == _attr) {
+                                    desc = desc.replace(_m, buff[`BeginValue${i}A`]);
+                                }
+                            }
+                        }
+                    }
+                    this.html = this.html.replace(replace, desc);
+                }
+            }
+        },
+        renderEnchantResource: async function () {
+            const matches = this.html.match(/<ENCHANT (\d+)>/gim);
+            if (!matches) return;
+            let resourceKeys = [];
+            let replaceMap = {};
+            for (let match of matches) {
+                let enchant_id = match.match(/<ENCHANT (\d+)>/i)[1];
+                resourceKeys.push(enchant_id);
+                replaceMap[match] = enchant_id;
+            }
+            await this.getAllResources("enchant", resourceKeys, this.client);
+            for (let replace in replaceMap) {
+                try {
+                    let enchant_id = replaceMap[replace];
+                    let enchant = this.getResource("enchant", enchant_id);
+                    let time = enchant.Time;
+                    if (time) time = `，持续${parseInt(time) / 60}分钟。`;
+                    let result = `${enchant.AttriName}${time ? time : ""}`;
+                    this.html = this.html.replace(replace, result);
+                } catch (e) {
+                    console.log(e);
+                    this.html = this.html.replace(replace, escape(replace));
+                }
+            }
+        },
+        renderResource: function () {
+            this.renderBuffResource();
+            this.renderEnchantResource();
+        },
+        getAllResources: async function (type, ids) {
+            let resources = await getResourceFromNode(type, ids, this.client);
+            let data = resources.data;
+            if (data.length === undefined) data = [data];
+            if (type == "buff") {
+                for (let item of data) {
+                    let buff_token = `${item.BuffID}_${item.Level}`;
+                    sessionStorage.setItem(`buff-${this.client}-${buff_token}`, JSON.stringify(item));
+                }
+            } else if (type == "enchant") {
+                for (let item of data) {
+                    let enchant_token = `${item.ID}`;
+                    sessionStorage.setItem(`enchant-${this.client}-${enchant_token}`, JSON.stringify(item));
+                }
+            }
+        },
+        getResource: function (type, id, level) {
+            let token = `${id}`;
+            if (type == "buff") {
+                token = `${id}_${level}`;
+            }
+            let resource = sessionStorage.getItem(`${type}-${this.client}-${token}`);
+            if (resource) return JSON.parse(resource);
+            return null;
+        },
+    },
+    watch: {
+        text: {
+            immediate: true,
+            handler: function (val) {
+                if (!val) return;
+                this.html = this.renderTextHtml(val);
+                this.renderResource();
+            },
+        },
+    },
+};
+</script>
+
+<style></style>

package/src/editor/components/Item.vue

@@ -0,0 +1,325 @@
+<template>
+    <div
+        v-if="source"
+        class="c-item"
+        :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>
+            </div>
+            <!-- 物品名称 -->
+            <div class="u-title" :style="{ color: color(source.Quality) }" v-text="source.Name"></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.MaxExistTime) > 0"
+                class="u-max-exist-time"
+                v-text="'限时时间：' + showDuration(source.MaxExistTime)"
+            ></div>
+            <!-- 最大拥有数 -->
+            <div
+                v-if="parseInt(source.MaxExistAmount) > 1"
+                class="u-max-exist-amount"
+                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.TypeLabel" class="u-type-label" v-text="source.TypeLabel"></div>
+            <!-- 装备属性 -->
+            <div class="u-attributes" v-if="source.attributes && source.attributes.length">
+                <div
+                    v-for="(attribute, key) in source.attributes"
+                    :key="key"
+                    class="u-field"
+                    :class="[`u-${attribute.color}`]"
+                >
+                    <span
+                        v-if="
+                            attribute.type == 'atMeleeWeaponAttackSpeedBase' ||
+                            attribute.type == 'atRangeWeaponAttackSpeedBase'
+                        "
+                        class="u-value u-speed"
+                        v-text="attribute.label"
+                    ></span>
+                    <span v-else-if="attribute.type == 'atHorseAttribute'" 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>
+                    </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>
+            </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>
+                <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>
+                <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>
+            </div>
+            <!-- 镶嵌 -->
+            <ul v-if="source.Diamonds" class="u-diamonds u-gray">
+                <!-- 五行石 -->
+                <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>
+                <!-- 五彩石 -->
+                <li v-if="source.AucGenre == 1" class="u-diamond">
+                    <span class="u-square"></span>
+                    <span class="u-text">&lt;只能镶嵌五彩石&gt;</span>
+                </li>
+            </ul>
+            <!-- 仅性别可穿戴 -->
+            <div v-if="source.Requires && source.Requires[7]" class="u-require-sex" v-text="source.Requires[7]"></div>
+            <!-- 需要门派 -->
+            <div
+                v-if="source.Requires && source.Requires[6]"
+                class="u-require-school"
+                v-text="source.Requires[6]"
+            ></div>
+            <!-- 需要等级 -->
+            <div v-if="source.Requires && source.Requires[5]" class="u-require-level" v-text="source.Requires[5]"></div>
+            <!-- 需要阵营 -->
+            <div
+                v-if="source.Requires && source.Requires[100]"
+                class="u-require-camp"
+                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>
+            <!-- 最大耐久度 -->
+            <div
+                v-if="source.AucGenre >= 1 && source.AucGenre <= 3"
+                class="u-max-durability"
+                v-text="'最大耐久度' + source.MaxDurability"
+            ></div>
+            <!-- 套装信息 -->
+            <div v-if="source.Set" class="u-set">
+                <br />
+                <div class="u-yellow" v-text="`${source.Set.name}(1/${source.Set.siblings.length})`"></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>
+                </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>
+                    </li>
+                </ul>
+                <br />
+            </div>
+            <!-- 图片 -->
+            <div class="u-image-url" v-if="source.ImageUrl">
+                <img :src="source.ImageUrl" @error.once="source.ImageUrl = null" />
+            </div>
+            <!-- 描述 -->
+            <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>
+            <!-- 品质等级 -->
+            <div v-if="source.Level" class="u-level u-yellow" v-text="'品质等级' + source.Level"></div>
+            <!-- 装备分数 -->
+            <div
+                v-if="source.EquipmentRating"
+                class="u-equipment-rating u-orange"
+                v-text="'装备分数' + source.EquipmentRating"
+            ></div>
+            <!-- 推荐门派心法 -->
+            <div v-if="source.Recommend" class="u-equipment-recommend" v-text="'推荐门派：' + source.Recommend"></div>
+            <!-- 冷却时间 -->
+            <div
+                v-if="source.CoolDown"
+                class="u-equipment-recommend"
+                v-text="'使用间隔' + second_format(source.CoolDown)"
+            ></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>
+            <!-- 储物箱共享 -->
+            <div v-if="source.CanShared && !(source.AucGenre >= 1 && source.AucGenre <= 4)" class="u-can-shared">
+                该物品可以放入账号储物箱共享。
+            </div>
+            <div v-if="source.CanShared && source.AucGenre >= 1 && source.AucGenre <= 4" class="u-can-shared">
+                该装备未精炼、镶嵌、附魔、穿戴前可以放入账号储物箱共享。
+            </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>
+            </div>
+            <!-- 物品来源 -->
+            <div v-if="source.GetType" class="u-get-type" v-text="`物品来源：${source.GetType}`"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { get_item } from "../../../service/item.js";
+
+import GameText from "./GameText.vue";
+
+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 * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { iconLink } = utilModule;
+
+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: "ItemComponent",
+    props: {
+        item: {
+            type: Object,
+        },
+        item_id: {
+            type: String,
+        },
+        client: {
+            type: String,
+        },
+        jx3ClientType: {
+            type: Number,
+        },
+    },
+    data() {
+        return {
+            source: null,
+        };
+    },
+    components: {
+        GameText,
+    },
+    computed: {
+        // 兼容旧版传值
+        env_client_id: function () {
+            return location.href.includes("origin") ? 2 : 1;
+        },
+        client_id: function () {
+            return this.jx3ClientType || this.env_client_id;
+        },
+        client_by_id: function () {
+            return this.client_id == 1 ? "std" : "origin";
+        },
+        // 新版传值
+        final_client: function () {
+            return this.client || this.client_by_id;
+        },
+        cache_key: function () {
+            return `item-${this.final_client}-${this.item_id}`;
+        },
+    },
+    methods: {
+        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) + "天";
+        },
+        attribute_percent,
+        bind,
+        color,
+        formatDescHtml: function (str) {
+            return str.replace(/font=\d+\s>/g, "");
+        },
+    },
+    watch: {
+        item: {
+            immediate: true,
+            handler() {
+                if (typeof this.item !== "undefined") this.source = this.item;
+            },
+        },
+        item_id: {
+            immediate: true,
+            handler(val) {
+                if (val) {
+                    // 提取本地数据
+                    let _cache = sessionStorage.getItem(this.cache_key);
+
+                    // 本地读取缓存
+                    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) => {
+                            let data = res.data;
+                            if (data.code === 200) {
+                                let item = data.data.item;
+                                let isValidItem = JSON.stringify(item) !== "{}";
+                                if (isValidItem) {
+                                    this.source = item;
+                                    sessionStorage.setItem(this.cache_key, JSON.stringify(this.source));
+                                } else {
+                                    this.source = null;
+                                }
+                            }
+                        });
+                    }
+                }
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../../assets/css/module/item.less";
+</style>