@jx3box/jx3box-vue3-ui 0.0.3

package/src/bread/Crumb.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="c-crumb" v-html="html"></div>
+</template>
+
+<script>
+import { getBreadcrumb } from "../../service/breadcrumb";
+
+export default {
+    name: "BeardCrumb",
+    props: ["name"],
+    data: function () {
+        return {
+            html: "",
+        };
+    },
+    mounted() {
+        getBreadcrumb(this.name).then((res) => {
+            res = res.data;
+            this.html = res.data.breadcrumb?.html || "";
+        });
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/crumb.less";
+</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-coin" svg-inline src="../../assets/img/header/coin.svg" />
+        </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="_blank">
+                        <span class="u-label"
+                            ><el-icon><User /></el-icon> 等级</span
+                        >
+                        <span class="u-value u-level" :style="levelStyle">Lv.{{ level }}</span>
+                    </a>
+                    <!-- <span class="u-item-extend"><a href="/about/incentives" target="_blank">[权益]</a></span> -->
+                </span>
+                <span class="u-item">
+                    <a class="u-item-primary" href="/dashboard/boxcoin" target="_blank"
+                        ><span class="u-label"
+                            ><el-icon><Coin /></el-icon> 盒币</span
+                        >
+                        <span class="u-value">{{ asset.box_coin }}</span></a
+                    >
+                    <span class="u-item-extend"><a href="/dashboard/boxcoin" target="_blank">[兑换通宝]</a></span>
+                </span>
+                <span class="u-item">
+                    <a class="u-item-primary" href="/dashboard/cny" target="_blank"
+                        ><span class="u-label"
+                            ><el-icon><Wallet /></el-icon> 金箔</span
+                        ><span class="u-value">{{ asset.cny }}</span></a
+                    >
+                    <span class="u-item-extend"
+                        ><a href="/vip/cny" target="_blank">[充值]</a>
+                        <a href="/dashboard/cny" target="_blank">[提现]</a></span
+                    >
+                </span>
+                <span class="u-item">
+                    <a class="u-item-primary" href="/dashboard/points" target="_blank"
+                        ><span class="u-label"
+                            ><el-icon><Sugar /></el-icon> 银铛</span
+                        >
+                        <span class="u-value">{{ asset.points }}</span></a
+                    >
+                    <span class="u-item-extend"
+                        ><a href="/vip/mall" target="_blank">[兑礼]</a
+                        ><a href="/vip/lottery" target="_blank">[抽奖]</a></span
+                    >
+                </span>
+                <span class="u-item">
+                    <a class="u-item-primary" href="/dashboard/card" target="_blank"
+                        ><span class="u-label"
+                            ><el-icon><Postcard /></el-icon> 卡密</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="_blank">[查看]</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";
+export default {
+    name: "HeaderAsset",
+    props: ["asset"],
+    data() {
+        return {
+            // VIP
+        };
+    },
+    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">
+@import "../../assets/css/mixin.less";
+// 用户资产
+.c-header-assets {
+    position: relative;
+    height: 100%;
+
+    .u-coin {
+        .db;
+        .size(15px);
+        * {
+            fill: #fff !important;
+        }
+    }
+    .u-asset {
+        padding: 0 10px;
+        height: 100%;
+        .flex;
+        align-items: center;
+        &:hover {
+            .tm(0.7);
+        }
+    }
+
+    .u-icon {
+        .size(16px);
+        // font-size: 15px;
+        display: block;
+        // height: 32px;
+        padding: 24px 10px 10px 10px;
+        .pointer;
+    }
+
+    .u-assets {
+        .u-delta;
+        width: 160px;
+        padding: 5px 0;
+    }
+
+    .u-detail {
+        .u-item {
+            .db;
+            color: #454545;
+            padding: 5px 15px;
+
+            &:hover {
+                background-color: @color-link;
+                .u-label {
+                    color: #fff;
+                }
+                .u-value {
+                    color: #fff;
+                }
+            }
+
+            .u-item-primary {
+                .flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .u-label {
+                color: #454545;
+                .flex;
+                align-items: center;
+                gap: 5px;
+            }
+
+            .u-value {
+                font-weight: bold;
+                .ml(5px);
+                color: @color-link;
+                .fz(13px);
+            }
+            .u-level {
+                .fz(12px,14px);
+            }
+            .u-item-extend {
+                .none;
+                a {
+                    .ml(5px);
+                    &:hover {
+                        color: @pink;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

package/src/header/ClientSwitch.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="c-header-origin">
+        <i class="u-active" :class="{ isOffset }"></i>
+        <i class="u-div"></i>
+        <span
+            class="u-item"
+            v-for="(item, i) in clients"
+            :key="i"
+            :class="[clientCls(item), isActive(item)]"
+            @click="go(item)"
+            @mouseenter="changeClient(item)"
+            @mouseleave="resetClient"
+        >
+            {{ item.name }}
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "HeaderClientSwitch",
+    props: ["defaultValue"],
+    data: function () {
+        return {
+            clientThink: false,
+            clients: [
+                {
+                    name: "重制",
+                    client: "std",
+                    from: "origin.jx3box.com",
+                    to: "www.jx3box.com",
+                },
+                {
+                    name: "缘起",
+                    client: "origin",
+                    to: "origin.jx3box.com",
+                    from: "www.jx3box.com",
+                },
+            ],
+            client: this.defaultValue,
+            tempClient: this.defaultValue,
+        };
+    },
+    computed: {
+        isOffset: function () {
+            return this.tempClient == "origin";
+        },
+    },
+    methods: {
+        isActive: function (item) {
+            return this.client == item.client ? "on" : "";
+        },
+        clientCls: function (item) {
+            return "u-" + item.client;
+        },
+        changeClient: function (item) {
+            this.tempClient = item.client;
+        },
+        resetClient: function () {
+            this.tempClient = this.defaultValue;
+        },
+        go: function (item) {
+            // if(location.pathname.startsWith('/index') || location.pathname.startsWith('/origin')){
+            //     location.href = 'https://' + item.to
+            // }else{
+            location.href = location.href.replace(item.from, item.to);
+            // }
+        },
+    },
+    mounted: function () {},
+    components: {},
+};
+</script>
+
+<style lang="less">
+//怀旧服
+.c-header-origin {
+    .fl;
+    margin: 15px 0;
+    .mr(5px);
+    .pr;
+    background-color: #3a4248;
+    border: 2px solid @bg-black;
+    border-radius: 4px;
+    overflow: hidden;
+    .u-active {
+        .db;
+        .size(50%, 100%);
+        background: @color-link;
+        &:hover {
+            background-color: #3590f7;
+        }
+        .pa;
+        .lt(0);
+
+        transition: all 0.2s ease-in-out;
+        &.isOffset {
+            transform: translateX(100%);
+        }
+    }
+    .u-item {
+        .dbi;
+        .y(top);
+        font-size: 14px;
+        color: #fff;
+        .pointer;
+        padding: 5px 10px;
+        .pr;
+        .z(1);
+    }
+    .on {
+        cursor: default;
+    }
+}
+</style>

package/src/header/GameSwitch.vue

@@ -0,0 +1,210 @@
+<template>
+    <div class="c-game-switch">
+        <div class="u-current on" @click.stop="onShow">
+            <span>{{ currentGame.name }}</span>
+        </div>
+
+        <div class="c-game-list" v-show="showMore">
+            <span
+                class="u-game-item"
+                v-for="item in games"
+                :key="item.key"
+                :class="{ active: current === item.key, disabled: item.disabled }"
+                @click.stop="handleClick(item)"
+            >
+                <img class="u-img" :src="item.img" alt="" />
+                <span>{{ item.name }}</span>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { getGames } from "../../service/header";
+export default {
+    name: "HeaderGameSwitch",
+    data() {
+        return {
+            games: [
+                {
+                    name: "剑网3",
+                    img: JX3BOX.__imgPath + "image/xsj/jx3czb.png",
+                    key: "jx3",
+                    path: "www.jx3box.com",
+                    disabled: false,
+                },
+                {
+                    name: "剑网3缘起",
+                    img: JX3BOX.__imgPath + "image/xsj/jx3yq.png",
+                    key: "jx3origin",
+                    path: "origin.jx3box.com",
+                    disabled: false,
+                },
+            ],
+            current: "jx3",
+
+            showMore: false,
+        };
+    },
+    computed: {
+        currentGame() {
+            return this.games.find((item) => item.key == this.current);
+        },
+    },
+    mounted() {
+        const _host = window.location.host;
+        const _game = this.games.find((item) => item.path.indexOf(_host) > -1);
+        if (_game) {
+            this.current = _game.key;
+        }
+        this.close();
+        this.loadGames();
+    },
+    methods: {
+        handleClick(item) {
+            if (item.disabled) {
+                return;
+            }
+            if (["jx3", "jx3origin"].includes(this.current) && ["jx3", "jx3origin"].includes(item.key)) {
+                const _current = this.games.find((game) => game.key == this.current);
+                const _next = this.games.find((game) => game.key == item.key);
+
+                location.href = location.href.replace(_current.path, _next.path);
+            } else {
+                location.href = item.path;
+            }
+            this.current = item.key;
+        },
+        // itemHref(item) {
+        //     if (item.disabled) {
+        //         return "javascript:;";
+        //     }
+        //     return item.path;
+        // },
+        onShow() {
+            this.showMore = !this.showMore;
+        },
+        close() {
+            document.addEventListener("click", () => {
+                this.showMore = false;
+            });
+        },
+        loadGames() {
+            getGames().then((res) => {
+                this.games = this.games.concat(res?.data);
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.arrow(t,@width,@color,@x:50%) {
+    &:before {
+        bottom: 100%;
+        left: @x;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+        border-style: solid;
+        border-color: transparent;
+        border-bottom-color: @color;
+        border-width: unit(@width, px);
+        @margin: -@width;
+        margin-left: unit(@margin, px);
+    }
+}
+.c-game-switch {
+    display: inline-flex;
+    margin: 15px 0;
+    .mr(10px);
+    .pr;
+    .u-current {
+        .flex;
+        align-items: center;
+        .pointer;
+        .dbi;
+        .y(top);
+        font-size: 14px;
+        color: #fff;
+        padding: 5px 10px;
+        background-color: #7d7d7d;
+        border: 2px solid #303133;
+        border-radius: 4px;
+        .pr;
+        .z(1);
+        .u-img {
+            width: 20px;
+            height: 20px;
+            margin-right: 5px;
+        }
+
+        &.on {
+            background-color: @primary;
+            .pointer;
+        }
+
+        transition: 0.05s ease-in;
+        &:hover {
+            background-color: lighten(@primary, 2%);
+            color: #eee;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .c-game-switch {
+        margin-left: 2px;
+    }
+}
+.c-game-list {
+    .arrow(t,5px,@bg-black,12%);
+    position: absolute;
+    top: calc(100% + 14px);
+    left: -10px;
+    width: 300px;
+    background-color: #24292e;
+    padding: 10px;
+    border: 1px solid rgba(27, 31, 35, 0.15);
+    border-radius: 4px;
+    box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
+    margin-top: 6px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    // gap:10px;
+    grid-row-gap: 8px;
+    grid-column-gap: 10px;
+    .u-game-item {
+        .flex;
+        align-items: center;
+        padding: 6px;
+        .pointer;
+        border-radius: 4px;
+        color: #fff;
+        font-size: 14px;
+        .u-img {
+            width: 24px;
+            height: 24px;
+            margin-right: 5px;
+            border-radius: 4px;
+        }
+        &.active {
+            background-color: @primary;
+            color: #fff;
+        }
+        &:not(.disabled) {
+            &:hover {
+                background-color: @primary;
+                color: #fff;
+            }
+        }
+        &.disabled {
+            filter: grayscale(100%);
+            color: #c0c4cc;
+            cursor: not-allowed;
+        }
+    }
+}
+</style>

package/src/header/Logo.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="c-header-logo" @click="toggleBox($event)" title="点击展开魔盒矩阵">
+        <i class="u-pic" id="c-header-logo"><img svg-inline src="../../assets/img/header/logo.svg" /></i>
+        <span class="u-txt" :class="{ on: isIndex }" href="/">魔盒</span>
+    </div>
+</template>
+
+<script>
+import Bus from "../../utils/bus";
+export default {
+    name: "HeaderLogo",
+    props: [],
+    data: function () {
+        return {
+            isIndex: /\/index\/?/.test(location.pathname),
+        };
+    },
+    computed: {},
+    methods: {
+        // 盒子
+        toggleBox: function (e) {
+            e.stopPropagation();
+            Bus.emit("toggleBox");
+        },
+    },
+    mounted: function () {},
+    components: {},
+};
+</script>
+
+<style lang="less">
+//logo
+.c-header-logo {
+    .pointer;
+    user-select: none;
+    display: inline-flex;
+    flex-shrink: 0;
+    flex-grow: 0;
+    height: @header-height;
+
+    @padding: 15px;
+
+    .u-pic {
+        .db;
+        width: @logo-size;
+        height: @logo-size;
+        float: left;
+        padding: @padding 10px;
+        svg {
+            .size(100%);
+            fill: #fff;
+        }
+        transition: 0.3s ease-in-out;
+        &:hover {
+            transform: rotate(90deg);
+            .mt(-2px);
+        }
+    }
+    .u-txt {
+        .db;
+        color: #fff;
+        font-family: Consolas;
+        font-size: 20px;
+        line-height: @logo-size;
+        padding: @padding 0;
+        transition: 0.15s ease-in-out;
+        margin-right: 10px;
+    }
+}
+@media screen and (max-width: @phone) {
+    .c-header-logo {
+        padding-right: 0;
+        .u-pic {
+            margin: 0;
+        }
+        .u-txt {
+            display: none;
+        }
+        margin-right: 0;
+    }
+}
+</style>