@jx3box/jx3box-ui 0.0.1

package/assets/js/voice.js

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

@@ -0,0 +1,130 @@
+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/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ["@vue/cli-plugin-babel/preset"],
+};

package/docs/README.md

@@ -0,0 +1,78 @@
+# jx3box-vue3-ui
+
+这是一个基于 `vue-cli + webpack5 + vue3` 的公共组件库，供其它业务项目按需引入各种 `.vue` 组件模块（如公共头部等）。
+
+## i18n（多语言）接入
+
+本库内置 `vue-i18n@9` 的接入方式，并提供一个可选的 Vue 插件用于：
+
+- 宿主项目已使用 `vue-i18n`：合并本库词条到宿主 i18n
+- 宿主项目未使用 `vue-i18n`：由本库创建并安装 i18n（仅用于本库组件文案）
+
+词条命名空间固定为：`jx3boxUi`（避免与业务方 key 冲突）。
+
+### 1）宿主项目已使用 vue-i18n（推荐）
+
+```js
+import { createApp } from "vue";
+import { createI18n } from "vue-i18n";
+import App from "./App.vue";
+
+import { install, Jx3boxUiI18n } from "@jx3box/jx3box-vue3-ui";
+
+const app = createApp(App);
+
+const i18n = createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale: "zh-CN",
+    fallbackLocale: "zh-CN",
+    messages: {
+        "zh-CN": {
+            // 业务自己的词条...
+        },
+        "en-US": {
+            // 业务自己的词条...
+        },
+    },
+});
+
+app.use(i18n);
+app.use(Jx3boxUiI18n, { i18n }); // 合并本库词条
+install(app); // 注册组件
+
+app.mount("#app");
+```
+
+### 2）宿主项目未使用 vue-i18n（快速接入）
+
+```js
+import { createApp } from "vue";
+import App from "./App.vue";
+import { install, Jx3boxUiI18n } from "@jx3box/jx3box-vue3-ui";
+
+const app = createApp(App);
+
+app.use(Jx3boxUiI18n, { locale: "zh-CN" });
+install(app);
+
+app.mount("#app");
+```
+
+### 3）覆盖/扩展本库词条
+
+在宿主 i18n 中覆盖同名 key 即可（以 `jx3boxUi` 为根）：
+
+```js
+i18n.global.mergeLocaleMessage("en-US", {
+    jx3boxUi: {
+        header: {
+            vipCenter: "Membership",
+        },
+    },
+});
+```
+
+### 说明
+
+- 目前优先对 `Header` 相关组件与少量通用提示文案做了 i18n 化；其它组件可按同样方式逐步迁移。

package/i18n/index.js

@@ -0,0 +1,134 @@
+import { createI18n } from "vue-i18n";
+
+import zhCN from "./messages/zh-CN";
+import enUS from "./messages/en-US";
+import zhTW from "./messages/zh-TW";
+import vi from "./messages/vi";
+
+const NAMESPACE = "jx3boxUi";
+
+const rawMessages = {
+    "zh-CN": zhCN,
+    "en-US": enUS,
+    "zh-TW": zhTW,
+    vi,
+};
+
+function buildNamespacedMessages(messages) {
+    const out = {};
+    Object.entries(messages).forEach(([locale, message]) => {
+        out[locale] = {
+            [NAMESPACE]: message,
+        };
+    });
+    return out;
+}
+
+const namespacedMessages = buildNamespacedMessages(rawMessages);
+
+let activeI18n = null;
+
+export function setJx3boxUiI18n(i18n) {
+    activeI18n = i18n || null;
+}
+
+export function getJx3boxUiI18n() {
+    return activeI18n;
+}
+
+export function getJx3boxUiMessages() {
+    return rawMessages;
+}
+
+export function mergeJx3boxUiMessages(i18n) {
+    if (!i18n || !i18n.global || typeof i18n.global.mergeLocaleMessage !== "function") return;
+
+    Object.entries(namespacedMessages).forEach(([locale, message]) => {
+        i18n.global.mergeLocaleMessage(locale, message);
+    });
+}
+
+export function createJx3boxUiI18n(options = {}) {
+    const {
+        locale = "zh-CN",
+        fallbackLocale = "zh-CN",
+        legacy = false,
+        globalInjection = true,
+        ...rest
+    } = options;
+
+    const i18n = createI18n({
+        legacy,
+        globalInjection,
+        locale,
+        fallbackLocale,
+        messages: namespacedMessages,
+        ...rest,
+    });
+
+    setJx3boxUiI18n(i18n);
+    return i18n;
+}
+
+export function tGlobal(key, values, fallback) {
+    try {
+        const i18n = getJx3boxUiI18n();
+        if (i18n && i18n.global && typeof i18n.global.t === "function") {
+            return i18n.global.t(key, values);
+        }
+    } catch (e) {
+        // ignore
+    }
+    return fallback ?? key;
+}
+
+export function getJx3boxUiAvailableLocales() {
+    return Object.keys(rawMessages);
+}
+
+export function setJx3boxUiLocale(locale) {
+    const i18n = getJx3boxUiI18n();
+    if (!i18n || !i18n.global) return false;
+
+    const global = i18n.global;
+
+    if (global.locale && typeof global.locale === "object" && "value" in global.locale) {
+        global.locale.value = locale;
+        return true;
+    }
+
+    if (typeof global.locale === "string") {
+        global.locale = locale;
+        return true;
+    }
+
+    if (global.locale && typeof global.locale === "function") {
+        try {
+            global.locale(locale);
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    return false;
+}
+
+// Vue plugin：
+// 1) 宿主已创建 i18n：传入 { i18n }，我们只 merge 词条并记录全局引用
+// 2) 宿主未使用 i18n：直接 app.use(Jx3boxUiI18n, { locale: "zh-CN" }) 即可
+export const Jx3boxUiI18n = {
+    install(app, options = {}) {
+        const { i18n, ...rest } = options || {};
+
+        if (i18n) {
+            mergeJx3boxUiMessages(i18n);
+            setJx3boxUiI18n(i18n);
+            return;
+        }
+
+        const created = createJx3boxUiI18n(rest);
+        app.use(created);
+    },
+};
+