@jx3box/jx3box-ui 2.1.8 → 2.1.10

package/i18n/messages/en-US.js

@@ -152,6 +152,7 @@ export default {
     },
     common: {
         copySuccess: "Copied",
+        copySuccessToast: "Copied",
         copyFailed: "Copy failed",
         cannotCopyClipboard: "Cannot access clipboard",
         browserCopyFailed: "Browser copy failed",

package/i18n/messages/vi.js

@@ -152,6 +152,7 @@ export default {
     },
     common: {
         copySuccess: "Đã sao chép",
+        copySuccessToast: "Đã sao chép",
         copyFailed: "Sao chép thất bại",
         cannotCopyClipboard: "Không thể truy cập clipboard",
         browserCopyFailed: "Trình duyệt không sao chép được",

package/i18n/messages/zh-CN.js

@@ -152,6 +152,7 @@ export default {
     },
     common: {
         copySuccess: "复制成功",
+        copySuccessToast: "复制成功",
         copyFailed: "复制失败",
         cannotCopyClipboard: "无法复制到剪贴板",
         browserCopyFailed: "浏览器复制失败",

package/i18n/messages/zh-TW.js

@@ -152,6 +152,7 @@ export default {
     },
     common: {
         copySuccess: "複製成功",
+        copySuccessToast: "複製成功",
         copyFailed: "複製失敗",
         cannotCopyClipboard: "無法複製到剪貼簿",
         browserCopyFailed: "瀏覽器複製失敗",

package/index.js

@@ -32,6 +32,7 @@ import Thx from "./src/single/Thx.vue";
 import UserPop from "./src/author/UserPop.vue";
 import SuspendCommon from "./src/SuspendCommon.vue";
 import AdminDrop from "./src/bread/AdminDrop.vue";
+import Copy from "./src/interact/Copy.vue";
 
 import {
     Jx3boxUiI18n,
@@ -72,6 +73,7 @@ const components = {
     UserPop,
     SuspendCommon,
     AdminDrop,
+    Copy,
 };
 
 const install = function (app) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.1.8",
+    "version": "2.1.10",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {
@@ -32,12 +32,12 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
-        "@jx3box/jx3box-common": "^9.2.0",
+        "@jx3box/jx3box-common": "^9.2.1",
         "@jx3box/jx3box-data": "^3.9.4",
-        "@jx3box/jx3box-editor": "^3.1.1",
+        "@jx3box/jx3box-editor": "^3.1.3",
         "@jx3box/jx3box-emotion": "^1.3.0",
         "@jx3box/jx3box-macro": "^1.0.3",
-        "@jx3box/jx3box-talent": "^1.3.12",
+        "@jx3box/jx3box-talent": "^1.3.13",
         "@tinymce/tinymce-vue": "^5.1.1",
         "@vueuse/core": "^9.13.0",
         "@vueuse/head": "^0.7.6",

package/src/App.vue

@@ -34,6 +34,10 @@
                     <div class="m-block">
                         <Mark label="渊穷砂" BGL="#24292e" BGR="#ffadcb" value="按键启动"></Mark>
                     </div>
+                    <h1 class="m-title">复制组件</h1>
+                    <div class="m-block">
+                        <Copy value="xfbsyxj">xfbsyxj</Copy>
+                    </div>
 
                     <h1 class="m-title">切换侧边栏</h1>
                     <div class="m-block">
@@ -194,7 +198,8 @@ import PostVersion from "./single/PostVersion.vue";
 import PostCollection from "./single/PostCollection.vue";
 import QRcode from "./interact/QRcode.vue";
 import UploadBanner from "./upload/UploadBanner.vue";
-import Mark from "./interact/Mark.vue"
+import Mark from "./interact/Mark.vue";
+import Copy from "./interact/Copy.vue";
 
 import GamePrice from "./wiki/GamePrice.vue";
 import WikiComments from "./wiki/WikiComments.vue";
@@ -204,6 +209,7 @@ export default {
     name: "App",
     components: {
         Mark,
+        Copy,
         Author,
         // PostHeader,
         PostTopic,

package/src/filters/orderBy.vue

@@ -123,6 +123,7 @@ export default {
         user-select: none;
         padding: 5px 0;
         padding-right: 20px;
+        .w(150px);
 
         &.on {
             .u-options {

package/src/interact/Copy.vue

@@ -0,0 +1,243 @@
+<template>
+    <!-- 增加交互反馈样式和键盘聚焦样式 -->
+    <div
+        ref="trigger"
+        class="w-copy-container"
+        role="button"
+        :aria-label="defaultSuccessText"
+        tabindex="0"
+        @click="handleCopy"
+        @keydown.enter.prevent="handleCopy"
+        @keydown.space.prevent="handleCopy"
+    >
+        <slot></slot>
+    </div>
+
+    <!-- 传送门到 Body 确保不受父级 overflow 限制 -->
+    <teleport to="body">
+        <transition name="copy-toast-fade">
+            <div v-if="toastVisible" class="w-copy-toast" :style="{ left: `${toastX}px`, top: `${toastY}px` }">
+                <div class="w-copy-toast__content">
+                    <template v-if="showDefaultTip">
+                        <svg class="w-copy-toast__svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill="currentColor"
+                                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                            ></path>
+                        </svg>
+                        <span class="w-copy-toast__text">{{ defaultSuccessText }}</span>
+                    </template>
+                    <template v-else>
+                        <span class="w-copy-toast__text">{{ tipText }}</span>
+                    </template>
+                </div>
+            </div>
+        </transition>
+    </teleport>
+</template>
+
+<script>
+import throttleFn from "lodash/throttle";
+import i18nMixin from "../../i18n/mixin";
+
+export default {
+    name: "CopyComp",
+    mixins: [i18nMixin],
+    props: {
+        // 支持字符串、数字，或返回这些类型的函数（用于实时获取最新数据）
+        value: {
+            type: [String, Number, Function],
+            default: "",
+        },
+        tip: {
+            type: String,
+            default: "",
+        },
+        throttle: {
+            type: Number,
+            default: 1500, // 默认防抖时间
+        },
+    },
+    emits: ["success", "error"],
+    data() {
+        return {
+            toastVisible: false,
+            toastX: 0,
+            toastY: 0,
+            hideTimer: null,
+            throttledCopy: null,
+        };
+    },
+    computed: {
+        tipText() {
+            return this.tip;
+        },
+        showDefaultTip() {
+            return !this.tipText;
+        },
+        defaultSuccessText() {
+            return this.$jx3boxT ? this.$jx3boxT("jx3boxUi.common.copySuccessToast", "复制成功") : "复制成功";
+        },
+    },
+    created() {
+        this.throttledCopy = throttleFn(
+            (payload) => {
+                this.executeCopy(payload);
+            },
+            this.throttle,
+            { leading: true, trailing: false }
+        );
+    },
+    methods: {
+        handleCopy(event) {
+            const payload = {
+                target: event.currentTarget,
+            };
+            this.throttledCopy(payload);
+        },
+        async executeCopy(payload) {
+            try {
+                // 获取待复制内容（支持函数调用）
+                const rawValue = typeof this.value === "function" ? this.value() : this.value;
+                const content = `${rawValue ?? ""}`;
+
+                if (!content) return;
+
+                const isSuccess = await this.copyToClipboard(content);
+
+                if (isSuccess) {
+                    this.calculatePosition(payload);
+                    this.showToast();
+                    this.$emit("success", content);
+                } else {
+                    this.$emit("error", "ExecCommand failed");
+                }
+            } catch (err) {
+                this.$emit("error", err);
+            }
+        },
+        // 核心复制逻辑：优先 Clipboard API，降级使用 textarea
+        async copyToClipboard(text) {
+            if (navigator?.clipboard?.writeText) {
+                try {
+                    await navigator.clipboard.writeText(text);
+                    return true;
+                } catch (e) {
+                    console.warn("Clipboard API failed, falling back...");
+                }
+            }
+
+            const textArea = document.createElement("textarea");
+            textArea.value = text;
+            textArea.style.position = "fixed";
+            textArea.style.left = "-9999px";
+            textArea.style.top = "-9999px";
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+
+            try {
+                const successful = document.execCommand("copy");
+                document.body.removeChild(textArea);
+                return successful;
+            } catch (err) {
+                document.body.removeChild(textArea);
+                return false;
+            }
+        },
+        calculatePosition(payload) {
+            const { target } = payload;
+            if (!target) return;
+
+            // 固定在触发文字上方约 30px，不再跟随鼠标坐标
+            const rect = target.getBoundingClientRect();
+            this.toastX = rect.left + rect.width / 2;
+            this.toastY = rect.top - 30;
+        },
+        showToast() {
+            clearTimeout(this.hideTimer);
+            this.toastVisible = true;
+            this.hideTimer = setTimeout(() => {
+                this.toastVisible = false;
+            }, 1800);
+        },
+    },
+    beforeUnmount() {
+        clearTimeout(this.hideTimer);
+        this.throttledCopy?.cancel?.();
+    },
+};
+</script>
+
+<style lang="less">
+.w-copy-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    transition: transform 0.1s ease-out, opacity 0.2s ease;
+    border-radius: 4px;
+    vertical-align: middle;
+    will-change: transform; // 优化渲染，防止抖动
+
+    // 点击时的缩放反馈：缩小比例幅度，防止视觉抖动过大
+    &:active {
+        transform: scale(0.97);
+        opacity: 0.85;
+    }
+
+    // 键盘聚焦样式
+    &:focus-visible {
+        outline: 2px solid #22c55e;
+        outline-offset: 2px;
+    }
+}
+
+.w-copy-toast {
+    position: fixed;
+    z-index: 9999;
+    transform: translate(-50%, -100%);
+    pointer-events: none;
+    will-change: transform, opacity;
+}
+
+.w-copy-toast__content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 14px;
+    background: rgba(31, 45, 61, 0.9); // 深色背景，对比度更高
+    backdrop-filter: blur(8px); // 磨砂玻璃效果
+    border-radius: 8px;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+    color: #ffffff;
+    font-size: 13px;
+    white-space: nowrap;
+}
+
+.w-copy-toast__svg {
+    width: 14px;
+    height: 14px;
+    color: #22c55e; // 成功绿色
+}
+
+/* 优化后的过渡动画：带有一点向上漂浮的感觉 */
+.copy-toast-fade-enter-active {
+    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.copy-toast-fade-leave-active {
+    transition: all 0.4s cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+
+.copy-toast-fade-enter-from {
+    opacity: 0;
+    transform: translate(-50%, -60%) scale(0.9);
+}
+
+.copy-toast-fade-leave-to {
+    opacity: 0;
+    transform: translate(-50%, -140%) scale(0.95);
+}
+</style>