@titaui/pc 1.7.100 → 1.8.2

package/src/components/form/form-fields/input-verification-code/index.scss

@@ -0,0 +1,108 @@
+.verification-code-input {
+  &-row{
+    display: flex;
+    align-items: center;
+    .verification-code-input__label{
+      margin-bottom: unset;
+    }
+    .verification-code-input__border{
+      margin-left: 16px;
+      flex: 1;
+    }
+  }
+  &__label {
+    height: 22px;
+    font-size: 14px;
+    margin-bottom: 5px;
+    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+    font-weight: 400;
+    line-height: 22px;
+
+    &-text {
+      color: #3f4755;
+    }
+
+    &-require {
+      color: red;
+    }
+  }
+
+  &__border {
+    padding: 6px 12px;
+    border-radius: 8px;
+    transition: all 0.2s;
+    border: 1px solid #e9ecf0;
+    box-sizing: border-box;
+    position: relative;
+
+    &--disabled {
+      background-color: #fafafa;
+      cursor: not-allowed;
+      input:disabled {
+        background-color: #fafafa;
+        cursor: not-allowed;
+        color: #3f475594;
+      }
+    }
+  }
+  &__border--error {
+    box-shadow: inset 0px 0px 4px 0px rgba(240, 94, 94, 0.3) ;
+    border: 1px solid #f05e5e ;
+  }
+  &__border--active {
+    box-shadow: inset 0px 0px 4px 0px rgba(40, 121, 255, 0.3) !important;
+    border: 1px solid #2879ff !important;
+  }
+
+  &__input {
+    display: inline-block;
+    padding: 0;
+    width: calc(100% - 102px);
+    font-size: 14px;
+    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+    font-weight: 400;
+    color: #3f4755;
+    height: 22px;
+    line-height: inherit;
+    border: none;
+    flex: 1;
+
+    &::-webkit-input-placeholder {
+      color: #bfc7d5;
+      font-weight: unset;
+    }
+    &::-moz-placeholder {
+      color: #bfc7d5;
+      font-weight: unset;
+    }
+    &:-moz-placeholder {
+      color: #bfc7d5;
+      font-weight: unset;
+    }
+    &:-ms-input-placeholder {
+      color: #bfc7d5;
+      font-weight: unset;
+    }
+  }
+  &__btn{
+    width: 100px;
+    height: 34px;
+    background: #D4E4FF;
+    border-radius: 0px 8px 8px 0px;
+    border-left: 1px solid #DFE3EA;
+    font-size: 14px;
+    font-weight: 400;
+    color: #2879FF;
+    cursor: pointer;
+    line-height: 34px;
+    text-align: center;
+    position: absolute;
+    top: 0px;
+    right: 0;
+    &--not{
+      font-weight: 400;
+      color: #A4ACB9;
+      background: #F7F8FA;
+    }
+  }
+}

package/src/components/form/form-fields/input-verification-code/index.tsx

