@arcblock/ux 3.1.40 → 3.1.42

package/lib/Config/theme-mode-toggle.js

@@ -1,11 +1,19 @@
 import { jsx as e } from "react/jsx-runtime";
-import { IconButton as n } from "@mui/material";
-import { Brightness2Outlined as i, LightModeOutlined as l } from "@mui/icons-material";
-import { useColorScheme as s } from "../Theme/theme-provider.js";
-function f() {
-  const { mode: r, toggleMode: o, prefer: t } = s();
-  return o ? t === "system" || window.blocklet?.theme?.prefer === "system" ? /* @__PURE__ */ e(n, { onClick: o, children: r === "light" ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e(l, {}) }) : null : (process.env.NODE_ENV !== "production" && console.warn("Please ensure the component is wrapped with ConfigProvider context"), null);
+import { IconButton as i } from "@mui/material";
+import { Brightness2Outlined as l, LightModeOutlined as s } from "@mui/icons-material";
+import { useThrottleFn as m } from "ahooks";
+import { useColorScheme as u } from "../Theme/theme-provider.js";
+function g() {
+  const { mode: t, toggleMode: o, prefer: r } = u(), { run: n } = m(
+    () => {
+      o();
+    },
+    {
+      wait: 300
+    }
+  );
+  return o ? r === "system" || window.blocklet?.theme?.prefer === "system" ? /* @__PURE__ */ e(i, { onClick: n, children: t === "light" ? /* @__PURE__ */ e(l, {}) : /* @__PURE__ */ e(s, {}) }) : null : (process.env.NODE_ENV !== "production" && console.warn("Please ensure the component is wrapped with ConfigProvider context"), null);
 }
 export {
-  f as default
+  g as default
 };

package/lib/Header/header.js

@@ -1,5 +1,5 @@
-import { jsx as r, jsxs as t, Fragment as y } from "react/jsx-runtime";
-import { Box as d, Container as w } from "@mui/material";
+import { jsx as r, jsxs as t, Fragment as w } from "react/jsx-runtime";
+import { Box as d, Container as y } from "@mui/material";
 import { useRef as v, useState as N, useEffect as k } from "react";
 import z from "./auto-hidden.js";
 import { styled as W } from "../Theme/index.js";
@@ -14,24 +14,24 @@ function I({
   prepend: f = null,
   align: o = "left",
   maxWidth: x = !1,
-  homeLink: i = "/",
+  homeLink: a = "/",
   ...m
 }) {
-  const a = v(null), [g, u] = N("0px"), b = { minWidth: g };
+  const i = v(null), [g, u] = N("0px"), b = { minWidth: g };
   return k(() => {
     const { searchParams: n } = new URL(window.location.href);
-    n.get("inviter") && window.localStorage.setItem("inviter", n.get("inviter")), a.current && u(`${a.current.offsetWidth}px`);
-  }, []), /* @__PURE__ */ r(B, { ...m, children: /* @__PURE__ */ t(w, { maxWidth: x, className: "header-container", children: [
+    n.get("inviter") && window.localStorage.setItem("inviter", n.get("inviter")), i.current && u(`${i.current.offsetWidth}px`);
+  }, []), /* @__PURE__ */ r(B, { ...m, children: /* @__PURE__ */ t(y, { maxWidth: x, className: "header-container", children: [
     f,
     /* @__PURE__ */ r("div", { className: "header-brand-wrapper", style: b, children: (() => {
-      const n = /* @__PURE__ */ t(y, { children: [
-        e && /* @__PURE__ */ r("div", { className: "header-logo", ref: a, children: e }),
+      const n = /* @__PURE__ */ t(w, { children: [
+        e && /* @__PURE__ */ r("div", { className: "header-logo", ref: i, children: e }),
         l && /* @__PURE__ */ r(z, { height: 44, sx: { flexShrink: { xs: 1 } }, children: /* @__PURE__ */ t("div", { className: "header-brand", children: [
           /* @__PURE__ */ r("div", { className: "header-brand-title", children: /* @__PURE__ */ r("h2", { children: l }) }),
           /* @__PURE__ */ r("div", { className: "header-brand-desc", children: s })
         ] }) })
       ] });
-      return typeof i == "function" ? i(n) : /* @__PURE__ */ r("a", { href: i, children: n });
+      return typeof a == "function" ? a(n) : /* @__PURE__ */ r("a", { href: a, children: n });
     })() }),
     /* @__PURE__ */ r("div", { className: "header-brand-addon", children: h }),
     o === "right" && /* @__PURE__ */ r(
@@ -138,7 +138,7 @@ const B = W(d)`
     .header-menu {
       display: inline-block;
     }
-    .header-logo {
+    .header-brand-wrapper .header-logo {
       height: 32px;
     }
     .header-brand {

package/lib/Header/responsive-header.js

@@ -1,22 +1,22 @@
 import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import { useState as f } from "react";
-import { useReactive as y, useCreation as v } from "ahooks";
-import { Close as h, Menu as g } from "@mui/icons-material";
-import { Container as b, useTheme as x, useMediaQuery as w, Drawer as P, Button as k } from "@mui/material";
-import p from "./header.js";
-import { styled as i } from "../Theme/index.js";
-function z({ prepend: n, children: r = null, ...s }) {
-  const a = x(), l = w(a.breakpoints.down("md")), [t, m] = f(!1), u = typeof r == "function" ? r({ isMobile: l, closeMenu: () => m(!1) }) : r, e = y({
+import { useReactive as v, useCreation as g } from "ahooks";
+import { Close as y, Menu as h } from "@mui/icons-material";
+import { Container as x, useTheme as b, useMediaQuery as w, Drawer as P, Button as k } from "@mui/material";
+import u from "./header.js";
+import { styled as s } from "../Theme/index.js";
+function z({ prepend: n, children: r = null, ...i }) {
+  const a = b(), l = w(a.breakpoints.down("md")), [t, m] = f(!1), d = typeof r == "function" ? r({ isMobile: l, closeMenu: () => m(!1) }) : r, e = v({
     changed: !1,
     value: "",
     priority: ""
   });
-  return v(() => {
+  return g(() => {
     if (document.documentElement?.style) {
-      const d = () => {
+      const p = () => {
         e.changed && (e.value ? document.documentElement.style.setProperty("overflow", e.value, e.priority) : document.documentElement.style.removeProperty("overflow"), e.value = "", e.priority = "", e.changed = !1);
       };
-      return t ? (e.changed = !0, e.value = document.documentElement.style.getPropertyValue("overflow"), e.priority = document.documentElement.style.getPropertyPriority("overflow"), document.documentElement.style.setProperty("overflow", "revert", "important")) : d(), d;
+      return t ? (e.changed = !0, e.value = document.documentElement.style.getPropertyValue("overflow"), e.priority = document.documentElement.style.getPropertyPriority("overflow"), document.documentElement.style.setProperty("overflow", "revert", "important")) : p(), p;
     }
     return () => {
     };
@@ -30,12 +30,12 @@ function z({ prepend: n, children: r = null, ...s }) {
           className: "header-menu",
           "aria-label": "header menu button",
           onClick: () => m(!t),
-          children: t ? /* @__PURE__ */ o(h, {}) : /* @__PURE__ */ o(g, {})
+          children: t ? /* @__PURE__ */ o(y, {}) : /* @__PURE__ */ o(h, {})
         }
       ),
-      ...s,
+      ...i,
       children: [
-        !l && u,
+        !l && d,
         l && /* @__PURE__ */ o(
           P,
           {
@@ -53,33 +53,41 @@ function z({ prepend: n, children: r = null, ...s }) {
             },
             slotProps: {
               paper: {
-                style: {
+                sx: {
                   top: 64,
                   bottom: 0,
                   boxShadow: "none",
                   backgroundImage: "none",
-                  backgroundColor: a.palette.background.paper
+                  backgroundColor: a.palette.background.paper,
+                  "& .navmenu.navmenu--inline": {
+                    margin: 0,
+                    padding: 0
+                  }
                 }
               }
             },
-            children: /* @__PURE__ */ o(M, { children: u })
+            children: /* @__PURE__ */ o(M, { children: d })
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ o(p, { prepend: n, ...s });
+  ) : /* @__PURE__ */ o(u, { prepend: n, ...i });
 }
-const C = i(p)`
+const C = s(u)`
   .header-menu {
     display: none;
   }
   ${(n) => n.theme.breakpoints.down("md")} {
     .header-menu {
       display: flex;
-      margin-right: 12px;
+      padding-left: 6px;
+      padding-right: 6px;
+      min-width: 0;
+      margin-left: -4px;
+      margin-right: 8px;
     }
   }
-`, M = i(b)`
+`, M = s(x)`
   padding-top: 8px;
   padding-bottom: 16px;
   .navmenu {

package/lib/NavMenu/products.js

@@ -6,8 +6,8 @@ import { Box as w, useTheme as G } from "@mui/material";
 import B from "./sub-item-group.js";
 import { Item as K } from "./nav-menu.js";
 import { styled as C } from "../Theme/index.js";
-import { useNavMenuContext as L } from "./nav-menu-context.js";
-import { translate as E } from "../Locale/util.js";
+import { useNavMenuContext as E } from "./nav-menu-context.js";
+import { translate as L } from "../Locale/util.js";
 import { useLocaleContext as _ } from "../Locale/context.js";
 import M from "./images/nft-studio.svg.js";
 import O from "./images/creator-studio.svg.js";
@@ -479,7 +479,7 @@ function o({ to: t, children: c, className: a = "", ...u }) {
   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 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(() => {
+  const { mode: u } = E(), k = G(), { locale: r = "en" } = _() || {}, l = T(null), { palette: f } = k, i = A((n, d = {}) => L(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;
@@ -661,12 +661,12 @@ function Fe({ className: t = "", type: c, ...a }) {
             {
               label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/code-smith", ...n, children: "AIGNE CodeSmith" }),
               description: i("products.aigneCodeSmith.description"),
-              icon: /* @__PURE__ */ e(s, { color: "#56a596", backgroundColor: "#e9fcf6" })
+              icon: /* @__PURE__ */ e(s, { color: "#3E5DF7", backgroundColor: "#e9f0ff" })
             },
             {
               label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/doc-smith", ...n, children: "AIGNE DocSmith" }),
               description: i("products.aigneDocSmith.description"),
-              icon: /* @__PURE__ */ e(s, { color: "#e46f38", backgroundColor: "#f7e0d7" })
+              icon: /* @__PURE__ */ e(s, { color: "#02A996", backgroundColor: "#e6f7f5" })
             },
             {
               label: /* @__PURE__ */ e(o, { to: "https://www.aigne.io/web-smith", ...n, children: "AIGNE WebSmith" }),

package/lib/NavMenu/style.js

@@ -158,7 +158,7 @@ const o = i("nav", {
   // inline 布局中
   "&.navmenu-item--inline": {
     margin: 0,
-    padding: "0 16px",
+    padding: 0,
     minHeight: "48px",
     lineHeight: "48px",
     flexWrap: "wrap"
@@ -207,7 +207,6 @@ const o = i("nav", {
       position: "static",
       transform: "none",
       flex: "1 0 100%",
-      margin: "0 -16px",
       padding: 0,
       height: 0,
       overflow: "hidden",
@@ -220,7 +219,7 @@ const o = i("nav", {
     },
     ".navmenu-sub__list": {
       padding: 0,
-      paddingLeft: "16px",
+      paddingLeft: "24px",
       boxShadow: "none"
     },
     ".navmenu-item__content": {

package/lib/package.json.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.40",
+  "version": "3.1.42",
   "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": "5e3ea739c926b972f08cf72e113964ef5a82ddf3",
+  "gitHead": "747490bf0ea403cb53f961ae64f0544a75c13703",
   "dependencies": {
-    "@arcblock/bridge": "3.1.40",
+    "@arcblock/bridge": "3.1.42",
     "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.40",
-    "@arcblock/nft-display": "3.1.40",
-    "@arcblock/react-hooks": "3.1.40",
+    "@arcblock/icons": "3.1.42",
+    "@arcblock/nft-display": "3.1.42",
+    "@arcblock/react-hooks": "3.1.42",
     "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473",
-    "@blocklet/theme": "3.1.40",
+    "@blocklet/theme": "3.1.42",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/Config/theme-mode-toggle.tsx

@@ -3,10 +3,19 @@ import {
   LightModeOutlined as LightModeOutlinedIcon,
   Brightness2Outlined as Brightness2OutlinedIcon,
 } from '@mui/icons-material';
+import { useThrottleFn } from 'ahooks';
 import { useColorScheme } from '../Theme/theme-provider';
 
 export default function ThemeModeToggle() {
   const { mode, toggleMode, prefer } = useColorScheme();
+  const { run: toggleModeThrottled } = useThrottleFn(
+    () => {
+      toggleMode();
+    },
+    {
+      wait: 300,
+    }
+  );
 
   if (!toggleMode) {
     if (process.env.NODE_ENV !== 'production') {
@@ -19,7 +28,7 @@ export default function ThemeModeToggle() {
   // 跟随系统才显示切换
   if (prefer === 'system' || window.blocklet?.theme?.prefer === 'system') {
     return (
-      <IconButton onClick={toggleMode}>
+      <IconButton onClick={toggleModeThrottled}>
         {mode === 'light' ? <Brightness2OutlinedIcon /> : <LightModeOutlinedIcon />}
       </IconButton>
     );

package/src/Header/header.tsx

@@ -195,7 +195,7 @@ const Root = styled(Box)`
     .header-menu {
       display: inline-block;
     }
-    .header-logo {
+    .header-brand-wrapper .header-logo {
       height: 32px;
     }
     .header-brand {

package/src/Header/responsive-header.tsx

@@ -94,12 +94,16 @@ function ResponsiveHeader({ prepend, children = null, ...rest }: ResponsiveHeade
           }}
           slotProps={{
             paper: {
-              style: {
+              sx: {
                 top: 64,
                 bottom: 0,
                 boxShadow: 'none',
                 backgroundImage: 'none',
                 backgroundColor: theme.palette.background.paper,
+                '& .navmenu.navmenu--inline': {
+                  margin: 0,
+                  padding: 0,
+                },
               },
             },
           }}>
@@ -117,7 +121,11 @@ const Root = styled(Header)`
   ${(props) => props.theme.breakpoints.down('md')} {
     .header-menu {
       display: flex;
-      margin-right: 12px;
+      padding-left: 6px;
+      padding-right: 6px;
+      min-width: 0;
+      margin-left: -4px;
+      margin-right: 8px;
     }
   }
 `;

package/src/NavMenu/products.tsx

@@ -768,7 +768,7 @@ export default function Products({ className = '', type, ...rest }: ProductsProp
                 </SmartLink>
               ),
               description: t('products.aigneCodeSmith.description'),
-              icon: <AigneIcon color="#56a596" backgroundColor="#e9fcf6" />,
+              icon: <AigneIcon color="#3E5DF7" backgroundColor="#e9f0ff" />,
             },
             {
               label: (
@@ -777,7 +777,7 @@ export default function Products({ className = '', type, ...rest }: ProductsProp
                 </SmartLink>
               ),
               description: t('products.aigneDocSmith.description'),
-              icon: <AigneIcon color="#e46f38" backgroundColor="#f7e0d7" />,
+              icon: <AigneIcon color="#02A996" backgroundColor="#e6f7f5" />,
             },
             {
               label: (

package/src/NavMenu/style.ts

@@ -173,7 +173,7 @@ export const NavMenuItem = styled('li', {
   // inline 布局中
   '&.navmenu-item--inline': {
     margin: 0,
-    padding: '0 16px',
+    padding: 0,
     minHeight: '48px',
     lineHeight: '48px',
     flexWrap: 'wrap',
@@ -225,7 +225,6 @@ export const NavMenuSub = styled(NavMenuItem)(({ theme }) => ({
       position: 'static',
       transform: 'none',
       flex: '1 0 100%',
-      margin: '0 -16px',
       padding: 0,
       height: 0,
       overflow: 'hidden',
@@ -238,7 +237,7 @@ export const NavMenuSub = styled(NavMenuItem)(({ theme }) => ({
     },
     '.navmenu-sub__list': {
       padding: 0,
-      paddingLeft: '16px',
+      paddingLeft: '24px',
       boxShadow: 'none',
     },
     '.navmenu-item__content': {