@jx3box/jx3box-ui 0.0.1

package/src/editor/Article.vue

@@ -0,0 +1,230 @@
+<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>
+        <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"
+            :current-page="page"
+            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-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>
+    </div>
+</template>
+
+<script>
+import { ElPagination, ElButton } from "element-plus";
+import "element-plus/dist/index.css";
+
+// XSS
+import execFilterXSS from "../../assets/js/script";
+const xss_options = {
+    allowCommentTag: true,
+};
+
+// 基本文本
+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 {renderKatexAll} 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 renderJx3Element from "../../assets/js/jx3_element";
+
+// 剑三
+import Item from "./components/Item.vue";
+import Buff from "./components/Buff.vue";
+import Skill from "./components/Skill.vue";
+import Npc from "./components/Npc.vue";
+import Author from "./components/Author.vue";
+import PostAuthor from "./components/PostAuthor.vue";
+
+export default {
+    name: "ArticleRender",
+    props: {
+        content: String,
+        directorybox: String,
+        pageable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function () {
+        return {
+            // 作品
+            all: false,
+            page: 1,
+            data: [],
+            mode: "",
+            jx3_element: {
+                style: {},
+                type: "",
+            },
+            item: {},
+            buff: {},
+            skill: {},
+            npc: {},
+            author: {},
+            emotion: {},
+        };
+    },
+    computed: {
+        total: function () {
+            return this.chunks.length;
+        },
+        hasPages: function () {
+            return this.chunks.length > 1;
+        },
+        origin: function () {
+            return this.content;
+        },
+        chunks: function () {
+            return this.pageable ? execSplitPages(this.origin) : [this.origin];
+        },
+    },
+    methods: {
+        doReg: function (data) {
+            if (data) {
+                // 过滤内容
+                data = execLazyload(data);
+                data = execFilterIframe(data);
+                data = execFilterXSS(data, xss_options);
+                data = execFilterLink(data);
+                return data;
+            } else {
+                return "";
+            }
+        },
+        doDOM: function ($root) {
+            // 折叠块
+            renderFoldBlock($root);
+            // 代码
+            renderCode(`code[class=^'language-']`);
+            // Tatex
+            renderKatexAll();
+
+            // 画廊（需要在宏、奇穴、物品等之前渲染以排除下方自动生成图片）
+            renderImgPreview();
+            // 宏
+            renderMacro();
+            // 奇穴
+            renderTalent();
+            renderTalent2();
+            // 物品
+            renderJx3Element(this);
+            // 配装
+            renderPzIframe();
+            // 连招
+            renderCombo();
+        },
+        doDir: function () {
+            // 显示局部
+            let target = "";
+            if (this.hasPages && !this.all) {
+                target = "#c-article-part" + this.page;
+                // 全部
+            } else {
+                target = "#c-article";
+            }
+            let dir = renderDirectory(target, this.directorybox);
+            this.$emit("directoryRendered", dir);
+        },
+        changePage: function (i) {
+            this.page = i;
+            window.scrollTo(0, 0);
+            this.$nextTick(() => {
+                this.doDir();
+            });
+        },
+        showAll: function () {
+            this.all = true;
+            this.$nextTick(() => {
+                this.doDir();
+            });
+        },
+        render: function () {
+            let result = [];
+            for (let chunk of this.chunks) {
+                let _chunk = this.doReg(chunk);
+                result.push(_chunk);
+            }
+            this.data = result;
+        },
+        run: function () {
+            this.render();
+
+            // 等待html加载完毕后
+            this.$nextTick(() => {
+                this.$emit("contentLoaded");
+
+                // 统一DOM处理
+                const $root = this.$refs.article;
+                this.doDOM($root);
+                this.$emit("contentRendered");
+
+                // 目录处理
+                this.doDir();
+            });
+        },
+    },
+    watch: {
+        content: function () {
+            this.run();
+        },
+    },
+    mounted: function () {
+        const params = new URLSearchParams(location.search);
+        this.mode = params.get("mode") || "";
+        this.run();
+    },
+    components: {
+        "el-pagination": ElPagination,
+        "el-button": ElButton,
+        "jx3-item": Item,
+        "jx3-buff": Buff,
+        "jx3-skill": Skill,
+        "jx3-npc": Npc,
+        "jx3-author": Author,
+        "jx3-emotion-author": PostAuthor,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/editor/article.less";
+</style>

package/src/editor/BoxResource.vue

@@ -0,0 +1,441 @@
+<template>
+    <div class="c-resource c-resource__jx3box">
+        <!-- 上传触发按钮 -->
+        <el-button class="u-switch" type="primary" @click="openDialog" :disabled="!enable">
+            <img class="u-icon" svg-inline :src="boxIcon" />魔盒资源
+        </el-button>
+
+        <!-- 弹出界面 -->
+        <el-dialog class="c-large-dialog" title="魔盒资源库" v-model="dialogVisible">
+            <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>
+                    <el-input
+                        class="u-input"
+                        :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>
+                </div>
+
+                <el-tabs class="m-database-tabs" v-model="type" type="card" @tab-change="changeType">
+                    <el-tab-pane label="魔盒用户" name="authors">
+                        <template #label>
+                            <span class="u-tab-label">
+                                <el-icon style="margin-right: 5px"><Avatar></Avatar> </el-icon>
+                                <b>用户</b>
+                                <i class="u-lv-box">Lv2+</i>
+                            </span>
+                        </template>
+                        <p v-if="total && done" class="m-resource-count">
+                            <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"
+                            >
+                                <span class="u-id">ID:{{ o.ID }}</span>
+                                <img
+                                    class="u-pic"
+                                    :title="'AuthorID:' + o.display_name"
+                                    :src="userAvatar(o.user_avatar)"
+                                />
+                                <span class="u-primary">
+                                    <span class="u-name">
+                                        {{ o.display_name }}
+                                    </span>
+                                    <div class="u-remark">
+                                        {{ o.user_bio }}
+                                    </div>
+                                </span>
+                            </li>
+                        </ul>
+                        <el-alert
+                            v-if="!authors.length && done"
+                            title="没有找到相关条目"
+                            type="info"
+                            show-icon
+                        ></el-alert>
+                    </el-tab-pane>
+                    <el-tab-pane label="剑三趣图" name="emotions">
+                        <template #label>
+                            <span class="u-tab-label">
+                                <el-icon style="margin-right: 5px"><Sugar /></el-icon>
+                                <b>趣图</b>
+                            </span>
+                        </template>
+
+                        <p v-if="total && done" class="m-resource-count">
+                            <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"
+                            >
+                                <img class="e-jx3-emotion" :src="resolveImagePath(o.url)" :alt="query" />
+                            </li>
+                        </ul>
+                        <el-alert
+                            v-if="!emotions.length && done"
+                            title="没有找到相关条目"
+                            type="info"
+                            show-icon
+                        ></el-alert>
+                    </el-tab-pane>
+                    <!-- <el-tab-pane label="连招" name="combo">
+                        <template #label>
+                            <span class="u-tab-label">
+                                <el-icon style="margin-right: 5px"><Lollipop /></el-icon>
+                                <b>连招</b>
+                            </span>
+                        </template>
+                        <ComboVue :query="query" ref="combo" :client="comboClient" :strict="strict"></ComboVue>
+                    </el-tab-pane> -->
+                </el-tabs>
+
+                <template v-if="multipage && type !== 'combo'">
+                    <!-- 下一页 -->
+                    <el-button
+                        class="m-archive-more"
+                        :class="{ show: hasNextPage }"
+                        type="primary"
+                        icon="ArrowDown"
+                        @click="appendPage"
+                        >加载更多</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"
+                        v-model:current-page="page"
+                        @current-change="changePage"
+                    ></el-pagination>
+                </template>
+
+                <div class="m-database-tip" v-show="isBlank && type !== 'combo'">❤ 请输入搜索条件查询</div>
+            </div>
+
+            <!-- 插入按钮 -->
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="insert">
+                        {{ buttonTXT }}
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { loadStat } from "../../service/database";
+import { loadAuthors, loadEmotions } 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 { __Root, __OriginRoot, __imgPath } = JX3BOX;
+
+// import ComboVue from "./components/Combo.vue";
+export default {
+    name: "BoxResource",
+    components: {
+        // ComboVue,
+    },
+    props: {
+        enable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function () {
+        return {
+            dialogVisible: false,
+            actived: false,
+            userInfo: {},
+
+            type: "authors",
+            query: "",
+            strict: false,
+            client: location.hostname.includes("origin") ? "origin" : "std",
+            comboClient: "std",
+
+            skill: [],
+            buff: [],
+            item: [],
+            icon: [],
+            npc: [],
+            authors: [],
+            selectedAuthor: {},
+            emotions: [],
+
+            done: false,
+            loading: false,
+
+            isSuper: false,
+
+            html: "",
+
+            per: 10,
+            page: 1,
+            total: 1,
+            pages: 1,
+
+            placeholderTexts: {
+                authors: "请输入 ID 或 名称",
+            },
+        };
+    },
+    computed: {
+        placeholderText: function () {
+            return this.placeholderTexts[this.type];
+        },
+        buttonTXT: function () {
+            return this.selectedCount ? "插 入" : "确 定";
+        },
+        isBlank: function () {
+            return !this.query && !this[this.type]?.["length"];
+        },
+        selectedCount: function () {
+            return !!this.html;
+        },
+        isNumber: function () {
+            return !isNaN(this.query);
+        },
+        hasNextPage: function () {
+            return this.total > 1 && this.page < this.pages;
+        },
+        multipage: function () {
+            return this.type !== "icon" && this.done && this.pages > 1;
+        },
+        iconDir: function () {
+            return this.client === "origin" ? "origin_icon" : "icon";
+        },
+        userStatus: function () {
+            return User.getInfo().status;
+        },
+        uid: function () {
+            return User.getInfo().uid;
+        },
+        canInsertAuthor: function () {
+            return User.getLevel(this.userInfo && this.userInfo.experience) >= 2;
+        },
+        boxIcon: function () {
+            return __imgPath + "image/common/jx3box_white.svg";
+        },
+    },
+    watch: {
+        html: function (newval) {
+            this.$emit("update", newval);
+        },
+    },
+    methods: {
+        getData: function (page = 1, append = false) {
+            this.loading = true;
+            this.per = 10;
+            this.done = false;
+            let query = this.query;
+            let params = {
+                strict: ~~this.strict,
+                per: this.per,
+                page: page,
+                client: this.client,
+            };
+
+            // 图标
+            if (this.type === "authors") {
+                if (!this.query) {
+                    this.loading = false;
+                    return;
+                }
+
+                params = {
+                    ...params,
+                    name: query,
+                };
+                loadAuthors(params)
+                    .then((res) => {
+                        if (!append) this.authors = [];
+                        let list = this.transformData(res.data.data.list);
+                        this.authors = this.authors.concat(list);
+                        this.pages = res.data.data.pages;
+                        this.total = res.data.data.total;
+                    })
+                    .finally(() => {
+                        this.done = true;
+                        this.loading = false;
+                    });
+            } else if (this.type === "emotions") {
+                this.per = 24;
+                params = {
+                    per: this.per,
+                    page: page,
+                    search: query,
+                };
+                loadEmotions(params)
+                    .then((res) => {
+                        if (!append) this.emotions = [];
+                        let list = this.transformData(res.data.data.list);
+                        this.emotions = this.emotions.concat(list);
+                        this.pages = res.data.data.pages;
+                        this.total = res.data.data.total;
+                    })
+                    .finally(() => {
+                        this.done = true;
+                        this.loading = false;
+                    });
+            }
+        },
+        search: function () {
+            if (this.type === "combo") {
+                this.$refs.combo?.search();
+            } else {
+                this.page = 1;
+                this.getData();
+            }
+        },
+        appendPage: function () {
+            this.getData(++this.page, true);
+        },
+        changePage: function (i) {
+            this.getData(i);
+        },
+        changeType: function () {
+            this.page = 1;
+            if (this.type === "combo") {
+                this.done = false;
+                return;
+            }
+            this.getData();
+        },
+        setAuthors: function () {
+            try {
+                let author = sessionStorage.getItem("atAuthor");
+                if (author) {
+                    author = JSON.parse(author);
+                    author = author.split(",") || [];
+                    if (this.selectedAuthor.ID && !author.includes(String(this.selectedAuthor.ID))) {
+                        author.push(this.selectedAuthor.ID);
+                    }
+                    sessionStorage.setItem("atAuthor", JSON.stringify(author.join(",")));
+                } else {
+                    sessionStorage.setItem("atAuthor", JSON.stringify(String(this.selectedAuthor.ID)));
+                }
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        insert: function () {
+            if (this.type === "authors") {
+                if (this.userStatus == 0 && this.canInsertAuthor) {
+                    if (this.selectedAuthor.ID) {
+                        this.setAuthors();
+                        this.$emit("insert", this.html);
+                        this.dialogVisible = false;
+                        this.selectedAuthor = {};
+                    } else {
+                        this.$message.warning("请选择一个用户");
+                    }
+                } else {
+                    this.$alert("您的等级不足或无权限（Lv2以上可用）", "消息");
+                }
+            } else {
+                if (this.type === "combo") {
+                    const html = this.$refs.combo.renderVal();
+                    this.$emit("insert", html);
+                } else {
+                    this.$emit("insert", this.html);
+                }
+                this.dialogVisible = false;
+            }
+        },
+        transformData: function (data) {
+            data.forEach((item) => {
+                item.isSelected = false;
+            });
+            return data;
+        },
+        selectAuthor: function (o) {
+            this.resetItems();
+            this.selectedAuthor = o;
+            o.isSelected = true;
+            this.html = `<a data-type="author" class="e-jx3-author w-jx3-element" data-mode="" data-id="${o.ID}" target="_blank" href="/author/${o.ID}">@${o.display_name}</a>`;
+        },
+        selectEmotion: function (o) {
+            this.resetItems();
+            o.isSelected = true;
+            this.html = `<a data-type="emotion" class="e-jx3-emotion w-jx3-element" data-id="${o.id}" target="_blank" href="/emotion/${o.id}"><img class="e-jx3-emotion-img" data-type="emotion" data-id="${o.id}" style="width:180px;" src="${o.url}" alt="${o.id}"/></a>`;
+        },
+        resetItems: function () {
+            let data = this[this.type];
+            data.forEach((item) => {
+                item.isSelected = false;
+            });
+            this.html = "";
+        },
+        getLink: function (type, id) {
+            let domain = this.client == "origin" ? __OriginRoot : __Root;
+            return domain + getLink(type, id).slice(1);
+        },
+        userAvatar: function (url) {
+            return showAvatar(url, "m");
+        },
+        loadUserInfo: function () {
+            if (!this.uid) return;
+            getUserInfo(this.uid).then((res) => {
+                this.userInfo = res;
+            });
+        },
+
+        // 杂项
+        // ==============================
+        openDialog: function () {
+            this.dialogVisible = true;
+            if (!this.actived) {
+                loadStat().then((data) => {
+                    this.stat = data;
+                    this.actived = true;
+                });
+            }
+        },
+        resolveImagePath,
+    },
+    created: function () {
+        this.loadUserInfo();
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/editor/resource.less";
+
+.m-item-pop {
+    padding: 0 !important;
+    background: none !important;
+    border: none;
+}
+</style>