@blocklet/ui-react 2.12.8 → 2.12.10

package/src/UserCenter/components/user-info/user-basic-info.tsx

@@ -1,24 +1,26 @@
-import { Box, CircularProgress, Tooltip, Typography } from '@mui/material';
+import { Box, Divider, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 import Avatar from '@arcblock/ux/lib/Avatar';
-import { useTheme } from '@arcblock/ux/lib/Theme';
 import DID from '@arcblock/ux/lib/DID';
 import { useMemoizedFn } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import noop from 'lodash/noop';
-import RefreshOutlinedIcon from '@mui/icons-material/RefreshOutlined';
-import { SessionContext } from '@arcblock/did-connect/lib/Session';
-import { useContext, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Toast from '@arcblock/ux/lib/Toast';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
 import type { AxiosError } from 'axios';
-import isEmpty from 'lodash/isEmpty';
-import { SessionContext as TSessionContext } from '../../../@types';
+import { parseURL, joinURL } from 'ufo';
 
 import { translations } from '../../libs/locales';
-import type { User } from '../../../@types';
+import type { User, UserMetadata } from '../../../@types';
 import { formatAxiosError } from '../../libs/utils';
+import { getStatusDuration, isValidUrl } from './utils';
 import SwitchRole from './switch-role';
+import UserMetadataComponent from './metadata';
+import UserStatus from './user-status';
+import UserInfo from './user-info';
+import { client } from '../../../libs/client';
 
 export default function UserBasicInfo({
   user,
@@ -33,34 +35,76 @@ export default function UserBasicInfo({
   showFullDid?: boolean;
   switchPassport: () => void;
   switchProfile: () => void;
+  size?: number;
+  isMobile?: boolean;
 } & BoxProps) {
   const { locale } = useLocaleContext();
-  const { session } = useContext<TSessionContext>(SessionContext);
-  const [loading, setLoading] = useState(false);
-
+  const [userStatus, setUserStatus] = useState<UserMetadata['status']>(undefined);
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
 
-  const theme = useTheme();
+  useEffect(() => {
+    setUserStatus(user?.metadata?.status);
+  }, [user]);
 
-  const isSmallView = theme.breakpoints.down('md');
+  const onUpdateUserStatus = async (v: UserMetadata['status']) => {
+    if (!isMyself) {
+      return;
+    }
+    try {
+      if (v) {
+        const dateRange = getStatusDuration(v);
+        v.dateRange = dateRange.length > 0 ? dateRange : (userStatus?.dateRange ?? []);
+      }
+      setUserStatus(v);
+      await client.user.saveProfile({
+        // @ts-ignore
+        metadata: {
+          ...(user?.metadata ?? { joinedAt: user?.createdAt, email: user?.email, phone: user?.phone }),
+          status: v,
+        },
+      });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatAxiosError(err as AxiosError));
+    }
+  };
 
   if (!user) {
     return null;
   }
 
-  const refreshProfile = async () => {
+  const onSave = async (v: UserMetadata) => {
+    if (!isMyself) {
+      return;
+    }
     try {
-      setLoading(true);
-      await session.refreshProfile();
-      session.refresh();
-      Toast.success(translate(translations, 'refreshProfile.successfully', locale));
+      const newLinks =
+        v?.links
+          ?.map((link) => {
+            if (!link.url || !isValidUrl(link.url)) return null;
+
+            try {
+              const parsedUrl = parseURL(link.url);
+              // 如果没有协议，添加 https
+              if (!parsedUrl.protocol) {
+                link.url = joinURL('https://', link.url);
+              }
+              return link;
+            } catch (e) {
+              console.error('Invalid URL:', link.url);
+              return null;
+            }
+          })
+          .filter((l) => !!l) || [];
+      v.links = newLinks;
+      // TODO: 需要更新 SDK
+      // @ts-ignore
+      await client.user.saveProfile({ metadata: v });
     } catch (err) {
       console.error(err);
       Toast.error(formatAxiosError(err as AxiosError));
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -69,77 +113,96 @@ export default function UserBasicInfo({
       {...rest}
       sx={{
         position: 'relative',
-        ...rest.sx,
+        ...(rest.sx ?? {}),
       }}>
-      <Avatar
-        //  @ts-ignore
-        src={user?.avatar}
-        did={user?.did}
-        size={isSmallView ? 64 : 80}
-        variant="circle"
-        shape="circle"
-        sx={{
-          borderRadius: '100%',
-          backgroundColor: '#fff',
-          position: 'relative',
-          overflow: 'hidden',
-          flexShrink: 0,
-          ...(isMyself
-            ? {
-                cursor: 'pointer',
-                '&::after': {
-                  content: `"${t('switchProfile')}"`,
-                  color: 'white',
-                  position: 'absolute',
-                  fontSize: '12px',
-                  bottom: 0,
-                  left: 0,
-                  right: 0,
-                  height: '50%',
-                  backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                },
-              }
-            : {}),
-        }}
-        onClick={isMyself ? switchProfile : noop}
-      />
-      <Box
-        sx={{
-          flex: 1,
-          overflow: 'hidden',
-        }}>
-        <Typography
-          variant="h6"
+      <Box className="user-info" display="flex" flexDirection={rest.isMobile ? 'row' : 'column'} gap={2}>
+        <Box
+          className="user-avatar"
+          position="relative"
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between">
+          <Avatar
+            //  @ts-ignore
+            src={user?.avatar}
+            did={user?.did}
+            size={rest.size || (rest.isMobile ? 64 : 100)}
+            variant="circle"
+            shape="circle"
+            sx={{
+              borderRadius: '100%',
+              backgroundColor: '#fff',
+              position: 'relative',
+              overflow: 'hidden',
+              flexShrink: 0,
+              ...(isMyself
+                ? {
+                    cursor: 'pointer',
+                    '&::after': {
+                      content: `"${t('switchProfile')}"`,
+                      color: 'white',
+                      position: 'absolute',
+                      fontSize: '12px',
+                      bottom: 0,
+                      left: 0,
+                      right: 0,
+                      height: '50%',
+                      backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                    },
+                  }
+                : {}),
+            }}
+            onClick={isMyself ? switchProfile : noop}
+          />
+          <UserStatus
+            isMobile={rest.isMobile}
+            size={rest.size || (rest.isMobile ? 64 : 100)}
+            isMyself={isMyself}
+            status={userStatus}
+            onChange={onUpdateUserStatus}
+          />
+        </Box>
+        <Box
           sx={{
-            fontWeight: 'bold',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
-            fontSize: '24px !important',
+            flex: 1,
+            overflow: 'hidden',
           }}>
-          {user?.fullName}
-          {isMyself ? (
-            <>
-              <SwitchRole user={user} switchPassport={switchPassport} />
-              {!isEmpty(user.url) && (
-                <Tooltip
-                  title={!loading && translate(translations, 'refreshProfile.title', locale)}
-                  sx={{ display: 'flex', alignItems: 'center' }}>
-                  {loading ? (
-                    <CircularProgress size="16px" sx={{ color: theme?.colors?.primary, ml: 0.5 }} />
-                  ) : (
-                    <RefreshOutlinedIcon onClick={refreshProfile} />
-                  )}
-                </Tooltip>
-              )}
-            </>
-          ) : null}
-        </Typography>
-        <DID did={user.did} showQrcode copyable compact={!showFullDid} responsive={!showFullDid} locale={locale} />
+          <Typography
+            variant="h6"
+            sx={{
+              fontWeight: 600,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              fontSize: '24px !important',
+            }}>
+            {user?.fullName}
+            {isMyself ? <SwitchRole user={user} switchPassport={switchPassport} /> : null}
+          </Typography>
+          <DID
+            did={user.did}
+            showQrcode
+            copyable
+            compact={!showFullDid}
+            responsive={!showFullDid}
+            locale={locale}
+            style={{ maxWidth: 260 }}
+          />
+        </Box>
       </Box>
+      <UserMetadataComponent isMobile={rest.isMobile} isMyself={isMyself} user={user} onSave={onSave} />
+      {isMyself ? (
+        <>
+          <Divider sx={{ my: 3, borderColor: colors.dividerColor }} />
+          <Typography component="p" color="text.secondary" fontSize="14px" mb={2}>
+            {t('profile.justForYou')}
+          </Typography>
+          <UserInfo user={user} isMySelf={isMyself} />
+        </>
+      ) : null}
     </Box>
   );
 }

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

@@ -3,8 +3,6 @@ import type { BoxProps } from '@mui/material';
 import { Icon } from '@iconify/react';
 import { useMemoizedFn, useCreation } from 'ahooks';
 import DID from '@arcblock/ux/lib/DID';
-import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
-import PhoneOutlineRoundedIcon from '@iconify-icons/material-symbols/phone-android-outline-rounded';
 import ScheduleOutlineRoundedIcon from '@iconify-icons/material-symbols/schedule-outline-rounded';
 import MoreTimeRoundedIcon from '@iconify-icons/material-symbols/more-time-rounded';
 import CaptivePortalRoundedIcon from '@iconify-icons/material-symbols/captive-portal-rounded';
@@ -37,18 +35,6 @@ export default function UserInfo({
 
   const userInfoListData = [];
   if (isMySelf) {
-    userInfoListData.push({
-      icon: <Icon fontSize={16} icon={MailOutlineRoundedIcon} />,
-      title: t('email'),
-      content: user?.email || t('emptyField'),
-      verified: user?.emailVerified,
-    });
-    userInfoListData.push({
-      icon: <Icon fontSize={16} icon={PhoneOutlineRoundedIcon} />,
-      title: t('phone'),
-      content: user?.phone || t('emptyField'),
-      verified: user?.phoneVerified,
-    });
     userInfoListData.push({
       icon: <Icon fontSize={16} icon={ScheduleOutlineRoundedIcon} />,
       title: t('lastLoginAt'),
@@ -80,7 +66,11 @@ export default function UserInfo({
     userInfoListData.push({
       icon: <Icon fontSize={16} icon={CaptivePortalRoundedIcon} />,
       title: t('invitedBy'),
-      content: user?.inviter ? <DID did={user.inviter} showQrcode copyable compact responsive locale={locale} /> : '-',
+      content: user?.inviter ? (
+        <DID style={{ maxWidth: 260 }} did={user.inviter} showQrcode copyable compact responsive locale={locale} />
+      ) : (
+        '-'
+      ),
     });
   }
 
@@ -94,7 +84,7 @@ export default function UserInfo({
         ...rest?.sx,
       }}>
       {userInfoListData.map((item) => (
-        <UserInfoItem key={item.title} data={item} sx={{ flex: 1 }} verified={item.verified} />
+        <UserInfoItem key={item.title} data={item} sx={{ flex: 1 }} />
       ))}
     </Box>
   );

package/src/UserCenter/components/user-info/user-status.tsx

@@ -0,0 +1,182 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import Badge from '@mui/material/Badge';
+import Box from '@mui/material/Box';
+import styled from '@emotion/styled';
+import { lazy, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCreation, useMemoizedFn, useInterval, useUnmount } from 'ahooks';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tooltip from '@mui/material/Tooltip';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { formatToDatetime } from '@arcblock/ux/lib/Util';
+import type { UserMetadata } from '../../../@types';
+import { DurationEnum, StatusEnum } from '../../../@types';
+import StatusSelector from '../status-selector';
+import { translations } from '../../libs/locales';
+import { getTimeRemaining, isWithinTimeRange } from './utils';
+
+const MeetingIcon = lazy(() => import('@arcblock/icons/lib/Meeting'));
+const CommunityIcon = lazy(() => import('@arcblock/icons/lib/Community'));
+const HolidayIcon = lazy(() => import('@arcblock/icons/lib/Holiday'));
+const OffSickIcon = lazy(() => import('@arcblock/icons/lib/OffSick'));
+const WorkingRemotelyIcon = lazy(() => import('@arcblock/icons/lib/WorkingRemotely'));
+
+const StatusIconMap: Record<StatusEnum, React.FC<SvgIconProps> | undefined> = {
+  [StatusEnum.Meeting]: MeetingIcon,
+  [StatusEnum.Community]: CommunityIcon,
+  [StatusEnum.Holiday]: HolidayIcon,
+  [StatusEnum.OffSick]: OffSickIcon,
+  [StatusEnum.WorkingRemotely]: WorkingRemotelyIcon,
+};
+
+export default function UserStatus({
+  isMobile,
+  size,
+  isMyself,
+  status,
+  onChange,
+}: {
+  isMobile?: boolean;
+  size: number;
+  isMyself: boolean;
+  status: UserMetadata['status'];
+  onChange: (v: UserMetadata['status']) => void;
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const [interval, setInterval] = useState<number | undefined>(undefined);
+
+  const pauseInterval = useMemoizedFn(() => {
+    setInterval(undefined);
+  });
+
+  useEffect(() => {
+    setInterval(1000);
+  }, [status]);
+
+  const clear = useInterval(() => {
+    if (status?.value && status?.dateRange?.length === 2) {
+      const isWithin = isWithinTimeRange(status.dateRange as [Date, Date]);
+      if (!isWithin) {
+        pauseInterval();
+        onChange(undefined);
+      } else {
+        // 根据距离结束时间长度，设置 interval
+        const timeRemaining = getTimeRemaining(status.dateRange[1]);
+        if (timeRemaining > 0) {
+          setInterval(timeRemaining);
+        } else {
+          pauseInterval();
+          onChange(undefined);
+        }
+      }
+    } else {
+      pauseInterval();
+    }
+  }, interval);
+
+  useUnmount(() => {
+    clear();
+  });
+
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
+
+  const getDurationData = useCallback(() => {
+    const data = Object.keys(DurationEnum).map((key) => ({
+      id: DurationEnum[key as keyof typeof DurationEnum],
+      name: t(`userStatus.duration.${key}`),
+    }));
+    return data;
+  }, [t]);
+
+  const statusData = useCreation(() => {
+    const durationData = getDurationData();
+    return Object.keys(StatusEnum).map((key) => ({
+      id: StatusEnum[key as keyof typeof StatusEnum],
+      name: t(`userStatus.${key}`),
+      icon: StatusIconMap[StatusEnum[key as keyof typeof StatusEnum]],
+      children: durationData,
+    }));
+  }, [t, getDurationData]);
+
+  const onOpenStatusSelector = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!isMyself) {
+      return;
+    }
+    setAnchorEl(event.currentTarget);
+  };
+
+  const onCloseStatusSelector = () => {
+    setAnchorEl(null);
+  };
+
+  const onStatusChange = (v?: UserMetadata['status']) => {
+    if (!isMyself) {
+      return;
+    }
+    if (v) {
+      onChange(v);
+    }
+    onCloseStatusSelector();
+  };
+
+  const StatusIcon = StatusIconMap[status?.value as keyof typeof StatusIconMap];
+
+  const tooltipTitle = useMemo(() => {
+    const currentStatus = statusData.find((item) => item.id === status?.value);
+    if (currentStatus) {
+      const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
+      const range = status?.dateRange?.map((item) => {
+        return formatToDatetime(item, { locale: localeOption });
+      });
+      return `${currentStatus?.name}: ${range?.join('~')}`;
+    }
+    return null;
+  }, [status, statusData, locale]);
+
+  const open = Boolean(anchorEl);
+
+  return (
+    <StatusDiv size={size} isMobile={isMobile}>
+      <Tooltip title={tooltipTitle}>
+        <Box
+          className="status-icon"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          onClick={onOpenStatusSelector}>
+          {StatusIcon ? <StatusIcon style={{ width: 16, height: 16 }} /> : <Badge color="success" variant="dot" />}
+        </Box>
+      </Tooltip>
+      <StatusSelector selected={status} data={statusData} open={open} onSelect={onStatusChange} anchorEl={anchorEl} />
+    </StatusDiv>
+  );
+}
+
+const StatusDiv = styled(Box)<{ size: number; isMobile?: boolean }>`
+  position: absolute;
+  left: ${({ size }) => `${(size * 3) / 4}px`};
+  top: ${({ size }) => `${size * 0.65}px`};
+  width: ${({ isMobile }) => (isMobile ? '22px' : '32px')};
+  height: ${({ isMobile }) => (isMobile ? '22px' : '32px')};
+  border-radius: ${({ isMobile }) => (isMobile ? '11px' : '16px')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+
+  .status-icon {
+    flex-shrink: 0;
+    width: ${({ isMobile }) => (isMobile ? '16px' : '26px')};
+    height: ${({ isMobile }) => (isMobile ? '16px' : '26px')};
+    border-radius: ${({ isMobile }) => (isMobile ? '8px' : '13px')};
+    background-color: #eff1f5;
+    // background-color: #39b380;
+  }
+`;

package/src/UserCenter/components/user-info/utils.ts

@@ -0,0 +1,114 @@
+import moment from 'moment-timezone';
+import dayjs from 'dayjs';
+import { DurationEnum, UserMetadata } from '../../../@types';
+
+const HOUR = 3600;
+const MINUTES_30 = 1800;
+const MINUTES_10 = 600;
+const MINUTES_5 = 300;
+const MINUTES_1 = 60;
+const SECOND = 1;
+export const getTimezones = () => {
+  const timezones = moment.tz.names();
+
+  const formattedTimezones = timezones.map((tz) => {
+    const offset = moment.tz(tz).utcOffset() / 60; // 计算 UTC 偏移 (小时)
+    const hours = Math.floor(offset);
+    const minutes = (offset % 1) * 60;
+    const label = `GMT${hours >= 0 ? '+' : ''}${hours}:${minutes === 30 ? '30' : '00'}`;
+
+    return { label, value: tz };
+  });
+
+  return formattedTimezones
+    .sort((a, b) => {
+      const [hoursA, minutesA] = a.label.replace('GMT', '').split(':').map(Number);
+      const [hoursB, minutesB] = b.label.replace('GMT', '').split(':').map(Number);
+      const totalOffsetA = hoursA * 60 + minutesA; // 统一为分钟数
+      const totalOffsetB = hoursB * 60 + minutesB;
+      return totalOffsetB - totalOffsetA; // **降序排列**
+    })
+    .map((tz) => ({
+      label: `(${tz.label}) ${tz.value}`,
+      value: tz.value,
+    }));
+};
+
+export const isValidUrl = (url: string) => {
+  const urlPattern =
+    /^(https?:\/\/)?((([a-zA-Z\d]([a-zA-Z\d-]*[a-zA-Z\d])*)\.)+[a-zA-Z]{2,}|((\d{1,3}\.){3}\d{1,3}))(:\d+)?(\/[-a-zA-Z\d%_.~+]*)*(\?[;&a-zA-Z\d%_.~+=-]*)?(#[a-zA-Z\d_]*)?$/;
+  return urlPattern.test(url);
+};
+
+/**
+ * 根据 duration 类型，计算出date range
+ * @param status
+ * @returns
+ */
+export const getStatusDuration = (status: UserMetadata['status']) => {
+  let dateRange: dayjs.Dayjs[] = [];
+  const current = dayjs();
+  switch (status?.duration) {
+    case DurationEnum.ThirtyMinutes:
+      dateRange = [current, current.add(30, 'minutes')];
+      break;
+    case DurationEnum.OneHour:
+      dateRange = [current, current.add(1, 'hour')];
+      break;
+    case DurationEnum.FourHours:
+      dateRange = [current, current.add(4, 'hours')];
+      break;
+    case DurationEnum.Today:
+      dateRange = [current, current.endOf('day')];
+      break;
+    case DurationEnum.ThisWeek:
+      dateRange = [current, current.endOf('week')];
+      break;
+    default:
+      break;
+  }
+  return dateRange.map((d) => d.toDate());
+};
+
+/**
+ * 根据状态的 duration，判断是否在时间范围内
+ * @param status
+ * @returns
+ */
+export const isWithinTimeRange = (dateRange: [Date, Date]) => {
+  const current = dayjs();
+  return current.isAfter(dayjs(dateRange[0])) && current.isBefore(dayjs(dateRange[1]));
+};
+
+/**
+ * 获取当前时间距离结束时间还有多久
+ */
+export const getTimeRemaining = (date: Date) => {
+  const now = dayjs();
+  const end = dayjs(date);
+  const diffSeconds = end.diff(now, 'seconds');
+
+  // 转换为毫秒
+  const toMilliseconds = (seconds: number) => seconds * 1000;
+
+  if (diffSeconds >= HOUR) {
+    return toMilliseconds(HOUR); // 1小时 = 3600000ms
+  }
+  if (diffSeconds >= MINUTES_30) {
+    return toMilliseconds(MINUTES_30); // 30分钟 = 1800000ms
+  }
+  if (diffSeconds >= MINUTES_10) {
+    return toMilliseconds(MINUTES_10); // 10分钟 = 600000ms
+  }
+  if (diffSeconds >= MINUTES_5) {
+    return toMilliseconds(MINUTES_5); // 5分钟 = 300000ms
+  }
+  if (diffSeconds >= MINUTES_1) {
+    return toMilliseconds(MINUTES_1); // 1分钟 = 60000ms
+  }
+  if (diffSeconds >= SECOND) {
+    return toMilliseconds(SECOND); // 1秒 = 1000ms
+  }
+
+  return 0; // 如果时间已过期，返回0
+};