@titaui/pc 1.7.13 → 1.7.17

package/src/components/grid-page/commen-components/scroll-tips.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState, Fragment } from 'react';
+import { testDayChange } from '../../../utils/date-test-change';
+import Avatar from '../../avatar';
+import { OpenUserName } from '../../../utils/open-data';
+
+interface Props {
+  iconsrc?: string;
+  message: ScrollMessage;
+  content: string;
+  styles?: React.CSSProperties;
+}
+
+export interface ScrollMessage {
+  name: string;
+  date: string;
+  userId: number;
+  avatarSrc?: string;
+  avatarColor?: string;
+}
+
+export default function ScrollTips(props: Props) {
+  const {
+    iconsrc = require('../image/Notification.png'),
+    message,
+    content,
+    styles = {},
+  } = props;
+
+  const [updateTime, setUpdateTime] = useState(
+    message && testDayChange(message.date)
+  );
+
+  useEffect(() => {
+    setUpdateTime(message && testDayChange(message.date));
+  }, [message && message.date]);
+
+  return (
+    <div className="grid-component-scrollTips" style={styles}>
+      <img className="grid-component-scrollTips__img" src={iconsrc} />
+      <span className="grid-component-scrollTips__tip__content">
+        <OpenUserName name={message.name} id={message.userId} /> {content}
+      </span>
+      <span className="grid-component-scrollTips__tip__date">
+        {' '}
+        {updateTime}
+      </span>
+    </div>
+  );
+}
+
+export const AvatarTips = ({ message, content, styles = {} }: Props) => {
+  const [updateTime, setUpdateTime] = useState(
+    message && testDayChange(message.date)
+  );
+
+  useEffect(() => {
+    setUpdateTime(message && testDayChange(message.date));
+  }, [message && message.date]);
+  console.log(updateTime);
+
+  return (
+    <div className="grid-component-scrollTips" style={styles}>
+      {message && message.name ? (
+        <Fragment>
+          <div className="grid-component-scrollTips__img--avatar">
+            <Avatar
+              color={message.avatarColor as string}
+              name={message.name}
+              size={{ width: 20, textNum: 1, fontSize: 12 }}
+              src={message.avatarSrc}
+            />
+          </div>
+          <span className="grid-component-scrollTips__tip__content">
+            <OpenUserName name={message.name} id={message.userId} /> {content}
+          </span>
+          <span className="grid-component-scrollTips__tip__date">
+            {' '}
+            {updateTime}
+          </span>
+        </Fragment>
+      ) : (
+        <span
+          className="grid-component-scrollTips__tip__content"
+          style={{ textAlign: 'center' }}
+        >
+          {content}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/grid-page/near-visitors/visitor.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState, useRef } from 'react';
+import Tooltip from '../../tooltip';
+import Avatar from '../../avatar';
+import { testDayChange } from '../../../utils/date-test-change';
+import { OpenUserName } from '../../../utils/open-data';
+
+interface Props {
+  iconSrc: string;
+  name: string;
+  dateTime: string;
+  avatarColor: string;
+  userId: number;
+}
+
+export default function Visitor(props: Props) {
+  const { iconSrc, name, dateTime, avatarColor, userId } = props;
+
+  const [visitTime, setVisitTime] = useState(testDayChange(dateTime));
+  const toolTipRef = useRef<any>();
+
+  useEffect(() => {
+    setVisitTime(testDayChange(dateTime));
+  }, [dateTime]);
+
+  return (
+    <div className="nearVisitors-Component-visitor__item" ref={toolTipRef}>
+      <Avatar
+        name={name}
+        color={avatarColor}
+        src={iconSrc}
+        size={{ width: 48, textNum: 1, fontSize: 12 }}
+      />
+      <Tooltip
+        overlay={name}
+        placement="top"
+        getTooltipContainer={() => toolTipRef.current.parentNode}
+      >
+        <div className="nearVisitors-Component-visitor__item__name">
+          <OpenUserName name={name} id={userId} />
+        </div>
+      </Tooltip>
+      <div className="nearVisitors-Component-visitor__item__date">
+        {visitTime}
+      </div>
+    </div>
+  );
+}

package/src/components/grid-page/personal-info/index.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { CardContainer } from '../commen-components';
+import { AvatarTips, ScrollMessage } from '../commen-components/scroll-tips';
+import postComponentForData from '../util/network';
+import Avatar from '../../avatar';
+import Tooltip from '../../tooltip';
+import { OpenUserName, OpenDepartmentName } from '../../../utils/open-data';
+
+import './index.scss';
+
+const ComponentId = 'Personal-Information-Display';
+
+export default function PersonalInfoComponent() {
+  const [avatarUrl, setAvatarUrl] = useState('');
+  const [userName, setUserName] = useState({
+    name: '',
+    userId: -1,
+  });
+  const [department, setDepartment] = useState({
+    name: '',
+    departmentId: -1,
+  });
+  const [fansNum, setFansNum] = useState(0);
+  const [likeNum, setLikeNum] = useState(0);
+  const [scrollMessage, setScrollMessage] = useState<ScrollMessage>({
+    name: '',
+    date: '',
+    userId: -1,
+  });
+  const [userRoles, setUserRoles] = useState<string[]>([]);
+  const [avatarColor, setAvatarColor] = useState('');
+  const toolTipRef = useRef<any>();
+  useEffect(() => {
+    //获取个人标签
+    //@ts-ignore
+    const loginUserInfo = BSGlobal && BSGlobal.loginUserInfo;
+    const userRoleList: string[] = [];
+    for (let item in loginUserInfo) {
+      switch (item) {
+        case 'IsBoss':
+          loginUserInfo['IsBoss'] && userRoleList.push('boss');
+          break;
+        case 'Role':
+          loginUserInfo['Role'] === 2 && userRoleList.push('super');
+          loginUserInfo['Role'] === 4 && userRoleList.push('userManager');
+          break;
+        case 'IsTitaFeedSystemManager':
+          loginUserInfo['IsTitaFeedSystemManager'] &&
+            userRoleList.push('assistant');
+          break;
+      }
+    }
+    setUserRoles(userRoleList.slice(0, 2));
+    //请求获取信息
+    postComponentForData(ComponentId).then((res) => {
+      for (let item of res) {
+        switch (item.componentDataProp) {
+          case 'myInfo':
+            setAvatarUrl(item.componentData[0].simpleUserModelV2.avatar.large);
+            setUserName({
+              name: item.componentData[0].simpleUserModelV2.name,
+              userId: item.componentData[0].simpleUserModelV2.userId,
+            });
+            setDepartment({
+              name: item.componentData[0].simpleUserModelV2.departmentName,
+              departmentId:
+                item.componentData[0].simpleUserModelV2.departmentId,
+            });
+            setAvatarColor(
+              item.componentData[0].simpleUserModelV2.avatar.color
+            );
+            break;
+          case 'myFollowInfo':
+            setFansNum(item.componentData[0].total);
+            break;
+          case 'myPraiseInfo':
+            setLikeNum(item.componentDataCount);
+            break;
+          case 'latelyFPInfo':
+            item.componentData[0] &&
+              setScrollMessage({
+                name: item.componentData[0].simpleUserModelV2.name,
+                date: item.componentData[0].folowPariseDate,
+                userId: item.componentData[0].simpleUserModelV2.userId,
+                avatarSrc: item.componentData[0].simpleUserModelV2.avatar.large,
+                avatarColor:
+                  item.componentData[0].simpleUserModelV2.avatar.color,
+              });
+            break;
+        }
+      }
+    });
+  }, []);
+
+  return (
+    <CardContainer>
+      <div className="PersonalInfoComponent-PersonalInfo__photoMask">
+        <div className="PersonalInfoComponent-PersonalInfo__maskimg">
+          <div className="PersonalInfoComponent-PersonalInfo__maskimg-mask" />
+          <img
+            className="PersonalInfoComponent-PersonalInfo__maskimg-img"
+            style={{ filter: avatarUrl ? 'blur(10px)' : 'blur(6px)' }}
+            src={avatarUrl || require('../image/default-background-img.png')}
+          />
+        </div>
+      </div>
+      <div
+        className="PersonalInfoComponent-PersonalInfo__personInfo"
+        ref={toolTipRef}
+      >
+        <div className="PersonalInfoComponent-PersonalInfo__personInfo--avatar">
+          <Avatar
+            name={userName.name}
+            color={avatarColor}
+            size={{ width: 56, textNum: 3, fontSize: 14 }}
+            src={avatarUrl}
+          />
+        </div>
+        <Tooltip
+          overlay={`${userName.name}·${department.name}`}
+          getTooltipContainer={() => toolTipRef.current}
+          placement="top"
+        >
+          <p className="PersonalInfoComponent-PersonalInfo__personInfo__info">
+            <span style={{ textAlign: 'right' }}>
+              <OpenUserName name={userName.name} id={userName.userId} />
+            </span>
+            <i />
+            <span style={{ textAlign: 'left' }}>
+              <OpenDepartmentName
+                name={department.name}
+                id={department.departmentId}
+              />
+            </span>
+          </p>
+        </Tooltip>
+
+        <div className="PersonalInfoComponent-PersonalInfo__personInfo__label">
+          {userRoles.map((item, index) => (
+            <img src={require(`../image/${item}-icon.svg`)} key={index} />
+          ))}
+        </div>
+      </div>
+
+      <div className="PersonalInfoComponent-PersonalInfo__fansinfo">
+        <span className="PersonalInfoComponent-PersonalInfo__fansinfo__attention">
+          <img src={require('../image/visit-icon.png')} /> <b>{fansNum}</b>
+          人关注
+        </span>
+        <span className="PersonalInfoComponent-PersonalInfo__fansinfo__like">
+          <img src={require('../image/liking.png')} /> <b>{likeNum}</b>次点赞
+        </span>
+      </div>
+      {scrollMessage.name && scrollMessage.name.length ? (
+        <AvatarTips
+          message={scrollMessage}
+          content="关注了我"
+          styles={{ height: '28px', padding: '0 28px', lineHeight: '28px' }}
+        />
+      ) : (
+        //@ts-ignore
+        <AvatarTips
+          content="🥰 小窗为您播报最新消息"
+          styles={{ height: '28px', padding: '0 28px', lineHeight: '28px' }}
+        />
+      )}
+    </CardContainer>
+  );
+}

package/src/components/help-card/image/canceled.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="整体框架" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="二级菜单-交互说明" transform="translate(-1895.000000, -977.000000)" fill="#141C28">
+            <g id="弹层1" transform="translate(1881.000000, 467.000000)">
+                <g id="canceled" transform="translate(14.000000, 510.000000)">
+                    <path d="M18.5178716,4.33431458 C18.8693434,3.98284271 19.4391919,3.98284271 19.7906638,4.33431458 C20.1421356,4.68578644 20.1421356,5.25563492 19.7906638,5.60710678 L19.7906638,5.60710678 L13.2847107,12.1117107 L19.7906638,18.6178716 C20.1421356,18.9693434 20.1421356,19.5391919 19.7906638,19.8906638 C19.4391919,20.2421356 18.8693434,20.2421356 18.5178716,19.8906638 L12.0117107,13.3847107 L5.50710678,19.8906638 C5.18492424,20.2128463 4.67924468,20.2396948 4.3264793,19.9712094 L4.23431458,19.8906638 C3.88284271,19.5391919 3.88284271,18.9693434 4.23431458,18.6178716 L4.23431458,18.6178716 L10.7397107,12.1117107 L4.23431458,5.60710678 C3.88284271,5.25563492 3.88284271,4.68578644 4.23431458,4.33431458 C4.58578644,3.98284271 5.15563492,3.98284271 5.50710678,4.33431458 L12.0117107,10.8397107 Z" id="形状结合"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/help-card/image/helpzx.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>helpzx</title>
+    <g id="helpzx" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M132.100002,108.736844 L116.299995,92.1052584 C113.256909,88.9020093 108.193253,88.772172 104.990004,91.8152586 C104.890875,91.9094311 104.794177,92.0061295 104.700005,92.1052584 L88.8999977,108.736844 C87.3784544,110.338469 84.8466267,110.403388 83.2450022,108.881844 C82.4500803,108.126669 82,107.078291 82,105.981847 C82,91.3542918 82,76.726737 82,62.0991821 C82,50.7327881 82,39.366394 82,28 L139,28 L139,105.981847 C139,108.190986 137.209139,109.981847 135,109.981847 C133.903555,109.981847 132.855178,109.531766 132.100002,108.736844 Z" id="路径" fill="#F6BD16"></path>
+        <path d="M200,193 C200,193.383957 199.972951,193.761597 199.920654,194.131118 C198.831578,208.599171 186.747192,220 172,220 L172,220 L80,220 C59.4863206,220 42.5793084,204.558022 40.2690262,184.66413 C40.1138712,184.082029 40.0229428,183.474638 40.0038068,182.849179 L40,182.6 L40,181.733333 C40,181.459486 40.0033981,181.186441 40.0101575,180.914228 C40.0034299,180.610651 40,180.305726 40,180 L40,180 L40,60 C40,37.90861 57.90861,20 80,20 L80,20 L172,20 C187.463973,20 200,32.536027 200,48 L200,48 L200,193 Z M184,162 L80,162 C66.839626,162 56.5138595,170.671159 56.0186028,180.959762 C56.5226026,193.769642 67.0665873,204 80,204 L80,204 L172,204 C178.627417,204 184,198.627417 184,192 L184,192 L184,162 Z M172,36 L80,36 C66.745166,36 56,46.745166 56,60 L56,60 L55.9995982,153.130194 C62.5510892,148.748493 70.6400598,146.129933 79.3454109,146.004706 L80,146 L184,146 L184,48 C184,41.4745433 178.791456,36.1656072 172.304975,36.0037999 L172,36 Z" id="形状结合" fill="#141C28" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/components/help-card/image/kefu.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="整体框架" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="头像" transform="translate(-34.000000, -734.000000)">
+            <g id="编组-9" transform="translate(20.000000, 720.000000)">
+                <g id="kefu" transform="translate(14.000000, 14.000000)">
+                    <path d="M4.4,8.8 C4.8418278,8.8 5.2418278,8.9790861 5.53137085,9.26862915 C5.8209139,9.5581722 6,9.9581722 6,10.4 L6,10.4 L6,13.6 C6,14.0418278 5.8209139,14.4418278 5.53137085,14.7313708 C5.2418278,15.0209139 4.8418278,15.2 4.4,15.2 C3.9581722,15.2 3.5581722,15.0209139 3.26862915,14.7313708 C2.9790861,14.4418278 2.8,14.0418278 2.8,13.6 L2.8,13.6 L2.8,10.4 C2.8,9.9581722 2.9790861,9.5581722 3.26862915,9.26862915 C3.5581722,8.9790861 3.9581722,8.8 4.4,8.8 Z" id="矩形" stroke="#141C28" stroke-width="1.6"></path>
+                    <path d="M19.4345651,9.11539799 C18.7056422,5.67862977 15.6539567,3.1 12,3.1 C8.34147995,3.1 5.28673641,5.68507455 4.56271478,9.12827826" id="路径" stroke="#141C28" stroke-width="1.6"></path>
+                    <path d="M19.2271988,19.7684941 C18.4246868,17.3068972 16.3995551,15.3975962 13.8689269,14.7577143" id="路径" stroke="#141C28" stroke-width="1.6" transform="translate(16.548063, 17.263104) scale(1, -1) translate(-16.548063, -17.263104) "></path>
+                    <path d="M12,17.6 C12.3037566,17.6 12.5787566,17.7231217 12.7778175,17.9221825 C12.9768783,18.1212434 13.1,18.3962434 13.1,18.7 L13.1,18.7 L13.1,20.9 C13.1,21.2037566 12.9768783,21.4787566 12.7778175,21.6778175 C12.5787566,21.8768783 12.3037566,22 12,22 C11.6962434,22 11.4212434,21.8768783 11.2221825,21.6778175 C11.0231217,21.4787566 10.9,21.2037566 10.9,20.9 L10.9,20.9 L10.9,18.7 C10.9,18.3962434 11.0231217,18.1212434 11.2221825,17.9221825 C11.4212434,17.7231217 11.6962434,17.6 12,17.6 Z" id="矩形" stroke="#141C28" stroke-width="1.6" transform="translate(12.000000, 19.800000) rotate(-90.000000) translate(-12.000000, -19.800000) "></path>
+                    <path d="M12,17.4 C12.4418278,17.4 12.8,17.0418278 12.8,16.6 L12.8,12.2 C12.8,11.7581722 12.4418278,11.4 12,11.4 C11.5581722,11.4 11.2,11.7581722 11.2,12.2 L11.2,16.6 C11.2,17.0418278 11.5581722,17.4 12,17.4 Z" id="矩形" fill="#2879FF" transform="translate(12.000000, 14.400000) rotate(-90.000000) translate(-12.000000, -14.400000) "></path>
+                    <path d="M19.6,8.8 C20.0418278,8.8 20.4418278,8.9790861 20.7313708,9.26862915 C21.0209139,9.5581722 21.2,9.9581722 21.2,10.4 L21.2,10.4 L21.2,13.6 C21.2,14.0418278 21.0209139,14.4418278 20.7313708,14.7313708 C20.4418278,15.0209139 20.0418278,15.2 19.6,15.2 C19.1581722,15.2 18.7581722,15.0209139 18.4686292,14.7313708 C18.1790861,14.4418278 18,14.0418278 18,13.6 L18,13.6 L18,10.4 C18,9.9581722 18.1790861,9.5581722 18.4686292,9.26862915 C18.7581722,8.9790861 19.1581722,8.8 19.6,8.8 Z" id="矩形" stroke="#141C28" stroke-width="1.6"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/help-card/image/kefu1.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>kefu1</title>
+    <g id="kefu1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M120,23 C156.608043,23 188.388304,46.5953581 199.661532,80.2780288 C211.051034,82.0207384 219.804949,91.7712492 219.996785,103.603116 L220,104 L220,136 C220,149.254834 209.254834,160 196,160 C195.032317,160 194.078011,159.94273 193.140285,159.831393 C178.530355,185.659903 150.885544,202.479655 120,202.479655 L120,202.479655 L120,186.479655 L120.888471,186.473919 C145.229888,186.159523 166.985104,172.944149 178.777954,152.713864 C174.66785,148.480742 172.106022,142.737695 172.003215,136.396884 L172,136 L172,104 C172,95.2094273 176.726056,87.5226842 183.775917,83.3420223 C174.084239,57.1678467 148.897022,39 120,39 C91.1003524,39 65.9148734,57.1705338 56.2218952,83.3415284 C63.1674513,87.4593393 67.8569455,94.9782398 67.9967847,103.603116 L68,104 L68,136 C68,149.254834 57.254834,160 44,160 C30.8777143,160 20.2151543,149.468663 20.0032153,136.396884 L20,136 L20,104 C20,91.9899376 28.8217567,82.0403068 40.3389062,80.2774715 C51.610395,46.5990453 83.3884458,23 120,23 Z M44,96 C39.6650857,96 36.1354571,99.4478378 36.0038068,103.750821 L36,104 L36,136 C36,140.418278 39.581722,144 44,144 C48.3349143,144 51.8645429,140.552162 51.9961932,136.249179 L52,136 L52,104 C52,99.581722 48.418278,96 44,96 Z M196,96 C191.665086,96 188.135457,99.4478378 188.003807,103.750821 L188,104 L188,136 C188,138.046507 188.768444,139.913535 190.03253,141.32828 L197.684606,143.822318 C201.215606,143.065529 203.882093,139.978525 203.996193,136.249179 L204,136 L204,104 C204,99.581722 200.418278,96 196,96 Z" id="形状结合" fill="#141C28" fill-rule="nonzero"></path>
+        <path d="M120,228 C130.49341,228 139,219.49341 139,209 L139,187 C139,176.50659 130.49341,168 120,168 C109.50659,168 101,176.50659 101,187 L101,209 C101,219.49341 109.50659,228 120,228 Z" id="矩形" fill="#5AD8A6" transform="translate(120.000000, 198.000000) rotate(-90.000000) translate(-120.000000, -198.000000) "></path>
+    </g>
+</svg>

package/src/components/help-card/image/okr-shequ.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>OKR-shequ</title>
+    <g id="OKR-shequ" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Stroke-7" points="30 210 210 210 210 30 30 30"></polygon>
+        <g id="编组-2" transform="translate(33.000000, 30.000000)">
+            <g id="编组" transform="translate(87.092025, 89.947853) scale(-1, 1) translate(-87.092025, -89.947853) translate(0.092025, 0.447853)" fill="#141C28" fill-rule="nonzero">
+                <path d="M87.0920245,0.552147239 C120.766744,0.552147239 148.460467,26.1598371 151.762306,58.9643295 C164.907517,67.2266805 173.092025,81.6819025 173.092025,97.5460123 C173.092025,113.94636 164.342911,128.809382 150.494723,136.895354 L161.991835,163.173817 C163.762764,167.221655 161.916965,171.938698 157.869127,173.709627 C153.900659,175.445832 149.288972,173.70575 147.440861,169.822476 L147.333318,169.586919 L132.86883,136.526244 C132.725776,136.237499 132.598591,135.936983 132.488738,135.625396 C131.04791,131.538637 133.123905,127.065224 137.135371,125.508737 L137.37356,125.420569 C138.815358,124.912249 140.213786,124.292166 141.557627,123.566594 C151.052835,118.439904 157.092025,108.529177 157.092025,97.5460123 C157.092025,90.6982358 154.746285,84.2607585 150.663172,79.1376652 C146.199312,100.073665 131.614024,117.562326 111.790665,125.69639 L129.683142,167.397746 L129.781454,167.637303 C131.350735,171.641387 129.466392,176.196032 125.48569,177.904001 C121.425373,179.646129 116.721563,177.766865 114.979435,173.706549 L114.979435,173.706549 L94.0695891,124.972699 L93.9712771,124.733142 C92.9780239,122.198816 93.3683167,119.443931 94.7980101,117.329885 C95.7364222,115.197946 97.5941538,113.492157 100.016969,112.831619 C121.151836,107.069569 136.092025,87.786526 136.092025,65.5521472 C136.092025,38.4901945 114.153977,16.5521472 87.0920245,16.5521472 C60.0300718,16.5521472 38.0920245,38.4901945 38.0920245,65.5521472 C38.0920245,87.6194369 52.8098534,106.794378 73.7261101,112.709161 L73.7261101,112.709161 L73.9694042,112.78207 C74.80771,113.047612 75.5730562,113.439856 76.250187,113.931515 C79.8836394,115.855893 81.4981574,120.276739 79.8587679,124.129451 L79.8587679,124.129451 L58.7723231,173.684487 L58.6671653,173.921119 C56.8583813,177.822867 52.2645094,179.609451 48.2787028,177.913427 C44.2131801,176.183484 42.3198191,171.48533 44.0497628,167.419807 L44.0497628,167.419807 L61.8926218,125.488079 C42.1791557,117.205235 27.7465526,99.6479178 23.4298547,78.705965 C19.1333204,83.8937953 16.6503067,90.5016891 16.6503067,97.5460123 C16.6503067,108.529177 22.689496,118.439904 32.1847047,123.566594 C33.5285449,124.292166 34.9269732,124.912249 36.3687708,125.420569 L36.3687708,125.420569 L36.6069599,125.508737 C40.6184264,127.065224 42.6944208,131.538637 41.2535936,135.625396 C41.1437406,135.936983 41.016555,136.237499 40.8735009,136.526244 L26.4090133,169.586919 L26.3014702,169.822476 C24.4533595,173.70575 19.8416724,175.445832 15.8732039,173.709627 C11.8253661,171.938698 9.97956689,167.221655 11.7504959,163.173817 L11.7504959,163.173817 L23.2476081,136.895354 C9.39942014,128.809382 0.650306748,113.94636 0.650306748,97.5460123 C0.650306748,81.482492 9.04256545,66.8734381 22.4531948,58.6718045 C25.8881498,26.0079402 53.5173277,0.552147239 87.0920245,0.552147239 Z" id="形状结合"></path>
+            </g>
+            <g id="编组" transform="translate(140.349693, 65.447853)"></g>
+            <path d="M70.4178596,67.7484663 C70.4178596,77.0285065 77.9408186,84.5514656 87.2208589,84.5514656 C96.4042321,84.5514656 103.866939,77.1844186 104.021416,68.037889 L104.023858,67.7484663 L117.466258,67.7484663 C117.466258,84.4525388 103.924931,97.993865 87.2208589,97.993865 C70.6838271,97.993865 57.2466029,84.7220111 56.9795121,68.2486292 L56.9754601,67.7484663 L70.4178596,67.7484663 Z" id="路径" fill="#F05E5E" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>

package/src/components/help-card/image/question.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="69px" height="79px" viewBox="0 0 69 79" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>问答</title>
+    <g id="整体框架" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2">
+        <g id="二级菜单-交互说明" transform="translate(-2166.000000, -624.000000)" fill-rule="nonzero">
+            <g id="弹层1" transform="translate(1881.000000, 467.000000)">
+                <g id="猜你想问-+-1.-OKRs-E是什么管理框架？-+-2.-如何使用Tita实践OKRs-E?-+-3.-目标地图—聚焦核心目标战略蒙版" transform="translate(62.000000, 88.000000)">
+                    <g id="问答" transform="translate(247.000000, 115.000000) scale(-1, 1) translate(-247.000000, -115.000000) translate(201.000000, 69.000000)">
+                        <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="92" height="92"></rect>
+                        <path d="M39.0603948,71.6792261 C35.4071521,71.6655148 32.0633498,71.1810495 28.7888251,70.1846963 C28.2438407,70.0201609 27.6572898,70.0247314 27.1215424,70.2212597 C23.957862,71.3912892 20.8265112,72.6435863 17.6766864,73.8501792 C15.7923336,74.5723068 14.9517645,73.923306 15.2565863,71.9305996 C15.6630153,69.2660404 16.0971554,66.6060516 16.6051917,63.9552036 C16.73451,63.2696395 16.5774806,62.8491601 16.1110109,62.387547 C11.714188,57.972514 8.91998848,52.7073815 7.72841251,46.6287129 C5.2436533,33.9549173 10.8412893,21.2948331 21.9072429,14.4711848 C33.2503072,7.47386022 48.0572552,8.46107257 58.3565359,16.8889409 C71.1636684,27.3689313 73.3343688,45.9842826 63.6539687,58.9368742 C57.5021113,67.1682142 49.1056573,71.2450355 39.0603948,71.6792261 Z" id="形状" fill-opacity="0.5" fill="#2879FF"></path>
+                        <path d="M15.5575366,69.6699029 C23.7177312,67.6206299 31.1344313,63.6920907 37.3423826,58.3713324 C36.3616996,57.7740106 35.6775022,56.6896419 35.6683795,55.4904037 C35.6501343,53.6524906 37.2101044,52.1040489 39.080244,52.0948593 C40.2616249,52.0902645 41.3745861,52.8575932 41.9584345,53.9097984 C50.8393171,44.2515653 56.2718447,31.3264417 56.2718447,17.1239686 C56.2718447,16.6782746 56.2672833,16.2279859 56.2535994,15.782292 C46.177652,8.38009719 32.3979158,7.79196501 21.724436,14.4911581 C10.7955225,21.3511686 5.26720728,34.0787165 7.72119538,46.8200488 C8.89801495,52.9311097 11.6530499,58.2242993 15.9999842,62.6628594 C16.4561158,63.1315272 16.6157619,63.5496524 16.4880451,64.2388698 C16.1459463,66.0446194 15.8448995,67.8549638 15.5575366,69.6699029 L15.5575366,69.6699029 Z M49.0667484,30.0720661 C48.0586975,27.3381704 46.1566287,25.1097008 43.3879097,24.0161425 C39.2188668,22.3712103 34.5024659,23.3039512 31.359719,26.5019199 C28.3720569,29.5390713 27.6559303,33.4400417 29.0015186,37.5064244 C29.685716,39.5786714 31.4235774,41.0168383 33.307401,41.9679583 C35.4147291,43.0385427 36.3543602,43.539374 36.3680442,46.1538053 C36.3680442,46.2502958 36.3726055,46.4386819 36.3726055,46.6776105 C36.3862894,48.0790193 37.5220572,49.2093358 38.9132586,49.2002019 L38.9816783,49.2002019 C40.3774411,49.1909567 41.5040862,48.0468558 41.4949635,46.6408523 C41.4904022,45.9608245 41.4858409,45.3864766 41.4767183,45.2026853 C41.2349685,42.1195862 39.6932437,39.7808418 37.0796095,38.1588835 C36.8104918,37.9934713 36.5322515,37.8464383 36.2631339,37.6856209 C34.1375606,36.4266505 33.5856413,35.337687 33.941424,33.1230017 C34.2470321,31.2253565 35.889106,29.5344765 37.7820522,29.0887826 C41.0297093,28.3168591 42.7493255,30.4947861 43.6068529,32.272967 C44.1770174,33.4538261 45.4268181,34.1338539 46.7131092,33.9224939 L46.7906516,33.9087096 C48.5604423,33.623833 49.69621,31.7721356 49.0667484,30.0720661 Z" id="形状" fill-opacity="0.3" fill="#2879FF"></path>
+                        <path d="M29.9889718,33.216694 C28.9363439,32.5018482 28.4077114,31.1541133 28.8853355,29.8928885 C29.9101406,27.1837594 31.8438226,24.9754777 34.6585588,23.891826 C35.4097734,23.6049771 36.1795365,23.4000849 36.9492996,23.2680433 C39.2204611,19.0882582 40.9125329,14.6291894 41.9805825,10.0092467 C35.1315457,9.27618822 28.0552897,10.7286457 21.9667418,14.4531291 C10.8561852,21.2509943 5.2359871,33.8632425 7.7307615,46.4891501 C7.84668967,47.0765075 7.98116636,47.6593118 8.12955443,48.2330097 C16.5658519,45.0744479 24.0753741,39.9157854 29.9889718,33.216694 Z" id="路径" fill-opacity="0.5" fill="#2879FF"></path>
+                        <path d="M39.0049726,48.9962497 L39.0742503,48.9962497 C40.4828963,49.0053352 41.6329057,47.88101 41.6467612,46.4870296 C41.6513797,46.2493674 41.6513797,46.0619798 41.6513797,45.9660009 C41.6698538,43.3654276 42.6166486,42.867251 44.750401,41.8023414 C46.6532277,40.8516925 48.4128806,39.4257191 49.1102759,37.3644563 C50.4727368,33.3196279 49.7430119,29.4393349 46.7225054,26.4182823 C43.5357324,23.2372648 38.76481,22.309468 34.5434905,23.945681 C31.7446725,25.0288724 29.8141347,27.2501001 28.7934436,29.9695045 C28.1607075,31.6605627 29.3107169,33.4978746 31.1073179,33.7903819 L31.1858326,33.8040932 C32.4882528,34.0143329 33.753725,33.3379096 34.3310389,32.1633097 C35.1993191,30.3945543 36.940498,28.2281716 40.2288782,28.9960035 C42.1409419,29.4439053 43.8082246,31.1258227 44.1176649,33.0088388 C44.4779088,35.2117849 43.9144504,36.2949762 41.7668425,37.5472734 C41.4943503,37.7072383 41.2080026,37.853492 40.9401289,38.0180274 C38.2937218,39.6313883 36.7372835,41.9577359 36.4878838,45.0244928 C36.4786468,45.2118803 36.4740283,45.7786133 36.4694098,46.4550366 C36.4555542,47.849017 37.5963266,48.9870535 39.0049726,48.9962497 L39.0049726,48.9962497 Z" id="路径" fill="#F6F8FC" transform="translate(39.193535, 36.074211) scale(-1, 1) translate(-39.193535, -36.074211) "></path>
+                        <path d="M39.4806793,51.8664132 C37.5870896,51.8709932 36.0075586,53.4157977 36.0260327,55.2439687 C36.0445067,57.0447172 37.5963266,58.5803808 39.4114016,58.5940921 C41.1941471,58.6078034 42.8198631,57.0172946 42.8244916,55.2668209 C42.8291002,53.4889246 41.2264767,51.8618524 39.4806793,51.8664132 Z" id="路径" fill="#F6F8FC" transform="translate(39.425182, 55.230297) scale(-1, 1) translate(-39.425182, -55.230297) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/help-card/image/upgrade.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>SJtongzhi</title>
+    <g id="客服" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="激活沟通" transform="translate(-457.000000, -695.000000)">
+            <g id="编组" transform="translate(455.000000, 693.000000)">
+                <g id="编组" transform="translate(10.039301, 10.354149) rotate(-315.000000) translate(-10.039301, -10.354149) translate(3.039301, 0.354149)">
+                    <path d="M8.97742838,15.8575518 C8.98023449,16.3897742 8.9762804,16.9210423 8.97910909,17.4513538 C8.98003084,17.5784373 8.95103953,17.6854601 8.87183331,17.7638258 C8.84092356,17.7944075 8.80228835,17.8211685 8.75399648,17.8421979 C8.58111083,17.9215348 8.42659387,17.8890732 8.28947643,17.764879 C8.20257094,17.6865412 8.12146103,17.6024693 8.03648739,17.5222201 C7.93509819,17.4276409 7.89840499,17.3932485 7.85976782,17.4314756 C7.83851737,17.4525006 7.81726332,17.4945469 7.78441615,17.5595275 C7.58346912,17.9551453 7.3844536,18.3507626 7.18350656,18.7463804 C7.15355751,18.8065829 7.11781452,18.8629644 7.07338176,18.9069257 C7.03088086,18.9489755 6.97872394,18.9814719 6.91304861,19.0005932 C6.71215985,19.0560469 6.53543831,18.9767686 6.42923945,18.7703948 C6.22070315,18.3672016 6.01892802,17.9592297 5.81232356,17.5541252 C5.72350324,17.378325 5.71770865,17.3783259 5.57088835,17.517856 C5.4829891,17.6029118 5.39702105,17.6898782 5.306225,17.7720679 C5.17389463,17.8915297 5.02226467,17.9192652 4.85519948,17.8476294 C4.69296296,17.7769484 4.62055264,17.6479657 4.61961584,17.4788394 C4.61874486,16.9255952 4.61883981,16.3713954 4.61990037,15.8181509 C4.61991739,15.7187771 4.64890576,15.6289537 4.71362303,15.5649232 C4.72038454,15.5582334 4.72714604,15.5515437 4.73390722,15.546765 C4.88748934,15.3986341 5.03911734,15.3823649 5.24867164,15.480748 C6.07047129,15.8714166 6.91936709,15.942938 7.79535898,15.6953121 C7.98852162,15.6398598 8.174927,15.5662537 8.35650603,15.4783157 C8.68392794,15.3186894 8.97555841,15.4982777 8.97742838,15.8575518 L8.97742838,15.8575518 Z" id="路径" fill="#2879FF"></path>
+                    <path d="M6.77278386,0.739700843 C7.15550075,0.739700843 7.54463651,0.951225909 7.92779106,1.27678419 C8.41410155,1.68999188 8.87983204,2.2944368 9.29317606,3.03423098 C10.1403627,4.55050725 10.7566219,6.6248912 10.8324202,8.88182232 L10.8324202,8.88182232 L11.9449382,9.57810334 C12.3423227,9.82656326 12.6255044,10.1950817 12.7715165,10.6107751 C12.9162723,11.0228921 12.9263943,11.4813833 12.7791538,11.9151552 L12.7791538,11.9151552 L11.7370828,14.3724254 L9.79016121,13.460631 C9.01482254,14.3875618 7.89060651,14.5814362 6.77278386,14.5814362 C5.69283528,14.5814362 4.61256852,14.3085753 3.8438986,13.4275361 L3.8438986,13.4275361 L2.40722218,14.5760383 L0.873868809,12.0586534 C0.680641266,11.6056792 0.666690768,11.1160806 0.805438513,10.6744561 C0.944186258,10.2328316 1.23563225,9.83918116 1.65321448,9.57809284 L1.65321448,9.57809284 L2.7130413,8.91540492 C2.79019119,6.75186504 3.43053311,4.63327929 4.30212211,3.06690979 C4.71758579,2.3202624 5.18322795,1.70091958 5.66814266,1.27691182 C6.03516239,0.955991018 6.40561634,0.739700843 6.77278386,0.739700843 Z" id="形状结合" stroke="#141C28" stroke-width="1.33333333"></path>
+                    <ellipse id="椭圆形" stroke="#141C28" cx="6.82871259" cy="6.71309157" rx="1.42541152" ry="1.42288012"></ellipse>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/help-card/image/yuyueyanshi.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>yuyueyanshi</title>
+    <g id="yuyueyanshi" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M170,30 C192.09139,30 210,47.90861 210,70 L210,70 L210,148 C210,168.092728 195.185275,184.725292 175.88311,187.570405 L183.485281,195.171573 C186.609476,198.295767 186.609476,203.361087 183.485281,206.485281 C180.361087,209.609476 175.295767,209.609476 172.171573,206.485281 L172.171573,206.485281 L155.20101,189.514719 C154.735134,189.048843 154.338729,188.539803 154.011794,188.000472 L85.9888061,187.999481 C85.6617567,188.539179 85.2651513,189.048557 84.7989899,189.514719 L67.1213203,207.192388 C63.997126,210.316582 58.9318062,210.316582 55.8076118,207.192388 C52.6834175,204.068194 52.6834175,199.002874 55.8076118,195.87868 L64.1168901,187.570405 C44.8147254,184.725292 30,168.092728 30,148 L30,148 L30,70 C30,47.90861 47.90861,30 70,30 L70,30 Z M70,46 C56.745166,46 46,56.745166 46,70 L46,70 L46,148 C46,161.254834 56.745166,172 70,172 L70,172 L170,172 C183.254834,172 194,161.254834 194,148 L194,148 L194,70 C194,56.745166 183.254834,46 170,46 L170,46 Z" id="形状结合" fill="#141C28" fill-rule="nonzero"></path>
+        <path d="M136.116234,91.2716183 L156.662741,126.351022 C159.935151,131.938064 158.058772,139.120068 152.47173,142.392478 C150.674514,143.445133 148.629311,144 146.546508,144 L105.453492,144 C98.9786407,144 93.7297366,138.751096 93.7297366,132.276244 C93.7297366,130.193441 94.2846034,128.148238 95.3372586,126.351022 L115.883766,91.2716183 C119.156176,85.6845767 126.338181,83.8081972 131.925223,87.0806072 C133.658126,88.0955937 135.101247,89.5387144 136.116234,91.2716183 Z" id="Stroke-11" fill="#2879FF" transform="translate(126.000000, 109.000000) rotate(-270.000000) translate(-126.000000, -109.000000) "></path>
+    </g>
+</svg>