refactor: 同一个格式化日期

react-ui/src/components/DateTableCell/index.tsx

@@ -4,6 +4,7 @@
  * @Description: 自定义 Table 日期类单元格
  */
 
+import { formatDate } from '@/utils/date';
 import dayjs from 'dayjs';
 
 function DateTableCell(text?: string | null) {
@@ -13,7 +14,7 @@ function DateTableCell(text?: string | null) {
   if (!dayjs(text).isValid()) {
     return <span>无效的日期</span>;
   }
-  return <span>{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}</span>;
+  return <span>{formatDate(text)}</span>;
 }
 
 export default DateTableCell;

react-ui/src/pages/Dataset/intro.jsx

@@ -6,12 +6,12 @@ import {
   getDatasetVersionIdList,
   getDatasetVersionsById,
 } from '@/services/dataset/index.js';
+import { formatDate } from '@/utils/date';
 import { downLoadZip } from '@/utils/downloadfile';
 import { openAntdModal } from '@/utils/modal';
 import { modalConfirm } from '@/utils/ui';
 import { useParams, useSearchParams } from '@umijs/max';
 import { Button, Input, Select, Table, Tabs, message } from 'antd';
-import moment from 'moment';
 import { useEffect, useRef, useState } from 'react';
 import AddVersionModal from './components/AddVersionModal';
 import Styles from './intro.less';
@@ -146,7 +146,7 @@ const Dataset = () => {
       title: '更新时间',
       dataIndex: 'update_time',
       key: 'update_time',
-      render: (text) => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
+      render: (text) => <span>{formatDate(text)}</span>,
     },
     {
       title: '操作',

react-ui/src/pages/Experiment/experimentText/index.jsx

@@ -1,11 +1,10 @@
 import { useVisible } from '@/hooks';
 import { getExperimentIns } from '@/services/experiment/index.js';
 import { getWorkflowById } from '@/services/pipeline/index.js';
-import { elapsedTime } from '@/utils/date';
+import { elapsedTime, formatDate } from '@/utils/date';
 import { useEmotionCss } from '@ant-design/use-emotion-css';
 import G6 from '@antv/g6';
 import { Button } from 'antd';
-import momnet from 'moment';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { s8 } from '../../../utils';
@@ -389,9 +388,7 @@ function ExperimentText() {
     <div className={pipelineContainer}>
       <div className={styles.centerContainer}>
         <div className={styles.buttonList}>
-          <div className={styles.allMessageItem}>
-            启动时间：{momnet(message.create_time).format('YYYY-MM-DD HH:mm:ss')}
-          </div>
+          <div className={styles.allMessageItem}>启动时间：{formatDate(message.create_time)}</div>
           <div className={styles.allMessageItem}>
             执行时长：
             {message.finish_time

react-ui/src/pages/Experiment/experimentText/props.jsx

@@ -1,5 +1,5 @@
 import { getNodeResult, getQueryByExperimentLog } from '@/services/experiment/index.js';
-import { elapsedTime } from '@/utils/date';
+import { elapsedTime, formatDate } from '@/utils/date';
 import { downLoadZip } from '@/utils/downloadfile';
 import { DatabaseOutlined, ProfileOutlined } from '@ant-design/icons';
 import { Drawer, Form, Input, Tabs, message } from 'antd';
@@ -419,7 +419,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
           </span>
         </div>
         <div className={Styles.detailBox}>
-          启动时间：{moment(stagingItem.experimentStartTime).format('YYYY-MM-DD HH:mm:ss')}
+          启动时间：{formatDate(stagingItem.experimentStartTime)}
         </div>
         <div className={Styles.detailBox}>
           耗时：

react-ui/src/pages/Experiment/index.jsx

@@ -14,12 +14,11 @@ import {
 } from '@/services/experiment/index.js';
 import { getWorkflow } from '@/services/pipeline/index.js';
 import themes from '@/styles/theme.less';
-import { elapsedTime } from '@/utils/date';
+import { elapsedTime, formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
 import { modalConfirm } from '@/utils/ui';
 import { Button, ConfigProvider, Space, Table, message } from 'antd';
 import classNames from 'classnames';
-import momnet from 'moment';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import AddExperimentModal from './components/AddExperimentModal';
@@ -442,9 +441,7 @@ function Experiment() {
                               ? elapsedTime(new Date(item.create_time), new Date(item.finish_time))
                               : elapsedTime(new Date(item.create_time), new Date())}
                           </div>
-                          <div style={{ width: '50%' }}>
-                            {momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')}
-                          </div>
+                          <div style={{ width: '50%' }}>{formatDate(item.create_time)}</div>
                         </div>
                         <div className={Styles.statusBox}>
                           <img

react-ui/src/pages/Mirror/info.tsx

@@ -16,6 +16,7 @@ import {
   getMirrorVersionListReq,
 } from '@/services/mirror';
 import themes from '@/styles/theme.less';
+import { formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
 import { mirrorNameKey, setSessionStorageItem } from '@/utils/sessionStorage';
 import { modalConfirm } from '@/utils/ui';
@@ -32,7 +33,6 @@ import {
   type TableProps,
 } from 'antd';
 import classNames from 'classnames';
-import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import MirrorStatusCell from './components/MirrorStatusCell';
 import styles from './info.less';
@@ -83,8 +83,7 @@ function MirrorInfo() {
     const [res] = await to(getMirrorInfoReq(id));
     if (res && res.data) {
       const { name = '', description = '', version_count = '', create_time: time } = res.data;
-      let create_time =
-        time && dayjs(time).isValid() ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '--';
+      const create_time = formatDate(time);
       setMirrorInfo({
         name,
         description,

react-ui/src/pages/Model/intro.jsx

@@ -7,12 +7,12 @@ import {
   getModelVersionIdList,
   getModelVersionsById,
 } from '@/services/dataset/index.js';
+import { formatDate } from '@/utils/date';
 import { downLoadZip } from '@/utils/downloadfile';
 import { openAntdModal } from '@/utils/modal';
 import { modalConfirm } from '@/utils/ui';
 import { useParams, useSearchParams } from '@umijs/max';
 import { Button, Input, Select, Table, Tabs, message } from 'antd';
-import moment from 'moment';
 import { useEffect, useRef, useState } from 'react';
 import Styles from './intro.less';
 const { Search } = Input;
@@ -144,7 +144,7 @@ const Dataset = () => {
       title: '更新时间',
       dataIndex: 'update_time',
       key: 'update_time',
-      render: (text) => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
+      render: (text) => <span>{formatDate(text)}</span>,
     },
     {
       title: '操作',

react-ui/src/pages/ModelDeployment/info.tsx

@@ -7,10 +7,10 @@ import KFIcon from '@/components/KFIcon';
 import PageTitle from '@/components/PageTitle';
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { getMirrorInfoReq } from '@/services/mirror';
+import { formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
 import { useNavigate, useParams } from '@umijs/max';
 import { Col, Row, Tabs, type TabsProps } from 'antd';
-import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import styles from './info.less';
 
@@ -65,8 +65,7 @@ function ModelDeploymentInfo() {
     const [res] = await to(getMirrorInfoReq(id));
     if (res && res.data) {
       const { name = '', description = '', version_count = '', create_time: time } = res.data;
-      let create_time =
-        time && dayjs(time).isValid() ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '--';
+      const create_time = formatDate(time);
       setMirrorInfo({
         name,
         description,

react-ui/src/pages/Pipeline/index.jsx

@@ -1,3 +1,4 @@
+import DateTableCell from '@/components/DateTableCell';
 import KFIcon from '@/components/KFIcon';
 import KFModal from '@/components/KFModal';
 import {
@@ -12,7 +13,6 @@ import themes from '@/styles/theme.less';
 import { modalConfirm } from '@/utils/ui';
 import { Button, ConfigProvider, Form, Input, Space, Table, message } from 'antd';
 import classNames from 'classnames';
-import momnet from 'moment';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Styles from './index.less';
@@ -138,13 +138,13 @@ const Pipeline = () => {
       title: '创建时间',
       dataIndex: 'create_time',
       key: 'create_time',
-      render: (text) => <span>{momnet(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
+      render: DateTableCell,
     },
     {
       title: '修改时间',
       dataIndex: 'update_time',
       key: 'update_time',
-      render: (text) => <span>{momnet(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
+      render: DateTableCell,
     },
     {
       title: '操作',

react-ui/src/utils/date.ts

@@ -1,4 +1,12 @@
 import dayjs from 'dayjs';
+
+/**
+ * Calculates the elapsed time between two dates and returns a formatted string representing the duration.
+ *
+ * @param {Date} beginDate - The starting date.
+ * @param {Date} endDate - The ending date.
+ * @return {string} The formatted elapsed time string.
+ */
 export const elapsedTime = (beginDate: Date, endDate: Date): string => {
   if (!isValidDate(beginDate) || !isValidDate(endDate)) {
     return '--';
@@ -29,7 +37,12 @@ export const elapsedTime = (beginDate: Date, endDate: Date): string => {
   return `${minutes}分${seconds}秒`;
 };
 
-// 是否是有效的日期
+/**
+ * 是否是有效的日期
+ *
+ * @param {Date} date - The date to check.
+ * @return {boolean} True if the date is valid, false otherwise.
+ */
 export const isValidDate = (date: Date): boolean => {
   if (date instanceof Date) {
     return !Number.isNaN(date.getTime()); // valueOf() 也可以
@@ -37,14 +50,38 @@ export const isValidDate = (date: Date): boolean => {
   return false;
 };
 
-// 格式化日期
-export const formatDate = (text: Date | string, format = 'YYYY-MM-DD HH:mm:ss'): string => {
-  if (text === undefined || text === null || text === '') {
+/**
+ * 能否使用 dayjs 转换成 Date
+ *
+ * @param {Date | string | number | null | undefined} date - The date to be checked.
+ * @return {boolean} Returns true if the date can be converted to a valid Date object, otherwise returns false.
+ */
+export const canBeConvertToDate = (date?: Date | string | number | null): boolean => {
+  if (date === undefined || date === null || date === '') {
+    return false;
+  }
+  const convertedDate = dayjs(date);
+  return convertedDate.isValid();
+};
+
+/**
+ * 转换日期
+ *
+ * @param {Date | string | number | null | undefined} date - The date to format.
+ * @param {string} [format='YYYY-MM-DD HH:mm:ss'] - The format string to use.
+ * @return {string} The formatted date string.
+ */
+export const formatDate = (
+  date?: Date | string | number | null,
+  format: string = 'YYYY-MM-DD HH:mm:ss',
+): string => {
+  if (date === undefined || date === null || date === '') {
     return '--';
   }
-  if (!dayjs(text).isValid()) {
+  const convertedDate = dayjs(date);
+  if (!convertedDate.isValid()) {
     return '--';
   }
 
-  return dayjs(text).format(format);
+  return convertedDate.format(format);
 };