feat(company): enhance expiry warning with rich i18n and day ranges

Add red rich-text style to useRichI18n. Update CompanyExpireWarning to
show info/warning/error states based on remaining days and render rich
formatted countdown text.

src/components/CompanyExpireWarning/index.tsx

@@ -2,21 +2,23 @@ import { ClockCircleOutlined } from '@ant-design/icons';
 import { useBreakpoint } from '@ant-design/pro-components';
 import { history as umiHistory, useAccess } from '@umijs/max';
 import { Alert, Popover, Space } from 'antd';
+import useRichI18n from '@/hooks/useRichI18n';
 import useUserInfo from '@/hooks/useUserInfo';
 import { $t } from '@/utils/i18n';
 import { utcInstance as dayjs } from '@/utils/timeFormat';
 
 const CompanyExpireWarning: React.FC = () => {
+  const { richFormat } = useRichI18n();
   const { isGlobalCompany } = useAccess();
   const { userInfo } = useUserInfo();
   const screens = useBreakpoint();
   const { validityEndTime, validityStatus } = userInfo?.company || {};
-  if (isGlobalCompany) {
+  if (isGlobalCompany || !validityEndTime) {
     return null;
   }
 
   const expireInDays = dayjs(`${validityEndTime}T23:59:59`).diff(
-    dayjs().utc(),
+    dayjs.utc(),
     'day',
   );
 
@@ -25,11 +27,15 @@ const CompanyExpireWarning: React.FC = () => {
       message={
         validityStatus === 2
           ? $t('pages.company.expireTitle')
-          : expireInDays <= 0
+          : expireInDays >= 30
-            ? $t('pages.company.expireToday')
+            ? `${$t('pages.company.expireInfo')}${validityEndTime} (UTC+0)`
-            : `${$t('pages.company.expireInDays', { days: Math.abs(expireInDays) })}`
+            : richFormat('pages.company.expireInDays', {
+                days: Math.abs(expireInDays + 1),
+              })
+      }
+      type={
+        validityStatus === 2 ? 'error' : expireInDays >= 30 ? 'info' : 'warning'
       }
-      type={validityStatus === 2 ? 'error' : 'warning'}
       showIcon
     />
   );

src/hooks/useRichI18n.tsx

@@ -39,6 +39,12 @@ const richTextMap: Record<string, RichTextInfo> = {
       color: '#818cf8',
     },
   },
+  red: {
+    tag: 'b',
+    style: {
+      color: '#f56565',
+    },
+  },
 };
 const mapKeys = Object.keys(richTextMap);
 const collection = {} as Record<string, (chunks: Node) => Node>;