@titaui/pc 1.8.61 → 1.9.0

package/src/components/okr-period-selector/select-cycle.tsx

@@ -5,6 +5,7 @@ import Popup from "../popup";
 import RangePickerPop from "../range-picker-pop";
 import "./index.scss";
 import { getApiUrl, taker } from "../period-selector/helper";
+import { getLocale } from "../../utils/getLocale";
 
 export interface SelectCycleData {
   cycleType: string;
@@ -22,7 +23,7 @@ interface Props {
   canEdit?: boolean;
   getCycleRange?: boolean;
   popupAlign?: any;
-  className?:string
+  className?: string;
 }
 
 function _formatCycleData(periodParams, getCycleRange) {
@@ -58,9 +59,8 @@ export function CreateCycle({
   },
 }: Props): ReactElement {
   const popRef = useRef();
-  const btnRef = useRef<HTMLButtonElement>() as React.RefObject<
-    HTMLButtonElement
-  >;
+  const btnRef =
+    useRef<HTMLButtonElement>() as React.RefObject<HTMLButtonElement>;
   const [selfCycle, setSelfCycle] = useState(cycle || {});
   const [cycleSetting, setCycleSetting] = useState<any>();
 
@@ -100,10 +100,10 @@ export function CreateCycle({
   };
 
   const handleVisibleChange = (visible) => {
-    if(visible){
+    if (visible) {
       setSelfCycle(cycle);
     }
-  }
+  };
 
   let popup = <div />;
   if (cycleSetting) {
@@ -145,7 +145,7 @@ export function CreateCycle({
             className="okr-detail-date-cycle__date-line"
             style={{ borderBottom: "1px solid #F0F2F5" }}
           >
-            开始日期：
+            {getLocale('Mod_StartDate')}：
             <RangePickerPop
               format="YYYY/MM/DD"
               controlled
@@ -164,7 +164,7 @@ export function CreateCycle({
           </div>
 
           <div className="okr-detail-date-cycle__date-line">
-            结束日期：
+            {getLocale('Mod_EndDate')}：
             <RangePickerPop
               format="YYYY/MM/DD"
               controlled
@@ -188,11 +188,11 @@ export function CreateCycle({
               style={{ marginRight: 12 }}
               onClick={onCancelClickHandler}
             >
-              取消
+              {getLocale("Mod_Cancel")}
             </Button>
 
             <Button size="s" type="primary" onClick={onSureClickHandler}>
-              确定
+              {getLocale("OKR_MyO_Butt_Determine")}
             </Button>
           </div>
         </div>
@@ -218,11 +218,11 @@ export function CreateCycle({
         >
           {renderInnerContent({
             btnRef,
-            clickCallback: ()=>{},
+            clickCallback: () => {},
             text: _formatCycleData(cycle, getCycleRange),
           })}
         </PeriodSelector>
-      )
+      );
     }
   }
 

package/src/components/okr-progress/components/kr-progress/index.tsx

@@ -5,6 +5,7 @@ import TooltipText from '../../../tooltip/tooltip-text';
 import drawerManager from '../../../drawer-manager';
 import { IKrProgressProps } from '../../interface';
 import './index.scss';
+import { getLocale } from '../../../../utils/getLocale';
 
 const renderTitle = (index, title, id) => {
   const handleTitleClick = () => {
@@ -21,7 +22,7 @@ const renderTitle = (index, title, id) => {
 const KrProgress: FC<IKrProgressProps> = ({data}) => {
   return (
     <div className='kr-progress__container'>
-      <Title title='KR的进展'/>
+      <Title title={getLocale('OKR_MyO_Prog_Butt_KRprogress')}/>
       <div className={`kr-progress__content-wrapper`}>
         {
           data && data.map((item, index) => {

package/src/components/okr-progress/components/o-progress/index.tsx

@@ -14,6 +14,7 @@ import { getToNowTime } from '../../util';
 import EmptyPng from '../../img/schedule-empty.png';
 import { OAuth, hasSuperior } from '../../../../utils/auth';
 import { IOProgressProps } from '../../interface';
+import { getLocale } from '../../../../utils/getLocale';
 import './index.scss';
 
 const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, hasOtherProgress, getOProgressData}) => {
@@ -47,7 +48,7 @@ const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, h
   const handleModalOkClick = () => {
     updateProgressDesc(editOProgressId, okrInfo.workId, editOProgressContent ? editOProgressContent : '').then(resp => {
       if (resp.Code === 1) {
-        Toast.Success('操作成功', {canClose: false});
+        Toast.Success(getLocale('Mod_Successfuloperat'), {canClose: false});
         setEditOProgressVisiable(false);
         getOProgressData();
       } else {
@@ -67,7 +68,7 @@ const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, h
   const renderContent = ({onOpenModal}) => {
     return (
       <span className='o-progress__func-btn o-progress__func-btn--update' onClick={onOpenModal}>
-        <i className='tu-icon-gengxin o-progress__func-btn-icon'/>更新完成度
+        <i className='tu-icon-gengxin o-progress__func-btn-icon'/>{getLocale('OKR_MyO_Prog_Butt_Update')}
       </span>
     )
   }
@@ -76,7 +77,7 @@ const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, h
     // @ts-ignore
     remindAction({toUserId: BSGlobal.loginUserInfo.Id, work_id: okrInfo.workId, type: 2}).then(resp => {
       if (resp.Code === 1) {
-        Toast.Success('提醒成功', {canClose: false});
+        Toast.Success(getLocale('OKR_MyO_Prog_Remindersu'), {canClose: false});
       } else {
         Toast.Error(resp.Message, {canClose: false});
       }
@@ -94,7 +95,7 @@ const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, h
       // @ts-ignore 提醒上级查看
       remindAction({toUserId: BSGlobal.loginUserInfo.Id, work_id: okrInfo.workId}).then(resp => {
         if (resp.Code === 1) {
-          Toast.Success('提醒成功', {canClose: false});
+          Toast.Success(getLocale('OKR_MyO_Prog_Remindersu'), {canClose: false});
         } else {
           Toast.Error(resp.Message, {canClose: false});
         }
@@ -137,18 +138,18 @@ const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, h
     return (
       <DialogConfirm visible={showRemindDialogConfirm} type="warning">
         {/* @ts-ignore */}
-        <span type="title">确定提醒 Ta 吗？</span>
+        <span type="title">{getLocale('OKR_DR_Pop_Areyousure')}</span>
         {/* @ts-ignore */}
-        <span type="content">系统将会发送通知提醒Ta去更新OKR进展</span>
-        <CancelButton type="button" onClick={handleCancelRemind}>取消</CancelButton>
-        <SureButton type="button" onClick={handleEnsureRemind}>确定</SureButton>
+        <span type="content">{getLocale('OKR_DR_Pop_ThesystemOKR')}</span>
+        <CancelButton type="button" onClick={handleCancelRemind}>{getLocale('Mod_Cancel')}</CancelButton>
+        <SureButton type="button" onClick={handleEnsureRemind}>{getLocale('OKR_MyO_Butt_Determine')}</SureButton>
       </DialogConfirm>
     )
   }, [showRemindDialogConfirm, handleCancelRemind, handleEnsureRemind])
 
   const renderEmptyCmp = useMemo(() => {
     const renderUpdateBtn = ({onOpenModal}) => {
-      return <button className={`o-progress__empty-button ${isPrincipalUser ? '' : 'o-progress__empty-button--not-principaluser'}`} onClick={onOpenModal}>更新完成度</button>
+      return <button className={`o-progress__empty-button ${isPrincipalUser ? '' : 'o-progress__empty-button--not-principaluser'}`} onClick={onOpenModal}>{getLocale('OKR_MyO_Prog_Butt_Update')}</button>
     }
     return (
       <div className={classNames({
@@ -157,13 +158,13 @@ const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, h
       })}>
         <img width={128} src={EmptyPng} />
         <span className='o-progress__empty-text'>
-          {isPrincipalUser ? '目标进展一目了然？赶快更新完成度吧' : '暂无目标进展'}
+          {isPrincipalUser ? getLocale('OKR_MyO_KRP_tochecko') : getLocale('OKR_MyO_Pr_Text_Nooprogress')}
         </span>
         {isPrincipalUser && <OProgressUpdate okrInfo={okrInfo} renderContent={renderUpdateBtn} setUpdateData={setUpdateProgress}/>}
-        {!isCanEditProgress && <button className={'o-progress__empty-button'} onClick={handleRemindClick}>提醒更新进展</button>}
+        {!isCanEditProgress && <button className={'o-progress__empty-button'} onClick={handleRemindClick}>{getLocale('OKR_MyO_Pr_Butt_Reminder')}</button>}
         {isCanEditProgress && !isPrincipalUser && 
         <div>
-          <button className={'o-progress__empty-button'} onClick={handleRemindClick}>提醒更新进展</button>
+          <button className={'o-progress__empty-button'} onClick={handleRemindClick}>{getLocale('OKR_MyO_Pr_Butt_Reminder')}</button>
           <OProgressUpdate okrInfo={okrInfo} renderContent={renderUpdateBtn} setUpdateData={setUpdateProgress}/>
         </div>}
       </div>
@@ -171,7 +172,7 @@ const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, h
   }, [hasOtherProgress])
 
   const renderDefaultRemindCmp = useMemo(() => {
-    const text = isPrincipalUser ? (hasSuperior() ? '提醒上级查看' : null) : '提醒更新进展';
+    const text = isPrincipalUser ? (hasSuperior() ? getLocale('OKR_MyO_Prog_Butt_Remind') : null) : getLocale('OKR_MyO_Pr_Butt_Reminder');
     return (
       <span className='o-progress__func-btn' onClick={handleRemindClick}>
         {text && <i className='tu-icon-shoushi o-progress__func-btn-icon' />}
@@ -184,7 +185,7 @@ const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, h
     <div className={'o-progress__wrapper'}>
       {oProgressData.length === 0 ? renderEmptyCmp : (
         <div className='o-progress__header'>
-          <Title title='目标的进展'/>
+          <Title title={getLocale('OKR_MyO_Prog_Objectiveprogress')}/>
           <div className='o-progress__func-btns'>
             {okrInfo.status === 2 ? null : renderDefaultRemindCmp}
             {isCanEditProgress ? 
@@ -219,7 +220,7 @@ const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, h
       {isMoreThanOneProgress ? 
         <div className='o-progress__shrink'>
           <span className='o-progress__shrink-text' onClick={handleChangeShowAll}>
-            {isShowAll ? '收起进展' : '查看全部进展'}
+            {isShowAll ? getLocale('OKR_MyO_Prog_Butt_Fold') : getLocale('OKR_MyO_Pr_Butt_Viewall')}
             <i className={isShowAll ? 'tu-icon-arrow-up' : 'tu-icon-arrow-down'}/>
           </span>
         </div>
@@ -236,7 +237,7 @@ const OProgress: FC<IOProgressProps> = ({listData, okrInfo, setUpdateProgress, h
       >
         <div className={`o-progress__textarea-wrapper ${hasError ? 'o-progress__textarea-wrapper--error' : ''}`}>
           <textarea 
-            placeholder='请输入进展' 
+            placeholder={getLocale('OKR_MyO_Pop_Upd_Pleprogress')}
             className={'o-progress__textarea'} 
             value={editOProgressContent} 
             onChange={handleTextareaChange} />

package/src/components/okr-progress/components/o-progress-update/index.tsx

@@ -3,9 +3,10 @@ import Toast from "../../../toast";
 import ProgressModal from '../../../okr-progress-modal'
 import { updateProgress } from "../../request-apis";
 import { IOProgressUpdateProps } from "../../interface";
+import { getLocale } from '../../../../utils/getLocale';
 
 const OProgressUpdate = (props: IOProgressUpdateProps) => {
-  const { okrInfo, renderContent, setUpdateData, title = "更新目标完成度" } = props;
+  const { okrInfo, renderContent, setUpdateData, title = getLocale('OKR_MyO_Pop_Upd_Upd') } = props;
   const [visible, setVisible] = useState(false);
 
   const cancelHandler = () => setVisible(false);
@@ -16,7 +17,7 @@ const OProgressUpdate = (props: IOProgressUpdateProps) => {
       ...params,
     });
     if (data.Code == 1) {
-      Toast.Success("更新成功");
+      Toast.Success(getLocale('Per_Ma_form_Updatesuc'));
       setVisible(false)
     } else {
       Toast.Error(data.Message);

package/src/components/okr-progress/request-apis.ts

@@ -1,4 +1,5 @@
 import qs from 'qs';
+import { getLocale } from '../../utils/getLocale';
 import { rget, rpost } from "../../utils/request"
 
 export const getRelProgress = (workId: number) => {
@@ -35,7 +36,7 @@ export const getOkrDetail = ({ okrId }) => {
   return rget('v1')(`okr/detailInfo?okrId=${okrId}`)
     .then(headInfo => {
       if (headInfo.Code != 1) {
-        throw headInfo.Message.replace(/项目/g, '目标')
+        throw headInfo.Message.replace(/项目/g, getLocale('Mod_Objective'))
       }
       return headInfo.Data
     })

package/src/components/okr-progress/util.ts

@@ -1,3 +1,4 @@
+import { getLocale } from '../../utils/getLocale';
 // @ts-nocheck
 export const isPrincipal = (principalUser) => {
   return window.BSGlobal["loginUserInfo"].Id === principalUser.userId;
@@ -11,5 +12,5 @@ export const getToNowTime = (time) => {
   if (diffSecond < 60 * 60 * 24 * 7) {
     return '';
   }
-  return `距上次更新${Math.floor(diffSecond / 60 / 60 / 24)}天`
+  return `${getLocale('OKR_MyO_Pr_Butt_Lastupd')}${Math.floor(diffSecond / 60 / 60 / 24)}${getLocale('OKR_MyO_Pr_Butt_dayago')}`
 }

package/src/components/okr-progress-detail/index.tsx

@@ -1,18 +1,19 @@
-import React, { FC, useMemo, useCallback, useState } from 'react';
+import React, { FC, useMemo, useCallback, useState } from "react";
 // @ts-ignore
-import LeftQuotoSvg from './img/progress-left-quoto.svg';
+import LeftQuotoSvg from "./img/progress-left-quoto.svg";
 // @ts-ignore
-import RightQuotoSvg from './img/progress-right-quoto.svg';
+import RightQuotoSvg from "./img/progress-right-quoto.svg";
 // @ts-ignore
-import DelaySvg from './img/progress-delay.svg';
+import DelaySvg from "./img/progress-delay.svg";
 // @ts-ignore
-import NormalSvg from './img/progress-normal.svg';
+import NormalSvg from "./img/progress-normal.svg";
 // @ts-ignore
-import RiskSvg from './img/progress-risk.svg';
+import RiskSvg from "./img/progress-risk.svg";
 // @ts-ignore
-import EndSvg from './img/progress-end.svg';
-import './index.scss';
-import { getProgressState, getTimeString } from './utils';
+import EndSvg from "./img/progress-end.svg";
+import { getProgressState, getTimeString } from "./utils";
+import { getLocale } from "../../utils/getLocale";
+import "./index.scss";
 
 interface IDetailProps {
   riskLevel: string;
@@ -35,96 +36,150 @@ const StateIconMapping = {
   delay: DelaySvg,
   normal: NormalSvg,
   risk: RiskSvg,
-  end: EndSvg
-}
+  end: EndSvg,
+};
 
-const $prefix = 'okr-progress-item';
+const $prefix = "okr-progress-item";
 
-const Detail: FC<IDetailProps> = ({ id, riskLevel, oStatus = 1, title, percent, oldPercent, content, time, canEdit = false, onEditProgress, onDeleteProgress, rightTip, showPercent = true, canDel = false }) => {
-  
+const Detail: FC<IDetailProps> = ({
+  id,
+  riskLevel,
+  oStatus = 1,
+  title,
+  percent,
+  oldPercent = 0,
+  content,
+  time,
+  canEdit = false,
+  onEditProgress,
+  onDeleteProgress,
+  rightTip,
+  showPercent = true,
+  canDel = false,
+}) => {
   const [isMouseEnterDetail, setIsMouseEnterDetail] = useState(false);
   const nowTime = useMemo(() => {
     return new Date();
-  }, [])
+  }, []);
 
   const renderPercentDiffer = useMemo(() => {
     const progressIsAdvance = percent > oldPercent;
     return (
       <span>
-        {percent === oldPercent ? null : 
-          <span className={`${$prefix}__percent-differ-icon ${progressIsAdvance ? `${$prefix}__percent--advance` : `${$prefix}__percent--delay`}`}>
-            {progressIsAdvance ? <i className='tu-icon-simple-sort-up' /> : <i className='tu-icon-simple-sort-down'/>}{Math.abs(percent - oldPercent)}%
+        {percent === oldPercent ? null : (
+          <span
+            className={`${$prefix}__percent-differ-icon ${
+              progressIsAdvance
+                ? `${$prefix}__percent--advance`
+                : `${$prefix}__percent--delay`
+            }`}
+          >
+            {progressIsAdvance ? (
+              <i className="tu-icon-simple-sort-up" />
+            ) : (
+              <i className="tu-icon-simple-sort-down" />
+            )}
+            {Math.abs(percent - oldPercent)}%
           </span>
-        }
+        )}
       </span>
-    )
-  }, [percent, oldPercent])
+    );
+  }, [percent, oldPercent]);
 
   const handleEditProgress = useCallback(() => {
-    onEditProgress && onEditProgress(id, content)
-  }, [onEditProgress])
+    onEditProgress && onEditProgress(id, content);
+  }, [onEditProgress]);
 
   const handleDeleteProgress = useCallback(() => {
-    onDeleteProgress && onDeleteProgress(id)
-  }, [onDeleteProgress])
+    onDeleteProgress && onDeleteProgress(id);
+  }, [onDeleteProgress]);
 
   const handleMouseEnterDetail = useCallback(() => {
-    setIsMouseEnterDetail(true)
-  }, [])
+    setIsMouseEnterDetail(true);
+  }, []);
 
   const handleMouseLeaveDetail = useCallback(() => {
-    setIsMouseEnterDetail(false)
-  }, [])
+    setIsMouseEnterDetail(false);
+  }, []);
 
   return (
     <div className={`${$prefix}-wrapper`}>
       <div>
         <div className={`${$prefix}-content__header`}>
-          <img className={`${$prefix}-content__icon-state`} src={StateIconMapping[getProgressState(oStatus, riskLevel)]}/>
+          <img
+            className={`${$prefix}-content__icon-state`}
+            src={StateIconMapping[getProgressState(oStatus, riskLevel)]}
+          />
           <span>{title}</span>
-          {showPercent ? <span className={`${$prefix}__percent`}>
-            {percent}% 
-            {renderPercentDiffer}
-          </span> : null}
+          {showPercent ? (
+            <span className={`${$prefix}__percent`}>
+              {percent}%{renderPercentDiffer}
+            </span>
+          ) : null}
           <span className={`${$prefix}__right-tip`}>{rightTip}</span>
         </div>
         <div className={`${$prefix}-content__body-wrapper`}>
-          <div 
-            className={`${$prefix}-content__body ${canEdit ? `${$prefix}-content--edit` : ''}`}
+          <div
+            className={`${$prefix}-content__body ${
+              canEdit ? `${$prefix}-content--edit` : ""
+            }`}
             onMouseEnter={handleMouseEnterDetail}
             onMouseLeave={handleMouseLeaveDetail}
           >
             <div className={`${$prefix}-content__body-top`}>
-              {content && content.trim() ? <img className={`${$prefix}-content__icon-left-quoto`} src={LeftQuotoSvg}/> : null}
+              {content && content.trim() ? (
+                <img
+                  className={`${$prefix}-content__icon-left-quoto`}
+                  src={LeftQuotoSvg}
+                />
+              ) : null}
               <span className={`${$prefix}__content`}>
                 {content && content.trim()}
               </span>
             </div>
             <div className={`${$prefix}__content-bottom`}>
-              <span>
-                {getTimeString(time, nowTime)}
-              </span>
-              {canEdit && isMouseEnterDetail ? 
-              <span className={`${$prefix}__bottom-func-btns`}>
-                <span className={`${$prefix}__bottom-btn--edit`} onClick={handleEditProgress}>
-                  <i className={`tu-icon-bianji3 ${$prefix}__bottom-btn-icon`}/>编辑
-                </span>
-                {canEdit && canDel && <span className={`${$prefix}__bottom-divider`}></span>}
-                {canDel && (
-                  <span className={`${$prefix}__bottom-btn--delete`} onClick={handleDeleteProgress}>
-                    <i className={`tu-icon-shanchu ${$prefix}__bottom-btn-icon`}/>删除
+              <span>{getTimeString(time, nowTime)}</span>
+              {canEdit && isMouseEnterDetail ? (
+                <span className={`${$prefix}__bottom-func-btns`}>
+                  <span
+                    className={`${$prefix}__bottom-btn--edit`}
+                    onClick={handleEditProgress}
+                  >
+                    <i
+                      className={`tu-icon-bianji3 ${$prefix}__bottom-btn-icon`}
+                    />
+                    {getLocale("Mod_Editor")}
                   </span>
-                )}
-              </span> : null}
+                  {canEdit && canDel && (
+                    <span className={`${$prefix}__bottom-divider`}></span>
+                  )}
+                  {canDel && (
+                    <span
+                      className={`${$prefix}__bottom-btn--delete`}
+                      onClick={handleDeleteProgress}
+                    >
+                      <i
+                        className={`tu-icon-shanchu ${$prefix}__bottom-btn-icon`}
+                      />
+                      {getLocale("Mod_Delete")}
+                    </span>
+                  )}
+                </span>
+              ) : null}
             </div>
           </div>
           <div className={`${$prefix}-content__right-block`}>
-            {content && content.trim() ? <img className={`${$prefix}-content__icon-right-quoto`} src={RightQuotoSvg} /> : null}
+            {content && content.trim() ? (
+              <img
+                className={`${$prefix}-content__icon-right-quoto`}
+                src={RightQuotoSvg}
+              />
+            ) : null}
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Detail;
+export default Detail;

package/src/components/okr-progress-detail/utils.ts

@@ -1,8 +1,9 @@
+import { getLocale } from "../../utils/getLocale";
 import { OkrRiskMapping } from "./constant";
 
 export const getTimeString = (time: string, nowTime): string => {
   if (!time) {
-    return '暂未更新';
+    return getLocale('OKR_MyO_KRP_Notupdated');
   }
   const timeDateObj = new Date(time);
   const timeMilliSecond = timeDateObj.getTime();
@@ -18,7 +19,7 @@ export const getTimeString = (time: string, nowTime): string => {
   
   const secondDiff = Math.floor((nowMilliSecond - timeMilliSecond) / 1000);
   if (secondDiff <= 3) {
-    return '刚刚';
+    return getLocale('Pro_page_Int_Justnow');
   }
   if (secondDiff < 60) {
     return `${secondDiff}秒前`;
@@ -30,7 +31,7 @@ export const getTimeString = (time: string, nowTime): string => {
     return `${Math.floor(secondDiff / (60 * 60))}小时前`;
   }
   if (secondDiff < 60 * 60 * 24 * 2 && nowDate - 1 === timeDate) {
-    return `昨天 ${timeHours + ':' + timeMinutes}`;
+    return `${getLocale('OKR_MyO_Pr_Text_Yesterday')} ${timeHours + ':' + timeMinutes}`;
   }
   if (secondDiff < 60 * 60 * 24 * 3 && nowDate - 2 === timeDate) {
     return `前天 ${timeHours + ':' + timeMinutes}`;