@titaui/pc 1.8.5 → 1.8.9

package/src/components/okr-share/publishMblog.tsx

@@ -5,6 +5,7 @@ import { findDOMNode } from "react-dom";
 import { addShare, uploadBase64 } from "./request-apis";
 import Toast from "../toast";
 import { getBSGlobal } from "../../utils/bs-global";
+import { getLocale } from "../../utils/getLocale";
 
 const loginUserId = getBSGlobal("loginUserInfo").Id;
 
@@ -33,9 +34,7 @@ function PublishMblog({
   }, []);
   return (
     <div className="okr-share-mblog__container">
-      <div className="okr-share-mblog__header">
-        发布动态
-        <i className="tu-icon-close" onClick={() => closeModal()} />
+      <div className="okr-share-mblog__header">{getLocale('OKR_MyO_Popup_PostNews')}<i className="tu-icon-close" onClick={() => closeModal()} />
       </div>
       <div className="okr-share-mblog__body">
         <MBlogContext.Provider
@@ -58,7 +57,7 @@ function PublishMblog({
                 Visibility: 1,
                 isSendSMS: false,
               });
-              Toast.Success("分享成功");
+              Toast.Success(getLocale('OKR_MyO_Popup_Sharedsuccee'));
               setStatus(1);
               closeModal();
             }}

package/src/components/okr-share/shareCardSelector.tsx

@@ -1,9 +1,10 @@
 import { getBase64DownloadUrl, getImageBase64ByUrl } from './request-apis';
 import React, { ReactElement, useEffect, useRef } from 'react'
 import { isWx } from '../../utils/bs-global';
-import { drawPinkCard } from './pink-card'
-import PinkCard from './pink-card/card'
+import { drawPinkCard } from './pink-card';
+import PinkCard from './pink-card/card';
 import { ShareData } from './index';
+import { getLocale } from '../../utils/getLocale';
 
 interface Props {
   onShare: (base64: string) => void
@@ -44,11 +45,11 @@ function ShareCardSelector({ onShare, closeModal, data }: Props): ReactElement {
           a.href = url.Data.obj;
           a.download = 'okr.png';
           a.click()
-        }}>下载图片</a>
+        }}>{getLocale('OKR_MyO_Popup_Download')}</a>
         <a className="share-card-button share" onClick={async () => {
           const base64img = await base64ImageRef.current as string
           onShare(base64img)
-        }}>分享到动态</a>
+        }}>{getLocale('Mod_ShareFeed')}</a>
       </div>
     </div>
   )

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

@@ -4,7 +4,8 @@ import CaseLibraryHeader from './okrcases-components/caseLibray-header'
 import CaseLibraryNav from './okrcases-components/caseLibrary-nav'
 import CaseLibraryMain from './okrcases-components/caseLibrary-main'
 import { SubmitDialog, PayDialog } from './okrcases-components/submitOkr-dialog'
-import { postForCases, getLabels, postSearchCases, gettotalNumber, getIsHadBuyOKRcases } from './server/network'
+import { postForCases, getLabels, postSearchCases, gettotalNumber, getIsHadBuyOKRcases } from './server/network';
+import { getLocale } from '../../utils/getLocale';
 
 import './index.scss';
 import './new-ui.scss';
@@ -99,7 +100,7 @@ const OKRCases = (props: Props) => {
     getLabels().then((res) => {
       setNavList([{
         id: 0,
-        name: "全部",
+        name: getLocale('Mod_all'),
         orderNumber: 0,
         subTotal: '',
         subLabel: []
@@ -158,7 +159,7 @@ const OKRCases = (props: Props) => {
     window.titaTracker && window.titaTracker('action').record({
         actionName: work.name,
         actionGroup: '案例库-各行业',
-        productName: '案例库'
+        productName: getLocale('OKR_OKRex_Casebase')
       })
     setSearchValue('')
     //点击选择类型时重新请求数据

package/src/components/okrcase-library/okrcases-components/caseLibrary-cardList/okrcase-card.tsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useRef, useEffect } from "react";
 import { postApply, postLike } from '../../server/network.js'
 import { CardItem } from '../../index'
 import firework from '../../../firework'
+import { getLocale } from "../../../../utils/getLocale";
 
 interface Props {
   onApplyTpl: Function;
@@ -58,9 +59,9 @@ const OkrCaseCard = (props: Props) => {
     // @ts-ignore
     window.titaTracker &&
       window.titaTracker('action').record({
-        action: '套用',
-        actionGroup: '案例库',
-        productName: '案例库'
+        action: getLocale('Per_Ass_Pop_button_Apply'),
+        actionGroup: getLocale('OKR_OKRex_Casebase'),
+        productName: getLocale('OKR_OKRex_Casebase')
       })
 
   }
@@ -79,7 +80,7 @@ const OkrCaseCard = (props: Props) => {
                 ${isApplyBtnShow && "okr-cases-library__cardList__card__title__btn-show"}
                 ${isBlue ? 'okr-cases-library__cardList__card__title__btn-blue' : 'okr-cases-library__cardList__card__title__btn-red'}`
         }
-          onClick={() => handleApplyBtnClick(id)}>套用</div>}
+          onClick={() => handleApplyBtnClick(id)}>{getLocale('Per_Ass_Pop_button_Apply')}</div>}
       </div>
       <div className="okr-cases-library__cardList__card__content">
         {subelements.map((item, krindex) => (

package/src/components/okrcase-library/okrcases-components/caseLibrary-main.tsx

@@ -3,6 +3,7 @@ import OkrCaseCardLsit from './caseLibrary-cardList'
 import OkrEssay from '../../grid-layout/essay-component'
 import { CardList } from '../index'
 import { isLocal } from "../../../utils/helpers";
+import { getLocale } from "../../../utils/getLocale";
 
 interface Props {
   onApplyTpl: Function;
@@ -52,7 +53,7 @@ const CaseLibraryMain = (props: Props) => {
               <img src={require('../image/笔.svg')} />提交我想要的OKR类型
             </div>
             <div className="okr-cases-library__aside__submitWant__libraryNum">全国最大 OKR 案例库
-              <span style={{ color: '#F05E5E' }}> {okrCasesNum}</span> 个
+              <span style={{ color: '#F05E5E' }}> {okrCasesNum}</span> {getLocale('OKR_MyO_E_Mumber')}
             </div>
           </div>}
           {isUnlock

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);
           }}