@jx3box/jx3box-ui 2.0.5 → 2.0.7

package/assets/js/voice.js

@@ -1,238 +0,0 @@
-import $ from "jquery";
-import { showAvatar } from "@jx3box/jx3box-common/js/utils";
-
-/**
- * 渲染音频组件
- * 将 e-audio 转换为实际的音频播放器
- * @param {string} selector - 选择器，默认为 ".w-audio, .e-audio"
- */
-function renderVoice(selector = ".w-audio, .e-audio") {
-    try {
-        $(selector).each(function (i, ele) {
-            const $audio = $(this);
-            const content = $audio.text().trim();
-
-            // 解析内容：name:xxx;author:xxx;user_id:xxx;src:xxx
-            const params = {};
-            content.split(";").forEach((item) => {
-                const [key, value] = item.split("|");
-                if (key && value !== undefined) {
-                    params[key.trim()] = value.trim();
-                }
-            });
-
-            // 提取参数
-            const { name = "未命名音频", author = "未知", user_id = "", src = "" } = params;
-
-            if (!src) {
-                console.warn("音频源地址为空", content);
-                return;
-            }
-
-            // 生成唯一ID
-            const playerId = `audio-player-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-
-            // 获取用户头像，如果没有则使用默认图片
-            const avatar = showAvatar(params.avatar, 240);
-
-            // 渲染音频播放器 - 使用项目中定义的样式结构
-            const html = `
-                <div class="w-audio-player" id="${playerId}" data-user-id="${user_id}">
-                    <div class="m-item">
-                        <div class="u-title">
-                            <div class="clip">
-                                <div class="marquee-wrapper">
-                                    <span class="marquee-text">${name}</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="u-author">
-                            练习生：<a href="https://www.jx3box.com/author/${user_id}" target="_blank">${author}</a>
-                        </div>
-                        
-                        <div class="m-record">
-                            <img class="u-needle" src="https://cdn.jx3box.com/design/event/jx3cxk/web/item/needle.svg" />
-                            <a href="https://www.jx3box.com/author/${user_id}" target="_blank" class="u-record">
-                                <img class="u-avatar" src="${avatar}" />
-                            </a>
-                        </div>
-
-                        <div class="m-progress">
-                            <div class="u-progress-bar">
-                                <div class="u-progress-fill"></div>
-                                <div class="u-progress-handle"></div>
-                            </div>
-                        </div>
-
-                        <div class="m-play">
-                            <div class="u-play-button">
-                                <img class="u-icon" src="https://cdn.jx3box.com/design/event/jx3cxk/web/item/left.svg" />
-                                <img class="u-icon u-play" src="https://cdn.jx3box.com/design/event/jx3cxk/web/item/play.svg" data-play-icon="https://cdn.jx3box.com/design/event/jx3cxk/web/item/play.svg" data-stop-icon="https://cdn.jx3box.com/design/event/jx3cxk/web/item/stop.svg" />
-                                <img class="u-icon" src="https://cdn.jx3box.com/design/event/jx3cxk/web/item/right.svg" />
-                            </div>
-                        </div>
-                    </div>
-                    <audio preload="metadata" src="${src}"></audio>
-                </div>
-            `;
-
-            $audio.replaceWith(html);
-
-            // 初始化播放器功能
-            initAudioPlayer(playerId);
-        });
-    } catch (e) {
-        console.error("音频渲染错误:", e);
-    }
-}
-
-/**
- * 初始化音频播放器功能
- * @param {string} playerId - 播放器ID
- */
-function initAudioPlayer(playerId) {
-    const $player = $(`#${playerId}`);
-    const audio = $player.find("audio")[0];
-    const $playBtn = $player.find(".u-play");
-    const $needle = $player.find(".u-needle");
-    const $avatar = $player.find(".u-avatar");
-    const $progressBar = $player.find(".u-progress-bar");
-    const $progressFill = $player.find(".u-progress-fill");
-    const $progressHandle = $player.find(".u-progress-handle");
-
-    if (!audio) {
-        console.warn("音频元素未找到", playerId);
-        return;
-    }
-
-    let isPlaying = false;
-    let isDragging = false;
-
-    // 播放/暂停切换
-    $playBtn.on("click", function () {
-        const playIcon = $(this).data("play-icon");
-        const stopIcon = $(this).data("stop-icon");
-
-        if (isPlaying) {
-            audio.pause();
-            $(this).attr("src", playIcon);
-            $needle.removeClass("isPlaying");
-            $avatar.addClass("isPaused");
-            $player.removeClass("play");
-        } else {
-            audio.play();
-            $(this).attr("src", stopIcon);
-            $needle.addClass("isPlaying");
-            $avatar.removeClass("isPaused").addClass("isRotate");
-            $player.addClass("play");
-        }
-        isPlaying = !isPlaying;
-    });
-
-    // 音频播放状态改变
-    audio.addEventListener("play", function () {
-        isPlaying = true;
-        $playBtn.attr("src", $playBtn.data("stop-icon"));
-        $needle.addClass("isPlaying");
-        $avatar.removeClass("isPaused").addClass("isRotate");
-        $player.addClass("play");
-    });
-
-    audio.addEventListener("pause", function () {
-        isPlaying = false;
-        $playBtn.attr("src", $playBtn.data("play-icon"));
-        $needle.removeClass("isPlaying");
-        $avatar.addClass("isPaused");
-        $player.removeClass("play");
-    });
-
-    // 更新进度条
-    audio.addEventListener("timeupdate", function () {
-        if (!isDragging && audio.duration) {
-            const progress = (audio.currentTime / audio.duration) * 100;
-            $progressFill.css("width", progress + "%");
-            $progressHandle.css("left", progress + "%");
-        }
-    });
-
-    // 进度条拖拽和点击
-    function updateProgress(e) {
-        const rect = $progressBar[0].getBoundingClientRect();
-        const offsetX = e.clientX - rect.left;
-        const progress = Math.max(0, Math.min(1, offsetX / rect.width));
-        const newTime = progress * audio.duration;
-
-        $progressFill.css("width", progress * 100 + "%");
-        $progressHandle.css("left", progress * 100 + "%");
-
-        if (isDragging || e.type === "click") {
-            audio.currentTime = newTime;
-        }
-    }
-
-    $progressBar.on("mousedown", function (e) {
-        isDragging = true;
-        updateProgress(e);
-    });
-
-    $(document).on("mousemove", function (e) {
-        if (isDragging) {
-            updateProgress(e);
-        }
-    });
-
-    $(document).on("mouseup", function (e) {
-        if (isDragging) {
-            updateProgress(e);
-            isDragging = false;
-        }
-    });
-
-    $progressBar.on("click", function (e) {
-        updateProgress(e);
-    });
-
-    // 音频结束
-    audio.addEventListener("ended", function () {
-        isPlaying = false;
-        audio.currentTime = 0;
-        $playBtn.attr("src", $playBtn.data("play-icon"));
-        $needle.removeClass("isPlaying");
-        $avatar.removeClass("isRotate isPaused");
-        $player.removeClass("play");
-        $progressFill.css("width", "0%");
-        $progressHandle.css("left", "0%");
-    });
-
-    // 检查标题是否需要滚动
-    checkTextWidth($player);
-}
-
-/**
- * 检查文本宽度，决定是否需要滚动动画
- * @param {jQuery} $player - 播放器元素
- */
-function checkTextWidth($player) {
-    const $wrapper = $player.find(".marquee-wrapper");
-    const $text = $player.find(".marquee-text");
-
-    if (!$text.length || !$wrapper.length) return;
-
-    const textWidth = $text[0].offsetWidth;
-    const containerWidth = $wrapper.parent()[0].clientWidth;
-
-    if (textWidth > containerWidth) {
-        $wrapper.addClass("marquee-active");
-        // 添加复制的文本用于无缝滚动
-        const copyText = $text.clone().addClass("copy");
-        $wrapper.append(copyText);
-
-        // 计算动画时长
-        const totalWidth = textWidth * 2 + 180; // 180px 是间距
-        const duration = totalWidth / 30; // 30px/s
-        $wrapper.css("animation-duration", `${duration}s`);
-        $wrapper.addClass("marquee-animate");
-    }
-}
-
-export default renderVoice;

package/assets/js/xss.js

@@ -1,130 +0,0 @@
-import sanitizeHtml from "sanitize-html";
-import * as cheerio from "cheerio";
-import postcss from "postcss";
-import safeParser from "postcss-safe-parser";
-
-const FORBID = new Set(["script", "object", "embed", "applet", "base", "meta", "link"]);
-
-const EXTRA_TAGS = [
-    "img",
-    "h1", "h2", "h3", "h4", "h5", "h6",
-    "table", "thead", "tbody", "tr", "th", "td",
-    "blockquote", "pre", "code", "hr",
-    "video", "source",
-    "iframe", "style",
-    "colgroup", "col",
-];
-
-// 必须顶层的 at-rule（你说不需要动画，但 keyframes 也可能被编辑器/作者写进来，留着更稳）
-const TOP_LEVEL_AT = new Set(["keyframes", "-webkit-keyframes", "font-face"]);
-
-function stripDangerousCss(css) {
-    if (!css) return css;
-    return css
-        .replace(/@import\s+[^;]+;?/gi, "")
-        .replace(/url\s*\(\s*[^)]+\s*\)/gi, "")
-        .replace(/expression\s*\([^)]*\)/gi, "");
-}
-
-// 暴力把 style 内容 nest 到 .c-article
-function nestCssBrutally(cssText, scope = ".c-article") {
-    let css = stripDangerousCss(cssText || "");
-    if (!css.trim()) return css;
-
-    const root = postcss.parse(css, { parser: safeParser });
-
-    const top = [];
-    const rest = [];
-
-    (root.nodes || []).forEach((node) => {
-        if (node.type === "atrule" && TOP_LEVEL_AT.has(String(node.name).toLowerCase())) {
-            top.push(node.toString());
-        } else {
-            rest.push(node.toString());
-        }
-    });
-
-    const restCss = rest.join("\n").trim();
-    if (!restCss) return top.join("\n").trim();
-
-    return `${top.join("\n")}\n${scope}{\n${restCss}\n}`.trim();
-}
-
-function nestAllStyleTags(html, scope = ".c-article") {
-    const $ = cheerio.load(html, { decodeEntities: false });
-
-    $("style").each((_, el) => {
-        const oldCss = $(el).html() || "";
-        const newCss = nestCssBrutally(oldCss, scope);
-        $(el).text(newCss);
-    });
-
-    return $.html();
-}
-
-export default function sanitizeRichText(html) {
-    if (!html) return html;
-
-    // 先把 <style> 内容暴力 nest 到 .c-article
-    html = nestAllStyleTags(html, ".c-article");
-
-    const allowedTags = sanitizeHtml.defaults.allowedTags
-        .concat(EXTRA_TAGS)
-        .filter((t, i, arr) => arr.indexOf(t) === i)
-        .filter((t) => !FORBID.has(t));
-
-    return sanitizeHtml(html, {
-        disallowedTagsMode: "discard",
-        allowedTags,
-
-        allowedAttributes: {
-            "*": ["class", "style", "title", "id", "data-*"],
-            a: ["href", "target", "rel", "title", "class", "style"],
-            img: ["src", "alt", "title", "width", "height", "class", "style", "loading", "decoding"],
-            video: ["controls", "width", "height", "class", "style"],
-            source: ["src", "type"],
-            iframe: ["src", "width", "height", "frameborder", "scrolling", "allowfullscreen", "sandbox", "referrerpolicy", "class", "style"],
-            td: ["colspan", "rowspan", "align", "valign", "class", "style"],
-            th: ["colspan", "rowspan", "align", "valign", "class", "style"],
-            col: ["span", "width", "class", "style"],
-            style: ["type", "media"],
-        },
-
-        allowedSchemes: ["http", "https", "mailto", "tel"],
-        allowProtocolRelative: true,
-        allowedSchemesByTag: { img: ["http", "https", "data"], iframe: ["http", "https"] },
-
-        transformTags: {
-            "*": (tagName, attribs) => {
-                const out = { ...attribs };
-
-                // 移除 on*
-                for (const k of Object.keys(out)) if (/^on/i.test(k)) delete out[k];
-
-                // style 属性：禁 @import / url(
-                if (typeof out.style === "string" && out.style) {
-                    let s = out.style;
-                    s = s.replace(/@import\s+[^;]+;?/gi, "");
-                    s = s.replace(/url\s*\(\s*[^)]+\s*\)/gi, "");
-                    s = s.replace(/;;+/g, ";").trim();
-                    if (!s) delete out.style;
-                    else out.style = s;
-                }
-
-                // 兜底禁 javascript:
-                for (const key of ["href", "src"]) {
-                    if (out[key] && /^\s*javascript:/i.test(out[key])) out[key] = "";
-                }
-
-                // 仅允许 data:image/*
-                if (tagName === "img" && typeof out.src === "string" && out.src.startsWith("data:")) {
-                    if (!/^data:image\/(png|jpe?g|gif|webp|avif|bmp|svg\+xml);/i.test(out.src)) {
-                        out.src = "";
-                    }
-                }
-
-                return { tagName, attribs: out };
-            },
-        },
-    });
-}

package/src/editor/Article.vue

@@ -1,230 +0,0 @@
-<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>