@blocklet/ui-react 3.1.47 → 3.1.49

package/docs/overview.zh-TW.md

@@ -0,0 +1,91 @@
+# 概覽
+
+`@blocklet/ui-react` 程式庫提供了一系列必要的 React 元件，旨在加速應用程式（稱為 Blocklet）的開發。它透過智慧地使用 blocklet 的元資料，簡化了通用使用者介面元素的建立過程，讓開發者能以最少的精力建構出一致且功能豐富的使用者介面。
+
+此程式庫建構於 `@arcblock/ux` 之上，後者是 Material-UI 的主題化擴充。這個基礎確保了所有元件都堅固、易於存取且易於自訂，以符合您應用程式的品牌形象。
+
+## 解決的問題
+
+現代 Web 應用程式通常需要一套標準的 UI 元件來進行佈局、使用者管理和通知。為每個專案從頭開始實作這些元件既耗時又可能導致不一致。Blocklet UI React 程式庫透過提供預先建構的元件來解決此問題，這些元件會根據您的 blocklet 元資料（`blocklet.yml`）自動進行設定。
+
+這種由元資料驅動的方法意味著，諸如您應用程式的名稱、標誌、導覽連結和主題顏色等元素會自動應用於所有元件，從而大幅減少樣板程式碼並確保品牌一致性。
+
+## 核心架構
+
+此程式庫的架構設計旨在簡潔與自動化。當 `Header` 或 `Footer` 等元件被渲染時，它會從 `window.blocklet` 物件中讀取設定資料，該物件由 Blocklet Server 從您的 `blocklet.yml` 檔案中填入。這讓您可以在一個中央設定檔中定義 UI 的結構和品牌，而元件會相應地進行調整。
+
+```d2
+direction: down
+
+blocklet-yml: {
+  label: "blocklet.yml\n（元資料來源）"
+  shape: rectangle
+}
+
+blocklet-server: {
+  label: "Blocklet Server"
+  shape: rectangle
+}
+
+window-blocklet: {
+  label: "window.blocklet\n（執行期設定）"
+  shape: rectangle
+}
+
+your-app: {
+  label: "您的應用程式"
+  shape: rectangle
+  
+  Header: {
+    label: "<Header />"
+    shape: rectangle
+  }
+  
+  Footer: {
+    label: "<Footer />"
+    shape: rectangle
+  }
+}
+
+rendered-ui: {
+  label: "渲染後的 UI"
+  shape: rectangle
+}
+
+blocklet-yml -> blocklet-server: "1. 定義元資料"
+blocklet-server -> window-blocklet: "2. 在執行期填入"
+window-blocklet -> your-app: "3. 元件讀取設定"
+your-app -> rendered-ui: "4. 渲染已設定的 UI"
+```
+
+## 主要特色
+
+-   **元資料驅動：** 使用您在 `blocklet.yml` 中定義的 blocklet 名稱、標誌和導覽結構，自動設定 `Header` 和 `Footer` 等元件。
+-   **整合式階段作業管理：** 元件與 DID Connect 階段作業無縫整合，自動顯示使用者個人資料資訊、階段作業控制，以及基於角色的導覽連結存取權限。
+-   **響應式佈局：** 包含強大的佈局元件，如 `Dashboard`，可立即為管理介面提供響應式結構。
+-   **元件管理：** 提供 `ComponentInstaller` 和 `BlockletStudio` 等工具，以協助在 Blocklet 生態系統中管理相依性和資源。
+
+## 核心元件
+
+此程式庫分為幾個關鍵模組，每個模組處理應用程式 UI 的特定領域。
+
+<x-cards data-columns="2">
+  <x-card data-title="佈局" data-icon="lucide:layout-template" data-href="/components/layout">
+    構成 blocklet 應用程式主要結構的核心元件，如 Header、Footer 和 Dashboard。
+  </x-card>
+  <x-card data-title="使用者管理" data-icon="lucide:users" data-href="/components/user-management">
+    一套用於處理使用者個人資料、階段作業管理和組織切換的元件。
+  </x-card>
+  <x-card data-title="元件管理" data-icon="lucide:box" data-href="/components/component-management">
+    用於在應用程式內動態安裝、發布和管理 blocklet 元件的工具。
+  </x-card>
+  <x-card data-title="公用程式" data-icon="lucide:wrench" data-href="/components/utilities">
+    一系列輔助元件和公用程式，例如多功能的圖示元件和主題提供者。
+  </x-card>
+</x-cards>
+
+## 總結
+
+透過利用 `@blocklet/ui-react` 程式庫，您可以大幅縮短開發時間，並專注於應用程式的獨特功能。由元資料驅動的方法確保了一致性，並簡化了通用 UI 元素的管理。
+
+要開始建構您的應用程式，請參閱 [入門指南](./getting-started.md)，以取得安裝程式庫和渲染第一個元件的逐步教學。

