@blocklet/ui-react 2.12.0 → 2.12.2

package/lib/Footer/brand.js

@@ -41,21 +41,23 @@ const Root = styled("div")`
   .footer-brand-logo {
     display: flex;
     align-items: center;
-    margin-right: 16px;
+    margin-right: 12px;
     line-height: 1;
     img,
     svg {
       width: auto;
-      height: 44px;
-      max-height: 44px;
+      height: 40px;
+      max-height: 40px;
     }
   }
   .footer-brand-name {
-    font-size: 16px;
-    font-weight: bold;
+    font-size: 18px;
+    color: ${(props) => props.theme.palette.grey[900]};
   }
   .footer-brand-desc {
+    white-space: pre-line;
     margin-top: 16px;
+    color: #9397a1;
   }
 
   ${(props) => props.theme.breakpoints.down("sm")} {

package/lib/Footer/index.js

@@ -1,12 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import PropTypes from "prop-types";
+import { useCreation } from "ahooks";
 import { styled } from "@arcblock/ux/lib/Theme";
 import { withErrorBoundary } from "react-error-boundary";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
 import omit from "lodash/omit";
+import isFinite from "lodash/isFinite";
 import OverridableThemeProvider from "../common/overridable-theme-provider.js";
 import InternalFooter from "./internal-footer.js";
 import { mapRecursive } from "../utils.js";
@@ -24,12 +26,32 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
       return blocklet;
     }
   }, [meta]);
+  const productsNav = useCreation(() => {
+    return {
+      title: { en: "Products", zh: "\u4EA7\u54C1" },
+      section: ["footer"],
+      items: [
+        { title: "ArcSphere", link: `https://www.arcblock.io/content/tags/${locale}/arcsphere`, isNew: true },
+        { title: "DID Wallet", link: `https://www.didwallet.io/${locale}` },
+        { title: "DID Spaces", link: `https://www.didspaces.com/${locale}` },
+        { title: "DID Name Service", link: `https://www.didnames.io/${locale}` },
+        { title: "Blocklet Launcher", link: `https://launcher.arcblock.io/${locale}` },
+        { title: "Blocklet Server", link: `https://www.arcblock.io/content/collections/${locale}/blocklet-server` },
+        { title: "AIGNE", link: `https://www.aigne.io/${locale}` }
+      ]
+    };
+  }, [locale]);
   if (!formattedBlocklet.appName) {
     return null;
   }
   const { appLogo, appLogoRect, appName, appDescription, description, theme, copyright } = formattedBlocklet;
+  const navFooter = [...formattedBlocklet?.navigation?.footer ?? []];
+  const productsNavOrder = parseInt(window.blocklet?.USE_ARCBLOCK_THEME, 10);
+  if (isFinite(productsNavOrder)) {
+    navFooter.splice(productsNavOrder, 0, productsNav);
+  }
   const localized = {
-    footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale) || [],
+    footerNav: getLocalizedNavigation(navFooter, locale) || [],
     socialMedia: getLocalizedNavigation(formattedBlocklet?.navigation?.social, locale) || [],
     links: getLocalizedNavigation(formattedBlocklet?.navigation?.bottom, locale) || []
   };

package/lib/Footer/internal-footer.js

