@jx3box/jx3box-editor 2.2.48 → 3.0.0

package/src/Npc.vue

@@ -27,43 +27,43 @@
                     </div>
                     <div class="u-primary">
                         <div class="u-life">
-                            <img class="u-descicon u-descicon-life" svg-inline src="../assets/img/npc/energy.svg" />
+                            <img class="u-descicon u-descicon-life" svg-inline src="./assets/img/npc/energy.svg" />
                             <b>血量</b>
                             <em>MaxLife</em>
                             <strong>{{ data.MaxLife }}</strong>
                         </div>
                         <div class="u-mana">
-                            <img class="u-descicon u-descicon-mana" svg-inline src="../assets/img/npc/energy.svg" />
+                            <img class="u-descicon u-descicon-mana" svg-inline src="./assets/img/npc/energy.svg" />
                             <b>内力</b>
                             <em>MaxMana</em>
                             <strong>{{ data.MaxMana }}</strong>
                         </div>
                         <div class="u-touch" v-if="data.TouchRange">
-                            <img class="u-descicon u-descicon-touch" svg-inline src="../assets/img/npc/radar.svg" />
+                            <img class="u-descicon u-descicon-touch" svg-inline src="./assets/img/npc/radar.svg" />
                             <b>范围</b>
                             <em>TouchRange</em>
                             <strong>{{ data.TouchRange }}</strong>
                         </div>
                         <div class="u-sense" v-if="data.Sense">
-                            <img class="u-descicon u-descicon-sense" svg-inline src="../assets/img/npc/sight.svg" />
+                            <img class="u-descicon u-descicon-sense" svg-inline src="./assets/img/npc/sight.svg" />
                             <b>识破</b>
                             <em>Sense</em>
                             <strong>{{ data.Sense }}</strong>
                         </div>
                         <div class="u-dodge" v-if="data.Dodge">
-                            <img class="u-descicon u-descicon-dodge" svg-inline src="../assets/img/npc/miss.svg" />
+                            <img class="u-descicon u-descicon-dodge" svg-inline src="./assets/img/npc/miss.svg" />
                             <b>闪避</b>
                             <em>Dodge</em>
                             <strong>{{ data.Dodge }}</strong>
                         </div>
                         <div class="u-dodge" v-if="data.Parry">
-                            <img class="u-descicon u-descicon-dodge" svg-inline src="../assets/img/npc/miss.svg" />
+                            <img class="u-descicon u-descicon-dodge" svg-inline src="./assets/img/npc/miss.svg" />
                             <b>招架</b>
                             <em>Parry</em>
                             <strong>{{ data.ParryValue }}</strong>
                         </div>
                         <div class="u-shield">
-                            <img class="u-descicon u-descicon-shield" svg-inline src="../assets/img/npc/shield.svg" />
+                            <img class="u-descicon u-descicon-shield" svg-inline src="./assets/img/npc/shield.svg" />
                             <b>防御</b>
                             <em>Shield</em>
                             <span class="u-sitem">
@@ -93,7 +93,7 @@
                             </span>
                         </div>
                         <div class="u-critical">
-                            <img class="u-descicon u-descicon-attack" svg-inline src="../assets/img/npc/attack.svg" />
+                            <img class="u-descicon u-descicon-attack" svg-inline src="./assets/img/npc/attack.svg" />
                             <b>会心</b>
                             <em>Critical</em>
                             <span class="u-sitem">
@@ -123,7 +123,7 @@
                             </span>
                         </div>
                         <div class="u-attack">
-                            <img class="u-descicon u-descicon-attack" svg-inline src="../assets/img/npc/target.svg" />
+                            <img class="u-descicon u-descicon-attack" svg-inline src="./assets/img/npc/target.svg" />
                             <b>命中</b>
                             <em>Attack</em>
                             <span class="u-sitem">
@@ -153,9 +153,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="u-id">
-                        ID : {{id}}
-                    </div>
+                    <div class="u-id">ID : {{ id }}</div>
                 </div>
             </div>
         </div>
@@ -163,48 +161,71 @@
 </template>
 
 <script>
-import { getNpc } from "../service/database.js";
+import { getNpc } from "./service/database.js";
 import { iconLink } from "@jx3box/jx3box-common/js/utils";
 export default {
     name: "Npc",
-    props: ["client", "id"],
+    props: {
+        client: {
+            type: String,
+            default: "std",
+        },
+        id: {
+            type: [String, Number],
+            default: "",
+        },
+    },
     data: () => ({
         data: null,
+        requestVersion: 0,
     }),
     computed: {
-        params: function() {
+        params: function () {
             return [this.client, this.id];
         },
     },
     watch: {
         params: {
             immediate: true,
-            deep: true,
             handler(val) {
+                this.requestVersion += 1;
+                const currentVersion = this.requestVersion;
+
                 if (val) {
                     let [client, id] = val;
+                    if (!id) {
+                        this.data = null;
+                        return;
+                    }
+
                     // 读取本地数据
                     const cache = sessionStorage.getItem(`npc-${client}-${id}`);
                     if (cache) {
-                        this.data = JSON.parse(cache);
-                        // 没有缓存则发起请求获取数据
-                    } else {
-                        id &&
-                            getNpc(...this.params).then((res) => {
-                                let data = res.data?.list?.[0];
-                                if (!data) data = null;
-                                this.data = data;
-
-                                // 将数据放入 sessionStorage
-                                sessionStorage.setItem(`npc-${client}-${id}`, JSON.stringify(data));
-                            });
+                        try {
+                            this.data = JSON.parse(cache);
+                            return;
+                        } catch (e) {
+                            console.log(e, "[Npc]无法解析本地缓存");
+                        }
                     }
+
+                    // 没有缓存则发起请求获取数据
+                    getNpc(client, id).then((res) => {
+                        if (currentVersion !== this.requestVersion) return;
+
+                        let data = res.data?.list?.[0];
+                        if (!data) data = null;
+                        this.data = data;
+
+                        // 将数据放入 sessionStorage
+                        sessionStorage.setItem(`npc-${client}-${id}`, JSON.stringify(data));
+                    });
                 }
             },
         },
     },
     methods: {
-        iconLink: function(id) {
+        iconLink: function (id) {
             return iconLink(id, this.client);
         },
     },
@@ -212,5 +233,5 @@ export default {
 </script>
 
 <style lang="less">
-@import "../assets/css/module/npc.less";
+@import "./assets/css/module/npc.less";
 </style>