@arcblock/ux 3.1.33 → 3.1.34

package/lib/NavMenu/products.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useRef as $, useState as T, useEffect as S } from "react";
+import { useRef as T, useState as $, useEffect as S } from "react";
 import { Link as p } from "react-router-dom";
 import { useMemoizedFn as A, useCreation as F } from "ahooks";
 import { Box as w, useTheme as G } from "@mui/material";
@@ -15,17 +15,18 @@ import P from "./images/blocklet-launcher.svg.js";
 import H from "./images/blocklet-store.svg.js";
 import R from "./images/web3-kit.svg.js";
 import z from "./images/blocklet-framework.svg.js";
-import j from "./images/abt-network.svg.js";
-import V from "./images/blocklet-server.svg.js";
-import q from "./images/OCAP.svg.js";
-import U from "./images/did.svg.js";
+import U from "./images/abt-network.svg.js";
+import j from "./images/blocklet-server.svg.js";
+import V from "./images/OCAP.svg.js";
+import q from "./images/did.svg.js";
 import J from "./images/did-wallet.svg.js";
 import Q from "./images/vc.svg.js";
 import X from "./images/payment-kit.png";
 import Y from "./images/aigne.svg.js";
 import I from "./images/arcsphere.svg.js";
 import Z from "./images/aistro.png";
