@jx3box/jx3box-editor 2.2.46 → 2.2.47

package/assets/js/{voice.js → audio.js}

@@ -1,5 +1,6 @@
 import $ from "jquery";
 import { showAvatar } from "@jx3box/jx3box-common/js/utils";
+import {getUserInfo} from "../../service/author";
 
 /**
  * 渲染音频组件
@@ -8,7 +9,7 @@ import { showAvatar } from "@jx3box/jx3box-common/js/utils";
  */
 function renderVoice(selector = ".w-audio, .e-audio") {
     try {
-        $(selector).each(function (i, ele) {
+        $(selector).each(async function (i, ele) {
             const $audio = $(this);
             const content = $audio.text().trim();
 
@@ -22,19 +23,21 @@ function renderVoice(selector = ".w-audio, .e-audio") {
             });
 
             // 提取参数
-            const { name = "未命名音频", author = "未知", user_id = "", src = "" } = params;
+            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 avatar = showAvatar(params.avatar, 240);
-
             // 渲染音频播放器 - 使用项目中定义的样式结构
             const html = `
                 <div class="w-audio-player" id="${playerId}" data-user-id="${user_id}">
@@ -235,4 +238,12 @@ function checkTextWidth($player) {
     }
 }
 
+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.46",
+    "version": "2.2.47",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {

package/public/css/article.css

@@ -767,6 +767,7 @@
   margin-top: 0;
   margin-bottom: 0;
   line-height: 1.1;
+  text-combine-upright: none !important;
 }
 .w-qixue-box .w-qixue-clist {
   margin: 0;
@@ -1400,6 +1401,321 @@
   padding: 2px 8px;
   line-height: 21px;
 }
+.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;
+  position: relative;
+  *zoom: 1;
+}
+.e-audio:after {
+  content: "JX3BOX·AUDIO";
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  background-color: #62a9ff;
+  color: #fff;
+  border-radius: 3px;
+  padding: 2px 8px;
+  line-height: 21px;
+}
+.w-audio-player {
+  position: relative;
+  *zoom: 1;
+  border-radius: 24px;
+  box-sizing: border-box;
+  width: 376px;
+  background: rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease-in-out;
+  padding: 24px;
+}
+.w-audio-player .m-item {
+  position: relative;
+  cursor: pointer;
+  border-radius: 16px;
+  overflow: hidden;
+  *zoom: 1;
+  margin-bottom: 24px;
+  color: #fff;
+  padding: 32px 36px;
+  box-sizing: border-box;
+  width: 100%;
+  background: linear-gradient(180deg, #7676f0 0%, #9495e9 100%);
+}
+.w-audio-player .m-item a {
+  color: #fff;
+  text-decoration: none;
+}
+.w-audio-player .m-item a:hover {
+  text-decoration: none;
+  box-shadow: none;
+}
+.w-audio-player .m-item img {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.w-audio-player .m-item::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.3s ease-in-out;
+  background: linear-gradient(180deg, #f9c27f 0%, #9697ed 100%);
+}
+.w-audio-player .m-item .u-title {
+  display: flex;
+  position: relative;
+  *zoom: 1;
+  font-weight: bold;
+  font-size: 24px;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  max-width: 300px;
+  box-sizing: border-box;
+  font-family: "ALIMAMASHUHEITI";
+}
+.w-audio-player .m-item .u-title .clip {
+  overflow: hidden;
+  *zoom: 1;
+  width: 100%;
+}
+.w-audio-player .m-item .u-title .marquee-wrapper {
+  white-space: nowrap;
+  position: relative;
+  display: inline-block;
+  transition: transform 0s linear;
+}
+.w-audio-player .m-item .u-title .marquee-wrapper.marquee-animate {
+  animation: marquee linear infinite;
+  animation-fill-mode: forwards;
+}
+.w-audio-player .m-item .u-title .marquee-text {
+  display: inline-block;
+}
+.w-audio-player .m-item .u-title .marquee-text::after {
+  content: "》";
+  display: inline-block;
+}
+.w-audio-player .m-item .u-title .marquee-text::before {
+  content: "《";
+  display: inline-block;
+}
+.w-audio-player .m-item .u-title .marquee-text.copy {
+  margin-left: 180px;
+  display: none;
+}
+.w-audio-player .m-item .u-title .marquee-text.copy::after,
+.w-audio-player .m-item .u-title .marquee-text.copy::before {
+  display: none;
+}
+.w-audio-player .m-item .u-title.marquee-active .marquee-text.copy {
+  display: inline-block;
+}
+.w-audio-player .m-item .u-title.marquee-active .marquee-animate .marquee-text::after,
+.w-audio-player .m-item .u-title.marquee-active .marquee-animate .marquee-text::before {
+  display: none;
+}
+.w-audio-player .m-item .u-title.marquee-active::after {
+  content: "》";
+  display: inline-block;
+  position: absolute;
+  right: -28px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+.w-audio-player .m-item .u-title.marquee-active::before {
+  content: "《";
+  display: inline-block;
+  position: absolute;
+  left: -28px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+.w-audio-player .m-item .u-author {
+  text-align: center;
+  font-size: 14px;
+  opacity: 0.75;
+  filter: alpha(opacity=75);
+  margin-top: 5px;
+}
+.w-audio-player .m-item .m-record {
+  position: relative;
+  *zoom: 1;
+  padding: 42px 0 3px 0;
+}
+.w-audio-player .m-item .m-record .u-needle {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 120px;
+  height: 72px;
+  margin-left: -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);
+}
+.w-audio-player .m-item .m-record .u-needle.isPlaying {
+  top: -3px;
+  margin: 0;
+  transform-origin: 0% 0%;
+  transform: rotate(30deg);
+  display: inline-block;
+}
+.w-audio-player .m-item .m-record .u-record {
+  display: block;
+  width: 182px;
+  height: 182px;
+  margin-left: auto;
+  margin-right: auto;
+  user-select: none;
+  padding: 28px;
+  box-sizing: border-box;
+  background: url("https://cdn.jx3box.com/design/event/jx3cxk/web/item/record.svg") no-repeat center center;
+  background-size: 100% 100%;
+}
+.w-audio-player .m-item .m-record .u-avatar {
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.6s ease-out;
+}
+.w-audio-player .m-item .m-record .u-avatar.isRotate {
+  animation: rotate 6s linear infinite;
+}
+.w-audio-player .m-item .m-record .u-avatar.isRotate.isPaused {
+  animation-play-state: paused;
+}
+.w-audio-player .m-item .m-progress {
+  position: relative;
+  *zoom: 1;
+  margin: 16px 0;
+}
+.w-audio-player .m-item .m-progress .u-progress-bar {
+  position: relative;
+  *zoom: 1;
+  height: 3px;
+  background: rgba(65, 61, 82, 0.3);
+  border-radius: 3px;
+  cursor: pointer;
+  overflow: visible;
+}
+.w-audio-player .m-item .m-progress .u-progress-bar .u-progress-fill {
+  position: absolute;
+  height: 100%;
+  background: #fff;
+  border-radius: 3px;
+  width: 0%;
+  transition: width 0.1s linear;
+}
+.w-audio-player .m-item .m-progress .u-progress-bar .u-progress-handle {
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border: 2px solid rgba(65, 61, 82, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  transition: left 0.1s linear;
+}
+.w-audio-player .m-item .m-play {
+  position: relative;
+  *zoom: 1;
+  display: flex;
+  padding-top: 10px;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.w-audio-player .m-item .m-play .u-play-button {
+  display: flex;
+  justify-content: space-between;
+  width: 70%;
+  box-sizing: border-box;
+  margin: 0 15% 20px 15%;
+  align-items: center;
+}
+.w-audio-player .m-item .m-play .u-icon {
+  width: 24px;
+  height: 24px;
+}
+.w-audio-player .m-item .m-play .u-play {
+  width: 64px;
+  height: 64px;
+}
+.w-audio-player .m-item .m-play .u-like {
+  opacity: 0.75;
+  filter: alpha(opacity=75);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.w-audio-player .m-item .m-play .u-like .u-icon {
+  width: 20px;
+  height: 20px;
+}
+.w-audio-player .m-item .m-play .u-link {
+  opacity: 0.75;
+  filter: alpha(opacity=75);
+  color: #fff;
+}
+.w-audio-player.play .m-item {
+  background: linear-gradient(180deg, #55c79f 0%, #9697ed 100%);
+}
+.w-audio-player:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+.w-audio-player:hover .m-item::before {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+@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;
+}
+.c-article-editor .e-audio {
+  display: block;
+}
 .c-article-directory h1,
 .c-article-directory h2,
 .c-article-directory h3,

package/public/tinymce.html

@@ -8,12 +8,12 @@
         <title><%= htmlWebpackPlugin.options.title %></title>
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
         <script>
-            // window.RX_TINYMCE_ROOT = "https://cdn.jx3box.com/static/tinymce";
-            window.RX_TINYMCE_ROOT = "http://localhost:3000";
+            window.RX_TINYMCE_ROOT = "https://cdn.jx3box.com/static/tinymce";
+            // window.RX_TINYMCE_ROOT = "http://localhost:3000";
         </script>
-        <!-- <script src="https://cdn.jx3box.com/static/tinymce/tinymce.min.js?v=1.9.0"></script> -->
+        <script src="https://cdn.jx3box.com/static/tinymce/tinymce.min.js?v=1.9.0"></script>
         <!-- TODO: -->
-        <script src="http://localhost:3000/tinymce.min.js?v=1.9.0"></script>
+        <!-- <script src="http://localhost:3000/tinymce.min.js?v=1.9.0"></script> -->
     </head>
     <body>
         <div id="app"></div>

package/src/Article.vue

@@ -66,7 +66,7 @@ import renderCode from "../assets/js/code";
 import renderImgPreview from "../assets/js/renderImgPreview";
 import renderPzIframe from "../assets/js/pz_iframe";
 import renderCombo from "../assets/js/combo";
-import renderVoice from "../assets/js/voice";
+import renderAudio from "../assets/js/audio";
 
 // 剑三
 import Item from "./Item";
@@ -217,7 +217,7 @@ export default {
             // 连招
             renderCombo();
             // 音频
-            renderVoice();
+            renderAudio();
             // 物品
             renderJx3Element(this);
         },

package/src/ArticleMarkdown.vue

@@ -38,7 +38,7 @@ import Skill from "./Skill";
 import Npc from "./Npc";
 import renderJx3Element from "../assets/js/jx3_element";
 import renderImgPreview from "../assets/js/renderImgPreview";
-import renderVoice from "../assets/js/voice";
+import renderAudio from "../assets/js/audio";
 
 import {xssOptions} from '../assets/data/markdown_whitelist.json'
 
@@ -118,7 +118,7 @@ export default {
             // 语法高亮
             renderCode(`code[class=^'lang-']`)
             // 音频
-            renderVoice();
+            renderAudio();
             // 物品
             renderJx3Element(this);
         },

package/src/Tinymce.vue

@@ -59,8 +59,7 @@ export default {
 
                 // 样式
                 // TODO:
-                content_css:
-                    process.env.VUE_APP_DEV_COMPONENT == "true" ? "http://localhost:3000/skins/content/default/content.min.css" : `https://cdn.jx3box.com/static/jx3box-editor/css/article.css`,
+                content_css: process.env.VUE_APP_DEV_COMPONENT == "true" ? "/css/article.css" : `https://cdn.jx3box.com/static/jx3box-editor/css/article.css`,
                 // content_css: `http://localhost:3000/skins/content/default/content.min.css`,
                 body_class: "c-article c-article-editor c-article-tinymce",
                 height: this.height || 800,
@@ -76,17 +75,17 @@ export default {
                     "link autolink",
                     "hr lists advlist table codeinline codesample checklist foldtext latex anchor",
                     "image emoticons media videox macro qixue talent2",
-                    "code fullscreen wordcount powerpaste pagebreak printpage pz audio_x", // template anchor jx3icon autosave
+                    "code fullscreen wordcount powerpaste pagebreak printpage pz audiox", // template anchor jx3icon autosave
                 ],
                 toolbar: [
                     "undo | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough superscript subscript | link unlink | fullscreen code", //anchor restoredraft
-                    "removeformat | hr alignleft aligncenter alignright alignjustify indent outdent | bullist numlist checklist table blockquote foldtext codeinline codesample latex | emoticons image media videox audio_x | macro pz qixue talent2 pagebreak printpage", // template anchor jx3icon
+                    "removeformat | hr alignleft aligncenter alignright alignjustify indent outdent | bullist numlist checklist table blockquote foldtext codeinline codesample latex | emoticons image media videox audiox | macro pz qixue talent2 pagebreak printpage", // template anchor jx3icon
                 ],
                 mobile: {
                     toolbar_drawer: true,
                     toolbar: [
                         "undo emoticons bold italic underline strikethrough superscript subscript link unlink forecolor backcolor removeformat pagebreak fullscreen code",
-                        "hr alignleft aligncenter alignright alignjustify indent outdent bullist numlist checklist table blockquote foldtext codeinline codesample latex macro pz qixue talent2 media videox audio_x",
+                        "hr alignleft aligncenter alignright alignjustify indent outdent bullist numlist checklist table blockquote foldtext codeinline codesample latex macro pz qixue talent2 media videox audiox",
                     ],
                 },
                 block_formats: "段落=p;一级标题=h1;二级标题=h2;三级标题=h3;四级标题=h4;五级标题=h5;六级标题=h6;",