@jx3box/jx3box-ui 2.0.2 → 2.0.4

package/src/header/box2.vue

@@ -16,12 +16,7 @@
                     </div>
                     <div class="u-search">
                         <i class="el-icon-search u-search-icon"></i>
-                        <input
-                            v-model.trim="searchQuery"
-                            class="u-search-input"
-                            type="text"
-                            placeholder="搜索应用"
-                        />
+                        <input v-model.trim="searchQuery" class="u-search-input" type="text" placeholder="搜索应用" />
                         <button v-if="searchQuery" class="u-search-clear" type="button" @click="searchQuery = ''">
                             <i class="el-icon-close"></i>
                         </button>
@@ -35,7 +30,7 @@
                                 <div class="u-icon-wrap">
                                     <img class="u-pic" svg-inline :src="homeicon" />
                                 </div>
-                                <span class="u-txt">首页</span>
+                                <span class="u-txt">{{ $jx3boxT("jx3boxUi.header.home", "首页") }}</span>
                             </a>
                         </li>
                         <li v-for="(item, i) in filteredList" :key="i">
@@ -46,6 +41,14 @@
                                 <span class="u-txt">{{ item.abbr }}</span>
                             </a>
                         </li>
+                        <li v-if="allMatched && filteredList.length > 0">
+                            <a class="u-item" href="/app">
+                                <div class="u-icon-wrap">
+                                    <img class="u-pic" svg-inline :src="allicon" />
+                                </div>
+                                <span class="u-txt">{{ $jx3boxT("jx3boxUi.header.all", "全部") }}</span>
+                            </a>
+                        </li>
                     </ul>
                     <div v-if="searchQuery && !homeMatched && filteredList.length === 0" class="u-empty">
                         未找到匹配应用
@@ -57,30 +60,44 @@
 </template>
 
 <script>
-import Bus from "./bus";
+import Bus from "../../utils/bus";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import i18nMixin from "../../i18n/mixin";
 import box from "../../assets/data/box.json";
 import { getMenu } from "../../service/header.js";
+import axios from "axios";
+import { flatten } from "lodash";
 
