@titaui/pc 1.9.35 → 1.9.39

package/src/components/upload-photo-modal/index.scss

@@ -0,0 +1,255 @@
+.tita-ui-change-person-photo {
+  &__img {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 32px;
+    .cropper-wrap-box {
+      border-radius: 12px;
+    }
+    .cropper-canvas {
+      border-radius: 12px;
+    }
+    .cropper-crop {
+      border-radius: 12px;
+    }
+  }
+  &__upload {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 32px;
+
+    &-preview {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    &-right {
+      position: relative;
+      width: 240px;
+      height: 240px;
+      background: #f0f2f5;
+      border-radius: 12px;
+      box-sizing: border-box;
+      padding: 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &-input {
+        position: absolute;
+        top: 76px;
+        width: 240px;
+        height: 60px;
+        opacity: 0;
+        cursor: pointer;
+      }
+      &-icon {
+        cursor: pointer;
+        margin-top: 46px;
+        font-size: 32px;
+        color: #2879ff;
+      }
+      &-title {
+        margin-top: 4px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #2879ff;
+        line-height: 18px;
+        cursor: pointer;
+      }
+      &-tips {
+        margin-top: 8px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #a4acb9;
+        line-height: 18px;
+        text-align: center;
+      }
+    }
+    &-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 36px;
+      width: 136px;
+      height: 100%;
+      &-box1 {
+        width: 136px;
+        height: 136px;
+        background: #f0f2f5;
+        border-radius: 50%;
+      }
+      &-box2 {
+        width: 48px;
+        height: 48px;
+        background: #f0f2f5;
+        border-radius: 50%;
+        margin-top: 14px;
+      }
+      &-box3 {
+        width: 28px;
+        height: 28px;
+        background: #f0f2f5;
+        border-radius: 50%;
+        margin-top: 14px;
+      }
+      &-box {
+        width: 160px;
+        height: 32px;
+        background: #F0F2F5;
+        border-radius: 2px;
+        border: 1px solid #E9ECF0;
+      }
+      &-preview {
+        margin-top: 8px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 22px;
+      }
+    }
+  }
+  &__preview {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+    &-box {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      &-bgc {
+        width: 160px;
+        height: 32px;
+        background: #2879FF;
+        border-radius: 2px;
+        border: 1px solid #E9ECF0;
+      }
+      &-browser {
+        margin-left: 16px;
+        width: 176px;
+        height: 48px;
+        background: #F0F2F5;
+        border-radius: 2px;
+        border: 1px solid #E9ECF0;
+        background-image: url('./img/browser-preview-bgc.png');
+        background-size: 170px 28px;
+        background-position: center center;
+        background-repeat: no-repeat;
+      }
+    }
+    &-box1 {
+      width: 136px;
+      height: 136px;
+      border-radius: 50%;
+    }
+    &-box2 {
+      margin-top: 14px;
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+    }
+    &-box3 {
+      margin-top: 14px;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+    }
+    &-enterprise {
+      &-img {
+        position: absolute;
+        top: 1px;
+        min-width: 70px;
+        height: 28px;
+      }
+      &-title {
+        margin-top: 36px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 22px;
+      }
+    }
+    &-browser {
+      &-img {
+        position: absolute;
+        top: 15px;
+        left: 16px;
+        width: 18px;
+        height: 18px;
+      }
+      &-name {
+        position: absolute;
+        top: 15px;
+        right:10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 18px;
+      }
+      &-title {
+        margin-top: 58px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 22px;
+      }
+    }
+    &-title {
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #6f7886;
+      line-height: 22px;
+    }
+  }
+  &__title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 8px 32px 0 32px;
+    &-input {
+      display: none;
+      position: absolute;
+      width: 240px;
+      height: 30px;
+      &--show {
+        display: block;
+        opacity: 0;
+        width: 56px;
+        height: 22px;
+        position: absolute;
+        left: 124px;
+      }
+    }
+    &-again {
+      margin-left: 92px;
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #bfc7d5;
+      line-height: 22px;
+      &--show {
+        color: #2879ff;
+        &:hover {
+          color: #5C8EFF;
+        }
+      }
+      &--hover {
+        color: #5C8EFF;
+      }
+    }
+    &-preview {
+      margin-right: 54px;
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #6f7886;
+      line-height: 22px;
+    }
+  }
+}

