@titaui/pc 1.8.4 → 1.8.8

package/src/components/okrcase-library/okrcases-components/caseLibray-header.tsx

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import React, { useRef } from "react";
+import { getLocale } from "../../../utils/getLocale";
 
 interface Props {
   onClose?: Function;
@@ -6,41 +7,46 @@ interface Props {
 }
 
 const CaseLibraryHeader = (props: Props) => {
-  const { onClose, handleSearch } = props
+  const { onClose, handleSearch } = props;
 
-  const searchRef = useRef<any>()
+  const searchRef = useRef<any>();
 
   const onhandleEnter = (e) => {
     if (e.keyCode === 13) {
-      handleSearch(searchRef.current.value)
+      handleSearch(searchRef.current.value);
     }
-  }
+  };
 
   return (
     <div className="okr-cases-library__header">
-
       {/* <div className="okr-cases-library__header-mask" /> */}
       <div className="okr-cases-library__header-light" />
 
       <div className="okr-cases-library__header__search">
         <input
           className="okr-cases-library__header__search__input"
-          placeholder="搜索发现更多行业案例"
+          placeholder={getLocale("OKR_OKRex_Search")}
           ref={searchRef}
-          onKeyDown={e => onhandleEnter(e)}
+          onKeyDown={(e) => onhandleEnter(e)}
         />
-        <div className="okr-cases-library__header__search__btn"
+        <div
+          className="okr-cases-library__header__search__btn"
           onClick={() => handleSearch(searchRef.current.value)}
         >
-          <span className='tu-icon-search' /> 搜索
+          <span className="tu-icon-search" />
+          {getLocale("Mod_Search")}
         </div>
       </div>
-      {onClose && <div className="okr-cases-library__header__closeBtn" onClick={() => onClose()}>
-        <div className="tu-icon-canceled" />
-      </div>}
+      {onClose && (
+        <div
+          className="okr-cases-library__header__closeBtn"
+          onClick={() => onClose()}
+        >
+          <div className="tu-icon-canceled" />
+        </div>
+      )}
     </div>
-  )
-}
-
+  );
+};
 
-export default CaseLibraryHeader
+export default CaseLibraryHeader;

package/src/components/okrcase-library/okrcases-components/submitOkr-dialog.tsx

@@ -4,6 +4,7 @@ import Toast from '../../toast';
 import { Modal } from 'tita-ui';
 import Dialog from '../../dialog'
 import Form from '../../form'