package/docs/overview.zh.md

@@ -0,0 +1,91 @@
+# 概述
+
+`@blocklet/ui-react` 库提供了一系列核心 React 组件，旨在加速 Blocklet 应用程序的开发。它通过智能地利用 blocklet 的元数据来简化通用用户界面元素的创建，使开发人员能够以最少的工作量构建一致且功能丰富的 UI。
+
+该库基于 `@arcblock/ux` 构建，后者是 Material-UI 的一个主题扩展。这一基础确保了所有组件都功能强大、易于访问，并且可以轻松定制以适应您的应用程序品牌。
+
+## 它解决的问题
+
+现代 Web 应用程序通常需要一套标准的 UI 组件用于布局、用户管理和通知。为每个项目从头开始实施这些组件非常耗时，并可能导致不一致性。Blocklet UI React 库通过提供预构建的组件来解决这个问题，这些组件会根据您的 blocklet 元数据（`blocklet.yml`）自动进行配置。
+
+这种元数据驱动的方法意味着，诸如应用程序名称、徽标、导航链接和主题颜色等元素会自动应用于所有组件，从而极大地减少了样板代码并确保了品牌一致性。
+
+## 核心架构
+
+该库的架构设计旨在实现简洁和自动化。当渲染 `Header` 或 `Footer` 等组件时，它会从 `window.blocklet` 对象中读取配置数据，该对象由 Blocklet Server 从您的 `blocklet.yml` 文件中填充。这使您能够在一个中央配置文件中定义 UI 的结构和品牌，而组件会相应地进行调整。
+
+```d2
+direction: down
+
+blocklet-yml: {
+  label: "blocklet.yml\n（元数据源）"
+  shape: rectangle
+}
+
+blocklet-server: {
+  label: "Blocklet Server"
+  shape: rectangle
+}
+
+window-blocklet: {
+  label: "window.blocklet\n（运行时配置）"
+  shape: rectangle
+}
+
+your-app: {
+  label: "您的应用程序"
+  shape: rectangle
+  
+  Header: {
+    label: "<Header />"
+    shape: rectangle
+  }
+  
+  Footer: {
+    label: "<Footer />"
+    shape: rectangle
+  }
+}
+
+rendered-ui: {
+  label: "渲染后的 UI"
+  shape: rectangle
+}
+
+blocklet-yml -> blocklet-server: "1. 定义元数据"
+blocklet-server -> window-blocklet: "2. 在运行时填充"
+window-blocklet -> your-app: "3. 组件读取配置"
+your-app -> rendered-ui: "4. 渲染配置好的 UI"
+```
+
+## 主要特性
+
+-   **元数据驱动：** 使用您在 `blocklet.yml` 中定义的 blocklet 名称、徽标和导航结构，自动配置 `Header` 和 `Footer` 等组件。
+-   **集成会话管理：** 组件与 DID Connect 会话无缝集成，自动显示用户个人资料信息、会话控制以及基于角色的导航链接访问权限。
+-   **响应式布局：** 包含 `Dashboard` 等强大的布局组件，为管理界面提供开箱即用的响应式结构。
+-   **组件管理：** 提供 `ComponentInstaller` 和 `BlockletStudio` 等工具，帮助在 Blocklet 生态系统中管理依赖项和资源。
+
+## 核心组件
+
+该库分为几个关键模块，每个模块都针对应用程序 UI 的一个特定领域。
+
+<x-cards data-columns="2">
+  <x-card data-title="布局" data-icon="lucide:layout-template" data-href="/components/layout">
+    构成 blocklet 应用程序主要结构的主要组件，如 Header、Footer 和 Dashboard。
+  </x-card>
+  <x-card data-title="用户管理" data-icon="lucide:users" data-href="/components/user-management">
+    一套用于处理用户个人资料、会话管理和组织切换的组件。
+  </x-card>
+  <x-card data-title="组件管理" data-icon="lucide:box" data-href="/components/component-management">
+    用于在应用程序内动态安装、发布和管理 blocklet 组件的工具。
+  </x-card>
+  <x-card data-title="实用工具" data-icon="lucide:wrench" data-href="/components/utilities">
+    一系列辅助组件和实用工具，例如通用的 Icon 组件和主题提供程序。
+  </x-card>
+</x-cards>
+
+## 总结
+
+通过利用 `@blocklet/ui-react` 库，您可以显著减少开发时间，专注于应用程序的独特功能。元数据驱动的方法确保了一致性，并简化了常用 UI 元素的管理。
+
+要开始构建您的应用程序，请参阅 [入门指南](./getting-started.md)，其中提供了关于如何安装该库并渲染您的第一个组件的分步教程。

