@titaui/pc 1.7.22 → 1.7.23

package/src/pages/home/components/data-list/table/columns/progressAndRisk.tsx

@@ -1,54 +0,0 @@
-import React, { ReactElement, useState, useEffect, useRef } from 'react'
-import Tooltip from '../../../../../../components/tooltip'
-interface Props {
-  progress: number;
-  riskLevel: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  status: number;
-}
-
-const preCls = "home-page-data-list-columns__progress";
-
-function ProgressAndRiskColumn({ progress, riskLevel, status }: Props): ReactElement {
-
-  const [colors, setColors] = useState<string[]>([])
-  const [tipText, setTipText] = useState('')
-  const toolTipRef = useRef<any>()
-  useEffect(() => {
-    if (status === 2) {
-      setColors(['#96A9C4', '#7585A2'])
-      setTipText('已结束')
-    } else {
-      switch (riskLevel) {
-        case 0: case 1: case 6:
-          setColors(['#94C2FD', '#5B8FF9'])
-          setTipText('正常')
-          break;
-        case 2:
-          setColors(['#FFCE6B', '#FAAD14'])
-          setTipText('有风险')
-          break;
-        case 3: case 5:
-          setColors(['#FF9C9C', '#F36E6E'])
-          setTipText('已延期')
-          break;
-        case 4:
-          setColors(['#96A9C4', '#7585A2'])
-          setTipText('已结束')
-          break;
-      }
-    }
-  }, [riskLevel, status])
-
-
-  return (
-    <div className={`${preCls}`} ref={toolTipRef}>
-      <Tooltip overlay={tipText} placement="top" getTooltipContainer={() => toolTipRef.current && toolTipRef.current.parentNode}>
-        <div className={`${preCls}__prgress__tag`}
-          style={{ backgroundImage: `linear-gradient(180deg, ${colors[0]} 0%, ${colors[1]} 100%)` }} />
-      </Tooltip>
-      {progress}%
-    </div>
-  )
-}
-
-export default ProgressAndRiskColumn

package/src/pages/home/components/data-list/table/columns/tag.tsx

@@ -1,17 +0,0 @@
-import React, { ReactElement } from 'react'
-import classnames from 'classnames'
-
-interface Props {
-  color: 'red' | 'green'
-}
-const preCls = 'home-page-data-list-columns__tag';
-
-const TagColumn: React.FC<Props> = ({ color, children }) => {
-  return (
-    <div className={classnames(preCls, `${preCls}--${color}`)}>
-      {children}
-    </div>
-  )
-}
-
-export default TagColumn

package/src/pages/home/components/data-list/table/columns/updateTime.tsx

@@ -1,25 +0,0 @@
-import React, { ReactElement } from 'react'
-import { testDateDiff, testDayChange } from '../../../../../../utils/date-test-change'
-
-
-function UpdateTime({ updateTime }): ReactElement {
-
-  const dayDiff = updateTime && testDateDiff(updateTime)
-  return (
-    <div style={{
-      color: dayDiff > 4 ? '#f05e5e' : '#3F4755'
-    }}>
-      {
-        updateTime && updateTime.length
-          ? dayDiff > 30
-            ? testDayChange(updateTime)
-            : dayDiff === 0
-              ? '刚刚更新'
-              : `${dayDiff}天前`
-          : '—'
-      }
-    </div>
-  )
-}
-
-export default UpdateTime

package/src/pages/home/components/data-list/table/columns/user.tsx

@@ -1,26 +0,0 @@
-import React, { ReactElement } from 'react'
-import Avatar from '../../../../../../components/avatar'
-import { UserInfo } from '../index'
-
-import './index.scss'
-
-interface Props { userInfo: UserInfo }
-
-const preCls = "home-page-data-list-columns__user";
-
-function UserColumn(props: Props): ReactElement {
-  const { name, userId, avatarColor, avatarImg } = props.userInfo
-  return (
-    <Avatar.Name
-      name={name}
-      userId={userId}
-      color={avatarColor}
-      src={avatarImg}
-      style={{ marginRight: 4 }}
-      textClass={preCls + '__name'}
-      textWidth={92}
-    />
-  );
-}
-
-export default UserColumn

package/src/pages/home/components/data-list/table/data-list-interface.ts

