@titaui/pc 1.7.95 → 1.7.99

package/src/components/okr-detail/e-list/search-form/index.js

@@ -0,0 +1,134 @@
+import React, { useState, useMemo } from "react";
+import classNames from "classnames";
+import Toast from "../../../toast";
+import SliderInput from "../../../slider-input";
+import EStatusField from "./fields/e-status";
+import EOrderField from "./fields/e-order";
+import EUserField from "./fields/e-user";
+import { getUserInfo } from "../../../../utils/bs-global";
+import { getLocale } from "../../../../utils/getLocale";
+import "./index.scss";
+
+const preCls = "ode-search-form";
+
+export default (props) => {
+  const {
+    checkedStatus,
+    setCheckedStatus,
+    selectName,
+    setSelectName,
+    noteOrder,
+    setNoteOrder,
+    setSearchKey,
+    okrId,
+    selectUsers,
+    setSelectUsers,
+  } = props;
+
+  const loginUser = getUserInfo().Id;
+  const [hasRememberCondition, setHasRememberCondition] = useState(
+    localStorage.getItem(`hasRememberCondition${loginUser}`)
+  );
+
+  const handleSearchInputChange = (text) => {
+    setSearchKey(text);
+  };
+
+  const handleSearchClose = () => {
+    setSearchKey("");
+  };
+
+  const handleOpenOkrCardPage = () => {
+    window.open(
+      `${location.origin}/u/560000011/Home#okr/manage/milepost?work_id=${okrId}&detail_type=milepost`
+    );
+  };
+
+  const handleRemeberSearchCondition = () => {
+    localStorage.setItem(`hasRememberCondition${loginUser}`, "1");
+    localStorage.setItem(
+      `okrDrawerECheckedStatus${loginUser}`,
+      JSON.stringify(checkedStatus)
+    );
+    localStorage.setItem(`okrDrawerESelectName${loginUser}`, selectName);
+    localStorage.setItem(`okrDrawerENoteOrder${loginUser}`, noteOrder);
+    localStorage.setItem(
+      `okrDrawerESelectUsers${loginUser}`,
+      JSON.stringify(selectUsers)
+    );
+    setHasRememberCondition(true);
+    Toast.Success(getLocale('Mod_Successfuloperat'), { canClose: false });
+  };
+
+  const handleCancelRemeberSearchCondition = () => {
+    localStorage.setItem(`hasRememberCondition${loginUser}`, "");
+    localStorage.setItem(`okrDrawerECheckedStatus${loginUser}`, "");
+    localStorage.setItem(`okrDrawerESelectName${loginUser}`, "");
+    localStorage.setItem(`okrDrawerENoteOrder${loginUser}`, "");
+    localStorage.setItem(`okrDrawerESelectUsers${loginUser}`, "");
+    setHasRememberCondition(false);
+    Toast.Success(getLocale('Mod_Successfuloperat'), { canClose: false });
+  };
+
+  const showRemeberCondition = useMemo(() => {
+    if (
+      checkedStatus.length === 0 &&
+      selectUsers.length === 0 &&
+      selectName === "orderBySystem"
+    ) {
+      return false;
+    }
+    return true;
+  }, [checkedStatus, selectUsers, selectName]);
+
+  return (
+    <div className={preCls}>
+      <span>
+        <span>
+          <EStatusField
+            checkedStatus={checkedStatus}
+            setCheckedStatus={setCheckedStatus}
+          />
+          <EUserField
+            selectUsers={selectUsers}
+            setSelectUsers={setSelectUsers}
+          />
+          <EOrderField
+            selectName={selectName}
+            setSelectName={setSelectName}
+            noteOrder={noteOrder}
+            setNoteOrder={setNoteOrder}
+          />
+        </span>
+        {showRemeberCondition ? (
+          <span
+            className={classNames(`${preCls}__remember`)}
+            onClick={handleRemeberSearchCondition}
+          >
+            {getLocale('Pro_page_Plan_Remember')}
+          </span>
+        ) : null}
+        {hasRememberCondition && (
+          <span
+            className={classNames(`${preCls}__remember`)}
+            onClick={handleCancelRemeberSearchCondition}
+          >
+            {getLocale('OKR_MyO_Butt_Cancelremember')}
+          </span>
+        )}
+      </span>
+      <span className={classNames(`${preCls}__right-block`)}>
+        <SliderInput
+          onChange={handleSearchInputChange}
+          onClose={handleSearchClose}
+        />
+        <span
+          className={classNames(`${preCls}__column-icon`)}
+          onClick={handleOpenOkrCardPage}
+        >
+          <i className="tu-icon-tyle-column1" />
+        </span>
+      </span>
+    </div>
+  );
+};

