@jx3box/jx3box-ui 0.0.1

package/src/header/utils.js

@@ -0,0 +1,126 @@
+import { ElNotification } from "element-plus";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import searchMap from "./search_map.json";
+import { tGlobal } from "../../i18n";
+
+const { __Root } = JX3BOX;
+
+// 复制
+export function copyText(text) {
+    if (window.navigator.clipboard) {
+        window.navigator.clipboard.writeText(text).then(
+            function () {
+                ElNotification.success({
+                    title: tGlobal("jx3boxUi.common.copySuccess", null, "复制成功"),
+                });
+                console.log("Async: Copying to clipboard was successful!");
+            },
+            function (err) {
+                console.error("Async: Could not copy text: ", err);
+                ElNotification.error({
+                    title: tGlobal("jx3boxUi.common.copyFailed", null, "复制失败"),
+                    message: tGlobal("jx3boxUi.common.cannotCopyClipboard", null, "无法复制到剪贴板"),
+                });
+            }
+        );
+    } else {
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+
+        try {
+            const successful = document.execCommand("copy");
+            const msg = successful ? "successful" : "unsuccessful";
+            console.log("Fallback: Copying text command was " + msg);
+
+            if (successful) {
+                ElNotification.success({
+                    title: tGlobal("jx3boxUi.common.copySuccess", null, "复制成功"),
+                });
+            } else {
+                ElNotification.error({
+                    title: tGlobal("jx3boxUi.common.copyFailed", null, "复制失败"),
+                    message: tGlobal("jx3boxUi.common.browserCopyFailed", null, "浏览器复制失败"),
+                });
+            }
+        } catch (err) {
+            console.error("Fallback: Oops, unable to copy", err);
+            ElNotification.error({
+                title: tGlobal("jx3boxUi.common.copyFailed", null, "复制失败"),
+                message: tGlobal("jx3boxUi.common.browserNotSupportCopy", null, "浏览器不支持复制"),
+            });
+        }
+
+        document.body.removeChild(textArea);
+    }
+}
+
+// 去除最后的 /
+export function trimSlash(str) {
+    return str.replace(/\/$/, "");
+}
+
+// 监听 localStorage 的改变
+export function dispatchEventStorage() {
+    const _setItem = localStorage.setItem;
+
+    localStorage.setItem = function (key, val) {
+        const setEvent = new Event("setItemEvent");
+        setEvent.key = key;
+        setEvent.newVal = val;
+
+        window.dispatchEvent(setEvent);
+        _setItem.apply(this, arguments);
+    };
+}
+
+// search 跳转公共函数
+export function searchJump({ searchValue, isPhone = false, client = "std", url }) {
+    searchValue = searchValue.trim().toLowerCase();
+
+    // 检查输入是否为纯数字
+    if (/^\d+$/.test(searchValue)) {
+        const target = isPhone ? "_self" : "_blank";
+        const targetUrl = __Root + `post/${searchValue}`;
+
+        if (target === "_blank") {
+            window.open(targetUrl, "_blank");
+        } else {
+            window.location.href = targetUrl;
+        }
+    } else if (searchMap[searchValue]) {
+        // 如果是 searchMap 中的关键词，跳转到对应的 URL
+        const target = isPhone ? "_self" : "_blank";
+        const targetUrl = searchMap[searchValue];
+
+        if (target === "_blank") {
+            window.open(targetUrl, "_blank");
+        } else {
+            window.location.href = targetUrl;
+        }
+    } else {
+        // 如果不是纯数字，使用原有搜索功能
+        const form = document.createElement("form");
+        form.method = "GET";
+        form.action = url;
+        form.target = isPhone ? "_self" : "_blank";
+
+        const searchInput = document.createElement("input");
+        searchInput.type = "hidden";
+        searchInput.name = "q";
+        searchInput.value = searchValue;
+
+        const clientInput = document.createElement("input");
+        clientInput.type = "hidden";
+        clientInput.name = "client";
+        clientInput.value = client;
+
+        form.appendChild(searchInput);
+        form.appendChild(clientInput);
+        document.body.appendChild(form);
+        form.submit();
+        document.body.removeChild(form);
+    }
+}

