npm - @blocklet/ui-react - Versions diffs - 2.9.77 → 2.9.78 - Mend

@blocklet/ui-react 2.9.77 → 2.9.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/es/UserCenter/components/third-party-login/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext, useState } from "react";
-import { List } from "@mui/material";
+import { Box } from "@mui/material";
 import { useAsyncEffect, useCreation } from "ahooks";
 import { getConnectedAccounts, getSourceProvider } from "@arcblock/ux/lib/SessionUser/libs/utils";
 import { LOGIN_PROVIDER } from "@arcblock/ux/lib/Util/constant";
@@ -95,13 +95,12 @@ export default function ThirdPartyLogin({ user }) {
     return transformedProviders;
   }, [user?.connectedAccounts, availableProviders]);
   return /* @__PURE__ */ jsx(
-    List,
+    Box,
     {
-      dense: true,
       sx: {
         gap: 1,
-        display: "flex",
-        flexDirection: "column"
+        display: "grid",
+        gridTemplateColumns: "1fr min-content"
       },
       children: normalizedAccounts.map((account) => {
         return /* @__PURE__ */ jsx(ThirdPartyItem, { item: account }, account?.provider);

package/es/UserCenter/components/third-party-login/third-party-item.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Icon } from "@iconify/react";
-import { Box, ListItem, Tooltip, Typography } from "@mui/material";
+import { Box, Tooltip, Typography } from "@mui/material";
 import LinkRoundedIcon from "@iconify-icons/material-symbols/link-rounded";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
 import Button from "@arcblock/ux/lib/Button";
@@ -98,130 +98,127 @@ export default function ThirdPartyItem({
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      ListItem,
+      Box,
       {
-        disablePadding: true,
         sx: {
+          borderRadius: 2,
+          border: `1px solid ${colors.strokeBorderBase}`,
+          background: colors.backgroundsBgField,
           display: "flex",
           alignItems: "center",
-          gap: 1
+          py: 1,
+          px: 1.5,
+          gap: 0.75,
+          fontSize: "14px",
+          lineHeight: 1,
+          overflow: "hidden"
         },
         children: [
+          /* @__PURE__ */ jsx(Box, { component: Icon, icon, width: "1em", height: "1em", sx: { flexShrink: 0, fontSize: 16 } }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                flex: 1
+              },
+              children: title
+            }
+          ),
           /* @__PURE__ */ jsxs(
             Box,
             {
               sx: {
-                flex: 1,
-                borderRadius: 2,
-                border: `1px solid ${colors.strokeBorderBase}`,
-                background: colors.backgroundsBgField,
                 display: "flex",
                 alignItems: "center",
-                py: 1,
-                px: 1.5,
-                gap: 0.75,
-                fontSize: "14px",
-                lineHeight: 1
+                gap: 0.5
               },
               children: [
-                /* @__PURE__ */ jsx(Icon, { icon, fontSize: 16, width: "1em", height: "1em" }),
                 /* @__PURE__ */ jsx(
                   Box,
                   {
                     sx: {
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "space-between",
                       flex: 1,
-                      gap: 1
+                      textOverflow: "ellipsis",
+                      overflow: "hidden",
+                      lineHeight: "normal"
                     },
-                    children: title
+                    children: item.userInfo?.email || item.did
                   }
                 ),
-                /* @__PURE__ */ jsxs(
-                  Box,
+                item.userInfo?.email ? /* @__PURE__ */ jsx(
+                  Tooltip,
                   {
-                    sx: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 0.5
-                    },
-                    children: [
-                      item.userInfo?.email || item.did,
-                      item.userInfo?.email ? /* @__PURE__ */ jsx(
-                        Tooltip,
-                        {
-                          title: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                            /* @__PURE__ */ jsx(Avatar, { size: 36, variant: "circle", shape: "circle", src: item.userInfo?.picture, did: item.did }),
-                            /* @__PURE__ */ jsxs(Box, { children: [
-                              /* @__PURE__ */ jsx(
-                                Typography,
-                                {
-                                  sx: {
-                                    whiteSpace: "normal",
-                                    wordBreak: "break-all",
-                                    fontSize: "0.9rem"
-                                  },
-                                  children: item.userInfo?.name
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                Typography,
-                                {
-                                  sx: {
-                                    whiteSpace: "normal",
-                                    wordBreak: "break-all",
-                                    fontSize: "0.9rem"
-                                  },
-                                  children: item.userInfo?.email
-                                }
-                              )
-                            ] })
-                          ] }) }),
-                          children: /* @__PURE__ */ jsx(
-                            Icon,
-                            {
-                              icon: InfoOutlineRoundedIcon,
-                              color: colors.textSubtitle,
-                              fontSize: 16,
-                              style: { cursor: "pointer" }
-                            }
-                          )
-                        }
-                      ) : null
-                    ]
+                    title: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                      /* @__PURE__ */ jsx(Avatar, { size: 36, variant: "circle", shape: "circle", src: item.userInfo?.picture, did: item.did }),
+                      /* @__PURE__ */ jsxs(Box, { children: [
+                        /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: {
+                              whiteSpace: "normal",
+                              wordBreak: "break-all",
+                              fontSize: "0.9rem"
+                            },
+                            children: item.userInfo?.name
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: {
+                              whiteSpace: "normal",
+                              wordBreak: "break-all",
+                              fontSize: "0.9rem"
+                            },
+                            children: item.userInfo?.email
+                          }
+                        )
+                      ] })
+                    ] }) }),
+                    children: /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        component: Icon,
+                        icon: InfoOutlineRoundedIcon,
+                        color: colors.textSubtitle,
+                        fontSize: 16,
+                        sx: { cursor: "pointer", flexShrink: 0 }
+                      }
+                    )
                   }
