@titaui/pc 1.7.24 → 1.7.28

package/src/components/common-share/index.scss

@@ -0,0 +1,199 @@
+.okr-share-card {
+  position: relative;
+  width: 340px;
+  height: 434px;
+  border-radius: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  &-user__name {
+    margin-top: 4px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #141c28;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+    > span {
+      max-width: 170px;
+      margin-right: 5px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+    }
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    height: 70px;
+    bottom: 0;
+    left: 0px;
+    right: 0px;
+    border-bottom-left-radius: 24px;
+    border-bottom-right-radius: 24px;
+  }
+  &-user__dept {
+    font-size: 12px;
+    font-weight: 400;
+    color: #3f4755;
+    line-height: 18px;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+  }
+  .card-okr__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 50px;
+  }
+  .card-okr__name {
+    position: relative;
+    width: 250px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #141c28;
+    line-height: 24px;
+    margin-top: 24px;
+    margin-bottom: 28px;
+    text-align: center;
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+    &::before {
+      top: -16px;
+      left: -16px;
+    }
+    &::after {
+      bottom: -16px;
+      right: -16px;
+    }
+  }
+  .card-kr__wrapper {
+    width: 100%;
+    max-height: 240px;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .card-kr__item {
+    font-size: 14px;
+    font-weight: 400;
+    color: #3f4755;
+    line-height: 22px;
+    margin-bottom: 6px;
+    position: relative;
+    width: 250px;
+    text-align: left;
+    &::before {
+      content: "";
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      top: 8px;
+      left: -14px;
+    }
+  }
+}
+.okr-share-card__selector {
+  position: relative;
+  .tu-icon-close {
+    position: absolute;
+    top: -8.25px;
+    right: -20px;
+    font-size: 16.5px;
+    color: #fff;
+  }
+  .share-card-button__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .share-card-button {
+    box-sizing: border-box;
+    width: 120px;
+    height: 36px;
+    border-radius: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 6px 0;
+    font-size: 14px;
+    color: #ffffff;
+    transition: all 0.2s ease;
+    &.download {
+      border: 1px solid #ffffff;
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+    &.share {
+      background: rgba($color: #5c8eff, $alpha: 0);
+      position: relative;
+      &::after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        background: linear-gradient(180deg, #88bcff 0%, #2879ff 100%);
+        border-radius: 18px;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+      &:hover {
+        background: rgba($color: #5c8eff, $alpha: 1);
+      }
+    }
+  }
+}
+.okr-share-mblog {
+  &__container {
+    width: 480px;
+    height: 420px;
+    background-color: #fff;
+    border-radius: 6px;
+  }
+  &__header {
+    height: 58px;
+    padding: 0 32px;
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    font-weight: bold;
+    color: #141c28;
+    line-height: 26px;
+    border-bottom: 1px solid #e9ecf0;
+    justify-content: space-between;
+    .tu-icon-close {
+      cursor: pointer;
+    }
+  }
+  &__body {
+    padding: 16px 32px 20px;
+  }
+  &__attachment {
+    width: 118px;
+    height: 160px;
+    overflow: hidden;
+    > img {
+      width: 100%;
+    }
+  }
+}

package/src/components/common-share/index.tsx

@@ -0,0 +1,95 @@
+import React, { useRef, useState,useEffect } from 'react';
+import { Modal } from 'tita-ui';
+import PublishMblog from './publishMblog';
+import Queue from 'rc-queue-anim';
+import './index.scss';
+
+interface Props {
+  closeModal: Function;
+  getModalRef: Function;
+  uid: string;
+  shareComponent: any;
+  shareImage?:string 
+  defaultContent?:string
+}
+
+const ShareContent = function({ closeModal, getModalRef, uid,shareComponent,shareImage,defaultContent }: Props) {
+  const [showPublish, setShowPublish] = useState(false);
+  useEffect(() => {
+    if(shareImage){
+      setTimeout(() => {
+        setShowPublish(true)
+      }, 200);
+    }
+  }, [shareImage])
+  return (
+    <Queue type='bottom'>
+      {!shareImage && (
+        shareComponent
+      )}
+      {showPublish && shareImage && (
+        <PublishMblog
+          base64={shareImage}
+          getModalRef={getModalRef}
+          closeModal={closeModal}
+          key='publish'
+          uid={uid}
+          defaultContent={defaultContent}
+        />
+      )}
+    </Queue>
+  );
+};
+export interface ShareData {
+  okrName: string;
+  okrId: number;
+  krs: string[];
+  user: {
+    name: string;
+    userId: number;
+    departmentName: string;
+    departmentId: number;
+    avatar: {
+      color: string;
+      src?: string;
+    };
+  };
+}
+interface ShareProps {
+  uid: any;
+  visible:boolean;
+  onClose: () => void
+  shareComponent: (share:(img:string) => void) => any
+  defaultContent?:string
+}
+const OkrShare: React.FC<ShareProps> = ({ uid,visible,onClose,shareComponent,defaultContent }) => {
+  const [shareImage,setShareImage] = useState<string>()
+  const modalRef = useRef<any>();
+
+  return (
+    <>
+      <Modal
+        visible={visible}
+        className="document-mouse-event-ignore"
+        destroyOnClose
+        customContent
+        // maskClosable
+        onCancel={() => onClose()}
+        ref={modalRef}
+      >
+        {visible ? (
+          <ShareContent
+            closeModal={() => onClose()}
+            getModalRef={() => modalRef.current.getRef()}
+            uid={uid}
+            shareImage={shareImage}
+            defaultContent={defaultContent}
+            shareComponent={shareComponent(setShareImage)}
+          />
+        ) : null}
+      </Modal>
+    </>
+  );
+};
+
+export default OkrShare;

package/src/components/common-share/publishMblog.tsx

@@ -0,0 +1,81 @@
+import React, { ReactElement, useEffect, useState } from "react";
+import MBlog from "../mblog";
+import MBlogContext from "../mblog/context";
+import { findDOMNode } from "react-dom";
+import { addShare, uploadBase64 } from "./request-apis";
+import Toast from "../toast";
+import { getBSGlobal } from "../../utils/bs-global";
+
+const loginUserId = getBSGlobal("loginUserInfo").Id;
+
+interface Props {
+  base64: string;
+  getModalRef: Function;
+  closeModal: Function;
+  uid: any;
+  defaultContent?:string
+}
+
+function PublishMblog({
+  base64,
+  getModalRef,
+  closeModal,
+  uid,
+  defaultContent="秀一秀我的 OKR"
+}: Props): ReactElement {
+  const [file, setFile] = useState({ url: "", pending: true });
+  const [status, setStatus] = useState(0);
+  useEffect(() => {
+    uploadBase64(base64.split(",")[1]).then((res) => {
+      setFile({
+        url: res.Data.obj,
+        pending: false,
+      });
+    });
+  }, []);
+  return (
+    <div className="okr-share-mblog__container">
+      <div className="okr-share-mblog__header">
+        发布动态
+        <i className="tu-icon-close" onClick={() => closeModal()} />
+      </div>
+      <div className="okr-share-mblog__body">
+        <MBlogContext.Provider
+          value={{ popContainer: findDOMNode(getModalRef()) }}
+        >
+          <MBlog
+            autoResizing={false}
+            defaultContent={defaultContent}
+            submitStatus={status}
+            commentsTypeKey={"share-okr" + loginUserId + uid}
+            autoFocus
+            onMblogSubmit={async (type, data) => {
+              if (file.pending) {
+                return Toast.Error("图片正在上传...");
+              }
+              setStatus(2);
+              await addShare({
+                ...data,
+                FileUrls: file.url,
+                Visibility: 1,
+                isSendSMS: false,
+              });
+              Toast.Success("分享成功");
+              setStatus(1);
+              closeModal();
+            }}
+            isShowAttachment={false}
+            isShowSendSms={false}
+            isShowBtnCancel={false}
+            isShowRange={false}
+          />
+        </MBlogContext.Provider>
+        <div className="okr-share-mblog__attachment">
+          <img src={base64} alt="" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PublishMblog;

package/src/components/common-share/request-apis.js

@@ -0,0 +1,37 @@
+import axios from 'axios';
+
+const tenantId = BSGlobal && BSGlobal.tenantInfo.Id || 0;
+const userId = BSGlobal && BSGlobal.loginUserInfo.Id || 0;
+
+const requestDomain = () => {
+  if (!window.location.hostname.match(/dev/)) return '';
+  return 'http://www.tita.gift'
+};
+
+export const getImageBase64ByUrl = toUserId => {
+  return axios.post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/share/getBase64Str`, { toUserId })
+    .then(getBase64Str => {
+      return getBase64Str.data;
+    })
+}
+
+export const getBase64DownloadUrl = base64 => {
+  return axios.post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/share/imageDownLoadDfs`, { 'SharePicLink': base64 })
+    .then(dfs => {
+      return dfs.data;
+    })
+}
+
+export const uploadBase64 = base64 => {
+  return axios.post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/share/imagedfs`, { 'SharePicLink': base64 })
+    .then(dfs => {
+      return dfs.data;
+    })
+}
+
+export const addShare = data => {
+  return axios.post(`${requestDomain()}/api/v2/${tenantId}/${userId}/user/feed/AddShare`, data)
+    .then(dfs => {
+      return dfs.data;
+    })
+}

package/src/components/common-share/types.ts

@@ -0,0 +1,4 @@
+export interface CurrentPositon {
+  x: number,
+  y: number
+}

package/src/components/follower-visitor/index.scss

@@ -2,13 +2,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  top: -17px;
+  width: 634px;
   height: 36px;
-  background: linear-gradient(270deg, #f0f4fa 0%, #d4e4ff 53%, #f0f4fa 100%);
+  margin: 0 auto;
   font-size: 14px;
-  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica,
-    sans-serif, PingFang SC, Microsoft YaHei;
+  background: #FFF4D6;
+  box-shadow: 0px 4px 16px 0px rgba(127, 145, 180, 0.2);
+  border-radius: 18px;
   font-weight: 400;
-  color: #2879ff;
+  color: #704600;
+  // color: #2879ff;
   line-height: 22px;
   position: relative;
   transition: all 0.3s linear;

package/src/components/menus/components/menu-tree/tree-node/index.scss

@@ -19,6 +19,7 @@
   &-indent {
     display: inline-block;
     width: 16px;
+    min-width: 16px;
   }
   &-title {
     font-size: 14px;
@@ -36,7 +37,7 @@
     font-size: 14px;
     line-height: 22px;
     color: #141c28;
-    font-weight: 500;
+    font-weight: 600;
   }
 }
 

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

@@ -81,7 +81,9 @@ const UserMessage = () => {
 				const blessIndicator = indicators.filter((item) => {
 					return item.type === 'mZhufu';
 				});
-
+				const weeklyReportIndicator = indicators.filter((item) => {
+					return item.type === 'mWeekStatisticIndicator';
+				});
 				if (blessIndicator.length === 1) {
 					const userInfo = getUserInfo();
 					const options = {
@@ -92,6 +94,9 @@ const UserMessage = () => {
 					// @ts-ignore
 					window.util.openGift(options);
 				}
+				if(weeklyReportIndicator.length){
+					window?.Talent.app.vent.trigger('open-weekly-report-modal')
+				}
 			}
 		});
 	};

package/src/components/nav-top/index.tsx

@@ -11,8 +11,7 @@ import "./index.scss";
 import defaultLogo from "./images/logo-white.png";
 import { rpost } from "../../utils/request";
 import Toast from "../toast";
-import { isLocal } from "../../utils/helpers";
-const Logo = isLocal() ? getTenantInfo().Logo : defaultLogo;
+const Logo = getTenantInfo().Logo || defaultLogo;
 const hasOKRApp = getBSGlobal("newNavigation").find(
   (item) => item.appId === 113
 );

package/src/components/okr-share/index.tsx

@@ -8,7 +8,7 @@ import './index.scss';
 interface Props {
   closeModal: Function;
   getModalRef: Function;
-  data: ShareData;
+  data: any;
 }
 
 const ShareContent = function({ closeModal, getModalRef, data }: Props) {
@@ -41,23 +41,10 @@ const ShareContent = function({ closeModal, getModalRef, data }: Props) {
     </Queue>
   );
 };
-export interface ShareData {
-  okrName: string;
-  okrId: number;
-  krs: string[];
-  user: {
-    name: string;
-    userId: number;
-    departmentName: string;
-    departmentId: number;
-    avatar: {
-      color: string;
-      src?: string;
-    };
-  };
-}
+
 interface ShareProps {
-  data: ShareData;
+  shareComponent
+  data: any;
   visible:boolean;
   onClose: () => void
 }

package/src/components/select-tags/index.scss

@@ -1,5 +1,6 @@
 .titaui-select-tags {
   display: flex;
+
   .rc-select-single:not(.rc-select-customize-input) .rc-select-selector {
     border: 1px solid #DFE3EA;
   }
@@ -19,6 +20,10 @@
     display: none;
   }
 
+  .rc-select-multiple .rc-select-selector .rc-select-selection-overflow {
+    overflow: hidden;
+  }
+
   .rc-select-single:not(.rc-select-customize-input) .rc-select-selector .rc-select-selection-search-input {
     display: none;
   }
@@ -47,6 +52,8 @@
     height: unset;
     padding: 7px 12px 0;
     border: 1px solid #DFE3EA;
+    max-height: 116px;
+    overflow: auto;
   }
 
   .rc-select-multiple .rc-select-selector .rc-select-selection-overflow-item {

package/src/components/select-tags/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect, useRef } from "react";
+import React, { FC, useState } from "react";
 import Select, { Option } from "rc-select";
 import classNames from "classnames";
 import "rc-select/assets/index.less";
@@ -11,7 +11,7 @@ interface DataProps {
 
 interface Props {
   data: DataProps[];
-  name?:any;
+  name?: any;
   selected: any;
   onChange: Function;
   mode?: any | "single" | "multiple";
@@ -19,7 +19,7 @@ interface Props {
   placeholder?: string;
   className?: any;
   noBorder?: boolean;
-  suffix?:string;
+  suffix?: string;
 }
 
 const preCls = "titaui-select-tags";
@@ -31,26 +31,23 @@ const SelectTags: FC<Props> = ({
   style = { width: "200px" },
   mode = "single",
   className,
-  placeholder='请选择',
+  placeholder = "请选择",
   name,
   noBorder,
   ...restProps
 }) => {
-
   const [value, setValue] = useState(selected);
 
   const onhandleChange = (value, options) => {
-    onChange && onChange(value, options,name);
+    onChange && onChange(value, options, name);
     setValue(value);
   };
 
   return (
     <div className={preCls}>
       <Select
-        className={classNames(className,{[`${preCls}-noborder`]: noBorder},)}
-        dropdownClassName={classNames(
-          `titaui-dropDown`,
-        {
+        className={classNames(className, { [`${preCls}-noborder`]: noBorder })}
+        dropdownClassName={classNames(`titaui-dropDown`, {
           [`${preCls}-hasSelectItem`]: mode === "multiple",
         })}
         value={value}
@@ -75,7 +72,6 @@ const SelectTags: FC<Props> = ({
         })}
       </Select>
     </div>
-
   );
 };
 

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

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react'
+
+interface Props {
+  percent: number
+}
+const preCls = 'weekly-report-card-board'
+
+function Board({percent}: Props): ReactElement {
+  return (
+    <div className={preCls}>
+      <div className={preCls+'__done'}>
+        <div className={preCls+'__undone'}style={{transform:`rotate(${percent/100 * 180}deg)`}}/>
+        <div className={preCls+'__space'} style={{transform:'rotate(45deg)'}}/>
+        <div className={preCls+'__space'} />
+        <div className={preCls+'__space'} style={{transform:'rotate(-45deg)'}}/>
+      </div>
+      
+      <div className={preCls+'__center'}>
+        <div>{percent}%</div>
+      </div>
+    </div>
+  )
+}
+
+export default Board