@jx3box/jx3box-editor 2.2.47 → 3.0.0

package/src/assets/css/upload_album.less

@@ -0,0 +1,164 @@
+.u-hidden-input {
+    .none;
+}
+
+.c-upload-album {
+    > .el-button {
+        margin-top: 20px;
+    }
+}
+
+.c-upload-album-list {
+    border: 1px dashed #d9d9d9;
+    border-radius: 4px;
+    padding: 8px;
+    margin-top: 20px;
+    min-height: 148px;
+    position: relative;
+    cursor: pointer;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+
+    &.is-dragover {
+        border-color: #409eff;
+        background: #f0f9ff;
+    }
+
+    &.is-uploading {
+        opacity: 0.7;
+        pointer-events: none;
+    }
+
+    &.is-empty {
+        border: none;
+        background: transparent;
+        padding: 0;
+    }
+
+    .u-draggable-list {
+        display: inline;
+        min-height: 148px;
+    }
+
+    .u-album-item {
+        .pr;
+        .size(148px);
+        overflow: hidden;
+        background-color: #fff;
+        border: 1px solid #c0ccda;
+        border-radius: 6px;
+        box-sizing: border-box;
+        margin: 0 8px 8px 0;
+        display: inline-block;
+
+        .u-pic {
+            .db;
+            .size(100%);
+        }
+
+        &:hover {
+            .u-mask {
+                .db;
+            }
+            .u-op {
+                display: inline-flex;
+            }
+        }
+    }
+
+    .u-mask,
+    .u-op {
+        .pa;
+        .none;
+    }
+
+    .u-mask {
+        background-color: rgba(0, 0, 0, 0.5);
+        transition: opacity 0.3s;
+        .lt(0);
+        .size(100%);
+        cursor: move;
+    }
+
+    .u-op {
+        .pointer;
+        color: #fff;
+        .lt(50%);
+        transform: translate(-50%, -50%);
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.58);
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+
+        .el-icon {
+            font-size: 16px;
+        }
+    }
+
+    .u-delete {
+        .ml(24px);
+    }
+
+    .u-preview {
+        .ml(-24px);
+    }
+
+    .u-drop-hint {
+        display: inline-flex;
+        vertical-align: top;
+        align-items: center;
+        justify-content: center;
+        min-height: 148px;
+        min-width: 220px;
+        margin: 0 8px 8px 0;
+        border: 1px dashed #c9d1dc;
+        border-radius: 6px;
+        color: #909399;
+        gap: 6px;
+        padding: 0 16px;
+        background: #fafafa;
+
+        &.is-empty {
+            width: 100%;
+            min-height: 180px;
+            margin: 0;
+        }
+
+        .u-drop-icon {
+            font-size: 28px;
+            color: #c0c4cc;
+        }
+
+        .u-drop-link {
+            color: #409eff;
+        }
+    }
+
+    .u-add-card {
+        display: inline-flex;
+        vertical-align: top;
+        width: 148px;
+        height: 148px;
+        margin: 0 8px 8px 0;
+        border: 1px dashed #c0c4cc;
+        border-radius: 6px;
+        align-items: center;
+        justify-content: center;
+        background: #fff;
+        cursor: pointer;
+        transition: border-color 0.2s ease, color 0.2s ease;
+        color: #8c939d;
+
+        .el-icon {
+            font-size: 30px;
+        }
+
+        &:hover {
+            border-color: #409eff;
+            color: #409eff;
+        }
+    }
+}

package/src/assets/css/var.less

@@ -0,0 +1,2 @@
+@import "../../../config/global.less";
+

