@jx3box/jx3box-ui 0.0.1

package/src/header/client.vue

@@ -0,0 +1,183 @@
+<template>
+    <div class="c-header-client relative h-full group">
+        <!-- 当前选择展示 (触发器) -->
+        <button type="button" class="u-trigger h-full px-4 flex items-center gap-2 transition-colors duration-200">
+            <div class="u-client--current">
+                <span class="text-sm font-medium text-gray-200">{{ currentGameLabel }}</span>
+                <svg
+                    class="w-3 h-3 text-gray-400 transition-transform duration-300 group-hover:rotate-180 group-focus-within:rotate-180"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.24 4.5a.75.75 0 0 1-1.08 0l-4.24-4.5a.75.75 0 0 1 .02-1.06Z"
+                        clip-rule="evenodd"
+                    />
+                </svg>
+            </div>
+        </button>
+
+        <!-- 下拉菜单内容 -->
+        <div
+            class="absolute top-full left-0 w-56 bg-[#242424] border border-gray-700 rounded-b-lg shadow-2xl py-2 overflow-hidden z-50 transition duration-200 ease-out origin-top opacity-0 -translate-y-2 invisible pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:visible group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:translate-y-0 group-focus-within:visible group-focus-within:pointer-events-auto"
+            role="menu"
+        >
+            <div class="px-3 py-2 text-[10px] text-gray-500 uppercase tracking-widest border-b border-gray-800 mb-1">
+                {{ $jx3boxT("jx3boxUi.header.chooseGameVersion", "选择游戏版本") }}
+            </div>
+
+            <!-- 剑网3 -->
+            <a
+                href="javascript:void(0)"
+                class="flex items-center justify-between px-4 py-3 hover:bg-indigo-600 transition-colors group/item"
+                role="menuitem"
+                @click.prevent="switchGame('std')"
+            >
+                <div class="flex items-center">
+                    <span class="mr-3 text-indigo-400 group-hover/item:text-white">
+                        <!-- <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path d="M4 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Z" />
+                            <path d="M4 13a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2Z" />
+                        </svg> -->
+                        <img
+                            class="w-4 h-4"
+                            svg-inline
+                            src="../../assets/img/common/jx3-www.svg"
+                            :alt="$jx3boxT('jx3boxUi.header.jx3Full', '剑网3 / 无界')"
+                        />
+                        <!-- <Jx3Icon class="w-4 h-4" /> -->
+                    </span>
+                    <div>
+                        <div class="text-sm font-bold text-gray-200 group-hover/item:text-white">
+                            {{ $jx3boxT("jx3boxUi.header.jx3Full", "剑网3 / 无界") }}
+                        </div>
+                        <div class="text-[10px] text-gray-500 group-hover/item:text-indigo-200">www.jx3box.com</div>
+                    </div>
+                </div>
+                <span class="h-2 w-2 bg-amber-400 rounded-full" :class="{ hidden: activeKey !== 'std' }"></span>
+            </a>
+
+            <!-- 缘起 -->
+            <a
+                href="javascript:void(0)"
+                class="flex items-center justify-between px-4 py-3 hover:bg-indigo-600 transition-colors group/item"
+                role="menuitem"
+                @click.prevent="switchGame('origin')"
+            >
+                <div class="flex items-center">
+                    <span class="mr-3 text-amber-400 group-hover/item:text-white">
+                        <!-- <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path
+                                fill-rule="evenodd"
+                                d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-12.25a.75.75 0 0 0-1.5 0V10c0 .2.08.39.22.53l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.28-2.28V5.75Z"
+                                clip-rule="evenodd"
+                            />
+                        </svg> -->
+                        <img
+                            class="w-4 h-4"
+                            svg-inline
+                            src="../../assets/img/common/jx3-origin.svg"
+                            :alt="$jx3boxT('jx3boxUi.header.originFull', '剑网3·缘起')"
+                        />
+                        <!-- <OriginIcon class="w-4 h-4" /> -->
+                    </span>
+                    <div>
+                        <div class="text-sm font-bold text-gray-200 group-hover/item:text-white">
+                            {{ $jx3boxT("jx3boxUi.header.originFull", "剑网3·缘起") }}
+                        </div>
+                        <div class="text-[10px] text-gray-500 group-hover/item:text-indigo-200">origin.jx3box.com</div>
+                    </div>
+                </div>
+                <span class="h-2 w-2 bg-amber-400 rounded-full" :class="{ hidden: activeKey !== 'origin' }"></span>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+// import Jx3Icon from "@/assets/img/components/common/header/jx3-www.svg";
+// import OriginIcon from "@/assets/img/components/common/header/jx3-origin.svg";
+import i18nMixin from "../../i18n/mixin";
+export default {
+    name: "clientSwitch",
+    mixins: [i18nMixin],
+    components: {
+        // Jx3Icon,
+        // OriginIcon,
+    },
+    props: ["defaultValue"],
+    data: function () {
+        return {
+            activeKey: this.defaultValue || (location.host.includes("origin") ? "origin" : "std"),
+        };
+    },
+    computed: {
+        currentGameLabel: function () {
+            return this.activeKey === "origin"
+                ? this.$jx3boxT("jx3boxUi.header.originShort", "缘起")
+                : this.$jx3boxT("jx3boxUi.header.jx3Short", "剑网3");
+        },
+    },
+    watch: {
+        defaultValue: function (val) {
+            if (val) this.activeKey = val;
+        },
+    },
+    methods: {
+        switchGame: function (target) {
+            if (!target || (target !== "std" && target !== "origin")) return;
+
+            const currentPath = window.location.pathname;
+            const currentSearch = window.location.search;
+            const currentHash = window.location.hash;
+            const protocol = window.location.protocol;
+
+            const targetHost = target === "std" ? "www.jx3box.com" : "origin.jx3box.com";
+            const finalUrl = protocol + "//" + targetHost + currentPath + currentSearch + currentHash;
+
+            this.activeKey = target;
+            window.location.href = finalUrl;
+        },
+    },
+    mounted: function () {},
+};
+</script>
+
+<style lang="less">
+.c-header-client {
+    .u-trigger {
+        .pr;
+    }
+    &:hover {
+        .u-trigger::after {
+            content: "";
+            .db;
+            .pa;
+            .lb(0);
+            .w(90px);
+            .h(2px);
+            background-color: #e19f3a;
+        }
+    }
+    height: @header-height;
+    * {
+        .pointer;
+    }
+
+    .u-client--current {
+        background-color: @v4primary500;
+        .r(4px);
+        padding: 2px 5px;
+        .flex(y);
+
+        span {
+            color: #fff !important;
+        }
+        svg {
+            fill: #fff !important;
+        }
+    }
+}
+</style>