@@ -29,7 +29,7 @@ function InternalFooter(props) {
     return brand ? /* @__PURE__ */ jsx(Brand, { ...brand }) : null;
   };
   const renderNavigation = () => {
-    return navigation?.length ? /* @__PURE__ */ jsx(Links, { links: navigation }) : null;
+    return navigation?.length ? /* @__PURE__ */ jsx(Links, { links: navigation, columns: 3 }) : null;
   };
   const renderSocialMedia = () => {
     return socialMedia?.length ? /* @__PURE__ */ jsx(SocialMedia, { items: socialMedia }) : null;

package/lib/Footer/layout/standard.d.ts

@@ -2,14 +2,16 @@ export default StandardLayout;
 /**
  * footer standard layout
  */
-declare function StandardLayout({ elements, data, ...rest }: {
+declare function StandardLayout({ elements, data, className, ...rest }: {
     [x: string]: any;
     elements: any;
     data: any;
+    className: any;
 }): import("react").JSX.Element;
 declare namespace StandardLayout {
     namespace propTypes {
         let elements: any;
         let data: any;
+        let className: any;
     }
 }

package/lib/Footer/layout/standard.js

@@ -1,12 +1,38 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
+import clsx from "clsx";
 import Box from "@mui/material/Box";
+import { grey } from "@mui/material/colors";
 import Container from "@mui/material/Container";
 import { styled } from "@arcblock/ux/lib/Theme";
 import Row from "./row.js";
-function StandardLayout({ elements, data, ...rest }) {
-  return /* @__PURE__ */ jsx(Root, { ...rest, children: /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsxs(
+function StandardLayout({ elements, data, className, ...rest }) {
+  const withNavigation = !!data.navigation?.length;
+  let topSection = null;
+  if (withNavigation) {
+    topSection = /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: { xs: "column", md: "row" }, justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            flex: "1 1 auto",
+            paddingRight: { xs: 0, md: 3 },
+            display: "flex",
+            flexDirection: "column",
+            alignItems: { xs: "center", md: "flex-start" },
+            gap: 2,
+            pb: 3
+          },
+          children: [
+            /* @__PURE__ */ jsx(Box, { children: elements.brand }),
+            /* @__PURE__ */ jsx(Box, { lineHeight: 1, children: elements.socialMedia })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { sx: { mb: 3, borderTop: { xs: `1px solid ${grey[200]}`, md: 0 } }, children: elements.navigation })
+    ] });
+  } else {
+    topSection = /* @__PURE__ */ jsxs(
       Box,
       {
         sx: {
@@ -22,8 +48,10 @@ function StandardLayout({ elements, data, ...rest }) {
           /* @__PURE__ */ jsx(Box, { lineHeight: 1, children: elements.socialMedia })
         ]
       }
-    ),
-    !!data.navigation?.length && /* @__PURE__ */ jsx(Box, { sx: { mb: 6, pt: 3, borderTop: 1, borderColor: "grey.200" }, children: elements.navigation }),
+    );
+  }
+  return /* @__PURE__ */ jsx(Root, { ...rest, className: clsx({ "footer--with-navs": withNavigation }, className), children: /* @__PURE__ */ jsxs(Container, { children: [
+    topSection,
     /* @__PURE__ */ jsxs(Row, { sx: { pt: 3, borderTop: 1, borderColor: "grey.200" }, autoCenter: true, children: [
       elements.copyright,
       elements.links
@@ -38,7 +66,8 @@ StandardLayout.propTypes = {
     copyright: PropTypes.element,
     links: PropTypes.element
   }).isRequired,
-  data: PropTypes.object.isRequired
+  data: PropTypes.object.isRequired,
+  className: PropTypes.string
 };
 const Root = styled("div")`
   padding: 32px 0 24px 0;
@@ -46,6 +75,14 @@ const Root = styled("div")`
   .footer-brand-desc {
     display: none;
   }
+  &.footer--with-navs {
+    ${(props) => props.theme.breakpoints.up("md")} {
+      .footer-brand-desc {
+        max-width: 360px;
+        display: block;
+      }
+    }
+  }
   && .footer-brand-logo {
     margin-right: 0;
   }

package/lib/Footer/links.d.ts

@@ -2,15 +2,17 @@
  * footer 中的 links (支持分组, 最多支持 2 级)
  * TODO: dark/light theme
  */
-declare function Links({ links, flowLayout, ...rest }: {
+declare function Links({ links, flowLayout, columns, ...rest }: {
     [x: string]: any;
     links: any;
     flowLayout: any;
+    columns: any;
 }): import("react").JSX.Element | null;
 declare namespace Links {
     namespace propTypes {
         let links: any;
         let flowLayout: any;
+        let columns: any;
     }
     namespace defaultProps {
         let links_1: never[];

package/lib/Footer/links.js

@@ -1,16 +1,19 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import PropTypes from "prop-types";
+import { useCreation } from "ahooks";
+import isInteger from "lodash/isInteger";
 import { styled } from "@arcblock/ux/lib/Theme";
 import clsx from "clsx";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import Icon from "../Icon/index.js";
-export default function Links({ links, flowLayout, ...rest }) {
+import useMobile from "../hooks/use-mobile.js";
+import { splitNavColumns } from "../utils.js";
+export default function Links({ links, flowLayout, columns, ...rest }) {
   const [activeIndex, setActiveIndex] = useState(-1);
-  if (!links?.length) {
-    return null;
-  }
+  const isMobile = useMobile({ key: "md" });
   const isGroupMode = links.some((item) => item.items?.length);
+  const columnsLayout = !isMobile && isGroupMode && isInteger(columns) && columns > 1;
   const renderItem = ({ label, link, icon, render, props }) => {
     let result = label;
     if (render) {
@@ -23,45 +26,73 @@ export default function Links({ links, flowLayout, ...rest }) {
       result
     ] });
   };
+  const content = useCreation(() => {
+    if (!links?.length) {
+      return null;
+    }
+    if (flowLayout) {
+      return links.map((item, i) => /* @__PURE__ */ jsx("span", { className: "footer-links-item", children: renderItem(item) }, i));
+    }
+    if (columnsLayout) {
+      return splitNavColumns(links, { columns }).map((cols, i) => {
+        return /* @__PURE__ */ jsx("div", { className: "footer-links-column", children: cols.filter((v) => v.group).map((item, j) => {
+          const { items } = item;
+          return /* @__PURE__ */ jsxs("div", { className: "footer-links-group", children: [
+            /* @__PURE__ */ jsx("span", { className: "footer-links-item", children: renderItem(item) }),
+            !!items?.length && /* @__PURE__ */ jsx("div", { className: "footer-links-sub", children: items.map((child, k) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: clsx("footer-links-item", { "footer-links-item--new": child.isNew }),
+                children: renderItem(child)
+              },
+              k
+            )) })
+          ] }, j);
+        }) }, i);
+      });
+    }
+    return links.map((item, i) => {
+      const { items } = item;
+      const isActive = i === activeIndex;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx("footer-links-group", {
+            "footer-links-group--active": isActive
+          }),
+          onClick: () => setActiveIndex(activeIndex === i ? -1 : i),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "footer-links-item", children: [
+              renderItem(item),
+              !!items?.length && /* @__PURE__ */ jsx("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ jsx(
+                ExpandMoreIcon,
+                {
+                  style: {
+                    transform: `rotate(${isActive ? 180 : 0}deg)`
+                  }
+                }
+              ) })
+            ] }),
+            !!items?.length && /* @__PURE__ */ jsx("div", { className: "footer-links-sub", children: items.map((child, j) => /* @__PURE__ */ jsx("span", { className: clsx("footer-links-item", { "footer-links-item--new": child.isNew }), children: renderItem(child) }, j)) })
+          ]
+        },
+        i
+      );
+    });
+  }, [links, flowLayout, columnsLayout, activeIndex]);
+  if (!links?.length) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     Root,
     {
       ...rest,
       className: clsx(rest.className, {
         "footer-links--grouped": isGroupMode,
-        "footer-links--flow": flowLayout
+        "footer-links--flow": flowLayout,
+        "footer-links--columns": columnsLayout
       }),
-      children: /* @__PURE__ */ jsxs("div", { className: "footer-links-inner", children: [
-        flowLayout && links.map((item, i) => /* @__PURE__ */ jsx("span", { className: "footer-links-item", children: renderItem(item) }, i)),
-        !flowLayout && links.map((item, i) => {
-          const { items } = item;
-          const isActive = i === activeIndex;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: clsx("footer-links-group", {
-                "footer-links-group--active": isActive
-              }),
-              onClick: () => setActiveIndex(activeIndex === i ? -1 : i),
-              children: [
-                /* @__PURE__ */ jsxs("span", { className: "footer-links-item", children: [
-                  renderItem(item),
-                  !!items?.length && /* @__PURE__ */ jsx("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ jsx(
-                    ExpandMoreIcon,
-                    {
-                      style: {
-                        transform: `rotate(${isActive ? 180 : 0}deg)`
-                      }
-                    }
-                  ) })
-                ] }),
-                !!items?.length && /* @__PURE__ */ jsx("div", { className: "footer-links-sub", children: items.map((child, j) => /* @__PURE__ */ jsx("span", { className: "footer-links-item", children: renderItem(child) }, j)) })
-              ]
-            },
-            i
-          );
-        })
-      ] })
+      children: /* @__PURE__ */ jsx("div", { className: "footer-links-inner", children: content })
     }
   );
 }