+import { getLocale } from "../../../utils/getLocale";
 const { Fields } = Form
 
 interface Props1 {
@@ -81,7 +82,7 @@ export const SubmitDialog = (props: Props1) => {
           />
         </Form>
         <div className="okr-cases-library__submitWindow-submitButton"
-          onClick={onSubmitButtonClick}>提交</div>
+          onClick={onSubmitButtonClick}>{getLocale('Pro_detail_Submission')}</div>
       </div>
     </Dialog>
 
@@ -177,7 +178,7 @@ export const PayDialog = (props: Props2) => {
         <img src={require('../image/支付背景浮出.png')} />
         <div className="tu-icon-canceled" onClick={() => handleShowPayWindow(false)} style={{ width: '18px', height: '18px' }} />
         <p className="okr-cases-library__payWindow__head">{price} 购买千份 OKR 案例库</p>
-        <p className="okr-cases-library__payWindow__detail">可查看 使用案例库所有行业的案例 <a href="https://club.tita.com/okr-examples" target="_blank">查看详情</a></p>
+        <p className="okr-cases-library__payWindow__detail">可查看 使用案例库所有行业的案例 <a href="https://club.tita.com/okr-examples" target="_blank">{getLocale('Mod_Checkdetails')}</a></p>
         <div className="okr-cases-library__payWindow__amount">应付金额：<b><span style={{ fontSize: '32px' }}>19.8</span>元/年</b></div>
         <a className="okr-cases-library__payWindow__payButton" onClick={() => loopOrderInfo(orderId)}
           href={`/app/payorder?orderid=${orderId}&mobile=13552865071&defcode=${payCode}&defCodeName=${payName}&IsContactCustomerService=false`} target="_blank">

package/src/components/okrcase-library-card/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useRef, useEffect } from 'react';
 import firework from '../firework';
 import { postApply, postLike } from '../okrcase-library/server/network.js';
 import { CardItem } from '../okrcase-library';
+import { getLocale } from '../../utils/getLocale';
 import '../okrcase-library/index.scss';
 
 interface Props {
@@ -65,9 +66,9 @@ const OkrCaseCard = (props: Props) => {
     window.titaTracker &&
       // @ts-ignore
       window.titaTracker('action').record({
-        action: '套用',
-        actionGroup: '案例库',
-        productName: '案例库',
+        action: getLocale('Per_Ass_Pop_button_Apply'),
+        actionGroup: getLocale('OKR_OKRex_Casebase'),
+        productName: getLocale('OKR_OKRex_Casebase'),
       });
   };
 
@@ -104,9 +105,7 @@ const OkrCaseCard = (props: Props) => {
                     : 'okr-cases-library__cardList__card__title__btn-red'
                 }`}
             onClick={() => handleApplyBtnClick(id)}
-          >
-            套用
-          </div>
+          >{getLocale('Per_Ass_Pop_button_Apply')}</div>
         }
       </div>
       <div className="okr-cases-library__cardList__card__content">

package/src/components/operation-records/index.tsx

@@ -4,6 +4,7 @@ import { getApiUrl2, taker } from '../../utils/request-v1' // 请求相关
 import { OperationData } from './mockData'
 import OperationRecordItem from './OperationRecordItem'
 import { OperationRecordWrapper, OperationRecordTotal, OperationRecordList, OperationDateYearWrapper, OperationDateYear, OperationDateYearDot, OperationDateYearLine, Dd } from './style'
+import { getLocale } from '../../utils/getLocale'
 
 interface Props {
   className?: string
@@ -132,7 +133,7 @@ export default class OperationRecord extends PureComponent<Props, State> {
     return (
       <OperationRecordWrapper className={className}>
         <OperationRecordTotal>
-          <p className={isShowAllOperationRecord ? "tu-icon-angles-up" : "tu-icon-angles-down"} onMouseDown={() => this.handlerSwitchShowRecord()}>全部操作&nbsp;<span>{operationTrackTotal}</span></p>
+          <p className={isShowAllOperationRecord ? "tu-icon-angles-up" : "tu-icon-angles-down"} onMouseDown={() => this.handlerSwitchShowRecord()}>{getLocale('OKR_MyO_KRP_Alloperations')}&nbsp;<span>{operationTrackTotal}</span></p>
         </OperationRecordTotal>
         <OperationRecordList>
           <dl>

package/src/components/pagination/locale/en_US.js

@@ -0,0 +1,16 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ page',
+  jump_to: 'Go to',
+  jump_to_confirm: 'confirm',
+  page: 'Page',
+
+  // Pagination.jsx
+  prev_page: 'Previous Page',
+  next_page: 'Next Page',
+  prev_5: 'Previous 5 Pages',
+  next_5: 'Next 5 Pages',
+  prev_3: 'Previous 3 Pages',
+  next_3: 'Next 3 Pages',
+  page_size: 'Page Size',
+};

package/src/components/pagination/locale/zh_CN.js

@@ -0,0 +1,16 @@
+export default {
+  // Options.jsx
+  items_per_page: '条/页',
+  jump_to: '跳至',
+  jump_to_confirm: '确定',
+  page: '页',
+
+  // Pagination.jsx
+  prev_page: '上一页',
+  next_page: '下一页',
+  prev_5: '向前 5 页',
+  next_5: '向后 5 页',
+  prev_3: '向前 3 页',
+  next_3: '向后 3 页',
+  page_size: '页码',
+};

package/src/components/pagination/pagination.tsx

@@ -5,6 +5,9 @@ import Select from 'rc-select';
 import 'rc-pagination/assets/index.css';
 import './index.scss';
 import './select.scss';
+import { isEn } from '../../utils/getLocale';
+import zh_CN from './locale/zh_CN';
+import en_US from './locale/en_US';
 
 interface Props extends PaginationProps {
   size?: 'md' | 'sm';
@@ -61,6 +64,7 @@ export default (props: Props) => {
       showQuickJumper={true}
       showSizeChanger={true}
       showTitle={false}
+      locale={isEn ? en_US : zh_CN}
       {...restProps}
     />
   );

package/src/components/password-input/index.tsx

@@ -6,6 +6,7 @@ import OpenEye from "./icon/open-eye";
 // @ts-ignore
 import CloseEye from "./icon/close-eye";
 import "./index.scss";
+import { getLocale } from "../../utils/getLocale";
 
 const prefix = "tita-ui-admin-input";
 
@@ -75,17 +76,13 @@ const PasswordInput: FC<IPasswordInputProps> = ({
         isFocus && (
           <span>
             <button
-        className={classNames(prefix + "__btn", prefix + "__btn-sure")}
-        onClick={handleSureClick}
-      >
-        保存
-      </button>
-      <button
-        className={classNames(prefix + "__btn", prefix + "__btn-cancel")}
-        onClick={handleCancelClick}
-      >
-        取消
-      </button>
+              className={classNames(prefix + "__btn", prefix + "__btn-sure")}
+              onClick={handleSureClick}
+            >{getLocale('Mod_Save')}</button>
+            <button
+              className={classNames(prefix + "__btn", prefix + "__btn-cancel")}
+              onClick={handleCancelClick}
+            >{getLocale('Mod_Cancel')}</button>
           </span>
         ) 
       }

package/src/components/period-selector/common.ts

@@ -1,6 +1,22 @@
+import { getLocale, isEn } from "../../utils/getLocale";
 import { SelectedInterface, PeriodObj } from "./type";
 import moment from "moment";
 
+export const getMonth = () => [
+  getLocale("Mod_Jan"),
+  getLocale("Mod_Feb"),
+  getLocale("Mod_Mar"),
+  getLocale("Mod_Apr"),
+  getLocale("Mod_May"),
+  getLocale("Mod_Jun"),
+  getLocale("Mod_Jul"),
+  getLocale("Mod_Aug"),
+  getLocale("Mod_Sept"),
+  getLocale("Mod_Oct"),
+  getLocale("Mod_Nov"),
+  getLocale("Mod_Dec"),
+];
+
 export const dealSelectedPeriodData = (period: string) => {
   let option: any = {};
   option.cycleType = period == "-1" ? "-1" : period.substring(0, 1);
@@ -17,7 +33,7 @@ export const dealYearsRange = (
     if (yearsRange.length > 1 && showAllYears) {
       yearsData = [
         {
-          title: "全部年份",
+          title: `${getLocale('OKR_MyO_Butt_Allyears')}`,
           order: ["-1"],
           checked: false,
         },
@@ -47,34 +63,35 @@ export const dealYearsRange = (
 
 export const formatPeriod = (selected: SelectedInterface) => {
   if (!selected) return "";
-  var quarter = ["", "第一季度", "第二季度", "第三季度", "第四季度"];
+  var quarter = ["", `${getLocale('OKR_MyO_Pop_1stQuarter')}`, `${getLocale('OKR_MyO_Pop_2ndQuarter')}`, `${getLocale('OKR_MyO_Pop_3rdQuarter')}`, `${getLocale('OKR_MyO_Pop_4thQuarter')}`];
   var cycleDate = "";
   var annualNum =
-    selected.annualNum == "-1" ? "全部年份" : selected.annualNum + "年";
+    selected.annualNum == "-1" ? `${getLocale('OKR_MyO_Butt_Allyears')}` : selected.annualNum + `${isEn ? '' : '年'}`;
+  const month = getMonth();
   switch (`${selected.cycleType}`) {
     case "-1":
-      cycleDate = "全部周期";
+      cycleDate = `${getLocale('OKR_MyO_Butt_AllStatee')}`;
       break;
     case "1":
-      cycleDate = "年度";
+      cycleDate = `${getLocale('OKR_MyO_Pop_Year')}`;
       break;
     case "2":
       // 季度
       cycleDate = quarter[Number(selected.yqmNum)];
       break;
     case "3":
-      cycleDate = selected.yqmNum + "月";
+      cycleDate = month[Number(selected.yqmNum) - 1];
       break;
     case "4":
-      cycleDate = `${selected.yqmNum} - ${
-        ((Number(selected.yqmNum) + 1) % 12 || 12)
-      }月`;
+      cycleDate = `${month[Number(selected.yqmNum)-1]} - ${
+        month[((Number(selected.yqmNum) + 1) % 12 || 12)-1]
+      }`;
       break;
     case "5":
-      cycleDate = selected.yqmNum == "1" ? "上半年" : "下半年";
+      cycleDate = selected.yqmNum == "1" ? `${getLocale('OKR_MyO_Pop_Firsthalf')}` : `${getLocale('OKR_MyO_Pop_Secondhalf')}`;
       break;
     default:
-      cycleDate = "自定义";
+      cycleDate = `${getLocale('Mod_Customization')}`;
   }
   return annualNum + "  " + cycleDate;
 };
@@ -244,4 +261,4 @@ export function getDefalutCycle(setting) {
     yqmNum: "1",
     ...getDateRangeByCycle(cycle, setting.yearStartMonth),
   };
-}
+}

package/src/components/period-selector/components/selector/index.tsx

@@ -1,13 +1,18 @@
 import React, { useEffect, useState } from "react";
+import { getLocale } from "../../../../utils/getLocale";
 import {
   computeYearIndex,
   dealSelectedPeriodData,
   dealYearsRange,
   getDateRangeByCycle,
+  getMonth,
 } from "../../common";
-import { MockMonth, MockPeriod, MockQuarter } from "../../mockData";
+import { getMockMonth, getMockPeriod, getMockQuarter } from "../../mockData";
 import { PeriodObj, SelectedInterface } from "../../type";
 import { Head, List, Item, Icon, Title, Wrapper, PlaceHolder } from "./style";
+import { getBSGlobal } from "../../helper";
+
+const i18nInfo = getBSGlobal("I18NInfo");
 
 export interface ISelectorProps {
   className?: string;
@@ -78,21 +83,42 @@ function getDoubleMonthData(startMonth) {
   let start = startMonth % 2 == 1 ? 1 : 2;
   let month = start;
   const getNextMonth = (month, step = 1) => (month + step) % 12 || 12;
-  let datas = [
-    {
+  let datas: {
+    title: string;
+    order: string[];
+    checked: boolean;
+  }[] = [];
+  const monthLang = getMonth();
+  if (!i18nInfo || (i18nInfo.I18NOpen && i18nInfo.I18NUserLang === "zh_CN")) {
+    datas.push({
       title: `${start} - ${getNextMonth(start)}月`,
       order: [`4,${start}`],
       checked: false,
-    },
-  ];
-  while (1) {
-    month = getNextMonth(month, 2);
-    if (month == start) break;
+    });
+    while (1) {
+      month = getNextMonth(month, 2);
+      if (month == start) break;
+      datas.push({
+        title: `${month} - ${getNextMonth(month)}月`,
+        order: [`4,${month}`],
+        checked: false,
+      });
+    }
+  } else {
     datas.push({
-      title: `${month} - ${getNextMonth(month)}月`,
-      order: [`4,${month}`],
+      title: `${monthLang[start - 1]} - ${monthLang[getNextMonth(start) - 1]}`,
+      order: [`4,${start}`],
       checked: false,
     });
+    while (1) {
+      month = getNextMonth(month, 2);
+      if (month == start) break;
+      datas.push({
+        title: `${monthLang[month - 1]} - ${monthLang[getNextMonth(month)-1]}`,
+        order: [`4,${month}`],
+        checked: false,
+      });
+    }
   }
   return datas;
 }
@@ -115,7 +141,7 @@ function Selector({
   const [annualNum, setAnnualNum] = useState(new Date().getFullYear() + "");
   const [annualNumIndex, setAnnualNumIndex] = useState(0);
   const [cycleType, setCycleType] = useState("-1");
-  const [periodData, setPeriodData] = useState(MockPeriod);
+  const [periodData, setPeriodData] = useState(getMockPeriod());
   const [yqmNum, setYqmNum] = useState("0");
   const yearsRangeLen = dealYearsRange(yearsRange).length;
 
@@ -159,12 +185,12 @@ function Selector({
 
     let periodDatas: any[] = [
       showFullCycle && {
-        title: "全部周期",
+        title: `${getLocale("OKR_MyO_Butt_AllStatee")}`,
         order: ["-1"],
         checked: false,
       },
       showYear && {
-        title: "年度",
+        title: `${getLocale("OKR_MyO_Pop_Year")}`,
         order: ["1"],
         checked: false,
       },
@@ -172,23 +198,23 @@ function Selector({
     if (showHalfYear) {
       periodDatas.push(
         {
-          title: "上半年",
+          title: `${getLocale("OKR_MyO_Pop_Firsthalf")}`,
           order: ["5,1"],
           checked: false,
         },
         {
-          title: "下半年",
+          title: getLocale("OKR_MyO_Pop_Secondhalf"),
           order: ["5,2"],
           checked: false,
         }
       );
     }
     if (showQuarter) {
-      periodDatas.push(...MockQuarter);
+      periodDatas.push(...getMockQuarter());
     }
     if (showCustom) {
       periodDatas.push({
-        title: "自定义",
+        title: getLocale("Mod_Customization"),
         order: ["0,0"],
         checked: false,
       });
@@ -269,7 +295,7 @@ function Selector({
             }`,
           ]}
           size="s"
-          periodData={MockMonth}
+          periodData={getMockMonth()}
           onSelected={(period: string) => {
             handleSelected(period);
           }}

package/src/components/period-selector/mockData.ts

@@ -1,103 +1,105 @@
-export const MockPeriod = [
+import { getLocale } from "../../utils/getLocale";
+
+export const getMockPeriod = () => [
   {
-    title: "全部周期",
+    title: getLocale("OKR_MyO_Butt_AllStatee"),
     order: ["-1"],
     checked: false,
   },
   {
-    title: "年度",
+    title: getLocale("OKR_MyO_Pop_Year"),
     order: ["1"],
     checked: false,
   },
   {
-    title: "自定义",
+    title: getLocale("Mod_Customization"),
     order: ["0,0"],
     checked: false,
-  }
-]
+  },
+];
 