-const v = 260, ee = {
+import { getUTMUrl as ee } from "../withTracker/libs/utm.js";
+const v = 260, ie = {
   en: {
     groups: {
       applications: "Applications",
@@ -410,7 +411,7 @@ const v = 260, ee = {
       }
     }
   }
-}, ie = C(w)`
+}, oe = C(w)`
   padding: 8px;
   background: ${({ theme: t }) => t.palette.grey[100]};
   border-radius: 8px;
@@ -431,7 +432,7 @@ const v = 260, ee = {
   .MuiGrid-container + .MuiGrid-container {
     margin-top: 0px;
   }
-`, oe = C(w, { shouldForwardProp: (t) => t !== "maxContent" })(
+`, te = C(w, { shouldForwardProp: (t) => t !== "maxContent" })(
   ({ theme: t, maxContent: c }) => ({
     display: "grid",
     gap: t.spacing(1),
@@ -462,7 +463,7 @@ function y({ color: t = "black", backgroundColor: c = "transparent", children: a
   );
 }
 function h({ color: t = "black", backgroundColor: c = "transparent" }) {
-  return /* @__PURE__ */ e(y, { color: t, backgroundColor: c, children: /* @__PURE__ */ e(U, { style: { width: "100%" } }) });
+  return /* @__PURE__ */ e(y, { color: t, backgroundColor: c, children: /* @__PURE__ */ e(q, { style: { width: "100%" } }) });
 }
 function s({ color: t = "black", backgroundColor: c = "transparent" }) {
   return /* @__PURE__ */ e(y, { color: t, backgroundColor: c, children: /* @__PURE__ */ e(Y, { style: { width: "100%", height: "100%" } }) });
@@ -475,10 +476,10 @@ const W = (t) => {
   }
 };
 function o({ to: t, children: c, className: a = "", ...u }) {
-  return W(t) ? /* @__PURE__ */ e(p, { to: t, target: "_blank", rel: "noreferrer noopener", className: a, ...u, children: c }) : /* @__PURE__ */ e(p, { to: t, className: a, ...u, children: c });
+  return W(t) ? /* @__PURE__ */ e(p, { to: ee(t, "header"), target: "_blank", rel: "noreferrer noopener", className: a, ...u, children: c }) : /* @__PURE__ */ e(p, { to: t, className: a, ...u, children: c });
 }
-function $e({ className: t = "", type: c, ...a }) {
-  const { mode: u } = L(), k = G(), { locale: r = "en" } = _() || {}, l = $(null), { palette: f } = k, i = A((n, d = {}) => E(ee, n, r, "en", d)), [N, D] = T(v), m = A(() => {
+function Fe({ className: t = "", type: c, ...a }) {
+  const { mode: u } = L(), k = G(), { locale: r = "en" } = _() || {}, l = T(null), { palette: f } = k, i = A((n, d = {}) => E(ie, n, r, "en", d)), [N, D] = $(v), m = A(() => {
     if (!l.current) return;
     const n = l.current.querySelectorAll(".navmenu-item__content");
     let d = v;
@@ -588,17 +589,17 @@ function $e({ className: t = "", type: c, ...a }) {
             {
               label: /* @__PURE__ */ e(p, { to: "https://main.abtnetwork.io/", target: "_blank", rel: "noreferrer noopener", children: "ABT Network" }),
               description: i("products.abtNetwork.description"),
-              icon: /* @__PURE__ */ e(j, {})
+              icon: /* @__PURE__ */ e(U, {})
             },
             {
               label: /* @__PURE__ */ e(o, { to: `https://www.blocklet.io/${r}/blocklet-server`, children: "Blocklet Server" }),
               description: i("products.blockletServer.description"),
-              icon: /* @__PURE__ */ e(V, {})
+              icon: /* @__PURE__ */ e(j, {})
             },
             {
               label: /* @__PURE__ */ e(o, { to: `https://www.arcblock.io/content/collections/${r}/ocap`, children: "ОСАР" }),
               description: i("products.ocap.description"),
-              icon: /* @__PURE__ */ e(q, {})
+              icon: /* @__PURE__ */ e(V, {})
             }
           ]
         },
@@ -715,8 +716,8 @@ function $e({ className: t = "", type: c, ...a }) {
     }
     return [];
   }, [i, r, f]);
-  return /* @__PURE__ */ e(ie, { ref: l, className: `nav-menu-products is-${u} ${t}`, ...a, children: x.map((n) => /* @__PURE__ */ e(B, { label: n.label, children: /* @__PURE__ */ e(oe, { maxContent: N, children: n.children.map((d) => /* @__PURE__ */ e(K, { variant: "panel", style: { padding: "8px" }, ...d })) }) }, n.label)) });
+  return /* @__PURE__ */ e(oe, { ref: l, className: `nav-menu-products is-${u} ${t}`, ...a, children: x.map((n) => /* @__PURE__ */ e(B, { label: n.label, children: /* @__PURE__ */ e(te, { maxContent: N, children: n.children.map((d) => /* @__PURE__ */ e(K, { variant: "panel", style: { padding: "8px" }, ...d })) }) }, n.label)) });
 }
 export {
-  $e as default
+  Fe as default
 };

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.1.33", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
+const e = "3.1.34", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
   version: e,
   dependencies: s
 };

package/lib/withTracker/libs/utm.d.ts

@@ -0,0 +1,10 @@
+/**
+ *
+ * 为外部 URL 添加 UTM 追踪参数
+ * @param url - 原始 URL 地址
+ * @param section - 导航区域，可选值为 'header' 或 'footer'
+ * @returns 添加 UTM 参数后的 URL
+ * @see https://team.arcblock.io/comment/discussions/7504c5ce-7453-4223-a539-27620efcf38e/#189d3749-e4bb-4588-9b7c-9b006fc3ef35
+ *
+ */
+export declare function getUTMUrl(url: string, section: 'header' | 'footer'): string;

package/lib/withTracker/libs/utm.js

@@ -0,0 +1,31 @@
+import { getQuery as o, withQuery as a } from "ufo";
+function i(t) {
+  try {
+    return new URL(t).origin !== window.location.origin;
+  } catch {
+    return !1;
+  }
+}
+function c(t, e) {
+  try {
+    if (!i(t))
+      return t;
+    const n = o(t), r = {
+      // 自身站点的 hostname
+      utm_source: window.location.hostname,
+      // 标记导航点击
+      utm_medium: `${e}_nav`,
+      // 全局导航统一标签
+      utm_campaign: `global_${e}_menu`,
+      // 目标站点标识
+      utm_content: new URL(t).hostname,
+      ...n
+    };
+    return a(t, r);
+  } catch (n) {
+    return console.error("Failed to generate UTM URL:", n), t;
+  }
+}
+export {
+  c as getUTMUrl
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.33",
+  "version": "3.1.34",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,16 +68,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "14bd43c4a02eb7617981ef48276f2fc493058240",
+  "gitHead": "c4810edc1f51b25c0e9bd55b2021f284d378ecb1",
   "dependencies": {
-    "@arcblock/bridge": "3.1.33",
+    "@arcblock/bridge": "3.1.34",
     "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.33",
-    "@arcblock/nft-display": "3.1.33",
-    "@arcblock/react-hooks": "3.1.33",
+    "@arcblock/icons": "3.1.34",
+    "@arcblock/nft-display": "3.1.34",
+    "@arcblock/react-hooks": "3.1.34",
     "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473",
-    "@blocklet/theme": "3.1.33",
+    "@blocklet/theme": "3.1.34",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/NavMenu/products.tsx

@@ -26,6 +26,7 @@ import PaymentKitPng from './images/payment-kit.png';
 import AigneSvg from './images/aigne.svg?react';
 import ArcSphereSvg from './images/arcsphere.svg?react';
 import AistroPng from './images/aistro.png';
+import { getUTMUrl } from '../withTracker/libs/utm';
 
 const MIN_ITEM_CONTENT_WIDTH = 260;
 
@@ -512,7 +513,7 @@ interface SmartLinkProps extends LinkProps {
 function SmartLink({ to, children, className = '', ...restProps }: SmartLinkProps) {
   if (isExternal(to)) {
     return (
-      <Link to={to} target="_blank" rel="noreferrer noopener" className={className} {...restProps}>
+      <Link to={getUTMUrl(to, 'header')} target="_blank" rel="noreferrer noopener" className={className} {...restProps}>
         {children}
       </Link>
     );

package/src/withTracker/libs/utm.ts

@@ -0,0 +1,46 @@
+import { withQuery, getQuery } from 'ufo';
+
+function isExternal(url: string): boolean {
+  try {
+    const u = new URL(url);
+    return u.origin !== window.location.origin;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ *
+ * 为外部 URL 添加 UTM 追踪参数
+ * @param url - 原始 URL 地址
+ * @param section - 导航区域，可选值为 'header' 或 'footer'
+ * @returns 添加 UTM 参数后的 URL
+ * @see https://team.arcblock.io/comment/discussions/7504c5ce-7453-4223-a539-27620efcf38e/#189d3749-e4bb-4588-9b7c-9b006fc3ef35
+ *
+ */
+export function getUTMUrl(url: string, section: 'header' | 'footer'): string {
+  try {
+    if (!isExternal(url)) {
+      return url;
+    }
+
+    const existsQueryParams = getQuery(url);
+
+    const queryParams = {
+      // 自身站点的 hostname
+      utm_source: window.location.hostname,
+      // 标记导航点击
+      utm_medium: `${section}_nav`,
+      // 全局导航统一标签
+      utm_campaign: `global_${section}_menu`,
+      // 目标站点标识
+      utm_content: new URL(url).hostname,
+      ...existsQueryParams,
+    };
+
+    return withQuery(url, queryParams);
+  } catch (error) {
+    console.error('Failed to generate UTM URL:', error);
+    return url;
+  }
+}