@@ -75,7 +106,9 @@ Links.propTypes = {
     })
   ),
   // 流动布局, 简单的从左到右排列
-  flowLayout: PropTypes.bool
+  flowLayout: PropTypes.bool,
+  // 列布局
+  columns: PropTypes.number
 };
 Links.defaultProps = {
   links: [],
@@ -83,7 +116,7 @@ Links.defaultProps = {
 };
 const Root = styled("div")`
   overflow: hidden;
-  color: ${(props) => props.theme.palette.grey[600]};
+  color: #9397a1;
   .footer-links-inner {
     display: flex;
     justify-content: space-between;
@@ -94,9 +127,6 @@ const Root = styled("div")`
     display: flex;
     flex-direction: column;
   }
-  .footer-links-sub .footer-links-item {
-    color: ${(props) => props.theme.palette.grey[900]};
-  }
   .footer-links-group-expand-icon {
     display: none;
     position: absolute;
@@ -113,13 +143,22 @@ const Root = styled("div")`
     display: inline-flex;
     align-items: center;
     position: relative;
-    padding: 4px 8px;
+    padding: 6px 8px;
     font-size: 14px;
+    &--new::after {
+      content: 'New';
+      color: #4672ea;
+      background-color: #e1e8fb;
+      padding: 1px 8px;
+      border-radius: 10px/50%;
+      margin-left: 8px;
+    }
   }
   &.footer-links--grouped {
     .footer-links-group {
       > .footer-links-item {
-        font-weight: bold;
+        font-weight: 600;
+        color: #25292f;
       }
       .footer-links-sub {
         margin-top: 8px;
@@ -131,11 +170,29 @@ const Root = styled("div")`
     max-width: 150px;
     color: inherit;
     text-decoration: none;
+    transition: color 0.2s ease-in-out;
     &:hover {
-      text-decoration: underline;
+      color: #25292f;
+    }
+  }
+  /* columns 布局 */
+  &.footer-links--columns {
+    .footer-links-inner {
+      gap: 96px;
+    }
+    .footer-links-column {
+      display: flex;
+      flex-direction: column;
+    }
+    .footer-links-group {
+      .footer-links-sub {
+        margin-top: 2px;
+        margin-bottom: 12px;
+      }
     }
   }
 
