@jx3box/jx3box-ui 0.0.1

package/src/filters/topicBy.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="w-filter-topic" ref="tagBy">
+        <el-popover
+            v-model:visible="visible"
+            trigger="manual"
+            ref="pop"
+            :width="380"
+            popper-class="w-filter-topic__pop"
+            :popper-options="{ boundariesElement: 'parent' }"
+        >
+            <div class="w-filter-topic__content">
+                <div class="u-group">
+                    <el-tag
+                        v-for="item in computedTopics"
+                        :key="item"
+                        @click="onTagClick(item)"
+                        class="u-group-item u-topic"
+                        :effect="item === value ? 'dark' : 'light'"
+                        size="small"
+                        >{{ item }}</el-tag
+                    >
+                </div>
+            </div>
+
+            <template #reference>
+                <span @click="onToggle" class="u-toggle" :class="{ active: !!value }">
+                    <el-icon> <operation /> </el-icon>
+                    {{ activeText }}
+                    <el-icon>
+                        <arrow-down />
+                    </el-icon>
+                </span>
+            </template>
+        </el-popover>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "topicBy",
+    props: {
+        topics: {
+            type: Array,
+            default: () => [],
+        },
+        modelValue: {
+            type: String,
+            default: "",
+        },
+        label: {
+            type: String,
+            default: "主题",
+        },
+    },
+    emits: ["update:modelValue"],
+    model: {
+        prop: "modelValue",
+        event: "update:modelValue",
+    },
+    data() {
+        return {
+            visible: false,
+            value: "全部",
+        };
+    },
+    computed: {
+        activeText() {
+            const { value } = this;
+            return value === "全部" ? this.label : value;
+        },
+        computedTopics() {
+            return ["全部", ...this.topics];
+        },
+    },
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(val) {
+                this.value = val === "" ? "全部" : val;
+            },
+        },
+        value(val) {
+            if (val === "全部") val = "";
+            this.$emit("update:modelValue", val);
+        },
+    },
+    mounted() {
+        document.addEventListener("click", this.clickOutside);
+    },
+    beforeUnmount() {
+        document.removeEventListener("click", this.clickOutside);
+    },
+    methods: {
+        onToggle() {
+            this.visible = !this.visible;
+        },
+        onTagClick(item) {
+            this.value = item;
+
+            setTimeout(() => {
+                this.visible = false;
+            }, 100);
+        },
+        clickOutside(e) {
+            const tagBy = this.$refs.tagBy;
+            const pop = this.$refs.pop;
+
+            if (tagBy && !tagBy.contains(e.target) && pop && !pop.$el.contains(e.target)) {
+                this.visible = false;
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.w-filter-topic {
+    display: inline-block;
+    .u-toggle {
+        color: #606266;
+        font-size: 12px;
+        .pointer;
+    }
+}
+.w-filter-topic__content {
+    padding: 5px;
+}
+.w-filter-topic__pop {
+    .u-group-title {
+        color: #606266;
+        padding-bottom: 10px;
+    }
+    .u-group {
+        .flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+    .u-topic {
+        .pointer;
+        border: 1px solid transparent;
+        line-height: 26px;
+        height: 28px;
+        &:not(.el-tag--dark) {
+            background-color: #f1f8ff;
+        }
+        &:hover {
+            border: 1px solid @color-link;
+        }
+    }
+}
+</style>

package/src/filters/versionBy.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="w-filter-client">
+        <ul>
+            <li class="u-client" :class="{on: version == ''}" @click="filter('')">
+                双端
+            </li>
+            <li
+                class="u-client"
+                :class="{ on: version == value }"
+                v-for="(label, value) in versions"
+                :key="value"
+                @click="filter(value)"
+            >{{ label }}</li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "versionBy",
+    props: ["value"],
+    emits: ["filter"],
+    data: function () {
+        return {
+            version: this.value || "",
+        };
+    },
+    computed: {
+        versions: function () {
+            const versions = {
+                0: "旗舰",
+                1: "无界"
+            }
+            return versions;
+        },
+    },
+    methods: {
+        filter: function (val) {
+            this.version = val;
+            this.$emit("filter", { type: "version", val: val });
+            this.$forceUpdate();
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/filters/client-by.less";
+</style>

package/src/filters/zlpBy.vue

@@ -0,0 +1,70 @@
+<template>
+    <span class="w-filter-menu">
+        <el-dropdown>
+            <span class="el-dropdown-link">
+                <span class="u-menu-label">
+                    <el-icon> <operation /> </el-icon>
+                    {{ value ? value : "资料片" }}
+                    <el-icon>
+                        <arrow-down />
+                    </el-icon>
+                </span>
+            </span>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item @click="filter('')">
+                        {{ "全部" }}
+                    </el-dropdown-item>
+                    <el-dropdown-item v-for="item in data" :key="item" @click="filter(item)">{{
+                        item
+                    }}</el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+    </span>
+</template>
+
+<script>
+import zlps from "@jx3box/jx3box-common/data/jx3_zlp.json";
+export default {
+    name: "zlpBy",
+    emits: ["filter"],
+    props: ["client"],
+    data: function () {
+        return {
+            value: "",
+        };
+    },
+    computed: {
+        data: function () {
+            let client = this.client || "all";
+            return zlps[client];
+        },
+    },
+    watch: {
+        client: function () {
+            this.value = "";
+        },
+    },
+    methods: {
+        filter: function (key) {
+            this.value = key;
+            this.$emit("filter", { type: "zlp", val: key });
+        },
+    },
+    mounted: function () {},
+    components: {},
+};
+</script>
+
+<style lang="less">
+.w-filter-menu {
+    .pointer;
+    .u-menu-label {
+        i {
+            .mr(5px);
+        }
+        .fz(12px);
+    }
+}
+</style>

package/src/footer/copyright.vue

@@ -0,0 +1,59 @@
+<template>
+    <div
+        class="flex flex-col items-center justify-between pt-8 text-gray-500 md:flex-row"
+        style="border-top: 1px solid rgba(55, 65, 81, 1); font-size: 11px"
+    >
+        <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 md:justify-start">
+            <span>{{
+                $jx3boxT("jx3boxUi.footer.copyright", "© 2019-{year} JX3BOX {poweredBy}", {
+                    year: new Date().getFullYear(),
+                    poweredBy: $jx3boxT("jx3boxUi.footer.poweredBy", "All rights reserved."),
+                })
+            }}</span>
+            <a
+                class="text-gray-500 hover:underline"
+                href="https://beian.miit.gov.cn/"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                {{ $jx3boxT("jx3boxUi.footer.icp", "湘ICP备2021002288号") }}
+            </a>
+        </div>
+        <div class="mt-4 flex items-center space-x-6 md:mt-0">
+            <a
+                class="text-gray-500 transition-colors hover:text-white"
+                href="https://rx-planet.com/contact"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                {{ $jx3boxT("jx3boxUi.footer.contactUs", "联系我们") }}
+            </a>
+            <a
+                class="text-gray-500 transition-colors hover:text-white"
+                href="https://www.jx3box.com/feedback"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                {{ $jx3boxT("jx3boxUi.footer.feedback", "反馈建议") }}
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+import i18nMixin from "../../i18n/mixin";
+export default {
+    name: "FooterCopyright",
+    mixins: [i18nMixin],
+    props: [],
+    components: {},
+    data: function () {
+        return {};
+    },
+    computed: {},
+    watch: {},
+    methods: {},
+    created: function () {},
+    mounted: function () {},
+};
+</script>

package/src/footer/links.vue

@@ -0,0 +1,79 @@
+<template>
+    <section class="lg:col-span-4">
+        <div class="grid grid-cols-1 gap-8 sm:grid-cols-3">
+            <div v-for="group in footerGroups" :key="group.title">
+                <h3 class="text-sm font-semibold tracking-wide text-white">
+                    {{ $jx3boxT(`jx3boxUi.footer.${group.key}`, group.title) }}
+                </h3>
+                <div class="mt-4 space-y-3">
+                    <a
+                        v-for="item in group.links"
+                        :key="item.name"
+                        class="block text-xs text-gray-400 transition hover:text-indigo-400"
+                        :href="item.href"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        {{ $jx3boxT(`jx3boxUi.footer.${item.key}`, item.name) }}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+import i18nMixin from "../../i18n/mixin";
+export default {
+    name: "FooterLinks",
+    mixins: [i18nMixin],
+    props: [],
+    components: {},
+    data: function () {
+        return {
+            aboutLinks: [
+                { key: "teamMembers", name: "团队成员", href: "https://www.jx3box.com/about/" },
+                { key: "joinUs", name: "加入我们", href: "https://www.jx3box.com/notice/21899" },
+                { key: "devDocs", name: "开发文档", href: "https://www.jx3box.com/tool?subtype=4" },
+                { key: "codeRepo", name: "代码仓库", href: "https://github.com/JX3BOX" },
+            ],
+            legalLinks: [
+                { key: "userAgreement", name: "用户协议", href: "https://www.jx3box.com/about/license" },
+                { key: "creatorTreaty", name: "创作公约", href: "https://www.jx3box.com/about/treaty" },
+                { key: "privacyPolicy", name: "隐私政策", href: "https://www.jx3box.com/about/privacy" },
+                { key: "creatorIncentives", name: "创作激励", href: "https://www.jx3box.com/about/incentives" },
+            ],
+            extraLinks: [
+                { key: "gameVersion", name: "游戏版本", href: "https://www.jx3box.com/topic" },
+                { key: "eventCenter", name: "活动中心", href: "https://www.jx3box.com/event" },
+                { key: "siteMap", name: "全站地图", href: "https://www.jx3box.com/app/" },
+            ],
+        };
+    },
+    computed: {
+        footerGroups() {
+            return [
+                {
+                    key: "linksAbout",
+                    title: "关于我们",
+                    links: this.aboutLinks,
+                },
+                {
+                    key: "linksLegal",
+                    title: "法律合规",
+                    links: this.legalLinks,
+                },
+                {
+                    key: "linksMore",
+                    title: "更多入口",
+                    links: this.extraLinks,
+                },
+            ];
+        },
+    },
+    watch: {},
+    methods: {},
+    created: function () {},
+    mounted: function () {},
+};
+</script>

package/src/footer/official.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="c-footer-official mt-6 flex flex-wrap gap-3">
+        <div v-for="item in socials" :key="item.name">
+            <el-popover
+                v-if="item.qrcode"
+                ref="officialPopover"
+                trigger="hover"
+                placement="top"
+                popper-class="c-footer--v4__popover"
+                @show="handlePopoverShow"
+            >
+                <div class="flex w-36 flex-col items-center p-3">
+                    <img
+                        class="h-32 w-32 rounded-md object-cover"
+                        :src="item.qrcode"
+                        :alt="getSocialName(item)"
+                        @load="handleQrcodeLoad"
+                    />
+                    <span class="mt-2 text-xs font-black">{{ item.label || getSocialName(item) }}</span>
+                </div>
+                <template #reference>
+                    <a
+                        class="u-link flex h-11 w-11 items-center justify-center rounded-full border border-gray-700 bg-gray-800 transition"
+                        :title="item.label"
+                        href="javascript:;"
+                    >
+                        <img class="h-5 w-5" :src="item.icon" :alt="getSocialName(item)" />
+                    </a>
+                </template>
+            </el-popover>
+            <a
+                v-else
+                class="u-link flex h-11 w-11 items-center justify-center rounded-full border border-gray-700 bg-gray-800 transition"
+                :href="item.href"
+                target="_blank"
+                rel="noopener noreferrer"
+                :title="item.label"
+            >
+                <img class="h-5 w-5" :src="item.icon" :alt="getSocialName(item)" />
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+// import wechatIcon from "@/assets/img/icons/wechat.svg?url";
+// import bilibiliIcon from "@/assets/img/icons/bilibili.svg?url";
+// import weiboIcon from "@/assets/img/icons/weibo.svg?url";
+// import douyinIcon from "@/assets/img/icons/douyin.svg?url";
+// import wechatQrcode from "@/assets/img/icons/mp.jpg";
+
+import i18nMixin from "../../i18n/mixin";
+
+export default {
+    name: "FooterOfficial",
+    mixins: [i18nMixin],
+    props: [],
+    components: {},
+    data: function () {
+        return {
+            socials: [
+                {
+                    name: "公众号",
+                    key: "wechat",
+                    href: "",
+                    icon: require('../../assets/img/common/wechat.svg'),
+                    qrcode: require('../../assets/img/common/mp.jpg'),
+                    label: "剑三魔盒",
+                },
+                {
+                    name: "B站",
+                    key: "bilibili",
+                    href: "https://space.bilibili.com/2066064028",
+                    icon: require('../../assets/img/common/bilibili.svg'),
+                    label: "剑网3魔盒",
+                },
+                {
+                    name: "微博",
+                    key: "weibo",
+                    href: "https://weibo.com/jx3box",
+                    icon: require('../../assets/img/common/weibo.svg'),
+                    label: "剑网3魔盒",
+                },
+                {
+                    name: "抖音",
+                    key: "douyin",
+                    href: "https://www.douyin.com/user/MS4wLjABAAAAP3OHPy-BYsW6IMiPZfP1FP3J_zYAAYNVVlk9XyoKhOs",
+                    icon: require('../../assets/img/common/douyin.svg'),
+                    label: "剑网3魔盒",
+                },
+            ],
+        };
+    },
+    computed: {},
+    watch: {},
+    methods: {
+        getPopoverInstance() {
+            const popoverRef = this.$refs?.officialPopover;
+            if (Array.isArray(popoverRef)) return popoverRef[0] || null;
+            return popoverRef || null;
+        },
+        updatePopoverPosition() {
+            const popover = this.getPopoverInstance();
+            if (popover && typeof popover.updatePopper === "function") popover.updatePopper();
+        },
+        handlePopoverShow() {
+            this.$nextTick(() => {
+                this.updatePopoverPosition();
+                if (typeof requestAnimationFrame === "function") {
+                    requestAnimationFrame(() => this.updatePopoverPosition());
+                }
+            });
+        },
+        handleQrcodeLoad() {
+            this.$nextTick(() => this.updatePopoverPosition());
+        },
+        getSocialName(item) {
+            if (!item?.key) return item?.name || "";
+            const map = {
+                wechat: "wechatOA",
+                bilibili: "bilibili",
+                weibo: "weibo",
+                douyin: "douyin",
+            };
+            const tKey = map[item.key] || item.key;
+            return this.$jx3boxT(`jx3boxUi.footer.${tKey}`, item.name || tKey);
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style lang="less">
+.c-footer-official {
+    .u-link {
+        &:hover {
+            background-color: rgba(255, 255, 255, 1);
+        }
+    }
+}
+</style>