package/src/components/upload-photo-modal/index.tsx

@@ -0,0 +1,229 @@
+import React, { useState, useRef } from 'react';
+import classNames from 'classnames';
+import Cropper from 'react-cropper';
+import Toast from '../../components/toast';
+import ConditionRender from '../condition-render';
+import { saveTenantLogo, saveBrowserIcon, saveUserPhoto } from './request-api';
+import Dialog from '../../components/dialog';
+import { List } from './constant';
+import { getLocale } from '../../utils/getLocale'
+import 'cropperjs/dist/cropper.css';
+import './index.scss';
+
+const preCls = 'tita-ui-change-person-photo';
+interface Props {
+  visible: boolean;
+	type: string; // person enterprise browser
+  onCancel: Function;
+  handleSuccessUploadPhoto: Function;
+}
+
+const ChangePhoto = (props: Props) => {
+	const { visible, onCancel, type = 'person', handleSuccessUploadPhoto } = props;
+
+	const modalRef = useRef<any>();
+  const cropperRef = useRef<HTMLImageElement>(null);
+
+	const [ image, setImage ] = useState('');
+	const [ cropper, setCropper ] = useState<any>();
+	const [ cropData, setCropData ] = useState('#');
+  const [ isEnter, setIsEnter ] = useState(false);
+  const [ fileName, setFileName ] = useState('')
+
+  const item = List.find(item => item.id === type)
+	
+	const onChange = (e: any) => {    
+		let files;
+		if (e.dataTransfer) {
+			files = e.dataTransfer.files;
+		} else if (e.target) {
+			files = e.target.files;
+		}    
+    setFileName(files[0].name)
+		const reader = new FileReader();    
+		reader.onload = () => {
+			setImage(reader.result as any);            
+		};
+		reader.readAsDataURL(files[0]);
+	};
+
+
+  const dataURLtoFile = (dataurl, filename)  => {
+    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+    while(n--){
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, {type:mime});
+}
+
+
+	const onCrop = () => {   
+		const imageElement: any = cropperRef.current;
+		const cropper: any = imageElement.cropper;    
+
+		setCropData(cropper.getCroppedCanvas().toDataURL());
+    
+    let base64Url = cropper.getCroppedCanvas().toDataURL();
+        
+    const newFile = dataURLtoFile(base64Url, fileName);    
+
+    let formData = new FormData();
+
+    formData.append('file', newFile);
+
+    setCropper(formData);
+	};
+
+  const handleSuccessSave = (resp) => {
+    if (resp.Code === 1) {
+      Toast.Success(getLocale('Pro_page_Plan_Saved'), {
+        style: { position: "fixed", top: " 36px", left: "50%" },
+      });
+      onCancel();
+      setImage('');
+      handleSuccessUploadPhoto(cropData);
+    } else {
+      Toast.Error(resp.Message, {
+        style: { position: "fixed", top: " 36px", left: "50%" },
+      });
+      setImage('');
+    }
+  }
+
+  const handleSaveInfo =  () => {
+    if (!image) {
+      return;
+    } else {
+      if(type === "person")  {
+        saveUserPhoto(cropper).then((resp) => {
+          handleSuccessSave(resp);
+        });
+      } else if(type === "enterprise") {  
+        saveTenantLogo( cropper ).then((resp) => {
+          handleSuccessSave(resp);
+        });
+      }  else {
+        saveBrowserIcon( cropper ).then((resp) => {
+          handleSuccessSave(resp);
+        });
+      }  
+    }
+  };
+
+  const handleEnterAgain = () => {
+    setIsEnter(true);
+  }
+
+  const handleLeaveAgain = () => {
+    setIsEnter(false);
+  }
+
+  const handleCancel = () => {
+    onCancel();
+    setImage('');
+  } 
+
+	return (
+		<Dialog
+			visible={visible}
+			ref={modalRef}
+			width={480}
+			mask
+			centered
+			title={getLocale('Set_PI_Uploadavatar')}
+			noHeadLine
+			maskClosable={false}
+			onClose={handleCancel}
+			onCancel={handleCancel}
+			okText={getLocale('Mod_Save')}
+			noFooterLine
+			onOk={handleSaveInfo}
+		>
+			<div className={preCls}>
+				{!image ? 
+					<div className={`${preCls}__upload`}>
+						<div className={`${preCls}__upload-preview`}>
+							<div className={`${preCls}__upload-right`}>
+								<i className={classNames(`${preCls}__upload-right-icon`, 'tu-icon-upload')} />
+								<input
+									type="file"
+									onChange={onChange}
+									className={`${preCls}__upload-right-input`}
+									accept={item?.accept}
+								/>
+								<span className={`${preCls}__upload-right-title`}>{getLocale('Pro_detail_ClickUpload')}</span>
+								<span className={`${preCls}__upload-right-tips`}>
+									{item?.tips}
+								</span>
+							</div>
+						</div>
+						<div className={`${preCls}__upload-left`}>
+							<ConditionRender condition={type === 'person'}>
+								<div className={`${preCls}__upload-left-box1`} />
+								<div className={`${preCls}__upload-left-box2`} />
+								<div className={`${preCls}__upload-left-box3`} />
+							</ConditionRender>
+							<ConditionRender condition={type === 'enterprise' || type === 'browser'}>
+								<div className={`${preCls}__upload-left-box`} />
+								<span className={`${preCls}__upload-left-preview`}>{item?.previewTitle}</span>
+							</ConditionRender>
+						</div>
+					</div>
+         :
+					<div className={`${preCls}__img`}>
+						<Cropper
+							src={image}
+							style={{ height: 240, width: 240 }}
+							background={false}
+							responsive={true}
+							autoCropArea={item?.autoCropArea}
+							checkOrientation={true}
+							minCropBoxHeight={item?.minCropBoxHeight}
+							minCropBoxWidth={item?.minCropBoxWidth}
+							initialAspectRatio={item?.initialAspectRatio}
+							guides={true}
+							preview=".img-preview"
+							ref={cropperRef}
+							crop={onCrop}
+						/>
+						<div className={classNames(`${preCls}__preview-box`, {[`${preCls}__preview-box-bgc`]:type === "enterprise"}, {[`${preCls}__preview-box-browser`]:type === "browser"})}>
+              <ConditionRender condition={type === "person"}>
+							  <img src={cropData} className={`${preCls}__preview-box1`} />
+							  <img src={cropData} className={`${preCls}__preview-box2`} />
+							  <img src={cropData} className={`${preCls}__preview-box3`} />
+              </ConditionRender>
+              <ConditionRender condition={type === "enterprise"}>
+                <img src={cropData} className={`${preCls}__preview-enterprise-img`}/>
+                <span className={`${preCls}__preview-enterprise-title`}>{item?.previewTitle}</span>
+              </ConditionRender>
+              <ConditionRender condition={type === "browser"}>
+                <img src={cropData} className={`${preCls}__preview-browser-img`}/>
+                <span className={`${preCls}__preview-browser-name`}>一体化人才管理云平台</span>
+                <span className={`${preCls}__preview-browser-title`}>{item?.previewTitle}</span>
+              </ConditionRender>
+						</div>
+					</div>
+          }
+				<div className={`${preCls}__title`}>
+					<input
+						accept={item?.accept}
+						type="file"
+						onChange={onChange}
+						className={classNames(`${preCls}__title-input`, { [`${preCls}__title-input--show`]: image })}
+            onMouseEnter={handleEnterAgain}
+            onMouseLeave={handleLeaveAgain}
+					/>
+					<span className={classNames(`${preCls}__title-again`, { [`${preCls}__title-again--show`]: image },{ [`${preCls}__title-again--hover`]: isEnter })}>
+						{getLocale('Set_PI_Reupload')}
+					</span>
+					<ConditionRender condition={type === 'person'}>
+						<span className={`${preCls}__title-preview`}>{item?.previewTitle}</span>
+					</ConditionRender>
+				</div>
+			</div>
+		</Dialog>
+	);
+};
+
+export default ChangePhoto;