@@ -1,55 +0,0 @@
-export interface TableProps {
-  type: string;
-  cycleTime: Cycle;
-  source: string;
-}
-export interface Cycle {
-  name: string;
-  yearNum: string;
-  cycleType: string;
-  yqmNum: string;
-}
-export interface AlignData {
-  columnId: number;
-  okrName: string;
-  cycleTime: string;
-  userInfo: UserInfo;
-  riskLevel: 0 | 1 | 2 | 3;
-  status: number;
-  progress: number;
-  typeName: '已对齐' | '未对齐';
-  behave: React.MouseEventHandler<HTMLAnchorElement>;
-}
-export interface UpdateData {
-  columnId: number;
-  okrType: 'O' | 'KR';
-  okrName: string;
-  cycleTime: string;
-  userInfo: UserInfo;
-  riskLevel: 0 | 1 | 2 | 3;
-  status: number;
-  progress: number;
-  updateTime: string;
-  behave: React.MouseEventHandler<HTMLAnchorElement>;
-}
-export interface MyOkrData {
-  columnId: number;
-  okrType: 'O' | 'KR';
-  okrName: string;
-  cycleTime: string;
-  userInfo: UserInfo;
-  riskLevel: 0 | 1 | 2 | 3;
-  status: number;
-  progress: number;
-  updateTime: string;
-  createDate: string;
-  behave: React.MouseEventHandler<HTMLAnchorElement>;
-}
-export interface UserInfo {
-  name: string;
-  avatarImg: string;
-  userId: number;
-  avatarColor: string;
-}
-
-export type TableData = MyOkrData | UpdateData | AlignData

package/src/pages/home/components/data-list/table/empty-table.tsx

@@ -1,29 +0,0 @@
-import React, { Fragment } from "react";
-
-
-const preCls = 'homepage-datalist__main__listEmpty'
-
-export interface EmptyInfo {
-  imageSrc: string;
-  link: string;
-  emptyText: string;
-  linkText: string;
-}
-
-
-const TableEmptyBackground = (props: { emptyInfo: EmptyInfo }) => {
-
-  const { imageSrc, link, emptyText, linkText } = props.emptyInfo
-
-  return (
-    <div className={`${preCls}`} >
-      <img src={imageSrc} />
-      <div className={`${preCls}--text`}>{emptyText}</div>
-      <a className={`${preCls}--link`} href={link}>
-        <b className='tu-icon-shoushi' />{linkText}
-      </a>
-    </div >
-  )
-}
-
-export default TableEmptyBackground

package/src/pages/home/components/data-list/table/index.tsx

@@ -1,57 +0,0 @@
-import React, { useEffect, useState, Fragment, useRef } from 'react'
-import { TableProps, TableData } from './data-list-interface'
-import getDataBySource, { getColumsBySource, getEmptyBySource } from './utils-function'
-import TableEmptyBackground, { EmptyInfo } from './empty-table'
-import Table from '../../../../../components/table'
-
-const preCls = 'homepage-datalist__main'
-
-const HomeDataTable = (props: TableProps) => {
-
-  const { type, cycleTime, source } = props
-
-
-  const [tableData, setTableData] = useState<TableData[]>([])//列表数据
-  const [pageSize, setPageSize] = useState(50)//一页多少行
-  const [total, setTotal] = useState(0)//一共有多少（后端返回）
-  const [pageNum, setPageNum] = useState(1)//第几页
-  const [isLoading, setIsLoading] = useState(false)//是否正在加载
-
-
-  useEffect(() => {
-    setIsLoading(true)
-    getDataBySource(source, { type, cycleTime, pageNum, pageSize })
-      .then(res => {
-        setIsLoading(false)
-        setTableData(res.dataList)
-        setTotal(res.dataTotal)
-      })
-      .catch(err => {
-        console.log(err);
-      })
-  }, [type, cycleTime, pageNum, pageSize])
-
-
-
-  return (
-    <Fragment>
-      {isLoading
-        ? <div className={`${preCls}__listLoading`}>
-          <img src={require('../../../image/table-loading.gif')} />
-        </div>
-        : tableData.length
-          ? <Table
-            columns={getColumsBySource(source)}
-            tableData={tableData}
-            tableLayout={'fixed'} total={total}
-            pageNum={pageNum} setPageNum={setPageNum}
-            pageSize={pageSize} setPageSize={setPageSize}
-          />
-          : source && <TableEmptyBackground emptyInfo={getEmptyBySource(source) as EmptyInfo} />
-      }
-    </Fragment>
-
-  )
-}
-
-export default HomeDataTable

