@blocklet/ui-react 2.11.2 → 2.11.4

package/lib/UserCenter/components/passport.js

@@ -57,7 +57,7 @@ export default function Passport({ user, ...rest }) {
         gridTemplateColumns: {
           xs: "repeat(2, 1fr)",
           sm: "repeat(3, 1fr)",
-          md: "repeat(2, 1fr)"
+          md: "repeat(4, 1fr)"
         },
         gap: 2.5,
         ...rest.sx

package/lib/UserCenter/components/user-center.js

@@ -14,7 +14,7 @@ import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
 import cloneDeep from "lodash/cloneDeep";
-import { getQuery, withQuery, joinURL } from "ufo";
+import { getQuery, withQuery, joinURL, withoutTrailingSlash } from "ufo";
 import { PROFILE_URL } from "@arcblock/ux/lib/Util/constant";
 import Footer from "../../Footer/index.js";
 import Header from "../../Header/index.js";
@@ -157,7 +157,7 @@ export default function UserCenter({
     }).filter((x) => isMyself || !x.isPrivate);
   }, [formattedBlocklet, userState.data, privacyState?.data, locale, defaultTabs, isMyself]);
   const currentActiveTab = useCreation(() => {
-    return userCenterTabs.find((x) => x.value === currentTab);
+    return userCenterTabs.find((x) => withoutTrailingSlash(x.value) === withoutTrailingSlash(currentTab));
   }, [userCenterTabs]);
   const handleChangeTab = useMemoizedFn((value) => {
     const findTab = userCenterTabs.find((x) => x.value === value);
@@ -198,10 +198,6 @@ export default function UserCenter({
         Box,
         {
           sx: {
-            width: {
-              sx: "100%",
-              md: 420
-            },
             maxWidth: "100%",
             position: "relative"
           },
@@ -310,8 +306,8 @@ export default function UserCenter({
             Box,
             {
               display: isMobile ? "block" : "flex",
-              gap: 2,
               sx: {
+                height: "100%",
                 overflow: "auto",
                 padding: "1px"
               },
@@ -322,7 +318,7 @@ export default function UserCenter({
                     orientation: isMobile ? "horizontal" : "vertical",
                     variant: "line",
                     tabs: userCenterTabs,
-                    current: currentTab,
+                    current: currentActiveTab?.value ?? currentTab,
                     onChange: handleChangeTab,
                     sx: {
                       width: isMobile ? "100%" : 180,
@@ -339,6 +335,7 @@ export default function UserCenter({
                     }
                   }
                 ),
+                /* @__PURE__ */ jsx(Divider, { orientation: "vertical", sx: { height: "100%", mr: 2 } }),
                 !privacyState.data || privacyState.loading ? /* @__PURE__ */ jsx(
                   Box,
                   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.2",
+  "version": "2.11.4",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.11.2",
-    "@arcblock/react-hooks": "^2.11.2",
+    "@arcblock/bridge": "^2.11.4",
+    "@arcblock/react-hooks": "^2.11.4",
     "@blocklet/did-space-react": "^0.5.83",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -80,5 +80,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "b06380c69f666f93dac55afd0684481d52753348"
+  "gitHead": "4c757dc656bb78a677c33a4db12567c5bd56ccf6"
 }

package/src/UserCenter/components/passport.tsx

@@ -68,7 +68,7 @@ export default function Passport({ user, ...rest }: { user: User } & BoxProps) {
         gridTemplateColumns: {
           xs: 'repeat(2, 1fr)',
           sm: 'repeat(3, 1fr)',
-          md: 'repeat(2, 1fr)',
+          md: 'repeat(4, 1fr)',
         },
         gap: 2.5,
         ...rest.sx,

package/src/UserCenter/components/user-center.tsx

@@ -15,7 +15,7 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import cloneDeep from 'lodash/cloneDeep';
-import { getQuery, withQuery, joinURL } from 'ufo';
+import { getQuery, withQuery, joinURL, withoutTrailingSlash } from 'ufo';
 import type { AxiosError } from 'axios';
 import type { UserPublicInfo } from '@blocklet/js-sdk';
 
@@ -190,7 +190,7 @@ export default function UserCenter({
   }, [formattedBlocklet, userState.data, privacyState?.data, locale, defaultTabs, isMyself]);
 
   const currentActiveTab = useCreation(() => {
-    return userCenterTabs.find((x) => x.value === currentTab);
+    return userCenterTabs.find((x) => withoutTrailingSlash(x.value) === withoutTrailingSlash(currentTab));
   }, [userCenterTabs]);
 
   const handleChangeTab = useMemoizedFn((value) => {
@@ -235,10 +235,6 @@ export default function UserCenter({
       return (
         <Box
           sx={{
-            width: {
-              sx: '100%',
-              md: 420,
-            },
             maxWidth: '100%',
             position: 'relative',
           }}>
@@ -355,8 +351,8 @@ export default function UserCenter({
         {userCenterTabs.length > 0 && currentTab ? (
           <Box
             display={isMobile ? 'block' : 'flex'}
-            gap={2}
             sx={{
+              height: '100%',
               overflow: 'auto',
               padding: '1px',
             }}>
@@ -364,7 +360,7 @@ export default function UserCenter({
               orientation={isMobile ? 'horizontal' : 'vertical'}
               variant="line"
               tabs={userCenterTabs}
-              current={currentTab}
+              current={currentActiveTab?.value ?? currentTab}
               onChange={handleChangeTab}
               sx={{
                 width: isMobile ? '100%' : 180,
@@ -380,6 +376,7 @@ export default function UserCenter({
                 },
               }}
             />
+            <Divider orientation="vertical" sx={{ height: '100%', mr: 2 }} />
             {!privacyState.data || privacyState.loading ? (
               <Box
                 sx={{