-const { __imgPath, __cdn } = JX3BOX;
+const { __cdn, __imgPath } = JX3BOX;
 
 export default {
     name: "Box2",
+    mixins: [i18nMixin],
     data: function () {
         return {
             status: false,
             searchQuery: "",
-            data: box,
+            data: [],
             client: location.href.includes("origin") ? "origin" : "std",
         };
     },
     computed: {
         homeicon: function () {
-            return __imgPath + "image/box/home.svg";
+            return this.getBoxIcon("home.svg");
+        },
+        allicon: function () {
+            return this.getBoxIcon("more.svg");
         },
         list: function () {
             return this.data.filter((item) => {
-                return item.status && (item.client == this.client || item.client == "all");
+                const currentClient = String(this.client || "").toLowerCase();
+                const rawClient = item.client;
+                const matchedClient = !rawClient
+                    ? true
+                    : Array.isArray(rawClient)
+                    ? rawClient.map((c) => String(c || "").toLowerCase()).includes(currentClient)
+                    : String(rawClient || "").toLowerCase().includes(currentClient);
+                return matchedClient;
             });
         },
         filteredList: function () {
@@ -98,7 +115,12 @@ export default {
         homeMatched: function () {
             const query = (this.searchQuery || "").toLowerCase().trim();
             if (!query) return true;
-            return "首页".includes(query);
+            return this.$jx3boxT("jx3boxUi.header.home", "首页").includes(query);
+        },
+        allMatched: function () {
+            const query = (this.searchQuery || "").toLowerCase().trim();
+            if (!query) return true;
+            return this.$jx3boxT("jx3boxUi.header.all", "全部").includes(query);
         },
     },
     methods: {
@@ -138,18 +160,26 @@ export default {
         },
         loadMenu() {
             try {
-                const _box = JSON.parse(sessionStorage.getItem("box"));
-                if (_box) {
-                    this.data = _box;
+                const data = JSON.parse(sessionStorage.getItem("box"));
+                if (data) {
+                    this.data = data;
                 } else {
-                    getMenu("box").then((res) => {
-                        this.data = res.data?.data?.val;
+                    axios.get(__imgPath + "logo/app.json").then((res) => {
+                        const _data = flatten(Object.values(res.data || {}));
+                        this.data = _data.map((item) => ({
+                            img: item.key + ".svg",
+                            uuid: item.key,
+                            abbr: item.label,
+                            href: item.link,
+                            client: item.client || ["std", "origin"],
+                        }));
+
+                        if (!this.data.length) this.data = box;
                         sessionStorage.setItem("box", JSON.stringify(this.data));
                     });
                 }
             } catch (e) {
                 this.data = box;
-                console.log("loadBox2 error", e);
             }
         },
         onEsc(e) {
@@ -169,12 +199,12 @@ export default {
                 this.status = !!status;
             }
         };
-        Bus.$on("toggleBox", this.__toggleHandler);
+        Bus.on("toggleBox", this.__toggleHandler);
         window.addEventListener("keydown", this.onEsc);
     },
     beforeUnmount() {
         if (this.__toggleHandler) {
-            Bus.$off("toggleBox", this.__toggleHandler);
+            Bus.off("toggleBox", this.__toggleHandler);
             this.__toggleHandler = null;
         }
         window.removeEventListener("keydown", this.onEsc);
@@ -188,7 +218,7 @@ export default {
 };
 </script>
 
-<style scoped lang="less">
+<style lang="less">
 .c-jx3box2-mask {
     position: fixed;
     left: 0;
@@ -204,6 +234,32 @@ export default {
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
 }
+@media screen and (max-width: @phone) {
+    .c-jx3box2-mask {
+        display: none;
+    }
+}
+
+.box2-fade-enter-active,
+.box2-fade-leave-active {
+    transition: opacity 0.25s ease;
+}
+
+.box2-fade-enter-active .c-jx3box2,
+.box2-fade-leave-active .c-jx3box2 {
+    transition: transform 0.25s ease, opacity 0.25s ease;
+}
+
+.box2-fade-enter-from,
+.box2-fade-leave-to {
+    opacity: 0;
+}
+
+.box2-fade-enter-from .c-jx3box2,
+.box2-fade-leave-to .c-jx3box2 {
+    transform: translateY(16px) scale(0.96);
+    opacity: 0;
+}
 
 .c-jx3box2 {
     position: relative;
@@ -218,262 +274,238 @@ export default {
     box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
 }
 
-.u-topline {
-    height: 6px;
-    width: 100%;
-    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
-}
-
-.u-head {
-    padding: 28px 32px 24px;
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-
-.u-title-wrap {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-}
-
-.u-logo {
-    width: 46px;
-    height: 46px;
-    border-radius: 14px;
-    background: #fff;
-    color: #fff;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.38);
-}
-
-.u-title {
-    margin: 0;
-    color: #fff;
-    font-size: 28px;
-    line-height: 1.1;
-    font-weight: 800;
-}
-
-.u-subtitle {
-    margin: 6px 0 0;
-    color: #60a5fa;
-    font-size: 10px;
-    letter-spacing: 0.26em;
-    font-weight: 700;
-}
+.c-jx3box2 {
+    .u-topline {
+        height: 6px;
+        width: 100%;
+        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
+    }
 
-.u-search {
-    width: min(460px, 100%);
-    margin-left: auto;
-    position: relative;
-}
+    .u-head {
+        padding: 28px 32px 24px;
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
 
-.u-search-input {
-    width: 100%;
-    height: 48px;
-    border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    background: rgba(0, 0, 0, 0.3);
-    color: #fff;
-    outline: none;
-    padding: 0 40px 0 40px;
-    box-sizing: border-box;
-    transition: all 0.2s ease;
-}
+    .u-title-wrap {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+    }
 
-.u-search-input::placeholder {
-    color: #6b7280;
-}
+    .u-logo {
+        width: 46px;
+        height: 46px;
+        border-radius: 14px;
+        background: #fff;
+        color: #fff;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.38);
+        padding:5px;
+    }
 
-.u-search-input:focus {
-    border-color: rgba(59, 130, 246, 0.5);
-    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
-}
+    .u-title {
+        margin: 0;
+        color: #fff;
+        font-size: 28px;
+        line-height: 1.1;
+        font-weight: 800;
+    }
 
-.u-search-icon {
-    position: absolute;
-    left: 14px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #6b7280;
-    font-size: 16px;
-}
+    .u-subtitle {
+        margin: 6px 0 0;
+        color: #60a5fa;
+        font-size: 10px;
+        letter-spacing: 0.26em;
+        font-weight: 700;
+    }
 
-.u-search-clear {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    border: 0;
-    background: transparent;
-    color: #798192;
-    cursor: pointer;
-}
+    .u-search {
+        width: min(460px, 100%);
+        margin-left: auto;
+        position: relative;
+    }
 
-.u-search-clear:hover {
-    color: #fff;
-}
+    .u-search-input {
+        width: 100%;
+        height: 48px;
+        border-radius: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        background: rgba(0, 0, 0, 0.3);
+        color: #fff;
+        outline: none;
+        padding: 0 40px 0 40px;
+        box-sizing: border-box;
+        transition: all 0.2s ease;
+    }
 
-.u-body {
-    padding: 4px 32px 24px;
-    flex: 1;
-    min-height: 360px;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-}
+    .u-search-input::placeholder {
+        color: #6b7280;
+    }
 
-.u-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: grid;
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-    gap: 14px;
-    align-content: start;
-}
+    .u-search-input:focus {
+        border-color: rgba(59, 130, 246, 0.5);
+        box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
+    }
 
-.u-item {
-    height: 116px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: 22px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.07);
-    text-decoration: none;
-    transition: all 0.25s ease;
-}
+    .u-search-icon {
+        position: absolute;
+        left: 14px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #6b7280;
+        font-size: 16px;
+    }
 
-.u-item:hover {
-    transform: translateY(-4px);
-    border-color: rgba(59, 130, 246, 0.5);
-    background: rgba(59, 130, 246, 0.12);
-    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.55), 0 0 16px rgba(59, 130, 246, 0.2);
-}
+    .u-search-clear {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 0;
+        background: transparent;
+        color: #798192;
+        cursor: pointer;
+    }
 
-.u-icon-wrap {
-    width: 54px;
-    height: 54px;
-    border-radius: 14px;
-    background: rgba(255, 255, 255, 0.05);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.25s ease;
-}
+    .u-search-clear:hover {
+        color: #fff;
+    }
 
-.u-item:hover .u-icon-wrap {
-    background: rgba(37, 99, 235, 0.18);
-}
+    .u-body {
+        padding: 4px 32px 24px;
+        flex: 1;
+        min-height: 360px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+    }
 
-.u-pic {
-    width: 30px;
-    height: 30px;
-    object-fit: contain;
-}
+    .u-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: grid;
+        grid-template-columns: repeat(8, minmax(0, 1fr));
+        gap: 14px;
+        align-content: start;
+    }
 
-.u-txt {
-    margin-top: 10px;
-    font-size: 12px;
-    color: #a8b0be;
-    line-height: 1.2;
-}
+    .u-item {
+        height: 116px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border-radius: 22px;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.07);
+        text-decoration: none;
+        transition: all 0.25s ease;
+    }
 
-.u-item:hover .u-txt {
-    color: #fff;
-}
+    .u-item:hover {
+        transform: translateY(-4px);
+        border-color: rgba(59, 130, 246, 0.5);
+        background: rgba(59, 130, 246, 0.12);
+        box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.55), 0 0 16px rgba(59, 130, 246, 0.2);
+    }
 
-.u-empty {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #8b95a7;
-    font-size: 13px;
-}
+    .u-icon-wrap {
+        width: 54px;
+        height: 54px;
+        border-radius: 14px;
+        background: rgba(255, 255, 255, 0.05);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.25s ease;
+    }
 
-.u-foot {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 14px 32px;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
-    background: rgba(0, 0, 0, 0.24);
-}
+    .u-item:hover .u-icon-wrap {
+        background: rgba(37, 99, 235, 0.18);
+    }
 
-.u-foot-left {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 10px;
-    letter-spacing: 0.2em;
-    color: #9ba3b2;
-    font-weight: 600;
-}
+    .u-pic {
+        width: 30px;
+        height: 30px;
+        object-fit: contain;
+    }
 
-.u-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #3b82f6;
-}
+    .u-txt {
+        margin-top: 10px;
+        font-size: 12px;
+        color: #a8b0be;
+        line-height: 1.2;
+    }
 
-.u-close {
-    border: 0;
-    background: transparent;
-    color: #9ba3b2;
-    font-size: 11px;
-    letter-spacing: 0.12em;
-    cursor: pointer;
-}
+    .u-item:hover .u-txt {
+        color: #fff;
+    }
 
-.u-close:hover {
-    color: #fff;
-}
+    .u-empty {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #8b95a7;
+        font-size: 13px;
+    }
 
-.box2-fade-enter-active,
-.box2-fade-leave-active {
-    transition: opacity 0.25s ease;
-}
+    .u-foot {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 32px;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+        background: rgba(0, 0, 0, 0.24);
+    }
 
-.box2-fade-enter-active .c-jx3box2,
-.box2-fade-leave-active .c-jx3box2 {
-    transition: transform 0.25s ease, opacity 0.25s ease;
-}
+    .u-foot-left {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 10px;
+        letter-spacing: 0.2em;
+        color: #9ba3b2;
+        font-weight: 600;
+    }
 
-.box2-fade-enter-from,
-.box2-fade-leave-to {
-    opacity: 0;
-}
+    .u-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #3b82f6;
+    }
 
-.box2-fade-enter-from .c-jx3box2,
-.box2-fade-leave-to .c-jx3box2 {
-    transform: translateY(16px) scale(0.96);
-    opacity: 0;
-}
+    .u-close {
+        border: 0;
+        background: transparent;
+        color: #9ba3b2;
+        font-size: 11px;
+        letter-spacing: 0.12em;
+        cursor: pointer;
+    }
 
-@media screen and (max-width: 1200px) {
-    .u-list {
-        grid-template-columns: repeat(6, minmax(0, 1fr));
+    .u-close:hover {
+        color: #fff;
     }
-}
 
-@media screen and (max-width: 992px) {
-    .u-list {
-        grid-template-columns: repeat(5, minmax(0, 1fr));
+    @media screen and (max-width: 1200px) {
+        .u-list {
+            grid-template-columns: repeat(6, minmax(0, 1fr));
+        }
     }
-}
 
-@media screen and (max-width: @phone) {
-    .c-jx3box2-mask {
-        display: none;
+    @media screen and (max-width: 992px) {
+        .u-list {
+            grid-template-columns: repeat(5, minmax(0, 1fr));
+        }
     }
 }
 </style>

package/src/header/client.vue

@@ -107,7 +107,12 @@ export default {
         // Jx3Icon,
         // OriginIcon,
     },
-    props: ["defaultValue"],
+    props: {
+        defaultValue: {
+            type: String,
+            default: "",
+        },
+    },
     data: function () {
         return {
             activeKey: this.defaultValue || (location.host.includes("origin") ? "origin" : "std"),

package/src/header/lang.vue

@@ -1,7 +1,6 @@
 <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
@@ -86,7 +85,7 @@ export default {
             if (!normalized) return;
 
             const ok = setJx3boxUiLocale(normalized);
-            if (!ok) location.reload();
+            if (ok) location.reload();
         },
     },
 };