Update for Better User Profile Display

Author: FalkWolsky

.gitignore

@@ -14,3 +14,4 @@ server/api-service/lowcoder-server/src/main/resources/application-lowcoder.yml
 server/api-service/lowcoder-server/src/main/resources/application-debug.yaml
 .vscode/settings.json
 .vscode/launch.json
+server/api-service/lowcoder-server/src/main/resources/application-dev-localhost.yaml

client/packages/lowcoder/src/pages/ApplicationV2/UserProfileLayout.tsx

@@ -130,9 +130,19 @@ const StyleProfileContent = styled.div`
     }
 `;
 
-const StyleAvatar = styled(Avatar)` 
-    position: relative;
-    border: 3px solid #eee;
+const StyleAvatar = styled(Avatar)`
+  position: relative;
+  border: 3px solid #eee;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  background-color: #0093E9;
+  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
+  .ant-avatar-string {
+    font-size: 2em;
+  }
 `;
 
 const TextMuted = styled.div`
@@ -151,6 +161,11 @@ export interface UserProfileLayoutProps {
   breadcrumb?: UserProfileBreadcrumbType[];
 }
 
+const getInitials = (name: string) => {
+  const initials = name.split(' ').map(word => word[0]).join('');
+  return initials.toUpperCase();
+};
+
 export function UserProfileLayout(props: UserProfileLayoutProps) {
 
   const { breadcrumb = []} = props;
@@ -233,7 +248,13 @@ export function UserProfileLayout(props: UserProfileLayoutProps) {
             <StyleProfileContent>
               <Row gutter={[24, 24]} style={{ display: 'flex', alignItems: 'end' }}>
                 <Col lg={4}>
-                  <StyleAvatar src={<img src={user.avatarUrl ? fullAvatarUrl(user.avatarUrl) : `https://eu.ui-avatars.com/api/?name=${user.username}&size=250`} alt="avatar" />} shape="square" size={120} />
+                  {user.avatarUrl ? (
+                    <StyleAvatar src={fullAvatarUrl(user.avatarUrl)} shape="square" size={120} />
+                  ) : (
+                    <StyleAvatar shape="square" size={120}>
+                      {getInitials(user.username)}
+                    </StyleAvatar>
+                  )}
                 </Col>
                 <Col lg={20}>
                   <Space style={{paddingLeft : "80px"}}>

client/packages/lowcoder/src/pages/common/profileImage.tsx

@@ -16,7 +16,8 @@ export const ImgWrapper = styled.div<{
   border: 1px solid rgba(0, 0, 0, 0.1);
   justify-content: center;
   cursor: default;
-  background-color: ${(props) => props.$backgroundColor};
+  background-color: #0093E9;
+  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
 
   & span {
     color: #ffffff;
@@ -52,13 +53,13 @@ export default function ProfileImage(props: {
   const [hasErrorLoadingImage, setHasErrorLoadingImage] = useState(false);
   const sourceUrl = fullAvatarUrl(props.source);
   const shouldRenderImage = (sourceUrl || props.svg) && !hasErrorLoadingImage;
-  const backgroundColor = shouldRenderImage ? "transparent" : initialsAndColorCode[1];
+  // const backgroundColor = shouldRenderImage ? "transparent" : initialsAndColorCode[1];
 
   return (
     <ImgWrapper
       $fontSize={props.fontSize}
       style={props.style}
-      $backgroundColor={backgroundColor}
+      // $backgroundColor={backgroundColor}
       className={props.className}
       $side={props.side}
       title={props.userName}

client/packages/lowcoder/src/pages/setting/permission/styledComponents.tsx

@@ -22,6 +22,7 @@ import ReactJson from "react-json-view";
 import { StyledLink } from "pages/common/styledComponent";
 import _ from "lodash";
 import { Avatar, Card, List } from "antd";
+import { fullAvatarUrl } from "util/urlUtils";
 
 export const StyledTable = styled(AntdTable)`
   .ant-table-cell {
@@ -435,9 +436,9 @@ export function UserDetailPopup(props: { userId: string; title: string }) {
               style={{ width: "90%", borderRadius: 8, margin: "0 auto" }}
               cover={
                 <div style={{ display: 'flex', justifyContent: 'center', padding: 20 }}>
-                  <Avatar
+                  <Avatar 
                     size={100}
-                    src={userInfo.avatarUrl || ''}
+                    src={userInfo.avatarUrl ? fullAvatarUrl(userInfo.avatarUrl) : ''}
                     alt={userInfo.name || ''}
                   />
                 </div>