@titaui/pc 1.9.73 → 1.9.77

package/src/components/dynamic/dynamic-item/dynamic-task/constant.ts

@@ -1,6 +1,6 @@
 import { getLocale } from "../../../../utils/getLocale";
 
-export const EStatusClass2StatusTypeText = {
+export const getEStatusClass2StatusTypeText = () => ({
   2: getLocale("OKR_MyO_E_From_Completed"),
   1: getLocale("Per_MyRe_text_Inprogress"),
   4: getLocale("OKR_MyO_E_From_Cancelled"),
@@ -8,4 +8,6 @@ export const EStatusClass2StatusTypeText = {
   6: getLocale("OKR_MyO_E_From_Suspended"),
   0: getLocale("OKR_MyO_E_From_NotStarted"),
   5: getLocale("OKR_MyO_E_From_Notaccepted"),
-};
+});
+
+export default getEStatusClass2StatusTypeText;

package/src/components/dynamic/dynamic-item/dynamic-task/index.tsx

@@ -4,7 +4,7 @@ import React, {
 import classNames from "classnames";
 import { IDynamicItemContentProps } from "../../interface";
 import DynamicItemHeader from "../components/header";
-import { EStatusClass2StatusTypeText } from "./constant";
+import { getEStatusClass2StatusTypeText } from "./constant";
 import TaskPng from "./img/task-icon.png";
 import {
   EObjType,
@@ -51,7 +51,7 @@ const DynamicTask: FC<IDynamicItemContentProps> = ({ data, ...restProps }) => {
     if (objType === EObjType.Project) {
       window.open(
         window.location.href.replace(
-          location.hash,
+          window.location.hash,
           `#work?iTalentNavCode=tita-work&work_id=${objId}`,
         ),
       );
@@ -60,7 +60,7 @@ const DynamicTask: FC<IDynamicItemContentProps> = ({ data, ...restProps }) => {
       if (workId <= 0) return;
       window.open(
         window.location.href.replace(
-          location.hash,
+          window.location.hash,
           `#work?work_id=${workId}&detail_type=milepost`,
         ),
       );
@@ -70,7 +70,7 @@ const DynamicTask: FC<IDynamicItemContentProps> = ({ data, ...restProps }) => {
       if (workId <= 0) return;
       window.open(
         window.location.href.replace(
-          location.hash,
+          window.location.hash,
           `#work?work_id=${workId}&detail_type=kanban`,
         ),
       );
@@ -125,7 +125,7 @@ const DynamicTask: FC<IDynamicItemContentProps> = ({ data, ...restProps }) => {
         user={principalUser}
       />
       <div className={`${prefix}__content`}>
-        <img className={`${prefix}__content-img`} src={TaskPng} />
+        <img className={`${prefix}__content-img`} src={TaskPng} alt="" />
         <div className={`${prefix}__content-info`}>
           <div className={`${prefix}__content-title`}>
             <Tooltip.Text isPercent text={renderName} minusWidth={30} />
@@ -133,7 +133,7 @@ const DynamicTask: FC<IDynamicItemContentProps> = ({ data, ...restProps }) => {
           <div className={`${prefix}__content-status-and-time-range`}>
             <i className={classNames(EStatusStatus2ClassType[status])} />
             <span className={`${prefix}__content-status-text`}>
-              {EStatusClass2StatusTypeText[status]}
+              {getEStatusClass2StatusTypeText()[status]}
             </span>
             <i className={classNames("tu-icon-deferred")} />
             <span className={`${prefix}__content-time-range`}>

package/src/components/dynamic/dynamic-like-ranking/index.scss

@@ -66,8 +66,9 @@
       }
       &-items {
         display: grid;
-        grid-template-columns: auto auto auto auto;
+        grid-template-columns: auto 28px auto auto;
         grid-row-gap: 16px;
+        margin-left: -8px;
       }
     }
   }
@@ -93,8 +94,6 @@
     }
 
     &-avatar {
-      margin-left: 9px;
-
       .titaui-pc-avator-container {
         display: inline-flex !important;
       }

package/src/components/dynamic/dynamic.tsx

@@ -80,9 +80,14 @@ const Dynamic: FC = () => {
   };
 
   const handleDeleteFeed = (feedId) => {
-    setDynamicData([
-      ...dynamicData.filter((item: any) => item.feedId !== feedId),
-    ]);
+    const newDatas = dynamicData.filter((item: any) => item.feedId !== feedId);
+    setDynamicData([]);
+    // 动画效果如果直接设置新的数据，diff时间会比较长，所以直接清空再赋值，这样不会出现删除时等待长时间空白
+    setTimeout(() => {
+      setDynamicData([
+        ...newDatas,
+      ]);
+    }, 0);
   };
 
   const getDynamicData = (needResetValue) => {

package/src/components/mblog/style.ts

@@ -26,7 +26,7 @@ export const DivMblogContent = styled.div`
   background-color: #fff;
   position: relative;
   transition: all .2s ease-in-out;
-  height: 124px;
+  height: 200px;
   box-sizing: border-box;
 
   &.input_default-active {
@@ -60,20 +60,19 @@ export const Textarea = styled.textarea`
   resize: none;
   word-break: break-all;
   word-wrap: break-word;
-  height: 86px;
+  height: 160px;
+  font-size: 14px;
+  line-height: 22px;
 
   &.textarea-setheight {
     visibility: hidden;
     position: absolute;
   }
-/* 
-  &.private__bg {
-    background: url(${require("./assets/lock-radius.png")}) no-repeat right top;
-  } */
 `;
 
 export const Tips = styled.div`
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 22px;
   color: ${(p: any) => p.color};
   text-align: right;
 `;

package/src/components/okr-detail/detail-header/confirm.tsx

@@ -18,7 +18,7 @@ function OkrDetailHeaderConfirm({ onConfirm, title = "", content = "" }: Props):
   }, []);
 
   return (
-    <Confirm visible={visible} type="warning">
+    <Confirm visible={visible} type="warning" zIndex={2400}>
       {
         // @ts-ignore
         <span type="title">{title}</span>

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

@@ -71,13 +71,15 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
       visibility: context.generalVisibility.visibility,
       detailInfo,
       openShareModal: async () => {
-        const krs = await getKrs({ okrId: detailInfo.workId });
-        setKrs(krs);
+        const krss = await getKrs({ okrId: detailInfo.workId });
+        setKrs(krss);
         setShareVisible(true);
       },
       changeVisiblilty: (visibility) => {
-        if (visibility == 4) {
-          userSelectRef.current && userSelectRef.current.open();
+        if (visibility === 4) {
+          if (userSelectRef.current) {
+            userSelectRef.current.open();
+          }
           return;
         }
         changVisiblity(detailInfo.workId, visibility);
@@ -100,10 +102,11 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
             : getLocale("OKR_MyO_Err_Progress"),
         );
         if (res) {
-          follow
-            // @ts-ignore
-            ? await addUser(loginUserId, detailInfo.workId, 3)
-            : await deleteUser(loginUserId, detailInfo.workId, 3);
+          if (follow) {
+            await addUser(loginUserId, detailInfo.workId, 3);
+          } else {
+            await deleteUser(loginUserId, detailInfo.workId, 3);
+          }
           context.setGeneralRoleType(follow ? 3 : 0);
           // 关注
           Toast.Success(getLocale("Mod_Successfuloperat"));
@@ -117,9 +120,11 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
           isFinish ? getLocale("OKR_MyO_Areycloseobjective") : getLocale("OKR_MyO_Err_Restart"),
         );
         if (res) {
-          isFinish
-            ? await close(detailInfo.workId)
-            : await start(detailInfo.workId);
+          if (isFinish) {
+            await close(detailInfo.workId);
+          } else {
+            await start(detailInfo.workId);
+          }
           commonContext.refreshAll();
           // 刷新
           Toast.Success(getLocale("Mod_Successfuloperat"));
@@ -172,7 +177,7 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
             <span className="okr-detail-head-parent">
               <i className="tu-icon-liebiao-duiqinubiao" />
               <span
-                onClick={() => (parent.type == "okr"
+                onClick={() => (parent.type === "okr"
                   ? drawerManager.open("okrDetail", {
                     okrId: parent.id,
                   })
@@ -180,7 +185,7 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
                     krId: parent.id,
                   }))}
               >
-                <span>{parent.type == "okr" ? "O " : "KR "}</span>
+                <span>{parent.type === "okr" ? "O " : "KR "}</span>
                 {parent.name}
               </span>
             </span>
@@ -202,6 +207,7 @@ function OkrDetailHeader({ detailInfo }: Props): ReactElement {
             },
           },
         }}
+        zIndex={2400}
       />
       <PopConfirm
         ref={popRef}

package/src/components/okr-progress-modal/helper.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from "react";
 import { getLocale } from "../../utils/getLocale";
 
-export const getO_SETTING = () => ({
+export const getOSetting = () => ({
   settingTitle: getLocale("OKR_MyO_Pop_Upd_Setmatically"),
   switchLabel: getLocale("OKR_MyO_Pop_Upd_Setmatically"),
   options: [
@@ -16,31 +16,35 @@ export const getO_SETTING = () => ({
       tooltip: getLocale("OKR_MyO_Pop_Upd_SubO"),
     },
   ],
-  getRecommandText: (autoUpdate = true, updateWay = 1, recommandProgressObj) => {
+  getRecommandText: (recommandProgressObj, autoUpdate = true, updateWay = 1) => {
     if (autoUpdate) {
-      if (updateWay == 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Pop_Upd_Automatic")}</span>;
-      if (updateWay == 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
-    } else {
-      const { childOkrProgress, childkrProgress } = recommandProgressObj;
-      const textArr = [];
-      childkrProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Pop_Upd_KRCom")}${childkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      childOkrProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      if (textArr.length == 0) return "";
-      return (
-        <>
-          <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
-          <span className="auto-update__recommand-tip">
-            （
-            {textArr.join("，")}
-            ）
-          </span>
-        </>
-      );
+      if (updateWay === 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Pop_Upd_Automatic")}</span>;
+      if (updateWay === 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
+      return <span />;
     }
+    const { childOkrProgress, childkrProgress } = recommandProgressObj;
+    const textArr = [];
+    if (childkrProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Pop_Upd_KRCom")}${childkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
+    }
+    if (childOkrProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
+    }
+    if (textArr.length === 0) return "";
+    return (
+      <>
+        <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
+        <span className="auto-update__recommand-tip">
+          （
+          {textArr.join("，")}
+          ）
+        </span>
+      </>
+    );
   },
 });
 
-export const getKR_SETTING = () => ({
+export const getKrSetting = () => ({
   settingTitle: getLocale("OKR_MyO_KRCompletion"),
   switchLabel: getLocale("OKR_MyO_SetKRcompletion"),
   options: [
@@ -55,31 +59,35 @@ export const getKR_SETTING = () => ({
       tooltip: getLocale("OKR_MyO_KRcompletionde"),
     },
   ],
-  getRecommandText: (autoUpdate = true, updateWay = 1, recommandProgressObj) => {
+  getRecommandText: (recommandProgressObj, autoUpdate = true, updateWay = 1) => {
     if (autoUpdate) {
-      if (updateWay == 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Automatic")}</span>;
-      if (updateWay == 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
-    } else {
-      const { childOkrProgress, childEProgress } = recommandProgressObj;
-      const textArr = [];
-      childEProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Ecompletion")}${childEProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      childOkrProgress !== -1 && textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
-      if (textArr.length == 0) return "";
-      return (
-        <>
-          <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
-          <span className="auto-update__recommand-tip" style={{ marginLeft: 0 }}>
-            (
-            {textArr.join("，")}
-            )
-          </span>
-        </>
-      );
+      if (updateWay === 1) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_Automatic")}</span>;
+      if (updateWay === 2) return <span className="auto-update__recommand-tip">{getLocale("OKR_MyO_calculationSubO")}</span>;
+      return <span />;
+    }
+    const { childOkrProgress, childEProgress } = recommandProgressObj;
+    const textArr = [];
+    if (childEProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Ecompletion")}${childEProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
+    }
+    if (childOkrProgress !== -1) {
+      textArr.push(`${getLocale("OKR_MyO_Ew_SubobjCom")}${childOkrProgress}${getLocale("OKR_MyO_Pop_Upd_Percentage")}`);
     }
+    if (textArr.length === 0) return "";
+    return (
+      <>
+        <span className="auto-update__recommand-icon">{getLocale("Per_Ass_Pop_title_Recommend")}</span>
+        <span className="auto-update__recommand-tip" style={{ marginLeft: 0 }}>
+          (
+          {textArr.join("，")}
+          )
+        </span>
+      </>
+    );
   },
 });
 
-export const transProgress = (progress) => (progress == -1 ? 0 : progress);
+export const transProgress = (progress) => (progress === -1 ? 0 : progress);
 
 export const getKrOptions = () => [
   {

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

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, FC } from "react";
 import { Input, Modal, Tooltip } from "tita-ui";
 import classNames from "classnames";
 import { getKrRecommandProgress, getORecommandProgress } from "./request-apis";
 import Switch from "../switch";
 import Textarea from "./textarea";
 import {
-  getO_SETTING, getKR_SETTING, transProgress, getKrOptions, getOptions,
+  getOSetting, getKrSetting, transProgress, getKrOptions, getOptions,
 } from "./helper";
 import {
   ErrorTip, List, Item, Icon, Options, OptionsWrapper,
@@ -15,12 +15,12 @@ import { getLocale } from "../../utils/getLocale";
 import { inputWordTrans } from "../../utils/i18n-front-translate";
 import "./index.scss";
 
-const ProgressModal: React.FC<IProgressModalProps> = (props) => {
+const ProgressModal: FC<IProgressModalProps> = (props:IProgressModalProps) => {
   const {
     maxLength, okrInfo, onClose, onOk, title = window.getLocale("OKR_MyO_Prog_Butt_Update"), visible, isKr,
   } = props;
 
-  const configure = isKr ? getKR_SETTING() : getO_SETTING();
+  const configure = isKr ? getKrSetting() : getOSetting();
 
   const reg = /^[0-9]*[1-9][0-9]*$/;
   const [errorProgress, setErrorProgress] = useState(false);
@@ -34,10 +34,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
   const [selected, setSelected] = useState<number>(
     isKr ? okrInfo.riskLevel : okrInfo.manualRiskLevel,
   );
-  const [ShowKrProgress] = useState(() =>
-    // @ts-ignore
-    window.BSGlobal.OkrAdvancedSetting.KRSetting.ShowKrProgress);
-
+  const [ShowKrProgress] = useState(window?.BSGlobal?.OkrAdvancedSetting?.KRSetting?.ShowKrProgress);
   const [autoUpdate, setUpdate] = useState(true); // 设置自动更新
   const [updateWay, setUpdateWay] = useState(0); // 自动更新方式 0: 关闭， 1: 根据关见成果， 2: 子目标
   const [settingFolded, setSettingFold] = useState(false);
@@ -46,11 +43,11 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
   const getRecommendProgress = async () => {
     const getRecommandHandler = isKr ? getKrRecommandProgress : getORecommandProgress;
     const data = await getRecommandHandler(isKr ? okrInfo.mileStoneId : okrInfo.workId);
-    if (data.Code == 1) {
+    if (data.Code === 1) {
       const { UpdateProgressWay, Progress } = data.Data;
       setRecommandProgressObj(data.Data);
-      setUpdate(UpdateProgressWay != 0);
-      setUpdateWay(UpdateProgressWay == 0 ? 1 : UpdateProgressWay);
+      setUpdate(UpdateProgressWay !== 0);
+      setUpdateWay(UpdateProgressWay === 0 ? 1 : UpdateProgressWay);
       setProgress(Progress);
     }
   };
@@ -66,9 +63,12 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
   useEffect(() => {
     if (!autoUpdate) return;
     const { childOkrProgress, childkrProgress, childEProgress } = recommandProgressObj;
-    updateWay == 1
-      && setProgress(isKr ? transProgress(childEProgress) : transProgress(childkrProgress));
-    updateWay == 2 && setProgress(transProgress(childOkrProgress));
+    if (updateWay === 1) {
+      setProgress(isKr ? transProgress(childEProgress) : transProgress(childkrProgress));
+    }
+    if (updateWay === 2) {
+      setProgress(transProgress(childOkrProgress));
+    }
   }, [updateWay, autoUpdate, recommandProgressObj]);
 
   let descriptionText = (
@@ -131,6 +131,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
       title={title}
       visible={visible}
       width={600}
+      zIndex={2400}
     >
       <List>
         <Item>
@@ -165,7 +166,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
                 <Icon
                   color={option.color}
                   className={
-                    selected == option.id ? "tu-icon-singlebox-avtive" : "tu-icon-singlebox-have"
+                    selected === option.id ? "tu-icon-singlebox-avtive" : "tu-icon-singlebox-have"
                   }
                 />
                 <p>{option.text}</p>
@@ -195,7 +196,7 @@ const ProgressModal: React.FC<IProgressModalProps> = (props) => {
                       <span
                         className={classNames(
                           "auto-update-setting__radio",
-                          `auto-update-setting__radio${updateWay == option.key ? "--selected" : ""
+                          `auto-update-setting__radio${updateWay === option.key ? "--selected" : ""
                           }`,
                         )}
                       />

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

@@ -11,7 +11,7 @@ interface Props {
   data: any;
 }
 
-const ShareContent = function ({ closeModal, getModalRef, data }: Props) {
+const ShareContent = ({ closeModal, getModalRef, data }: Props) => {
   const [shareImg, setShareImg] = useState<string>();
   const [showPublish, setShowPublish] = useState(false);
   return (
@@ -43,12 +43,14 @@ const ShareContent = function ({ closeModal, getModalRef, data }: Props) {
 };
 
 interface ShareProps {
-  shareComponent
   data: any;
   visible:boolean;
+  zIndex?: number;
   onClose: () => void
 }
-const OkrShare: React.FC<ShareProps> = ({ data, visible, onClose }) => {
+const OkrShare: React.FC<ShareProps> = ({
+  data, visible, onClose, zIndex,
+}) => {
   const modalRef = useRef<any>();
 
   return (
@@ -60,6 +62,7 @@ const OkrShare: React.FC<ShareProps> = ({ data, visible, onClose }) => {
         // maskClosable
       onCancel={() => onClose()}
       ref={modalRef}
+      zIndex={zIndex}
     >
       {visible ? (
         <ShareContent
@@ -71,5 +74,7 @@ const OkrShare: React.FC<ShareProps> = ({ data, visible, onClose }) => {
     </Modal>
   );
 };
-
+OkrShare.defaultProps = {
+  zIndex: 1300,
+};
 export default OkrShare;

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

@@ -25,7 +25,7 @@
     //     url("./image/head-background-right1.png");
     background-repeat: no-repeat;
     // background-position: center bottom, left bottom, right bottom;
-    background-image: url("./image/head-background.png");
+    background-image: url('./image/head-background.png');
     background-position: center top;
     // &-mask {
     //     height: 100%;
@@ -135,7 +135,7 @@
         position: relative;
         font-weight: 600;
         &::after {
-          content: "";
+          content: '';
           position: absolute;
           bottom: -14px;
           left: 0;
@@ -253,6 +253,7 @@
           font-weight: 600;
         }
         &__btn {
+          font-size: 14px;
           position: absolute;
           right: 15px;
           top: 60px;
@@ -265,6 +266,7 @@
           cursor: pointer;
           opacity: 0;
           transition: all 0.5s;
+          font-weight: 500;
           &-show {
             top: 37px;
             opacity: 1;
@@ -287,12 +289,12 @@
           }
         }
         &-blue {
-          background-image: url("./image/蓝.png");
+          background-image: url('./image/蓝.png');
           background-color: #f4f8ff;
           color: #2879ff;
         }
         &-red {
-          background-image: url("./image/红.png");
+          background-image: url('./image/红.png');
           background-color: rgba(240, 94, 94, 0.1);
           color: #f05e5e;
         }
@@ -415,7 +417,7 @@
       height: 64px;
       box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
       border-radius: 6px;
-      background-image: url("./image/会员背景.png");
+      background-image: url('./image/会员背景.png');
       background-size: 100%;
       background-repeat: no-repeat;
       background-position: center;
@@ -439,7 +441,7 @@
       width: 100%;
       height: 114px;
       background-color: #fff;
-      background-image: url("./image/广告图片.png");
+      background-image: url('./image/广告图片.png');
       background-size: 100%;
       background-repeat: no-repeat;
       background-position: center;
@@ -536,7 +538,7 @@
     flex-direction: column;
     justify-content: start;
     align-items: center;
-    background-image: url("./image/支付背景.svg");
+    background-image: url('./image/支付背景.svg');
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;

package/src/components/part-notice/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useState, useCallback } from "react";
 import { LocalStorage } from "../../utils/local-storage";
+import { notAllowData } from "./not-allow-data";
 import "./index.scss";
 
 interface Props {
@@ -10,6 +11,7 @@ interface Props {
 
 const preCls = "part-notice";
 const storage = new LocalStorage();
+const tenantId = window.BSGlobal.tenantInfo.Id;
 
 const PartNotice: FC<Props> = ({ storageName, text, link }) => {
   const [visible, setVisible] = useState(() => {
@@ -33,6 +35,7 @@ const PartNotice: FC<Props> = ({ storageName, text, link }) => {
   const handleOpenLink = () => {
     window.open(link, "_target");
   };
+  if (!notAllowData.find((item) => item === tenantId)) return <span />;
   if (!visible) return <span />;
   return (
     <div className={`${preCls}`}>