@blocklet/ui-react 3.2.18 → 3.2.19

package/lib/Dashboard/app-shell/app-header.js

@@ -1,29 +1,37 @@
-import { jsxs as s, jsx as e, Fragment as f } from "react/jsx-runtime";
-import { isValidElement as g } from "react";
-import { Box as t, Stack as y, Typography as p, useMediaQuery as v } from "@mui/material";
-import M from "@arcblock/ux/lib/Tabs";
-import B from "./app-badge.js";
-import { useAppInfo as I } from "./app-info-context.js";
-function h() {
-  return v((r) => r.breakpoints.down("md"));
+import { jsxs as l, jsx as e, Fragment as y } from "react/jsx-runtime";
+import { useEffect as I, isValidElement as M } from "react";
+import { Box as r, Stack as A, Typography as f, useMediaQuery as B } from "@mui/material";
+import j from "@arcblock/ux/lib/Tabs";
+import w from "./app-badge.js";
+import { useAppInfo as C } from "./app-info-context.js";
+function b() {
+  return B((i) => i.breakpoints.down("md"));
 }
-function x({ sx: i = {} }) {
-  const r = h();
-  return /* @__PURE__ */ e(t, { sx: { mx: r ? -2 : -3, borderBottom: "1px solid", borderColor: "divider", mt: 1.5, mb: 1, ...i } });
+function h({ sx: t = {} }) {
+  const i = b();
+  return /* @__PURE__ */ e(r, { sx: { mx: i ? -2 : -3, borderBottom: "1px solid", borderColor: "divider", mt: 1.5, mb: 1, ...t } });
 }
-function H({ onTabChange: i = void 0 }) {
-  const r = h(), {
-    icon: a = void 0,
-    name: d = "",
-    description: m = void 0,
-    actions: n = void 0,
-    badges: c = [],
-    tabs: l = [],
-    currentTab: u = ""
-  } = I();
-  return d ? /* @__PURE__ */ s(t, { className: "app-header", sx: { mt: 3, mb: 3 }, children: [
-    /* @__PURE__ */ s(
-      t,
+function D({ onTabChange: t = void 0 }) {
+  const i = b(), {
+    inService: d,
+    navItem: n,
+    icon: m = void 0,
+    name: p = "",
+    description: c = void 0,
+    actions: o = void 0,
+    badges: x = [],
+    tabs: a = [],
+    currentTab: g = "",
+    updateAppInfo: u
+  } = C();
+  return I(() => {
+    d || u({
+      name: n?.title || "",
+      description: n?.description || ""
+    });
+  }, [n?.title, n?.description, d, u]), p ? /* @__PURE__ */ l(r, { className: "app-header", sx: { mt: 3, mb: 3 }, children: [
+    /* @__PURE__ */ l(
+      r,
       {
         sx: {
           display: "flex",
@@ -31,34 +39,34 @@ function H({ onTabChange: i = void 0 }) {
           gap: 1
         },
         children: [
-          a && /* @__PURE__ */ e(t, { sx: { display: "flex", alignItems: "center", justifyContent: "center" }, children: a }),
-          /* @__PURE__ */ s(y, { sx: { flexGrow: 1 }, children: [
-            /* @__PURE__ */ e(p, { variant: "h1", sx: { mb: 0.5 }, children: d }),
-            m && /* @__PURE__ */ e(
-              p,
+          m && /* @__PURE__ */ e(r, { sx: { display: "flex", alignItems: "center", justifyContent: "center" }, children: m }),
+          /* @__PURE__ */ l(A, { sx: { flexGrow: 1 }, children: [
+            /* @__PURE__ */ e(f, { variant: "h1", sx: { mb: 0.5 }, children: p }),
+            c && /* @__PURE__ */ e(
+              f,
               {
                 variant: "body2",
                 color: "text.secondary",
                 sx: { lineHeight: 1.6, "& a": { color: "primary.main" }, maxWidth: 980 },
-                children: m
+                children: c
               }
             )
           ] }),
-          !r && n && /* @__PURE__ */ e(t, { sx: { ml: 1 }, children: n })
+          !i && o && /* @__PURE__ */ e(r, { sx: { ml: 1 }, children: o })
         ]
       }
     ),
-    c.length > 0 && /* @__PURE__ */ e(t, { sx: { display: "flex", flexWrap: "wrap", gap: 1, alignItems: "center", mt: 2 }, children: c.map(
-      (o, b) => g(o) ? o : /* @__PURE__ */ e(B, { ...o }, o.label || b)
+    x.length > 0 && /* @__PURE__ */ e(r, { sx: { display: "flex", flexWrap: "wrap", gap: 1, alignItems: "center", mt: 2 }, children: x.map(
+      (s, v) => M(s) ? s : /* @__PURE__ */ e(w, { ...s }, s.label || v)
     ) }),
-    r && n && /* @__PURE__ */ e(t, { sx: { mt: r ? 2 : 0 }, children: n }),
-    l.length <= 1 && /* @__PURE__ */ e(x, {}),
-    l.length > 1 && /* @__PURE__ */ s(f, { children: [
-      /* @__PURE__ */ e(M, { tabs: l, current: u, onChange: i, scrollButtons: "auto", sx: { mt: 2.5 } }),
-      /* @__PURE__ */ e(x, { sx: { mt: 0 } })
+    i && o && /* @__PURE__ */ e(r, { sx: { mt: i ? 2 : 0 }, children: o }),
+    a.length <= 1 && /* @__PURE__ */ e(h, {}),
+    a.length > 1 && /* @__PURE__ */ l(y, { children: [
+      /* @__PURE__ */ e(j, { tabs: a, current: g, onChange: t, scrollButtons: "auto", sx: { mt: 2.5 } }),
+      /* @__PURE__ */ e(h, { sx: { mt: 0 } })
     ] })
   ] }) : null;
 }
 export {
-  H as default
+  D as default
 };

package/lib/Dashboard/app-shell/app-info-context.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { Locale } from '@arcblock/ux/lib/type';
 import { AppBadgeProps } from './app-badge';
 export type NavItem = {
     id: string;
@@ -22,11 +23,14 @@ export interface AppInfo {
     currentTab?: string;
 }
 export interface AppInfoContextValue extends AppInfo {
+    inService: boolean;
     currentTab: string;
     TabComponent: React.ComponentType | React.ReactNode;
     navItem?: NavItem;
     updateAppInfo: (patch: Partial<AppInfo>) => void;
 }
+export declare const getI18nVal: (obj: Record<string, string | Record<Locale, string>>, key: string, locale?: Locale) => any;
+export declare const findNavItem: (items: NavItem[], targetLink?: string, locale?: Locale) => null;
 interface AppInfoProviderProps {
     path?: string;
     currentTab?: string;

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.2.19",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "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/bridge": "3.2.19",
+    "@arcblock/icons": "3.2.19",
+    "@arcblock/react-hooks": "3.2.19",
     "@arcblock/ws": "^1.27.15",
     "@blocklet/did-space-react": "^1.2.10",
     "@iconify-icons/logos": "^1.2.36",
@@ -82,7 +82,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.2.18",
+    "@arcblock/did-connect-react": "3.2.19",
     "@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": "8439c6a0c022c3fab219191ff035d737c422f3ff"
 }

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,