@jx3box/jx3box-editor 3.2.10 → 3.2.12

package/package.json

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

package/src/Article.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="c-article-tinymce c-article-box">
+    <Author mode="popover" class="c-article-tinymce c-article-box" data-jx3-element-scope>
         <!-- <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">
@@ -37,7 +37,7 @@
             :total="total"
         ></el-pagination>
 
-        <div class="w-jx3-element-pop" :style="jx3_element.style">
+        <div ref="jx3ElementPop" 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
@@ -47,15 +47,9 @@
                 v-show="jx3_element.type == 'skill'"
             />
             <jx3-npc :client="npc.client" :id="npc.id" v-show="jx3_element.type === 'npc'" />
-            <jx3-author
-                :key="author.id"
-                :uid="author.id"
-                :visible="jx3_element.type === 'author' && jx3_element.style.display !== 'none'"
-                v-show="jx3_element.type === 'author'"
-            />
             <jx3-emotion-author :id="emotion.id" v-show="jx3_element.type === 'emotion'" />
         </div>
-    </div>
+    </Author>
 </template>
 
 <script>
@@ -97,6 +91,33 @@ import Skill from "./Skill.vue";
 import Npc from "./Npc.vue";
 import renderJx3Element from "./assets/js/jx3_element.js";
 
+const NETEASE_MUSIC_PLAYER_SRC_RE =
+    /(\s+src\s*=\s*)(["'])(?:https?:)?\/\/music\.163\.com\/(?:m\/)?outchain\/player(?=[?#]|\2)/i;
+
+function isMobileArticleRuntime() {
+    if (typeof window !== "undefined" && typeof window.Capacitor?.isNativePlatform === "function") {
+        if (window.Capacitor.isNativePlatform()) return true;
+    }
+    if (typeof navigator === "undefined") return false;
+    if (navigator.userAgentData?.mobile === true) return true;
+
+    const userAgent = navigator.userAgent || "";
+    return (
+        /Android|iPhone|iPad|iPod|Mobile|HarmonyOS|OpenHarmony|ArkWeb/i.test(userAgent) ||
+        (/Macintosh/i.test(userAgent) && navigator.maxTouchPoints > 1)
+    );
+}
+
+function normalizeNeteaseMusicPlayerIframe(content) {
+    const playerUrl = isMobileArticleRuntime()
+        ? "https://music.163.com/m/outchain/player"
+        : "https://music.163.com/outchain/player";
+
+    return String(content || "").replace(/<iframe\b[^>]*>/gi, (iframe) =>
+        iframe.replace(NETEASE_MUSIC_PLAYER_SRC_RE, `$1$2${playerUrl}`)
+    );
+}
+
 export default {
     name: "Article",
     props: {
@@ -176,9 +197,6 @@ export default {
                 client: "std",
                 id: "",
             },
-            author: {
-                id: "",
-            },
             emotion: {
                 id: "",
             },
@@ -187,7 +205,7 @@ export default {
                 style: {
                     top: 0,
                     left: 0,
-                    display: "block",
+                    display: "none",
                 },
                 type: "",
             },
@@ -238,10 +256,13 @@ export default {
                     ...this.iframeWhitelist,
                 ]);
 
-                // 3. 处理图片懒加载
+                // 3. 避开网易云播放器在不同终端间跳转到 HTTP 地址
+                data = normalizeNeteaseMusicPlayerIframe(data);
+
+                // 4. 处理图片懒加载
                 data = execLazyload(data, this.cdnDomain);
 
-                // 4. 最后处理链接
+                // 5. 最后处理链接
                 data = execFilterLink(data, this.linkWhitelist, this.linkStrict);
 
                 return data;
@@ -299,7 +320,7 @@ export default {
             // 音频
             renderAudio();
             // 物品
-            renderJx3Element(this);
+            renderJx3Element(this, '.w-jx3-element:not([data-type="author"])');
         },
         doDir: function () {
             // 显示局部
@@ -363,17 +384,19 @@ export default {
                 }
             }
 
-            if (version !== this.renderVersion) return;
+            if (version !== this.renderVersion) return null;
             this.data = result;
+            return version;
         },
         run: async function () {
             this.page = 1;
             this.all = false;
-            await this.render();
-            if (!this.data.length) return;
+            const version = await this.render();
+            if (!version || version !== this.renderVersion || !this.data.length) return;
 
             // 等待html加载完毕后
             this.$nextTick(() => {
+                if (version !== this.renderVersion) return;
                 this.$emit("contentLoaded");
 
                 // 统一DOM处理
@@ -399,12 +422,22 @@ export default {
         this.mode = params.get("mode") || "";
         this.run();
     },
+    beforeUnmount: function () {
+        this.renderVersion++;
+        if (typeof this.__jx3ElementCleanup === "function") {
+            this.__jx3ElementCleanup();
+        }
+        if (this.__jx3ElementPop?.length && this.__jx3ElementPop.parent()[0] === document.body) {
+            this.__jx3ElementPop.remove();
+        }
+        this.__jx3ElementPop = null;
+    },
     components: {
         "jx3-item": Item,
         "jx3-buff": Buff,
         "jx3-skill": Skill,
         "jx3-npc": Npc,
-        "jx3-author": Author,
+        Author,
         "jx3-emotion-author": PostAuthor,
     },
 };

package/src/assets/js/img.js

@@ -1,4 +1,5 @@
 import { load } from "cheerio";
+import { resolveImagePath } from "@jx3box/jx3box-common/js/utils";
 
 function joinDomain(domain, path) {
     const d = String(domain || "").replace(/\/+$/, "");
@@ -16,7 +17,13 @@ function isAbsoluteLike(src) {
 
 function normalizeImgSrc(src, domain) {
     const s = String(src || "").trim();
-    if (!s || !domain) return s;
+    if (!s) return s;
+
+    // 历史 OSS 图片域名先统一转换为当前 CDN，随后再处理可选的相对路径拼接。
+    const resolved = resolveImagePath(s);
+    if (resolved && resolved !== s) return resolved;
+
+    if (!domain) return s;
     if (isAbsoluteLike(s)) return s;
 
     // 最常见：/uploads/xxx
@@ -52,15 +59,12 @@ export default function lazyLoad(html, domain = "") {
         // 固定懒加载：无论如何都加/覆盖
         img.attr("loading", "lazy");
 
-        // 只有传了 domain 才处理 src 拼接
-        if (domain) {
-            const src = img.attr("src");
-            if (src) img.attr("src", normalizeImgSrc(src, domain));
+        // 无论是否传入 domain，都先统一历史 OSS/CDN 地址；相对路径仅在有 domain 时拼接。
+        const src = img.attr("src");
+        if (src) img.attr("src", normalizeImgSrc(src, domain));
 
-            // 如果你有用 data-src 之类，也可以一起处理（可删）
-            const dataSrc = img.attr("data-src");
-            if (dataSrc) img.attr("data-src", normalizeImgSrc(dataSrc, domain));
-        }
+        const dataSrc = img.attr("data-src");
+        if (dataSrc) img.attr("data-src", normalizeImgSrc(dataSrc, domain));
     });
 
     return $("root").html() || "";

package/src/assets/js/jx3_element.js

@@ -1,25 +1,37 @@
 import $ from "jquery";
+import { onBeforeUnmount } from "vue";
+
+const SCOPE_ATTR = "data-jx3-element-scope";
+const POP_OWNER_ATTR = "data-jx3-element-pop-owner";
+const CLEANUP_REGISTERED = new WeakSet();
 
 function renderItem(vm, selector = ".w-jx3-element") {
+    if (typeof vm?.__jx3ElementCleanup === "function") {
+        vm.__jx3ElementCleanup();
+    }
+
     let outer, inner;
     const pop_class = ".w-jx3-element-pop";
     const scopeEl = vm && vm.$el ? vm.$el : document;
     const $scope = $(scopeEl);
-    const uid = vm && vm._uid ? vm._uid : "default";
+    const uid = vm?.$?.uid ?? vm?._uid ?? "default";
+    const scopeId = `jx3box-element-${uid}`;
     const ns = `.jx3boxElement_${uid}`;
     let lastTappedElement = null;
     const debugPop = false;
 
+    if (scopeEl !== document && scopeEl?.setAttribute) {
+        scopeEl.setAttribute(SCOPE_ATTR, scopeId);
+    }
+
     const isMobile = () => {
         if (typeof window === "undefined") return false;
 
         const coarsePointer =
-            typeof window.matchMedia === "function" &&
-            window.matchMedia("(hover: none) and (pointer: coarse)").matches;
+            typeof window.matchMedia === "function" && window.matchMedia("(hover: none) and (pointer: coarse)").matches;
         const hasTouchEvent = "ontouchstart" in window;
         const mobileUA =
-            typeof navigator !== "undefined" &&
-            /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent || "");
+            typeof navigator !== "undefined" && /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent || "");
 
         return coarsePointer || (hasTouchEvent && mobileUA);
     };
@@ -31,9 +43,21 @@ function renderItem(vm, selector = ".w-jx3-element") {
         document.documentElement.contains(vm.__jx3ElementPop[0])
             ? vm.__jx3ElementPop
             : null;
-    const $pop = cachedPop || $scope.find(pop_class).first();
+    const refPop = vm?.$refs?.jx3ElementPop;
+    const $refPop = refPop ? $(refPop.$el || refPop) : null;
+    const $ownedPop = $scope
+        .find(pop_class)
+        .filter(function () {
+            if (scopeEl === document) {
+                return !$(this).closest(`[${SCOPE_ATTR}]`).length;
+            }
+            return $(this).closest(`[${SCOPE_ATTR}]`)[0] === scopeEl;
+        })
+        .first();
+    const $pop = cachedPop || ($refPop?.length ? $refPop : $ownedPop);
 
     if (!$pop.length) return;
+    $pop.attr(POP_OWNER_ATTR, scopeId);
     if (isMobile() && vm) {
         vm.__jx3ElementPop = $pop;
         if ($pop.parent()[0] !== document.body) {
@@ -47,6 +71,12 @@ function renderItem(vm, selector = ".w-jx3-element") {
         return $(e.currentTarget || e.target).closest(selector);
     };
 
+    const isCurrentScopeTarget = ($target) => {
+        if (!$target?.length) return false;
+        const closestScope = $target.closest(`[${SCOPE_ATTR}]`)[0];
+        return scopeEl === document ? !closestScope : closestScope === scopeEl;
+    };
+
     const getDataTarget = ($target, e) => {
         const $eventTarget = $(e?.target);
         const $fromEvent = $eventTarget.closest("[data-type]");
@@ -73,16 +103,21 @@ function renderItem(vm, selector = ".w-jx3-element") {
         if (!type) return "";
 
         if (type === "item") {
+            if (!vm.item) return "";
             vm.item.id = $dataTarget.attr("data-id");
             vm.item.client = $dataTarget.attr("data-client") == "origin" ? 2 : 1;
         } else if (type === "author") {
+            if (!vm.author) return "";
             vm.author.id = $dataTarget.attr("data-id");
         } else if (type === "emotion") {
+            if (!vm.emotion) return "";
             vm.emotion.id = $dataTarget.attr("data-id");
         } else if (vm[type]) {
             vm[type].client = $dataTarget.attr("data-client");
             vm[type].id = $dataTarget.attr("data-id");
             vm[type].level = $dataTarget.attr("data-level");
+        } else {
+            return "";
         }
 
         vm.jx3_element.type = type;
@@ -90,12 +125,12 @@ function renderItem(vm, selector = ".w-jx3-element") {
     };
 
     const showPop = ($dataTarget, point = {}, $targetForRect = null) => {
+        const type = syncElementData($dataTarget, $targetForRect);
+        if (!type) return false;
+
         clearTimeout(outer);
         clearTimeout(inner);
 
-        const type = syncElementData($dataTarget, $targetForRect);
-        if (!type) return;
-
         const fallbackRect = $targetForRect && $targetForRect.length ? $targetForRect[0].getBoundingClientRect() : null;
         const fallbackX = fallbackRect ? fallbackRect.left + fallbackRect.width / 2 : 0;
         const fallbackY = fallbackRect ? fallbackRect.top + fallbackRect.height / 2 : 0;
@@ -136,6 +171,8 @@ function renderItem(vm, selector = ".w-jx3-element") {
             vm.jx3_element.style.maxHeight = "";
             vm.jx3_element.style.overflow = "";
         }
+
+        return true;
     };
 
     const hidePop = () => {
@@ -151,13 +188,16 @@ function renderItem(vm, selector = ".w-jx3-element") {
     $scope.on(`mouseenter${ns}`, selector, function (e) {
         if (isMobile()) return;
         const $target = getCurrentTarget(this, e);
+        if (!isCurrentScopeTarget($target)) return;
         const $dataTarget = getDataTarget($target, e);
         showPop($dataTarget, e, $target);
     });
 
     // 移除时
-    $scope.on(`mouseleave${ns}`, selector, function () {
+    $scope.on(`mouseleave${ns}`, selector, function (e) {
         if (isMobile()) return;
+        const $target = getCurrentTarget(this, e);
+        if (!isCurrentScopeTarget($target)) return;
         outer = setTimeout(() => {
             hidePop();
         }, 380);
@@ -167,6 +207,7 @@ function renderItem(vm, selector = ".w-jx3-element") {
         if (!isMobile()) return;
 
         const $target = getCurrentTarget(this, e);
+        if (!isCurrentScopeTarget($target)) return;
         const $dataTarget = getDataTarget($target, e);
         if (!$dataTarget.length) return;
 
@@ -182,9 +223,15 @@ function renderItem(vm, selector = ".w-jx3-element") {
             return;
         }
 
+        const handled = showPop($dataTarget, point, $target);
+        if (!handled) {
+            lastTappedElement = null;
+            hidePop();
+            return;
+        }
+
         e.preventDefault();
         lastTappedElement = tappedElement;
-        showPop($dataTarget, point, $target);
     });
 
     // POP内停留
@@ -206,13 +253,45 @@ function renderItem(vm, selector = ".w-jx3-element") {
         if (!isMobile()) return;
         const $target = $(e.target);
         const $trigger = $target.closest(selector);
-        const isCurrentTrigger = $trigger.length && ($trigger[0] === scopeEl || $scope.has($trigger[0]).length);
+        const isCurrentTrigger = $trigger.length && isCurrentScopeTarget($trigger);
+        const isCurrentPop = $target.closest(pop_class)[0] === $pop[0];
 
-        if (isCurrentTrigger || $target.closest(pop_class).length) return;
+        if (isCurrentTrigger || isCurrentPop) return;
 
         lastTappedElement = null;
         hidePop();
     });
+
+    const cleanup = () => {
+        clearTimeout(outer);
+        clearTimeout(inner);
+        $scope.off(ns);
+        $pop.off(ns);
+        $(document).off(ns);
+        if (vm?.__jx3ElementCleanup === cleanup) {
+            vm.__jx3ElementCleanup = null;
+        }
+    };
+
+    if (vm) {
+        vm.__jx3ElementCleanup = cleanup;
+    }
+
+    const internalInstance = vm?.$;
+    if (internalInstance && !CLEANUP_REGISTERED.has(internalInstance)) {
+        CLEANUP_REGISTERED.add(internalInstance);
+        onBeforeUnmount(() => {
+            if (typeof vm.__jx3ElementCleanup === "function") {
+                vm.__jx3ElementCleanup();
+            }
+            if (vm.__jx3ElementPop?.length && vm.__jx3ElementPop.parent()[0] === document.body) {
+                vm.__jx3ElementPop.remove();
+            }
+            vm.__jx3ElementPop = null;
+        }, internalInstance);
+    }
+
+    return cleanup;
 }
 
 export default renderItem;

package/src/components/Author.vue

@@ -1,6 +1,43 @@
 <template>
+    <div
+        v-if="isPopoverMode"
+        v-bind="$attrs"
+        data-jx3-author-pop-scope
+        @mouseover="onTriggerMouseOver"
+        @mouseout="onTriggerMouseOut"
+        @click="onTriggerClick"
+    >
+        <slot></slot>
+
+        <el-popover
+            ref="popover"
+            :visible="popoverVisible"
+            :virtual-ref="activeTrigger"
+            virtual-triggering
+            teleported
+            placement="bottom-start"
+            width="auto"
+            :offset="10"
+            :show-arrow="false"
+            :popper-style="popoverStyle"
+            popper-class="w-jx3-author-popper"
+        >
+            <div ref="popoverContent" @mouseenter="onPopoverMouseEnter" @mouseleave="onPopoverMouseLeave">
+                <Author
+                    v-if="activeUid"
+                    mode="card"
+                    :key="activeUid"
+                    :uid="activeUid"
+                    :visible="popoverVisible"
+                    :inside-popover="true"
+                    @loaded="updatePopoverPosition"
+                />
+            </div>
+        </el-popover>
+    </div>
+
     <!-- @圈人pop：作者卡片 -->
-    <div class="w-author" v-loading="loading">
+    <div v-else v-bind="$attrs" class="w-author" v-loading="loading">
         <div class="w-author-wrapper el-popover" :class="{ 'is-no-atcard': !bg }" v-if="data" :style="authorCardStyle">
             <div class="u-author">
                 <Avatar
@@ -12,7 +49,14 @@
                 />
                 <div class="u-info">
                     <a class="u-name" :href="authorLink(uid)" target="_blank">
-                        <el-tooltip class="item" effect="dark" content="签约作者" placement="top" v-if="isSuperAuthor">
+                        <el-tooltip
+                            class="item"
+                            effect="dark"
+                            content="签约作者"
+                            placement="top"
+                            :teleported="!insidePopover"
+                            v-if="isSuperAuthor"
+                        >
                             <a class="u-superauthor" href="/dashboard/cooperation" target="_blank">
                                 <img :src="super_author_icon" alt="superauthor" />
                             </a>
@@ -20,7 +64,7 @@
                         <span class="u-displayname" :title="data.display_name">{{ data.display_name || "未知" }}</span>
                     </a>
                     <div class="u-extend">
-                        <el-tooltip class="item" effect="dark" placement="top">
+                        <el-tooltip class="item" effect="dark" placement="top" :teleported="!insidePopover">
                             <template #content>
                                 <span class="u-tips">经验值：{{ data.experience }}</span>
                             </template>
@@ -33,7 +77,14 @@
                                 >Lv.{{ level }}</span
                             >
                         </el-tooltip>
-                        <el-tooltip class="item" effect="dark" :content="vipTypeTitle" placement="top" v-if="isVip">
+                        <el-tooltip
+                            class="item"
+                            effect="dark"
+                            :content="vipTypeTitle"
+                            placement="top"
+                            :teleported="!insidePopover"
+                            v-if="isVip"
+                        >
                             <a class="u-vip" href="/vip/premium?from=sidebar_author" target="_blank">
                                 <i class="i-icon-vip on">{{ vipType }}</i>
                             </a>
@@ -96,6 +147,7 @@ const DEFAULT_ATCARD_POSITION = "right top";
 const DECORATION_JSON = "decoration_json";
 const DECORATION_KEY = "decoration_me";
 const HONOR_KEY = "honor_me";
+const AUTHOR_SCOPE_ATTR = "data-jx3-author-pop-scope";
 const POSITION_MAP = {
     lt: "left top",
     mt: "center top",
@@ -117,18 +169,33 @@ const POSITION_MAP = {
 const { __server, __imgPath, __userLevelColor, __cdn, __Root, __userLevel } = JX3BOX;
 export default {
     name: "Author",
+    inheritAttrs: false,
+    emits: ["loaded"],
     components: {
         Avatar,
     },
     props: {
         uid: {
             type: [String, Number],
-            required: true,
+            default: "",
         },
         visible: {
             type: Boolean,
             default: true,
         },
+        mode: {
+            type: String,
+            default: "card",
+            validator: (value) => ["card", "popover"].includes(value),
+        },
+        selector: {
+            type: String,
+            default: '.w-jx3-element[data-type="author"]',
+        },
+        insidePopover: {
+            type: Boolean,
+            default: false,
+        },
     },
     data: () => ({
         data: null,
@@ -138,8 +205,24 @@ export default {
         bgPosition: DEFAULT_ATCARD_POSITION,
         honor: "",
         honorStyle: {},
+        activeUid: "",
+        activeTrigger: null,
+        popoverVisible: false,
+        hideTriggerTimer: null,
+        hidePopoverTimer: null,
+        lastTappedElement: null,
+        documentClickBound: false,
+        popoverStyle: {
+            padding: "0",
+            border: "none",
+            background: "transparent",
+            boxShadow: "none",
+        },
     }),
     computed: {
+        isPopoverMode: function () {
+            return this.mode === "popover";
+        },
         super_author_icon: function () {
             return __imgPath + "image/user/" + "superauthor.svg";
         },
@@ -194,8 +277,126 @@ export default {
                 }
             },
         },
+        mode() {
+            if (!this.$el) return;
+            this.syncDocumentClickListener();
+            if (!this.isPopoverMode) {
+                this.lastTappedElement = null;
+                this.hidePopover();
+                this.clearPopoverTimers();
+            }
+        },
+    },
+    mounted() {
+        this.syncDocumentClickListener();
+    },
+    beforeUnmount() {
+        this.clearPopoverTimers();
+        document.removeEventListener("click", this.onDocumentClick);
+        this.documentClickBound = false;
     },
     methods: {
+        syncDocumentClickListener() {
+            if (this.isPopoverMode && !this.documentClickBound) {
+                document.addEventListener("click", this.onDocumentClick);
+                this.documentClickBound = true;
+            } else if (!this.isPopoverMode && this.documentClickBound) {
+                document.removeEventListener("click", this.onDocumentClick);
+                this.documentClickBound = false;
+            }
+        },
+        isMobile() {
+            const coarsePointer =
+                typeof window.matchMedia === "function" &&
+                window.matchMedia("(hover: none) and (pointer: coarse)").matches;
+            const hasTouchEvent = "ontouchstart" in window;
+            const mobileUA = /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent || "");
+            return coarsePointer || (hasTouchEvent && mobileUA);
+        },
+        getOwnedTrigger(target) {
+            if (!(target instanceof Element)) return null;
+            const trigger = target.closest(this.selector);
+            if (!trigger || !this.$el.contains(trigger)) return null;
+            return trigger.closest(`[${AUTHOR_SCOPE_ATTR}]`) === this.$el ? trigger : null;
+        },
+        isSameTriggerTransition(trigger, relatedTarget) {
+            return relatedTarget instanceof Node && trigger.contains(relatedTarget);
+        },
+        onTriggerMouseOver(event) {
+            if (!this.isPopoverMode || this.isMobile()) return;
+            const trigger = this.getOwnedTrigger(event.target);
+            if (!trigger) return;
+            event.stopPropagation();
+            if (this.isSameTriggerTransition(trigger, event.relatedTarget)) return;
+            this.showPopover(trigger);
+        },
+        onTriggerMouseOut(event) {
+            if (!this.isPopoverMode || this.isMobile()) return;
+            const trigger = this.getOwnedTrigger(event.target);
+            if (!trigger) return;
+            event.stopPropagation();
+            if (this.isSameTriggerTransition(trigger, event.relatedTarget)) return;
+            clearTimeout(this.hideTriggerTimer);
+            this.hideTriggerTimer = setTimeout(this.hidePopover, 380);
+        },
+        onTriggerClick(event) {
+            if (!this.isPopoverMode || !this.isMobile()) return;
+            const trigger = this.getOwnedTrigger(event.target);
+            if (!trigger) return;
+            event.stopPropagation();
+
+            const href = trigger.closest("a[href]")?.getAttribute("href") || "";
+            if (href && this.lastTappedElement === trigger) {
+                this.lastTappedElement = null;
+                this.hidePopover();
+                return;
+            }
+
+            event.preventDefault();
+            this.lastTappedElement = trigger;
+            this.showPopover(trigger);
+        },
+        onDocumentClick(event) {
+            if (!this.isPopoverMode || !this.isMobile()) return;
+            const inPopover = this.$refs.popoverContent?.contains(event.target);
+            if (this.getOwnedTrigger(event.target) || inPopover) return;
+            this.lastTappedElement = null;
+            this.hidePopover();
+        },
+        onPopoverMouseEnter() {
+            if (this.isMobile()) return;
+            clearTimeout(this.hideTriggerTimer);
+            clearTimeout(this.hidePopoverTimer);
+        },
+        onPopoverMouseLeave() {
+            if (this.isMobile()) return;
+            clearTimeout(this.hidePopoverTimer);
+            this.hidePopoverTimer = setTimeout(this.hidePopover, 280);
+        },
+        showPopover(trigger) {
+            const uid = trigger.getAttribute("data-id");
+            if (!uid) return;
+
+            clearTimeout(this.hideTriggerTimer);
+            clearTimeout(this.hidePopoverTimer);
+            this.activeUid = uid;
+            this.activeTrigger = trigger;
+            this.popoverVisible = true;
+            this.updatePopoverPosition();
+        },
+        updatePopoverPosition() {
+            if (!this.popoverVisible) return;
+            this.$nextTick(() => {
+                this.$refs.popover?.popperRef?.popperInstanceRef?.update?.();
+            });
+        },
+        hidePopover() {
+            this.popoverVisible = false;
+        },
+        clearPopoverTimers() {
+            clearTimeout(this.hideTriggerTimer);
+            clearTimeout(this.hidePopoverTimer);
+        },
         loadData: function () {
             const promises = [getUserInfo(this.uid), getUserMedals(this.uid)];
             this.loading = true;
@@ -203,6 +404,7 @@ export default {
                 this.data = res[0];
                 this.medals = res[1];
                 this.loading = false;
+                this.$nextTick(() => this.$emit("loaded"));
             });
         },
         loadUserInfo: function () {
@@ -446,11 +648,13 @@ export default {
             return {
                 key: role?.id || role?.key || role?.val || name + index,
                 name,
-                server: role?.server || role?.role_server || role?.jx3_server || info?.server || info?.role_server || "",
+                server:
+                    role?.server || role?.role_server || role?.jx3_server || info?.server || info?.role_server || "",
                 url: this.normalizeLink(role?.url || role?.link || role?.href || info?.url || info?.link || ""),
                 icon: this.normalizeRoleIcon(role, info),
                 color: role?.color || info?.color || "",
-                backgroundColor: role?.background_color || role?.bg_color || info?.background_color || info?.bg_color || "",
+                backgroundColor:
+                    role?.background_color || role?.bg_color || info?.background_color || info?.bg_color || "",
                 borderColor: role?.border_color || info?.border_color || "",
             };
         },
@@ -461,7 +665,8 @@ export default {
             return __cdn + url.replace(/^\/+/, "");
         },
         normalizeRoleIcon: function (role, info) {
-            const mount = role?.mount || role?.school || role?.school_id || info?.mount || info?.school || info?.school_id || "";
+            const mount =
+                role?.mount || role?.school || role?.school_id || info?.mount || info?.school || info?.school_id || "";
             if (mount) return showSchoolIcon(mount);
 
             return this.normalizeRoleAsset(role?.icon || role?.logo || role?.image || info?.icon || info?.logo || "");
@@ -486,6 +691,13 @@ export default {
 
 <style lang="less">
 @import "../assets/css/module/author.less";
+.w-jx3-author-popper.el-popover {
+    min-width: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    box-shadow: none;
+}
 .w-author {
     .w-author-wrapper {
         width: 300px;