package/src/components/okr-detail/e-list/search-form/index.scss

@@ -0,0 +1,102 @@
+$font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica,
+  sans-serif, PingFang SC, Microsoft YaHei;
+
+.okr-detail-e {
+  .ode-search-form {
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &__field {
+      display: inline-block;
+      padding-right: 8px;
+      padding-left: 10px;
+      position: relative;
+      font-size: 12px;
+      font-family: $font-family;
+      font-weight: 400;
+      color: #3f4755;
+      line-height: 18px;
+      cursor: pointer;
+
+      .tu-icon-arrow-down {
+        vertical-align: middle;
+      }
+
+      &:hover {
+        color: #2879ff;
+      }
+
+      &:not(:last-child):after {
+        display: inline-block;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 1px;
+        height: 100%;
+        content: "";
+        background: url(../images/vertical-line.svg);
+      }
+
+      &:nth-child(1) {
+        padding-left: 0;
+      }
+
+      &-status-dropdown {
+        display: inline-block;
+        width: 104px;
+        height: 192px;
+        background: #ffffff;
+        box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+        border: 1px solid #f0f2f5;
+      }
+
+      &-order-layer {
+        width: 132px;
+        height: 196px;
+        padding: 16px 24px;
+        background: #ffffff;
+        box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+        border: 1px solid #f0f2f5;
+      }
+    }
+
+    &__remember {
+      font-size: 12px;
+      font-family: $font-family;
+      font-weight: 400;
+      color: #2879ff;
+      line-height: 18px;
+      margin-left: 16px;
+      &:hover {
+        cursor: pointer;
+        color: #5c8eff;
+      }
+    }
+    &__right-block {
+      display: flex;
+      align-items: center;
+    }
+    &__column-icon {
+      display: inline-flex;
+      width: 28px;
+      height: 28px;
+      border: 1px solid #e9ecf0;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border-radius: 3px;
+      margin-left: 10px;
+      color: #89919f;
+      .tu-icon-tyle-column1 {
+        font-size: 18px;
+      }
+      &:hover {
+        color: #2879ff;
+        border: 1px solid #2879ff;
+        cursor: pointer;
+      }
+    }
+  }
+}

package/src/components/okr-detail/e-list/util.ts

