@titaui/pc 1.7.71 → 1.7.75

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

@@ -1,375 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import ScrollBar from 'react-perfect-scrollbar'
-import CaseLibraryHeader from './okrcases-components/caseLibray-header'
-import CaseLibraryNav from './okrcases-components/caseLibrary-nav'
-import CaseLibraryMain from './okrcases-components/caseLibrary-main'
-import { SubmitDialog, PayDialog } from './okrcases-components/submitOkr-dialog'
-import { postForCases, getLabels, postSearchCases, gettotalNumber, getIsHadBuyOKRcases } from './server/network'
-
-import './index.scss';
-import './new-ui.scss';
-
-interface Props {
-  onApplyTpl: Function;
-  onClose?: Function;
-}
-
-export type NavList = NavItem[]
-
-export interface NavItem {
-  id: number,
-  name: string,
-  orderNumber: number,
-  subTotal: string,
-  subLabel?: NavList
-}
-
-export type CardList = CardItem[]
-
-export interface CardItem {
-  description: null
-  id: number;
-  name: string;
-  orderNumber: number;
-  parentId: number;
-  parentName: string;
-  parentType: number;
-  subelements: CardList;
-  type: number;
-  usedNum: number;
-  isLike: boolean;
-  like: number;
-}
-
-// @ts-ignore
-const prefix = BSGlobal.tenantInfo.isNewIndex ? 'titaui-okr-cases-library' : 'okr-cases-library';
-
-const OKRCases = (props: Props) => {
-  const { onApplyTpl, onClose } = props
-
-  const [isUnlock, setIsUnlock] = useState(false)//是否解锁
-  const [navList, setNavList] = useState<NavList>([])//nav列表
-  const [cardList, setCardList] = useState<CardList>([])//案例列表
-  const [okrCasesNum, setOrkCasesNum] = useState(0)//案例总数
-  const [isfix, setIsfix] = useState(false)//首nav是否吸顶
-  const [isTouchBottom, setIsTouchBottom] = useState(false)//是否触底
-  const [isShowSubmitOkrWindow, setIsShowSubmitOkrWindow] = useState(false)//提交想要的okr窗口是否显示
-  const [isShowPayWindow, setIsShowPayWindow] = useState(false)//交钱弹窗是否显示
-  const [secondNavList, setSecondNavList] = useState<NavList>([])//二级菜单
-  const [activeNavId, setActiveNavId] = useState(0)//激活菜单id 0是全部
-  const [secondActiveNavId, setSecondActiveNavId] = useState(0)//二级菜单激活id
-  // const [pageNumber, setPageNumber] = useState(1)//请求第几页
-  const [isLoading, setIsLoading] = useState(false)//是否正在加载
-  // const [fixAsideRight, setFixAsideRight] = useState(24)
-  const [isNextPageEmpty, setIsNextPageEmpty] = useState(false)//下一页是否为空
-  const [searchValue, setSearchValue] = useState('')//搜索框内容
-  // const [fixAsideRightScroll, setFixAsideRightScroll] = useState(0)//距离右侧滚动距离
-  const [fixAsideTopScroll, setFixAsideTopScroll] = useState(0)//距离上侧滚动距离
-  // const [isAsideFix, setIsAsideFix] = useState(false)//侧变栏是否fix
-  const [fixNavTopScroll, setFixNavTopScroll] = useState(0)
-
-
-  //与数据无关的不要用state，改用ref
-  // const isTouchBottomRef = useRef(false)//是否触底
-  const pageNumberRef = useRef(1)//请求第几页
-  const totalHeightRef = useRef<any>()//总高度
-  const allViewAreaRef = useRef<any>()//视口高度
-  const asideHeightRef = useRef<any>()//侧边栏高度
-
-  //处理提交想要okr类型的弹窗出现处理
-  const handleShowSubmitOkrWindow = (f) => {
-    setIsShowSubmitOkrWindow(f)
-  }
-
-  //付钱弹窗出现处理
-  const handleShowPayWindow = (f) => {
-    setIsShowPayWindow(f)
-  }
-
-  // 初始化数据
-  // 一级菜单选全部，请求id为0
-  useEffect(() => {
-    //在一开始判断用户是否购买
-    //@ts-ignore
-    getIsHadBuyOKRcases().then(res => {
-      // @ts-ignore          
-      setIsUnlock(res.obj)
-    })
-    //获取1级菜单
-    getLabels().then((res) => {
-      setNavList([{
-        id: 0,
-        name: "全部",
-        orderNumber: 0,
-        subTotal: '',
-        subLabel: []
-      },
-      ...res]
-      )
-    })
-    //获取第一页的案例
-    postForCases({
-      pageNumber: 1,
-      labelId: 0,
-      subLabelId: 0,
-      key: ""
-    }).then(res => {
-      setCardList(res)
-    })
-    //案例总数
-    gettotalNumber().then(res => {
-      setOrkCasesNum(res)
-    })
-
-  }, [])
-
-  // // 屏幕resize事件
-  // const resizeChange = () => {
-  //     if (window.innerWidth < 1366) {
-  //         if (onClose) {
-  //             setFixAsideRight(window.innerWidth - 1366 + 0)
-  //         } else {
-  //             setFixAsideRight(window.innerWidth - 1366 + 12)
-  //         }
-  //     } else {
-  //         if (onClose) {
-  //             if (fixAsideRight !== 0) {
-  //                 setFixAsideRight(0)
-  //             }
-  //         } else {
-  //             if (fixAsideRight !== 12) {
-  //                 setFixAsideRight(12)
-  //             }
-  //         }
-  //     }
-  // }
-  // useEffect(() => {
-  //     window.addEventListener("resize", resizeChange)
-  //     return () => {
-  //         window.removeEventListener("resize", resizeChange);
-  //     }
-  // }, [fixAsideRight])
-
-  //一级菜单选择
-  const handleNavItemClick1 = (num) => {
-    setActiveNavId(num)
-    let work = navList[num]
-    // @ts-ignore
-    window.titaTracker && window.titaTracker('action').record({
-        actionName: work.name,
-        actionGroup: '案例库-各行业',
-        productName: '案例库'
-      })
-    setSearchValue('')
-    //点击选择类型时重新请求数据
-    postForCases({
-      pageNumber: 1,
-      labelId: num,
-      subLabelId: 0,
-      key: ""
-    }).then(res => {
-      setCardList(res)
-    })
-    scrollToAnchor('NavAnchor')
-  }
-
-  //锚点跳转
-  const scrollToAnchor = (anchorName) => {
-    let anchorElement = document.getElementById(anchorName);
-    if (anchorElement) { anchorElement.scrollIntoView(); }
-  }
-
-  //一级菜单改变
-  useEffect(() => {
-    pageNumberRef.current = 1
-    setIsTouchBottom(false)
-    setIsNextPageEmpty(false)
-    //每当一级菜单改变，获取二级菜单
-    navList.map(item => {
-      if (item.id === activeNavId) {
-        const navSecondList = item.subLabel
-        if (activeNavId === 0) {
-          setSecondNavList(navSecondList as NavList)
-        } else {
-          setSecondNavList([{
-            id: 0,
-            //@ts-ignore
-            name: `全部 ${item.subTotal == 0 ? '' : item.subTotal}`,
-            orderNumber: 0,
-            subTotal: ''
-          }, ...navSecondList as NavList])
-        }
-
-      }
-    });
-    setSecondActiveNavId(0)
-  }, [activeNavId])
-
-
-  //二级菜单选择
-  const handleSecondNavItemClick = (num) => {
-    if (isUnlock) {
-      setIsTouchBottom(false)
-      pageNumberRef.current = 1
-      setIsNextPageEmpty(false)
-      setSearchValue('')
-      setSecondActiveNavId(num)
-      postForCases(
-        {
-          pageNumber: 1,
-          labelId: activeNavId,
-          subLabelId: num,
-          key: ""
-        }).then(res => {
-          setCardList(res)
-        })
-    } else {
-      setIsShowPayWindow(true)
-    }
-  }
-
-  //搜索
-  const handleSearch = (value) => {
-    setActiveNavId(0)
-    pageNumberRef.current = 1
-    setIsNextPageEmpty(false)
-    setSearchValue(value)
-
-    postSearchCases(value).then(res => {
-      setCardList(res.Data)
-    })
-  }
-
-  //划到底时加载新的 --懒加载
-  useEffect(() => {
-    if (isTouchBottom) {
-      pageNumberRef.current += 1
-
-      if (!isUnlock && pageNumberRef.current > 2 || isNextPageEmpty) {
-        return
-      }
-      setIsLoading(true)
-
-      if (searchValue) {
-        postSearchCases(searchValue, pageNumberRef.current).then(res => {
-          if (res.Data.length) {
-            setCardList([...cardList, ...res.Data])
-          } else {
-            setIsNextPageEmpty(true)
-          }
-          setIsLoading(false)
-          setIsTouchBottom(false)
-        })
-      } else {
-        postForCases({
-          labelId: activeNavId,
-          subLabelId: secondActiveNavId,
-          key: '',
-          pageNumber: pageNumberRef.current,
-        }).then(res => {
-          if (res.length) {
-            setCardList([...cardList, ...res])
-          } else {
-            setIsNextPageEmpty(true)
-          }
-          setIsLoading(false)
-          setIsTouchBottom(false)
-        })
-
-      }
-    }
-  }, [isTouchBottom, searchValue])
-
-  // 下划事件，定位和懒加载
-  const handleScroll = (e) => {
-
-    let scrollHeight = e.target.scrollTop
-
-    if (scrollHeight > 239 && e.target.tagName !== 'TEXTAREA') {
-      //顶部吸顶
-      !isfix && setIsfix(true)
-      const NavTopScroll = scrollHeight
-      setFixNavTopScroll(NavTopScroll)
-
-      //文章吸底
-      const AsideTopScroll =
-        activeNavId === 0
-          ? scrollHeight - 240 + allViewAreaRef.current.clientHeight - asideHeightRef.current.clientHeight - 89
-          : scrollHeight - 240 + allViewAreaRef.current.clientHeight - asideHeightRef.current.clientHeight - 131
-      setFixAsideTopScroll(AsideTopScroll)
-
-    } else {
-      isfix && setIsfix(false)
-    }
-
-    // //当选择全部时，距离顶部少了42
-    // const offTopDiff = activeNavId === 0 ? 0 : 42
-    // //判断吸底
-    // if (allViewAreaRef.current.clientHeight - asideHeightRef.current.clientHeight + scrollHeight > 324 + offTopDiff) {
-    //     !isAsideFix && setIsAsideFix(true)
-    //     const AsideTopScroll = scrollHeight - 240 + allViewAreaRef.current.clientHeight - asideHeightRef.current.clientHeight - 79 - offTopDiff
-    //     setFixAsideTopScroll(AsideTopScroll)
-    // } else {
-    //     isAsideFix && setIsAsideFix(false)
-    // }
-
-    //懒加载
-    if (totalHeightRef.current.clientHeight <= allViewAreaRef.current.clientHeight + scrollHeight + 200) {
-      setIsTouchBottom(true)
-    }
-  }
-
-  return (
-    <div className='okrCases-container' ref={allViewAreaRef} id="123"
-      style={{ height: 'calc(100vh - 40px)' }} onScroll={e => handleScroll(e)}>
-      <ScrollBar  >
-        <div className={prefix} ref={totalHeightRef} style={{ minWidth: onClose ? '1366px' : '1163px' }}>
-          <CaseLibraryHeader
-            onClose={onClose}
-            handleSearch={handleSearch}
-          />
-          <CaseLibraryNav
-            onClose={onClose}
-            navList={navList}
-            isfix={isfix}
-            handleNavItemClick={handleNavItemClick1}
-            activeNavId={activeNavId}
-            handleSearch={handleSearch}
-            secondActiveNavId={secondActiveNavId}
-            secondNavList={secondNavList}
-            handleSecondNavItemClick={handleSecondNavItemClick}
-            cardList={cardList}
-            fixNavTopScroll={fixNavTopScroll}
-          />
-          <CaseLibraryMain
-            cardList={cardList}
-            isUnlock={isUnlock}
-            onApplyTpl={onApplyTpl}
-            okrCasesNum={okrCasesNum}
-            handleShowSubmitOkrWindow={handleShowSubmitOkrWindow}
-            handleShowPayWindow={handleShowPayWindow}
-            isfix={isfix}
-            isLoading={isLoading}
-            activeNavId={activeNavId}
-            onClose={onClose}
-            fixAsideTopScroll={fixAsideTopScroll}
-            asideHeightRef={asideHeightRef}
-          // isAsideFix={isAsideFix}
-          />
-          <SubmitDialog
-            isShowSubmitOkrWindow={isShowSubmitOkrWindow}
-            handleShowSubmitOkrWindow={handleShowSubmitOkrWindow}
-            allViewAreaRef={allViewAreaRef}
-          />
-          <PayDialog
-            isShowPayWindow={isShowPayWindow}
-            handleShowPayWindow={handleShowPayWindow}
-            allViewAreaRef={allViewAreaRef}
-          />
-        </div>
-      </ScrollBar >
-    </div>
-  )
-}
-
-export default OKRCases

