@blocklet/ui-react 2.12.16 → 2.12.18

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

@@ -498,7 +498,16 @@ export default function UserCenter({
     }
     return currentActiveTab?.isPrivate;
   }, [isMyself, currentActiveTab]);
-  if (!disableAutoRedirect && !currentTab && userCenterTabs?.length > 0 || !currentActiveTab || isPrivateActive) {
+  const shouldRedirect = useCreation(() => {
+    if (onlyProfile) {
+      return false;
+    }
+    const noActiveTabButHasTabs = !disableAutoRedirect && !currentTab && userCenterTabs?.length > 0;
+    const invalidCurrentTab = !currentActiveTab;
+    const accessingPrivateTab = isPrivateActive;
+    return noActiveTabButHasTabs || invalidCurrentTab || accessingPrivateTab;
+  }, [disableAutoRedirect, currentTab, userCenterTabs, currentActiveTab, isPrivateActive, onlyProfile]);
+  if (shouldRedirect) {
     const firstUserCenterUrl = userCenterTabs[0]?.url;
     const firstTab = userCenterTabs.find((x) => x.value === firstUserCenterUrl);
     if (firstUserCenterUrl && !firstTab?.isPrivate) {
@@ -510,7 +519,7 @@ export default function UserCenter({
     }
     return null;
   }
-  if (embed) {
+  if (embed || onlyProfile) {
     return /* @__PURE__ */ jsxs(Main, { children: [
       content,
       confirmHolder

package/lib/UserCenter/components/user-info/clock.d.ts

@@ -1,4 +1,3 @@
-export default function Clock({ timezone, locale }: {
-    timezone?: string;
-    locale?: string;
+export default function Clock({ value }: {
+    value: string;
 }): import("react").JSX.Element;

package/lib/UserCenter/components/user-info/clock.js

@@ -1,24 +1,48 @@
-import { jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezonePlugin from "dayjs/plugin/timezone";
-import { formatToDatetime } from "@arcblock/ux/lib/Util";
-import { useCreation } from "ahooks";
-import { currentTimezone } from "./utils.js";
-dayjs.extend(utc);
-dayjs.extend(timezonePlugin);
-export default function Clock({ timezone = currentTimezone, locale = "zh" }) {
-  const [time, setTime] = useState(dayjs().tz(timezone || currentTimezone));
-  useEffect(() => {
-    const timerId = setInterval(() => {
-      setTime(dayjs().tz(timezone));
-    }, 6e3);
-    return () => clearInterval(timerId);
-  }, [timezone]);
-  const formatTime = useCreation(() => {
-    const localeOption = locale === "zh" ? "zh-cn" : "en-us";
-    return formatToDatetime(time.toDate(), { tz: timezone, locale: localeOption });
-  }, [time, timezone, locale]);
-  return /* @__PURE__ */ jsx("div", { children: formatTime });
+import { jsx, jsxs } from "react/jsx-runtime";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useMemoizedFn } from "ahooks";
+import { translations } from "../../libs/locales.js";
+import { useClock } from "../../../hooks/use-clock.js";
+export default function Clock({ value }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const timeInfo = useClock(value, locale);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      },
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      children: [
+        /* @__PURE__ */ jsx(Typography, { children: value }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: /* @__PURE__ */ jsxs("span", { children: [
+              t("profile.localTime"),
+              " ",
+              timeInfo.fullDateTime
+            ] }),
+            children: /* @__PURE__ */ jsxs(Typography, { component: "span", fontSize: 14, children: [
+              "(",
+              locale === "zh" ? `${t(`profile.timezonePhase.${timeInfo.phase}`)} ` : "",
+              timeInfo.formattedTime,
+              ")"
+            ] })
+          }
+        )
+      ]
+    }
+  );
 }

package/lib/UserCenter/components/user-info/metadata.js

@@ -20,8 +20,8 @@ import { translations } from "../../libs/locales.js";
 import EditableField from "../editable-field.js";
 import { LinkPreviewInput } from "./link-preview-input.js";
 import { currentTimezone, defaultButtonStyle, primaryButtonStyle } from "./utils.js";
-import Clock from "./clock.js";
 import { TimezoneSelect } from "./timezone-select.js";
+import Clock from "./clock.js";
 const LocationIcon = lazy(() => import("@arcblock/icons/lib/Location"));
 const TimezoneIcon = lazy(() => import("@arcblock/icons/lib/Timezone"));
 const EmailIcon = lazy(() => import("@arcblock/icons/lib/Email"));
@@ -245,10 +245,9 @@ export default function UserMetadataComponent({
               placeholder: "timezone",
               icon: /* @__PURE__ */ jsx(TimezoneIcon, { ...iconSize }),
               label: t("profile.timezone"),
-              tooltip: /* @__PURE__ */ jsxs("p", { style: { display: "flex", margin: 0 }, children: [
-                /* @__PURE__ */ jsx("span", { style: { marginRight: "4px" }, children: t("profile.localTime") }),
-                /* @__PURE__ */ jsx(Clock, { timezone: metadata.timezone, locale })
-              ] }),
+              renderValue: (value) => {
+                return /* @__PURE__ */ jsx(Clock, { value });
+              },
               children: /* @__PURE__ */ jsx(
                 TimezoneSelect,
                 {

package/lib/UserCenter/libs/locales.d.ts

@@ -131,6 +131,12 @@ export declare const translations: {
             quickSettings: string;
             selectEndTime: string;
             pleaseSelectTime: string;
+            timezonePhase: {
+                dawn: string;
+                morning: string;
+                afternoon: string;
+                night: string;
+            };
         };
     };
     en: {
@@ -266,6 +272,12 @@ export declare const translations: {
             pleaseSelectTime: string;
             cleanStatus: string;
             quickSettings: string;
+            timezonePhase: {
+                dawn: string;
+                morning: string;
+                afternoon: string;
+                night: string;
+            };
         };
     };
 };

package/lib/UserCenter/libs/locales.js

@@ -130,7 +130,13 @@ export const translations = {
       cleanStatus: "\u6E05\u9664\u72B6\u6001",
       quickSettings: "\u5FEB\u6377\u8BBE\u7F6E",
       selectEndTime: "\u9009\u62E9\u7ED3\u675F\u65F6\u95F4",
-      pleaseSelectTime: "\u8BF7\u9009\u62E9\u65F6\u95F4"
+      pleaseSelectTime: "\u8BF7\u9009\u62E9\u65F6\u95F4",
+      timezonePhase: {
+        dawn: "\u51CC\u6668",
+        morning: "\u4E0A\u5348",
+        afternoon: "\u4E0B\u5348",
+        night: "\u665A\u4E0A"
+      }
     }
   },
   en: {
@@ -265,7 +271,13 @@ export const translations = {
       selectEndTime: "Select end time",
       pleaseSelectTime: "Please select time",
       cleanStatus: "Clean status",
-      quickSettings: "Quick Settings"
+      quickSettings: "Quick Settings",
+      timezonePhase: {
+        dawn: "AM",
+        morning: "AM",
+        afternoon: "PM",
+        night: "PM"
+      }
     }
   }
 };

package/lib/hooks/use-clock.d.ts

@@ -0,0 +1,9 @@
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+export declare function useClock(timezone?: any, locale?: string): {
+    formattedTime: any;
+    fullDateTime: any;
+    phase: string;
+    icon: string;
+    rawTime: any;
+};

package/lib/hooks/use-clock.js

@@ -0,0 +1,49 @@
+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) => {
+  if (hour >= 0 && hour < 6)
+    return { phase: "dawn", icon: "\u{1F312}" };
+  if (hour >= 6 && hour < 12)
+    return { phase: "morning", icon: "\u{1F31E}" };
+  if (hour >= 12 && hour < 18)
+    return { phase: "afternoon", icon: "\u{1F31E}" };
+  return { phase: "night", icon: "\u{1F312}" };
+};
+export 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());
+    }, 6e3);
+    return () => {
+      clearInterval(timerId);
+    };
+  }, [timezone, locale, getLatestTimeInfo]);
+  return timeInfo;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.16",
+  "version": "2.12.18",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,10 +33,10 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.39",
-    "@arcblock/bridge": "^2.12.16",
-    "@arcblock/react-hooks": "^2.12.16",
+    "@arcblock/bridge": "^2.12.18",
+    "@arcblock/react-hooks": "^2.12.18",
     "@arcblock/ws": "^1.19.15",
-    "@blocklet/did-space-react": "^1.0.30",
+    "@blocklet/did-space-react": "^1.0.31",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -87,5 +87,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "02b619f243bf6a0c6847349edf513e18b212bcd7"
+  "gitHead": "e5629cf0ff51b952d35fe85d05065740f740048b"
 }

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