package/src/header/lang.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="c-header-panel c-lang-switcher" id="c-header-lang-switcher">
+        <span class="u-translator" href="/dashboard/boxcoin">
+            <!-- <langIcon class="u-icon" /> -->
+            <img
+                class="u-icon"
+                svg-inline
+                src="../../assets/img/common/lang.svg"
+                :alt="$jx3boxT('jx3boxUi.header.langSwitch', '语言切换')"
+            />
+        </span>
+        <ul class="u-menu u-pop-content">
+            <li
+                v-for="item in langs"
+                :key="item.key"
+                @click="onLangChange(item)"
+                :class="{ 'is-active': item.key === currentLang, 'is-disabled': item.disabled }"
+            >
+                <a>{{ item.name }}</a>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+// import langIcon from "@/assets/img/components/common/header/lang.svg";
+import { getJx3boxUiAvailableLocales, setJx3boxUiLocale } from "../../i18n";
+import i18nMixin from "../../i18n/mixin";
+
+function normalizeLocaleKey(key) {
+    if (!key) return null;
+    const lower = String(key).toLowerCase();
+    if (lower === "zh-cn") return "zh-CN";
+    if (lower === "en-us") return "en-US";
+    if (lower === "zh-tw") return "zh-TW";
+    return key;
+}
+
+export default {
+    name: "langSwitch",
+    mixins: [i18nMixin],
+    components: {
+        // langIcon,
+    },
+    data() {
+        const supported = getJx3boxUiAvailableLocales();
+        return {
+            langs: [
+                {
+                    name: "简体中文",
+                    key: "zh-cn",
+                    disabled: !supported.includes("zh-CN"),
+                },
+                {
+                    name: "繁体中文",
+                    key: "zh-tw",
+                    disabled: !supported.includes("zh-TW"),
+                },
+                {
+                    name: "Tiếng Việt",
+                    key: "vi",
+                    disabled: !supported.includes("vi"),
+                },
+                {
+                    name: "English",
+                    key: "en-us",
+                    disabled: !supported.includes("en-US"),
+                },
+            ], // 语言列表 简体中文、繁体中文、英文、越南语
+            currentLang: "zh-cn", // 当前语言
+        };
+    },
+    mounted() {
+        const lang = localStorage.getItem("lang") || "zh-cn";
+        this.currentLang = lang;
+        const normalized = normalizeLocaleKey(lang);
+        normalized && setJx3boxUiLocale(normalized);
+    },
+    methods: {
+        onLangChange({ disabled, key }) {
+            if (disabled) return;
+            localStorage.setItem("lang", key);
+            this.currentLang = key;
+
+            const normalized = normalizeLocaleKey(key);
+            if (!normalized) return;
+
+            const ok = setJx3boxUiLocale(normalized);
+            if (!ok) location.reload();
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-lang-switcher {
+    .u-translator {
+        padding: 0 10px;
+        width: 14;
+        height: 100%;
+        .flex;
+        align-items: center;
+        .pointer;
+        &:hover {
+            .tm(0.7);
+        }
+    }
+    .u-icon {
+        .size(19px);
+    }
+    li {
+        &.is-active {
+            a {
+                color: @v4primary;
+                font-weight: 600;
+            }
+        }
+        &.is-disabled {
+            a {
+                color: #999;
+                cursor: not-allowed;
+            }
+            &:hover a {
+                // .tm(0);
+                background-color: #fff;
+                color: #999;
+            }
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .c-lang-switcher {
+        display: none;
+    }
+}
+</style>

package/src/header/logo.vue

@@ -0,0 +1,95 @@
+<template>
+    <div
+        class="c-header-logo"
+        @click="toggleBox($event)"
+        :title="$jx3boxT('jx3boxUi.header.expandBoxMatrix', '点击展开魔盒矩阵')"
+    >
+        <i class="u-pic" id="c-header-logo">
+            <img svg-inline src="../../assets/img/common/logo.svg" alt="JX3BOX" />
+        </i>
+        <span class="u-txt" :class="{ on: isIndex }" href="/">{{ $jx3boxT("jx3boxUi.header.box", "魔盒") }}</span>
+    </div>
+</template>
+
+<script>
+// import { useLayoutStore } from "@/store/layout";
+import i18nMixin from "../../i18n/mixin";
+import Bus from "./bus";
+
+export default {
+    name: "c-header-logo",
+    mixins: [i18nMixin],
+    components: {
+        // Logo,
+    },
+    props: [],
+    data: function () {
+        return {
+            isIndex: /\/index\/?/.test(location.pathname),
+        };
+    },
+    computed: {},
+    methods: {
+        // TODO: 主页和魔盒矩阵的切换
+        // 盒子
+        toggleBox: function (e) {
+            e.stopPropagation();
+            Bus.$emit("toggleBox");
+        },
+    },
+    mounted: function () {},
+};
+</script>
+
+<style lang="less">
+//logo
+.c-header-logo {
+    .pointer;
+    user-select: none;
+    display: inline-flex;
+    flex-shrink: 0;
+    flex-grow: 0;
+    align-items: center;
+    height: @header-height;
+    padding: 0 0 0 10px;
+
+    @padding: ((@header-height - @header-logo-size) / 2);
+
+    .u-pic {
+        .db;
+        width: @header-logo-size;
+        height: @header-logo-size;
+        float: left;
+        svg {
+            .size(100%);
+            fill: #fff;
+        }
+        transition: 0.3s ease-in-out;
+    }
+    .u-txt {
+        .db;
+        color: #fff;
+        font-size: 20px;
+        font-weight: 600;
+        line-height: @header-logo-size;
+        margin-left: 10px;
+        transition: 0.15s ease-in-out;
+    }
+
+    &:hover .u-pic {
+        transform: scale(1.1);
+    }
+}
+@media screen and (max-width: @phone) {
+    .c-header-logo {
+        padding-right: 0;
+        .u-pic {
+            margin: 0;
+        }
+        .u-txt {
+            display: none;
+        }
+        margin-right: 0;
+    }
+}
+</style>

package/src/header/manage.vue

@@ -0,0 +1,200 @@
+<template>
+    <div class="c-header-panel c-header-manage" id="c-header-manage">
+        <span class="u-post u-manage">
+            <i class="u-pop" style="display: none" v-show="showPop || !isAuth"></i>
+            <!-- <manageIcon class="u-add" /> -->
+            <img
+                class="u-add"
+                svg-inline
+                src="../../assets/img/common/manage.svg"
+                :alt="$jx3boxT('jx3boxUi.header.manageCenter', '扩展中心')"
+            />
+        </span>
+        <ul class="u-menu u-pop-content">
+            <template v-for="item in userPanel">
+                <li :key="item.label" v-if="item.remark == 'auth' ? !isAuth : true">
+                    <a :href="item.link" :target="item.target || '_self'" class="u-menu-item" @click="onClick(item)">
+                        <img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
+                        {{ getPanelLabel(item) }}
+                        <span v-if="showPop" class="u-new">New!</span>
+                        <span v-if="item.remark == 'auth' && !isAuth" class="u-new">New!</span>
+                    </a>
+                </li>
+            </template>
+            <template v-if="isTeammate">
+                <hr v-if="adminPanel.length" />
+                <li v-for="item in adminPanel" :key="item.label">
+                    <a :href="item.link" :target="item.target || '_self'" class="u-menu-item">
+                        <img :src="resolveImg(item.icon)" class="u-menu-icon" :alt="item.icon" />
+                        {{ getPanelLabel(item) }}
+                    </a>
+                </li>
+            </template>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { getMenu } from "../../service/header";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import User from "@jx3box/jx3box-common/js/user";
+import i18nMixin from "../../i18n/mixin";
+// import manageIcon from "@/assets/img/components/common/header/manage.svg";
+const { __imgPath } = JX3BOX;
+const defaultPanel = [
+    {
+        key: "manageCenter",
+        label: "管理中心",
+        link: "/os",
+        onlyAdmin: true,
+    },
+];
+export default {
+    name: "Manage",
+    mixins: [i18nMixin],
+    components: {
+        // manageIcon,
+    },
+    data() {
+        return {
+            panel: defaultPanel,
+            showPop: false,
+        };
+    },
+    props: {
+        isTeammate: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        userPanel: function () {
+            return this.panel.filter((item) => {
+                return !item.onlyAdmin;
+            });
+        },
+        adminPanel: function () {
+            return this.panel.filter((item) => {
+                return item.onlyAdmin;
+            });
+        },
+        isAuth() {
+            return User.isPhoneMember();
+        },
+    },
+    mounted() {
+        this.loadPanel();
+    },
+    methods: {
+        getPanelLabel(item) {
+            if (item?.key) return this.$jx3boxT(`jx3boxUi.header.panel.${item.key}`, item.label || item.key);
+            return item?.label || "";
+        },
+        loadPanel: function () {
+            try {
+                const panel = JSON.parse(sessionStorage.getItem("panel"));
+                if (panel) {
+                    this.panel = panel;
+                    const item = this.panel?.find((i) => i.meta);
+                    this.initMeta(item);
+                } else {
+                    getMenu("panel").then((res) => {
+                        this.panel = res.data?.data?.val;
+                        const item = this.panel?.find((i) => i.meta);
+                        this.initMeta(item);
+                        sessionStorage.setItem("panel", JSON.stringify(this.panel));
+                    });
+                }
+            } catch (e) {
+                this.panel = defaultPanel;
+                console.log("loadPanel error", e);
+            }
+        },
+        resolveImg: function (img) {
+            return img ? __imgPath + "image/header/panel/" + img : __imgPath + "image/header/panel/default.svg";
+        },
+        initMeta(item) {
+            const local = localStorage.getItem("jb_panel_meta");
+
+            if (local) {
+                this.showPop = item?.meta && item?.meta != local;
+            } else {
+                localStorage.setItem("jb_panel_meta", item?.meta);
+                this.showPop = true;
+            }
+        },
+        onClick(item) {
+            if (item.meta) {
+                localStorage.setItem("jb_panel_meta", item.meta);
+                this.showPop = false;
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less">
+// 管理菜单
+.c-header-manage {
+    height: 100%;
+
+    .u-manage {
+        padding: 0 10px 0 8px;
+        height: 100%;
+        .flex;
+        align-items: center;
+    }
+    .u-menu {
+        .u-menu-item {
+            .flex;
+            align-items: center;
+            gap: 4px;
+            font-weight: 500;
+
+            &:hover {
+                .u-menu-icon {
+                    filter: invert(100%) sepia(0%) saturate(5658%) hue-rotate(215deg) brightness(114%) contrast(106%);
+                }
+                .u-new {
+                    color: #fff;
+                }
+            }
+        }
+        .u-menu-icon {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    hr {
+        border: 0;
+        border-top: 1px solid #eee;
+    }
+
+    .u-icon-msg {
+        .pr;
+    }
+
+    .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: 4px;
+        top: 18px;
+        z-index: 1;
+    }
+
+    .u-new {
+        font-size: 12px;
+        margin-left: 4px;
+        background-color: @v4primary-dark;
+        color: #fff;
+        padding: 0px 6px;
+    }
+}
+</style>