@jx3box/jx3box-editor 2.2.45 → 2.2.47

package/assets/css/article.less

@@ -24,6 +24,7 @@
 @import "tinymce/qixue.less";
 @import "tinymce/pz.less";
 @import "tinymce/combo.less";
+@import "tinymce/voice.less";
 
 @import "module/directory.less";
 @import "module/icon.less";

package/assets/css/tinymce/voice.less

@@ -0,0 +1,331 @@
+@design_url: "https://cdn.jx3box.com/design/";
+@jx3cxk: "@{design_url}event/jx3cxk/";
+// 编辑器内
+.e-audio {
+    min-height: 24px;
+    border-radius: 4px;
+    font-size: 14px;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #f1f8ff;
+    border: 1px solid #c8e1ff;
+    color: #62a9ff;
+
+    line-height: 1.6 !important;
+    padding: 10px;
+    padding-right: 135px;
+    font-family: Monaco, Consolas, "Lucida Console", "Courier New", serif;
+    word-break: break-all;
+    white-space: pre-wrap !important;
+    overflow-wrap: break-word;
+
+    .pr;
+    &:after {
+        content: "JX3BOX·AUDIO";
+        position: absolute;
+        right: 8px;
+        top: 8px;
+        background-color: darken(#c8e1ff, 20%);
+        color: #fff;
+        border-radius: 3px;
+        padding: 2px 8px;
+        line-height: 21px;
+    }
+}
+
+// 渲染后的音频播放器样式
+.w-audio-player {
+    .pr;
+    .r(24px);
+    box-sizing: border-box;
+    width: 376px;
+    background: rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease-in-out;
+    padding: 24px;
+    .m-item {
+        .pr;
+        .pointer;
+        .r(16px);
+        .clip;
+        .mb(24px);
+        color: #fff;
+        padding: 32px 36px;
+        box-sizing: border-box;
+        width: 100%;
+        background: linear-gradient(180deg, #7676f0 0%, #9495e9 100%);
+
+        a {
+            color: #fff;
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: none;
+                box-shadow: none;
+            }
+        }
+
+        img {
+            padding: 0;
+            margin: 0;
+            border: none;
+        }
+
+        &::before {
+            content: "";
+            .pa;
+            .lt(0);
+            .tm(0);
+            .size(100%);
+            transition: opacity 0.3s ease-in-out;
+            background: linear-gradient(180deg, #f9c27f 0%, #9697ed 100%);
+        }
+        .u-title {
+            .flex;
+            .pr;
+            .bold;
+            .fz(24px);
+            .x;
+            justify-content: center;
+            align-items: center;
+            max-width: 300px;
+            box-sizing: border-box;
+            font-family: "ALIMAMASHUHEITI";
+
+            .clip {
+                .clip;
+                width: 100%;
+            }
+
+            .marquee-wrapper {
+                white-space: nowrap;
+                position: relative;
+                display: inline-block;
+                transition: transform 0s linear;
+
+                &.marquee-animate {
+                    animation: marquee linear infinite;
+                    animation-fill-mode: forwards;
+                }
+            }
+
+            .marquee-text {
+                display: inline-block;
+
+                &::after {
+                    content: "》";
+                    display: inline-block;
+                }
+
+                &::before {
+                    content: "《";
+                    display: inline-block;
+                }
+
+                &.copy {
+                    margin-left: 180px;
+                    display: none;
+
+                    &::after,
+                    &::before {
+                        display: none;
+                    }
+                }
+            }
+
+            &.marquee-active {
+                .marquee-text.copy {
+                    display: inline-block;
+                }
+
+                .marquee-animate .marquee-text {
+                    &::after,
+                    &::before {
+                        display: none;
+                    }
+                }
+
+                &::after {
+                    content: "》";
+                    display: inline-block;
+                    position: absolute;
+                    right: -28px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    z-index: 1;
+                }
+
+                &::before {
+                    content: "《";
+                    display: inline-block;
+                    position: absolute;
+                    left: -28px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    z-index: 1;
+                }
+            }
+        }
+        .u-author {
+            .x;
+            .fz(14px);
+            .tm(0.75);
+            .mt(5px);
+        }
+        .m-record {
+            .pr;
+            padding: 42px 0 3px 0;
+            .u-needle {
+                .pa;
+                .lt(50%,0);
+                .size(120px,72px);
+                .ml(-10px);
+                user-select: none;
+                pointer-events: none;
+                transition: transform 0.3s ease-out, top 0.3s ease-out, margin 0.3s ease-out;
+                transform-origin: 0% 0%;
+                transform: rotate(0deg);
+                &.isPlaying {
+                    top: -3px;
+                    margin: 0;
+                    transform-origin: 0% 0%;
+                    transform: rotate(30deg);
+                    display: inline-block;
+                }
+            }
+            .u-record {
+                .db;
+                .size(182px);
+                .auto(x);
+                user-select: none;
+                padding: 28px;
+                box-sizing: border-box;
+                background: url("@{jx3cxk}web/item/record.svg") no-repeat center center;
+                background-size: 100% 100%;
+            }
+            .u-avatar {
+                .r(50%);
+                .size(100%);
+                object-fit: cover;
+                transition: transform 0.6s ease-out;
+
+                &.isRotate {
+                    animation: rotate 6s linear infinite;
+                    &.isPaused {
+                        animation-play-state: paused;
+                    }
+                }
+            }
+        }
+        .m-progress {
+            .pr;
+            margin: 16px 0;
+
+            .u-progress-bar {
+                .pr;
+                height: 3px;
+                background: rgba(65, 61, 82, 0.3);
+                .r(3px);
+                .pointer;
+                overflow: visible;
+
+                .u-progress-fill {
+                    .pa;
+                    height: 100%;
+                    background: #fff;
+                    .r(3px);
+                    width: 0%;
+                    transition: width 0.1s linear;
+                }
+
+                .u-progress-handle {
+                    .pa;
+                    top: 50%;
+                    left: 0%;
+                    .size(12px);
+                    background: #fff;
+                    border: 2px solid rgba(65, 61, 82, 0.3);
+                    .r(50%);
+                    transform: translate(-50%, -50%);
+                    .pointer;
+                    transition: left 0.1s linear;
+                }
+            }
+        }
+        .m-play {
+            .pr;
+            .flex;
+            .pt(10px);
+            flex-wrap: wrap;
+            justify-content: space-between;
+            align-items: center;
+            .u-play-button {
+                .flex;
+                justify-content: space-between;
+                width: 70%;
+                box-sizing: border-box;
+                margin: 0 15% 20px 15%;
+                align-items: center;
+            }
+            .u-icon {
+                .size(24px);
+            }
+            .u-play {
+                .size(64px);
+            }
+            .u-like {
+                .tm(0.75);
+                .flex;
+                align-items: center;
+                gap: 5px;
+                .u-icon {
+                    .size(20px);
+                }
+            }
+            .u-link {
+                .tm(0.75);
+                color: #fff;
+            }
+        }
+    }
+    &.play {
+        .m-item {
+            background: linear-gradient(180deg, #55c79f 0%, #9697ed 100%);
+        }
+    }
+    &:hover {
+        background: rgba(255, 255, 255, 0.15);
+        .m-item::before {
+            .tm(1);
+        }
+    }
+}
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes marquee {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+// 渲染模式隐藏
+.c-article-tinymce {
+    .e-audio {
+        display: none;
+    }
+}
+// tinymce编辑器内展示
+.c-article-editor {
+    .e-audio {
+        display: block;
+    }
+}

package/assets/js/audio.js

@@ -0,0 +1,249 @@
+import $ from "jquery";
+import { showAvatar } from "@jx3box/jx3box-common/js/utils";
+import {getUserInfo} from "../../service/author";
+
+/**
+ * 渲染音频组件
+ * 将 e-audio 转换为实际的音频播放器
+ * @param {string} selector - 选择器，默认为 ".w-audio, .e-audio"
+ */
+function renderVoice(selector = ".w-audio, .e-audio") {
+    try {
+        $(selector).each(async 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();
+                }
+            });
+
+            // 提取参数
+            let { name = "未命名音频", author = "未知", user_id = "", src = "", avatar = "" } = params;
+
+            if (!src) {
+                console.warn("音频源地址为空", content);
+                return;
+            }
+
+            const user_info = await fetchUserInfo(user_id);
+            console.log("用户信息:", user_info);
+            avatar = showAvatar(user_info?.user_avatar || '', 240);
+            author = author || user_info?.display_name || '匿名用户';
+            
+            // 生成唯一ID
+            const playerId = `audio-player-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+            // 渲染音频播放器 - 使用项目中定义的样式结构
+            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");
+    }
+}
+
+function fetchUserInfo(userId) {
+    return getUserInfo(userId).then((res) => {
+        return res || null;
+    }).catch((err) => {
+        console.error("获取用户信息失败:", err);
+    });
+}
+
+export default renderVoice;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "2.2.45",
+    "version": "2.2.47",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {