@jx3box/jx3box-editor 1.0.5 → 1.0.9

package/assets/img/npc/radar.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M256,0C114.848,0,0,114.848,0,256s114.848,256,256,256s256-114.848,256-256S397.152,0,256,0z M256,320
+			c11.84,0,22.784-3.456,32.288-9.088l45.76,45.76C312.416,373.568,285.536,384,256,384c-70.592,0-128-57.408-128-128
+			s57.408-128,128-128c29.536,0,56.384,10.464,78.08,27.296l-45.792,45.76C278.784,195.456,267.84,192,256,192
+			c-35.296,0-64,28.704-64,64C192,291.296,220.704,320,256,320z M256,96c-88.224,0-160,71.776-160,160s71.776,160,160,160
+			c38.336,0,73.088-14.112,100.672-36.672l45.76,45.76C363.136,459.2,312,480,256,480C132.48,480,32,379.488,32,256
+			C32,132.48,132.48,32,256,32c56,0,107.136,20.8,146.464,54.912l-45.792,45.76C329.088,110.112,294.336,96,256,96z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/assets/img/npc/shield.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m121.472 166.116c2.024 24.213 6.672 57.38 17.189 92.205 22.336 73.956 61.794 126.543 117.339 156.427 55.545-29.884 95.003-82.471 117.338-156.427 10.517-34.822 15.164-67.99 17.19-92.205l-134.528-67.264z"/><path d="m481.854 119.657c-.28-5.394-3.44-10.221-8.271-12.636l-210.875-105.438c-4.223-2.111-9.193-2.111-13.416 0l-210.875 105.438c-4.831 2.415-7.991 7.242-8.271 12.636-.16 3.07-3.628 76.168 21.273 161.035 14.734 50.214 36.406 94.071 64.414 130.354 35.295 45.722 80.659 79.357 134.832 99.973 1.719.653 3.526.98 5.335.98s3.616-.327 5.335-.98c54.173-20.615 99.537-54.251 134.832-99.973 28.008-36.283 49.68-80.141 64.414-130.354 24.901-84.867 21.433-157.965 21.273-161.035zm-219.206 325.414c-2.095 1.036-4.372 1.554-6.648 1.554s-4.554-.518-6.648-1.554c-66.792-33.024-113.696-92.938-139.408-178.076-12.86-42.583-17.503-82.709-19.133-108.871-.375-6.008 2.879-11.657 8.263-14.349l150.219-75.109c4.223-2.11 9.193-2.111 13.416 0l150.22 75.109c5.384 2.691 8.638 8.342 8.263 14.35-1.631 26.164-6.274 66.291-19.134 108.87-25.714 85.137-72.618 145.051-139.41 178.076z"/></g></svg>

package/assets/img/npc/sight.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m256 303.221c24.951 0 45.25-20.299 45.25-45.25s-20.299-45.25-45.25-45.25-45.25 20.299-45.25 45.25 20.299 45.25 45.25 45.25zm0-60.25c8.409 0 14.636 6.873 15 15 .363 8.101-7.154 15-15 15-8.409 0-14.636-6.873-15-15-.363-8.101 7.154-15 15-15z"/><path d="m508.175 247.964c-1.15-1.284-28.674-31.804-73.237-62.585-59.58-41.155-121.456-62.908-178.938-62.908s-119.357 21.753-178.938 62.908c-44.563 30.782-72.087 61.301-73.237 62.585-5.1 5.696-5.1 14.316 0 20.013 1.15 1.284 28.674 31.804 73.237 62.585 59.581 41.155 121.457 62.908 178.938 62.908s119.357-21.753 178.938-62.908c44.563-30.782 72.087-61.301 73.237-62.585 5.1-5.696 5.1-14.316 0-20.013zm-252.175-65.243c41.493 0 75.25 33.757 75.25 75.25s-33.757 75.25-75.25 75.25-75.25-33.757-75.25-75.25 33.757-75.25 75.25-75.25z"/><path d="m256 100.221c8.284 0 15-6.716 15-15v-50.25c0-8.284-6.716-15-15-15s-15 6.716-15 15v50.25c0 8.284 6.716 15 15 15z"/><path d="m151.813 106.585c2.894 4.318 7.64 6.651 12.474 6.651 2.871 0 5.773-.823 8.337-2.541 6.882-4.612 8.722-13.929 4.11-20.811l-28.774-42.935c-4.611-6.881-13.93-8.722-20.811-4.11-6.882 4.612-8.722 13.929-4.11 20.811z"/><path d="m339.376 110.695c2.564 1.719 5.466 2.541 8.337 2.541 4.834 0 9.581-2.333 12.475-6.651l28.773-42.935c4.611-6.882 2.771-16.199-4.11-20.811-6.882-4.613-16.199-2.772-20.812 4.11l-28.773 42.935c-4.612 6.882-2.772 16.199 4.11 20.811z"/><path d="m256 411.779c-8.284 0-15 6.716-15 15v50.25c0 8.284 6.716 15 15 15s15-6.716 15-15v-50.25c0-8.284-6.716-15-15-15z"/><path d="m360.187 405.415c-4.612-6.882-13.931-8.722-20.812-4.11-6.882 4.612-8.722 13.929-4.11 20.811l28.773 42.935c2.894 4.318 7.64 6.651 12.475 6.651 2.871 0 5.773-.823 8.337-2.541 6.882-4.612 8.722-13.929 4.11-20.811z"/><path d="m172.624 401.305c-6.881-4.612-16.198-2.772-20.811 4.11l-28.774 42.935c-4.612 6.882-2.772 16.199 4.11 20.811 2.564 1.719 5.466 2.541 8.337 2.541 4.834 0 9.581-2.333 12.474-6.651l28.774-42.935c4.613-6.882 2.772-16.199-4.11-20.811z"/></g></svg>