package/src/components/okrcase-library/new-ui.scss

@@ -1,59 +0,0 @@
-.titaui-okr-cases-library {
-  display: flex;
-  flex-direction: column;
-  .okr-cases-library__header {
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-  }
-  .okr-cases-library__header-light {
-    background: transparent;
-  }
-  .okr-cases-library__navFirst {
-    border-bottom-left-radius: 12px;
-    border-bottom-right-radius: 12px;
-    box-sizing: border-box;
-    width: auto;
-  }
-  .okr-cases-library__navFirst__item {
-    word-break: keep-all;
-  }
-  .okr-cases-library__navFirst-fixed {
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 1163px;
-  }
-  .okr-cases-library__navSecond {
-    padding: 0 22px;
-    box-sizing: border-box;
-    width: auto;
-  }
-  .okr-cases-library__mainContainer {
-    padding-left: 0;
-  }
-  .okr-cases-library__cardList__card {
-    border-radius: 12px;
-  }
-  .okr-cases-library__aside__submitWant {
-    border-radius: 12px;
-  }
-  .okr-cases-library__aside__advertise {
-    border-radius: 12px;
-    background-color: transparent;
-  }
-  .okr-cases-library__aside__essay {
-    border-radius: 12px;
-  }
-  .okr-cases-library__navSecond__item {
-    color: #3f4755;
-  }
-  .okr-cases-library__aside {
-    margin-right: 0;
-    width: 298px;
-  }
-  .okr-cases-library__aside__memberInfo {
-    width: 100%;
-    box-sizing: border-box;
-  }
-}

