@titaui/pc 1.7.35 → 1.7.39

package/src/components/grid-layout/near-visitors/index.scss

@@ -1,52 +0,0 @@
-.nearVisitors-Component-visitor {
-  width: 100%;
-  // height: calc(100%-67px);
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin: 20px 4px;
-  overflow: hidden;
-  &__item {
-    width: 25%;
-    min-width: 53px;
-    height: 88px;
-    margin-bottom: 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-    align-items: center;
-    &__img {
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-    }
-    &__name {
-      margin-top: -2px;
-      color: #3f4755;
-      width: 48px;
-      height: 18px;
-      line-height: 18px;
-      font-size: 12px;
-      text-align: center;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    &__date {
-      height: 18px;
-      text-align: center;
-      color: #89919f;
-      font-size: 12px;
-    }
-  }
-}
-.nearVisitors-Component-noOneText {
-  margin: 0 auto;
-  position: relative;
-  top: 40%;
-  transform: translateY(-50%);
-  width: 168px;
-  text-align: center;
-  font-size: 14px;
-  color: #6f7886;
-}

package/src/components/grid-layout/near-visitors/index.tsx

@@ -1,54 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { CardTitle, Gap, CardContainer } from "../commen-components";
-import Visitor from "./visitor";
-import postComponentForData from "../util/network"
-
-import "./index.scss";
-
-const ComponentId = 'Recent-Visitors-Display'
-
-
-export default function VisitorsComponents() {
-  const [visitorList, setVisitorList] = useState<any>([])
-
-  useEffect(() => {
-    postComponentForData(ComponentId).then(res => {
-      for (let item of res) {
-        switch (item.componentDataProp) {
-          case 'myVisitorInfo':
-            setVisitorList(item.componentData)
-            break;
-        }
-      }
-    })
-  }, [])
-
-
-  return (
-    <CardContainer styles={{ padding: '12px 16px' }}>
-      <CardTitle
-        content='最近访客'
-        iconUrl={require('../image/Recent-visitors.png')}
-      />
-      <Gap />
-      {
-        visitorList.length === 0
-          ? <div className="nearVisitors-Component-noOneText" >最近访问你的人</div>
-          : <div className="nearVisitors-Component-visitor">
-            {
-              // 固定为最近访问的8个用户
-              visitorList.slice(0, 8).map(item => (
-                <Visitor name={item.simpleUserModelV2.name} iconSrc={item.simpleUserModelV2.avatar.large}
-                  dateTime={item.visitTime} avatarColor={item.simpleUserModelV2.avatar.color}
-                  key={item.simpleUserModelV2.userId} userId={item.simpleUserModelV2.userId} />
-              ))
-            }
-            {new Array(10).fill(1).map((item, index) => (
-              <div style={{ width: '25%', height: 0 }} key={index} />
-            ))
-            }
-          </div>
-      }
-    </CardContainer >
-  )
-}

package/src/components/grid-layout/near-visitors/visitor.tsx

@@ -1,47 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import Tooltip from '../../tooltip';
-import Avatar from '../../avatar';
-import { testDayChange } from '../../../utils/date-test-change';
-import { OpenUserName } from '../../../utils/open-data';
-
-interface Props {
-  iconSrc: string;
-  name: string;
-  dateTime: string;
-  avatarColor: string;
-  userId: number;
-}
-
-export default function Visitor(props: Props) {
-  const { iconSrc, name, dateTime, avatarColor, userId } = props;
-
-  const [visitTime, setVisitTime] = useState(testDayChange(dateTime));
-  const toolTipRef = useRef<any>();
-
-  useEffect(() => {
-    setVisitTime(testDayChange(dateTime));
-  }, [dateTime]);
-
-  return (
-    <div className="nearVisitors-Component-visitor__item" ref={toolTipRef}>
-      <Avatar
-        name={name}
-        color={avatarColor}
-        src={iconSrc}
-        size={{ width: 48, textNum: 1, fontSize: 12 }}
-      />
-      <Tooltip
-        overlay={name}
-        placement="top"
-        getTooltipContainer={() => toolTipRef.current.parentNode}
-      >
-        <div className="nearVisitors-Component-visitor__item__name">
-          <OpenUserName name={name} id={userId} />
-        </div>
-      </Tooltip>
-      <div className="nearVisitors-Component-visitor__item__date">
-        {visitTime}
-      </div>
-    </div>
-  );
-}

package/src/components/grid-layout/okr-align/index.tsx

@@ -1,78 +0,0 @@
-import React, { useState, useEffect } from "react";
-import TitaChart from '../../tita-chart'
-import { CardTitle, CardContainer, CardFlexContent, DataItem, EmptyBackGround } from '../commen-components'
-import { toDataList } from '../util/click-link'
-import postComponentForData from "../util/network"
-
-
-const ComponentId = 'Align-OKR-Target'
-
-
-export default function OKRAlignComponent() {
-  const [isMyOKREmpty, setIsMyOKREmpty] = useState(false)
-
-  const [hadAlignOkrNum, setHadAlignOkrNum] = useState(0)
-  const [hadNotAlignOkrNum, setHadNotAlignOkrNum] = useState(0)
-  const [alignPercent, setAlignPercent] = useState(0)
-
-  useEffect(() => {
-    postComponentForData(ComponentId).then(res => {
-      for (let item of res) {
-        switch (item.componentDataProp) {
-          case "MyParentOkrCount":
-            setHadAlignOkrNum(item.componentDataCount)
-            break
-          case "MyNoParentOkrCount":
-            setHadNotAlignOkrNum(item.componentDataCount)
-            break
-        }
-      }
-    })
-  }, [])
-
-  useEffect(() => {
-    if (hadAlignOkrNum + hadNotAlignOkrNum === 0) {
-      !isMyOKREmpty && setIsMyOKREmpty(true)
-    } else {
-      isMyOKREmpty && setIsMyOKREmpty(false)
-      setAlignPercent(Number.parseFloat((hadAlignOkrNum / (hadNotAlignOkrNum + hadAlignOkrNum)).toFixed(2)) * 100)
-    }
-
-  }, [hadAlignOkrNum + hadNotAlignOkrNum])
-
-
-  const handleDataClick = (type) => {
-    toDataList({
-      source: 'align',
-      type: type
-    })
-  }
-
-  return (
-    <CardContainer styles={{ padding: '20px 22px 0' }}>
-      <CardTitle
-        content='OKR对齐'
-        iconUrl={require('../image/align.png')}
-        tips='设置对齐目标，OKR 才能上下支撑'
-      />
-      {
-        isMyOKREmpty
-          ? <EmptyBackGround
-            imgSrc={require('../image/OKRalign-empty.png')}
-            content='对齐 Ta 人目标，支撑企业落地 OKR'
-            behave={{
-              type: 'moreinfo',
-              text: '如何对齐目标',
-              link: 'https://club.tita.com/18179.html'
-            }} />
-          : <CardFlexContent>
-            <TitaChart.LiquidBall PrePercentNum={0} name="对齐率" percentNum={alignPercent} />
-            <DataItem num={hadAlignOkrNum} numColor="#3F4755" label='已对齐' handleDataClick={() => handleDataClick('hadAlign')} />
-            <DataItem num={hadNotAlignOkrNum} numColor="#3F4755" label='未对齐' handleDataClick={() => handleDataClick('hadNotAlign')} />
-          </CardFlexContent>
-      }
-
-      {/* {!isCompanyOKREmpty && <ScrollTips content="对齐了目标" message={updateMessage} />} */}
-    </CardContainer >
-  )
-}

package/src/components/grid-layout/okr-progress/index.tsx

@@ -1,107 +0,0 @@
-import React, { useState, useEffect } from "react";
-import TitaChart from '../../tita-chart'
-import { CardTitle, CardFlexContent, CardContainer, DataItem, EmptyBackGround } from '../commen-components'
-import postComponentForData from "../util/network"
-
-import onClickLinkChangeHash, { toDataList } from "../util/click-link";
-
-import "../index.scss";
-
-const ComponentId = 'OKR-Progress-Display'
-
-
-export default function OKRProgressComponent() {
-  const [isMyOKREmpty, setIsMyOKREmpty] = useState(false)
-
-  const [hadUpdateOkrNum, setHadUpdateOkrNum] = useState(0)
-  const [weekLatelyUpdatekrProgress, setWeekLatelyUpdatekrProgress] = useState(0)
-  const [hadNotUpdateOkrNum, setHadNotUpdateOkrNum] = useState(0)
-  const [UpdatePercent, setUpdatePercent] = useState(0)
-
-
-  useEffect(() => {
-    postComponentForData(ComponentId).then(res => {
-      for (let item of res) {
-        switch (item.componentDataProp) {
-          case "allMyProgressCount":
-            setHadUpdateOkrNum(item.componentDataCount)
-            break
-          case "allMyNoProgressCount":
-            setHadNotUpdateOkrNum(item.componentDataCount)
-            break
-          case "weekLatelyUpdatekrProgress":
-            setWeekLatelyUpdatekrProgress(item.componentDataCount)
-        }
-      }
-    })
-  }, [])
-
-  useEffect(() => {
-    if (hadUpdateOkrNum + hadNotUpdateOkrNum === 0) {
-      !isMyOKREmpty && setIsMyOKREmpty(true)
-    } else {
-      isMyOKREmpty && setIsMyOKREmpty(false)
-      setUpdatePercent(Number.parseFloat((hadUpdateOkrNum / (hadNotUpdateOkrNum + hadUpdateOkrNum)).toFixed(2)) * 100)
-    }
-  }, [hadUpdateOkrNum + hadNotUpdateOkrNum])
-
-
-  const handleDataClick = (type) => {
-    toDataList({
-      source: 'update',
-      type: type
-    })
-  }
-
-  return (
-    <CardContainer styles={{ padding: '20px 22px 0' }}>
-      <CardTitle
-        content="KR进展"
-        iconUrl={require('../image/Progress.png')}
-        tips="我负责的 OKR 下的 KR 更新进展统计"
-      >
-        {!isMyOKREmpty && (
-          <a
-            onClick={() => onClickLinkChangeHash('okr%2Fmanage')}
-            className="grid-component-card-title__behave"
-          >
-            去更新
-          </a>
-        )}
-      </CardTitle>
-      {isMyOKREmpty ? (
-        <EmptyBackGround
-          imgSrc={require('../image/OKRprogress-empty.png')}
-          content="定期反馈工作进展，是一种良好的工作习惯"
-          behave={{
-            type: 'moreinfo',
-            text: '了解如何更新进度',
-            link: 'https://club.tita.com/18179.html',
-          }}
-        />
-      ) : (
-        <CardFlexContent>
-          <TitaChart.LiquidBall
-            PrePercentNum={0}
-            percentNum={UpdatePercent}
-            name="平均完成度"
-          />
-          <DataItem
-            num={hadUpdateOkrNum}
-            updataNum={weekLatelyUpdatekrProgress}
-            numColor="#3F4755"
-            label="已更新"
-            handleDataClick={() => handleDataClick('hadUpdate')}
-          />
-          <DataItem
-            num={hadNotUpdateOkrNum}
-            numColor="#3F4755"
-            label="未更新"
-            handleDataClick={() => handleDataClick('hadNotUpdate')}
-          />
-        </CardFlexContent>
-      )}
-      {/* {!isCompanyOKREmpty && <ScrollTips content="更新了目标" message={updateMessage} />} */}
-    </CardContainer>
-  );
-}

package/src/components/grid-layout/okr-target/index.scss

@@ -1,11 +0,0 @@
-.grid-component-card__pieChart--clickDiv {
-  position: absolute;
-  top: 45%;
-  left: 42%;
-  transform: translate(-50%, -50%);
-  width: 18%;
-  padding-bottom: 18%;
-  cursor: pointer;
-  opacity: 0;
-  z-index: 10;
-}

package/src/components/grid-layout/okr-target/index.tsx

@@ -1,123 +0,0 @@
-import React, { useState, useEffect } from "react";
-import TitaChart from '../../tita-chart';
-import { CardTitle, CardFlexContent, CardContainer, EmptyBackGround } from '../commen-components'
-import postComponentForData from "../util/network"
-import { toDataList, toOkrTarget } from '../util/click-link'
-
-import './index.scss'
-
-type PieData = PieDataItem[]
-
-interface PieDataItem {
-  type: string;
-  value: number;
-}
-
-const ComponentId = 'OKR-Target-Display'
-
-export default function OKRTargetComponent() {
-  const [isMyOKREmpty, setIsMyOKREmpty] = useState(false)
-  const [pieData, setPieData] = useState<PieData>([])
-
-  useEffect(() => {
-    postComponentForData(ComponentId).then(res => {
-      const data: PieData = []
-      for (let item of res) {
-        switch (item.componentDataProp) {
-          case "MyNormalOkrCount":
-            data.push({
-              type: '正常',
-              value: item.componentDataCount
-            })
-            break
-          case "MyRiskOkrCount":
-            data.push({
-              type: '有风险',
-              value: item.componentDataCount
-            })
-            break
-          case "MyDlayOkrCount":
-            data.push({
-              type: '已延期',
-              value: item.componentDataCount
-            })
-            break
-          case "MyFinishOkrCount":
-            data.push({
-              type: '已结束',
-              value: item.componentDataCount
-            })
-            break
-        }
-      }
-      setPieData(data)
-    })
-  }, [])
-
-  useEffect(() => {
-    let totalData = 0
-    pieData.map(item => totalData += item.value)
-    if (totalData === 0) {
-      !isMyOKREmpty && setIsMyOKREmpty(true)
-    } else {
-      isMyOKREmpty && setIsMyOKREmpty(false)
-    }
-  }, [pieData])
-
-  const handlePieClick = (type = 'all') => {
-    toDataList({
-      source: 'target',
-      type: type
-    })
-  }
-
-  const handlePieLegendClick = (event) => {
-    const target = event.target.attrs.text
-    switch (target) {
-      case '正常':
-        handlePieClick('normalOkr')
-        break
-      case '有风险':
-        handlePieClick('riskOkr')
-        break
-      case '已延期':
-        handlePieClick('dalyOkr')
-        break
-      case '已结束':
-        handlePieClick('endOkr')
-        break
-    }
-
-  }
-
-
-  return (
-    <CardContainer styles={{ padding: '20px 22px 0' }}>
-      <CardTitle content="OKR 目标" iconUrl={require('../image/targer.png')} />
-      {isMyOKREmpty ? (
-        <EmptyBackGround
-          imgSrc={require('../image/OKRtarget-empty.png')}
-          content="高效工作从第一个OKR设定开始"
-          behave={{
-            type: 'button',
-            text: '创建OKR',
-            onClick: (e) => toOkrTarget(),
-          }}
-        />
-      ) : (
-        <CardFlexContent>
-          <TitaChart.Pie
-            Data={pieData}
-            size={{ height: '90%', width: '100%' }}
-            handlePieLegendClick={handlePieLegendClick}
-          />
-          <div
-            className="grid-component-card__pieChart--clickDiv"
-            onClick={() => handlePieClick()}
-          />
-        </CardFlexContent>
-      )}
-      {/* {!isCompanyOKREmpty && <ScrollTips content="设定了目标" message={updateMessage} />} */}
-    </CardContainer>
-  );
-}

package/src/components/grid-layout/over-view/index.scss

@@ -1,10 +0,0 @@
-.OverviewComponent-img {
-  width: 267px;
-  height: 235px;
-}
-.OverviewComponent-dataContent {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}

package/src/components/grid-layout/over-view/index.tsx

@@ -1,88 +0,0 @@
-import React, { useState, useEffect, Fragment } from "react";
-import { DataItem, CardContainer, CardFlexContent, Advice } from "../commen-components";
-import postComponentForData, { getIsCompanyOKREmpty } from '../util/network'
-import { toDataList } from '../util/click-link'
-
-import './index.scss'
-
-
-const ComponentId = 'Overview-All-OKRs-E'
-
-
-export default function OverviewComponent() {
-
-  const [isMyOKREmpty, setIsMyOKREmpty] = useState(false)
-  const [isCompanyOKREmpty, setIsCompanyOKREmpty] = useState(false)
-
-  const [allOkrCount, setAllOkrCount] = useState(0)
-  const [allOkrInWeekCount, setAllOkrInWeekCount] = useState(0)
-  const [allMyKrCount, setAllMyKrCount] = useState(0)
-  const [allMyTaskCount, setAllMyTaskCount] = useState(0)
-  // const [allOkrInWeekCount, setAllOkrInWeekCount] = useState(0)
-  // const [allOkrInWeekCount, setAllOkrInWeekCount] = useState(0)
-
-
-  useEffect(() => {
-    getIsCompanyOKREmpty().then(res => {
-      setIsCompanyOKREmpty(!res.obj)
-    })
-
-    postComponentForData(ComponentId).then(res => {
-      for (let item of res) {
-        switch (item.componentDataProp) {
-          case "allOkrCount":
-            setAllOkrCount(item.componentDataCount)
-            break
-          case "allOkrInWeekCount":
-            setAllOkrInWeekCount(item.componentDataCount)
-            break
-          case "allMyKrCount":
-            setAllMyKrCount(item.componentDataCount)
-            break
-          case "allMyTaskCount":
-            setAllMyTaskCount(item.componentDataCount)
-            break
-        }
-      }
-    })
-  }, [])
-
-  useEffect(() => {
-    if (allOkrCount + allMyKrCount + allMyTaskCount === 0) {
-      !isMyOKREmpty && setIsMyOKREmpty(true)
-    } else {
-      isMyOKREmpty && setIsMyOKREmpty(false)
-    }
-  }, [allOkrCount + allMyKrCount + allMyTaskCount])
-
-  const handleTargetClick = () => {
-    toDataList({
-      source: 'target',
-      type: 'all'
-    })
-  }
-  return (
-    <CardContainer styles={{ padding: '20px 22px 0', backgroundImage: ` url(${require('../image/card1-background.png')})` }}>
-      {isMyOKREmpty &&
-        <Advice
-          styles={{ marginLeft: '50%', transform: 'translateX(-50%)' }}
-          link='#okr%2Fmanage'
-        >
-          <img src={require('../image/advise.svg')} />
-          {isCompanyOKREmpty ? ' 立即设置成为企业下「第一个」设定OKR的人' : '高效工作从第一个OKR设定开始'}
-        </Advice>
-      }
-      <CardFlexContent styles={{ height: '75%', top: `${isMyOKREmpty && '20px'}` }}>
-        <Fragment>
-          <img className="OverviewComponent-img" src={require('../image/okrBirth.png')} />
-          <div className="OverviewComponent-dataContent">
-            <DataItem num={allOkrCount} numColor="#3F4755" label='目标' updataNum={allOkrInWeekCount} handleDataClick={handleTargetClick} />
-            <DataItem num={allMyKrCount} numColor="#3F4755" label='关键成果' updataNum={0} />
-            <DataItem num={allMyTaskCount} numColor="#3F4755" label='执行任务' updataNum={0} />
-          </div>
-        </Fragment>
-      </CardFlexContent>
-    </CardContainer >
-  )
-
-}

package/src/components/grid-layout/personal-info/index.scss

@@ -1,121 +0,0 @@
-.PersonalInfoComponent-PersonalInfo {
-  &__photoMask {
-    width: 150%;
-    height: 187px;
-    position: absolute;
-    top: -23px;
-    left: -25%;
-    border-radius: 50%;
-    overflow: hidden;
-  }
-  &__maskimg {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    transform: translateY(-34px);
-    height: 0;
-    width: 67%;
-    padding-bottom: 67%;
-    &-mask {
-      height: 100%;
-      width: 100%;
-      background: linear-gradient(180deg, rgba(63, 71, 85, 0) 0%, rgba(63, 71, 85, 0.7) 100%);
-      position: absolute;
-      z-index: 1;
-    }
-    &-img {
-      height: 100%;
-      width: 100%;
-      position: absolute;
-    }
-  }
-  &__personInfo {
-    position: relative;
-    margin: 0 auto;
-    margin-top: 25px;
-    text-align: center;
-    width: 100%;
-    height: 139px;
-    z-index: 2;
-    // &__avatar-text,
-    // &__avatar-img {
-    //   margin: 0 auto;
-    //   width: 53px;
-    //   height: 53px;
-    //   border-radius: 50%;
-    //   border: 2px solid #fff;
-    // }
-    // &__avatar-text {
-    //   background-color: #2879ff;
-    //   text-align: center;
-    //   line-height: 58px;
-    //   color: #fff;
-    //   font-size: 24px;
-    // }
-    &--avatar {
-      margin: 0 auto;
-      width: 56px;
-      height: 56px;
-      border-radius: 50%;
-      box-sizing: content-box !important;
-      border: 1px #fff solid;
-    }
-    &__info {
-      margin-top: 10px;
-      height: 24px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-      font-size: 18px;
-      & > i {
-        margin: auto 8px;
-        display: inline-block;
-        width: 3px;
-        height: 3px;
-        border-radius: 50%;
-        background-color: #fff;
-      }
-      & > span {
-        max-width: 40%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: clip;
-      }
-    }
-    &__label {
-      margin-top: 8px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      img {
-        margin-right: 7px;
-      }
-    }
-  }
-  &__fansinfo {
-    width: 100%;
-    height: calc(100% - 216px);
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    &__like,
-    &__attention {
-      display: flex;
-      align-items: center;
-      color: #3f4755;
-      font-size: 12px;
-      & > img {
-        margin-right: 7px;
-        width: 15px;
-        height: 15px;
-      }
-      b {
-        margin-right: 4px;
-        color: #3f4755;
-        font-size: 18px;
-      }
-    }
-  }
-}