package/src/assets/img/other/qr-code.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m456.66 0h-71.66c-8.284 0-15 6.716-15 15s6.716 15 15 15h71.66c13.972 0 25.34 11.368 25.34 25.341v71.659c0 8.284 6.716 15 15 15s15-6.716 15-15v-71.659c0-30.515-24.826-55.341-55.34-55.341z"/><path d="m15 142c8.284 0 15-6.716 15-15v-71.659c0-13.973 11.368-25.341 25.34-25.341h71.66c8.284 0 15-6.716 15-15s-6.716-15-15-15h-71.66c-30.514 0-55.34 24.826-55.34 55.341v71.659c0 8.284 6.716 15 15 15z"/><path d="m127 482h-71.66c-13.972 0-25.34-11.368-25.34-25.341v-71.659c0-8.284-6.716-15-15-15s-15 6.716-15 15v71.659c0 30.515 24.826 55.341 55.34 55.341h71.66c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m497 370c-8.284 0-15 6.716-15 15v71.659c0 13.973-11.368 25.341-25.34 25.341h-71.66c-8.284 0-15 6.716-15 15s6.716 15 15 15h71.66c30.515 0 55.34-24.826 55.34-55.341v-71.659c0-8.284-6.716-15-15-15z"/><path d="m341.643 110h47.575c6.497 0 11.782 5.285 11.782 11.782v47.574c0 8.284 6.716 15 15 15s15-6.716 15-15v-47.574c0-23.039-18.744-41.782-41.782-41.782h-47.575c-8.284 0-15 6.716-15 15s6.716 15 15 15z"/><path d="m81 121.782v47.574c0 8.284 6.716 15 15 15s15-6.716 15-15v-47.574c0-6.497 5.286-11.782 11.782-11.782h47.575c8.284 0 15-6.716 15-15s-6.716-15-15-15h-47.575c-23.038 0-41.782 18.743-41.782 41.782z"/><path d="m170.357 400h-47.575c-6.497 0-11.782-5.285-11.782-11.782v-47.574c0-8.284-6.716-15-15-15s-15 6.716-15 15v47.574c0 23.039 18.744 41.782 41.782 41.782h47.575c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m431 388.218v-47.574c0-8.284-6.716-15-15-15s-15 6.716-15 15v47.574c0 6.497-5.286 11.782-11.782 11.782h-47.575c-8.284 0-15 6.716-15 15s6.716 15 15 15h47.575c23.038 0 41.782-18.743 41.782-41.782z"/><path d="m1 256c0 8.284 6.716 15 15 15h480c8.284 0 15-6.716 15-15s-6.716-15-15-15h-480c-8.284 0-15 6.716-15 15z"/></g></svg>

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

@@ -1,6 +1,6 @@
 import $ from "jquery";
 import { showAvatar } from "@jx3box/jx3box-common/js/utils";
