@jx3box/jx3box-ui 0.0.1

package/src/Box.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="c-jx3box" :class="{ on: status, isOverlay: overlayEnable && isOverlay }">
+        <!-- search -->
+        <header-search @click.stop />
+
+        <!-- list -->
+        <ul class="u-list">
+            <li>
+                <a class="u-item" href="/index">
+                    <img class="u-pic" svg-inline :src="homeicon" />
+                    <img class="u-pic-hover" svg-inline :src="homeicon" />
+                    <span class="u-txt">首页</span>
+                </a>
+            </li>
+            <li v-for="(item, i) in list" :key="i" :class="{ 'u-app-start': item.lf }">
+                <a class="u-item" :href="item.href" :target="getTarget(item.href)">
+                    <img class="u-pic" :src="getBoxIcon(item.img)" />
+                    <!-- <img class="u-pic-hover" svg-inline :src="item.hover | getBoxIcon" /> -->
+                    <span class="u-txt">{{ item.abbr }}</span>
+                </a>
+            </li>
+        </ul>
+        <span class="u-close" @click="closeBox($event)">
+            <el-icon><Upload /></el-icon>
+            <span>收起</span>
+        </span>
+    </div>
+</template>
+
+<script>
+import _ from "lodash";
+import Bus from "../utils/bus";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import box from "../assets/data/box.json";
+import { getMenu } from "../service/header.js";
+
+import search from "./header/search.vue";
+export default {
+    name: "CommonBox",
+    props: ["overlayEnable"],
+    data: function () {
+        return {
+            status: false,
+            isOverlay: false,
+            data: box,
+            client: location.href.includes("origin") ? "origin" : "std",
+        };
+    },
+    computed: {
+        homeicon: function () {
+            return JX3BOX.__imgPath + "image/box/home.svg";
+        },
+        homeicon_hover: function () {
+            return JX3BOX.__imgPath + "image/box/home_on.svg";
+        },
+        originicon: function () {
+            return JX3BOX.__imgPath + "image/box/origin.svg";
+        },
+        list: function () {
+            return this.data.filter((item) => {
+                return item.status && (item.client == this.client || item.client == "all");
+            });
+        },
+    },
+    methods: {
+        closeBox: function () {
+            Bus.emit("toggleBox", false);
+        },
+        matchedClient: function (client) {
+            return client == "all" ? true : client == this.client;
+        },
+        getBoxIcon: function (val) {
+            return JX3BOX.__imgPath + "image/box/" + val;
+        },
+        getTarget: function (val) {
+            if (window.innerWidth < 768 || val?.startsWith("/")) {
+                return "_self";
+            } else {
+                return "_blank";
+            }
+        },
+        loadMenu() {
+            try {
+                const _box = JSON.parse(sessionStorage.getItem("box"));
+                if (_box) {
+                    this.data = _box;
+                } else {
+                    getMenu("box").then((res) => {
+                        this.data = res.data?.data?.val;
+                        sessionStorage.setItem("box", JSON.stringify(this.data));
+                    });
+                }
+            } catch (e) {
+                this.data = box;
+                console.log("loadBox error", e);
+            }
+        },
+    },
+    created: function () {
+        if (this.overlayEnable) {
+            const vm = this;
+            window.addEventListener(
+                "scroll",
+                _.throttle(() => {
+                    vm.isOverlay = window.scrollY > 200 ? true : false;
+                }, 200)
+            );
+        }
+        this.loadMenu();
+    },
+    mounted: function () {
+        Bus.on("toggleBox", (status) => {
+            if (status == undefined) {
+                this.status = !this.status;
+            } else {
+                this.status = status;
+            }
+        });
+        document.addEventListener("click", function () {
+            Bus.emit("toggleBox", false);
+        });
+    },
+    components: {
+        "header-search": search,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/header/box.less";
+</style>
+
+<style scoped lang="less">
+.c-jx3box {
+    .c-header-search {
+        float: none;
+        .w(auto);
+        margin: 0 20px 10px 20px;
+        box-sizing: border-box;
+        padding: 0;
+        .none;
+    }
+}
+@media screen and (max-width: @phone) {
+    .c-jx3box .c-header-search {
+        .db;
+    }
+}
+</style>

package/src/Breadcrumb.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="c-breadcrumb" v-if="!isApp">
+        <div class="u-menu" @click.stop="toggleLeftSide" v-if="!withoutLeft">
+            <img class="u-toggle" :class="{ on: isOpen }" svg-inline src="../assets/img/bread/menu.svg" />
+        </div>
+        <a class="u-channel" :href="rootLink" :class="{ on: withoutLeft }">
+            <i class="u-channel-logo">
+                <img :src="getAppIcon(slug)" v-if="!$slots.logo" />
+                <slot name="logo"></slot>
+            </i>
+            <span class="u-title">{{ name }}</span>
+        </a>
+        <!-- 面包屑内容 -->
+        <Crumb :name="slug" v-if="crumbEnable" />
+        <slot></slot>
+        <slot v-if="show" name="title"></slot>
+        <div class="u-op">
+            <slot name="op-append"></slot>
+            <a
+                v-if="publishEnable"
+                :href="publishLink(slug)"
+                class="u-publish el-button el-button--primary el-button--medium u-op-public"
+            >
+                <el-icon><Edit /></el-icon>
+                <span>发布</span>
+            </a>
+            <a
+                v-if="feedbackEnable"
+                v-show="isNotAdmin"
+                :href="feedback"
+                class="u-feedback el-button el-button--primary el-button--medium u-op-public"
+                target="_blank"
+            >
+                <el-icon><InfoFilled /></el-icon>
+                <span>反馈</span>
+            </a>
+            <!-- <AdminButton v-if="adminEnable" class="u-admin" /> -->
+            <Admin v-if="adminEnable" :marksOptions="adminMarks" :show-extend="showExtend" :app="slug" :subtypeMap="subtypeMap" />
+            <!-- <AdminDrop v-if="adminEnable" /> -->
+            <slot name="op-prepend"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import { throttle } from "lodash";
+import { publishLink, getAppIcon } from "@jx3box/jx3box-common/js/utils";
+import User from "@jx3box/jx3box-common/js/user";
+import Admin from "./bread/Admin.vue";
+import Crumb from "./bread/Crumb.vue";
+import { isApp } from "../assets/js/app.js";
+import Bus from "../utils/bus";
+
+export default {
+    name: "CommonBreadcrumb",
+    props: [
+    "name",
+        "slug",
+        "root",
+        "publishEnable",
+        "adminEnable",
+        "topicEnable",
+        "feedbackEnable",
+        "overlayEnable",
+        "crumbEnable",
+        "withoutLeft",
+        "adminMarks",
+        "icon",
+        "subtypeMap",
+        "showExtend"
+    ],
+    data: function () {
+        return {
+            isOpen: true,
+            feedback: "/feedback?refer=" + encodeURIComponent(window.location.href),
+            isNotAdmin: !User.isEditor(),
+            isOverlay: false,
+            isApp: isApp(),
+            show: false,
+        };
+    },
+    computed: {
+        rootLink: function () {
+            return this.root || `/${this.slug}`;
+        },
+    },
+    methods: {
+        toggleLeftSide: function () {
+            let status = !this.isOpen;
+            Bus.emit("toggleLeftSide", status);
+        },
+        publishLink,
+        getAppIcon,
+        onShowTitle() {
+            // 小屏不显示
+            if (window.innerWidth < 1680) {
+                return;
+            }
+            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+            if (scrollTop > 100) {
+                this.show = true;
+            } else {
+                this.show = false;
+            }
+        }
+    },
+    beforeUnmount() {
+        document.removeEventListener("scroll", this.onShowTitle);
+    },
+    mounted: function () {
+        document.addEventListener("scroll", this.onShowTitle);
+        Bus.on("toggleLeftSide", (data) => {
+            this.isOpen = data;
+        });
+
+        if (window.innerWidth < 1024) {
+            this.isOpen = false;
+        }
+
+        if (this.overlayEnable) {
+            const vm = this;
+            window.addEventListener(
+                "scroll",
+                throttle(() => {
+                    vm.isOverlay = window.scrollY > 200 ? true : false;
+                }, 200)
+            );
+        }
+    },
+    components: {
+        Admin,
+        Crumb,
+        // AdminButton,
+        // AdminDrop
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/bread/breadcrumb.less";
+</style>

package/src/CommonFooter.vue

@@ -0,0 +1,69 @@
+<template>
+    <footer class="c-footer--v4 box-border bg-gray-900 px-6 py-12 text-gray-400 md:px-10 lg:px-16 xl:px-20">
+        <div class="mx-auto w-full" style="max-width: 92rem">
+            <div class="grid grid-cols-1 gap-10 pb-10 lg:grid-cols-12 lg:gap-8">
+                <section class="lg:col-span-3">
+                    <div class="flex items-center space-x-3">
+                        <img class="u-logo h-9 w-9" svg-inline src="../assets/img/common/logo.svg" alt="JX3BOX" />
+                        <span class="text-2xl font-bold tracking-tight text-white">JX3BOX</span>
+                    </div>
+                    <p class="mt-5 text-sm leading-7 text-gray-400" style="max-width: 20rem">
+                        {{ $jx3boxT("jx3boxUi.footer.slogan1", "一站式剑三工具与资源聚合站。") }}<br />
+                        {{ $jx3boxT("jx3boxUi.footer.slogan2", "江湖路远，幸甚有你。") }}
+                    </p>
+                    <footer-official />
+                </section>
+                <footer-links />
+                <footer-resource />
+            </div>
+            <footer-copyright />
+        </div>
+    </footer>
+</template>
+
+<script>
+import FooterOfficial from "./footer/official.vue";
+import FooterLinks from "./footer/links.vue";
+import FooterResource from "./footer/resource.vue";
+import FooterCopyright from "./footer/copyright.vue";
+import i18nMixin from "../i18n/mixin";
+export default {
+    name: "Footer",
+    mixins: [i18nMixin],
+    components: {
+        FooterOfficial,
+        FooterLinks,
+        FooterResource,
+        FooterCopyright,
+    },
+    data() {
+        return {};
+    },
+};
+</script>
+
+<style lang="less">
+body::after {
+    bottom: 0;
+    background: #111827;
+}
+.c-footer--v4{
+    .u-logo{
+        fill:#fff;
+    }
+}
+.c-footer--v4__popover {
+    background: #111827;
+    border: 1px solid #374151;
+    border-radius: 12px;
+    box-shadow: 0 16px 40px rgba(3, 7, 18, 0.45);
+    padding: 0 !important;
+}
+
+.c-footer--v4__popover .popper__arrow,
+.c-footer--v4__popover .popper__arrow:after,
+.c-footer--v4__popover .el-popper__arrow,
+.c-footer--v4__popover .el-popper__arrow::before {
+    display: none !important;
+}
+</style>

package/src/CommonHeader.vue

@@ -0,0 +1,270 @@
+<template>
+    <header class="c-header" id="c-header" :class="{ isOverlay: overlayEnable && isOverlay }">
+        <div class="c-header-inner">
+            <!-- logo -->
+            <header-logo />
+
+            <!-- client -->
+            <header-client :defaultValue="client" />
+
+            <!-- search -->
+            <header-search :client="client" />
+
+            <!-- nav -->
+            <header-nav :client="client" />
+
+            <slot></slot>
+
+            <!-- user -->
+            <header-user ref="user" :client="client" :asset="asset" />
+        </div>
+        <header-box v-if="isMobile" class="c-header-jx3box" :overlayEnable="overlayEnable" />
+        <header-box2 v-else />
+    </header>
+</template>
+
+<script>
+// 外部模块
+import _ from "lodash";
+
+// 子模块
+import logo from "./header/logo.vue";
+import client from "./header/client.vue";
+import search from "./header/search.vue";
+import nav from "./header/nav.vue";
+import user from "./header/user.vue";
+import box from "./header/box.vue";
+import box2 from "./header/box2.vue";
+
+// 移动端适配
+const KW = "jx3boxApp";
+import { isMiniProgram, miniprogramHack, isApp as checkIsApp } from "@jx3box/jx3box-common/js/utils";
+import miniprogram from "@jx3box/jx3box-common/data/miniprogram.json";
+
+// 数据
+import { getGlobalConfig } from "../service/header";
+import User from "@jx3box/jx3box-common/js/user.js";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+
+export default {
+    name: "Header",
+    components: {
+        "header-logo": logo,
+        "header-client": client,
+        "header-search": search,
+        "header-nav": nav,
+        "header-user": user,
+        "header-box": box,
+        "header-box2": box2,
+    },
+    props: ["overlayEnable"],
+    data: function () {
+        return {
+            isOverlay: false,
+            isApp: checkIsApp(),
+            isMobile: window.innerWidth <= 768,
+
+            asset: {},
+        };
+    },
+    computed: {
+        client: function () {
+            return location.hostname.includes("origin") ? "origin" : "std";
+        },
+        siteRoot: function () {
+            return location.host.includes("origin") ? JX3BOX.__OriginRoot : JX3BOX.__Root;
+        },
+    },
+    methods: {
+        // webView检测
+        checkIsWebView: function () {
+            if (window.navigator.userAgent.includes(KW)) {
+                document.documentElement.classList.add("env-app");
+            }
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const from = urlParams.get("from");
+            from && sessionStorage.setItem("from", from);
+            if (isMiniProgram() || checkIsApp()) {
+                const appid = urlParams.get("appid");
+                const item = miniprogram?.find((item) => item.appid === appid);
+                const from = urlParams.get("_from");
+
+                document.documentElement.classList.add("v-miniprogram");
+
+                if (from) {
+                    document.documentElement.classList.add("from-" + from);
+                }
+
+                if (appid && item) {
+                    document.documentElement.classList.add("env-miniprogram-" + item.id);
+
+                    window.JX3BOX_ENV = item.id?.toUpperCase() + "_MINIPROGRAM";
+                } else {
+                    document.documentElement.classList.add("wechat-miniprogram");
+
+                    window.JX3BOX_ENV = "MINIPROGRAM";
+
+                    // 微信小程序hack
+                    miniprogramHack();
+                }
+            }
+
+            // 如果来自推栏
+            if (sessionStorage.getItem("from") == "tl") {
+                document.documentElement.classList.add("v-miniprogram");
+            }
+        },
+
+        // 检查
+        init: function () {
+            this.checkIsWebView();
+
+            const token = this.getUrlParam("__token");
+            const env = this.getUrlParam("__env");
+            env && localStorage.setItem("__env", env);
+
+            token && localStorage.setItem("__token", token);
+
+            if (User.isLogin()) {
+                this.loadAsset();
+            }
+
+            // 获取全局配置
+            getGlobalConfig().then(async (res) => {
+                const global_token_version = res.token_version;
+                const token_version = localStorage.getItem("token_version");
+
+                if (User.isLogin()) {
+                    // 对于没有token_version或者token_version不是最新的用户，都需要登出
+                    if (!token_version || token_version != global_token_version) {
+                        // 先保存最新的token_version
+                        localStorage.setItem("token_version", global_token_version);
+                        // 然后执行登出操作
+                        User.destroy().then(() => {
+                            this.$refs.user?.logout();
+                            // 清除马甲所有马甲信息
+                            let keys = Object.keys(localStorage);
+                            let alternate = keys.filter((key) => key.startsWith("jx3box-alternate-"));
+
+                            alternate.forEach((key) => {
+                                localStorage.removeItem(key);
+                            });
+
+                            if (
+                                location.pathname.startsWith("/dashboard") ||
+                                location.pathname.startsWith("/publish")
+                            ) {
+                                location.href = this.siteRoot;
+                            }
+                        });
+                    }
+                } else {
+                    // 非登录状态也更新token_version，确保用户下次登录时使用新版本
+                    if (global_token_version) {
+                        localStorage.setItem("token_version", global_token_version);
+                    }
+                }
+            });
+        },
+
+        getUrlParam(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+            var r = window.location.search.substr(1).match(reg);
+            return r ? decodeURIComponent(r[2]) : null;
+        },
+        // 资产
+        loadAsset: function () {
+            User.getAsset().then((data) => {
+                this.asset = data;
+
+                const level = User.getLevel(this.asset?.experience);
+
+                if (level > 2) {
+                    document.documentElement.classList.add("is-comment-show");
+                }
+            });
+        },
+        updateScreen() {
+            this.isMobile = window.innerWidth <= 768;
+        },
+    },
+    created: function () {
+        this.init();
+        window.addEventListener("resize", this.updateScreen, { passive: true });
+
+        if (this.overlayEnable) {
+            this.__overlayScrollHandler = _.throttle(() => {
+                this.isOverlay = window.scrollY > 200 ? true : false;
+            }, 200);
+            window.addEventListener("scroll", this.__overlayScrollHandler, { passive: true });
+            this.__overlayScrollHandler();
+        }
+    },
+    beforeUnmount: function () {
+        window.removeEventListener("resize", this.updateScreen);
+        if (this.__overlayScrollHandler) {
+            window.removeEventListener("scroll", this.__overlayScrollHandler);
+            this.__overlayScrollHandler.cancel && this.__overlayScrollHandler.cancel();
+            this.__overlayScrollHandler = null;
+        }
+    },
+    mounted: function () {},
+};
+</script>
+
+<style lang="less">
+.c-header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 601;
+
+    width: 100%;
+    height: @header-height;
+
+    background-color: @header-bg;
+    color: #fff;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+
+    transition: 0.5s ease-in-out;
+}
+.c-header.isOverlay {
+    background-color: rgba(0, 0, 0, 0.85);
+}
+.c-header-inner {
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+    .flex;
+}
+@media print {
+    .c-header {
+        .none;
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .env-app,
+    .v-miniprogram,
+    .wechat-miniprogram {
+        .c-header {
+            .none;
+        }
+        body {
+            padding-top: 0;
+        }
+    }
+
+    .wechat-miniprogram {
+        .c-header {
+            .none;
+        }
+    }
+}
+</style>

package/src/Footer.vue

@@ -0,0 +1,45 @@
+<template>
+    <footer class="c-footer" id="c-footer" v-if="!isApp" :class="{ 'is--dark': darkMode }">
+        <div class="c-footer-inner">
+            <div class="c-footer-left">
+                <img class="u-flag" svg-inline src="../assets/img/footer/china.svg" />
+                <a href="https://beian.miit.gov.cn/" class="u-beian" target="_blank">湘ICP备2021002288号</a>
+            </div>
+            <div class="c-footer-right">
+                <a class="u-about" :href="about" target="_blank">关于我们</a>
+                <em>|</em>
+                <a class="u-doc" href="/help" target="_blank">帮助文档</a>
+                <em>|</em>
+                <a class="u-log" href="https://github.com/JX3BOX" target="_blank">代码仓库</a>
+                <em>|</em>
+                <a class="u-feedback" :href="feedback" target="_blank">反馈建议</a>
+            </div>
+            <slot></slot>
+        </div>
+    </footer>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { isApp } from "../assets/js/app.js";
+export default {
+    name: "CommonFooter",
+    props: {
+        darkMode: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function () {
+        return {
+            about: JX3BOX.__Root + "about",
+            feedback: JX3BOX.feedback + "&subject=" + location.href,
+            isApp: isApp(),
+        };
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/common/footer.less";
+</style>