@jx3box/jx3box-ui 2.4.2 → 2.4.4

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/docs/agents/traffic-analytics.md

@@ -0,0 +1,50 @@
+# Traffic 路径采集适配
+
+`jx3box-ui` 只提供无渲染、显式启用的适配器，不会在安装组件库或渲染 `CommonHeader` 时自动采集。
+
+```js
+import { createJx3boxTrafficAnalytics } from "@jx3box/jx3box-ui";
+
+const traffic = createJx3boxTrafficAnalytics({
+    router,
+    project: "index",
+    client: "pc_web",
+    surface: "pc_web",
+    gameClient: "std",
+    // 传 heartbeat 的实时结果。未知态失败关闭，不发送。
+    resolveTrafficPermission: () => heartbeatState,
+});
+
+// 应在 router 已建立，并取得 heartbeat 权限后显式执行。
+await traffic.init();
+
+// heartbeat 后续发现机器人或关闭采集时，立即持久阻断并清空队列。
+traffic.setTrafficPermission({
+    traffic_allowed: false,
+    collection_blocked_reason: "robot",
+});
+
+// heartbeat 明确恢复后才解除持久阻断。
+traffic.setTrafficPermission({ traffic_allowed: true });
+
+// 同义的显式生命周期接口，供宿主的隐私开关直接调用。
+traffic.block("host_privacy_disabled");
+traffic.unblock();
+
+// 宿主卸载时释放唯一 Router owner、pagehide 监听和队列请求。
+traffic.destroy();
+```
+
+适配器只创建一个 Analytics Core、一个 Router owner 和一个 `TrafficSink`。它不会创建 `TrackingSink`，也不会安装点击、曝光、热力图指令，因此一次路由变化只产生一个 canonical `page_view`。已经由宿主启用 Tracking 的应用不能再初始化本适配器；这类应用应直接用 `jx3box-common@9.5.2` 的组合 sink 创建唯一 Core/Router owner。
+
+运行时规则只能来自 `/api/cms/system/traffic/config`。配置缺失、请求失败、规则字段不完整或动态参数没有 named validator 时不建立页面事件，也不使用本地放行规则。heartbeat 权限未知时会进入内存级 fail-closed：不建立新的 Journal 事件、取消进行中的请求；已经完成脱敏的 Journal 项会保留，直到明确允许后再恢复。宿主应优先等 heartbeat 给出明确权限后再调用 `init()`。批量请求发往 `/api/cms/system/traffic/visits/batch`，依赖逐 `event_id` ACK；409、429、网络错误和缺失 ACK 都保留原事件重试。
+
+Config 请求与 Traffic envelope 共用同一个 recipient domain。`pc_web` 保留小写真实 hostname（由后端 allowlist 决定是否启用）；`app`、`miniprogram`、`pc_game`、`mobile_game` 统一使用 `embedded`，不会把 WebView 的 `localhost` 等内部地址发给规则接口。
+
+`traffic_allowed=false`、`is_robot=true`、`traffic.block(reason)` 或可信 `blocked` 会写入 `jx3box:analytics:traffic:block:v1`，并调用 `block({ clear: true, cancelInflight: true })`。下次初始化先恢复阻断，再接入 Router。只有 heartbeat 明确返回允许，或宿主显式调用 `setTrafficPermission({ traffic_allowed: true })` / `unblock()` 才解除。
+
+宿主可通过 `beforeFlush(context)` 在每次网络发送前追加权限判断；返回 `false`/`{ allow: false }` 会保留队列并拒绝发送，返回可信 `block` 会持久阻断。`clear(reason)` 与 `cancelInflight(reason)` 分别清除安全 Journal 和取消当前请求。`init()` 幂等占有唯一 Router owner，`destroy()` 释放 Router/pagehide 监听并取消请求；销毁后不能再次初始化。
+
+Traffic-only 队列使用独立的 `jx3box:analytics:traffic:queue:v1`，不会读取或改写公共 `jx3box:analytics:queue:v1` 中的 Tracking/multi-sink Journal。队列仍把无 delivery ownership 的旧数据视为 `tracking`，不会误发到 Traffic。
+
+后端协议已提供 Traffic config 和逐 ID ACK。本适配器当前通过 9.5.2 fixture 验证；若目标环境仍是旧部署、响应缺字段或网络不可用，会安全保留或拒绝事件。构建与 fixture 测试不代表线上部署及真实链路已经验证。

package/index.js

@@ -43,6 +43,7 @@ import {
     setJx3boxUiLocale,
 } from "./i18n";
 import i18nMixin from "./i18n/mixin";
+import { createJx3boxTrafficAnalytics } from "./src/utils/traffic-analytics";
 
 const components = {
     CommonHeader,
@@ -93,4 +94,5 @@ export {
     mergeJx3boxUiMessages,
     getJx3boxUiAvailableLocales,
     setJx3boxUiLocale,
+    createJx3boxTrafficAnalytics,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.4.2",
+    "version": "2.4.4",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {
@@ -13,6 +13,7 @@
         "build:dev": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vue-cli-service build --mode development",
         "build:prod": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vue-cli-service build --mode production",
         "lint": "vue-cli-service lint",
+        "test:traffic": "node --test tests/traffic-analytics-contract.test.js",
         "test:i18n": "node --test tests/wiki-i18n-contract.test.js",
         "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest @jx3box/jx3box-editor@latest @jx3box/jx3box-emotion@latest @jx3box/jx3box-macro@latest @jx3box/jx3box-talent@latest"
     },
@@ -33,7 +34,7 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
-        "@jx3box/jx3box-common": "^9.2.9",
+        "@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}`);