@jx3box/jx3box-common-ui 7.7.2 → 7.7.4

package/assets/img/header/translator.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.2857 37H39.7143M42 42L39.7143 37L42 42ZM26 42L28.2857 37L26 42ZM28.2857 37L34 24L39.7143 37H28.2857Z" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 6L17 9" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 11H28" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 16C10 16 11.7895 22.2609 16.2632 25.7391C20.7368 29.2174 28 32 28 32" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 11C24 11 22.2105 19.2174 17.7368 23.7826C13.2632 28.3478 6 32 6 32" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/assets/js/utils.js

@@ -1,13 +1,13 @@
 import { Notification } from 'element-ui';
 // 复制
-export function copyText(text){
+export function copyText(text) {
     if (window.navigator.clipboard) {
-        window.navigator.clipboard.writeText(text).then(function() {
+        window.navigator.clipboard.writeText(text).then(function () {
             Notification.success({
                 title: '复制成功',
             });
             console.log('Async: Copying to clipboard was successful!');
-        }, function(err) {
+        }, function (err) {
             console.error('Async: Could not copy text: ', err);
         });
     } else {
@@ -28,6 +28,23 @@ export function copyText(text){
 }
 
 // 去除最后的/
-export function trimSlash (str) {
+export function trimSlash(str) {
     return str.replace(/\/$/, "");
 }
+
+// 监听 localStorage 的改变
+export function dispatchEventStorage() {
+    const _setItem = localStorage.setItem
+
+    localStorage.setItem = function (key, val) {
+        // 注册一个名称为 setItemEvent 的事件
+        let setEvent = new Event('setItemEvent')
+        // key 为改变的 key， newVal 为改变的 value
+        setEvent.key = key
+        setEvent.newVal = val
+
+        window.dispatchEvent(setEvent)
+
+        _setItem.apply(this, arguments)
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "7.7.2",
+  "version": "7.7.4",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {

package/src/Box.vue

@@ -11,7 +11,7 @@
                     href="/index"
                     v-reporter="{
                         data: {
-                            item: '/index',
+                            item: `${prefix}:/index`,
                         },
                         caller: 'index_nav_matrix',
                     }"
@@ -80,6 +80,9 @@ export default {
                 return item.status && (item.client == this.client || item.client == "all");
             });
         },
+        prefix: function (){
+            return this.client === 'std' ? 'www' : 'origin';
+        }
     },
     methods: {
         closeBox: function () {
@@ -114,7 +117,9 @@ export default {
                 console.log("loadBox error", e);
             }
         },
-        trimSlash,
+        trimSlash(link) {
+            return trimSlash(`${this.prefix}:${link}`);
+        },
     },
     created: function () {
         if (this.overlayEnable) {

package/src/Header.vue

@@ -32,7 +32,7 @@
 
 <script>
 import _ from "lodash";
-import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+// import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import { isApp, KW } from "../assets/js/app.js";
 
 import logo from "./header/logo.vue";
@@ -41,7 +41,7 @@ import search from "./header/search.vue";
 import nav from "./header/nav.vue";
 import user from "./header/user.vue";
 import Box from "../src/Box.vue";
-import gameSwitch from "./header/gameSwitch.vue";
+// import gameSwitch from "./header/gameSwitch.vue";
 
 export default {
     name: "Header",

package/src/header/langSwitch.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="c-header-panel c-lang-switcher" id="c-header-lang-switcher">
+        <span class="u-translator" href="/dashboard/boxcoin">
+            <img class="u-icon" src="../../assets/img/header/translator.svg" alt="" />
+        </span>
+        <ul class="u-menu u-pop-content">
+            <li
+                v-for="item in langs"
+                :key="item.key"
+                @click="onLangChange(item.key)"
+                :class="{ 'is-active': item.key === currentLang }"
+            >
+                <a>{{ item.name }}</a>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "langSwitch",
+    data() {
+        return {
+            langs: [
+                {
+                    name: "简体中文",
+                    key: "zh-cn",
+                    disabled: false,
+                },
+                {
+                    name: "繁体中文",
+                    key: "zh-tw",
+                    disabled: false,
+                },
+                {
+                    name: "Tiếng Việt",
+                    key: "vi",
+                    disabled: false,
+                },
+                {
+                    name: "English",
+                    key: "en-us",
+                    disabled: false,
+                },
+            ], // 语言列表 简体中文、繁体中文、英文、越南语
+            currentLang: "zh-cn", // 当前语言
+        };
+    },
+    mounted() {
+        const lang = localStorage.getItem("lang") || "zh-cn";
+        this.currentLang = lang;
+    },
+    methods: {
+        onLangChange(lang) {
+            localStorage.setItem("lang", lang);
+        },
+    },
+};
+</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: @primary;
+                font-weight: 600;
+            }
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .c-lang-switcher {
+        display: none;
+    }
+}
+</style>

package/src/header/nav.vue

@@ -164,6 +164,9 @@ export default {
         client() {
             return location.href.includes("origin") ? "origin" : "std";
         },
+        prefix() {
+            return this.client === 'std' ? 'www' : 'origin';
+        }
     },
     methods: {
         isFocus: function (type) {
@@ -193,7 +196,9 @@ export default {
                 console.log("loadNav error", e);
             }
         },
-        trimSlash,
+        trimSlash(link) {
+            return trimSlash(`${this.prefix}:${link}`);
+        },
     },
     created: function () {
         this.loadNav();

package/src/header/shop.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="c-header-panel c-header-shop">
+        <el-tooltip effect="dark" content="积分商城" placement="bottom" popper-class="c-header-tooltip">
+            <a class="u-present" href="/vip/mall" target="_blank">
+                <i class="el-icon-present u-icon"></i>
+            </a>
+        </el-tooltip>
+    </div>
+</template>
+
+<style lang="less">
+.c-header-shop {
+    .u-present {
+        padding: 0 10px;
+        height: 100%;
+        .flex;
+        align-items: center;
+        &:hover {
+            .tm(0.7);
+        }
+    }
+    .u-icon {
+        font-size: 15px;
+        color: #fff;
+    }
+}
+</style>

package/src/header/user.vue

@@ -10,12 +10,18 @@
             <!-- vip -->
             <vip />
 
+            <!-- 商城 -->
+            <shop />
+
             <!-- 我的资产 -->
             <asset :asset="asset" />
 
             <!-- manage -->
             <manage />
 
+            <!-- 语言切换 -->
+            <lang-switch />
+
             <!-- user info -->
             <user-info :asset="asset" @logout="logout" />
         </template>
@@ -43,6 +49,8 @@ import vip from "./vip.vue"
 import asset from "./asset.vue"
 import manage from "./manage.vue"
 import userInfo from './userInfo.vue';
+import langSwitch from "./langSwitch.vue";
+import shop from "./shop.vue";
 export default {
     components: {
         message,
@@ -50,7 +58,9 @@ export default {
         vip,
         asset,
         manage,
-        userInfo
+        userInfo,
+        langSwitch,
+        shop
     },
     data: function () {
         return {