@@ -566,10 +566,29 @@ export default function UserCenter({
     return currentActiveTab?.isPrivate;
   }, [isMyself, currentActiveTab]);
 
-  // TODO 过滤 !mySelf 是的URL跳转
-  if ((!disableAutoRedirect && !currentTab && userCenterTabs?.length > 0) || !currentActiveTab || isPrivateActive) {
+  // 判断是否需要重定向到第一个可用的标签页
+  const shouldRedirect = useCreation(() => {
+    // 非 Profile 模式下才考虑重定向
+    if (onlyProfile) {
+      return false;
+    }
+
+    // 以下任一条件满足时需要重定向:
+    // 1. 自动重定向开启且当前无激活标签但有可用标签
+    const noActiveTabButHasTabs = !disableAutoRedirect && !currentTab && userCenterTabs?.length > 0;
+    // 2. 当前标签页不存在
+    const invalidCurrentTab = !currentActiveTab;
+    // 3. 当前是私有标签页但用户在查看他人信息
+    const accessingPrivateTab = isPrivateActive;
+
+    return noActiveTabButHasTabs || invalidCurrentTab || accessingPrivateTab;
+  }, [disableAutoRedirect, currentTab, userCenterTabs, currentActiveTab, isPrivateActive, onlyProfile]);
+
+  if (shouldRedirect) {
+    // 获取第一个可用的标签页URL
     const firstUserCenterUrl = userCenterTabs[0]?.url;
     const firstTab = userCenterTabs.find((x) => x.value === firstUserCenterUrl);
+    // 如果存在非私有的第一个标签页，则重定向
     if (firstUserCenterUrl && !firstTab?.isPrivate) {
       window.location.replace(
         withQuery(firstUserCenterUrl, {
@@ -581,7 +600,7 @@ export default function UserCenter({
   }
 
   // 嵌入其它页面内时，只展示 content
-  if (embed) {
+  if (embed || onlyProfile) {
     return (
       <Main>
         {content}

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

@@ -1,30 +1,41 @@
-import { useState, useEffect } from 'react';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import { formatToDatetime } from '@arcblock/ux/lib/Util';
-import { useCreation } from 'ahooks';
-import { currentTimezone } from './utils';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useMemoizedFn } from 'ahooks';
+import { translations } from '../../libs/locales';
+import { useClock } from '../../../hooks/use-clock';
 
-dayjs.extend(utc);
-dayjs.extend(timezonePlugin);
+export default function Clock({ value }: { value: string }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const timeInfo = useClock(value, locale);
 
-export default function Clock({ timezone = currentTimezone, locale = 'zh' }: { timezone?: string; locale?: string }) {
-  const [time, setTime] = useState(dayjs().tz(timezone || currentTimezone));
-
-  useEffect(() => {
-    const timerId = setInterval(() => {
-      setTime(dayjs().tz(timezone));
-    }, 6000); // 每分钟更新一次
-
-    // 清除定时器
-    return () => clearInterval(timerId);
-  }, [timezone]);
-
-  const formatTime = useCreation(() => {
-    const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
-    return formatToDatetime(time.toDate(), { tz: timezone, locale: localeOption });
-  }, [time, timezone, locale]);
-
-  return <div>{formatTime}</div>;
+  return (
+    <Box
+      sx={{
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      }}
+      display="flex"
+      alignItems="center"
+      gap={1}>
+      <Typography>{value}</Typography>
+      <Tooltip
+        title={
+          <span>
+            {t('profile.localTime')} {timeInfo.fullDateTime}
+          </span>
+        }>
+        <Typography component="span" fontSize={14}>
+          ({locale === 'zh' ? `${t(`profile.timezonePhase.${timeInfo.phase}`)} ` : ''}
+          {timeInfo.formattedTime})
+        </Typography>
+      </Tooltip>
+    </Box>
+  );
 }

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

@@ -18,15 +18,14 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import isEmail from 'validator/lib/isEmail';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
 import { useBrowser } from '@arcblock/react-hooks';
 import { translations } from '../../libs/locales';
 import type { User, UserMetadata, UserPhoneProps } from '../../../@types';
 import EditableField from '../editable-field';
 import { LinkPreviewInput } from './link-preview-input';
 import { currentTimezone, defaultButtonStyle, primaryButtonStyle } from './utils';
-import Clock from './clock';
 import { TimezoneSelect } from './timezone-select';
+import Clock from './clock';
 
 const LocationIcon = lazy(() => import('@arcblock/icons/lib/Location'));
 const TimezoneIcon = lazy(() => import('@arcblock/icons/lib/Timezone'));
@@ -270,12 +269,9 @@ export default function UserMetadataComponent({
           placeholder="timezone"
           icon={<TimezoneIcon {...iconSize} />}
           label={t('profile.timezone')}
-          tooltip={
-            <p style={{ display: 'flex', margin: 0 }}>
-              <span style={{ marginRight: '4px' }}>{t('profile.localTime')}</span>
-              <Clock timezone={metadata.timezone} locale={locale} />
-            </p>
-          }>
+          renderValue={(value) => {
+            return <Clock value={value} />;
+          }}>
           <TimezoneSelect
             value={metadata.timezone || currentTimezone}
             onChange={(value) => onChange(value, 'timezone')}

package/src/UserCenter/libs/locales.ts

@@ -133,6 +133,12 @@ export const translations = {
       quickSettings: '快捷设置',
       selectEndTime: '选择结束时间',
       pleaseSelectTime: '请选择时间',
+      timezonePhase: {
+        dawn: '凌晨',
+        morning: '上午',
+        afternoon: '下午',
+        night: '晚上',
+      },
     },
   },
   en: {
@@ -270,6 +276,12 @@ export const translations = {
       pleaseSelectTime: 'Please select time',
       cleanStatus: 'Clean status',
       quickSettings: 'Quick Settings',
+      timezonePhase: {
+        dawn: 'AM',
+        morning: 'AM',
+        afternoon: 'PM',
+        night: 'PM',
+      },
     },
   },
 };

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 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;
+}