@jx3box/jx3box-ui 0.0.1

package/src/footer/resource.vue

@@ -0,0 +1,146 @@
+<template>
+    <section class="lg:col-span-4 lg:col-start-9">
+        <h3 class="text-sm font-semibold tracking-wide text-white">
+            {{ $jx3boxT("jx3boxUi.footer.downloadCenter", "下载中心") }}
+        </h3>
+        <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div v-for="item in downloadLinks" :key="item.name">
+                <el-popover v-if="item.qrcode" trigger="hover" placement="top" popper-class="c-footer--v4__popover">
+                    <div class="flex flex-col items-center p-3">
+                        <img
+                            class="h-32 w-32 rounded-md object-cover"
+                            :src="item.qrcode"
+                            :alt="getDownloadName(item)"
+                        />
+                        <span class="mt-2 text-xs font-black">{{ getDownloadLabel(item) }}</span>
+                    </div>
+                    <template #reference>
+                        <a
+                            class="flex h-12 items-center rounded-xl border border-gray-700 bg-gray-800 px-4 text-xs text-gray-300 transition hover:border-blue-500 hover:bg-gray-700"
+                            :href="item.href || 'javascript:;'"
+                            :target="item.href ? '_blank' : null"
+                            :rel="item.href ? 'noopener noreferrer' : null"
+                        >
+                            <span class="mr-2.5 flex h-4 w-4 items-center justify-center">
+                                <img class="h-4 w-4" :src="item.icon" :alt="getDownloadName(item)" />
+                            </span>
+                            <span>{{ getDownloadName(item) }}</span>
+                        </a>
+                    </template>
+                </el-popover>
+                <a
+                    v-else
+                    class="flex h-12 items-center rounded-xl border border-gray-700 bg-gray-800 px-4 text-xs text-gray-300 transition hover:border-blue-500 hover:bg-gray-700"
+                    :href="item.href || 'javascript:;'"
+                    :target="item.href ? '_blank' : null"
+                    :rel="item.href ? 'noopener noreferrer' : null"
+                >
+                    <span class="mr-2.5 flex h-4 w-4 items-center justify-center">
+                        <img class="h-4 w-4" :src="item.icon" :alt="getDownloadName(item)" />
+                    </span>
+                    <span>{{ getDownloadName(item) }}</span>
+                </a>
+            </div>
+        </div>
+
+        <div
+            class="mt-4 flex items-center justify-between rounded-xl border p-4"
+            style="
+                border-color: rgba(59, 130, 246, 0.2);
+                background-image: linear-gradient(90deg, rgba(30, 64, 175, 0.2), rgba(31, 41, 55, 0.4));
+            "
+        >
+            <div class="flex items-center space-x-3">
+                <div
+                    class="flex h-10 w-10 items-center justify-center rounded-lg text-blue-400"
+                    style="background-color: rgba(59, 130, 246, 0.2)"
+                >
+                    <img
+                        class="h-6 w-6"
+                        svg-inline
+                        src="../../assets/img/common/qqbot.svg"
+                        :alt="$jx3boxT('jx3boxUi.footer.qqBot', 'QQ机器人')"
+                    />
+                </div>
+                <div>
+                    <p class="font-bold uppercase tracking-wider text-gray-500" style="font-size: 10px">
+                        {{ $jx3boxT("jx3boxUi.footer.qqBotService", "QQ 机器人服务") }}
+                    </p>
+                    <p class="mt-1 font-mono text-sm font-semibold text-white">3889 010 020</p>
+                </div>
+            </div>
+            <a
+                class="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition hover:bg-blue-500"
+                href="tencent://AddContact/?uin=3889010020&Site=www.jx3box.com&Menu=yes"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                {{ $jx3boxT("jx3boxUi.footer.add", "添加") }}
+            </a>
+        </div>
+    </section>
+</template>
+
+<script>
+import i18nMixin from "../../i18n/mixin";
+export default {
+    name: "FooterResource",
+    mixins: [i18nMixin],
+    props: [],
+    components: {},
+    data: function () {
+        return {
+            downloadLinks: [
+                {
+                    key: "appStore",
+                    name: "App Store",
+                    href: "",
+                    icon: require("../../assets/img/common/ios.svg"),
+                    // qrcode: require("../../assets/img/common/ios.jpg"),
+                },
+                {
+                    key: "android",
+                    name: "Android",
+                    href: "",
+                    icon: require("../../assets/img/common/android.svg"),
+                    // qrcode: require("../../assets/img/common/android.jpg"),
+                },
+                {
+                    key: "harmonyNext",
+                    name: "鸿蒙 NEXT",
+                    href: "",
+                    icon: require("../../assets/img/common/harmony.svg"),
+                    // qrcode: require("../../assets/img/common/harmony.jpg"),
+                },
+                {
+                    key: "miniProgram",
+                    name: "小程序",
+                    labelKey: "jx3boxHelper",
+                    label: "JX3BOX小助手",
+                    href: "",
+                    icon: require("../../assets/img/common/miniprogram.svg"),
+                    qrcode: require("../../assets/img/common/miniprogram.jpg"),
+                },
+            ],
+        };
+    },
+    computed: {},
+    watch: {},
+    methods: {
+        getDownloadName(item) {
+            if (item?.key) {
+                const k = item.key === "harmonyNext" ? "harmonyNext" : item.key;
+                const maybe = `jx3boxUi.footer.${k}`;
+                return this.$jx3boxT(maybe, item.name || k);
+            }
+            return item?.name || "";
+        },
+        getDownloadLabel(item) {
+            if (item?.labelKey) return this.$jx3boxT(`jx3boxUi.footer.${item.labelKey}`, item.label || item.labelKey);
+            return item?.label || "";
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>

package/src/header/alternate.vue

@@ -0,0 +1,299 @@
+<template>
+    <el-dialog
+        append-to-body
+        v-model="visible"
+        custom-class="c-alternate"
+        width="320px"
+        :title="$jx3boxT('jx3boxUi.alternate.title', '切换马甲')"
+    >
+        <div class="c-alternate__content">
+            <div
+                class="c-alternate-item"
+                :class="{ 'is-active': profile.uid == item.uid, 'is-expired': isExpired(item.created_at) }"
+                v-for="item in alternate"
+                :key="item.uid"
+                @click="onSelectAlternate(item)"
+            >
+                <div class="m-avatar">
+                    <el-icon class="u-active" v-if="profile.uid == item.uid"><SuccessFilled /></el-icon>
+                    <img class="u-avatar" :src="showAvatar(item.avatar)" alt="" />
+                </div>
+                <div class="m-misc">
+                    <span class="u-name"
+                        ><span class="u-label">{{ $jx3boxT("jx3boxUi.alternate.userNickname", "用户昵称：") }}</span
+                        >{{ item.name }}</span
+                    >
+                    <span class="u-time">
+                        <span class="u-label">{{ $jx3boxT("jx3boxUi.alternate.lastLogin", "上次登录：") }}</span
+                        >{{ getFormatTime(item.created_at) }}
+                        <span class="u-extra" v-if="isExpired(item.created_at)">{{
+                            $jx3boxT("jx3boxUi.alternate.expired", "(已过期)")
+                        }}</span>
+                    </span>
+                </div>
+
+                <div class="u-remove" @click.stop="onRemoveAlternate(item)" v-if="profile.uid != item.uid">
+                    <el-icon><Close /></el-icon>
+                </div>
+            </div>
+            <div class="c-alternate-btn" :class="{ 'is-disabled': overLength }" @click="onAddAlternate">+</div>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import Bus from "./bus";
+import { showAvatar } from "@jx3box/jx3box-common/js/utils";
+import dayjs from "dayjs";
+import User from "@jx3box/jx3box-common/js/user";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { refreshAuth } from "../../service/cms";
+import i18nMixin from "../../i18n/mixin";
+export default {
+    name: "AlternateSwitch",
+    mixins: [i18nMixin],
+    data() {
+        return {
+            visible: false,
+
+            alternate: [
+                // {
+                //     uid: 100,
+                //     name: "马甲1",
+                //     avatar: "https://avatar.jx3box.com/avatar/1",
+                //     created_at: 1620000000000,
+                // },
+            ],
+        };
+    },
+    computed: {
+        profile() {
+            return User.getInfo();
+        },
+        overLength() {
+            return this.alternate.length > 5;
+        },
+    },
+    mounted() {
+        Bus.$on("showAlternate", () => {
+            this.visible = true;
+        });
+        this.init();
+    },
+    methods: {
+        init() {
+            // 获取localStorage中以jx3box-alternate-开头的数据
+            try {
+                let keys = Object.keys(localStorage);
+                let alternate = keys.filter((key) => key.startsWith("jx3box-alternate-"));
+
+                alternate.forEach((key) => {
+                    const item = JSON.parse(localStorage.getItem(key));
+                    if (this.isExpired(item.created_at)) {
+                        localStorage.removeItem(key);
+                    }
+
+                    if (!this.alternate.find((alt) => alt.uid == item.uid)) {
+                        this.alternate.push(item);
+                    }
+                });
+
+                // 如果当前没有马甲，添加当前登录用户
+                if (!this.alternate?.length) {
+                    const data = {
+                        uid: this.profile.uid,
+                        name: this.profile.name,
+                        avatar: localStorage.getItem("avatar"),
+                        created_at: Number(localStorage.getItem("created_at")),
+                        group: ~~this.profile.group,
+                        bind_wx: ~~this.profile.bind_wx,
+                        token: localStorage.getItem("token"),
+                        status: ~~this.profile.status,
+                    };
+                    this.alternate.unshift(data);
+
+                    localStorage.setItem("jx3box-alternate-" + this.profile.uid, JSON.stringify(data));
+                }
+
+                // 当前激活的排在第一
+                this.alternate.sort((a, b) => {
+                    const pa = a.uid == this.profile.uid ? -1 : 1;
+                    const pb = b.uid == this.profile.uid ? -1 : 1;
+                    return pa - pb;
+                });
+            } catch (error) {
+                console.error(error);
+            }
+        },
+        showAvatar(url) {
+            return showAvatar(url, "m");
+        },
+        getFormatTime(time) {
+            return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
+        },
+        // 判断是否已过期
+        isExpired(time) {
+            return dayjs().diff(time, "day") > 30;
+        },
+        // 选择马甲
+        onSelectAlternate(item) {
+            if (this.isExpired(item.created_at)) {
+                this.$message.error(this.$jx3boxT("jx3boxUi.alternate.expiredNeedRelogin", "该马甲已过期，请重新登录"));
+                return;
+            }
+            if (this.profile.uid == item.uid) {
+                return;
+            }
+            this.$confirm(this.$jx3boxT("jx3boxUi.alternate.switchConfirm", "确定要切换到该马甲吗？"), this.$jx3boxT("jx3boxUi.common.tip", "提示"), {
+                confirmButtonText: this.$jx3boxT("jx3boxUi.common.confirm", "确定"),
+                cancelButtonText: this.$jx3boxT("jx3boxUi.common.cancel", "取消"),
+                type: "warning",
+            })
+                .then(() => {
+                    User.update(item).then(async () => {
+                        localStorage.setItem(
+                            "jx3box-alternate-" + item.uid,
+                            JSON.stringify({
+                                ...item,
+                                created_at: Number(localStorage.getItem("created_at")),
+                            })
+                        );
+                        await refreshAuth();
+                        location.reload();
+                        this.visible = false;
+                    });
+                })
+                .catch(() => {});
+        },
+        // 删除马甲
+        onRemoveAlternate(item) {
+            this.$confirm(this.$jx3boxT("jx3boxUi.alternate.deleteConfirm", "确定要删除该马甲吗？"), this.$jx3boxT("jx3boxUi.common.tip", "提示"), {
+                confirmButtonText: this.$jx3boxT("jx3boxUi.common.confirm", "确定"),
+                cancelButtonText: this.$jx3boxT("jx3boxUi.common.cancel", "取消"),
+                type: "warning",
+            })
+                .then(() => {
+                    localStorage.removeItem("jx3box-alternate-" + item.uid);
+
+                    this.alternate = this.alternate.filter((alt) => alt.uid != item.uid);
+                })
+                .catch(() => {});
+        },
+        // 新增马甲
+        onAddAlternate() {
+            if (this.overLength) {
+                this.$message.error(this.$jx3boxT("jx3boxUi.alternate.maxFive", "最多只能添加5个马甲"));
+                return;
+            }
+            // 跳转至登录页
+            location.href = JX3BOX.__Links.account.login + "?alternate=1";
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-alternate {
+    .el-dialog__title {
+        .fz(12px);
+    }
+    .el-dialog__body {
+        padding: 0;
+    }
+    .el-dialog__header {
+        // padding: 10px;
+        border-bottom: #dcdfe6 1px solid;
+    }
+}
+
+.c-alternate__content {
+    max-height: 600px;
+    overflow-y: auto;
+
+    .c-alternate-item {
+        .flex;
+        gap: 10px;
+        .pointer;
+        padding: 10px;
+        .pr;
+        border-bottom: 1px solid #eee;
+        .fz(13px);
+
+        &:hover {
+            background-color: @bg-light;
+
+            .u-remove {
+                display: block;
+            }
+        }
+    }
+
+    .u-remove {
+        .pa;
+        right: 10px;
+        top: 5px;
+        color: #999;
+        .pointer;
+        font-size: 16px;
+
+        &:hover {
+            color: #333;
+        }
+        .none;
+    }
+
+    .m-avatar {
+        .pr;
+    }
+    .u-avatar {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+    }
+    .u-active {
+        .pa;
+        right: -2px;
+        top: -6px;
+        width: 20px;
+        height: 20px;
+        // fill: #fff;
+        color: #0dbc19;
+    }
+
+    .m-misc {
+        .flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    .u-label {
+        font-size: 12px;
+        color: #999;
+    }
+
+    .u-extra {
+        font-size: 12px;
+        color: #999;
+    }
+
+    .is-expired {
+        .u-time {
+            color: #c00;
+        }
+    }
+
+    .c-alternate-btn {
+        // padding: 10px;
+        text-align: center;
+        .pointer;
+        // width: 100%;
+        // border-radius: 0;
+        .size(100%,74px);
+        .fz(40px,74px);
+        color: #999;
+        &:hover {
+            background-color: @bg-light;
+            color: #888;
+        }
+    }
+}
+</style>

package/src/header/asset.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="c-header-panel c-header-assets">
+        <a class="u-asset" href="/dashboard/boxcoin">
+            <img
+                class="u-icon"
+                svg-inline
+                src="../../assets/img/common/coin.svg"
+                :alt="$jx3boxT('jx3boxUi.header.asset', '资产')"
+            />
+        </a>
+
+        <div class="u-assets u-pop-content">
+            <div class="u-detail">
+                <span class="u-item">
+                    <a class="u-item-primary" href="/about/incentives" :target="target">
+                        <span class="u-label"
+                            ><el-icon><User /></el-icon> {{ $jx3boxT("jx3boxUi.header.level", "等级") }}</span
+                        >
+                        <span class="u-value u-level" :style="levelStyle">Lv.{{ level }}</span>
+                    </a>
+                    <!-- <span class="u-item-extend"><a href="/about/incentives" :target="target">[权益]</a></span> -->
+                </span>
+                <span class="u-item">
+                    <a class="u-item-primary" href="/dashboard/boxcoin" :target="target"
+                        ><span class="u-label"
+                            ><el-icon><Coin /></el-icon> {{ $jx3boxT("jx3boxUi.header.boxCoin", "盒币") }}</span
+                        >
+                        <span class="u-value">{{ asset.box_coin }}</span></a
+                    >
+                    <span class="u-item-extend"
+                        ><a href="/dashboard/boxcoin" :target="target"
+                            >[{{ $jx3boxT("jx3boxUi.header.exchangeTongbao", "兑换通宝") }}]</a
+                        ></span
+                    >
+                </span>
+                <!-- <span class="u-item">
+                    <a class="u-item-primary" href="/dashboard/cny" :target="target"
+                        ><span class="u-label"><i class="el-icon-wallet"></i> 金箔</span
+                        ><span class="u-value">{{ asset.cny }}</span></a
+                    >
+                    <span class="u-item-extend"
+                        ><a href="/vip/cny" :target="target">[充值]</a>
+                        <a href="/dashboard/cny" :target="target">[提现]</a></span
+                    >
+                </span> -->
+                <span class="u-item">
+                    <a class="u-item-primary" href="/dashboard/points" :target="target"
+                        ><span class="u-label"
+                            ><el-icon><Sugar /></el-icon> {{ $jx3boxT("jx3boxUi.header.points", "积分") }}</span
+                        >
+                        <span class="u-value">{{ asset.points }}</span></a
+                    >
+                    <span class="u-item-extend"
+                        ><a href="/vip/mall" :target="target">[{{ $jx3boxT("jx3boxUi.header.redeem", "兑礼") }}]</a
+                        ><a href="/vip/lottery" :target="target"
+                            >[{{ $jx3boxT("jx3boxUi.header.lottery", "抽奖") }}]</a
+                        ></span
+                    >
+                </span>
+                <span class="u-item">
+                    <a class="u-item-primary" href="/dashboard/card" :target="target"
+                        ><span class="u-label"
+                            ><el-icon><CreditCard /></el-icon> {{ $jx3boxT("jx3boxUi.header.card", "卡密") }}</span
+                        >
+                        <span class="u-value">{{ asset.ext_info ? asset.ext_info.keycode : 0 }}</span></a
+                    >
+                    <span class="u-item-extend"
+                        ><a href="/dashboard/card" :target="target">[{{ $jx3boxT("jx3boxUi.header.view", "查看") }}]</a></span
+                    >
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import i18nMixin from "../../i18n/mixin";
+// import coinIcon from "@/assets/img/components/common/header/coin.svg";
+export default {
+    name: "Asset",
+    mixins: [i18nMixin],
+    components: {
+        // coinIcon,
+    },
+    props: ["asset"],
+    data() {
+        return {
+            // VIP
+            target: "_self",
+        };
+    },
+    computed: {
+        level: function () {
+            return User.getLevel(this.asset?.experience);
+        },
+        levelStyle: function () {
+            return {
+                background: JX3BOX.__userLevelColor[this.level],
+                color: "#fff",
+                padding: "2px 8px",
+                borderRadius: "2px",
+            };
+        },
+    },
+};
+</script>
+
+<style lang="less">
+// 用户资产
+.c-header-assets {
+    position: relative;
+    height: 100%;
+    .u-asset {
+        padding: 0 10px;
+        height: 100%;
+        .flex;
+        align-items: center;
+        &:hover {
+            .tm(0.7);
+        }
+    }
+
+    .u-assets {
+        .u-delta;
+        width: 160px;
+        padding: 5px 0;
+    }
+
+    .u-detail {
+        .u-item {
+            .db;
+            color: #454545;
+            padding: 5px 15px;
+
+            &:hover {
+                background-color: @v4primary;
+                .u-label {
+                    color: #fff;
+                }
+                .u-value {
+                    color: #fff;
+                }
+            }
+
+            .u-item-primary {
+                .flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .u-label {
+                color: @v4tip;
+                .flex(y);
+                gap:3px;
+            }
+
+            .u-value {
+                font-weight: bold;
+                .ml(5px);
+                color: #111;
+                .fz(13px);
+            }
+            .u-level {
+                .fz(12px,14px);
+            }
+            .u-item-extend {
+                .none;
+                a {
+                    .ml(5px);
+                    &:hover {
+                        color: @v4primary;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>