@@ -0,0 +1,172 @@
+import cloneDeep from 'clone-deep';
+import { SortTypeMap, EStatusMap } from './constant';
+import { getUserInfo } from '../../../utils/bs-global';
+import { getLocale } from '../../../utils/getLocale';
+
+// 扁平数据转换为树
+export const toTree = data => {
+  const cloneData = cloneDeep(data);
+  const map = {}, res: any = [];
+  cloneData.forEach(item => map[item.taskId] = item);
+  cloneData.forEach(item => {
+    const parent = map[item.parentTaskId];
+    if (parent) {
+      if (!parent.children) parent.children = [];
+      parent.children.push(item);
+    } else {
+      res.push(item);
+    }
+  });
+  return res;
+}
+
+export const getETreeNode = (tasks, isFirstLevel, createUserId,krUser) => {
+  // 只有第一级的e为空的时候返回空节点信息
+  if ((!tasks || tasks.length === 0) && isFirstLevel) return [
+    {
+      'key': 0,
+      'index': 0,
+      'title': '',
+      'nodeType': 'e-empty',
+      'isLeaf': true,
+      'children': [],
+      'data': {},
+    }
+  ];
+  // 针对多级e情况下，最后一级e的tasks为空
+  if (!tasks) {
+    return [];
+  }
+  return tasks.map((task, index) => {
+    return {
+      'key': task.taskId,
+      'index': index,
+      'title': task.taskName,
+      'nodeType': task.objType == 4 ? 'e-project' : isFirstLevel ? 'e-task' : 'e-task-level2',
+      'isLeaf': task.children && task.children.length === 0,
+      'children': getETreeNode(task.children, false, createUserId,krUser),
+      'data': { ...task },
+      'createUserId':createUserId,
+      'krUser':{...krUser}
+    }
+  })
+}
+
+export const formatTreeDataToNode = (tree, isInitCondition) => {
+  if(isInitCondition) {
+    return tree.map((item, index) => {
+      return {
+        'key': item.mileStoneId,
+        'index': index,
+        'title': item.mileStoneId !== 0 ? item.mileStoneName : getLocale('OKR_MyO_Butt_Otherexecutions'),
+        'nodeType': 'e-kr',
+        'isLeaf': false,
+        'children': getETreeNode(item.tasks, true, item.createUserId,item.user),
+        'data': { ...item },
+        'isOTask': item.mileStoneId === 0
+      }
+    })
+  } else {
+    const result: any = [];
+    tree.forEach((item, index) => {
+      if (item.tasks && item.tasks.length > 0) {
+        result.push({
+          'key': item.mileStoneId,
+          'index': index,
+          'title': item.mileStoneId !== 0 ? item.mileStoneName : getLocale('OKR_MyO_Butt_Otherexecutions'),
+          'nodeType': 'e-kr',
+          'isLeaf': false,
+          'children': getETreeNode(item.tasks, true, item.createUserId,item.user),
+          'data': { ...item },
+          'isOTask': item.mileStoneId === 0
+        })
+      }
+    })
+    return result;
+  }
+}
+
+export const formatEListDataToSelectTree = (data, workId, isInitCondition) => {
+  const tree = data.map(item => {
+    return {
+      ...item,
+      'tasks': toTree(item.tasks)
+    }
+  })
+  const formatKrsTreeDataToNode = formatTreeDataToNode(tree.filter(d => d.mileStoneId !== 0), isInitCondition);
+  const formatOTreeDataToNode = formatTreeDataToNode(tree.filter(d => d.mileStoneId === 0), isInitCondition);
+  const result =  {
+    'krsEList': formatKrsTreeDataToNode,
+    'oEList': isInitCondition && formatOTreeDataToNode.length === 0 ? [[{
+      'key': 0,
+      'index': 0,
+      'title': getLocale('OKR_MyO_Butt_Otherexecutions'),
+      'nodeType': 'e-kr',
+      'isLeaf': false,
+      'children': [
+        {
+          'key': "1",
+          'index': 0,
+          'title': "",
+          'nodeType': "e-empty",
+          'isLeaf': true,
+          'children': [],
+          'data': {},
+        }
+      ],
+      'data': {
+        workId,
+        mileStoneId: 0
+      },
+      'isOTask': true
+    }]] : [formatOTreeDataToNode]
+  }
+  return result;
+}
+
+export const formatCondition = ({okrId, noteOrder, selectName, checkedStatus, users, keyWord}) => {
+  let resultStatus: number[] = [];
+
+  if (checkedStatus.includes('all')) {
+    resultStatus = [0,1,2,3,4,6]
+  } else {
+    checkedStatus.forEach((statusCondition) => {
+      resultStatus.push(EStatusMap[statusCondition]);
+    })
+  }
+
+  return {
+    'sortType': selectName ? selectName === 'orderBySystem' ? 1 : SortTypeMap[selectName][noteOrder] : 1,
+    'work_id': okrId,
+    'startNum': 1,
+    'count': 1000,
+    'relation': 1,
+    'detail_type': 'pq',
+    'appId': 1,
+    'appType': 1,
+    'taskType': 0,
+    'COUNT': 1000,
+    'to_user_id': getUserInfo().Id,
+    'pageIndex': 1,
+    'FeedId': 0,
+    'filter': 1,
+    'toLevel': 999,
+    'app_id': 1,
+    'app_type': 1,
+    'FilterKey': keyWord,
+    'status': resultStatus.join(','),
+    'userObjects': users.map(user => ({
+      id: user.userId,
+      name: user.name,
+      email: user.email
+    }))
+  }
+
+}
+
+export const getIfInitCondition = (selectName, checkedStatus, users, keyWord) => {
+  if (keyWord || selectName !== 'orderBySystem' || checkedStatus.length !== 0 || users.length !== 0) {
+    return false;
+  }
+  return true;
+}

