@titaui/pc 1.9.49 → 1.9.53

package/src/components/hr-header/index.scss

@@ -6,14 +6,14 @@
   box-sizing: border-box;
   padding: 0 30px;
   flex-shrink: 0;
-  background-color: #3464E0;
+  background-color: #3464e0;
   &__title {
     font-size: 14px;
     font-weight: bold;
-    color: #FFFFFF;
+    color: #ffffff;
     margin-right: 98px;
   }
-  &__menu-list{
+  &__menu-list {
     display: flex;
     align-items: stretch;
     flex: 1;
@@ -26,24 +26,44 @@
     justify-content: center;
     margin: 0 5px;
     & > a {
-      color: #FFF;
+      color: #fff;
     }
     img {
       width: 12px;
       height: 12px;
       margin-left: 4px;
-      transition: transform .2s ease;
+      transition: transform 0.2s ease;
     }
   }
   &__user {
     font-size: 14px;
-    color: #FFFFFF;
+    color: #ffffff;
     cursor: pointer;
     & > img {
       width: 10px;
       height: 10px;
       margin-left: 4px;
-      transition: transform .2s ease;
+      transition: transform 0.2s ease;
+    }
+  }
+  &__notice {
+    width: 42px;
+    height: 42px;
+    background: linear-gradient(180deg, #4e90ff 0%, #2879ff 100%);
+    box-shadow: 0px 4px 12px 0px rgba(40, 121, 255, 0.3),
+      inset 0px 0px 6px 2px rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: 36px;
+    right: 24px;
+    z-index: 2;
+    img {
+      width: 32px;
+      height: 42px;
     }
   }
 }
@@ -62,11 +82,10 @@
     align-items: center;
     justify-content: flex-start;
     color: #666666;
-    &:hover{
-      background: #F5F7F9;
-      color: #3464E0;
+    &:hover {
+      background: #f5f7f9;
+      color: #3464e0;
     }
-    
   }
   &::before {
     display: block;
@@ -77,6 +96,6 @@
     border-top: none;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
-    border-bottom: 6px solid #FFF;
+    border-bottom: 6px solid #fff;
   }
-}
+}

package/src/components/hr-header/index.tsx

