@blocklet/ui-react 3.2.18 → 3.3.0

package/lib/Dashboard/app-shell/app-info-context.js

@@ -1,69 +1,83 @@
-import { jsx as x } from "react/jsx-runtime";
-import { createContext as h, useState as L, useMemo as T, useEffect as w, useContext as M } from "react";
-import { useCreation as A, useMemoizedFn as O } from "ahooks";
-import { withoutTrailingSlash as P } from "ufo";
-import W from "lodash/isPlainObject";
-import { WELLKNOWN_BLOCKLET_ADMIN_PATH as j } from "@abtnode/constant";
-import { useLocaleContext as E } from "@arcblock/ux/lib/Locale/context";
-const C = h({
+import { jsx as C } from "react/jsx-runtime";
+import { createContext as k, useState as L, useMemo as M, useContext as P } from "react";
+import { useCreation as b, useMemoizedFn as T } from "ahooks";
+import { withoutTrailingSlash as w } from "ufo";
+import N from "lodash/isPlainObject";
+import { WELLKNOWN_BLOCKLET_ADMIN_PATH as O } from "@abtnode/constant";
+import { useLocaleContext as S } from "@arcblock/ux/lib/Locale/context";
+const A = k({
+  inService: !1,
   currentTab: "",
   TabComponent: null,
   navItem: void 0,
   updateAppInfo: () => {
   }
-}), u = (s, a, d = "en") => {
-  const o = s?.[a];
-  return W(o) ? o[d] || o.en : o;
+}), h = (l, r, c = "en") => {
+  const n = l?.[r];
+  return N(n) ? n[c] || n.en : n;
+}, j = (l, r = "", c = "en") => {
+  const n = r === "/" ? ["/"] : r.split("/").filter(Boolean);
+  let e = null, d = 0;
+  return l.forEach((s) => {
+    const m = h(s, "link", c) || "", i = m === "/" ? ["/"] : m.split("/").filter(Boolean);
+    if (i.length > n.length)
+      return;
+    let p = !0;
+    for (let u = 0; u < i.length; u++)
+      if (i[u] !== n[u]) {
+        p = !1;
+        break;
+      }
+    p && i.length > d && (e = s, d = i.length);
+  }), e;
 };
-function D({
-  path: s = window?.location?.pathname || "",
-  currentTab: a = "",
-  meta: d = void 0,
-  children: o = null
+function z({
+  path: l = window?.location?.pathname || "",
+  currentTab: r = "",
+  meta: c = void 0,
+  children: n = null
 }) {
-  const { locale: i = "en" } = E() || {}, I = P(s), f = I.startsWith(j), b = A(() => Object.assign({}, window.blocklet, d), [d]), r = A(() => {
-    const n = b.navigation?.filter(
-      (e) => Array.isArray(e.section) ? e.section.includes("dashboard") : e.section === "dashboard"
-    ), t = n?.flatMap((e) => e.items || [])?.find((e) => (u(e, "link", i) || "").startsWith(I));
+  const { locale: e = "en" } = S() || {}, d = w(l), s = d.startsWith(O), m = b(() => Object.assign({}, window.blocklet, c), [c]), i = b(() => {
+    const o = m.navigation?.filter(
+      (a) => Array.isArray(a.section) ? a.section.includes("dashboard") : a.section === "dashboard"
+    ), f = o?.flatMap((a) => a.items || []), t = j(f, d, e);
     if (!t)
       return;
-    const l = n.find((e) => e.id === t.parent);
-    let p = u(t, "title", i) || "";
-    return f || (p = `${u(l, "title", i) || ""} - ${p}`), {
+    const v = o.find((a) => a.id === t.parent);
+    let g = h(t, "title", e) || "";
+    return s || (g = `${h(v, "title", e) || ""} - ${g}`), {
       id: t.id,
       parent: t.parent,
-      title: p,
-      link: u(t, "link", i) || "",
-      description: u(t, "description", i) || ""
+      title: g,
+      link: h(t, "link", e) || "",
+      description: h(t, "description", e) || ""
     };
-  }, [s, f, i, b]), [v, g] = L({}), m = O((n) => {
-    g((c) => ({ ...c, ...n }));
-  }), k = T(
+  }, [l, s, e, m]), [p, u] = L({}), I = T((o) => {
+    u((f) => ({ ...f, ...o }));
+  }), x = M(
     () => {
-      const { tabs: n = [] } = v, c = n.find((p) => p.value === a);
-      let t = a, l = null;
-      return !c && n.length > 0 ? (t = n[0].value, l = n[0].render || null) : l = c?.render || null, {
-        ...v,
-        navItem: r,
+      const { tabs: o = [] } = p, f = o.find((g) => g.value === r);
+      let t = r, v = null;
+      return !f && o.length > 0 ? (t = o[0].value, v = o[0].render || null) : v = f?.render || null, {
+        ...p,
+        inService: s,
+        navItem: i,
         currentTab: t,
-        TabComponent: l,
-        updateAppInfo: m
+        TabComponent: v,
+        updateAppInfo: I
       };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [v, r, a, m]
+    [p, i, s, r, I]
   );
-  return w(() => {
-    f || m({
-      name: r?.title || "",
-      description: r?.description || ""
-    });
-  }, [r?.title, r?.description, f, m]), /* @__PURE__ */ x(C.Provider, { value: k, children: o });
+  return /* @__PURE__ */ C(A.Provider, { value: x, children: n });
 }
-function F() {
-  return M(C);
+function D() {
+  return P(A);
 }
 export {
-  D as AppInfoProvider,
-  F as useAppInfo
+  z as AppInfoProvider,
+  j as findNavItem,
+  h as getI18nVal,
+  D as useAppInfo
 };

package/lib/Dashboard/index.d.ts

@@ -7,7 +7,7 @@ export default Dashboard;
  */
 declare function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, showDomainWarningDialog, appPath, appTab, onAppTabChange, children, ...rest }: {
     [x: string]: any;
-    meta?: {} | undefined;
+    meta?: undefined;
     fallbackUrl?: any;
     invalidPathFallback?: null | undefined;
     headerAddons?: undefined;

package/lib/Dashboard/index.js

@@ -17,7 +17,7 @@ import { default as yo } from "./app-shell/app-badge.js";
 import { AppInfoProvider as Y } from "./app-shell/app-info-context.js";
 import { useAppInfo as Ao } from "./app-shell/app-info-context.js";
 function Z({
-  meta: a = {},
+  meta: a = void 0,
   fallbackUrl: s = m,
   invalidPathFallback: l = null,
   headerAddons: L = void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.2.18",
+  "version": "3.3.0",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,13 +33,13 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@abtnode/constant": "^1.17.5",
-    "@abtnode/util": "^1.17.5",
-    "@arcblock/bridge": "3.2.18",
-    "@arcblock/icons": "3.2.18",
-    "@arcblock/react-hooks": "3.2.18",
-    "@arcblock/ws": "^1.27.15",
-    "@blocklet/did-space-react": "^1.2.10",
+    "@abtnode/constant": "^1.17.6",
+    "@abtnode/util": "^1.17.6",
+    "@arcblock/bridge": "3.3.0",
+    "@arcblock/icons": "3.3.0",
+    "@arcblock/react-hooks": "3.3.0",
+    "@arcblock/ws": "^1.27.16",
+    "@blocklet/did-space-react": "^1.2.11",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/tabler": "^1.2.95",
@@ -82,7 +82,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.2.18",
+    "@arcblock/did-connect-react": "3.3.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
@@ -96,5 +96,5 @@
     "typescript": "~5.5.4",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "2637c095bf07f3fd8feb5f06ca6aff993a3be29b"
+  "gitHead": "d23472b198c0bf05d452976ebefedab5cb6d047f"
 }

package/src/Dashboard/app-shell/app-header.tsx

@@ -1,4 +1,4 @@
-import { isValidElement } from 'react';
+import { isValidElement, useEffect } from 'react';
 import { Box, Stack, Typography, useMediaQuery, SxProps, Theme } from '@mui/material';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import AppBadge from './app-badge';
@@ -29,6 +29,8 @@ interface AppHeaderProps {
 function AppHeader({ onTabChange = undefined }: AppHeaderProps) {
   const isMobile = useMobile();
   const {
+    inService,
+    navItem,
     icon = undefined,
     name = '',
     description = undefined,
@@ -36,8 +38,19 @@ function AppHeader({ onTabChange = undefined }: AppHeaderProps) {
     badges = [],
     tabs = [],
     currentTab = '',
+    updateAppInfo,
   } = useAppInfo();
 
+  // 非 Service 应用，自动更新 name / description
+  useEffect(() => {
+    if (!inService) {
+      updateAppInfo({
+        name: navItem?.title || '',
+        description: navItem?.description || '',
+      });
+    }
+  }, [navItem?.title, navItem?.description, inService, updateAppInfo]);
+
   if (!name) {
     return null;
   }

package/src/Dashboard/app-shell/app-info-context.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext, useMemo, useEffect } from 'react';
+import React, { createContext, useState, useContext, useMemo } from 'react';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { withoutTrailingSlash } from 'ufo';
 import isPlainObject from 'lodash/isPlainObject';
@@ -32,6 +32,7 @@ export interface AppInfo {
 }
 
 export interface AppInfoContextValue extends AppInfo {
+  inService: boolean;
   currentTab: string;
   TabComponent: React.ComponentType | React.ReactNode;
   navItem?: NavItem;
@@ -39,19 +40,56 @@ export interface AppInfoContextValue extends AppInfo {
 }
 
 const AppInfoContext = createContext<AppInfoContextValue>({
+  inService: false,
   currentTab: '',
   TabComponent: null,
   navItem: undefined,
   updateAppInfo: () => {},
 });
 
-const getI18nVal = (obj: Record<string, string | Record<Locale, string>>, key: string, locale: Locale = 'en') => {
+export const getI18nVal = (
+  obj: Record<string, string | Record<Locale, string>>,
+  key: string,
+  locale: Locale = 'en'
+) => {
   const val = obj?.[key];
 
   // @ts-ignore
   return isPlainObject(val) ? val[locale] || val.en : val;
 };
 
+// 基于前缀匹配算法查找 NavItem
+export const findNavItem = (items: NavItem[], targetLink: string = '', locale: Locale = 'en') => {
+  const targetParts = targetLink === '/' ? ['/'] : targetLink.split('/').filter(Boolean);
+
+  let result: NavItem | null = null;
+  let maxLen = 0;
+
+  items.forEach((item) => {
+    const currentLink = getI18nVal(item, 'link', locale) || '';
+    const currentParts = currentLink === '/' ? ['/'] : currentLink.split('/').filter(Boolean);
+
+    if (currentParts.length > targetParts.length) {
+      return;
+    }
+
+    let isMatch = true;
+    for (let i = 0; i < currentParts.length; i++) {
+      if (currentParts[i] !== targetParts[i]) {
+        isMatch = false;
+        break;
+      }
+    }
+
+    if (isMatch && currentParts.length > maxLen) {
+      result = item;
+      maxLen = currentParts.length;
+    }
+  });
+
+  return result;
+};
+
 interface AppInfoProviderProps {
   path?: string;
   currentTab?: string;
@@ -77,12 +115,8 @@ export function AppInfoProvider({
       Array.isArray(v.section) ? v.section.includes('dashboard') : v.section === 'dashboard'
     );
     const items: NavItem[] = navigations?.flatMap((v: { items?: NavItem[] }) => v.items || []);
-
-    // 根据路由查找 navItem
-    const item = items?.find((v) => {
-      const link = getI18nVal(v, 'link', locale) || '';
-      return link.startsWith(targetLink);
-    });
+    // 前缀匹配 navItem
+    const item = findNavItem(items, targetLink, locale);
 
     if (!item) {
       return undefined;
@@ -128,6 +162,7 @@ export function AppInfoProvider({
 
       return {
         ...appInfo,
+        inService,
         navItem,
         currentTab: ctab,
         TabComponent,
@@ -135,19 +170,9 @@ export function AppInfoProvider({
       };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [appInfo, navItem, currentTab, updateAppInfo]
+    [appInfo, navItem, inService, currentTab, updateAppInfo]
   );
 
-  // 非 Service 应用，动态更新 name / description
-  useEffect(() => {
-    if (!inService) {
-      updateAppInfo({
-        name: navItem?.title || '',
-        description: navItem?.description || '',
-      });
-    }
-  }, [navItem?.title, navItem?.description, inService, updateAppInfo]);
-
   return <AppInfoContext.Provider value={value}>{children}</AppInfoContext.Provider>;
 }
 

package/src/Dashboard/index.jsx

@@ -19,7 +19,7 @@ import { AppHeader, AppBadge, AppInfoProvider, useAppInfo } from './app-shell';
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
  */
 function Dashboard({
-  meta = {},
+  meta = undefined,
   fallbackUrl = publicPath,
   invalidPathFallback = null,
   headerAddons = undefined,