@@ -0,0 +1,171 @@
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import ToolTip from '../../../tooltip/error-tip';
+import './index.scss';
+
+const preCls = 'verification-code-input';
+
+interface verify {
+  tip: string;
+  test: RegExp;
+}
+interface Props {
+  label: string;
+  verifies?: verify[];
+  placeholder?: string;
+  onChange?: Function;
+  value?: any;
+  require?: boolean;
+  type?: string;
+  name: string;
+  getContainer?: Function;
+  disabled?: boolean;
+  layout?: 'clomn'|'row';
+  btnClick?: Function;
+  className?: string;
+}
+interface Error {
+  name: string;
+  tip: string;
+}
+
+const OverlayInner = ({ hasError, hasActive, tip }) => {
+  if (hasActive) return <span style={{ 'color': '#3F4755' }}>{tip}</span>;
+  if (hasError) return <span style={{ 'color': '#F05E5E' }}>{tip}</span>;
+
+  return <span />;
+}
+
+export default forwardRef((props: Props, ref) => {
+  const {
+    label,
+    verifies,
+    placeholder,
+    onChange,
+    require,
+    type,
+    name,
+    disabled,
+    getContainer,
+    layout,
+    className="",
+    btnClick=()=>{},
+  } = props;
+
+  const inputRef = useRef<any>();
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [hasActive, setHasActive] = useState<boolean>(false);
+  const [btn_info, setBtn_info] = useState<any>('获取验证码')
+  const [btnCanClick, setBtnCanClick] = useState<any>(true)
+  const [tip, setTip] = useState<string>('');
+  const [value, setValue] = useState<string>(props.value || '');
+
+  useEffect(() => {
+    setValue(props.value);
+  }, [props.value])
+
+  const verifing = (): Error[] => {
+    const value = inputRef.current && inputRef.current.value;
+    if (!verifies || !verifies.length) return [];
+    if (!require && !value) return [];
+    const errors: Error[] = [];
+    for (let i = 0; i < verifies.length; i++) {
+      let { test, tip } = verifies[i];
+      if (!value.match(test)) {
+        errors.push({ name, tip });
+      }
+    }
+    return errors;
+  }
+
+  const onInputFocusHandler = () => {
+    setHasActive(true);
+    inputRef.current.setSelectionRange(9999999, 9999999);
+  }
+
+  const onBlurHandler = () => {
+    setHasActive(false);
+  }
+
+  const onChangeHandler = () => {
+    const value = inputRef.current && inputRef.current.value;
+    onChange && onChange(value);
+    setValue(value);
+    const errors = verifing();
+    if (errors.length) {
+      setHasError(true);
+      setTip(errors[0].tip);
+    } else {
+      setHasError(false);
+      setTip('');
+    }
+  }
+
+  const HandlerCode = () =>{
+    const errors = verifing();
+    if (errors.length) return
+    if(!btnCanClick || hasError) return
+    btnClick&&btnClick()
+    let time = 60
+    setBtn_info(`${time}s重新发送`)
+    setBtnCanClick(false)
+    let timer = setInterval(() => {
+      if (time === 0) {
+        clearInterval(timer)
+        setBtn_info('获取验证码')
+        setBtnCanClick(true)
+      } else {
+        setBtn_info(`${time}s重新发送`)
+        time--;
+      }
+    }, 1000);
+  }
+
+  useImperativeHandle(ref, () => ({
+    'verifing': (): Error[] => {
+      const errors = verifing();
+      if (errors.length) {
+        setHasError(true);
+        setTip(errors[0].tip);
+        inputRef.current.focus();
+      }
+      return errors;
+    }
+  }))
+
+  return <div className={classNames(preCls,{[`${preCls}-row`]:layout==='row'},className)}>
+    <div className={classNames(`${preCls}__label`)}>
+      <span className={classNames(`${preCls}__label-text`)}>{label}</span>
+      {require && <span className={classNames(`${preCls}__label-require`)}>*</span>}
+    </div>
+    <div className={classNames(`${preCls}__border`, {
+      [`${preCls}__border--error`]: hasError,
+      [`${preCls}__border--active`]: hasActive,
+      [`${preCls}__border--disabled`]: disabled
+    })}>
+      <ToolTip
+        placement={'topLeft'}
+        destroyTooltipOnHide={true}
+        visible={(hasActive || hasError) && tip}
+        overlay={<OverlayInner hasActive={hasActive} hasError={hasError} tip={tip} />}
+        getTooltipContainer={getContainer}
+      >
+        <input
+          ref={inputRef}
+          type={type}
+          disabled={disabled}
+          className={classNames(`${preCls}__input`)}
+          value={value}
+          placeholder={placeholder}
+          onFocus={onInputFocusHandler}
+          onBlur={onBlurHandler}
+          onChange={onChangeHandler}
+          autoComplete='off'
+        />
+      </ToolTip>
+      <div  className={classNames(`${preCls}__btn`,{[`${preCls}__btn--not`]:!btnCanClick})} onClick={HandlerCode}>
+        {btn_info}
+      </div>
+    </div>
+  </div>
+})

package/src/components/form/form-fields/password/index.scss