+  /* flow 布局 */
   &.footer-links--flow {
     display: inline-flex;
     .footer-links-inner {
@@ -157,6 +214,7 @@ const Root = styled("div")`
     }
   }
 
+  /* 移动端样式 */
   ${(props) => props.theme.breakpoints.down("md")} {
     .footer-links-inner {
       flex-direction: column;

package/lib/Footer/social-media.js

@@ -50,8 +50,9 @@ const Root = styled("div")`
   a {
     color: ${(props) => props.theme.palette.grey[400]};
     text-decoration: none;
+    transition: color 0.2s ease-in-out;
     &:hover {
-      color: ${(props) => props.theme.palette.primary.light};
+      color: #25292f;
     }
   }
   ${(props) => props.theme.breakpoints.down("md")} {

package/lib/Header/index.js

@@ -1,13 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
+import { useMemoizedFn } from "ahooks";
 import { withErrorBoundary } from "react-error-boundary";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
 import { styled } from "@arcblock/ux/lib/Theme";
 import { ResponsiveHeader } from "@arcblock/ux/lib/Header";
-import NavMenu from "@arcblock/ux/lib/NavMenu";
+import NavMenu, { Products } from "@arcblock/ux/lib/NavMenu";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { translate } from "@arcblock/ux/lib/Locale/util";
 import omit from "lodash/omit";
+import isFinite from "lodash/isFinite";
 import clsx from "clsx";
 import Icon from "../Icon/index.js";
 import OverridableThemeProvider from "../common/overridable-theme-provider.js";
@@ -17,6 +20,14 @@ import HeaderAddons from "../common/header-addons.js";
 import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
 import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
 import useMobile from "../hooks/use-mobile.js";
+const translations = {
+  en: {
+    products: "Products"
+  },
+  zh: {
+    products: "\u4EA7\u54C1"
+  }
+};
 const parseNavigation = (navigation) => {
   if (!navigation?.length) {
     return { navItems: [], activeId: null };
@@ -65,6 +76,9 @@ function Header({
 }) {
   useWalletHiddenTopbar();
   const { locale } = useLocaleContext() || {};
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
@@ -82,6 +96,14 @@ function Header({
   const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
+  const productsNavOrder = parseInt(window.blocklet?.USE_ARCBLOCK_THEME, 10);
+  if (isFinite(productsNavOrder)) {
+    navItems.splice(productsNavOrder, 0, {
+      label: t("products"),
+      // eslint-disable-next-line react/no-unstable-nested-components
+      children: ({ isOpen }) => /* @__PURE__ */ jsx(Products, { isOpen })
+    });
+  }
   const _addons = typeof addons === "function" ? (builtInAddons) => addons(builtInAddons, { navigation: parsedNavigation }) : addons;
   const headerAddons = (
     // @ts-ignore

package/lib/utils.d.ts

@@ -6,3 +6,4 @@ export function isUrl(str: any): boolean;
 export function isIconifyString(str: any): boolean;
 export function matchPath(path: any): any;
 export function matchPaths(paths?: any[]): number;
+export function splitNavColumns(items: any, options?: {}): never[][];

package/lib/utils.js

@@ -80,3 +80,74 @@ export const matchPaths = (paths = []) => {
   }, matched[0]);
   return mostSpecific.index;
 };
+
+/** 导航列表分列 */
+export const splitNavColumns = (items, options = {}) => {
+  const { columns = 1, breakInside = false, groupHeight = 48, itemHeight = 24, childrenKey = 'items' } = options;
+
+  // 高度预估
+  const totalHeight = items.reduce((height, group) => {
+    return height + groupHeight + (group[childrenKey]?.length || 0) * itemHeight;
+  }, 0);
+  const targetHeight = Math.ceil(totalHeight / columns);
+
+  // 使用贪心策略进行分列
+  const result = [[]];
+  let currentColumn = 0;
+  let currentHeight = 0;
+
+  // 允许的高度偏差范围（有利于得到高度相差不大的列）
+  const heightVariance = targetHeight * 0.2;
+
+  // 是否应该分列
+  const shouldBreakColumn = (nextHeight) => {
+    return (
+      currentHeight > targetHeight - heightVariance &&
+      currentColumn < columns - 1 &&
+      currentHeight + nextHeight > targetHeight + heightVariance
+    );
+  };
+
+  items.forEach((group) => {
+    const groupTotalHeight = groupHeight + (group[childrenKey]?.length || 0) * itemHeight;
+
+    // 允许截断分组时，可以在任何子项处换列
+    if (breakInside && shouldBreakColumn(groupHeight)) {
+      currentColumn++;
+      currentHeight = 0;
+      result[currentColumn] = [];
+    }
+    // 不允许截断分组时，只能在分组边界换列
+    if (!breakInside && currentHeight > 0 && shouldBreakColumn(groupTotalHeight)) {
+      currentColumn++;
+      currentHeight = 0;
+      result[currentColumn] = [];
+    }
+
+    // 添加分组标题
+    result[currentColumn].push({
+      ...group,
+      group: true,
+    });
+    currentHeight += groupHeight;
+
+    // 添加子项
+    if (group[childrenKey]) {
+      group[childrenKey].forEach((child) => {
+        if (breakInside && shouldBreakColumn(itemHeight)) {
+          currentColumn++;
+          currentHeight = 0;
+          result[currentColumn] = [];
+        }
+
+        result[currentColumn].push({
+          ...child,
+          group: false,
+        });
+        currentHeight += itemHeight;
+      });
+    }
+  });
+
+  return result;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.0",
+  "version": "2.12.2",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.39",
-    "@arcblock/bridge": "^2.12.0",
-    "@arcblock/react-hooks": "^2.12.0",
+    "@arcblock/bridge": "^2.12.2",
+    "@arcblock/react-hooks": "^2.12.2",
     "@arcblock/ws": "^1.19.13",
     "@blocklet/did-space-react": "^1.0.22",
     "@iconify-icons/logos": "^1.2.36",
@@ -84,5 +84,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "ce9042b3a31a06b60ab4d3b923e8b5903bbbf106"
+  "gitHead": "4dc132cab82765eef5194cf00075a13bd5d8e458"
 }

package/src/Footer/brand.jsx

@@ -52,21 +52,23 @@ const Root = styled('div')`
   .footer-brand-logo {
     display: flex;
     align-items: center;
-    margin-right: 16px;
+    margin-right: 12px;
     line-height: 1;
     img,
     svg {
       width: auto;
-      height: 44px;
-      max-height: 44px;
+      height: 40px;
+      max-height: 40px;
     }
   }
   .footer-brand-name {
-    font-size: 16px;
-    font-weight: bold;
+    font-size: 18px;
+    color: ${(props) => props.theme.palette.grey[900]};
   }
   .footer-brand-desc {
+    white-space: pre-line;
     margin-top: 16px;
+    color: #9397a1;
   }
 
   ${(props) => props.theme.breakpoints.down('sm')} {

package/src/Footer/index.jsx

@@ -1,11 +1,13 @@
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { useCreation } from 'ahooks';
 import { styled } from '@arcblock/ux/lib/Theme';
 import { withErrorBoundary } from 'react-error-boundary';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import omit from 'lodash/omit';
+import isFinite from 'lodash/isFinite';
 
 import OverridableThemeProvider from '../common/overridable-theme-provider';
 import InternalFooter from './internal-footer';
@@ -13,6 +15,7 @@ import { mapRecursive } from '../utils';
 import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 import { BlockletMetaProps } from '../types';
 import withHideWhenEmbed from '../libs/with-hide-when-embed';
+
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
@@ -27,14 +30,37 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
       return blocklet;
     }
   }, [meta]);
+  const productsNav = useCreation(() => {
+    return {
+      title: { en: 'Products', zh: '产品' },
+      section: ['footer'],
+      items: [
+        { title: 'ArcSphere', link: `https://www.arcblock.io/content/tags/${locale}/arcsphere`, isNew: true },
+        { title: 'DID Wallet', link: `https://www.didwallet.io/${locale}` },
+        { title: 'DID Spaces', link: `https://www.didspaces.com/${locale}` },
+        { title: 'DID Name Service', link: `https://www.didnames.io/${locale}` },
+        { title: 'Blocklet Launcher', link: `https://launcher.arcblock.io/${locale}` },
+        { title: 'Blocklet Server', link: `https://www.arcblock.io/content/collections/${locale}/blocklet-server` },
+        { title: 'AIGNE', link: `https://www.aigne.io/${locale}` },
+      ],
+    };
+  }, [locale]);
+
   if (!formattedBlocklet.appName) {
     return null;
   }
 
   const { appLogo, appLogoRect, appName, appDescription, description, theme, copyright } = formattedBlocklet;
+  const navFooter = [...(formattedBlocklet?.navigation?.footer ?? [])];
+
+  // 显示 Products 导航
+  const productsNavOrder = parseInt(window.blocklet?.USE_ARCBLOCK_THEME, 10);
+  if (isFinite(productsNavOrder)) {
+    navFooter.splice(productsNavOrder, 0, productsNav);
+  }
 
   const localized = {
-    footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale) || [],
+    footerNav: getLocalizedNavigation(navFooter, locale) || [],
     socialMedia: getLocalizedNavigation(formattedBlocklet?.navigation?.social, locale) || [],
     links: getLocalizedNavigation(formattedBlocklet?.navigation?.bottom, locale) || [],
   };

package/src/Footer/internal-footer.jsx

@@ -35,7 +35,7 @@ function InternalFooter(props) {
     return brand ? <Brand {...brand} /> : null;
   };
   const renderNavigation = () => {
-    return navigation?.length ? <Links links={navigation} /> : null;
+    return navigation?.length ? <Links links={navigation} columns={3} /> : null;
   };
   const renderSocialMedia = () => {
     return socialMedia?.length ? <SocialMedia items={socialMedia} /> : null;

package/src/Footer/layout/standard.jsx

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import Box from '@mui/material/Box';
+import { grey } from '@mui/material/colors';
 import Container from '@mui/material/Container';
 import { styled } from '@arcblock/ux/lib/Theme';
 
@@ -8,25 +10,52 @@ import Row from './row';
 /**
  * footer standard layout
  */
-function StandardLayout({ elements, data, ...rest }) {
-  return (
-    <Root {...rest}>
-      <Container>
+function StandardLayout({ elements, data, className, ...rest }) {
+  const withNavigation = !!data.navigation?.length;
+  let topSection = null;
+
+  if (withNavigation) {
+    // 左 brand & social，右导航栏
+    topSection = (
+      <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, justifyContent: 'space-between' }}>
         <Box
           sx={{
+            flex: '1 1 auto',
+            paddingRight: { xs: 0, md: 3 },
             display: 'flex',
-            flexDirection: { xs: 'column', md: 'row' },
-            justifyContent: 'space-between',
-            alignItems: { xs: 'center', md: 'space-between' },
+            flexDirection: 'column',
+            alignItems: { xs: 'center', md: 'flex-start' },
             gap: 2,
             pb: 3,
           }}>
           <Box>{elements.brand}</Box>
           <Box lineHeight={1}>{elements.socialMedia}</Box>
         </Box>
-        {!!data.navigation?.length && (
-          <Box sx={{ mb: 6, pt: 3, borderTop: 1, borderColor: 'grey.200' }}>{elements.navigation}</Box>
-        )}
+        <Box sx={{ mb: 3, borderTop: { xs: `1px solid ${grey[200]}`, md: 0 } }}>{elements.navigation}</Box>
+      </Box>
+    );
+  } else {
+    // 左 brand，右 social
+    topSection = (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
+          justifyContent: 'space-between',
+          alignItems: { xs: 'center', md: 'space-between' },
+          gap: 2,
+          pb: 3,
+        }}>
+        <Box>{elements.brand}</Box>
+        <Box lineHeight={1}>{elements.socialMedia}</Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Root {...rest} className={clsx({ 'footer--with-navs': withNavigation }, className)}>
+      <Container>
+        {topSection}
         <Row sx={{ pt: 3, borderTop: 1, borderColor: 'grey.200' }} autoCenter>
           {elements.copyright}
           {elements.links}
@@ -45,6 +74,7 @@ StandardLayout.propTypes = {
     links: PropTypes.element,
   }).isRequired,
   data: PropTypes.object.isRequired,
+  className: PropTypes.string,
 };
 
 const Root = styled('div')`
@@ -53,6 +83,14 @@ const Root = styled('div')`
   .footer-brand-desc {
     display: none;
   }
+  &.footer--with-navs {
+    ${(props) => props.theme.breakpoints.up('md')} {
+      .footer-brand-desc {
+        max-width: 360px;
+        display: block;
+      }
+    }
+  }
   && .footer-brand-logo {
     margin-right: 0;
   }

package/src/Footer/links.jsx

@@ -1,22 +1,26 @@
 /* eslint-disable react/no-array-index-key */
 import { useState } from 'react';
 import PropTypes from 'prop-types';
+import { useCreation } from 'ahooks';
+import isInteger from 'lodash/isInteger';
 import { styled } from '@arcblock/ux/lib/Theme';
 import clsx from 'clsx';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Icon from '../Icon';
+import useMobile from '../hooks/use-mobile';
+import { splitNavColumns } from '../utils';
 
 /**
  * footer 中的 links (支持分组, 最多支持 2 级)
  * TODO: dark/light theme
  */
-export default function Links({ links, flowLayout, ...rest }) {
+export default function Links({ links, flowLayout, columns, ...rest }) {
   const [activeIndex, setActiveIndex] = useState(-1);
-  if (!links?.length) {
-    return null;
-  }
+  const isMobile = useMobile({ key: 'md' });
   // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
   const isGroupMode = links.some((item) => item.items?.length);
+  // 是否启用 columns 布局
+  const columnsLayout = !isMobile && isGroupMode && isInteger(columns) && columns > 1;
   const renderItem = ({ label, link, icon, render, props }) => {
     let result = label;
     if (render) {
@@ -35,56 +39,101 @@ export default function Links({ links, flowLayout, ...rest }) {
       </>
     );
   };
+  const content = useCreation(() => {
+    if (!links?.length) {
+      return null;
+    }
+    // 流布局
+    if (flowLayout) {
+      return links.map((item, i) => (
+        <span key={i} className="footer-links-item">
+          {renderItem(item)}
+        </span>
+      ));
+    }
+    // 列布局
+    if (columnsLayout) {
+      return splitNavColumns(links, { columns }).map((cols, i) => {
+        return (
+          <div key={i} className="footer-links-column">
+            {cols
+              .filter((v) => v.group)
+              .map((item, j) => {
+                const { items } = item;
+
+                return (
+                  <div key={j} className="footer-links-group">
+                    <span className="footer-links-item">{renderItem(item)}</span>
+                    {!!items?.length && (
+                      <div className="footer-links-sub">
+                        {items.map((child, k) => (
+                          <span
+                            key={k}
+                            className={clsx('footer-links-item', { 'footer-links-item--new': child.isNew })}>
+                            {renderItem(child)}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+          </div>
+        );
+      });
+    }
+    // 纯 flex 布局
+    return links.map((item, i) => {
+      const { items } = item;
+      // 用于移动端展开
+      const isActive = i === activeIndex;
+
+      return (
+        <div
+          key={i}
+          className={clsx('footer-links-group', {
+            'footer-links-group--active': isActive,
+          })}
+          onClick={() => setActiveIndex(activeIndex === i ? -1 : i)}>
+          <span className="footer-links-item">
+            {renderItem(item)}
+            {!!items?.length && (
+              <span className="footer-links-group-expand-icon">
+                <ExpandMoreIcon
+                  style={{
+                    transform: `rotate(${isActive ? 180 : 0}deg)`,
+                  }}
+                />
+              </span>
+            )}
+          </span>
+          {!!items?.length && (
+            <div className="footer-links-sub">
+              {items.map((child, j) => (
+                <span key={j} className={clsx('footer-links-item', { 'footer-links-item--new': child.isNew })}>
+                  {renderItem(child)}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    });
+  }, [links, flowLayout, columnsLayout, activeIndex]);
+
+  if (!links?.length) {
+    return null;
+  }
+
   return (
     <Root
       {...rest}
       className={clsx(rest.className, {
         'footer-links--grouped': isGroupMode,
         'footer-links--flow': flowLayout,
+        'footer-links--columns': columnsLayout,
       })}>
-      <div className="footer-links-inner">
-        {flowLayout &&
-          links.map((item, i) => (
-            <span key={i} className="footer-links-item">
-              {renderItem(item)}
-            </span>
-          ))}
-        {!flowLayout &&
-          links.map((item, i) => {
-            const { items } = item;
-            const isActive = i === activeIndex;
-            return (
-              <div
-                key={i}
-                className={clsx('footer-links-group', {
-                  'footer-links-group--active': isActive,
-                })}
-                onClick={() => setActiveIndex(activeIndex === i ? -1 : i)}>
-                <span className="footer-links-item">
-                  {renderItem(item)}
-                  {!!items?.length && (
-                    <span className="footer-links-group-expand-icon">
-                      <ExpandMoreIcon
-                        style={{
-                          transform: `rotate(${isActive ? 180 : 0}deg)`,
-                        }}
-                      />
-                    </span>
-                  )}
-                </span>
-                {!!items?.length && (
-                  <div className="footer-links-sub">
-                    {items.map((child, j) => (
-                      <span key={j} className="footer-links-item">
-                        {renderItem(child)}
-                      </span>
-                    ))}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-      </div>
+      <div className="footer-links-inner">{content}</div>
     </Root>
   );
 }
@@ -100,6 +149,8 @@ Links.propTypes = {
   ),
   // 流动布局, 简单的从左到右排列
   flowLayout: PropTypes.bool,
+  // 列布局
+  columns: PropTypes.number,
 };
 
 Links.defaultProps = {
@@ -109,7 +160,7 @@ Links.defaultProps = {
 
 const Root = styled('div')`
   overflow: hidden;
-  color: ${(props) => props.theme.palette.grey[600]};
+  color: #9397a1;
   .footer-links-inner {
     display: flex;
     justify-content: space-between;
@@ -120,9 +171,6 @@ const Root = styled('div')`
     display: flex;
     flex-direction: column;
   }
-  .footer-links-sub .footer-links-item {
-    color: ${(props) => props.theme.palette.grey[900]};
-  }
   .footer-links-group-expand-icon {
     display: none;
     position: absolute;
@@ -139,13 +187,22 @@ const Root = styled('div')`
     display: inline-flex;
     align-items: center;
     position: relative;
-    padding: 4px 8px;
+    padding: 6px 8px;
     font-size: 14px;
+    &--new::after {
+      content: 'New';
+      color: #4672ea;
+      background-color: #e1e8fb;
+      padding: 1px 8px;
+      border-radius: 10px/50%;
+      margin-left: 8px;
+    }
   }
   &.footer-links--grouped {
     .footer-links-group {
       > .footer-links-item {
-        font-weight: bold;
+        font-weight: 600;
+        color: #25292f;
       }
       .footer-links-sub {
         margin-top: 8px;
@@ -157,11 +214,29 @@ const Root = styled('div')`
     max-width: 150px;
     color: inherit;
     text-decoration: none;
+    transition: color 0.2s ease-in-out;
     &:hover {
-      text-decoration: underline;
+      color: #25292f;
+    }
+  }
+  /* columns 布局 */
+  &.footer-links--columns {
+    .footer-links-inner {
+      gap: 96px;
+    }
+    .footer-links-column {
+      display: flex;
+      flex-direction: column;
+    }
+    .footer-links-group {
+      .footer-links-sub {
+        margin-top: 2px;
+        margin-bottom: 12px;
+      }
     }
   }
 
+  /* flow 布局 */
   &.footer-links--flow {
     display: inline-flex;
     .footer-links-inner {
@@ -183,6 +258,7 @@ const Root = styled('div')`
     }
   }
 
+  /* 移动端样式 */
   ${(props) => props.theme.breakpoints.down('md')} {
     .footer-links-inner {
       flex-direction: column;

package/src/Footer/social-media.jsx

@@ -54,8 +54,9 @@ const Root = styled('div')`
   a {
     color: ${(props) => props.theme.palette.grey[400]};
     text-decoration: none;
+    transition: color 0.2s ease-in-out;
     &:hover {
-      color: ${(props) => props.theme.palette.primary.light};
+      color: #25292f;
     }
   }
   ${(props) => props.theme.breakpoints.down('md')} {

package/src/Header/index.tsx

@@ -1,12 +1,15 @@
 import { useMemo } from 'react';
+import { useMemoizedFn } from 'ahooks';
 import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import { styled } from '@arcblock/ux/lib/Theme';
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
-import NavMenu from '@arcblock/ux/lib/NavMenu';
+import NavMenu, { Products } from '@arcblock/ux/lib/NavMenu';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { translate } from '@arcblock/ux/lib/Locale/util';
 import omit from 'lodash/omit';
+import isFinite from 'lodash/isFinite';
 import type { BoxProps, Breakpoint } from '@mui/material';
 import clsx from 'clsx';
 
@@ -20,6 +23,15 @@ import { BlockletMetaProps, SessionManagerProps } from '../@types';
 import withHideWhenEmbed from '../libs/with-hide-when-embed';
 import useMobile from '../hooks/use-mobile';
 
+const translations = {
+  en: {
+    products: 'Products',
+  },
+  zh: {
+    products: '产品',
+  },
+};
+
 // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 const parseNavigation = (navigation: any) => {
   if (!navigation?.length) {
@@ -98,6 +110,9 @@ function Header({
 }: HeaderProps & Omit<BoxProps, keyof HeaderProps>) {
   useWalletHiddenTopbar();
   const { locale } = useLocaleContext() || {};
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
@@ -117,6 +132,16 @@ function Header({
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
 
+  // 显示 Products 导航
+  const productsNavOrder = parseInt(window.blocklet?.USE_ARCBLOCK_THEME, 10);
+  if (isFinite(productsNavOrder)) {
+    navItems.splice(productsNavOrder, 0, {
+      label: t('products'),
+      // eslint-disable-next-line react/no-unstable-nested-components
+      children: ({ isOpen }: { isOpen: boolean }) => <Products isOpen={isOpen} />,
+    });
+  }
+
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const _addons =
     typeof addons === 'function'

package/src/utils.js

@@ -80,3 +80,74 @@ export const matchPaths = (paths = []) => {
   }, matched[0]);
   return mostSpecific.index;
 };
+
+/** 导航列表分列 */
+export const splitNavColumns = (items, options = {}) => {
+  const { columns = 1, breakInside = false, groupHeight = 48, itemHeight = 24, childrenKey = 'items' } = options;
+
+  // 高度预估
+  const totalHeight = items.reduce((height, group) => {
+    return height + groupHeight + (group[childrenKey]?.length || 0) * itemHeight;
+  }, 0);
+  const targetHeight = Math.ceil(totalHeight / columns);
+
+  // 使用贪心策略进行分列
+  const result = [[]];
+  let currentColumn = 0;
+  let currentHeight = 0;
+
+  // 允许的高度偏差范围（有利于得到高度相差不大的列）
+  const heightVariance = targetHeight * 0.2;
+
+  // 是否应该分列
+  const shouldBreakColumn = (nextHeight) => {
+    return (
+      currentHeight > targetHeight - heightVariance &&
+      currentColumn < columns - 1 &&
+      currentHeight + nextHeight > targetHeight + heightVariance
+    );
+  };
+
+  items.forEach((group) => {
+    const groupTotalHeight = groupHeight + (group[childrenKey]?.length || 0) * itemHeight;
+
+    // 允许截断分组时，可以在任何子项处换列
+    if (breakInside && shouldBreakColumn(groupHeight)) {
+      currentColumn++;
+      currentHeight = 0;
+      result[currentColumn] = [];
+    }
+    // 不允许截断分组时，只能在分组边界换列
+    if (!breakInside && currentHeight > 0 && shouldBreakColumn(groupTotalHeight)) {
+      currentColumn++;
+      currentHeight = 0;
+      result[currentColumn] = [];
+    }
+
+    // 添加分组标题
+    result[currentColumn].push({
+      ...group,
+      group: true,
+    });
+    currentHeight += groupHeight;
+
+    // 添加子项
+    if (group[childrenKey]) {
+      group[childrenKey].forEach((child) => {
+        if (breakInside && shouldBreakColumn(itemHeight)) {
+          currentColumn++;
+          currentHeight = 0;
+          result[currentColumn] = [];
+        }
+
+        result[currentColumn].push({
+          ...child,
+          group: false,
+        });
+        currentHeight += itemHeight;
+      });
+    }
+  });
+
+  return result;
+};