@@ -87,7 +87,7 @@ function HrHeader({}: Props): ReactElement {
             <div key="more" className={classNames(`${preCls}__item`)}>
               <a>更多</a>
               <img
-                src={require("./arrow.png")}
+                src={require("./img/arrow.png")}
                 style={{ transform: `rotate(${isShowMore ? 180 : 0}deg)` }}
               />
             </div>
@@ -106,7 +106,7 @@ function HrHeader({}: Props): ReactElement {
       >
         <span className={`${preCls}__user`}>
           {getLoginUserInfo().Name}
-          <img src={require("./arrow.png")} style={{ transform: `rotate(${isShowUserMenu ? 180 : 0}deg)` }} />
+          <img src={require("./img/arrow.png")} style={{ transform: `rotate(${isShowUserMenu ? 180 : 0}deg)` }} />
         </span>
       </Popup>
     </div>

package/src/components/mblog/components/MblogAction.tsx

@@ -213,14 +213,14 @@ export default class MblogAction extends PureComponent<Props> {
           )}
         </LeftBtnGroupWrapper>
         <RightBtnGroupWrapper className="action__right">
-          {this.props.isShowSendSms && !isLocal() && (
+          {/* {this.props.isShowSendSms && !isLocal() && (
             <Tooltip container={document.body} content={this.props.sendSmsTipText}>
               <RightBtn onMouseDown={this._sentMsgClickHandler}>
                 <span className={["checkbox-icon", isSendSms ? "tu-icon-check-active" : "tu-icon-xuan"].join(" ")} />
                 <span>{getLocale("Mod_SMS")}</span>
               </RightBtn>
             </Tooltip>
-          )}
+          )} */}
           {
             this.props.isShowRange && (
               <BtnPrivate id="1" data-name="range" className={disableRangeSelect ? "disabled" : ""} disabled={disableRangeSelect}>

package/src/components/nav-top/components/user-message/hrMessage.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import Popup from "../../../popup";
+import ConditionRender from "../../../condition-render";
+import Message from "./msg";
+import { getBSGlobal, getUserInfo } from "../../../../utils/bs-global";
+import { popupAlign } from "./constant";
+import RedPack from "./components/red-pack";
+import { getMessages } from "../../request.apis";
+import Bell from "./images/bell@3x.png";
+import "./index.scss";
+
+const prefixCls = "titaui-user-message";
+
+function HrMessage() {
+  const [infosNum, setInfosNum] = useState(0);
+  const [allData, setAllData] = useState([]);
+  const [redPackNum, setRedPackNum] = useState(0);
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [preData, setPreData] = useState(0);
+  const [firstTab, setFirstTab] = useState("todos");
+
+  const handleShowInfos = () => {
+    setPopupVisible(true);
+  };
+
+  const handleIntervalRequestMessageInfo = () => {
+    getMessages().then((res) => {
+      if (res.Code === 1) {
+        setAllData(res.Data.indicators);
+        const { indicators } = res.Data;
+        const todos = indicators.find((item) => item.type === "todoIndicator");
+        const informs = indicators.find((item) => item.type === "messageIndicator");
+        const replys = indicators.find((item) => item.type === "mLeaveandComment");
+        const reminds = indicators.find((item) => item.type === "Tx");
+        let total = 0;
+        // @与回复的数量在通知里面包含了
+        if (reminds && reminds.value) {
+          total += reminds.value;
+        }
+        if (informs) {
+          total += informs.value;
+        }
+        if (todos) {
+          total += todos.value;
+        }
+        setPreData(infosNum);
+        setInfosNum(total);
+        if (todos && todos.value) {
+          setFirstTab("todos");
+        } else if (informs && !replys && informs.value) {
+          setFirstTab("informs");
+        } else if (replys && informs.value - replys.value === 0) {
+          setFirstTab("replys");
+        } else if (replys && informs.value - replys.value > 0) {
+          setFirstTab("informs");
+        } else if (reminds && reminds.value) {
+          setFirstTab("reminds");
+        } else {
+          setFirstTab("todos");
+        }
+        // 判断是企业勋章
+        const enterpriseMedalMsg = indicators.filter((item) => item.messageType === 1 && item.indicatorType === 1969002);
+        // @ts-ignore
+        enterpriseMedalMsg.length > 0 && window.util.upaasEnterpriseMedal();
+
+        // upaas 勋章
+        const medalDetail = getBSGlobal("medalDetail");
+        // @ts-ignore
+        medalDetail && window.util.upaasMedal()(medalDetail);
+
+        // 红包
+        const mRedPackIndicator = indicators.filter((item) => item.type === "mRedPackIndicator");
+        mRedPackIndicator.length > 0 && setRedPackNum(mRedPackIndicator[0].value);
+
+        // 祝福，拆礼物
+        const blessIndicator = indicators.filter((item) => item.type === "mZhufu");
+        const weeklyReportIndicator = indicators.filter((item) => item.type === "mWeekStatisticIndicator");
+        if (blessIndicator.length === 1) {
+          const userInfo = getUserInfo();
+          const options = {
+            needMask: true,
+            toUserId: userInfo.Id,
+            blessingTime: blessIndicator[0].latestUpdateDate,
+          };
+          // @ts-ignore
+          window.util.openGift(options);
+        }
+        if (weeklyReportIndicator.length) {
+          window?.Talent.app.vent.trigger("open-weekly-report-modal");
+        }
+      }
+    });
+  };
+
+  useEffect(() => {
+    setPreData(infosNum);
+    handleIntervalRequestMessageInfo();
+    setInterval(handleIntervalRequestMessageInfo, 15000);
+  }, []);
+
+  return (
+    <div>
+      <Popup
+        popup={(
+          <Message
+            onItemClick={setPopupVisible}
+            allData={allData}
+            handleIntervalRequestMessageInfo={handleIntervalRequestMessageInfo}
+            firstTab={firstTab}
+            tabs={["todos", "informs", "replys"]}
+          />
+   )}
+        popupVisible={popupVisible}
+        popupTransitionName={classNames(`${prefixCls}__popup-right-bottom`)}
+        popupAlign={popupAlign}
+        mask={false}
+        destroyPopupOnHide
+      >
+        <div className={classNames(`${prefixCls}__hr-notice`)} onClick={handleShowInfos}>
+          <img src={require("./images/notice.png")} />
+        </div>
+      </Popup>
+      <RedPack redPackNum={redPackNum} />
+    </div>
+  );
+}
+export default HrMessage;

package/src/components/nav-top/components/user-message/index.scss

@@ -68,6 +68,60 @@
       }
     }
   }
+  &__popup-right-bottom {
+    &-enter {
+      opacity: 0;
+      animation-duration: 0.2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupInRB;
+        animation-play-state: running;
+      }
+    }
+    &-appear {
+      opacity: 0;
+      animation-duration: 0.2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupInRB;
+        animation-play-state: running;
+      }
+    }
+    &-leave {
+      animation-duration: 0.1s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupOutRB;
+        animation-play-state: running;
+      }
+    }
+  }
+  &__hr-notice {
+    width: 42px;
+    height: 42px;
+    background: linear-gradient(180deg, #4e90ff 0%, #2879ff 100%);
+    box-shadow: 0px 4px 12px 0px rgba(40, 121, 255, 0.3),
+      inset 0px 0px 6px 2px rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: 36px;
+    right: 24px;
+    z-index: 2;
+    img {
+      width: 32px;
+      height: 42px;
+    }
+  }
 }
 
 @keyframes titaPopupInRT {
@@ -84,6 +138,20 @@
   }
 }
 