-                )
+                ) : null
               ]
             }
-          ),
-          /* @__PURE__ */ jsx(Tooltip, { title: item._mainProvider ? t("thirdPartyLogin.mainProviderCantRemove") : "", children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outlined",
-              size: "small",
-              sx: {
-                color: item?._bind ? colors.red : colors.foregroundsFgBase,
-                borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
-                backgroundColor: colors.buttonsButtonNeutral,
-                "&:hover": {
-                  borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
-                  backgroundColor: colors.buttonsButtonNeutralHover
-                },
-                py: 0.5,
-                borderRadius: 2,
-                fontWeight: 500
-              },
-              startIcon: currentState.loading ? null : /* @__PURE__ */ jsx(Icon, { icon: LinkRoundedIcon }),
-              onClick: toggleBind,
-              disabled: item._mainProvider,
-              loading: currentState.loading,
-              children: item?._bind ? t("thirdPartyLogin.disconnect") : t("thirdPartyLogin.connect")
-            }
-          ) }) })
+          )
         ]
       }
     ),
+    /* @__PURE__ */ jsx(Tooltip, { title: item._mainProvider ? t("thirdPartyLogin.mainProviderCantRemove") : "", children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        size: "small",
+        sx: {
+          color: item?._bind ? colors.red : colors.foregroundsFgBase,
+          borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
+          backgroundColor: colors.buttonsButtonNeutral,
+          "&:hover": {
+            borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
+            backgroundColor: colors.buttonsButtonNeutralHover
+          },
+          py: 0.5,
+          borderRadius: 2,
+          fontWeight: 500,
+          whiteSpace: "nowrap"
+        },
+        fullWidth: true,
+        startIcon: currentState.loading ? null : /* @__PURE__ */ jsx(Icon, { icon: LinkRoundedIcon }),
+        onClick: toggleBind,
+        disabled: item._mainProvider,
+        loading: currentState.loading,
+        children: item?._bind ? t("thirdPartyLogin.disconnect") : t("thirdPartyLogin.connect")
+      }
+    ) }) }),
     confirmHolder
   ] });
 }

