@titaui/pc 1.8.5 → 1.8.6

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

@@ -7,6 +7,7 @@ import Inform from "../components/inform";
 import Remind from "../components/remind";
 import TabTitle from "../components/tab-title";
 import { getMessages } from "../../../request.apis";
+import { getLocale } from "../../../../../utils/getLocale";
 import "./index.scss";
 
 const prefixCls = "titaui-user-message-msg";
@@ -60,7 +61,7 @@ const UserMessage = (props) => {
             tab={
               <TabTitle
                 data={getData("todoIndicator")}
-                title="待办"
+                title={getLocale('Top_Message_title_Todos')}
                 tab={"todos"}
               />
             }
@@ -72,7 +73,7 @@ const UserMessage = (props) => {
             tab={
               <TabTitle
                 data={(getData("messageIndicator"))-(getData("mLeaveandComment"))}
-                title="通知"
+                title={getLocale('Menu_Title_Notice')}
                 tab={"informs"}
               />
             }
@@ -84,7 +85,7 @@ const UserMessage = (props) => {
             tab={
               <TabTitle
                 data={getData("mLeaveandComment")}
-                title="@与回复"
+                title={getLocale('Top_Message_title_@&Replies')}
                 tab={"replys"}
               />
             }
@@ -93,7 +94,7 @@ const UserMessage = (props) => {
             <Reply onItemClick={onItemClick} handleIntervalRequestMessageInfo={handleIntervalRequestMessageInfo}/>
           </TabPane>
           <TabPane
-            tab={<TabTitle data={remindTotal} title="提醒" tab={"reminds"} />}
+            tab={<TabTitle data={remindTotal} title={getLocale('Top_Message_title_AlarmReminders')} tab={"reminds"} />}
             key="reminds"
           >
             <Remind onItemClick={onItemClick} handleIntervalRequestMessageInfo={handleIntervalRequestMessageInfo} handleIgnoreTask={handleIgnoreTask}/>

package/src/components/nav-top/components/user-message/utils.ts

@@ -1,3 +1,5 @@
+import { getLocale } from "../../../../utils/getLocale";
+
 export const htmlToText = (text) => {
 	let div = document.createElement('div');
 	div.innerHTML = text;
@@ -8,7 +10,7 @@ export const deleteText = (text) => {
 	const last = text.trim().slice(-4);
   if (last === '查看任务') {
     text = text.trim().slice(0, -4);
-  } else if (last === '查看详情') {
+  } else if (last === getLocale('Mod_Checkdetails')) {
     text = text.trim().slice(0, -4);
   } else if (last === '进入日报') {
     text = text.trim().slice(0, -4);

package/src/components/nav-top/components/user-own-menu/components/own-menu/index.scss

@@ -5,6 +5,7 @@
   box-shadow: 0px 4px 24px 0px rgba(127, 145, 180, 0.2);
   border-radius: 16px;
   padding: 16px 26px 16px 12px;
+  user-select: none;
   &__card {
     &-items {
       margin-bottom: 5px;
@@ -20,7 +21,7 @@
         left: 8px;
         display: inline-block;
         content: "";
-        width: 100px;
+        width: 100%;
         height: 1px;
         background: linear-gradient(
           297deg,
@@ -53,9 +54,28 @@
         font-weight: 400;
         color: #3f4755;
         line-height: 22px;
+        min-width: 110px;
+        display: inline-block;
         &:hover {
           color: #2879ff;
         }
+        &-suffix {
+          font-size: 14px;
+          color: #3F4755;
+          line-height: 22px;
+          display: inline-flex;
+          align-items: center;
+          &-lang {
+            &--selected {
+              color: #2879FF;
+            }
+          }
+          &-icon {
+            display: inline-block;
+            transform: rotate(90deg);
+            margin: 0 10px;
+          }
+        }
       }
     }
   }

package/src/components/nav-top/components/user-own-menu/components/own-menu/index.tsx

@@ -1,12 +1,31 @@
 import React, { useState } from "react";
 import classNames from "classnames";
 import { getOwnSet } from "../../utils";
+import ConditionRender from "../../../../../condition-render";
+import { changeLang } from "../../../../request.apis";
+import { getBSGlobal } from "../../../../../../utils/bs-global";
+import Toast from "../../../../../toast";
 import "./index.scss";
 
 const preCls = "titaui-nav-top-user-own-menu";
 
 const User = () => {
   const [ownSet] = useState(getOwnSet());
+  const lang =
+    (getBSGlobal("I18NInfo") && getBSGlobal("I18NInfo").I18NUserLang) ||
+    "zh_CN";
+
+  const handleChangeLang = () => {
+    const replaceLang = lang === "zh_CN" ? "en_US" : "zh_CN";
+    changeLang(replaceLang).then((resp) => {
+      if (resp.Code === 1 && resp.Data === true) {
+        window.location.reload();
+      } else {
+        Toast.Error("切换语言失败，请稍后重试", { canClose: false });
+      }
+    });
+  };
+
   return (
     <div className={classNames(`${preCls}`)}>
       <ul className={classNames(`${preCls}__card`)}>
@@ -15,11 +34,53 @@ const User = () => {
             {items.map((item) => (
               <li className={classNames(`${preCls}__card-item`)} key={item.id}>
                 <i
-                  className={classNames(`${preCls}__card-item-img`,item.url)}
+                  className={classNames(`${preCls}__card-item-img`, item.icon)}
                 />
-                <a href={item.objUrl} className={classNames(`${preCls}__card-item-title`)}>
+                <ConditionRender condition={!!item.objUrl}>
+                  <a
+                    href={item.objUrl}
+                    className={classNames(`${preCls}__card-item-title`)}
+                  >
                     {item.title}
-                </a>
+                  </a>
+                </ConditionRender>
+                <ConditionRender condition={!item.objUrl}>
+                  <span onClick={handleChangeLang}>
+                    <a
+                      className={classNames(`${preCls}__card-item-title`)}
+                    >
+                      {item.title}
+                    </a>
+                    <span
+                      className={classNames(
+                        `${preCls}__card-item-title-suffix`
+                      )}
+                    >
+                      <span
+                        className={classNames({
+                          [`${preCls}__card-item-title-suffix-lang--selected`]:
+                            lang === "zh_CN",
+                        })}
+                      >
+                        中
+                      </span>
+                      <i
+                        className={classNames(
+                          "tu-icon-shangxia",
+                          `${preCls}__card-item-title-suffix-icon`
+                        )}
+                      />
+                      <span
+                        className={classNames({
+                          [`${preCls}__card-item-title-suffix-lang--selected`]:
+                            lang === "en_US",
+                        })}
+                      >
+                        EN
+                      </span>
+                    </span>
+                  </span>
+                </ConditionRender>
               </li>
             ))}
           </div>

package/src/components/nav-top/components/user-own-menu/utils.ts

@@ -1,63 +1,88 @@
+import { getLocale } from "../../../../utils/getLocale";
 import { getUserInfo, getBSGlobal } from "../../../../utils/bs-global";
 import { IOwnSetType } from "../../interface";
 
 const userId = getUserInfo().Id;
 const apiServer = getBSGlobal("apiPath");
+const i18nInfo = getBSGlobal('I18NInfo');
 const tm = getBSGlobal("tm");
 
 const isTestCompanyManageRule = /gift/g.test(apiServer);
 
-export const getOwnSet = () => {
-  const ownhandle = [
-    {
-      id: "ownHome",
-      url: "tu-icon-myhome",
-      title: "个人信息",
-      objUrl: `${apiServer}/u/${userId}/Home/#user-info`,
-    },
-    {
-      id: "ownSet",
-      url: "tu-icon-APP-shezhi",
-      title: "个人设置",
-      objUrl: `${apiServer}/u/${userId}/Home/#setting`,
-    },
-  ];
+const getOwnhandle = () => [
+  {
+    id: "ownHome",
+    icon: "tu-icon-myhome",
+    title: getLocale('Per_Menu_Perinfo'),
+    objUrl: `${apiServer}/u/${userId}/Home/#user-info`,
+    otherInfo: {}
+  },
+  {
+    id: "ownSet",
+    icon: "tu-icon-APP-shezhi",
+    title: getLocale('Per_Menu_MySettings'),
+    objUrl: `${apiServer}/u/${userId}/Home/#setting`,
+    otherInfo: {}
+  },
+];
+
+const getExit = () => [
+  {
+    id: "Logout",
+    icon: "tu-icon-tuichu",
+    title: getLocale('Per_Menu_Logout'),
+    objUrl: `${apiServer}/Account/Logout`,
+    otherInfo: {}
+  },
+];
+
+const getLimit = () => [
+  {
+    id: "manage",
+    icon: "tu-icon-myqyht",
+    title: getLocale('Per_Menu_Admin'),
+    objUrl: `${tm}`,
+    otherInfo: {}
+  },
+  {
+    id: "open",
+    icon: "tu-icon-my-gjgn",
+    title: getLocale('Per_Menu_AdvancedFeatures'),
+    objUrl: `${tm}${tm.indexOf(`${userId}/TmHome`) != -1 ?'':`/${userId}/TmHome`}#?iTalentFrameType=iframe&iTalentFrame=${tm.indexOf(`${userId}/TmHome`) != -1 ?`${tm.replace(`/TmHome`,'')}`:`${tm}/${userId}`}/indexV2#/advancedSettings`,
+    otherInfo: {}
+  },
+  {
+    id: "role",
+    icon: "tu-icon-gongsi",
+    title: getLocale('Per_Menu_ManRegu'),
+    objUrl: `${apiServer}/u/${userId}/Home#/enterprise/manage?reactRouterName=okr`,
+    otherInfo: {}
+  },
+]
 
-  const limit = [
-    {
-      id: "manage",
-      url: "tu-icon-myqyht",
-      title: "企业管理后台",
-      objUrl: `${tm}`,
-    },
-    {
-      id: "open",
-      url: "tu-icon-my-gjgn",
-      title: "开启高级设置",
-      objUrl: `${tm}${tm.indexOf(`${userId}/TmHome`) != -1 ?'':`/${userId}/TmHome`}#?iTalentFrameType=iframe&iTalentFrame=${tm.indexOf(`${userId}/TmHome`) != -1 ?`${tm.replace(`/TmHome`,'')}`:`${tm}/${userId}`}/indexV2#/advancedSettings`,
-    },
-    {
-      id: "role",
-      url: "tu-icon-gongsi",
-      title: "企业管理规定",
-      objUrl: `${apiServer}/u/${userId}/Home#/enterprise/manage?reactRouterName=okr`,
-    },
-  ];
+const getLang = () => [
+  {
+    id: "i18n",
+    icon: "tu-icon-yuyan",
+    title: getLocale('Per_Menu_language'),
+    objUrl: ``,
+    otherInfo: {
+      lang: i18nInfo.I18NUserLang,
+    }
+  },
+]
 
-  const exit = [
-    {
-      id: "Logout",
-      url: "tu-icon-tuichu",
-      title: "退出登录",
-      objUrl: `${apiServer}/Account/Logout`,
-    },
-  ];
+export const getOwnSet = () => {
+  
   let newOwnSet: IOwnSetType[] = [];
-  newOwnSet.push(ownhandle);
+  newOwnSet.push(getOwnhandle());
   const role = getUserInfo().Role;
   if (role === 2 || role === 4) {
-    newOwnSet.push(limit);
+    newOwnSet.push(getLimit());
+  }
+  if (i18nInfo && i18nInfo.I18NOpen === 'true') {
+    newOwnSet.push(getLang())
   }
-  newOwnSet.push(exit);
+  newOwnSet.push(getExit());
   return newOwnSet;
 };

package/src/components/nav-top/components/version/index.tsx

@@ -3,6 +3,7 @@ import { getBSGlobal } from "../../../../utils/bs-global";
 import VersionChangeModal from "../../../version-change-modal";
 import { Versions } from "../../../version-change-modal/constant";
 import { versionTextMap } from "../../constant";
+import { getLocale } from "../../../../utils/getLocale";
 import "./index.scss";
 
 const prefix = "titaui-nav-top-version";
@@ -23,7 +24,7 @@ const Version: FC = () => {
         onClick={handleShowVersionSelector}
       >
         <span className={`${prefix}__version-info-name`}>{versionTextMap[versionInfo.MenuVersion || Versions.Flagship]}</span>
-        <span className={`${prefix}__version-info-countdown`}>剩余{versionInfo.Day}天</span>
+        <span className={`${prefix}__version-info-countdown`}>{getLocale('OKR_MyO_E_Remaining')}{versionInfo.Day}天</span>
       </div>
       <VersionChangeModal
         ref={versionChangeModalRef}

package/src/components/nav-top/interface.ts

@@ -5,9 +5,10 @@ export interface IMenuProps {
 
 export interface IOwnSetItemType {
   id: string;
-  url: any;
+  icon: any;
   title: string;
   objUrl: string;
+  otherInfo: Object;
 }
 
 export type IOwnSetType = IOwnSetItemType[];

package/src/components/nav-top/request.apis.ts

@@ -64,3 +64,7 @@ export const getMessages = () => {
     })
     .then((data) => data);
 };
+
+export const changeLang = (lang) => {
+  return rget('v1')(`multiLange/change?lang=${lang}`)
+}

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

@@ -29,6 +29,7 @@ import DialogConfirm, {
 } from "../../dialog-confirm";
 import { GeneralDataContext, CommonContext } from "../context";
 import { OAuth } from "../../../utils/auth";
+import { getLocale } from "../../../utils/getLocale";
 
 interface IUser {
   name: string;
@@ -57,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(
@@ -93,7 +92,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
       if (desc.trim().length > 5000) return;
       saveODesc(okrInfo.workId, desc).then((resp) => {
         if (resp.Code === 1) {
-          Toast.Success("操作成功", { canClose: false });
+          Toast.Success(getLocale('Mod_Successfuloperat'), { canClose: false });
           setOkrInfo({ ...okrInfo, description: desc });
         } else {
           Toast.Error("操作失败", { canClose: false });
@@ -107,7 +106,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
     (user) => {
       transferPrincipal(okrInfo.workId, user.email, user.id).then((resp) => {
         if (resp.Code === 1) {
-          Toast.Success("操作成功", { canClose: false });
+          Toast.Success(getLocale('Mod_Successfuloperat'), { canClose: false });
           let tempParticipant = [...participant];
           // 当前登录的是有权限的人，将负责人转为参与人或者关注人中的一个
           const isParticipantIndex = findUserIndex(tempParticipant, user.id);
@@ -145,7 +144,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
   const handleChangeClassify = useCallback((classify) => {
     updateOClassify(classify, okrInfo.workId).then((resp) => {
       if (resp.Code === 1) {
-        Toast.Success("操作成功", { canClose: false });
+        Toast.Success(getLocale('Mod_Successfuloperat'), { canClose: false });
         setGeneralOkrClassify(classify);
       } else {
         Toast.Error(resp.Message, { canClose: false });
@@ -171,7 +170,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
         areaGroupIds
       ).then((resp) => {
         if (resp.Code === 1) {
-          Toast.Success("操作成功", { canClose: false });
+          Toast.Success(getLocale('Mod_Successfuloperat'), { canClose: false });
           setGeneralVisibility({
             visibility: visiableValue,
             visibilityScope: data,
@@ -288,7 +287,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
     deleteUser(delUser.id, okrInfo.workId, delUserType === 1 ? 2 : 3)
       .then((resp) => {
         if (resp.Code === 1) {
-          Toast.Success("删除成功", { canClose: false });
+          Toast.Success(getLocale('Pro_detail_Deletsuccess'), { canClose: false });
           setGeneralRoleType(delUser.id === loginUser.Id ? 0 : generalRoleType);
           if (delUserType === 1) {
             participant.splice(userIndex, 1);
@@ -372,13 +371,13 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
       <DialogConfirm visible={showDialogConfirm} type="warning">
         {/* @ts-ignore */}
         <span type="title">
-          确定删除此{delUserType === 1 ? "参与" : "关注"}人吗？
+          确定删除此{delUserType === 1 ? "参与" : getLocale('OKR_MyO_Butt_Follow')}人吗？
         </span>
         <CancelButton type="button" onClick={cancelDelPerson}>
-          取消
+          {getLocale('Mod_Cancel')}
         </CancelButton>
         <WarningButton type="button" onClick={ensureDelPerson}>
-          删除
+          {getLocale('Mod_Delete')}
         </WarningButton>
       </DialogConfirm>
     );
@@ -419,7 +418,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
           !canEditAllInfo &&
           participant.length === 0 ? null : (
             <>
-              <span className="base-info__person-block-title">参与人</span>
+              <span className="base-info__person-block-title">{getLocale('Mod_Participants')}</span>
               <Person
                 users={participant}
                 canEdit={canEditPerson}
@@ -435,7 +434,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
           setting.TargetFollowers &&
           followers.length === 0 ? null : (
             <>
-              <span className="base-info__person-block-title">关注人</span>
+              <span className="base-info__person-block-title">{getLocale('Mod_Followers')}</span>
               <Person
                 type="followers"
                 users={followers}

package/src/components/okr-detail/base-info/o-desc/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useState, useRef, useCallback } from "react";
-import { useEffect } from "react";
+import React, { FC, useState, useEffect, useRef, useCallback } from "react";
+import { getLocale } from "../../../../utils/getLocale";
 import "./index.scss";
 
 interface IODescProps {
@@ -21,7 +21,6 @@ const ODesc: FC<IODescProps> = ({
   const [hasError, setHasError] = useState(false);
   const [isShowMore, setIsShowMore] = useState(false);
   const [desc, setDesc] = useState(originalDesc);
-  // const [originalDesc,setOriginalDesc] = useState(decodeURI(encodeURI(data.description))||'')
   const [showMoreBtn, setShowMoreBtn] = useState(false);
   const textareaRef = useRef(document.createElement("textarea"));
   const textRef = useRef(document.createElement("div"));
@@ -69,12 +68,6 @@ const ODesc: FC<IODescProps> = ({
     [originalDesc, desc, onChangeDesc, hasError]
   );
 
-  // const handleEnsureDesc = useCallback((e) => {
-  //   setIsFocus(false);
-  //   setIsAddDesc(false)
-  //   onChangeDesc && onChangeDesc();
-  // }, [onChangeDesc]);
-
   useEffect(() => {
     if (isFocus) {
       setShowMoreBtn(false);
@@ -109,7 +102,7 @@ const ODesc: FC<IODescProps> = ({
     <>
       {canEdit || desc ? (
         <div className="base-info-o-desc-wrapper">
-          <div className="o-desc__title">目标描述</div>
+          <div className="o-desc__title">{getLocale('OKR_MyO_Es_Targetdescri')}</div>
           {!isAddDesc ? (
             <div
               className={`o-desc__text-area-box 
@@ -127,7 +120,7 @@ const ODesc: FC<IODescProps> = ({
                 ref={textRef}
               >
                 {!desc ? (
-                  <span className="o-desc__add-desc">添加目标描述</span>
+                  <span className="o-desc__add-desc">{getLocale('OKR_MyO_Es_AddOdescription')}</span>
                 ) : (
                   desc
                 )}
@@ -143,7 +136,7 @@ const ODesc: FC<IODescProps> = ({
             >
               {isShowMore ? (
                 <span className="o-desc__show-more--up">
-                  收起
+                  {getLocale('Mod_Fold')}
                   <span className="o-desc-arrow-icon tu-icon-arrow-up"></span>
                 </span>
               ) : (
@@ -163,7 +156,7 @@ const ODesc: FC<IODescProps> = ({
               value={desc}
               onChange={handleTextareaChange}
               onFocus={handleODescWrapperFocus}
-              placeholder={"添加目标描述"}
+              placeholder={getLocale('OKR_MyO_Es_AddOdescription')}
             ></textarea>
           )}
           {isFocus && canEdit ? (
@@ -174,13 +167,13 @@ const ODesc: FC<IODescProps> = ({
                   className="o-desc__btn o-desc__btn--cancel"
                   onClick={handleCancelInputDesc}
                 >
-                  取消
+                  {getLocale('Mod_Cancel')}
                 </div>
                 <div
                   className="o-desc__btn o-desc__btn--ensure"
                   onClick={handleEnsureDesc}
                 >
-                  确定
+                  {getLocale('OKR_MyO_Butt_Determine')}
                 </div>
               </div>
             </div>

package/src/components/okr-detail/base-info/other-infos/classify/index.tsx

@@ -2,12 +2,13 @@ import React, { FC, useCallback } from "react";
 import SelectLayer from '../../../../select-layer';
 import PromiseSvg from '../../img/promise.svg';
 import DesireSvg from '../../img/desire.svg';
+import { getLocale } from "../../../../../utils/getLocale";
 
 import './index.scss';
 
-const okrClassifyList = [
-  { label: '承诺型', value: 1 },
-  { label: '愿景型', value: 2 }
+const getOkrClassifyList = () => [
+  { label: getLocale('OKR_MyO_Es_Commitment'), value: 1 },
+  { label: getLocale('OKR_MyO_Es_Visiontype'), value: 2 }
 ]
 
 interface IClassifyProps {
@@ -30,16 +31,16 @@ const Classify: FC<IClassifyProps> = ({ initValue, onChangeClassify, canEdit = f
   return (
     <div className='base-info-other-infos__classify'>
       <div className="base-info-other-infos__classify-title">
-        类别
+        {getLocale('OKR_MyO_Es_Category')}
       </div>
       <div>
         <SelectLayer
           canEdit={canEdit}
           renderSuffixIconClass='base-info-other-infos__classify-icon'
           renderSuffixIcon={IconMap}
-          items={okrClassifyList}
+          items={getOkrClassifyList()}
           initValue={initValue}
-          initText='暂无'
+          initText={getLocale('OKR_MyO_E_Temporarilynone')}
           onChangeSelect={handleSelectOkrClassify}
         />
       </div>

package/src/components/okr-detail/base-info/other-infos/date-cycle/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useState, useCallback } from 'react';
 import OkrPeriodSelector from '../../../../okr-period-selector';
 import { SelectCycleData } from '../../../../okr-period-selector/select-cycle';
+import { getLocale } from '../../../../../utils/getLocale';
 import './index.scss';
 
 interface IDateCycleProps {
@@ -29,7 +30,7 @@ const DateCycle: FC<IDateCycleProps> = ({cycle, setCycle, okrId, canEdit = false
 
   return (
     <div className='base-info-cycle-wrapper'>
-      <div className='base-info-cycle-title'>周期</div>
+      <div className='base-info-cycle-title'>{getLocale('Mod_period')}</div>
       <OkrPeriodSelector renderInnerContent={renderClickArea} cycle={cycle} setCycle={setCycle} okrId={okrId} canEdit={canEdit} getCycleRange={true}/>
     </div>
   )

package/src/components/okr-detail/base-info/other-infos/okr-type/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useState, useCallback, useContext } from "react";
 import { OpenDepartmentName } from "../../../../../utils/open-data";
 import BaseOkrType from "../../../components/base-okr-type";
+import { getLocale } from "../../../../../utils/getLocale";
 import { GeneralDataContext } from "../../../context";
 
 import "./index.scss";
@@ -23,13 +24,13 @@ const OkrType: FC<IOkrTypeProps> = ({ okrId, canEdit = false }) => {
   const [isFocus, setIsFocus] = useState(false);
 
   const okrTypeMap = {
-    1: { icon: "tu-icon-liebiao-geren", text: "个人" }, // 个人
+    1: { icon: "tu-icon-liebiao-geren", text: getLocale('OKR_MyO_Pop_Individual') }, // 个人
     2: {
       icon: "tu-icon-liebiao-xiashu",
       text: departmentId == -1 ? '默认部门' : <OpenDepartmentName id={departmentId} name={departmentName} />,
     }, // 部门
-    3: { icon: "tu-icon-gong_si", text: "公司" }, // 公司
-    4: { icon: "tu-icon-liebiao-tuandui", text: groupName || "团队" }, // 团队
+    3: { icon: "tu-icon-gong_si", text: getLocale('OKR_MyO_Pop_Company') }, // 公司
+    4: { icon: "tu-icon-liebiao-tuandui", text: groupName || getLocale('OKR_MyO_Text_Team') }, // 团队
   };
 
   const handleButtonFocus = useCallback(() => {
@@ -59,7 +60,7 @@ const OkrType: FC<IOkrTypeProps> = ({ okrId, canEdit = false }) => {
 
   return (
     <div className="base-info-type-wrapper">
-      <div className="base-info-type-title">类型</div>
+      <div className="base-info-type-title">{getLocale('Mod_Type')}</div>
       {canEdit ? (
         <BaseOkrType
           renderInnerContent={renderInnerContent}

package/src/components/okr-detail/base-info/other-infos/principal/index.tsx

@@ -5,6 +5,7 @@ import Avatar from '../../../../avatar';
 import BorderWrapper from '../common/border-wrapper';
 import UserSelector from "../../../../user-selector/index";
 import PopConfirm from '../../../../../components-v1/popConfirm';
+import { getLocale } from "../../../../../utils/getLocale";
 import './index.scss';
 
 interface IPrincipalProps {
@@ -48,7 +49,7 @@ const Principal: FC<IPrincipalProps> = ({user, onChangeUser, canEdit = false}) =
 
   return (
     <div className="base-info-other-infos__principal">
-      <div className="base-info-other-infos__principal-title">负责人</div>
+      <div className="base-info-other-infos__principal-title">{getLocale('Mod_Owner')}</div>
       <div
         className="base-info-other-infos__principal-user"
         ref={selectUserRef}