@jx3box/jx3box-editor 2.2.47 → 3.0.0

package/src/components/Combo.vue

@@ -1,10 +1,11 @@
 <template>
-    <div class="c-combo m-resource-combo">
+    <!-- 连招 -->
+    <div class="w-resource-combo">
         <el-tabs v-model="activeName" type="card" class="m-skill-tabs">
             <el-tab-pane label="门派武学" name="special">
                 <template #label>
                     <div class="u-tab-label">
-                        <i class="el-icon-s-order"></i>
+                        <el-icon><Sort></Sort></el-icon>
                         <b>门派武学</b>
                     </div>
                 </template>
@@ -12,17 +13,17 @@
             <el-tab-pane label="全部技能" name="all">
                 <template #label>
                     <div class="u-tab-label">
-                        <i class="el-icon-menu"></i>
+                        <el-icon><Menu></Menu></el-icon>
                         <b>全部技能</b>
                     </div>
                 </template>
             </el-tab-pane>
         </el-tabs>
-        <div class="c-combo-content">
+        <div class="w-resource-combo__content">
             <div class="m-select-content">
                 <div v-show="activeName === 'all'">
                     <div 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> 条记录
                     </div>
                     <ul class="m-resource-list">
                         <li v-for="(o, i) in skill" class="u-item" :key="i" @click="selectSkill(o, i)" ref="skill">
@@ -43,7 +44,14 @@
 
                     <template v-if="multipage">
                         <!-- 下一页 -->
-                        <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"
+                            >加载更多</el-button
+                        >
                         <!-- 分页 -->
                         <el-pagination
                             class="m-archive-pages"
@@ -59,32 +67,59 @@
 
                     <div class="m-database-tip" v-show="isBlank">❤ 请输入搜索条件查询</div>
                 </div>
-                <skill-martial v-show="activeName === 'special'" :client="client" :subtype="subtype" @selectSkill="selectSkill"></skill-martial>
+                <skill-martial
+                    v-show="activeName === 'special'"
+                    :client="client"
+                    :subtype="subtype"
+                    @selectSkill="selectSkill"
+                ></skill-martial>
             </div>
 
-            <div class="c-combo-content__right">
+            <div class="m-selected-content">
                 <!-- 已选技能 -->
-                <el-divider>已选技能
+                <el-divider
+                    >已选技能
                     <!-- <el-checkbox v-model="sort" border size="small">开启排序</el-checkbox> -->
                 </el-divider>
                 <div class="m-selected-skills">
                     <ul class="m-skills-list">
-                        <li v-for="(skill, index) in selected" :key="skill.SkillID + '' + index" class="m-skill" @contextmenu.prevent="(event) => onContextmenu(event, skill)">
+                        <li
+                            v-for="(skill, index) in selected"
+                            :key="skill.SkillID + '' + index"
+                            class="m-skill"
+                            @contextmenu.prevent="(event) => onContextmenu(event, skill)"
+                        >
                             <div class="u-skill" v-if="skill && skill.IconID">
-                                <img class="u-skill-icon" :class="skill.iconSize ? `u-skill-icon_${skill.iconSize}` : ''" :src="iconURL(skill.IconID)" :alt="skill.IconID" />
+                                <img
+                                    class="u-skill-icon"
+                                    :class="skill.iconSize ? `u-skill-icon_${skill.iconSize}` : ''"
+                                    :src="iconURL(skill.IconID)"
+                                    :alt="skill.IconID"
+                                />
                                 <i class="u-gcd-icon" v-show="skill.WithoutGcd">
-                                    <i class="el-icon-time"></i>
+                                    <el-icon><Timer /></el-icon>
                                 </i>
-                                <span class="u-name" :class="{ 'u-name_underline': skill.underline }" :title="skill.Name">{{ skill.Name }}</span>
+                                <span
+                                    class="u-name"
+                                    :class="{ 'u-name_underline': skill.underline }"
+                                    :title="skill.Name"
+                                    >{{ skill.Name }}</span
+                                >
                                 <span class="u-note" :title="skill.n" :style="itemStyle(skill)">{{ skill.n }}</span>
                             </div>