+@keyframes titaPopupInRB {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 100%;
+    transform: scale(0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scale(1, 1);
+  }
+}
+
 @keyframes titaPopupOutRT {
   0% {
     opacity: 1;
@@ -98,6 +166,20 @@
   }
 }
 
+@keyframes titaPopupOutRB {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scale(1, 1);
+  }
+
+  100% {
+    opacity: 0;
+    transform-origin: 100% 100%;
+    transform: scale(0, 0);
+  }
+}
+
 @keyframes bell-shake {
   5%,
   25%,

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

@@ -14,7 +14,11 @@ const prefixCls = "titaui-user-message-msg";
 
 function UserMessage(props) {
   const {
-    onItemClick, allData, handleIntervalRequestMessageInfo, firstTab,
+    onItemClick,
+    allData,
+    handleIntervalRequestMessageInfo,
+    firstTab,
+    tabs = ["todos", "informs", "replys", "reminds"],
   } = props;
 
   const [remindTotal, setRemindTotal] = useState(0);
@@ -55,48 +59,80 @@ function UserMessage(props) {
           defaultActiveKey={firstTab}
           animated={{ inkBar: true, tabPane: false }}
         >
-          <TabPane
-            tab={(
-              <TabTitle
-                data={getData("todoIndicator")}
-                title={getLocale("Top_Message_title_Todos")}
-                tab="todos"
+          {tabs.includes("todos") && (
+            <TabPane
+              tab={(
+                <TabTitle
+                  data={getData("todoIndicator")}
+                  title={getLocale("Top_Message_title_Todos")}
+                  tab="todos"
+                />
+              )}
+              key="todos"
+            >
+              <Todos onItemClick={onItemClick} />
+            </TabPane>
+          )}
+          {tabs.includes("informs") && (
+            <TabPane
+              tab={(
+                <TabTitle
+                  data={
+                    getData("messageIndicator") - getData("mLeaveandComment")
+                  }
+                  title={getLocale("Menu_Title_Notice")}
+                  tab="informs"
+                />
+              )}
+              key="informs"
+            >
+              <Inform
+                onItemClick={onItemClick}
+                handleIntervalRequestMessageInfo={
+                  handleIntervalRequestMessageInfo
+                }
               />
-            )}
-            key="todos"
-          >
-            <Todos onItemClick={onItemClick} />
-          </TabPane>
-          <TabPane
-            tab={(
-              <TabTitle
-                data={(getData("messageIndicator")) - (getData("mLeaveandComment"))}
-                title={getLocale("Menu_Title_Notice")}
-                tab="informs"
+            </TabPane>
+          )}
+          {tabs.includes("replys") && (
+            <TabPane
+              tab={(
+                <TabTitle
+                  data={getData("mLeaveandComment")}
+                  title={getLocale("Top_Message_title_@&Replies")}
+                  tab="replys"
+                />
+              )}
+              key="replys"
+            >
+              <Reply
+                onItemClick={onItemClick}
+                handleIntervalRequestMessageInfo={
+                  handleIntervalRequestMessageInfo
+                }
               />
-            )}
-            key="informs"
-          >
-            <Inform onItemClick={onItemClick} handleIntervalRequestMessageInfo={handleIntervalRequestMessageInfo} />
-          </TabPane>
-          <TabPane
-            tab={(
-              <TabTitle
-                data={getData("mLeaveandComment")}
-                title={getLocale("Top_Message_title_@&Replies")}
-                tab="replys"
+            </TabPane>
+          )}
+          {tabs.includes("reminds") && (
+            <TabPane
+              tab={(
+                <TabTitle
+                  data={remindTotal}
+                  title={getLocale("Top_Message_title_AlarmReminders")}
+                  tab="reminds"
+                />
+              )}
+              key="reminds"
+            >
+              <Remind
+                onItemClick={onItemClick}
+                handleIntervalRequestMessageInfo={
+                  handleIntervalRequestMessageInfo
+                }
+                handleIgnoreTask={handleIgnoreTask}
               />
-            )}
-            key="replys"
-          >
-            <Reply onItemClick={onItemClick} handleIntervalRequestMessageInfo={handleIntervalRequestMessageInfo} />
-          </TabPane>
-          <TabPane
-            tab={<TabTitle data={remindTotal} title={getLocale("Top_Message_title_AlarmReminders")} tab="reminds" />}
-            key="reminds"
-          >
-            <Remind onItemClick={onItemClick} handleIntervalRequestMessageInfo={handleIntervalRequestMessageInfo} handleIgnoreTask={handleIgnoreTask} />
-          </TabPane>
+            </TabPane>
+          )}
         </Tabs>
       </div>
     </div>

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

@@ -313,7 +313,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
         const data = resp.Data;
         setGeneralPrincipalUser(formatAvatarInfo(data[0].users)[0]);
         setParticipant(formatAvatarInfo(data[1].users));
-        setFollowers(formatAvatarInfo(data[2].users));
+        setFollowers(formatAvatarInfo(data[2]?.users || []));
       }
     });
   }, []);