-export const MockQuarter = [
+export const getMockQuarter = () => [
   {
-    title: "第一季度",
+    title: getLocale("OKR_MyO_Pop_1stQuarter"),
     order: ["2,1"],
     checked: false,
   },
   {
-    title: "第二季度",
+    title: getLocale("OKR_MyO_Pop_2ndQuarter"),
     order: ["2,2"],
     checked: false,
   },
   {
-    title: "第三季度",
+    title: getLocale("OKR_MyO_Pop_3rdQuarter"),
     order: ["2,3"],
     checked: false,
   },
   {
-    title: "第四季度",
+    title: getLocale("OKR_MyO_Pop_4thQuarter"),
     order: ["2,4"],
     checked: false,
-  }
-]
+  },
+];
 
-export const MockMonth = [
+export const getMockMonth = () => [
   {
-    title: "1月",
+    title: getLocale("Mod_Jan"),
     order: ["3,1"],
     checked: false,
   },
   {
-    title: "2月",
+    title: getLocale("Mod_Feb"),
     order: ["3,2"],
     checked: false,
   },
   {
-    title: "3月",
+    title: getLocale("Mod_Mar"),
     order: ["3,3"],
     checked: false,
   },
   {
-    title: "4月",
+    title: getLocale("Mod_Apr"),
     order: ["3,4"],
     checked: false,
   },
   {
-    title: "5月",
+    title: getLocale("Mod_May"),
     order: ["3,5"],
     checked: false,
   },
   {
-    title: "6月",
+    title: getLocale("Mod_Jun"),
     order: ["3,6"],
     checked: false,
   },
   {
-    title: "7月",
+    title: getLocale("Mod_Jul"),
     order: ["3,7"],
     checked: false,
   },
   {
-    title: "8月",
+    title: getLocale("Mod_Aug"),
     order: ["3,8"],
     checked: false,
   },
   {
-    title: "9月",
+    title: getLocale("Mod_Sept"),
     order: ["3,9"],
     checked: false,
   },
   {
-    title: "10月",
+    title: getLocale("Mod_Oct"),
     order: ["3,10"],
     checked: false,
   },
   {
-    title: "11月",
+    title: getLocale("Mod_Nov"),
     order: ["3,11"],
     checked: false,
   },
   {
-    title: "12月",
+    title: getLocale("Mod_Dec"),
     order: ["3,12"],
     checked: false,
-  }
-]
+  },
+];