-                            <i class="u-remove-icon" :class="skill.iconSize ? `u-remove-icon_${skill.iconSize}` : ''" title="移除" @click="removeSelected(index)"><i class="el-icon-close"></i></i>
+                            <i
+                                class="u-remove-icon"
+                                :class="skill.iconSize ? `u-remove-icon_${skill.iconSize}` : ''"
+                                title="移除"
+                                @click="removeSelected(index)"
+                                ><el-icon><Close /></el-icon
+                            ></i>
                         </li>
                     </ul>
                 </div>
             </div>
         </div>
-        <el-dialog :visible.sync="showRemark" width="600px" append-to-body v-draggable class="c-large-dialog" title="设置备注">
+        <el-dialog v-model="showRemark" width="600px" append-to-body draggable class="c-large-dialog" title="设置备注">
             <el-form label-position="left" label-width="80px">
                 <el-form-item label="备注">
                     <el-input placeholder="输入备注" v-model="form.n"></el-input>
@@ -101,32 +136,35 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item label="预览">
-                    <span :style="nStyle">{{ form.n || '示例文字' }}</span>
+                    <span :style="nStyle">{{ form.n || "示例文字" }}</span>
                 </el-form-item>
             </el-form>
-            <span slot="footer" class="dialog-footer">
-				<el-button @click="showRemark = false">取 消</el-button>
-				<el-button type="primary" @click="confirm">确 定
-				</el-button>
-			</span>
+            <template #footer>
+                <span class="m-dialog-footer">
+                    <el-button @click="showRemark = false">取 消</el-button>
+                    <el-button type="primary" @click="confirm">确 定 </el-button>
+                </span>
+            </template>
         </el-dialog>
     </div>
 </template>
 
 <script>
-import Vue from "vue";
+import { h } from "vue";
+import { ElIcon } from "element-plus";
+import { Check, Close } from "@element-plus/icons-vue";
 import { iconLink } from "@jx3box/jx3box-common/js/utils";
-import { getSkill } from "../../service/resource";
+import { getSkill } from "../service/resource";
 import SkillMartial from "./SkillMartial.vue";
 
 import Sortable from "sortablejs";
 import { cloneDeep, pick } from "lodash";
 
-import LoadScript from "vue-plugin-load-script";
-Vue.use(LoadScript);
+import ContextMenu from "@imengyu/vue3-context-menu";
+import "@imengyu/vue3-context-menu/lib/vue3-context-menu.css";
+
+const renderMenuIcon = (IconComponent) => h(ElIcon, null, () => h(IconComponent));
 