package/src/header/vip.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="c-header-panel c-header-vip" id="c-header-vip">
+        <el-tooltip
+            effect="dark"
+            :content="$jx3boxT('jx3boxUi.header.vipCenter', '会员中心')"
+            placement="bottom"
+            popper-class="c-header-tooltip"
+        >
+            <a class="u-post u-vip" href="/vip/premium">
+                <i class="u-icon u-icon-msg">
+                    <i class="u-pop" style="display: none" v-show="pop"></i>
+                    <!-- <vipIcon class="u-add" /> -->
+                    <img
+                        class="u-add"
+                        svg-inline
+                        src="../../assets/img/common/vip.svg"
+                        :alt="$jx3boxT('jx3boxUi.header.vipCenter', '会员中心')"
+                    />
+                </i>
+            </a>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import { getConfig, getUserMeta, setUserMeta } from "../../service/cms";
+import User from "@jx3box/jx3box-common/js/user";
+import i18nMixin from "../../i18n/mixin";
+// import vipIcon from "@/assets/img/components/common/header/vip.svg";
+export default {
+    name: "vip",
+    mixins: [i18nMixin],
+    components: {
+        // vipIcon,
+    },
+    data: function () {
+        return {
+            pop: false,
+        };
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        async init() {
+            /**
+             * 1. 用户第一次进入页面时，没有记录，则显示，并记录到meta
+             * 2. 用户第二次进入页面，此时meta有记录，但是用户并未进入会员中心，则显示
+             */
+            let meta = null;
+            if (User.isLogin()) {
+                meta = await getUserMeta({ key: "vip_pop" });
+            }
+            let config = await getConfig({ key: "vip" });
+
+            if (meta == null) {
+                const val = ~~config.val;
+
+                if (val) {
+                    this.pop = true;
+                    localStorage.setItem("vip_pop", config.val);
+                    setUserMeta("vip_pop", { val: 1 });
+                }
+            } else {
+                if (meta == 1) {
+                    this.pop = true;
+
+                    localStorage.setItem("vip_pop", config.val);
+                } else {
+                    const local = localStorage.getItem("vip_pop");
+
+                    if (~~config.val > ~~local) {
+                        this.pop = true;
+
+                        localStorage.setItem("vip_pop", config.val);
+
+                        // setUserMeta("vip_pop", { val: 1 });
+                    }
+                }
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-header-vip {
+    height: 100%;
+
+    .u-icon-msg {
+        .pr;
+        .size(18px);
+    }
+
+    .u-pop {
+        width: 10px;
+        height: 10px;
+        color: #fff;
+        background-image: linear-gradient(#fcd14f, #d7a20b);
+        background-clip: padding-box;
+        border: 2px solid #24292e;
+        border-radius: 50%;
+        position: absolute;
+        right: -5px;
+        top: -6px;
+        z-index: 1;
+    }
+    .u-vip {
+        padding: 0 10px;
+        height: 100%;
+        .flex;
+        align-items: center;
+
+        &:hover {
+            opacity: 0.7;
+        }
+        cursor: pointer;
+    }
+}
+</style>

package/src/interact/BoxcoinAdmin.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="w-boxcoin-admin" v-if="allowBoxcoin">
+        <el-tooltip effect="dark" content="品鉴" placement="top-start">
+            <div class="w-boxcoin-block">
+                <img @click="openBoxcoinPop" class="u-icon" svg-inline :src="iconPath" />
+            </div>
+        </el-tooltip>
+        <el-dialog
+            title="品鉴评分"
+            v-model="visible"
+            class="w-boxcoin-pop"
+            :close-on-click-modal="false"
+            append-to-body
+        >
+            <div class="w-boxcoin-admin-content">
+                <div class="u-left">
+                    <em class="u-label">本月状态</em>
+                    已用<b>{{ this.used }}</b> 剩余<b>{{ this.left }}</b> 总计<b>{{ this.total }}</b>
+                    <el-progress
+                        :percentage="100 - (this.used * 100) / this.total"
+                        :stroke-width="15"
+                        :text-inside="true"
+                    ></el-progress>
+                </div>
+                <div class="u-list">
+                    <em class="u-label">❤️ 品鉴</em>
+                    <Contributors v-if="authors && authors.length" :authors="authors" @chosen="handleChosen" />
+                    <div class="u-points">
+                        <el-radio-group v-model="count">
+                            <el-radio :label="item" v-for="item in fitPoints" :key="item" border>
+                                <b>{{ item }}</b
+                                >盒币
+                            </el-radio>
+                            <el-radio label="custom" border>自定义</el-radio>
+                            <el-input
+                                v-model="amount"
+                                v-show="count === 'custom'"
+                                placeholder="输入自定义数量"
+                            ></el-input>
+                        </el-radio-group>
+                    </div>
+                </div>
+                <div class="u-msg">
+                    <em class="u-label">📝 寄语</em>
+                    <div class="u-input">
+                        <el-input
+                            v-model="remark"
+                            placeholder="请输入寄语（必填）"
+                            :minlength="2"
+                            :maxlength="30"
+                            show-word-limit
+                        ></el-input>
+                        <el-button :disabled="fetchingCurrentRelease" @click="insertCurrentRelease"
+                            >插入当前版本</el-button
+                        >
+                    </div>
+                </div>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="visible = false">取 消</el-button>
+                    <el-button type="primary" @click="submit" :disabled="!ready || submitting">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { grantBoxcoin } from "../../service/thx.js";
+import { getBreadcrumb } from "../../service/breadcrumb.js";
+import User from "@jx3box/jx3box-common/js/user";
+import Contributors from "./Contributors.vue";
+import JX3BOX  from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "BoxcoinAdmin",
+    props: ["postType", "postId", "userId", "own", "total", "points", "max", "min", "authors", "client"],
+    components: {
+        Contributors,
+    },
+    data: function () {
+        return {
+            visible: false,
+            count: 0,
+
+            remark: "辛苦，感谢！",
+            left: this.own,
+            chosen: "", // 被选中的人
+            amount: "",
+
+            submitting: false,
+            fetchingCurrentRelease: false,
+        };
+    },
+    computed: {
+        used: function () {
+            return this.total - this.left;
+        },
+        ready: function () {
+            const count = this.count === "custom" ? this.amount : this.count;
+            return this.isNotSelf && !this.targetIsSelf && this.isEnough && count && this.remark;
+        },
+        isNotSelf: function () {
+            return this.userId != User.getInfo().uid;
+        },
+        targetIsSelf: function () {
+            return this.chosen == User.getInfo().uid;
+        },
+        isEnough: function () {
+            const count = this.count === "custom" ? this.amount : this.count;
+            return this.left && this.left >= count;
+        },
+        allowBoxcoin: function () {
+            return this.postType && this.postId && (this.userId || (this.authors && this.authors.length));
+        },
+        hostClient: function () {
+            return location.href.includes("origin") ? "origin" : "std";
+        },
+        fitPoints: function () {
+            return this.points.filter((item) => item <= this.left);
+        },
+        iconPath() {
+            return JX3BOX.__cdn + "design/vector/icon/taste.svg"
+        },
+    },
+    watch: {
+        own: function (val) {
+            this.left = val;
+        },
+    },
+    methods: {
+        openBoxcoinPop: function () {
+            this.visible = true;
+        },
+        // 选择要打赏的对象
+        handleChosen(userId) {
+            this.chosen = userId;
+        },
+        submit: function () {
+            this.submitting = true;
+            const count = this.count === "custom" ? this.amount : this.count;
+            grantBoxcoin(this.postType, this.postId, this.chosen || this.userId, count, {
+                remark: this.remark,
+                client: this.client || this.hostClient,
+            })
+                .then((res) => {
+                    this.$message({
+                        message: "操作成功",
+                        type: "success",
+                    });
+                    return res.data.data;
+                })
+                .then((data) => {
+                    // 1.扣除额度
+                    this.left -= this.count;
+                    // 2.将修改emit出去
+                    this.$emit("updateRecord", data);
+                })
+                .finally(() => {
+                    this.submitting = false;
+                    this.visible = false;
+                });
+        },
+        insertCurrentRelease: function () {
+            this.fetchingCurrentRelease = true;
+            getBreadcrumb(`current-release-${this.hostClient}`)
+                .then((res) => {
+                    this.remark += res.data.data.html;
+                })
+                .catch(() => {
+                    this.$message({
+                        message: "获取失败",
+                        type: "error",
+                    });
+                })
+                .finally(() => {
+                    this.fetchingCurrentRelease = false;
+                });
+        },
+        init: function () {},
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>

package/src/interact/BoxcoinRecords.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="w-boxcoin-records" v-loading="loading">
+        <div class="w-boxcoin-records-list" v-if="list && list.length">
+            <ul class="u-list">
+                <li class="u-item u-head">
+                    <span class="u-meta u-action">
+                        <el-icon><Trophy /></el-icon>
+                    </span>
+                    <span class="u-meta u-user">参与打赏</span>
+                    <span class="u-meta u-user">收益作者</span>
+                    <span class="u-meta u-count">盒币</span>
+                    <span class="u-meta u-remark">寄语</span>
+                    <time class="u-meta u-time"></time>
+                </li>
+                <li v-for="(item, i) in list" :key="i" class="u-item u-body">
+                    <span class="u-meta u-action">
+                        <template v-if="item.is_user_gift">
+                            <i title="打赏"><img class svg-inline src="../../assets/img/widget/gift.svg" /></i>
+                        </template>
+                        <template v-else>
+                            <i title="品鉴"><img class svg-inline src="../../assets/img/widget/admin_gift.svg" /></i>
+                        </template>
+                    </span>
+                    <template v-if="item.ext_operate_user_info?.id == 1">
+                        <span class="u-meta u-user u-default">
+                            <img class="u-user-avatar" :src="showAvatar(item.ext_operate_user_info.avatar)" alt />
+                            <span>系统</span>
+                        </span>
+                    </template>
+                    <a v-else class="u-meta u-user" :href="authorLink(item.operate_user_id)" target="_blank">
+                        <img class="u-user-avatar" :src="showAvatar(item.ext_operate_user_info.avatar)" alt />
+                        <span>{{ item.ext_operate_user_info.display_name }}</span>
+                    </a>
+                    <a class="u-meta u-user" :href="authorLink(item.user_id)" target="_blank">
+                        <img class="u-user-avatar" :src="showAvatar(item.ext_user_info.avatar)" alt />
+                        <span>{{ item.ext_user_info.display_name }}</span>
+                    </a>
+                    <span class="u-meta u-count">
+                        +
+                        <b>{{ item.count + item.ext_take_off_count + ~~item.ext2_take_off_count }}</b>
+                    </span>
+                    <span class="u-meta u-remark">{{ item.remark }}</span>
+                    <time class="u-meta u-time">{{ showTime(item.created_at) }}</time>
+                    <span class="u-client" v-if="isSuperAdmin">{{ item.client }}</span>
+                    <span class="u-delete" v-if="isSuperAdmin" @click="recovery(item, i)">
+                        <i class="Delete"></i>撤销
+                    </span>
+                </li>
+            </ul>
+        </div>
+        <el-pagination
+            class="w-boxcoin-records-pages"
+            size="small"
+            layout="prev, pager, next"
+            :hide-on-single-page="true"
+            :page-size="per"
+            :total="total"
+            v-model="page"
+        ></el-pagination>
+    </div>
+</template>
+
+<script>
+import { getPostBoxcoinRecords, recoveryBoxcoin } from "../../service/thx";
+import User from "@jx3box/jx3box-common/js/user";
+import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
+import { showTime } from "@jx3box/jx3box-common/js/moment";
+export default {
+    name: "BoxcoinRecords",
+    props: ["postType", "postId", "cacheRecord", "postClient", "mode"],
+    components: {},
+    data: function () {
+        return {
+            list: [],
+            per: 12,
+            page: 1,
+            total: 1,
+            loading: false,
+            boxcoin: 0,
+            isSuperAdmin: User.isSuperAdmin(),
+        };
+    },
+    emits: ["update:boxcoin"],
+    computed: {
+        post_keys: function () {
+            return [this.postType, this.postId];
+        },
+        params: function () {
+            return {
+                pageSize: this.per,
+                pageIndex: this.page,
+                //client : this.postClient,
+            };
+        },
+    },
+    watch: {
+        post_keys: {
+            immediate: true,
+            deep: true,
+            handler: function () {
+                this.postType && this.postId && this.loadData();
+            },
+        },
+        params: {
+            deep: true,
+            handler: function () {
+                this.loadData();
+            },
+        },
+        cacheRecord: {
+            deep: true,
+            handler: function (data) {
+                if (data) {
+                    this.list.push(data);
+                    // 清空父组件的cache
+                    this.$parent.cacheRecord = null;
+                }
+            },
+        },
+    },
+    methods: {
+        loadData: function () {
+            getPostBoxcoinRecords(this.postType, this.postId, this.params).then((res) => {
+                this.list = res.data.data?.list || [];
+                this.total = res.data.data.page.total;
+                this.boxcoin = res.data.data.fromManager + res.data.data.fromUser;
+                this.$emit("update:boxcoin", this.boxcoin);
+            });
+        },
+        recovery: function (item, i) {
+            this.$alert("是否确定撤销该评分？", "确认", {
+                confirmButtonText: "确定",
+                callback: (action) => {
+                    if (action == "confirm") {
+                        recoveryBoxcoin(item.id).then(() => {
+                            this.$message({
+                                message: "撤销成功",
+                                type: "success",
+                            });
+                            this.list.splice(i, 1);
+                        });
+                    }
+                },
+            });
+        },
+        authorLink,
+        showTime,
+        showAvatar: function (val) {
+            return showAvatar(val, 72);
+        },
+    },
+};
+</script>