package/es/UserCenter/components/user-center.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
-export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, stickySidebar, }: {
+export default function UserCenter({ children, notLoginContent, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, stickySidebar, }: {
     readonly children: any;
+    readonly notLoginContent: any;
     readonly currentTab: string;
     readonly contentProps?: BoxProps;
     readonly disableAutoRedirect?: boolean;

package/es/UserCenter/components/user-center.js CHANGED Viewed

@@ -24,6 +24,7 @@ import Settings from "./settings.js";
 import { client } from "../../libs/client.js";
 export default function UserCenter({
   children,
+  notLoginContent = null,
   currentTab,
   contentProps = {},
   disableAutoRedirect = false,
@@ -186,6 +187,9 @@ export default function UserCenter({
       return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(ErrorFallback, { error: formatError }) });
     }
     if (!currentDid && !userState.data) {
+      if (notLoginContent) {
+        return notLoginContent;
+      }
       return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(
         Box,
         {

package/lib/UserCenter/components/third-party-login/index.js CHANGED Viewed

@@ -107,12 +107,11 @@ function ThirdPartyLogin({
     });
     return transformedProviders;
   }, [user?.connectedAccounts, availableProviders]);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
-    dense: true,
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
     sx: {
       gap: 1,
-      display: "flex",
-      flexDirection: "column"
+      display: "grid",
+      gridTemplateColumns: "1fr min-content"
     },
     children: normalizedAccounts.map(account => {
       return /* @__PURE__ */(0, _jsxRuntime.jsx)(_thirdPartyItem.default, {

package/lib/UserCenter/components/third-party-login/third-party-item.js CHANGED Viewed

@@ -120,118 +120,122 @@ function ThirdPartyItem({
     }
   });
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
-      disablePadding: true,
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {
+        borderRadius: 2,
+        border: `1px solid ${_Colors.temp.strokeBorderBase}`,
+        background: _Colors.temp.backgroundsBgField,
         display: "flex",
         alignItems: "center",
-        gap: 1
+        py: 1,
+        px: 1.5,
+        gap: 0.75,
+        fontSize: "14px",
+        lineHeight: 1,
+        overflow: "hidden"
       },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        component: _react.Icon,
+        icon,
+        width: "1em",
+        height: "1em",
+        sx: {
+          flexShrink: 0,
+          fontSize: 16
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          flex: 1
+        },
+        children: title
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
-          flex: 1,
-          borderRadius: 2,
-          border: `1px solid ${_Colors.temp.strokeBorderBase}`,
-          background: _Colors.temp.backgroundsBgField,
           display: "flex",
           alignItems: "center",
-          py: 1,
-          px: 1.5,
-          gap: 0.75,
-          fontSize: "14px",
-          lineHeight: 1
+          gap: 0.5
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-          icon,
-          fontSize: 16,
-          width: "1em",
-          height: "1em"
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
             flex: 1,
-            gap: 1
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            lineHeight: "normal"
           },
-          children: title
-        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 0.5
-          },
-          children: [item.userInfo?.email || item.did, item.userInfo?.email ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
-            title: /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-              children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-                sx: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 1
-                },
-                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
-                  size: 36,
-                  variant: "circle",
-                  shape: "circle",
-                  src: item.userInfo?.picture,
-                  did: item.did
-                }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                    sx: {
-                      whiteSpace: "normal",
-                      wordBreak: "break-all",
-                      fontSize: "0.9rem"
-                    },
-                    children: item.userInfo?.name
-                  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                    sx: {
-                      whiteSpace: "normal",
-                      wordBreak: "break-all",
-                      fontSize: "0.9rem"
-                    },
-                    children: item.userInfo?.email
-                  })]
+          children: item.userInfo?.email || item.did
+        }), item.userInfo?.email ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          title: /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
+                size: 36,
+                variant: "circle",
+                shape: "circle",
+                src: item.userInfo?.picture,
+                did: item.did
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  sx: {
+                    whiteSpace: "normal",
+                    wordBreak: "break-all",
+                    fontSize: "0.9rem"
+                  },
+                  children: item.userInfo?.name
+                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  sx: {
+                    whiteSpace: "normal",
+                    wordBreak: "break-all",
+                    fontSize: "0.9rem"
+                  },
+                  children: item.userInfo?.email
                 })]
-              })
-            }),
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-              icon: _infoOutlineRounded.default,
-              color: _Colors.temp.textSubtitle,
-              fontSize: 16,
-              style: {
-                cursor: "pointer"
-              }
+              })]
             })