package/src/components/okrcase-library/okrcases-components/caseLibrary-cardList/index.tsx

@@ -1,53 +0,0 @@
-import React, { Fragment, useEffect } from "react";
-import OkrCaseCard from './okrcase-card'
-import { CardList } from '../../index'
-import lottie from 'lottie-web'
-import animateJson from '../../image/data.json'
-
-interface Props {
-  cardList: CardList;
-  isUnlock: boolean;
-  handleShowPayWindow: Function;
-  handleShowSubmitOkrWindow: Function;
-  onApplyTpl: Function;
-  isLoading: boolean;
-}
-
-const OkrCaseCardLsit = (props: Props) => {
-
-  const { cardList, isUnlock, handleShowPayWindow, handleShowSubmitOkrWindow, onApplyTpl, isLoading } = props
-  useEffect(() => {
-    lottie.loadAnimation({
-      //@ts-ignore
-      container: document.getElementById('lottie-loading'),
-      renderer: 'svg',
-      loop: true,
-      autoplay: true,
-      animationData: animateJson
-    })
-  }, [isLoading])
-
-  return (
-    <div className="okr-cases-library__cardList">
-      {cardList.length
-        ? <Fragment>
-          {cardList.map((item, index) => (
-            <OkrCaseCard key={item.id} cardInfo={item} index={index + 1} onApplyTpl={() => onApplyTpl(item)} />
-          ))}
-          {new Array(20).fill('1').map(() => (<div style={{ height: '0', width: '46%', flexGrow: 1 }} />))}
-          {isLoading && <div id="lottie-loading" className="okr-cases-library__cardList-loading" />}
-          {!isUnlock && <div className="okr-cases-library__cardList__formember"
-            onClick={() => handleShowPayWindow(true)}>
-            <img src={require('../../image/会员.svg')} /> 开通会员查看更多案例库
-          </div>}
-        </Fragment>
-        : <div className="okr-cases-library__cardList-empty">
-          <img src={require("../../image/牛牛.png")} />
-          <p>暂无你想要的 OKR 案例，<a onClick={() => handleShowSubmitOkrWindow(true)}>提交你想要的 OKR 类型</a></p>
-        </div>
-      }
-    </div >
-  )
-}
-
-export default OkrCaseCardLsit