package/src/components/upload-photo-modal/request-api.ts

@@ -0,0 +1,33 @@
+import qs from "qs";
+import { rput, rpost } from "../../utils/request";
+import { getUserInfo } from "../../utils/bs-global";
+
+export const getUserInfoFun = () => {
+  return rpost("v1")(`manage/user/profile?toUserId=${getUserInfo().Id}`);
+};
+
+export const saveUserInfo = ({ data }) => {
+  return rput("v1")("manage/user/update", data, {
+    "headers": { "Content-Type": "multipart/form-data"},
+    "transformRequest": qs.stringify,
+  });
+};
+
+export const saveUserPhoto = (params)  => {
+  return rpost("v1")("manage/user/avatar", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
+}
+
+export const saveTenantLogo = (params)  => {
+  return rpost("v1")("tenant/update/logo", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
+}
+
+export const saveBrowserIcon = (params)  => {
+  return rpost("v1")("tenant/update/browerIcon", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
+}
+

package/src/components/upvote/attitude.ts

@@ -0,0 +1,36 @@
+import { getLocale } from "../../utils/getLocale";
+
+export default () => {
+  return [
+    {
+      type: 2,
+      tittle: getLocale('Pro_page_Int_Butt_Congratulate'),
+      img: require('./img/welldone.svg'),
+    },
+    {
+      type: 4,
+      tittle: getLocale('Pro_page_Int_Butt_Comeon'),
+      img: require('./img/fighting.svg'),
+    },
+    {
+      type: 3,
+      tittle: getLocale('Pro_page_Int_Butt_Finheart'),
+      img: require('./img/bixin.svg'),
+    },
+    {
+      type: 6,
+      tittle: '666',
+      img: require('./img/666.svg'),
+    },
+    {
+      type: 5,
+      tittle: getLocale('Pro_page_Int_Beinsightful'),
+      img: require('./img/nice.svg'),
+    },
+    {
+      type: 1,
+      tittle: getLocale('Mod_Kudos'),
+      img: require('./img/thumb-up.svg'),
+    },
+  ]
+};

package/src/components/upvote/img/666.svg

@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>666</title>
+    <defs>
+        <path d="M5.16892991,17.8323846 C10.063962,17.8323846 11.0546413,14.1393421 11.0546413,12.5047168 C11.0546413,11.0920775 10.4629635,9.44399847 9.64901427,8.60986865 C7.81258329,6.90632681 5.12000819,7.29232695 4.20044321,7.45377143 C4.81545274,6.43797085 6.35521514,4.83249119 8.81973043,2.63733246 C9.20086245,2.29785903 9.2346307,1.71369274 8.8951555,1.3325623 C8.85888342,1.29183945 8.81907793,1.25440716 8.77620504,1.22070361 C8.26074679,0.815487874 7.53510906,0.815018632 7.01912569,1.2195655 C4.41252111,3.26323915 2.70483367,4.83503978 1.89606338,5.93496738 C0.550692698,7.7646715 -2.48689958e-14,10.0830495 -2.48689958e-14,12.2020084 C-2.48689958e-14,14.3209672 1.16668863,17.8323846 5.16892991,17.8323846 Z M4.87576209,14.7188125 C4.17397398,14.7188125 3.61254349,14.510884 3.19147062,14.095027 C2.77039775,13.67917 2.55986131,13.1220283 2.55986131,12.4236018 C2.55986131,11.6452028 2.832479,10.9707681 3.37771439,10.4002976 C3.9175514,9.8351586 4.56805499,9.5525891 5.32922518,9.5525891 C6.00402144,9.5525891 6.6842703,9.72967404 7.37934058,10.6529146 C8.07441085,11.5761551 7.59654063,13.2570414 7.06210199,13.8008544 C6.53306171,14.3446674 5.65852576,14.7188125 4.87576209,14.7188125 Z" id="path-1"></path>
+        <filter x="-22.6%" y="-14.8%" width="145.2%" height="129.6%" filterUnits="objectBoundingBox" id="filter-2">
+            <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="-2" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.77254902   0 0 0 0 0.831372549  0 0 0 0.6 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <path d="M5.16892991,17.8323846 C10.063962,17.8323846 11.0546413,14.1393421 11.0546413,12.5047168 C11.0546413,11.0920775 10.4629635,9.44399847 9.64901427,8.60986865 C7.81258329,6.90632681 5.12000819,7.29232695 4.20044321,7.45377143 C4.81545274,6.43797085 6.35521514,4.83249119 8.81973043,2.63733246 C9.20086245,2.29785903 9.2346307,1.71369274 8.8951555,1.3325623 C8.85888342,1.29183945 8.81907793,1.25440716 8.77620504,1.22070361 C8.26274703,0.817060316 7.53837163,0.822209916 7.03071974,1.23313157 C4.42893497,3.33899827 2.72322588,4.94248235 1.91359245,6.04358381 C0.568221771,7.87328793 -1.03028697e-13,10.0830495 -1.03028697e-13,12.2020084 C-1.03028697e-13,14.3209672 1.16668863,17.8323846 5.16892991,17.8323846 Z M4.87576209,14.7188125 C4.17397398,14.7188125 3.61254349,14.510884 3.19147062,14.095027 C2.77039775,13.67917 2.55986131,13.1220283 2.55986131,12.4236018 C2.55986131,11.6452028 2.832479,10.9707681 3.37771439,10.4002976 C3.9175514,9.8351586 4.56805499,9.5525891 5.32922518,9.5525891 C6.00402144,9.5525891 6.6842703,9.72967404 7.37934058,10.6529146 C8.07441085,11.5761551 7.59654063,13.2570414 7.06210199,13.8008544 C6.53306171,14.3446674 5.65852576,14.7188125 4.87576209,14.7188125 Z" id="path-3"></path>
+        <filter x="-22.6%" y="-14.8%" width="145.2%" height="129.6%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="-2" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.921971215   0 0 0 0 0.693360566  0 0 0 0.9 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="54.6590958%" y1="-10.223569%" x2="29.3519018%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="50.610323%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-66.7%" y="-33.3%" width="233.3%" height="166.7%" filterUnits="objectBoundingBox" id="filter-6">
+            <feGaussianBlur stdDeviation="0.369015957" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+        <path d="M5.90696183,17.6329166 C10.8019939,17.6329166 11.7926733,13.9398741 11.7926733,12.3052487 C11.7926733,10.8926095 11.2009954,9.24453038 10.3870462,8.41040056 C8.55061521,6.70685873 5.85804011,7.09285886 4.93847512,7.25430334 C5.55348465,6.23850276 7.09324706,4.63302311 9.55776234,2.43786437 C9.93889437,2.09839095 9.97266261,1.51422465 9.63318741,1.13309421 C9.59691533,1.09237137 9.55710985,1.05493907 9.51423696,1.02123553 C8.99895929,0.616161755 8.27343579,0.616193721 7.75819915,1.02131967 C5.14878117,3.0730261 3.4396,4.64896148 2.63065563,5.74912582 C1.28528495,7.57882994 0.353506504,9.81936841 0.54913518,12.0832674 C0.744763855,14.3471663 1.90472055,17.6329166 5.90696183,17.6329166 Z M5.61379401,14.5193444 C4.91200589,14.5193444 4.3505754,14.3114159 3.92950253,13.8955589 C3.50842966,13.4797019 3.29789323,12.9225602 3.29789323,12.2241337 C3.29789323,11.4457347 3.57051092,10.7713 4.1157463,10.2008295 C4.65558331,9.63569051 5.30608691,9.35312102 6.06725709,9.35312102 C6.74205336,9.35312102 7.42230222,9.53020595 8.11737249,10.4534465 C8.81244277,11.376687 8.33457254,13.0575733 7.8001339,13.6013863 C7.27109363,14.1451993 6.39655767,14.5193444 5.61379401,14.5193444 Z" id="path-7"></path>
+        <filter x="-22.2%" y="-14.8%" width="144.4%" height="129.6%" filterUnits="objectBoundingBox" id="filter-8">
+            <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="-2" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.77254902   0 0 0 0 0.831372549  0 0 0 0.6 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <filter x="-66.7%" y="-33.3%" width="233.3%" height="166.7%" filterUnits="objectBoundingBox" id="filter-9">
+            <feGaussianBlur stdDeviation="0.369015957" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+        <linearGradient x1="56.709098%" y1="-10.223569%" x2="20.2667386%" y2="100%" id="linearGradient-10">
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="50.610323%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-66.7%" y="-40.0%" width="233.4%" height="180.0%" filterUnits="objectBoundingBox" id="filter-11">
+            <feGaussianBlur stdDeviation="0.369015957" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+        <path d="M24.44839,22.7808736 L24.0610394,24.1616822 C24.0486138,24.2059764 24.0162468,24.2419446 23.9735039,24.2589568 L22.8852577,24.6920941 C22.8095158,24.7222404 22.7725533,24.8080798 22.8026996,24.8838216 C22.8192453,24.9253921 22.8537533,24.9572141 22.8965255,24.9703443 L23.9615071,25.2972705 C24.0110313,25.3124734 24.0489606,25.3525261 24.0614458,25.4028043 L24.3572426,26.5939864 C24.3768893,26.6731043 24.4569538,26.7213152 24.5360717,26.7016685 C24.5882693,26.6887067 24.6292856,26.6483798 24.6431302,26.5964094 L24.9617693,25.4002942 C24.9747929,25.3514058 25.011948,25.3125938 25.060222,25.2974509 L26.1037234,24.9701196 C26.181507,24.94572 26.2247833,24.8628841 26.2003837,24.7851005 C26.1872026,24.7430805 26.1559476,24.7091408 26.1151537,24.6925494 L25.0586672,24.2628654 C25.0114164,24.2436481 24.9774365,24.2013966 24.9688011,24.1511237 L24.735986,22.7957531 C24.7221852,22.7154091 24.6458656,22.6614652 24.5655215,22.675266 C24.5093676,22.6849117 24.4637792,22.726015 24.44839,22.7808736 Z" id="path-12"></path>
+        <filter x="-5.1%" y="0.4%" width="110.4%" height="100.7%" filterUnits="objectBoundingBox" id="filter-13">
+            <feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <path d="M13.1042077,4.34770479 L12.5478075,6.01470378 C12.5331221,6.05870202 12.4986089,6.0932382 12.4546205,6.10795304 L11.0010711,6.59418882 C10.9237612,6.62005023 10.882054,6.7036871 10.9079154,6.780997 C10.9237826,6.8284303 10.962591,6.86460142 11.0110219,6.87709678 L12.4435004,7.24668196 C12.4937374,7.25964332 12.5334811,7.29802791 12.5481819,7.34778375 L12.9744492,8.79051538 C12.9975481,8.86869514 13.0796506,8.91334702 13.1578304,8.89024814 C13.2048482,8.87635632 13.2419002,8.84002574 13.2567136,8.79329008 L13.7157663,7.34500079 C13.7310466,7.29679245 13.7699433,7.25976267 13.8188444,7.24687033 L15.2220326,6.87693209 C15.3008598,6.85614997 15.3479147,6.77540062 15.3271326,6.69657336 C15.3145397,6.64880818 15.2788885,6.61050845 15.2321466,6.59453088 L13.8202612,6.11191299 C13.7707292,6.09498169 13.7338693,6.05308341 13.7233876,6.00179769 L13.3888378,4.36488098 C13.3725142,4.28501125 13.2945341,4.23349695 13.2146644,4.24982057 C13.1630055,4.26037852 13.1209012,4.29769037 13.1042077,4.34770479 Z" id="path-14"></path>
+        <filter x="-2.5%" y="-1.4%" width="105.1%" height="104.1%" filterUnits="objectBoundingBox" id="filter-15">
+            <feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="OKR列表" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务/项目-交互说明" transform="translate(-247.000000, -373.000000)">
+            <g id="编组" transform="translate(55.000000, 359.000000)">
+                <g id="666" transform="translate(189.000000, 14.000000)">
+                    <g transform="translate(18.172577, 15.277719) rotate(-15.000000) translate(-18.172577, -15.277719) translate(2.172577, 5.777719)" id="6">
+                        <g transform="translate(19.021443, 0.236728)" fill-rule="nonzero">
+                            <g id="666">
+                                <use fill="#FF5959" xlink:href="#path-1"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                                <path stroke="#FFFFFF" stroke-width="0.5" d="M7.89802466,0.666473631 C8.26289748,0.66670997 8.62769307,0.785953143 8.9307106,1.02416346 C9.2299793,1.34156697 9.35319627,1.66035492 9.36227009,1.95568207 C9.37251572,2.28914837 9.23912211,2.59857059 8.98601081,2.82401624 C6.89378035,4.68757862 5.47234692,6.11906568 4.72757221,7.12245901 C5.96399279,6.97278806 8.20992443,6.93397958 9.82794216,8.43526965 C10.6783793,9.30679201 11.3046413,11.0266417 11.3046413,12.5047168 C11.3046413,13.5339769 10.9280571,15.3414517 9.51564267,16.6199505 C8.58467186,17.4626529 7.20265522,18.0823846 5.16892991,18.0823846 C3.40091502,18.0823846 2.16260864,17.425586 1.31799732,16.5055736 C0.162718988,15.24716 -0.25,13.4818261 -0.25,12.2020084 C-0.25,10.0322071 0.31748724,7.65981197 1.69465062,5.78686977 C2.51124249,4.67630483 4.23266594,3.08657375 6.86487517,1.02282512 C7.16820153,0.785007905 7.5331517,0.666237292 7.89802466,0.666473631 Z M5.32922518,9.8025891 C4.6382258,9.8025891 4.04832106,10.0601935 3.55849156,10.5729811 C3.05975583,11.0947999 2.80986131,11.7115104 2.80986131,12.4236018 C2.80986131,13.0455246 2.99088038,13.5455511 3.3671422,13.9171521 C3.74429717,14.2896352 4.24929892,14.4688125 4.87576209,14.4688125 C5.59425746,14.4688125 6.39722835,14.1257701 6.88290814,13.6265283 C7.15475157,13.349912 7.39914763,12.7483707 7.46134071,12.1312325 C7.50917463,11.6565793 7.4509925,11.1637422 7.17961503,10.8032798 C6.55225962,9.96998286 5.9402115,9.8025891 5.32922518,9.8025891 Z"></path>
+                            </g>
+                        </g>
+                        <g transform="translate(10.165060, 0.236728)">
+                            <g id="666" fill-rule="nonzero">
+                                <use fill="#FFC314" xlink:href="#path-3"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                                <path stroke="#FFFFFF" stroke-width="0.5" d="M7.89950058,0.671462103 C8.26338298,0.66887124 8.62812126,0.786289755 8.9307106,1.02416346 C9.2299793,1.34156697 9.35319627,1.66035492 9.36227009,1.95568207 C9.37251572,2.28914837 9.23912211,2.59857059 8.98601081,2.82401624 C6.89378035,4.68757862 5.47234692,6.11906568 4.72757221,7.12245901 C5.96399279,6.97278806 8.20992443,6.93397958 9.82794216,8.43526965 C10.6783793,9.30679201 11.3046413,11.0266417 11.3046413,12.5047168 C11.3046413,13.5339769 10.9280571,15.3414517 9.51564267,16.6199505 C8.58467186,17.4626529 7.20265522,18.0823846 5.16892991,18.0823846 C3.40091502,18.0823846 2.16260864,17.425586 1.31799732,16.5055736 C0.162718988,15.24716 -0.25,13.4818261 -0.25,12.2020084 C-0.25,10.0315638 0.334455584,7.76919099 1.7121797,5.89548619 C2.52914003,4.78442014 4.24777459,3.16399983 6.8734282,1.03881387 C7.17259456,0.796651981 7.53561969,0.674052956 7.89950058,0.671462103 Z M5.32922518,9.8025891 C4.6382258,9.8025891 4.04832106,10.0601935 3.55849156,10.5729811 C3.05975583,11.0947999 2.80986131,11.7115104 2.80986131,12.4236018 C2.80986131,13.0455246 2.99088038,13.5455511 3.3671422,13.9171521 C3.74429717,14.2896352 4.24929892,14.4688125 4.87576209,14.4688125 C5.59425746,14.4688125 6.39722835,14.1257701 6.88290814,13.6265283 C7.15475157,13.349912 7.39914763,12.7483707 7.46134071,12.1312325 C7.50917463,11.6565793 7.4509925,11.1637422 7.17961503,10.8032798 C6.55225962,9.96998286 5.9402115,9.8025891 5.32922518,9.8025891 Z"></path>
+                            </g>
+                            <path d="M4.90253994,4.2131362 C4.87188952,5.59722506 4.21066815,7.41436989 2.6884442,8.64132769" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="0.738031915" opacity="0.6" stroke-linecap="round" filter="url(#filter-6)" transform="translate(3.795492, 6.427232) rotate(-165.000000) translate(-3.795492, -6.427232) "></path>
+                        </g>
+                        <g transform="translate(-0.000000, -0.000000)">
+                            <g id="666" fill-rule="nonzero">
+                                <use fill="#FF5959" xlink:href="#path-7"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                                <path stroke="#FFFFFF" stroke-width="0.5" d="M8.63618908,0.467452703 C9.00097327,0.467435224 9.36576365,0.586515452 9.66874251,0.82469537 C9.96801121,1.14209888 10.0912282,1.46088684 10.100302,1.75621398 C10.1105476,2.08968028 9.97715402,2.3991025 9.72404272,2.62454816 C7.63181227,4.48811053 6.21037884,5.91959759 5.46560412,6.92299093 C6.7020247,6.77331997 8.94795635,6.7345115 10.5659741,8.23580157 C11.4164112,9.10732392 12.0426733,10.8271737 12.0426733,12.3052487 C12.0426733,13.3345088 11.666089,15.1419836 10.2536746,16.4204824 C9.32270378,17.2631848 7.94068714,17.8829166 5.90696183,17.8829166 C4.13284425,17.8829166 2.89437066,17.2622739 2.03673647,16.3739344 C0.87582683,15.1714615 0.417428304,13.4629876 0.30006337,12.1047902 C0.0993438103,9.78197739 1.04769217,7.47993716 2.42924288,5.60102821 C3.24595835,4.49029516 4.9688009,2.89651593 7.60367369,0.82479516 C7.90662796,0.586584941 8.27140544,0.467470182 8.63618908,0.467452703 Z M6.06725709,9.60312102 C5.37625772,9.60312102 4.78635297,9.86072542 4.29652348,10.3735131 C3.79778775,10.8953318 3.54789323,11.5120424 3.54789323,12.2241337 C3.54789323,12.8460565 3.72891229,13.346083 4.10517412,13.717684 C4.48232909,14.0901671 4.98733084,14.2693444 5.61379401,14.2693444 C6.33228938,14.2693444 7.13526027,13.926302 7.62094005,13.4270603 C7.89278348,13.1504439 8.13717954,12.5489026 8.19937262,11.9317644 C8.24720655,11.4571112 8.18902441,10.9642741 7.91764695,10.6038117 C7.29029154,9.77051478 6.67824342,9.60312102 6.06725709,9.60312102 Z"></path>
+                            </g>
+                            <path d="M4.5493403,6.13919477 C4.51868988,7.52328363 3.85746851,9.34042846 2.33524456,10.5673863" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="0.738031915" opacity="0.6" stroke-linecap="round" filter="url(#filter-9)" transform="translate(3.442292, 8.353291) rotate(-176.000000) translate(-3.442292, -8.353291) "></path>
+                            <path d="M28.889123,8.81940025 C29.3842572,10.1381763 28.6981091,11.3682295 26.8306788,12.5095598" id="路径-12" stroke="url(#linearGradient-10)" stroke-width="0.738031915" opacity="0.6" stroke-linecap="round" filter="url(#filter-11)" transform="translate(27.937727, 10.664480) rotate(-60.000000) translate(-27.937727, -10.664480) "></path>
+                        </g>
+                    </g>
+                    <g id="路径-10" transform="translate(24.495479, 24.650667) rotate(-97.000000) translate(-24.495479, -24.650667) ">
+                        <use fill="#FFD047" fill-rule="evenodd" xlink:href="#path-12"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
+                    </g>
+                    <g id="路径-10" transform="translate(13.111050, 6.539088) rotate(-345.000000) translate(-13.111050, -6.539088) ">
+                        <use fill="#FFD047" fill-rule="evenodd" xlink:href="#path-14"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>