package/src/components/okr-detail/error-page/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Drawer from '../../drawer'
+import './index.scss'
+
+function OkrDetailErrorPage({message}) {
+  if(!message || typeof message != 'string'){
+    message = '抱歉，出现未知异常'
+  }
+  return (
+    <div className="okr-detail-drawer-error">
+      <Drawer.Header/>
+      <div className="okr-detail-drawer-error-body">
+        <img src={require('../images/empty-131.png')}/>
+        <span>{message}</span>
+      </div>
+    </div>
+  )
+}
+
+export default OkrDetailErrorPage

package/src/components/okr-detail/error-page/index.scss

@@ -0,0 +1,22 @@
+.okr-detail-drawer-error {
+  height: 100%;;
+  display: flex;
+  flex-direction: column;
+  &-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    & > img {
+      width: 128px;
+      height: 125px;
+      margin-bottom: 19px;
+    }
+    & > span {
+      font-size: 14px;
+      color: #3F4755;
+      line-height: 22px;
+    }
+  }
+}

package/src/components/okr-detail/images/P1.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>P1</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-1895.000000, -184.000000)" fill="#F05E5E" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(1871.000000, 156.000000)">
+                <g id="form-/-text-copy-6" transform="translate(24.000000, 19.000000)">
+                    <g id="标签" transform="translate(0.000000, 9.000000)">
+                        <path d="M3.80174927,13.7142857 L3.80174927,9.70017637 L6.10667124,9.70017637 C7.13565426,9.6813639 7.91768136,9.34273956 8.45275253,8.68430335 C8.97410393,8.05878895 9.23477963,7.36507937 9.23477963,6.6031746 C9.23477963,6.03880071 9.13188132,5.54967666 8.92608472,5.13580247 C8.72943463,4.70781893 8.47333219,4.37860082 8.1577774,4.14814815 C7.78277025,3.84244562 7.41233636,3.64021164 7.04647573,3.54144621 C6.6806151,3.46619636 6.3010347,3.42857143 5.90773452,3.42857143 L2.28571429,3.42857143 L2.28571429,13.7142857 L3.80174927,13.7142857 Z M6.04493226,8.22574956 L3.80174927,8.22574956 L3.80174927,4.90299824 L5.99005316,4.90299824 C6.40164637,4.893592 6.76293374,4.99000588 7.07391528,5.19223986 C7.27971188,5.31452087 7.43977591,5.48148148 7.55410736,5.69312169 C7.66386555,5.92827748 7.71874464,6.21751911 7.71874464,6.56084656 C7.71874464,6.97472075 7.58383353,7.35097002 7.31401132,7.68959436 C7.03046933,8.03762493 6.60744298,8.21634333 6.04493226,8.22574956 Z M13.7142857,13.7142857 L13.7142857,3.42857143 L12.2805694,3.42857143 L10.8605728,4.49382716 L10.8605728,6.05996473 L12.2805694,4.98765432 L12.2805694,13.7142857 L13.7142857,13.7142857 Z" id="P1"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/images/P2.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>P2</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-1895.000000, -215.000000)" fill="#F6BD16" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(1871.000000, 156.000000)">
+                <g id="form-/-text-copy-6" transform="translate(24.000000, 19.000000)">
+                    <g id="标签" transform="translate(0.000000, 40.000000)">
+                        <path d="M2.69158333,13.1428571 L2.69158333,9.16151603 L5.04620775,9.16151603 C6.09737937,9.14285714 6.8962698,8.80699708 7.44287904,8.15393586 C7.97547266,7.5335277 8.24176947,6.84548105 8.24176947,6.08979592 C8.24176947,5.53002915 8.13665231,5.04489796 7.92641799,4.63440233 C7.72552741,4.20991254 7.46390247,3.88338192 7.14154318,3.6548105 C6.75844952,3.3516035 6.38002774,3.15102041 6.00627783,3.05306122 C5.63252792,2.97842566 5.24476239,2.94110787 4.84298124,2.94110787 L1.14285714,2.94110787 L1.14285714,13.1428571 L2.69158333,13.1428571 Z M4.98313746,7.69912536 L2.69158333,7.69912536 L2.69158333,4.40349854 L4.92707497,4.40349854 C5.34754362,4.3941691 5.71662165,4.48979592 6.03430907,4.69037901 C6.2445434,4.81166181 6.40805898,4.97725948 6.52485583,5.18717201 C6.6369808,5.42040816 6.69304329,5.70728863 6.69304329,6.04781341 C6.69304329,6.45830904 6.55522301,6.83148688 6.27958245,7.16734694 C5.98992627,7.51253644 5.55777794,7.68979592 4.98313746,7.69912536 Z M14.8571429,13.1428571 L14.8571429,11.6804665 L10.9537922,11.6804665 L14.2404555,7.56618076 C14.6515804,7.04373178 14.8571429,6.44664723 14.8571429,5.77492711 C14.8477991,4.93527697 14.5651507,4.2425656 14.0091978,3.696793 C13.4625885,3.14635569 12.7501277,2.8664723 11.8718155,2.85714286 C11.0869407,2.8664723 10.4258705,3.14169096 9.88860501,3.68279883 C9.35601139,4.23790087 9.07102708,4.93994169 9.03365209,5.78892128 L10.4912767,5.78892128 C10.5426673,5.32244898 10.7061829,4.96093294 10.9818235,4.70437318 C11.2481203,4.44781341 11.5821593,4.31953353 11.9839404,4.31953353 C12.4371122,4.32886297 12.7875027,4.47580175 13.0351121,4.76034985 C13.2733776,5.04489796 13.3925104,5.37842566 13.3925104,5.76093294 C13.3925104,5.90553936 13.3738229,6.05947522 13.3364479,6.22274052 C13.2803854,6.39533528 13.1752683,6.5819242 13.0210964,6.78250729 L9.03365209,11.7644315 L9.03365209,13.1428571 L14.8571429,13.1428571 Z" id="P2"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/images/P3.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>P3</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-1895.000000, -247.000000)" fill="#2879FF" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(1871.000000, 156.000000)">
+                <g id="form-/-text-copy-6" transform="translate(24.000000, 19.000000)">
+                    <g id="标签" transform="translate(0.000000, 72.000000)">
+                        <path d="M2.70274245,13.059572 L2.70274245,9.11046848 L5.07433277,9.11046848 C6.13307845,9.09196067 6.93772517,8.75882013 7.48827292,8.11104685 C8.02470407,7.49566223 8.29291964,6.81318681 8.29291964,6.06362059 C8.29291964,5.50838635 8.18704507,5.02718334 7.97529593,4.62001157 C7.77295787,4.19895894 7.50944783,3.8750723 7.18476583,3.64835165 C6.79891184,3.34759977 6.4177634,3.14864083 6.04132049,3.05147484 C5.66487758,2.97744361 5.27431806,2.94042799 4.86964194,2.94042799 L1.14285714,2.94042799 L1.14285714,13.059572 L2.70274245,13.059572 Z M5.01080803,7.65991903 L2.70274245,7.65991903 L2.70274245,4.39097744 L4.95434159,4.39097744 C5.37783986,4.38172354 5.74957724,4.47657606 6.06955371,4.67553499 C6.28130285,4.79583574 6.44599662,4.96009254 6.56363503,5.16830538 C6.6765679,5.39965298 6.73303434,5.68421053 6.73303434,6.02197802 C6.73303434,6.4291498 6.59422101,6.79930596 6.31659437,7.1324465 C6.02485111,7.47484095 5.589589,7.65066512 5.01080803,7.65991903 Z M11.7303139,13.1428571 C12.6384825,13.1336032 13.3819572,12.8490457 13.9607382,12.2891845 C14.5489302,11.7432042 14.8477318,10.9959514 14.8571429,10.0474263 C14.8571429,9.62174667 14.7653849,9.2145749 14.581869,8.82591093 C14.388942,8.43724696 14.0760238,8.10410642 13.6431145,7.8264893 C14.0666127,7.54424523 14.3607088,7.22267206 14.5254025,6.86176981 C14.6665686,6.50086755 14.7371517,6.12608444 14.7371517,5.73742047 C14.7277406,4.96934644 14.459525,4.30306536 13.932505,3.73857721 C13.3819572,3.16020821 12.6384825,2.86639676 11.7020807,2.85714286 C10.9633115,2.86639676 10.3280641,3.12550607 9.7963385,3.63447079 C9.25520182,4.14806246 8.94698919,4.77964141 8.87170061,5.52920763 L10.3468863,5.52920763 C10.440997,5.11278195 10.6245129,4.80508965 10.897434,4.60613071 C11.1562385,4.40717178 11.4432762,4.30769231 11.7585472,4.30769231 C12.196162,4.31694621 12.5537828,4.4534413 12.8314095,4.71717756 C13.1090361,4.99016773 13.252555,5.3395026 13.261966,5.76518219 C13.261966,6.18623482 13.1231527,6.52862927 12.8455261,6.79236553 C12.5678994,7.0653557 12.1773399,7.20185078 11.6738475,7.20185078 L11.1656496,7.20185078 L11.1656496,8.48582996 L11.7867804,8.48582996 C12.2432174,8.48582996 12.6196603,8.62232504 12.9161091,8.89531521 C13.2172634,9.17755928 13.3725461,9.57547715 13.3819572,10.0890688 C13.3725461,10.5934066 13.2172634,10.9820706 12.9161091,11.2550607 C12.6196603,11.5465587 12.2549813,11.6923077 11.8220719,11.6923077 C11.4173958,11.6923077 11.0927138,11.5835743 10.8480259,11.3661076 C10.6080435,11.1578947 10.4221748,10.8849046 10.2904198,10.5471371 L8.81523417,10.5471371 C8.97522241,11.3892423 9.32578487,12.0323887 9.86692155,12.4765761 C10.4080582,12.9207634 11.029189,13.1428571 11.7303139,13.1428571 Z" id="P3"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/images/P4.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>P4</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-1895.000000, -279.000000)" fill="#5AD8A6" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(1871.000000, 156.000000)">
+                <g id="form-/-text-copy-6" transform="translate(24.000000, 19.000000)">
+                    <g id="编组-39" transform="translate(0.000000, 104.000000)">
+                        <path d="M2.64476851,13.1428571 L2.64476851,9.1287478 L4.92821747,9.1287478 C5.94761433,9.10993533 6.72235594,8.77131099 7.2524423,8.11287478 C7.76893671,7.48736038 8.02718392,6.79365079 8.02718392,6.03174603 C8.02718392,5.46737213 7.92524423,4.97824809 7.72136486,4.5643739 C7.52654679,4.13639036 7.27283024,3.80717225 6.96021521,3.57671958 C6.58870168,3.27101705 6.22171882,3.06878307 5.8592666,2.97001764 C5.49681438,2.89476778 5.12077021,2.85714286 4.73113408,2.85714286 L1.14285714,2.85714286 L1.14285714,13.1428571 L2.64476851,13.1428571 Z M4.86705366,7.65432099 L2.64476851,7.65432099 L2.64476851,4.33156966 L4.81268583,4.33156966 C5.22044457,4.32216343 5.57836613,4.41857731 5.88645052,4.62081129 C6.09032989,4.7430923 6.24890273,4.91005291 6.36216905,5.12169312 C6.47090471,5.35684891 6.52527255,5.64609053 6.52527255,5.98941799 C6.52527255,6.40329218 6.39161829,6.77954145 6.12430978,7.11816578 C5.84340932,7.46619636 5.42432394,7.64491476 4.86705366,7.65432099 Z M14.0688093,13.1428571 L14.0688093,11.6119929 L14.8571429,11.6119929 L14.8571429,10.2222222 L14.0688093,10.2222222 L14.0688093,7.26631393 L12.6484497,7.26631393 L12.6484497,10.2222222 L10.0591817,10.2222222 L13.4095993,2.85714286 L11.8261362,2.85714286 L8.51649441,10.2222222 L8.51649441,11.6119929 L12.6484497,11.6119929 L12.6484497,13.1428571 L14.0688093,13.1428571 Z" id="P4"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/images/P5.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>P5</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-1895.000000, -311.000000)" fill="#A4ACB9" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(1871.000000, 156.000000)">
+                <g id="form-/-text-copy-6" transform="translate(24.000000, 19.000000)">
+                    <g id="编组-26" transform="translate(0.000000, 136.000000)">
+                        <path d="M2.68370978,13.0588921 L2.68370978,9.07755102 L5.02636357,9.07755102 C6.07219115,9.05889213 6.86702012,8.72303207 7.41085046,8.06997085 C7.94073644,7.44956268 8.20567942,6.76151603 8.20567942,6.0058309 C8.20567942,5.44606414 8.10109667,4.96093294 7.89193115,4.55043732 C7.69206188,4.12594752 7.43176701,3.79941691 7.11104655,3.57084548 C6.7299005,3.26763848 6.35340257,3.06705539 5.98155276,2.96909621 C5.60970296,2.89446064 5.22390878,2.85714286 4.82417024,2.85714286 L1.14285714,2.85714286 L1.14285714,13.0588921 L2.68370978,13.0588921 Z M4.96361392,7.61516035 L2.68370978,7.61516035 L2.68370978,4.31953353 L4.90783644,4.31953353 C5.32616748,4.31020408 5.69336916,4.4058309 6.0094415,4.60641399 C6.21860702,4.72769679 6.38129131,4.89329446 6.49749437,5.103207 C6.60904931,5.33644315 6.66482678,5.62332362 6.66482678,5.9638484 C6.66482678,6.37434402 6.52770717,6.74752187 6.25346794,7.08338192 C5.96528433,7.42857143 5.53533299,7.6058309 4.96361392,7.61516035 Z M12.0334084,13.1428571 C12.5447019,13.1335277 12.9862735,13.0145773 13.3581233,12.7860058 C13.7392694,12.5667638 14.029777,12.3241983 14.2296463,12.058309 C14.4574043,11.7877551 14.6200886,11.477551 14.7176992,11.1276968 C14.8106616,10.7731778 14.8571429,10.264723 14.8571429,9.60233236 C14.8571429,9.17317784 14.8431985,8.81166181 14.8153098,8.51778426 C14.787421,8.22857143 14.7409398,7.98367347 14.6758661,7.78309038 C14.5503668,7.41457726 14.3458494,7.09037901 14.0623139,6.81049563 C13.8717409,6.60058309 13.6230663,6.42332362 13.3162902,6.2787172 C12.9909216,6.14810496 12.6330162,6.07813411 12.2425739,6.06880466 C11.6336698,6.06880466 11.0921636,6.25539359 10.6180551,6.62857143 L10.6180551,4.31953353 L14.6619217,4.31953353 L14.6619217,2.85714286 L9.24453482,2.85714286 L9.24453482,8.37084548 L10.6180551,8.37084548 C10.7900356,8.05830904 10.9852567,7.83906706 11.2037185,7.71311953 C11.4221803,7.59183673 11.6638826,7.53119534 11.9288256,7.53119534 C12.2263055,7.53119534 12.47498,7.57317784 12.6748493,7.65714286 C12.8747186,7.75976676 13.0257826,7.89737609 13.1280413,8.06997085 C13.3186143,8.43381924 13.4092527,8.90728863 13.3999564,9.49037901 C13.3999564,9.72827988 13.3953083,9.97317784 13.3860121,10.2250729 C13.3674196,10.4816327 13.3162902,10.7195335 13.232624,10.9387755 C13.1536059,11.1580175 13.0141622,11.335277 12.814293,11.4705539 C12.6051275,11.6104956 12.3262401,11.6804665 11.9776309,11.6804665 C11.1642095,11.671137 10.6784806,11.2746356 10.5204445,10.4909621 L9.06325804,10.4909621 C9.20270172,11.4285714 9.56293122,12.1072886 10.1439465,12.5271137 C10.7156656,12.9376093 11.3454862,13.1428571 12.0334084,13.1428571 Z" id="P5"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/images/arrow.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>下</title>
+    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选人-交互说明" transform="translate(-1009.000000, -1108.000000)" fill="#6F7886" fill-rule="nonzero">
+            <path d="M1012.46263,1113.47956 L1014.8652,1109.85528 C1015.0031,1109.64723 1015.02653,1109.36711 1014.92563,1109.13259 C1014.82473,1108.89806 1014.61698,1108.74977 1014.38966,1108.75 L1009.58528,1108.75 C1009.35805,1108.75 1009.15048,1108.89837 1009.0497,1109.13284 C1008.94892,1109.36732 1008.97239,1109.64731 1009.11024,1109.85528 L1011.51281,1113.47956 C1011.62585,1113.65 1011.80146,1113.75 1011.98772,1113.75 C1012.17398,1113.75 1012.34959,1113.65 1012.46263,1113.47956 L1012.46263,1113.47956 Z" id="下"></path>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/images/followed.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>个人关注</title>
+    <defs>
+        <polygon id="path-1" points="0 1.00045 17.9999551 1.00045 17.9999551 16.405075 0 16.405075"></polygon>
+        <linearGradient x1="0.25764171%" y1="0%" x2="99.7423583%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#FFE1A5" offset="0%"></stop>
+            <stop stop-color="#FBB221" offset="100%"></stop>
+        </linearGradient>
+        <path d="M16.9495342,8.36 C17.3095342,7.96 17.4695342,7.40000001 17.2695341,6.88 C17.1095342,6.36 16.6695342,6 16.1895341,5.96000001 L12.3095341,5.36 C12.1495341,5.31999999 12.0295341,5.23999999 11.9495341,5.08 L10.1895342,1.4 C9.94953416,0.919999992 9.46953415,0.6 8.94953416,0.6 C8.42953416,0.6 7.94953415,0.880000002 7.70953416,1.4 L5.98953416,5.08 C5.90953416,5.23999999 5.78953415,5.36 5.62953416,5.36 L1.74953416,5.96000001 C1.22953416,6.04000001 0.829534153,6.40000001 0.669534157,6.88 C0.509534161,7.39999999 0.629534149,7.96 0.989534149,8.36 L3.82953416,11.24 C3.94953416,11.36 3.98953415,11.52 3.94953415,11.72 L3.26953415,15.76 C3.18953416,16.32 3.38953416,16.84 3.86953415,17.16 C4.30953415,17.44 4.82953414,17.48 5.30953415,17.24 L8.78953416,15.32 C8.90953417,15.24 9.06953416,15.24 9.18953415,15.32 L12.6695341,17.24 C12.8695341,17.36 13.1095341,17.4 13.3095341,17.4 C13.5895341,17.4 13.8695342,17.32 14.1095341,17.16 C14.5495341,16.84 14.7895341,16.32 14.6695341,15.76 L13.9895342,11.68 C13.9495341,11.52 14.0295342,11.32 14.1495342,11.2 L16.9495342,8.36 Z" id="path-4"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="推屏顶部-交互说明" transform="translate(-1172.000000, -571.000000)">
+            <g id="编组-7" transform="translate(1138.000000, 570.000000)">
+                <g id="编组-22" transform="translate(0.000000, 1.000000)">
+                    <g id="个人关注" transform="translate(34.000000, 0.000000)">
+                        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="18" height="18"></rect>
+                        <g id="yiguanzhu-">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <g id="Clip-2"></g>
+                            <mask id="mask-5" fill="white">
+                                <use xlink:href="#path-4"></use>
+                            </mask>
+                            <use id="路径" fill="url(#linearGradient-3)" fill-rule="nonzero" xlink:href="#path-4"></use>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>