@jx3box/jx3box-ui 2.4.2 → 2.4.4

package/src/header/box2.vue

@@ -1,36 +1,10 @@
 <template>
     <transition name="box2-fade">
-        <div v-if="status" class="c-jx3box2-mask" @click="closeBox">
+        <div v-if="status" class="c-jx3box2-mask">
             <section class="c-jx3box2" @click.stop>
-                <div class="u-topline"></div>
-
-                <div class="u-head">
-                    <div class="u-title-wrap">
-                        <div class="u-logo">
-                            <img svg-inline src="../../assets/img/common/logo.svg" alt="JX3BOX" />
-                        </div>
-                        <div>
-                            <h2 class="u-title">{{ $jx3boxT("jx3boxUi.box2.title", "魔盒矩阵") }}</h2>
-                            <p class="u-subtitle">THE BOX MATRIX NAVIGATION</p>
-                        </div>
-                    </div>
-                    <div class="u-search">
-                        <el-icon class="u-search-icon"><Search></Search></el-icon>
-                        <input
-                            v-model.trim="searchQuery"
-                            class="u-search-input"
-                            type="text"
-                            :placeholder="$jx3boxT('jx3boxUi.box2.searchPlaceholder', '搜索应用')"
-                        />
-                        <button v-if="searchQuery" class="u-search-clear" type="button" @click="searchQuery = ''">
-                            <el-icon><Close /></el-icon>
-                        </button>
-                    </div>
-                </div>
-
                 <div class="u-body">
                     <ul class="u-list">
-                        <li v-if="homeMatched">
+                        <li>
                             <a class="u-item" href="/index">
                                 <div class="u-icon-wrap">
                                     <img class="u-pic" svg-inline :src="homeicon" />
@@ -38,7 +12,7 @@
                                 <span class="u-txt">{{ $jx3boxT("jx3boxUi.commonHeader.home", "首页") }}</span>
                             </a>
                         </li>
-                        <li v-for="(item, i) in filteredList" :key="i">
+                        <li v-for="(item, i) in list" :key="i">
                             <a class="u-item" :href="item.href" :target="getTarget(item.href)">
                                 <div class="u-icon-wrap">
                                     <img class="u-pic" :src="getBoxIcon(item.img)" />
@@ -46,7 +20,7 @@
                                 <span class="u-txt">{{ item.abbr }}</span>
                             </a>
                         </li>
-                        <li v-if="allMatched && filteredList.length > 0">
+                        <li v-if="list.length > 0">
                             <a class="u-item" href="/app">
                                 <div class="u-icon-wrap">
                                     <img class="u-pic" svg-inline :src="allicon" />
@@ -55,9 +29,12 @@
                             </a>
                         </li>
                     </ul>
-                    <div v-if="searchQuery && !homeMatched && filteredList.length === 0" class="u-empty">
-                        {{ $jx3boxT("jx3boxUi.box2.empty", "未找到匹配应用") }}
-                    </div>
+                </div>
+                <div class="u-actions">
+                    <button class="u-collapse" type="button" @click="closeBox">
+                        <el-icon><Upload /></el-icon>
+                        <span>{{ $jx3boxT("jx3boxUi.commonHeader.collapse", "收起") }}</span>
+                    </button>
                 </div>
             </section>
         </div>
@@ -69,11 +46,9 @@ 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";
+import { loadBoxMenu } from "./box-menu";
 