-          }) : null]
-        })]
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
-        title: item._mainProvider ? t("thirdPartyLogin.mainProviderCantRemove") : "",
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
-            variant: "outlined",
-            size: "small",
+          }),
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            component: _react.Icon,
+            icon: _infoOutlineRounded.default,
+            color: _Colors.temp.textSubtitle,
+            fontSize: 16,
             sx: {
-              color: item?._bind ? _Colors.temp.red : _Colors.temp.foregroundsFgBase,
+              cursor: "pointer",
+              flexShrink: 0
+            }
+          })
+        }) : null]
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      title: item._mainProvider ? t("thirdPartyLogin.mainProviderCantRemove") : "",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
+          variant: "outlined",
+          size: "small",
+          sx: {
+            color: item?._bind ? _Colors.temp.red : _Colors.temp.foregroundsFgBase,
+            borderColor: item?._bind ? _Colors.temp.red : _Colors.temp.strokeBorderBase,
+            backgroundColor: _Colors.temp.buttonsButtonNeutral,
+            "&:hover": {
               borderColor: item?._bind ? _Colors.temp.red : _Colors.temp.strokeBorderBase,
-              backgroundColor: _Colors.temp.buttonsButtonNeutral,
-              "&:hover": {
-                borderColor: item?._bind ? _Colors.temp.red : _Colors.temp.strokeBorderBase,
-                backgroundColor: _Colors.temp.buttonsButtonNeutralHover
-              },
-              py: 0.5,
-              borderRadius: 2,
-              fontWeight: 500
+              backgroundColor: _Colors.temp.buttonsButtonNeutralHover
             },
-            startIcon: currentState.loading ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-              icon: _linkRounded.default
-            }),
-            onClick: toggleBind,
-            disabled: item._mainProvider,
-            loading: currentState.loading,
-            children: item?._bind ? t("thirdPartyLogin.disconnect") : t("thirdPartyLogin.connect")
-          })
+            py: 0.5,
+            borderRadius: 2,
+            fontWeight: 500,
+            whiteSpace: "nowrap"
+          },
+          fullWidth: true,
+          startIcon: currentState.loading ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
+            icon: _linkRounded.default
+          }),
+          onClick: toggleBind,
+          disabled: item._mainProvider,
+          loading: currentState.loading,
+          children: item?._bind ? t("thirdPartyLogin.disconnect") : t("thirdPartyLogin.connect")
         })
-      })]
+      })
     }), confirmHolder]
   });
 }

package/lib/UserCenter/components/user-center.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
-export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, stickySidebar, }: {
+export default function UserCenter({ children, notLoginContent, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, stickySidebar, }: {
     readonly children: any;
+    readonly notLoginContent: any;
     readonly currentTab: string;
     readonly contentProps?: BoxProps;
     readonly disableAutoRedirect?: boolean;

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

@@ -31,6 +31,7 @@ var _client = require("../../libs/client");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function UserCenter({
   children,
+  notLoginContent = null,
   currentTab,
   contentProps = {},
   disableAutoRedirect = false,
@@ -203,6 +204,9 @@ function UserCenter({
       });
     }
     if (!currentDid && !userState.data) {
+      if (notLoginContent) {
+        return notLoginContent;
+      }
       return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
           width: "100%"

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.77",
+  "version": "2.9.78",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -62,10 +62,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.9.77",
-    "@arcblock/did-connect": "^2.9.77",
-    "@arcblock/react-hooks": "^2.9.77",
-    "@arcblock/ux": "^2.9.77",
+    "@arcblock/bridge": "^2.9.78",
+    "@arcblock/did-connect": "^2.9.78",
+    "@arcblock/react-hooks": "^2.9.78",
+    "@arcblock/ux": "^2.9.78",
     "@blocklet/js-sdk": "^1.16.26",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -109,5 +109,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "24ef8a1319fae952d5aedb57f2030d1553dfdd8e"
+  "gitHead": "db9dafbc8bc35be7884e7152d4aff169cbcbfa90"
 }

package/src/UserCenter/components/third-party-login/index.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useContext, useState } from 'react';
-import { List } from '@mui/material';
+import { Box } from '@mui/material';
 import { useAsyncEffect, useCreation } from 'ahooks';
 import { getConnectedAccounts, getSourceProvider } from '@arcblock/ux/lib/SessionUser/libs/utils';
 import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
@@ -118,16 +118,15 @@ export default function ThirdPartyLogin({ user }: { user: User }) {
   }, [user?.connectedAccounts, availableProviders]);
   return (
-    <List
-      dense
+    <Box
       sx={{
         gap: 1,
-        display: 'flex',
-        flexDirection: 'column',
+        display: 'grid',
+        gridTemplateColumns: '1fr min-content',
       }}>
       {normalizedAccounts.map((account) => {
         return <ThirdPartyItem key={account?.provider} item={account as OAuthAccount} />;
       })}
-    </List>
+    </Box>
   );
 }

package/src/UserCenter/components/third-party-login/third-party-item.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Icon } from '@iconify/react';
-import { Box, ListItem, Tooltip, Typography } from '@mui/material';
+import { Box, Tooltip, Typography } from '@mui/material';
 import LinkRoundedIcon from '@iconify-icons/material-symbols/link-rounded';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import Button from '@arcblock/ux/lib/Button';