package/assets/img/npc/skull.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 833.7 833.7" style="enable-background:new 0 0 833.7 833.7;" xml:space="preserve">
+<g>
+	<path d="M415.5,88.8C252.9,88.8,121,220.7,121,383.4v138.8c0,7.3,3.4,14.2,9.3,18.7L256.9,637v79.2c0,13,10.5,23.4,23.4,23.4h18.8
+		c13,0,23.4-10.5,23.4-23.4v-32.2c0-8.2,6.6-14.8,14.8-14.8l0,0c8.2,0,14.8,6.6,14.8,14.8v32.2c0,13,10.5,23.4,23.4,23.4h0.8
+		c13,0,23.4-10.5,23.4-23.4v-32.2c0-8.2,6.6-14.8,14.8-14.8h1.6c8.2,0,14.8,6.6,14.8,14.8v32.2c0,13,10.5,23.4,23.4,23.4h0.8
+		c13,0,23.4-10.5,23.4-23.4v-32.2c0-8.2,6.6-14.8,14.8-14.8l0,0c8.2,0,14.8,6.6,14.8,14.8v32.2c0,13,10.5,23.4,23.4,23.4h18.9
+		c13,0,23.4-10.5,23.4-23.4v-79.3l126.6-96.1c5.9-4.5,9.3-11.3,9.3-18.7V383.4C710,220.7,578.1,88.8,415.5,88.8z M292.4,524.5
+		c-44.8,0-81.2-36.4-81.2-81.2c0-44.8,36.4-81.2,81.2-81.2s81.2,36.4,81.2,81.2C373.6,488.2,337.2,524.5,292.4,524.5z M438.6,584.2
+		h-46.1c-10.7,0-17.5-11.5-12.3-20.8l23.1-41.9c5.3-9.7,19.3-9.7,24.6,0l23.1,41.9C456,572.8,449.2,584.2,438.6,584.2z M538.6,524.5
+		c-44.8,0-81.2-36.4-81.2-81.2c0-44.8,36.4-81.2,81.2-81.2c44.8,0,81.2,36.4,81.2,81.2C619.8,488.2,583.5,524.5,538.6,524.5z"/>
+</g>
+</svg>