@@ -24,8 +24,8 @@
     box-sizing: border-box;
   }
   &__border--error {
-    box-shadow: inset 0px 0px 4px 0px rgba(240, 94, 94, 0.3) !important;
-    border: 1px solid #f05e5e !important;
+    box-shadow: inset 0px 0px 4px 0px rgba(240, 94, 94, 0.3) ;
+    border: 1px solid #f05e5e ;
   }
   &__border--active {
     box-shadow: inset 0px 0px 4px 0px rgba(40, 121, 255, 0.3);

package/src/components/form/form-fields/radios/index.tsx

@@ -50,10 +50,10 @@ export default forwardRef((props: Props, ref) => {
 
   return (
     <div className={`${prefixCls} ${className}`}>
-      <div className={`${prefixCls}__label`}>
+      {!!label&&<div className={`${prefixCls}__label`}>
         <span className={`${prefixCls}__label-text`}>{label}</span>
         {require && <span className={`${prefixCls}__label-symbol`}>*</span>}
-      </div>
+      </div>}
       <div className={`${prefixCls}__radios`}>
         {radios.map((radio) => (
           <div className={`${prefixCls}__radios-item ${radioClass}`}>

package/src/components/form/index.tsx

@@ -8,6 +8,7 @@ import _FormFieldTextarea from "./form-fields/textarea";
 import _FormFieldRadios from "./form-fields/radios";
 import _FormFieldDropDown from "./form-fields/dropdown";
 import _FormFieldGroup from "./form-fields/group";
+import _FormFieldVerificationCode from "./form-fields/input-verification-code"
 import { SingleLayout } from "./layout";
 import "./index.scss";
 
@@ -100,6 +101,7 @@ const FormFields = {
   Radios: _FormFieldRadios,
   DropDown:_FormFieldDropDown,
   GroupFields:_FormFieldGroup,
+  VerificationInput:_FormFieldVerificationCode,
 };
 //@ts-ignore
 Form.Fields = FormFields

package/src/components/grid-layout/near-visitors/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { CardTitle, Gap, CardContainer } from "../commen-components";
 import Visitor from "./visitor";
 import postComponentForData from "../util/network"
+import { getLocale } from "../../../utils/getLocale";
 
 import "./index.scss";
 
@@ -27,13 +28,13 @@ export default function VisitorsComponents() {
   return (
     <CardContainer styles={{ padding: '12px 16px' }}>
       <CardTitle
-        content='最近访客'
+        content={getLocale('HP_RecentVisitors')}
         iconUrl={require('../image/Recent-visitors.png')}
       />
       <Gap />
       {
         visitorList.length === 0
-          ? <div className="nearVisitors-Component-noOneText" >最近访问你的人</div>
+          ? <div className="nearVisitors-Component-noOneText" >{getLocale('HP_Peoplevisited')}</div>
           : <div className="nearVisitors-Component-visitor">
             {
               // 固定为最近访问的8个用户

package/src/components/grid-layout/okr-align/index.tsx

@@ -52,18 +52,18 @@ export default function OKRAlignComponent() {
   return (
     <CardContainer styles={{ padding: '20px 22px 0' }}>
       <CardTitle
-        content='OKR对齐'
+        content={getLocale('HP_OKRAlignment')}
         iconUrl={require('../image/align.png')}
-        tips='设置对齐目标，OKR 才能上下支撑'
+        tips={getLocale('HP_SetOKR')}
       />
       {
         isMyOKREmpty
           ? <EmptyBackGround
             imgSrc={require('../image/OKRalign-empty.png')}
-            content='对齐 Ta 人目标，支撑企业落地 OKR'
+            content={getLocale('HP_AligningOKR')}
             behave={{
               type: 'moreinfo',
-              text: '如何对齐目标',
+              text: getLocale('HP_Howaligninggoals'),
               link: 'https://club.tita.com/18179.html'
             }} />
           : <CardFlexContent>

package/src/components/grid-layout/okr-progress/index.tsx

@@ -57,9 +57,9 @@ export default function OKRProgressComponent() {
   return (
     <CardContainer styles={{ padding: '20px 22px 0' }}>
       <CardTitle
-        content="KR进展"
+        content={getLocale('HP_Executiotasks')}
         iconUrl={require('../image/Progress.png')}
-        tips="我负责的 OKR 下的 KR 更新进展统计"
+        tips={getLocale('HP_ProgressKROKR')}
       >
         {!isMyOKREmpty && (
           <a
@@ -73,10 +73,10 @@ export default function OKRProgressComponent() {
       {isMyOKREmpty ? (
         <EmptyBackGround
           imgSrc={require('../image/OKRprogress-empty.png')}
-          content="定期反馈工作进展，是一种良好的工作习惯"
+          content={getLocale('HP_Regulgoodwork')}
           behave={{
             type: 'moreinfo',
-            text: '了解如何更新进度',
+            text: getLocale('HP_Learnupdate'),
             link: 'https://club.tita.com/18179.html',
           }}
         />
@@ -91,13 +91,13 @@ export default function OKRProgressComponent() {
             num={hadUpdateOkrNum}
             updataNum={weekLatelyUpdatekrProgress}
             numColor="#3F4755"
-            label="已更新"
+            label={getLocale('HP_Updated')}
             handleDataClick={() => handleDataClick('hadUpdate')}
           />
           <DataItem
             num={hadNotUpdateOkrNum}
             numColor="#3F4755"
-            label="未更新"
+            label={getLocale('HP_Notupdated')}
             handleDataClick={() => handleDataClick('hadNotUpdate')}
           />
         </CardFlexContent>

package/src/components/grid-layout/okr-target/index.tsx

@@ -94,11 +94,11 @@ export default function OKRTargetComponent() {
 
   return (
     <CardContainer styles={{ padding: '20px 22px 0' }}>
-      <CardTitle content="OKR 目标" iconUrl={require('../image/targer.png')} />
+      <CardTitle content={getLocale('HP_OKR')} iconUrl={require('../image/targer.png')} />
       {isMyOKREmpty ? (
         <EmptyBackGround
           imgSrc={require('../image/OKRtarget-empty.png')}
-          content="高效工作从第一个OKR设定开始"
+          content={getLocale('HP_EffectiveOKRsetting')}
           behave={{
             type: 'button',
             text: getLocale('OKR_MyO_Collr_Butt_CreatOKR'),

package/src/components/grid-layout/over-view/index.tsx

@@ -78,7 +78,7 @@ export default function OverviewComponent() {
           <div className="OverviewComponent-dataContent">
             <DataItem num={allOkrCount} numColor="#3F4755" label={getLocale('Mod_Objective')} updataNum={allOkrInWeekCount} handleDataClick={handleTargetClick} />
             <DataItem num={allMyKrCount} numColor="#3F4755" label={getLocale('Mod_KeyResults')} updataNum={0} />
-            <DataItem num={allMyTaskCount} numColor="#3F4755" label='执行任务' updataNum={0} />
+            <DataItem num={allMyTaskCount} numColor="#3F4755" label={getLocale('HP_Executiotasks')} updataNum={0} />
           </div>
         </Fragment>
       </CardFlexContent>

package/src/components/grid-layout/personal-info/index.tsx

@@ -5,6 +5,7 @@ import postComponentForData from '../util/network';
 import Avatar from '../../avatar';
 import Tooltip from '../../tooltip';
 import { OpenUserName, OpenDepartmentName } from '../../../utils/open-data';
+import { getLocale } from '../../../utils/getLocale';
 
 import './index.scss';
 
@@ -145,10 +146,10 @@ export default function PersonalInfoComponent() {
       <div className="PersonalInfoComponent-PersonalInfo__fansinfo">
         <span className="PersonalInfoComponent-PersonalInfo__fansinfo__attention">
           <img src={require('../image/visit-icon.png')} /> <b>{fansNum}</b>
-          人关注
+          {getLocale('HP_peoplefollow')}
         </span>
         <span className="PersonalInfoComponent-PersonalInfo__fansinfo__like">
-          <img src={require('../image/liking.png')} /> <b>{likeNum}</b>次点赞
+          <img src={require('../image/liking.png')} /> <b>{likeNum}</b>{getLocale('HP_Kudos')}
         </span>
       </div>
       {scrollMessage.name && scrollMessage.name.length ? (
@@ -160,7 +161,7 @@ export default function PersonalInfoComponent() {
       ) : (
         //@ts-ignore
         <AvatarTips
-          content="🥰 小窗为您播报最新消息"
+          content={"🥰 "+getLocale('HP_Smallwindow')}
           styles={{ height: '28px', padding: '0 28px', lineHeight: '28px' }}
         />
       )}

package/src/components/grid-layout/sub-employee-okr/index.tsx

@@ -55,7 +55,7 @@ export default function SubOKRComponents() {
       )
     } else {
       return <EmptyBackGround
-        imgSrc={require('../image/sub-empty.png')} content='暂无人员数据'
+        imgSrc={require('../image/sub-empty.png')} content={getLocale('HP_Noavailable')}
         styles={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
       />
     }

package/src/components/grid-layout/week-task/index.tsx

@@ -53,15 +53,15 @@ export default function WeekTaskComponent() {
         isMyOKREmpty
           ? <EmptyBackGround
             imgSrc={require('../image/weektask-empty.png')}
-            content='对齐 Ta 人目标，撑企业落地 OKR'
+            content={getLocale('HP_AligningOKR')}
             behave={{
               type: 'button',
               text: getLocale('Pro_page_Mil_Butt_Createatask'),
               onClick: e => toWeekPlan()
             }} />
           : <CardFlexContent>
-            <DataItem num={unFinishTaskOnWeek} numColor="#2879FF" label='本周未完成' Qtips='本周截止但未完成的任务量' handleDataClick={() => toWeekPlan()} />
-            <DataItem num={finishTaskOnWeek} numColor="#5AD8A6" label='本周完成' handleDataClick={() => toWeekPlan()} />
+            <DataItem num={unFinishTaskOnWeek} numColor="#2879FF" label={getLocale('HP_Unfinishedweek')} Qtips={getLocale('HP_Thetasksweek')} handleDataClick={() => toWeekPlan()} />
+            <DataItem num={finishTaskOnWeek} numColor="#5AD8A6" label={getLocale('HP_Finishedweek')} handleDataClick={() => toWeekPlan()} />
             <DataItem num={dueTaskOnWeek} numColor="#F05E5E" label={getLocale('OKR_MyO_E_Overdue')} handleDataClick={() => toWeekPlan()} />
           </CardFlexContent>
       }

package/src/components/grid-layout/words-cloud/index.tsx

@@ -6,6 +6,7 @@ import postComponentForData from "../util/network"
 import lvMask from '../image/lv'
 import couldMask from '../image/could'
 import titaMask from '../image/tita-mask'
+import { getLocale } from "../../../utils/getLocale";
 
 const ComponentId = 'Enterprise-Focus-Hotspots'
 
@@ -35,9 +36,9 @@ export default function WordCloudComponent() {
   return (
     <CardContainer styles={{ padding: '20px 22px 0' }}>
       <CardTitle
-        content="企业关注热点"
+        content={getLocale('HP_Hotcompanies')}
         iconUrl={require('../image/Collaboration.png')}
-        tips="企业下产生最高频的关键词"
+        tips={getLocale('HP_Theenterprise')}
       >
         {wordsData.length === 0 && (
           <Advice
@@ -45,7 +46,7 @@ export default function WordCloudComponent() {
             link="https://wpa1.qq.com/o6X4XD1n?_type=wpa&qidian=true"
           >
             <img src={require('../image/advise.svg')} />
-            升级 Tita 正式版后可查看，立即咨询
+            {getLocale('HP_Upgradeview')}
           </Advice>
         )}
       </CardTitle>

package/src/components/grid-page/personal-info/index.tsx

@@ -5,6 +5,7 @@ import postComponentForData from '../util/network';
 import Avatar from '../../avatar';
 import Tooltip from '../../tooltip';
 import { OpenUserName, OpenDepartmentName } from '../../../utils/open-data';
+import { getLocale } from '../../../utils/getLocale';
 
 import './index.scss';
 
@@ -145,10 +146,10 @@ export default function PersonalInfoComponent() {
       <div className="PersonalInfoComponent-PersonalInfo__fansinfo">
         <span className="PersonalInfoComponent-PersonalInfo__fansinfo__attention">
           <img src={require('../image/visit-icon.png')} /> <b>{fansNum}</b>
-          人关注
+          {getLocale('HP_peoplefollow')}
         </span>
         <span className="PersonalInfoComponent-PersonalInfo__fansinfo__like">
-          <img src={require('../image/liking.png')} /> <b>{likeNum}</b>次点赞
+          <img src={require('../image/liking.png')} /> <b>{likeNum}</b>{getLocale('HP_Kudos')}
         </span>
       </div>
       {scrollMessage.name && scrollMessage.name.length ? (
@@ -160,7 +161,7 @@ export default function PersonalInfoComponent() {
       ) : (
         //@ts-ignore
         <AvatarTips
-          content="🥰 小窗为您播报最新消息"
+          content={"🥰 "+getLocale('HP_Smallwindow')}
           styles={{ height: '28px', padding: '0 28px', lineHeight: '28px' }}
         />
       )}

package/src/components/img-viewer/index.tsx

@@ -99,7 +99,7 @@ const ImgViewer: FC<IImgViewerProps> = forwardRef(
           <div className={prefix + "__header"}>
             <span className={prefix + "__header-file-name"}>
               <Tooltip.Text
-                text={currentImgData.fileName}
+                text={currentImgData && currentImgData.fileName || ''}
                 isPercent
                 minusWidth={60}
               />

package/src/components/mblog/style.ts

@@ -21,8 +21,8 @@ export const MBlogBox = styled.div`
 // MblogContent
 export const DivMblogContent = styled.div`
   padding: 8px 10px 6px;
-  border: 1px solid #E9ECF0;
-  border-radius: 4px;
+  border: 1px solid #DFE3EA;
+  border-radius: 8px;
   background-color: #fff;
   position: relative;
   transition: all .2s ease-in-out;
@@ -81,7 +81,7 @@ export const Tips = styled.div`
 // MblogAction
 export const MblogActionWrapper = styled.div`
   height: 30px;
-  padding: 9px 0 8px 0;
+  padding: 28px 0 2px 0;
   font-size: 13px;
   line-height: 20px;
   color: #565E66;
@@ -169,7 +169,7 @@ export const RightBtnGroupWrapper = styled.div`
     min-width: 90px;
     height: 32px;
     box-sizing: border-box;
-    border-radius: 4px;
+    border-radius: 18px;
     border: none;
   }
 `
@@ -219,7 +219,7 @@ export const BtnConfirm = styled.button`
   color: #ffffff;
   background: #2879FF;
   white-space: nowrap;
-  border-radius: 4px;
+  border-radius: 18px;
 
   &.disabled {
     color: #ffffff;

package/src/components/nav-top/components/user-message/components/empty/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import empty from '../../images/empty-img.svg';
 import ConditionRender from '../../../../../condition-render';
+import { getLocale } from '../../../../../../utils/getLocale';
 import './index.scss';
 
 const preCls = 'titaui-user-message-msg-empty';
@@ -12,10 +13,10 @@ const Empty = (props) => {
 	return (
 		<div className={classNames(`${preCls}__empty`)}>
 			<img src={empty} />
-			<div className={classNames(`${preCls}__empty-text`)}>暂时没有需要处理的消息哦～</div>
+			<div className={classNames(`${preCls}__empty-text`)}>{getLocale('Menu_Title_NoNews')}</div>
 			<ConditionRender condition={tabPath !== null}>
 				<a target="_blank" href={tabPath} className={classNames(`${preCls}__empty-all`)}>
-					查看全部消息
+					{getLocale('Menu_Title_ViewNews')}
 				</a>
 			</ConditionRender>
 		</div>

package/src/components/nav-top/components/user-message/msg/index.tsx

@@ -73,7 +73,7 @@ const UserMessage = (props) => {
             tab={
               <TabTitle
                 data={(getData("messageIndicator"))-(getData("mLeaveandComment"))}
-                title="通知"
+                title={getLocale('Menu_Title_Notice')}
                 tab={"informs"}
               />
             }

package/src/components/okr-detail/base-info/base-info.tsx

@@ -58,10 +58,8 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
 
   const { okrInfo, setOkrInfo } = useContext(CommonContext);
 
-  const [originalDesc, setOriginalDesc] = useState(
-    decodeURI(encodeURI(okrInfo.description)) || ""
-  );
-  // const [desc, setDesc] = useState(decodeURI(encodeURI(okrInfo.description)));
+  const originDesc = decodeURI(encodeURI(okrInfo.description)) === 'null' ? '' : decodeURI(encodeURI(okrInfo.description));
+  const [originalDesc, setOriginalDesc] = useState(originDesc || "");
   const [participant, setParticipant] = useState<IUser[]>([]);
   const [followers, setFollowers] = useState<IUser[]>([]);
   const [canEditAllInfo, setCanEditAllInfo] = useState(