-const { __cdn, __imgPath } = JX3BOX;
+const { __cdn } = JX3BOX;
 
 export default {
     name: "Box2",
@@ -81,7 +56,6 @@ export default {
     data: function () {
         return {
             status: false,
-            searchQuery: "",
             data: [],
             client: location.href.includes("origin") ? "origin" : "std",
         };
@@ -110,50 +84,8 @@ export default {
                 return matchedClient;
             });
         },
-        filteredList: function () {
-            const query = (this.searchQuery || "").toLowerCase();
-            if (!query) return this.list;
-
-            const compactQuery = query.replace(/\s+/g, "");
-            return this.list.filter((item) => {
-                const abbr = String(item.abbr || "").toLowerCase();
-                const abbrCompact = abbr.replace(/\s+/g, "");
-                const uuid = String(item.uuid || "").toLowerCase();
-                return abbr.includes(query) || abbrCompact.includes(compactQuery) || uuid.includes(query);
-            });
-        },
-        homeMatched: function () {
-            const query = (this.searchQuery || "").toLowerCase().trim();
-            if (!query) return true;
-            return this.$jx3boxT("jx3boxUi.commonHeader.home", "首页").includes(query);
-        },
-        allMatched: function () {
-            const query = (this.searchQuery || "").toLowerCase().trim();
-            if (!query) return true;
-            return this.$jx3boxT("jx3boxUi.commonHeader.all", "全部").includes(query);
-        },
     },
     methods: {
-        setPageScrollLock(locked) {
-            const docEl = document.documentElement;
-            const body = document.body;
-
-            if (locked) {
-                if (this.__prevHtmlOverflow === undefined) {
-                    this.__prevHtmlOverflow = docEl.style.overflow;
-                }
-                if (this.__prevBodyOverflow === undefined) {
-                    this.__prevBodyOverflow = body.style.overflow;
-                }
-                docEl.style.overflow = "hidden";
-                body.style.overflow = "hidden";
-            } else {
-                docEl.style.overflow = this.__prevHtmlOverflow ?? "";
-                body.style.overflow = this.__prevBodyOverflow ?? "";
-                this.__prevHtmlOverflow = undefined;
-                this.__prevBodyOverflow = undefined;
-            }
-        },
         closeBox() {
             this.status = false;
         },
@@ -169,28 +101,9 @@ export default {
             }
         },
         loadMenu() {
-            try {
-                const data = JSON.parse(sessionStorage.getItem("box"));
-                if (data) {
-                    this.data = data;
-                } else {
-                    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;
-            }
+            loadBoxMenu(box).then((data) => {
+                this.data = data;
+            });
         },
         onEsc(e) {
             if (e.key === "Escape") {
@@ -210,6 +123,8 @@ export default {
             }
         };
         Bus.on("toggleBox", this.__toggleHandler);
+        this.__docClickHandler = () => this.closeBox();
+        document.addEventListener("click", this.__docClickHandler);
         window.addEventListener("keydown", this.onEsc);
     },
     beforeUnmount() {
@@ -217,13 +132,11 @@ export default {
             Bus.off("toggleBox", this.__toggleHandler);
             this.__toggleHandler = null;
         }
+        if (this.__docClickHandler) {
+            document.removeEventListener("click", this.__docClickHandler);
+            this.__docClickHandler = null;
+        }
         window.removeEventListener("keydown", this.onEsc);
-        this.setPageScrollLock(false);
-    },
-    watch: {
-        status(val) {
-            this.setPageScrollLock(!!val);
-        },
     },
 };
 </script>