package/src/components/photo-card/components/card/index.tsx

@@ -10,6 +10,7 @@ import {
   postAttention,
   delAttention,
 } from '../../request.apis';
+import { getLocale } from '../../../../utils/getLocale';
 import Add from '../../images/add1@3x.png';
 import './index.scss';
 
@@ -102,7 +103,7 @@ const Card = (props) => {
             {attentionData >= 10000 ? '1w+' : attentionData}
           </span>
           <span className={classNames(`${preCls}__data-attention-title`)}>
-            关注量
+            {getLocale('OKR_MyO_Ow_Followers')}
           </span>
         </div>
         <div className={classNames(`${preCls}__data-visit`)}>
@@ -110,7 +111,7 @@ const Card = (props) => {
             {visitData >= 10000 ? '1w+' : visitData}
           </span>
           <span className={classNames(`${preCls}__data-visit-title`)}>
-            访问量
+            {getLocale('OKR_MyO_Visitors')}
           </span>
         </div>
       </div>
@@ -130,14 +131,14 @@ const Card = (props) => {
               [`${preCls}__attention-btn-img--show`]: isAttention,
             })}
           >
-            已关注
+            {getLocale('OKR_MyO_Butt_Followed')}
           </div>
           <div
             className={classNames(`${preCls}__attention-btn-title`, {
               [`${preCls}__attention-btn-img--hide`]: isAttention,
             })}
           >