@@ -120,72 +120,69 @@ export default function ThirdPartyItem({
   return (
     <>
-      <ListItem
-        disablePadding
+      <Box
         sx={{
+          borderRadius: 2,
+          border: `1px solid ${colors.strokeBorderBase}`,
+          background: colors.backgroundsBgField,
           display: 'flex',
           alignItems: 'center',
-          gap: 1,
+          py: 1,
+          px: 1.5,
+          gap: 0.75,
+          fontSize: '14px',
+          lineHeight: 1,
+          overflow: 'hidden',
         }}>
+        <Box component={Icon} icon={icon} width="1em" height="1em" sx={{ flexShrink: 0, fontSize: 16 }} />
         <Box
           sx={{
             flex: 1,
-            borderRadius: 2,
-            border: `1px solid ${colors.strokeBorderBase}`,
-            background: colors.backgroundsBgField,
+          }}>
+          {title}
+        </Box>
+        <Box
+          sx={{
             display: 'flex',
             alignItems: 'center',
-            py: 1,
-            px: 1.5,
-            gap: 0.75,
-            fontSize: '14px',
-            lineHeight: 1,
+            gap: 0.5,
           }}>
-          <Icon icon={icon} fontSize={16} width="1em" height="1em" />
           <Box
             sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
               flex: 1,
-              gap: 1,
-            }}>
-            {title}
-          </Box>
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 0.5,
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              lineHeight: 'normal',
             }}>
             {item.userInfo?.email || item.did}
-            {item.userInfo?.email ? (
-              <Tooltip
-                title={
-                  <>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                      <Avatar size={36} variant="circle" shape="circle" src={item.userInfo?.picture} did={item.did} />
-                      <Box>
-                        <Typography
-                          sx={{
-                            whiteSpace: 'normal',
-                            wordBreak: 'break-all',
-                            fontSize: '0.9rem',
-                          }}>
-                          {item.userInfo?.name}
-                        </Typography>
-                        <Typography
-                          sx={{
-                            whiteSpace: 'normal',
-                            wordBreak: 'break-all',
-                            fontSize: '0.9rem',
-                          }}>
-                          {item.userInfo?.email}
-                        </Typography>
-                      </Box>
+          </Box>
+          {item.userInfo?.email ? (
+            <Tooltip
+              title={
+                <>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Avatar size={36} variant="circle" shape="circle" src={item.userInfo?.picture} did={item.did} />
+                    <Box>
+                      <Typography
+                        sx={{
+                          whiteSpace: 'normal',
+                          wordBreak: 'break-all',
+                          fontSize: '0.9rem',
+                        }}>
+                        {item.userInfo?.name}
+                      </Typography>
+                      <Typography
+                        sx={{
+                          whiteSpace: 'normal',
+                          wordBreak: 'break-all',
+                          fontSize: '0.9rem',
+                        }}>
+                        {item.userInfo?.email}
+                      </Typography>
                     </Box>
-                    {/* 暂不显示 oauth 账户的 did */}
-                    {/* <Box
+                  </Box>
+                  {/* 暂不显示 oauth 账户的 did */}
+                  {/* <Box
                     component={DID}
                     did={item.did}
                     sx={{
@@ -194,45 +191,47 @@ export default function ThirdPartyItem({
                       },
                     }}
                   /> */}
-                  </>
-                }>
-                <Icon
-                  icon={InfoOutlineRoundedIcon}
-                  color={colors.textSubtitle}
-                  fontSize={16}
-                  style={{ cursor: 'pointer' }}
-                />
-              </Tooltip>
-            ) : null}
-          </Box>
+                </>
+              }>
+              <Box
+                component={Icon}
+                icon={InfoOutlineRoundedIcon}
+                color={colors.textSubtitle}
+                fontSize={16}
+                sx={{ cursor: 'pointer', flexShrink: 0 }}
+              />
+            </Tooltip>
+          ) : null}
         </Box>