package/src/components/stop-taking-modal/index.tsx

@@ -9,29 +9,34 @@ const storage = new localStorage();
 
 function StopTakingModel(): ReactElement {
   const [visible, setVisible] = useState<any>(() => {
-    const bol = storage.getItem("stopTaking");
-    if (typeof (storage.getItem("stopTaking")) === "boolean") {
-      return bol;
+    const stopTaking: any = storage.getItem("stopTaking");
+    if (stopTaking?.date) {
+      const oldDate = new Date(stopTaking?.date).getDate();
+      const newDate = new Date().getDate();
+      if (newDate > oldDate) {
+        return true;
+      }
+      return false;
     }
     return true;
   });
 
   const handleClose = useCallback(() => {
     setVisible(false);
-    storage.setItem("stopTaking", false);
+    storage.setItem("stopTaking", { bol: false, date: new Date() });
   }, []);
 
   return (
     <Modal visible={visible} customContent footer={null} width={420}>
-
       <div className={preCls}>
         <div className={`${preCls}__background`} />
-        <span className={`tu-icon-close ${preCls}__close`} onClick={handleClose} />
+        <span
+          className={`tu-icon-close ${preCls}__close`}
+          onClick={handleClose}
+        />
         <div className={`${preCls}__head`}>亲爱的用户</div>
         <div className={`${preCls}__content`}>
-          <div className={`${preCls}__content-line1`}>
-            您好～
-          </div>
+          <div className={`${preCls}__content-line1`}>您好～</div>
           <div className={`${preCls}__content-line2`}>
             为了给您带来更好的安全与稳定体验，Tita
             将在周五晚上进行升级，预计耗时一天，介时将无法使用
@@ -39,10 +44,17 @@ function StopTakingModel(): ReactElement {
           </div>
           <div className={`${preCls}__content-line3`}>
             升级时间：
-            <span style={{ color: "#2879ff", fontWeight: 500 }}>1.21 (周五) 23:00 - 1.22 (周六) 23:59</span>
+            <span style={{ color: "#2879ff", fontWeight: 500 }}>
+              1.21 (周五) 23:00 - 1.22 (周六) 23:59
+            </span>
           </div>
         </div>
-        <div className={`${preCls}__action`} onClick={() => window.open("https://wiki.tita.com/x/RICeAQ")}>了解详情</div>
+        <div
+          className={`${preCls}__action`}
+          onClick={() => window.open("https://wiki.tita.com/x/RICeAQ")}
+        >
+          了解详情
+        </div>
       </div>
     </Modal>
   );

package/src/components/upload-photo-modal/index.tsx

@@ -200,7 +200,7 @@ function ChangePhoto(props: Props) {
                 </ConditionRender>
                 <ConditionRender condition={type === "browser"}>
                   <img src={cropData} className={`${preCls}__preview-browser-img`} />
-                  <span className={`${preCls}__preview-browser-name`}>一体化人才管理云平台</span>
+                  <span className={`${preCls}__preview-browser-name`}>Tita</span>
                   <span className={`${preCls}__preview-browser-title`}>{item?.previewTitle}</span>
                 </ConditionRender>
               </div>

package/src/pages/aha2021/index.tsx

@@ -10,6 +10,7 @@ import { isOfficialSite, isPlatform } from "../../utils/platform";
 import "./index.scss";
 import { getTenantInfo } from "../../utils/helpers";
 import HrHeader from "../../components/hr-header";
+import HrMessage from "../../components/nav-top/components/user-message/hrMessage";
 
 const preCls = "titaui-aha-2021";
 
@@ -87,12 +88,7 @@ function PageLayout(props) {
         </div>
       )}
       {isTencentHr && (
-        <div
-          className={classNames(`${preCls}__notice`)}
-          onClick={onClickNotice}
-        >
-          <img src={require("./img/notice.png")} />
-        </div>
+      <HrMessage />
       )}
       <PointDemo />
     </div>