@jx3box/jx3box-editor 2.2.47 → 3.0.0

package/src/Article.vue

@@ -1,15 +1,27 @@
 <template>
     <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 class="c-article-chunk" v-for="(text, i) in data" :key="i" v-html="text" :class="{ on: i == page - 1 || all == true }" :id="'c-article-part' + ~~(i + 1)"></div>
+            <div
+                class="c-article-chunk"
+                v-for="(text, i) in data"
+                :key="i"
+                v-html="text"
+                :class="{ on: i == page - 1 || all == true }"
+                :id="'c-article-part' + ~~(i + 1)"
+            ></div>
         </div>
+
         <div id="c-article" class="c-article" ref="article" v-else-if="data && data.length" v-html="data[0]"></div>
+
         <el-button class="c-article-all" type="primary" v-if="!all && hasPages" @click="showAll">加载全部</el-button>
+
         <el-pagination
             class="c-article-pages"
             v-if="!all"
             background
+            center
             :page-size="1"
             :hide-on-single-page="true"
             @current-change="changePage"
@@ -17,75 +29,76 @@
             layout="total, prev, pager, next, jumper"
             :total="total"
         ></el-pagination>
+
         <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-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-author :uid="author.id" v-show="jx3_element.type === 'author'" />
             <jx3-emotion-author :id="emotion.id" v-show="jx3_element.type === 'emotion'" />
         </div>
-        <!-- <gallery :images="images" :index="gallery_index" @close="index = null"></gallery> -->
     </div>
 </template>
 
 <script>
 import $ from "jquery";
-const HEADER_HEIGHT = 112; //头部高度
-
-import { Pagination, Button, Popover } from "element-ui";
-import "@jx3box/jx3box-common/css/element.css";
-
-// 相册
-// import gallery from "vue-gallery-slideshow";
-import Vue from "vue";
-import hevueImgPreview from "hevue-img-preview";
-Vue.use(hevueImgPreview);
 
 // XSS
-import execFilterXSS from "../assets/js/xss";
-// const execFilterXSS = require("xss");
-// const xss_options = {
-//     allowCommentTag: true,
-// };
+import execFilterXSS from "./assets/js/xss";
 
 // 基本文本
-import execLazyload from "../assets/js/img";
-import execFilterIframe from "../assets/js/iframe";
-import execFilterLink from "../assets/js/a";
-import execSplitPages from "../assets/js/nextpage";
+import execLazyload from "./assets/js/img";
+import execFilterIframe from "./assets/js/iframe";
+import execFilterLink from "./assets/js/a";
+import execSplitPages from "./assets/js/nextpage";
 
 // 扩展文本
-import renderFoldBlock from "../assets/js/fold";
-import renderDirectory from "../assets/js/directory";
-import renderMacro from "../assets/js/macro";
-import renderTalent from "../assets/js/qixue";
-import renderTalent2 from "../assets/js/talent2";
-import { renderKatexAll } from "../assets/js/katex";
-import renderCode from "../assets/js/code";
-import renderImgPreview from "../assets/js/renderImgPreview";
-import renderPzIframe from "../assets/js/pz_iframe";
-import renderCombo from "../assets/js/combo";
-import renderAudio from "../assets/js/audio";
+import renderFoldBlock from "./assets/js/fold";
+import renderDirectory from "./assets/js/directory";
+import renderKatex from "./assets/js/katex";
+import renderCode from "./assets/js/code";
+import renderImgPreview from "./assets/js/renderImgPreview";
+
+// 魔盒
+import renderMacro from "./assets/js/macro";
+import renderTalent from "./assets/js/qixue";
+import renderTalent2 from "./assets/js/talent2";
+import renderPzIframe from "./assets/js/pz_iframe";
+import renderCombo from "./assets/js/combo";
+import renderAudio from "./assets/js/audio";
+import Author from "./components/Author";
+import PostAuthor from "./components/PostAuthor.vue";
 
 // 剑三
 import Item from "./Item";
 import Buff from "./Buff";
 import Skill from "./Skill";
 import Npc from "./Npc";