-        <Tooltip title={item._mainProvider ? t('thirdPartyLogin.mainProviderCantRemove') : ''}>
-          {/* HACK: 结合下面的 button disable 使用，必须增加这一层 */}
-          <Box>
-            <Button
-              variant="outlined"
-              size="small"
-              sx={{
-                color: item?._bind ? colors.red : colors.foregroundsFgBase,
+      </Box>
+      <Tooltip title={item._mainProvider ? t('thirdPartyLogin.mainProviderCantRemove') : ''}>
+        {/* HACK: 结合下面的 button disable 使用，必须增加这一层 */}
+        <Box>
+          <Button
+            variant="outlined"
+            size="small"
+            sx={{
+              color: item?._bind ? colors.red : colors.foregroundsFgBase,
+              borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
+              backgroundColor: colors.buttonsButtonNeutral,
+              '&:hover': {
                 borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
-                backgroundColor: colors.buttonsButtonNeutral,
-                '&:hover': {
-                  borderColor: item?._bind ? colors.red : colors.strokeBorderBase,
-                  backgroundColor: colors.buttonsButtonNeutralHover,
-                },
-                py: 0.5,
-                borderRadius: 2,
-                fontWeight: 500,
-              }}
-              startIcon={currentState.loading ? null : <Icon icon={LinkRoundedIcon} />}
-              onClick={toggleBind}
-              disabled={item._mainProvider}
-              loading={currentState.loading}>
-              {item?._bind ? t('thirdPartyLogin.disconnect') : t('thirdPartyLogin.connect')}
-            </Button>
-          </Box>
-        </Tooltip>
-      </ListItem>
+                backgroundColor: colors.buttonsButtonNeutralHover,
+              },
+              py: 0.5,
+              borderRadius: 2,
+              fontWeight: 500,
+              whiteSpace: 'nowrap',
+            }}
+            fullWidth
+            startIcon={currentState.loading ? null : <Icon icon={LinkRoundedIcon} />}
+            onClick={toggleBind}
+            disabled={item._mainProvider}
+            loading={currentState.loading}>
+            {item?._bind ? t('thirdPartyLogin.disconnect') : t('thirdPartyLogin.connect')}
+          </Button>
+        </Box>
+      </Tooltip>
       {confirmHolder}
     </>
   );

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

@@ -31,6 +31,7 @@ import { client } from '../../libs/client';
 export default function UserCenter({
   children,
+  notLoginContent = null,
   currentTab,
   contentProps = {},
   disableAutoRedirect = false,
@@ -42,6 +43,7 @@ export default function UserCenter({
   stickySidebar = false,
 }: {
   readonly children: any;
+  readonly notLoginContent: any;
   readonly currentTab: string;
   readonly contentProps?: BoxProps;
   readonly disableAutoRedirect?: boolean;
@@ -229,6 +231,9 @@ export default function UserCenter({
     }
     if (!currentDid && !userState.data) {
+      if (notLoginContent) {
+        return notLoginContent;
+      }
       return (
         <Box sx={{ width: '100%' }}>
           <Box