package/assets/img/npc/target.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="953px" height="953px" viewBox="0 0 953 953" style="enable-background:new 0 0 953 953;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M430.589,953c236.6,0,428.401-191.801,428.401-428.4c0-72.799-18.102-141.299-50.102-201.299c-3.5,0.5-7.1,0.7-10.6,0.7
+			c-2,0-4.1-0.1-6.199-0.2l-54.5-4.2l-39.201,39.2c29.9,48.2,47.201,105,47.201,165.799c0,173.9-141,314.9-314.901,314.9
+			c-173.899,0-315-141-315-314.9c0-173.899,141-314.899,314.9-314.899c60.901,0,117.7,17.3,165.799,47.2l35.5-35.5l-4.799-62.5
+			c-0.4-5-0.301-10,0.199-14.9c-58.9-30.5-125.799-47.8-196.799-47.8c-236.5,0-428.3,191.8-428.3,428.399S193.989,953,430.589,953z"
+			/>
+		<path d="M430.589,413.9c2.8,0,5.6,0.101,8.4,0.3l79.1-79.1l1.699-1.7c-27.1-12.7-57.299-19.8-89.2-19.8
+			c-116.5,0-210.9,94.4-210.9,210.9c0,116.5,94.4,211,210.9,211c116.5,0,210.901-94.4,210.901-210.9
+			c0-31.9-7.102-62.099-19.801-89.2l-1.699,1.7l-79.102,79.099c0.201,2.801,0.301,5.602,0.301,8.4
+			c0,61.1-49.5,110.701-110.7,110.701c-61.2,0-110.601-49.602-110.601-110.701C319.889,463.5,369.489,413.9,430.589,413.9z"/>
+		<path d="M872.089,142.6l25.4-25.4c11.6-11.6,11.6-30.3,0-41.9l-17.602-17.7c-5.799-5.8-13.398-8.7-20.898-8.7
+			s-15.201,2.9-20.9,8.7l-29.1,29.1l-6-77.5c-0.4-5.7-5.102-9.2-10-9.2c-2.5,0-5,0.9-7,2.9l-114.5,114.5
+			c-10.301,10.3-15.602,24.6-14.5,39.2l0.299,4.5l5.5,71.7l-41.4,41.4l-74.5,74.5l-1.699,1.7l-72.1,72.101l-32,32
+			c-4.2,4.199-6.8,9.8-7.2,15.699l-2,25.101c-1.2,14.6,10.4,27,24.9,27c0.399,0,0.8,0,1.3,0l26.5-1.301
+			c6.199-0.301,12.1-2.9,16.4-7.301L532.689,482l72.1-72.1l1.701-1.7l74.5-74.5l45-45l65.398,5l2.9,0.2c1.301,0.1,2.6,0.1,3.801,0.1
+			c13.199,0,25.9-5.2,35.4-14.6L947.888,165c6-6,2.201-16.4-6.299-17L872.089,142.6z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/assets/js/a.js

@@ -18,11 +18,18 @@ function formatLink(str){
             href = resolveImagePath(href)
         }
 
+
         let skip = ''
         if(!whiteHost.test(to.hostname)){
             skip = 'target="_blank"'
         }
 
+        // markdown中的锚点跳转
+        let isHashAnchor = href.startsWith('#')
+        if(isHashAnchor){
+            skip = 'target="_self"'
+        }
+
         let suffix = item[3]
         let text = item[4]
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-editor",
-  "version": "1.0.5",
+  "version": "1.0.9",
   "description": "JX3BOX Article & Editor",
   "main": "index.js",
   "scripts": {
@@ -36,7 +36,7 @@
     "@jx3box/jx3box-emotion": "^1.0.10",
     "@jx3box/jx3box-macro": "^1.0.1",
     "@jx3box/jx3box-talent": "^1.1.2",
-    "@jx3box/markdown": "^0.1.4",
+    "@jx3box/markdown": "^0.1.5",
     "@tinymce/tinymce-vue": "^3.2.2",
     "axios": "^0.19.2",
     "core-js": "^3.6.5",

package/service/database.js

@@ -94,4 +94,15 @@ function getSkill(client = "std", id, level) {
     });
 }
 
-export { loadResource, loadStat, getIcons, getBuff, getSkill };
+function getNpc(client = 'std', id) {
+    return $node().get('/npc/id/' + id, {
+        params: {
+            client,
+            strict: 0,
+            per: 10,
+            page: 1
+        }
+    })
+}
+
+export { loadResource, loadStat, getIcons, getBuff, getSkill, getNpc };

package/src/Article.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="c-article-box">
+    <div class="c-article-tinymce c-article-box">
         <!-- <div id="c-article-origin" class="c-article-origin" ref="origin"><slot></slot></div> -->
         <div id="c-article" class="c-article" ref="article" v-if="pageable">
             <div
@@ -202,7 +202,7 @@ export default {
                 target = "#c-article";
             }
             let dir = renderDirectory(target, this.directorybox);