package/src/components/okrcase-library/okrcases-components/caseLibrary-cardList/okrcase-card.tsx

@@ -1,108 +0,0 @@
-import React, { useState, useCallback, useRef, useEffect } from "react";
-import { postApply, postLike } from '../../server/network.js'
-import { CardItem } from '../../index'
-import firework from '../../../firework'
-
-interface Props {
-  onApplyTpl: Function;
-  cardInfo: CardItem;
-  index: number;
-}
-
-const OkrCaseCard = (props: Props) => {
-  const { onApplyTpl, cardInfo, index } = props
-  const { parentName, name, subelements, usedNum, id, isLike, like } = cardInfo
-
-  const [likeNum, setLikeNum] = useState(like)
-  const [hasLike, setHasLike] = useState(isLike)
-  const [usedNumber, setUsedNumber] = useState(usedNum)
-
-  const [isApplyBtnShow, setIsApplyBtnShow] = useState(false)
-  // const [isBlue, setIsBlue] = useState(index % 4 > 1 ? true : false)
-  const isBlue = index % 4 > 1 ? true : false
-  const likeRef = useRef<any>()
-
-  useEffect(() => {
-    setLikeNum(like)
-    setHasLike(isLike)
-    setUsedNumber(usedNum)
-  }, [])
-
-
-  const setFirework = useCallback(() => {
-    const { x, y } = (likeRef.current as any).getBoundingClientRect();
-    firework({
-      x: x,
-      y: y,
-      images: [require('../../image/thumb-up.svg'), require('../../image/666.svg'), require('../../image/bixin.svg'), require('../../image/fighting.svg'), require('../../image/nice.svg'), require('../../image/welldone.svg')]
-    });
-  }, []);
-
-  const handleLikeClick = (isLike, id) => {
-
-    setHasLike(!hasLike)
-    if (isLike) {
-      postLike(0, id)
-      setLikeNum(likeNum - 1)
-    } else {
-      setLikeNum(likeNum + 1)
-      postLike(1, id)
-      setFirework()
-    }
-  }
-
-  const handleApplyBtnClick = (id) => {
-    setUsedNumber(usedNumber + 1)
-    postApply(id)
-    onApplyTpl(cardInfo)
-    // @ts-ignore
-    window.titaTracker &&
-      window.titaTracker('action').record({
-        action: '套用',
-        actionGroup: '案例库',
-        productName: '案例库'
-      })
-
-  }
-
-  return (
-    <div className="okr-cases-library__cardList__card"
-      onMouseEnter={() => setIsApplyBtnShow(true)}
-      onMouseLeave={() => setIsApplyBtnShow(false)}
-    >
-      <div className={`okr-cases-library__cardList__card__title
-            ${isBlue ? "okr-cases-library__cardList__card__title-blue" : "okr-cases-library__cardList__card__title-red"}`}
-      >
-        <div className="okr-cases-library__cardList__card__title__label">「{parentName}」</div>
-        <div className="okr-cases-library__cardList__card__title__name">O {name}</div>
-        {<div className={`okr-cases-library__cardList__card__title__btn 
-                ${isApplyBtnShow && "okr-cases-library__cardList__card__title__btn-show"}
-                ${isBlue ? 'okr-cases-library__cardList__card__title__btn-blue' : 'okr-cases-library__cardList__card__title__btn-red'}`
-        }
-          onClick={() => handleApplyBtnClick(id)}>套用</div>}
-      </div>
-      <div className="okr-cases-library__cardList__card__content">
-        {subelements.map((item, krindex) => (
-          <div className="okr-cases-library__cardList__card__content__kr" key={krindex} >
-            <div style={{ color: isBlue ? '#2879FF' : '#F05E5E', float: 'left', marginRight: '5px' }}>KR{krindex + 1} </div>
-            <div style={{ float: 'left', width: 'calc(100% - 36px)' }}> {item.name}</div>
-          </div>
-        ))}
-      </div>
-      <div className="okr-cases-library__cardList__card__footer" >
-        <div>{usedNumber}次套用</div>
-        <div>
-          {hasLike
-            ? <img src={require('../../image/thumb-up.svg')} onClick={() => handleLikeClick(hasLike, id)}
-              style={{ cursor: 'pointer' }} />
-            : <span className="tu-icon-dianzan" onClick={() => handleLikeClick(hasLike, id)} ref={likeRef} />
-          }
-          {likeNum}
-        </div>
-      </div>
-
-    </div >
-  )
-}
-
-export default OkrCaseCard

