@arcblock/ux 2.12.64 → 2.12.71

package/src/UserCard/types.ts

@@ -0,0 +1,129 @@
+import React from 'react';
+import { DIDProps } from '../DID';
+
+type UserPublicInfo = {
+  avatar: string;
+  did: string;
+  fullName: string;
+  sourceAppPid: string | null;
+};
+export type UserMetadataLink = {
+  url: string;
+  favicon?: string;
+};
+
+export enum DurationEnum {
+  NoClear = 'no_clear',
+  ThirtyMinutes = '30_minutes',
+  OneHour = '1_hour',
+  FourHours = '4_hours',
+  Today = 'today',
+  ThisWeek = 'this_week',
+  Custom = 'custom',
+}
+
+export enum StatusEnum {
+  Meeting = 'meeting',
+  Community = 'community',
+  Holiday = 'holiday',
+  OffSick = 'off_sick',
+  WorkingRemotely = 'working_remotely',
+}
+export type UserPhoneProps = {
+  country: string;
+  phoneNumber?: string;
+};
+
+export type UserMetadata = {
+  bio?: string;
+  location?: string;
+  timezone?: string;
+  joinedAt?: string;
+  status?: {
+    value: string;
+    duration?: DurationEnum;
+    dateRange?: Date[];
+  };
+  links?: UserMetadataLink[];
+  cover?: string;
+  // 这两个字段是 User, 方便数据更新，在保存时同步
+  email?: string;
+  phone?: UserPhoneProps;
+};
+
+export type UserAddress = {
+  country?: string;
+  province?: string;
+  city?: string;
+  line1?: string;
+  line2?: string;
+  postalCode?: string;
+};
+
+export type User = UserPublicInfo & {
+  role: string;
+  email?: string;
+  phone?: string;
+  sourceProvider?: string;
+  sourceAppPid?: string;
+  lastLoginAt?: string;
+  lastLoginIp?: string;
+  createdAt?: string;
+  passports?: any[];
+  didSpace?: Record<string, any>;
+  connectedAccounts?: any[];
+  locale?: string;
+  url: string;
+  inviter?: string;
+  emailVerified?: boolean;
+  phoneVerified?: boolean;
+  // 1.16.40 新增
+  metadata?: UserMetadata;
+  // 1.16.41 新增
+  address?: UserAddress;
+};
+
+// 头像大小
+export const AvatarSize = {
+  small: 32,
+  medium: 40,
+  large: 48,
+  xlarge: 64,
+};
+
+// 卡片类型
+export enum CardType {
+  AvatarOnly = 'AvatarOnly', // 仅头像
+  Detailed = 'Detailed', // 详细卡片
+}
+
+// 信息类型
+export enum InfoType {
+  NameOnly = 'NameOnly', // 仅显示名称
+  Minimal = 'Minimal', // 极简模式，显示头像、名称和DID
+  Basic = 'Basic', // 基本信息模式
+}
+
+// 定义UserCard属性接口
+export interface UserCardProps {
+  user: User;
+  cardType?: CardType;
+  infoType?: InfoType;
+  avatarSize?: number;
+  showHoverCard?: boolean;
+  showDid?: boolean;
+  didProps?: DIDProps;
+
+  // 关注功能相关属性
+  isFollowed?: boolean;
+  onFollow?: (user: User) => void;
+  onUnfollow?: (user: User) => void;
+  followLoading?: boolean;
+
+  // 右上角内容相关属性
+  renderTopRightContent?: () => React.ReactNode;
+  topRightMaxWidth?: number;
+
+  // 自定义内容渲染函数
+  renderCustomContent?: () => React.ReactNode;
+}

package/src/UserCard/utils.ts

@@ -0,0 +1,22 @@
+import { User } from './types';
+
+// 创建仅显示名称首字母的头像
+// eslint-disable-next-line import/prefer-default-export
+export function createNameOnlyAvatar(user: User) {
+  if (!user) return null;
+
+  // 使用全名或邮箱前缀作为显示内容
+  let content = '';
+  if (user.fullName) {
+    // 提取名称首字母
+    content = user.fullName.charAt(0).toUpperCase();
+  } else if (user.email) {
+    // 使用邮箱前缀首字母
+    content = user.email.split('@')[0].charAt(0).toUpperCase();
+  } else {
+    // 如果都没有，使用DID的第一个字符
+    content = user.did ? user.did.charAt(0).toUpperCase() : '?';
+  }
+
+  return content;
+}

package/src/hooks/use-clock.tsx

@@ -0,0 +1,61 @@
+import { useState, useEffect, useCallback } from 'react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import { formatToDatetime } from '@arcblock/ux/lib/Util';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+
+dayjs.extend(utc);
+dayjs.extend(timezonePlugin);
+dayjs.extend(localizedFormat);
+
+const currentTimezone = dayjs.tz.guess();
+
+// 获取时间段
+const getTimePhase = (hour: number) => {
+  if (hour >= 0 && hour < 6) return { phase: 'dawn', icon: '🌒' }; // 凌晨 00:00-05:59
+  if (hour >= 6 && hour < 12) return { phase: 'morning', icon: '🌞' }; // 上午 06:00-11:59
+  if (hour >= 12 && hour < 18) return { phase: 'afternoon', icon: '🌞' }; // 下午 12:00-17:59
+  return { phase: 'night', icon: '🌒' }; // 晚上 18:00-23:59
+};
+
+export default function useClock(timezone = currentTimezone, locale = 'zh') {
+  const getLatestTimeInfo = useCallback(() => {
+    const currentLocale = locale === 'zh' ? 'zh-cn' : 'en';
+    const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
+    dayjs.locale(currentLocale);
+
+    const now = dayjs().tz(timezone);
+    const hour = now.hour();
+    const { phase, icon } = getTimePhase(hour);
+
+    return {
+      formattedTime: now.format('LT'),
+      fullDateTime: formatToDatetime(now.toDate(), { tz: timezone, locale: localeOption }),
+      phase,
+      icon,
+      rawTime: now,
+    };
+  }, [timezone, locale]);
+
+  const [timeInfo, setTimeInfo] = useState(getLatestTimeInfo());
+
+  useEffect(() => {
+    // 立即更新一次，确保初始状态是最新的
+    setTimeInfo(getLatestTimeInfo());
+
+    // 设置定时器
+    const timerId = setInterval(() => {
+      setTimeInfo(getLatestTimeInfo());
+    }, 6000);
+
+    // 清理函数
+    return () => {
+      clearInterval(timerId);
+    };
+  }, [timezone, locale, getLatestTimeInfo]);
+
+  return timeInfo;
+}