@blocklet/ui-react 2.12.20 → 2.12.22

package/lib/@types/index.d.ts

@@ -43,6 +43,7 @@ export type UserMetadataLink = {
     favicon?: string;
 };
 export declare enum DurationEnum {
+    NoClear = "no_clear",
     ThirtyMinutes = "30_minutes",
     OneHour = "1_hour",
     FourHours = "4_hours",

package/lib/@types/index.js

@@ -1,4 +1,5 @@
 export var DurationEnum = /* @__PURE__ */ ((DurationEnum2) => {
+  DurationEnum2["NoClear"] = "no_clear";
   DurationEnum2["ThirtyMinutes"] = "30_minutes";
   DurationEnum2["OneHour"] = "1_hour";
   DurationEnum2["FourHours"] = "4_hours";

package/lib/UserCenter/components/editable-field.d.ts

@@ -20,5 +20,31 @@ interface EditableFieldProps {
     canEdit?: boolean;
     renderValue?: (value: string) => React.ReactNode;
 }
+export declare const commonInputStyle: {
+    '.MuiOutlinedInput-root': {
+        '&:hover': {
+            fieldset: {
+                borderColor: string;
+            };
+        };
+        '&.Mui-focused': {
+            fieldset: {
+                borderColor: string;
+            };
+        };
+    };
+};
+export declare const inputFieldStyle: {
+    width: string;
+    '& .MuiFormHelperText-root': {
+        position: string;
+        bottom: number;
+        left: number;
+        margin: number;
+    };
+    fieldset: {
+        borderColor: string;
+    };
+};
 declare function EditableField({ value, onChange, onValueValidate, errorMsg, editable, component, placeholder, rows, maxLength, icon, label, children, tooltip, inline, style, verified, canEdit, renderValue, }: EditableFieldProps): JSX.Element | null;
 export default EditableField;

package/lib/UserCenter/components/editable-field.js

@@ -5,9 +5,9 @@ import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import VerifiedIcon from "@mui/icons-material/Verified";
+import { mergeSx } from "@arcblock/ux/lib/Util/style";
 import { translations } from "../libs/locales.js";
-const inputFieldStyle = {
-  width: "100%",
+export const commonInputStyle = {
   ".MuiOutlinedInput-root": {
     "&:hover": {
       fieldset: {
@@ -19,6 +19,15 @@ const inputFieldStyle = {
         borderColor: colors.dividerColor
       }
     }
+  }
+};
+export const inputFieldStyle = {
+  width: "100%",
+  "& .MuiFormHelperText-root": {
+    position: "relative",
+    bottom: 0,
+    left: 0,
+    margin: 0
   },
   fieldset: {
     borderColor: colors.dividerColor
@@ -74,7 +83,7 @@ function EditableField({
           },
           value,
           onChange: (e) => handleChange(e.target.value),
-          sx: inputFieldStyle,
+          sx: mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {}),
           error: Boolean(errorMsg),
           helperText: errorMsg
         }
@@ -91,7 +100,7 @@ function EditableField({
             minRows: rows,
             placeholder
           },
-          sx: inputFieldStyle,
+          sx: mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {}),
           value,
           onChange: (e) => handleChange(e.target.value),
           error: Boolean(errorMsg),

package/lib/UserCenter/components/user-info/link-preview-input.js

@@ -9,10 +9,27 @@ import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useMemoizedFn } from "ahooks";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import LinkIcon from "@arcblock/icons/lib/Link";
-import { joinURL } from "ufo";
+import { mergeSx } from "@arcblock/ux/lib/Util/style";
+import { joinURL, parseURL } from "ufo";
 import { isValidUrl } from "./utils.js";
 import { translations } from "../../libs/locales.js";
-function LinkInput({ value, onChange, error }) {
+import { commonInputStyle, inputFieldStyle } from "../editable-field.js";
+function formatLinkDisplay(link) {
+  try {
+    const url = parseURL(link);
+    if (url.protocol === "http:" || url.protocol === "https:") {
+      return url.host || link;
+    }
+    return link;
+  } catch {
+    return link;
+  }
+}
+function LinkInput({
+  value,
+  onChange,
+  errorMsg
+}) {
   const handleUrlChange = (event) => {
     const inputValue = event.target.value;
     onChange(inputValue);
@@ -24,13 +41,9 @@ function LinkInput({ value, onChange, error }) {
       value,
       onChange: handleUrlChange,
       fullWidth: true,
-      error,
-      helperText: error ? "Invalid URL" : "",
-      sx: {
-        fieldset: {
-          borderColor: colors.dividerColor
-        }
-      }
+      error: !!errorMsg,
+      helperText: errorMsg,
+      sx: mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {})
     }
   ) });
 }
@@ -68,7 +81,14 @@ function DynamicLinkForm({ links = [], onChange }) {
     links.map((link, index) => (
       // eslint-disable-next-line react/no-array-index-key
       /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "flex-start", mb: 1, children: [
-        /* @__PURE__ */ jsx(LinkInput, { value: link, onChange: (value) => handleInputChange(index, value), error: errors[index] }),
+        /* @__PURE__ */ jsx(
+          LinkInput,
+          {
+            value: link,
+            onChange: (value) => handleInputChange(index, value),
+            errorMsg: errors[index] ? t("profile.invalidURL") : ""
+          }
+        ),
         /* @__PURE__ */ jsx(IconButton, { sx: { color: colors.foregroundsFgMuted }, onClick: () => handleRemoveLink(index), children: /* @__PURE__ */ jsx(RemoveIcon, {}) })
       ] }, index)
     )),
@@ -155,7 +175,7 @@ export function LinkPreviewInput({
       },
       children: [
         /* @__PURE__ */ jsx(FaviconPreview, { link }),
-        /* @__PURE__ */ jsx(LinkDiv, { children: /* @__PURE__ */ jsx(Box, { component: "a", href: link, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: link }) })
+        /* @__PURE__ */ jsx(LinkDiv, { children: /* @__PURE__ */ jsx(Box, { component: "a", href: link, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: formatLinkDisplay(link) }) })
       ]
     },
     link

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

@@ -9,15 +9,15 @@ import { joinURL } from "ufo";
 import Button from "@arcblock/ux/lib/Button";
 import PhoneInput, { validatePhoneNumber } from "@arcblock/ux/lib/PhoneInput";
 import cloneDeep from "lodash/cloneDeep";
+import { mergeSx } from "@arcblock/ux/lib/Util/style";
 import { useCreation, useMemoizedFn, useReactive } from "ahooks";
 import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from "react";
 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.js";
-import EditableField from "../editable-field.js";
+import EditableField, { commonInputStyle, inputFieldStyle } from "../editable-field.js";
 import { LinkPreviewInput } from "./link-preview-input.js";
 import { currentTimezone, defaultButtonStyle, primaryButtonStyle } from "./utils.js";
 import { TimezoneSelect } from "./timezone-select.js";
@@ -316,24 +316,7 @@ export default function UserMetadataComponent({
                   value: phoneValue,
                   error: !!validateMsg.phone,
                   helperText: validateMsg.phone,
-                  sx: {
-                    width: "100%",
-                    ".MuiOutlinedInput-root": {
-                      "&:hover": {
-                        fieldset: {
-                          borderColor: colors.dividerColor
-                        }
-                      },
-                      "&.Mui-focused": {
-                        fieldset: {
-                          borderColor: colors.dividerColor
-                        }
-                      }
-                    },
-                    fieldset: {
-                      borderColor: colors.dividerColor
-                    }
-                  },
+                  sx: mergeSx(inputFieldStyle, !validateMsg.phone ? commonInputStyle : {}),
                   onChange: (value) => {
                     const isValid = validatePhoneNumber(value.phone);
                     if (!isValid) {

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

@@ -11,7 +11,7 @@ import { formatToDatetime } from "@arcblock/ux/lib/Util";
 import { DurationEnum, StatusEnum } from "../../../@types/index.js";
 import StatusDialog from "../status-dialog/index.js";
 import { translations } from "../../libs/locales.js";
-import { getTimeRemaining, isWithinTimeRange } from "./utils.js";
+import { getTimeRemaining, isNotClear, isWithinTimeRange } from "./utils.js";
 const MeetingIcon = lazy(() => import("@arcblock/icons/lib/Meeting"));
 const CommunityIcon = lazy(() => import("@arcblock/icons/lib/Community"));
 const HolidayIcon = lazy(() => import("@arcblock/icons/lib/Holiday"));
@@ -67,6 +67,10 @@ export default function UserStatus({
   }, [status]);
   const clear = useInterval(() => {
     if (status?.value && status?.dateRange?.length === 2) {
+      const notClear = isNotClear(status);
+      if (notClear) {
+        return;
+      }
       const isWithin = isWithinTimeRange(status.dateRange);
       if (!isWithin) {
         pauseInterval();
@@ -107,7 +111,7 @@ export default function UserStatus({
         children: durationData
       };
     });
-  }, [t, getDurationData]);
+  }, [t, getDurationData, locale]);
   const onOpenStatusSelector = (event) => {
     if (!isMyself) {
       return;
@@ -129,10 +133,17 @@ export default function UserStatus({
     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("~")}`;
+      let range;
+      const notClear = isNotClear(status);
+      if (!notClear) {
+        range = status?.dateRange?.map((item) => {
+          return formatToDatetime(item, { locale: localeOption });
+        });
+      }
+      if (range && range.length > 0) {
+        return `${currentStatus.name}: ${range.join("~")}`;
+      }
+      return currentStatus.name;
     }
     return null;
   }, [status, statusData, locale]);

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

@@ -14,6 +14,12 @@ export declare const getStatusDuration: (status: UserMetadata["status"]) => any[
  * @returns
  */
 export declare const isWithinTimeRange: (dateRange: [Date, Date]) => any;
+/**
+ * 判断状态持续时间是否为不可清除
+ * @param status
+ * @returns
+ */
+export declare const isNotClear: (status: UserMetadata["status"]) => any;
 /**
  * 获取当前时间距离结束时间还有多久
  */

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

@@ -52,6 +52,9 @@ export const getStatusDuration = (status) => {
     case DurationEnum.ThisWeek:
       dateRange = [current, current.endOf("week")];
       break;
+    case DurationEnum.NoClear:
+      dateRange = [current, current];
+      break;
     default:
       break;
   }
@@ -61,6 +64,13 @@ export const isWithinTimeRange = (dateRange) => {
   const current = dayjs();
   return current.isAfter(dayjs(dateRange[0])) && current.isBefore(dayjs(dateRange[1]));
 };
+export const isNotClear = (status) => {
+  const { duration, dateRange } = status ?? {};
+  if (!duration || !dateRange) {
+    return false;
+  }
+  return duration === DurationEnum.NoClear || dayjs(dateRange?.[0]).isSame(dayjs(dateRange?.[1]));
+};
 export const getTimeRemaining = (date) => {
   const now = dayjs();
   const end = dayjs(date);

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

@@ -105,6 +105,7 @@ export declare const translations: {
             OffSick: string;
             WorkingRemotely: string;
             duration: {
+                NoClear: string;
                 ThirtyMinutes: string;
                 OneHour: string;
                 FourHours: string;
@@ -131,6 +132,7 @@ export declare const translations: {
             quickSettings: string;
             selectEndTime: string;
             pleaseSelectTime: string;
+            invalidURL: string;
             timezonePhase: {
                 dawn: string;
                 morning: string;
@@ -245,6 +247,7 @@ export declare const translations: {
             OffSick: string;
             WorkingRemotely: string;
             duration: {
+                NoClear: string;
                 ThirtyMinutes: string;
                 OneHour: string;
                 FourHours: string;
@@ -272,6 +275,7 @@ export declare const translations: {
             pleaseSelectTime: string;
             cleanStatus: string;
             quickSettings: string;
+            invalidURL: string;
             timezonePhase: {
                 dawn: string;
                 morning: string;

package/lib/UserCenter/libs/locales.js

@@ -105,6 +105,7 @@ export const translations = {
       OffSick: "\u75C5\u5047",
       WorkingRemotely: "\u8FDC\u7A0B\u5DE5\u4F5C",
       duration: {
+        NoClear: "\u4E0D\u8981\u6E05\u9664",
         ThirtyMinutes: "30\u5206\u949F",
         OneHour: "1\u5C0F\u65F6",
         FourHours: "4\u5C0F\u65F6",
@@ -131,6 +132,7 @@ export const translations = {
       quickSettings: "\u5FEB\u6377\u8BBE\u7F6E",
       selectEndTime: "\u9009\u62E9\u7ED3\u675F\u65F6\u95F4",
       pleaseSelectTime: "\u8BF7\u9009\u62E9\u65F6\u95F4",
+      invalidURL: "\u65E0\u6548\u7684 URL",
       timezonePhase: {
         dawn: "\u51CC\u6668",
         morning: "\u4E0A\u5348",
@@ -245,6 +247,7 @@ export const translations = {
       OffSick: "Off Sick",
       WorkingRemotely: "Working Remotely",
       duration: {
+        NoClear: "Don't clear",
         ThirtyMinutes: "30 minutes",
         OneHour: "1 hour",
         FourHours: "4 hours",
@@ -272,6 +275,7 @@ export const translations = {
       pleaseSelectTime: "Please select time",
       cleanStatus: "Clean status",
       quickSettings: "Quick Settings",
+      invalidURL: "Invalid URL",
       timezonePhase: {
         dawn: "AM",
         morning: "AM",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.20",
+  "version": "2.12.22",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.39",
-    "@arcblock/bridge": "^2.12.20",
-    "@arcblock/react-hooks": "^2.12.20",
+    "@arcblock/bridge": "^2.12.22",
+    "@arcblock/react-hooks": "^2.12.22",
     "@arcblock/ws": "^1.19.15",
     "@blocklet/did-space-react": "^1.0.33",
     "@iconify-icons/logos": "^1.2.36",
@@ -87,5 +87,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "c2b00ec84f106657107bb415f255855e22e1de26"
+  "gitHead": "f6f7c7949553c8c3e66516f13f768264f480b5d6"
 }

package/src/@types/index.ts

@@ -50,6 +50,7 @@ export type UserMetadataLink = {
 };
 
 export enum DurationEnum {
+  NoClear = 'no_clear',
   ThirtyMinutes = '30_minutes',
   OneHour = '1_hour',
   FourHours = '4_hours',

package/src/UserCenter/components/editable-field.tsx

@@ -5,6 +5,7 @@ import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import VerifiedIcon from '@mui/icons-material/Verified';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
 import { translations } from '../libs/locales';
 
 interface EditableFieldProps {
@@ -28,8 +29,7 @@ interface EditableFieldProps {
   renderValue?: (value: string) => React.ReactNode;
 }
 
-const inputFieldStyle = {
-  width: '100%',
+export const commonInputStyle = {
   '.MuiOutlinedInput-root': {
     '&:hover': {
       fieldset: {
@@ -42,7 +42,16 @@ const inputFieldStyle = {
       },
     },
   },
+};
 
+export const inputFieldStyle = {
+  width: '100%',
+  '& .MuiFormHelperText-root': {
+    position: 'relative',
+    bottom: 0,
+    left: 0,
+    margin: 0,
+  },
   fieldset: {
     borderColor: colors.dividerColor,
   },
@@ -97,7 +106,7 @@ function EditableField({
           }}
           value={value}
           onChange={(e) => handleChange(e.target.value)}
-          sx={inputFieldStyle}
+          sx={mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {})}
           error={Boolean(errorMsg)}
           helperText={errorMsg}
         />
@@ -114,7 +123,7 @@ function EditableField({
             minRows: rows,
             placeholder,
           }}
-          sx={inputFieldStyle}
+          sx={mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {})}
           value={value}
           onChange={(e) => handleChange(e.target.value)}
           error={Boolean(errorMsg)}

package/src/UserCenter/components/user-info/link-preview-input.tsx

@@ -10,14 +10,42 @@ import { useMemoizedFn } from 'ahooks';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import LinkIcon from '@arcblock/icons/lib/Link';
-import { joinURL } from 'ufo';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
+import { joinURL, parseURL } from 'ufo';
 import { isValidUrl } from './utils';
 import { translations } from '../../libs/locales';
+import { commonInputStyle, inputFieldStyle } from '../editable-field';
+
+/**
+ * 格式化链接显示
+ * 对于 http/https 协议只显示域名，其他协议显示完整链接
+ */
+function formatLinkDisplay(link: string): string {
+  try {
+    const url = parseURL(link);
+    // 如果是 http 或 https 协议，只显示域名
+    if (url.protocol === 'http:' || url.protocol === 'https:') {
+      return url.host || link;
+    }
+    // 其他协议显示完整链接
+    return link;
+  } catch {
+    return link;
+  }
+}
 
 /**
  * 链接预览输入框
  */
-function LinkInput({ value, onChange, error }: { value: string; onChange: (value: string) => void; error: boolean }) {
+function LinkInput({
+  value,
+  onChange,
+  errorMsg,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  errorMsg: string;
+}) {
   const handleUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value;
     onChange(inputValue);
@@ -30,13 +58,9 @@ function LinkInput({ value, onChange, error }: { value: string; onChange: (value
         value={value}
         onChange={handleUrlChange}
         fullWidth
-        error={error}
-        helperText={error ? 'Invalid URL' : ''}
-        sx={{
-          fieldset: {
-            borderColor: colors.dividerColor,
-          },
-        }}
+        error={!!errorMsg}
+        helperText={errorMsg}
+        sx={mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {})}
       />
     </FormControl>
   );
@@ -93,7 +117,11 @@ function DynamicLinkForm({ links = [], onChange }: { links: string[]; onChange:
       {links.map((link, index) => (
         // eslint-disable-next-line react/no-array-index-key
         <Box key={index} display="flex" alignItems="flex-start" mb={1}>
-          <LinkInput value={link} onChange={(value) => handleInputChange(index, value)} error={errors[index]} />
+          <LinkInput
+            value={link}
+            onChange={(value) => handleInputChange(index, value)}
+            errorMsg={errors[index] ? t('profile.invalidURL') : ''}
+          />
           <IconButton sx={{ color: colors.foregroundsFgMuted }} onClick={() => handleRemoveLink(index)}>
             <RemoveIcon />
           </IconButton>
@@ -198,7 +226,7 @@ export function LinkPreviewInput({
           <FaviconPreview link={link} />
           <LinkDiv>
             <Box component="a" href={link} style={{ textDecoration: 'none' }} target="_blank" rel="noopener noreferrer">
-              {link}
+              {formatLinkDisplay(link)}
             </Box>
           </LinkDiv>
         </Box>

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

@@ -11,17 +11,17 @@ import { joinURL } from 'ufo';
 import Button from '@arcblock/ux/lib/Button';
 import PhoneInput, { PhoneValue, validatePhoneNumber } from '@arcblock/ux/lib/PhoneInput';
 import cloneDeep from 'lodash/cloneDeep';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
 
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from 'react';
 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 EditableField, { commonInputStyle, inputFieldStyle } from '../editable-field';
 import { LinkPreviewInput } from './link-preview-input';
 import { currentTimezone, defaultButtonStyle, primaryButtonStyle } from './utils';
 import { TimezoneSelect } from './timezone-select';
@@ -330,24 +330,7 @@ export default function UserMetadataComponent({
             value={phoneValue}
             error={!!validateMsg.phone}
             helperText={validateMsg.phone}
-            sx={{
-              width: '100%',
-              '.MuiOutlinedInput-root': {
-                '&:hover': {
-                  fieldset: {
-                    borderColor: colors.dividerColor,
-                  },
-                },
-                '&.Mui-focused': {
-                  fieldset: {
-                    borderColor: colors.dividerColor,
-                  },
-                },
-              },
-              fieldset: {
-                borderColor: colors.dividerColor,
-              },
-            }}
+            sx={mergeSx(inputFieldStyle, !validateMsg.phone ? commonInputStyle : {})}
             onChange={(value: any) => {
               const isValid = validatePhoneNumber(value.phone);
               if (!isValid) {

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

@@ -13,7 +13,7 @@ import type { UserMetadata } from '../../../@types';
 import { DurationEnum, StatusEnum } from '../../../@types';
 import StatusDialog from '../status-dialog';
 import { translations } from '../../libs/locales';
-import { getTimeRemaining, isWithinTimeRange } from './utils';
+import { getTimeRemaining, isNotClear, isWithinTimeRange } from './utils';
 import { StatusItem } from '../status-selector/menu-item';
 
 const MeetingIcon = lazy(() => import('@arcblock/icons/lib/Meeting'));
@@ -85,6 +85,10 @@ export default function UserStatus({
 
   const clear = useInterval(() => {
     if (status?.value && status?.dateRange?.length === 2) {
+      const notClear = isNotClear(status);
+      if (notClear) {
+        return;
+      }
       const isWithin = isWithinTimeRange(status.dateRange as [Date, Date]);
       if (!isWithin) {
         pauseInterval();
@@ -131,7 +135,7 @@ export default function UserStatus({
         children: durationData,
       };
     });
-  }, [t, getDurationData]);
+  }, [t, getDurationData, locale]);
 
   const onOpenStatusSelector = (event: React.MouseEvent<HTMLDivElement>) => {
     if (!isMyself) {
@@ -158,10 +162,17 @@ export default function UserStatus({
     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('~')}`;
+      let range;
+      const notClear = isNotClear(status);
+      if (!notClear) {
+        range = status?.dateRange?.map((item) => {
+          return formatToDatetime(item, { locale: localeOption });
+        });
+      }
+      if (range && range.length > 0) {
+        return `${currentStatus.name}: ${range.join('~')}`;
+      }
+      return currentStatus.name;
     }
     return null;
   }, [status, statusData, locale]);

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

@@ -68,6 +68,9 @@ export const getStatusDuration = (status: UserMetadata['status']) => {
     case DurationEnum.ThisWeek:
       dateRange = [current, current.endOf('week')];
       break;
+    case DurationEnum.NoClear:
+      dateRange = [current, current];
+      break;
     default:
       break;
   }
@@ -84,6 +87,19 @@ export const isWithinTimeRange = (dateRange: [Date, Date]) => {
   return current.isAfter(dayjs(dateRange[0])) && current.isBefore(dayjs(dateRange[1]));
 };
 
+/**
+ * 判断状态持续时间是否为不可清除
+ * @param status
+ * @returns
+ */
+export const isNotClear = (status: UserMetadata['status']) => {
+  const { duration, dateRange } = status ?? {};
+  if (!duration || !dateRange) {
+    return false;
+  }
+  return duration === DurationEnum.NoClear || dayjs(dateRange?.[0]).isSame(dayjs(dateRange?.[1]));
+};
+
 /**
  * 获取当前时间距离结束时间还有多久
  */

package/src/UserCenter/libs/locales.ts

@@ -107,6 +107,7 @@ export const translations = {
       OffSick: '病假',
       WorkingRemotely: '远程工作',
       duration: {
+        NoClear: '不要清除',
         ThirtyMinutes: '30分钟',
         OneHour: '1小时',
         FourHours: '4小时',
@@ -133,6 +134,7 @@ export const translations = {
       quickSettings: '快捷设置',
       selectEndTime: '选择结束时间',
       pleaseSelectTime: '请选择时间',
+      invalidURL: '无效的 URL',
       timezonePhase: {
         dawn: '凌晨',
         morning: '上午',
@@ -249,6 +251,7 @@ export const translations = {
       OffSick: 'Off Sick',
       WorkingRemotely: 'Working Remotely',
       duration: {
+        NoClear: "Don't clear",
         ThirtyMinutes: '30 minutes',
         OneHour: '1 hour',
         FourHours: '4 hours',
@@ -276,6 +279,7 @@ export const translations = {
       pleaseSelectTime: 'Please select time',
       cleanStatus: 'Clean status',
       quickSettings: 'Quick Settings',
+      invalidURL: 'Invalid URL',
       timezonePhase: {
         dawn: 'AM',
         morning: 'AM',