-import contextmenu from "vue-contextmenujs";
-Vue.use(contextmenu);
 export default {
     name: "ComboSkill",
     components: {
@@ -176,27 +214,27 @@ export default {
                 n: "",
                 c: "",
                 fz: "14",
-                fw: "500"
+                fw: "500",
             },
             showRemark: false,
             currentSkill: {},
 
             predefineColors: [
-                '#ff4500',
-                '#ff8c00',
-                '#ffd700',
-                '#90ee90',
-                '#00ced1',
-                '#1e90ff',
-                '#c71585',
-                'rgba(255, 69, 0, 0.68)',
-                'rgb(255, 120, 0)',
-                'hsv(51, 100, 98)',
-                'hsva(120, 40, 94, 0.5)',
-                'hsl(181, 100%, 37%)',
-                'hsla(209, 100%, 56%, 0.73)',
-                '#c7158577',
-            ]
+                "#ff4500",
+                "#ff8c00",
+                "#ffd700",
+                "#90ee90",
+                "#00ced1",
+                "#1e90ff",
+                "#c71585",
+                "rgba(255, 69, 0, 0.68)",
+                "rgb(255, 120, 0)",
+                "hsv(51, 100, 98)",
+                "hsva(120, 40, 94, 0.5)",
+                "hsl(181, 100%, 37%)",
+                "hsla(209, 100%, 56%, 0.73)",
+                "#c7158577",
+            ],
         };
     },
     computed: {
@@ -210,12 +248,15 @@ export default {
             return !this.query && !this.skill["length"];
         },
         nStyle() {
-            return pick({
-                color: this.form.c,
-                fontSize: (this.form.fz || 12) + 'px',
-                fontWeight: this.form.fw
-            }, ['color','fontSize','fontWeight'])
-        }
+            return pick(
+                {
+                    color: this.form.c,
+                    fontSize: (this.form.fz || 12) + "px",
+                    fontWeight: this.form.fw,
+                },
+                ["color", "fontSize", "fontWeight"]
+            );
+        },
     },
     mounted() {
         this.$nextTick(() => {
@@ -302,14 +343,16 @@ export default {
             });
         },
         onContextmenu(event, skill) {
-            this.$contextmenu({
+            ContextMenu.showContextMenu({
+                x: event.x || event.clientX,
+                y: event.y || event.clientY,
                 items: [
                     {
                         label: !skill?.WithoutGcd ? "设置为无GCD技能" : "设置为有GCD技能",
                         onClick: () => {
-                            this.$set(skill, "WithoutGcd", !skill.WithoutGcd);
+                            skill.WithoutGcd = !skill.WithoutGcd;
                         },
-                        icon: !skill?.WithoutGcd ? "el-icon-check" : "el-icon-close",
+                        icon: !skill?.WithoutGcd ? renderMenuIcon(Check) : renderMenuIcon(Close),
                     },
                     {
                         label: "图标大小",
@@ -317,13 +360,13 @@ export default {
                             {
                                 label: "小",
                                 onClick: () => {
-                                    this.$set(skill, "iconSize", "small");
+                                    skill.iconSize = "small";
                                 },
                             },
                             {
                                 label: "大",
                                 onClick: () => {
-                                    this.$set(skill, "iconSize", "large");
+                                    skill.iconSize = "large";
                                 },
                             },
                         ],
@@ -331,19 +374,17 @@ export default {
                     {
                         label: skill.underline ? "取消下划线" : "设置下划线",
                         onClick: () => {
-                            this.$set(skill, "underline", !skill.underline);
+                            skill.underline = !skill.underline;
                         },
                     },
                     {
                         label: "备注",
                         onClick: () => {
                             this.showRemark = true;
-                            this.currentSkill = skill
+                            this.currentSkill = skill;
                         },
-                    }
+                    },
                 ],
-                event,
-                customClass: "custom-class",
                 zIndex: 99999,
                 minWidth: 200,
             });
@@ -365,32 +406,37 @@ export default {
                 item.underline && (obj.underline = item.underline);
 
                 item.client = this.client;
-                skills_html += `<li class="w-skill-combo-item">${item.SkillID},${item.Name},${item.IconID},${JSON.stringify(obj)}</li>`;
+                skills_html += `<li class="w-skill-combo-item">${item.SkillID},${item.Name},${
+                    item.IconID
+                },${JSON.stringify(obj)}</li>`;
             });
             const html = `<ul class="e-skill-combo w-skill-combo">${skills_html}</ul>`;
             return html;
         },
         confirm() {
             if (this.form.n) {
-                this.$set(this.currentSkill, 'n', this.form.n);
-                this.$set(this.currentSkill, 'c', this.form.c);
-                this.$set(this.currentSkill, 'fz', this.form.fz);
-                this.$set(this.currentSkill, 'fw', this.form.fw);
+                this.currentSkill.n = this.form.n;
+                this.currentSkill.c = this.form.c;
+                this.currentSkill.fz = this.form.fz;
+                this.currentSkill.fw = this.form.fw;
             }
 
-            this.showRemark = false
+            this.showRemark = false;
         },
         itemStyle(item) {
-            return pick({
-                color: item.c,
-                fontSize: (item.fz || 12) + 'px',
-                fontWeight: item.fw
-            }, ['color','fontSize','fontWeight'])
-        }
+            return pick(
+                {
+                    color: item.c,
+                    fontSize: (item.fz || 12) + "px",
+                    fontWeight: item.fw,
+                },
+                ["color", "fontSize", "fontWeight"]
+            );
+        },
     },
 };
 </script>
 
 <style lang="less">
-@import "../../assets/css/combo.less";
+@import "../assets/css/tinymce/combo.less";
 </style>

package/src/components/PostAuthor.vue

@@ -1,9 +1,4 @@
-<!--
- * @Author: iRuxu
- * @Date: 2022-07-17 00:13:35
- * @LastEditTime: 2022-07-17 00:40:25
- * @Description: 
--->
+<!-- 骚图hover：来源作者-->
 <template>
     <div class="w-author w-author__post" v-loading="loading">
         <div class="w-author-wrapper el-popover" v-if="data">
@@ -32,16 +27,23 @@
 
 <script>
 import { authorLink } from "@jx3box/jx3box-common/js/utils";