-            关注
+            {getLocale('OKR_MyO_Butt_Follow')}
           </div>
         </div>
       </ConditionRender>

package/src/components/photo-card/index.tsx

@@ -15,6 +15,7 @@ import {
   getOtherUserInfo,
 } from './request.apis';
 import Attention from './images/attention.svg';
+import { getLocale } from '../../utils/getLocale';
 import './index.scss';
 
 const prefixCls = 'titaui-photo-card-img';
@@ -107,7 +108,7 @@ const PhotoCard = (props: IProps) => {
       <ConditionRender
         condition={isAttention === true && userId !== userownInfo.Id}
       >
-        <Tooltip overlay="取消关注" placement="top">
+        <Tooltip overlay={`${getLocale('OKR_MyO_Butt_Unfollow')}`} placement="top">
           <img
             src={Attention}
             className={classNames(`${prefixCls}__img`)}
@@ -118,7 +119,7 @@ const PhotoCard = (props: IProps) => {
       <ConditionRender
         condition={isAttention === false && userId !== userownInfo.Id}
       >
-        <Tooltip overlay="关注" placement="top">
+        <Tooltip overlay={`${getLocale('OKR_MyO_Butt_Follow')}`} placement="top">
           <i
             className={classNames(`${prefixCls}__img`, 'tu-icon-guanzhu-x')}
             onClick={() => handleAttention()}