package/src/pages/home/components/data-list/table/utils-function.ts

@@ -1,179 +0,0 @@
-import { postForTableList } from '../../../../../utils/request'
-import { TableData } from './data-list-interface'
-import drawerManager from '../../../../../components/drawer-manager'
-import { okrAlignColumns, okrUpdateColumns, myOkrColumns } from './columns'
-
-//日期参数转换
-const cycleFilterModels = (cycleTime) => {
-  const res = [{
-    "CptFilterName": "cycle_type",
-    "CptFilterValue": cycleTime.cycleType === '-1' ? '0,1,2,3,4,5' : cycleTime.cycleType
-  },]
-  if (cycleTime.cycleType !== '-1') {
-    res.push({
-      "CptFilterName": "annual_num",
-      "CptFilterValue": cycleTime.yearNum
-    })
-  }
-  if (cycleTime.cycleType === '2' || cycleTime.cycleType === '3' || cycleTime.cycleType === '4' || cycleTime.cycleType === '5') {
-    res.push({
-      "CptFilterName": "yqm_num",
-      "CptFilterValue": cycleTime.yqmNum
-    })
-  }
-  return res
-}
-//okr参数转换
-const getComponentDataProp = {
-  'all': 'allOkr',
-  'hadAlign': 'MyParentOkrCount',
-  'hadNotAlign': 'MyNoParentOkrCount',
-  'hadUpdate': 'allMyProgressCount',
-  'hadNotUpdate': 'allMyNoProgressCount',
-  'normalOkr': 'MyNormalOkrCount',
-  'riskOkr': 'MyRiskOkrCount',
-  'dalyOkr': 'MyDlayOkrCount',
-  'endOkr': 'MyFinishOkrCount'
-}
-// 周期转换
-const cycleTimeDisplay = (cycleType, annualNum, yqmNum): string => {
-  switch (cycleType) {
-    case 1:
-      return `${annualNum}年`
-    case 2:
-      return `${annualNum}年 第${numberToWord(yqmNum)}季度`
-    case 3:
-      return `${annualNum}年 ${yqmNum}月`
-    case 4:
-      return `${annualNum}年 ${yqmNum}-${(yqmNum + 1) % 12 || 12}月`
-    case 5:
-      return `${annualNum}年 ${yqmNum == 1 ? '上' : '下'}半年`
-    default:
-      return '-'
-  }
-}
-//数字大小写转换
-const numberToWord = (num) => {
-  const arr = ['一', '二', '三', '四']
-  return arr[num - 1]
-}
-//ComponentId转换
-const ComponentIdMap = {
-  align: 'Align-OKR-Target',
-  update: 'OKR-Progress-Display',
-  target: 'OKR-Target-Display'
-}
-
-
-export default (source, params): Promise<{ dataList: TableData[], dataTotal: number }> => {
-  const { type, cycleTime, pageNum, pageSize } = params
-
-  return new Promise((resolve, reject) => {
-    let dataList: TableData[] = []
-    let dataTotal = 0
-
-    postForTableList({
-      "ComponentId": ComponentIdMap[source],
-      "ComponentDataProp": getComponentDataProp[type],
-      "PageSize": pageSize,
-      "PageNum": pageNum,
-      "FilterModels": cycleFilterModels(cycleTime)
-    }).then(res => {
-      if (res.Code == 1) {
-        const listData: TableData[] = []
-        for (let item of res.Data.componentData) {
-          listData.push({
-            columnId: item.workId,
-            okrType: 'O',
-            okrName: item.workName,
-            cycleTime: cycleTimeDisplay(item.cycleType, item.annualNum, item.yqmnum),
-            userInfo: {
-              name: item.principalUser.name,
-              avatarImg: item.principalUser.avatar.medium,
-              userId: item.principalUser.userId,
-              avatarColor: item.principalUser.avatar.color
-            },
-            riskLevel: item.manualRiskLevel,
-            progress: item.progress,
-            typeName: item.parentId > 0 || item.parentKrId > 0 ? '已对齐' : '未对齐',
-            updateTime: item.lastUpdatedDate,
-            status: item.status,
-            createDate: item.CreateDate,
-            behave: () => drawerManager.open('okrDetail', { okrId: item.workId })
-          })
-          if (item.Krs.length && source !== 'align') {
-            for (let item1 of item.Krs) {
-              listData.push({
-                columnId: item1.mileStoneId,
-                okrType: 'KR',
-                okrName: item1.mileStoneName,
-                cycleTime: `${item1.startDate.slice(-5)}~${item1.endDate.slice(-5)}`,
-                userInfo: {
-                  name: item1.user.name,
-                  avatarImg: item1.user.avatar.medium,
-                  userId: item1.user.userId,
-                  avatarColor: item1.user.avatar.color
-                },
-                riskLevel: item1.manualRiskLevel,
-                progress: item1.progress,
-                status: item1.status,
-                updateTime: item1.progressDescriptionDate,
-                createDate: item1.CreateDate,
-                behave: () => drawerManager.open('krDetail', { krId: item1.mileStoneId })
-              })
-            }
-          }
-        }
-        dataList = listData
-        dataTotal = res.Data.total
-        resolve({ dataList, dataTotal })
-      } else {
-        reject('请求失败')
-      }
-    })
-  })
-
-}
-
-export const getColumsBySource = (source) => {
-  switch (source) {
-    case 'align':
-      return okrAlignColumns
-      break;
-    case 'update':
-      return okrUpdateColumns
-      break;
-    case 'target':
-      return myOkrColumns
-      break;
-  }
-}
-
-export const getEmptyBySource = (source) => {
-  switch (source) {
-    case 'align':
-      return {
-        imageSrc: require('../../../image/align-list-empty.png'),
-        link: 'https://club.tita.com/18150.html',
-        emptyText: '暂无对齐',
-        linkText: '如何对齐'
-      }
-      break;
-    case 'update':
-      return {
-        imageSrc: require('../../../image/update-list-empty.png'),
-        link: 'https://club.tita.com/18179.html',
-        emptyText: '暂无更新',
-        linkText: '如何更新'
-      }
-      break;
-    case 'target':
-      return {
-        imageSrc: require('../../../image/myokr-list-empty.png'),
-        link: '#okr%2Fmanage',
-        emptyText: '「暂无 OKR 数据」',
-        linkText: '去查看'
-      }
-      break;
-  }
-}