@@ -233,17 +146,13 @@ export default {
 .c-jx3box2-mask {
     position: fixed;
     left: 0;
-    top: 0;
-    z-index: 1200;
-    width: 100vw;
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-    background: rgba(0, 0, 0, 0.72);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    top: @header-height;
+    z-index: 800;
+    width: 100%;
+    max-height: calc(100vh - @header-height);
+    overflow: hidden;
+    background: rgba(21, 25, 35, 0.98);
+    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
 }
 @media screen and (max-width: @phone) {
     .c-jx3box2-mask {
@@ -253,147 +162,33 @@ export default {
 
 .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;
+    transition: opacity 0.2s ease, transform 0.2s 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;
+    transform: translateY(-12px);
 }
 
 .c-jx3box2 {
     position: relative;
-    width: min(1120px, calc(100vw - 40px));
-    max-height: min(860px, calc(100vh - 40px));
+    width: 100%;
+    max-height: calc(100vh - @header-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    border-radius: 36px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(21, 25, 35, 0.9);
-    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
+    background: transparent;
 }
 
 .c-jx3box2 {
-    .u-topline {
-        height: 6px;
+    .u-body {
         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);
-        padding:5px;
-    }
-
-    .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;
-    }
-
-    .u-search {
-        width: min(460px, 100%);
-        margin-left: auto;
-        position: relative;
-        .flex;
-        align-items: center;
-    }
-
-    .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-search-input::placeholder {
-        color: #6b7280;
-    }
-
-    .u-search-input:focus {
-        border-color: rgba(59, 130, 246, 0.5);
-        box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
-    }
-
-    .u-search-icon {
-        position: absolute;
-        left: 14px;
-        top: 50%;
-        transform: translateY(-50%);
-        color: #6b7280;
-        font-size: 16px;
-    }
-
-    .u-search-clear {
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        border: 0;
-        background: transparent;
-        color: #798192;
-        cursor: pointer;
-    }
-
-    .u-search-clear:hover {
-        color: #fff;
-    }
-
-    .u-body {
-        padding: 4px 32px 24px;
+        padding: 16px 24px 22px;
         flex: 1;
-        min-height: 360px;
+        min-height: 0;
         display: flex;
         flex-direction: column;
         overflow-y: auto;
@@ -404,18 +199,18 @@ export default {
         padding: 0;
         list-style: none;
         display: grid;
-        grid-template-columns: repeat(8, minmax(0, 1fr));
-        gap: 14px;
+        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
+        gap: 10px;
         align-content: start;
     }
 
     .u-item {
-        height: 116px;
+        height: 88px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        border-radius: 22px;
+        border-radius: 12px;
         background: rgba(255, 255, 255, 0.03);
         border: 1px solid rgba(255, 255, 255, 0.07);
         text-decoration: none;
@@ -423,16 +218,16 @@ export default {
     }
 
     .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);
+        transform: translateY(-2px);
+        border-color: fade(@v4primary500, 50%);
+        background: fade(@v4primary500, 12%);
+        box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.55), 0 0 16px fade(@v4primary500, 20%);
     }
 
     .u-icon-wrap {
-        width: 54px;
-        height: 54px;
-        border-radius: 14px;
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
         background: rgba(255, 255, 255, 0.05);
         display: flex;
         align-items: center;
@@ -441,17 +236,17 @@ export default {
     }
 
     .u-item:hover .u-icon-wrap {
-        background: rgba(37, 99, 235, 0.18);
+        background: fade(@v4primary, 18%);
     }
 
     .u-pic {
-        width: 30px;
-        height: 30px;
+        width: 26px;
+        height: 26px;
         object-fit: contain;
     }
 
     .u-txt {
-        margin-top: 10px;
+        margin-top: 7px;
         font-size: 12px;
         color: #a8b0be;
         line-height: 1.2;
@@ -461,13 +256,34 @@ export default {
         color: #fff;
     }
 
-    .u-empty {
-        flex: 1;
+    .u-actions {
+        width: 100%;
+        margin: 0;
+        padding: 0 24px 14px;
+        box-sizing: border-box;
         display: flex;
+        justify-content: flex-end;
+    }
+
+    .u-collapse {
+        display: inline-flex;
         align-items: center;
-        justify-content: center;
-        color: #8b95a7;
-        font-size: 13px;
+        gap: 5px;
+        padding: 7px 12px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 6px;
+        background: rgba(255, 255, 255, 0.06);
+        color: #a8b0be;
+        font-size: 12px;
+        line-height: 1;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .u-collapse:hover {
+        border-color: fade(@v4primary500, 45%);
+        background: fade(@v4primary500, 14%);
+        color: #fff;
     }
 
     .u-foot {
@@ -493,7 +309,7 @@ export default {
         width: 6px;
         height: 6px;
         border-radius: 50%;
-        background: #3b82f6;
+        background: @v4primary500;
     }
 
     .u-close {
@@ -511,13 +327,13 @@ export default {
 
     @media screen and (max-width: 1200px) {
         .u-list {
-            grid-template-columns: repeat(6, minmax(0, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
         }
     }
 
     @media screen and (max-width: 992px) {
         .u-list {
-            grid-template-columns: repeat(5, minmax(0, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
         }
     }
 }

package/src/utils/client-stat.js

@@ -2,16 +2,22 @@ import { $cms } from "@jx3box/jx3box-common/js/api";
 import { isMiniProgram, isApp } from "@jx3box/jx3box-common/js/utils";
 import User from "@jx3box/jx3box-common/js/user";
 import { applyJx3boxClientStatRules } from "./client-stat-business";
+import packageInfo from "../../package.json";
 
 const INSTANCE_ID_KEY = "jx3box:device_id";
 const REPORT_DATE_KEY = "jx3box:client-stat-report-date";
 const REPORT_SIGNATURE_KEY = "jx3box:client-stat-report-signature";
 const STAT_SDK_VERSION = "v0.0.2";
+const PACKAGE_VERSION = packageInfo.version;
+const WEB_VERSION = `jx3box-ui@${PACKAGE_VERSION}`;
 const STARTUP_DELAY_MIN = 3 * 1000;
 const STARTUP_DELAY_MAX = 15 * 1000;
 
 let reportTask = null;
 let scheduledTimer = null;
+let trafficPermission = null;
+let trafficPermissionCheckedAt = 0;
+const TRAFFIC_PERMISSION_MAX_AGE = 5 * 60 * 1000;
 
 function compactPayload(payload) {
     return Object.fromEntries(
@@ -97,6 +103,12 @@ function resolveClient(platform, userAgent) {
     return "unknown";
 }
 
+export function resolveCurrentClientSurface() {
+    const nav = window.navigator || {};
+    const userAgent = String(nav.userAgent || "");
+    return resolveClient(resolvePlatform(userAgent, nav.platform), userAgent);
+}
+
 function parseBrowser(userAgent) {
     const candidates = [
         ["Edge", /EdgA?[\s/]([\d.]+)/i],
@@ -141,10 +153,6 @@ function resolveDisplayMode() {
     return "browser";
 }
 
-function resolveWebVersion() {
-    return window.__APP_VERSION__ || process.env.VUE_APP_VERSION || process.env.VITE_APP_VERSION || null;
-}
-
 export function buildClientStatPayload(instanceId) {
     const nav = window.navigator || {};
     const screen = window.screen || {};
@@ -165,7 +173,9 @@ export function buildClientStatPayload(instanceId) {
         platform: context.platform,
         domain: window.location.hostname,
         channel: resolveChannel(),
-        web_version: resolveWebVersion(),
+        app_version: "jx3box-ui",
+        app_build: PACKAGE_VERSION,
+        web_version: WEB_VERSION,
         sdk_version: STAT_SDK_VERSION,
 
         os_name: system.os_name,
@@ -208,7 +218,7 @@ export function buildClientStatPayload(instanceId) {
 
 function getReportSignature() {
     const uid = User.isLogin() ? Number(User.getInfo()?.uid || localStorage.getItem("uid") || 0) : 0;
-    return `${uid}:${resolveWebVersion() || "unknown"}`;
+    return `${uid}:${WEB_VERSION}`;
 }
 
 export async function reportClientStat({ force = false } = {}) {
@@ -240,6 +250,24 @@ export async function reportClientStat({ force = false } = {}) {
     return reportTask;
 }
 
+export async function resolveClientTrafficPermission({ force = false } = {}) {
+    if (!force && trafficPermission && Date.now() - trafficPermissionCheckedAt < TRAFFIC_PERMISSION_MAX_AGE) {
+        return trafficPermission;
+    }
+    try {
+        const result = await reportClientStat({ force: true });
+        const data = result?.data;
+        if (data && typeof data.traffic_allowed === "boolean") {
+            trafficPermission = data;
+            trafficPermissionCheckedAt = Date.now();
+            return data;
+        }
+    } catch (error) {
+        // Traffic remains fail-closed when heartbeat cannot confirm permission.
+    }
+    return null;
+}
+
 function isLocalhost() {
     return ["localhost", "127.0.0.1", "::1"].includes(window.location.hostname);
 }