package/src/components/okrcase-library/okrcases-components/caseLibrary-main.tsx

@@ -1,74 +0,0 @@
-import React, { Fragment } from "react";
-import OkrCaseCardLsit from './caseLibrary-cardList'
-import OkrEssay from '../../grid-layout/essay-component'
-import { CardList } from '../index'
-import { isLocal } from "../../../utils/helpers";
-
-interface Props {
-  onApplyTpl: Function;
-  cardList: CardList;
-  isUnlock: boolean;
-  okrCasesNum: number;
-  handleShowSubmitOkrWindow: Function;
-  handleShowPayWindow: Function;
-  isfix: boolean;
-  isLoading: boolean;
-  activeNavId: number;
-  onClose?: Function;
-  asideHeightRef: any;
-  fixAsideTopScroll: number;
-  // isAsideFix: boolean;
-}
-
-
-const CaseLibraryMain = (props: Props) => {
-  const { onApplyTpl, cardList, isUnlock, okrCasesNum, handleShowSubmitOkrWindow,
-    handleShowPayWindow, isfix, isLoading, activeNavId, onClose,
-    asideHeightRef, fixAsideTopScroll } = props
-
-  //@ts-ignore
-  const { DeadLine } = BSGlobal.tenantAuthentication
-  //@ts-ignore
-  const { Name } = BSGlobal.loginUserInfo
-
-  return (
-    <Fragment>
-      <div className='okr-cases-library__mainContainer'>
-        <OkrCaseCardLsit cardList={cardList} isUnlock={isUnlock} handleShowPayWindow={handleShowPayWindow}
-          handleShowSubmitOkrWindow={handleShowSubmitOkrWindow} onApplyTpl={onApplyTpl} isLoading={isLoading} />
-        <div className={"okr-cases-library__aside"}
-          style={{
-            right: `0px`,
-            top: `${fixAsideTopScroll}px`,
-            //@ts-ignore
-            position: isfix && cardList.length ? 'absolute' : ''
-          }}
-          ref={asideHeightRef}>
-          {!isLocal() && <div className="okr-cases-library__aside__submitWant">
-            <div
-              className="okr-cases-library__aside__submitWant__btn"
-              onClick={() => handleShowSubmitOkrWindow(true)}
-            >
-              <img src={require('../image/笔.svg')} />提交我想要的OKR类型
-            </div>
-            <div className="okr-cases-library__aside__submitWant__libraryNum">全国最大 OKR 案例库
-              <span style={{ color: '#F05E5E' }}> {okrCasesNum}</span> 个
-            </div>
-          </div>}
-          {isUnlock
-            ? <div className="okr-cases-library__aside__memberInfo">
-              <div className="okr-cases-library__aside__memberInfo__name">
-                {Name}的<b> VIP </b>会员</div>
-              <p className="okr-cases-library__aside__memberInfo__deadLine">有效日期至：{DeadLine}</p>
-            </div>
-            : <div className="okr-cases-library__aside__advertise"
-              onClick={() => handleShowPayWindow(true)} />
-          }
-          <OkrEssay essayTypeId={activeNavId} _className="okr-cases-library__aside__essay" />
-        </div>
-      </div>
-    </Fragment >
-  )
-}
-
-export default CaseLibraryMain