-            if (dir) this.$emit("directoryRendered");
+            this.$emit("directoryRendered",dir);
         },
         changePage: function (i) {
             this.page = i;

package/src/ArticleMarkdown.vue

@@ -1,10 +1,11 @@
 <template>
     <div class="c-article-markdown">
-        <markdown-render id="c-article" class="c-markdown" ref="article" v-model="origin" @change="updateOrigin" :preRender="doReg"></markdown-render>
+        <markdown-render id="c-article" class="c-markdown c-article" ref="article" v-model="origin" @change="updateOrigin" :preRender="doReg" :xssOptions="xssOptions"></markdown-render>
         <div class="w-jx3-element-pop" :style="jx3_element.style">
             <jx3-item :item_id="item.id" :jx3ClientType="item.client" v-show="jx3_element.type == 'item'" />
             <jx3-buff :client="buff.client" :id="buff.id" :level="buff.level" v-show="jx3_element.type == 'buff'" />
             <jx3-skill :client="skill.client" :id="skill.id" :level="skill.level" v-show="jx3_element.type == 'skill'" />
+            <jx3-npc :client="npc.client" :id="npc.id" v-show="jx3_element.type === 'npc'"></jx3-npc>
         </div>
     </div>
 </template>
@@ -30,6 +31,7 @@ import renderCode from "../assets/js/code";
 import Item from "./Item";
 import Buff from "./Buff";
 import Skill from "./Skill";
+import Npc from "./Npc";
 import renderJx3Element from "../assets/js/jx3_element";
 
 import {xssOptions} from '../assets/data/markdown_whitelist.json'
@@ -64,6 +66,11 @@ export default {
                 id: "",
                 level: "",
             },
+            // NPC
+            npc: {
+                client: 'std',
+                id: ""
+            },
             jx3_element: {
                 style: {
                     top: 0,
@@ -107,7 +114,7 @@ export default {
         doDir: function() {
             let target = "#c-article";
             let dir = renderDirectory(target, this.directorybox);
-            if (dir) this.$emit("directoryRendered");
+            this.$emit("directoryRendered",dir);
         },
         updateOrigin : function (md,html){
             this.html = html
@@ -141,6 +148,7 @@ export default {
         "jx3-item": Item,
         "jx3-buff": Buff,
         "jx3-skill": Skill,
+        "jx3-npc": Npc,
         markdownRender,
     },
 };

package/src/Markdown.vue

@@ -5,17 +5,21 @@
 
         <div class="c-editor-header">
             <Upload v-if="attachmentEnable" @insert="insertAttachments" :enable="true" />
-            <Resource v-if="resourceEnable" @insert="insertResource" :enable="false" />
+            <Resource v-if="resourceEnable" @insert="insertResource" :enable="true" />
         </div>
 
         <slot></slot>
 
-        <markdown-editor class="c-markdown" ref="md" v-model="data" @change="updateData" :subfield="false">
+        <markdown-editor class="c-markdown c-article" ref="md" v-model="data" @change="updateData" :subfield="false" :xssOptions="xssOptions">
             <template slot="left-toolbar-after">
+                <markdown-katex @insert="insertKatex" />
                 <span class="c-markdown-toolbar-image c-markdown-toolbar-item" title="上传图片" @click="selectImages"><i class="el-icon-picture-outline-round"></i></span>
                 <span class="c-markdown-toolbar-file c-markdown-toolbar-item" title="上传附件" @click="selectFiles"><i class="el-icon-paperclip"></i></span>
-                <!-- <macro @insert="insertMacro" /> -->
-                <!-- <pz @insert="insertPz" /> -->
+                <markdown-video @insert="insertVideo" />
+                <markdown-macro @insert="insertMacro" />
+                <markdown-pz @insert="insertPz" />
+                <markdown-talent @insert="insertTalent" />
+                <markdown-talent2 @insert="insertTalent2" />
             </template>
         </markdown-editor>
         <input class="c-markdown-store-item" id="c-markdown-store-images" type="file" @change="uploadImages" ref="markdownImages" multiple :accept="allow_image_types" />
@@ -35,9 +39,12 @@ import Upload from "./Upload";
 import Resource from "./Resource";
 
 // jx3
-// import macro from './components/markdown/macro.vue'
-// import pz from './components/markdown/pz.vue'
-
+import markdownMacro from './components/markdown/macro.vue'
+import markdownPz from './components/markdown/pz.vue'
+import markdownKatex from './components/markdown/katex.vue'
+import markdownTalent from './components/markdown/talent.vue'
+import markdownTalent2 from './components/markdown/talent2.vue'
+import markdownVideo from './components/markdown/video.vue'
 
 export default {
     name: "Markdown",
@@ -67,8 +74,12 @@ export default {
         Upload,
         Resource,
         
-        // macro,
-        // pz,
+        markdownMacro,
+        markdownPz,
+        markdownKatex,
+        markdownTalent,
+        markdownTalent2,
+        markdownVideo,
     },
     data: function() {
         return {
@@ -207,8 +218,12 @@ export default {
             }
         },
         insertResource: function(data) {
-            // TODO:
-            // tinyMCE.editors["tinymce"].insertContent(data);
+            console.log(data)
+            this.$md.insertText(this.$md.getTextareaDom(), {
+                prefix: data,
+                subfix: "",
+                str: "",
+            });
         },
         insertMacro(data) {
             this.$md.insertText(this.$md.getTextareaDom(), {
@@ -223,6 +238,34 @@ export default {
                 subfix: "",
                 str: "",
             });
+        },
+        insertKatex(data) {
+            this.$md.insertText(this.$md.getTextareaDom(), {
+                prefix: data,
+                subfix: "",
+                str: "",
+            });
+        },
+        insertTalent(data) {
+            this.$md.insertText(this.$md.getTextareaDom(), {
+                prefix: data,
+                subfix: "",
+                str: "",
+            });
+        },
+        insertTalent2(data) {
+            this.$md.insertText(this.$md.getTextareaDom(), {
+                prefix: data,
+                subfix: "",
+                str: "",
+            });
+        },
+        insertVideo(data) {
+            this.$md.insertText(this.$md.getTextareaDom(), {
+                prefix: data,
+                subfix: "",
+                str: "",
+            });
         }
     },
     filters: {},

package/src/Npc.vue

@@ -0,0 +1,214 @@
+<template>
+    <div class="w-npc" v-if="data">
+        <div class="w-npc-wrapper">
+            <div class="w-npc-content">
+                <div class="u-npc">
+                    <div class="u-title">
+                        <span class="u-name">{{ data.Name }}</span>
+                        <span class="u-name-add">
+                            <span v-if="data.Title || data.Level">&lt;</span>
+                            <span class="u-nick" v-if="data.Title">
+                                {{ data.Title }}
+                            </span>
+                            <span v-if="data.Title && data.Level">·</span>
+                            <b class="u-level" v-if="data.Level">{{ data.Level }}</b>
+                            <span v-if="data.Title || data.Level">&gt;</span>
+                        </span>
+                        <div class="u-base">
+                            <span class="u-atmap" v-if="data.MapName">
+                                {{ data.MapName }}
+                            </span>
+                            <span class="u-intensity" v-if="data.Intensity">
+                                强度
+                                {{ data.Intensity }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="u-primary">
+                        <div class="u-life">
+                            <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" />
+                            <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" />
+                            <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" />
+                            <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" />
+                            <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" />
+                            <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" />
+                            <b>防御</b>
+                            <em>Shield</em>
+                            <span class="u-sitem">
+                                外功防御
+                                <em>PhysicsShieldBase</em>
+                                <span class="u-value">{{ ~~data.PhysicsShieldBase }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                混元防御
+                                <em>NeutralMagicDefence</em>
+                                <span class="u-value">{{ ~~data.NeutralMagicDefence }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阳性防御
+                                <em>SolarMagicDefence</em>
+                                <span class="u-value">{{ ~~data.SolarMagicDefence }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阴性防御
+                                <em>LunarMagicDefence</em>
+                                <span class="u-value">{{ ~~data.LunarMagicDefence }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                毒性防御
+                                <em>PoisonMagicDefence</em>
+                                <span class="u-value">{{ ~~data.PoisonMagicDefence }}</span>
+                            </span>
+                        </div>
+                        <div class="u-critical">
+                            <img class="u-descicon u-descicon-attack" svg-inline src="../assets/img/npc/attack.svg" />
+                            <b>会心</b>
+                            <em>Critical</em>
+                            <span class="u-sitem">
+                                外功会心
+                                <em>PhysicsCriticalStrike</em>
+                                <span class="u-value">{{ ~~data.PhysicsCriticalStrike }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                混元会心
+                                <em>NeutralCriticalStrike</em>
+                                <span class="u-value">{{ ~~data.NeutralCriticalStrike }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阳性会心
+                                <em>SolarCriticalStrike</em>
+                                <span class="u-value">{{ ~~data.SolarCriticalStrike }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阴性会心
+                                <em>LunarCriticalStrike</em>
+                                <span class="u-value">{{ ~~data.LunarCriticalStrike }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                毒性会心
+                                <em>PoisonCriticalStrike</em>
+                                <span class="u-value">{{ ~~data.PoisonCriticalStrike }}</span>
+                            </span>
+                        </div>
+                        <div class="u-attack">
+                            <img class="u-descicon u-descicon-attack" svg-inline src="../assets/img/npc/target.svg" />
+                            <b>命中</b>
+                            <em>Attack</em>
+                            <span class="u-sitem">
+                                外功命中
+                                <em>PhysicsAttackHit</em>
+                                <span class="u-value">{{ ~~data.PhysicsAttackHit }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                混元命中
+                                <em>NeutralMagicHit</em>
+                                <span class="u-value">{{ ~~data.NeutralMagicHit }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阳性命中
+                                <em>SolarMagicHit</em>
+                                <span class="u-value">{{ ~~data.SolarMagicHit }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                阴性命中
+                                <em>LunarMagicHit</em>
+                                <span class="u-value">{{ ~~data.LunarMagicHit }}</span>
+                            </span>
+                            <span class="u-sitem">
+                                毒性命中
+                                <em>PoisonMagicHit</em>
+                                <span class="u-value">{{ ~~data.PoisonMagicHit }}</span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="u-id">
+                        ID : {{id}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getNpc } from "../service/database.js";
+import { iconLink } from "@jx3box/jx3box-common/js/utils";
+export default {
+    name: "Npc",
+    props: ["client", "id"],
+    data: () => ({
+        data: null,
+    }),
+    computed: {
+        params: function() {
+            return [this.client, this.id];
+        },
+    },
+    watch: {
+        params: {
+            immediate: true,
+            deep: true,
+            handler(val) {
+                if (val) {
+                    let [client, id] = val;
+                    // 读取本地数据
+                    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];
+                                this.data = data;
+
+                                // 将数据放入 sessionStorage
+                                sessionStorage.setItem(`npc-${client}-${id}`, JSON.stringify(data));
+                            });
+                    }
+                }
+            },
+        },
+    },
+    methods: {
+        iconLink: function(id) {
+            return iconLink(id, this.client);
+        },
+    },
+};
+</script>
+
+<style scoped lang="less">
+@import "../assets/css/module/npc.less";
+</style>

package/src/Resource.vue

@@ -109,6 +109,35 @@
                         </ul>
                         <el-alert v-if="!item.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
                     </el-tab-pane>
+                    <el-tab-pane label="Npc" name="npc">
+                        <span slot="label">
+                            <img class="u-icon" svg-inline src="../assets/img/npc/skull.svg" />
+                            <b>Npc</b>
+                            <em class="u-count">{{ stat.npc }}</em>
+                        </span>
+                        <p v-if="npc.length && done" class="m-resource-count">
+                            <i class="el-icon-s-data"></i> 共找到 <b>{{ npc.length }}</b> 条记录
+                        </p>
+                        <ul class="m-resource-list" v-if="npc.length">
+                            <li v-for="(o, i) in npc" :key="i" class="u-item" :class="{ on: o.isSelected }" @click="selectNpc(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 }}
+                                    <em v-if="o.Level">(等级：{{ o.Level }})</em>
+                                </span>
+                                <span class="u-content">
+                                    <span class="u-map">地图：{{ o.MapName }}</span>
+                                    <span class="u-life">血量：{{ o.MaxLife }}</span>
+                                    <span class="u-mana">内力：{{ o.MaxMana }}</span>
+                                </span>
+                                <span class="u-remark">
+                                    {{ o.Requirement }}
+                                </span>
+                            </li>
+                        </ul>
+                        <el-alert v-if="!npc.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
+                    </el-tab-pane>
                     <el-tab-pane label="图标" name="icon">
                         <span slot="label">
                             <img class="u-icon" svg-inline src="../assets/img/icons.svg" />
@@ -192,6 +221,7 @@ export default {
             buff: [],
             item: [],
             icon: [],
+            npc: [],
 
             stat: {
                 skill: 0,
@@ -370,6 +400,11 @@ export default {
             o.isSelected = true;
             this.html = `<img class="e-jx3-icon" src="${__iconPath}${this.iconDir}/${o.iconID}.png" alt="${o.iconID}"/>`;
         },
+        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>`
+        },
         resetItems: function() {
             let data = this[this.type];
             data.forEach((item) => {