package/src/pages/home/components/guide/index.scss

@@ -1,151 +0,0 @@
-
-.home-page-guide-cover {
-  position: absolute;
-  z-index: 10;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: #FFF;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 1;
-  transition: all .3s ease;
-  transform-origin: calc(100% - 39px) 23px;
-  &--leaving {
-    opacity: 0;
-    transform: scale(0);
-  }
-  &__guide-img {
-    width: 430px;
-    height: 504px;
-  }
-  &__guide-steps {
-    display: flex;
-    flex-direction: column;
-    margin-left: 70px;
-    height: 504px;
-  }
-  &__guide-title {
-    font-size: 24px;
-    font-weight: 600;
-    color: #141C28;
-    line-height: 34px;
-    background-image: url('../../image/title.png');
-    background-size: 104px 13px;
-    background-position: left bottom;
-    background-repeat: no-repeat;
-    margin-bottom: 32px;
-  }
-  &__more-link {
-    font-size: 14px;
-    font-weight: 400;
-    color: #2879FF;
-    line-height: 22px;
-    display: flex;
-    align-items: center;
-    & > .tu-icon-shoushi {
-      margin-right: 8px;
-      font-size: 18px;
-    }
-  }
-  
-}
-.home-page-guide-cover__wrapper {
-  position: absolute;
-  z-index: 10;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  transform-origin: calc(100% - 39px) 23px;
-  .tu-icon-canceled {
-    position: absolute;
-    top: 23px;
-    right: 39px;
-    z-index: 20;
-    cursor: pointer;
-    &--leaving {
-      animation:turn 1s linear infinite;    
-    }
-  }
-}
-.home-page-guide-step {
-  display: flex;
-  margin-bottom: 13px;
-  &__left {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-right: 20px;
-  }
-  &__step-icon {
-    width: 32px;
-    height: 32px;
-
-  }
-  &__arrow {
-    width: 18px;
-    height: 40px;
-    margin-top: 13px;
-  }
-  &__title {
-    line-height: 32px;
-    font-size: 18px;
-    font-weight: 600;
-    color: #3F4755;
-    cursor: pointer;
-    &:hover {
-      color: #2879FF;
-    }
-    & > i {
-      font-size: 14px;
-      margin-left: 5px;
-      cursor: pointer;
-      
-    }
-  }
-  &__link {
-    font-size: 14px;
-    font-weight: 400;
-    color: #6F7886;
-    line-height: 22px;
-    margin-top: 4px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    &:hover{
-      &> span {
-        color: #2879ff;
-      }
-    }
-  }
-  &__video-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-}
-.home-page-guide-cover__btn {
-  position: absolute;
-  top: 23px;
-  right: 22px;
-  white-space: nowrap;
-  font-size: 14px;
-  color: #3F4755;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  z-index: 20;
-  &:hover {
-    color: #2879ff;
-  }
-  & > i {
-    color: #F6BD16;
-    margin-right: 5px;
-    font-size: 20px;
-    position: relative;
-    top: -2px;
-  }
-}