-import Author from "./components/Author";
-import PostAuthor from "./components/PostAuthor.vue";
-import renderJx3Element from "../assets/js/jx3_element";
+import renderJx3Element from "./assets/js/jx3_element";
 
 export default {
     name: "Article",
     props: {
+
+        post_mode : {
+            type: String,
+            default: "tinymce",
+        },
+
         content: String,
+
         // 拼接相对路径地址的图片，需要自带协议
         cdnDomain: {
             type: String,
             default: "https://cdn.jx3box.com",
         },
+
         // 链接白名单检查，不在白名单，使用新窗跳转
         linkWhitelist: {
             type: Array,
@@ -105,7 +118,10 @@ export default {
                 return [];
             },
         },
+
+        // 目录容器选择器
         directorybox: String,
+        // 是否开启分页
         pageable: {
             type: Boolean,
             default: true,
@@ -177,13 +193,33 @@ export default {
         },
     },
     methods: {
+        getHeaderHeight: function () {
+            // 页面上可能没有这些元素，取存在的第一个：.c-header 优先，其次 .c-breadcrumb
+            const el =
+                document.querySelector(".c-header") ||
+                document.querySelector(".c-breadcrumb");
+            if (!el) return 0;
+            const rect = el.getBoundingClientRect && el.getBoundingClientRect();
+            const h = (rect && rect.height) || el.offsetHeight || 0;
+            return Math.max(0, Math.round(h));
+        },
+        scrollToTopWithOffset: function (top) {
+            const headerHeight = this.getHeaderHeight();
+            const targetTop = Math.max(0, (top || 0) - headerHeight);
+            window.scrollTo(0, targetTop);
+        },
         doReg: function (data) {
             if (data) {
                 // 1. 先执行 XSS 过滤（xss.js 已包含所有配置）
                 data = execFilterXSS(data);
 
                 // 2. 然后执行 iframe 白名单过滤
-                data = execFilterIframe(data, ["player.bilibili.com", "docs.qq.com", "open.douyu.com", ...this.iframeWhitelist]);
+                data = execFilterIframe(data, [
+                    "player.bilibili.com",
+                    "docs.qq.com",
+                    "open.douyu.com",
+                    ...this.iframeWhitelist,
+                ]);
 
                 // 3. 处理图片懒加载
                 data = execLazyload(data, this.cdnDomain);
@@ -202,11 +238,10 @@ export default {
             // 代码
             renderCode(`code[class=^'language-']`);
             // Tatex
-            renderKatexAll();
+            renderKatex();
+            // 画廊
+            renderImgPreview($root, "img:not(.e-jx3-emotion-img)");
 
-            // 画廊（需要在宏、奇穴、物品等之前渲染以排除下方自动生成图片）
-            // renderGallery(this)
-            renderImgPreview(this);
             // 宏
             renderMacro();
             // 奇穴
@@ -235,18 +270,27 @@ export default {
 
             if (window.location.hash?.includes("directory")) {
                 let id = window.location.hash;
-                let target = $(`${id}`).offset().top;
-                console.log(target);
-                $(document).scrollTop(target - HEADER_HEIGHT);
+                const $target = $(`${id}`);
+                if ($target.length) {
+                    const top = $target.offset().top;
+                    // 等待目录 DOM 真正插入并布局后再滚动
+                    requestAnimationFrame(() => this.scrollToTopWithOffset(top));
+                }
             }
 
-            $(".w-directory-anchor").on("click", function () {
-                e.preventDefault();
-                let id = $(this).attr("id");
-                let target = $(`#${id}`).offset().top;
-                $(document).scrollTop(target - HEADER_HEIGHT);
-                window.location.hash = `#${id}`;
-            });
+            const vm = this;
+            $(".w-directory-anchor")
+                .off("click.jx3boxArticleDir")
+                .on("click.jx3boxArticleDir", function (e) {
+                    e.preventDefault();
+                    let id = $(this).attr("id");
+                    const $target = $(`#${id}`);
+                    if ($target.length) {
+                        const top = $target.offset().top;
+                        vm.scrollToTopWithOffset(top);
+                    }
+                    window.location.hash = `#${id}`;
+                });
         },
         changePage: function (i) {
             this.page = i;
@@ -297,21 +341,16 @@ export default {
         this.run();
     },
     components: {
-        "el-pagination": Pagination,
-        "el-button": Button,
-        // "el-popover": Popover,
         "jx3-item": Item,
         "jx3-buff": Buff,
         "jx3-skill": Skill,
         "jx3-npc": Npc,
         "jx3-author": Author,
         "jx3-emotion-author": PostAuthor,
-        // "gallery":gallery,
-        // VueViewer
     },
 };
 </script>
 
 <style lang="less">
-@import "../assets/css/article.less";
+@import "./assets/css/article.less";
 </style>

package/src/ArticleMarkdown.vue

@@ -1,46 +1,55 @@
 <template>
     <div class="c-article-markdown">
-        <markdown-render id="c-article" class="c-markdown c-article" ref="article" v-model="origin" @change="updateOrigin" :preRender="doReg" :xssOptions="xssOptions"></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-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>
 
 <script>
-import markdownRender from '@jx3box/markdown/src/render.vue'
-
-import Vue from "vue";
-import hevueImgPreview from "hevue-img-preview";
-Vue.use(hevueImgPreview);
+import markdownRender from "@jx3box/markdown/src/render.vue";
 
 // 基本文本
-import execLazyload from "../assets/js/img";
-import execFilterIframe from "../assets/js/iframe";
-import execFilterLink from "../assets/js/a";
-import execFilterXSS from "../assets/js/script";
+import execLazyload from "./assets/js/img";
+import execFilterIframe from "./assets/js/iframe";
+import execFilterLink from "./assets/js/a";
+import execFilterXSS from "./assets/js/script";
 
 // 扩展文本
-import renderDirectory from "../assets/js/directory";
-import renderMacro from "../assets/js/macro";
-import renderTalent from "../assets/js/qixue";
-import renderTalent2 from "../assets/js/talent2";
-import {renderKatexAll} from "../assets/js/katex";
-import renderCode from "../assets/js/code";
+import renderDirectory from "./assets/js/directory";
+import renderMacro from "./assets/js/macro";
+import renderTalent from "./assets/js/qixue";
+import renderTalent2 from "./assets/js/talent2";
+import { renderKatexAll } from "./assets/js/katex";
+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 renderImgPreview from "../assets/js/renderImgPreview";
-import renderAudio from "../assets/js/audio";
+import renderJx3Element from "./assets/js/jx3_element";
+import renderImgPreview from "./assets/js/renderImgPreview";
+import renderAudio from "./assets/js/audio";
 
-import {xssOptions} from '../assets/data/markdown_whitelist.json'
+import { xssOptions } from "./assets/data/markdown_whitelist.json";
 
 export default {
     name: "ArticleMarkdown",
@@ -48,10 +57,10 @@ export default {
         content: String,
         directorybox: String,
     },
-    data: function() {
+    data: function () {
         return {
             // 原始md
-            origin : '',
+            origin: "",
             // 原始渲染md后的html(传入文本回调处理函数)
             html: "",
 
@@ -74,8 +83,8 @@ export default {
             },
             // NPC
             npc: {
-                client: 'std',
-                id: ""
+                client: "std",
+                id: "",
             },
             jx3_element: {
                 style: {
@@ -87,13 +96,12 @@ export default {
             },
             images: [],
 
-            xssOptions
+            xssOptions,
         };
     },
-    computed: {
-    },
+    computed: {},
     methods: {
-        doReg: function(data) {
+        doReg: function (data) {
             if (data) {
                 // 过滤内容
                 data = execLazyload(data);
@@ -105,7 +113,7 @@ export default {
                 return "";
             }
         },
-        doDOM: function() {
+        doDOM: function () {
             // 宏
             renderMacro();
             // 奇穴
@@ -114,24 +122,24 @@ export default {
             // Tatex
             renderKatexAll();
             // 画廊
-            renderImgPreview(this);
+            renderImgPreview(this.$refs.article, "img:not(.e-jx3-emotion-img)");
             // 语法高亮
-            renderCode(`code[class=^'lang-']`)
+            renderCode(`code[class=^'lang-']`);
             // 音频
             renderAudio();
             // 物品
             renderJx3Element(this);
         },
-        doDir: function() {
+        doDir: function () {
             let target = "#c-article";
             let dir = renderDirectory(target, this.directorybox);
-            this.$emit("directoryRendered",dir);
+            this.$emit("directoryRendered", dir);
         },
-        updateOrigin : function (md,html){
-            this.html = html
-            this.render()
+        updateOrigin: function (md, html) {
+            this.html = html;
+            this.render();
         },
-        render: function() {
+        render: function () {
             // 等待html加载完毕后
             this.$nextTick(() => {
                 this.$emit("contentLoaded");
@@ -146,15 +154,14 @@ export default {
         },
     },
     watch: {
-        content : {
-            immediate : true,
-            handler : function (val){
-                this.origin = val
-            }
-        }
-    },
-    mounted: function() {
+        content: {
+            immediate: true,
+            handler: function (val) {
+                this.origin = val;
+            },
+        },
     },
+    mounted: function () {},
     components: {
         "jx3-item": Item,
         "jx3-buff": Buff,
@@ -166,7 +173,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../assets/css/article_markdown.less";
+@import "./assets/css/article_markdown.less";
 
 .v-note-img-wrapper {
     display: none;

package/src/BoxResource.vue

@@ -4,16 +4,16 @@
 		<el-button class="u-switch" type="primary" @click="openDialog" :disabled="!enable"> <img class="u-icon" svg-inline :src="boxIcon" />魔盒资源 </el-button>
 
 		<!-- 弹出界面 -->
-		<el-dialog v-draggable class="c-large-dialog" title="魔盒资源库" :visible.sync="dialogVisible">
+		<el-dialog draggable class="c-large-dialog" title="魔盒资源库" v-model="dialogVisible" :teleported="true">
 			<div class="c-resource-content" v-loading="loading">
 				<div class="m-database-search">
-					<el-radio-group class="u-client" v-model="comboClient" @change="search" v-if="type === 'combo'">
-						<el-radio-button label="std">重制</el-radio-button>
-						<el-radio-button label="origin">缘起</el-radio-button>
+					<el-radio-group size="large" class="u-client" v-model="comboClient" @change="search" v-if="type === 'combo'">
+						<el-radio-button value="std">重制</el-radio-button>
+						<el-radio-button value="origin">缘起</el-radio-button>
 					</el-radio-group>
-					<el-input class="u-input" :placeholder="placeholderText" v-model="query" @change="search" @keyup.enter.native="search">
-						<template slot="prepend">关键词</template>
-						<template slot="append">
+					<el-input class="u-input" size="large" :placeholder="placeholderText" v-model="query" @change="search" @keyup.enter="search">
+						<template #prepend>关键词</template>
+						<template #append>
 							<el-switch v-model="strict" active-text="精确匹配"></el-switch>
 						</template>
 					</el-input>
@@ -21,13 +21,15 @@
 
 				<el-tabs class="m-database-tabs" v-model="type" type="card" @tab-click="changeType">
 					<el-tab-pane label="魔盒用户" name="authors">
-						<span slot="label" class="u-tab-label">
-							<i class="el-icon-s-custom" style="margin-right: 5px"></i>
-							<b>用户</b>
-							<i class="u-lv-box">Lv2+</i>
-						</span>
+						<template #label>
+							<span class="u-tab-label">
+								<el-icon class="u-tab-icon"><Avatar /></el-icon>
+								<b>用户</b>
+								<i class="u-lv-box">Lv2+</i>
+							</span>
+						</template>
 						<p v-if="total && done" class="m-resource-count">
-							<i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
+							<el-icon><Histogram /></el-icon> 共找到 <b>{{ total }}</b> 条记录
 						</p>
 						<ul class="m-resource-list">
 							<li v-for="(o, i) in authors" class="u-item" :key="i" :class="{ on: !!o.isSelected }" @click="selectAuthor(o, i)" ref="author">
@@ -46,19 +48,23 @@
 						<el-alert v-if="!authors.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
 					</el-tab-pane>
 					<el-tab-pane label="连招" name="combo">
-						<span slot="label" class="u-tab-label">
-							<i class="el-icon-lollipop" style="margin-right: 5px"></i>
-							<b>连招</b>
-						</span>
+						<template #label>
+							<span class="u-tab-label">
+								<el-icon class="u-tab-icon"><Lollipop /></el-icon>
+								<b>连招</b>
+							</span>
+						</template>
 						<ComboVue :query="query" ref="combo" :client="comboClient" :strict="strict" :subtype="subtype"></ComboVue>
 					</el-tab-pane>
 					<el-tab-pane label="剑三趣图" name="emotions">
-						<span slot="label" class="u-tab-label">
-							<i class="el-icon-sugar" style="margin-right: 5px"></i>
-							<b>趣图</b>
-						</span>
+						<template #label>
+							<span class="u-tab-label">
+								<el-icon class="u-tab-icon"><Sugar></Sugar></el-icon>
+								<b>趣图</b>
+							</span>
+						</template>
 						<p v-if="total && done" class="m-resource-count">
-							<i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
+							<el-icon><Histogram /></el-icon> 共找到 <b>{{ total }}</b> 条记录
 						</p>
 						<ul class="m-resource-emotion">
 							<li v-for="o in emotions" class="u-item" :key="o.id" :class="{ on: !!o.isSelected }" @click="selectEmotion(o)" ref="emotion">
@@ -68,10 +74,12 @@
 						<el-alert v-if="!emotions.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
 					</el-tab-pane>
 					<el-tab-pane label="信纸" name="letter">
-						<span slot="label" class="u-tab-label">
-							<i class="el-icon-coffee-cup" style="margin-right: 5px"></i>
-							<b>信纸</b>
-						</span>
+						<template #label>
+							<span class="u-tab-label">
+								<el-icon class="u-tab-icon"><CoffeeCup /></el-icon>
+								<b>信纸</b>
+							</span>
+						</template>
 						<div class="m-letter-list">
 							<div class="m-letter" :class="{ active: !!o.isSelected }" v-for="o in filterLetter" :key="o.id" @click="selectLetter(o)">
 								<LetterPaper :data="o" />
@@ -83,33 +91,37 @@
 
 				<template v-if="multipage && type !== 'combo'">
 				<!-- 下一页 -->
-				<el-button class="m-archive-more" :class="{ show: hasNextPage }" type="primary" icon="el-icon-arrow-down" @click="appendPage">加载更多</el-button>
+				<el-button class="m-archive-more" :class="{ show: hasNextPage }" type="primary" icon="ArrowDown" @click="appendPage" size="large">加载更多</el-button>
 					<!-- 分页 -->
-					<el-pagination class="m-archive-pages" background layout="total, prev, pager, next,jumper" :hide-on-single-page="true" :page-size="per" :total="total" :current-page.sync="page" @current-change="changePage"></el-pagination>
+					<el-pagination class="m-archive-pages" background layout="total, prev, pager, next,jumper" :hide-on-single-page="true" :page-size="per" :total="total" v-model:current-page="page" @current-change="changePage"></el-pagination>
 				</template>
 
 				<div class="m-database-tip" v-show="isBlank && type !== 'combo'">❤ 请输入搜索条件查询</div>
 			</div>
 
 			<!-- 插入按钮 -->
-			<span slot="footer" class="dialog-footer">
-				<el-button @click="dialogVisible = false">取 消</el-button>
-				<el-button type="primary" @click="insert">
-					{{ buttonTXT }}
-				</el-button>
-			</span>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="dialogVisible = false" size="large">取 消</el-button>
+					<el-button type="primary" @click="insert" size="large">
+						{{ buttonTXT }}
+					</el-button>
+				</span>
+			</template>
 		</el-dialog>
 	</div>
 </template>
 
 <script>
-import { loadStat } from "../service/database";
-import { loadAuthors, loadEmotions, getLetterPaper } from "../service/cms";
-import { getUserInfo } from "../service/author";
-import { __iconPath, __Root, __OriginRoot, __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import { loadStat } from "./service/database";
+import { loadAuthors, loadEmotions, getLetterPaper } from "./service/cms";
+import { getUserInfo } from "./service/author";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import { getLink, showAvatar, resolveImagePath } from "@jx3box/jx3box-common/js/utils";
 import User from "@jx3box/jx3box-common/js/user";
 
+const { __iconPath, __Root, __OriginRoot, __imgPath } = JX3BOX;
+
 import ComboVue from "./components/Combo.vue";
 import LetterPaper from "./components/Letter.vue";
 export default {
@@ -214,6 +226,15 @@ export default {
 		},
 	},
 	methods: {
+		resetResultState: function (type = this.type) {
+			if (Array.isArray(this[type])) {
+				this[type] = [];
+			}
+			this.total = 0;
+			this.pages = 1;
+			this.loading = false;
+			this.done = false;
+		},
 		getData: function (page = 1, append = false) {
 			this.loading = true;
 			this.per = 10;
@@ -229,7 +250,8 @@ export default {
 			// 图标
 			if (this.type === "authors") {
 				if (!this.query) {
-					this.loading = false;
+					this.resetResultState("authors");
+					this.done = true;
 					return;
 				}
 
@@ -300,10 +322,13 @@ export default {
 		changePage: function (i) {
 			this.getData(i);
 		},
-		changeType: function () {
+		changeType: function (tab) {
+			const nextType = tab?.paneName || tab?.props?.name || tab?.name;
+			if (nextType) this.type = nextType;
 			this.page = 1;
+			this.resetResultState(this.type);
+			this.html = "";
 			if (this.type === "combo") {
-				this.done = false;
 				return;
 			}
 			this.getData();
@@ -416,7 +441,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../assets/css/resource.less";
+@import "./assets/css/resource.less";
 
 .m-item-pop {
 	padding: 0 !important;