-import {getUserInfo} from "../../service/author";
+import { getUserInfo } from "../../service/author";
 
 /**
  * 渲染音频组件
@@ -34,7 +34,7 @@ function renderVoice(selector = ".w-audio, .e-audio") {
             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)}`;
 

package/{assets → src/assets}/js/directory.js

@@ -9,12 +9,34 @@ const count = {
 };
 const MAX_DEPTH = 3;
 const PREFIX_CLS = "lv"; //class前缀
-const HEADER_HEIGHT = 112; //头部高度
+
+const ICON_READING_SVG = `
+    <svg width="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-58697b5c=""><path fill="currentColor" d="m512 863.36 384-54.848v-638.72L525.568 222.72a96 96 0 0 1-27.136 0L128 169.792v638.72zM137.024 106.432l370.432 52.928a32 32 0 0 0 9.088 0l370.432-52.928A64 64 0 0 1 960 169.792v638.72a64 64 0 0 1-54.976 63.36l-388.48 55.488a32 32 0 0 1-9.088 0l-388.48-55.488A64 64 0 0 1 64 808.512v-638.72a64 64 0 0 1 73.024-63.36"></path><path fill="currentColor" d="M480 192h64v704h-64z"></path></svg>
+`;
+
+const ICON_CARET_SVG = `
+    <svg width="12px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-58697b5c=""><path fill="currentColor" d="m512 128 288 320H224zM224 576h576L512 896z"></path></svg>
+`;
+
+function getHeaderHeight() {
+    // 页面上可能没有这些元素，取存在的第一个：.c-header 优先，其次 .c-breadcrumb
+    const el = document.querySelector(".c-header") || document.querySelector(".c-breadcrumb");
+    if (!el) return 0;
+    const rect = el.getBoundingClientRect && el.getBoundingClientRect();
+    const h = (rect && rect.height) || el.offsetHeight || 0;
+    return Math.max(0, Math.round(h));
+}
+
+function scrollToTopWithOffset(top) {
+    const headerHeight = getHeaderHeight();
+    const targetTop = Math.max(0, (top || 0) - headerHeight);
+    window.scrollTo(0, targetTop);
+}
 
 function directory(from, to = '#directory') {
     // 装载容器设置
     const $box = $(to);
-    if (!to && $box.length) return;
+    if (!$box.length) return false;
 
     // 遍历节点
     let directories = $(from).find("h1,h2,h3,h4,h5,h6");
@@ -26,8 +48,8 @@ function directory(from, to = '#directory') {
         $box.html(
             `<div class="c-article-directory" id="c-article-directory">
                 <div class="c-article-directory-title" id="c-article-directory-title">
-                    <span class="c-article-directory-title-label" class="c-go-top"><i class="u-icon el-icon-reading"></i> 导读</span>
-                    <span class="c-article-directory-title-folder" class="c-go-top"><i class="el-icon-d-caret"></i> 折叠</span>
+                    <span class="c-article-directory-title-label" class="c-go-top">${ICON_READING_SVG} 导读</span>
+                    <span class="c-article-directory-title-folder" class="c-go-top">${ICON_CARET_SVG} 折叠</span>
                 </div>
                 <div class="c-article-directory-content" id="c-article-directory-content"></div>
             </div>`
@@ -37,7 +59,7 @@ function directory(from, to = '#directory') {
         // const $skip = $(".c-article-directory-title-skip");
         const $folder = $(".c-article-directory-title-folder");
 
-        $folder.on("click", function() {
+        $folder.off("click.jx3boxDirectory").on("click.jx3boxDirectory", function() {
             $("#c-article-directory-content").slideToggle();
         });
         // 顶部按钮
@@ -49,8 +71,10 @@ function directory(from, to = '#directory') {
         directories.each(function(i, item) {
             // 进行克隆
             let _item = $(item).clone();
-            // 解决懒加载跳转位置问题
-            $(item).prepend(`<a id="directory-${i}" class="w-directory-anchor"></a>`);
+            // 解决懒加载跳转位置问题（防止重复执行时重复插入）
+            if (!$(item).children("a.w-directory-anchor").length) {
+                $(item).prepend(`<a id="directory-${i}" class="w-directory-anchor"></a>`);
+            }
 
             // 过滤行内样式
             _item.removeAttr("style");
@@ -76,22 +100,26 @@ function directory(from, to = '#directory') {
         });
 
         // 进行事件委托
-        $directory.on("click", "h1,h2,h3,h4,h5,h6", function(e) {
-            e.preventDefault();
-            window.location.hash = $(this).data("raw").find('a[id^="directory-"]').first().attr('id')
-            let target = $(this)
-                .data("raw")
-                .offset().top;
-            $(document).scrollTop(target - HEADER_HEIGHT);
-            $(this)
-                .data("raw")
-                .addClass("isScrollFocus");
-            setTimeout(() => {
-                $(this)
-                    .data("raw")
-                    .removeClass("isScrollFocus");
-            }, 3500);
-        });
+        $directory
+            .off("click.jx3boxDirectory", "h1,h2,h3,h4,h5,h6")
+            .on("click.jx3boxDirectory", "h1,h2,h3,h4,h5,h6", function(e) {
+                e.preventDefault();
+
+                const $raw = $(this).data("raw");
+                if (!$raw || !$raw.length) return;
+
+                const anchorId = $raw.find('a[id^="directory-"]').first().attr("id");
+                if (anchorId) window.location.hash = anchorId;
+
+                const top = $raw.offset().top;
+                // 等待 hash 更新和布局稳定后再滚动，避免异步渲染/图片加载影响
+                requestAnimationFrame(() => scrollToTopWithOffset(top));
+
+                $raw.addClass("isScrollFocus");
+                setTimeout(() => {
+                    $raw.removeClass("isScrollFocus");
+                }, 3500);
+            });
 
         return true;
     }

package/src/assets/js/hljs_languages.js

@@ -0,0 +1,177 @@
+/**
+ * highlight.js 默认支持（不需要额外装库）的语法
+ * https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
+ */
+
+export default [
+    // 不加参数时默认的
+    { text: "JSON", value: "json" },
+    { text: "Lua", value: "lua" },
+    { text: "HTML, XML", value: "xml" },
+    { text: "Bash", value: "bash" },
+    { text: "JavaScript", value: "javascript" },
+    { text: "Python", value: "python" },
+    { text: "Java", value: "java" },
+    { text: "C", value: "c" },
+    { text: "C#", value: "csharp" },
+    { text: "C++", value: "cpp" },
+
+    // 其他支持的
+    { text: "1C", value: "1c" },
+    { text: "ABNF", value: "abnf" },
+    { text: "Access logs", value: "accesslog" },
+    { text: "Ada", value: "ada" },
+    { text: "Arduino (C++ w/Arduino libs)", value: "arduino" },
+    { text: "ARM assembler", value: "armasm" },
+    { text: "AVR assembler", value: "avrasm" },
+    { text: "ActionScript", value: "actionscript" },
+    { text: "AngelScript", value: "angelscript" },
+    { text: "Apache", value: "apache" },
+    { text: "AppleScript", value: "applescript" },
+    { text: "Arcade", value: "arcade" },
+    { text: "AsciiDoc", value: "asciidoc" },
+    { text: "AspectJ", value: "aspectj" },
+    { text: "AutoHotkey", value: "autohotkey" },
+    { text: "AutoIt", value: "autoit" },
+    { text: "Awk", value: "awk" },
+    { text: "Basic", value: "basic" },
+    { text: "BNF", value: "bnf" },
+    { text: "Brainfuck", value: "brainfuck" },
+    { text: "C/AL", value: "cal" },
+    { text: "Cache Object Script", value: "cos" },
+    { text: "CMake", value: "cmake" },
+    { text: "Coq", value: "coq" },
+    { text: "CSP", value: "csp" },
+    { text: "CSS", value: "css" },
+    { text: "Cap’n Proto", value: "capnproto" },
+    { text: "Clojure", value: "clojure" },
+    { text: "CoffeeScript", value: "coffeescript" },
+    { text: "Crmsh", value: "crmsh" },
+    { text: "Crystal", value: "crystal" },
+    { text: "D", value: "d" },
+    { text: "Dart", value: "dart" },
+    { text: "Delphi", value: "dpr" },
+    { text: "Diff", value: "diff" },
+    { text: "Django", value: "django" },
+    { text: "DNS Zone file", value: "dns" },
+    { text: "Dockerfile", value: "dockerfile" },
+    { text: "DOS", value: "dos" },
+    { text: "dsconfig", value: "dsconfig" },
+    { text: "DTS (Device Tree)", value: "dts" },
+    { text: "Dust", value: "dust" },
+    { text: "EBNF", value: "ebnf" },
+    { text: "Elixir", value: "elixir" },
+    { text: "Elm", value: "elm" },
+    { text: "Erlang", value: "erlang" },
+    { text: "Excel", value: "excel" },
+    { text: "F#", value: "fsharp" },
+    { text: "FIX", value: "fix" },
+    { text: "Fortran", value: "fortran" },
+    { text: "G-Code", value: "gcode" },
+    { text: "Gams", value: "gams" },
+    { text: "GAUSS", value: "gauss" },
+    { text: "Gherkin", value: "gherkin" },
+    { text: "Go", value: "go" },
+    { text: "Golo", value: "golo" },
+    { text: "Gradle", value: "gradle" },
+    { text: "Groovy", value: "groovy" },
+    { text: "HTTP", value: "http" },
+    { text: "Haml", value: "haml" },
+    { text: "Handlebars", value: "handlebars" },
+    { text: "Haskell", value: "haskell" },
+    { text: "Haxe", value: "haxe" },
+    { text: "Hy", value: "hy" },
+    { text: "Ini, TOML", value: "ini" },
+    { text: "Inform7", value: "inform7" },
+    { text: "IRPF90", value: "irpf90" },
+    { text: "Julia", value: "julia" },
+    { text: "Kotlin", value: "kotlin" },
+    { text: "LaTeX", value: "tex" },
+    { text: "Leaf", value: "leaf" },
+    { text: "Lasso", value: "lasso" },
+    { text: "Less", value: "less" },
+    { text: "LDIF", value: "ldif" },
+    { text: "Lisp", value: "lisp" },
+    { text: "LiveCode Server", value: "livecodeserver" },
+    { text: "LiveScript", value: "livescript" },
+    { text: "Makefile", value: "makefile" },
+    { text: "Markdown", value: "markdown" },
+    { text: "Mathematica", value: "mathematica" },
+    { text: "Matlab", value: "matlab" },
+    { text: "Maxima", value: "maxima" },
+    { text: "Maya Embedded Language", value: "mel" },
+    { text: "Mercury", value: "mercury" },
+    { text: "Mizar", value: "mizar" },
+    { text: "Mojolicious", value: "mojolicious" },
+    { text: "Monkey", value: "monkey" },
+    { text: "Moonscript", value: "moonscript" },
+    { text: "N1QL", value: "n1ql" },
+    { text: "NSIS", value: "nsis" },
+    { text: "Nginx", value: "nginx" },
+    { text: "Nim", value: "nim" },
+    { text: "Nix", value: "nix" },
+    { text: "OCaml", value: "ocaml" },
+    { text: "Objective C", value: "objectivec" },
+    { text: "OpenGL Shading Language", value: "glsl" },
+    { text: "OpenSCAD", value: "openscad" },
+    { text: "Oracle Rules Language", value: "ruleslanguage" },
+    { text: "Oxygene", value: "oxygene" },
+    { text: "PF", value: "pf" },
+    { text: "PHP", value: "php" },
+    { text: "Parser3", value: "parser3" },
+    { text: "Perl", value: "perl" },
+    { text: "Plaintext", value: "plaintext" },
+    { text: "Pony", value: "pony" },
+    { text: "PostgreSQL & PL/pgSQL", value: "pgsql" },
+    { text: "PowerShell", value: "powershell" },
+    { text: "Processing", value: "processing" },
+    { text: "Prolog", value: "prolog" },
+    { text: "Properties", value: "properties" },
+    { text: "Protocol Buffers", value: "protobuf" },
+    { text: "Puppet", value: "puppet" },
+    { text: "Python profiler results", value: "profile" },
+    { text: "Python REPL", value: "python-repl" },
+    { text: "Q", value: "k" },
+    { text: "QML", value: "qml" },
+    { text: "R", value: "r" },
+    { text: "ReasonML", value: "reasonml" },
+    { text: "RenderMan RIB", value: "rib" },
+    { text: "RenderMan RSL", value: "rsl" },
+    { text: "Roboconf", value: "graph" },
+    { text: "Ruby", value: "ruby" },
+    { text: "Rust", value: "rust" },
+    { text: "SAS", value: "SAS" },
+    { text: "SCSS", value: "scss" },
+    { text: "SQL", value: "sql" },
+    { text: "STEP Part 21", value: "p21" },
+    { text: "Scala", value: "scala" },
+    { text: "Scheme", value: "scheme" },
+    { text: "Scilab", value: "scilab" },
+    { text: "Shell", value: "shell" },
+    { text: "Smali", value: "smali" },
+    { text: "Smalltalk", value: "smalltalk" },
+    { text: "SML", value: "sml" },
+    { text: "Stan", value: "stan" },
+    { text: "Stata", value: "stata" },
+    { text: "Stylus", value: "stylus" },
+    { text: "SubUnit", value: "subunit" },
+    { text: "Swift", value: "swift" },
+    { text: "Tcl", value: "tcl" },
+    { text: "Test Anything Protocol", value: "tap" },
+    { text: "Thrift", value: "thrift" },
+    { text: "TP", value: "tp" },
+    { text: "Twig", value: "twig" },
+    { text: "TypeScript", value: "typescript" },
+    { text: "VB.Net", value: "vbnet" },
+    { text: "VBScript", value: "vbscript" },
+    { text: "VHDL", value: "vhdl" },
+    { text: "Vala", value: "vala" },
+    { text: "Verilog", value: "verilog" },
+    { text: "Vim Script", value: "vim" },
+    { text: "X++", value: "axapta" },
+    { text: "x86 Assembly", value: "x86asm" },
+    { text: "XL", value: "xl" },
+    { text: "XQuery", value: "xquery" },
+    { text: "YAML", value: "yml" },
+    { text: "Zephir", value: "zephir" },
+];