package/src/pages/home/components/guide/index.tsx

@@ -1,94 +0,0 @@
-import { getUserInfo } from "../../../../utils/bs-global";
-import React, { ReactElement, useState, useEffect } from "react";
-import Queue from "rc-queue-anim";
-import "./index.scss";
-import HomeGuideStepItem from "./stepItem";
-
-interface Props {}
-
-const storageKey = "okr_home_page_guide_auto_show_uid:";
-const prefixCls = "home-page-guide-cover";
-
-function HomePageGuide({}: Props): ReactElement {
-  const [visible, setVisible] = useState(false);
-  useEffect(() => {
-    const autoShow = localStorage.getItem(storageKey + getUserInfo().Id);
-    if (autoShow !== "false") {
-      setVisible(true);
-      localStorage.setItem(storageKey + getUserInfo().Id, "false");
-    }
-  }, []);
-
-  return (
-    <Queue type={['scale']}>
-      {!visible && (
-        <div
-          className={prefixCls + "__btn"}
-          key="btn"
-          onClick={() => setVisible(true)}
-        >
-          <i className="tu-icon-T-zhinan" />
-          如何使用 Tita
-        </div>
-      )}
-      {visible && (
-        <div className={prefixCls + "__wrapper"} key="guide">
-          <div className={prefixCls}>
-            <img
-              src={require("../../image/okrguide.png")}
-              className={prefixCls + "__guide-img"}
-            />
-            <div className={prefixCls + "__guide-steps"}>
-              <div className={prefixCls + "__guide-title"}>
-                四步上手 Tita OKR
-              </div>
-              <HomeGuideStepItem
-                title="设定 OKR"
-                step={1}
-                linkName="教程: 如何在 Tita 上设定 OKR"
-                href="https://club.tita.com/18150.html"
-              />
-              <HomeGuideStepItem
-                title="对齐 OKR"
-                step={2}
-                linkName="教程: 如何在 Tita 上对齐 OKR"
-                href="https://club.tita.com/18150.html"
-              />
-              <HomeGuideStepItem
-                title="任务执行支撑目标达成"
-                step={3}
-                linkName="教程: 如何在 Tita 上分解任务"
-                href="https://club.tita.com/18165.html"
-              />
-              <HomeGuideStepItem
-                title="更新进度"
-                step={4}
-                linkName="教程: 如何在 Tita 上更新 OKR"
-                href="https://club.tita.com/18179.html"
-                isFinalStep
-              />
-              <div style={{ flex: 1 }} />
-              <a
-                href="https://club.tita.com/18664.html"
-                className={prefixCls + "__more-link"}
-                target="_blank"
-              >
-                <i className="tu-icon-shoushi" />
-                更多产品培训课程
-              </a>
-            </div>
-          </div>
-          <div
-            className="tu-icon-canceled"
-            onClick={() => {
-              // api.start({coverScale:0,config:{velocity:100}})
-              setVisible(false);
-            }}
-          />
-        </div>
-      )}
-    </Queue>
-  );
-}
-
-export default HomePageGuide;