@jx3box/jx3box-ui 2.4.3 → 2.4.5

package/assets/css/header/box.less

@@ -71,7 +71,6 @@
         .db;
         .auto(x);
         fill: @color;
-        .tm(0.7);
     }
     .u-txt {
         .fz(12px, 2);
@@ -134,11 +133,17 @@
 }
 
 @media screen and (max-width: @phone) {
+    .c-header-jx3box {
+        padding-top: 16px;
+        background: #1d2128;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.28);
+    }
+
     .c-jx3box {
         height: calc(100vh - @header-height);
         .u-list {
             border-top: none;
-            padding: 0 20px;
+            padding: 0 16px 18px;
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             justify-content: center;
@@ -150,7 +155,7 @@
                 flex: 1;
             }
             li {
-                padding: 5px;
+                padding: 4px;
                 .mr(0);
                 .mb(0);
             }
@@ -158,9 +163,34 @@
         .u-item {
             .size(68px);
             .auto(x);
+            padding: 7px;
+            border-radius: 10px;
+            border-color: rgba(255, 255, 255, 0.08);
+            background: #292e37;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
+            transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+
             .u-pic {
                 .size(28px);
             }
+
+            .u-txt {
+                color: #d4d7de;
+            }
+        }
+        .u-item:not(.u-doing):hover,
+        .u-item:not(.u-doing):active {
+            border-color: fade(@v4primary500, 55%);
+            background: fade(@v4primary500, 16%);
+            transform: translateY(-1px);
+        }
+        .u-close {
+            margin: 6px 16px 16px 0;
+            padding: 7px 12px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 6px;
+            background: rgba(255, 255, 255, 0.06);
+            color: #d4d7de;
         }
         .u-app-start {
             clear: none;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.4.3",
+    "version": "2.4.5",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {
@@ -34,7 +34,7 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
-        "@jx3box/jx3box-common": "9.5.2",
+        "@jx3box/jx3box-common": "^9.5.5",
         "@jx3box/jx3box-data": "^3.9.6",
         "@jx3box/jx3box-editor": "^3.2.13",
         "@jx3box/jx3box-emotion": "^1.3.2",

package/src/CommonHeader.vue

@@ -85,7 +85,14 @@ import miniprogram from "@jx3box/jx3box-common/data/miniprogram.json";
 import { getGlobalConfig } from "../service/header";
 import { getConfig, getMyAccountStatus } from "../service/cms";
 import { clearActiveAuthToken, refreshTokenIfNeeded } from "./utils/auth-token-refresh";
-import { checkClientStatOnVisible, installClientStatReporting } from "./utils/client-stat";
+import {
+    checkClientStatOnVisible,
+    ensureClientInstanceId,
+    installClientStatReporting,
+    resolveCurrentClientSurface,
+    resolveClientTrafficPermission,
+} from "./utils/client-stat";
+import { installCommonHeaderTrafficAnalytics } from "./utils/traffic-analytics";
 import User from "@jx3box/jx3box-common/js/user.js";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 
@@ -105,7 +112,10 @@ export default {
         "header-box": box,
         "header-box2": box2,
     },
-    props: ["overlayEnable"],
+    props: {
+        overlayEnable: Boolean,
+        trafficEnabled: { type: Boolean, default: true },
+    },
     data: function () {
         return {
             isOverlay: false,
@@ -449,6 +459,22 @@ export default {
     created: function () {
         this.init();
         installClientStatReporting();
+        if (this.trafficEnabled) {
+            try {
+                installCommonHeaderTrafficAnalytics({
+                    router: this.$router,
+                    runtime: window,
+                    surface: resolveCurrentClientSurface(),
+                    instanceId: ensureClientInstanceId(),
+                    resolveTrafficPermission: resolveClientTrafficPermission,
+                    webVersion: window.__APP_VERSION__ || process.env.VUE_APP_VERSION || process.env.VITE_APP_VERSION || null,
+                }).catch(function () {
+                    // Traffic is fail-closed and must never affect the shared header or host page.
+                });
+            } catch (error) {
+                // Storage/privacy failures must not affect the shared header or host page.
+            }
+        }
         window.addEventListener("resize", this.updateScreen, { passive: true });
         document.addEventListener("visibilitychange", this.handleVisibilityChange);
 

package/src/header/box-menu.js

@@ -0,0 +1,42 @@
+import axios from "axios";
+import { flatten } from "lodash";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+
+const BOX_MENU_CACHE_KEY = "jx3box:box-menu:app-v1";
+
+function readCache() {
+    try {
+        const data = JSON.parse(sessionStorage.getItem(BOX_MENU_CACHE_KEY));
+        return Array.isArray(data) && data.length ? data : null;
+    } catch (e) {
+        return null;
+    }
+}
+
+function writeCache(data) {
+    try {
+        sessionStorage.setItem(BOX_MENU_CACHE_KEY, JSON.stringify(data));
+    } catch (e) {}
+}
+
+export function loadBoxMenu(fallback = []) {
+    const cached = readCache();
+    if (cached) return Promise.resolve(cached);
+
+    return axios
+        .get(JX3BOX.__imgPath + "logo/app.json")
+        .then((res) => {
+            const source = flatten(Object.values(res.data || {}));
+            const data = source.map((item) => ({
+                img: item.key + ".svg",
+                uuid: item.key,
+                abbr: item.label,
+                href: item.link,
+                client: item.client || ["std", "origin"],
+            }));
+            const result = data.length ? data : fallback;
+            writeCache(result);
+            return result;
+        })
+        .catch(() => fallback);
+}

package/src/header/box.vue

@@ -15,7 +15,7 @@
             <li v-for="(item, i) in list" :key="i" :class="{ 'u-app-start': item.lf }">
                 <a class="u-item" :href="item.href" :target="getTarget(item.href)">
                     <img class="u-pic" :src="getBoxIcon(item.img)" />
-                    <span class="u-txt">{{ item.abbr }}</span>
+                    <span class="u-txt" :title="item.abbr">{{ getDisplayName(item.abbr) }}</span>
                 </a>
             </li>
         </ul>
@@ -33,8 +33,8 @@ 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 { trimSlash } from "./utils";
+import { loadBoxMenu } from "./box-menu";
 
 const { __imgPath, __cdn } = JX3BOX;
 export default {
@@ -56,7 +56,7 @@ export default {
     },
     computed: {
         homeicon: function () {
-            return __imgPath + "image/box/home.svg";
+            return __cdn + "logo/logo-dark/home.svg";
         },
         homeicon_hover: function () {
             return __imgPath + "image/box/home_on.svg";
@@ -66,7 +66,8 @@ export default {
         },
         list: function () {
             return this.data.filter((item) => {
-                return item.status && (item.client == this.client || item.client == "all");
+                const visible = item.status == null || !!item.status;
+                return visible && this.matchedClient(item.client);
             });
         },
         prefix: function () {
@@ -78,13 +79,25 @@ export default {
             Bus.emit("toggleBox", false);
         },
         matchedClient: function (client) {
-            return client == "all" ? true : client == this.client;
+            const clients = Array.isArray(client)
+                ? client
+                : String(client || "")
+                      .split(",")
+                      .map((item) => item.trim())
+                      .filter(Boolean);
+            return !clients.length || clients.includes("all") || clients.includes(this.client);
         },
         getBoxIcon: function (val) {
             val = val && val?.replace(".png", ".svg");
-            let web_url = __cdn + "logo/logo-light/" + val;
+            let web_url = __cdn + "logo/logo-dark/" + val;
             return web_url;
         },
+        getDisplayName: function (name) {
+            const chars = Array.from(String(name || "").trim());
+            if (chars.length === 5) return chars.slice(0, 3).join("");
+            if (chars.length === 4) return chars.slice(0, 2).join("");
+            return chars.join("");
+        },
         getTarget: function (val) {
             if (window.innerWidth < 768 || val?.startsWith("/")) {
                 return "_self";
@@ -93,20 +106,9 @@ export default {
             }
         },
         loadMenu() {
-            try {
-                const _box = JSON.parse(sessionStorage.getItem("box"));
-                if (_box) {
-                    this.data = _box;
-                } else {
-                    getMenu("box").then((res) => {
-                        this.data = res.data?.data?.val;
-                        sessionStorage.setItem("box", JSON.stringify(this.data));
-                    });
-                }
-            } catch (e) {
-                this.data = box;
-                console.log("loadBox error", e);
-            }
+            loadBoxMenu(box).then((data) => {
+                this.data = data;
+            });
         },
         trimSlash(link) {
             return trimSlash(`${this.prefix}:${link}`);

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);
 }

package/src/utils/traffic-analytics.js

@@ -15,6 +15,127 @@ const DEFAULT_BATCH_ENDPOINT = "/api/cms/system/traffic/visits/batch";
 const DEFAULT_QUEUE_STORAGE_KEY = "jx3box:analytics:traffic:queue:v1";
 const DEFAULT_BLOCK_STORAGE_KEY = "jx3box:analytics:traffic:block:v1";
 const EMBEDDED_SURFACES = new Set(["app", "miniprogram", "pc_game", "mobile_game"]);
+const COMMON_HEADER_INSTALLATIONS = new WeakMap();
+const COMMON_HEADER_TRAFFIC_PROJECT = "jx3box-ui";
+
+function normalizeRoutePath(value) {
+    let path = String(value || "")
+        .split(/[?#]/, 1)[0]
+        .trim();
+    if (!path) return "";
+    if (!path.startsWith("/")) path = `/${path}`;
+    path = path.replace(/\/{2,}/g, "/");
+    return path.length > 1 ? path.replace(/\/+$/, "") : path;
+}
+
+function normalizeVueRouteTemplate(value) {
+    const path = normalizeRoutePath(value);
+    if (!path || path === "/") return path;
+    return `/${path
+        .slice(1)
+        .split("/")
+        .map(function (segment) {
+            if (!segment.startsWith(":")) return segment;
+            const name = segment.slice(1).match(/^[A-Za-z_][A-Za-z0-9_]*/)?.[0];
+            if (!name) return segment;
+            // Backend rules own parameter validation. Vue Router custom regexes
+            // such as :id(\d+) are local matching details and must normalize to
+            // the registered cross-client template :id.
+            return `:${name}${segment.endsWith("?") ? "?" : ""}`;
+        })
+        .join("/")}`;
+}
+
+function routeTemplate(route) {
+    const source = route || {};
+    const meta = source.meta && typeof source.meta === "object" ? source.meta : {};
+    const analytics = meta.analytics && typeof meta.analytics === "object" ? meta.analytics : {};
+    const matched = Array.isArray(source.matched) ? source.matched : [];
+    const record = matched.length ? matched[matched.length - 1] : null;
+    return normalizeVueRouteTemplate(
+        analytics.route_pattern || analytics.routePattern || (record && record.path) || source.path || ""
+    );
+}
+
+function routerBase(router) {
+    return normalizeRoutePath(router?.options?.history?.base || router?.history?.base || "/") || "/";
+}
+
+function resolveAbsoluteRoutePattern(router, route, runtime) {
+    const pattern = routeTemplate(route);
+    if (!pattern) return "";
+    const base = routerBase(router);
+    if (base === "/" || pattern === base || pattern.startsWith(`${base}/`)) return pattern;
+
+    // Multi-entry PC projects mount their Router below paths such as /macro or /pet.
+    // Vue Router exposes only / and /:id inside that base, so retain the route
+    // template while restoring its public prefix. location.pathname is used only
+    // to verify that this Router currently owns the browser path; real IDs never
+    // replace the template or enter the long-term page key.
+    const pathname = normalizeRoutePath(runtime?.location?.pathname || "");
+    if (pathname && pathname !== base && !pathname.startsWith(`${base}/`)) return pattern;
+    return pattern === "/" ? base : `${base}${pattern}`;
+}
+
+function createAbsoluteRouteRouter(router, runtime) {
+    if (!router || typeof router.afterEach !== "function") return router;
+    const adaptRoute = function (route) {
+        if (!route) return route;
+        const routePattern = resolveAbsoluteRoutePattern(router, route, runtime);
+        if (!routePattern) return route;
+        const meta = route.meta && typeof route.meta === "object" ? route.meta : {};
+        const analytics = meta.analytics && typeof meta.analytics === "object" ? meta.analytics : {};
+        return Object.assign({}, route, {
+            meta: Object.assign({}, meta, {
+                analytics: Object.assign({}, analytics, { route_pattern: routePattern }),
+            }),
+        });
+    };
+    const adapter = Object.create(router);
+    adapter.afterEach = function (handler) {
+        return router.afterEach(function (to, from, failure) {
+            return handler(adaptRoute(to), adaptRoute(from), failure);
+        });
+    };
+    if (typeof router.isReady === "function") adapter.isReady = router.isReady.bind(router);
+    const currentRoute = router.currentRoute;
+    if (currentRoute && typeof currentRoute === "object" && "value" in currentRoute) {
+        adapter.currentRoute = {};
+        Object.defineProperty(adapter.currentRoute, "value", {
+            enumerable: true,
+            get: function () {
+                return adaptRoute(currentRoute.value);
+            },
+        });
+    } else {
+        Object.defineProperty(adapter, "currentRoute", {
+            enumerable: true,
+            get: function () {
+                return adaptRoute(router.currentRoute);
+            },
+        });
+    }
+    return adapter;
+}
+
+function queryValue(runtime, key) {
+    const location = (runtime && runtime.location) || {};
+    const sources = [location.search, String(location.hash || "").split("?")[1]];
+    for (const source of sources) {
+        if (!source) continue;
+        const value = new URLSearchParams(String(source).replace(/^\?/, "")).get(key);
+        if (value !== null) return value;
+    }
+    return "";
+}
+
+function resolvePcTrafficGameClient(runtime) {
+    const explicitClient = String(queryValue(runtime, "client") || "").toLowerCase();
+    if (explicitClient === "std" || explicitClient === "origin") return explicitClient;
+    const hostname = String(runtime?.location?.hostname || "").toLowerCase();
+    if (hostname === "origin.jx3box.com") return "origin";
+    return "std";
+}
 
 function safeReason(value, fallback) {
     const reason = String(value || fallback || "traffic_disabled")
@@ -432,12 +553,55 @@ function createJx3boxTrafficAnalytics(options) {
     return api;
 }
 
+function installCommonHeaderTrafficAnalytics(options) {
+    const settings = options || {};
+    const router = settings.router;
+    if (!router || typeof router.afterEach !== "function") return Promise.resolve(null);
+    if (router.__jx3boxAnalyticsRouterOwner__) return Promise.resolve(null);
+    const existing = COMMON_HEADER_INSTALLATIONS.get(router);
+    if (existing) return existing;
+
+    const runtime = settings.runtime || (typeof window !== "undefined" ? window : {});
+    const surface = settings.surface || "pc_web";
+    if (surface !== "pc_web" && surface !== "mobile_web") return Promise.resolve(null);
+    const project = COMMON_HEADER_TRAFFIC_PROJECT;
+    const analyticsRouter = createAbsoluteRouteRouter(router, runtime);
+
+    const task = Promise.resolve(typeof router.isReady === "function" ? router.isReady() : undefined)
+        .then(function () {
+            const collector = createJx3boxTrafficAnalytics({
+                runtime,
+                router: analyticsRouter,
+                project,
+                product: "jx3box",
+                client: surface,
+                surface,
+                gameClient: function () { return resolvePcTrafficGameClient(runtime); },
+                platform: settings.platform || "web",
+                webVersion: settings.webVersion,
+                instanceId: settings.instanceId,
+                resolveTrafficPermission: settings.resolveTrafficPermission,
+            });
+            return collector.init().then(function () { return collector; });
+        })
+        .catch(function (error) {
+            COMMON_HEADER_INSTALLATIONS.delete(router);
+            throw error;
+        });
+    COMMON_HEADER_INSTALLATIONS.set(router, task);
+    return task;
+}
+
 export {
     DEFAULT_BATCH_ENDPOINT,
     DEFAULT_BLOCK_STORAGE_KEY,
     DEFAULT_CONFIG_ENDPOINT,
     DEFAULT_QUEUE_STORAGE_KEY,
     createJx3boxTrafficAnalytics,
+    createAbsoluteRouteRouter,
+    installCommonHeaderTrafficAnalytics,
     normalizeRecipientDomain,
     normalizeTrafficPermission,
+    resolvePcTrafficGameClient,
+    resolveAbsoluteRoutePattern,
 };

package/tests/client-stat.test.js

@@ -11,12 +11,23 @@ function assert(condition, message) {
 }
 
 assert(commonHeader.includes("installClientStatReporting()"), "CommonHeader should install client statistics");
+assert(
+    commonHeader.includes("installCommonHeaderTrafficAnalytics"),
+    "CommonHeader should automatically install the shared Traffic collector"
+);
 assert(
     commonHeader.includes("checkClientStatOnVisible()") && commonHeader.includes("visibilitychange"),
     "CommonHeader should retry statistics when the page becomes visible"
 );
 assert(clientStat.includes('const INSTANCE_ID_KEY = "jx3box:device_id"'), "PC should reuse the client instance id key");
 assert(clientStat.includes('product: "jx3box"'), "heartbeat should identify the JX3BOX product");
+assert(clientStat.includes('app_version: "jx3box-ui"'), "PC heartbeat should identify the shared header reporter");
+assert(clientStat.includes("app_build: PACKAGE_VERSION"), "PC heartbeat should report jx3box-ui package.json.version");
+assert(
+    clientStat.includes("const WEB_VERSION = `jx3box-ui@${PACKAGE_VERSION}`"),
+    "PC heartbeat should namespace its web version"
+);
+assert(clientStat.includes("web_version: WEB_VERSION"), "PC heartbeat should report the namespaced web version");
 assert(clientStat.includes('const STAT_SDK_VERSION = "v0.0.2"'), "statistics SDK version should remain explicit");
 assert(clientStat.includes('return "pc_web"'), "desktop browser traffic should report pc_web");
 assert(clientStat.includes('return "mobile_web"'), "mobile browsers visiting PC pages should report mobile_web");
@@ -30,10 +41,6 @@ assert(
     clientStat.includes("/ArkWeb|HarmonyOS|OpenHarmony/i") && clientStat.includes('os_name: "OpenHarmony"'),
     "PC statistics should normalize OpenHarmony before reporting"
 );
-assert(
-    clientStat.includes("window.__APP_VERSION__ || process.env.VUE_APP_VERSION || process.env.VITE_APP_VERSION"),
-    "web version should use the shared app version fallback chain"
-);
 assert(!clientStat.includes("__JX3BOX_VERSION__"), "shared statistics must not depend on a JX3BOX-specific version global");
 assert(!clientStat.includes("VUE_APP_BUILD_VERSION"), "web version should not use the deprecated build-version fallback");
 assert(clientStat.includes("/api/cms/system/stat/heartbeat"), "heartbeat should use the new statistics endpoint");

package/tests/traffic-analytics-contract.test.js

@@ -16,6 +16,7 @@ require("@babel/register")({
 });
 
 const assert = require("node:assert/strict");
+const fs = require("node:fs");
 const { test } = require("node:test");
 const fixture = require("@jx3box/jx3box-common/docs/fixtures/analytics-dual-sink-v1.json");
 const SHARED_ANALYTICS_QUEUE_STORAGE_KEY = "jx3box:analytics:queue:v1";
@@ -23,10 +24,17 @@ const { createEventQueue, createQueueStorage, createTrafficSink } = require("@jx
 const {
     DEFAULT_BLOCK_STORAGE_KEY,
     DEFAULT_QUEUE_STORAGE_KEY,
+    createAbsoluteRouteRouter,
     createJx3boxTrafficAnalytics,
     normalizeRecipientDomain,
     normalizeTrafficPermission,
+    resolvePcTrafficGameClient,
+    resolveAbsoluteRoutePattern,
 } = require("../src/utils/traffic-analytics.js");
+const trafficSource = fs.readFileSync(path.resolve(__dirname, "../src/utils/traffic-analytics.js"), "utf8");
+
+assert.match(trafficSource, /const COMMON_HEADER_TRAFFIC_PROJECT = "jx3box-ui"/);
+assert.doesNotMatch(trafficSource, /PC_PROJECT_ROOTS|resolvePcTrafficProject/);
 
 function createMemoryStorage(initial) {
     const values = new Map(Object.entries(initial || {}));
@@ -85,6 +93,39 @@ function createRouter() {
     };
 }
 
+test("CommonHeader restores a multi-entry Router base without exposing real path IDs", () => {
+    const router = createRouter();
+    router.options = { history: { base: "/macro/" } };
+    const runtime = { location: { pathname: "/macro/123" } };
+    const detail = {
+        name: "single",
+        matched: [{ path: "/:id(\\d+)" }],
+        meta: {},
+        params: { id: "123" },
+    };
+    assert.equal(resolveAbsoluteRoutePattern(router, detail, runtime), "/macro/:id");
+    assert.equal(resolveAbsoluteRoutePattern(router, { matched: [{ path: "/" }], meta: {} }, runtime), "/macro");
+
+    const adapted = createAbsoluteRouteRouter(router, runtime);
+    let received = null;
+    adapted.afterEach((to) => {
+        received = to;
+    });
+    router.navigate(detail);
+    assert.equal(received.meta.analytics.route_pattern, "/macro/:id");
+    assert.equal(received.meta.analytics.route_pattern.includes("123"), false);
+});
+
+test("CommonHeader does not duplicate an already absolute route template", () => {
+    const router = createRouter();
+    router.options = { history: { base: "/pet" } };
+    const runtime = { location: { pathname: "/pet/456" } };
+    assert.equal(
+        resolveAbsoluteRoutePattern(router, { matched: [{ path: "/pet/:id" }], meta: {} }, runtime),
+        "/pet/:id"
+    );
+});
+
 function createRuntime(options) {
     const settings = options || {};
     const listeners = new Map();
@@ -204,6 +245,24 @@ test("recipient domains preserve web hosts and normalize embedded surfaces", ()
     assert.equal(normalizeRecipientDomain("https://www.jx3box.com/private", "pc_web"), "");
 });
 
+test("PC CommonHeader resolves query-first game_client and defaults every non-origin host to std", () => {
+    assert.equal(
+        resolvePcTrafficGameClient({ location: { hostname: "www.jx3box.com", search: "?client=origin" } }),
+        "origin"
+    );
+    assert.equal(
+        resolvePcTrafficGameClient({ location: { hostname: "origin.jx3box.com", search: "?client=std" } }),
+        "std"
+    );
+    assert.equal(
+        resolvePcTrafficGameClient({ location: { hostname: "origin.jx3box.com", search: "?client=all" } }),
+        "origin"
+    );
+    assert.equal(resolvePcTrafficGameClient({ location: { hostname: "localhost", search: "" } }), "std");
+    assert.equal(resolvePcTrafficGameClient({ location: { hostname: "localhost" } }), "std");
+    assert.equal(resolvePcTrafficGameClient({ location: { hostname: "other.jx3box.com" } }), "std");
+});
+
 test("headless opt-in emits the official Traffic fixture once and honors per-id ACK", async () => {
     const requests = [];
     const timers = createNoopTimers();