-import { getEmotion } from "../../service/author";
-import { __server, __imgPath, __userLevelColor } from "@jx3box/jx3box-common/data/jx3box.json";
+import { getEmotion } from "../service/author";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import dayjs from "dayjs";
 import Avatar from "./Avatar.vue";
+
+const { __server, __imgPath, __userLevelColor } = JX3BOX;
 export default {
     name: "PostAuthor",
     components: {
         Avatar,
     },
-    props: ["id"],
+    props: {
+        id: {
+            type: [String, Number],
+            default: "",
+        },
+    },
     data: () => ({
         data: null,
         loading: false,
@@ -74,7 +76,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import "../../assets/css/module/author.less";
+@import "../assets/css/module/author.less";
 .w-author {
     .u-meta {
         display: flex;
@@ -85,7 +87,7 @@ export default {
     }
     .u-meta-label {
         .mr(10px);
-        background-color: @bg-gray;
+        background-color: #f6f8fa;
         padding: 0 8px;
         .r(2px);
     }

package/src/components/QRcode.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="w-qrcode" @click="togglePic" :class="{ on: active }" v-if="mode == 'cms'">
+        <img class="u-icon" svg-inline src=".././assets/img/other/qr-code.svg" />
+        <span class="u-text">二维码</span>
+        <div class="u-qrcode">
+            <qrcode-vue class="u-pic" :value="value" :size="size" level="H"></qrcode-vue>
+            <span>扫一扫即可访问</span>
+        </div>
+    </div>
+    <div class="w-qrcode-static" v-else-if="mode == 'static'">
+        <div class="u-qrcode">
+            <qrcode-vue class="u-pic" :value="value" :size="size" level="H"></qrcode-vue>
+            <span class="u-txt"
+                ><img class="u-icon" svg-inline src="./assets/img/other/qr-code.svg" />扫一扫手机访问</span
+            >
+        </div>
+    </div>
+</template>
+
+<script>
+import QrcodeVue from "qrcode.vue";
+export default {
+    name: "QRcode",
+    props: {
+        href: {
+            type: String,
+            default: "",
+        },
+        s: {
+            type: [String, Number],
+            default: 100,
+        },
+        v: {
+            type: String,
+            default: "cms",
+        },
+    },
+    data: function () {
+        return {
+            value: this.href || location.href,
+            size: this.s || 100,
+            active: false,
+            mode: this.v || "cms",
+        };
+    },
+    computed: {},
+    methods: {
+        togglePic: function (e) {
+            e.stopPropagation();
+            this.active = !this.active;
+        },
+    },
+    mounted: function () {
+        const vm = this;
+        document.addEventListener("click", function () {
+            vm.active = false;
+        });
+    },
+    components: {
+        QrcodeVue,
+    },
+};
+</script>
+
+<style lang="less">
+.w-qrcode {
+    .dbi;
+    .u-icon {
+        .mr(5px);
+        .size(14px);
+        .y(-2px);
+        fill: @color;
+    }
+    .u-text {
+        .fz(13px);
+        user-select: none;
+    }
+    .pointer;
+    transition: 0.1s ease-in-out;
+    &:hover {
+        color: #f39;
+        .u-icon {
+            fill: #f39;
+        }
+    }
+
+    .u-qrcode {
+        .none;
+        .pa;
+        .mt(5px);
+        padding: 10px;
+        border: 1px solid #e8e8e8;
+        z-index: 1;
+        background: #fff;
+        border-radius: 3px;
+        font-size: 12px;
+        text-align: center;
+        color: #888;
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    }
+    .u-pic {
+        .size(100px);
+        .mb(5px);
+    }
+    &.on {
+        .u-qrcode {
+            .db;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .w-qrcode {
+        .none;
+    }
+}
+.w-qrcode-static {
+    .u-qrcode {
+        .ps;
+    }
+    .u-icon {
+        .mr(5px);
+        .size(14px);
+        .y(-2px);
+        fill: @color;
+    }
+    .u-pic {
+        background-color: #fff;
+        padding: 7px 7px 7px 8px;
+    }
+    .u-txt {
+        padding: 0 5px;
+        .db;
+        .fz(12px,2);
+    }
+}
+</style>

package/src/components/SkillMartial.vue

@@ -26,7 +26,7 @@
                             showKungfuName(kungfu)
                         }}</span>
                         <img
-                            src="../../assets/img/skillset.png"
+                            src=".././assets/img/skillset.png"
                             class="u-title-img"
                             alt="" />
                     </div>
@@ -57,7 +57,7 @@
                     <div class="u-title">
                         <span class="u-title-name">奇穴技能</span>
                         <img
-                            src="../../assets/img/skillset.png"
+                            src=".././assets/img/skillset.png"
                             class="u-title-img"
                             alt="" />
                     </div>
@@ -84,7 +84,7 @@
                     <div class="u-title">
                         <span class="u-title-name">江湖轻功</span>
                         <img
-                            src="../../assets/img/skillset.png"
+                            src=".././assets/img/skillset.png"
                             class="u-title-img"
                             alt="" />
                     </div>
@@ -114,7 +114,7 @@
                     <div class="u-title">
                         <span class="u-title-name">门派技能</span>
                         <img
-                            src="../../assets/img/skillset.png"
+                            src=".././assets/img/skillset.png"
                             class="u-title-img"
                             alt="" />
                     </div>
@@ -143,7 +143,7 @@
                     <div class="u-title">
                         <span class="u-title-name">通用技能</span>
                         <img
-                            src="../../assets/img/skillset.png"
+                            src=".././assets/img/skillset.png"
                             class="u-title-img"
                             alt="" />
                     </div>
@@ -178,14 +178,14 @@ import {
     getSkills,
     getTalents,
     getMobileForceSkillList,
-} from "../../service/node";
+} from "../service/node";
 import kungfumap_std from "@jx3box/jx3box-data/data/martial/kungfu_std.json";
 import kungfumap_origin from "@jx3box/jx3box-data/data/martial/kungfu_origin.json";
 import { flattenDeep, uniqBy } from "lodash";
 import kungfus from "@jx3box/jx3box-data/data/martial/kungfuid.json";
 import { iconLink } from "@jx3box/jx3box-common/js/utils";
 export default {
-    name: "pvp_martial",
+    name: "SkillMartial",
     props: {
         subtype: {
             type: String,
@@ -215,9 +215,7 @@ export default {
             return xfmap[this.subtype]?.id;
         },
         skillIds() {
-            return flattenDeep(
-                Object.values(this.kungfumap?.[this.mountId]?.["skills"])
-            );
+            return flattenDeep(Object.values(this.mountData?.skills || {}));
         },
         ids() {
             return [
@@ -229,6 +227,9 @@ export default {
         kungfumap() {
             return this.client == "origin" ? kungfumap_origin : kungfumap_std;
         },
+        mountData() {
+            return this.kungfumap?.[this.mountId] || {};
+        },
         params() {
             return {
                 ids: this.ids,
@@ -249,7 +250,7 @@ export default {
         // 门派技能数据
         kungfusSkills: function () {
             const obj = {};
-            Object.entries(this.kungfumap[this.mountId]["skills"]).forEach(
+            Object.entries(this.mountData?.skills || {}).forEach(
                 ([key, value]) => {
                     obj[key] = value.map(SkillID => {
                         const currentSkill = this.data.find(
@@ -263,7 +264,7 @@ export default {
         },
         // 门派技能套路id
         kungfus: function () {
-            return this.kungfumap[this.mountId]["kungfus"];
+            return this.mountData?.kungfus || [];
         },
         talentSkills() {
             return this.talentSkillIds

package/src/pages/article.js

@@ -0,0 +1,14 @@
+import { createApp } from "vue";
+
+import ArticlePage from "../views/article.vue";
+const app = createApp(ArticlePage);
+
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import "@jx3box/jx3box-common/css/element-plus-theme.scss";
+app.use(ElementPlus);
+
+import '@jx3box/jx3box-common/css/font.css';
+import '@jx3box/jx3box-common/css/normalize.css';
+
+app.mount("#app");

package/src/pages/index.js

@@ -0,0 +1,5 @@
+// 第三方UI组件
+import { createApp } from "vue";
+import App from "../views/index.vue";
+const app = createApp(App);
+app.mount("#app");

package/src/pages/markdown.js

@@ -0,0 +1,14 @@
+import { createApp } from "vue";
+
+import MarkdownPage from "../views/markdown.vue";
+const app = createApp(MarkdownPage);
+
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import "@jx3box/jx3box-common/css/element-plus-theme.scss";
+app.use(ElementPlus);
+
+import '@jx3box/jx3box-common/css/font.css';
+import '@jx3box/jx3box-common/css/normalize.css';
+
+app.mount("#app");