package/glossary.md

@@ -0,0 +1,12 @@
+## Component Name
+Header
+Footer
+Dashboard
+BlockletStudio
+ComponentInstaller
+PublishComponent
+AddComponent
+CheckComponent
+NotificationComponent
+UserCenter
+UserSessions

package/lib/Dashboard/index.js

@@ -1,23 +1,23 @@
 import { jsx as i } from "react/jsx-runtime";
 import "iconify-icon";
-import { use as I, useMemo as v, useLayoutEffect as w } from "react";
+import { use as R, useMemo as w, useLayoutEffect as L } from "react";
 import t from "prop-types";
-import { SessionContext as R } from "@arcblock/did-connect-react/lib/Session";
-import { useLocaleContext as T } from "@arcblock/ux/lib/Locale/context";
-import z from "@arcblock/ux/lib/Img";
-import A from "@arcblock/ux/lib/Layout/dashboard";
-import C from "@arcblock/ux/lib/hooks/use-blocklet-logo";
-import { SessionManagerProps as D, BlockletMetaProps as M } from "../types.js";
-import { mapRecursive as O, flatRecursive as j, matchPaths as H } from "../utils.js";
-import { formatBlockletInfo as S, getLocalizedNavigation as _, filterNavByRole as E, publicPath as m } from "../blocklets.js";
-import U from "../common/header-addons.js";
-import { useWalletHiddenTopbar as q } from "../common/wallet-hidden-topbar.js";
-function F({
-  meta: s = {},
-  fallbackUrl: a = m,
+import { SessionContext as T } from "@arcblock/did-connect-react/lib/Session";
+import { useLocaleContext as z } from "@arcblock/ux/lib/Locale/context";
+import A from "@arcblock/ux/lib/Img";
+import C from "@arcblock/ux/lib/Layout/dashboard";
+import D from "@arcblock/ux/lib/hooks/use-blocklet-logo";
+import { SessionManagerProps as M, BlockletMetaProps as O } from "../types.js";
+import { mapRecursive as j, flatRecursive as H, matchPaths as S } from "../utils.js";
+import { formatBlockletInfo as _, getLocalizedNavigation as E, filterNavByRole as U, publicPath as m } from "../blocklets.js";
+import q from "../common/header-addons.js";
+import { useWalletHiddenTopbar as F } from "../common/wallet-hidden-topbar.js";
+function G({
+  meta: a = {},
+  fallbackUrl: s = m,
   invalidPathFallback: l = null,
   headerAddons: k = void 0,
-  sessionManagerProps: L = {
+  sessionManagerProps: N = {
     showRole: !0,
     // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
     onLogout: () => {
@@ -25,24 +25,28 @@ function F({
     }
   },
   links: c = [],
-  showDomainWarningDialog: N = !0,
+  showDomainWarningDialog: P = !0,
   ...h
 }) {
-  q();
-  const d = I(R)?.session?.user, g = d?.role, { locale: x } = T() || {}, r = v(() => {
-    const e = Object.assign({}, window.blocklet, s);
+  F();
+  const d = R(T)?.session?.user, g = d?.role, { locale: x, defaultLocale: y } = z() || {}, r = w(() => {
+    const e = Object.assign({}, window.blocklet, a);
     try {
-      return S(e);
+      return _(e);
     } catch (n) {
       return console.error("Failed to format blocklet info", n, e), e;
     }
-  }, [s]), { localizedNav: y, flattened: f, matchedIndex: b } = v(() => {
-    let e = _(r?.navigation?.dashboard, x) || [];
-    e = E(e, g), e = O(
+  }, [a]), { localizedNav: v, flattened: f, matchedIndex: b } = w(() => {
+    let e = E({
+      navigation: r?.navigation?.dashboard,
+      locale: x,
+      defaultLocale: y
+    }) || [];
+    e = U(e, g), e = j(
       e,
       (o) => {
         let u = null;
-        return o.icon && (o.icon.startsWith("http") || o.icon.startsWith("data:") ? u = /* @__PURE__ */ i(z, { src: o.icon }) : u = /* @__PURE__ */ i("iconify-icon", { height: "100%", width: "100%", icon: o.icon })), {
+        return o.icon && (o.icon.startsWith("http") || o.icon.startsWith("data:") ? u = /* @__PURE__ */ i(A, { src: o.icon }) : u = /* @__PURE__ */ i("iconify-icon", { height: "100%", width: "100%", icon: o.icon })), {
           id: o.id,
           title: o.title,
           url: o.link,
@@ -54,37 +58,37 @@ function F({
       },
       "items"
     );
-    const n = j(e).filter((o) => !!o.url), p = H(n.map((o) => o.url));
+    const n = H(e).filter((o) => !!o.url), p = S(n.map((o) => o.url));
     return p !== -1 && (n[p].active = !0), { localizedNav: e, flattened: n, matchedIndex: p };
-  }, [r, x, g]), P = typeof c == "function" ? c(y) : [...y, ...c], W = C({
-    meta: s
+  }, [r, x, y, g]), W = typeof c == "function" ? c(v) : [...v, ...c], B = D({
+    meta: a
   });
-  if (w(() => {
-    d && !f?.length && a && (window.location.href = a);
-  }, [a]), w(() => {
+  if (L(() => {
+    d && !f?.length && s && (window.location.href = s);
+  }, [s]), L(() => {
     d && f?.length && b === -1 && l && l();
   }, [l, f, b]), !r.appName)
     return null;
-  const { appName: B } = r;
+  const { appName: I } = r;
   return /* @__PURE__ */ i(
-    A,
+    C,
     {
-      title: B,
+      title: I,
       fullWidth: !0,
       sidebarWidth: 128,
       legacy: !1,
-      links: P,
+      links: W,
       ...h,
       headerProps: {
         homeLink: m,
-        logo: /* @__PURE__ */ i("img", { src: W, alt: "logo" }),
+        logo: /* @__PURE__ */ i("img", { src: B, alt: "logo" }),
         addons: /* @__PURE__ */ i(
-          U,
+          q,
           {
             formattedBlocklet: r,
             addons: k,
-            sessionManagerProps: L,
-            showDomainWarningDialog: N
+            sessionManagerProps: N,
+            showDomainWarningDialog: P
           }
         ),
         ...h.headerProps
@@ -92,17 +96,17 @@ function F({
     }
   );
 }
-F.propTypes = {
-  meta: M,
+G.propTypes = {
+  meta: O,
   // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
   fallbackUrl: t.string,
   // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
   invalidPathFallback: t.func,
   headerAddons: t.oneOfType([t.func, t.node]),
-  sessionManagerProps: D,
+  sessionManagerProps: M,
   links: t.oneOfType([t.array, t.func]),
   showDomainWarningDialog: t.bool
 };
 export {
-  F as default
+  G as default
 };

package/lib/Footer/index.js

@@ -1,26 +1,26 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useMemo as s } from "react";
-import $ from "prop-types";
-import { styled as F, useTheme as x, deepmerge as T, ThemeProvider as B } from "@arcblock/ux/lib/Theme";
+import { jsx as s } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import F from "prop-types";
+import { styled as x, useTheme as T, deepmerge as B, ThemeProvider as L } from "@arcblock/ux/lib/Theme";
 import { withErrorBoundary as M } from "react-error-boundary";
 import { useLocaleContext as N } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback as w } from "@arcblock/ux/lib/ErrorBoundary";
-import L from "@arcblock/ux/lib/hooks/use-blocklet-logo";
-import j from "lodash/omit";
-import C from "./internal-footer.js";
-import { mapRecursive as E } from "../utils.js";
-import { formatBlockletInfo as I, getLocalizedNavigation as l } from "../blocklets.js";
-import { BlockletMetaProps as P } from "../types.js";
-import z from "../libs/with-hide-when-embed.js";
-function d({ meta: o = {}, theme: t = {}, ...n }) {
-  const { locale: i } = N() || {}, c = x(), r = s(() => {
+import j from "@arcblock/ux/lib/hooks/use-blocklet-logo";
+import C from "lodash/omit";
+import E from "./internal-footer.js";
+import { mapRecursive as I } from "../utils.js";
+import { formatBlockletInfo as P, getLocalizedNavigation as l } from "../blocklets.js";
+import { BlockletMetaProps as z } from "../types.js";
+import D from "../libs/with-hide-when-embed.js";
+function f({ meta: o = {}, theme: t = {}, ...c }) {
+  const { locale: i, defaultLocale: a } = N() || {}, m = T(), r = d(() => {
     const e = Object.assign({}, window.blocklet, o);
     try {
-      return I(e);
-    } catch (v) {
-      return console.error("Failed to format blocklet info", v, e), e;
+      return P(e);
+    } catch ($) {
+      return console.error("Failed to format blocklet info", $, e), e;
     }
-  }, [o]), m = s(() => T(c, t), [c, t]), f = L({
+  }, [o]), p = d(() => B(m, t), [m, t]), b = j({
     key: "xs",
     // 始终优先长 logo
     meta: o,
@@ -28,18 +28,33 @@ function d({ meta: o = {}, theme: t = {}, ...n }) {
   });
   if (!r.appName)
     return null;
-  const { appName: b, appDescription: k, description: g, copyright: u } = r, h = m.palette.background.default, a = {
-    footerNav: l(r?.navigation?.footer, i, "footer") || [],
-    socialMedia: l(r?.navigation?.social, i, "footer") || [],
-    links: l(r?.navigation?.bottom, i, "footer") || []
+  const { appName: g, appDescription: k, description: u, copyright: h } = r, v = p.palette.background.default, n = {
+    footerNav: l({
+      navigation: r?.navigation?.footer,
+      locale: i,
+      defaultLocale: a,
+      section: "footer"
+    }) || [],
+    socialMedia: l({
+      navigation: r?.navigation?.social,
+      locale: i,
+      defaultLocale: a,
+      section: "footer"
+    }) || [],
+    links: l({
+      navigation: r?.navigation?.bottom,
+      locale: i,
+      defaultLocale: a,
+      section: "footer"
+    }) || []
   }, y = {
     brand: {
-      name: b,
-      description: k || g,
-      logo: f
+      name: g,
+      description: k || u,
+      logo: b
     },
-    navigation: E(
-      a.footerNav,
+    navigation: I(
+      n.footerNav,
       (e) => ({
         ...e,
         label: e.title,
@@ -47,24 +62,24 @@ function d({ meta: o = {}, theme: t = {}, ...n }) {
       }),
       "items"
     ),
-    copyright: u,
-    socialMedia: a.socialMedia,
-    links: a.links.map((e) => ({ ...e, label: e.title }))
+    copyright: h,
+    socialMedia: n.socialMedia,
+    links: n.links.map((e) => ({ ...e, label: e.title }))
   };
-  return /* @__PURE__ */ p(B, { theme: m, children: /* @__PURE__ */ p(D, { ...y, ...j(n, ["bordered"]), $bordered: n?.bordered, $bgcolor: h }) });
+  return /* @__PURE__ */ s(L, { theme: p, children: /* @__PURE__ */ s(H, { ...y, ...C(c, ["bordered"]), $bordered: c?.bordered, $bgcolor: v }) });
 }
-d.propTypes = {
-  meta: P,
+f.propTypes = {
+  meta: z,
   // 允许覆盖 footer 内置的 theme
-  theme: $.object
+  theme: F.object
 };
-const D = F(C)`
+const H = x(E)`
   ${({ $bordered: o, theme: t }) => `border-top: 1px solid ${o && t.palette.divider};`}
   color: ${({ theme: o }) => o.palette.text.secondary};
   ${({ $bgcolor: o }) => o && `background-color: ${o};`}
-`, Z = M(z(d), {
+`, _ = M(D(f), {
   FallbackComponent: w
 });
 export {
-  Z as default
+  _ as default
 };

package/lib/Header/index.js

@@ -1,25 +1,25 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useMemo as f } from "react";
-import { useMemoizedFn as N } from "ahooks";
-import { withErrorBoundary as $ } from "react-error-boundary";
-import { ErrorFallback as C } from "@arcblock/ux/lib/ErrorBoundary";
-import { styled as H, useTheme as _, deepmerge as w, ThemeProvider as A } from "@arcblock/ux/lib/Theme";
+import { useMemoizedFn as $ } from "ahooks";
+import { withErrorBoundary as C } from "react-error-boundary";
+import { ErrorFallback as H } from "@arcblock/ux/lib/ErrorBoundary";
+import { styled as _, useTheme as w, deepmerge as A, ThemeProvider as L } from "@arcblock/ux/lib/Theme";
 import { ResponsiveHeader as B } from "@arcblock/ux/lib/Header";
-import L, { Products as M } from "@arcblock/ux/lib/NavMenu";
-import { useLocaleContext as R } from "@arcblock/ux/lib/Locale/context";
-import { translate as z } from "@arcblock/ux/lib/Locale/util";
-import F from "@arcblock/ux/lib/hooks/use-blocklet-logo";
-import O from "lodash/omit";
+import M, { Products as R } from "@arcblock/ux/lib/NavMenu";
+import { useLocaleContext as z } from "@arcblock/ux/lib/Locale/context";
+import { translate as F } from "@arcblock/ux/lib/Locale/util";
+import O from "@arcblock/ux/lib/hooks/use-blocklet-logo";
+import P from "lodash/omit";
 import I from "lodash/isFinite";
-import P from "clsx";
-import { getUTMUrl as U } from "@arcblock/ux/lib/withTracker/libs/utm";
-import W from "../Icon/index.js";
-import { mapRecursive as j, flatRecursive as S, matchPaths as G } from "../utils.js";
-import { formatBlockletInfo as K, getLocalizedNavigation as q, publicPath as D } from "../blocklets.js";
-import J from "../common/header-addons.js";
-import { useWalletHiddenTopbar as Q } from "../common/wallet-hidden-topbar.js";
-import V from "../libs/with-hide-when-embed.js";
-const X = {
+import U from "clsx";
+import { getUTMUrl as W } from "@arcblock/ux/lib/withTracker/libs/utm";
+import j from "../Icon/index.js";
+import { mapRecursive as S, flatRecursive as G, matchPaths as K } from "../utils.js";
+import { formatBlockletInfo as q, getLocalizedNavigation as D, publicPath as J } from "../blocklets.js";
+import Q from "../common/header-addons.js";
+import { useWalletHiddenTopbar as V } from "../common/wallet-hidden-topbar.js";
+import X from "../libs/with-hide-when-embed.js";
+const Y = {
   en: {
     products: "Products"
   },
@@ -32,12 +32,12 @@ const X = {
   ja: {
     products: "製品"
   }
-}, Y = (r) => {
+}, Z = (r) => {
   if (!r?.length)
     return { navItems: [], activeId: null };
   let t = 1;
-  const c = j(r, (e) => {
-    const i = e.icon ? /* @__PURE__ */ a(W, { icon: e.icon }) : null;
+  const c = S(r, (e) => {
+    const i = e.icon ? /* @__PURE__ */ a(j, { icon: e.icon }) : null;
     if (e.items)
       return {
         id: `${t++}`,
@@ -51,35 +51,35 @@ const X = {
       rel: "noreferrer"
     }), {
       id: `${t++}`,
-      label: /* @__PURE__ */ a("a", { href: U(e.link, "header"), ...s, children: e.title }),
+      label: /* @__PURE__ */ a("a", { href: W(e.link, "header"), ...s, children: e.title }),
       icon: i,
       description: e.description,
       link: e.link
     };
-  }, "items"), l = S(c), p = G(l.map((e) => e.link));
+  }, "items"), l = G(c), p = K(l.map((e) => e.link));
   return { navItems: c, activeId: p >= 0 ? l[p].id : null };
 };
-function Z({
+function ee({
   meta: r = {},
   addons: t = void 0,
   sessionManagerProps: h = {
     showRole: !0
   },
-  homeLink: c = D,
+  homeLink: c = J,
   theme: l = {},
   hideNavMenu: p = !1,
   showDomainWarningDialog: e = !0,
   ...i
 }) {
-  Q();
-  const s = _(), { locale: g } = R() || {}, T = N((o, n = {}) => z(X, o, g, "en", n)), d = f(() => {
+  V();
+  const s = w(), { locale: g, defaultLocale: T } = z() || {}, x = $((o, n = {}) => F(Y, o, g, "en", n)), d = f(() => {
     const o = Object.assign({}, window.blocklet, r);
     try {
-      return K(o);
+      return q(o);
     } catch (n) {
       return console.error("Failed to format blocklet info", n, o), o;
     }
-  }, [r]), m = f(() => w(s, l), [s, l]), x = F({
+  }, [r]), m = f(() => A(s, l), [s, l]), y = O({
     meta: r,
     theme: l
   }), { productsOrder: b, productsType: k } = f(() => {
@@ -97,20 +97,24 @@ function Z({
   }, [d]);
   if (!d.appName)
     return null;
-  const y = q(d?.navigation?.header, g), v = Y(y), { navItems: u, activeId: E } = v;
+  const E = D({
+    navigation: d?.navigation?.header,
+    locale: g,
+    defaultLocale: T
+  }), v = Z(E), { navItems: u, activeId: N } = v;
   return k && Number.isInteger(b) && u.splice(b, 0, {
-    label: T("products"),
+    label: x("products"),
     // eslint-disable-next-line react/no-unstable-nested-components
-    children: () => /* @__PURE__ */ a(M, { type: k })
-  }), /* @__PURE__ */ a(A, { theme: m, children: /* @__PURE__ */ a(
-    ee,
+    children: () => /* @__PURE__ */ a(R, { type: k })
+  }), /* @__PURE__ */ a(L, { theme: m, children: /* @__PURE__ */ a(
+    oe,
     {
       homeLink: c,
-      logo: /* @__PURE__ */ a("img", { src: x, alt: "logo" }),
+      logo: /* @__PURE__ */ a("img", { src: y, alt: "logo" }),
       addons: (
         // @ts-ignore
         /* @__PURE__ */ a(
-          J,
+          Q,
           {
             formattedBlocklet: d,
             addons: typeof t == "function" ? (o) => t(o, { navigation: v }) : t,
@@ -119,17 +123,17 @@ function Z({
           }
         )
       ),
-      ...O(i, ["bordered"]),
+      ...P(i, ["bordered"]),
       $bordered: i?.bordered,
       $bgcolor: m.palette.background.default,
-      className: P("blocklet__header", i.className),
+      className: U("blocklet__header", i.className),
       children: p || !u?.length ? null : ({ isMobile: o }) => (
         // @ts-ignore
         /* @__PURE__ */ a(
-          L,
+          M,
           {
             mode: o ? "inline" : "horizontal",
-            activeId: E,
+            activeId: N,
             items: u,
             className: "header-nav",
             bgColor: "transparent",
@@ -141,7 +145,7 @@ function Z({
     }
   ) });
 }
-const ee = H(B)`
+const oe = _(B)`
   ${({ $bgcolor: r }) => `background-color: ${r || "#fff"};`}
   .header-logo {
     min-width: 44px;
@@ -152,9 +156,9 @@ const ee = H(B)`
       min-width: 32px;
     }
   }
-`, Ee = $(V(Z), {
-  FallbackComponent: C
+`, Ne = C(X(ee), {
+  FallbackComponent: H
 });
 export {
-  Ee as default
+  Ne as default
 };

package/lib/UserCenter/components/settings.js

@@ -46,6 +46,7 @@ function Y({
     {
       label: n("privacyManagement"),
       value: "privacy",
+      // @ts-ignore
       content: /* @__PURE__ */ o(T, { configList: f, onSave: m })
     },
     {