@titaui/pc 1.7.21 → 1.7.25

package/src/components/weekly-report/index.scss

@@ -0,0 +1,299 @@
+.weekly-report-card__dialog {
+  .rc-dialog-content{
+    background-color: transparent;
+  }
+}
+.weekly-report-card {
+  &-wrapper {
+    overflow: hidden;
+    width: 336px;
+    height: 548px;
+    border-radius: 24px;
+    .weekly-report-card-content {
+      position: relative;
+      top: -66px;
+      left: -20px;
+      transform: scale(0.9);
+    }
+  }
+  &-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 375px;
+    height: 710px;
+    background: linear-gradient(180deg, #B7D5FF 0%, #186FFF 100%);
+  }
+  &__title {
+    width: 220px;
+    height: 40px;
+    margin-top: 48px;
+  }
+  &__date-range {
+    font-size: 14px;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 20px;
+    margin-top: 11px;
+  }
+  &__body {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 335px;
+    height: 452px;
+    background: transparent;
+    padding-top: 55px;
+    border-radius: 12px;
+    background-image: url('./img/body.png');
+    background-size: 100% 100%;
+  }
+  &__avatar {
+    position: absolute;
+    left: 129px;
+    top: 17px;
+    border: 3px solid #fff;
+    border-radius: 50%;
+    & > img {
+      width: 72px;
+      height: 72px;
+    }
+  }
+  &__shadow {
+    position: absolute;
+    box-shadow: 0px 0px 18px 0px rgba(40, 121, 255, 0.4);
+    width: 78px;
+    height: 78px;
+    border-radius: 50%;
+    top: 135px;
+    left: 150px;
+  }
+  &__userName {
+    width: 295px;
+    height: 24px;
+    margin-top: 46px;
+  }
+  &__text {
+    position: relative;
+    z-index: 1;
+    font-size: 18px;
+    font-weight: 500;
+    color: #2879FF;
+    line-height: 26px;
+    margin: 28px 0;
+    max-width: 279px;
+    text-align: center;
+  }
+  &__quote {
+    position: absolute;
+    top: 142px;
+    left: 20px;
+    width: 22px;
+    height: 22px;
+  }
+  &-board {
+    width: 154px;
+    height: 77px;
+    overflow: hidden;
+    position: relative;
+    &__done {
+      position: absolute;
+      width: 154px;
+      height: 154px;
+      border-radius: 50%;
+      background: linear-gradient(360deg, #2879FF 0%, #5B8FF9 50%);
+      overflow: hidden;
+    }
+    &__undone {
+      position: absolute;
+      width: 154px;
+      height: 77px;
+      background-color: rgb(234, 241, 254);
+      transform-origin: center bottom;
+      transform: rotate(90deg);
+      // background: radial-gradient(at bottom center,rgb(234, 241, 254) 0,rgb(234, 241, 254) 77px,transparent 77px);
+    }
+    &__space {
+      position: absolute;
+      width: 2px;
+      height: 77px;
+      bottom: 50%;
+      right: 50%;
+      transform-origin: center bottom;
+      background-color: #FFF;
+    }
+    &__center {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      position: absolute;
+      bottom: -47px;
+      left: 30px;
+      width: 94px;
+      height: 94px;
+      background: #FFF;
+      border-radius: 50%;
+      font-size: 24px;
+      font-weight: 600;
+      color: #141C28;
+      line-height: 24px;
+      &>div {
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        width: 100%;
+        height: 47px;
+      }
+    }
+    &__num {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+  &__comparison {
+    display: flex;
+    align-items: center;
+    margin-top: 6px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #6F7886;
+    line-height: 18px;
+  }
+  &__direction {
+    width: 13px;
+    height: 13px;
+    margin: 0 2px;
+  }
+  &__colleague {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 275px;
+    height: 39px;
+    padding-top: 7px;
+    background-image: url('./img/triangle-pop.png');
+    background-size: 100% 100%;
+    font-size: 14px;
+    font-weight: 400;
+    color: #3F4755;
+    line-height: 24px;
+    margin-top: 6px;
+    &>span {
+      color: #2879FF;
+      margin: 0 5px;
+    }
+  }
+  &__statistics {
+    width: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 29px;
+    
+    &__item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 7px 12px 0;
+      background-position: 0 20px;
+      background-size: 36px 36px;
+      background-repeat: no-repeat;
+    }
+    &__finish {
+      background-image: url('./img/finish.png');
+    }
+    &__praise {
+      background-image: url('./img/praise.png');
+    }
+    &__communication {
+      background-image: url('./img/communication.png');
+    }
+    &__num {
+      font-size: 22px;
+      font-weight: 600;
+      color: #141C28;
+      line-height: 30px;
+    }
+    &__text {
+      font-size: 13px;
+      font-weight: 400;
+      color: #6F7886;
+      line-height: 22px;
+    }
+    &__tips {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 0 4px;
+      height: 17px;
+      background: linear-gradient(180deg, #F99797 0%, #F05E5E 100%);
+      border-radius: 9px 9px 9px 1px;
+      font-size: 11px;
+      color: #FFFFFF;
+      line-height: 17px;
+      text-align: center;
+    }
+  }
+  &__laba {
+    position: absolute;
+    left: 0;
+    top: 118px;
+    width: 94px;
+    height: 65px;
+  }
+  &__bofang {
+    position: absolute;
+    right: 0;
+    top: 130px;
+    width: 62px;
+    height: 66px;
+    z-index: 1;
+  }
+  &__bottom {
+    width: 320px;
+    height: 60px;
+    margin-top: 15px;
+  }
+  &__button-container {
+    display: flex;
+    margin-top: 20px;
+    justify-content: center;
+  }
+  &__download {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 120px;
+    height: 36px;
+    margin-right: 12px;
+    border-radius: 18px;
+    border: 1px solid #FFFFFF;
+    background-color: transparent;
+    font-size: 14px;
+    color: #FFF;
+    &:hover{
+      background-color: transparent;
+    }
+  }
+  &__share {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 120px;
+    height: 36px;
+    border-radius: 18px;
+    border: 1px solid #FFFFFF;
+    background: linear-gradient(360deg, #2879FF 0%, #5B8FF9 100%);
+    font-size: 14px;
+    color: #FFF;
+    border: none;
+    &:hover{
+      background: linear-gradient(360deg, #2879FF 0%, #5B8FF9 100%);
+    }
+  }
+}

package/src/components/weekly-report/index.tsx

@@ -0,0 +1,51 @@
+import React, { ReactElement, useRef,useState } from "react";
+import RectBtn from "../button/rect-btn";
+import CommonShare from '../common-share'
+import Card from "./card";
+import "./index.scss";
+
+interface Props {}
+
+const preCls = "weekly-report-card";
+
+function WeeklyReportPreview({onShare}){
+  const cardRef = useRef();
+  return (
+    <>
+    <div style={{ position: "absolute", left: "-999px" }}>
+        <Card ref={cardRef} />
+      </div>
+      <div className={preCls + "-wrapper"}>
+        <Card />
+      </div>
+      <div className={preCls + "__button-container"}>
+        <RectBtn
+          className={preCls + "__download"}
+          onClick={async () => {
+            const img = await cardRef.current.getImage();
+            const ele = document.createElement("img");
+            ele.src = img;
+            ele.width = 375;
+            ele.style = "position:fixed;z-index:100000;top:0";
+            document.body.appendChild(ele);
+          }}
+        >
+          下载图片
+        </RectBtn>
+        <RectBtn className={preCls + "__share"} onClick={async () => {
+          const img = await cardRef.current.getImage();
+          onShare(img)
+        }}>分享到动态</RectBtn>
+      </div>
+    </>
+  )
+}
+
+function WeeklyReportModal({}: Props): ReactElement {
+  const [visible,setVisible] = useState<boolean>()
+  return (
+    <CommonShare uid={1} visible onClose={()=>setVisible(false)} shareComponent={onShare => <WeeklyReportPreview onShare={onShare}/>}/>
+  );
+}
+
+export default WeeklyReportModal;

package/src/components/weekly-report/statistics.tsx

@@ -0,0 +1,28 @@
+import React, { ReactElement } from 'react'
+import classnames from 'classnames'
+
+interface Props {
+  
+}
+const preCls = 'weekly-report-card__statistics'
+function Statistics({}: Props): ReactElement {
+  return (
+    <div className={preCls}>
+      <div className={classnames(preCls+'__item',preCls+'__finish')}>
+        <div className={preCls+'__num'}>12</div>
+        <div className={preCls+'__text'}>完成任务</div>
+      </div>
+      <div className={classnames(preCls+'__item',preCls+'__praise')}>
+        <div className={preCls+'__num'}>12</div>
+        <div className={preCls+'__text'}>获得点赞</div>
+        <div className={preCls+'__tips'}>Top1</div>
+      </div>
+      <div className={classnames(preCls+'__item',preCls+'__communication')}>
+        <div className={preCls+'__num'}>12</div>
+        <div className={preCls+'__text'}>参与互动</div>
+      </div>
+    </div>
+  )
+}
+
+export default Statistics

package/src/index.d.ts

@@ -1,7 +1,8 @@
 interface Window {
   BSGlobal: any;
   Talent: any;
-  trackAction?: (actionName?: string) => {}
+  trackAction?: (actionName?: string) => {};
+  getLocale: Function;
 }
 
 declare module '*.json' {

package/src/index.js

@@ -82,4 +82,5 @@ export { default as SelectTags } from "./components/select-tags";
 export { default as Cascader } from "./components/cascader";
 export { default as requestApi } from "./utils/request";
 export { default as PointDemo} from './components/point-demo'
-export { default as Scrollbar } from './components/scrollbar'
+export { default as Scrollbar } from './components/scrollbar'
+export { default as WeeklyReport} from './components/weekly-report'

package/src/pages/aha2021/index.scss

@@ -15,7 +15,6 @@
     left: 0;
     width: 100%;
     z-index: 3;
-    box-shadow: 0px 0px 16px 0px #7f91b44d;
   }
 
   &__invite {

package/src/pages/new-okr-list/header/filter.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useState,useEffect } from "react";
 import Tooltip from "../../../components/tooltip";
 import OkrFilterDrawer from "../../../components/okr-filter-drawer";
 import PeriodSelector  from "../../../components/period-selector";
 import { localStorage } from "../../../utils/local-storage";
+import { getQueryString } from "../../../utils/tools";
 import { precls } from "../precls";
 
 const Filter = (props) => {
@@ -24,11 +25,41 @@ const Filter = (props) => {
     }
     return num;
   });
-  const [cycle, setCycle] = useState<any>(
-    useLocalStorage.getItem("okr-filter-cycle") || ""
+  const [cycle, setCycle] = useState<any>(()=>{
+    const routerData = getQueryString()
+    const {annualNum,cycleType,yqmNum} = routerData
+    if(!!annualNum&&!!cycleType&&!!yqmNum){
+      return { annualNum,cycleType,yqmNum }
+    }
+    return useLocalStorage.getItem("okr-filter-cycle") || ""
+    }
+    
   );
 
+  useEffect(()=>{
+    const routerData = getQueryString()
+    const {annualNum,cycleType,yqmNum} = routerData
+    if(!!annualNum&&!!cycleType&&!!yqmNum){
+      let cycle = {annualNum,cycleType,yqmNum}
+      setCycle(cycle)
+      onSearch(cycle)
+    }
+  },[])
+
+  const changeCycleUrl = (s) =>{
+    const routerData = getQueryString()
+    const {annualNum,cycleType,yqmNum,toUserId} = routerData
+    if(!!annualNum&&!!cycleType&&!!yqmNum){
+      let origin = window.location.href.split('?')[0]
+      let url = `${origin}?cycleType=${s.cycleType}&yqmNum=${s.yqmNum}&annualNum=${s.annualNum}&toUserId=${toUserId}`
+      history.pushState('','',url)
+    }
+  }
+  
+
+
   const handleChangeCycle = (s) => {
+    changeCycleUrl(s)
     setCycle(s);
     onSearch &&
       onSearch({
@@ -41,7 +72,7 @@ const Filter = (props) => {
   const openFilterDrawer = () => setFilterDrawerVisible(true);
   return (
     <div>
-      <div className={`${precls}__header-filter`}>
+      <div className={`${precls}__header-filter okr-list__twinkle`} >
         <PeriodSelector
           selected={cycle}
           yearsRange={[2019, 2030]}

package/src/pages/new-okr-list/index.tsx

@@ -33,11 +33,18 @@ const NewOkrList = (props) => {
     targetCategory: "",
     targetSort: "",
   };
-  const filterCycle: any = useLocalStorage.getItem("okr-filter-cycle") || {
-    annualNum: new Date().getFullYear() + "",
-    cycleType: "2",
-    yqmNum: `${moment().quarter()}`,
-  };
+  const filterCycle: any = () =>{
+    const routerData = getQueryString()
+    const {annualNum,cycleType,yqmNum} = routerData
+    if(!!annualNum&&!!cycleType&&!!yqmNum){
+      return { annualNum,cycleType,yqmNum }
+    }
+    return useLocalStorage.getItem("okr-filter-cycle") || {
+      annualNum: new Date().getFullYear() + "",
+      cycleType: "2",
+      yqmNum: `${moment().quarter()}`,
+    };
+  } 
 
   const showWorkExecution =
     getBSGlobal("OkrAdvancedSetting").KRSetting.ShowWorkExecution;
@@ -171,6 +178,17 @@ const NewOkrList = (props) => {
     setCasesVisible(false);
     Toast.Success("成功套用");
   };
+  const triggerAnimation = () => {
+    //@ts-ignore
+    document.querySelector('.tita-okr-list-v2').scrollTop = 0;
+    const twinkleEles = document.getElementsByClassName('okr-list__twinkle');
+    for (let i = 0; i < twinkleEles.length; i++) {
+      twinkleEles[i].classList.add('okr-list__twinkle--animation');
+      setTimeout(() => {
+        twinkleEles[i].classList.remove('okr-list__twinkle--animation');
+      }, 3000);
+    }
+  };
   const onCasesCloseHandler = () => setCasesVisible(false);
   return (
     <Context.Provider
@@ -180,6 +198,7 @@ const NewOkrList = (props) => {
         departmentName,
         departmentId,
         toUserId,
+
         ...query,
       }}
     >
@@ -230,6 +249,15 @@ const NewOkrList = (props) => {
           )}
         </Loading>
         <InitCycleSetting SetCycleModal={SetCycleModal} />
+        {!loading && (
+          <div className='okr-list__check-filter-tips'>
+            找不到OKR？试试
+            <span className='okr-list__check-filter-btn'   onClick={triggerAnimation}>
+              检查
+            </span>
+            顶部筛选条件
+          </div>
+        )}
         <Dialog
           zIndex={99999}
           noHeadLine

package/src/utils/helpers.ts

@@ -36,4 +36,7 @@ export function escapeHtml(str) {
     ''': "'",
   };
   return str.replace(/(&|<|>|"|')/g, str => htmlEscapes[str]);
-}
+}
+export const getLoginUserInfo = () => {
+  return getBSGlobal('loginUserInfo');
+};